perf(frontend): bound logs DOM, kill editor re-render storms, lazy-load heavy deps

[waleedlatif1]

Summary

Five targeted, independently-verified frontend performance fixes — each addresses a measured, user-felt problem in a hot path. No behavior change; all are backwards-compatible.

1. perf(logs) — virtualize the resource list. The logs page accumulated useInfiniteQuery pages into an unbounded, unvirtualized DOM (50 → thousands of rows = compounding scroll jank + unbounded memory). Now windowed with @tanstack/react-virtual (table→CSS-grid, exact <colgroup> ratios preserved). Keyboard-nav scroll routes through the virtualizer (scrollToIndex) via an optional apiRef, so it works even when a row is windowed out. All 6 ResourceTable consumers preserved.
2. perf(editor) — narrow the per-block store subscription. Every mounted WorkflowBlock subscribed to the whole blocks map, so any structural edit (rename, lock/enable, dimension settle, paste) re-rendered every block. New useBlockCurrentWorkflow subscribes to state.blocks[blockId] only — block B no longer re-renders on a block-A edit (immutable per-block updates keep B's reference stable).
3. perf(realtime) — move presence out of the socket context.presenceUsers lived in the memoized socket context value, so every remote cursor frame (many/sec) produced a new context reference and re-rendered the 4k-line WorkflowContent. Presence moved to a dedicated Zustand store; only <Cursors>/<Avatars> subscribe. Writer-for-writer identical; cleared on unmount to match the prior lifetime.
4. perf(editor) — lazy-load NoteBlock. Streamdown + remark-breaks shipped to 100% of editor loads via a static nodeType, even for workflows with no note blocks. Now next/dynamic (stable nodeTypes map preserved).
5. perf(emcn) — defer prismjs in Code. prism + 3 side-effectful grammars sat in the @/components/emcn barrel (379 importers). Split the side-effectful imports into code/prism.ts, lazy-loaded on first highlight; the two synchronous highlight/languages consumers stay eager via the split module.

Type of Change

• Performance improvement (no behavior change)

Testing

Each change was reviewed by a dedicated adversarial auditor (line-by-line vs origin/staging), then re-reviewed after a keyboard-nav fix the audit caught. Plus /simplify + /cleanup (reuse/simplification/efficiency/altitude + React anti-patterns) over all touched files and surrounding modules.

• tsc 0 new errors · Biome clean · check:zustand-v5 / check:client-boundary / check:react-query pass · targeted tests green · full next build green.
• The render-path behaviors that can't be unit-tested (logs arrow-key scroll, 2-collaborator cursor, note-block render) warrant a quick manual smoke before merge.

Checklist

• Code follows project style guidelines
• Self-reviewed (5 adversarial audits + cleanup passes)
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Jun 25, 2026 8:48pm

[cursor]

PR Summary

Medium Risk
Touches shared Resource.Table markup/virtualization and workflow editor subscription paths; regressions could affect logs scrolling, DnD tables, collaboration cursors, or code highlighting, though changes are opt-in or narrowly scoped where possible.

Overview
This PR bundles five performance fixes with no intended behavior change: bounded DOM on logs, fewer workflow-block re-renders, isolated realtime presence, and deferred loading of note and Prism code.

Logs / Resource.Table — The shared table is rebuilt as a CSS grid + ARIA roles (replacing native <table>) so rows can be windowed. An opt-in virtualized mode uses @tanstack/react-virtual; logs enable it for infinite-scroll lists. apiRef / scrollToRow replace querySelector + scrollIntoView so keyboard navigation still works when rows are unmounted. Drag-and-drop types move to HTMLDivElement rows; files and other consumers stay on the default full-DOM path.

Workflow editor — New useBlockCurrentWorkflow(blockId) narrows Zustand subscriptions to one block (plus diff flags); useBlockVisual switches to it so edits on other blocks don’t re-render every canvas block. NoteBlock is loaded via next/dynamic in workflow-constants so Streamdown/remark aren’t on every editor load.

Realtime — presenceUsers moves from socket context into usePresenceStore; Cursors and sidebar Avatars subscribe there so high-frequency cursor updates don’t invalidate useSocket() for the rest of the editor.

Code / emcn — Prism grammars live in code/prism.ts; Code lazy-loads them on first highlight with an HTML escape fallback, while the barrel still re-exports highlight/languages for direct importers.

^{Reviewed by Cursor Bugbot for commit 4c50a3f. Configure here.}

[greptile-apps]

Greptile Summary

Five independent frontend performance optimisations — virtualizing the logs table, narrowing per-block store subscriptions, moving high-frequency presence data out of the socket context, lazy-loading NoteBlock, and deferring Prism to first use. All changes are backwards-compatible and carry no behaviour regressions.

• Logs virtualization (resource.tsx, logs.tsx): replaces the unbounded DOM row list with @tanstack/react-virtual; uses an opt-in virtualized prop, preserves the existing six non-virtualized consumers, and routes keyboard-nav scrolling through a new ResourceTableHandle imperative ref so querySelector is never needed on windowed-out rows.
• Per-block subscription (use-block-current-workflow.ts, use-block-visual.ts): replaces the whole-blocks-map subscription with a per-block selector, eliminating cross-block re-render storms on any structural edit.
• Presence store (presence/store.ts, socket-provider.tsx, cursors.tsx, avatars.tsx): moves cursor-frame writes out of the socket context value into a dedicated Zustand store; only <Cursors> and <Avatars> subscribe, stopping WorkflowContent re-renders on every cursor frame.

Confidence Score: 5/5

All five changes are backwards-compatible, opt-in or transparently substituted, with no behavioural regressions.

Each change is tightly scoped: the virtualizer is gated by an explicit opt-in prop so all six existing ResourceTable consumers are unaffected; the presence store is a direct extraction that preserves the same data contract and lifetime; the per-block subscription is strictly narrower than the original with intentional stubs documented in JSDoc; the NoteBlock lazy load preserves a stable nodeTypes reference; and the Prism lazy load uses a module-level singleton so second mounts do not flash. React 19 is confirmed, making the ref-as-prop pattern in DataRow valid.

No files require special attention.

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx	Core of the virtualization work: <table> replaced with ARIA-role <div> grid, @tanstack/react-virtual windowing added behind an opt-in virtualized prop, ResourceTableHandle imperative ref exposed for keyboard-nav scrolling. DataRow accepts ref directly (React 19 pattern). useVirtualizer is instantiated unconditionally but its output is ignored by non-virtualized consumers. IntersectionObserver load-more sentinel is correctly placed after the fixed-height tbody div.
apps/sim/app/workspace/[workspaceId]/logs/logs.tsx	Minimal change: adds virtualized and apiRef props to the single Resource.Table usage and replaces querySelector+scrollIntoView with a virtualizer-aware resourceTableRef.current?.scrollToRow() call.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-current-workflow.ts	New hook subscribes only to state.blocks[blockId] and diff-store flags; returns a scoped CurrentWorkflow shape. edges/loops/parallels/getEdgeCount/hasEdges are stubbed as empty/false with JSDoc explaining the intentional contract.
apps/sim/app/workspace/providers/socket-provider.tsx	Removes presenceUsers state from the socket context; thin wrappers delegate to usePresenceStore.getState() with stable empty-dep useCallback. clearPresenceUsers() called on unmount preserves the prior lifetime.
apps/sim/stores/presence/store.ts	New Zustand store with devtools; exposes setPresenceUsers, updatePresenceUsers (transactional functional update), and clearPresenceUsers. Clean and minimal.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow-constants.ts	Converts NoteBlock to next/dynamic with ssr: false; wrapper created at module scope so nodeTypes stays referentially stable for ReactFlow.
apps/sim/components/emcn/components/code/code.tsx	Removes static Prism imports; module-level prismModulePromise/resolvedPrism singleton ensures first load is deferred while subsequent mounts initialize synchronously, avoiding null→loaded flash.
apps/sim/components/emcn/components/code/prism.ts	New module isolating the three side-effectful Prism grammar imports so they only enter bundles that explicitly import highlight/languages.
apps/sim/components/emcn/components/index.ts	Re-routes highlight/languages barrel export from code.tsx to prism.ts; synchronous consumers still receive them eagerly, Code-only consumers no longer pull in Prism.
apps/sim/app/workspace/[workspaceId]/files/files.tsx	Mechanical type update: DragEvent<HTMLTableRowElement> → DragEvent<HTMLDivElement> in five drag handler signatures to match the <div>-based row elements.

_{Reviews (2): Last reviewed commit: "perf(emcn): defer prismjs in Code so it'..." | Re-trigger Greptile}

[waleedlatif1]

@greptile review

[waleedlatif1]

@cursor review

[cursor]

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

^{Reviewed by Cursor Bugbot for commit 4c50a3f. Configure here.}