feat: Changed the diff display to be a structural diff

Author: kevinwang5658

package-lock.json

@@ -5,7 +5,7 @@
   },
   "dependencies": {
     "@codifycli/ink-form": "0.0.12",
-    "@codifycli/schemas": "1.1.0-beta.10",
+    "@codifycli/schemas": "1.2.0",
     "@homebridge/node-pty-prebuilt-multiarch": "^0.13.1",
     "@mischnic/json-sourcemap": "^0.1.1",
     "@oclif/core": "^4.0.8",
@@ -43,7 +43,7 @@
   },
   "description": "Codify is a configuration-as-code tool that declaratively installs and manages developer tools and applications. Check out https://dashboard.codifycli.com for an editor.",
   "devDependencies": {
-    "@codifycli/plugin-core": "^1.1.0-beta.25",
+    "@codifycli/plugin-core": "^1.2.0",
     "@oclif/prettier-config": "^0.2.1",
     "@types/chalk": "^2.2.0",
     "@types/cors": "^2.8.19",
@@ -145,7 +145,7 @@
     "deploy": "npm run pkg && npm run notarize && npm run upload",
     "prepublishOnly": "npm run build"
   },
-  "version": "1.1.1-beta.6",
+  "version": "1.2.0-beta.1",
   "bugs": "https://github.com/codifycli/codify/issues",
   "keywords": [
     "oclif",

package.json

@@ -1,5 +1,4 @@
 import chalk from 'chalk';
-import * as Diff from 'diff';
 import { ParameterOperation, PlanResponseData, ResourceOperation } from '@codifycli/schemas';
 
 import { Plan, ResourcePlan } from '../entities/plan.js';
@@ -227,53 +226,63 @@ function isPlainObject(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
 
-function formatObjectDiff(name: string, previousValue: object, newValue: object): string {
-  const prevJson = JSON.stringify(previousValue, null, 2);
-  const newJson = JSON.stringify(newValue, null, 2);
-  const diff = Diff.diffLines(prevJson, newJson);
-
-  const coloredLines: Array<{ text: string; added: boolean; removed: boolean }> = [];
-  for (const part of diff) {
-    const lines = part.value.split('\n').filter((l) => l.length > 0);
-    for (const line of lines) {
-      // Skip the outer { } braces — we render those as the header/footer
-      if (line === '{' || line === '}') continue;
-      coloredLines.push({
-        text: part.added ? chalk.green(line) : part.removed ? chalk.red(line) : line,
-        added: part.added ?? false,
-        removed: part.removed ?? false,
-      });
+function formatObjectDiff(name: string, previousValue: Record<string, unknown>, newValue: Record<string, unknown>): string {
+  const allKeys = Array.from(new Set([...Object.keys(previousValue), ...Object.keys(newValue)]));
+
+  type Entry = { op: 'noop' | 'add' | 'remove' | 'modify'; key: string; prev?: unknown; next?: unknown };
+  const entries: Entry[] = allKeys.map((key) => {
+    const inPrev = Object.hasOwn(previousValue, key);
+    const inNext = Object.hasOwn(newValue, key);
+    if (!inPrev) return { op: 'add', key, next: newValue[key] };
+    if (!inNext) return { op: 'remove', key, prev: previousValue[key] };
+    if (JSON.stringify(previousValue[key]) === JSON.stringify(newValue[key])) {
+      return { op: 'noop', key, next: newValue[key] };
     }
-  }
+    return { op: 'modify', key, prev: previousValue[key], next: newValue[key] };
+  });
 
   const CONTEXT = 2;
-  const included = new Set<number>();
-  for (let i = 0; i < coloredLines.length; i++) {
-    if (coloredLines[i].added || coloredLines[i].removed) {
-      for (let j = Math.max(0, i - CONTEXT); j <= Math.min(coloredLines.length - 1, i + CONTEXT); j++) {
-        included.add(j);
+  const includedIndices = new Set<number>();
+  for (let i = 0; i < entries.length; i++) {
+    if (entries[i].op !== 'noop') {
+      for (let j = Math.max(0, i - CONTEXT); j <= Math.min(entries.length - 1, i + CONTEXT); j++) {
+        includedIndices.add(j);
       }
     }
   }
 
   const resultLines: string[] = [`${chalk.yellow('~')}    "${name}": {`];
   let lastIncluded = -1;
 
-  for (let i = 0; i < coloredLines.length; i++) {
-    if (!included.has(i)) continue;
+  for (let i = 0; i < entries.length; i++) {
+    if (!includedIndices.has(i)) continue;
     if (lastIncluded !== -1 && i > lastIncluded + 1) {
       resultLines.push('         ...');
     }
-    const { text, added, removed } = coloredLines[i];
-    const symbol = added ? chalk.green('+') : removed ? chalk.red('-') : ' ';
-    resultLines.push(`  ${symbol}      ${text}`);
     lastIncluded = i;
+    const { op, key, prev, next } = entries[i];
+
+    if (op === 'noop') {
+      resultLines.push(`       "${key}": ${formatValue(next)},`);
+    } else if (op === 'add') {
+      resultLines.push(`  ${chalk.green('+')}      ${chalk.green(`"${key}": ${formatValue(next)},`)}`);
+    } else if (op === 'remove') {
+      resultLines.push(`  ${chalk.red('-')}      ${chalk.red(`"${key}": ${formatValue(prev)},`)}`);
+    } else {
+      resultLines.push(`  ${chalk.yellow('~')}      "${key}": ${formatValue(prev)} -> ${formatValue(next)},`);
+    }
   }
 
   resultLines.push('      },');
   return resultLines.join('\n');
 }
 
+function formatValue(value: unknown): string {
+  if (typeof value === 'string') return `"${value}"`;
+  if (value === null || value === undefined) return String(value);
+  return JSON.stringify(value);
+}
+
 const OBJECT_SINGLE_SIDE_MAX_LINES = 20;
 
 function formatObjectSingleSide(name: string, value: object, operation: ParameterOperation): string {