feat(playground): integrate shared auth UI for consistent login experience

- Add PlaygroundLogo to shared-branding package
- Add playground to APP_BRANDING, APP_ICONS, and APP_URLS
- Replace custom login/register pages with shared-auth-ui components
- Update authStore with resendVerificationEmail and improved signUp
- Add Caddy reverse proxy entry for playground.mana.how

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

packages/shared-branding/src/app-icons.ts

@@ -69,6 +69,9 @@ const questionsSvg = `<svg width="1024" height="1024" viewBox="0 0 1024 1024" fi
 // Matrix icon (network/federated chat with purple gradient)
 const matrixSvg = `<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="130" y="130" width="764" height="764" rx="382" fill="url(#matrixGrad)"/><circle cx="512" cy="400" r="80" fill="white"/><circle cx="340" cy="580" r="60" fill="white" fill-opacity="0.8"/><circle cx="684" cy="580" r="60" fill="white" fill-opacity="0.8"/><circle cx="420" cy="720" r="50" fill="white" fill-opacity="0.6"/><circle cx="604" cy="720" r="50" fill="white" fill-opacity="0.6"/><path d="M512 480V640M512 640L420 700M512 640L604 700" stroke="white" stroke-width="16" stroke-linecap="round"/><path d="M450 440L370 540M574 440L654 540" stroke="white" stroke-width="16" stroke-linecap="round"/><path d="M340 640L400 700M684 640L624 700" stroke="white" stroke-width="12" stroke-linecap="round" stroke-opacity="0.6"/><defs><linearGradient id="matrixGrad" x1="130" y1="130" x2="894" y2="894" gradientUnits="userSpaceOnUse"><stop stop-color="#8b5cf6"/><stop offset="1" stop-color="#7c3aed"/></linearGradient></defs></svg>`;
 
+// Playground icon (code/terminal with cyan gradient)
+const playgroundSvg = `<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="130" y="130" width="764" height="764" rx="382" fill="url(#playgroundGrad)"/><path d="M380 340L260 512L380 684" stroke="white" stroke-width="48" stroke-linecap="round" stroke-linejoin="round"/><path d="M644 340L764 512L644 684" stroke="white" stroke-width="48" stroke-linecap="round" stroke-linejoin="round"/><path d="M560 280L464 744" stroke="white" stroke-width="40" stroke-linecap="round"/><defs><linearGradient id="playgroundGrad" x1="130" y1="130" x2="894" y2="894" gradientUnits="userSpaceOnUse"><stop stop-color="#06b6d4"/><stop offset="1" stop-color="#0891b2"/></linearGradient></defs></svg>`;
+
 /**
  * App icons as data URLs
  * Use these directly in <img src={APP_ICONS.memoro}> or CSS background-image
@@ -94,6 +97,7 @@ export const APP_ICONS = {
 	inventory: svgToDataUrl(inventorySvg),
 	questions: svgToDataUrl(questionsSvg),
 	matrix: svgToDataUrl(matrixSvg),
+	playground: svgToDataUrl(playgroundSvg),
 } as const;
 
 export type AppIconId = keyof typeof APP_ICONS;

packages/shared-branding/src/config.ts

@@ -259,6 +259,18 @@ export const APP_BRANDING: Record<AppId, AppBranding> = {
 		logoStroke: true,
 		logoStrokeWidth: 1.5,
 	},
+	playground: {
+		id: 'playground',
+		name: 'Playground',
+		tagline: 'LLM Playground',
+		primaryColor: '#06b6d4',
+		secondaryColor: '#22d3ee',
+		// Code/terminal icon for LLM playground
+		logoPath: 'M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5',
+		logoViewBox: '0 0 24 24',
+		logoStroke: true,
+		logoStrokeWidth: 1.5,
+	},
 };
 
 /**

packages/shared-branding/src/index.ts

@@ -34,6 +34,7 @@ export {
 	QuestionsLogo,
 	SkillTreeLogo,
 	PlantaLogo,
+	PlaygroundLogo,
 } from './logos';
 
 // Configuration

packages/shared-branding/src/logos/PlaygroundLogo.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import AppLogo from '../AppLogo.svelte';
+
+	interface Props {
+		size?: number;
+		color?: string;
+		class?: string;
+	}
+
+	let { size = 55, color, class: className = '' }: Props = $props();
+</script>
+
+<AppLogo app="playground" {size} {color} class={className} />

packages/shared-branding/src/logos/index.ts

@@ -21,3 +21,4 @@ export { default as ClockLogo } from './ClockLogo.svelte';
 export { default as QuestionsLogo } from './QuestionsLogo.svelte';
 export { default as SkillTreeLogo } from './SkillTreeLogo.svelte';
 export { default as PlantaLogo } from './PlantaLogo.svelte';
+export { default as PlaygroundLogo } from './PlaygroundLogo.svelte';

packages/shared-branding/src/mana-apps.ts

@@ -412,6 +412,7 @@ export const APP_URLS: Record<AppIconId, { dev: string; prod: string }> = {
 	inventory: { dev: 'http://localhost:5188', prod: 'https://inventory.manacore.app' },
 	questions: { dev: 'http://localhost:5111', prod: 'https://questions.manacore.app' },
 	matrix: { dev: 'http://localhost:5180', prod: 'https://matrix.mana.how' },
+	playground: { dev: 'http://localhost:5190', prod: 'https://playground.mana.how' },
 };
 
 /**

packages/shared-branding/src/types.ts

@@ -21,7 +21,8 @@ export type AppId =
 	| 'inventory'
 	| 'questions'
 	| 'skilltree'
-	| 'planta';
+	| 'planta'
+	| 'playground';
 
 /**
  * App branding configuration