@cosmicdrift/kumiko-renderer-web 0.3.0 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,84 @@
 # @cosmicdrift/kumiko-renderer-web
 
+## 0.4.1
+
+### Patch Changes
+
+- 010b410: feat(auth-email-password): "Bestätigungs-Mail erneut senden" im LoginScreen
+
+  LoginScreen bietet bei reason=email_not_verified jetzt einen Resend-Link
+  im Fehler-Banner — der existierende `requestEmailVerification`-Endpoint
+  wird direkt aufgerufen, der Banner wechselt nach Erfolg zum Info-Variant
+  ("Wir haben dir eine neue Bestätigungs-Mail geschickt.").
+
+  UX-Details:
+
+  - Bei 429 → inline-Hint "Bitte warte kurz und versuche es erneut."
+  - Bei Netzwerk/sonstigen Fehlern → inline-Hint "Konnte nicht senden."
+  - Anti-Typo-Gate: ändert der User die Email-Eingabe nach dem Login-Fail,
+    verschwindet der Resend-Link — sonst würde Resend silent-success an die
+    geänderte (potentiell typoed) Adresse gehen ohne User-Feedback.
+  - Andere Failure-Codes (invalid_credentials etc.) zeigen weiterhin keinen
+    Resend-Link.
+
+  i18n: 4 neue Keys (DE+EN) im `auth.login.resend*`-Namespace, additive.
+  Apps die ihre Translations override-en müssen nichts ändern.
+
+  Additive UI-Feature — keine API-Breaks, keine Schema-Migration.
+
+- Updated dependencies [010b410]
+  - @cosmicdrift/kumiko-dispatcher-live@0.4.1
+  - @cosmicdrift/kumiko-headless@0.4.1
+  - @cosmicdrift/kumiko-renderer@0.4.1
+
+## 0.4.0
+
+### Minor Changes
+
+- 825e7d2: Visual-Tree V.1.4 → V.1.6 — Feature-complete Editor + Folder-Hierarchy + Roving-tabindex.
+
+  **V.1.4** — explicit `folder?: string` Schema-Field auf text-block-entity. Slug bleibt
+  kebab-only validiert, Folder explizit gesetzt. Tree gruppiert via `groupBlocksByFolder`
+  (ersetzt `groupBlocksBySlugPrefix`). `Subscribe<T>` Signature um optional `emitError`
+  erweitert für explicit async-error-Pfade. ProviderBranch zeigt Error-Banner mit
+  Retry-Button. Drift-Test pinnt seedTextBlock-vs-set.write Slug-Validation.
+
+  **V.1.4b** — URL-State-Routing für Editor-Target via `nav.searchParams`. F5 + Back-Button
+  stellen den Editor-State wieder her. Format: `?t=text-content:edit&a_slug=...&a_lang=...`.
+  Plus `useDispatchTarget` hook ersetzt globalen `dispatchTarget` als empfohlenen Production-
+  Pfad (legacy bleibt für Test-Hooks).
+
+  **V.1.5** — Arrow-Key-Navigation (`<aside role="tree">`, ARIA-tree-Pattern) + SSE-driven
+  Tree-Refresh. `ClientFeatureDefinition.treeEntities?: string[]` listet Entity-Namen pro
+  Provider; live-events triggern provider-re-mount → Stale-Tree-state="stub"→"filled"
+  flippt nach save automatisch.
+
+  **V.1.5c+d** — Active-Node-Highlight (explicit blue + 2px border-l + scrollIntoView),
+  VS-Code-Polish (compact spacing, focus-visible, folder-icon-color text-amber, indent-
+  guides per ancestor-depth), Folder-Wrapper für legal-pages ("📁 Legal" + slug-first
+  Verschachtelung) und text-content ("📁 Content").
+
+  **V.1.6** — Multi-level Folder-Splitting (`folder="page/marketing"` → nested folders,
+  walk-or-create-pattern, folder/leaf-collision-tolerant). Roving-tabindex (nur focused-
+  treeitem hat tabIndex=0, Tab cyclt aus dem Tree raus).
+
+  35/35 kumiko check PASS, 13/13 group-blocks + 22/22 text-content integration tests grün.
+  Browser + Keyboard lokal validated.
+
+  **Breaking**: `TreeContext` Type entfernt (V.1.2 SR2-Rip — war nie genutzt). Provider sind
+  session-bound: `TreeChildrenSubscribe = () => Subscribe<T>` statt `(ctx) => Subscribe<T>`.
+
+  **V.1.7-Followups**: useEffect-deps in VisualTree-focus-init (Performance), Cancellation-
+  Token in TreeProvider's fetch (emit-after-unmount-warning), inline-rename, drag-drop,
+  file-icons per slug-extension, parent-jump bei ArrowLeft auf collapsed-item.
+
+### Patch Changes
+
+- Updated dependencies [825e7d2]
+  - @cosmicdrift/kumiko-dispatcher-live@0.4.0
+  - @cosmicdrift/kumiko-headless@0.4.0
+  - @cosmicdrift/kumiko-renderer@0.4.0
+
 ## 0.3.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Web-platform bindings for @cosmicdrift/kumiko-renderer. HTML default-primitives, browser history-based navigation, EventSource-backed live events, and a one-call createKumikoApp that mounts the whole stack via react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -16,9 +16,9 @@
     "./styles.css": "./src/styles.css"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.3.0",
-    "@cosmicdrift/kumiko-headless": "0.3.0",
-    "@cosmicdrift/kumiko-renderer": "0.3.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.4.1",
+    "@cosmicdrift/kumiko-headless": "0.4.1",
+    "@cosmicdrift/kumiko-renderer": "0.4.1",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -36,6 +36,18 @@
     "react-dom": "^19.2.6",
     "tailwind-merge": "^3.6.0"
   },
+  "peerDependencies": {
+    "@tailwindcss/cli": "^4.3.0",
+    "tailwindcss": "^4.3.0"
+  },
+  "peerDependenciesMeta": {
+    "@tailwindcss/cli": {
+      "optional": false
+    },
+    "tailwindcss": {
+      "optional": false
+    }
+  },
   "devDependencies": {
     "@tailwindcss/cli": "^4.3.0",
     "@testing-library/react": "^16.3.2",

package/src/__tests__/visual-tree-integration.test.tsx

@@ -18,9 +18,9 @@
 //      zeigt VisualTree mit beiden Provider-Beiträgen
 //
 // **Memory `[Kein Fake-Dispatcher]`-Note**: V.1.1 hat keine HTTP-Calls
-// (Tree-Provider sind reine Client-Functions die nur ctx.tenantId
-// lesen). Echtes setupTestStack kommt mit V.1.2 wenn text-content's
-// Slug-Liste durch die Server-Pipeline geht.
+// (Tree-Provider sind reine Client-Functions ohne Args). Echtes
+// setupTestStack kommt mit V.1.2 wenn text-content's Slug-Liste durch
+// die Server-Pipeline geht.
 
 import type { TreeChildrenSubscribe, TreeNode } from "@cosmicdrift/kumiko-framework/engine";
 import type { FeatureSchema, WorkspaceSchema } from "@cosmicdrift/kumiko-renderer";

package/src/app/client-plugin.tsx

@@ -66,6 +66,13 @@ export type ClientFeatureDefinition = {
    *  features liefern beide Seiten konsistent. */
   readonly treeActions?: Readonly<Record<string, TreeActionDef>>;
 
+  /** V.1.5b SSE-Tree-Refresh: Liste der Entity-Namen die der Provider
+   *  abdeckt. Bei Live-Events für eine dieser Entities (created/updated/
+   *  deleted/restored) wird der Provider neu aufgerufen → Tree refresht.
+   *  Optional + leer/undefined → kein SSE-Refresh (static Provider, z.B.
+   *  legal-pages). Beispiel text-content: `["text-block"]`. */
+  readonly treeEntities?: readonly string[];
+
   /** Editor-Resolver-Komponenten pro featureId:action-Key. Wenn ein
    *  TreeNode mit target angeklickt wird, schlägt der EditorPanel das
    *  Component hier nach und rendert es. Komponenten erhalten target

package/src/app/create-app.tsx

@@ -201,6 +201,7 @@ export function createKumikoApp(options: CreateKumikoAppOptions = {}): void {
   // den Provider eines Features durch den eines anderen überschreiben);
   // wir warnen einmal pro Kollision. Visual-Tree.md V.1.1-Distribution.
   const treeProviders = new Map<string, TreeChildrenSubscribe>();
+  const treeEntities = new Map<string, readonly string[]>();
   for (const f of clientFeatures) {
     if (f.treeProvider === undefined) continue;
     if (treeProviders.has(f.name)) {
@@ -210,6 +211,9 @@ export function createKumikoApp(options: CreateKumikoAppOptions = {}): void {
       );
     }
     treeProviders.set(f.name, f.treeProvider);
+    if (f.treeEntities !== undefined && f.treeEntities.length > 0) {
+      treeEntities.set(f.name, f.treeEntities);
+    }
   }
 
   // Editor-Resolver aggregieren — keyed by "featureId:action". Gleiche
@@ -252,7 +256,7 @@ export function createKumikoApp(options: CreateKumikoAppOptions = {}): void {
             <LiveEventsProvider value={liveEvents}>
               <CustomScreensProvider value={customScreens}>
                 <ColumnRenderersProvider value={columnRenderers}>
-                  <TreeProvidersProvider value={treeProviders}>
+                  <TreeProvidersProvider value={treeProviders} entities={treeEntities}>
                     <ResolversProvider resolvers={resolvers}>
                       <ToastProvider>
                         {stackWrappers(providers, stackWrappers(gates, screenNode))}

package/src/app/tree-providers-context.tsx

@@ -22,17 +22,36 @@ import type { TreeChildrenSubscribe } from "@cosmicdrift/kumiko-framework/engine
 import { createContext, type ReactNode, useContext } from "react";
 
 const EMPTY_PROVIDERS: ReadonlyMap<string, TreeChildrenSubscribe> = new Map();
+const EMPTY_ENTITIES: ReadonlyMap<string, readonly string[]> = new Map();
 
 const TreeProvidersContext =
   createContext<ReadonlyMap<string, TreeChildrenSubscribe>>(EMPTY_PROVIDERS);
 
+// V.1.5b separater Context für SSE-Entity-Lists pro Provider. Parallel-
+// Context statt Entry-Tuple weil bestehende TreeProvidersProvider-Konsumenten
+// (tests, integration) sonst alle Migrations-Effort hätten.
+const TreeEntitiesContext = createContext<ReadonlyMap<string, readonly string[]>>(EMPTY_ENTITIES);
+
 export type TreeProvidersProviderProps = {
   readonly value: ReadonlyMap<string, TreeChildrenSubscribe>;
+  /** Optional: pro Provider die Entity-Liste für SSE-Live-Refresh.
+   *  Default: leere Map → kein Provider refresht via SSE. */
+  readonly entities?: ReadonlyMap<string, readonly string[]>;
   readonly children: ReactNode;
 };
 
-export function TreeProvidersProvider({ value, children }: TreeProvidersProviderProps): ReactNode {
-  return <TreeProvidersContext.Provider value={value}>{children}</TreeProvidersContext.Provider>;
+export function TreeProvidersProvider({
+  value,
+  entities,
+  children,
+}: TreeProvidersProviderProps): ReactNode {
+  return (
+    <TreeProvidersContext.Provider value={value}>
+      <TreeEntitiesContext.Provider value={entities ?? EMPTY_ENTITIES}>
+        {children}
+      </TreeEntitiesContext.Provider>
+    </TreeProvidersContext.Provider>
+  );
 }
 
 /** Hook für TreeProvider-Map-Konsumenten (VisualTree im WorkspaceShell).
@@ -42,3 +61,8 @@ export function TreeProvidersProvider({ value, children }: TreeProvidersProvider
 export function useTreeProviders(): ReadonlyMap<string, TreeChildrenSubscribe> {
   return useContext(TreeProvidersContext);
 }
+
+/** V.1.5b SSE-Entity-Map pro Provider. Empty Map default. */
+export function useTreeEntities(): ReadonlyMap<string, readonly string[]> {
+  return useContext(TreeEntitiesContext);
+}

package/src/components/config-cascade.tsx

@@ -0,0 +1,132 @@
+import type {
+  ConfigCascade,
+  ConfigCascadeLevel,
+  ConfigScope,
+  ConfigValueSource,
+} from "@cosmicdrift/kumiko-framework/engine";
+import { useTranslation } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+import { useState } from "react";
+
+const SOURCE_I18N_KEY: Record<ConfigValueSource, string> = {
+  "user-row": "config.source.user",
+  "tenant-row": "config.source.tenant",
+  "system-row": "config.source.system",
+  "app-override": "config.source.appOverride",
+  computed: "config.source.computed",
+  default: "config.source.default",
+  missing: "config.source.missing",
+};
+
+const SOURCE_COLORS: Record<ConfigValueSource, string> = {
+  "user-row": "text-blue-600 bg-blue-50 border-blue-200",
+  "tenant-row": "text-green-600 bg-green-50 border-green-200",
+  "system-row": "text-purple-600 bg-purple-50 border-purple-200",
+  "app-override": "text-orange-600 bg-orange-50 border-orange-200",
+  computed: "text-teal-600 bg-teal-50 border-teal-200",
+  default: "text-gray-500 bg-gray-50 border-gray-200",
+  missing: "text-red-500 bg-red-50 border-red-200",
+};
+
+function SourceBadge({ source }: { source: ConfigValueSource }): ReactNode {
+  const t = useTranslation();
+  return (
+    <span
+      className={`inline-flex items-center rounded border px-1.5 py-0.5 text-xs font-medium ${SOURCE_COLORS[source]}`}
+    >
+      {t(SOURCE_I18N_KEY[source])}
+    </span>
+  );
+}
+
+function formatValue(value: string | number | boolean | undefined, hasValue: boolean): string {
+  if (!hasValue || value === undefined) return "—";
+  return String(value);
+}
+
+function scopeToSource(scope: ConfigScope): ConfigValueSource {
+  if (scope === "user") return "user-row";
+  if (scope === "tenant") return "tenant-row";
+  return "system-row";
+}
+
+type ConfigCascadeViewProps = {
+  readonly cascade: ConfigCascade;
+  readonly screenScope: ConfigScope;
+  readonly onReset?: (key: string, scope: ConfigScope) => void;
+  readonly qualifiedKey?: string;
+};
+
+export function ConfigCascadeView({
+  cascade,
+  screenScope,
+  onReset,
+  qualifiedKey,
+}: ConfigCascadeViewProps): ReactNode {
+  const t = useTranslation();
+  const [expanded, setExpanded] = useState(false);
+
+  // Safety net: callers should already filter malformed cascades, but
+  // a missing levels-array (e.g. from a partial mock) shouldn't crash
+  // the screen.
+  if (!Array.isArray(cascade?.levels)) return null;
+
+  const activeLevel = cascade.levels.find((l) => l.isActive);
+  const screenScopeSource = scopeToSource(screenScope);
+  const hasOverride = activeLevel?.source === screenScopeSource;
+
+  return (
+    <div className="mt-1 text-xs">
+      <button
+        type="button"
+        onClick={() => setExpanded(!expanded)}
+        className="flex items-center gap-1 text-gray-500 hover:text-gray-700 cursor-pointer"
+      >
+        <span className="text-[10px]">{expanded ? "▼" : "▶"}</span>
+        {activeLevel ? (
+          <>
+            <SourceBadge source={activeLevel.source} />
+            <span className="text-gray-400">
+              {formatValue(activeLevel.value, activeLevel.hasValue)}
+            </span>
+          </>
+        ) : (
+          <span className="text-gray-400">{t("config.cascade.noValue")}</span>
+        )}
+      </button>
+
+      {expanded ? (
+        <div className="mt-1 flex flex-col gap-0.5 pl-3 border-l-2 border-gray-100">
+          {cascade.levels.map((level) => (
+            <CascadeLevelRow key={level.source} level={level} />
+          ))}
+
+          {hasOverride && onReset && qualifiedKey ? (
+            <button
+              type="button"
+              onClick={() => onReset(qualifiedKey, screenScope)}
+              className="mt-1 self-start text-[10px] text-orange-500 hover:text-orange-700 cursor-pointer underline"
+            >
+              {t("config.cascade.resetTo", { scope: t(SOURCE_I18N_KEY[screenScopeSource]) })}
+            </button>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function CascadeLevelRow({ level }: { level: ConfigCascadeLevel }): ReactNode {
+  const t = useTranslation();
+  return (
+    <div
+      className={`flex items-center gap-1.5 ${level.isActive ? "font-medium" : "text-gray-400"}`}
+    >
+      <SourceBadge source={level.source} />
+      <span>{formatValue(level.value, level.hasValue)}</span>
+      {level.isActive ? (
+        <span className="text-[10px] text-gray-400">{t("config.cascade.activeMarker")}</span>
+      ) : null}
+    </div>
+  );
+}

package/src/components/config-source-badge.tsx

@@ -0,0 +1,36 @@
+import type { ConfigValueSource } from "@cosmicdrift/kumiko-framework/engine";
+import type { ReactNode } from "react";
+
+const SOURCE_CONFIG: Record<ConfigValueSource, { label: string; bg: string; text: string }> = {
+  "user-row": { label: "User", bg: "#dbeafe", text: "#1e40af" },
+  "tenant-row": { label: "Tenant", bg: "#dcfce7", text: "#166534" },
+  "system-row": { label: "System", bg: "#f3e8ff", text: "#6b21a8" },
+  "app-override": { label: "Override", bg: "#ffedd5", text: "#9a3412" },
+  computed: { label: "Computed", bg: "#ccfbf1", text: "#115e59" },
+  default: { label: "Default", bg: "#f3f4f6", text: "#4b5563" },
+  missing: { label: "Missing", bg: "#fee2e2", text: "#991b1b" },
+};
+
+export function ConfigSourceBadge({ source }: { readonly source: ConfigValueSource }): ReactNode {
+  const cfg = SOURCE_CONFIG[source];
+
+  return (
+    <span
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        padding: "0 6px",
+        fontSize: "11px",
+        fontWeight: 500,
+        lineHeight: "18px",
+        borderRadius: "4px",
+        backgroundColor: cfg.bg,
+        color: cfg.text,
+        marginLeft: "6px",
+        whiteSpace: "nowrap",
+      }}
+    >
+      {cfg.label}
+    </span>
+  );
+}

package/src/layout/__tests__/visual-tree.test.tsx

@@ -1,9 +1,11 @@
 // @vitest-environment jsdom
 
 import type { TreeChildrenSubscribe, TreeNode } from "@cosmicdrift/kumiko-framework/engine";
+import { NavProvider } from "@cosmicdrift/kumiko-renderer";
 import { act, fireEvent, render, screen } from "@testing-library/react";
 import type { ReactNode } from "react";
 import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { useBrowserNavApi } from "../../app/nav";
 import { TreeProvidersProvider } from "../../app/tree-providers-context";
 import { setDispatchListener } from "../target-resolver-stub";
 import { VisualTree } from "../visual-tree";
@@ -45,7 +47,15 @@ function renderTree(
   providers: ReadonlyMap<string, TreeChildrenSubscribe>,
 ): ReturnType<typeof render> {
   function Wrapper({ children }: { readonly children: ReactNode }): ReactNode {
-    return <TreeProvidersProvider value={providers}>{children}</TreeProvidersProvider>;
+    // V.1.4b: TreeNodeRenderer + ActionButton nutzen useDispatchTarget,
+    // das useNav greift — Tests brauchen NavProvider. Browser-nav reset
+    // erfolgt im beforeEach (window.history.replaceState).
+    const nav = useBrowserNavApi();
+    return (
+      <NavProvider value={nav}>
+        <TreeProvidersProvider value={providers}>{children}</TreeProvidersProvider>
+      </NavProvider>
+    );
   }
   return render(<VisualTree workspaceId="test-ws" />, { wrapper: Wrapper });
 }
@@ -56,6 +66,9 @@ function renderTree(
 // Test-Isolation sauber ist. Production-Code nutzt nur die Standard-
 // Schnittstelle, daher transparent.
 beforeEach(() => {
+  // V.1.4b: URL-State leakt sonst zwischen Tests (useBrowserNavApi
+  // liest window.location). Plus localStorage-Mock unten.
+  window.history.replaceState(null, "", "/");
   const store = new Map<string, string>();
   Object.defineProperty(window, "localStorage", {
     configurable: true,

package/src/layout/editor-panel.tsx

@@ -1,14 +1,23 @@
-// EditorPanel — V.1.2: Right-side editor panel für Target-Dispatch.
-// Wird sichtbar wenn ein TreeNode mit target angeklickt wird. Zeigt
-// das passende Editor-Component aus dem Resolver-Registry, oder eine
-// Fallback-Info wenn kein Resolver registriert ist.
-// Siehe visual-tree.md V.1.2 + V.1.1-B.
+// EditorPanel — V.1.2: Main-area editor für Target-Dispatch im
+// Visual-Tree-Workspace. VS-Code-Style-Layout: Tree links, Editor füllt
+// den Main-Bereich; kein floating-Right-Panel. Resolver liefert die
+// Editor-Component für `${featureId}:${action}`, Fallback-Info zeigt
+// die Args wenn nichts registriert ist, Empty-State wenn nichts gewählt.
+//
+// **V.1.4b URL-State**: target wird in `nav.searchParams` persistiert
+// (Format: `?t=text-content:edit&a_slug=imprint&a_lang=de`). F5 +
+// Back-Button stellen den Editor-State wieder her. Single source of
+// truth = URL; useState fällt weg. Close clears params via setSearchParams.
+// Subscribe-Stream bleibt für Test-Hooks (setDispatchListener), wird
+// in Prod nicht mehr für EditorPanel benutzt.
+// Siehe visual-tree.md V.1.2 + V.1.1-B + V.1.4b.
 
 import type { TargetRef } from "@cosmicdrift/kumiko-framework/engine";
+import { useNav } from "@cosmicdrift/kumiko-renderer";
 import { X } from "lucide-react";
 import type { ComponentType, ReactNode } from "react";
-import { useCallback, useEffect, useState } from "react";
-import { subscribeTargetDispatches } from "./target-resolver-stub";
+import { useCallback, useMemo } from "react";
+import { clearTargetSearchParams, parseTargetFromSearchParams } from "./target-url";
 
 export type ResolverComponent = ComponentType<{
   readonly target: TargetRef;
@@ -65,27 +74,31 @@ function EditorPanelInner({
 }
 
 export function EditorPanel({ resolvers }: EditorPanelProps): ReactNode {
-  const [target, setTarget] = useState<TargetRef | undefined>();
-
-  useEffect(() => {
-    const unsubscribe = subscribeTargetDispatches((t: TargetRef) => {
-      setTarget(t);
-    });
-    return unsubscribe;
-  }, []);
+  const nav = useNav();
+  // target derived from URL → F5/Back stellen state wieder her.
+  // useMemo stabilisiert reference solange searchParams shallow-gleich
+  // sind (nav-Impl liefert plain-record für genau diesen check).
+  const target = useMemo(() => parseTargetFromSearchParams(nav.searchParams), [nav.searchParams]);
 
   const handleClose = useCallback(() => {
-    setTarget(undefined);
-  }, []);
+    nav.setSearchParams(clearTargetSearchParams(nav.searchParams));
+  }, [nav]);
 
-  if (target === undefined) return null;
+  return (
+    <div data-kumiko-layout="editor-main" className="flex-1 overflow-y-auto">
+      {target === undefined ? (
+        <EditorEmptyState />
+      ) : (
+        <EditorPanelInner target={target} resolvers={resolvers} onClose={handleClose} />
+      )}
+    </div>
+  );
+}
 
+function EditorEmptyState(): ReactNode {
   return (
-    <div
-      data-kumiko-layout="editor-panel"
-      className="fixed inset-y-0 right-0 z-50 w-[480px] max-w-[90vw] border-l bg-background shadow-xl overflow-y-auto"
-    >
-      <EditorPanelInner target={target} resolvers={resolvers} onClose={handleClose} />
+    <div className="flex h-full items-center justify-center p-8 text-sm text-muted-foreground">
+      <p>W&auml;hle einen Knoten links zum Bearbeiten.</p>
     </div>
   );
 }

package/src/layout/target-resolver-stub.tsx

@@ -1,9 +1,9 @@
 // TargetResolver — V.1.2: Multi-Listener-TargetDispatch mit Test-Hook.
-// Der V.1.1-Stub (console.debug) wird durch Production-Subscriber
-// ersetzt — EditorPanel, URL-State-Bridge, etc. registrieren sich
-// via subscribeTargetDispatches().
+// V.1.4b: URL-State-Bridge via useDispatchTarget-Hook. Production schreibt
+// target in nav.searchParams (F5-recovery); Subscribe-Stream bleibt für
+// Test-Hooks (setDispatchListener) und Apps die kein NavProvider haben.
 //
-// Dispatch-Priority:
+// Dispatch-Priority (V.1.2):
 //   1. Test-Listener (setDispatchListener) — exklusiv, kein Production-
 //      Subscriber läuft während Tests (Test-Isolation).
 //   2. Production-Subscriber (subscribeTargetDispatches) — alle
@@ -11,9 +11,17 @@
 //   3. Kein Test-Listener + keine Subscriber → console.debug fallback
 //      (damit unhandled Klicks sichtbar bleiben).
 //
-// Siehe visual-tree.md V.1.2.
+// **useDispatchTarget (V.1.4b)** ist der empfohlene Production-Pfad.
+// TreeNodeRenderer ruft den Hook in seinem Click-Handler — er schreibt
+// URL via nav.setSearchParams UND ruft den globalen dispatchTarget für
+// Test-Listener-Kompatibilität.
+//
+// Siehe visual-tree.md V.1.2 + V.1.4b.
 
 import type { TargetRef } from "@cosmicdrift/kumiko-framework/engine";
+import { useNav } from "@cosmicdrift/kumiko-renderer";
+import { useCallback } from "react";
+import { serializeTarget } from "./target-url";
 
 type DispatchListener = (target: TargetRef) => void;
 
@@ -51,3 +59,17 @@ export function subscribeTargetDispatches(fn: DispatchListener): () => void {
     subscribers.delete(fn);
   };
 }
+
+/** V.1.4b: empfohlener Production-Dispatch. Schreibt target in
+ *  nav.searchParams (URL-State, F5-fähig) UND ruft dispatchTarget für
+ *  Test-Listener + legacy-Subscribers. */
+export function useDispatchTarget(): (target: TargetRef) => void {
+  const nav = useNav();
+  return useCallback(
+    (target: TargetRef) => {
+      nav.setSearchParams(serializeTarget(target, nav.searchParams));
+      dispatchTarget(target);
+    },
+    [nav],
+  );
+}

package/src/layout/target-url.ts

@@ -0,0 +1,86 @@
+// @runtime client
+// URL-Bridge für Visual-Tree-Targets. Serialisiert TargetRef in
+// Search-Params + parsed zurück.
+//
+// **URL-Shape**:
+//   ?t=<featureId>:<action>&a_<argKey1>=<value1>&a_<argKey2>=<value2>...
+//
+// Beispiel: text-content edit "imprint/de"
+//   ?t=text-content:edit&a_slug=imprint&a_lang=de
+//
+// **Warum prefix `a_`**: vermeidet Naming-Konflikt mit anderen Query-
+// Params (Pagination, Sort, Filter). Plus klare Trennung target-meta
+// (`t`) vs. action-args (`a_*`).
+//
+// **Warum nicht JSON-encoded**: URL bleibt lesbar + bookmark-fähig.
+// JSON-base64 wäre robust für arbitrary Shapes aber unleserlich. arg-
+// values sind heute nur primitive strings (text-content: slug, lang) —
+// V.1.5 kann auf JSON wechseln wenn nested-args echten Bedarf zeigen.
+
+import type { TargetRef } from "@cosmicdrift/kumiko-framework/engine";
+
+const TARGET_PARAM = "t";
+const ARG_PREFIX = "a_";
+
+/** Build a search-params update for `setSearchParams`. Clears all
+ *  existing `a_*` keys plus `t` (so wechsel target nicht alte args
+ *  liegen lässt). Returns null-value entries to clear, plus the new
+ *  target entries. */
+export function serializeTarget(
+  target: TargetRef,
+  currentParams: Readonly<Record<string, string>>,
+): Readonly<Record<string, string | null>> {
+  const updates: Record<string, string | null> = {};
+  // Clear all previous arg-keys (vermeidet stale args bei target-switch).
+  for (const key of Object.keys(currentParams)) {
+    if (key.startsWith(ARG_PREFIX)) updates[key] = null;
+  }
+  updates[TARGET_PARAM] = `${target.featureId}:${target.action}`;
+  if (target.args !== undefined) {
+    for (const [k, v] of Object.entries(target.args)) {
+      // V.1.4b: nur string-args. Numbers/booleans werden via String()
+      // koerziert; nested objects/arrays werden NICHT supported (würde
+      // JSON-encoded URL brauchen, siehe Header-Comment).
+      if (typeof v === "string" || typeof v === "number" || typeof v === "boolean") {
+        updates[`${ARG_PREFIX}${k}`] = String(v);
+      }
+    }
+  }
+  return updates;
+}
+
+/** Inverse — parse the current search-params back into a TargetRef.
+ *  Returns undefined wenn der `t`-Key fehlt (kein active target). */
+export function parseTargetFromSearchParams(
+  params: Readonly<Record<string, string>>,
+): TargetRef | undefined {
+  const t = params[TARGET_PARAM];
+  if (t === undefined || t === "") return undefined;
+  const sepIdx = t.indexOf(":");
+  if (sepIdx < 0) return undefined;
+  const featureId = t.slice(0, sepIdx);
+  const action = t.slice(sepIdx + 1);
+  if (featureId === "" || action === "") return undefined;
+
+  const args: Record<string, string> = {};
+  let hasArgs = false;
+  for (const [key, value] of Object.entries(params)) {
+    if (key.startsWith(ARG_PREFIX)) {
+      args[key.slice(ARG_PREFIX.length)] = value;
+      hasArgs = true;
+    }
+  }
+  return hasArgs ? { featureId, action, args } : { featureId, action };
+}
+
+/** Returns null-valued updates that clear target + all args. Used vom
+ *  Close-Button + onUnmount. */
+export function clearTargetSearchParams(
+  currentParams: Readonly<Record<string, string>>,
+): Readonly<Record<string, string | null>> {
+  const updates: Record<string, string | null> = { [TARGET_PARAM]: null };
+  for (const key of Object.keys(currentParams)) {
+    if (key.startsWith(ARG_PREFIX)) updates[key] = null;
+  }
+  return updates;
+}

package/src/layout/tree-node-renderer.tsx

@@ -19,16 +19,30 @@
 // Siehe visual-tree.md V.1.1-C + A4 (TreeNode-Type-Definition).
 
 import type {
+  TargetRef,
   TreeAction,
   TreeChildrenSubscribe,
-  TreeContext,
   TreeNode,
   TreeNodeState,
 } from "@cosmicdrift/kumiko-framework/engine";
-import { ChevronDown, ChevronRight, Plus } from "lucide-react";
-import { type ReactNode, useEffect, useState } from "react";
+import { useNav } from "@cosmicdrift/kumiko-renderer";
+import { ChevronDown, ChevronRight, File, Folder, Plus } from "lucide-react";
+import { type ReactNode, useEffect, useMemo, useRef, useState } from "react";
 import { cn } from "../lib/cn";
-import { dispatchTarget } from "./target-resolver-stub";
+import { useDispatchTarget } from "./target-resolver-stub";
+import { parseTargetFromSearchParams } from "./target-url";
+
+// Icon-Registry (V.1.2-Stub): Provider liefern symbolische String-Keys
+// (`node.icon = "folder"`), Renderer mappt auf das lucide-Component.
+// Unknown Keys → kein Render (sauber leerer Slot, kein plain-string-
+// Overlap im 14px-Container). V.1.3+ erweitert Registry um App-
+// erweiterbare Custom-Icons; aktuelles Set deckt Tree-Folder/File-Bedarf
+// vom V.1.2-Consumer (text-content groupBlocksBySlugPrefix → "folder")
+// und legal-pages-Slugs (no icon set).
+const NODE_ICONS: Readonly<Record<string, typeof Folder>> = {
+  folder: Folder,
+  file: File,
+};
 
 // State → Tailwind-Klassen-Mapping. „filled" ist no-op (default-text).
 // Restliche Werte signalisieren visuell: stub = leise, empty = stark
@@ -49,22 +63,42 @@ function isSubscribeFn(c: readonly TreeNode[] | TreeChildrenSubscribe): c is Tre
   return typeof c === "function";
 }
 
+// V.1.5c Target-Vergleich: TreeNode ist „active" wenn sein target dem
+// aktiven Target aus der URL entspricht. Vergleich ist deep-shallow:
+// featureId + action exakt, args als flat-Record mit shallow-equal
+// (args sind heute nur primitives). null/undefined-tolerant.
+function targetsEqual(a: TargetRef, b: TargetRef | undefined): boolean {
+  if (b === undefined) return false;
+  if (a.featureId !== b.featureId) return false;
+  if (a.action !== b.action) return false;
+  const aKeys = a.args ? Object.keys(a.args) : [];
+  const bKeys = b.args ? Object.keys(b.args) : [];
+  if (aKeys.length !== bKeys.length) return false;
+  for (const k of aKeys) {
+    if (a.args?.[k] !== b.args?.[k]) return false;
+  }
+  return true;
+}
+
 export type TreeNodeRendererProps = {
   readonly node: TreeNode;
-  readonly ctx: TreeContext;
   readonly path: string;
   readonly expanded: ReadonlySet<string>;
   readonly onToggle: (path: string) => void;
   readonly depth?: number;
+  /** V.1.6c Roving-tabindex: nur das focused-Treeitem hat tabIndex=0,
+   *  alle anderen tabIndex=-1. Wenn undefined → kein item focused
+   *  (transient bei mount, VisualTree useEffect setzt's). */
+  readonly focusedPath?: string;
 };
 
 export function TreeNodeRenderer({
   node,
-  ctx,
   path,
   expanded,
   onToggle,
   depth = 0,
+  focusedPath,
 }: TreeNodeRendererProps): ReactNode {
   const isExpanded = expanded.has(path);
   const hasChildren = node.children !== undefined;
@@ -84,13 +118,32 @@ export function TreeNodeRenderer({
     if (!isExpanded) return;
     if (node.children === undefined) return;
     if (!isSubscribeFn(node.children)) return; // static-Array-Pfad in ChildrenView
-    const subscribe = node.children(ctx);
+    const subscribe = node.children();
     const unsubscribe = subscribe(setDynamicChildren);
     return unsubscribe;
-  }, [isExpanded, node.children, ctx]);
+  }, [isExpanded, node.children]);
 
   const stateClass = STATE_CLASSES[node.state ?? "filled"];
   const indentStyle = { paddingLeft: `${depth * 12 + 8}px` };
+  const dispatch = useDispatchTarget();
+  const nav = useNav();
+
+  // V.1.5c Active-Node-Highlight: TreeItem ist „selected" wenn sein
+  // target dem aktiven Target aus der URL entspricht. Vergleich via
+  // featureId+action+args (deep-shallow, args ist flat-Record). Plus
+  // scrollIntoView wenn active-Knoten nicht im Viewport ist (F5 mit
+  // tief im Tree liegendem Target → User sieht ihn nicht ohne Scroll).
+  const activeTarget = useMemo(
+    () => parseTargetFromSearchParams(nav.searchParams),
+    [nav.searchParams],
+  );
+  const isActive = node.target !== undefined && targetsEqual(node.target, activeTarget);
+  const rowRef = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    if (isActive && rowRef.current) {
+      rowRef.current.scrollIntoView({ block: "nearest", inline: "nearest" });
+    }
+  }, [isActive]);
 
   const handleRowClick = (): void => {
     if (hasChildren) {
@@ -98,22 +151,50 @@ export function TreeNodeRenderer({
       return;
     }
     if (node.target !== undefined) {
-      dispatchTarget(node.target);
+      dispatch(node.target);
     }
   };
 
+  // VS-Code-style indent-guides: ein 1px vertikaler border per
+  // ancestor-depth. Outer wrapper ist relative + die Lines sind absolute
+  // mit position pro depth-step (12px); top=0 bottom=0 streckt sie über
+  // Row + alle children (rekursiv wrapper wrappt children mit drin).
+  const indentGuides =
+    depth > 0
+      ? Array.from({ length: depth }, (_, i) => (
+          <div
+            // biome-ignore lint/suspicious/noArrayIndexKey: stable index = depth-level
+            key={i}
+            aria-hidden
+            className="absolute top-0 bottom-0 w-px bg-border/60 pointer-events-none"
+            style={{ left: `${i * 12 + 13}px` }}
+          />
+        ))
+      : null;
+
   return (
-    <div data-kumiko-tree-node={path}>
-      {/* Outer Row als <div role="button"> statt <button>: native <button>
-          darf laut HTML-Spec keine geschachtelten <button>-Children
-          enthalten — die HoverActions würden sonst ungültiges HTML
-          erzeugen. role+tabIndex+keyDown gibt äquivalente a11y. TODO V.1.2:
-          Arrow-key-navigation zwischen Tree-Siblings (ARIA-tree-Pattern). */}
-      {/* biome-ignore lint/a11y/useSemanticElements: nested <button> wäre invalid HTML — siehe HoverActions */}
+    <div data-kumiko-tree-node={path} className="relative">
+      {indentGuides}
+      {/* Outer Row als <div role="treeitem">: V.1.5a ARIA-tree-Pattern.
+          role + tabIndex=0 + aria-expanded gibt Screenreader Tree-
+          Semantik. Arrow-Key-Navigation läuft auf dem aside-Container
+          via querySelectorAll('[role=treeitem]') — siehe visual-tree.tsx.
+          div+role statt native button weil nested <button> in
+          HoverActions invalid HTML wäre. */}
       <div
+        ref={rowRef}
         className={cn(
-          "group flex w-full items-center gap-1.5 py-1 pr-2 cursor-pointer hover:bg-accent/30 rounded-sm",
-          stateClass,
+          // VS-Code-ähnlich: compact spacing, full-row click-area,
+          // hover subtle, active filled. Active sticky über hover via
+          // class-order. focus-ring nur bei Keyboard (focus-visible).
+          "group flex w-full items-center gap-1.5 py-0.5 pr-2 cursor-pointer rounded-sm relative",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+          // Explicit VS-Code-Blau für active (statt theme-`bg-accent`,
+          // weil publicstatus's accent near-white ist → kaum sichtbar).
+          // border-l-2 als VS-Code-Marker-Bar links.
+          isActive
+            ? "bg-blue-100 dark:bg-blue-900/40 border-l-2 border-l-blue-500"
+            : cn("hover:bg-muted/60", stateClass),
         )}
         style={indentStyle}
         onClick={handleRowClick}
@@ -123,16 +204,29 @@ export function TreeNodeRenderer({
             handleRowClick();
           }
         }}
-        role="button"
-        tabIndex={0}
+        role="treeitem"
+        // V.1.6c Roving-tabindex: nur das focused-treeitem hat
+        // tabIndex=0, alle anderen tabIndex=-1. focusedPath=undefined
+        // ist transient (VisualTree useEffect setzt's post-mount auf
+        // erstes treeitem); während dieser Phase haben alle tabIndex=-1
+        // und Tab-Reach geht nicht durch — minimal-Window, akzeptabel.
+        tabIndex={focusedPath === path ? 0 : -1}
         aria-expanded={hasChildren ? isExpanded : undefined}
+        aria-selected={isActive ? true : undefined}
+        data-kumiko-tree-path={path}
+        data-kumiko-tree-has-children={hasChildren ? "true" : "false"}
+        data-kumiko-tree-active={isActive ? "true" : undefined}
       >
         <ChevronGlyph hasChildren={hasChildren} expanded={isExpanded} />
-        {node.icon !== undefined && (
-          <span aria-hidden className="size-3.5">
-            {node.icon}
-          </span>
-        )}
+        {node.icon !== undefined &&
+          (() => {
+            const IconComponent = NODE_ICONS[node.icon];
+            if (IconComponent === undefined) return null;
+            // VS-Code-typische Icon-Color: folder yellow/amber, file
+            // muted. Plus fill für folder gibt geschlossenem-Folder-Look.
+            const iconColor = node.icon === "folder" ? "text-amber-500" : "text-muted-foreground";
+            return <IconComponent aria-hidden className={cn("size-3.5 shrink-0", iconColor)} />;
+          })()}
         <span className="flex-1 truncate text-sm">{node.label}</span>
         <HoverActions
           actions={node.actions}
@@ -142,12 +236,12 @@ export function TreeNodeRenderer({
       {isExpanded && (
         <ChildrenView
           node={node}
-          ctx={ctx}
           path={path}
           expanded={expanded}
           onToggle={onToggle}
           depth={depth}
           dynamicChildren={dynamicChildren}
+          focusedPath={focusedPath}
         />
       )}
     </div>
@@ -197,6 +291,7 @@ function ActionButton({
   readonly action: TreeAction;
   readonly icon: ReactNode;
 }): ReactNode {
+  const dispatch = useDispatchTarget();
   return (
     <button
       type="button"
@@ -206,7 +301,7 @@ function ActionButton({
         // Stop the event so the parent-row's onClick (which would
         // toggle / dispatch the row's own target) doesn't fire.
         e.stopPropagation();
-        dispatchTarget(action.target);
+        dispatch(action.target);
       }}
     >
       {icon}
@@ -216,20 +311,20 @@ function ActionButton({
 
 function ChildrenView({
   node,
-  ctx,
   path,
   expanded,
   onToggle,
   depth,
   dynamicChildren,
+  focusedPath,
 }: {
   readonly node: TreeNode;
-  readonly ctx: TreeContext;
   readonly path: string;
   readonly expanded: ReadonlySet<string>;
   readonly onToggle: (path: string) => void;
   readonly depth: number;
   readonly dynamicChildren: readonly TreeNode[] | null;
+  readonly focusedPath: string | undefined;
 }): ReactNode {
   // Array.isArray narrow't TS automatisch auf readonly TreeNode[] — kein
   // as-Cast nötig (Memory `[Type Assertions]`).
@@ -248,11 +343,11 @@ function ChildrenView({
             <TreeNodeRenderer
               key={childPath}
               node={child}
-              ctx={ctx}
               path={childPath}
               expanded={expanded}
               onToggle={onToggle}
               depth={depth + 1}
+              focusedPath={focusedPath}
             />
           );
         })}
@@ -279,7 +374,6 @@ function ChildrenView({
           <TreeNodeRenderer
             key={childPath}
             node={child}
-            ctx={ctx}
             path={childPath}
             expanded={expanded}
             onToggle={onToggle}

package/src/layout/visual-tree.tsx

@@ -14,36 +14,26 @@
 // silent fallback). Apps die navigation:"tree" deklarieren aber keinen
 // clientFeatures.treeProvider liefern, kriegen eine sichtbare Diagnose.
 //
-// **Tenant-Source V.1.1**: TreeContext.tenantId ist auf SYSTEM_TENANT_ID
-// gepinnt. Provider die echten Tenant brauchen kommen V.1.2 (text-content)
-// — dann wird der Tenant-Source via Auth-Layer / TenantContext / Prop
-// verdrahtet. V.1.1 zeigt das Wiring durch, kein konkreter Tenant-Bedarf.
+// **Tenant-Source**: Provider sind session-bound; Backend liest tenantId
+// aus session bei jedem fetch/dispatch. V.1.1 hatte ein TreeContext-Arg
+// mit hardcoded pinned tenantId, das vom einzigen Consumer (text-content)
+// ignoriert wurde. SR2-Rip 2026-05-18: Dead-API entfernt. Tenant-aware
+// Provider re-introduce wenn realer Bedarf (siehe tree-node.ts comment).
 //
 // Siehe visual-tree.md V.1.1-A.
 
-import type {
-  TenantId,
-  TreeChildrenSubscribe,
-  TreeContext,
-  TreeNode,
-} from "@cosmicdrift/kumiko-framework/engine";
-import { type ReactNode, useEffect, useMemo, useState } from "react";
-import { useTreeProviders } from "../app/tree-providers-context";
+import type { TreeChildrenSubscribe, TreeNode } from "@cosmicdrift/kumiko-framework/engine";
+import { useLiveEvents } from "@cosmicdrift/kumiko-renderer";
+import { type ReactNode, useEffect, useMemo, useRef, useState } from "react";
+import { useTreeEntities, useTreeProviders } from "../app/tree-providers-context";
 import { TreeNodeRenderer } from "./tree-node-renderer";
 
 const EXPANDED_STORAGE_PREFIX = "kumiko:visual-tree:expanded:";
 
-// V.1.1-Pin: TenantId für die Default-Tree-Context. Lokal als Branded-
-// Type-Construction (Memory `[Type Assertions]`) statt Value-Import aus
-// /engine — der engine-Barrel ist `runtime`-klassifiziert und ein client-
-// Modul darf ihn nicht als Wert konsumieren. **Sync-Pflicht**: muss mit
-// SYSTEM_TENANT_ID aus engine/types/identifiers.ts identisch bleiben;
-// ein Mismatch zeigt sich als „falscher Tenant" in Provider-Requests.
-// V.1.2 ersetzt den Pin durch echten Tenant-Source (TenantContext oder
-// Auth-Layer) sobald der erste Provider tenant-spezifische Daten braucht.
-const SYSTEM_TENANT_ID_PIN = "00000000-0000-4000-8000-000000000000" as TenantId;
-
-const DEFAULT_TREE_CTX: TreeContext = Object.freeze({ tenantId: SYSTEM_TENANT_ID_PIN });
+// Stable-reference empty-list — vermeidet useEffect-deps-Trigger durch
+// jedes Render (sonst würde `[].length === 0` short-circuit doch der
+// Identity-Vergleich subscribeLive-effect destabilisieren).
+const EMPTY_ENTITY_LIST: readonly string[] = [];
 
 export type VisualTreeProps = {
   /** Workspace-ID des aktiven `navigation:"tree"`-Workspaces. Wird als
@@ -55,6 +45,7 @@ export type VisualTreeProps = {
 
 export function VisualTree({ workspaceId }: VisualTreeProps): ReactNode {
   const providers = useTreeProviders();
+  const treeEntities = useTreeEntities();
   const sortedProviders = useMemo(
     () => [...providers.entries()].sort(([a], [b]) => a.localeCompare(b)),
     [providers],
@@ -62,6 +53,36 @@ export function VisualTree({ workspaceId }: VisualTreeProps): ReactNode {
 
   const [expanded, setExpanded] = useState<ReadonlySet<string>>(() => loadExpanded(workspaceId));
 
+  // V.1.6c Roving-tabindex: nur ein treeitem hat tabIndex=0, Tab cyclt
+  // damit aus dem Tree heraus statt durch alle Items. focusedPath
+  // tracked welches item current-focused ist; Arrow-Keys updaten es via
+  // native onFocus-event (siehe TreeNodeRenderer).
+  const [focusedPath, setFocusedPath] = useState<string | undefined>(undefined);
+  const asideRef = useRef<HTMLElement | null>(null);
+
+  // Beim ersten Render (oder content-Change) ist focusedPath
+  // undefined → ALLE Rows hätten tabIndex=-1 und Tab könnte Tree nicht
+  // betreten. Post-mount setzen wir das erste sichtbare treeitem als
+  // initial focus. Plus: wenn focusedPath einen Pfad zeigt der nicht
+  // mehr existiert (Tree-Refresh), fall back to first.
+  useEffect(() => {
+    if (asideRef.current === null) return;
+    const items = asideRef.current.querySelectorAll<HTMLElement>('[role="treeitem"]');
+    if (items.length === 0) return;
+    if (focusedPath === undefined) {
+      const firstPath = items[0]?.dataset["kumikoTreePath"];
+      if (firstPath !== undefined) setFocusedPath(firstPath);
+      return;
+    }
+    const stillExists = Array.from(items).some(
+      (el) => el.dataset["kumikoTreePath"] === focusedPath,
+    );
+    if (!stillExists) {
+      const firstPath = items[0]?.dataset["kumikoTreePath"];
+      if (firstPath !== undefined) setFocusedPath(firstPath);
+    }
+  });
+
   // localStorage-Persistenz: jeder Toggle persistiert sofort. Workspace-
   // Switch lädt anderen Set neu (siehe 2nd useEffect).
   useEffect(() => {
@@ -90,20 +111,99 @@ export function VisualTree({ workspaceId }: VisualTreeProps): ReactNode {
     return <EmptyState />;
   }
 
+  // V.1.5a ARIA-Tree-Keyboard-Nav: arrow-keys navigieren zwischen
+  // sichtbaren treeitems via DOM-query (Source of Truth = was im DOM
+  // sichtbar ist, inkl. expand/collapse-State). Tab kommt aus dem Tree
+  // heraus (kein Trap); innerhalb wird Arrow-Key erwartet.
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>): void => {
+    const target = e.target as HTMLElement;
+    if (target.getAttribute("role") !== "treeitem") return;
+
+    const items = Array.from(e.currentTarget.querySelectorAll<HTMLElement>('[role="treeitem"]'));
+    const idx = items.indexOf(target);
+    if (idx < 0) return;
+    const path = target.dataset["kumikoTreePath"];
+    const hasChildren = target.dataset["kumikoTreeHasChildren"] === "true";
+    const isExpanded = target.getAttribute("aria-expanded") === "true";
+
+    switch (e.key) {
+      case "ArrowDown": {
+        if (idx < items.length - 1) {
+          e.preventDefault();
+          items[idx + 1]?.focus();
+        }
+        break;
+      }
+      case "ArrowUp": {
+        if (idx > 0) {
+          e.preventDefault();
+          items[idx - 1]?.focus();
+        }
+        break;
+      }
+      case "ArrowRight": {
+        if (hasChildren && !isExpanded && path !== undefined) {
+          e.preventDefault();
+          handleToggle(path);
+        } else if (hasChildren && isExpanded && idx < items.length - 1) {
+          // Already expanded → move to first child (next visible item
+          // ist by DOM-order der erste child).
+          e.preventDefault();
+          items[idx + 1]?.focus();
+        }
+        break;
+      }
+      case "ArrowLeft": {
+        if (hasChildren && isExpanded && path !== undefined) {
+          e.preventDefault();
+          handleToggle(path);
+        }
+        // V.1.5a: kein parent-jump (würde flat-list-traversal brauchen,
+        // ARIA-Tree-Pattern would expect that — geht V.1.5b mit roving-
+        // tabindex). Aktuell ArrowLeft auf collapsed-item: no-op.
+        break;
+      }
+      case "Home": {
+        e.preventDefault();
+        items[0]?.focus();
+        break;
+      }
+      case "End": {
+        e.preventDefault();
+        items[items.length - 1]?.focus();
+        break;
+      }
+    }
+  };
+
   return (
     <aside
+      ref={asideRef}
       aria-label="Visual Tree"
       data-kumiko-layout="visual-tree"
       className="flex flex-col text-sm overflow-y-auto"
+      // biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: ARIA-tree pattern requires role=tree on container; <aside> is the right semantic outer element for a sidebar
+      role="tree"
+      onKeyDown={handleKeyDown}
+      onFocus={(e) => {
+        // Native focus auf einem treeitem (via Mouse-Click oder Arrow-
+        // Key's focus()) → setze focusedPath. Bubble-up vom child-row
+        // landet hier, e.target ist das treeitem.
+        const target = e.target as HTMLElement;
+        if (target.getAttribute("role") !== "treeitem") return;
+        const path = target.dataset["kumikoTreePath"];
+        if (path !== undefined && path !== focusedPath) setFocusedPath(path);
+      }}
     >
       {sortedProviders.map(([featureName, provider]) => (
         <ProviderBranch
           key={featureName}
           featureName={featureName}
           provider={provider}
-          ctx={DEFAULT_TREE_CTX}
+          entities={treeEntities.get(featureName) ?? EMPTY_ENTITY_LIST}
           expanded={expanded}
           onToggle={handleToggle}
+          focusedPath={focusedPath}
         />
       ))}
     </aside>
@@ -113,37 +213,97 @@ export function VisualTree({ workspaceId }: VisualTreeProps): ReactNode {
 // ProviderBranch — eine Sub-Section pro registrertem TreeProvider.
 // Jeder Provider liefert eine readonly TreeNode[] über Subscribe; jeder
 // Top-Level-Knoten wird via TreeNodeRenderer gerendert.
+//
+// **V.1.4 Subscribe-Error-Handling**: drei Error-Surfaces sind abgedeckt:
+//   1. provider() throws synchron → try/catch im useEffect setzt error
+//   2. subscribe(emit) throws synchron → same try/catch
+//   3. Provider-interner SSE/fetch fail't async → Provider muss
+//      `emit({ error: ... })` rufen statt empty-emit. Heutige Convention:
+//      Provider können einen Marker-TreeNode mit state="error" emitten
+//      (siehe text-content client-plugin: catch + emit([])). Recovery-
+//      Pfad ist Retry-Button im error-banner, der `attempt` increments
+//      → useEffect re-fires (deps haben attempt drin) → provider neu
+//      aufgerufen.
 function ProviderBranch({
   featureName,
   provider,
-  ctx,
+  entities,
   expanded,
   onToggle,
+  focusedPath,
 }: {
   readonly featureName: string;
   readonly provider: TreeChildrenSubscribe;
-  readonly ctx: TreeContext;
+  readonly entities: readonly string[];
   readonly expanded: ReadonlySet<string>;
   readonly onToggle: (path: string) => void;
+  readonly focusedPath: string | undefined;
 }): ReactNode {
   // null = noch nicht emitted (initial-Loading). Ein Provider der
   // niemals emittet bleibt damit sichtbar als „lädt …" und nicht
   // unsichtbar — Memory `[Sicherheit > Convenience]`.
   const [nodes, setNodes] = useState<readonly TreeNode[] | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [attempt, setAttempt] = useState(0);
+
+  // V.1.5b SSE-Tree-Refresh: subscribe live-events für die gelisteten
+  // entities, increment attempt → useEffect re-fires → provider re-mountet.
+  // Gleiche Mechanik wie der retry-button, daher single trigger.
+  const subscribeLive = useLiveEvents();
+  useEffect(() => {
+    if (entities.length === 0) return;
+    const unsubs = entities.map((entityName) =>
+      subscribeLive(entityName, () => setAttempt((n) => n + 1)),
+    );
+    return () => {
+      for (const u of unsubs) u();
+    };
+  }, [entities, subscribeLive]);
 
+  // `attempt` ist absichtlich in den deps: Retry-Button increments
+  // attempt → useEffect re-fires → provider neu aufgerufen. Biome's
+  // static-analysis sieht attempt nicht im body und meldet es als
+  // unnecessary — semantisch ist es der Trigger.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: attempt triggers retry
   useEffect(() => {
-    // TODO V.1.2: Subscribe-Error-Handling. Drei Error-Surfaces sind heute
-    // nicht abgedeckt: (1) provider(ctx) wirft synchron, (2) subscribe(emit)
-    // wirft synchron, (3) Provider-internes SSE/fetch wirft → emit nie
-    // gefeuert, „lädt …" bleibt unendlich. Fix-Shape hängt vom
-    // V.1.2-Consumer (text-content) ab — transient-network-blip vs.
-    // tenant-misconfig haben unterschiedliche Recovery-Pfade. Reload-
-    // Action im Knoten (state="error" + retry-Button) als minimaler
-    // Plan, aber ohne konkreten Failure-Mode-Anker keine richtige Spec.
-    const subscribe = provider(ctx);
-    const unsubscribe = subscribe(setNodes);
-    return unsubscribe;
-  }, [provider, ctx]);
+    setError(null);
+    setNodes(null);
+    try {
+      const subscribe = provider();
+      try {
+        const unsubscribe = subscribe(setNodes, (e) =>
+          setError(e instanceof Error ? e.message : String(e)),
+        );
+        return unsubscribe;
+      } catch (e) {
+        setError(e instanceof Error ? e.message : "Subscribe fehlgeschlagen.");
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Provider-Init fehlgeschlagen.");
+    }
+    return undefined;
+  }, [provider, attempt]);
+
+  if (error !== null) {
+    return (
+      <div
+        data-kumiko-tree-branch={featureName}
+        data-kumiko-tree-state="error"
+        className="flex items-center gap-2 px-2 py-1 text-xs text-destructive"
+      >
+        <span className="flex-1">
+          {featureName}: {error}
+        </span>
+        <button
+          type="button"
+          onClick={() => setAttempt((n) => n + 1)}
+          className="rounded border border-destructive/40 px-2 py-0.5 hover:bg-destructive/10"
+        >
+          Neu laden
+        </button>
+      </div>
+    );
+  }
 
   if (nodes === null) {
     return (
@@ -166,11 +326,11 @@ function ProviderBranch({
           <TreeNodeRenderer
             key={nodePath}
             node={node}
-            ctx={ctx}
             path={nodePath}
             expanded={expanded}
             onToggle={onToggle}
             depth={0}
+            focusedPath={focusedPath}
           />
         );
       })}

package/src/layout/workspace-shell.tsx

@@ -220,8 +220,7 @@ export function WorkspaceShell({
         </Sidebar>
       }
     >
-      {isTreeMode && <EditorPanel resolvers={resolvers} />}
-      {children}
+      {isTreeMode ? <EditorPanel resolvers={resolvers} /> : children}
     </AppLayout>
   );
 }

package/src/primitives/index.tsx

@@ -130,7 +130,16 @@ function DefaultBanner({
 
 // ---- Field (Label + Error) ----
 
-function DefaultField({ id, label, required, issues, children, testId }: FieldProps): ReactNode {
+function DefaultField({
+  id,
+  label,
+  required,
+  issues,
+  labelAppendix,
+  fieldAppendix,
+  children,
+  testId,
+}: FieldProps): ReactNode {
   const t = useTranslation();
   const hasError = issues !== undefined && issues.length > 0;
   return (
@@ -148,9 +157,11 @@ function DefaultField({ id, label, required, issues, children, testId }: FieldPr
         )}
       >
         {label}
+        {labelAppendix !== undefined && <>{labelAppendix}</>}
         {required === true && <span className="ml-0.5 text-destructive">*</span>}
       </LabelPrimitive.Root>
       {children}
+      {fieldAppendix !== undefined && <div className="mt-1">{fieldAppendix}</div>}
       {hasError && (
         <div
           role="alert"
@@ -1255,6 +1266,9 @@ function DefaultHeading({ variant = "page", children, testId }: HeadingProps): R
   );
 }
 
+import { ConfigCascadeView as DefaultConfigCascadeView } from "../components/config-cascade";
+import { ConfigSourceBadge as DefaultConfigSourceBadge } from "../components/config-source-badge";
+
 export const defaultPrimitives: CorePrimitives = {
   Button: DefaultButton,
   Banner: DefaultBanner,
@@ -1268,4 +1282,6 @@ export const defaultPrimitives: CorePrimitives = {
   Text: DefaultText,
   Heading: DefaultHeading,
   Dialog: DefaultDialog,
+  ConfigSourceBadge: DefaultConfigSourceBadge,
+  ConfigCascadeView: DefaultConfigCascadeView,
 };