@codeyam/codeyam-cli 0.1.0-staging.dd216e0 → 0.1.0-staging.e090cb3

package/analyzer-template/packages/database/src/lib/loadCommit.ts

@@ -69,6 +69,7 @@ export default async function loadCommit({
   branchId,
 }: LoadCommitArgs) {
   const db = getDatabase();
+  const startTime = Date.now();
 
   try {
     let query = db
@@ -97,6 +98,7 @@ export default async function loadCommit({
     query = query.orderBy('committed_at', 'desc').limit(1);
 
     const commit = await query.executeTakeFirst();
+    const queryTime = Date.now() - startTime;
 
     if (!commit) {
       awsLog('CodeYam Error: Commit not found', null, {
@@ -108,6 +110,15 @@ export default async function loadCommit({
       return null;
     }
 
+    // DEBUG: Log slow queries (includes files column which can be 1MB+)
+    if (queryTime > 100) {
+      const filesSize = commit.files ? JSON.stringify(commit.files).length : 0;
+      console.log(
+        `CodeYam DEBUG: [CommitFilesTiming] loadCommit took ${queryTime}ms (files: ${Math.round(filesSize / 1024)}KB)`,
+        { sha: commit.sha },
+      );
+    }
+
     // Load branch and mergedBranch separately
     const [branch, mergedBranch, analyses] = await Promise.all([
       commit.branch_id

package/analyzer-template/packages/database/src/lib/loadCommits.ts

@@ -19,6 +19,8 @@ interface LoadCommitsArgs {
   shas?: string[];
   fileNames?: string[];
   limit?: number;
+  /** Skip loading related data (analyses, entities, branches) for faster queries */
+  skipRelations?: boolean;
 }
 
 async function loadBranchesForCommits(
@@ -137,6 +139,7 @@ export default async function loadCommits({
   shas,
   fileNames,
   limit = 10,
+  skipRelations = false,
 }: LoadCommitsArgs): Promise<Commit[]> {
   if (!projectId && !ids) {
     throw new Error('Must provide projectId or ids');
@@ -144,6 +147,7 @@ export default async function loadCommits({
 
   const db = getDatabase();
   const { jsonObjectFrom } = getJsonHelper();
+  const startTime = Date.now();
 
   try {
     let query = db
@@ -203,11 +207,35 @@ export default async function loadCommits({
       .orderBy('committed_at', 'desc')
       .limit(limit)
       .execute();
+    const queryTime = Date.now() - startTime;
 
     if (!commits || commits.length === 0) {
       return [];
     }
 
+    // DEBUG: Log slow queries (includes files column which can be 1MB+)
+    if (queryTime > 100) {
+      const totalFilesSize = commits.reduce((sum, c: any) => {
+        return sum + (c.files ? JSON.stringify(c.files).length : 0);
+      }, 0);
+      console.log(
+        `CodeYam DEBUG: [CommitFilesTiming] loadCommits took ${queryTime}ms (${commits.length} commits, totalFiles: ${Math.round(totalFilesSize / 1024)}KB)`,
+      );
+    }
+
+    // When skipRelations is true, just return commits without loading related data
+    // This is much faster for queries that only need commit metadata
+    if (skipRelations) {
+      const dbCommits: DbCommit[] = commits.map((commit: any) => ({
+        ...commit,
+        branch: undefined,
+        mergedBranch: undefined,
+        analyses: [],
+        entities: [],
+      }));
+      return dbCommits.map(dbToCommit);
+    }
+
     const commitIds = commits.map((c: any) => c.id);
 
     // Load all relations in parallel

package/analyzer-template/packages/database/src/lib/loadEntities.ts

@@ -9,6 +9,8 @@ export interface LoadEntitiesArgs {
   filePaths?: string[];
   names?: string[];
   shas?: string[];
+  /** Exclude large metadata column for faster list queries */
+  excludeMetadata?: boolean;
 }
 
 export default async function loadEntities({
@@ -18,6 +20,7 @@ export default async function loadEntities({
   filePaths,
   names,
   shas,
+  excludeMetadata,
 }: LoadEntitiesArgs): Promise<Entity[] | null> {
   if (
     (fileIds && fileIds.length == 0) ||
@@ -39,6 +42,7 @@ export default async function loadEntities({
         filePaths,
         names,
         shas: chunk,
+        excludeMetadata,
       });
 
       if (chunkEntities) {
@@ -51,9 +55,28 @@ export default async function loadEntities({
   const db = getDatabase();
 
   try {
-    const query = db
-      .selectFrom('entities')
-      .selectAll('entities')
+    // When excludeMetadata is true, select all columns except the large metadata column
+    // This dramatically speeds up list queries (41MB+ of JSON avoided)
+    const baseQuery = excludeMetadata
+      ? db
+          .selectFrom('entities')
+          .select([
+            'entities.project_id',
+            'entities.file_id',
+            'entities.commit_id',
+            'entities.name',
+            'entities.sha',
+            'entities.entity_type',
+            'entities.file_path',
+            'entities.description',
+            'entities.documentation',
+            'entities.quality',
+            'entities.created_at',
+            'entities.updated_at',
+          ])
+      : db.selectFrom('entities').selectAll('entities');
+
+    const query = baseQuery
       .$if(!!branchId, (qb) =>
         qb
           .innerJoin(

package/analyzer-template/packages/database/src/lib/loadEntityBranches.ts

@@ -121,6 +121,7 @@ async function loadCommitsForEntities(
   const db = getDatabase();
 
   const { jsonArrayFrom } = getJsonHelper();
+  const startTime = Date.now();
 
   try {
     const commits = await db
@@ -137,6 +138,17 @@ async function loadCommitsForEntities(
       ])
       .where('commits.id', 'in', commitIds)
       .execute();
+    const queryTime = Date.now() - startTime;
+
+    // DEBUG: Log slow queries (includes files column which can be 1MB+)
+    if (queryTime > 100) {
+      const totalFilesSize = commits.reduce((sum, c: any) => {
+        return sum + (c.files ? JSON.stringify(c.files).length : 0);
+      }, 0);
+      console.log(
+        `CodeYam DEBUG: [CommitFilesTiming] loadCommitsForEntities took ${queryTime}ms (${commits.length} commits, totalFiles: ${Math.round(totalFilesSize / 1024)}KB)`,
+      );
+    }
 
     return new Map(commits.map((commit) => [commit.id, commit]));
   } catch (error) {

package/analyzer-template/packages/database/src/lib/loadReadyToBeCapturedAnalyses.ts

@@ -40,15 +40,19 @@ export default async function loadReadyToBeCapturedAnalyses(
           .whereRef('scenarios.analysis_id', '=', 'analyses.id'),
       ).as('scenarios'),
     ])
+    // Cross-database compatible: use -> (not ->>) for boolean JSON fields
+    // PostgreSQL: jsonb `true` auto-casts to string 'true' for comparison
+    // SQLite: -> returns text 'true' which equals string 'true'
+    // (Note: ->> returns integer 1 in SQLite for booleans, breaking string comparisons)
     .where(
-      // Use ->> to extract as text for proper comparison (-> returns JSONB which doesn't compare to string)
-      sql<string>` ${sql.ref('analyses.status')} ->> 'readyToBeCaptured'`,
+      sql<string>`${sql.ref('analyses.status')} -> 'readyToBeCaptured'`,
       '=',
       'true',
     )
     // Exclude entities that are not exported - they cannot be captured because they can't be imported
+    // Use -> operator for cross-database boolean comparison
     .where(
-      sql<boolean>`(${sql.ref('entities.metadata')} ->> 'notExported') IS NULL OR (${sql.ref('entities.metadata')} ->> 'notExported') != 'true'`,
+      sql<boolean>`(${sql.ref('entities.metadata')} -> 'notExported') IS NULL OR (${sql.ref('entities.metadata')} -> 'notExported') != 'true'`,
     );
 
   if (projectId) {

package/analyzer-template/packages/database/src/lib/projectToDb.ts

@@ -1,7 +1,7 @@
 import { Project } from '~codeyam/types';
 import { type Insertable } from 'kysely';
 import { ProjectsTable } from './kysely/tables/projectsTable';
-import { randomUUID } from 'crypto';
+const randomUUID = () => crypto.randomUUID();
 
 export default function projectToDb(
   project: Project,

package/analyzer-template/packages/database/src/lib/saveFiles.ts

@@ -3,7 +3,7 @@ import dbToFile from './dbToFile';
 import { File } from '~codeyam/types';
 import { Insertable, Selectable } from 'kysely';
 import { FilesTable } from './kysely/tables/filesTable';
-import { randomUUID } from 'crypto';
+const randomUUID = () => crypto.randomUUID();
 
 const BATCH_SIZE = 100;
 

package/analyzer-template/packages/database/src/lib/scenarioToDb.ts

@@ -1,7 +1,7 @@
 import { Scenario } from '~codeyam/types';
 import { type Insertable } from 'kysely';
 import { ScenariosTable } from './kysely/tables/scenariosTable';
-import { randomUUID } from 'crypto';
+const randomUUID = () => crypto.randomUUID();
 
 export default function scenarioToDb(
   scenario: Scenario,

package/analyzer-template/packages/database/src/lib/updateCommitMetadata.ts

@@ -2,16 +2,10 @@
  * updates commit metadata by merging partial updates with existing data.
  * uses database transactions to ensure atomic updates and handle concurrent modifications.
  */
-import {
-  Commit,
-  CommitMetadata,
-  CommitRunStatus,
-  DeepReadonly,
-} from '~codeyam/types';
+import { CommitMetadata, CommitRunStatus } from '~codeyam/types';
 import { getDatabase } from './kysely/db';
 import { awsLog } from '~codeyam/utils';
 import { deepMerge, DeepUpdate } from './jsonUpdateUtils';
-import dbToCommit from './dbToCommit';
 
 type UpdateCommitMetadataArgs = {
   commitId?: string;
@@ -19,10 +13,7 @@ type UpdateCommitMetadataArgs = {
   metadataUpdate?: DeepUpdate<CommitMetadata>;
   runStatusUpdate?: DeepUpdate<CommitRunStatus>;
   archiveCurrentRun?: boolean;
-  updateCallback?: (
-    metadata: CommitMetadata,
-    commit: DeepReadonly<Commit>,
-  ) => void | Promise<void>;
+  updateCallback?: (metadata: CommitMetadata) => void | Promise<void>;
 };
 
 export default async function updateCommitMetadata({
@@ -37,9 +28,11 @@ export default async function updateCommitMetadata({
     return await getDatabase()
       .transaction()
       .execute(async (trx) => {
+        // Only select what we need - the files column can be 1MB+ and kills performance
+        // If updateCallback is provided, it might need the full commit, so use selectAll
         const commit = await trx
           .selectFrom('commits')
-          .selectAll()
+          .select(['id', 'metadata'])
           .$if(!!commitId, (qb: any) => qb.where('id', '=', commitId))
           .$if(!!commitSha, (qb: any) => qb.where('sha', '=', commitSha))
           .executeTakeFirst();
@@ -150,7 +143,7 @@ export default async function updateCommitMetadata({
 
         // Allow callback to perform complex atomic updates
         if (updateCallback) {
-          await updateCallback(updatedMetadata, dbToCommit(commit));
+          await updateCallback(updatedMetadata);
         }
 
         try {
@@ -158,7 +151,7 @@ export default async function updateCommitMetadata({
             .updateTable('commits')
             .set({ metadata: JSON.stringify(updatedMetadata) })
             .where('id', '=', commit.id)
-            .returningAll()
+            .returning(['id']) // Don't return all columns - files can be 1MB+
             .executeTakeFirst();
 
           if (!result) {

package/analyzer-template/packages/database/src/lib/userScenarioToDb.ts

@@ -1,7 +1,7 @@
 import { UserScenario } from '~codeyam/types';
 import { Insertable } from 'kysely';
 import { UserScenariosTable } from './kysely/tables/userScenariosTable';
-import { randomUUID } from 'crypto';
+const randomUUID = () => crypto.randomUUID();
 
 export default function userScenarioToDb(
   userScenario: UserScenario,

package/analyzer-template/packages/generate/index.ts

@@ -1,6 +1,8 @@
 export { default as getComponentImportStatements } from './src/lib/getComponentImportStatements';
 export { default as componentScenarioPageRemix } from './src/lib/componentScenarioPage/componentScenarioPageRemix';
 export { default as componentScenarioPageNext } from './src/lib/componentScenarioPage/componentScenarioPageNext';
+export { default as generateScenarioServerComponent } from './src/lib/componentScenarioPage/generateScenarioServerComponent';
+export { default as generateScenarioClientWrapper } from './src/lib/componentScenarioPage/generateScenarioClientWrapper';
 export { default as getComponentScenarioPath } from './src/lib/getComponentScenarioPath';
 export { default as libDemoComponent } from './src/lib/libDemoComponent';
 export { default as directExecutionScript } from './src/lib/directExecutionScript';
@@ -9,4 +11,5 @@ export { default as safeFolder } from './src/lib/safeFolder';
 export { default as deepMerge } from './src/lib/deepMerge';
 export { default as simpleRootRemix } from './src/lib/simpleRootRemix';
 export { default as mergeRootRemix } from './src/lib/mergeRootRemix';
+export { default as scenarioComponentForServer } from './src/lib/scenarioComponentForServer';
 export { PLACEHOLDER_IMAGE_SRC } from './src/lib/constants';

package/analyzer-template/packages/generate/src/lib/componentScenarioPage/componentScenarioPageNext.ts

@@ -6,6 +6,7 @@ import escapeQuotes from '../escapeQuotes';
 import getIFrameMessageListenerCode from './getIFrameMessageListenerCode';
 import getImageReplacementCode from './getImageReplacementCode';
 import getNextJsErrorClosingCode from './getNextJsErrorClosingCode';
+import generateScenarioServerComponent from './generateScenarioServerComponent';
 
 const VERSION = '0.5.1';
 
@@ -28,6 +29,21 @@ export default function componentScenarioPageNext({
 }) {
   const fileName = file.name.split('.')[0];
 
+  // For async components (Server Components), generate a Server Component page
+  // that uses a separate client wrapper for interactive features
+  if (entity.metadata?.isAsync) {
+    return generateScenarioServerComponent({
+      file,
+      entity,
+      analysis,
+      currentPath,
+      appPath,
+      scenario,
+      relativeMocksDir,
+    });
+  }
+
+  // For non-async components, use the existing client component approach
   return `/* eslint-disable */
   "use client";
   import {
@@ -58,7 +74,7 @@ ${getComponentImportStatement({
 ${getImageReplacementCode()}
 
 function Scenario({ name, width, height, children }: { name: string, width: string, height: string, children: ReactNode }) {
-  
+
   useEffect(() => {
     if (typeof window === 'undefined') return;
 

package/analyzer-template/packages/generate/src/lib/componentScenarioPage/generateScenarioClientWrapper.ts

@@ -0,0 +1,193 @@
+import type { Scenario } from '~codeyam/types';
+import { safeFileName } from '~codeyam/utils';
+import getImageReplacementCode from './getImageReplacementCode';
+import getNextJsErrorClosingCode from './getNextJsErrorClosingCode';
+
+/**
+ * Generates the ScenarioClientWrapper component code.
+ * This is a Client Component that handles all the interactive features
+ * (iframe messaging, console interception, error closing, etc.)
+ * while allowing the actual page to be a Server Component.
+ */
+export default function generateScenarioClientWrapper(
+  scenario: Scenario,
+): string {
+  const safeScenarioName = safeFileName(scenario.name);
+
+  return `"use client";
+/* eslint-disable */
+// ScenarioClientWrapper - Client Component for interactive features
+// This wraps Server Components to add client-side interactivity
+
+import {
+  useCallback,
+  useEffect,
+  useState,
+  type ReactNode,
+} from 'react';
+import { scenarios } from "./MockData_${safeScenarioName}";
+
+// Inject image interception code at module level
+${getImageReplacementCode()}
+
+interface ScenarioClientWrapperProps {
+  scenarioName: string;
+  fileName: string;
+  version: string;
+  children: ReactNode;
+}
+
+export function ScenarioClientWrapper({
+  scenarioName,
+  fileName,
+  version,
+  children,
+}: ScenarioClientWrapperProps) {
+  const [internalVersion, setInternalVersion] = useState(1);
+  const [searchParams] = useState(() =>
+    typeof window !== 'undefined'
+      ? new URLSearchParams(window.location.search)
+      : new URLSearchParams()
+  );
+  const widthOverride = searchParams.get('width');
+  const heightOverride = searchParams.get('height') || 'auto';
+
+  // Set page metadata
+  useEffect(() => {
+    document.title = \`\${fileName}: \${scenarioName} CodeYam Demo v\${version}\`;
+    let metaDesc = document.querySelector('meta[name="description"]');
+    if (!metaDesc) {
+      metaDesc = document.createElement('meta');
+      metaDesc.setAttribute('name', 'description');
+      document.head.appendChild(metaDesc);
+    }
+    metaDesc.setAttribute('content', \`This is a demo of the \${fileName} component\`);
+  }, [fileName, scenarioName, version]);
+
+  // Message posting helper
+  const respond = useCallback((message: any) => {
+    try {
+      window.parent.postMessage({
+        type: 'codeyam-update',
+        name: scenarioName,
+        message,
+      }, '*');
+    } catch (e) {
+      console.warn('Error posting message to parent', message, e);
+    }
+  }, [scenarioName]);
+
+  // Handle data override messages from parent
+  useEffect(() => {
+    const eventListener = (event: MessageEvent) => {
+      if (event.data.type === 'codeyam-override-data') {
+        const parsedData = JSON.parse(event.data.data);
+        console.log("Override data received");
+        respond("Set override data to " + JSON.stringify(parsedData, null, 2));
+        scenarios().updateData(scenarioName, parsedData);
+        setInternalVersion(prev => prev + 1);
+      }
+    };
+    window.addEventListener('message', eventListener);
+    return () => window.removeEventListener('message', eventListener);
+  }, [respond, scenarioName]);
+
+  // Console interception
+  useEffect(() => {
+    const oldConsoleLog = console.log;
+    console.log = function(...args: any[]) {
+      oldConsoleLog(...args);
+      try {
+        window.parent.postMessage({
+          type: 'codeyam-log',
+          name: scenarioName,
+          data: {
+            log: {
+              name: "console.log",
+              args
+            }
+          }
+        }, '*');
+      } catch (e) {
+        oldConsoleLog('Error posting message to parent', e);
+      }
+    };
+
+    const oldConsoleError = console.error;
+    console.error = function(...args: any[]) {
+      oldConsoleError(...args);
+      window.parent.postMessage({
+        type: 'codeyam-log',
+        name: scenarioName,
+        data: {
+          log: {
+            name: "console.error",
+            args
+          }
+        }
+      }, '*');
+    };
+
+    return () => {
+      console.log = oldConsoleLog;
+      console.error = oldConsoleError;
+    };
+  }, [scenarioName]);
+
+  // Next.js error closing
+  ${getNextJsErrorClosingCode()}
+
+  // Height calculation and resize messaging
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const calculateHeight = () => {
+      const bodyHeight = document.body.offsetHeight;
+      const htmlHeight = document.documentElement.offsetHeight;
+      const scrollHeight = Math.max(
+        document.body.scrollHeight,
+        document.documentElement.scrollHeight,
+        document.body.offsetHeight,
+        document.documentElement.offsetHeight,
+        document.body.clientHeight,
+        document.documentElement.clientHeight
+      );
+      return Math.max(100, bodyHeight, htmlHeight, scrollHeight);
+    };
+
+    const calculatedHeight = calculateHeight();
+    parent.postMessage({ type: 'codeyam-resize', name: scenarioName, height: calculatedHeight }, '*');
+
+    const eventListener = (event: MessageEvent) => {
+      if (event.data.name === scenarioName) {
+        if (event.data.type === 'codeyam-respond') {
+          const calculatedHeight = calculateHeight();
+          parent.postMessage({ type: 'codeyam-resize', name: scenarioName, height: calculatedHeight }, '*');
+        }
+      }
+    };
+
+    window.addEventListener('message', eventListener);
+    return () => window.removeEventListener('message', eventListener);
+  }, [scenarioName]);
+
+  const width = widthOverride || 'auto';
+
+  return (
+    <div className='flex flex-col justify-center items-center h-screen' data-version={internalVersion}>
+      <div className='w-full flex items-center justify-center'>
+        <div id='component' style={{
+          minWidth: width !== 'auto' ? \`min(\${width}, 100vw)\` : undefined,
+          height: heightOverride !== 'auto' ? heightOverride : undefined,
+          minHeight: heightOverride !== 'auto' ? heightOverride : undefined,
+          display: 'block',
+          padding: '6px'
+        }}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+`;
+}

package/analyzer-template/packages/generate/src/lib/componentScenarioPage/generateScenarioServerComponent.ts

@@ -0,0 +1,73 @@
+import { Entity, Analysis, type File, type Scenario } from '~codeyam/types';
+import { safeFileName } from '~codeyam/utils';
+import getComponentImportStatement from '../getComponentImportStatement';
+import scenarioComponentForServer from '../scenarioComponentForServer';
+
+const VERSION = '0.5.1';
+
+/**
+ * Generates a Server Component page for async components (Server Components in Next.js).
+ *
+ * This is needed because:
+ * 1. Async components use await, which only works in Server Components
+ * 2. Client Components ("use client") don't support async/await in the component body
+ * 3. We use Next.js composition pattern: Server Component page renders the async component,
+ *    then wraps it in a Client Component (ScenarioClientWrapper) for interactive features
+ */
+export default function generateScenarioServerComponent({
+  file,
+  entity,
+  analysis,
+  currentPath,
+  appPath,
+  scenario,
+  relativeMocksDir,
+}: {
+  file: File;
+  entity: Entity;
+  analysis: Analysis;
+  currentPath: string;
+  appPath: string;
+  scenario: Scenario;
+  relativeMocksDir: string;
+}) {
+  const fileName = file.name.split('.')[0];
+  const safeScenarioName = safeFileName(scenario.name);
+
+  return `/* eslint-disable */
+// Server Component page for async component: ${entity.name}
+// This page does NOT have "use client" - it runs on the server
+import { ScenarioClientWrapper } from "${relativeMocksDir}/ScenarioClientWrapper";
+${analysis.scenarios?.length > 0 ? `import { scenarios } from "${relativeMocksDir}/MockData_${safeScenarioName}";` : ''}
+${getComponentImportStatement({
+  file,
+  entity,
+  analysis,
+  currentPath,
+  appPath,
+  scenario,
+  primary: true,
+  namedExport:
+    entity.name !== 'default' &&
+    (entity.metadata?.notExported || entity.metadata?.namedExport) &&
+    entity.entityType !== 'library',
+})}
+
+function getScenarioProps({ argumentIndex, propName }: { argumentIndex: number, propName?: string }) {
+  const data = scenarios().data();
+  const argument = data['arguments'][argumentIndex];
+  return propName ? argument[propName] : argument;
+}
+
+export default async function Index() {
+  return (
+    <ScenarioClientWrapper
+      scenarioName="${scenario.name}"
+      fileName="${fileName}"
+      version="${VERSION}"
+    >
+      ${scenarioComponentForServer(entity, analysis, scenario)}
+    </ScenarioClientWrapper>
+  );
+}`;
+}

package/analyzer-template/packages/generate/src/lib/deepMerge.ts

@@ -14,6 +14,26 @@ export default function deepMerge(
       seen.add(changes);
     }
 
+    // Handle arrays at the top level - this is critical for nested arrays (tuples)
+    // like [["path", { data }]] which should NOT be converted to objects
+    if (Array.isArray(changes)) {
+      const defaultArray = Array.isArray(defaultData) ? defaultData : [];
+      const result: any[] = [];
+      for (let i = 0; i < changes.length; i++) {
+        const item = changes[i];
+        if (item && typeof item === 'object' && !Array.isArray(item)) {
+          // Merge object items with corresponding default array item
+          result[i] = deepMerge(defaultArray[i], item, seen);
+        } else if (Array.isArray(item)) {
+          // Recursively handle nested arrays (tuples)
+          result[i] = deepMerge(defaultArray[i], item, seen);
+        } else {
+          result[i] = item;
+        }
+      }
+      return result;
+    }
+
     const merge = { ...defaultData };
     for (const key in changes) {
       if (changes[key] === null) {
@@ -21,11 +41,16 @@ export default function deepMerge(
         // to distinguish between "not loaded" (undefined) and "explicitly null" (null)
         merge[key] = null;
       } else if (Array.isArray(changes[key])) {
+        // Get the original default array BEFORE we replace it
+        const defaultArray = Array.isArray(defaultData[key])
+          ? defaultData[key]
+          : [];
         merge[key] = [];
         for (let i = 0; i < changes[key].length; i++) {
           const item = changes[key][i];
           if (typeof item === 'object' && item !== null) {
-            merge[key][i] = deepMerge(merge?.[key]?.[i], item, seen);
+            // Merge with corresponding item from default array by index position
+            merge[key][i] = deepMerge(defaultArray[i], item, seen);
           } else {
             merge[key][i] = item;
           }