feat: Syntax highlight for job input and output data

packages/dashboard/package.json

@@ -39,6 +39,7 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.52.2",
     "react-router-dom": "^6.26.0",
+    "react-syntax-highlighter": "^15.5.0",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",
     "timeago.js": "4.0.0-beta.3",
@@ -49,6 +50,7 @@
     "@types/node": "^22.1.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.41",

packages/dashboard/src/components/JobView.tsx

@@ -3,6 +3,7 @@ import { JobLogs } from "./JobLogs";
 import AlertCircle from "lucide-react/icons/alert-circle";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { getDurationStr } from "@/lib/helpers";
+import { JsonHighlight } from "./JsonHighlight";
 import type { JobDto } from "@/tsr";
 
 type JobViewProps = {
@@ -27,11 +28,11 @@ export function JobView({ job }: JobViewProps) {
         <div>
           <div className="mb-4">
             <div className="mb-2">Input</div>
-            <Format data={job.inputData} />
+            <JsonHighlight json={job.inputData} />
           </div>
           <div>
             <div className="mb-2">Output</div>
-            <Format data={job.outputData} />
+            {job.outputData ? <JsonHighlight json={job.outputData} /> : null}
           </div>
         </div>
         <div>
@@ -43,21 +44,6 @@ export function JobView({ job }: JobViewProps) {
   );
 }
 
-function Format({ data }: { data: string | null }) {
-  let parsedData: unknown;
-  try {
-    if (data) {
-      parsedData = JSON.parse(data);
-    }
-  } catch {}
-
-  return parsedData ? (
-    <pre className="p-2 text-xs border border-border rounded-md whitespace-pre-wrap break-all">
-      {JSON.stringify(parsedData, null, 2)}
-    </pre>
-  ) : null;
-}
-
 function JobError({ error }: { error: string }) {
   return (
     <Alert variant="destructive" className="mb-4">

packages/dashboard/src/components/JsonHighlight.tsx

@@ -0,0 +1,36 @@
+import { useMemo } from "react";
+
+// @ts-expect-error
+import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
+
+// @ts-expect-error
+import json from "react-syntax-highlighter/dist/esm/languages/hljs/json";
+
+// @ts-expect-error
+import style from "react-syntax-highlighter/dist/esm/styles/hljs/stackoverflow-light";
+
+style["hljs"].padding = "1rem";
+delete style["hljs"].background;
+
+SyntaxHighlighter.registerLanguage("json", json);
+
+type SyntaxHighlightProps = {
+  json: string;
+};
+
+export function JsonHighlight({ json }: SyntaxHighlightProps) {
+  const data = useMemo(() => {
+    const parsed = JSON.parse(json);
+    return JSON.stringify(parsed, null, 2);
+  }, [json]);
+
+  return (
+    <SyntaxHighlighter
+      className="rounded-md text-xs border border-border"
+      style={style}
+      language="json"
+    >
+      {data}
+    </SyntaxHighlighter>
+  );
+}

packages/dashboard/src/components/OpenApiReference.tsx

@@ -7,7 +7,7 @@ type OpenApiReferenceProps = {
 };
 
 export function OpenApiReference({ url }: OpenApiReferenceProps) {
-  const { data } = tsr.getSpec.useQuery({
+  const { data } = tsr.getSpec.useSuspenseQuery({
     queryKey: ["spec"],
   });