@micha.bigler/ui-core-micha 3.5.1 → 3.7.0

package/tests/UserMenu.test.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 const translation = vi.hoisted(() => ({
   t: vi.fn((key) => `translated:${key}`),
@@ -11,15 +12,26 @@ vi.mock('react-i18next', () => ({ useTranslation: () => translation }));
 
 import { AuthContext } from '../src/auth/AuthContext';
 import { UserMenu } from '../src/auth/UserMenu';
+import { calculateContrastRatio, createAppTheme } from '../src/theme';
 
-function renderUserMenu({ user, logout = vi.fn(), ...props } = {}) {
+const defaultTheme = createAppTheme({ palette: { primary: { main: createTheme().palette.primary.main } } });
+
+function renderUserMenu({ user, logout = vi.fn(), theme = defaultTheme, ...props } = {}) {
   return render(
-    <AuthContext.Provider value={{ user, logout }}>
-      <UserMenu {...props} />
-    </AuthContext.Provider>,
+    <ThemeProvider theme={theme}>
+      <AuthContext.Provider value={{ user, logout }}>
+        <UserMenu {...props} />
+      </AuthContext.Provider>
+    </ThemeProvider>,
   );
 }
 
+function getAvatarContrast() {
+  const avatar = screen.getByText(/^[A-Z]+$/).closest('.MuiAvatar-root');
+  const styles = window.getComputedStyle(avatar);
+  return calculateContrastRatio(styles.color, styles.backgroundColor);
+}
+
 describe('UserMenu', () => {
   afterEach(() => {
     cleanup();
@@ -132,4 +144,28 @@ describe('UserMenu', () => {
     renderUserMenu({ user: { username: 'grace' } });
     expect(screen.getByText('G')).toBeTruthy();
   });
+
+  it("uses a contrasting avatar pair with jg-ferien's primary colour", () => {
+    const theme = createAppTheme({ palette: { primary: { main: '#367964' } } });
+    renderUserMenu({ theme, user: { username: 'ab' } });
+
+    expect(getAvatarContrast()).toBeGreaterThanOrEqual(4.5);
+  });
+
+  it('uses a contrasting avatar pair with the library baseline primary colour', () => {
+    renderUserMenu({ user: { username: 'ab' } });
+
+    expect(getAvatarContrast()).toBeGreaterThanOrEqual(4.5);
+  });
+
+  it('falls back to the dark text pair for a medium-luminance primary colour', () => {
+    // A synthetic mid-grey (luminance ~0.216, no real brand meaning) picked to
+    // fail white-on-background at 4.5:1 (~3.95:1) so this test actually
+    // exercises the black-fallback branch, not just the white branch every
+    // other test here happens to land on.
+    const theme = createAppTheme({ palette: { primary: { main: '#808080' } } });
+    renderUserMenu({ theme, user: { username: 'ab' } });
+
+    expect(getAvatarContrast()).toBeGreaterThanOrEqual(4.5);
+  });
 });

package/tests/authErrors.test.js

@@ -0,0 +1,43 @@
+import { describe, expect, it } from 'vitest';
+import { extractErrorInfo, normaliseApiError } from '../src/utils/auth-errors.js';
+
+describe('auth error normalisation', () => {
+  it('uses the caller default for generic detail errors while preserving the detail message', () => {
+    const responseError = {
+      response: { status: 429, data: { detail: 'Die Anfrage wurde gedrosselt...' } },
+    };
+    const info = extractErrorInfo(responseError);
+    const error = normaliseApiError(responseError, 'Auth.LOGIN_FAILED');
+
+    expect(info.code).toBeNull();
+    expect(error.code).toBe('Auth.LOGIN_FAILED');
+    expect(error.message).toBe('Die Anfrage wurde gedrosselt...');
+    expect(error.status).toBe(429);
+  });
+
+  it('uses its namespaced default when no caller default is provided', () => {
+    const error = normaliseApiError({
+      response: { status: 429, data: { detail: 'Die Anfrage wurde gedrosselt...' } },
+    });
+
+    expect(error.code).toBe('Auth.GENERIC_ERROR');
+  });
+
+  it('preserves a backend code from the errors array', () => {
+    const error = normaliseApiError(
+      { response: { data: { errors: [{ code: 'enter_current_password', message: 'x' }] } } },
+      'Auth.PROFILE_UPDATE_FAILED',
+    );
+
+    expect(error.code).toBe('enter_current_password');
+  });
+
+  it('preserves a backend code from the response data', () => {
+    const error = normaliseApiError(
+      { response: { data: { code: 'invalid_credentials' } } },
+      'Auth.LOGIN_FAILED',
+    );
+
+    expect(error.code).toBe('invalid_credentials');
+  });
+});

package/tests/i18nGermanVariant.test.js

@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'vitest';
+
+import { authTranslations } from '../src/i18n/authTranslations';
+import {
+  createUiCoreTranslations,
+  uiCoreTranslations,
+} from '../src/i18n/uiCoreTranslations';
+
+const SIE_FORM = /\b(Sie|Ihr|Ihre|Ihrem|Ihren|Ihrer|Ihres)\b/;
+const REQUIRED_LOCALES = ['de', 'en', 'fr', 'sw'];
+
+describe('German translation variants', () => {
+  it('keeps formal German by default and switches representative auth copy to du', () => {
+    const key = 'Auth.PAGE_INVITE_SUBTITLE';
+    const formal = createUiCoreTranslations();
+    const informal = createUiCoreTranslations({ germanVariant: 'informal' });
+
+    expect(formal[key].de).toBe(uiCoreTranslations[key].de);
+    expect(formal[key]).not.toHaveProperty('de_informal');
+    expect(informal[key].de).toBe('Bitte wähle ein Passwort, um auf dein Konto zuzugreifen.');
+    expect(informal[key].de).not.toMatch(SIE_FORM);
+    expect(informal['Auth.EMAIL_LABEL'].de).toBe(formal['Auth.EMAIL_LABEL'].de);
+  });
+
+  it('switches EVERY Sie-form key to its own rewritten de_informal, not one hardcoded example', () => {
+    // Not just one representative key -- a factory hardcoded to a single
+    // (key, value) pair would pass the test above but fail here the moment a
+    // second Sie-form key is checked against ITS OWN de_informal value.
+    const formalKeys = Object.entries(authTranslations)
+      .filter(([, value]) => SIE_FORM.test(value.de))
+      .map(([key]) => key);
+    expect(formalKeys.length).toBeGreaterThan(1);
+
+    const informal = createUiCoreTranslations({ germanVariant: 'informal' });
+    const formal = createUiCoreTranslations();
+    for (const key of formalKeys) {
+      expect(informal[key].de, `${key} should switch to its own de_informal`).toBe(authTranslations[key].de_informal);
+      expect(informal[key].de).not.toMatch(SIE_FORM);
+      expect(formal[key].de, `${key} default must stay formal`).toBe(authTranslations[key].de);
+    }
+  });
+
+  it('requires every Sie-form auth string to have a rewritten informal variant', () => {
+    const formalKeys = Object.entries(authTranslations)
+      .filter(([, value]) => SIE_FORM.test(value.de))
+      .map(([key]) => key);
+
+    expect(formalKeys.length).toBeGreaterThan(0);
+    for (const key of formalKeys) {
+      const informal = authTranslations[key].de_informal;
+      expect(informal, `${key} needs de_informal`).toEqual(expect.any(String));
+      expect(informal.trim(), `${key}.de_informal must not be empty`).not.toBe('');
+      expect(informal, `${key}.de_informal must not retain Sie-form`).not.toMatch(SIE_FORM);
+    }
+  });
+
+  it('preserves the four-locale shape for the aggregate after adding screen keys', () => {
+    for (const [key, value] of Object.entries(uiCoreTranslations)) {
+      for (const locale of REQUIRED_LOCALES) {
+        expect(typeof value[locale], `${key}.${locale} must be a string`).toBe('string');
+        expect(value[locale].trim(), `${key}.${locale} must not be empty`).not.toBe('');
+      }
+    }
+  });
+});

package/tests/messagingComposer.test.jsx

@@ -108,4 +108,29 @@ describe('Composer optimistic send and attachments', () => {
     render(<MessagingProvider api={api} active={false}><AttachmentList attachments={[{ id: 1, filename: 'note.pdf', content_type: 'application/pdf' }]} /></MessagingProvider>);
     expect(screen.getByLabelText('MessagingAttachments.LABEL')).toBeTruthy();
   });
+
+  it('keeps the message field and send button usable beside all enabled actions', () => {
+    render(<MessagingProvider api={makeApi()} active={false}><Composer conversationId={7} conversation={{ kind: 'group' }} allowAnnouncement /></MessagingProvider>);
+    const messageField = screen.getByLabelText('MessagingComposer.MESSAGE');
+    const messageFieldRoot = messageField.closest('.MuiFormControl-root');
+    expect(messageFieldRoot).toBeTruthy();
+    expect(window.getComputedStyle(messageFieldRoot).minWidth).toBe('120px');
+    const sendButton = screen.getByRole('button', { name: 'MessagingComposer.SEND' });
+    expect(window.getComputedStyle(sendButton).flexShrink).toBe('0');
+    expect(screen.getByRole('button', { name: 'MessagingComposer.ADD_ATTACHMENT' }).disabled).toBe(false);
+    expect(screen.getByRole('button', { name: 'MessagingComposer.ADD_EMOJI' }).disabled).toBe(false);
+    expect(screen.getByRole('button', { name: 'MessagingPoll.CREATE' }).disabled).toBe(false);
+    expect(screen.getByRole('button', { name: 'MessagingAnnouncement.CREATE' }).disabled).toBe(false);
+
+    // Structural proof, not just a CSS-value check: the action icons and the
+    // message field/send button must sit in DIFFERENT Stack rows, not merely
+    // carry different sx values while still being flex siblings in one row
+    // (a same-row layout with only the sx tweaks would still pass every
+    // assertion above without actually fixing the 375px overflow).
+    const attachButton = screen.getByRole('button', { name: 'MessagingComposer.ADD_ATTACHMENT' });
+    const actionsRow = attachButton.closest('.MuiStack-root');
+    expect(actionsRow).toBeTruthy();
+    expect(actionsRow.contains(messageField)).toBe(false);
+    expect(actionsRow.contains(sendButton)).toBe(false);
+  });
 });

package/tests/messagingLinkify.test.jsx

@@ -0,0 +1,51 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+
+vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key) => key, i18n: { language: 'en' } }) }));
+vi.mock('../src/notifications/realtime', () => ({ useRealtime: () => ({ subscribe: () => () => {}, onReconnect: () => () => {} }) }));
+
+import { MessageBubble } from '../src/messaging/MessageBubble';
+import { MessagingProvider } from '../src/messaging/MessagingProvider';
+
+function makeApi() {
+  return {
+    getReadStatus: vi.fn().mockResolvedValue({ all_read: false }),
+    getAttachment: vi.fn(), getAttachmentThumbnail: vi.fn(), addReaction: vi.fn(), removeReaction: vi.fn(),
+    votePoll: vi.fn(), closePoll: vi.fn(),
+  };
+}
+function renderMessage(body) {
+  return render(<MessagingProvider api={makeApi()} active={false}><MessageBubble message={{ id: 1, body, sender: { display_name: 'Ava' } }} conversation={{ kind: 'group' }} /></MessagingProvider>);
+}
+
+afterEach(cleanup);
+
+describe('message URL linkification', () => {
+  it('renders http(s) URLs as safe external links', () => {
+    renderMessage('Open https://example.com/path for details.');
+    const link = screen.getByRole('link', { name: 'https://example.com/path' });
+    expect(link.getAttribute('href')).toBe('https://example.com/path');
+    expect(link.getAttribute('target')).toBe('_blank');
+    expect(link.getAttribute('rel')).toBe('noopener noreferrer');
+  });
+
+  it('does not turn javascript URLs into links', () => {
+    renderMessage('javascript:alert(1)');
+    expect(screen.queryByRole('link')).toBeNull();
+    expect(screen.getByText('javascript:alert(1)')).toBeTruthy();
+  });
+
+  it('leaves surrounding prose outside the link and trims sentence punctuation', () => {
+    const { container } = renderMessage('See https://example.com/path, then continue reading.');
+    const link = screen.getByRole('link');
+    expect(link.textContent).toBe('https://example.com/path');
+    // MUI's `Link` itself carries a `MuiTypography-root` class (it is a
+    // Typography variant), so `.closest('.MuiTypography-root')` would match
+    // the link, not its containing paragraph -- `.closest('p')` skips past it
+    // to the actual message-body Typography (MUI's default root tag for the
+    // unvaried `body1` variant used here).
+    expect(link.closest('p').textContent).toBe('See https://example.com/path, then continue reading.');
+  });
+});

package/tests/messagingReadTicksTooltip.test.jsx

@@ -0,0 +1,36 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { act, cleanup, render, screen, waitFor } from '@testing-library/react';
+
+vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key, options) => options?.read != null ? `${key}:${options.read}/${options.total}` : key }) }));
+vi.mock('../src/notifications/realtime', () => ({ useRealtime: () => ({ subscribe: () => () => {}, onReconnect: () => () => {} }) }));
+
+import { MessagingProvider } from '../src/messaging/MessagingProvider';
+import { ReadTicks } from '../src/messaging/ReadTicks';
+
+function makeApi(status) {
+  return {
+    getReadStatus: vi.fn().mockResolvedValue(status),
+    getAttachment: vi.fn(), getAttachmentThumbnail: vi.fn(), addReaction: vi.fn(), removeReaction: vi.fn(),
+    votePoll: vi.fn(), closePoll: vi.fn(),
+  };
+}
+
+afterEach(cleanup);
+
+describe('message read ratio marker', () => {
+  it('gives the visible ratio an explanatory tooltip', async () => {
+    render(<MessagingProvider api={makeApi({ read_count: 2, recipient_count: 5 })} active={false}><ReadTicks messageId={7} conversation={{ kind: 'group' }} /></MessagingProvider>);
+    expect(await screen.findByTitle('MessagingReadTicks.READ_RATIO:2/5')).toBeTruthy();
+  });
+
+  it('hides a ratio when there are no recipients', async () => {
+    let resolveStatus;
+    const api = { ...makeApi({}), getReadStatus: vi.fn().mockReturnValue(new Promise((resolve) => { resolveStatus = resolve; })) };
+    const { container } = render(<MessagingProvider api={api} active={false}><ReadTicks messageId={7} conversation={{ kind: 'group' }} /></MessagingProvider>);
+    await waitFor(() => expect(api.getReadStatus).toHaveBeenCalled());
+    await act(async () => resolveStatus({ read_count: 0, recipient_count: 0 }));
+    expect(container.textContent).toBe('');
+  });
+});

package/tests/userScreenTranslations.test.jsx

@@ -0,0 +1,165 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { I18nextProvider } from 'react-i18next';
+import i18next from 'i18next';
+
+const authApi = vi.hoisted(() => ({
+  deleteUser: vi.fn(),
+  fetchUsersList: vi.fn(),
+  sendAdminInvite: vi.fn(),
+  updateUserRole: vi.fn(),
+}));
+
+vi.mock('../src/auth/authApi', () => authApi);
+
+import { authTranslations } from '../src/i18n/authTranslations';
+import { BulkInviteCsvTab } from '../src/components/BulkInviteCsvTab';
+import { UserInviteComponent } from '../src/components/UserInviteComponent';
+import { UserListComponent } from '../src/components/UserListComponent';
+
+const germanResources = Object.fromEntries(
+  Object.entries(authTranslations).map(([key, value]) => [key, value.de]),
+);
+const i18n = i18next.createInstance();
+i18n.init({
+  lng: 'de',
+  fallbackLng: 'de',
+  resources: { de: { translation: germanResources } },
+  keySeparator: false,
+  nsSeparator: false,
+  interpolation: { escapeValue: false },
+});
+
+const ENGLISH_DEFAULTS = [
+  'All Users',
+  'Search',
+  'Search users...',
+  'Rows per page:',
+  'Successful Login',
+  'Are you sure you want to delete this user?',
+  'Invite a new user',
+  'Bulk Invite via CSV',
+  'Upload a CSV file containing email addresses. Header "email" is supported.',
+  'Upload CSV',
+  'Send Invites',
+  'Invitation sent.',
+];
+
+function withGermanI18n(children) {
+  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;
+}
+
+function expectNoEnglishDefaults() {
+  const text = document.body.textContent;
+  for (const english of ENGLISH_DEFAULTS) {
+    expect(text).not.toContain(english);
+  }
+}
+
+describe('German user and invite screen translations', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    authApi.fetchUsersList.mockResolvedValue([
+      {
+        id: 1,
+        email: 'person@example.com',
+        first_name: 'Ada',
+        role: 'student',
+        is_new: true,
+        successful_login: true,
+      },
+    ]);
+    authApi.sendAdminInvite.mockResolvedValue({});
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders the empty-list and CSV-error strings in German too', async () => {
+    authApi.fetchUsersList.mockResolvedValue([]);
+    render(withGermanI18n(<UserListComponent currentUser={{ id: 99, is_superuser: true, role: 'admin' }} />));
+    await waitFor(() => expect(screen.getByText('Keine Benutzer gefunden.')).toBeTruthy());
+
+    cleanup();
+
+    render(withGermanI18n(<BulkInviteCsvTab inviteFn={vi.fn()} />));
+    const fileInput = document.querySelector('input[type="file"]');
+    fireEvent.change(fileInput, {
+      target: { files: [new File([''], 'empty.csv', { type: 'text/csv' })] },
+    });
+    await waitFor(() => expect(screen.getByText('Keine gültigen E-Mail-Adressen in der CSV-Datei gefunden.')).toBeTruthy());
+    expectNoEnglishDefaults();
+  });
+
+  it('renders UserListComponent in German, including pagination and action feedback', async () => {
+    const confirm = vi.spyOn(window, 'confirm').mockReturnValue(false);
+    const alert = vi.spyOn(window, 'alert').mockImplementation(() => {});
+
+    render(withGermanI18n(
+      <UserListComponent
+        currentUser={{ id: 99, is_superuser: true, role: 'admin' }}
+        extraRowActions={[{
+          key: 'failing-action',
+          label: 'Aktion',
+          onClick: () => Promise.reject({}),
+        }]}
+      />,
+    ));
+
+    await waitFor(() => expect(screen.getByText('Alle Benutzer')).toBeTruthy());
+    expect(screen.getByLabelText('Suche')).toBeTruthy();
+    expect(screen.getByPlaceholderText('Benutzer suchen...')).toBeTruthy();
+    for (const german of ['Neu', 'Erfolgreiche Anmeldung', 'Rolle', 'Aktionen', 'Zeilen pro Seite:', 'Löschen']) {
+      expect(screen.getByText(german)).toBeTruthy();
+    }
+
+    fireEvent.click(screen.getByRole('button', { name: 'Löschen' }));
+    expect(confirm).toHaveBeenCalledWith('Möchten Sie diesen Benutzer wirklich löschen?');
+
+    fireEvent.click(screen.getByRole('button', { name: 'Aktion' }));
+    await waitFor(() => expect(alert).toHaveBeenCalledWith('Vorgang fehlgeschlagen.'));
+    expectNoEnglishDefaults();
+  });
+
+  it('renders UserInviteComponent in German and translates the success message', async () => {
+    render(withGermanI18n(<UserInviteComponent />));
+
+    expect(screen.getByText('Neuen Benutzer einladen')).toBeTruthy();
+    fireEvent.change(screen.getByLabelText('E-Mail-Adresse'), {
+      target: { value: 'new@example.com' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'Einladen' }));
+
+    await waitFor(() => expect(screen.getByText('Einladung gesendet.')).toBeTruthy());
+    expectNoEnglishDefaults();
+  });
+
+  it('renders BulkInviteCsvTab in German with translated progress and table copy', async () => {
+    render(withGermanI18n(
+      <BulkInviteCsvTab inviteFn={vi.fn().mockResolvedValue({})} />,
+    ));
+
+    expect(screen.getByText('Masseneinladung per CSV')).toBeTruthy();
+    expect(screen.getByText('CSV-Datei mit E-Mail-Adressen hochladen. Header "email" wird unterstützt.')).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'CSV hochladen' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Einladungen senden' })).toBeTruthy();
+
+    const fileInput = document.querySelector('input[type="file"]');
+    fireEvent.change(fileInput, {
+      target: { files: [new File(['email\nperson@example.com'], 'users.csv', { type: 'text/csv' })] },
+    });
+    await waitFor(() => expect(screen.getByText('1 E-Mail-Adressen geladen')).toBeTruthy());
+
+    fireEvent.click(screen.getByRole('button', { name: 'Einladungen senden' }));
+    await waitFor(() => expect(screen.getByText('1 / 1 Einladungen gesendet.')).toBeTruthy());
+    for (const german of ['Einladung gesendet.', 'Erfolgreich', 'Status', 'Details']) {
+      expect(screen.getByText(german)).toBeTruthy();
+    }
+    expect(document.body.textContent).toContain('1 / 1 verarbeitet');
+    expect(document.body.textContent).toContain('1 erfolgreich');
+    expectNoEnglishDefaults();
+  });
+});

package/work-orders/AUTH-8.md

@@ -0,0 +1,184 @@
+# AUTH-8 — `extractErrorInfo`'s hardcoded `'GENERIC'` code must not out-rank the caller's own default
+
+---
+
+# A. Envelope — authored by the Expertenchat
+
+## Goal & expected outcome
+- Ziel: `extractErrorInfo` (`src/utils/auth-errors.js:2-27`) gibt für jeden Backend-Fehler der
+  Form `{"detail": "..."}` (Djangos generisches Fehlerformat — u.a. DRF `Throttled`, `Http404`,
+  `PermissionDenied`, jede unbehandelte `APIException`; exakt die Form des 429/409, das die
+  gesamte `KIRA-TRACK-3`/`AUTH-7`-Untersuchung ausgelöst hat) den hartcodierten Code `'GENERIC'`
+  zurück. `normaliseApiError` (Zeile 29-38) wählt dann `info.code || defaultCode` — da `'GENERIC'`
+  ein truthy String ist, GEWINNT er IMMER gegen den von JEDER der 39 bestehenden Aufrufstellen in
+  diesem Repo übergebenen, spezifischen `defaultCode` (z. B. `'Auth.LOGIN_FAILED'`,
+  `'Auth.PROFILE_UPDATE_FAILED'`, …). `'GENERIC'` ist an KEINER Stelle als i18n-Key registriert
+  (verifiziert: kein Treffer in `src/i18n/`, keine Erwähnung ausserhalb dieser einen Zeile) — die
+  UI zeigt also für JEDEN `{detail}`-förmigen Backend-Fehler den rohen String `"GENERIC"` statt
+  einer übersetzten Meldung, gleich welcher Aufrufer betroffen ist.
+- Expected outcome: ein `{detail}`-förmiger Fehler liefert `code === <übergebener defaultCode>`
+  (übersetzt, wie jeder andere fehlende/unbekannte Code auch) — `data.detail`s Text bleibt weiterhin
+  in `.message` erhalten (nützlich für Logs/Debugging), beeinflusst aber nicht mehr `.code`.
+
+## Scope + non-goals
+- In scope: ausschliesslich `src/utils/auth-errors.js` — die EINE Zeile, die `code: 'GENERIC'`
+  zurückgibt, wird zu `code: null` (dann gewinnt in `normaliseApiError` korrekt der übergebene
+  `defaultCode`, exakt wie bei jedem anderen Fehler ohne erkennbaren Code).
+- Explizite Non-Goals / nicht anfassen: die ANDEREN beiden Zweige von `extractErrorInfo`
+  (`data.errors[0].code`, `data.code`) liefern einen ECHTEN, vom Backend gesetzten Code — dieses
+  Verhalten ist korrekt und bleibt unverändert; nicht "verbessern" oder umbauen.
+  `normaliseApiError`s Signatur/Rückgabeform (`Error` mit `.code`/`.status`/`.raw`) bleibt gleich.
+  Keine neue i18n-Übersetzung für `'GENERIC'` selbst nötig — der Fix macht den String obsolet,
+  statt ihn übersetzbar zu machen. Keine Änderung an `LoginPage.jsx`/`SecurityComponent.jsx`/
+  anderen Konsumenten — die lesen bereits `err.code || '<eigener Default>'` und profitieren
+  automatisch, ohne selbst geändert zu werden.
+
+## Tier · precondition / gate
+- Tier: 3 — Shared-Core (`ui-core-micha`), betrifft laut Aufrufstellen-Scan ALLE 39 bestehenden
+  `normaliseApiError(...)`-Aufrufe in diesem Repo (jede Funktion in `src/auth/authApi.jsx` und
+  `src/utils/authService.js`). Kein Precondition/Gate.
+- **Wichtig fürs Versionsschema:** anders als `AUTH-7` (rein additiv) ändert dieser Fix
+  BEOBACHTBARES Verhalten für jeden Aufrufer, der aktuell (fehlerhaft) `.code === 'GENERIC'`
+  bekommt — das ist der Bug selbst, aber jede konsumierende App, die diese Version zieht, sieht ab
+  sofort eine ANDERE (korrekte) übersetzte Meldung an Stellen, wo bisher der rohe String
+  `"GENERIC"` erschien. Deshalb MINOR-Bump (nicht PATCH) vorgesehen, siehe Teil C.
+
+## Risks
+- Wird der Fix zu breit gefasst (z. B. `'GENERIC'` komplett aus dem Vokabular entfernt statt nur
+  die eine Codepfad-Priorität zu korrigieren), könnte das `.message`-Feld (der rohe `data.detail`-
+  Text) verlorengehen — das wird von KEINEM bekannten Aufrufer als Anzeige-Text verwendet (alle
+  lesen `.code` fürs Rendering, s.o.), aber sicherheitshalber in den Tests absichern.
+- Die beiden UNVERÄNDERTEN Zweige (`data.errors[].code`, `data.code`) müssen per Regressionstest
+  nachweislich unverändert bleiben.
+
+## Required tests to WRITE
+Neue Datei `tests/authErrors.test.js` (reiner Unit-Test, kein React/Testing-Library nötig — direkter
+Import von `normaliseApiError`/`extractErrorInfo` aus `../src/utils/auth-errors.js`):
+1. `{ response: { status: 429, data: { detail: 'Die Anfrage wurde gedrosselt...' } } }` mit
+   `normaliseApiError(err, 'Auth.LOGIN_FAILED')` aufgerufen → `.code === 'Auth.LOGIN_FAILED'` (NICHT
+   `'GENERIC'`), `.message === 'Die Anfrage wurde gedrosselt...'`, `.status === 429`.
+2. Ohne übergebenen `defaultCode` (Default-Parameter) mit demselben `{detail}`-Fehler → `.code ===
+   'Auth.GENERIC_ERROR'` (der Funktions-Default, nicht `'GENERIC'`).
+3. Regression: `{ response: { data: { errors: [{ code: 'enter_current_password', message: 'x' }] } } }`
+   → `.code === 'enter_current_password'` (übergebener `defaultCode` NICHT verwendet — echter
+   Backend-Code gewinnt weiterhin, unverändert).
+4. Regression: `{ response: { data: { code: 'invalid_credentials' } } }` → `.code ===
+   'invalid_credentials'` (unverändert).
+
+---
+
+# B. Implementation map — filled by the Orchestrator — ADDRESSED TO THE IMPLEMENTER
+
+## Context package
+
+**Named file to change:** `src/utils/auth-errors.js:21-24`:
+
+```js
+  // Fallback for generic Django errors
+  if (typeof data.detail === 'string') {
+    return { status, code: 'GENERIC', message: data.detail, raw: data };
+  }
+```
+
+Ändere die zurückgegebene `code`-Property von `'GENERIC'` zu `null`:
+
+```js
+  // Fallback for generic Django errors. `code: null` here (not a fake sentinel)
+  // lets normaliseApiError's `info.code || defaultCode` correctly prefer the
+  // caller's own specific default — `data.detail` is Django's generic
+  // human-readable message field, never a machine code, and no caller of
+  // normaliseApiError anywhere in this repo expects to see 'GENERIC' as a code
+  // (grepped: zero references outside this one line, zero i18n key for it).
+  if (typeof data.detail === 'string') {
+    return { status, code: null, message: data.detail, raw: data };
+  }
+```
+
+**Do NOT touch** the other two branches (lines 11-15 `data.errors[0]`, lines 17-19 `data.code`) or
+`normaliseApiError` itself (lines 29-38) — its `info.code || defaultCode` logic is already correct;
+the bug was entirely in what `extractErrorInfo` fed it.
+
+**Invariants / Pitfalls:**
+- `normaliseApiError`'s OWN default parameter is `defaultCode = 'Auth.GENERIC_ERROR'` (line 29) —
+  this is a DIFFERENT string (`'Auth.GENERIC_ERROR'`, already namespaced like every other code in
+  this file) from the bug's `'GENERIC'` sentinel. Do not confuse the two or "fix" the wrong one.
+- `data.detail` being falsy/absent already falls through correctly to the final `return { status,
+  code: null, message: null, raw: data }` (line 26) — that path is already correct and untouched.
+- No i18n file needs a new key — this fix does not introduce any new user-visible string; it makes
+  the ALREADY-TRANSLATED caller-specific keys (e.g. `Auth.LOGIN_FAILED`, confirmed translated in
+  de/fr/en/sw) reachable again.
+
+Directive: Arbeite ausschliesslich aus diesem Kontext-Paket; öffne nur `src/utils/auth-errors.js`
+und die neue Testdatei zur Verifikation. Kein breites Erkunden in `authApi.jsx`/`authService.js` —
+deren 39 Aufrufstellen sind bereits korrekt (sie übergeben schon einen sinnvollen `defaultCode`);
+sie müssen nicht einzeln angeschaut werden.
+
+## Target repo working directory (absolute)
+
+`C:\Users\Micha Bigler\Documents\webapps\ui-core-micha`
+
+## Preamble — REQUIRED, part of this file
+
+> The text above is the COMPLETE spec — the committed WO file's content, not a plan to refine;
+> there is no separate plan file. Read the nearest `AGENTS.md`, the relevant
+> `.codex/skills/<role>/SKILL.md`, and the app `MEMORY.md` ONLY for conventions. Stay in scope; do
+> not touch auth/permissions/deps/schema/CI unless the spec says so; do not update `MEMORY.md`.
+> **Do NOT edit `WORK_ORDERS.md`** — the register row and the review verdicts are the
+> orchestrator's alone. **Your tools are for editing source and test files and for running the
+> tests you wrote — nothing else.** Do NOT install dependencies, touch a lockfile, run a package
+> manager, or tidy up stray files; if something in the repo state blocks you, stop and report it as
+> `RESULT: BLOCKED <reason>` instead of fixing it. Do NOT `git add`/`commit`/`push` — leave every
+> change uncommitted in the working tree for the orchestrator's independent review. WRITE the
+> tests the `Required tests` section calls for AND **RUN the tests you just wrote** to confirm
+> they execute and pass — that is the ONLY test run you do (NOT the app's affected/full suite, NOT
+> any review). The orchestrator re-runs the authoritative set + does the independent review after
+> you finish — those are the gate; your own run does not count as the gate.
+>
+> Narrate continuously: a `PLAN: <step1> | <step2> | …` line up front, then a single-line
+> `PROGRESS: [<n>/<total>] <present-tense action>` before every relevant action (and `… done` on
+> completion), spaced so no gap exceeds ~2 min, stdout unbuffered, plus exactly one final
+> `RESULT: DONE|BLOCKED <reason>`.
+
+---
+
+# C. Orchestrator only — NOT ADDRESSED TO THE IMPLEMENTER
+
+> **If you are the implementer reading this work order as your own specification: STOP at this
+> line. Everything below describes what the Orchestrator does AFTER you finish. You do none of it
+> — no reviewers, no verification run, no register edit, no commit.** You ARE the invocation
+> described below; do NOT shell out to `codex exec`.
+
+## Execution directive
+
+Implement through `codex exec` in the background, invoked directly via Bash with both mandatory
+flags. Fallback to direct Claude implementation only on Codex quota/rate-limit/non-zero exit
+(flips authorship — independent reviewer becomes mandatory, already mandatory at Tier 3). Codex
+confirmed available today (two successful dispatches already this session, `KIRA-TRACK-3`/
+`AUTH-7`) — no fresh probe needed.
+
+## Review routing
+
+Tier 3, full set, all concurrent in one background batch: `reviewer` (all 4 lenses — `regression`
+matters most here given 39 call sites; `envelope` needs Part A inline), `ui_reviewer` (this is
+specifically an i18n/error-rendering correctness fix — narrow context: the diff + confirmation that
+every `defaultCode` used across `authApi.jsx`/`authService.js` is actually a translated key in all
+shipped locales), `sec_reviewer` (confirm `.message`/`.raw` still expose no more than before — this
+diff should REDUCE not increase what reaches the UI, since `'GENERIC'` is replaced by `null`).
+Orchestrator's own targeted pass runs alongside.
+
+## Verification
+
+Authoritative test run: `npx vitest run tests/authErrors.test.js tests/authErrorCodeRendering.test.jsx
+tests/authApiLogin.test.js tests/authApiRegistration.test.js` (affected area — everything touching
+`auth-errors.js` and its consumers). No prototype artifact, no rendered side-by-side (no markup
+changed).
+
+## Register + commit
+
+Bump `package.json`'s `version` — **MINOR**, not PATCH, per the Envelope's tier note (observable
+behavior change for existing `{detail}`-shaped-error callers, not purely additive) — from whatever
+`AUTH-7` landed at, to the next `3.x.0`. `CHANGELOG.md` entry MUST explicitly warn: existing
+consumers who upgrade will see a DIFFERENT (correct, translated) message wherever they previously
+saw the raw string `"GENERIC"` for a `{detail}`-shaped backend error — re-check that UI surface
+after bumping the pin, don't assume silent compatibility the way `AUTH-7`'s bump was. Commit on
+`main`. `WORK_ORDERS.md` row for `AUTH-8` → `done`, named review verdict, landing SHA.