The Bun-based benchmark alone is misleading: Bun's JavaScriptCore engine
optimizes Array.shift() well enough that it shows almost no difference
between the old and new implementation, even though this component runs
in users' browsers (predominantly V8), where the gap is real and grows
with graph size. Added bench-cluster-assignments-v8.mjs, a standalone
zero-dependency script runnable with plain `node`, so the V8 numbers are
independently reproducible rather than just asserted. Both benchmarks now
print a warning when run under the wrong engine and go up to 100k nodes.
computeClusterAssignments drained its BFS frontier with Array.shift(),
which is O(remaining length) per call. Wide-frontier components (e.g. a
hub memory that many others relate to) made the drain O(n^2) on every
memory-graph load/update. Swapped to an index-pointer dequeue, which
preserves identical traversal order and output.
Document-to-memory links and actual `derives` relations were both emitted as `derives`, so they shared the same color and legend entry.
This separates structural document links into a `document` edge type, adds a dedicated theme color with `--graph-edge-document` support, and updates force-layout and level-of-detail handling to preserve existing structural behavior. The package and MCP widget legends/themes now distinguish document links from derived-memory relations.
Adds regression coverage for edge classification and validates the package plus its MCP consumer.
<!-- capy-badge:start -->
<a href="https://capy.ai/thread/jam_01M36F4MPFXZCA8J14T53YY029"><picture><source media="(prefers-color-scheme: dark)" srcset="https://capy.ai/badge/accent-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://capy.ai/badge/accent-light.svg"><img alt="Open in Capy" src="https://capy.ai/badge/accent-light.svg"></picture></a>
<!-- capy-badge:end -->
Before: npm serves 0.2.3 without the merged fixes.
After: merging publishes 0.2.4 with the theme, initial fit, and node settling fixes.
Validation: package typecheck and build passed.
**Before:** Console lost its theme and dots. Incoming nodes needed a drag to reorganize, fit missed later pages, and clicks or drag release could leave the layout moving.
**After:** Restore themed rendering with configurable dots. Automatically settle and fit incoming nodes, keep clicks from reheating forces, and cool the layout after drag release.
**Checked:** Package types/build and Console build linked to this package.
Console companion: [mono#3295](https://github.com/supermemoryai/mono/pull/3295).
## Summary
Addresses user feedback about the graph view: content in node popovers was hard-truncated at 100 characters with no way to read the full text or navigate to the document.
### Changes
**Scrollable popover content (no more truncation)**
- Removed the `truncate(content, 100)` call -- full content is now rendered in the popover
- Made the content area scrollable with `maxHeight: 100px` and `overflowY: auto`
- Increased version timeline entry truncation from 60 to 120 characters
- Increased version timeline container height from 120px to 160px
**"View document" in shortcuts panel**
- Added an eye icon + "View document" entry to the shortcuts panel (alongside existing arrow navigation)
- Clicking opens the Document Modal for the corresponding document
- Works for both document nodes (opens that document) and memory nodes (opens the parent document)
- Popover is automatically dismissed before the modal opens (prevents z-index overlap)
- Wired `onOpenDocument` callback through the full component chain: `page.tsx` -> `GraphLayoutView` -> `MemoryGraph` wrapper -> `MemoryGraphBase` -> `NodeHoverPopover`
**Shortcuts panel visual cleanup**
- Icon badges (`KeyBadge`) retain dark background and border for a keyboard-key badge look
- All icons (including the new EyeIcon) are uniformly wrapped in `KeyBadge` for consistent styling
- Removed background, border, and border-radius from the shortcuts panel container itself
- Widened shortcuts panel from 100px to 160px so navigation labels are fully visible
**Type safety improvement**
- Changed `MemoryGraphProps.colors` from `GraphThemeColors` to `Partial<GraphThemeColors>` to match actual usage (callers pass partial overrides that get merged with defaults)
- Replaced `as Partial<typeof import(...)>` cast with proper `satisfies Partial<GraphThemeColors>` using a direct type import
### Files changed
- `packages/memory-graph/src/components/node-hover-popover.tsx` -- scrollable content, EyeIcon + "View document" in shortcuts, KeyBadge styling, NavButton icon type broadened to `React.ReactNode`, all icons wrapped in KeyBadge
- `packages/memory-graph/src/components/memory-graph.tsx` -- popover dismissal wrapper (`handleOpenDocument`), prop forwarding
- `packages/memory-graph/src/types.ts` -- `onOpenDocument` prop on `MemoryGraphProps`, `colors` changed to `Partial<GraphThemeColors>`
- `apps/web/components/graph-layout-view.tsx` -- accepts and passes `onOpenDocument`
- `apps/web/components/memory-graph/memory-graph-wrapper.tsx` -- `onOpenDocument` in wrapper props, clean type import
- `apps/web/app/(app)/page.tsx` -- `handleOpenDocumentById` handler, wired to `GraphLayoutView`
## Testing
### Unit Tests (154/154 passed)
- **Command:** `cd packages/memory-graph && bun run test`
- **Result:** 9 test files, 154 tests passed (107 existing + 47 new)
- **New test file:** `packages/memory-graph/src/__tests__/node-hover-popover.test.tsx` covering:
- Layout constants (`SHORTCUTS_W=160`, `CARD_W=280`, `TOTAL_W` formula)
- Content area scrollability (`maxHeight:100`, `overflowY:auto`, `flex:1 1 auto`, no truncation)
- KeyBadge styles (has `backgroundColor: colors.controlBg`, has `border` with `colors.controlBorder`)
- Shortcuts panel styles (no `backgroundColor`, no `border`, no `borderRadius`)
- EyeIcon SVG component (`aria-hidden`, viewBox, path, circle, stroke)
- "View document" button render guard (`onOpenDocument && documentId`)
- `documentId` derivation (memory vs document node)
- VersionTimeline truncation limit (120 chars) and container maxHeight (160)
- `onOpenDocument` prop wiring
- NavButton icon prop type (`React.ReactNode`), all icons wrapped in KeyBadge
- `handleOpenDocument` wrapper in MemoryGraph (dismiss calls, ordering, useCallback deps)
### Build
- **Command:** `bun run --filter=@supermemory/memory-graph build`
- **Result:** Build succeeds, 0 errors
### Lint/Format
- **Command:** `bunx biome ci --changed --since=origin/main --no-errors-on-unmatched`
- **Result:** 6 files checked, no fixes applied, 0 errors
### Type Checking
- `packages/memory-graph`: 0 errors
- `apps/web`: 0 new errors introduced
### CI
- "CI - Type Check, Format & Lint" workflow passes
- "Claude Code Review" workflow fails due to repo config (`non-human actor: vorflux` not in `allowed_bots` list) -- not related to code changes
---
**Session Details**
- Session: [View Session](https://supermemory.us1.vorflux.com/agent-sessions/d0c067f1-38c1-40c5-ada9-b2ffb7331d1c)
- Requested by: Mahesh Sanikommu (mahesh@supermemory.com)
- Address comments on this PR. Add `(aside)` to your comment to have me ignore it.
feat: major iteration on the app
add: dashboard improvements
few more improvements
add few more improvements
add few more changes
home improvmeents
few more improvements
add lot of modifications
fix few things
- Switch to infinite query with viewport-triggered pagination (loads more when user zooms out 3x past node bounds)
- Remove maxNodes cap so all data renders
- Remove background color and dot pattern from graph
- Make document-memory edges light grey
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
## Summary
- Fixed memory graph stuck on "Loading graph data..." caused by field name mismatch after package rewrite (`memoryEntries` vs `memories`, `type` vs `documentType`)
- Improved MCP app UI to match console-v2 design: golden derives edges (#FBBF24), edge glow pass, node hover effects, dot mode at low zoom, vertical controls with keyboard shortcuts, expandable legend
- Synced local `memory-graph` edgeDerives constant with published npm version
## Test plan
- [ ] Run `cd apps/mcp && bun run dev`, connect via Claude Desktop
- [ ] Verify graph renders with golden derives edges and blue dashed extends edges
- [ ] Verify node hover/selection glow effects
- [ ] Verify Fit (Z), Center (C), zoom (+/-) keyboard shortcuts
- [ ] Verify legend expands/collapses
