docs(changelog): Version 1.8.0 abgeschlossen

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

CHANGELOG.md

@@ -4,13 +4,17 @@ Diese Liste beschreibt in einfachen Worten, was sich von Version zu Version an T
 
 ## Unveröffentlicht
 
+## 1.8.0 – 2026-09-30
+
 ### Neu
 
 - Dashboard: Neues Widget „Erinnerungen“. Sie legen eine Erinnerung mit Datum, Uhrzeit, Titel und Beschreibung an, und Tessera meldet sich genau zur gewählten Zeit: im Browser mit einer Benachrichtigung (der Browser fragt dafür einmal um Erlaubnis, und zwar beim ersten Anlegen), in der Desktop-App mit einer Windows-Benachrichtigung – auch wenn das Fenster im Infobereich liegt. Wenn Sie möchten, schickt Tessera zusätzlich eine E-Mail an Ihre Adresse, auch dann, wenn Tessera gerade nirgends geöffnet ist. Eine fällige Erinnerung bleibt im Widget hervorgehoben stehen, bis Sie „Erledigt“ wählen oder mit „Später erinnern“ verschieben – auf in 10 Minuten, in 1 Stunde oder morgen zur gleichen Uhrzeit; dann meldet sich Tessera (und bei Bedarf die E-Mail) noch einmal. Erinnerungen sind persönlich: nur Sie sehen und ändern Ihre. Für die Desktop-Benachrichtigungen braucht die Desktop-App ihre neue Version, die Sie über „Auf Version … aktualisieren“ im Menü des Tessera-Symbols erhalten; Widget und E-Mail funktionieren auch mit der bisherigen Version.
 
 ### Geändert
 
-- Dashboard: Es sieht jetzt auf jedem Bildschirm gleich aus. Tessera merkt sich die Fläche des Bildschirms, an dem Sie ein Dashboard zuerst öffnen, und zeigt es auf anderen Bildschirmen maßstäblich verkleinert oder vergrößert – samt Schrift und ohne Scrollen. Auf dem Handy bleibt es bei der bisherigen Anordnung untereinander.
+- Eigene Module: Einmal geöffnete Seiten bleiben im Hintergrund offen. Wechseln Sie zurück, ist die Seite sofort da – im selben Zustand, ohne neu zu laden. Tessera hält die fünf zuletzt benutzten offen; beim Abmelden werden sie geschlossen.
+- Dashboard, Favoriten: In der Kachelansicht stehen die Symbole enger beieinander; der Abstand zwischen ihnen ist etwa halb so groß, in eine Zeile passen mehr Favoriten. Passt ein Name nicht in eine Zeile, wird er kleiner geschrieben und auf zwei Zeilen umbrochen.
+- Dashboard: Es sieht jetzt auf jedem Bildschirm gleich aus. Tessera merkt sich die Fläche des Bildschirms, an dem Sie ein Dashboard zuerst öffnen, und zeigt es auf anderen Bildschirmen maßstäblich verkleinert oder vergrößert – samt Schrift und ohne Scrollen. Ist ein Dashboard länger als der Bildschirm, wird es so weit verkleinert, dass es ganz hineinpasst. Auf dem Handy bleibt es bei der bisherigen Anordnung untereinander.
 - Eigene Module: Neue Einträge sind mit der Kategorie „Eigene Module“ vorbelegt.
 - Dashboard: Der Kalender lässt sich nicht mehr so schmal ziehen, dass seine Überschrift abgeschnitten wird.
 - Eigene Module: Die Seite füllt jetzt den ganzen Inhaltsbereich. Name und Hinweiszeile darüber sind weggefallen – der Name steht ohnehin oben in der Leiste, und „In neuem Tab öffnen“ sitzt jetzt dort rechts.

apps/web/src/components/custom-modules/custom-module-form-modal.tsx

@@ -10,6 +10,7 @@ import {
   createCustomModule,
   updateCustomModule,
 } from '@/lib/custom-modules-api';
+import { useCustomModuleCacheStore } from '@/lib/stores/custom-module-cache-store';
 import { useCategoryLabel } from '@/lib/use-category-label';
 
 interface CustomModuleFormModalProps {
@@ -96,6 +97,10 @@ export function CustomModuleFormModal({
       const input = { name: trimmedName, url: trimmedUrl, category };
       if (mod) {
         await updateCustomModule(mod.id, input);
+        // Sitzungsspeicher der offen gehaltenen Module nachziehen — nur wenn
+        // das Modul dort schon liegt; eine neue Adresse laedt dessen <iframe> um.
+        const cache = useCustomModuleCacheStore.getState();
+        if (cache.modules[mod.id]) cache.remember({ id: mod.id, name: input.name, url: input.url });
       } else {
         await createCustomModule(shared ? { ...input, shared: true } : input);
       }

apps/web/src/components/custom-modules/delete-custom-module-dialog.tsx

@@ -3,6 +3,7 @@
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
 import { type CustomModule, deleteCustomModule } from '@/lib/custom-modules-api';
+import { useCustomModuleCacheStore } from '@/lib/stores/custom-module-cache-store';
 import { customModuleErrorText } from './custom-module-form-modal';
 
 interface DeleteCustomModuleDialogProps {
@@ -36,6 +37,8 @@ export function DeleteCustomModuleDialog({
     setError(null);
     try {
       await deleteCustomModule(mod.id);
+      // Offen gehaltenen <iframe> und Sitzungsspeicher des Moduls verwerfen.
+      useCustomModuleCacheStore.getState().forget(mod.id);
       onDeleted();
       onClose();
     } catch (err) {

apps/web/src/components/dashboard/dashboard-grid.test.tsx

@@ -5,6 +5,7 @@ import { afterEach, describe, expect, it, vi } from 'vitest';
 import { stubResizeObserver } from '@/test/fake-resize-observer';
 import {
   computeCanvasScale,
+  fitCanvasToContent,
   DASHBOARD_BOTTOM_GAP_PX,
   RESIZE_AXIS_FALLBACK,
   scaledPositionStrategy,
@@ -692,6 +693,22 @@ describe('Leinwand: Dashboard wie ein Bild mitskalieren', () => {
     return { outer, inner };
   }
 
+  describe('fitCanvasToContent', () => {
+    it('Inhalt passt in die Leinwand: Leinwand bleibt (1:1 am Original-PC)', () => {
+      expect(fitCanvasToContent({ w: 1641, h: 849 }, 700)).toEqual({ w: 1641, h: 849 });
+    });
+    it('Inhalt hoeher als die Leinwand: Inhaltshoehe zaehlt, damit nie gescrollt wird', () => {
+      expect(fitCanvasToContent({ w: 1641, h: 849 }, 940)).toEqual({ w: 1641, h: 940 });
+      // am Original-PC selbst: 849 / 940 -> alles passt hinein
+      expect(
+        computeCanvasScale({ w: 1641, h: 849 }, fitCanvasToContent({ w: 1641, h: 849 }, 940)),
+      ).toBeCloseTo(849 / 940);
+    });
+    it('unbrauchbare Hoehe: Leinwand bleibt', () => {
+      expect(fitCanvasToContent({ w: 1600, h: 800 }, Number.NaN)).toEqual({ w: 1600, h: 800 });
+    });
+  });
+
   describe('computeCanvasScale', () => {
     it('breitenbegrenzt: freier Platz unten', () => {
       expect(computeCanvasScale({ w: 1280, h: 900 }, { w: 1600, h: 800 })).toBe(0.8);
@@ -758,12 +775,23 @@ describe('Leinwand: Dashboard wie ein Bild mitskalieren', () => {
     cleanup();
 
     setInnerHeight(768);
+    // Rasterinhalt niedriger als die Leinwand (300 < 374) — sonst zaehlte die
+    // Inhaltshoehe (fitCanvasToContent).
+    stubResizeObserver({ width: 1000, height: 300 });
     const second = await renderGrid({ canvas: { w: 800, h: 374 } });
     // min(1000 / 800, 748 / 374) = 1.25
     expect(second.inner.style.transform).toBe('scale(1.25)');
     expect(captured.props?.width).toBe(800);
   });
 
+  it('Inhalt hoeher als die Leinwand: eingepasst, damit nie gescrollt wird', async () => {
+    stubResizeObserver({ width: 1000, height: 1600 });
+    setInnerHeight(820); // verfuegbar 800
+    const { inner } = await renderGrid({ canvas: { w: 1000, h: 800 } });
+    // min(1000 / 1000, 800 / 1600) = 0.5
+    expect(inner.style.transform).toBe('scale(0.5)');
+  });
+
   it('schmal (< 768): wie bisher — Containerbreite, kein transform, keine Erfassung', async () => {
     stubResizeObserver({ width: 600, height: 800 });
     const onCaptureCanvas = vi.fn();

apps/web/src/components/dashboard/dashboard-grid.tsx

@@ -147,6 +147,16 @@ export function computeCanvasScale(available: GridCanvas, canvas: GridCanvas): n
   return Number.isFinite(s) && s > 0 ? s : 1;
 }
 
+/**
+ * Leinwand fuer die Einpassung: ist der Inhalt (unskalierte Rasterhoehe)
+ * hoeher als die Leinwand, gilt die Inhaltshoehe, sonst die Leinwand selbst —
+ * so bleibt es am Original-PC bei 1:1, solange alles draufpasst.
+ */
+export function fitCanvasToContent(canvas: GridCanvas, contentHeight: number): GridCanvas {
+  if (!Number.isFinite(contentHeight) || contentHeight <= canvas.h) return canvas;
+  return { w: canvas.w, h: contentHeight };
+}
+
 /**
  * Positionsstrategie fuer ein per `transform: scale(s)` skaliertes Raster.
  *
@@ -409,7 +419,19 @@ export function DashboardGrid({
   // Desktop = verfuegbare Breite ab CANVAS_MIN_WIDTH; nur dort Leinwand.
   const isDesktop = width >= CANVAS_MIN_WIDTH;
   const scaled = isDesktop && canvas !== null;
-  const scale = scaled ? computeCanvasScale({ w: width, h: availableHeight }, canvas) : 1;
+  // "Nie scrollen" (Nutzerentscheidung): ist der Inhalt hoeher als die
+  // Leinwand (schon am Original-PC laenger als der Bildschirm), zaehlt die
+  // Inhaltshoehe — dann passt auch dort alles hinein, und jeder andere
+  // Bildschirm zeigt dasselbe Bild. Im Bearbeitungsmodus bleibt die Hoehe vom
+  // Beginn des Bearbeitens stehen, sonst wuerde das Raster beim Ziehen nach
+  // unten laufend kleiner und die Kachel liefe dem Mauszeiger davon.
+  const editHeightRef = useRef<number | null>(null);
+  if (isEditMode && editHeightRef.current === null) editHeightRef.current = innerHeight;
+  if (!isEditMode) editHeightRef.current = null;
+  const contentHeight = isEditMode ? (editHeightRef.current ?? innerHeight) : innerHeight;
+  const scale = scaled
+    ? computeCanvasScale({ w: width, h: availableHeight }, fitCanvasToContent(canvas, contentHeight))
+    : 1;
   const positionStrategy = useMemo(() => scaledPositionStrategy(scale), [scale]);
 
   // Leinwand erfassen: nur mit eingehaengtem Raster (also mit Kacheln), am

apps/web/src/components/dashboard/widgets/favorites-widget.test.tsx

@@ -37,20 +37,20 @@ vi.mock('@/lib/dashboard-api', () => ({
   updateWidgetConfig: vi.fn().mockResolvedValue(undefined),
 }));
 
+import { updateWidgetConfig } from '@/lib/dashboard-api';
 import {
+  createFavorite,
+  deleteFavorite,
   FavoriteRequestError,
   fetchFavorites,
-  createFavorite,
-  updateFavorite,
-  deleteFavorite,
-  reorderFavorites,
-  uploadFavoriteIcon,
   removeFavoriteIcon,
+  reorderFavorites,
+  updateFavorite,
+  uploadFavoriteIcon,
 } from '@/lib/favorites-api';
-import { updateWidgetConfig } from '@/lib/dashboard-api';
 
 // Must import AFTER mocks
-import { FavoritesWidget } from './favorites-widget';
+import { FavoritesWidget, LauncherLabel } from './favorites-widget';
 
 // Typed mock helpers
 const mockFetch = fetchFavorites as ReturnType<typeof vi.fn>;
@@ -106,13 +106,7 @@ describe('FavoritesWidget', () => {
   });
 
   it('calls fetchFavorites with instanceId on mount and renders link titles', async () => {
-    render(
+    render(<FavoritesWidget instanceId="fav-1" config={{}} isEditMode={false} />);
-      <FavoritesWidget
-        instanceId="fav-1"
-        config={{}}
-        isEditMode={false}
-      />,
-    );
 
     // fetchFavorites must be called with the instanceId (widgetId scope — Pitfall 3)
     expect(mockFetch).toHaveBeenCalledWith('fav-1');
@@ -127,13 +121,7 @@ describe('FavoritesWidget', () => {
   it('shows empty message when fetchFavorites resolves to empty array', async () => {
     mockFetch.mockResolvedValue([]);
 
-    render(
+    render(<FavoritesWidget instanceId="fav-1" config={{}} isEditMode={false} />);
-      <FavoritesWidget
-        instanceId="fav-1"
-        config={{}}
-        isEditMode={false}
-      />,
-    );
 
     await waitFor(() => {
       expect(screen.getByText('favorites.empty')).toBeInTheDocument();
@@ -143,13 +131,7 @@ describe('FavoritesWidget', () => {
   it('add: submit form in edit mode calls createFavorite with widgetId, title, url', async () => {
     mockFetch.mockResolvedValue([]);
 
-    render(
+    render(<FavoritesWidget instanceId="fav-1" config={{}} isEditMode={true} />);
-      <FavoritesWidget
-        instanceId="fav-1"
-        config={{}}
-        isEditMode={true}
-      />,
-    );
 
     await waitFor(() => {
       expect(screen.getByText('favorites.empty')).toBeInTheDocument();
@@ -189,13 +171,7 @@ describe('FavoritesWidget', () => {
   });
 
   it('edit: clicking edit, changing title, saving calls updateFavorite with id and new title', async () => {
-    render(
+    render(<FavoritesWidget instanceId="fav-1" config={{}} isEditMode={true} />);
-      <FavoritesWidget
-        instanceId="fav-1"
-        config={{}}
-        isEditMode={true}
-      />,
-    );
 
     await waitFor(() => {
       expect(screen.getByText('GitHub')).toBeInTheDocument();
@@ -239,13 +215,7 @@ describe('FavoritesWidget', () => {
   });
 
   it('delete: clicking delete calls deleteFavorite with id and removes the row', async () => {
-    render(
+    render(<FavoritesWidget instanceId="fav-1" config={{}} isEditMode={true} />);
-      <FavoritesWidget
-        instanceId="fav-1"
-        config={{}}
-        isEditMode={true}
-      />,
-    );
 
     await waitFor(() => {
       expect(screen.getByText('GitHub')).toBeInTheDocument();
@@ -271,13 +241,7 @@ describe('FavoritesWidget', () => {
   });
 
   it('view toggle: switching to grid in edit mode renders grid container', async () => {
-    render(
+    render(<FavoritesWidget instanceId="fav-1" config={{ viewMode: 'list' }} isEditMode={true} />);
-      <FavoritesWidget
-        instanceId="fav-1"
-        config={{ viewMode: 'list' }}
-        isEditMode={true}
-      />,
-    );
 
     await waitFor(() => {
       expect(screen.getByText('GitHub')).toBeInTheDocument();
@@ -299,13 +263,7 @@ describe('FavoritesWidget', () => {
   });
 
   it('letter fallback: link with iconUrl null renders first uppercase letter of title', async () => {
-    render(
+    render(<FavoritesWidget instanceId="fav-1" config={{}} isEditMode={false} />);
-      <FavoritesWidget
-        instanceId="fav-1"
-        config={{}}
-        isEditMode={false}
-      />,
-    );
 
     await waitFor(() => {
       expect(screen.getByText('Notion')).toBeInTheDocument();
@@ -318,24 +276,16 @@ describe('FavoritesWidget', () => {
   // quick-260916-iex: optionaler Titel
   describe('optionaler Titel (quick-260916-iex)', () => {
     it('Ansicht ohne (leeren/ungueltigen) Titel zeigt keine Kopfzeile', async () => {
-      const r1 = render(
+      const r1 = render(<FavoritesWidget instanceId="fav-1" config={{}} isEditMode={false} />);
-        <FavoritesWidget instanceId="fav-1" config={{}} isEditMode={false} />,
-      );
       await waitFor(() => {
         expect(screen.getByText('GitHub')).toBeInTheDocument();
       });
       expect(screen.queryByRole('heading')).not.toBeInTheDocument();
-      expect(
+      expect(screen.queryByPlaceholderText('favorites.titlePlaceholder')).not.toBeInTheDocument();
-        screen.queryByPlaceholderText('favorites.titlePlaceholder'),
-      ).not.toBeInTheDocument();
       r1.unmount();
 
       const r2 = render(
-        <FavoritesWidget
+        <FavoritesWidget instanceId="fav-1" config={{ title: '   ' }} isEditMode={false} />,
-          instanceId="fav-1"
-          config={{ title: '   ' }}
-          isEditMode={false}
-        />,
       );
       await waitFor(() => {
         expect(screen.getByText('GitHub')).toBeInTheDocument();
@@ -343,13 +293,7 @@ describe('FavoritesWidget', () => {
       expect(screen.queryByRole('heading')).not.toBeInTheDocument();
       r2.unmount();
 
-      render(
+      render(<FavoritesWidget instanceId="fav-1" config={{ title: 42 }} isEditMode={false} />);
-        <FavoritesWidget
-          instanceId="fav-1"
-          config={{ title: 42 }}
-          isEditMode={false}
-        />,
-      );
       await waitFor(() => {
         expect(screen.getByText('GitHub')).toBeInTheDocument();
       });
@@ -358,11 +302,7 @@ describe('FavoritesWidget', () => {
 
     it('Ansicht mit Titel zeigt eine H2-Kopfzeile', async () => {
       render(
-        <FavoritesWidget
+        <FavoritesWidget instanceId="fav-1" config={{ title: 'Werkzeuge' }} isEditMode={false} />,
-          instanceId="fav-1"
-          config={{ title: 'Werkzeuge' }}
-          isEditMode={false}
-        />,
       );
       await waitFor(() => {
         expect(screen.getByText('GitHub')).toBeInTheDocument();
@@ -371,15 +311,11 @@ describe('FavoritesWidget', () => {
       expect(heading.tagName).toBe('H2');
       expect(heading.className).toContain('text-sm');
       expect(heading.className).toContain('font-semibold');
-      expect(
+      expect(screen.queryByPlaceholderText('favorites.titlePlaceholder')).not.toBeInTheDocument();
-        screen.queryByPlaceholderText('favorites.titlePlaceholder'),
-      ).not.toBeInTheDocument();
     });
 
     it('Bearbeitungsmodus ohne Titel zeigt ein Titelfeld statt einer Kopfzeile', async () => {
-      render(
+      render(<FavoritesWidget instanceId="fav-1" config={{}} isEditMode={true} />);
-        <FavoritesWidget instanceId="fav-1" config={{}} isEditMode={true} />,
-      );
       await waitFor(() => {
         expect(screen.getByText('GitHub')).toBeInTheDocument();
       });
@@ -391,25 +327,17 @@ describe('FavoritesWidget', () => {
       expect(titleField.className).toContain('widgetNoDrag');
       expect(screen.queryByRole('heading')).not.toBeInTheDocument();
 
-      expect(
+      expect(screen.getByRole('button', { name: /favorites\.listView/i })).toBeInTheDocument();
-        screen.getByRole('button', { name: /favorites\.listView/i }),
+      expect(screen.getByRole('button', { name: /favorites\.gridView/i })).toBeInTheDocument();
-      ).toBeInTheDocument();
-      expect(
-        screen.getByRole('button', { name: /favorites\.gridView/i }),
-      ).toBeInTheDocument();
     });
 
     it('entprellt das Speichern des Titels um 1500 ms', async () => {
       vi.useFakeTimers({ toFake: ['setTimeout', 'clearTimeout'] });
       try {
-        render(
+        render(<FavoritesWidget instanceId="fav-1" config={{}} isEditMode={true} />);
-          <FavoritesWidget instanceId="fav-1" config={{}} isEditMode={true} />,
-        );
         await act(async () => {});
 
-        const titleField = screen.getByPlaceholderText(
+        const titleField = screen.getByPlaceholderText('favorites.titlePlaceholder');
-          'favorites.titlePlaceholder',
-        );
 
         for (const value of ['W', 'We', 'Werkzeuge']) {
           await act(async () => {
@@ -444,9 +372,7 @@ describe('FavoritesWidget', () => {
   // Sortierpfeile im Bearbeitungsmodus.
   describe('Ersatzbild und Sortierung (quick-260917-jdd)', () => {
     it('Ersatzbild bei iconUrl null: Direktbild statt Proxy-Bild, referrerpolicy no-referrer', async () => {
-      render(
+      render(<FavoritesWidget instanceId="fav-1" config={{}} isEditMode={false} />);
-        <FavoritesWidget instanceId="fav-1" config={{}} isEditMode={false} />,
-      );
 
       await waitFor(() => {
         expect(screen.getByText('Notion')).toBeInTheDocument();
@@ -460,9 +386,7 @@ describe('FavoritesWidget', () => {
     });
 
     it('Kette Proxy -> direkt -> Buchstabe', async () => {
-      render(
+      render(<FavoritesWidget instanceId="fav-1" config={{}} isEditMode={false} />);
-        <FavoritesWidget instanceId="fav-1" config={{}} isEditMode={false} />,
-      );
 
       await waitFor(() => {
         expect(screen.getByText('GitHub')).toBeInTheDocument();
@@ -561,12 +485,17 @@ describe('FavoritesWidget', () => {
 
     it('kein Direktbild bei Nicht-http-URL', async () => {
       mockFetch.mockResolvedValue([
-        { id: 'fav-id-3', widgetId: 'fav-1', title: 'Ablage', url: 'ftp://files.example', iconUrl: null, position: 0 },
+        {
+          id: 'fav-id-3',
+          widgetId: 'fav-1',
+          title: 'Ablage',
+          url: 'ftp://files.example',
+          iconUrl: null,
+          position: 0,
+        },
       ]);
 
-      render(
+      render(<FavoritesWidget instanceId="fav-1" config={{}} isEditMode={false} />);
-        <FavoritesWidget instanceId="fav-1" config={{}} isEditMode={false} />,
-      );
 
       await waitFor(() => {
         expect(screen.getByText('Ablage')).toBeInTheDocument();
@@ -583,9 +512,7 @@ describe('FavoritesWidget', () => {
         { ...BASE_FAVORITES[0], position: 1 },
       ]);
 
-      render(
+      render(<FavoritesWidget instanceId="fav-1" config={{}} isEditMode={true} />);
-        <FavoritesWidget instanceId="fav-1" config={{}} isEditMode={true} />,
-      );
 
       await waitFor(() => {
         expect(screen.getByText('GitHub')).toBeInTheDocument();
@@ -618,9 +545,7 @@ describe('FavoritesWidget', () => {
     it('Fehler beim Sortieren -> Neuladen, Fehlermeldung, alte Reihenfolge', async () => {
       mockReorder.mockRejectedValue(new Error('boom'));
 
-      render(
+      render(<FavoritesWidget instanceId="fav-1" config={{}} isEditMode={true} />);
-        <FavoritesWidget instanceId="fav-1" config={{}} isEditMode={true} />,
-      );
 
       await waitFor(() => {
         expect(screen.getByText('GitHub')).toBeInTheDocument();
@@ -656,9 +581,7 @@ describe('FavoritesWidget', () => {
 
     await waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(1));
 
-    rerender(
+    rerender(<FavoritesWidget instanceId="fav-1" config={{}} isEditMode={false} />);
-      <FavoritesWidget instanceId="fav-1" config={{}} isEditMode={false} />,
-    );
 
     await waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(1));
   });
@@ -761,7 +684,7 @@ describe('FavoritesWidget', () => {
       });
     });
 
-    it('Datei im Bearbeitungsformular waehlen, Speichern -> updateFavorite, danach uploadFavoriteIcon(\'fav-id-1\', Datei); Formular schliesst', async () => {
+    it("Datei im Bearbeitungsformular waehlen, Speichern -> updateFavorite, danach uploadFavoriteIcon('fav-id-1', Datei); Formular schliesst", async () => {
       mockUpdate.mockResolvedValue({ ...BASE_FAVORITES[0], iconVersion: 1 });
       mockUploadIcon.mockResolvedValue({
         ...BASE_FAVORITES[0],
@@ -789,7 +712,10 @@ describe('FavoritesWidget', () => {
       });
 
       await waitFor(() => {
-        expect(mockUpdate).toHaveBeenCalledWith('fav-id-1', expect.objectContaining({ title: 'GitHub' }));
+        expect(mockUpdate).toHaveBeenCalledWith(
+          'fav-id-1',
+          expect.objectContaining({ title: 'GitHub' }),
+        );
       });
       await waitFor(() => {
         expect(mockUploadIcon).toHaveBeenCalledWith('fav-id-1', file);
@@ -857,12 +783,16 @@ describe('FavoritesWidget', () => {
       expect(screen.getByTestId('favorite-icon-upload-fav-id-1')).toBeInTheDocument();
     });
 
-    it('Knopf favorites.iconRemoveButton nur bei gesetztem uploadedIconMime; Klick -> removeFavoriteIcon(\'fav-id-1\'), danach verschwindet der Knopf, Formular bleibt offen', async () => {
+    it("Knopf favorites.iconRemoveButton nur bei gesetztem uploadedIconMime; Klick -> removeFavoriteIcon('fav-id-1'), danach verschwindet der Knopf, Formular bleibt offen", async () => {
       mockFetch.mockResolvedValue([
         { ...BASE_FAVORITES[0], uploadedIconMime: 'image/png', iconVersion: 1 },
         BASE_FAVORITES[1],
       ]);
-      mockRemoveIcon.mockResolvedValue({ ...BASE_FAVORITES[0], uploadedIconMime: null, iconVersion: 2 });
+      mockRemoveIcon.mockResolvedValue({
+        ...BASE_FAVORITES[0],
+        uploadedIconMime: null,
+        iconVersion: 2,
+      });
 
       render(<FavoritesWidget instanceId="fav-1" config={{}} isEditMode={true} />);
 
@@ -881,7 +811,9 @@ describe('FavoritesWidget', () => {
         expect(mockRemoveIcon).toHaveBeenCalledWith('fav-id-1');
       });
       await waitFor(() => {
-        expect(screen.queryByRole('button', { name: 'favorites.iconRemoveButton' })).not.toBeInTheDocument();
+        expect(
+          screen.queryByRole('button', { name: 'favorites.iconRemoveButton' }),
+        ).not.toBeInTheDocument();
       });
       expect(screen.getByTestId('favorite-icon-upload-fav-id-1')).toBeInTheDocument();
     });
@@ -895,7 +827,9 @@ describe('FavoritesWidget', () => {
 
       openEditForGitHub();
 
-      expect(screen.queryByRole('button', { name: 'favorites.iconRemoveButton' })).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', { name: 'favorites.iconRemoveButton' }),
+      ).not.toBeInTheDocument();
     });
 
     it('Hinzufuegen mit gewaehlter Datei -> createFavorite, danach uploadFavoriteIcon(created.id, Datei)', async () => {
@@ -935,7 +869,11 @@ describe('FavoritesWidget', () => {
 
       await waitFor(() => {
         expect(mockCreate).toHaveBeenCalledWith(
-          expect.objectContaining({ widgetId: 'fav-1', title: 'New Link', url: 'https://example.com' }),
+          expect.objectContaining({
+            widgetId: 'fav-1',
+            title: 'New Link',
+            url: 'https://example.com',
+          }),
         );
       });
       await waitFor(() => {
@@ -947,3 +885,31 @@ describe('FavoritesWidget', () => {
     });
   });
 });
+
+describe('LauncherLabel — Beschriftung in der Kachelansicht', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  function mockWidths(scroll: number, client: number) {
+    vi.spyOn(HTMLElement.prototype, 'scrollWidth', 'get').mockReturnValue(scroll);
+    vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(client);
+  }
+
+  it('bleibt in normaler Groesse, wenn der Titel in eine Zeile passt', () => {
+    mockWidths(40, 60);
+    render(<LauncherLabel text="Wiki" />);
+    const label = screen.getByText('Wiki');
+    expect(label).not.toHaveAttribute('data-small');
+    expect(label.className).toContain('text-xs');
+  });
+
+  it('wird kleiner und zweizeilig, wenn der Titel nicht in eine Zeile passt', () => {
+    mockWidths(120, 60);
+    render(<LauncherLabel text="Reisekostenabrechnung" />);
+    const label = screen.getByText('Reisekostenabrechnung');
+    expect(label).toHaveAttribute('data-small', 'true');
+    expect(label.className).toContain('text-[10px]');
+    expect(label.className).toContain('line-clamp-2');
+  });
+});

apps/web/src/components/dashboard/widgets/favorites-widget.tsx

@@ -1,21 +1,21 @@
 'use client';
 
-import { WidgetIcon } from './widget-icon';
-import { type FormEvent, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslations } from 'next-intl';
+import { type FormEvent, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import type { WidgetProps } from '@/components/dashboard/widget-registry';
 import { updateWidgetConfig } from '@/lib/dashboard-api';
 import {
-  FavoriteRequestError,
   createFavorite,
   deleteFavorite,
+  type FavoriteLink,
+  FavoriteRequestError,
   fetchFavorites,
   removeFavoriteIcon,
   reorderFavorites,
   updateFavorite,
   uploadFavoriteIcon,
-  type FavoriteLink,
 } from '@/lib/favorites-api';
-import type { WidgetProps } from '@/components/dashboard/widget-registry';
+import { WidgetIcon } from './widget-icon';
 
 // quick-260916-iex: wie DEBOUNCE_MS im Notiz-Widget
 const TITLE_DEBOUNCE_MS = 1500;
@@ -51,11 +51,7 @@ function favoriteErrorKey(err: unknown): string {
  * - Sortierung per Pfeilen im Bearbeitungsmodus (260917-jdd): optimistisch,
  *   persistiert ueber PUT /favorites/order
  */
-export function FavoritesWidget({
+export function FavoritesWidget({ instanceId, config, isEditMode }: WidgetProps) {
-  instanceId,
-  config,
-  isEditMode,
-}: WidgetProps) {
   const t = useTranslations('widgets');
 
   const [favorites, setFavorites] = useState<FavoriteLink[]>([]);
@@ -68,12 +64,8 @@ export function FavoritesWidget({
   );
 
   // Optionaler Titel (quick-260916-iex)
-  const [title, setTitle] = useState<string>(
+  const [title, setTitle] = useState<string>(typeof config.title === 'string' ? config.title : '');
-    typeof config.title === 'string' ? config.title : '',
+  const titleTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
-  );
-  const titleTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(
-    undefined,
-  );
 
   useEffect(() => {
     return () => clearTimeout(titleTimerRef.current);
@@ -335,174 +327,167 @@ export function FavoritesWidget({
             />
           ) : (
             hasTitle && (
-              <h2 className="truncate text-sm font-semibold text-foreground">
+              <h2 className="truncate text-sm font-semibold text-foreground">{title.trim()}</h2>
-                {title.trim()}
-              </h2>
             )
           )}
         </div>
       )}
 
-      <div className={`flex flex-1 flex-col gap-2 overflow-auto px-2 pb-2 ${showHeader ? '' : 'pt-2'}`}>
+      <div
-      {/* View mode toggle (edit mode only) */}
+        className={`flex flex-1 flex-col gap-2 overflow-auto px-2 pb-2 ${showHeader ? '' : 'pt-2'}`}
-      {isEditMode && (
+      >
-        // role="toolbar" (D-03): die bisherige Beschriftung ("Favoriten")
+        {/* View mode toggle (edit mode only) */}
-        // war sachlich falsch fuer einen Umschalter zwischen Listen- und
+        {isEditMode && (
-        // Kachelansicht — hier greift D-03 im Sinn des Streichens (die
+          // role="toolbar" (D-03): die bisherige Beschriftung ("Favoriten")
-        // Beschriftung trug keine echte Bedeutung), eine richtige
+          // war sachlich falsch fuer einen Umschalter zwischen Listen- und
-        // Beschriftung ist trotzdem besser als gar keine.
+          // Kachelansicht — hier greift D-03 im Sinn des Streichens (die
-        <div
+          // Beschriftung trug keine echte Bedeutung), eine richtige
-          className="flex gap-1 widgetNoDrag"
+          // Beschriftung ist trotzdem besser als gar keine.
-          role="toolbar"
-          aria-label={t('favorites.viewModeLabel')}
-        >
-          <button
-            type="button"
-            onClick={() => handleViewMode('list')}
-            className={`px-2 py-1 text-xs rounded ${
-              viewMode === 'list'
-                ? 'bg-foreground text-background'
-                : 'bg-muted text-muted-foreground hover:text-foreground'
-            }`}
-          >
-            {t('favorites.listView')}
-          </button>
-          <button
-            type="button"
-            onClick={() => handleViewMode('grid')}
-            className={`px-2 py-1 text-xs rounded ${
-              viewMode === 'grid'
-                ? 'bg-foreground text-background'
-                : 'bg-muted text-muted-foreground hover:text-foreground'
-            }`}
-          >
-            {t('favorites.gridView')}
-          </button>
-        </div>
-      )}
-
-      {/* Status messages */}
-      {loading && (
-        <p className="text-xs text-muted-foreground">{t('favorites.loading')}</p>
-      )}
-      {error && (
-        <p className="text-xs text-destructive">{error}</p>
-      )}
-
-      {/* Favorites list / grid */}
-      {!loading && sortedFavorites.length === 0 && (
-        <p className="text-xs text-muted-foreground">{t('favorites.empty')}</p>
-      )}
-
-      {!loading && sortedFavorites.length > 0 && (
-        viewMode === 'grid' ? (
           <div
-            data-testid="favorites-grid"
+            className="flex gap-1 widgetNoDrag"
-            className="grid grid-cols-[repeat(auto-fill,minmax(76px,1fr))] gap-1"
+            role="toolbar"
+            aria-label={t('favorites.viewModeLabel')}
           >
-            {sortedFavorites.map((fav, index) => (
+            <button
-              <FavoriteTile
+              type="button"
-                launcher
+              onClick={() => handleViewMode('list')}
-                key={fav.id}
+              className={`px-2 py-1 text-xs rounded ${
-                fav={fav}
+                viewMode === 'list'
-                isEditMode={isEditMode}
+                  ? 'bg-foreground text-background'
-                editingId={editingId}
+                  : 'bg-muted text-muted-foreground hover:text-foreground'
-                editTitle={editTitle}
+              }`}
-                editUrl={editUrl}
+            >
-                editIconUrl={editIconUrl}
+              {t('favorites.listView')}
-                editError={editError}
+            </button>
-                editBusy={editBusy}
+            <button
-                getFallbackLetter={getFallbackLetter}
+              type="button"
-                onStartEdit={startEdit}
+              onClick={() => handleViewMode('grid')}
-                onCancelEdit={cancelEdit}
+              className={`px-2 py-1 text-xs rounded ${
-                onSaveEdit={handleSaveEdit}
+                viewMode === 'grid'
-                onDelete={handleDelete}
+                  ? 'bg-foreground text-background'
-                onEditTitleChange={setEditTitle}
+                  : 'bg-muted text-muted-foreground hover:text-foreground'
-                onEditUrlChange={setEditUrl}
+              }`}
-                onEditIconUrlChange={setEditIconUrl}
+            >
-                onEditIconFileChange={setEditIconFile}
+              {t('favorites.gridView')}
-                onRemoveIcon={handleRemoveIcon}
+            </button>
-                canMoveUp={index > 0}
-                canMoveDown={index < sortedFavorites.length - 1}
-                onMove={(fid, dir) => void handleMove(fid, dir)}
-                t={t}
-              />
-            ))}
           </div>
-        ) : (
+        )}
-          <div
-            data-testid="favorites-list"
-            className="flex flex-col gap-0.5"
-          >
-            {sortedFavorites.map((fav, index) => (
-              <FavoriteTile
-                key={fav.id}
-                fav={fav}
-                isEditMode={isEditMode}
-                editingId={editingId}
-                editTitle={editTitle}
-                editUrl={editUrl}
-                editIconUrl={editIconUrl}
-                editError={editError}
-                editBusy={editBusy}
-                getFallbackLetter={getFallbackLetter}
-                onStartEdit={startEdit}
-                onCancelEdit={cancelEdit}
-                onSaveEdit={handleSaveEdit}
-                onDelete={handleDelete}
-                onEditTitleChange={setEditTitle}
-                onEditUrlChange={setEditUrl}
-                onEditIconUrlChange={setEditIconUrl}
-                onEditIconFileChange={setEditIconFile}
-                onRemoveIcon={handleRemoveIcon}
-                canMoveUp={index > 0}
-                canMoveDown={index < sortedFavorites.length - 1}
-                onMove={(fid, dir) => void handleMove(fid, dir)}
-                t={t}
-              />
-            ))}
-          </div>
-        )
-      )}
 
-      {/* Add form (edit mode only, D-04) */}
+        {/* Status messages */}
-      {isEditMode && (
+        {loading && <p className="text-xs text-muted-foreground">{t('favorites.loading')}</p>}
-        <form
+        {error && <p className="text-xs text-destructive">{error}</p>}
-          onSubmit={(e) => void handleAdd(e)}
+
-          className="flex flex-col gap-1 pt-1 border-t border-border widgetNoDrag"
+        {/* Favorites list / grid */}
-        >
+        {!loading && sortedFavorites.length === 0 && (
-          <input
+          <p className="text-xs text-muted-foreground">{t('favorites.empty')}</p>
-            className="w-full rounded border border-input bg-background px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
+        )}
-            value={newTitle}
+
-            onChange={(e) => setNewTitle(e.target.value)}
+        {!loading &&
-            placeholder={t('favorites.addTitle')}
+          sortedFavorites.length > 0 &&
-          />
+          (viewMode === 'grid' ? (
-          <input
+            <div
-            className="w-full rounded border border-input bg-background px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
+              data-testid="favorites-grid"
-            value={newUrl}
+              className="grid grid-cols-[repeat(auto-fill,minmax(52px,1fr))] gap-1"
-            onChange={(e) => setNewUrl(e.target.value)}
+            >
-            placeholder={t('favorites.addUrl')}
+              {sortedFavorites.map((fav, index) => (
-          />
+                <FavoriteTile
-          {/* 260923-lrr: eigenes Symbol beim Hinzufuegen */}
+                  launcher
-          <label className="text-xs text-muted-foreground">
+                  key={fav.id}
-            {t('favorites.iconUploadLabel')}
+                  fav={fav}
+                  isEditMode={isEditMode}
+                  editingId={editingId}
+                  editTitle={editTitle}
+                  editUrl={editUrl}
+                  editIconUrl={editIconUrl}
+                  editError={editError}
+                  editBusy={editBusy}
+                  getFallbackLetter={getFallbackLetter}
+                  onStartEdit={startEdit}
+                  onCancelEdit={cancelEdit}
+                  onSaveEdit={handleSaveEdit}
+                  onDelete={handleDelete}
+                  onEditTitleChange={setEditTitle}
+                  onEditUrlChange={setEditUrl}
+                  onEditIconUrlChange={setEditIconUrl}
+                  onEditIconFileChange={setEditIconFile}
+                  onRemoveIcon={handleRemoveIcon}
+                  canMoveUp={index > 0}
+                  canMoveDown={index < sortedFavorites.length - 1}
+                  onMove={(fid, dir) => void handleMove(fid, dir)}
+                  t={t}
+                />
+              ))}
+            </div>
+          ) : (
+            <div data-testid="favorites-list" className="flex flex-col gap-0.5">
+              {sortedFavorites.map((fav, index) => (
+                <FavoriteTile
+                  key={fav.id}
+                  fav={fav}
+                  isEditMode={isEditMode}
+                  editingId={editingId}
+                  editTitle={editTitle}
+                  editUrl={editUrl}
+                  editIconUrl={editIconUrl}
+                  editError={editError}
+                  editBusy={editBusy}
+                  getFallbackLetter={getFallbackLetter}
+                  onStartEdit={startEdit}
+                  onCancelEdit={cancelEdit}
+                  onSaveEdit={handleSaveEdit}
+                  onDelete={handleDelete}
+                  onEditTitleChange={setEditTitle}
+                  onEditUrlChange={setEditUrl}
+                  onEditIconUrlChange={setEditIconUrl}
+                  onEditIconFileChange={setEditIconFile}
+                  onRemoveIcon={handleRemoveIcon}
+                  canMoveUp={index > 0}
+                  canMoveDown={index < sortedFavorites.length - 1}
+                  onMove={(fid, dir) => void handleMove(fid, dir)}
+                  t={t}
+                />
+              ))}
+            </div>
+          ))}
+
+        {/* Add form (edit mode only, D-04) */}
+        {isEditMode && (
+          <form
+            onSubmit={(e) => void handleAdd(e)}
+            className="flex flex-col gap-1 pt-1 border-t border-border widgetNoDrag"
+          >
             <input
-              type="file"
+              className="w-full rounded border border-input bg-background px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
-              data-testid="favorite-add-icon-upload"
+              value={newTitle}
-              ref={newIconFileInputRef}
+              onChange={(e) => setNewTitle(e.target.value)}
-              accept="image/png,image/jpeg,image/gif,image/webp,image/x-icon,image/vnd.microsoft.icon,image/svg+xml,.ico,.svg"
+              placeholder={t('favorites.addTitle')}
-              className="mt-0.5 block w-full text-xs"
-              onChange={(e) => setNewIconFile(e.target.files?.[0] ?? null)}
             />
-          </label>
+            <input
-          <button
+              className="w-full rounded border border-input bg-background px-2 py-1 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
-            type="submit"
+              value={newUrl}
-            className="w-full rounded bg-primary px-2 py-1 text-xs text-primary-foreground hover:opacity-90 transition-opacity"
+              onChange={(e) => setNewUrl(e.target.value)}
-          >
+              placeholder={t('favorites.addUrl')}
-            {t('favorites.addButton')}
+            />
-          </button>
+            {/* 260923-lrr: eigenes Symbol beim Hinzufuegen */}
-        </form>
+            <label className="text-xs text-muted-foreground">
-      )}
+              {t('favorites.iconUploadLabel')}
+              <input
+                type="file"
+                data-testid="favorite-add-icon-upload"
+                ref={newIconFileInputRef}
+                accept="image/png,image/jpeg,image/gif,image/webp,image/x-icon,image/vnd.microsoft.icon,image/svg+xml,.ico,.svg"
+                className="mt-0.5 block w-full text-xs"
+                onChange={(e) => setNewIconFile(e.target.files?.[0] ?? null)}
+              />
+            </label>
+            <button
+              type="submit"
+              className="w-full rounded bg-primary px-2 py-1 text-xs text-primary-foreground hover:opacity-90 transition-opacity"
+            >
+              {t('favorites.addButton')}
+            </button>
+          </form>
+        )}
       </div>
     </div>
   );
@@ -677,6 +662,60 @@ type FavoriteTileProps = {
   launcher?: boolean;
 };
 
+/**
+ * Beschriftung einer Favoriten-Kachel in der Kachelansicht. Passt der Titel
+ * in normaler Groesse (12 px) nicht in eine Zeile, wuerde er an die
+ * Nachbarkachel stossen bzw. mitten im Wort umbrechen — dann wird die Schrift
+ * kleiner (10 px) und darf zweizeilig umbrechen (Silbentrennung, danach "…").
+ * Gemessen wird immer in normaler Groesse und einzeilig, damit das Ergebnis
+ * nicht von der eigenen Umschaltung abhaengt (keine Rueckkopplung). Der
+ * ResizeObserver misst neu, wenn die Kachel breiter oder schmaler wird;
+ * scrollWidth/clientWidth sind Layoutmasse und von der Dashboard-Skalierung
+ * (transform) unberuehrt.
+ */
+export function LauncherLabel({ text }: { text: string }) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const [small, setSmall] = useState(false);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: neuer Titel = neu messen, der Wert selbst steht im DOM
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const measure = () => {
+      const prev = {
+        whiteSpace: el.style.whiteSpace,
+        fontSize: el.style.fontSize,
+        display: el.style.display,
+      };
+      el.style.whiteSpace = 'nowrap';
+      el.style.fontSize = '12px';
+      el.style.display = 'block';
+      const overflow = el.scrollWidth > el.clientWidth + 1;
+      el.style.whiteSpace = prev.whiteSpace;
+      el.style.fontSize = prev.fontSize;
+      el.style.display = prev.display;
+      setSmall(overflow);
+    };
+    measure();
+    if (typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [text]);
+
+  return (
+    <span
+      ref={ref}
+      data-small={small ? 'true' : undefined}
+      className={`line-clamp-2 w-full break-words hyphens-auto ${
+        small ? 'text-[10px] leading-3' : 'text-xs leading-4'
+      }`}
+    >
+      {text}
+    </span>
+  );
+}
+
 function FavoriteTile({
   fav,
   isEditMode,
@@ -728,9 +767,11 @@ function FavoriteTile({
             large={launcher}
           />
 
-          <span className={launcher ? 'line-clamp-2 w-full break-words text-xs leading-4' : 'truncate text-sm'}>
+          {launcher ? (
-            {fav.title}
+            <LauncherLabel text={fav.title} />
-          </span>
+          ) : (
+            <span className="truncate text-sm">{fav.title}</span>
+          )}
         </a>
 
         {/* Action buttons (edit mode only, D-04) */}

apps/web/src/components/layout/app-shell.tsx

@@ -1,12 +1,13 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { useSidebarStore } from '@/lib/stores/sidebar-store';
-import { installErrorBuffer } from '@/lib/error-buffer';
 import { Header } from '@/components/layout/header';
 import { Sidebar } from '@/components/layout/sidebar';
+import { CustomModuleFrameHost } from '@/components/modules/custom-module-frame-host';
 import { ReleaseNoticeHost } from '@/components/release-notice/release-notice-host';
 import { ReminderNotifier } from '@/components/reminders/reminder-notifier';
+import { installErrorBuffer } from '@/lib/error-buffer';
+import { useSidebarStore } from '@/lib/stores/sidebar-store';
 
 export function AppShell({ children }: { children: React.ReactNode }) {
   const isCollapsed = useSidebarStore((s) => s.isCollapsed);
@@ -24,9 +25,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
 
   // Desktop: sidebar pushes content via margin-left
   // Mobile: sidebar overlays, no margin needed (handled by app-shell-main class in globals.css)
-  const sidebarWidth = isCollapsed
+  const sidebarWidth = isCollapsed ? 'var(--sidebar-width-collapsed)' : 'var(--sidebar-width)';
-    ? 'var(--sidebar-width-collapsed)'
-    : 'var(--sidebar-width)';
 
   return (
     <div className="min-h-screen bg-background">
@@ -35,7 +34,9 @@ export function AppShell({ children }: { children: React.ReactNode }) {
       {/* Seitenrahmen seit quick-260916-bwo halbiert: p-3 (12 px) statt vorher 24 px (Stufe 6), gilt fuer alle Seiten. */}
       <main
         className="app-shell-main min-h-[calc(100vh-var(--header-height))] transition-all duration-200 p-3"
-        style={mounted ? { '--current-sidebar-width': sidebarWidth } as React.CSSProperties : undefined}
+        style={
+          mounted ? ({ '--current-sidebar-width': sidebarWidth } as React.CSSProperties) : undefined
+        }
       >
         {children}
       </main>
@@ -46,6 +47,10 @@ export function AppShell({ children }: { children: React.ReactNode }) {
           Benachrichtigung auf jeder Portalseite ausloest — nicht nur, wenn die
           Kachel auf dem Dashboard sichtbar ist. Rendert nichts. */}
       <ReminderNotifier />
+      {/* Eigene Module offen halten (30.09.2026): die <iframe>s leben hier im
+          Rahmen und ueberstehen so das Wegnavigieren; die Modulseite zeigt nur
+          einen Platzhalter, ueber den der Behaelter das aktive Modul legt. */}
+      <CustomModuleFrameHost />
     </div>
   );
 }

apps/web/src/components/layout/header.tsx

@@ -1,18 +1,19 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
 import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 import { useTranslations } from 'next-intl';
+import { useEffect, useRef, useState } from 'react';
 import { TesseraLogo } from '@/components/brand/tessera-logo';
-import { useSidebarStore } from '@/lib/stores/sidebar-store';
-import { useAuthStore } from '@/lib/stores/auth-store';
-import { fetchSessionState, logout } from '@/lib/auth-actions';
-import { buildNextParam } from '@/lib/safe-next';
-import { ThemeToggle } from '@/components/theme-toggle';
 import { BugReportButton } from '@/components/bug-report/bug-report-button';
 import { HEADER_ACTIONS_SLOT_ID, HEADER_CENTER_SLOT_ID } from '@/components/layout/header-slot';
-import { usePathname } from 'next/navigation';
+import { ThemeToggle } from '@/components/theme-toggle';
+import { fetchSessionState, logout } from '@/lib/auth-actions';
+import { buildNextParam } from '@/lib/safe-next';
+import { useAuthStore } from '@/lib/stores/auth-store';
+import { useCustomModuleCacheStore } from '@/lib/stores/custom-module-cache-store';
 import { resolvePageTitle, useNavStore } from '@/lib/stores/nav-store';
+import { useSidebarStore } from '@/lib/stores/sidebar-store';
 
 export function Header() {
   const t = useTranslations();
@@ -60,13 +61,8 @@ export function Header() {
           return;
         }
         redirectedRef.current = true;
-        const next = buildNextParam(
+        const next = buildNextParam(window.location.pathname, window.location.search);
-          window.location.pathname,
+        window.location.href = next ? `/login?next=${encodeURIComponent(next)}` : '/login';
-          window.location.search,
-        );
-        window.location.href = next
-          ? `/login?next=${encodeURIComponent(next)}`
-          : '/login';
       }
       // 'unavailable' (T-gyd-02): kein Redirect, bisheriges stilles
       // Verhalten -- ein API-Ausfall darf keine Abmelde-Schleife ausloesen.
@@ -76,10 +72,7 @@ export function Header() {
   // Close dropdown on outside click
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
-      if (
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node)
-      ) {
         setDropdownOpen(false);
       }
     }
@@ -91,9 +84,7 @@ export function Header() {
 
   const [avatarError, setAvatarError] = useState(false);
 
-  const userInitial = user
+  const userInitial = user ? (user.displayName ?? user.username).charAt(0).toUpperCase() : '?';
-    ? (user.displayName ?? user.username).charAt(0).toUpperCase()
-    : '?';
 
   const roleLabel = user ? tHeader(`role.${user.role}`) : '';
 
@@ -101,11 +92,7 @@ export function Header() {
   // der Name der aktuellen Seite bzw. des Moduls.
   const navModules = useNavStore((s) => s.modules);
   const pageTitle = resolvePageTitle(pathname, navModules);
-  const pageTitleText = pageTitle
+  const pageTitleText = pageTitle ? ('key' in pageTitle ? t(pageTitle.key) : pageTitle.text) : null;
-    ? 'key' in pageTitle
-      ? t(pageTitle.key)
-      : pageTitle.text
-    : null;
 
   return (
     <header className="sticky top-0 z-50 flex h-[var(--header-height)] items-center bg-appbar px-2 text-appbar-foreground sm:px-3 dark:shadow-[inset_0_-1px_0_oklch(1_0_0/0.07)]">
@@ -258,7 +245,18 @@ export function Header() {
                         : 'text-foreground hover:bg-muted'
                     }`}
                   >
-                    <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <svg
+                      aria-hidden="true"
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
                       <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
                     </svg>
                     {tHeader('admin.label')}
@@ -273,6 +271,9 @@ export function Header() {
                   type="button"
                   onClick={() => {
                     setDropdownOpen(false);
+                    // Offen gehaltene eigene Module und ihr Sitzungsspeicher
+                    // gehoeren zur Sitzung — beim Abmelden alles verwerfen.
+                    useCustomModuleCacheStore.getState().clear();
                     logout();
                   }}
                   className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-foreground hover:bg-muted transition-colors"

apps/web/src/components/modules/custom-module-frame-host.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { XFRAME_SANDBOX } from '@/components/dashboard/widgets/xframe-config';
+import { checkCustomModuleUrl } from '@/lib/custom-modules-api';
+import { useAuthStore } from '@/lib/stores/auth-store';
+import { useCustomModuleCacheStore } from '@/lib/stores/custom-module-cache-store';
+
+interface FrameRect {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+}
+
+/**
+ * Behaelter fuer die offen gehaltenen eigenen Module (30.09.2026). Dauerhaft
+ * im Portal-Rahmen (AppShell) eingehaengt, damit ein <iframe> das Wegnavigieren
+ * ueberlebt: zurueck auf dem Modul ist die Fremdseite sofort da, mit
+ * Scrollstand, Anmeldung und Eingaben.
+ *
+ * Positionierung — warum Ueberlagern statt Einhaengen in die Seite: Ein
+ * <iframe>, das im DOM verschoben wird (auch per Portal in einen anderen
+ * Elternknoten), laedt in allen Browsern neu. Deshalb bleibt jedes <iframe>
+ * immer im selben Elternknoten hier, und die Modulseite rendert nur einen
+ * leeren Platzhalter (custom-module-view.tsx). Das aktive <iframe> wird per
+ * `position: fixed` deckungsgleich ueber den Platzhalter gelegt; gemessen wird
+ * mit `getBoundingClientRect` bei jeder Groessenaenderung des Platzhalters
+ * (ResizeObserver — faengt auch das Ein-/Ausklappen der Seitenleiste ab, deren
+ * Uebergang die Breite des Inhaltsbereichs Bild fuer Bild aendert), bei
+ * Fenstergroesse, beim Scrollen und am Ende von CSS-Uebergaengen. Eine reine
+ * CSS-Nachbildung der Rahmenmasse (Kopfzeile, Seitenleiste, Innenabstand)
+ * waere zerbrechlicher: jede Layoutaenderung dort muesste hier nachgezogen
+ * werden.
+ *
+ * Versteckt wird mit `visibility: hidden` + `pointer-events: none` an der
+ * zuletzt gemessenen Stelle — NICHT mit `display: none`: dort haette die
+ * Fremdseite die Groesse 0, manche Seiten rechnen dann ihr Layout neu und
+ * verlieren den Scrollstand. `visibility: hidden` nimmt das <iframe> zudem aus
+ * Tab-Reihenfolge und Vorlesebaum.
+ *
+ * Ebene: `z-index: 10` — ueber dem Inhaltsbereich (Platzhalter), aber unter
+ * Seitenleiste (30), Kopfzeile und Dialogen (50) und der Handy-Seitenleiste
+ * (60), die das Modul also weiterhin ueberdecken.
+ *
+ * Sandbox und Attribute wie bisher in der Modulansicht bzw. im XFrame-Widget
+ * (`XFRAME_SANDBOX`, `allow=""`, kein Referrer); ein <iframe> entsteht nur bei
+ * einer https-Adresse ohne Zugangsdaten (T-9WC-03).
+ */
+export function CustomModuleFrameHost() {
+  const modules = useCustomModuleCacheStore((s) => s.modules);
+  const openIds = useCustomModuleCacheStore((s) => s.openIds);
+  const active = useCustomModuleCacheStore((s) => s.active);
+  const clear = useCustomModuleCacheStore((s) => s.clear);
+  const [rect, setRect] = useState<FrameRect | null>(null);
+
+  // Benutzerwechsel ohne Neuladen der Seite: nichts vom vorigen Benutzer
+  // weiterzeigen. (Das Abmelden selbst leert den Speicher in der Kopfzeile.)
+  const userId = useAuthStore((s) => s.user?.id ?? null);
+  const lastUserId = useRef<string | null>(null);
+  useEffect(() => {
+    if (userId && lastUserId.current && lastUserId.current !== userId) clear();
+    if (userId) lastUserId.current = userId;
+  }, [userId, clear]);
+
+  const slot = active?.slot ?? null;
+  useLayoutEffect(() => {
+    if (!slot) return;
+    let frame = 0;
+    const measure = () => {
+      frame = 0;
+      const r = slot.getBoundingClientRect();
+      setRect((prev) =>
+        prev &&
+        prev.top === r.top &&
+        prev.left === r.left &&
+        prev.width === r.width &&
+        prev.height === r.height
+          ? prev
+          : { top: r.top, left: r.left, width: r.width, height: r.height },
+      );
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(measure);
+    };
+    measure();
+    const observer = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(schedule) : null;
+    observer?.observe(slot);
+    window.addEventListener('resize', schedule);
+    window.addEventListener('scroll', schedule, true);
+    document.addEventListener('transitionend', schedule, true);
+    return () => {
+      if (frame) cancelAnimationFrame(frame);
+      observer?.disconnect();
+      window.removeEventListener('resize', schedule);
+      window.removeEventListener('scroll', schedule, true);
+      document.removeEventListener('transitionend', schedule, true);
+    };
+  }, [slot]);
+
+  // Immer derselbe Elternknoten, auch ohne offene Module — sonst haengte React
+  // die <iframe>s beim Wechsel zwischen leer und nicht leer neu ein.
+  return (
+    <div data-testid="custom-module-frame-host">
+      {openIds.map((id) => {
+        const mod = modules[id];
+        if (!mod || checkCustomModuleUrl(mod.url) !== 'ok') return null;
+        const visible = active?.id === id && rect !== null;
+        return (
+          <iframe
+            key={id}
+            src={mod.url}
+            title={mod.name}
+            sandbox={XFRAME_SANDBOX}
+            allow=""
+            referrerPolicy="no-referrer"
+            className="fixed z-10 rounded-lg border-0 bg-background"
+            style={{
+              top: rect?.top ?? 0,
+              left: rect?.left ?? 0,
+              width: rect?.width ?? 0,
+              height: rect?.height ?? 0,
+              visibility: visible ? 'visible' : 'hidden',
+              pointerEvents: visible ? 'auto' : 'none',
+            }}
+            aria-hidden={visible ? undefined : true}
+            data-custom-module-id={id}
+            data-testid="custom-module-frame"
+          />
+        );
+      })}
+    </div>
+  );
+}

apps/web/src/components/modules/custom-module-view.test.tsx

@@ -1,4 +1,4 @@
-import { cleanup, render, screen, waitFor } from '@testing-library/react';
+import { act, cleanup, render, screen, waitFor } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { XFRAME_SANDBOX } from '@/components/dashboard/widgets/xframe-config';
 import { CustomModuleRequestError } from '@/lib/custom-modules-api';
@@ -24,12 +24,33 @@ vi.mock('@/lib/custom-modules-api', async () => {
   return { ...actual, getCustomModule: mockGetCustomModule };
 });
 
+import { useCustomModuleCacheStore } from '@/lib/stores/custom-module-cache-store';
+import { CustomModuleFrameHost } from './custom-module-frame-host';
 import { CustomModuleView } from './custom-module-view';
 
-function mod(url: string) {
+/**
+ * Der <iframe> lebt seit dem Offenhalten (30.09.2026) im Behaelter des
+ * Portal-Rahmens; die Modulseite zeigt nur den Platzhalter. Die Tests rendern
+ * deshalb beide nebeneinander wie in AppShell. `route` bildet den
+ * Seitenwechsel nach: nur die Modulseite wechselt, der Behaelter bleibt.
+ */
+function Portal({ route }: { route: string | null }) {
+  return (
+    <>
+      <main>{route ? <CustomModuleView id={route} /> : <p>Dashboard</p>}</main>
+      <CustomModuleFrameHost />
+    </>
+  );
+}
+
+function renderModule(id: string) {
+  return render(<Portal route={id} />);
+}
+
+function mod(url: string, id = 'abc', name = 'Wiki') {
   return {
-    id: 'abc',
+    id,
-    name: 'Wiki',
+    name,
     url,
     category: 'infrastructure',
     createdAt: '2026-09-29T00:00:00.000Z',
@@ -39,6 +60,7 @@ function mod(url: string) {
 
 beforeEach(() => {
   mockGetCustomModule.mockReset();
+  useCustomModuleCacheStore.getState().clear();
 });
 
 afterEach(() => {
@@ -48,7 +70,7 @@ afterEach(() => {
 describe('CustomModuleView', () => {
   it('rendert den Rahmen mit Sandbox, ohne Referrer und ohne allow', async () => {
     mockGetCustomModule.mockResolvedValue(mod('https://example.com/wiki'));
-    render(<CustomModuleView id="abc" />);
+    renderModule('abc');
 
     const frame = await screen.findByTitle('Wiki');
     expect(frame.tagName).toBe('IFRAME');
@@ -62,7 +84,7 @@ describe('CustomModuleView', () => {
 
   it('zeigt immer den Link „In neuem Tab öffnen“, aber keine Name- oder Hinweiszeile', async () => {
     mockGetCustomModule.mockResolvedValue(mod('https://example.com/wiki'));
-    render(<CustomModuleView id="abc" />);
+    renderModule('abc');
 
     const link = await screen.findByRole('link', { name: 'In neuem Tab öffnen' });
     expect(link).toHaveAttribute('href', 'https://example.com/wiki');
@@ -77,7 +99,7 @@ describe('CustomModuleView', () => {
     document.body.appendChild(slot);
     try {
       mockGetCustomModule.mockResolvedValue(mod('https://example.com/wiki'));
-      render(<CustomModuleView id="abc" />);
+      renderModule('abc');
       const link = await screen.findByRole('link', { name: 'In neuem Tab öffnen' });
       expect(slot.contains(link)).toBe(true);
     } finally {
@@ -92,7 +114,7 @@ describe('CustomModuleView', () => {
     'https://user:pw@example.com',
   ])('rendert bei der Adresse %s weder Rahmen noch Link', async (url) => {
     mockGetCustomModule.mockResolvedValue(mod(url));
-    const { container } = render(<CustomModuleView id="abc" />);
+    const { container } = renderModule('abc');
 
     await screen.findByText('Ungültige Adresse');
     expect(container.querySelector('iframe')).toBeNull();
@@ -101,7 +123,7 @@ describe('CustomModuleView', () => {
 
   it('zeigt bei 404 den Nicht-gefunden-Text', async () => {
     mockGetCustomModule.mockResolvedValue(null);
-    const { container } = render(<CustomModuleView id="weg" />);
+    const { container } = renderModule('weg');
 
     await waitFor(() => {
       expect(screen.getByText('Dieses Modul gibt es nicht mehr.')).toBeInTheDocument();
@@ -115,7 +137,7 @@ describe('CustomModuleView', () => {
     ['Netzwerkfehler', new TypeError('Failed to fetch')],
   ])('zeigt bei %s „konnte nicht geladen werden“ statt „nicht gefunden“', async (_, err) => {
     mockGetCustomModule.mockRejectedValue(err);
-    const { container } = render(<CustomModuleView id="abc" />);
+    const { container } = renderModule('abc');
 
     expect(await screen.findByRole('alert')).toHaveTextContent(
       'Dieses Modul konnte nicht geladen werden.',
@@ -124,3 +146,99 @@ describe('CustomModuleView', () => {
     expect(container.querySelector('iframe')).toBeNull();
   });
 });
+
+describe('Eigene Module offen halten', () => {
+  it('haelt den Rahmen beim Weg- und Zuruecknavigieren als dasselbe Element im DOM', async () => {
+    mockGetCustomModule.mockResolvedValue(mod('https://example.com/wiki'));
+    const { rerender } = render(<Portal route="abc" />);
+    const frame = await screen.findByTitle('Wiki');
+    expect(frame).toHaveStyle({ visibility: 'visible' });
+
+    rerender(<Portal route={null} />);
+    expect(screen.getByText('Dashboard')).toBeInTheDocument();
+    const hidden = document.querySelector('iframe');
+    expect(hidden).toBe(frame);
+    expect(frame.isConnected).toBe(true);
+    expect(frame).toHaveStyle({ visibility: 'hidden', pointerEvents: 'none' });
+
+    rerender(<Portal route="abc" />);
+    await waitFor(() => expect(frame).toHaveStyle({ visibility: 'visible' }));
+    expect(document.querySelector('iframe')).toBe(frame);
+  });
+
+  it('zeigt ein schon geladenes Modul sofort und laedt im Hintergrund nach', async () => {
+    useCustomModuleCacheStore.getState().remember(mod('https://example.com/alt'));
+    let resolve: (value: ReturnType<typeof mod>) => void = () => {};
+    mockGetCustomModule.mockReturnValue(
+      new Promise((r) => {
+        resolve = r;
+      }),
+    );
+    renderModule('abc');
+
+    // Ohne auf die API zu warten: kein Ladehinweis, Rahmen schon da.
+    expect(screen.queryByText('Wird geladen')).toBeNull();
+    const frame = screen.getByTitle('Wiki');
+    expect(frame).toHaveAttribute('src', 'https://example.com/alt');
+    expect(mockGetCustomModule).toHaveBeenCalledWith('abc');
+
+    // Nachgeladene neue Adresse landet im selben Rahmen.
+    await act(async () => {
+      resolve(mod('https://example.com/neu'));
+    });
+    expect(screen.getByTitle('Wiki')).toBe(frame);
+    expect(frame).toHaveAttribute('src', 'https://example.com/neu');
+  });
+
+  it('bleibt bei gespeichertem Stand sichtbar, wenn nur das Nachladen scheitert', async () => {
+    useCustomModuleCacheStore.getState().remember(mod('https://example.com/wiki'));
+    mockGetCustomModule.mockRejectedValue(new TypeError('Failed to fetch'));
+    renderModule('abc');
+
+    await waitFor(() => expect(mockGetCustomModule).toHaveBeenCalled());
+    expect(screen.queryByRole('alert')).toBeNull();
+    expect(screen.getByTitle('Wiki').tagName).toBe('IFRAME');
+  });
+
+  it('verwirft bei 404 Speicherstand und offenen Rahmen und zeigt „nicht gefunden“', async () => {
+    mockGetCustomModule.mockResolvedValue(mod('https://example.com/wiki'));
+    const { rerender } = render(<Portal route="abc" />);
+    await screen.findByTitle('Wiki');
+    rerender(<Portal route={null} />);
+
+    mockGetCustomModule.mockResolvedValue(null);
+    rerender(<Portal route="abc" />);
+
+    expect(await screen.findByText('Dieses Modul gibt es nicht mehr.')).toBeInTheDocument();
+    expect(document.querySelector('iframe')).toBeNull();
+    const state = useCustomModuleCacheStore.getState();
+    expect(state.modules.abc).toBeUndefined();
+    expect(state.openIds).toEqual([]);
+  });
+
+  it('haelt hoechstens fuenf Module offen und verwirft das am laengsten unbenutzte', async () => {
+    mockGetCustomModule.mockImplementation(async (id: string) =>
+      mod(`https://example.com/${id}`, id, `Modul ${id}`),
+    );
+    const { rerender } = render(<Portal route="m1" />);
+    await screen.findByTitle('Modul m1');
+    for (const id of ['m2', 'm3', 'm4', 'm5', 'm6']) {
+      rerender(<Portal route={id} />);
+      await screen.findByTitle(`Modul ${id}`);
+    }
+
+    expect(document.querySelectorAll('iframe')).toHaveLength(5);
+    expect(screen.queryByTitle('Modul m1')).toBeNull();
+    expect(screen.getByTitle('Modul m2')).toBeInTheDocument();
+  });
+
+  it('verwirft beim Leeren des Speichers (Abmelden) alle Rahmen', async () => {
+    mockGetCustomModule.mockResolvedValue(mod('https://example.com/wiki'));
+    const { rerender } = render(<Portal route="abc" />);
+    await screen.findByTitle('Wiki');
+    rerender(<Portal route={null} />);
+
+    act(() => useCustomModuleCacheStore.getState().clear());
+    expect(document.querySelector('iframe')).toBeNull();
+  });
+});

apps/web/src/components/modules/custom-module-view.tsx

@@ -1,17 +1,13 @@
 'use client';
 
 import { useTranslations } from 'next-intl';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { XFRAME_SANDBOX } from '@/components/dashboard/widgets/xframe-config';
 import { HEADER_ACTIONS_SLOT_ID } from '@/components/layout/header-slot';
-import { type CustomModule, checkCustomModuleUrl, getCustomModule } from '@/lib/custom-modules-api';
+import { checkCustomModuleUrl, getCustomModule } from '@/lib/custom-modules-api';
+import { useCustomModuleCacheStore } from '@/lib/stores/custom-module-cache-store';
 
-type LoadState =
+type LoadStatus = 'loading' | 'missing' | 'failed' | 'ready';
-  | { status: 'loading' }
-  | { status: 'missing' }
-  | { status: 'failed' }
-  | { status: 'ready'; mod: CustomModule };
 
 /**
  * Rahmen-Ansicht eines eigenen Moduls (quick-260929-9wc, D-06): der Rahmen
@@ -25,47 +21,83 @@ type LoadState =
  * `javascript:` oder `http:` wird nie gerendert (T-9WC-03).
  * Nur ein 404 heisst „gibt es nicht mehr“; 403, 500 oder ein Netzwerkfehler
  * zeigen „konnte nicht geladen werden“ — der Eintrag existiert vielleicht noch.
+ *
+ * Offen halten (30.09.2026): Der <iframe> selbst lebt NICHT mehr hier, sondern
+ * im Behaelter `CustomModuleFrameHost` im Portal-Rahmen; diese Seite rendert
+ * nur den Platzhalter, ueber den der Behaelter ihn legt (Begruendung dort).
+ * Name und Adresse kommen aus dem Sitzungsspeicher
+ * (`custom-module-cache-store.ts`): ein schon einmal geladenes Modul erscheint
+ * sofort, `getCustomModule` laeuft trotzdem im Hintergrund. Eine geaenderte
+ * Adresse landet so im Speicher und laedt den <iframe> um; ein 404 verwirft den
+ * Eintrag samt <iframe> und zeigt „nicht gefunden“. Scheitert NUR das
+ * Nachladen (403, 500, Netz) bei vorhandenem Speicherstand, bleibt das Modul
+ * sichtbar — ohne Speicherstand gilt wie bisher „konnte nicht geladen werden“.
  */
 export function CustomModuleView({ id }: { id: string }) {
   const t = useTranslations('customModules');
-  const [state, setState] = useState<LoadState>({ status: 'loading' });
+  const mod = useCustomModuleCacheStore((s) => s.modules[id]);
+  const remember = useCustomModuleCacheStore((s) => s.remember);
+  const forget = useCustomModuleCacheStore((s) => s.forget);
+  const activate = useCustomModuleCacheStore((s) => s.activate);
+  const deactivate = useCustomModuleCacheStore((s) => s.deactivate);
+  const [status, setStatus] = useState<LoadStatus>(() =>
+    useCustomModuleCacheStore.getState().modules[id] ? 'ready' : 'loading',
+  );
   const [actionsSlot, setActionsSlot] = useState<HTMLElement | null>(null);
+  const slotRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     setActionsSlot(document.getElementById(HEADER_ACTIONS_SLOT_ID));
   }, []);
 
   useEffect(() => {
     let cancelled = false;
-    setState({ status: 'loading' });
+    const hasCached = () => Boolean(useCustomModuleCacheStore.getState().modules[id]);
+    setStatus(hasCached() ? 'ready' : 'loading');
     getCustomModule(id)
-      .then((mod) => {
+      .then((loaded) => {
         if (cancelled) return;
-        setState(mod ? { status: 'ready', mod } : { status: 'missing' });
+        if (loaded) {
+          remember(loaded);
+          setStatus('ready');
+        } else {
+          forget(id);
+          setStatus('missing');
+        }
       })
       .catch(() => {
-        if (!cancelled) setState({ status: 'failed' });
+        if (!cancelled) setStatus(hasCached() ? 'ready' : 'failed');
       });
     return () => {
       cancelled = true;
     };
-  }, [id]);
+  }, [id, remember, forget]);
 
-  if (state.status === 'loading') {
+  const urlOk = mod ? checkCustomModuleUrl(mod.url) === 'ok' : false;
-    return <div className="p-4 text-sm text-muted-foreground">{t('loading')}</div>;
+  const showFrame = status === 'ready' && urlOk;
-  }
+
-  if (state.status === 'missing') {
+  // Platzhalter beim Behaelter anmelden; beim Verlassen wird der <iframe> nur
+  // versteckt. Wechselt die Adresse auf ungueltig, verschwindet der
+  // Platzhalter und damit auch die Anmeldung (`showFrame`).
+  useEffect(() => {
+    const slot = slotRef.current;
+    if (!showFrame || !slot) return;
+    activate(id, slot);
+    return () => deactivate(slot);
+  }, [showFrame, id, activate, deactivate]);
+
+  if (status === 'missing') {
     return <div className="p-4 text-sm text-muted-foreground">{t('notFound')}</div>;
   }
-  if (state.status === 'failed') {
+  if (status === 'failed') {
     return (
       <div role="alert" className="p-4 text-sm text-destructive">
         {t('loadError')}
       </div>
     );
   }
-
+  if (status === 'loading' || !mod) {
-  const { mod } = state;
+    return <div className="p-4 text-sm text-muted-foreground">{t('loading')}</div>;
-  const urlOk = checkCustomModuleUrl(mod.url) === 'ok';
+  }
 
   const openLink = urlOk ? (
     <a
@@ -98,14 +130,10 @@ export function CustomModuleView({ id }: { id: string }) {
     <div className="flex h-[calc(100vh-var(--header-height)-1.5rem)] min-h-[320px] flex-col gap-2">
       {openLink && (actionsSlot ? createPortal(openLink, actionsSlot) : openLink)}
       {urlOk ? (
-        <iframe
+        <div
-          src={mod.url}
+          ref={slotRef}
-          title={mod.name}
+          className="w-full flex-1 rounded-lg bg-background"
-          sandbox={XFRAME_SANDBOX}
+          data-testid="custom-module-slot"
-          allow=""
-          referrerPolicy="no-referrer"
-          className="w-full flex-1 rounded-lg border-0 bg-background"
-          data-testid="custom-module-frame"
         />
       ) : (
         <div className="rounded-md border border-border p-4 text-sm text-muted-foreground">

apps/web/src/lib/stores/custom-module-cache-store.test.ts

@@ -0,0 +1,83 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import {
+  CUSTOM_MODULE_KEEP_ALIVE_MAX,
+  touchLru,
+  useCustomModuleCacheStore,
+} from './custom-module-cache-store';
+
+describe('touchLru', () => {
+  it('setzt ein neues Modul nach vorn ohne zu verwerfen', () => {
+    expect(touchLru(['a', 'b'], 'c', 5)).toEqual({ recent: ['c', 'a', 'b'], evicted: [] });
+  });
+
+  it('holt ein vorhandenes Modul nach vorn, ohne es zu verdoppeln', () => {
+    expect(touchLru(['a', 'b', 'c'], 'c', 5)).toEqual({ recent: ['c', 'a', 'b'], evicted: [] });
+  });
+
+  it('verwirft ueber der Grenze das am laengsten unbenutzte', () => {
+    expect(touchLru(['e', 'd', 'c', 'b', 'a'], 'f', 5)).toEqual({
+      recent: ['f', 'e', 'd', 'c', 'b'],
+      evicted: ['a'],
+    });
+  });
+
+  it('haelt das gerade benutzte Modul auch bei unsinniger Grenze', () => {
+    expect(touchLru(['a'], 'b', 0)).toEqual({ recent: ['b'], evicted: ['a'] });
+  });
+});
+
+describe('useCustomModuleCacheStore', () => {
+  const slot = () => document.createElement('div');
+  const remember = (id: string) =>
+    useCustomModuleCacheStore.getState().remember({ id, name: id, url: `https://x.test/${id}` });
+
+  beforeEach(() => {
+    useCustomModuleCacheStore.getState().clear();
+  });
+
+  it('haelt die Einhaengereihenfolge stabil und verwirft nach LRU', () => {
+    const ids = Array.from({ length: CUSTOM_MODULE_KEEP_ALIVE_MAX + 1 }, (_, i) => `m${i}`);
+    for (const id of ids) remember(id);
+    const { activate } = useCustomModuleCacheStore.getState();
+    for (const id of ids.slice(0, CUSTOM_MODULE_KEEP_ALIVE_MAX)) activate(id, slot());
+    // m0 erneut benutzen -> m1 ist jetzt am laengsten unbenutzt.
+    activate('m0', slot());
+    expect(useCustomModuleCacheStore.getState().openIds).toEqual(['m0', 'm1', 'm2', 'm3', 'm4']);
+
+    activate('m5', slot());
+    const state = useCustomModuleCacheStore.getState();
+    expect(state.openIds).toEqual(['m0', 'm2', 'm3', 'm4', 'm5']);
+    expect(state.recent[0]).toBe('m5');
+    // Metadaten bleiben — nur der offene Rahmen wird verworfen.
+    expect(state.modules.m1).toBeDefined();
+  });
+
+  it('aktiviert kein Modul ohne Metadaten', () => {
+    useCustomModuleCacheStore.getState().activate('unbekannt', slot());
+    expect(useCustomModuleCacheStore.getState().openIds).toEqual([]);
+    expect(useCustomModuleCacheStore.getState().active).toBeNull();
+  });
+
+  it('deaktiviert nur den eigenen Platzhalter', () => {
+    remember('a');
+    const first = slot();
+    const { activate, deactivate } = useCustomModuleCacheStore.getState();
+    activate('a', first);
+    deactivate(slot());
+    expect(useCustomModuleCacheStore.getState().active?.slot).toBe(first);
+    deactivate(first);
+    expect(useCustomModuleCacheStore.getState().active).toBeNull();
+    expect(useCustomModuleCacheStore.getState().openIds).toEqual(['a']);
+  });
+
+  it('vergisst ein Modul samt offenem Rahmen', () => {
+    remember('a');
+    useCustomModuleCacheStore.getState().activate('a', slot());
+    useCustomModuleCacheStore.getState().forget('a');
+    const state = useCustomModuleCacheStore.getState();
+    expect(state.modules).toEqual({});
+    expect(state.openIds).toEqual([]);
+    expect(state.recent).toEqual([]);
+    expect(state.active).toBeNull();
+  });
+});

apps/web/src/lib/stores/custom-module-cache-store.ts

@@ -0,0 +1,102 @@
+import { create } from 'zustand';
+import type { CustomModule } from '@/lib/custom-modules-api';
+
+/**
+ * Eigene Module offen halten (30.09.2026, Nutzerwunsch „der
+ * Aufruf dauert jedes Mal lange“). Zwei Dinge liegen hier im Speicher der
+ * Sitzung (bewusst OHNE persist — nach dem Neuladen der Seite ist alles leer):
+ *
+ * 1. `modules`: Name und Adresse je bereits geladenem Modul. Ein erneuter
+ *    Aufruf zeigt sofort diesen Stand und laedt im Hintergrund nach
+ *    (custom-module-view.tsx), statt erst auf `getCustomModule` zu warten.
+ * 2. `openIds`/`recent`: welche Module ihren <iframe> behalten
+ *    (custom-module-frame-host.tsx). `openIds` ist die Einhaengereihenfolge
+ *    und bleibt STABIL — neue Module kommen hinten dazu, verworfene fallen
+ *    heraus. Wuerde die Liste bei jedem Aufruf umsortiert, verschoebe React
+ *    die <iframe>-Knoten im DOM, und ein verschobenes <iframe> laedt neu.
+ *    Die Nutzungsreihenfolge fuer die Begrenzung steht deshalb getrennt in
+ *    `recent` (zuletzt benutzt vorn).
+ */
+
+/**
+ * Hoechstens so viele eigene Module halten ihren <iframe> offen. Jede offene
+ * Fremdseite belegt weiter Speicher und laeuft im Hintergrund mit (Skripte,
+ * Abfragen); fuenf deckt den ueblichen Wechsel zwischen wenigen Werkzeugen ab,
+ * ohne den Browser bei vielen Eintraegen in der Seitenleiste zu belasten.
+ */
+export const CUSTOM_MODULE_KEEP_ALIVE_MAX = 5;
+
+export type CachedCustomModule = Pick<CustomModule, 'id' | 'name' | 'url'>;
+
+export interface LruResult {
+  /** Neue Nutzungsreihenfolge, zuletzt benutzt vorn. */
+  recent: string[];
+  /** Ids, die dabei ueber die Grenze gefallen sind (aelteste zuerst verworfen). */
+  evicted: string[];
+}
+
+/** Reine LRU-Regel: `id` nach vorn, alles jenseits von `max` wird verworfen. */
+export function touchLru(recent: readonly string[], id: string, max: number): LruResult {
+  const next = [id, ...recent.filter((other) => other !== id)];
+  const limit = Math.max(1, max);
+  return { recent: next.slice(0, limit), evicted: next.slice(limit) };
+}
+
+export interface ActiveCustomModuleSlot {
+  id: string;
+  /** Platzhalter der Modulseite, ueber den der Behaelter den <iframe> legt. */
+  slot: HTMLElement;
+}
+
+interface CustomModuleCacheState {
+  modules: Record<string, CachedCustomModule>;
+  openIds: string[];
+  recent: string[];
+  active: ActiveCustomModuleSlot | null;
+  /** Metadaten merken oder aktualisieren (Name/Adresse nach dem Laden oder Speichern). */
+  remember: (mod: CachedCustomModule) => void;
+  /** Modul vergessen (404 oder geloescht): Metadaten UND offener <iframe> weg. */
+  forget: (id: string) => void;
+  /** Die Modulseite zeigt `id` im Platzhalter `slot`: offen halten und nach vorn. */
+  activate: (id: string, slot: HTMLElement) => void;
+  /** Die Modulseite verschwindet: <iframe> nur verstecken, nicht verwerfen. */
+  deactivate: (slot: HTMLElement) => void;
+  /** Abmelden/Benutzerwechsel: alles verwerfen. */
+  clear: () => void;
+}
+
+export const useCustomModuleCacheStore = create<CustomModuleCacheState>()((set) => ({
+  modules: {},
+  openIds: [],
+  recent: [],
+  active: null,
+  remember: (mod) =>
+    set((s) => {
+      const prev = s.modules[mod.id];
+      if (prev && prev.name === mod.name && prev.url === mod.url) return s;
+      return { modules: { ...s.modules, [mod.id]: { id: mod.id, name: mod.name, url: mod.url } } };
+    }),
+  forget: (id) =>
+    set((s) => {
+      const { [id]: _removed, ...modules } = s.modules;
+      return {
+        modules,
+        openIds: s.openIds.filter((other) => other !== id),
+        recent: s.recent.filter((other) => other !== id),
+        active: s.active?.id === id ? null : s.active,
+      };
+    }),
+  activate: (id, slot) =>
+    set((s) => {
+      if (!s.modules[id]) return s;
+      const { recent, evicted } = touchLru(s.recent, id, CUSTOM_MODULE_KEEP_ALIVE_MAX);
+      const kept = s.openIds.filter((other) => !evicted.includes(other));
+      return {
+        recent,
+        openIds: kept.includes(id) ? kept : [...kept, id],
+        active: { id, slot },
+      };
+    }),
+  deactivate: (slot) => set((s) => (s.active?.slot === slot ? { active: null } : s)),
+  clear: () => set({ modules: {}, openIds: [], recent: [], active: null }),
+}));