diff --git a/.bitmap b/.bitmap
index d3b670580fe4..3cf5c986e17a 100644
--- a/.bitmap
+++ b/.bitmap
@@ -1710,6 +1710,14 @@
         "mainFile": "index.ts",
         "rootDir": "scopes/ui-foundation/ui"
     },
+    "ui/api-diff-view": {
+        "name": "ui/api-diff-view",
+        "scope": "",
+        "version": "",
+        "defaultScope": "teambit.semantics",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/api-diff-view"
+    },
     "ui/aspect-box": {
         "name": "ui/aspect-box",
         "scope": "teambit.harmony",
@@ -1759,6 +1767,41 @@
         "mainFile": "index.ts",
         "rootDir": "components/ui/code-view"
     },
+    "ui/compare/lane-compare": {
+        "name": "ui/compare/lane-compare",
+        "scope": "teambit.lanes",
+        "version": "0.0.206",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/compare/lane-compare",
+        "config": {
+            "teambit.dependencies/dependency-resolver": {
+                "policy": {
+                    "dependencies": {
+                        "@teambit/legacy": "-"
+                    },
+                    "devDependencies": {
+                        "@types/mocha": "9.1.0",
+                        "@teambit/legacy": "-"
+                    },
+                    "peerDependencies": {}
+                }
+            }
+        }
+    },
+    "ui/compare/lane-compare-hooks/use-lane-diff-status": {
+        "name": "ui/compare/lane-compare-hooks/use-lane-diff-status",
+        "scope": "teambit.lanes",
+        "version": "0.0.144",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/compare/lane-compare-hooks/use-lane-diff-status"
+    },
+    "ui/compare/lane-compare-page": {
+        "name": "ui/compare/lane-compare-page",
+        "scope": "teambit.lanes",
+        "version": "0.0.174",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/compare/lane-compare-page"
+    },
     "ui/component-compare/changelog": {
         "name": "ui/component-compare/changelog",
         "scope": "teambit.component",
@@ -1836,6 +1879,13 @@
         "mainFile": "index.ts",
         "rootDir": "components/ui/component-filters/show-main-filter"
     },
+    "ui/component-meta": {
+        "name": "ui/component-meta",
+        "scope": "teambit.component",
+        "version": "0.0.368",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/component-meta"
+    },
     "ui/component-preview": {
         "name": "ui/component-preview",
         "scope": "teambit.preview",
@@ -1843,6 +1893,14 @@
         "mainFile": "index.ts",
         "rootDir": "scopes/preview/ui/component-preview"
     },
+    "ui/components-overview": {
+        "name": "ui/components-overview",
+        "scope": "",
+        "version": "",
+        "defaultScope": "teambit.explorer",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/components-overview"
+    },
     "ui/composition-compare": {
         "name": "ui/composition-compare",
         "scope": "teambit.compositions",
@@ -1871,6 +1929,28 @@
         "mainFile": "index.ts",
         "rootDir": "scopes/cloud/ui/current-user"
     },
+    "ui/deps-diff-table": {
+        "name": "ui/deps-diff-table",
+        "scope": "",
+        "version": "",
+        "defaultScope": "teambit.dependencies",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/deps-diff-table"
+    },
+    "ui/diff-viewer": {
+        "name": "ui/diff-viewer",
+        "scope": "",
+        "version": "",
+        "defaultScope": "teambit.code",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/diff-viewer",
+        "config": {
+            "teambit.react/react-env@1.3.5": {},
+            "teambit.envs/envs": {
+                "env": "teambit.react/react-env"
+            }
+        }
+    },
     "ui/docs-app": {
         "name": "ui/docs-app",
         "scope": "teambit.react",
@@ -1941,6 +2021,61 @@
         "mainFile": "index.ts",
         "rootDir": "components/ui/hooks/use-core-aspects"
     },
+    "ui/hooks/use-data-query": {
+        "name": "ui/hooks/use-data-query",
+        "scope": "teambit.ui-foundation",
+        "version": "0.0.506",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/hooks/use-data-query"
+    },
+    "ui/inline-code-compare": {
+        "name": "ui/inline-code-compare",
+        "scope": "",
+        "version": "",
+        "defaultScope": "teambit.code",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/inline-code-compare"
+    },
+    "ui/inline-config-compare": {
+        "name": "ui/inline-config-compare",
+        "scope": "",
+        "version": "",
+        "defaultScope": "teambit.review",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/inline-config-compare"
+    },
+    "ui/inline-deps-compare": {
+        "name": "ui/inline-deps-compare",
+        "scope": "",
+        "version": "",
+        "defaultScope": "teambit.review",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/inline-deps-compare"
+    },
+    "ui/inline-diff-viewer": {
+        "name": "ui/inline-diff-viewer",
+        "scope": "",
+        "version": "",
+        "defaultScope": "teambit.code",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/inline-diff-viewer"
+    },
+    "ui/inline-preview-compare": {
+        "name": "ui/inline-preview-compare",
+        "scope": "",
+        "version": "",
+        "defaultScope": "teambit.preview",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/inline-preview-compare"
+    },
+    "ui/inline-tests-compare": {
+        "name": "ui/inline-tests-compare",
+        "scope": "",
+        "version": "",
+        "defaultScope": "teambit.review",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/inline-tests-compare"
+    },
     "ui/inputs/lane-selector": {
         "name": "ui/inputs/lane-selector",
         "scope": "teambit.lanes",
@@ -1997,6 +2132,14 @@
         "mainFile": "index.ts",
         "rootDir": "components/ui/preserve-workspace-mode"
     },
+    "ui/preview-compare": {
+        "name": "ui/preview-compare",
+        "scope": "",
+        "version": "",
+        "defaultScope": "teambit.preview",
+        "mainFile": "index.ts",
+        "rootDir": "components/ui/preview-compare"
+    },
     "ui/preview-placeholder": {
         "name": "ui/preview-placeholder",
         "scope": "teambit.preview",
diff --git a/.gitignore b/.gitignore
index 3e5d08726c35..25c68dc027b3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -82,3 +82,11 @@ package-lock.json
 # Release notes temp files (for review only)
 releases-docs/temp-files/
 
+# Local-only planning / spec / analysis docs — not shipped with the repo.
+# Lives on individual contributors' machines for session context; not part of the project.
+# Anchored to repo root so it doesn't also match `scopes/docs/docs` (the docs aspect).
+/docs/
+
+
+# superpowers brainstorm artifacts
+.superpowers/
diff --git a/components/entities/semantic-schema-diff/api-diff-change.ts b/components/entities/semantic-schema-diff/api-diff-change.ts
index c92b4e06625e..f447b2472660 100644
--- a/components/entities/semantic-schema-diff/api-diff-change.ts
+++ b/components/entities/semantic-schema-diff/api-diff-change.ts
@@ -11,6 +11,27 @@ export enum APIDiffStatus {
   MODIFIED = 'MODIFIED',
 }
 
+/**
+ * why a schema could not be obtained for one side of the diff.
+ * NOT_BUILT — the version was built before API extraction existed (no schema.json artifact).
+ * NO_EXTRACTOR — the component's env does not provide a schema extractor.
+ * DISABLED — schema extraction is disabled by config.
+ * FAILED — extraction or artifact retrieval threw.
+ */
+export type SchemaUnavailableReason = 'NOT_BUILT' | 'NO_EXTRACTOR' | 'DISABLED' | 'FAILED';
+
+export type SchemaAvailability = {
+  available: boolean;
+  reason?: SchemaUnavailableReason;
+};
+
+/**
+ * whether the diff was actually computed, or skipped because schema data is
+ * missing for one or both sides. when not COMPUTED, change lists are empty —
+ * a missing schema must never be diffed as if it were an empty API.
+ */
+export type APIDiffComputeStatus = 'COMPUTED' | 'BASE_UNAVAILABLE' | 'COMPARE_UNAVAILABLE' | 'UNAVAILABLE';
+
 export type APIDiffChange = {
   status: APIDiffStatus;
   visibility: 'public' | 'internal';
@@ -26,11 +47,23 @@ export type APIDiffChange = {
 };
 
 export type APIDiffResult = {
+  status: APIDiffComputeStatus;
+  base: SchemaAvailability;
+  compare: SchemaAvailability;
   hasChanges: boolean;
+  /** consumer-facing impact — derived from public changes only */
   impact: ImpactLevel;
+  /** severity of internal (non-exported) changes — never affects `impact` */
+  internalImpact: ImpactLevel;
   publicChanges: APIDiffChange[];
   internalChanges: APIDiffChange[];
   changes: APIDiffChange[];
+  /**
+   * exports the extractor couldn't resolve on one or both sides (an `UnImplementedSchema` placeholder).
+   * these are NOT diffed as add/remove/modify — extraction gaps, surfaced separately as "couldn't
+   * analyze" so a real change list stays meaningful.
+   */
+  unresolvedExports: string[];
   added: number;
   removed: number;
   modified: number;
diff --git a/components/entities/semantic-schema-diff/api-diff.ts b/components/entities/semantic-schema-diff/api-diff.ts
index 7059174a39ab..59bc5e4d6224 100644
--- a/components/entities/semantic-schema-diff/api-diff.ts
+++ b/components/entities/semantic-schema-diff/api-diff.ts
@@ -1,17 +1,44 @@
-import type { APISchema } from '@teambit/semantics.entities.semantic-schema';
+import type { APISchema, SchemaNode } from '@teambit/semantics.entities.semantic-schema';
 import { deepEqualNoLocation as deepEqual } from '@teambit/semantics.entities.semantic-schema';
-import type { APIDiffResult, APIDiffChange } from './api-diff-change';
+import type { APIDiffResult, APIDiffChange, SchemaAvailability, APIDiffComputeStatus } from './api-diff-change';
 import { APIDiffStatus } from './api-diff-change';
 import type { ImpactLevel } from './impact-rule';
 import type { ImpactAssessor, AssessedChange } from './impact-assessor';
 import { worstImpact } from './impact-assessor';
-import { buildExportMap, buildInternalMap, getSchemaTypeName, getDisplayName, toComparableObject } from './utils';
+import {
+  buildExportMap,
+  buildInternalMap,
+  getSchemaTypeName,
+  getDisplayName,
+  getExportName,
+  unwrapExport,
+  toComparableObject,
+} from './utils';
+
+/**
+ * Names of exports the extractor couldn't resolve on a side — it produced an `UnImplementedSchema`
+ * placeholder (no signature, no structure) rather than a real schema node. These are extraction gaps,
+ * not API surface, and must never be diffed as added/removed/modified. We collect them so the diff can
+ * (a) suppress the phantom add/remove they'd otherwise cause and (b) surface them as a distinct
+ * "couldn't analyze" state instead of a meaningful change.
+ */
+function collectUnresolvedNames(exports: SchemaNode[]): Set<string> {
+  const names = new Set<string>();
+  for (const exp of exports) {
+    if (getSchemaTypeName(unwrapExport(exp)) === 'UnImplementedSchema') {
+      const name = getExportName(exp);
+      if (name) names.add(name);
+    }
+  }
+  return names;
+}
 
 function diffExports(
   baseExports: ReturnType<typeof buildExportMap>,
   compareExports: ReturnType<typeof buildExportMap>,
   visibility: 'public' | 'internal',
-  assessor: ImpactAssessor
+  assessor: ImpactAssessor,
+  unresolved?: { base: Set<string>; compare: Set<string>; out: Set<string> }
 ): APIDiffChange[] {
   const allNames = new Set([...baseExports.keys(), ...compareExports.keys()]);
   const changes: APIDiffChange[] = [];
@@ -21,6 +48,12 @@ function diffExports(
     const compareEntry = compareExports.get(name);
 
     if (!baseEntry && compareEntry) {
+      // Present in compare, absent from base — but if base had it as an unresolved placeholder it
+      // existed there too; this is an extraction gap, not a new export. Surface it, don't add it.
+      if (unresolved?.base.has(name)) {
+        unresolved.out.add(name);
+        continue;
+      }
       const addedImpact = assessor.assessFact({
         changeKind: 'export-added',
         description: `export '${name}' added`,
@@ -37,6 +70,12 @@ function diffExports(
         compareNode: compareEntry.unwrapped.toObject(),
       });
     } else if (baseEntry && !compareEntry) {
+      // Absent from compare — but if compare has it as an unresolved placeholder it's still there,
+      // just un-analyzable. Not a removal; surface as "couldn't analyze" instead of a phantom remove.
+      if (unresolved?.compare.has(name)) {
+        unresolved.out.add(name);
+        continue;
+      }
       const removedImpact = assessor.assessFact({
         changeKind: 'export-removed',
         description: `export '${name}' removed`,
@@ -57,12 +96,21 @@ function diffExports(
       const compareComparable = toComparableObject(compareEntry.unwrapped);
 
       if (!deepEqual(baseComparable, compareComparable)) {
-        const facts = baseEntry.unwrapped.diff?.(compareEntry.unwrapped) ?? [];
+        // Drop facts whose rendered `from`/`to` are identical. The deep compare catches non-semantic
+        // differences (resolved-type internals, member ordering, build artifacts) that don't change
+        // the visible API — they'd otherwise surface as "X changed" rows with no actual diff, the bulk
+        // of the noise after an env/build change. A real change always renders a different from/to.
+        const facts = (baseEntry.unwrapped.diff?.(compareEntry.unwrapped) ?? []).filter(
+          (f) => !(f.from != null && f.to != null && f.from === f.to)
+        );
         const assessed: AssessedChange[] = assessor.assess(facts);
 
         const baseSig = baseEntry.unwrapped.signature;
         const compareSig = compareEntry.unwrapped.signature;
-        const sigsDiffer = baseSig !== compareSig;
+        // require both signatures: a null on one side is missing extraction data, not a real change.
+        // without this guard a real signature vs. `undefined` reads as "differ", so an export with no
+        // actual change is emitted as MODIFIED (empty block) instead of being skipped below.
+        const sigsDiffer = Boolean(baseSig && compareSig && baseSig !== compareSig);
 
         // Skip if no semantic changes detected — the structural difference is
         // just metadata (locations, ordering) that doesn't affect the API.
@@ -108,6 +156,24 @@ function dedupeInternals(
   return deduped;
 }
 
+/**
+ * Drop exports that are bare re-references (a `TypeRefSchema`) to a symbol already exported under its
+ * own name in the same module — e.g. `export default Foo` where `Foo` is also a named export. Such an
+ * alias adds no independent API surface, and extractors represent it inconsistently across builds
+ * (an unresolved default one build, a `Foo (default)` type-ref alias the next). Left in, that
+ * inconsistency surfaces as a phantom added/removed export on an otherwise unrelated (e.g. docs-only)
+ * change. Mirrors `dedupeInternals` — remove the redundant entry so the diff sees only real surface.
+ */
+function dedupeReexportAliases(exports: ReturnType<typeof buildExportMap>): ReturnType<typeof buildExportMap> {
+  for (const [key, entry] of exports) {
+    const target = (entry.unwrapped as any)?.name;
+    if (getSchemaTypeName(entry.unwrapped) === 'TypeRefSchema' && target && target !== key && exports.has(target)) {
+      exports.delete(key);
+    }
+  }
+  return exports;
+}
+
 /**
  * Detect symbols that moved between public and internal across versions.
  * Returns the visibility change entries and mutates the maps to remove the
@@ -191,9 +257,64 @@ function detectVisibilityChanges(
   return changes;
 }
 
-export function computeAPIDiff(base: APISchema, compare: APISchema, assessor: ImpactAssessor): APIDiffResult {
-  const baseExports = buildExportMap(base.module.exports);
-  const compareExports = buildExportMap(compare.module.exports);
+export type APIDiffAvailability = {
+  base: SchemaAvailability;
+  compare: SchemaAvailability;
+};
+
+const AVAILABLE: SchemaAvailability = { available: true };
+
+function emptyResult(status: APIDiffComputeStatus, availability: APIDiffAvailability): APIDiffResult {
+  return {
+    status,
+    base: availability.base,
+    compare: availability.compare,
+    hasChanges: false,
+    impact: 'PATCH',
+    internalImpact: 'PATCH',
+    publicChanges: [],
+    internalChanges: [],
+    changes: [],
+    unresolvedExports: [],
+    added: 0,
+    removed: 0,
+    modified: 0,
+    breaking: 0,
+    nonBreaking: 0,
+    patch: 0,
+  };
+}
+
+export function computeAPIDiff(
+  base: APISchema,
+  compare: APISchema,
+  assessor: ImpactAssessor,
+  availability: APIDiffAvailability = { base: AVAILABLE, compare: AVAILABLE }
+): APIDiffResult {
+  // A missing schema must never be diffed as if it were an empty API — one empty side
+  // would report the entire surface as added/removed, and two empty sides would be
+  // indistinguishable from "no changes". Short-circuit with an explicit status instead.
+  if (!availability.base.available || !availability.compare.available) {
+    const status: APIDiffComputeStatus =
+      !availability.base.available && !availability.compare.available
+        ? 'UNAVAILABLE'
+        : !availability.base.available
+          ? 'BASE_UNAVAILABLE'
+          : 'COMPARE_UNAVAILABLE';
+    return emptyResult(status, availability);
+  }
+
+  const baseExports = dedupeReexportAliases(buildExportMap(base.module.exports));
+  const compareExports = dedupeReexportAliases(buildExportMap(compare.module.exports));
+
+  // Exports the extractor couldn't resolve on either side. Tracked so their absence on the other side
+  // isn't mistaken for an add/remove, and so they can be surfaced as "couldn't analyze" (a `TypeRef`
+  // that resolves to a present export is already handled by dedupeReexportAliases above).
+  const unresolved = {
+    base: collectUnresolvedNames(base.module.exports),
+    compare: collectUnresolvedNames(compare.module.exports),
+    out: new Set<string>(),
+  };
 
   const baseInternals = dedupeInternals(buildInternalMap(base.internals || []), baseExports);
   const compareInternals = dedupeInternals(buildInternalMap(compare.internals || []), compareExports);
@@ -207,9 +328,21 @@ export function computeAPIDiff(base: APISchema, compare: APISchema, assessor: Im
     assessor
   );
 
-  const publicChanges = [...visibilityChanges, ...diffExports(baseExports, compareExports, 'public', assessor)];
+  const publicChanges = [
+    ...visibilityChanges,
+    ...diffExports(baseExports, compareExports, 'public', assessor, unresolved),
+  ];
   const internalChanges = diffExports(baseInternals, compareInternals, 'internal', assessor);
 
+  // Names unresolved on BOTH sides that never surfaced as a resolved export — the export exists but is
+  // opaque to extraction in both versions. (Names resolved on at least one side are not "unresolved".)
+  for (const name of unresolved.base) {
+    if (unresolved.compare.has(name) && !baseExports.has(name) && !compareExports.has(name)) {
+      unresolved.out.add(name);
+    }
+  }
+  const unresolvedExports = [...unresolved.out];
+
   const allChanges = [...publicChanges, ...internalChanges];
 
   const counts = { added: 0, removed: 0, modified: 0, breaking: 0, nonBreaking: 0, patch: 0 };
@@ -222,14 +355,22 @@ export function computeAPIDiff(base: APISchema, compare: APISchema, assessor: Im
     else if (c.impact === 'PATCH') counts.patch++;
   }
 
-  const impact: ImpactLevel = allChanges.length > 0 ? worstImpact(allChanges) : 'PATCH';
+  // Consumer-facing impact comes from public changes only — an internal-only refactor
+  // must not stamp the component MAJOR. Internal severity is reported separately.
+  const impact: ImpactLevel = publicChanges.length > 0 ? worstImpact(publicChanges) : 'PATCH';
+  const internalImpact: ImpactLevel = internalChanges.length > 0 ? worstImpact(internalChanges) : 'PATCH';
 
   return {
+    status: 'COMPUTED',
+    base: availability.base,
+    compare: availability.compare,
     hasChanges: allChanges.length > 0,
     impact,
+    internalImpact,
     publicChanges,
     internalChanges,
     changes: allChanges,
+    unresolvedExports,
     ...counts,
   };
 }
diff --git a/components/entities/semantic-schema-diff/index.ts b/components/entities/semantic-schema-diff/index.ts
index 0520ba8be12c..d4d14df6ef8d 100644
--- a/components/entities/semantic-schema-diff/index.ts
+++ b/components/entities/semantic-schema-diff/index.ts
@@ -1,6 +1,13 @@
 export { computeAPIDiff } from './api-diff';
+export type { APIDiffAvailability } from './api-diff';
 export { APIDiffStatus } from './api-diff-change';
-export type { APIDiffResult, APIDiffChange } from './api-diff-change';
+export type {
+  APIDiffResult,
+  APIDiffChange,
+  SchemaAvailability,
+  SchemaUnavailableReason,
+  APIDiffComputeStatus,
+} from './api-diff-change';
 export type { ImpactLevel, ImpactRule } from './impact-rule';
 export { ImpactAssessor, worstImpact } from './impact-assessor';
 export type { AssessedChange } from './impact-assessor';
diff --git a/components/entities/semantic-schema-diff/utils.ts b/components/entities/semantic-schema-diff/utils.ts
index a2abdffa7ac7..4ca70b8b22de 100644
--- a/components/entities/semantic-schema-diff/utils.ts
+++ b/components/entities/semantic-schema-diff/utils.ts
@@ -37,9 +37,11 @@ export function buildExportMap(
   for (const exp of exports) {
     const name = getExportName(exp);
     const unwrapped = unwrapExport(exp);
-    if (name) {
-      map.set(name, { name, node: exp, unwrapped });
-    }
+    // Skip exports the extractor couldn't resolve — an UnImplementedSchema carries no signature and
+    // is not a real API surface (the display path filters it too). Keeping it here also lets it mask
+    // a real export sharing the same name (last-write-wins on the map key), hiding actual changes.
+    if (!name || getSchemaTypeName(unwrapped) === 'UnImplementedSchema') continue;
+    map.set(name, { name, node: exp, unwrapped });
   }
   return map;
 }
diff --git a/components/entities/semantic-schema/schema-diff-members.ts b/components/entities/semantic-schema/schema-diff-members.ts
index 6fd2c28b879d..f57b0db112d0 100644
--- a/components/entities/semantic-schema/schema-diff-members.ts
+++ b/components/entities/semantic-schema/schema-diff-members.ts
@@ -22,7 +22,9 @@ function classifyMemberChange(base: Record<string, any>, compare: Record<string,
   const baseStripped = { ...base, location: undefined, doc: undefined };
   const compareStripped = { ...compare, location: undefined, doc: undefined };
   if (deepEqualNoLocation(baseStripped, compareStripped)) return 'member-documentation-changed';
-  if (base.signature !== compare.signature) return 'member-signature-changed';
+  // require both signatures present: a null on one side is missing extraction data, not a real
+  // signature change — fall through to the internal (patch) classification rather than flag breaking.
+  if (base.signature && compare.signature && base.signature !== compare.signature) return 'member-signature-changed';
   return 'member-definition-changed';
 }
 
@@ -81,8 +83,11 @@ function diffModifiedMembers(
       const bNode = ((baseNode as any).members as SchemaNode[])?.find((n: any) => n.name === name);
       const cNode = ((compareNode as any).members as SchemaNode[])?.find((n: any) => n.name === name);
       if (bNode && cNode) {
+        // carry the member signature so member-level facts (notably doc-only changes) can show the
+        // declaration as context in the UI — the doc sits on top of the signature it documents.
+        const signature = compareMember.signature || baseMember.signature;
         for (const d of bNode.diff(cNode)) {
-          facts.push({ ...d, description: `${kind} '${name}': ${d.description}` });
+          facts.push({ ...d, description: `${kind} '${name}': ${d.description}`, signature });
         }
         continue;
       }
@@ -103,28 +108,38 @@ function diffModifiedMembers(
 function diffStructural(baseObj: Record<string, any>, compareObj: Record<string, any>): SchemaChangeFact[] {
   const facts: SchemaChangeFact[] = [];
 
+  // NOTE on the `from !== to` guards below: `deepEqualNoLocation` compares the raw nodes, which can
+  // carry non-semantic differences between two builds (resolved-type internals, doc, ordering of
+  // equivalent representations). Those make the deep compare report a change even when the rendered
+  // type the consumer actually sees is identical — e.g. `extends React.Component<P, S>` on both
+  // sides getting flagged MAJOR. So a structural change is only real once its human-comparable
+  // string representation differs; otherwise it's a false positive and we drop it.
   if (!deepEqualNoLocation(baseObj.typeParams, compareObj.typeParams)) {
     const from = (baseObj.typeParams || []).join(', ');
     const to = (compareObj.typeParams || []).join(', ');
-    facts.push({
-      changeKind: 'type-parameters-changed',
-      description: `type parameters changed: <${from || 'none'}> → <${to || 'none'}>`,
-      context: { from, to },
-      from,
-      to,
-    });
+    if (from !== to) {
+      facts.push({
+        changeKind: 'type-parameters-changed',
+        description: `type parameters changed: <${from || 'none'}> → <${to || 'none'}>`,
+        context: { from, to },
+        from,
+        to,
+      });
+    }
   }
 
   if (!deepEqualNoLocation(baseObj.extendsNodes, compareObj.extendsNodes)) {
     const from = (baseObj.extendsNodes || []).map((n: any) => n.name || typeStr(n)).join(', ') || 'none';
     const to = (compareObj.extendsNodes || []).map((n: any) => n.name || typeStr(n)).join(', ') || 'none';
-    facts.push({
-      changeKind: 'extends-changed',
-      description: `extends changed: ${from} → ${to}`,
-      context: { from, to },
-      from,
-      to,
-    });
+    if (from !== to) {
+      facts.push({
+        changeKind: 'extends-changed',
+        description: `extends changed: ${from} → ${to}`,
+        context: { from, to },
+        from,
+        to,
+      });
+    }
   }
 
   if (
@@ -133,13 +148,15 @@ function diffStructural(baseObj: Record<string, any>, compareObj: Record<string,
   ) {
     const from = (baseObj.implementNodes || []).map((n: any) => n.name || typeStr(n)).join(', ') || 'none';
     const to = (compareObj.implementNodes || []).map((n: any) => n.name || typeStr(n)).join(', ') || 'none';
-    facts.push({
-      changeKind: 'implements-changed',
-      description: `implements changed: ${from} → ${to}`,
-      context: { from, to },
-      from,
-      to,
-    });
+    if (from !== to) {
+      facts.push({
+        changeKind: 'implements-changed',
+        description: `implements changed: ${from} → ${to}`,
+        context: { from, to },
+        from,
+        to,
+      });
+    }
   }
 
   return facts;
diff --git a/components/entities/semantic-schema/schema-diff.ts b/components/entities/semantic-schema/schema-diff.ts
index f7ce0d83954d..d3994d65496c 100644
--- a/components/entities/semantic-schema/schema-diff.ts
+++ b/components/entities/semantic-schema/schema-diff.ts
@@ -5,6 +5,11 @@ export type SchemaChangeFact = {
   context: Record<string, any>;
   from?: string;
   to?: string;
+  /**
+   * the owning member's signature, carried on member-level facts (e.g. a doc-only change) so the UI
+   * can show the declaration as context — "what member is this doc/change on" — next to the diff.
+   */
+  signature?: string;
 };
 
 const SCHEMA_DISPLAY_NAMES: Record<string, string> = {
@@ -122,6 +127,23 @@ export function deepEqualNoLocation(a: any, b: any): boolean {
   return false;
 }
 
+/**
+ * the full human-readable doc text: the description plus every JSDoc tag (`@see …`, `@deprecated …`,
+ * etc.) on its own line. The diff must show the whole comment — surfacing only `doc.comment` drops
+ * the tags, so a "documentation removed" reads as a trimmed fragment of what was actually there.
+ */
+function fullDocText(doc: Record<string, any> | undefined): string | undefined {
+  if (!doc) return undefined;
+  const parts: string[] = [];
+  if (doc.comment) parts.push(doc.comment);
+  for (const tag of doc.tags || []) {
+    const tagName = tag.tagName || tag.name;
+    if (!tagName) continue;
+    parts.push(`@${tagName}${tag.comment ? ` ${tag.comment}` : ''}`);
+  }
+  return parts.join('\n') || doc.raw || undefined;
+}
+
 export function diffDoc(
   baseDoc: Record<string, any> | undefined,
   compareDoc: Record<string, any> | undefined
@@ -134,7 +156,7 @@ export function diffDoc(
         changeKind: 'documentation-added',
         description: 'documentation added',
         context: {},
-        to: compareDoc.comment || '(doc added)',
+        to: fullDocText(compareDoc) || '(doc added)',
       },
     ];
   }
@@ -144,7 +166,7 @@ export function diffDoc(
         changeKind: 'documentation-removed',
         description: 'documentation removed',
         context: {},
-        from: baseDoc.comment || '(doc removed)',
+        from: fullDocText(baseDoc) || '(doc removed)',
       },
     ];
   }
@@ -161,8 +183,8 @@ export function diffDoc(
       changeKind: 'documentation-changed',
       description: `documentation ${changes.join(' and ')} changed`,
       context: {},
-      from: baseDoc?.comment,
-      to: compareDoc?.comment,
+      from: fullDocText(baseDoc),
+      to: fullDocText(compareDoc),
     },
   ];
 }
diff --git a/components/entities/semantic-schema/schema-node.ts b/components/entities/semantic-schema/schema-node.ts
index 3078a1081478..f0568bcbc626 100644
--- a/components/entities/semantic-schema/schema-node.ts
+++ b/components/entities/semantic-schema/schema-node.ts
@@ -106,8 +106,11 @@ export abstract class SchemaNode implements ISchemaNode {
     const compareNoDoc = { ...compareObj, doc: undefined, location: undefined };
     if (deepEqualNoLocation(baseNoDoc, compareNoDoc)) return facts;
 
-    // Signature changed
-    if (baseObj.signature !== compareObj.signature) {
+    // Signature changed — only when BOTH sides actually have a signature. A null/empty signature on
+    // one side means the extractor produced no signature there (e.g. an incompletely-built compare
+    // snapshot), not that the API changed; comparing a real signature against `undefined` would
+    // otherwise report a bogus breaking "signature changed" (a major source of false breaking flags).
+    if (baseObj.signature && compareObj.signature && baseObj.signature !== compareObj.signature) {
       facts.push({
         changeKind: 'signature-changed',
         description: 'signature changed',
diff --git a/components/ui/api-diff-view/api-diff-data-context.tsx b/components/ui/api-diff-view/api-diff-data-context.tsx
new file mode 100644
index 000000000000..6dcb02a74223
--- /dev/null
+++ b/components/ui/api-diff-view/api-diff-data-context.tsx
@@ -0,0 +1,177 @@
+import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import type { ReactNode } from 'react';
+import { gql, useQuery } from '@apollo/client';
+import type { APIDiffResult } from './api-diff-model';
+import { API_DIFF_RESULT_FIELDS } from './api-diff-model';
+
+/** number of component pairs requested per bulk api-diff page */
+export const API_DIFF_PAGE_SIZE = 25;
+
+export type ApiDiffPair = {
+  baseId: string;
+  compareId: string;
+};
+
+type ApiDiffsQueryResult = {
+  getHost: { id: string; apiDiffs: Array<APIDiffResult | null> } | null;
+};
+
+export const QUERY_API_DIFFS = gql`
+  query ApiDiffs($pairs: [ComponentComparePair!]!, $offset: Int, $limit: Int, $host: String) {
+    getHost(id: $host) {
+      id
+      apiDiffs(pairs: $pairs, offset: $offset, limit: $limit) {
+        ${API_DIFF_RESULT_FIELDS}
+      }
+    }
+  }
+`;
+
+export type ApiDiffDataContextModel = {
+  /**
+   * look up bulk api-diff data for a component pair by its `compareId`.
+   * `null` = the pair's diff could not be computed, OR it was requested but paging finished/stopped
+   * early before reaching it (so it will never resolve); `undefined` = the pair is not in this
+   * provider's list, or its page has not loaded yet (check `loading` to disambiguate).
+   */
+  getApiDiff: (compareId: string) => APIDiffResult | null | undefined;
+  /** true while pages are still loading; settles to false once every page loads or paging stops early */
+  loading: boolean;
+  /** number of pairs whose data has loaded so far */
+  loadedCount: number;
+};
+
+const ApiDiffDataContext = createContext<ApiDiffDataContextModel | undefined>(undefined);
+
+export function useApiDiffData(): ApiDiffDataContextModel | undefined {
+  return useContext(ApiDiffDataContext);
+}
+
+/**
+ * fires the bulk `apiDiffs` query for the whole `pairs` list and exposes the results via context —
+ * the batched replacement for one `apiDiff` query per component. loads sequentially in pages of
+ * API_DIFF_PAGE_SIZE (page 1 first, then `fetchMore` for each subsequent page) so the API tab makes
+ * ceil(pairs.length / API_DIFF_PAGE_SIZE) requests instead of N.
+ *
+ * gated by `active`: when the API view is not the active tab the query is skipped entirely, so the
+ * mounted-but-hidden pane never touches the network until the user opens it. results stay cached
+ * afterwards (both in Apollo and in the server-side `getAPIDiff` memo). `pairs` is stabilized
+ * internally by content, so callers do not have to memoize it.
+ */
+export function ApiDiffDataProvider({
+  pairs,
+  active,
+  host,
+  children,
+}: {
+  pairs: ApiDiffPair[];
+  active?: boolean;
+  /** GraphQL host id, e.g. "teambit.scope/scope" */
+  host?: string;
+  children: ReactNode;
+}) {
+  // stabilize by content: a new array reference with the same pairs must not restart the query.
+  const pairsKey = JSON.stringify(pairs);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const stablePairs = useMemo(() => pairs, [pairsKey]);
+
+  // only fetch when the API view is active — otherwise the mounted-but-hidden pane fires the bulk query on load.
+  const skip = !active || stablePairs.length === 0;
+
+  const { data, loading, fetchMore } = useQuery<ApiDiffsQueryResult>(QUERY_API_DIFFS, {
+    variables: { pairs: stablePairs, offset: 0, limit: API_DIFF_PAGE_SIZE, host },
+    skip,
+    notifyOnNetworkStatusChange: true,
+  });
+
+  const results: Array<APIDiffResult | null> = data?.getHost?.apiDiffs ?? [];
+  const allLoaded = skip || results.length >= stablePairs.length;
+
+  // flips true once paging terminates early — a page returns empty/short, a fetch fails, or the host is
+  // null — so the loop stops AND `loading` can settle even when fewer results than pairs came back.
+  // reactive (not a ref) so the derived `loading` flag updates. reset on pairs change.
+  const [terminated, setTerminated] = useState(false);
+  useEffect(() => {
+    setTerminated(false);
+  }, [pairsKey]);
+
+  // the pairs set this provider is currently paging — a fetchMore started for an earlier set can still
+  // resolve/reject after `pairs` changed, so its callbacks check this before terminating the new loop.
+  const pairsKeyRef = useRef(pairsKey);
+  useEffect(() => {
+    pairsKeyRef.current = pairsKey;
+  }, [pairsKey]);
+
+  // every page loaded, or paging stopped early: no further requests will be made.
+  const done = allLoaded || terminated;
+
+  // sequential background paging: whenever a page settles and pairs remain, request the next page.
+  useEffect(() => {
+    if (skip || loading || done) return;
+    // guard the async terminations to this page's pairs set: an in-flight fetchMore from a previous
+    // pairsKey must not terminate the paging loop of a newer one.
+    const activeKey = pairsKey;
+    const stillActive = () => pairsKeyRef.current === activeKey;
+    fetchMore({
+      variables: { pairs: stablePairs, offset: results.length, limit: API_DIFF_PAGE_SIZE, host },
+      updateQuery: (prev: any, { fetchMoreResult }: any) => {
+        const prevHost = prev.getHost;
+        if (!fetchMoreResult || !prevHost) {
+          // nothing came back, or the accumulated result has no host (getHost: null) to page against →
+          // can't fetch further; terminate so the effect stops re-issuing fetchMore and loading settles.
+          if (stillActive()) setTerminated(true);
+          return prev;
+        }
+        // a fetchMore issued for a previous pairs set can resolve after `pairs` changed; discard its
+        // page rather than merging it into the current session's results (which would corrupt the new
+        // diff set) or terminating the new loop.
+        if (!stillActive()) return prev;
+        const newItems = fetchMoreResult.getHost?.apiDiffs ?? [];
+        if (newItems.length === 0) setTerminated(true);
+        return {
+          getHost: {
+            ...prevHost,
+            apiDiffs: [...prevHost.apiDiffs, ...newItems],
+          },
+        };
+      },
+    }).catch(() => {
+      // a failed page stops the sequence; pages already loaded stay usable.
+      if (stillActive()) setTerminated(true);
+    });
+  }, [skip, loading, done, results.length, stablePairs, fetchMore, host, pairsKey]);
+
+  const dataByCompareId = useMemo(() => {
+    // results are returned aligned to the requested slice and concatenated in order, so position
+    // `i` corresponds to `stablePairs[i]` (APIDiffResult carries no id to key on directly).
+    const map = new Map<string, APIDiffResult | null>();
+    results.forEach((res, i) => {
+      const key = stablePairs[i]?.compareId;
+      if (key) map.set(key, res ?? null);
+    });
+    return map;
+  }, [results, stablePairs]);
+
+  // every compareId this provider was asked to fetch — lets getApiDiff tell "requested but unresolved"
+  // (paging stopped early) apart from "not in this provider's list" once paging is done.
+  const requestedCompareIds = useMemo(() => new Set(stablePairs.map((p) => p.compareId)), [stablePairs]);
+
+  const value = useMemo<ApiDiffDataContextModel>(
+    () => ({
+      getApiDiff: (compareId: string) => {
+        const found = dataByCompareId.get(compareId);
+        if (found !== undefined) return found;
+        // paging finished (fully, or stopped early on a short page / fetch error / null host) but this
+        // requested pair never produced an entry → surface it as failed (null) rather than "still
+        // loading" (undefined), so consumers keyed on `getApiDiff(...) === undefined` don't spin forever.
+        if (done && requestedCompareIds.has(compareId)) return null;
+        return undefined;
+      },
+      loading: !done,
+      loadedCount: results.length,
+    }),
+    [dataByCompareId, done, requestedCompareIds, results.length]
+  );
+
+  return <ApiDiffDataContext.Provider value={value}>{children}</ApiDiffDataContext.Provider>;
+}
diff --git a/components/ui/api-diff-view/api-diff-insights.tsx b/components/ui/api-diff-view/api-diff-insights.tsx
new file mode 100644
index 000000000000..2391c010cc85
--- /dev/null
+++ b/components/ui/api-diff-view/api-diff-insights.tsx
@@ -0,0 +1,36 @@
+import React, { createContext, useContext } from 'react';
+import type { ReactNode } from 'react';
+import type { APIDiffChange, APIDiffResult } from './api-diff-model';
+
+export type ApiDiffInsightContext = {
+  /** component id without version */
+  componentId: string;
+  baseId?: string;
+  compareId?: string;
+  result: APIDiffResult;
+};
+
+/**
+ * a renderer contributed by an external aspect (via
+ * `componentCompareUI.registerApiDiffInsight`) that augments a single API change
+ * with extra intelligence — migration hints, affected dependents, codemods, etc.
+ */
+export type ApiDiffInsight = {
+  id: string;
+  /** when omitted, the insight renders for every change */
+  matches?: (change: APIDiffChange, ctx: ApiDiffInsightContext) => boolean;
+  render: (change: APIDiffChange, ctx: ApiDiffInsightContext) => ReactNode;
+};
+
+/** module-level constant so the no-insights context value keeps a stable identity across renders */
+const EMPTY_INSIGHTS: ApiDiffInsight[] = [];
+
+const InsightsContext = createContext<ApiDiffInsight[]>(EMPTY_INSIGHTS);
+
+export function ApiDiffInsightProvider({ insights, children }: { insights?: ApiDiffInsight[]; children: ReactNode }) {
+  return <InsightsContext.Provider value={insights ?? EMPTY_INSIGHTS}>{children}</InsightsContext.Provider>;
+}
+
+export function useApiDiffInsights(): ApiDiffInsight[] {
+  return useContext(InsightsContext);
+}
diff --git a/components/ui/api-diff-view/api-diff-model.ts b/components/ui/api-diff-view/api-diff-model.ts
new file mode 100644
index 000000000000..9e472c28458f
--- /dev/null
+++ b/components/ui/api-diff-view/api-diff-model.ts
@@ -0,0 +1,193 @@
+import { gql } from '@apollo/client';
+import { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
+import type {
+  ImpactLevel,
+  APIDiffComputeStatus,
+  SchemaUnavailableReason,
+} from '@teambit/semantics.entities.semantic-schema-diff';
+
+export type { ImpactLevel, APIDiffComputeStatus, SchemaUnavailableReason };
+
+/**
+ * UI-facing shapes of the API diff GraphQL payload. These mirror the server entity
+ * (`@teambit/semantics.entities.semantic-schema-diff`) but only carry the fields the
+ * query below selects. All compare UIs must import these from here — do not redeclare.
+ */
+export type APIDiffDetail = {
+  changeKind: string;
+  description: string;
+  impact: ImpactLevel;
+  from?: string;
+  to?: string;
+  /** owning member's signature — shown as context next to member-level (e.g. doc-only) changes. */
+  signature?: string;
+};
+
+export type APIDiffChange = {
+  status: 'ADDED' | 'REMOVED' | 'MODIFIED';
+  visibility: 'public' | 'internal';
+  exportName: string;
+  schemaType: string;
+  schemaTypeRaw: string;
+  impact: ImpactLevel;
+  baseSignature?: string;
+  compareSignature?: string;
+  changes?: APIDiffDetail[];
+};
+
+export type SchemaSideAvailability = {
+  available: boolean;
+  reason?: SchemaUnavailableReason;
+};
+
+export type APIDiffResult = {
+  status: APIDiffComputeStatus;
+  base: SchemaSideAvailability;
+  compare: SchemaSideAvailability;
+  hasChanges: boolean;
+  impact: ImpactLevel;
+  internalImpact: ImpactLevel;
+  publicChanges: APIDiffChange[];
+  internalChanges: APIDiffChange[];
+  /** exports the extractor couldn't analyze — surfaced distinctly, never as a change. */
+  unresolvedExports?: string[];
+  added: number;
+  removed: number;
+  modified: number;
+  breaking: number;
+  nonBreaking: number;
+  patch: number;
+};
+
+const API_DIFF_CHANGE_FIELDS = `
+  status
+  visibility
+  exportName
+  schemaType
+  schemaTypeRaw
+  impact
+  baseSignature
+  compareSignature
+  changes {
+    changeKind
+    description
+    impact
+    from
+    to
+    signature
+  }
+`;
+
+/**
+ * GraphQL selection set for a single `APIDiffResult`. Shared by the per-component `apiDiff`
+ * query (below) and the bulk `apiDiffs` query (`api-diff-data-context`) so the two never drift.
+ */
+export const API_DIFF_RESULT_FIELDS = `
+  status
+  base {
+    available
+    reason
+  }
+  compare {
+    available
+    reason
+  }
+  hasChanges
+  impact
+  internalImpact
+  unresolvedExports
+  added
+  removed
+  modified
+  breaking
+  nonBreaking
+  patch
+  publicChanges {
+    ${API_DIFF_CHANGE_FIELDS}
+  }
+  internalChanges {
+    ${API_DIFF_CHANGE_FIELDS}
+  }
+`;
+
+export const API_DIFF_QUERY = gql`
+  query ApiDiff($baseId: String!, $compareId: String!, $host: String) {
+    getHost(id: $host) {
+      id
+      apiDiff(baseId: $baseId, compareId: $compareId) {
+        ${API_DIFF_RESULT_FIELDS}
+      }
+    }
+  }
+`;
+
+export type UseApiDiffOptions = {
+  host?: string;
+  skip?: boolean;
+};
+
+export type UseApiDiffResult = {
+  /** undefined while loading, null when the server could not compute the diff at all */
+  result: APIDiffResult | null | undefined;
+  loading?: boolean;
+  error?: string;
+};
+
+export function useApiDiff(baseId?: string, compareId?: string, options?: UseApiDiffOptions): UseApiDiffResult {
+  const skip = options?.skip || !baseId || !compareId || baseId === compareId;
+  const { data, loading, error } = useDataQuery<{ getHost: { apiDiff: APIDiffResult | null } }>(API_DIFF_QUERY, {
+    variables: { baseId: baseId || '', compareId: compareId || '', host: options?.host },
+    skip,
+  });
+
+  return {
+    result: data ? (data.getHost?.apiDiff ?? null) : undefined,
+    loading,
+    error: error?.message,
+  };
+}
+
+/** semver-flavored display label for an impact level */
+export function impactLabel(impact: ImpactLevel | string): string {
+  switch (impact) {
+    case 'BREAKING':
+      return 'MAJOR';
+    case 'NON_BREAKING':
+      return 'MINOR';
+    default:
+      return 'PATCH';
+  }
+}
+
+const REASON_TEXT: Record<SchemaUnavailableReason, string> = {
+  NOT_BUILT: 'was built before API extraction, so no API snapshot exists',
+  NO_EXTRACTOR: "env doesn't provide a schema extractor",
+  DISABLED: 'has schema extraction disabled',
+  FAILED: 'API data could not be loaded',
+};
+
+/**
+ * human-readable explanation of why the diff could not be computed.
+ * returns undefined when the diff was computed.
+ */
+export function unavailableText(
+  result: APIDiffResult,
+  baseVersion?: string,
+  compareVersion?: string
+): string | undefined {
+  const ver = (v?: string) => (v ? ` ${v.slice(0, 7)}` : '');
+  switch (result.status) {
+    case 'BASE_UNAVAILABLE':
+      return `base version${ver(baseVersion)} ${REASON_TEXT[result.base.reason || 'FAILED']}`;
+    case 'COMPARE_UNAVAILABLE':
+      return `compare version${ver(compareVersion)} ${REASON_TEXT[result.compare.reason || 'FAILED']}`;
+    case 'UNAVAILABLE': {
+      const baseReason = REASON_TEXT[result.base.reason || 'FAILED'];
+      const compareReason = REASON_TEXT[result.compare.reason || 'FAILED'];
+      if (baseReason === compareReason) return `neither version has API data (${baseReason})`;
+      return `neither version has API data (base ${baseReason}; compare ${compareReason})`;
+    }
+    default:
+      return undefined;
+  }
+}
diff --git a/components/ui/api-diff-view/api-diff-view.composition.tsx b/components/ui/api-diff-view/api-diff-view.composition.tsx
new file mode 100644
index 000000000000..007ea74af708
--- /dev/null
+++ b/components/ui/api-diff-view/api-diff-view.composition.tsx
@@ -0,0 +1,313 @@
+import React from 'react';
+import type { APIDiffResult, APIDiffChange } from './api-diff-model';
+import { ComponentApiDiffSection, ApiDiffSlimRow } from './component-api-diff-section';
+import { ApiDiffInsightProvider } from './api-diff-insights';
+
+const heroChange: APIDiffChange = {
+  status: 'MODIFIED',
+  visibility: 'public',
+  exportName: 'Hero',
+  schemaType: 'React Component',
+  schemaTypeRaw: 'ReactSchema',
+  impact: 'BREAKING',
+  baseSignature: 'Hero(props: { title: string }): ReactNode',
+  compareSignature: 'Hero(props: { title: ReactNode, onCta: () => void }): ReactNode',
+  changes: [
+    {
+      changeKind: 'parameter-added',
+      description: "required prop 'onCta' added — existing usages won't compile",
+      impact: 'BREAKING',
+    },
+    {
+      changeKind: 'parameter-type-changed',
+      description: "prop 'title' type changed",
+      impact: 'BREAKING',
+      from: 'string',
+      to: 'ReactNode',
+    },
+  ],
+};
+
+const addedChange: APIDiffChange = {
+  status: 'ADDED',
+  visibility: 'public',
+  exportName: 'useHeroAnalytics',
+  schemaType: 'Function',
+  schemaTypeRaw: 'FunctionLikeSchema',
+  impact: 'NON_BREAKING',
+  compareSignature: 'useHeroAnalytics(heroId: string): HeroAnalytics',
+};
+
+const internalChange: APIDiffChange = {
+  status: 'MODIFIED',
+  visibility: 'internal',
+  exportName: 'normalizeHeroProps',
+  schemaType: 'Function',
+  schemaTypeRaw: 'FunctionLikeSchema',
+  impact: 'BREAKING',
+  baseSignature: 'normalizeHeroProps(props: HeroProps): HeroProps',
+  compareSignature: 'normalizeHeroProps(props: HeroProps, strict: boolean): HeroProps',
+  changes: [{ changeKind: 'parameter-added', description: "required parameter 'strict' added", impact: 'BREAKING' }],
+};
+
+// mirrors a real env-class diff: a breaking removal + base-class change, a batch of minor optional
+// additions (properties then methods), and a patch doc removal — exercises the severity clusters,
+// collapse-by-kind, and the highlighted add/remove signatures.
+const classChange: APIDiffChange = {
+  status: 'MODIFIED',
+  visibility: 'public',
+  exportName: 'AttReact',
+  schemaType: 'Class',
+  schemaTypeRaw: 'ClassSchema',
+  impact: 'BREAKING',
+  changes: [
+    {
+      changeKind: 'member-removed',
+      description: "Variable 'eslintConfigPath' removed — consumers using it will break",
+      impact: 'BREAKING',
+      from: '(property) AttReact.eslintConfigPath: string',
+    },
+    {
+      changeKind: 'extends-changed',
+      description: 'extends changed: extends ReactEnv → extends ReactRspackEnv',
+      impact: 'BREAKING',
+      from: 'extends ReactEnv',
+      to: 'extends ReactRspackEnv',
+    },
+    {
+      changeKind: 'member-added',
+      description: "Variable 'oxlintConfigPath' added (optional): (property) AttReact.oxlintConfigPath: string",
+      impact: 'NON_BREAKING',
+      to: '(property) AttReact.oxlintConfigPath: string',
+    },
+    {
+      changeKind: 'member-added',
+      description: "Variable 'envCurrentPath' added (optional): (property) AttReact.envCurrentPath: string",
+      impact: 'NON_BREAKING',
+      to: '(property) AttReact.envCurrentPath: string',
+    },
+    {
+      changeKind: 'member-added',
+      description: "Function 'getOxlintNodeOptions' added: (method) AttReact.getOxlintNodeOptions(): OxlintOptions",
+      impact: 'NON_BREAKING',
+      to: '(method) AttReact.getOxlintNodeOptions(): { configPath: string; tsconfigPath: string; typeAware: boolean }',
+    },
+    {
+      changeKind: 'member-added',
+      description: "Function 'workspaceConfig' added: (method) AttReact.workspaceConfig(): ConfigWriterList",
+      impact: 'NON_BREAKING',
+      to: '(method) AttReact.workspaceConfig(): ConfigWriterList',
+    },
+    {
+      changeKind: 'documentation-removed',
+      description: "Function 'build': documentation removed",
+      impact: 'PATCH',
+      from: 'a set of processes to be performed before a component is snapped, during its build phase\n@see https://bit.dev/docs/react-env/build-pipelines',
+      signature: '(method) AttReact.build(): Pipeline',
+    },
+  ],
+};
+
+function makeResult(overrides: Partial<APIDiffResult>): APIDiffResult {
+  return {
+    status: 'COMPUTED',
+    base: { available: true },
+    compare: { available: true },
+    hasChanges: true,
+    impact: 'BREAKING',
+    internalImpact: 'PATCH',
+    publicChanges: [],
+    internalChanges: [],
+    added: 0,
+    removed: 0,
+    modified: 0,
+    breaking: 0,
+    nonBreaking: 0,
+    patch: 0,
+    ...overrides,
+  };
+}
+
+export const SectionWithBreakingChanges = () => (
+  <div style={{ padding: 20, maxWidth: 900 }}>
+    <ComponentApiDiffSection
+      componentIdStr="community.ui/hero"
+      displayName="ui/hero"
+      baseVersion="0.0.8aaaa"
+      compareVersion="0.1.0bbbb"
+      result={makeResult({
+        publicChanges: [heroChange, addedChange],
+        internalChanges: [internalChange],
+        internalImpact: 'BREAKING',
+      })}
+    />
+  </div>
+);
+
+export const SectionUnresolvedExports = () => (
+  <div style={{ padding: 20, maxWidth: 900 }}>
+    <ComponentApiDiffSection
+      componentIdStr="community.ui/hero"
+      displayName="ui/hero"
+      baseVersion="0.1.0"
+      compareVersion="0.2.0"
+      result={makeResult({
+        publicChanges: [heroChange],
+        unresolvedExports: ['LegacyHero', 'useHeroInternal'],
+        impact: 'BREAKING',
+      })}
+    />
+  </div>
+);
+
+export const SectionOnlyUnresolved = () => (
+  <div style={{ padding: 20, maxWidth: 900 }}>
+    <ComponentApiDiffSection
+      componentIdStr="community.ui/footer"
+      displayName="ui/footer"
+      result={makeResult({ hasChanges: false, impact: 'PATCH', unresolvedExports: ['Footer'] })}
+    />
+  </div>
+);
+
+export const SectionSeverityClusters = () => (
+  <div style={{ padding: 20, maxWidth: 900 }}>
+    <ComponentApiDiffSection
+      componentIdStr="att-bit.duc/environment/att-react"
+      displayName="environment/att-react"
+      baseVersion="6.0.0"
+      compareVersion="11b30aa5"
+      result={makeResult({
+        publicChanges: [classChange],
+        impact: 'BREAKING',
+        added: 4,
+        removed: 1,
+        modified: 2,
+        breaking: 2,
+        nonBreaking: 4,
+        patch: 1,
+      })}
+    />
+  </div>
+);
+
+export const SectionWithInsights = () => (
+  <ApiDiffInsightProvider
+    insights={[
+      {
+        id: 'demo.insight',
+        matches: (change) => change.impact === 'BREAKING',
+        render: (change) => (
+          <span>✦ Migration hint for {change.exportName}: wrap existing callers with an adapter.</span>
+        ),
+      },
+    ]}
+  >
+    <div style={{ padding: 20, maxWidth: 900 }}>
+      <ComponentApiDiffSection
+        componentIdStr="community.ui/hero"
+        displayName="ui/hero"
+        result={makeResult({ publicChanges: [heroChange] })}
+      />
+    </div>
+  </ApiDiffInsightProvider>
+);
+
+export const SectionLoading = () => (
+  <div style={{ padding: 20, maxWidth: 900 }}>
+    <ComponentApiDiffSection componentIdStr="community.ui/hero" displayName="ui/hero" result={undefined} loading />
+  </div>
+);
+
+export const SectionUnavailable = () => (
+  <div style={{ padding: 20, maxWidth: 900 }}>
+    <ComponentApiDiffSection
+      componentIdStr="community.ui/footer"
+      displayName="ui/footer"
+      baseVersion="0.0.4cccc"
+      result={makeResult({
+        status: 'BASE_UNAVAILABLE',
+        base: { available: false, reason: 'NOT_BUILT' },
+        hasChanges: false,
+        impact: 'PATCH',
+      })}
+    />
+  </div>
+);
+
+// NEITHER side has an API — the calm blank state (distinct from the amber one-side "Schema unavailable").
+export const SectionNoApiAvailable = () => (
+  <div style={{ padding: 20, maxWidth: 900 }}>
+    <ComponentApiDiffSection
+      componentIdStr="community.ui/config"
+      displayName="ui/config"
+      baseVersion="1.0.2"
+      compareVersion="1.0.3"
+      result={makeResult({
+        status: 'UNAVAILABLE',
+        base: { available: false, reason: 'NOT_BUILT' },
+        compare: { available: false, reason: 'NOT_BUILT' },
+        hasChanges: false,
+        impact: 'PATCH',
+      })}
+    />
+  </div>
+);
+
+export const SectionError = () => (
+  <div style={{ padding: 20, maxWidth: 900 }}>
+    <ComponentApiDiffSection
+      componentIdStr="community.ui/card"
+      displayName="ui/card"
+      result={null}
+      error="failed to load component from remote"
+    />
+  </div>
+);
+
+export const SectionInternalOnly = () => (
+  <div style={{ padding: 20, maxWidth: 900 }}>
+    <ComponentApiDiffSection
+      componentIdStr="community.ui/button"
+      displayName="ui/button"
+      result={makeResult({ internalChanges: [internalChange], internalImpact: 'BREAKING', impact: 'PATCH' })}
+    />
+  </div>
+);
+
+export const SectionNoChanges = () => (
+  <div style={{ padding: 20, maxWidth: 900 }}>
+    <ComponentApiDiffSection
+      componentIdStr="community.ui/button"
+      displayName="ui/button"
+      result={makeResult({ hasChanges: false, impact: 'PATCH' })}
+    />
+  </div>
+);
+
+export const SlimRows = () => (
+  <div style={{ padding: 20, maxWidth: 900 }}>
+    <ApiDiffSlimRow componentIdStr="a" displayName="ui/button" chip="✓ no API changes" tone="ok" />
+    <ApiDiffSlimRow
+      componentIdStr="b"
+      displayName="ui/footer"
+      chip="⚠ no API data"
+      detail="base version 0.0.4 was built before API extraction — no API snapshot exists"
+      tone="warn"
+    />
+    <ApiDiffSlimRow
+      componentIdStr="c"
+      displayName="ui/card"
+      chip="⚠ API diff failed"
+      detail="failed to load component from remote"
+      tone="error"
+    />
+    <ApiDiffSlimRow
+      componentIdStr="d"
+      displayName="ui/nav"
+      chip="new component"
+      detail="no base version to compare"
+      tone="ok"
+    />
+  </div>
+);
diff --git a/components/ui/api-diff-view/api-diff-view.module.scss b/components/ui/api-diff-view/api-diff-view.module.scss
new file mode 100644
index 000000000000..898d2d25a8be
--- /dev/null
+++ b/components/ui/api-diff-view/api-diff-view.module.scss
@@ -0,0 +1,924 @@
+$code-font: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+$border-color: var(--border-medium-color, #e8ecf0);
+$surface-color: var(--surface-color, #fff);
+$accent-color: var(--bit-accent-color, #6c5ce7);
+$text-primary: var(--on-surface-color, #1a1a2e);
+// note: deliberately darker than the theme's "muted" token — API diff text is content to be read,
+// not decoration, so it must clear WCAG AA (~4.5:1) on the surface, which #a0aec0-style mutes don't.
+$text-secondary: var(--on-surface-medium-color, #5a626c);
+$text-muted: var(--on-background-medium-color, #79808a);
+$focus-color: var(--focus-color, #0969da);
+$danger: var(--on-surface-negative-bold, #cf222e);
+$warning: var(--warning-color, #bb8009);
+$success: var(--success-color, #1a7f37);
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+.fullView {
+  padding: 24px;
+  max-width: 1080px;
+}
+
+// ── summary bar ──────────────────────────────────────────────────────────────
+
+.summaryBar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 24px;
+  padding: 16px 22px;
+  border-radius: 12px;
+  background: $surface-color;
+  border: 1px solid $border-color;
+}
+
+.summaryTitle {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.summaryHeading {
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: $text-primary;
+}
+
+.summaryLoading {
+  font-size: 13px;
+  color: $accent-color;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+.summaryProgress {
+  width: 160px;
+  height: 8px;
+  border-radius: 4px;
+  background: var(--surface-neutral-color, #eaeef2);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.summaryProgressFill {
+  height: 100%;
+  border-radius: 4px;
+  background: $focus-color;
+  transition: width 0.3s ease;
+}
+
+.summaryStats {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+}
+
+.summaryStat {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: $text-secondary;
+}
+
+.summaryStatMuted {
+  font-size: 13px;
+  color: $text-muted;
+}
+
+.summaryDot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+// ── per-component section ────────────────────────────────────────────────────
+
+.section {
+  margin-bottom: 18px;
+  border-radius: 12px;
+  border: 1px solid $border-color;
+  background: $surface-color;
+  overflow: hidden;
+}
+
+.sectionHeader {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 18px;
+  background: var(--surface-neutral-color, #f6f8fa);
+  border-bottom: 1px solid $border-color;
+}
+
+.sectionName {
+  font-size: 15px;
+  font-weight: 600;
+  color: $text-primary;
+  font-family: $code-font;
+}
+
+.sectionVersions {
+  font-size: 13px;
+  color: $text-secondary;
+  font-family: $code-font;
+}
+
+.sectionStats {
+  display: flex;
+  gap: 14px;
+  margin-left: auto;
+}
+
+.sectionLoading {
+  font-size: 13px;
+  color: $text-secondary;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+.sectionSkeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 18px;
+}
+
+.skeletonBar {
+  height: 12px;
+  border-radius: 6px;
+  background: linear-gradient(
+    90deg,
+    var(--surface-neutral-color, #eaeef2) 25%,
+    var(--surface-color, #f6f8fa) 50%,
+    var(--surface-neutral-color, #eaeef2) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.4s infinite;
+}
+
+.statAdded {
+  font-size: 12.5px;
+  font-weight: 600;
+  color: $success;
+}
+
+.statRemoved {
+  font-size: 12.5px;
+  font-weight: 600;
+  color: $danger;
+}
+
+.statModified {
+  font-size: 12.5px;
+  font-weight: 600;
+  color: $warning;
+}
+
+.statBreaking {
+  font-size: 12.5px;
+  font-weight: 700;
+  color: $danger;
+  background: color-mix(in srgb, $danger 10%, transparent);
+  padding: 2px 8px;
+  border-radius: 5px;
+}
+
+// ── change block ─────────────────────────────────────────────────────────────
+
+.changeBlock {
+  margin: 12px 16px;
+  border: 1px solid $border-color;
+  border-radius: 10px;
+  overflow: hidden;
+  scroll-margin-top: 12px;
+}
+
+.changeBlockFocused {
+  box-shadow: 0 0 0 2px color-mix(in srgb, $focus-color 45%, transparent);
+}
+
+.changeBlockDimmed {
+  opacity: 0.78;
+}
+
+.changeBlockHeader {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding: 12px 14px;
+}
+
+.changeBlockNote {
+  margin-left: auto;
+  font-size: 12.5px;
+  color: $text-secondary;
+}
+
+.statusIndicator {
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  border: 1.5px solid;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 700;
+  flex-shrink: 0;
+  font-family: $code-font;
+}
+
+.exportName {
+  font-size: 15px;
+  font-weight: 600;
+  color: $text-primary;
+  font-family: $code-font;
+}
+
+.schemaType {
+  font-size: 12.5px;
+  color: $text-secondary;
+  background: rgba(0, 0, 0, 0.04);
+  padding: 2px 8px;
+  border-radius: 5px;
+}
+
+// ── signatures + cause diffs (shared git-style diff block) ────────────────────
+
+.signatures {
+  padding: 0 14px 12px;
+}
+
+// ── member-cause clusters (severity groups + collapse-by-kind) ────────────────
+// A modified export's member changes are clustered by severity (breaking → minor → patch); within a
+// tier, additions/removals collapse by kind into signature snippets, modifications keep the token
+// diff, and doc-only changes render as notes.
+
+.causeClusters {
+  display: flex;
+  flex-direction: column;
+}
+
+.severityGroup {
+  padding: 2px 14px 14px;
+
+  & + & {
+    border-top: 1px solid color-mix(in srgb, $border-color 55%, transparent);
+  }
+}
+
+.severityHeader {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 2px 10px;
+}
+
+.severityLabel {
+  line-height: 1;
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+.severityCount {
+  font-size: 12px;
+  font-weight: 600;
+  padding: 1px 9px;
+  border-radius: 9px;
+  font-variant-numeric: tabular-nums;
+}
+
+// only the breaking tier carries a faint tint — it's the one a reader must not miss. minor/patch
+// stay on the plain surface so the block doesn't turn into a stack of colored bands.
+.severity_BREAKING {
+  background: color-mix(in srgb, $danger 3.5%, transparent);
+
+  .severityHeader {
+    color: $danger;
+  }
+  .severityCount {
+    background: color-mix(in srgb, $danger 12%, transparent);
+    color: $danger;
+  }
+}
+
+.severity_NON_BREAKING {
+  .severityHeader {
+    color: $warning;
+  }
+  .severityCount {
+    background: color-mix(in srgb, $warning 14%, transparent);
+    color: $warning;
+  }
+}
+
+.severity_PATCH {
+  .severityHeader {
+    color: $success;
+  }
+  .severityCount {
+    background: color-mix(in srgb, $success 13%, transparent);
+    color: $success;
+  }
+}
+
+.memberGroup {
+  & + & {
+    margin-top: 12px;
+  }
+
+  // the label already provides the gap above the snippet; drop the diff block's own top margin.
+  .diffBlock {
+    margin-top: 0;
+  }
+}
+
+.memberLabel {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.memberName {
+  font-family: $code-font;
+  font-size: 13px;
+  font-weight: 600;
+  color: $text-primary;
+}
+
+.memberKind {
+  font-size: 12px;
+  color: $text-secondary;
+}
+
+.memberNote {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  padding: 7px 0;
+
+  & + & {
+    border-top: 1px solid color-mix(in srgb, $border-color 45%, transparent);
+  }
+}
+
+// added/removed signatures sit on a NEUTRAL surface so the syntax colors (tuned for a light code
+// background) always clear contrast — the add/remove signal is the colored left edge + gutter, never
+// colored text on a green/red fill (which fails WCAG for yellow-on-green, red-on-red, …).
+.sigBlock {
+  border: 1px solid $border-color;
+  border-left-width: 3px;
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--surface-neutral-color, #f6f8fa);
+}
+
+.sigBlockAdd {
+  border-left-color: $success;
+
+  .diffGutter {
+    color: $success;
+  }
+}
+
+.sigBlockRemove {
+  border-left-color: $danger;
+
+  .diffGutter {
+    color: $danger;
+  }
+}
+
+.sigLine {
+  display: grid;
+  grid-template-columns: 26px 1fr;
+  align-items: start;
+  font-family: $code-font;
+  font-size: 13.5px;
+  line-height: 1.7;
+  color: $text-primary;
+  padding: 7px 14px 7px 0;
+
+  & + & {
+    border-top: 1px solid color-mix(in srgb, $border-color 55%, transparent);
+  }
+}
+
+// documentation (JSDoc/comment) changes show the actual prose that was removed/added. Prose, not a
+// signature — dark text on a faint tint (dark-on-tint clears contrast), italic to read as doc.
+.docBlock {
+  border: 1px solid $border-color;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.docLine {
+  display: grid;
+  grid-template-columns: 26px 1fr;
+  align-items: start;
+  padding: 8px 14px 8px 0;
+
+  & + & {
+    border-top: 1px solid color-mix(in srgb, $border-color 55%, transparent);
+  }
+}
+
+.docRemoved {
+  background: color-mix(in srgb, $danger 7%, transparent);
+
+  .diffGutter {
+    color: $danger;
+  }
+}
+
+.docAdded {
+  background: color-mix(in srgb, $success 8%, transparent);
+
+  .diffGutter {
+    color: $success;
+  }
+}
+
+.docText {
+  font-size: 13px;
+  line-height: 1.6;
+  color: $text-primary;
+  font-style: italic;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+// the declaration the doc belongs to — an unchanged context line beneath the doc diff. Neutral
+// surface, monospace + syntax highlighting, a "·" gutter so it reads as context, not an edit.
+.docContext {
+  background: var(--surface-neutral-color, #f6f8fa);
+  font-family: $code-font;
+  font-size: 13px;
+  line-height: 1.65;
+  color: $text-primary;
+
+  .diffGutter {
+    color: $text-muted;
+  }
+}
+
+.causeDescription {
+  font-size: 14px;
+  line-height: 1.55;
+  color: $text-primary;
+  flex: 1;
+}
+
+.impactDot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  position: relative;
+  top: -1px;
+}
+
+// the reviewable surface: a removed line over an added line, full width, monospaced, with an
+// aligned gutter marker. dark text on a tint reads far better than colored-text-on-white, and
+// `pre-wrap` + `break-word` keep long type strings legible instead of truncating mid-token.
+.diffBlock {
+  display: flex;
+  flex-direction: column;
+  margin-top: 8px;
+  border: 1px solid $border-color;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.diffLine {
+  display: grid;
+  grid-template-columns: 26px 1fr;
+  align-items: start;
+  font-family: $code-font;
+  font-size: 13.5px;
+  line-height: 1.7;
+  color: $text-primary;
+  padding: 7px 14px 7px 0;
+
+  & + & {
+    border-top: 1px solid color-mix(in srgb, $border-color 60%, transparent);
+  }
+}
+
+.diffGutter {
+  text-align: center;
+  font-weight: 700;
+  user-select: none;
+  opacity: 0.95;
+}
+
+.diffCode {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+// token-level highlight: the exact tokens that differ get a stronger tint + weight, so a one-char
+// type change reads instantly. `<mark>`'s default yellow is overridden here.
+.diffTok {
+  background: transparent;
+  color: inherit;
+  font-weight: 700;
+  border-radius: 3px;
+  padding: 0 1px;
+}
+
+.diffLineRemoved {
+  background: color-mix(in srgb, $danger 8%, transparent);
+
+  .diffGutter {
+    color: $danger;
+  }
+
+  .diffTok {
+    background: color-mix(in srgb, $danger 24%, transparent);
+    color: $danger;
+  }
+}
+
+.diffLineAdded {
+  background: color-mix(in srgb, $success 9%, transparent);
+
+  .diffGutter {
+    color: $success;
+  }
+
+  .diffTok {
+    background: color-mix(in srgb, $success 22%, transparent);
+    color: var(--success-color, #136a2e);
+  }
+}
+
+// a no-op signature shown for context (internal/transitive change, public signature unchanged):
+// neutral surface, a "·" gutter, and a plain-language note so it reads as context, not a diff.
+.diffLineContext {
+  grid-template-columns: 26px 1fr auto;
+  background: var(--surface-neutral-color, #f6f8fa);
+  color: $text-secondary;
+
+  .diffGutter {
+    color: $text-muted;
+  }
+}
+
+.diffContextNote {
+  align-self: center;
+  padding-left: 14px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  font-size: 11.5px;
+  font-style: italic;
+  color: $text-muted;
+  white-space: nowrap;
+}
+
+// ── change category groups (breaking → minor → patch) ─────────────────────────
+
+.changeGroup {
+  & + & {
+    border-top: 1px solid color-mix(in srgb, $border-color 55%, transparent);
+  }
+}
+
+.changeGroupHeader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 18px 2px;
+  font-size: 11.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: $text-secondary;
+}
+
+.changeGroupDot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: $text-muted;
+
+  &[data-impact='BREAKING'] {
+    background: $danger;
+  }
+
+  &[data-impact='NON_BREAKING'] {
+    background: $warning;
+  }
+
+  &[data-impact='PATCH'] {
+    background: $success;
+  }
+}
+
+.changeGroupCount {
+  font-size: 11px;
+  font-weight: 600;
+  color: $text-secondary;
+  background: rgba(0, 0, 0, 0.05);
+  padding: 1px 8px;
+  border-radius: 9px;
+}
+
+// ── blank state: no API to compare (neither side exposes one) ─────────────────
+// Calm, centered, neutral — NOT the amber warning treatment. There's nothing to act on here.
+.apiBlankState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 12px;
+  padding: 56px 24px;
+  min-height: 220px;
+}
+
+.apiBlankIcon {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface-neutral-color, #f6f8fa);
+  color: $text-muted;
+  border: 1px solid $border-color;
+}
+
+.apiBlankTitle {
+  font-size: 15.5px;
+  font-weight: 600;
+  color: $text-primary;
+}
+
+.apiBlankDetail {
+  font-size: 13px;
+  line-height: 1.55;
+  color: $text-secondary;
+  max-width: 44ch;
+}
+
+// ── unresolved exports (extraction gaps — distinct from real changes) ─────────
+// A neutral, informational note (not the add/remove/modify vocabulary): the extractor couldn't read
+// these exports on one side, so their presence/absence is not a meaningful diff.
+.unresolvedNote {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  margin: 12px 16px;
+  padding: 10px 14px;
+  border: 1px solid color-mix(in srgb, $warning 35%, $border-color);
+  border-radius: 8px;
+  background: color-mix(in srgb, $warning 7%, transparent);
+}
+
+.unresolvedIcon {
+  color: $warning;
+  font-size: 13px;
+  flex-shrink: 0;
+}
+
+.unresolvedText {
+  font-size: 12.5px;
+  line-height: 1.55;
+  color: $text-secondary;
+
+  code {
+    font-family: $code-font;
+  }
+}
+
+// ── insights (slot-contributed) ──────────────────────────────────────────────
+
+.insights {
+  margin: 0 14px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.insight {
+  padding: 10px 14px;
+  border: 1px dashed $border-color;
+  border-radius: 8px;
+  background: var(--surface-neutral-color, #fafbfc);
+  font-size: 13px;
+  line-height: 1.5;
+  color: $text-secondary;
+}
+
+// ── internal section ─────────────────────────────────────────────────────────
+
+.internalSection {
+  border-top: 1px solid $border-color;
+  padding-bottom: 6px;
+}
+
+.internalToggle {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 12px 18px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 13.5px;
+  font-weight: 600;
+  color: $text-secondary;
+  text-align: left;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.02);
+  }
+}
+
+.internalCount {
+  font-size: 12px;
+  font-weight: 600;
+  color: $text-secondary;
+  background: rgba(0, 0, 0, 0.05);
+  padding: 1px 8px;
+  border-radius: 9px;
+}
+
+// ── slim component-level rows ────────────────────────────────────────────────
+
+.slimRowWrapper {
+  border-radius: 10px;
+  border: 1px solid $border-color;
+  background: $surface-color;
+  margin-bottom: 10px;
+  overflow: hidden;
+  scroll-margin-top: 12px;
+}
+
+.slimRow {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 12px 18px;
+  color: $text-secondary;
+  font-size: 13.5px;
+}
+
+.slimRowButton {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  text-align: left;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.02);
+  }
+}
+
+.slimName {
+  font-family: $code-font;
+  font-size: 14px;
+  font-weight: 500;
+  color: $text-primary;
+}
+
+.slimChip {
+  font-size: 11.5px;
+  font-weight: 600;
+  padding: 2px 9px;
+  border-radius: 11px;
+  border: 1px solid $border-color;
+  white-space: nowrap;
+}
+
+.slimChipOk {
+  color: $text-secondary;
+}
+
+.slimChipWarn {
+  color: $warning;
+  border-color: color-mix(in srgb, $warning 35%, transparent);
+  background: color-mix(in srgb, $warning 8%, transparent);
+}
+
+.slimChipError {
+  color: $danger;
+  border-color: color-mix(in srgb, $danger 35%, transparent);
+  background: color-mix(in srgb, $danger 7%, transparent);
+}
+
+.slimDetail {
+  font-size: 13px;
+  color: $text-secondary;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.slimExpand {
+  margin-left: auto;
+  font-size: 16px;
+  color: $text-muted;
+  transition: transform 0.15s ease;
+  flex-shrink: 0;
+}
+
+.slimExpandOpen {
+  transform: rotate(90deg);
+}
+
+.slimExpanded {
+  border-top: 1px solid $border-color;
+  padding: 6px 0;
+}
+
+// ── impact badges ────────────────────────────────────────────────────────────
+
+.impactBadge {
+  font-size: 11px;
+  font-weight: 700;
+  padding: 3px 9px;
+  border-radius: 6px;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+
+.impactBadgeSmall {
+  font-size: 10.5px;
+  font-weight: 700;
+  padding: 2px 7px;
+  border-radius: 5px;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+// ── whole-pane states ────────────────────────────────────────────────────────
+
+.emptyState {
+  text-align: center;
+  padding: 56px 20px;
+}
+
+.emptyIcon {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: color-mix(in srgb, $success 8%, transparent);
+  color: $success;
+  font-size: 26px;
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 16px;
+}
+
+.emptyIconNeutral {
+  background: var(--surface-neutral-color, #f6f8fa);
+  color: $text-muted;
+  border: 1px solid $border-color;
+}
+
+.emptyTitle {
+  font-size: 17px;
+  font-weight: 600;
+  color: $text-primary;
+  margin-bottom: 6px;
+}
+
+.emptySubtitle {
+  font-size: 14px;
+  line-height: 1.55;
+  color: $text-secondary;
+  max-width: 520px;
+  margin: 0 auto;
+}
diff --git a/components/ui/api-diff-view/api-diff-view.tsx b/components/ui/api-diff-view/api-diff-view.tsx
new file mode 100644
index 000000000000..ccef343e020d
--- /dev/null
+++ b/components/ui/api-diff-view/api-diff-view.tsx
@@ -0,0 +1,391 @@
+import React, { useMemo, useState, useCallback } from 'react';
+import type { ComponentID } from '@teambit/component-id';
+import type { APIDiffResult } from './api-diff-model';
+import { ApiDiffDataProvider, useApiDiffData } from './api-diff-data-context';
+import type { ApiDiffPair } from './api-diff-data-context';
+import { ApiDiffInsightProvider } from './api-diff-insights';
+import type { ApiDiffInsight } from './api-diff-insights';
+import { ComponentApiDiffSection, ApiDiffSlimRow } from './component-api-diff-section';
+import styles from './api-diff-view.module.scss';
+
+export type ComponentDiffEntry = {
+  componentId: ComponentID;
+  /** head of the compare side (the lane under review) */
+  sourceHead?: string;
+  /** head of the base side — absent for components that are new on the lane */
+  targetHead?: string;
+  /** lane-diff change types for this component (e.g. SOURCE_CODE, DEPENDENCY) — used to
+   * skip the API diff query for components whose API cannot have changed */
+  changes?: string[];
+};
+
+export type ApiEntry = { name: string; status: string };
+
+export type ApiDiffLaneViewProps = {
+  diffs: ComponentDiffEntry[];
+  /** GraphQL host id, e.g. "teambit.scope/scope" */
+  host?: string;
+  /** component currently selected in the sidebar */
+  selectedId?: string;
+  /** export name currently selected in the sidebar */
+  selectedExport?: string;
+  /** slot-contributed insight renderers (see `registerApiDiffInsight`) */
+  insights?: ApiDiffInsight[];
+  /**
+   * called when a component's changed public exports are known — the host view
+   * feeds these into its sidebar tree (kept as a callback so this component stays
+   * registry-agnostic and avoids a dependency cycle with component-compare).
+   */
+  onApiEntries?: (componentId: string, entries: ApiEntry[]) => void;
+  /**
+   * whether the API view is the active view. The pane is kept mounted (for scroll anchors + query
+   * cache) even when hidden, so without this every component would fire its API-diff query on initial
+   * load — N expensive schema-extraction round trips that clog the network before the user ever opens
+   * the API tab. Queries fire only once this is true; results stay cached afterwards.
+   */
+  active?: boolean;
+};
+
+/** change types that can affect a component's API surface. config/docs-only changes can't. */
+const API_RELEVANT_CHANGES = new Set(['SOURCE_CODE', 'NEW', 'DEPENDENCY']);
+
+type EntryKind = 'query' | 'gated' | 'incomparable';
+
+function classifyEntry(entry: ComponentDiffEntry): EntryKind {
+  // missing targetHead: new on the lane OR unrelated histories; missing sourceHead: not on
+  // this lane. either way there's no base/compare pair to diff.
+  if (!entry.sourceHead || !entry.targetHead) return 'incomparable';
+  // same snap on both sides — identical API by definition, and useApiDiff would skip anyway.
+  if (entry.sourceHead === entry.targetHead) return 'gated';
+  // gate only on explicit evidence: an empty changes array is treated as unknown, not as
+  // "verified no changes".
+  if (entry.changes && entry.changes.length > 0 && !entry.changes.some((c) => API_RELEVANT_CHANGES.has(c))) {
+    return 'gated';
+  }
+  return 'query';
+}
+
+/** copy for components without a comparable pair — new components are the common case */
+function incomparableCopy(entry: ComponentDiffEntry): { chip: string; detail: string } {
+  if (entry.changes?.includes('NEW')) return { chip: 'new component', detail: 'no base version to compare' };
+  return { chip: 'not comparable', detail: 'no common base version between these lanes' };
+}
+
+const REGISTRY_STATUS: Record<string, string> = { ADDED: 'NEW', REMOVED: 'DELETED', MODIFIED: 'MODIFIED' };
+
+function ComponentApiDiffContainer({
+  entry,
+  selectedExport,
+  onLoaded,
+  onApiEntries,
+  active,
+}: {
+  entry: ComponentDiffEntry;
+  selectedExport?: string;
+  onLoaded: (id: string, result: APIDiffResult | null) => void;
+  onApiEntries?: (componentId: string, entries: ApiEntry[]) => void;
+  active?: boolean;
+}) {
+  const baseId = entry.targetHead ? entry.componentId.changeVersion(entry.targetHead)?.toString() : undefined;
+  const compareId = entry.sourceHead ? entry.componentId.changeVersion(entry.sourceHead)?.toString() : undefined;
+  const componentIdStr = entry.componentId.toStringWithoutVersion();
+
+  // read this pair's diff from the batched bulk query rather than firing a per-component query.
+  // `undefined` = still loading (its page hasn't returned); `null` = couldn't be computed.
+  const apiData = useApiDiffData();
+  const providerLoading = apiData?.loading ?? true;
+  const result = compareId ? apiData?.getApiDiff(compareId) : undefined;
+  const loading = result === undefined && providerLoading;
+  const error = undefined;
+
+  React.useEffect(() => {
+    // don't mark a pair "loaded" while its page is still in flight, or the totals/progress would
+    // count it as failed before the bulk query reaches it. the `active` guard keeps a hidden pane
+    // (whose bulk query is skipped) from reporting everything as loaded/failed prematurely.
+    if (active && !loading) onLoaded(componentIdStr, result ?? null);
+  }, [active, loading, result, componentIdStr, onLoaded]);
+
+  // feed changed public exports to the host's sidebar tree (nested under the component,
+  // exactly like files in code mode). the sidebar's scroll-sync then targets the
+  // `data-file-id="<componentId>:<exportName>"` anchors rendered by ApiChangeBlock.
+  React.useEffect(() => {
+    if (!onApiEntries || !result || result.status !== 'COMPUTED') return;
+    onApiEntries(
+      componentIdStr,
+      result.publicChanges.map((c) => ({ name: c.exportName, status: REGISTRY_STATUS[c.status] || 'MODIFIED' }))
+    );
+  }, [result, componentIdStr, onApiEntries]);
+
+  return (
+    <ComponentApiDiffSection
+      componentIdStr={componentIdStr}
+      displayName={entry.componentId.fullName}
+      baseId={baseId}
+      compareId={compareId}
+      baseVersion={entry.targetHead}
+      compareVersion={entry.sourceHead}
+      result={result}
+      loading={loading}
+      error={error}
+      selectedExport={selectedExport}
+    />
+  );
+}
+
+/**
+ * full-pane API diff for a set of component pairs (lane compare's API view).
+ * always renders every component (sections for changed ones, slim rows for the rest);
+ * selection from the sidebar scrolls — it never filters.
+ */
+export function ApiDiffLaneView({
+  diffs,
+  host,
+  selectedId,
+  selectedExport,
+  insights,
+  onApiEntries,
+  active,
+}: ApiDiffLaneViewProps) {
+  const entries = useMemo(() => diffs.map((d) => ({ entry: d, kind: classifyEntry(d) })), [diffs]);
+  const queried = useMemo(() => entries.filter((e) => e.kind === 'query'), [entries]);
+
+  // one bulk-query pair per component that needs a real diff (base = target head, compare = source head).
+  // 'query' kind guarantees both heads exist, so these ids are always defined.
+  const queryPairs = useMemo<ApiDiffPair[]>(
+    () =>
+      queried
+        .map(({ entry }) => ({
+          baseId: entry.componentId.changeVersion(entry.targetHead)?.toString() ?? '',
+          compareId: entry.componentId.changeVersion(entry.sourceHead)?.toString() ?? '',
+        }))
+        .filter((p) => p.baseId && p.compareId),
+    [queried]
+  );
+
+  const [results, setResults] = useState<Map<string, APIDiffResult | null>>(new Map());
+  const onDiffLoaded = useCallback((componentId: string, result: APIDiffResult | null) => {
+    setResults((prev) => {
+      if (prev.has(componentId) && prev.get(componentId) === result) return prev;
+      const next = new Map(prev);
+      next.set(componentId, result);
+      return next;
+    });
+  }, []);
+
+  // aggregate only over the CURRENT queried set — the results map is append-only, so if
+  // `diffs` changes while mounted, entries from a previous comparison must not leak into
+  // the totals or the progress count.
+  const totals = useMemo(() => {
+    let added = 0;
+    let removed = 0;
+    let modified = 0;
+    let breaking = 0;
+    let internal = 0;
+    let withPublicChanges = 0;
+    let withAnyChanges = 0;
+    let unavailable = 0;
+    let failed = 0;
+    let loaded = 0;
+    queried.forEach(({ entry }) => {
+      const idStr = entry.componentId.toStringWithoutVersion();
+      if (!results.has(idStr)) return;
+      loaded += 1;
+      const r = results.get(idStr);
+      if (!r) {
+        failed += 1;
+        return;
+      }
+      if (r.status !== 'COMPUTED') {
+        unavailable += 1;
+        return;
+      }
+      const pub = r.publicChanges || [];
+      added += pub.filter((c) => c.status === 'ADDED').length;
+      removed += pub.filter((c) => c.status === 'REMOVED').length;
+      modified += pub.filter((c) => c.status === 'MODIFIED').length;
+      breaking += pub.filter((c) => c.impact === 'BREAKING').length;
+      internal += (r.internalChanges || []).length;
+      if (pub.length > 0) withPublicChanges += 1;
+      if (r.hasChanges) withAnyChanges += 1;
+    });
+    return {
+      added,
+      removed,
+      modified,
+      breaking,
+      internal,
+      withPublicChanges,
+      withAnyChanges,
+      unavailable,
+      failed,
+      loaded,
+    };
+  }, [results, queried]);
+
+  const loadedCount = totals.loaded;
+  const allLoaded = loadedCount >= queried.length;
+
+  if (entries.length === 0) {
+    return (
+      <div className={styles.fullView}>
+        <EmptyState
+          icon="⊘"
+          tone="neutral"
+          title="No components to compare"
+          subtitle="API diff requires components with both a base and compare version."
+        />
+      </div>
+    );
+  }
+
+  const allIncomparable = entries.every((e) => e.kind === 'incomparable');
+  if (allIncomparable) {
+    return (
+      <div className={styles.fullView}>
+        <EmptyState
+          icon="⊘"
+          tone="neutral"
+          title="Nothing to compare yet"
+          subtitle={`None of the ${entries.length} component${entries.length !== 1 ? 's' : ''} here have a comparable base version — most are new on this lane. Their full API is on each component's API Reference tab.`}
+        />
+      </div>
+    );
+  }
+
+  // gated entries were analyzed cheaply (no relevant changes → no query needed). failed
+  // queries are NOT analyzed — they must not inflate the stable hero's claim.
+  const gatedCount = entries.filter((e) => e.kind === 'gated').length;
+  const analyzedCount = loadedCount - totals.unavailable - totals.failed + gatedCount;
+  const stable = allLoaded && totals.withAnyChanges === 0 && totals.failed === 0 && analyzedCount > 0;
+
+  return (
+    <ApiDiffInsightProvider insights={insights}>
+      <ApiDiffDataProvider pairs={queryPairs} active={active} host={host}>
+        <div className={styles.fullView}>
+          <div className={styles.summaryBar}>
+            <div className={styles.summaryTitle}>
+              <span className={styles.summaryHeading}>API Surface Changes</span>
+              {!allLoaded && (
+                <span className={styles.summaryLoading}>
+                  Analyzing {loadedCount} of {queried.length}…
+                </span>
+              )}
+            </div>
+            {!allLoaded && queried.length > 0 && (
+              <div className={styles.summaryProgress}>
+                <div
+                  className={styles.summaryProgressFill}
+                  style={{ width: `${Math.round((loadedCount / queried.length) * 100)}%` }}
+                />
+              </div>
+            )}
+            {allLoaded && totals.withAnyChanges > 0 && (
+              <div className={styles.summaryStats}>
+                {totals.breaking > 0 && (
+                  <span className={styles.summaryStat}>
+                    <span
+                      className={styles.summaryDot}
+                      style={{ background: 'var(--on-surface-negative-bold, #cf222e)' }}
+                    />
+                    {totals.breaking} breaking
+                  </span>
+                )}
+                <span className={styles.summaryStat}>
+                  <span className={styles.summaryDot} style={{ background: 'var(--success-color, #1a7f37)' }} />
+                  {totals.added} added
+                </span>
+                <span className={styles.summaryStat}>
+                  <span
+                    className={styles.summaryDot}
+                    style={{ background: 'var(--on-surface-negative-bold, #cf222e)' }}
+                  />
+                  {totals.removed} removed
+                </span>
+                <span className={styles.summaryStat}>
+                  <span className={styles.summaryDot} style={{ background: 'var(--warning-color, #d6a022)' }} />
+                  {totals.modified} modified
+                </span>
+                {totals.internal > 0 && <span className={styles.summaryStatMuted}>{totals.internal} internal</span>}
+              </div>
+            )}
+          </div>
+
+          {stable && (
+            <EmptyState
+              icon="✓"
+              tone="success"
+              title="API surface is stable"
+              subtitle={`${analyzedCount} component${analyzedCount !== 1 ? 's' : ''} analyzed — no API changes between these versions.`}
+            />
+          )}
+
+          {/* every component always renders (sections or slim rows) — even in the stable
+            state — so the sidebar's data-component-id scroll anchors always exist. */}
+          {entries.map(({ entry, kind }) => {
+            const idStr = entry.componentId.toStringWithoutVersion();
+            if (kind === 'incomparable') {
+              const copy = incomparableCopy(entry);
+              return (
+                <ApiDiffSlimRow
+                  key={idStr}
+                  componentIdStr={idStr}
+                  displayName={entry.componentId.fullName}
+                  chip={copy.chip}
+                  detail={copy.detail}
+                  tone="ok"
+                />
+              );
+            }
+            if (kind === 'gated') {
+              const sameVersion = entry.sourceHead === entry.targetHead;
+              return (
+                <ApiDiffSlimRow
+                  key={idStr}
+                  componentIdStr={idStr}
+                  displayName={entry.componentId.fullName}
+                  chip="✓ no API changes"
+                  detail={sameVersion ? 'same version on both sides' : 'no source or dependency changes'}
+                  tone="ok"
+                />
+              );
+            }
+            return (
+              <ComponentApiDiffContainer
+                key={idStr}
+                entry={entry}
+                selectedExport={selectedId === idStr ? selectedExport : undefined}
+                onLoaded={onDiffLoaded}
+                onApiEntries={onApiEntries}
+                active={active}
+              />
+            );
+          })}
+        </div>
+      </ApiDiffDataProvider>
+    </ApiDiffInsightProvider>
+  );
+}
+
+function EmptyState({
+  icon,
+  title,
+  subtitle,
+  tone,
+}: {
+  icon: string;
+  title: string;
+  subtitle: string;
+  tone: 'success' | 'neutral';
+}) {
+  return (
+    <div className={styles.emptyState}>
+      <div className={`${styles.emptyIcon}${tone === 'neutral' ? ` ${styles.emptyIconNeutral}` : ''}`}>{icon}</div>
+      <div className={styles.emptyTitle}>{title}</div>
+      <div className={styles.emptySubtitle}>{subtitle}</div>
+    </div>
+  );
+}
+
+/** @deprecated use ApiDiffLaneView */
+export const ApiDiffFullView = ApiDiffLaneView;
+export type ApiDiffFullViewProps = ApiDiffLaneViewProps;
diff --git a/components/ui/api-diff-view/component-api-diff-section.tsx b/components/ui/api-diff-view/component-api-diff-section.tsx
new file mode 100644
index 000000000000..64eb26583127
--- /dev/null
+++ b/components/ui/api-diff-view/component-api-diff-section.tsx
@@ -0,0 +1,821 @@
+import React, { useState } from 'react';
+import type { ReactNode } from 'react';
+import { useHighlightedLines, resolveTokenColor } from '@teambit/code.ui.diff-viewer';
+import type { APIDiffChange, APIDiffDetail, APIDiffResult, ImpactLevel } from './api-diff-model';
+import { impactLabel, unavailableText } from './api-diff-model';
+import { useApiDiffInsights } from './api-diff-insights';
+import type { ApiDiffInsightContext } from './api-diff-insights';
+import styles from './api-diff-view.module.scss';
+
+/**
+ * public changes are grouped + ordered by impact so the most consequential ones are read first and
+ * the list is scannable by category (breaking → minor → patch) rather than an arbitrary mix.
+ */
+const CHANGE_GROUPS: { key: string; label: string; match: (c: APIDiffChange) => boolean }[] = [
+  { key: 'BREAKING', label: 'Breaking', match: (c) => c.impact === 'BREAKING' },
+  { key: 'NON_BREAKING', label: 'Minor', match: (c) => c.impact === 'NON_BREAKING' },
+  { key: 'PATCH', label: 'Patch', match: (c) => c.impact !== 'BREAKING' && c.impact !== 'NON_BREAKING' },
+];
+
+export function ImpactBadge({ impact, small }: { impact: ImpactLevel | string; small?: boolean }) {
+  const colors: Record<string, { bg: string; fg: string }> = {
+    BREAKING: { bg: 'rgba(207, 34, 46, 0.1)', fg: 'var(--on-surface-negative-bold, #cf222e)' },
+    NON_BREAKING: { bg: 'rgba(210, 153, 34, 0.1)', fg: 'var(--warning-color, #d6a022)' },
+    PATCH: { bg: 'rgba(26, 127, 55, 0.08)', fg: 'var(--success-color, #1a7f37)' },
+  };
+  const c = colors[impact] || colors.PATCH;
+
+  return (
+    <span className={small ? styles.impactBadgeSmall : styles.impactBadge} style={{ background: c.bg, color: c.fg }}>
+      {impactLabel(impact)}
+    </span>
+  );
+}
+
+export function StatusIndicator({ status }: { status: string }) {
+  const config: Record<string, { label: string; color: string }> = {
+    ADDED: { label: '+', color: 'var(--success-color, #1a7f37)' },
+    REMOVED: { label: '−', color: 'var(--on-surface-negative-bold, #cf222e)' },
+    MODIFIED: { label: '~', color: 'var(--warning-color, #d6a022)' },
+  };
+  const c = config[status] || config.MODIFIED;
+
+  return (
+    <span className={styles.statusIndicator} style={{ color: c.color, borderColor: c.color }}>
+      {c.label}
+    </span>
+  );
+}
+
+function ImpactDot({ impact }: { impact: string }) {
+  const colors: Record<string, string> = {
+    BREAKING: 'var(--on-surface-negative-bold, #cf222e)',
+    NON_BREAKING: 'var(--warning-color, #d6a022)',
+    PATCH: 'var(--success-color, #1a7f37)',
+  };
+  return <span className={styles.impactDot} style={{ background: colors[impact] || colors.PATCH }} />;
+}
+
+type Tok = { text: string; changed: boolean };
+
+/** split into identifier / whitespace / punctuation tokens so the diff aligns on real boundaries. */
+function tokenize(s: string): string[] {
+  return s.match(/[A-Za-z0-9_$]+|\s+|[^A-Za-z0-9_$\s]/g) || [];
+}
+
+/**
+ * token-level (word) diff of two signature strings via an LCS walk — marks exactly which tokens
+ * were removed on the `from` side and added on the `to` side, so a one-character type change is
+ * visible instead of two identical-looking lines.
+ */
+function tokenDiff(from: string, to: string): { fromParts: Tok[]; toParts: Tok[] } {
+  const a = tokenize(from);
+  const b = tokenize(to);
+  const m = a.length;
+  const n = b.length;
+  const dp: number[][] = Array.from({ length: m + 1 }, () => Array.from({ length: n + 1 }, () => 0));
+  for (let i = m - 1; i >= 0; i--) {
+    for (let j = n - 1; j >= 0; j--) {
+      dp[i][j] = a[i] === b[j] ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
+    }
+  }
+  const fromParts: Tok[] = [];
+  const toParts: Tok[] = [];
+  let i = 0;
+  let j = 0;
+  while (i < m && j < n) {
+    if (a[i] === b[j]) {
+      fromParts.push({ text: a[i], changed: false });
+      toParts.push({ text: b[j], changed: false });
+      i++;
+      j++;
+    } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+      fromParts.push({ text: a[i], changed: true });
+      i++;
+    } else {
+      toParts.push({ text: b[j], changed: true });
+      j++;
+    }
+  }
+  while (i < m) fromParts.push({ text: a[i++], changed: true });
+  while (j < n) toParts.push({ text: b[j++], changed: true });
+  return { fromParts, toParts };
+}
+
+function DiffCode({ parts }: { parts: Tok[] }) {
+  return (
+    <span className={styles.diffCode}>
+      {parts.map((p, i) =>
+        // only emphasize meaningful (non-whitespace) changed tokens — highlighting spaces is noise.
+        p.changed && p.text.trim() ? (
+          <mark key={i} className={styles.diffTok}>
+            {p.text}
+          </mark>
+        ) : (
+          <span key={i}>{p.text}</span>
+        )
+      )}
+    </span>
+  );
+}
+
+/**
+ * a before/after signature shown as a git-style stacked diff with token-level highlighting: the
+ * removed line over the added line, full-width monospace, aligned gutter, and only the tokens that
+ * actually differ emphasized.
+ *
+ * When both sides are present and identical, the public signature didn't move (the change is
+ * internal/transitive). Rather than render a confusing two-line "diff" of identical text — or nothing
+ * at all, which is impossible to understand — show the signature ONCE as a neutral context line so
+ * the reader still sees the member's type and can tell it's unchanged at the surface.
+ */
+function DiffPair({ from, to }: { from?: string; to?: string }) {
+  if (from && to && from === to) {
+    return (
+      <div className={styles.diffBlock}>
+        <code className={`${styles.diffLine} ${styles.diffLineContext}`}>
+          <span className={styles.diffGutter} aria-hidden="true">
+            ·
+          </span>
+          <span className={styles.diffCode}>{from}</span>
+          <span className={styles.diffContextNote}>public signature unchanged</span>
+        </code>
+      </div>
+    );
+  }
+  const diff = from && to ? tokenDiff(from, to) : undefined;
+
+  return (
+    <div className={styles.diffBlock}>
+      {from && (
+        <code className={`${styles.diffLine} ${styles.diffLineRemoved}`}>
+          <span className={styles.diffGutter} aria-hidden="true">
+            −
+          </span>
+          {diff ? <DiffCode parts={diff.fromParts} /> : <span className={styles.diffCode}>{from}</span>}
+        </code>
+      )}
+      {to && (
+        <code className={`${styles.diffLine} ${styles.diffLineAdded}`}>
+          <span className={styles.diffGutter} aria-hidden="true">
+            +
+          </span>
+          {diff ? <DiffCode parts={diff.toParts} /> : <span className={styles.diffCode}>{to}</span>}
+        </code>
+      )}
+    </div>
+  );
+}
+
+// ── member-cause grouping (severity clusters + collapse-by-kind) ──────────────
+
+type CauseKind = 'add' | 'remove' | 'modify' | 'doc';
+
+/** the severity buckets, ordered breaking → minor → patch. */
+const SEVERITY_TIERS: { key: string; label: string; match: (impact: string) => boolean }[] = [
+  { key: 'BREAKING', label: 'Breaking', match: (i) => i === 'BREAKING' },
+  { key: 'NON_BREAKING', label: 'Minor', match: (i) => i === 'NON_BREAKING' },
+  { key: 'PATCH', label: 'Patch', match: (i) => i !== 'BREAKING' && i !== 'NON_BREAKING' },
+];
+
+/**
+ * TS quick-info signatures are prefixed with the member kind and owning type, e.g.
+ * `(property) AttReact.oxlintConfigPath: string`. Pull the kind out (for collapse-by-kind) and strip
+ * the `(kind) Owner.` prefix so the snippet reads as a clean declaration (`oxlintConfigPath: string`).
+ */
+function parseSignature(sig: string | undefined, ownerName: string): { kind?: string; clean: string } {
+  if (!sig) return { clean: '' };
+  const m = sig.match(/^\(([a-z][a-z ]*)\)\s+([\s\S]*)$/);
+  if (!m) return { clean: sig };
+  let body = m[2];
+  const qualifier = `${ownerName}.`;
+  if (body.startsWith(qualifier)) body = body.slice(qualifier.length);
+  return { kind: m[1].trim(), clean: body };
+}
+
+type ClassifiedCause = { detail: APIDiffDetail; type: CauseKind; kind?: string; clean: string };
+
+function classifyCause(detail: APIDiffDetail, ownerName: string): ClassifiedCause {
+  const ck = detail.changeKind || '';
+  if (ck === 'member-added') {
+    const { kind, clean } = parseSignature(detail.to, ownerName);
+    return { detail, type: 'add', kind, clean };
+  }
+  if (ck === 'member-removed') {
+    const { kind, clean } = parseSignature(detail.from, ownerName);
+    return { detail, type: 'remove', kind, clean };
+  }
+  // documentation-only changes carry prose (not a signature) in from/to — render as a note, never a snippet.
+  if (ck.includes('documentation')) return { detail, type: 'doc', clean: '' };
+  return { detail, type: 'modify', clean: '' };
+}
+
+function pluralizeKind(kind: string, n: number): string {
+  if (n === 1) return kind;
+  if (kind.endsWith('y')) return `${kind.slice(0, -1)}ies`;
+  return `${kind}s`;
+}
+
+/** leading identifier of a cleaned signature (`foo(): T` → `foo`, `bar: string` → `bar`). */
+function memberNameFromSignature(clean: string): string {
+  return clean.match(/^[A-Za-z0-9_$]+/)?.[0] || clean;
+}
+
+/** concise label for a modified/structural cause — drops the inline `: from → to` the diff already shows. */
+function modifyLabel(detail: APIDiffDetail): string {
+  return (detail.description || detail.changeKind || 'changed').split(/:|—/)[0].trim();
+}
+
+/**
+ * one signature rendered with the diff-viewer's shiki highlighter. shiki paints sentinel colors that
+ * must be translated to Bit's design-system syntax vars via `resolveTokenColor` (rendering the raw
+ * sentinels shows garish yellow/red). Falls back to plain monospace while the grammar loads.
+ */
+function HighlightedSignature({ code }: { code: string }) {
+  const lines = useHighlightedLines(code, 'typescript');
+  if (!lines) return <>{code}</>;
+  return (
+    <>
+      {lines.map((tokens, li) => (
+        <React.Fragment key={li}>
+          {li > 0 ? '\n' : null}
+          {tokens.map((t, ti) => {
+            const color = resolveTokenColor(t.color);
+            return (
+              <span key={ti} style={color ? { color } : undefined}>
+                {t.content}
+              </span>
+            );
+          })}
+        </React.Fragment>
+      ))}
+    </>
+  );
+}
+
+/**
+ * a single added/removed signature line. Rendered on a NEUTRAL surface (not a green/red fill) so the
+ * syntax colors — tuned for a light code background — always clear WCAG contrast; the add/remove
+ * signal comes from the gutter marker + the block's colored left edge, never from text-on-tint.
+ */
+function SignatureLine({ clean, tone }: { clean: string; tone: 'add' | 'remove' }) {
+  return (
+    <code className={styles.sigLine}>
+      <span className={styles.diffGutter} aria-hidden="true">
+        {tone === 'add' ? '+' : '−'}
+      </span>
+      <span className={styles.diffCode}>
+        <HighlightedSignature code={clean} />
+      </span>
+    </code>
+  );
+}
+
+/** a collapsed add/remove cluster: one label ("4 properties added") over a stack of signature lines. */
+function CollapsedCauses({ causes, type }: { causes: ClassifiedCause[]; type: 'add' | 'remove' }) {
+  const verb = type === 'add' ? 'added' : 'removed';
+  const kind = causes[0].kind || 'member';
+  const single = causes.length === 1;
+
+  return (
+    <div className={styles.memberGroup}>
+      <div className={styles.memberLabel}>
+        {single ? (
+          <>
+            <b className={styles.memberName}>{memberNameFromSignature(causes[0].clean)}</b>
+            <span className={styles.memberKind}>
+              {kind} {verb}
+            </span>
+          </>
+        ) : (
+          <>
+            <b className={styles.memberName}>
+              {causes.length} {pluralizeKind(kind, causes.length)}
+            </b>
+            <span className={styles.memberKind}>{verb}</span>
+          </>
+        )}
+      </div>
+      <div className={`${styles.sigBlock} ${type === 'add' ? styles.sigBlockAdd : styles.sigBlockRemove}`}>
+        {causes.map((c, i) => (
+          <SignatureLine key={`${c.clean}-${i}`} clean={c.clean} tone={type} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/** collapse same-kind add/remove causes into one cluster each, preserving input order of first appearance. */
+function collapseByKind(causes: ClassifiedCause[]): ClassifiedCause[][] {
+  const buckets = new Map<string, ClassifiedCause[]>();
+  for (const c of causes) {
+    const key = c.kind || 'member';
+    const arr = buckets.get(key);
+    if (arr) arr.push(c);
+    else buckets.set(key, [c]);
+  }
+  return [...buckets.values()];
+}
+
+/** render one modified/structural cause: a concise label over the token-level before/after diff. */
+function ModifiedCause({ detail }: { detail: APIDiffDetail }) {
+  return (
+    <div className={styles.memberGroup}>
+      <div className={styles.memberLabel}>
+        <b className={styles.memberName}>{modifyLabel(detail)}</b>
+      </div>
+      {(detail.from || detail.to) && <DiffPair from={detail.from} to={detail.to} />}
+    </div>
+  );
+}
+
+/**
+ * a documentation-only cause. Beyond the label, it shows the actual doc/comment prose that was
+ * removed (red) and/or added (green) — so "documentation removed" reveals *what* was removed rather
+ * than just stating it. Doc text is prose (never a signature), so it renders as dark text on a faint
+ * tint (dark-on-tint clears contrast) with no syntax highlighting. Falls back to a plain note when
+ * neither side carries text.
+ */
+function NoteCause({ detail, ownerName }: { detail: APIDiffDetail; ownerName: string }) {
+  if (!detail.from && !detail.to && !detail.signature) {
+    return (
+      <div className={styles.memberNote}>
+        <ImpactDot impact={detail.impact} />
+        <span className={styles.causeDescription}>{detail.description}</span>
+      </div>
+    );
+  }
+  // the declaration this doc belongs to, shown as an unchanged context line beneath the doc diff.
+  const contextSignature = detail.signature ? parseSignature(detail.signature, ownerName).clean : undefined;
+  return (
+    <div className={styles.memberGroup}>
+      <div className={styles.memberLabel}>
+        <b className={styles.memberName}>{modifyLabel(detail)}</b>
+        <span className={styles.memberKind}>documentation {docVerb(detail.changeKind)}</span>
+      </div>
+      <div className={styles.docBlock}>
+        {detail.from && (
+          <div className={`${styles.docLine} ${styles.docRemoved}`}>
+            <span className={styles.diffGutter} aria-hidden="true">
+              −
+            </span>
+            <span className={styles.docText}>{detail.from}</span>
+          </div>
+        )}
+        {detail.to && (
+          <div className={`${styles.docLine} ${styles.docAdded}`}>
+            <span className={styles.diffGutter} aria-hidden="true">
+              +
+            </span>
+            <span className={styles.docText}>{detail.to}</span>
+          </div>
+        )}
+        {contextSignature && (
+          <code className={`${styles.docLine} ${styles.docContext}`}>
+            <span className={styles.diffGutter} aria-hidden="true">
+              ·
+            </span>
+            <span className={styles.diffCode}>
+              <HighlightedSignature code={contextSignature} />
+            </span>
+          </code>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function docVerb(changeKind: string): string {
+  if (changeKind.includes('removed')) return 'removed';
+  if (changeKind.includes('added')) return 'added';
+  return 'changed';
+}
+
+/**
+ * the reworked cause list: member changes clustered by severity (breaking → minor → patch), and
+ * within each tier the additions/removals collapse by kind into signature snippets (with the diff-
+ * viewer's highlighting), modifications keep the token-level before/after diff, and doc-only changes
+ * render as notes. This makes a long flat list scannable by consequence and shows every add/remove
+ * as its real signature instead of a prose line.
+ */
+function CauseClusters({ details, ownerName }: { details: APIDiffDetail[]; ownerName: string }) {
+  const classified = details.map((d) => classifyCause(d, ownerName));
+
+  return (
+    <div className={styles.causeClusters}>
+      {SEVERITY_TIERS.map((tier) => {
+        const tierCauses = classified.filter((c) => tier.match(c.detail.impact));
+        if (tierCauses.length === 0) return null;
+
+        const removes = tierCauses.filter((c) => c.type === 'remove');
+        const modifies = tierCauses.filter((c) => c.type === 'modify');
+        const adds = tierCauses.filter((c) => c.type === 'add');
+        const notes = tierCauses.filter((c) => c.type === 'doc');
+
+        return (
+          <div key={tier.key} className={`${styles.severityGroup} ${styles[`severity_${tier.key}`]}`}>
+            <div className={styles.severityHeader}>
+              <span className={styles.severityLabel}>{tier.label}</span>
+              <span className={styles.severityCount}>{tierCauses.length}</span>
+            </div>
+            {collapseByKind(removes).map((bucket, i) => (
+              <CollapsedCauses key={`rem-${i}`} causes={bucket} type="remove" />
+            ))}
+            {modifies.map((c, i) => (
+              <ModifiedCause key={`mod-${i}`} detail={c.detail} />
+            ))}
+            {collapseByKind(adds).map((bucket, i) => (
+              <CollapsedCauses key={`add-${i}`} causes={bucket} type="add" />
+            ))}
+            {notes.map((c, i) => (
+              <NoteCause key={`doc-${i}`} detail={c.detail} ownerName={ownerName} />
+            ))}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export type ApiChangeBlockProps = {
+  change: APIDiffChange;
+  /** anchor id used by the compare sidebar scroll-sync (`data-file-id="<componentId>:<exportName>"`) */
+  anchorId?: string;
+  focused?: boolean;
+  dimmed?: boolean;
+  insightCtx?: ApiDiffInsightContext;
+};
+
+/**
+ * one API change, fully expanded: what changed (signatures), why it carries its
+ * impact (assessed change facts), and any slot-contributed insights.
+ */
+export function ApiChangeBlock({ change, anchorId, focused, dimmed, insightCtx }: ApiChangeBlockProps) {
+  const insights = useApiDiffInsights();
+  const matching = insightCtx ? insights.filter((i) => !i.matches || i.matches(change, insightCtx)) : [];
+
+  return (
+    <div
+      className={`${styles.changeBlock}${focused ? ` ${styles.changeBlockFocused}` : ''}${dimmed ? ` ${styles.changeBlockDimmed}` : ''}`}
+      data-file-id={anchorId}
+    >
+      <div className={styles.changeBlockHeader}>
+        <StatusIndicator status={change.status} />
+        <span className={styles.exportName}>{change.exportName}</span>
+        <span className={styles.schemaType}>{change.schemaType}</span>
+        <ImpactBadge impact={change.impact} small />
+        {change.status === 'ADDED' && <span className={styles.changeBlockNote}>added to {change.visibility} API</span>}
+        {change.status === 'REMOVED' && (
+          <span className={styles.changeBlockNote}>removed from {change.visibility} API</span>
+        )}
+      </div>
+
+      {(change.baseSignature || change.compareSignature) && (
+        <div className={styles.signatures}>
+          <DiffPair from={change.baseSignature} to={change.compareSignature} />
+        </div>
+      )}
+
+      {change.changes && change.changes.length > 0 && (
+        <CauseClusters details={change.changes} ownerName={change.exportName} />
+      )}
+
+      {matching.length > 0 && (
+        <div className={styles.insights}>
+          {matching.map((insight) => (
+            <div key={insight.id} className={styles.insight}>
+              {insight.render(change, insightCtx!)}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export type ApiDiffSlimRowProps = {
+  componentIdStr: string;
+  displayName: string;
+  chip: ReactNode;
+  detail?: ReactNode;
+  tone?: 'ok' | 'warn' | 'error';
+  /** renders an expand affordance; children are shown when expanded */
+  expandable?: boolean;
+  children?: ReactNode;
+};
+
+/**
+ * component-level one-liner for components without renderable public changes:
+ * "no API changes", "no API data" (with reason), errors, and internal-only changes
+ * (expandable). always carries the `data-component-id` anchor so sidebar selection
+ * can scroll to it.
+ */
+export function ApiDiffSlimRow({
+  componentIdStr,
+  displayName,
+  chip,
+  detail,
+  tone = 'ok',
+  expandable,
+  children,
+}: ApiDiffSlimRowProps) {
+  const [expanded, setExpanded] = useState(false);
+  const toneClass = tone === 'warn' ? styles.slimChipWarn : tone === 'error' ? styles.slimChipError : styles.slimChipOk;
+
+  const content = (
+    <>
+      <span className={styles.slimName}>{displayName}</span>
+      <span className={`${styles.slimChip} ${toneClass}`}>{chip}</span>
+      {detail && <span className={styles.slimDetail}>{detail}</span>}
+      {expandable && <span className={`${styles.slimExpand}${expanded ? ` ${styles.slimExpandOpen}` : ''}`}>›</span>}
+    </>
+  );
+
+  return (
+    <div className={styles.slimRowWrapper} data-component-id={componentIdStr}>
+      {expandable ? (
+        <button className={`${styles.slimRow} ${styles.slimRowButton}`} onClick={() => setExpanded(!expanded)}>
+          {content}
+        </button>
+      ) : (
+        <div className={styles.slimRow}>{content}</div>
+      )}
+      {expanded && children && <div className={styles.slimExpanded}>{children}</div>}
+    </div>
+  );
+}
+
+/**
+ * A neutral blank state for when there's genuinely no API to compare — NEITHER version exposes a
+ * public API (e.g. both built before extraction, no extractor, or extraction disabled). Distinct
+ * from the amber "Schema unavailable" warning, which flags that ONE side couldn't be read (an
+ * actionable gap: pick a different version). Here there's nothing to act on, so it reads calm.
+ */
+export function ApiDiffBlankState({
+  componentIdStr,
+  title,
+  detail,
+}: {
+  componentIdStr: string;
+  title: string;
+  detail?: ReactNode;
+}) {
+  return (
+    <div className={styles.apiBlankState} data-component-id={componentIdStr}>
+      <div className={styles.apiBlankIcon} aria-hidden="true">
+        <svg
+          width="26"
+          height="26"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.6"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <path d="M8 3H7a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2 2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h1" />
+          <path d="M16 3h1a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2 2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-1" />
+        </svg>
+      </div>
+      <div className={styles.apiBlankTitle}>{title}</div>
+      {detail && <div className={styles.apiBlankDetail}>{detail}</div>}
+    </div>
+  );
+}
+
+export type ComponentApiDiffSectionProps = {
+  /** component id without version — used for anchors and registry keys */
+  componentIdStr: string;
+  displayName: string;
+  baseId?: string;
+  compareId?: string;
+  baseVersion?: string;
+  compareVersion?: string;
+  result: APIDiffResult | null | undefined;
+  loading?: boolean;
+  error?: string;
+  /** export name currently selected in the sidebar — gets the focus treatment */
+  selectedExport?: string;
+};
+
+/**
+ * full per-component API diff treatment. renders one of:
+ * - loading shimmer
+ * - error / unavailable-with-reason slim row
+ * - "no API changes" slim row
+ * - internal-only expandable slim row
+ * - full section: header + public change blocks + collapsed internal section
+ *
+ * used by both the lane compare full-pane view and the single-component compare tab.
+ */
+export function ComponentApiDiffSection({
+  componentIdStr,
+  displayName,
+  baseId,
+  compareId,
+  baseVersion,
+  compareVersion,
+  result,
+  loading,
+  error,
+  selectedExport,
+}: ComponentApiDiffSectionProps) {
+  const [internalExpanded, setInternalExpanded] = useState(false);
+
+  if (loading) {
+    return (
+      <div className={styles.section} data-component-id={componentIdStr}>
+        <div className={styles.sectionHeader}>
+          <span className={styles.sectionName}>{displayName}</span>
+          <span className={styles.sectionLoading}>Analyzing API…</span>
+        </div>
+        <div className={styles.sectionSkeleton}>
+          <div className={styles.skeletonBar} style={{ width: '38%' }} />
+          <div className={styles.skeletonBar} style={{ width: '62%' }} />
+          <div className={styles.skeletonBar} style={{ width: '47%' }} />
+        </div>
+      </div>
+    );
+  }
+
+  if (error || result === null) {
+    return (
+      <ApiDiffSlimRow
+        componentIdStr={componentIdStr}
+        displayName={displayName}
+        chip="⚠ API diff failed"
+        detail={error}
+        tone="error"
+      />
+    );
+  }
+
+  if (!result) {
+    // result === undefined with loading false means the query was skipped (same version on
+    // both sides / missing id). still render an anchored row so the component doesn't
+    // silently vanish from the pane and sidebar clicks have a scroll target.
+    return (
+      <ApiDiffSlimRow
+        componentIdStr={componentIdStr}
+        displayName={displayName}
+        chip="nothing to compare"
+        detail="no diffable version pair"
+        tone="ok"
+      />
+    );
+  }
+
+  // NEITHER side has an API — there's genuinely nothing to compare (both built before extraction,
+  // no extractor, or extraction disabled). A calm blank state, not a warning: nothing to act on.
+  if (result.status === 'UNAVAILABLE') {
+    return (
+      <ApiDiffBlankState
+        componentIdStr={componentIdStr}
+        title="No API to compare"
+        detail={unavailableText(result, baseVersion, compareVersion) || 'neither version exposes a public API'}
+      />
+    );
+  }
+
+  // ONE side's API could not be read (e.g. that version was built before API extraction). This is
+  // NOT "no changes" — we couldn't compare at all — and it's actionable (pick another version), so it
+  // stays an amber warning naming the version/reason.
+  if (result.status !== 'COMPUTED') {
+    return (
+      <ApiDiffSlimRow
+        componentIdStr={componentIdStr}
+        displayName={displayName}
+        chip="⚠ Schema unavailable"
+        detail={unavailableText(result, baseVersion, compareVersion) || 'could not compare API for these versions'}
+        tone="warn"
+      />
+    );
+  }
+
+  const insightCtx: ApiDiffInsightContext = { componentId: componentIdStr, baseId, compareId, result };
+  const publicChanges = result.publicChanges || [];
+  const internalChanges = result.internalChanges || [];
+  const unresolvedExports = result.unresolvedExports || [];
+
+  if (publicChanges.length === 0 && internalChanges.length === 0) {
+    // Extraction couldn't read some exports but nothing actually changed — say so plainly instead of a
+    // clean "no API changes", so an incomplete analysis isn't mistaken for a verified no-op.
+    if (unresolvedExports.length > 0) {
+      return (
+        <ApiDiffSlimRow
+          componentIdStr={componentIdStr}
+          displayName={displayName}
+          chip={`⚠ ${unresolvedExports.length} couldn't be analyzed`}
+          detail={`extraction incomplete for ${unresolvedExports.join(', ')}, not a change`}
+          tone="warn"
+        />
+      );
+    }
+    // Computed successfully and the public API is identical — a real, verified no-op (distinct from
+    // "Schema unavailable" above, where we couldn't read the API at all).
+    return (
+      <ApiDiffSlimRow
+        componentIdStr={componentIdStr}
+        displayName={displayName}
+        chip="✓ No API changes"
+        detail="the public API is identical between these versions"
+        tone="ok"
+      />
+    );
+  }
+
+  if (publicChanges.length === 0) {
+    return (
+      <ApiDiffSlimRow
+        componentIdStr={componentIdStr}
+        displayName={displayName}
+        chip="no public API changes"
+        detail={`${internalChanges.length} internal change${internalChanges.length > 1 ? 's' : ''}`}
+        tone="ok"
+        expandable
+      >
+        {internalChanges.map((change, i) => (
+          <ApiChangeBlock key={`${change.exportName}-${i}`} change={change} dimmed insightCtx={insightCtx} />
+        ))}
+      </ApiDiffSlimRow>
+    );
+  }
+
+  const stats = {
+    added: publicChanges.filter((c) => c.status === 'ADDED').length,
+    removed: publicChanges.filter((c) => c.status === 'REMOVED').length,
+    modified: publicChanges.filter((c) => c.status === 'MODIFIED').length,
+    breaking: publicChanges.filter((c) => c.impact === 'BREAKING').length,
+  };
+
+  return (
+    <div className={styles.section} data-component-id={componentIdStr}>
+      <div className={styles.sectionHeader}>
+        <span className={styles.sectionName}>{displayName}</span>
+        <ImpactBadge impact={result.impact} />
+        {baseVersion && compareVersion && (
+          <span className={styles.sectionVersions}>
+            {baseVersion.slice(0, 7)} → {compareVersion.slice(0, 7)}
+          </span>
+        )}
+        <span className={styles.sectionStats}>
+          {stats.added > 0 && <span className={styles.statAdded}>+{stats.added} added</span>}
+          {stats.removed > 0 && <span className={styles.statRemoved}>{stats.removed} removed</span>}
+          {stats.modified > 0 && <span className={styles.statModified}>{stats.modified} modified</span>}
+          {stats.breaking > 0 && <span className={styles.statBreaking}>{stats.breaking} breaking</span>}
+        </span>
+      </div>
+
+      {CHANGE_GROUPS.map((group) => {
+        const groupChanges = publicChanges.filter(group.match);
+        if (groupChanges.length === 0) return null;
+        return (
+          <div key={group.key} className={styles.changeGroup}>
+            <div className={styles.changeGroupHeader}>
+              <span className={styles.changeGroupDot} data-impact={group.key} />
+              <span className={styles.changeGroupLabel}>{group.label}</span>
+              <span className={styles.changeGroupCount}>{groupChanges.length}</span>
+            </div>
+            {groupChanges.map((change, i) => (
+              <ApiChangeBlock
+                key={`${change.exportName}-${i}`}
+                change={change}
+                anchorId={`${componentIdStr}:${change.exportName}`}
+                focused={selectedExport === change.exportName}
+                insightCtx={insightCtx}
+              />
+            ))}
+          </div>
+        );
+      })}
+
+      {internalChanges.length > 0 && (
+        <div className={styles.internalSection}>
+          <button className={styles.internalToggle} onClick={() => setInternalExpanded(!internalExpanded)}>
+            <span className={`${styles.slimExpand}${internalExpanded ? ` ${styles.slimExpandOpen}` : ''}`}>›</span>
+            Internal changes
+            <span className={styles.internalCount}>{internalChanges.length}</span>
+            <ImpactBadge impact={result.internalImpact} small />
+          </button>
+          {internalExpanded &&
+            internalChanges.map((change, i) => (
+              <ApiChangeBlock key={`${change.exportName}-${i}`} change={change} dimmed insightCtx={insightCtx} />
+            ))}
+        </div>
+      )}
+
+      {unresolvedExports.length > 0 && (
+        <div className={styles.unresolvedNote}>
+          <span className={styles.unresolvedIcon} aria-hidden="true">
+            ⚠
+          </span>
+          <span className={styles.unresolvedText}>
+            {unresolvedExports.length} export{unresolvedExports.length > 1 ? 's' : ''} couldn&apos;t be analyzed (
+            {unresolvedExports.join(', ')}). Extraction was incomplete on one side, so this isn&apos;t reported as a
+            change.
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/components/ui/api-diff-view/index.ts b/components/ui/api-diff-view/index.ts
new file mode 100644
index 000000000000..4c159575d2a4
--- /dev/null
+++ b/components/ui/api-diff-view/index.ts
@@ -0,0 +1,30 @@
+export { ApiDiffLaneView, ApiDiffFullView } from './api-diff-view';
+export type { ApiDiffLaneViewProps, ApiDiffFullViewProps, ComponentDiffEntry, ApiEntry } from './api-diff-view';
+export {
+  ComponentApiDiffSection,
+  ApiChangeBlock,
+  ApiDiffSlimRow,
+  ImpactBadge,
+  StatusIndicator,
+} from './component-api-diff-section';
+export type {
+  ComponentApiDiffSectionProps,
+  ApiChangeBlockProps,
+  ApiDiffSlimRowProps,
+} from './component-api-diff-section';
+export { ApiDiffInsightProvider, useApiDiffInsights } from './api-diff-insights';
+export type { ApiDiffInsight, ApiDiffInsightContext } from './api-diff-insights';
+export { useApiDiff, API_DIFF_QUERY, API_DIFF_RESULT_FIELDS, impactLabel, unavailableText } from './api-diff-model';
+export { ApiDiffDataProvider, useApiDiffData, QUERY_API_DIFFS, API_DIFF_PAGE_SIZE } from './api-diff-data-context';
+export type { ApiDiffDataContextModel, ApiDiffPair } from './api-diff-data-context';
+export type {
+  APIDiffResult,
+  APIDiffChange,
+  APIDiffDetail,
+  SchemaSideAvailability,
+  ImpactLevel,
+  APIDiffComputeStatus,
+  SchemaUnavailableReason,
+  UseApiDiffOptions,
+  UseApiDiffResult,
+} from './api-diff-model';
diff --git a/components/ui/code-view/code-view.tsx b/components/ui/code-view/code-view.tsx
index ed7895cc950c..57d7300f4c7f 100644
--- a/components/ui/code-view/code-view.tsx
+++ b/components/ui/code-view/code-view.tsx
@@ -124,7 +124,8 @@ export function CodeView({
     componentId,
     currentFile,
     !!currentFileContent,
-    host
+    host,
+    true
   );
   const loading = loadingFromProps || loadingFileContent;
   const location = useLocation();
diff --git a/components/ui/compare/lane-compare-hooks/use-lane-diff-status/index.ts b/components/ui/compare/lane-compare-hooks/use-lane-diff-status/index.ts
new file mode 100644
index 000000000000..f56e441d80a1
--- /dev/null
+++ b/components/ui/compare/lane-compare-hooks/use-lane-diff-status/index.ts
@@ -0,0 +1,8 @@
+export {
+  useLaneDiffStatus,
+  LaneDiffStatusQueryResponse,
+  UseLaneDiffStatusResult,
+  UseLaneDiffStatus,
+  UseLaneDiffStatusOptions,
+  UseLaneDiffStatusProps,
+} from './use-lane-diff-status';
diff --git a/components/ui/compare/lane-compare-hooks/use-lane-diff-status/use-lane-diff-status.ts b/components/ui/compare/lane-compare-hooks/use-lane-diff-status/use-lane-diff-status.ts
new file mode 100644
index 000000000000..34fda8a85c77
--- /dev/null
+++ b/components/ui/compare/lane-compare-hooks/use-lane-diff-status/use-lane-diff-status.ts
@@ -0,0 +1,100 @@
+import { gql, useQuery } from '@apollo/client';
+import { LaneId } from '@teambit/lane-id';
+import { ComponentID, type ComponentIdObj } from '@teambit/component-id';
+import { LaneDiff, type PlainLaneDiff, type ChangeType } from '@teambit/lanes.entities.lane-diff';
+
+export type LaneDiffStatusQueryResponse = {
+  lanes: {
+    diffStatus: {
+      source: { name: string; scope: string };
+      target: { name: string; scope: string };
+      upToDate: boolean;
+      componentsStatus: Array<{
+        componentId: ComponentIdObj;
+        changes: ChangeType[];
+        upToDate: boolean;
+        sourceHead: string;
+        targetHead?: string;
+        baseSource?: 'workspace' | 'scope';
+      }>;
+    };
+  };
+};
+
+export const QUERY_LANE_DIFF_STATUS = gql`
+  query LaneDiffStatus($source: String!, $target: String!, $options: DiffStatusOptions) {
+    lanes {
+      id
+      diffStatus(source: $source, target: $target, options: $options) {
+        id
+        source {
+          name
+          scope
+        }
+        target {
+          name
+          scope
+        }
+        componentsStatus {
+          id
+          componentId {
+            scope
+            name
+            version
+          }
+          sourceHead
+          targetHead
+          baseSource
+          changes
+          upToDate
+          unrelated
+        }
+      }
+    }
+  }
+`;
+
+export type UseLaneDiffStatusResult = { loading?: boolean; laneDiff?: LaneDiff };
+export type UseLaneDiffStatus = (props: UseLaneDiffStatusProps) => UseLaneDiffStatusResult;
+export type UseLaneDiffStatusOptions = {
+  skipChanges?: boolean;
+  skipUpToDate?: boolean;
+};
+
+export type UseLaneDiffStatusProps = {
+  baseId?: string;
+  compareId?: string;
+  options?: UseLaneDiffStatusOptions;
+};
+
+export const useLaneDiffStatus: UseLaneDiffStatus = ({ baseId, compareId, options }) => {
+  // opt the lane-diff query into the GraphQL batching transport. when other batched queries fire in the
+  // same tick (e.g. the lane menu's lane-list + lane-status queries), they coalesce into a single HTTP
+  // round trip. solo, this still goes through BatchHttpLink and incurs only the `batchInterval` delay.
+  const { data, loading } = useQuery<LaneDiffStatusQueryResponse>(QUERY_LANE_DIFF_STATUS, {
+    variables: {
+      source: compareId,
+      target: baseId,
+      options,
+    },
+    skip: !baseId || !compareId,
+    context: { batch: true },
+  });
+
+  const plainLaneDiff: PlainLaneDiff | undefined = data?.lanes.diffStatus && {
+    sourceLane: LaneId.from(data.lanes.diffStatus.source.name, data.lanes.diffStatus.source.scope).toString(),
+    targetLane: LaneId.from(data.lanes.diffStatus.target.name, data.lanes.diffStatus.target.scope).toString(),
+    diff: data.lanes.diffStatus.componentsStatus.map((c) => ({
+      ...c,
+      changes: c.changes || [],
+      componentId: ComponentID.fromObject(c.componentId).toString(),
+    })),
+  };
+
+  const laneDiff = plainLaneDiff && LaneDiff.from(plainLaneDiff);
+
+  return {
+    loading,
+    laneDiff,
+  };
+};
diff --git a/components/ui/compare/lane-compare-page/index.ts b/components/ui/compare/lane-compare-page/index.ts
new file mode 100644
index 000000000000..280ff9d13031
--- /dev/null
+++ b/components/ui/compare/lane-compare-page/index.ts
@@ -0,0 +1,2 @@
+export { LaneComparePage } from './lane-compare-page';
+export type { LaneComparePageProps } from './lane-compare-page';
diff --git a/components/ui/compare/lane-compare-page/lane-compare-page.module.scss b/components/ui/compare/lane-compare-page/lane-compare-page.module.scss
new file mode 100644
index 000000000000..2c40d5252265
--- /dev/null
+++ b/components/ui/compare/lane-compare-page/lane-compare-page.module.scss
@@ -0,0 +1,66 @@
+.laneComparePage {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+.top {
+  display: flex;
+  padding: 24px;
+  padding-bottom: 8px;
+  align-items: flex-start;
+  flex-direction: column;
+  gap: 4px;
+  // width: 100%;
+}
+
+.subTitle {
+  font-size: var(--bit-p-xs, 14px);
+  color: var(--on-background-medium-color, #707279);
+}
+
+.title {
+  // same height as the lane selector
+  height: 34px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  width: 100%;
+}
+
+.rightIcon {
+  display: flex;
+  justify-self: center;
+
+  img {
+    height: 12px;
+    display: flex;
+    align-self: center;
+  }
+}
+
+.bottom {
+  display: flex;
+  overflow: auto;
+  height: 100%;
+}
+
+.compareLane {
+  display: flex;
+  text-align: center;
+  font-size: 24px;
+  font-weight: 700;
+  border-radius: 6px;
+  box-sizing: border-box;
+  align-items: center;
+}
+
+.baseSelectorContainer {
+  padding: 0px 4px;
+}
+
+.laneIcon {
+  padding-right: 4px;
+  height: 16px;
+  font-size: var(--bit-p-sm, 16px);
+}
diff --git a/components/ui/compare/lane-compare-page/lane-compare-page.tsx b/components/ui/compare/lane-compare-page/lane-compare-page.tsx
new file mode 100644
index 000000000000..f5b47e3699e3
--- /dev/null
+++ b/components/ui/compare/lane-compare-page/lane-compare-page.tsx
@@ -0,0 +1,122 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import type { HTMLAttributes } from 'react';
+import { useLocation } from 'react-router-dom';
+import type { LaneCompareProps, LanesModel } from '@teambit/lanes';
+import { useLanes as defaultUseLanes } from '@teambit/lanes.hooks.use-lanes';
+import type { UseLanes } from '@teambit/lanes.hooks.use-lanes';
+import { LaneSelector } from '@teambit/lanes.ui.inputs.lane-selector';
+import type { LaneModel } from '@teambit/lanes.ui.models.lanes-model';
+
+import styles from './lane-compare-page.module.scss';
+
+export type LaneComparePageProps = {
+  getLaneCompare: (props: LaneCompareProps) => React.ReactNode;
+  // TODO:fix this and enable the eslint rule
+  // eslint-disable-next-line react/require-default-props
+  groupByScope?: boolean;
+  // TODO:fix this and enable the eslint rule
+  // eslint-disable-next-line react/require-default-props
+  useLanes?: UseLanes;
+  // TODO:fix this and enable the eslint rule
+  // eslint-disable-next-line react/require-default-props
+  searchLanes?: (search?: string) => LanesModel | undefined | null;
+} & HTMLAttributes<HTMLDivElement>;
+
+export function LaneComparePage({
+  getLaneCompare,
+  groupByScope = false,
+  // @ts-ignore TODO fix with luv.
+  useLanes = defaultUseLanes,
+  searchLanes,
+  ...rest
+}: LaneComparePageProps) {
+  const { lanesModel, loading, fetchMoreLanes, hasMore, offset, limit } = useLanes();
+  const location = useLocation();
+  const [base, setBase] = useState<LaneModel | undefined>();
+  const defaultLane = lanesModel?.getDefaultLane();
+  const compare = lanesModel?.viewedLane;
+  const nonMainLanes = lanesModel?.getNonMainLanes() || [];
+  useEffect(() => {
+    if (!base && !compare?.id.isDefault() && defaultLane) {
+      setBase(defaultLane);
+    }
+    if (!base && compare?.id.isDefault() && (nonMainLanes?.length ?? 0) > 0) {
+      const firstActive = nonMainLanes.find((l) => !l.deleted);
+      if (firstActive) setBase(firstActive);
+    }
+  }, [defaultLane, compare?.id.toString(), nonMainLanes?.length]);
+
+  const LaneCompareComponent = getLaneCompare({ base, compare, groupBy: 'status' });
+
+  const lanes: Array<LaneModel> = useMemo(() => {
+    return nonMainLanes.filter((l) => l.toString() !== compare?.id.toString() && !l.deleted);
+  }, [base?.id.toString(), compare?.id.toString(), lanesModel?.lanes.length]);
+
+  useEffect(() => {
+    const collapser = document.querySelector('[class*="collapser"]') as HTMLElement;
+    const splitPane = document.querySelector('[class*="splitPane"]') as HTMLElement;
+    if (!collapser || !splitPane) return undefined;
+
+    const firstPane = splitPane.firstElementChild as HTMLElement;
+    const wasOpen = firstPane && firstPane.offsetWidth > 50;
+
+    if (wasOpen) {
+      firstPane.style.display = 'none';
+      requestAnimationFrame(() => {
+        collapser.click();
+        requestAnimationFrame(() => {
+          firstPane.style.display = '';
+        });
+      });
+    }
+
+    return () => {
+      if (wasOpen) {
+        const pane = splitPane.firstElementChild as HTMLElement;
+        if (pane && pane.offsetWidth <= 50) collapser.click();
+      }
+    };
+  }, []);
+
+  if (!lanesModel) return null;
+  if (!lanesModel.viewedLane) return null;
+  if (!base) return null;
+
+  return (
+    <div {...rest} className={styles.laneComparePage}>
+      <div className={styles.top}>
+        <div className={styles.subTitle}>Compare</div>
+        <div className={styles.title}>
+          <div className={styles.compareLane}>{compare?.id.name}</div>
+          <div className={styles.rightIcon}>
+            <img src="https://static.bit.dev/bit-icons/arrow-right.svg" alt="arrow-right" />
+          </div>
+          <div className={styles.baseSelectorContainer}>
+            <LaneSelector
+              // @ts-ignore
+              searchLanes={searchLanes}
+              selectedLaneId={base.id}
+              className={styles.baseSelector}
+              nonMainLanes={lanes}
+              mainLane={defaultLane}
+              groupByScope={groupByScope}
+              // This page picks the base lane into local state (onLaneSelected → setBase) and stays put;
+              // it does not route on selection. But LaneSelector unconditionally `navigate(getHref(...))`
+              // on click/Enter, so returning ' ' would navigate to a bogus whitespace URL. Return the
+              // current location instead: the item stays interactive and the forced navigation is a no-op.
+              getHref={() => `${location.pathname}${location.search}`}
+              onLaneSelected={(_, lane) => {
+                setBase(lane);
+              }}
+              loading={loading}
+              fetchMoreLanes={fetchMoreLanes}
+              hasMore={hasMore}
+              initialOffset={(offset ?? 0) + (limit ?? 0)}
+            />
+          </div>
+        </div>
+      </div>
+      <div className={styles.bottom}>{LaneCompareComponent}</div>
+    </div>
+  );
+}
diff --git a/components/ui/compare/lane-compare/base-source-indicator.module.scss b/components/ui/compare/lane-compare/base-source-indicator.module.scss
new file mode 100644
index 000000000000..531486c27f80
--- /dev/null
+++ b/components/ui/compare/lane-compare/base-source-indicator.module.scss
@@ -0,0 +1,34 @@
+.indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 12px;
+  line-height: 1;
+  color: var(--on-surface-medium-color, #707279);
+
+  &[data-state='remote'] {
+    color: var(--on-surface-medium-color, #707279);
+  }
+
+  &[data-state='loading'] {
+    color: var(--on-surface-medium-color, #707279);
+  }
+
+  &[data-state='unavailable'] {
+    color: var(--error-color, #e62e5c);
+  }
+}
+
+.spin {
+  animation: base-source-spin 0.9s linear infinite;
+}
+
+@keyframes base-source-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/components/ui/compare/lane-compare/base-source-indicator.tsx b/components/ui/compare/lane-compare/base-source-indicator.tsx
new file mode 100644
index 000000000000..ebc9bc74c1ae
--- /dev/null
+++ b/components/ui/compare/lane-compare/base-source-indicator.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { Icon } from '@teambit/design.elements.icon';
+import { Tooltip } from '@teambit/design.ui.tooltip';
+import { useCompareData } from '@teambit/component.ui.component-compare.component-compare';
+import styles from './base-source-indicator.module.scss';
+
+export type BaseSourceIndicatorProps = {
+  /** the compare-side id of the pair, used to look up the bulk-compare load state for this base */
+  compareId: string;
+};
+
+/**
+ * Surfaces that a component's compared base was pulled from the remote scope (rather than already
+ * being in the workspace), plus its load state. The caller renders this only for remote-sourced
+ * bases; workspace-resolved bases show nothing.
+ *  - spinner: the base diff is still being fetched from the remote.
+ *  - error: the base diff failed to load from the remote.
+ *  - cloud: the base was resolved from the remote scope and its diff is ready.
+ */
+export function BaseSourceIndicator({ compareId }: BaseSourceIndicatorProps) {
+  const compareData = useCompareData();
+  const data = compareData?.getData(compareId);
+  const loading = Boolean(compareData?.loading) && data === undefined;
+
+  if (loading) {
+    return (
+      <Tooltip content="Resolving base from the remote scope…" placement="top">
+        <span className={styles.indicator} data-state="loading" aria-label="Resolving base from the remote scope">
+          <Icon of="spinner" className={styles.spin} />
+        </span>
+      </Tooltip>
+    );
+  }
+
+  if (data === null) {
+    return (
+      <Tooltip content="Base unavailable from the remote scope" placement="top">
+        <span className={styles.indicator} data-state="unavailable" aria-label="Base unavailable from the remote scope">
+          <Icon of="exclamation-triangle" />
+        </span>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <Tooltip content="Base pulled from the remote scope" placement="top">
+      <span className={styles.indicator} data-state="remote" aria-label="Base pulled from the remote scope">
+        <Icon of="bit-cloud" />
+      </span>
+    </Tooltip>
+  );
+}
diff --git a/components/ui/compare/lane-compare/index.ts b/components/ui/compare/lane-compare/index.ts
new file mode 100644
index 000000000000..f5ce20377c82
--- /dev/null
+++ b/components/ui/compare/lane-compare/index.ts
@@ -0,0 +1,9 @@
+export { LaneCompare } from './lane-compare';
+export type { LaneCompareProps } from './lane-compare';
+export type { LaneCompareContextModel } from './lane-compare.context';
+export { LaneCompareContext, useLaneCompareContext } from './lane-compare.context';
+export type { LaneCompareProviderProps, LaneCompareGroupBy } from './lane-compare.provider';
+export { LaneCompareProvider } from './lane-compare.provider';
+export { ChangeTypeGroupOrder } from './lane-compare.models';
+export type { LaneFilter } from './lane-compare.models';
+export { displayChangeType, extractCompsToDiff, filterDepKey as laneFilterDepKey } from './lane-compare.utils';
diff --git a/components/ui/compare/lane-compare/lane-compare.context.ts b/components/ui/compare/lane-compare/lane-compare.context.ts
new file mode 100644
index 000000000000..17c270729c18
--- /dev/null
+++ b/components/ui/compare/lane-compare/lane-compare.context.ts
@@ -0,0 +1,25 @@
+import { createContext, useContext } from 'react';
+import type { LaneCompareState } from '@teambit/lanes.ui.compare.lane-compare-state';
+import type { LaneComponentDiff, LaneDiff } from '@teambit/lanes.entities.lane-diff';
+import type { ComponentID } from '@teambit/component-id';
+import type { DefaultLaneState, LaneFilter } from './lane-compare.models';
+
+export type LaneCompareContextModel = {
+  laneCompareState: LaneCompareState;
+  setLaneCompareState: React.Dispatch<React.SetStateAction<LaneCompareState>>;
+  filters?: LaneFilter[];
+  groupBy?: 'scope' | 'status';
+  defaultLaneState: DefaultLaneState;
+  laneDiff?: LaneDiff;
+  loadingLaneDiff?: boolean;
+  componentsToDiff: [ComponentID | undefined, ComponentID | undefined][];
+  groupedComponentsToDiff: Map<string, [ComponentID | undefined, ComponentID | undefined][]> | null;
+  laneComponentDiffByCompId: Map<string, LaneComponentDiff>;
+};
+
+export const LaneCompareContext = createContext<LaneCompareContextModel | undefined>(undefined);
+
+export const useLaneCompareContext = (): LaneCompareContextModel | undefined => {
+  const context = useContext(LaneCompareContext);
+  return context;
+};
diff --git a/components/ui/compare/lane-compare/lane-compare.models.ts b/components/ui/compare/lane-compare/lane-compare.models.ts
new file mode 100644
index 000000000000..47a193c8bdf3
--- /dev/null
+++ b/components/ui/compare/lane-compare/lane-compare.models.ts
@@ -0,0 +1,22 @@
+import { ChangeType } from '@teambit/lanes.entities.lane-diff';
+import type {
+  ComponentCompareStateData,
+  ComponentCompareStateKey,
+} from '@teambit/component.ui.component-compare.models.component-compare-state';
+
+export type DefaultLaneState = (
+  compId?: string
+) => Partial<Record<ComponentCompareStateKey, ComponentCompareStateData>>;
+export type LaneFilterType = ChangeType | 'ALL';
+export const ChangeTypeGroupOrder = [
+  ChangeType.NEW,
+  ChangeType.SOURCE_CODE,
+  ChangeType.ASPECTS,
+  ChangeType.DEPENDENCY,
+  ChangeType.NONE,
+];
+
+export type LaneFilter = {
+  type: string;
+  values: string[];
+};
diff --git a/components/ui/compare/lane-compare/lane-compare.module.scss b/components/ui/compare/lane-compare/lane-compare.module.scss
new file mode 100644
index 000000000000..3402a1e1d5ec
--- /dev/null
+++ b/components/ui/compare/lane-compare/lane-compare.module.scss
@@ -0,0 +1,578 @@
+$border-color: var(--border-medium-color, #e8ecf0);
+$surface-color: var(--surface-color, #fff);
+$accent-color: var(--bit-accent-color, #6c5ce7);
+$text-primary: var(--on-surface-color, #1a1a2e);
+$text-secondary: var(--on-surface-medium-color, #707279);
+$text-muted: var(--on-background-medium-color, #a0aec0);
+
+.rootLaneCompare {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+// --- Toolbar ---
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  border-bottom: 1px solid $border-color;
+  background: $surface-color;
+  flex-shrink: 0;
+}
+
+.searchInput {
+  width: 200px;
+  padding: 5px 10px;
+  border: 1px solid $border-color;
+  border-radius: 6px;
+  font-size: 12px;
+  font-family: inherit;
+  outline: none;
+  color: $text-primary;
+  background: $surface-color;
+  transition: border-color 0.15s ease;
+
+  &:focus {
+    border-color: $accent-color;
+  }
+
+  &::placeholder {
+    color: $text-muted;
+  }
+}
+
+.toolbarGroup {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.toolbarLabel {
+  font-size: 11px;
+  color: $text-muted;
+  margin-right: 2px;
+}
+
+.toolbarBtn {
+  padding: 4px 10px;
+  border: 1px solid $border-color;
+  border-radius: 6px;
+  background: $surface-color;
+  font-size: 11px;
+  font-family: inherit;
+  color: $text-secondary;
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.02);
+  }
+}
+
+.toolbarBtnActive {
+  background: rgba(108, 92, 231, 0.12);
+  color: $accent-color;
+  border-color: $accent-color;
+  font-weight: 600;
+
+  .toolbarBadge {
+    background: rgba(108, 92, 231, 0.15);
+    color: $accent-color;
+  }
+}
+
+.toolbarCount {
+  margin-left: auto;
+  font-size: 11px;
+  color: $text-muted;
+}
+
+.toolbarSeparator {
+  width: 1px;
+  height: 20px;
+  background: $border-color;
+  flex-shrink: 0;
+}
+
+.toolbarBadge {
+  font-size: 10px;
+  font-weight: 600;
+  color: $text-muted;
+  background: rgba(0, 0, 0, 0.06);
+  padding: 0 5px;
+  border-radius: 8px;
+  margin-left: 2px;
+}
+
+.sidebarHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: $text-muted;
+  border-bottom: 1px solid $border-color;
+}
+
+.sidebarCount {
+  background: rgba(108, 92, 231, 0.08);
+  color: $accent-color;
+  padding: 1px 7px;
+  border-radius: 10px;
+  font-size: 11px;
+}
+
+.changeTagNew {
+  color: var(--positive-color, #37b26c);
+  background: rgba(55, 178, 108, 0.08);
+}
+
+// --- Layout ---
+
+.layout {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.sidebar {
+  width: 220px;
+  min-width: 220px;
+  border-right: 1px solid $border-color;
+  background: var(--background-color, #fdfdff);
+  overflow-y: auto;
+  flex-shrink: 0;
+}
+
+.sidebarGroupHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  font-size: 11px;
+  font-weight: 600;
+  color: $text-muted;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  background: rgba(0, 0, 0, 0.02);
+  border-bottom: 1px solid $border-color;
+  margin-top: 4px;
+
+  &:first-child {
+    margin-top: 0;
+  }
+}
+
+.sidebarGroupCount {
+  font-size: 10px;
+  background: rgba(0, 0, 0, 0.04);
+  padding: 0 5px;
+  border-radius: 8px;
+}
+
+.sidebarItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 12px 7px 16px;
+  border: none;
+  border-left: 2px solid transparent;
+  background: transparent;
+  font-size: 12.5px;
+  font-family: inherit;
+  color: $text-primary;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background 0.1s ease,
+    border-color 0.1s ease;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.5;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.02);
+  }
+}
+
+.sidebarItemActive {
+  border-left-color: $accent-color;
+  background: rgba(108, 92, 231, 0.05);
+  color: $accent-color;
+  font-weight: 500;
+}
+
+.sidebarEnvIcon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  border-radius: 3px;
+}
+
+.sidebarEnvPlaceholder {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.diffPane {
+  flex: 1;
+  // shrink below content width (default flex min-width:auto = min-content) so a wide diff scrolls
+  // inside its own file body instead of forcing the whole page horizontally wider.
+  min-width: 0;
+  overflow-y: auto;
+  background: var(--background-color, #f9fafb);
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 3px;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.25);
+    }
+  }
+
+  // Tab visibility driven by `data-view-mode` on the pane. All `DeferredTab` siblings are mounted
+  // simultaneously to preserve their internal query/state caches across mode switches; CSS hides
+  // the ones that don't match the active view. Without this every tab stacked on top of each other,
+  // which is what made code show aspect data, config show code, and so on.
+  &[data-view-mode='code'] [data-tab-id]:not([data-tab-id='inline-code']) {
+    display: none;
+  }
+  &[data-view-mode='preview'] [data-tab-id]:not([data-tab-id='inline-preview']) {
+    display: none;
+  }
+  &[data-view-mode='dependencies'] [data-tab-id]:not([data-tab-id='inline-deps']) {
+    display: none;
+  }
+  &[data-view-mode='tests'] [data-tab-id]:not([data-tab-id='inline-tests']) {
+    display: none;
+  }
+  &[data-view-mode='config'] [data-tab-id]:not([data-tab-id='inline-config']) {
+    display: none;
+  }
+  &[data-view-mode='docs'] [data-tab-id]:not([data-tab-id='inline-docs']) {
+    display: none;
+  }
+
+  // Per-panel visibility driven by `data-view-mode` on the pane. Every component panel is mounted
+  // regardless of the active view (the set is filtered by search only) so that switching modes never
+  // remounts panels — it's just this attribute flip. CSS then hides panels that have no changes for
+  // the active view, using the stable `data-has-*` attributes stamped in lane-compare.tsx. `docs`,
+  // `tests` and `api` show every panel, so they get no hide rule here.
+  &[data-view-mode='code'] [data-component-id]:not([data-has-code]) {
+    display: none;
+  }
+  &[data-view-mode='preview'] [data-component-id]:not([data-has-preview]) {
+    display: none;
+  }
+  &[data-view-mode='dependencies'] [data-component-id]:not([data-has-deps]) {
+    display: none;
+  }
+  &[data-view-mode='config'] [data-component-id]:not([data-has-config]) {
+    display: none;
+  }
+}
+
+// A group with no panels visible in the active view. Hidden via a class (not removed from the tree)
+// so its panels stay mounted and a later view switch is still a pure CSS flip.
+.groupHidden {
+  display: none;
+}
+
+// --- Loading ---
+
+.laneCompareLoading {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.laneCompareSkeleton {
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.skeletonBar {
+  height: 12px;
+  background: linear-gradient(
+    90deg,
+    var(--surface-neutral-color, #f0f2f5) 25%,
+    $border-color 50%,
+    var(--surface-neutral-color, #f0f2f5) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+  border-radius: 4px;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+// --- Groups ---
+
+.laneCompareGroup {
+  --group-header-height: 42px;
+
+  // Hard width clamp: a single-column `minmax(0, 1fr)` grid forces every descendant (header +
+  // component panels + their code diffs) to the group's own width, which is the pane width. A grid
+  // item in a `minmax(0, ...)` track cannot be widened by its content, so a long code line can only
+  // scroll inside its diff body — it can never widen a panel, the pane, or the page. This is applied
+  // here (a confirmed pane-width block) because `contain: inline-size` lower down was defeated by the
+  // `content-visibility`/context wrappers in between.
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+
+  &:not(:first-child) {
+    margin-top: 8px;
+  }
+
+  // Containment for each component panel. A view-mode switch toggles `display` on heavy tab subtrees
+  // (code diffs, dependency tables) inside every panel; without containment a single layout read —
+  // e.g. the toolbar's toggle indicator measuring its own `offsetLeft` right after the switch — forces
+  // the browser to synchronously re-lay-out the ENTIRE pane in one pass (the ~1.2s "forced reflow"
+  // seen in the profiler). `content-visibility: auto` skips layout/paint for panels not near the
+  // viewport and makes each panel a containment boundary, so the reflow only touches what's on screen.
+  // `contain-intrinsic-size: auto <h>` keeps the scrollbar stable by remembering each panel's last
+  // rendered height (falling back to the estimate before first render).
+  [data-component-id] {
+    content-visibility: auto;
+    contain-intrinsic-size: auto 320px;
+  }
+}
+
+.laneCompareGroupHeader {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 20px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: $text-muted;
+  background: var(--background-color, #f9fafb);
+  border-bottom: 1px solid $border-color;
+  position: sticky;
+  top: 0;
+  z-index: 4;
+}
+
+.laneCompareGroupLabel {
+  flex: 1;
+}
+
+.laneCompareGroupCount {
+  font-weight: 500;
+  color: $text-muted;
+  font-size: 12px;
+  background: rgba(0, 0, 0, 0.04);
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+
+// --- Component Section ---
+
+.inlineComponentSection {
+  background: $surface-color;
+  margin-bottom: 2px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.inlineComponentHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 16px;
+  background: $surface-color;
+  border-bottom: 1px solid $border-color;
+  border-left: 3px solid $accent-color;
+  position: sticky;
+  top: 0;
+  z-index: 3;
+}
+
+.inlineComponentHeaderSelected {
+  background: rgba(108, 92, 231, 0.03);
+}
+
+.componentEnvIcon {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  border-radius: 4px;
+}
+
+.inlineComponentName {
+  font-size: 13px;
+  font-weight: 600;
+  color: $text-primary;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.inlineComponentMeta {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.inlineChangeTags {
+  display: flex;
+  gap: 4px;
+}
+
+.changeTag {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 4px;
+  letter-spacing: 0.02em;
+}
+
+.changeTagCode {
+  color: $accent-color;
+  background: rgba(108, 92, 231, 0.08);
+}
+
+.changeTagDeps {
+  color: var(--warning-color, #d6a022);
+  background: rgba(214, 160, 34, 0.08);
+}
+
+.inlineComponentVersions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.inlineVersionHash {
+  padding: 3px 8px;
+  border-radius: 6px;
+  background: var(--surface-neutral-color, #f6f8fa);
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 11px;
+  color: $text-secondary;
+}
+
+.inlineVersionArrow {
+  color: $text-muted;
+  font-size: 10px;
+  opacity: 0.5;
+}
+
+.inlineComponentEmpty {
+  padding: 16px;
+  text-align: center;
+  color: $text-muted;
+  font-size: 12px;
+  font-style: italic;
+}
+
+// --- Sections ---
+
+.sectionHeader {
+  display: flex;
+  align-items: center;
+  padding: 6px 16px;
+  background: var(--surface-neutral-color, #f8f9fb);
+  border-bottom: 1px solid $border-color;
+}
+
+.sectionLabel {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: $text-muted;
+}
+
+.newComponentBanner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  background: rgba(55, 178, 108, 0.04);
+  border-bottom: 1px solid rgba(55, 178, 108, 0.1);
+}
+
+.newComponentLabel {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--positive-color, #37b26c);
+  background: rgba(55, 178, 108, 0.1);
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.newComponentNote {
+  font-size: 11px;
+  color: $text-muted;
+  font-style: italic;
+}
+
+.depsSection {
+  border-bottom: 1px solid $border-color;
+}
+
+// --- Legacy compat ---
+.componentCompareContainer {
+  height: auto;
+}
+.componentComparePanel {
+  border-bottom: none;
+}
+.groupedComponentCompareContainer {
+  padding: 0;
+}
+.changeTypeTitle {
+  padding: 16px 0;
+}
+.fullScreenIcon {
+  display: none;
+}
+
+.emptyState {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 240px;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/components/ui/compare/lane-compare/lane-compare.provider.tsx b/components/ui/compare/lane-compare/lane-compare.provider.tsx
new file mode 100644
index 000000000000..06cec6b61edc
--- /dev/null
+++ b/components/ui/compare/lane-compare/lane-compare.provider.tsx
@@ -0,0 +1,207 @@
+import type { ReactNode } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import type { LaneCompareState } from '@teambit/lanes.ui.compare.lane-compare-state';
+import { computeStateKey } from '@teambit/lanes.ui.compare.lane-compare-state';
+import type { ComponentCompareState } from '@teambit/component.ui.component-compare.models.component-compare-state';
+import type { MaybeLazyLoaded } from '@teambit/component.ui.component-compare.utils.lazy-loading';
+import { extractLazyLoadedData } from '@teambit/component.ui.component-compare.utils.lazy-loading';
+import { sortTabs } from '@teambit/component.ui.component-compare.utils.sort-tabs';
+import type { TabItem } from '@teambit/component.ui.component-compare.models.component-compare-props';
+import type { LaneId } from '@teambit/lane-id';
+import type { UseLaneDiffStatus } from '@teambit/lanes.ui.compare.lane-compare-hooks.use-lane-diff-status';
+import { useLaneDiffStatus as defaultUseLaneDiffStatus } from '@teambit/lanes.ui.compare.lane-compare-hooks.use-lane-diff-status';
+import type { LaneComponentDiff } from '@teambit/lanes.entities.lane-diff';
+import type { ComponentID } from '@teambit/component-id';
+import type { LaneCompareContextModel } from './lane-compare.context';
+import { LaneCompareContext } from './lane-compare.context';
+import type { LaneFilter } from './lane-compare.models';
+import { extractCompsToDiff, filterDepKey } from './lane-compare.utils';
+
+export type LaneCompareGroupBy = 'scope' | 'status';
+
+export type LaneCompareProviderProps = {
+  children: ReactNode;
+  /**
+   * default state of all component compare panels
+   */
+  defaultComponentCompareState?: LaneCompareState;
+  /**
+   * filters to apply to component diffs
+   */
+  filters?: Array<LaneFilter>;
+  /**
+   * filter out component diffs by type
+   */
+  filter?: (laneComponentDiff?: LaneComponentDiff, filters?: Array<LaneFilter>) => boolean;
+  /**
+   * group component diffs by diff status or scope
+   */
+  groupBy?: LaneCompareGroupBy;
+  /**
+   * hook to override fetching lane diff status for base and compare
+   */
+  useLaneDiffStatus?: UseLaneDiffStatus;
+  base?: LaneId;
+  compare?: LaneId;
+  tabs?: MaybeLazyLoaded<TabItem[]>;
+};
+
+function LaneCompareProviderImpl({
+  defaultComponentCompareState,
+  tabs,
+  children,
+  useLaneDiffStatus = defaultUseLaneDiffStatus,
+  base,
+  compare,
+  filters,
+  groupBy,
+  filter,
+}: LaneCompareProviderProps) {
+  const { loading: loadingLaneDiff, laneDiff } = useLaneDiffStatus({
+    baseId: base?.toString(),
+    compareId: compare?.toString(),
+    options: {
+      skipUpToDate: true,
+    },
+  });
+
+  const componentsToDiff = useMemo(
+    () => extractCompsToDiff(laneDiff),
+    // include `laneDiff` itself: an Apollo cache merge can update it without flipping `loadingLaneDiff`
+    // or changing base/compare, and this derivation must not go stale (matches `groupedComponentsToDiff`).
+    [loadingLaneDiff, base?.toString(), compare?.toString(), laneDiff]
+  );
+
+  // canonical key of the current pair set — used to re-init compare state when the *set* changes, not
+  // just its size. two different diff sets can share a length, so keying on length alone would leave
+  // stale keys for the previous set; the key changes only on real membership changes, so it also avoids
+  // spuriously resetting state when componentsToDiff recomputes to the same set.
+  const componentsToDiffKey = useMemo(
+    () => componentsToDiff.map(([b, c]) => computeStateKey(b, c)).join('\n'),
+    [componentsToDiff]
+  );
+
+  const defaultLaneState = useCallback(
+    (compId?: string) => {
+      const sortedTabs = extractLazyLoadedData(tabs)?.sort(sortTabs);
+
+      const defaultState = (compId && defaultComponentCompareState?.get(compId)) || {};
+
+      const value: ComponentCompareState = {
+        tabs: {
+          controlled: true,
+          id: sortedTabs?.[0]?.id,
+          element: sortedTabs?.[0]?.element,
+        },
+        code: {
+          controlled: true,
+        },
+        aspects: {
+          controlled: true,
+        },
+        preview: {
+          controlled: true,
+        },
+        versionPicker: {
+          element: null,
+        },
+        ...defaultState,
+      };
+      return value;
+    },
+    [defaultComponentCompareState]
+  );
+
+  const [laneCompareState, setLaneCompareState] = useState<LaneCompareState>(() => {
+    const state = new Map();
+    componentsToDiff.forEach(([_base, _compare]) => {
+      const key = computeStateKey(_base, _compare);
+      const baseKey = computeStateKey(_base);
+      const compareKey = computeStateKey(undefined, _compare);
+      state.set(key, defaultLaneState(key));
+      state.set(baseKey, defaultLaneState(baseKey));
+      state.set(compareKey, defaultLaneState(compareKey));
+    });
+    return state;
+  });
+
+  useEffect(() => {
+    if (componentsToDiff.length > 0) {
+      const compareState: LaneCompareState = new Map(defaultComponentCompareState);
+
+      componentsToDiff.forEach(([_base, _compare]) => {
+        const key = computeStateKey(_base, _compare);
+        const baseKey = computeStateKey(_base);
+        const compareKey = computeStateKey(undefined, _compare);
+        compareState.set(key, defaultLaneState(key));
+        compareState.set(baseKey, defaultLaneState(baseKey));
+        compareState.set(compareKey, defaultLaneState(compareKey));
+      });
+
+      setLaneCompareState(compareState);
+    }
+  }, [loadingLaneDiff, componentsToDiffKey, base?.toString(), compare?.toString(), defaultComponentCompareState]);
+
+  const laneComponentDiffByCompId = useMemo(() => {
+    if (!laneDiff) return new Map<string, LaneComponentDiff>();
+    return laneDiff.diff.reduce((accum, next) => {
+      accum.set(next.componentId.toStringWithoutVersion(), next as any);
+      return accum;
+    }, new Map<string, LaneComponentDiff>());
+    // `laneDiff` in deps for the same reason as `componentsToDiff`: track content, not just load state.
+  }, [base?.toString(), compare?.toString(), loadingLaneDiff, laneDiff]);
+
+  const groupedComponentsToDiff = useMemo(() => {
+    if (laneComponentDiffByCompId.size === 0) return null;
+    return componentsToDiff
+      .filter((comps) => {
+        if (!filter) return comps;
+        const comp = comps[1] || comps[0];
+        if (!comp) return comps;
+        return filter(laneComponentDiffByCompId.get(comp.toStringWithoutVersion()), filters);
+      })
+      .reduce((accum, [baseId, compareId]) => {
+        const compareIdStrWithoutVersion = compareId?.toStringWithoutVersion();
+        const laneCompDiff = !compareIdStrWithoutVersion
+          ? undefined
+          : laneComponentDiffByCompId.get(compareIdStrWithoutVersion);
+
+        const changeType = laneCompDiff?.changeType;
+
+        const key = !groupBy ? compareIdStrWithoutVersion : (groupBy === 'status' && changeType) || compareId?.scope;
+
+        if (!key) {
+          return accum;
+        }
+
+        const existing = accum.get(key) || [];
+        accum.set(key, existing.concat([[baseId, compareId]]));
+        return accum;
+      }, new Map<string, Array<[ComponentID | undefined, ComponentID | undefined]>>());
+  }, [
+    base?.toString(),
+    compare?.toString(),
+    laneComponentDiffByCompId.size,
+    loadingLaneDiff,
+    laneDiff,
+    filterDepKey(filters),
+    groupBy,
+  ]);
+
+  const laneCompareContextModel: LaneCompareContextModel = {
+    laneCompareState,
+    setLaneCompareState,
+    filters,
+    groupBy,
+    defaultLaneState,
+    laneDiff,
+    loadingLaneDiff,
+    componentsToDiff,
+    groupedComponentsToDiff,
+    laneComponentDiffByCompId,
+  };
+
+  return <LaneCompareContext.Provider value={laneCompareContextModel}>{children}</LaneCompareContext.Provider>;
+}
+
+export const LaneCompareProvider = React.memo(LaneCompareProviderImpl);
diff --git a/components/ui/compare/lane-compare/lane-compare.tsx b/components/ui/compare/lane-compare/lane-compare.tsx
new file mode 100644
index 000000000000..59d75af95cb2
--- /dev/null
+++ b/components/ui/compare/lane-compare/lane-compare.tsx
@@ -0,0 +1,653 @@
+import type { HTMLAttributes } from 'react';
+import React, { useMemo, useState, useCallback, useEffect, useRef } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import classnames from 'classnames';
+import type { UseComponentType } from '@teambit/component';
+import type { MaybeLazyLoaded } from '@teambit/component.ui.component-compare.utils.lazy-loading';
+import type { TabItem } from '@teambit/component.ui.component-compare.models.component-compare-props';
+import type { LaneModel } from '@teambit/lanes.ui.models.lanes-model';
+import type { UseLaneDiffStatus } from '@teambit/lanes.ui.compare.lane-compare-hooks.use-lane-diff-status';
+import {
+  InlineComponentCompare,
+  CompareToolbar,
+  CompareSidebar,
+  FileRegistryProvider,
+  useFileRegistry,
+  DiffModeProvider,
+  CompareDataProvider,
+  RegistryFeeder,
+} from '@teambit/component.ui.component-compare.component-compare';
+import type {
+  CompareViewMode,
+  CompareGroupByOption,
+  CompareSidebarGroup,
+  ComponentComparePair,
+} from '@teambit/component.ui.component-compare.component-compare';
+import { InlineCompareEmpty } from '@teambit/component.ui.component-compare.context';
+import { ComponentUrl } from '@teambit/component.modules.component-url';
+import { useLaneComponents } from '@teambit/lanes.hooks.use-lane-components';
+import { ApiDiffLaneView } from '@teambit/semantics.ui.api-diff-view';
+import type { ComponentDiffEntry, ApiDiffInsight, ApiEntry } from '@teambit/semantics.ui.api-diff-view';
+import { ChangeType } from '@teambit/lanes.entities.lane-diff';
+import type { LaneCompareContextModel } from './lane-compare.context';
+import { useLaneCompareContext } from './lane-compare.context';
+import { LaneCompareProvider } from './lane-compare.provider';
+import { BaseSourceIndicator } from './base-source-indicator';
+import { ChangeTypeGroupOrder } from './lane-compare.models';
+import { displayChangeType } from './lane-compare.utils';
+
+import styles from './lane-compare.module.scss';
+
+// ── Types ───────────────────────────────────────────────────────────────────
+
+export type LaneCompareProps = {
+  base: LaneModel;
+  compare: LaneModel;
+  host: string;
+  tabs?: MaybeLazyLoaded<TabItem[]>;
+  customUseComponent?: UseComponentType;
+  customUseLaneDiff?: UseLaneDiffStatus;
+  LaneCompareLoader?: React.ComponentType;
+  ComponentCompareLoader?: React.ComponentType;
+  onStateChanged?: any;
+  groupBy?: 'scope' | 'status';
+  envIcons?: Map<string, string>;
+  /** slot-contributed API diff insight renderers (from componentCompareUI.registerApiDiffInsight) */
+  apiDiffInsights?: ApiDiffInsight[];
+} & HTMLAttributes<HTMLDivElement>;
+
+type ViewMode = 'code' | 'preview' | 'docs' | 'dependencies' | 'tests' | 'config' | 'api';
+type GroupBy = 'scope' | 'namespace' | 'status' | 'none';
+
+function scrollInPane(pane: HTMLDivElement, el: Element) {
+  const elRect = el.getBoundingClientRect();
+  const paneRect = pane.getBoundingClientRect();
+  pane.scrollTo({ top: elRect.top - paneRect.top + pane.scrollTop, behavior: 'instant' });
+}
+
+function waitForElementInPane(pane: HTMLDivElement, selector: string, timeoutMs = 5000): Promise<Element | null> {
+  const existing = pane.querySelector(selector);
+  if (existing) return Promise.resolve(existing);
+
+  return new Promise((resolve) => {
+    const observer = new MutationObserver(() => {
+      const el = pane.querySelector(selector);
+      if (el) {
+        observer.disconnect();
+        resolve(el);
+      }
+    });
+    observer.observe(pane, { childList: true, subtree: true });
+    setTimeout(() => {
+      observer.disconnect();
+      resolve(null);
+    }, timeoutMs);
+  });
+}
+
+function scrollToElement(pane: HTMLDivElement | null, id: string, fileName?: string) {
+  if (!pane) return;
+
+  if (!fileName) {
+    waitForElementInPane(pane, `[data-component-id="${CSS.escape(id)}"]`).then((el) => {
+      if (el) scrollInPane(pane, el);
+    });
+    return;
+  }
+
+  const fileSelector = `[data-file-id="${CSS.escape(id)}:${CSS.escape(fileName)}"]`;
+  const existingFile = pane.querySelector(fileSelector);
+  if (existingFile) {
+    requestAnimationFrame(() => scrollInPane(pane, existingFile));
+    return;
+  }
+
+  // File not rendered yet — scroll to component first to trigger lazy loading, then wait for the file
+  const compEl = pane.querySelector(`[data-component-id="${CSS.escape(id)}"]`);
+  if (compEl) {
+    scrollInPane(pane, compEl);
+  }
+  waitForElementInPane(pane, fileSelector).then((el) => {
+    if (el) scrollInPane(pane, el);
+  });
+}
+
+const ACCENT_COLORS: Record<string, string> = {
+  [ChangeType.NEW]: 'var(--positive-color, #37b26c)',
+  [ChangeType.SOURCE_CODE]: 'var(--bit-accent-color, #6c5ce7)',
+  [ChangeType.DEPENDENCY]: 'var(--warning-color, #d6a022)',
+};
+
+// ── Main Component ──────────────────────────────────────────────────────────
+
+function LaneCompareInline({
+  base: _base,
+  compare,
+  className,
+  host,
+  tabs: _tabs,
+  customUseComponent: _customUseComponent,
+  customUseLaneDiff: _customUseLaneDiff,
+  LaneCompareLoader: _LaneCompareLoader,
+  ComponentCompareLoader: _ComponentCompareLoader,
+  onStateChanged: _onStateChanged,
+  groupBy: _groupByProp,
+  envIcons,
+  apiDiffInsights,
+  ...rest
+}: LaneCompareProps) {
+  const { loadingLaneDiff, componentsToDiff, laneComponentDiffByCompId } =
+    useLaneCompareContext() as LaneCompareContextModel;
+
+  const resolvedTabs = useMemo(() => {
+    if (!_tabs) return [];
+    return typeof _tabs === 'function' ? _tabs() : _tabs;
+  }, [_tabs]);
+
+  // __bit's useLaneComponents keys on LaneId; hash-based invalidation is not needed here.
+  const { componentDescriptors: laneComponentDescriptors } = useLaneComponents(compare?.id);
+  const compositionsMap = useMemo(() => {
+    const map = new Map<string, boolean>();
+    if (!laneComponentDescriptors) return map;
+    laneComponentDescriptors.forEach((comp) => {
+      const aspect = comp.get<any>('teambit.compositions/compositions');
+      const compositions = aspect?.data?.compositions;
+      map.set(comp.id.toStringWithoutVersion(), Array.isArray(compositions) && compositions.length > 0);
+    });
+    return map;
+    // depend on the descriptors themselves (like envIconsMap), not the component count — switching to a
+    // different lane with the same number of components changes the descriptors but not the length, and
+    // keying on length alone would keep the previous lane's composition data (wrong Preview visibility).
+  }, [laneComponentDescriptors]);
+  // Build the env-icon lookup from the descriptors we already loaded. Falls back to the explicit
+  // `envIcons` prop if the parent supplies it (e.g. for testing/storybook).
+  //
+  // `AspectList.get(aspectId)` returns the aspect *data* directly (not a `{ data }` wrapper),
+  // so the icon lives at `.icon`. Some envs also surface the icon nested under the env-descriptor
+  // object, so we check both shapes to be defensive.
+  const envIconsMap = useMemo(() => {
+    const map = new Map<string, string>(envIcons ?? []);
+    if (!laneComponentDescriptors) return map;
+    laneComponentDescriptors.forEach((comp) => {
+      const envAspect = comp.get<any>('teambit.envs/envs');
+      const icon =
+        envAspect?.icon || envAspect?.data?.icon || envAspect?.descriptor?.icon || envAspect?.env?.icon || undefined;
+      if (!icon) return;
+      const key = comp.id.toStringWithoutVersion();
+      if (!map.has(key)) map.set(key, icon);
+    });
+    return map;
+  }, [laneComponentDescriptors, envIcons]);
+
+  const [searchParams] = useSearchParams();
+  const [viewMode, setViewModeState] = useState<ViewMode>((searchParams.get('view') as ViewMode) || 'code');
+  const [groupBy, setGroupByState] = useState<GroupBy>((searchParams.get('groupBy') as GroupBy) || 'scope');
+  const [diffMode, setDiffModeState] = useState<'split' | 'unified'>((searchParams.get('diffMode') as any) || 'split');
+  const [selectedId, setSelectedIdState] = useState<string | undefined>(searchParams.get('componentId') || undefined);
+  const [selectedFile, setSelectedFileState] = useState<string | undefined>(searchParams.get('file') || undefined);
+  const [selectedSearchComponents, setSelectedSearchComponents] = useState<{ value: string; payload: string }[]>([]);
+  const diffPaneRef = useRef<HTMLDivElement>(null);
+  const fileRegistry = useFileRegistry();
+
+  const syncUrl = useCallback((key: string, value: string | undefined) => {
+    const url = new URL(window.location.href);
+    if (value) url.searchParams.set(key, value);
+    else url.searchParams.delete(key);
+    window.history.replaceState(null, '', url.toString());
+  }, []);
+
+  const setViewMode = useCallback(
+    (v: ViewMode) => {
+      setViewModeState(v);
+      syncUrl('view', v === 'code' ? undefined : v);
+      // file/export selection is per-view (code files vs API exports share this state) —
+      // carrying it across modes would focus an unrelated item with the same name.
+      setSelectedFileState(undefined);
+      syncUrl('file', undefined);
+    },
+    [syncUrl]
+  );
+  const setGroupBy = useCallback(
+    (g: GroupBy) => {
+      setGroupByState(g);
+      syncUrl('groupBy', g === 'scope' ? undefined : g);
+    },
+    [syncUrl]
+  );
+  const setDiffMode = useCallback(
+    (d: 'split' | 'unified') => {
+      setDiffModeState(d);
+      syncUrl('diffMode', d === 'split' ? undefined : d);
+    },
+    [syncUrl]
+  );
+  const setSelectedId = useCallback(
+    (id: string | undefined) => {
+      setSelectedIdState(id);
+      syncUrl('componentId', id || undefined);
+    },
+    [syncUrl]
+  );
+  const setSelectedFile = useCallback(
+    (f: string | undefined) => {
+      setSelectedFileState(f);
+      syncUrl('file', f || undefined);
+    },
+    [syncUrl]
+  );
+
+  // Scroll to selected component on initial page load from URL
+  const initialScrollDone = useRef(false);
+  useEffect(() => {
+    if (initialScrollDone.current || !selectedId || loadingLaneDiff) return;
+    initialScrollDone.current = true;
+    scrollToElement(diffPaneRef.current, selectedId, selectedFile);
+  }, [selectedId, selectedFile, loadingLaneDiff]);
+
+  // Build component list
+  const allComponents = useMemo(
+    () =>
+      (componentsToDiff || []).map(([baseId, compareId]) => {
+        const idStr = compareId?.toStringWithoutVersion() || baseId?.toStringWithoutVersion() || '';
+        const diff = laneComponentDiffByCompId.get(idStr);
+        const changes: ChangeType[] = (diff as any)?.changes || [];
+        const changeType: ChangeType = (diff as any)?.changeType;
+        const baseSource: 'workspace' | 'scope' | undefined = (diff as any)?.baseSource;
+        return {
+          idStr,
+          name: compareId?.fullName || baseId?.fullName || idStr,
+          baseId: baseId?.toString(),
+          compareId: compareId?.toString() || '',
+          baseSource,
+          baseVersion: baseId?.version?.slice(0, 7),
+          compareVersion: compareId?.version?.slice(0, 7),
+          baseUrl: baseId ? ComponentUrl.toUrl(baseId, { includeVersion: true, useLocationOrigin: true }) : undefined,
+          compareUrl: compareId
+            ? ComponentUrl.toUrl(compareId, { includeVersion: true, useLocationOrigin: true })
+            : undefined,
+          changes,
+          changeType,
+          scope: (compareId || baseId)?.scope || '',
+          namespace: (compareId || baseId)?.namespace || '',
+        };
+      }),
+    [componentsToDiff, laneComponentDiffByCompId]
+  );
+
+  // pairs for the bulk compare query — only components that have a base (new components use the useCode path).
+  const comparePairs = useMemo<ComponentComparePair[]>(
+    () =>
+      allComponents
+        .filter((c) => !!c.baseId && !!c.compareId)
+        .map((c) => ({ baseId: c.baseId as string, compareId: c.compareId })),
+    [allComponents]
+  );
+
+  const componentOptions = useMemo(
+    () => allComponents.map((c) => ({ value: c.name, payload: c.idStr })),
+    [allComponents]
+  );
+
+  // Search filter only — deliberately view-mode-independent. The diff pane renders this full set so
+  // that switching view modes never mounts/unmounts panels (which was the 2-4s freeze); per-view
+  // visibility is then driven entirely by CSS via the `data-has-*` attributes below.
+  const searchFilteredComponents = useMemo(() => {
+    if (selectedSearchComponents.length === 0) return allComponents;
+    const selectedIds = new Set(selectedSearchComponents.map((c) => c.payload));
+    return allComponents.filter((c) => selectedIds.has(c.idStr));
+  }, [allComponents, selectedSearchComponents]);
+
+  // Whether a component belongs in the Code view. The lane-diff `changeType` (SOURCE_CODE) is a coarse
+  // hint that can disagree with the real bulk file diff — a component can be flagged as a code change yet
+  // have zero actually-changed files (metadata-only). Once the bulk data has loaded we trust the real
+  // file list (getFiles → [] means "loaded, no code changes" → hide it); until then we fall back to the
+  // coarse hint so components paint without waiting. NEW components render all files via a separate path
+  // (not the bulk registry), so they always qualify.
+  const hasCodeChanges = useCallback(
+    (c: (typeof allComponents)[number]) => {
+      if (c.changeType === ChangeType.NEW || c.changes.some((ch) => ch === ChangeType.NEW)) return true;
+      const files = fileRegistry?.getFiles(c.idStr);
+      if (files === undefined) return c.changes.some((ch) => ch === ChangeType.SOURCE_CODE);
+      return files.length > 0;
+    },
+    // getVersion() advances on every registration, so this recomputes as bulk file data streams in.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [fileRegistry, fileRegistry?.getVersion()]
+  );
+
+  const matchesView = useCallback(
+    (c: (typeof allComponents)[number], mode: ViewMode) => {
+      switch (mode) {
+        case 'code':
+          return hasCodeChanges(c);
+        case 'preview':
+          return compositionsMap.get(c.idStr) !== false;
+        case 'dependencies':
+          return c.changes.some((ch) => ch === ChangeType.DEPENDENCY);
+        case 'config':
+          return c.changes.some((ch) => ch === ChangeType.ASPECTS);
+        default:
+          // docs / tests / api show every component.
+          return true;
+      }
+    },
+    [compositionsMap, hasCodeChanges]
+  );
+
+  // View-mode-filtered set. Cheap (no heavy mounting) — used for the sidebar, the empty-state check,
+  // and the per-group visible counts. NOT used to mount the diff pane panels.
+  const filteredComponents = useMemo(
+    () => searchFilteredComponents.filter((c) => matchesView(c, viewMode)),
+    [searchFilteredComponents, viewMode, matchesView]
+  );
+
+  // Stable `data-has-*` attributes per component, derived only from view-mode-independent data so the
+  // object refs survive view-mode switches and keep `InlineComponentCompare`'s React.memo intact. CSS
+  // (in lane-compare.module.scss, scoped by `[data-view-mode]`) hides panels lacking the active flag.
+  const componentDataAttrs = useMemo(() => {
+    const map = new Map<string, Record<string, string>>();
+    allComponents.forEach((c) => {
+      const attrs: Record<string, string> = {};
+      if (hasCodeChanges(c)) attrs['data-has-code'] = '';
+      if (compositionsMap.get(c.idStr) !== false) attrs['data-has-preview'] = '';
+      if (c.changes.some((ch) => ch === ChangeType.DEPENDENCY)) attrs['data-has-deps'] = '';
+      if (c.changes.some((ch) => ch === ChangeType.ASPECTS)) attrs['data-has-config'] = '';
+      map.set(c.idStr, attrs);
+    });
+    return map;
+  }, [allComponents, compositionsMap, hasCodeChanges]);
+
+  // Group helper (view-mode-independent grouping: by scope/namespace/status).
+  const groupComponents = useCallback(
+    (comps: typeof allComponents) => {
+      const keyOf = (comp: (typeof allComponents)[number]): string => {
+        if (groupBy === 'status') return comp.changeType || 'unknown';
+        if (groupBy === 'namespace') return comp.namespace || 'root';
+        if (groupBy === 'scope') return comp.scope;
+        return 'all';
+      };
+      const groups = new Map<string, typeof allComponents>();
+      comps.forEach((comp) => {
+        const key = keyOf(comp);
+        if (!groups.has(key)) groups.set(key, []);
+        groups.get(key)!.push(comp);
+      });
+      return [...groups.entries()].sort(([a], [b]) =>
+        groupBy === 'status'
+          ? ChangeTypeGroupOrder.indexOf(a as ChangeType) - ChangeTypeGroupOrder.indexOf(b as ChangeType)
+          : a.localeCompare(b)
+      );
+    },
+    [groupBy]
+  );
+
+  // Sidebar grouping uses the view-filtered set (so the sidebar reflects the active view).
+  const grouped = useMemo(() => groupComponents(filteredComponents), [groupComponents, filteredComponents]);
+
+  // Pane grouping uses the search-only set — stable across view-mode switches, so panels never remount.
+  const paneGrouped = useMemo(
+    () => groupComponents(searchFilteredComponents),
+    [groupComponents, searchFilteredComponents]
+  );
+
+  // idStrs visible in the active view — drives per-group visible counts and empty-group hiding.
+  const visibleIds = useMemo(() => new Set(filteredComponents.map((c) => c.idStr)), [filteredComponents]);
+
+  // Counts
+  const counts = useMemo(() => {
+    return {
+      code: allComponents.filter((c) => hasCodeChanges(c)).length,
+      preview: allComponents.filter((c) => compositionsMap.get(c.idStr) !== false).length,
+      docs: allComponents.length,
+      dependencies: allComponents.filter((c) => c.changes.some((ch) => ch === ChangeType.DEPENDENCY)).length,
+      tests: allComponents.length,
+      config: allComponents.filter((c) => c.changes.some((ch) => ch === ChangeType.ASPECTS)).length,
+      // the API view shows every component (sections or slim rows), matching matchesView('api').
+      // counting only diffable pairs would zero the tab on an all-new lane and make the
+      // auto-view-switch effect yank the user away from the view's own empty state.
+      api: allComponents.length,
+    };
+  }, [allComponents, compositionsMap, hasCodeChanges]);
+
+  const compareViewModes: CompareViewMode[] = useMemo(
+    () => [
+      { id: 'api', displayName: 'API', icon: 'schema' },
+      { id: 'code', displayName: 'Code', icon: 'code' },
+      { id: 'preview', displayName: 'Preview', icon: 'eye' },
+      { id: 'docs', displayName: 'Docs', icon: 'overview' },
+      { id: 'dependencies', displayName: 'Dependencies', icon: 'link' },
+      // { id: 'tests', displayName: 'Tests', icon: 'test' },
+      { id: 'config', displayName: 'Config', icon: 'configuration' },
+    ],
+    []
+  );
+
+  const groupByOptions: CompareGroupByOption[] = useMemo(() => {
+    const options: CompareGroupByOption[] = [
+      { value: 'scope', label: 'Scope' },
+      { value: 'namespace', label: 'Namespace' },
+    ];
+    options.push({ value: 'none', label: 'None' });
+    return options;
+  }, [viewMode]);
+
+  const sidebarGroups: CompareSidebarGroup[] = useMemo(() => {
+    const filesFor = (idStr: string) => {
+      if (viewMode === 'code') return fileRegistry?.getFiles(idStr);
+      if (viewMode === 'config') return fileRegistry?.getAspectFiles(idStr);
+      if (viewMode === 'api') return fileRegistry?.getApiEntries(idStr);
+      return undefined;
+    };
+    return grouped.map(([key, comps]) => ({
+      key,
+      label: groupBy === 'status' ? displayChangeType(key as ChangeType) : key,
+      items: comps.map((c) => ({
+        id: c.idStr,
+        name: c.name,
+        envIcon: envIconsMap.get(c.idStr),
+        status: c.changeType,
+        files: filesFor(c.idStr),
+        // only surface a source indicator when the base had to be pulled from the remote scope.
+        sourceIndicator: c.baseSource === 'scope' ? <BaseSourceIndicator compareId={c.compareId} /> : undefined,
+      })),
+    }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [grouped, groupBy, envIconsMap, fileRegistry?.getVersion(), viewMode]);
+
+  // every component participates: pairs get diffed (or pre-gated when no API-relevant
+  // change types exist), new components render as "no base to compare" rows.
+  const apiDiffs: ComponentDiffEntry[] = useMemo(() => {
+    const result: ComponentDiffEntry[] = [];
+    laneComponentDiffByCompId.forEach((diff: any) => {
+      result.push({
+        componentId: diff.componentId,
+        sourceHead: diff.sourceHead,
+        targetHead: diff.targetHead,
+        changes: diff.changes,
+      });
+    });
+    return result;
+  }, [laneComponentDiffByCompId]);
+
+  const registerApiEntries = useCallback(
+    (id: string, entries: ApiEntry[]) => fileRegistry?.registerApiEntries(id, entries),
+    [fileRegistry]
+  );
+
+  // Distinguish "the lanes are identical / nothing changed" from "your filters hid everything",
+  // so an empty comparison no longer reads as a blank pane.
+  const emptyState = useMemo(() => {
+    if (allComponents.length === 0) {
+      return { message: 'No changes between these lanes', hint: 'Both lanes point to the same components.' };
+    }
+    if (selectedSearchComponents.length > 0) {
+      return {
+        message: 'No components match the current filters',
+        hint: 'Clear the search to see all changed components.',
+      };
+    }
+    const label = compareViewModes.find((v) => v.id === viewMode)?.displayName?.toLowerCase() || viewMode;
+    return { message: `No ${label} changes in this comparison`, hint: 'Try a different view above.' };
+  }, [allComponents.length, selectedSearchComponents.length, viewMode, compareViewModes]);
+
+  const isFullPaneView = viewMode === 'api';
+
+  useEffect(() => {
+    if (!loadingLaneDiff && counts[viewMode] === 0) {
+      const first = compareViewModes.find((v) => (counts[v.id] ?? 0) > 0);
+      if (first) setViewMode(first.id as ViewMode);
+    }
+  }, [counts, viewMode, loadingLaneDiff]);
+
+  if (loadingLaneDiff) {
+    return (
+      <div className={classnames(styles.rootLaneCompare, className)}>
+        <div className={styles.laneCompareLoading}>
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div key={i} className={styles.laneCompareSkeleton}>
+              <div className={styles.skeletonBar} style={{ width: `${40 + (i % 3) * 20}%` }} />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <CompareDataProvider pairs={comparePairs} host={host}>
+      <RegistryFeeder pairs={comparePairs} />
+      <div {...rest} className={classnames(styles.rootLaneCompare, className)}>
+        {/* Toolbar */}
+        <CompareToolbar
+          viewMode={viewMode}
+          onViewModeChange={(v) => setViewMode(v as ViewMode)}
+          groupBy={groupBy}
+          onGroupByChange={(g) => setGroupBy(g as GroupBy)}
+          diffMode={diffMode}
+          onDiffModeChange={setDiffMode}
+          viewModes={compareViewModes}
+          groupByOptions={groupByOptions}
+          counts={counts}
+          loading={loadingLaneDiff}
+          componentOptions={componentOptions}
+          selectedComponents={selectedSearchComponents}
+          onSelectedComponentsChange={setSelectedSearchComponents}
+        />
+
+        {/* Layout */}
+        <div className={styles.layout}>
+          {/* Sidebar */}
+          <CompareSidebar
+            groups={sidebarGroups}
+            selectedId={selectedId}
+            selectedFile={selectedFile}
+            defaultExpandFiles={viewMode === 'code' || viewMode === 'config' || viewMode === 'api'}
+            onSelect={(id, fileName) => {
+              setSelectedFile(fileName);
+              setSelectedId(selectedId === id && !fileName ? undefined : id || undefined);
+              if (id) {
+                scrollToElement(diffPaneRef.current, id, fileName);
+              }
+            }}
+            loading={loadingLaneDiff}
+          />
+
+          {/* Full-pane view (API) — kept mounted to preserve query cache */}
+          <div
+            ref={isFullPaneView ? diffPaneRef : undefined}
+            className={styles.diffPane}
+            style={isFullPaneView ? undefined : { display: 'none' }}
+          >
+            <ApiDiffLaneView
+              diffs={apiDiffs}
+              host={host}
+              selectedId={selectedId}
+              selectedExport={selectedFile}
+              insights={apiDiffInsights}
+              onApiEntries={registerApiEntries}
+              active={isFullPaneView}
+            />
+          </div>
+
+          {/* Per-component diff pane */}
+          <DiffModeProvider mode={diffMode}>
+            <div
+              ref={isFullPaneView ? undefined : diffPaneRef}
+              className={styles.diffPane}
+              data-view-mode={viewMode}
+              style={isFullPaneView ? { display: 'none' } : undefined}
+            >
+              {paneGrouped.map(([key, comps]) => {
+                // Count/hide use the active view's visible set; the panels themselves are always
+                // mounted (CSS hides the non-matching ones). An all-hidden group collapses via the
+                // `groupHidden` class — a parent attribute flip that keeps its children mounted.
+                const visibleCount = comps.reduce((n, c) => n + (visibleIds.has(c.idStr) ? 1 : 0), 0);
+                return (
+                  <div
+                    key={key}
+                    className={classnames(styles.laneCompareGroup, visibleCount === 0 && styles.groupHidden)}
+                  >
+                    {groupBy !== 'none' && (
+                      <div className={styles.laneCompareGroupHeader}>
+                        <span className={styles.laneCompareGroupLabel}>
+                          {groupBy === 'status' ? displayChangeType(key as ChangeType) : key}
+                        </span>
+                        <span className={styles.laneCompareGroupCount}>{visibleCount}</span>
+                      </div>
+                    )}
+                    {comps.map((c) => (
+                      <InlineComponentCompare
+                        key={c.idStr}
+                        name={c.name}
+                        baseId={c.baseId}
+                        compareId={c.compareId}
+                        baseVersion={c.baseVersion}
+                        compareVersion={c.compareVersion}
+                        baseUrl={c.baseUrl}
+                        compareUrl={c.compareUrl}
+                        envIcon={envIconsMap.get(c.idStr)}
+                        allTabs={resolvedTabs}
+                        accentColor={ACCENT_COLORS[c.changeType] || undefined}
+                        host={host}
+                        dataAttributes={componentDataAttrs.get(c.idStr)}
+                      />
+                    ))}
+                  </div>
+                );
+              })}
+              {filteredComponents.length === 0 && (
+                <div className={styles.emptyState}>
+                  <InlineCompareEmpty message={emptyState.message} hint={emptyState.hint} />
+                </div>
+              )}
+            </div>
+          </DiffModeProvider>
+        </div>
+      </div>
+    </CompareDataProvider>
+  );
+}
+
+// ── Wrapper ─────────────────────────────────────────────────────────────────
+
+const LaneCompareMemoized = React.memo(LaneCompareInline);
+
+export const LaneCompare = React.memo(function LaneCompareWrapper({ ...props }: LaneCompareProps) {
+  const laneCompareContext = useLaneCompareContext();
+  if (laneCompareContext)
+    return (
+      <FileRegistryProvider>
+        <LaneCompareInline {...props} />
+      </FileRegistryProvider>
+    );
+  if (!props.base?.id || !props.compare?.id) return null;
+  return (
+    <LaneCompareProvider
+      {...{ ...props, base: props.base.id, compare: props.compare.id, useLaneDiffStatus: props.customUseLaneDiff }}
+    >
+      <FileRegistryProvider>
+        <LaneCompareMemoized {...props} />
+      </FileRegistryProvider>
+    </LaneCompareProvider>
+  );
+});
diff --git a/components/ui/compare/lane-compare/lane-compare.utils.ts b/components/ui/compare/lane-compare/lane-compare.utils.ts
new file mode 100644
index 000000000000..92d882b710a6
--- /dev/null
+++ b/components/ui/compare/lane-compare/lane-compare.utils.ts
@@ -0,0 +1,30 @@
+import type { ComponentID } from '@teambit/component';
+import type { LaneDiff } from '@teambit/lanes.entities.lane-diff';
+import { ChangeType } from '@teambit/lanes.entities.lane-diff';
+import type { LaneFilter } from './lane-compare.models';
+
+export function displayChangeType(changeType: ChangeType): string {
+  switch (changeType) {
+    case ChangeType.SOURCE_CODE:
+      return 'code';
+    case ChangeType.NONE:
+      return 'no changes';
+    default:
+      return changeType.toLowerCase();
+  }
+}
+
+export const filterDepKey: (filters?: Array<LaneFilter>) => string | undefined = (filters) => {
+  return filters?.map((f) => `${f.type}-${f.values.join()}`).join();
+};
+
+export function extractCompsToDiff(laneDiff?: LaneDiff): [ComponentID | undefined, ComponentID | undefined][] {
+  return (
+    (laneDiff?.diff &&
+      laneDiff.diff.map((componentDiff) => [
+        (componentDiff.targetHead && componentDiff.componentId.changeVersion(componentDiff.targetHead)) || undefined,
+        componentDiff.componentId.changeVersion(componentDiff.sourceHead),
+      ])) ||
+    []
+  );
+}
diff --git a/components/ui/component-compare/component-compare/compare-data-context.tsx b/components/ui/component-compare/component-compare/compare-data-context.tsx
new file mode 100644
index 000000000000..879192374e60
--- /dev/null
+++ b/components/ui/component-compare/component-compare/compare-data-context.tsx
@@ -0,0 +1,209 @@
+import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import type { ReactNode } from 'react';
+import { gql, useQuery } from '@apollo/client';
+
+/** number of component pairs requested per bulk page */
+export const COMPARE_PAGE_SIZE = 25;
+
+export type ComponentComparePair = {
+  baseId: string;
+  compareId: string;
+};
+
+/** shape of a single bulk `compareComponents` result (mirrors the per-component `compareComponent` query) */
+export type CompareComponentData = {
+  id: string;
+  baseId: string;
+  compareId: string;
+  code: Array<{
+    status?: string;
+    fileName: string;
+    diffOutput?: string;
+    baseContent?: string;
+    compareContent?: string;
+  }>;
+  aspects: Array<{ fieldName: string; diffOutput?: string }>;
+  tests?: Array<{
+    status?: string;
+    fileName: string;
+    diffOutput?: string;
+    baseContent?: string;
+    compareContent?: string;
+  }>;
+};
+
+type CompareComponentsQueryResult = {
+  getHost: { id: string; compareComponents: Array<CompareComponentData | null> } | null;
+};
+
+export const QUERY_COMPARE_COMPONENTS = gql`
+  query CompareComponents($pairs: [ComponentComparePair!]!, $offset: Int, $limit: Int, $host: String) {
+    getHost(id: $host) {
+      id
+      compareComponents(pairs: $pairs, offset: $offset, limit: $limit) {
+        id
+        baseId
+        compareId
+        code {
+          status
+          fileName
+          diffOutput
+          baseContent
+          compareContent
+        }
+        aspects {
+          fieldName
+          diffOutput
+        }
+        tests {
+          status
+          fileName
+          diffOutput
+          baseContent
+          compareContent
+        }
+      }
+    }
+  }
+`;
+
+export type CompareDataContextModel = {
+  /**
+   * look up bulk compare data for a component by its `compareId`.
+   * `null` = the pair failed to compare, OR it was requested but paging finished/stopped early before
+   * reaching it (so it will never resolve); `undefined` = the pair is not in this provider's list, or
+   * its page has not loaded yet (check `loading` to disambiguate).
+   */
+  getData: (compareId: string) => CompareComponentData | null | undefined;
+  /** true while pages are still loading; settles to false once every page loads or paging stops early */
+  loading: boolean;
+  /** number of pairs whose data has loaded so far */
+  loadedCount: number;
+};
+
+const CompareDataContext = createContext<CompareDataContextModel | undefined>(undefined);
+
+export function useCompareData(): CompareDataContextModel | undefined {
+  return useContext(CompareDataContext);
+}
+
+/**
+ * fires the bulk `compareComponents` query for the whole `pairs` list and exposes the results via context.
+ * loads sequentially in pages of COMPARE_PAGE_SIZE — page 1 first, then fetchMore for each subsequent page
+ * in the background until all pairs are covered. `pairs` is stabilized internally by content, so callers
+ * do not have to memoize it. `host` targets a specific GraphQL host (e.g. the workspace or a scope);
+ * omitting it resolves against the server default host.
+ */
+export function CompareDataProvider({
+  pairs,
+  host,
+  children,
+}: {
+  pairs: ComponentComparePair[];
+  /** GraphQL host id, e.g. "teambit.scope/scope" or "workspace" — must match the host of the compared models */
+  host?: string;
+  children: ReactNode;
+}) {
+  // stabilize by content: a new array reference with the same pairs must not restart the query.
+  const pairsKey = JSON.stringify(pairs);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const stablePairs = useMemo(() => pairs, [pairsKey]);
+
+  const skip = stablePairs.length === 0;
+
+  const { data, loading, fetchMore } = useQuery<CompareComponentsQueryResult>(QUERY_COMPARE_COMPONENTS, {
+    variables: { pairs: stablePairs, offset: 0, limit: COMPARE_PAGE_SIZE, host },
+    skip,
+    notifyOnNetworkStatusChange: true,
+  });
+
+  const results: Array<CompareComponentData | null> = data?.getHost?.compareComponents ?? [];
+  const allLoaded = skip || results.length >= stablePairs.length;
+
+  // flips true once paging terminates early — a page returns empty/short or a fetch fails — so the loop
+  // stops AND `loading` can settle even when fewer results than pairs came back. reactive (not a ref) so
+  // the derived `loading` flag updates; without it `loading` could stay true forever. reset on pairs change.
+  const [terminated, setTerminated] = useState(false);
+  useEffect(() => {
+    setTerminated(false);
+  }, [pairsKey]);
+
+  // the pairs set this provider is currently paging — a fetchMore started for an earlier set can still
+  // resolve/reject after `pairs` changed, so its callbacks check this before terminating the new loop.
+  const pairsKeyRef = useRef(pairsKey);
+  useEffect(() => {
+    pairsKeyRef.current = pairsKey;
+  }, [pairsKey]);
+
+  // every page loaded, or paging stopped early: no further requests will be made.
+  const done = allLoaded || terminated;
+
+  // sequential background paging: whenever a page settles and pairs remain, request the next page.
+  useEffect(() => {
+    if (skip || loading || done) return;
+    // guard the async terminations below to this page's pairs set: an in-flight fetchMore from a
+    // previous pairsKey must not terminate the paging loop of a newer one (rapid target switches).
+    const activeKey = pairsKey;
+    const stillActive = () => pairsKeyRef.current === activeKey;
+    fetchMore({
+      variables: { pairs: stablePairs, offset: results.length, limit: COMPARE_PAGE_SIZE, host },
+      updateQuery: (prev: any, { fetchMoreResult }: any) => {
+        const prevHost = prev.getHost;
+        if (!fetchMoreResult || !prevHost) {
+          // nothing came back, or the accumulated result has no host (getHost: null) to page against →
+          // can't fetch further; terminate so the effect stops re-issuing fetchMore and loading settles.
+          if (stillActive()) setTerminated(true);
+          return prev;
+        }
+        // a fetchMore issued for a previous pairs set can resolve after `pairs` changed; discard its
+        // page rather than merging it into the current session's results (which would corrupt the new
+        // diff set) or terminating the new loop.
+        if (!stillActive()) return prev;
+        const newItems = fetchMoreResult.getHost?.compareComponents ?? [];
+        if (newItems.length === 0) setTerminated(true);
+        return {
+          getHost: {
+            ...prevHost,
+            compareComponents: [...prevHost.compareComponents, ...newItems],
+          },
+        };
+      },
+    }).catch(() => {
+      // a failed page stops the sequence; pages already loaded stay usable.
+      if (stillActive()) setTerminated(true);
+    });
+  }, [skip, loading, done, results.length, stablePairs, fetchMore, pairsKey, host]);
+
+  const dataByCompareId = useMemo(() => {
+    const map = new Map<string, CompareComponentData | null>();
+    results.forEach((res, i) => {
+      // prefer the result's own compareId; fall back to positional alignment for null (failed) slots.
+      const key = res?.compareId ?? stablePairs[i]?.compareId;
+      if (key) map.set(key, res ?? null);
+    });
+    return map;
+  }, [results, stablePairs]);
+
+  // every compareId this provider was asked to fetch — lets getData tell "requested but unresolved"
+  // (paging stopped early) apart from "not in this provider's list" once paging is done.
+  const requestedCompareIds = useMemo(() => new Set(stablePairs.map((p) => p.compareId)), [stablePairs]);
+
+  const value = useMemo<CompareDataContextModel>(
+    () => ({
+      getData: (compareId: string) => {
+        const found = dataByCompareId.get(compareId);
+        if (found !== undefined) return found;
+        // paging finished (fully, or stopped early on a short page / fetch error) but this requested
+        // pair never produced an entry → surface it as failed (null) rather than "still loading"
+        // (undefined), so consumers keyed on `getData(...) === undefined` don't spin forever.
+        if (done && requestedCompareIds.has(compareId)) return null;
+        return undefined;
+      },
+      loading: !done,
+      loadedCount: results.length,
+    }),
+    [dataByCompareId, done, requestedCompareIds, results.length]
+  );
+
+  return <CompareDataContext.Provider value={value}>{children}</CompareDataContext.Provider>;
+}
diff --git a/components/ui/component-compare/component-compare/compare-sidebar.module.scss b/components/ui/component-compare/component-compare/compare-sidebar.module.scss
new file mode 100644
index 000000000000..5a2c775b7882
--- /dev/null
+++ b/components/ui/component-compare/component-compare/compare-sidebar.module.scss
@@ -0,0 +1,414 @@
+$border-color: var(--border-medium-color, #e8ecf0);
+$surface-color: var(--surface-color, #fff);
+$bg-color: var(--background-color, #fdfdff);
+$accent-color: var(--bit-accent-color, #6c5ce7);
+$text-primary: var(--on-surface-color, #1a1a2e);
+$text-secondary: var(--on-surface-medium-color, #707279);
+$text-muted: var(--on-background-medium-color, #a0aec0);
+
+.sidebar {
+  width: 280px;
+  min-width: 280px;
+  border-right: 1px solid $border-color;
+  background: $bg-color;
+  overflow-y: auto;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 3px;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.25);
+    }
+  }
+}
+
+.sidebarHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  font-size: 12px;
+  font-weight: 600;
+  color: $text-secondary;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-bottom: 1px solid $border-color;
+  flex-shrink: 0;
+}
+
+.sidebarTitle {
+  font-size: 12px;
+}
+
+.clearSelectionLink {
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 0;
+  color: $accent-color;
+  font-size: 11px;
+  font-weight: 500;
+  font-family: inherit;
+  margin-left: auto;
+  opacity: 0.8;
+
+  &:hover {
+    opacity: 1;
+    text-decoration: underline;
+  }
+}
+
+.sidebarContent {
+  overflow-y: auto;
+  flex: 1;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 3px;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.25);
+    }
+  }
+}
+
+.sidebarLoading {
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.sidebarSkeleton {
+  padding: 4px 0;
+}
+
+.skeleton {
+  height: 14px;
+  background: linear-gradient(
+    90deg,
+    var(--surface-neutral-color, #f0f2f5) 25%,
+    $border-color 50%,
+    var(--surface-neutral-color, #f0f2f5) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+  border-radius: 4px;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+.sidebarGroup {
+  border-bottom: 1px solid $border-color;
+}
+
+.sidebarGroupHeader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 10px 16px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  color: $text-primary;
+  text-align: left;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.02);
+  }
+}
+
+.chevron {
+  font-size: 10px;
+  transition: transform 0.15s ease;
+}
+
+.chevronCollapsed {
+  transform: rotate(-90deg);
+}
+
+.groupLabel {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.groupCount {
+  font-weight: 400;
+  color: $text-muted;
+  font-size: 13px;
+}
+
+.sidebarItems {
+  padding: 6px 0;
+}
+
+// --- Component item with file tree ---
+
+.componentItemWrapper {
+  & + & {
+    margin-top: 2px;
+  }
+}
+
+.sidebarItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 12px 8px 16px;
+  background: transparent;
+  border: none;
+  border-left: 2px solid transparent;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 13px;
+  color: $text-primary;
+  text-align: left;
+  transition:
+    background 0.1s ease,
+    border-color 0.1s ease;
+  border-radius: 0;
+  line-height: 1.4;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.02);
+  }
+
+  &.sidebarItemSelected {
+    border-left-color: $accent-color;
+    background: rgba(108, 92, 231, 0.05);
+    color: $accent-color;
+    font-weight: 500;
+  }
+}
+
+.fileChevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  cursor: pointer;
+  transition: transform 0.15s ease;
+
+  &.chevronCollapsed {
+    transform: rotate(-90deg);
+  }
+}
+
+.chevronIcon {
+  font-size: 9px;
+  color: $text-muted;
+}
+
+.fileChevronPlaceholder {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.envIcon {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  border-radius: 3px;
+}
+
+.envIconPlaceholder {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+}
+
+.componentName {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sourceIndicator {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-right: 2px;
+}
+
+// --- Component status ---
+
+.componentStatus {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 3px;
+  flex-shrink: 0;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: $text-muted;
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.componentStatusNEW {
+  color: var(--positive-color, #37b26c);
+  background: rgba(55, 178, 108, 0.1);
+}
+
+.componentStatusSOURCE_CODE {
+  color: var(--warning-color, #d6a022);
+  background: rgba(214, 160, 34, 0.08);
+}
+
+.componentStatusDEPENDENCY {
+  color: var(--warning-color, #d6a022);
+  background: rgba(214, 160, 34, 0.08);
+}
+
+.componentStatusASPECTS {
+  color: var(--warning-color, #d6a022);
+  background: rgba(214, 160, 34, 0.08);
+}
+
+.fileCount {
+  font-size: 10px;
+  color: $text-muted;
+  font-weight: 500;
+  flex-shrink: 0;
+  background: rgba(0, 0, 0, 0.04);
+  padding: 0 5px;
+  border-radius: 8px;
+  margin-left: auto;
+}
+
+// --- File tree ---
+
+.fileTree {
+  padding: 4px 0 8px 0;
+}
+
+.fileItem {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 5px 16px 5px 52px;
+  background: transparent;
+  border: none;
+  border-left: 2px solid transparent;
+  cursor: pointer;
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 12px;
+  color: $text-secondary;
+  text-align: left;
+  line-height: 1.5;
+  transition: background 0.1s ease;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.02);
+    color: $text-primary;
+  }
+
+  &.fileItemSelected {
+    border-left-color: $accent-color;
+    background: rgba(108, 92, 231, 0.05);
+    color: $accent-color;
+  }
+}
+
+.fileStatus {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: $text-muted;
+}
+
+.fileStatusNEW {
+  background: var(--positive-color, #37b26c);
+}
+
+.fileStatusMODIFIED {
+  background: var(--warning-color, #d6a022);
+}
+
+.fileStatusDELETED {
+  background: var(--negative-color, #e5534b);
+}
+
+.fileName {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// --- File status labels ---
+
+.fileStatusLabel {
+  font-size: 10px;
+  font-weight: 700;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 3px;
+  color: $text-muted;
+}
+
+.fileStatusLabelNEW {
+  color: var(--positive-color, #37b26c);
+  background: rgba(55, 178, 108, 0.1);
+}
+
+.fileStatusLabelMODIFIED {
+  color: var(--warning-color, #d6a022);
+  background: rgba(214, 160, 34, 0.08);
+}
+
+.fileStatusLabelDELETED {
+  color: var(--negative-color, #e5534b);
+  background: rgba(229, 83, 75, 0.08);
+}
diff --git a/components/ui/component-compare/component-compare/compare-sidebar.tsx b/components/ui/component-compare/component-compare/compare-sidebar.tsx
new file mode 100644
index 000000000000..86167b06048c
--- /dev/null
+++ b/components/ui/component-compare/component-compare/compare-sidebar.tsx
@@ -0,0 +1,220 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */ // hoisted helper/components used before their definition
+import React, { useState, useEffect } from 'react';
+import { Icon } from '@teambit/design.elements.icon';
+import type { FileInfo } from './file-registry';
+import styles from './compare-sidebar.module.scss';
+
+export type CompareSidebarItem = {
+  id: string;
+  name: string;
+  envIcon?: string;
+  status?: 'NEW' | 'SOURCE_CODE' | 'DEPENDENCY' | 'ASPECTS' | 'NONE' | string;
+  files?: FileInfo[];
+  /** optional indicator (e.g. where the base came from) rendered next to the component name */
+  sourceIndicator?: React.ReactNode;
+};
+
+export type CompareSidebarGroup = {
+  key: string;
+  label: string;
+  icon?: string;
+  items: CompareSidebarItem[];
+};
+
+export type CompareSidebarProps = {
+  groups: CompareSidebarGroup[];
+  selectedId?: string;
+  selectedFile?: string;
+  onSelect: (id: string, fileName?: string) => void;
+  loading?: boolean;
+  className?: string;
+  defaultExpandFiles?: boolean;
+};
+
+export function CompareSidebar({
+  groups,
+  selectedId,
+  selectedFile,
+  onSelect,
+  loading,
+  className,
+  defaultExpandFiles,
+}: CompareSidebarProps) {
+  return (
+    <div className={`${styles.sidebar}${className ? ` ${className}` : ''}`}>
+      <div className={styles.sidebarHeader}>
+        <span className={styles.sidebarTitle}>Components</span>
+        {selectedId && (
+          <button className={styles.clearSelectionLink} onClick={() => onSelect('')}>
+            Clear
+          </button>
+        )}
+      </div>
+      <div className={styles.sidebarContent}>
+        {loading && (
+          <div className={styles.sidebarLoading}>
+            {Array.from({ length: 8 }).map((_, i) => (
+              <div key={i} className={styles.sidebarSkeleton}>
+                <div className={styles.skeleton} style={{ width: `${60 + (i % 3) * 20}%`, height: '12px' }} />
+              </div>
+            ))}
+          </div>
+        )}
+        {!loading &&
+          groups.map((group) => (
+            <SidebarGroup
+              key={group.key}
+              group={group}
+              selectedId={selectedId}
+              selectedFile={selectedFile}
+              onSelect={onSelect}
+              isSingleGroup={groups.length === 1}
+              defaultExpandFiles={defaultExpandFiles}
+            />
+          ))}
+      </div>
+    </div>
+  );
+}
+
+type SidebarGroupProps = {
+  group: CompareSidebarGroup;
+  selectedId?: string;
+  selectedFile?: string;
+  onSelect: (id: string, fileName?: string) => void;
+  isSingleGroup: boolean;
+  defaultExpandFiles?: boolean;
+};
+
+function SidebarGroup({
+  group,
+  selectedId,
+  selectedFile,
+  onSelect,
+  isSingleGroup,
+  defaultExpandFiles,
+}: SidebarGroupProps) {
+  const [collapsed, setCollapsed] = useState(false);
+
+  return (
+    <div className={styles.sidebarGroup}>
+      {!isSingleGroup && (
+        <button className={styles.sidebarGroupHeader} onClick={() => setCollapsed(!collapsed)}>
+          <Icon of="fat-arrow-down" className={`${styles.chevron} ${collapsed ? styles.chevronCollapsed : ''}`} />
+          {group.icon && <Icon of={group.icon} />}
+          <span className={styles.groupLabel}>{group.label}</span>
+          <span className={styles.groupCount}>{group.items.length}</span>
+        </button>
+      )}
+      {!collapsed && (
+        <div className={styles.sidebarItems}>
+          {group.items.map((item) => (
+            <SidebarComponentItem
+              key={item.id}
+              item={item}
+              isSelected={selectedId === item.id}
+              selectedFile={selectedId === item.id ? selectedFile : undefined}
+              onSelect={onSelect}
+              defaultExpand={defaultExpandFiles}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+type SidebarComponentItemProps = {
+  item: CompareSidebarItem;
+  isSelected: boolean;
+  selectedFile?: string;
+  onSelect: (id: string, fileName?: string) => void;
+  defaultExpand?: boolean;
+};
+
+function SidebarComponentItem({ item, isSelected, selectedFile, onSelect, defaultExpand }: SidebarComponentItemProps) {
+  const [expanded, setExpanded] = useState(defaultExpand ?? false);
+  const hasFiles = item.files && item.files.length > 0;
+
+  useEffect(() => {
+    if (defaultExpand && hasFiles) setExpanded(true);
+  }, [defaultExpand, hasFiles]);
+
+  return (
+    <div className={styles.componentItemWrapper}>
+      <button
+        className={`${styles.sidebarItem} ${isSelected && !selectedFile ? styles.sidebarItemSelected : ''}`}
+        onClick={() => onSelect(item.id)}
+      >
+        {hasFiles ? (
+          <span
+            className={`${styles.fileChevron} ${expanded ? '' : styles.chevronCollapsed}`}
+            role="button"
+            tabIndex={0}
+            aria-label={expanded ? 'Collapse files' : 'Expand files'}
+            onClick={(e) => {
+              e.stopPropagation();
+              setExpanded(!expanded);
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                e.stopPropagation();
+                setExpanded(!expanded);
+              }
+            }}
+          >
+            <Icon of="fat-arrow-down" className={styles.chevronIcon} />
+          </span>
+        ) : (
+          <span className={styles.fileChevronPlaceholder} />
+        )}
+        {item.envIcon ? (
+          <img src={item.envIcon} className={styles.envIcon} alt="" />
+        ) : (
+          <span className={styles.envIconPlaceholder} />
+        )}
+        <span className={styles.componentName}>{item.name}</span>
+        {item.sourceIndicator && <span className={styles.sourceIndicator}>{item.sourceIndicator}</span>}
+        {item.status && (
+          <span className={`${styles.componentStatus} ${styles[`componentStatus${item.status}`] || ''}`}>
+            {formatStatus(item.status)}
+          </span>
+        )}
+        {hasFiles && <span className={styles.fileCount}>{item.files!.length}</span>}
+      </button>
+      {expanded && hasFiles && (
+        <div className={styles.fileTree}>
+          {item.files!.map((file) => (
+            <button
+              key={file.name}
+              className={`${styles.fileItem} ${selectedFile === file.name && isSelected ? styles.fileItemSelected : ''}`}
+              onClick={() => onSelect(item.id, file.name)}
+            >
+              <span className={`${styles.fileStatus} ${file.status ? styles[`fileStatus${file.status}`] : ''}`} />
+              <span className={styles.fileName}>{file.name}</span>
+              {file.status && file.status !== 'UNCHANGED' && (
+                <span className={`${styles.fileStatusLabel} ${styles[`fileStatusLabel${file.status}`] || ''}`}>
+                  {file.status === 'NEW' ? 'N' : file.status === 'DELETED' ? 'D' : 'M'}
+                </span>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+const STATUS_LABELS: Record<string, string> = {
+  NEW: 'New',
+  SOURCE_CODE: 'Modified',
+  DEPENDENCY: 'Modified',
+  ASPECTS: 'Modified',
+  MODIFIED: 'Modified',
+  DELETED: 'Deleted',
+};
+
+function formatStatus(status: string): string {
+  return STATUS_LABELS[status] || status;
+}
diff --git a/components/ui/component-compare/component-compare/compare-toolbar.module.scss b/components/ui/component-compare/component-compare/compare-toolbar.module.scss
new file mode 100644
index 000000000000..b1d4d754024a
--- /dev/null
+++ b/components/ui/component-compare/component-compare/compare-toolbar.module.scss
@@ -0,0 +1,89 @@
+$border-color: var(--border-medium-color, #e8ecf0);
+$surface-color: var(--surface-color, #fff);
+$accent-color: var(--bit-accent-color, #6c5ce7);
+$text-primary: var(--on-surface-color, #1a1a2e);
+$text-muted: var(--on-background-medium-color, #a0aec0);
+
+.toolbar {
+  --sidebar-width: 280px;
+  display: flex;
+  align-items: center;
+  padding: 10px 16px;
+  border-bottom: 1px solid $border-color;
+  background: $surface-color;
+  gap: 0;
+}
+
+.toolbarSearch {
+  width: calc(var(--sidebar-width) - 16px);
+  flex-shrink: 0;
+}
+
+.toolbarLeft {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  overflow-x: auto;
+  flex: 1;
+  min-width: 0;
+  padding-left: 16px;
+  border-left: 1px solid $border-color;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.toolbarOption {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 13px;
+}
+
+.toolbarBadge {
+  font-size: 11px;
+  font-weight: 600;
+  color: $text-muted;
+  background: rgba(0, 0, 0, 0.06);
+  padding: 1px 6px;
+  border-radius: 8px;
+  min-width: 16px;
+  text-align: center;
+}
+
+.toolbarBadgeSkeleton {
+  display: inline-block;
+  width: 20px;
+  height: 12px;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.06);
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+.viewModeToggle,
+.groupByToggle {
+  font-size: 13px;
+  height: 34px;
+}
+
+.toolbarSeparator {
+  width: 1px;
+  height: 22px;
+  background: $border-color;
+}
+
+.diffModeToggle {
+  font-size: 13px;
+  height: 34px;
+}
diff --git a/components/ui/component-compare/component-compare/compare-toolbar.tsx b/components/ui/component-compare/component-compare/compare-toolbar.tsx
new file mode 100644
index 000000000000..831d943c80c9
--- /dev/null
+++ b/components/ui/component-compare/component-compare/compare-toolbar.tsx
@@ -0,0 +1,178 @@
+import React from 'react';
+import { ToggleButton } from '@teambit/design.inputs.toggle-button';
+import { Icon } from '@teambit/design.elements.icon';
+import { Tooltip } from '@teambit/design.ui.tooltip';
+import { MultiSelect } from '@teambit/design.inputs.selectors.multi-select';
+import styles from './compare-toolbar.module.scss';
+
+export type DiffMode = 'split' | 'unified';
+
+export type CompareViewMode = {
+  id: string;
+  displayName: string;
+  icon?: string;
+};
+
+export type CompareGroupByOption = {
+  value: string;
+  label: string;
+};
+
+type SelectOption = { value: string; payload: string };
+
+export type CompareToolbarProps = {
+  viewMode: string;
+  onViewModeChange: (mode: string) => void;
+  groupBy?: string;
+  onGroupByChange?: (groupBy: string) => void;
+  diffMode: DiffMode;
+  onDiffModeChange: (mode: DiffMode) => void;
+  viewModes: CompareViewMode[];
+  groupByOptions?: CompareGroupByOption[];
+  counts: Record<string, number>;
+  /**
+   * Show the per-view-mode count badge. Counts always drive visibility (a mode with count 0 is
+   * hidden); this only controls the badge. Off for single-component compare, where a count would
+   * only ever be "1 component" and reads as meaningless.
+   */
+  showCounts?: boolean;
+  loading?: boolean;
+  componentOptions?: SelectOption[];
+  selectedComponents?: SelectOption[];
+  onSelectedComponentsChange?: (selected: SelectOption[]) => void;
+  searchPlaceholder?: string;
+  className?: string;
+  sidebarWidth?: number;
+};
+
+const searchSelectStyles = {
+  control: () => ({
+    fontSize: '13px',
+    padding: '2px 4px',
+    height: '32px',
+    width: '100%',
+  }),
+  singleValue: () => ({
+    padding: 0,
+  }),
+};
+
+export function CompareToolbar({
+  viewMode,
+  onViewModeChange,
+  groupBy,
+  onGroupByChange,
+  diffMode,
+  onDiffModeChange,
+  counts,
+  showCounts = true,
+  loading,
+  viewModes: registeredViewModes,
+  groupByOptions,
+  componentOptions,
+  selectedComponents,
+  onSelectedComponentsChange,
+  searchPlaceholder = 'Search components',
+  className,
+  sidebarWidth,
+}: CompareToolbarProps) {
+  const viewModes = registeredViewModes
+    .map((vm) => ({
+      value: vm.id,
+      label: vm.displayName,
+      icon: vm.icon,
+      count: counts[vm.id] ?? 0,
+    }))
+    .filter((vm) => vm.count > 0);
+
+  const hasGroupBy = !!(groupByOptions && groupByOptions.length > 0 && onGroupByChange);
+  const groupByIndex = hasGroupBy
+    ? Math.max(
+        0,
+        (groupByOptions as CompareGroupByOption[]).findIndex((g) => g.value === groupBy)
+      )
+    : 0;
+  const viewModeIndex = viewModes.findIndex((v) => v.value === viewMode);
+
+  return (
+    <div
+      className={`${styles.toolbar}${className ? ` ${className}` : ''}`}
+      style={sidebarWidth ? ({ '--sidebar-width': `${sidebarWidth}px` } as React.CSSProperties) : undefined}
+    >
+      {componentOptions && onSelectedComponentsChange && (
+        <div className={styles.toolbarSearch}>
+          <MultiSelect
+            id="search-components"
+            styles={searchSelectStyles}
+            placeholder={searchPlaceholder}
+            options={componentOptions}
+            activeOptions={selectedComponents || []}
+            onChange={(value) => onSelectedComponentsChange((value || []) as SelectOption[])}
+            className={styles.componentSearchSelect}
+          />
+        </div>
+      )}
+      <div className={styles.toolbarLeft}>
+        <ToggleButton
+          onOptionSelect={(idx) => {
+            const newMode = viewModes[idx].value;
+            onViewModeChange(newMode);
+          }}
+          defaultIndex={viewModeIndex >= 0 ? viewModeIndex : 0}
+          options={viewModes.map((vm) => ({
+            value: vm.value,
+            element: (
+              <div className={styles.toolbarOption}>
+                {vm.icon && <Icon of={vm.icon} />}
+                <span>{vm.label}</span>
+                {showCounts &&
+                  (loading ? (
+                    <span className={styles.toolbarBadgeSkeleton} />
+                  ) : (
+                    <span className={styles.toolbarBadge}>{vm.count}</span>
+                  ))}
+              </div>
+            ),
+          }))}
+          className={styles.viewModeToggle}
+        />
+
+        {hasGroupBy && (
+          <>
+            <div className={styles.toolbarSeparator} />
+
+            <ToggleButton
+              onOptionSelect={(idx) => onGroupByChange!((groupByOptions as CompareGroupByOption[])[idx].value)}
+              defaultIndex={groupByIndex >= 0 ? groupByIndex : 0}
+              options={(groupByOptions as CompareGroupByOption[]).map((g) => ({
+                value: g.value,
+                element: (
+                  <Tooltip content={`Group by ${g.label}`}>
+                    <span>{g.label}</span>
+                  </Tooltip>
+                ),
+              }))}
+              className={styles.groupByToggle}
+            />
+          </>
+        )}
+
+        {(viewMode === 'code' || viewMode === 'config' || viewMode === 'tests') && (
+          <>
+            <div className={styles.toolbarSeparator} />
+
+            <ToggleButton
+              onOptionSelect={(idx) => onDiffModeChange(idx === 0 ? 'split' : 'unified')}
+              defaultIndex={diffMode === 'split' ? 0 : 1}
+              options={[
+                { value: 'split', element: <span>Split</span> },
+                { value: 'unified', element: <span>Unified</span> },
+              ]}
+              className={styles.diffModeToggle}
+            />
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/components/ui/component-compare/component-compare/component-compare.module.scss b/components/ui/component-compare/component-compare/component-compare.module.scss
index eb042db13e69..ed79b817cafa 100644
--- a/components/ui/component-compare/component-compare/component-compare.module.scss
+++ b/components/ui/component-compare/component-compare/component-compare.module.scss
@@ -3,6 +3,8 @@
   flex-direction: column;
   height: 100%;
   overflow: hidden;
+  // shrink below content width so a wide diff scrolls inside its own body, not the page.
+  min-width: 0;
 }
 
 .top {
@@ -16,6 +18,14 @@
   overflow: hidden;
   flex-direction: column;
   flex: 1;
+  // shrink below content width so a wide diff scrolls inside its own body, not the page.
+  min-width: 0;
+
+  // direct children (the rendered tab subtrees, incl. the code diff) must also be allowed to
+  // shrink below their min-content width, otherwise a wide diff forces this column wider.
+  > * {
+    min-width: 0;
+  }
 
   &.hidden {
     display: none;
@@ -130,3 +140,149 @@
     background-color: var(--bit-accent-success-color, #37b26c);
   }
 }
+
+// ---------------------------------------------------------------------------
+// InlineComponentCompare + ComponentCompareHeader (ported from new-changes)
+// ---------------------------------------------------------------------------
+
+$inline-border-color: var(--border-medium-color, #e8ecf0);
+$inline-surface-color: var(--surface-color, #fff);
+$inline-accent-color: var(--bit-accent-color, #6c5ce7);
+$inline-text-primary: var(--on-surface-color, #1a1a2e);
+$inline-text-secondary: var(--on-surface-medium-color, #707279);
+$inline-text-muted: var(--on-background-medium-color, #a0aec0);
+$inline-code-font: 'JetBrains Mono', ui-monospace, monospace;
+
+.componentCompare {
+  background: $inline-surface-color;
+  margin-bottom: 2px;
+  --component-header-height: 44px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 12px 20px;
+  background: $inline-surface-color;
+  border-bottom: 1px solid $inline-border-color;
+  border-left: 3px solid var(--component-accent, #{$inline-accent-color});
+  position: sticky;
+  top: var(--group-header-height, 0px);
+  z-index: 3;
+}
+
+.headerLeft {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  flex: 1;
+}
+
+.headerRight {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-shrink: 0;
+}
+
+.envIcon {
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  border-radius: 4px;
+}
+
+.envIconPlaceholder {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+
+.componentName {
+  font-size: 14px;
+  font-weight: 600;
+  color: $inline-text-primary;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.changeTags {
+  display: flex;
+  gap: 6px;
+}
+
+.changeTag {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 4px;
+  letter-spacing: 0.02em;
+}
+
+.versions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.versionHash {
+  padding: 4px 10px;
+  border-radius: 6px;
+  background: var(--surface-neutral-color, #f6f8fa);
+  font-family: $inline-code-font;
+  font-size: 12px;
+  color: $inline-text-secondary;
+  text-decoration: none;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease;
+
+  &:hover {
+    background: rgba(108, 92, 231, 0.08);
+    color: $inline-accent-color;
+  }
+}
+
+.versionArrow {
+  color: $inline-text-muted;
+  font-size: 11px;
+  opacity: 0.5;
+}
+
+.skeleton {
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.skeletonBar {
+  height: 12px;
+  background: linear-gradient(
+    90deg,
+    var(--surface-neutral-color, #f0f2f5) 25%,
+    #{$inline-border-color} 50%,
+    var(--surface-neutral-color, #f0f2f5) 75%
+  );
+  background-size: 200% 100%;
+  animation: inline-shimmer 1.5s ease-in-out infinite;
+  border-radius: 4px;
+}
+
+@keyframes inline-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
diff --git a/components/ui/component-compare/component-compare/component-compare.tsx b/components/ui/component-compare/component-compare/component-compare.tsx
index 7d1ed9a97abd..32aeea60c08f 100644
--- a/components/ui/component-compare/component-compare/component-compare.tsx
+++ b/components/ui/component-compare/component-compare/component-compare.tsx
@@ -1,8 +1,11 @@
 /* eslint-disable react/destructuring-assignment */
 /* eslint-disable react/require-default-props */
-import type { HTMLAttributes } from 'react';
-import React, { useContext, useMemo } from 'react';
+/* eslint-disable @typescript-eslint/no-use-before-define */ // hoisted function components used before their definition
+import type { HTMLAttributes, ReactNode } from 'react';
+import React, { useContext, useEffect, useMemo, useRef, useState, forwardRef } from 'react';
 import classnames from 'classnames';
+import { useCode } from '@teambit/code.ui.queries.get-component-code';
+import { ComponentID as ComponentIdValue } from '@teambit/component-id';
 import type { LegacyComponentLog } from '@teambit/legacy-component-log';
 import type { ComponentID, NavPlugin } from '@teambit/component';
 import { CollapsibleMenuNav, ComponentContext, ComponentDescriptorContext, useComponent } from '@teambit/component';
@@ -27,121 +30,19 @@ import { sortByDateDsc } from '@teambit/component.ui.component-compare.utils.sor
 import { extractLazyLoadedData } from '@teambit/component.ui.component-compare.utils.lazy-loading';
 import { BlockSkeleton, WordSkeleton } from '@teambit/base-ui.loaders.skeleton';
 import { ChangeType } from '@teambit/component.ui.component-compare.models.component-compare-change-type';
-import { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
-import { gql } from '@apollo/client';
+import { useApiDiff } from '@teambit/semantics.ui.api-diff-view';
+import type { APIDiffResult } from '@teambit/semantics.ui.api-diff-view';
+import type { ComponentComparePair, CompareComponentData } from './compare-data-context';
+import { useCompareData } from './compare-data-context';
+import { useFileRegistryRegister, useAspectRegistryRegister } from './file-registry';
 
 import styles from './component-compare.module.scss';
 
 // Extend ChangeType with API (the external enum doesn't have it yet)
 const ChangeTypeAPI = 'API' as unknown as ChangeType;
 
-export type APIDiffDetail = {
-  changeKind: string;
-  description: string;
-  impact: string;
-  from?: string;
-  to?: string;
-};
-
-export type APIDiffChange = {
-  status: string;
-  visibility: string;
-  exportName: string;
-  schemaType: string;
-  schemaTypeRaw: string;
-  impact: string;
-  baseSignature?: string;
-  compareSignature?: string;
-  baseNode?: Record<string, any>;
-  compareNode?: Record<string, any>;
-  changes?: APIDiffDetail[];
-};
-
-export type APIDiffResult = {
-  hasChanges: boolean;
-  impact: string;
-  publicChanges: APIDiffChange[];
-  internalChanges: APIDiffChange[];
-  changes: APIDiffChange[];
-  added: number;
-  removed: number;
-  modified: number;
-  breaking: number;
-  nonBreaking: number;
-  patch: number;
-};
-
-const QUERY_API_DIFF = gql`
-  query ComponentCompareAPIDiff($baseId: String!, $compareId: String!) {
-    getHost {
-      id
-      apiDiff(baseId: $baseId, compareId: $compareId) {
-        hasChanges
-        impact
-        added
-        removed
-        modified
-        breaking
-        nonBreaking
-        patch
-        publicChanges {
-          status
-          visibility
-          exportName
-          schemaType
-          schemaTypeRaw
-          impact
-          baseSignature
-          compareSignature
-          baseNode
-          compareNode
-          changes {
-            changeKind
-            description
-            impact
-            from
-            to
-          }
-        }
-        internalChanges {
-          status
-          visibility
-          exportName
-          schemaType
-          schemaTypeRaw
-          impact
-          baseSignature
-          compareSignature
-          changes {
-            changeKind
-            description
-            impact
-            from
-            to
-          }
-        }
-      }
-    }
-  }
-`;
-
-function useAPIDiffQuery(
-  baseId?: string,
-  compareId?: string,
-  skip?: boolean
-): { loading?: boolean; apiDiffResult?: APIDiffResult | null } {
-  const { data, loading } = useDataQuery<{
-    getHost: { apiDiff: APIDiffResult | null };
-  }>(QUERY_API_DIFF, {
-    variables: { baseId, compareId },
-    skip: skip || !baseId || !compareId || baseId === compareId,
-  });
-
-  return {
-    loading,
-    apiDiffResult: data?.getHost?.apiDiff,
-  };
-}
+// single source of truth for the API diff model — see api-diff-view's api-diff-model.
+export type { APIDiffResult, APIDiffChange, APIDiffDetail } from '@teambit/semantics.ui.api-diff-view';
 
 const findPrevVersionFromCurrent = (compareVersion) => (_, index: number, logs: LegacyComponentLog[]) => {
   if (compareVersion === 'workspace' || logs.length === 1) return true;
@@ -182,7 +83,7 @@ function CompareMenuTab({
 }) {
   const hasChanged = useMemo(
     () => changed?.some((change) => change !== ChangeType.NONE && change !== ChangeType.NEW),
-    [changeTypeCss]
+    [changed]
   );
 
   if (loading) return <TabLoader />;
@@ -481,11 +382,9 @@ export function ComponentCompare(props: ComponentCompareProps) {
     skipComponentCompareQuery
   );
 
-  const { loading: apiDiffLoading, apiDiffResult } = useAPIDiffQuery(
-    base?.id.toString(),
-    compare?.id.toString(),
-    hidden
-  );
+  const { loading: apiDiffLoading, result: apiDiffResult } = useApiDiff(base?.id.toString(), compare?.id.toString(), {
+    skip: hidden,
+  });
 
   const fileCompareDataByName = useMemo(() => {
     if (loading || compCompareLoading) return undefined;
@@ -580,3 +479,406 @@ export function ComponentCompare(props: ComponentCompareProps) {
     </ComponentCompareContext.Provider>
   );
 }
+
+// ---------------------------------------------------------------------------
+// InlineComponentCompare + ComponentCompareHeader (ported from new-changes)
+// ---------------------------------------------------------------------------
+
+export type InlineComponentCompareProps = {
+  name: string;
+  baseId?: string;
+  compareId: string;
+  baseVersion?: string;
+  compareVersion?: string;
+  baseUrl?: string;
+  compareUrl?: string;
+  envIcon?: string;
+  changeTags?: Array<{ label: string; color: string }>;
+  accentColor?: string;
+  tabs?: TabItem[];
+  allTabs?: TabItem[];
+  children?: ReactNode;
+  className?: string;
+  host?: string;
+  previewUrl?: string;
+  /**
+   * Provide the base/compare model+descriptor directly instead of letting the inner context re-fetch
+   * them by id. Needed for the single-component compare page: in workspace local-changes mode
+   * `compareId` is deliberately set equal to `baseId` (to trigger the server's local diff for the
+   * bulk code query), so re-fetching by id would load the same snap for both sides — making deps/
+   * config/preview identical. The page already holds the correct pair (base = the scope's published
+   * snap, compare = the live workspace component), so it passes them through here. `compareId` is
+   * still used as-is to key the bulk code/aspect/test data. Lane-compare omits these and re-fetches.
+   */
+  baseOverride?: { model?: any; descriptor?: any; hasLocalChanges?: boolean };
+  compareOverride?: { model?: any; descriptor?: any; hasLocalChanges?: boolean };
+  /**
+   * Extra `data-*` attributes stamped on the panel root. Lane-compare uses these (`data-has-code`,
+   * `data-has-deps`, …) to drive per-view-mode visibility purely in CSS, so switching modes never
+   * remounts panels — it only flips the `[data-view-mode]` attribute on the pane. The object MUST be
+   * referentially stable across view-mode changes (derive it from view-mode-independent data) or it
+   * defeats React.memo and reintroduces the re-render storm this whole design avoids.
+   */
+  dataAttributes?: Record<string, string>;
+};
+
+/**
+ * forwardRef + React.memo. Without memo, every parent re-render (e.g. `setViewMode` in lane-compare)
+ * re-renders all 10 mounted panels and all their nested tab subtrees — which was the source of the
+ * "view-mode switching is slow" feedback. With memo + stable props (lane-compare's `allTabs` array
+ * is hoisted to module scope), a viewMode click is now just a CSS attribute change on the
+ * `[data-view-mode]` container; the panels don't reconcile at all.
+ */
+const InlineComponentCompareInner = forwardRef<HTMLDivElement, InlineComponentCompareProps>(
+  function InlineComponentCompare(
+    {
+      name,
+      baseId,
+      compareId,
+      baseVersion,
+      compareVersion,
+      baseUrl,
+      compareUrl,
+      envIcon,
+      changeTags,
+      accentColor,
+      tabs,
+      allTabs,
+      children,
+      className,
+      host = 'teambit.scope/scope',
+      baseOverride,
+      compareOverride,
+      dataAttributes,
+    },
+    ref
+  ) {
+    const sectionRef = useRef<HTMLDivElement>(null);
+    const [hasBeenVisible, setHasBeenVisible] = useState(false);
+
+    const setRefs = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        (sectionRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
+        if (typeof ref === 'function') ref(node);
+        // eslint-disable-next-line no-param-reassign
+        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+      },
+      [ref]
+    );
+
+    useEffect(() => {
+      const el = sectionRef.current;
+      if (!el) return undefined;
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting) {
+            setHasBeenVisible(true);
+            observer.disconnect();
+          }
+        },
+        { rootMargin: '400px 0px' }
+      );
+      observer.observe(el);
+      return () => observer.disconnect();
+    }, []);
+
+    const headerStyle = accentColor ? ({ '--component-accent': accentColor } as React.CSSProperties) : undefined;
+
+    return (
+      <div
+        ref={setRefs}
+        className={`${styles.componentCompare} ${className || ''}`}
+        data-component-id={compareId.split('@')[0]}
+        style={headerStyle}
+        {...dataAttributes}
+      >
+        <ComponentCompareHeader
+          name={name}
+          envIcon={envIcon}
+          baseVersion={baseVersion}
+          compareVersion={compareVersion}
+          baseUrl={baseUrl}
+          compareUrl={compareUrl}
+          changeTags={changeTags}
+        />
+
+        {!baseId && !!compareId && <NewComponentFileRegistrar compareId={compareId} />}
+
+        {!hasBeenVisible && <InlineSkeleton lines={1} />}
+
+        {hasBeenVisible && (
+          <InlineContextProvider
+            baseId={baseId}
+            compareId={compareId}
+            host={host}
+            baseOverride={baseOverride}
+            compareOverride={compareOverride}
+          >
+            {allTabs
+              ? allTabs.map((tab) => (
+                  <DeferredTab key={tab.id} tabId={tab.id}>
+                    {tab.element}
+                  </DeferredTab>
+                ))
+              : tabs && tabs.map((tab) => <div key={tab.id}>{tab.element}</div>)}
+            {children}
+          </InlineContextProvider>
+        )}
+      </div>
+    );
+  }
+);
+export const InlineComponentCompare = React.memo(InlineComponentCompareInner);
+
+/**
+ * Tab wrapper that just stamps a `data-tab-id` for CSS-driven visibility (rules live in
+ * `lane-compare.module.scss`, scoped by `data-view-mode`). Previously gated children on
+ * `el.offsetParent !== null` to defer mounting until visible — that turned each view-mode switch
+ * into a fresh data-fetch storm because the lazily-mounted panel re-fired all its queries. We now
+ * mount all tabs eagerly and rely on Apollo's per-query cache (warmed by the lane-compare
+ * pre-fetch) to keep first paint cheap. The `data-tab-id` attribute remains so CSS can hide
+ * non-active tabs.
+ */
+export function DeferredTab({ tabId, children }: { tabId: string; children: ReactNode }) {
+  return <div data-tab-id={tabId}>{children}</div>;
+}
+
+function InlineContextProvider({
+  baseId,
+  compareId,
+  host = 'teambit.scope/scope',
+  baseOverride,
+  compareOverride,
+  children,
+}: {
+  baseId?: string;
+  compareId?: string;
+  host?: string;
+  baseOverride?: { model?: any; descriptor?: any; hasLocalChanges?: boolean };
+  compareOverride?: { model?: any; descriptor?: any; hasLocalChanges?: boolean };
+  children: ReactNode;
+}) {
+  const isNew = !baseId && !!compareId;
+
+  // When the caller supplies the model/descriptor (single-component page), use it and skip the fetch
+  // — re-fetching by id would be redundant and, in local-changes mode (compareId === baseId), wrong.
+  const { component: fetchedBaseModel, componentDescriptor: fetchedBaseDescriptor } = useComponent(host, baseId, {
+    skip: !baseId || !!baseOverride,
+    context: { batch: true },
+  });
+  const { component: fetchedCompareModel, componentDescriptor: fetchedCompareDescriptor } = useComponent(
+    host,
+    compareId,
+    {
+      skip: !compareId || !!compareOverride,
+      context: { batch: true },
+    }
+  );
+
+  const baseModel = baseOverride?.model ?? fetchedBaseModel;
+  const baseDescriptor = baseOverride?.descriptor ?? fetchedBaseDescriptor;
+  const compareModel = compareOverride?.model ?? fetchedCompareModel;
+  const compareDescriptor = compareOverride?.descriptor ?? fetchedCompareDescriptor;
+
+  const hasBase = !baseId || !!baseModel;
+  const hasCompare = !compareId || !!compareModel;
+
+  const compareData = useCompareData();
+  const componentCompareData = compareId ? compareData?.getData(compareId) : undefined;
+  // for non-new components with a compareId: undefined = bulk page not loaded yet, null = pair failed to compare.
+  // a component with no compareId (deleted in the compare lane) is never in the bulk pairs, so it is not "loading".
+  const compCompareLoading = !isNew && !!compareId && componentCompareData === undefined;
+
+  const { fileTree: newCompFileTree, loading: newCompCodeLoading } = useCode(isNew ? compareModel?.id : undefined);
+
+  const fileCompareDataByName = useMemo(() => {
+    if (isNew) {
+      if (newCompCodeLoading || !newCompFileTree) return undefined;
+      const lookup = new Map();
+      newCompFileTree.forEach((fileName: string) => {
+        lookup.set(fileName, { fileName, baseContent: '', compareContent: undefined, status: 'NEW' });
+      });
+      return lookup;
+    }
+    if (compCompareLoading) return undefined;
+    if (!componentCompareData) return null;
+    const lookup = new Map();
+    (componentCompareData.code || []).forEach((f: any) => {
+      lookup.set(f.fileName, f);
+    });
+    return lookup;
+  }, [isNew, newCompCodeLoading, newCompFileTree, compCompareLoading, componentCompareData]);
+
+  const fieldCompareDataByName = useMemo(() => {
+    if (compCompareLoading) return undefined;
+    if (!componentCompareData) return null;
+    const lookup = new Map();
+    (componentCompareData.aspects || []).forEach((a: any) => lookup.set(a.fieldName, a));
+    return lookup;
+  }, [compCompareLoading, componentCompareData]);
+
+  const testCompareDataByName = useMemo(() => {
+    if (compCompareLoading) return undefined;
+    if (!componentCompareData) return null;
+    const lookup = new Map();
+    (componentCompareData.tests || []).forEach((t: any) => lookup.set(t.fileName, t));
+    return lookup;
+  }, [compCompareLoading, componentCompareData]);
+
+  if (!hasBase || !hasCompare) {
+    return <InlineSkeleton lines={2} />;
+  }
+
+  const contextValue = {
+    base: baseModel ? { model: baseModel, descriptor: baseDescriptor } : undefined,
+    compare: compareModel
+      ? { model: compareModel, descriptor: compareDescriptor, hasLocalChanges: compareOverride?.hasLocalChanges }
+      : undefined,
+    loading: compCompareLoading,
+    logsByVersion: new Map(),
+    fileCompareDataByName,
+    fieldCompareDataByName,
+    testCompareDataByName,
+    isFullScreen: false,
+    hidden: false,
+  };
+
+  return <ComponentCompareContext.Provider value={contextValue as any}>{children}</ComponentCompareContext.Provider>;
+}
+
+/**
+ * registers the file list of a NEW component (one with no base) into the FileRegistry for the sidebar.
+ * non-new components are fed in bulk by `RegistryFeeder`. `useCode` is an external hook that cannot
+ * forward a batch context, so these (minority) queries stay unbatched.
+ * compositions are intentionally not registered here — the FileRegistry compositions store has no
+ * readers; `lane-compare.tsx` derives composition info independently from `useLaneComponents`.
+ */
+export function NewComponentFileRegistrar({ compareId }: { compareId: string }) {
+  const newCompId = useMemo(() => ComponentIdValue.fromString(compareId), [compareId]);
+  const { fileTree: newCompFileTree, loading } = useCode(newCompId);
+
+  const registryFiles = useMemo(() => {
+    if (loading || !newCompFileTree?.length) return undefined;
+    return newCompFileTree.map((n: string) => ({ name: n, status: 'NEW' }));
+  }, [loading, newCompFileTree]);
+
+  useFileRegistryRegister(compareId.split('@')[0], registryFiles);
+
+  return null;
+}
+
+export type ComponentCompareHeaderProps = {
+  name: string;
+  envIcon?: string;
+  baseVersion?: string;
+  compareVersion?: string;
+  baseUrl?: string;
+  compareUrl?: string;
+  changeTags?: Array<{ label: string; color: string }>;
+};
+
+export function ComponentCompareHeader({
+  name,
+  envIcon,
+  baseVersion,
+  compareVersion,
+  baseUrl,
+  compareUrl,
+  changeTags,
+}: ComponentCompareHeaderProps) {
+  return (
+    <div className={styles.header}>
+      <div className={styles.headerLeft}>
+        {envIcon ? (
+          <img src={envIcon} className={styles.envIcon} alt="" />
+        ) : (
+          <span className={styles.envIconPlaceholder} />
+        )}
+        <span className={styles.componentName}>{name}</span>
+      </div>
+      <div className={styles.headerRight}>
+        {changeTags && changeTags.length > 0 && (
+          <div className={styles.changeTags}>
+            {changeTags.map((t) => (
+              <span key={t.label} className={styles.changeTag} style={{ color: t.color, background: `${t.color}14` }}>
+                {t.label}
+              </span>
+            ))}
+          </div>
+        )}
+        <div className={styles.versions}>
+          {baseVersion &&
+            (baseUrl ? (
+              <a className={styles.versionHash} href={baseUrl} target="_blank" rel="noopener noreferrer">
+                {baseVersion}
+              </a>
+            ) : (
+              <span className={styles.versionHash}>{baseVersion}</span>
+            ))}
+          {baseVersion && compareVersion && <span className={styles.versionArrow}>→</span>}
+          {compareVersion &&
+            (compareUrl ? (
+              <a className={styles.versionHash} href={compareUrl} target="_blank" rel="noopener noreferrer">
+                {compareVersion}
+              </a>
+            ) : (
+              <span className={styles.versionHash}>{compareVersion}</span>
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function InlineSkeleton({ lines = 3 }: { lines?: number }) {
+  return (
+    <div className={styles.skeleton}>
+      {Array.from({ length: lines }).map((_, i) => (
+        <div key={i} className={styles.skeletonBar} style={{ width: `${40 + (i % 3) * 20}%` }} />
+      ))}
+    </div>
+  );
+}
+
+/** registers one component's bulk compare data into the FileRegistry. renders nothing. */
+function CompareRegistryEntry({ compareId }: { compareId: string }) {
+  const compareData = useCompareData();
+  const data: CompareComponentData | null | undefined = compareData?.getData(compareId);
+  const componentIdStr = compareId.split('@')[0];
+
+  // `data` undefined = the bulk page is still loading → register nothing (keep any prior entry). `data`
+  // null = the pair failed or paging terminated before reaching it → register an empty list so a stale
+  // file tree from a previous comparison is cleared rather than left behind in the sidebar registry.
+  const registryFiles = useMemo(() => {
+    if (data === undefined) return undefined;
+    if (data === null) return [];
+    return (data.code || [])
+      .filter((f) => f.status !== 'UNCHANGED')
+      .map((f) => ({ name: f.fileName, status: f.status }));
+  }, [data]);
+
+  const aspectRegistryFiles = useMemo(() => {
+    if (data === undefined) return undefined;
+    if (data === null) return [];
+    return (data.aspects || []).map((a) => ({ name: a.fieldName, status: 'MODIFIED' }));
+  }, [data]);
+
+  useFileRegistryRegister(componentIdStr, registryFiles);
+  useAspectRegistryRegister(componentIdStr, aspectRegistryFiles);
+
+  return null;
+}
+
+/**
+ * feeds the FileRegistry from the bulk `CompareDataProvider` for every component pair that has a base.
+ * renders one null-rendering `CompareRegistryEntry` per pair — no per-component queries are fired.
+ */
+export function RegistryFeeder({ pairs }: { pairs: ComponentComparePair[] }) {
+  return (
+    <>
+      {pairs.map((pair) => (
+        <CompareRegistryEntry key={pair.compareId} compareId={pair.compareId} />
+      ))}
+    </>
+  );
+}
diff --git a/components/ui/component-compare/component-compare/diff-mode-context.tsx b/components/ui/component-compare/component-compare/diff-mode-context.tsx
new file mode 100644
index 000000000000..206e7ab0f0b3
--- /dev/null
+++ b/components/ui/component-compare/component-compare/diff-mode-context.tsx
@@ -0,0 +1,14 @@
+import React, { createContext, useContext } from 'react';
+import type { ReactNode } from 'react';
+
+export type DiffDisplayMode = 'split' | 'unified';
+
+const DiffModeContext = createContext<DiffDisplayMode>('split');
+
+export function DiffModeProvider({ mode, children }: { mode: DiffDisplayMode; children: ReactNode }) {
+  return <DiffModeContext.Provider value={mode}>{children}</DiffModeContext.Provider>;
+}
+
+export function useDiffMode(): DiffDisplayMode {
+  return useContext(DiffModeContext);
+}
diff --git a/components/ui/component-compare/component-compare/file-registry.tsx b/components/ui/component-compare/component-compare/file-registry.tsx
new file mode 100644
index 000000000000..58a7a6d19fe4
--- /dev/null
+++ b/components/ui/component-compare/component-compare/file-registry.tsx
@@ -0,0 +1,169 @@
+import React, { createContext, useCallback, useContext, useEffect, useRef, useSyncExternalStore } from 'react';
+import type { ReactNode } from 'react';
+
+export type FileInfo = { name: string; status?: string };
+
+type Listener = () => void;
+
+function filesSignature(files: FileInfo[]) {
+  return files.map((f) => `${f.name}:${f.status ?? ''}`).join('|');
+}
+
+class ComponentRegistry {
+  private files = new Map<string, FileInfo[]>();
+
+  private aspectFiles = new Map<string, FileInfo[]>();
+
+  /** changed API exports per component — populates the sidebar tree in API view mode */
+  private apiEntries = new Map<string, FileInfo[]>();
+
+  private compositions = new Map<string, boolean>();
+
+  private listeners = new Set<Listener>();
+
+  register(componentId: string, files: FileInfo[]) {
+    const existing = this.files.get(componentId);
+    if (existing && filesSignature(existing) === filesSignature(files)) return;
+    this.files.set(componentId, files);
+    this.notify();
+  }
+
+  getFiles(componentId: string) {
+    return this.files.get(componentId);
+  }
+
+  registerAspects(componentId: string, files: FileInfo[]) {
+    const existing = this.aspectFiles.get(componentId);
+    if (existing && filesSignature(existing) === filesSignature(files)) return;
+    this.aspectFiles.set(componentId, files);
+    this.notify();
+  }
+
+  getAspectFiles(componentId: string) {
+    return this.aspectFiles.get(componentId);
+  }
+
+  registerApiEntries(componentId: string, entries: FileInfo[]) {
+    const existing = this.apiEntries.get(componentId);
+    if (existing && filesSignature(existing) === filesSignature(entries)) return;
+    this.apiEntries.set(componentId, entries);
+    this.notify();
+  }
+
+  getApiEntries(componentId: string) {
+    return this.apiEntries.get(componentId);
+  }
+
+  registerCompositions(componentId: string, hasCompositions: boolean) {
+    if (this.compositions.get(componentId) === hasCompositions) return;
+    this.compositions.set(componentId, hasCompositions);
+    this.notify();
+  }
+
+  getHasCompositions(componentId: string) {
+    return this.compositions.get(componentId);
+  }
+
+  subscribe(listener: Listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+
+  getVersion() {
+    return this.version;
+  }
+
+  private version = 0;
+
+  /** the version value subscribers last observed — guards against flushing a no-op change */
+  private flushedVersion = 0;
+
+  private pendingNotify = false;
+
+  /**
+   * coalesce a burst of registrations into a single asynchronous flush, then notify subscribers
+   * exactly once. crucial properties that keep this provably convergent and free of the
+   * "Maximum update depth exceeded" loop:
+   *  - `version` only advances when a `register*` method detected a *real* content change (each
+   *    one bails on an equal signature), so a re-render that registers nothing cannot bump it.
+   *  - the flush is deferred to a microtask and guarded by `pendingNotify`, so N synchronous
+   *    registrations collapse into one subscriber notification (one re-render), never N.
+   *  - the flush bails when `version === flushedVersion`, so a scheduled flush whose change was
+   *    already observed (e.g. via `useSyncExternalStore`'s snapshot) does no extra work.
+   *  - listeners are snapshotted before iterating, so a subscriber that (un)subscribes while being
+   *    notified cannot mutate the set mid-iteration.
+   */
+  private notify() {
+    this.version += 1;
+    if (this.pendingNotify) return;
+    this.pendingNotify = true;
+    queueMicrotask(() => {
+      this.pendingNotify = false;
+      if (this.version === this.flushedVersion) return;
+      this.flushedVersion = this.version;
+      [...this.listeners].forEach((l) => l());
+    });
+  }
+}
+
+const FileRegistryContext = createContext<ComponentRegistry | undefined>(undefined);
+
+export function FileRegistryProvider({ children }: { children: ReactNode }) {
+  const storeRef = useRef<ComponentRegistry | undefined>(undefined);
+  if (!storeRef.current) storeRef.current = new ComponentRegistry();
+  return <FileRegistryContext.Provider value={storeRef.current}>{children}</FileRegistryContext.Provider>;
+}
+
+export function useFileRegistry() {
+  const store = useContext(FileRegistryContext);
+
+  // Subscribe via `useSyncExternalStore` rather than a manual `useState` + `forceRender`. The
+  // snapshot is the store's monotonic `version`, which only advances on a real registration change.
+  // React re-renders this consumer solely when that number changes and bails when it is unchanged —
+  // so a re-render that triggers no genuine registration produces no new snapshot and cannot loop.
+  const subscribe = useCallback((onStoreChange: () => void) => store?.subscribe(onStoreChange) ?? (() => {}), [store]);
+  const getSnapshot = useCallback(() => store?.getVersion() ?? 0, [store]);
+  useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+
+  return store;
+}
+
+// `undefined` = not loaded yet (register nothing); `[]` = loaded with no changed files (register the
+// empty list, so a component that becomes unchanged under a new base clears its stale sidebar entry
+// instead of keeping the previous non-empty one). the signature encodes definedness so an
+// `undefined → []` transition still re-runs the effect — otherwise both collapse to '' and it wouldn't.
+// `register*()` bails on an equal signature, so a repeated empty registration never notifies.
+function registerSignature(files: FileInfo[] | undefined): string | undefined {
+  return files === undefined ? undefined : filesSignature(files);
+}
+
+export function useFileRegistryRegister(componentId: string | undefined, files: FileInfo[] | undefined) {
+  const store = useContext(FileRegistryContext);
+  const signature = registerSignature(files);
+  useEffect(() => {
+    if (store && componentId && files) {
+      store.register(componentId, files);
+    }
+  }, [store, componentId, signature]);
+}
+
+export function useAspectRegistryRegister(componentId: string | undefined, files: FileInfo[] | undefined) {
+  const store = useContext(FileRegistryContext);
+  const signature = registerSignature(files);
+  useEffect(() => {
+    if (store && componentId && files) {
+      store.registerAspects(componentId, files);
+    }
+  }, [store, componentId, signature]);
+}
+
+export function useCompositionsRegistryRegister(componentId: string | undefined, hasCompositions: boolean | undefined) {
+  const store = useContext(FileRegistryContext);
+  useEffect(() => {
+    if (store && componentId && hasCompositions !== undefined) {
+      store.registerCompositions(componentId, hasCompositions);
+    }
+  }, [store, componentId, hasCompositions]);
+}
diff --git a/components/ui/component-compare/component-compare/index.ts b/components/ui/component-compare/component-compare/index.ts
index 4748286e24d2..4578967c0e20 100644
--- a/components/ui/component-compare/component-compare/index.ts
+++ b/components/ui/component-compare/component-compare/index.ts
@@ -1,2 +1,21 @@
 export { ComponentCompare } from './component-compare';
 export type { APIDiffResult, APIDiffChange, APIDiffDetail } from './component-compare';
+export { DiffModeProvider, useDiffMode } from './diff-mode-context';
+export type { DiffDisplayMode } from './diff-mode-context';
+export {
+  FileRegistryProvider,
+  useFileRegistry,
+  useFileRegistryRegister,
+  useAspectRegistryRegister,
+  useCompositionsRegistryRegister,
+} from './file-registry';
+export type { FileInfo } from './file-registry';
+export { CompareToolbar } from './compare-toolbar';
+export type { CompareToolbarProps, CompareViewMode, CompareGroupByOption, DiffMode } from './compare-toolbar';
+export { CompareSidebar } from './compare-sidebar';
+export type { CompareSidebarProps, CompareSidebarItem, CompareSidebarGroup } from './compare-sidebar';
+export { InlineComponentCompare, ComponentCompareHeader } from './component-compare';
+export type { InlineComponentCompareProps, ComponentCompareHeaderProps } from './component-compare';
+export { CompareDataProvider, useCompareData, COMPARE_PAGE_SIZE } from './compare-data-context';
+export type { CompareDataContextModel, CompareComponentData, ComponentComparePair } from './compare-data-context';
+export { RegistryFeeder } from './component-compare';
diff --git a/components/ui/component-compare/context/component-compare-context.ts b/components/ui/component-compare/context/component-compare-context.ts
index e7a2045b25e7..981e6cf30d82 100644
--- a/components/ui/component-compare/context/component-compare-context.ts
+++ b/components/ui/component-compare/context/component-compare-context.ts
@@ -1,6 +1,7 @@
 import type { ComponentCompareModel } from '@teambit/component.ui.component-compare.models.component-compare-model';
 import type { ComponentCompareState } from '@teambit/component.ui.component-compare.models.component-compare-state';
 import type { ComponentCompareHooks } from '@teambit/component.ui.component-compare.models.component-compare-hooks';
+import type { APIDiffResult } from '@teambit/semantics.ui.api-diff-view';
 import { createContext, useContext } from 'react';
 
 export type StateAndHooks = {
@@ -16,6 +17,8 @@ export type ComponentCompareContextType = ComponentCompareModel &
   StateAndHooks & {
     baseContext?: StateAndHooks;
     compareContext?: StateAndHooks;
+    /** API diff between base and compare — undefined while loading, null when not computable */
+    apiDiffResult?: APIDiffResult | null;
   } & ViewState;
 
 export const ComponentCompareContext: React.Context<ComponentCompareContextType | undefined> = createContext<
diff --git a/components/ui/component-compare/context/index.ts b/components/ui/component-compare/context/index.ts
index abb8312bab0b..59b1d6ba7ec4 100644
--- a/components/ui/component-compare/context/index.ts
+++ b/components/ui/component-compare/context/index.ts
@@ -1,2 +1,4 @@
 export { ComponentCompareContext, useComponentCompare } from './component-compare-context';
 export type { StateAndHooks, ComponentCompareContextType } from './component-compare-context';
+export { InlineCompareEmpty } from './inline-compare-empty';
+export type { InlineCompareEmptyProps } from './inline-compare-empty';
diff --git a/components/ui/component-compare/context/inline-compare-empty.tsx b/components/ui/component-compare/context/inline-compare-empty.tsx
new file mode 100644
index 000000000000..237db242ec82
--- /dev/null
+++ b/components/ui/component-compare/context/inline-compare-empty.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+
+export type InlineCompareEmptyProps = {
+  /** primary message, e.g. "No code changes" / "No changes to compare" */
+  message: string;
+  /** optional secondary line with more context */
+  hint?: string;
+  /**
+   * when both are provided, a base → compare version pill row is rendered. identical versions are
+   * tinted neutral to signal "same version", different ones are color-coded (base neutral, compare accent).
+   */
+  baseVersion?: string;
+  compareVersion?: string;
+};
+
+const ACCENT = 'var(--bit-accent-color, #6c5ce7)';
+const MUTED = 'var(--on-background-medium-color, #a0aec0)';
+const SECONDARY = 'var(--on-surface-medium-color, #707279)';
+const PRIMARY = 'var(--on-surface-color, #1a1a2e)';
+const BORDER = 'var(--border-medium-color, #e8ecf0)';
+const SURFACE = 'var(--surface-color, #fff)';
+
+function VersionPill({ version, tone }: { version: string; tone: 'neutral' | 'base' | 'compare' }) {
+  const accent = tone === 'compare';
+  return (
+    <span
+      style={{
+        fontFamily: 'var(--font-family-monospace, ui-monospace, SFMono-Regular, Menlo, monospace)',
+        fontSize: 13,
+        fontWeight: 600,
+        padding: '4px 10px',
+        borderRadius: 8,
+        border: `1px solid ${accent ? ACCENT : BORDER}`,
+        background: accent ? 'rgba(108, 92, 231, 0.06)' : SURFACE,
+        color: accent ? ACCENT : PRIMARY,
+        whiteSpace: 'nowrap',
+      }}
+    >
+      {version}
+    </span>
+  );
+}
+
+/**
+ * Shared blank state for the compare surfaces (inline tabs, the single-component compare page,
+ * and lane-compare). Renders in place of an empty body so a no-change comparison reads as an
+ * intentional "nothing changed" state instead of a blank pane.
+ */
+export function InlineCompareEmpty({ message, hint, baseVersion, compareVersion }: InlineCompareEmptyProps) {
+  const hasPills = !!baseVersion && !!compareVersion;
+  const identical = hasPills && baseVersion === compareVersion;
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 12,
+        padding: '48px 16px',
+        textAlign: 'center',
+      }}
+    >
+      <span style={{ fontSize: 15, fontWeight: 600, color: PRIMARY }}>{message}</span>
+
+      {hasPills && (
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            <VersionPill version={baseVersion as string} tone={identical ? 'neutral' : 'base'} />
+            <span style={{ color: MUTED, fontSize: 16 }}>→</span>
+            <VersionPill version={compareVersion as string} tone={identical ? 'neutral' : 'compare'} />
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 11, color: MUTED }}>
+            <span style={{ minWidth: 64 }}>base</span>
+            <span style={{ width: 16 }} />
+            <span style={{ minWidth: 64 }}>compare</span>
+          </div>
+        </div>
+      )}
+
+      {hint && <span style={{ fontSize: 13, color: SECONDARY, maxWidth: 440, lineHeight: 1.5 }}>{hint}</span>}
+    </div>
+  );
+}
diff --git a/components/ui/component-meta/component-overview.module.scss b/components/ui/component-meta/component-overview.module.scss
new file mode 100644
index 000000000000..18496f914178
--- /dev/null
+++ b/components/ui/component-meta/component-overview.module.scss
@@ -0,0 +1,122 @@
+@import '@teambit/base-ui.layout.breakpoints/_breakpoints.scss';
+@import '@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
+
+.componentTitle {
+  > h1 {
+    margin: 0;
+  }
+}
+
+.badgeContainer {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-top: 8px; // this is to align the badges to the title text as opposed to the title line
+
+  > * {
+    margin: 0 8px;
+  }
+}
+
+.subTitle {
+  white-space: break-spaces;
+}
+
+.titleRow {
+  margin-bottom: 20px;
+}
+
+.contentTabs {
+  margin-bottom: 16px;
+  min-width: 70%;
+  max-width: 100%;
+
+  @media screen and (max-width: $br-l) {
+    width: 100%;
+  }
+
+  .nav > div {
+    font-size: 12px;
+    padding: 6px 12px;
+  }
+
+  .tab {
+    border-bottom: 0;
+  }
+}
+
+.copyBox {
+  background: var(--background-color, #ffffff);
+  border-top-left-radius: 0;
+}
+
+.title {
+  letter-spacing: -1px;
+}
+
+.copyIcon {
+  font-size: var(--bit-p-lg);
+}
+
+.copyContainer {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+
+  > div {
+    display: flex;
+  }
+}
+
+.pkgManagerPlaceholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  background-color: var(--primary-surface-color, #f6f5fe);
+  padding: 6px;
+  border-radius: 6px;
+}
+
+.pkgManagerMenuItems {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  > div {
+    padding: 4px;
+
+    &:hover {
+      background-color: var(--primary-surface-color, #f6f5fe);
+    }
+  }
+}
+
+.pkgManagerMenu {
+  display: flex;
+  z-index: $modal-z-index;
+  border-radius: 6px;
+}
+
+.yarn {
+  height: 17px;
+}
+
+.npm {
+  width: 30px;
+}
+
+.pnpm {
+  height: 16px;
+}
+
+.bit {
+  font-size: var(--bit-p-lg, 16px);
+}
+
+.selected {
+  background-color: var(--primary-surface-color, #f6f5fe);
+}
diff --git a/components/ui/component-meta/component-overview.tsx b/components/ui/component-meta/component-overview.tsx
new file mode 100644
index 000000000000..f472923e0788
--- /dev/null
+++ b/components/ui/component-meta/component-overview.tsx
@@ -0,0 +1,310 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import type { ComponentDescriptor } from '@teambit/component-descriptor';
+import { textColumn } from '@teambit/base-ui.layout.page-frame';
+import { H1 } from '@teambit/documenter.ui.heading';
+import { LabelList } from '@teambit/documenter.ui.label-list';
+import { Section, type SectionProps } from '@teambit/documenter.ui.section';
+import { Dropdown } from '@teambit/evangelist.surfaces.dropdown';
+import { snapToSemver } from '@teambit/component-package-version';
+import { CopyBox } from '@teambit/documenter.ui.copy-box';
+import { Separator } from '@teambit/design.ui.separator';
+import { ContentTabs } from '@teambit/design.navigation.content-tabs';
+import type { ContentTab } from '@teambit/design.navigation.content-tabs';
+import { Subtitle } from '@teambit/documenter.ui.sub-title';
+import { isBrowser } from '@teambit/ui-foundation.ui.is-browser';
+import { Row } from '@teambit/base-react.layout.row';
+import { Icon } from '@teambit/evangelist.elements.icon';
+import type { ComponentModel } from '@teambit/component';
+import { BadgePosition } from '@teambit/docs';
+import type { TitleBadge } from '@teambit/docs';
+import { Tooltip } from '@teambit/design.ui.tooltip';
+
+import styles from './component-overview.module.scss';
+
+export type ComponentOverviewProps = {
+  displayName: string;
+  abstract?: string;
+  labels: string[];
+  packageName: string;
+  elementsUrl?: string;
+  titleBadges?: TitleBadge[];
+  componentDescriptor?: ComponentDescriptor;
+  component?: ComponentModel;
+  pkgManager?: 'npm' | 'yarn' | 'pnpm' | 'bit';
+} & SectionProps;
+
+export function ComponentOverview({
+  displayName,
+  abstract,
+  titleBadges,
+  labels,
+  packageName,
+  elementsUrl,
+  componentDescriptor,
+  component,
+  pkgManager = 'npm',
+  ...rest
+}: ComponentOverviewProps) {
+  const host = component?.host;
+  const isWorkspace = host === 'teambit.workspace/workspace';
+
+  const packageNameTabTitle = isWorkspace ? `Use package` : `Install package`;
+  const componentId = component?.id;
+  const componentIdVersion = componentId?.version ?? undefined;
+  const latestVersion = component?.latest ?? undefined;
+  const packageVersion = componentIdVersion === latestVersion ? '' : `@${snapToSemver(componentIdVersion as string)}`;
+
+  const [selectedPkgManager, setSelectedPkgManager] = React.useState(pkgManager);
+
+  const installCmd = useMemo(() => {
+    if (selectedPkgManager === 'yarn') return 'add';
+    if (selectedPkgManager === 'bit') return 'install';
+    return 'i';
+  }, [selectedPkgManager]);
+
+  const copyTextInstall = useMemo(
+    () => `${selectedPkgManager} ${installCmd} ${packageName}${packageVersion}`,
+    [selectedPkgManager, packageName, packageVersion, installCmd]
+  );
+
+  const copyTextImport = `bit import ${componentId?.toStringWithoutVersion() ?? ''}`;
+
+  const tooltipContent = useMemo(() => `Copy ${selectedPkgManager} install command`, [selectedPkgManager]);
+
+  const SelectedPkgManagerPlaceholder = useMemo(() => {
+    switch (selectedPkgManager) {
+      case 'npm':
+        return <img alt="npm-logo" className={styles.npm} src="https://static.bit.dev/brands/logo-npm-new.svg" />;
+      case 'pnpm':
+        return <img alt="pnpm-logo" className={styles.pnpm} src="https://static.bit.dev/brands/pnpm.svg" />;
+      case 'yarn':
+        return <img alt="yarn-logo" className={styles.yarn} src="https://static.bit.dev/brands/logo-yarn-text.svg" />;
+      case 'bit':
+        return <Icon className={styles.bit} of="bit-logo-mono" />;
+      default:
+        return null;
+    }
+  }, [selectedPkgManager]);
+
+  const tabsComponentId: ContentTab[] = [
+    {
+      component: function TabPackageName() {
+        return <span>{packageNameTabTitle}</span>;
+      },
+      content: isWorkspace ? (
+        <CopyBox className={styles.copyBox}>{packageName}</CopyBox>
+      ) : (
+        <CopyBox
+          className={styles.copyBox}
+          copyText={copyTextInstall}
+          Tooltip={({ children }) => (
+            <Tooltip placement="right" content={tooltipContent}>
+              {children}
+            </Tooltip>
+          )}
+          CopyIcon={
+            <Tooltip content={tooltipContent}>
+              <Icon className={styles.copyIcon} of="copy-cmp" />
+            </Tooltip>
+          }
+          CopyWidget={
+            <div className={styles.copyContainer}>
+              <Dropdown
+                className={styles.pkgManagerDropdown}
+                dropClass={styles.pkgManagerMenu}
+                placeholder={
+                  <div className={styles.pkgManagerPlaceholder}>
+                    {SelectedPkgManagerPlaceholder}
+                    <Icon of="fat-arrow-down" />
+                  </div>
+                }
+                clickOutside
+                clickPlaceholderToggles
+                position="bottom-start"
+                clickToggles
+              >
+                <div className={styles.pkgManagerMenuItems}>
+                  <div
+                    className={classNames(selectedPkgManager === 'npm' && styles.selected)}
+                    onClick={() => setSelectedPkgManager('npm')}
+                    role="button"
+                    tabIndex={0}
+                    onKeyDown={(e) => e.key === 'Enter' && setSelectedPkgManager('npm')}
+                    aria-label="Select npm package manager"
+                  >
+                    <img alt="npm-logo" className={styles.npm} src="https://static.bit.dev/brands/logo-npm-new.svg" />
+                  </div>
+                  <div
+                    className={classNames(selectedPkgManager === 'pnpm' && styles.selected)}
+                    onClick={() => setSelectedPkgManager('pnpm')}
+                    role="button"
+                    tabIndex={0}
+                    onKeyDown={(e) => e.key === 'Enter' && setSelectedPkgManager('pnpm')}
+                    aria-label="Select pnpm package manager"
+                  >
+                    <img alt="pnpm-logo" className={styles.pnpm} src="https://static.bit.dev/brands/pnpm.svg" />
+                  </div>
+                  <div
+                    className={classNames(selectedPkgManager === 'yarn' && styles.selected)}
+                    onClick={() => setSelectedPkgManager('yarn')}
+                    role="button"
+                    tabIndex={0}
+                    onKeyDown={(e) => e.key === 'Enter' && setSelectedPkgManager('yarn')}
+                    aria-label="Select yarn package manager"
+                  >
+                    <img
+                      alt="yarn-logo"
+                      className={styles.yarn}
+                      src="https://static.bit.dev/brands/logo-yarn-text.svg"
+                    />
+                  </div>
+                  <div
+                    className={classNames(selectedPkgManager === 'bit' && styles.selected)}
+                    onClick={() => setSelectedPkgManager('bit')}
+                    role="button"
+                    tabIndex={0}
+                    onKeyDown={(e) => e.key === 'Enter' && setSelectedPkgManager('bit')}
+                    aria-label="Select bit package manager"
+                  >
+                    <Icon className={styles.bit} of="bit-logo-mono" />
+                  </div>
+                </div>
+              </Dropdown>
+            </div>
+          }
+        >
+          {packageName}
+        </CopyBox>
+      ),
+    },
+    {
+      component: function TabComponentID() {
+        return <span>Modify component</span>;
+      },
+      content: isWorkspace ? (
+        <CopyBox className={styles.copyBox}>{componentId ? componentId.toStringWithoutVersion() : ''}</CopyBox>
+      ) : (
+        <CopyBox
+          className={styles.copyBox}
+          copyText={copyTextImport}
+          Tooltip={({ children }) => (
+            <Tooltip placement="right" content="copy bit import command">
+              {children}
+            </Tooltip>
+          )}
+          CopyIcon={
+            <div className={styles.copyContainer}>
+              <div>
+                <Icon className={styles.bit} of="bit-logo-mono" />
+              </div>
+              <div>
+                <Icon className={styles.copyIcon} of="copy-cmp" />
+              </div>
+            </div>
+          }
+        >
+          {componentId ? componentId.toStringWithoutVersion() : ''}
+        </CopyBox>
+      ),
+    },
+  ];
+
+  let finalElementsUrl = elementsUrl;
+  if (finalElementsUrl && !finalElementsUrl.startsWith('http')) {
+    const origin = isBrowser ? window.location.origin : undefined;
+    finalElementsUrl = origin && elementsUrl ? `${origin}${elementsUrl}` : undefined;
+    if (finalElementsUrl) {
+      tabsComponentId.push({
+        component: function TabElementUrl() {
+          return <span>Elements url</span>;
+        },
+        content: <CopyBox className={styles.copyBox}>{finalElementsUrl}</CopyBox>,
+      });
+    }
+  }
+
+  return (
+    <Section {...rest}>
+      <div className={textColumn}>
+        <Row className={styles.titleRow}>
+          <div className={styles.componentTitle}>
+            <H1 className={styles.title}>{displayName}</H1>
+          </div>
+          <BadgeSection
+            position={BadgePosition.Title}
+            componentDescriptor={componentDescriptor}
+            component={component}
+            badges={titleBadges}
+          />
+        </Row>
+        <Row>
+          {abstract && (
+            <>
+              <Subtitle className={styles.subTitle}>{abstract}</Subtitle>
+              <BadgeSection
+                position={BadgePosition.SubTitle}
+                componentDescriptor={componentDescriptor}
+                component={component}
+                badges={titleBadges}
+              />
+            </>
+          )}
+        </Row>
+        <Row>
+          <LabelList>{labels}</LabelList>
+          <BadgeSection
+            position={BadgePosition.Labels}
+            componentDescriptor={componentDescriptor}
+            component={component}
+            badges={titleBadges}
+          />
+        </Row>
+        <Row>
+          <div className={styles.contentTabs}>
+            <ContentTabs priority="folder" tabs={tabsComponentId} navClassName={styles.nav} tabClassName={styles.tab} />
+          </div>
+          <BadgeSection
+            position={BadgePosition.Package}
+            componentDescriptor={componentDescriptor}
+            component={component}
+            badges={titleBadges}
+          />
+        </Row>
+      </div>
+      <Separator isPresentational />
+    </Section>
+  );
+}
+
+export type BadgeSectionProps = {
+  badges: TitleBadge[] | undefined;
+  position: BadgePosition;
+  componentDescriptor?: ComponentDescriptor;
+  component?: ComponentModel;
+};
+export function BadgeSection({ badges, position, componentDescriptor, component }: BadgeSectionProps) {
+  return (
+    <div className={styles.badgeContainer}>
+      {badges
+        // eslint-disable-next-line react/prop-types
+        ?.filter((badge) => {
+          return (
+            (position === BadgePosition.Title && !badge.position) || // default position is title
+            badge.position === position
+          );
+        })
+        // @ts-ignore
+        ?.sort((a, b) => a?.weight - b?.weight)
+        ?.map((titleBadge, index) => {
+          return (
+            <titleBadge.component
+              key={index}
+              componentDescriptor={componentDescriptor}
+              legacyComponentModel={component}
+            />
+          );
+        })}
+    </div>
+  );
+}
diff --git a/components/ui/component-meta/index.ts b/components/ui/component-meta/index.ts
new file mode 100644
index 000000000000..671da270d6a6
--- /dev/null
+++ b/components/ui/component-meta/index.ts
@@ -0,0 +1,2 @@
+export { ComponentOverview, BadgeSection } from './component-overview';
+export type { ComponentOverviewProps, BadgeSectionProps } from './component-overview';
diff --git a/scopes/workspace/workspace/ui/workspace/workspace-overview/card-overlays.module.scss b/components/ui/components-overview/card-overlays.module.scss
similarity index 100%
rename from scopes/workspace/workspace/ui/workspace/workspace-overview/card-overlays.module.scss
rename to components/ui/components-overview/card-overlays.module.scss
diff --git a/scopes/workspace/workspace/ui/workspace/workspace-overview/card-overlays.tsx b/components/ui/components-overview/card-overlays.tsx
similarity index 100%
rename from scopes/workspace/workspace/ui/workspace/workspace-overview/card-overlays.tsx
rename to components/ui/components-overview/card-overlays.tsx
diff --git a/scopes/workspace/workspace/ui/workspace/workspace-overview/workspace-filter-panel.tsx b/components/ui/components-overview/components-overview-filter-panel.tsx
similarity index 91%
rename from scopes/workspace/workspace/ui/workspace/workspace-overview/workspace-filter-panel.tsx
rename to components/ui/components-overview/components-overview-filter-panel.tsx
index 30dfa26e7281..4cbdcb2a78e0 100644
--- a/scopes/workspace/workspace/ui/workspace/workspace-overview/workspace-filter-panel.tsx
+++ b/components/ui/components-overview/components-overview-filter-panel.tsx
@@ -1,10 +1,10 @@
 import React, { useMemo } from 'react';
 import { ToggleButton } from '@teambit/design.inputs.toggle-button';
 import { BaseFilter } from '@teambit/component.filters.base-filter';
-import type { WorkspaceItem, AggregationType } from './workspace-overview.types';
-import styles from './workspace-overview.module.scss';
+import type { WorkspaceItem, AggregationType } from './components-overview.types';
+import styles from './components-overview.module.scss';
 
-export interface WorkspaceFilterPanelProps {
+export interface ComponentsOverviewFilterPanelProps {
   aggregation: AggregationType;
   onAggregationChange: (agg: AggregationType) => void;
   availableAggregations: AggregationType[];
@@ -21,7 +21,7 @@ const LABELS: Record<AggregationType, string> = {
   none: 'None',
 };
 
-export function WorkspaceFilterPanel({
+export function ComponentsOverviewFilterPanel({
   aggregation,
   onAggregationChange,
   availableAggregations,
@@ -30,7 +30,7 @@ export function WorkspaceFilterPanel({
   onNamespacesChange,
   activeScopes,
   onScopesChange,
-}: WorkspaceFilterPanelProps) {
+}: ComponentsOverviewFilterPanelProps) {
   const namespaceOptions = useMemo(
     () =>
       [...new Set(items.map((i) => i.component.id.namespace || '/'))].map((v) => ({
diff --git a/components/ui/components-overview/components-overview-skeleton.module.scss b/components/ui/components-overview/components-overview-skeleton.module.scss
new file mode 100644
index 000000000000..5537b2577393
--- /dev/null
+++ b/components/ui/components-overview/components-overview-skeleton.module.scss
@@ -0,0 +1,114 @@
+/* The container, sticky header, command bar, content padding and card grid are reused from
+   components-overview.module.scss so the skeleton is pixel-identical to the real overview. Only the
+   placeholder shapes live here. */
+
+/* ---- Filter-bar placeholders ---- */
+
+.pill {
+  width: 120px;
+  height: 32px;
+  border-radius: 8px;
+  background: var(--surface01-color, color-mix(in srgb, var(--on-background-color, #000) 6%, transparent));
+}
+
+.toggle {
+  margin-left: auto;
+  width: 96px;
+  height: 32px;
+  border-radius: 8px;
+  background: var(--surface01-color, color-mix(in srgb, var(--on-background-color, #000) 6%, transparent));
+}
+
+/* ---- Card placeholder — mirrors hope-component-card.module.scss ---- */
+
+.card {
+  position: relative;
+  border-radius: 10px;
+  overflow: hidden;
+  background: var(--surface-color);
+  border: 1px solid var(--border-medium-color);
+  animation: fadeIn 0.4s ease both;
+}
+
+.preview {
+  position: relative;
+  height: 180px;
+  overflow: hidden;
+  background: var(--surface-color);
+  border-bottom: 1px solid var(--border-medium-color);
+}
+
+.footer {
+  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.scopeBadge {
+  width: 20px;
+  height: 20px;
+  border-radius: 5px;
+  flex-shrink: 0;
+  background: var(--surface02-color, var(--surface01-color));
+}
+
+.name {
+  flex: 1;
+  min-width: 0;
+  height: 11px;
+  border-radius: 4px;
+  background: var(--surface02-color, var(--surface01-color));
+  // keep names visually varied so the row doesn't read as a solid bar
+  max-width: 62%;
+}
+
+.hash {
+  width: 42px;
+  height: 11px;
+  border-radius: 4px;
+  background: var(--surface01-color);
+  flex-shrink: 0;
+}
+
+/* ---- Shimmer sweep across the preview block ---- */
+
+.shimmer {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    color-mix(in srgb, var(--on-background-color, #000) 4%, transparent) 50%,
+    transparent 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.4s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .card,
+  .shimmer {
+    animation: none;
+  }
+}
diff --git a/components/ui/components-overview/components-overview-skeleton.tsx b/components/ui/components-overview/components-overview-skeleton.tsx
new file mode 100644
index 000000000000..8dce00b3ebc1
--- /dev/null
+++ b/components/ui/components-overview/components-overview-skeleton.tsx
@@ -0,0 +1,60 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import classnames from 'classnames';
+import { ComponentGrid } from '@teambit/explorer.ui.gallery.component-grid';
+import overviewStyles from './components-overview.module.scss';
+import styles from './components-overview-skeleton.module.scss';
+
+export type ComponentsOverviewSkeletonProps = {
+  /** number of placeholder cards to render. default: 12 */
+  count?: number;
+  /** replace the default filter-bar placeholder with custom header content */
+  header?: ReactNode;
+  className?: string;
+};
+
+/**
+ * Loading placeholder for the components grid. Renders through the SAME `ComponentGrid` + `.cardGrid`
+ * class the real `ComponentsOverview` uses, so the column count / card size is pixel-identical and the
+ * grid doesn't reflow when live data lands. The card body mirrors `HopeComponentCard` (180px preview
+ * block + footer row with scope badge, name, hash). Shown while the light workspace query is in
+ * flight; reusable by any view that renders `ComponentsOverview` (workspace overview, lane overview).
+ */
+export function ComponentsOverviewSkeleton({ count = 12, header, className }: ComponentsOverviewSkeletonProps) {
+  return (
+    <div className={classnames(overviewStyles.container, className)} aria-busy="true" aria-live="polite">
+      <div className={overviewStyles.stickyHeader}>
+        {header || (
+          <div className={overviewStyles.commandBar}>
+            <div className={overviewStyles.leftCluster}>
+              <span className={styles.pill} />
+              <span className={styles.pill} />
+            </div>
+            <span className={styles.toggle} />
+          </div>
+        )}
+      </div>
+      <div className={overviewStyles.content}>
+        <ComponentGrid className={overviewStyles.cardGrid}>
+          {Array.from({ length: count }).map((_, index) => (
+            <div
+              key={index}
+              className={styles.card}
+              // staggered fade so the grid reads as "loading", not frozen
+              style={{ animationDelay: `${(index % 4) * 70}ms` }}
+            >
+              <div className={styles.preview}>
+                <div className={styles.shimmer} />
+              </div>
+              <div className={styles.footer}>
+                <span className={styles.scopeBadge} />
+                <span className={styles.name} />
+                <span className={styles.hash} />
+              </div>
+            </div>
+          ))}
+        </ComponentGrid>
+      </div>
+    </div>
+  );
+}
diff --git a/scopes/workspace/workspace/ui/workspace/workspace-overview/workspace-overview.module.scss b/components/ui/components-overview/components-overview.module.scss
similarity index 59%
rename from scopes/workspace/workspace/ui/workspace/workspace-overview/workspace-overview.module.scss
rename to components/ui/components-overview/components-overview.module.scss
index 3cf92249f348..04eb8590b1a5 100644
--- a/scopes/workspace/workspace/ui/workspace/workspace-overview/workspace-overview.module.scss
+++ b/components/ui/components-overview/components-overview.module.scss
@@ -11,6 +11,14 @@
   padding: 20px 40px 80px;
 }
 
+.stickyHeader {
+  position: sticky;
+  top: 0;
+  z-index: $modal-z-index - 1;
+  background: color-mix(in srgb, var(--bit-accent-color, #6c5ce7) 3%, var(--background-color, #fff));
+  border-bottom: 1px solid var(--border-medium-color);
+}
+
 /* ---- Command bar ---- */
 
 .commandBar {
@@ -20,11 +28,6 @@
   gap: 12px;
   flex-wrap: wrap;
   padding: 12px 40px;
-  background: color-mix(in srgb, var(--bit-accent-color, #6c5ce7) 3%, var(--background-color, #fff));
-  border-bottom: 1px solid var(--border-medium-color);
-  position: sticky;
-  top: 0;
-  z-index: $modal-z-index - 1;
 }
 
 .leftCluster {
@@ -32,6 +35,7 @@
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
+  min-width: 0; // critical: lets children shrink instead of overflow
 }
 
 .rightCluster {
@@ -39,6 +43,7 @@
   align-items: center;
   gap: 8px;
   margin-left: auto;
+  min-width: 0; // same reason — the ToggleButton was overflowing instead of wrapping
 }
 
 .aggToggle {
@@ -52,6 +57,7 @@
 .commandBar :global(.baseFilter) {
   max-width: 220px;
   height: 32px;
+  min-width: 0; // lets the filter shrink with its parent on narrow viewports
 }
 
 .commandBar :global(.control) {
@@ -68,6 +74,40 @@
   box-shadow: 0 24px 60px -12px rgba(20, 0, 104, 0.2);
 }
 
+/* ---- Mobile layout ----
+   On narrow viewports the filter dropdowns and the aggregation toggle were rendering side-by-side
+   in a row that couldn't fit, so each was truncating mid-word ("Namespa", "Sco…") and the toggle
+   was wrapping over the filters. Stack the two clusters vertically and let each take the full
+   available width. The base-filter `max-width: 220px` cap is removed at this breakpoint so the
+   pill expands to whatever the parent allows. */
+@media (max-width: 720px) {
+  .commandBar {
+    padding: 12px 16px;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .leftCluster,
+  .rightCluster {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  .leftCluster :global(.baseFilter) {
+    flex: 1 1 0;
+    max-width: none;
+    min-width: 120px;
+  }
+
+  .rightCluster {
+    overflow-x: auto;
+  }
+
+  .aggToggle {
+    width: 100%;
+  }
+}
+
 /* ---- Section ---- */
 
 .section {
@@ -76,7 +116,7 @@
 
 .sectionHeader {
   position: sticky;
-  top: 57px;
+  top: var(--components-overview-sticky-height, 57px);
   z-index: $nav-z-index;
   background: var(--background-color);
   padding: 12px 0 18px;
diff --git a/components/ui/components-overview/components-overview.tsx b/components/ui/components-overview/components-overview.tsx
new file mode 100644
index 000000000000..3b9f63aa6f8b
--- /dev/null
+++ b/components/ui/components-overview/components-overview.tsx
@@ -0,0 +1,170 @@
+import type { ReactNode } from 'react';
+import React, { useMemo, useRef, useLayoutEffect } from 'react';
+import classnames from 'classnames';
+import { ComponentGrid } from '@teambit/explorer.ui.gallery.component-grid';
+import compact from 'lodash.compact';
+import { ScopeID } from '@teambit/scopes.scope-id';
+import { useCloudScopes } from '@teambit/cloud.hooks.use-cloud-scopes';
+import type { ComponentModel } from '@teambit/component';
+import type { ComponentDescriptor } from '@teambit/component-descriptor';
+import { useComponentsAggregation } from './use-components-aggregation';
+import { useQueryParamWithDefault, useListParamWithDefault } from './use-query-param-with-default';
+import { NamespaceHeader } from './namespace-header';
+import { HopeComponentCard } from './hope-component-card';
+import type { AggregationType, WorkspaceItem } from './components-overview.types';
+import { ComponentsOverviewFilterPanel } from './components-overview-filter-panel';
+import styles from './components-overview.module.scss';
+
+export type ComponentsOverviewProps = {
+  components: ComponentModel[];
+  componentDescriptors: ComponentDescriptor[];
+  /** link target for a card. Default: `${id.fullName}?scope=${id.scope}` */
+  getHref?: (component: ComponentModel) => string;
+  /** rendered above the filter command bar */
+  header?: ReactNode;
+  /** rendered inside the content container, after the sections */
+  footer?: ReactNode;
+  /** rendered when the filtered set is empty */
+  emptyState?: ReactNode;
+  /** localStorage key prefix for persisted filter/aggregation prefs */
+  storageNamespace?: string;
+  /** forwarded to HopeComponentCard */
+  showPreview?: boolean;
+  className?: string;
+};
+
+export function ComponentsOverview({
+  components,
+  componentDescriptors,
+  getHref,
+  header,
+  footer,
+  emptyState,
+  storageNamespace = 'components-overview',
+  showPreview,
+  className,
+}: ComponentsOverviewProps) {
+  const storageKeyPrefix = `${storageNamespace}:`;
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const stickyRef = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    const containerEl = containerRef.current;
+    const stickyEl = stickyRef.current;
+    if (!containerEl || !stickyEl) return undefined;
+    const apply = () => {
+      containerEl.style.setProperty('--components-overview-sticky-height', `${stickyEl.offsetHeight}px`);
+    };
+    apply();
+    const observer = new ResizeObserver(apply);
+    observer.observe(stickyEl);
+    return () => observer.disconnect();
+  }, []);
+
+  const uniqueScopes = useMemo(() => [...new Set(components.map((c) => c.id.scope))], [components]);
+  const { cloudScopes } = useCloudScopes(uniqueScopes);
+  const cloudMap = useMemo(() => new Map((cloudScopes || []).map((s) => [s.id.toString(), s])), [cloudScopes]);
+  const compDescriptorMap = useMemo(
+    () => new Map(componentDescriptors.map((d) => [d.id.toString(), d])),
+    [componentDescriptors]
+  );
+
+  const items: WorkspaceItem[] = useMemo(
+    () =>
+      compact(
+        components.map((component) => {
+          if (component.deprecation?.isDeprecate) return null;
+          const descriptor = compDescriptorMap.get(component.id.toString());
+          if (!descriptor) return null;
+          const cloudScope = cloudMap.get(component.id.scope);
+          const scope =
+            cloudScope ||
+            (ScopeID.isValid(component.id.scope) && { id: ScopeID.fromString(component.id.scope) }) ||
+            undefined;
+          return {
+            component,
+            componentDescriptor: descriptor,
+            scope: scope
+              ? {
+                  id: scope.id,
+                  icon: (scope as any).icon,
+                  backgroundIconColor: (scope as any).backgroundIconColor,
+                }
+              : undefined,
+          };
+        })
+      ),
+    [components, compDescriptorMap, cloudMap]
+  );
+
+  const [aggregation, setAggregation] = useQueryParamWithDefault<AggregationType>('aggregation', 'namespaces', {
+    storageKeyPrefix,
+  });
+  const [activeNamespaces, setActiveNamespaces] = useListParamWithDefault('ns', { storageKeyPrefix });
+  const [activeScopes, setActiveScopes] = useListParamWithDefault('scopes', { storageKeyPrefix });
+
+  const filters = useMemo(
+    () => ({ namespaces: activeNamespaces, scopes: activeScopes, statuses: new Set() as any }),
+    [activeNamespaces, activeScopes]
+  );
+
+  const { groups, groupType, availableAggregations, filteredCount } = useComponentsAggregation(
+    items,
+    aggregation,
+    filters
+  );
+
+  return (
+    <div ref={containerRef} className={classnames(styles.container, className)}>
+      <div ref={stickyRef} className={styles.stickyHeader}>
+        {header}
+
+        <ComponentsOverviewFilterPanel
+          aggregation={aggregation}
+          onAggregationChange={setAggregation}
+          availableAggregations={availableAggregations}
+          items={items}
+          activeNamespaces={activeNamespaces}
+          onNamespacesChange={setActiveNamespaces}
+          activeScopes={activeScopes}
+          onScopesChange={setActiveScopes}
+        />
+      </div>
+
+      <div className={styles.content}>
+        {filteredCount === 0 && emptyState}
+
+        {groups.map((group) => (
+          <section key={group.name} className={styles.section}>
+            {groupType !== 'none' && (
+              <div className={styles.sectionHeader}>
+                <NamespaceHeader
+                  namespace={group.name}
+                  items={group.items}
+                  scopeIcon={group.scopeIcon}
+                  scopeIconColor={group.scopeIconColor}
+                />
+              </div>
+            )}
+
+            <ComponentGrid className={styles.cardGrid}>
+              {group.items.map((item) => (
+                <HopeComponentCard
+                  key={item.component.id.toString()}
+                  component={item.component}
+                  componentDescriptor={item.componentDescriptor}
+                  scope={item.scope as any}
+                  showPreview={showPreview}
+                  getHref={getHref}
+                />
+              ))}
+            </ComponentGrid>
+          </section>
+        ))}
+
+        {footer}
+      </div>
+    </div>
+  );
+}
diff --git a/scopes/workspace/workspace/ui/workspace/workspace-overview/workspace-overview.types.ts b/components/ui/components-overview/components-overview.types.ts
similarity index 100%
rename from scopes/workspace/workspace/ui/workspace/workspace-overview/workspace-overview.types.ts
rename to components/ui/components-overview/components-overview.types.ts
diff --git a/scopes/workspace/workspace/ui/workspace/workspace-overview/filter-utils.ts b/components/ui/components-overview/filter-utils.ts
similarity index 94%
rename from scopes/workspace/workspace/ui/workspace/workspace-overview/filter-utils.ts
rename to components/ui/components-overview/filter-utils.ts
index 5a5d3615a260..f1d20883d267 100644
--- a/scopes/workspace/workspace/ui/workspace/workspace-overview/filter-utils.ts
+++ b/components/ui/components-overview/filter-utils.ts
@@ -1,4 +1,4 @@
-import type { WorkspaceItem, ComponentStatus } from './workspace-overview.types';
+import type { WorkspaceItem, ComponentStatus } from './components-overview.types';
 
 export interface ActiveFilters {
   namespaces: string[];
diff --git a/scopes/workspace/workspace/ui/workspace/workspace-overview/hope-component-card.module.scss b/components/ui/components-overview/hope-component-card.module.scss
similarity index 100%
rename from scopes/workspace/workspace/ui/workspace/workspace-overview/hope-component-card.module.scss
rename to components/ui/components-overview/hope-component-card.module.scss
diff --git a/scopes/workspace/workspace/ui/workspace/workspace-overview/hope-component-card.tsx b/components/ui/components-overview/hope-component-card.tsx
similarity index 96%
rename from scopes/workspace/workspace/ui/workspace/workspace-overview/hope-component-card.tsx
rename to components/ui/components-overview/hope-component-card.tsx
index 4aeac2ac1bb5..cbce42686d6a 100644
--- a/scopes/workspace/workspace/ui/workspace/workspace-overview/hope-component-card.tsx
+++ b/components/ui/components-overview/hope-component-card.tsx
@@ -16,6 +16,7 @@ export type HopeComponentCardProps = {
   componentDescriptor: ComponentDescriptor;
   scope?: { id: ScopeID; icon?: string; backgroundIconColor?: string };
   showPreview?: boolean;
+  getHref?: (component: ComponentModel) => string;
 };
 
 export function HopeComponentCard({
@@ -23,6 +24,7 @@ export function HopeComponentCard({
   componentDescriptor,
   scope,
   showPreview: showPreviewProp,
+  getHref,
 }: HopeComponentCardProps) {
   const [shouldShowPreview, setShouldShowPreview] = useState(Boolean(showPreviewProp));
   const prevServerUrlRef = useRef(component.server?.url);
@@ -47,7 +49,7 @@ export function HopeComponentCard({
   const isQueued = status === 'queued';
   const isChanged = status === 'changed';
 
-  const href = `${component.id.fullName}?scope=${component.id.scope}`;
+  const href = getHref ? getHref(component) : `${component.id.fullName}?scope=${component.id.scope}`;
 
   const loadPreviewVisible = component.compositions.length > 0 && !isBuilding && !shouldShowPreview;
 
diff --git a/components/ui/components-overview/index.ts b/components/ui/components-overview/index.ts
new file mode 100644
index 000000000000..be0261814a92
--- /dev/null
+++ b/components/ui/components-overview/index.ts
@@ -0,0 +1,18 @@
+export { ComponentsOverview } from './components-overview';
+export type { ComponentsOverviewProps } from './components-overview';
+export { ComponentsOverviewSkeleton } from './components-overview-skeleton';
+export type { ComponentsOverviewSkeletonProps } from './components-overview-skeleton';
+export { HopeComponentCard } from './hope-component-card';
+export type { HopeComponentCardProps } from './hope-component-card';
+export { NamespaceHeader } from './namespace-header';
+export { ComponentsOverviewFilterPanel } from './components-overview-filter-panel';
+export { useComponentsAggregation } from './use-components-aggregation';
+export { useQueryParamWithDefault, useListParamWithDefault } from './use-query-param-with-default';
+export type {
+  WorkspaceItem,
+  AggregationType,
+  AggregationGroup,
+  AggregationResult,
+  ComponentStatus,
+  Density,
+} from './components-overview.types';
diff --git a/scopes/workspace/workspace/ui/workspace/workspace-overview/namespace-header.module.scss b/components/ui/components-overview/namespace-header.module.scss
similarity index 100%
rename from scopes/workspace/workspace/ui/workspace/workspace-overview/namespace-header.module.scss
rename to components/ui/components-overview/namespace-header.module.scss
diff --git a/scopes/workspace/workspace/ui/workspace/workspace-overview/namespace-header.tsx b/components/ui/components-overview/namespace-header.tsx
similarity index 96%
rename from scopes/workspace/workspace/ui/workspace/workspace-overview/namespace-header.tsx
rename to components/ui/components-overview/namespace-header.tsx
index cd33f22e877a..116ac07e1cec 100644
--- a/scopes/workspace/workspace/ui/workspace/workspace-overview/namespace-header.tsx
+++ b/components/ui/components-overview/namespace-header.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { getComponentStatus } from './filter-utils';
-import type { WorkspaceItem } from './workspace-overview.types';
+import type { WorkspaceItem } from './components-overview.types';
 import styles from './namespace-header.module.scss';
 
 export interface NamespaceHeaderProps {
diff --git a/scopes/workspace/workspace/ui/workspace/workspace-overview/namespace-sort.ts b/components/ui/components-overview/namespace-sort.ts
similarity index 95%
rename from scopes/workspace/workspace/ui/workspace/workspace-overview/namespace-sort.ts
rename to components/ui/components-overview/namespace-sort.ts
index 4b12b2f8c818..1f01ff8eb2db 100644
--- a/scopes/workspace/workspace/ui/workspace/workspace-overview/namespace-sort.ts
+++ b/components/ui/components-overview/namespace-sort.ts
@@ -1,4 +1,4 @@
-import type { WorkspaceItem } from './workspace-overview.types';
+import type { WorkspaceItem } from './components-overview.types';
 
 export const PRIORITY_HIGH = ['ui', 'pages'] as string[];
 export const PRIORITY_MED = ['design'] as string[];
diff --git a/scopes/workspace/workspace/ui/workspace/workspace-overview/use-workspace-aggregation.ts b/components/ui/components-overview/use-components-aggregation.ts
similarity index 95%
rename from scopes/workspace/workspace/ui/workspace/workspace-overview/use-workspace-aggregation.ts
rename to components/ui/components-overview/use-components-aggregation.ts
index 5cd9eab9e747..b414ebf12a07 100644
--- a/scopes/workspace/workspace/ui/workspace/workspace-overview/use-workspace-aggregation.ts
+++ b/components/ui/components-overview/use-components-aggregation.ts
@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
 import { sortNamespacesAdvanced, sortItemsByNamespace } from './namespace-sort';
 import { filterItems, type ActiveFilters } from './filter-utils';
-import type { WorkspaceItem, AggregationType, AggregationGroup, AggregationResult } from './workspace-overview.types';
+import type { WorkspaceItem, AggregationType, AggregationGroup, AggregationResult } from './components-overview.types';
 
-export function useWorkspaceAggregation(
+export function useComponentsAggregation(
   items: WorkspaceItem[],
   aggregation: AggregationType,
   filters: ActiveFilters
diff --git a/scopes/workspace/workspace/ui/workspace/workspace-overview/use-query-param-with-default.ts b/components/ui/components-overview/use-query-param-with-default.ts
similarity index 85%
rename from scopes/workspace/workspace/ui/workspace/workspace-overview/use-query-param-with-default.ts
rename to components/ui/components-overview/use-query-param-with-default.ts
index 747ef59c70d0..f09a05656157 100644
--- a/scopes/workspace/workspace/ui/workspace/workspace-overview/use-query-param-with-default.ts
+++ b/components/ui/components-overview/use-query-param-with-default.ts
@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
-const STORAGE_KEY_PREFIX = 'workspace-overview:';
+const DEFAULT_STORAGE_KEY_PREFIX = 'components-overview:';
 
 export interface QueryParamOptions {
   /** persist value to localStorage across sessions. Default: true */
@@ -11,11 +11,11 @@ export interface QueryParamOptions {
 export function useQueryParamWithDefault<T extends string>(
   paramName: string,
   fallback: T,
-  options: QueryParamOptions = {}
+  options: QueryParamOptions & { storageKeyPrefix?: string } = {}
 ): [T, (value: T | null) => void] {
-  const { persist = true } = options;
+  const { persist = true, storageKeyPrefix = DEFAULT_STORAGE_KEY_PREFIX } = options;
   const [searchParams, setSearchParams] = useSearchParams();
-  const storageKey = STORAGE_KEY_PREFIX + paramName;
+  const storageKey = storageKeyPrefix + paramName;
 
   const value = useMemo((): T => {
     const urlValue = searchParams.get(paramName);
@@ -51,11 +51,11 @@ export function useQueryParamWithDefault<T extends string>(
 
 export function useListParamWithDefault(
   paramName: string,
-  options: QueryParamOptions = {}
+  options: QueryParamOptions & { storageKeyPrefix?: string } = {}
 ): [string[], (values: string[]) => void] {
-  const { persist = false } = options;
+  const { persist = false, storageKeyPrefix = DEFAULT_STORAGE_KEY_PREFIX } = options;
   const [searchParams, setSearchParams] = useSearchParams();
-  const storageKey = STORAGE_KEY_PREFIX + paramName;
+  const storageKey = storageKeyPrefix + paramName;
 
   const values = useMemo((): string[] => {
     const urlValue = searchParams.get(paramName);
diff --git a/components/ui/deps-diff-table/deps-diff-table.module.scss b/components/ui/deps-diff-table/deps-diff-table.module.scss
new file mode 100644
index 000000000000..0b3b5abaddbf
--- /dev/null
+++ b/components/ui/deps-diff-table/deps-diff-table.module.scss
@@ -0,0 +1,114 @@
+$border-color: var(--border-medium-color, #e8ecf0);
+$text-primary: var(--on-surface-color, #2b2b2b);
+$text-secondary: var(--on-surface-medium-color, #707279);
+$text-muted: var(--on-background-medium-color, #a0aec0);
+$code-font: 'JetBrains Mono', ui-monospace, monospace;
+
+.container {
+  overflow-x: auto;
+  width: 100%;
+}
+
+.empty {
+  padding: 16px;
+  text-align: center;
+  color: $text-muted;
+  font-size: 14px;
+  font-style: italic;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  color: $text-primary;
+  text-align: left;
+  white-space: pre;
+}
+
+.headerRow {
+  th {
+    padding: 12px;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    vertical-align: top;
+    border-bottom: 1px solid $border-color;
+  }
+}
+
+.row {
+  td {
+    padding: 12px;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    vertical-align: middle;
+    border-bottom: 1px solid var(--border-light-color, rgba(0, 0, 0, 0.04));
+  }
+
+  &:hover td {
+    background: var(--surface-neutral-hover-color, rgba(0, 0, 0, 0.015));
+  }
+}
+
+.statusCol {
+  width: 32px;
+  text-align: center;
+}
+
+.depCol {
+  // takes remaining space
+}
+
+.depId {
+  color: $text-primary;
+  font-size: 14px;
+}
+
+.depLifecycle {
+  margin-left: 8px;
+  font-size: 14px;
+  padding: 4px;
+  border-radius: 8px;
+  background: var(--surface-neutral-color, #f4f5f6);
+  border: 1px solid var(--border-light-color, #ededed);
+  color: $text-secondary;
+}
+
+.versionCol {
+  font-size: 14px;
+  color: $text-secondary;
+  min-width: 100px;
+}
+
+.new {
+  color: var(--positive-color, #37b26c);
+}
+.deleted {
+  color: var(--negative-color, #e62e5c);
+}
+.modified {
+  color: var(--process-color, #0984e3);
+}
+
+.versionWithIcon {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+}
+
+.fixedWidthVersion {
+  display: inline-block;
+  min-width: 80px;
+}
+
+.compareUrl {
+  display: inline-flex;
+  text-decoration: none;
+}
+
+.compareIcon {
+  display: inline-flex;
+  margin-left: 12px;
+  vertical-align: middle;
+}
diff --git a/components/ui/deps-diff-table/deps-diff-table.tsx b/components/ui/deps-diff-table/deps-diff-table.tsx
new file mode 100644
index 000000000000..6cad9163d712
Binary files /dev/null and b/components/ui/deps-diff-table/deps-diff-table.tsx differ
diff --git a/components/ui/deps-diff-table/index.ts b/components/ui/deps-diff-table/index.ts
new file mode 100644
index 000000000000..cdfddad8df67
--- /dev/null
+++ b/components/ui/deps-diff-table/index.ts
@@ -0,0 +1,2 @@
+export { DepsDiffTable, computeDepsDiff } from './deps-diff-table';
+export type { DepsDiffTableProps, DepDiffEntry, DepStatus, RawDep } from './deps-diff-table';
diff --git a/components/ui/diff-viewer/diff-model.ts b/components/ui/diff-viewer/diff-model.ts
new file mode 100644
index 000000000000..eef3afe82a42
--- /dev/null
+++ b/components/ui/diff-viewer/diff-model.ts
@@ -0,0 +1,287 @@
+import { diffLines } from 'diff';
+
+export type DiffLineType = 'context' | 'add' | 'del';
+
+/** one line in the diff, carrying its old/new line numbers and any intra-line changed char ranges. */
+export type DiffLineItem = {
+  type: DiffLineType;
+  oldLn?: number;
+  newLn?: number;
+  text: string;
+  /** half-open `[start, end)` character ranges that actually changed (paired add/del lines only). */
+  intra?: Array<[number, number]>;
+};
+
+/** a contiguous block of rendered lines, or a collapsed gap of unchanged lines that can be expanded. */
+export type DiffSection =
+  | { kind: 'lines'; items: DiffLineItem[] }
+  | { kind: 'gap'; id: string; hidden: DiffLineItem[] };
+
+export type DiffStats = { additions: number; deletions: number };
+
+const DEFAULT_CONTEXT = 3;
+
+/**
+ * Compute a full, line-aligned diff of two file contents — every line is present (context included),
+ * with old/new line numbers assigned and intra-line changed ranges filled in for paired add/del
+ * lines. Keeping the complete line list (rather than only hunks) lets collapsed gaps be expanded
+ * later without recomputing.
+ */
+export function computeDiffLines(oldContent: string, newContent: string): DiffLineItem[] {
+  const parts = diffLines(oldContent ?? '', newContent ?? '');
+  const items: DiffLineItem[] = [];
+  let oldLn = 1;
+  let newLn = 1;
+
+  for (const part of parts) {
+    const lines = part.value.split('\n');
+    // a trailing newline produces a spurious empty final element — drop it.
+    if (lines.length > 0 && lines[lines.length - 1] === '') lines.pop();
+    for (const text of lines) {
+      if (part.added) items.push({ type: 'add', newLn: newLn++, text });
+      else if (part.removed) items.push({ type: 'del', oldLn: oldLn++, text });
+      else items.push({ type: 'context', oldLn: oldLn++, newLn: newLn++, text });
+    }
+  }
+
+  fillIntraLineRanges(items);
+  return items;
+}
+
+export function statsFromItems(items: DiffLineItem[]): DiffStats {
+  let additions = 0;
+  let deletions = 0;
+  for (const it of items) {
+    if (it.type === 'add') additions++;
+    else if (it.type === 'del') deletions++;
+  }
+  return { additions, deletions };
+}
+
+/**
+ * Within each change block (a run of deletions immediately followed by a run of additions), pair
+ * `del[k]` with `add[k]` and compute character-level changes so a one-character edit is visible
+ * instead of two near-identical lines (GitHub's intra-line highlight).
+ */
+function fillIntraLineRanges(items: DiffLineItem[]): void {
+  let i = 0;
+  while (i < items.length) {
+    if (items[i].type !== 'del') {
+      i++;
+      continue;
+    }
+    let d = i;
+    while (d < items.length && items[d].type === 'del') d++;
+    let a = d;
+    while (a < items.length && items[a].type === 'add') a++;
+    const dels = items.slice(i, d);
+    const adds = items.slice(d, a);
+    const pairs = Math.min(dels.length, adds.length);
+    for (let k = 0; k < pairs; k++) {
+      const { delRanges, addRanges } = intraLineDiff(dels[k].text, adds[k].text);
+      // skip the highlight when essentially the whole line changed — it's just noise then.
+      if (!coversWholeLine(delRanges, dels[k].text.length)) dels[k].intra = delRanges;
+      if (!coversWholeLine(addRanges, adds[k].text.length)) adds[k].intra = addRanges;
+    }
+    i = a > i ? a : i + 1;
+  }
+}
+
+function coversWholeLine(ranges: Array<[number, number]>, len: number): boolean {
+  if (len === 0) return true;
+  const changed = ranges.reduce((sum, [s, e]) => sum + (e - s), 0);
+  return changed >= len * 0.9;
+}
+
+/** split a line into word / whitespace / punctuation tokens so the diff aligns on real boundaries. */
+function tokenizeLine(s: string): string[] {
+  return s.match(/[A-Za-z0-9_$]+|\s+|[^A-Za-z0-9_$\s]/g) || [];
+}
+
+// Cap the intra-line LCS: it allocates an (m+1)×(n+1) matrix in the token counts of the two lines, so a
+// pathological line (minified/generated, thousands of tokens) would build a multi-million-cell table and
+// stall — or crash — the viewer, and this runs for every del/add pair in a block. Past either cap we skip
+// character-level highlighting for that pair; the line still renders as fully changed, just without
+// intra-line ranges.
+const MAX_INTRA_LINE_CHARS = 2000;
+const MAX_INTRA_LINE_CELLS = 1_000_000;
+
+/**
+ * Token-level (word) diff of two lines via an LCS walk, returning the half-open character ranges that
+ * changed on each side. Adjacent changed ranges are merged so the highlight reads as one span. Lines
+ * past a size cap fall back to no intra-line ranges to keep the computation bounded.
+ */
+export function intraLineDiff(
+  from: string,
+  to: string
+): { delRanges: Array<[number, number]>; addRanges: Array<[number, number]> } {
+  if (from.length > MAX_INTRA_LINE_CHARS || to.length > MAX_INTRA_LINE_CHARS) {
+    return { delRanges: [], addRanges: [] };
+  }
+  const a = tokenizeLine(from);
+  const b = tokenizeLine(to);
+  const m = a.length;
+  const n = b.length;
+  if (m * n > MAX_INTRA_LINE_CELLS) {
+    return { delRanges: [], addRanges: [] };
+  }
+  const dp: number[][] = Array.from({ length: m + 1 }, () => Array.from({ length: n + 1 }, () => 0));
+  for (let i = m - 1; i >= 0; i--) {
+    for (let j = n - 1; j >= 0; j--) {
+      dp[i][j] = a[i] === b[j] ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]);
+    }
+  }
+  const delRanges: Array<[number, number]> = [];
+  const addRanges: Array<[number, number]> = [];
+  let i = 0;
+  let j = 0;
+  let aOff = 0;
+  let bOff = 0;
+  const pushChanged = (ranges: Array<[number, number]>, off: number, tok: string) => {
+    if (!tok.trim()) return; // don't emphasize whitespace-only tokens
+    const last = ranges[ranges.length - 1];
+    if (last && last[1] === off) last[1] = off + tok.length;
+    else ranges.push([off, off + tok.length]);
+  };
+  while (i < m && j < n) {
+    if (a[i] === b[j]) {
+      aOff += a[i].length;
+      bOff += b[j].length;
+      i++;
+      j++;
+    } else if (dp[i + 1][j] >= dp[i][j + 1]) {
+      pushChanged(delRanges, aOff, a[i]);
+      aOff += a[i].length;
+      i++;
+    } else {
+      pushChanged(addRanges, bOff, b[j]);
+      bOff += b[j].length;
+      j++;
+    }
+  }
+  while (i < m) {
+    pushChanged(delRanges, aOff, a[i]);
+    aOff += a[i].length;
+    i++;
+  }
+  while (j < n) {
+    pushChanged(addRanges, bOff, b[j]);
+    bOff += b[j].length;
+    j++;
+  }
+  return { delRanges, addRanges };
+}
+
+/**
+ * Group the full line list into rendered line-blocks and collapsible gaps of unchanged lines. Long
+ * stretches of unchanged code between changes are collapsed to `context` lines on each side; the rest
+ * becomes a `gap` that can be expanded on demand.
+ */
+export function buildSections(items: DiffLineItem[], context: number = DEFAULT_CONTEXT): DiffSection[] {
+  const changedIdx: number[] = [];
+  for (let i = 0; i < items.length; i++) {
+    if (items[i].type !== 'context') changedIdx.push(i);
+  }
+  if (changedIdx.length === 0) {
+    // an unchanged file: collapse everything into one expandable gap.
+    return items.length ? [{ kind: 'gap', id: 'gap-all', hidden: items }] : [];
+  }
+
+  const sections: DiffSection[] = [];
+  const first = changedIdx[0];
+  const last = changedIdx[changedIdx.length - 1];
+
+  // leading unchanged region (file start → first change)
+  emitUnchanged(sections, items, 0, first, context, 'lead');
+
+  // changed region plus interleaved unchanged gaps
+  let cursor = first;
+  while (cursor <= last) {
+    // emit the maximal run of "visible" lines starting at cursor: changed lines plus short gaps.
+    const runStart = cursor;
+    let runEnd = cursor;
+    while (runEnd <= last) {
+      if (items[runEnd].type !== 'context') {
+        runEnd++;
+        continue;
+      }
+      // measure the unchanged stretch
+      let u = runEnd;
+      while (u <= last && items[u].type === 'context') u++;
+      const gapLen = u - runEnd;
+      if (gapLen <= context * 2) {
+        runEnd = u; // short gap — keep inline
+      } else {
+        break; // long gap — end this run, collapse below
+      }
+    }
+    sections.push({ kind: 'lines', items: items.slice(runStart, runEnd) });
+    if (runEnd > last) {
+      cursor = runEnd;
+      break;
+    }
+    // collapse the long unchanged stretch, keeping `context` lines on each side
+    let u = runEnd;
+    while (u <= last && items[u].type === 'context') u++;
+    const keepTopEnd = runEnd + context;
+    const keepBottomStart = u - context;
+    sections.push({ kind: 'lines', items: items.slice(runEnd, keepTopEnd) });
+    sections.push({ kind: 'gap', id: `gap-${runEnd}`, hidden: items.slice(keepTopEnd, keepBottomStart) });
+    sections.push({ kind: 'lines', items: items.slice(keepBottomStart, u) });
+    cursor = u;
+  }
+
+  // trailing unchanged region (last change → file end)
+  emitUnchanged(sections, items, last + 1, items.length, context, 'trail');
+
+  return sections;
+}
+
+function emitUnchanged(
+  sections: DiffSection[],
+  items: DiffLineItem[],
+  start: number,
+  end: number,
+  context: number,
+  edge: 'lead' | 'trail'
+): void {
+  const len = end - start;
+  if (len <= 0) return;
+  if (len <= context) {
+    sections.push({ kind: 'lines', items: items.slice(start, end) });
+    return;
+  }
+  if (edge === 'lead') {
+    sections.push({ kind: 'gap', id: `gap-${start}`, hidden: items.slice(start, end - context) });
+    sections.push({ kind: 'lines', items: items.slice(end - context, end) });
+  } else {
+    sections.push({ kind: 'lines', items: items.slice(start, start + context) });
+    sections.push({ kind: 'gap', id: `gap-${start}`, hidden: items.slice(start + context, end) });
+  }
+}
+
+export type SplitRow = { left?: DiffLineItem; right?: DiffLineItem };
+
+/**
+ * Pair lines for side-by-side rendering: deletions align to the left column, additions to the right,
+ * context lines occupy both. Unbalanced add/del runs leave an empty cell on the shorter side.
+ */
+export function pairForSplit(items: DiffLineItem[]): SplitRow[] {
+  const rows: SplitRow[] = [];
+  let i = 0;
+  while (i < items.length) {
+    const it = items[i];
+    if (it.type === 'context') {
+      rows.push({ left: it, right: it });
+      i++;
+      continue;
+    }
+    const dels: DiffLineItem[] = [];
+    const adds: DiffLineItem[] = [];
+    while (i < items.length && items[i].type === 'del') dels.push(items[i++]);
+    while (i < items.length && items[i].type === 'add') adds.push(items[i++]);
+    const max = Math.max(dels.length, adds.length);
+    for (let k = 0; k < max; k++) rows.push({ left: dels[k], right: adds[k] });
+  }
+  return rows;
+}
diff --git a/components/ui/diff-viewer/diff-viewer.composition.tsx b/components/ui/diff-viewer/diff-viewer.composition.tsx
new file mode 100644
index 000000000000..79fce887404f
--- /dev/null
+++ b/components/ui/diff-viewer/diff-viewer.composition.tsx
@@ -0,0 +1,140 @@
+import React from 'react';
+import { DiffViewer } from './diff-viewer';
+
+const wrap: React.CSSProperties = { padding: 24, maxWidth: 1100, fontFamily: 'sans-serif' };
+
+// --- TypeScript sample (modified) ---
+
+const tsOld = `import { useState } from 'react';
+
+export type CounterProps = {
+  initial: number;
+};
+
+export function Counter({ initial }: CounterProps) {
+  const [count, setCount] = useState(initial);
+  // increment by one
+  const inc = () => setCount(count + 1);
+  return <button onClick={inc}>{count}</button>;
+}
+`;
+
+const tsNew = `import { useCallback, useState } from 'react';
+
+export type CounterProps = {
+  initial: number;
+  step?: number;
+};
+
+export function Counter({ initial, step = 1 }: CounterProps) {
+  const [count, setCount] = useState(initial);
+  // increment by the configured step
+  const inc = useCallback(() => setCount((c) => c + step), [step]);
+  return <button onClick={inc}>count is {count}</button>;
+}
+`;
+
+export const TypeScriptDiffSplit = () => (
+  <div style={wrap}>
+    <DiffViewer fileName="components/counter/counter.tsx" oldContent={tsOld} newContent={tsNew} defaultView="split" />
+  </div>
+);
+
+export const TypeScriptDiffUnified = () => (
+  <div style={wrap}>
+    <DiffViewer fileName="components/counter/counter.tsx" oldContent={tsOld} newContent={tsNew} defaultView="unified" />
+  </div>
+);
+
+// --- SCSS sample (intra-line + multi-language) ---
+
+const scssOld = `.card {
+  border-radius: 8px;
+  padding: 12px;
+  color: #333;
+}
+`;
+const scssNew = `.card {
+  border-radius: 10px;
+  padding: 16px 12px;
+  color: var(--on-surface-color, #2b2b2b);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+`;
+
+export const ScssDiff = () => (
+  <div style={wrap}>
+    <DiffViewer
+      fileName="components/card/card.module.scss"
+      oldContent={scssOld}
+      newContent={scssNew}
+      defaultView="split"
+    />
+  </div>
+);
+
+// --- Python sample ---
+
+const pyOld = `def greet(name):
+    print("Hello, " + name)
+
+
+def main():
+    greet("world")
+`;
+const pyNew = `def greet(name: str) -> None:
+    print(f"Hello, {name}!")
+
+
+def main() -> None:
+    for who in ["world", "bit"]:
+        greet(who)
+`;
+
+export const PythonDiff = () => (
+  <div style={wrap}>
+    <DiffViewer fileName="scripts/greet.py" oldContent={pyOld} newContent={pyNew} defaultView="unified" />
+  </div>
+);
+
+// --- New file ---
+
+export const NewFile = () => (
+  <div style={wrap}>
+    <DiffViewer
+      fileName="components/badge/index.ts"
+      oldContent=""
+      newContent={"export { Badge } from './badge';\nexport type { BadgeProps } from './badge';\n"}
+      status="new"
+    />
+  </div>
+);
+
+// --- Large diff (virtualization + expand context) ---
+
+function makeLargeOld(): string {
+  const lines: string[] = [];
+  for (let i = 1; i <= 600; i++) lines.push(`export const value${i} = ${i};`);
+  return lines.join('\n');
+}
+function makeLargeNew(): string {
+  const lines: string[] = [];
+  for (let i = 1; i <= 600; i++) {
+    if (i === 120) lines.push(`export const value${i} = ${i} * 2; // doubled`);
+    else if (i === 400) lines.push(`export const value${i} = ${i} + 100;`);
+    else lines.push(`export const value${i} = ${i};`);
+  }
+  return lines.join('\n');
+}
+
+export const LargeVirtualizedDiff = () => (
+  <div style={wrap}>
+    <DiffViewer
+      fileName="generated/values.ts"
+      oldContent={makeLargeOld()}
+      newContent={makeLargeNew()}
+      defaultView="unified"
+      maxHeight={500}
+    />
+  </div>
+);
diff --git a/components/ui/diff-viewer/diff-viewer.module.scss b/components/ui/diff-viewer/diff-viewer.module.scss
new file mode 100644
index 000000000000..8e6d4fb968bd
--- /dev/null
+++ b/components/ui/diff-viewer/diff-viewer.module.scss
@@ -0,0 +1,430 @@
+$code-font: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+
+$border: var(--border-medium-color, #ededed);
+$surface: var(--surface-color, #fff);
+$surface-1: var(--surface01-color, #fffbff);
+$surface-neutral: var(--surface-neutral-color, #f8f9fb);
+$text: var(--on-surface-color, #2b2b2b);
+$text-medium: var(--on-background-medium-color, #707279);
+$text-muted: var(--on-surface-medium-color, #9598a1);
+$accent: var(--bit-accent-color, #6c5ce7);
+$positive: var(--positive-color, #37b26c);
+$negative: var(--negative-color, #e62e5c);
+$add-tint: var(--positive-surface-color, #f3faf6);
+$del-tint: var(--negative-surface-color, #fdf2f5);
+
+.diffViewer {
+  border: 1px solid $border;
+  border-radius: 10px;
+  overflow: hidden;
+  background: $surface;
+  font-family: $code-font;
+  color: $text;
+  // CRITICAL containment: size the diff-viewer's width from its container only, ignoring its (wide)
+  // code content, AND stop that content from contributing to any ancestor's intrinsic width. Without
+  // this, a long code line makes the whole element — and the page — grow horizontally instead of the
+  // body scrolling internally. `contain: inline-size` pins the width to the parent regardless of how
+  // wide the diff is, so the wide track can only scroll inside `.body`.
+  contain: inline-size;
+  width: 100%;
+}
+
+// --- header ---
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: $surface-neutral;
+  border-bottom: 1px solid $border;
+}
+
+.collapseBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: $text-medium;
+  cursor: pointer;
+
+  &:hover {
+    background: color-mix(in srgb, $accent 10%, transparent);
+    color: $accent;
+  }
+}
+
+.chevron {
+  transition: transform 0.15s ease;
+}
+.chevronOpen {
+  transform: rotate(90deg);
+}
+
+.fileName {
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  color: $text;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.statusChip {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 5px;
+  flex-shrink: 0;
+}
+.status_new {
+  color: $positive;
+  background: color-mix(in srgb, $positive 12%, transparent);
+}
+.status_deleted {
+  color: $negative;
+  background: color-mix(in srgb, $negative 12%, transparent);
+}
+.status_modified {
+  color: var(--warning-color, #d6a022);
+  background: color-mix(in srgb, var(--warning-color, #d6a022) 14%, transparent);
+}
+.status_renamed {
+  color: $accent;
+  background: color-mix(in srgb, $accent 12%, transparent);
+}
+
+.stats {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-weight: 600;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+.add {
+  color: $positive;
+}
+.del {
+  color: $negative;
+}
+
+.changeBar {
+  display: flex;
+  gap: 2px;
+}
+.barAdd,
+.barDel,
+.barNeutral {
+  width: 7px;
+  height: 7px;
+  border-radius: 2px;
+}
+.barAdd {
+  background: $positive;
+}
+.barDel {
+  background: $negative;
+}
+.barNeutral {
+  background: $border;
+}
+
+.viewToggle {
+  display: inline-flex;
+  padding: 2px;
+  border-radius: 8px;
+  background: color-mix(in srgb, $text-medium 8%, transparent);
+  flex-shrink: 0;
+}
+.toggleBtn {
+  border: none;
+  background: transparent;
+  color: $text-medium;
+  font-size: 12px;
+  font-weight: 600;
+  font-family: inherit;
+  padding: 3px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease;
+
+  &:hover {
+    color: $text;
+  }
+}
+.toggleActive {
+  background: $surface;
+  color: $accent;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+
+  &:hover {
+    color: $accent;
+  }
+}
+
+// --- body ---
+
+.body {
+  overflow: auto;
+  background: $surface;
+  font-size: 12.5px;
+  // sticky gutters need a known scroll context
+  position: relative;
+  // allow the body to shrink inside flex/grid hosts so it scrolls its own (wide) content
+  // horizontally instead of forcing the page wider.
+  min-width: 0;
+}
+
+// Unified: the track grows to the longest line so the body scrolls it horizontally (one scrollbar).
+.track {
+  width: max-content;
+  min-width: 100%;
+}
+
+// Split: pin the track to the pane width so the two `minmax(0, 1fr)` columns resolve to a strict
+// 50/50 (both sides always visible, no whole-diff horizontal scroll). Long lines scroll inside their
+// own half via `.splitCell .code { overflow-x: auto }`. Without this the `width: max-content` above
+// would size the track to the content and each 1fr column would balloon to the longest line.
+.trackSplit {
+  width: 100%;
+}
+
+// Wrap mode: long lines soft-wrap instead of scrolling — no horizontal scroll anywhere, both split
+// sides stay at a strict 50%, and every character stays visible. Rows grow to fit the wrapped text.
+.wrap {
+  .track {
+    width: 100%;
+  }
+
+  .unifiedRow {
+    grid-template-columns: 50px 50px 22px minmax(0, 1fr);
+  }
+
+  .row {
+    height: auto;
+    min-height: var(--diff-row-h, 22px);
+    align-items: stretch;
+  }
+
+  .code {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    overflow: visible;
+    padding-top: 1px;
+    padding-bottom: 1px;
+  }
+
+  // no per-side horizontal scrollbars when wrapping
+  .splitCell .code {
+    overflow-x: visible;
+  }
+}
+
+// --- rows (fixed height for clean virtualization) ---
+
+.row {
+  height: var(--diff-row-h, 22px);
+  line-height: var(--diff-row-h, 22px);
+  background-color: $surface;
+  // fill the track so line backgrounds span the full width even when the code is narrow.
+  width: 100%;
+}
+
+// `--diff-code-width` (the longest line, in ch) is the code column's MIN so every line fits and all
+// rows share one width (alignment); `1fr` lets it grow to fill the container when the code is
+// narrower than the pane. Narrow → fills width; wide → the body scrolls. Same shared min keeps the
+// virtualized rows aligned.
+.unifiedRow {
+  display: grid;
+  grid-template-columns: 50px 50px 22px minmax(var(--diff-code-width, 60ch), 1fr);
+}
+
+// Split view: each side is a strict 50% so BOTH are always visible and the row never exceeds the
+// pane (no page overflow regardless of line length). Long lines scroll inside their own side.
+.splitRow {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+}
+
+.splitCell {
+  display: grid;
+  grid-template-columns: 50px minmax(0, 1fr);
+  background-color: inherit;
+  min-width: 0;
+
+  &:first-child {
+    border-right: 1px solid $border;
+  }
+
+  // a long line scrolls horizontally within its half (overlay scrollbar on macOS, thin elsewhere)
+  // instead of widening the row / page.
+  .code {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: thin;
+  }
+}
+
+.emptyCell {
+  background: color-mix(in srgb, $text-medium 4%, transparent);
+}
+
+.gutter {
+  background: inherit;
+  color: var(--diff-line-num, $text-muted);
+  text-align: right;
+  padding: 0 8px;
+  font-size: 11px;
+  user-select: none;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.sign {
+  text-align: center;
+  padding: 0;
+  font-weight: 700;
+}
+
+// unified-view line-number gutters stay pinned while the code scrolls horizontally.
+// each sticky column needs an increasing `left` offset so they don't stack on top of each other.
+.unifiedRow {
+  .gutterNum:nth-of-type(1) {
+    position: sticky;
+    left: 0;
+    z-index: 2;
+  }
+  .gutterNum:nth-of-type(2) {
+    position: sticky;
+    left: 50px;
+    z-index: 2;
+  }
+  .sign {
+    position: sticky;
+    left: 100px;
+    z-index: 2;
+  }
+}
+
+.code {
+  font-family: $code-font;
+  white-space: pre;
+  padding: 0 10px;
+  color: $text;
+  tab-size: 2;
+  overflow: hidden;
+}
+
+// add / del tints (subtle, Bit-flavored — not GitHub greens/reds)
+
+.addLine {
+  background-color: $add-tint;
+
+  .sign {
+    color: $positive;
+  }
+  &.unifiedRow .gutterNum:last-of-type,
+  .gutterNum {
+    color: color-mix(in srgb, $positive 70%, $text-muted);
+  }
+}
+
+.delLine {
+  background-color: $del-tint;
+
+  .sign {
+    color: $negative;
+  }
+  .gutterNum {
+    color: color-mix(in srgb, $negative 70%, $text-muted);
+  }
+}
+
+// left accent rail on changed lines
+.unifiedRow.addLine,
+.splitCell.addLine {
+  box-shadow: inset 2px 0 0 $positive;
+}
+.unifiedRow.delLine,
+.splitCell.delLine {
+  box-shadow: inset 2px 0 0 $negative;
+}
+
+// intra-line (word-level) change emphasis
+.intra {
+  background: color-mix(in srgb, $accent 16%, transparent);
+  border-radius: 2px;
+  padding: 1px 0;
+}
+.addLine .intra {
+  background: color-mix(in srgb, $positive 26%, transparent);
+}
+.delLine .intra {
+  background: color-mix(in srgb, $negative 26%, transparent);
+}
+
+// --- expand-context (gap) rows ---
+
+.gapRow {
+  display: grid;
+  grid-template-columns: 50px 1fr;
+  align-items: center;
+  background: color-mix(in srgb, $accent 4%, $surface);
+  border-top: 1px solid color-mix(in srgb, $border 70%, transparent);
+  border-bottom: 1px solid color-mix(in srgb, $border 70%, transparent);
+  color: $text-medium;
+}
+
+.gapControls {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  height: 100%;
+}
+
+.gapBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 11px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: $accent;
+  cursor: pointer;
+  opacity: 0.7;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.gapLabel {
+  justify-self: start;
+  border: none;
+  background: transparent;
+  color: $text-medium;
+  font-family: $code-font;
+  font-size: 11.5px;
+  padding: 0 10px;
+  cursor: pointer;
+  letter-spacing: 0.01em;
+
+  &:hover {
+    color: $accent;
+    text-decoration: underline;
+  }
+}
diff --git a/components/ui/diff-viewer/diff-viewer.tsx b/components/ui/diff-viewer/diff-viewer.tsx
new file mode 100644
index 000000000000..b5c2c370d7c9
--- /dev/null
+++ b/components/ui/diff-viewer/diff-viewer.tsx
@@ -0,0 +1,631 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import classNames from 'classnames';
+import type { DiffLineItem, DiffSection } from './diff-model';
+import { computeDiffLines, buildSections, statsFromItems, pairForSplit } from './diff-model';
+import type { HlLines, HlToken } from './highlighter';
+import { useHighlightedLines, langFromFileName } from './highlighter';
+import { resolveTokenColor } from './shiki-bit-theme';
+import styles from './diff-viewer.module.scss';
+
+export type DiffViewMode = 'unified' | 'split';
+export type DiffFileStatus = 'new' | 'deleted' | 'modified' | 'renamed';
+
+export type DiffViewerProps = {
+  /** path shown in the header; also used to infer the language when `language` is omitted. */
+  fileName: string;
+  /** original (base) file content. */
+  oldContent: string;
+  /** modified (compare) file content. */
+  newContent: string;
+  /** language id override (otherwise inferred from the file extension). */
+  language?: string;
+  /** controlled view mode. */
+  view?: DiffViewMode;
+  /** initial view mode when uncontrolled. */
+  defaultView?: DiffViewMode;
+  onViewChange?: (view: DiffViewMode) => void;
+  status?: DiffFileStatus;
+  /** allow collapsing the whole file body from the header. */
+  collapsible?: boolean;
+  defaultCollapsed?: boolean;
+  /** unchanged context lines kept around each change before collapsing (default 3). */
+  contextLines?: number;
+  /** max body height before the diff scrolls + virtualizes internally (default 640). */
+  maxHeight?: number;
+  /** virtualize + inner-scroll the body past `maxHeight` (default true). Set false to render the
+   * file fully expanded with no inner scroll — e.g. when stacking many files under one page scroll. */
+  virtualize?: boolean;
+  /** render the file header bar (default true). */
+  showHeader?: boolean;
+  /** show the per-file Unified/Split toggle in the header (default true). Set false when the host
+   * provides a single global view-mode control for all files. */
+  showViewToggle?: boolean;
+  /** soft-wrap long lines instead of scrolling them horizontally (default false). Best for stacked,
+   * non-virtualized diffs (e.g. a changes view) where per-line/side scrollbars would be noise. */
+  wrap?: boolean;
+  className?: string;
+};
+
+const ROW_H = 22;
+const VIRTUALIZE_THRESHOLD = 120;
+const OVERSCAN = 14;
+const EXPAND_CHUNK = 20;
+
+type GapState = { top: number; bottom: number };
+
+/** a single rendered row: a code line (or a left/right pair) or a collapsed-gap expander. */
+type RenderRow =
+  | { kind: 'unified'; item: DiffLineItem; key: string }
+  | { kind: 'split'; left?: DiffLineItem; right?: DiffLineItem; key: string }
+  | { kind: 'gap'; id: string; hidden: DiffLineItem[]; state: GapState; key: string };
+
+export function DiffViewer({
+  fileName,
+  oldContent,
+  newContent,
+  language,
+  view: controlledView,
+  defaultView = 'split',
+  onViewChange,
+  status = 'modified',
+  collapsible = true,
+  defaultCollapsed = false,
+  contextLines = 3,
+  maxHeight = 640,
+  virtualize = true,
+  showHeader = true,
+  showViewToggle = true,
+  wrap = false,
+  className,
+}: DiffViewerProps) {
+  const [uncontrolledView, setUncontrolledView] = useState<DiffViewMode>(defaultView);
+  const view = controlledView ?? uncontrolledView;
+  const setView = useCallback(
+    (next: DiffViewMode) => {
+      if (controlledView === undefined) setUncontrolledView(next);
+      onViewChange?.(next);
+    },
+    [controlledView, onViewChange]
+  );
+
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
+  const [gapStates, setGapStates] = useState<Record<string, GapState>>({});
+
+  const lang = language ?? langFromFileName(fileName);
+
+  const items = useMemo(() => computeDiffLines(oldContent, newContent), [oldContent, newContent]);
+  const stats = useMemo(() => statsFromItems(items), [items]);
+  const sections = useMemo(() => buildSections(items, contextLines), [items, contextLines]);
+
+  // tokenize each whole file once; multi-line constructs stay correct and lines are looked up by number.
+  const oldHl = useHighlightedLines(oldContent, lang);
+  const newHl = useHighlightedLines(newContent, lang);
+
+  // a stable horizontal track width so virtualized rows align and the gutters can stay sticky.
+  const codeWidthCh = useMemo(() => {
+    let max = 0;
+    for (const it of items) if (it.text.length > max) max = it.text.length;
+    return Math.min(Math.max(max, 40), 400);
+  }, [items]);
+
+  const expandGap = useCallback((id: string, hiddenLen: number, dir: 'top' | 'bottom' | 'all') => {
+    setGapStates((prev) => {
+      const cur = prev[id] ?? { top: 0, bottom: 0 };
+      const remaining = hiddenLen - cur.top - cur.bottom;
+      if (remaining <= 0) return prev;
+      if (dir === 'all') return { ...prev, [id]: { top: cur.top + remaining, bottom: cur.bottom } };
+      const add = Math.min(EXPAND_CHUNK, remaining);
+      if (dir === 'top') return { ...prev, [id]: { ...cur, top: cur.top + add } };
+      return { ...prev, [id]: { ...cur, bottom: cur.bottom + add } };
+    });
+  }, []);
+
+  const rows = useMemo(() => buildRenderRows(sections, gapStates, view), [sections, gapStates, view]);
+
+  return (
+    <div className={classNames(styles.diffViewer, wrap && styles.wrap, className)} data-status={status}>
+      {showHeader && (
+        <DiffHeader
+          fileName={fileName}
+          status={status}
+          additions={stats.additions}
+          deletions={stats.deletions}
+          view={view}
+          onViewChange={setView}
+          showViewToggle={showViewToggle}
+          collapsible={collapsible}
+          collapsed={collapsed}
+          onToggleCollapse={() => setCollapsed((c) => !c)}
+        />
+      )}
+      {!collapsed && (
+        <DiffBody
+          rows={rows}
+          view={view}
+          oldHl={oldHl}
+          newHl={newHl}
+          codeWidthCh={codeWidthCh}
+          maxHeight={maxHeight}
+          // wrap makes rows variable-height (height: auto), which invalidates the fixed-ROW_H
+          // windowing math; force full, non-windowed rendering (page scrolls) whenever wrap is on.
+          virtualize={virtualize && !wrap}
+          onExpand={expandGap}
+        />
+      )}
+    </div>
+  );
+}
+
+// --- Header ---
+
+function DiffHeader({
+  fileName,
+  status,
+  additions,
+  deletions,
+  view,
+  onViewChange,
+  showViewToggle,
+  collapsible,
+  collapsed,
+  onToggleCollapse,
+}: {
+  fileName: string;
+  status: DiffFileStatus;
+  additions: number;
+  deletions: number;
+  view: DiffViewMode;
+  onViewChange: (v: DiffViewMode) => void;
+  showViewToggle: boolean;
+  collapsible: boolean;
+  collapsed: boolean;
+  onToggleCollapse: () => void;
+}) {
+  const statusLabel = status[0].toUpperCase() + status.slice(1);
+  return (
+    <div className={styles.header}>
+      {collapsible && (
+        <button
+          type="button"
+          className={styles.collapseBtn}
+          onClick={onToggleCollapse}
+          aria-label={collapsed ? 'Expand file' : 'Collapse file'}
+        >
+          <Chevron open={!collapsed} />
+        </button>
+      )}
+      <span className={styles.fileName}>{fileName}</span>
+      <span className={classNames(styles.statusChip, styles[`status_${status}`])}>{statusLabel}</span>
+      <div className={styles.stats}>
+        {additions > 0 && <span className={styles.add}>+{additions}</span>}
+        {deletions > 0 && <span className={styles.del}>−{deletions}</span>}
+        <ChangeBar additions={additions} deletions={deletions} />
+      </div>
+      {showViewToggle && (
+        <div className={styles.viewToggle} role="group" aria-label="Diff view mode">
+          <button
+            type="button"
+            className={classNames(styles.toggleBtn, view === 'unified' && styles.toggleActive)}
+            onClick={() => onViewChange('unified')}
+          >
+            Unified
+          </button>
+          <button
+            type="button"
+            className={classNames(styles.toggleBtn, view === 'split' && styles.toggleActive)}
+            onClick={() => onViewChange('split')}
+          >
+            Split
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// --- Body + virtualization ---
+
+const Row = React.memo(function Row({
+  row,
+  view,
+  oldHl,
+  newHl,
+  onExpand,
+}: {
+  row: RenderRow;
+  view: DiffViewMode;
+  oldHl: HlLines | null;
+  newHl: HlLines | null;
+  onExpand: (id: string, hiddenLen: number, dir: 'top' | 'bottom' | 'all') => void;
+}) {
+  if (row.kind === 'gap') {
+    return <GapRow id={row.id} hidden={row.hidden} state={row.state} view={view} onExpand={onExpand} />;
+  }
+  if (row.kind === 'unified') {
+    return <UnifiedRow item={row.item} oldHl={oldHl} newHl={newHl} />;
+  }
+  return <SplitRowView left={row.left} right={row.right} oldHl={oldHl} newHl={newHl} />;
+});
+
+function DiffBody({
+  rows,
+  view,
+  oldHl,
+  newHl,
+  codeWidthCh,
+  maxHeight,
+  virtualize,
+  onExpand,
+}: {
+  rows: RenderRow[];
+  view: DiffViewMode;
+  oldHl: HlLines | null;
+  newHl: HlLines | null;
+  codeWidthCh: number;
+  maxHeight: number;
+  /** when false, the file renders fully expanded with no inner scroll/windowing (page scrolls). */
+  virtualize: boolean;
+  onExpand: (id: string, hiddenLen: number, dir: 'top' | 'bottom' | 'all') => void;
+}) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const rafRef = useRef<number | null>(null);
+
+  const total = rows.length;
+  const totalHeight = total * ROW_H;
+  // only window when virtualization is enabled AND the file is large enough to warrant it.
+  const windowing = virtualize && total > VIRTUALIZE_THRESHOLD;
+
+  // cancel a pending scroll RAF on unmount — DiffBody is conditionally mounted (collapse hides it),
+  // so a queued frame could otherwise fire setScrollTop() after unmount.
+  useEffect(
+    () => () => {
+      if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
+    },
+    []
+  );
+
+  const onScroll = useCallback(() => {
+    if (rafRef.current != null) return;
+    rafRef.current = requestAnimationFrame(() => {
+      rafRef.current = null;
+      if (scrollRef.current) setScrollTop(scrollRef.current.scrollTop);
+    });
+  }, []);
+
+  let start = 0;
+  let end = total;
+  if (windowing) {
+    const viewport = maxHeight;
+    start = Math.max(0, Math.floor(scrollTop / ROW_H) - OVERSCAN);
+    end = Math.min(total, Math.ceil((scrollTop + viewport) / ROW_H) + OVERSCAN);
+  }
+  const visible = windowing ? rows.slice(start, end) : rows;
+  const offsetY = start * ROW_H;
+
+  const bodyStyle: React.CSSProperties = {
+    // no cap when virtualization is off — the file expands and the host page scrolls.
+    maxHeight: virtualize ? maxHeight : undefined,
+    // a stable horizontal track so every (virtualized) row aligns; gutters stay sticky over it.
+    ['--diff-code-width' as any]: `${codeWidthCh}ch`,
+    ['--diff-row-h' as any]: `${ROW_H}px`,
+  };
+
+  return (
+    <div ref={scrollRef} className={styles.body} style={bodyStyle} onScroll={windowing ? onScroll : undefined}>
+      <div
+        className={classNames(styles.track, view === 'split' && styles.trackSplit)}
+        style={windowing ? { height: totalHeight, position: 'relative' } : undefined}
+      >
+        <div style={windowing ? { transform: `translateY(${offsetY}px)` } : undefined}>
+          {visible.map((row) => (
+            <Row key={row.key} row={row} view={view} oldHl={oldHl} newHl={newHl} onExpand={onExpand} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function hlForLine(item: DiffLineItem, oldHl: HlLines | null, newHl: HlLines | null): HlToken[] | null {
+  if (item.type === 'del') return item.oldLn ? (oldHl?.[item.oldLn - 1] ?? null) : null;
+  return item.newLn ? (newHl?.[item.newLn - 1] ?? null) : null;
+}
+
+function UnifiedRow({ item, oldHl, newHl }: { item: DiffLineItem; oldHl: HlLines | null; newHl: HlLines | null }) {
+  const tone = item.type === 'add' ? styles.addLine : item.type === 'del' ? styles.delLine : undefined;
+  const sign = item.type === 'add' ? '+' : item.type === 'del' ? '−' : '';
+  return (
+    <div className={classNames(styles.row, styles.unifiedRow, tone)}>
+      <span className={classNames(styles.gutter, styles.gutterNum)}>{item.oldLn ?? ''}</span>
+      <span className={classNames(styles.gutter, styles.gutterNum)}>{item.newLn ?? ''}</span>
+      <span className={classNames(styles.gutter, styles.sign)}>{sign}</span>
+      <code className={styles.code}>{renderLineContent(hlForLine(item, oldHl, newHl), item.text, item.intra)}</code>
+    </div>
+  );
+}
+
+function SplitRowView({
+  left,
+  right,
+  oldHl,
+  newHl,
+}: {
+  left?: DiffLineItem;
+  right?: DiffLineItem;
+  oldHl: HlLines | null;
+  newHl: HlLines | null;
+}) {
+  return (
+    <div className={classNames(styles.row, styles.splitRow)}>
+      <SplitCell item={left} side="left" oldHl={oldHl} newHl={newHl} />
+      <SplitCell item={right} side="right" oldHl={oldHl} newHl={newHl} />
+    </div>
+  );
+}
+
+function SplitCell({
+  item,
+  side,
+  oldHl,
+  newHl,
+}: {
+  item?: DiffLineItem;
+  side: 'left' | 'right';
+  oldHl: HlLines | null;
+  newHl: HlLines | null;
+}) {
+  if (!item) {
+    return (
+      <div className={classNames(styles.splitCell, styles.emptyCell)}>
+        <span className={classNames(styles.gutter, styles.gutterNum)} />
+        <code className={styles.code} />
+      </div>
+    );
+  }
+  const tone = item.type === 'add' ? styles.addLine : item.type === 'del' ? styles.delLine : undefined;
+  const num = side === 'left' ? item.oldLn : item.newLn;
+  return (
+    <div className={classNames(styles.splitCell, tone)}>
+      <span className={classNames(styles.gutter, styles.gutterNum)}>{num ?? ''}</span>
+      <code className={styles.code}>{renderLineContent(hlForLine(item, oldHl, newHl), item.text, item.intra)}</code>
+    </div>
+  );
+}
+
+function GapRow({
+  id,
+  hidden,
+  state,
+  view,
+  onExpand,
+}: {
+  id: string;
+  hidden: DiffLineItem[];
+  state: GapState;
+  view: DiffViewMode;
+  onExpand: (id: string, hiddenLen: number, dir: 'top' | 'bottom' | 'all') => void;
+}) {
+  const remaining = hidden.length - state.top - state.bottom;
+  const canChunk = remaining > EXPAND_CHUNK;
+  return (
+    <div className={classNames(styles.row, styles.gapRow)} data-view={view}>
+      <span className={styles.gapControls}>
+        {canChunk && (
+          <button
+            type="button"
+            className={styles.gapBtn}
+            title="Expand up"
+            onClick={() => onExpand(id, hidden.length, 'top')}
+          >
+            <ExpandUp />
+          </button>
+        )}
+        {canChunk && (
+          <button
+            type="button"
+            className={styles.gapBtn}
+            title="Expand down"
+            onClick={() => onExpand(id, hidden.length, 'bottom')}
+          >
+            <ExpandDown />
+          </button>
+        )}
+      </span>
+      <button type="button" className={styles.gapLabel} onClick={() => onExpand(id, hidden.length, 'all')}>
+        {expandLabel(remaining)}
+      </button>
+    </div>
+  );
+}
+
+function expandLabel(remaining: number): string {
+  if (remaining <= 0) return 'Expanded';
+  return `Expand ${remaining} unchanged ${remaining === 1 ? 'line' : 'lines'}`;
+}
+
+// --- token + intra-line rendering ---
+
+type Segment = { text: string; color?: string };
+
+/**
+ * Render a code line: syntax tokens get their Bit color, and the half-open `intra` ranges (the
+ * characters that actually changed) are wrapped in `<mark>` — overlaid on top of the syntax tokens so
+ * a one-character edit reads clearly without losing highlighting.
+ */
+function renderLineContent(tokens: HlToken[] | null, text: string, intra?: Array<[number, number]>) {
+  const base: Segment[] = tokens
+    ? tokens.map((t) => ({ text: t.content, color: resolveTokenColor(t.color) }))
+    : [{ text }];
+
+  if (!intra || intra.length === 0) {
+    return base.map((seg, i) =>
+      seg.color ? (
+        <span key={i} style={{ color: seg.color }}>
+          {seg.text}
+        </span>
+      ) : (
+        <span key={i}>{seg.text}</span>
+      )
+    );
+  }
+
+  // overlay intra-line change ranges by splitting each syntax segment at range boundaries.
+  const out: React.ReactNode[] = [];
+  let offset = 0;
+  let key = 0;
+  for (const seg of base) {
+    const segStart = offset;
+    const segEnd = offset + seg.text.length;
+    let pos = segStart;
+    while (pos < segEnd) {
+      const boundary = nextBoundary(intra, pos, segEnd);
+      const slice = seg.text.slice(pos - segStart, boundary - segStart);
+      const changed = isChanged(intra, pos);
+      const style = seg.color ? { color: seg.color } : undefined;
+      out.push(
+        changed ? (
+          <mark key={key++} className={styles.intra} style={style}>
+            {slice}
+          </mark>
+        ) : (
+          <span key={key++} style={style}>
+            {slice}
+          </span>
+        )
+      );
+      pos = boundary;
+    }
+    offset = segEnd;
+  }
+  return out;
+}
+
+function isChanged(ranges: Array<[number, number]>, pos: number): boolean {
+  return ranges.some(([s, e]) => pos >= s && pos < e);
+}
+
+/** the next character offset (≤ limit) at which "changed-ness" flips, so we can slice on boundaries. */
+function nextBoundary(ranges: Array<[number, number]>, pos: number, limit: number): number {
+  let next = limit;
+  for (const [s, e] of ranges) {
+    if (s > pos && s < next) next = s;
+    if (e > pos && e < next) next = e;
+  }
+  return next;
+}
+
+// --- render-row assembly ---
+
+function buildRenderRows(
+  sections: DiffSection[],
+  gapStates: Record<string, GapState>,
+  view: DiffViewMode
+): RenderRow[] {
+  const rows: RenderRow[] = [];
+  let buffer: DiffLineItem[] = [];
+  let keyCounter = 0;
+
+  const flush = () => {
+    if (buffer.length === 0) return;
+    if (view === 'split') {
+      for (const pair of pairForSplit(buffer)) {
+        rows.push({ kind: 'split', left: pair.left, right: pair.right, key: `r${keyCounter++}` });
+      }
+    } else {
+      for (const item of buffer) {
+        rows.push({ kind: 'unified', item, key: `r${keyCounter++}` });
+      }
+    }
+    buffer = [];
+  };
+
+  for (const section of sections) {
+    if (section.kind === 'lines') {
+      buffer.push(...section.items);
+      continue;
+    }
+    // gap: reveal lines from each end per expansion state, with an expander for the remainder.
+    const state = gapStates[section.id] ?? { top: 0, bottom: 0 };
+    const top = section.hidden.slice(0, state.top);
+    const bottom = state.bottom > 0 ? section.hidden.slice(section.hidden.length - state.bottom) : [];
+    const remaining = section.hidden.length - state.top - state.bottom;
+    buffer.push(...top);
+    if (remaining > 0) {
+      flush();
+      rows.push({ kind: 'gap', id: section.id, hidden: section.hidden, state, key: `g${section.id}` });
+    }
+    buffer.push(...bottom);
+  }
+  flush();
+  return rows;
+}
+
+// --- small bits ---
+
+function ChangeBar({ additions, deletions }: { additions: number; deletions: number }) {
+  const total = additions + deletions;
+  if (total === 0) return null;
+  const max = 5;
+  const a = Math.round((additions / total) * max);
+  const d = Math.max(0, Math.min(max - a, Math.round((deletions / total) * max)));
+  const e = Math.max(0, max - a - d);
+  return (
+    <span className={styles.changeBar}>
+      {Array.from({ length: a }).map((_, i) => (
+        <span key={`a${i}`} className={styles.barAdd} />
+      ))}
+      {Array.from({ length: d }).map((_, i) => (
+        <span key={`d${i}`} className={styles.barDel} />
+      ))}
+      {Array.from({ length: e }).map((_, i) => (
+        <span key={`e${i}`} className={styles.barNeutral} />
+      ))}
+    </span>
+  );
+}
+
+function Chevron({ open }: { open: boolean }) {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" className={classNames(styles.chevron, open && styles.chevronOpen)}>
+      <path
+        d="M4 2.5L7.5 6L4 9.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ExpandUp() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12">
+      <path
+        d="M3 7L6 4L9 7"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ExpandDown() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12">
+      <path
+        d="M3 5L6 8L9 5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/components/ui/diff-viewer/highlighter.ts b/components/ui/diff-viewer/highlighter.ts
new file mode 100644
index 000000000000..d2953d92b958
--- /dev/null
+++ b/components/ui/diff-viewer/highlighter.ts
@@ -0,0 +1,155 @@
+import { useEffect, useMemo, useState } from 'react';
+import { bitShikiTheme, BIT_THEME_NAME } from './shiki-bit-theme';
+// shiki's ESM-only subpath imports are contained in this one boundary module (see its header for
+// why); everything below is compiled against its explicitly-typed re-exports, not shiki directly.
+import {
+  createHighlighterCore,
+  createJavaScriptRegexEngine,
+  LANG_IMPORTERS,
+  type ShikiHighlighterCore as HighlighterCore,
+} from './shiki-imports';
+
+/** A single highlighted token: its text and the (sentinel) color shiki assigned to it. */
+export type HlToken = { content: string; color?: string };
+/** A file's tokens, indexed by line (line `n` is `lines[n - 1]`). */
+export type HlLines = HlToken[][];
+
+/** map a file extension to a shiki language id (and the aliases shiki itself understands). */
+const EXTENSION_TO_LANG: Record<string, string> = {
+  ts: 'typescript',
+  mts: 'typescript',
+  cts: 'typescript',
+  tsx: 'tsx',
+  js: 'javascript',
+  mjs: 'javascript',
+  cjs: 'javascript',
+  jsx: 'jsx',
+  json: 'json',
+  jsonc: 'jsonc',
+  json5: 'jsonc',
+  css: 'css',
+  scss: 'scss',
+  sass: 'scss',
+  less: 'less',
+  html: 'html',
+  htm: 'html',
+  vue: 'vue',
+  md: 'markdown',
+  markdown: 'markdown',
+  mdx: 'mdx',
+  yml: 'yaml',
+  yaml: 'yaml',
+  py: 'python',
+  go: 'go',
+  rs: 'rust',
+  java: 'java',
+  sh: 'shellscript',
+  bash: 'shellscript',
+  zsh: 'shellscript',
+  graphql: 'graphql',
+  gql: 'graphql',
+  sql: 'sql',
+};
+
+export function langFromFileName(fileName?: string): string | undefined {
+  if (!fileName) return undefined;
+  const ext = fileName.split('.').pop()?.toLowerCase();
+  if (!ext) return undefined;
+  return EXTENSION_TO_LANG[ext];
+}
+
+let highlighterPromise: Promise<HighlighterCore> | undefined;
+const loadedLangs = new Set<string>();
+const langPromises = new Map<string, Promise<boolean>>();
+
+/** lazily create the single shared highlighter (JS regex engine → no WASM, synchronous tokenizing). */
+function getHighlighter(): Promise<HighlighterCore> {
+  // Capture in a const rather than relying on `??=` control-flow narrowing — older TS (the per-env
+  // capsule compiler) doesn't narrow `Promise<...> | undefined` after `??=`, so `return` would error.
+  const existing = highlighterPromise;
+  if (existing) return existing;
+  const created = createHighlighterCore({
+    themes: [bitShikiTheme],
+    langs: [],
+    // forgiving: don't throw on grammar patterns the JS engine can't compile — skip them instead.
+    engine: createJavaScriptRegexEngine({ forgiving: true }),
+  });
+  highlighterPromise = created;
+  return created;
+}
+
+/** ensure a language grammar is loaded into the shared highlighter. Resolves `false` if unsupported. */
+async function ensureLanguage(lang: string): Promise<boolean> {
+  if (loadedLangs.has(lang)) return true;
+  const importer = LANG_IMPORTERS[lang];
+  if (!importer) return false;
+  let promise = langPromises.get(lang);
+  if (!promise) {
+    promise = (async () => {
+      try {
+        const hl = await getHighlighter();
+        const mod = await importer();
+        await hl.loadLanguage(mod.default ?? mod);
+        loadedLangs.add(lang);
+        return true;
+      } catch {
+        // don't cache a transient failure (e.g. a dynamic-chunk load error) — dropping the memoized
+        // promise lets the next call retry instead of leaving the language permanently unhighlighted.
+        langPromises.delete(lang);
+        return false;
+      }
+    })();
+    langPromises.set(lang, promise);
+  }
+  return promise;
+}
+
+// the synchronous instance, captured once the highlighter promise resolves the first time.
+let highlighterInstance: HighlighterCore | undefined;
+
+function tokenize(content: string, lang: string): HlLines | null {
+  if (!highlighterInstance || !loadedLangs.has(lang)) return null;
+  try {
+    const tokenLines = highlighterInstance.codeToTokensBase(content, {
+      lang,
+      theme: BIT_THEME_NAME,
+    });
+    return tokenLines.map((line) => line.map((t) => ({ content: t.content, color: t.color })));
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Highlight a whole file's content into per-line tokens. The full file is tokenized at once (not
+ * line-by-line) so multi-line constructs — template strings, block comments, JSX — stay correct.
+ * While the grammar loads (or if the language is unsupported) returns `null`; callers should fall
+ * back to rendering plain text, then re-render when tokens arrive.
+ */
+export function useHighlightedLines(content: string | undefined, lang: string | undefined): HlLines | null {
+  // bumped once the grammar finishes loading, to trigger a single re-tokenize when it's ready.
+  const [version, setVersion] = useState(0);
+
+  useEffect(() => {
+    let cancelled = false;
+    if (!lang || content === undefined) return undefined;
+    if (loadedLangs.has(lang) && highlighterInstance) return undefined;
+    ensureLanguage(lang).then((ok) => {
+      if (!ok || cancelled) return undefined;
+      // ensure the sync instance is captured before we ask the tree to re-tokenize
+      return getHighlighter().then((hl) => {
+        highlighterInstance = hl;
+        if (!cancelled) setVersion((n) => n + 1);
+      });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [content, lang]);
+
+  // memoized so re-renders from view/expand state don't re-tokenize the whole file.
+  return useMemo(() => {
+    if (!lang || content === undefined) return null;
+    return tokenize(content, lang);
+  }, [content, lang, version]);
+}
diff --git a/components/ui/diff-viewer/index.ts b/components/ui/diff-viewer/index.ts
new file mode 100644
index 000000000000..ea26595dafcf
--- /dev/null
+++ b/components/ui/diff-viewer/index.ts
@@ -0,0 +1,7 @@
+export { DiffViewer } from './diff-viewer';
+export type { DiffViewerProps, DiffViewMode, DiffFileStatus } from './diff-viewer';
+export { computeDiffLines, buildSections, statsFromItems, pairForSplit, intraLineDiff } from './diff-model';
+export type { DiffLineItem, DiffLineType, DiffSection, DiffStats, SplitRow } from './diff-model';
+export { useHighlightedLines, langFromFileName } from './highlighter';
+export type { HlToken, HlLines } from './highlighter';
+export { bitShikiTheme, resolveTokenColor, BIT_THEME_NAME } from './shiki-bit-theme';
diff --git a/components/ui/diff-viewer/shiki-bit-theme.ts b/components/ui/diff-viewer/shiki-bit-theme.ts
new file mode 100644
index 000000000000..65531df832a0
--- /dev/null
+++ b/components/ui/diff-viewer/shiki-bit-theme.ts
@@ -0,0 +1,161 @@
+/**
+ * Bit syntax theme for shiki.
+ *
+ * shiki resolves a TextMate theme's `foreground` to a concrete color string and returns it on each
+ * token. We don't want shiki to pick *visual* colors — Bit's look must come from the design-system
+ * CSS variables (so light/dark themes apply automatically). To bridge the two worlds we paint every
+ * scope with a unique **sentinel** hex that never reaches the screen; the renderer maps that sentinel
+ * back to the matching Bit CSS variable (see {@link SENTINEL_TO_CSS_VAR}). This keeps shiki's job to
+ * "which semantic category is this token" and leaves "what color is that category" to Bit's theme.
+ */
+
+/** sentinel hex → semantic category. Unique, never rendered; translated to a Bit CSS var at render. */
+export const SENTINEL = {
+  default: '#e1e100',
+  keyword: '#e10001',
+  string: '#e10002',
+  number: '#e10003',
+  comment: '#e10004',
+  component: '#e10005',
+  operator: '#e10006',
+  function: '#e10007',
+  property: '#e10008',
+} as const;
+
+/**
+ * Map each sentinel to a Bit design-system CSS variable (with a sensible fallback so highlighting is
+ * never invisible if a theme is missing). Bit exposes six syntax tokens — function/property fold onto
+ * the closest of those six. `default` returns `undefined` so the token simply inherits the code color.
+ */
+export const SENTINEL_TO_CSS_VAR: Record<string, string | undefined> = {
+  [SENTINEL.default]: undefined,
+  [SENTINEL.keyword]: 'var(--syntax-keyword-color, var(--syntax-keyword, #8250df))',
+  [SENTINEL.string]: 'var(--syntax-string-color, var(--syntax-string, #b35827))',
+  [SENTINEL.number]: 'var(--syntax-number-color, var(--syntax-number, #1a7f37))',
+  [SENTINEL.comment]: 'var(--syntax-comment-color, var(--syntax-comment, #9598a1))',
+  [SENTINEL.component]: 'var(--syntax-component-color, var(--syntax-component, #0969da))',
+  [SENTINEL.operator]: 'var(--syntax-operator-color, var(--syntax-operator, #707279))',
+  // function & property fold onto the closest available Bit token
+  [SENTINEL.function]: 'var(--syntax-component-color, var(--syntax-component, #0969da))',
+  [SENTINEL.property]: 'var(--on-surface-color, #2b2b2b)',
+};
+
+/** resolve a shiki token color (sentinel) to the Bit CSS var, tolerant of case normalization. */
+export function resolveTokenColor(color?: string): string | undefined {
+  if (!color) return undefined;
+  return SENTINEL_TO_CSS_VAR[color.toLowerCase()];
+}
+
+type ThemeSetting = { scope?: string | string[]; settings: { foreground?: string; fontStyle?: string } };
+
+const settings: ThemeSetting[] = [
+  { settings: { foreground: SENTINEL.default } },
+  {
+    scope: ['comment', 'punctuation.definition.comment', 'string.comment'],
+    settings: { foreground: SENTINEL.comment, fontStyle: 'italic' },
+  },
+  {
+    scope: [
+      'string',
+      'string.quoted',
+      'string.template',
+      'constant.character',
+      'constant.other.symbol',
+      'punctuation.definition.string',
+      'meta.embedded.line.css string',
+    ],
+    settings: { foreground: SENTINEL.string },
+  },
+  {
+    scope: [
+      'constant.numeric',
+      'constant.language.boolean',
+      'constant.language.null',
+      'constant.language.undefined',
+      'constant.language.nan',
+      'constant.language.infinity',
+      'variable.other.constant',
+      'constant.other',
+    ],
+    settings: { foreground: SENTINEL.number },
+  },
+  {
+    scope: [
+      'keyword',
+      'keyword.control',
+      'keyword.other',
+      'storage',
+      'storage.type',
+      'storage.modifier',
+      'keyword.operator.new',
+      'keyword.operator.expression',
+      'keyword.operator.logical',
+      'variable.language.this',
+      'variable.language.super',
+      'support.type.primitive',
+      'constant.language',
+      'markup.bold',
+      'markup.heading',
+    ],
+    settings: { foreground: SENTINEL.keyword },
+  },
+  {
+    scope: [
+      'entity.name.type',
+      'entity.name.class',
+      'entity.other.inherited-class',
+      'support.class',
+      'support.type',
+      'entity.name.namespace',
+      'entity.name.tag',
+      'entity.other.attribute-name',
+      'meta.type.annotation',
+      'support.type.object',
+      'meta.tag',
+    ],
+    settings: { foreground: SENTINEL.component },
+  },
+  {
+    scope: [
+      'entity.name.function',
+      'support.function',
+      'meta.function-call entity.name.function',
+      'entity.name.function.member',
+      'variable.function',
+      'meta.definition.method entity.name.function',
+    ],
+    settings: { foreground: SENTINEL.function },
+  },
+  {
+    scope: [
+      'keyword.operator',
+      'punctuation',
+      'meta.brace',
+      'meta.delimiter',
+      'punctuation.separator',
+      'punctuation.terminator',
+      'punctuation.accessor',
+      'storage.type.function.arrow',
+    ],
+    settings: { foreground: SENTINEL.operator },
+  },
+  {
+    scope: ['variable.other.property', 'meta.object-literal.key', 'support.variable.property'],
+    settings: { foreground: SENTINEL.property },
+  },
+];
+
+/** The Bit shiki theme — sentinel-painted; colors are translated to Bit CSS vars in the renderer. */
+export const bitShikiTheme = {
+  name: 'bit',
+  type: 'dark' as const,
+  colors: {
+    'editor.foreground': SENTINEL.default,
+    'editor.background': '#00000000',
+  },
+  fg: SENTINEL.default,
+  bg: '#00000000',
+  settings,
+};
+
+export const BIT_THEME_NAME = 'bit';
diff --git a/components/ui/diff-viewer/shiki-imports.ts b/components/ui/diff-viewer/shiki-imports.ts
new file mode 100644
index 000000000000..84ac367a4ca9
--- /dev/null
+++ b/components/ui/diff-viewer/shiki-imports.ts
@@ -0,0 +1,58 @@
+// @ts-nocheck
+/**
+ * Boundary module that owns every import of shiki's ESM-only subpath entry points.
+ *
+ * shiki ships its subpaths (`shiki/core`, `@shikijs/engine-javascript`, `@shikijs/langs/*`)
+ * as ESM behind an `exports` map, with types in `.d.mts`. This repo type-checks with classic
+ * `moduleResolution: "node"` and (at the root) `module: "commonjs"`, which can't read `exports`
+ * maps or `.d.mts` — so `tsc` either can't find these modules or finds the `.d.mts` and rejects
+ * it under the current resolution. The bundler (rspack/webpack) resolves them correctly at build
+ * time; the mismatch is purely a type-check artifact.
+ *
+ * Rather than declare fake ambient modules (which TypeScript only uses as a *fallback*, so they
+ * silently stop working the moment the real package is installed in the compile graph — exactly
+ * what broke CI), this one file opts out of type-checking with `@ts-nocheck` and re-exports a
+ * small, explicitly-typed surface. Every consumer (`highlighter.ts`) stays fully type-checked
+ * against these annotations; only this ESM boundary is exempt, and the fix works identically
+ * under root `tsc`, every env capsule, and the bundler regardless of what's installed.
+ */
+import { createHighlighterCore as _createHighlighterCore } from 'shiki/core';
+import { createJavaScriptRegexEngine as _createJavaScriptRegexEngine } from '@shikijs/engine-javascript';
+
+/** A single highlighted token as shiki returns it. */
+export type ShikiHighlighterCore = {
+  loadLanguage: (lang: unknown) => Promise<void>;
+  codeToTokensBase: (
+    code: string,
+    options: { lang: string; theme: string }
+  ) => Array<Array<{ content: string; color?: string; offset?: number }>>;
+};
+
+export const createHighlighterCore: (options: unknown) => Promise<ShikiHighlighterCore> = _createHighlighterCore;
+
+export const createJavaScriptRegexEngine: (options?: { forgiving?: boolean }) => unknown = _createJavaScriptRegexEngine;
+
+/**
+ * shiki grammars are large, so each language is imported lazily and code-split. The map keys are the
+ * normalized shiki language ids; values are dynamic imports of `@shikijs/langs/*`. Add a language by
+ * adding an entry here — nothing else needs to change.
+ */
+export const LANG_IMPORTERS: Record<string, () => Promise<{ default?: unknown }>> = {
+  typescript: () => import('@shikijs/langs/typescript'),
+  tsx: () => import('@shikijs/langs/tsx'),
+  javascript: () => import('@shikijs/langs/javascript'),
+  jsx: () => import('@shikijs/langs/jsx'),
+  json: () => import('@shikijs/langs/json'),
+  jsonc: () => import('@shikijs/langs/jsonc'),
+  css: () => import('@shikijs/langs/css'),
+  scss: () => import('@shikijs/langs/scss'),
+  less: () => import('@shikijs/langs/less'),
+  html: () => import('@shikijs/langs/html'),
+  vue: () => import('@shikijs/langs/vue'),
+  markdown: () => import('@shikijs/langs/markdown'),
+  mdx: () => import('@shikijs/langs/mdx'),
+  yaml: () => import('@shikijs/langs/yaml'),
+  shellscript: () => import('@shikijs/langs/shellscript'),
+  graphql: () => import('@shikijs/langs/graphql'),
+  sql: () => import('@shikijs/langs/sql'),
+};
diff --git a/components/ui/hooks/use-data-query/index.ts b/components/ui/hooks/use-data-query/index.ts
new file mode 100644
index 000000000000..19b514847905
--- /dev/null
+++ b/components/ui/hooks/use-data-query/index.ts
@@ -0,0 +1 @@
+export { DataQueryResult, useDataQuery } from './use-data-query';
diff --git a/components/ui/hooks/use-data-query/use-data-query.ts b/components/ui/hooks/use-data-query/use-data-query.ts
new file mode 100644
index 000000000000..143c0d60a4d8
--- /dev/null
+++ b/components/ui/hooks/use-data-query/use-data-query.ts
@@ -0,0 +1,53 @@
+import { useContext, useEffect } from 'react';
+import { useQuery } from '@apollo/client';
+import type {
+  OperationVariables,
+  QueryResult,
+  QueryHookOptions,
+  DocumentNode,
+  ApolloError,
+  FetchMoreQueryOptions,
+  ApolloQueryResult,
+} from '@apollo/client';
+
+import { NotificationContext } from '@teambit/ui-foundation.ui.notifications.notification-context';
+
+export type DataQueryResult<TData = any, TVariables extends OperationVariables = OperationVariables> = Omit<
+  QueryResult<TData, TVariables>,
+  'data' | 'previousData' | 'fetchMore' | 'refetch'
+> & {
+  data?: TData | undefined;
+  previousData?: TData | undefined;
+  fetchMore: (options: FetchMoreQueryOptions<TVariables, TData>) => Promise<ApolloQueryResult<TData>>;
+  refetch: (variables?: Partial<TVariables>) => Promise<ApolloQueryResult<TData>>;
+};
+
+// Previously this hook also called `useLoader(loading)` from `@teambit/ui-foundation.ui.global-loader`,
+// which mutated the root `ClientContext`'s `isLoading` state on every query transition and forced a
+// re-render of the entire children subtree. That coupling was removed: each query's loading state now
+// stays local to its calling component. The global loader ribbon should subscribe to its own signal
+// (e.g. an Apollo link or dedicated hook) instead of inlining itself into every query.
+export function useDataQuery<TData = any, TVariables extends OperationVariables = OperationVariables>(
+  query: DocumentNode,
+  options?: QueryHookOptions<TData, TVariables>
+): DataQueryResult {
+  const res = useQuery<TData, TVariables>(query, options);
+  const notifications = useContext(NotificationContext);
+  const { error } = res;
+
+  // Showing a notification mutates the NotificationContext provider's state. Doing it inline during
+  // render triggers React's "Cannot update a component while rendering a different component" warning
+  // (and an extra render) for every erroring query, so it must run as a post-render effect instead.
+  useEffect(() => {
+    if (error) {
+      notifications.error(apolloErrorToString(error));
+    }
+  }, [error]);
+
+  return res as DataQueryResult;
+}
+
+// @TODO - improve error extraction
+function apolloErrorToString(error: ApolloError) {
+  return error.toString();
+}
diff --git a/components/ui/inline-code-compare/index.ts b/components/ui/inline-code-compare/index.ts
new file mode 100644
index 000000000000..757b65717562
--- /dev/null
+++ b/components/ui/inline-code-compare/index.ts
@@ -0,0 +1,2 @@
+export { InlineCodeCompare } from './inline-code-compare';
+export type { InlineCodeCompareProps } from './inline-code-compare';
diff --git a/components/ui/inline-code-compare/inline-code-compare.tsx b/components/ui/inline-code-compare/inline-code-compare.tsx
new file mode 100644
index 000000000000..b0c5742527df
--- /dev/null
+++ b/components/ui/inline-code-compare/inline-code-compare.tsx
@@ -0,0 +1,152 @@
+import React, { useMemo } from 'react';
+import { useComponentCompare, InlineCompareEmpty } from '@teambit/component.ui.component-compare.context';
+import { useDiffMode } from '@teambit/component.ui.component-compare.component-compare';
+import { useFileContent } from '@teambit/code.ui.queries.get-file-content';
+import { DiffLoadingSkeleton, type DiffDisplayMode } from '@teambit/code.ui.inline-diff-viewer';
+import {
+  DiffViewer,
+  computeDiffLines,
+  statsFromItems,
+  type DiffViewMode,
+  type DiffFileStatus,
+} from '@teambit/code.ui.diff-viewer';
+
+export type InlineCodeCompareProps = {
+  /** Split or unified diff mode */
+  diffMode?: DiffDisplayMode;
+};
+
+type FileCompareData = { status: string; baseContent?: string; compareContent?: string };
+
+type ReadyFile = { fileName: string; status: DiffFileStatus; oldContent: string; newContent: string };
+
+/** map the bulk-payload status (uppercase) onto the DiffViewer status. */
+function toDiffStatus(status: string): DiffFileStatus {
+  if (status === 'NEW') return 'new';
+  if (status === 'DELETED') return 'deleted';
+  return 'modified';
+}
+
+// `grid-template-columns: minmax(0, 1fr)` hard-constrains every file row to the pane width: a grid
+// item in a `minmax(0, ...)` track cannot be widened by its (wide) content, so a long code line can
+// only scroll inside the diff body — it can never push the row, pane, or page horizontally wider.
+const GRID_WRAP: React.CSSProperties = { display: 'grid', gridTemplateColumns: 'minmax(0, 1fr)' };
+const CELL_WRAP: React.CSSProperties = { minWidth: 0 };
+
+export function InlineCodeCompare({ diffMode: diffModeProp }: InlineCodeCompareProps) {
+  const contextDiffMode = useDiffMode();
+  const diffMode = diffModeProp || contextDiffMode;
+  const view: DiffViewMode = diffMode === 'unified' ? 'unified' : 'split';
+  const componentCompare = useComponentCompare();
+
+  const fileCompareDataByName = (componentCompare as any)?.fileCompareDataByName as
+    | Map<string, FileCompareData>
+    | undefined
+    | null;
+  const compareModel = componentCompare?.compare?.model;
+  const baseModel = componentCompare?.base?.model;
+  const componentIdStr = (compareModel?.id || baseModel?.id)?.toStringWithoutVersion?.() || '';
+
+  const { files, newFiles } = useMemo(() => {
+    if (!fileCompareDataByName) return { files: [] as ReadyFile[], newFiles: [] as string[] };
+    const ready: ReadyFile[] = [];
+    const pending: string[] = [];
+    for (const [fileName, fileData] of fileCompareDataByName.entries()) {
+      if (fileData.status === 'UNCHANGED') continue;
+      // NEW files whose content hasn't arrived in the bulk payload are fetched lazily below.
+      if (fileData.status === 'NEW' && fileData.compareContent === undefined) {
+        pending.push(fileName);
+        continue;
+      }
+      const oldContent = fileData.baseContent || '';
+      const newContent = fileData.compareContent || '';
+      // drop no-op entries (identical content) so only real changes render — matches prior behavior.
+      const stats = statsFromItems(computeDiffLines(oldContent, newContent));
+      if (stats.additions === 0 && stats.deletions === 0) continue;
+      ready.push({ fileName, status: toDiffStatus(fileData.status), oldContent, newContent });
+    }
+    return { files: ready, newFiles: pending };
+  }, [fileCompareDataByName]);
+
+  if (!componentCompare || componentCompare.loading || fileCompareDataByName === undefined) {
+    return <DiffLoadingSkeleton />;
+  }
+
+  if (files.length === 0 && newFiles.length === 0) {
+    return <InlineCompareEmpty message="No code changes" />;
+  }
+
+  // GRID_WRAP (minmax(0,1fr)) hard-constrains every file row to the pane width so a long code line can
+  // only scroll inside the diff body — never widening the row, pane, or page. More reliable than
+  // `contain: inline-size` through the `content-visibility`/context wrappers between here and the pane.
+  return (
+    <div style={GRID_WRAP}>
+      {files.map((file) => (
+        <div
+          key={file.fileName}
+          data-file-id={componentIdStr ? `${componentIdStr}:${file.fileName}` : undefined}
+          style={CELL_WRAP}
+        >
+          <DiffViewer
+            fileName={file.fileName}
+            oldContent={file.oldContent}
+            newContent={file.newContent}
+            status={file.status}
+            view={view}
+            showViewToggle={false}
+            virtualize={false}
+            wrap
+          />
+        </div>
+      ))}
+      {newFiles.map((fileName) => (
+        <NewFileDiff
+          key={fileName}
+          fileName={fileName}
+          componentId={compareModel?.id}
+          view={view}
+          dataFileId={componentIdStr ? `${componentIdStr}:${fileName}` : undefined}
+        />
+      ))}
+    </div>
+  );
+}
+
+function NewFileDiff({
+  fileName,
+  componentId,
+  view,
+  dataFileId,
+}: {
+  fileName: string;
+  componentId: any;
+  view: DiffViewMode;
+  dataFileId?: string;
+}) {
+  const { fileContent, loading } = useFileContent(componentId, fileName);
+
+  if (loading) {
+    return (
+      <div data-file-id={dataFileId} style={CELL_WRAP}>
+        <DiffLoadingSkeleton />
+      </div>
+    );
+  }
+
+  if (!fileContent) return null;
+
+  return (
+    <div data-file-id={dataFileId} style={CELL_WRAP}>
+      <DiffViewer
+        fileName={fileName}
+        oldContent=""
+        newContent={fileContent}
+        status="new"
+        view={view}
+        showViewToggle={false}
+        virtualize={false}
+        wrap
+      />
+    </div>
+  );
+}
diff --git a/components/ui/inline-config-compare/index.ts b/components/ui/inline-config-compare/index.ts
new file mode 100644
index 000000000000..54c6ccde3a6b
--- /dev/null
+++ b/components/ui/inline-config-compare/index.ts
@@ -0,0 +1,2 @@
+export { InlineConfigCompare } from './inline-config-compare';
+export type { InlineConfigCompareProps } from './inline-config-compare';
diff --git a/components/ui/inline-config-compare/inline-config-compare.tsx b/components/ui/inline-config-compare/inline-config-compare.tsx
new file mode 100644
index 000000000000..ad39bc8ba926
--- /dev/null
+++ b/components/ui/inline-config-compare/inline-config-compare.tsx
@@ -0,0 +1,172 @@
+import React, { useMemo } from 'react';
+import { gql } from '@apollo/client';
+import { useComponentCompare, InlineCompareEmpty } from '@teambit/component.ui.component-compare.context';
+import { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
+import { useDiffMode } from '@teambit/component.ui.component-compare.component-compare';
+import {
+  DiffFileRenderer,
+  DiffLoadingSkeleton,
+  computeDiffFromContent,
+  type DiffHunk,
+  type DiffDisplayMode,
+} from '@teambit/code.ui.inline-diff-viewer';
+
+export type InlineConfigCompareProps = {
+  diffMode?: DiffDisplayMode;
+};
+
+const GET_COMPONENT_ASPECTS = gql`
+  query GetComponentAspectData($id: String!) {
+    getHost {
+      id
+      get(id: $id) {
+        id {
+          name
+          version
+          scope
+        }
+        aspects {
+          id
+          config
+          data
+          icon
+        }
+      }
+    }
+  }
+`;
+
+type AspectData = {
+  id: string;
+  config: any;
+  data: any;
+  icon?: string;
+};
+
+type AspectDiff = {
+  aspectId: string;
+  configHunks: DiffHunk[];
+  configAdditions: number;
+  configDeletions: number;
+  dataHunks: DiffHunk[];
+  dataAdditions: number;
+  dataDeletions: number;
+};
+
+export function InlineConfigCompare({ diffMode: diffModeProp }: InlineConfigCompareProps) {
+  const contextDiffMode = useDiffMode();
+  const diffMode = diffModeProp || contextDiffMode;
+  const componentCompare = useComponentCompare();
+
+  const baseModel = componentCompare?.base?.model;
+  const compareModel = componentCompare?.compare?.model;
+  const baseId = baseModel?.id?.toString();
+  const compareId = compareModel?.id?.toString();
+
+  const { data: baseData, loading: baseLoading } = useDataQuery(GET_COMPONENT_ASPECTS, {
+    variables: { id: baseId },
+    skip: !baseId,
+    fetchPolicy: 'no-cache',
+  });
+
+  const { data: compareData, loading: compareLoading } = useDataQuery(GET_COMPONENT_ASPECTS, {
+    variables: { id: compareId },
+    skip: !compareId,
+    fetchPolicy: 'no-cache',
+  });
+
+  const loading = baseLoading || compareLoading || componentCompare?.loading;
+
+  const baseAspects: AspectData[] = baseData?.getHost?.get?.aspects || [];
+  const compareAspects: AspectData[] = compareData?.getHost?.get?.aspects || [];
+
+  const componentIdStr = (compareModel?.id || baseModel?.id)?.toStringWithoutVersion?.() || '';
+
+  const aspectDiffs = useMemo(() => {
+    if (loading) return [];
+
+    const baseMap = new Map<string, AspectData>();
+    baseAspects.forEach((a) => baseMap.set(a.id, a));
+
+    const compareMap = new Map<string, AspectData>();
+    compareAspects.forEach((a) => compareMap.set(a.id, a));
+
+    const allIds = new Set([...baseMap.keys(), ...compareMap.keys()]);
+    const diffs: AspectDiff[] = [];
+
+    for (const aspectId of allIds) {
+      const baseAspect = baseMap.get(aspectId);
+      const compareAspect = compareMap.get(aspectId);
+
+      const baseConfig = ensureTrailingNewline(JSON.stringify(baseAspect?.config ?? null, null, 2));
+      const compareConfig = ensureTrailingNewline(JSON.stringify(compareAspect?.config ?? null, null, 2));
+      const baseDataStr = ensureTrailingNewline(JSON.stringify(baseAspect?.data ?? null, null, 2));
+      const compareDataStr = ensureTrailingNewline(JSON.stringify(compareAspect?.data ?? null, null, 2));
+
+      const configChanged = baseConfig !== compareConfig;
+      const dataChanged = baseDataStr !== compareDataStr;
+
+      if (!configChanged && !dataChanged) continue;
+
+      const configHunks = configChanged ? computeDiffFromContent(baseConfig, compareConfig) : [];
+      const dataHunks = dataChanged ? computeDiffFromContent(baseDataStr, compareDataStr) : [];
+
+      diffs.push({
+        aspectId,
+        configHunks,
+        configAdditions: configHunks.reduce((s, h) => s + h.lines.filter((l) => l.type === 'added').length, 0),
+        configDeletions: configHunks.reduce((s, h) => s + h.lines.filter((l) => l.type === 'removed').length, 0),
+        dataHunks,
+        dataAdditions: dataHunks.reduce((s, h) => s + h.lines.filter((l) => l.type === 'added').length, 0),
+        dataDeletions: dataHunks.reduce((s, h) => s + h.lines.filter((l) => l.type === 'removed').length, 0),
+      });
+    }
+
+    return diffs;
+    // key on the stable Apollo data refs — baseAspects/compareAspects are re-derived (`|| []`) every render
+  }, [loading, baseData, compareData]);
+
+  if (loading) {
+    return <DiffLoadingSkeleton sections={2} />;
+  }
+
+  if (aspectDiffs.length === 0) {
+    return <InlineCompareEmpty message="No configuration changes" />;
+  }
+
+  return (
+    <div>
+      {aspectDiffs.map((aspect) => {
+        const shortName = aspect.aspectId.split('/').pop() || aspect.aspectId;
+        return (
+          <div key={aspect.aspectId} data-file-id={componentIdStr ? `${componentIdStr}:${shortName}` : undefined}>
+            {aspect.configHunks.length > 0 && (
+              <DiffFileRenderer
+                fileName={`${shortName} — config`}
+                hunks={aspect.configHunks}
+                status="MODIFIED"
+                diffMode={diffMode}
+                additions={aspect.configAdditions}
+                deletions={aspect.configDeletions}
+              />
+            )}
+            {aspect.dataHunks.length > 0 && (
+              <DiffFileRenderer
+                fileName={`${shortName} — data`}
+                hunks={aspect.dataHunks}
+                status="MODIFIED"
+                diffMode={diffMode}
+                additions={aspect.dataAdditions}
+                deletions={aspect.dataDeletions}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function ensureTrailingNewline(s: string): string {
+  return s.endsWith('\n') ? s : s + '\n';
+}
diff --git a/components/ui/inline-deps-compare/index.ts b/components/ui/inline-deps-compare/index.ts
new file mode 100644
index 000000000000..f6114e573fba
--- /dev/null
+++ b/components/ui/inline-deps-compare/index.ts
@@ -0,0 +1,2 @@
+export { InlineDepsCompare } from './inline-deps-compare';
+export type { InlineDepsCompareProps } from './inline-deps-compare';
diff --git a/components/ui/inline-deps-compare/inline-deps-compare.tsx b/components/ui/inline-deps-compare/inline-deps-compare.tsx
new file mode 100644
index 000000000000..bdce16a794d8
--- /dev/null
+++ b/components/ui/inline-deps-compare/inline-deps-compare.tsx
@@ -0,0 +1,67 @@
+import React, { useMemo } from 'react';
+import { useComponentCompare } from '@teambit/component.ui.component-compare.context';
+import { ComponentID } from '@teambit/component-id';
+import { ComponentUrl } from '@teambit/component.modules.component-url';
+import {
+  DepsDiffTable,
+  computeDepsDiff,
+  type RawDep,
+  type DepDiffEntry,
+} from '@teambit/dependencies.ui.deps-diff-table';
+import { DiffLoadingSkeleton } from '@teambit/code.ui.inline-diff-viewer';
+
+export type InlineDepsCompareProps = {};
+
+export function InlineDepsCompare(_props: InlineDepsCompareProps) {
+  const componentCompare = useComponentCompare();
+
+  const { entries, baseLabel, compareLabel } = useMemo(() => {
+    const base = componentCompare?.base;
+    const compare = componentCompare?.compare;
+    if (!base?.descriptor || !compare?.descriptor) {
+      return { entries: [], baseLabel: 'Base', compareLabel: 'Compare' };
+    }
+
+    const baseDepsAspect = base.descriptor.get<any>('teambit.dependencies/dependency-resolver');
+    const compareDepsAspect = compare.descriptor.get<any>('teambit.dependencies/dependency-resolver');
+
+    const baseDeps: RawDep[] = baseDepsAspect?.data?.dependencies || baseDepsAspect?.dependencies || [];
+    const compareDeps: RawDep[] = compareDepsAspect?.data?.dependencies || compareDepsAspect?.dependencies || [];
+
+    const shortenVersion = (v?: string) => (v?.includes('.') ? v : v?.substring(0, 6));
+
+    const rawEntries = computeDepsDiff(baseDeps, compareDeps);
+
+    const entriesWithUrls: DepDiffEntry[] = rawEntries.map((entry) => {
+      if (entry.status !== 'modified' || !entry.isComponent || !entry.componentId) return entry;
+
+      try {
+        const compId = ComponentID.fromObject(entry.componentId);
+        const url = ComponentUrl.toUrl(compId, { includeVersion: false, useLocationOrigin: true });
+        const baseVersion = entry.baseComponentId?.version;
+        const compareUrl = `${url}/~compare${compId.version ? `?version=${compId.version}` : ''}${baseVersion ? `&baseVersion=${baseVersion}` : ''}`;
+        return { ...entry, compareUrl };
+      } catch {
+        return entry;
+      }
+    });
+
+    return {
+      entries: entriesWithUrls,
+      baseLabel: shortenVersion(base.model.id.version) || 'Base',
+      compareLabel: (compare as any).hasLocalChanges
+        ? 'workspace'
+        : shortenVersion(compare.model.id.version) || 'Compare',
+    };
+  }, [
+    componentCompare?.base?.model?.id?.toString(),
+    componentCompare?.compare?.model?.id?.toString(),
+    (componentCompare?.compare as any)?.hasLocalChanges,
+  ]);
+
+  if (!componentCompare || componentCompare.loading) {
+    return <DiffLoadingSkeleton />;
+  }
+
+  return <DepsDiffTable entries={entries} baseLabel={baseLabel} compareLabel={compareLabel} />;
+}
diff --git a/components/ui/inline-diff-viewer/index.ts b/components/ui/inline-diff-viewer/index.ts
new file mode 100644
index 000000000000..2e0bb4ad74b5
--- /dev/null
+++ b/components/ui/inline-diff-viewer/index.ts
@@ -0,0 +1,21 @@
+export {
+  DiffFileRenderer,
+  DiffFileHeader,
+  HighlightedCode,
+  FeedbackBadgeDisplay,
+  ChangeBar,
+  parseDiffOutput,
+  computeDiffFromContent,
+  computeNewFileHunks,
+  computeDeletedFileHunks,
+  buildFileDiffsFromMap,
+  DiffLoadingSkeleton,
+} from './inline-diff-viewer';
+export type {
+  DiffFileRendererProps,
+  DiffLine,
+  DiffHunk,
+  LineFeedback,
+  DiffDisplayMode,
+  FileDiffEntry,
+} from './inline-diff-viewer';
diff --git a/components/ui/inline-diff-viewer/inline-diff-viewer.module.scss b/components/ui/inline-diff-viewer/inline-diff-viewer.module.scss
new file mode 100644
index 000000000000..5a4f45e9f85f
--- /dev/null
+++ b/components/ui/inline-diff-viewer/inline-diff-viewer.module.scss
@@ -0,0 +1,402 @@
+$code-font: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+$border-color: var(--border-medium-color, #e8ecf0);
+$surface-color: var(--surface-color, #fff);
+$accent-color: var(--bit-accent-color, #6c5ce7);
+$text-primary: var(--on-surface-color, #1a1a2e);
+$text-secondary: var(--on-surface-medium-color, #707279);
+$text-muted: var(--on-background-medium-color, #a0aec0);
+
+.diffFile {
+  &:not(:last-child) {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
+  }
+}
+
+.diffFileHeader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 20px;
+  background: var(--surface-neutral-color, #f8f9fb);
+  border-top: 1px solid $border-color;
+  border-bottom: 1px solid $border-color;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  position: sticky;
+  top: calc(var(--group-header-height, 0px) + var(--component-header-height, 44px));
+  z-index: 2;
+}
+
+.diffFileName {
+  font-size: 13px;
+  font-weight: 600;
+  color: $text-primary;
+  font-family: $code-font;
+  letter-spacing: 0.01em;
+}
+
+.fileStatusNew {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 4px;
+  color: var(--success-color, #1a7f37);
+  background: var(--positive-bg-color, rgba(26, 127, 55, 0.1));
+  flex-shrink: 0;
+}
+
+.fileStatusModified {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 4px;
+  color: var(--warning-color, #d6a022);
+  background: var(--warning-bg-color, rgba(214, 160, 34, 0.08));
+  flex-shrink: 0;
+}
+
+.fileStatusDeleted {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 4px;
+  color: var(--on-surface-negative-bold, #cf222e);
+  background: var(--negative-bg-color, rgba(207, 34, 46, 0.08));
+  flex-shrink: 0;
+}
+
+.diffFileStats {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.diffAdditions {
+  color: var(--success-color, #1a7f37);
+}
+.diffDeletions {
+  color: var(--on-surface-negative-bold, #cf222e);
+}
+
+.diffEmptyMessage {
+  padding: 16px;
+  text-align: center;
+  color: $text-muted;
+  font-size: 12px;
+}
+
+.diffTableWrapper {
+  overflow: hidden;
+}
+
+.diffTable {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.splitTable {
+}
+
+.hunkHeader {
+  padding: 8px 16px;
+  background: transparent;
+  color: $text-muted;
+  font-size: 11px;
+  font-family: $code-font;
+  border-top: 1px solid rgba(0, 0, 0, 0.04);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
+  letter-spacing: 0.01em;
+}
+
+// --- Split view ---
+
+.splitLineNum {
+  width: 1px;
+  white-space: nowrap;
+  padding: 0 8px;
+  text-align: right;
+  font-size: 11px;
+  font-family: $code-font;
+  line-height: 24px;
+  color: var(--diff-line-num);
+  user-select: none;
+  vertical-align: top;
+  position: relative;
+  cursor: pointer;
+}
+
+.splitLineNumRemoved {
+  color: var(--on-surface-negative-bold, #cf222e);
+}
+.splitLineNumAdded {
+  color: var(--success-color, #1a7f37);
+}
+
+.splitCode {
+  width: 50%;
+  padding: 0 12px;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  font-size: 12.5px;
+  line-height: 24px;
+  font-family: $code-font;
+  vertical-align: top;
+
+  &:nth-child(2) {
+    user-select: none;
+  }
+}
+
+.splitCodeRemoved {
+  border-left: 3px solid var(--on-surface-negative-bold, #cf222e);
+  background: var(--negative-bg-color, rgba(207, 34, 46, 0.08));
+  padding-left: 9px;
+}
+
+.splitCodeAdded {
+  border-left: 3px solid var(--success-color, #1a7f37);
+  background: var(--positive-bg-color, rgba(26, 127, 55, 0.1));
+  padding-left: 9px;
+}
+
+.splitCodeEmpty {
+  background: transparent;
+}
+
+.splitGutter {
+  width: 1px;
+  padding: 0;
+  border-left: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.splitRow {
+}
+
+// --- Unified view ---
+
+.diffRow {
+  &.diffRowHovered {
+    background: rgba(108, 92, 231, 0.015);
+  }
+}
+
+.diffLineAdded {
+  border-left: 3px solid var(--success-color, #1a7f37);
+  background: var(--positive-bg-color, rgba(26, 127, 55, 0.1));
+}
+
+.diffLineRemoved {
+  border-left: 3px solid var(--on-surface-negative-bold, #cf222e);
+  background: var(--negative-bg-color, rgba(207, 34, 46, 0.08));
+  user-select: none;
+}
+
+.diffRowSelected {
+  background: rgba(108, 92, 231, 0.06) !important;
+  td {
+    position: relative;
+  }
+  td:first-child::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background: $accent-color;
+  }
+}
+
+.diffRowRangeHighlight {
+  background: rgba(108, 92, 231, 0.04) !important;
+}
+
+.lineNumCell {
+  width: 1px;
+  white-space: nowrap;
+  padding: 0 8px;
+  text-align: right;
+  font-size: 11px;
+  font-family: $code-font;
+  line-height: 24px;
+  user-select: none;
+  vertical-align: top;
+  position: relative;
+  cursor: pointer;
+}
+
+.lineNum {
+  color: var(--diff-line-num);
+}
+.lineNumAdded {
+  color: var(--success-color, #1a7f37);
+}
+.lineNumRemoved {
+  color: var(--on-surface-negative-bold, #cf222e);
+}
+
+.signCell {
+  width: 1px;
+  white-space: nowrap;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 700;
+  font-family: $code-font;
+  line-height: 22px;
+  user-select: none;
+  vertical-align: top;
+}
+
+.signAdded {
+  color: var(--success-color, #1a7f37);
+}
+.signRemoved {
+  color: var(--on-surface-negative-bold, #cf222e);
+}
+
+.codeCell {
+  padding: 0 16px 0 12px;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  word-break: normal;
+  font-size: 12.5px;
+  line-height: 24px;
+  font-family: $code-font;
+}
+
+// --- Change bar ---
+
+.changeBar {
+  display: flex;
+  gap: 1px;
+  margin-left: 4px;
+}
+
+.changeBarAdd {
+  width: 6px;
+  height: 6px;
+  border-radius: 1px;
+  background: var(--success-color, #1a7f37);
+}
+
+.changeBarDel {
+  width: 6px;
+  height: 6px;
+  border-radius: 1px;
+  background: var(--on-surface-negative-bold, #cf222e);
+}
+
+.changeBarEmpty {
+  width: 6px;
+  height: 6px;
+  border-radius: 1px;
+  background: var(--border-medium-color, #e2e8f0);
+}
+
+// --- Feedback badges ---
+
+.feedbackBadge {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  position: absolute;
+  left: -14px;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  z-index: 1;
+}
+
+.feedbackBadgeHighlighted {
+  .feedbackBadgeAvatar,
+  .feedbackBadgeInitial {
+    box-shadow:
+      0 0 0 2px $accent-color,
+      0 0 0 4px rgba(108, 92, 231, 0.2);
+  }
+}
+
+.feedbackBadgeAvatar {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 1.5px solid $surface-color;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+  object-fit: cover;
+  transition: box-shadow 0.15s ease;
+}
+
+.feedbackBadgeInitial {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: $accent-color;
+  color: white;
+  font-size: 10px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1.5px solid $surface-color;
+  transition: box-shadow 0.15s ease;
+}
+
+.feedbackBadgeCount {
+  font-size: 9px;
+  font-weight: 600;
+  color: $accent-color;
+  background: rgba(108, 92, 231, 0.1);
+  padding: 0 4px;
+  border-radius: 6px;
+  line-height: 14px;
+}
+
+// --- loading skeleton (shared by the inline-*-compare tabs via DiffLoadingSkeleton) ---
+
+.skeletonSection {
+  border-bottom: 1px solid var(--border-medium-color, #e8ecf0);
+}
+
+.skeletonHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background: var(--surface-neutral-color, #fafbfc);
+  border-bottom: 1px solid var(--border-medium-color, #e8ecf0);
+}
+
+.skeletonLines {
+  padding: 4px 0;
+}
+
+.skeletonLine {
+  display: flex;
+  gap: 8px;
+  padding: 3px 12px;
+  align-items: center;
+}
+
+.skeleton {
+  border-radius: 4px;
+  background: linear-gradient(
+    90deg,
+    var(--surface-neutral-color, #f0f2f5) 25%,
+    var(--border-medium-color, #e8ecf0) 50%,
+    var(--surface-neutral-color, #f0f2f5) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
diff --git a/components/ui/inline-diff-viewer/inline-diff-viewer.tsx b/components/ui/inline-diff-viewer/inline-diff-viewer.tsx
new file mode 100644
index 000000000000..292a45589ef7
--- /dev/null
+++ b/components/ui/inline-diff-viewer/inline-diff-viewer.tsx
@@ -0,0 +1,637 @@
+import React from 'react';
+import { structuredPatch } from 'diff';
+import styles from './inline-diff-viewer.module.scss';
+
+// --- Types ---
+
+export type DiffLine = {
+  type: 'added' | 'removed' | 'unchanged';
+  content: string;
+  oldLineNumber?: number;
+  newLineNumber?: number;
+};
+
+export type DiffHunk = {
+  header: string;
+  lines: DiffLine[];
+};
+
+export type LineFeedback = {
+  id: string;
+  lineNumber: number;
+  isRange: boolean;
+  startLine?: number;
+  endLine?: number;
+  user?: { displayName?: string; username?: string; image?: string };
+  message?: string;
+};
+
+export type DiffDisplayMode = 'split' | 'unified';
+
+export type DiffFileRendererProps = {
+  fileName: string;
+  hunks: DiffHunk[];
+  status?: string;
+  diffMode?: DiffDisplayMode;
+  additions?: number;
+  deletions?: number;
+  feedbacksByLine?: Map<number, LineFeedback[]>;
+  rangeLines?: Set<number>;
+  highlightedFeedbackId?: string;
+  selectedLine?: number;
+  dataFileId?: string;
+};
+
+// --- Pure Rendering Components (no hooks, no state, just props → JSX) ---
+
+export const DiffFileRenderer = React.memo(function DiffFileRenderer({
+  fileName,
+  hunks,
+  status,
+  diffMode = 'split',
+  additions = 0,
+  deletions = 0,
+  feedbacksByLine,
+  rangeLines,
+  highlightedFeedbackId,
+  selectedLine,
+  dataFileId,
+}: DiffFileRendererProps) {
+  return (
+    <div className={styles.diffFile} data-file-id={dataFileId}>
+      <DiffFileHeader fileName={fileName} status={status} additions={additions} deletions={deletions} />
+      <div className={styles.diffTableWrapper}>
+        {diffMode === 'split' ? (
+          <SplitDiffTable
+            hunks={hunks}
+            feedbacksByLine={feedbacksByLine}
+            rangeLines={rangeLines}
+            highlightedFeedbackId={highlightedFeedbackId}
+            selectedLine={selectedLine}
+          />
+        ) : (
+          <UnifiedDiffTable
+            hunks={hunks}
+            feedbacksByLine={feedbacksByLine}
+            rangeLines={rangeLines}
+            highlightedFeedbackId={highlightedFeedbackId}
+            selectedLine={selectedLine}
+          />
+        )}
+      </div>
+    </div>
+  );
+});
+
+export function DiffFileHeader({
+  fileName,
+  status,
+  additions = 0,
+  deletions = 0,
+}: {
+  fileName: string;
+  status?: string;
+  additions?: number;
+  deletions?: number;
+}) {
+  const statusClass =
+    status === 'NEW'
+      ? styles.fileStatusNew
+      : status === 'DELETED'
+        ? styles.fileStatusDeleted
+        : styles.fileStatusModified;
+  const statusLabel = status === 'NEW' ? 'New' : status === 'DELETED' ? 'Deleted' : 'Modified';
+  return (
+    <div className={styles.diffFileHeader}>
+      <span className={styles.diffFileName}>{fileName}</span>
+      {status && status !== 'UNCHANGED' && <span className={statusClass}>{statusLabel}</span>}
+      <div className={styles.diffFileStats}>
+        {additions > 0 && <span className={styles.diffAdditions}>+{additions}</span>}
+        {deletions > 0 && <span className={styles.diffDeletions}>-{deletions}</span>}
+        <ChangeBar additions={additions} deletions={deletions} />
+      </div>
+    </div>
+  );
+}
+
+// --- Syntax Highlighting (pure) ---
+
+type Token = { type: string; value: string };
+
+const kw = new Set([
+  'import',
+  'export',
+  'from',
+  'const',
+  'let',
+  'var',
+  'function',
+  'return',
+  'if',
+  'else',
+  'for',
+  'while',
+  'do',
+  'switch',
+  'case',
+  'break',
+  'continue',
+  'new',
+  'delete',
+  'typeof',
+  'instanceof',
+  'in',
+  'of',
+  'class',
+  'extends',
+  'super',
+  'this',
+  'try',
+  'catch',
+  'finally',
+  'throw',
+  'async',
+  'await',
+  'yield',
+  'default',
+  'type',
+  'interface',
+  'enum',
+  'as',
+  'implements',
+  'abstract',
+  'readonly',
+  'private',
+  'protected',
+  'public',
+  'static',
+  'void',
+  'null',
+  'undefined',
+  'true',
+  'false',
+]);
+
+function tokenize(code: string): Token[] {
+  const tokens: Token[] = [];
+  let i = 0;
+  while (i < code.length) {
+    if (code[i] === '/' && code[i + 1] === '/') {
+      const start = i;
+      while (i < code.length && code[i] !== '\n') i++;
+      tokens.push({ type: 'comment', value: code.slice(start, i) });
+      continue;
+    }
+    if (code[i] === '"' || code[i] === "'" || code[i] === '`') {
+      const q = code[i];
+      let j = i + 1;
+      while (j < code.length && code[j] !== q) {
+        if (code[j] === '\\') j++;
+        j++;
+      }
+      tokens.push({ type: 'string', value: code.slice(i, j + 1) });
+      i = j + 1;
+      continue;
+    }
+    if (/[0-9]/.test(code[i]) && (i === 0 || /[\s(,=+\-*/<>!&|^~%?:;[\]{}]/.test(code[i - 1]))) {
+      const start = i;
+      while (i < code.length && /[0-9.xXa-fA-FeEnN_]/.test(code[i])) i++;
+      tokens.push({ type: 'number', value: code.slice(start, i) });
+      continue;
+    }
+    if (/[a-zA-Z_$]/.test(code[i])) {
+      const start = i;
+      while (i < code.length && /[a-zA-Z0-9_$]/.test(code[i])) i++;
+      const word = code.slice(start, i);
+      tokens.push({ type: kw.has(word) ? 'keyword' : /^[A-Z]/.test(word) ? 'component' : 'identifier', value: word });
+      continue;
+    }
+    if (/[+\-*/%=<>!&|^~?:]/.test(code[i])) {
+      tokens.push({ type: 'operator', value: code[i] });
+      i++;
+      continue;
+    }
+    if (/[(){}[\]]/.test(code[i])) {
+      tokens.push({ type: 'bracket', value: code[i] });
+      i++;
+      continue;
+    }
+    tokens.push({ type: 'plain', value: code[i] });
+    i++;
+  }
+  return tokens;
+}
+
+const colorMap: Record<string, string> = {
+  comment: 'var(--syntax-comment)',
+  string: 'var(--syntax-string)',
+  number: 'var(--syntax-number)',
+  keyword: 'var(--syntax-keyword)',
+  component: 'var(--syntax-component)',
+  operator: 'var(--syntax-operator)',
+  bracket: 'var(--syntax-bracket)',
+};
+
+export const HighlightedCode = React.memo(function HighlightedCode({ code }: { code: string }) {
+  const tokens = tokenize(code);
+  return (
+    <code>
+      {tokens.map((t, i) => {
+        const color = colorMap[t.type];
+        return color ? (
+          <span key={i} style={{ color }}>
+            {t.value}
+          </span>
+        ) : (
+          <span key={i}>{t.value}</span>
+        );
+      })}
+    </code>
+  );
+});
+
+// --- Split Diff Table ---
+
+type SplitRow = { left?: DiffLine; right?: DiffLine };
+
+function buildSplitRows(hunks: DiffHunk[]): { rows: SplitRow[]; hunkHeaders: Map<number, string> } {
+  const rows: SplitRow[] = [];
+  const hunkHeaders = new Map<number, string>();
+  for (const hunk of hunks) {
+    hunkHeaders.set(rows.length, hunk.header);
+    const removed: DiffLine[] = [];
+    const added: DiffLine[] = [];
+    for (const line of hunk.lines) {
+      if (line.type === 'removed') {
+        removed.push(line);
+      } else if (line.type === 'added') {
+        added.push(line);
+      } else {
+        while (removed.length || added.length) {
+          rows.push({ left: removed.shift(), right: added.shift() });
+        }
+        rows.push({ left: line, right: line });
+      }
+    }
+    while (removed.length || added.length) {
+      rows.push({ left: removed.shift(), right: added.shift() });
+    }
+  }
+  return { rows, hunkHeaders };
+}
+
+function SplitDiffTable({
+  hunks,
+  feedbacksByLine,
+  rangeLines,
+  highlightedFeedbackId,
+  selectedLine,
+}: {
+  hunks: DiffHunk[];
+  feedbacksByLine?: Map<number, LineFeedback[]>;
+  rangeLines?: Set<number>;
+  highlightedFeedbackId?: string;
+  selectedLine?: number;
+}) {
+  const { rows, hunkHeaders: _hunkHeaders } = buildSplitRows(hunks);
+  if (hunks.length === 0) {
+    return (
+      <table className={styles.diffTable}>
+        <tbody>
+          <tr>
+            <td colSpan={5} className={styles.diffEmptyMessage}>
+              File changed but diff content not available
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    );
+  }
+  return (
+    <table className={`${styles.diffTable} ${styles.splitTable}`}>
+      <tbody>
+        {rows.map((row, idx) => {
+          const rightLineNum = row.right?.newLineNumber;
+          const leftLineNum = row.left?.oldLineNumber;
+          const feedbackLineNum = rightLineNum || leftLineNum;
+          const lineFbs = feedbackLineNum ? feedbacksByLine?.get(feedbackLineNum) || [] : [];
+          const isHighlighted = lineFbs.some((f) => f.id === highlightedFeedbackId);
+          const isInRange = feedbackLineNum ? rangeLines?.has(feedbackLineNum) || false : false;
+          return (
+            <React.Fragment key={idx}>
+              <tr
+                data-line={rightLineNum || undefined}
+                className={`${styles.splitRow} ${selectedLine === feedbackLineNum ? styles.diffRowSelected : ''} ${isInRange ? styles.diffRowRangeHighlight : ''}`}
+              >
+                <td
+                  className={`${styles.splitLineNum} ${row.left?.type === 'removed' ? styles.splitLineNumRemoved : ''}`}
+                >
+                  {lineFbs.length > 0 && <FeedbackBadgeDisplay feedbacks={lineFbs} isHighlighted={isHighlighted} />}
+                  {leftLineNum ?? ''}
+                </td>
+                <td
+                  className={`${styles.splitCode} ${row.left?.type === 'removed' ? styles.splitCodeRemoved : row.left?.type === 'unchanged' ? '' : styles.splitCodeEmpty}`}
+                >
+                  {row.left ? <HighlightedCode code={row.left.content} /> : null}
+                </td>
+                <td className={styles.splitGutter} />
+                <td className={`${styles.splitLineNum} ${row.right?.type === 'added' ? styles.splitLineNumAdded : ''}`}>
+                  {rightLineNum ?? ''}
+                </td>
+                <td
+                  className={`${styles.splitCode} ${row.right?.type === 'added' ? styles.splitCodeAdded : row.right?.type === 'unchanged' ? '' : styles.splitCodeEmpty}`}
+                >
+                  {row.right ? <HighlightedCode code={row.right.content} /> : null}
+                </td>
+              </tr>
+            </React.Fragment>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}
+
+// --- Unified Diff Table ---
+
+function UnifiedDiffTable({
+  hunks,
+  feedbacksByLine,
+  rangeLines,
+  highlightedFeedbackId,
+  selectedLine,
+}: {
+  hunks: DiffHunk[];
+  feedbacksByLine?: Map<number, LineFeedback[]>;
+  rangeLines?: Set<number>;
+  highlightedFeedbackId?: string;
+  selectedLine?: number;
+}) {
+  return (
+    <table className={styles.diffTable}>
+      <tbody>
+        {hunks.map((hunk, hi) => (
+          <React.Fragment key={hi}>
+            {hunk.lines.map((line, li) => {
+              const lineNum = line.newLineNumber ?? line.oldLineNumber;
+              const lineFbs = lineNum ? feedbacksByLine?.get(lineNum) || [] : [];
+              const isHighlighted = lineFbs.some((f) => f.id === highlightedFeedbackId);
+              const isInRange = lineNum ? rangeLines?.has(lineNum) || false : false;
+              return (
+                <tr
+                  key={`${hi}-${li}`}
+                  data-line={lineNum || undefined}
+                  className={`${styles.diffRow} ${line.type === 'added' ? styles.diffLineAdded : line.type === 'removed' ? styles.diffLineRemoved : ''} ${selectedLine === lineNum ? styles.diffRowSelected : ''} ${isInRange ? styles.diffRowRangeHighlight : ''}`}
+                >
+                  <td className={styles.lineNumCell}>
+                    {lineFbs.length > 0 && <FeedbackBadgeDisplay feedbacks={lineFbs} isHighlighted={isHighlighted} />}
+                    <span
+                      className={
+                        line.type === 'removed'
+                          ? styles.lineNumRemoved
+                          : line.type === 'added'
+                            ? styles.lineNumAdded
+                            : styles.lineNum
+                      }
+                    >
+                      {line.oldLineNumber ?? ''}
+                    </span>
+                  </td>
+                  <td className={styles.lineNumCell}>
+                    <span
+                      className={
+                        line.type === 'added'
+                          ? styles.lineNumAdded
+                          : line.type === 'removed'
+                            ? styles.lineNumRemoved
+                            : styles.lineNum
+                      }
+                    >
+                      {line.newLineNumber ?? ''}
+                    </span>
+                  </td>
+                  <td className={styles.signCell}>
+                    <span
+                      className={
+                        line.type === 'added' ? styles.signAdded : line.type === 'removed' ? styles.signRemoved : ''
+                      }
+                    >
+                      {line.type === 'added' ? '+' : line.type === 'removed' ? '-' : ' '}
+                    </span>
+                  </td>
+                  <td className={styles.codeCell}>
+                    <HighlightedCode code={line.content} />
+                  </td>
+                </tr>
+              );
+            })}
+          </React.Fragment>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+// --- Feedback Badge (pure display) ---
+
+export function FeedbackBadgeDisplay({
+  feedbacks,
+  isHighlighted,
+}: {
+  feedbacks: LineFeedback[];
+  isHighlighted?: boolean;
+}) {
+  if (feedbacks.length === 0) return null;
+  const first = feedbacks[0];
+  return (
+    <span className={`${styles.feedbackBadge} ${isHighlighted ? styles.feedbackBadgeHighlighted : ''}`}>
+      {first.user?.image ? (
+        <img src={first.user.image} alt="" className={styles.feedbackBadgeAvatar} />
+      ) : (
+        <span className={styles.feedbackBadgeInitial}>{(first.user?.displayName || '?')[0]}</span>
+      )}
+      {feedbacks.length > 1 && <span className={styles.feedbackBadgeCount}>{feedbacks.length}</span>}
+    </span>
+  );
+}
+
+// --- Change Bar (pure) ---
+
+export function ChangeBar({ additions, deletions }: { additions: number; deletions: number }) {
+  const total = additions + deletions;
+  if (total === 0) return null;
+  const max = 5;
+  const a = Math.round((additions / total) * max);
+  const d = Math.round((deletions / total) * max);
+  const e = Math.max(0, max - a - d);
+  return (
+    <span className={styles.changeBar}>
+      {Array.from({ length: a }).map((_, i) => (
+        <span key={`a${i}`} className={styles.changeBarAdd} />
+      ))}
+      {Array.from({ length: d }).map((_, i) => (
+        <span key={`d${i}`} className={styles.changeBarDel} />
+      ))}
+      {Array.from({ length: e }).map((_, i) => (
+        <span key={`e${i}`} className={styles.changeBarEmpty} />
+      ))}
+    </span>
+  );
+}
+
+// --- Diff Parsing Utilities (pure functions) ---
+
+export function parseDiffOutput(diffOutput: string): DiffHunk[] {
+  const lines = diffOutput.split('\n');
+  const hunks: DiffHunk[] = [];
+  let currentHunk: DiffHunk | null = null;
+  let oldLine = 0,
+    newLine = 0;
+  for (const line of lines) {
+    const m = line.match(/^@@\s+-(\d+)(?:,\d+)?\s+\+(\d+)(?:,\d+)?\s+@@(.*)/);
+    if (m) {
+      currentHunk = { header: line, lines: [] };
+      hunks.push(currentHunk);
+      oldLine = parseInt(m[1], 10);
+      newLine = parseInt(m[2], 10);
+      continue;
+    }
+    if (!currentHunk) continue;
+    if (line.startsWith('\\')) continue; // "\ No newline at end of file" marker, not a content line
+    if (line.startsWith('+')) {
+      currentHunk.lines.push({ type: 'added', content: line.slice(1), newLineNumber: newLine++ });
+    } else if (line.startsWith('-')) {
+      currentHunk.lines.push({ type: 'removed', content: line.slice(1), oldLineNumber: oldLine++ });
+    } else {
+      const c = line.startsWith(' ') ? line.slice(1) : line;
+      currentHunk.lines.push({ type: 'unchanged', content: c, oldLineNumber: oldLine++, newLineNumber: newLine++ });
+    }
+  }
+  return hunks;
+}
+
+/** A single full file rendered as one hunk where every line is `added`. */
+export function computeNewFileHunks(content: string): DiffHunk[] {
+  const lines = content.split('\n');
+  return [
+    {
+      header: `@@ -0,0 +1,${lines.length} @@`,
+      lines: lines.map((line, i) => ({ type: 'added' as const, content: line, newLineNumber: i + 1 })),
+    },
+  ];
+}
+
+/** A single full file rendered as one hunk where every line is `removed`. */
+export function computeDeletedFileHunks(content: string): DiffHunk[] {
+  const lines = content.split('\n');
+  return [
+    {
+      header: `@@ -1,${lines.length} +0,0 @@`,
+      lines: lines.map((line, i) => ({ type: 'removed' as const, content: line, oldLineNumber: i + 1 })),
+    },
+  ];
+}
+
+export type FileDiffEntry = {
+  fileName: string;
+  hunks: DiffHunk[];
+  status: string;
+  additions: number;
+  deletions: number;
+};
+
+type FileCompareData = { status: string; baseContent?: string; compareContent?: string };
+
+/**
+ * Turn a `fileName -> {status, baseContent, compareContent}` map into renderable file diffs,
+ * choosing the right hunk builder per status and dropping no-op (UNCHANGED / zero-change) entries.
+ * When `onPendingNew` is supplied, NEW files whose content hasn't arrived yet are diverted to it
+ * (so the caller can fetch them lazily) instead of being diffed against empty content.
+ */
+export function buildFileDiffsFromMap(
+  byName: Map<string, FileCompareData>,
+  onPendingNew?: (fileName: string) => void
+): FileDiffEntry[] {
+  const diffs: FileDiffEntry[] = [];
+  for (const [fileName, fileData] of byName.entries()) {
+    if (fileData.status === 'UNCHANGED') continue;
+    if (fileData.status === 'NEW' && fileData.compareContent === undefined && onPendingNew) {
+      onPendingNew(fileName);
+      continue;
+    }
+    const baseContent = fileData.baseContent || '';
+    const compareContent = fileData.compareContent || '';
+    let hunks: DiffHunk[];
+    if (fileData.status === 'NEW') hunks = computeNewFileHunks(compareContent);
+    else if (fileData.status === 'DELETED') hunks = computeDeletedFileHunks(baseContent);
+    else hunks = computeDiffFromContent(baseContent, compareContent);
+
+    const additions = hunks.reduce((sum, h) => sum + h.lines.filter((l) => l.type === 'added').length, 0);
+    const deletions = hunks.reduce((sum, h) => sum + h.lines.filter((l) => l.type === 'removed').length, 0);
+    if (additions > 0 || deletions > 0) diffs.push({ fileName, hunks, status: fileData.status, additions, deletions });
+  }
+  return diffs;
+}
+
+/** Shimmer placeholder shown while a diff tab's data loads. Mirrors the file-header + lines layout. */
+export function DiffLoadingSkeleton({
+  sections = 1,
+  lines = 4,
+  header = true,
+}: {
+  sections?: number;
+  lines?: number;
+  /** render the file-header bar above the lines (omit when a real header is already shown). */
+  header?: boolean;
+}) {
+  return (
+    <div>
+      {Array.from({ length: sections }).map((_, s) => (
+        <div key={s} className={styles.skeletonSection}>
+          {header && (
+            <div className={styles.skeletonHeader}>
+              <div className={styles.skeleton} style={{ width: '30%', height: 14 }} />
+              <div className={styles.skeleton} style={{ width: 60, height: 14 }} />
+            </div>
+          )}
+          <div className={styles.skeletonLines}>
+            {Array.from({ length: lines }).map((_l, i) => (
+              <div key={i} className={styles.skeletonLine}>
+                <div className={styles.skeleton} style={{ width: 30, height: 12 }} />
+                <div className={styles.skeleton} style={{ width: 30, height: 12 }} />
+                <div className={styles.skeleton} style={{ width: `${40 + (i % 3) * 20}%`, height: 12 }} />
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function computeDiffFromContent(base: string, compare: string): DiffHunk[] {
+  const patch = structuredPatch('', '', base, compare, '', '', { context: 3 });
+  return patch.hunks.map((hunk) => {
+    let oldCounter = hunk.oldStart,
+      newCounter = hunk.newStart;
+    return {
+      header: `@@ -${hunk.oldStart},${hunk.oldLines} +${hunk.newStart},${hunk.newLines} @@`,
+      lines: hunk.lines
+        // drop "\ No newline at end of file" markers — they aren't content lines
+        .filter((line) => !line.startsWith('\\'))
+        .map((line) => {
+          const type = line.startsWith('+')
+            ? ('added' as const)
+            : line.startsWith('-')
+              ? ('removed' as const)
+              : ('unchanged' as const);
+          const content = line.slice(1);
+          const oldLineNumber = type !== 'added' ? oldCounter : undefined;
+          const newLineNumber = type !== 'removed' ? newCounter : undefined;
+          if (type !== 'added') oldCounter++;
+          if (type !== 'removed') newCounter++;
+          return { type, content, oldLineNumber, newLineNumber };
+        }),
+    };
+  });
+}
diff --git a/components/ui/inline-preview-compare/index.ts b/components/ui/inline-preview-compare/index.ts
new file mode 100644
index 000000000000..8f598c36bc62
--- /dev/null
+++ b/components/ui/inline-preview-compare/index.ts
@@ -0,0 +1,2 @@
+export { InlinePreviewCompare } from './inline-preview-compare';
+export type { InlinePreviewCompareProps } from './inline-preview-compare';
diff --git a/components/ui/inline-preview-compare/inline-preview-compare.tsx b/components/ui/inline-preview-compare/inline-preview-compare.tsx
new file mode 100644
index 000000000000..dc8ebf2f6bb3
--- /dev/null
+++ b/components/ui/inline-preview-compare/inline-preview-compare.tsx
@@ -0,0 +1,71 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useComponentCompare, InlineCompareEmpty } from '@teambit/component.ui.component-compare.context';
+import { PreviewCompareRenderer } from '@teambit/preview.ui.preview-compare';
+import { CompositionCompare } from '@teambit/compositions.ui.composition-compare';
+
+export type InlinePreviewCompareProps = {
+  /** Placeholder min-height */
+  minHeight?: number;
+};
+
+/**
+ * Lightweight preview compare for LaneCompare.
+ * Reads base/compare from ComponentCompareContext,
+ * renders CompositionCompare with browser skeleton placeholder.
+ * No review/feedback/mask dependencies — just preview diffing.
+ */
+export function InlinePreviewCompare({ minHeight: _minHeight = 200 }: InlinePreviewCompareProps) {
+  const componentCompare = useComponentCompare();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [loaded, setLoaded] = useState(false);
+
+  // Listen for iframe _DOM_LOADED_ from our container's iframes
+  useEffect(() => {
+    if (loaded) return;
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handler = (event: MessageEvent) => {
+      if (event.data?.event !== '_DOM_LOADED_') return;
+      const iframes = container.querySelectorAll('iframe');
+      for (const iframe of iframes) {
+        try {
+          if (iframe.contentWindow === event.source) {
+            setTimeout(() => setLoaded(true), 500);
+            return;
+          }
+        } catch {
+          /* cross-origin */
+        }
+      }
+    };
+    window.addEventListener('message', handler);
+    const fallback = setTimeout(() => setLoaded(true), 8000);
+    return () => {
+      window.removeEventListener('message', handler);
+      clearTimeout(fallback);
+    };
+  }, [loaded]);
+
+  const hasModels = componentCompare?.base?.model || componentCompare?.compare?.model;
+
+  if (!componentCompare || !hasModels) {
+    return <PreviewCompareRenderer loaded={false}>{null}</PreviewCompareRenderer>;
+  }
+
+  const hasCompositions =
+    (componentCompare.base?.model?.compositions?.length || 0) > 0 ||
+    (componentCompare.compare?.model?.compositions?.length || 0) > 0;
+
+  if (!hasCompositions) {
+    return <InlineCompareEmpty message="No compositions to preview" />;
+  }
+
+  return (
+    <div ref={containerRef}>
+      <PreviewCompareRenderer loaded={loaded}>
+        <CompositionCompare />
+      </PreviewCompareRenderer>
+    </div>
+  );
+}
diff --git a/components/ui/inline-tests-compare/index.ts b/components/ui/inline-tests-compare/index.ts
new file mode 100644
index 000000000000..ee4f934a076a
--- /dev/null
+++ b/components/ui/inline-tests-compare/index.ts
@@ -0,0 +1,2 @@
+export { InlineTestsCompare } from './inline-tests-compare';
+export type { InlineTestsCompareProps } from './inline-tests-compare';
diff --git a/components/ui/inline-tests-compare/inline-tests-compare.tsx b/components/ui/inline-tests-compare/inline-tests-compare.tsx
new file mode 100644
index 000000000000..0224f27bf4f5
--- /dev/null
+++ b/components/ui/inline-tests-compare/inline-tests-compare.tsx
@@ -0,0 +1,53 @@
+import React, { useMemo } from 'react';
+import { useComponentCompare, InlineCompareEmpty } from '@teambit/component.ui.component-compare.context';
+import { useDiffMode } from '@teambit/component.ui.component-compare.component-compare';
+import {
+  DiffFileRenderer,
+  DiffLoadingSkeleton,
+  buildFileDiffsFromMap,
+  type DiffDisplayMode,
+} from '@teambit/code.ui.inline-diff-viewer';
+
+export type InlineTestsCompareProps = {
+  diffMode?: DiffDisplayMode;
+};
+
+export function InlineTestsCompare({ diffMode: diffModeProp }: InlineTestsCompareProps) {
+  const contextDiffMode = useDiffMode();
+  const diffMode = diffModeProp || contextDiffMode;
+  const componentCompare = useComponentCompare();
+
+  const testCompareDataByName = (componentCompare as any)?.testCompareDataByName as Map<string, any> | undefined | null;
+  const componentIdStr =
+    (componentCompare?.compare?.model?.id || componentCompare?.base?.model?.id)?.toStringWithoutVersion?.() || '';
+
+  const testDiffs = useMemo(
+    () => (testCompareDataByName ? buildFileDiffsFromMap(testCompareDataByName) : []),
+    [testCompareDataByName]
+  );
+
+  if (!componentCompare || componentCompare.loading || testCompareDataByName === undefined) {
+    return <DiffLoadingSkeleton />;
+  }
+
+  if (testDiffs.length === 0) {
+    return <InlineCompareEmpty message="No test changes" />;
+  }
+
+  return (
+    <div>
+      {testDiffs.map((file) => (
+        <DiffFileRenderer
+          key={file.fileName}
+          fileName={file.fileName}
+          hunks={file.hunks}
+          status={file.status}
+          diffMode={diffMode}
+          additions={file.additions}
+          deletions={file.deletions}
+          dataFileId={componentIdStr ? `${componentIdStr}:${file.fileName}` : undefined}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/components/ui/lane-overview/lane-overview-header.module.scss b/components/ui/lane-overview/lane-overview-header.module.scss
new file mode 100644
index 000000000000..08d4d9fd6a39
--- /dev/null
+++ b/components/ui/lane-overview/lane-overview-header.module.scss
@@ -0,0 +1,31 @@
+.header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 20px 40px 10px;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-color, #2b2b40);
+}
+
+.icon {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+}
+
+.name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.count {
+  font-size: 12.5px;
+  font-weight: 500;
+  color: var(--on-background-medium-color, #6c707c);
+  background: var(--surface-color, #f5f5f5);
+  border-radius: 10px;
+  padding: 2px 8px;
+  flex-shrink: 0;
+}
diff --git a/components/ui/lane-overview/lane-overview-header.tsx b/components/ui/lane-overview/lane-overview-header.tsx
new file mode 100644
index 000000000000..b39f61bffa46
--- /dev/null
+++ b/components/ui/lane-overview/lane-overview-header.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import classnames from 'classnames';
+import type { LaneId } from '@teambit/lane-id';
+import styles from './lane-overview-header.module.scss';
+
+export type LaneOverviewHeaderProps = {
+  laneId: LaneId;
+  componentCount?: number;
+  className?: string;
+};
+
+export function LaneOverviewHeader({ laneId, componentCount, className }: LaneOverviewHeaderProps) {
+  const laneName = laneId.isDefault() ? laneId.name : laneId.toString();
+
+  return (
+    <div className={classnames(styles.header, className)}>
+      <img src="https://static.bit.dev/bit-icons/lane.svg" className={styles.icon} alt="" />
+      <span className={styles.name}>{laneName}</span>
+      {componentCount !== undefined && (
+        <span className={styles.count}>
+          {componentCount} {componentCount === 1 ? 'component' : 'components'}
+        </span>
+      )}
+    </div>
+  );
+}
diff --git a/components/ui/lane-overview/lane-overview.module.scss b/components/ui/lane-overview/lane-overview.module.scss
deleted file mode 100644
index ce811dcaf2de..000000000000
--- a/components/ui/lane-overview/lane-overview.module.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.container {
-  padding: 50px 5% 150px 5%;
-  overflow-y: auto;
-  height: 100%;
-  box-sizing: border-box;
-}
-
-.laneDetails {
-  padding-bottom: 32px;
-}
-
-.cardGrid {
-  grid-column-gap: 10px;
-  grid-gap: 32px 24px;
-  -moz-column-gap: 10px;
-  column-gap: 10px;
-  display: grid;
-  gap: 32px 24px;
-  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
-  max-width: 1280px;
-}
diff --git a/components/ui/lane-overview/lane-overview.tsx b/components/ui/lane-overview/lane-overview.tsx
index 1e46cd29d828..06f52dc181b8 100644
--- a/components/ui/lane-overview/lane-overview.tsx
+++ b/components/ui/lane-overview/lane-overview.tsx
@@ -2,27 +2,17 @@ import type { ComponentType } from 'react';
 import React, { useMemo } from 'react';
 import type { LaneModel, LanesHost } from '@teambit/lanes.ui.models.lanes-model';
 import { LanesModel } from '@teambit/lanes.ui.models.lanes-model';
-import { ComponentGrid } from '@teambit/explorer.ui.gallery.component-grid';
 import { SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';
 import type { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';
 import { useLanes as defaultUseLanes } from '@teambit/lanes.hooks.use-lanes';
-import { useCloudScopes } from '@teambit/cloud.hooks.use-cloud-scopes';
 import { useLaneComponents } from '@teambit/lanes.hooks.use-lane-components';
 import flatten from 'lodash.flatten';
 import type { SlotRegistry } from '@teambit/harmony';
-import { ScopeComponentCard } from '@teambit/scope';
-import { PreviewPlaceholder } from '@teambit/preview.ui.preview-placeholder';
-import { Tooltip } from '@teambit/design.ui.tooltip';
-import { ComponentID } from '@teambit/component-id';
 import type { ComponentModel } from '@teambit/component';
-import { ScopeID } from '@teambit/scopes.scope-id';
-import type { ComponentCardPluginType, PluginProps } from '@teambit/explorer.ui.component-card';
-import { WorkspaceComponentCard } from '@teambit/workspace.ui.workspace-component-card';
-import { LaneDetails } from '@teambit/lanes.ui.lane-details';
+import { LaneOverviewHeader } from './lane-overview-header';
+import { ComponentsOverview } from '@teambit/explorer.ui.components-overview';
 import { EmptyLaneOverview } from './empty-lane-overview';
 
-import styles from './lane-overview.module.scss';
-
 export type LaneOverviewLine = ComponentType;
 export type LaneOverviewLineSlot = SlotRegistry<LaneOverviewLine[]>;
 
@@ -33,15 +23,6 @@ export type LaneOverviewProps = {
   useLanes?: () => { lanesModel?: LanesModel; loading?: boolean };
 };
 
-export class LinkPlugin {
-  constructor(private viewedLane?: LaneModel) {}
-
-  link = (id) => {
-    if (!this.viewedLane?.id) return LanesModel.getMainComponentUrl(id);
-    return LanesModel.getLaneComponentUrl(id, this.viewedLane?.id);
-  };
-}
-
 export function LaneOverview({
   routeSlot,
   overviewSlot,
@@ -49,129 +30,55 @@ export function LaneOverview({
   useLanes: useLanesFromProps = defaultUseLanes,
 }: LaneOverviewProps) {
   const { lanesModel } = useLanesFromProps();
-  const overviewItems = useMemo(() => flatten(overviewSlot?.values()), [overviewSlot]);
-
   const viewedLane = lanesModel?.viewedLane;
 
   if (!viewedLane || !viewedLane.id) return null;
   if (viewedLane.components.length === 0) return <EmptyLaneOverview name={viewedLane.id.name} />;
 
-  return (
-    <LaneOverviewWithPreview host={host} currentLane={viewedLane} overviewItems={overviewItems} routeSlot={routeSlot} />
-  );
+  return <LaneOverviewBody currentLane={viewedLane} host={host} routeSlot={routeSlot} overviewSlot={overviewSlot} />;
 }
 
-type LaneOverviewWithPreviewProps = {
+type LaneOverviewBodyProps = {
   currentLane: LaneModel;
-  overviewItems: LaneOverviewLine[];
-  routeSlot: RouteSlot;
   host: LanesHost;
+  routeSlot: RouteSlot;
+  overviewSlot?: LaneOverviewLineSlot;
 };
 
-function LaneOverviewWithPreview({ currentLane, overviewItems, routeSlot, host }: LaneOverviewWithPreviewProps) {
+function LaneOverviewBody({ currentLane, host: _host, routeSlot, overviewSlot }: LaneOverviewBodyProps) {
   const { loading, components, componentDescriptors } = useLaneComponents(currentLane.id);
-  const uniqueScopes = new Set(components?.map((c) => c.id.scope));
-  const uniqueScopesArr = Array.from(uniqueScopes);
-  const { cloudScopes = [] } = useCloudScopes(uniqueScopesArr);
-  const cloudScopesById = new Map(cloudScopes.map((scope) => [scope.id.toString(), scope]));
-  const compDescriptorById = new Map(componentDescriptors?.map((comp) => [comp.id.toString(), comp]));
-  const compModelsById = new Map(components?.map((comp) => [comp.id.toString(), comp]));
-  const plugins = useCardPlugins({ compModelsById, currentLane });
+  const overviewItems = useMemo(() => flatten(overviewSlot?.values()), [overviewSlot]);
+
+  // The lane overview is rendered under an `<Route index>` in `lanes.ui.runtime`, which has no
+  // trailing wildcard. React Router warns when a descendant `<Routes>` mounts under such a
+  // parent. Mount SlotRouter only when there are actual registrations — in this repo there are
+  // none today, so skipping the empty case is safe and silences the warning.
+  const hasRoutes = useMemo(() => {
+    if (!routeSlot) return false;
+    const all = flatten(Array.from(routeSlot.values()));
+    return all.length > 0;
+  }, [routeSlot]);
 
   if (loading) return null;
 
-  const ComponentCard =
-    host === 'workspace'
-      ? ({ component }) => {
-          if (component.deprecation?.isDeprecate) return null;
-          const compDescriptor = compDescriptorById.get(component.id.toString());
-          if (!compDescriptor) return null;
-          const cloudScope = cloudScopesById.get(component.id.scope);
-          const scope =
-            cloudScope ||
-            (ScopeID.isValid(component.id.scope) && { id: ScopeID.fromString(component.id.scope) }) ||
-            undefined;
-          return (
-            <WorkspaceComponentCard
-              key={component.id.toString()}
-              componentDescriptor={compDescriptor}
-              component={component}
-              plugins={plugins}
-              scope={scope}
-            />
-          );
-        }
-      : ({ component }) => {
-          const compDescriptor = compDescriptorById.get(component.id.toString());
-          return (
-            <ScopeComponentCard
-              key={component.id.toString()}
-              component={component}
-              plugins={plugins}
-              componentDescriptor={compDescriptor}
-            />
-          );
-        };
+  const getHref = (component: ComponentModel) => LanesModel.getLaneComponentUrl(component.id, currentLane.id);
 
   return (
-    <div className={styles.container}>
-      <LaneDetails
-        className={styles.laneDetails}
-        laneId={currentLane.id}
-        description={''}
-        componentCount={currentLane.components.length}
-      ></LaneDetails>
-      <ComponentGrid className={styles.cardGrid}>
-        {components?.map((component, index) => <ComponentCard component={component} key={index} />)}
-      </ComponentGrid>
-      {routeSlot && <SlotRouter slot={routeSlot} />}
-      {overviewItems.length > 0 && overviewItems.map((Item, index) => <Item key={index} />)}
-    </div>
+    <ComponentsOverview
+      components={components ?? []}
+      componentDescriptors={componentDescriptors ?? []}
+      getHref={getHref}
+      storageNamespace="lane-overview"
+      header={<LaneOverviewHeader laneId={currentLane.id} componentCount={currentLane.components.length} />}
+      footer={
+        <>
+          {hasRoutes && routeSlot && <SlotRouter slot={routeSlot} />}
+          {overviewItems.map((Item, index) => (
+            <Item key={index} />
+          ))}
+        </>
+      }
+      emptyState={<EmptyLaneOverview name={currentLane.id.name} />}
+    />
   );
 }
-
-export function useCardPlugins({
-  compModelsById,
-  currentLane,
-}: {
-  compModelsById: Map<string, ComponentModel>;
-  currentLane?: LaneModel;
-}): ComponentCardPluginType<PluginProps>[] {
-  const plugins = React.useMemo(
-    () => [
-      {
-        preview: function Preview({ component, shouldShowPreview }) {
-          const compModel = compModelsById.get(component.id.toString());
-          if (!compModel) return null;
-          return (
-            <PreviewPlaceholder
-              componentDescriptor={component}
-              component={compModel}
-              shouldShowPreview={shouldShowPreview}
-            />
-          );
-        },
-      },
-      {
-        previewBottomRight: function PreviewBottomRight({ component }) {
-          const env = component.get('teambit.envs/envs');
-          const envComponentId = env?.id ? ComponentID.fromString(env?.id) : undefined;
-
-          return (
-            <div className={styles.rightPreviewPlugins}>
-              <div className={styles.badge}>
-                <Tooltip delay={300} content={envComponentId?.name}>
-                  <img src={env?.icon} className={styles.envIcon} />
-                </Tooltip>
-              </div>
-            </div>
-          );
-        },
-      },
-      new LinkPlugin(currentLane),
-    ],
-    [compModelsById.size, currentLane?.id.toString()]
-  );
-
-  return plugins;
-}
diff --git a/components/ui/preview-compare/index.ts b/components/ui/preview-compare/index.ts
new file mode 100644
index 000000000000..eb2aad0ca208
--- /dev/null
+++ b/components/ui/preview-compare/index.ts
@@ -0,0 +1,2 @@
+export { PreviewCompareRenderer, BrowserSkeletonSplit, BrowserSkeleton } from './preview-compare';
+export type { PreviewCompareRendererProps } from './preview-compare';
diff --git a/components/ui/preview-compare/preview-compare.module.scss b/components/ui/preview-compare/preview-compare.module.scss
new file mode 100644
index 000000000000..a582a2084fda
--- /dev/null
+++ b/components/ui/preview-compare/preview-compare.module.scss
@@ -0,0 +1,77 @@
+$border-color: var(--border-medium-color, #e8ecf0);
+$surface-color: var(--surface-color, #fff);
+
+.previewCompare {
+  border-bottom: 1px solid $border-color;
+  min-height: 200px;
+}
+
+.browserSkeletonSplit {
+  display: flex;
+  gap: 1px;
+  background: $border-color;
+  min-height: 200px;
+}
+
+.browserSkeleton {
+  flex: 1;
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: $surface-color;
+}
+
+.browserToolbar {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 7px 10px;
+  border-bottom: 1px solid currentColor;
+  opacity: 0.08;
+  flex-shrink: 0;
+}
+
+.browserDot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: currentColor;
+  flex-shrink: 0;
+}
+
+.browserUrlBar {
+  flex: 1;
+  height: 14px;
+  margin-left: 8px;
+  border-radius: 10px;
+  background: currentColor;
+}
+
+.browserBody {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 20px 14px;
+  opacity: 0.06;
+
+  > * {
+    height: 10px;
+    border-radius: 6px;
+    background: currentColor;
+  }
+}
+
+.browserLine1 {
+  width: 55%;
+}
+.browserLine2 {
+  width: 75%;
+}
+.browserLine3 {
+  width: 40%;
+}
+.browserLine4 {
+  width: 65%;
+}
diff --git a/components/ui/preview-compare/preview-compare.tsx b/components/ui/preview-compare/preview-compare.tsx
new file mode 100644
index 000000000000..40eef2c21290
--- /dev/null
+++ b/components/ui/preview-compare/preview-compare.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import styles from './preview-compare.module.scss';
+
+// --- Types ---
+
+export type PreviewCompareRendererProps = {
+  /** Whether the preview content has loaded */
+  loaded: boolean;
+  /** The actual preview content (iframes, composition compare, etc.) */
+  children?: ReactNode;
+};
+
+/**
+ * Pure preview compare renderer. No hooks, no data fetching.
+ * Shows a browser skeleton placeholder until loaded, then reveals children.
+ */
+export function PreviewCompareRenderer({ loaded, children }: PreviewCompareRendererProps) {
+  return (
+    <div className={styles.previewCompare}>
+      {!loaded && <BrowserSkeletonSplit />}
+      <div style={loaded ? undefined : { height: 0, overflow: 'hidden' }}>{children}</div>
+    </div>
+  );
+}
+
+// --- Browser Skeleton (split base/compare) ---
+
+export function BrowserSkeletonSplit() {
+  return (
+    <div className={styles.browserSkeletonSplit}>
+      <BrowserSkeleton />
+      <BrowserSkeleton />
+    </div>
+  );
+}
+
+export function BrowserSkeleton() {
+  return (
+    <div className={styles.browserSkeleton}>
+      <div className={styles.browserToolbar}>
+        <span className={styles.browserDot} />
+        <span className={styles.browserDot} />
+        <span className={styles.browserDot} />
+        <div className={styles.browserUrlBar} />
+      </div>
+      <div className={styles.browserBody}>
+        <div className={styles.browserLine1} />
+        <div className={styles.browserLine2} />
+        <div className={styles.browserLine3} />
+        <div className={styles.browserLine4} />
+      </div>
+    </div>
+  );
+}
diff --git a/components/ui/queries/get-file-content/get-file-content.ts b/components/ui/queries/get-file-content/get-file-content.ts
index 7ae7a6478dd3..f884d01deed5 100644
--- a/components/ui/queries/get-file-content/get-file-content.ts
+++ b/components/ui/queries/get-file-content/get-file-content.ts
@@ -54,7 +54,19 @@ type ComponentChangedSubData = {
   };
 };
 
-export function useFileContent(componentId?: ComponentID, filePath?: string, skip?: boolean, host?: string) {
+export function useFileContent(
+  componentId?: ComponentID,
+  filePath?: string,
+  skip?: boolean,
+  host?: string,
+  /**
+   * Subscribe to `componentChanged` and refetch this file on a match. Opt-in because the hook is
+   * also used in component/lane compare, where many instances mount at once (one per file) — every
+   * one subscribing and refetching on a single event causes a refetch storm. Only the live Code tab
+   * needs live updates, so it alone enables this.
+   */
+  subscribeToChanges?: boolean
+) {
   const id = componentId?.toString();
   const querySkip = skip || !componentId || filePath === undefined;
 
@@ -64,7 +76,7 @@ export function useFileContent(componentId?: ComponentID, filePath?: string, ski
   });
 
   useSubscription<ComponentChangedSubData>(COMPONENT_CHANGED_SUBSCRIPTION, {
-    skip: querySkip,
+    skip: querySkip || !subscribeToChanges,
     onSubscriptionData: ({ subscriptionData }) => {
       const changedId = subscriptionData.data?.componentChanged?.component?.id;
       if (!changedId || !componentId) return;
diff --git a/components/ui/tooltip/tooltip.tsx b/components/ui/tooltip/tooltip.tsx
index d248f17943a0..8bb85410b0e4 100644
--- a/components/ui/tooltip/tooltip.tsx
+++ b/components/ui/tooltip/tooltip.tsx
@@ -14,6 +14,29 @@ import { useCtxTooltipInstance } from './shared-instance';
 import './tippy.module.scss';
 
 const THEME = 'teambit';
+
+const FORWARD_REF = Symbol.for('react.forward_ref');
+const MEMO = Symbol.for('react.memo');
+
+/**
+ * Whether a node can receive the ref Tippy attaches to its single child to anchor the tooltip. Host
+ * elements (`type` is a string), class components, and `forwardRef`/`memo(forwardRef)` components can;
+ * a plain function component (e.g. `Icon`) cannot — passing one to Tippy triggers React's "Function
+ * components cannot be given refs" warning and leaves the tooltip unanchored. Such children (and
+ * strings / fragments / arrays) get wrapped in a `<span>` below so Tippy refs the span instead.
+ */
+function acceptsRef(node: ReactNode): boolean {
+  if (!React.isValidElement(node)) return false;
+  const type = node.type as any;
+  if (typeof type === 'string') return true;
+  if (type?.prototype?.isReactComponent) return true;
+  if (type?.$$typeof === FORWARD_REF) return true;
+  if (type?.$$typeof === MEMO) {
+    const inner = type.type;
+    return typeof inner === 'string' || inner?.$$typeof === FORWARD_REF || !!inner?.prototype?.isReactComponent;
+  }
+  return false;
+}
 const popperOptions = {
   modifiers: [
     {
@@ -43,8 +66,9 @@ export function Tooltip({ children, breakline, singleton, visibleOnMobile, class
 
   const singletonInstance = singleton || ctxInstance;
 
-  // children should accept a ref
-  const child: any = typeof children === 'string' ? <span>{children}</span> : children;
+  // Tippy attaches a ref to its single child; wrap anything that can't take one (strings, plain
+  // function components like `Icon`, fragments/arrays) in a <span> so the ref lands on a real DOM node.
+  const child: any = acceptsRef(children) ? children : <span>{children}</span>;
 
   return (
     <Tippy
diff --git a/docs/node-modules-optimization.md b/docs/node-modules-optimization.md
deleted file mode 100644
index 6817a24ebcc7..000000000000
--- a/docs/node-modules-optimization.md
+++ /dev/null
@@ -1,298 +0,0 @@
-# Node Modules Optimization for Bit BVM Distributions
-
-## Overview
-
-This document captures the analysis and optimization strategies for reducing Bit's node_modules size in BVM (Bit Version Manager) distributions, based on investigation conducted in September 2025.
-
-## Current State Analysis
-
-### Major Space Consumers
-
-1. **Monaco Editor**: 77MB total
-
-   - `dev/` folder: 34MB
-   - `esm/` folder: 20MB
-   - `min-maps/` folder: 11MB
-   - `min/` folder: 11MB (production-ready, minified)
-
-2. **Source Maps**: 124MB total (14,697 files)
-
-   - @teambit source maps: 24MB (6,948 files)
-   - Third-party source maps: 100MB (7,749 files)
-
-3. **date-fns**: 24MB total
-
-   - Locale files: 14MB (unused in most cases)
-   - Function files: 10MB
-
-4. **@teambit packages**: 339MB (core functionality)
-
-## Implemented Solutions
-
-### 1. PNPM Overrides for Duplicate Packages
-
-Added overrides to consolidate duplicate packages:
-
-- `"postcss@8": "^8.4.19"`
-- `"ajv@6": "^6.12.6"`
-
-**Tested savings**: 16.9MB reduction in fresh installations
-
-_Note: Using version-specific keys (e.g., `postcss@8`) to handle conflicting major versions_
-
-### 2. Cleanup Script
-
-#### Created Files
-
-- `scripts/cleanup-node-modules.js`: Post-install optimization script
-- Updated `.circleci/config.yml`: Integrated cleanup into bundle jobs
-
-### Features
-
-- **Monaco Editor cleanup**: Removes `dev/`, `esm/`, `min-maps/` folders, keeps `min/` (~64MB saved)
-- **Source map removal**: Configurable removal of .map files (~124MB saved)
-- **Duplicate module format removal**: Removes ESM or CJS when packages ship both (~15.7MB saved)
-- **Source directory removal**: Removes redundant source directories when compiled versions exist (~10.7MB saved)
-- **TypeScript definitions cleanup**: Automatically removes `node_modules/@types` directory (~17MB saved)
-- **Safety flags**:
-  - `--dry-run`: Preview changes
-  - `--keep-source-maps`: Keep all source maps
-  - `--keep-teambit-maps`: Keep only @teambit source maps for debugging
-  - `--remove-esm`: Remove duplicate ESM builds (keep CJS for current Bit)
-  - `--remove-cjs`: Remove duplicate CJS builds (keep ESM for future migration)
-  - `--remove-source`: Remove source directories when compiled versions exist
-  - `--verbose`: Detailed output
-
-### Results
-
-See **Results** section below for detailed measurements.
-
-## Key Insights
-
-- **Hoisting critical**: `node-linker=hoisted` reduces size from ~1.2GB to ~800MB by avoiding nested .pnpm duplicates
-- **UI dependencies**: Large packages like `date-fns` (24MB) only needed for `bit start --dev`, not production
-- **Production vs Dev**: `bit start` uses pre-built bundles; `bit start --dev` rebuilds via webpack
-- **Source maps**: 124MB total (24MB @teambit, 100MB third-party) - removable for production
-
-## CircleCI Integration
-
-### Bundle Jobs Modified
-
-- `bundle_version_linux` (x64 and arm64)
-- `bundle_version_macos` (x64 and arm64)
-- `bundle_version_windows` (x64)
-
-### Reusable Command
-
-Created `optimize_node_modules` command with optional platform parameter for DRY code.
-
-### Testing Integration: Bundle Simulation Jobs
-
-**Setup Job**: `setup_bundle_simulation` (runs once)
-
-- **Purpose**: Creates cleaned bit bundle and persists to workspace
-- **Process**:
-  1. Simulates bundle process (`pnpm add @teambit/bit` with hoisting + overrides)
-  2. Applies cleanup script to bundled installation.
-  3. Verifies cleaned installation works
-  4. Persists bundle to workspace for parallel testing
-- **Testing**: Uses most aggressive optimization to ensure CLI functionality isn't broken
-
-**Test Job**: `e2e_test_bundle_simulation` (parallelized 25x)
-
-- **Purpose**: Runs e2e tests using cleaned bit bundle from workspace
-- **Process**:
-  1. Attaches workspace with cleaned bundle
-  2. Creates `bit-cleaned` binary link (avoids conflicts with repo binary)
-  3. Runs full e2e test suite using cleaned installation
-- **Output**: Separate test results (`e2e-test-results-cleaned.xml`)
-
-**Triggers**: Both jobs only run on branches matching patterns:
-
-- `optimize-node-modules*`
-- `cleanup-script*`
-- `*cleanup*script*`
-
-This approach optimizes CI by doing expensive setup once while maintaining full parallel test coverage. Ensures cleanup script changes are thoroughly tested before production deployment without affecting regular CI runs.
-
-## Testing & Validation
-
-- **UI dependency removal**: Verified `bit start` works without UI deps (uses pre-built bundles)
-- **Dev mode**: `bit start --dev` requires UI deps (rebuilds bundles dynamically)
-- **CLI commands**: All basic commands (`bit status`, `bit compile`, etc.) work after cleanup
-- **E2E tests**: Parallel test jobs validate cleaned installations thoroughly
-
-### @types Directory Analysis
-
-**@types Directory Removal (Safe - 17MB saved)**
-
-The `node_modules/@types` directory can be safely removed from BVM installations because:
-
-1. **Workspace-local installation**: When users create TypeScript components, workspaces install their own @types locally as needed
-2. **CLI operations don't require types**: Basic Bit CLI commands (status, compile, etc.) don't need global TypeScript definitions
-3. **Build-time vs runtime**: @types are development dependencies used during compilation, not runtime execution
-
-**Cleanup Implementation**: The `cleanupTypeDefinitions()` function automatically removes the entire @types directory without requiring a flag, as this optimization is safer than UI dependency removal and has minimal impact on functionality.
-
-## Esbuild Bundle Analysis Approach (Attempted)
-
-### Investigation (September 2025)
-
-Attempted to use esbuild bundling (PR #7180) to generate a definitive list of required files via metafile analysis.
-
-**Results:**
-
-- Bundle generated 47.46MB with 789 packages
-- Successfully excluded some UI dependencies (monaco-editor, zod)
-- **Limitations discovered:**
-  - Bundle doesn't capture runtime dynamic imports
-  - Lazy-loaded aspects not included in static analysis
-  - Complex ESM import resolution issues
-  - Time-intensive to maintain and update
-
-**Conclusion:** While esbuild provides tree-shaking insights, it doesn't represent the full runtime requirements for a production CLI tool. The approach was abandoned in favor of targeted package analysis.
-
-## Future Optimization Opportunities
-
-### Option A: Remove UI Dependencies from BVM
-
-- **Approach**: Strip UI dependencies from BVM releases entirely
-- **Impact**: Save 50-100MB+ (date-fns + react-datepicker + other UI deps)
-- **Trade-off**: `bit start --dev` unavailable in BVM installs
-- **Target**: 1% of users who use `--dev` mode
-
-### Option B: Development vs Production Builds
-
-- **BVM releases**: Optimized for production (no UI deps)
-- **Source installs**: Full dependencies for development
-- **Benefit**: Clear separation of concerns
-
-### Option C: Selective UI Dependency Removal
-
-- Remove specific heavy packages like `date-fns` from BVM
-- Keep lighter UI dependencies
-- Hybrid approach with some functionality loss in dev mode
-
-## date-fns Specific Analysis
-
-### Structure
-
-- Total size: 24MB
-- Locale files: 14MB (mostly unused)
-- Function files: 10MB
-- Used functions: ~20 specific functions (addDays, addHours, etc.)
-
-### Potential Optimizations
-
-1. **Locale removal**: Remove all locales except English (-14MB)
-2. **Tree shaking**: Bundle only used functions in UI builds
-3. **Complete removal**: From BVM since UI is pre-bundled
-
-## Architecture Insights
-
-### UI Bundling Process
-
-1. During `bit ci merge` or tag: UI components bundled via webpack
-2. Bundles stored in artifacts directory (likely in @teambit/ui package)
-3. `bit start`: Serves pre-built bundles
-4. `bit start --dev`: Rebuilds bundles dynamically
-
-### Global CLI Context
-
-- Bit installed globally via BVM, not as workspace dependency
-- Can't install dependencies to user workspace
-- Can't modify global installation on-the-fly
-- Dependencies must be present at install time
-
-## Recommendations
-
-### Immediate (Implemented)
-
-1. ✅ Use cleanup script with `--keep-teambit-maps` for BVM releases
-2. ✅ Integrate into CI/CD pipeline for all platforms
-
-### Short-term
-
-1. Investigate removing `date-fns` and other UI-only dependencies from BVM
-2. Document `--dev` mode limitations for BVM users
-3. Consider shipping development-focused installation instructions
-
-### Long-term
-
-1. Explore shipping minimal UI dependencies or pre-bundled alternatives
-2. Consider two-tier distribution strategy (minimal vs full)
-3. Optimize other large packages following similar patterns
-
-## Technical Details
-
-### Buffer Overflow Fix
-
-Original approach using `execSync` with `find` command failed due to ENOBUFS error when scanning 14,697+ files. Fixed by implementing recursive filesystem traversal.
-
-### Size Calculation Method
-
-**Updated (September 2025):** Changed from `du` command to Node.js `fs.statSync()` for size calculations:
-
-- **Previous**: Used `du -sk` (macOS) / `du -sb` (Linux) - reported disk usage (allocated blocks)
-- **Current**: Uses `fs.statSync().size` - reports logical file size (actual bytes)
-- **Benefits**:
-  - Consistent cross-platform results
-  - Matches "Size" in Finder/Explorer (not "Size on disk")
-  - More accurate representation of actual data
-  - Example: BVM installation shows 566MB logical size vs 880MB disk usage
-
-### Platform Considerations
-
-- Size calculation now uniform across all platforms using Node.js fs
-- Cross-platform file deletion with proper error handling
-
-### Safety Measures
-
-- Only removes definitively unnecessary files
-- Preserves all functionality for normal CLI operations
-- Maintains debugging capabilities with `--keep-teambit-maps`
-- Extensive testing on real BVM installations
-
-## Results
-
-Based on macOS testing (September 2025):
-
-### Version History
-
-- **v1.12.126 baseline**: 786.9 MB
-- **v1.12.128** (removed Prompt/Winston): 725.4 MB (-61.5 MB)
-- **v1.12.134** (removed memoizee): 722.8 MB (-2.6 MB)
-- **v1.12.152** (updated eslint-linter, removed duplicate TypeScript): 711.3 MB (-11.5 MB)
-- **With PNPM overrides**: 694.4 MB (-16.9 MB additional)
-
-### Cleanup Script Results (from 694.4 MB baseline)
-
-| Scenario                     | Final Size | Space Saved | Reduction | Breakdown                                                                         |
-| ---------------------------- | ---------- | ----------- | --------- | --------------------------------------------------------------------------------- |
-| **Default mode**             | 507.8 MB   | 186.6 MB    | 26.9%     | Monaco: 62.3MB, Maps: 101MB, @types: 17MB, Locales: 14.6MB                        |
-| **With --keep-teambit-maps** | 534.1 MB   | 160.3 MB    | 23.1%     | Monaco: 62.3MB, Maps: 74.7MB, @types: 17MB, Locales: 14.6MB                       |
-| **With --remove-esm**        | 483.9 MB   | 210.5 MB    | 30.3%     | Monaco: 62.3MB, Maps: 101MB, @types: 17MB, Locales: 14.6MB, Duplicate ESM: 15.7MB |
-| **With --remove-source**     | 488.9 MB   | 205.5 MB    | 29.6%     | Monaco: 62.3MB, Maps: 101MB, @types: 17MB, Locales: 14.6MB, Source: 10.7MB        |
-| **With --remove-ui-deps**    | 491.7 MB   | 202.7 MB    | 29.2%     | Monaco: 62.3MB, Maps: 101MB, @types: 17MB, Locales: 14.6MB, UI: ~8MB              |
-
-**Total optimization potential**: 786.9 MB → 465.3 MB (321.6 MB saved, 40.9% reduction) with all flags
-
-_Note: Results based on logical file size calculation using Node.js fs.statSync() rather than disk usage_
-
-## Key Findings
-
-### Duplicate Module Formats (~15.7MB)
-
-- **Directory-based** (~7.6MB): Packages ship both `esm/` and `cjs/` folders (e.g., `@modelcontextprotocol/sdk`, `@sinclair/typebox`)
-- **File-based** (~8.1MB): Packages ship both `.mjs` and `.mjs` files (e.g., Prettier plugins)
-- Safe to remove ESM since Bit uses CommonJS
-
-### Source Directories (~10.7MB with --remove-source)
-
-- Packages ship both source and compiled builds (e.g., `zod/src/` + `v3/`, `moment/src/` + `min/`)
-- Script removes `src/` when compiled versions exist
-
-### UI Dependencies (~8MB with --remove-ui-deps)
-
-- Packages like `date-fns`, `react-syntax-highlighter`, `d3-*` only needed for `bit start --dev`
-- Production uses pre-bundled UI artifacts
diff --git a/scopes/api-reference/api-reference/api-compare.module.scss b/scopes/api-reference/api-reference/api-compare.module.scss
index 5ed8a7b86469..f1e648ef54f6 100644
--- a/scopes/api-reference/api-reference/api-compare.module.scss
+++ b/scopes/api-reference/api-reference/api-compare.module.scss
@@ -3,248 +3,6 @@
   flex-direction: column;
   height: 100%;
   overflow: auto;
-  padding: 24px;
-  gap: 16px;
-}
-
-.summary {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  padding: 12px 16px;
-  background: var(--bit-bg-dent, #f6f6f6);
-  border-radius: 8px;
-  font-size: 13px;
-}
-
-.summaryDivider {
-  opacity: 0.3;
-  color: var(--bit-text-color-light, #6c707c);
-}
-
-.summaryBadge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 3px 10px;
-  border-radius: 12px;
-  font-weight: 500;
-  font-size: 12px;
-  white-space: nowrap;
-}
-
-.addedBadge {
-  composes: summaryBadge;
-  background: color-mix(in srgb, var(--bit-color-added, #2ea043) 15%, transparent);
-  color: var(--bit-color-added, #2ea043);
-}
-
-.removedBadge {
-  composes: summaryBadge;
-  background: color-mix(in srgb, var(--bit-color-removed, #f85149) 15%, transparent);
-  color: var(--bit-color-removed, #f85149);
-}
-
-.modifiedBadge {
-  composes: summaryBadge;
-  background: color-mix(in srgb, var(--bit-color-modified, #d29922) 15%, transparent);
-  color: var(--bit-color-modified, #d29922);
-}
-
-.changeList {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.sectionTitle {
-  margin: 16px 0 8px;
-  font-size: 12px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--bit-text-color-light, #6c707c);
-}
-
-.diffEntry {
-  border: 1px solid var(--bit-border-color-lightest, #ededed);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.diffEntryHeader {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 16px;
-  cursor: pointer;
-  user-select: none;
-
-  &:hover {
-    background: var(--bit-bg-dent, #f6f6f6);
-  }
-}
-
-.statusBadge {
-  display: inline-flex;
-  align-items: center;
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-weight: 600;
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.3px;
-  flex-shrink: 0;
-  white-space: nowrap;
-}
-
-.statusAdded {
-  composes: statusBadge;
-  background: color-mix(in srgb, var(--bit-color-added, #2ea043) 15%, transparent);
-  color: var(--bit-color-added, #2ea043);
-}
-
-.statusRemoved {
-  composes: statusBadge;
-  background: color-mix(in srgb, var(--bit-color-removed, #f85149) 15%, transparent);
-  color: var(--bit-color-removed, #f85149);
-}
-
-.statusModified {
-  composes: statusBadge;
-  background: color-mix(in srgb, var(--bit-color-modified, #d29922) 15%, transparent);
-  color: var(--bit-color-modified, #d29922);
-}
-
-.exportName {
-  font-weight: 600;
-  font-size: 14px;
-  font-family: var(--bit-font-mono, monospace);
-  color: var(--bit-text-color-heavy, #2b2b2b);
-}
-
-.schemaType {
-  color: var(--bit-text-color-light, #6c707c);
-  font-size: 12px;
-}
-
-.impactBadge {
-  composes: summaryBadge;
-  margin-left: auto;
-  font-size: 11px;
-}
-
-.expandIcon {
-  color: var(--bit-text-color-light, #6c707c);
-  font-size: 10px;
-  transition: transform 0.2s;
-  flex-shrink: 0;
-}
-
-.expandIconOpen {
-  composes: expandIcon;
-  transform: rotate(90deg);
-}
-
-.diffEntryBody {
-  padding: 0 16px 16px;
-  border-top: 1px solid var(--bit-border-color-lightest, #ededed);
-}
-
-.detailsList {
-  list-style: none;
-  padding: 12px 0 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.detailItem {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  font-size: 13px;
-  line-height: 1.5;
-  color: var(--bit-text-color-heavy, #2b2b2b);
-}
-
-.detailDot {
-  width: 7px;
-  height: 7px;
-  min-width: 7px;
-  border-radius: 50%;
-  margin-top: 6px;
-  flex-shrink: 0;
-}
-
-.dotBreaking {
-  composes: detailDot;
-  background: var(--bit-color-removed, #f85149);
-}
-
-.dotNonBreaking {
-  composes: detailDot;
-  background: var(--bit-color-added, #2ea043);
-}
-
-.dotPatch {
-  composes: detailDot;
-  background: var(--bit-color-modified, #d29922);
-}
-
-.detailDescription {
-  color: var(--bit-text-color-heavy, #2b2b2b);
-}
-
-.signatureBlock {
-  margin-top: 12px;
-  padding: 12px;
-  background: var(--bit-bg-dent, #f6f6f6);
-  border-radius: 6px;
-  font-family: var(--bit-font-mono, monospace);
-  font-size: 12px;
-  white-space: pre-wrap;
-  word-break: break-word;
-  line-height: 1.6;
-  color: var(--bit-text-color-heavy, #2b2b2b);
-}
-
-.signatureLabel {
-  font-weight: 600;
-  color: var(--bit-text-color-light, #6c707c);
-  margin-top: 12px;
-  margin-bottom: 4px;
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.signatureRemoved {
-  composes: signatureBlock;
-  text-decoration: line-through;
-  opacity: 0.6;
-}
-
-.emptyState {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: var(--bit-text-color-light, #6c707c);
-  font-size: 14px;
-}
-
-.toggleSignatures {
-  background: none;
-  border: none;
-  color: var(--bit-accent-color, #0366d6);
-  font-size: 12px;
-  cursor: pointer;
-  padding: 4px 0;
-  margin-top: 12px;
-
-  &:hover {
-    text-decoration: underline;
-  }
+  padding: 16px 24px;
+  max-width: 980px;
 }
diff --git a/scopes/api-reference/api-reference/api-compare.section.tsx b/scopes/api-reference/api-reference/api-compare.section.tsx
index 4fcd36b4b28c..0ced91d7fe8e 100644
--- a/scopes/api-reference/api-reference/api-compare.section.tsx
+++ b/scopes/api-reference/api-reference/api-compare.section.tsx
@@ -2,12 +2,24 @@ import React from 'react';
 import type { Section } from '@teambit/component';
 import type { TabItem } from '@teambit/component.ui.component-compare.models.component-compare-props';
 import type { ChangeType } from '@teambit/component.ui.component-compare.models.component-compare-change-type';
+import type { ApiDiffInsight } from '@teambit/semantics.ui.api-diff-view';
 import { APICompare } from './api-compare';
 
 // Use string cast since the external ChangeType enum doesn't have API yet
 const ChangeTypeAPI = 'API' as unknown as ChangeType;
 
 export class APICompareSection implements TabItem, Section {
+  route: { path: string; element: React.ReactNode };
+
+  constructor(getInsights?: () => ApiDiffInsight[]) {
+    // built in the constructor (not a field initializer) so the element captures the
+    // getter regardless of class-field initialization order.
+    this.route = {
+      path: 'api/*',
+      element: <APICompare getInsights={getInsights} />,
+    };
+  }
+
   navigationLink = {
     href: 'api',
     children: 'API',
@@ -15,11 +27,6 @@ export class APICompareSection implements TabItem, Section {
 
   props = this.navigationLink;
 
-  route = {
-    path: 'api/*',
-    element: <APICompare />,
-  };
-
   order = 15;
   changeType = ChangeTypeAPI;
   id = 'api';
diff --git a/scopes/api-reference/api-reference/api-compare.tsx b/scopes/api-reference/api-reference/api-compare.tsx
index dd36a05c69e0..4cdd94d1b1a8 100644
--- a/scopes/api-reference/api-reference/api-compare.tsx
+++ b/scopes/api-reference/api-reference/api-compare.tsx
@@ -1,202 +1,80 @@
 import React from 'react';
 import { useComponentCompare } from '@teambit/component.ui.component-compare.context';
-import type { APIDiffResult, APIDiffChange, APIDiffDetail } from './api-compare.types';
+import {
+  ComponentApiDiffSection,
+  ApiDiffSlimRow,
+  ApiDiffInsightProvider,
+  useApiDiff,
+} from '@teambit/semantics.ui.api-diff-view';
+import type { ApiDiffInsight } from '@teambit/semantics.ui.api-diff-view';
 import styles from './api-compare.module.scss';
 
-export type { APIDiffResult, APIDiffChange, APIDiffDetail };
+// single source of truth for the API diff model lives in api-diff-view.
+export type { APIDiffResult, APIDiffChange, APIDiffDetail } from '@teambit/semantics.ui.api-diff-view';
 
-function impactClass(impact: string): string {
-  switch (impact) {
-    case 'BREAKING':
-      return styles.removedBadge;
-    case 'NON_BREAKING':
-      return styles.addedBadge;
-    case 'PATCH':
-      return styles.modifiedBadge;
-    default:
-      return styles.summaryBadge;
-  }
-}
-
-function impactLabel(impact: string): string {
-  switch (impact) {
-    case 'BREAKING':
-      return 'Breaking';
-    case 'NON_BREAKING':
-      return 'Non-breaking';
-    case 'PATCH':
-      return 'Patch';
-    default:
-      return impact;
-  }
-}
-
-function getStatusClass(status: string): string {
-  switch (status) {
-    case 'ADDED':
-      return styles.statusAdded;
-    case 'REMOVED':
-      return styles.statusRemoved;
-    case 'MODIFIED':
-      return styles.statusModified;
-    default:
-      return styles.statusBadge;
-  }
-}
-
-function getStatusLabel(status: string): string {
-  switch (status) {
-    case 'ADDED':
-      return '+ Added';
-    case 'REMOVED':
-      return '- Removed';
-    case 'MODIFIED':
-      return '~ Modified';
-    default:
-      return status;
-  }
-}
-
-function dotClass(impact: string): string {
-  switch (impact) {
-    case 'BREAKING':
-      return styles.dotBreaking;
-    case 'NON_BREAKING':
-      return styles.dotNonBreaking;
-    default:
-      return styles.dotPatch;
-  }
-}
-
-function DetailItem({ detail }: { detail: APIDiffDetail }) {
-  return (
-    <li className={styles.detailItem}>
-      <span className={dotClass(detail.impact)} />
-      <span className={styles.detailDescription}>{detail.description}</span>
-    </li>
-  );
-}
-
-function APIDiffEntry({ change }: { change: APIDiffChange }) {
-  const [expanded, setExpanded] = React.useState(change.status === 'MODIFIED');
-  const [showSignatures, setShowSignatures] = React.useState(false);
+export type APICompareProps = {
+  /** resolved lazily at render time — slot registrations can land after the section is constructed */
+  getInsights?: () => ApiDiffInsight[];
+};
 
-  const hasBody =
-    change.status === 'MODIFIED'
-      ? (change.changes && change.changes.length > 0) || change.baseSignature || change.compareSignature
-      : change.baseSignature || change.compareSignature;
-
-  return (
-    <div className={styles.diffEntry}>
-      <div
-        className={styles.diffEntryHeader}
-        onClick={() => hasBody && setExpanded(!expanded)}
-        role="button"
-        tabIndex={0}
-        aria-expanded={hasBody ? expanded : undefined}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            hasBody && setExpanded(!expanded);
-          }
-        }}
-      >
-        <span className={getStatusClass(change.status)}>{getStatusLabel(change.status)}</span>
-        <span className={styles.exportName}>{change.exportName}</span>
-        <span className={styles.schemaType}>{change.schemaType}</span>
-        <span className={`${impactClass(change.impact)} ${styles.impactBadge}`}>{impactLabel(change.impact)}</span>
-        {hasBody && <span className={expanded ? styles.expandIconOpen : styles.expandIcon}>▶</span>}
-      </div>
-      {expanded && hasBody && (
-        <div className={styles.diffEntryBody}>
-          {change.status === 'MODIFIED' && change.changes && change.changes.length > 0 && (
-            <ul className={styles.detailsList}>
-              {change.changes.map((detail, i) => (
-                <DetailItem key={`${detail.changeKind}-${i}`} detail={detail} />
-              ))}
-            </ul>
-          )}
-          {change.status === 'MODIFIED' && (change.baseSignature || change.compareSignature) && (
-            <>
-              <button className={styles.toggleSignatures} onClick={() => setShowSignatures(!showSignatures)}>
-                {showSignatures ? '▼ Hide signatures' : '▶ Show signatures'}
-              </button>
-              {showSignatures && (
-                <>
-                  {change.baseSignature && (
-                    <div>
-                      <div className={styles.signatureLabel}>Base</div>
-                      <div className={styles.signatureRemoved}>{change.baseSignature}</div>
-                    </div>
-                  )}
-                  {change.compareSignature && (
-                    <div>
-                      <div className={styles.signatureLabel}>Compare</div>
-                      <div className={styles.signatureBlock}>{change.compareSignature}</div>
-                    </div>
-                  )}
-                </>
-              )}
-            </>
-          )}
-          {change.status === 'ADDED' && change.compareSignature && (
-            <div className={styles.signatureBlock}>{change.compareSignature}</div>
-          )}
-          {change.status === 'REMOVED' && change.baseSignature && (
-            <div className={styles.signatureRemoved}>{change.baseSignature}</div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function ChangeSection({ title, changes }: { title: string; changes: APIDiffChange[] }) {
-  if (changes.length === 0) return null;
-
-  const sorted = [...changes].sort((a, b) => {
-    const order: Record<string, number> = { REMOVED: 0, MODIFIED: 1, ADDED: 2 };
-    return (order[a.status] ?? 3) - (order[b.status] ?? 3);
+/**
+ * the API tab of the single-component compare page. thin host around the same
+ * `ComponentApiDiffSection` the lane-compare API view uses — one implementation, two hosts.
+ * data comes from the compare context (fetched once by ComponentCompare).
+ */
+export function APICompare({ getInsights }: APICompareProps) {
+  const compareContext = useComponentCompare();
+  const baseModel = compareContext?.base?.model;
+  const compareModel = compareContext?.compare?.model;
+
+  // Prefer a diff already on the context — the legacy `ComponentCompare` fetches it once and sets
+  // it there. The redesign single-component page does NOT put it on its inline context, so we fetch
+  // on our own. This hook is only mounted when the API view is the active tab (the page renders the
+  // element on-demand), so lane-compare — which renders one panel per component and never mounts
+  // this tab — pays nothing.
+  const contextApiDiff = compareContext?.apiDiffResult;
+  const shouldSelfFetch = contextApiDiff === undefined;
+  const { result: fetchedApiDiff } = useApiDiff(baseModel?.id.toString(), compareModel?.id.toString(), {
+    skip: !shouldSelfFetch,
   });
+  const apiDiffResult = shouldSelfFetch ? fetchedApiDiff : contextApiDiff;
 
-  return (
-    <>
-      <h3 className={styles.sectionTitle}>{title}</h3>
-      <div className={styles.changeList}>
-        {sorted.map((change) => (
-          <APIDiffEntry key={`${change.visibility}-${change.status}-${change.exportName}`} change={change} />
-        ))}
-      </div>
-    </>
-  );
-}
-
-export function APICompare() {
-  const compareContext = useComponentCompare();
-  const apiDiffResult: APIDiffResult | null | undefined = (compareContext as any)?.apiDiffResult;
+  if (!compareContext) return null;
 
-  if (apiDiffResult === undefined) {
-    return <div className={styles.emptyState}>Loading API diff...</div>;
-  }
+  const id = (compareModel || baseModel)?.id;
+  if (!id) return null;
 
-  if (!apiDiffResult || !apiDiffResult.hasChanges) {
-    return <div className={styles.emptyState}>No API changes between these versions</div>;
-  }
+  const componentIdStr = id.toStringWithoutVersion();
+  const baseVersion = baseModel?.id.version;
+  const compareVersion = compareModel?.id.version;
 
-  const { publicChanges, internalChanges, added, removed, modified, breaking, impact } = apiDiffResult;
+  // no base (first version) or identical versions — nothing to diff, not a failure.
+  const nothingToCompare = apiDiffResult === null && (!baseVersion || baseVersion === compareVersion);
 
   return (
-    <div className={styles.apiCompareContainer}>
-      <div className={styles.summary}>
-        <span className={impactClass(impact)}>{impactLabel(impact)}</span>
-        <span className={styles.summaryDivider}>|</span>
-        {added > 0 && <span className={styles.addedBadge}>+{added} added</span>}
-        {removed > 0 && <span className={styles.removedBadge}>-{removed} removed</span>}
-        {modified > 0 && <span className={styles.modifiedBadge}>~{modified} modified</span>}
-        {breaking > 0 && <span className={styles.removedBadge}>{breaking} breaking</span>}
+    <ApiDiffInsightProvider insights={getInsights?.()}>
+      <div className={styles.apiCompareContainer}>
+        {nothingToCompare ? (
+          <ApiDiffSlimRow
+            componentIdStr={componentIdStr}
+            displayName={id.fullName}
+            chip="nothing to compare"
+            detail={baseVersion ? 'both sides are the same version' : 'no base version to compare against'}
+            tone="ok"
+          />
+        ) : (
+          <ComponentApiDiffSection
+            componentIdStr={componentIdStr}
+            displayName={id.fullName}
+            baseId={baseModel?.id.toString()}
+            compareId={compareModel?.id.toString()}
+            baseVersion={baseVersion}
+            compareVersion={compareVersion}
+            result={apiDiffResult}
+            loading={apiDiffResult === undefined}
+          />
+        )}
       </div>
-      <ChangeSection title="Public API" changes={publicChanges} />
-      <ChangeSection title="Internal (non-exported)" changes={internalChanges} />
-    </div>
+    </ApiDiffInsightProvider>
   );
 }
diff --git a/scopes/api-reference/api-reference/api-compare.types.ts b/scopes/api-reference/api-reference/api-compare.types.ts
deleted file mode 100644
index 006fbd696be7..000000000000
--- a/scopes/api-reference/api-reference/api-compare.types.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-export type APIDiffDetail = {
-  changeKind: string;
-  description: string;
-  impact: string;
-  from?: string;
-  to?: string;
-};
-
-export type APIDiffChange = {
-  status: string;
-  visibility: string;
-  exportName: string;
-  schemaType: string;
-  schemaTypeRaw: string;
-  impact: string;
-  baseSignature?: string;
-  compareSignature?: string;
-  baseNode?: Record<string, any>;
-  compareNode?: Record<string, any>;
-  changes?: APIDiffDetail[];
-};
-
-export type APIDiffResult = {
-  hasChanges: boolean;
-  impact: string;
-  publicChanges: APIDiffChange[];
-  internalChanges: APIDiffChange[];
-  changes: APIDiffChange[];
-  added: number;
-  removed: number;
-  modified: number;
-  breaking: number;
-  nonBreaking: number;
-  patch: number;
-};
diff --git a/scopes/api-reference/api-reference/api-reference.ui.runtime.tsx b/scopes/api-reference/api-reference/api-reference.ui.runtime.tsx
index 50caab2e66b8..53a6855aea07 100644
--- a/scopes/api-reference/api-reference/api-reference.ui.runtime.tsx
+++ b/scopes/api-reference/api-reference/api-reference.ui.runtime.tsx
@@ -87,8 +87,9 @@ export class APIReferenceUI {
     // register all default schema classes
     apiReferenceUI.registerSchemaClasses(() => Object.values(Schemas));
 
-    // register API compare tab in component compare
-    const apiCompareSection = new APICompareSection();
+    // register API compare tab in component compare. insights are resolved lazily —
+    // aspects can register them on componentCompareUI after this provider runs.
+    const apiCompareSection = new APICompareSection(() => componentCompareUI.getApiDiffInsights());
     componentCompareUI.registerNavigation(apiCompareSection);
     componentCompareUI.registerRoutes([apiCompareSection.route]);
 
diff --git a/scopes/api-reference/api-reference/index.ts b/scopes/api-reference/api-reference/index.ts
index 96d53ecece9c..d1b4c8b5ae28 100644
--- a/scopes/api-reference/api-reference/index.ts
+++ b/scopes/api-reference/api-reference/index.ts
@@ -2,6 +2,6 @@ import { APIReferenceAspect } from './api-reference.aspect';
 
 export type { APIReferenceUI, APINodeRendererSlot } from './api-reference.ui.runtime';
 export { APICompare } from './api-compare';
-export type { APIDiffResult, APIDiffChange, APIDiffDetail } from './api-compare.types';
+export type { APIDiffResult, APIDiffChange, APIDiffDetail } from './api-compare';
 export default APIReferenceAspect;
 export { APIReferenceAspect };
diff --git a/scopes/component/component-compare/compare-component-pairs.spec.ts b/scopes/component/component-compare/compare-component-pairs.spec.ts
new file mode 100644
index 000000000000..301d98c7bae5
--- /dev/null
+++ b/scopes/component/component-compare/compare-component-pairs.spec.ts
@@ -0,0 +1,59 @@
+import { expect } from 'chai';
+import { compareComponentPairs } from './compare-component-pairs';
+import type { ComponentComparePair } from './compare-component-pairs';
+
+describe('compareComponentPairs', () => {
+  const pairs: ComponentComparePair[] = [
+    { baseId: 'a@1', compareId: 'a@2' },
+    { baseId: 'b@1', compareId: 'b@2' },
+    { baseId: 'c@1', compareId: 'c@2' },
+  ];
+
+  it('returns one result per pair, preserving order', async () => {
+    const results = await compareComponentPairs(
+      pairs,
+      async (baseId, compareId) => ({ id: `${baseId}-${compareId}` }),
+      { concurrency: 2 }
+    );
+    expect(results).to.deep.equal([{ id: 'a@1-a@2' }, { id: 'b@1-b@2' }, { id: 'c@1-c@2' }]);
+  });
+
+  it('slices by offset and limit', async () => {
+    const results = await compareComponentPairs(pairs, async (baseId) => ({ id: baseId }), {
+      offset: 1,
+      limit: 1,
+      concurrency: 2,
+    });
+    expect(results).to.deep.equal([{ id: 'b@1' }]);
+  });
+
+  it('returns an empty array when offset is past the end', async () => {
+    const results = await compareComponentPairs(pairs, async (b) => ({ id: b }), {
+      offset: 99,
+      concurrency: 2,
+    });
+    expect(results).to.deep.equal([]);
+  });
+
+  it('isolates a failing pair as null without failing the others', async () => {
+    const errors: ComponentComparePair[] = [];
+    const results = await compareComponentPairs(
+      pairs,
+      async (baseId) => {
+        if (baseId === 'b@1') throw new Error('no version yet');
+        return { id: baseId };
+      },
+      {
+        concurrency: 2,
+        onError: (pair) => errors.push(pair),
+      }
+    );
+    expect(results).to.deep.equal([{ id: 'a@1' }, null, { id: 'c@1' }]);
+    expect(errors).to.deep.equal([{ baseId: 'b@1', compareId: 'b@2' }]);
+  });
+
+  it('returns an empty array for empty input', async () => {
+    const results = await compareComponentPairs([], async (b) => ({ id: b }), { concurrency: 2 });
+    expect(results).to.deep.equal([]);
+  });
+});
diff --git a/scopes/component/component-compare/compare-component-pairs.ts b/scopes/component/component-compare/compare-component-pairs.ts
new file mode 100644
index 000000000000..b26baa41d17f
--- /dev/null
+++ b/scopes/component/component-compare/compare-component-pairs.ts
@@ -0,0 +1,45 @@
+import pMap from 'p-map';
+
+export type ComponentComparePair = {
+  baseId: string;
+  compareId: string;
+};
+
+export type CompareComponentPairsOptions = {
+  /** index into `pairs` to start from (default 0) */
+  offset?: number;
+  /** number of pairs to process from `offset` (default: the rest of the list) */
+  limit?: number;
+  /** max number of pairs compared in parallel */
+  concurrency: number;
+  /** invoked when a single pair's comparison throws; that pair's slot becomes null */
+  onError?: (pair: ComponentComparePair, err: unknown) => void;
+};
+
+/**
+ * compares a paginated slice of component pairs with bounded concurrency.
+ * a pair whose `compareFn` throws becomes `null` in the result instead of failing the whole batch.
+ * the returned array is aligned to the requested slice (`pairs[offset .. offset + limit]`).
+ */
+export async function compareComponentPairs<T>(
+  pairs: ComponentComparePair[],
+  compareFn: (baseId: string, compareId: string) => Promise<T>,
+  options: CompareComponentPairsOptions
+): Promise<Array<T | null>> {
+  const offset = options.offset ?? 0;
+  const limit = options.limit ?? pairs.length - offset;
+  const slice = pairs.slice(offset, offset + limit);
+
+  return pMap(
+    slice,
+    async (pair): Promise<T | null> => {
+      try {
+        return await compareFn(pair.baseId, pair.compareId);
+      } catch (err) {
+        options.onError?.(pair, err);
+        return null;
+      }
+    },
+    { concurrency: options.concurrency }
+  );
+}
diff --git a/scopes/component/component-compare/component-compare-page.module.scss b/scopes/component/component-compare/component-compare-page.module.scss
new file mode 100644
index 000000000000..50c09cbe22db
--- /dev/null
+++ b/scopes/component/component-compare/component-compare-page.module.scss
@@ -0,0 +1,119 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  background: var(--surface-base-color, #fff);
+}
+
+.versionPickerRow {
+  flex: 0 0 auto;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--border-color, #e6e8eb);
+}
+
+.blankState {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@keyframes compareSkeletonShimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+%compareSkeletonShape {
+  border-radius: 6px;
+  background: linear-gradient(
+    90deg,
+    var(--surface-neutral-color, #f0f2f5) 25%,
+    var(--surface-hover-color, #e8ecf0) 37%,
+    var(--surface-neutral-color, #f0f2f5) 63%
+  );
+  background-size: 400% 100%;
+  animation: compareSkeletonShimmer 1.4s ease infinite;
+}
+
+.toolbarSkeleton {
+  flex: 0 0 auto;
+  display: flex;
+  gap: 8px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--border-color, #e6e8eb);
+}
+
+.skelPill {
+  @extend %compareSkeletonShape;
+  width: 92px;
+  height: 28px;
+}
+
+.bodySkeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 16px 20px;
+}
+
+.skelHeader {
+  @extend %compareSkeletonShape;
+  width: 40%;
+  height: 16px;
+  margin-bottom: 8px;
+}
+
+.skelLine {
+  @extend %compareSkeletonShape;
+  height: 12px;
+}
+
+.diffPane {
+  flex: 1 1 auto;
+  min-height: 0;
+  // shrink below content width so a wide diff scrolls inside its own file body instead of forcing
+  // the whole page horizontally wider.
+  min-width: 0;
+  overflow: auto;
+  // No padding/gap on the scroll container itself: the sticky component header (top:
+  // `--group-header-height`) and diff-file headers (top: `--group-header-height` +
+  // `--component-header-height`) are measured from the scrollport edge, so any padding here
+  // offsets them and they stop stacking flush. Inner cards/headers carry their own padding
+  // (mirrors lane-compare's padding-less `.diffPane`).
+  display: flex;
+  flex-direction: column;
+
+  // Tab visibility driven by `data-view-mode` on the pane. All `DeferredTab` siblings are mounted
+  // simultaneously so their internal query state survives mode switches; CSS hides the non-active
+  // tabs. Mirror of lane-compare's panel selectors so the same inline-* tabs work in both pages.
+  &[data-view-mode='code'] [data-tab-id]:not([data-tab-id='inline-code']) {
+    display: none;
+  }
+  &[data-view-mode='preview'] [data-tab-id]:not([data-tab-id='inline-preview']) {
+    display: none;
+  }
+  &[data-view-mode='dependencies'] [data-tab-id]:not([data-tab-id='inline-deps']) {
+    display: none;
+  }
+  &[data-view-mode='tests'] [data-tab-id]:not([data-tab-id='inline-tests']) {
+    display: none;
+  }
+  &[data-view-mode='config'] [data-tab-id]:not([data-tab-id='inline-config']) {
+    display: none;
+  }
+  &[data-view-mode='docs'] [data-tab-id]:not([data-tab-id='inline-docs']) {
+    display: none;
+  }
+  // The API view is not an inline `[data-tab-id]` tab — it's rendered as a direct child of the
+  // inline compare (only while active). Hide every inline tab so only the API element shows.
+  &[data-view-mode='api'] [data-tab-id] {
+    display: none;
+  }
+}
diff --git a/scopes/component/component-compare/component-compare-page.tsx b/scopes/component/component-compare/component-compare-page.tsx
new file mode 100644
index 000000000000..15acc7a8f0d7
--- /dev/null
+++ b/scopes/component/component-compare/component-compare-page.tsx
@@ -0,0 +1,497 @@
+import type { HTMLAttributes } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+import classnames from 'classnames';
+import { useSearchParams } from 'react-router-dom';
+import { ComponentContext, ComponentDescriptorContext, useComponent } from '@teambit/component';
+import type { TabItem } from '@teambit/component.ui.component-compare.models.component-compare-props';
+import {
+  ComponentCompareContext,
+  InlineCompareEmpty,
+  useComponentCompare,
+} from '@teambit/component.ui.component-compare.context';
+import { ComponentCompareVersionPicker } from '@teambit/component.ui.component-compare.version-picker';
+import { useCompareQueryParam } from '@teambit/component.ui.component-compare.hooks.use-component-compare-url';
+import { sortByDateDsc } from '@teambit/component.ui.component-compare.utils.sort-logs';
+import { groupByVersion } from '@teambit/component.ui.component-compare.utils.group-by-version';
+import type { LegacyComponentLog } from '@teambit/legacy-component-log';
+import {
+  CompareDataProvider,
+  CompareToolbar,
+  DiffModeProvider,
+  FileRegistryProvider,
+  InlineComponentCompare,
+  RegistryFeeder,
+  useCompareData,
+} from '@teambit/component.ui.component-compare.component-compare';
+import type { CompareViewMode, ComponentComparePair } from '@teambit/component.ui.component-compare.component-compare';
+import { computeDepsDiff } from '@teambit/dependencies.ui.deps-diff-table';
+import { useApiDiff } from '@teambit/semantics.ui.api-diff-view';
+
+import styles from './component-compare-page.module.scss';
+
+export type ComponentComparePageProps = {
+  host: string;
+  tabs: TabItem[] | (() => TabItem[]);
+  /**
+   * Lazily resolves the API compare element (contributed by the api-reference aspect). Resolved at
+   * render — not construction — so it doesn't depend on UI-provider registration order. When it
+   * yields an element, the page exposes an `api` view mode; the element is only mounted while that
+   * view is active, so its diff query fires on-demand.
+   */
+  getApiTab?: () => React.ReactNode;
+  className?: string;
+} & HTMLAttributes<HTMLDivElement>;
+
+type ViewMode = 'code' | 'preview' | 'docs' | 'dependencies' | 'tests' | 'config' | 'api';
+type DiffMode = 'split' | 'unified';
+
+// The single-component compare offers the same view modes as lane-compare. Which ones actually
+// appear is driven by real per-view content counts (see `CompareView`) — mirroring how the cloud
+// changes view derives available views from each component's change types, so a user never lands
+// on a view that has nothing to show. `api` is only listed when the api-reference aspect supplies
+// an API tab (see `getApiTab`); like lane-compare it's always available then (the view renders its
+// own "nothing to compare" state), since we only fetch the diff once the view is opened.
+// Order mirrors lane-compare exactly (API first), so the two compare surfaces read identically.
+const COMPARE_VIEW_MODES: CompareViewMode[] = [
+  { id: 'api', displayName: 'API', icon: 'schema' },
+  { id: 'code', displayName: 'Code', icon: 'code' },
+  { id: 'preview', displayName: 'Preview', icon: 'eye' },
+  { id: 'docs', displayName: 'Docs', icon: 'overview' },
+  { id: 'dependencies', displayName: 'Dependencies', icon: 'link' },
+  { id: 'tests', displayName: 'Tests', icon: 'test' },
+  { id: 'config', displayName: 'Configuration', icon: 'configuration' },
+];
+
+function findPrevVersionFromCurrent(currentVersion?: string) {
+  return (log: LegacyComponentLog, index: number, logs: LegacyComponentLog[]) => {
+    if (!currentVersion) return index === 1;
+    const prevIndex = logs.findIndex((l) => (l.tag || l.hash) === currentVersion) + 1;
+    return index === prevIndex;
+  };
+}
+
+export function ComponentComparePage({
+  host: hostFromProps,
+  tabs,
+  getApiTab,
+  className,
+  ...rest
+}: ComponentComparePageProps) {
+  // `component` from ComponentContext is authoritative for the compare side — mirrors legacy
+  // `ComponentCompare` which never loaded a separate compareModel when there was no override.
+  // Loading a separate copy via useComponent risks an id string that differs from the live
+  // workspace component (e.g. no version), which breaks the server's local-changes detection
+  // (`computeCompare`: `comparingWithLocalChanges = workspace && baseId === compareId`).
+  const component = useContext(ComponentContext);
+  const componentDescriptor = useContext(ComponentDescriptorContext);
+
+  const resolvedTabs = useMemo(() => (typeof tabs === 'function' ? tabs() : tabs), [tabs]);
+  const apiTab = useMemo(() => getApiTab?.(), [getApiTab]);
+
+  const baseVersion = useCompareQueryParam('baseVersion');
+  // The compare side follows the component page's main version dropdown, which sets `?version`.
+  // When it's set the user is viewing a specific published version, so we compare against THAT
+  // version (clean); when absent we default to the live workspace. Read the exact `version` key —
+  // NOT `search.includes('version')`, which the old code used and which also matched `baseVersion`,
+  // wrongly flipping this whenever a base was picked.
+  const compareVersionParam = useCompareQueryParam('version');
+  const isWorkspace = hostFromProps === 'teambit.workspace/workspace';
+
+  const allVersionInfo = useMemo(
+    () => component.logs?.slice().sort(sortByDateDsc) || [],
+    [component.id.toString(), component.logs?.length]
+  );
+  const isNew = allVersionInfo.length === 0;
+  // "workspace" (live on-disk files, incl. uncommitted) only when NO specific version is selected.
+  // With `?version` set, the compare side is that clean version — the server then diffs it as a real
+  // version instead of the live workspace (`computeCompare`'s `compareIsLiveWorkspace`).
+  const compareHasLocalChanges = isWorkspace && !isNew && !compareVersionParam;
+
+  // Pick the base version: explicit URL param > previous published version > current.
+  // The default base is the *previous* published version so the workspace compare shows the changes
+  // since that version (committed + uncommitted). Defaulting to the current checked-out version made
+  // base === compare, so the diff was empty and the view collapsed to its always-on sections.
+  const lastVersionInfo = useMemo(
+    () => allVersionInfo.find(findPrevVersionFromCurrent(component.id.version)),
+    [allVersionInfo, component.id.version]
+  );
+
+  const baseId = useMemo(
+    () =>
+      (baseVersion && component.id.changeVersion(baseVersion)) ||
+      (lastVersionInfo && component.id.changeVersion(lastVersionInfo.tag || lastVersionInfo.hash)) ||
+      component.id,
+    [baseVersion, lastVersionInfo?.tag, lastVersionInfo?.hash, component.id.toString()]
+  );
+
+  const {
+    component: base,
+    componentDescriptor: baseComponentDescriptor,
+    loading: baseLoading,
+    error: baseError,
+  } = useComponent('teambit.scope/scope', baseId?.toString(), { skip: !baseId || isNew });
+
+  // The base model is fetched asynchronously. Until it resolves we must report `loading: true` —
+  // otherwise consumers (the toolbar counts, the dependency diff, etc.) observe `base === undefined`
+  // with `loading === false` and wrongly treat the component as new (no base + has compare),
+  // deriving bogus "everything changed" data before the comparison is actually stable. We treat the
+  // base as loading until the model is present (not just until Apollo's flag flips), which also
+  // covers the skip→fetch transition where the flag is briefly false with no model yet.
+  const baseModelLoading = !isNew && !!baseId && !baseError && (!!baseLoading || !base);
+
+  // The compare side is always the checked-out component. In workspace mode the server recognises
+  // this as the live workspace and diffs the base snap against the on-disk files (so uncommitted
+  // changes are included) — see `computeCompare`'s `compareIsLiveWorkspace`. The base then differs
+  // from the compare (previous version vs. current), which is what surfaces the real change set.
+  const baseIdStr = baseId?.toString();
+  const compareIdStr = component.id.toString();
+
+  // When the resolved base and compare point at the exact same version (and we are not diffing
+  // live workspace changes against a snap), there is nothing to diff. This is common: a
+  // single-version component, or the user picking the same version on both sides. Without this
+  // the whole pane just blanks out, so we show an explicit "identical versions" state instead.
+  const isSameVersion = !isNew && !compareHasLocalChanges && !!baseIdStr && baseIdStr === compareIdStr;
+
+  const logsByVersion = useMemo(
+    () => (component.logs || []).slice().reduce(groupByVersion, new Map<string, LegacyComponentLog>()),
+    [component.id.toString(), component.logs?.length]
+  );
+
+  // Build a minimal ComponentCompareContext for the version picker (it only reads
+  // `compare.model.logs`, `compare.model.version`, and `base.model.version`). Data for the
+  // diff itself flows through `CompareDataProvider` → `InlineContextProvider` inside
+  // `InlineComponentCompare`, which sets its own inner context with the file/aspect/test maps.
+  const componentCompareModel = useMemo(
+    () => ({
+      compare: {
+        model: component,
+        descriptor: componentDescriptor,
+        hasLocalChanges: compareHasLocalChanges,
+      },
+      base: base && {
+        model: base,
+        descriptor: baseComponentDescriptor,
+      },
+      // `!component.logs` ⇒ the compare component's version history hasn't loaded yet, so `isNew`
+      // (derived from it) is not yet known. Stay in loading until it resolves — otherwise we briefly
+      // treat the component as new (no base) and render the wrong toolbar before the base/diff load.
+      loading: !component.logs || baseModelLoading,
+      logsByVersion,
+      isFullScreen: true,
+      hidden: false,
+    }),
+    [
+      component,
+      base?.id.toString(),
+      componentDescriptor,
+      baseComponentDescriptor,
+      compareHasLocalChanges,
+      logsByVersion,
+      baseModelLoading,
+    ]
+  );
+
+  const pair: ComponentComparePair | null = useMemo(() => {
+    if (isNew || isSameVersion || !baseIdStr || !compareIdStr) return null;
+    return { baseId: baseIdStr, compareId: compareIdStr };
+  }, [isNew, isSameVersion, baseIdStr, compareIdStr]);
+  const pairs = useMemo(() => (pair ? [pair] : []), [pair]);
+
+  // Map the registered inline tabs to view-mode ids so `CompareView` only counts/shows modes that
+  // are actually registered (e.g. there is no `docs` inline tab today). The `api` view is not an
+  // inline tab — it's supplied separately by `getApiTab` — so append it here when available.
+  const registeredModeIds = useMemo(() => {
+    const ids = resolvedTabs.map((t) => inlineTabIdToViewMode(t.id)).filter(Boolean) as ViewMode[];
+    if (apiTab) ids.push('api');
+    return ids;
+  }, [resolvedTabs, apiTab]);
+
+  const baseVersionShort = baseId?.version?.slice(0, 7);
+  const compareVersionShort = compareHasLocalChanges ? 'workspace' : (component.id.version || '').slice(0, 7);
+
+  return (
+    <ComponentCompareContext.Provider value={componentCompareModel as any}>
+      <CompareDataProvider pairs={pairs}>
+        <FileRegistryProvider>
+          <RegistryFeeder pairs={pairs} />
+          <div className={classnames(styles.page, className)} {...rest}>
+            <div className={styles.versionPickerRow}>
+              <ComponentCompareVersionPicker
+                componentId={component.id.toStringWithoutVersion()}
+                baseVersion={baseId?.version}
+                compareVersion={component.id.version}
+                compareHasLocalChanges={compareHasLocalChanges}
+                host={hostFromProps}
+              />
+            </div>
+
+            {isSameVersion ? (
+              <div className={styles.blankState}>
+                <InlineCompareEmpty
+                  message="No changes to compare"
+                  baseVersion={baseVersionShort}
+                  compareVersion={compareVersionShort}
+                  hint="Both sides point to the same version. Pick a different base above to compare."
+                />
+              </div>
+            ) : (
+              <CompareView
+                isNew={isNew}
+                name={component.id.fullName}
+                baseId={isNew ? undefined : baseIdStr}
+                compareId={compareIdStr || component.id.toString()}
+                baseVersionShort={baseVersionShort}
+                compareVersionShort={compareVersionShort}
+                resolvedTabs={resolvedTabs}
+                registeredModeIds={registeredModeIds}
+                apiTab={apiTab}
+                host={hostFromProps}
+              />
+            )}
+          </div>
+        </FileRegistryProvider>
+      </CompareDataProvider>
+    </ComponentCompareContext.Provider>
+  );
+}
+
+type CompareViewProps = {
+  isNew: boolean;
+  name: string;
+  baseId?: string;
+  compareId: string;
+  baseVersionShort?: string;
+  compareVersionShort?: string;
+  resolvedTabs: TabItem[];
+  registeredModeIds: ViewMode[];
+  /** API compare element, rendered only while the `api` view is active (on-demand fetch). */
+  apiTab?: React.ReactNode;
+  host: string;
+};
+
+/**
+ * Renders the toolbar + diff pane. Lives inside `CompareDataProvider` so it can read the bulk
+ * compare result and derive real per-view counts: a view mode only appears when it has content
+ * (code files changed, compositions exist, aspects changed, …), so the user never clicks into an
+ * empty view. Mirrors the cloud changes view, which gates each view on the component's change types.
+ */
+function CompareView({
+  isNew,
+  name,
+  baseId,
+  compareId,
+  baseVersionShort,
+  compareVersionShort,
+  resolvedTabs,
+  registeredModeIds,
+  apiTab,
+  host,
+}: CompareViewProps) {
+  const [searchParams] = useSearchParams();
+  const [viewMode, setViewModeState] = useState<ViewMode>((searchParams.get('view') as ViewMode) || 'code');
+  const [diffMode, setDiffModeState] = useState<DiffMode>((searchParams.get('diffMode') as DiffMode) || 'split');
+
+  const syncUrl = React.useCallback((key: string, value: string | undefined) => {
+    const url = new URL(window.location.href);
+    if (value) url.searchParams.set(key, value);
+    else url.searchParams.delete(key);
+    window.history.replaceState(null, '', url.toString());
+  }, []);
+
+  const setViewMode = React.useCallback(
+    (v: ViewMode) => {
+      setViewModeState(v);
+      syncUrl('view', v === 'code' ? undefined : v);
+    },
+    [syncUrl]
+  );
+  const setDiffMode = React.useCallback(
+    (d: DiffMode) => {
+      setDiffModeState(d);
+      syncUrl('diffMode', d === 'split' ? undefined : d);
+    },
+    [syncUrl]
+  );
+
+  const componentCompare = useComponentCompare();
+  const compareData = useCompareData();
+  const data = compareData?.getData(compareId);
+  const dataLoading = compareData?.loading ?? false;
+
+  // The API view mode appears when there's something meaningful to show. Unlike the bulk
+  // code/aspect/test data, the API diff is a separate query — fetch it here (cheap: one pair) so the
+  // count is real. The API tab element self-fetches the same query when opened, so Apollo serves it
+  // from cache (no double round-trip). Skipped entirely when there's no API tab registered.
+  const { result: apiDiffResult, loading: apiDiffLoading } = useApiDiff(baseId, compareId, { skip: !apiTab });
+  // A per-version extraction gap (a side built before API extraction, or a failed extraction) is a
+  // "couldn't compute" state worth surfacing — NOT the same as "no changes". Distinct from a
+  // component-wide DISABLED/NO_EXTRACTOR (a component that simply has no API), which stays hidden so
+  // the tab isn't noise on non-API components.
+  const apiExtractionGap = (side?: { available: boolean; reason?: string }) =>
+    !!side && !side.available && (side.reason === 'NOT_BUILT' || side.reason === 'FAILED');
+  const apiTabHasContent =
+    !!apiDiffResult &&
+    (apiDiffResult.hasChanges ||
+      (apiDiffResult.unresolvedExports?.length ?? 0) > 0 ||
+      apiExtractionGap(apiDiffResult.base) ||
+      apiExtractionGap(apiDiffResult.compare));
+
+  // Single stability gate. `componentCompare.loading` is true while the base/compare *models* are
+  // still being fetched; `dataLoading` is true while the bulk code/aspect/test diff is in flight;
+  // `apiDiffLoading` while the API diff (which gates the API tab) resolves. We must not derive any
+  // per-view counts until ALL are settled — otherwise a half-loaded state (base model not yet
+  // present) reads as "no base → new → everything changed", or the API tab flickers in late.
+  const loading = (componentCompare?.loading ?? false) || dataLoading || (!!apiTab && apiDiffLoading);
+
+  // All per-view derivation happens here, and ONLY in the stable branch. While anything is loading we
+  // render a skeleton (below) instead of the toolbar, so we compute nothing — no counting, and most
+  // importantly no dependency diff against half-loaded or absent data.
+  const counts = useMemo(() => {
+    const acc: Record<string, number> = {};
+    if (loading) return acc;
+
+    // Dependency changes come from the dependency-resolver aspect on each descriptor (the same source
+    // InlineDepsCompare diffs) — there is no precomputed deps diff in the bulk gql result.
+    const getDeps = (descriptor: any): any[] => {
+      const aspect = descriptor?.get?.('teambit.dependencies/dependency-resolver');
+      return aspect?.data?.dependencies || aspect?.dependencies || [];
+    };
+    const depChanges = computeDepsDiff(
+      isNew ? [] : getDeps(componentCompare?.base?.descriptor),
+      getDeps(componentCompare?.compare?.descriptor)
+    ).filter((e) => e.status !== 'unchanged').length;
+
+    // Compositions live on the component model (not the bulk diff). Show preview if either side has any.
+    const compositionsCount = Math.max(
+      componentCompare?.compare?.model?.compositions?.length || 0,
+      componentCompare?.base?.model?.compositions?.length || 0
+    );
+
+    const changedCode = data ? (data.code || []).filter((f) => f.status && f.status !== 'UNCHANGED').length : 0;
+    const changedAspects = data ? (data.aspects || []).length : 0;
+    const changedTests = data ? (data.tests || []).filter((f) => f.status && f.status !== 'UNCHANGED').length : 0;
+
+    for (const id of registeredModeIds) {
+      switch (id) {
+        case 'code':
+          acc.code = isNew ? 1 : changedCode;
+          break;
+        case 'config':
+          acc.config = isNew ? 1 : changedAspects;
+          break;
+        case 'tests':
+          acc.tests = isNew ? 0 : changedTests;
+          break;
+        case 'preview':
+          acc.preview = compositionsCount;
+          break;
+        case 'dependencies':
+          acc.dependencies = depChanges;
+          break;
+        case 'api':
+          // Show when there are real changes, unresolved exports, OR a per-version schema gap
+          // (so "schema unavailable for this version" is surfaced, not silently hidden). Stays
+          // hidden for a plain computed no-op and for non-API components.
+          acc.api = apiTabHasContent ? 1 : 0;
+          break;
+        default:
+          acc[id] = 1;
+      }
+    }
+    return acc;
+  }, [loading, registeredModeIds, isNew, data, componentCompare, apiTabHasContent]);
+
+  // If the active view has no content, fall back to the first view that does.
+  useEffect(() => {
+    if (loading) return;
+    if ((counts[viewMode] ?? 0) === 0) {
+      const first = COMPARE_VIEW_MODES.find((v) => (counts[v.id] ?? 0) > 0);
+      if (first) setViewMode(first.id as ViewMode);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [counts, viewMode, loading]);
+
+  // Render a skeleton until base, compare and the bulk diff are all loaded. We must not render the
+  // toolbar early: its visible view modes are derived from the counts, so a half-loaded state would
+  // show the wrong set (e.g. 5 modes) and then visibly collapse (to 2) once data arrives.
+  if (loading) {
+    return <CompareViewSkeleton />;
+  }
+
+  return (
+    <DiffModeProvider mode={diffMode}>
+      <CompareToolbar
+        viewMode={viewMode}
+        onViewModeChange={(v) => setViewMode(v as ViewMode)}
+        diffMode={diffMode}
+        onDiffModeChange={setDiffMode}
+        viewModes={COMPARE_VIEW_MODES}
+        counts={counts}
+        showCounts={false}
+        loading={loading}
+      />
+
+      <div className={styles.diffPane} data-view-mode={viewMode}>
+        <InlineComponentCompare
+          name={name}
+          baseId={baseId}
+          compareId={compareId}
+          baseVersion={baseVersionShort}
+          compareVersion={compareVersionShort}
+          allTabs={resolvedTabs}
+          host={host}
+          // Hand the inner context our already-resolved pair: base = the scope's published snap,
+          // compare = the live workspace component (with local changes). Without this the inner
+          // context re-fetches by id and, in local-changes mode (compareId === baseId), would load
+          // the same snap for both sides — making the deps/config/preview tabs show base vs base.
+          baseOverride={componentCompare?.base as { model?: any; descriptor?: any } | undefined}
+          compareOverride={componentCompare?.compare as { model?: any; descriptor?: any } | undefined}
+        >
+          {/* The API view isn't an inline tab — render it inside the inline context (so it sees the
+              resolved base/compare pair) only while it's the active view, so its diff query fires
+              on-demand. CSS hides the inline `[data-tab-id]` panels when `data-view-mode='api'`. */}
+          {viewMode === 'api' ? apiTab : null}
+        </InlineComponentCompare>
+      </div>
+    </DiffModeProvider>
+  );
+}
+
+function CompareViewSkeleton() {
+  return (
+    <>
+      <div className={styles.toolbarSkeleton}>
+        {Array.from({ length: 4 }).map((_, i) => (
+          <span key={i} className={styles.skelPill} />
+        ))}
+      </div>
+      <div className={styles.diffPane}>
+        <div className={styles.bodySkeleton}>
+          <div className={styles.skelHeader} />
+          {Array.from({ length: 8 }).map((_, i) => (
+            <div key={i} className={styles.skelLine} style={{ width: `${45 + ((i * 7) % 45)}%` }} />
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}
+
+function inlineTabIdToViewMode(id?: string): ViewMode | undefined {
+  switch (id) {
+    case 'inline-code':
+      return 'code';
+    case 'inline-preview':
+      return 'preview';
+    case 'inline-docs':
+      return 'docs';
+    case 'inline-deps':
+      return 'dependencies';
+    case 'inline-tests':
+      return 'tests';
+    case 'inline-config':
+      return 'config';
+    default:
+      return undefined;
+  }
+}
diff --git a/scopes/component/component-compare/component-compare.graphql.ts b/scopes/component/component-compare/component-compare.graphql.ts
index c78b7f50509d..0f18e08c0136 100644
--- a/scopes/component/component-compare/component-compare.graphql.ts
+++ b/scopes/component/component-compare/component-compare.graphql.ts
@@ -21,14 +21,25 @@ export function componentCompareSchema(componentCompareMain: ComponentCompareMai
       type ComponentCompareResult {
         # unique id for graphql - baseId + compareId
         id: String!
+        baseId: String!
+        compareId: String!
         code(fileName: String): [FileCompareResult!]!
         aspects(aspectName: String): [FieldCompareResult!]!
         tests(fileName: String): [FileCompareResult!]
         api: APIDiffResult
       }
 
+      input ComponentComparePair {
+        baseId: String!
+        compareId: String!
+      }
+
       extend type ComponentHost {
         compareComponent(baseId: String!, compareId: String!): ComponentCompareResult
+        # bulk compare a paginated slice of pairs; an element is null if that pair failed to compare
+        compareComponents(pairs: [ComponentComparePair!]!, offset: Int, limit: Int): [ComponentCompareResult]!
+        # bulk api-diff a paginated slice of pairs; an element is null if that pair's diff couldn't be computed
+        apiDiffs(pairs: [ComponentComparePair!]!, offset: Int, limit: Int): [APIDiffResult]!
       }
     `,
     resolvers: {
@@ -36,6 +47,29 @@ export function componentCompareSchema(componentCompareMain: ComponentCompareMai
         compareComponent: async (_, { baseId, compareId }: { baseId: string; compareId: string }) => {
           return componentCompareMain.compare(baseId, compareId);
         },
+        compareComponents: async (
+          _,
+          {
+            pairs,
+            offset,
+            limit,
+          }: { pairs: Array<{ baseId: string; compareId: string }>; offset?: number; limit?: number }
+        ) => {
+          return componentCompareMain.compareComponents(pairs, { offset, limit });
+        },
+        apiDiffs: async (
+          _,
+          {
+            pairs,
+            offset,
+            limit,
+          }: { pairs: Array<{ baseId: string; compareId: string }>; offset?: number; limit?: number }
+        ) => {
+          // each element is the plain record `getAPIDiff` returns (or null); the APIDiffResult
+          // fields resolve from it via graphql's default field resolvers, same as the single
+          // `apiDiff` resolver in @teambit/semantics.schema.
+          return componentCompareMain.apiDiffs(pairs, { offset, limit });
+        },
       },
       ComponentCompareResult: {
         id: (result: ComponentCompareResult) => result.id,
diff --git a/scopes/component/component-compare/component-compare.main.runtime.ts b/scopes/component/component-compare/component-compare.main.runtime.ts
index 842b2b56d249..99218f15c1bd 100644
--- a/scopes/component/component-compare/component-compare.main.runtime.ts
+++ b/scopes/component/component-compare/component-compare.main.runtime.ts
@@ -4,8 +4,7 @@ import { compact } from 'lodash';
 import { BitError } from '@teambit/bit-error';
 import type { Workspace } from '@teambit/workspace';
 import { WorkspaceAspect, OutsideWorkspaceError } from '@teambit/workspace';
-import type { ComponentID } from '@teambit/component-id';
-import { ComponentIdList } from '@teambit/component-id';
+import { ComponentID, ComponentIdList } from '@teambit/component-id';
 import type { ScopeMain } from '@teambit/scope';
 import { ScopeAspect } from '@teambit/scope';
 import type { GraphqlMain } from '@teambit/graphql';
@@ -25,12 +24,17 @@ import type { Component, ComponentMain } from '@teambit/component';
 import { ComponentAspect } from '@teambit/component';
 import type { SchemaMain } from '@teambit/schema';
 import { SchemaAspect } from '@teambit/schema';
+import type { CacheMain } from '@teambit/cache';
+import { CacheAspect } from '@teambit/cache';
 
 import { componentCompareSchema } from './component-compare.graphql';
 import { ComponentCompareAspect } from './component-compare.aspect';
 import { DiffCmd } from './diff-cmd';
 import type { ImporterMain } from '@teambit/importer';
 import { ImporterAspect } from '@teambit/importer';
+import { concurrentComponentsLimit } from '@teambit/harmony.modules.concurrency';
+import { compareComponentPairs } from './compare-component-pairs';
+import type { ComponentComparePair } from './compare-component-pairs';
 
 export type ComponentCompareResult = {
   id: string;
@@ -39,6 +43,12 @@ export type ComponentCompareResult = {
   code: FileDiff[];
   fields: FieldsDiff[];
   tests: FileDiff[];
+  /**
+   * true when the compare side is the live workspace (on-disk files, incl. uncommitted changes).
+   * such a result is inherently mutable, so it must never be persisted to the cross-run cache —
+   * only the in-flight single-flight dedupe applies. not exposed via graphql.
+   */
+  isLiveWorkspace?: boolean;
 };
 
 type ConfigDiff = {
@@ -56,10 +66,91 @@ export class ComponentCompareMain {
     private depResolver: DependencyResolverMain,
     private importer: ImporterMain,
     private schema: SchemaMain,
+    private cache: CacheMain,
     private workspace?: Workspace
   ) {}
 
+  // in-flight `compute` promises, so concurrent callers for the same pair share one computation
+  // instead of recomputing (the lane compare UI and lane-diff status hit the same pairs in parallel
+  // on a cold load). Persisted results survive restarts via the global `@teambit/cache` aspect.
+  private compareInflight = new Map<string, Promise<ComponentCompareResult>>();
+  private apiDiffInflight = new Map<string, Promise<Record<string, any> | null>>();
+
+  /**
+   * Read-through cache with single-flight dedupe: serve a persisted result, else share an in-flight
+   * computation, else compute once and persist. Most `(baseId, compareId)` pairs are immutable (keyed
+   * on snap hashes), so a cached result never goes stale. `cacheable` gates which results are persisted.
+   *
+   * `skipPersistentCache` bypasses the persistent cache entirely (neither read nor write) while still
+   * sharing the in-flight computation. Callers must set it whenever the result depends on mutable state
+   * the key does not capture — e.g. a live-workspace diff against on-disk files — so a previously
+   * persisted snap-to-snap result for the same key is never served in its place.
+   */
+  private async getOrCompute<T>(
+    inflight: Map<string, Promise<T>>,
+    cacheKey: string,
+    compute: () => Promise<T>,
+    cacheable: (value: T) => boolean = () => true,
+    skipPersistentCache = false
+  ): Promise<T> {
+    const pending = inflight.get(cacheKey);
+    if (pending) return pending;
+    if (!skipPersistentCache) {
+      const cached = await this.cache.get<T>(cacheKey);
+      if (cached !== undefined) return cached;
+      // a concurrent caller may have started computing while we awaited the cache read.
+      const started = inflight.get(cacheKey);
+      if (started) return started;
+    }
+    const promise = compute()
+      .then((result) => {
+        if (!skipPersistentCache && cacheable(result)) void this.cache.set(cacheKey, result);
+        return result;
+      })
+      .finally(() => inflight.delete(cacheKey));
+    inflight.set(cacheKey, promise);
+    return promise;
+  }
+
   async compare(baseIdStr: string, compareIdStr: string): Promise<ComponentCompareResult> {
+    return this.getOrCompute(
+      this.compareInflight,
+      `component-compare:result:${baseIdStr}|${compareIdStr}`,
+      () => this.computeCompare(baseIdStr, compareIdStr),
+      // never persist a live-workspace diff: it reflects on-disk files (incl. uncommitted changes),
+      // so a cached copy would go stale the moment the user edits a file. the (baseId, compareId)
+      // pair is otherwise immutable (keyed on snap hashes), so those stay cacheable.
+      (result) => !result.isLiveWorkspace,
+      // whether this call *reads* the persistent cache is decided up front from the same signal:
+      // a live-workspace compare must skip the cache entirely, otherwise a snap-to-snap result
+      // persisted for this key in a prior run (or a non-live context) would mask on-disk changes.
+      this.comparesLiveWorkspace(baseIdStr, compareIdStr)
+    );
+  }
+
+  /**
+   * cheap, synchronous pre-check mirroring the `comparingWithLocalChanges` / `compareIsLiveWorkspace`
+   * logic in `computeCompare`: will this compare diff against live on-disk workspace files rather than
+   * two immutable snaps? errs toward `true` (skip the persistent cache) whenever the id cannot be
+   * classified, so a stale snap-to-snap result is never served in place of a live one.
+   */
+  private comparesLiveWorkspace(baseIdStr: string, compareIdStr: string): boolean {
+    if (!this.workspace) return false; // scope/remote host: every compare is an immutable snap-to-snap pair
+    if (baseIdStr === compareIdStr) return true; // the "local changes" view: checked-out snap vs on-disk files
+    let compareId: ComponentID;
+    try {
+      compareId = ComponentID.fromString(compareIdStr);
+    } catch {
+      return true; // unclassifiable id → assume live so a stale cached diff is never returned
+    }
+    const checkedOut = this.workspace.getIdIfExist(compareId);
+    if (!checkedOut) return false; // compare side isn't checked out → two stored snaps, safe to cache
+    // live only when the compare side is the exact version currently checked out on disk.
+    return !compareId.hasVersion() || checkedOut.version === compareId.version;
+  }
+
+  /** The original `compare()` body — moved here so the public method can wrap with memo + single-flight. */
+  private async computeCompare(baseIdStr: string, compareIdStr: string): Promise<ComponentCompareResult> {
     const host = this.componentAspect.getHost();
     const [baseCompId, compareCompId] = await host.resolveMultipleComponentIds([baseIdStr, compareIdStr]);
     const modelComponent = await this.scope.legacyScope.getModelComponentIfExist(compareCompId);
@@ -82,13 +173,21 @@ export class ComponentCompareMain {
     const compareComponent = components?.[1];
     const componentWithoutVersion = await host.get((baseCompId || compareCompId).changeVersion(undefined));
 
+    // When the compare side is the component currently checked out in the workspace, diff against the
+    // on-disk files rather than a stored snap: passing `undefined` as the compare version makes
+    // `computeDiff` fall back to `consumerComponent.files`, so uncommitted local changes are included.
+    // This covers two cases with one code path:
+    //   - base === compare (the classic "local changes" view): checked-out model → workspace files.
+    //   - base = an earlier version: that version's committed changes + any uncommitted changes on top.
+    // Without this, the default workspace compare resolves base and compare to the same checked-out
+    // snap and reports no changes, collapsing the compare view to only its always-on sections.
+    const checkedOutVersion = componentWithoutVersion?.id.version;
+    const compareIsLiveWorkspace = Boolean(this.workspace && checkedOutVersion && compareVersion === checkedOutVersion);
+    const effectiveBaseVersion = comparingWithLocalChanges ? undefined : baseVersion;
+    const effectiveCompareVersion = comparingWithLocalChanges || compareIsLiveWorkspace ? undefined : compareVersion;
+
     const diff = componentWithoutVersion
-      ? await this.computeDiff(
-          componentWithoutVersion,
-          comparingWithLocalChanges ? undefined : baseVersion,
-          comparingWithLocalChanges ? undefined : compareVersion,
-          {}
-        )
+      ? await this.computeDiff(componentWithoutVersion, effectiveBaseVersion, effectiveCompareVersion, {})
       : {
           filesDiff: [],
           fieldsDiff: [],
@@ -112,10 +211,68 @@ export class ComponentCompareMain {
       code: diff.filesDiff || [],
       fields: diff.fieldsDiff || [],
       tests: testFilesDiff,
+      isLiveWorkspace: compareIsLiveWorkspace,
     };
   }
 
+  /**
+   * compare a paginated slice of component pairs in one call.
+   * a pair that fails to compare (e.g. a component without versions) becomes `null` in the
+   * returned array rather than failing the whole batch. the array is aligned to the requested
+   * slice (`pairs[offset .. offset + limit]`).
+   */
+  async compareComponents(
+    pairs: ComponentComparePair[],
+    options?: { offset?: number; limit?: number }
+  ): Promise<Array<ComponentCompareResult | null>> {
+    return compareComponentPairs(pairs, (baseId, compareId) => this.compare(baseId, compareId), {
+      offset: options?.offset,
+      limit: options?.limit,
+      concurrency: concurrentComponentsLimit(),
+      onError: (pair, err) => {
+        this.logger.warn(`compareComponents: failed to compare ${pair.baseId} <> ${pair.compareId}`, err);
+      },
+    });
+  }
+
+  /**
+   * api-diff a paginated slice of component pairs in one call — the bulk counterpart of the single
+   * `getAPIDiff`, mirroring `compareComponents`. reuses `getAPIDiff` per pair (so its disk memo +
+   * single-flight dedupe still apply), turning a pair whose diff throws into `null` rather than
+   * failing the whole batch. the returned array is aligned to the requested slice.
+   */
+  async apiDiffs(
+    pairs: ComponentComparePair[],
+    options?: { offset?: number; limit?: number }
+  ): Promise<Array<Record<string, any> | null>> {
+    return compareComponentPairs(pairs, (baseId, compareId) => this.getAPIDiff(baseId, compareId), {
+      offset: options?.offset,
+      limit: options?.limit,
+      concurrency: concurrentComponentsLimit(),
+      onError: (pair, err) => {
+        this.logger.warn(`apiDiffs: failed to compute api diff ${pair.baseId} <> ${pair.compareId}`, err);
+      },
+    });
+  }
+
+  private static isApiDiffCacheable(result: Record<string, any>): boolean {
+    if (result.status === 'COMPUTED') return true;
+    return result.base?.reason !== 'FAILED' && result.compare?.reason !== 'FAILED';
+  }
+
   async getAPIDiff(baseIdStr: string, compareIdStr: string): Promise<Record<string, any> | null> {
+    // never persist transient failures: `null` (snaps couldn't load) or FAILED availability (schema
+    // retrieval threw) must recompute next call; NOT_BUILT/NO_EXTRACTOR/DISABLED are stable and safe.
+    // the `:v2` namespace keeps pre-availability-aware results from being served.
+    return this.getOrCompute(
+      this.apiDiffInflight,
+      `component-compare:api-diff:v2:${baseIdStr}|${compareIdStr}`,
+      () => this.computeAPIDiff(baseIdStr, compareIdStr),
+      (v) => v !== null && ComponentCompareMain.isApiDiffCacheable(v)
+    );
+  }
+
+  private async computeAPIDiff(baseIdStr: string, compareIdStr: string): Promise<Record<string, any> | null> {
     const host = this.componentAspect.getHost();
     const [baseCompId, compareCompId] = await host.resolveMultipleComponentIds([baseIdStr, compareIdStr]);
     await this.importer.importObjectsFromMainIfExist([baseCompId, compareCompId], { cache: true });
@@ -328,6 +485,7 @@ export class ComponentCompareMain {
     DependencyResolverAspect,
     ImporterAspect,
     SchemaAspect,
+    CacheAspect,
   ];
   static runtime = MainRuntime;
   static async provider([
@@ -341,6 +499,7 @@ export class ComponentCompareMain {
     depResolver,
     importer,
     schema,
+    cache,
   ]: [
     GraphqlMain,
     ComponentMain,
@@ -352,6 +511,7 @@ export class ComponentCompareMain {
     DependencyResolverMain,
     ImporterMain,
     SchemaMain,
+    CacheMain,
   ]) {
     const logger = loggerMain.createLogger(ComponentCompareAspect.id);
     const componentCompareMain = new ComponentCompareMain(
@@ -362,6 +522,7 @@ export class ComponentCompareMain {
       depResolver,
       importer,
       schema,
+      cache,
       workspace
     );
     cli.register(new DiffCmd(componentCompareMain));
diff --git a/scopes/component/component-compare/component-compare.ui.runtime.tsx b/scopes/component/component-compare/component-compare.ui.runtime.tsx
index d7d58f3498e8..e2ca5a52ff7d 100644
--- a/scopes/component/component-compare/component-compare.ui.runtime.tsx
+++ b/scopes/component/component-compare/component-compare.ui.runtime.tsx
@@ -5,7 +5,6 @@ import type { Harmony, SlotRegistry } from '@teambit/harmony';
 import { Slot } from '@teambit/harmony';
 import type { ComponentUI } from '@teambit/component';
 import { ComponentAspect } from '@teambit/component';
-import { ComponentCompare } from '@teambit/component.ui.component-compare.component-compare';
 import { UIRuntime } from '@teambit/ui';
 import type { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';
 import type {
@@ -14,41 +13,70 @@ import type {
 } from '@teambit/component.ui.component-compare.models.component-compare-props';
 import { ComponentCompareChangelog } from '@teambit/component.ui.component-compare.changelog';
 import { ComponentCompareAspects } from '@teambit/component.ui.component-compare.compare-aspects.compare-aspects';
+import { InlineCodeCompare } from '@teambit/code.ui.inline-code-compare';
+import { InlinePreviewCompare } from '@teambit/preview.ui.inline-preview-compare';
+import { InlineDepsCompare } from '@teambit/review.ui.inline-deps-compare';
+import { InlineTestsCompare } from '@teambit/review.ui.inline-tests-compare';
+import { InlineConfigCompare } from '@teambit/review.ui.inline-config-compare';
+import type { ApiDiffInsight } from '@teambit/semantics.ui.api-diff-view';
 import { AspectsCompareSection } from './component-compare-aspects.section';
 import { ComponentCompareAspect } from './component-compare.aspect';
 import { ComponentCompareSection } from './component-compare.section';
 import { CompareChangelogSection } from './component-compare-changelog.section';
+import { ComponentComparePage } from './component-compare-page';
 
 export type ComponentCompareNav = Array<TabItem>;
 export type ComponentCompareNavSlot = SlotRegistry<ComponentCompareNav>;
+
+/**
+ * Inline-compare tabs are stacked in the new ComponentComparePage and shown/hidden by the
+ * toolbar via `data-view-mode` CSS rules. Aspects can register their own via
+ * `ComponentCompareUI.registerCompareTab(...)`. These fallbacks fill any id the slot didn't
+ * provide so the page is usable out of the box. (Owned by component-compare so single-component
+ * and lane-compare share the same list; lane-compare delegates here.)
+ */
+const FALLBACK_COMPARE_TABS: TabItem[] = [
+  { id: 'inline-code', order: 1, displayName: 'Code', element: React.createElement(InlineCodeCompare) },
+  { id: 'inline-preview', order: 2, displayName: 'Preview', element: React.createElement(InlinePreviewCompare) },
+  { id: 'inline-deps', order: 4, displayName: 'Dependencies', element: React.createElement(InlineDepsCompare) },
+  { id: 'inline-tests', order: 5, displayName: 'Tests', element: React.createElement(InlineTestsCompare) },
+  { id: 'inline-config', order: 6, displayName: 'Configuration', element: React.createElement(InlineConfigCompare) },
+];
+
+export type ComponentCompareTabSlot = SlotRegistry<TabItem | TabItem[]>;
+
+export type ApiDiffInsightSlot = SlotRegistry<ApiDiffInsight | ApiDiffInsight[]>;
+
 export class ComponentCompareUI {
   constructor(
     private host: string,
     private navSlot: ComponentCompareNavSlot,
     private routeSlot: RouteSlot,
+    private compareTabSlot: ComponentCompareTabSlot,
+    private apiDiffInsightSlot: ApiDiffInsightSlot,
     private compUI: ComponentUI
   ) {}
 
   static runtime = UIRuntime;
 
-  static slots = [Slot.withType<ComponentCompareNavSlot>(), Slot.withType<RouteSlot>()];
+  static slots = [
+    Slot.withType<ComponentCompareNavSlot>(),
+    Slot.withType<RouteSlot>(),
+    Slot.withType<TabItem | TabItem[]>(),
+    Slot.withType<ApiDiffInsight | ApiDiffInsight[]>(),
+  ];
 
   static dependencies = [ComponentAspect];
 
   getComponentComparePage = (props?: ComponentCompareProps & { pinned?: boolean }) => {
-    const tabs = props?.tabs || (() => flatten(this.navSlot.values()));
-    const routes = props?.routes || (() => flatten(this.routeSlot.values()));
+    const tabs = props?.tabs || (() => this.resolveCompareTabs());
     const host = props?.host || this.host;
-
-    return (
-      <ComponentCompare
-        {...(props || {})}
-        tabs={tabs}
-        routes={routes}
-        host={host}
-        isFullScreen={props?.isFullScreen ?? true}
-      />
-    );
+    // The API compare tab is contributed by the api-reference aspect via `registerNavigation`
+    // (navSlot), which the redesign page's view-mode toolbar doesn't read. Hand it the API element
+    // lazily so it's resolved at render time — after every aspect's UI provider has registered,
+    // regardless of provider order — and rendered as a page-local `api` view mode.
+    const getApiTab = () => this.tabs.find((tab) => tab.id === 'api')?.element;
+    return <ComponentComparePage tabs={tabs} host={host} getApiTab={getApiTab} />;
   };
 
   getAspectsComparePage = () => {
@@ -73,6 +101,66 @@ export class ComponentCompareUI {
     return this;
   }
 
+  /**
+   * Register an inline-compare tab. The tab's `id` should match the new toolbar view-mode ids
+   * (`inline-code`, `inline-preview`, `inline-docs`, `inline-deps`, `inline-tests`, `inline-config`).
+   * Used by both the single-component compare page and lane-compare.
+   */
+  registerCompareTab(tab: TabItem | TabItem[]) {
+    this.compareTabSlot.register(tab);
+    return this;
+  }
+
+  /**
+   * contribute intelligence to the API diff view: per-change renderers for migration
+   * hints, affected dependents, codemods, etc. rendered in each change block's
+   * insights area (lane compare API view and the single-component API tab).
+   */
+  registerApiDiffInsight(insight: ApiDiffInsight | ApiDiffInsight[]) {
+    this.apiDiffInsightSlot.register(insight);
+    return this;
+  }
+
+  private _resolvedApiDiffInsights?: ApiDiffInsight[];
+  private _resolvedApiDiffInsightsKey?: number;
+  /**
+   * Memoized by slot-entry count (mirroring `resolveCompareTabs`) so the returned array keeps a
+   * stable identity across renders — `LaneCompare` is React.memo'd, and a fresh array on every
+   * call would break its shallow compare and re-render the whole compare tree.
+   */
+  getApiDiffInsights(): ApiDiffInsight[] {
+    const slotEntries = this.apiDiffInsightSlot.toArray();
+    if (this._resolvedApiDiffInsights && this._resolvedApiDiffInsightsKey === slotEntries.length) {
+      return this._resolvedApiDiffInsights;
+    }
+    this._resolvedApiDiffInsights = flatten(
+      slotEntries.map(([, value]) => value) as Array<ApiDiffInsight | ApiDiffInsight[]>
+    );
+    this._resolvedApiDiffInsightsKey = slotEntries.length;
+    return this._resolvedApiDiffInsights;
+  }
+
+  private _resolvedCompareTabs?: TabItem[];
+  private _resolvedCompareTabsKey?: number;
+  /**
+   * Merge slot-registered tabs with the fallbacks, dedup by id (registered wins), sort by order.
+   * Memoized by slot-entry count so the resolved list keeps stable identity across renders.
+   */
+  resolveCompareTabs(): TabItem[] {
+    const slotEntries = this.compareTabSlot.toArray();
+    if (this._resolvedCompareTabs && this._resolvedCompareTabsKey === slotEntries.length) {
+      return this._resolvedCompareTabs;
+    }
+    const registered = flatten(slotEntries.map(([, value]) => value).filter(Boolean) as Array<TabItem | TabItem[]>);
+    const registeredIds = new Set(registered.map((t) => t.id));
+    const merged = [...registered, ...FALLBACK_COMPARE_TABS.filter((t) => !registeredIds.has(t.id))].sort(
+      (a, b) => (a.order ?? 0) - (b.order ?? 0)
+    );
+    this._resolvedCompareTabs = merged;
+    this._resolvedCompareTabsKey = slotEntries.length;
+    return merged;
+  }
+
   get routes() {
     return this.routeSlot.map;
   }
@@ -106,12 +194,24 @@ export class ComponentCompareUI {
   static async provider(
     [componentUi]: [ComponentUI],
     _,
-    [navSlot, routeSlot]: [ComponentCompareNavSlot, RouteSlot],
+    [navSlot, routeSlot, compareTabSlot, apiDiffInsightSlot]: [
+      ComponentCompareNavSlot,
+      RouteSlot,
+      ComponentCompareTabSlot,
+      ApiDiffInsightSlot,
+    ],
     harmony: Harmony
   ) {
     const { config } = harmony;
     const host = String(config.get('teambit.harmony/bit'));
-    const componentCompareUI = new ComponentCompareUI(host, navSlot, routeSlot, componentUi);
+    const componentCompareUI = new ComponentCompareUI(
+      host,
+      navSlot,
+      routeSlot,
+      compareTabSlot,
+      apiDiffInsightSlot,
+      componentUi
+    );
     const componentCompareSection = new ComponentCompareSection(componentCompareUI, false);
     const pinnedComponentCompareSection = new ComponentCompareSection(componentCompareUI, true);
     componentUi.registerRoute([componentCompareSection.route]);
diff --git a/scopes/component/component/component.graphql.ts b/scopes/component/component/component.graphql.ts
index 1eadcfcd9646..5df62eb9d396 100644
--- a/scopes/component/component/component.graphql.ts
+++ b/scopes/component/component/component.graphql.ts
@@ -9,6 +9,20 @@ import type { Component } from './component';
 import type { ComponentFactory } from './component-factory';
 import type { ComponentMain } from './component.main.runtime';
 
+/**
+ * Per-Component-instance caches for resolver field outputs. Each batched lane-compare request fans
+ * out to ~10–20 `Component` ops that all eventually call `host.get()` for the same versioned id —
+ * which returns the same `Component` instance (via `ScopeComponentLoader.componentsCache`). Without
+ * these WeakMaps, every op re-runs the same `aspects.filter(include).serialize()`,
+ * `tags.toArray().map(toObject)`, `headTag.toObject()` etc.
+ *
+ * WeakMaps so entries disappear when the underlying `Component` is evicted from scope cache.
+ */
+const aspectsResolverCache = new WeakMap<Component, Map<string, any>>();
+const tagsResolverCache = new WeakMap<Component, any>();
+const headTagResolverCache = new WeakMap<Component, any>();
+const fsResolverCache = new WeakMap<Component, string[]>();
+
 export function componentSchema(componentExtension: ComponentMain): Schema {
   return {
     typeDefs: gql`
@@ -154,6 +168,10 @@ export function componentSchema(componentExtension: ComponentMain): Schema {
         # load a component.
         get(id: String!, withState: Boolean): Component
 
+        # load multiple components in a single op. items are aligned to the input order;
+        # an id that fails to resolve becomes null in its slot rather than failing the call.
+        getMany(ids: [String!]!, withState: Boolean): [Component]!
+
         # list components
         list(offset: Int, limit: Int): [Component]!
 
@@ -174,7 +192,11 @@ export function componentSchema(componentExtension: ComponentMain): Schema {
         id: (component: Component): ComponentIdObj => component.id.toObject(),
         displayName: (component: Component) => component.displayName,
         fs: (component: Component) => {
-          return component.state.filesystem.files.map((file) => file.relative);
+          const cached = fsResolverCache.get(component);
+          if (cached) return cached;
+          const result = component.state.filesystem.files.map((file) => file.relative);
+          fsResolverCache.set(component, result);
+          return result;
         },
         log: async (component: Component) => {
           const snap = await component.loadSnap(component.id.version);
@@ -197,14 +219,34 @@ export function componentSchema(componentExtension: ComponentMain): Schema {
         mainFile: (component: Component) => {
           return component.state._consumer.mainFile;
         },
-        headTag: (component: Component) => component.headTag?.toObject(),
+        headTag: (component: Component) => {
+          if (headTagResolverCache.has(component)) return headTagResolverCache.get(component);
+          const result = component.headTag?.toObject();
+          headTagResolverCache.set(component, result);
+          return result;
+        },
         latest: (component: Component) => component.latest,
         tags: (component) => {
+          const cached = tagsResolverCache.get(component);
+          if (cached) return cached;
           // graphql doesn't support map types
-          return component.tags.toArray().map((tag) => tag.toObject());
+          const result = component.tags.toArray().map((tag) => tag.toObject());
+          tagsResolverCache.set(component, result);
+          return result;
         },
         aspects: (component: Component, { include }: { include?: string[] }) => {
-          return component.state.aspects.filter(include).serialize();
+          let perComponent = aspectsResolverCache.get(component);
+          if (!perComponent) {
+            perComponent = new Map();
+            aspectsResolverCache.set(component, perComponent);
+          }
+          // sort the include list so callers that pass the same set in different order still hit cache.
+          const cacheKey = include ? [...include].sort().join('|') : '__all__';
+          const cached = perComponent.get(cacheKey);
+          if (cached) return cached;
+          const result = component.state.aspects.filter(include).serialize();
+          perComponent.set(cacheKey, result);
+          return result;
         },
         // Here only to not break old queries
         elementsUrl: () => undefined,
@@ -237,6 +279,21 @@ export function componentSchema(componentExtension: ComponentMain): Schema {
             return null;
           }
         },
+        getMany: async (host: ComponentFactory, { ids }: { ids: string[] }) => {
+          // run resolves+loads in parallel — `host.getMany` uses `mapSeries` under the hood, which
+          // serializes the work and defeats the whole point of bulk. each entry is independent and
+          // the underlying ScopeComponentLoader has its own per-id cache, so concurrency is safe.
+          return Promise.all(
+            ids.map(async (id) => {
+              try {
+                const componentId = await host.resolveComponentId(id);
+                return await host.get(componentId);
+              } catch {
+                return null;
+              }
+            })
+          );
+        },
         snaps: async (host: ComponentFactory, { id }: { id: string }): Promise<ComponentLog[]> => {
           const componentId = await host.resolveComponentId(id);
           // return (await host.getLogs(componentId)).map(log => ({...log, id: log.hash}))
diff --git a/scopes/component/component/ui/menu/menu.module.scss b/scopes/component/component/ui/menu/menu.module.scss
index 37372282cc7f..aef5463f6392 100644
--- a/scopes/component/component/ui/menu/menu.module.scss
+++ b/scopes/component/component/ui/menu/menu.module.scss
@@ -96,8 +96,15 @@
   }
 }
 
+// The component top bar packs left-side nav (Overview, Code, Tests, Preview …) and right-side
+// dropdowns (Use package, Versions, Workspace) on the same row. Below `$br-lg` the right side
+// takes so much horizontal space that the ResponsiveNavbar collapses every nav tab into the
+// overflow "more" dropdown — which is what produces the "…" the user sees instead of tabs.
+// Hiding the Use-package dropdown earlier (at < lg, not < md) reclaims the room so the nav
+// stays visible on tablet viewports too. Users on mobile can still copy the install command
+// from the dedicated "Use package" panel that the docs overview renders inline.
 .hideOnMobile {
-  @media screen and (max-width: $br-md) {
+  @media screen and (max-width: $br-lg) {
     display: none;
   }
 }
@@ -105,4 +112,13 @@
 .useBoxContainer {
   width: 500px !important;
   border: 1px solid var(--border-medium-color, #ededed);
+
+  // Mobile: cap to viewport width, drop fixed pixel width, scroll horizontally if a tab title
+  // (or the install snippet) is wider. Without this the 500px container overflows past the
+  // viewport edge, which is why the second consume-method tab and the package-name snippet were
+  // both truncating to "…".
+  @media screen and (max-width: $br-md) {
+    width: calc(100vw - 24px) !important;
+    max-width: 500px;
+  }
 }
diff --git a/scopes/component/component/ui/use-component-logs.ts b/scopes/component/component/ui/use-component-logs.ts
index f94b4827cfd0..a1b6d15c4e35 100644
--- a/scopes/component/component/ui/use-component-logs.ts
+++ b/scopes/component/component/ui/use-component-logs.ts
@@ -11,7 +11,8 @@ export function useComponentLogs(
   componentId: string,
   host: string,
   filters?: Filters,
-  skipFromProps?: boolean
+  skipFromProps?: boolean,
+  context?: Record<string, any>
 ): ComponentLogsResult {
   const { variables, skip } = useComponentLogsInit(componentId, host, filters, skipFromProps);
 
@@ -19,6 +20,7 @@ export function useComponentLogs(
     variables,
     skip,
     errorPolicy: 'all',
+    context,
   });
 
   const rawComponent = data?.getHost?.get;
diff --git a/scopes/component/component/ui/use-component-query.ts b/scopes/component/component/ui/use-component-query.ts
index aa23878e1a85..0ea8d3b79165 100644
--- a/scopes/component/component/ui/use-component-query.ts
+++ b/scopes/component/component/ui/use-component-query.ts
@@ -8,12 +8,18 @@ import { GET_COMPONENT } from './use-component.fragments';
 import { useComponentLogs } from './use-component-logs';
 import { ComponentError } from './component-error';
 
-/** provides data to component ui page, making sure both variables and return value are safely typed and memoized */
+/**
+ * provides data to component ui page, making sure both variables and return value are safely typed and memoized.
+ *
+ * Logs are fetched separately and opt-in via `useComponentLogs` (gated by `filters.log`), so views
+ * that don't render snap history (lane-compare, bulk panels) don't pay for the expensive logs query.
+ */
 export function useComponentQuery(
   componentId: string,
   host: string,
   filters?: Filters,
-  skip?: boolean
+  skip?: boolean,
+  context?: Record<string, any>
 ): ComponentQueryResult {
   const idRef = useRef(componentId);
   idRef.current = componentId;
@@ -26,9 +32,21 @@ export function useComponentQuery(
     variables,
     skip,
     errorPolicy: 'all',
+    context,
   });
 
-  const { loading: loadingLogs, componentLogs: { logs } = {} } = useComponentLogs(componentId, host, filters, skip);
+  // Only fetch logs when a log filter is explicitly provided — most callers (lane-compare,
+  // bulk component panels) never look at history, so the per-component logs query was firing
+  // for nothing. Pages that need the history panel pass `filters: { log: {...} }` and
+  // `useComponentLogs` runs as before.
+  const wantsLogs = !!filters?.log;
+  const { loading: loadingLogs, componentLogs: { logs } = {} } = useComponentLogs(
+    componentId,
+    host,
+    filters,
+    skip || !wantsLogs,
+    context
+  );
 
   const rawComponent = data?.getHost?.get;
 
diff --git a/scopes/component/component/ui/use-component.fragments.ts b/scopes/component/component/ui/use-component.fragments.ts
index 471078372436..fa93bcd9d825 100644
--- a/scopes/component/component/ui/use-component.fragments.ts
+++ b/scopes/component/component/ui/use-component.fragments.ts
@@ -13,7 +13,9 @@ export const componentOverviewFields = gql`
     id {
       ...componentIdFields
     }
-    aspects(include: ["teambit.preview/preview", "teambit.envs/envs"]) {
+    # dependency-resolver is required by InlineDepsCompare — reads
+    # descriptor.get('teambit.dependencies/dependency-resolver').dependencies to compute the diff.
+    aspects(include: ["teambit.preview/preview", "teambit.envs/envs", "teambit.dependencies/dependency-resolver"]) {
       # 'id' property in gql refers to a *global* identifier and used for caching.
       # this makes aspect data cache under the same key, even when they are under different components.
       # renaming the property fixes that.
diff --git a/scopes/component/component/ui/use-component.model.ts b/scopes/component/component/ui/use-component.model.ts
index cb25f6f1b22e..0454eafb4d68 100644
--- a/scopes/component/component/ui/use-component.model.ts
+++ b/scopes/component/component/ui/use-component.model.ts
@@ -22,6 +22,8 @@ export type UseComponentOptions = {
   logFilters?: Filters;
   customUseComponent?: UseComponentType;
   skip?: boolean;
+  /** apollo operation context forwarded to the underlying queries (e.g. `{ batch: true }`) */
+  context?: Record<string, any>;
 };
 
 export type ComponentQueryResult = {
@@ -46,4 +48,10 @@ export type ComponentLogs = {
   loading?: boolean;
 };
 
-export type UseComponentType = (id: string, host: string, filters?: Filters, skip?: boolean) => ComponentQueryResult;
+export type UseComponentType = (
+  id: string,
+  host: string,
+  filters?: Filters,
+  skip?: boolean,
+  context?: Record<string, any>
+) => ComponentQueryResult;
diff --git a/scopes/component/component/ui/use-component.tsx b/scopes/component/component/ui/use-component.tsx
index e47c3b3fe386..f60fd0180910 100644
--- a/scopes/component/component/ui/use-component.tsx
+++ b/scopes/component/component/ui/use-component.tsx
@@ -7,13 +7,13 @@ export { UseComponentType, Filters };
 
 export function useComponent(host: string, id?: string, options?: UseComponentOptions): ComponentQueryResult {
   const query = useQuery();
-  const { version, logFilters, customUseComponent, skip } = options || {};
+  const { version, logFilters, customUseComponent, skip, context } = options || {};
   const componentVersion = (version || query.get('version')) ?? undefined;
 
   const componentIdStr = id && withVersion(id, componentVersion);
   const targetUseComponent = customUseComponent || useComponentQuery;
 
-  return targetUseComponent(componentIdStr || '', host, logFilters, skip || !id);
+  return targetUseComponent(componentIdStr || '', host, logFilters, skip || !id, context);
 }
 
 function withVersion(id: string, version?: string) {
diff --git a/scopes/component/modules/merge-helper/merge-files.ts b/scopes/component/modules/merge-helper/merge-files.ts
index ebc44d9c0366..d3bf340e4fa0 100644
--- a/scopes/component/modules/merge-helper/merge-files.ts
+++ b/scopes/component/modules/merge-helper/merge-files.ts
@@ -81,6 +81,5 @@ export async function mergeFiles({
 ${chalk.bold('command:')} ${err.command}
 ${chalk.bold('message:')} ${err.message}
 ${chalk.bold('original error:')} ${err.stderr}`);
-    throw err;
   }
 }
diff --git a/scopes/docs/docs/docs-store.tsx b/scopes/docs/docs/docs-store.tsx
index 299d07a5287e..76cd2cacbf5e 100644
--- a/scopes/docs/docs/docs-store.tsx
+++ b/scopes/docs/docs/docs-store.tsx
@@ -6,11 +6,9 @@ let root: Root | undefined;
 function createCompatRoot(container: HTMLElement): Root {
   try {
     // React 18+: react-dom/client exists and exports createRoot
-    // eslint-disable-next-line import/no-extraneous-dependencies
     return require('react-dom/client').createRoot(container);
   } catch {
     // React 17 fallback: react-dom/client does not exist
-    // eslint-disable-next-line import/no-extraneous-dependencies
     const ReactDOM = require('react-dom');
     return {
       render: (element) => {
diff --git a/scopes/docs/docs/docs.ui.runtime.tsx b/scopes/docs/docs/docs.ui.runtime.tsx
index 701645db60a3..d78842cd9b07 100644
--- a/scopes/docs/docs/docs.ui.runtime.tsx
+++ b/scopes/docs/docs/docs.ui.runtime.tsx
@@ -110,6 +110,17 @@ export class DocsUI {
     component.registerNavigation(section.navigationLink, section.order);
     componentCompare.registerNavigation(compareSection);
     componentCompare.registerRoutes([compareSection.route]);
+    // Register the inline docs tab on component-compare (canonical owner; shared by the single
+    // component-compare page and lane-compare). `docs.getDocsCompare()` returns
+    // `<OverviewCompare titleBadges={this.titleBadgeSlot} overviewOptions={this.overviewOptionsSlot} />`,
+    // so any other aspect that registers title badges or overview options sees those contributions
+    // in the inline-docs panel too.
+    componentCompare.registerCompareTab({
+      id: 'inline-docs',
+      order: 3,
+      displayName: 'Docs',
+      element: docs.getDocsCompare(),
+    });
     docs.registerPreviewSandbox((manager, componentModel) => {
       if (componentModel?.host === 'teambit.scope/scope') {
         manager.add('allow-scripts');
diff --git a/scopes/docs/docs/overview/overview.tsx b/scopes/docs/docs/overview/overview.tsx
index 06d61c3937e4..261ee350c8f9 100644
--- a/scopes/docs/docs/overview/overview.tsx
+++ b/scopes/docs/docs/overview/overview.tsx
@@ -123,7 +123,6 @@ export function Overview({
         <ComponentOverview
           className={classNames(styles.componentOverviewBlock, !isScaling && styles.legacyPreview)}
           displayName={component.displayName}
-          version={component.version}
           abstract={component.description}
           labels={component.labels}
           packageName={component.packageName}
diff --git a/scopes/envs/envs/environments.graphql.ts b/scopes/envs/envs/environments.graphql.ts
index 1d845dbf72c4..a203ce4ba624 100644
--- a/scopes/envs/envs/environments.graphql.ts
+++ b/scopes/envs/envs/environments.graphql.ts
@@ -4,6 +4,17 @@ import { gql } from 'graphql-tag';
 
 import type { EnvsMain } from './environments.main.runtime';
 
+/**
+ * Per-Component-instance cache for the env descriptor. `getDescriptor` is called once per GraphQL
+ * op that selects `Component.env { id icon }` — the lane-compare panel fires this for every visible
+ * component (10× per response in our profile). The descriptor only depends on the component's
+ * immutable aspect entries, so it's safe to cache for the lifetime of the underlying `Component`
+ * instance (WeakMap auto-evicts when the scope's componentsCache drops it).
+ *
+ * `null` sentinel distinguishes "computed and got undefined" from "not yet computed".
+ */
+const envDescriptorCache = new WeakMap<Component, ReturnType<EnvsMain['getDescriptor']> | null>();
+
 export function environmentsSchema(environments: EnvsMain): Schema {
   return {
     typeDefs: gql`
@@ -19,7 +30,12 @@ export function environmentsSchema(environments: EnvsMain): Schema {
     resolvers: {
       Component: {
         env: (component: Component) => {
-          return environments.getDescriptor(component);
+          if (envDescriptorCache.has(component)) {
+            return envDescriptorCache.get(component) ?? undefined;
+          }
+          const descriptor = environments.getDescriptor(component);
+          envDescriptorCache.set(component, descriptor ?? null);
+          return descriptor;
         },
       },
     },
diff --git a/scopes/harmony/graphql/graphql.main.runtime.ts b/scopes/harmony/graphql/graphql.main.runtime.ts
index 0c438b262c32..25422282f81e 100644
--- a/scopes/harmony/graphql/graphql.main.runtime.ts
+++ b/scopes/harmony/graphql/graphql.main.runtime.ts
@@ -33,7 +33,10 @@ export type GraphQLConfig = {
   subscriptionsPortRange: number[];
   subscriptionsPath: string;
   disableCors?: boolean;
-  enableBatching?: boolean;
+  /**
+   * cap on the number of operations in a single batched request body. requests over this size
+   * are rejected with HTTP 413. batching is always accepted on the server; clients opt in.
+   */
   batchMax?: number;
 };
 
@@ -145,87 +148,83 @@ export class GraphqlMain {
       );
     }
 
-    const batchingEnabled = this.config.enableBatching;
-
-    if (batchingEnabled) {
-      app.use('/graphql', express.json());
-      app.use('/graphql', async (req, res, next) => {
-        if (req.method !== 'POST') return next();
-        if (!Array.isArray(req.body)) return next();
-        if (!req.is('application/json')) return next();
-        const max = this.config.batchMax ?? 20;
-        if (req.body.length > max) {
-          return res.status(413).json([{ errors: [{ message: `Batch size ${req.body.length} exceeds max ${max}` }] }]);
-        }
-
-        const formatError =
-          options.customFormatErrorFn ??
-          ((err: any) => {
-            this.logger.error('graphql got an error during running the following query:', req.body);
-            this.logger.error('graphql error ', err);
-            return Object.assign(err, {
-              // @ts-ignore
-              ERR_CODE: err?.originalError?.errors?.[0].ERR_CODE || err.originalError?.constructor?.name,
-              // @ts-ignore
-              HTTP_CODE: err?.originalError?.errors?.[0].HTTP_CODE || err?.originalError?.code,
-            });
+    app.use('/graphql', express.json());
+    app.use('/graphql', async (req, res, next) => {
+      if (req.method !== 'POST') return next();
+      if (!Array.isArray(req.body)) return next();
+      if (!req.is('application/json')) return next();
+      const max = this.config.batchMax ?? 20;
+      if (req.body.length > max) {
+        return res.status(413).json([{ errors: [{ message: `Batch size ${req.body.length} exceeds max ${max}` }] }]);
+      }
+
+      const formatError =
+        options.customFormatErrorFn ??
+        ((err: any) => {
+          this.logger.error('graphql got an error during running the following query:', req.body);
+          this.logger.error('graphql error ', err);
+          return Object.assign(err, {
+            // @ts-ignore
+            ERR_CODE: err?.originalError?.errors?.[0].ERR_CODE || err.originalError?.constructor?.name,
+            // @ts-ignore
+            HTTP_CODE: err?.originalError?.errors?.[0].HTTP_CODE || err?.originalError?.code,
           });
+        });
+
+      const validationRules = disableIntrospection ? [NoIntrospection] : specifiedRules;
+
+      (req as any).res = res;
 
-        const validationRules = disableIntrospection ? [NoIntrospection] : specifiedRules;
+      const execFn = options.customExecuteFn ?? (execute as any);
 
-        (req as any).res = res;
+      try {
+        const ops = req.body as Array<{
+          query?: string;
+          variables?: Record<string, any>;
+          operationName?: string;
+        }>;
 
-        const execFn = options.customExecuteFn ?? (execute as any);
+        const results = await Promise.all(
+          ops.map(async (op) => {
+            if (!op?.query || typeof op.query !== 'string') {
+              return { errors: [{ message: 'Must provide query string.' }] };
+            }
 
-        try {
-          const ops = req.body as Array<{
-            query?: string;
-            variables?: Record<string, any>;
-            operationName?: string;
-          }>;
+            try {
+              const document = parse(op.query);
 
-          const results = await Promise.all(
-            ops.map(async (op) => {
-              if (!op?.query || typeof op.query !== 'string') {
-                return { errors: [{ message: 'Must provide query string.' }] };
+              const validationErrors = validate(schema, document, validationRules as any);
+              if (validationErrors.length) {
+                return { errors: validationErrors.map(formatError) };
               }
 
-              try {
-                const document = parse(op.query);
-
-                const validationErrors = validate(schema, document, validationRules as any);
-                if (validationErrors.length) {
-                  return { errors: validationErrors.map(formatError) };
-                }
-
-                const result = await execFn({
-                  schema,
-                  document,
-                  rootValue: req,
-                  contextValue: req,
-                  variableValues: op.variables,
-                  operationName: op.operationName,
-                });
-
-                if ((result as any)?.errors?.length) {
-                  return { ...(result as any), errors: (result as any).errors.map(formatError) };
-                }
-
-                return result;
-              } catch (err: any) {
-                this.logger.error('graphql batch error', err);
-                const e = err instanceof Error ? err : new Error(err?.message ?? String(err));
-                return { errors: [formatError(e)] };
+              const result = await execFn({
+                schema,
+                document,
+                rootValue: req,
+                contextValue: req,
+                variableValues: op.variables,
+                operationName: op.operationName,
+              });
+
+              if ((result as any)?.errors?.length) {
+                return { ...(result as any), errors: (result as any).errors.map(formatError) };
               }
-            })
-          );
 
-          return res.status(200).json(results);
-        } catch (err) {
-          return next(err);
-        }
-      });
-    }
+              return result;
+            } catch (err: any) {
+              this.logger.error('graphql batch error', err);
+              const e = err instanceof Error ? err : new Error(err?.message ?? String(err));
+              return { errors: [formatError(e)] };
+            }
+          })
+        );
+
+        return res.status(200).json(results);
+      } catch (err) {
+        return next(err);
+      }
+    });
 
     app.use(
       '/graphql',
@@ -413,7 +412,6 @@ export class GraphqlMain {
     subscriptionsPortRange: [2000, 2100],
     disableCors: false,
     subscriptionsPath: '/subscriptions',
-    enableBatching: false,
     batchMax: 20,
   };
 
diff --git a/scopes/harmony/graphql/graphql.ui.runtime.tsx b/scopes/harmony/graphql/graphql.ui.runtime.tsx
index b9b89655adcc..21948ee058ec 100644
--- a/scopes/harmony/graphql/graphql.ui.runtime.tsx
+++ b/scopes/harmony/graphql/graphql.ui.runtime.tsx
@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import React from 'react';
 import { UIRuntime } from '@teambit/ui';
 import { BatchHttpLink } from '@apollo/client/link/batch-http';
-import { InMemoryCache, ApolloClient, ApolloLink, HttpLink, createHttpLink } from '@apollo/client';
+import { InMemoryCache, ApolloClient, ApolloLink, HttpLink } from '@apollo/client';
 import type { DefaultOptions, NormalizedCacheObject, Operation } from '@apollo/client';
 import { WebSocketLink } from '@apollo/client/link/ws';
 import { onError } from '@apollo/client/link/error';
@@ -33,7 +33,11 @@ type ClientOptions = {
 };
 
 export type GraphQLConfig = {
-  enableBatching?: boolean;
+  /**
+   * batching is always wired up. operations are *opt-in*: each Apollo operation that sets
+   * `context: { batch: true }` is coalesced via BatchHttpLink, every other operation goes through
+   * a plain HttpLink unchanged. tune the batching window/cap via the fields below.
+   */
   batchInterval?: number;
   batchMax?: number;
 };
@@ -66,50 +70,25 @@ export class GraphqlUI {
   }
 
   createSsrClient({ serverUrl, headers }: { serverUrl: string; headers: any }) {
-    if (this.config.enableBatching) {
-      return this.createSsrClientBatched({ serverUrl, headers });
-    }
-    const link = ApolloLink.from([
-      onError(logError),
-      createHttpLink({
-        credentials: 'include',
-        uri: serverUrl,
-        headers,
-        fetch: crossFetch,
-      }),
-    ]);
-
-    const client = new ApolloClient({
-      ssrMode: true,
-      link,
-      cache: this.createCache(),
-    });
-
-    return client;
-  }
-
-  private createSsrClientBatched({ serverUrl, headers }: { serverUrl: string; headers: any }) {
-    const batchedHttpLink = new BatchHttpLink({
+    const httpLink = new HttpLink({
       uri: serverUrl,
       credentials: 'include',
-      batchInterval: this.config.batchInterval,
-      batchMax: this.config.batchMax,
       headers,
       fetch: crossFetch,
     });
-
-    const unbatchedHttpLink = new HttpLink({
+    const batchHttpLink = new BatchHttpLink({
       uri: serverUrl,
       credentials: 'include',
+      batchInterval: this.config.batchInterval,
+      batchMax: this.config.batchMax,
       headers,
       fetch: crossFetch,
     });
-
-    const httpLink = ApolloLink.split(this.isMutation, unbatchedHttpLink, batchedHttpLink);
+    const transport = ApolloLink.split(this.shouldBatch, batchHttpLink, httpLink);
 
     return new ApolloClient({
       ssrMode: true,
-      link: ApolloLink.from([onError(logError), httpLink]),
+      link: ApolloLink.from([onError(logError), transport]),
       cache: this.createCache(),
     });
   }
@@ -123,6 +102,19 @@ export class GraphqlUI {
         // last-written aspect data overwrites all others (e.g. all components show the
         // same env). Disabling normalization stores aspects inline per component.
         Aspect: { keyFields: false },
+        Query: {
+          fields: {
+            // The schema federates `ComponentHost` extensions across aspects (component-compare's
+            // `apiDiff`, scope's `get`/`getMany`, etc.). Different queries select different field
+            // subsets of the same ComponentHost — without a merge policy Apollo replaces the
+            // whole entry and warns about data loss. Field-level merge keeps each query's data
+            // additive on the shared ComponentHost cache entry.
+            getHost: {
+              keyArgs: ['id'],
+              merge: (existing, incoming) => ({ ...existing, ...incoming }),
+            },
+          },
+        },
       },
     });
 
@@ -131,51 +123,29 @@ export class GraphqlUI {
     return cache;
   }
 
-  private readonly isMutation = (op: Operation) => {
+  // operations opt in to batching by setting `context: { batch: true }`. mutations never batch.
+  private readonly shouldBatch = (op: Operation) => {
     const def = getMainDefinition(op.query) as OperationDefinitionNode;
-    return def.kind === 'OperationDefinition' && def.operation === 'mutation';
+    if (def.kind === 'OperationDefinition' && def.operation === 'mutation') return false;
+    return op.getContext().batch === true;
   };
 
   private createLink(uri: string, { subscriptionUri }: { subscriptionUri?: string } = {}) {
-    if (this.config.enableBatching) {
-      return this.createLinkBatched(uri, { subscriptionUri });
-    }
     const httpLink = new HttpLink({ credentials: 'include', uri });
-    const subsLink = subscriptionUri
-      ? new WebSocketLink({
-          uri: subscriptionUri,
-          options: { reconnect: true },
-        })
-      : undefined;
-
-    const hybridLink = subsLink ? createSplitLink(httpLink, subsLink) : httpLink;
-    const errorLogger = onError(logError);
-
-    return ApolloLink.from([errorLogger, hybridLink]);
-  }
-
-  private createLinkBatched(uri: string, { subscriptionUri }: { subscriptionUri?: string } = {}) {
-    const batchedHttpLink = new BatchHttpLink({
+    const batchHttpLink = new BatchHttpLink({
       uri,
       credentials: 'include',
       batchInterval: this.config.batchInterval,
       batchMax: this.config.batchMax,
     });
+    const httpOrBatchLink = ApolloLink.split(this.shouldBatch, batchHttpLink, httpLink);
 
-    const unbatchedHttpLink = new HttpLink({
-      uri,
-      credentials: 'include',
-    });
-
-    const httpLink = ApolloLink.split(this.isMutation, unbatchedHttpLink, batchedHttpLink);
-
-    const wsLink = subscriptionUri
+    const subsLink = subscriptionUri
       ? new WebSocketLink({ uri: subscriptionUri, options: { reconnect: true } })
       : undefined;
+    const hybridLink = subsLink ? createSplitLink(httpOrBatchLink, subsLink) : httpOrBatchLink;
 
-    const transport = wsLink ? createSplitLink(httpLink, wsLink) : httpLink;
-
-    return ApolloLink.from([onError(logError), transport]);
+    return ApolloLink.from([onError(logError), hybridLink]);
   }
 
   getProvider = ({ client, children }: { client: GraphQLClient<any>; children: ReactNode }) => {
@@ -189,7 +159,6 @@ export class GraphqlUI {
   static slots = [];
 
   static defaultConfig: GraphQLConfig = {
-    enableBatching: false,
     batchInterval: 50,
     batchMax: 20,
   };
diff --git a/scopes/lanes/diff/index.ts b/scopes/lanes/diff/index.ts
index c510a3225ccd..f6766c9255fa 100644
--- a/scopes/lanes/diff/index.ts
+++ b/scopes/lanes/diff/index.ts
@@ -1,3 +1,4 @@
 export { LaneDiffCmd } from './lane-diff.cmd';
 export { LaneHistoryDiffCmd } from './lane-history-diff.cmd';
 export { LaneDiffGenerator, LaneDiffResults } from './lane-diff-generator';
+export { getHeadOnMain, importMainHeads } from './resolve-main-head';
diff --git a/scopes/lanes/diff/lane-diff-generator.ts b/scopes/lanes/diff/lane-diff-generator.ts
index 518b862860db..23b9ed857f79 100644
--- a/scopes/lanes/diff/lane-diff-generator.ts
+++ b/scopes/lanes/diff/lane-diff-generator.ts
@@ -12,12 +12,15 @@ import type { ComponentCompareMain } from '@teambit/component-compare';
 import chalk from 'chalk';
 import pMap from 'p-map';
 import { concurrentComponentsLimit } from '@teambit/harmony.modules.concurrency';
+import { getHeadOnMain, importMainHeads } from './resolve-main-head';
 
 type LaneData = {
   name: string;
   components: Array<{
     id: ComponentID;
-    head: Ref;
+    // undefined when the component has no version on the default lane / main — a genuinely-new
+    // component. downstream code guards on `!head` and reports these as "new".
+    head?: Ref;
   }>;
   remote: string | null;
 };
@@ -119,7 +122,7 @@ export class LaneDiffGenerator {
     });
 
     // Build an index of fromLaneData for O(1) lookups instead of repeated O(N) .find() calls.
-    const fromLaneIndex = new Map<string, Ref>();
+    const fromLaneIndex = new Map<string, Ref | undefined>();
     for (const comp of this.fromLaneData.components) {
       fromLaneIndex.set(comp.id.toStringWithoutVersion(), comp.head);
     }
@@ -296,7 +299,7 @@ export class LaneDiffGenerator {
 
   private async componentDiff(
     id: ComponentID,
-    toLaneHead: Ref | null,
+    toLaneHead: Ref | null | undefined,
     diffOptions: DiffOptions = {},
     compareToHeadIfEmpty = false,
     forkPoint?: Ref,
@@ -377,13 +380,20 @@ export class LaneDiffGenerator {
       components: [],
     };
 
+    // The base on main may live only on the remote scope (e.g. a component on the lane whose main
+    // version was never fetched locally). Resolve those heads from the remote on demand so the diff
+    // is real; components that genuinely have no main version resolve to no head and are reported as
+    // "new" by `componentDiff`, not as a spurious empty diff.
+    await importMainHeads(this.scope, ids);
+
     await Promise.all(
       ids.map(async (id) => {
-        const modelComponent = await this.scope.legacyScope.getModelComponent(id);
+        const headOnMain = await getHeadOnMain(this.scope, id);
         const laneComponent = {
           id,
-          head: modelComponent.head as Ref, // @todo: this is not true. it can be undefined
-          version: modelComponent.latestVersion(), // should this be latestVersion() or bitId.version.toString()
+          // undefined when the component has no version on main at all - handled as "new" downstream.
+          head: headOnMain ? Ref.from(headOnMain) : undefined,
+          version: headOnMain,
         };
         laneData.components.push(laneComponent);
       })
diff --git a/scopes/lanes/diff/resolve-main-head.ts b/scopes/lanes/diff/resolve-main-head.ts
new file mode 100644
index 000000000000..d69d6aba0225
--- /dev/null
+++ b/scopes/lanes/diff/resolve-main-head.ts
@@ -0,0 +1,59 @@
+import type { ComponentID } from '@teambit/component-id';
+import { ComponentIdList } from '@teambit/component-id';
+import { LaneId, DEFAULT_LANE } from '@teambit/lane-id';
+import type { ScopeMain } from '@teambit/scope';
+import { Ref } from '@teambit/objects';
+import { compact } from 'lodash';
+
+/**
+ * resolve a component's head hash (snap) on main (the default lane).
+ *
+ * unlike reading `modelComponent.head` directly, this falls back to the remote default-lane ref
+ * (`remoteLanes`), so a base that lives on the remote scope but was never written to the local `head`
+ * (e.g. a component on a lane whose main version wasn't fetched) is still found. that ref is populated
+ * by a fetch - call {@link importMainHeads} first. returns `undefined` only when the component
+ * genuinely has no version on main (a real NEW component), never merely because it isn't local.
+ */
+export async function getHeadOnMain(scope: ScopeMain, componentId: ComponentID): Promise<string | undefined> {
+  const legacyScope = scope.legacyScope;
+  const modelComponent = await legacyScope.getModelComponentIfExist(componentId);
+  if (modelComponent?.head) return modelComponent.head.toString();
+  const scopeName = modelComponent?.scope || componentId.scope;
+  if (!scopeName) return undefined;
+  const remoteRef = await legacyScope.objects.remoteLanes.getRef(LaneId.from(DEFAULT_LANE, scopeName), componentId);
+  return remoteRef?.toString() || undefined;
+}
+
+/**
+ * fetch main (default-lane) heads + objects from the remote for components whose main head isn't
+ * resolvable locally, so a base that lives only on the remote scope can still be diffed/merged.
+ *
+ * reuses the existing bulk importer (`importWithoutDeps`): versionless ids + `cache: false` force the
+ * round-trip and let the remote resolve each head (the local-found short-circuit would otherwise skip
+ * the lane's already-present ModelComponent); `ignoreMissingHead` keeps truly-new comps a real NEW.
+ * after this resolves, {@link getHeadOnMain} returns the base for components that have one on main.
+ */
+export async function importMainHeads(scope: ScopeMain, componentIds: ComponentID[]): Promise<void> {
+  const missing = compact(
+    await Promise.all(
+      componentIds.map(async (id) => {
+        if (!scope.isExported(id)) return undefined; // no remote to ask
+        const head = await getHeadOnMain(scope, id);
+        // skip only when the base is fully available locally: a resolvable head whose object is present.
+        // otherwise import — the head may be unresolvable simply because the default-lane ref was never
+        // fetched (the remote can still have a main version), or it resolves to an object not present
+        // locally. `ignoreMissingHead` in the import keeps a genuinely-new component (no main version on
+        // the remote) a real NEW after the fetch finds nothing.
+        if (head && (await scope.legacyScope.objects.has(Ref.from(head)))) return undefined;
+        return id.changeVersion(undefined);
+      })
+    )
+  );
+  if (!missing.length) return;
+  await scope.legacyScope.scopeImporter.importWithoutDeps(ComponentIdList.fromArray(missing), {
+    cache: false,
+    includeVersionHistory: true,
+    ignoreMissingHead: true,
+    reason: 'to resolve the base on main for components absent from the local scope',
+  });
+}
diff --git a/scopes/lanes/entities/lane-diff/index.ts b/scopes/lanes/entities/lane-diff/index.ts
index c4d7ac80dcca..5f0995b350e0 100644
--- a/scopes/lanes/entities/lane-diff/index.ts
+++ b/scopes/lanes/entities/lane-diff/index.ts
@@ -1,3 +1,3 @@
 export { LaneDiff, PlainLaneDiff } from './lane-diff';
-export { LaneComponentDiff, PlainLaneComponentDiff } from './lane-component-diff';
+export { LaneComponentDiff, PlainLaneComponentDiff, DiffBaseSource } from './lane-component-diff';
 export { ChangeType } from './change-type';
diff --git a/scopes/lanes/entities/lane-diff/lane-component-diff.ts b/scopes/lanes/entities/lane-diff/lane-component-diff.ts
index 88c11455b418..dc774e1df84a 100644
--- a/scopes/lanes/entities/lane-diff/lane-component-diff.ts
+++ b/scopes/lanes/entities/lane-diff/lane-component-diff.ts
@@ -1,10 +1,18 @@
 import { ComponentID } from '@teambit/component-id';
 import { ChangeType } from './change-type';
 
+/**
+ * where the compared base was resolved from:
+ * - `workspace`: the base was already present in the local scope.
+ * - `scope`: the base only existed on the remote scope and was fetched on demand for this diff.
+ */
+export type DiffBaseSource = 'workspace' | 'scope';
+
 export type PlainLaneComponentDiff = {
   componentId: string;
   sourceHead: string;
   targetHead?: string;
+  baseSource?: DiffBaseSource;
   changes: ChangeType[];
   upToDate: boolean;
 };
@@ -15,7 +23,8 @@ export class LaneComponentDiff {
     readonly changes: ChangeType[],
     readonly upToDate: boolean,
     readonly sourceHead: string,
-    readonly targetHead?: string
+    readonly targetHead?: string,
+    readonly baseSource?: DiffBaseSource
   ) {}
 
   get new() {
@@ -50,6 +59,7 @@ export class LaneComponentDiff {
       upToDate: this.upToDate,
       sourceHead: this.sourceHead,
       targetHead: this.targetHead,
+      baseSource: this.baseSource,
     };
   }
 
@@ -60,7 +70,8 @@ export class LaneComponentDiff {
       plainComponentDiff.changes,
       plainComponentDiff.upToDate,
       plainComponentDiff.sourceHead,
-      plainComponentDiff.targetHead
+      plainComponentDiff.targetHead,
+      plainComponentDiff.baseSource
     );
   }
 }
diff --git a/scopes/lanes/lanes/lanes.graphql.ts b/scopes/lanes/lanes/lanes.graphql.ts
index d40e2138e24f..2282874e895d 100644
--- a/scopes/lanes/lanes/lanes.graphql.ts
+++ b/scopes/lanes/lanes/lanes.graphql.ts
@@ -61,6 +61,11 @@ export function lanesSchema(lanesMainRuntime: LanesMain): Schema {
         id: String!
         sourceHead: String!
         targetHead: String
+        """
+        where the compared base was resolved from: "workspace" (already local) or "scope" (fetched
+        on demand from the remote scope). null for a new component (no base) or a lane-vs-lane diff.
+        """
+        baseSource: String
         componentId: ComponentID!
         changeType: String @deprecated(reason: "Use changes")
         """
@@ -254,7 +259,10 @@ export function lanesSchema(lanesMainRuntime: LanesMain): Schema {
         ) => {
           const sourceLaneId = LaneId.parse(source);
           const targetLaneId = target ? LaneId.parse(target) : undefined;
-          return lanesMain.diffStatus(sourceLaneId, targetLaneId, options);
+          // Defer `changes` derivation to the per-component field resolver so the eager pMap inside
+          // `diffStatus` is fast. The field resolver only fires when the client selects `changes`,
+          // and graphql-js runs each component's resolver in parallel via `Promise.all`.
+          return lanesMain.diffStatus(sourceLaneId, targetLaneId, { ...options, deferChanges: true });
         },
         removeUpdateDependents: async (lanesMain: LanesMain, { laneId, ids }: { laneId: string; ids?: string[] }) => {
           const laneIdParsed = LaneId.parse(laneId);
@@ -271,6 +279,11 @@ export function lanesSchema(lanesMainRuntime: LanesMain): Schema {
             diffCompStatus.targetHead
           }`,
         componentId: (diffCompStatus: LaneComponentDiffStatus) => diffCompStatus.componentId.toObject(),
+        changes: (diffCompStatus: LaneComponentDiffStatus) => lanesMainRuntime.deriveComponentChanges(diffCompStatus),
+        changeType: async (diffCompStatus: LaneComponentDiffStatus) => {
+          const changes = await lanesMainRuntime.deriveComponentChanges(diffCompStatus);
+          return changes?.[0];
+        },
       },
       Lane: {
         id: (lane: LaneData) => lane.id.toObject(),
diff --git a/scopes/lanes/lanes/lanes.main.runtime.ts b/scopes/lanes/lanes/lanes.main.runtime.ts
index 2896fa0e45fc..9a0b180fb76f 100644
--- a/scopes/lanes/lanes/lanes.main.runtime.ts
+++ b/scopes/lanes/lanes/lanes.main.runtime.ts
@@ -1,7 +1,7 @@
 import type { CLIMain } from '@teambit/cli';
 import { CLIAspect, MainRuntime } from '@teambit/cli';
-import pMapSeries from 'p-map-series';
 import pMap from 'p-map';
+import pLimit from 'p-limit';
 import type { ScopeMain } from '@teambit/scope';
 import { ScopeAspect } from '@teambit/scope';
 import type { GraphqlMain } from '@teambit/graphql';
@@ -12,9 +12,17 @@ import type { Workspace } from '@teambit/workspace';
 import { OutsideWorkspaceError, WorkspaceAspect } from '@teambit/workspace';
 import { getRemoteByName } from '@teambit/scope.remotes';
 import type { LaneDiffResults } from '@teambit/lanes.modules.diff';
-import { LaneDiffCmd, LaneDiffGenerator, LaneHistoryDiffCmd } from '@teambit/lanes.modules.diff';
+import {
+  LaneDiffCmd,
+  LaneDiffGenerator,
+  LaneHistoryDiffCmd,
+  getHeadOnMain,
+  importMainHeads,
+} from '@teambit/lanes.modules.diff';
 import type { Scope as LegacyScope, TrackLane, LaneData } from '@teambit/legacy.scope';
 import { NoCommonSnap } from '@teambit/legacy.scope';
+import { CACHE_ROOT } from '@teambit/legacy.constants';
+import path from 'path';
 import { LaneId, DEFAULT_LANE, LANE_REMOTE_DELIMITER } from '@teambit/lane-id';
 import { BitError } from '@teambit/bit-error';
 import type { Logger, LoggerMain } from '@teambit/logger';
@@ -117,10 +125,15 @@ export type SwitchLaneOptions = {
   branch?: boolean;
 };
 
+/** where the base was resolved from: `workspace` (already local) or `scope` (fetched from remote). */
+export type DiffBaseSource = 'workspace' | 'scope';
+
 export type LaneComponentDiffStatus = {
   componentId: ComponentID;
   sourceHead: string;
   targetHead?: string;
+  /** where the base was resolved from (workspace vs remote scope). @see DiffBaseSource */
+  baseSource?: DiffBaseSource;
   /**
    * @deprecated
    * use changes to get list of all the changes
@@ -130,10 +143,53 @@ export type LaneComponentDiffStatus = {
   upToDate?: boolean;
   snapsDistance?: SnapsDistanceObj;
   unrelated?: boolean;
+  /**
+   * internal context for deferred derivation of `changes`. not exposed on the GraphQL schema —
+   * the `changes` field resolver consumes this via `deriveComponentChanges` so the heavy
+   * `componentCompare.compare()` + `getAPIDiff()` work only runs when the field is selected,
+   * lazily per-component, in parallel via graphql-js list resolution.
+   */
+  changesContext?: {
+    commonSnap?: { hash: string } | null;
+    skipped?: boolean;
+    pending?: Promise<ChangeType[] | undefined>;
+  };
 };
 
 export type LaneDiffStatusOptions = {
+  /** skip importing the common snaps and computing `changes` entirely */
   skipChanges?: boolean;
+  /**
+   * drop components where the snaps-distance says the source already includes everything on the
+   * target. these contribute nothing to a target→source merge view but each costs an
+   * `importWithoutDeps` round trip + an `apiDiff` schema extraction.
+   */
+  skipUpToDate?: boolean;
+  /**
+   * still classify snap distance, but don't compute `changes` eagerly. callers derive them lazily
+   * via `deriveComponentChanges` (used by GraphQL field resolvers).
+   */
+  deferChanges?: boolean;
+};
+
+type SerializedSnapsDistance = {
+  unrelated?: boolean;
+  isUpToDate: boolean;
+  commonSnapHash?: string;
+  snapsOnSourceHashes: string[];
+  snapsOnTargetHashes: string[];
+};
+
+type SerializedComponentStatus = {
+  componentIdStr: string;
+  sourceHead: string;
+  targetHead?: string;
+  baseSource?: DiffBaseSource;
+  changes?: ChangeType[];
+  changeType?: ChangeType;
+  upToDate?: boolean;
+  unrelated?: boolean;
+  snapsDistance?: SnapsDistanceObj;
 };
 
 export type DivergeDataPerId = { id: ComponentID; divergeData: SnapsDistance };
@@ -167,7 +223,385 @@ export class LanesMain {
     private remove: RemoveMain,
     readonly checkout: CheckoutMain,
     private install: InstallMain
-  ) {}
+  ) {
+    this.loadSnapsDistanceMemoFromDisk();
+    this.loadApiDiffMemoFromDisk();
+    this.loadChangeTypesMemoFromDisk();
+    this.loadDiffStatusMemoFromDisk();
+  }
+
+  /**
+   * Snap distance is purely a function of (componentId, sourceHead, targetHead) — all immutable
+   * hashes — so it's safe to memoize indefinitely. Persisted to disk so the *first* lane-diff call
+   * after a server start hits a warm cache (cold compute is the dominant latency: ~1.1s for 30
+   * components walking the snap graph + cold imports). LRU-bounded to keep the file small.
+   */
+  private snapsDistanceMemo = new Map<string, SerializedSnapsDistance>();
+  private snapsDistanceMemoDirty = false;
+  private snapsDistanceMemoSaveTimer: NodeJS.Timeout | undefined;
+  private static SNAPS_DISTANCE_MEMO_MAX = 5000;
+  private static SNAPS_DISTANCE_MEMO_FILE = path.join(CACHE_ROOT, 'lane-diff-snaps-distance.json');
+
+  /**
+   * Memo for API-diff `hasChanges` per `(baseId, compareId)` pair. Schema extraction is the single
+   * most expensive per-component step (cold ~5–15s per component) — but its `hasChanges` result is
+   * deterministic on the immutable hashes, so we persist it to disk like the snaps-distance memo.
+   * On the wire we only consume `apiDiff?.hasChanges`, so caching just that boolean keeps the file
+   * tiny and makes the disk-warm path constant-time.
+   */
+  private apiDiffMemo = new Map<string, boolean>();
+  private apiDiffInflight = new Map<string, Promise<boolean>>();
+  /**
+   * Bound the parallelism of `deriveChangeTypes` across all in-flight requests. graphql-js resolves
+   * list fields in parallel via `Promise.all`, so an uncapped derivation fires one `compare()` per
+   * component at once. The old cap of 4 existed because derivation also ran `getAPIDiff` (serial
+   * tsserver schema extraction) — that's now deferred to the API view, so derivation only does the
+   * I/O+CPU-bound `compare()`, which parallelizes well. Cap to the component concurrency limit.
+   */
+  private deriveChangesLimit = pLimit(concurrentComponentsLimit());
+
+  /**
+   * Disk-persisted memo for the final `ChangeType[]` array per `(componentId, sourceHead, commonSnapHash)`.
+   * Keyed on immutable hashes — deterministic forever. With this populated, a cold server start can
+   * answer `lanes.diffStatus` without ever invoking `componentCompare.compare` or `getAPIDiff` —
+   * the per-component schema-extraction cost goes from seconds to a Map.get().
+   */
+  private changeTypesMemo = new Map<string, ChangeType[]>();
+  private changeTypesInflight = new Map<string, Promise<ChangeType[]>>();
+  private changeTypesMemoDirty = false;
+  private changeTypesMemoSaveTimer: NodeJS.Timeout | undefined;
+  private static CHANGE_TYPES_MEMO_MAX = 5000;
+  private static CHANGE_TYPES_MEMO_FILE = path.join(CACHE_ROOT, 'lane-diff-change-types.json');
+
+  private async loadChangeTypesMemoFromDisk() {
+    try {
+      const raw = await fs.readFile(LanesMain.CHANGE_TYPES_MEMO_FILE, 'utf8');
+      const parsed = JSON.parse(raw) as Record<string, ChangeType[]>;
+      for (const [k, v] of Object.entries(parsed)) this.changeTypesMemo.set(k, v);
+      this.logger?.debug(`[lane-diff memo] loaded ${this.changeTypesMemo.size} change-types entries`);
+    } catch {
+      // first run / corrupted file.
+    }
+  }
+
+  private scheduleChangeTypesMemoSave() {
+    this.changeTypesMemoDirty = true;
+    if (this.changeTypesMemoSaveTimer) return;
+    this.changeTypesMemoSaveTimer = setTimeout(() => {
+      this.changeTypesMemoSaveTimer = undefined;
+      if (!this.changeTypesMemoDirty) return;
+      this.changeTypesMemoDirty = false;
+      const serialized: Record<string, ChangeType[]> = {};
+      for (const [k, v] of this.changeTypesMemo) serialized[k] = v;
+      fs.outputFile(LanesMain.CHANGE_TYPES_MEMO_FILE, JSON.stringify(serialized)).catch(() => {});
+    }, 500);
+  }
+
+  private memoStoreChangeTypes(key: string, changes: ChangeType[]) {
+    if (!this.changeTypesMemo.has(key) && this.changeTypesMemo.size >= LanesMain.CHANGE_TYPES_MEMO_MAX) {
+      const firstKey = this.changeTypesMemo.keys().next().value;
+      if (firstKey) this.changeTypesMemo.delete(firstKey);
+    }
+    this.changeTypesMemo.set(key, changes);
+    this.scheduleChangeTypesMemoSave();
+  }
+
+  private changeTypesMemoKey(componentId: ComponentID, sourceHead: string, commonHash: string | null | undefined) {
+    return `${componentId.toStringWithoutVersion()}|${sourceHead}|${commonHash ?? ''}`;
+  }
+
+  /**
+   * Top-level result memo: the entire `LaneDiffStatus.componentsStatus` array keyed on the lane
+   * head hashes + relevant options. With this populated, a cold server start that receives a
+   * lane-diff request for an unchanged pair of lanes answers from disk in a single `Map.get()`,
+   * skipping `importObjectsFromMainIfExist`, per-component object loads, and all derivation.
+   * Invalidated implicitly when either lane head moves — the key embeds both hashes.
+   */
+  private diffStatusResultMemo = new Map<string, SerializedComponentStatus[]>();
+  private diffStatusMemoDirty = false;
+  private diffStatusMemoSaveTimer: NodeJS.Timeout | undefined;
+  private static DIFF_STATUS_MEMO_MAX = 200;
+  private static DIFF_STATUS_MEMO_FILE = path.join(CACHE_ROOT, 'lane-diff-results.json');
+
+  private async loadDiffStatusMemoFromDisk() {
+    try {
+      const raw = await fs.readFile(LanesMain.DIFF_STATUS_MEMO_FILE, 'utf8');
+      const parsed = JSON.parse(raw) as Record<string, SerializedComponentStatus[]>;
+      for (const [k, v] of Object.entries(parsed)) this.diffStatusResultMemo.set(k, v);
+      this.logger?.debug(`[lane-diff memo] loaded ${this.diffStatusResultMemo.size} diff-status entries`);
+    } catch {
+      // first run / corrupted file.
+    }
+  }
+
+  private scheduleDiffStatusMemoSave() {
+    this.diffStatusMemoDirty = true;
+    if (this.diffStatusMemoSaveTimer) return;
+    this.diffStatusMemoSaveTimer = setTimeout(() => {
+      this.diffStatusMemoSaveTimer = undefined;
+      if (!this.diffStatusMemoDirty) return;
+      this.diffStatusMemoDirty = false;
+      const serialized: Record<string, SerializedComponentStatus[]> = {};
+      for (const [k, v] of this.diffStatusResultMemo) serialized[k] = v;
+      fs.outputFile(LanesMain.DIFF_STATUS_MEMO_FILE, JSON.stringify(serialized)).catch(() => {});
+    }, 500);
+  }
+
+  private memoStoreDiffStatus(key: string, statuses: LaneComponentDiffStatus[]) {
+    if (!this.diffStatusResultMemo.has(key) && this.diffStatusResultMemo.size >= LanesMain.DIFF_STATUS_MEMO_MAX) {
+      const firstKey = this.diffStatusResultMemo.keys().next().value;
+      if (firstKey) this.diffStatusResultMemo.delete(firstKey);
+    }
+    this.diffStatusResultMemo.set(
+      key,
+      statuses.map((s) => ({
+        componentIdStr: s.componentId.toString(),
+        sourceHead: s.sourceHead,
+        targetHead: s.targetHead,
+        baseSource: s.baseSource,
+        changes: s.changes,
+        changeType: s.changeType,
+        upToDate: s.upToDate,
+        unrelated: s.unrelated,
+        snapsDistance: s.snapsDistance,
+      }))
+    );
+    this.scheduleDiffStatusMemoSave();
+  }
+
+  private diffStatusFromMemo(serialized: SerializedComponentStatus[]): LaneComponentDiffStatus[] {
+    return serialized.map((s) => ({
+      componentId: ComponentID.fromString(s.componentIdStr),
+      sourceHead: s.sourceHead,
+      targetHead: s.targetHead,
+      baseSource: s.baseSource,
+      changes: s.changes,
+      changeType: s.changeType,
+      upToDate: s.upToDate,
+      unrelated: s.unrelated,
+      snapsDistance: s.snapsDistance,
+    }));
+  }
+
+  /**
+   * Build the top-level result memo key. Key on the lane head hashes — they move with every snap, so
+   * it invalidates when the lane composition changes. Empty string ⇒ don't cache (incomplete state).
+   */
+  private diffStatusResultMemoKey(
+    sourceLaneId: LaneId,
+    sourceLane: any,
+    targetLaneId: LaneId | undefined,
+    targetLane: any,
+    options?: LaneDiffStatusOptions,
+    targetMainHeads?: Array<{ toString(): string }>
+  ): string {
+    // `Lane.hash` is a METHOD — `.hash.toString()` returns its source (constant) and freezes the key,
+    // serving stale results forever. Use the raw `_hash` for Lane objects.
+    const laneHash = (l: any) => (typeof l?.hash === 'function' ? l._hash : (l?.hash?.toString?.() ?? l?.hash)) ?? '';
+    const sourceHeadHash = laneHash(sourceLane);
+    if (!sourceHeadHash) return '';
+    // main target has no single lane hash → fingerprint the resolved per-component main heads instead.
+    let targetHeadHash: string;
+    if (targetLane) {
+      targetHeadHash = laneHash(targetLane);
+    } else {
+      const heads = (targetMainHeads || []).map((id) => id.toString()).sort();
+      if (!heads.length) return '';
+      targetHeadHash = heads.join(',');
+    }
+    const optionsKey = `${options?.skipChanges ? '1' : '0'}${options?.skipUpToDate ? '1' : '0'}`;
+    return `${sourceLaneId.toString()}@${sourceHeadHash}|${targetLaneId?.toString() ?? 'default'}@${targetHeadHash}|${optionsKey}`;
+  }
+
+  private tryDiffStatusResultMemo(
+    resultMemoKey: string,
+    sourceLaneId: LaneId,
+    targetLaneId: LaneId | undefined
+  ): LaneDiffStatus | undefined {
+    if (!resultMemoKey) return undefined;
+    const cached = this.diffStatusResultMemo.get(resultMemoKey);
+    if (!cached) return undefined;
+    return {
+      source: sourceLaneId,
+      target: targetLaneId || this.getDefaultLaneId(),
+      componentsStatus: this.diffStatusFromMemo(cached),
+    };
+  }
+
+  /**
+   * Pre-warm the downstream caches the lane-compare UI hits right after `LaneDiffStatus`:
+   * - the scope's `ScopeComponentLoader.componentsCache` via `host.getMany([…])`
+   * - `componentCompare`'s disk-persisted result memo via `compareComponents(pairs)`
+   *
+   * Fire-and-forget. The UI's follow-up `Component` and `CompareComponents` queries arrive ~50–200 ms
+   * after we return; this kickoff happens *before* we return, so the work overlaps the UI's render
+   * tick and the response serialization. By the time the UI's queries land on the server, the caches
+   * are populated (or, worst case, the pre-warm work is in-flight and the resolver-level single-flight
+   * in `componentCompare` dedupes the load).
+   */
+  private prewarmCompareCaches(
+    host: any,
+    visibleDiffProps: Array<{ componentId: ComponentID; sourceHead: string; targetHead?: string }>
+  ) {
+    const allVersionedIds: ComponentID[] = [];
+    const comparePairs: Array<{ baseId: string; compareId: string }> = [];
+    for (const { componentId, sourceHead, targetHead } of visibleDiffProps) {
+      const compareId = componentId.changeVersion(sourceHead);
+      allVersionedIds.push(compareId);
+      if (targetHead) {
+        const baseId = componentId.changeVersion(targetHead);
+        allVersionedIds.push(baseId);
+        comparePairs.push({ baseId: baseId.toString(), compareId: compareId.toString() });
+      }
+    }
+    if (allVersionedIds.length === 0) return;
+    // NOTE: `host.getMany` uses mapSeries internally (sequential). For cold pre-warm to actually
+    // beat the UI's concurrent N-op `Component` batch we have to drive parallelism ourselves. pMap
+    // here uses the same `concurrentComponentsLimit()` cap as the lane diff body, matching what
+    // downstream loaders are tuned for.
+    Promise.all([
+      // wrap in try/catch since `host.get` could be missing or throw synchronously; the previous
+      // `host.get?.(id).catch(...)` chained .catch on `undefined` when get was absent.
+      pMap(
+        allVersionedIds,
+        async (id) => {
+          try {
+            return await host.get?.(id);
+          } catch {
+            return undefined;
+          }
+        },
+        { concurrency: concurrentComponentsLimit() }
+      ).catch(() => undefined),
+      comparePairs.length > 0
+        ? this.componentCompare.compareComponents(comparePairs).catch(() => undefined)
+        : Promise.resolve(),
+    ]).catch(() => {});
+  }
+
+  private populateDiffStatusMemoAsync(resultMemoKey: string, results: LaneComponentDiffStatus[]) {
+    Promise.all(
+      results.map(async (status) => {
+        if (status.changes) return;
+        status.changes = await this.deriveComponentChanges(status);
+      })
+    )
+      .then(() => this.memoStoreDiffStatus(resultMemoKey, results))
+      .catch(() => {});
+  }
+  private apiDiffMemoDirty = false;
+  private apiDiffMemoSaveTimer: NodeJS.Timeout | undefined;
+  private static API_DIFF_MEMO_MAX = 5000;
+  private static API_DIFF_MEMO_FILE = path.join(CACHE_ROOT, 'lane-diff-api-diff.json');
+
+  /**
+   * bumped when the meaning of the memoized booleans changes. v2: booleans derived from
+   * availability-aware diffs — pre-v2 entries came from fabricated diffs (a missing schema
+   * was diffed as an empty API) and must be discarded.
+   */
+  private static API_DIFF_MEMO_VERSION = 2;
+
+  private async loadApiDiffMemoFromDisk() {
+    try {
+      const raw = await fs.readFile(LanesMain.API_DIFF_MEMO_FILE, 'utf8');
+      const parsed = JSON.parse(raw) as { v?: number; entries?: Record<string, boolean> };
+      // legacy unversioned format (a plain key->boolean map) or an older version: discard.
+      if (parsed.v !== LanesMain.API_DIFF_MEMO_VERSION || !parsed.entries) return;
+      for (const [k, v] of Object.entries(parsed.entries)) this.apiDiffMemo.set(k, v);
+      this.logger?.debug(`[lane-diff memo] loaded ${this.apiDiffMemo.size} api-diff entries`);
+    } catch {
+      // first run / corrupted file.
+    }
+  }
+
+  private scheduleApiDiffMemoSave() {
+    this.apiDiffMemoDirty = true;
+    if (this.apiDiffMemoSaveTimer) return;
+    this.apiDiffMemoSaveTimer = setTimeout(() => {
+      this.apiDiffMemoSaveTimer = undefined;
+      if (!this.apiDiffMemoDirty) return;
+      this.apiDiffMemoDirty = false;
+      const entries: Record<string, boolean> = {};
+      for (const [k, v] of this.apiDiffMemo) entries[k] = v;
+      fs.outputFile(
+        LanesMain.API_DIFF_MEMO_FILE,
+        JSON.stringify({ v: LanesMain.API_DIFF_MEMO_VERSION, entries })
+      ).catch(() => {});
+    }, 500);
+  }
+
+  private memoStoreApiDiff(key: string, hasChanges: boolean) {
+    if (!this.apiDiffMemo.has(key) && this.apiDiffMemo.size >= LanesMain.API_DIFF_MEMO_MAX) {
+      const firstKey = this.apiDiffMemo.keys().next().value;
+      if (firstKey) this.apiDiffMemo.delete(firstKey);
+    }
+    this.apiDiffMemo.set(key, hasChanges);
+    this.scheduleApiDiffMemoSave();
+  }
+
+  private snapsDistanceMemoKey(componentId: ComponentID, sourceHead: string, targetHead?: string) {
+    return `${componentId.toStringWithoutVersion()}|${sourceHead}|${targetHead || ''}`;
+  }
+
+  private async loadSnapsDistanceMemoFromDisk() {
+    try {
+      const raw = await fs.readFile(LanesMain.SNAPS_DISTANCE_MEMO_FILE, 'utf8');
+      const parsed = JSON.parse(raw) as Record<string, SerializedSnapsDistance>;
+      for (const [k, v] of Object.entries(parsed)) {
+        this.snapsDistanceMemo.set(k, v);
+      }
+      this.logger?.debug(
+        `[lane-diff memo] loaded ${this.snapsDistanceMemo.size} entries from ${LanesMain.SNAPS_DISTANCE_MEMO_FILE}`
+      );
+    } catch {
+      // first run / corrupted file: start empty.
+    }
+  }
+
+  private scheduleSnapsDistanceMemoSave() {
+    this.snapsDistanceMemoDirty = true;
+    if (this.snapsDistanceMemoSaveTimer) return;
+    this.snapsDistanceMemoSaveTimer = setTimeout(() => {
+      this.snapsDistanceMemoSaveTimer = undefined;
+      if (!this.snapsDistanceMemoDirty) return;
+      this.snapsDistanceMemoDirty = false;
+      const serialized: Record<string, SerializedSnapsDistance> = {};
+      for (const [k, v] of this.snapsDistanceMemo) serialized[k] = v;
+      fs.outputFile(LanesMain.SNAPS_DISTANCE_MEMO_FILE, JSON.stringify(serialized)).catch(() => {
+        // best-effort cache; log nothing — disk failure shouldn't be user-visible noise.
+      });
+    }, 500);
+  }
+
+  private memoStoreSnapsDistance(key: string, snapsDistance: SnapsDistance) {
+    if (!this.snapsDistanceMemo.has(key) && this.snapsDistanceMemo.size >= LanesMain.SNAPS_DISTANCE_MEMO_MAX) {
+      const firstKey = this.snapsDistanceMemo.keys().next().value;
+      if (firstKey) this.snapsDistanceMemo.delete(firstKey);
+    }
+    this.snapsDistanceMemo.set(key, {
+      unrelated: snapsDistance.err instanceof NoCommonSnap,
+      isUpToDate: !!snapsDistance.isUpToDate?.(),
+      commonSnapHash: snapsDistance.commonSnapBeforeDiverge?.hash,
+      snapsOnSourceHashes: (snapsDistance.snapsOnSourceOnly ?? []).map((s) => s.hash),
+      snapsOnTargetHashes: (snapsDistance.snapsOnTargetOnly ?? []).map((s) => s.hash),
+    });
+    this.scheduleSnapsDistanceMemoSave();
+  }
+
+  /**
+   * Reconstruct a duck-typed SnapsDistance from the serialized form for downstream consumers.
+   * Consumers only touch `.err`, `.isUpToDate()`, `.commonSnapBeforeDiverge.hash`,
+   * `.snapsOnSourceOnly.[].hash`, `.snapsOnTargetOnly.[].hash` — so a plain object suffices.
+   */
+  private snapsDistanceFromMemo(s: SerializedSnapsDistance, componentIdStr: string): SnapsDistance {
+    return {
+      err: s.unrelated ? new NoCommonSnap(componentIdStr) : undefined,
+      isUpToDate: () => s.isUpToDate,
+      commonSnapBeforeDiverge: s.commonSnapHash ? { hash: s.commonSnapHash } : null,
+      snapsOnSourceOnly: s.snapsOnSourceHashes.map((h) => ({ hash: h })),
+      snapsOnTargetOnly: s.snapsOnTargetHashes.map((h) => ({ hash: h })),
+    } as unknown as SnapsDistance;
+  }
 
   /**
    * return the lane data without the deleted components.
@@ -577,12 +1011,9 @@ please create a new lane instead, which will include all components of this lane
     return deletedComps.map((c) => c.id);
   }
 
-  /**
-   * get the head hash (snap) of main. return undefined if the component exists only on a lane and was never merged to main
-   */
+  /** head hash of main, with remote-scope fallback. undefined only for a genuinely-new component. */
   async getHeadOnMain(componentId: ComponentID): Promise<string | undefined> {
-    const modelComponent = await this.scope.legacyScope.getModelComponent(componentId);
-    return modelComponent.head?.toString();
+    return getHeadOnMain(this.scope, componentId);
   }
 
   /**
@@ -860,18 +1291,52 @@ please create a new lane instead, which will include all components of this lane
     const targetLaneIds = targetLane?.toBitIds();
     const host = this.componentAspect.getHost();
 
-    const targetMainHeads =
-      !targetLaneId || targetLaneId?.isDefault()
-        ? compact(
-            await Promise.all(
-              (sourceLaneComponents || []).map(async ({ id }) => {
-                const componentId = await host.resolveComponentId(id);
-                const headOnMain = await this.getHeadOnMain(componentId);
-                return headOnMain ? id.changeVersion(headOnMain) : undefined;
-              })
-            )
+    // Resolve the main-side heads up-front: they feed BOTH the memo key (so the cache invalidates
+    // when main advances) and the diff computation below. The target=main case has no single lane
+    // hash, so without this the key was constant ('default') and stale results were served when main
+    // moved ahead (lanes.spec "not up to date when main is ahead").
+    const targetIsMain = !targetLaneId || Boolean(targetLaneId?.isDefault());
+    // whether each base on main was already local (snapshot *before* the remote fetch) - drives the
+    // UI "workspace vs remote scope" source indicator.
+    const baseWasLocalByComp = new Map<string, boolean>();
+    if (targetIsMain) {
+      const sourceComponentIds = await Promise.all(
+        (sourceLaneComponents || []).map(({ id }) => host.resolveComponentId(id))
+      );
+      await Promise.all(
+        sourceComponentIds.map(async (cid) => {
+          const modelComp = await this.scope.legacyScope.getModelComponentIfExist(cid);
+          baseWasLocalByComp.set(cid.toString(), Boolean(modelComp?.head));
+        })
+      );
+      // the base on main may live only on the remote scope; pull it so the diff is real, not a spurious NEW.
+      await importMainHeads(this.scope, sourceComponentIds);
+    }
+    const targetMainHeads = targetIsMain
+      ? compact(
+          await Promise.all(
+            (sourceLaneComponents || []).map(async ({ id }) => {
+              const componentId = await host.resolveComponentId(id);
+              const headOnMain = await this.getHeadOnMain(componentId);
+              return headOnMain ? id.changeVersion(headOnMain) : undefined;
+            })
           )
-        : [];
+        )
+      : [];
+
+    const resultMemoKey = this.diffStatusResultMemoKey(
+      sourceLaneId,
+      sourceLane,
+      targetLaneId,
+      targetLane,
+      options,
+      targetMainHeads
+    );
+    const earlyReturn = this.tryDiffStatusResultMemo(resultMemoKey, sourceLaneId, targetLaneId);
+    if (earlyReturn) {
+      this.logger.profile(`diff status for source lane: ${sourceLaneId.name} and target lane: ${targetLaneId?.name}`);
+      return earlyReturn;
+    }
 
     await this.importer.importObjectsFromMainIfExist(targetMainHeads, { cache: true });
 
@@ -921,15 +1386,26 @@ please create a new lane instead, which will include all components of this lane
     this.logger.profile(
       `get snaps distance for source lane: ${sourceLane?.id.name} and target lane: ${targetLane?.id.name} with ${diffProps.length} components`
     );
+    let memoHits = 0;
     await pMap(
       diffProps,
       async ({ componentId, sourceHead, targetHead }) => {
-        const snapsDistance = await this.scope.getSnapsDistanceBetweenTwoSnaps(
-          componentId,
-          sourceHead,
-          targetHead,
-          false
-        );
+        const memoKey = this.snapsDistanceMemoKey(componentId, sourceHead, targetHead);
+        const cached = this.snapsDistanceMemo.get(memoKey);
+        let snapsDistance: SnapsDistance | undefined;
+        if (cached) {
+          memoHits += 1;
+          snapsDistance = this.snapsDistanceFromMemo(cached, componentId.toString());
+        } else {
+          const computed = await this.scope.getSnapsDistanceBetweenTwoSnaps(componentId, sourceHead, targetHead, false);
+          if (computed) {
+            // cache success + the deterministic "unrelated" outcome. transient errors stay uncached.
+            if (!computed.err || computed.err instanceof NoCommonSnap) {
+              this.memoStoreSnapsDistance(memoKey, computed);
+            }
+            snapsDistance = computed;
+          }
+        }
         if (snapsDistance) {
           snapDistancesByComponentId.set(componentId.toString(), {
             snapsDistance,
@@ -939,20 +1415,31 @@ please create a new lane instead, which will include all components of this lane
           });
         }
       },
-      {
-        concurrency: concurrentComponentsLimit(),
-      }
+      { concurrency: concurrentComponentsLimit() }
     );
     this.logger.profile(
-      `get snaps distance for source lane: ${sourceLane?.id.name} and target lane: ${targetLane?.id.name} with ${diffProps.length} components`
+      `get snaps distance for source lane: ${sourceLane?.id.name} and target lane: ${targetLane?.id.name} with ${diffProps.length} components (memo hits: ${memoHits}/${diffProps.length})`
     );
 
+    // when `skipUpToDate` is set, drop only components with NO difference vs the target. keep any
+    // divergence — crucially `isSourceAhead()` (the lane's own changes): a lane forked from main has no
+    // target-only snaps, so `isUpToDate()` (=!isTargetAhead) alone would wrongly hide the whole diff.
+    const visibleDiffProps = options?.skipUpToDate
+      ? diffProps.filter(({ componentId }) => {
+          // `d` may be a memo reconstruction exposing only data + `isUpToDate()`; test source-ahead via
+          // `snapsOnSourceOnly.length`, not the `isSourceAhead()` method (absent on the reconstruction).
+          const d = snapDistancesByComponentId.get(componentId.toString())?.snapsDistance;
+          return !d || (d.snapsOnSourceOnly?.length ?? 0) > 0 || !d.isUpToDate();
+        })
+      : diffProps;
+
     const commonSnapsToImport = compact(
-      [...snapDistancesByComponentId.values()].map((s) =>
-        s.snapsDistance.commonSnapBeforeDiverge
+      visibleDiffProps.map(({ componentId }) => {
+        const s = snapDistancesByComponentId.get(componentId.toString());
+        return s?.snapsDistance.commonSnapBeforeDiverge
           ? s.componentId.changeVersion(s.snapsDistance.commonSnapBeforeDiverge.hash)
-          : null
-      )
+          : null;
+      })
     );
 
     const sourceOrTargetLane =
@@ -960,23 +1447,55 @@ please create a new lane instead, which will include all components of this lane
         (targetLaneId?.isDefault() ? null : (targetLane as Lane))) ??
       undefined;
 
-    if (commonSnapsToImport.length > 0 && !options?.skipChanges) {
+    if (commonSnapsToImport.length > 0 && !options?.skipChanges && !options?.deferChanges) {
+      this.logger.profile(`import common snaps for lane diff (${commonSnapsToImport.length} snaps)`);
       await this.scope.legacyScope.scopeImporter.importWithoutDeps(ComponentIdList.fromArray(commonSnapsToImport), {
         cache: true,
         reason: `get the common snap for lane diff`,
         lane: sourceOrTargetLane,
       });
+      this.logger.profile(`import common snaps for lane diff (${commonSnapsToImport.length} snaps)`);
     }
 
-    const results = await pMapSeries(diffProps, async ({ componentId, sourceHead, targetHead }) =>
-      this.componentDiffStatus(
-        componentId,
-        sourceHead,
-        targetHead,
-        snapDistancesByComponentId.get(componentId.toString())?.snapsDistance,
-        options
-      )
+    this.logger.profile(`componentDiffStatus pMap (${visibleDiffProps.length} components)`);
+    // run in parallel — bounded by `concurrentComponentsLimit()`. previously this was pMapSeries which
+    // serialized 30 schema extractions and dominated the cold call (minutes).
+    const results = await pMap(
+      visibleDiffProps,
+      async ({ componentId, sourceHead, targetHead }) => {
+        // report whether an existing main base was already local (`workspace`) or pulled from remote (`scope`).
+        const baseSource: DiffBaseSource | undefined =
+          targetIsMain && targetHead
+            ? baseWasLocalByComp.get(componentId.toString())
+              ? 'workspace'
+              : 'scope'
+            : undefined;
+        return this.componentDiffStatus(
+          componentId,
+          sourceHead,
+          targetHead,
+          snapDistancesByComponentId.get(componentId.toString())?.snapsDistance,
+          options,
+          baseSource
+        );
+      },
+      { concurrency: concurrentComponentsLimit() }
     );
+    this.logger.profile(`componentDiffStatus pMap (${visibleDiffProps.length} components)`);
+
+    // best-effort populate the top-level result memo. eagerly resolve `changes` for any deferred
+    // components so the next cold call can return immediately — does not block this response.
+    if (resultMemoKey) this.populateDiffStatusMemoAsync(resultMemoKey, results);
+
+    // Pre-warm caches the lane-compare UI will hit right after this query returns:
+    //   - `host.getMany([base+compare versioned ids])` populates `ScopeComponentLoader.componentsCache`
+    //      so the UI's 20 per-component `getHost.get` queries (componentFields + componentFieldWithLogs
+    //      for each side of each visible pair) all hit cache instead of racing through cold loads.
+    //   - `componentCompare.compareComponents(pairs)` populates the new compare-result memo so the UI's
+    //      `CompareComponents` query is answered from cache.
+    // Fired *after* we have the answer ready — never blocks the response. Wrapped in catch() so any
+    // background failure stays invisible to the caller.
+    if (visibleDiffProps.length > 0) this.prewarmCompareCaches(host, visibleDiffProps);
 
     this.logger.profile(`diff status for source lane: ${sourceLaneId.name} and target lane: ${targetLaneId?.name}`);
 
@@ -992,7 +1511,8 @@ please create a new lane instead, which will include all components of this lane
     sourceHead: string,
     targetHead?: string,
     snapsDistance?: SnapsDistance,
-    options?: LaneDiffStatusOptions
+    options?: LaneDiffStatusOptions,
+    baseSource?: DiffBaseSource
   ): Promise<LaneComponentDiffStatus> {
     if (snapsDistance?.err) {
       const noCommonSnap = snapsDistance.err instanceof NoCommonSnap;
@@ -1001,6 +1521,7 @@ please create a new lane instead, which will include all components of this lane
         componentId,
         sourceHead,
         targetHead,
+        baseSource,
         upToDate: snapsDistance?.isUpToDate(),
         unrelated: noCommonSnap || undefined,
         changes: [],
@@ -1009,9 +1530,14 @@ please create a new lane instead, which will include all components of this lane
 
     const commonSnap = snapsDistance?.commonSnapBeforeDiverge;
 
-    const changes = !options?.skipChanges
-      ? await this.deriveChangeTypes(commonSnap, componentId, sourceHead)
-      : undefined;
+    // when changes are skipped or deferred, return the snap-distance metadata immediately and leave
+    // `changes` unset. callers derive them lazily through `deriveComponentChanges` (used by the GraphQL
+    // `changes` field resolver, which runs the work per-component in parallel only when the client
+    // selects the field — keeps cold p50 under 200 ms even for many components).
+    const changes =
+      options?.skipChanges || options?.deferChanges
+        ? undefined
+        : await this.deriveChangeTypes(commonSnap, componentId, sourceHead);
     const changeType = changes ? changes[0] : undefined;
 
     return {
@@ -1020,15 +1546,54 @@ please create a new lane instead, which will include all components of this lane
       changes,
       sourceHead,
       targetHead: commonSnap?.hash,
+      baseSource,
       upToDate: snapsDistance?.isUpToDate(),
       snapsDistance: {
         onSource: snapsDistance?.snapsOnSourceOnly.map((s) => s.hash) ?? [],
         onTarget: snapsDistance?.snapsOnTargetOnly.map((s) => s.hash) ?? [],
         common: snapsDistance?.commonSnapBeforeDiverge?.hash,
       },
+      changesContext: { commonSnap, skipped: options?.skipChanges },
     };
   }
 
+  /**
+   * Lazily derive the change types for a single component diff status. Used by the GraphQL `changes`
+   * field resolver so the (expensive) derivation only runs when the field is selected. Memoized per
+   * status object via `changesContext.pending`, so selecting both `changes` and `changeType` computes
+   * the value once.
+   */
+  async deriveComponentChanges(status: LaneComponentDiffStatus): Promise<ChangeType[] | undefined> {
+    if (status.changes) return status.changes;
+    const context = status.changesContext;
+    if (!context || context.skipped) return undefined;
+
+    // top-level memo on the final ChangeType[] — short-circuits BEFORE compare()/getAPIDiff() run.
+    // Persisted to disk, keyed on immutable hashes, so a cold server start with a populated cache
+    // answers the entire derivation from a Map.get().
+    const memoKey = this.changeTypesMemoKey(status.componentId, status.sourceHead, context.commonSnap?.hash ?? null);
+    const cached = this.changeTypesMemo.get(memoKey);
+    if (cached) return cached;
+
+    // single-flight concurrent requests for the same (componentId, sourceHead, commonSnap) tuple.
+    let pending = this.changeTypesInflight.get(memoKey);
+    if (!pending) {
+      pending = this.deriveChangesLimit(() =>
+        this.deriveChangeTypes(context.commonSnap, status.componentId, status.sourceHead)
+      )
+        .then((result) => {
+          this.memoStoreChangeTypes(memoKey, result);
+          return result;
+        })
+        .finally(() => {
+          this.changeTypesInflight.delete(memoKey);
+        });
+      this.changeTypesInflight.set(memoKey, pending);
+    }
+    context.pending = pending;
+    return pending;
+  }
+
   async componentDiffStatusOld(
     componentId: ComponentID,
     sourceHead: string,
@@ -1079,39 +1644,74 @@ please create a new lane instead, which will include all components of this lane
   ): Promise<ChangeType[]> {
     if (!commonSnap) return [ChangeType.NEW];
 
-    const baseIdStr = componentId.changeVersion(commonSnap.hash).toString();
-    const compareIdStr = componentId.changeVersion(sourceHead).toString();
-    const [compare, apiDiff] = await Promise.all([
-      this.componentCompare.compare(baseIdStr, compareIdStr),
-      this.componentCompare.getAPIDiff(baseIdStr, compareIdStr),
-    ]);
-
-    const hasCodeChanges = compare.code.some((c) => c.status !== 'UNCHANGED');
-    const hasFieldChanges = compare.fields.length > 0;
-    const hasApiChanges = apiDiff?.hasChanges ?? false;
-
-    if (!hasFieldChanges && !hasCodeChanges && !hasApiChanges) {
+    // Classify changes by comparing the two raw `Version` objects directly (files-by-hash, deps,
+    // extensions) instead of `componentCompare.compare()`. compare() loads full consumer components
+    // (aspect calculation, capsules) for both sides just to extract two booleans — dominating the cold
+    // derivation for a large lane. Loading the raw Version objects is a cheap object read.
+    // The API change type is intentionally not computed here: it needs serial tsserver schema
+    // extraction and is resolved lazily by the API view, gated on the SOURCE_CODE/DEPENDENCY evidence.
+    const repo = this.scope.legacyScope.objects;
+    const [baseVersion, compareVersion] = (await Promise.all([
+      repo.load(Ref.from(commonSnap.hash), false),
+      repo.load(Ref.from(sourceHead), false),
+    ])) as [Version | undefined, Version | undefined];
+    if (!baseVersion || !compareVersion) return [];
+
+    const baseObj = baseVersion.toObject();
+    const compareObj = compareVersion.toObject();
+    const differs = (a: unknown, b: unknown) => JSON.stringify(a ?? null) !== JSON.stringify(b ?? null);
+
+    // dependency lists and config maps are semantically unordered — two snaps can store the same
+    // set in a different order (deps aren't sorted at snap time). compare them order-insensitively so
+    // a pure reorder isn't misclassified as a DEPENDENCY/ASPECTS change. `canonical` recursively sorts
+    // object keys and sorts array elements by their serialized form, yielding a stable set signature.
+    const canonical = (value: unknown): string => {
+      const norm = (v: any): any => {
+        if (Array.isArray(v)) return v.map(norm).sort((x, y) => (JSON.stringify(x) < JSON.stringify(y) ? -1 : 1));
+        if (v && typeof v === 'object') {
+          return Object.keys(v)
+            .sort()
+            .reduce<Record<string, any>>((acc, k) => {
+              acc[k] = norm(v[k]);
+              return acc;
+            }, {});
+        }
+        return v;
+      };
+      return JSON.stringify(norm(value) ?? null);
+    };
+    const differsUnordered = (a: unknown, b: unknown) => canonical(a) !== canonical(b);
+
+    // `files` is a set keyed by path+hash; `Version.toObject()` emits it unsorted, so compare it
+    // order-insensitively too — a pure reorder must not read as a SOURCE_CODE change. `mainFile` is a
+    // single value, so ordered compare is fine.
+    const hasCodeChanges =
+      differsUnordered(baseObj.files, compareObj.files) || differs(baseObj.mainFile, compareObj.mainFile);
+    // DEPENDENCY mirrors compare()'s deps fields: dependencies, devDependencies, extensionDependencies
+    // (the last carries aspect/env-provided deps — present as model deps, not in the plain toObject()).
+    const hasDepChanges =
+      differsUnordered(baseObj.dependencies, compareObj.dependencies) ||
+      differsUnordered(baseObj.devDependencies, compareObj.devDependencies) ||
+      differsUnordered(
+        baseVersion.extensionDependencies.cloneAsString(),
+        compareVersion.extensionDependencies.cloneAsString()
+      );
+    const hasFieldChanges =
+      hasDepChanges ||
+      differsUnordered(baseObj.extensions, compareObj.extensions) ||
+      differsUnordered(baseObj.overrides, compareObj.overrides) ||
+      differsUnordered(baseObj.packageDependencies, compareObj.packageDependencies) ||
+      differsUnordered(baseObj.devPackageDependencies, compareObj.devPackageDependencies) ||
+      differsUnordered(baseObj.peerPackageDependencies, compareObj.peerPackageDependencies);
+
+    if (!hasFieldChanges && !hasCodeChanges) {
       return [ChangeType.NONE];
     }
 
     const changed: ChangeType[] = [];
-
-    if (hasCodeChanges) {
-      changed.push(ChangeType.SOURCE_CODE);
-    }
-
-    if (hasFieldChanges) {
-      changed.push(ChangeType.ASPECTS);
-    }
-
-    const depsFields = ['dependencies', 'devDependencies', 'extensionDependencies'];
-    if (compare.fields.some((field) => depsFields.includes(field.fieldName))) {
-      changed.push(ChangeType.DEPENDENCY);
-    }
-
-    if (hasApiChanges) {
-      changed.push(ChangeType.API);
-    }
+    if (hasCodeChanges) changed.push(ChangeType.SOURCE_CODE);
+    if (hasFieldChanges) changed.push(ChangeType.ASPECTS);
+    if (hasDepChanges) changed.push(ChangeType.DEPENDENCY);
 
     return changed;
   }
diff --git a/scopes/lanes/lanes/lanes.ui.runtime.tsx b/scopes/lanes/lanes/lanes.ui.runtime.tsx
index 9e0db00dd074..c0b07d9e49ed 100644
--- a/scopes/lanes/lanes/lanes.ui.runtime.tsx
+++ b/scopes/lanes/lanes/lanes.ui.runtime.tsx
@@ -15,6 +15,8 @@ import type { WorkspaceUI } from '@teambit/workspace';
 import { WorkspaceAspect } from '@teambit/workspace';
 import type { ComponentUI } from '@teambit/component';
 import { ComponentAspect, useIdFromLocation, ComponentID } from '@teambit/component';
+import type { TabItem } from '@teambit/component.ui.component-compare.models.component-compare-props';
+import { flatten } from 'lodash';
 import type { MenuWidget, MenuWidgetSlot } from '@teambit/ui-foundation.ui.menu';
 import type { LaneOverviewLine, LaneOverviewLineSlot } from '@teambit/lanes.ui.lane-overview';
 import { LaneOverview } from '@teambit/lanes.ui.lane-overview';
@@ -40,6 +42,23 @@ import styles from './lanes.ui.module.scss';
 
 export type LaneCompareProps = Partial<DefaultLaneCompareProps>;
 export type LaneProviderIgnoreSlot = SlotRegistry<IgnoreDerivingFromUrl>;
+
+/**
+ * Stable, module-scope tabs list. Previously this array (and the `React.createElement(...)` for each
+ * tab's element) was constructed inside `getLaneCompare`, which means every render produced a new
+ * array and new tab-element references. Those flowed into `<LaneCompare tabs={...}>` → `resolvedTabs`
+ * (useMemo keyed on input ref) → new value → new `allTabs` prop on every `InlineComponentCompare`,
+ * defeating React.memo and forcing all 10 component panels (and their nested tabs) to re-render on
+ * every parent re-render — including every `setViewMode` click. Hoisting the array to module scope
+ * gives a single stable reference that survives any number of parent renders.
+ */
+/**
+ * Slot signature for `LanesUI.registerCompareTab`. Kept for back-compat — the canonical inline
+ * compare-tab list is now owned by `ComponentCompareUI` (so single-component compare and
+ * lane-compare share one source). Tabs registered here are merged on top of that list.
+ */
+export type LaneCompareTabSlot = SlotRegistry<TabItem | TabItem[]>;
+
 export function useComponentFilters() {
   const idFromLocation = useIdFromLocation(undefined, true);
   const { lanesModel, loading } = useLanes();
@@ -109,6 +128,7 @@ export class LanesUI {
     Slot.withType<NavigationSlot>(),
     Slot.withType<MenuWidgetSlot>(),
     Slot.withType<LaneProviderIgnoreSlot>(),
+    Slot.withType<TabItem | TabItem[]>(),
   ];
 
   constructor(
@@ -122,6 +142,12 @@ export class LanesUI {
      */
     private overviewSlot: LaneOverviewLineSlot,
     private laneProviderIgnoreSlot: LaneProviderIgnoreSlot,
+    /**
+     * compare-tab slot. Aspects register their inline-compare tab via `registerCompareTab(...)`;
+     * the registered tabs are merged with the local fallback list, deduped by `id`, and sorted
+     * by `order` before being passed to `<LaneCompare>`.
+     */
+    private compareTabSlot: LaneCompareTabSlot,
     private workspace?: WorkspaceUI,
     private scope?: ScopeUI
   ) {
@@ -341,9 +367,46 @@ export class LanesUI {
     this.navSlot.register(routes);
   }
 
-  getLaneCompare = (props: LaneCompareProps) => {
-    const tabs = this.componentCompareUI.tabs;
+  /**
+   * Register an inline compare tab. Aspects own their compare-tab entry and call this in their
+   * own UI provider (e.g. the docs aspect registers `inline-docs` so it can pass its real
+   * `titleBadges` / `overviewOptions` slots). Tabs are merged with the lanes-side fallback list,
+   * deduped by `id`, and sorted by `order` at render time.
+   */
+  registerCompareTab(tab: TabItem | TabItem[]) {
+    this.compareTabSlot.register(tab);
+    return this;
+  }
 
+  // memoize the resolved tab list — same identity across renders unless a new registration lands.
+  // The base list is owned by component-compare (so the single-component compare page and
+  // lane-compare share one source). We additionally merge in anything registered on this aspect's
+  // legacy `compareTabSlot` for back-compat.
+  private _resolvedCompareTabs?: TabItem[];
+  private _resolvedCompareTabsKey?: string;
+  private resolveCompareTabs(): TabItem[] {
+    const fromComponentCompare = this.componentCompareUI.resolveCompareTabs();
+    const slotEntries = this.compareTabSlot.toArray();
+    const localRegistered = flatten(
+      slotEntries.map(([, value]) => value).filter(Boolean) as Array<TabItem | TabItem[]>
+    );
+    const cacheKey = `${fromComponentCompare.map((t) => `${t.id}:${t.order ?? 0}`).join(',')}|${localRegistered
+      .map((t) => `${t.id}:${t.order ?? 0}`)
+      .join(',')}`;
+    if (this._resolvedCompareTabs && this._resolvedCompareTabsKey === cacheKey) {
+      return this._resolvedCompareTabs;
+    }
+    const localIds = new Set(localRegistered.map((t) => t.id));
+    // local registrations take precedence over the component-compare list.
+    const merged = [...localRegistered, ...fromComponentCompare.filter((t) => !localIds.has(t.id))].sort(
+      (a, b) => (a.order ?? 0) - (b.order ?? 0)
+    );
+    this._resolvedCompareTabs = merged;
+    this._resolvedCompareTabsKey = cacheKey;
+    return merged;
+  }
+
+  getLaneCompare = (props: LaneCompareProps) => {
     if (!props.base || !props.compare) return null;
 
     return (
@@ -352,7 +415,8 @@ export class LanesUI {
         base={props.base}
         compare={props.compare}
         host={props.host || this.host}
-        tabs={props.tabs || tabs}
+        tabs={props.tabs || this.resolveCompareTabs()}
+        apiDiffInsights={props.apiDiffInsights || this.componentCompareUI.getApiDiffInsights()}
       />
     );
   };
@@ -367,12 +431,13 @@ export class LanesUI {
       CommandBarUI,
     ],
     _,
-    [routeSlot, overviewSlot, navSlot, menuWidgetSlot, laneProviderIgnoreSlot]: [
+    [routeSlot, overviewSlot, navSlot, menuWidgetSlot, laneProviderIgnoreSlot, compareTabSlot]: [
       RouteSlot,
       LaneOverviewLineSlot,
       LanesOrderedNavigationSlot,
       MenuWidgetSlot,
       LaneProviderIgnoreSlot,
+      LaneCompareTabSlot,
     ],
     harmony: Harmony
   ) {
@@ -394,6 +459,7 @@ export class LanesUI {
       menuWidgetSlot,
       overviewSlot,
       laneProviderIgnoreSlot,
+      compareTabSlot,
       workspace,
       scope
     );
diff --git a/scopes/lanes/merge-lanes/merge-lanes.main.runtime.ts b/scopes/lanes/merge-lanes/merge-lanes.main.runtime.ts
index b669f6568937..dcf16df6ae5f 100644
--- a/scopes/lanes/merge-lanes/merge-lanes.main.runtime.ts
+++ b/scopes/lanes/merge-lanes/merge-lanes.main.runtime.ts
@@ -353,13 +353,17 @@ export class MergeLanesMain {
     const getBitIds = async () => {
       if (isDefaultLane) {
         const ids = await this.getMainIdsToMerge(currentLane, !excludeNonLaneComps, shouldIncludeUpdateDependents);
-        const modelComponents = await Promise.all(ids.map((id) => this.scope.legacyScope.getModelComponent(id)));
-        return compact(
-          modelComponents.map((c) => {
-            if (!c.head) return null; // probably the component was never merged to main
-            return c.toComponentId().changeVersion(c.head.toString());
+        // resolve each component's head on main, falling back to the remote scope. the main objects
+        // were already fetched above (importObjectsFromMainIfExist), so a base that lives on the remote
+        // but wasn't in the local scope is still included in the merge instead of being skipped as
+        // "never merged to main". a component with no head on main at all is genuinely new and dropped.
+        const idsWithHead = await Promise.all(
+          ids.map(async (id) => {
+            const head = await this.lanes.getHeadOnMain(id);
+            return head ? id.changeVersion(head) : null;
           })
         );
+        return compact(idsWithHead);
       }
       if (!otherLane) throw new Error(`lane must be defined for non-default`);
       return shouldIncludeUpdateDependents
diff --git a/scopes/preview/preview/rspack/rspack.config.ts b/scopes/preview/preview/rspack/rspack.config.ts
index c08afd5ed66c..da4f09d720f0 100644
--- a/scopes/preview/preview/rspack/rspack.config.ts
+++ b/scopes/preview/preview/rspack/rspack.config.ts
@@ -69,6 +69,9 @@ export function createRspackConfig(outputDir: string, entryFile: string): Config
         'react/jsx-runtime': require.resolve('react/jsx-runtime'),
         react: require.resolve('react'),
         'react-dom': require.resolve('react-dom'),
+        // dedupe to a single copy — multiple versions in the pnpm store break the module namespace
+        // when bundled (matches the alias in the react env webpack + ui-foundation rspack configs).
+        '@teambit/lanes.entities.lane-diff': require.resolve('@teambit/lanes.entities.lane-diff'),
       },
       fallback: {
         module: false,
diff --git a/scopes/react/react/webpack/webpack.config.base.ts b/scopes/react/react/webpack/webpack.config.base.ts
index 08e479fbac7f..89158ac63c52 100644
--- a/scopes/react/react/webpack/webpack.config.base.ts
+++ b/scopes/react/react/webpack/webpack.config.base.ts
@@ -80,6 +80,9 @@ export default function (isEnvProduction = false): Configuration {
       alias: {
         'react/jsx-dev-runtime': require.resolve('react/jsx-dev-runtime'),
         'react/jsx-runtime': require.resolve('react/jsx-runtime'),
+        // dedupe to a single copy — multiple versions in the pnpm store break the
+        // module namespace when bundled (see lane-compare runtime error).
+        '@teambit/lanes.entities.lane-diff': require.resolve('@teambit/lanes.entities.lane-diff'),
         // Allows for better profiling with ReactDevTools
         ...(isEnvProductionProfile && {
           'react-dom$': 'react-dom/profiling',
diff --git a/scopes/semantics/schema/api-diff-compute.spec.ts b/scopes/semantics/schema/api-diff-compute.spec.ts
new file mode 100644
index 000000000000..956a22fe13e9
--- /dev/null
+++ b/scopes/semantics/schema/api-diff-compute.spec.ts
@@ -0,0 +1,284 @@
+import { expect } from 'chai';
+import type { Location as SchemaLocation, SchemaNode } from '@teambit/semantics.entities.semantic-schema';
+import {
+  APISchema,
+  ModuleSchema,
+  VariableLikeSchema,
+  KeywordTypeSchema,
+  TypeRefSchema,
+  ExportSchema,
+  UnImplementedSchema,
+} from '@teambit/semantics.entities.semantic-schema';
+import { ComponentID } from '@teambit/component-id';
+import { computeAPIDiff, ImpactAssessor, DEFAULT_IMPACT_RULES } from '@teambit/semantics.entities.semantic-schema-diff';
+import { SchemaMain } from './schema.main.runtime';
+
+const loc: SchemaLocation = { filePath: 'index.ts', line: 0, character: 0 };
+const compId = ComponentID.fromString('org.scope/button');
+
+function makeVar(name: string, type: string): VariableLikeSchema {
+  return new VariableLikeSchema(loc, name, `${name}: ${type}`, new KeywordTypeSchema(loc, type), false);
+}
+
+function makeSchema(exports: SchemaNode[], internals: SchemaNode[] = []): APISchema {
+  const internalModules = internals.length > 0 ? [new ModuleSchema(loc, [], internals)] : [];
+  return new APISchema(loc, new ModuleSchema(loc, exports, []), internalModules, compId);
+}
+
+function makeAssessor(): ImpactAssessor {
+  const assessor = new ImpactAssessor();
+  assessor.registerDefaultRules(DEFAULT_IMPACT_RULES);
+  return assessor;
+}
+
+describe('computeAPIDiff', () => {
+  describe('availability short-circuit', () => {
+    const unavailable = { available: false, reason: 'NOT_BUILT' as const };
+    const available = { available: true };
+
+    it('should not fabricate a diff when the base schema is unavailable', () => {
+      const result = computeAPIDiff(makeSchema([]), makeSchema([makeVar('foo', 'string')]), makeAssessor(), {
+        base: unavailable,
+        compare: available,
+      });
+      expect(result.status).to.equal('BASE_UNAVAILABLE');
+      expect(result.hasChanges).to.be.false;
+      expect(result.changes).to.have.length(0);
+      expect(result.base).to.deep.equal(unavailable);
+      expect(result.compare).to.deep.equal(available);
+    });
+
+    it('should not fabricate a diff when the compare schema is unavailable', () => {
+      const result = computeAPIDiff(makeSchema([makeVar('foo', 'string')]), makeSchema([]), makeAssessor(), {
+        base: available,
+        compare: unavailable,
+      });
+      expect(result.status).to.equal('COMPARE_UNAVAILABLE');
+      expect(result.hasChanges).to.be.false;
+      expect(result.changes).to.have.length(0);
+    });
+
+    it('should report UNAVAILABLE when both schemas are unavailable', () => {
+      const result = computeAPIDiff(makeSchema([]), makeSchema([]), makeAssessor(), {
+        base: unavailable,
+        compare: { available: false, reason: 'NO_EXTRACTOR' },
+      });
+      expect(result.status).to.equal('UNAVAILABLE');
+      expect(result.hasChanges).to.be.false;
+      expect(result.compare.reason).to.equal('NO_EXTRACTOR');
+    });
+
+    it('should default to available and report COMPUTED', () => {
+      const result = computeAPIDiff(makeSchema([]), makeSchema([makeVar('foo', 'string')]), makeAssessor());
+      expect(result.status).to.equal('COMPUTED');
+      expect(result.base.available).to.be.true;
+      expect(result.compare.available).to.be.true;
+      expect(result.hasChanges).to.be.true;
+      expect(result.added).to.equal(1);
+    });
+  });
+
+  describe('impact derivation', () => {
+    it('should derive impact from public changes only', () => {
+      // internal-only breaking change: internal var type narrowed string → number
+      const base = makeSchema([makeVar('Button', 'string')], [makeVar('helper', 'string')]);
+      const compare = makeSchema([makeVar('Button', 'string')], [makeVar('helper', 'number')]);
+      const result = computeAPIDiff(base, compare, makeAssessor());
+
+      expect(result.publicChanges).to.have.length(0);
+      expect(result.internalChanges).to.have.length(1);
+      expect(result.impact).to.equal('PATCH');
+      expect(result.internalImpact).to.equal('BREAKING');
+      expect(result.hasChanges).to.be.true;
+    });
+
+    it('should reflect public breaking changes in impact', () => {
+      const base = makeSchema([makeVar('Button', 'string')]);
+      const compare = makeSchema([]);
+      const result = computeAPIDiff(base, compare, makeAssessor());
+
+      expect(result.removed).to.equal(1);
+      expect(result.impact).to.equal('BREAKING');
+      expect(result.internalImpact).to.equal('PATCH');
+    });
+  });
+});
+
+describe('computeAPIDiff default/re-export aliases (extraction-inconsistency robustness)', () => {
+  // Repro of a real false positive: `class AttReact` + `export default AttReact`. Across two builds
+  // the default export was extracted inconsistently — an UnImplementedSchema one version, a
+  // `AttReact (default)` TypeRef alias the next — while only the docs changed. The diff must not
+  // report the default re-export alias as a newly added public API.
+  const classExport = () => new ExportSchema(loc, 'AttReact', makeVar('AttReact', 'string'));
+  const defaultAsUnimplemented = () => new UnImplementedSchema(loc, 'AttReact', 'Identifier');
+  const defaultAsTypeRefAlias = () =>
+    new ExportSchema(loc, 'AttReact (default)', new TypeRefSchema(loc, 'AttReact'), 'AttReact (default)');
+
+  it('should not report an added export when the default re-export alias changes representation', () => {
+    const base = makeSchema([classExport(), defaultAsUnimplemented()]);
+    const compare = makeSchema([classExport(), defaultAsTypeRefAlias()]);
+    const result = computeAPIDiff(base, compare, makeAssessor());
+    expect(result.hasChanges).to.equal(false);
+    expect(result.added).to.equal(0);
+    expect(result.publicChanges).to.have.lengthOf(0);
+  });
+
+  it('should drop a redundant default type-ref alias to an already-exported symbol', () => {
+    const base = makeSchema([classExport()]);
+    const compare = makeSchema([classExport(), defaultAsTypeRefAlias()]);
+    const result = computeAPIDiff(base, compare, makeAssessor());
+    expect(result.added).to.equal(0);
+    expect(result.hasChanges).to.equal(false);
+  });
+
+  it('should still report a genuinely new export alongside a redundant alias', () => {
+    const base = makeSchema([classExport()]);
+    const compare = makeSchema([classExport(), defaultAsTypeRefAlias(), makeVar('brandNew', 'string')]);
+    const result = computeAPIDiff(base, compare, makeAssessor());
+    expect(result.added).to.equal(1);
+    expect(result.publicChanges.map((c) => c.exportName)).to.include('brandNew');
+    expect(result.publicChanges.map((c) => c.exportName)).to.not.include('AttReact (default)');
+  });
+});
+
+describe('computeAPIDiff unresolved exports (extraction gaps)', () => {
+  const unresolved = (name: string) => new UnImplementedSchema(loc, name, 'Identifier');
+
+  it('should not report a removal when the export is merely unresolved on the compare side', () => {
+    const base = makeSchema([makeVar('Foo', 'string')]);
+    const compare = makeSchema([unresolved('Foo')]);
+    const result = computeAPIDiff(base, compare, makeAssessor());
+    expect(result.removed).to.equal(0);
+    expect(result.hasChanges).to.equal(false);
+    expect(result.unresolvedExports).to.include('Foo');
+  });
+
+  it('should not report an addition when the export was merely unresolved on the base side', () => {
+    const base = makeSchema([unresolved('Foo')]);
+    const compare = makeSchema([makeVar('Foo', 'string')]);
+    const result = computeAPIDiff(base, compare, makeAssessor());
+    expect(result.added).to.equal(0);
+    expect(result.hasChanges).to.equal(false);
+    expect(result.unresolvedExports).to.include('Foo');
+  });
+
+  it('should surface an export unresolved on both sides without diffing it', () => {
+    const base = makeSchema([unresolved('Foo'), makeVar('Bar', 'string')]);
+    const compare = makeSchema([unresolved('Foo'), makeVar('Bar', 'string')]);
+    const result = computeAPIDiff(base, compare, makeAssessor());
+    expect(result.hasChanges).to.equal(false);
+    expect(result.unresolvedExports).to.include('Foo');
+  });
+
+  it('should NOT surface a name that is unresolved on one side but resolved elsewhere (real export wins)', () => {
+    // mirrors AttReact: a class export + an unresolved default that shares the class name.
+    const base = makeSchema([makeVar('AttReact', 'string'), unresolved('AttReact')]);
+    const compare = makeSchema([makeVar('AttReact', 'string')]);
+    const result = computeAPIDiff(base, compare, makeAssessor());
+    expect(result.hasChanges).to.equal(false);
+    expect(result.unresolvedExports).to.have.lengthOf(0);
+  });
+});
+
+describe('computeAPIDiff visibility moves', () => {
+  it('should report a public→internal move as a public BREAKING change (drives impact, not internalImpact)', () => {
+    const base = makeSchema([makeVar('foo', 'string')], []);
+    const compare = makeSchema([], [makeVar('foo', 'string')]);
+    const result = computeAPIDiff(base, compare, makeAssessor());
+
+    expect(result.publicChanges).to.have.length(1);
+    expect(result.publicChanges[0].changes?.[0]?.changeKind).to.equal('visibility-public-to-internal');
+    expect(result.impact).to.equal('BREAKING');
+  });
+});
+
+describe('SchemaMain.getSchemaWithAvailability reason mapping', () => {
+  const succeedStatus = 'succeed';
+  const loggerStub = { warn: () => {}, debug: () => {}, error: () => {}, info: () => {} } as any;
+
+  function makeComponent(buildStatus = 'pending') {
+    return { id: ComponentID.fromString('org.scope/button'), buildStatus } as any;
+  }
+
+  function makeSchemaMain({
+    disabled = false,
+    workspace = {} as any,
+    env = {} as any,
+    artifacts = [] as any[],
+  } = {}): SchemaMain {
+    const envs = { getEnv: () => ({ env }) } as any;
+    const builder = { getArtifactsVinylByAspectAndTaskName: async () => artifacts } as any;
+    const config = { defaultParser: 'typescript', disabled } as any;
+    return new SchemaMain(
+      undefined as any,
+      undefined as any,
+      envs,
+      config,
+      builder,
+      workspace,
+      loggerStub,
+      new ImpactAssessor()
+    );
+  }
+
+  it('should report DISABLED when schema extraction is disabled by config', async () => {
+    const schemaMain = makeSchemaMain({ disabled: true });
+    const { availability } = await schemaMain.getSchemaWithAvailability(makeComponent());
+    expect(availability).to.deep.equal({ available: false, reason: 'DISABLED' });
+  });
+
+  it('should report NO_EXTRACTOR when the env has no schema extractor', async () => {
+    const schemaMain = makeSchemaMain({ env: { name: 'stub-env' } });
+    const { availability } = await schemaMain.getSchemaWithAvailability(makeComponent());
+    expect(availability).to.deep.equal({ available: false, reason: 'NO_EXTRACTOR' });
+  });
+
+  it('should report FAILED when extraction throws and no artifact exists', async () => {
+    const env = {
+      name: 'stub-env',
+      getSchemaExtractor: () => ({
+        extract: async () => {
+          throw new Error('boom');
+        },
+        dispose: () => {},
+      }),
+    };
+    const schemaMain = makeSchemaMain({ env });
+    const { availability } = await schemaMain.getSchemaWithAvailability(makeComponent());
+    expect(availability).to.deep.equal({ available: false, reason: 'FAILED' });
+  });
+
+  it('should report NOT_BUILT for a built/scope component without a schema artifact', async () => {
+    const schemaMain = makeSchemaMain({ workspace: undefined as any });
+    const { availability } = await schemaMain.getSchemaWithAvailability(makeComponent(succeedStatus));
+    expect(availability).to.deep.equal({ available: false, reason: 'NOT_BUILT' });
+  });
+
+  it('should report available when a schema artifact exists', async () => {
+    const schemaJson = APISchema.empty(ComponentID.fromString('org.scope/button')).toObject();
+    const artifacts = [{ contents: Buffer.from(JSON.stringify(schemaJson)) }];
+    const schemaMain = makeSchemaMain({ workspace: undefined as any, artifacts });
+    const { schema, availability } = await schemaMain.getSchemaWithAvailability(makeComponent(succeedStatus));
+    expect(availability).to.deep.equal({ available: true });
+    expect(schema.module.exports).to.have.length(0);
+  });
+
+  it('should rethrow extraction errors when alwaysRunExtractor is set', async () => {
+    const env = {
+      name: 'stub-env',
+      getSchemaExtractor: () => ({
+        extract: async () => {
+          throw new Error('boom');
+        },
+        dispose: () => {},
+      }),
+    };
+    const schemaMain = makeSchemaMain({ env });
+    try {
+      await schemaMain.getSchemaWithAvailability(makeComponent(), false, true);
+      expect.fail('expected getSchemaWithAvailability to rethrow');
+    } catch (err: any) {
+      expect(err.message).to.equal('boom');
+    }
+  });
+});
diff --git a/scopes/semantics/schema/mock/button-diff.json b/scopes/semantics/schema/mock/button-diff.json
index c1d720be10d2..1b8f08110081 100644
--- a/scopes/semantics/schema/mock/button-diff.json
+++ b/scopes/semantics/schema/mock/button-diff.json
@@ -3,10 +3,10 @@
   "impact": "NON_BREAKING",
   "added": 1,
   "removed": 0,
-  "modified": 7,
+  "modified": 6,
   "breaking": 0,
   "nonBreaking": 6,
-  "patch": 2,
+  "patch": 1,
   "publicChanges": [
     {
       "status": "MODIFIED",
@@ -27,8 +27,8 @@
           "changeKind": "documentation-changed",
           "description": "documentation description and tags changed",
           "impact": "PATCH",
-          "from": "General comment of the myFunc",
-          "to": "Updated comment for myFunc"
+          "from": "General comment of the myFunc\n@deprecate example of deprecation tag\n@parameter this is A\n@parameter this is B\n@return results of adding a to b",
+          "to": "Updated comment for myFunc\n@parameter this is A\n@parameter this is B\n@parameter this is C\n@return results of adding a, b and c"
         }
       ]
     },
@@ -50,22 +50,6 @@
         }
       ]
     },
-    {
-      "status": "MODIFIED",
-      "visibility": "public",
-      "impact": "PATCH",
-      "exportName": "ButtonProps",
-      "schemaType": "Type Alias",
-      "details": [
-        {
-          "changeKind": "type-definition-changed",
-          "description": "type definition changed",
-          "impact": "PATCH",
-          "from": "type ButtonProps = any",
-          "to": "type ButtonProps = any"
-        }
-      ]
-    },
     {
       "status": "MODIFIED",
       "visibility": "public",
diff --git a/scopes/semantics/schema/mock/default-export/index.ts b/scopes/semantics/schema/mock/default-export/index.ts
new file mode 100644
index 000000000000..55c3eae11f81
--- /dev/null
+++ b/scopes/semantics/schema/mock/default-export/index.ts
@@ -0,0 +1,9 @@
+export class Foo {
+  name = 'foo';
+
+  build(): string {
+    return 'built';
+  }
+}
+
+export default Foo;
diff --git a/scopes/semantics/schema/mock/default-export/tsconfig.json b/scopes/semantics/schema/mock/default-export/tsconfig.json
new file mode 100644
index 000000000000..c1ba11165405
--- /dev/null
+++ b/scopes/semantics/schema/mock/default-export/tsconfig.json
@@ -0,0 +1,19 @@
+{
+    "compilerOptions": {
+      "jsx": "react",
+      "experimentalDecorators": true,
+      "emitDecoratorMetadata": true,
+      "strict": true,
+      "moduleResolution": "node",
+      "module": "commonjs",
+      "target": "es2015",
+      "skipLibCheck": true,
+      "noImplicitAny": false,
+      "preserveConstEnums": true,
+      "strictPropertyInitialization": false,
+      "esModuleInterop": true,
+      "resolveJsonModule": true,
+      "sourceMap": true,
+      "outDir": "./dist"
+    }
+  }
\ No newline at end of file
diff --git a/scopes/semantics/schema/schema-diff.cmd.ts b/scopes/semantics/schema/schema-diff.cmd.ts
index f30dcc577619..ab2771685111 100644
--- a/scopes/semantics/schema/schema-diff.cmd.ts
+++ b/scopes/semantics/schema/schema-diff.cmd.ts
@@ -1,9 +1,15 @@
 import chalk from 'chalk';
 import type { Command, CommandOptions, CLIArgs } from '@teambit/cli';
+import { formatWarningSummary } from '@teambit/cli';
 import type { ComponentMain } from '@teambit/component';
 import type { Logger } from '@teambit/logger';
 import { computeAPIDiff, APIDiffStatus } from '@teambit/semantics.entities.semantic-schema-diff';
-import type { APIDiffResult, APIDiffChange, ImpactLevel } from '@teambit/semantics.entities.semantic-schema-diff';
+import type {
+  APIDiffResult,
+  APIDiffChange,
+  ImpactLevel,
+  SchemaUnavailableReason,
+} from '@teambit/semantics.entities.semantic-schema-diff';
 import type { SchemaMain } from './schema.main.runtime';
 
 export class SchemaDiffCommand implements Command {
@@ -61,13 +67,18 @@ examples:
 
     this.logger.debug(`computing API diff: ${baseId.toString()} -> ${compareId.toString()}`);
 
-    const [baseSchema, compareSchema] = await Promise.all([
-      this.schema.getSchema(baseComponent),
-      this.schema.getSchema(compareComponent),
+    // availability-aware: a version without a schema (NOT_BUILT/NO_EXTRACTOR/DISABLED/FAILED)
+    // must short-circuit with an explicit status — never be diffed as an empty API.
+    const [base, compare] = await Promise.all([
+      this.schema.getSchemaWithAvailability(baseComponent),
+      this.schema.getSchemaWithAvailability(compareComponent),
     ]);
 
     const assessor = this.schema.getImpactAssessor();
-    const diff = computeAPIDiff(baseSchema, compareSchema, assessor);
+    const diff = computeAPIDiff(base.schema, compare.schema, assessor, {
+      base: base.availability,
+      compare: compare.availability,
+    });
     return { diff, componentId: componentId.toStringWithoutVersion() };
   }
 
@@ -102,6 +113,9 @@ examples:
       componentId,
       baseVersion,
       compareVersion,
+      status: diff.status,
+      base: diff.base,
+      compare: diff.compare,
       hasChanges: diff.hasChanges,
       impact: diff.impact,
       summary: {
@@ -117,7 +131,32 @@ examples:
     };
   }
 
+  private static REASON_TEXT: Record<SchemaUnavailableReason, string> = {
+    NOT_BUILT: 'was built before API extraction — no API snapshot exists',
+    NO_EXTRACTOR: "its env doesn't provide a schema extractor",
+    DISABLED: 'has schema extraction disabled',
+    FAILED: 'API data could not be loaded',
+  };
+
+  private formatUnavailable(diff: APIDiffResult, pattern: string): string {
+    const lines = ['', `  ${formatWarningSummary(`Unable to compute API diff for ${chalk.cyan(pattern)}`)}`, ''];
+    if (!diff.base.available) {
+      lines.push(`  base version ${SchemaDiffCommand.REASON_TEXT[diff.base.reason || 'FAILED']}`);
+    }
+    if (!diff.compare.available) {
+      lines.push(`  compare version ${SchemaDiffCommand.REASON_TEXT[diff.compare.reason || 'FAILED']}`);
+    }
+    lines.push('');
+    return lines.join('\n');
+  }
+
   private formatDiffResult(diff: APIDiffResult, pattern: string): string {
+    // a missing schema is not an empty API — report which side lacks data instead of
+    // pretending "no changes" (or worse, a fabricated full-surface diff).
+    if (diff.status !== 'COMPUTED') {
+      return this.formatUnavailable(diff, pattern);
+    }
+
     if (!diff.hasChanges) {
       return chalk.green(`\n  No API changes detected for ${pattern}\n`);
     }
diff --git a/scopes/semantics/schema/schema.graphql.ts b/scopes/semantics/schema/schema.graphql.ts
index 53aa826f0f56..cb56f4bf708f 100644
--- a/scopes/semantics/schema/schema.graphql.ts
+++ b/scopes/semantics/schema/schema.graphql.ts
@@ -16,6 +16,7 @@ export function schemaSchema(schema: SchemaMain): Schema {
         impact: String!
         from: String
         to: String
+        signature: String
       }
 
       type APIDiffChange {
@@ -32,12 +33,22 @@ export function schemaSchema(schema: SchemaMain): Schema {
         changes: [APIDiffDetail!]
       }
 
+      type SchemaSideAvailability {
+        available: Boolean!
+        reason: String
+      }
+
       type APIDiffResult {
+        status: String!
+        base: SchemaSideAvailability!
+        compare: SchemaSideAvailability!
         hasChanges: Boolean!
         impact: String!
+        internalImpact: String!
         publicChanges: [APIDiffChange!]!
         internalChanges: [APIDiffChange!]!
         changes: [APIDiffChange!]!
+        unresolvedExports: [String!]!
         added: Int!
         removed: Int!
         modified: Int!
diff --git a/scopes/semantics/schema/schema.main.runtime.ts b/scopes/semantics/schema/schema.main.runtime.ts
index da7c819e669d..3ec067ed657a 100644
--- a/scopes/semantics/schema/schema.main.runtime.ts
+++ b/scopes/semantics/schema/schema.main.runtime.ts
@@ -23,7 +23,12 @@ import type { Formatter } from '@teambit/formatter';
 import type { SchemaNodeTransformer, SchemaTransformer } from '@teambit/typescript';
 import { BuildStatus, CENTRAL_BIT_HUB_NAME, SYMPHONY_GRAPHQL } from '@teambit/legacy.constants';
 import { Http } from '@teambit/scope.network';
-import type { ImpactRule, APIDiffResult } from '@teambit/semantics.entities.semantic-schema-diff';
+import type {
+  ImpactRule,
+  APIDiffResult,
+  SchemaAvailability,
+  SchemaUnavailableReason,
+} from '@teambit/semantics.entities.semantic-schema-diff';
 import { ImpactAssessor, DEFAULT_IMPACT_RULES, computeAPIDiff } from '@teambit/semantics.entities.semantic-schema-diff';
 import type { Parser } from './parser';
 import { SchemaAspect } from './schema.aspect';
@@ -141,10 +146,44 @@ export class SchemaMain {
     apiTransformers?: SchemaNodeTransformer[],
     includeFiles?: string[]
   ): Promise<APISchema> {
+    const { schema } = await this.getSchemaWithAvailability(
+      component,
+      shouldDisposeResourcesOnceDone,
+      alwaysRunExtractor,
+      tsserverPath,
+      contextPath,
+      skipInternals,
+      schemaTransformers,
+      apiTransformers,
+      includeFiles
+    );
+    return schema;
+  }
+
+  /**
+   * like getSchema, but reports whether a real schema was obtained. an empty schema
+   * with `available: false` means "no schema data exists for this version" — callers
+   * (e.g. API diff) must not treat it as an empty API surface.
+   */
+  async getSchemaWithAvailability(
+    component: Component,
+    shouldDisposeResourcesOnceDone = false,
+    alwaysRunExtractor = false,
+    tsserverPath?: string,
+    contextPath?: string,
+    skipInternals?: boolean,
+    schemaTransformers?: SchemaTransformer[],
+    apiTransformers?: SchemaNodeTransformer[],
+    includeFiles?: string[]
+  ): Promise<{ schema: APISchema; availability: SchemaAvailability }> {
     if (this.config.disabled) {
-      return APISchema.empty(component.id as any);
+      return { schema: APISchema.empty(component.id as any), availability: { available: false, reason: 'DISABLED' } };
     }
 
+    // when extraction is attempted and fails, remember why so the artifact-fallback
+    // miss below reports the actual cause rather than a generic NOT_BUILT.
+    let extractionFailure: SchemaUnavailableReason | undefined;
+
     if (alwaysRunExtractor || (this.workspace && component.buildStatus !== BuildStatus.Succeed)) {
       try {
         const env = this.envs.getEnv(component).env;
@@ -156,6 +195,7 @@ export class SchemaMain {
           },
         ]);
         if (typeof env.getSchemaExtractor === 'undefined') {
+          extractionFailure = 'NO_EXTRACTOR';
           throw new Error(`No SchemaExtractor defined for ${env.name}`);
         }
         const schemaExtractor: SchemaExtractor = env.getSchemaExtractor(
@@ -175,9 +215,10 @@ export class SchemaMain {
         });
         if (shouldDisposeResourcesOnceDone) schemaExtractor.dispose();
 
-        return result;
+        return { schema: result, availability: { available: true } };
       } catch (err) {
         if (alwaysRunExtractor) throw err;
+        extractionFailure = extractionFailure || 'FAILED';
         const message = err instanceof Error ? err.message : String(err);
         this.logger.warn(
           `failed extracting schema for ${component.id.toString()}, falling back to artifacts. extractor error: ${message}`,
@@ -201,14 +242,17 @@ export class SchemaMain {
        * when tag/snap without build
        * or backwards compatibility
        */
-      return APISchema.empty(component.id as any);
+      return {
+        schema: APISchema.empty(component.id as any),
+        availability: { available: false, reason: extractionFailure || 'NOT_BUILT' },
+      };
     }
 
     const schemaJsonStr = schemaArtifact[0].contents.toString('utf-8');
 
     try {
       const schemaJson = JSON.parse(schemaJsonStr);
-      return this.getSchemaFromObject(schemaJson);
+      return { schema: this.getSchemaFromObject(schemaJson), availability: { available: true } };
     } catch (e) {
       if (e instanceof SyntaxError) {
         this.logger.error(e.message);
@@ -277,11 +321,69 @@ export class SchemaMain {
   /**
    * Compute the semantic API diff between two component versions.
    */
+  /**
+   * in-memory memo + single-flight for computed diffs. several consumers hit this for the
+   * same immutable version pair (lane-diff status via component-compare, the compare UI's
+   * apiDiff GraphQL field) — without this, a cold page load runs schema extraction twice
+   * per pair. transient failures (FAILED availability / null) are never memoized.
+   */
+  private apiDiffMemo = new Map<string, APIDiffResult>();
+  private apiDiffInflight = new Map<string, Promise<APIDiffResult | null>>();
+  private static API_DIFF_MEMO_MAX = 500;
+
   async computeAPIDiff(baseComp: Component, compareComp: Component): Promise<APIDiffResult | null> {
+    const memoKey = `${baseComp.id.toString()}|${compareComp.id.toString()}`;
+    const cached = this.apiDiffMemo.get(memoKey);
+    if (cached) return cached;
+    const pending = this.apiDiffInflight.get(memoKey);
+    if (pending) return pending;
+
+    // un-built workspace components extract their schema from live source — the same id can
+    // yield different schemas as the user edits, so those results must not be memoized.
+    const immutable = baseComp.buildStatus === BuildStatus.Succeed && compareComp.buildStatus === BuildStatus.Succeed;
+
+    const promise = this.doComputeAPIDiff(baseComp, compareComp)
+      .then((result) => {
+        const transient =
+          !result ||
+          (result.status !== 'COMPUTED' && (result.base.reason === 'FAILED' || result.compare.reason === 'FAILED'));
+        if (!transient && immutable) {
+          if (this.apiDiffMemo.size >= SchemaMain.API_DIFF_MEMO_MAX) {
+            const firstKey = this.apiDiffMemo.keys().next().value;
+            if (firstKey) this.apiDiffMemo.delete(firstKey);
+          }
+          this.apiDiffMemo.set(memoKey, result);
+        }
+        return result;
+      })
+      .finally(() => {
+        this.apiDiffInflight.delete(memoKey);
+      });
+    this.apiDiffInflight.set(memoKey, promise);
+    return promise;
+  }
+
+  private async doComputeAPIDiff(baseComp: Component, compareComp: Component): Promise<APIDiffResult | null> {
     try {
-      const [baseSchema, compareSchema] = await Promise.all([this.getSchema(baseComp), this.getSchema(compareComp)]);
+      // a side whose schema retrieval throws is reported as FAILED availability rather than
+      // failing the whole diff — the result then carries an explicit status instead of null.
+      const getSide = async (comp: Component) => {
+        try {
+          return await this.getSchemaWithAvailability(comp);
+        } catch (err: any) {
+          this.logger.warn(`failed getting schema for ${comp.id.toString()}: ${err.message}`);
+          return {
+            schema: APISchema.empty(comp.id as any),
+            availability: { available: false, reason: 'FAILED' as SchemaUnavailableReason },
+          };
+        }
+      };
+      const [base, compare] = await Promise.all([getSide(baseComp), getSide(compareComp)]);
       const assessor = this.getImpactAssessor();
-      return computeAPIDiff(baseSchema, compareSchema, assessor);
+      return computeAPIDiff(base.schema, compare.schema, assessor, {
+        base: base.availability,
+        compare: compare.availability,
+      });
     } catch (err: any) {
       this.logger.warn(`failed computing API diff: ${err.message}`);
       return null;
diff --git a/scopes/semantics/schema/schema.spec.ts b/scopes/semantics/schema/schema.spec.ts
index a1d950e54348..5e836aaff782 100644
--- a/scopes/semantics/schema/schema.spec.ts
+++ b/scopes/semantics/schema/schema.spec.ts
@@ -59,6 +59,41 @@ describe('SchemaAspect', function () {
       expect(results).to.to.containSubset(expectedJson);
     });
   });
+  describe('default export extraction', () => {
+    // Regression: `export class Foo` + `export default Foo` must extract the default as a stable,
+    // valid `default` re-reference to Foo — not a `"Foo (default)"` alias (invalid signature +
+    // unstable diff key). Empirically driven via the real extractor on the `default-export` fixture.
+    let exports: any[];
+    before(async () => {
+      const { workspacePath } = workspaceData;
+      const compDir = path.join(workspacePath, 'default-export');
+      const src = path.join(getMockDir(), 'default-export');
+      await fs.copy(src, compDir);
+      const harmony = await loadManyAspects([WorkspaceAspect, SchemaAspect, TrackerAspect], workspacePath);
+      const ws = harmony.get<Workspace>(WorkspaceAspect.id);
+      const tracker = harmony.get<TrackerMain>(TrackerAspect.id);
+      await tracker.track({ rootDir: compDir, defaultScope: 'org.scope' });
+      await ws.bitMap.write();
+      const schemaMain = harmony.get<SchemaMain>(SchemaAspect.id);
+      const compId = await ws.resolveComponentId('default-export');
+      const comp = await ws.get(compId);
+      const api = await schemaMain.getSchema(comp, true);
+      exports = (api.toObject() as any).module.exports || [];
+    });
+
+    it('should resolve the default export to a TypeRef named "default" pointing at the class', () => {
+      const def = exports.find((e) => (e.alias || e.name) === 'default');
+      expect(def, 'a `default` export should exist').to.exist;
+      expect(def.exportNode.__schema).to.equal('TypeRefSchema');
+      expect(def.exportNode.name).to.equal('Foo');
+    });
+
+    it('should NOT bake "(default)" into any export name/alias (keeps the signature valid)', () => {
+      const withSuffix = exports.filter((e) => `${e.alias || e.name}`.includes('(default)'));
+      expect(withSuffix, 'no export should carry a "(default)" suffix in its name').to.have.lengthOf(0);
+    });
+  });
+
   describe('getSchemaFromObject', () => {
     it('should be able to deserialize an JSON object to SchemaNode instances', () => {
       const jsonPath = path.join(getMockDir(), 'button-schemas.json');
diff --git a/scopes/typescript/typescript/schema-extractor-context.ts b/scopes/typescript/typescript/schema-extractor-context.ts
index 72e72e92e794..989e5a99b92d 100644
--- a/scopes/typescript/typescript/schema-extractor-context.ts
+++ b/scopes/typescript/typescript/schema-extractor-context.ts
@@ -757,7 +757,6 @@ export class SchemaExtractorContext {
         identifier file path ${identifier.filePath}\nrelative dir ${relativeDir}\n
         absFilePath ${absFilePath}`
       );
-      return new TypeRefSchema(location, identifier.id);
     }
 
     const idKey = this.getIdentifierKey(compFilePath?.path);
diff --git a/scopes/typescript/typescript/transformers/export-assignment.ts b/scopes/typescript/typescript/transformers/export-assignment.ts
index c2d0d23305c7..451c5867a216 100644
--- a/scopes/typescript/typescript/transformers/export-assignment.ts
+++ b/scopes/typescript/typescript/transformers/export-assignment.ts
@@ -26,10 +26,15 @@ export class ExportAssignmentTransformer implements SchemaTransformer {
 
     const exportNode = await context.getTypeRef(specifier.getText(), absoluteFilePath, location);
 
+    // The export is literally named `default` in TS (`export { Foo as default }`). Use that as the
+    // schema's stable name/alias — the target symbol is preserved on the wrapped `TypeRefSchema.name`.
+    // Baking a `"Foo (default)"` label into the name instead produced an invalid signature
+    // (`export { Foo as Foo (default) }`) and an unstable diff key that flip-flopped with the
+    // extractor's fallback representation across builds (surfacing as a phantom "added" export).
     if (exportNode) {
       return new ExportSchema(
         location,
-        `${exportNode.name} (default)`,
+        'default',
         new TypeRefSchema(
           exportNode.location,
           exportNode.name,
@@ -37,12 +42,11 @@ export class ExportAssignmentTransformer implements SchemaTransformer {
           exportNode.packageName,
           exportNode.internalFilePath
         ),
-        `${exportNode.name} (default)`
+        'default'
       );
     }
 
     const schemaNode = await context.computeSchema(specifier);
-    const nodeName = schemaNode.name ? `${schemaNode.name} (default)` : 'default';
-    return new ExportSchema(location, nodeName, schemaNode, nodeName);
+    return new ExportSchema(location, 'default', schemaNode, 'default');
   }
 }
diff --git a/scopes/ui-foundation/ui/rspack/rspack.common.ts b/scopes/ui-foundation/ui/rspack/rspack.common.ts
index 58a088b9b789..25342e98dd34 100644
--- a/scopes/ui-foundation/ui/rspack/rspack.common.ts
+++ b/scopes/ui-foundation/ui/rspack/rspack.common.ts
@@ -41,6 +41,7 @@ export function resolveAlias(opts?: { profile?: boolean }): Record<string, strin
     '@teambit/api-reference.hooks.use-api': require.resolve('@teambit/api-reference.hooks.use-api'),
     '@teambit/api-reference.hooks.use-api-renderers': require.resolve('@teambit/api-reference.hooks.use-api-renderers'),
     '@teambit/lanes.hooks.use-lanes': require.resolve('@teambit/lanes.hooks.use-lanes'),
+    '@teambit/lanes.entities.lane-diff': require.resolve('@teambit/lanes.entities.lane-diff'),
   };
 }
 
diff --git a/scopes/workspace/workspace/ui/workspace/use-workspace.ts b/scopes/workspace/workspace/ui/workspace/use-workspace.ts
index 0b3c649a39f3..1244355e5a99 100644
--- a/scopes/workspace/workspace/ui/workspace/use-workspace.ts
+++ b/scopes/workspace/workspace/ui/workspace/use-workspace.ts
@@ -1,8 +1,8 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { ComponentModel } from '@teambit/component';
 import useLatest from '@react-hook/latest';
 import { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
-import { gql } from '@apollo/client';
+import { gql, useApolloClient } from '@apollo/client';
 import type { ComponentIdObj } from '@teambit/component-id';
 import { ComponentID } from '@teambit/component-id';
 
@@ -15,8 +15,15 @@ type UseWorkspaceOptions = {
 };
 type RawComponent = { id: ComponentIdObj };
 
-const wcComponentFields = gql`
-  fragment wcComponentFields on Component {
+/**
+ * Cheap, card-renderable fields only. Everything here resolves from already-loaded component
+ * metadata (id, env, aspects, compositions, preview, deprecation, server, buildStatus, description),
+ * so the light query returns fast and the grid can paint immediately. The two expensive async
+ * resolvers — `status` (getStatus(): git/scope compare) and `issuesCount` (getIssues(): dependency
+ * analysis) — are deliberately omitted here and fetched separately by `wcComponentDetailFields`.
+ */
+const wcComponentFieldsLight = gql`
+  fragment wcComponentFieldsLight on Component {
     id {
       name
       version
@@ -33,18 +40,6 @@ const wcComponentFields = gql`
       identifier
     }
     description
-    issuesCount
-    status {
-      isOutdated
-      isNew
-      isInScope
-      isStaged
-      modifyInfo {
-        hasModifiedFiles
-        hasModifiedDependencies
-      }
-      isDeleted
-    }
     buildStatus
     preview {
       includesEnvTemplate
@@ -68,40 +63,100 @@ const wcComponentFields = gql`
   }
 `;
 
-const WORKSPACE = gql`
-  query workspace {
+/**
+ * The expensive per-component fields, split out so they never block first paint. These drive the
+ * status pills (changed/building) and the issues badge, both of which gracefully degrade to a
+ * neutral "built" / no-issues state until this query resolves.
+ */
+const wcComponentDetailFields = gql`
+  fragment wcComponentDetailFields on Component {
+    id {
+      name
+      version
+      scope
+    }
+    issuesCount
+    status {
+      isOutdated
+      isNew
+      isInScope
+      isStaged
+      modifyInfo {
+        hasModifiedFiles
+        hasModifiedDependencies
+      }
+      isDeleted
+    }
+  }
+`;
+
+/**
+ * Full per-component shape (light + detail). Used by the subscriptions: a single added/changed
+ * component is cheap to fully resolve, so live updates always carry fresh status.
+ */
+const wcComponentFieldsFull = gql`
+  fragment wcComponentFieldsFull on Component {
+    ...wcComponentFieldsLight
+    ...wcComponentDetailFields
+  }
+  ${wcComponentFieldsLight}
+  ${wcComponentDetailFields}
+`;
+
+const WORKSPACE_LIGHT = gql`
+  query workspaceLight {
     workspace {
       name
       path
       icon
       components {
-        ...wcComponentFields
+        ...wcComponentFieldsLight
+      }
+    }
+  }
+  ${wcComponentFieldsLight}
+`;
+
+// The detail fields are fetched one page at a time via the existing `components(offset, limit)`
+// resolver. getStatus()/getIssues() are synchronous CPU work; fetching all 204 at once blocks the
+// server's event loop for ~5s straight (a navigation query issued during that window waited ~10s).
+// Paging it lets the loop breathe between chunks — measured ping latency dropped from ~10s to ~0.3s.
+const WORKSPACE_DETAILS_PAGE = gql`
+  query workspaceDetailsPage($offset: Int!, $limit: Int!) {
+    workspace {
+      components(offset: $offset, limit: $limit) {
+        ...wcComponentDetailFields
       }
     }
   }
-  ${wcComponentFields}
+  ${wcComponentDetailFields}
 `;
 
+// Small pages keep any single server-blocking burst under ~350ms; the gap yields the event loop so
+// other requests (navigation, lanes) are serviced promptly between pages.
+const DETAIL_CHUNK_SIZE = 15;
+const DETAIL_CHUNK_GAP_MS = 60;
+
 const COMPONENT_SUBSCRIPTION_ADDED = gql`
   subscription OnComponentAdded {
     componentAdded {
       component {
-        ...wcComponentFields
+        ...wcComponentFieldsFull
       }
     }
   }
-  ${wcComponentFields}
+  ${wcComponentFieldsFull}
 `;
 
 const COMPONENT_SUBSCRIPTION_CHANGED = gql`
   subscription OnComponentChanged {
     componentChanged {
       component {
-        ...wcComponentFields
+        ...wcComponentFieldsFull
       }
     }
   }
-  ${wcComponentFields}
+  ${wcComponentFieldsFull}
 `;
 
 const COMPONENT_SUBSCRIPTION_REMOVED = gql`
@@ -127,8 +182,86 @@ const COMPONENT_SERVER_STARTED = gql`
   }
 `;
 
+function componentKey(id: ComponentIdObj): string {
+  return `${id.scope}/${id.name}@${id.version}`;
+}
+
 export function useWorkspace(options: UseWorkspaceOptions = {}) {
-  const { data, subscribeToMore, ...rest } = useDataQuery(WORKSPACE);
+  // Light query drives first paint. cache-and-network so a revisit paints instantly from cache,
+  // then refreshes in the background (the workspace host otherwise defaults to network-only).
+  const { data, subscribeToMore, loading, ...rest } = useDataQuery(WORKSPACE_LIGHT, {
+    fetchPolicy: 'cache-and-network',
+  });
+
+  // CRITICAL: the detail data (status + issuesCount) is NOT fetched in parallel with the light query.
+  // getStatus()/getIssues() are synchronous CPU work that monopolizes the server's single-threaded
+  // event loop for several seconds on large workspaces; running it concurrently would stall the light
+  // query behind it (measured: light alone ~10ms, but ~5s when racing the detail query) and the grid
+  // would never paint early. So we wait for the light data to arrive AND for the browser to go idle
+  // (i.e. the grid has painted) before kicking off the (chunked) detail fetch in the background.
+  const [detailEnabled, setDetailEnabled] = useState(false);
+  const lightDataReady = Boolean(data?.workspace);
+  const totalComponents = data?.workspace?.components?.length ?? 0;
+
+  useEffect(() => {
+    if (!lightDataReady || detailEnabled || typeof window === 'undefined') return undefined;
+    const enable = () => setDetailEnabled(true);
+    const ric = (window as any).requestIdleCallback as
+      | ((cb: () => void, opts?: { timeout: number }) => number)
+      | undefined;
+    if (ric) {
+      const handle = ric(enable, { timeout: 1000 });
+      return () => (window as any).cancelIdleCallback?.(handle);
+    }
+    const handle = window.setTimeout(enable, 200);
+    return () => window.clearTimeout(handle);
+  }, [lightDataReady, detailEnabled]);
+
+  // Detail (status + issuesCount) is paged in once the grid has painted, with a yield between pages
+  // so the server stays responsive. Results accumulate by component key and merge in progressively —
+  // status pills and issue counts fill in chunk by chunk rather than all-or-nothing after ~5s.
+  const client = useApolloClient();
+  const [detailByKey, setDetailByKey] = useState<Map<string, { status?: any; issuesCount?: number }>>(new Map());
+
+  useEffect(() => {
+    if (!detailEnabled || !totalComponents) return undefined;
+    let cancelled = false;
+
+    (async () => {
+      for (let offset = 0; offset < totalComponents; offset += DETAIL_CHUNK_SIZE) {
+        if (cancelled) return;
+        try {
+          const res = await client.query({
+            query: WORKSPACE_DETAILS_PAGE,
+            variables: { offset, limit: DETAIL_CHUNK_SIZE },
+            fetchPolicy: 'network-only',
+          });
+          if (cancelled) return;
+          const comps: { id: ComponentIdObj; status?: any; issuesCount?: number }[] =
+            res.data?.workspace?.components ?? [];
+          if (comps.length) {
+            setDetailByKey((prev) => {
+              const next = new Map(prev);
+              for (const c of comps) next.set(componentKey(c.id), { status: c.status, issuesCount: c.issuesCount });
+              return next;
+            });
+          }
+        } catch {
+          // a failed page must not abort the rest of the pages
+        }
+        if (cancelled) return;
+        // yield the server event loop between pages
+        await new Promise((resolve) => {
+          setTimeout(resolve, DETAIL_CHUNK_GAP_MS);
+        });
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [detailEnabled, totalComponents, client]);
+
   const optionsRef = useLatest(options);
 
   useEffect(() => {
@@ -243,11 +376,30 @@ export function useWorkspace(options: UseWorkspaceOptions = {}) {
   }, [optionsRef]);
 
   const workspace = useMemo(() => {
-    return data?.workspace ? Workspace.from(data?.workspace) : undefined;
-  }, [data?.workspace]);
+    const rawWorkspace = data?.workspace;
+    if (!rawWorkspace) return undefined;
+
+    // Merge the paged-in heavy fields (status, issuesCount) onto the light components by id.
+    // Components are not normalized in the Apollo cache (their `id` is an object, not a scalar key),
+    // so the detail pages are accumulated in `detailByKey` and merged here by hand. The light
+    // component wins when it already carries a value — a live subscription update (full fragment)
+    // refreshes status there, and the paged detail is only the initial enrichment.
+    const components = rawWorkspace.components.map((component: any) => {
+      const detail = detailByKey.get(componentKey(component.id));
+      if (!detail) return component;
+      return {
+        ...component,
+        status: component.status ?? detail.status,
+        issuesCount: component.issuesCount ?? detail.issuesCount,
+      };
+    });
+
+    return Workspace.from({ ...rawWorkspace, components });
+  }, [data?.workspace, detailByKey]);
 
   return {
     workspace,
+    loading,
     subscribeToMore,
     ...rest,
   };
diff --git a/scopes/workspace/workspace/ui/workspace/workspace-overview/index.ts b/scopes/workspace/workspace/ui/workspace/workspace-overview/index.ts
index d1626d6e625d..47bd2715d9db 100644
--- a/scopes/workspace/workspace/ui/workspace/workspace-overview/index.ts
+++ b/scopes/workspace/workspace/ui/workspace/workspace-overview/index.ts
@@ -1,2 +1,2 @@
 export { WorkspaceOverview } from './workspace-overview';
-export { useQueryParamWithDefault, useListParamWithDefault } from './use-query-param-with-default';
+export { useQueryParamWithDefault, useListParamWithDefault } from '@teambit/explorer.ui.components-overview';
diff --git a/scopes/workspace/workspace/ui/workspace/workspace-overview/link-plugin.ts b/scopes/workspace/workspace/ui/workspace/workspace-overview/link-plugin.ts
deleted file mode 100644
index d3972de63c0c..000000000000
--- a/scopes/workspace/workspace/ui/workspace/workspace-overview/link-plugin.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export class LinkPlugin {
-  link(id) {
-    return `${id.fullName}?scope=${id.scope}`;
-  }
-}
diff --git a/scopes/workspace/workspace/ui/workspace/workspace-overview/scope-sort.ts b/scopes/workspace/workspace/ui/workspace/workspace-overview/scope-sort.ts
deleted file mode 100644
index 6862a4056e0e..000000000000
--- a/scopes/workspace/workspace/ui/workspace/workspace-overview/scope-sort.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export function sortScopes(scopes: string[]) {
-  const designPrefix = 'design';
-
-  const nonDesign = scopes.filter((s) => !s.includes(designPrefix)).sort((a, b) => a.localeCompare(b));
-
-  const design = scopes.filter((s) => s.includes(designPrefix)).sort((a, b) => a.localeCompare(b));
-
-  return [...nonDesign, ...design];
-}
diff --git a/scopes/workspace/workspace/ui/workspace/workspace-overview/workspace-overview.sort.ts b/scopes/workspace/workspace/ui/workspace/workspace-overview/workspace-overview.sort.ts
deleted file mode 100644
index 852f581906db..000000000000
--- a/scopes/workspace/workspace/ui/workspace/workspace-overview/workspace-overview.sort.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-const PRIORITY_HIGH = ['ui', 'pages'];
-const PRIORITY_MED = ['design'];
-const PRIORITY_LOW = ['entities', 'provider', 'hooks', 'icons'];
-
-function root(ns: string) {
-  if (!ns) return '';
-  return ns.split('/')[0];
-}
-
-function priorityOf(ns: string) {
-  const r = root(ns);
-
-  if (PRIORITY_HIGH.includes(r)) return 0;
-  if (PRIORITY_MED.includes(r)) return 1;
-  if (PRIORITY_LOW.includes(r)) return 3;
-
-  return 2;
-}
-
-export function sortNamespacesAdvanced(arr: string[]) {
-  return [...arr].sort((a, b) => {
-    const pa = priorityOf(a);
-    const pb = priorityOf(b);
-
-    if (pa !== pb) return pa - pb;
-
-    return a.localeCompare(b);
-  });
-}
diff --git a/scopes/workspace/workspace/ui/workspace/workspace-overview/workspace-overview.tsx b/scopes/workspace/workspace/ui/workspace/workspace-overview/workspace-overview.tsx
index 500fb8d503b8..2aa88c877d5f 100644
--- a/scopes/workspace/workspace/ui/workspace/workspace-overview/workspace-overview.tsx
+++ b/scopes/workspace/workspace/ui/workspace/workspace-overview/workspace-overview.tsx
@@ -1,116 +1,23 @@
-import React, { useContext, useMemo } from 'react';
-import { ComponentGrid } from '@teambit/explorer.ui.gallery.component-grid';
-// Legacy empty state — kept around as a fallback while the new blank state rolls out.
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { EmptyWorkspace } from '@teambit/workspace.ui.empty-workspace';
-import compact from 'lodash.compact';
-import { ScopeID } from '@teambit/scopes.scope-id';
-import { useCloudScopes } from '@teambit/cloud.hooks.use-cloud-scopes';
+import React, { useContext } from 'react';
 import { useWorkspaceMode } from '@teambit/workspace.ui.use-workspace-mode';
+import { ComponentsOverview } from '@teambit/explorer.ui.components-overview';
 import { WorkspaceContext } from '../workspace-context';
-import { useWorkspaceAggregation } from './use-workspace-aggregation';
-import { useQueryParamWithDefault, useListParamWithDefault } from './use-query-param-with-default';
-import { NamespaceHeader } from './namespace-header';
-import { HopeComponentCard } from './hope-component-card';
-import type { AggregationType } from './workspace-overview.types';
-import { WorkspaceFilterPanel } from './workspace-filter-panel';
 import { WorkspaceBlankState } from './workspace-blank-state';
-import styles from './workspace-overview.module.scss';
 
 export function WorkspaceOverview() {
   const workspace = useContext(WorkspaceContext);
   const { components, componentDescriptors } = workspace;
-
   const { isMinimal } = useWorkspaceMode();
-  const uniqueScopes = [...new Set(components.map((c) => c.id.scope))];
-  const { cloudScopes } = useCloudScopes(uniqueScopes);
-  const cloudMap = new Map((cloudScopes || []).map((s) => [s.id.toString(), s]));
-
-  const compDescriptorMap = new Map(componentDescriptors.map((d) => [d.id.toString(), d]));
-
-  const items = compact(
-    components.map((component) => {
-      if (component.deprecation?.isDeprecate) return null;
-
-      const descriptor = compDescriptorMap.get(component.id.toString());
-      if (!descriptor) return null;
-
-      const cloudScope = cloudMap.get(component.id.scope);
-      const scope =
-        cloudScope ||
-        (ScopeID.isValid(component.id.scope) && { id: ScopeID.fromString(component.id.scope) }) ||
-        undefined;
-
-      return {
-        component,
-        componentDescriptor: descriptor,
-        scope: scope
-          ? { id: scope.id, icon: (scope as any).icon, backgroundIconColor: (scope as any).backgroundIconColor }
-          : undefined,
-      };
-    })
-  );
-
-  const [aggregation, setAggregation] = useQueryParamWithDefault<AggregationType>('aggregation', 'namespaces');
-  const [activeNamespaces, setActiveNamespaces] = useListParamWithDefault('ns');
-  const [activeScopes, setActiveScopes] = useListParamWithDefault('scopes');
-
-  const filters = useMemo(
-    () => ({ namespaces: activeNamespaces, scopes: activeScopes, statuses: new Set() as any }),
-    [activeNamespaces, activeScopes]
-  );
-
-  const { groups, groupType, availableAggregations, filteredCount } = useWorkspaceAggregation(
-    items,
-    aggregation,
-    filters
-  );
 
   if (!components.length) return <WorkspaceBlankState />;
 
   return (
-    <div className={styles.container}>
-      <WorkspaceFilterPanel
-        aggregation={aggregation}
-        onAggregationChange={setAggregation}
-        availableAggregations={availableAggregations}
-        items={items}
-        activeNamespaces={activeNamespaces}
-        onNamespacesChange={setActiveNamespaces}
-        activeScopes={activeScopes}
-        onScopesChange={setActiveScopes}
-      />
-
-      <div className={styles.content}>
-        {filteredCount === 0 && <WorkspaceBlankState />}
-
-        {groups.map((group) => (
-          <section key={group.name} className={styles.section}>
-            {groupType !== 'none' && (
-              <div className={styles.sectionHeader}>
-                <NamespaceHeader
-                  namespace={group.name}
-                  items={group.items}
-                  scopeIcon={group.scopeIcon}
-                  scopeIconColor={group.scopeIconColor}
-                />
-              </div>
-            )}
-
-            <ComponentGrid className={styles.cardGrid}>
-              {group.items.map((item) => (
-                <HopeComponentCard
-                  key={item.component.id.toString()}
-                  component={item.component}
-                  componentDescriptor={item.componentDescriptor}
-                  scope={item.scope as any}
-                  showPreview={isMinimal}
-                />
-              ))}
-            </ComponentGrid>
-          </section>
-        ))}
-      </div>
-    </div>
+    <ComponentsOverview
+      components={components}
+      componentDescriptors={componentDescriptors}
+      showPreview={isMinimal}
+      storageNamespace="workspace-overview"
+      emptyState={<WorkspaceBlankState />}
+    />
   );
 }
diff --git a/scopes/workspace/workspace/ui/workspace/workspace-skeleton.module.scss b/scopes/workspace/workspace/ui/workspace/workspace-skeleton.module.scss
new file mode 100644
index 000000000000..0c5bb7c45bda
--- /dev/null
+++ b/scopes/workspace/workspace/ui/workspace/workspace-skeleton.module.scss
@@ -0,0 +1,102 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+  background: var(--background-color, #fff);
+}
+
+/* ---- Top bar ---- */
+
+.topbar {
+  flex: none;
+  display: flex;
+  align-items: center;
+  height: 48px;
+  border-bottom: 1px solid var(--border-medium-color, #e6e6e6);
+}
+
+.corner {
+  width: 246px;
+  height: 100%;
+  flex: none;
+  border-right: 1px solid var(--border-medium-color, #e6e6e6);
+  background: color-mix(in srgb, var(--on-background-color, #000) 3%, transparent);
+}
+
+.topbarNav {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 0 24px;
+}
+
+.navItem {
+  width: 64px;
+  height: 12px;
+  border-radius: 4px;
+  background: var(--surface01-color, color-mix(in srgb, var(--on-background-color, #000) 6%, transparent));
+}
+
+/* ---- Main: sidebar + content ---- */
+
+.main {
+  flex: 1 1;
+  display: flex;
+  min-height: 0;
+}
+
+.sidebar {
+  width: 246px;
+  flex: none;
+  border-right: 1px solid var(--border-medium-color, #e6e6e6);
+  padding: 16px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  overflow: hidden;
+}
+
+.sidebarSearch {
+  height: 30px;
+  border-radius: 8px;
+  background: var(--surface01-color, color-mix(in srgb, var(--on-background-color, #000) 6%, transparent));
+  margin-bottom: 6px;
+}
+
+.sidebarRow {
+  height: 11px;
+  border-radius: 4px;
+  background: var(--surface01-color, color-mix(in srgb, var(--on-background-color, #000) 6%, transparent));
+}
+
+.content {
+  flex: 1 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* gentle pulse across the whole shell so it reads as loading */
+.sidebar,
+.topbarNav,
+.corner {
+  animation: pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.65;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sidebar,
+  .topbarNav,
+  .corner {
+    animation: none;
+  }
+}
diff --git a/scopes/workspace/workspace/ui/workspace/workspace-skeleton.tsx b/scopes/workspace/workspace/ui/workspace/workspace-skeleton.tsx
new file mode 100644
index 000000000000..0dead718b91d
--- /dev/null
+++ b/scopes/workspace/workspace/ui/workspace/workspace-skeleton.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { ComponentsOverviewSkeleton } from '@teambit/explorer.ui.components-overview';
+import styles from './workspace-skeleton.module.scss';
+
+/**
+ * Full-shell loading placeholder shown while the (light) workspace query resolves. Mirrors the real
+ * workspace chrome — top bar, sidebar column, content grid — so there is no blank flash and no
+ * layout shift when the live UI takes over. Previously this gap rendered an empty `<div>`, which
+ * read as a frozen/blank screen on slower workspaces.
+ */
+export function WorkspaceSkeleton() {
+  return (
+    <div className={styles.wrapper} aria-busy="true" aria-live="polite">
+      <div className={styles.topbar}>
+        <div className={styles.corner} />
+        <div className={styles.topbarNav}>
+          <span className={styles.navItem} />
+          <span className={styles.navItem} />
+          <span className={styles.navItem} />
+        </div>
+      </div>
+      <div className={styles.main}>
+        <div className={styles.sidebar}>
+          <span className={styles.sidebarSearch} />
+          {Array.from({ length: 10 }).map((_, i) => (
+            <span key={i} className={styles.sidebarRow} style={{ width: `${55 + ((i * 13) % 35)}%` }} />
+          ))}
+        </div>
+        <div className={styles.content}>
+          <ComponentsOverviewSkeleton count={12} />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/scopes/workspace/workspace/ui/workspace/workspace.tsx b/scopes/workspace/workspace/ui/workspace/workspace.tsx
index d29282c8b295..fe8d9c704449 100644
--- a/scopes/workspace/workspace/ui/workspace/workspace.tsx
+++ b/scopes/workspace/workspace/ui/workspace/workspace.tsx
@@ -24,6 +24,7 @@ import { useNavigationMessageListener } from '@teambit/workspace.hooks.use-navig
 import { useWorkspace } from './use-workspace';
 import { WorkspaceOverview } from './workspace-overview';
 import { WorkspaceProvider } from './workspace-provider';
+import { WorkspaceSkeleton } from './workspace-skeleton';
 import styles from './workspace.module.scss';
 import type { WorkspaceUI } from '../../workspace.ui.runtime';
 import { ThemeFromUrlSync } from './theme-from-url';
@@ -81,15 +82,15 @@ export function Workspace({ routeSlot, menuSlot, sidebar, workspaceUI, onSidebar
   }, [isMinimal]);
 
   const location = useLocation();
-
-  if (!workspace) {
-    return <div className={styles.emptyContainer}></div>;
-  }
-
-  workspaceUI.setComponents(workspace.components);
   const inIframe = typeof window !== 'undefined' && window.parent && window.parent !== window;
   const isOverview = location.pathname === '/' || location.pathname === '';
   const showTopBar = !isMinimal || (isMinimal && !isOverview);
+  if (!workspace) {
+    // While the light workspace query resolves, show a full-shell skeleton instead of a blank
+    // screen. The heavy per-component data (status, issues) streams in after first paint.
+    return <WorkspaceSkeleton />;
+  }
+  workspaceUI.setComponents(workspace.components);
 
   return (
     <WorkspaceProvider workspace={workspace}>
diff --git a/scopes/workspace/workspace/workspace-aspects-loader.ts b/scopes/workspace/workspace/workspace-aspects-loader.ts
index 5a56d2bea08c..5016fd07026f 100644
--- a/scopes/workspace/workspace/workspace-aspects-loader.ts
+++ b/scopes/workspace/workspace/workspace-aspects-loader.ts
@@ -206,8 +206,6 @@ needed-for: ${neededFor || '<unknown>'}. using opts: ${JSON.stringify(mergedOpts
     } catch (err: any) {
       this.throwWsJsoncAspectNotFoundError(err);
       return scopeAspectIds;
-
-      throw err;
     }
   }
 
diff --git a/workspace.jsonc b/workspace.jsonc
index bba8708fdec5..85de7e5cc350 100644
--- a/workspace.jsonc
+++ b/workspace.jsonc
@@ -86,6 +86,8 @@
         "@rspack/core": "^1.7.7",
         "@rspack/dev-server": "1.2.1",
         "@rspack/plugin-react-refresh": "1.6.0",
+        "@shikijs/engine-javascript": "^3.0.0",
+        "@shikijs/langs": "^3.0.0",
         "@svgr/webpack": "8.1.0",
         "@teambit/any-fs": "0.0.5",
         "@teambit/api-reference.explorer.api-reference-explorer": "^0.0.39",
@@ -189,7 +191,6 @@
         "@teambit/component.ui.component-compare.utils.sort-logs": "^0.0.8",
         "@teambit/component.ui.component-compare.utils.sort-tabs": "0.0.104",
         "@teambit/component.ui.component-deprecated": "^0.0.41",
-        "@teambit/component.ui.component-meta": "^0.0.368",
         "@teambit/component.ui.component-size": "^0.0.77",
         "@teambit/component.ui.component-status-resolver": "^0.0.510",
         "@teambit/component.ui.deprecation-icon": "^0.0.509",
@@ -222,6 +223,7 @@
         "@teambit/design.inputs.input-text": "^1.1.5",
         "@teambit/design.inputs.selectors.checkbox-item": "1.2.0",
         "@teambit/design.inputs.selectors.menu-item": "^1.1.0",
+        "@teambit/design.inputs.selectors.multi-select": "^2.0.17",
         "@teambit/design.inputs.text-area": "^0.0.20",
         "@teambit/design.inputs.toggle-button": "0.0.16",
         "@teambit/design.inputs.toggle-switch": "^0.0.9",
@@ -288,8 +290,6 @@
         "@teambit/harmony": "0.4.11",
         "@teambit/html.modules.inject-html-element": "0.0.6",
         "@teambit/lane-id": "~0.0.312",
-        "@teambit/lanes.ui.compare.lane-compare": "^0.0.206",
-        "@teambit/lanes.ui.compare.lane-compare-page": "^0.0.174",
         "@teambit/lanes.ui.icons.lane-icon": "^0.0.9",
         "@teambit/lanes.ui.lane-details": "^0.0.205",
         "@teambit/lanes.ui.menus.lanes-overview-menu": "^0.0.11",
@@ -344,7 +344,6 @@
         "@teambit/ui-foundation.ui.empty-component-gallery": "^0.0.512",
         "@teambit/ui-foundation.ui.full-loader": "^0.0.500",
         "@teambit/ui-foundation.ui.global-loader": "^0.0.502",
-        "@teambit/ui-foundation.ui.hooks.use-data-query": "^0.0.506",
         "@teambit/ui-foundation.ui.hooks.use-is-mobile": "^0.0.200",
         "@teambit/ui-foundation.ui.hooks.use-user-agent": "^0.0.200",
         "@teambit/ui-foundation.ui.is-browser": "^0.0.500",
@@ -625,6 +624,7 @@
         "semver-intersect": "1.4.0",
         "semver-range-intersect": "0.3.1",
         "serialize-error": "5.0.0",
+        "shiki": "^3.0.0",
         "simple-git": "^3.28.0",
         "sinon": "17.0.1",
         "socks-proxy-agent": "5.0.0",