diff --git a/dashboard/biome.json b/dashboard/biome.json
index 0a95199..429508f 100644
--- a/dashboard/biome.json
+++ b/dashboard/biome.json
@@ -12,7 +12,7 @@
         "noForEach": "off"
       },
       "correctness": {
-        "useExhaustiveDependencies": "warn"
+        "useExhaustiveDependencies": "error"
       },
       "style": {
         "noNonNullAssertion": "off"
diff --git a/dashboard/src/features/jobs/components/dag-layout.test.ts b/dashboard/src/features/jobs/components/dag-layout.test.ts
new file mode 100644
index 0000000..08edde7
--- /dev/null
+++ b/dashboard/src/features/jobs/components/dag-layout.test.ts
@@ -0,0 +1,122 @@
+import { describe, expect, it } from "vitest";
+import type { DagData, DagNode } from "@/lib/api-types";
+import { LAYER_GAP_X, layout, NODE_GAP_Y, NODE_HEIGHT, NODE_WIDTH, PADDING } from "./dag-layout";
+
+function node(id: string): DagNode {
+  return { id, task_name: id, status: "complete" };
+}
+
+describe("layout (DAG)", () => {
+  it("returns zero-size canvas for an empty graph", () => {
+    expect(layout({ nodes: [], edges: [] })).toEqual({ nodes: [], width: 0, height: 0 });
+  });
+
+  it("places a single node on layer 0 within padding", () => {
+    const result = layout({ nodes: [node("a")], edges: [] });
+    expect(result.nodes).toHaveLength(1);
+    const [a] = result.nodes;
+    expect(a).toMatchObject({ id: "a", layer: 0, x: PADDING });
+    expect(result.width).toBe(PADDING * 2 + NODE_WIDTH);
+    expect(result.height).toBe(PADDING * 2 + NODE_HEIGHT);
+  });
+
+  it("assigns BFS layers along a linear chain", () => {
+    const data: DagData = {
+      nodes: [node("a"), node("b"), node("c")],
+      edges: [
+        { from: "a", to: "b" },
+        { from: "b", to: "c" },
+      ],
+    };
+    const result = layout(data);
+    const layers = Object.fromEntries(result.nodes.map((n) => [n.id, n.layer]));
+    expect(layers).toEqual({ a: 0, b: 1, c: 2 });
+  });
+
+  it("centers a fan-out layer vertically", () => {
+    const data: DagData = {
+      nodes: [node("root"), node("l"), node("r")],
+      edges: [
+        { from: "root", to: "l" },
+        { from: "root", to: "r" },
+      ],
+    };
+    const result = layout(data);
+
+    const root = result.nodes.find((n) => n.id === "root");
+    const left = result.nodes.find((n) => n.id === "l");
+    const right = result.nodes.find((n) => n.id === "r");
+    expect(root?.layer).toBe(0);
+    expect(left?.layer).toBe(1);
+    expect(right?.layer).toBe(1);
+
+    const layerHeight = 2 * NODE_HEIGHT + NODE_GAP_Y;
+    const expectedStartY = (result.height - layerHeight) / 2;
+    expect(left?.y).toBe(expectedStartY);
+    expect(right?.y).toBe(expectedStartY + NODE_HEIGHT + NODE_GAP_Y);
+  });
+
+  it("places nodes from later layers at increasing x", () => {
+    const result = layout({
+      nodes: [node("a"), node("b"), node("c")],
+      edges: [
+        { from: "a", to: "b" },
+        { from: "b", to: "c" },
+      ],
+    });
+    const a = result.nodes.find((n) => n.id === "a");
+    const b = result.nodes.find((n) => n.id === "b");
+    const c = result.nodes.find((n) => n.id === "c");
+    expect(a?.x).toBeLessThan(b?.x ?? 0);
+    expect(b?.x).toBeLessThan(c?.x ?? 0);
+    expect((b?.x ?? 0) - (a?.x ?? 0)).toBe(NODE_WIDTH + LAYER_GAP_X);
+  });
+
+  it("ranks deeper of two paths to a shared sink", () => {
+    const data: DagData = {
+      nodes: [node("a"), node("b"), node("c"), node("d")],
+      edges: [
+        { from: "a", to: "b" },
+        { from: "b", to: "d" },
+        { from: "a", to: "c" },
+        { from: "c", to: "d" },
+      ],
+    };
+    const result = layout(data);
+    const layers = Object.fromEntries(result.nodes.map((n) => [n.id, n.layer]));
+    expect(layers.d).toBe(2);
+  });
+
+  it("falls back to layer 0 for cycles with no source", () => {
+    const data: DagData = {
+      nodes: [node("a"), node("b")],
+      edges: [
+        { from: "a", to: "b" },
+        { from: "b", to: "a" },
+      ],
+    };
+    const result = layout(data);
+    expect(result.nodes).toHaveLength(2);
+    expect(result.nodes.some((n) => n.layer === 0)).toBe(true);
+    expect(result.width).toBeGreaterThan(0);
+  });
+
+  it("includes isolated nodes as additional layer-0 entries", () => {
+    const data: DagData = {
+      nodes: [node("a"), node("b"), node("orphan")],
+      edges: [{ from: "a", to: "b" }],
+    };
+    const result = layout(data);
+    const orphan = result.nodes.find((n) => n.id === "orphan");
+    expect(orphan?.layer).toBe(0);
+  });
+
+  it("preserves the original task_name and status on laid-out nodes", () => {
+    const data: DagData = {
+      nodes: [{ id: "a", task_name: "send_email", status: "running" }],
+      edges: [],
+    };
+    const [a] = layout(data).nodes;
+    expect(a).toMatchObject({ task_name: "send_email", status: "running" });
+  });
+});
diff --git a/dashboard/src/features/jobs/components/dag-layout.ts b/dashboard/src/features/jobs/components/dag-layout.ts
new file mode 100644
index 0000000..8745bff
--- /dev/null
+++ b/dashboard/src/features/jobs/components/dag-layout.ts
@@ -0,0 +1,126 @@
+import type { DagData, DagNode } from "@/lib/api-types";
+
+export const NODE_WIDTH = 180;
+export const NODE_HEIGHT = 58;
+export const LAYER_GAP_X = 80;
+export const NODE_GAP_Y = 24;
+export const PADDING = 32;
+
+export interface LaidOutNode extends DagNode {
+  x: number;
+  y: number;
+  layer: number;
+}
+
+export interface LayoutResult {
+  nodes: LaidOutNode[];
+  width: number;
+  height: number;
+}
+
+/**
+ * Lay out DAG nodes in BFS layers from sources (nodes with no inbound edges).
+ * Each layer's nodes are centered vertically so the graph is readable even for
+ * lopsided fan-outs. Cycles are handled defensively by seeding layer 0 with
+ * the first node when no source exists.
+ */
+export function layout(data: DagData): LayoutResult {
+  const { nodes, edges } = data;
+  if (nodes.length === 0) return { nodes: [], width: 0, height: 0 };
+
+  const layerOf = assignLayers(nodes, edges);
+  const layers = groupByLayer(nodes, layerOf);
+  const sortedLayers = [...layers.entries()].sort(([a], [b]) => a - b);
+
+  const { width, height } = canvasSize(sortedLayers);
+  const laidOut = positionNodes(nodes, sortedLayers, height);
+
+  return { nodes: laidOut, width, height };
+}
+
+function assignLayers(nodes: DagNode[], edges: DagData["edges"]): Map<string, number> {
+  const incoming = new Map<string, number>();
+  const outgoing = new Map<string, string[]>();
+  for (const n of nodes) incoming.set(n.id, 0);
+  for (const e of edges) {
+    incoming.set(e.to, (incoming.get(e.to) ?? 0) + 1);
+    const arr = outgoing.get(e.from);
+    if (arr) arr.push(e.to);
+    else outgoing.set(e.from, [e.to]);
+  }
+
+  const layerOf = new Map<string, number>();
+  const queue: string[] = [];
+  for (const n of nodes) {
+    if ((incoming.get(n.id) ?? 0) === 0) {
+      layerOf.set(n.id, 0);
+      queue.push(n.id);
+    }
+  }
+  if (queue.length === 0) {
+    layerOf.set(nodes[0]!.id, 0);
+    queue.push(nodes[0]!.id);
+  }
+
+  // Cap depth at nodes.length - 1 so cycles can't push layers up forever.
+  // The longest acyclic path through N nodes has N-1 edges, so any layer
+  // beyond that signals a back-edge in a cycle and is safe to drop.
+  const maxLayer = Math.max(0, nodes.length - 1);
+  while (queue.length > 0) {
+    const id = queue.shift()!;
+    const depth = layerOf.get(id) ?? 0;
+    if (depth >= maxLayer) continue;
+    for (const child of outgoing.get(id) ?? []) {
+      const nextDepth = depth + 1;
+      if ((layerOf.get(child) ?? -1) < nextDepth) {
+        layerOf.set(child, nextDepth);
+        queue.push(child);
+      }
+    }
+  }
+
+  return layerOf;
+}
+
+function groupByLayer(nodes: DagNode[], layerOf: Map<string, number>): Map<number, string[]> {
+  const layers = new Map<number, string[]>();
+  for (const n of nodes) {
+    const layer = layerOf.get(n.id) ?? 0;
+    const bucket = layers.get(layer) ?? [];
+    bucket.push(n.id);
+    layers.set(layer, bucket);
+  }
+  return layers;
+}
+
+function canvasSize(sortedLayers: [number, string[]][]): { width: number; height: number } {
+  const tallestLayerSize = sortedLayers.reduce((max, [, ids]) => Math.max(max, ids.length), 0);
+  const height = PADDING * 2 + tallestLayerSize * NODE_HEIGHT + (tallestLayerSize - 1) * NODE_GAP_Y;
+  const width =
+    PADDING * 2 + sortedLayers.length * NODE_WIDTH + (sortedLayers.length - 1) * LAYER_GAP_X;
+  return { width, height };
+}
+
+function positionNodes(
+  nodes: DagNode[],
+  sortedLayers: [number, string[]][],
+  canvasHeight: number,
+): LaidOutNode[] {
+  const byId = new Map(nodes.map((n) => [n.id, n]));
+  const laidOut: LaidOutNode[] = [];
+  for (const [layer, ids] of sortedLayers) {
+    const layerHeight = ids.length * NODE_HEIGHT + (ids.length - 1) * NODE_GAP_Y;
+    const startY = (canvasHeight - layerHeight) / 2;
+    ids.forEach((id, i) => {
+      const base = byId.get(id);
+      if (!base) return;
+      laidOut.push({
+        ...base,
+        layer,
+        x: PADDING + layer * (NODE_WIDTH + LAYER_GAP_X),
+        y: startY + i * (NODE_HEIGHT + NODE_GAP_Y),
+      });
+    });
+  }
+  return laidOut;
+}
diff --git a/dashboard/src/features/jobs/components/job-dag-tab.tsx b/dashboard/src/features/jobs/components/job-dag-tab.tsx
index cfe578b..77ffe81 100644
--- a/dashboard/src/features/jobs/components/job-dag-tab.tsx
+++ b/dashboard/src/features/jobs/components/job-dag-tab.tsx
@@ -2,8 +2,9 @@ import { Link } from "@tanstack/react-router";
 import { Workflow } from "lucide-react";
 import { useMemo } from "react";
 import { EmptyState, ErrorState, Skeleton } from "@/components/ui";
-import type { DagData, DagEdge, DagNode, JobStatus } from "@/lib/api-types";
+import type { DagData, DagEdge, JobStatus } from "@/lib/api-types";
 import { JOB_STATUS_LABEL } from "@/lib/status";
+import { type LaidOutNode, layout, NODE_HEIGHT, NODE_WIDTH } from "./dag-layout";
 
 interface JobDagTabProps {
   dag: DagData | undefined;
@@ -30,99 +31,6 @@ const STATUS_STROKE: Record<JobStatus, string> = {
   cancelled: "var(--color-warning)",
 };
 
-const NODE_WIDTH = 180;
-const NODE_HEIGHT = 58;
-const LAYER_GAP_X = 80;
-const NODE_GAP_Y = 24;
-const PADDING = 32;
-
-interface LaidOutNode extends DagNode {
-  x: number;
-  y: number;
-  layer: number;
-}
-
-/**
- * Lay out DAG nodes in BFS layers from sources (nodes with no inbound edges).
- * Each layer's nodes are centered vertically so the graph is readable even
- * for lopsided fan-outs. Returns positioned nodes plus canvas dimensions.
- */
-function layout(data: DagData): { nodes: LaidOutNode[]; width: number; height: number } {
-  const nodes = data.nodes;
-  const edges = data.edges;
-  if (nodes.length === 0) return { nodes: [], width: 0, height: 0 };
-
-  const incoming = new Map<string, number>();
-  const outgoing = new Map<string, string[]>();
-  for (const n of nodes) incoming.set(n.id, 0);
-  for (const e of edges) {
-    incoming.set(e.to, (incoming.get(e.to) ?? 0) + 1);
-    const arr = outgoing.get(e.from);
-    if (arr) arr.push(e.to);
-    else outgoing.set(e.from, [e.to]);
-  }
-
-  const layerOf = new Map<string, number>();
-  const queue: string[] = [];
-  for (const n of nodes) {
-    if ((incoming.get(n.id) ?? 0) === 0) {
-      layerOf.set(n.id, 0);
-      queue.push(n.id);
-    }
-  }
-  // Handle cycles defensively: any node we haven't ranked sits on layer 0.
-  if (queue.length === 0 && nodes.length > 0) {
-    layerOf.set(nodes[0]!.id, 0);
-    queue.push(nodes[0]!.id);
-  }
-
-  while (queue.length > 0) {
-    const id = queue.shift()!;
-    const depth = layerOf.get(id) ?? 0;
-    for (const child of outgoing.get(id) ?? []) {
-      const nextDepth = depth + 1;
-      if ((layerOf.get(child) ?? -1) < nextDepth) {
-        layerOf.set(child, nextDepth);
-        queue.push(child);
-      }
-    }
-  }
-
-  const layers = new Map<number, string[]>();
-  for (const n of nodes) {
-    const layer = layerOf.get(n.id) ?? 0;
-    const bucket = layers.get(layer) ?? [];
-    bucket.push(n.id);
-    layers.set(layer, bucket);
-  }
-
-  const sortedLayers = [...layers.entries()].sort(([a], [b]) => a - b);
-  const tallestLayerSize = sortedLayers.reduce((max, [, ids]) => Math.max(max, ids.length), 0);
-  const canvasHeight =
-    PADDING * 2 + tallestLayerSize * NODE_HEIGHT + (tallestLayerSize - 1) * NODE_GAP_Y;
-  const canvasWidth =
-    PADDING * 2 + sortedLayers.length * NODE_WIDTH + (sortedLayers.length - 1) * LAYER_GAP_X;
-
-  const laidOut: LaidOutNode[] = [];
-  const byId = new Map(nodes.map((n) => [n.id, n]));
-  for (const [layer, ids] of sortedLayers) {
-    const layerHeight = ids.length * NODE_HEIGHT + (ids.length - 1) * NODE_GAP_Y;
-    const startY = (canvasHeight - layerHeight) / 2;
-    ids.forEach((id, i) => {
-      const base = byId.get(id);
-      if (!base) return;
-      laidOut.push({
-        ...base,
-        layer,
-        x: PADDING + layer * (NODE_WIDTH + LAYER_GAP_X),
-        y: startY + i * (NODE_HEIGHT + NODE_GAP_Y),
-      });
-    });
-  }
-
-  return { nodes: laidOut, width: canvasWidth, height: canvasHeight };
-}
-
 export function JobDagTab({ dag, loading, error, onRetry }: JobDagTabProps) {
   const layoutResult = useMemo(
     () => (dag ? layout(dag) : { nodes: [], width: 0, height: 0 }),
diff --git a/dashboard/src/features/jobs/components/job-filters.tsx b/dashboard/src/features/jobs/components/job-filters.tsx
index 72ee5f9..b882036 100644
--- a/dashboard/src/features/jobs/components/job-filters.tsx
+++ b/dashboard/src/features/jobs/components/job-filters.tsx
@@ -1,5 +1,5 @@
 import { X } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
   Button,
   Input,
@@ -62,32 +62,34 @@ export function JobFiltersBar({ filters, onChange, className }: JobFiltersBarPro
   const debouncedMetadata = useDebouncedValue(local.metadata, 300);
   const debouncedError = useDebouncedValue(local.error, 300);
 
+  // Hold the latest filters/onChange in refs so the propagation effect re-runs
+  // only when debounced values settle. Listing them as deps would re-fire the
+  // effect on every parent render and defeat the debounce.
+  const filtersRef = useRef(filters);
+  const onChangeRef = useRef(onChange);
   useEffect(() => {
+    filtersRef.current = filters;
+    onChangeRef.current = onChange;
+  });
+
+  useEffect(() => {
+    const current = filtersRef.current;
     const next: JobFilters = {
-      ...filters,
+      ...current,
       queue: debouncedQueue || undefined,
       task: debouncedTask || undefined,
       metadata: debouncedMetadata || undefined,
       error: debouncedError || undefined,
     };
     if (
-      next.queue !== filters.queue ||
-      next.task !== filters.task ||
-      next.metadata !== filters.metadata ||
-      next.error !== filters.error
+      next.queue !== current.queue ||
+      next.task !== current.task ||
+      next.metadata !== current.metadata ||
+      next.error !== current.error
     ) {
-      onChange(next);
+      onChangeRef.current(next);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentional: propagate only debounced values
-  }, [
-    debouncedQueue,
-    debouncedTask,
-    debouncedMetadata,
-    debouncedError,
-    filters.task,
-    filters,
-    onChange,
-  ]);
+  }, [debouncedQueue, debouncedTask, debouncedMetadata, debouncedError]);
 
   const activeCount = countActiveFilters(filters);
 
diff --git a/dashboard/src/features/jobs/components/job-logs-tab.tsx b/dashboard/src/features/jobs/components/job-logs-tab.tsx
index 6877766..fe158b2 100644
--- a/dashboard/src/features/jobs/components/job-logs-tab.tsx
+++ b/dashboard/src/features/jobs/components/job-logs-tab.tsx
@@ -2,6 +2,7 @@ import { ScrollText } from "lucide-react";
 import { EmptyState, ErrorState, Skeleton } from "@/components/ui";
 import type { TaskLog } from "@/lib/api-types";
 import { cn } from "@/lib/cn";
+import { logLevelClass } from "@/lib/status";
 import { formatAbsolute } from "@/lib/time";
 
 interface JobLogsTabProps {
@@ -11,14 +12,6 @@ interface JobLogsTabProps {
   onRetry: () => void;
 }
 
-const LEVEL_STYLE: Record<string, string> = {
-  error: "text-danger",
-  warning: "text-warning",
-  warn: "text-warning",
-  info: "text-info",
-  debug: "text-[var(--fg-subtle)]",
-};
-
 export function JobLogsTab({ logs, loading, error, onRetry }: JobLogsTabProps) {
   if (error) {
     return <ErrorState title="Couldn't load logs" description={error.message} onRetry={onRetry} />;
@@ -36,7 +29,7 @@ export function JobLogsTab({ logs, loading, error, onRetry }: JobLogsTabProps) {
     <div className="rounded-lg bg-[var(--surface)] ring-1 ring-inset ring-[var(--border)]">
       <ul className="divide-y divide-[var(--border)] font-mono text-[11px]">
         {logs.map((log, i) => {
-          const levelClass = LEVEL_STYLE[log.level.toLowerCase()] ?? "text-[var(--fg-muted)]";
+          const levelClass = logLevelClass(log.level);
           const key = `${log.logged_at}-${log.level}-${i}`;
           return (
             <li key={key} className="flex gap-3 px-4 py-2 hover:bg-[var(--surface-2)]/60">
diff --git a/dashboard/src/features/jobs/components/job-replay-tab.tsx b/dashboard/src/features/jobs/components/job-replay-tab.tsx
index de9bd0c..38471a3 100644
--- a/dashboard/src/features/jobs/components/job-replay-tab.tsx
+++ b/dashboard/src/features/jobs/components/job-replay-tab.tsx
@@ -49,8 +49,7 @@ export function JobReplayTab({ replays, loading, error, onRetry }: JobReplayTabP
               {entry.replay_job_id}
             </Link>
             <span className="text-xs tabular-nums text-[var(--fg-subtle)]">
-              {formatAbsolute(entry.replayed_at * 1000)} ·{" "}
-              {formatRelative(entry.replayed_at * 1000)}
+              {formatAbsolute(entry.replayed_at)} · {formatRelative(entry.replayed_at)}
             </span>
           </div>
           {entry.original_error ? (
diff --git a/dashboard/src/features/jobs/components/job-table.tsx b/dashboard/src/features/jobs/components/job-table.tsx
index 63c3ea0..9d9e8d5 100644
--- a/dashboard/src/features/jobs/components/job-table.tsx
+++ b/dashboard/src/features/jobs/components/job-table.tsx
@@ -68,7 +68,7 @@ export function JobTable({ jobs, loading, error, onRetry }: JobTableProps) {
         header: "Created",
         cell: ({ getValue }) => (
           <span className="text-xs tabular-nums text-[var(--fg-muted)]">
-            {formatRelative(getValue<number>() * 1000)}
+            {formatRelative(getValue<number>())}
           </span>
         ),
       },
diff --git a/dashboard/src/features/logs/components/log-stream.tsx b/dashboard/src/features/logs/components/log-stream.tsx
index 2431bfd..c05265a 100644
--- a/dashboard/src/features/logs/components/log-stream.tsx
+++ b/dashboard/src/features/logs/components/log-stream.tsx
@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import { EmptyState, ErrorState, Skeleton } from "@/components/ui";
 import type { TaskLog } from "@/lib/api-types";
 import { cn } from "@/lib/cn";
+import { logLevelClass } from "@/lib/status";
 import { formatAbsolute } from "@/lib/time";
 
 interface LogStreamProps {
@@ -14,14 +15,6 @@ interface LogStreamProps {
   className?: string;
 }
 
-const LEVEL_TONE: Record<string, string> = {
-  error: "text-danger",
-  warning: "text-warning",
-  warn: "text-warning",
-  info: "text-info",
-  debug: "text-[var(--fg-subtle)]",
-};
-
 const ROW_ESTIMATE = 28;
 const AUTO_SCROLL_THRESHOLD_PX = 40;
 
@@ -88,7 +81,7 @@ export function LogStream({ logs, loading, error, onRetry, className }: LogStrea
           {virtualizer.getVirtualItems().map((item) => {
             const log = logs[item.index];
             if (!log) return null;
-            const levelClass = LEVEL_TONE[log.level.toLowerCase()] ?? "text-[var(--fg-muted)]";
+            const levelClass = logLevelClass(log.level);
             return (
               <div
                 key={`${log.logged_at}-${log.job_id}-${item.index}`}
diff --git a/dashboard/src/features/metrics/components/latency-chart.tsx b/dashboard/src/features/metrics/components/latency-chart.tsx
index 447c51f..d01fb2d 100644
--- a/dashboard/src/features/metrics/components/latency-chart.tsx
+++ b/dashboard/src/features/metrics/components/latency-chart.tsx
@@ -10,6 +10,7 @@ import {
 } from "recharts";
 import { Card, CardContent, CardHeader, CardTitle, Skeleton } from "@/components/ui";
 import type { TimeseriesBucket } from "@/lib/api-types";
+import { formatAxisTime } from "../utils";
 
 interface LatencyChartProps {
   buckets: TimeseriesBucket[] | undefined;
@@ -99,7 +100,3 @@ function LatencyTooltip({
     </div>
   );
 }
-
-function formatAxisTime(value: number): string {
-  return new Date(value).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
-}
diff --git a/dashboard/src/features/metrics/components/throughput-chart.tsx b/dashboard/src/features/metrics/components/throughput-chart.tsx
index 915e4dc..8d353de 100644
--- a/dashboard/src/features/metrics/components/throughput-chart.tsx
+++ b/dashboard/src/features/metrics/components/throughput-chart.tsx
@@ -11,6 +11,7 @@ import {
 } from "recharts";
 import { Card, CardContent, CardHeader, CardTitle, Skeleton } from "@/components/ui";
 import type { TimeseriesBucket } from "@/lib/api-types";
+import { formatAxisTime } from "../utils";
 
 interface ThroughputChartProps {
   buckets: TimeseriesBucket[] | undefined;
@@ -27,7 +28,7 @@ export function ThroughputChart({ buckets, loading }: ThroughputChartProps) {
   const data = useMemo<Row[]>(
     () =>
       (buckets ?? []).map((b) => ({
-        t: b.timestamp * 1000,
+        t: b.timestamp,
         success: b.success,
         failure: b.failure,
       })),
@@ -128,7 +129,3 @@ function ChartTooltip({
     </div>
   );
 }
-
-function formatAxisTime(value: number): string {
-  return new Date(value).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
-}
diff --git a/dashboard/src/features/metrics/utils.ts b/dashboard/src/features/metrics/utils.ts
new file mode 100644
index 0000000..8cc1ea9
--- /dev/null
+++ b/dashboard/src/features/metrics/utils.ts
@@ -0,0 +1,3 @@
+export function formatAxisTime(value: number): string {
+  return new Date(value).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+}
diff --git a/dashboard/src/features/settings/derived.test.ts b/dashboard/src/features/settings/derived.test.ts
new file mode 100644
index 0000000..1609feb
--- /dev/null
+++ b/dashboard/src/features/settings/derived.test.ts
@@ -0,0 +1,76 @@
+import { describe, expect, it } from "vitest";
+import { applyJobContext, parseExternalLinks } from "./derived";
+
+describe("parseExternalLinks", () => {
+  it("returns [] for undefined or empty input", () => {
+    expect(parseExternalLinks(undefined)).toEqual([]);
+    expect(parseExternalLinks("")).toEqual([]);
+  });
+
+  it("returns [] for invalid JSON", () => {
+    expect(parseExternalLinks("not json")).toEqual([]);
+    expect(parseExternalLinks("{")).toEqual([]);
+  });
+
+  it("returns [] when JSON is not an array", () => {
+    expect(parseExternalLinks('{"label":"x","url":"y"}')).toEqual([]);
+    expect(parseExternalLinks("null")).toEqual([]);
+    expect(parseExternalLinks("42")).toEqual([]);
+  });
+
+  it("parses well-formed array entries", () => {
+    const raw = JSON.stringify([
+      { label: "Docs", url: "https://docs.example.com" },
+      { label: "Repo", url: "https://github.com/example" },
+    ]);
+    expect(parseExternalLinks(raw)).toEqual([
+      { label: "Docs", url: "https://docs.example.com" },
+      { label: "Repo", url: "https://github.com/example" },
+    ]);
+  });
+
+  it("filters out entries missing label or url", () => {
+    const raw = JSON.stringify([
+      { label: "Docs", url: "https://docs.example.com" },
+      { label: "Missing url" },
+      { url: "https://nolabel.example.com" },
+      { label: 42, url: "https://wrong-type.example.com" },
+      null,
+      "string",
+    ]);
+    expect(parseExternalLinks(raw)).toEqual([{ label: "Docs", url: "https://docs.example.com" }]);
+  });
+
+  it("strips extra fields, keeping only label and url", () => {
+    const raw = JSON.stringify([{ label: "Docs", url: "/d", danger: "<script>" }]);
+    expect(parseExternalLinks(raw)).toEqual([{ label: "Docs", url: "/d" }]);
+  });
+});
+
+describe("applyJobContext", () => {
+  it("returns the template unchanged when no placeholder", () => {
+    expect(applyJobContext("https://example.com/dashboard", "abc123")).toBe(
+      "https://example.com/dashboard",
+    );
+  });
+
+  it("substitutes a single {job_id}", () => {
+    expect(applyJobContext("https://example.com/jobs/{job_id}", "abc123")).toBe(
+      "https://example.com/jobs/abc123",
+    );
+  });
+
+  it("substitutes multiple {job_id} occurrences", () => {
+    expect(applyJobContext("/{job_id}/log/{job_id}", "abc")).toBe("/abc/log/abc");
+  });
+
+  it("URL-encodes special characters in the job id", () => {
+    expect(applyJobContext("https://example.com/{job_id}", "a/b c?d&e")).toBe(
+      "https://example.com/a%2Fb%20c%3Fd%26e",
+    );
+  });
+
+  it("handles an empty job id", () => {
+    expect(applyJobContext("/jobs/{job_id}", "")).toBe("/jobs/");
+  });
+});
diff --git a/dashboard/src/lib/api-client.test.ts b/dashboard/src/lib/api-client.test.ts
new file mode 100644
index 0000000..920bc96
--- /dev/null
+++ b/dashboard/src/lib/api-client.test.ts
@@ -0,0 +1,164 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ApiError, api } from "./api-client";
+
+function jsonResponse(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "content-type": "application/json" },
+  });
+}
+
+function textResponse(body: string, status = 200): Response {
+  return new Response(body, {
+    status,
+    headers: { "content-type": "text/plain" },
+  });
+}
+
+describe("api.get URL building", () => {
+  beforeEach(() => {
+    vi.spyOn(globalThis, "fetch").mockResolvedValue(jsonResponse({ ok: true }));
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("hits the path verbatim when no params", async () => {
+    await api.get("/api/jobs");
+    expect(globalThis.fetch).toHaveBeenCalledWith(
+      "/api/jobs",
+      expect.objectContaining({ method: "GET" }),
+    );
+  });
+
+  it("encodes params and skips null/undefined/empty-string", async () => {
+    await api.get("/api/jobs", {
+      params: {
+        status: "running",
+        limit: 25,
+        bool: true,
+        skipNull: null,
+        skipUndefined: undefined,
+        skipEmpty: "",
+      },
+    });
+    const [url] = vi.mocked(globalThis.fetch).mock.calls[0]!;
+    expect(url).toBe("/api/jobs?status=running&limit=25&bool=true");
+  });
+
+  it("escapes special characters in query values", async () => {
+    await api.get("/api/jobs", { params: { task: "send email & sms" } });
+    const [url] = vi.mocked(globalThis.fetch).mock.calls[0]!;
+    expect(url).toBe("/api/jobs?task=send+email+%26+sms");
+  });
+
+  it("forwards Accept and custom headers", async () => {
+    await api.get("/api/jobs", { headers: { "X-Trace": "abc" } });
+    const [, init] = vi.mocked(globalThis.fetch).mock.calls[0]!;
+    expect(init?.headers).toMatchObject({ Accept: "application/json", "X-Trace": "abc" });
+  });
+
+  it("passes the abort signal through", async () => {
+    const controller = new AbortController();
+    await api.get("/api/jobs", { signal: controller.signal });
+    const [, init] = vi.mocked(globalThis.fetch).mock.calls[0]!;
+    expect(init?.signal).toBe(controller.signal);
+  });
+});
+
+describe("api response parsing", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("parses JSON when content-type is application/json", async () => {
+    vi.spyOn(globalThis, "fetch").mockResolvedValue(jsonResponse({ items: [1, 2] }));
+    const result = await api.get<{ items: number[] }>("/api/x");
+    expect(result).toEqual({ items: [1, 2] });
+  });
+
+  it("falls back to text when content-type is not JSON", async () => {
+    vi.spyOn(globalThis, "fetch").mockResolvedValue(textResponse("hello"));
+    const result = await api.get<string>("/api/x");
+    expect(result).toBe("hello");
+  });
+
+  it("throws ApiError with structured message on non-OK JSON", async () => {
+    vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      jsonResponse({ error: "queue not found" }, 404),
+    );
+    await expect(api.get("/api/missing")).rejects.toMatchObject({
+      name: "ApiError",
+      status: 404,
+      message: "queue not found",
+      body: { error: "queue not found" },
+    });
+  });
+
+  it("throws ApiError with status fallback when JSON has no error field", async () => {
+    vi.spyOn(globalThis, "fetch").mockResolvedValue(jsonResponse({ note: "oops" }, 500));
+    await expect(api.get("/api/x")).rejects.toMatchObject({
+      name: "ApiError",
+      status: 500,
+      message: "Request failed with status 500",
+    });
+  });
+
+  it("throws ApiError on non-OK text response", async () => {
+    vi.spyOn(globalThis, "fetch").mockResolvedValue(textResponse("bad gateway", 502));
+    await expect(api.get("/api/x")).rejects.toMatchObject({
+      name: "ApiError",
+      status: 502,
+      message: "Request failed with status 502",
+      body: "bad gateway",
+    });
+  });
+});
+
+describe("api write methods", () => {
+  beforeEach(() => {
+    vi.spyOn(globalThis, "fetch").mockResolvedValue(jsonResponse({ ok: true }));
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("post serializes JSON body and sets content-type", async () => {
+    await api.post("/api/jobs", { task: "send_email" });
+    const [, init] = vi.mocked(globalThis.fetch).mock.calls[0]!;
+    expect(init?.method).toBe("POST");
+    expect(init?.body).toBe(JSON.stringify({ task: "send_email" }));
+    expect(init?.headers).toMatchObject({ "Content-Type": "application/json" });
+  });
+
+  it("post omits body and content-type when body is undefined", async () => {
+    await api.post("/api/queues/default/pause");
+    const [, init] = vi.mocked(globalThis.fetch).mock.calls[0]!;
+    expect(init?.body).toBeUndefined();
+    expect(init?.headers).not.toHaveProperty("Content-Type");
+  });
+
+  it("put sends PUT method", async () => {
+    await api.put("/api/settings", { theme: "dark" });
+    const [, init] = vi.mocked(globalThis.fetch).mock.calls[0]!;
+    expect(init?.method).toBe("PUT");
+  });
+
+  it("delete sends DELETE method", async () => {
+    await api.delete("/api/jobs/abc");
+    const [, init] = vi.mocked(globalThis.fetch).mock.calls[0]!;
+    expect(init?.method).toBe("DELETE");
+  });
+});
+
+describe("ApiError", () => {
+  it("preserves message, status, and body", () => {
+    const err = new ApiError("nope", 418, { teapot: true });
+    expect(err.message).toBe("nope");
+    expect(err.status).toBe(418);
+    expect(err.body).toEqual({ teapot: true });
+    expect(err).toBeInstanceOf(Error);
+  });
+});
diff --git a/dashboard/src/lib/api-types.ts b/dashboard/src/lib/api-types.ts
index 51208af..0602194 100644
--- a/dashboard/src/lib/api-types.ts
+++ b/dashboard/src/lib/api-types.ts
@@ -5,6 +5,11 @@
  * Keep in sync with:
  * - `py_src/taskito/dashboard.py` route handlers
  * - `docs/guide/observability/dashboard-api.md` (documented contract)
+ *
+ * **Timestamps**: every timestamp field exposed by the dashboard API is Unix
+ * milliseconds (the Rust core uses `now_millis()` and the Python aggregators
+ * work in ms). Pass them straight to `Date`, `formatRelative`, `formatAbsolute`
+ * — never multiply by 1000.
  */
 
 export type JobStatus = "pending" | "running" | "complete" | "failed" | "dead" | "cancelled";
@@ -39,9 +44,13 @@ export interface Job {
   progress: number | null;
   retry_count: number;
   max_retries: number;
+  /** Unix milliseconds. */
   created_at: number;
+  /** Unix milliseconds. */
   scheduled_at: number;
+  /** Unix milliseconds; null if the job hasn't started. */
   started_at: number | null;
+  /** Unix milliseconds; null if the job hasn't finished. */
   completed_at: number | null;
   timeout_ms: number;
   error: string | null;
@@ -52,6 +61,7 @@ export interface Job {
 export interface JobError {
   attempt: number;
   error: string;
+  /** Unix milliseconds. */
   failed_at: number;
 }
 
@@ -61,11 +71,13 @@ export interface TaskLog {
   level: string;
   message: string;
   extra: string | null;
+  /** Unix milliseconds. */
   logged_at: number;
 }
 
 export interface ReplayEntry {
   replay_job_id: string;
+  /** Unix milliseconds. */
   replayed_at: number;
   original_error: string | null;
   replay_error: string | null;
@@ -94,6 +106,7 @@ export interface DeadLetter {
   queue: string;
   error: string | null;
   retry_count: number;
+  /** Unix milliseconds. */
   failed_at: number;
 }
 
@@ -112,6 +125,7 @@ export interface TaskMetrics {
 export type MetricsResponse = Record<string, TaskMetrics>;
 
 export interface TimeseriesBucket {
+  /** Bucket start; Unix milliseconds. */
   timestamp: number;
   count: number;
   success: number;
@@ -122,7 +136,9 @@ export interface TimeseriesBucket {
 export interface Worker {
   worker_id: string;
   queues: string;
+  /** Unix milliseconds. */
   last_heartbeat: number;
+  /** Unix milliseconds. */
   registered_at: number;
   tags: string | null;
 }
@@ -134,6 +150,7 @@ export interface CircuitBreaker {
   threshold: number;
   window_ms: number;
   cooldown_ms: number;
+  /** Unix milliseconds; null if no failures yet. */
   last_failure_at: number | null;
 }
 
diff --git a/dashboard/src/lib/errors.test.ts b/dashboard/src/lib/errors.test.ts
new file mode 100644
index 0000000..822742f
--- /dev/null
+++ b/dashboard/src/lib/errors.test.ts
@@ -0,0 +1,68 @@
+import { describe, expect, it } from "vitest";
+import { ApiError } from "./api-client";
+import { isBackendUnreachable, isNetworkError, isServerUnavailable } from "./errors";
+
+describe("isNetworkError", () => {
+  it("matches Chrome's 'Failed to fetch'", () => {
+    expect(isNetworkError(new TypeError("Failed to fetch"))).toBe(true);
+  });
+
+  it("matches Firefox's 'NetworkError when attempting to fetch resource'", () => {
+    expect(isNetworkError(new TypeError("NetworkError when attempting to fetch resource."))).toBe(
+      true,
+    );
+  });
+
+  it("matches Safari's 'Load failed'", () => {
+    expect(isNetworkError(new TypeError("Load failed"))).toBe(true);
+  });
+
+  it("rejects unrelated TypeErrors", () => {
+    expect(isNetworkError(new TypeError("Cannot read property 'foo' of undefined"))).toBe(false);
+  });
+
+  it("rejects non-Error inputs", () => {
+    expect(isNetworkError(null)).toBe(false);
+    expect(isNetworkError(undefined)).toBe(false);
+    expect(isNetworkError("Failed to fetch")).toBe(false);
+    expect(isNetworkError(new Error("Failed to fetch"))).toBe(false);
+  });
+});
+
+describe("isServerUnavailable", () => {
+  it("returns true for 502/503/504 ApiErrors", () => {
+    expect(isServerUnavailable(new ApiError("bad gateway", 502, null))).toBe(true);
+    expect(isServerUnavailable(new ApiError("unavailable", 503, null))).toBe(true);
+    expect(isServerUnavailable(new ApiError("timeout", 504, null))).toBe(true);
+  });
+
+  it("returns false for other ApiError statuses", () => {
+    expect(isServerUnavailable(new ApiError("not found", 404, null))).toBe(false);
+    expect(isServerUnavailable(new ApiError("server error", 500, null))).toBe(false);
+    expect(isServerUnavailable(new ApiError("teapot", 418, null))).toBe(false);
+  });
+
+  it("returns false for non-ApiError inputs", () => {
+    expect(isServerUnavailable(new Error("oops"))).toBe(false);
+    expect(isServerUnavailable(new TypeError("Failed to fetch"))).toBe(false);
+    expect(isServerUnavailable(null)).toBe(false);
+  });
+});
+
+describe("isBackendUnreachable", () => {
+  it("is true for network errors", () => {
+    expect(isBackendUnreachable(new TypeError("Failed to fetch"))).toBe(true);
+  });
+
+  it("is true for 503 ApiErrors", () => {
+    expect(isBackendUnreachable(new ApiError("down", 503, null))).toBe(true);
+  });
+
+  it("is false for 4xx ApiErrors", () => {
+    expect(isBackendUnreachable(new ApiError("forbidden", 403, null))).toBe(false);
+  });
+
+  it("is false for plain errors", () => {
+    expect(isBackendUnreachable(new Error("some other failure"))).toBe(false);
+  });
+});
diff --git a/dashboard/src/lib/site.ts b/dashboard/src/lib/site.ts
index cf75717..2e305a3 100644
--- a/dashboard/src/lib/site.ts
+++ b/dashboard/src/lib/site.ts
@@ -1,6 +1,3 @@
 export const site = {
   name: "Taskito",
-  shortName: "Taskito",
-  docsUrl: "https://byteveda.github.io/taskito",
-  repoUrl: "https://github.com/ByteVeda/taskito",
 } as const;
diff --git a/dashboard/src/lib/status.ts b/dashboard/src/lib/status.ts
index 5d3d964..fa308f4 100644
--- a/dashboard/src/lib/status.ts
+++ b/dashboard/src/lib/status.ts
@@ -45,3 +45,17 @@ export function resourceTone(health: string): Tone {
   if (key === "unhealthy") return "danger";
   return "neutral";
 }
+
+const LOG_LEVEL_CLASS: Record<string, string> = {
+  error: "text-danger",
+  warning: "text-warning",
+  warn: "text-warning",
+  info: "text-info",
+  debug: "text-[var(--fg-subtle)]",
+};
+
+const LOG_LEVEL_FALLBACK = "text-[var(--fg-muted)]";
+
+export function logLevelClass(level: string): string {
+  return LOG_LEVEL_CLASS[level.toLowerCase()] ?? LOG_LEVEL_FALLBACK;
+}
diff --git a/dashboard/src/routes/dead-letters.tsx b/dashboard/src/routes/dead-letters.tsx
index d8cfba0..f0a218a 100644
--- a/dashboard/src/routes/dead-letters.tsx
+++ b/dashboard/src/routes/dead-letters.tsx
@@ -13,16 +13,38 @@ import {
 import { cn } from "@/lib/cn";
 
 const PAGE_SIZE = 25;
+const DEAD_LETTER_VIEWS: readonly DeadLetterView[] = ["grouped", "flat"];
+
+interface DeadLetterSearch {
+  page: number;
+  view: DeadLetterView;
+}
+
+function parseDeadLetterSearch(raw: Record<string, unknown>): DeadLetterSearch {
+  const pageRaw = Number(raw.page);
+  const page = Number.isFinite(pageRaw) && pageRaw >= 0 ? Math.floor(pageRaw) : 0;
+  const view = DEAD_LETTER_VIEWS.find((v) => v === raw.view) ?? "grouped";
+  return { page, view };
+}
 
 export const Route = createFileRoute("/dead-letters")({
-  loader: ({ context: { queryClient } }) =>
-    queryClient.ensureQueryData(deadLettersQuery(0, PAGE_SIZE)),
+  validateSearch: parseDeadLetterSearch,
+  loaderDeps: ({ search }) => ({ page: search.page }),
+  loader: ({ context: { queryClient }, deps: { page } }) =>
+    queryClient.ensureQueryData(deadLettersQuery(page, PAGE_SIZE)),
   component: DeadLettersPage,
 });
 
 function DeadLettersPage() {
-  const [page, setPage] = useState(0);
-  const [view, setView] = useState<DeadLetterView>("grouped");
+  const { page, view } = Route.useSearch();
+  const navigate = Route.useNavigate();
+  const setPage = (next: number) => {
+    navigate({ search: (prev) => ({ ...prev, page: next }) });
+  };
+  const setView = (next: DeadLetterView) => {
+    navigate({ search: (prev) => ({ ...prev, view: next, page: 0 }), replace: true });
+  };
+
   const [confirmPurge, setConfirmPurge] = useState(false);
 
   const query = useDeadLetters(page, PAGE_SIZE);