feat(dashboard): phase B drag-resize grid (Gridstack) replacing masonry

Milestone 72 phase B — Grafana-style drag-resize grid for dashboard widgets:
- DashboardWidget: replace `position` with a 12-col grid placement
  (grid_x/grid_y/grid_w/grid_h). Migration 0021 backfills the old position
  order into a 3-up grid (4 cols x 4 cells each) and drops position.
- View + share render a static CSS grid from x/y/w/h: fixed cell height
  (h * 70px) with the body scrolling, so the arranged layout is what's shown;
  collapses to a single column under 820px.
- Edit view: Gridstack.js 12.6.0 (vanilla, CDN, pinned) — drag the title bar
  to move, drag a corner/edge to resize; every change autosaves to a new
  /d/<id>/edit/layout endpoint. Replaces the SortableJS position reorder.
- add_widget appends at the bottom-left; remove no longer renumbers.
  _get_widgets now orders by grid position (drives DOM + mobile fallback order).

Note: Gridstack drag-resize is browser-only, so CI can't exercise it — needs an
operator visual check of the edit experience.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

steward/dashboard/routes.py

@@ -38,19 +38,16 @@ def _can_edit(dash: Dashboard, user_id: str, user_role: str) -> bool:
 # ── DB helpers ────────────────────────────────────────────────────────────────
 
 async def _get_widgets(db, dashboard_id: int) -> list[DashboardWidget]:
+    # Reading order = grid order (top-to-bottom, then left-to-right). This drives
+    # DOM order, which is what the responsive single-column fallback collapses to.
     result = await db.execute(
         select(DashboardWidget)
         .where(DashboardWidget.dashboard_id == dashboard_id)
-        .order_by(DashboardWidget.position)
+        .order_by(DashboardWidget.grid_y, DashboardWidget.grid_x, DashboardWidget.id)
     )
     return list(result.scalars())
 
 
-async def _normalise_positions(db, dashboard_id: int) -> None:
-    for i, w in enumerate(await _get_widgets(db, dashboard_id)):
-        w.position = i
-
-
 async def _accessible_dashboards(db, user_id: str, user_role: str) -> list[Dashboard]:
     """All dashboards visible to this user, ordered by id."""
     result = await db.execute(select(Dashboard).order_by(Dashboard.id))
@@ -97,9 +94,11 @@ async def _get_or_create_system_default(db) -> Dashboard:
         db.add(dash)
         await db.flush()
         plugins_cfg = current_app.config.get("PLUGINS", {})
+        # Seed a 3-up grid (each widget 4 cols wide x 4 cells tall on the 12-col grid).
         for pos, w in enumerate(get_available_widgets(plugins_cfg)):
             db.add(DashboardWidget(
-                dashboard_id=dash.id, widget_key=w["key"], position=pos,
+                dashboard_id=dash.id, widget_key=w["key"],
+                grid_x=(pos % 3) * 4, grid_y=(pos // 3) * 4, grid_w=4, grid_h=4,
             ))
     return dash
 
@@ -408,10 +407,12 @@ async def add_widget(dash_id: int, widget_key: str):
             dash   = result.scalar_one_or_none()
             if dash is None or not _can_edit(dash, user_id, user_role):
                 abort(403)
-            widgets  = await _get_widgets(db, dash_id)
-            next_pos = max((w.position for w in widgets), default=-1) + 1
+            widgets = await _get_widgets(db, dash_id)
+            # Append below everything at full-left; the user then drags/resizes.
+            next_y = max((w.grid_y + w.grid_h for w in widgets), default=0)
             db.add(DashboardWidget(
-                dashboard_id=dash_id, widget_key=widget_key, position=next_pos,
+                dashboard_id=dash_id, widget_key=widget_key,
+                grid_x=0, grid_y=next_y, grid_w=4, grid_h=4,
                 title=title, config_json=config_json,
             ))
     return await _panels_response(dash_id)
@@ -434,30 +435,39 @@ async def remove_widget(dash_id: int, widget_id: int):
             widget = result.scalar_one_or_none()
             if widget and widget.dashboard_id == dash_id:
                 await db.delete(widget)
-                await _normalise_positions(db, dash_id)
     return await _panels_response(dash_id)
 
 
-@dashboard_bp.post("/d/<int:dash_id>/edit/reorder")
+@dashboard_bp.post("/d/<int:dash_id>/edit/layout")
 @require_role(UserRole.viewer)
-async def reorder_widgets(dash_id: int):
+async def save_layout(dash_id: int):
+    """Persist the drag-resize grid (Gridstack) — one {id,x,y,w,h} per widget."""
     user_id   = current_user_id()
     user_role = session.get("user_role", "viewer")
     data = await request.get_json(silent=True)
-    if not data or not isinstance(data.get("order"), list):
+    if not data or not isinstance(data.get("items"), list):
         abort(400)
-    order: list[int] = data["order"]
     async with current_app.db_sessionmaker() as db:
         async with db.begin():
             result = await db.execute(select(Dashboard).where(Dashboard.id == dash_id))
             dash   = result.scalar_one_or_none()
             if dash is None or not _can_edit(dash, user_id, user_role):
                 abort(403)
-            widgets = await _get_widgets(db, dash_id)
-            widget_map = {w.id: w for w in widgets}
-            for pos, wid in enumerate(order):
-                if wid in widget_map:
-                    widget_map[wid].position = pos
+            widget_map = {w.id: w for w in await _get_widgets(db, dash_id)}
+            for it in data["items"]:
+                if not isinstance(it, dict):
+                    continue
+                w = widget_map.get(it.get("id"))
+                if w is None:
+                    continue
+                try:
+                    # Clamp to the 12-col grid; widths can't exceed it.
+                    w.grid_x = max(0, min(11, int(it["x"])))
+                    w.grid_w = max(1, min(12, int(it["w"])))
+                    w.grid_y = max(0, int(it["y"]))
+                    w.grid_h = max(1, int(it["h"]))
+                except (KeyError, TypeError, ValueError):
+                    continue
     return ("", 204)