Redesign workbench dashboard shell

.gitignore

@@ -5,3 +5,4 @@ __pycache__/
 *.zip
 *.csv
 !tests/fixtures/*.csv
+design_handoff_workbench_redesign/

biolmnet/ui/__init__.py

@@ -0,0 +1,9 @@
+"""Pure-presentation UI helpers for the BioLM-NET Workbench.
+
+Nothing in this package touches the scientific core (``biolmnet.model``,
+``biolmnet.data``, ``biolmnet.training``, ``biolmnet.artifacts``). It only
+builds the CSS and HTML fragments ``app.py`` renders around that logic.
+"""
+
+from . import components  # noqa: F401
+from .styles import CSS  # noqa: F401

biolmnet/ui/components.py

@@ -0,0 +1,239 @@
+"""HTML builders for the Workbench shell.
+
+Every function here returns a plain HTML string for a ``gr.HTML`` component.
+They only format data already produced by ``biolmnet.data`` /
+``biolmnet.training`` / ``biolmnet.artifacts`` — none of them compute
+anything scientific.
+"""
+
+from __future__ import annotations
+
+import html
+from typing import Iterable, Sequence
+
+esc = html.escape
+
+CORNER_MARKS = (
+    '<i class="corner tl"></i><i class="corner tr"></i>'
+    '<i class="corner bl"></i><i class="corner br"></i>'
+)
+
+
+def blueprint_div(inner_html: str, *, extra_class: str = "", style: str = "") -> str:
+    """Wrap ``inner_html`` in a blueprint frame (hairline border + corner marks)."""
+    cls = f"blueprint {extra_class}".strip()
+    style_attr = f' style="{style}"' if style else ""
+    return f'<div class="{cls}"{style_attr}>{CORNER_MARKS}{inner_html}</div>'
+
+
+# ── rail ─────────────────────────────────────────────────────────────────
+
+def brand_block_html() -> str:
+    return (
+        '<div class="rail-brand"><span class="name">BioLM-NET</span>'
+        '<div class="mono" style="margin-top:5px">Workbench</div></div>'
+        '<div class="mono rail-kicker">Workflow</div>'
+    )
+
+
+def rail_row_html(number: int, label: str, state: str, status_word: str) -> str:
+    """One workflow rail row. ``state`` is one of done/on/next/off."""
+    return (
+        f'<div class="rr {state}">'
+        f'<span class="rn">{number:02d}</span>'
+        f'<span class="lb">{esc(label)}</span>'
+        f'<span class="st">{esc(status_word)}</span>'
+        f"</div>"
+    )
+
+
+def kv_row(key: str, value: str, tone: str | None = None) -> str:
+    cls = f"num {tone}" if tone else "num"
+    return f'<div class="kv"><span>{esc(key)}</span><span class="{cls}">{esc(value)}</span></div>'
+
+
+def run_state_plate(rows: Sequence[tuple[str, str, str | None]]) -> str:
+    """``rows``: (key, value, tone) where tone is None/accent/error/muted."""
+    inner = "".join(kv_row(k, v, tone) for k, v, tone in rows)
+    return blueprint_div(inner, extra_class="plate")
+
+
+def kv_plain_row(key: str, value: str, *, last: bool = False) -> str:
+    cls = "kv-plain last" if last else "kv-plain"
+    return f'<div class="{cls}"><span>{esc(key)}</span><span class="num">{esc(value)}</span></div>'
+
+
+def footnote_html(line1: str, line2: str) -> str:
+    return f'<div class="rail-footnote">{esc(line1)}<br>{esc(line2)}</div>'
+
+
+# ── topbar / page head ──────────────────────────────────────────────────
+
+def topbar_html(stage_no: int, total: int, stage_name: str, session_id: str, right_text: str) -> str:
+    # Only the left "STAGE 0n / 05" label is uppercase; the session/device
+    # note on the right stays mixed-case (a lowercase-hex session id reading
+    # upper-cased is just noise).
+    return (
+        '<div class="topbar">'
+        f'<div class="mono">Stage {stage_no:02d} / {total:02d} — {esc(stage_name)}</div>'
+        f'<div class="num" style="font-size:9.5px;letter-spacing:.04em;color:var(--color-muted-2)">'
+        f"Session {esc(session_id)} · {esc(right_text)}</div>"
+        "</div>"
+    )
+
+
+def title_block_html(title: str, description: str) -> str:
+    return f"<h2>{esc(title)}</h2>" f'<div class="desc">{esc(description)}</div>'
+
+
+def mono_meta_html(lines: Iterable[str], *, align_right: bool = True) -> str:
+    align = "text-align:right;" if align_right else ""
+    body = "<br>".join(esc(line) for line in lines)
+    return f'<div class="mono" style="{align}font-size:9.5px;line-height:1.7">{body}</div>'
+
+
+# ── stat plates ──────────────────────────────────────────────────────────
+
+def stat_plate(value: str, label: str, *, label_first: bool = False) -> str:
+    if label_first:
+        inner = f'<div class="k">{esc(label)}</div><div class="v">{esc(value)}</div>'
+    else:
+        inner = f'<div class="v">{esc(value)}</div><div class="k">{esc(label)}</div>'
+    return blueprint_div(inner, extra_class="stat")
+
+
+def mini_stat_html(value: str, label: str) -> str:
+    """A label+value pair with no frame of its own (used inside a shared blueprint panel)."""
+    return (
+        f'<div><div class="mono" style="font-size:9px">{esc(label)}</div>'
+        f'<div style="font:600 26px/1.1 var(--font-heading)">{esc(value)}</div></div>'
+    )
+
+
+# ── bars ─────────────────────────────────────────────────────────────────
+
+def bar_cell(pct: float, *, height: int = 8) -> str:
+    pct = max(0.0, min(100.0, pct))
+    return f'<div class="bar" style="height:{height}px"><i style="width:{pct:.1f}%"></i></div>'
+
+
+def labeled_bar_row(
+    label: str, pct: float, value_text: str, *, label_width: int = 78, bar_height: int = 12, value_width: int = 52
+) -> str:
+    return (
+        '<div style="display:flex;align-items:center;gap:10px">'
+        f'<span style="width:{label_width}px;font-size:12px">{esc(label)}</span>'
+        f"{bar_cell(pct, height=bar_height)}"
+        f'<span class="num" style="width:{value_width}px;text-align:right">{esc(value_text)}</span>'
+        "</div>"
+    )
+
+
+# ── tables ───────────────────────────────────────────────────────────────
+
+def table_html(
+    headers: Sequence[str],
+    rows: Sequence[Sequence[str]],
+    *,
+    aligns: Sequence[str] | None = None,
+    numeric_cols: Sequence[bool] | None = None,
+    widths: Sequence[str | None] | None = None,
+) -> str:
+    """Build a ``.tbl`` table. Cell values are raw HTML — escape plain text
+    with :data:`esc` before passing it in."""
+    n_cols = len(headers)
+    aligns = list(aligns) if aligns else ["left"] * n_cols
+    numeric_cols = list(numeric_cols) if numeric_cols else [False] * n_cols
+    widths = list(widths) if widths else [None] * n_cols
+
+    head_cells = []
+    for header, align, width in zip(headers, aligns, widths):
+        style_parts = []
+        if width:
+            style_parts.append(f"width:{width}")
+        if align == "right":
+            style_parts.append("text-align:right")
+        attr = f' style="{";".join(style_parts)}"' if style_parts else ""
+        head_cells.append(f"<th{attr}>{esc(header)}</th>")
+
+    body_rows = []
+    for row in rows:
+        cells = []
+        for value, align, numeric in zip(row, aligns, numeric_cols):
+            cls_attr = ' class="n"' if numeric else ""
+            style_attr = ' style="text-align:right"' if align == "right" else ""
+            cells.append(f"<td{cls_attr}{style_attr}>{value}</td>")
+        body_rows.append(f"<tr>{''.join(cells)}</tr>")
+
+    return (
+        '<table class="tbl"><thead><tr>'
+        + "".join(head_cells)
+        + "</tr></thead><tbody>"
+        + "".join(body_rows)
+        + "</tbody></table>"
+    )
+
+
+def confusion_matrix_html(matrix, labels: Sequence[str]) -> str:
+    """A tinted CSS grid confusion matrix (rows true, columns predicted)."""
+    n = len(labels)
+    row_totals = [max(sum(row), 1) for row in matrix]
+
+    def cell_style(row_index: int, count: float) -> str:
+        ratio = count / row_totals[row_index]
+        if ratio >= 0.7:
+            return "background:var(--color-accent-800);color:#f2f2f3"
+        if ratio >= 0.4:
+            return "background:var(--color-accent-700);color:#f2f2f3"
+        if ratio >= 0.15:
+            return "background:var(--color-accent-200)"
+        return "background:var(--color-accent-100)"
+
+    header_cells = "".join(
+        f'<div class="mono" style="font-size:8.5px;text-align:center">{esc(label)}</div>' for label in labels
+    )
+    row_label_cells = "".join(
+        f'<div class="mono" style="font-size:8.5px;display:grid;align-items:center">{esc(label)}</div>'
+        for label in labels
+    )
+    body_cells = "".join(
+        f'<div style="{cell_style(i, matrix[i][j])}">{int(matrix[i][j])}</div>'
+        for i in range(n)
+        for j in range(n)
+    )
+    return (
+        '<div style="display:grid;grid-template-columns:56px 1fr;gap:8px">'
+        "<div></div>"
+        f'<div style="display:grid;grid-template-columns:repeat({n},1fr);gap:2px">{header_cells}</div>'
+        f'<div style="display:grid;gap:2px">{row_label_cells}</div>'
+        f'<div class="cm" style="--cm-n:{n}">{body_cells}</div>'
+        "</div>"
+    )
+
+
+# ── status / validation strips ───────────────────────────────────────────
+
+def simple_status_html(message_html: str, *, error: bool = False) -> str:
+    cls = "error" if error else "status"
+    return f'<div class="strip {cls}"><div class="strip-body" style="flex:1">{message_html}</div></div>'
+
+
+def strip_text_html(kicker: str, message: str) -> str:
+    """The text half of a bordered strip; pair with a real ``gr.Button`` in the
+    same ``elem_classes=["strip", ...]`` row for the ghost action."""
+    return f'<div class="strip-kicker">{esc(kicker)}</div><div class="strip-body">{esc(message)}</div>'
+
+
+def empty_note_html(message: str) -> str:
+    return f'<div class="empty-note">{esc(message)}</div>'
+
+
+# ── misc ─────────────────────────────────────────────────────────────────
+
+def human_bytes(n: float) -> str:
+    n = float(n)
+    for unit in ("B", "KB", "MB"):
+        if n < 1024 or unit == "MB":
+            return f"{int(n)} {unit}" if unit == "B" else f"{n:.1f} {unit}"
+        n /= 1024
+    return f"{n / 1024:.1f} GB"

biolmnet/ui/styles.py

@@ -0,0 +1,540 @@
+"""CSS for the BioLM-NET Workbench, translating the "Industry" design system
+(``_ds/industry-…/styles.css`` in the design handoff bundle) onto Gradio's
+Blocks DOM. Tokens, spacing and component shapes are taken from the design
+system; selectors are written against Gradio's real markup (native inputs,
+the ``primary``/``secondary`` button variant classes, ``:has()`` on real
+``<label>``/``<input>`` pairs) rather than any custom component.
+"""
+
+CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600&family=Barlow+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
+
+:root {
+  --color-bg: #f2f2f3;
+  --color-surface: #e9e9ea;
+  --color-text: #1d1f20;
+  --color-accent: #5980a6;
+  --color-accent-100: #eef6ff;
+  --color-accent-200: #d6ebff;
+  --color-accent-600: #597ea3;
+  --color-accent-700: #416180;
+  --color-accent-800: #2c455d;
+  --color-accent-900: #1d2d3d;
+  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);
+  --color-row-rule: color-mix(in srgb, #1d1f20 10%, transparent);
+  --color-muted: color-mix(in srgb, #1d1f20 62%, transparent);
+  --color-muted-2: color-mix(in srgb, #1d1f20 52%, transparent);
+  --color-error: oklch(0.52 0.14 27);
+  --color-error-fill: color-mix(in srgb, oklch(0.52 0.14 27) 6%, transparent);
+
+  --font-heading: "Barlow Condensed", system-ui, sans-serif;
+  --font-body: "Barlow", system-ui, sans-serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+
+  --space-1: 3.4px;
+  --space-2: 6.8px;
+  --space-3: 10.2px;
+  --space-4: 13.6px;
+  --space-6: 20.4px;
+  --space-8: 27.2px;
+  --radius-sm: 2px;
+  --radius-md: 4px;
+}
+
+/* ── neutralize Gradio's own theme ────────────────────────────────────────
+   Gradio's Base theme ships its own light AND dark variable sets (the dark
+   ones activated by a `.dark` class Gradio's frontend adds on
+   `prefers-color-scheme: dark` or `?__theme=dark`), and every unstyled
+   component — blocks, panels, tables, checkboxes, the primary button — reads
+   colors from those variables, not from ours. Selector-by-selector overrides
+   below only reach the elements we thought to target; this instead
+   overwrites Gradio's variables directly, for both plain and `.dark`-classed
+   roots, so nothing can fall back to Gradio's blue/dark palette. `!important`
+   is required: CSS custom properties still cascade normally, and Gradio's
+   `.dark` rule is otherwise free to out-order this one depending on where
+   the frontend happens to inject each stylesheet. */
+:root, .dark, :root .dark {
+  --body-background-fill: #f2f2f3 !important;
+  --body-text-color: #1d1f20 !important;
+  --body-text-color-subdued: color-mix(in srgb, #1d1f20 55%, transparent) !important;
+  --background-fill-primary: #f2f2f3 !important;
+  --background-fill-secondary: #e9e9ea !important;
+  --border-color-primary: color-mix(in srgb, #1d1f20 16%, transparent) !important;
+  --border-color-accent: #5980a6 !important;
+  --border-color-accent-subdued: #5980a6 !important;
+  --color-accent: #5980a6 !important;
+  --color-accent-soft: #eef6ff !important;
+  --link-text-color: #416180 !important;
+  --link-text-color-hover: #2c455d !important;
+  --link-text-color-active: #2c455d !important;
+  --link-text-color-visited: #416180 !important;
+
+  --block-background-fill: transparent !important;
+  --block-border-color: color-mix(in srgb, #1d1f20 16%, transparent) !important;
+  --block-label-background-fill: transparent !important;
+  --block-label-border-color: transparent !important;
+  --block-label-text-color: #1d1f20 !important;
+  --block-title-text-color: #1d1f20 !important;
+  --block-info-text-color: color-mix(in srgb, #1d1f20 62%, transparent) !important;
+  --panel-background-fill: transparent !important;
+  --panel-border-color: color-mix(in srgb, #1d1f20 16%, transparent) !important;
+  --code-background-fill: #e9e9ea !important;
+
+  --input-background-fill: #ffffff !important;
+  --input-background-fill-hover: #ffffff !important;
+  --input-background-fill-focus: #ffffff !important;
+  --input-border-color: color-mix(in srgb, #1d1f20 16%, transparent) !important;
+  --input-border-color-hover: #5980a6 !important;
+  --input-border-color-focus: #5980a6 !important;
+  --input-placeholder-color: color-mix(in srgb, #1d1f20 40%, transparent) !important;
+
+  --checkbox-background-color: #ffffff !important;
+  --checkbox-background-color-hover: #ffffff !important;
+  --checkbox-background-color-focus: #ffffff !important;
+  --checkbox-background-color-selected: #5980a6 !important;
+  --checkbox-border-color: color-mix(in srgb, #1d1f20 16%, transparent) !important;
+  --checkbox-border-color-hover: #5980a6 !important;
+  --checkbox-border-color-focus: #5980a6 !important;
+  --checkbox-border-color-selected: #5980a6 !important;
+  --checkbox-border-radius: 2px !important;
+  --checkbox-label-background-fill: transparent !important;
+  --checkbox-label-background-fill-hover: transparent !important;
+  --checkbox-label-background-fill-selected: transparent !important;
+  --checkbox-label-border-color: transparent !important;
+  --checkbox-label-border-color-hover: transparent !important;
+  --checkbox-label-border-color-selected: transparent !important;
+  --checkbox-label-text-color: #1d1f20 !important;
+  --checkbox-label-text-color-selected: #1d1f20 !important;
+
+  --error-background-fill: color-mix(in srgb, oklch(0.52 0.14 27) 6%, transparent) !important;
+  --error-border-color: oklch(0.52 0.14 27) !important;
+  --error-text-color: oklch(0.52 0.14 27) !important;
+  --error-icon-color: oklch(0.52 0.14 27) !important;
+
+  --table-border-color: color-mix(in srgb, #1d1f20 16%, transparent) !important;
+  --table-even-background-fill: transparent !important;
+  --table-odd-background-fill: transparent !important;
+  --table-row-focus: color-mix(in srgb, #5980a6 10%, transparent) !important;
+  --table-text-color: #1d1f20 !important;
+
+  --button-primary-background-fill: #5980a6 !important;
+  --button-primary-background-fill-hover: #597ea3 !important;
+  --button-primary-border-color: #5980a6 !important;
+  --button-primary-border-color-hover: #597ea3 !important;
+  --button-primary-text-color: #f2f2f3 !important;
+  --button-primary-text-color-hover: #f2f2f3 !important;
+  --button-secondary-background-fill: transparent !important;
+  --button-secondary-background-fill-hover: color-mix(in srgb, #1d1f20 7%, transparent) !important;
+  --button-secondary-border-color: color-mix(in srgb, #1d1f20 16%, transparent) !important;
+  --button-secondary-border-color-hover: color-mix(in srgb, #1d1f20 30%, transparent) !important;
+  --button-secondary-text-color: #1d1f20 !important;
+  --button-secondary-text-color-hover: #1d1f20 !important;
+  --button-cancel-background-fill: transparent !important;
+  --button-cancel-background-fill-hover: color-mix(in srgb, #1d1f20 7%, transparent) !important;
+  --button-cancel-border-color: color-mix(in srgb, #1d1f20 16%, transparent) !important;
+  --button-cancel-text-color: #1d1f20 !important;
+
+  --slider-color: #5980a6 !important;
+  --loader-color: #5980a6 !important;
+  --accordion-text-color: #1d1f20 !important;
+  --shadow-drop: none !important;
+  --shadow-drop-lg: none !important;
+}
+
+/* ── base ─────────────────────────────────────────────────────────────── */
+body, .gradio-container {
+  background: var(--color-bg) !important;
+  color: var(--color-text) !important;
+  font-family: var(--font-body) !important;
+}
+.gradio-container {
+  max-width: none !important;
+  min-height: 100vh;
+  padding: 0 !important;
+}
+.gradio-container footer,
+.gradio-container .footer,
+.gradio-container .built-with {
+  display: none !important;
+}
+.gradio-container * { box-sizing: border-box; }
+.gradio-container h1, .gradio-container h2, .gradio-container h3, .gradio-container h4 {
+  font-family: var(--font-heading);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  margin: 0;
+}
+.gradio-container label, .gradio-container .label-wrap span { color: var(--color-text) !important; }
+.gradio-container .info, .gradio-container .prose, .gradio-container p { color: var(--color-muted) !important; }
+.mono {
+  font: 500 10.5px/1.3 var(--font-mono);
+  letter-spacing: .1em;
+  text-transform: uppercase;
+  color: var(--color-muted-2);
+}
+.num { font: 500 12px/1 var(--font-mono); color: var(--color-text); }
+
+/* ── blueprint frame (registration-marked wireframe objects) ────────────── */
+.blueprint { position: relative; border: 1px solid var(--color-divider); }
+.blueprint > .corner { position: absolute; width: 11px; height: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
+.blueprint > .corner::before, .blueprint > .corner::after { content: ""; position: absolute; background: currentColor; }
+.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
+.blueprint > .corner::after { top: 5px; left: 0; width: 100%; height: 1px; }
+.blueprint > .corner.tl { top: -6px; left: -6px; }
+.blueprint > .corner.tr { top: -6px; right: -6px; }
+.blueprint > .corner.bl { bottom: -6px; left: -6px; }
+.blueprint > .corner.br { bottom: -6px; right: -6px; }
+.corner-overlay { position: absolute; inset: 0; pointer-events: none; }
+
+/* ── shell: rail + workspace ─────────────────────────────────────────── */
+.app-shell {
+  align-items: stretch !important;
+  display: flex !important;
+  flex-wrap: nowrap !important;
+  gap: 0 !important;
+  width: 100% !important;
+  min-height: 100vh !important;
+}
+.rail-col {
+  min-width: 236px !important;
+  max-width: 236px !important;
+  width: 236px !important;
+  flex: 0 0 236px !important;
+  align-self: flex-start !important;
+}
+.rail {
+  height: 100vh;
+  min-height: 100vh;
+  padding: 22px 0 18px;
+  border-right: 1px solid var(--color-divider);
+  display: flex;
+  flex-direction: column;
+  position: sticky;
+  top: 0;
+}
+.rail-brand { padding: 0 20px; }
+.rail-brand .name { font: 600 25px/1 var(--font-heading); color: var(--color-text); }
+.rail-kicker { padding: 0 20px 9px; margin-top: 34px; }
+.rail-nav { display: flex; flex-direction: column; }
+.rail-nav > *,
+.rail-row-wrap {
+  flex: 0 0 auto !important;
+}
+.rail-spacer { margin-top: auto; }
+.rail-plate-wrap { padding: 0 20px; }
+.rail-footnote {
+  margin-top: 14px;
+  font: 500 9px/1.6 var(--font-mono);
+  letter-spacing: .06em;
+  color: color-mix(in srgb, var(--color-text) 42%, transparent);
+}
+
+.workspace-col {
+  min-width: 0 !important;
+  max-width: none !important;
+  padding: 0 !important;
+  flex: 1 1 auto !important;
+  width: calc(100% - 236px) !important;
+}
+
+/* rail row (overlay: visible .rr under an invisible full-size button) */
+.rail-row-wrap { position: relative; }
+.rail-row-wrap .rail-row-click {
+  position: absolute !important; inset: 0 !important; z-index: 2;
+  min-height: 0 !important; height: 100% !important; width: 100% !important;
+  padding: 0 !important; margin: 0 !important; border: 0 !important;
+  background: transparent !important; box-shadow: none !important;
+  opacity: 0 !important; cursor: pointer;
+}
+.rail-row-wrap .rail-row-click:disabled { cursor: default; }
+.rr { display: flex; align-items: center; gap: 11px; padding: 9px 20px 9px 17px; border-left: 3px solid transparent; font-size: 13.5px; }
+.rr .rn { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border: 1px solid var(--color-divider); font: 500 10.5px/1 var(--font-mono); }
+.rr .lb { flex: 1; }
+.rr .st { font: 500 9px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted-2); }
+.rr.done .rn { border-color: var(--color-accent); color: var(--color-accent-700); }
+.rr.done .st { color: var(--color-accent-700); }
+.rr.on { border-left-color: var(--color-accent); background: var(--color-accent-100); }
+.rr.on .lb { font-weight: 600; }
+.rr.on .rn { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
+.rr.on .st { color: var(--color-accent-700); }
+.rr.next { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
+.rr.next .rn { border-color: var(--color-accent); color: var(--color-accent-700); }
+.rr.next .st { color: var(--color-accent-700); }
+.rr.off { opacity: .42; }
+
+/* run-state plate */
+.plate { padding: 12px 13px; display: flex; flex-direction: column; gap: 8px; }
+.kv { display: flex; justify-content: space-between; gap: 10px; }
+.kv span:first-child { font: 500 9.5px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted-2); }
+.kv .accent { color: var(--color-accent-700) !important; }
+.kv .error { color: var(--color-error) !important; }
+.kv .muted { color: var(--color-muted) !important; }
+/* plain-text-key kv row (paper-faithful defaults, etc. — no mono kicker) */
+.kv-plain { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--color-row-rule); font-size: 12.5px; }
+.kv-plain.last { border-bottom: none; }
+
+/* ── topbar / page head / action bar ─────────────────────────────────── */
+.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 30px; border-bottom: 1px solid var(--color-divider); }
+.pghd { padding: 26px 30px 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
+.pghd h2 { font-size: 34px; line-height: 1; color: var(--color-text); }
+.pghd .desc { margin-top: 5px; max-width: 640px; color: var(--color-muted); font-size: 13.5px; line-height: 1.5; }
+.pghd .meta-right { text-align: right; font: 500 9.5px/1.7 var(--font-mono); color: var(--color-muted-2); white-space: nowrap; }
+
+.stage-grid { padding: 24px 30px 0 !important; gap: 26px !important; align-items: flex-start !important; }
+.stat-grid { padding: 22px 30px 0 !important; gap: 12px !important; }
+.results-stat-row { padding: 22px 30px 0 !important; }
+.metric-strip {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  width: 100%;
+}
+.results-grid { padding: 26px 30px 0 !important; gap: 26px !important; align-items: flex-start !important; }
+
+.sect { margin: 0 0 9px; padding-bottom: 8px; border-bottom: 1px solid var(--color-text); }
+.sect-spaced { margin-top: 26px !important; }
+
+.actbar-row { margin-top: auto !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; gap: 20px !important; padding: 16px 30px !important; border-top: 1px solid var(--color-divider) !important; background: color-mix(in srgb, var(--color-text) 3%, transparent) !important; }
+.actbar-note { font: 500 10px/1.4 var(--font-mono); color: var(--color-muted-2); }
+.actbar-note.error { color: var(--color-error); }
+.actbar-buttons {
+  align-items: center !important;
+  justify-content: flex-end !important;
+  flex-wrap: nowrap !important;
+  gap: 10px !important;
+  flex: 0 0 auto !important;
+  width: auto !important;
+}
+.actbar-buttons > *,
+.actbar-buttons .form,
+.actbar-buttons .block {
+  flex: 0 0 auto !important;
+  width: auto !important;
+  min-width: 0 !important;
+}
+.actbar-buttons button {
+  width: auto !important;
+  min-height: 36px !important;
+  padding: 0 16px !important;
+  white-space: nowrap !important;
+}
+.actbar-secondary-btn button { min-width: 108px !important; }
+.actbar-primary-btn { position: relative; }
+.actbar-primary-btn button { min-width: 170px !important; }
+.actbar-primary-btn::before,
+.actbar-primary-btn::after {
+  content: "";
+  position: absolute;
+  top: -5px;
+  bottom: -5px;
+  width: 11px;
+  pointer-events: none;
+  border-color: color-mix(in srgb, var(--color-text) 58%, transparent);
+}
+.actbar-primary-btn::before {
+  left: -5px;
+  border-left: 1px solid;
+  border-top: 1px solid;
+  border-bottom: 1px solid;
+}
+.actbar-primary-btn::after {
+  right: -5px;
+  border-right: 1px solid;
+  border-top: 1px solid;
+  border-bottom: 1px solid;
+}
+
+/* ── spec rows ────────────────────────────────────────────────────────── */
+.srow-label { font-size: 12.5px; color: color-mix(in srgb, var(--color-text) 72%, transparent); padding: 10px 0; }
+.srow-label .sub { display: block; font: 500 9px/1.4 var(--font-mono); text-transform: none; letter-spacing: 0; color: var(--color-muted-2); margin-top: 2px; }
+.srow-control { padding: 3px 0 !important; }
+.srow-row { border-top: 1px solid var(--color-row-rule) !important; align-items: center !important; }
+.srow-row.first { border-top: none !important; }
+.srow-row.last { border-bottom: 1px solid var(--color-row-rule) !important; }
+.srow-value-row { justify-content: space-between !important; align-items: center !important; gap: 10px !important; flex-wrap: nowrap !important; }
+.srow-value-row > *:first-child { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; }
+.srow-value-row > *:first-child .num { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
+.srow-value-row > *:last-child { flex: none !important; }
+.section-heading-row { align-items: baseline !important; justify-content: space-between !important; gap: 8px !important; margin-bottom: 11px !important; }
+.field-pair { gap: 14px !important; align-items: flex-start !important; }
+.field-pair > * { max-width: none !important; }
+.field-label {
+  margin-bottom: 6px;
+  color: var(--color-muted);
+  font-size: 12.5px;
+  line-height: 1.2;
+}
+.static-field {
+  min-height: 34px;
+  display: flex;
+  align-items: center;
+  padding: 0 11px;
+  background: #fff;
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-md);
+  font-size: 14px;
+  color: var(--color-text);
+}
+
+/* ── stat / metric plates ─────────────────────────────────────────────── */
+.stat { padding: 13px 14px; }
+.stat .v { font-family: var(--font-heading); font-weight: 600; font-size: 30px; line-height: 1; }
+.stat .k { font: 500 8.5px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted-2); margin-top: 6px; }
+
+/* ── bars, plots, confusion matrix ───────────────────────────────────── */
+.bar { flex: 1; height: 3px; background: color-mix(in srgb, var(--color-text) 15%, transparent); position: relative; }
+.bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--color-accent); }
+.plot-slot { position: relative; background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--color-accent) 13%, transparent) 6px 7px); border: 1px solid var(--color-divider); display: flex; align-items: center; justify-content: center; }
+.plot-slot span { font: 500 9px/1 var(--font-mono); background: var(--color-bg); padding: 3px 6px; text-transform: uppercase; letter-spacing: .1em; color: var(--color-muted-2); }
+.cm { display: grid; grid-template-columns: repeat(var(--cm-n, 4), 1fr); gap: 2px; }
+.cm > div { aspect-ratio: 1.6; display: grid; place-items: center; font: 500 11.5px/1 var(--font-mono); }
+
+/* ── HTML tables (.tbl) ───────────────────────────────────────────────── */
+.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
+.tbl th, .tbl td { border: 0 !important; }
+.tbl th { font: 500 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; text-align: left; color: var(--color-muted-2); padding: 0 10px 6px 0; border-bottom: 1px solid var(--color-divider) !important; background: transparent !important; }
+.tbl td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--color-row-rule) !important; vertical-align: baseline; }
+.tbl td.n { font: 400 12px/1 var(--font-mono); }
+.tbl .accent { color: var(--color-accent-700); }
+.tbl .error { color: var(--color-error); }
+
+/* ── status / error strips ───────────────────────────────────────────── */
+.strip { display: flex; gap: 12px; padding: 12px 14px; align-items: flex-start; }
+.strip.status { border: 1px solid var(--color-divider); }
+.strip.error { border: 1px solid var(--color-error); border-left-width: 3px; background: var(--color-error-fill); }
+.strip .strip-kicker { font: 500 9.5px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
+.strip.error .strip-kicker { color: var(--color-error); }
+.strip .strip-body { margin-top: 4px; font-size: 12.5px; line-height: 1.5; }
+.empty-note { padding: 14px 0; color: var(--color-muted); font-size: 13px; }
+
+/* ── slots (one-line gr.File) ─────────────────────────────────────────── */
+.file-slot .file-preview { border: 1px solid var(--color-divider) !important; border-radius: var(--radius-md); background: #fff; font-size: 12.5px !important; }
+.file-slot .file-preview td, .file-slot .file-preview th { color: var(--color-text) !important; }
+.file-slot.err .file-preview { border-color: var(--color-error) !important; }
+.file-slot:has(.file-preview) label.float,
+.file-slot:has(.file-preview) .icon-wrap,
+.file-slot:has(.file-preview) .wrap:not(.file-preview-holder) { display: none !important; }
+.file-slot .empty.large { min-height: 44px !important; padding: 8px !important; }
+.file-slot .empty.large .icon { width: 20px !important; height: 20px !important; opacity: .5; }
+
+/* ── buttons ──────────────────────────────────────────────────────────── */
+.gradio-container button.primary, .gradio-container button.secondary {
+  border-radius: 0 !important;
+  font-family: var(--font-heading) !important;
+  font-weight: 600 !important;
+  box-shadow: none !important;
+  text-transform: none;
+}
+.gradio-container button.secondary {
+  background: transparent !important;
+  border: 1px solid var(--color-divider) !important;
+  color: var(--color-text) !important;
+}
+.gradio-container button.secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent) !important; }
+.gradio-container button.primary {
+  background: var(--color-accent) !important;
+  border: 1px solid var(--color-accent) !important;
+  color: var(--color-bg) !important;
+}
+.gradio-container button.primary:hover { background: var(--color-accent-600) !important; }
+.gradio-container button.primary:active { background: var(--color-accent-700) !important; }
+.gradio-container button:disabled { opacity: .45 !important; cursor: not-allowed !important; }
+.btn-ghost { min-width: 0 !important; flex: none !important; }
+.btn-ghost button {
+  background: transparent !important; border-color: transparent !important;
+  color: var(--color-accent-700) !important; font-weight: 500 !important;
+  font-family: var(--font-body) !important; box-shadow: none !important;
+  min-width: 0 !important; width: auto !important; padding: 4px 8px !important;
+  white-space: nowrap;
+}
+.btn-ghost button:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent) !important; }
+.btn-block button { width: 100%; }
+.btn-primary-frame { position: relative; }
+
+/* ── segmented control (gr.Radio restyled) ───────────────────────────── */
+.seg-radio { border: 1px solid var(--color-divider); overflow: hidden; }
+.seg-radio label { border: 0 !important; background: transparent !important; margin: 0 !important; padding: 7px 12px !important; font-size: 13px !important; flex: 1; justify-content: center !important; }
+.seg-radio label + label { border-left: 1px solid var(--color-divider) !important; }
+.seg-radio label:has(input:checked) { background: var(--color-accent) !important; color: var(--color-bg) !important; }
+.seg-radio label:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent) !important; }
+.seg-radio input[type="radio"] { display: none !important; }
+
+/* ── native form controls ─────────────────────────────────────────────── */
+.gradio-container input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
+.gradio-container textarea, .gradio-container select {
+  background: #fff !important;
+  color: var(--color-text) !important;
+  border: 1px solid var(--color-divider) !important;
+  border-radius: var(--radius-md) !important;
+  font-size: 14px !important;
+  text-overflow: ellipsis;
+}
+.gradio-container label:has(> input[type="checkbox"]),
+.gradio-container label:has(> span > input[type="checkbox"]) {
+  border: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  padding: 4px 0 !important;
+  min-height: 0 !important;
+}
+.gradio-container .block:has(> label.checkbox-container) {
+  border: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+}
+.gradio-container input[type="checkbox"] {
+  appearance: none; width: 14px; height: 14px; flex: none;
+  border: 1px solid var(--color-divider); background: #fff; position: relative;
+  border-radius: 0;
+}
+.gradio-container input[type="checkbox"]:checked {
+  background: var(--color-accent); border-color: var(--color-accent);
+}
+.gradio-container input[type="checkbox"]:checked::after {
+  content: ""; position: absolute; left: 3px; top: 6px; width: 4px; height: 1.5px;
+  background: #fff; transform: rotate(45deg);
+}
+.gradio-container input[type="checkbox"]:checked::before {
+  content: ""; position: absolute; left: 5px; top: 7px; width: 7px; height: 1.5px;
+  background: #fff; transform: rotate(-50deg);
+}
+.gradio-container input[type="radio"] {
+  appearance: none; width: 15px; height: 15px; flex: none; border-radius: 50%;
+  border: 1.5px solid var(--color-divider); background: #fff;
+}
+.gradio-container input[type="radio"]:checked {
+  border-color: var(--color-accent);
+  background: radial-gradient(circle, var(--color-accent) 0 40%, #fff 42% 100%);
+}
+.gradio-container input[type="range"] { accent-color: var(--color-accent); height: 3px; }
+.gradio-container :focus-visible { outline: 2px solid var(--color-accent) !important; outline-offset: 2px; }
+
+/* dataframes (.tbl-like) */
+.gradio-container table { color: var(--color-text) !important; font-size: 12.5px !important; }
+.gradio-container thead th {
+  font: 500 10px/1 var(--font-mono) !important; letter-spacing: .1em; text-transform: uppercase;
+  color: var(--color-muted-2) !important; background: transparent !important;
+  border-bottom: 1px solid var(--color-divider) !important;
+}
+.gradio-container tbody td { border-bottom: 1px solid var(--color-row-rule) !important; }
+.gradio-container .table-wrap .toolbar-container,
+.gradio-container .table-wrap .cell-menu-button,
+.gradio-container .table-wrap button.cell-menu,
+.gradio-container .table-wrap .icon-button-wrapper { display: none !important; }
+
+/* accordion */
+.gradio-container .label-wrap { color: var(--color-text) !important; }
+
+/* ── responsive ───────────────────────────────────────────────────────── */
+@media (max-width: 1000px) {
+  .app-shell { display: block !important; }
+  .rail-col { min-width: 100% !important; max-width: 100% !important; }
+  .rail { position: relative; min-height: auto; border-right: 0; border-bottom: 1px solid var(--color-divider); }
+  .stage-grid, .results-grid { grid-template-columns: 1fr !important; }
+}
+@media (max-width: 620px) {
+  .pghd h2 { font-size: 26px; }
+  .stat-grid, .metric-strip { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
+}
+"""

e2e-tests/.gitignore

@@ -0,0 +1,3 @@
+target/
+.mvn/apache-maven-*/
+.mvn/apache-maven-*.zip

e2e-tests/.mvn/wrapper/maven-wrapper.properties

@@ -0,0 +1 @@
+distributionUrl=https://archive.apache.org/dist/maven/maven-3/3.9.11/binaries/apache-maven-3.9.11-bin.zip

e2e-tests/mvnw

@@ -0,0 +1,18 @@
+#!/bin/sh
+set -eu
+
+BASE_DIR="$(CDPATH= cd -- "$(dirname -- "$0")" && pwd)"
+MAVEN_VERSION="3.9.11"
+MAVEN_DIR="$BASE_DIR/.mvn/apache-maven-$MAVEN_VERSION"
+MAVEN_ZIP="$BASE_DIR/.mvn/apache-maven-$MAVEN_VERSION-bin.zip"
+MAVEN_URL="https://archive.apache.org/dist/maven/maven-3/$MAVEN_VERSION/binaries/apache-maven-$MAVEN_VERSION-bin.zip"
+
+if [ ! -x "$MAVEN_DIR/bin/mvn" ]; then
+  mkdir -p "$BASE_DIR/.mvn"
+  if [ ! -f "$MAVEN_ZIP" ]; then
+    curl -fsSL "$MAVEN_URL" -o "$MAVEN_ZIP"
+  fi
+  (cd "$BASE_DIR/.mvn" && unzip -q -o "$MAVEN_ZIP")
+fi
+
+exec "$MAVEN_DIR/bin/mvn" "$@"

e2e-tests/pom.xml

@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0"
+         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+
+    <groupId>org.biolmnet</groupId>
+    <artifactId>biolmnet-workbench-e2e</artifactId>
+    <version>0.1.0-SNAPSHOT</version>
+    <packaging>jar</packaging>
+
+    <properties>
+        <maven.compiler.release>17</maven.compiler.release>
+        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
+        <cucumber.version>7.30.0</cucumber.version>
+        <junit.platform.version>1.14.1</junit.platform.version>
+        <selenium.version>4.39.0</selenium.version>
+    </properties>
+
+    <dependencies>
+        <dependency>
+            <groupId>io.cucumber</groupId>
+            <artifactId>cucumber-java</artifactId>
+            <version>${cucumber.version}</version>
+            <scope>test</scope>
+        </dependency>
+        <dependency>
+            <groupId>io.cucumber</groupId>
+            <artifactId>cucumber-junit-platform-engine</artifactId>
+            <version>${cucumber.version}</version>
+            <scope>test</scope>
+        </dependency>
+        <dependency>
+            <groupId>org.junit.platform</groupId>
+            <artifactId>junit-platform-suite</artifactId>
+            <version>${junit.platform.version}</version>
+            <scope>test</scope>
+        </dependency>
+        <dependency>
+            <groupId>org.junit.jupiter</groupId>
+            <artifactId>junit-jupiter-api</artifactId>
+            <version>5.14.1</version>
+            <scope>test</scope>
+        </dependency>
+        <dependency>
+            <groupId>org.seleniumhq.selenium</groupId>
+            <artifactId>selenium-java</artifactId>
+            <version>${selenium.version}</version>
+            <scope>test</scope>
+        </dependency>
+    </dependencies>
+
+    <build>
+        <plugins>
+            <plugin>
+                <groupId>org.apache.maven.plugins</groupId>
+                <artifactId>maven-surefire-plugin</artifactId>
+                <version>3.5.4</version>
+                <configuration>
+                    <includes>
+                        <include>**/*Test.java</include>
+                    </includes>
+                    <systemPropertyVariables>
+                        <cucumber.plugin>pretty, html:target/cucumber-report.html, json:target/cucumber-report.json</cucumber.plugin>
+                        <cucumber.filter.tags>${cucumber.filter.tags}</cucumber.filter.tags>
+                    </systemPropertyVariables>
+                </configuration>
+            </plugin>
+        </plugins>
+    </build>
+</project>

e2e-tests/src/test/java/org/biolmnet/e2e/RunCucumberTest.java

@@ -0,0 +1,19 @@
+package org.biolmnet.e2e;
+
+import static io.cucumber.junit.platform.engine.Constants.GLUE_PROPERTY_NAME;
+import static io.cucumber.junit.platform.engine.Constants.PLUGIN_PROPERTY_NAME;
+
+import org.junit.platform.suite.api.ConfigurationParameter;
+import org.junit.platform.suite.api.IncludeEngines;
+import org.junit.platform.suite.api.SelectClasspathResource;
+import org.junit.platform.suite.api.Suite;
+
+@Suite
+@IncludeEngines("cucumber")
+@SelectClasspathResource("features")
+@ConfigurationParameter(key = GLUE_PROPERTY_NAME, value = "org.biolmnet.e2e")
+@ConfigurationParameter(
+        key = PLUGIN_PROPERTY_NAME,
+        value = "pretty, html:target/cucumber-report.html, json:target/cucumber-report.json")
+public class RunCucumberTest {
+}

e2e-tests/src/test/java/org/biolmnet/e2e/config/TestConfig.java

@@ -0,0 +1,14 @@
+package org.biolmnet.e2e.config;
+
+public final class TestConfig {
+    private TestConfig() {
+    }
+
+    public static String baseUrl() {
+        return System.getProperty("baseUrl", "http://127.0.0.1:7860");
+    }
+
+    public static boolean headless() {
+        return Boolean.parseBoolean(System.getProperty("headless", "false"));
+    }
+}

e2e-tests/src/test/java/org/biolmnet/e2e/driver/DriverFactory.java

@@ -0,0 +1,35 @@
+package org.biolmnet.e2e.driver;
+
+import org.biolmnet.e2e.config.TestConfig;
+import org.openqa.selenium.WebDriver;
+import org.openqa.selenium.chrome.ChromeDriver;
+import org.openqa.selenium.chrome.ChromeOptions;
+
+public final class DriverFactory {
+    private static final ThreadLocal<WebDriver> DRIVER = new ThreadLocal<>();
+
+    private DriverFactory() {
+    }
+
+    public static WebDriver getDriver() {
+        WebDriver driver = DRIVER.get();
+        if (driver == null) {
+            ChromeOptions options = new ChromeOptions();
+            options.addArguments("--window-size=1440,1100");
+            if (TestConfig.headless()) {
+                options.addArguments("--headless=new");
+            }
+            driver = new ChromeDriver(options);
+            DRIVER.set(driver);
+        }
+        return driver;
+    }
+
+    public static void quitDriver() {
+        WebDriver driver = DRIVER.get();
+        if (driver != null) {
+            driver.quit();
+            DRIVER.remove();
+        }
+    }
+}

e2e-tests/src/test/java/org/biolmnet/e2e/pages/BasePage.java

@@ -0,0 +1,23 @@
+package org.biolmnet.e2e.pages;
+
+import java.time.Duration;
+
+import org.openqa.selenium.By;
+import org.openqa.selenium.WebDriver;
+import org.openqa.selenium.WebElement;
+import org.openqa.selenium.support.ui.ExpectedConditions;
+import org.openqa.selenium.support.ui.WebDriverWait;
+
+public class BasePage {
+    protected final WebDriver driver;
+    protected final WebDriverWait wait;
+
+    public BasePage(WebDriver driver) {
+        this.driver = driver;
+        this.wait = new WebDriverWait(driver, Duration.ofSeconds(20));
+    }
+
+    protected WebElement visible(By locator) {
+        return wait.until(ExpectedConditions.visibilityOfElementLocated(locator));
+    }
+}

e2e-tests/src/test/java/org/biolmnet/e2e/pages/WorkbenchPage.java

@@ -0,0 +1,52 @@
+package org.biolmnet.e2e.pages;
+
+import org.openqa.selenium.By;
+import org.openqa.selenium.WebDriver;
+import org.openqa.selenium.WebElement;
+
+public class WorkbenchPage extends BasePage {
+    private static final By APP_HEADER = By.cssSelector("#app-header");
+    private static final By NAV_DATA = By.cssSelector("#nav-data");
+    private static final By NAV_TRAIN = By.cssSelector("#nav-train");
+    private static final By NAV_EXPORT = By.cssSelector("#nav-export");
+    private static final By NAV_PREDICT = By.cssSelector("#nav-predict");
+    private static final By NAV_RESULTS = By.cssSelector("#nav-results");
+    private static final By PAGE_DATA = By.cssSelector("#page-data");
+    private static final By PAGE_TRAIN = By.cssSelector("#page-train");
+    private static final By PAGE_EXPORT = By.cssSelector("#page-export");
+    private static final By PAGE_PREDICT = By.cssSelector("#page-predict");
+    private static final By PAGE_RESULTS = By.cssSelector("#page-results");
+
+    public WorkbenchPage(WebDriver driver) {
+        super(driver);
+    }
+
+    public void open(String baseUrl) {
+        driver.get(baseUrl);
+    }
+
+    public boolean headerIsVisible() {
+        return visible(APP_HEADER).isDisplayed();
+    }
+
+    public boolean sidebarWorkflowIsVisible() {
+        return visible(NAV_DATA).isDisplayed()
+                && visible(NAV_TRAIN).isDisplayed()
+                && visible(NAV_EXPORT).isDisplayed()
+                && visible(NAV_PREDICT).isDisplayed()
+                && visible(NAV_RESULTS).isDisplayed();
+    }
+
+    public boolean onlyDataPageIsVisible() {
+        visible(PAGE_DATA);
+        return isDisplayed(PAGE_DATA)
+                && !isDisplayed(PAGE_TRAIN)
+                && !isDisplayed(PAGE_EXPORT)
+                && !isDisplayed(PAGE_PREDICT)
+                && !isDisplayed(PAGE_RESULTS);
+    }
+
+    private boolean isDisplayed(By locator) {
+        return driver.findElements(locator).stream().anyMatch(WebElement::isDisplayed);
+    }
+}

e2e-tests/src/test/java/org/biolmnet/e2e/steps/ApplicationLaunchSteps.java

@@ -0,0 +1,39 @@
+package org.biolmnet.e2e.steps;
+
+import static org.junit.jupiter.api.Assertions.assertTrue;
+
+import io.cucumber.java.en.Given;
+import io.cucumber.java.en.Then;
+import io.cucumber.java.en.When;
+import org.biolmnet.e2e.config.TestConfig;
+import org.biolmnet.e2e.driver.DriverFactory;
+import org.biolmnet.e2e.pages.WorkbenchPage;
+
+public class ApplicationLaunchSteps {
+    private WorkbenchPage workbenchPage;
+
+    @Given("the BioLM-NET Workbench app is running")
+    public void theWorkbenchAppIsRunning() {
+        workbenchPage = new WorkbenchPage(DriverFactory.getDriver());
+    }
+
+    @When("I open the BioLM-NET Workbench")
+    public void iOpenTheWorkbench() {
+        workbenchPage.open(TestConfig.baseUrl());
+    }
+
+    @Then("the application header is visible")
+    public void theApplicationHeaderIsVisible() {
+        assertTrue(workbenchPage.headerIsVisible(), "Expected the BioLM-NET Workbench header to be visible.");
+    }
+
+    @Then("the workflow sidebar is visible")
+    public void theWorkflowSidebarIsVisible() {
+        assertTrue(workbenchPage.sidebarWorkflowIsVisible(), "Expected all workflow navigation buttons to be visible.");
+    }
+
+    @Then("only the Data & Priors workspace is visible")
+    public void onlyTheDataAndPriorsWorkspaceIsVisible() {
+        assertTrue(workbenchPage.onlyDataPageIsVisible(), "Expected only the Data & Priors workspace to be visible.");
+    }
+}

e2e-tests/src/test/java/org/biolmnet/e2e/support/Hooks.java

@@ -0,0 +1,27 @@
+package org.biolmnet.e2e.support;
+
+import io.cucumber.java.After;
+import io.cucumber.java.Scenario;
+import java.io.IOException;
+import java.nio.file.Files;
+import java.nio.file.Path;
+import org.biolmnet.e2e.driver.DriverFactory;
+import org.openqa.selenium.OutputType;
+import org.openqa.selenium.TakesScreenshot;
+import org.openqa.selenium.WebDriver;
+
+public class Hooks {
+    @After
+    public void afterScenario(Scenario scenario) throws IOException {
+        WebDriver driver = DriverFactory.getDriver();
+        if (scenario.isFailed() && driver instanceof TakesScreenshot screenshotDriver) {
+            Path screenshotDir = Path.of("target", "screenshots");
+            Files.createDirectories(screenshotDir);
+            byte[] screenshot = screenshotDriver.getScreenshotAs(OutputType.BYTES);
+            Path screenshotPath = screenshotDir.resolve(scenario.getName().replaceAll("[^A-Za-z0-9]+", "-") + ".png");
+            Files.write(screenshotPath, screenshot);
+            scenario.attach(screenshot, "image/png", screenshotPath.toString());
+        }
+        DriverFactory.quitDriver();
+    }
+}

e2e-tests/src/test/resources/features/application_launch.feature

@@ -0,0 +1,15 @@
+@smoke
+Feature: Application launch
+
+  @E2E-001
+  Scenario: Workbench launches
+    Given the BioLM-NET Workbench app is running
+    When I open the BioLM-NET Workbench
+    Then the application header is visible
+    And the workflow sidebar is visible
+
+  @E2E-002
+  Scenario: Data and Priors workspace is visible by default
+    Given the BioLM-NET Workbench app is running
+    When I open the BioLM-NET Workbench
+    Then only the Data & Priors workspace is visible