feat(frontend): v3-Umbau P2 — echtes Routing, Unterzustand in der URL

Dritte Etappe. Die Ansicht lag bisher im URL-Hash (`#models`), gespeist aus einem useState in App.tsx. Das war fuer Reload und Lesezeichen brauchbar — aber nur auf View-Ebene; fuer den Zustand DARUNTER war kein Platz. ## Was jetzt in der Adresse steht (Befund B-05) /modelle?reiter=routing der Reiter war lokaler State, nicht teilbar /ideen?offen=<id> die aufgeklappte Karte; wer waehrend eines laufenden Workers neu lud, verlor seinen Platz /wissen?datei=<pfad> jede Vault-Notiz verlinkbar <ueberall>?system=wartung|logs die System-Schublade inkl. Reiter Alle Suchparameter werden validiert (app/router.tsx) — ein Link mit Unsinn darin faellt auf den Normalfall zurueck, statt die Ansicht in einen halben Zustand zu bringen. ## Alte Lesezeichen brechen nicht lib/hashUmleitung.ts biegt `#models` per replaceState auf `/modelle`, EINMAL vor dem Router-Mount. Fuenf Tests decken das ab (jeder NAV-Eintrag, die Schreibweise `#/models`, erhaltene Suchparameter, unbekannter Hash, kein Hash) — die Bruecke sieht sonst wie toter Code aus und waere ein naheliegender Kandidat zum Wegraeumen. Das Backend brauchte KEINE Zeile: der SPA-Catch-all in app.py:148-168 beantwortet jede unbekannte Route schon immer mit index.html. Vorher geprueft, nicht gehofft. ## Fehlergrenze pro Route (Befund B-13) Vorher hing eine einzige Grenze in main.tsx um alles — ein Renderfehler im Modell-Manager nahm Cockpit, Konsole und Chronik mit. Jetzt faengt jede Route fuer sich (components/RouteFehler.tsx: was passiert ist, was man tun kann, technische Einzelheiten aufklappbar). AppErrorBoundary bleibt als letztes Netz fuer Fehler ausserhalb jeder Route. Dazu eine 404-Seite, die Schiene und Kopfzeile stehen laesst — im Browser geprueft. ## Budget: der Router kostete 29 kB, sie sind wieder drin TanStack Router hob den Start-Chunk von 111 auf 141 kB gzip und riss damit das in P0 gesetzte Ampel-Budget (125 kB). Statt das Budget hochzusetzen — was es als Signal entwertet haette — den Platz zurueckgeholt: SystemDrawer und CommandPalette sind beim Start UNSICHTBAR und liegen jetzt hinter lazy(). Die Palette laedt beim ersten Strg+K und bleibt dann gemountet. Start-Chunk gzip 111 411 -> 114 978 B (Budget 125 000, weiter scharf) dist gesamt 1 565 521 B (Budget 3 145 728) ## Nebenbei · Befund B-09 erledigt: Der "Suchen"-Knopf baute ein GEFAELSCHTES KeyboardEvent (`new KeyboardEvent("keydown", { metaKey: true })`) und feuerte es aufs Dokument. Jetzt ein eigener Kanal; in P3 loest der Store auch den ab. · Der Schliessen-Knopf der System-Schublade hatte kein aria-label — ein reiner Icon-Knopf ohne Namen. Nachgeholt (beim Pruefen aufgefallen). · nav.ts fuehrt jetzt den Pfad je Eintrag + navFuerPfad() mit Laengen-Sortierung, damit /ideen/<id> die Sidebar bei "Ideen" markiert. Mit Tests. ## Verifiziert im Browser (lokales Backend, echtes Produktions-Buendel) / -> /cockpit, Sidebar markiert /#models -> /modelle, Sidebar markiert /modelle?reiter=routing -> Reiter "Routing & Warm-Set" aktiv /cockpit?system=logs -> Schublade offen, Reiter "System-Logs" aktiv; Schliessen entfernt den Parameter wieder /gibtsnicht -> 404-Seite, Schiene + Kopfzeile intakt Zurueck-Taste -> voriger Pfad 26/26 Tests gruen · ESLint 0 Fehler · tsc sauber. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-28 08:55:58 +02:00
parent ae69c5ce31
commit 464b0d20b8
50 changed files with 1143 additions and 607 deletions
@@ -12,6 +12,7 @@
        "@fontsource/jetbrains-mono": "^5.2.8",
        "@fontsource/space-grotesk": "^5.2.10",
        "@tanstack/react-query": "^5.101.1",
+        "@tanstack/react-router": "^1.170.32",
        "clsx": "^2.1.1",
        "cmdk": "^1.1.1",
        "d3-force": "^3.0.0",
@@ -2340,6 +2341,19 @@
        "vite": "^5.2.0 || ^6 || ^7 || ^8"
      }
    },
+    "node_modules/@tanstack/history": {
+      "version": "1.162.1",
+      "resolved": "https://registry.npmjs.org/@tanstack/history/-/history-1.162.1.tgz",
+      "integrity": "sha512-DR9t6lfLVdrjgCwpglrR9DR7Ok8/HlXjcOE+goWXF3zyuLUO/ug7vMbSFxTqrQTtbRghJfyhmIZ0S6LhPIy44w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
    "node_modules/@tanstack/query-core": {
      "version": "5.101.1",
      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.101.1.tgz",
@@ -2366,6 +2380,76 @@
        "react": "^18 || ^19"
      }
    },
+    "node_modules/@tanstack/react-router": {
+      "version": "1.170.32",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-router/-/react-router-1.170.32.tgz",
+      "integrity": "sha512-SIpxvaTKco100a5ZR3ePmArbhtm3XOx+w1dpGYY9gxHDta4iXSKDdQuhLonwJbIMkVJsU1rwXf0UDHMrF/1snw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/history": "1.162.1",
+        "@tanstack/react-store": "^0.9.3",
+        "@tanstack/router-core": "1.171.27",
+        "isbot": "^5.1.22"
+      },
+      "engines": {
+        "node": ">=20.19"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": ">=18.0.0 || >=19.0.0",
+        "react-dom": ">=18.0.0 || >=19.0.0"
+      }
+    },
+    "node_modules/@tanstack/react-store": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-store/-/react-store-0.9.3.tgz",
+      "integrity": "sha512-y2iHd/N9OkoQbFJLUX1T9vbc2O9tjH0pQRgTcx1/Nz4IlwLvkgpuglXUx+mXt0g5ZDFrEeDnONPqkbfxXJKwRg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/store": "0.9.3",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tanstack/router-core": {
+      "version": "1.171.27",
+      "resolved": "https://registry.npmjs.org/@tanstack/router-core/-/router-core-1.171.27.tgz",
+      "integrity": "sha512-wDwSLvoLwIaNcnx9UNcN9Mb7Y8QwCYq1U1RQZwyN186gnkIoIYI2SOxy8VqH1vFigbkHkk4FmwMAQlghPgDK2g==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/history": "1.162.1",
+        "cookie-es": "^3.0.0",
+        "seroval": "^1.6.2",
+        "seroval-plugins": "^1.6.2"
+      },
+      "engines": {
+        "node": ">=20.19"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/store": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/store/-/store-0.9.3.tgz",
+      "integrity": "sha512-8reSzl/qGWGGVKhBoxXPMWzATSbZLZFWhwBAFO9NAyp0TxzfBP0mIrGb8CP8KrQTmvzXlR/vFPPUrHTLBGyFyw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
    "node_modules/@testing-library/dom": {
      "version": "10.4.1",
      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
@@ -3354,6 +3438,12 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/cookie-es": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/cookie-es/-/cookie-es-3.1.1.tgz",
+      "integrity": "sha512-UaXxwISYJPTr9hwQxMFYZ7kNhSXboMXP+Z3TRX6f1/NyaGPfuNUZOWP1pUEb75B2HjfklIYLVRfWiFZJyC6Npg==",
+      "license": "MIT"
+    },
    "node_modules/cross-spawn": {
      "version": "7.0.6",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -4401,6 +4491,15 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/isbot": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/isbot/-/isbot-5.2.2.tgz",
+      "integrity": "sha512-iQcBXcd+Rv/pkubRyGh2utW2j1oPG5hZY6TUhVPpqK4G+o3IbxpJNx04hgksjc/N7GK5pEorUxDeg31cFgEk/w==",
+      "license": "Unlicense",
+      "engines": {
+        "node": ">=18"
+      }
+    },
    "node_modules/isexe": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -5568,6 +5667,27 @@
        "semver": "bin/semver.js"
      }
    },
+    "node_modules/seroval": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/seroval/-/seroval-1.6.4.tgz",
+      "integrity": "sha512-LErWMNS2RRFdu2RMA5u/PA59/IWs0XsikyEXGQ2/36iEWFrdG0ABmg17E17cikrv76891kOAMq3TkTFXpwAHXw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/seroval-plugins": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/seroval-plugins/-/seroval-plugins-1.6.4.tgz",
+      "integrity": "sha512-R0f1U9hmn38+dFMz6b6ab8lwucmw4AtiY7St+JPWudy1dm+Bs3g884nyrsH9Cy6rKpZKLYayXuMda9GZ/fl8JQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "seroval": "^1.0"
+      }
+    },
    "node_modules/shebang-command": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",