> For the complete documentation index, see [llms.txt](https://ai-os-and-trend-finder.gitbook.io/ai-os-and-trend-finder-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ai-os-and-trend-finder.gitbook.io/ai-os-and-trend-finder-docs/.spec_system/archive/phases/phase_26/session_04_reusable_3d_code_graph_renderer.md). # Session 04: Reusable 3D Code Graph Renderer **Session ID**: `phase26-session04-reusable-3d-code-graph-renderer` **Status**: Not Started **Estimated Tasks**: \~12-25 **Estimated Duration**: 2-4 hours *** ## Objective Build the reusable 3D code graph renderer used by the Knowledge Graph route and the homepage preview, reusing the existing AI OS force-graph type and lazy/cleanup-first lifecycle patterns from the Mnemosyne constellation, with god nodes, community clusters, a density toggle, capping, bloom, fly-to, and a legend. *** ## Scope ### In Scope (MVP) * `src/components/knowledge-graph/knowledge-graph-3d.tsx` with props `embedded`, `maxNodes`, `onSelect`, `onMeta`, `pinnedId`. * Degree calculation, max-node cap, Full/Core density, god-node marking. * Adjacency + hover/pinned lighting; community-cluster force + link tuning. * Scene setup (controls, fog, lights, starfield, bloom, auto-orbit) via lazy dynamic imports of `react-force-graph-3d`, `three`, and the bloom pass. * Custom node meshes, god halos + pulse; extracted-link particles. * Node fly-to + deferred camera fit; Full/Core toggle, Pause/Play, capped-node notice, legend. * A loader/Suspense shell (reuse or mirror `memory-graph-loader.tsx`). * Component tests with mocked vendor modules; cleanup-first teardown verified. ### Out of Scope * Route, hook, gallery, side rail (Session 05). * Hero header wiring (Session 05). *** ## Prerequisites * [ ] Session 01 contracts and demo fixtures available. * [ ] Existing renderer patterns confirmed in `memory-graph-3d.tsx` and `graph-types.ts`. *** ## Deliverables 1. `src/components/knowledge-graph/knowledge-graph-3d.tsx`. 2. Loader/Suspense shell for the renderer. 3. Component tests under `src/components/knowledge-graph/__tests__/`. *** ## Success Criteria * [ ] Renderer shows god nodes, community clusters, density toggle, capping notice, and legend. * [ ] Vendor modules load lazily; effects clean up observers/frames/scene. * [ ] `onSelect`/`onMeta`/`pinnedId` behave per the upstream contract. * [ ] Tests pass without regressing the 3D vendor chunk budget (P01). *** ## Folded Port Detail ### Source Project Reference Links #### AI OS Targets * [Renderer (new)](https://github.com/moshehbenavraham/ai-os/blob/main/home/aiwithapex/projects/aios/src/components/knowledge-graph/knowledge-graph-3d.tsx) * [Existing 3D renderer to reuse](https://github.com/moshehbenavraham/ai-os/blob/main/home/aiwithapex/projects/aios/src/components/memory-graph-3d.tsx) * [Existing force-graph types](https://github.com/moshehbenavraham/ai-os/blob/main/home/aiwithapex/projects/aios/src/lib/graph-types.ts) * [Existing 3D loader](https://github.com/moshehbenavraham/ai-os/blob/main/home/aiwithapex/projects/aios/src/components/memory-graph-loader.tsx) * [Contracts from Session 01](https://github.com/moshehbenavraham/ai-os/blob/main/home/aiwithapex/projects/aios/src/lib/knowledge-graph-types.ts) #### Claude OS v2.4 Reference * [Reference 3D renderer](https://github.com/moshehbenavraham/ai-os/blob/main/home/aiwithapex/projects/claudeos/claude-os-v2.4/src/components/graphify-graph-3d.tsx) ### Reference (v2.4) * Node/link types: `v2.4/src/components/graphify-graph-3d.tsx:3-21`. * Props (`embedded`, `maxNodes`, `onSelect`, `onMeta`, `pinnedId`): `46-62`. * Dynamic imports (force-graph, three, bloom): `101-116`. * Resize observer: `118-125`. * Degree, cap, density, god marking: `127-183`. * Adjacency + hover/pinned lighting: `185-205`. * Scene setup (controls/fog/lights/starfield/bloom/orbit): `207-339`. * Bloom resize: `341-347`. * Community-cluster force + link tuning: `349-408`. * Fly-to + deferred camera fit: `410-467`. * Custom meshes, god halos, pulse: `469-514`. * Render props (labels, link colors, particles, click/hover): `516-564`. * Full/Core toggle, Pause/Play, capped notice, legend: `571-620`. ### Build Steps 1. Define the renderer component and props; reuse `graph-types.ts` for force-graph ref/node/link typing. 2. Lazy-load `react-force-graph-3d`, `three`, and the bloom pass; add the resize observer and cleanup-first effects (P18). 3. Implement degree/cap/density/god marking and adjacency lighting. 4. Build the scene (lights, starfield, bloom, auto-orbit) and the community-cluster force. 5. Add fly-to + camera fit, custom node meshes, halos, and extracted-link particles. 6. Add the Full/Core toggle, Pause/Play, capped-node notice, and legend. 7. Add the loader shell and component tests with mocked vendor modules. ### Exit Criteria * A reusable renderer that matches the `v2.4` behavior, lazy-loaded, cleaned up on unmount, and component-tested. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://ai-os-and-trend-finder.gitbook.io/ai-os-and-trend-finder-docs/.spec_system/archive/phases/phase_26/session_04_reusable_3d_code_graph_renderer.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.