Improe error messaging

Author: spaaaacccee

bun.lock

@@ -22,6 +22,7 @@
     "@tanstack/react-query-devtools": "^5.51.16",
     "@types/byte-size": "^8.1.2",
     "@types/downloadjs": "^1.4.6",
+    "@types/js-yaml": "^4.0.9",
     "@types/lodash": "^4.17.12",
     "@types/memoizee": "^0.4.11",
     "@types/object-hash": "^3.0.6",
@@ -48,6 +49,7 @@
     "fetch-progress": "^1.3.0",
     "formik": "^2.4.6",
     "fuse.js": "^7.1.0",
+    "js-yaml": "^4.1.1",
     "json-2-csv": "^5.5.4",
     "katex": "^0.16.21",
     "lodash": "^4.17.21",

client/package.json

@@ -1,6 +1,7 @@
 import { List, ListItem, ListItemText, ListProps } from "@mui/material";
 import { entries, startCase } from "lodash";
 import { CodeBlock } from "components/CodeBlock";
+import { dump } from "js-yaml";
 
 export default function GenericDetailsList({
   data,
@@ -12,11 +13,7 @@ export default function GenericDetailsList({
         <ListItem key={k} disableGutters>
           <ListItemText
             secondary={startCase(k)}
-            primary={
-              <CodeBlock language="json">
-                {JSON.stringify(v, null, 2)}
-              </CodeBlock>
-            }
+            primary={<CodeBlock language="yaml">{dump(v)}</CodeBlock>}
           />
         </ListItem>
       ))}