schalli
bec0530a2b
Task 3 (Browser-Abnahme) ist durchgefuehrt. Von den beiden zur Freigabe gestellten Gestaltungsfragen wurde eine zurueckgewiesen und eine blieb offen: Die Anordnung auf dem Anmelde-Panel hat der User weder als "Marke oben" noch als "Marke unten" abgenommen, sondern eine dritte Loesung verlangt — Logo links, Text rechts daneben, wie in der gelieferten Schriftzug-Datei. Nachgezogen mit11c0ec6. Zur Schriftzugfarbe hat er sich nicht geaeussert; sie bleibt vorerst dunkel, die Rueckkehr zu Gelb wurde als jederzeit moeglich angeboten. Ausserdem in der SUMMARY festgehalten, dass die Abnahme einen Defekt ausserhalb dieses Plans aufgedeckt hat: die Tailwind-Dunkelvariante war nie an die .dark-Klasse gebunden (WINDOWS #13, behoben mitf8d7da0). Der Logo-Einbau hat ihn nur sichtbar gemacht, verursacht hat er ihn nicht. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01K5jtbGzC5Sf9npJ3JCjKhq
17 KiB
phase, plan, subsystem, tags, requires, provides, affects, actuals, plan_head_before, tech-stack, key-files, key-decisions, requirements-completed, coverage, duration, completed, status
| phase | plan | subsystem | tags | requires | provides | affects | actuals | plan_head_before | tech-stack | key-files | key-decisions | requirements-completed | coverage | duration | completed | status | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| quick-260907-fgv | 01 | ui |
|
|
|
|
17a8355 |
|
|
|
|
|
35min | 2026-09-07 | complete |
Phase quick-260907-fgv Plan 01: Tessera-Logo und Favicon fest einbauen — Summary
TesseraLogo-Komponente und brand.ts eingefuehrt, sechs Marken-Stellen umgestellt, Icon-Dateien byteidentisch uebernommen — Task 3 (Browser-Abnahme) steht noch aus.
Performance
- Duration: ca. 35 min
- Tasks: 2 von 3 (Task 3 ist
checkpoint:human-verify, bewusst nicht ausgefuehrt) - Files modified: 14 (5 neu, 9 geaendert)
Accomplishments
- Gelieferte
favicon.svgundapple-touch-icon.pngbyteidentisch nachapps/web/src/app/icon.svgbzw.apps/web/src/app/apple-icon.pngkopiert; die uebrigen vier gelieferten Dateien bleiben mit dokumentierter Begruendung ausserhalb des Repositories. apps/web/src/components/brand/brand.tsangelegt: die drei Markenfarben (BRAND_YELLOW,BRAND_OLIVE,BRAND_PLATE) stehen jetzt an genau einer Stelle im Web-Quellcode.TesseraLogo-Komponente gebaut (Variantenmark/horizontal/stacked), als handgesetztes JSX-SVG ohnedangerouslySetInnerHTML, mit schaltbarer dunkler Kontur der Grundplatte (plateOutline).- Alle sechs Marken-Stellen umgestellt: Kopfleiste, Seitenleisten-Schublade, Anmeldeseite (breite und schmale Ansicht), beide Passwort-Seiten. Der handgezeichnete Vier-Quadrate-Platzhalter auf der Anmeldeseite ist entfernt.
common.brand.logoAltinde.jsonunden.jsonergaenzt, Schluesselparitaet per Test abgesichert.- Vollstaendige Web-Testsuite (37 Testdateien, 221 Tests) und Typpruefung sind gruen.
Warum der Schriftzug Text ist, kein Bild
Zwei unabhaengige Gruende. Erstens die Farbe: tessera-logo-schriftzug.svg haelt die Textfarbe zweimal fest als dunklen Ton — im dunklen Erscheinungsbild der Anwendung waere der Schriftzug unsichtbar. Zweitens die Schrift: die Datei verlangt Archivo in Schnitt 900, die Anwendung laedt aber ausschliesslich Inter (--font-sans in globals.css) — der Browser wuerde eine Ersatzschrift mit anderen Buchstabenbreiten in einen starr fixierten Zeichenbereich zwingen. "Tessera" als normaler HTML-Text aus common.appName loest beide Probleme: er erbt die richtige Farbe, bricht nie um, bleibt uebersetzbar.
Kontur der dunklen Platte
Nachgerechnet: die Plattenfarbe (#1a1a1a) und der dunkle Anwendungshintergrund (oklch(0.23 0.01 260) = #1a1d22) sind praktisch derselbe Ton — ohne Gegenmassnahme wuerde die Platte im dunklen Erscheinungsbild verschwinden und die fuenf Kacheln wuerden frei schweben. Deshalb bekommt die Platte ueber eine dark:stroke-white/25-Utility eine halbtransparente helle Haarlinie, die im hellen Erscheinungsbild unsichtbar bleibt (stroke-transparent). Auf dem gelben Anmelde-Panel ist die Kontur ueber plateOutline={false} abgeschaltet, weil dieses Panel unabhaengig vom Erscheinungsbild immer gelb ist und dort ohnehin maximaler Kontrast besteht.
Gelbwert: eine Quelle, --primary bewusst unberuehrt
brand.ts:BRAND_YELLOW ist jetzt die einzige Stelle im Web-Quellcode, an der der Markengelbwert notiert steht. Das Anmelde-Panel (Inline-style) und der Vorgabewert der persoenlichen Akzentfarbe (account-settings-form.tsx:DEFAULT_ACCENT) lesen ihn von dort. Der bestehende Design-Token --primary in globals.css bleibt unveraendert — er ist rechnerisch ein leicht anderer Ton und steuert Schaltflaechen, Fokusringe und Aktivmarkierungen der gesamten Anwendung. Ihn auf den Markenwert zu ziehen waere eine Umfaerbung der gesamten Oberflaeche und war nicht Teil dieser Aufgabe.
Task Commits
- Task 1: Markenbausteine — Icon-Dateien, Farbkonstanten, TesseraLogo-Komponente, i18n-Schluessel —
49d3df4(feat) - Task 2: Alle sechs Marken-Stellen auf die Komponente umstellen und den Gelbwert zusammenfuehren —
c4cc05a(feat)
Task 3 (checkpoint:human-verify, Browser-Abnahme in beiden Erscheinungsbildern) ist noch offen — siehe unten.
Deviations from Plan
Auto-fixed Issues
1. [Rule 1 - Bug] Schriftzug-Textfarbe entfernt statt fest gesetzt
- Found during: Task 2 (Einbau auf dem gelben Anmelde-Panel)
- Issue:
tessera-logo.tsxsetzte in Task 1 nochtext-foregrounddirekt auf den Schriftzug. Auf dem immer-gelben Anmelde-Panel haette das im dunklen Erscheinungsbild helle Schrift auf gelbem Grund erzeugt (kaum lesbar), weil eine explizite Tailwind-Farbklasse nicht zuverlaessig von einer Vorfahren-Klasse gleicher Spezifitaet ueberschrieben werden kann. - Fix: Der Schriftzug setzt keine eigene Textfarben-Klasse mehr und erbt die Farbe stattdessen per normaler CSS-Kaskade vom umgebenden Container. Auf normalen Seiten ist das
text-foregroundvon<body>(layout.tsx), auf dem Anmelde-Panel das explizit gesetztetext-gray-900am inneren Container. - Files modified:
apps/web/src/components/brand/tessera-logo.tsx - Commit:
c4cc05a
2. [Rule 1 - Bug] Ungenutzte Variable tCommon in sidebar.tsx entfernt
- Found during: Task 2
- Issue: Nach dem Ersetzen des Schriftzugs durch
TesseraLogowarconst tCommon = useTranslations('common');insidebar.tsxnicht mehr referenziert. - Fix: Zeile entfernt.
- Files modified:
apps/web/src/components/layout/sidebar.tsx - Commit:
c4cc05a
Bewusst ausgelassen (per Ausfuehrungs-Anweisung)
Der Docker-Neubau (docker compose build web && docker compose up -d --force-recreate web) und der curl-Health-Check am Ende des Task-2-Verify-Blocks wurden NICHT ausgefuehrt — die Ausfuehrungs-Anweisung fuer diesen Lauf untersagt es ausdruecklich ("Do NOT rebuild Docker images — the orchestrator does that"). Alle anderen Verify-Schritte (Byte-Vergleich der Icons, vollstaendige Testsuite, Typpruefung, grep-Checks) wurden real ausgefuehrt und sind gruen.
Known Stubs
Keine.
Threat Flags
Keine neue, im Plan nicht bereits erfasste Angriffsflaeche. Die drei im Plan gefuehrten Bedrohungen (T-FGV-01 Tampering ueber tessera-logo.tsx, T-FGV-02 Information Disclosure ueber icon.svg, T-FGV-03 Tampering ueber user-files/logo/) sind wie geplant behandelt: kein dangerouslySetInnerHTML, keine Laufzeit-Dateilesung, Byte-Vergleich im Verify-Schritt bestanden.
Ausstehend: Task 3 (Browser-Abnahme)
Task 3 ist ein checkpoint:human-verify mit gate="blocking-human" und wurde absichtlich nicht ausgefuehrt. Der Orchestrator baut das lokale Web-Abbild neu, startet den Container und fuehrt die Browser-Pruefung durch. Zwei Gestaltungsfragen stehen dabei zur Freigabe oder Zurueckweisung:
- Schriftzugfarbe: "Tessera" ist in Kopfleiste und Schublade jetzt dunkel (bzw. hell im dunklen Erscheinungsbild) statt wie bisher gelb. Passt das, oder soll das bisherige Gelb zurueck?
- Reihenfolge auf dem Anmelde-Panel: Die Bildmarke steht jetzt oben auf dem gelben Panel statt wie bisher unten unter dem Text. Passt diese Reihenfolge, oder soll die Marke wieder unter den Text?
Task 3 — Abnahme durchgefuehrt am 2026-09-07
Der Orchestrator hat das Web-Abbild neu gebaut und die Oberflaeche im echten Browser in hellem und dunklem Erscheinungsbild geprueft. Ergebnis:
Frage 2 (Anordnung auf dem Anmelde-Panel) — zurueckgewiesen. Der User hat weder
"Marke oben" noch "Marke unten" gewaehlt, sondern eine dritte Anordnung verlangt:
"Logo links, Text rechts daneben" — also nebeneinander statt untereinander, wie in
der gelieferten Datei tessera-logo-schriftzug.svg. Nachgezogen mit Commit 11c0ec6:
die horizontale Variante nimmt jetzt einen optionalen Untertitel entgegen und stellt
rechts neben der Marke den Namen und darunter den Untertitel. Die gestapelte Variante
entfiel dabei — sie war danach nirgends mehr im Einsatz.
Frage 1 (Schriftzugfarbe) — offen geblieben. Der User hat direkt die Anordnung entschieden und sich zur Farbe nicht geaeussert. Der Schriftzug bleibt vorerst dunkel (hell im dunklen Erscheinungsbild); die Rueckkehr zu Gelb ist ein Einzeiler und wurde dem User als jederzeit moeglich angeboten.
Ein Defekt ausserhalb dieses Plans, bei der Abnahme gefunden
Die im Plan vorgesehene Plattenkontur dark:stroke-white/25 griff im dunklen
Erscheinungsbild nicht. Am laufenden System gemessen war der Grund nicht die Marke,
sondern die Grundeinstellung von Tailwind: globals.css deklarierte kein
@custom-variant dark, sodass die dark:-Variante an prefers-color-scheme hing —
also an der Einstellung des Betriebssystems — waehrend die Anwendung den Modus ueber
next-themes per Klasse schaltet. Damit blieb jede dark:-Utility im Web-Quellcode
wirkungslos, sobald System und Portal-Einstellung auseinanderlagen: ueber 100
Vorkommen in mehr als zehn Dateien, darunter Status-, Warn- und Fehlerfarben,
Hinweisboxen und Badges in der Administration.
Unentdeckt geblieben war das, weil Hintergrund und Textfarbe nicht ueber dark:
laufen, sondern ueber die Farbtokens unter .dark — die Oberflaeche wurde also
grundsaetzlich dunkel, nur die Feinheiten fehlten.
Behoben mit Commit f8d7da0, erfasst und geschlossen als WINDOWS.md #13. In beide
Richtungen nachgemessen: im dunklen Modus greifen dark:-Angaben jetzt und die
Kontur steht weiss mit 25 Prozent Deckkraft, im hellen Modus greifen sie weiterhin
nicht und die Kontur bleibt unsichtbar.
Sprachbefund am Rande
Auf der Anmeldeseite faellt "Modulare Workflow-Plattform fuer Ihr Unternehmen"
auf. Die deutschen Texte schreiben Umlaute an 29 Stellen als Buchstabenpaare aus.
Nicht Teil dieses Plans, als Backlog-Punkt
2026-09-07-umlaute-in-der-oberflaeche.md abgelegt.
Vermerkter Backlog-Punkt (nicht in diesem Plan gebaut)
"Administrator kann das Erscheinungsbild je Mandant anpassen — eigenes Logo hochladen, Markenfarben setzen." Ansatzpunkt ist apps/web/src/components/brand/; die Oberflaeche zieht das Logo bereits ausschliesslich von dort. Eingereicht als .planning/todos/pending/2026-09-07-mandanten-branding-logo-und-farben.md.
Self-Check: PASSED
apps/web/src/app/icon.svg— FOUND, byteidentisch zuuser-files/logo/favicon.svgapps/web/src/app/apple-icon.png— FOUND, byteidentisch zuuser-files/logo/apple-touch-icon.pngapps/web/src/components/brand/brand.ts— FOUNDapps/web/src/components/brand/tessera-logo.tsx— FOUNDapps/web/src/components/brand/tessera-logo.test.tsx— FOUND- Commit
49d3df4— FOUND ingit log - Commit
c4cc05a— FOUND ingit log