Codeball's level of automation

A page describing the levels of automation in coding and what users can
expect from CODEBALL-1.

Author: krlvi

src/routes/what.svelte

@@ -0,0 +1,114 @@
+<article class="font-mono">
+	<h1 class="text-6xl font-black uppercase tracking-tight sm:text-8xl lg:text-9xl">
+		Levels of Automation
+	</h1>
+
+	<p class="text-xl text-gray-500 sm:max-w-3xl">
+		A guide to how much the AI overlords have taken over, per the official
+		<a href="https://en.wikipedia.org/wiki/Self-driving_car#SAE_classification" class="underline"
+			>SAE (J3016) classification</a
+		>. Codeball is currently a level 3 system.
+	</p>
+
+	<div class="my-8 flex flex-col gap-16 lg:flex-row">
+		<div class="flex flex-col gap-8">
+			<table class="text-md table-fixed border-2 border-dashed border-slate-500 text-gray-500">
+				<thead>
+					<tr>
+						<th class="border-2 border-dashed border-slate-500" />
+						<th class="border-2 border-dashed border-slate-500 text-2xl font-bold text-gray-700"
+							>CARS 🚙</th
+						>
+						<th class="border-2 border-dashed border-slate-500 text-2xl font-bold text-gray-700"
+							>CODE 💻</th
+						>
+					</tr>
+				</thead>
+				<tbody>
+					<tr class="h-24">
+						<td class="border-2 border-dashed border-slate-500 p-2">
+							<div class="text-2xl font-bold text-gray-700">L0</div>
+							<div class="text-gray-500">No automation</div>
+						</td>
+						<td class="border-2 border-dashed border-slate-500 p-2"
+							>You drive the car (like a savage). Crashes happen.</td
+						>
+						<td class="border-2 border-dashed border-slate-500 p-2"
+							>No assistance. Humans perform all code checks out of memory. Bugs happen.</td
+						>
+					</tr>
+					<tr class="h-24">
+						<td class="border-2 border-dashed border-slate-500 p-2">
+							<div class="text-2xl font-bold text-gray-700">L1</div>
+							<div class="text-gray-500">Some assistance</div>
+						</td>
+						<td class="border-2 border-dashed border-slate-500 p-2"
+							>Cruise control. Or lane assist. But not both, that's L2.</td
+						>
+						<td class="border-2 border-dashed border-slate-500 p-2"
+							>Rule-based tools that identify common mistakes. Eg: code linters and formatters.</td
+						>
+					</tr>
+					<tr class="h-24">
+						<td class="border-2 border-dashed border-slate-500 p-2">
+							<div class="text-2xl font-bold text-gray-700">L2</div>
+							<div class="text-gray-500">Partial automation</div>
+						</td>
+						<td class="border-2 border-dashed border-slate-500 p-2"
+							>Both cruse control and lane assist, with some smart breaking sprinkled in.</td
+						>
+						<td class="border-2 border-dashed border-slate-500 p-2"
+							>Tools aware of the immediate code context. Eg: Auto-complete, Refactoring
+							suggestions, static code analysis.</td
+						>
+					</tr>
+					<tr>
+						<td class="border-2 border-dashed border-slate-500 p-2">
+							<div class="text-2xl font-bold text-gray-700">L3</div>
+							<div class="text-gray-500">Conditional automation</div>
+						</td>
+						<td class="border-2 border-dashed border-slate-500 p-2"
+							>An AI drives the car when the conditions are right. You have to take over if the car
+							gets confused. Eg: Tesla</td
+						>
+						<td class="border-2 border-dashed border-slate-500 p-2">
+							The AI reviews and approves code contributions based on the repository context. You
+							have to review the tricky pull requests yourself.
+							<span class="font-extrabold text-gray-700">CODEBALL-1</span> is here.
+						</td>
+					</tr>
+					<tr class="h-24">
+						<td class="border-2 border-dashed border-slate-500 p-2">
+							<div class="text-2xl font-bold text-gray-700">L4</div>
+							<div class="text-gray-500">High automation</div>
+						</td>
+						<td class="border-2 border-dashed border-slate-500 p-2"
+							>You can Netflix and relax while the car drives you, but it doesn't go everywhere. Eg:
+							Waymo</td
+						>
+						<td class="border-2 border-dashed border-slate-500 p-2">
+							The AI informs you of the exact impact of your code based on the production context.
+							It tells you what's wrong with your code and how to fix it.
+						</td>
+					</tr>
+					<tr class="h-24">
+						<td class="border-2 border-dashed border-slate-500 p-2">
+							<div class="text-2xl font-bold text-gray-700">L5</div>
+							<div class="text-gray-500">Full automation</div>
+						</td>
+						<td class="border-2 border-dashed border-slate-500 p-2"
+							>Goes everywhere by itself. Basically, Skynet.</td
+						>
+						<td class="border-2 border-dashed border-slate-500 p-2">You are now unemployed.</td>
+					</tr>
+				</tbody>
+			</table>
+
+			<ul class="flex gap-2">
+				<li>[<a href="/">index</a>]</li>
+				<li>[<a href="/faq">faq</a>]</li>
+				<li>[<a href="https://github.com/sturdy-dev/codeball-action">github action</a>]</li>
+			</ul>
+		</div>
+	</div>
+</article>