Build core domain: orgs, users, jobs, locate points, auth, live map

Replaces the device-events demo with the actual product:

- Prisma + PostGIS data layer (postgis/postgis:17-3.5). Lat/lng decimals
  are the source of truth; a generated geometry(Point,4326) column with
  a GIST index backs bbox queries. Migrations apply on container boot.
- JWT auth (bcryptjs + httpOnly cookie) with public registration that
  creates an org; per-org roles (ORG_ADMIN/MEMBER/VIEWER) enforced by
  guards on all /orgs/:orgId routes.
- Scoped API keys (X-API-Key, sha256-hashed, shown once) for
  programmatic access, manageable by org admins.
- REST API: jobs/tickets CRUD with filters, points query (time range,
  recordedAt cursor, bbox), members, devices, api-keys.
- MQTT ingest: devices publish to devices/{username}/points and /jobs;
  unknown tickets auto-create stub jobs (source=DEVICE); every message
  is raw-logged to device_events; acks on devices/{username}/jobs/ack.
  Broker gets a dedicated backend user; testuser is now a plain device.
- Realtime: plain-WS gateway at /api/ws (socket.io removed) with
  cookie auth and per-job channels feeding the map live.
- Next.js frontend: login/register, jobs list with filters, job detail
  with live Google map (APWA utility colors, polylines per run) behind
  a provider-neutral JobMap abstraction for a future Esri swap, and
  settings pages for members/devices/api-keys.
- Seed: Umagul org, admin user, testuser device, demo job with RTK
  points. Sample publisher updated to the new topic contract.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

web/pages/jobs/[jobId].tsx

@@ -0,0 +1,115 @@
+import { useRouter } from 'next/router';
+import { useCallback, useEffect, useState } from 'react';
+import Layout from '../../components/Layout';
+import JobMap from '../../components/map/JobMap';
+import type { MapPoint } from '../../components/map/types';
+import { api } from '../../lib/api';
+import { useRequireAuth } from '../../lib/auth-context';
+import { useJobStream } from '../../lib/use-job-stream';
+
+interface JobDetail {
+  id: string;
+  ticketNumber: string;
+  title: string;
+  description: string | null;
+  address: string | null;
+  status: string;
+  source: string;
+  dueAt: string | null;
+  createdAt: string;
+  assignedTo: { id: string; name: string; email: string } | null;
+  _count: { points: number };
+}
+
+const STATUSES = ['OPEN', 'IN_PROGRESS', 'COMPLETED', 'CANCELLED'];
+
+export default function JobDetailPage() {
+  const { user, activeOrg, loading } = useRequireAuth();
+  const router = useRouter();
+  const jobId = typeof router.query.jobId === 'string' ? router.query.jobId : null;
+  const orgId = activeOrg?.org.id ?? null;
+
+  const [job, setJob] = useState<JobDetail | null>(null);
+  const [points, setPoints] = useState<MapPoint[]>([]);
+  const [live, setLive] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!orgId || !jobId) {
+      return;
+    }
+    api
+      .get<JobDetail>(`/api/orgs/${orgId}/jobs/${jobId}`)
+      .then(setJob)
+      .catch((err) => setError(err.message));
+    api
+      .get<{ points: MapPoint[] }>(`/api/orgs/${orgId}/jobs/${jobId}/points`)
+      .then((res) => setPoints(res.points))
+      .catch((err) => setError(err.message));
+  }, [orgId, jobId]);
+
+  const onLivePoints = useCallback((incoming: MapPoint[]) => {
+    setPoints((prev) => {
+      const seen = new Set(prev.map((p) => p.id));
+      const fresh = incoming.filter((p) => !seen.has(p.id));
+      return fresh.length > 0 ? [...prev, ...fresh] : prev;
+    });
+    setLive((n) => n + incoming.length);
+  }, []);
+
+  useJobStream(jobId, onLivePoints);
+
+  const updateStatus = async (status: string) => {
+    if (!orgId || !jobId) {
+      return;
+    }
+    try {
+      setJob(await api.patch<JobDetail>(`/api/orgs/${orgId}/jobs/${jobId}`, { status }));
+    } catch (err: any) {
+      setError(err.message);
+    }
+  };
+
+  if (loading || !user) {
+    return null;
+  }
+
+  return (
+    <Layout title={job ? job.ticketNumber : 'Job'}>
+      {error && <p style={{ color: '#c62828' }}>{error}</p>}
+      {job && (
+        <>
+          <div style={{ display: 'flex', alignItems: 'baseline', gap: '1rem', flexWrap: 'wrap' }}>
+            <h1 style={{ margin: 0 }}>{job.ticketNumber}</h1>
+            <span style={{ fontSize: '1.1rem' }}>{job.title}</span>
+            <select value={job.status} onChange={(e) => updateStatus(e.target.value)} style={{ marginLeft: 'auto' }}>
+              {STATUSES.map((s) => (
+                <option key={s} value={s}>
+                  {s}
+                </option>
+              ))}
+            </select>
+          </div>
+          <p style={{ color: '#666' }}>
+            {job.address && <>{job.address} · </>}
+            source {job.source} · created {new Date(job.createdAt).toLocaleString()}
+            {job.assignedTo && <> · assigned to {job.assignedTo.name}</>}
+            {job.dueAt && <> · locate by {new Date(job.dueAt).toLocaleString()}</>}
+          </p>
+          {job.description && <p>{job.description}</p>}
+
+          <div style={{ margin: '1rem 0', display: 'flex', gap: '1rem', color: '#555' }}>
+            <span>
+              <strong>{points.length}</strong> points
+            </span>
+            <span style={{ color: live > 0 ? '#388e3c' : '#999' }}>
+              ● live{live > 0 ? ` (+${live} this session)` : ''}
+            </span>
+          </div>
+
+          <JobMap points={points} heightPx={520} />
+        </>
+      )}
+    </Layout>
+  );
+}