Jean-Gabriel Gill-Couture
e03a92c570
- Drop fields and functions nothing reads: job and proc tips, fetch time, PR url/author (and their GraphQL fields), spine summaries, diff::commit, unread data attributes, unused CSS and tokens. - One home each for state wording (naming main as the repo does), lane lookup, unseen, outdated, main's tip, the stop wait and the token header. - Narrow visibility; rename render::View to Filter; queue ranking moves to the CLI, its only user. - Token test covers every route; shared checkout snapshot in the fixture. - Client: errors outside Run/Send are toasts, history only after a good load, a drag stays in one file, the agent marker is a ring. - design.md, the skill and AGENTS.md describe what is built.
223 lines
16 KiB
CSS
223 lines
16 KiB
CSS
:root {
|
|
--bg: #0f1115; --panel: #151820; --line: #262b34; --spine: #4a515c;
|
|
--t1: #e6e8eb; --t2: #9ba3af; --t3: #767e8b;
|
|
--accent: #6ea8fe; --green: #3dcb8b; --red: #f2665e; --amber: #e5a33a; --shade: #0008;
|
|
--hover: #1b1f28; --add: #3dcb8b14; --del: #f2665e14; --addt: #9ee6c4; --delt: #f5b4af; --sel: #6ea8fe22;
|
|
--sans: "IBM Plex Sans", system-ui, sans-serif;
|
|
--mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
|
|
color-scheme: dark;
|
|
}
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--bg: #fbfbfa; --panel: #f3f3f1; --line: #e1e1dd; --spine: #a3a8b0;
|
|
--t1: #1b1e23; --t2: #555c66; --t3: #6b717b;
|
|
--accent: #2563d9; --green: #18855a; --red: #c8382f; --amber: #a86400; --shade: #0003;
|
|
--hover: #ecece9; --add: #18855a14; --del: #c8382f12; --addt: #145c3f; --delt: #8f241d; --sel: #2563d922;
|
|
color-scheme: light;
|
|
}
|
|
}
|
|
* { box-sizing: border-box; }
|
|
html, body { margin: 0; height: 100%; }
|
|
body { background: var(--bg); color: var(--t1); font: 13px/1.45 var(--sans); display: flex; flex-direction: column; overflow: hidden; }
|
|
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
|
|
::selection { background: var(--sel); }
|
|
a { color: var(--accent); text-decoration: none; }
|
|
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
|
|
button:disabled { opacity: .5; cursor: default; }
|
|
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
|
|
h1, h2 { margin: 0; font-weight: 600; }
|
|
h1 { font-size: 13px; }
|
|
h2 { font-size: 16px; }
|
|
h2 code { font-size: inherit; }
|
|
p, pre { margin: 0; }
|
|
kbd { font-family: var(--mono); font-size: 12px; color: var(--t3); }
|
|
.mono, code, pre { font-family: var(--mono); font-size: 12px; }
|
|
.muted { color: var(--t2); }
|
|
.small { font-size: 12px; }
|
|
.grow { flex: 1 1 0; }
|
|
.pad { padding: 24px; }
|
|
.green { color: var(--green); } .red { color: var(--red); } .amber { color: var(--amber); }
|
|
.sans { font-family: var(--sans); }
|
|
.strong { font-weight: 600; }
|
|
.note { color: var(--amber); }
|
|
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
|
|
button.primary { background: var(--accent); color: var(--bg); font-weight: 600; border-radius: 6px; height: 28px; padding: 0 12px; white-space: nowrap; }
|
|
button.link { color: var(--accent); }
|
|
.icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--t3); border-radius: 6px; }
|
|
.icon:hover { color: var(--t1); }
|
|
|
|
header { height: 48px; flex: 0 0 auto; display: flex; align-items: center; gap: 16px; padding: 0 16px; border-bottom: 1px solid var(--line); }
|
|
.brand { font-weight: 600; }
|
|
header .path { color: var(--t2); }
|
|
.filter { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; width: 220px; color: var(--t3); }
|
|
.filter input { border: 0; outline: 0; background: transparent; color: var(--t1); width: 100%; font: inherit; }
|
|
#live { display: flex; align-items: center; gap: 6px; color: var(--t2); height: 30px; }
|
|
#live:hover { color: var(--t1); }
|
|
#live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
|
|
#live.paused .dot { background: none; width: 8px; height: 10px; border: solid var(--t2); border-width: 0 2px; border-radius: 0; }
|
|
|
|
.body { flex: 1 1 auto; min-height: 0; display: flex; }
|
|
nav { width: 400px; flex: 0 0 auto; border-right: 1px solid var(--line); overflow: auto; padding: 8px 0; }
|
|
#rail { display: flex; flex-direction: column; min-width: max-content; }
|
|
.row { display: flex; align-items: center; gap: 6px; height: 24px; padding-right: 12px; white-space: nowrap; font-size: 12px; }
|
|
.row:hover { background: var(--panel); }
|
|
.row.on { background: var(--hover); }
|
|
.row .g { flex: 0 0 auto; }
|
|
.row .g line { stroke: var(--spine); stroke-width: 1.5; }
|
|
.row .g line.gap { stroke-dasharray: 2 3; }
|
|
.row .g .n { fill: var(--t3); stroke: var(--bg); stroke-width: 2; }
|
|
.row .g .n.main { fill: var(--t2); }
|
|
.row .g .n.on { fill: var(--accent); }
|
|
.row .g .n.hollow { fill: var(--bg); stroke: var(--t3); stroke-width: 1.5; }
|
|
.row .g .n.hollow.on { stroke: var(--accent); }
|
|
.ref { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; border-radius: 9px; border: 1px solid var(--line); color: var(--t1); font-family: var(--mono); font-size: 12px; flex: 0 0 auto; }
|
|
.ref:hover { border-color: var(--t3); }
|
|
.ref.sel { background: var(--accent); border-color: var(--accent); color: var(--bg); }
|
|
.ref.main { color: var(--t2); }
|
|
.ref.red { border-color: var(--red); } .ref.amber { border-color: var(--amber); } .ref.green { border-color: var(--green); }
|
|
.ref .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
|
|
.ref.sel .dot { background: var(--bg); }
|
|
/* Agent running: a ring, where unseen is a filled dot. */
|
|
.ref .agent { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--accent); }
|
|
.ref.sel .agent { border-color: var(--bg); }
|
|
.row .msg { color: var(--t2); overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
|
|
.row a.msg:hover { color: var(--t1); }
|
|
.row.on .msg { color: var(--t1); }
|
|
.row .gap, .row .age { color: var(--t3); flex: 0 0 auto; }
|
|
#hidden { padding: 12px 16px; text-align: left; color: var(--t3); }
|
|
#hidden:hover { color: var(--t1); }
|
|
|
|
main { flex: 1 1 auto; min-width: 0; display: flex; }
|
|
#review { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; position: relative; }
|
|
.stat { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; overflow: auto; }
|
|
.stat .head { padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 4px; }
|
|
.stat .title { display: flex; align-items: center; gap: 8px; }
|
|
.stat h1 { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
#run { height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; }
|
|
#run:hover { border-color: var(--t3); }
|
|
.meta { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.moved { font-size: 12px; }
|
|
.toggle { margin: 0 16px 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
|
|
.toggle a, .toggle span { height: 28px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--t3); white-space: nowrap; }
|
|
.toggle a:hover { color: var(--t1); }
|
|
.toggle .on { background: var(--hover); color: var(--t1); }
|
|
.toggle .off { opacity: .5; cursor: default; }
|
|
.narrow { margin: 0 16px 8px; font-size: 12px; color: var(--t2); }
|
|
.files { display: flex; flex-direction: column; padding-bottom: 8px; }
|
|
.total { padding: 0 16px 4px; color: var(--t3); }
|
|
.dir { display: flex; align-items: center; gap: 8px; padding: 8px 16px 4px; color: var(--t2); }
|
|
.dir .mono { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.dir.muted { opacity: .6; }
|
|
.bar { height: 3px; border-radius: 2px; background: var(--spine); flex: 0 0 auto; }
|
|
a.file { display: flex; align-items: center; gap: 8px; padding: 4px 16px 4px 28px; color: var(--t1); font-family: var(--mono); font-size: 12px; }
|
|
a.file:hover { background: var(--panel); }
|
|
a.file.on { background: var(--hover); }
|
|
a.file .path { color: var(--t2); flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.add { color: var(--green); } .del { color: var(--red); }
|
|
|
|
.diff { overflow: auto; min-height: 0; }
|
|
.fdiff { border-bottom: 1px solid var(--line); }
|
|
.fhead { position: sticky; top: 0; z-index: 1; height: 40px; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--bg); border-bottom: 1px solid var(--line); }
|
|
.fhead code { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.fhead button { height: 26px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; }
|
|
.lines { padding: 8px 0 24px; font-family: var(--mono); font-size: 12px; }
|
|
.l { display: flex; line-height: 20px; min-width: max-content; }
|
|
.l .ln { width: 56px; flex: 0 0 auto; padding-right: 12px; text-align: right; color: var(--t3); cursor: pointer; user-select: none; border-left: 3px solid transparent; }
|
|
.l .ln:hover { color: var(--t1); background: var(--hover); }
|
|
.l .code { white-space: pre; padding-left: 12px; padding-right: 24px; color: var(--t2); }
|
|
.l.add { background: var(--add); } .l.add .code { color: var(--addt); }
|
|
.l.del { background: var(--del); } .l.del .code { color: var(--delt); }
|
|
.l.hunk .code { color: var(--t3); }
|
|
.l.sel { background: var(--sel); }
|
|
.l.sel .ln { border-left-color: var(--accent); color: var(--t1); }
|
|
.draft, .cbox { margin: 4px 24px 8px 59px; padding: 10px 12px; border-radius: 6px; background: var(--panel); font-family: var(--sans); font-size: 13px; max-width: 720px; }
|
|
.draft .dhead { display: flex; justify-content: space-between; margin-bottom: 4px; }
|
|
.draft p { white-space: pre-wrap; }
|
|
.cbox { border: 1px solid var(--accent); display: flex; flex-direction: column; gap: 8px; }
|
|
.cbox label { display: flex; flex-direction: column; gap: 6px; }
|
|
textarea { resize: vertical; background: var(--bg); color: var(--t1); border: 1px solid var(--line); border-radius: 6px; padding: 8px; font: 13px/1.45 var(--sans); }
|
|
.cfoot { display: flex; justify-content: flex-end; gap: 8px; }
|
|
.cfoot button { height: 28px; padding: 0 10px; color: var(--t2); }
|
|
.cfoot button[type=submit] { border: 1px solid var(--line); border-radius: 6px; color: var(--t1); background: var(--hover); }
|
|
|
|
#drawer { grid-column: 1 / -1; border-top: 1px solid var(--line); }
|
|
#drawer .status { width: 100%; height: 28px; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--panel); color: var(--t2); font-size: 12px; text-align: left; }
|
|
#drawer .status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--t3); }
|
|
#drawer .status .dot.running { background: var(--green); }
|
|
#drawer .status .dot.failed { background: var(--red); }
|
|
#drawer .panel { height: 280px; display: flex; }
|
|
#drawer .panel[hidden] { display: none; }
|
|
#drawer .tabs { width: 160px; flex: 0 0 auto; border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 8px 0; }
|
|
#drawer .tabs button { padding: 6px 16px; text-align: left; color: var(--t2); }
|
|
#drawer .tabs button.on { background: var(--hover); color: var(--t1); }
|
|
#log { flex: 1 1 auto; min-width: 0; overflow: auto; padding: 8px 16px; color: var(--t2); line-height: 18px; white-space: pre; }
|
|
|
|
#sheet { width: min(760px, 94vw); max-height: 86vh; padding: 0; flex-direction: column; overflow: hidden; }
|
|
#sheet[open] { display: flex; }
|
|
.shead { padding: 20px 24px 8px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
|
|
.shead p { margin-top: 2px; }
|
|
.stabs { display: flex; gap: 4px; padding: 0 24px; border-bottom: 1px solid var(--line); }
|
|
.stabs button { padding: 6px 10px; color: var(--t2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
|
|
.stabs button.on { color: var(--t1); border-bottom-color: var(--accent); }
|
|
.sbody { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px 24px; display: flex; flex-direction: column; gap: 16px; }
|
|
.sbody[hidden] { display: none; }
|
|
.sbody > * { flex-shrink: 0; }
|
|
.field { display: flex; flex-direction: column; gap: 6px; }
|
|
.sfile { display: flex; flex-direction: column; gap: 12px; }
|
|
.sfhead { display: flex; justify-content: space-between; align-items: center; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
|
|
.scomment { display: flex; flex-direction: column; gap: 6px; padding-left: 12px; }
|
|
.sanchor { display: flex; align-items: center; gap: 8px; }
|
|
.sexcerpt { margin: 0; padding: 6px 8px; border-radius: 4px; background: var(--bg); color: var(--t2); white-space: pre; overflow: hidden; text-overflow: ellipsis; font-size: 12px; line-height: 18px; }
|
|
.stext { width: 100%; }
|
|
#briefmd { white-space: pre-wrap; color: var(--t2); line-height: 1.5; }
|
|
.sfoot { padding: 12px 24px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
|
|
.sfoot .where { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
|
|
.sfoot button:not(.primary) { height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; white-space: nowrap; }
|
|
.sfoot button:not(.primary):hover { border-color: var(--t3); }
|
|
.sfoot .primary { height: 32px; }
|
|
|
|
#notes { display: flex; gap: 12px; font-size: 12px; max-width: 40vw; }
|
|
#notes p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
#toast { position: fixed; bottom: 16px; right: 16px; background: var(--panel); border: 1px solid var(--line); padding: 6px 12px; border-radius: 6px; color: var(--t2); opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 10; }
|
|
#toast.on { opacity: 1; }
|
|
dialog { background: var(--panel); color: var(--t1); border: 1px solid var(--line); border-radius: 8px; padding: 24px; max-width: min(1100px, 92vw); max-height: 86vh; overflow: auto; }
|
|
dialog::backdrop { background: var(--shade); }
|
|
#keys { max-width: 420px; }
|
|
#keys dl { display: grid; grid-template-columns: 64px 1fr; gap: 6px 12px; }
|
|
#keys dt { font-family: var(--mono); }
|
|
#keys dd { margin: 0; color: var(--t2); }
|
|
#keys form { margin-top: 16px; }
|
|
#keys form button, #merge-dialog .cmd button { border: 1px solid var(--line); border-radius: 6px; padding: 4px 12px; }
|
|
|
|
/* The merge preview. */
|
|
#merge-dialog section { display: flex; flex-direction: column; gap: 20px; min-width: 520px; }
|
|
#merge-dialog .head { display: flex; align-items: center; gap: 8px; }
|
|
#merge-dialog .targets { display: flex; flex-direction: column; }
|
|
#merge-dialog .target, #merge-dialog .file { display: flex; gap: 12px; padding: 8px; margin: 0 -8px; border-radius: 6px; color: var(--t1); }
|
|
#merge-dialog .target:hover { background: var(--hover); }
|
|
#merge-dialog .target .name, #merge-dialog .file > span:first-child { flex: 1 1 auto; min-width: 0; }
|
|
#merge-dialog .cmd { display: flex; align-items: center; gap: 8px; background: var(--bg); border-radius: 6px; padding: 4px 4px 4px 12px; }
|
|
#merge-dialog .cmd code { flex: 1 1 auto; color: var(--t2); overflow-wrap: anywhere; }
|
|
#merge-dialog .pair { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
|
|
#merge-dialog details .small { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; }
|
|
|
|
#config-dialog { width: min(640px, 94vw); padding: 0; flex-direction: column; }
|
|
#config-dialog[open] { display: flex; }
|
|
#config-text { font-family: var(--mono); font-size: 12px; tab-size: 4; }
|
|
#log .confirm { font-family: var(--sans); color: var(--t1); border: 1px solid var(--line); border-radius: 6px; padding: 4px 12px; }
|
|
|
|
/* Base: the branch the diff compares with. Off main, it is coloured, here and
|
|
above the stat, so a review against the wrong base is hard to miss. */
|
|
.base { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 4px 0 10px; border: 1px solid var(--line); border-radius: 6px; }
|
|
.base select { font: 12px var(--mono); color: var(--t1); background: transparent; border: 0; outline: 0; max-width: 180px; }
|
|
.base select option { background: var(--panel); }
|
|
.base.away { border-color: var(--amber); }
|
|
.base.away select, .base.away span { color: var(--amber); }
|
|
.offbase { color: var(--amber); font-size: 12px; }
|
|
|
|
/* A branch label's menu. */
|
|
#refmenu { position: fixed; z-index: 20; min-width: 220px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 4px; box-shadow: 0 8px 24px var(--shade); }
|
|
#refmenu p { padding: 6px 10px 4px; }
|
|
#refmenu [role=menuitem] { display: block; width: 100%; text-align: left; padding: 6px 10px; border-radius: 4px; color: var(--t1); }
|
|
#refmenu [role=menuitem]:hover:not(:disabled), #refmenu [role=menuitem]:focus-visible { background: var(--hover); outline: 0; }
|