Codebase Memory — Vorschlag für eine neue Graph-Oberfläche

→ Vorlage im Browser öffnen

Eine Gestaltungsvorlage („Mockup") für die 3D-Graph-Ansicht von codebase-memory-mcp. Kein Ersatz und kein Fork — ein anfassbarer Vorschlag, wie sich das Werkzeug anfühlen könnte, gebaut mit der Renderpipeline des Originals und um Tiefe, Kamera-Gefühl und einige Ideen erweitert.

Anschauen

Weg	Was
breiti35.github.io/codebase-memory-ui-mockup	Direkt im Browser (lädt three.js vom CDN)
codebase-memory-ui-mockup.html	Eine Datei, three.js eingebettet — herunterladen, Doppelklick, läuft offline

Voraussetzung: ein Browser mit WebGL 2 (Chrome, Edge, Firefox, Safari 15+).

In zwei Minuten durch

1. Cluster — Rad zoomt zum Mauszeiger, Ziehen dreht (mit Nachlauf). Doppelklick auf eine Galaxie fliegt hinein, Esc zurück.
2. Klick auf einen Knoten — der Rest wird zu Staub, die Kanten des Knotens bleiben; kleine Lichter laufen darauf in Aufrufrichtung. Rechts der Inspektor.
3. Kanten → „Bündel" — die ~8.000 Kanten zwischen Ordnern werden zu einem Band je Ordnerpaar (Dicke = Zahl der Verbindungen). Zeigen auf einen Ordner links hebt seine Bänder hervor.
4. Schichten und Karte — dieselben Daten als Hierarchie-Säulen bzw. Treemap.
5. „Darstellung" oben rechts — genau die drei Regler des Originals: Kantenhelligkeit, Leuchtkraft, Bloom.
6. Sprache oben rechts umschaltbar: DE / EN.

Das Wichtigste: GESTALTUNGSREZEPT.md

Dort steht, was Absicht ist — mit Zahlen: Farbskala und Größenkopplung, Bloom-Parameter, Kantenstärken, Anordnungsregeln, Interaktionsverhalten, Beschriftungslogik, und die Fallen, über die ich beim Bauen gestolpert bin (Doppel-sRGB beim Hintergrund, NaN aus pow() im Shader, additive Kanten in dichten Graphen). Gedacht zum Danebenlegen beim Nachbauen.

Was Attrappe ist

Der Graph ist synthetisch erzeugt (7.983 Knoten / 35.735 Kanten, in Größe und Verteilung an ein echtes Projekt angelehnt). Projekte-Tabelle, System-Kacheln und Log sind Beispieldaten. Ohne Wirkung: „Aktualisieren", „Neues Projekt indizieren", „Neu starten", „ADR", „Quelltext öffnen". Alles andere — Filtern, Suchen, Isolieren, Anordnungen, Kantenmodi, Regler, Kamera — funktioniert.

Aufbau

index.html      Diese Seite (GitHub Pages)
demo.html       Die Vorlage (three.js vom CDN)
codebase-memory-ui-mockup.html   Dieselbe Vorlage, three.js eingebettet (offline)
GESTALTUNGSREZEPT.md             Die Entscheidungen mit Werten
bilder/         Screenshots
src/            Quellen + Build

Die Vorlage wird aus Einzelteilen zusammengesetzt:

src/_part_css.txt        Tokens, Rahmen, Komponenten
src/_part_body.txt       HTML-Gerüst (Texte tragen data-i18n-Schlüssel)
src/_part_i18n.js        Wörterbuch DE/EN + t()
src/_part_js.txt         Modell, Anordnungen, Seitenleiste, Inspektor, Projekte, System
src/_renderer_three.js   three.js-Renderer: Kugeln, Bloom, Kamera, Bündel, Overlay
src/_build.py            python _build.py  →  demo.html (+ Offline-Variante)

Für die Offline-Variante legt das Build-Script three.core.min.js und three.module.min.js (three r185) in src/vendor/ — sonst überspringt es diesen Schritt.

Rückmeldung

Fragen, Kritik oder „das würde ich anders machen" gern als Diskussion oder Issue.

Lizenz

MIT (siehe LICENSE) — der Sinn der Sache ist ja, dass daraus etwas gebaut wird. Die eingebettete Offline-Variante enthält three.js r185, ebenfalls MIT, © three.js Authors.