feat(#471): a per-tile Open in Workbench action, replacing the Dashboard Query button

[BorisTyshkevich]

What & why

Closes #471.

The Dashboard toolbar's < Query button named no document. It was ordinary
back-navigation occupying primary toolbar space, and after using it the user still
had to find the tile's query in the Workbench themselves. Every query-backed tile
now carries its own Open in Workbench action instead, in its own chrome, in both
View and Edit mode and in both layout engines.

Identity needed no new model, and that is the main finding of this change. #471
asks for tab identity by "stable document origin, such as dashboardId + dashboardQueryId", and #464 sketches a QueryTabOrigin union. Neither is required:
#427 already made every panel tile reference a dedicated saved-query copy that
exactly one member owns, and a tile's queryId is explicitly not patchable
(DashboardTilePatch: "tile identity is stable"). loadIntoNewTab has always
deduplicated on savedId, and commitSavedQuery resolves its write target by id —
so re-opening selects the existing tab, two Dashboards holding same-named
copies open two tabs, and Save targets the Dashboard copy, not a same-named
Library query, all hold by construction. Adding a parallel origin field would have
been the second source of truth #427 refused. #464 is left owning the visible
half only (collision badges, origin tooltips) — reconciled in a comment there and in
roadmap #68.

The action is deliberately not !readOnly-gated like the grip and delete beside
it: inspecting the query behind a tile is a View-mode act first. It is subtle until
hover/focus, always visible on touch, and joins wireTileDrag's existing exclusion
list so pressing it can never start a move. A queryless text panel or an
unresolvable queryId renders no action — not a disabled one, and never one
pointing at another tile's document.

Two consequences worth reviewing closely

• A Grid-Tiles KPI tile's head is a pointer-transparent overlay whose reveal
  rules were scoped :not(.is-view) — correct while every control in it was
  edit-only. It now reveals in View mode and the action opts back into pointer
  events. The ::before hover outline stays edit-only (it advertises drag/resize).
• The mobile bottom nav returns to the Dashboard surface (owner decision on this
  issue, reversing part of Add dashboard selection state and a full-size dashboard work surface #425). Add a Databases/Dashboards switcher and dashboard hierarchy tree #426 had restored the < Query button precisely
  because the mobile rules hide the sidebar and the nav for a full-bleed
  Dashboard — and a per-tile action cannot rescue a Dashboard with no tiles.
  Only Editor shows (the other two panel values still say nothing about a
  Dashboard), it switches surface before selecting the panel, and it is not painted
  as the active tab. Full-bleed was a width claim; a bottom bar shortens the
  Dashboard without overlapping it (asserted).

Two bugs only a real browser could catch

Both are recorded in the ADR addendum because they are the kind of thing that gets
reintroduced:

1. Positioning the action against a flow KPI band member put the button in the
   Dashboard toolbar. .dash-kpi-member is display: contents, so it has no box at
   all — which is also why the drag code derives its rect from its children. It is now
   anchored INSIDE the member's first card, the reach-through .is-nav-target > * and
   .dash-drop-target > * already use for that host, so the drag geometry and the
   band's responsive sizing are both untouched.
2. @media (hover: none) — the only thing making the action usable on a phone,
   where it is also the primary route into a tile's query — was evaluated by no test,
   because a 360px desktop viewport still reports hover: hover. Now covered under
   real mobile emulation.

Tests

• tests/unit/dashboard.test.ts — a new #471 block: present in both modes and both
  engines, exact queryId per tile (two same-named copies → two ids), omitted for a
  text panel and for a dangling id, aria/title/<button> semantics, the drag guard
  against the real button, the grid KPI overlay head in both modes, and the flow-KPI
  boundary. The three back-button tests are re-fixtured to assert absence, including
  the Add a Databases/Dashboards switcher and dashboard hierarchy tree #426 regression guard, which is restated rather than deleted: it now asserts
  the route moved (per-tile action + bottom nav) instead of vanishing.
• tests/unit/app.test.ts — the bottom-nav Editor entry on the Dashboard surface
  switches surface, and on the Query surface still only switches panels.
• tests/e2e/tile-open-workbench.{html,spec.js} — new, mounts the whole app like
  variable-tab.html: hover/focus reveal, Enter activation, the KPI overlay in View
  mode, pointer-events, a modifier-drag from the action moving nothing, two
  same-named copies → two tabs → reopen selects, the text tile, the phone nav, and
  the touch case, the KPI overlay by keyboard, an Edit-mode KPI tile's action
  GEOMETRY, and Save writing the Dashboard's copy while its same-named sibling stays
  untouched. 12 specs, run on chromium + webkit (269 e2e passing in total).
• tests/e2e/dashboard-mobile.spec.js — the #425 nav assertion re-fixtured to the
  new contract, plus a new assertion that the nav shortens rather than overlaps the
  Dashboard.

Found by the review pass (all fixed here)

Three defects, two of which no unit test could have seen:

1. A press on the action was swallowed after a drag that released away from its
   card. onUp arms the post-drag click suppression on every completed move, but
   only a release back over the origin card fires the click that consumes it — its
   own comment called the cross-tile case "harmless". The guard reading the flag is a
   capture-phase listener on the card, an ancestor of every action button, so the
   next press was eaten. The delete button had the same latent bug. Sabotage-checked.
2. An Edit-mode KPI tile put the action mid-head. Its heading is display: none
   and no grip is built, so the head held two flex items both declaring
   margin-left: auto — which splits free space rather than pinning both right.
3. On touch, in Edit mode, a KPI tile's action was invisible. Every reveal rule
   for that overlay is :hover/:focus-within plus :not(.is-view); a phone
   satisfies none, and ancestor opacity composites. The hover: none override also
   had to move next to the KPI block — the base rule has identical specificity, so
   source order alone decides, and the first placement lost silently.

Also from the review: "Save updates the Dashboard copy, not a same-named Library
query" is now asserted directly end to end rather than resting on the identity
argument; the KPI overlay gained a keyboard test; DashboardApp.showQuerySurface is
gone (unused since the back button); and DESIGN.md no longer describes a toolbar
control that does not exist.

Known and tracked, not fixed here

• Flow layout's KPI band members have no delete, grip, resize or title chrome #475 — rescoped, and no longer an acceptance gap: flow KPI band members now
  carry the action. What remains there is the band's other missing chrome — no
  delete, grip, resize or title. A destructive control deserves a deliberate
  placement rather than "wherever the first card has room".
• A whitespace-only tile title survives into accessible names #476 (inbox) — a whitespace-only tile.title survives into accessible names.
  Unreachable through shipped UI today; reachable the moment a rename-tile affordance
  ships. Fixing it changes title semantics for every consumer, so it wants its own
  change.
• openSavedQuery switches surfaces before resolving the id, and stays silent when it fails #443 — openSavedQuery switches surface before resolving the id. Reachable
  from this caller only inside the async window of a cross-tab delete, and the symptom
  is a surface switch with no new tab, not an empty Workbench.

Second review round (owner findings, all fixed here)

Three more, filed against the first push:

1. P1 — Back returned the wrong Dashboard, at the top. openSavedQuery switches
   to the Workbench, which disposes the Dashboard surface; the URL carries no Dashboard
   id by design (Add dashboard selection state and a full-size dashboard work surface #425), and with the session saying "query" adoptRouteMainSurface fell
   back to the COMPATIBILITY Dashboard. Open B in a workspace holding A and B, scroll,
   open a tile's query, press Back → A, at the top. Tolerable while a global < Query
   button existed; a broken requirement once this PR removes it and leans on history.

   Each Dashboard history entry now carries {workspaceKey, dashboardId, currentMember, scrollTop} in history.state — per-entry, so multiple Back steps
   across multiple Dashboards each restore their own; invisible, so shareable URLs and
   Add dashboard selection state and a full-size dashboard work surface #425's URL contract both stand; validated through reconcileMainSurface, so a
   deleted Dashboard lands on Query rather than retargeting, and a foreign
   workspaceKey is rejected (ids are unique per workspace, not globally). The offset
   is a one-shot pendingScrollTop beside pendingFocus, re-applied after each publish
   until it sticks — a single post-mount write clamps to 0, because tiles (and
   grafana-grid's px heights) only arrive with the first publish.

2. P1 — flow KPI tiles now have the action (see above); Flow layout's KPI band members have no delete, grip, resize or title chrome #475 rescoped.

3. P2 — keyboard activation could still be swallowed. Clearing the post-drag click
   suppression on the next pointerdown missed Enter/Space, which dispatches a click
   with no pointer event. The arming now disarms itself on a zero-delay timer: the
   synthesized click shares the release's input task and is still swallowed, anything
   later is not. (A timestamp window was tried and rejected — a fast Tab+Enter falls
   inside any window wide enough to be safe.)

Each is sabotage-verified. Reverting the history stamp reproduces the report exactly —
Expected "sales", Received "ops" — and reverting the timer fails the keyboard test
alone.

Checklist

• npm test passes (the per-file coverage gate is non-negotiable) — 5631 tests; pretest covers check:schemas, check:arch, check:types
• Tests added/updated in the same change as the code
• npm run build succeeds (single-file dist/sql.html)
• Layers kept honest: pure logic in src/core/, network in src/net/ (injected fetch), DOM in src/ui/ — the queryless decision reuses the shared core/panel-cfg.ts predicate; the new DashboardApp member is the existing App['openSavedQuery'] seam
• No new runtime dependency
• README / CHANGELOG.md ([Unreleased]) updated if behavior or the deployed surface changed — CHANGELOG done; the deployed surface (deploy/http_handlers.xml) is unchanged
• Reconciled affected tracked work — ADR-0003 addendum (Replace the Dashboard-level Query button with per-tile “Open in Workbench” actions #471), CHANGELOG, roadmap Roadmap to 1.0.0 #68 (Replace the Dashboard-level Query button with per-tile “Open in Workbench” actions #471 added, Disambiguate duplicate query names in editor tabs by stable origin #464 narrowed, Remove the variable drawer and edit option SQL in a dedicated main-editor tab #457 flipped to merged), a scoping comment on Disambiguate duplicate query names in editor tabs by stable origin #464, and Flow layout's KPI band members have no delete, grip, resize or title chrome #475 filed

🤖 Generated with Claude Code

https://claude.ai/code/session_018mujm1kW7jDGpTEfscndcU