feat(lanes | component): redesign the changes & compare experience

[luvkapur]

Reworks how changes are viewed across the app: the single-component compare, the lane compare, and the workspace/lane overviews, onto one shared, bulk-fetched implementation, and replaces the Monaco-based code diff with a lean shiki-based viewer. It also brings the semantic API diff into the compare surface as a first-class view, and fixes lane-vs-main comparison. The goal was best-in-class feature and performance parity for reviewing changes, with Bit's own tokens, theme, and identity.

Unified compare surface

• InlineComponentCompare is now the single implementation shared by the single-component compare page and lane-compare: one set of view-mode tabs (Code / Preview / Docs / Dependencies / Tests / Config / API), one diff pane, one toolbar.
• Which views appear is driven by real per-view content counts (changed files, compositions, changed aspects, dep changes, and so on), so a reviewer never lands on an empty view, mirroring the cloud changes view.
• View switching is instant: panels are all mounted and shown/hidden purely via a data-view-mode attribute plus CSS, so a mode click never remounts or re-fetches (fixes the "switching is slow" and console-error regressions).
• DiffModeProvider/useDiffMode gives a single global split/unified toggle across every file instead of a per-file one.

Comparing a lane against main

• Lane-vs-main compare no longer depends on main's version being in the local scope: base resolution (getHeadOnMain / importMainHeads) falls back to the remote default-lane ref and bulk-imports the missing main heads, so lane-only components whose main version was never fetched are compared correctly instead of being misclassified as new or "no changes".
• Fixed two separate "shows no changes vs main" bugs. First, skipUpToDate was dropping every component of a lane that is forked and ahead of main: a forward-only lane has no target-only snaps, so each read as up-to-date and got filtered out; source-ahead components are now kept. Second, the diffStatus result-memo key was derived from Lane.hash (a method, not the raw hash), so it never invalidated when the lane or main advanced and served a stale empty result; it is now keyed on the real hash plus main heads.
• The main-to-lane merge direction uses the same remote-aware getHeadOnMain, so "merge from main" no longer drops components without a local main head.
• New per-pair source indicator (baseSource: 'workspace' | 'scope'): a small cloud badge on the sidebar row marks bases resolved from the remote scope versus the local workspace.

Bulk data fetching

• New CompareDataProvider plus a bulk compareComponents(pairs) GraphQL query fetch code/aspect/test diffs for all component pairs in one paginated call, keyed by compareId; inline panels read from this context instead of firing per-file queries.
• FileRegistry context feeds the sidebar file tree from the same bulk result.
• On large lanes (a 204-component lane vs main), cold changes derivation dropped from about 47s to about 8s: diff raw Version objects instead of fully loading both components, defer the (UI-unused) API change-type off the critical path, and lift the artificial concurrency cap. A client render loop in the file registry was also removed via useSyncExternalStore plus a version-guarded notify.

New code diff viewer (no Monaco)

• New teambit.code/ui/diff-viewer built on shiki's createHighlighterCore plus @shikijs/engine-javascript (WASM-free JS regex engine, grammars code-split per language), far leaner than the Monaco diff it replaces.
• Fully themed with Bit's own design tokens: each token scope is painted a sentinel that resolves to a Bit design-system CSS var, so highlighting follows light/dark automatically with zero hardcoded syntax colors.
• Split/unified, intra-line token-level diff, expand-context, soft-wrap. Wired into the Code tab via inline-code-compare (Monaco still backs the live code editor, untouched). Adds jsonc/json5 highlighting for config files.

Semantic API diff view

• The API diff is now an on-demand view mode in the compare surface, gated so it only appears when there is something to show: real changes, unresolved exports, or a per-version schema gap.
• Change blocks cluster member changes by severity (breaking, minor, patch); additions and removals render their actual signature as a syntax-highlighted snippet (collapsed by kind), modifications keep the token-level before/after, and documentation changes show the removed/added JSDoc alongside the declaration it belongs to.
• Distinct, unambiguous states: "No API changes" (identical), "Schema unavailable" (one version could not be read, for example built before API extraction), "couldn't be analyzed" (extraction gaps), and a calm blank state when neither side exposes an API. A couldn't-compute is never dressed up as a verified no-op.

API diff correctness

• Fixed a phantom "X (default) added to public API" on docs-only diffs: export default X was extracted inconsistently across builds (UnImplementedSchema versus a "X (default)" TypeRefSchema alias). The extractor now emits a stable default re-reference, and the diff is made robust to historical artifacts: it filters UnImplementedSchema exports, dedupes redundant re-export aliases, and surfaces genuinely-unresolved exports instead of diffing them.
• Doc diffs now include JSDoc tags (@see, and so on), not just the description.

Base / compare resolution

• Default base is the previous published version and compare is the live workspace (on-disk, including uncommitted), so the default compare shows what changed since the last version. Selecting a version in the main dropdown (?version) points the compare side at that clean version instead.
• Server computeCompare diffs against on-disk files when the compare side is the checked-out workspace (compareIsLiveWorkspace); those mutable diffs are never cached.

Shared overviews

• workspace-overview and lane-overview now consume one shared components-overview component instead of duplicating the grid/card logic.

[qodo-free-for-open-source-projects]

Code review by qodo was updated up to the latest commit 7b5b858

[qodo-free-for-open-source-projects]

Code review by qodo was updated up to the latest commit 95ba129

[qodo-free-for-open-source-projects]

Code review by qodo was updated up to the latest commit 9e79e8c

[qodo-free-for-open-source-projects]

Code Review by Qodo

New Review Started

This review has been superseded by a new analysis

[qodo-free-for-open-source-projects]

Code review by qodo was updated up to the latest commit 656ee41

[qodo-free-for-open-source-projects]

Code review by qodo was updated up to the latest commit 6997023

[qodo-free-for-open-source-projects]

Code review by qodo was updated up to the latest commit 5b52d6b

[qodo-free-for-open-source-projects]

Code review by qodo was updated up to the latest commit b4e7b09

[qodo-free-for-open-source-projects]

1. Unformatted mock tsconfig.json 📘 Rule violation ⚙ Maintainability

The newly added scopes/semantics/schema/mock/default-export/tsconfig.json is not
Prettier-formatted (indentation does not match the repo’s Prettier settings), which is likely to
fail npm run prettier:check / the lint gate.

Agent Prompt

## Issue description
The new `tsconfig.json` fixture is not formatted according to the repository’s Prettier configuration, which can fail `npm run prettier:check`.

## Issue Context
Compliance requires PR changes to pass the repo lint + typecheck gate and adhere to Prettier formatting.

## Fix Focus Areas
- scopes/semantics/schema/mock/default-export/tsconfig.json[1-19]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

[qodo-free-for-open-source-projects]

2. Unbounded compare cache 🐞 Bug ☼ Reliability

ComponentCompareMain now persists compare/api-diff results via CacheMain.set() without a TTL, so
every unique (baseId, compareId) pair can remain on disk indefinitely under CACHE_ROOT. Because
these results can include large diffOutput plus baseContent/compareContent, the cache can grow
without bound over time and add serialization overhead on compare-heavy workloads.

Agent Prompt

### Issue description
`ComponentCompareMain.getOrCompute()` writes compare/API-diff results into the persistent `@teambit/cache` store without any TTL. `CacheMain.set()` treats `ttl` as optional and stores entries with `expire = null` when omitted, which makes them effectively permanent. Since compare results may include large per-file `diffOutput` and even full `baseContent`/`compareContent`, this can lead to unbounded cache growth under `CACHE_ROOT`.

### Issue Context
The new bulk compare implementation increases the number of cached entries dramatically (many pairs per lane/workspace view). Without a TTL or an eviction/size policy, the cache directory can grow over time and eventually impact disk usage and server stability.

### Fix Focus Areas
- scopes/component/component-compare/component-compare.main.runtime.ts[89-112]
- scopes/harmony/cache/cache.main.runtime.ts[34-40]

### Suggested fix
1. Introduce a bounded caching strategy for compare results and API diffs, e.g.:
   - Add a configurable TTL (e.g. `compareCacheTtlMs`, `apiDiffCacheTtlMs`) and pass it to `cache.set(cacheKey, result, ttl)`.
   - Optionally avoid persisting the heaviest fields (e.g. omit `baseContent`/`compareContent` from cached payloads, or only cache when payload size is under a threshold).
2. (If TTL isn’t acceptable) implement an explicit eviction policy in `CacheMain` (e.g. periodic cleanup / max size), but TTL is the minimal safe change here.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

[qodo-free-for-open-source-projects]

Code review by qodo was updated up to the latest commit bee92f6

[qodo-free-for-open-source-projects]

1. Large intra-line dp alloc 🐞 Bug ➹ Performance

intraLineDiff() allocates a full (m+1)×(n+1) DP matrix (nested JS arrays) for token-level LCS when
m*n <= 1_000_000, which can still cause significant jank/memory pressure on long/minified lines
because this runs for each del/add line pair in a change block.

Agent Prompt

### Issue description
`components/ui/diff-viewer/diff-model.ts` implements intra-line highlighting using an LCS DP table allocated as a full 2D `(m+1)×(n+1)` matrix of JS numbers/arrays. Even with `MAX_INTRA_LINE_CELLS = 1_000_000`, this can still allocate many arrays and a large number of boxed numbers per changed-line pair, creating avoidable UI jank and memory pressure.

### Issue Context
This code executes on the UI thread and may run multiple times per diff block (paired del/add lines). The current cap avoids the worst pathological cases, but the allowed maximum is still large enough to be expensive in JS.

### Fix Focus Areas
- components/ui/diff-viewer/diff-model.ts[101-173]

### Suggested fix approach
- Replace the full 2D DP allocation with a space-optimized DP (two-row rolling arrays), ideally using typed arrays (`Uint16Array`/`Uint32Array`) to reduce overhead.
- Alternatively (or additionally), reduce `MAX_INTRA_LINE_CELLS` to a safer bound for browser memory/CPU, and/or add an additional cap on token count (not only char count).
- Keep the current fallback behavior (returning no intra-line ranges) when the caps are exceeded.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

[qodo-free-for-open-source-projects]

Code review by qodo was updated up to the latest commit 78f523b

[qodo-free-for-open-source-projects]

1. use-bulk-paged-query test uses .spec.tsx 📘 Rule violation ⚙ Maintainability

A new unit test was added as a .spec.tsx file instead of the required .spec.ts naming
convention. This diverges from the repository’s unit test organization standard and can make test
discovery/consistency harder.

Agent Prompt

## Issue description
A new unit test was introduced as `use-bulk-paged-query.spec.tsx`, but the compliance checklist requires unit tests to be written as `.spec.ts` files alongside the source.

## Issue Context
The current test uses JSX for the `wrapper`, which is why it was created as `.tsx`. If the repo standard is strictly `.spec.ts`, refactor to avoid JSX (e.g., `React.createElement(...)`) and rename the file to `.spec.ts`.

## Fix Focus Areas
- components/ui/hooks/use-bulk-paged-query/use-bulk-paged-query.spec.tsx[1-29]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

[qodo-free-for-open-source-projects]

2. Invalid sort comparator 🐞 Bug ≡ Correctness

deriveChangeTypes() canonicalizes unordered data using an Array.sort() comparator that never
returns 0, violating the comparator contract for equal elements and making ordering undefined when
two normalized items stringify identically. This can lead to unstable canonical strings and
therefore flaky change-type classification in those collision cases.

Agent Prompt

### Issue description
`canonical()` uses `sort((x,y)=> JSON.stringify(x) < JSON.stringify(y) ? -1 : 1)` which never returns `0` when the keys are equal. This violates the `Array.sort()` comparator requirements and makes the order undefined when two normalized elements stringify to the same value.

### Issue Context
This comparator is used to build a canonical string representation for unordered structures in `deriveChangeTypes()`. If canonicalization is unstable in collision cases, `differsUnordered()` can intermittently report differences.

### Fix Focus Areas
- scopes/lanes/lanes/lanes.main.runtime.ts[1710-1724]

### Suggested fix
Change the comparator to return `0` when equal (and ideally avoid repeated `JSON.stringify` calls):
- Compute `sx`/`sy` once per comparison.
- Return `0` when `sx === sy`, otherwise `sx < sy ? -1 : 1`.
Optionally, for performance and determinism, map items to `{key, value}` pairs, sort by `key`, then pluck `value`.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

[qodo-free-for-open-source-projects]

3. Unknown changes shown none 🐞 Bug ≡ Correctness

When the server cannot derive change types it returns changes = undefined (explicitly not “no
changes”), but useLaneDiffStatus() coerces missing changes to [] and
LaneComponentDiff.changeType then treats [] as ChangeType.NONE. This loses the
“unknown/unclassified” state and can incorrectly surface components as having no changes after
transient derivation failures.

Agent Prompt

### Issue description
The lane-diff pipeline currently collapses `changes: undefined/null` (meaning “couldn’t classify / not computed”) into an empty array in the UI hook. Downstream, the lane-diff model treats an empty array as `NONE`, which misrepresents uncertainty as a confirmed no-op.

### Issue Context
On the server, `deriveChangeTypes()` can return `undefined` when it can’t load the required `Version` objects (transient). That undefined is meaningful and should not be mapped to “no changes”.

### Fix Focus Areas
- components/ui/compare/lane-compare-hooks/use-lane-diff-status/use-lane-diff-status.ts[84-91]
- scopes/lanes/lanes/lanes.main.runtime.ts[1697-1701]
- scopes/lanes/entities/lane-diff/lane-component-diff.ts[46-53]

### Suggested fix
Implement a tri-state representation end-to-end:
1) In `useLaneDiffStatus`, do **not** coerce missing `c.changes` to `[]`. Preserve `null/undefined` (e.g. `changes: c.changes ?? null`).
2) Update the lane-diff entities (`PlainLaneComponentDiff` / `LaneComponentDiff`) to allow `changes` to be nullable/optional and introduce an explicit “unclassified/unknown” handling path.
3) Ensure UI filtering/grouping does not treat “unknown” as `NONE` and does not hide those components silently (e.g. show a dedicated state/badge or keep them visible under a separate group).

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

[qodo-free-for-open-source-projects]

Code review by qodo was updated up to the latest commit 5ea49d3