@k2b/cloud 0.11.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/cloud",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Application platform library for independently deployed Hono and SolidJS services behind a dynamic gateway.",
   "license": "AGPL-3.0-or-later",
   "repository": {
@@ -31,6 +31,7 @@
     "./browser": "./src/server/api-client.ts",
     "./browser/app-approval": "./src/browser/app-approval.ts",
     "./browser/live": "./src/browser/live-websocket.ts",
+    "./browser/mermaid": "./src/browser/mermaid.ts",
     "./browser/notifications": "./src/browser/notifications.ts",
     "./browser/resource-clipboard": "./src/browser/resource-clipboard.ts",
     "./browser/commands": "./src/browser/commands.ts",
@@ -84,8 +85,7 @@
     "./styles/global.css": "./src/styles/global.css"
   },
   "scripts": {
-    "test": "bun test --isolate --path-ignore-patterns '**/*.behavior.test.tsx' --path-ignore-patterns '**/*.dom.test.tsx' && bun run test:dom",
-    "test:dom": "bun test --isolate --conditions=browser --preload ../ui/test/solid-dom-preload.ts behavior.test.tsx dom.test.tsx",
+    "test": "bun test --isolate --path-ignore-patterns '**/*.behavior.test.*'",
     "typecheck": "tsc -p tsconfig.json --noEmit --pretty false"
   },
   "dependencies": {
@@ -98,7 +98,7 @@
     "@tailwindcss/typography": "0.5.20",
     "@k2b/nessi": "0.12.1",
     "@k2b/ssr": "0.14.0",
-    "@k2b/ui": "0.5.0",
+    "@k2b/ui": "0.5.1",
     "@k2b/stdlib": "0.25.0",
     "@k2b/sync": "6.5.0",
     "@nats-io/transport-node": "3.4.0",
@@ -109,7 +109,7 @@
     "katex": "0.18.7",
     "liquidjs": "10.29.0",
     "marked": "17.0.6",
-    "mermaid": "11.16.0",
+    "mermaid": "12.0.0",
     "nodemailer": "10.0.10",
     "postcss": "8.5.28",
     "reflect-metadata": "0.2.2",

package/src/ai/store.ts

@@ -1095,10 +1095,10 @@ export const aiConversations: AiConversationService = {
     const refs = input.refs ?? [];
     const rows = await withConversationSearchBackend(query, async (backend) => {
       const order = query
-        ? sql`${conversationSearchRank(backend, query)} DESC, conversation.pinned_at DESC NULLS LAST, conversation.updated_at DESC, conversation.created_at DESC`
+        ? sql`${conversationSearchRank(backend, query)} DESC, conversation.pinned_at DESC NULLS LAST, conversation.updated_at DESC, conversation.created_at DESC, conversation.id DESC`
         : input.done === true
           ? sql`conversation.last_used_at DESC, conversation.id DESC`
-          : sql`conversation.pinned_at DESC NULLS LAST, conversation.updated_at DESC, conversation.created_at DESC`;
+          : sql`conversation.pinned_at DESC NULLS LAST, conversation.updated_at DESC, conversation.created_at DESC, conversation.id DESC`;
       return sql<ConversationRow[]>`
       SELECT
         conversation.*,
@@ -1198,10 +1198,10 @@ export const aiConversations: AiConversationService = {
     const { page, perPage, offset } = sanitizePagination(input);
     const rows = await withConversationSearchBackend(query, async (backend) => {
       const order = query
-        ? sql`${conversationSearchRank(backend, query)} DESC, conversation.pinned_at DESC NULLS LAST, conversation.updated_at DESC, conversation.created_at DESC`
+        ? sql`${conversationSearchRank(backend, query)} DESC, conversation.pinned_at DESC NULLS LAST, conversation.updated_at DESC, conversation.created_at DESC, conversation.id DESC`
         : input.done === true
           ? sql`conversation.last_used_at DESC, conversation.id DESC`
-          : sql`conversation.pinned_at DESC NULLS LAST, conversation.updated_at DESC, conversation.created_at DESC`;
+          : sql`conversation.pinned_at DESC NULLS LAST, conversation.updated_at DESC, conversation.created_at DESC, conversation.id DESC`;
       return sql<ConversationRow[]>`
       SELECT
         conversation.*,

package/src/browser/live-websocket.ts

@@ -52,6 +52,16 @@ const DEFAULT_RECONNECT = {
   jitterMs: 250,
 } as const;
 
+/**
+ * Deadline for one opening handshake. The handshake is a single HTTP upgrade
+ * round trip (the gateway accepts it before reaching the application), so a
+ * healthy attempt finishes far sooner. Browsers can otherwise leave a socket in
+ * `CONNECTING` indefinitely after sleep or a network change. Matching the
+ * longest default reconnect delay means a stalled attempt never blocks recovery
+ * for longer than an ordinary retry.
+ */
+const CONNECT_TIMEOUT_MS = DEFAULT_RECONNECT.maxDelayMs;
+
 const defaultCloseError = ({ code, reason }: LiveWebSocketClose): LiveWebSocketError | null => {
   if (code === 1008) return { code: reason || "access_denied", message: "Live access changed or expired." };
   if (code === 1011) return { code: reason || "internal_error", message: "Live updates failed." };
@@ -72,7 +82,8 @@ const socketUrl = (raw: string): string => {
  *
  * The app owns its wire protocol, validation, permissions, and domain updates.
  * This helper owns only browser transport lifecycle: one socket, visibility,
- * reconnect backoff, applied-cursor resume, terminal closes, and disposal.
+ * reconnect backoff, connection deadlines, recovery when the tab or network
+ * returns, applied-cursor resume, terminal closes, and disposal.
  */
 export const createLiveWebSocket = <TMessage>(options: LiveWebSocketOptions<TMessage>): LiveWebSocket => {
   const activity = options.activity ?? "visible";
@@ -81,6 +92,8 @@ export const createLiveWebSocket = <TMessage>(options: LiveWebSocketOptions<TMes
 
   let socket: WebSocket | null = null;
   let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+  let connectTimer: ReturnType<typeof setTimeout> | null = null;
+  let connectStartedAt = 0;
   let reconnectAttempt = 0;
   let lastAppliedCursor = options.initialCursor ?? null;
   let started = false;
@@ -120,9 +133,15 @@ export const createLiveWebSocket = <TMessage>(options: LiveWebSocketOptions<TMes
     }
   };
 
+  const clearConnectDeadline = () => {
+    if (connectTimer !== null) clearTimeout(connectTimer);
+    connectTimer = null;
+  };
+
   const closeSocket = (code = 1000, reason = "") => {
     const current = socket;
     socket = null;
+    clearConnectDeadline();
     if (!current || current.readyState > WebSocket.OPEN) return;
     try {
       current.close(code, reason);
@@ -135,6 +154,7 @@ export const createLiveWebSocket = <TMessage>(options: LiveWebSocketOptions<TMes
     if (terminated) return;
     terminated = true;
     clearReconnect();
+    detachRecovery();
     closeSocket(close.code, close.reason);
     setStatus("closed");
     if (!fatalSent) {
@@ -165,6 +185,13 @@ export const createLiveWebSocket = <TMessage>(options: LiveWebSocketOptions<TMes
     }, delay);
   };
 
+  /** Gives up on an attempt that is still connecting and schedules a retry. */
+  const abandonAttempt = (attempt: WebSocket) => {
+    if (socket !== attempt) return;
+    closeSocket();
+    scheduleReconnect();
+  };
+
   const openSocket = () => {
     if (disposed || terminated || !started || socket) return;
     if (!browserAvailable()) {
@@ -174,7 +201,7 @@ export const createLiveWebSocket = <TMessage>(options: LiveWebSocketOptions<TMes
     if (!isActive()) return;
 
     let next: WebSocket;
-    setStatus(reconnectAttempt > 0 ? "reconnecting" : "connecting");
+    setStatus(reconnectAttempt > 0 || status === "reconnecting" ? "reconnecting" : "connecting");
     try {
       next = new WebSocket(socketUrl(typeof options.url === "function" ? options.url() : options.url));
     } catch (error) {
@@ -182,9 +209,15 @@ export const createLiveWebSocket = <TMessage>(options: LiveWebSocketOptions<TMes
       return;
     }
     socket = next;
+    connectStartedAt = Date.now();
+    connectTimer = setTimeout(() => {
+      connectTimer = null;
+      if (next.readyState === WebSocket.CONNECTING) abandonAttempt(next);
+    }, CONNECT_TIMEOUT_MS);
 
     next.onopen = () => {
       if (socket !== next || disposed || terminated) return;
+      clearConnectDeadline();
       try {
         if (!send(options.subscribe(lastAppliedCursor))) throw new Error("Live WebSocket subscription could not be sent");
         setStatus("open");
@@ -213,6 +246,7 @@ export const createLiveWebSocket = <TMessage>(options: LiveWebSocketOptions<TMes
     next.onclose = (event) => {
       if (socket !== next) return;
       socket = null;
+      clearConnectDeadline();
       if (disposed || terminated) return;
       const closeError = classifyClose({ code: event.code, reason: event.reason.trim() });
       if (closeError) fatal(closeError, { code: event.code, reason: event.reason });
@@ -224,22 +258,55 @@ export const createLiveWebSocket = <TMessage>(options: LiveWebSocketOptions<TMes
         next.close();
       } catch {
         if (socket === next) {
-          socket = null;
+          closeSocket();
           scheduleReconnect();
         }
       }
     };
   };
 
-  const syncVisibility = () => {
-    if (isActive()) openSocket();
-    else {
+  /**
+   * Reconnects now when the tab or network returns. Open and closing sockets
+   * are left alone; a closing socket's close event still decides between retry
+   * and a terminal error. A handshake within its deadline is kept unless the
+   * network just returned, because it began on the network that was gone. A
+   * stalled handshake or a pending backoff is replaced by an immediate attempt
+   * whose backoff starts over.
+   */
+  const recover = (event: Event) => {
+    if (disposed || terminated || !started || !isActive()) return;
+    if (socket) {
+      if (socket.readyState !== WebSocket.CONNECTING) return;
+      if (event.type !== "online" && Date.now() - connectStartedAt < CONNECT_TIMEOUT_MS) return;
+      closeSocket();
+    }
+    clearReconnect();
+    reconnectAttempt = 0;
+    openSocket();
+  };
+
+  const syncVisibility = (event: Event) => {
+    if (isActive()) recover(event);
+    else if (activity === "visible") {
       clearReconnect();
       closeSocket(1000, "inactive");
       setStatus("paused");
     }
   };
 
+  const attachRecovery = () => {
+    document.addEventListener("visibilitychange", syncVisibility);
+    window.addEventListener("online", recover);
+    window.addEventListener("focus", recover);
+  };
+
+  const detachRecovery = () => {
+    if (!started || !browserAvailable()) return;
+    document.removeEventListener("visibilitychange", syncVisibility);
+    window.removeEventListener("online", recover);
+    window.removeEventListener("focus", recover);
+  };
+
   return {
     connect: () => {
       if (started || disposed || terminated) return;
@@ -248,7 +315,7 @@ export const createLiveWebSocket = <TMessage>(options: LiveWebSocketOptions<TMes
         fatal({ code: "unsupported", message: "Live WebSockets are not available in this browser" });
         return;
       }
-      if (activity === "visible") document.addEventListener("visibilitychange", syncVisibility);
+      attachRecovery();
       openSocket();
     },
     markApplied,
@@ -258,9 +325,7 @@ export const createLiveWebSocket = <TMessage>(options: LiveWebSocketOptions<TMes
       if (disposed) return;
       disposed = true;
       clearReconnect();
-      if (activity === "visible" && typeof document !== "undefined") {
-        document.removeEventListener("visibilitychange", syncVisibility);
-      }
+      detachRecovery();
       closeSocket();
       setStatus("closed");
     },

package/src/browser/mermaid.ts

@@ -0,0 +1,202 @@
+import type { MermaidConfig } from "mermaid";
+
+/** Series colors shared by pie slices and mindmap branches. */
+const lightSeries = [
+  "#dbeafe",
+  "#d1fae5",
+  "#fef3c7",
+  "#ede9fe",
+  "#ffe4e6",
+  "#cffafe",
+  "#ecfccb",
+  "#ffedd4",
+  "#e0f2fe",
+  "#ccfbf1",
+  "#fae8ff",
+  "#fef9c3",
+];
+const darkSeries = [
+  "#1e3a8a",
+  "#065f46",
+  "#78350f",
+  "#4c1d95",
+  "#881337",
+  "#155e75",
+  "#3f6212",
+  "#7c2d12",
+  "#075985",
+  "#115e59",
+  "#86198f",
+  "#713f12",
+];
+
+// Mermaid derives colors from hex values, so these mirror the Cloud tokens
+// (zinc ink, --ui-surface*, --ui-border*) instead of reading CSS variables.
+const light = {
+  darkMode: false,
+  background: "#ffffff",
+  textColor: "#27272a",
+  titleColor: "#18181b",
+  lineColor: "#71717a",
+  primaryColor: "#f4f4f5",
+  primaryTextColor: "#18181b",
+  primaryBorderColor: "#a1a1aa",
+  secondaryColor: "#eff6ff",
+  secondaryTextColor: "#18181b",
+  secondaryBorderColor: "#93c5fd",
+  tertiaryColor: "#fafafa",
+  tertiaryTextColor: "#18181b",
+  tertiaryBorderColor: "#d4d4d8",
+  mainBkg: "#f4f4f5",
+  nodeBorder: "#a1a1aa",
+  clusterBkg: "#fafafa",
+  clusterBorder: "#d4d4d8",
+  edgeLabelBackground: "#ffffff",
+  noteBkgColor: "#fefce8",
+  noteBorderColor: "#eab308",
+  noteTextColor: "#27272a",
+  actorBkg: "#f4f4f5",
+  actorBorder: "#a1a1aa",
+  actorTextColor: "#18181b",
+  signalColor: "#52525b",
+  signalTextColor: "#27272a",
+  labelBoxBkgColor: "#f4f4f5",
+  labelBoxBorderColor: "#a1a1aa",
+  activationBkgColor: "#e4e4e7",
+  activationBorderColor: "#a1a1aa",
+  attributeBackgroundColorOdd: "#ffffff",
+  attributeBackgroundColorEven: "#fafafa",
+  sectionBkgColor: "#f4f4f5",
+  altSectionBkgColor: "#ffffff",
+  sectionBkgColor2: "#fafafa",
+  gridColor: "#e4e4e7",
+  taskBkgColor: "#dbeafe",
+  taskBorderColor: "#3b82f6",
+  taskTextColor: "#18181b",
+  taskTextLightColor: "#18181b",
+  taskTextDarkColor: "#18181b",
+  taskTextOutsideColor: "#27272a",
+  activeTaskBkgColor: "#bfdbfe",
+  activeTaskBorderColor: "#2563eb",
+  doneTaskBkgColor: "#e4e4e7",
+  doneTaskBorderColor: "#a1a1aa",
+  critBkgColor: "#ffe4e6",
+  critBorderColor: "#e11d48",
+  todayLineColor: "#e11d48",
+  pieStrokeColor: "#ffffff",
+  pieOuterStrokeColor: "#d4d4d8",
+  pieSectionTextColor: "#18181b",
+  pieTitleTextColor: "#18181b",
+  pieLegendTextColor: "#27272a",
+  series: lightSeries,
+  seriesText: "#18181b",
+};
+
+const dark: typeof light = {
+  darkMode: true,
+  background: "#11151b",
+  textColor: "#e4e4e7",
+  titleColor: "#f4f4f5",
+  lineColor: "#a1a1aa",
+  primaryColor: "#20242a",
+  primaryTextColor: "#f4f4f5",
+  primaryBorderColor: "#5b6573",
+  secondaryColor: "#172554",
+  secondaryTextColor: "#f4f4f5",
+  secondaryBorderColor: "#3b82f6",
+  tertiaryColor: "#181d24",
+  tertiaryTextColor: "#f4f4f5",
+  tertiaryBorderColor: "#3a4552",
+  mainBkg: "#20242a",
+  nodeBorder: "#5b6573",
+  clusterBkg: "#181d24",
+  clusterBorder: "#3a4552",
+  edgeLabelBackground: "#11151b",
+  noteBkgColor: "#422006",
+  noteBorderColor: "#a16207",
+  noteTextColor: "#fef9c3",
+  actorBkg: "#20242a",
+  actorBorder: "#5b6573",
+  actorTextColor: "#f4f4f5",
+  signalColor: "#a1a1aa",
+  signalTextColor: "#e4e4e7",
+  labelBoxBkgColor: "#20242a",
+  labelBoxBorderColor: "#5b6573",
+  activationBkgColor: "#29313a",
+  activationBorderColor: "#5b6573",
+  attributeBackgroundColorOdd: "#181d24",
+  attributeBackgroundColorEven: "#20242a",
+  sectionBkgColor: "#181d24",
+  altSectionBkgColor: "#11151b",
+  sectionBkgColor2: "#1c2129",
+  gridColor: "#29313a",
+  taskBkgColor: "#1e3a8a",
+  taskBorderColor: "#60a5fa",
+  taskTextColor: "#f4f4f5",
+  taskTextLightColor: "#f4f4f5",
+  taskTextDarkColor: "#f4f4f5",
+  taskTextOutsideColor: "#e4e4e7",
+  activeTaskBkgColor: "#1e40af",
+  activeTaskBorderColor: "#93c5fd",
+  doneTaskBkgColor: "#3f3f46",
+  doneTaskBorderColor: "#71717a",
+  critBkgColor: "#881337",
+  critBorderColor: "#fb7185",
+  todayLineColor: "#fb7185",
+  pieStrokeColor: "#11151b",
+  pieOuterStrokeColor: "#3a4552",
+  pieSectionTextColor: "#f4f4f5",
+  pieTitleTextColor: "#f4f4f5",
+  pieLegendTextColor: "#e4e4e7",
+  series: darkSeries,
+  seriesText: "#f4f4f5",
+};
+
+/**
+ * Mermaid configuration that follows Cloud's light or dark tokens.
+ *
+ * Diagrams keep Mermaid 11's flat look and layouts; an author may still
+ * choose `layout: elk` in front matter, which loads ELK on demand. Author
+ * directives cannot change security, theme, or CSS.
+ */
+export function mermaidConfig(options: { dark: boolean }): MermaidConfig {
+  const { series, seriesText, ...palette } = options.dark ? dark : light;
+  const themeVariables: Record<string, string | boolean> = {
+    ...palette,
+    fontFamily: '"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif',
+  };
+  series.forEach((color, index) => {
+    themeVariables[`pie${index + 1}`] = color;
+    themeVariables[`cScale${index}`] = color;
+    themeVariables[`cScaleLabel${index}`] = seriesText;
+  });
+  return {
+    startOnLoad: false,
+    securityLevel: "strict",
+    suppressErrorRendering: true,
+    theme: "base",
+    look: "classic",
+    // Mermaid 12 lays these types out with ELK by default. Keep dagre so ELK
+    // loads only for diagrams whose front matter asks for `layout: elk`.
+    flowchart: { layout: "dagre" },
+    class: { layout: "dagre" },
+    state: { layout: "dagre" },
+    er: { layout: "dagre" },
+    requirement: { layout: "dagre" },
+    themeVariables,
+    secure: [
+      "secure",
+      "securityLevel",
+      "startOnLoad",
+      "maxTextSize",
+      "maxEdges",
+      "suppressErrorRendering",
+      "htmlLabels",
+      "themeCSS",
+      "themeVariables",
+      "theme",
+      "fontFamily",
+      "altFontFamily",
+    ],
+  };
+}

package/src/services/account-lifecycle/index.ts

@@ -831,7 +831,7 @@ export const accountLifecycle = {
           OR LOWER(COALESCE(display_name, '')) LIKE ${pattern} ESCAPE '\\'
           OR LOWER(COALESCE(mail, '')) LIKE ${pattern} ESCAPE '\\'
         )
-      ORDER BY deleted_at DESC
+      ORDER BY deleted_at DESC, id DESC
       LIMIT ${config.perPage}
       OFFSET ${offset}
     `;
@@ -905,7 +905,7 @@ export const accountLifecycle = {
           OR LOWER(COALESCE(r.mail, u.mail, '')) LIKE ${pattern} ESCAPE '\\'
           OR LOWER(COALESCE(r.display_name, u.display_name, '')) LIKE ${pattern} ESCAPE '\\'
         )
-      ORDER BY r.created_at DESC
+      ORDER BY r.created_at DESC, r.id DESC
       LIMIT ${config.perPage}
       OFFSET ${offset}
     `;

package/src/services/accounts/app.ts

@@ -1261,7 +1261,7 @@ export const accountsAppService = {
         FROM auth.account_requests r
         JOIN auth.users u ON u.id = r.user_id
         WHERE ${where}
-        ORDER BY r.created_at DESC
+        ORDER BY r.created_at DESC, r.id DESC
         LIMIT ${perPage}
         OFFSET ${offset}
       `;

package/src/services/logging/index.ts

@@ -205,7 +205,7 @@ const list = async (
         AND (${filterLevel}::text IS NULL OR level = ${filterLevel})
         AND (${filterSinceHours}::int IS NULL OR created_at >= now() - (${filterSinceHours}::int * INTERVAL '1 hour'))
         AND (${searchPattern}::text IS NULL OR message ILIKE ${searchPattern} ESCAPE '\\' OR metadata::text ILIKE ${searchPattern} ESCAPE '\\')
-      ORDER BY created_at DESC
+      ORDER BY created_at DESC, id DESC
       LIMIT ${perPage} OFFSET ${offset}
     `;
   } else if (hasSourceList) {
@@ -225,7 +225,7 @@ const list = async (
         AND (${filterLevel}::text IS NULL OR level = ${filterLevel})
         AND (${filterSinceHours}::int IS NULL OR created_at >= now() - (${filterSinceHours}::int * INTERVAL '1 hour'))
         AND (${searchPattern}::text IS NULL OR message ILIKE ${searchPattern} ESCAPE '\\' OR metadata::text ILIKE ${searchPattern} ESCAPE '\\')
-      ORDER BY created_at DESC
+      ORDER BY created_at DESC, id DESC
       LIMIT ${perPage} OFFSET ${offset}
     `;
   } else {
@@ -243,7 +243,7 @@ const list = async (
       WHERE (${filterLevel}::text IS NULL OR level = ${filterLevel})
         AND (${filterSinceHours}::int IS NULL OR created_at >= now() - (${filterSinceHours}::int * INTERVAL '1 hour'))
         AND (${searchPattern}::text IS NULL OR message ILIKE ${searchPattern} ESCAPE '\\' OR metadata::text ILIKE ${searchPattern} ESCAPE '\\')
-      ORDER BY created_at DESC
+      ORDER BY created_at DESC, id DESC
       LIMIT ${perPage} OFFSET ${offset}
     `;
   }

package/src/services/logging/trace.ts

@@ -789,7 +789,7 @@ const list = async (
         ) AS event_count
       FROM logging.trace_spans s
       WHERE ${where}
-      ORDER BY COALESCE(s.ended_at, s.updated_at, s.started_at) DESC
+      ORDER BY COALESCE(s.ended_at, s.updated_at, s.started_at) DESC, s.trace_id DESC, s.span_id DESC
       LIMIT ${perPage} OFFSET ${offset}
     `,
   ]);

package/src/services/notifications/batches.ts

@@ -460,7 +460,7 @@ export const list = async (params?: {
     SELECT *, COUNT(*) OVER() AS total
     FROM notifications.batches
     WHERE (${params?.status ?? null}::text IS NULL OR status = ${params?.status ?? null})
-    ORDER BY created_at DESC
+    ORDER BY created_at DESC, id DESC
     LIMIT ${perPage} OFFSET ${offset}
   `;
   return {

package/src/services/notifications/index.ts

@@ -235,7 +235,7 @@ export const list = async (
         WHERE
           (${statusFilter}::text IS NULL OR CASE WHEN m.sent_at IS NOT NULL THEN 'sent' WHEN m.error IS NOT NULL THEN 'error' ELSE 'pending' END = ${statusFilter})
           AND (m.subject ILIKE ${searchPattern} ESCAPE '\' OR m.content ILIKE ${searchPattern} ESCAPE '\' OR m.recipient ILIKE ${searchPattern} ESCAPE '\')
-        ORDER BY m.created_at DESC
+        ORDER BY m.created_at DESC, m.id DESC
         LIMIT ${perPage} OFFSET ${offset}
       `;
     } else {
@@ -251,7 +251,7 @@ export const list = async (
         FROM notifications.messages m
         LEFT JOIN auth.users u ON m.sent_by = u.id
         WHERE ${statusFilter}::text IS NULL OR CASE WHEN m.sent_at IS NOT NULL THEN 'sent' WHEN m.error IS NOT NULL THEN 'error' ELSE 'pending' END = ${statusFilter}
-        ORDER BY m.created_at DESC
+        ORDER BY m.created_at DESC, m.id DESC
         LIMIT ${perPage} OFFSET ${offset}
       `;
     }
@@ -276,7 +276,7 @@ export const list = async (
           m.sent_by = ${sentBy}
           AND (${statusFilter}::text IS NULL OR CASE WHEN m.sent_at IS NOT NULL THEN 'sent' WHEN m.error IS NOT NULL THEN 'error' ELSE 'pending' END = ${statusFilter})
           AND (m.subject ILIKE ${searchPattern} ESCAPE '\' OR m.content ILIKE ${searchPattern} ESCAPE '\' OR m.recipient ILIKE ${searchPattern} ESCAPE '\')
-        ORDER BY m.created_at DESC
+        ORDER BY m.created_at DESC, m.id DESC
         LIMIT ${perPage} OFFSET ${offset}
       `;
     } else {
@@ -296,7 +296,7 @@ export const list = async (
         WHERE
           m.sent_by = ${sentBy}
           AND (${statusFilter}::text IS NULL OR CASE WHEN m.sent_at IS NOT NULL THEN 'sent' WHEN m.error IS NOT NULL THEN 'error' ELSE 'pending' END = ${statusFilter})
-        ORDER BY m.created_at DESC
+        ORDER BY m.created_at DESC, m.id DESC
         LIMIT ${perPage} OFFSET ${offset}
       `;
     }

package/src/services/service-account-credentials.ts

@@ -553,7 +553,7 @@ export const listOverview = async (config?: {
         OR sa.resource_type ILIKE '%' || ${search} || '%'
         OR sa.resource_id ILIKE '%' || ${search} || '%'
       )
-    ORDER BY c.created_at DESC
+    ORDER BY c.created_at DESC, c.id DESC
     LIMIT ${perPage}
     OFFSET ${offset}
   `;

package/src/shared/markdown/client.ts

@@ -1,3 +1,5 @@
+import { mermaidConfig } from "../../browser/mermaid";
+
 /**
  * Initialize Mermaid diagrams within a container element.
  * Call this in onMount() of your client-side component.
@@ -6,39 +8,7 @@
  */
 export async function initMermaid(container: HTMLElement): Promise<void> {
   const mermaid = (await import("mermaid")).default;
-  // Initialize mermaid with theme detection
-  const isDark = document.documentElement.classList.contains("dark");
-  mermaid.initialize({
-    startOnLoad: false,
-    theme: "base",
-    themeVariables: isDark
-      ? {
-          darkMode: true,
-          background: "#09090b",
-          textColor: "#e5e7eb",
-          lineColor: "#6b7280",
-          primaryTextColor: "#e5e7eb",
-          secondaryTextColor: "#e5e7eb",
-          tertiaryTextColor: "#e5e7eb",
-          noteTextColor: "#e5e7eb",
-          mainBkg: "#111827",
-          secondBkg: "#1f2937",
-          tertiaryColor: "#374151",
-        }
-      : {
-          darkMode: false,
-          background: "#ffffff",
-          textColor: "#111827",
-          lineColor: "#6b7280",
-          primaryTextColor: "#111827",
-          secondaryTextColor: "#111827",
-          tertiaryTextColor: "#111827",
-          noteTextColor: "#111827",
-          mainBkg: "#ffffff",
-          secondBkg: "#f9fafb",
-          tertiaryColor: "#f3f4f6",
-        },
-  });
+  mermaid.initialize(mermaidConfig({ dark: document.documentElement.classList.contains("dark") }));
 
   // Find mermaid blocks (rendered with fixed-height container from server)
   const mermaidBlocks = container.querySelectorAll(".md-mermaid-block");