Skip to content
Sign up

flagon-io/g1t

public
0

Commit

People wear their own avatars wherever g1t knows them only by name, and a workspace is never shown as a person. The activity feeds, recent changes, home's most active faces, issue and pull request authors, assignees, comments and the audit log drew a person from their username alone, so everyone got their letter avatar instead of the picture they uploaded. An avatar given no picture now draws the letter at once and lays the person's own picture over it once it loads, from /-/avatar/user/<username> (routes/avatar-user.ts): a redirect to the picture on the usercontent origin, or not found, read from identity's people only, so a workspace's icon can never stand in for someone. Kept five minutes, public like the profile. Agents, the product tour's people, "someone" and workspaces' square avatars are never looked up (image null), so an account with the same name never lends them its face.

Builds and deployments run as the workspace (a wsp_ id), and identity's usernames lookup names a workspace id by its slug, so a deploy read as a person called after the workspace ("syntaqx deployed production"). The project and dashboard feeds (lib/mission.ts) and a repository's Activity page now show a workspace acting as itself as g1t, as home already did, with a test. The feeds' avatars and names open the person's card and link to their profile (UserAvatar in components/user-card.tsx), on a repository's overview and Activity page, the dashboard and the audit log, where someone acted for is a person too; g1t's lines carry its mark rather than a bare "g1t:". Every Tailwind class in the site and sudo is written the way Tailwind spells it (its suggestCanonicalClasses check, against g1t's theme): scrollbar-thin for [scrollbar-width:thin], wrap-break-word for break-words, bg-warn/6 for bg-warn/[0.06], has-focus-visible: for has-[:focus-visible]:, spacing steps for pixel and rem values, and so on, 247 in 111 files. Each is the same CSS; both apps build and the site's tests pass.

syntaqxcommitted Parent74e869bBrowse files
112 files+204−17148 files not counted0/112 viewed
+6−6
114114 {after.map(([label, value], index) => (
115115 <tr key={label} className="border-t border-line align-top">
116116 <td className="py-1.5 pr-4 text-muted">{label}</td>
117− <td className="py-1.5 pr-4 break-words text-faint">{before[index][1]}</td>
118− <td className={`py-1.5 break-words ${value !== before[index][1] ? "font-medium text-fg" : "text-muted"}`}>{value}</td>
117+ <td className="py-1.5 pr-4 wrap-break-word text-faint">{before[index][1]}</td>
118+ <td className={`py-1.5 wrap-break-word ${value !== before[index][1] ? "font-medium text-fg" : "text-muted"}`}>{value}</td>
119119 </tr>
120120 ))}
121121 </tbody>
630630 " · no expiry"
631631 )}
632632 </p>
633− <p className="mt-0.5 text-sm break-words">
633+ <p className="mt-0.5 text-sm wrap-break-word">
634634 {grant.kind === "refund" && grant.refundFor && <span className="text-muted">For {grant.refundFor}{grant.refundDay ? ` (${grant.refundDay})` : ""}: </span>}
635635 {grant.note}
636636 </p>
818818 <EmptyState title="Nothing yet" />
819819 ) : (
820820 <div className="-mx-4 -my-4 overflow-x-auto sm:-mx-5 sm:-my-5">
821− <table className="w-full min-w-[36rem] text-sm">
821+ <table className="w-full min-w-xl text-sm">
822822 <thead>
823823 <tr className="border-b border-line text-left text-xs text-muted">
824824 <th className="px-4 py-2 font-medium sm:pl-5">When</th>
842842 {entry.workspace}
843843 </Link>
844844 )}
845− <span className="break-words">{entry.description}</span>
845+ <span className="wrap-break-word">{entry.description}</span>
846846 {givenParts(entry).map((part) => (
847847 <Badge key={part.label} tone="lavender">
848848 Given · {part.label} {usd(part.micros)}
894894 <When at={entry.createdAt} time />
895895 </span>
896896 </p>
897− {entry.detail && <p className="mt-0.5 text-sm break-words text-fg-soft">{entry.detail}</p>}
897+ {entry.detail && <p className="mt-0.5 text-sm wrap-break-word text-fg-soft">{entry.detail}</p>}
898898 <p className="mt-0.5 flex items-center gap-1 font-mono text-xs text-faint">
899899 <UserRound size={11} />
900900 {entry.by}
+1−1
110110 <span className="hidden group-open:inline">Hide the table</span>
111111 </summary>
112112 <div className="mt-2 overflow-x-auto">
113− <table className="w-full min-w-[34rem] text-xs">
113+ <table className="w-full min-w-136 text-xs">
114114 <thead>
115115 <tr className="border-b border-line text-left text-muted">
116116 <th className="py-1.5 pr-3 font-medium">Month</th>
+1−1
116116 <span className="hidden group-open:inline">Hide the table</span>
117117 </summary>
118118 <div className="mt-2 overflow-x-auto">
119− <table className="w-full min-w-[28rem] text-xs">
119+ <table className="w-full min-w-md text-xs">
120120 <thead>
121121 <tr className="border-b border-line text-left text-muted">
122122 <th className="py-1.5 pr-3 font-medium">Day</th>
+1−1
170170 <ol className="mt-4 space-y-3">
171171 {sorted.map((note) => (
172172 <li key={note.id} className="border-l-2 border-accent/40 pl-3">
173− <p className="text-sm break-words whitespace-pre-line text-fg-soft">{note.text}</p>
173+ <p className="text-sm wrap-break-word whitespace-pre-line text-fg-soft">{note.text}</p>
174174 <p className="mt-1 flex flex-wrap items-center gap-x-2 text-xs text-faint">
175175 <StaffName email={note.by} me={me} />
176176 <When at={note.createdAt} time />
+3−3
143143 to={item.to}
144144 title={item.about}
145145 aria-current={current ? "page" : undefined}
146− className={`relative flex h-8 items-center gap-2 rounded-md pr-2 pl-[2.375rem] text-[0.8125rem] transition-colors ${
146+ className={`relative flex h-8 items-center gap-2 rounded-md pr-2 pl-9.5 text-[0.8125rem] transition-colors ${
147147 current
148− ? "bg-raised font-medium text-fg before:absolute before:top-1.5 before:bottom-1.5 before:left-[1.1875rem] before:z-10 before:w-px before:bg-accent"
148+ ? "bg-raised font-medium text-fg before:absolute before:top-1.5 before:bottom-1.5 before:left-4.75 before:z-10 before:w-px before:bg-accent"
149149 : item.soon
150150 ? "text-faint hover:bg-raised/60 hover:text-muted"
151151 : "text-muted hover:bg-raised/60 hover:text-fg"
185185 )}
186186 <ChevronRight size={14} aria-hidden="true" className="shrink-0 text-faint transition-transform duration-150 group-open/section:rotate-90" />
187187 </summary>
188− <ul className="relative mt-px mb-1 space-y-px before:absolute before:top-1 before:bottom-1 before:left-[1.1875rem] before:w-px before:bg-line">
188+ <ul className="relative mt-px mb-1 space-y-px before:absolute before:top-1 before:bottom-1 before:left-4.75 before:w-px before:bg-line">
189189 {group.items.map((item) => (
190190 <li key={item.to}>
191191 <SubLink item={item} pathname={pathname} counts={counts} />
+1−1
115115 return (
116116 <main className="mx-auto max-w-xl px-4 py-24 text-center">
117117 <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
118− <p className="mt-3 break-words text-muted">{details}</p>
118+ <p className="mt-3 wrap-break-word text-muted">{details}</p>
119119 <div className="mt-8">
120120 <ButtonLink to="/" variant="quiet">
121121 Back to the overview
+1−1
5959 <When at={event.time} time />
6060 </span>
6161 </p>
62− <p className="font-mono text-xs break-words text-faint">
62+ <p className="font-mono text-xs wrap-break-word text-faint">
6363 {metricsLine(event.data.metrics)}
6464 {event.data.run ? ` · run ${event.data.run}` : ""} · sandbox {event.data.sandbox}
6565 </p>
+1−1
138138 </Link>
139139 )}
140140 </p>
141− {entry.detail && <p className="mt-0.5 text-sm break-words text-muted">{entry.detail}</p>}
141+ {entry.detail && <p className="mt-0.5 text-sm wrap-break-word text-muted">{entry.detail}</p>}
142142 </div>
143143 <p className="flex shrink-0 items-center gap-1 text-xs text-faint sm:w-56 sm:justify-end sm:pt-0.5">
144144 {stripe && entry.by === "stripe" ? (
+10−10
4949 <p className="text-sm text-muted">Nothing has drifted.</p>
5050 ) : (
5151 <div className="-mx-4 overflow-x-auto sm:-mx-5">
52− <table className="w-full min-w-[44rem] text-sm">
52+ <table className="w-full min-w-176 text-sm">
5353 <thead>
5454 <tr className="border-b border-line text-left text-xs text-muted">
5555 <th className="px-4 py-2 font-medium sm:px-5">Product</th>
102102
103103 <Section className="mt-6" title="Price versions" description="Every price as it was and will be. A version never changes once written; each charge records the version it was made at.">
104104 <div className="-mx-4 overflow-x-auto sm:-mx-5">
105− <table className="w-full min-w-[44rem] text-sm">
105+ <table className="w-full min-w-176 text-sm">
106106 <thead>
107107 <tr className="border-b border-line text-left text-xs text-muted">
108108 <th className="px-4 py-2 font-medium sm:px-5">Meter</th>
151151 <EmptyState title="No lines yet">The bill is read once a day at 04:17 UTC, or now with “Run the analysis now”.</EmptyState>
152152 ) : (
153153 <div className="-mx-4 overflow-x-auto sm:-mx-5">
154− <table className="w-full min-w-[48rem] text-sm">
154+ <table className="w-full min-w-3xl text-sm">
155155 <thead>
156156 <tr className="border-b border-line text-left text-xs text-muted">
157157 <th className="px-4 py-2 font-medium sm:px-5">Product / meter</th>
217217 </Field>
218218 <div className="flex flex-col justify-end gap-2">
219219 <label className="flex items-center gap-2 text-sm text-muted">
220− <input type="checkbox" name="scaleToOwn" className="accent-[var(--g1t-accent)]" /> Scale to g1t's count
220+ <input type="checkbox" name="scaleToOwn" className="accent-(--g1t-accent)" /> Scale to g1t's count
221221 </label>
222222 <div className="flex gap-2">
223223 <Button type="submit">Save mapping</Button>
238238 <form method="post" action="#guardrails" className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
239239 <input type="hidden" name="intent" value="settings" />
240240 <Field label="Apply small moves on their own">
241− <label className="flex h-[38px] items-center gap-2 text-sm text-fg-soft">
242− <input type="checkbox" name="autoApply" defaultChecked={report.settings.autoApply} className="accent-[var(--g1t-accent)]" /> On
241+ <label className="flex h-9.5 items-center gap-2 text-sm text-fg-soft">
242+ <input type="checkbox" name="autoApply" defaultChecked={report.settings.autoApply} className="accent-(--g1t-accent)" /> On
243243 </label>
244244 </Field>
245245 <Field label="Up to, either way, %">
264264 <Input name="anomalyFloor" inputMode="decimal" defaultValue={dollarsField(report.settings.anomalyFloorMicros)} />
265265 </Field>
266266 <Field label="Card fee on card payments">
267− <label className="flex h-[38px] items-center gap-2 text-sm text-fg-soft">
268− <input type="checkbox" name="cardFee" defaultChecked={report.settings.cardFee ?? true} className="accent-[var(--g1t-accent)]" /> Its own line; never on invoiced billing or bank transfers
267+ <label className="flex h-9.5 items-center gap-2 text-sm text-fg-soft">
268+ <input type="checkbox" name="cardFee" defaultChecked={report.settings.cardFee ?? true} className="accent-(--g1t-accent)" /> Its own line; never on invoiced billing or bank transfers
269269 </label>
270270 </Field>
271271 <div className="sm:col-span-2 lg:col-span-4">
371371 </div>
372372 )}
373373 <div className="-mx-4 mt-3 overflow-x-auto sm:-mx-5">
374− <table className="w-full min-w-[48rem] text-sm">
374+ <table className="w-full min-w-3xl text-sm">
375375 <thead>
376376 <tr className="border-b border-line text-left text-xs text-muted">
377377 <th className="px-4 py-2 font-medium sm:px-5">Meter</th>
419419 function MappingsTable({ report }: { report: CostsReport }) {
420420 return (
421421 <div className="-mx-4 overflow-x-auto sm:-mx-5">
422− <table className="w-full min-w-[44rem] text-sm">
422+ <table className="w-full min-w-176 text-sm">
423423 <thead>
424424 <tr className="border-b border-line text-left text-xs text-muted">
425425 <th className="px-4 py-2 font-medium sm:px-5">Cloudflare</th>
+5−5
8686 description={`Each of g1t's products over the last ${range} days: what customers were charged at price, given away or not, against what it cost. The margin is the charge less the cost, as a share of the charge; at cost plus ${MARKUP_PERCENT}% it is ${percentLabel(marginOnPrice(MARKUP_PERCENT))}. The floor is ${floor}%.`}
8787 >
8888 <div className="-mx-4 overflow-x-auto sm:-mx-5">
89− <table className="w-full min-w-[44rem] text-sm">
89+ <table className="w-full min-w-176 text-sm">
9090 <thead>
9191 <tr className="border-b border-line text-left text-xs text-muted">
9292 <th className="px-4 py-2 font-medium sm:px-5">Product</th>
138138 <p className="text-sm text-muted">No costs shared out yet.</p>
139139 ) : (
140140 <div className="-mx-4 overflow-x-auto sm:-mx-5">
141− <table className="w-full min-w-[34rem] text-sm">
141+ <table className="w-full min-w-136 text-sm">
142142 <thead>
143143 <tr className="border-b border-line text-left text-xs text-muted">
144144 <th className="px-4 py-2 font-medium sm:px-5">Workspace</th>
321321 />
322322 </div>
323323 <div className="mt-3 overflow-x-auto rounded-lg border border-line bg-surface">
324− <table className="w-full min-w-[36rem] text-sm">
324+ <table className="w-full min-w-xl text-sm">
325325 <thead>
326326 <tr className="border-b border-line text-left text-xs text-muted">
327327 <th className="px-4 py-2 font-medium sm:px-5">
452452 </div>
453453 )}
454454 <div className="-mx-4 mt-5 overflow-x-auto sm:-mx-5">
455− <table className="w-full min-w-[34rem] text-sm">
455+ <table className="w-full min-w-136 text-sm">
456456 <thead>
457457 <tr className="border-b border-line text-left text-xs text-muted">
458458 <th className="px-4 py-2 font-medium sm:px-5">{caps.month}, so far</th>
646646 <p className="mt-2 text-sm text-muted">Nothing read yet.</p>
647647 ) : (
648648 <div className="-mx-4 mt-2 overflow-x-auto sm:-mx-5">
649− <table className="w-full min-w-[36rem] text-sm">
649+ <table className="w-full min-w-xl text-sm">
650650 <thead>
651651 <tr className="border-b border-line text-left text-xs text-muted">
652652 <th className="px-4 py-2 font-medium sm:px-5">Metric</th>
+1−1
113113 {credits && credits.months.length > 0 && (
114114 <Section className="mt-6" title="By month" description="The last 12 months by kind. Spent is what credit paid for that month, whenever it was given.">
115115 <div className="-mx-4 -my-4 overflow-x-auto sm:-mx-5 sm:-my-5">
116− <table className="w-full min-w-[34rem] text-sm">
116+ <table className="w-full min-w-136 text-sm">
117117 <thead>
118118 <tr className="border-b border-line text-left text-xs text-muted">
119119 <th className="px-4 py-2 font-medium sm:pl-5">Month</th>
+1−1
8686 key={s.value}
8787 className="flex cursor-pointer gap-2.5 rounded-md border border-line px-3 py-2 has-checked:border-accent/60 has-checked:bg-accent/8"
8888 >
89− <input type="radio" name="severity" value={s.value} required defaultChecked={(v.severity || "sev3") === s.value} className="mt-1 accent-[var(--g1t-accent)]" />
89+ <input type="radio" name="severity" value={s.value} required defaultChecked={(v.severity || "sev3") === s.value} className="mt-1 accent-(--g1t-accent)" />
9090 <span>
9191 <span className="block text-sm font-semibold">{s.label}</span>
9292 <span className="block text-xs text-muted">{s.about}</span>
+6−6
176176 {incident.source === "detected" && <Badge tone="warn">Detected by the checks</Badge>}
177177 {incident.visibility !== "public" && <Badge>Not on the status page</Badge>}
178178 </div>
179− <h1 className="mt-2 text-2xl font-semibold tracking-tight break-words">{incident.title}</h1>
179+ <h1 className="mt-2 text-2xl font-semibold tracking-tight wrap-break-word">{incident.title}</h1>
180180 <p className="mt-1 text-sm text-muted">
181181 Impact began <When at={incident.started_at} time /> · declared by <span className="font-mono text-xs">{incident.created_by === "status" ? "the checks" : incident.created_by}</span>
182182 {incident.commander && (
216216 {!draft && (
217217 <fieldset className="flex flex-wrap gap-2" aria-label="Who sees it">
218218 <label className="inline-flex cursor-pointer items-center gap-2 rounded-md border border-line px-3 py-1.5 text-sm has-checked:border-accent/60 has-checked:bg-accent/10">
219− <input type="radio" name="visibility" value="public" defaultChecked className="accent-[var(--g1t-accent)]" />
219+ <input type="radio" name="visibility" value="public" defaultChecked className="accent-(--g1t-accent)" />
220220 <Globe size={14} aria-hidden="true" /> Public update
221221 </label>
222222 <label className="inline-flex cursor-pointer items-center gap-2 rounded-md border border-line px-3 py-1.5 text-sm has-checked:border-line-strong has-checked:bg-raised">
223− <input type="radio" name="visibility" value="internal" className="accent-[var(--g1t-accent)]" />
223+ <input type="radio" name="visibility" value="internal" className="accent-(--g1t-accent)" />
224224 <Lock size={14} aria-hidden="true" /> Internal note
225225 </label>
226226 </fieldset>
260260 <div className="flex flex-wrap items-center justify-between gap-3">
261261 {!draft ? (
262262 <label className="flex items-center gap-2 text-sm">
263− <input type="checkbox" name="notify" defaultChecked={notifyByDefault(incident.severity)} className="accent-[var(--g1t-accent)]" />
263+ <input type="checkbox" name="notify" defaultChecked={notifyByDefault(incident.severity)} className="accent-(--g1t-accent)" />
264264 Email subscribers (public updates only)
265265 </label>
266266 ) : (
325325 </Field>
326326 <div className="flex flex-wrap items-center justify-between gap-3">
327327 <label className="flex items-center gap-2 text-sm">
328− <input type="checkbox" name="notify" defaultChecked={notifyByDefault(incident.severity)} className="accent-[var(--g1t-accent)]" />
328+ <input type="checkbox" name="notify" defaultChecked={notifyByDefault(incident.severity)} className="accent-(--g1t-accent)" />
329329 Email subscribers
330330 </label>
331331 <Button type="submit" variant="lavender">
376376 {errorFor("resolve") && <Notice tone="error">{errorFor("resolve")}</Notice>}
377377 <Textarea name="message" rows={3} required maxLength={4000} aria-label="Resolution update" placeholder="Pushes work again. A bad deploy was rolled back; nothing was lost." />
378378 <label className="flex items-center gap-2 text-sm">
379− <input type="checkbox" name="notify" defaultChecked={notifyByDefault(incident.severity)} className="accent-[var(--g1t-accent)]" />
379+ <input type="checkbox" name="notify" defaultChecked={notifyByDefault(incident.severity)} className="accent-(--g1t-accent)" />
380380 Email subscribers
381381 </label>
382382 <Button type="submit" variant="lavender" className="w-full">
+1−1
6363 if (invites.length === 0) return <EmptyState title="No invites">Nothing matches.</EmptyState>;
6464 return (
6565 <div className="overflow-x-auto rounded-lg border border-line bg-surface">
66− <table className="w-full min-w-[38rem] text-sm">
66+ <table className="w-full min-w-152 text-sm">
6767 <thead>
6868 <tr className="text-left text-xs text-faint">
6969 <th className="px-4 py-2 font-medium">Code</th>
+2−2
9090 key={c.key}
9191 className="inline-flex cursor-pointer items-center gap-2 rounded-md border border-line px-2.5 py-1.5 text-sm has-checked:border-accent/60 has-checked:bg-accent/10"
9292 >
93− <input type="checkbox" name="components" value={c.key} defaultChecked={failed?.chosen.includes(c.key)} className="accent-[var(--g1t-accent)]" />
93+ <input type="checkbox" name="components" value={c.key} defaultChecked={failed?.chosen.includes(c.key)} className="accent-(--g1t-accent)" />
9494 {c.name}
9595 </label>
9696 ))}
9999 <Section title="Message" description="What will happen and what people will notice. Shown publicly.">
100100 <Textarea name="message" rows={4} required maxLength={4000} aria-label="Message" defaultValue={v.message} placeholder="We are upgrading the database behind git. Pushes may pause for up to five minutes; clones and the website keep working." />
101101 <label className="mt-3 flex items-center gap-2 text-sm">
102− <input type="checkbox" name="notify" defaultChecked className="accent-[var(--g1t-accent)]" />
102+ <input type="checkbox" name="notify" defaultChecked className="accent-(--g1t-accent)" />
103103 Email subscribers now, when it starts, and when it ends
104104 </label>
105105 </Section>
+2−2
9393 <Textarea name="message" rows={3} maxLength={4000} aria-label="Update" placeholder="Running a little long: about 20 more minutes." />
9494 <div className="flex flex-wrap items-center justify-between gap-3">
9595 <label className="flex items-center gap-2 text-sm">
96− <input type="checkbox" name="notify" className="accent-[var(--g1t-accent)]" />
96+ <input type="checkbox" name="notify" className="accent-(--g1t-accent)" />
9797 Email subscribers
9898 </label>
9999 <Button type="submit" name="intent" value="update" variant="lavender">
128128 <Textarea name="message" rows={2} maxLength={4000} placeholder="Said for you when empty." />
129129 </Field>
130130 <label className="flex items-center gap-2 text-sm">
131− <input type="checkbox" name="notify" defaultChecked className="accent-[var(--g1t-accent)]" />
131+ <input type="checkbox" name="notify" defaultChecked className="accent-(--g1t-accent)" />
132132 Email subscribers
133133 </label>
134134 <div className="flex flex-wrap gap-2">
+2−2
194194 <div className="grid gap-5 p-4 sm:p-5 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
195195 <div className="min-w-0 space-y-4">
196196 {row.request && (
197− <blockquote className="border-l-2 border-warn/50 pl-3 text-sm break-words whitespace-pre-line text-fg-soft">
197+ <blockquote className="border-l-2 border-warn/50 pl-3 text-sm wrap-break-word whitespace-pre-line text-fg-soft">
198198 “{row.request.reason}” <span className="text-xs text-faint">— {row.request.createdBy}</span>
199199 </blockquote>
200200 )}
215215 {row.topEntries.slice(0, 5).map((entry) => (
216216 <li key={entry.id} className="flex items-start justify-between gap-3 px-3 py-2">
217217 <span className="min-w-0">
218− <span className="block break-words text-fg-soft">{entry.description}</span>
218+ <span className="block wrap-break-word text-fg-soft">{entry.description}</span>
219219 <span className="font-mono text-faint">
220220 {[entry.repo && (entry.number != null ? `${entry.repo}#${entry.number}` : entry.repo), entry.task, entry.model].filter(Boolean).join(" · ")}
221221 </span>
+1−1
133133 <p className="text-sm text-muted">Nothing given yet this month.</p>
134134 ) : (
135135 <div className="-mx-4 -my-4 overflow-x-auto sm:-mx-5 sm:-my-5">
136− <table className="w-full min-w-[26rem] text-sm">
136+ <table className="w-full min-w-104 text-sm">
137137 <thead>
138138 <tr className="border-b border-line text-left text-xs text-muted">
139139 <th className="px-4 py-2 font-medium sm:pl-5">Source</th>
+1−1
164164 </div>
165165 </dl>
166166 )}
167− <blockquote className="border-l-2 border-line-strong pl-3 text-sm break-words whitespace-pre-line text-fg-soft">{request.reason}</blockquote>
167+ <blockquote className="border-l-2 border-line-strong pl-3 text-sm wrap-break-word whitespace-pre-line text-fg-soft">{request.reason}</blockquote>
168168 {request.answer && (
169169 <p className="text-sm text-muted">
170170 Answer{request.decidedBy ? <> by <span className="font-mono">{request.decidedBy}</span></> : null}: {request.answer}
+2−2
254254 <ul className="divide-y divide-line text-sm">
255255 {user.log.map((event, at) => (
256256 <li key={`${event.createdAt}:${at}`} className="flex flex-col gap-1 py-2 sm:flex-row sm:justify-between sm:gap-4">
257− <span className="min-w-0 break-words">
257+ <span className="min-w-0 wrap-break-word">
258258 {securityEventLabel(event)}
259259 {event.staff && (
260260 <span className="text-muted">
441441 <Input name="confirm" required autoComplete="off" spellCheck={false} className="font-mono" />
442442 </Field>
443443 <label className="flex items-start gap-2 text-sm">
444− <input type="checkbox" name="acknowledge" required className="mt-0.5 accent-[var(--g1t-accent)]" />
444+ <input type="checkbox" name="acknowledge" required className="mt-0.5 accent-(--g1t-accent)" />
445445 <span>
446446 {sole.length === 1 ? (
447447 <>
+1−1
4343 <EmptyState title="Nobody is spending right now" />
4444 ) : (
4545 <div className="overflow-x-auto rounded-lg border border-line bg-surface">
46− <table className="w-full min-w-[46rem] text-sm">
46+ <table className="w-full min-w-184 text-sm">
4747 <thead>
4848 <tr className="border-b border-line text-left text-xs text-muted">
4949 <th className="px-4 py-2 font-medium">Workspace</th>
+2−2
6767 </ul>
6868 </Card>
6969 <Card tone="plain" className="hidden overflow-x-auto sm:block">
70− <table className="w-full min-w-[34rem] text-sm">
70+ <table className="w-full min-w-136 text-sm">
7171 <thead>
7272 <tr className="border-b border-line bg-surface text-left text-xs text-muted">
7373 <th scope="col" className="px-4 py-2.5 font-medium">
7474 Can
7575 </th>
7676 {REPO_ROLES.map((role) => (
77− <th key={role} scope="col" className="w-[4.5rem] px-1 py-2.5 text-center font-medium">
77+ <th key={role} scope="col" className="w-18 px-1 py-2.5 text-center font-medium">
7878 {REPO_ROLE_LABELS[role]}
7979 </th>
8080 ))}
+1−1
9393 <code>
9494 {agent.lang === "sh"
9595 ? agent.code.split("\n").map((line, index) => (
96− <span key={index} className="block whitespace-pre-wrap [overflow-wrap:anywhere]">
96+ <span key={index} className="block whitespace-pre-wrap wrap-anywhere">
9797 <span className="mr-2 text-faint select-none">$</span>
9898 {line}
9999 </span>
+1−1
2424 return (
2525 <section
2626 aria-label="Analytics cookie"
27− className="fixed inset-x-3 bottom-3 z-[60] max-md:bottom-[calc(var(--tabbar-h)+0.75rem)] max-md:in-data-[keyboard=open]:bottom-3 mx-auto max-w-lg rounded-2xl bg-surface p-4 text-sm shadow-2xl shadow-black/50 ring-1 ring-line-strong sm:inset-x-auto sm:right-4 sm:bottom-4"
27+ className="fixed inset-x-3 bottom-3 z-60 max-md:bottom-[calc(var(--tabbar-h)+0.75rem)] max-md:in-data-[keyboard=open]:bottom-3 mx-auto max-w-lg rounded-2xl bg-surface p-4 text-sm shadow-2xl shadow-black/50 ring-1 ring-line-strong sm:inset-x-auto sm:right-4 sm:bottom-4"
2828 >
2929 <p className="leading-6 text-fg-soft">
3030 May g1t count how its pages are used? It sets one analytics cookie, and names inside your workspaces are
+24−3
1010 import { Avatar } from "./ui/avatar";
1111 import { Card } from "./ui/card";
1212 import { Hint } from "./ui/hint";
13+import { UserAvatar } from "./user-card";
14+import { PersonLink } from "./work";
1315
1416 /** Allowed or denied, and by which rule. */
1517 export function OutcomeMark({ entry }: { entry: AuditEntry }) {
2830 );
2931 }
3032
31−/** Who acted, with whoever acted for someone (an app, or an old agent) shown as working for them. */
33+/**
34+ * Who acted, with whoever acted for someone (an app, or an old agent) shown
35+ * as working for them. A person wears their own avatar and opens their
36+ * card; a workspace its square, never a person's face.
37+ */
3238 export function ActorLine({ entry }: { entry: AuditEntry }) {
39+ const person = entry.actorKind === "person" && !entry.agent;
40+ const face = person ? (
41+ <UserAvatar username={entry.actor} size={18} />
42+ ) : (
43+ <Avatar
44+ name={entry.agent ?? entry.actor}
45+ image={null}
46+ size={18}
47+ square={entry.actorKind === "workspace"}
48+ system={entry.actorKind === "system"}
49+ agent={entry.actorKind === "agent" || !!entry.agent}
50+ />
51+ );
3352 return (
3453 <span className="flex min-w-0 items-center gap-2">
35− <Avatar name={entry.agent ?? entry.actor} size={18} square={entry.actorKind === "workspace"} />
54+ {face}
3655 <span className="truncate">
3756 {entry.onBehalfOf ? (
3857 <>
3958 <span className="font-medium">{entry.agent ?? entry.actor}</span>
4059 <span className="text-muted"> on behalf of </span>
41− <span className="font-medium">{entry.onBehalfOf}</span>
60+ <PersonLink name={entry.onBehalfOf} className="font-medium hover:text-accent" />
4261 </>
62+ ) : person ? (
63+ <PersonLink name={entry.actor} className="font-medium hover:text-accent" />
4364 ) : (
4465 <span className="font-medium">{entry.actor}</span>
4566 )}
+1−1
4040 <Form method="post" encType="multipart/form-data" ref={form}>
4141 <input type="hidden" name="intent" value="avatar" />
4242 <label
43− className={`inline-flex cursor-pointer items-center gap-2 rounded-md px-3.5 py-2 text-sm font-medium ring-1 ring-line transition-colors hover:ring-line-strong has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-accent ${
43+ className={`inline-flex cursor-pointer items-center gap-2 rounded-md px-3.5 py-2 text-sm font-medium ring-1 ring-line transition-colors hover:ring-line-strong has-focus-visible:ring-2 has-focus-visible:ring-accent ${
4444 busy ? "pointer-events-none opacity-50" : ""
4545 }`}
4646 >
+1−1
289289 {current.issue.title} <span className="font-normal text-faint">#{current.issue.number}</span>
290290 </Link>
291291 {current.issue.body && (
292− <div className="mt-2 max-h-48 overflow-hidden text-muted [&_*]:text-[0.8125rem]! [&_*]:leading-5! mask-[linear-gradient(to_bottom,black_70%,transparent)]">
292+ <div className="mt-2 max-h-48 overflow-hidden text-muted **:text-[0.8125rem]! **:leading-5! mask-[linear-gradient(to_bottom,black_70%,transparent)]">
293293 <Markdown source={current.issue.body} repo={repoAt(base)} />
294294 </div>
295295 )}
+4−4
136136 <section
137137 aria-label="Notices"
138138 aria-live="polite"
139− className="pointer-events-none fixed z-[66] flex flex-col items-center gap-2 max-sm:inset-x-3 max-sm:top-[calc(env(safe-area-inset-top)+0.75rem)] sm:bottom-28 sm:left-1/2 sm:w-[min(26rem,calc(100vw-2rem))] sm:-translate-x-1/2"
139+ className="pointer-events-none fixed z-66 flex flex-col items-center gap-2 max-sm:inset-x-3 max-sm:top-[calc(env(safe-area-inset-top)+0.75rem)] sm:bottom-28 sm:left-1/2 sm:w-[min(26rem,calc(100vw-2rem))] sm:-translate-x-1/2"
140140 >
141141 {list.map((toast) => (
142142 <div
239239 {card.fields.map((field) => (
240240 <div key={field.label} className="min-w-0">
241241 <dt className="text-[0.6875rem] font-medium text-faint">{field.label}</dt>
242− <dd className="line-clamp-2 text-xs break-words text-fg-soft">
242+ <dd className="line-clamp-2 text-xs wrap-break-word text-fg-soft">
243243 {field.value}
244244 </dd>
245245 </div>
292292 <div
293293 ref={box}
294294 id={id}
295− className={cn("card-md relative rounded-lg border border-line/70 bg-bg/40 px-3 py-2", !open && "max-h-[11.5rem] overflow-hidden")}
295+ className={cn("card-md relative rounded-lg border border-line/70 bg-bg/40 px-3 py-2", !open && "max-h-46 overflow-hidden")}
296296 >
297297 <Markdown source={body} repo={repoAt(repo)} />
298298 {folded && (
299− <span aria-hidden="true" className="pointer-events-none absolute inset-x-0 bottom-0 h-12 rounded-b-lg bg-gradient-to-t from-surface to-transparent" />
299+ <span aria-hidden="true" className="pointer-events-none absolute inset-x-0 bottom-0 h-12 rounded-b-lg bg-linear-to-t from-surface to-transparent" />
300300 )}
301301 </div>
302302 {(folded || open) && (
+9−9
639639 const element = event.currentTarget;
640640 stick.current = atBottom(element);
641641 }}
642− className="min-h-0 grow overflow-y-auto overscroll-contain [scrollbar-gutter:stable] [scrollbar-width:thin]"
642+ className="min-h-0 grow overflow-y-auto overscroll-contain scrollbar-gutter-stable scrollbar-thin"
643643 >
644− <div className="mx-auto flex min-h-full max-w-[56rem] flex-col justify-end px-2 pt-6 pb-3 sm:px-4">
644+ <div className="mx-auto flex min-h-full max-w-4xl flex-col justify-end px-2 pt-6 pb-3 sm:px-4">
645645 {older ? (
646646 <div className="flex justify-center pb-4">
647647 <Button
682682 </div>
683683 </div>
684684 <div className="shrink-0 px-2 pb-3 sm:px-4 sm:pb-4 max-md:pb-[max(0.75rem,env(safe-area-inset-bottom))] in-data-[keyboard=open]:pb-2">
685− <div className="mx-auto max-w-[56rem]">
685+ <div className="mx-auto max-w-4xl">
686686 <TypingLine typers={typers} />
687687 {archived ? (
688688 <Card className="flex flex-wrap items-center justify-between gap-3 px-4 py-3">
10171017 .reverse();
10181018 const time = card ? localTime(card.timezone, Date.now()) : null;
10191019 return (
1020− <div className="min-h-0 grow overflow-y-auto p-5 [scrollbar-width:thin]">
1020+ <div className="min-h-0 grow overflow-y-auto p-5 scrollbar-thin">
10211021 <WithPresence person={{ username }} size={88}>
10221022 <Avatar name={username} image={card?.avatar ?? null} size={88} />
10231023 </WithPresence>
12181218 {...press}
12191219 aria-label={`${shownName(author)}, ${time}`}
12201220 className={`group/message relative flex gap-3 rounded-lg px-2 transition-colors hover:bg-surface/70 sm:px-3 max-md:min-h-11 max-md:[-webkit-touch-callout:none] max-md:active:bg-surface/70 ${head ? "mt-3 pt-1 pb-1" : "py-0.5"} ${
1221− threadOpen ? "bg-accent/[0.06] hover:bg-accent/[0.08]" : ""
1221+ threadOpen ? "bg-accent/6 hover:bg-accent/8" : ""
12221222 }`}
12231223 >
12241224 <div className="w-9 shrink-0">
12851285 )}
12861286 </div>
12871287 {!inThread && onThread && !message.pending && (
1288− <Card radius="lg" className="absolute -top-3 right-3 hidden p-0.5 shadow-lg shadow-black/30 group-hover/message:flex group-focus-within/message:flex has-[[data-state=open]]:flex">
1288+ <Card radius="lg" className="absolute -top-3 right-3 hidden p-0.5 shadow-lg shadow-black/30 group-hover/message:flex group-focus-within/message:flex has-data-[state=open]:flex">
12891289 <AddReaction messageId={message.id} />
12901290 <Hint label="Reply in thread">
12911291 <Button
13891389 <aside
13901390 {...swipe}
13911391 aria-label={title}
1392− className="fixed inset-0 z-40 flex flex-col bg-bg lg:static lg:z-auto lg:w-[22rem] lg:shrink-0 lg:border-l lg:border-line xl:w-[24rem] max-md:top-(--vv-top,0px) max-md:bottom-auto max-md:h-(--vv-height,100dvh) max-md:pb-[env(safe-area-inset-bottom)]"
1392+ className="fixed inset-0 z-40 flex flex-col bg-bg lg:static lg:z-auto lg:w-88 lg:shrink-0 lg:border-l lg:border-line xl:w-[24rem] max-md:top-(--vv-top,0px) max-md:bottom-auto max-md:h-(--vv-height,100dvh) max-md:pb-[env(safe-area-inset-bottom)]"
13931393 >
13941394 <div className="flex h-14 shrink-0 items-center gap-2 border-b border-line px-4 max-md:h-[calc(3.5rem+env(safe-area-inset-top))] max-md:pt-[env(safe-area-inset-top)] max-md:pl-1.5">
13951395 <Button type="button" onClick={onClose} aria-label="Back" variant="ghost" size="icon-lg" className="rounded-full active:bg-raised lg:hidden">
14491449 onScroll={(event) => {
14501450 stick.current = atBottom(event.currentTarget);
14511451 }}
1452− className="min-h-0 grow overflow-y-auto overscroll-contain px-1 py-3 [scrollbar-width:thin]"
1452+ className="min-h-0 grow overflow-y-auto overscroll-contain px-1 py-3 scrollbar-thin"
14531453 >
14541454 {/* One box for what scrolls, so its growing is seen (./stick.ts). */}
14551455 <div>
16551655 const channel = data.channel;
16561656 const humans = members.filter((m) => m.member.kind === "user");
16571657 return (
1658− <div className="min-h-0 grow overflow-y-auto p-4 [scrollbar-width:thin]">
1658+ <div className="min-h-0 grow overflow-y-auto p-4 scrollbar-thin">
16591659 {channel.kind === "channel" && <ChannelAbout channel={channel} joined={joined} canManage={canManage} onUpdate={onUpdate} />}
16601660 <section className="mt-5">
16611661 <div className="mb-1 flex items-center justify-between px-1">
+3−3
569569 />
570570 )}
571571 <div
572− className={`rounded-xl border border-line-strong bg-surface transition-colors focus-within:border-accent/35 focus-within:ring-4 focus-within:ring-accent/[0.06] ${disabled ? "opacity-60" : ""}`}
572+ className={`rounded-xl border border-line-strong bg-surface transition-colors focus-within:border-accent/35 focus-within:ring-4 focus-within:ring-accent/6 ${disabled ? "opacity-60" : ""}`}
573573 >
574574 {toolbar && (
575575 <div
576576 role="toolbar"
577577 aria-label="Formatting"
578− className="flex items-center gap-0.5 overflow-x-auto border-b border-line px-1.5 py-1 [scrollbar-width:none]"
578+ className="flex items-center gap-0.5 overflow-x-auto border-b border-line px-1.5 py-1 scrollbar-none"
579579 >
580580 {tool("Bold", <Bold size={15} strokeWidth={2.4} />, state?.bold, () => chain().toggleBold().run())}
581581 {tool("Italic", <Italic size={15} />, state?.italic, () => chain().toggleItalic().run())}
593593 </div>
594594 )}
595595 <div
596− className={`overflow-y-auto px-3.5 text-[0.9375rem] leading-6 text-fg [scrollbar-width:thin] ${compact ? "pt-2.5 pb-1" : "pt-3 pb-1.5"}`}
596+ className={`overflow-y-auto px-3.5 text-[0.9375rem] leading-6 text-fg scrollbar-thin ${compact ? "pt-2.5 pb-1" : "pt-3 pb-1.5"}`}
597597 style={{ maxHeight: MAX_HEIGHT }}
598598 onClick={(event) => {
599599 // The whole box takes focus, not only its first line.
+1−1
4040 return (
4141 <span
4242 className={cn(
43− "inline-flex h-4 shrink-0 items-center rounded-[4px] bg-accent/15 px-1 text-[0.5625rem] font-semibold tracking-[0.06em] text-accent uppercase",
43+ "inline-flex h-4 shrink-0 items-center rounded-sm bg-accent/15 px-1 text-[0.5625rem] font-semibold tracking-[0.06em] text-accent uppercase",
4444 deleted && "bg-raised text-muted",
4545 className,
4646 )}
+2−2
3131 if (count <= 0) return null;
3232 return (
3333 <span
34− className={`min-w-5 shrink-0 rounded-full group-hover/row:invisible px-1.5 text-center text-[0.6875rem] leading-[1.125rem] font-semibold tabular-nums ${
34+ className={`min-w-5 shrink-0 rounded-full group-hover/row:invisible px-1.5 text-center text-[0.6875rem] leading-4.5 font-semibold tabular-nums ${
3535 entry.mentions > 0 ? "bg-accent text-bg" : "bg-line-strong text-fg"
3636 }`}
3737 >
173173 {/* A phone's list (no heading): room at the end so the compose button never covers the last row. */}
174174 <nav
175175 aria-label="Conversations"
176− className={`min-h-0 grow overflow-y-auto px-2.5 pt-3 [scrollbar-width:thin] ${heading ? "pb-4" : "pb-[calc(5.5rem+env(safe-area-inset-bottom))]"}`}
176+ className={`min-h-0 grow overflow-y-auto px-2.5 pt-3 scrollbar-thin ${heading ? "pb-4" : "pb-[calc(5.5rem+env(safe-area-inset-bottom))]"}`}
177177 >
178178 {loading ? (
179179 <SidebarSkeleton />
+4−4
3030 codeLink?: (href: string) => string;
3131 };
3232
33−const PILL = "rounded-[4px] px-1 py-px font-medium";
33+const PILL = "rounded-sm px-1 py-px font-medium";
3434
3535 function SpanView({ span, context }: { span: Span; context: TextContext }): ReactNode {
3636 const emoji = useEmojiContext();
3838 case "text":
3939 return renderEmoji(span.v, emoji.byName, emoji.usercontent);
4040 case "code":
41− return <code className="rounded-[4px] border border-line bg-raised px-1 py-px font-mono text-[0.84em] text-fg-soft">{span.v}</code>;
41+ return <code className="rounded-sm border border-line bg-raised px-1 py-px font-mono text-[0.84em] text-fg-soft">{span.v}</code>;
4242 case "strong":
4343 return <strong className="font-semibold text-fg">{spans(span.c, context)}</strong>;
4444 case "em":
232232 }, [language, code]);
233233 return (
234234 <div className="group/code relative my-1">
235− <pre className="overflow-x-auto rounded-md border border-line bg-bg px-3 py-2 pointer-coarse:pr-10 font-mono text-[0.8125rem] leading-relaxed text-fg-soft [scrollbar-width:thin]">
235+ <pre className="overflow-x-auto rounded-md border border-line bg-bg px-3 py-2 pointer-coarse:pr-10 font-mono text-[0.8125rem] leading-relaxed text-fg-soft scrollbar-thin">
236236 <code>
237237 {rows
238238 ? rows.map((row, index) => (
277277 if (onlyEmoji(body)) return <p className="text-3xl leading-tight">{body.trim()}</p>;
278278 if (onlyEmojiOrCustom(body, emoji.byName)) return <p className="text-3xl leading-tight">{renderEmoji(body.trim(), emoji.byName, emoji.usercontent, 32)}</p>;
279279 return (
280− <div className="space-y-1.5 text-[0.9375rem] leading-[1.55] break-words text-fg-soft">
280+ <div className="space-y-1.5 text-[0.9375rem] leading-[1.55] wrap-break-word text-fg-soft">
281281 {parsed.map((block, index) => (
282282 <BlockView key={index} block={block} context={context} />
283283 ))}
+1−1
119119 >
120120 <Mark state={checks.state} />
121121 </PopoverTrigger>
122− <PopoverContent align="start" className="w-[28rem] p-0">
122+ <PopoverContent align="start" className="w-md p-0">
123123 <ChecksList checks={checks} />
124124 </PopoverContent>
125125 </Popover>
+2−2
252252 <nav aria-label="Categories" className={cn(nav === "sidebar" && "md:sticky md:top-20 md:self-start")}>
253253 <ul
254254 className={cn(
255− "-mx-4 flex gap-1.5 overflow-x-auto px-4 pb-1 [scrollbar-width:none] sm:mx-0 sm:px-0",
255+ "-mx-4 flex gap-1.5 overflow-x-auto px-4 pb-1 scrollbar-none sm:mx-0 sm:px-0",
256256 nav === "sidebar" && "md:mx-0 md:flex-col md:gap-px md:overflow-visible md:px-0",
257257 )}
258258 >
407407 )}
408408 >
409409 <div className="flex items-start gap-3">
410− <span className={cn(soon && "opacity-70 grayscale-[35%]")}>
410+ <span className={cn(soon && "opacity-70 grayscale-35")}>
411411 <ConnectorMark view={view} />
412412 </span>
413413 <div className="min-w-0 grow">
+3−3
6969 <Card asChild tone="plain" className="bg-surface/50 px-4 pt-3.5 pb-3">
7070 <section aria-label="Contributions">
7171 <h2 className="text-sm font-medium">{heading}</h2>
72− <div ref={scroller} className="mt-3 overflow-x-auto overflow-y-hidden pb-1 [scrollbar-width:thin]">
72+ <div ref={scroller} className="mt-3 overflow-x-auto overflow-y-hidden pb-1 scrollbar-thin">
7373 <div className="flex w-max text-[0.625rem] leading-none text-faint">
7474 {/* The weekdays, under the months' row. */}
7575 <div aria-hidden="true" className="mr-1.5 flex shrink-0 flex-col" style={{ gap: GAP, paddingTop: 16 }}>
104104 data-date={day.date}
105105 data-count={day.count}
106106 data-commits={day.commits}
107− className={`block rounded-[2px] ${SHADES[day.level]} ${hovered?.date === day.date ? "ring-1 ring-fg/60" : ""}`}
107+ className={`block rounded-xs ${SHADES[day.level]} ${hovered?.date === day.date ? "ring-1 ring-fg/60" : ""}`}
108108 style={{ width: CELL, height: CELL }}
109109 />
110110 ) : (
131131 <div aria-hidden="true" className="mt-2 flex items-center justify-end gap-1 text-[0.6875rem] text-faint">
132132 <span className="mr-1">Less</span>
133133 {([0, 1, 2, 3, 4] as Level[]).map((level) => (
134− <span key={level} className={`block rounded-[2px] ${SHADES[level]}`} style={{ width: CELL, height: CELL }} />
134+ <span key={level} className={`block rounded-xs ${SHADES[level]}`} style={{ width: CELL, height: CELL }} />
135135 ))}
136136 <span className="ml-1">More</span>
137137 </div>
+1−1
233233 return (
234234 <div className="flex min-w-0 items-baseline gap-3">
235235 <dt className="w-16 shrink-0 text-faint">{term}</dt>
236− <dd className="min-w-0 break-words text-fg-soft">{children}</dd>
236+ <dd className="min-w-0 wrap-break-word text-fg-soft">{children}</dd>
237237 </div>
238238 );
239239 }
+3−3
3030
3131 const ROW_STYLES: Record<DiffLine["kind"], string> = {
3232 context: "",
33− add: "bg-success/[0.09]",
34− delete: "bg-danger/[0.09]",
33+ add: "bg-success/9",
34+ delete: "bg-danger/9",
3535 };
3636
3737 const GUTTER_STYLES: Record<DiffLine["kind"], string> = {
489489 <Checkbox
490490 checked={viewed}
491491 onCheckedChange={(checked) => onViewed(checked === true)}
492− className="size-3.5 rounded-[4px] [&_svg]:size-2.5"
492+ className="size-3.5 rounded-sm [&_svg]:size-2.5"
493493 />
494494 <span className="sr-only sm:not-sr-only">Viewed</span>
495495 </label>
+2−2
209209 <input type="hidden" name="intent" value="email-privacy" />
210210 <SwitchCard name="private" defaultChecked={data.privateEmail} title="Keep my email address private">
211211 Merges and other commits g1t makes for you on the web, or an agent makes for you, use{" "}
212− <span className="font-mono text-fg [overflow-wrap:anywhere]">{data.noreply}</span> instead of your primary address.
212+ <span className="font-mono text-fg wrap-anywhere">{data.noreply}</span> instead of your primary address.
213213 </SwitchCard>
214214 <SwitchCard name="block" defaultChecked={data.blockPrivatePushes} title="Block pushes that expose my email">
215215 While your address is private, a push is refused if a commit in it has one of your confirmed
217217 </SwitchCard>
218218 <div className="flex flex-wrap items-center justify-between gap-3">
219219 <p className="text-xs text-faint">
220− Commits g1t makes for you now carry <span className="font-mono [overflow-wrap:anywhere]">{data.commitEmail}</span>.
220+ Commits g1t makes for you now carry <span className="font-mono wrap-anywhere">{data.commitEmail}</span>.
221221 </p>
222222 <SubmitButton variant="outline" pending="Saving…" match={{ intent: "email-privacy" }}>
223223 Save
+4−4
101101
102102 let index = 0;
103103 return (
104− <div className="flex h-[26rem] w-[22.5rem] max-w-[calc(100vw-1rem)] flex-col" onKeyDown={onKeyDown}>
104+ <div className="flex h-104 w-90 max-w-[calc(100vw-1rem)] flex-col" onKeyDown={onKeyDown}>
105105 <div className="flex items-center gap-2 border-b border-line p-2">
106106 <label className="flex h-8 min-w-0 grow items-center gap-2 rounded-md border border-line-strong bg-bg px-2 focus-within:border-accent/50">
107107 <Search size={14} className="shrink-0 text-faint" />
158158 </div>
159159 </div>
160160 {!query.trim() && (
161− <nav aria-label="Emoji groups" className="flex shrink-0 items-center gap-0.5 overflow-x-auto border-b border-line px-1.5 py-1 [scrollbar-width:none]">
161+ <nav aria-label="Emoji groups" className="flex shrink-0 items-center gap-0.5 overflow-x-auto border-b border-line px-1.5 py-1 scrollbar-none">
162162 {sections.map((section) => (
163163 <Hint key={section.key} label={section.title}>
164164 <Button
175175 ))}
176176 </nav>
177177 )}
178− <div ref={grid} id={list} role="listbox" aria-label="Emoji" className="relative min-h-0 grow overflow-y-auto px-2 pb-2 [scrollbar-width:thin]">
178+ <div ref={grid} id={list} role="listbox" aria-label="Emoji" className="relative min-h-0 grow overflow-y-auto px-2 pb-2 scrollbar-thin">
179179 {!data && !query.trim() && <p className="px-1 py-6 text-center text-sm text-faint">Loading emoji…</p>}
180180 {sections.map((section) => (
181181 <section key={section.key} data-section={section.key} aria-label={section.title}>
182− <h3 className="sticky top-0 z-[1] flex items-center justify-between bg-raised/95 px-1 pt-2 pb-1 text-[0.6875rem] font-semibold tracking-wide text-faint uppercase backdrop-blur">
182+ <h3 className="sticky top-0 z-1 flex items-center justify-between bg-raised/95 px-1 pt-2 pb-1 text-[0.6875rem] font-semibold tracking-wide text-faint uppercase backdrop-blur">
183183 {section.title}
184184 {section.key === "custom" && manageHref && (
185185 <Link to={manageHref} className="font-medium tracking-normal normal-case text-accent hover:underline">
+1−1
347347 </p>
348348 <div className="mt-2 flex items-center gap-2">
349349 <span className="flex h-6 items-center gap-1 rounded-full border border-accent/60 bg-accent/15 px-1.5 text-xs font-medium text-accent">
350− <img src={preview} alt="" className="size-[15px] object-contain" />3
350+ <img src={preview} alt="" className="size-3.75 object-contain" />3
351351 </span>
352352 <img src={preview} alt="" className="size-9 object-contain" />
353353 <span className="ml-auto font-mono text-xs text-faint">:{clean || "name"}:</span>
+4−4
109109 onChange={(e) => setDraft(e.target.value)}
110110 onBlur={() => draft !== value && onChange(draft)}
111111 onKeyDown={(e) => e.stopPropagation()}
112− className={`w-full resize-y rounded-md border border-line bg-bg px-2.5 py-2 text-[0.8125rem] leading-relaxed text-fg outline-none focus:border-[var(--color-accent)] ${mono ? "font-mono" : ""}`}
112+ className={`w-full resize-y rounded-md border border-line bg-bg px-2.5 py-2 text-[0.8125rem] leading-relaxed text-fg outline-none focus:border-(--color-accent) ${mono ? "font-mono" : ""}`}
113113 />
114114 );
115115 }
202202 }, [url]);
203203 const shown = card && card !== "missing" ? card : null;
204204 const state = shown?.state ?? null;
205− const tone = state === "open" ? "text-success" : state === "merged" ? "text-merged" : state === "closed" ? "text-danger" : "text-[var(--g1t-muted)]";
205+ const tone = state === "open" ? "text-success" : state === "merged" ? "text-merged" : state === "closed" ? "text-danger" : "text-(--g1t-muted)";
206206 return (
207207 <a
208208 href={shown?.href ?? url}
267267 const p = inlineContent.props;
268268 if (p.kind === "page") {
269269 return (
270− <a href={p.href || "#"} className="rounded px-0.5 font-medium text-[var(--color-accent)] no-underline hover:underline">
270+ <a href={p.href || "#"} className="rounded px-0.5 font-medium text-(--color-accent) no-underline hover:underline">
271271 <FileText size={13} className="mr-0.5 inline -translate-y-px" aria-hidden="true" />
272272 {p.name || "Untitled"}
273273 </a>
274274 );
275275 }
276− return <span className={`rounded px-1 py-px font-medium ${p.kind === "agent" ? "bg-[color-mix(in_srgb,var(--color-accent)_15%,transparent)] text-[var(--color-accent)]" : "bg-info/12 text-info"}`}>@{p.name}</span>;
276+ return <span className={`rounded px-1 py-px font-medium ${p.kind === "agent" ? "bg-[color-mix(in_srgb,var(--color-accent)_15%,transparent)] text-(--color-accent)" : "bg-info/12 text-info"}`}>@{p.name}</span>;
277277 },
278278 },
279279 );
+1−1
311311 </div>
312312 {showComments && (
313313 <aside ref={comments} aria-label="Comments" className="scroll-mt-20 max-xl:border-t max-xl:border-line max-xl:pt-6">
314− <div className="xl:sticky xl:top-[calc(var(--topbar-h)+1.5rem)] xl:max-h-[calc(100dvh-var(--topbar-h)-2.5rem)] xl:overflow-y-auto xl:[scrollbar-width:thin]">
314+ <div className="xl:sticky xl:top-[calc(var(--topbar-h)+1.5rem)] xl:max-h-[calc(100dvh-var(--topbar-h)-2.5rem)] xl:overflow-y-auto xl:scrollbar-thin">
315315 <ThreadsSidebar filter="all" sort="position" />
316316 </div>
317317 </aside>
+1−1
1717 if (!text.trim()) return <p className="text-xs text-faint italic">{tone === "del" ? "Nothing removed" : "Nothing added"}</p>;
1818 return (
1919 <pre
20− className={`max-h-56 overflow-auto rounded-md px-2.5 py-2 font-sans text-[0.8125rem] leading-relaxed whitespace-pre-wrap [scrollbar-width:thin] ${
20+ className={`max-h-56 overflow-auto rounded-md px-2.5 py-2 font-sans text-[0.8125rem] leading-relaxed whitespace-pre-wrap scrollbar-thin ${
2121 tone === "del" ? "bg-danger/8 text-fg-soft line-through decoration-danger/60" : "bg-success/10 text-fg"
2222 }`}
2323 >
+2−2
130130 <Skeleton className="h-6 w-44" />
131131 </div>
132132 ) : (
133− <ul className="max-h-64 space-y-0.5 overflow-y-auto [scrollbar-width:thin]">
133+ <ul className="max-h-64 space-y-0.5 overflow-y-auto scrollbar-thin">
134134 <Row face={<Face who={access.owner} size={26} />} name={access.owner.display_name} sub={`@${access.owner.name}`} end={<span className="text-xs text-faint">Owner</span>} />
135135 {access.rows.map((r) => {
136136 const face = r.profile.kind === "team" ? <TeamFace /> : <Face who={r.profile} size={26} />;
296296
297297 function TeamFace() {
298298 return (
299− <span className="flex size-[26px] shrink-0 items-center justify-center rounded-full bg-raised text-muted">
299+ <span className="flex size-6.5 shrink-0 items-center justify-center rounded-full bg-raised text-muted">
300300 <Users size={13} />
301301 </span>
302302 );
+1−1
379379 </Button>
380380 )}
381381 </div>
382− <nav aria-label="Artifacts" className="min-h-0 grow overflow-y-auto px-2.5 pt-3 pb-4 [scrollbar-width:thin]">
382+ <nav aria-label="Artifacts" className="min-h-0 grow overflow-y-auto px-2.5 pt-3 pb-4 scrollbar-thin">
383383 <form
384384 role="search"
385385 onSubmit={(e) => {
+2−2
6969 /** Hosts in a compact list. */
7070 function Hosts({ hosts }: { hosts: string[] }) {
7171 return (
72− <span className="font-mono text-xs break-words text-faint">{hosts.length ? hosts.join(", ") : "none"}</span>
72+ <span className="font-mono text-xs wrap-break-word text-faint">{hosts.length ? hosts.join(", ") : "none"}</span>
7373 );
7474 }
7575
204204 {inheritedWorkflowDomains.length > 0 && (
205205 <p className="mt-2 text-xs text-faint">
206206 From the workspace:{" "}
207− <span className="font-mono break-words">{inheritedWorkflowDomains.map(workflowDomainLine).join("; ")}</span>
207+ <span className="font-mono wrap-break-word">{inheritedWorkflowDomains.map(workflowDomainLine).join("; ")}</span>
208208 </p>
209209 )}
210210 </Card>
+3−3
608608 <p className="mt-4 text-sm text-muted">Nothing on the statement {inSpan(span)}.</p>
609609 ) : (
610610 <>
611− <div className="mt-4 flex h-2.5 gap-[2px] overflow-hidden rounded-full" role="img" aria-label="Spend by kind of charge">
611+ <div className="mt-4 flex h-2.5 gap-0.5 overflow-hidden rounded-full" role="img" aria-label="Spend by kind of charge">
612612 {spend.lines.map((line) => (
613− <span key={line.kind} className={`h-full min-w-[3px] ${kindColour(line.kind)}`} style={{ flexGrow: line.micros }} />
613+ <span key={line.kind} className={`h-full min-w-0.75 ${kindColour(line.kind)}`} style={{ flexGrow: line.micros }} />
614614 ))}
615615 </div>
616616 <ul className="mt-3 space-y-2">
617617 {spend.lines.map((line) => (
618618 <li key={line.kind} className="flex items-center gap-2 text-sm">
619− <span className={`size-2 shrink-0 rounded-[2px] ${kindColour(line.kind)}`} aria-hidden />
619+ <span className={`size-2 shrink-0 rounded-xs ${kindColour(line.kind)}`} aria-hidden />
620620 <span className="min-w-0 grow truncate text-fg-soft">{line.kind}</span>
621621 <span className="text-fg tabular-nums">{money(line.micros)}</span>
622622 </li>
+1−1
198198 export function InboxTabs({ tab, counts, onChange }: { tab: InboxTab; counts: InboxCounts | null; onChange: (tab: InboxTab) => void }) {
199199 return (
200200 <Tabs value={tab} onValueChange={(value) => onChange(value as InboxTab)}>
201− <TabsList className="flex w-full overflow-x-auto [scrollbar-width:none]">
201+ <TabsList className="flex w-full overflow-x-auto scrollbar-none">
202202 {INBOX_TABS.map((entry) => {
203203 const count = tabCount(counts, entry.tab);
204204 return (
+12−7
2929 import { Unavailable } from "./mission";
3030 import { SubmitButton, TimeAgo } from "./ui";
3131 import { Avatar } from "./ui/avatar";
32+import { UserAvatar } from "./user-card";
33+import { PersonLink } from "./work";
3234 import { Card } from "./ui/card";
3335 import { Hint } from "./ui/hint";
3436 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from "./ui/dropdown-menu";
243245 <Facts facts={row.facts} />
244246 </div>
245247 </div>
246− <div className="rounded-lg border border-warn/20 bg-warn/[0.06] p-3.5 md:col-span-2 2xl:col-span-1">
248+ <div className="rounded-lg border border-warn/20 bg-warn/6 p-3.5 md:col-span-2 2xl:col-span-1">
247249 <p className="text-xs font-semibold text-warn">Why this needs you</p>
248250 <p className="mt-1.5 text-sm leading-6 text-fg-soft">{row.why}</p>
249251 <p className="mt-2 text-xs text-faint">
412414 {day.count > 0 ? (
413415 <span className="block rounded-t bg-accent" style={{ height: Math.max(3, Math.round((day.count / max) * (height - 4))) }} />
414416 ) : (
415− <span className="block h-[2px] rounded-full bg-line-strong" />
417+ <span className="block h-0.5 rounded-full bg-line-strong" />
416418 )}
417419 </div>
418420 <div className="pointer-events-none absolute bottom-full left-1/2 z-10 mb-1 hidden -translate-x-1/2 rounded-md border border-line-strong bg-raised px-2.5 py-1.5 text-xs whitespace-nowrap shadow-lg shadow-black/40 md:group-hover:block">
491493 const more = group.parts.length - 1 + Math.max(0, part.numbers.length - 1);
492494 return (
493495 <li className="flex gap-2.5 py-2">
494− <span className="mt-px">
495− <Avatar name={actor} size={22} />
496− </span>
496+ <span className="mt-px">{agent ? <Avatar name={actor} image={null} size={22} /> : <UserAvatar username={actor} size={22} />}</span>
497497 <span className="min-w-0 grow text-[0.8125rem] leading-5 text-muted">
498− <span className={cn("font-medium", agent ? "text-accent" : "text-fg")}>{actor}</span> {VERB[part.verb]}{" "}
498+ {agent ? (
499+ <span className="font-medium text-accent">{actor}</span>
500+ ) : (
501+ <PersonLink name={actor} className="font-medium text-fg hover:text-accent" />
502+ )}{" "}
503+ {VERB[part.verb]}{" "}
499504 {number != null ? (
500505 <Link to={`${base}/issues/${number}`} prefetch="intent" className="text-fg-soft hover:text-fg">
501506 <span className="font-mono text-xs">#{number}</span>
679684 <Card asChild className="min-w-0 scroll-mt-20 self-start overflow-hidden">
680685 <section id="work">
681686 <div className="flex items-center gap-2 border-b border-line px-2 sm:px-3">
682− <nav className="-mb-px flex min-w-0 grow gap-1 overflow-x-auto [scrollbar-width:none]" aria-label="Overview">
687+ <nav className="-mb-px flex min-w-0 grow gap-1 overflow-x-auto scrollbar-none" aria-label="Overview">
683688 {(["needs", "landed"] as const).map((value) => (
684689 <Link
685690 key={value}
+19−12
3232 import { type ActivityGroup, type Need, type NeedKind, type Verb, isAgent, sparkPoints } from "../lib/mission";
3333 import { TimeAgo } from "./ui";
3434 import { Avatar } from "./ui/avatar";
35+import { UserAvatar } from "./user-card";
36+import { PersonLink } from "./work";
3537 import { Button } from "./ui/button";
3638 import { Card } from "./ui/card";
3739 import { Hint } from "./ui/hint";
295297 <SelectContent>
296298 <SelectItem value="all">Anyone</SelectItem>
297299 {people.map((name) => (
298− <SelectItem key={name} value={name} icon={<Avatar name={name} size={16} />}>
300+ <SelectItem key={name} value={name} icon={<Avatar name={name} image={isAgent(name) ? null : undefined} size={16} />}>
299301 {name}
300302 </SelectItem>
301303 ))}
307309 {shown.length === 0 ? (
308310 <Quiet>{groups.length === 0 ? empty : "Nothing matches these filters."}</Quiet>
309311 ) : (
310− <ol className="relative space-y-0.5 before:absolute before:top-3 before:bottom-3 before:left-[0.9375rem] before:w-px before:bg-line">
312+ <ol className="relative space-y-0.5 before:absolute before:top-3 before:bottom-3 before:left-3.75 before:w-px before:bg-line">
311313 {shown.map((group) => {
312314 const look = VERB[group.parts[0].verb];
313315 const agent = group.actor == null || isAgent(group.actor);
315317 <li key={group.id} className="relative flex items-start gap-3 rounded-lg px-1 py-1.5 text-sm">
316318 <span
317319 className={cn(
318− "relative z-10 mt-0.5 flex size-[1.375rem] shrink-0 items-center justify-center rounded-full bg-bg ring-1 ring-line",
320+ "relative z-10 mt-0.5 flex size-5.5 shrink-0 items-center justify-center rounded-full bg-bg ring-1 ring-line",
319321 look.tone,
320322 )}
321323 >
322324 {look.icon}
323325 </span>
324326 <span className="min-w-0 grow leading-6 text-muted">
325− {group.actor ? (
326− <span className={cn("mr-1.5 inline-flex items-center gap-1.5 align-middle font-medium", agent ? "text-accent" : "text-fg")}>
327− <Avatar name={group.actor} size={16} />
328− {group.actor}
329− </span>
330− ) : (
331− <span className="mr-1 text-fg-soft">g1t:</span>
332− )}
327+ <span className={cn("mr-1.5 inline-flex items-center gap-1.5 align-middle font-medium", agent ? "text-accent" : "text-fg")}>
328+ {agent ? (
329+ <>
330+ <Avatar name={group.actor ?? "g1t"} image={null} size={16} />
331+ {group.actor ?? "g1t"}
332+ </>
333+ ) : (
334+ <>
335+ <UserAvatar username={group.actor!} size={16} />
336+ <PersonLink name={group.actor!} className="hover:text-accent" />
337+ </>
338+ )}
339+ </span>
333340 <GroupLine group={group} />
334341 {showRepo && (
335342 <Link
467474 }) {
468475 const shown = builds.slice(0, slots).reverse();
469476 return (
470− <div className="flex h-8 items-end gap-[3px]" aria-label="Recent builds, oldest first">
477+ <div className="flex h-8 items-end gap-0.75" aria-label="Recent builds, oldest first">
471478 {Array.from({ length: slots - shown.length }, (_, i) => (
472479 <span key={`empty-${i}`} className="h-2 flex-1 rounded-sm bg-line/60" />
473480 ))}
+2−2
127127 className="items-start"
128128 >
129129 <span className="mt-0.5 flex size-4 shrink-0 items-center justify-center">
130− {selected && <Check size={14} className="!text-accent" />}
130+ {selected && <Check size={14} className="text-accent!" />}
131131 </span>
132132 <span className="min-w-0">
133133 <span className="block text-sm text-fg">{choice.label}</span>
159159 on ? "border-accent bg-accent text-bg" : "border-line-strong",
160160 )}
161161 >
162− {on && <Check size={11} className="!text-bg" />}
162+ {on && <Check size={11} className="text-bg!" />}
163163 </span>
164164 {WATCH_EVENT_LABEL[kind]}
165165 </DropdownMenuItem>
+1−1
6868 {waiting.map((notification) => (
6969 <Card asChild key={notification.id} radius="lg" className="relative p-3">
7070 <li>
71− <span aria-hidden="true" className="absolute inset-y-2 left-0 w-[3px] rounded-r bg-accent" />
71+ <span aria-hidden="true" className="absolute inset-y-2 left-0 w-0.75 rounded-r bg-accent" />
7272 <div className="flex items-start gap-2">
7373 <button
7474 type="button"
+3−3
123123 role="status"
124124 className="g1t-toast group/toast pointer-events-auto relative overflow-hidden rounded-xl bg-surface shadow-[0_0_0_6px_var(--color-bg),0_20px_48px_-12px_rgba(0,0,0,0.9)] ring-1 ring-line-strong"
125125 >
126− {loud && <span aria-hidden="true" className="absolute inset-y-0 left-0 w-[3px] bg-accent" />}
126+ {loud && <span aria-hidden="true" className="absolute inset-y-0 left-0 w-0.75 bg-accent" />}
127127 <button type="button" onClick={open} className="flex w-full items-start gap-3 p-3 pr-9 text-left outline-none focus-visible:bg-raised/60">
128128 <span className="mt-0.5 shrink-0">
129129 <ActorAvatar notification={notification} />
251251 onBlur={(event) => {
252252 if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setFocused(false);
253253 }}
254− className="pointer-events-none fixed z-[65] flex flex-col gap-2 max-sm:inset-x-3 max-sm:top-[calc(env(safe-area-inset-top)+0.75rem)] max-sm:flex-col-reverse sm:right-5 sm:bottom-5 sm:w-[376px]"
254+ className="pointer-events-none fixed z-65 flex flex-col gap-2 max-sm:inset-x-3 max-sm:top-[calc(env(safe-area-inset-top)+0.75rem)] max-sm:flex-col-reverse sm:right-5 sm:bottom-5 sm:w-94"
255255 >
256256 <style>{STYLES}</style>
257257 {offer && (
260260 </div>
261261 )}
262262 {folded.length > 0 && (
263− <div className="pointer-events-auto flex h-[30px] items-center justify-between gap-2 self-center rounded-full bg-surface pr-1 pl-3 text-xs text-muted shadow-[0_0_0_6px_var(--color-bg),0_10px_30px_-10px_rgba(0,0,0,0.9)] ring-1 ring-line-strong">
263+ <div className="pointer-events-auto flex h-7.5 items-center justify-between gap-2 self-center rounded-full bg-surface pr-1 pl-3 text-xs text-muted shadow-[0_0_0_6px_var(--color-bg),0_10px_30px_-10px_rgba(0,0,0,0.9)] ring-1 ring-line-strong">
264264 <span className="font-medium text-fg tabular-nums">+{folded.length} more</span>
265265 <Button
266266 type="button"
+1−1
3939 <span className="text-faint tabular-nums">{clock(log.time_us, true).slice(6)}</span>
4040 <LevelBadge level={log.severity} />
4141 <span className="hidden truncate text-muted sm:block">{log.service || "—"}</span>
42− <span className={cn("min-w-0 text-fg", open || !multiline ? "break-words whitespace-pre-wrap" : "truncate")}>{open ? log.body : log.body.split("\n")[0]}</span>
42+ <span className={cn("min-w-0 text-fg", open || !multiline ? "wrap-break-word whitespace-pre-wrap" : "truncate")}>{open ? log.body : log.body.split("\n")[0]}</span>
4343 </button>
4444 {open && (
4545 <div className="space-y-2 px-3 pt-1 pb-3 pl-9">
+2−2
287287 >
288288 {at === i && <div className="absolute inset-y-0 left-1/2 w-px bg-line-strong" aria-hidden="true" />}
289289 {kind === "bars" && totals[i]! > 0 && (
290− <div className="flex w-full max-w-5 flex-col-reverse gap-[2px] px-[1px]" style={{ height: `${(totals[i]! / top) * 100}%` }}>
290+ <div className="flex w-full max-w-5 flex-col-reverse gap-0.5 px-px" style={{ height: `${(totals[i]! / top) * 100}%` }}>
291291 {series
292292 .filter((s) => (s.values[i] ?? 0) > 0)
293293 .map((s, k, all) => (
294294 <div
295295 key={s.key}
296− className={cn("w-full min-h-[2px]", k === all.length - 1 && "rounded-t-[3px]")}
296+ className={cn("w-full min-h-0.5", k === all.length - 1 && "rounded-t-[3px]")}
297297 style={{ flexGrow: s.values[i] ?? 0, flexBasis: 0, background: s.color }}
298298 />
299299 ))}
+1−1
432432 onValueChange={(role) => fetcher.submit({ intent: "actions-role", repo: entry.repo, role }, { method: "post" })}
433433 />
434434 )}
435− <span className="flex w-[2.125rem] justify-end">
435+ <span className="flex w-8.5 justify-end">
436436 {!entry.linked && (
437437 <Hint label={`Stop ${entry.repo}'s workflows using it`}>
438438 <Button
+3−3
5757 const DOT: Record<Exclude<Shown, "offline">, string> = {
5858 active: "bg-success",
5959 // Away: a ring, the dot's colour gone out of it.
60− away: "bg-[var(--presence-ring,var(--color-bg))] shadow-[inset_0_0_0_2px_var(--color-faint)]",
60+ away: "bg-(--presence-ring,var(--color-bg)) shadow-[inset_0_0_0_2px_var(--color-faint)]",
6161 // Paused: amber, with a bar across, as a "do not enter" sign.
6262 dnd: "bg-warn",
6363 };
7575 className={cn("pointer-events-none flex items-center justify-center rounded-full", DOT[shown], className)}
7676 style={{ width: size, height: size, boxShadow: `0 0 0 2px ${ring}`, ["--presence-ring" as string]: ring }}
7777 >
78− {shown === "dnd" && <span className="h-[2px] w-1/2 rounded-full bg-bg" aria-hidden="true" />}
78+ {shown === "dnd" && <span className="h-0.5 w-1/2 rounded-full bg-bg" aria-hidden="true" />}
7979 <span className="sr-only">{SHOWN_LABEL[shown]}</span>
8080 </span>
8181 );
211211 </p>
212212 )}
213213 <p className="flex items-center gap-2">
214− <span className="flex size-[13px] items-center justify-center">
214+ <span className="flex size-3.25 items-center justify-center">
215215 {shown === "offline" ? <span className="size-2 rounded-full shadow-[inset_0_0_0_1.5px_var(--color-line-strong)]" /> : <PresenceDot entry={entry} size={9} ring="transparent" />}
216216 </span>
217217 {SHOWN_LABEL[shown]}
+11−11
225225
226226 /** A person's avatar, as the app draws it. */
227227 function Face({ who, size = 28 }: { who: string; size?: number }) {
228− return <Avatar name={who.toLowerCase()} size={size} />;
228+ return <Avatar name={who.toLowerCase()} image={null} size={size} />;
229229 }
230230
231231 /** The coding agent's mark, its name and its badge, as commits and sessions show them. */
243243 function PresenceDot({ away, ring = "var(--tour-side)" }: { away?: boolean; ring?: string }) {
244244 return (
245245 <span
246− className={cn("absolute -right-0.5 -bottom-0.5 size-[7px] rounded-full", away ? "bg-[var(--tour-side)] shadow-[inset_0_0_0_1.5px_var(--color-faint)]" : "bg-success")}
246+ className={cn("absolute -right-0.5 -bottom-0.5 size-1.75 rounded-full", away ? "bg-(--tour-side) shadow-[inset_0_0_0_1.5px_var(--color-faint)]" : "bg-success")}
247247 style={{ boxShadow: `0 0 0 1.5px ${ring}${away ? ", inset 0 0 0 1.5px var(--color-faint)" : ""}` }}
248248 />
249249 );
298298 /** One rail item: the square behind its icon, filled for the mode you are in, and its name under it. */
299299 function RailItem({ icon, label, on, target, badge }: { icon: ReactNode; label: string; on: boolean; target?: CursorTarget; badge?: number }) {
300300 return (
301− <span className="flex w-full flex-col items-center gap-[3px] py-0.5">
301+ <span className="flex w-full flex-col items-center gap-0.75 py-0.5">
302302 <span
303303 data-tour={target}
304304 className={cn(
305− "relative flex size-7 items-center justify-center rounded-[8px] transition-colors duration-500",
305+ "relative flex size-7 items-center justify-center rounded-lg transition-colors duration-500",
306306 on ? "bg-[#2c2c33] text-fg shadow-[inset_0_0_0_1px_rgba(255,255,255,0.06)]" : "text-muted",
307307 )}
308308 >
309309 {icon}
310310 {badge ? (
311− <span className="absolute -top-1 -right-1.5 min-w-[0.875rem] rounded-full bg-accent px-[3px] text-center text-[8px] leading-[0.875rem] font-bold text-bg tabular-nums ring-[1.5px] ring-[#0b0b0d]">
311+ <span className="absolute -top-1 -right-1.5 min-w-3.5 rounded-full bg-accent px-0.75 text-center text-[8px] leading-3.5 font-bold text-bg tabular-nums ring-[1.5px] ring-[#0b0b0d]">
312312 {badge}
313313 </span>
314314 ) : null}
338338 <RailItem icon={<Building2 size={15} />} label="Workspace" on={false} />
339339 <RailItem icon={<CircleHelp size={15} />} label="Help" on={false} />
340340 <span className="relative mt-1">
341− <Avatar name="priya" size={26} />
341+ <Avatar name="priya" image={null} size={26} />
342342 <PresenceDot ring="#0b0b0d" />
343343 </span>
344344 </div>
433433 <div className="space-y-2 px-2 pt-2.5">
434434 <SideSearch>Jump to channel or person</SideSearch>
435435 <span className="grid grid-cols-3 rounded-md bg-surface p-0.5 text-center text-[10px] font-medium ring-1 ring-line">
436− <span className="rounded-[4px] bg-raised py-0.5 text-fg ring-1 ring-line-strong">All</span>
436+ <span className="rounded-sm bg-raised py-0.5 text-fg ring-1 ring-line-strong">All</span>
437437 <span className="py-0.5 text-muted">Unread</span>
438438 <span className="py-0.5 text-muted">Mentions</span>
439439 </span>
491491 ))}
492492 </span>
493493 </div>
494− <div className="flex min-h-0 flex-1 flex-col justify-end overflow-hidden [mask-image:linear-gradient(to_bottom,transparent,black_2.5rem)] pb-1">
494+ <div className="flex min-h-0 flex-1 flex-col justify-end overflow-hidden mask-[linear-gradient(to_bottom,transparent,black_2.5rem)] pb-1">
495495 <div className="flex items-center gap-3 px-5 pt-1 pb-2 text-[11px] text-faint">
496496 <span className="h-px flex-1 bg-line" />
497497 Today
905905 return (
906906 <div
907907 aria-hidden="true"
908− className={cn("pointer-events-none absolute top-0 left-0 z-20 transition-[transform,opacity] duration-[900ms] ease-[cubic-bezier(.45,.05,.2,1)]", frame.cursorShown ? "opacity-100" : "opacity-0")}
908+ className={cn("pointer-events-none absolute top-0 left-0 z-20 transition-[transform,opacity] duration-900 ease-[cubic-bezier(.45,.05,.2,1)]", frame.cursorShown ? "opacity-100" : "opacity-0")}
909909 style={{ transform: `translate(${at.x}px, ${at.y}px)` }}
910910 >
911911 <span
10261026 function Phone({ frame }: { frame: Frame }) {
10271027 const scenes: Scene[] = ["code", "session", "chat", "docs"];
10281028 return (
1029− <div className="relative flex h-[34rem] w-full flex-col overflow-hidden rounded-2xl bg-bg text-left text-fg shadow-2xl shadow-black/50 ring-1 ring-line scheme-dark">
1029+ <div className="relative flex h-136 w-full flex-col overflow-hidden rounded-2xl bg-bg text-left text-fg shadow-2xl shadow-black/50 ring-1 ring-line scheme-dark">
10301030 <div className="flex h-12 shrink-0 items-center gap-2 border-b border-line px-3">
10311031 <Avatar name="acme" size={26} square />
10321032 <span key={frame.scene} className="tour-fade flex min-w-0 items-center gap-1.5 text-[13px] font-semibold text-fg">
10761076 function PhoneChat({ frame }: { frame: Frame }) {
10771077 return (
10781078 <div className="flex h-full flex-col">
1079− <div className="flex min-h-0 flex-1 flex-col justify-end overflow-hidden [mask-image:linear-gradient(to_bottom,transparent,black_2.5rem)] [&>div]:px-3">
1079+ <div className="flex min-h-0 flex-1 flex-col justify-end overflow-hidden mask-[linear-gradient(to_bottom,transparent,black_2.5rem)] [&>div]:px-3">
10801080 <Message who="Dana" time="09:12">
10811081 <p>Two enterprise customers hit the CSV export timeout again this morning.</p>
10821082 </Message>
+4−4
3434 return (
3535 <span
3636 className={cn(
37− "absolute -top-1 -right-1.5 min-w-[1.125rem] rounded-full px-1 text-center text-[0.625rem] leading-[1.125rem] font-bold tabular-nums ring-2 ring-rail",
37+ "absolute -top-1 -right-1.5 min-w-4.5 rounded-full px-1 text-center text-[0.625rem] leading-4.5 font-bold tabular-nums ring-2 ring-rail",
3838 loud ? "bg-accent text-bg" : "bg-line-strong text-fg",
3939 className,
4040 )}
189189 <LayoutGrid />
190190 </PopoverTrigger>
191191 </SidebarMenuButton>
192− <PopoverContent side="right" align="end" sideOffset={12} aria-label="Apps" className="w-[23rem] p-2.5">
192+ <PopoverContent side="right" align="end" sideOffset={12} aria-label="Apps" className="w-92 p-2.5">
193193 <AppsLauncher slug={slug} pins={pins} onToggle={onToggle} onClose={() => setOpen(false)} />
194194 </PopoverContent>
195195 </Popover>
248248 <SidebarMenuButton asChild size="icon" tooltip="Home">
249249 <Link to={homePagePath(slug)} aria-label="g1t: Home">
250250 <span className="flex">
251− <Mark tight className="h-[1.125rem] w-auto" />
251+ <Mark tight className="h-4.5 w-auto" />
252252 </span>
253253 </Link>
254254 </SidebarMenuButton>
270270 </SidebarMenu>
271271 {/* Your pinned apps: as many as you like, scrolling under a fade at either end. */}
272272 {shown.length > 0 && (
273− <SidebarMenu className="mt-2 w-auto min-h-0 grow gap-2 overflow-y-auto py-2 [mask-image:linear-gradient(to_bottom,transparent,#000_10px,#000_calc(100%-14px),transparent)] [scrollbar-width:none]">
273+ <SidebarMenu className="mt-2 w-auto min-h-0 grow gap-2 overflow-y-auto py-2 mask-[linear-gradient(to_bottom,transparent,#000_10px,#000_calc(100%-14px),transparent)] scrollbar-none">
274274 {shown.map((app) => (
275275 <RailLink key={app.key} to={app.to} label={app.name} icon={app.icon(20)} current={at(app.to)} />
276276 ))}
+1−1
4040 <Card className="min-w-0 overflow-hidden">
4141 <div className="border-b border-line px-5 py-4">
4242 <div className="flex flex-wrap items-center gap-2">
43− <h3 className="min-w-0 text-xl font-semibold tracking-tight break-words">
43+ <h3 className="min-w-0 text-xl font-semibold tracking-tight wrap-break-word">
4444 {linkTitle ? (
4545 <Link to={`${base}/releases/tag/${encodeTag(release.tagName)}`} className="hover:text-accent hover:underline">
4646 {title}
+2−2
7070 return (
7171 <span
7272 key={to}
73− className={`${i < folded ? "hidden sm:flex" : "flex"} items-center ${last ? "min-w-0" : i === segments.length - 2 ? "min-w-0 shrink-[2]" : "shrink-0"}`}
73+ className={`${i < folded ? "hidden sm:flex" : "flex"} items-center ${last ? "min-w-0" : i === segments.length - 2 ? "min-w-0 shrink-2" : "shrink-0"}`}
7474 >
7575 {slash}
7676 {last ? (
485485 ) : lines ? (
486486 <CodeLines lines={lines} html={html} marked={marked} />
487487 ) : isImagePath(path) ? (
488− <div className="flex justify-center bg-[repeating-conic-gradient(var(--color-raised)_0_25%,transparent_0_50%)] bg-[length:16px_16px] p-6">
488+ <div className="flex justify-center bg-[repeating-conic-gradient(var(--color-raised)_0_25%,transparent_0_50%)] bg-size-[16px_16px] p-6">
489489 <img src={raw} alt={path.split("/").pop() ?? path} className="max-h-[70vh] max-w-full" />
490490 </div>
491491 ) : (
+5−5
368368 {total === 0 ? (
369369 <p className="text-sm text-muted">No machine time yet this month.</p>
370370 ) : (
371− <div className="flex h-2.5 gap-[2px] overflow-hidden rounded-full" role="img" aria-label="This month's machine time by where it ran">
372− {cost.cloudSeconds > 0 && <span className="h-full min-w-[3px] bg-info" style={{ flexGrow: cost.cloudSeconds }} />}
373− {cost.ownSeconds > 0 && <span className="h-full min-w-[3px] bg-success" style={{ flexGrow: cost.ownSeconds }} />}
371+ <div className="flex h-2.5 gap-0.5 overflow-hidden rounded-full" role="img" aria-label="This month's machine time by where it ran">
372+ {cost.cloudSeconds > 0 && <span className="h-full min-w-0.75 bg-info" style={{ flexGrow: cost.cloudSeconds }} />}
373+ {cost.ownSeconds > 0 && <span className="h-full min-w-0.75 bg-success" style={{ flexGrow: cost.ownSeconds }} />}
374374 </div>
375375 )}
376376 <ul className="mt-3 space-y-2 text-sm">
377377 <li className="flex items-center gap-2">
378− <span className="size-2 shrink-0 rounded-[2px] bg-info" aria-hidden />
378+ <span className="size-2 shrink-0 rounded-xs bg-info" aria-hidden />
379379 <span className="min-w-0 grow truncate text-fg-soft">g1t cloud</span>
380380 <span className="text-muted tabular-nums">{machineTime(cost.cloudSeconds)}</span>
381381 <span className="w-20 text-right text-fg tabular-nums">{money(cost.cloudMicros)}</span>
382382 </li>
383383 <li className="flex items-center gap-2">
384− <span className="size-2 shrink-0 rounded-[2px] bg-success" aria-hidden />
384+ <span className="size-2 shrink-0 rounded-xs bg-success" aria-hidden />
385385 <span className="min-w-0 grow truncate text-fg-soft">Your runners</span>
386386 <span className="text-muted tabular-nums">{machineTime(cost.ownSeconds)}</span>
387387 <span className="w-20 text-right text-fg tabular-nums">{money(0)}</span>
+2−2
145145 <span className={`mt-0.5 hidden shrink-0 sm:block ${alert.state === "open" ? "text-warn" : "text-muted"}`}>{STATE_ICON[alert.state]}</span>
146146 <div className="min-w-0 grow">
147147 <div className="flex flex-wrap items-center gap-2">
148− <Link to={`${base}/security/code-scanning/${alert.number}`} className="min-w-0 text-sm font-medium break-words hover:underline">
148+ <Link to={`${base}/security/code-scanning/${alert.number}`} className="min-w-0 text-sm font-medium wrap-break-word hover:underline">
149149 {alert.ruleName && alert.ruleName !== alert.ruleId ? alert.ruleName : shortRule(alert.ruleId)}
150150 </Link>
151151 <SeverityBadge severity={alert.severity} />
313313 }
314314 return (
315315 <div className={CARD}>
316− <Table className="min-w-[46rem]">
316+ <Table className="min-w-184">
317317 <TableHeader>
318318 <TableRow>
319319 <TableHead className="px-4">Repository</TableHead>
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…
Loading the diff…