feat(community): Phase 3.C — Identität (Avatar + Klarname-Toggle + Karma + Eulen-Profil)

Macht aus den Pseudonymen echte Charaktere ohne Klarnamen-Zwang.

Pixel-Identicon-Avatar (3.C.2):
- generateAvatarSvg(displayHash) — pure-function, deterministisch.
  5×5 left-mirrored Identicon mit HSL-Foreground/Background aus dem
  Hash. Inline-SVG, kein Storage, kein img-load-Flicker.
- <EulenAvatar> Component im Package, in ItemCard neben dem Pseudonym.

Klarname-Toggle (3.C.1):
- auth.users + community_show_real_name boolean (default off, opt-in).
- PATCH /api/v1/me/profile akzeptiert communityShowRealName.
- mana-analytics LEFT JOINs auth.users → bei opt-in liefert auth-
  required /public + /me/reacted Endpoints zusätzlich realName.
- Anonymous /api/v1/public/feedback/* zeigt realName NIE — auch nicht
  wenn opted-in. Public-Mirror bleibt für SEO + Privacy safe.
- Migration 008_community_identity.sql lokal + prod eingespielt.

Karma-System (3.C.3):
- auth.users + community_karma int. toggleReaction increment/decrement
  am Author-User (Self-Reactions zählen nicht — kein Self-Farming).
- KARMA_THRESHOLDS + tierFromKarma() im Package: Bronze (0-9) /
  Silver (10-49) / Gold (50-199) / Platin (200+).
- ItemCard zeigt Tier-Dot neben dem Pseudonym, Title-Tooltip mit
  Karma-Zahl. Floor-clamped at 0.

Eulen-Profil (3.C.4):
- GET /api/v1/public/feedback/eule/{hash} — alle public-Posts dieser
  Eule + aggregiertes Karma. SHA256-Format-Validation.
- /community/eule/[hash] Public-SSR-Route mit Avatar-Hero, Tier-Badge,
  Karma-Counter, Post-Liste. Author-Klick im ItemCard navigiert hin.
- publicFeedbackService.getEulenProfile() im Package.

PublicFeedbackItem erweitert um displayHash (public Pseudonym-ID,
SHA256 ist one-way → safe to expose) + karma + optional realName.

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

packages/feedback/src/EulenAvatar.svelte

@@ -0,0 +1,58 @@
+<!--
+  EulenAvatar — wraps the deterministic SVG avatar generator with sane
+  defaults for sizing and an optional name+tier-badge layout. Renders
+  inline SVG (no img-load, no flicker) — given the same display_hash
+  the same avatar appears everywhere.
+-->
+<script lang="ts">
+	import { generateAvatarSvg } from './avatar';
+
+	interface Props {
+		displayHash: string | null | undefined;
+		size?: number;
+		title?: string;
+	}
+
+	let { displayHash, size = 32, title }: Props = $props();
+
+	// Pre-compute once; same hash → same SVG, no need to re-derive on
+	// every reactive read.
+	let svg = $derived(displayHash ? generateAvatarSvg(displayHash) : null);
+</script>
+
+{#if svg}
+	<span
+		class="eulen-avatar"
+		style:width="{size}px"
+		style:height="{size}px"
+		{title}
+		aria-label={title ?? 'Avatar'}
+	>
+		{@html svg}
+	</span>
+{:else}
+	<span class="eulen-avatar fallback" style:width="{size}px" style:height="{size}px"></span>
+{/if}
+
+<style>
+	.eulen-avatar {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		border-radius: 25%;
+		overflow: hidden;
+		line-height: 0;
+		box-shadow: inset 0 0 0 1px hsl(0 0% 0% / 0.08);
+	}
+
+	.eulen-avatar :global(svg) {
+		width: 100%;
+		height: 100%;
+		display: block;
+	}
+
+	.eulen-avatar.fallback {
+		background: hsl(var(--color-muted) / 0.5);
+	}
+</style>

packages/feedback/src/api.ts

@@ -60,6 +60,13 @@ export interface PublicItemResponse {
 	replies: PublicFeedbackItem[];
 }
 
+export interface EulenProfileResponse {
+	displayHash: string;
+	displayName: string | null;
+	karma: number;
+	items: PublicFeedbackItem[];
+}
+
 export interface ReactionResponse {
 	reactions: Partial<Record<string, number>>;
 	score: number;

packages/feedback/src/avatar.ts

@@ -0,0 +1,97 @@
+/**
+ * Pixel-Identicon avatar generator — pure function, no storage.
+ *
+ * Derives a deterministic 5×5 left-mirrored pixel grid plus an HSL
+ * color from a `display_hash`, returns a self-contained SVG string.
+ * Same hash → same avatar, every time, on every device.
+ *
+ * Hash byte layout (we use the first 18 bytes / 36 hex chars):
+ *   bytes[0]      → hue        (0–360°)
+ *   bytes[1]      → saturation (50–90%)
+ *   bytes[2]      → lightness  (35–60%)
+ *   bytes[3..17]  → 15 cell on/off bits (3 cols × 5 rows, mirrored)
+ *
+ * The 5×5 grid is generated by computing the left 3 columns from the
+ * hash bits, then mirroring columns 0+1 onto 4+3 so the silhouette is
+ * always symmetric — the trick that makes Identicons feel like real
+ * faces/creatures even though they're random pixels.
+ */
+
+interface AvatarRendering {
+	cells: boolean[][]; // 5 rows × 5 cols
+	fg: string;
+	bg: string;
+}
+
+const GRID = 5;
+
+function hexToBytes(hex: string): number[] {
+	const cleaned = hex.replace(/[^0-9a-f]/gi, '');
+	const bytes: number[] = [];
+	for (let i = 0; i < cleaned.length; i += 2) {
+		bytes.push(parseInt(cleaned.slice(i, i + 2), 16) || 0);
+	}
+	return bytes;
+}
+
+function rendering(displayHash: string): AvatarRendering {
+	const bytes = hexToBytes(displayHash);
+	if (bytes.length < 18) {
+		// Pad short hashes — shouldn't happen with SHA256 (32 bytes), but
+		// defensive so the function never throws on a malformed input.
+		while (bytes.length < 18) bytes.push(0);
+	}
+
+	const hue = (bytes[0] / 255) * 360;
+	const sat = 50 + (bytes[1] / 255) * 40;
+	const light = 35 + (bytes[2] / 255) * 25;
+	const fg = `hsl(${hue.toFixed(0)}, ${sat.toFixed(0)}%, ${light.toFixed(0)}%)`;
+	const bg = `hsl(${hue.toFixed(0)}, ${sat.toFixed(0)}%, 92%)`;
+
+	const cells: boolean[][] = Array.from({ length: GRID }, () =>
+		Array.from({ length: GRID }, () => false)
+	);
+	let bitIdx = 0;
+	for (let row = 0; row < GRID; row++) {
+		for (let col = 0; col < 3; col++) {
+			const byteIdx = 3 + Math.floor(bitIdx / 8);
+			const bit = (bytes[byteIdx] >> (bitIdx % 8)) & 1;
+			const on = bit === 1;
+			cells[row][col] = on;
+			// Mirror cols 0+1 onto 4+3. Col 2 is the spine.
+			if (col < 2) cells[row][GRID - 1 - col] = on;
+			bitIdx++;
+		}
+	}
+	return { cells, fg, bg };
+}
+
+/**
+ * Render the avatar as an inline SVG string. Default 64×64 viewport.
+ * Width/height attributes are intentionally omitted so callers can
+ * size via CSS (`.avatar { width: 32px; height: 32px }` etc.).
+ */
+export function generateAvatarSvg(displayHash: string): string {
+	const { cells, fg, bg } = rendering(displayHash);
+	const rectSize = 100 / GRID;
+
+	let pixels = '';
+	for (let row = 0; row < GRID; row++) {
+		for (let col = 0; col < GRID; col++) {
+			if (!cells[row][col]) continue;
+			const x = (col * rectSize).toFixed(2);
+			const y = (row * rectSize).toFixed(2);
+			pixels += `<rect x="${x}" y="${y}" width="${rectSize.toFixed(2)}" height="${rectSize.toFixed(2)}"/>`;
+		}
+	}
+
+	return (
+		`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="img" aria-label="Avatar">` +
+		`<rect width="100" height="100" rx="14" fill="${bg}"/>` +
+		`<g fill="${fg}">${pixels}</g>` +
+		`</svg>`
+	);
+}
+
+/** Exported for tests. */
+export const __TEST__ = { rendering, hexToBytes, GRID };

packages/feedback/src/createPublicFeedbackService.ts

@@ -6,7 +6,12 @@
  * `createFeedbackService()` instead and pass a getAuthToken callback.
  */
 
-import type { PublicFeedListResponse, PublicItemResponse, FeedbackQueryParams } from './api';
+import type {
+	PublicFeedListResponse,
+	PublicItemResponse,
+	EulenProfileResponse,
+	FeedbackQueryParams,
+} from './api';
 import type { PublicFeedbackItem } from './feedback';
 import type { PublicFeedbackServiceConfig } from './types';
 
@@ -42,7 +47,11 @@ export function createPublicFeedbackService(config: PublicFeedbackServiceConfig)
 		return fetchPublic<PublicItemResponse>(`${publicEndpoint}/${id}`);
 	}
 
-	return { getFeed, getItem };
+	async function getEulenProfile(displayHash: string): Promise<EulenProfileResponse> {
+		return fetchPublic<EulenProfileResponse>(`${publicEndpoint}/eule/${displayHash}`);
+	}
+
+	return { getFeed, getItem, getEulenProfile };
 }
 
 export type PublicFeedbackService = ReturnType<typeof createPublicFeedbackService>;

packages/feedback/src/feedback.ts

@@ -54,6 +54,9 @@ export interface PublicFeedbackItem {
 	status: FeedbackStatus;
 	moduleContext: string | null;
 	parentId: string | null;
+	/** Pseudonym-ID — non-reversible SHA256(userId+secret). Stable
+	 *  across sessions, used for avatar generation and Eulen-Profil-URLs. */
+	displayHash: string;
 	displayName: string;
 	reactions: Partial<Record<string, number>>;
 	score: number;
@@ -62,6 +65,11 @@ export interface PublicFeedbackItem {
 	updatedAt: string;
 	/** Auth-only: which emojis the requesting user has reacted with. */
 	myReactions?: string[];
+	/** Auth-only + opt-in: post-author's real name when they enabled
+	 *  the Klarname-Toggle. Anonymous public-mirror NEVER includes this. */
+	realName?: string;
+	/** Author's community karma — public, drives the tier-badge. */
+	karma?: number;
 }
 
 /**
@@ -128,6 +136,34 @@ export const FEEDBACK_CATEGORY_LABELS: Record<FeedbackCategory, string> = {
 	other: 'Sonstiges',
 };
 
+/**
+ * Karma → Tier-Mapping. Bronze ist Default für jeden, Tier wird sichtbar
+ * neben dem Pseudonym in ItemCard.
+ */
+export type KarmaTier = 'bronze' | 'silver' | 'gold' | 'platinum';
+
+export const KARMA_THRESHOLDS = {
+	bronze: 0,
+	silver: 10,
+	gold: 50,
+	platinum: 200,
+} as const satisfies Record<KarmaTier, number>;
+
+export const KARMA_TIER_CONFIG: Record<KarmaTier, { label: string; emoji: string; color: string }> =
+	{
+		bronze: { label: 'Bronze', emoji: '🦉', color: '#a16207' },
+		silver: { label: 'Silver', emoji: '🦉', color: '#737373' },
+		gold: { label: 'Gold', emoji: '🦉', color: '#d97706' },
+		platinum: { label: 'Platin', emoji: '🦉', color: '#7c3aed' },
+	};
+
+export function tierFromKarma(karma: number): KarmaTier {
+	if (karma >= KARMA_THRESHOLDS.platinum) return 'platinum';
+	if (karma >= KARMA_THRESHOLDS.gold) return 'gold';
+	if (karma >= KARMA_THRESHOLDS.silver) return 'silver';
+	return 'bronze';
+}
+
 export const FEEDBACK_STATUS_CONFIG: Record<
 	FeedbackStatus,
 	{ label: string; color: string; icon: string }

packages/feedback/src/index.ts

@@ -15,12 +15,16 @@ export {
 	type Feedback,
 	type FeedbackNotification,
 	type NotificationKind,
+	type KarmaTier,
 	type PublicFeedbackItem,
 	type ReactionEmoji,
 	REACTION_EMOJIS,
 	REACTION_LABELS,
 	FEEDBACK_CATEGORY_LABELS,
 	FEEDBACK_STATUS_CONFIG,
+	KARMA_THRESHOLDS,
+	KARMA_TIER_CONFIG,
+	tierFromKarma,
 } from './feedback';
 
 export {
@@ -30,6 +34,7 @@ export {
 	type FeedbackListResponse,
 	type PublicFeedListResponse,
 	type PublicItemResponse,
+	type EulenProfileResponse,
 	type ReactionResponse,
 	type AdminPatchInput,
 	type ReactInput,
@@ -43,5 +48,9 @@ export {
 } from './createPublicFeedbackService';
 export type { FeedbackServiceConfig, PublicFeedbackServiceConfig } from './types';
 
+// Avatar
+export { generateAvatarSvg } from './avatar';
+
 // UI Components
 export { default as ReactionBar } from './ReactionBar.svelte';
+export { default as EulenAvatar } from './EulenAvatar.svelte';