Eine neue Graph-Oberfläche für Codebase Memory

Ein Vorschlag, kein Ersatz: die Graph-Ansicht als anfassbare Vorlage, gebaut mit der Renderpipeline des Originals — und um Tiefe, Kamera-Gefühl und ein paar Ideen erweitert. Läuft im Browser, ohne Installation.

Vorlage öffnen → Als Datei speichern (offline, 1,1 MB) Gestaltungsrezept lesen

Cluster-Ansicht: Ordner als Spiralgalaxien in einem Sternfeld

Cluster-Ansicht: jeder Ordner eine Spiralgalaxie, der größte im Zentrum. 7.983 Knoten, 35.735 Kanten, ~60 fps.

Was das ist: eine Gestaltungsvorlage. Die Daten sind synthetisch, aber in Größe und Verteilung an ein echtes Projekt angelehnt. Alle Entscheidungen samt Werten stehen im Gestaltungsrezept — gedacht zum Danebenlegen beim Nachbauen, nicht als fertiger Code zum Übernehmen.

01In zwei Minuten durch

Cluster — Rad zoomt zum Mauszeiger, Ziehen dreht (mit Nachlauf). Doppelklick auf eine Galaxie fliegt hinein, Esc fliegt zurück.
Klick auf einen Knoten — der Rest wird zu Staub, die Kanten des Knotens bleiben; kleine Lichter laufen darauf in Aufrufrichtung. Rechts öffnet der Inspektor.
Kanten → „Bündel" — die rund 8.000 Kanten zwischen den Ordnern werden zu einem Band je Ordnerpaar, Dicke nach Anzahl. Zeigen auf einen Ordner links hebt seine Bänder hervor.
Schichten und Karte — dieselben Daten als Hierarchie-Säulen und als Treemap. Der Wechsel morpht, die Kamera stellt sich passend.
„Darstellung" oben rechts — genau die drei Regler des Originals: Kantenhelligkeit, Leuchtkraft, Bloom.
Oben rechts lässt sich die Sprache umschalten (DE / EN).

02Ansichten

Bündel-Modus: Bänder zwischen den Ordner-Galaxien — **Bündel** — ein Band je Ordnerpaar statt 8.000 Einzellinien, Zahl der Verbindungen am Scheitel.

Nahaufnahme einer einzelnen Galaxie nach dem Hineinfliegen — **Hineinfliegen** — Doppelklick isoliert den Ordner und fliegt auf seine Scheibe.

Ausgewählter Knoten mit seinen Kanten und laufenden Lichtpunkten — **Auswahl** — nur die Kanten des Knotens, mit Teilchen in Aufrufrichtung.

Schichten-Ansicht: Säulen je Ordner über sechs Hierarchieebenen — **Schichten** — eine Säule je Ordner, sechs Ebenen von Projekt bis Variable.

Karten-Ansicht: Treemap der Ordner — **Karte** — Fläche nach Knotenzahl, frontal, ohne Verdeckung.

Oberfläche mit Seitenleiste, Graph und Inspektor — **Oberfläche** — Filter links, Inspektor rechts, Statusleiste unten.

03Was dahintersteckt

Die Renderkette ist die des Originals, nachgebaut und dokumentiert: deckende HDR-Kugeln mit Tiefenpuffer (daher das Volumen), Bloom über eine Mip-Kette, kein Tonemapping, linearer Farbraum mit sRGB-Encode am Ende. Die Knotenfarbe folgt keiner Typ-Palette, sondern einer Schwarzkörper-Skala nach Grad — deshalb wirkt das Bild warm, und die Farbe sagt zugleich die Größe.

Technikthree.js r185, WebGL 2, eine HTML-Datei, keine Abhängigkeiten zur Laufzeit
Größe7.983 Knoten · 35.735 Kanten · ~60 fps · ~1,5 ms je Bild
AnordnungenCluster (Galaxien), Schichten (Hierarchie), Karte (Treemap) — Wechsel als Morph auf der GPU
Beschriftung2D-Ebene über dem Canvas, Schilder mit Kollisionsprüfung
SpracheDeutsch / Englisch, Zahlen im jeweiligen Format

04Was Attrappe ist

Damit klar ist, worüber man redet: Der Graph ist synthetisch erzeugt (an ein echtes Projekt angelehnt), die Projekte-Tabelle, die System-Kacheln und das Log sind Beispieldaten. Ohne Wirkung sind die Knöpfe Aktualisieren, Neues Projekt indizieren, Neu starten, ADR und Quelltext öffnen. Alles andere — Filtern, Suchen, Isolieren, Anordnungen, Kantenmodi, Regler, Kamera — funktioniert.

In short (English)

This is a design proposal for the graph view of codebase-memory-mcp — a single self-contained HTML file that runs in any WebGL 2 browser. Folders are spiral galaxies; the wheel zooms to the cursor, dragging rotates with inertia, double-clicking a galaxy flies into it. Selecting a node keeps only its edges, with small lights flowing in call direction. The “Bundles” edge mode collapses the ~8,000 cross-folder edges into one band per folder pair. “Layers” and “Map” show the same data as hierarchy columns and as a treemap.

The rendering pipeline is the original's (opaque HDR spheres, mip-chain bloom, no tonemapping), rebuilt and extended. Every decision, with its numbers, is written down in the design recipe (German — happy to translate on request). Graph data is synthetic; the projects and system pages use sample data. UI language switches DE/EN in the top right.