nadir-webui/src/routes/docs/architecture/+page.svelte

<script lang="ts">
	/* eslint-disable svelte/no-at-html-tags */
	import ArrowRightIcon from '@lucide/svelte/icons/arrow-right';
	import CpuIcon from '@lucide/svelte/icons/cpu';
	import {
		Card,
		CardContent,
		CardDescription,
		CardHeader,
		CardTitle
	} from '$lib/components/ui/card';
	import { m } from '$lib/paraglide/messages';
</script>

<div class="space-y-10">
	<!-- Headline -->
	<div class="space-y-4">
		<h1 class="text-4xl font-extrabold tracking-tight md:text-5xl leading-none">
			{m.docs_arch_title()}
		</h1>
		<p class="text-muted-foreground text-lg leading-relaxed text-pretty max-w-2xl">
			{m.docs_arch_desc()}
		</p>
	</div>

	<!-- Technical Boundaries -->
	<div class="space-y-6">
		<div class="flex items-center gap-2.5 text-primary">
			<CpuIcon class="size-5" />
			<h2 class="text-xl font-bold tracking-tight">{m.docs_arch_bounds_title()}</h2>
		</div>
		<p class="text-muted-foreground text-sm leading-relaxed text-pretty max-w-2xl">
			{m.docs_arch_bounds_desc()}
		</p>

		<div class="grid grid-cols-1 md:grid-cols-[1fr_auto_1fr] items-center gap-6 pt-4">
			<!-- Web UI Card -->
			<Card class="border-border bg-muted/5">
				<CardHeader class="pb-3">
					<CardTitle class="text-base font-bold">{m.docs_arch_card_webui_title()}</CardTitle>
					<CardDescription class="text-sm">{m.docs_arch_card_webui_desc()}</CardDescription>
				</CardHeader>
				<CardContent class="text-sm text-muted-foreground space-y-2">
					<ul class="list-disc pl-4 space-y-1">
						<li>{m.docs_arch_card_webui_item1()}</li>
						<li>{m.docs_arch_card_webui_item2()}</li>
						<li>{m.docs_arch_card_webui_item3()}</li>
					</ul>
				</CardContent>
			</Card>

			<!-- Connection arrow / details -->
			<div
				class="flex flex-row md:flex-col items-center justify-center gap-2 text-muted-foreground min-w-[120px]"
			>
				<div class="h-px w-full md:w-px md:h-12 bg-border/80"></div>
				<div
					class="flex flex-col items-center text-center px-3 py-1.5 bg-muted/40 border border-border/50 rounded-full font-mono text-[10px] tracking-wide shrink-0"
				>
					<span class="text-primary font-semibold">{m.docs_arch_card_flow_title()}</span>
					<span>{m.docs_arch_card_flow_desc()}</span>
				</div>
				<div class="hidden md:block">
					<ArrowRightIcon class="size-4 text-muted-foreground/60 animate-pulse" />
				</div>
				<div class="h-px w-full md:w-px md:h-12 bg-border/80"></div>
			</div>

			<!-- Agent Backend Card -->
			<Card class="border-border bg-muted/5">
				<CardHeader class="pb-3">
					<CardTitle class="text-base font-bold">{m.docs_arch_card_agent_title()}</CardTitle>
					<CardDescription class="text-sm">{m.docs_arch_card_agent_desc()}</CardDescription>
				</CardHeader>
				<CardContent class="text-sm text-muted-foreground space-y-2">
					<ul class="list-disc pl-4 space-y-1">
						<li>{m.docs_arch_card_agent_item1()}</li>
						<li>{m.docs_arch_card_agent_item2()}</li>
						<li>{m.docs_arch_card_agent_item3()}</li>
					</ul>
				</CardContent>
			</Card>
		</div>
	</div>

	<!-- The Self-Contained Go Daemon -->
	<div class="space-y-6 border-t border-border/60 pt-8">
		<h2 class="text-xl font-bold tracking-tight">{m.docs_arch_daemon_title()}</h2>
		<p class="text-muted-foreground text-sm leading-relaxed text-pretty max-w-2xl">
			{m.docs_arch_daemon_desc()}
		</p>
		<p class="text-muted-foreground text-sm leading-relaxed text-pretty max-w-2xl">
			{m.docs_arch_daemon_desc2()}
		</p>
		<ul class="list-disc pl-5 text-muted-foreground text-sm space-y-2 leading-relaxed">
			<li>{@html m.docs_arch_daemon_item1()}</li>
			<li>{@html m.docs_arch_daemon_item2()}</li>
			<li>{@html m.docs_arch_daemon_item3()}</li>
			<li>{@html m.docs_arch_daemon_item4()}</li>
		</ul>
	</div>

	<!-- PAM Service Stack -->
	<div class="space-y-6 border-t border-border/60 pt-8">
		<h2 class="text-xl font-bold tracking-tight">{m.docs_arch_pam_title()}</h2>
		<p class="text-muted-foreground text-sm leading-relaxed text-pretty max-w-2xl">
			{@html m.docs_arch_pam_desc()}
		</p>
		<pre
			class="overflow-x-auto bg-muted border border-border/60 rounded-xl p-4 text-sm font-mono text-muted-foreground">
#%PAM-1.0
auth     required   pam_unix.so
account  required   pam_unix.so
		</pre>
		<p class="text-muted-foreground text-sm leading-relaxed text-pretty max-w-2xl">
			{@html m.docs_arch_pam_desc2()}
		</p>
	</div>

	<!-- Minisign Signature Verification -->
	<div class="space-y-6 border-t border-border/60 pt-8">
		<h2 class="text-xl font-bold tracking-tight">{m.docs_arch_minisign_title()}</h2>
		<p class="text-muted-foreground text-sm leading-relaxed text-pretty max-w-2xl">
			{m.docs_arch_minisign_desc()}
		</p>
		<ol class="list-decimal pl-5 text-muted-foreground text-sm space-y-2 leading-relaxed">
			<li>{@html m.docs_arch_minisign_item1()}</li>
			<li>{@html m.docs_arch_minisign_item2()}</li>
			<li>{@html m.docs_arch_minisign_item3()}</li>
			<li>{@html m.docs_arch_minisign_item4()}</li>
		</ol>
	</div>
</div>