feat: add drag-to-rearrange and resize handles to dashboard widgets

Edit mode now supports:
- Drag handle (grip icon, top-left) to rearrange widgets via HTML5 DnD
  (drops swap widget positions, persists via API)
- Resize handle (corner icon, bottom-right) with mousedown→mousemove→mouseup
  tracking to change widget width/height in grid units, persists via API
- Cursor feedback: grab cursor on draggable widgets, se-resize on handle
- Visual feedback: dragging widget shows 50% opacity

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

web/src/app/dashboards/[id]/page.tsx

@@ -1,20 +1,21 @@
 "use client";
 
-import { useState, useEffect, use, useCallback } from "react";
+import { useState, useEffect, use, useCallback, useRef } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
 import {
+  GripIcon,
   PencilIcon,
   PlusIcon,
   Trash2Icon,
   RefreshCwIcon,
-  GaugeIcon,
   LayoutGridIcon,
 } from "lucide-react";
 import {
   getDashboard,
   createWidget,
   deleteWidget,
+  updateWidget,
   getWidgetData,
   getViews,
   getTeams,
@@ -156,6 +157,95 @@ export default function DashboardPage({ params }: { params: Promise<{ id: string
     setWidgets((prev) => prev.filter((w) => w.id !== widgetId));
   };
 
+  const gridRef = useRef<HTMLDivElement>(null);
+  const [resizingId, setResizingId] = useState<string | null>(null);
+  const [draggingId, setDraggingId] = useState<string | null>(null);
+
+  // Resize: track mousedown → mousemove → mouseup
+  const handleResizeStart = (e: React.MouseEvent, widgetId: string) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setResizingId(widgetId);
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const widget = widgets.find((w) => w.id === widgetId);
+    if (!widget || !gridRef.current) return;
+
+    const startW = widget.position.w;
+    const startH = widget.position.h;
+    const gridWidth = gridRef.current.offsetWidth;
+    const unitSize = gridWidth / 12;
+
+    const onMove = (ev: MouseEvent) => {
+      const dx = Math.round((ev.clientX - startX) / unitSize);
+      const dy = Math.round((ev.clientY - startY) / unitSize);
+      const newW = Math.max(1, Math.min(12, startW + dx));
+      const newH = Math.max(1, startH + dy);
+      setWidgets((prev) =>
+        prev.map((w) =>
+          w.id === widgetId
+            ? { ...w, position: { ...w.position, w: newW, h: newH } }
+            : w
+        )
+      );
+    };
+
+    const onUp = async () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+      setResizingId(null);
+      const updated = widgets.find((w) => w.id === widgetId);
+      if (updated) {
+        await updateWidget(id, widgetId, { position: updated.position });
+      }
+    };
+
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  };
+
+  // Drag: HTML5 DnD
+  const handleDragStart = (e: React.DragEvent, widgetId: string) => {
+    setDraggingId(widgetId);
+    e.dataTransfer.setData("text/plain", widgetId);
+    e.dataTransfer.effectAllowed = "move";
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+  };
+
+  const handleDrop = async (e: React.DragEvent, targetId: string) => {
+    e.preventDefault();
+    const sourceId = e.dataTransfer.getData("text/plain");
+    if (!sourceId || sourceId === targetId) { setDraggingId(null); return; }
+
+    const source = widgets.find((w) => w.id === sourceId);
+    const target = widgets.find((w) => w.id === targetId);
+    if (!source || !target) { setDraggingId(null); return; }
+
+    // Swap positions
+    const sourcePos = { ...source.position };
+    const targetPos = { ...target.position };
+
+    setWidgets((prev) =>
+      prev.map((w) => {
+        if (w.id === sourceId) return { ...w, position: targetPos };
+        if (w.id === targetId) return { ...w, position: sourcePos };
+        return w;
+      })
+    );
+
+    await updateWidget(id, sourceId, { position: targetPos });
+    await updateWidget(id, targetId, { position: sourcePos });
+    setDraggingId(null);
+  };
+
+  const handleDragEnd = () => {
+    setDraggingId(null);
+  };
+
   const renderWidget = (widget: DashboardWidget & { data?: WidgetData }) => {
     if (!widget.data) {
       return (
@@ -288,23 +378,55 @@ export default function DashboardPage({ params }: { params: Promise<{ id: string
             )}
           </div>
         ) : (
-          <div className="grid auto-rows-[minmax(100px,auto)] grid-cols-6 gap-3 md:grid-cols-12 md:gap-4">
+          <div
+            ref={gridRef}
+            className="grid auto-rows-[minmax(100px,auto)] grid-cols-6 gap-3 md:grid-cols-12 md:gap-4"
+          >
             {widgets.map((widget) => (
               <div
                 key={widget.id}
-                className="group relative"
+                className={cn(
+                  "group relative",
+                  editMode && "cursor-grab",
+                  draggingId === widget.id && "opacity-50",
+                  resizingId === widget.id && "select-none",
+                )}
                 style={widgetGridStyle(widget.position)}
+                draggable={editMode}
+                onDragStart={(e) => editMode && handleDragStart(e, widget.id)}
+                onDragOver={handleDragOver}
+                onDrop={(e) => handleDrop(e, widget.id)}
+                onDragEnd={handleDragEnd}
               >
+                {/* Drag handle */}
+                {editMode && (
+                  <div className="absolute left-2 top-2 z-10 hidden h-6 w-6 cursor-grab items-center justify-center rounded bg-background/80 text-muted-foreground group-hover:flex">
+                    <GripIcon className="h-3.5 w-3.5" />
+                  </div>
+                )}
                 {renderWidget(widget)}
                 {editMode && (
-                  <button
+                  <>
-                    type="button"
+                    <button
-                    onClick={() => handleDeleteWidget(widget.id)}
+                      type="button"
-                    className="absolute right-2 top-2 hidden h-6 w-6 items-center justify-center rounded bg-destructive/90 text-destructive-foreground transition-opacity hover:bg-destructive group-hover:flex"
+                      onClick={() => handleDeleteWidget(widget.id)}
-                    title="Remove widget"
+                      className="absolute right-2 top-2 z-10 hidden h-6 w-6 items-center justify-center rounded bg-destructive/90 text-destructive-foreground transition-opacity hover:bg-destructive group-hover:flex"
-                  >
+                      title="Remove widget"
-                    <Trash2Icon className="h-3.5 w-3.5" />
+                    >
-                  </button>
+                      <Trash2Icon className="h-3.5 w-3.5" />
+                    </button>
+                    {/* Resize handle */}
+                    <div
+                      className="absolute bottom-0 right-0 z-10 hidden h-5 w-5 cursor-se-resize items-center justify-center group-hover:flex"
+                      onMouseDown={(e) => handleResizeStart(e, widget.id)}
+                    >
+                      <svg width="10" height="10" viewBox="0 0 10 10" className="text-muted-foreground">
+                        <path d="M0 10 L10 0" stroke="currentColor" strokeWidth="1.5" />
+                        <path d="M5 10 L10 5" stroke="currentColor" strokeWidth="1.5" />
+                        <path d="M0 10 L10 10" stroke="transparent" />
+                      </svg>
+                    </div>
+                  </>
                 )}
               </div>
             ))}

web/src/lib/api.ts

@@ -331,6 +331,15 @@ export async function createWidget(dashboardId: string, data: {
   return request<DashboardWidget>(`/dashboards/${dashboardId}/widgets`, { method: "POST", body: JSON.stringify(data) });
 }
 
+export async function updateWidget(dashboardId: string, widgetId: string, data: {
+  title?: string;
+  widget_type?: string;
+  position?: { x: number; y: number; w: number; h: number };
+  config?: Record<string, unknown>;
+}): Promise<{ data: DashboardWidget | null; error: string | null }> {
+  return request<DashboardWidget>(`/dashboards/${dashboardId}/widgets/${widgetId}`, { method: "PATCH", body: JSON.stringify(data) });
+}
+
 export async function deleteWidget(dashboardId: string, widgetId: string): Promise<{ data: { ok: boolean } | null; error: string | null }> {
   return request<{ ok: boolean }>(`/dashboards/${dashboardId}/widgets/${widgetId}`, { method: "DELETE" });
 }