From b66acf27093acc756f18911cb03388fba0b3c305 Mon Sep 17 00:00:00 2001
From: Owais Jamil <desertthunder.dev@gmail.com>
Date: Tue, 9 Jun 2026 15:12:09 -0500
Subject: [PATCH] feat: getting started

---
 src/lib/components/AboutComputer.svelte |  10 +-
 src/lib/components/GnomeMenuBar.svelte  |  18 +-
 src/lib/components/SetupDialog.svelte   |   2 +
 src/lib/components/WelcomeScreen.svelte | 316 ++++++++++++++++++++++++
 src/lib/window-manager.svelte.ts        |   2 +-
 src/routes/+layout.svelte               |  86 +++++--
 src/routes/+page.svelte                 |   4 +-
 src/routes/browse/+page.svelte          |   5 +
 src/routes/docs/+page.svelte            | 142 +++++++++++
 src/routes/docs/[slug]/+page.svelte     |   3 +-
 src/routes/docs/getting-started.md      |  28 +++
 11 files changed, 575 insertions(+), 41 deletions(-)
 create mode 100644 src/lib/components/WelcomeScreen.svelte
 create mode 100644 src/routes/browse/+page.svelte
 create mode 100644 src/routes/docs/+page.svelte
 create mode 100644 src/routes/docs/getting-started.md

diff --git a/src/lib/components/AboutComputer.svelte b/src/lib/components/AboutComputer.svelte
index 7590195..42a799b 100644
--- a/src/lib/components/AboutComputer.svelte
+++ b/src/lib/components/AboutComputer.svelte
@@ -16,15 +16,15 @@
 		<dl>
 			<div>
 				<dt>Operating system</dt>
-				<dd>Intrepid Ibex Desktop 0.1</dd>
+				<dd>Svelte 5</dd>
 			</div>
 			<div>
 				<dt>Desktop environment</dt>
-				<dd>Classic GNOME-style shell</dd>
+				<dd>GNOME 2</dd>
 			</div>
 			<div>
 				<dt>Protocol</dt>
-				<dd>AT Protocol, public read-only mode</dd>
+				<dd>at://</dd>
 			</div>
 			<div>
 				<dt>Account</dt>
@@ -43,8 +43,8 @@
 
 	<p class="note">
 		View the project on
-		<a href="https://tangled.org/desertthunder.dev/ibex" target="_blank" rel="noreferrer">Tangled</a>.
-		Atmosphere logos courtesy of
+		<a href="https://tangled.org/desertthunder.dev/ibex" target="_blank" rel="noreferrer">Tangled</a>. Atmosphere logos
+		courtesy of
 		<a href="https://tangled.org/cozylittle.house/atmologos" target="_blank" rel="noreferrer">atmologos</a>.
 	</p>
 </section>
diff --git a/src/lib/components/GnomeMenuBar.svelte b/src/lib/components/GnomeMenuBar.svelte
index b35cf3f..be83a29 100644
--- a/src/lib/components/GnomeMenuBar.svelte
+++ b/src/lib/components/GnomeMenuBar.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import { accountSetup } from '$lib/atproto/setup.svelte';
 	import { repoBrowser } from '$lib/atproto/repo.svelte';
 	import { desktopSession } from '$lib/desktop-session.svelte';
@@ -9,11 +10,19 @@
 		windowManager.close('gedit');
 		repoBrowser.reset();
 		accountSetup.reset();
+		void goto('/browse');
+	}
+
+	function openCollection(collectionName: string) {
+		if (!accountSetup.identity) return;
+
+		void goto('/browse');
+		repoBrowser.selectCollection(accountSetup.identity, collectionName);
 	}
 </script>
 
 <nav class="panel-menus" aria-label="System menus">
-	<button class="applications-menu" type="button">
+	<button class="applications-menu" type="button" onclick={() => goto('/')}>
 		<img src="/icons/humanity/apps/system-file-manager.svg" alt="" width="20" height="20" />
 		<span>Applications</span>
 	</button>
@@ -26,8 +35,7 @@
 				{#each repoBrowser.collections.slice(0, 10) as collection (collection.name)}
 					<button
 						type="button"
-						onclick={() =>
-							accountSetup.identity && repoBrowser.selectCollection(accountSetup.identity, collection.name)}>
+						onclick={() => openCollection(collection.name)}>
 						<img src={collection.icon} alt="" width="16" height="16" />
 						<span>{collection.name}</span>
 					</button>
@@ -42,7 +50,7 @@
 		<summary>System</summary>
 		<div class="menu-popover system-popover">
 			{#if accountSetup.identity}
-				<p class="menu-heading">Signed in as @{accountSetup.identity.handle}</p>
+				<p class="menu-heading">Browsing @{accountSetup.identity.handle}</p>
 			{/if}
 			<button type="button" onclick={() => desktopSession.lock()}>
 				<img src="/icons/humanity/status/network-wireless-encrypted.svg" alt="" width="16" height="16" />
@@ -50,7 +58,7 @@
 			</button>
 			<button type="button" onclick={changeAccount}>
 				<img src="/icons/humanity/places/user-home.svg" alt="" width="16" height="16" />
-				<span>Change Account…</span>
+				<span>Change Repo…</span>
 			</button>
 		</div>
 	</details>
diff --git a/src/lib/components/SetupDialog.svelte b/src/lib/components/SetupDialog.svelte
index 8c3f01f..5374050 100644
--- a/src/lib/components/SetupDialog.svelte
+++ b/src/lib/components/SetupDialog.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import { resolveAccount } from '$lib/atproto/identity';
 	import type { AccountIdentity } from '$lib/atproto/types';
 	import { accountSetup, setupDefaults } from '$lib/atproto/setup.svelte';
@@ -28,6 +29,7 @@
 	function useAccount() {
 		if (resolvedIdentity) {
 			accountSetup.save(resolvedIdentity);
+			void goto('/browse');
 		}
 	}
 </script>
diff --git a/src/lib/components/WelcomeScreen.svelte b/src/lib/components/WelcomeScreen.svelte
new file mode 100644
index 0000000..f020303
--- /dev/null
+++ b/src/lib/components/WelcomeScreen.svelte
@@ -0,0 +1,316 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { accountSetup } from '$lib/atproto/setup.svelte';
+	import AboutComputer from '$lib/components/AboutComputer.svelte';
+
+	const quickLinks = [
+		{
+			label: 'Browse public repo',
+			description: 'Open Nautilus and inspect public ATProto collections.',
+			icon: '/icons/humanity/apps/system-file-manager.svg',
+			href: '/browse'
+		},
+		{
+			label: 'Getting started',
+			description: 'Read the short guide in Document Viewer.',
+			icon: '/icons/humanity/mimes/gnome-mime-application-pdf.svg',
+			href: '/docs/getting-started'
+		},
+		{
+			label: 'Project source',
+			description: 'Visit the Tangled repo in a new tab.',
+			icon: '/icons/humanity/apps/web-browser.svg',
+			href: 'https://tangled.org/desertthunder.dev/ibex',
+			external: true
+		}
+	];
+
+	function openLink(link: (typeof quickLinks)[number]) {
+		if (link.external) {
+			window.open(link.href, '_blank', 'noopener,noreferrer');
+			return;
+		}
+
+		void goto(link.href);
+	}
+</script>
+
+<section class="welcome-screen" aria-labelledby="welcome-title">
+	<div class="welcome-banner">
+		<div class="badge-stack" aria-hidden="true">
+			<img src="/icons/humanity/devices/computer.svg" alt="" width="72" height="72" />
+			<img src="/icons/humanity/apps/internet-feed-reader.svg" alt="" width="38" height="38" />
+		</div>
+		<div>
+			<p class="eyebrow">Browse the ATmosphere</p>
+			<h2 id="welcome-title">Welcome to Intrepid Ibex</h2>
+			<p>Browse public AT Protocol repositories like it's 2008.</p>
+		</div>
+	</div>
+
+	<div class="welcome-grid">
+		<section class="start-panel" aria-labelledby="start-title">
+			<div class="panel-titlebar">
+				<img src="/icons/humanity/mimes/text-x-generic.svg" alt="" width="18" height="18" />
+				<h3 id="start-title">What would you like to do?</h3>
+			</div>
+
+			<div class="repo-strip">
+				<span>Browsing public repo</span>
+				<strong>{accountSetup.identity ? `@${accountSetup.identity.handle}` : 'not configured'}</strong>
+			</div>
+
+			<div class="quick-links">
+				{#each quickLinks as link (link.label)}
+					<button type="button" class="quick-link" onclick={() => openLink(link)}>
+						<img src={link.icon} alt="" width="36" height="36" />
+						<span>
+							<strong>{link.label}</strong>
+							<small>{link.description}</small>
+						</span>
+					</button>
+				{/each}
+			</div>
+		</section>
+
+		<section class="notes-panel" aria-labelledby="notes-title">
+			<div class="panel-titlebar">
+				<img src="/icons/humanity/apps/accessories-text-editor.svg" alt="" width="18" height="18" />
+				<h3 id="notes-title">Getting started</h3>
+			</div>
+			<ol>
+				<li>Choose a public ATProto repo by handle.</li>
+				<li>Open Nautilus to browse collections and records.</li>
+				<li>Open records in gedit, then share stable DID-based URLs.</li>
+			</ol>
+			<p>
+				Direct links look like
+				<code>/records/:did/:collection/:rkey</code> and reopen the desktop around that record.
+			</p>
+		</section>
+	</div>
+
+	<div class="about-embed">
+		<AboutComputer />
+	</div>
+</section>
+
+<style>
+	.welcome-screen {
+		display: grid;
+		grid-template-rows: auto auto auto;
+		gap: var(--space-4);
+		height: 100%;
+		overflow: auto;
+		padding: var(--space-5);
+		color: #24170f;
+		background:
+			radial-gradient(circle at 12% 0%, rgb(233 84 32 / 0.16), transparent 15rem),
+			linear-gradient(135deg, #fff6e4 0%, #e2cba8 48%, #b08a5c 100%);
+	}
+
+	.welcome-banner,
+	.start-panel,
+	.notes-panel,
+	.about-embed {
+		border: 1px solid #8e6d43;
+		border-radius: var(--radius-3);
+		box-shadow:
+			0 1px 0 rgb(255 255 255 / 0.75) inset,
+			0 0.65rem 1.4rem rgb(72 42 18 / 0.18);
+	}
+
+	.welcome-banner {
+		display: grid;
+		grid-template-columns: 5.5rem minmax(0, 1fr);
+		gap: var(--space-4);
+		align-items: center;
+		padding: var(--space-5);
+		background:
+			linear-gradient(90deg, rgb(255 255 255 / 0.68), rgb(255 255 255 / 0.18)), linear-gradient(#fffaf0, #ead5b4);
+	}
+
+	.badge-stack {
+		position: relative;
+		display: grid;
+		place-items: center;
+		width: 5rem;
+		height: 5rem;
+		background: linear-gradient(#fdf2d5, #c7955d);
+		border: 1px solid #7b5632;
+		border-radius: 0.55rem;
+		box-shadow: var(--shadow-sunken);
+	}
+
+	.badge-stack img:first-child {
+		filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.25));
+	}
+
+	.badge-stack img:last-child {
+		position: absolute;
+		right: -0.45rem;
+		bottom: -0.35rem;
+		padding: 0.25rem;
+		background: #fff6df;
+		border: 1px solid #8e6d43;
+		border-radius: var(--radius-2);
+		box-shadow: var(--shadow-raised);
+	}
+
+	.eyebrow {
+		color: var(--orange-700);
+		font-size: var(--text-0);
+		font-weight: 700;
+		letter-spacing: 0.04em;
+		text-transform: uppercase;
+	}
+
+	h2 {
+		margin-top: var(--space-1);
+		font-size: clamp(1.6rem, 4vw, 2.5rem);
+		line-height: var(--leading-tight);
+	}
+
+	.welcome-banner p:last-child {
+		max-width: 48rem;
+		margin-top: var(--space-2);
+		color: var(--text-muted);
+		font-size: var(--text-2);
+	}
+
+	.welcome-grid {
+		display: grid;
+		grid-template-columns: minmax(18rem, 1.2fr) minmax(16rem, 0.8fr);
+		gap: var(--space-4);
+	}
+
+	.start-panel,
+	.notes-panel {
+		overflow: hidden;
+		background: #fff8ed;
+	}
+
+	.panel-titlebar {
+		display: flex;
+		align-items: center;
+		gap: var(--space-2);
+		min-height: 2rem;
+		padding: var(--space-2) var(--space-3);
+		color: white;
+		background: linear-gradient(#6e4a2e, #3f2617);
+		text-shadow: 0 1px 0 rgb(0 0 0 / 0.65);
+	}
+
+	.panel-titlebar h3 {
+		font-size: var(--text-1);
+	}
+
+	.repo-strip {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--space-3);
+		padding: var(--space-2) var(--space-3);
+		background: linear-gradient(#f5e4c7, #dcc19a);
+		border-bottom: 1px solid #b29165;
+		font-size: var(--text-1);
+	}
+
+	.repo-strip span {
+		color: var(--text-muted);
+		font-weight: 700;
+	}
+
+	.repo-strip strong {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.quick-links {
+		display: grid;
+		gap: var(--space-2);
+		padding: var(--space-3);
+	}
+
+	.quick-link {
+		display: grid;
+		grid-template-columns: 2.25rem minmax(0, 1fr);
+		gap: var(--space-3);
+		align-items: center;
+		width: 100%;
+		padding: var(--space-3);
+		text-align: left;
+		background: linear-gradient(#fffdf7, #ead7b8);
+		border: 1px solid #b29165;
+		border-radius: var(--radius-2);
+		box-shadow: var(--shadow-raised);
+		cursor: default;
+	}
+
+	.quick-link:hover {
+		background: linear-gradient(#fff8e8, #dfc294);
+		border-color: #835b32;
+	}
+
+	.quick-link:active {
+		box-shadow: var(--shadow-sunken);
+		transform: translateY(1px);
+	}
+
+	.quick-link span {
+		display: grid;
+		gap: 0.1rem;
+	}
+
+	.quick-link strong {
+		font-size: var(--text-2);
+	}
+
+	.quick-link small,
+	.notes-panel p,
+	.notes-panel li {
+		color: var(--text-muted);
+		font-size: var(--text-1);
+		line-height: var(--leading-roomy);
+	}
+
+	.notes-panel ol {
+		display: grid;
+		gap: var(--space-2);
+		padding: var(--space-4) var(--space-5) var(--space-2);
+		list-style: decimal;
+	}
+
+	.notes-panel p {
+		padding: 0 var(--space-4) var(--space-4);
+	}
+
+	.notes-panel code {
+		padding: 0.05rem 0.25rem;
+		font-family: var(--font-mono);
+		background: #ead7b8;
+		border: 1px solid #d2b991;
+		border-radius: var(--radius-1);
+	}
+
+	.about-embed {
+		overflow: visible;
+	}
+
+	.about-embed :global(.about-computer) {
+		height: auto;
+		min-height: 0;
+	}
+
+	@media (max-width: 820px) {
+		.welcome-screen {
+			padding: var(--space-3);
+		}
+
+		.welcome-banner,
+		.welcome-grid {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>
diff --git a/src/lib/window-manager.svelte.ts b/src/lib/window-manager.svelte.ts
index 7f90306..97ddcf5 100644
--- a/src/lib/window-manager.svelte.ts
+++ b/src/lib/window-manager.svelte.ts
@@ -41,7 +41,7 @@ class WindowManager {
 		},
 		{
 			id: 'document-viewer',
-			title: 'CHANGELOG.md - Document Viewer',
+			title: 'Getting Started - Document Viewer',
 			icon: '/icons/humanity/mimes/gnome-mime-application-pdf.svg',
 			isOpen: false,
 			isMinimized: false,
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e81de0e..8d55e39 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { dev } from '$app/environment';
+	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { repoBrowser } from '$lib/atproto/repo.svelte';
 	import { accountSetup } from '$lib/atproto/setup.svelte';
@@ -29,12 +30,20 @@
 	let cacheDisabled = $state(false);
 	let handledRecordRoute = $state<string | null>(null);
 
-	const windowTitle = $derived(
-		accountSetup.isConfigured ? 'AT Protocol Collections - Intrepid Ibex' : 'AT Protocol Account Setup'
-	);
-	const windowIcon = $derived(
-		accountSetup.isConfigured ? '/icons/humanity/apps/internet-feed-reader.svg' : '/icons/humanity/places/user-home.svg'
-	);
+	const routeRequiresSetup = $derived(page.route.id === '/browse' && !accountSetup.isConfigured);
+	const routeUsesNativeWindow = $derived(page.route.id === '/' || page.route.id?.startsWith('/docs'));
+	const windowTitle = $derived.by(() => {
+		if (routeRequiresSetup) return 'AT Protocol Account Setup';
+		if (page.route.id === '/') return 'Welcome to Intrepid Ibex';
+		if (page.route.id?.startsWith('/docs')) return 'Getting Started - Document Viewer';
+		return 'AT Protocol Collections - Intrepid Ibex';
+	});
+	const windowIcon = $derived.by(() => {
+		if (routeRequiresSetup) return '/icons/humanity/places/user-home.svg';
+		if (page.route.id === '/') return '/icons/humanity/devices/computer.svg';
+		if (page.route.id?.startsWith('/docs')) return '/icons/humanity/mimes/gnome-mime-application-pdf.svg';
+		return '/icons/humanity/apps/internet-feed-reader.svg';
+	});
 	const mainWindow = $derived(windowManager.getWindow('main'));
 	const aboutWindow = $derived(windowManager.getWindow('about-computer'));
 	const geditWindow = $derived(windowManager.getWindow('gedit'));
@@ -44,13 +53,20 @@
 		{
 			label: 'ibex Home',
 			icon: '/icons/humanity/places/user-home.svg',
-			selected: false,
-			onactivate: () => windowManager.restore('main')
+			selected: page.route.id === '/',
+			onactivate: () => {
+				windowManager.restore('main');
+				void goto('/');
+			}
 		},
 		{
 			label: 'Collections',
 			icon: '/icons/humanity/places/folder.svg',
-			onactivate: () => windowManager.restore('main')
+			selected: page.route.id === '/browse' || page.route.id?.startsWith('/records'),
+			onactivate: () => {
+				windowManager.restore('main');
+				void goto('/browse');
+			}
 		},
 		{
 			label: 'Computer',
@@ -64,8 +80,11 @@
 		{
 			label: 'Document Viewer',
 			icon: '/icons/humanity/mimes/gnome-mime-application-pdf.svg',
-			selected: documentViewerWindow?.isOpen && !documentViewerWindow.isMinimized,
-			onactivate: () => windowManager.open('document-viewer')
+			selected: page.route.id?.startsWith('/docs') || (documentViewerWindow?.isOpen && !documentViewerWindow.isMinimized),
+			onactivate: () => {
+				windowManager.restore('main');
+				void goto('/docs');
+			}
 		},
 		{
 			label: 'Trash',
@@ -216,20 +235,33 @@
 
 			{#if mainWindow?.isOpen && !mainWindow.isMinimized}
 				<div class="primary-window" class:maximized={mainWindow.isMaximized} style:z-index={mainWindow.zIndex}>
-					<AppWindow
-						windowId="main"
-						title={windowTitle}
-						icon={windowIcon}
-						maximized={mainWindow.isMaximized}
-						onfocus={() => windowManager.focus('main')}
-						onminimize={() => windowManager.minimize('main')}
-						onmaximize={() => windowManager.toggleMaximize('main')}>
-						{#if accountSetup.isConfigured}
+					{#if routeUsesNativeWindow}
+						<NativeWindow
+							windowId="main"
+							title={windowTitle}
+							icon={windowIcon}
+							maximized={mainWindow.isMaximized}
+							onfocus={() => windowManager.focus('main')}
+							onminimize={() => windowManager.minimize('main')}
+							onmaximize={() => windowManager.toggleMaximize('main')}>
 							{@render children()}
-						{:else}
-							<SetupDialog />
-						{/if}
-					</AppWindow>
+						</NativeWindow>
+					{:else}
+						<AppWindow
+							windowId="main"
+							title={windowTitle}
+							icon={windowIcon}
+							maximized={mainWindow.isMaximized}
+							onfocus={() => windowManager.focus('main')}
+							onminimize={() => windowManager.minimize('main')}
+							onmaximize={() => windowManager.toggleMaximize('main')}>
+							{#if routeRequiresSetup}
+								<SetupDialog />
+							{:else}
+								{@render children()}
+							{/if}
+						</AppWindow>
+					{/if}
 				</div>
 			{/if}
 
@@ -258,15 +290,15 @@
 					style:z-index={documentViewerWindow.zIndex}>
 					<AppWindow
 						windowId="document-viewer"
-						title="CHANGELOG.md - Document Viewer"
+						title="Getting Started - Document Viewer"
 						icon="/icons/humanity/mimes/gnome-mime-application-pdf.svg"
-						address="/docs/changelog"
+						address="/docs/getting-started"
 						maximized={documentViewerWindow.isMaximized}
 						onfocus={() => windowManager.focus('document-viewer')}
 						onminimize={() => windowManager.minimize('document-viewer')}
 						onmaximize={() => windowManager.toggleMaximize('document-viewer')}
 						onclose={() => windowManager.close('document-viewer')}>
-						<DocumentViewer slug="changelog" />
+						<DocumentViewer slug="getting-started" />
 					</AppWindow>
 				</div>
 			{/if}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 6090d40..dbc52e6 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import CollectionBrowser from '$lib/components/CollectionBrowser.svelte';
+	import WelcomeScreen from '$lib/components/WelcomeScreen.svelte';
 </script>
 
-<CollectionBrowser />
+<WelcomeScreen />
diff --git a/src/routes/browse/+page.svelte b/src/routes/browse/+page.svelte
new file mode 100644
index 0000000..6090d40
--- /dev/null
+++ b/src/routes/browse/+page.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import CollectionBrowser from '$lib/components/CollectionBrowser.svelte';
+</script>
+
+<CollectionBrowser />
diff --git a/src/routes/docs/+page.svelte b/src/routes/docs/+page.svelte
new file mode 100644
index 0000000..cb0e378
--- /dev/null
+++ b/src/routes/docs/+page.svelte
@@ -0,0 +1,142 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+
+	const documents = [
+		{
+			title: 'Getting Started',
+			slug: 'getting-started',
+			description: 'A short guide to browsing public ATProto repos and sharing records.',
+			icon: '/icons/humanity/mimes/gnome-mime-application-pdf.svg'
+		},
+		{
+			title: 'Changelog',
+			slug: 'changelog',
+			description: 'Release notes and recent project changes.',
+			icon: '/icons/humanity/mimes/text-x-generic.svg'
+		}
+	];
+</script>
+
+<svelte:head>
+	<title>Documents - Intrepid Ibex</title>
+</svelte:head>
+
+<section class="docs-index" aria-labelledby="docs-title">
+	<header class="index-header">
+		<img src="/icons/humanity/mimes/gnome-mime-application-pdf.svg" alt="" width="56" height="56" />
+		<div>
+			<p class="eyebrow">Document Viewer</p>
+			<h2 id="docs-title">Documents</h2>
+			<p>Open local project notes and help files.</p>
+		</div>
+	</header>
+
+	<div class="document-list" aria-label="Available documents">
+		{#each documents as document (document.slug)}
+			<button type="button" class="document-row" onclick={() => goto(`/docs/${document.slug}`)}>
+				<img src={document.icon} alt="" width="40" height="40" />
+				<span>
+					<strong>{document.title}</strong>
+					<small>{document.description}</small>
+				</span>
+			</button>
+		{/each}
+	</div>
+</section>
+
+<style>
+	.docs-index {
+		display: grid;
+		align-content: start;
+		gap: var(--space-4);
+		height: 100%;
+		min-height: 0;
+		overflow: auto;
+		padding: var(--space-5);
+		background:
+			radial-gradient(circle at 18% 0%, rgb(233 84 32 / 0.12), transparent 15rem), linear-gradient(#d8c2a0, #9b7a51);
+	}
+
+	.index-header,
+	.document-list {
+		width: min(48rem, 100%);
+		margin: 0 auto;
+		background: #fff8ed;
+		border: 1px solid #8e6d43;
+		border-radius: var(--radius-2);
+		box-shadow:
+			0 1px 0 rgb(255 255 255 / 0.8) inset,
+			0 1.25rem 2.5rem rgb(0 0 0 / 0.18);
+	}
+
+	.index-header {
+		display: grid;
+		grid-template-columns: 56px minmax(0, 1fr);
+		gap: var(--space-4);
+		align-items: center;
+		padding: var(--space-5);
+	}
+
+	.eyebrow {
+		color: var(--orange-700);
+		font-size: var(--text-0);
+		font-weight: 700;
+		letter-spacing: 0.04em;
+		text-transform: uppercase;
+	}
+
+	h2 {
+		margin-top: var(--space-1);
+		font-size: var(--text-6);
+		line-height: var(--leading-tight);
+	}
+
+	.index-header p:last-child {
+		margin-top: var(--space-2);
+		color: var(--text-muted);
+		font-size: var(--text-2);
+	}
+
+	.document-list {
+		display: grid;
+		gap: 1px;
+		overflow: hidden;
+		padding: var(--space-2);
+	}
+
+	.document-row {
+		display: grid;
+		grid-template-columns: 40px minmax(0, 1fr);
+		gap: var(--space-3);
+		align-items: center;
+		width: 100%;
+		padding: var(--space-3);
+		text-align: left;
+		border: 1px solid transparent;
+		border-radius: var(--radius-2);
+		cursor: default;
+	}
+
+	.document-row:hover {
+		color: white;
+		background: var(--selection);
+	}
+
+	.document-row span {
+		display: grid;
+		gap: 0.15rem;
+	}
+
+	.document-row strong {
+		font-size: var(--text-2);
+	}
+
+	.document-row small {
+		color: var(--text-muted);
+		font-size: var(--text-1);
+	}
+
+	.document-row:hover small {
+		color: rgb(255 255 255 / 0.82);
+	}
+</style>
diff --git a/src/routes/docs/[slug]/+page.svelte b/src/routes/docs/[slug]/+page.svelte
index bf80870..1bae52a 100644
--- a/src/routes/docs/[slug]/+page.svelte
+++ b/src/routes/docs/[slug]/+page.svelte
@@ -23,6 +23,7 @@
 
 <style>
 	.docs-route {
-		height: 100vh;
+		height: 100%;
+		min-height: 0;
 	}
 </style>
diff --git a/src/routes/docs/getting-started.md b/src/routes/docs/getting-started.md
new file mode 100644
index 0000000..28604d6
--- /dev/null
+++ b/src/routes/docs/getting-started.md
@@ -0,0 +1,28 @@
+# Getting Started
+
+Intrepid Ibex is a public AT Protocol browser dressed like an Ubuntu 8.10 desktop.
+It stores everything in your browser.
+
+## Browse a repo
+
+Start with a public handle such as `desertthunder.dev`. The setup dialog resolves the
+handle to a DID and finds the repo's public PDS when it is advertised.
+
+Open **Browse public repo** to view collections in Nautilus. Pick a collection to load
+records, then open any record in gedit for a formatted JSON view.
+
+## Share a record
+
+Record windows use stable DID-based URLs:
+
+```txt
+/records/:did/:collection/:rkey
+```
+
+Opening one of those links boots the desktop, selects the collection in Nautilus, and
+opens the record in gedit.
+
+## Local cache
+
+Records you fetch are cached in your browser with IndexedDB. Search works against that
+local cache, and cache failures should stay recoverable from the boot screen.
-- 
2.51.2