diff --git a/.changeset/empty-first-post-transition.md b/.changeset/empty-first-post-transition.md
new file mode 100644
index 0000000..1d4499e
--- /dev/null
+++ b/.changeset/empty-first-post-transition.md
@@ -0,0 +1,5 @@
+---
+"sideshow": patch
+---
+
+Keep first-run onboarding visible until the first post arrives and poll as a fallback while waiting.
diff --git a/.changeset/recent-posts-home.md b/.changeset/recent-posts-home.md
new file mode 100644
index 0000000..715934c
--- /dev/null
+++ b/.changeset/recent-posts-home.md
@@ -0,0 +1,5 @@
+---
+"sideshow": minor
+---
+
+Add a recent posts Home view for multi-session workspaces.
diff --git a/e2e/viewer.spec.ts b/e2e/viewer.spec.ts
index c0c236b..365ac2e 100644
--- a/e2e/viewer.spec.ts
+++ b/e2e/viewer.spec.ts
@@ -66,6 +66,32 @@ test("snippet published over HTTP appears live via SSE, no reload", async ({ pag
   await expect(page.locator(".sess-title")).toContainText("e2e session");
 });
 
+test("empty onboarding polls into Home when the first post arrives", async ({ page, server }) => {
+  await page.route("**/api/events", (route) => route.abort());
+  await page.goto(server.url);
+  await expect(page.locator("#onboard")).toBeVisible();
+
+  await publish(server.url, { html: "<p>first</p>", title: "First post", agent: "e2e" });
+
+  await expect(page.getByRole("heading", { name: "Home" })).toBeVisible({ timeout: 6_000 });
+  await expect(page.locator(".home-card-title")).toHaveText("First post");
+  await expect(page.locator("#onboard")).toBeHidden();
+});
+
+test("an empty session alone keeps first-run onboarding visible", async ({ page, server }) => {
+  await fetch(`${server.url}/api/sessions`, {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify({ agent: "idle", title: "Empty one" }),
+  });
+
+  await page.goto(server.url);
+
+  await expect(page.locator("#onboard")).toBeVisible();
+  await expect(page.getByRole("heading", { name: "Connect your first agent" })).toBeVisible();
+  await expect(page.locator(".sess.sel")).toHaveCount(0);
+});
+
 test("a surface kind this viewer doesn't know shows a refresh hint, not a broken diff", async ({
   page,
   server,
@@ -100,6 +126,33 @@ test("a surface kind this viewer doesn't know shows a refresh hint, not a broken
   await expect(card.locator(".diff-error")).toHaveCount(0);
 });
 
+test("the workspace root shows a recent posts home page", async ({ page, server }) => {
+  const first = await publish(server.url, {
+    html: "<h2>first preview</h2>",
+    title: "First recent",
+    agent: "alpha",
+    sessionTitle: "Alpha work",
+  });
+  await publish(server.url, {
+    html: "<h2>second preview</h2>",
+    title: "Second recent",
+    agent: "beta",
+    sessionTitle: "Beta work",
+  });
+
+  await page.goto(server.url);
+
+  await expect(page.getByRole("heading", { name: "Home" })).toBeVisible();
+  await expect(page.locator(".home-card")).toHaveCount(2);
+  await expect(page.locator(".home-card-title")).toContainText(["Second recent", "First recent"]);
+  await expect(page.locator(".home-card").nth(1)).toContainText("Alpha work");
+  await expect(page.locator("#sessionView")).toHaveCount(0);
+
+  await page.locator(".home-card", { hasText: "First recent" }).click();
+  await expect(page).toHaveURL(new RegExp(`/session/${first.sessionId}/p/${first.id}$`));
+  await expect(page.locator(`.card[data-id="${first.id}"] .card-title`)).toHaveText("First recent");
+});
+
 test("opening a session shows a skeleton while posts load", async ({ page, server }) => {
   const first = await publish(server.url, {
     html: "<p>slow</p>",
@@ -111,7 +164,7 @@ test("opening a session shows a skeleton while posts load", async ({ page, serve
     await new Promise((resolve) => setTimeout(resolve, 500));
     await route.continue();
   });
-  await page.goto(server.url);
+  await page.goto(`${server.url}/session/${first.sessionId}`);
 
   await expect(page.getByRole("status", { name: "Loading posts" })).toBeVisible();
   await expect(page.locator(".sk-card")).toHaveCount(3);
@@ -358,10 +411,13 @@ test("Cmd+Option+Up/Down switches between sessions, wrapping at the ends", async
   await publish(server.url, { html: "<p>b</p>", title: "Second", agent: "two" });
 
   await page.goto(server.url);
-  // the newest session sits at the top of the list and is selected on load
+  await expect(page.getByRole("heading", { name: "Home" })).toBeVisible();
+
+  // With no selected session on Home, Down opens the first (newest) session.
+  await page.keyboard.press("Meta+Alt+ArrowDown");
   await expect(page.locator(".sess.sel .sess-title")).toContainText("two session");
 
-  // Down moves to the next (older) session down the list
+  // Down moves to the next (older) session down the list.
   await page.keyboard.press("Meta+Alt+ArrowDown");
   await expect(page.locator(".sess.sel .sess-title")).toContainText("one session");
 
diff --git a/viewer/src/App.tsx b/viewer/src/App.tsx
index bf27943..a23d5f3 100644
--- a/viewer/src/App.tsx
+++ b/viewer/src/App.tsx
@@ -14,6 +14,7 @@ import {
 import { host, isShadow, navHostEl, root, SLOTS } from "./host.ts";
 import { applyFrameHeight, Card, cardEls, frameForSource } from "./Card.tsx";
 import { ConnectInstructions } from "./Connect.tsx";
+import { HomeView } from "./Home.tsx";
 import { renderNotes } from "./notes.ts";
 import { SessionTimeline } from "./SessionTimeline.tsx";
 import { StreamSkeleton } from "./Skeleton.tsx";
@@ -69,6 +70,10 @@ function isConnectPath() {
   return rest === "/connect";
 }
 const [connectPath, setConnectPath] = createSignal(isConnectPath());
+const hasPosts = () => sessions.some((s) => s.surfaceCount > 0);
+const emptyWorkspace = () => initialLoaded() && !selected() && !hasPosts();
+const homePath = () =>
+  !streamMode() && !connectPath() && initialLoaded() && hasPosts() && !selected();
 
 // Stream-only layout: no sidebar, session list, or session chrome — just the
 // current session's stream. Driven by the host's `layout` (cloud embed) or the
@@ -298,12 +303,19 @@ export default function App() {
                 <Show
                   when={connectPath()}
                   fallback={
-                    <>
-                      <Show when={!streamMode()}>
-                        <Onboard />
-                      </Show>
-                      <SessionView />
-                    </>
+                    <Show
+                      when={homePath()}
+                      fallback={
+                        <>
+                          <Show when={!streamMode()}>
+                            <Onboard />
+                          </Show>
+                          <SessionView />
+                        </>
+                      }
+                    >
+                      <HomeView />
+                    </Show>
                   }
                 >
                   <ConnectPage />
@@ -696,8 +708,16 @@ function SessionTitle(props: { current: SessionRow | undefined }) {
 }
 
 function Onboard() {
+  createEffect(() => {
+    if (!emptyWorkspace() || isReadonly() || connectPath()) return;
+    const poll = setInterval(() => {
+      if (!document.hidden) void refreshSessionsQuiet();
+    }, 1500);
+    onCleanup(() => clearInterval(poll));
+  });
+
   return (
-    <div id="onboard" hidden={!initialLoaded() || sessions.length > 0}>
+    <div id="onboard" hidden={!emptyWorkspace()}>
       {/* Host-overridable region (SLOTS.empty): an embedder projects its own
           first-run onboarding here. The fallback below is the self-hosted
           default — setup snippets that assume a local sideshow on port 8228,
@@ -709,7 +729,7 @@ function Onboard() {
           fallback={
             <>
               <h1>Nothing here yet</h1>
-              <p class="sub">This sideshow workspace does not have any sessions yet.</p>
+              <p class="sub">This sideshow workspace does not have any posts yet.</p>
             </>
           }
         >
diff --git a/viewer/src/Home.tsx b/viewer/src/Home.tsx
new file mode 100644
index 0000000..ae6a362
--- /dev/null
+++ b/viewer/src/Home.tsx
@@ -0,0 +1,137 @@
+import { createResource, For, Index, Show } from "solid-js";
+import { isSandboxedSurfaceKind, SURFACE_FRAME_CLASSES } from "../../server/types.ts";
+import { appPath, getRecentPosts, relTime, type RecentPostRow, type RecentSurface } from "./api.ts";
+import { activeTheme, resolvedMode } from "./theme.ts";
+import { select } from "./state.ts";
+import { StreamSkeleton } from "./Skeleton.tsx";
+
+function sessionTitle(post: RecentPostRow): string {
+  return post.sessionTitle || (post.agent ? `${post.agent} session` : "Untitled session");
+}
+
+function partSummary(post: RecentPostRow): string {
+  return post.partKinds.length === 0 ? "post" : post.partKinds.join(" · ");
+}
+
+function postHref(post: RecentPostRow): string {
+  return appPath(`/session/${encodeURIComponent(post.sessionId)}/p/${encodeURIComponent(post.id)}`);
+}
+
+function surfaceSrc(post: RecentPostRow, surface: RecentSurface): string {
+  return appPath(
+    `/s/${post.id}?part=${surface.index}&ver=${post.version}&cb=${post.version}&theme=${activeTheme()}&mode=${resolvedMode()}`,
+  );
+}
+
+function JsonPreview(props: { surface: RecentSurface }) {
+  const text = () =>
+    JSON.stringify(props.surface.kind === "json" ? props.surface.data : null, null, 2);
+  return <pre class="home-json-preview">{text()}</pre>;
+}
+
+function ImagePreview(props: {
+  post: RecentPostRow;
+  surface: Extract<RecentSurface, { kind: "image" }>;
+}) {
+  return (
+    <img
+      class="home-image-preview"
+      src={appPath(`/a/${encodeURIComponent(props.surface.assetId)}`)}
+      alt={props.surface.alt ?? props.post.title}
+      loading="lazy"
+    />
+  );
+}
+
+function NativePreview(props: { post: RecentPostRow; surface: RecentSurface }) {
+  const surface = () => props.surface;
+  return (
+    <Show
+      when={
+        surface().kind === "image" ? (surface() as Extract<RecentSurface, { kind: "image" }>) : null
+      }
+      fallback={
+        <Show
+          when={surface().kind === "json"}
+          fallback={<div class="home-data-preview">{surface().kind} surface</div>}
+        >
+          <JsonPreview surface={surface()} />
+        </Show>
+      }
+    >
+      {(image) => <ImagePreview post={props.post} surface={image()} />}
+    </Show>
+  );
+}
+
+function SurfacePreview(props: { post: RecentPostRow; surface: RecentSurface }) {
+  const surface = () => props.surface;
+  return (
+    <Show
+      when={isSandboxedSurfaceKind(surface().kind)}
+      fallback={<NativePreview post={props.post} surface={surface()} />}
+    >
+      <iframe
+        class={`home-preview-frame ${SURFACE_FRAME_CLASSES[surface().kind] ?? ""}`}
+        src={surfaceSrc(props.post, surface())}
+        title={`${props.post.title} preview`}
+        sandbox="allow-scripts"
+        loading="lazy"
+      />
+    </Show>
+  );
+}
+
+function HomeCard(props: { post: RecentPostRow }) {
+  const open = (event: MouseEvent) => {
+    if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0)
+      return;
+    event.preventDefault();
+    void select(props.post.sessionId, { initialPostId: props.post.id });
+  };
+  return (
+    <a class="home-card" href={postHref(props.post)} onClick={open}>
+      <div class="home-card-head">
+        <span class="home-card-title">{props.post.title}</span>
+        <span class="home-card-meta">{relTime(props.post.updatedAt)}</span>
+      </div>
+      <div class="home-card-sub">
+        {sessionTitle(props.post)} · {partSummary(props.post)}
+      </div>
+      <div class="home-previews" aria-hidden="true">
+        <Index each={props.post.surfaces.slice(0, 2)}>
+          {(surface) => <SurfacePreview post={props.post} surface={surface()} />}
+        </Index>
+      </div>
+      <div class="home-card-foot">View full post →</div>
+    </a>
+  );
+}
+
+export function HomeView() {
+  const [recent] = createResource(() => getRecentPosts(30));
+  const posts = () => recent() ?? [];
+  return (
+    <section class="home-page" aria-label="Home">
+      <header class="home-head">
+        <h1>Home</h1>
+        <p>Recent posts across your sideshow sessions.</p>
+      </header>
+      <Show when={!recent.loading} fallback={<StreamSkeleton />}>
+        <Show
+          when={posts().length > 0}
+          fallback={
+            <div class="home-empty">
+              <h2>No posts yet</h2>
+              <p>Open a session from the sidebar, or connect an agent to start publishing.</p>
+            </div>
+          }
+        >
+          <div class="home-feed">
+            <For each={posts()}>{(post) => <HomeCard post={post} />}</For>
+          </div>
+        </Show>
+      </Show>
+    </section>
+  );
+}
diff --git a/viewer/src/api.ts b/viewer/src/api.ts
index 5d4268a..2936418 100644
--- a/viewer/src/api.ts
+++ b/viewer/src/api.ts
@@ -54,6 +54,22 @@ export interface VersionInfo {
   notes?: string | null;
 }
 
+export type RecentSurface = Surface & { index: number; truncated?: boolean };
+
+export interface RecentPostRow {
+  id: string;
+  sessionId: string;
+  sessionTitle: string | null;
+  agent: string | null;
+  title: string;
+  createdAt: string;
+  updatedAt: string;
+  version: number;
+  surfaces: RecentSurface[];
+  parts: RecentSurface[];
+  partKinds: string[];
+}
+
 declare global {
   interface Window {
     // __SIDESHOW_BASE_PATH__ lives in host.ts (the default host reads it).
@@ -126,6 +142,10 @@ export async function api<T = unknown>(path: string, init?: RequestInit): Promis
   return res.json() as Promise<T>;
 }
 
+export function getRecentPosts(limit = 30): Promise<RecentPostRow[]> {
+  return api<RecentPostRow[]>(`/api/posts/recent?limit=${limit}`);
+}
+
 export const sessionLabel = (s: Session) => s.title || s.agent + " session";
 
 export function relTime(iso: string): string {
diff --git a/viewer/src/state.ts b/viewer/src/state.ts
index e2cf195..42bd952 100644
--- a/viewer/src/state.ts
+++ b/viewer/src/state.ts
@@ -191,6 +191,10 @@ function isConnectRoute(): boolean {
   return location.pathname === appPath("/connect");
 }
 
+function isSessionlessHomeRoute(route = host().router.get()): boolean {
+  return !route.sessionId && !route.surfaceId && !isConnectRoute();
+}
+
 export async function refreshSessions(targetPostId?: string | null) {
   if (isReadonly() && publicReadMode() === "session") {
     const route = host().router.get();
@@ -229,16 +233,20 @@ export async function refreshSessions(targetPostId?: string | null) {
   }
 
   if (!selected() && sessions.length > 0) {
-    // Check the route first, then localStorage, then fall back to first session.
-    // A host that owns a session-less landing (homeView) skips that fallback: it
-    // honors a deep-linked route session but otherwise stays session-less so the
-    // host's home shows with nothing selected (no auto-open, no highlight).
+    // Check the route first, then localStorage, then fall back to the first
+    // session with posts. Empty sessions alone keep the first-run onboarding up:
+    // the useful transition is from "connect an agent" to real output.
     const route = host().router.get();
+    const sessionsWithPosts = sessions.filter((s) => s.surfaceCount > 0);
     const lastId = localStorage.getItem(LAST_SESSION_KEY);
+    const validLastId = lastId && sessionsWithPosts.some((s) => s.id === lastId) ? lastId : null;
     const fallback =
-      host().homeView || isConnectRoute()
+      host().homeView ||
+      isConnectRoute() ||
+      sessionsWithPosts.length === 0 ||
+      (isSessionlessHomeRoute(route) && !validLastId && sessionsWithPosts.length > 1)
         ? null
-        : (lastId && sessions.some((s) => s.id === lastId) && lastId) || sessions[0].id;
+        : validLastId || sessionsWithPosts[0].id;
     const target =
       (route.sessionId && sessions.some((s) => s.id === route.sessionId) && route.sessionId) ||
       fallback;
@@ -349,11 +357,9 @@ export function applyRoute(route: Route) {
       fromPopState: true,
       initialPostId: route.surfaceId ?? undefined,
     });
-  } else if (!route.sessionId && host().homeView && selected()) {
-    // A host that owns a session-less landing: a route with no session IS that
-    // home view, so clear the selection — otherwise the previously-open session
-    // stays highlighted behind the host's home. (Self-hosted leaves homeView off
-    // and keeps ignoring a null route here; it deselects explicitly via goHome.)
+  } else if (!route.sessionId && (host().homeView || isSessionlessHomeRoute(route)) && selected()) {
+    // A session-less route is a home view, so clear the selection — otherwise the
+    // previously-open session stays highlighted behind the home screen.
     setSelectedInternal(null);
   }
 }
diff --git a/viewer/src/styles.css b/viewer/src/styles.css
index 1559419..2827b2b 100644
--- a/viewer/src/styles.css
+++ b/viewer/src/styles.css
@@ -596,6 +596,134 @@ main {
     animation: none;
   }
 }
+
+.home-page {
+  max-width: 880px;
+  margin: 0 auto;
+  padding: 34px 22px 70px;
+}
+.home-head {
+  margin-bottom: 20px;
+}
+.home-head h1 {
+  margin: 0 0 6px;
+  font-size: 28px;
+  letter-spacing: -0.03em;
+}
+.home-head p {
+  margin: 0;
+  color: var(--muted);
+}
+.home-feed {
+  display: grid;
+  gap: 16px;
+}
+.home-card {
+  display: block;
+  color: inherit;
+  text-decoration: none;
+  background: var(--surface);
+  border: 0.5px solid var(--border);
+  border-radius: 14px;
+  overflow: hidden;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease,
+    transform 0.15s ease;
+}
+.home-card:hover,
+.home-card:focus-visible {
+  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
+  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
+  transform: translateY(-1px);
+  outline: none;
+}
+.home-card-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 13px 16px 2px;
+}
+.home-card-title {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+}
+.home-card-meta,
+.home-card-sub,
+.home-card-foot {
+  color: var(--faint);
+  font-size: 12px;
+}
+.home-card-sub {
+  padding: 0 16px 12px;
+}
+.home-previews {
+  display: grid;
+  gap: 10px;
+  padding: 0 16px 14px;
+  max-height: 260px;
+  overflow: hidden;
+  position: relative;
+}
+.home-previews::after {
+  content: "";
+  position: absolute;
+  inset: auto 16px 14px;
+  height: 52px;
+  pointer-events: none;
+  background: linear-gradient(to bottom, transparent, var(--surface));
+}
+.home-preview-frame,
+.home-image-preview,
+.home-json-preview,
+.home-data-preview {
+  width: 100%;
+  min-height: 120px;
+  border: 0.5px solid var(--border);
+  border-radius: 10px;
+  background: var(--bg);
+}
+.home-preview-frame {
+  height: 210px;
+  pointer-events: none;
+}
+.home-image-preview {
+  display: block;
+  max-height: 210px;
+  object-fit: contain;
+}
+.home-json-preview,
+.home-data-preview {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 12px;
+  color: var(--muted);
+  font: 12px/1.5 var(--mono);
+  overflow: hidden;
+  white-space: pre-wrap;
+}
+.home-card-foot {
+  padding: 11px 16px 13px;
+  border-top: 0.5px solid var(--border);
+}
+.home-empty {
+  background: var(--surface);
+  border: 0.5px solid var(--border);
+  border-radius: 14px;
+  padding: 26px;
+  text-align: center;
+}
+.home-empty h2 {
+  margin: 0 0 6px;
+}
+.home-empty p {
+  margin: 0;
+  color: var(--muted);
+}
 .card-head {
   display: flex;
   align-items: center;