Skip to content

Commit d63b2fc

Browse files
atharvasatharvas
committed
polish mobile layout and add try_similar verifier log
1 parent d7b753c commit d63b2fc

3 files changed

Lines changed: 154 additions & 15 deletions

File tree

‎src/components/charts/HeatmapGrid.svelte‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -398,6 +398,12 @@
398398
font-family: var(--sans);
399399
}
400400
401+
@media (max-width: 520px) {
402+
.hg-svg {
403+
min-width: 480px;
404+
}
405+
}
406+
401407
.col-label {
402408
font-size: 12px;
403409
fill: var(--text-primary);

‎src/components/sections/DatasetPipelineViz.svelte‎

Lines changed: 141 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -156,9 +156,9 @@
156156
// ticks and a new line / row / state lights up. The autoplay duration for
157157
// a substep is derived from how many beats it takes to fully reveal,
158158
// plus a tail for the final slide-in animation and a hold for reading.
159-
const BEAT_MS = 400;
160-
const ANIM_TAIL_MS = 500;
161-
const HOLD_MS = 1500;
159+
const BEAT_MS = 500;
160+
const ANIM_TAIL_MS = 625;
161+
const HOLD_MS = 1875;
162162
// stepBeat thresholds at which each step is "fully revealed".
163163
$: revealBeats = [
164164
REPO_LINES.length, // ① find_repos
@@ -1051,13 +1051,44 @@
10511051
<div class="tl-self-tag">PR #56847</div>
10521052
</div>
10531053
</div>
1054-
{#if s7Beat >= 8}
1055-
<div class="canvas-stat tl-caption">
1056-
→ reused build script from commit
1057-
<code>ce6321</code> (+41d) ·
1058-
<span class="ok-chip">✓ verifier passed</span>
1059-
</div>
1060-
{/if}
1054+
<div class="tl-log" aria-live="polite">
1055+
{#if s7Beat >= 3}
1056+
<div class="tl-log-row tl-log-fail">
1057+
<span class="tl-log-mark">✗</span>
1058+
<span class="tl-log-body">
1059+
try <code>5e8d44</code> (+14d) ·
1060+
<span class="fail-chip">verifier failed</span>
1061+
</span>
1062+
</div>
1063+
{/if}
1064+
{#if s7Beat >= 5}
1065+
<div class="tl-log-row tl-log-fail">
1066+
<span class="tl-log-mark">✗</span>
1067+
<span class="tl-log-body">
1068+
try <code>b7e019</code> (−22d) ·
1069+
<span class="fail-chip">verifier failed</span>
1070+
</span>
1071+
</div>
1072+
{/if}
1073+
{#if s7Beat >= 7}
1074+
<div class="tl-log-row tl-log-pass">
1075+
<span class="tl-log-mark">✓</span>
1076+
<span class="tl-log-body">
1077+
try <code>ce6321</code> (+41d) ·
1078+
<span class="ok-chip">verifier passed</span>
1079+
</span>
1080+
</div>
1081+
{/if}
1082+
{#if s7Beat >= 8}
1083+
<div class="tl-log-row tl-log-summary">
1084+
<span class="tl-log-mark">→</span>
1085+
<span class="tl-log-body">
1086+
reused build script from commit
1087+
<code>ce6321</code>
1088+
</span>
1089+
</div>
1090+
{/if}
1091+
</div>
10611092
{:else if active === 7}
10621093
<div class="agent">
10631094
<div class="agent-meta">
@@ -2047,6 +2078,65 @@
20472078
border-radius: 4px;
20482079
font-weight: 700;
20492080
}
2081+
.fail-chip {
2082+
background: rgba(220, 36, 24, 0.12);
2083+
color: var(--brand-red);
2084+
padding: 2px 8px;
2085+
border-radius: 4px;
2086+
font-weight: 700;
2087+
}
2088+
.tl-log {
2089+
display: flex;
2090+
flex-direction: column;
2091+
gap: 4px;
2092+
padding-top: 10px;
2093+
border-top: 1px dashed var(--border-primary);
2094+
font-family: var(--mono);
2095+
font-size: 0.82rem;
2096+
color: var(--text-muted);
2097+
}
2098+
.tl-log-row {
2099+
display: flex;
2100+
align-items: baseline;
2101+
gap: 8px;
2102+
opacity: 0;
2103+
transform: translateX(-4px);
2104+
animation: tl-log-in 280ms ease forwards;
2105+
}
2106+
.tl-log-mark {
2107+
font-weight: 700;
2108+
width: 12px;
2109+
flex: 0 0 auto;
2110+
text-align: center;
2111+
}
2112+
.tl-log-body {
2113+
min-width: 0;
2114+
}
2115+
.tl-log-body code {
2116+
color: var(--brand-red);
2117+
font-weight: 600;
2118+
}
2119+
.tl-log-fail .tl-log-mark {
2120+
color: var(--brand-red);
2121+
}
2122+
.tl-log-pass .tl-log-mark {
2123+
color: #0a6b39;
2124+
}
2125+
.tl-log-summary {
2126+
color: var(--text-primary);
2127+
padding-top: 4px;
2128+
margin-top: 2px;
2129+
border-top: 1px dotted var(--border-primary);
2130+
}
2131+
.tl-log-summary .tl-log-mark {
2132+
color: var(--brand-red);
2133+
}
2134+
@keyframes tl-log-in {
2135+
to {
2136+
opacity: 1;
2137+
transform: translateX(0);
2138+
}
2139+
}
20502140
.tl-note {
20512141
font-family: var(--sans);
20522142
font-size: 0.72rem;
@@ -3186,8 +3276,14 @@
31863276
.card-content {
31873277
padding: var(--space-md);
31883278
}
3279+
/* Stage 04 (classify) — the second `.classify` rule overrides to flex,
3280+
so we have to override flex-direction here, not grid-template-columns. */
31893281
.classify {
3190-
grid-template-columns: 1fr;
3282+
flex-direction: column;
3283+
align-items: stretch;
3284+
}
3285+
.cls-col {
3286+
min-width: 0;
31913287
}
31923288
.cls-arrow {
31933289
transform: rotate(90deg);
@@ -3196,12 +3292,27 @@
31963292
.verify-grid {
31973293
grid-template-columns: 1fr;
31983294
}
3295+
/* Stage 09 (machines) — keep local and remote side-by-side; squeeze
3296+
the arrows into the middle. */
31993297
.machines {
3200-
grid-template-columns: 1fr;
3298+
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
3299+
gap: 6px;
3300+
}
3301+
.machine {
3302+
padding: 8px 10px;
3303+
}
3304+
.m-name {
3305+
font-size: 0.78rem;
3306+
word-break: break-word;
3307+
}
3308+
.m-sub {
3309+
font-size: 0.66rem;
32013310
}
32023311
.m-arrows {
3203-
flex-direction: row;
3204-
justify-content: space-around;
3312+
gap: 6px;
3313+
}
3314+
.m-arrow-lbl {
3315+
display: none;
32053316
}
32063317
.bench-head,
32073318
.bench-row {
@@ -3228,6 +3339,13 @@
32283339
.phase-sub {
32293340
display: none;
32303341
}
3342+
/* Stage 07 (try_similar) — badges overlap horizontally because three
3343+
nodes (b7e019, 5e8d44, ce6321) sit within ~35% of the axis. Hide the
3344+
text badges on small screens; the colored dots already encode
3345+
pass/fail and the caption below spells out the verifier result. */
3346+
.tl-badge {
3347+
display: none;
3348+
}
32313349
}
32323350
32333351
@media (max-width: 520px) {
@@ -3249,5 +3367,14 @@
32493367
.phase-arrow {
32503368
display: none;
32513369
}
3370+
.m-name {
3371+
font-size: 0.7rem;
3372+
}
3373+
.m-sub {
3374+
font-size: 0.6rem;
3375+
}
3376+
.m-tag {
3377+
font-size: 0.56rem;
3378+
}
32523379
}
32533380
</style>

‎src/components/sections/KeyFindingsScroll.svelte‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,7 @@
180180
grid-template-columns: 200px minmax(0, 1fr);
181181
gap: var(--space-lg);
182182
align-items: start;
183+
min-width: 0;
183184
}
184185
185186
.kf-rail {
@@ -252,6 +253,7 @@
252253
display: flex;
253254
flex-direction: column;
254255
gap: var(--space-xl);
256+
min-width: 0;
255257
}
256258
257259
.kf-card {
@@ -262,6 +264,7 @@
262264
box-shadow: var(--shadow);
263265
scroll-margin-top: 64px;
264266
transition: border-color 160ms, box-shadow 160ms;
267+
min-width: 0;
265268
}
266269
267270
.kf-card.active {
@@ -270,7 +273,7 @@
270273
271274
@media (max-width: 820px) {
272275
.kf-layout {
273-
grid-template-columns: 1fr;
276+
grid-template-columns: minmax(0, 1fr);
274277
}
275278
.kf-rail {
276279
position: static;
@@ -291,5 +294,8 @@
291294
.rail-btn.active {
292295
border-color: var(--brand-blue, var(--accent-primary));
293296
}
297+
.kf-card {
298+
padding: var(--space-md);
299+
}
294300
}
295301
</style>

0 commit comments

Comments
 (0)