fix(web): dedupe tree keys and guard against circular JSON

Key tree nodes by their index path instead of GUID, since TTS saves can
contain duplicate GUIDs. Skip the Parent back-reference in the default
viewer and stringify with a circular-reference guard.

apps/web/src/components/ObjectTree.tsx

@@ -9,11 +9,12 @@ interface Props {
 export default function ObjectTree({ nodes, selectedGuid, onSelect }: Props) {
   return (
     <ul className="space-y-0.5">
-      {nodes.map((node) => (
+      {nodes.map((node, index) => (
         <TreeNode
-          key={node.object.GUID}
+          key={index}
           node={node}
           depth={0}
+          path={`${index}`}
           selectedGuid={selectedGuid}
           onSelect={onSelect}
         />
@@ -25,11 +26,14 @@ export default function ObjectTree({ nodes, selectedGuid, onSelect }: Props) {
 function TreeNode({
   node,
   depth,
+  path,
   selectedGuid,
   onSelect,
 }: {
   node: ObjectTreeNode;
   depth: number;
+  /** Index path from the root, used as a stable unique key. */
+  path: string;
   selectedGuid: string | null;
   onSelect: (guid: string) => void;
 }) {
@@ -52,11 +56,12 @@ function TreeNode({
       </button>
       {node.children.length > 0 && (
         <ul>
-          {node.children.map((child) => (
+          {node.children.map((child, index) => (
             <TreeNode
-              key={child.object.GUID}
+              key={`${path}-${index}`}
               node={child}
               depth={depth + 1}
+              path={`${path}-${index}`}
               selectedGuid={selectedGuid}
               onSelect={onSelect}
             />

apps/web/src/components/viewers.tsx

@@ -27,20 +27,41 @@ export function resolveViewer(object: TTSObject): ObjectViewer['component'] {
 export function DefaultViewer({ object }: { object: TTSObject }) {
   return (
     <dl className="grid grid-cols-1 gap-2 text-sm sm:grid-cols-2">
-      {Object.entries(object).map(([key, value]) => (
+      {Object.entries(object).map(([key, value]) => {
-        <div key={key} className="rounded-lg border border-zinc-800 bg-zinc-900 p-3">
+        // `Parent` is a back-reference added during traversal; it creates a
-          <dt className="font-mono text-xs uppercase text-zinc-500">{key}</dt>
+        // cycle with `ContainedObjects`, so skip it in the default view.
-          <dd className="mt-1 break-words text-zinc-200">
+        if (key === 'Parent') return null;
-            {typeof value === 'string' || typeof value === 'number' ? (
+        return (
-              value
+          <div key={key} className="rounded-lg border border-zinc-800 bg-zinc-900 p-3">
-            ) : (
+            <dt className="font-mono text-xs uppercase text-zinc-500">{key}</dt>
-              <pre className="whitespace-pre-wrap font-mono text-xs">
+            <dd className="mt-1 break-words text-zinc-200">
-                {JSON.stringify(value, null, 2)}
+              {typeof value === 'string' || typeof value === 'number' ? (
-              </pre>
+                value
-            )}
+              ) : (
-          </dd>
+                <pre className="whitespace-pre-wrap font-mono text-xs">
-        </div>
+                  {safeStringify(value)}
-      ))}
+                </pre>
+              )}
+            </dd>
+          </div>
+        );
+      })}
     </dl>
   );
 }
+
+/** JSON-stringify a value, replacing any circular references with a marker. */
+function safeStringify(value: unknown): string {
+  const seen = new Set<object>();
+  return JSON.stringify(
+    value,
+    (_key, v) => {
+      if (typeof v === 'object' && v !== null) {
+        if (seen.has(v)) return '[Circular]';
+        seen.add(v);
+      }
+      return v;
+    },
+    2,
+  );
+}