diff --git a/web/src/lib/components/timeline/RecentItem.stories.svelte b/web/src/lib/components/timeline/RecentItem.stories.svelte
new file mode 100644
index 00000000..6ada673a
--- /dev/null
+++ b/web/src/lib/components/timeline/RecentItem.stories.svelte
@@ -0,0 +1,54 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import RecentItem from "./RecentItem.svelte";
+	import type { RecentItemData } from "./types";
+
+	const visited = "2025-06-04T09:00:00Z";
+
+	const repo: RecentItemData = {
+		kind: "repo",
+		visited,
+		ownerHandle: "tangled.org",
+		ownerDid: "did:plc:3p7ejjxnufohsygt5vbyxb2i",
+		name: "core"
+	};
+
+	const { Story } = defineMeta({
+		title: "Timeline/RecentItem",
+		component: RecentItem,
+		tags: ["autodocs"],
+		args: { item: repo }
+	});
+
+	const issue = (open: boolean): RecentItemData => ({
+		kind: "issue",
+		visited,
+		ownerHandle: "tangled.org",
+		repoName: "core",
+		title: "Knot fails to announce itself after a cold restart",
+		issueId: 412,
+		open
+	});
+
+	const pull = (state: "open" | "merged" | "closed"): RecentItemData => ({
+		kind: "pull",
+		visited,
+		ownerHandle: "alice.tngl.sh",
+		repoName: "spindle",
+		title: "Add a microvm engine to the pipeline runner",
+		pullId: 77,
+		state
+	});
+</script>
+
+<Story name="Repo" />
+
+<Story name="IssueOpen" args={{ item: issue(true) }} />
+
+<Story name="IssueClosed" args={{ item: issue(false) }} />
+
+<Story name="PullOpen" args={{ item: pull("open") }} />
+
+<Story name="PullMerged" args={{ item: pull("merged") }} />
+
+<Story name="PullClosed" args={{ item: pull("closed") }} />
diff --git a/web/src/lib/components/timeline/RecentItem.svelte b/web/src/lib/components/timeline/RecentItem.svelte
new file mode 100644
index 00000000..4544dea2
--- /dev/null
+++ b/web/src/lib/components/timeline/RecentItem.svelte
@@ -0,0 +1,82 @@
+<script module lang="ts">
+	import type { RecentItemData } from "./types";
+
+	/** the unresolved app path a recent row points at */
+	export const recentPath = (item: RecentItemData): string => {
+		switch (item.kind) {
+			case "repo":
+				return `/${item.ownerHandle}/${item.name}`;
+			case "issue":
+				return `/${item.ownerHandle}/${item.repoName}/issues/${item.issueId}`;
+			case "pull":
+				return `/${item.ownerHandle}/${item.repoName}/pulls/${item.pullId}`;
+		}
+	};
+</script>
+
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import Ban from "$icon/ban";
+	import CircleDot from "$icon/circle-dot";
+	import GitMerge from "$icon/git-merge";
+	import GitPullRequest from "$icon/git-pull-request";
+	import GitPullRequestClosed from "$icon/git-pull-request-closed";
+	import Avatar from "$lib/components/ui/Avatar.svelte";
+	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
+
+	let { item }: { item: RecentItemData } = $props();
+
+	// issue and pull rows put a circled glyph where a repo row puts an avatar.
+	// merged uses the info colour the pull pills already use, not the appview's
+	// raw purple, which this design system has no token for.
+	const badge = $derived.by(() => {
+		switch (item.kind) {
+			case "issue":
+				return item.open
+					? { Icon: CircleDot, color: "text-foreground-success" }
+					: { Icon: Ban, color: "text-foreground-subtle" };
+			case "pull":
+				if (item.state === "open")
+					return { Icon: GitPullRequest, color: "text-foreground-success" };
+				if (item.state === "merged")
+					return { Icon: GitMerge, color: "text-foreground-info" };
+				return { Icon: GitPullRequestClosed, color: "text-foreground-muted" };
+			default:
+				return { Icon: CircleDot, color: "text-foreground-subtle" };
+		}
+	});
+</script>
+
+<a
+	href={resolve(recentPath(item) as "/")}
+	class="relative grid grid-cols-[1.75rem_1fr_auto] grid-rows-2 gap-x-3 overflow-hidden px-4 py-3 typography-paragraph-small no-underline hover:bg-background-subtle/50 hover:no-underline"
+>
+	{#if item.kind === "repo"}
+		<span class="relative z-10 col-start-1 row-span-2 row-start-1 self-center">
+			<Avatar did={item.ownerDid} handle={item.ownerHandle} size="large" class="size-7" />
+		</span>
+		<span
+			class="col-start-2 row-span-2 row-start-1 self-center truncate font-medium text-foreground-default"
+		>
+			{item.ownerHandle}/{item.name}
+		</span>
+		<TimeAgo
+			value={item.visited}
+			class="col-start-3 row-span-2 row-start-1 shrink-0 self-center text-foreground-subtle"
+		/>
+	{:else}
+		<span
+			class="relative z-10 col-start-1 row-span-2 row-start-1 flex size-7 shrink-0 items-center justify-center self-center rounded-full border border-border-default bg-background-default {badge.color}"
+		>
+			<badge.Icon class="size-3.5" aria-hidden="true" />
+		</span>
+		<span class="col-start-2 row-start-1 truncate text-foreground-default">{item.title}</span>
+		<span class="col-start-2 row-start-2 truncate text-foreground-subtle">
+			{item.ownerHandle}/{item.repoName}
+		</span>
+		<TimeAgo
+			value={item.visited}
+			class="col-start-3 row-start-1 shrink-0 self-center text-foreground-subtle"
+		/>
+	{/if}
+</a>
diff --git a/web/src/lib/components/timeline/RecentsPreview.stories.svelte b/web/src/lib/components/timeline/RecentsPreview.stories.svelte
new file mode 100644
index 00000000..b66f5cd0
--- /dev/null
+++ b/web/src/lib/components/timeline/RecentsPreview.stories.svelte
@@ -0,0 +1,53 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import RecentsPreview from "./RecentsPreview.svelte";
+	import type { RecentItemData } from "./types";
+
+	const items: RecentItemData[] = [
+		{
+			kind: "repo",
+			visited: "2025-06-04T09:00:00Z",
+			ownerHandle: "tangled.org",
+			ownerDid: "did:plc:3p7ejjxnufohsygt5vbyxb2i",
+			name: "core"
+		},
+		{
+			kind: "issue",
+			visited: "2025-06-03T18:20:00Z",
+			ownerHandle: "tangled.org",
+			repoName: "core",
+			title: "Knot fails to announce itself after a cold restart",
+			issueId: 412,
+			open: true
+		},
+		{
+			kind: "pull",
+			visited: "2025-06-02T12:00:00Z",
+			ownerHandle: "alice.tngl.sh",
+			repoName: "spindle",
+			title: "Add a microvm engine to the pipeline runner",
+			pullId: 77,
+			state: "merged"
+		},
+		{
+			kind: "issue",
+			visited: "2025-06-01T08:00:00Z",
+			ownerHandle: "alice.tngl.sh",
+			repoName: "spindle",
+			title: "Runner leaks a tap device per cancelled job",
+			issueId: 9,
+			open: false
+		}
+	];
+
+	const { Story } = defineMeta({
+		title: "Timeline/RecentsPreview",
+		component: RecentsPreview,
+		tags: ["autodocs"],
+		args: { items }
+	});
+</script>
+
+<Story name="Default" />
+
+<Story name="Empty" args={{ items: [] }} />
diff --git a/web/src/lib/components/timeline/RecentsPreview.svelte b/web/src/lib/components/timeline/RecentsPreview.svelte
new file mode 100644
index 00000000..21b2b598
--- /dev/null
+++ b/web/src/lib/components/timeline/RecentsPreview.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import History from "$icon/history";
+	import Route from "$icon/route";
+	import PreviewCard from "./PreviewCard.svelte";
+	import PreviewEmpty from "./PreviewEmpty.svelte";
+	import RecentItem, { recentPath } from "./RecentItem.svelte";
+	import type { RecentItemData } from "./types";
+
+	let { items = [] }: { items?: RecentItemData[] } = $props();
+</script>
+
+<PreviewCard title="Recents" icon={History}>
+	{#if items.length > 0}
+		<div class="relative flex flex-col rounded-b bg-background-default">
+			<!-- the thread the avatars and badges sit on, centred on the icon column -->
+			<div class="absolute inset-y-0 w-px bg-border-default" style="left: 1.875rem"></div>
+			{#each items as item (recentPath(item))}
+				<RecentItem {item} />
+			{/each}
+		</div>
+	{:else}
+		<PreviewEmpty icon={Route}>
+			<p class="text-foreground-subtle">No recent pages yet.</p>
+		</PreviewEmpty>
+	{/if}
+</PreviewCard>
diff --git a/web/src/lib/components/timeline/types.ts b/web/src/lib/components/timeline/types.ts
new file mode 100644
index 00000000..639461a6
--- /dev/null
+++ b/web/src/lib/components/timeline/types.ts
@@ -0,0 +1,33 @@
+// view models for the timeline rail, mirroring the appview's recents rows.
+
+import type { PullState } from "$lib/components/repo/pulls/PullStatePill.svelte";
+
+interface RecentBase {
+	/** when the viewer last opened the page */
+	visited: string;
+	ownerHandle: string;
+}
+
+export type RecentItemData =
+	| (RecentBase & { kind: "repo"; name: string; ownerDid?: string })
+	| (RecentBase & {
+			kind: "issue";
+			repoName: string;
+			title: string;
+			issueId: number;
+			open: boolean;
+	  })
+	| (RecentBase & {
+			kind: "pull";
+			repoName: string;
+			title: string;
+			pullId: number;
+			state: PullState;
+	  });
+
+export interface BlogPost {
+	slug: string;
+	title: string;
+	subtitle?: string;
+	date: string;
+}
diff --git a/web/src/routes/timeline/+page.svelte b/web/src/routes/timeline/+page.svelte
index 4600cb4a..b6c5dc36 100644
--- a/web/src/routes/timeline/+page.svelte
+++ b/web/src/routes/timeline/+page.svelte
@@ -4,6 +4,7 @@
 	import Button from "$lib/components/ui/Button.svelte";
 	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
 	import NotificationsPreview from "$lib/components/timeline/NotificationsPreview.svelte";
+	import RecentsPreview from "$lib/components/timeline/RecentsPreview.svelte";
 	import Timeline from "$lib/components/timeline/Timeline.svelte";
 	import TrendingRepos from "$lib/components/timeline/TrendingRepos.svelte";
 	import type { PageData } from "./$types";
@@ -23,6 +24,7 @@
 		class="hidden md:sticky md:top-0 md:flex md:h-screen md:w-full md:max-w-100 md:flex-col md:gap-4 md:overflow-y-auto md:p-4"
 	>
 		<NotificationsPreview signedIn={data.signedIn} />
+		<RecentsPreview />
 	</div>
 
 	<div class="order-2 md:order-0 md:col-start-2 md:row-start-1 md:mx-auto md:w-full md:max-w-150">