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 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]

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

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

1. Async memo load race 🐞 Bug ☼ Reliability

LanesMain kicks off async disk-memo loads in its constructor without awaiting/guarding them, so
early diffStatus work can populate memo Maps and then be overwritten by stale on-disk entries when
the loaders resolve. This makes lane-diff results nondeterministic right after server start and can
serve stale snap-distance/change-type/diffStatus data until recomputed.

Agent Prompt

### Issue description
`LanesMain` starts async memo loads in the constructor and immediately serves requests. Because the loaders mutate the same `Map` instances after `await fs.readFile(...)`, they can overwrite entries written by live computations that happened before loading finished.

### Issue Context
This impacts `snapsDistanceMemo`, `changeTypesMemo`, and `diffStatusResultMemo` (and any other memo loaded similarly). Right after process start, first requests can compute results and store them, then the loader resolves and overwrites the same keys with stale values from disk.

### Fix Focus Areas
- scopes/lanes/lanes/lanes.main.runtime.ts[219-238]
- scopes/lanes/lanes/lanes.main.runtime.ts[290-301]

### Implementation direction
- Introduce a `private memosReady: Promise<void>` (or similar) initialized in the constructor as `this.memosReady = this.initMemos()`.
- `initMemos()` should `await Promise.all([loadSnapsDistanceMemoFromDisk(), loadApiDiffMemoFromDisk(), loadChangeTypesMemoFromDisk(), loadDiffStatusMemoFromDisk()])`.
- At the beginning of `diffStatus()` (and any other method that reads/writes these memos), `await this.memosReady`.
- Additionally (defense-in-depth), when applying loaded entries, prefer `if (!map.has(k)) map.set(k, v)` to avoid overwriting values computed since startup if a future refactor reintroduces concurrency.

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

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

2. Workspace api diff cached 🐞 Bug ≡ Correctness

ComponentCompareMain.getAPIDiff() now uses a persistent cache keyed only by `(baseIdStr,
compareIdStr)` but does not bypass persistent caching for live-workspace comparisons like
compare() does. This can persist a mutable API diff derived from on-disk workspace source (unbuilt
components) and later serve a stale API diff after edits under the same IDs.

Agent Prompt

### Issue description
`compare()` explicitly skips reading/writing the persistent cache when the comparison is against live workspace files (`comparesLiveWorkspace(...)`). `getAPIDiff()` does not, yet `SchemaMain.computeAPIDiff()` documents that unbuilt workspace components extract schema from live source and therefore must not be memoized.

### Issue Context
Because `getAPIDiff()` persists results (no TTL) keyed only by `(baseIdStr, compareIdStr)`, a workspace-derived API diff can be written once and then returned even after source changes, as long as the IDs remain the same.

### Fix Focus Areas
- scopes/component/component-compare/component-compare.main.runtime.ts[115-150]
- scopes/component/component-compare/component-compare.main.runtime.ts[269-290]

### Implementation direction
- Add a `skipPersistentCache` argument to the `getOrCompute(...)` call in `getAPIDiff()`, mirroring `compare()`:
  - `const skip = this.comparesLiveWorkspace(baseIdStr, compareIdStr);`
  - pass `skip` as the final `getOrCompute` parameter.
- Consider bumping the cache key namespace (e.g. `api-diff:v3`) if existing persisted entries might have been written for live-workspace cases.
- Optionally add an additional cacheable guard if the API-diff result object can encode “workspace/live” (but the simplest/most robust is to reuse `comparesLiveWorkspace`).

ⓘ 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 9e79e8c