admin/errors: fix detail dialog overflow + stable-sort Live tables

Two admin-console UI fixes:

1. Error detail dialog overflowed its width on long, unbreakable content
   (e.g. an S3 URL in a DeltaKernel error). DialogContent is a CSS grid, so the
   message/query <pre> got min-width:auto and pushed the whole modal past
   max-w-2xl. Add min-w-0 to the content grid-item so it can shrink, plus
   w-full + break-words on the <pre> blocks so long tokens wrap instead of
   blowing out the layout.

2. Live tables flickered on every 3s poll because the API returns rows in
   non-deterministic order (per-org map iteration + cross-CP merge). Sort
   client-side with a deterministic total order: running queries by start time
   (oldest first, so long-lived/stuck sessions stay pinned on top), sessions by
   cluster-unique worker id (they carry no start time). Pure comparators in
   lib/liveSort.ts with unit tests.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NUq2EVxvKQFq3YEDNLF5HP

Author: fuziontech

controlplane/admin/ui/src/lib/liveSort.test.ts

@@ -0,0 +1,50 @@
+import { describe, expect, it } from "vitest";
+import { compareByStarted, compareByWorker } from "./liveSort";
+
+describe("compareByStarted", () => {
+  it("orders oldest start first", () => {
+    const rows = [
+      { started_at: "2026-07-01T10:00:02Z", worker_id: 2 },
+      { started_at: "2026-07-01T10:00:01Z", worker_id: 1 },
+      { started_at: "2026-07-01T10:00:03Z", worker_id: 3 },
+    ];
+    expect([...rows].sort(compareByStarted).map((r) => r.worker_id)).toEqual([1, 2, 3]);
+  });
+
+  it("is stable across reshuffled input (kills flicker)", () => {
+    const a = { started_at: "2026-07-01T10:00:01Z", worker_id: 5 };
+    const b = { started_at: "2026-07-01T10:00:02Z", worker_id: 9 };
+    const c = { started_at: "2026-07-01T10:00:03Z", worker_id: 1 };
+    // Any input permutation yields the same output order.
+    const want = [5, 9, 1];
+    expect([a, b, c].sort(compareByStarted).map((r) => r.worker_id)).toEqual(want);
+    expect([c, a, b].sort(compareByStarted).map((r) => r.worker_id)).toEqual(want);
+    expect([b, c, a].sort(compareByStarted).map((r) => r.worker_id)).toEqual(want);
+  });
+
+  it("breaks ties on worker id so equal timestamps never reorder", () => {
+    const t = "2026-07-01T10:00:00Z";
+    const rows = [
+      { started_at: t, worker_id: 30 },
+      { started_at: t, worker_id: 10 },
+      { started_at: t, worker_id: 20 },
+    ];
+    expect([...rows].sort(compareByStarted).map((r) => r.worker_id)).toEqual([10, 20, 30]);
+  });
+
+  it("sorts missing timestamps last (still deterministic)", () => {
+    const rows = [
+      { worker_id: 7 },
+      { started_at: "2026-07-01T10:00:01Z", worker_id: 2 },
+      { worker_id: 3 },
+    ];
+    expect([...rows].sort(compareByStarted).map((r) => r.worker_id)).toEqual([2, 3, 7]);
+  });
+});
+
+describe("compareByWorker", () => {
+  it("orders by cluster-unique worker id", () => {
+    const rows = [{ worker_id: 30 }, { worker_id: 10 }, { worker_id: 20 }];
+    expect([...rows].sort(compareByWorker).map((r) => r.worker_id)).toEqual([10, 20, 30]);
+  });
+});

controlplane/admin/ui/src/lib/liveSort.ts

@@ -0,0 +1,37 @@
+// Pure, stable ordering for the Live tables. The API returns rows in
+// non-deterministic order (per-org map iteration + the cross-CP merge), so every
+// 3s poll reshuffles them and the tables flicker. A deterministic client-side
+// sort with a cluster-unique tiebreaker (worker id) pins row order across
+// refreshes — the same rows stay put, only genuinely new/gone rows move.
+
+export interface StartedRow {
+  started_at?: string;
+  worker_id: number;
+}
+
+export interface WorkerRow {
+  worker_id: number;
+}
+
+// compareByStarted orders by session start time, OLDEST first — long-lived
+// sessions stay pinned at the top (where an operator watching for stuck/runaway
+// sessions wants them) and a brand-new row appends at the bottom rather than
+// shoving everything down. worker id is the tiebreaker so equal-or-missing
+// timestamps never reorder between polls. Timestamps are UTC RFC3339, so a
+// lexicographic compare is chronological; missing timestamps sort last.
+export function compareByStarted(a: StartedRow, b: StartedRow): number {
+  const as = a.started_at || "";
+  const bs = b.started_at || "";
+  if (as !== bs) {
+    if (!as) return 1;
+    if (!bs) return -1;
+    return as < bs ? -1 : 1;
+  }
+  return a.worker_id - b.worker_id;
+}
+
+// compareByWorker is the stable ordering for rows with no start time (sessions):
+// the cluster-unique worker id alone is a total order, enough to stop flicker.
+export function compareByWorker(a: WorkerRow, b: WorkerRow): number {
+  return a.worker_id - b.worker_id;
+}

controlplane/admin/ui/src/pages/Errors.tsx

@@ -86,7 +86,7 @@ function ErrorDetailDialog({ error, onClose }: { error: ErrorEntry | null; onClo
           <DialogDescription>Redacted snapshot of one failed query captured on the owning control plane.</DialogDescription>
         </DialogHeader>
         {error && (
-          <div className="space-y-4">
+          <div className="min-w-0 space-y-4">
             <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
               <Field label="Time" value={fmtTime(error.time)} mono />
               <Field label="Org" value={error.org} mono />
@@ -99,13 +99,13 @@ function ErrorDetailDialog({ error, onClose }: { error: ErrorEntry | null; onClo
             </div>
             <div>
               <span className="text-[10px] uppercase tracking-wide text-muted-foreground">Message</span>
-              <pre className="mt-1 max-h-40 overflow-auto whitespace-pre-wrap rounded-md bg-muted p-3 text-xs text-destructive">
+              <pre className="mt-1 max-h-40 w-full overflow-auto whitespace-pre-wrap break-words rounded-md bg-muted p-3 text-xs text-destructive">
                 {error.message || "—"}
               </pre>
             </div>
             <div>
               <span className="text-[10px] uppercase tracking-wide text-muted-foreground">Query (redacted)</span>
-              <pre className="mt-1 max-h-56 overflow-auto whitespace-pre-wrap rounded-md bg-muted p-3 font-mono text-xs">
+              <pre className="mt-1 max-h-56 w-full overflow-auto whitespace-pre-wrap break-words rounded-md bg-muted p-3 font-mono text-xs">
                 {error.query || "—"}
               </pre>
             </div>

controlplane/admin/ui/src/pages/Live.tsx

@@ -21,6 +21,7 @@ import {
 import { useCancelSession, useKillUserSessions, useQueries, useSessions } from "@/hooks/useApi";
 import { fmtAge, fmtDurationMs, fmtInt, fmtTime } from "@/lib/format";
 import { idleInTransaction, isIdleSession, sessionStateLabel } from "@/lib/session";
+import { compareByStarted, compareByWorker } from "@/lib/liveSort";
 import { QueryDetailDialog } from "@/components/QueryDetailDialog";
 
 export function Live() {
@@ -39,13 +40,16 @@ export function Live() {
   const matchOrg = (o?: string) => !org || (o ?? "").toLowerCase().includes(org.toLowerCase());
   const matchUser = (u?: string) => !user || (u ?? "").toLowerCase().includes(user.toLowerCase());
 
+  // Sort deterministically so the tables don't reshuffle on every 3s poll (the
+  // API returns rows in non-deterministic order). Queries by start time (oldest
+  // first); sessions by worker id (they carry no start time).
   const liveQueries = useMemo(
-    () => (queries.data ?? []).filter((q) => matchOrg(q.org) && matchUser(q.user)),
+    () => (queries.data ?? []).filter((q) => matchOrg(q.org) && matchUser(q.user)).sort(compareByStarted),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [queries.data, org, user],
   );
   const liveSessions = useMemo(
-    () => (sessions.data ?? []).filter((s) => matchOrg(s.org) && matchUser(s.user)),
+    () => (sessions.data ?? []).filter((s) => matchOrg(s.org) && matchUser(s.user)).sort(compareByWorker),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [sessions.data, org, user],
   );