Skip to content

P3 · M4 API and screens

Running since 2026-10-30 · milestone M4 of step P3 (P2 §4) · board gap G1 done (Paper chrome on the lite shared components), merged as #85 · board gap G3a done (Paper page bodies of the run boards), merged as #88 · board gap G2 done on autopilot/P3-G2 (the launch boards) · Tasks 17–21, G4 and G5 to do

One Progress page per milestone, opened with its first PR and closed with its done proof (P2 §0). This page covers M4, "API and screens", and the board gaps that come before Task 19.

Tasks

Task Plan Depends on Branch Status
G1 · Paper chrome on the shared lite-board components P2 §10.1 none autopilot/P3-G1 done, merged as #85
G2 · The launch boards: engine buttons and path-or-Git P2 §10.2 G1 autopilot/P3-G2 done
G3a · Paper page bodies of the run boards P2 §10.3 G1 autopilot/P3-G3a done, merged as #88

Why

  • P2 §10.1: G1 restyles the four shared lite components before Task 19, so the 30 lite boards and the code of G4 share one shell.
  • The look: the GO of 2026-10-29 (decision log, change 5) makes depictio's Paper chrome Spectio's look (ui-spec §7).
  • The placeholders: Thomas answered inbox #72 with (b). Search, notifications and the avatar are shown as disabled placeholders, not left out (follow-up FU-P3-02).

What changed

G1 · Paper chrome on the shared lite-board components

Three of the four shared components in design/ui-canvas/ now draw the Paper shell of ui-spec §7. Thirty lite boards import them, and none of the boards was edited: the components keep their props (crumbs, active, title, sub, back).

  • LiteTopbar (floating top bar):
    • Breadcrumbs: the crumbs prop ("Runs / rnaseq-2026-10-25 / Tasks") becomes Home › Runs › rnaseq-2026-10-25 › Tasks in a <nav aria-label="Breadcrumb"><ol>. Every crumb but the last is a link to its board; the last has aria-current="page". Below 1000 px, the crumbs between Runs and the last fold into "…", the last crumb ellipsizes, and the search box becomes an icon button. A crumb with no board is plain text.
    • Theme toggle: <button role="switch" aria-checked="false" aria-label="Dark theme">.
    • Search (⌘K), notifications and the account avatar, as Thomas answered inbox #72 (b): native <button disabled> controls named "Search (not in 0.0.1)", "Notifications (not in 0.0.1)" and "Account (not in 0.0.1)". They are dimmed and never take focus. The search box also shows "Search (not in 0.0.1)" as text.
    • The "SLURM · server on login1" chip moved to the sidebar foot.
  • LiteSidebar (foldable sidebar):
    • A "WORKSPACE" eyebrow and a fold button, <button aria-expanded aria-controls="lite-nav-items">.
    • A new prop, collapsed, draws the folded 92 px icon rail, with the server status as "✓ on". The labels stay readable by a screen reader.
    • The foot shows the server status: "Spectio 0.0.1 · online", then "SLURM · server on login1 · your account amartin".
    • The Runs count reads "Runs, 6 active runs" through visually hidden text.
  • MLiteTopbar (phone): the same controls in the 48 px row: the server chip, the disabled search, notifications and account buttons, and the theme switch (44 px). Below 390 px the search and notifications placeholders are hidden, so the row fits at 320 px.
  • MLiteTabbar: unchanged. It already was the floating bottom tab bar of Paper.

G2 · The launch boards: engine buttons and path-or-Git

What changed. LiteLaunch, LiteLaunchSnakemake and MLiteLaunch in design/ui-canvas/ now draw the launch form of ui-spec §4.6 (note 2026-10-29) and P1 Assumption 2:

  • Page head (desktop), as in ui-spec §7: a 48 px icon tile with the sidebar's Launch tint, "Launch a workflow" in the Outfit heading font, one line of description, and Launch on the right. A second Launch ends the aside, which stays in view from 1200 px; both share one state, and when disabled both show the reason ("Fill the required field: samples").
  • Pipeline: one field takes an absolute path, a GitHub or nf-core name, or an https:// or ssh URL. Beside it are Revision (Git only) and Load. For a path, Revision is disabled and says why. LiteLaunchSnakemake shows a Git repository at a revision: Revision is required, and a short name is read as GitHub before Load ("Read as GitHub: https://github.com/…").
  • Engine: two native <button aria-pressed>, Nextflow and Snakemake, in a group labelled "Engine". The guessed one is pressed and shows a check mark. "Guessed from main.nf · change it if the guess is wrong" sits beside them; on a prefilled launch it reads "Nextflow, as in rnaseq-2026-10-25".
  • States, drawn as cards at the foot of each board:
    • no guess, both files found (LiteLaunch, MLiteLaunch): no button is pressed and Launch waits for a choice;
    • no guess, neither file found (LiteLaunchSnakemake): Launch stays disabled with "No main.nf or Snakefile in this directory: check the path", whatever is pressed;
    • guess overruled (LiteLaunch): Snakemake pressed on a directory with no Snakefile, so Launch says it will refuse;
    • Git (LiteLaunchSnakemake): before Load with no revision, fetching, and not fetched (revision not found, with the other fetch failures listed);
    • refused input, following api §5: a file:// URL (LiteLaunch, MLiteLaunch) and a revision that starts with - (LiteLaunchSnakemake).

G3a · Paper page bodies of the run boards

The run boards and their phone twins now open with the page head of ui-spec §7: a tinted 48 px icon tile, the Outfit h1, a one-line description and the primary action on the right. LiteHome and LiteRuns already had it and are unchanged.

  • Run heads (LiteRunDetail, LiteRunDetailSnakemake, LiteRunObserved, and the page behind LiteCancelDialog):
    • the pipeline logo sits in a 48 px tile with the Runs tint (--sp-violet-50), in place of a white bordered 52 px tile;
    • the run name wraps instead of overflowing, and the state line wraps as one sentence;
    • Cancel run and Copy form one group on the right. The page behind the cancel dialog shows Copy too.
  • States boards (LiteStates, LiteStatesRun): a tile in the Runs tint and a one-line description. The rest of the old description is a caption under the panels. The run-detail loading skeleton draws the tile too.
  • Phone, top-level pages:
    • MLiteRuns keeps its title and "live, updated" line in the compact top bar, as ui-spec §4.11 asks; it is unchanged.
    • MLiteHome already had its h1 in the body. It gains a tile in --sp-indigo-100, the -100 step because the phone page is grey.
    • Its description now reads "4 running, 1 queued, 1 cancelling · live, updated 4 s ago", shortened from "4 runs running, 1 queued and 1 cancelling" to fit beside the tile.
  • Phone, run pages (MLiteRunDetail, MLiteRunObserved, MLiteCancelSheet):
    • the back link, h1 and state line stay in the top bar;
    • the white run card starts with the pipeline in a 48 px tile (--sp-violet-50);
    • the card behind the cancel sheet shows Copy too.
  • Two G1 minors:
    • UX-G1-12, LiteTopbar: below 1000 px, only the crumbs before the run fold. The link back to the run stays: "Home › … › rnaseq-2026-10-25 › Tasks".
    • UX-G1-13, MLiteTopbar: the search and notifications placeholders are 44 px wide, and the row gap is 2 px.
  • crumbs props (UX-G1-11): no G3a board names an in-page tab in its crumbs. LiteTaskFilesStates does ("… / Tasks"); it is a G3b board.

Evidence

  • Renders: each board was rendered with node tools/canvas/render.js and looked at:

    • the 19 desktop boards at 1440 × 1180: LiteCancelDialog, LiteHome, LiteLaunch, LiteLaunchSnakemake, LiteLegend, LiteReportViewer, LiteResults, LiteRunActions, LiteRunDetail, LiteRunDetailSnakemake, LiteRunFailed, LiteRunLogs, LiteRunObserved, LiteRunTasks, LiteRuns, LiteStates, LiteStatesRun, LiteTaskFiles, LiteTaskFilesStates;
    • the 11 phone boards at 390 × 844: MLiteCancelSheet, MLiteHome, MLiteLaunch, MLiteResumeSheet, MLiteRunDetail, MLiteRunFailed, MLiteRunLogs, MLiteRunObserved, MLiteRunTasks, MLiteRuns, MLiteTaskFilesSheet;
    • LiteRunTasks again at 1024 px, the four components alone, and the folded sidebar.
    • No overlap or clipping. The page bodies sit where they did before.

  • Review: reviews/code/P3-G1.md.

    • Self-check by the worker session, against the ux-reviewer brief: one major (the top bar's global link colour) and one contrast minor, both fixed.

    • Independent ux-reviewer, round 1: changes (2 majors, 4 minors).

      • Breadcrumbs overlapped between 768 and 1199 px. Below 1000 px they now fold into "…", and the search box becomes an icon.
      • The phone row overflowed below 377 px. Below 390 px the search and notifications placeholders are now hidden.
      • Three minors are fixed: the folded rail is 92 px with a check glyph, the logo link has no aria-label, and an unmapped crumb is plain text.
      • One spec minor (UX-G1-09, a ui-spec §2 note) is deferred to the next /apply-findings.

    • Independent ux-reviewer, round 2: approve on 135f2d2, after re-rendering at 768, 900, 1024 and 1440 px (desktop), at real 320, 360 and 390 px widths (phone top bar), and the folded rail. Two new minors (UX-G1-12, UX-G1-13) are handed to G3a.

  • Screenshots: each of the four regenerated images was looked at. They show the new chrome:

    • the breadcrumbs, the disabled search box, notifications and avatar, and the theme switch;
    • the "WORKSPACE" eyebrow and the server status in the sidebar foot;
    • on the phone, the server chip and the controls in the first row.

    The alt texts in mvp-0.0.1 §2 describe the page bodies, which did not change, so they are kept.

  • Docs gate: python3 tools/docs/check.py and uvx --with mkdocs-material mkdocs build --strict pass.

  • G2:

    • Renders: LiteLaunch and LiteLaunchSnakemake at 1440 × 1180 and 1024 × 1180, and again 4600 to 5200 px tall to read the state cards; MLiteLaunch at 390 × 844, and a scratch copy 3400 px tall for its state cards (deleted after the render). Each was looked at after every board change. A script found no duplicate id and no reference to a missing id.

    • Review: reviews/code/P3-G2.md.

      • Self-check against the ux-reviewer brief: changes; three board fixes.
      • Independent ux-reviewer, round 1: changes (2 majors, 6 minors). Launch is back at the end of the aside, and the neither-file state no longer offers a choice that cannot work. The minors added the Git states, the "Read as GitHub" line, the required revision and the prefilled engine line.
      • Independent ux-reviewer, round 2: approve on efe9e31 (0 blockers, 0 majors, 3 minors and a nit). Two minors and the nit are fixed in 3c955ae; UX-G2-17 (a sticky aside taller than a short screen) goes to Task 19.
      • Independent doc-reviewer: changes (9/14), then approve (12/14) after this page was revised.

    • Docs gate: python3 tools/docs/check.py reports 0 failures and uvx --with mkdocs-material mkdocs build --strict passes.

  • G3a:

    • Renders: each board was rendered with node tools/canvas/render.js and looked at.

      • Desktop, at 1440 × 1180, 1024 × 800 and 900 × 800: LiteRunDetail, LiteRunDetailSnakemake, LiteRunObserved, LiteCancelDialog, LiteStates and LiteStatesRun, plus LiteTaskFilesStates and LiteResults for the folded breadcrumbs.
      • Phone, at 390 × 844: MLiteHome, MLiteRuns, MLiteRunDetail, MLiteRunObserved and MLiteCancelSheet. Before the fix round, MLiteTopbar was also rendered alone at 360 px.
      • No overlap or clipping.

    • Review: reviews/code/P3-G3a.md.

      • Self-check by the worker session, against the ux-reviewer brief: it found UX-G3a-01 to -07. -01 to -03 were fixed in 127fc46, -04 was withdrawn, and -05 to -07 are open.
      • Independent ux-reviewer, round 1 on 127fc46: changes (1 major, 5 minors), all fixed. The major: MLiteRuns had moved its title and "live, updated" line out of the compact top bar (ui-spec §4.11), so they scrolled away; it is back to base.
      • Independent ux-reviewer, round 2 on 235c52c: approve (0 blockers, 0 majors, 1 new minor, UX-G3a-14, for /apply-findings).
      • Independent doc-reviewer: approve, 11/14.

    • Docs gate: python3 tools/docs/check.py (0 failures) and uvx --with mkdocs-material mkdocs build --strict pass.

Figures and media

  • Screenshots: lite-run-detail, lite-launch, lite-runs and lite-run-detail-phone were regenerated. Their boards import the restyled components, and they appear in mvp-0.0.1 §2. They were made with python3 tools/media/shots.py run --shot <id> --theme light (manifest entry ui-shots), as in UILITE and APPLY7. A PR that carries them needs the screenshots label.
  • Screenshot, G2: lite-launch was regenerated again after the G2 board changes, with python3 tools/media/shots.py run --shot lite-launch --theme light, and looked at. It shows the page head, the Pipeline and Revision fields and the Engine buttons. Its alt text in mvp-0.0.1 §2 still names "the detected engine", so it is stale (UX-G2-06).
  • Screenshots, G3a: lite-run-detail and lite-run-detail-phone were regenerated after the fix round with python3 tools/media/shots.py run --shot <id> --theme light, and looked at. They show the tinted tile in the run head with Cancel run and Copy on the right, and on the phone the pipeline tile at the top of the run card. Their alt texts in mvp-0.0.1 §2 still hold. lite-runs was not regenerated, because LiteRuns did not change.
  • Sketch: this milestone's sketch pair, light and dark, is added before the page gets status: done.

Findings and open questions

  • Minors left open:
    • the phone placeholders show no words;
    • folding is drawn by a prop, and G4 makes it work;
    • the theme switch has no dark palette yet (G4);
    • UX-G1-09 waits for the next /apply-findings. It covers the ui-spec §2 note for #72 (b) and the phone theme switch, and the 2026-10-28 phone note (ui-spec §2), which still says the first row holds only the logo and the login node.
  • The Progress index cannot link the P3-M* pages yet: hooks/progress.py _table looks only for W5/P3.md. This is follow-up FU-P3-01, already open.
  • UX-G1-12 (below 1000 px the folded crumbs, including the link back to the run, cannot be reached) and UX-G1-13 (phone placeholders 40 px wide, not 44) are fixed in G3a.
  • G2 open items (record):
    • to the next /apply-findings: UX-G2-04 (major: GET /workflows:inspect does not return the engine files it found; it must land before Task 17), UX-G2-05 (the ui-spec §4.6 wording), UX-G2-06 (the mvp-0.0.1 §2 note and alt text) and UX-G2-14 (G5's tests on GET /workflows:inspect);
    • to Task 19: UX-G2-07 (two toggle buttons for a one-of-two choice), UX-G2-08 (the disabled Revision field takes no focus), UX-G2-17 (the sticky aside on a short screen) and whether an edit cancels a fetch.
  • G3a items left open (reviews/code/P3-G3a.md):
    • for the next /apply-findings:
      • the tablet range of ui-spec §4.11 (768–1199 px, folded sidebar) is not drawn on the desktop boards; the shell code follows in Task 19 and G4;
      • a tint rule for page-head tiles: -100 on the grey phone page, -50 on white;
      • UX-G3a-14, a ui-spec §4.11 note: on the phone, Home shows its greeting as a body page head and the top bar carries no title; every other top-level page keeps the title and subtitle in the compact top bar;
    • for G4: the runs table scrolls sideways at 1024 px (UX-G3a-05), and the phone run title and state line are cut with an ellipsis (UX-G3a-06);
    • for G3b: the top bar's global link colour (UX-G3a-07), and the "… / Tasks" crumb of LiteTaskFilesStates.