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 136e5fe

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

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

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

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

[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 1234e2a

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

Code review by qodo was updated up to the latest commit 56b4a56

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

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

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

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

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

Code review by qodo was updated up to the latest commit 85133fb

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

1. Stale default tab state 🐞 Bug ≡ Correctness

LaneCompareProvider’s defaultLaneState() reads tabs but its useCallback deps omit tabs, so
lazy-loaded/updated tab definitions won’t be reflected and lane compare panels can keep an
undefined/stale default tab selection.

Agent Prompt

### Issue description
`defaultLaneState` uses `tabs` (`extractLazyLoadedData(tabs)`) but `tabs` is not included in the `useCallback` dependency array. This can cause stale closures where the provider never picks up newly loaded/updated tabs and never re-initializes panel state accordingly.

### Issue Context
Tabs can be `MaybeLazyLoaded<TabItem[]>`, so they may resolve after initial render. With the current deps, `defaultLaneState` can keep using the initial (often empty) `tabs` value.

### Fix Focus Areas
- Update hook dependencies and state re-init triggers
  - components/ui/compare/lane-compare/lane-compare.provider.tsx[84-143]

### Suggested fix
- Include `tabs` (and any other referenced values like `sortTabs` if not stable) in `defaultLaneState`’s deps.
- Consider memoizing `sortedTabs` via `useMemo` and depend on that instead.
- Ensure the `useEffect` that rebuilds `laneCompareState` also re-runs when the effective tab list changes (e.g., include `tabs`/`sortedTabs`/`defaultLaneState` in deps).

ⓘ 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 7b5b858

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

1. Crlf breaks diff lines 🐞 Bug ≡ Correctness

computeDiffLines() splits on \n but doesn’t strip \r, so CRLF-formatted files will produce
line text with trailing \r, leading to visibly wrong rendering and potentially incorrect
intra-line highlighting/line-width calculations in the new DiffViewer. This is a real input case
in this repo (it explicitly preserves CRLF formatting in other tooling).

Agent Prompt

### Issue description
`computeDiffLines()` treats `\r` as part of the line when content uses CRLF (`\r\n`). This can render stray carriage-return characters and corrupt intra-line diff ranges.

### Issue Context
The repo already treats CRLF as a real formatting style (e.g. JSONC helpers preserve it), so the diff viewer should handle it gracefully.

### Fix Focus Areas
- Normalize line endings (e.g. `\r\n` -> `\n`) before calling `diffLines()` and before splitting into per-line strings.
- Consider stripping a trailing `\r` from each resulting line as a defensive fallback.

### Fix Focus Areas (code references)
- components/ui/diff-viewer/diff-model.ts[30-44]

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

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

2. Graphql body limit regression 🐞 Bug ☼ Reliability

GraphqlMain now installs express.json() on /graphql with the default body-size limit, and
oversized JSON payloads will be rejected before GraphQL executes. This is risky here because
useBulkPagedQuery() includes the full pairs array in every request (even when paging via
offset/limit), so payload size grows with lane size and can hit HTTP 413 on large compares.

Agent Prompt

### Issue description
The server unconditionally applies `express.json()` on `/graphql` without configuring the `limit`, so large JSON requests can be rejected with 413 before GraphQL handling.

This is amplified by bulk paging: the client sends `variables: { pairs: stablePairs, offset, limit }`, meaning the *entire* pairs list is serialized into every page request.

### Issue Context
Bulk compare + lane compare can involve hundreds/thousands of component pairs, and each pair contains two component-id strings.

### Fix Focus Areas
- Configure `/graphql` JSON parser with a higher limit (e.g. `express.json({ limit: '1mb' })` or configurable via GraphQLConfig).
- Optionally scope the body parser to only the batching middleware, or rely on `graphqlHTTP`’s body parsing if it’s already configured appropriately.

### Fix Focus Areas (code references)
- scopes/harmony/graphql/graphql.main.runtime.ts[156-167]
- components/ui/hooks/use-bulk-paged-query/use-bulk-paged-query.ts[74-78]

ⓘ 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 95ba129