fix: BROS-701: Task Summary shows react code instead of data

web/libs/editor/src/components/TaskSummary/Aggregation.tsx

@@ -205,7 +205,7 @@ export const AggregationTableRow = ({
           <td
             key={header.id}
             className={cnm(
-              "px-4 py-2.5 overflow-hidden border-r border-r-neutral-border border-l border-y-2 border-neutral-border-bold bg-white",
+              "px-4 py-2.5 overflow-hidden border-r border-r-neutral-border border-l border-y-2 border-neutral-border-bold bg-neutral-background",
               "sticky left-0 z-20",
             )}
             style={{ width: header.getSize() }}

web/libs/editor/src/components/TaskSummary/DataSummary.tsx

@@ -5,6 +5,16 @@ import { Chip } from "./Chip";
 import { ResizeHandler } from "./ResizeHandler";
 import type { ObjectTypes } from "./types";
 
+const MAX_JSON_LENGTH = 10000;
+
+const formatValue = (value: unknown): { text: string; truncated: boolean } => {
+  const json = JSON.stringify(value, null, 2);
+  if (json.length <= MAX_JSON_LENGTH) {
+    return { text: json, truncated: false };
+  }
+  return { text: `${json.slice(0, MAX_JSON_LENGTH)}...`, truncated: true };
+};
+
 export const DataSummary = ({ data_types }: { data_types: ObjectTypes }) => {
   const data: Record<string, any> = useMemo(() => {
     return Object.fromEntries(Object.entries(data_types).map(([field, { value }]) => [field, value]));
@@ -40,18 +50,16 @@ export const DataSummary = ({ data_types }: { data_types: ObjectTypes }) => {
             return <video src={value} controls className="w-full" />;
           }
 
-          // List: [{ id: <id>, body: text, title: text }, ...]
-          // Paragraphs: [{ <nameKey>: name, <textKey>: text }, ...]
-          if (Array.isArray(value)) {
-            return <div className="whitespace-pre-wrap">{JSON.stringify(value, null, 2)}</div>;
-          }
-
-          // Timeseries: <channel name>: [array of values]
-          // Table: <key>: <value>
-          if (typeof value === "object") {
-            return Object.entries(value)
-              .map(([key, value]) => `${key}: ${String(value).substring(0, 300)}`)
-              .join("\n");
+          // Arrays: List, Paragraphs, Timeseries values
+          // Objects: Table, JSON-like structures with nested dictionaries
+          if (typeof value === "object" && value !== null) {
+            const { text, truncated } = formatValue(value);
+            return (
+              <div className="whitespace-pre-wrap">
+                {text}
+                {truncated && <div className="text-neutral-content-subtle italic mt-tight">(truncated)</div>}
+              </div>
+            );
           }
 
           return value;

web/libs/editor/src/components/TaskSummary/LabelingSummary.tsx

@@ -214,12 +214,10 @@ export const LabelingSummary = ({ hideInfo, annotations: all, controls, onSelect
                         left: isSticky ? 0 : "auto",
                         width: cell.column.getSize(),
                         zIndex: isSticky ? 10 : "auto",
-                        // @todo fix with proper tailwind classes
-                        backgroundColor: isEvenRow ? undefined : "white",
                       }}
                       className={cnm(
                         "px-4 py-2.5 align-top overflow-hidden transition-colors",
-                        isEvenRow ? "bg-neutral-surface" : "bg-white",
+                        isEvenRow ? "bg-neutral-surface" : "bg-neutral-background",
                         "group-hover:bg-neutral-surface-subtle",
                         !isLastRow && "border-b border-neutral-border-subtle",
                         isSticky && "border-r border-neutral-border",