u

Author: danielehrhardt

.github/workflows/ci.yml

@@ -44,7 +44,7 @@ jobs:
         run: pnpm lint
 
       - name: Test
-        run: pnpm test --passWithNoTests
+        run: pnpm test
 
       - name: Restore Next.js build cache
         uses: actions/cache@v6

docs/configuration.md

@@ -27,10 +27,10 @@ On Coolify, `DOMAIN` falls back to the domain assigned to the `app` service. See
 
 - **Secure cookies.** The session cookie's `Secure` flag follows the public URL from `DOMAIN` / `APP_URL`. The URL is `https://` unless the domain is `localhost` or `127.0.0.1`. Serve the instance over HTTPS so browsers send the cookie.
 - **Client IP.** Rate limits, the audit log and the device list use the client IP, which comes from the proxy's headers:
-  1. `X-Real-IP`, if the proxy sets it
-  2. otherwise the **right-most** `X-Forwarded-For` entry, which is the hop appended by your proxy. Left-most entries are client-controlled and ignored.
+  1. the **right-most** `X-Forwarded-For` entry, which is the hop appended by your proxy. Left-most entries are client-controlled and ignored.
+  2. `X-Real-IP`, only when there is no `X-Forwarded-For` header at all.
 
-  This assumes a **single trusted reverse proxy** directly in front of Dispatch (Traefik on Coolify, the bundled Caddy, or your nginx). With a second proxy or CDN in front, e.g. Cloudflare → Traefik, configure the inner proxy to set `X-Real-IP` to the real client address. Otherwise all requests appear to come from the CDN. Never publish port 3000 to the internet without a proxy, because clients could then send these headers themselves.
+  This assumes a **single trusted reverse proxy** directly in front of Dispatch (Traefik on Coolify, the bundled Caddy, or your nginx); all of them append the connecting address to `X-Forwarded-For` by default. With a CDN in front (e.g. Cloudflare → Traefik), the right-most hop is the CDN's edge address, so per-IP rate limits apply per edge location; configure your inner proxy to *replace* `X-Forwarded-For` with the real client address (e.g. Cloudflare's `CF-Connecting-IP`) if you need exact client IPs. Never publish port 3000 to the internet without a proxy, because clients could then send these headers themselves.
 
 ### `DISPATCH_VERSION` (compose only, optional)
 

docs/social-preview.png

@@ -4,7 +4,6 @@ import { requireSuperAdminPage } from "@/server/authz"
 import { getAuditFilterOptions, isIsoDate, isUuid, listAuditEvents, type AuditEvent } from "@/server/admin/audit"
 import { AdminPageHeader, EmptyState, formatNumber } from "@/components/admin/ui"
 import { Pager } from "@/components/admin/client"
-import { formatDateTime, timeAgo } from "@/components/admin/format"
 import { AuditFilters } from "@/components/admin/audit/audit-filters"
 import { AuditTable, type AuditRowView } from "@/components/admin/audit/audit-table"
 
@@ -69,8 +68,6 @@ export default async function AdminAuditPage({ searchParams }: PageProps<"/admin
   const rows: AuditRowView[] = events.rows.map((e) => ({
     id: e.id,
     iso: e.createdAt.toISOString(),
-    time: formatDateTime(e.createdAt),
-    ago: timeAgo(e.createdAt),
     orgId: e.orgId,
     orgName: e.orgName,
     actorId: e.actorId,

src/app/admin/audit/page.tsx

@@ -23,7 +23,7 @@ import {
   Th,
   formatNumber,
 } from "@/components/admin/ui"
-import { formatDateTime, isoOrUndefined, timeAgo } from "@/components/admin/format"
+import { LocalTime } from "@/components/app/local-time"
 import { FailedJobsList, RecheckButton, RetryAllButton, type FailedJobView } from "@/components/admin/system/system-client"
 import { cn } from "@/lib/utils"
 
@@ -47,7 +47,7 @@ const PROVIDER_LABEL: Record<string, string> = {
   demo: "Demo",
 }
 
-function JobCounter({ label, value, hint, tone }: { label: string; value: number; hint?: string; tone?: "warn" | "error" }) {
+function JobCounter({ label, value, hint, tone }: { label: string; value: number; hint?: React.ReactNode; tone?: "warn" | "error" }) {
   return (
     <div className="rounded-md border border-border bg-surface/50 px-3 py-2.5">
       <MicroLabel>{label}</MicroLabel>
@@ -84,9 +84,8 @@ export default async function AdminSystemPage() {
     maxAttempts: j.maxAttempts,
     lastError: j.lastError,
     payloadJson: JSON.stringify(j.payload, null, 2),
-    created: formatDateTime(j.createdAt),
-    createdAgo: timeAgo(j.createdAt),
-    runAgo: timeAgo(j.runAt),
+    createdAt: j.createdAt.toISOString(),
+    runAt: j.runAt.toISOString(),
   }))
 
   return (
@@ -142,21 +141,25 @@ export default async function AdminSystemPage() {
                   {
                     label: "Last heartbeat",
                     value: worker.heartbeatAt ? (
-                      <time dateTime={isoOrUndefined(worker.heartbeatAt)} title={formatDateTime(worker.heartbeatAt)}>
-                        {timeAgo(worker.heartbeatAt)}
-                      </time>
+                      <LocalTime date={worker.heartbeatAt} format="relative" titleFormat="datetime" />
                     ) : (
                       "—"
                     ),
                   },
                   {
                     label: "Uptime",
                     value:
-                      worker.online && worker.startedAt && worker.uptimeSeconds !== null
-                        ? `${formatDuration(worker.uptimeSeconds)} · since ${formatDateTime(worker.startedAt)}`
-                        : worker.startedAt
-                          ? `Last started ${formatDateTime(worker.startedAt)}`
-                          : "—",
+                      worker.online && worker.startedAt && worker.uptimeSeconds !== null ? (
+                        <>
+                          {formatDuration(worker.uptimeSeconds)} · since <LocalTime date={worker.startedAt} />
+                        </>
+                      ) : worker.startedAt ? (
+                        <>
+                          Last started <LocalTime date={worker.startedAt} />
+                        </>
+                      ) : (
+                        "—"
+                      ),
                   },
                   {
                     label: "Version",
@@ -223,7 +226,11 @@ export default async function AdminSystemPage() {
               jobs.retrying
                 ? `${formatNumber(jobs.retrying)} retrying`
                 : jobs.oldestPendingAt
-                  ? `oldest ${timeAgo(jobs.oldestPendingAt)}`
+                  ? (
+                      <>
+                        oldest <LocalTime date={jobs.oldestPendingAt} format="relative" />
+                      </>
+                    )
                   : "Queue is clear"
             }
           />
@@ -303,7 +310,9 @@ export default async function AdminSystemPage() {
                     <Link href={`/admin/workspaces/${a.orgId}`} className="underline underline-offset-2">
                       {a.orgName}
                     </Link>
-                    <span>Last synced {a.lastSyncedAt ? timeAgo(a.lastSyncedAt) : "never"}</span>
+                    <span>
+                      Last synced <LocalTime date={a.lastSyncedAt} format="relative" fallback="never" />
+                    </span>
                   </div>
                 </li>
               ))}
@@ -343,9 +352,7 @@ export default async function AdminSystemPage() {
                     </Td>
                     <Td className="text-[13px] whitespace-nowrap text-muted-foreground">
                       {a.lastSyncedAt ? (
-                        <time dateTime={isoOrUndefined(a.lastSyncedAt)} title={formatDateTime(a.lastSyncedAt)}>
-                          {timeAgo(a.lastSyncedAt)}
-                        </time>
+                        <LocalTime date={a.lastSyncedAt} format="relative" titleFormat="datetime" />
                       ) : (
                         "Never"
                       )}

src/app/admin/system/page.tsx

@@ -8,7 +8,7 @@ import { getUserDetail } from "@/server/admin/users"
 import { UserAvatar } from "@/components/app/user-avatar"
 import { AdminPageHeader, EmptyState, KeyValueList, MicroLabel, Panel, StatusBadge } from "@/components/admin/ui"
 import { PostButton } from "@/components/admin/client"
-import { formatDateTime, timeAgo } from "@/components/admin/format"
+import { LocalTime } from "@/components/app/local-time"
 import {
   AccountStatusControl,
   DeleteUserControl,
@@ -65,8 +65,8 @@ export default async function AdminUserDetailPage({ params, searchParams }: Page
     id: s.id,
     deviceLabel: s.deviceLabel || "Unknown device",
     ip: s.ip,
-    created: timeAgo(s.createdAt),
-    lastUsed: timeAgo(s.lastUsedAt),
+    createdAt: s.createdAt.toISOString(),
+    lastUsedAt: s.lastUsedAt.toISOString(),
     impersonation: Boolean(s.impersonatorId),
     current: s.id === mySession.id,
     mobile: s.userAgent ? ["mobile", "tablet"].includes(new UAParser(s.userAgent).getResult().device.type ?? "") : false,
@@ -90,7 +90,8 @@ export default async function AdminUserDetailPage({ params, searchParams }: Page
             )}
             <StatusBadge tone={user.status === "active" ? "ok" : "error"}>{user.status === "active" ? "Active" : "Disabled"}</StatusBadge>
             <span className="text-muted-foreground">
-              · joined {timeAgo(user.createdAt)} · last seen {timeAgo(user.lastSeenAt, "never")}
+              · joined <LocalTime date={user.createdAt} format="relative" titleFormat="datetime" /> · last seen{" "}
+              <LocalTime date={user.lastSeenAt} format="relative" titleFormat="datetime" fallback="never" />
             </span>
           </span>
         }
@@ -121,9 +122,18 @@ export default async function AdminUserDetailPage({ params, searchParams }: Page
                 { label: "Email", value: user.email },
                 { label: "Name", value: user.name || <span className="text-muted-foreground">Not set</span> },
                 { label: "Time zone", value: user.timezone || <span className="text-muted-foreground">Instance default</span> },
-                { label: "Created", value: formatDateTime(user.createdAt) },
-                { label: "Last seen", value: user.lastSeenAt ? `${formatDateTime(user.lastSeenAt)} (${timeAgo(user.lastSeenAt)})` : "Never" },
-                ...(user.awayUntil && user.awayUntil > new Date() ? [{ label: "Away until", value: formatDateTime(user.awayUntil) }] : []),
+                { label: "Created", value: <LocalTime date={user.createdAt} /> },
+                {
+                  label: "Last seen",
+                  value: user.lastSeenAt ? (
+                    <>
+                      <LocalTime date={user.lastSeenAt} /> (<LocalTime date={user.lastSeenAt} format="relative" />)
+                    </>
+                  ) : (
+                    "Never"
+                  ),
+                },
+                ...(user.awayUntil && user.awayUntil > new Date() ? [{ label: "Away until", value: <LocalTime date={user.awayUntil} /> }] : []),
               ]}
             />
           </Panel>
@@ -148,7 +158,7 @@ export default async function AdminUserDetailPage({ params, searchParams }: Page
                       <div className="min-w-0 flex-1">
                         <div className="truncate text-sm font-medium">{m.orgName}</div>
                         <div className="truncate font-mono text-[12px] text-muted-foreground">
-                          /{m.orgSlug} · joined {timeAgo(m.joinedAt)}
+                          /{m.orgSlug} · joined <LocalTime date={m.joinedAt} format="relative" titleFormat="datetime" />
                         </div>
                       </div>
                       <div className="flex shrink-0 flex-wrap items-center justify-end gap-1.5">
@@ -196,9 +206,7 @@ export default async function AdminUserDetailPage({ params, searchParams }: Page
                       {e.targetType && ` · ${e.targetType}`}
                       {e.ip && ` · ${e.ip}`}
                     </span>
-                    <time dateTime={e.createdAt.toISOString()} title={formatDateTime(e.createdAt)} className="shrink-0 text-[12px] text-muted-foreground">
-                      {timeAgo(e.createdAt)}
-                    </time>
+                    <LocalTime date={e.createdAt} format="relative" titleFormat="datetime" className="shrink-0 text-[12px] text-muted-foreground" />
                   </li>
                 ))}
               </ul>

src/app/admin/users/[id]/page.tsx

@@ -6,7 +6,7 @@ import { listUsers } from "@/server/admin/users"
 import { UserAvatar } from "@/components/app/user-avatar"
 import { AdminPageHeader, DataTable, EmptyState, StatusBadge, Td, Th, formatNumber } from "@/components/admin/ui"
 import { FilterSelect, Pager, SearchParamInput } from "@/components/admin/client"
-import { formatDate, timeAgo } from "@/components/admin/format"
+import { LocalTime } from "@/components/app/local-time"
 
 export const metadata: Metadata = { title: "Users" }
 
@@ -73,7 +73,7 @@ export default async function AdminUsersPage({ searchParams }: PageProps<"/admin
                       )}
                       {u.status === "disabled" && <StatusBadge tone="error">Disabled</StatusBadge>}
                       <span className="text-[12px] text-muted-foreground">
-                        {u.workspaces} {u.workspaces === 1 ? "workspace" : "workspaces"} · seen {timeAgo(u.lastSeenAt, "never")}
+                        {u.workspaces} {u.workspaces === 1 ? "workspace" : "workspaces"} · seen <LocalTime date={u.lastSeenAt} format="relative" fallback="never" />
                       </span>
                     </div>
                   </div>
@@ -126,9 +126,13 @@ export default async function AdminUsersPage({ searchParams }: PageProps<"/admin
                   <Td>
                     <StatusBadge tone={u.status === "active" ? "ok" : "error"}>{u.status === "active" ? "Active" : "Disabled"}</StatusBadge>
                   </Td>
-                  <Td className="text-[13px] whitespace-nowrap text-muted-foreground">{timeAgo(u.lastSeenAt, "Never")}</Td>
+                  <Td className="text-[13px] whitespace-nowrap text-muted-foreground">
+                    <LocalTime date={u.lastSeenAt} format="relative" titleFormat="datetime" fallback="Never" />
+                  </Td>
                   <Td className="text-right tabular-nums">{formatNumber(u.sessions)}</Td>
-                  <Td className="text-[13px] whitespace-nowrap text-muted-foreground">{formatDate(u.createdAt)}</Td>
+                  <Td className="text-[13px] whitespace-nowrap text-muted-foreground">
+                    <LocalTime date={u.createdAt} format="date" />
+                  </Td>
                 </tr>
               ))}
             </tbody>

src/app/admin/users/page.tsx

@@ -17,7 +17,7 @@ import {
   formatNumber,
 } from "@/components/admin/ui"
 import { PostButton } from "@/components/admin/client"
-import { formatDate, formatDateTime, timeAgo } from "@/components/admin/format"
+import { LocalTime } from "@/components/app/local-time"
 import {
   PROVIDER_LABELS,
   accountStatusTone,
@@ -91,7 +91,9 @@ export default async function AdminWorkspaceDetailPage({ params }: PageProps<"/a
             ) : (
               <StatusBadge tone={subscriptionTone(org.subscriptionStatus)}>{subscriptionLabel(org.subscriptionStatus)}</StatusBadge>
             )}
-            <span className="text-muted-foreground">· created {timeAgo(org.createdAt)}</span>
+            <span className="text-muted-foreground">
+              · created <LocalTime date={org.createdAt} format="relative" titleFormat="datetime" />
+            </span>
           </span>
         }
         actions={
@@ -109,7 +111,9 @@ export default async function AdminWorkspaceDetailPage({ params }: PageProps<"/a
         >
           <AlertTriangle className="mt-0.5 size-4 shrink-0" />
           <div className="min-w-0">
-            <div className="font-medium">Suspended {timeAgo(org.suspendedAt)} — the workspace is read-only.</div>
+            <div className="font-medium">
+              Suspended <LocalTime date={org.suspendedAt} format="relative" titleFormat="datetime" /> — the workspace is read-only.
+            </div>
             <div className="mt-0.5 break-words opacity-90">{org.suspendedReason || "No reason given."}</div>
           </div>
         </div>
@@ -154,7 +158,7 @@ export default async function AdminWorkspaceDetailPage({ params }: PageProps<"/a
                   label: "Created",
                   value: (
                     <>
-                      {formatDateTime(org.createdAt)}
+                      <LocalTime date={org.createdAt} />
                       {creator && (
                         <>
                           {" "}
@@ -167,8 +171,20 @@ export default async function AdminWorkspaceDetailPage({ params }: PageProps<"/a
                     </>
                   ),
                 },
-                { label: "Onboarding", value: org.onboardingCompletedAt ? `Completed ${formatDate(org.onboardingCompletedAt)}` : "Not completed" },
-                { label: "Last activity", value: timeAgo(stats.lastActivityAt, "No activity yet") },
+                {
+                  label: "Onboarding",
+                  value: org.onboardingCompletedAt ? (
+                    <>
+                      Completed <LocalTime date={org.onboardingCompletedAt} format="date" />
+                    </>
+                  ) : (
+                    "Not completed"
+                  ),
+                },
+                {
+                  label: "Last activity",
+                  value: <LocalTime date={stats.lastActivityAt} format="relative" titleFormat="datetime" fallback="No activity yet" />,
+                },
                 { label: "Teams", value: formatNumber(stats.teams) },
                 { label: "Time zone", value: org.settings?.timezone || "Instance default" },
               ]}
@@ -199,7 +215,7 @@ export default async function AdminWorkspaceDetailPage({ params }: PageProps<"/a
                         <div className="truncate text-[12.5px] text-muted-foreground">
                           {m.name ? m.email : null}
                           {m.name ? " · " : null}
-                          seen {timeAgo(m.lastSeenAt, "never")}
+                          seen <LocalTime date={m.lastSeenAt} format="relative" titleFormat="datetime" fallback="never" />
                         </div>
                       </div>
                       <div className="flex shrink-0 flex-col items-end gap-1 sm:flex-row sm:items-center sm:gap-2">
@@ -243,7 +259,9 @@ export default async function AdminWorkspaceDetailPage({ params }: PageProps<"/a
                         <StatusBadge tone={accountStatusTone(a.status)} pulse={a.status === "syncing"}>
                           {a.status[0]!.toUpperCase() + a.status.slice(1)}
                         </StatusBadge>
-                        <span className="text-[11.5px] text-muted-foreground">synced {timeAgo(a.lastSyncedAt, "never")}</span>
+                        <span className="text-[11.5px] text-muted-foreground">
+                          synced <LocalTime date={a.lastSyncedAt} format="relative" titleFormat="datetime" fallback="never" />
+                        </span>
                       </div>
                     </div>
                     {a.lastError && (
@@ -264,12 +282,12 @@ export default async function AdminWorkspaceDetailPage({ params }: PageProps<"/a
               id={org.id}
               plan={org.plan}
               status={org.subscriptionStatus}
-              trialEndsLabel={org.trialEndsAt ? formatDate(org.trialEndsAt) : null}
+              trialEndsAt={org.trialEndsAt?.toISOString() ?? null}
               trialExpired={trialExpired}
               stripeCustomerId={org.stripeCustomerId}
               stripeCustomerUrl={stripeCustomerUrl}
               stripeSubscriptionId={org.stripeSubscriptionId}
-              currentPeriodLabel={org.currentPeriodEndsAt ? formatDate(org.currentPeriodEndsAt) : null}
+              currentPeriodEndsAt={org.currentPeriodEndsAt?.toISOString() ?? null}
             />
           </Panel>