feat(frontend): TypeScript-Monorepo mit Terminal-UI für Effigenix ERP

Monorepo-Setup (pnpm workspaces) mit vier shared Packages und einer TUI-App:

Shared Packages:
- @effigenix/types: TypeScript-DTOs (UserDTO, RoleDTO, AuthDTO, Enums)
- @effigenix/config: API-Konfiguration und Shared Constants
- @effigenix/validation: Zod-Schemas für Username, E-Mail und Passwort
- @effigenix/api-client: axios-Client mit JWT-Handling (proaktiver + reaktiver
  Token-Refresh), AuthInterceptor, ErrorInterceptor, Resources für auth/users/roles

TUI (apps/cli, Ink 5 / React):
- Authentication: Login/Logout, Session-Restore beim Start, JWT-Refresh
- User Management: Liste, Anlage (Zod-Inline-Validation), Detailansicht,
  Passwort ändern, Sperren/Entsperren mit ConfirmDialog
- Role Management: Liste, Detailansicht, Zuweisen/Entfernen per RoleSelectList (↑↓)
- UX: SuccessDisplay (Auto-Dismiss 3 s), ConfirmDialog (J/N),
  FormInput mit Inline-Fehlern, StatusBar mit API-URL
- Layout: Fullscreen-Modus (alternate screen buffer), Header mit eingeloggtem User
- Tests: vitest + ink-testing-library (15 Tests)

frontend/apps/cli/src/components/layout/Header.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { useAuth } from '../../state/auth-context.js';
+
+export function Header() {
+  const { user } = useAuth();
+
+  return (
+    <Box
+      borderStyle="double"
+      borderColor="cyan"
+      paddingX={2}
+      justifyContent="space-between"
+      width="100%"
+    >
+      <Text color="cyan" bold>
+        Effigenix ERP
+      </Text>
+      {user && (
+        <Text color="gray">
+          »{' '}<Text color="white">{user.username}</Text>
+        </Text>
+      )}
+    </Box>
+  );
+}

frontend/apps/cli/src/components/layout/MainLayout.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Box } from 'ink';
+import { Header } from './Header.js';
+import { StatusBar } from './StatusBar.js';
+import { useTerminalSize } from '../../hooks/useTerminalSize.js';
+
+// Header: double border (top + bottom) + 1 content line = 3 rows
+const HEADER_HEIGHT = 3;
+const STATUSBAR_HEIGHT = 1;
+
+interface MainLayoutProps {
+  children: React.ReactNode;
+  showHeader?: boolean;
+}
+
+export function MainLayout({ children, showHeader = true }: MainLayoutProps) {
+  const { columns, rows } = useTerminalSize();
+  const contentHeight = rows - (showHeader ? HEADER_HEIGHT : 0) - STATUSBAR_HEIGHT;
+
+  return (
+    <Box flexDirection="column" width={columns} height={rows}>
+      {showHeader && <Header />}
+      <Box
+        flexDirection="column"
+        paddingX={2}
+        paddingY={1}
+        height={contentHeight}
+        overflow="hidden"
+      >
+        {children}
+      </Box>
+      <StatusBar />
+    </Box>
+  );
+}

frontend/apps/cli/src/components/layout/StatusBar.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { DEFAULT_API_CONFIG } from '@effigenix/config';
+
+export function StatusBar() {
+  return (
+    <Box paddingX={2}>
+      <Text color="gray" dimColor>
+        API: {DEFAULT_API_CONFIG.baseUrl}
+      </Text>
+    </Box>
+  );
+}