Add diagram sharing/collaborators, version history, and view-only lockdown

Per organized-ideas.md §8. Backend tables/RLS (diagrams, diagram_collaborators,
diagram_snapshots) already existed from an earlier phase — this is the
frontend for them, plus two small backend additions.

Backend (supabase/migrations/20260913000000_diagram_sharing.sql):
- find_user_id_by_username(text): lets any authenticated user resolve a
  username to an id for "share with @username" — unlike general profile
  browsing (blocked by profiles_select_self_or_super_admin), a username is
  meant to be a shareable handle, so this is deliberately not gated.
- diagram_collaborator_usernames / diagram_snapshot_saved_by_usernames:
  same pattern as the admin-review-queue phase's submitter-username
  lookup — batched per diagram, gated to "can you see this diagram at all"
  (reusing diagrams_select's own helper functions).
- prune_diagram_snapshots trigger: keeps the 50 most recent snapshots per
  diagram, enforced at write time rather than a scheduled job (diagram_
  snapshots has no update/delete policy for regular users at all).
- 14 new pgTAP tests (52/52 total).

Frontend:
- DiagramCollaboratorRepository/store + DiagramSharingModal: add/remove
  collaborators by username, per-person view/edit permission, owner-only
  controls.
- DiagramSnapshotRepository/store + VersionHistoryModal (its own top-bar
  button, not nested under Share — moved there after review): periodic
  checkpoints (one per 5 min of active editing) written as a side effect
  of normal saves, list + restore.
- Restore's duplicate-snapshot problem: repeatedly jumping between old
  versions without editing in between was writing a near-duplicate safety
  snapshot on every jump. Fixed by having projectStore track which
  snapshot the diagram was last restored from and its updatedAt at that
  moment (touch() always advances updatedAt on a genuine edit) — a restore
  skips the safety snapshot when nothing has changed since the last one,
  and the tracking clears on any real edit so in-progress work stays
  protected.
- DiagramRepository gains getAccess() (owner id + your own permission for
  the open diagram) — surfaced in projectStore as `access`.
- View-only enforcement: FlowCanvas disables drag/connect/drop
  (nodesDraggable/nodesConnectable + guarded handlers), DeviceInspector/
  ConnectionInspector wrap their controls in a disabled <fieldset>,
  DevicePalette disables adding devices to the canvas, TopBar disables the
  rename field, and a ViewOnlyBanner makes the restriction visible instead
  of leaving a collaborator to discover it as controls that just don't
  work. Autosave itself also refuses to write for a view-only user, as a
  backstop behind the UI-level lockdown.

Verified: tsc -b and oxlint clean; supabase db reset + 52/52 pgTAP tests
pass; confirmed find_user_id_by_username works through the real REST API
via a live curl call (signup, confirm, resolve). Manually tested two-
account sharing (view vs. edit), restoring history, and the duplicate-
snapshot fix.

src/components/sharing/VersionHistoryModal.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useState } from 'react'
+import { useDiagramSnapshotStore } from '../../state/diagramSnapshotStore'
+import { useProjectStore } from '../../state/projectStore'
+import Modal from '../common/Modal'
+
+function formatDateTime(iso: string): string {
+  return new Date(iso).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' })
+}
+
+export default function VersionHistoryModal({ onClose }: { onClose: () => void }) {
+  const project = useProjectStore((s) => s.project)
+  const access = useProjectStore((s) => s.access)
+  const canRestore = access?.myPermission === 'owner' || access?.myPermission === 'edit'
+  const diagramId = project.id
+
+  const snapshots = useDiagramSnapshotStore((s) => s.snapshots)
+  const isLoaded = useDiagramSnapshotStore((s) => s.isLoaded)
+  const load = useDiagramSnapshotStore((s) => s.load)
+  const restore = useDiagramSnapshotStore((s) => s.restore)
+  const [restoringId, setRestoringId] = useState<string | null>(null)
+
+  useEffect(() => {
+    load(diagramId)
+  }, [diagramId, load])
+
+  const handleRestore = async (snapshotId: string, createdAt: string) => {
+    const confirmed = window.confirm(
+      `Restore the diagram to how it was on ${formatDateTime(createdAt)}? If you've made changes since your last restore, the current state is saved as a new checkpoint first, so this can be undone.`,
+    )
+    if (!confirmed) return
+    setRestoringId(snapshotId)
+    try {
+      await restore(diagramId, snapshotId)
+    } finally {
+      setRestoringId(null)
+    }
+  }
+
+  return (
+    <Modal title={`Version History — "${project.name}"`} onClose={onClose} width="max-w-md">
+      <div className="space-y-1.5">
+        <p className="text-[11px] text-slate-500">
+          Checkpoints saved periodically while editing (up to the 50 most recent).
+        </p>
+        {!isLoaded && <p className="py-2 text-center text-xs italic text-slate-400">Loading…</p>}
+        {isLoaded && snapshots.length === 0 && (
+          <p className="py-2 text-center text-xs italic text-slate-400">No checkpoints yet.</p>
+        )}
+        {snapshots.map((s) => (
+          <div key={s.id} className="flex items-center justify-between gap-2 rounded border border-slate-200 bg-white px-2 py-1.5 text-xs">
+            <div className="min-w-0">
+              <div className="font-medium text-slate-700">{formatDateTime(s.createdAt)}</div>
+              {s.savedByUsername && <div className="text-[10px] text-slate-400">by {s.savedByUsername}</div>}
+            </div>
+            {canRestore && (
+              <button
+                onClick={() => handleRestore(s.id, s.createdAt)}
+                disabled={restoringId === s.id}
+                className="shrink-0 rounded bg-slate-100 px-2 py-1 text-[11px] font-medium text-slate-600 hover:bg-indigo-100 hover:text-indigo-700 disabled:cursor-not-allowed disabled:opacity-40"
+              >
+                Restore
+              </button>
+            )}
+          </div>
+        ))}
+      </div>
+      <div className="mt-4 flex justify-end border-t border-slate-100 pt-3">
+        <button onClick={onClose} className="rounded px-3 py-1.5 text-xs text-slate-600 hover:bg-slate-100">
+          Close
+        </button>
+      </div>
+    </Modal>
+  )
+}