fix(ops): P2 batch — tooltip rollout, Stages display, WCAG hit target, Telemetry filter (#367)

Four P2 items from the 2026-05-14 QA punch list, shipped as one
batch since they're all small UX/data corrections to existing
pages.

## P2-1 — Roll the fast CSS tooltip system out to remaining pages

The Specs page had fast 100ms tooltips via [data-tooltip] +
::after pseudo-element; other pages used native title= with
browser-controlled delays (Safari ~1.5s — feels broken). Convert
four sites that were still on title=:
  - base.html running-badge (data-tooltip + data-tooltip-position=bottom)
  - base.html env-value project-root chip (ditto)
  - workflows.html scope-na n/a label
  - runner.js Recent-strip chip scope hover

Added a new [data-tooltip-position="bottom"] CSS variant so
topbar elements render their tooltip below the element instead
of above (default position would clip off-screen).

Each conversion preserves aria-label for screen readers since
data-tooltip is visual-only. Native <option> title attributes
left as-is — CSS tooltips can't escape the native dropdown.

## P2-4 — "Stages 0" → em-dash with tooltip

Meta-orchestration workflows don't expose a stages array;
rendering them as "0" implies zero stages rather than
"unknown/not-applicable". Template now shows "—" with a
tooltip explaining the difference.

## P2-6 — WCAG 2.5.5 AA click target on Specs pills

.status-pill-editable::before pseudo-element overlays a 24x24px
click area around the visual pill. Pseudo-element sits behind
the visible content (z-index: -1) so it doesn't intercept hover
for the tooltip. Visual size unchanged — only the hit area grew.

## P2-8 — Filter test/stub workflows from Telemetry top-list

read_telemetry_summary now cross-references the canonical
list_workflows() registry; entries not in the registry
(historical test fixtures, removed workflows) drop from the
top-20 cost sort. Defensive fallback: if registry introspection
fails, show everything rather than hide all data.

Real-world impact: clears entries like "test-tier-fallback"
and "new-sample-workflow1" (visible in the rules sync logs)
from the Telemetry page's "top spenders" rollup.

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>

Author: silversurfer562

src/attune/ops/data.py

@@ -414,11 +414,33 @@ def read_telemetry_summary(config: Config, *, recent_days: int = 7) -> Telemetry
     except OSError:
         return TelemetrySummary(0, 0.0, 0.0, [], [], None)
 
-    by_workflow = sorted(
-        ((k, by_workflow_count[k], round(by_workflow_cost[k], 4)) for k in by_workflow_count),
-        key=lambda row: row[2],
-        reverse=True,
-    )[:20]
+    # Filter test fixtures, demo stubs, and removed workflows from the
+    # top-list. The telemetry file accumulates entries from every
+    # workflow that ever ran, so old test fixtures (e.g. those listed
+    # in .claude/rules/attune/bug-patterns.md sync logs:
+    # "test-tier-fallback", "new-sample-workflow1") pollute the top
+    # spenders rollup and distort the "where did my money go?" signal.
+    # The current registry is the source of truth — anything not in it
+    # is either a removed workflow or a stub from local development.
+    # (P2-8 in the 2026-05-14 QA punch list.)
+    try:
+        canonical_names = {w.name for w in list_workflows()}
+    except Exception:  # noqa: BLE001
+        # INTENTIONAL: if the registry introspection fails, fall back
+        # to showing everything rather than hiding all data.
+        canonical_names = None
+
+    def _is_canonical(name: str) -> bool:
+        if canonical_names is None:
+            return True
+        return name in canonical_names
+
+    filtered = [
+        (k, by_workflow_count[k], round(by_workflow_cost[k], 4))
+        for k in by_workflow_count
+        if _is_canonical(k)
+    ]
+    by_workflow = sorted(filtered, key=lambda row: row[2], reverse=True)[:20]
 
     today = date.today()
     cutoff = today.toordinal() - recent_days

src/attune/ops/static/css/main.css

@@ -733,6 +733,23 @@ a.kpi:hover {
   border-color: var(--accent);
   outline: none;
 }
+/* WCAG 2.5.5 AA target size — the visible pill is intentionally
+   compact (~18-22px tall) but the click target needs ≥24×24px. The
+   pseudo-element expands the hit area around the pill without
+   changing its visual size. ``z-index: -1`` keeps it behind the
+   visible content so it doesn't intercept hover for the ::after
+   tooltip; ``inset: -3px`` adds 3px of click area on each side
+   (≈ 24px tall total at default font, padding-bounded above 24px
+   wide for codes like "drf"). */
+.status-pill-editable::before {
+  content: "";
+  position: absolute;
+  inset: -3px;
+  min-width: 24px;
+  min-height: 24px;
+  border-radius: 99px;
+  z-index: -1;
+}
 .status-pill.flash-ok {
   outline: 2px solid var(--ok);
   outline-offset: 1px;
@@ -799,6 +816,13 @@ a.kpi:hover {
   opacity: 1;
   visibility: visible;
 }
+/* Flip tooltip below the element. Use for items in the sticky
+   topbar where the default above-the-element position would
+   render outside the viewport. */
+[data-tooltip][data-tooltip-position="bottom"]::after {
+  bottom: auto;
+  top: calc(100% + 6px);
+}
 /* Suppress the tooltip while the pill is in edit mode (the inline
    <select> takes over — a competing tooltip would be confusing). */
 .status-pill[data-editing="1"]::after {

src/attune/ops/static/js/runner.js

@@ -519,7 +519,10 @@
       idTxt.textContent = String(run.id).slice(0, 8);
       a.appendChild(idTxt);
       if (run.path) {
-        a.title = "scope: " + run.path;
+        // Fast CSS tooltip (matches the system used on Specs and
+        // the topbar — P2-1 rollout).
+        a.setAttribute("data-tooltip", "scope: " + run.path);
+        a.setAttribute("aria-label", "scope: " + run.path);
       }
       a.appendChild(document.createTextNode(" "));
       var statusTxt = document.createElement("span");

src/attune/ops/templates/base.html

@@ -19,15 +19,24 @@
         {% endfor %}
       </nav>
       {% if current_run %}
-        <a class="running-badge" href="/runs/{{ current_run.id }}/view" title="A workflow is running — click to view its output">
+        {# data-tooltip + data-tooltip-position=bottom: fast CSS tooltip
+           positioned below the topbar so it doesn't render above the
+           viewport. aria-label keeps the cue accessible to screen readers. #}
+        <a class="running-badge" href="/runs/{{ current_run.id }}/view"
+           data-tooltip="A workflow is running — click to view its output"
+           data-tooltip-position="bottom"
+           aria-label="A workflow is running — click to view its output">
           <span class="running-dot" aria-hidden="true"></span>
           <span class="running-label">running</span>
           <code class="running-workflow">{{ current_run.workflow }}</code>
         </a>
       {% endif %}
       <div class="env">
         <span class="env-label">project</span>
-        <code class="env-value" title="{{ project_root }}">{{ project_root.split('/')[-1] }}</code>
+        <code class="env-value"
+              data-tooltip="{{ project_root }}"
+              data-tooltip-position="bottom"
+              aria-label="Project root: {{ project_root }}">{{ project_root.split('/')[-1] }}</code>
       </div>
     </header>
     <main class="main">{% block content %}{% endblock %}</main>

src/attune/ops/templates/workflows.html

@@ -37,7 +37,20 @@ <h1>Workflows</h1>
         <tr data-workflow="{{ w.name }}"
             data-scope-default="{{ default_scopes[w.name] if allow_run and supports_path[w.name] else '' }}">
           <td><code>{{ w.name }}</code></td>
-          <td class="num">{{ w.stages }}</td>
+          {# Stages=0 means the workflow doesn't expose a stages array
+             (typical for meta-orchestration workflows that compose
+             other workflows rather than declaring an explicit pipeline).
+             Render '—' with a tooltip so users don't read it as
+             "this workflow has zero stages" (P2-4 in the QA punch list). #}
+          <td class="num">
+            {% if w.stages > 0 %}
+              {{ w.stages }}
+            {% else %}
+              <span class="muted"
+                    data-tooltip="Workflow doesn't expose a stages array. Meta-orchestration workflows compose other workflows rather than declaring an explicit pipeline."
+                    aria-label="Stages not declared">—</span>
+            {% endif %}
+          </td>
           <td>
             {% for stage, tier in w.tier_map.items() %}
               <span class="chip chip-{{ tier|lower }}">{{ stage }}: {{ tier }}</span>
@@ -68,7 +81,9 @@ <h1>Workflows</h1>
                        placeholder="e.g. src/attune/security/"
                        aria-label="Custom scope path for {{ w.name }}">
               {% else %}
-                <span class="scope-na" title="This workflow doesn't accept a path argument">n/a</span>
+                <span class="scope-na"
+                      data-tooltip="This workflow doesn't accept a path argument"
+                      aria-label="This workflow doesn't accept a path argument">n/a</span>
               {% endif %}
             </td>
             <td class="num">