Fix Solve-page Plotly crash and tighten metric-tile layout

* Replace #RRGGBBAA hex8 colour literals with hex_to_rgba() helper.
  Plotly's validator rejects 8-digit hex, so the live dynamics and
  diversity plots crashed on every run with
  "Invalid value ... for the 'fillcolor' property of scatter".
* Split the six metric tiles into two rows of three, use short labels
  (best / mean / sigma (replicas) / bg / elapsed), tighten label
  letter-spacing, and pin metric value font-size so nothing gets
  truncated on the hosted Streamlit viewport.
* Add tests/test_gui_apptest.py::test_solve_page_end_to_end_run - a
  real Run-button click with tiny sliders so any future Plotly
  validator or Streamlit deprecation regression fails in CI instead
  of in the user's browser.
* Add project URLs (Repository / Documentation / Issues / Changelog /
  Live Demo) to pyproject.toml for PyPI metadata polish.

Local CI parity:
  uv run ruff check src tests scripts app  -> clean
  uv run ruff format --check src tests scripts app  -> clean
  uv run pytest -q  -> 52 passed, 1 skipped

Author: Yuma-Ichikawa

app/_common.py

@@ -101,6 +101,25 @@ def palette(theme: str | None = None) -> dict:
     return _LIGHT_PALETTE if theme == "light" else _DARK_PALETTE
 
 
+def hex_to_rgba(color: str, alpha: float) -> str:
+    """Convert a ``#RRGGBB`` hex string into a Plotly-safe ``rgba(...)`` string.
+
+    Plotly's property validator rejects the 8-digit ``#RRGGBBAA`` form, so we
+    emit the functional ``rgba()`` notation instead (``alpha`` is a float in
+    ``[0, 1]``). Non-hex inputs are returned unchanged so callers can safely
+    pass already-resolved strings.
+    """
+    if not isinstance(color, str) or not color.startswith("#"):
+        return color
+    h = color.lstrip("#")
+    if len(h) == 8:  # already hex8 → drop alpha and use caller's alpha instead
+        h = h[:6]
+    if len(h) != 6:
+        return color
+    r, g, b = int(h[0:2], 16), int(h[2:4], 16), int(h[4:6], 16)
+    return f"rgba({r},{g},{b},{alpha:.3f})"
+
+
 def plotly_layout(theme: str | None = None, **overrides) -> dict:
     """Plotly layout kwargs consistent with the active theme.
 
@@ -197,13 +216,16 @@ def apply_theme() -> None:
         div[data-testid="stMetric"] label {{
             color: var(--qqa-muted) !important;
             font-weight: 500;
-            font-size: 0.72rem;
+            font-size: 0.7rem;
             text-transform: uppercase;
-            letter-spacing: 0.08em;
+            letter-spacing: 0.04em;
+            white-space: nowrap;
+            overflow: visible;
         }}
         div[data-testid="stMetric"] [data-testid="stMetricValue"] {{
             font-family: 'Source Serif 4', Georgia, serif;
             font-weight: 700;
+            font-size: 1.35rem;
             color: var(--qqa-text) !important;
         }}
         .stButton > button {{
@@ -355,12 +377,15 @@ def apply_theme() -> None:
         }}
         div[data-testid="stMetric"] label {{
             color: var(--qqa-muted) !important;
-            font-size: 0.72rem;
-            letter-spacing: 0.08em;
+            font-size: 0.7rem;
+            letter-spacing: 0.04em;
             text-transform: uppercase;
+            white-space: nowrap;
+            overflow: visible;
         }}
         div[data-testid="stMetric"] [data-testid="stMetricValue"] {{
             font-family: 'Source Serif 4', serif;
+            font-size: 1.35rem;
             color: #f8fafc !important;
         }}
         .stButton > button {{

app/pages/1_Solve.py

@@ -15,6 +15,7 @@
     apply_theme,
     build_problem,
     get_theme,
+    hex_to_rgba,
     palette,
     plotly_layout,
     render_score_card,
@@ -94,13 +95,14 @@ def on_epoch_end(self, state: CallbackState) -> None:
         self.progress_bar.progress(min(1.0, (epoch + 1) / total))
         elapsed = time.time() - self._start
         with self.metrics_holder.container():
-            c1, c2, c3, c4, c5, c6 = st.columns(6)
-            c1.metric("epoch", f"{epoch + 1} / {total}")
-            c2.metric("best / replica", f"{self.best[-1]:.4f}")
-            c3.metric("mean / replica", f"{self.mean_loss[-1]:.4f}")
-            c4.metric("σ across replicas", f"{self.std_loss[-1]:.4f}")
-            c5.metric("bg", f"{state.bg:.3f}")
-            c6.metric("elapsed", f"{elapsed:.1f}s")
+            r1c1, r1c2, r1c3 = st.columns(3)
+            r1c1.metric("epoch", f"{epoch + 1} / {total}")
+            r1c2.metric("best", f"{self.best[-1]:.4g}")
+            r1c3.metric("mean", f"{self.mean_loss[-1]:.4g}")
+            r2c1, r2c2, r2c3 = st.columns(3)
+            r2c1.metric("σ (replicas)", f"{self.std_loss[-1]:.4g}")
+            r2c2.metric("bg", f"{state.bg:.3f}")
+            r2c3.metric("elapsed", f"{elapsed:.1f}s")
 
         p = palette()
         theme = get_theme()
@@ -114,7 +116,7 @@ def on_epoch_end(self, state: CallbackState) -> None:
                 x=self.epochs + self.epochs[::-1],
                 y=np.concatenate([mean_arr + std_arr, (mean_arr - std_arr)[::-1]]).tolist(),
                 fill="toself",
-                fillcolor=p["palette"][0] + ("22" if theme == "light" else "33"),
+                fillcolor=hex_to_rgba(p["palette"][0], 0.13 if theme == "light" else 0.20),
                 line={"color": "rgba(0,0,0,0)"},
                 hoverinfo="skip",
                 showlegend=False,
@@ -205,7 +207,7 @@ def on_epoch_end(self, state: CallbackState) -> None:
                 mode="lines",
                 fill="tozeroy",
                 line={"color": p["palette"][2], "width": 2},
-                fillcolor=p["palette"][2] + ("33" if theme == "light" else "55"),
+                fillcolor=hex_to_rgba(p["palette"][2], 0.20 if theme == "light" else 0.33),
                 name="loss σ",
             )
         )

pyproject.toml

@@ -74,7 +74,12 @@ qqa = "qqa.cli:main"
 
 [project.urls]
 Homepage = "https://github.com/Yuma-Ichikawa/QQA4CO"
+Repository = "https://github.com/Yuma-Ichikawa/QQA4CO"
+Documentation = "https://yuma-ichikawa.github.io/QQA4CO/"
+Issues = "https://github.com/Yuma-Ichikawa/QQA4CO/issues"
+Changelog = "https://github.com/Yuma-Ichikawa/QQA4CO/blob/main/CHANGELOG.md"
 Paper = "https://openreview.net/forum?id=9EfBeXaXf0"
+"Live Demo" = "https://parallelquasiquantum4co.streamlit.app/"
 
 [tool.hatch.build.targets.wheel]
 packages = ["src/qqa"]

tests/test_gui_apptest.py

@@ -93,3 +93,47 @@ def test_visualize_page_handles_missing_run():
     assert not at.exception
     warnings = [w.body for w in at.warning]
     assert any("Solve page" in w for w in warnings)
+
+
+def _set_slider(at, label_fragment: str, value) -> None:
+    """Set the slider whose label contains ``label_fragment`` to ``value``."""
+    matches = [s for s in at.sidebar.slider if label_fragment in s.label]
+    assert matches, f"No slider whose label contains {label_fragment!r}"
+    matches[0].set_value(value)
+
+
+def test_solve_page_end_to_end_run():
+    """Full Solve flow: wire up a tiny problem and click Run.
+
+    Exercises the live-callback path (Plotly fillcolor validation, metric
+    tiles, population heatmap, diversity curve, and the final score card).
+    A previous regression fed Plotly an 8-hex colour ('#RRGGBBAA') and only
+    surfaced at runtime; this test pins the contract.
+    """
+    at = AppTest.from_file(str(PAGE_DIR / "1_Solve.py"), default_timeout=90)
+    at.session_state["problem_config"] = {
+        "kind": "ising1d",
+        "size": 8,
+        "seed": 0,
+        "device": "cpu",
+        "extra": {},
+    }
+    at.run()
+    assert not at.exception, at.exception
+
+    # Shrink every slider so the test runs in a few seconds.
+    _set_slider(at, "sol_size", 4)
+    _set_slider(at, "epochs", 100)
+    _set_slider(at, "UI update every", 10)
+    at.run()
+    assert not at.exception, at.exception
+
+    runs = [b for b in at.button if "Run" in b.label]
+    assert runs, "Run QQA button missing"
+    runs[0].click()
+    at.run()
+
+    assert not at.exception, at.exception
+    # Success is observable as either the score card or the raw-loss caption.
+    texts = " ".join([m.value for m in at.markdown if m.value])
+    assert "qqa-score" in texts or "energy" in texts.lower() or "raw loss" in texts