schalli
7eb2516278
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_018N9CD3ebPKm1b32bPpBknY
73 KiB
73 KiB
phase, plan, type, wave, depends_on, autonomous, requirements, files_modified, estimate, must_haves
| phase | plan | type | wave | depends_on | autonomous | requirements | files_modified | estimate | must_haves | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| quick-260916-bwo | 01 | execute | 1 | true |
|
|
|
|
Purpose: Der User empfindet das Raster als zu grob, die Uhrzeit als starr (heute skaliert sie mit der FENSTERbreite, nicht mit dem Widget) und die Raender als zu breit. Alles drei ist reine Frontend-Arbeit ohne Schema; der einzige riskante Punkt ist die Umrechnung bestehender Anordnungen, die nicht verrutschen duerfen.
Output: 29 Dateien (1 API-Spec, 27 Web, 1 Handbuch), vier Commits (Task 2 in zwei Teilen 2a/2b) mit Scope quick-260916-bwo, gepusht, CI-Lauf beobachtet. Browser-Nachweis durch den Verifizierer/Orchestrator (Playwright MCP, lokale Container) inklusive SQL-Probe der Umrechnung.
<execution_context>
@/.claude/gsd-core/workflows/execute-plan.md
@/.claude/gsd-core/templates/summary.md
</execution_context>
<planning_measurements>
Zur Planungszeit (2026-09-16, HEAD 5f50c5f, Arbeitsbaum sauber, main == origin/main) gemessen — die Ausfuehrung misst erneut; diese Zahlen sind der Bezugspunkt der Gates:
- Baseline frisch nachgemessen: Web
Test Files 43 passed (43)/Tests 260 passed (260); APITest Files 67 passed (67)/Tests 1076 passed (1076);tsc --noEmitinpackages/shared,apps/api,apps/webje Exit 0. Testzahlen der beruehrten Dateien: dashboard-grid 3, widget-registry 3, clock 2, stopwatch 7, calculator 6;widget-settings-panel.tsxunddashboard-store.tshaben KEINEN Test. Lokal laufentessera-ctl-web-1(3000),tessera-ctl-api-1(3001, healthy),tessera-ctl-db-1(IP172.19.0.2, kein Host-Port),tessera-ctl-mailhog-1,gitea(3002) undgitea-runner; die Web-/API-Abbilder sind 39 Stunden alt — fuer den Browser-Nachweis istdocker compose up -d --build webPflicht (Erinnerung:upallein baut nicht neu). - Heutige Konstanten (Ist):
dashboard-grid.tsxZeile 13-14BREAKPOINTS = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 },COLS = { lg: 12, md: 10, sm: 6, xs: 4, xxs: 1 }; Zeile 77-78rowHeight={40},margin={[16, 16]};containerPaddingwird nicht gesetzt.widget-registry.tsxZeile 36-44: clock 2/2/2/2, search 3/2/6/2, calendar 3/3/4/6, note 2/3/3/4, calculator 2/4/3/5, favorites 2/3/3/5, link 2/2/2/2, stopwatch 2/2/3/3 (minW/minH/defaultW/defaultH). Keine weiteren Verbraucher vondefaultW/defaultH/minW/minHausserhalbwidget-registry,dashboard-grid,dashboard-store(grep). - react-grid-layout 2.2.3 (gemessen im dist):
ResponsiveLayouts = Partial<Record<string, Layout>>(types-jd8MiKM1.d.ts:436) — ein Fremdschluessel mit Zahlwert ist typwidrig; zur Laufzeit greiftResponsivenur perlayouts[breakpoint]zu und spreadet...layouts(chunk-KDANGDDL.mjs:524-540,chunk-WGL5FSZH.mjs:1380/1411), iteriert also NICHT ueber Fremdschluessel. Aber der eigene Store iteriert (Object.keys(newLayouts)+.filter/Spread inaddWidget/removeWidget, dashboard-store.ts 64-76, 94-96) — ein Zahlwert unter__gridVersionwuerde dort mitfilter is not a functionabstuerzen. Entscheidung: Marker im persistierten JSON (layouts-Spalte, Json, kein Schema), im Zustand NIE (Store entfernt ihn beim Laden, haengt ihn beim Speichern an).effectiveContainerPadding = containerPadding ?? margin(chunk-WGL5FSZH.mjs:676); Spaltenbreite(containerWidth - margin[0]*(cols-1) - containerPadding[0]*2)/cols(chunk-76RTO6EO.mjs:2-5). Gespeicherte Elemente ausonLayoutChangetrageni, x, y, w, h, minW, maxW, minH, maxH, moved, static, isDraggable, isResizable, resizeHandles, constraints, isBounded(cloneLayoutItem,chunk-76RTO6EO.mjs:204-223;undefinedfaellt im JSON weg) — die Umrechnung verdoppelt deshalb auchminW/minH/maxW/maxH, falls numerisch;dashboard-grid.tsxueberschreibtminW/minHohnehin aus den Konstanten. - Ort der Umrechnung — Frontend, begruendet: (1) Die Einheiten (Spalten, Zeilenhoehe) sind Frontend-Konstanten, die API kennt sie nicht; die Umrechnung liegt damit neben
COLS. (2) Kein Schreiben auf einem GET, keine Aenderung andashboard.service.ts(dessen Bindungs-Invarianten der Inventar-Spec unddashboard.service.spec.tsfestnageln). (3) Die reine Funktion ist im Web-Vitest ohne Prisma-Attrappe testbar. Preis: der Marker persistiert erst mit einem gelungenen PUT; bis dahin rechnet jedes Laden erneut aus den unveraendert ALTEN DB-Werten um — korrekt, weil die DB ohne Marker auch ohne verdoppelte Werte ist (der Zustand wird nie halb geschrieben:saveLayoutsendet immer Marker UND Werte gemeinsam). - Bestand an Anordnungen: lokal
DashboardLayout0 Zeilen,WidgetInstance0 Zeilen; auf alpha (192.168.13.12, nur lesend per psql) ebenfalls 0/0 (Datenbank seit dem Neuaufbau leer). Live (tessera.ctl.de) nicht erreichbar/nicht gemessen — die Umrechnung bleibt Pflicht, weil dort Anordnungen existieren koennen. Fuer den Browser-Nachweis wird die alte Form per SQL hergestellt (siehe<verification>). - API reicht durch (gemessen):
SaveLayoutDto/UpdateWidgetConfigDtosind@IsObject();main.tsValidationPipe({ whitelist: true, transform: true })entfernt nur undekorierte DTO-Eigenschaften, nicht Schluessel INNERHALB vonlayouts/config.getLayoutgibtrecord.layoutsunveraendert zurueck (dashboard.service.ts 94-105; Spec Zeile 380 pinnt{ lg: [{ i: 'w1' }] }als Durchreichung);updateWidgetConfigmischt{ ...widget.config, ...dto.config }(Zeile 252-256; Spec Zeile 501 nutzt bereits ein Fremdfeldfoo).nullinconfigist JSON-null innerhalb des Objekts (kein Prisma-DbNull-Fall). Keine API-Codeaenderung noetig. - jsdom 29.1.1 / cssstyle (Wegwerf-Skript im Scratchpad
jsdomprobe/probe.mjs):el.style.fontSize = 'clamp(12px, min(18cqw, 50cqh), 200px)'->''(verworfen, auch die heutige Formelclamp(28px, 4vw, 40px)wird verworfen — deshalb testet sie heute niemand);'36pt'->'36pt';'22cqmin'->'22cqmin';'var(--x)'-> behalten;setProperty('--x', 'clamp(...)')-> behalten;containerType = 'size'-> behalten. Folge: automatische Groessen als Tailwind-Klassen, feste Punktgroesse als Inline-Style; Tests lesenclassName,data-font-modeundstyle.fontSize. - Tailwind 4.3.1 (Wegwerf-Kompilat gegen
tailwindcss/index.css,tw5.mjs):@container-size->container-type: size;@container-size/widget-> zusaetzlichcontainer-name;[container-type:size]ebenso;text-[clamp(12px,min(20cqw,50cqh),400px)]->font-size: clamp(12px, min(20cqw, 50cqh), 400px)(verschachtelte Funktionen und Kommas ohne Leerzeichen funktionieren);p-1.5-> 6 px,py-0.75-> 3 px,min-h-6,right-2,top-2kompilieren. Container-Queries werden bisher NIRGENDS im Projekt genutzt (grep@container|cqmin|cqw|cqh|container-typeleer);globals.cssist Standard-Tailwind-4 (@import "tailwindcss",@custom-variant dark,@theme inline). Browser-Unterstuetzung: Chrome 105+, Firefox 110+, Safari 16+; der Tauri-Wrapper nutzt WebView2/Chromium. - Umschalter-Geometrie:
edit-mode-toggle.tsxKnopfp-2+ Symbol 20 px = 36 px Hoehe/Breite;page.tsxheuterelative p-4, Umschalterabsolute right-4 top-4, Grid inmt-8, „Widget hinzufuegen“fixed bottom-6 right-6(kein Rand-Abstand, bleibt).app-shell.tsxZeile 34mainmitp-6;globals.cssZeile 123.app-shell-main { margin-left: var(--current-sidebar-width, ...) }ab 768 px. KEIN Test nageltp-6,app-shell-main,page.tsxdes Dashboards oderAppShellfest (grep ueber alle*.test.tsx/*.spec.ts: leer; die drei Treffer fuer./pagesind grants/cert-manager/groups). - Innenabstaende je Widget (Ist, Zeile): clock 42
p-2; stopwatch 192p-3; calculator 319p-2; link 238p-2(Kachel-Innenraum 317p-1bleibt — kein Aussenabstand); favorites 174p-2; calendar 112p-3sowie 80/91/102p-4(Laden/Fehler/leer); search 89px-3; note 89 Kopfzeilepx-3 py-1.5(der MDEditor darunter hat Bibliotheks-CSS, bleibt); widget-wrapper ohne Padding. Kein Test prueft Padding-Klassen (greptoHaveClass|p-2|p-3|px-3in den Widget-Tests: leer). - Rechner-Layout: Tasten
h-9fest ingrid flex-1 grid-cols-4 grid-rows-5 gap-1(Zeilenminmax(0,1fr)) — heute wachsen beim Vergroessern nur die Luecken, nicht die Tasten; bei Mindestgroesse (alt 4 Zeilen = 208 px) ueberlaeuft der Rechner bereits heute (Anzeige 40 + Speicherzeile 28 + Tastenraster 196 + Luecken > 208).h-full min-h-7macht die Tasten zellenfuellend; die Speicherzeile (h-7 text-xs) bleibt bewusst klein.utilBtntraegt heutetext-xsZUSAETZLICH zur Basistext-sm— zwei Schriftgroessen-Utilities, deren Reihenfolge Tailwind bestimmt; die Basis verliert ihre Schriftgroesse, jede Tastenart bekommt genau eine Klasse. - Stoppuhr-Anzeige:
formatMsliefertmm:ss(5 Zeichen) oderhh:mm:ss(8 Zeichen),font-mono— 8 x 0.6 em = 4.8 em Breite;16cqwhaelt das in 0.77 der Containerbreite. Uhr:Intlde-DEHH:MM:SS8 Zeichen,tabular-nums—20cqwergibt ca. 0.82 der Breite; mitleading-nonebelegt50cqhdie halbe Hoehe, das Datum (0.4davon) darunter passt mitgap-1. - i18n:
widgets.clockin de.json/en.json (Zeile 186-190) traegtname,description,dateHint; beide Dateien 987 Zeilen.umlaut-guard.spec.ts: Tokenizer/[A-Za-zÄÖÜäöüß]+/g,SUSPECT_RE = /(ae|oe|ue|ss)/i, Allowlist case-sensitiv (lassenja,Lassennein,passtnein,Passtja), Werte mit@uebersprungen; Key-Paritaet de/en rekursiv. Der Wortlaut in Task 2 wurde mit demselben Tokenizer/Muster gegenUMLAUT_ALLOWLISTundUMLAUT_REPLACEMENTSgeprueft: 0 Treffer ->umlaut-dictionary.tsbleibt unangetastet.tenderRadar-parity.spec.tsprueft nurtenderRadar. DasClockConfig-Formular hat heute ein hart englisches Label „Timezone“ und eine hart englische „Saving...“-Zeile — bleibt (ausserhalb des Auftrags, im SUMMARY als Beobachtung). - Detektoren/Konfiguration:
api-coverage->{"detected":false}(kein externer Dienst);assumption-delta scan quick-260916-bwo->{"skipped":true,"reason":"phase_unresolved"}(Quick-Task ohne ROADMAP-Abschnitt; inhaltlich:timeFontSizePtist ein optionales Feld neben dem automatischen Verhalten — kein Wechsel eines Primaerschluessels,no-change);schema-gatefeuert NICHT (keinschema.prisma, keine Migration).tdd_mode=false(Task 1 und 2a tragen trotzdemtdd="true"),security_enforcement=true, ASVS 1, Blocking-Schwellehigh,human_verify_mode=end-of-phase,branching_strategy: none(Commits aufmain). Keine neuen Pakete -> keine Paketlegitimitaetspruefung;T-BWO-SCim Register als „kein Install“. - Gitea:
curl http://localhost:3002/api/v1/version->{"version":"1.26.2"}; Push-URL zeigt auflocalhost:3002(Token im Remote, nie ausgeben). </planning_measurements>
{props.children}
; }`):
- Test 4 (Grid-Props — Falsifizierung c): nach dem Rendern mit einem Widget `captured.props.cols` tief gleich `{ lg: 24, md: 20, sm: 12, xs: 8, xxs: 2 }`, `rowHeight === 20`, `margin` tief gleich `[8, 8]`, `breakpoints` tief gleich `{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }` (unveraendert), `containerPadding === undefined` (folgt dem margin).
- Test 5 (Vorgaben ohne gespeicherten Eintrag): Widget `{ id: 'inst-3', widgetType: 'clock', config: {} }` mit leeren `layouts` -> das erste Kind aus `React.Children.toArray(captured.props.children)` traegt `props['data-grid']` tief gleich `{ x: 0, y: 0, w: 4, h: 4, minW: 4, minH: 4 }`.
`apps/api/src/dashboard/dashboard.service.spec.ts` (+2 im describe „Anordnung und Widgets gebunden an forTenant()“, Stil der Datei):
- Test A (`__gridVersion` ueberlebt speichern und laden): `makeFakePrisma({})`, `await service.saveLayout('user-1', 'tenant-1', { layouts: { lg: [{ i: 'w1', x: 0, y: 0, w: 4, h: 4 }], __gridVersion: 2 } } as any)`, dann `await service.getLayout('user-1', 'tenant-1')` -> tief gleich dem gespeicherten Objekt inklusive `__gridVersion: 2`.
- Test B (`timeFontSizePt` wird durchgereicht, `null` ueberschreibt): Widget `config: { timezone: 'Europe/Berlin' }`; `updateWidgetConfig('w1', 'user-1', 'tenant-1', { config: { timeFontSizePt: 36 } })` -> `widget.config` gleich `{ timezone: 'Europe/Berlin', timeFontSizePt: 36 }`; danach `{ config: { timeFontSizePt: null } }` -> `timeFontSizePt === null` und `timezone` unveraendert. Kommentar im Test: die API prueft Config-Felder nicht (`@IsObject()`), die Grenzen liegen im Frontend (`clock-font-size.ts`), ein Fremdwert faellt dort auf „automatisch“ zurueck.
Schritt A — RED: Die drei neuen Testdateien und die Ergaenzungen in `widget-registry.test.tsx`, `dashboard-grid.test.tsx` und `dashboard.service.spec.ts` gemaess `` anlegen; `pnpm -C apps/web exec vitest run src/lib/grid-layout-migration.test.ts src/lib/stores/dashboard-store.test.ts src/components/dashboard` muss rot sein (Modul fehlt / alte Zahlen), Ausgabe fuer das SUMMARY notieren. Die API-Ergaenzungen sind nach heutigem Code bereits gruen — das ist der Beleg der Durchreichung (im SUMMARY so benennen, nicht als RED verkaufen).
Schritt B — `apps/web/src/lib/grid-layout-migration.ts` (NEU, Kopfkommentar deutsch ASCII: Warum einmalige Umrechnung, warum Marker im JSON aber nie im Zustand, Idempotenz, kein Schema, Bezug T-BWO-02): `export const GRID_VERSION = 2`, `export const GRID_VERSION_KEY = '__gridVersion'`, `export const GRID_SCALE_FACTOR = 2`; `export interface GridLayoutItem { i: string; x: number; y: number; w: number; h: number; [key: string]: unknown }`, `export type GridLayouts = Record<string, GridLayoutItem[]>`. `export function migrateGridLayouts(raw: unknown): { layouts: GridLayouts; migrated: boolean }`: ist `raw` kein Objekt (oder Array/null) -> `{ layouts: {}, migrated: false }`; `version` = Wert unter `GRID_VERSION_KEY`, falls `typeof === 'number'`, sonst `1`; `layouts` = fuer jeden Schluessel ausser `GRID_VERSION_KEY`, dessen Wert ein Array ist, eine neue Liste; ist `version >= GRID_VERSION`, werden die Elemente flach kopiert (`{ ...item }`), sonst je Element eine Kopie, in der jedes der Felder `x, y, w, h, minW, minH, maxW, maxH` mit `typeof === 'number'` mit `GRID_SCALE_FACTOR` multipliziert wird (andere Felder unveraendert), und `migrated` wird `true`, sobald mindestens ein Element verdoppelt wurde (leere Arrays -> `false`). `export function withGridVersion(layouts: GridLayouts): Record<string, unknown>` liefert `{ ...layouts, [GRID_VERSION_KEY]: GRID_VERSION }` ohne Mutation. Keine Abhaengigkeit auf React oder den Store.
Schritt C — `dashboard-grid.tsx`: `COLS` auf `{ lg: 24, md: 20, sm: 12, xs: 8, xxs: 2 }`, `rowHeight={20}`, `margin={[8, 8] as [number, number]}`; `BREAKPOINTS` unveraendert; `containerPadding` weiterhin nicht setzen (folgt dem margin — Kommentar mit dem gemessenen Fallback). Kopfkommentar (deutsch, ASCII, kurz) ergaenzen: Raster seit quick-260916-bwo doppelt so fein, gespeicherte Anordnungen werden in `grid-layout-migration.ts` einmalig umgerechnet; die Rueckfallwerte `?? 2` im `data-grid` auf `?? 4` anheben (gleiche Bedeutung in neuen Einheiten). `widget-registry.tsx`: alle 32 Werte verdoppeln (Tabelle aus `<behavior>`), Kommentar ueber dem Objekt: `// quick-260916-bwo: Raster verdoppelt (24 Spalten / 20 px) — jeder Wert ist das Doppelte des alten 12-Spalten-Werts, Widgets bleiben optisch gleich gross.`
Schritt D — `dashboard-store.ts`: Import `{ migrateGridLayouts, withGridVersion }` aus `@/lib/grid-layout-migration`. In `loadDashboard` nach dem `Promise.all`: `const { layouts: migratedLayouts, migrated } = migrateGridLayouts(rawLayouts)`; `set({ layouts: migratedLayouts, widgets, isLoading: false })`; danach `if (migrated) { try { await api.saveLayout(withGridVersion(migratedLayouts)); } catch (err) { console.error('Failed to persist migrated layout:', err); } }` — NACH dem `set`, damit die Oberflaeche unabhaengig vom Speichern rendert, und innerhalb des aeusseren `try` so, dass ein Speicherfehler NICHT in den `catch` mit `error: 'Failed to load dashboard'` faellt (eigener innerer try/catch). In `saveLayout`: `await api.saveLayout(withGridVersion(get().layouts))`. Kommentar am Store (deutsch, ASCII): der Marker lebt nur im gespeicherten JSON; fehlt er beim Speichern, wird beim naechsten Laden erneut verdoppelt — deshalb `withGridVersion` an BEIDEN Speicherstellen. Typ von `layouts` im Zustand bleibt `Record<string, Array<{ i; x; y; w; h }>>` (GridLayouts ist zuweisbar).
Schritt E — GREEN: `pnpm -C apps/web exec vitest run src/lib/grid-layout-migration.test.ts src/lib/stores/dashboard-store.test.ts src/components/dashboard` gruen (Grid 5, Registry 4, Migration 7, Store 6, uebrige Widget-Tests unveraendert); `pnpm -C apps/api exec vitest run src/dashboard` gruen; `pnpm -C apps/web exec tsc --noEmit` und `pnpm -C apps/api exec tsc --noEmit` je Exit 0.
Commit: `feat(quick-260916-bwo): Dashboard-Raster verdoppelt (24 Spalten, 20 px, 8 px Abstand), Konstanten x2, einmalige Umrechnung gespeicherter Anordnungen mit Marker __gridVersion` mit genau den 9 Dateien dieser Aufgabe (`git show --stat HEAD` zeigt 9).
5f50c5f -- apps/api/src/dashboard/dashboard.service.ts apps/api/src/dashboard/dto apps/api/prisma); echo U_EXIT=$? ; test -z "$U"; echo U_EMPTY=$? ; pnpm -C apps/web exec tsc --noEmit >/dev/null 2>&1; echo TSC_web=$? ; pnpm -C apps/api exec tsc --noEmit >/dev/null 2>&1; echo TSC_api=$?
Web-Vitest-Zeilen `Test Files 4 passed (4)` / `Tests 22 passed (22)` (5 + 4 + 7 + 6); API-Zeilen `Test Files 1 passed (1)` und `Tests` mit der bisherigen Zahl der Datei plus 2; Greps liefern `1` (COLS), `1` (rowHeight), `1` (margin), `1`, `1`, `1` (drei Stichproben der Konstanten), mindestens `2` (withGridVersion an beiden Speicherstellen), mindestens `1` (migrateGridLayouts im Laden), `1` (GRID_VERSION); `U_EXIT=0` und `U_EMPTY=0` (API-Produktivcode, DTOs und Prisma unangetastet); `TSC_web=0`, `TSC_api=0`. Der RED-Lauf aus Schritt A steht im SUMMARY. Commit existiert mit genau 9 Dateien.
Task 2: Inhalt skaliert mit der Widgetgroesse (Container-Queries fuer Uhr, Stoppuhr, Rechner), Punktgroesse der Uhrzeit einstellbar (Feld + i18n), Abstaende halbiert (Dashboard, Widget-Ruempfe, Seitenrahmen)
apps/web/src/components/dashboard/widgets/widget-wrapper.tsx, apps/web/src/components/dashboard/widgets/clock-font-size.ts, apps/web/src/components/dashboard/widgets/clock-widget.tsx, apps/web/src/components/dashboard/widgets/clock-widget.test.tsx, apps/web/src/components/dashboard/widgets/stopwatch-widget.tsx, apps/web/src/components/dashboard/widgets/stopwatch-widget.test.tsx, apps/web/src/components/dashboard/widgets/calculator-widget.tsx, apps/web/src/components/dashboard/widgets/calculator-widget.test.tsx, apps/web/src/components/settings/widget-settings-panel.tsx, apps/web/src/components/settings/widget-settings-panel.test.tsx, apps/web/src/messages/de.json, apps/web/src/messages/en.json, apps/web/src/components/dashboard/widgets/link-widget.tsx, apps/web/src/components/dashboard/widgets/favorites-widget.tsx, apps/web/src/components/dashboard/widgets/calendar-widget.tsx, apps/web/src/components/dashboard/widgets/search-widget.tsx, apps/web/src/components/dashboard/widgets/note-widget.tsx, apps/web/src/app/(portal)/page.tsx, apps/web/src/components/layout/app-shell.tsx
`apps/web/src/components/dashboard/widgets/clock-widget.test.tsx` (+4; Import `{ resolveClockTimeFontSizePt, CLOCK_FONT_SIZE_MIN_PT, CLOCK_FONT_SIZE_MAX_PT }` aus `./clock-font-size`):
- Test 3 (reine Funktion): `resolveClockTimeFontSizePt({ timeFontSizePt: 36 })` -> `36`; `8` -> `8`; `200` -> `200`; `36.5` -> `36.5`; `7` -> `null`; `201` -> `null`; `'36'` -> `null`; `NaN` -> `null`; `Infinity` -> `null`; `null` -> `null`; `{}` -> `null`; `CLOCK_FONT_SIZE_MIN_PT === 8`, `CLOCK_FONT_SIZE_MAX_PT === 200`.
- Test 4 (fest — Falsifizierung b, Test liest `style`): `config={{ timezone: 'Europe/Berlin', showDate: true, timeFontSizePt: 36 }}` -> `screen.getByRole('time').style.fontSize === '36pt'`, `getAttribute('data-font-mode') === 'fixed'`, `screen.getByTestId('clock-date').style.fontSize === '14.4pt'`.
- Test 5 (automatisch): ohne `timeFontSizePt` -> `time.style.fontSize === ''`, `data-font-mode === 'auto'`, `time.className` passt auf `/cqw/` UND `/cqh/`, `clock-date` (showDate true) `className` passt auf `/cq[wh]/` und `style.fontSize === ''`.
- Test 6 (Fremdwert wird ignoriert): `timeFontSizePt: '36'` -> wie Test 5 (`auto`, kein Inline-Style).
`apps/web/src/components/dashboard/widgets/stopwatch-widget.test.tsx` (+1): `screen.getByTestId('stopwatch-display').className` passt auf `/cqw/` und `/cqh/`, und `style.fontSize === ''` (keine Fensterbreiten-Formel mehr).
`apps/web/src/components/dashboard/widgets/calculator-widget.test.tsx` (+1): `screen.getByLabelText('Anzeige').className` passt auf `/cqw/`; `screen.getByRole('button', { name: '7' }).className` passt auf `/cqw/` und enthaelt `h-full`; `screen.getByRole('button', { name: 'CE' }).className` passt auf `/cqw/`.
`apps/web/src/components/settings/widget-settings-panel.test.tsx` (NEU, 4 Tests; `vi.mock('next-intl')` mit Texten aus `de.json` (Muster `tessera-logo.test.tsx`, Import `de from '@/messages/de.json'`, Namensraum `widgets` flach: `'clock.fontSizeLabel'` usw.), `vi.mock('@/lib/dashboard-api', () => ({ updateWidgetConfig: vi.fn().mockResolvedValue(undefined) }))`, `vi.mock('next/link', ...)` als einfacher Anker, `vi.mock('@/components/settings/search-provider-form', () => ({ SearchProviderForm: () => null }))`; Widget `{ id: 'c1', widgetType: 'clock', config: { timezone: 'Europe/Berlin', timeFontSizePt: 24 } }`, Aufklappen per Klick auf den Kopf-Knopf (`screen.getByRole('button', { name: /Uhr #1/ })`)):
- Test 1 (Feld vorbelegt): Eingabe `screen.getByLabelText(de.widgets.clock.fontSizeLabel)` hat `value === '24'`, `type === 'number'`, `min === '8'`, `max === '200'`, `placeholder === de.widgets.clock.fontSizeAuto`; der Hilfetext `de.widgets.clock.fontSizeHint` steht im Dokument.
- Test 2 (Zahl uebernehmen bei Blur): `fireEvent.change(input, { target: { value: '36' } })`, `fireEvent.blur(input)` -> `updateWidgetConfig` genau einmal mit `('c1', { timeFontSizePt: 36 })`, `onWidgetUpdate` mit `('c1', { timeFontSizePt: 36 })`.
- Test 3 (leer = automatisch): `change` auf `''`, Enter (`fireEvent.keyDown(input, { key: 'Enter' })`) -> `updateWidgetConfig` mit `('c1', { timeFontSizePt: null })`; keine Fehlermeldung.
- Test 4 (ausserhalb der Grenzen): `change` auf `'300'`, `blur` -> `updateWidgetConfig` NICHT gerufen, `screen.getByRole('alert')` zeigt `de.widgets.clock.fontSizeInvalid`, `input` traegt `aria-invalid="true"`; danach `change` auf `'7'`, `blur` -> weiterhin nicht gerufen.
Teil 2a — Skalierung, Punktgroesse, i18n (11 Dateien, eigener Commit):
Schritt A — RED: Testergaenzungen und die neue Spec gemaess `<behavior>`; `pnpm -C apps/web exec vitest run src/components/dashboard/widgets src/components/settings/widget-settings-panel.test.tsx` rot, Ausgabe notieren.
Schritt B — `clock-font-size.ts` (NEU, Kopfkommentar deutsch ASCII, Bezug T-BWO-01): `export const CLOCK_FONT_SIZE_MIN_PT = 8`, `export const CLOCK_FONT_SIZE_MAX_PT = 200`, `export const CLOCK_DATE_FACTOR = 0.4`, `export function resolveClockTimeFontSizePt(config: Record<string, unknown>): number | null` — liest `config.timeFontSizePt`, gibt die Zahl nur zurueck, wenn `typeof value === 'number'`, `Number.isFinite(value)` und `MIN <= value <= MAX`, sonst `null`. Kein anderer Typ wird umgewandelt (eine Zeichenkette bleibt „automatisch“ — der Style bekommt nie Text aus der Konfiguration).
Schritt C — `widget-wrapper.tsx`: Rumpf-`div` (Zeile 69) bekommt `@container-size` zusaetzlich zu `h-full` (Klasse woertlich im JSX). Kommentar (deutsch, ASCII, 3-4 Zeilen): Groessen-Container fuer `cqw`/`cqh`; braucht definite Hoehe — die kommt ueber `h-full` aus der Karte, die das RGL-Element mit Pixelhoehe fuellt; steht am Rumpf statt an der Karte, weil die Karte im Bearbeitungsmodus den Griff traegt.
Schritt D — `clock-widget.tsx`: Import `{ resolveClockTimeFontSizePt, CLOCK_DATE_FACTOR }`; `const fixedPt = resolveClockTimeFontSizePt(config)`; Rumpf `flex h-full flex-col items-center justify-center gap-1 p-1` (Innenabstand halbiert); `<time role="time" data-font-mode={fixedPt === null ? 'auto' : 'fixed'} className="font-semibold tabular-nums leading-none text-foreground text-[clamp(12px,min(20cqw,50cqh),400px)]" style={fixedPt === null ? undefined : { fontSize: `${fixedPt}pt` }} ...>`; das Datum `className="text-muted-foreground text-[clamp(10px,min(8cqw,20cqh),160px)]"` mit `style={fixedPt === null ? undefined : { fontSize: `${fixedPt * CLOCK_DATE_FACTOR}pt` }}` (36 -> `14.4pt`). Die bisherige Fensterbreiten-Formel im Inline-Style entfaellt vollstaendig. Kopfkommentar der Datei um `timeFontSizePt` (number | null, leer = automatisch ueber Container-Queries, Grenzen in `clock-font-size.ts`) ergaenzen. Kommentar am `<time>`: Inline-Style nur fuer die feste Punktgroesse, weil jsdom `clamp()` verwirft und der Browser die Klasse ohnehin bekommt — kein Testtrick, sondern die einfachere Trennung „automatisch = CSS, fest = Zahl“.
Schritt E — `stopwatch-widget.tsx`: Rumpf `flex h-full flex-col overflow-hidden p-1.5`; Anzeige-`span` `className="font-mono font-semibold tabular-nums leading-none text-foreground text-[clamp(14px,min(16cqw,35cqh),400px)]"` OHNE `style`. `calculator-widget.tsx`: Rumpf `flex h-full flex-col gap-1 p-1 select-none`; `output` Anzeige `text-xl` ersetzen durch `text-[clamp(14px,min(8cqw,10cqh),96px)]`; `CalcButton`-Basisklasse verliert `text-sm`; `baseBtn` = `h-full min-h-7 cursor-pointer select-none active:scale-95`; `numBtn`, `opBtn`, `eqBtn` erhalten zusaetzlich `text-[clamp(11px,min(4cqw,4.5cqh),40px)]`, `utilBtn` statt `text-xs` die Klasse `text-[clamp(10px,min(3.2cqw,3.6cqh),32px)]`; `memBtn` (`h-7 text-xs`) bleibt (Speicherzeile bewusst klein; Kommentar). Alle Klassen woertlich als String-Literale in der Datei (Tailwind-Scanner). Bestehende Tests (Tastatur, Division durch null, Komma) bleiben unberuehrt.
Schritt F — `widget-settings-panel.tsx`, `ClockConfig`: Import `{ resolveClockTimeFontSizePt, CLOCK_FONT_SIZE_MIN_PT, CLOCK_FONT_SIZE_MAX_PT }`; lokaler Zustand `const [fontSizeDraft, setFontSizeDraft] = useState(() => { const pt = resolveClockTimeFontSizePt(config); return pt === null ? '' : String(pt); })` und `const [fontSizeError, setFontSizeError] = useState(false)`; `commitFontSize()`: `raw = fontSizeDraft.trim()`; leer -> `setFontSizeError(false)` und, falls `resolveClockTimeFontSizePt(config) !== null`, `onChange({ timeFontSizePt: null })` (im Test ist 24 gesetzt -> Aufruf erfolgt); sonst `n = Number(raw)`; `!Number.isFinite(n) || n < MIN || n > MAX` -> `setFontSizeError(true)`, KEIN `onChange`; sonst `setFontSizeError(false)` und `onChange({ timeFontSizePt: n })`, falls `n !== resolveClockTimeFontSizePt(config)`. Markup nach dem Datums-Haekchen: `<div>` mit `<label htmlFor="clock-font-size" className="mb-1 block text-sm text-foreground">{t('clock.fontSizeLabel')}</label>`, `<input id="clock-font-size" type="number" inputMode="decimal" min={CLOCK_FONT_SIZE_MIN_PT} max={CLOCK_FONT_SIZE_MAX_PT} step={1} placeholder={t('clock.fontSizeAuto')} value={fontSizeDraft} onChange={(e) => setFontSizeDraft(e.target.value)} onBlur={commitFontSize} onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); commitFontSize(); } }} aria-invalid={fontSizeError || undefined} aria-describedby="clock-font-size-hint" className="h-9 w-full max-w-xs rounded border border-border bg-background px-3 text-sm text-foreground" />`, `<p id="clock-font-size-hint" className="mt-1 text-xs text-muted-foreground">{t('clock.fontSizeHint')}</p>`, bei Fehler `<p role="alert" className="mt-1 text-xs text-destructive">{t('clock.fontSizeInvalid')}</p>`. Das hart englische „Timezone“-Label und „Saving...“ bleiben unangetastet (Beobachtung fuers SUMMARY).
Schritt G — Uebersetzungen: in `de.json` und `en.json` unter `widgets.clock` hinter `dateHint` in dieser Reihenfolge und in BEIDEN Dateien an derselben Stelle: `fontSizeLabel`, `fontSizeAuto`, `fontSizeHint`, `fontSizeInvalid`. Deutsch (Sie-Form, echte Umlaute, Wortlaut GENAU so — gegen den Waechter geprueft): `fontSizeLabel` „Schriftgröße der Uhrzeit (Punkt)“; `fontSizeAuto` „automatisch“; `fontSizeHint` „Leer lassen, dann richtet sich die Uhrzeit nach der Größe der Kachel. Ein Wert zwischen 8 und 200 legt die Schrift fest, unabhängig von der Kachelgröße.“; `fontSizeInvalid` „Bitte geben Sie eine Zahl zwischen 8 und 200 ein oder lassen Sie das Feld leer.“. Englisch: `fontSizeLabel` „Font size of the time (pt)“; `fontSizeAuto` „automatic“; `fontSizeHint` „Leave empty and the time follows the size of the tile. A value between 8 and 200 fixes the font size regardless of the tile size.“; `fontSizeInvalid` „Please enter a number between 8 and 200 or leave the field empty.“. Danach `pnpm -C apps/web exec vitest run src/messages` gruen OHNE Aenderung an `umlaut-dictionary.ts`; flaggt der Waechter dennoch ein Wort (nur bei abweichendem Wortlaut moeglich), das Wort GENAU SO in `UMLAUT_ALLOWLIST` eintragen (Kommentar `// 260916-bwo`) und die Dateizahl im SUMMARY auf 30 korrigieren.
Schritt H — GREEN 2a: `pnpm -C apps/web exec vitest run src/components/dashboard/widgets src/components/settings/widget-settings-panel.test.tsx src/messages` gruen (clock 6, stopwatch 8, calculator 7, settings 4); `pnpm -C apps/web exec tsc --noEmit` Exit 0. Commit 2a: `feat(quick-260916-bwo): Widget-Inhalt skaliert per Container-Queries (Uhr, Stoppuhr, Rechner), Punktgroesse der Uhrzeit einstellbar` mit genau den 11 Dateien (widget-wrapper, clock-font-size, clock (+test), stopwatch (+test), calculator (+test), widget-settings-panel (+test), de.json, en.json). Wiederaufsetzpunkt nach diesem Commit ist Schritt I.
Teil 2b — Abstaende halbieren (7 Dateien, eigener Commit):
Schritt I — Tabelle vorher/nachher, jeweils nur die genannte Klasse an der genannten Stelle, sonst nichts:
| Datei | Stelle | vorher | nachher |
| link-widget.tsx | Rumpf Zeile 238 | Padding-Stufe 2 | `p-1` (Kachel-Innenraum Zeile 317 bleibt) |
| favorites-widget.tsx | Rumpf Zeile 174 | Stufe 2 | `p-1` |
| calendar-widget.tsx | Rumpf Zeile 112 | Stufe 3 | `p-1.5`; Zustandsansichten Zeile 80/91/102 Stufe 4 -> `p-2` |
| search-widget.tsx | Rumpf Zeile 89 | horizontale Stufe 3 | `px-1.5` |
| note-widget.tsx | Kopfzeile Zeile 89 | horizontale Stufe 3 | `px-1.5` (`py-1.5` bleibt — Hoehe der Kopfzeile, kein Randabstand) |
| page.tsx | Container Zeile 69 | Stufe 4 | `relative p-2`; Umschalter Zeile 71 -> `absolute right-2 top-2 z-10`; `mt-8` Zeile 79 BLEIBT mit Kommentar (deutsch, ASCII): der Umschalter ist 36 px hoch und liegt bei 8..44 px, das erste Widget beginnt mit `mt-8` bei 48 px — eine Halbierung wuerde ihn ins Widget legen |
| app-shell.tsx | `main` Zeile 34 | Stufe 6 (24 px) | `p-3` (12 px) — gilt fuer ALLE Seiten, ausdruecklicher Wunsch des Users; Kommentar im JSX (deutsch, ASCII): Seitenrahmen seit quick-260916-bwo halbiert |
(Uhr `p-1`, Stoppuhr `p-1.5`, Rechner `p-1` sind bereits in Teil 2a gesetzt; widget-wrapper hat kein Padding.)
Schritt J — GREEN 2b: volle Web-Suite `Test Files 46 passed (46)` / `Tests 286 passed (286)`; `pnpm -C apps/web exec tsc --noEmit` Exit 0. Commit 2b: `feat(quick-260916-bwo): Abstaende halbiert — Seitenrahmen p-3 (alle Seiten), Dashboard p-2, Grid 8 px, Widget-Innenabstaende` mit genau den 7 Dateien. Weicht eine Testzahl ab, ist das ein Befund fuer das SUMMARY — erst die Ursache benennen, dann korrigieren.
5f50c5f -- apps/web/src/messages/umlaut-dictionary.ts); echo D2_EXIT=$? ; test -z "$D2"; echo DICT_UNCHANGED=$? ; grep -c '"relative p-2"' "apps/web/src/app/(portal)/page.tsx" ; grep -c "right-2 top-2" "apps/web/src/app/(portal)/page.tsx" ; grep -c '"mt-8"' "apps/web/src/app/(portal)/page.tsx" ; grep -c "p-3" apps/web/src/components/layout/app-shell.tsx ; grep -c " p-6" apps/web/src/components/layout/app-shell.tsx ; grep -c "overflow-auto p-1 gap-2" apps/web/src/components/dashboard/widgets/link-widget.tsx ; grep -c "overflow-auto p-1 gap-2" apps/web/src/components/dashboard/widgets/favorites-widget.tsx ; grep -c "overflow-y-auto p-1.5" apps/web/src/components/dashboard/widgets/calendar-widget.tsx ; grep -c "justify-center p-2" apps/web/src/components/dashboard/widgets/calendar-widget.tsx ; grep -c "gap-2 px-1.5" apps/web/src/components/dashboard/widgets/search-widget.tsx ; grep -c "px-1.5 py-1.5" apps/web/src/components/dashboard/widgets/note-widget.tsx ; grep -c "justify-center gap-1 p-1\"" apps/web/src/components/dashboard/widgets/clock-widget.tsx ; grep -c "overflow-hidden p-1.5" apps/web/src/components/dashboard/widgets/stopwatch-widget.tsx ; grep -c "gap-1 p-1 select-none" apps/web/src/components/dashboard/widgets/calculator-widget.tsx ; pnpm -C apps/web exec tsc --noEmit >/dev/null 2>&1; echo TSC_web=$?
Vitest `Test Files 46 passed (46)` / `Tests 286 passed (286)`; Greps in dieser Reihenfolge: mindestens `1` (Container), `1` (Uhr-Klasse), `2` (data-font-mode: Attribut plus Kommentar zulaessig, mindestens 1), `0` (keine Fensterbreiten-Einheit in der Uhr), `0` (ebenso Stoppuhr), `1` (Stoppuhr cqw), mindestens `3` (Rechner cqw: Anzeige, Tasten, Funktionstasten), `1` (Tasten zellenfuellend), `1`, `1` (Grenzen), `1` (Feld), `1`, `1` (i18n beide Sprachen), `D2_EXIT=0` und `DICT_UNCHANGED=0` (Woerterbuch unangetastet), `1` (Dashboard-Container), `1` (Umschalter), `1` (mt-8 bleibt), `1` (Seitenrahmen p-3), `0` (alte Stufe 6 weg), dann `1` fuer jede der Innenabstands-Stichproben link, favorites, calendar Rumpf, search, note, clock, stopwatch, calculator und `3` fuer die drei calendar-Zustandsansichten; `TSC_web=0`. Zwei Commits (2a mit 11, 2b mit 7 Dateien). RED-Lauf aus Schritt A im SUMMARY.
Task 3: Anwenderhandbuch, Abschluss-Gates, Push und Beobachtung des CI-Laufs
docs/anleitung-anwender.md
Gitea antwortet lokal: `curl -s --max-time 5 http://localhost:3002/api/v1/version` liefert `{"version":"1.26.2"}`, und `docker ps --format '{{.Names}}' | grep -c '^gitea-runner$'` liefert `1` (sonst Push trotzdem, Beobachtung als offenen Punkt ins SUMMARY).
Schritt A — `docs/anleitung-anwender.md` (echte Umlaute, Sie-Form, Ton der Datei, drei Stellen im Abschnitt „Das Dashboard“):
1. Aufzaehlungspunkt „Können Sie Widgets an der Ecke in der Größe ziehen …“ (Zeile 64): Satz anhaengen: „Position und Größe rasten dabei in feinen Schritten ein, sodass sich auch kleine Anpassungen vornehmen lassen.“
2. Tabellenzeile „| Uhr | Zeigt die aktuelle Uhrzeit an (optional mit Datum) |“ (Zeile 73) ersetzen durch: „| Uhr | Zeigt die aktuelle Uhrzeit an (optional mit Datum). Die Uhrzeit wächst und schrumpft mit der Kachel; wer eine feste Größe möchte, stellt sie unter Einstellungen > Dashboard als Schriftgröße in Punkt ein |“.
3. Satz „Für Suchleiste, Kalender, Favoriten und Link gibt es zusätzliche Einstellungen (z. B. eigene Suchanbieter, Kalenderquellen, hinterlegte Links)“ (Zeile 82) ersetzen durch „Für Uhr, Suchleiste, Kalender, Favoriten und Link gibt es zusätzliche Einstellungen (z. B. Zeitzone und Schriftgröße der Uhr, eigene Suchanbieter, Kalenderquellen, hinterlegte Links)“; Rest des Satzes unveraendert.
Schritt B — Gates, Commit, Push, Beobachtung:
1. `grep -c "Schriftgröße" docs/anleitung-anwender.md` -> mindestens 2; `grep -c "feinen Schritten" docs/anleitung-anwender.md` -> 1.
2. Volle Suiten und tsc erneut: Web `46 passed (46)` / `286 passed (286)`, API `67 passed (67)` / `1078 passed (1078)`, `for p in packages/shared apps/api apps/web; do pnpm -C $p exec tsc --noEmit; done` dreimal Exit 0; `pnpm install --frozen-lockfile` Exit 0 (Lockfile unveraendert).
3. `D=$(git diff --stat 5f50c5f -- . ':!.planning'); echo GIT_EXIT=$?; tail -n1 <<< "$D"` -> `29 files changed`; Unangetastet-Stichprobe `git diff --stat 5f50c5f -- '.env*' docker-compose.yml docker-compose.prod.yml docker-compose.dev.yml pnpm-lock.yaml apps/web/package.json apps/api/package.json apps/api/prisma apps/api/src/dashboard/dashboard.service.ts apps/api/src/dashboard/dto apps/web/src/app/globals.css` -> leer.
4. Commit: `docs(quick-260916-bwo): Anwenderhandbuch — feines Raster, Uhrzeit skaliert mit der Kachel, Schriftgroesse in Punkt` (nur diese Datei). Danach `git push` (schlichter Aufruf; die Push-URL zeigt auf localhost:3002); `git status -sb | head -n1` ohne `[ahead`.
5. Beobachtung des echten CI-Laufs (Token NIE ausgeben — nur in einer Shell-Variablen; Verfahren wie 260914-m97 Task 3): `PUSHED=$(git rev-parse HEAD); TOK=$(git config --get remote.origin.pushurl | sed -E 's#.*schalli:([^@]+)@.*#\1#')`; bis zu 12 Minuten alle 20 s `curl -s -H "Authorization: token $TOK" "http://localhost:3002/api/v1/repos/schalli/tessera-ctl/actions/runs?limit=5"` abfragen (Hintergrundbefehl, falls `sleep` im Vordergrund blockiert ist), Eintrag mit `head_sha == PUSHED`, auf `status == completed` warten; Erwartung `conclusion == success`, Dauer eher 4-6 Minuten (kein Lockfile-Wechsel, deps-Stufen aus dem Cache). Danach Abbild-Probe: `docker run --rm --entrypoint node localhost:3002/schalli/tessera-ctl/api:beta -e 'console.log(process.env.APP_VERSION)'` -> kurzer SHA von `PUSHED`. Lauf-ID, Dauer, Ergebnis ins SUMMARY. Ist `conclusion` nicht `success`: Job-Log ueber `.../actions/runs/<id>/jobs` lesen, Ursache beheben, erneut pushen, erneut beobachten.
6. Wird das SUMMARY erst nach dem Push committet, den Push danach wiederholen (weiterer CI-Lauf erwartet, in Ordnung). SUMMARY-Pflichtinhalte: beide RED-Laeufe, die gemessenen jsdom-/Tailwind-Befunde in Kurzform, die Entscheidung „Umrechnung im Frontend“ mit Begruendung, die Entscheidung „`mt-8` bleibt“ mit der Umschalter-Messung, die Annahme „Listen-Widgets skalieren nicht“, die Beobachtung „Timezone-Label hart englisch“, die Bestandszahlen (lokal/alpha 0 Anordnungen, live nicht gemessen) und die Anleitung fuer den Browser-Nachweis aus `<verification>`.
5f50c5f -- . ':!.planning'); echo GIT_EXIT=$? ; tail -n1 <<< "$D" ; U=$(git diff --stat 5f50c5f -- '.env*' docker-compose.yml docker-compose.prod.yml docker-compose.dev.yml pnpm-lock.yaml apps/web/package.json apps/api/package.json apps/api/prisma apps/api/src/dashboard/dashboard.service.ts apps/api/src/dashboard/dto apps/web/src/app/globals.css); echo U_EXIT=$? ; test -z "$U"; echo U_EMPTY=$? ; S=$(git status -sb); head -n1 <<< "$S"
Greps liefern `>= 2` und `1`; Web `Test Files 46 passed (46)` / `Tests 286 passed (286)`; API `Test Files 67 passed (67)` / `Tests 1078 passed (1078)`; dreimal `TSC_...=0`; `FROZEN=0`; `GIT_EXIT=0` und die Summenzeile nennt `29 files changed`; `U_EXIT=0`, `U_EMPTY=0`; die Status-Zeile enthaelt kein `[ahead`. Das SUMMARY traegt unter „CI-Lauf nach dem Push“ Lauf-ID, `conclusion`, Dauer und die Abbild-Probe — oder, falls Gitea/Runner nicht erreichbar waren, den Grund und den offenen Punkt.
<threat_model>
Trust Boundaries
| Boundary | Description |
|---|---|
Browser (angemeldeter Benutzer) -> PUT /dashboard/layout (layouts Json) |
Vom Benutzer kontrolliertes JSON inklusive des Markers __gridVersion; wird ungeprueft (@IsObject()) in die eigene DashboardLayout-Zeile geschrieben und beim naechsten Laden vom Frontend interpretiert |
Browser -> PATCH /dashboard/widgets/:id/config (timeFontSizePt) |
Vom Benutzer kontrollierter Wert landet ungeprueft in WidgetInstance.config und wird spaeter in einen Inline-Style des Uhr-Widgets uebersetzt |
Gespeichertes JSON -> migrateGridLayouts -> Zustand -> Speichern |
Die Umrechnung veraendert Benutzerdaten; ein Fehler (fehlender Marker) wiederholt sich bei jedem Laden |
Widget-Konfiguration -> CSS (font-size) |
Konfigurationsdaten werden zu Style |
STRIDE Threat Register (ASVS Level 1, Blocking-Schwelle high)
| Threat ID | Category | Component | Severity | Disposition | Mitigation Plan |
|---|---|---|---|---|---|
| T-BWO-01 | Tampering | timeFontSizePt -> Inline-Style in clock-widget.tsx |
low | mitigate | resolveClockTimeFontSizePt laesst NUR typeof number, endlich, 8..200 durch; alles andere ist „automatisch“ ohne Inline-Style; der Style entsteht als React-Objekt { fontSize: ${n}pt } aus einer Zahl, nie aus Text; Tests pinnen '36' (Zeichenkette), NaN, Infinity, 7, 201 -> auto; dieselben Grenzen im Formular (eine Quelle: clock-font-size.ts) |
| T-BWO-02 | Tampering / Integritaet | Umrechnung gespeicherter Anordnungen (migrateGridLayouts, Store) |
medium | mitigate | Marker __gridVersion: 2 im gespeicherten JSON; Verdopplung NUR ohne numerischen Marker >= 2; Idempotenz-Test (Falsifizierung a); Store-Tests pinnen Marker bei JEDEM api.saveLayout (Laden mit Umrechnung UND normales Speichern); Marker nie im Zustand (Store-Iteration); Sofort-Speichern nach der Umrechnung, Fehler protokolliert statt verschluckt |
| T-BWO-03 | Elevation of Privilege | Fremde Anordnungen/Widgets ueber die Umrechnung | low | accept | Keine neue API, keine neue Abfrage: getLayout/saveLayout/updateWidgetConfig bleiben forTenant(prisma, tenantId, userId)-gebunden mit Besitzpruefung (Spec 260910-krx unveraendert gruen); die Umrechnung laeuft im Browser des Benutzers auf seiner eigenen, ueber die gebundenen Wege geladenen Anordnung |
| T-BWO-04 | Denial of Service | Manipulierter Marker oder absurde Werte in der EIGENEN Anordnung (__gridVersion: 99, x: 1e9) |
low | accept | Wirkt nur auf das eigene Dashboard (Zeile je Benutzer); react-grid-layout begrenzt Positionen ueber correctBounds; ein Marker >= 2 verhindert lediglich die Verdopplung; kein Absturz: nicht-numerische Felder bleiben unveraendert, Nicht-Arrays werden weggelassen (Test 6/7) |
| T-BWO-05 | Information Disclosure | Neue Fehlerpfade (Speichern nach Umrechnung scheitert) | low | accept | console.error nur mit dem Fehlerobjekt des eigenen Aufrufs, keine fremden Daten; kein neuer Fehlerzustand in der Oberflaeche |
| T-BWO-06 | Tampering | CSS-Container-Queries / Tailwind-Klassen als Angriffsflaeche | low | accept | Klassen sind statische Literale im Quelltext, keine Benutzerdaten in className |
| T-BWO-SC | Tampering | npm/pip/cargo-Installationen | low | accept | Keine neuen Pakete, pnpm-lock.yaml unveraendert (pnpm install --frozen-lockfile als Gate in Task 3) |
| </threat_model> |
5f50c5f -- . ':!.planning'); tail -n1 <<< "$D"` -> `29 files changed`
- `git diff --stat 5f50c5f -- '.env*' docker-compose.yml docker-compose.prod.yml docker-compose.dev.yml pnpm-lock.yaml apps/web/package.json apps/api/package.json apps/api/prisma apps/api/src/dashboard/dashboard.service.ts apps/api/src/dashboard/dto apps/web/src/app/globals.css` -> leer
- Falsifizierungen im SUMMARY benannt: (a) Marker-Pruefung in `migrateGridLayouts` entfernt -> Idempotenz-Test rot (und Store-Test 2 rot); (b) `resolveClockTimeFontSizePt` ohne Typpruefung -> Test 6 der Uhr rot (`'36'` wuerde `36pt`); (c) eine Konstante in `widget-registry.tsx` auf den alten Wert -> Tabellen-Test rot, `rowHeight` auf 40 -> Grid-Props-Test rot. Jede Falsifizierung einmal durchfuehren, Testnamen rot notieren, zuruecksetzen.
- Human-Check (end-of-phase, nicht blockierend, durch den Verifizierer/Orchestrator mit Playwright MCP gegen die lokalen Container; VORHER `docker compose up -d --build web` — das Web-Abbild ist 39 Stunden alt; die API braucht keinen Neubau):
1. Anmelden (Benutzername `admin`, Kennwort `admin123` — Benutzername, nicht E-Mail). Dashboard: „Dashboard bearbeiten“, Uhr-Widget und Suchleiste hinzufuegen, Uhr rechts neben die Suchleiste ziehen, speichern.
2. Bounding-Boxen messen (Playwright `boundingBox()` der Elemente, nie per `fetch` aus der Seite): `main.app-shell-main` links vs. erstes Widget (`[data-widget-id]`) links -> Differenz 28 px (+/-1); zwei horizontal benachbarte Widgets -> Luecke 8 px (+/-1); oben `main` vs. erstes Widget -> 60 px (+/-1). Zweite Seite `/admin/users`: Abstand vom `main`-Rand zum ersten Inhaltselement 12 px (vorher 24) — Beleg, dass der Rahmen ueberall enger ist.
3. Raster: im Bearbeitungsmodus die Uhr um EINE Rasterstufe nach rechts ziehen — der Versatz betraegt eine Spaltenbreite von `(Containerbreite - 8*23 - 8*2)/24` px (bei 1200 px Containerbreite ca. 41 px statt ca. 83 px); notieren.
4. Skalierung: Uhr im Bearbeitungsmodus auf 12x8 vergroessern -> `getComputedStyle(time).fontSize` deutlich groesser als bei 4x4 (Zahlen notieren, z. B. 4x4 ca. 38-42 px, 12x8 ca. 80+ px); wieder verkleinern -> schrumpft; `data-font-mode="auto"`.
5. Punktgroesse: Einstellungen -> Dashboard, Uhr #1 aufklappen, „Schriftgröße der Uhrzeit (Punkt)“ auf 36, Feld verlassen; zurueck zum Dashboard -> `time.style.fontSize === '36pt'`, `getComputedStyle(time).fontSize === '48px'` (36 pt = 48 px) unabhaengig von der Widgetgroesse (einmal 4x4, einmal 12x8 pruefen); `data-font-mode="fixed"`. Danach 300 eintragen -> Fehlermeldung, kein Speichern; Feld leeren -> wieder automatisch.
6. Umrechnungs-Probe (SQL gegen die lokale Datenbank, Rolle `tessera` hat BYPASSRLS, Schalter AUS): `docker exec tessera-ctl-db-1 psql -U tessera -d tessera -At -c 'SELECT "userId", layouts::text FROM "DashboardLayout";'` — die gespeicherte Anordnung (neue Einheiten, `__gridVersion: 2`) lesen und die Widget-Kennungen notieren. Dann die Zeile in ALTE Einheiten ohne Marker zurueckschreiben, z. B. `UPDATE "DashboardLayout" SET layouts = jsonb_build_object('lg', jsonb_build_array(jsonb_build_object('i','','x',6,'y',0,'w',2,'h',2), jsonb_build_object('i','','x',0,'y',0,'w',6,'h',2)), 'md','[]'::jsonb,'sm','[]'::jsonb,'xs','[]'::jsonb,'xxs','[]'::jsonb) WHERE "userId" = '';`. Seite neu laden -> Uhr steht rechts neben der Suchleiste an derselben optischen Stelle (Bounding-Boxen vergleichen: Uhr links = Suchleiste rechts + 8 px); danach `SELECT layouts->'__gridVersion', layouts->'lg' FROM "DashboardLayout"` -> `2` und `x: 12, w: 4, h: 4` bzw. `x: 0, w: 12, h: 4`. Seite ein zweites Mal laden -> Werte unveraendert (keine erneute Verdopplung).
7. Rechner und Stoppuhr hinzufuegen, jeweils vergroessern -> Anzeige und Tasten wachsen mit, das Tastenraster bleibt 4x5 und ueberlaeuft nicht; bei Mindestgroesse bleibt der Rechner bedienbar (sonst: nur die Anzeige skalieren und das im SUMMARY begruenden — vorher gemessen, nicht angenommen).
<success_criteria>
- Raster: 24/20/12/8/2 Spalten, 20 px Zeilen, 8 px Abstand und Randabstand des Grids; alle 32 Konstanten exakt verdoppelt und im Test festgenagelt; Grid-Props im Test ueber den Mock gelesen.
- Umrechnung: reine Funktion mit 7 Tests (alt x2, markiert unveraendert, leer leer, Idempotenz, Marker-Helfer, Zukunft/Robustheit, Fremdwerte), Store rechnet beim Laden um, speichert sofort mit Marker und traegt den Marker bei jedem Speichern; API unveraendert, Durchreichung von
__gridVersionundtimeFontSizePtper Spec gepinnt. - Skalierung: Widget-Rumpf ist Groessen-Container; Uhr, Stoppuhr, Rechner tragen Container-Query-Klassen mit
clamp()-Grenzen, keine Fensterbreiten-Formel mehr; Listen-Widgets bewusst unveraendert. - Punktgroesse:
timeFontSizePt8..200 als Zahl, Feld unter Einstellungen -> Dashboard mit Hilfetext und Fehlermeldung (de/en, Sie-Form, Waechter gruen ohne Woerterbuch-Aenderung), Widget mit36ptim Style bzw.auto-Modus; Falsifizierungen a/b/c rot-gruen. - Abstaende: Seitenrahmen 12 px (alle Seiten), Dashboard-Container 8 px, Umschalter bei 8 px, Widget-Innenabstaende halbiert (Tabelle),
mt-8mit Messbegruendung; Browser: 28 px Rand, 8 px Luecke. - Web 46/286, API 67/1078, tsc dreimal 0, Lockfile unveraendert, genau 29 Dateien ausserhalb
.planning, vier Commits mit Scopequick-260916-bwo, gepusht, CI-Laufsuccessbeobachtet, Abbild-Probe notiert; Handbuch nennt Raster, Skalierung und Schriftgroesse. </success_criteria>