miner-ui-3: the banner only (the project lead: 'lets not actually change the miner page just sort the banner')

Variant C and the Earnings reshaping reverted: Mine and Earnings are exactly as shipped in 0.3.14. Kept from the
polish round: every strip, ask and clock card on the brand tokens (the row surface, a 1 px ember hairline on top,
ash text, ember only on the dot and the chevron; no filled brown or mustard field anywhere; the update strip and the
job strip share .notice), the plain-language strip and event sentences with the technical line behind the chevron,
the header baseline and the pill wording. 36 UI tests pass.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
igneum-labs 2026-10-06 18:18:58 +00:00
parent 5143cd2ed6
commit 6e9bd00dbb
21 changed files with 25 additions and 62 deletions

View file

@ -128,7 +128,6 @@ body.has-rail .notices{left:var(--rail)}
.notice-actions:empty{display:none}
.notice-close{flex:0 0 auto;width:30px;height:30px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--ash);font-size:20px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.notice-close:hover{color:var(--bone);border-color:var(--line-2)}
.notice-more{flex:0 0 auto;width:30px;height:30px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--ash);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.notice-more:hover{color:var(--bone);border-color:var(--line-2)}
.notice-more .chev{width:8px;height:8px;transform:rotate(45deg) translateY(-2px)}
@ -363,8 +362,12 @@ table{border-collapse:collapse;width:100%;font-size:var(--t-base)}
.clock-card .note{margin-top:0}
/* earnings: money first */
.money-row .v{font-family:var(--head);font-weight:700;letter-spacing:-.01em}
.money-row .s{color:var(--ash);min-width:0}
.money{display:flex;flex-direction:column;margin-bottom:var(--s-2)}
.money-row{display:flex;align-items:baseline;gap:var(--s-3);padding:8px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.money-row:last-child{border-bottom:0}
.money-row .v{font-family:var(--head);font-weight:700;font-size:var(--t-hero);line-height:1.1;white-space:nowrap;letter-spacing:-.01em;min-width:200px}
.money-row .v.small{font-size:var(--t-num)}
.money-row .s{font-size:var(--t-base);color:var(--ash);min-width:0}
/* prove */
.tier-list{list-style:none;margin:var(--s-3) 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:var(--t-md);color:var(--ink-2)}
@ -611,42 +614,3 @@ body.drawer-open .toast{bottom:calc(var(--drawer-h) + 16px)}
.drawer-head{padding-bottom:6px}
.toggle-big{min-height:96px}
}
/* the Mine hero (the project lead, 6 October 2026: "I love C"): the fleet rate big, the button a bar under it, the cards below */
.hero-row{grid-template-columns:1fr}
.totals{order:1;grid-template-columns:2fr 1fr 1fr 1fr;align-items:end;padding:28px 28px 24px;border-color:transparent;background:linear-gradient(180deg,var(--graphite),var(--obsidian))}
.tot{border-left:0;padding-left:0}
.tot:first-child .v{font-size:84px;line-height:.95;letter-spacing:-.03em}
.tot:first-child .k{font-size:var(--t-sm);margin-top:10px}
.tot:first-child .s{font-size:var(--t-md)}
.tot .v{font-size:30px}
.toggle-big{order:2;min-height:64px;flex-direction:row;align-items:center;gap:14px;padding:12px 20px}
.toggle-big .ring{margin:0}
.toggle-big .ts{margin-left:auto}
.gl-main{padding:10px 14px}
.num .v{font-size:18px}
/* Earnings in the same direction: the money figure big on the same fade, the other three beside it */
.money-hero{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;align-items:end;gap:var(--s-4);margin:calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) var(--s-3);padding:28px var(--card-pad) 24px;background:linear-gradient(180deg,var(--graphite),var(--obsidian));border-radius:var(--card-r) var(--card-r) 0 0}
.money-row{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:0;border:0;min-width:0}
.money-row .v{font-size:28px;min-width:0;max-width:100%;line-height:1.1}
.money-row .v.small{font-size:28px}
.money-row:first-child .v{font-size:84px;line-height:.95;letter-spacing:-.03em}
.money-row:first-child .s{font-size:var(--t-md)}
.money-row .s{font-size:var(--t-sm)}
#page-earnings .card:first-child{overflow:hidden}
@media (max-width:1180px){
.totals{grid-template-columns:1fr 1fr 1fr 1fr}
.tot:first-child .v{font-size:64px}
.money-hero{grid-template-columns:1fr 1fr 1fr 1fr}
.money-row:first-child .v{font-size:64px}
}
@media (max-width:860px){
.totals,.money-hero{grid-template-columns:1fr 1fr;row-gap:var(--s-4)}
.tot:first-child,.money-row:first-child{grid-column:1 / -1}
.tot:nth-child(3){padding-left:0}
}
@media (max-width:720px){
.tot:first-child .v,.money-row:first-child .v{font-size:56px}
.toggle-big .ts{display:none}
.money-hero{padding:20px var(--s-4) 16px}
}

View file

@ -1479,11 +1479,11 @@ if (typeof document !== 'undefined') (function () {
function renderEarnings(s) {
var a = s.address || {}, m = s.mining, pv = s.proving || {}, price = priceNow();
var ign = pv.paid_wei && Number(pv.paid_wei) ? (Number(pv.paid_wei) / 1e18).toFixed(4) : '0.0000';
setText('e-ign', ign); setText('e-ign-sub', 'IGN from ' + (pv.paid || 0) + ' proof' + (pv.paid === 1 ? '' : 's') + (pv.segments_paid ? ' and ' + pv.segments_paid + ' segment' + (pv.segments_paid === 1 ? '' : 's') : ''));
setText('e-blocks', withCommas(m.accepted_total)); setText('e-blocks-sub', 'block' + (m.accepted_total === 1 ? '' : 's') + ' lifetime · ' + withCommas(m.accepted_session) + ' this run');
setText('e-ign', ign + ' IGN'); setText('e-ign-sub', 'from ' + (pv.paid || 0) + ' proof' + (pv.paid === 1 ? '' : 's') + (pv.segments_paid ? ' and ' + pv.segments_paid + ' segment' + (pv.segments_paid === 1 ? '' : 's') : ''));
setText('e-blocks', withCommas(m.accepted_total) + ' block' + (m.accepted_total === 1 ? '' : 's')); setText('e-blocks-sub', 'lifetime · ' + withCommas(m.accepted_session) + ' this run, ' + uptime(s.uptime_s));
var watts = View.wattsTotal(m.cards), ppd = View.poundsPerDay(watts, price);
setText('e-cost', ppd === null ? (watts > 0 ? Math.round(watts) + ' W' : 'no draw') : money(ppd));
setText('e-cost-sub', ppd === null ? (watts > 0 ? 'electricity: set a price for the cost' : 'electricity: no card reports its draw') : 'a day in electricity at ' + price + 'p/kWh, ' + Math.round(watts) + ' W');
setText('e-cost', ppd === null ? (watts > 0 ? Math.round(watts) + ' W' : 'no draw') : money(ppd) + ' a day');
setText('e-cost-sub', ppd === null ? (watts > 0 ? 'electricity: set a price to see the cost' : 'electricity: no card reports its draw') : 'electricity at ' + price + 'p/kWh for ' + Math.round(watts) + ' W');
setHidden('e-price-btn', !(watts > 0 && ppd === null));
if (document.activeElement !== $('s-devfee')) $('s-devfee').checked = !!(s.settings && s.settings.dev_fee);
setText('s-devfee-text', s.settings.dev_fee ? 'Dev fee: 1 block in 100 pays the miner software’s author' : 'Dev fee off: every block pays your address');

View file

@ -248,7 +248,7 @@
<!-- Earnings -->
<section class="page" id="page-earnings" data-page="earnings" hidden>
<div class="card">
<div class="money-hero">
<div class="money">
<div class="money-row"><span class="v" id="e-earned">£0.00</span><span class="s" id="e-earned-sub">earned: nothing is bought or sold on devnet</span></div>
<div class="money-row"><span class="v small" id="e-ign">0.0000 IGN</span><span class="s" id="e-ign-sub">from 0 proofs</span></div>
<div class="money-row"><span class="v small" id="e-blocks">0 blocks</span><span class="s" id="e-blocks-sub">lifetime</span></div>

View file

@ -286,25 +286,24 @@ re-read the manifest and install now (...) done after 0 min. Report uploaded." B
| No raw job, manifest or relay text on a user surface. The strip reads "A job from the team ran: update check, 0 min." / "A job from the team is running: shard benchmark, 6 min. Proving shard 3 of 8." / "A job from the team failed: build, after 32 min." / "Updated to 0.3.14 at 18:52."; the technical line (the job's title, summary, RESULT line, exit code) sits behind a chevron; the × stays. `Notices.jobWord` maps a kind or an id prefix to a user's word (update check, restart, log collection, shard benchmark, build, tuning check, a script). | app.js Notices |
| The Activity feed speaks in the app's voice: `View.plainEvent` maps every engine event string (`src/engine.rs` et al., 80 patterns) to a sentence ("Block found by Apple M5 Max", "Rule settings read from the team", "The node stopped (code 101); restarting", "A job from the team ran: update check, 0 min"); the engine's own line is the row's tooltip; the kind word becomes a coloured dot. Unknown lines keep their words with a JSON tail cut. | app.js View, renderMine |
| The header: title, grey subtitle and the pill share one baseline; the pill is a sentence with a coloured dot: "Mining · 511 MH/s" (molten), "Tuning" (molten), "Paused", "Syncing the node", "Starting the worker", "Not mining" (grey), "Node restarting", "Node failed", "Engine not answering" (ember), "Stopping", "Detecting cards", "Setting up". `View.pill`. | app.js, app.css |
| Three Mine layouts behind `?variant=a|b|c` for the project lead to pick: A quieter, B denser, C the hero number. The chosen one becomes the default. | app.css |
| Three Mine layouts were offered behind `?variant=a|b|c` (quieter, denser, hero number); the project lead picked C, then ruled the page stays as shipped (section 15). The switch is gone. | app.css |
| 390 px: the strip's text, chevron and × on one line. Light and dark checked. | app.css |
Screenshots: `p01-mine-variant-a-quieter.png`, `p02-mine-variant-b-denser.png`, `p03-mine-variant-c-hero.png` (full
page, the rig at 28p/kWh, the 5090 tuned), `p04`/`p05` the plain job strip closed and open, `p06` the updated strip,
Screenshots: `p04`/`p05` the plain job strip closed and open, `p06` the updated strip,
`p07` the header paused, `p08` the activity feed, `p09`/`p12` light, `p10`/`p11` 390 px. Tests: 36 pass.
## 15. the project lead's pick and the strip's look (6 October 2026, evening)
## 15. the project lead's ruling: the banner only (6 October 2026, evening)
the project lead: "I love C". C is the default: the fleet rate at 84 px on a graphite-to-obsidian fade with W, £ a day and blocks
beside it, Start/Stop as a full-width bar under it, the cards below. Earnings carries the same shape: the £ figure big
on the same fade, IGN, blocks and the electricity £ a day beside it. The `?variant=` switch is gone.
the project lead: "lets not actually change the miner page just sort the banner". Variant C and the Earnings reshaping are
reverted; the Mine and Earnings screens are exactly as shipped in 0.3.14. The three variant screenshots are gone with
them. What stays from the polish round:
The strip's look (the project lead: the brown and amber band read off-brand): every strip, ask and clock card is one component
on the brand tokens: the row surface (one step lighter than the page), a 1 px ember hairline along the top, ash text,
ember only on the state dot and the chevron. No filled brown or mustard field anywhere: `.nav.on`, `.pill.on`,
`.btn.ghost.on`, `.option.on`, `.toggle-big.stop .ring`, `.clock-card`, `.ask`, the log's search hit and `mark` lost
their tints (the only remaining tint is `::selection`). The update strip and the job strip share the one `.notice`.
| Kept | Where |
|---|---|
| The strip's look: the row surface (one step lighter than the page), a 1 px ember hairline along the top, ash text, ember only on the state dot and the chevron; the update strip and the job strip share the one `.notice`; the asks and the clock card carry the same hairline. No filled brown or mustard field anywhere (the rail's active item, the pill, the ghost-on button, the option, the stop ring, the log hit and `mark` lost their tints; only `::selection` keeps a colour). | app.css |
| The strip's words: "A job from the team ran: update check, 0 min." / "Updated to 0.3.14 at 18:52.", the technical line behind the chevron, the × kept | app.js Notices |
| The Activity feed in the app's voice (`View.plainEvent`, the engine line as the tooltip, a kind dot) | app.js View, renderMine |
| The header: title, subtitle and pill on one baseline; the pill a sentence with a coloured dot (`View.pill`) | app.js, app.css |
Screenshots: `q01-mine-strip-dark.png`, `q02-mine-strip-light.png` (the job strip over the C hero), `q03` the strip
open, `q04` the update strip, `q05`/`q06` Earnings dark and light, `q07` the Mac paused (the ember Start bar),
`q08`/`q09` 390 px, `q10` the quit ask, `q11` the clock card. Tests: 36 pass.
Screenshots: `r01-mine-strip-dark.png`, `r02-mine-strip-light.png` (Mine as shipped, the job strip showing),
`r03-earnings-dark.png`. Tests: 36 pass.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 428 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 401 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 456 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 277 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 281 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 265 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 214 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 205 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 208 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 214 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 129 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 153 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 236 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 221 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 282 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 284 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 197 KiB