diff --git a/src/components/JobList.test.tsx b/src/components/JobList.test.tsx
index d8e202ce..57a02745 100644
--- a/src/components/JobList.test.tsx
+++ b/src/components/JobList.test.tsx
@@ -61,7 +61,9 @@ describe("JobList", () => {
});
it("shows job args by default", () => {
- const job = jobMinimalFactory.build();
+ const job = jobMinimalFactory.build({
+ argsRaw: '{"z":2,"id":1970670598291982290,"a":1}',
+ });
const features = createFeatures({
jobListHideArgsByDefault: false,
});
@@ -87,7 +89,9 @@ describe("JobList", () => {
,
);
- expect(screen.getByText(JSON.stringify(job.args))).toBeInTheDocument();
+ expect(
+ screen.getByText('{"a":1,"id":1970670598291982290,"z":2}'),
+ ).toBeInTheDocument();
});
it("hides job args when jobListHideArgsByDefault is true", () => {
@@ -117,9 +121,7 @@ describe("JobList", () => {
,
);
- expect(
- screen.queryByText(JSON.stringify(job.args)),
- ).not.toBeInTheDocument();
+ expect(screen.queryByText(job.argsRaw)).not.toBeInTheDocument();
});
it("shows job args when user overrides default hide setting", () => {
@@ -150,7 +152,7 @@ describe("JobList", () => {
);
// Even though server default is to hide, user setting should make them visible
- expect(screen.getByText(JSON.stringify(job.args))).toBeInTheDocument();
+ expect(screen.getByText(job.argsRaw)).toBeInTheDocument();
});
it("hides job args when user overrides default show setting", () => {
@@ -181,9 +183,7 @@ describe("JobList", () => {
);
// Even though server default is to show, user setting should hide them
- expect(
- screen.queryByText(JSON.stringify(job.args)),
- ).not.toBeInTheDocument();
+ expect(screen.queryByText(job.argsRaw)).not.toBeInTheDocument();
});
it("requires confirmation before deleting selected jobs", async () => {
diff --git a/src/components/JobList.tsx b/src/components/JobList.tsx
index 820004fd..411e4353 100644
--- a/src/components/JobList.tsx
+++ b/src/components/JobList.tsx
@@ -29,6 +29,7 @@ import {
JobStateFilterItem,
jobStateFilterItems,
} from "@utils/jobStateFilterItems";
+import { compactJSONText } from "@utils/jsonText";
import { classNames } from "@utils/style";
import React, {
FormEvent,
@@ -89,6 +90,10 @@ const JobListItem = ({
onChangeSelect,
}: JobListItemProps) => {
const showArgs = !hideArgs;
+ const argsPreview = useMemo(
+ () => compactJSONText(job.argsRaw),
+ [job.argsRaw],
+ );
return (
@@ -134,7 +139,7 @@ const JobListItem = ({
{showArgs && (
- {JSON.stringify(job.args)}
+ {argsPreview}
)}
diff --git a/src/components/WorkflowDetail.test.tsx b/src/components/WorkflowDetail.test.tsx
index 444cbc83..def686b7 100644
--- a/src/components/WorkflowDetail.test.tsx
+++ b/src/components/WorkflowDetail.test.tsx
@@ -219,6 +219,24 @@ describe("WorkflowDetail wait inspector", () => {
expect(screen.getByText("Not waiting")).toBeInTheDocument();
});
+ it("renders selected task args without rounding large numbers", async () => {
+ const argsRaw = '{"id":1970670598291982290}';
+ const task = workflowJobFactory.build({
+ argsRaw,
+ id: 1,
+ state: JobState.Completed,
+ task: "send_response",
+ waitReason: "none",
+ });
+
+ await renderWorkflowDetail(
+ { id: "wf-test-args", name: "Workflow Test", tasks: [task] },
+ task.id,
+ );
+
+ expect(screen.getByText(/1970670598291982290/)).toBeInTheDocument();
+ });
+
it("updates the lower inspector when the selected task changes", async () => {
const firstTask = workflowJobFactory.build({
id: 1,
diff --git a/src/components/WorkflowDetail.tsx b/src/components/WorkflowDetail.tsx
index 210b185e..3dfeaf72 100644
--- a/src/components/WorkflowDetail.tsx
+++ b/src/components/WorkflowDetail.tsx
@@ -2,6 +2,7 @@ import ButtonForGroup from "@components/ButtonForGroup";
import { DurationCompact } from "@components/DurationCompact";
import { Subheading } from "@components/Heading";
import { RunningSpinnerIcon } from "@components/icons/jobStateIcons";
+import JSONTextView from "@components/JSONTextView";
import JSONView from "@components/JSONView";
import RelativeTimeFormatter from "@components/RelativeTimeFormatter";
import RetryWorkflowDialog from "@components/RetryWorkflowDialog";
@@ -335,7 +336,7 @@ const SelectedJobDetails = ({
Args
-
+
diff --git a/src/services/jobs.test.ts b/src/services/jobs.test.ts
new file mode 100644
index 00000000..e57f0887
--- /dev/null
+++ b/src/services/jobs.test.ts
@@ -0,0 +1,96 @@
+import { getJob, getJobKey, listJobs, listJobsKey } from "@services/jobs";
+import { JobState } from "@services/types";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+type APIAttemptErrorForTest = {
+ at: string;
+ attempt: number;
+ error: string;
+ trace: string;
+};
+
+type APIJobForTest = {
+ args: string;
+ attempt: number;
+ attempted_by: string[];
+ created_at: string;
+ errors: APIAttemptErrorForTest[];
+ finalized_at: undefined;
+ id: number;
+ kind: string;
+ max_attempts: number;
+ metadata: object;
+ priority: number;
+ queue: string;
+ scheduled_at: string;
+ state: JobState;
+ tags: string[];
+};
+
+const apiJob = (overrides: Partial
= {}): APIJobForTest => ({
+ args: '{"id":1970670598291982290}',
+ attempt: 0,
+ attempted_by: [],
+ created_at: "2026-04-21T17:57:00Z",
+ errors: [],
+ finalized_at: undefined,
+ id: 123,
+ kind: "RowOperation",
+ max_attempts: 25,
+ metadata: {},
+ priority: 1,
+ queue: "default",
+ scheduled_at: "2026-04-21T17:57:00Z",
+ state: JobState.Available,
+ tags: [],
+ ...overrides,
+});
+
+describe("jobs service", () => {
+ afterEach(() => {
+ vi.restoreAllMocks();
+ document.body.innerHTML = "";
+ });
+
+ it("preserves list job args as raw JSON text", async () => {
+ document.body.innerHTML =
+ '';
+
+ vi.spyOn(globalThis, "fetch").mockResolvedValue(
+ new Response(JSON.stringify({ data: [apiJob()] }), {
+ headers: { "Content-Type": "application/json" },
+ status: 200,
+ }),
+ );
+
+ const jobs = await listJobs({
+ client: undefined as never,
+ meta: undefined,
+ queryKey: listJobsKey({ limit: 10 }),
+ signal: new AbortController().signal,
+ });
+
+ expect(jobs[0]?.argsRaw).toBe('{"id":1970670598291982290}');
+ });
+
+ it("preserves job detail args as raw JSON text", async () => {
+ document.body.innerHTML =
+ '';
+
+ vi.spyOn(globalThis, "fetch").mockResolvedValue(
+ new Response(JSON.stringify(apiJob()), {
+ headers: { "Content-Type": "application/json" },
+ status: 200,
+ }),
+ );
+
+ const job = await getJob({
+ client: undefined as never,
+ meta: undefined,
+ queryKey: getJobKey(123n),
+ signal: new AbortController().signal,
+ });
+
+ expect(job.argsRaw).toBe('{"id":1970670598291982290}');
+ });
+});
diff --git a/src/services/jobs.ts b/src/services/jobs.ts
index caddc780..09796c78 100644
--- a/src/services/jobs.ts
+++ b/src/services/jobs.ts
@@ -17,18 +17,13 @@ export type AttemptError = {
};
export type Job = {
- [Key in keyof JobFromAPI as SnakeToCamelCase]: Key extends
- | StringEndingWithUnderscoreAt
- | undefined
- ? Date
- : JobFromAPI[Key] extends AttemptErrorFromAPI[]
- ? AttemptError[]
- : JobFromAPI[Key];
-};
+ errors: AttemptError[];
+ logs: JobLogs;
+ metadata: KnownMetadata | object;
+} & JobMinimal;
export type JobFromAPI = {
errors: AttemptErrorFromAPI[];
- logs: JobLogs;
metadata: KnownMetadata | object;
} & JobMinimalFromAPI;
@@ -43,18 +38,25 @@ export type JobLogs = {
};
export type JobMinimal = {
- [Key in keyof JobMinimalFromAPI as SnakeToCamelCase]: Key extends
+ [Key in keyof Omit<
+ JobMinimalFromAPI,
+ "args"
+ > as SnakeToCamelCase]: Key extends
| StringEndingWithUnderscoreAt
| undefined
? Date
: JobMinimalFromAPI[Key];
+} & {
+ argsRaw: string;
};
// Represents a Job as received from the API. This just like Job, except with
// string dates instead of Date objects and keys as snake_case instead of
// camelCase.
export type JobMinimalFromAPI = {
- args: object;
+ // JSON text as returned by River. Keep this unparsed to preserve large
+ // integer values exactly for display and copy.
+ args: string;
attempt: number;
attempted_at?: string;
attempted_by: string[];
@@ -100,7 +102,7 @@ type RiverJobLogEntry = {
export const apiJobMinimalToJobMinimal = (
job: JobMinimalFromAPI,
): JobMinimal => ({
- args: job.args,
+ argsRaw: job.args,
attempt: job.attempt,
attemptedAt: job.attempted_at ? new Date(job.attempted_at) : undefined,
attemptedBy: job.attempted_by,
diff --git a/src/services/workflows.test.ts b/src/services/workflows.test.ts
index 9844c582..4dd1d3bf 100644
--- a/src/services/workflows.test.ts
+++ b/src/services/workflows.test.ts
@@ -1,4 +1,7 @@
+import { JobState } from "@services/types";
import {
+ getWorkflow,
+ getWorkflowKey,
getWorkflowTaskSignals,
getWorkflowTaskWaitDiagnostics,
} from "@services/workflows";
@@ -10,6 +13,65 @@ describe("workflows service", () => {
document.body.innerHTML = "";
});
+ it("preserves workflow task args as raw JSON text", async () => {
+ document.body.innerHTML =
+ '';
+
+ vi.spyOn(globalThis, "fetch").mockResolvedValue(
+ new Response(
+ JSON.stringify({
+ id: "wf-args",
+ name: "Workflow Args",
+ tasks: [
+ {
+ args: '{"id":1970670598291982290}',
+ attempt: 0,
+ attempted_by: [],
+ created_at: "2026-04-21T17:57:00Z",
+ deps: [],
+ errors: [],
+ id: 123,
+ ignore_cancelled_deps: false,
+ ignore_deleted_deps: false,
+ ignore_discarded_deps: false,
+ kind: "RowOperation",
+ max_attempts: 25,
+ metadata: {
+ deps: [],
+ task: "row_operation",
+ workflow_id: "wf-args",
+ workflow_staged_at: "2026-04-21T17:57:00Z",
+ },
+ name: "row_operation",
+ priority: 1,
+ queue: "default",
+ scheduled_at: "2026-04-21T17:57:00Z",
+ state: JobState.Available,
+ tags: [],
+ wait_reason: "none",
+ workflow_id: "wf-args",
+ },
+ ],
+ }),
+ {
+ headers: { "Content-Type": "application/json" },
+ status: 200,
+ },
+ ),
+ );
+
+ const workflow = await getWorkflow({
+ client: undefined as never,
+ direction: "forward",
+ meta: undefined,
+ pageParam: undefined,
+ queryKey: getWorkflowKey("wf-args"),
+ signal: new AbortController().signal,
+ });
+
+ expect(workflow.tasks[0]?.argsRaw).toBe('{"id":1970670598291982290}');
+ });
+
it("parses task signal dates, ids, cursor ids, evidence, and scope", async () => {
document.body.innerHTML =
'';
diff --git a/src/test/factories/job.ts b/src/test/factories/job.ts
index efd797a6..c40e51b5 100644
--- a/src/test/factories/job.ts
+++ b/src/test/factories/job.ts
@@ -266,7 +266,7 @@ export const jobFactory = JobFactory.define(({ sequence }) => {
const createdAt = faker.date.recent({ days: 0.001 });
return {
- args: { baz: 1, foo: "bar" },
+ argsRaw: '{"baz":1,"foo":"bar"}',
attempt: 0,
attemptedAt: undefined,
attemptedBy: [],
diff --git a/src/test/factories/workflowJob.ts b/src/test/factories/workflowJob.ts
index 0f8ce16e..d5b59bb1 100644
--- a/src/test/factories/workflowJob.ts
+++ b/src/test/factories/workflowJob.ts
@@ -13,6 +13,7 @@ const defaultWorkflowStagedAt = new Date("2025-01-01T00:00:00.000Z");
const defaultWorkflowID = "wf-1";
type WorkflowJobFactoryParams = {
+ argsRaw?: string;
attemptedAt?: Date;
createdAt?: Date;
deps?: string[];
@@ -81,6 +82,7 @@ export const workflowJobFactory = Factory.define<
const baseJob = jobFactory.build({
...(attemptedAt ? { attemptedAt } : {}),
+ ...(params.argsRaw ? { argsRaw: params.argsRaw } : {}),
createdAt,
...(finalizedAt ? { finalizedAt } : {}),
id,
diff --git a/src/utils/jsonText.test.ts b/src/utils/jsonText.test.ts
new file mode 100644
index 00000000..c9b15ff1
--- /dev/null
+++ b/src/utils/jsonText.test.ts
@@ -0,0 +1,27 @@
+import { compactJSONText, formatJSONText } from "@utils/jsonText";
+import { describe, expect, it } from "vitest";
+
+describe("jsonText", () => {
+ it("sorts object keys without parsing large number tokens", () => {
+ const rawJSON =
+ '{"z":2,"id":1970670598291982290,"nested":{"b":9223372036854775807,"a":1}}';
+
+ expect(compactJSONText(rawJSON)).toBe(
+ '{"id":1970670598291982290,"nested":{"a":1,"b":9223372036854775807},"z":2}',
+ );
+ });
+
+ it("pretty-prints sorted JSON without rounding numbers", () => {
+ const rawJSON = '{"z":2,"id":1970670598291982290,"a":1}';
+
+ expect(formatJSONText(rawJSON)).toBe(`{
+ "a": 1,
+ "id": 1970670598291982290,
+ "z": 2
+}`);
+ });
+
+ it("falls back to original text when args are not valid JSON", () => {
+ expect(formatJSONText("{not valid")).toBe("{not valid");
+ });
+});
diff --git a/src/utils/jsonText.ts b/src/utils/jsonText.ts
new file mode 100644
index 00000000..b343f426
--- /dev/null
+++ b/src/utils/jsonText.ts
@@ -0,0 +1,268 @@
+type JSONTextNode =
+ | { entries: JSONTextObjectEntry[]; kind: "object" }
+ | { kind: "array"; values: JSONTextNode[] }
+ | { kind: "literal"; value: "false" | "null" | "true" }
+ | { kind: "number"; raw: string }
+ | { kind: "string"; value: string };
+
+type JSONTextObjectEntry = {
+ key: string;
+ value: JSONTextNode;
+};
+
+class JSONTextParser {
+ private position = 0;
+
+ constructor(private readonly text: string) {}
+
+ parse(): JSONTextNode | undefined {
+ try {
+ const value = this.parseValue();
+ this.skipWhitespace();
+ return this.position === this.text.length ? value : undefined;
+ } catch {
+ return undefined;
+ }
+ }
+
+ private expect(char: string) {
+ if (this.text[this.position] !== char) {
+ throw new Error(`expected ${char}`);
+ }
+ this.position += 1;
+ }
+
+ private parseArray(): JSONTextNode {
+ this.expect("[");
+ this.skipWhitespace();
+
+ const values: JSONTextNode[] = [];
+ if (this.text[this.position] === "]") {
+ this.position += 1;
+ return { kind: "array", values };
+ }
+
+ while (true) {
+ values.push(this.parseValue());
+ this.skipWhitespace();
+
+ if (this.text[this.position] === "]") {
+ this.position += 1;
+ return { kind: "array", values };
+ }
+
+ this.expect(",");
+ this.skipWhitespace();
+ }
+ }
+
+ private parseLiteral(literal: "false" | "null" | "true"): JSONTextNode {
+ if (!this.text.startsWith(literal, this.position)) {
+ throw new Error(`expected ${literal}`);
+ }
+
+ this.position += literal.length;
+ return { kind: "literal", value: literal };
+ }
+
+ private parseNumber(): JSONTextNode {
+ const start = this.position;
+
+ if (this.text[this.position] === "-") {
+ this.position += 1;
+ }
+
+ if (this.text[this.position] === "0") {
+ this.position += 1;
+ } else if (isDigitOneToNine(this.text[this.position])) {
+ this.position += 1;
+ while (isDigit(this.text[this.position])) {
+ this.position += 1;
+ }
+ } else {
+ throw new Error("expected number");
+ }
+
+ if (this.text[this.position] === ".") {
+ this.position += 1;
+ if (!isDigit(this.text[this.position])) {
+ throw new Error("expected fractional digit");
+ }
+ while (isDigit(this.text[this.position])) {
+ this.position += 1;
+ }
+ }
+
+ if (this.text[this.position] === "e" || this.text[this.position] === "E") {
+ this.position += 1;
+ if (
+ this.text[this.position] === "+" ||
+ this.text[this.position] === "-"
+ ) {
+ this.position += 1;
+ }
+ if (!isDigit(this.text[this.position])) {
+ throw new Error("expected exponent digit");
+ }
+ while (isDigit(this.text[this.position])) {
+ this.position += 1;
+ }
+ }
+
+ return { kind: "number", raw: this.text.slice(start, this.position) };
+ }
+
+ private parseObject(): JSONTextNode {
+ this.expect("{");
+ this.skipWhitespace();
+
+ const entries: JSONTextObjectEntry[] = [];
+ if (this.text[this.position] === "}") {
+ this.position += 1;
+ return { entries, kind: "object" };
+ }
+
+ while (true) {
+ const key = this.parseStringValue();
+ this.skipWhitespace();
+ this.expect(":");
+ const value = this.parseValue();
+ entries.push({ key, value });
+ this.skipWhitespace();
+
+ if (this.text[this.position] === "}") {
+ this.position += 1;
+ return { entries, kind: "object" };
+ }
+
+ this.expect(",");
+ this.skipWhitespace();
+ }
+ }
+
+ private parseString(): JSONTextNode {
+ return { kind: "string", value: this.parseStringValue() };
+ }
+
+ private parseStringValue(): string {
+ const start = this.position;
+ this.expect('"');
+
+ while (this.position < this.text.length) {
+ const char = this.text[this.position];
+ if (char === '"') {
+ this.position += 1;
+ const parsed = JSON.parse(this.text.slice(start, this.position));
+ if (typeof parsed !== "string") {
+ throw new Error("expected string");
+ }
+ return parsed;
+ }
+
+ if (char === "\\") {
+ this.position += 2;
+ } else {
+ this.position += 1;
+ }
+ }
+
+ throw new Error("unterminated string");
+ }
+
+ private parseValue(): JSONTextNode {
+ this.skipWhitespace();
+
+ const char = this.text[this.position];
+ if (char === "{") return this.parseObject();
+ if (char === "[") return this.parseArray();
+ if (char === '"') return this.parseString();
+ if (char === "t") return this.parseLiteral("true");
+ if (char === "f") return this.parseLiteral("false");
+ if (char === "n") return this.parseLiteral("null");
+ return this.parseNumber();
+ }
+
+ private skipWhitespace() {
+ while (/[\t\n\r ]/.test(this.text[this.position] ?? "")) {
+ this.position += 1;
+ }
+ }
+}
+
+export function compactJSONText(text: string): string {
+ const parsed = parseJSONText(text);
+ return parsed ? stringifyCompact(parsed) : text;
+}
+
+export function formatJSONText(text: string): string {
+ const parsed = parseJSONText(text);
+ return parsed ? stringifyPretty(parsed, 0) : text;
+}
+
+function isDigit(char: string | undefined): boolean {
+ return char !== undefined && char >= "0" && char <= "9";
+}
+
+function isDigitOneToNine(char: string | undefined): boolean {
+ return char !== undefined && char >= "1" && char <= "9";
+}
+
+function parseJSONText(text: string): JSONTextNode | undefined {
+ const parser = new JSONTextParser(text);
+ return parser.parse();
+}
+
+function sortedEntries(entries: JSONTextObjectEntry[]): JSONTextObjectEntry[] {
+ return [...entries].sort((left, right) => left.key.localeCompare(right.key));
+}
+
+function stringifyCompact(node: JSONTextNode): string {
+ switch (node.kind) {
+ case "array":
+ return `[${node.values.map(stringifyCompact).join(",")}]`;
+ case "literal":
+ return node.value;
+ case "number":
+ return node.raw;
+ case "object":
+ return `{${sortedEntries(node.entries)
+ .map(
+ (entry) =>
+ `${JSON.stringify(entry.key)}:${stringifyCompact(entry.value)}`,
+ )
+ .join(",")}}`;
+ case "string":
+ return JSON.stringify(node.value);
+ }
+}
+
+function stringifyPretty(node: JSONTextNode, depth: number): string {
+ const indent = " ";
+ const currentIndent = indent.repeat(depth);
+ const childIndent = indent.repeat(depth + 1);
+
+ switch (node.kind) {
+ case "array":
+ if (node.values.length === 0) return "[]";
+ return `[\n${node.values
+ .map((value) => `${childIndent}${stringifyPretty(value, depth + 1)}`)
+ .join(",\n")}\n${currentIndent}]`;
+ case "literal":
+ return node.value;
+ case "number":
+ return node.raw;
+ case "object":
+ if (node.entries.length === 0) return "{}";
+ return `{\n${sortedEntries(node.entries)
+ .map(
+ (entry) =>
+ `${childIndent}${JSON.stringify(entry.key)}: ${stringifyPretty(
+ entry.value,
+ depth + 1,
+ )}`,
+ )
+ .join(",\n")}\n${currentIndent}}`;
+ case "string":
+ return JSON.stringify(node.value);
+ }
+}