diff --git a/Justfile b/Justfile
index c81adb2381b..ebd8c29cec8 100644
--- a/Justfile
+++ b/Justfile
@@ -668,6 +668,41 @@ desktop-standalone *ARGS: _ensure-sidecar-stubs
     echo "Starting standalone desktop on Vite port ${BUZZ_VITE_PORT}; no relay services were started"
     pnpm exec tauri dev --config "$BUZZ_TAURI_CONFIG" {{ARGS}}
 
+# Launch a development-only onboarding workshop. The frontend uses React-only
+# state and fixed mock data; native setup stops before migrations, identity
+# persistence, keychain access, relay sync, or agent restore.
+onboarding-preview *ARGS: _ensure-sidecar-stubs
+    #!/usr/bin/env bash
+    set -euo pipefail
+    export PATH="{{justfile_directory()}}/bin:$PATH"
+    cd {{desktop_dir}}
+    [[ -d node_modules ]] || pnpm install
+    unset BUZZ_AUTH_TAG BUZZ_RESET_WEBVIEW_STATE BUZZ_SHARE_IDENTITY
+    export BUZZ_ONBOARDING_PREVIEW=1
+    export BUZZ_RELAY_URL="ws://127.0.0.1:9"
+    # Fixed public test fixture: build_app_state never generates an identity,
+    # while the preview UI never receives or exposes this value.
+    export BUZZ_PRIVATE_KEY="3dbaebadb5dfd777ff25149ee230d907a15a9e1294b40b830661e65bb42f6c03"
+    source ../scripts/instance-env.sh
+    export BUZZ_PREVIEW_VITE_PORT=$((20001 + (BUZZ_VITE_PORT % 40000)))
+    BUZZ_TAURI_CONFIG=$(node -e '
+      const config = JSON.parse(process.env.BUZZ_TAURI_CONFIG);
+      const url = new URL(config.build.devUrl);
+      url.port = process.env.BUZZ_PREVIEW_VITE_PORT;
+      url.searchParams.set("onboardingPreview", "1");
+      config.build.devUrl = url.toString();
+      config.build.beforeDevCommand = `exec ./node_modules/.bin/vite --port ${process.env.BUZZ_PREVIEW_VITE_PORT} --strictPort`;
+      config.identifier = `xyz.block.buzz.onboarding-preview.p${process.env.BUZZ_PREVIEW_VITE_PORT}`;
+      config.productName = "Buzz Onboarding Preview";
+      process.stdout.write(JSON.stringify(config));
+    ')
+    export BUZZ_TAURI_CONFIG
+    export BUZZ_DEV_KEYRING_SERVICE="buzz-desktop-onboarding-preview.${BUZZ_PREVIEW_VITE_PORT}"
+    INSTANCE_ID=$(node -e "console.log(JSON.parse(process.env.BUZZ_TAURI_CONFIG).identifier)")
+    trap '../scripts/cleanup-instance-agents.sh "$INSTANCE_ID" || true' EXIT
+    echo "Starting non-persistent onboarding preview on Vite port ${BUZZ_PREVIEW_VITE_PORT}; external relay access is disabled"
+    pnpm exec tauri dev --config "$BUZZ_TAURI_CONFIG" {{ARGS}}
+
 # Run the desktop app against the internal staging relay (installs deps + builds agent tools automatically)
 staging *ARGS: bootstrap _ensure-sidecar-stubs
     #!/usr/bin/env bash
diff --git a/desktop/src-tauri/src/app_state.rs b/desktop/src-tauri/src/app_state.rs
index 08028ddbe96..38d96b1dbec 100644
--- a/desktop/src-tauri/src/app_state.rs
+++ b/desktop/src-tauri/src/app_state.rs
@@ -176,18 +176,18 @@ pub fn build_media_fetch_client() -> reqwest::Result<reqwest::Client> {
 }
 
 pub fn build_app_state() -> AppState {
-    // Env var takes precedence (dev/CI). If absent, resolve_persisted_identity()
-    // in setup() will replace the ephemeral placeholder with a persisted key.
-    let (keys, identity_storage) = match identity_from_env() {
-        Some(keys) => {
-            eprintln!(
-                "buzz-desktop: configured identity pubkey {}",
-                keys.public_key().to_hex()
-            );
-            (keys, IdentityStorage::Environment)
-        }
-        None => (Keys::generate(), IdentityStorage::Ephemeral),
-    };
+    // Env var takes precedence; setup() otherwise resolves a persisted identity.
+    let (keys, identity_storage) =
+        match crate::onboarding_preview::require_fixed_identity(identity_from_env()) {
+            Some(keys) => {
+                eprintln!(
+                    "buzz-desktop: configured identity pubkey {}",
+                    keys.public_key().to_hex()
+                );
+                (keys, IdentityStorage::Environment)
+            }
+            None => (Keys::generate(), IdentityStorage::Ephemeral),
+        };
 
     AppState {
         keys: Mutex::new(keys),
diff --git a/desktop/src-tauri/src/lib.rs b/desktop/src-tauri/src/lib.rs
index fe2bba5024b..e8bff2ab110 100644
--- a/desktop/src-tauri/src/lib.rs
+++ b/desktop/src-tauri/src/lib.rs
@@ -34,6 +34,7 @@ mod native_websocket_batch;
 mod nostr_bind;
 pub mod nostr_convert;
 mod observed_unread;
+mod onboarding_preview;
 mod persona_catalog;
 mod prevent_sleep;
 mod ptt_shortcut;
@@ -159,6 +160,10 @@ pub fn run() {
                     // commit the startup surface before revealing it.
                     let window = webview.window();
 
+                    if onboarding_preview::reveal_window(&window) {
+                        return;
+                    }
+
                     #[cfg(target_os = "macos")]
                     {
                         set_initial_window_backing(&window);
@@ -236,6 +241,9 @@ pub fn run() {
         .manage(channel_head_cache::ChannelHeadCacheStore::default())
         .setup(move |app| {
             let app_handle = app.handle().clone();
+            if onboarding_preview::skip_native_setup() {
+                return Ok(());
+            }
             #[cfg(target_os = "macos")]
             {
                 tray_menu::init(&app_handle)?;
diff --git a/desktop/src-tauri/src/onboarding_preview.rs b/desktop/src-tauri/src/onboarding_preview.rs
new file mode 100644
index 00000000000..cee220027c6
--- /dev/null
+++ b/desktop/src-tauri/src/onboarding_preview.rs
@@ -0,0 +1,55 @@
+const ONBOARDING_PREVIEW_ENV: &str = "BUZZ_ONBOARDING_PREVIEW";
+
+fn enabled_for(debug_build: bool, value: Option<&str>) -> bool {
+    debug_build && value == Some("1")
+}
+
+/// Whether the development-only native onboarding workshop is active.
+pub(crate) fn enabled() -> bool {
+    enabled_for(
+        cfg!(debug_assertions),
+        std::env::var(ONBOARDING_PREVIEW_ENV).ok().as_deref(),
+    )
+}
+
+/// Fail closed before app state could generate a placeholder identity.
+pub(crate) fn require_fixed_identity<T>(identity: Option<T>) -> Option<T> {
+    assert!(
+        identity.is_some() || !enabled(),
+        "BUZZ_ONBOARDING_PREVIEW requires fixed mock identity data"
+    );
+    identity
+}
+
+/// Stop native setup before migrations, persistence, networking, or agents.
+pub(crate) fn skip_native_setup() -> bool {
+    if !enabled() {
+        return false;
+    }
+    eprintln!(
+        "buzz-desktop: onboarding preview safety mode; skipped migrations, identity persistence, relay sync, and agent restore"
+    );
+    true
+}
+
+/// Preview does not wait for the normal app's first-render event.
+pub(crate) fn reveal_window<R: tauri::Runtime>(window: &tauri::Window<R>) -> bool {
+    if !enabled() {
+        return false;
+    }
+    crate::initial_window::reveal_initial_window(window);
+    true
+}
+
+#[cfg(test)]
+mod tests {
+    use super::enabled_for;
+
+    #[test]
+    fn preview_is_debug_only_and_requires_exact_opt_in() {
+        assert!(enabled_for(true, Some("1")));
+        assert!(!enabled_for(true, Some("true")));
+        assert!(!enabled_for(true, None));
+        assert!(!enabled_for(false, Some("1")));
+    }
+}
diff --git a/desktop/src-tauri/tauri.conf.json b/desktop/src-tauri/tauri.conf.json
index 05dc5553397..b3d154171bb 100644
--- a/desktop/src-tauri/tauri.conf.json
+++ b/desktop/src-tauri/tauri.conf.json
@@ -17,8 +17,8 @@
     "windows": [
       {
         "title": "",
-        "width": 800,
-        "height": 600,
+        "width": 900,
+        "height": 650,
         "maximized": true,
         "visible": false,
         "transparent": false,
@@ -30,8 +30,8 @@
           "y": 25
         },
         "backgroundThrottling": "disabled",
-        "minWidth": 800,
-        "minHeight": 500
+        "minWidth": 900,
+        "minHeight": 650
       }
     ],
     "macOSPrivateApi": true,
diff --git a/desktop/src/features/agents/ui/AgentAvatarOnboardingTrigger.tsx b/desktop/src/features/agents/ui/AgentAvatarOnboardingTrigger.tsx
new file mode 100644
index 00000000000..38241c95329
--- /dev/null
+++ b/desktop/src/features/agents/ui/AgentAvatarOnboardingTrigger.tsx
@@ -0,0 +1,98 @@
+import { Plus } from "lucide-react";
+
+import { ProfileAvatar } from "@/features/profile/ui/ProfileAvatar";
+import type { EmojiAvatarDescriptor } from "@/features/profile/ui/ProfileAvatarEditor.utils";
+import { cn } from "@/shared/lib/cn";
+import { PopoverTrigger } from "@/shared/ui/popover";
+import { Spinner } from "@/shared/ui/spinner";
+
+export function AgentAvatarOnboardingTrigger({
+  assetLabel,
+  avatarUrl,
+  disabled,
+  emojiAvatarPreview,
+  hasAvatar,
+  isAnimatedPreviewActive,
+  isAvatarPending,
+  label,
+  onPreviewContainerChange,
+  squishKey,
+  testIdPrefix,
+}: {
+  assetLabel: string;
+  avatarUrl: string | null;
+  disabled: boolean;
+  emojiAvatarPreview: EmojiAvatarDescriptor | null;
+  hasAvatar: boolean;
+  isAnimatedPreviewActive: boolean;
+  isAvatarPending: boolean;
+  label: string;
+  onPreviewContainerChange: (container: HTMLDivElement | null) => void;
+  squishKey: number;
+  testIdPrefix: string;
+}) {
+  const actionLabel = hasAvatar ? `Change ${assetLabel}` : `Add ${assetLabel}`;
+
+  return (
+    <div className="group/avatar-trigger relative h-full w-full">
+      <div
+        className="pointer-events-none absolute inset-0 z-10 overflow-visible"
+        data-testid={`${testIdPrefix}-animated-preview-slot`}
+        ref={onPreviewContainerChange}
+      />
+      {isAnimatedPreviewActive ? null : isAvatarPending ? (
+        <div className="grid h-full w-full place-items-center rounded-full border-2 border-dashed border-border bg-background text-foreground shadow-xs">
+          <Spinner
+            aria-label={`Uploading ${assetLabel}`}
+            className="h-4 w-4 border-2"
+          />
+        </div>
+      ) : emojiAvatarPreview ? (
+        <div
+          aria-label={`${label} ${assetLabel}`}
+          className="flex h-full w-full items-center justify-center overflow-hidden rounded-full shadow-xs transition-[background-color] duration-150 ease-out motion-reduce:transition-none"
+          data-testid={`${testIdPrefix}-preview`}
+          role="img"
+          style={{ backgroundColor: emojiAvatarPreview.color }}
+        >
+          <span
+            className={cn(
+              "flex h-full w-full items-center justify-center text-6xl leading-none",
+              squishKey > 0 && "buzz-avatar-squish",
+            )}
+            key={squishKey}
+          >
+            {emojiAvatarPreview.emoji}
+          </span>
+        </div>
+      ) : hasAvatar ? (
+        <ProfileAvatar
+          avatarUrl={avatarUrl}
+          className="h-full w-full text-4xl"
+          label={label}
+          testId={`${testIdPrefix}-preview`}
+        />
+      ) : (
+        <div
+          className="flex h-full w-full items-center justify-center rounded-full border-2 border-dashed border-border bg-background text-foreground shadow-xs transition-[background-color,border-color,color] duration-150 ease-out group-hover/avatar-trigger:border-foreground/30 group-hover/avatar-trigger:bg-[#f5f5f5] motion-reduce:transition-none"
+          data-testid={`${testIdPrefix}-empty`}
+        >
+          <Plus aria-hidden="true" className="size-9" />
+        </div>
+      )}
+      <PopoverTrigger asChild>
+        <button
+          aria-label={actionLabel}
+          className={cn(
+            "absolute inset-0 z-20 rounded-full bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-default disabled:opacity-60",
+            isAnimatedPreviewActive && "pointer-events-none",
+          )}
+          data-testid={`${testIdPrefix}-open`}
+          disabled={disabled || isAvatarPending}
+          title={actionLabel}
+          type="button"
+        />
+      </PopoverTrigger>
+    </div>
+  );
+}
diff --git a/desktop/src/features/agents/ui/AgentAvatarPickerTabs.tsx b/desktop/src/features/agents/ui/AgentAvatarPickerTabs.tsx
new file mode 100644
index 00000000000..0f359c66475
--- /dev/null
+++ b/desktop/src/features/agents/ui/AgentAvatarPickerTabs.tsx
@@ -0,0 +1,386 @@
+import emojiData from "@emoji-mart/data";
+import Picker from "@emoji-mart/react";
+import { Link2, UploadCloud } from "lucide-react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import type * as React from "react";
+
+import { AvatarCustomColorPanel } from "@/features/profile/ui/AvatarCustomColorPanel";
+import { AnimatedAvatarCapture } from "@/features/profile/ui/AnimatedAvatarCapture";
+import type { AnimatedAvatarRecordingProcessor } from "@/features/profile/ui/AnimatedAvatarCapture.types";
+import {
+  AVATAR_COLORS,
+  AVATAR_COLOR_SWATCHES,
+  CUSTOM_AVATAR_COLOR_SWATCH,
+  EMOJI_MART_CATEGORIES,
+  type AvatarColorSwatch,
+  contrastColorForBackground,
+} from "@/features/profile/ui/ProfileAvatarEditor.utils";
+import { cn } from "@/shared/lib/cn";
+import { Button } from "@/shared/ui/button";
+import { Spinner } from "@/shared/ui/spinner";
+import {
+  AVATAR_APPLY_MOTION_TRANSITION,
+  type EmojiMartEmoji,
+} from "./AgentCreationPreview.utils";
+
+function RemoveAvatarButton({
+  actionButtonClassName,
+  assetLabel,
+  disabled,
+  onClick,
+}: {
+  actionButtonClassName?: string;
+  assetLabel: string;
+  disabled: boolean;
+  onClick: () => void;
+}) {
+  if (actionButtonClassName) {
+    return (
+      <Button
+        className={actionButtonClassName}
+        disabled={disabled}
+        onClick={onClick}
+        type="button"
+      >
+        Remove {assetLabel}
+      </Button>
+    );
+  }
+
+  return (
+    <button
+      className="flex min-h-8 w-full items-center justify-center rounded-lg text-xs text-destructive outline-hidden transition-colors duration-150 ease-out hover:bg-destructive/10 focus-visible:bg-destructive/10 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none"
+      disabled={disabled}
+      onClick={onClick}
+      type="button"
+    >
+      Remove {assetLabel}
+    </button>
+  );
+}
+
+export function AgentAvatarImageTab({
+  actionButtonClassName,
+  assetLabel,
+  avatarUrlDraft,
+  disabled,
+  hasAvatar,
+  isUploading,
+  onApplyUrl,
+  onAvatarUrlDraftChange,
+  onClearAvatar,
+  onOpenUploadPicker,
+  uploadErrorMessage,
+}: {
+  actionButtonClassName?: string;
+  assetLabel: string;
+  avatarUrlDraft: string;
+  disabled: boolean;
+  hasAvatar: boolean;
+  isUploading: boolean;
+  onApplyUrl: () => void;
+  onAvatarUrlDraftChange: (value: string) => void;
+  onClearAvatar?: () => void;
+  onOpenUploadPicker: () => void;
+  uploadErrorMessage: string | null;
+}) {
+  const shouldReduceMotion = useReducedMotion();
+  const applyButtonTransition = shouldReduceMotion
+    ? { duration: 0 }
+    : AVATAR_APPLY_MOTION_TRANSITION;
+
+  return (
+    <div className="grid gap-2.5">
+      <button
+        className="relative flex h-[80px] flex-col items-center justify-center gap-1.5 overflow-hidden rounded-lg border border-transparent bg-muted text-foreground transition-[background-color,border-color,box-shadow,color] duration-200 ease-out hover:bg-muted/80 disabled:opacity-60 motion-reduce:transition-none"
+        disabled={disabled || isUploading}
+        onClick={onOpenUploadPicker}
+        type="button"
+      >
+        {isUploading ? (
+          <Spinner
+            aria-hidden
+            className="h-5 w-5 border-2 text-muted-foreground"
+          />
+        ) : (
+          <UploadCloud className="h-5 w-5 text-muted-foreground" />
+        )}
+        <span className="text-xs font-medium text-muted-foreground">
+          {isUploading ? "Uploading..." : "Drop or browse"}
+        </span>
+      </button>
+
+      <div className="flex h-10 items-center gap-2.5 rounded-lg bg-muted px-3">
+        <Link2 className="h-3.5 w-3.5 shrink-0 text-muted-foreground/60" />
+        <input
+          autoCapitalize="none"
+          autoCorrect="off"
+          className="min-w-0 flex-1 bg-transparent text-xs font-medium text-foreground outline-none placeholder:text-muted-foreground/50"
+          disabled={disabled || isUploading}
+          onChange={(event) => onAvatarUrlDraftChange(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              event.preventDefault();
+              onApplyUrl();
+            }
+          }}
+          placeholder="Paste a URL"
+          spellCheck={false}
+          type="url"
+          value={avatarUrlDraft}
+        />
+        <AnimatePresence initial={false}>
+          {avatarUrlDraft.trim().length > 0 ? (
+            <motion.div
+              animate={{ opacity: 1, scale: 1, width: "auto" }}
+              className="overflow-hidden"
+              exit={{ opacity: 0, scale: 0.96, width: 0 }}
+              initial={{ opacity: 0, scale: 0.96, width: 0 }}
+              key="apply-url"
+              transition={applyButtonTransition}
+            >
+              <Button
+                className="h-6 px-2 text-2xs"
+                disabled={disabled || isUploading}
+                onClick={onApplyUrl}
+                size="xs"
+                type="button"
+              >
+                Apply
+              </Button>
+            </motion.div>
+          ) : null}
+        </AnimatePresence>
+      </div>
+
+      {uploadErrorMessage ? (
+        <p className="rounded-lg bg-destructive/10 px-3 py-2 text-xs font-medium text-destructive">
+          {uploadErrorMessage}
+        </p>
+      ) : null}
+
+      {hasAvatar && onClearAvatar ? (
+        <RemoveAvatarButton
+          actionButtonClassName={actionButtonClassName}
+          assetLabel={assetLabel}
+          disabled={disabled || isUploading}
+          onClick={onClearAvatar}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+export function AgentAvatarEmojiTab({
+  actionButtonClassName,
+  assetLabel,
+  colorDraft,
+  customHue,
+  customSaturation,
+  customValue,
+  disabled,
+  emojiMartThemeVars,
+  emojiPickerTheme = "auto",
+  emojiPickerContainerRef,
+  emojiSearchControlHeight,
+  hasAvatar,
+  isCustomColorPickerVisible,
+  onClearAvatar,
+  onColorSelect,
+  onCommitCustomColor,
+  onEmojiSelect,
+  onHueChange,
+  onSaturationValueChange,
+  selectedColor,
+  selectedEmoji,
+  showCategoryNavigation = true,
+  showSkinTonePicker = false,
+  testIdPrefix,
+}: {
+  actionButtonClassName?: string;
+  assetLabel: string;
+  colorDraft: string;
+  customHue: number;
+  customSaturation: number;
+  customValue: number;
+  disabled: boolean;
+  emojiMartThemeVars: React.CSSProperties;
+  emojiPickerTheme?: "auto" | "light";
+  emojiPickerContainerRef: React.RefObject<HTMLDivElement | null>;
+  emojiSearchControlHeight?: string;
+  hasAvatar: boolean;
+  isCustomColorPickerVisible: boolean;
+  onClearAvatar?: () => void;
+  onColorSelect: (swatch: AvatarColorSwatch) => void;
+  onCommitCustomColor: () => void;
+  onEmojiSelect: (emoji: EmojiMartEmoji, event?: MouseEvent) => void;
+  onHueChange: (value: number) => void;
+  onSaturationValueChange: (saturation: number, value: number) => void;
+  selectedColor: string;
+  selectedEmoji: string | null;
+  showCategoryNavigation?: boolean;
+  showSkinTonePicker?: boolean;
+  testIdPrefix: string;
+}) {
+  return (
+    <div className="relative grid content-start gap-3">
+      <div
+        className="buzz-emoji-mart relative z-0 h-[280px] overflow-hidden rounded-lg bg-muted"
+        ref={emojiPickerContainerRef}
+        style={
+          {
+            ...emojiMartThemeVars,
+            ...(emojiSearchControlHeight
+              ? {
+                  "--buzz-emoji-picker-search-control-height":
+                    emojiSearchControlHeight,
+                }
+              : null),
+          } as React.CSSProperties
+        }
+      >
+        <Picker
+          autoFocus
+          categories={EMOJI_MART_CATEGORIES}
+          data={emojiData}
+          dynamicWidth
+          emojiButtonRadius="999px"
+          emojiButtonSize={44}
+          emojiSize={32}
+          icons="outline"
+          navPosition={showCategoryNavigation ? "bottom" : "none"}
+          onEmojiSelect={onEmojiSelect}
+          previewPosition="none"
+          searchPosition="sticky"
+          set="native"
+          skinTonePosition={showSkinTonePicker ? "search" : "none"}
+          theme={emojiPickerTheme}
+        />
+      </div>
+
+      <div className="grid grid-cols-12 justify-items-center gap-1.5 rounded-lg bg-muted p-3">
+        {AVATAR_COLOR_SWATCHES.map((swatch) => {
+          const isCustomSwatch = swatch === CUSTOM_AVATAR_COLOR_SWATCH;
+          const isSelected = isCustomSwatch
+            ? !AVATAR_COLORS.some(
+                (color) => color.toUpperCase() === selectedColor.toUpperCase(),
+              )
+            : swatch.toUpperCase() === selectedColor.toUpperCase();
+
+          return (
+            <button
+              aria-label={
+                isCustomSwatch
+                  ? selectedEmoji
+                    ? "Choose custom color"
+                    : "Choose an emoji first"
+                  : `Use ${swatch} background`
+              }
+              aria-pressed={isSelected}
+              className={cn(
+                "relative h-6 w-6 rounded-full border border-border transition-transform duration-150 ease-out hover:scale-[1.15] focus-visible:scale-[1.15] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+                isCustomSwatch &&
+                  !selectedEmoji &&
+                  "cursor-not-allowed opacity-45 hover:scale-100 focus-visible:scale-100",
+              )}
+              disabled={isCustomSwatch && !selectedEmoji}
+              key={swatch}
+              onClick={() => onColorSelect(swatch)}
+              style={{
+                background: isCustomSwatch
+                  ? isSelected
+                    ? selectedColor
+                    : "conic-gradient(from 0deg, #ff4d4d, #ffe75c, #73ef75, #63c6f2, #b141ff, #ff4d4d)"
+                  : swatch,
+              }}
+              type="button"
+            >
+              {isSelected ? (
+                <span
+                  className="absolute inset-0.5 rounded-full border-2"
+                  style={{
+                    borderColor: contrastColorForBackground(
+                      isCustomSwatch ? selectedColor : swatch,
+                    ),
+                  }}
+                />
+              ) : null}
+            </button>
+          );
+        })}
+      </div>
+
+      <AvatarCustomColorPanel
+        colorDraft={colorDraft}
+        hue={customHue}
+        onCommit={onCommitCustomColor}
+        onHueChange={onHueChange}
+        onSaturationValueChange={onSaturationValueChange}
+        saturation={customSaturation}
+        testIdPrefix={testIdPrefix}
+        value={customValue}
+        visible={isCustomColorPickerVisible}
+      />
+
+      {hasAvatar && onClearAvatar ? (
+        <RemoveAvatarButton
+          actionButtonClassName={actionButtonClassName}
+          assetLabel={assetLabel}
+          disabled={disabled}
+          onClick={onClearAvatar}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+export function AgentAvatarAnimatedTab({
+  actionButtonClassName,
+  assetLabel,
+  disabled,
+  hasAvatar,
+  onApply,
+  onApplyPendingChange,
+  onClearAvatar,
+  onPreviewActiveChange,
+  previewContainer,
+  processRecording,
+  testIdPrefix,
+}: {
+  actionButtonClassName?: string;
+  assetLabel: string;
+  disabled: boolean;
+  hasAvatar: boolean;
+  onApply: (avatarUrl: string) => void;
+  onApplyPendingChange: (isPending: boolean) => void;
+  onClearAvatar?: () => void;
+  onPreviewActiveChange?: (active: boolean) => void;
+  previewContainer?: HTMLElement | null;
+  processRecording?: AnimatedAvatarRecordingProcessor;
+  testIdPrefix: string;
+}) {
+  return (
+    <div className="grid gap-3">
+      <AnimatedAvatarCapture
+        actionButtonClassName={actionButtonClassName}
+        compactReview
+        dense
+        disabled={disabled}
+        onApply={onApply}
+        onApplyPendingChange={onApplyPendingChange}
+        onPreviewActiveChange={onPreviewActiveChange}
+        previewContainer={previewContainer}
+        processRecording={processRecording}
+        testIdPrefix={`${testIdPrefix}-animated`}
+      />
+      {hasAvatar && onClearAvatar ? (
+        <RemoveAvatarButton
+          actionButtonClassName={actionButtonClassName}
+          assetLabel={assetLabel}
+          disabled={disabled}
+          onClick={onClearAvatar}
+        />
+      ) : null}
+    </div>
+  );
+}
diff --git a/desktop/src/features/agents/ui/AgentCreationPreview.tsx b/desktop/src/features/agents/ui/AgentCreationPreview.tsx
index 2856f56e789..106954879e6 100644
--- a/desktop/src/features/agents/ui/AgentCreationPreview.tsx
+++ b/desktop/src/features/agents/ui/AgentCreationPreview.tsx
@@ -1,21 +1,17 @@
-import emojiData from "@emoji-mart/data";
-import Picker from "@emoji-mart/react";
 import * as React from "react";
-import { Link2, Pencil, Plus, UploadCloud } from "lucide-react";
-import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { Pencil, Plus } from "lucide-react";
+
 import { MaskedAvatarBadgeFrame } from "@/features/profile/ui/MaskedAvatarBadgeFrame";
+import type { AnimatedAvatarRecordingProcessor } from "@/features/profile/ui/AnimatedAvatarCapture.types";
 import { ProfileAvatar } from "@/features/profile/ui/ProfileAvatar";
 import {
   AVATAR_COLORS,
-  AVATAR_COLOR_SWATCHES,
   CUSTOM_AVATAR_COLOR_SWATCH,
   DEFAULT_CUSTOM_HUE,
   DEFAULT_CUSTOM_SATURATION,
   DEFAULT_CUSTOM_VALUE,
   DEFAULT_EMOJI_AVATAR_COLOR,
-  EMOJI_MART_CATEGORIES,
   type AvatarColorSwatch,
-  contrastColorForBackground,
   emojiAvatarDataUrl,
   hexToHsv,
   hsvToHex,
@@ -24,10 +20,8 @@ import {
   useEmojiMartStyles,
   useEmojiMartThemeVars,
 } from "@/features/profile/ui/ProfileAvatarEditor.utils";
-import { AvatarCustomColorPanel } from "@/features/profile/ui/AvatarCustomColorPanel";
 import { useAvatarUpload } from "@/features/profile/useAvatarUpload";
 import { cn } from "@/shared/lib/cn";
-import { Button } from "@/shared/ui/button";
 import { useEmojiBurst } from "@/shared/ui/EmojiBurstProvider";
 import {
   Popover,
@@ -38,12 +32,27 @@ import {
 import { Spinner } from "@/shared/ui/spinner";
 import { Tabs, TabsList, TabsTrigger } from "@/shared/ui/tabs";
 import {
-  AVATAR_APPLY_MOTION_TRANSITION,
   type AvatarTab,
   type EmojiMartEmoji,
   isAvatarFileDrag,
 } from "./AgentCreationPreview.utils";
+import {
+  AgentAvatarAnimatedTab,
+  AgentAvatarEmojiTab,
+  AgentAvatarImageTab,
+} from "./AgentAvatarPickerTabs";
+import { AgentAvatarOnboardingTrigger } from "./AgentAvatarOnboardingTrigger";
+
+const ONBOARDING_EMOJI_MART_THEME_VARS = {
+  "--buzz-emoji-picker-rgb-background":
+    "var(--buzz-onboarding-emoji-picker-background)",
+  "--buzz-emoji-picker-rgb-color": "var(--buzz-onboarding-emoji-picker-color)",
+  "--buzz-emoji-picker-rgb-input": "var(--buzz-onboarding-emoji-picker-input)",
+} as React.CSSProperties;
+
 export function AgentCreationPreview({
+  align = "center",
+  allowAnimated = false,
   assetLabel = "avatar",
   avatarUrl,
   disabled = false,
@@ -53,11 +62,15 @@ export function AgentCreationPreview({
   onCommitAvatar,
   onUploadPendingChange,
   onSelectAvatar,
+  presentation = "default",
+  processAnimatedAvatar,
   processImage,
   shape = "circle",
   testIdPrefix = "agent-avatar",
   variant = "default",
 }: {
+  align?: "center" | "start";
+  allowAnimated?: boolean;
   assetLabel?: string;
   avatarUrl: string | null;
   disabled?: boolean;
@@ -70,6 +83,8 @@ export function AgentCreationPreview({
   onCommitAvatar?: (avatarUrl: string) => void;
   onUploadPendingChange?: (isPending: boolean) => void;
   onSelectAvatar: (avatarUrl: string) => void;
+  presentation?: "default" | "onboarding";
+  processAnimatedAvatar?: AnimatedAvatarRecordingProcessor;
   processImage?: (file: File) => Promise<string>;
   shape?: "circle" | "rounded-square";
   testIdPrefix?: string;
@@ -96,16 +111,25 @@ export function AgentCreationPreview({
   const [isCustomColorPickerOpen, setIsCustomColorPickerOpen] =
     React.useState(false);
   const [isPopoverDragOver, setIsPopoverDragOver] = React.useState(false);
+  const [isAnimatedApplyPending, setIsAnimatedApplyPending] =
+    React.useState(false);
+  const [animatedPreviewContainer, setAnimatedPreviewContainer] =
+    React.useState<HTMLDivElement | null>(null);
+  const [isAnimatedPreviewActive, setIsAnimatedPreviewActive] =
+    React.useState(false);
   const [squishKey, setSquishKey] = React.useState(0);
   const avatarDragDepthRef = React.useRef(0);
   const popoverDragDepthRef = React.useRef(0);
-  const shouldReduceMotion = useReducedMotion();
   const emojiPickerContainerRef = React.useRef<HTMLDivElement | null>(null);
   const emojiMartThemeVars = useEmojiMartThemeVars();
   const { burstEmoji } = useEmojiBurst();
   const assetLabelTitle =
     assetLabel.charAt(0).toUpperCase() + assetLabel.slice(1);
   const isRoundedSquare = shape === "rounded-square";
+  const isOnboarding = presentation === "onboarding";
+  const onboardingAvatarActionButtonClassName = isOnboarding
+    ? "h-10 rounded-full px-6 text-sm text-[var(--buzz-onboarding-cta-label)]"
+    : undefined;
   const isCompact = variant === "compact";
   const emojiShape = isRoundedSquare ? "rounded-square" : "circle";
   const {
@@ -128,6 +152,9 @@ export function AgentCreationPreview({
   useEmojiMartStyles(
     emojiPickerContainerRef,
     isAvatarMenuOpen && activeTab === "emoji",
+    false,
+    isOnboarding ? "light" : null,
+    isOnboarding,
   );
   // Emoji Mart mounts its search input inside a shadow root. Wait for it
   // before focusing so the surrounding Radix popover cannot win the race.
@@ -160,12 +187,14 @@ export function AgentCreationPreview({
     [customHue, customSaturation, customValue],
   );
 
+  const isAvatarPending = isUploading || isAnimatedApplyPending;
+
   React.useEffect(() => {
-    onUploadPendingChange?.(isUploading);
+    onUploadPendingChange?.(isAvatarPending);
     return () => {
       onUploadPendingChange?.(false);
     };
-  }, [isUploading, onUploadPendingChange]);
+  }, [isAvatarPending, onUploadPendingChange]);
 
   // Sync emoji state from avatarUrl when the popover opens
   React.useEffect(() => {
@@ -179,7 +208,7 @@ export function AgentCreationPreview({
         setSelectedEmoji(parsed.emoji);
         setSelectedColor(parsed.color);
         setHasChosenColor(true);
-        setActiveTab("emoji");
+        setActiveTab("image");
       } else {
         // Non-emoji avatar (image/URL or empty): clear any stale emoji
         // selection so a later color-swatch tap can't re-apply an old emoji
@@ -187,7 +216,7 @@ export function AgentCreationPreview({
         setSelectedEmoji(null);
         setSelectedColor(DEFAULT_EMOJI_AVATAR_COLOR);
         setHasChosenColor(false);
-        setActiveTab("image");
+        setActiveTab("emoji");
       }
     }
   }, [isAvatarMenuOpen, avatarUrl]);
@@ -278,10 +307,6 @@ export function AgentCreationPreview({
     () => parseEmojiAvatarDataUrl(avatarUrl ?? ""),
     [avatarUrl],
   );
-  const applyButtonTransition = shouldReduceMotion
-    ? { duration: 0 }
-    : AVATAR_APPLY_MOTION_TRANSITION;
-
   // Outer avatar drag — only active when popover is closed
   const handleAvatarDragEnter = React.useCallback(
     (event: React.DragEvent<HTMLFieldSetElement>) => {
@@ -425,7 +450,12 @@ export function AgentCreationPreview({
   const avatarMenuContent = (
     <PopoverContent
       align="center"
-      className="w-[400px] p-3"
+      className={cn(
+        "w-[400px] p-3",
+        isOnboarding &&
+          "buzz-onboarding-neutral-theme bg-white text-foreground [--buzz-onboarding-cta-label:#fff]",
+      )}
+      data-system-color-scheme={isOnboarding ? "light" : undefined}
       side="bottom"
       sideOffset={8}
     >
@@ -449,13 +479,20 @@ export function AgentCreationPreview({
           }}
           value={activeTab}
         >
-          <TabsList className="relative isolate mb-3 grid h-9 w-full grid-cols-2 overflow-hidden rounded-lg bg-muted p-0.5">
+          <TabsList
+            className={cn(
+              "relative isolate mb-3 grid h-9 w-full overflow-hidden rounded-lg bg-muted p-0.5",
+              allowAnimated ? "grid-cols-3" : "grid-cols-2",
+            )}
+          >
             <div
               aria-hidden="true"
-              className="absolute bottom-0.5 left-0.5 top-0.5 z-0 rounded-md bg-background shadow-sm transition-transform duration-[250ms] ease-out"
+              className="absolute bottom-0.5 left-0.5 top-0.5 z-0 rounded-md bg-background shadow-sm transition-transform duration-200 ease-in-out motion-reduce:transition-none"
               style={{
-                transform: `translateX(${activeTab === "emoji" ? 100 : 0}%)`,
-                width: "calc((100% - 4px) / 2)",
+                transform: `translateX(${activeTab === "image" ? 0 : activeTab === "emoji" ? 100 : 200}%)`,
+                width: allowAnimated
+                  ? "calc((100% - 4px) / 3)"
+                  : "calc((100% - 4px) / 2)",
               }}
             />
             <TabsTrigger
@@ -470,227 +507,129 @@ export function AgentCreationPreview({
             >
               Emoji
             </TabsTrigger>
+            {allowAnimated ? (
+              <TabsTrigger
+                className="relative z-10 h-full rounded-md bg-transparent text-xs font-medium shadow-none transition-colors data-[state=active]:bg-transparent data-[state=active]:shadow-none motion-reduce:transition-none"
+                value="animated"
+              >
+                Animated
+              </TabsTrigger>
+            ) : null}
           </TabsList>
         </Tabs>
 
         {activeTab === "image" ? (
-          <div className="grid gap-2.5">
-            {/* Click to browse zone */}
-            <button
-              className="relative flex h-[80px] flex-col items-center justify-center gap-1.5 overflow-hidden rounded-lg border border-transparent bg-muted text-foreground transition-[background-color,border-color,box-shadow,color] duration-200 ease-out hover:bg-muted/80 disabled:opacity-60"
-              disabled={disabled || isUploading}
-              onClick={() => {
-                clearUploadError();
-                openUploadPicker();
-              }}
-              type="button"
-            >
-              {isUploading ? (
-                <Spinner
-                  aria-hidden
-                  className="h-5 w-5 border-2 text-muted-foreground"
-                />
-              ) : (
-                <UploadCloud className="h-5 w-5 text-muted-foreground" />
-              )}
-              <span className="text-xs font-medium text-muted-foreground">
-                {isUploading ? "Uploading..." : "Drop or browse"}
-              </span>
-            </button>
-
-            {/* URL input */}
-            <div className="flex h-10 items-center gap-2.5 rounded-lg bg-muted px-3">
-              <Link2 className="h-3.5 w-3.5 shrink-0 text-muted-foreground/60" />
-              <input
-                autoCapitalize="none"
-                autoCorrect="off"
-                className="min-w-0 flex-1 bg-transparent text-xs font-medium text-foreground outline-none placeholder:text-muted-foreground/50"
-                disabled={disabled || isUploading}
-                onChange={(event) => setAvatarUrlDraft(event.target.value)}
-                onKeyDown={(event) => {
-                  if (event.key === "Enter") {
-                    event.preventDefault();
-                    applyAvatarUrl();
+          <AgentAvatarImageTab
+            actionButtonClassName={onboardingAvatarActionButtonClassName}
+            assetLabel={assetLabel}
+            avatarUrlDraft={avatarUrlDraft}
+            disabled={disabled}
+            hasAvatar={hasAvatar}
+            isUploading={isUploading}
+            onApplyUrl={applyAvatarUrl}
+            onAvatarUrlDraftChange={setAvatarUrlDraft}
+            onClearAvatar={
+              onClearAvatar
+                ? () => {
+                    clearAvatar();
+                    setIsAvatarMenuOpen(false);
                   }
-                }}
-                placeholder="Paste a URL"
-                spellCheck={false}
-                type="url"
-                value={avatarUrlDraft}
-              />
-              <AnimatePresence initial={false}>
-                {avatarUrlDraft.trim().length > 0 ? (
-                  <motion.div
-                    animate={{ opacity: 1, scale: 1, width: "auto" }}
-                    className="overflow-hidden"
-                    exit={{ opacity: 0, scale: 0.96, width: 0 }}
-                    initial={{ opacity: 0, scale: 0.96, width: 0 }}
-                    key="apply-url"
-                    transition={applyButtonTransition}
-                  >
-                    <Button
-                      className="h-6 px-2 text-2xs"
-                      disabled={disabled || isUploading}
-                      onClick={() => applyAvatarUrl()}
-                      size="xs"
-                      type="button"
-                    >
-                      Apply
-                    </Button>
-                  </motion.div>
-                ) : null}
-              </AnimatePresence>
-            </div>
-
-            {uploadErrorMessage ? (
-              <p className="rounded-lg bg-destructive/10 px-3 py-2 text-xs font-medium text-destructive">
-                {uploadErrorMessage}
-              </p>
-            ) : null}
-
-            {hasAvatar && onClearAvatar ? (
-              <button
-                className="flex min-h-8 w-full items-center justify-center rounded-lg text-xs text-destructive outline-hidden transition-colors duration-150 ease-out hover:bg-destructive/10 focus-visible:bg-destructive/10 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
-                disabled={disabled || isUploading}
-                onClick={() => {
-                  clearAvatar();
-                  setIsAvatarMenuOpen(false);
-                }}
-                type="button"
-              >
-                Remove {assetLabel}
-              </button>
-            ) : null}
-          </div>
+                : undefined
+            }
+            onOpenUploadPicker={() => {
+              clearUploadError();
+              openUploadPicker();
+            }}
+            uploadErrorMessage={uploadErrorMessage}
+          />
         ) : null}
 
         {activeTab === "emoji" ? (
-          <div className="relative grid content-start gap-3">
-            <div
-              className="buzz-emoji-mart relative z-0 h-[280px] overflow-hidden rounded-lg bg-muted"
-              ref={emojiPickerContainerRef}
-              style={emojiMartThemeVars}
-            >
-              <Picker
-                autoFocus
-                categories={EMOJI_MART_CATEGORIES}
-                data={emojiData}
-                dynamicWidth
-                emojiButtonRadius="999px"
-                emojiButtonSize={44}
-                emojiSize={32}
-                icons="outline"
-                navPosition="bottom"
-                onEmojiSelect={(emoji: EmojiMartEmoji, event?: MouseEvent) => {
-                  if (disabled) {
-                    return;
+          <AgentAvatarEmojiTab
+            actionButtonClassName={onboardingAvatarActionButtonClassName}
+            assetLabel={assetLabel}
+            colorDraft={customColorDraft}
+            customHue={customHue}
+            customSaturation={customSaturation}
+            customValue={customValue}
+            disabled={disabled}
+            emojiMartThemeVars={
+              isOnboarding
+                ? ONBOARDING_EMOJI_MART_THEME_VARS
+                : emojiMartThemeVars
+            }
+            emojiPickerTheme={isOnboarding ? "light" : "auto"}
+            emojiPickerContainerRef={emojiPickerContainerRef}
+            emojiSearchControlHeight={isOnboarding ? "32px" : undefined}
+            hasAvatar={hasAvatar}
+            isCustomColorPickerVisible={isCustomColorPickerVisible}
+            onClearAvatar={
+              onClearAvatar
+                ? () => {
+                    clearAvatar();
+                    setSelectedEmoji(null);
+                    setIsAvatarMenuOpen(false);
                   }
-                  if (!emoji.native) {
-                    return;
-                  }
-                  const nextColor =
-                    selectedEmoji === null && !hasChosenColor
-                      ? (AVATAR_COLORS[
-                          Math.floor(Math.random() * AVATAR_COLORS.length)
-                        ] ?? DEFAULT_EMOJI_AVATAR_COLOR)
-                      : selectedColor;
-                  burstEmoji(emoji.native, event);
-                  setSelectedEmoji(emoji.native);
-                  setSelectedColor(nextColor);
-                  applyEmojiAvatar(emoji.native, nextColor);
-                }}
-                previewPosition="none"
-                searchPosition="sticky"
-                set="native"
-                skinTonePosition="none"
-                theme="auto"
-              />
-            </div>
-
-            {/* Color swatches — always visible */}
-            <div className="grid grid-cols-12 justify-items-center gap-1.5 rounded-lg bg-muted p-3">
-              {AVATAR_COLOR_SWATCHES.map((swatch) => {
-                const isCustomSwatch = swatch === CUSTOM_AVATAR_COLOR_SWATCH;
-                const isSelected = isCustomSwatch
-                  ? !AVATAR_COLORS.some(
-                      (color) =>
-                        color.toUpperCase() === selectedColor.toUpperCase(),
-                    )
-                  : swatch.toUpperCase() === selectedColor.toUpperCase();
-
-                return (
-                  <button
-                    aria-label={
-                      isCustomSwatch
-                        ? selectedEmoji
-                          ? "Choose custom color"
-                          : "Choose an emoji first"
-                        : `Use ${swatch} background`
-                    }
-                    aria-pressed={isSelected}
-                    className={cn(
-                      "relative h-6 w-6 rounded-full border border-border transition-transform duration-150 ease-out hover:scale-[1.15] focus-visible:scale-[1.15] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                      isCustomSwatch &&
-                        !selectedEmoji &&
-                        "cursor-not-allowed opacity-45 hover:scale-100 focus-visible:scale-100",
-                    )}
-                    disabled={isCustomSwatch && !selectedEmoji}
-                    key={swatch}
-                    onClick={() => handleColorSelect(swatch)}
-                    style={{
-                      background: isCustomSwatch
-                        ? isSelected
-                          ? selectedColor
-                          : "conic-gradient(from 0deg, #ff4d4d, #ffe75c, #73ef75, #63c6f2, #b141ff, #ff4d4d)"
-                        : swatch,
-                    }}
-                    type="button"
-                  >
-                    {isSelected ? (
-                      <span
-                        className="absolute inset-0.5 rounded-full border-2"
-                        style={{
-                          borderColor: contrastColorForBackground(
-                            isCustomSwatch ? selectedColor : swatch,
-                          ),
-                        }}
-                      />
-                    ) : null}
-                  </button>
-                );
-              })}
-            </div>
-
-            <AvatarCustomColorPanel
-              colorDraft={customColorDraft}
-              hue={customHue}
-              onCommit={commitCustomColor}
-              onHueChange={setCustomHue}
-              onSaturationValueChange={(nextSaturation, nextValue) => {
-                setCustomSaturation(nextSaturation);
-                setCustomValue(nextValue);
-              }}
-              saturation={customSaturation}
-              testIdPrefix={testIdPrefix}
-              value={customValue}
-              visible={isCustomColorPickerVisible}
-            />
+                : undefined
+            }
+            onColorSelect={handleColorSelect}
+            onCommitCustomColor={commitCustomColor}
+            onEmojiSelect={(emoji: EmojiMartEmoji, event?: MouseEvent) => {
+              if (disabled || !emoji.native) {
+                return;
+              }
+              const nextColor =
+                selectedEmoji === null && !hasChosenColor
+                  ? (AVATAR_COLORS[
+                      Math.floor(Math.random() * AVATAR_COLORS.length)
+                    ] ?? DEFAULT_EMOJI_AVATAR_COLOR)
+                  : selectedColor;
+              burstEmoji(emoji.native, event);
+              setSelectedEmoji(emoji.native);
+              setSelectedColor(nextColor);
+              applyEmojiAvatar(emoji.native, nextColor);
+            }}
+            onHueChange={setCustomHue}
+            onSaturationValueChange={(nextSaturation, nextValue) => {
+              setCustomSaturation(nextSaturation);
+              setCustomValue(nextValue);
+            }}
+            selectedColor={selectedColor}
+            selectedEmoji={selectedEmoji}
+            showCategoryNavigation={!isOnboarding}
+            showSkinTonePicker={isOnboarding}
+            testIdPrefix={testIdPrefix}
+          />
+        ) : null}
 
-            {hasAvatar && onClearAvatar ? (
-              <button
-                className="flex min-h-8 w-full items-center justify-center rounded-lg text-xs text-destructive outline-hidden transition-colors duration-150 ease-out hover:bg-destructive/10 focus-visible:bg-destructive/10 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
-                disabled={disabled}
-                onClick={() => {
-                  clearAvatar();
-                  setSelectedEmoji(null);
-                  setIsAvatarMenuOpen(false);
-                }}
-                type="button"
-              >
-                Remove {assetLabel}
-              </button>
-            ) : null}
-          </div>
+        {activeTab === "animated" && allowAnimated ? (
+          <AgentAvatarAnimatedTab
+            actionButtonClassName={onboardingAvatarActionButtonClassName}
+            assetLabel={assetLabel}
+            disabled={disabled}
+            hasAvatar={hasAvatar}
+            onApply={(nextAvatarUrl) => {
+              clearUploadError();
+              onSelectAvatar(nextAvatarUrl);
+              onCommitAvatar?.(nextAvatarUrl);
+              setIsAvatarMenuOpen(false);
+            }}
+            onApplyPendingChange={setIsAnimatedApplyPending}
+            onClearAvatar={
+              onClearAvatar
+                ? () => {
+                    clearAvatar();
+                    setIsAvatarMenuOpen(false);
+                  }
+                : undefined
+            }
+            onPreviewActiveChange={setIsAnimatedPreviewActive}
+            previewContainer={
+              isOnboarding ? animatedPreviewContainer : undefined
+            }
+            processRecording={processAnimatedAvatar}
+            testIdPrefix={testIdPrefix}
+          />
         ) : null}
       </fieldset>
     </PopoverContent>
@@ -703,7 +642,12 @@ export function AgentCreationPreview({
       <div
         className={cn(
           "w-full",
-          isCompact ? "w-auto" : "mx-auto max-w-[220px] lg:sticky lg:top-0",
+          isCompact
+            ? "w-auto"
+            : cn(
+                "max-w-[220px] lg:sticky lg:top-0",
+                align === "center" && "mx-auto",
+              ),
         )}
       >
         <div
@@ -768,13 +712,19 @@ export function AgentCreationPreview({
     <div
       className={cn(
         "w-full",
-        isCompact ? "w-auto" : "mx-auto max-w-[220px] lg:sticky lg:top-0",
+        isCompact
+          ? "w-auto"
+          : cn(
+              "max-w-[220px] lg:sticky lg:top-0",
+              align === "center" && "mx-auto",
+            ),
       )}
     >
       <fieldset
         aria-label={`${assetLabelTitle} preview`}
         className={cn(
-          "group/avatar-preview relative m-0 flex min-w-0 flex-col items-center justify-center rounded-xl border border-transparent p-0 transition-[background-color,border-color,box-shadow] duration-150",
+          "group/avatar-preview relative m-0 flex min-w-0 flex-col justify-center rounded-xl border border-transparent p-0 transition-[background-color,border-color,box-shadow] duration-150",
+          align === "start" ? "items-start" : "items-center",
           isCompact ? "min-h-0" : "min-h-[190px] gap-3",
           isDragOverAvatar &&
             !isAvatarMenuOpen &&
@@ -798,7 +748,21 @@ export function AgentCreationPreview({
             <div
               className={cn("relative", isCompact ? "h-16 w-16" : "h-36 w-36")}
             >
-              {hasAvatar && isRoundedSquare ? (
+              {isOnboarding ? (
+                <AgentAvatarOnboardingTrigger
+                  assetLabel={assetLabel}
+                  avatarUrl={avatarUrl}
+                  disabled={disabled}
+                  emojiAvatarPreview={emojiAvatarPreview}
+                  hasAvatar={hasAvatar}
+                  isAnimatedPreviewActive={isAnimatedPreviewActive}
+                  isAvatarPending={isAvatarPending}
+                  label={label}
+                  onPreviewContainerChange={setAnimatedPreviewContainer}
+                  squishKey={squishKey}
+                  testIdPrefix={testIdPrefix}
+                />
+              ) : hasAvatar && isRoundedSquare ? (
                 <MaskedAvatarBadgeFrame
                   badge={
                     <PopoverTrigger asChild>
@@ -808,11 +772,12 @@ export function AgentCreationPreview({
                           "flex items-center justify-center rounded-full bg-sidebar-active text-sidebar-active-foreground shadow-lg transition-[background-color,scale] duration-150 ease-out hover:scale-[1.04] hover:bg-sidebar-active focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-default disabled:opacity-90 disabled:hover:scale-100",
                           isCompact ? "h-6 w-6" : "h-9 w-9",
                         )}
-                        disabled={disabled || isUploading}
+                        data-testid={`${testIdPrefix}-open`}
+                        disabled={disabled || isAvatarPending}
                         title={`Edit ${assetLabel}`}
                         type="button"
                       >
-                        {isUploading ? (
+                        {isAvatarPending ? (
                           <Spinner
                             aria-label={`Uploading ${assetLabel}`}
                             className={cn(
@@ -897,11 +862,12 @@ export function AgentCreationPreview({
                           "flex items-center justify-center rounded-full bg-sidebar-active text-sidebar-active-foreground shadow-lg transition-[background-color,scale] duration-150 ease-out hover:scale-[1.04] hover:bg-sidebar-active focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-default disabled:opacity-90 disabled:hover:scale-100",
                           isCompact ? "h-6 w-6" : "h-9 w-9",
                         )}
-                        disabled={disabled || isUploading}
+                        data-testid={`${testIdPrefix}-open`}
+                        disabled={disabled || isAvatarPending}
                         title={`Edit ${assetLabel}`}
                         type="button"
                       >
-                        {isUploading ? (
+                        {isAvatarPending ? (
                           <Spinner
                             aria-label={`Uploading ${assetLabel}`}
                             className={cn(
@@ -990,11 +956,12 @@ export function AgentCreationPreview({
                         !isAvatarMenuOpen &&
                         "border-primary/70 bg-primary/5 ring-2 ring-primary/15",
                     )}
-                    disabled={disabled || isUploading}
+                    data-testid={`${testIdPrefix}-open`}
+                    disabled={disabled || isAvatarPending}
                     title={`Add ${assetLabel}`}
                     type="button"
                   >
-                    {isUploading ? (
+                    {isAvatarPending ? (
                       <Spinner
                         aria-label={`Uploading ${assetLabel}`}
                         className="h-4 w-4 border-2"
diff --git a/desktop/src/features/agents/ui/AgentCreationPreview.utils.ts b/desktop/src/features/agents/ui/AgentCreationPreview.utils.ts
index a6ba6505575..39a4f17da8b 100644
--- a/desktop/src/features/agents/ui/AgentCreationPreview.utils.ts
+++ b/desktop/src/features/agents/ui/AgentCreationPreview.utils.ts
@@ -9,7 +9,7 @@ export const AVATAR_APPLY_MOTION_TRANSITION = {
   ease: [0.23, 1, 0.32, 1],
 } as const;
 
-export type AvatarTab = "image" | "emoji";
+export type AvatarTab = "image" | "emoji" | "animated";
 
 export type EmojiMartEmoji = {
   native?: string;
diff --git a/desktop/src/features/communities/ui/HostedCommunityOnboarding.tsx b/desktop/src/features/communities/ui/HostedCommunityOnboarding.tsx
index 1152cd8fec3..e6c619c75db 100644
--- a/desktop/src/features/communities/ui/HostedCommunityOnboarding.tsx
+++ b/desktop/src/features/communities/ui/HostedCommunityOnboarding.tsx
@@ -23,11 +23,15 @@ import {
 } from "@/features/communities/hostedCommunityApi";
 import { useCommunityOnboarding } from "@/features/onboarding/communityOnboarding";
 import { useIdentityQuery } from "@/shared/api/hooks";
+import { cn } from "@/shared/lib/cn";
 import { safeNpub } from "@/shared/lib/nostrUtils";
 import { Button } from "@/shared/ui/button";
 import { Card } from "@/shared/ui/card";
 import { Input } from "@/shared/ui/input";
 import { OnboardingFooter } from "@/features/onboarding/ui/OnboardingFooter";
+import { OnboardingPreviewInput } from "@/features/onboarding/ui/OnboardingPreviewInput";
+import { useOnboardingPreviewCardLayout } from "@/features/onboarding/ui/OnboardingPreviewShell";
+import { ONBOARDING_PREVIEW_CARD_INPUT_CLASS } from "@/features/onboarding/ui/onboardingPreviewCardStyles";
 import {
   ONBOARDING_INK_ICON_CLASS,
   ONBOARDING_PRIMARY_CTA_CLASS,
@@ -64,6 +68,9 @@ type HostedCommunityOnboardingProps = {
    * finished driving the flow.
    */
   onReady?: () => void;
+  /** Use the production stage with local-only workshop behavior. */
+  previewMode?: boolean;
+  onPreviewContinue?: (communityName: string) => void;
   /**
    * While true, render only the sign-in modal and keep the page scaffolding
    * hidden, so whatever screen launched the flow stays visible behind it.
@@ -74,8 +81,216 @@ type HostedCommunityOnboardingProps = {
 export function HostedCommunityOnboarding({
   onBack,
   onReady,
+  onPreviewContinue,
+  previewMode = false,
   stageHidden = false,
 }: HostedCommunityOnboardingProps) {
+  if (previewMode) {
+    return (
+      <HostedCommunityOnboardingPreview
+        onBack={onBack}
+        onContinue={onPreviewContinue ?? (() => undefined)}
+      />
+    );
+  }
+
+  return (
+    <HostedCommunityOnboardingLive
+      onBack={onBack}
+      onReady={onReady}
+      stageHidden={stageHidden}
+    />
+  );
+}
+
+function HostedCommunityOnboardingPreview({
+  onBack,
+  onContinue,
+}: {
+  onBack: () => void;
+  onContinue: (communityName: string) => void;
+}) {
+  const cardLayout = useOnboardingPreviewCardLayout();
+  const [name, setName] = React.useState("");
+  const normalizedName = name.trim();
+  const nameIsAvailable =
+    normalizedName.length > 0 &&
+    VALID_HOSTED_COMMUNITY_NAME.test(normalizedName);
+  const displayName = name || "your-community";
+  const composedAddressLength =
+    displayName.length + HOSTED_COMMUNITY_SUFFIX.length + 1;
+  const addressFontSize = `min(2.25rem, calc(90cqw / ${(
+    composedAddressLength * 0.62
+  ).toFixed(2)}))`;
+
+  const continueToCommunity = (event: React.FormEvent) => {
+    event.preventDefault();
+    onContinue(name.trim() || "Your community");
+  };
+
+  return (
+    <div
+      className={cn(
+        "flex w-full max-w-[920px] flex-col",
+        cardLayout
+          ? "min-h-0 items-stretch text-left"
+          : "min-h-[calc(100dvh-15.625rem)] items-center text-center",
+      )}
+      data-testid="hosted-community-preview"
+    >
+      <h1 className="max-w-[620px] text-title font-normal leading-[1.18] tracking-[-0.025em]">
+        Create a community
+      </h1>
+      <p
+        className={cn(
+          "mt-2 max-w-[560px] text-sm leading-6 text-foreground",
+          !cardLayout && "mx-auto",
+        )}
+      >
+        Choose a name for your community.
+      </p>
+
+      <div
+        className={cn(
+          "flex w-full flex-1 flex-col text-left",
+          cardLayout ? "items-stretch justify-start pt-8" : "justify-center",
+        )}
+      >
+        {cardLayout ? (
+          <form
+            className="text-left"
+            data-testid="hosted-community-create-surface"
+            id="hosted-community-preview-create-form"
+            onSubmit={continueToCommunity}
+          >
+            <label
+              className="mb-2 block text-sm font-medium text-foreground"
+              htmlFor="hosted-community-preview-address"
+            >
+              Community name
+            </label>
+            <div
+              className="relative"
+              data-testid="hosted-community-address-line"
+            >
+              <OnboardingPreviewInput
+                autoComplete="off"
+                className={cn(
+                  ONBOARDING_PREVIEW_CARD_INPUT_CLASS,
+                  "pr-[12.5rem] font-mono",
+                )}
+                data-testid="hosted-community-address-input"
+                id="hosted-community-preview-address"
+                maxLength={63}
+                onChange={(event) => setName(event.target.value.toLowerCase())}
+                placeholder="your-community"
+                spellCheck={false}
+                value={name}
+              />
+              <span className="pointer-events-none absolute inset-y-0 right-4 flex items-center whitespace-nowrap font-mono text-xs text-muted-foreground">
+                .{HOSTED_COMMUNITY_SUFFIX}
+              </span>
+            </div>
+            <p
+              aria-live="polite"
+              className={cn(
+                "mt-2 min-h-5 text-xs",
+                nameIsAvailable
+                  ? "text-foreground/70"
+                  : "text-muted-foreground",
+              )}
+              data-testid="hosted-community-address-status"
+            >
+              {normalizedName.length === 0
+                ? ""
+                : nameIsAvailable
+                  ? "This name is available."
+                  : "Use lowercase letters, numbers, and hyphens."}
+            </p>
+          </form>
+        ) : (
+          <Card
+            asChild
+            className={`${FUZZY_SURFACE_CLASS} !py-10 [--buzz-card-textured-min-height:176px]`}
+            data-testid="hosted-community-create-surface"
+            variant="textured"
+          >
+            <form
+              id="hosted-community-preview-create-form"
+              onSubmit={continueToCommunity}
+            >
+              <div
+                className="mx-auto flex w-full max-w-[900px] items-center justify-center whitespace-nowrap"
+                data-testid="hosted-community-address-line"
+                style={{ containerType: "inline-size" }}
+              >
+                <Input
+                  aria-label="Community name"
+                  autoComplete="off"
+                  className="h-auto min-w-0 flex-none rounded-none border-0 bg-transparent p-0 text-right font-mono !text-[rgb(var(--buzz-hosted-community-surface-fg))] shadow-none placeholder:!text-[rgb(var(--buzz-hosted-community-surface-fg))] placeholder:opacity-20 focus-visible:ring-0"
+                  data-testid="hosted-community-address-input"
+                  id="hosted-community-preview-address"
+                  maxLength={63}
+                  onChange={(event) =>
+                    setName(event.target.value.toLowerCase())
+                  }
+                  placeholder="your-community"
+                  spellCheck={false}
+                  style={{
+                    width: `${displayName.length}ch`,
+                    fontSize: addressFontSize,
+                  }}
+                  value={name}
+                />
+                <span
+                  className="shrink-0 font-mono !text-[rgb(var(--buzz-hosted-community-surface-fg))]"
+                  style={{ fontSize: addressFontSize }}
+                >
+                  .{HOSTED_COMMUNITY_SUFFIX}
+                </span>
+              </div>
+            </form>
+          </Card>
+        )}
+        {!cardLayout ? (
+          <p
+            aria-hidden
+            className="relative z-10 mt-3 min-h-5 text-center text-sm invisible"
+          >
+            Community address status
+          </p>
+        ) : null}
+      </div>
+
+      <OnboardingFooter>
+        <Button
+          className={cardLayout ? ONBOARDING_PRIMARY_CTA_CLASS : PAGE_CTA_CLASS}
+          data-testid="onboarding-preview-community-continue"
+          form="hosted-community-preview-create-form"
+          type="submit"
+        >
+          Next
+        </Button>
+        {!cardLayout ? (
+          <Button
+            className={PAGE_BACK_CLASS}
+            onClick={onBack}
+            type="button"
+            variant="ghost"
+          >
+            Back
+          </Button>
+        ) : null}
+      </OnboardingFooter>
+    </div>
+  );
+}
+
+function HostedCommunityOnboardingLive({
+  onBack,
+  onReady,
+  stageHidden = false,
+}: Pick<HostedCommunityOnboardingProps, "onBack" | "onReady" | "stageHidden">) {
   const onboarding = useCommunityOnboarding();
   const shouldReduceMotion = useReducedMotion();
   const localPubkey = useIdentityQuery().data?.pubkey ?? null;
diff --git a/desktop/src/features/communities/ui/WelcomeSetup.tsx b/desktop/src/features/communities/ui/WelcomeSetup.tsx
index 3ff00df51b4..ee1f221389e 100644
--- a/desktop/src/features/communities/ui/WelcomeSetup.tsx
+++ b/desktop/src/features/communities/ui/WelcomeSetup.tsx
@@ -43,6 +43,7 @@ export function WelcomeSetup({
   // behind the modal never changes out from under the user.
   const [isHostedSignInOpen, setIsHostedSignInOpen] = React.useState(false);
   const [copiedNpub, setCopiedNpub] = React.useState(false);
+  const [membershipRequired, setMembershipRequired] = React.useState(false);
   const communityOnboarding = useCommunityOnboarding();
   const identityQuery = useIdentityQuery();
   const systemColorScheme = useSystemColorScheme();
@@ -57,6 +58,7 @@ export function WelcomeSetup({
 
   const showPage = React.useCallback(
     (nextPage: WelcomeSetupPage, direction?: OnboardingTransitionDirection) => {
+      setMembershipRequired(false);
       setTransitionMode(
         direction ?? (nextPage === "welcome" ? "backward" : "forward"),
       );
@@ -262,19 +264,24 @@ export function WelcomeSetup({
                     showPage(page === "member" ? "existing" : "welcome")
                   }
                   onConnect={startConnection}
+                  onMembershipRequirementChange={
+                    page === "join" ? setMembershipRequired : undefined
+                  }
                   onRedeem={redeemInvite}
                   placeholder="Invite link or community URL"
                   variant="onboarding-spotlight"
                 />
-                {page === "join" ? (
-                  <div className="w-full max-w-[560px] text-left">
+                {page === "join" && membershipRequired ? (
+                  <div
+                    aria-live="polite"
+                    className="w-full max-w-[560px] text-left"
+                  >
                     <p className="text-sm font-medium text-foreground">
-                      Joining a private community?
+                      You’ll need to request access to this community
                     </p>
                     <p className="mt-2 text-sm leading-6 text-foreground/75">
-                      Some communities need the owner to add you before you can
-                      join. Copy your public ID and send it to the community
-                      owner.
+                      This community requires an admin to add you before you can
+                      join. Copy your public ID and send it to them.
                     </p>
                     <div className="mt-4 flex items-center gap-3 rounded-xl border border-foreground/10 bg-background/35 px-4 py-3">
                       <code
diff --git a/desktop/src/features/onboarding/onboardingPreview.test.mjs b/desktop/src/features/onboarding/onboardingPreview.test.mjs
new file mode 100644
index 00000000000..b2b35dd59f4
--- /dev/null
+++ b/desktop/src/features/onboarding/onboardingPreview.test.mjs
@@ -0,0 +1,110 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import {
+  ONBOARDING_PREVIEW_LANDING_ACTIONS,
+  ONBOARDING_PREVIEW_JOURNEYS,
+  resolveOnboardingPreviewJourney,
+  resolveOnboardingPreviewMode,
+} from "./onboardingPreview.ts";
+
+test("preview requires an exact development opt-in", () => {
+  assert.equal(
+    resolveOnboardingPreviewMode({
+      dev: true,
+      mode: "development",
+      search: "?onboardingPreview=1",
+    }),
+    true,
+  );
+  assert.equal(
+    resolveOnboardingPreviewMode({
+      dev: true,
+      mode: "development",
+      search: "?onboardingPreview=true",
+    }),
+    false,
+  );
+});
+
+test("preview is unavailable in production", () => {
+  assert.equal(
+    resolveOnboardingPreviewMode({
+      dev: false,
+      mode: "production",
+      search: "?onboardingPreview=1",
+    }),
+    false,
+  );
+});
+
+test("preview is available to the explicit E2E build", () => {
+  assert.equal(
+    resolveOnboardingPreviewMode({
+      dev: false,
+      mode: "e2e",
+      search: "?onboardingPreview=1",
+    }),
+    true,
+  );
+});
+
+test("today preserves the complete workshop journey", () => {
+  assert.deepEqual(ONBOARDING_PREVIEW_LANDING_ACTIONS.today, {
+    primary: {
+      label: "Create a new identity key",
+      page: "identity-key",
+    },
+    secondary: {
+      label: "Use an existing key",
+      page: "sign-in-key",
+    },
+  });
+  assert.deepEqual(ONBOARDING_PREVIEW_JOURNEYS.today, {
+    afterAccount: "setup",
+    afterCommunityEntry: "community-connecting",
+    afterProfile: "starter-team",
+    communityChoiceBack: "config",
+    communityStep: 5,
+    finalStep: 7,
+    includeExistingCommunity: true,
+    profileStep: 6,
+    totalSteps: 7,
+  });
+});
+
+test("V3 uses the focused harness step and skips transitional community screens", () => {
+  assert.deepEqual(ONBOARDING_PREVIEW_LANDING_ACTIONS.v3, {
+    primary: { label: "Create an account", page: "email" },
+    secondary: { label: "Sign in", page: "sign-in" },
+  });
+  assert.deepEqual(ONBOARDING_PREVIEW_JOURNEYS.v3, {
+    afterAccount: "harness-connection",
+    afterCommunityEntry: "community-profile",
+    afterProfile: "community-home",
+    communityChoiceBack: "harness-connection",
+    communityStep: 4,
+    finalStep: 5,
+    includeExistingCommunity: false,
+    profileStep: 5,
+    totalSteps: 5,
+  });
+});
+
+test("V3 can preview the same journey with harness connection deferred", () => {
+  assert.deepEqual(resolveOnboardingPreviewJourney("v3", false), {
+    afterAccount: "community-choice",
+    afterCommunityEntry: "community-profile",
+    afterProfile: "community-home",
+    communityChoiceBack: null,
+    communityStep: 3,
+    finalStep: 4,
+    includeExistingCommunity: false,
+    profileStep: 4,
+    totalSteps: 4,
+  });
+  assert.equal(
+    resolveOnboardingPreviewJourney("today", false),
+    ONBOARDING_PREVIEW_JOURNEYS.today,
+  );
+});
diff --git a/desktop/src/features/onboarding/onboardingPreview.ts b/desktop/src/features/onboarding/onboardingPreview.ts
new file mode 100644
index 00000000000..cb27075d7a6
--- /dev/null
+++ b/desktop/src/features/onboarding/onboardingPreview.ts
@@ -0,0 +1,146 @@
+const ONBOARDING_PREVIEW_PARAM = "onboardingPreview";
+const ONBOARDING_PREVIEW_VALUE = "1";
+
+type OnboardingPreviewEnvironment = {
+  dev: boolean;
+  mode: string;
+  search: string;
+};
+
+export type OnboardingPreviewPage =
+  | "landing"
+  | "email"
+  | "identity-key"
+  | "sign-in"
+  | "sign-in-key"
+  | "forgot-password"
+  | "backup-options"
+  | "identity-key-help"
+  | "backup-password"
+  | "setup"
+  | "harness-connection-method"
+  | "harness-connection"
+  | "harness-connection-help"
+  | "harness-connection-detail"
+  | "config"
+  | "community-choice"
+  | "community-entry"
+  | "community-connecting"
+  | "community-profile"
+  | "starter-team"
+  | "welcome-channel"
+  | "community-home";
+
+export type OnboardingPreviewVariant = "today" | "v3";
+
+export const ONBOARDING_PREVIEW_LANDING_ACTIONS = {
+  today: {
+    primary: {
+      label: "Create a new identity key",
+      page: "identity-key",
+    },
+    secondary: {
+      label: "Use an existing key",
+      page: "sign-in-key",
+    },
+  },
+  v3: {
+    primary: {
+      label: "Create an account",
+      page: "email",
+    },
+    secondary: {
+      label: "Sign in",
+      page: "sign-in",
+    },
+  },
+} as const satisfies Record<
+  OnboardingPreviewVariant,
+  Record<
+    "primary" | "secondary",
+    { label: string; page: OnboardingPreviewPage }
+  >
+>;
+
+type OnboardingPreviewJourney = {
+  afterAccount: OnboardingPreviewPage;
+  afterCommunityEntry: OnboardingPreviewPage;
+  afterProfile: OnboardingPreviewPage;
+  communityChoiceBack: OnboardingPreviewPage | null;
+  communityStep: number;
+  finalStep: number;
+  includeExistingCommunity: boolean;
+  profileStep: number;
+  totalSteps: number;
+};
+
+/** Workshop-only route maps that preserve today's full flow beside V3. */
+export const ONBOARDING_PREVIEW_JOURNEYS: Record<
+  OnboardingPreviewVariant,
+  OnboardingPreviewJourney
+> = {
+  today: {
+    afterAccount: "setup",
+    afterCommunityEntry: "community-connecting",
+    afterProfile: "starter-team",
+    communityChoiceBack: "config",
+    communityStep: 5,
+    finalStep: 7,
+    includeExistingCommunity: true,
+    profileStep: 6,
+    totalSteps: 7,
+  },
+  v3: {
+    afterAccount: "harness-connection",
+    afterCommunityEntry: "community-profile",
+    afterProfile: "community-home",
+    communityChoiceBack: "harness-connection",
+    communityStep: 4,
+    finalStep: 5,
+    includeExistingCommunity: false,
+    profileStep: 5,
+    totalSteps: 5,
+  },
+};
+
+/** Resolve the optional V3 harness experiment without changing Today's flow. */
+export function resolveOnboardingPreviewJourney(
+  variant: OnboardingPreviewVariant,
+  harnessConnectionInOnboarding: boolean,
+): OnboardingPreviewJourney {
+  const journey = ONBOARDING_PREVIEW_JOURNEYS[variant];
+  if (variant !== "v3" || harnessConnectionInOnboarding) return journey;
+
+  return {
+    ...journey,
+    afterAccount: "community-choice",
+    communityChoiceBack: null,
+    communityStep: 3,
+    finalStep: 4,
+    profileStep: 4,
+    totalSteps: 4,
+  };
+}
+
+/** Resolve the explicit, non-production onboarding workshop route. */
+export function resolveOnboardingPreviewMode({
+  dev,
+  mode,
+  search,
+}: OnboardingPreviewEnvironment) {
+  if (!dev && mode !== "e2e") return false;
+  return (
+    new URLSearchParams(search).get(ONBOARDING_PREVIEW_PARAM) ===
+    ONBOARDING_PREVIEW_VALUE
+  );
+}
+
+/** True only for a development or explicit E2E preview boot. */
+export function onboardingPreviewRequested() {
+  if (typeof window === "undefined") return false;
+  return resolveOnboardingPreviewMode({
+    dev: import.meta.env.DEV,
+    mode: import.meta.env.MODE,
+    search: window.location.search,
+  });
+}
diff --git a/desktop/src/features/onboarding/ui/BackupStep.tsx b/desktop/src/features/onboarding/ui/BackupStep.tsx
index 8793eda7942..00369264c72 100644
--- a/desktop/src/features/onboarding/ui/BackupStep.tsx
+++ b/desktop/src/features/onboarding/ui/BackupStep.tsx
@@ -1,4 +1,14 @@
-import { Check, Copy, Eye, EyeOff, Info, ShieldCheck } from "lucide-react";
+import {
+  Check,
+  CircleSlash2,
+  Copy,
+  Download,
+  Eye,
+  EyeOff,
+  HardDriveDownload,
+  Info,
+  ShieldCheck,
+} from "lucide-react";
 import { useReducedMotion } from "motion/react";
 import * as React from "react";
 
@@ -9,12 +19,20 @@ import { writeTextToClipboard } from "@/shared/lib/clipboard";
 import { Button } from "@/shared/ui/button";
 import { FuzzyLogo } from "@/shared/ui/buzz-logo/FuzzyLogo";
 import { Card } from "@/shared/ui/card";
+import { SpoilerInline } from "@/shared/ui/markdown/SpoilerInline";
+import { supportsSpoilerParticles } from "@/shared/ui/SpoilerParticles";
 import { Spinner } from "@/shared/ui/spinner";
 import {
   ONBOARDING_PRIMARY_CTA_CLASS,
   ONBOARDING_SECONDARY_CTA_CLASS,
 } from "./OnboardingChrome";
+import { IdentityKeyHelpDialog } from "./IdentityKeyHelpDialog";
 import { OnboardingFooter } from "./OnboardingFooter";
+import { useOnboardingPreviewCardLayout } from "./OnboardingPreviewShell";
+import {
+  ONBOARDING_PREVIEW_NEUTRAL_SURFACE_CLASS,
+  ONBOARDING_PREVIEW_SECONDARY_CTA_CLASS,
+} from "./onboardingPreviewCardStyles";
 import {
   type OnboardingTransitionDirection,
   OnboardingSlideTransition,
@@ -27,6 +45,7 @@ import { ONBOARDING_KEY_TEXT_CLASS } from "./NsecMaskedDisplay";
  * pause sells the creation moment.
  */
 const INTRO_HOLD_MS = 1400;
+const PREVIEW_KEY_TEXT = `nsec1${"q".repeat(58)}`;
 
 /**
  * The creation moment should only be sold once per app session. Module-level
@@ -37,6 +56,10 @@ let introPlayed = false;
 
 const REVEAL_ANIMATION_CLASS =
   "animate-in fade-in duration-700 motion-reduce:animate-none";
+const V3_KEY_GUIDANCE_ICON_CLASS = cn(
+  "flex h-11 w-11 shrink-0 items-center justify-center rounded-full text-foreground/80",
+  ONBOARDING_PREVIEW_NEUTRAL_SURFACE_CLASS,
+);
 
 const BACKUP_OPTION_CLASS =
   "flex min-h-48 w-full flex-col items-start justify-start px-6 py-5 text-left text-foreground";
@@ -50,10 +73,16 @@ type BackupStepProps = {
   direction: OnboardingTransitionDirection;
   identityStorage?: IdentityStorage;
   onNext: () => void;
+  onOpenIdentityKeyHelp?: () => void;
   onOpenPasswordBackup: () => void;
   onShowOptions: () => void;
   optionsExpanded: boolean;
+  lockedBackupCreated?: boolean;
+  previewMode?: boolean;
   returningFromSecurity: boolean;
+  showPreviewBackupShortcut?: boolean;
+  /** Apply the experimental V3 copy and controls inside the safe preview. */
+  v3Presentation?: boolean;
 };
 
 /**
@@ -66,11 +95,17 @@ export function BackupStep({
   direction,
   identityStorage,
   onNext,
+  onOpenIdentityKeyHelp,
   onOpenPasswordBackup,
   onShowOptions,
   optionsExpanded,
+  lockedBackupCreated = false,
+  previewMode = false,
   returningFromSecurity,
+  showPreviewBackupShortcut = true,
+  v3Presentation = false,
 }: BackupStepProps) {
+  const cardLayout = useOnboardingPreviewCardLayout();
   const reduceMotion = useReducedMotion() ?? false;
   const [created, setCreated] = React.useState(introPlayed || reduceMotion);
   const [copyState, setCopyState] = React.useState<
@@ -79,6 +114,10 @@ export function BackupStep({
   const [copyError, setCopyError] = React.useState<string | null>(null);
   const [nsec, setNsec] = React.useState<string | null>(null);
   const [isRevealed, setIsRevealed] = React.useState(false);
+  const canUseSpoilerParticles = React.useMemo(
+    () => v3Presentation && supportsSpoilerParticles(),
+    [v3Presentation],
+  );
   const cancelledRef = React.useRef(false);
   const copiedTimerRef = React.useRef<number | null>(null);
 
@@ -112,7 +151,7 @@ export function BackupStep({
     setCopyState("copying");
     setCopyError(null);
     try {
-      const value = nsec ?? (await getNsec());
+      const value = nsec ?? (previewMode ? PREVIEW_KEY_TEXT : await getNsec());
       await writeTextToClipboard(value);
       if (cancelledRef.current) return;
       setCopyState("copied");
@@ -128,7 +167,7 @@ export function BackupStep({
         err instanceof Error ? err.message : "Failed to retrieve private key.",
       );
     }
-  }, [nsec]);
+  }, [nsec, previewMode]);
 
   const toggleReveal = React.useCallback(async () => {
     if (isRevealed) {
@@ -138,7 +177,7 @@ export function BackupStep({
     setCopyError(null);
     try {
       // The raw key enters the DOM only after this explicit reveal action.
-      const value = nsec ?? (await getNsec());
+      const value = nsec ?? (previewMode ? PREVIEW_KEY_TEXT : await getNsec());
       if (cancelledRef.current) return;
       setNsec(value);
       setIsRevealed(true);
@@ -148,7 +187,7 @@ export function BackupStep({
         err instanceof Error ? err.message : "Failed to retrieve private key.",
       );
     }
-  }, [isRevealed, nsec]);
+  }, [isRevealed, nsec, previewMode]);
 
   // Fixed-length decorative mask (nsec keys are 63 chars) so no key material
   // is fetched just to render the blurred row. Bullets are joined with a
@@ -180,132 +219,226 @@ export function BackupStep({
   if (optionsExpanded) {
     return (
       <OnboardingSlideTransition
-        className="flex min-h-0 w-full flex-col items-center"
+        className={cn(
+          "flex min-h-0 w-full flex-col",
+          cardLayout ? "items-stretch" : "items-center",
+        )}
         data-testid="onboarding-page-backup-options"
         direction={direction}
         transitionKey={`backup-options-${direction}`}
       >
-        <div className="flex w-full max-w-140 shrink-0 flex-col text-center">
+        <div
+          className={cn(
+            "mx-auto flex w-full shrink-0 flex-col",
+            cardLayout ? "max-w-[500px] text-left" : "max-w-140 text-center",
+          )}
+        >
           <h1 className="text-title font-normal text-foreground">
-            Backup options
+            {v3Presentation
+              ? "Create a private identity key"
+              : "Backup options"}
           </h1>
-          <p className="mt-5 text-sm leading-6 text-foreground/75">
-            Your identity key works like a password for your Buzz account. Keep
-            a copy somewhere safe. You can create a backup file and lock it with
-            a password you can remember.
-          </p>
+          {v3Presentation ? (
+            <div className={cardLayout ? "mt-2" : "mt-5"}>
+              <p className="text-sm leading-6 text-foreground/75">
+                This key will be how you log into Buzz. You can use it across
+                Buzz communities and other platforms.
+              </p>
+              <div className="mt-2">
+                <IdentityKeyHelpDialog
+                  inline
+                  onPreviewOpen={onOpenIdentityKeyHelp}
+                  previewMode={previewMode}
+                  v3Presentation={v3Presentation}
+                />
+              </div>
+            </div>
+          ) : (
+            <p className="mt-5 text-sm leading-6 text-foreground/75">
+              Your identity key works like a password for your Buzz account.
+              Keep a copy somewhere safe. You can create a backup file and lock
+              it with a password you can remember.
+            </p>
+          )}
         </div>
 
-        <div className="flex w-full max-w-260 flex-1 flex-col justify-center py-10">
-          <div
-            className="grid w-full grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3"
-            data-testid="backup-options"
-          >
+        {v3Presentation ? (
+          <div className="mx-auto flex w-full max-w-[500px] flex-1 items-center py-10">
             <div
-              className={cn(BACKUP_OPTION_CLASS, "md:col-span-2 lg:col-span-1")}
-              data-testid="backup-option-panel"
+              className="w-full space-y-6"
+              data-testid="onboarding-preview-key-guidance"
             >
-              <span className="text-lg font-medium">{storageTitle}</span>
-              <span className="mt-3 block text-sm leading-6 text-foreground/65">
-                {storageDescription}
-              </span>
+              <div className="flex min-h-14 items-center gap-4 text-left">
+                <span className={V3_KEY_GUIDANCE_ICON_CLASS}>
+                  <ShieldCheck className="h-5 w-5" aria-hidden="true" />
+                </span>
+                <p className="text-base leading-6 text-foreground">
+                  Stored securely on this device
+                </p>
+              </div>
+              <div className="flex min-h-14 items-center gap-4 text-left">
+                <span className={V3_KEY_GUIDANCE_ICON_CLASS}>
+                  <CircleSlash2 className="h-5 w-5" aria-hidden="true" />
+                </span>
+                <p className="text-base leading-6 text-foreground">
+                  Never share it—anyone with this key can sign in as you
+                </p>
+              </div>
+              <div className="flex min-h-14 items-center gap-4 text-left">
+                <span className={V3_KEY_GUIDANCE_ICON_CLASS}>
+                  <HardDriveDownload className="h-5 w-5" aria-hidden="true" />
+                </span>
+                <p className="text-base leading-6 text-foreground">
+                  Use a secure backup to recover your account
+                </p>
+              </div>
             </div>
-
+          </div>
+        ) : (
+          <div className="flex w-full max-w-260 flex-1 flex-col justify-center py-10">
             <div
-              className={BACKUP_OPTION_CLASS}
-              data-testid="backup-option-panel"
+              className="grid w-full grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3"
+              data-testid="backup-options"
             >
-              <span className="text-lg font-medium">
-                Saved in your password manager
-              </span>
-              <span className="mt-3 block text-sm leading-6 text-foreground/65">
-                Copy your identity key, then save it in a password manager like
-                1Password.
-              </span>
-              <Button
+              <div
                 className={cn(
-                  ONBOARDING_SECONDARY_CTA_CLASS,
-                  "mt-5 w-fit gap-2 px-5",
+                  BACKUP_OPTION_CLASS,
+                  "md:col-span-2 lg:col-span-1",
                 )}
-                data-testid="backup-copy-key"
-                disabled={copyState === "copying"}
-                onClick={() => void copyKeyToClipboard()}
-                type="button"
-                variant="ghost"
+                data-testid="backup-option-panel"
               >
-                {copyState === "copying" ? (
-                  <Spinner className="h-4 w-4 border-2" />
-                ) : copyState === "copied" ? (
-                  <Check className="h-4 w-4" aria-hidden="true" />
-                ) : (
-                  <Copy className="h-4 w-4" aria-hidden="true" />
-                )}
-                {copyState === "copying"
-                  ? "Copying…"
-                  : copyState === "copied"
-                    ? "Copied to clipboard"
-                    : "Copy to clipboard"}
-              </Button>
-            </div>
+                <span className="text-lg font-medium">{storageTitle}</span>
+                <span className="mt-3 block text-sm leading-6 text-foreground/65">
+                  {storageDescription}
+                </span>
+              </div>
 
-            <div
-              className={BACKUP_OPTION_CLASS}
-              data-testid="backup-option-panel"
-            >
-              <span className="text-lg font-medium">
-                Locked in a backup file
-              </span>
-              <span className="mt-3 block text-sm leading-6 text-foreground/65">
-                Create a backup file and choose a password you can remember.
-                You’ll need both to restore your account.
-              </span>
-              <Button
-                className={cn(
-                  ONBOARDING_SECONDARY_CTA_CLASS,
-                  "mt-5 w-fit gap-2 px-5",
-                )}
-                data-testid="backup-option-password"
-                onClick={onOpenPasswordBackup}
-                type="button"
-                variant="ghost"
+              <div
+                className={BACKUP_OPTION_CLASS}
+                data-testid="backup-option-panel"
+              >
+                <span className="text-lg font-medium">
+                  Saved in your password manager
+                </span>
+                <span className="mt-3 block text-sm leading-6 text-foreground/65">
+                  Copy your identity key, then save it in a password manager
+                  like 1Password.
+                </span>
+                <Button
+                  className={cn(
+                    ONBOARDING_SECONDARY_CTA_CLASS,
+                    "mt-5 w-fit gap-2 px-5",
+                  )}
+                  data-testid="backup-copy-key"
+                  disabled={copyState === "copying"}
+                  onClick={() => void copyKeyToClipboard()}
+                  type="button"
+                  variant="ghost"
+                >
+                  {copyState === "copying" ? (
+                    <Spinner className="h-4 w-4 border-2" />
+                  ) : copyState === "copied" ? (
+                    <Check className="h-4 w-4" aria-hidden="true" />
+                  ) : (
+                    <Copy className="h-4 w-4" aria-hidden="true" />
+                  )}
+                  {copyState === "copying"
+                    ? "Copying…"
+                    : copyState === "copied"
+                      ? "Copied to clipboard"
+                      : "Copy to clipboard"}
+                </Button>
+              </div>
+
+              <div
+                className={BACKUP_OPTION_CLASS}
+                data-testid="backup-option-panel"
               >
-                <ShieldCheck className="h-5 w-5" aria-hidden="true" />
-                Create locked backup
-              </Button>
+                <span className="text-lg font-medium">
+                  Locked in a backup file
+                </span>
+                <span className="mt-3 block text-sm leading-6 text-foreground/65">
+                  Create a backup file and choose a password you can remember.
+                  You’ll need both to restore your account.
+                </span>
+                <Button
+                  className={cn(
+                    ONBOARDING_SECONDARY_CTA_CLASS,
+                    "mt-5 w-fit gap-2 px-5",
+                  )}
+                  data-testid="backup-option-password"
+                  onClick={onOpenPasswordBackup}
+                  type="button"
+                  variant="ghost"
+                >
+                  {lockedBackupCreated ? (
+                    <Check className="h-5 w-5" aria-hidden="true" />
+                  ) : (
+                    <ShieldCheck className="h-5 w-5" aria-hidden="true" />
+                  )}
+                  {lockedBackupCreated
+                    ? "Created locked backup"
+                    : "Create locked backup"}
+                </Button>
+              </div>
             </div>
+
+            {copyError ? (
+              <p
+                className="mt-4 text-center text-sm text-destructive"
+                data-testid="backup-copy-error"
+              >
+                Could not retrieve your private key: {copyError}. You can
+                continue and find it later in Settings &gt; Profile &gt;
+                Identity.
+              </p>
+            ) : null}
           </div>
+        )}
 
-          {copyError ? (
-            <p
-              className="mt-4 text-center text-sm text-destructive"
-              data-testid="backup-copy-error"
+        {v3Presentation ? (
+          <OnboardingFooter>
+            <Button
+              className={ONBOARDING_PRIMARY_CTA_CLASS}
+              data-testid="onboarding-preview-private-key-next"
+              onClick={onNext}
+              type="button"
             >
-              Could not retrieve your private key: {copyError}. You can continue
-              and find it later in Settings &gt; Profile &gt; Identity.
-            </p>
-          ) : null}
-        </div>
+              Create my private key
+            </Button>
+          </OnboardingFooter>
+        ) : null}
       </OnboardingSlideTransition>
     );
   }
 
   return (
     <OnboardingSlideTransition
-      className="flex min-h-0 w-full flex-col items-center"
+      className={cn(
+        "flex min-h-0 w-full flex-col",
+        cardLayout ? "items-stretch" : "items-center",
+      )}
       data-testid="onboarding-page-backup"
       direction={direction}
       transitionKey={`backup-${direction}-${returningFromSecurity ? "security" : "line"}`}
     >
-      <div className="flex w-full max-w-[500px] shrink-0 flex-col text-center">
+      <div
+        className={cn(
+          "flex w-full max-w-[500px] shrink-0 flex-col",
+          cardLayout ? "text-left" : "text-center",
+        )}
+      >
         {/* Plain string concat: cn()'s tailwind-merge misreads the custom
             text-title size token as conflicting with text-foreground. */}
         <h1
           className={`text-title font-normal text-foreground ${REVEAL_ANIMATION_CLASS}`}
           key={created ? "created" : "creating"}
         >
-          {created
-            ? "Your unique identity key has been created"
-            : "Creating your identity key"}
+          {created && v3Presentation
+            ? "Your private identity key"
+            : created
+              ? "Your unique identity key has been created"
+              : "Creating your identity key"}
         </h1>
         {created ? (
           <p
@@ -314,16 +447,22 @@ export function BackupStep({
               REVEAL_ANIMATION_CLASS,
             )}
           >
-            {introStorageDescription} You can continue now, or{" "}
-            <button
-              className="rounded-sm font-medium underline decoration-foreground/40 underline-offset-4 transition-colors hover:decoration-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-              data-testid="backup-options-link"
-              onClick={onShowOptions}
-              type="button"
-            >
-              review backup options
-            </button>{" "}
-            for ways to restore your account.
+            {v3Presentation ? (
+              "Don’t share this key. Anyone who has it can access your account."
+            ) : (
+              <>
+                {introStorageDescription} You can continue now, or{" "}
+                <button
+                  className="rounded-sm font-medium underline decoration-foreground/40 underline-offset-4 transition-colors hover:decoration-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                  data-testid="backup-options-link"
+                  onClick={onShowOptions}
+                  type="button"
+                >
+                  review backup options
+                </button>{" "}
+                for ways to restore your account.
+              </>
+            )}
           </p>
         ) : null}
       </div>
@@ -344,43 +483,101 @@ export function BackupStep({
       ) : (
         <div
           className={cn(
-            "flex w-full max-w-[1040px] flex-1 flex-col justify-center py-10",
+            "flex w-full max-w-[1040px] flex-1 flex-col justify-center",
+            cardLayout ? "py-6" : "py-10",
             REVEAL_ANIMATION_CLASS,
           )}
         >
           <div className="w-full">
-            <Card className="px-8 py-6" variant="textured">
-              <div className="mx-auto flex w-full min-w-0 max-w-[832px] items-center gap-4">
-                <div className="min-w-0 flex-1">
-                  <p
-                    className={cn(
-                      ONBOARDING_KEY_TEXT_CLASS,
-                      isRevealed && nsec
-                        ? "select-text"
-                        : "select-none blur-[4px]",
+            <Card
+              className={cn("py-6", cardLayout ? "px-0" : "px-8")}
+              variant="textured"
+            >
+              <div className="mx-auto w-full min-w-0 max-w-[832px]">
+                <div className="flex items-center gap-4">
+                  <div className="min-w-0 flex-1">
+                    {canUseSpoilerParticles ? (
+                      <div
+                        className="buzz-onboarding-private-key-spoiler"
+                        data-testid="backup-key-spoiler"
+                      >
+                        <SpoilerInline block revealOnHover>
+                          <p
+                            className={cn(
+                              ONBOARDING_KEY_TEXT_CLASS,
+                              v3Presentation && "buzz-onboarding-key-text-v3",
+                              "select-text",
+                            )}
+                            data-testid="backup-key-value"
+                          >
+                            {PREVIEW_KEY_TEXT}
+                          </p>
+                        </SpoilerInline>
+                      </div>
+                    ) : (
+                      <p
+                        className={cn(
+                          ONBOARDING_KEY_TEXT_CLASS,
+                          v3Presentation && "buzz-onboarding-key-text-v3",
+                          isRevealed && nsec
+                            ? "select-text"
+                            : "select-none blur-[4px]",
+                        )}
+                        data-testid="backup-key-value"
+                      >
+                        {isRevealed && nsec ? nsec : maskedKey}
+                      </p>
                     )}
-                    data-testid="backup-key-value"
-                  >
-                    {isRevealed && nsec ? nsec : maskedKey}
-                  </p>
-                </div>
-                <Button
-                  aria-label={
-                    isRevealed ? "Hide private key" : "Reveal private key"
-                  }
-                  className="h-10 w-10 shrink-0 text-muted-foreground hover:text-foreground"
-                  data-testid="backup-key-reveal-toggle"
-                  onClick={() => void toggleReveal()}
-                  size="icon"
-                  type="button"
-                  variant="ghost"
-                >
-                  {isRevealed ? (
-                    <EyeOff className="h-6 w-6" aria-hidden="true" />
-                  ) : (
-                    <Eye className="h-6 w-6" aria-hidden="true" />
+                  </div>
+                  {canUseSpoilerParticles ? null : (
+                    <Button
+                      aria-label={
+                        isRevealed ? "Hide private key" : "Reveal private key"
+                      }
+                      className="h-10 w-10 shrink-0 text-muted-foreground hover:text-foreground"
+                      data-testid="backup-key-reveal-toggle"
+                      onClick={() => void toggleReveal()}
+                      size="icon"
+                      type="button"
+                      variant="ghost"
+                    >
+                      {isRevealed ? (
+                        <EyeOff className="h-6 w-6" aria-hidden="true" />
+                      ) : (
+                        <Eye className="h-6 w-6" aria-hidden="true" />
+                      )}
+                    </Button>
                   )}
-                </Button>
+                </div>
+
+                {v3Presentation ? (
+                  <div className="mt-4 flex justify-start">
+                    <Button
+                      className={cn(
+                        ONBOARDING_SECONDARY_CTA_CLASS,
+                        "-ml-5 gap-2 bg-transparent px-5 text-foreground/80 hover:bg-[#e2e2e2]/50 hover:text-foreground",
+                      )}
+                      data-testid="backup-copy-key"
+                      disabled={copyState === "copying"}
+                      onClick={() => void copyKeyToClipboard()}
+                      type="button"
+                      variant="ghost"
+                    >
+                      {copyState === "copying" ? (
+                        <Spinner className="h-4 w-4 border-2" />
+                      ) : copyState === "copied" ? (
+                        <Check className="h-4 w-4" aria-hidden="true" />
+                      ) : (
+                        <Copy className="h-4 w-4" aria-hidden="true" />
+                      )}
+                      {copyState === "copying"
+                        ? "Copying…"
+                        : copyState === "copied"
+                          ? "Copied to clipboard"
+                          : "Copy to clipboard"}
+                    </Button>
+                  </div>
+                ) : null}
               </div>
             </Card>
 
@@ -395,18 +592,49 @@ export function BackupStep({
               </p>
             ) : null}
 
-            <p className="mx-auto mt-5 flex max-w-[440px] items-start justify-center gap-1.5 text-center text-xs leading-5 text-[var(--buzz-onboarding-backup-ink)]">
-              <Info className="mt-0.5 h-3.5 w-3.5 shrink-0" />
-              <span>
-                Never share your private key. Anyone with this key can
-                impersonate you and access everything in your account.
-              </span>
-            </p>
+            {!v3Presentation ? (
+              <p className="mx-auto mt-5 flex max-w-[440px] items-start justify-center gap-1.5 text-center text-xs leading-5 text-[var(--buzz-onboarding-backup-ink)]">
+                <Info className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+                <span>
+                  Never share your private key. Anyone with this key can
+                  impersonate you and access everything in your account.
+                </span>
+              </p>
+            ) : null}
           </div>
         </div>
       )}
 
-      <OnboardingFooter className={REVEAL_ANIMATION_CLASS}>
+      <OnboardingFooter className={cn(REVEAL_ANIMATION_CLASS, "flex-nowrap")}>
+        {v3Presentation && created ? (
+          <Button
+            className={cn(
+              ONBOARDING_SECONDARY_CTA_CLASS,
+              cardLayout && ONBOARDING_PREVIEW_SECONDARY_CTA_CLASS,
+              "px-4",
+            )}
+            data-testid="backup-option-password"
+            onClick={onOpenPasswordBackup}
+            type="button"
+            variant="ghost"
+          >
+            {lockedBackupCreated
+              ? "Created locked backup"
+              : "Create locked backup"}
+          </Button>
+        ) : null}
+        {v3Presentation && created && showPreviewBackupShortcut ? (
+          <Button
+            className={cn(ONBOARDING_SECONDARY_CTA_CLASS, "gap-2")}
+            data-testid="backup-options-link"
+            onClick={onShowOptions}
+            type="button"
+            variant="ghost"
+          >
+            <Download className="h-4 w-4" aria-hidden="true" />
+            Back up your identity
+          </Button>
+        ) : null}
         <Button
           className={ONBOARDING_PRIMARY_CTA_CLASS}
           data-testid="onboarding-next"
@@ -414,7 +642,7 @@ export function BackupStep({
           onClick={onNext}
           type="button"
         >
-          Next
+          {v3Presentation ? "I’ve saved my key" : "Next"}
         </Button>
       </OnboardingFooter>
     </OnboardingSlideTransition>
diff --git a/desktop/src/features/onboarding/ui/BackupTestFlow.tsx b/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
index 9370d5c0614..275461f74b1 100644
--- a/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
+++ b/desktop/src/features/onboarding/ui/BackupTestFlow.tsx
@@ -1,4 +1,14 @@
-import { Check, CircleHelp, Eye, EyeOff, FileKey2, FileUp } from "lucide-react";
+import {
+  Check,
+  ChevronRight,
+  CircleHelp,
+  Download,
+  Eye,
+  EyeOff,
+  FileCheck2,
+  FileKey2,
+  FileUp,
+} from "lucide-react";
 import { motion, useReducedMotion } from "motion/react";
 import * as React from "react";
 import { createPortal } from "react-dom";
@@ -11,13 +21,19 @@ import {
 import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
 import { Card } from "@/shared/ui/card";
-import { Input } from "@/shared/ui/input";
 import { PubKey } from "@/shared/ui/PubKey";
 import { Spinner } from "@/shared/ui/spinner";
 import {
+  ONBOARDING_PRIMARY_CTA_CLASS,
   ONBOARDING_SECURITY_PRIMARY_CTA_CLASS,
   ONBOARDING_SECONDARY_CTA_CLASS,
 } from "./OnboardingChrome";
+import { OnboardingPreviewInput } from "./OnboardingPreviewInput";
+import { useOnboardingPreviewCardLayout } from "./OnboardingPreviewShell";
+import {
+  ONBOARDING_PREVIEW_CARD_INPUT_CLASS,
+  ONBOARDING_PREVIEW_SECONDARY_CTA_CLASS,
+} from "./onboardingPreviewCardStyles";
 
 type BackupTestStage = "drop" | "password" | "success";
 
@@ -65,6 +81,18 @@ type BackupTestFlowProps = {
   onProgressChange: React.Dispatch<React.SetStateAction<BackupTestProgress>>;
   /** Fired once when the user completes the test successfully. */
   onVerified?: () => void;
+  /** Replace native verification and identity reads in the dev-only preview. */
+  previewMode?: boolean;
+  /** Apply the experimental V3 presentation inside the safe preview. */
+  v3Presentation?: boolean;
+};
+
+const PREVIEW_BACKUP_FILENAME = "Buzz identity backup.ncryptsec";
+const PREVIEW_PRIVATE_KEY = `nsec1${"q".repeat(58)}`;
+const PREVIEW_VERIFICATION: BackupVerification = {
+  matchesCurrentIdentity: true,
+  npub: `npub1${"q".repeat(58)}`,
+  pubkey: "e5ebc6cdb579be112e336cc319b5989b4bb6af11786ea90dbe52b5f08d741b34",
 };
 
 const BURST_EMOJIS = ["🎉", "✨", "🐝", "🍯", "🔑", "💛"] as const;
@@ -204,8 +232,24 @@ export function BackupTestFlow({
   progress,
   onProgressChange,
   onVerified,
+  previewMode = false,
+  v3Presentation = false,
 }: BackupTestFlowProps) {
+  const cardLayout = useOnboardingPreviewCardLayout();
   const reduceMotion = useReducedMotion() ?? false;
+  const spotlightPrimaryActionClass = cardLayout
+    ? ONBOARDING_PRIMARY_CTA_CLASS
+    : ONBOARDING_SECURITY_PRIMARY_CTA_CLASS;
+  const stageEntrance = reduceMotion
+    ? false
+    : cardLayout
+      ? { opacity: 0 }
+      : { opacity: 0, y: 10 };
+  const successCopyEntrance = reduceMotion
+    ? false
+    : cardLayout
+      ? { opacity: 0 }
+      : { opacity: 0, y: 8 };
   const { stage, fileName, ncryptsec, result } = progress;
   // True while a file drag is anywhere over the window — the drop overlay
   // takes over the host surface only for the duration of the drag.
@@ -318,7 +362,9 @@ export function BackupTestFlow({
     // the typed password never lingers in the field.
     setAttempt("");
     try {
-      const verified = await verifyNcryptsecBackup(ncryptsec, password);
+      const verified = previewMode
+        ? PREVIEW_VERIFICATION
+        : await verifyNcryptsecBackup(ncryptsec, password);
       if (!mountedRef.current || requestId !== requestRef.current) return;
       onProgressChange((prev) => ({
         ...prev,
@@ -335,7 +381,14 @@ export function BackupTestFlow({
       if (mountedRef.current && requestId === requestRef.current)
         setIsVerifying(false);
     }
-  }, [attempt, isVerifying, ncryptsec, onProgressChange, onVerified]);
+  }, [
+    attempt,
+    isVerifying,
+    ncryptsec,
+    onProgressChange,
+    onVerified,
+    previewMode,
+  ]);
 
   const toggleSuccessNsec = React.useCallback(async () => {
     if (isSuccessNsecRevealed) {
@@ -349,7 +402,7 @@ export function BackupTestFlow({
     setIsLoadingSuccessNsec(true);
     setSuccessNsecError(null);
     try {
-      const value = await getNsec();
+      const value = previewMode ? PREVIEW_PRIVATE_KEY : await getNsec();
       if (!mountedRef.current) return;
       setSuccessNsec(value);
       setIsSuccessNsecRevealed(true);
@@ -361,9 +414,23 @@ export function BackupTestFlow({
     } finally {
       if (mountedRef.current) setIsLoadingSuccessNsec(false);
     }
-  }, [isSuccessNsecRevealed, successNsec]);
+  }, [isSuccessNsecRevealed, previewMode, successNsec]);
 
   const isSpotlight = variant === "spotlight";
+  const selectBackupFile = React.useCallback(() => {
+    if (previewMode && expectedNcryptsec) {
+      setError(null);
+      setAttempt("");
+      onProgressChange({
+        stage: "password",
+        fileName: PREVIEW_BACKUP_FILENAME,
+        ncryptsec: expectedNcryptsec,
+        result: null,
+      });
+      return;
+    }
+    fileInputRef.current?.click();
+  }, [expectedNcryptsec, onProgressChange, previewMode]);
 
   if (stage === "success" && result) {
     // The onboarding ceremony pins the exact file, so a success there is by
@@ -389,8 +456,8 @@ export function BackupTestFlow({
           <Check aria-hidden="true" className="h-8 w-8" strokeWidth={3} />
         </motion.div>
         <motion.div
-          animate={{ opacity: 1, y: 0 }}
-          initial={reduceMotion ? false : { opacity: 0, y: 8 }}
+          animate={cardLayout ? { opacity: 1 } : { opacity: 1, y: 0 }}
+          initial={successCopyEntrance}
           transition={
             reduceMotion ? { duration: 0 } : { delay: 0.15, duration: 0.35 }
           }
@@ -499,9 +566,9 @@ export function BackupTestFlow({
     >
       {stage === "drop" ? (
         <motion.div
-          animate={{ opacity: 1, y: 0 }}
+          animate={cardLayout ? { opacity: 1 } : { opacity: 1, y: 0 }}
           className="relative space-y-4"
-          initial={reduceMotion ? false : { opacity: 0, y: 10 }}
+          initial={stageEntrance}
           key="drop"
           transition={{ duration: reduceMotion ? 0 : 0.3, ease: "easeOut" }}
         >
@@ -519,19 +586,69 @@ export function BackupTestFlow({
             tabIndex={-1}
             type="file"
           />
-          <Button
-            className={cn(
-              "mx-auto",
-              isSpotlight
-                ? ONBOARDING_SECURITY_PRIMARY_CTA_CLASS
-                : "h-9 px-6 text-primary-foreground",
-            )}
-            data-testid="backup-test-dropzone"
-            onClick={() => fileInputRef.current?.click()}
-            type="button"
-          >
-            <span className="font-medium text-sm">Select your backup file</span>
-          </Button>
+          {v3Presentation && cardLayout ? (
+            <div className="-mx-2 flex w-[calc(100%+1rem)] flex-col gap-2">
+              <Button
+                className="group h-auto min-h-14 w-full justify-start gap-3 rounded-xl px-2 py-2 text-left text-sm font-medium text-foreground shadow-none hover:bg-foreground/[0.04] hover:text-foreground focus-visible:ring-2 focus-visible:ring-foreground/20"
+                data-testid="backup-test-dropzone"
+                onClick={selectBackupFile}
+                type="button"
+                variant="ghost"
+              >
+                <span className="flex size-8 shrink-0 items-center justify-start">
+                  <FileCheck2 aria-hidden className="!size-6" />
+                </span>
+                <span className="min-w-0 flex-1 truncate">
+                  Test your backup
+                </span>
+                <span className="ml-auto flex size-10 shrink-0 items-center justify-end">
+                  <ChevronRight
+                    aria-hidden
+                    className="size-4 text-muted-foreground transition-colors duration-150 ease-out group-hover:text-foreground motion-reduce:transition-none"
+                  />
+                </span>
+              </Button>
+              {onSaveCopy ? (
+                <Button
+                  className="group h-auto min-h-14 w-full justify-start gap-3 rounded-xl px-2 py-2 text-left text-sm font-medium text-foreground shadow-none hover:bg-foreground/[0.04] hover:text-foreground focus-visible:ring-2 focus-visible:ring-foreground/20"
+                  data-testid="encrypted-backup-save-copy"
+                  disabled={isSaving}
+                  onClick={onSaveCopy}
+                  type="button"
+                  variant="ghost"
+                >
+                  <span className="flex size-8 shrink-0 items-center justify-start">
+                    <Download aria-hidden className="!size-6" />
+                  </span>
+                  <span className="min-w-0 flex-1 truncate">
+                    Download backup again
+                  </span>
+                  <span className="ml-auto flex size-10 shrink-0 items-center justify-end">
+                    <ChevronRight
+                      aria-hidden
+                      className="size-4 text-muted-foreground transition-colors duration-150 ease-out group-hover:text-foreground motion-reduce:transition-none"
+                    />
+                  </span>
+                </Button>
+              ) : null}
+            </div>
+          ) : (
+            <Button
+              className={cn(
+                "mx-auto",
+                isSpotlight
+                  ? spotlightPrimaryActionClass
+                  : "h-9 px-6 text-primary-foreground",
+              )}
+              data-testid="backup-test-dropzone"
+              onClick={selectBackupFile}
+              type="button"
+            >
+              <span className="font-medium text-sm">
+                Select your backup file
+              </span>
+            </Button>
+          )}
           {isWindowDragging ? (
             /*
              * Composer-style takeover: fills the nearest positioned host
@@ -570,13 +687,16 @@ export function BackupTestFlow({
               {error}
             </p>
           ) : null}
-          {onSaveCopy ? (
+          {onSaveCopy && !(v3Presentation && cardLayout) ? (
             <div className="flex flex-col items-center gap-2">
               <Button
                 className={cn(
                   "gap-1.5",
                   isSpotlight
-                    ? ONBOARDING_SECONDARY_CTA_CLASS
+                    ? cn(
+                        ONBOARDING_SECONDARY_CTA_CLASS,
+                        cardLayout && ONBOARDING_PREVIEW_SECONDARY_CTA_CLASS,
+                      )
                     : "h-9 rounded-full bg-foreground/10 px-6 text-sm hover:bg-foreground/15",
                 )}
                 data-testid="encrypted-backup-save-copy"
@@ -596,16 +716,19 @@ export function BackupTestFlow({
         </motion.div>
       ) : (
         <motion.div
-          animate={{ opacity: 1, y: 0 }}
+          animate={cardLayout ? { opacity: 1 } : { opacity: 1, y: 0 }}
           className="space-y-4"
-          initial={reduceMotion ? false : { opacity: 0, y: 10 }}
+          initial={stageEntrance}
           key="password"
           transition={{ duration: reduceMotion ? 0 : 0.3, ease: "easeOut" }}
         >
           {(() => {
             const fileRow = (
               <div
-                className="flex max-w-full items-center gap-3 rounded-2xl border border-foreground/15 bg-foreground/10 px-4 py-3 text-foreground shadow-sm animate-in fade-in slide-in-from-bottom-1 duration-300 motion-reduce:animate-none"
+                className={cn(
+                  "flex max-w-full items-center gap-3 rounded-2xl border border-foreground/15 bg-foreground/10 px-4 py-3 text-foreground shadow-sm animate-in fade-in duration-300 motion-reduce:animate-none",
+                  !cardLayout && "slide-in-from-bottom-1",
+                )}
                 data-testid="backup-test-file-accepted"
               >
                 <span className="flex size-9 shrink-0 items-center justify-center rounded-xl bg-foreground/10">
@@ -621,13 +744,18 @@ export function BackupTestFlow({
             );
             const passwordField = (
               <div className="relative w-full">
-                <Input
+                <OnboardingPreviewInput
                   aria-label="Backup password"
                   autoComplete="off"
                   className={cn(
                     "font-mono",
                     isSpotlight
-                      ? "h-14 rounded-2xl border-black/20 bg-white px-14 text-center text-lg text-black/80 shadow-none placeholder:text-black/55 focus-visible:ring-black/35"
+                      ? cardLayout
+                        ? cn(
+                            ONBOARDING_PREVIEW_CARD_INPUT_CLASS,
+                            "pr-12 font-mono",
+                          )
+                        : "h-14 rounded-2xl border-black/20 bg-white px-14 text-center text-lg text-black/80 shadow-none placeholder:text-black/55 focus-visible:ring-black/35"
                       : "h-10 bg-background pr-10",
                   )}
                   data-testid="backup-test-password"
@@ -639,6 +767,7 @@ export function BackupTestFlow({
                       void handleVerify();
                     }
                   }}
+                  smooth={cardLayout}
                   placeholder="Your backup password"
                   ref={passwordInputRef}
                   type={isRevealed ? "text" : "password"}
@@ -711,7 +840,7 @@ export function BackupTestFlow({
                 className={cn(
                   "font-medium",
                   isSpotlight
-                    ? ONBOARDING_SECURITY_PRIMARY_CTA_CLASS
+                    ? spotlightPrimaryActionClass
                     : "h-9 px-6 text-sm text-primary-foreground",
                 )}
                 data-testid="backup-test-verify"
diff --git a/desktop/src/features/onboarding/ui/CommunityOnboardingFlow.tsx b/desktop/src/features/onboarding/ui/CommunityOnboardingFlow.tsx
index 7897e51ffda..12258352b73 100644
--- a/desktop/src/features/onboarding/ui/CommunityOnboardingFlow.tsx
+++ b/desktop/src/features/onboarding/ui/CommunityOnboardingFlow.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useQueryClient } from "@tanstack/react-query";
-import { Plus, Users } from "lucide-react";
+import { Users } from "lucide-react";
 
 import {
   markCommunityOnboardingComplete,
@@ -17,10 +17,6 @@ import { useAvatarPresentation } from "@/features/profile/avatarPresentationStor
 import { registerAvatarWhenReady } from "@/features/profile/avatarProfileSync";
 import { profileQueryKey } from "@/features/profile/hooks";
 import { ProfileAvatar } from "@/features/profile/ui/ProfileAvatar";
-import {
-  parseEmojiAvatarDataUrl,
-  ProfileAvatarEditor,
-} from "@/features/profile/ui/ProfileAvatarEditor";
 import { getProfile, updateProfile } from "@/shared/api/tauriProfiles";
 import { getIdentity, importIdentity } from "@/shared/api/tauriIdentity";
 import { listPersonas } from "@/shared/api/tauriPersonas";
@@ -29,8 +25,6 @@ import type { AgentPersona } from "@/shared/api/types";
 import { cn } from "@/shared/lib/cn";
 import { useSystemColorScheme } from "@/shared/theme/useSystemColorScheme";
 import { Button } from "@/shared/ui/button";
-import { Dialog, DialogContent, DialogTitle } from "@/shared/ui/dialog";
-import { Input } from "@/shared/ui/input";
 import { MembershipDenied } from "./MembershipDenied";
 import { StartupWindowDragRegion } from "@/shared/ui/StartupWindowDragRegion";
 import {
@@ -42,6 +36,7 @@ import {
   type OnboardingTransitionDirection,
   OnboardingSlideTransition,
 } from "./OnboardingSlideTransition";
+import { CommunityProfileStage } from "./CommunityProfileStage";
 
 function isRelayMembershipDeniedError(error: unknown): boolean {
   if (!(error instanceof Error)) return false;
@@ -67,64 +62,6 @@ const ENTERING_CURTAIN_FADE_MS = 500;
  */
 const ENTERING_CURTAIN_MAX_WAIT_MS = 8_000;
 
-const NEUTRAL_EMOJI_PICKER_THEME_VARS = {
-  "--buzz-emoji-picker-rgb-background":
-    "var(--buzz-onboarding-emoji-picker-background)",
-  "--buzz-emoji-picker-rgb-color": "var(--buzz-onboarding-emoji-picker-color)",
-  "--buzz-emoji-picker-rgb-input": "var(--buzz-onboarding-emoji-picker-input)",
-} as React.CSSProperties;
-
-function AvatarCircle({
-  avatarUrl,
-  onClick,
-  previewName,
-  triggerRef,
-}: {
-  avatarUrl: string;
-  onClick: () => void;
-  previewName: string;
-  triggerRef?: React.Ref<HTMLButtonElement>;
-}) {
-  const emojiAvatar = parseEmojiAvatarDataUrl(avatarUrl);
-  const presentation = useAvatarPresentation(avatarUrl);
-  const hasAvatar =
-    avatarUrl.trim().length > 0 && presentation?.state !== "failed";
-
-  return (
-    <button
-      aria-label={hasAvatar ? "Change your avatar" : "Add an avatar"}
-      className="group block shrink-0 rounded-full"
-      data-testid="community-avatar-open"
-      onClick={onClick}
-      ref={triggerRef}
-      type="button"
-    >
-      {emojiAvatar ? (
-        <span
-          className="flex h-36 w-36 items-center justify-center overflow-hidden rounded-full text-5xl shadow-xs"
-          style={{ backgroundColor: emojiAvatar.color }}
-        >
-          {emojiAvatar.emoji}
-        </span>
-      ) : hasAvatar ? (
-        <ProfileAvatar
-          avatarUrl={avatarUrl}
-          className="h-36 w-36 rounded-full text-4xl"
-          label={previewName}
-          testId="community-avatar-circle"
-        />
-      ) : (
-        <span
-          className="flex h-36 w-36 items-center justify-center rounded-full bg-white/30 text-[var(--buzz-onboarding-backup-ink)] transition-colors group-hover:bg-white/40"
-          data-testid="community-avatar-empty"
-        >
-          <Plus className="h-7 w-7" aria-hidden="true" />
-        </span>
-      )}
-    </button>
-  );
-}
-
 function LoadingDots({ label }: { label: string }) {
   return (
     <span
@@ -157,22 +94,10 @@ export function CommunityOnboardingFlow({
   const systemColorScheme = useSystemColorScheme();
   const [displayName, setDisplayName] = React.useState("");
   const [avatarUrl, setAvatarUrl] = React.useState("");
-  const [localAvatarPreviewUrl, setLocalAvatarPreviewUrl] = React.useState<
-    string | null
-  >(null);
-  const [avatarSquishKey, setAvatarSquishKey] = React.useState(0);
   const [transitionDirection, setTransitionDirection] =
     React.useState<OnboardingTransitionDirection>("forward");
   const avatarPresentation = useAvatarPresentation(avatarUrl);
   const [isUploadingAvatar, setIsUploadingAvatar] = React.useState(false);
-  const [isAvatarEditorOpen, setIsAvatarEditorOpen] = React.useState(false);
-  const [animatedPreviewEl, setAnimatedPreviewEl] =
-    React.useState<HTMLDivElement | null>(null);
-  const [isAnimatedPreviewActive, setIsAnimatedPreviewActive] =
-    React.useState(false);
-  const [animatedPreviewCaption, setAnimatedPreviewCaption] = React.useState<
-    string | null
-  >(null);
   const [starterPersonas, setStarterPersonas] = React.useState<AgentPersona[]>(
     [],
   );
@@ -185,14 +110,6 @@ export function CommunityOnboardingFlow({
   const [isCommunityChangeOpen, setIsCommunityChangeOpen] =
     React.useState(false);
   const [isCurtainFading, setIsCurtainFading] = React.useState(false);
-  const nameInputRef = React.useRef<HTMLInputElement | null>(null);
-  const avatarTriggerRef = React.useRef<HTMLButtonElement | null>(null);
-  const avatarEditorContentRef = React.useRef<HTMLDivElement | null>(null);
-  const [avatarEditorDialogHeight, setAvatarEditorDialogHeight] =
-    React.useState<number | null>(null);
-  const animateEmojiAvatarChange = React.useCallback(() => {
-    setAvatarSquishKey((key) => key + 1);
-  }, []);
 
   // Also fetch on "entering": the curtain is a fresh mount of this component,
   // so the team-intro fetch from the pre-curtain instance isn't in this state.
@@ -351,31 +268,6 @@ export function CommunityOnboardingFlow({
       });
   }, [isProfileStage]);
 
-  React.useLayoutEffect(() => {
-    if (isProfileStage && !isAvatarEditorOpen) {
-      nameInputRef.current?.focus();
-    }
-  }, [isAvatarEditorOpen, isProfileStage]);
-
-  React.useLayoutEffect(() => {
-    if (!isAvatarEditorOpen) {
-      setAvatarEditorDialogHeight(null);
-      return;
-    }
-
-    const content = avatarEditorContentRef.current;
-    if (!content) return;
-
-    const updateHeight = () => {
-      setAvatarEditorDialogHeight(content.getBoundingClientRect().height + 64);
-    };
-    updateHeight();
-
-    const resizeObserver = new ResizeObserver(updateHeight);
-    resizeObserver.observe(content);
-    return () => resizeObserver.disconnect();
-  }, [isAvatarEditorOpen]);
-
   if (!transaction) return null;
 
   if (isMembershipDenied) {
@@ -551,200 +443,17 @@ export function CommunityOnboardingFlow({
                 </div>
               </>
             ) : isProfileStage ? (
-              <>
-                <div
-                  className={cn(
-                    "flex min-h-0 w-full flex-1 flex-col transition-[filter,opacity] duration-200 ease-out",
-                    isAvatarEditorOpen &&
-                      "pointer-events-none opacity-45 blur-[3px]",
-                  )}
-                  data-testid="community-profile-main"
-                >
-                  <div className="shrink-0">
-                    <h1 className="text-title font-normal">
-                      Build your profile
-                    </h1>
-                    <p className="mx-auto mt-3 max-w-[380px] text-sm leading-6 text-foreground/80">
-                      Add a name and avatar. They’ll show up on your messages,
-                      reactions, and agent handoffs.
-                    </p>
-                  </div>
-                  <div className="flex min-h-0 w-full flex-1 flex-col items-center justify-center pt-8">
-                    <AvatarCircle
-                      avatarUrl={avatarUrl}
-                      onClick={() => setIsAvatarEditorOpen(true)}
-                      previewName={displayName.trim() || "Your profile"}
-                      triggerRef={avatarTriggerRef}
-                    />
-                    <label
-                      className="mt-7 block w-full max-w-[412px] text-left"
-                      htmlFor="community-display-name"
-                    >
-                      <span className="mb-2 block pl-4 text-sm text-foreground">
-                        Your username
-                      </span>
-                      <Input
-                        aria-label="Community username"
-                        autoCapitalize="none"
-                        autoComplete="username"
-                        autoCorrect="off"
-                        className="h-14 rounded-2xl border-[color:rgb(var(--buzz-onboarding-avatar-control-fg)_/_0.28)] bg-[rgb(var(--buzz-onboarding-avatar-dialog-bg)/0.95)] px-5 text-sm shadow-none placeholder:text-muted-foreground/60 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[color:rgb(var(--buzz-onboarding-avatar-control-fg)_/_0.5)] md:text-sm"
-                        data-testid="community-profile-name-key"
-                        disabled={isPending || isUploadingAvatar}
-                        id="community-display-name"
-                        onChange={(event) => setDisplayName(event.target.value)}
-                        placeholder="Enter your username here"
-                        ref={nameInputRef}
-                        spellCheck={false}
-                        type="text"
-                        value={displayName}
-                      />
-                    </label>
-                  </div>
-                  {transaction.error ? (
-                    <p className="mt-4 text-sm text-destructive">
-                      {transaction.error}
-                    </p>
-                  ) : null}
-                </div>
-                <OnboardingFooter
-                  className={cn(
-                    "transition-[filter,opacity] duration-200 ease-out",
-                    isAvatarEditorOpen &&
-                      "pointer-events-none opacity-45 blur-[3px]",
-                  )}
-                >
-                  <Button
-                    className={`${ONBOARDING_PRIMARY_CTA_CLASS} w-20`}
-                    data-testid="community-profile-next"
-                    disabled={
-                      !displayName.trim() || isPending || isUploadingAvatar
-                    }
-                    onClick={() => void saveProfile()}
-                    type="button"
-                  >
-                    Next
-                  </Button>
-                </OnboardingFooter>
-                <Dialog
-                  onOpenChange={(open) => setIsAvatarEditorOpen(open)}
-                  open={isAvatarEditorOpen}
-                >
-                  <DialogContent
-                    className="buzz-onboarding-neutral-theme w-[min(calc(100vw-2rem),920px)] max-w-[920px] gap-0 overflow-hidden rounded-[18px] bg-[rgb(var(--buzz-onboarding-avatar-dialog-bg))] px-8 pb-6 pt-10 text-sm text-foreground shadow-[0_28px_90px_rgb(var(--buzz-onboarding-avatar-dialog-shadow)_/_0.28),0_8px_28px_rgb(var(--buzz-onboarding-avatar-dialog-shadow)_/_0.18)] transition-[height] duration-[250ms] ease-out"
-                    closeButtonClassName="right-6 top-6 h-10 w-10 rounded-full bg-[rgb(var(--buzz-onboarding-avatar-action-bg))] text-[rgb(var(--buzz-onboarding-avatar-action-fg))] hover:bg-[rgb(var(--buzz-onboarding-avatar-action-bg)/0.9)] hover:text-[rgb(var(--buzz-onboarding-avatar-action-fg))]"
-                    data-system-color-scheme="light"
-                    data-testid="community-avatar-editor-key-frame"
-                    onCloseAutoFocus={(event) => {
-                      event.preventDefault();
-                      avatarTriggerRef.current?.focus();
-                    }}
-                    overlayVariant="transparent"
-                    style={
-                      avatarEditorDialogHeight === null
-                        ? undefined
-                        : { height: avatarEditorDialogHeight }
-                    }
-                  >
-                    <DialogTitle className="sr-only">
-                      Edit your avatar
-                    </DialogTitle>
-                    <div
-                      className="grid items-center gap-8 md:grid-cols-[240px_minmax(0,1fr)]"
-                      ref={avatarEditorContentRef}
-                    >
-                      <div
-                        className="flex min-h-[320px] flex-col items-center justify-center gap-3 px-6 py-8"
-                        data-testid="community-avatar-live-preview-panel"
-                      >
-                        <div className="relative h-48 w-48">
-                          <div
-                            className="pointer-events-none absolute inset-0 z-10"
-                            data-testid="community-avatar-animated-preview-slot"
-                            ref={setAnimatedPreviewEl}
-                          />
-                          {isAnimatedPreviewActive
-                            ? null
-                            : (() => {
-                                if (localAvatarPreviewUrl) {
-                                  return (
-                                    <ProfileAvatar
-                                      avatarUrl={localAvatarPreviewUrl}
-                                      className="h-full w-full rounded-full text-5xl"
-                                      label={
-                                        displayName.trim() || "Your profile"
-                                      }
-                                      testId="community-avatar-live-preview"
-                                    />
-                                  );
-                                }
-                                const emojiAvatar =
-                                  parseEmojiAvatarDataUrl(avatarUrl);
-                                return emojiAvatar ? (
-                                  <div
-                                    aria-label={`${displayName.trim() || "Your profile"} avatar`}
-                                    className="flex h-full w-full items-center justify-center overflow-hidden rounded-full text-6xl shadow-xs"
-                                    data-testid="community-avatar-live-preview"
-                                    role="img"
-                                    style={{
-                                      backgroundColor: emojiAvatar.color,
-                                    }}
-                                  >
-                                    <span
-                                      className={cn(
-                                        avatarSquishKey > 0 &&
-                                          "buzz-avatar-squish",
-                                      )}
-                                      data-testid="community-avatar-live-preview-emoji"
-                                      key={avatarSquishKey}
-                                    >
-                                      {emojiAvatar.emoji}
-                                    </span>
-                                  </div>
-                                ) : (
-                                  <ProfileAvatar
-                                    avatarUrl={
-                                      localAvatarPreviewUrl || avatarUrl || null
-                                    }
-                                    className="h-full w-full rounded-full text-5xl"
-                                    label={displayName.trim() || "Your profile"}
-                                    testId="community-avatar-live-preview"
-                                  />
-                                );
-                              })()}
-                        </div>
-                        {animatedPreviewCaption ? (
-                          <p className="text-center text-sm text-muted-foreground">
-                            {animatedPreviewCaption}
-                          </p>
-                        ) : null}
-                      </div>
-                      <ProfileAvatarEditor
-                        animatedPreviewContainer={animatedPreviewEl}
-                        avatarUrl={avatarUrl}
-                        disabled={isPending}
-                        donePending={isUploadingAvatar}
-                        emojiPickerTheme="auto"
-                        emojiPickerThemeVars={NEUTRAL_EMOJI_PICKER_THEME_VARS}
-                        onDone={() => setIsAvatarEditorOpen(false)}
-                        onAnimatedPreviewActiveChange={
-                          setIsAnimatedPreviewActive
-                        }
-                        onAnimatedPreviewCaptionChange={
-                          setAnimatedPreviewCaption
-                        }
-                        onEmojiAvatarChange={animateEmojiAvatarChange}
-                        onLocalPreviewChange={setLocalAvatarPreviewUrl}
-                        onUploadingChange={setIsUploadingAvatar}
-                        onUrlChange={setAvatarUrl}
-                        presentation="onboarding-modal"
-                        previewName={displayName.trim() || "Your profile"}
-                        testIdPrefix="community-avatar"
-                      />
-                    </div>
-                  </DialogContent>
-                </Dialog>
-              </>
+              <CommunityProfileStage
+                avatarUrl={avatarUrl}
+                displayName={displayName}
+                errorMessage={transaction.error}
+                isPending={isPending}
+                isUploadingAvatar={isUploadingAvatar}
+                onAvatarUrlChange={setAvatarUrl}
+                onDisplayNameChange={setDisplayName}
+                onNext={() => void saveProfile()}
+                onUploadingChange={setIsUploadingAvatar}
+              />
             ) : (
               <>
                 <h1 className="text-title font-normal">
diff --git a/desktop/src/features/onboarding/ui/CommunityProfileStage.tsx b/desktop/src/features/onboarding/ui/CommunityProfileStage.tsx
new file mode 100644
index 00000000000..a619689a925
--- /dev/null
+++ b/desktop/src/features/onboarding/ui/CommunityProfileStage.tsx
@@ -0,0 +1,431 @@
+import { Plus } from "lucide-react";
+import * as React from "react";
+
+import { AgentCreationPreview } from "@/features/agents/ui/AgentCreationPreview";
+import { useAvatarPresentation } from "@/features/profile/avatarPresentationStore";
+import type { AnimatedAvatarRecordingProcessor } from "@/features/profile/ui/AnimatedAvatarCapture.types";
+import { ProfileAvatar } from "@/features/profile/ui/ProfileAvatar";
+import {
+  emojiAvatarDataUrl,
+  parseEmojiAvatarDataUrl,
+} from "@/features/profile/ui/ProfileAvatarEditor.utils";
+import { ProfileAvatarEditor } from "@/features/profile/ui/ProfileAvatarEditor";
+import { cn } from "@/shared/lib/cn";
+import { Button } from "@/shared/ui/button";
+import { Dialog, DialogContent, DialogTitle } from "@/shared/ui/dialog";
+import { ONBOARDING_PRIMARY_CTA_CLASS } from "./OnboardingChrome";
+import { OnboardingFooter } from "./OnboardingFooter";
+import { OnboardingPreviewInput } from "./OnboardingPreviewInput";
+import { useOnboardingPreviewCardLayout } from "./OnboardingPreviewShell";
+import { ONBOARDING_PREVIEW_CARD_INPUT_CLASS } from "./onboardingPreviewCardStyles";
+
+const NEUTRAL_EMOJI_PICKER_THEME_VARS = {
+  "--buzz-emoji-picker-rgb-background":
+    "var(--buzz-onboarding-emoji-picker-background)",
+  "--buzz-emoji-picker-rgb-color": "var(--buzz-onboarding-emoji-picker-color)",
+  "--buzz-emoji-picker-rgb-input": "var(--buzz-onboarding-emoji-picker-input)",
+} as React.CSSProperties;
+
+const PREVIEW_URL_AVATAR = emojiAvatarDataUrl("🐝", "#D7D72E");
+
+function blobAsDataUrl(blob: Blob) {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onerror = () => reject(reader.error ?? new Error("Read failed."));
+    reader.onload = () => resolve(String(reader.result));
+    reader.readAsDataURL(blob);
+  });
+}
+
+const processPreviewImage = (file: File) => blobAsDataUrl(file);
+
+const processPreviewAnimatedAvatar: AnimatedAvatarRecordingProcessor = ({
+  posterBytes,
+}) =>
+  blobAsDataUrl(
+    new Blob([Uint8Array.from(posterBytes).buffer], { type: "image/png" }),
+  );
+
+function AvatarCircle({
+  avatarUrl,
+  onClick,
+  previewName,
+  triggerRef,
+}: {
+  avatarUrl: string;
+  onClick: () => void;
+  previewName: string;
+  triggerRef?: React.Ref<HTMLButtonElement>;
+}) {
+  const emojiAvatar = parseEmojiAvatarDataUrl(avatarUrl);
+  const presentation = useAvatarPresentation(avatarUrl);
+  const hasAvatar =
+    avatarUrl.trim().length > 0 && presentation?.state !== "failed";
+
+  return (
+    <button
+      aria-label={hasAvatar ? "Change your avatar" : "Add an avatar"}
+      className="group block shrink-0 rounded-full"
+      data-testid="community-avatar-open"
+      onClick={onClick}
+      ref={triggerRef}
+      type="button"
+    >
+      {emojiAvatar ? (
+        <span
+          className="flex h-36 w-36 items-center justify-center overflow-hidden rounded-full text-5xl shadow-xs"
+          style={{ backgroundColor: emojiAvatar.color }}
+        >
+          {emojiAvatar.emoji}
+        </span>
+      ) : hasAvatar ? (
+        <ProfileAvatar
+          avatarUrl={avatarUrl}
+          className="h-36 w-36 rounded-full text-4xl"
+          label={previewName}
+          testId="community-avatar-circle"
+        />
+      ) : (
+        <span
+          className="flex h-36 w-36 items-center justify-center rounded-full bg-white/30 text-[var(--buzz-onboarding-backup-ink)] transition-colors group-hover:bg-white/40"
+          data-testid="community-avatar-empty"
+        >
+          <Plus className="h-7 w-7" aria-hidden="true" />
+        </span>
+      )}
+    </button>
+  );
+}
+
+export function CommunityProfileStage({
+  avatarUrl,
+  displayName,
+  errorMessage,
+  isPending,
+  isUploadingAvatar,
+  onAvatarUrlChange,
+  onDisplayNameChange,
+  onNext,
+  onUploadingChange,
+  previewMode = false,
+}: {
+  avatarUrl: string;
+  displayName: string;
+  errorMessage?: string;
+  isPending: boolean;
+  isUploadingAvatar: boolean;
+  onAvatarUrlChange: (value: string) => void;
+  onDisplayNameChange: (value: string) => void;
+  onNext: () => void;
+  onUploadingChange: (isUploading: boolean) => void;
+  previewMode?: boolean;
+}) {
+  const cardLayout = useOnboardingPreviewCardLayout();
+  const [localAvatarPreviewUrl, setLocalAvatarPreviewUrl] = React.useState<
+    string | null
+  >(null);
+  const [avatarSquishKey, setAvatarSquishKey] = React.useState(0);
+  const [isAvatarEditorOpen, setIsAvatarEditorOpen] = React.useState(false);
+  const [animatedPreviewEl, setAnimatedPreviewEl] =
+    React.useState<HTMLDivElement | null>(null);
+  const [avatarModeTabsEl, setAvatarModeTabsEl] =
+    React.useState<HTMLDivElement | null>(null);
+  const [isAnimatedPreviewActive, setIsAnimatedPreviewActive] =
+    React.useState(false);
+  const [animatedPreviewCaption, setAnimatedPreviewCaption] = React.useState<
+    string | null
+  >(null);
+  const nameInputRef = React.useRef<HTMLInputElement | null>(null);
+  const avatarTriggerRef = React.useRef<HTMLButtonElement | null>(null);
+  const avatarEditorContentRef = React.useRef<HTMLDivElement | null>(null);
+  const [avatarEditorDialogHeight, setAvatarEditorDialogHeight] =
+    React.useState<number | null>(null);
+  const animateEmojiAvatarChange = React.useCallback(() => {
+    setAvatarSquishKey((key) => key + 1);
+  }, []);
+  const updateAvatarUrl = React.useCallback(
+    (nextAvatarUrl: string) => {
+      if (
+        !previewMode ||
+        nextAvatarUrl.length === 0 ||
+        nextAvatarUrl.startsWith("blob:") ||
+        nextAvatarUrl.startsWith("data:image/")
+      ) {
+        onAvatarUrlChange(nextAvatarUrl);
+        return;
+      }
+      onAvatarUrlChange(PREVIEW_URL_AVATAR);
+    },
+    [onAvatarUrlChange, previewMode],
+  );
+
+  React.useLayoutEffect(() => {
+    if (!isAvatarEditorOpen) nameInputRef.current?.focus();
+  }, [isAvatarEditorOpen]);
+
+  React.useLayoutEffect(() => {
+    if (!isAvatarEditorOpen) {
+      setAvatarEditorDialogHeight(null);
+      return;
+    }
+    const content = avatarEditorContentRef.current;
+    if (!content) return;
+
+    const updateHeight = () => {
+      setAvatarEditorDialogHeight(content.getBoundingClientRect().height + 64);
+    };
+    updateHeight();
+    const resizeObserver = new ResizeObserver(updateHeight);
+    resizeObserver.observe(content);
+    return () => resizeObserver.disconnect();
+  }, [isAvatarEditorOpen]);
+
+  return (
+    <>
+      <div
+        className={cn(
+          "flex min-h-0 w-full flex-1 flex-col transition-[filter,opacity] duration-200 ease-out",
+          isAvatarEditorOpen && "pointer-events-none opacity-45 blur-[3px]",
+        )}
+        data-testid="community-profile-main"
+      >
+        <div className={cn("shrink-0", cardLayout && "text-left")}>
+          <h1 className="text-title font-normal">Build your profile</h1>
+          {cardLayout ? null : (
+            <p className="mx-auto mt-3 max-w-[380px] text-sm leading-6 text-foreground/80">
+              Add a name and avatar. They’ll show up on your messages,
+              reactions, and agent handoffs.
+            </p>
+          )}
+        </div>
+        <div
+          className={cn(
+            "flex min-h-0 w-full flex-1 flex-col",
+            cardLayout
+              ? "items-start justify-start pt-6"
+              : "items-center justify-center pt-8",
+          )}
+        >
+          {cardLayout ? (
+            <div className="w-full" data-testid="community-avatar-section">
+              <AgentCreationPreview
+                align="start"
+                allowAnimated
+                assetLabel="profile image"
+                avatarUrl={avatarUrl || null}
+                disabled={isPending}
+                label={displayName.trim() || "Your profile"}
+                onClearAvatar={() => updateAvatarUrl("")}
+                onSelectAvatar={updateAvatarUrl}
+                onUploadPendingChange={onUploadingChange}
+                presentation="onboarding"
+                processAnimatedAvatar={
+                  previewMode ? processPreviewAnimatedAvatar : undefined
+                }
+                processImage={previewMode ? processPreviewImage : undefined}
+                testIdPrefix="community-avatar"
+              />
+            </div>
+          ) : (
+            <AvatarCircle
+              avatarUrl={avatarUrl}
+              onClick={() => setIsAvatarEditorOpen(true)}
+              previewName={displayName.trim() || "Your profile"}
+              triggerRef={avatarTriggerRef}
+            />
+          )}
+          {!cardLayout && animatedPreviewCaption ? (
+            <p className="mt-1 text-xs text-muted-foreground">
+              {animatedPreviewCaption}
+            </p>
+          ) : null}
+          <div
+            className={cn(
+              "block w-full text-left",
+              cardLayout ? "mt-6 max-w-none" : "mt-7 max-w-[412px]",
+            )}
+          >
+            <label
+              className={cn(
+                "mb-2 block text-sm text-foreground",
+                !cardLayout && "pl-4",
+              )}
+              htmlFor="community-display-name"
+            >
+              Your username
+            </label>
+            <OnboardingPreviewInput
+              aria-label="Community username"
+              autoCapitalize="none"
+              autoComplete="username"
+              autoCorrect="off"
+              className={
+                cardLayout
+                  ? ONBOARDING_PREVIEW_CARD_INPUT_CLASS
+                  : "h-14 rounded-2xl border-[color:rgb(var(--buzz-onboarding-avatar-control-fg)_/_0.28)] bg-[rgb(var(--buzz-onboarding-avatar-dialog-bg)/0.95)] px-5 text-sm shadow-none placeholder:text-muted-foreground/60 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[color:rgb(var(--buzz-onboarding-avatar-control-fg)_/_0.5)] md:text-sm"
+              }
+              data-testid="community-profile-name-key"
+              disabled={isPending || isUploadingAvatar}
+              id="community-display-name"
+              onChange={(event) => onDisplayNameChange(event.target.value)}
+              placeholder="Enter your username here"
+              ref={nameInputRef}
+              smooth={cardLayout}
+              spellCheck={false}
+              type="text"
+              value={displayName}
+            />
+          </div>
+        </div>
+        {errorMessage ? (
+          <p className="mt-4 text-sm text-destructive">{errorMessage}</p>
+        ) : null}
+      </div>
+      <OnboardingFooter
+        className={cn(
+          "transition-[filter,opacity] duration-200 ease-out",
+          isAvatarEditorOpen && "pointer-events-none opacity-45 blur-[3px]",
+        )}
+      >
+        <Button
+          className={`${ONBOARDING_PRIMARY_CTA_CLASS} w-20`}
+          data-testid="community-profile-next"
+          disabled={!displayName.trim() || isPending || isUploadingAvatar}
+          onClick={onNext}
+          type="button"
+        >
+          Next
+        </Button>
+      </OnboardingFooter>
+      <Dialog
+        onOpenChange={(open) => setIsAvatarEditorOpen(open)}
+        open={isAvatarEditorOpen}
+      >
+        <DialogContent
+          className="buzz-onboarding-neutral-theme w-[min(calc(100vw-2rem),920px)] max-w-[920px] gap-0 overflow-hidden rounded-[18px] bg-[rgb(var(--buzz-onboarding-avatar-dialog-bg))] px-8 pb-6 pt-10 text-sm text-foreground shadow-[0_28px_90px_rgb(var(--buzz-onboarding-avatar-dialog-shadow)_/_0.28),0_8px_28px_rgb(var(--buzz-onboarding-avatar-dialog-shadow)_/_0.18)] transition-[height] duration-[250ms] ease-out"
+          closeButtonClassName="right-6 top-6 h-10 w-10 rounded-full bg-[rgb(var(--buzz-onboarding-avatar-action-bg))] text-[rgb(var(--buzz-onboarding-avatar-action-fg))] hover:bg-[rgb(var(--buzz-onboarding-avatar-action-bg)/0.9)] hover:text-[rgb(var(--buzz-onboarding-avatar-action-fg))]"
+          data-system-color-scheme="light"
+          data-testid="community-avatar-editor-key-frame"
+          onCloseAutoFocus={(event) => {
+            event.preventDefault();
+            avatarTriggerRef.current?.focus();
+          }}
+          overlayVariant="transparent"
+          style={
+            avatarEditorDialogHeight === null
+              ? undefined
+              : { height: avatarEditorDialogHeight }
+          }
+        >
+          <DialogTitle className="sr-only">Edit your avatar</DialogTitle>
+          <div
+            className={cn(
+              "grid items-center gap-8",
+              cardLayout
+                ? "grid-cols-[200px_minmax(0,1fr)] items-stretch"
+                : "md:grid-cols-[240px_minmax(0,1fr)]",
+            )}
+            ref={avatarEditorContentRef}
+          >
+            <div
+              className={cn(
+                "flex flex-col items-center gap-3",
+                cardLayout
+                  ? "min-h-[454px] justify-start px-2 py-0"
+                  : "min-h-[320px] justify-center px-6 py-8",
+              )}
+              data-testid="community-avatar-live-preview-panel"
+            >
+              <div
+                className={cn(
+                  "relative shrink-0",
+                  cardLayout ? "h-40 w-40" : "h-48 w-48",
+                )}
+              >
+                <div
+                  className="pointer-events-none absolute inset-0 z-10"
+                  data-testid="community-avatar-animated-preview-slot"
+                  ref={setAnimatedPreviewEl}
+                />
+                {isAnimatedPreviewActive ? null : localAvatarPreviewUrl ? (
+                  <ProfileAvatar
+                    avatarUrl={localAvatarPreviewUrl}
+                    className="h-full w-full rounded-full text-5xl"
+                    label={displayName.trim() || "Your profile"}
+                    testId="community-avatar-live-preview"
+                  />
+                ) : (
+                  (() => {
+                    const emojiAvatar = parseEmojiAvatarDataUrl(avatarUrl);
+                    return emojiAvatar ? (
+                      <div
+                        aria-label={`${displayName.trim() || "Your profile"} avatar`}
+                        className="flex h-full w-full items-center justify-center overflow-hidden rounded-full text-6xl shadow-xs"
+                        data-testid="community-avatar-live-preview"
+                        role="img"
+                        style={{ backgroundColor: emojiAvatar.color }}
+                      >
+                        <span
+                          className={cn(
+                            avatarSquishKey > 0 && "buzz-avatar-squish",
+                          )}
+                          data-testid="community-avatar-live-preview-emoji"
+                          key={avatarSquishKey}
+                        >
+                          {emojiAvatar.emoji}
+                        </span>
+                      </div>
+                    ) : (
+                      <ProfileAvatar
+                        avatarUrl={avatarUrl || null}
+                        className="h-full w-full rounded-full text-5xl"
+                        label={displayName.trim() || "Your profile"}
+                        testId="community-avatar-live-preview"
+                      />
+                    );
+                  })()
+                )}
+              </div>
+              {animatedPreviewCaption ? (
+                <p className="text-center text-sm text-muted-foreground">
+                  {animatedPreviewCaption}
+                </p>
+              ) : null}
+              {cardLayout ? (
+                <div
+                  className="mt-3 w-full"
+                  data-testid="community-avatar-mode-tabs-slot"
+                  ref={setAvatarModeTabsEl}
+                />
+              ) : null}
+            </div>
+            <ProfileAvatarEditor
+              animatedPreviewContainer={animatedPreviewEl}
+              avatarUrl={avatarUrl}
+              disabled={isPending}
+              donePending={isUploadingAvatar}
+              emojiPickerTheme="auto"
+              emojiPickerThemeVars={NEUTRAL_EMOJI_PICKER_THEME_VARS}
+              onAnimatedPreviewActiveChange={setIsAnimatedPreviewActive}
+              onAnimatedPreviewCaptionChange={setAnimatedPreviewCaption}
+              onDone={() => setIsAvatarEditorOpen(false)}
+              onEmojiAvatarChange={animateEmojiAvatarChange}
+              onLocalPreviewChange={setLocalAvatarPreviewUrl}
+              onUploadingChange={onUploadingChange}
+              onUrlChange={updateAvatarUrl}
+              modeTabsContainer={cardLayout ? avatarModeTabsEl : undefined}
+              modeTabsOrientation={cardLayout ? "vertical" : "horizontal"}
+              presentation="onboarding-modal"
+              previewName={displayName.trim() || "Your profile"}
+              processAnimatedAvatar={
+                previewMode ? processPreviewAnimatedAvatar : undefined
+              }
+              processImage={previewMode ? processPreviewImage : undefined}
+              testIdPrefix="community-avatar"
+            />
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
diff --git a/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx b/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx
index d91bc92e61a..1f06b79911b 100644
--- a/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx
+++ b/desktop/src/features/onboarding/ui/DownloadKeyStep.tsx
@@ -1,12 +1,16 @@
 import { motion, useReducedMotion } from "motion/react";
 import * as React from "react";
 
+import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
 import {
+  ONBOARDING_PRIMARY_CTA_CLASS,
   ONBOARDING_SECURITY_PRIMARY_CTA_CLASS,
   ONBOARDING_SECONDARY_CTA_CLASS,
 } from "./OnboardingChrome";
 import { OnboardingFooter } from "./OnboardingFooter";
+import { useOnboardingPreviewCardLayout } from "./OnboardingPreviewShell";
+import { ONBOARDING_PREVIEW_SECONDARY_CTA_CLASS } from "./onboardingPreviewCardStyles";
 import {
   type OnboardingTransitionDirection,
   OnboardingSlideTransition,
@@ -21,6 +25,10 @@ type DownloadKeyStepProps = {
   /** Backup state owned by the parent flow across the creation and test views. */
   session: EncryptedBackupSession;
   onBack: () => void;
+  /** Use in-memory backup operations inside the dev-only workshop preview. */
+  previewMode?: boolean;
+  /** Apply the experimental V3 wording inside the safe preview. */
+  v3Presentation?: boolean;
 };
 
 /**
@@ -32,64 +40,105 @@ export function DownloadKeyStep({
   direction,
   session,
   onBack,
+  previewMode = false,
+  v3Presentation = false,
 }: DownloadKeyStepProps) {
+  const cardLayout = useOnboardingPreviewCardLayout();
   const reduceMotion = useReducedMotion() ?? false;
   // Once the encrypted payload is saved, the creator advances to its guided
   // backup test while this surface keeps its own navigation.
   const hasCreated = session.created;
   const hasVerifiedBackup = session.verified;
   const hasSelectedBackup = session.test.stage === "password";
+  const showPreviewSaved =
+    v3Presentation && hasCreated && session.test.stage === "drop";
+  const primaryActionClass = cardLayout
+    ? ONBOARDING_PRIMARY_CTA_CLASS
+    : ONBOARDING_SECURITY_PRIMARY_CTA_CLASS;
   const [primaryActionSlot, setPrimaryActionSlot] =
     React.useState<HTMLElement | null>(null);
+  const headingEntrance = reduceMotion
+    ? false
+    : cardLayout
+      ? { opacity: 0 }
+      : { opacity: 0, y: 10 };
+  const panelEntrance = reduceMotion
+    ? false
+    : cardLayout
+      ? { opacity: 0 }
+      : { opacity: 0, y: 12 };
 
   return (
     <OnboardingSlideTransition
-      className="flex min-h-0 w-full flex-col items-center"
+      className={cn(
+        "flex min-h-0 w-full flex-col",
+        cardLayout ? "items-stretch" : "items-center",
+      )}
       data-testid="onboarding-page-download"
       direction={direction}
       transitionKey={`download-${direction}`}
     >
       <motion.div
-        animate={{ opacity: 1, y: 0 }}
-        className="flex w-full max-w-[500px] shrink-0 flex-col text-center"
-        initial={reduceMotion ? false : { opacity: 0, y: 10 }}
+        animate={cardLayout ? { opacity: 1 } : { opacity: 1, y: 0 }}
+        className={cn(
+          "flex w-full max-w-[500px] shrink-0 flex-col",
+          cardLayout ? "text-left" : "text-center",
+        )}
+        initial={headingEntrance}
         key={
-          hasVerifiedBackup
-            ? "success-heading"
-            : hasCreated
-              ? "test-heading"
-              : "password-heading"
+          showPreviewSaved
+            ? "saved-heading"
+            : hasVerifiedBackup
+              ? "success-heading"
+              : hasCreated
+                ? "test-heading"
+                : "password-heading"
         }
         transition={{ duration: reduceMotion ? 0 : 0.3, ease: "easeOut" }}
       >
         {/* Plain string concat: cn()'s tailwind-merge misreads the custom
             text-title size token as conflicting with text-foreground. */}
         <h1 className="text-title font-normal text-foreground">
-          {hasVerifiedBackup
-            ? "Your backup is verified"
-            : hasSelectedBackup
-              ? "That’s your backup file"
-              : hasCreated
-                ? "Optionally, test your backup"
-                : "Backup your key with a password"}
+          {showPreviewSaved
+            ? "Your backup is ready"
+            : hasVerifiedBackup
+              ? "Your backup is verified"
+              : hasSelectedBackup
+                ? "That’s your backup file"
+                : hasCreated
+                  ? "Optionally, test your backup"
+                  : "Create a secure backup file"}
         </h1>
         <p className="mt-5 text-sm leading-6 text-foreground/80">
-          {hasVerifiedBackup
-            ? "Your file and password can restore your identity."
-            : hasSelectedBackup
-              ? "Now enter your password to prove you can unlock it."
-              : hasCreated
-                ? "Learn how your backup works. Drop the file you just saved and unlock it with your password."
-                : "Keep the downloaded file private — you need both it and your password to restore your identity. Save the backup password somewhere safe; Buzz cannot reset it if lost."}
+          {showPreviewSaved
+            ? "Test your backup to make sure it works, or download another copy."
+            : hasVerifiedBackup
+              ? "Your file and password can restore your identity."
+              : hasSelectedBackup
+                ? "Now enter your password to prove you can unlock it."
+                : hasCreated
+                  ? "Learn how your backup works. Drop the file you just saved and unlock it with your password."
+                  : "This creates a password-protected file with your private key. Remember, Buzz can’t recover your key if you lose it."}
         </p>
       </motion.div>
 
-      <div className="flex w-full max-w-[1040px] flex-1 flex-col justify-center py-10">
+      <div
+        className={cn(
+          "flex w-full max-w-[1040px] flex-col",
+          cardLayout ? "py-8" : "flex-1 justify-center py-10",
+        )}
+      >
         <div className="w-full">
           <motion.div
-            animate={{ opacity: 1, y: 0 }}
-            initial={reduceMotion ? false : { opacity: 0, y: 12 }}
-            key={hasCreated ? "test-panel" : "password-panel"}
+            animate={cardLayout ? { opacity: 1 } : { opacity: 1, y: 0 }}
+            initial={panelEntrance}
+            key={
+              showPreviewSaved
+                ? "saved-panel"
+                : hasCreated
+                  ? "test-panel"
+                  : "password-panel"
+            }
             transition={{
               delay: reduceMotion ? 0 : 0.12,
               duration: reduceMotion ? 0 : 0.4,
@@ -97,14 +146,21 @@ export function DownloadKeyStep({
             }}
           >
             <div
-              className="mx-auto w-full max-w-140 px-6 py-5"
+              className={cn(
+                "flex w-full max-w-140",
+                cardLayout
+                  ? "justify-start py-6"
+                  : "mx-auto justify-center px-6 py-5",
+              )}
               data-testid="backup-password-panel"
             >
               <EncryptedBackupCreator
-                createButtonClassName={ONBOARDING_SECURITY_PRIMARY_CTA_CLASS}
+                createButtonClassName={primaryActionClass}
                 createButtonPortal={primaryActionSlot}
+                previewMode={previewMode}
                 session={session}
                 variant="spotlight"
+                v3Presentation={v3Presentation}
                 verifyButtonPortal={primaryActionSlot}
               />
             </div>
@@ -113,19 +169,33 @@ export function DownloadKeyStep({
       </div>
 
       <OnboardingFooter>
-        <div
-          className="flex justify-center"
-          data-testid={
-            hasCreated ? "onboarding-verify-slot" : "onboarding-create-slot"
-          }
-          ref={setPrimaryActionSlot}
-        />
-        {hasCreated ? (
+        {showPreviewSaved ? (
+          <Button
+            className={primaryActionClass}
+            data-testid="onboarding-preview-backup-done"
+            onClick={onBack}
+            type="button"
+          >
+            Continue
+          </Button>
+        ) : (
+          <div
+            className="flex justify-center"
+            data-testid={
+              hasCreated ? "onboarding-verify-slot" : "onboarding-create-slot"
+            }
+            ref={setPrimaryActionSlot}
+          />
+        )}
+        {hasCreated && !showPreviewSaved ? (
           <Button
             className={
               hasVerifiedBackup
-                ? ONBOARDING_SECURITY_PRIMARY_CTA_CLASS
-                : ONBOARDING_SECONDARY_CTA_CLASS
+                ? primaryActionClass
+                : cn(
+                    ONBOARDING_SECONDARY_CTA_CLASS,
+                    cardLayout && ONBOARDING_PREVIEW_SECONDARY_CTA_CLASS,
+                  )
             }
             data-testid={
               hasVerifiedBackup ? "onboarding-finish" : "onboarding-skip"
@@ -134,7 +204,11 @@ export function DownloadKeyStep({
             type="button"
             variant="ghost"
           >
-            {hasVerifiedBackup ? "Finish" : "Skip for now"}
+            {hasVerifiedBackup
+              ? v3Presentation
+                ? "Continue"
+                : "Finish"
+              : "Skip for now"}
           </Button>
         ) : null}
       </OnboardingFooter>
diff --git a/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx b/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
index bb76166bd76..9fbccdc0c7a 100644
--- a/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
+++ b/desktop/src/features/onboarding/ui/EncryptedBackupCreator.tsx
@@ -9,7 +9,6 @@ import {
 } from "@/shared/api/tauriIdentity";
 import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
-import { Input } from "@/shared/ui/input";
 import { Popover, PopoverAnchor, PopoverContent } from "@/shared/ui/popover";
 import { Spinner } from "@/shared/ui/spinner";
 import {
@@ -39,9 +38,13 @@ import {
 } from "./BackupTestFlow";
 import { BackupPasswordTimeline } from "./BackupPasswordTimeline";
 import {
+  ONBOARDING_PRIMARY_CTA_CLASS,
   ONBOARDING_SECURITY_PRIMARY_CTA_CLASS,
   ONBOARDING_SECONDARY_CTA_CLASS,
 } from "./OnboardingChrome";
+import { OnboardingPreviewInput } from "./OnboardingPreviewInput";
+import { useOnboardingPreviewCardLayout } from "./OnboardingPreviewShell";
+import { ONBOARDING_PREVIEW_CARD_INPUT_CLASS } from "./onboardingPreviewCardStyles";
 
 /** Word-count bounds mirroring `key_backup.rs` (Rust clamps regardless). */
 const MIN_GENERATED_WORDS = 3;
@@ -57,6 +60,21 @@ const SEPARATOR_OPTIONS = [
 
 const DEFAULT_SEPARATOR = SEPARATOR_OPTIONS[0].value;
 
+const PREVIEW_BACKUP_FILENAME = "Buzz identity backup.ncryptsec";
+const PREVIEW_NCRYPTSEC = `ncryptsec1${"q".repeat(120)}`;
+const PREVIEW_PASSPHRASE_WORDS = [
+  "honey",
+  "harbor",
+  "lantern",
+  "meadow",
+  "copper",
+  "willow",
+  "sunrise",
+  "orbit",
+  "river",
+  "garden",
+] as const;
+
 /**
  * Pause after the last keystroke before the background KDF starts, so typing
  * past the minimum length doesn't launch an encryption per character.
@@ -257,6 +275,10 @@ type EncryptedBackupCreatorProps = {
   guidedTest?: boolean;
   /** Fired once when the user completes the backup test successfully. */
   onVerified?: () => void;
+  /** Replace native identity and file operations inside the dev-only preview. */
+  previewMode?: boolean;
+  /** Apply the experimental V3 wording inside the safe preview. */
+  v3Presentation?: boolean;
 };
 
 /**
@@ -272,11 +294,13 @@ function PassphraseGeneratorPopover({
   disabled = false,
   onRequestGenerate,
   onGenerated,
+  previewMode = false,
   securityTheme = false,
 }: {
   disabled?: boolean;
   onRequestGenerate?: () => void;
   onGenerated: (value: string) => void;
+  previewMode?: boolean;
   securityTheme?: boolean;
 }) {
   const [open, setOpen] = React.useState(false);
@@ -302,21 +326,26 @@ function PassphraseGeneratorPopover({
     };
   }, []);
 
-  const generate = React.useCallback(async (wordCount: number, sep: string) => {
-    setError(null);
-    try {
-      const passphrase = await generateBackupPassphrase({
-        words: wordCount,
-        separator: sep,
-      });
-      if (mountedRef.current) onGeneratedRef.current(passphrase);
-    } catch (err) {
-      if (!mountedRef.current) return;
-      setError(
-        err instanceof Error ? err.message : "Failed to generate a password.",
-      );
-    }
-  }, []);
+  const generate = React.useCallback(
+    async (wordCount: number, sep: string) => {
+      setError(null);
+      try {
+        const passphrase = previewMode
+          ? PREVIEW_PASSPHRASE_WORDS.slice(0, wordCount).join(sep)
+          : await generateBackupPassphrase({
+              words: wordCount,
+              separator: sep,
+            });
+        if (mountedRef.current) onGeneratedRef.current(passphrase);
+      } catch (err) {
+        if (!mountedRef.current) return;
+        setError(
+          err instanceof Error ? err.message : "Failed to generate a password.",
+        );
+      }
+    },
+    [previewMode],
+  );
 
   // Fill the password field on every open and whenever a control changes.
   React.useEffect(() => {
@@ -453,7 +482,10 @@ export function EncryptedBackupCreator({
   onSaved,
   guidedTest = true,
   onVerified,
+  previewMode = false,
+  v3Presentation = false,
 }: EncryptedBackupCreatorProps) {
+  const cardLayout = useOnboardingPreviewCardLayout();
   // Hosts without a longer-lived session get a private one (settings card).
   const fallbackSession = useEncryptedBackupSession();
   const session = sessionProp ?? fallbackSession;
@@ -489,7 +521,10 @@ export function EncryptedBackupCreator({
     const start = () => {
       if (cancelled) return;
       dispatch({ type: "encrypt-started", requestId });
-      void createNcryptsecBackup(pendingPassphrase)
+      const createBackup = previewMode
+        ? Promise.resolve(PREVIEW_NCRYPTSEC)
+        : createNcryptsecBackup(pendingPassphrase);
+      void createBackup
         .then((ncryptsec) =>
           dispatch({ type: "encrypt-succeeded", requestId, ncryptsec }),
         )
@@ -512,7 +547,13 @@ export function EncryptedBackupCreator({
       cancelled = true;
       window.clearTimeout(timer);
     };
-  }, [dispatch, pendingPassphrase, skipDebounce, state.nextRequestId]);
+  }, [
+    dispatch,
+    pendingPassphrase,
+    previewMode,
+    skipDebounce,
+    state.nextRequestId,
+  ]);
 
   // Download commit: fires once per committed blob, whether the commit was
   // instant (encryption already done) or resolved a queued download. The flow
@@ -530,7 +571,10 @@ export function EncryptedBackupCreator({
       savedForRef.current = null;
       dispatch({ type: "back-to-password" });
     };
-    void saveNcryptsecCopy(ncryptsec)
+    const saveBackup = previewMode
+      ? Promise.resolve(PREVIEW_BACKUP_FILENAME)
+      : saveNcryptsecCopy(ncryptsec);
+    void saveBackup
       .then((path) => {
         if (path) {
           setSavedPath(path);
@@ -554,6 +598,7 @@ export function EncryptedBackupCreator({
     dispatch,
     onCreated,
     onSaved,
+    previewMode,
     savedForRef,
     setSavedPath,
     state.ncryptsec,
@@ -564,7 +609,9 @@ export function EncryptedBackupCreator({
     setIsSaving(true);
     setSaveError(null);
     try {
-      const path = await saveNcryptsecCopy(state.ncryptsec);
+      const path = previewMode
+        ? PREVIEW_BACKUP_FILENAME
+        : await saveNcryptsecCopy(state.ncryptsec);
       if (mountedRef.current && path) {
         setSavedPath(path);
         onSaved?.(path);
@@ -577,7 +624,7 @@ export function EncryptedBackupCreator({
     } finally {
       if (mountedRef.current) setIsSaving(false);
     }
-  }, [isSaving, onSaved, setSavedPath, state.ncryptsec]);
+  }, [isSaving, onSaved, previewMode, setSavedPath, state.ncryptsec]);
 
   const { setVerified, test, setTest } = session;
   const handleVerified = React.useCallback(() => {
@@ -588,6 +635,7 @@ export function EncryptedBackupCreator({
   const issue = passphraseIssue(state.passphrase);
   const showBackupTimeline =
     variant === "spotlight" &&
+    !cardLayout &&
     !state.savedPassword &&
     !state.createError &&
     !saveError;
@@ -596,7 +644,7 @@ export function EncryptedBackupCreator({
   // while the native save dialog is open the password form stays put.
   if (state.ncryptsec && savedPath && guidedTest) {
     return (
-      <div data-testid="encrypted-backup-result">
+      <div className="w-full" data-testid="encrypted-backup-result">
         <BackupTestFlow
           isSaving={isSaving}
           expectedNcryptsec={state.ncryptsec}
@@ -604,9 +652,11 @@ export function EncryptedBackupCreator({
           onSaveCopy={() => void handleSaveCopy()}
           onVerified={handleVerified}
           progress={test}
+          previewMode={previewMode}
           saveError={saveError}
           variant={variant}
           verifyButtonPortal={verifyButtonPortal}
+          v3Presentation={v3Presentation}
         />
       </div>
     );
@@ -617,7 +667,10 @@ export function EncryptedBackupCreator({
 
   return (
     <div
-      className={cn("mx-auto w-full max-w-[500px] space-y-3 text-left")}
+      className={cn(
+        "w-full max-w-[500px] space-y-3 text-left",
+        !cardLayout && "mx-auto",
+      )}
       data-testid="encrypted-backup-creator"
     >
       <div
@@ -628,133 +681,152 @@ export function EncryptedBackupCreator({
       >
         {showBackupTimeline ? <BackupPasswordTimeline /> : null}
         <div className="relative z-10">
-          <Input
-            aria-label="Encryption password"
-            autoComplete="new-password"
-            autoFocus={variant === "spotlight"}
-            className={cn(
-              "font-mono",
-              variant === "spotlight"
-                ? "h-14 rounded-2xl border-black/20 bg-white px-20 text-center text-lg text-black/80 shadow-none placeholder:text-black/55 focus-visible:ring-black/35"
-                : "h-10 bg-background pr-19",
-            )}
-            data-testid="backup-passphrase-input"
-            disabled={state.downloadPending}
-            readOnly={state.savedPassword}
-            aria-describedby={
-              state.savedPassword
-                ? "backup-saved-password-description"
-                : undefined
-            }
-            onBeforeInput={(event) => {
-              if (state.savedPassword) {
-                event.preventDefault();
-                setConfirmNewPassword(true);
+          {cardLayout ? (
+            <label
+              className="mb-2 block text-sm font-medium text-foreground"
+              htmlFor="backup-passphrase-input"
+            >
+              Password
+            </label>
+          ) : null}
+          <div className="relative">
+            <OnboardingPreviewInput
+              aria-label="Encryption password"
+              autoComplete="new-password"
+              autoFocus={variant === "spotlight"}
+              className={cn(
+                "font-mono",
+                variant === "spotlight"
+                  ? cardLayout
+                    ? cn(
+                        ONBOARDING_PREVIEW_CARD_INPUT_CLASS,
+                        "pr-20 text-left font-mono text-sm",
+                      )
+                    : "h-14 rounded-2xl border-black/20 bg-white px-20 text-center text-lg text-black/80 shadow-none placeholder:text-black/55 focus-visible:ring-black/35"
+                  : "h-10 bg-background pr-19",
+              )}
+              data-testid="backup-passphrase-input"
+              disabled={state.downloadPending}
+              id="backup-passphrase-input"
+              readOnly={state.savedPassword}
+              aria-describedby={
+                state.savedPassword
+                  ? "backup-saved-password-description"
+                  : undefined
               }
-            }}
-            onPaste={(event) => {
-              if (state.savedPassword) {
+              onBeforeInput={(event) => {
+                if (state.savedPassword) {
+                  event.preventDefault();
+                  setConfirmNewPassword(true);
+                }
+              }}
+              onPaste={(event) => {
+                if (state.savedPassword) {
+                  event.preventDefault();
+                  setConfirmNewPassword(true);
+                }
+              }}
+              onChange={(event) =>
+                dispatch({ type: "set-passphrase", value: event.target.value })
+              }
+              onKeyDown={(event) => {
+                if (event.key !== "Enter" || event.nativeEvent.isComposing)
+                  return;
                 event.preventDefault();
-                setConfirmNewPassword(true);
+                if (downloadDisabled(state) || isSaving) return;
+                if (state.savedPassword && state.ncryptsec) {
+                  void handleSaveCopy();
+                  return;
+                }
+                dispatch({ type: "download-clicked" });
+              }}
+              placeholder={
+                state.savedPassword
+                  ? ""
+                  : `Password (min ${MIN_PASSPHRASE_LEN} characters)`
               }
-            }}
-            onChange={(event) =>
-              dispatch({ type: "set-passphrase", value: event.target.value })
-            }
-            onKeyDown={(event) => {
-              if (event.key !== "Enter" || event.nativeEvent.isComposing)
-                return;
-              event.preventDefault();
-              if (downloadDisabled(state) || isSaving) return;
-              if (state.savedPassword && state.ncryptsec) {
-                void handleSaveCopy();
-                return;
+              smooth={cardLayout}
+              type={isRevealed ? "text" : "password"}
+              value={state.passphrase}
+            />
+            {state.savedPassword ? (
+              <div
+                aria-hidden
+                className={cn(
+                  "pointer-events-none absolute inset-y-0 left-3 flex items-center font-mono tracking-widest text-foreground",
+                  variant === "spotlight" && !cardLayout && "text-black/80",
+                )}
+                data-testid="backup-saved-password-mask"
+              >
+                ••••••••••••••••••••••••••••••••
+              </div>
+            ) : null}
+            {state.savedPassword ? (
+              <span className="sr-only" id="backup-saved-password-description">
+                Backup password saved; hidden for security.
+              </span>
+            ) : null}
+            <Button
+              aria-label={
+                state.savedPassword
+                  ? "Change saved backup password"
+                  : isRevealed
+                    ? "Hide password"
+                    : "Reveal password"
               }
-              dispatch({ type: "download-clicked" });
-            }}
-            placeholder={
-              state.savedPassword
-                ? ""
-                : `Password (min ${MIN_PASSPHRASE_LEN} characters)`
-            }
-            type={isRevealed ? "text" : "password"}
-            value={state.passphrase}
-          />
-          {state.savedPassword ? (
-            <div
-              aria-hidden
               className={cn(
-                "pointer-events-none absolute inset-y-0 left-3 flex items-center font-mono tracking-widest text-foreground",
-                variant === "spotlight" && "text-black/80",
+                "absolute right-1 top-1/2 h-8 w-8 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+                variant === "spotlight" &&
+                  !cardLayout &&
+                  "text-black/55 hover:bg-black/5 hover:text-black/80",
               )}
-              data-testid="backup-saved-password-mask"
-            >
-              ••••••••••••••••••••••••••••••••
-            </div>
-          ) : null}
-          {state.savedPassword ? (
-            <span className="sr-only" id="backup-saved-password-description">
-              Backup password saved; hidden for security.
-            </span>
-          ) : null}
-          <Button
-            aria-label={
-              state.savedPassword
-                ? "Change saved backup password"
-                : isRevealed
-                  ? "Hide password"
-                  : "Reveal password"
-            }
-            className={cn(
-              "absolute right-1 top-1/2 h-8 w-8 -translate-y-1/2 text-muted-foreground hover:text-foreground",
-              variant === "spotlight" &&
-                "text-black/55 hover:bg-black/5 hover:text-black/80",
-            )}
-            data-testid="backup-passphrase-reveal-toggle"
-            disabled={state.downloadPending}
-            onClick={() =>
-              state.savedPassword
-                ? setConfirmNewPassword(true)
-                : setIsRevealed((revealed) => !revealed)
-            }
-            size="icon"
-            type="button"
-            variant="ghost"
-          >
-            {isRevealed ? (
-              <EyeOff className="h-4 w-4" aria-hidden="true" />
-            ) : (
-              <Eye className="h-4 w-4" aria-hidden="true" />
-            )}
-          </Button>
-          <PassphraseGeneratorPopover
-            disabled={state.downloadPending}
-            onRequestGenerate={
-              state.savedPassword
-                ? () => setConfirmNewPassword(true)
-                : undefined
-            }
-            onGenerated={(value) => {
-              dispatch({ type: "set-passphrase", value });
-              // A generated password must be visible so the user can save it.
-              setIsRevealed(true);
-            }}
-            securityTheme={variant === "spotlight"}
-          />
-          {issue ? (
-            <p
-              className="absolute left-1 top-full mt-1 animate-in text-xs text-muted-foreground fade-in slide-in-from-top-1 duration-200 motion-reduce:animate-none"
-              data-testid="backup-passphrase-issue"
+              data-testid="backup-passphrase-reveal-toggle"
+              disabled={state.downloadPending}
+              onClick={() =>
+                state.savedPassword
+                  ? setConfirmNewPassword(true)
+                  : setIsRevealed((revealed) => !revealed)
+              }
+              size="icon"
+              type="button"
+              variant="ghost"
             >
-              {issue}
-            </p>
-          ) : null}
+              {isRevealed ? (
+                <EyeOff className="h-4 w-4" aria-hidden="true" />
+              ) : (
+                <Eye className="h-4 w-4" aria-hidden="true" />
+              )}
+            </Button>
+            <PassphraseGeneratorPopover
+              disabled={state.downloadPending}
+              onRequestGenerate={
+                state.savedPassword
+                  ? () => setConfirmNewPassword(true)
+                  : undefined
+              }
+              onGenerated={(value) => {
+                dispatch({ type: "set-passphrase", value });
+                // A generated password must be visible so the user can save it.
+                setIsRevealed(true);
+              }}
+              previewMode={previewMode}
+              securityTheme={variant === "spotlight" && !cardLayout}
+            />
+            {issue ? (
+              <p
+                className="absolute left-1 top-full mt-1 animate-in text-xs text-muted-foreground fade-in slide-in-from-top-1 duration-200 motion-reduce:animate-none"
+                data-testid="backup-passphrase-issue"
+              >
+                {issue}
+              </p>
+            ) : null}
+          </div>
         </div>
       </div>
 
       {state.savedPassword && state.ncryptsec && savedPath ? (
         <div
-          className="space-y-1 text-center"
+          className={cn("space-y-1", cardLayout ? "text-left" : "text-center")}
           data-testid="encrypted-backup-created"
         >
           <p
@@ -772,7 +844,10 @@ export function EncryptedBackupCreator({
 
       {state.createError ? (
         <p
-          className="text-center text-sm text-destructive"
+          className={cn(
+            "text-sm text-destructive",
+            cardLayout ? "text-left" : "text-center",
+          )}
           data-testid="encrypted-backup-create-error"
         >
           {state.createError}
@@ -781,7 +856,10 @@ export function EncryptedBackupCreator({
 
       {saveError ? (
         <p
-          className="text-center text-sm text-destructive"
+          className={cn(
+            "text-sm text-destructive",
+            cardLayout ? "text-left" : "text-center",
+          )}
           data-testid="encrypted-backup-save-error"
         >
           {saveError}
@@ -815,6 +893,8 @@ export function EncryptedBackupCreator({
                 <PendingDownloadTicker />
               ) : state.savedPassword ? (
                 "Download backup again"
+              ) : v3Presentation ? (
+                "Save backup"
               ) : (
                 "Backup key"
               )}
@@ -835,12 +915,18 @@ export function EncryptedBackupCreator({
       >
         <AlertDialogContent
           className={cn(
-            variant === "spotlight" && "buzz-onboarding-security-theme",
+            variant === "spotlight" &&
+              !cardLayout &&
+              "buzz-onboarding-security-theme",
           )}
           data-testid="backup-change-password-dialog"
-          surface={variant === "spotlight" ? "textured" : "default"}
+          surface={
+            variant === "spotlight" && !cardLayout ? "textured" : "default"
+          }
           textureSize="compact"
-          textureTone={variant === "spotlight" ? "dark" : "light"}
+          textureTone={
+            variant === "spotlight" && !cardLayout ? "dark" : "light"
+          }
         >
           <AlertDialogHeader>
             <AlertDialogTitle>Create a new backup password?</AlertDialogTitle>
@@ -863,7 +949,9 @@ export function EncryptedBackupCreator({
             <AlertDialogAction
               className={
                 variant === "spotlight"
-                  ? ONBOARDING_SECURITY_PRIMARY_CTA_CLASS
+                  ? cardLayout
+                    ? ONBOARDING_PRIMARY_CTA_CLASS
+                    : ONBOARDING_SECURITY_PRIMARY_CTA_CLASS
                   : undefined
               }
               data-testid="backup-start-new-password"
diff --git a/desktop/src/features/onboarding/ui/HarnessConnectionStep.tsx b/desktop/src/features/onboarding/ui/HarnessConnectionStep.tsx
new file mode 100644
index 00000000000..fa103b20bb2
--- /dev/null
+++ b/desktop/src/features/onboarding/ui/HarnessConnectionStep.tsx
@@ -0,0 +1,926 @@
+import { openUrl } from "@tauri-apps/plugin-opener";
+import { ChevronRight, CreditCard, ExternalLink, KeyRound } from "lucide-react";
+import * as React from "react";
+
+import { AgentDropdownSelect } from "@/features/agents/ui/agentConfigControls";
+import {
+  getProviderApiKeyLabel,
+  getPersonaModelOptions,
+  PERSONA_LLM_PROVIDER_OPTIONS,
+  runtimeSupportsLlmProviderSelection,
+} from "@/features/agents/ui/agentConfigOptions";
+import {
+  BUZZ_AGENT_THINKING_EFFORT_VALUES,
+  getProviderEffortConfig,
+} from "@/features/agents/ui/buzzAgentConfig";
+import type { AcpRuntimeCatalogEntry } from "@/shared/api/types";
+import { cn } from "@/shared/lib/cn";
+import { Button } from "@/shared/ui/button";
+import { SegmentedControl } from "@/shared/ui/segmented-control";
+import { ONBOARDING_PRIMARY_CTA_CLASS } from "./OnboardingChrome";
+import { OnboardingFooter } from "./OnboardingFooter";
+import { OnboardingPreviewInput } from "./OnboardingPreviewInput";
+import {
+  OnboardingPreviewStep,
+  useOnboardingPreviewCardLayout,
+} from "./OnboardingPreviewShell";
+import { OnboardingSlideTransition } from "./OnboardingSlideTransition";
+import { getRuntimeDisplayLabel, RuntimeIcon } from "./RuntimeIcon";
+import { HARNESS_CONNECTION_OPTIONS } from "./harnessConnectionOptions";
+import { ONBOARDING_PREVIEW_CARD_INPUT_CLASS } from "./onboardingPreviewCardStyles";
+
+export type HarnessConnectionMethod = "subscription" | "api";
+
+export type HarnessConnectionOption = {
+  methods: readonly HarnessConnectionMethod[];
+  runtime: AcpRuntimeCatalogEntry;
+};
+
+export { HARNESS_CONNECTION_OPTIONS };
+
+function HarnessPreviewStep({
+  allowWideContent = false,
+  children,
+  embedded = false,
+  onBack,
+  testId,
+  total,
+}: {
+  allowWideContent?: boolean;
+  children: React.ReactNode;
+  embedded?: boolean;
+  onBack: () => void;
+  testId: string;
+  total: number;
+}) {
+  if (embedded) {
+    return (
+      <div className="flex min-h-0 flex-1 flex-col" data-testid={testId}>
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <OnboardingPreviewStep
+      allowWideContent={allowWideContent}
+      current={3}
+      onBack={onBack}
+      testId={testId}
+      total={total}
+    >
+      {children}
+    </OnboardingPreviewStep>
+  );
+}
+
+const CONNECTION_METHOD_OPTIONS = [
+  { label: "Subscription", value: "subscription" },
+  { label: "API", value: "api" },
+] as const;
+
+/**
+ * Reusable row list for selecting or installing an AI client. The caller owns
+ * availability and side effects so onboarding can remain a session-only
+ * workshop while an in-app surface can wire the same presentation to Tauri.
+ */
+export function HarnessConnectionList({
+  installedIds,
+  method,
+  onSelect,
+  options,
+}: {
+  installedIds: ReadonlySet<string>;
+  method?: HarnessConnectionMethod;
+  onSelect: (option: HarnessConnectionOption) => void;
+  options: readonly HarnessConnectionOption[];
+}) {
+  const scrollRef = React.useRef<HTMLDivElement | null>(null);
+  const [canScrollUp, setCanScrollUp] = React.useState(false);
+  const [canScrollDown, setCanScrollDown] = React.useState(false);
+  const orderedOptions = React.useMemo(() => {
+    const group = ({ runtime }: HarnessConnectionOption) => {
+      if (runtime.id === "buzz-agent") return 0;
+      if (runtime.id === "goose") return 1;
+      return installedIds.has(runtime.id) ? 2 : 3;
+    };
+    return [...options].sort((left, right) => group(left) - group(right));
+  }, [installedIds, options]);
+  const updateScrollEdges = React.useCallback(() => {
+    const element = scrollRef.current;
+    if (!element) return;
+    setCanScrollUp(element.scrollTop > 1);
+    setCanScrollDown(
+      element.scrollTop + element.clientHeight < element.scrollHeight - 1,
+    );
+  }, []);
+
+  React.useEffect(() => {
+    updateScrollEdges();
+    const element = scrollRef.current;
+    if (!element) return;
+    const observer = new ResizeObserver(updateScrollEdges);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [updateScrollEdges]);
+
+  return (
+    <div className="relative -mx-2 min-h-0 w-[calc(100%+1rem)] flex-1">
+      <div
+        aria-hidden="true"
+        className={cn(
+          "pointer-events-none absolute inset-x-0 top-0 z-10 h-4 transition-opacity duration-150 motion-reduce:transition-none",
+          canScrollUp ? "opacity-100" : "opacity-0",
+        )}
+        style={{
+          background: "linear-gradient(to bottom, white, rgb(255 255 255 / 0))",
+        }}
+      />
+      <div
+        aria-hidden="true"
+        className={cn(
+          "pointer-events-none absolute inset-x-0 bottom-0 z-10 h-4 transition-opacity duration-150 motion-reduce:transition-none",
+          canScrollDown ? "opacity-100" : "opacity-0",
+        )}
+        style={{
+          background: "linear-gradient(to top, white, rgb(255 255 255 / 0))",
+        }}
+      />
+      <div
+        className="h-full min-h-0 space-y-1 overflow-y-auto overscroll-contain pr-1"
+        data-testid="onboarding-preview-harness-list"
+        onScroll={updateScrollEdges}
+        ref={scrollRef}
+      >
+        {orderedOptions.map((option, index) => {
+          const { runtime } = option;
+          const installed = installedIds.has(runtime.id);
+          const previousOption = orderedOptions[index - 1];
+          const startsNotInstalledSection =
+            !installed &&
+            (previousOption === undefined ||
+              installedIds.has(previousOption.runtime.id));
+          const label = getRuntimeDisplayLabel(runtime);
+          const isRecommendedBuzzOption =
+            method === "api" && runtime.id === "buzz-agent";
+          const rowClassName =
+            "group flex min-h-14 w-full items-center gap-3 rounded-xl px-2 py-2 text-left text-sm font-medium text-foreground transition-colors duration-150 ease-out hover:bg-foreground/[0.04] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-foreground/20 motion-reduce:transition-none";
+          const contents = (
+            <>
+              <span className="flex size-10 shrink-0 items-center justify-start">
+                <RuntimeIcon className="size-9" runtime={runtime} />
+              </span>
+              <span className="flex min-w-0 flex-1 items-center gap-2">
+                <span className="truncate">{label}</span>
+                {isRecommendedBuzzOption ? (
+                  <>
+                    <span
+                      aria-hidden="true"
+                      className="shrink-0 text-muted-foreground/50"
+                    >
+                      ·
+                    </span>
+                    <span className="inline-flex shrink-0 items-center rounded-md bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground">
+                      Recommended
+                    </span>
+                  </>
+                ) : null}
+              </span>
+            </>
+          );
+
+          return (
+            <React.Fragment key={runtime.id}>
+              {startsNotInstalledSection ? (
+                <p
+                  className="px-2 pb-1 pt-4 text-xs font-medium text-muted-foreground"
+                  data-testid="onboarding-preview-harness-not-installed"
+                >
+                  Not installed
+                </p>
+              ) : null}
+              <button
+                className={rowClassName}
+                data-testid={`onboarding-preview-harness-${runtime.id}`}
+                onClick={() => onSelect(option)}
+                type="button"
+              >
+                {contents}
+                <span className="flex size-10 shrink-0 items-center justify-end">
+                  <ChevronRight
+                    aria-hidden="true"
+                    className="size-4 text-muted-foreground transition-colors duration-150 ease-out group-hover:text-foreground motion-reduce:transition-none"
+                  />
+                </span>
+              </button>
+            </React.Fragment>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export function HarnessConnectionPreview({
+  embedded = false,
+  installedIds,
+  method,
+  onBack,
+  onHelp,
+  onSelect,
+  total,
+}: {
+  embedded?: boolean;
+  installedIds: ReadonlySet<string>;
+  method?: HarnessConnectionMethod;
+  onBack: () => void;
+  onHelp?: () => void;
+  onSelect: (option: HarnessConnectionOption) => void;
+  total: number;
+}) {
+  const options = method
+    ? HARNESS_CONNECTION_OPTIONS.filter(({ methods }) =>
+        methods.includes(method),
+      )
+    : HARNESS_CONNECTION_OPTIONS;
+
+  return (
+    <HarnessPreviewStep
+      embedded={embedded}
+      onBack={onBack}
+      testId="onboarding-preview-harness-connection"
+      total={total}
+    >
+      <OnboardingSlideTransition
+        className="flex min-h-0 flex-1 flex-col"
+        containerClassName="min-h-0 flex-1"
+        transitionKey="preview-harness-connection"
+      >
+        <div className="shrink-0">
+          <h1 className="text-title font-normal text-foreground">
+            {method === "subscription"
+              ? "Continue with an AI subscription"
+              : method === "api"
+                ? "Choose a harness"
+                : "Connect your AI client"}
+          </h1>
+          {method === "subscription" ? (
+            <p className="mt-2 text-base leading-6 text-foreground/80">
+              Subscriptions connect through a compatible harness, like Claude
+              Code or Codex. Choose yours to sign in.
+            </p>
+          ) : method === "api" ? (
+            <p className="mt-2 text-base leading-6 text-foreground/80">
+              Choose how your agents will connect to AI providers. You can
+              change this at any time.
+            </p>
+          ) : (
+            <p className="mt-2 text-base leading-6 text-foreground/80">
+              Choose which AI client your agents will use. You can change this
+              anytime.{" "}
+              {onHelp ? (
+                <Button
+                  className="inline-flex h-auto p-0 align-baseline text-base leading-6 text-foreground underline decoration-foreground/45 underline-offset-4 hover:decoration-foreground"
+                  data-testid="onboarding-preview-harness-help-trigger"
+                  onClick={onHelp}
+                  type="button"
+                  variant="link"
+                >
+                  Need help choosing?
+                </Button>
+              ) : null}
+            </p>
+          )}
+        </div>
+        <div className="mt-6 flex min-h-0 flex-1 flex-col">
+          <HarnessConnectionList
+            installedIds={installedIds}
+            method={method}
+            onSelect={onSelect}
+            options={options}
+          />
+        </div>
+      </OnboardingSlideTransition>
+    </HarnessPreviewStep>
+  );
+}
+
+const CONNECTION_METHOD_CHOICES = [
+  {
+    icon: CreditCard,
+    label: "Log in with a subscription",
+    method: "subscription",
+  },
+  {
+    icon: KeyRound,
+    label: "Use an API key",
+    method: "api",
+  },
+] as const satisfies ReadonlyArray<{
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  method: HarnessConnectionMethod;
+}>;
+
+export function HarnessConnectionMethodPreview({
+  embedded = false,
+  onBack,
+  onSelect,
+  onSetUpLater,
+  total,
+}: {
+  embedded?: boolean;
+  onBack: () => void;
+  onSelect: (method: HarnessConnectionMethod) => void;
+  onSetUpLater: () => void;
+  total: number;
+}) {
+  return (
+    <HarnessPreviewStep
+      embedded={embedded}
+      onBack={onBack}
+      testId="onboarding-preview-harness-method"
+      total={total}
+    >
+      <OnboardingSlideTransition
+        className="flex min-h-0 flex-1 flex-col"
+        containerClassName="min-h-0 flex-1"
+        transitionKey="preview-harness-method"
+      >
+        <div className="shrink-0">
+          <h1 className="text-title font-normal text-foreground">
+            Connect your AI provider
+          </h1>
+          <p className="mt-2 text-base leading-6 text-foreground/80">
+            Choose how your agents will access AI. You can change this later.
+          </p>
+        </div>
+
+        <div className="-mx-2 mt-6 flex w-[calc(100%+1rem)] flex-1 flex-col gap-2">
+          {CONNECTION_METHOD_CHOICES.map(
+            ({ icon: MethodIcon, label, method }) => (
+              <Button
+                className="group h-auto min-h-14 w-full justify-start gap-3 rounded-xl px-2 py-2 text-left text-sm text-foreground shadow-none hover:bg-foreground/[0.04] hover:text-foreground focus-visible:ring-2 focus-visible:ring-foreground/20"
+                data-testid={`onboarding-preview-harness-method-${method}`}
+                key={method}
+                onClick={() => onSelect(method)}
+                type="button"
+                variant="ghost"
+              >
+                <span className="flex size-8 shrink-0 items-center justify-start">
+                  <MethodIcon aria-hidden className="!size-6" />
+                </span>
+                <span className="min-w-0 flex-1">
+                  <span className="block font-medium">{label}</span>
+                </span>
+                <span className="ml-auto flex size-10 shrink-0 items-center justify-end">
+                  <ChevronRight
+                    aria-hidden
+                    className="size-4 text-muted-foreground transition-colors duration-150 ease-out group-hover:text-foreground motion-reduce:transition-none"
+                  />
+                </span>
+              </Button>
+            ),
+          )}
+          <Button
+            className="group h-auto min-h-14 w-full justify-start gap-3 rounded-xl px-2 py-2 text-left text-sm font-medium text-foreground shadow-none hover:bg-foreground/[0.04] hover:text-foreground focus-visible:ring-2 focus-visible:ring-foreground/20"
+            data-testid="onboarding-preview-harness-method-later"
+            onClick={onSetUpLater}
+            type="button"
+            variant="ghost"
+          >
+            <span aria-hidden className="size-8 shrink-0" />
+            <span className="min-w-0 flex-1">Set up later</span>
+            <span className="ml-auto flex size-10 shrink-0 items-center justify-end">
+              <ChevronRight
+                aria-hidden
+                className="size-4 text-muted-foreground transition-colors duration-150 ease-out group-hover:text-foreground motion-reduce:transition-none"
+              />
+            </span>
+          </Button>
+        </div>
+      </OnboardingSlideTransition>
+    </HarnessPreviewStep>
+  );
+}
+
+function HarnessCompatibilityList({
+  method,
+}: {
+  method: HarnessConnectionMethod;
+}) {
+  const options = HARNESS_CONNECTION_OPTIONS.filter(({ methods }) =>
+    methods.includes(method),
+  );
+
+  return (
+    <ul
+      className="mt-4 grid grid-cols-2 gap-x-5 gap-y-3"
+      data-testid={`onboarding-preview-harness-help-${method}-list`}
+    >
+      {options.map(({ runtime }) => (
+        <li className="flex min-w-0 items-center gap-2" key={runtime.id}>
+          <span className="flex size-7 shrink-0 items-center justify-center">
+            <RuntimeIcon className="size-6" runtime={runtime} />
+          </span>
+          <span className="truncate text-sm font-medium text-foreground">
+            {getRuntimeDisplayLabel(runtime)}
+          </span>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export function HarnessConnectionHelpPreview({
+  onBack,
+  total,
+}: {
+  onBack: () => void;
+  total: number;
+}) {
+  return (
+    <OnboardingPreviewStep
+      current={3}
+      onBack={onBack}
+      testId="onboarding-preview-harness-help"
+      total={total}
+    >
+      <OnboardingSlideTransition
+        className="flex min-h-0 w-full max-w-[500px] flex-1 flex-col items-stretch text-left"
+        containerClassName="min-h-0 flex-1"
+        transitionKey="preview-harness-help"
+      >
+        <div className="shrink-0">
+          <h1 className="text-title font-normal text-foreground">
+            Choose how to connect
+          </h1>
+          <p className="mt-2 text-base leading-6 text-foreground/80">
+            Connect an AI client using a subscription or API key.
+          </p>
+        </div>
+
+        <div className="mt-8 min-h-0 flex-1 space-y-7 overflow-y-auto pb-4 pr-1">
+          <section aria-labelledby="harness-subscription-heading">
+            <h2
+              className="text-base font-medium text-foreground"
+              id="harness-subscription-heading"
+            >
+              I use a subscription
+            </h2>
+            <p className="mt-2 text-sm leading-6 text-foreground/75">
+              Choose this if you sign in to a paid AI product, such as ChatGPT
+              or Claude.
+            </p>
+            <HarnessCompatibilityList method="subscription" />
+          </section>
+
+          <section
+            aria-labelledby="harness-api-heading"
+            className="border-t border-[#e2e2e2] pt-7"
+          >
+            <h2
+              className="text-base font-medium text-foreground"
+              id="harness-api-heading"
+            >
+              I use an API key
+            </h2>
+            <p className="mt-2 text-sm leading-6 text-foreground/75">
+              Choose this if you have an API key from an AI provider or your
+              team.
+            </p>
+            <HarnessCompatibilityList method="api" />
+          </section>
+        </div>
+      </OnboardingSlideTransition>
+    </OnboardingPreviewStep>
+  );
+}
+
+const API_PROVIDER_OPTIONS = PERSONA_LLM_PROVIDER_OPTIONS.map((provider) => ({
+  label: provider.label,
+  value: provider.id,
+}));
+
+const SUBSCRIPTION_NAMES: Record<string, string> = {
+  amp: "Amp subscription",
+  claude: "Claude subscription",
+  codex: "ChatGPT subscription",
+  cursor: "Cursor subscription",
+  devin: "Devin account",
+};
+
+function defaultApiProvider(runtimeId: string) {
+  if (runtimeId === "codex") return "openai";
+  return "anthropic";
+}
+
+export function runtimeNeedsOnboardingConnection(
+  method: HarnessConnectionMethod,
+  runtimeId: string,
+) {
+  return (
+    method === "subscription" || runtimeSupportsLlmProviderSelection(runtimeId)
+  );
+}
+
+function apiKeyLabel(provider: string) {
+  return (
+    getProviderApiKeyLabel(provider)?.replace("API Key", "API key") ?? "API key"
+  );
+}
+
+const DEFAULT_MODEL_OPTION = { label: "Default model", value: "" } as const;
+
+function modelOptions(runtimeId: string, provider: string) {
+  const options = getPersonaModelOptions(runtimeId, provider).map((option) => ({
+    label: option.label,
+    value: option.id,
+  }));
+  return options.length > 0 ? options : [DEFAULT_MODEL_OPTION];
+}
+
+function ConnectedConfiguration({
+  effort,
+  model,
+  onEffortChange,
+  onModelChange,
+  provider,
+  runtimeId,
+}: {
+  effort: string;
+  model: string;
+  onEffortChange: (value: string) => void;
+  onModelChange: (value: string) => void;
+  provider: string;
+  runtimeId: string;
+}) {
+  const models = modelOptions(runtimeId, provider);
+  const effortConfig = getProviderEffortConfig(provider, model);
+  const efforts = BUZZ_AGENT_THINKING_EFFORT_VALUES.filter((value) =>
+    effortConfig.validValues.includes(value),
+  ).map((value) => ({
+    label: value === effortConfig.defaultValue ? `${value} (default)` : value,
+    value,
+  }));
+  const availableEfforts =
+    efforts.length > 0
+      ? efforts
+      : BUZZ_AGENT_THINKING_EFFORT_VALUES.map((value) => ({
+          label: value,
+          value,
+        }));
+
+  return (
+    <div
+      className="space-y-5"
+      data-testid="onboarding-preview-harness-connected"
+    >
+      <div>
+        <label
+          className="mb-2 block text-sm font-medium text-foreground"
+          htmlFor="onboarding-preview-harness-model"
+        >
+          Model
+        </label>
+        <AgentDropdownSelect
+          className={ONBOARDING_PREVIEW_CARD_INPUT_CLASS}
+          id="onboarding-preview-harness-model"
+          onValueChange={onModelChange}
+          options={models}
+          testId="onboarding-preview-harness-model"
+          value={model}
+        />
+      </div>
+      <div>
+        <label
+          className="mb-2 block text-sm font-medium text-foreground"
+          htmlFor="onboarding-preview-harness-effort"
+        >
+          Effort
+        </label>
+        <AgentDropdownSelect
+          className={ONBOARDING_PREVIEW_CARD_INPUT_CLASS}
+          id="onboarding-preview-harness-effort"
+          onValueChange={onEffortChange}
+          options={availableEfforts}
+          testId="onboarding-preview-harness-effort"
+          value={effort}
+        />
+      </div>
+    </div>
+  );
+}
+
+export function HarnessConnectionDetailPreview({
+  embedded = false,
+  installed,
+  lockMethod = false,
+  method,
+  onBack,
+  onCheckAgain,
+  onContinue,
+  onMethodChange,
+  onUseDifferentHarness,
+  option,
+  total,
+}: {
+  embedded?: boolean;
+  installed: boolean;
+  lockMethod?: boolean;
+  method: HarnessConnectionMethod;
+  onBack: () => void;
+  onCheckAgain: () => void;
+  onContinue: () => void;
+  onMethodChange: (method: HarnessConnectionMethod) => void;
+  onUseDifferentHarness?: () => void;
+  option: HarnessConnectionOption;
+  total: number;
+}) {
+  const cardLayout = useOnboardingPreviewCardLayout();
+  const label = getRuntimeDisplayLabel(option.runtime);
+  const hasMethodChoice = option.methods.length > 1 && !lockMethod;
+  const [provider, setProvider] = React.useState(() =>
+    defaultApiProvider(option.runtime.id),
+  );
+  const [apiKey, setApiKey] = React.useState("workshop-preview-key");
+  const [connected, setConnected] = React.useState(false);
+  const [model, setModel] = React.useState("");
+  const [effort, setEffort] = React.useState("medium");
+  const canChooseProvider = runtimeSupportsLlmProviderSelection(
+    option.runtime.id,
+  );
+  const subscriptionName = SUBSCRIPTION_NAMES[option.runtime.id] ?? label;
+  const requiresApiKey = getProviderApiKeyLabel(provider) !== null;
+  const canConnect =
+    method === "subscription" || !requiresApiKey || apiKey.trim().length > 0;
+
+  React.useEffect(() => {
+    if (!option.methods.includes(method)) {
+      onMethodChange(option.methods[0] ?? "api");
+    }
+  }, [method, onMethodChange, option.methods]);
+
+  function handleMethodChange(nextMethod: HarnessConnectionMethod) {
+    setApiKey("workshop-preview-key");
+    setConnected(false);
+    setProvider(defaultApiProvider(option.runtime.id));
+    setModel("");
+    setEffort("medium");
+    onMethodChange(nextMethod);
+  }
+
+  function handleProviderChange(nextProvider: string) {
+    setProvider(nextProvider);
+    setApiKey("workshop-preview-key");
+    setConnected(false);
+    setModel("");
+    setEffort("medium");
+  }
+
+  function handlePrimaryAction() {
+    if (connected) {
+      onContinue();
+      return;
+    }
+    if (canConnect) setConnected(true);
+  }
+
+  if (!installed) {
+    return (
+      <HarnessPreviewStep
+        embedded={embedded}
+        onBack={onBack}
+        testId="onboarding-preview-harness-setup-guide"
+        total={total}
+      >
+        <OnboardingSlideTransition
+          className={cn(
+            "flex min-h-0 w-full max-w-[500px] flex-1 flex-col",
+            cardLayout || embedded ? "items-stretch" : "items-center",
+          )}
+          containerClassName="min-h-0 flex-1"
+          transitionKey={`preview-harness-setup-${option.runtime.id}`}
+        >
+          <div className="flex items-center gap-3">
+            <span className="flex size-10 shrink-0 items-center justify-center">
+              <RuntimeIcon className="size-9" runtime={option.runtime} />
+            </span>
+            <h1 className="text-title font-normal text-foreground">
+              Set up {label}
+            </h1>
+          </div>
+          <p className="mt-2 max-w-[440px] text-base leading-6 text-foreground/80">
+            Follow the setup guide to install {label}. When you’re done, come
+            back and check again.
+          </p>
+
+          <div className="mt-8 flex min-h-0 flex-1 flex-col">
+            <div className="rounded-xl bg-[#e2e2e2]/30 px-4 py-4">
+              <p className="text-sm font-medium text-foreground">
+                CLI not detected
+              </p>
+              <Button
+                className="mt-1 h-auto justify-start p-0 text-sm text-foreground underline decoration-foreground/45 underline-offset-4 hover:decoration-foreground"
+                data-testid="onboarding-preview-harness-open-setup-guide"
+                onClick={() =>
+                  void openUrl(option.runtime.installInstructionsUrl)
+                }
+                type="button"
+                variant="link"
+              >
+                Open setup guide
+                <ExternalLink aria-hidden />
+              </Button>
+            </div>
+          </div>
+
+          <OnboardingFooter>
+            <Button
+              className={ONBOARDING_PRIMARY_CTA_CLASS}
+              data-testid="onboarding-preview-harness-check-again"
+              onClick={onCheckAgain}
+              type="button"
+            >
+              Check again
+            </Button>
+          </OnboardingFooter>
+        </OnboardingSlideTransition>
+      </HarnessPreviewStep>
+    );
+  }
+
+  return (
+    <HarnessPreviewStep
+      embedded={embedded}
+      onBack={onBack}
+      testId="onboarding-preview-harness-connection-detail"
+      total={total}
+    >
+      <OnboardingSlideTransition
+        className={cn(
+          "flex min-h-0 w-full max-w-[500px] flex-1 flex-col",
+          cardLayout || embedded ? "items-stretch" : "items-center",
+        )}
+        containerClassName="min-h-0 flex-1"
+        transitionKey={`preview-harness-connection-${option.runtime.id}`}
+      >
+        <div className="flex items-center gap-3">
+          <span className="flex size-10 shrink-0 items-center justify-center">
+            <RuntimeIcon className="size-9" runtime={option.runtime} />
+          </span>
+          <h1 className="text-title font-normal text-foreground">
+            {connected
+              ? "Choose your model settings"
+              : method === "api" && option.runtime.id === "buzz-agent"
+                ? "Connect with an API key"
+                : `Connect ${label}`}
+          </h1>
+        </div>
+        <p className="mt-2 max-w-[440px] text-base leading-6 text-foreground/80">
+          {connected
+            ? "Select the model and effort level your agents will use by default."
+            : hasMethodChoice
+              ? "Choose how you want to connect. You can change this anytime."
+              : method === "subscription"
+                ? `Sign in to connect ${label}. You can change this anytime.`
+                : option.runtime.id === "buzz-agent"
+                  ? "Choose your provider and enter an API key to connect to the Buzz harness."
+                  : "Add your connection details. You can change this anytime."}
+        </p>
+
+        <div className="mt-8 flex min-h-0 flex-1 flex-col gap-6">
+          {hasMethodChoice && !connected ? (
+            <SegmentedControl
+              appearance="onboarding-inline"
+              className="w-fit self-start"
+              legend={`Connection method for ${label}`}
+              onValueChange={handleMethodChange}
+              optionTestIdPrefix="onboarding-preview-harness-method"
+              options={CONNECTION_METHOD_OPTIONS.filter((item) =>
+                option.methods.includes(item.value),
+              )}
+              size="compact"
+              testId="onboarding-preview-harness-methods"
+              value={method}
+            />
+          ) : null}
+
+          {connected ? (
+            <ConnectedConfiguration
+              effort={effort}
+              model={model}
+              onEffortChange={setEffort}
+              onModelChange={setModel}
+              provider={provider}
+              runtimeId={option.runtime.id}
+            />
+          ) : method === "subscription" ? (
+            <div
+              className="flex items-center gap-3 rounded-xl bg-[#e2e2e2]/30 px-4 py-4"
+              data-testid="onboarding-preview-harness-subscription"
+            >
+              <RuntimeIcon className="size-9" runtime={option.runtime} />
+              <div className="min-w-0 flex-1">
+                <p className="text-sm font-medium text-foreground">
+                  {subscriptionName}
+                </p>
+                <p className="mt-0.5 text-xs leading-5 text-foreground/70">
+                  Buzz will open a sign-in window for {label}.
+                </p>
+              </div>
+              <Button
+                className="ml-auto h-7 shrink-0 rounded-full bg-foreground px-3 text-xs text-background shadow-none hover:bg-foreground/85"
+                data-testid="onboarding-preview-harness-subscription-sign-in"
+                onClick={() => setConnected(true)}
+                size="xs"
+                type="button"
+              >
+                Sign in
+              </Button>
+            </div>
+          ) : (
+            <form
+              className="space-y-5"
+              data-testid="onboarding-preview-harness-api-form"
+              onSubmit={(event) => {
+                event.preventDefault();
+                handlePrimaryAction();
+              }}
+            >
+              {canChooseProvider ? (
+                <div>
+                  <label
+                    className="mb-2 block text-sm font-medium text-foreground"
+                    htmlFor="onboarding-preview-harness-provider"
+                  >
+                    Provider
+                  </label>
+                  <AgentDropdownSelect
+                    className={ONBOARDING_PREVIEW_CARD_INPUT_CLASS}
+                    id="onboarding-preview-harness-provider"
+                    onValueChange={handleProviderChange}
+                    options={API_PROVIDER_OPTIONS}
+                    testId="onboarding-preview-harness-provider"
+                    value={provider}
+                  />
+                </div>
+              ) : null}
+              {requiresApiKey ? (
+                <div>
+                  <label
+                    className="mb-2 block text-sm font-medium text-foreground"
+                    htmlFor="onboarding-preview-harness-api-key"
+                  >
+                    {apiKeyLabel(provider)}
+                  </label>
+                  <OnboardingPreviewInput
+                    autoComplete="off"
+                    className={ONBOARDING_PREVIEW_CARD_INPUT_CLASS}
+                    id="onboarding-preview-harness-api-key"
+                    onChange={(event) => {
+                      setApiKey(event.target.value);
+                      setConnected(false);
+                    }}
+                    placeholder="Paste API key"
+                    smooth
+                    type="password"
+                    value={apiKey}
+                  />
+                </div>
+              ) : null}
+              {option.runtime.id === "buzz-agent" && onUseDifferentHarness ? (
+                <div className="flex w-full items-baseline gap-1.5 pt-1 text-sm text-foreground/70">
+                  <span>or</span>
+                  <Button
+                    className="h-auto p-0 text-sm text-foreground"
+                    data-testid="onboarding-preview-harness-use-different"
+                    onClick={onUseDifferentHarness}
+                    type="button"
+                    variant="link"
+                  >
+                    Use a different harness
+                  </Button>
+                </div>
+              ) : null}
+            </form>
+          )}
+        </div>
+
+        {method === "api" || connected ? (
+          <OnboardingFooter>
+            <Button
+              className={ONBOARDING_PRIMARY_CTA_CLASS}
+              data-testid="onboarding-preview-harness-continue"
+              disabled={!canConnect}
+              onClick={handlePrimaryAction}
+              type="button"
+            >
+              {connected ? "Continue" : "Connect"}
+            </Button>
+          </OnboardingFooter>
+        ) : null}
+      </OnboardingSlideTransition>
+    </HarnessPreviewStep>
+  );
+}
diff --git a/desktop/src/features/onboarding/ui/IdentityKeyHelpDialog.tsx b/desktop/src/features/onboarding/ui/IdentityKeyHelpDialog.tsx
index 0abcd77cb02..b98eccd5a7a 100644
--- a/desktop/src/features/onboarding/ui/IdentityKeyHelpDialog.tsx
+++ b/desktop/src/features/onboarding/ui/IdentityKeyHelpDialog.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 
+import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
 import {
   Dialog,
@@ -33,11 +34,24 @@ function rememberIdentityKeyHelpSeen() {
   }
 }
 
-export function IdentityKeyHelpDialog() {
-  const [isVisible, setIsVisible] = React.useState(hasSeenIdentityKeyHelp);
+export function IdentityKeyHelpDialog({
+  inline = false,
+  onPreviewOpen,
+  previewMode = false,
+  v3Presentation = previewMode,
+}: {
+  inline?: boolean;
+  onPreviewOpen?: () => void;
+  previewMode?: boolean;
+  /** Apply the experimental V3 label and link treatment in preview mode. */
+  v3Presentation?: boolean;
+}) {
+  const [isVisible, setIsVisible] = React.useState(
+    previewMode ? true : hasSeenIdentityKeyHelp,
+  );
 
   React.useEffect(() => {
-    if (isVisible) return;
+    if (previewMode || isVisible) return;
 
     const timeout = window.setTimeout(() => {
       rememberIdentityKeyHelpSeen();
@@ -45,25 +59,49 @@ export function IdentityKeyHelpDialog() {
     }, IDENTITY_KEY_HELP_DELAY_MS);
 
     return () => window.clearTimeout(timeout);
-  }, [isVisible]);
+  }, [isVisible, previewMode]);
 
-  return (
-    <Dialog>
+  const triggerButton = (
+    <Button
+      className={cn(
+        v3Presentation
+          ? "text-foreground underline decoration-foreground/45 underline-offset-4 hover:decoration-foreground"
+          : "text-foreground/70 hover:text-foreground",
+        "transition-opacity duration-300 motion-reduce:transition-none",
+        inline && "h-auto justify-start p-0 text-left",
+        isVisible ? "opacity-100" : "pointer-events-none opacity-0",
+      )}
+      data-testid="identity-key-help-trigger"
+      onClick={previewMode ? onPreviewOpen : undefined}
+      tabIndex={isVisible ? 0 : -1}
+      type="button"
+      variant="link"
+    >
+      {v3Presentation
+        ? "Learn how identity keys work"
+        : "What’s an identity key?"}
+    </Button>
+  );
+
+  if (previewMode && onPreviewOpen) {
+    return inline ? (
+      triggerButton
+    ) : (
       <OnboardingFooter className="max-w-none">
-        <DialogTrigger asChild>
-          <Button
-            className={`text-foreground/70 transition-opacity duration-300 hover:text-foreground motion-reduce:transition-none ${
-              isVisible ? "opacity-100" : "pointer-events-none opacity-0"
-            }`}
-            data-testid="identity-key-help-trigger"
-            tabIndex={isVisible ? 0 : -1}
-            type="button"
-            variant="link"
-          >
-            What’s an identity key?
-          </Button>
-        </DialogTrigger>
+        {triggerButton}
       </OnboardingFooter>
+    );
+  }
+
+  const trigger = <DialogTrigger asChild>{triggerButton}</DialogTrigger>;
+
+  return (
+    <Dialog>
+      {inline ? (
+        trigger
+      ) : (
+        <OnboardingFooter className="max-w-none">{trigger}</OnboardingFooter>
+      )}
       <DialogContent
         className="buzz-onboarding-neutral-theme max-w-[47.5rem] -translate-y-5"
         closeButtonClassName={ONBOARDING_INK_ICON_CLASS}
@@ -81,20 +119,7 @@ export function IdentityKeyHelpDialog() {
             className="mt-6 space-y-4 text-pretty text-base leading-7 text-[color:var(--buzz-onboarding-backup-ink)]"
           >
             <div>
-              <p>
-                Buzz uses an identity key instead of a traditional account. It’s
-                created on your device and represents you whenever you use Buzz.
-              </p>
-              <p>
-                Your identity belongs to you, not Buzz. There’s no password to
-                reset, and Buzz can’t recover your key if you lose it. Keep a
-                backup somewhere safe and never share it. Anyone with your key
-                can act as you.
-              </p>
-              <p>
-                If you’re new to Buzz, create a new identity key. If you already
-                have a Nostr identity, use your existing key.
-              </p>
+              <IdentityKeyHelpBody />
             </div>
           </DialogDescription>
         </div>
@@ -102,3 +127,35 @@ export function IdentityKeyHelpDialog() {
     </Dialog>
   );
 }
+
+function IdentityKeyHelpBody() {
+  return (
+    <>
+      <p>
+        Buzz will create a Nostr identity with two parts: a private key that
+        signs you in and a public key you can safely share. You can find your
+        public identity anytime in Buzz settings.
+      </p>
+      <p>
+        This identity belongs to you, not Buzz, and can move with you to another
+        device or compatible Nostr app. Because only you control the private
+        key, Buzz can’t reset or recover it. Keep a backup somewhere safe, and
+        never share it.
+      </p>
+    </>
+  );
+}
+
+/** Production identity-key explainer content in the V3 onboarding card treatment. */
+export function IdentityKeyHelpPreviewContent() {
+  return (
+    <>
+      <h1 className="text-title font-normal text-foreground">
+        What’s an identity key?
+      </h1>
+      <div className="mt-2 max-w-[500px] space-y-4 text-pretty text-base leading-7 text-foreground/80">
+        <IdentityKeyHelpBody />
+      </div>
+    </>
+  );
+}
diff --git a/desktop/src/features/onboarding/ui/InviteRedeemForm.tsx b/desktop/src/features/onboarding/ui/InviteRedeemForm.tsx
index 52b9ebbd07e..e41d400a2ea 100644
--- a/desktop/src/features/onboarding/ui/InviteRedeemForm.tsx
+++ b/desktop/src/features/onboarding/ui/InviteRedeemForm.tsx
@@ -12,6 +12,7 @@ import {
   isJoinPolicyDiscoveryCandidate,
   type JoinPolicy,
 } from "@/shared/api/invites";
+import { relayRequiresMembership } from "@/shared/api/relayMembers";
 import { normalizeRelayUrl } from "@/features/communities/relayProbe";
 import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
@@ -25,6 +26,9 @@ import {
 } from "./NsecMaskedDisplay";
 import { ONBOARDING_PRIMARY_CTA_CLASS } from "./OnboardingChrome";
 import { OnboardingFooter } from "./OnboardingFooter";
+import { OnboardingPreviewInput } from "./OnboardingPreviewInput";
+import { useOnboardingPreviewCardLayout } from "./OnboardingPreviewShell";
+import { ONBOARDING_PREVIEW_CARD_INPUT_CLASS } from "./onboardingPreviewCardStyles";
 
 const POLICY_DISCOVERY_DELAY_MS = 250;
 const POLICY_REVEAL_EASE = [0.23, 1, 0.32, 1] as const;
@@ -55,8 +59,11 @@ type InviteRedeemFormProps = {
   isRedeeming: boolean;
   onCancel: () => void;
   onConnect?: (relayWsUrl: string) => void;
+  onMembershipRequirementChange?: (required: boolean) => void;
   onRedeem: (relayWsUrl: string, code: string, policyReceipt?: string) => void;
   placeholder?: string;
+  /** Render the production form without discovery or relay requests. */
+  previewMode?: boolean;
   variant?: "add-community" | "default" | "onboarding-spotlight";
 };
 
@@ -67,10 +74,13 @@ export function InviteRedeemForm({
   isRedeeming,
   onCancel,
   onConnect,
+  onMembershipRequirementChange,
   onRedeem,
   placeholder,
+  previewMode = false,
   variant = "default",
 }: InviteRedeemFormProps) {
+  const cardLayout = useOnboardingPreviewCardLayout();
   const formId = React.useId();
   const [inviteInput, setInviteInput] = React.useState(initialValue);
   const [bareCodeRelayUrl, setBareCodeRelayUrl] = React.useState(
@@ -104,6 +114,7 @@ export function InviteRedeemForm({
   const needsRelayField = isBareCode && defaultRelayUrl !== undefined;
 
   React.useEffect(() => {
+    if (previewMode) return;
     const relayWsUrl = normalizedRelayUrl
       ? normalizedRelayUrl
       : parsedInvite && hasInviteRelay(parsedInvite)
@@ -135,9 +146,46 @@ export function InviteRedeemForm({
       cancelled = true;
       window.clearTimeout(timeoutId);
     };
-  }, [bareCodeRelayUrl, normalizedRelayUrl, parsedInvite]);
+  }, [bareCodeRelayUrl, normalizedRelayUrl, parsedInvite, previewMode]);
+
+  React.useEffect(() => {
+    if (!onMembershipRequirementChange) return;
+
+    onMembershipRequirementChange(false);
+    if (!normalizedRelayUrl || parsedInvite?.code) return;
+
+    let cancelled = false;
+    const timeoutId = window.setTimeout(() => {
+      if (previewMode) {
+        // The workshop preview stays offline while still demonstrating the
+        // conditional state a membership-gated community would produce.
+        if (!cancelled) onMembershipRequirementChange(true);
+        return;
+      }
+
+      void relayRequiresMembership(normalizedRelayUrl)
+        .then((required) => {
+          if (!cancelled) onMembershipRequirementChange(required);
+        })
+        .catch(() => {
+          // Discovery is best-effort. The connection flow remains the
+          // authoritative fallback when relay information is unavailable.
+        });
+    }, POLICY_DISCOVERY_DELAY_MS);
+
+    return () => {
+      cancelled = true;
+      window.clearTimeout(timeoutId);
+    };
+  }, [
+    normalizedRelayUrl,
+    onMembershipRequirementChange,
+    parsedInvite?.code,
+    previewMode,
+  ]);
 
   const canSubmit =
+    previewMode ||
     (parsedInvite !== null &&
       ("relayWsUrl" in parsedInvite ||
         (isBareCode && bareCodeRelayUrl.trim().length > 0))) ||
@@ -150,6 +198,10 @@ export function InviteRedeemForm({
   const handleSubmit = React.useCallback(
     async (event: React.FormEvent) => {
       event.preventDefault();
+      if (previewMode) {
+        onConnect?.(normalizedRelayUrl ?? "wss://preview.invalid");
+        return;
+      }
       if (normalizedRelayUrl) {
         setPolicyError(null);
         setIsLoadingPolicy(true);
@@ -257,6 +309,7 @@ export function InviteRedeemForm({
       onRedeem,
       parsedInvite,
       policyTarget,
+      previewMode,
     ],
   );
 
@@ -264,6 +317,7 @@ export function InviteRedeemForm({
     event: React.ChangeEvent<HTMLInputElement>,
   ) => {
     setInviteInput(event.target.value);
+    onMembershipRequirementChange?.(false);
     setJoinPolicy(null);
     setPolicyTarget(null);
     setAgeConfirmed(false);
@@ -275,6 +329,7 @@ export function InviteRedeemForm({
     event: React.ChangeEvent<HTMLInputElement>,
   ) => {
     setBareCodeRelayUrl(event.target.value);
+    onMembershipRequirementChange?.(false);
     setJoinPolicy(null);
     setPolicyTarget(null);
     setAgeConfirmed(false);
@@ -348,7 +403,9 @@ export function InviteRedeemForm({
       className={cn(
         "flex w-full flex-col",
         isOnboardingSpotlight
-          ? "relative items-center"
+          ? cardLayout
+            ? "relative items-stretch"
+            : "relative items-center"
           : isAddCommunity
             ? "gap-4"
             : "gap-3",
@@ -357,41 +414,69 @@ export function InviteRedeemForm({
       onSubmit={handleSubmit}
     >
       {isOnboardingSpotlight ? (
-        <Card
-          className="w-[min(calc(100%+12rem),calc(100vw-2rem))] max-w-[1120px] translate-y-8 px-8 py-6"
-          data-testid="invite-redeem-input-frame"
-          variant="textured"
-        >
+        cardLayout ? (
           <div
-            className={SPOTLIGHT_TEXTURE_CONTENT_CLASS}
-            style={SPOTLIGHT_OVERFLOW_FADE}
+            className="w-full text-left"
+            data-testid="invite-redeem-input-frame"
           >
-            <label className="block w-full" htmlFor="invite-input">
-              <span className="sr-only">Invite link or code</span>
-              <span className={ONBOARDING_KEY_ROW_CLASS}>
-                <input
-                  autoCapitalize="none"
-                  autoComplete="off"
-                  autoCorrect="off"
-                  className={cn(
-                    ONBOARDING_KEY_TEXT_CLASS,
-                    "block border-0 bg-transparent p-0 text-center shadow-none outline-none placeholder:text-[var(--buzz-onboarding-backup-ink)] placeholder:opacity-40 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
-                  )}
-                  data-testid="invite-redeem-input"
-                  disabled={isRedeeming}
-                  id="invite-input"
-                  onChange={handleInviteInputChange}
-                  placeholder={
-                    placeholder ?? "https://relay.example.com/invite/abc123"
-                  }
-                  spellCheck={false}
-                  type="text"
-                  value={inviteInput}
-                />
-              </span>
+            <label
+              className="mb-2 block text-sm font-medium text-foreground"
+              htmlFor="invite-input"
+            >
+              Community URL or invite link
             </label>
+            <OnboardingPreviewInput
+              autoComplete="off"
+              autoCorrect="off"
+              autoFocus
+              className={ONBOARDING_PREVIEW_CARD_INPUT_CLASS}
+              data-testid="invite-redeem-input"
+              disabled={isRedeeming}
+              id="invite-input"
+              onChange={handleInviteInputChange}
+              placeholder={placeholder ?? "Invite link or community URL"}
+              spellCheck={false}
+              type="text"
+              value={inviteInput}
+            />
           </div>
-        </Card>
+        ) : (
+          <Card
+            className="w-[min(calc(100%+12rem),calc(100vw-2rem))] max-w-[1120px] translate-y-8 px-8 py-6"
+            data-testid="invite-redeem-input-frame"
+            variant="textured"
+          >
+            <div
+              className={SPOTLIGHT_TEXTURE_CONTENT_CLASS}
+              style={SPOTLIGHT_OVERFLOW_FADE}
+            >
+              <label className="block w-full" htmlFor="invite-input">
+                <span className="sr-only">Invite link or code</span>
+                <span className={ONBOARDING_KEY_ROW_CLASS}>
+                  <input
+                    autoCapitalize="none"
+                    autoComplete="off"
+                    autoCorrect="off"
+                    className={cn(
+                      ONBOARDING_KEY_TEXT_CLASS,
+                      "block border-0 bg-transparent p-0 text-center shadow-none outline-none placeholder:text-[var(--buzz-onboarding-backup-ink)] placeholder:opacity-40 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
+                    )}
+                    data-testid="invite-redeem-input"
+                    disabled={isRedeeming}
+                    id="invite-input"
+                    onChange={handleInviteInputChange}
+                    placeholder={
+                      placeholder ?? "https://relay.example.com/invite/abc123"
+                    }
+                    spellCheck={false}
+                    type="text"
+                    value={inviteInput}
+                  />
+                </span>
+              </label>
+            </div>
+          </Card>
+        )
       ) : (
         <div className="space-y-1.5 text-left">
           <label
@@ -432,7 +517,10 @@ export function InviteRedeemForm({
           aria-hidden={!showInvalidInviteTip}
           aria-live="polite"
           className={cn(
-            "absolute top-[calc(100%+2rem)] mt-4 min-h-5 w-full max-w-4xl text-center text-sm text-[#717106] transition-opacity duration-150 ease-out",
+            "mt-4 min-h-5 w-full max-w-4xl text-sm text-[#717106] transition-opacity duration-150 ease-out",
+            cardLayout
+              ? "relative text-left"
+              : "absolute top-[calc(100%+2rem)] text-center",
             showInvalidInviteTip ? "opacity-100" : "opacity-0",
           )}
           data-testid="invalid-invite-tip"
diff --git a/desktop/src/features/onboarding/ui/JoinPolicyNotice.tsx b/desktop/src/features/onboarding/ui/JoinPolicyNotice.tsx
index 4d5e6771b6a..4308d35467d 100644
--- a/desktop/src/features/onboarding/ui/JoinPolicyNotice.tsx
+++ b/desktop/src/features/onboarding/ui/JoinPolicyNotice.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 import { openUrl } from "@tauri-apps/plugin-opener";
 
 import { joinPolicyDocumentUrl, type JoinPolicy } from "@/shared/api/invites";
+import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
 import { Checkbox } from "@/shared/ui/checkbox";
 
@@ -13,25 +14,31 @@ type JoinPolicyNoticeProps = {
   policy: JoinPolicy;
   /** Relay hosting the policy documents the links below point at. */
   relayWsUrl: string;
+  /** Optional safe host for surfaces that must not open external documents. */
+  onOpenDocument?: (document: "terms" | "privacy") => void;
+  /** Use primary page text where a surface needs stronger consent contrast. */
+  textTone?: "muted" | "foreground";
 };
 
 /**
  * Join-policy consent block shown on every join surface.
  *
- * The Terms/Privacy links open the relay-hosted document pages
- * (`/api/join-policy/terms|privacy`) in the system browser via the OS
- * opener. They must NOT navigate or render in-app: these surfaces exist
- * before onboarding completes, where the router (required by the message
- * Markdown component) is not mounted — an in-app render tears down the
- * whole React tree.
+ * The Terms/Privacy links normally open the relay-hosted document pages
+ * (`/api/join-policy/terms|privacy`) in the system browser via the OS opener.
+ * A non-networked host may intercept those actions. They must NOT navigate or
+ * render in-app: these surfaces exist before onboarding completes, where the
+ * router (required by the message Markdown component) is not mounted — an
+ * in-app render tears down the whole React tree.
  */
 export function JoinPolicyNotice({
   ageConfirmed,
   agreementConfirmed,
   onAgeConfirmedChange,
   onAgreementConfirmedChange,
+  onOpenDocument,
   policy,
   relayWsUrl,
+  textTone = "muted",
 }: JoinPolicyNoticeProps) {
   const ageConfirmationId = React.useId();
   const agreementConfirmationId = React.useId();
@@ -49,7 +56,12 @@ export function JoinPolicyNotice({
             }
           />
           <label
-            className="cursor-pointer text-xs leading-5 text-muted-foreground"
+            className={cn(
+              "cursor-pointer text-xs leading-5",
+              textTone === "foreground"
+                ? "text-foreground"
+                : "text-muted-foreground",
+            )}
             htmlFor={ageConfirmationId}
           >
             I am 18 years of age or older.
@@ -68,16 +80,30 @@ export function JoinPolicyNotice({
             }
           />
           <label
-            className="cursor-pointer text-xs leading-5 text-muted-foreground"
+            className={cn(
+              "cursor-pointer text-xs leading-5",
+              textTone === "foreground"
+                ? "text-foreground"
+                : "text-muted-foreground",
+            )}
             htmlFor={agreementConfirmationId}
           >
             I agree to the Buzz{" "}
             {policy.termsMarkdown ? (
               <Button
-                className="h-auto p-0 align-baseline text-xs no-underline hover:underline focus-visible:no-underline"
+                className={cn(
+                  "h-auto p-0 align-baseline text-xs",
+                  textTone === "foreground"
+                    ? "font-medium text-foreground underline hover:underline focus-visible:underline"
+                    : "no-underline hover:underline focus-visible:no-underline",
+                )}
                 onClick={(event) => {
                   event.preventDefault();
-                  void openUrl(joinPolicyDocumentUrl(relayWsUrl, "terms"));
+                  if (onOpenDocument) {
+                    onOpenDocument("terms");
+                  } else {
+                    void openUrl(joinPolicyDocumentUrl(relayWsUrl, "terms"));
+                  }
                 }}
                 type="button"
                 variant="link"
@@ -88,10 +114,19 @@ export function JoinPolicyNotice({
             {policy.termsMarkdown && policy.privacyMarkdown ? " and " : null}
             {policy.privacyMarkdown ? (
               <Button
-                className="h-auto p-0 align-baseline text-xs no-underline hover:underline focus-visible:no-underline"
+                className={cn(
+                  "h-auto p-0 align-baseline text-xs",
+                  textTone === "foreground"
+                    ? "font-medium text-foreground underline hover:underline focus-visible:underline"
+                    : "no-underline hover:underline focus-visible:no-underline",
+                )}
                 onClick={(event) => {
                   event.preventDefault();
-                  void openUrl(joinPolicyDocumentUrl(relayWsUrl, "privacy"));
+                  if (onOpenDocument) {
+                    onOpenDocument("privacy");
+                  } else {
+                    void openUrl(joinPolicyDocumentUrl(relayWsUrl, "privacy"));
+                  }
                 }}
                 type="button"
                 variant="link"
diff --git a/desktop/src/features/onboarding/ui/KeySignInPreview.tsx b/desktop/src/features/onboarding/ui/KeySignInPreview.tsx
new file mode 100644
index 00000000000..f29b14749cc
--- /dev/null
+++ b/desktop/src/features/onboarding/ui/KeySignInPreview.tsx
@@ -0,0 +1,132 @@
+import * as React from "react";
+
+import { cn } from "@/shared/lib/cn";
+import { StyledQrCode } from "@/shared/ui/styled-qr-code";
+import { NostrKeyImportForm } from "./NostrKeyImportForm";
+import {
+  OnboardingPreviewStep,
+  useOnboardingPreviewCardLayout,
+} from "./OnboardingPreviewShell";
+import { OnboardingSlideTransition } from "./OnboardingSlideTransition";
+
+export function KeySignInPreview({
+  onBack,
+  onContinue,
+  total,
+}: {
+  onBack: () => void;
+  onContinue: () => void;
+  total: number;
+}) {
+  const cardLayout = useOnboardingPreviewCardLayout();
+  const [keyImportDialog, setKeyImportDialog] = React.useState<
+    "backup" | "phone" | null
+  >(null);
+
+  return (
+    <OnboardingPreviewStep
+      onBack={keyImportDialog ? () => setKeyImportDialog(null) : onBack}
+      testId="onboarding-preview-sign-in-key"
+      total={total}
+    >
+      <OnboardingSlideTransition
+        className={cn(
+          "flex w-full flex-col",
+          cardLayout
+            ? "min-h-0 max-w-[560px] items-stretch justify-start text-left"
+            : "min-h-[calc(100dvh-13.25rem)] max-w-[837px] items-center text-center",
+        )}
+        transitionKey={`preview-sign-in-key-${keyImportDialog ?? "key"}`}
+      >
+        {keyImportDialog === "backup" ? (
+          <div className="w-full" data-testid="backup-recovery-dialog">
+            <h1 className="text-title font-normal text-foreground">
+              Restore from a backup file
+            </h1>
+            <p className="mt-2 max-w-[440px] text-base leading-6 text-foreground/80">
+              Choose the encrypted backup file you saved from Buzz.
+            </p>
+            <NostrKeyImportForm
+              mode="backup"
+              onBack={() => setKeyImportDialog(null)}
+              onImport={async () => {
+                setKeyImportDialog(null);
+                onContinue();
+              }}
+              previewMode
+              showBack={false}
+              showPasswordStageBack={false}
+              variant="spotlight"
+            />
+          </div>
+        ) : keyImportDialog === "phone" ? (
+          <div className="w-full" data-testid="phone-recovery-dialog">
+            <h1 className="text-title font-normal text-foreground">
+              Scan to sign in
+            </h1>
+            <p className="mt-2 max-w-[440px] text-base leading-6 text-foreground/80">
+              Scan this code with a device where you’re currently signed in to
+              Buzz.
+            </p>
+            <div className="mx-auto mt-6 flex size-[290px] items-center justify-center rounded-xl border border-border/70 bg-white p-6">
+              <StyledQrCode
+                centerImageSrc="/app-icon@2x.png"
+                size={240}
+                title="Preview identity recovery QR code"
+                value="buzz-pair://preview-identity-recovery"
+              />
+            </div>
+          </div>
+        ) : (
+          <>
+            <h1 className="text-title font-normal text-foreground">
+              Enter your private key
+            </h1>
+            <div
+              className={cn(
+                "max-w-[440px] text-sm leading-6 text-foreground/80",
+                cardLayout ? "mt-2" : "mt-5",
+              )}
+            >
+              <p>
+                Paste your private key to sign in to Buzz. You can also use a{" "}
+                <button
+                  className="rounded-sm font-medium underline decoration-foreground/40 underline-offset-4 transition-colors hover:decoration-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                  data-testid="nostr-import-file-button"
+                  onClick={() => setKeyImportDialog("backup")}
+                  type="button"
+                >
+                  backup file
+                </button>
+                , or{" "}
+                <button
+                  className="rounded-sm font-medium underline decoration-foreground/40 underline-offset-4 transition-colors hover:decoration-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                  data-testid="nostr-import-phone-link"
+                  onClick={() => setKeyImportDialog("phone")}
+                  type="button"
+                >
+                  recover from your phone
+                </button>
+                .
+              </p>
+            </div>
+            <div
+              className={cn(
+                "w-full",
+                !cardLayout && "buzz-onboarding-key-import-position",
+              )}
+            >
+              <NostrKeyImportForm
+                onBack={onBack}
+                onImport={async () => onContinue()}
+                previewMode
+                showBack={false}
+                variant="spotlight"
+              />
+            </div>
+          </>
+        )}
+      </OnboardingSlideTransition>
+    </OnboardingPreviewStep>
+  );
+}
diff --git a/desktop/src/features/onboarding/ui/NostrKeyImportForm.tsx b/desktop/src/features/onboarding/ui/NostrKeyImportForm.tsx
index 814f2287412..216a9696583 100644
--- a/desktop/src/features/onboarding/ui/NostrKeyImportForm.tsx
+++ b/desktop/src/features/onboarding/ui/NostrKeyImportForm.tsx
@@ -21,6 +21,9 @@ import {
   BackupPasswordTimeline,
 } from "./BackupPasswordTimeline";
 import { OnboardingFooter } from "./OnboardingFooter";
+import { OnboardingPreviewInput } from "./OnboardingPreviewInput";
+import { useOnboardingPreviewCardLayout } from "./OnboardingPreviewShell";
+import { ONBOARDING_PREVIEW_CARD_INPUT_CLASS } from "./onboardingPreviewCardStyles";
 
 const NOSTR_KEY_FILE_MAX_BYTES = 1024;
 
@@ -45,6 +48,8 @@ type NostrKeyImportFormProps = {
   footerMode?: "onboarding" | "inline";
   /** "spotlight" is the first-launch treatment: glowy centered input, no drop zone, pill buttons. */
   variant?: "default" | "spotlight";
+  /** Use fixed in-memory presentation data and bypass credential parsing. */
+  previewMode?: boolean;
 };
 
 /**
@@ -67,7 +72,9 @@ export function NostrKeyImportForm({
   mode = "key",
   footerMode = "onboarding",
   variant = "default",
+  previewMode = false,
 }: NostrKeyImportFormProps) {
+  const cardLayout = useOnboardingPreviewCardLayout();
   const [nsecInput, setNsecInput] = React.useState("");
   const [passphrase, setPassphrase] = React.useState("");
   const [isImporting, setIsImporting] = React.useState(false);
@@ -101,7 +108,7 @@ export function NostrKeyImportForm({
       setPassphrase("");
     }
   }, [isPasswordStage]);
-  const isValid = keyImportSubmitEnabled(nsecInput, passphrase);
+  const isValid = previewMode || keyImportSubmitEnabled(nsecInput, passphrase);
   const isInteractionDisabled = disabled || isImporting;
   const showInvalidHint =
     hasInput &&
@@ -217,7 +224,10 @@ export function NostrKeyImportForm({
     setImportError(null);
 
     try {
-      await onImport(trimmedInput, isPasswordStage ? passphrase : undefined);
+      await onImport(
+        previewMode ? "" : trimmedInput,
+        isPasswordStage ? passphrase : undefined,
+      );
     } catch (error) {
       setImportError(
         error instanceof Error ? error.message : "Couldn't import this key.",
@@ -235,6 +245,7 @@ export function NostrKeyImportForm({
     onImport,
     onImportingChange,
     passphrase,
+    previewMode,
     trimmedInput,
   ]);
 
@@ -275,41 +286,40 @@ export function NostrKeyImportForm({
       }}
     >
       {!isPasswordStage && mode === "key" ? (
-        <div className="space-y-1.5 text-left">
+        <div className={cn("text-left", !cardLayout && "space-y-1.5")}>
           <label
             className={cn(
               "text-sm font-medium text-foreground",
-              variant === "spotlight" && "sr-only",
+              cardLayout && "mb-2 block",
+              variant === "spotlight" && !cardLayout && "sr-only",
             )}
             htmlFor="nostr-private-key"
           >
             Private key
           </label>
           {variant === "spotlight" ? (
-            <Card
-              className="w-full px-8 py-12"
-              data-testid="nostr-import-card"
-              variant="textured"
-            >
+            cardLayout ? (
               <div className="relative w-full">
-                <Input
+                <OnboardingPreviewInput
                   autoComplete="off"
                   autoCorrect="off"
-                  // Symmetric px reserves the absolutely positioned toggle's
-                  // footprint on BOTH sides, so the centered key text never
-                  // runs under the eye control and stays optically centered.
-                  className="h-[3.6875rem] rounded-none border-0 bg-transparent px-10 text-center font-mono !text-4xl text-[color:var(--buzz-onboarding-backup-ink)] shadow-none placeholder:text-foreground/30 focus-visible:ring-0"
+                  className={cn(
+                    ONBOARDING_PREVIEW_CARD_INPUT_CLASS,
+                    "pr-12 font-mono",
+                  )}
                   data-testid="nostr-import-nsec-input"
                   id="nostr-private-key"
                   onChange={(event) => {
+                    if (previewMode) return;
                     setNsecInput(event.target.value);
                     setImportError(null);
                   }}
                   placeholder="Enter your key here"
+                  readOnly={previewMode}
                   ref={inputRef}
                   spellCheck={false}
                   type={isRevealed ? "text" : "password"}
-                  value={nsecInput}
+                  value={previewMode ? `nsec1${"•".repeat(24)}` : nsecInput}
                 />
                 {/* Absolutely positioned so appearing/disappearing never resizes
                   the input or shifts its centered text; fades with hasInput. */}
@@ -319,7 +329,7 @@ export function NostrKeyImportForm({
                     isRevealed ? "Hide private key" : "Reveal private key"
                   }
                   className={cn(
-                    "absolute right-8 top-1/2 h-10 w-10 -translate-y-1/2 text-muted-foreground transition-opacity duration-300 hover:bg-foreground/10 hover:text-foreground motion-reduce:transition-none",
+                    "absolute right-2 top-1/2 h-8 w-8 -translate-y-1/2 text-muted-foreground transition-opacity duration-300 hover:bg-foreground/10 hover:text-foreground motion-reduce:transition-none",
                     hasInput ? "opacity-100" : "pointer-events-none opacity-0",
                   )}
                   data-testid="nostr-import-reveal-toggle"
@@ -330,13 +340,66 @@ export function NostrKeyImportForm({
                   variant="ghost"
                 >
                   {isRevealed ? (
-                    <EyeOff aria-hidden="true" className="h-6 w-6" />
+                    <EyeOff aria-hidden="true" className="h-4 w-4" />
                   ) : (
-                    <Eye aria-hidden="true" className="h-6 w-6" />
+                    <Eye aria-hidden="true" className="h-4 w-4" />
                   )}
                 </Button>
               </div>
-            </Card>
+            ) : (
+              <Card
+                className="w-full px-8 py-12"
+                data-testid="nostr-import-card"
+                variant="textured"
+              >
+                <div className="relative w-full">
+                  <Input
+                    autoComplete="off"
+                    autoCorrect="off"
+                    // Symmetric px reserves the absolutely positioned toggle's
+                    // footprint so the key text never runs under the eye control.
+                    className="h-[3.6875rem] rounded-none border-0 bg-transparent px-10 text-center font-mono !text-4xl text-[color:var(--buzz-onboarding-backup-ink)] shadow-none placeholder:text-foreground/30 focus-visible:ring-0"
+                    data-testid="nostr-import-nsec-input"
+                    id="nostr-private-key"
+                    onChange={(event) => {
+                      if (previewMode) return;
+                      setNsecInput(event.target.value);
+                      setImportError(null);
+                    }}
+                    placeholder="Enter your key here"
+                    readOnly={previewMode}
+                    ref={inputRef}
+                    spellCheck={false}
+                    type={isRevealed ? "text" : "password"}
+                    value={previewMode ? `nsec1${"•".repeat(24)}` : nsecInput}
+                  />
+                  <Button
+                    aria-hidden={!hasInput}
+                    aria-label={
+                      isRevealed ? "Hide private key" : "Reveal private key"
+                    }
+                    className={cn(
+                      "absolute right-8 top-1/2 h-10 w-10 -translate-y-1/2 text-muted-foreground transition-opacity duration-300 hover:bg-foreground/10 hover:text-foreground motion-reduce:transition-none",
+                      hasInput
+                        ? "opacity-100"
+                        : "pointer-events-none opacity-0",
+                    )}
+                    data-testid="nostr-import-reveal-toggle"
+                    onClick={() => setIsRevealed((current) => !current)}
+                    size="icon"
+                    tabIndex={hasInput ? 0 : -1}
+                    type="button"
+                    variant="ghost"
+                  >
+                    {isRevealed ? (
+                      <EyeOff aria-hidden="true" className="h-6 w-6" />
+                    ) : (
+                      <Eye aria-hidden="true" className="h-6 w-6" />
+                    )}
+                  </Button>
+                </div>
+              </Card>
+            )
           ) : (
             <Input
               autoComplete="off"
@@ -535,7 +598,8 @@ export function NostrKeyImportForm({
         <div
           className={cn(
             "min-h-8",
-            variant === "spotlight" && "mt-6 text-center",
+            variant === "spotlight" &&
+              (cardLayout ? "mt-6 text-left" : "mt-6 text-center"),
           )}
           data-testid="nostr-import-feedback"
         >
@@ -547,7 +611,12 @@ export function NostrKeyImportForm({
                 className="space-y-1 text-sm"
                 data-testid="nostr-import-npub-preview"
               >
-                <p className="flex items-center justify-center gap-1.5 text-foreground">
+                <p
+                  className={cn(
+                    "flex items-center gap-1.5 text-foreground",
+                    cardLayout ? "justify-start" : "justify-center",
+                  )}
+                >
                   <Check aria-hidden="true" className="h-4 w-4 shrink-0" />
                   Nostr identity found
                 </p>
diff --git a/desktop/src/features/onboarding/ui/OnboardingFooter.tsx b/desktop/src/features/onboarding/ui/OnboardingFooter.tsx
index 620d2c7a0bc..014169ef5cb 100644
--- a/desktop/src/features/onboarding/ui/OnboardingFooter.tsx
+++ b/desktop/src/features/onboarding/ui/OnboardingFooter.tsx
@@ -1,12 +1,20 @@
 import * as React from "react";
 import { createPortal } from "react-dom";
+import { ChevronLeft } from "lucide-react";
 
 import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
+import { ONBOARDING_PREVIEW_SECONDARY_CTA_CLASS } from "./onboardingPreviewCardStyles";
 
-const OnboardingFooterTargetContext = React.createContext<HTMLElement | null>(
-  null,
-);
+type OnboardingFooterPlacement = "card" | "viewport";
+
+type OnboardingFooterTarget = {
+  element: HTMLElement | null;
+  placement: OnboardingFooterPlacement;
+};
+
+const OnboardingFooterTargetContext =
+  React.createContext<OnboardingFooterTarget | null>(null);
 
 /** Configuration for the provider-rendered, bottom-docked Back button. */
 export type OnboardingBackAction = {
@@ -32,14 +40,53 @@ export type OnboardingBackAction = {
 export function OnboardingFooterProvider({
   backAction,
   children,
+  placement = "viewport",
 }: {
   backAction?: OnboardingBackAction;
   children: React.ReactNode;
+  placement?: OnboardingFooterPlacement;
 }) {
   const [target, setTarget] = React.useState<HTMLElement | null>(null);
 
+  if (placement === "card") {
+    return (
+      <OnboardingFooterTargetContext.Provider
+        value={{ element: target, placement }}
+      >
+        {children}
+        <div className="mt-8 flex min-h-10 w-full shrink-0 items-center justify-between gap-4 pt-6">
+          <div className="flex min-w-0 flex-1 justify-start">
+            {backAction ? (
+              <Button
+                aria-label={backAction.label ?? "Back"}
+                className={cn(
+                  "size-10 rounded-full p-0 [&_svg]:size-5",
+                  ONBOARDING_PREVIEW_SECONDARY_CTA_CLASS,
+                )}
+                data-testid={backAction.testId ?? "onboarding-back"}
+                disabled={backAction.disabled}
+                onClick={backAction.onClick}
+                type="button"
+                variant="ghost"
+              >
+                <ChevronLeft aria-hidden="true" />
+              </Button>
+            ) : null}
+          </div>
+          <div
+            className="flex min-w-0 flex-1 justify-end"
+            data-testid="onboarding-footer-slot"
+            ref={setTarget}
+          />
+        </div>
+      </OnboardingFooterTargetContext.Provider>
+    );
+  }
+
   return (
-    <OnboardingFooterTargetContext.Provider value={target}>
+    <OnboardingFooterTargetContext.Provider
+      value={{ element: target, placement }}
+    >
       {children}
       {/* Scrim: on pages taller than the viewport, content scrolls under the
           docked CTA. This bottom-anchored fade to the shell's bottom color
@@ -85,11 +132,15 @@ export function OnboardingFooter({
   children: React.ReactNode;
   className?: string;
 }) {
-  const target = React.useContext(OnboardingFooterTargetContext);
+  const targetContext = React.useContext(OnboardingFooterTargetContext);
+  const target = targetContext?.element ?? null;
+  const placement = targetContext?.placement ?? "viewport";
   const group = (
     <div
       className={cn(
-        "flex w-full max-w-[500px] flex-col items-center gap-3",
+        placement === "card"
+          ? "flex w-auto max-w-full flex-row flex-wrap items-center justify-end gap-3 [&_button]:h-10"
+          : "flex w-full max-w-[500px] flex-col items-center gap-3",
         // The docked slot is click-through (`pointer-events-none`); re-enable
         // pointer events on the CTA group itself. Inline (no slot) needs no
         // override since it sits in normal flow.
diff --git a/desktop/src/features/onboarding/ui/OnboardingPreviewApp.tsx b/desktop/src/features/onboarding/ui/OnboardingPreviewApp.tsx
new file mode 100644
index 00000000000..cda4824097a
--- /dev/null
+++ b/desktop/src/features/onboarding/ui/OnboardingPreviewApp.tsx
@@ -0,0 +1,811 @@
+import * as React from "react";
+
+import type { JoinPolicy } from "@/shared/api/invites";
+import { resetAvatarPresentations } from "@/features/profile/avatarPresentationStore";
+import { cn } from "@/shared/lib/cn";
+import { Button } from "@/shared/ui/button";
+import { StartupWindowDragRegion } from "@/shared/ui/StartupWindowDragRegion";
+import {
+  ONBOARDING_PREVIEW_LANDING_ACTIONS,
+  type OnboardingPreviewPage,
+  type OnboardingPreviewVariant,
+  resolveOnboardingPreviewJourney,
+} from "../onboardingPreview";
+import { BackupStep } from "./BackupStep";
+import {
+  resetEncryptedBackupSession,
+  useEncryptedBackupSession,
+} from "./EncryptedBackupCreator";
+import {
+  HARNESS_CONNECTION_OPTIONS,
+  HarnessConnectionDetailPreview,
+  HarnessConnectionHelpPreview,
+  HarnessConnectionMethodPreview,
+  type HarnessConnectionMethod,
+  HarnessConnectionPreview,
+  runtimeNeedsOnboardingConnection,
+} from "./HarnessConnectionStep";
+import { JoinPolicyNotice } from "./JoinPolicyNotice";
+import { KeySignInPreview } from "./KeySignInPreview";
+import {
+  IdentityKeyHelpDialog,
+  IdentityKeyHelpPreviewContent,
+} from "./IdentityKeyHelpDialog";
+import { LandingBees } from "./LandingBees";
+import {
+  ONBOARDING_LANDING_CTA_CLASS,
+  ONBOARDING_PRIMARY_CTA_CLASS,
+  ONBOARDING_SECONDARY_CTA_CLASS,
+} from "./OnboardingChrome";
+import { OnboardingFooter, OnboardingFooterProvider } from "./OnboardingFooter";
+import { PreviewCredentialsFields } from "./OnboardingPreviewCredentials";
+import {
+  BackupPasswordPreview,
+  CommunityChoicePreview,
+  CommunityConnectingPreview,
+  CommunityCreatePreview,
+  CommunityEntryPreview,
+  CommunityHomePreview,
+  CommunityProfilePreview,
+  type CommunityPreviewRoute,
+  DefaultConfigPreview,
+  PasswordReset,
+  StarterTeamPreview,
+  WelcomeChannelPreview,
+} from "./OnboardingPreviewJourney";
+import {
+  OnboardingPreviewLayoutProvider,
+  OnboardingPreviewStep,
+  useOnboardingPreviewCardLayout,
+} from "./OnboardingPreviewShell";
+import { OnboardingPreviewControls } from "./OnboardingPreviewControls";
+import { OnboardingSlideTransition } from "./OnboardingSlideTransition";
+import { SetupStepPreview } from "./SetupStepPreview";
+
+const EMAIL_SIGNUP_POLICY: JoinPolicy = {
+  ageAttestationRequired: true,
+  privacyMarkdown: "available",
+  termsMarkdown: "available",
+  version: "email-signup-workshop",
+};
+
+function Landing({
+  onNavigate,
+  variant,
+}: {
+  onNavigate: (page: OnboardingPreviewPage) => void;
+  variant: OnboardingPreviewVariant;
+}) {
+  const isV3 = variant === "v3";
+  const landingActions = ONBOARDING_PREVIEW_LANDING_ACTIONS[variant];
+
+  return (
+    <div
+      className="buzz-onboarding-neutral-theme buzz-startup-shell buzz-onboarding-welcome flex max-h-dvh items-start justify-center overflow-hidden px-4 py-8 text-foreground"
+      data-testid="onboarding-preview-landing"
+    >
+      <StartupWindowDragRegion />
+      <LandingBees />
+      <OnboardingFooterProvider>
+        <div className="relative my-auto flex w-full max-w-[720px] flex-col items-center text-center">
+          <OnboardingSlideTransition
+            className="flex w-full max-w-[720px] flex-col items-center text-center"
+            transitionKey="preview-landing"
+          >
+            <img
+              alt="Buzz"
+              className="w-full max-w-[600px]"
+              src="/landing/buzz-wordmark.png"
+            />
+            <p className="mt-2 max-w-[560px] text-center text-2xl font-normal leading-none text-foreground">
+              Your people, your agents, your projects —<br />
+              all in one place.
+            </p>
+            <div className="mt-10 flex flex-col items-center gap-3">
+              <Button
+                className={ONBOARDING_LANDING_CTA_CLASS}
+                onClick={() => onNavigate(landingActions.primary.page)}
+                type="button"
+              >
+                {landingActions.primary.label}
+              </Button>
+              <Button
+                className={`${ONBOARDING_SECONDARY_CTA_CLASS} px-5`}
+                onClick={() => onNavigate(landingActions.secondary.page)}
+                type="button"
+                variant="ghost"
+              >
+                {landingActions.secondary.label}
+              </Button>
+            </div>
+            {isV3 ? (
+              <OnboardingFooter className="max-w-none">
+                <Button
+                  className="h-auto text-foreground/70 hover:text-foreground"
+                  data-testid="onboarding-preview-without-email"
+                  onClick={() => onNavigate("backup-options")}
+                  type="button"
+                  variant="link"
+                >
+                  Start with a private key
+                </Button>
+              </OnboardingFooter>
+            ) : (
+              <IdentityKeyHelpDialog previewMode v3Presentation={false} />
+            )}
+          </OnboardingSlideTransition>
+        </div>
+      </OnboardingFooterProvider>
+    </div>
+  );
+}
+
+function EmailSignup({
+  password,
+  onBack,
+  onContinue,
+  onPasswordChange,
+  total,
+}: {
+  password: string;
+  onBack: () => void;
+  onContinue: (email: string) => void;
+  onPasswordChange: (password: string) => void;
+  total: number;
+}) {
+  const cardLayout = useOnboardingPreviewCardLayout();
+  const [email, setEmail] = React.useState("");
+  const [confirmPassword, setConfirmPassword] = React.useState("");
+  const [ageConfirmed, setAgeConfirmed] = React.useState(false);
+  const [agreementConfirmed, setAgreementConfirmed] = React.useState(false);
+  const [openPolicyDocument, setOpenPolicyDocument] = React.useState<
+    "terms" | "privacy" | null
+  >(null);
+
+  return (
+    <OnboardingPreviewStep
+      onBack={onBack}
+      testId="onboarding-preview-email"
+      total={total}
+    >
+      <OnboardingSlideTransition
+        className={cn(
+          "flex min-h-0 w-full max-w-[500px] flex-col",
+          cardLayout ? "items-stretch" : "items-center",
+        )}
+        transitionKey="preview-email"
+      >
+        <h1 className="text-title font-normal text-foreground">
+          Create an account
+        </h1>
+        <p className="mt-5 max-w-[440px] text-sm leading-6 text-foreground/80">
+          Enter your email address to get started.
+        </p>
+        <form
+          className="mt-8 w-full space-y-5 text-left"
+          onSubmit={(event) => {
+            event.preventDefault();
+            onContinue(email);
+          }}
+        >
+          <PreviewCredentialsFields
+            email={email}
+            emailId="onboarding-preview-email-address"
+            onEmailChange={setEmail}
+            onPasswordChange={onPasswordChange}
+            confirmPassword={confirmPassword}
+            onConfirmPasswordChange={setConfirmPassword}
+            password={password}
+            passwordAutoComplete="new-password"
+            passwordId="onboarding-preview-password"
+            passwordPlaceholder="Choose your password"
+            showPasswordStrength
+          />
+          <JoinPolicyNotice
+            ageConfirmed={ageConfirmed}
+            agreementConfirmed={agreementConfirmed}
+            onAgeConfirmedChange={setAgeConfirmed}
+            onAgreementConfirmedChange={setAgreementConfirmed}
+            onOpenDocument={setOpenPolicyDocument}
+            policy={EMAIL_SIGNUP_POLICY}
+            relayWsUrl="wss://preview.invalid"
+            textTone="foreground"
+          />
+          <OnboardingFooter>
+            <Button
+              className={ONBOARDING_PRIMARY_CTA_CLASS}
+              data-testid="onboarding-preview-email-continue"
+              onClick={() => onContinue(email)}
+              type="button"
+            >
+              Continue
+            </Button>
+          </OnboardingFooter>
+        </form>
+        {openPolicyDocument ? (
+          <div
+            aria-modal="true"
+            className="fixed inset-0 z-[110] flex items-center justify-center bg-black/30 p-6 backdrop-blur-sm"
+            role="dialog"
+          >
+            <div className="w-full max-w-lg rounded-2xl border border-foreground/15 bg-background p-6 text-left shadow-xl">
+              <h2 className="text-xl font-medium text-foreground">
+                {openPolicyDocument === "terms"
+                  ? "Terms of Service"
+                  : "Privacy Policy"}
+              </h2>
+              <p className="mt-3 text-sm leading-6 text-foreground/80">
+                {openPolicyDocument === "terms"
+                  ? "Review the terms that apply when you use Buzz."
+                  : "Review how information is handled when you use Buzz."}
+              </p>
+              <Button
+                className="mt-5"
+                onClick={() => setOpenPolicyDocument(null)}
+                type="button"
+              >
+                Close
+              </Button>
+            </div>
+          </div>
+        ) : null}
+      </OnboardingSlideTransition>
+    </OnboardingPreviewStep>
+  );
+}
+
+function AgentHarnessStep({
+  onBack,
+  onNext,
+}: {
+  onBack: () => void;
+  onNext: () => void;
+}) {
+  return (
+    <OnboardingPreviewStep
+      current={3}
+      onBack={onBack}
+      testId="onboarding-preview-setup"
+    >
+      <SetupStepPreview onBack={onBack} onNext={onNext} />
+    </OnboardingPreviewStep>
+  );
+}
+
+function EmailSignIn({
+  email,
+  onBack,
+  onContinue,
+  onEmailChange,
+  onForgotPassword,
+  onSignInWithKey,
+  total,
+}: {
+  email: string;
+  onBack: () => void;
+  onContinue: () => void;
+  onEmailChange: (email: string) => void;
+  onForgotPassword: () => void;
+  onSignInWithKey: () => void;
+  total: number;
+}) {
+  const cardLayout = useOnboardingPreviewCardLayout();
+  const [password, setPassword] = React.useState("");
+  const canContinue = email.trim().length > 0 && password.length > 0;
+
+  return (
+    <OnboardingPreviewStep
+      onBack={onBack}
+      testId="onboarding-preview-sign-in"
+      total={total}
+    >
+      <OnboardingSlideTransition
+        className={cn(
+          "flex min-h-0 w-full max-w-[500px] flex-col",
+          cardLayout ? "items-stretch" : "items-center",
+        )}
+        transitionKey="preview-sign-in"
+      >
+        <h1 className="text-title font-normal text-foreground">Sign in</h1>
+        <p className="mt-5 max-w-[440px] text-sm leading-6 text-foreground/80">
+          Enter your email address and password to sign in.
+        </p>
+        <form
+          className="mt-8 w-full space-y-5 text-left"
+          onSubmit={(event) => {
+            event.preventDefault();
+            if (canContinue) onContinue();
+          }}
+        >
+          <PreviewCredentialsFields
+            email={email}
+            emailId="onboarding-preview-sign-in-email"
+            onEmailChange={onEmailChange}
+            onPasswordChange={setPassword}
+            password={password}
+            passwordAutoComplete="current-password"
+            passwordHelp={
+              <Button
+                className="h-auto justify-start p-0 text-xs font-medium text-foreground/70 no-underline hover:text-foreground hover:underline focus-visible:text-foreground focus-visible:underline"
+                onClick={onForgotPassword}
+                type="button"
+                variant="link"
+              >
+                Forgot password?
+              </Button>
+            }
+            passwordId="onboarding-preview-sign-in-password"
+            passwordPlaceholder="Enter your password"
+          />
+          <div className="flex w-full items-baseline gap-1.5 pt-1 text-sm text-foreground/70">
+            <span>or</span>
+            <Button
+              className="h-auto p-0 text-sm text-foreground"
+              data-testid="onboarding-preview-sign-in-with-key"
+              onClick={onSignInWithKey}
+              type="button"
+              variant="link"
+            >
+              Sign in with private key
+            </Button>
+          </div>
+        </form>
+        <OnboardingFooter>
+          <Button
+            className={ONBOARDING_PRIMARY_CTA_CLASS}
+            data-testid="onboarding-preview-sign-in-submit"
+            disabled={!canContinue}
+            onClick={onContinue}
+            type="button"
+          >
+            Sign in
+          </Button>
+        </OnboardingFooter>
+      </OnboardingSlideTransition>
+    </OnboardingPreviewStep>
+  );
+}
+
+export function OnboardingPreviewApp() {
+  const [run, setRun] = React.useState(0);
+  const [variant, setVariant] = React.useState<OnboardingPreviewVariant>("v3");
+  const [page, setPage] = React.useState<OnboardingPreviewPage>("landing");
+  const [signInEmail, setSignInEmail] = React.useState("");
+  const [signupPassword, setSignupPassword] = React.useState("");
+  const [passwordResetEmail, setPasswordResetEmail] = React.useState("");
+  const [installedHarnessIds, setInstalledHarnessIds] = React.useState(
+    () =>
+      new Set(
+        HARNESS_CONNECTION_OPTIONS.filter(
+          ({ runtime }) => runtime.availability === "available",
+        ).map(({ runtime }) => runtime.id),
+      ),
+  );
+  const [selectedHarnessId, setSelectedHarnessId] = React.useState("claude");
+  const [harnessConnectionMethod, setHarnessConnectionMethod] =
+    React.useState<HarnessConnectionMethod>("subscription");
+  const [harnessConnectionInOnboarding, setHarnessConnectionInOnboarding] =
+    React.useState(true);
+  const [
+    chooseHarnessConnectionMethodFirst,
+    setChooseHarnessConnectionMethodFirst,
+  ] = React.useState(true);
+  const [harnessDetailBackPage, setHarnessDetailBackPage] =
+    React.useState<OnboardingPreviewPage>("harness-connection");
+  const [setupBackPage, setSetupBackPage] =
+    React.useState<OnboardingPreviewPage>("landing");
+  const [communityRoute, setCommunityRoute] =
+    React.useState<CommunityPreviewRoute>("join");
+  const [communityName, setCommunityName] = React.useState("Block Community");
+  const [displayName, setDisplayName] = React.useState("");
+  const [avatarUrl, setAvatarUrl] = React.useState("");
+  const backupSession = useEncryptedBackupSession();
+  const journey = resolveOnboardingPreviewJourney(
+    variant,
+    harnessConnectionInOnboarding,
+  );
+  const selectedHarness =
+    HARNESS_CONNECTION_OPTIONS.find(
+      ({ runtime }) => runtime.id === selectedHarnessId,
+    ) ?? HARNESS_CONNECTION_OPTIONS[0];
+
+  React.useEffect(() => {
+    if (page === "landing") {
+      setPasswordResetEmail("");
+      setSignInEmail("");
+      setSignupPassword("");
+    }
+  }, [page]);
+
+  const restart = React.useCallback(() => {
+    resetAvatarPresentations();
+    resetEncryptedBackupSession(backupSession);
+    setPage("landing");
+    setPasswordResetEmail("");
+    setInstalledHarnessIds(
+      new Set(
+        HARNESS_CONNECTION_OPTIONS.filter(
+          ({ runtime }) => runtime.availability === "available",
+        ).map(({ runtime }) => runtime.id),
+      ),
+    );
+    setSelectedHarnessId("claude");
+    setHarnessConnectionMethod("subscription");
+    setHarnessDetailBackPage("harness-connection");
+    setRun((current) => current + 1);
+    setSignInEmail("");
+    setSignupPassword("");
+    setCommunityRoute("join");
+    setCommunityName("Block Community");
+    setDisplayName("");
+    setAvatarUrl("");
+  }, [backupSession]);
+
+  const changeVariant = React.useCallback(
+    (nextVariant: OnboardingPreviewVariant) => {
+      setVariant(nextVariant);
+      restart();
+    },
+    [restart],
+  );
+
+  const continueFromAccount = React.useCallback(
+    (backPage: OnboardingPreviewPage) => {
+      setSetupBackPage(backPage);
+      setPage(
+        variant === "v3" &&
+          harnessConnectionInOnboarding &&
+          chooseHarnessConnectionMethodFirst
+          ? "harness-connection-method"
+          : journey.afterAccount,
+      );
+    },
+    [
+      chooseHarnessConnectionMethodFirst,
+      harnessConnectionInOnboarding,
+      journey.afterAccount,
+      variant,
+    ],
+  );
+
+  let content: React.ReactNode;
+  if (page === "landing") {
+    content = <Landing key={run} onNavigate={setPage} variant={variant} />;
+  } else if (page === "email") {
+    content = (
+      <EmailSignup
+        password={signupPassword}
+        onBack={() => setPage("landing")}
+        onContinue={() => continueFromAccount("email")}
+        onPasswordChange={setSignupPassword}
+        total={journey.totalSteps}
+      />
+    );
+  } else if (page === "identity-key") {
+    content = (
+      <OnboardingPreviewStep
+        allowHorizontalActionOverflow={variant === "v3"}
+        onBack={() => setPage(variant === "v3" ? "backup-options" : "landing")}
+        testId="onboarding-preview-identity-key"
+        total={journey.totalSteps}
+      >
+        <BackupStep
+          direction="forward"
+          lockedBackupCreated={backupSession.created}
+          onNext={() => continueFromAccount("identity-key")}
+          onOpenPasswordBackup={() => setPage("backup-password")}
+          onShowOptions={() => {
+            setSetupBackPage("identity-key");
+            setPage("backup-options");
+          }}
+          optionsExpanded={false}
+          previewMode
+          returningFromSecurity={false}
+          showPreviewBackupShortcut={false}
+          v3Presentation={variant === "v3"}
+        />
+      </OnboardingPreviewStep>
+    );
+  } else if (page === "backup-options") {
+    content = (
+      <OnboardingPreviewStep
+        onBack={() => setPage(variant === "v3" ? "landing" : "identity-key")}
+        security={variant === "today"}
+        testId="onboarding-preview-backup-options"
+        total={journey.totalSteps}
+      >
+        <BackupStep
+          direction="forward"
+          lockedBackupCreated={backupSession.created}
+          onNext={() => setPage("identity-key")}
+          onOpenIdentityKeyHelp={() => setPage("identity-key-help")}
+          onOpenPasswordBackup={() => setPage("backup-password")}
+          onShowOptions={() => setPage("backup-options")}
+          optionsExpanded
+          previewMode
+          returningFromSecurity={false}
+          v3Presentation={variant === "v3"}
+        />
+      </OnboardingPreviewStep>
+    );
+  } else if (page === "identity-key-help") {
+    content = (
+      <OnboardingPreviewStep
+        onBack={() => setPage("backup-options")}
+        testId="onboarding-preview-identity-key-help"
+        total={journey.totalSteps}
+      >
+        <OnboardingSlideTransition
+          className="flex min-h-0 w-full max-w-[560px] flex-col items-stretch justify-start text-left"
+          transitionKey="preview-identity-key-help"
+        >
+          <IdentityKeyHelpPreviewContent />
+        </OnboardingSlideTransition>
+      </OnboardingPreviewStep>
+    );
+  } else if (page === "backup-password") {
+    content = (
+      <BackupPasswordPreview
+        onBack={() => setPage("identity-key")}
+        onDone={() =>
+          variant === "v3"
+            ? continueFromAccount("identity-key")
+            : setPage("identity-key")
+        }
+        session={backupSession}
+        total={journey.totalSteps}
+        v3Presentation={variant === "v3"}
+      />
+    );
+  } else if (page === "sign-in") {
+    content = (
+      <EmailSignIn
+        email={signInEmail}
+        onBack={() => setPage("landing")}
+        onContinue={() => continueFromAccount("sign-in")}
+        onEmailChange={setSignInEmail}
+        onForgotPassword={() => {
+          setPasswordResetEmail(signInEmail);
+          setPage("forgot-password");
+        }}
+        onSignInWithKey={() => setPage("sign-in-key")}
+        total={journey.totalSteps}
+      />
+    );
+  } else if (page === "forgot-password") {
+    content = (
+      <PasswordReset
+        initialEmail={passwordResetEmail}
+        onBack={() => setPage("sign-in")}
+        total={journey.totalSteps}
+      />
+    );
+  } else if (page === "sign-in-key") {
+    content = (
+      <KeySignInPreview
+        onBack={() => setPage(variant === "v3" ? "sign-in" : "landing")}
+        onContinue={() => continueFromAccount("sign-in-key")}
+        total={journey.totalSteps}
+      />
+    );
+  } else if (page === "setup") {
+    content = (
+      <AgentHarnessStep
+        onBack={() => setPage(setupBackPage)}
+        onNext={() => setPage("config")}
+      />
+    );
+  } else if (page === "harness-connection-method") {
+    content = (
+      <HarnessConnectionMethodPreview
+        onBack={() => setPage(setupBackPage)}
+        onSelect={(method) => {
+          setHarnessConnectionMethod(method);
+          if (method === "api") {
+            setSelectedHarnessId("buzz-agent");
+            setHarnessDetailBackPage("harness-connection-method");
+            setPage("harness-connection-detail");
+          } else {
+            setPage("harness-connection");
+          }
+        }}
+        onSetUpLater={() => setPage("community-choice")}
+        total={journey.totalSteps}
+      />
+    );
+  } else if (page === "harness-connection") {
+    content = (
+      <HarnessConnectionPreview
+        installedIds={installedHarnessIds}
+        method={
+          chooseHarnessConnectionMethodFirst
+            ? harnessConnectionMethod
+            : undefined
+        }
+        onBack={() =>
+          setPage(
+            chooseHarnessConnectionMethodFirst
+              ? "harness-connection-method"
+              : setupBackPage,
+          )
+        }
+        onHelp={
+          chooseHarnessConnectionMethodFirst
+            ? undefined
+            : () => setPage("harness-connection-help")
+        }
+        onSelect={(option) => {
+          setSelectedHarnessId(option.runtime.id);
+          setHarnessDetailBackPage("harness-connection");
+          const nextMethod = chooseHarnessConnectionMethodFirst
+            ? harnessConnectionMethod
+            : (option.methods[0] ?? "api");
+          setHarnessConnectionMethod(nextMethod);
+          setPage(
+            installedHarnessIds.has(option.runtime.id) &&
+              !runtimeNeedsOnboardingConnection(nextMethod, option.runtime.id)
+              ? "community-choice"
+              : "harness-connection-detail",
+          );
+        }}
+        total={journey.totalSteps}
+      />
+    );
+  } else if (page === "harness-connection-help") {
+    content = (
+      <HarnessConnectionHelpPreview
+        onBack={() => setPage("harness-connection")}
+        total={journey.totalSteps}
+      />
+    );
+  } else if (page === "harness-connection-detail") {
+    content = (
+      <HarnessConnectionDetailPreview
+        installed={installedHarnessIds.has(selectedHarness.runtime.id)}
+        lockMethod={chooseHarnessConnectionMethodFirst}
+        method={harnessConnectionMethod}
+        onBack={() => setPage(harnessDetailBackPage)}
+        onCheckAgain={() => {
+          setInstalledHarnessIds((current) =>
+            new Set(current).add(selectedHarness.runtime.id),
+          );
+          if (
+            !runtimeNeedsOnboardingConnection(
+              harnessConnectionMethod,
+              selectedHarness.runtime.id,
+            )
+          ) {
+            setPage("community-choice");
+          }
+        }}
+        onContinue={() => setPage("community-choice")}
+        onMethodChange={setHarnessConnectionMethod}
+        onUseDifferentHarness={
+          chooseHarnessConnectionMethodFirst &&
+          harnessConnectionMethod === "api" &&
+          selectedHarness.runtime.id === "buzz-agent"
+            ? () => setPage("harness-connection")
+            : undefined
+        }
+        option={selectedHarness}
+        total={journey.totalSteps}
+      />
+    );
+  } else if (page === "config") {
+    content = (
+      <DefaultConfigPreview
+        onBack={() => setPage("setup")}
+        onNext={() => setPage("community-choice")}
+      />
+    );
+  } else if (page === "community-choice") {
+    content = (
+      <CommunityChoicePreview
+        current={journey.communityStep}
+        includeExistingCommunity={journey.includeExistingCommunity}
+        onBack={() => setPage(journey.communityChoiceBack ?? setupBackPage)}
+        onChoose={(route) => {
+          setCommunityRoute(route);
+          setPage("community-entry");
+        }}
+        total={journey.totalSteps}
+      />
+    );
+  } else if (page === "community-entry") {
+    content =
+      communityRoute === "create" ? (
+        <CommunityCreatePreview
+          current={journey.communityStep}
+          onBack={() => setPage("community-choice")}
+          onContinue={(name) => {
+            setCommunityName(name);
+            setPage(journey.afterCommunityEntry);
+          }}
+          total={journey.totalSteps}
+        />
+      ) : (
+        <CommunityEntryPreview
+          current={journey.communityStep}
+          onBack={() => setPage("community-choice")}
+          onContinue={(name) => {
+            setCommunityName(name);
+            setPage(journey.afterCommunityEntry);
+          }}
+          previewVariant={variant}
+          route={communityRoute}
+          total={journey.totalSteps}
+        />
+      );
+  } else if (page === "community-connecting") {
+    content = (
+      <CommunityConnectingPreview
+        communityName={communityName}
+        onBack={() => setPage("community-entry")}
+        onContinue={() => setPage("community-profile")}
+      />
+    );
+  } else if (page === "community-profile") {
+    content = (
+      <CommunityProfilePreview
+        avatarUrl={avatarUrl}
+        current={journey.profileStep}
+        displayName={displayName}
+        onAvatarUrlChange={setAvatarUrl}
+        onBack={() => setPage("community-entry")}
+        onDisplayNameChange={setDisplayName}
+        onNext={() => setPage(journey.afterProfile)}
+        total={journey.totalSteps}
+      />
+    );
+  } else if (page === "starter-team") {
+    content = (
+      <StarterTeamPreview
+        onBack={() => setPage("community-profile")}
+        onNext={() => setPage("welcome-channel")}
+      />
+    );
+  } else if (page === "welcome-channel") {
+    content = (
+      <WelcomeChannelPreview
+        communityName={communityName}
+        onBack={() => setPage("starter-team")}
+        onNext={() => setPage("community-home")}
+      />
+    );
+  } else {
+    content = (
+      <CommunityHomePreview
+        avatarUrl={avatarUrl}
+        communityName={communityName}
+        displayName={displayName}
+      />
+    );
+  }
+
+  return (
+    <>
+      <OnboardingPreviewControls
+        chooseHarnessConnectionMethodFirst={chooseHarnessConnectionMethodFirst}
+        harnessConnectionInOnboarding={harnessConnectionInOnboarding}
+        onChooseHarnessConnectionMethodFirstChange={(enabled) => {
+          setChooseHarnessConnectionMethodFirst(enabled);
+          restart();
+        }}
+        onHarnessConnectionInOnboardingChange={(included) => {
+          setHarnessConnectionInOnboarding(included);
+          restart();
+        }}
+        onRestart={restart}
+        onVariantChange={changeVariant}
+        variant={variant}
+      />
+      <OnboardingPreviewLayoutProvider
+        card={
+          variant === "v3" && page !== "landing" && page !== "community-home"
+        }
+      >
+        {content}
+      </OnboardingPreviewLayoutProvider>
+    </>
+  );
+}
diff --git a/desktop/src/features/onboarding/ui/OnboardingPreviewControls.tsx b/desktop/src/features/onboarding/ui/OnboardingPreviewControls.tsx
new file mode 100644
index 00000000000..7c64283bed4
--- /dev/null
+++ b/desktop/src/features/onboarding/ui/OnboardingPreviewControls.tsx
@@ -0,0 +1,104 @@
+import { RotateCcw, ShieldCheck } from "lucide-react";
+
+import type { OnboardingPreviewVariant } from "../onboardingPreview";
+import { Button } from "@/shared/ui/button";
+import { Checkbox } from "@/shared/ui/checkbox";
+import { SegmentedControl } from "@/shared/ui/segmented-control";
+
+const PREVIEW_VARIANT_OPTIONS = [
+  { label: "Onboarding today", value: "today" },
+  { label: "V3", value: "v3" },
+] as const;
+
+export function OnboardingPreviewControls({
+  chooseHarnessConnectionMethodFirst,
+  harnessConnectionInOnboarding,
+  onChooseHarnessConnectionMethodFirstChange,
+  onHarnessConnectionInOnboardingChange,
+  onRestart,
+  onVariantChange,
+  variant,
+}: {
+  chooseHarnessConnectionMethodFirst: boolean;
+  harnessConnectionInOnboarding: boolean;
+  onChooseHarnessConnectionMethodFirstChange: (enabled: boolean) => void;
+  onHarnessConnectionInOnboardingChange: (included: boolean) => void;
+  onRestart: () => void;
+  onVariantChange: (variant: OnboardingPreviewVariant) => void;
+  variant: OnboardingPreviewVariant;
+}) {
+  return (
+    <aside
+      className="buzz-onboarding-neutral-theme fixed right-4 top-4 z-[100] flex w-[320px] max-w-[calc(100vw-2rem)] flex-col gap-3 rounded-2xl border border-foreground/15 bg-background/95 px-4 py-3 text-left shadow-lg backdrop-blur"
+      data-system-color-scheme="light"
+      data-testid="onboarding-preview-banner"
+    >
+      <div className="flex items-center gap-3">
+        <ShieldCheck className="h-5 w-5 shrink-0 text-primary" aria-hidden />
+        <div className="min-w-0 flex-1">
+          <p className="text-sm font-medium text-foreground">
+            Workshop preview
+          </p>
+          <p className="mt-0.5 text-xs leading-5 text-muted-foreground">
+            Changes in this workshop aren’t saved.
+          </p>
+        </div>
+        <Button
+          aria-label="Restart onboarding preview"
+          className="h-8 w-8 shrink-0 text-foreground hover:text-foreground"
+          data-testid="onboarding-preview-restart"
+          onClick={onRestart}
+          size="icon"
+          type="button"
+          variant="ghost"
+        >
+          <RotateCcw className="h-4 w-4" aria-hidden />
+        </Button>
+      </div>
+      <SegmentedControl
+        className="w-full"
+        legend="Onboarding version"
+        onValueChange={onVariantChange}
+        optionTestIdPrefix="onboarding-preview-variant"
+        options={PREVIEW_VARIANT_OPTIONS}
+        size="wide"
+        testId="onboarding-preview-variant"
+        value={variant}
+      />
+      {variant === "v3" ? (
+        <div className="space-y-2">
+          <label
+            className="flex cursor-pointer items-center gap-2 text-xs font-medium text-foreground"
+            htmlFor="onboarding-preview-harness-placement"
+          >
+            <Checkbox
+              checked={harnessConnectionInOnboarding}
+              className="border-foreground data-[state=checked]:bg-foreground data-[state=checked]:text-background"
+              id="onboarding-preview-harness-placement"
+              onCheckedChange={(checked) =>
+                onHarnessConnectionInOnboardingChange(checked === true)
+              }
+            />
+            <span>Harness connection in onboarding</span>
+          </label>
+          {harnessConnectionInOnboarding ? (
+            <label
+              className="flex cursor-pointer items-center gap-2 pl-6 text-xs font-medium text-foreground"
+              htmlFor="onboarding-preview-harness-method-first"
+            >
+              <Checkbox
+                checked={chooseHarnessConnectionMethodFirst}
+                className="border-foreground data-[state=checked]:bg-foreground data-[state=checked]:text-background"
+                id="onboarding-preview-harness-method-first"
+                onCheckedChange={(checked) =>
+                  onChooseHarnessConnectionMethodFirstChange(checked === true)
+                }
+              />
+              <span>Choose subscription or API first</span>
+            </label>
+          ) : null}
+        </div>
+      ) : null}
+    </aside>
+  );
+}
diff --git a/desktop/src/features/onboarding/ui/OnboardingPreviewCredentials.tsx b/desktop/src/features/onboarding/ui/OnboardingPreviewCredentials.tsx
new file mode 100644
index 00000000000..6a25bac6935
--- /dev/null
+++ b/desktop/src/features/onboarding/ui/OnboardingPreviewCredentials.tsx
@@ -0,0 +1,305 @@
+import { Check } from "lucide-react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import * as React from "react";
+
+import { cn } from "@/shared/lib/cn";
+import { OnboardingPreviewInput } from "./OnboardingPreviewInput";
+import { useOnboardingPreviewCardLayout } from "./OnboardingPreviewShell";
+import { ONBOARDING_PREVIEW_CARD_INPUT_CLASS } from "./onboardingPreviewCardStyles";
+
+type PreviewPasswordStrength = "empty" | "weak" | "moderate" | "strong";
+
+const strengthLabelPhraseVariants = {
+  animate: { transition: { staggerChildren: 0.008 } },
+  exit: { transition: { staggerChildren: 0.005 } },
+  initial: {},
+};
+
+const strengthLabelCharacterVariants = {
+  animate: {
+    filter: "blur(0)",
+    opacity: 1,
+    transition: { duration: 0.24, ease: [0.22, 1, 0.36, 1] as const },
+    y: 0,
+  },
+  exit: {
+    filter: "blur(0.25rem)",
+    opacity: 0,
+    transition: { duration: 0.16, ease: [0.64, 0, 0.78, 0] as const },
+    y: "-0.5rem",
+  },
+  initial: { filter: "blur(0.25rem)", opacity: 0, y: "0.5rem" },
+};
+
+function previewPasswordStrength(password: string): PreviewPasswordStrength {
+  if (password.length === 0) return "empty";
+  if (password.length < 8) return "weak";
+  if (password.length < 15) return "moderate";
+  return "strong";
+}
+
+function PasswordStrengthMeter({
+  descriptionId,
+  password,
+}: {
+  descriptionId: string;
+  password: string;
+}) {
+  const strength = previewPasswordStrength(password);
+  const reduceMotion = useReducedMotion() ?? false;
+  const activeCount =
+    strength === "strong"
+      ? 3
+      : strength === "moderate"
+        ? 2
+        : strength === "weak"
+          ? 1
+          : 0;
+  const label =
+    strength === "empty"
+      ? "Empty"
+      : strength === "weak"
+        ? "Weak"
+        : strength === "moderate"
+          ? "Moderate"
+          : "Strong";
+  const labelCharacters = React.useMemo(() => {
+    const occurrences = new Map<string, number>();
+    return [...label].map((character) => {
+      const occurrence = occurrences.get(character) ?? 0;
+      occurrences.set(character, occurrence + 1);
+      return { character, key: `${character}-${occurrence}` };
+    });
+  }, [label]);
+
+  return (
+    <div
+      className={cn(
+        "pointer-events-none absolute right-4 top-1/2 flex -translate-y-1/2 items-center gap-2 text-xs font-semibold transition-colors duration-150 motion-reduce:transition-none",
+        strength === "weak" && "text-red-700",
+        strength === "moderate" && "text-amber-700",
+        strength === "strong" && "text-green-700",
+        strength === "empty" && "text-transparent",
+      )}
+      data-strength={strength}
+      data-testid="onboarding-preview-password-strength"
+    >
+      <span className="relative flex h-5 w-[4.75rem] items-center justify-end overflow-visible text-right leading-none">
+        {reduceMotion ? (
+          <span>{strength === "empty" ? "" : label}</span>
+        ) : (
+          <AnimatePresence initial={false} mode="wait">
+            {strength === "empty" ? null : (
+              <motion.span
+                animate="animate"
+                className="absolute inset-x-0 top-1/2 -translate-y-1/2 whitespace-nowrap"
+                exit="exit"
+                initial="initial"
+                key={label}
+                variants={strengthLabelPhraseVariants}
+              >
+                {labelCharacters.map(({ character, key }) => (
+                  <motion.span
+                    className="inline-block will-change-[transform,opacity,filter]"
+                    key={`${label}-${key}`}
+                    variants={strengthLabelCharacterVariants}
+                  >
+                    {character}
+                  </motion.span>
+                ))}
+              </motion.span>
+            )}
+          </AnimatePresence>
+        )}
+      </span>
+      <span
+        aria-hidden
+        className={cn(
+          "relative flex h-8 w-5 flex-col items-center justify-center gap-0.5",
+          strength === "empty" && "opacity-0",
+        )}
+        data-testid="onboarding-preview-password-strength-indicator"
+      >
+        {[3, 2, 1].map((level) => {
+          const isTopDot = level === 3;
+          const positionClass =
+            level === 3
+              ? strength === "strong"
+                ? "top-1/2 -translate-y-1/2"
+                : "top-1"
+              : level === 2
+                ? "top-[13px]"
+                : "top-[22px]";
+          return (
+            <span
+              className={cn(
+                "absolute left-1/2 flex -translate-x-1/2 items-center justify-center overflow-hidden transition-[top,width,height,border-radius,background-color,opacity,transform] duration-150 ease-in-out motion-reduce:transition-none",
+                positionClass,
+                isTopDot && strength === "strong"
+                  ? "h-5 w-5 rounded-full bg-green-600"
+                  : "h-1.5 w-1.5 rounded-full",
+                !isTopDot && strength === "strong"
+                  ? level === 2
+                    ? "translate-y-1 scale-0 opacity-0"
+                    : "-translate-y-1.5 scale-0 opacity-0"
+                  : "scale-100 opacity-100",
+                strength !== "strong" &&
+                  strength !== "empty" &&
+                  activeCount >= level &&
+                  "bg-amber-500",
+                strength === "weak" && activeCount >= level && "bg-red-500",
+                strength !== "strong" &&
+                  activeCount < level &&
+                  "bg-foreground/20",
+              )}
+              data-level={level}
+              key={level}
+            >
+              {isTopDot ? (
+                <Check
+                  className={cn(
+                    "h-3.5 w-3.5 text-white transition-[opacity,transform] duration-120 ease-in-out motion-reduce:transition-none",
+                    strength === "strong"
+                      ? "scale-100 opacity-100"
+                      : "scale-75 opacity-0",
+                  )}
+                  data-testid="onboarding-preview-password-strength-check"
+                />
+              ) : null}
+            </span>
+          );
+        })}
+      </span>
+      <span
+        aria-atomic="true"
+        aria-live="polite"
+        className="sr-only"
+        id={descriptionId}
+        role="status"
+      >
+        Password strength: {label}
+      </span>
+    </div>
+  );
+}
+
+export function PreviewCredentialsFields({
+  email,
+  emailId,
+  onEmailChange,
+  onPasswordChange,
+  onConfirmPasswordChange,
+  confirmPassword,
+  password,
+  passwordAutoComplete,
+  passwordHelp,
+  passwordId,
+  passwordPlaceholder,
+  showPasswordStrength = false,
+}: {
+  email: string;
+  emailId: string;
+  onEmailChange: (value: string) => void;
+  onPasswordChange: (value: string) => void;
+  onConfirmPasswordChange?: (value: string) => void;
+  confirmPassword?: string;
+  password: string;
+  passwordAutoComplete: "current-password" | "new-password";
+  passwordHelp?: React.ReactNode;
+  passwordId: string;
+  passwordPlaceholder: string;
+  showPasswordStrength?: boolean;
+}) {
+  const cardLayout = useOnboardingPreviewCardLayout();
+  const passwordStrengthDescriptionId = React.useId();
+
+  return (
+    <>
+      <div>
+        <label
+          className="mb-2 block text-sm font-medium text-foreground"
+          htmlFor={emailId}
+        >
+          Email
+        </label>
+        <OnboardingPreviewInput
+          autoComplete="email"
+          className={
+            cardLayout
+              ? ONBOARDING_PREVIEW_CARD_INPUT_CLASS
+              : "h-12 rounded-2xl border-foreground/15 bg-white px-4"
+          }
+          id={emailId}
+          onChange={(event) => onEmailChange(event.target.value)}
+          placeholder="Enter your email address"
+          smooth={cardLayout}
+          type="email"
+          value={email}
+        />
+      </div>
+      <div>
+        <div className="mb-2 flex items-center justify-between gap-3">
+          <label
+            className="block text-sm font-medium text-foreground"
+            htmlFor={passwordId}
+          >
+            Password
+          </label>
+          {passwordHelp ? (
+            <div className="shrink-0 text-right">{passwordHelp}</div>
+          ) : null}
+        </div>
+        <div className="relative">
+          <OnboardingPreviewInput
+            aria-describedby={
+              showPasswordStrength ? passwordStrengthDescriptionId : undefined
+            }
+            autoComplete={passwordAutoComplete}
+            className={cn(
+              cardLayout
+                ? ONBOARDING_PREVIEW_CARD_INPUT_CLASS
+                : "h-12 rounded-2xl border-foreground/15 bg-white px-4",
+              showPasswordStrength ? "pr-28" : "pr-4",
+            )}
+            id={passwordId}
+            onChange={(event) => onPasswordChange(event.target.value)}
+            placeholder={passwordPlaceholder}
+            smooth={cardLayout}
+            type="password"
+            value={password}
+          />
+          {showPasswordStrength ? (
+            <PasswordStrengthMeter
+              descriptionId={passwordStrengthDescriptionId}
+              password={password}
+            />
+          ) : null}
+        </div>
+        {onConfirmPasswordChange ? (
+          <div className="mt-5">
+            <label
+              className="mb-2 block text-sm font-medium text-foreground"
+              htmlFor={`${passwordId}-confirmation`}
+            >
+              Confirm password
+            </label>
+            <OnboardingPreviewInput
+              autoComplete="new-password"
+              className={
+                cardLayout
+                  ? ONBOARDING_PREVIEW_CARD_INPUT_CLASS
+                  : "h-12 rounded-2xl border-foreground/15 bg-white px-4"
+              }
+              id={`${passwordId}-confirmation`}
+              onChange={(event) => onConfirmPasswordChange(event.target.value)}
+              placeholder="Confirm your password"
+              smooth={cardLayout}
+              type="password"
+              value={confirmPassword ?? ""}
+            />
+          </div>
+        ) : null}
+      </div>
+    </>
+  );
+}
diff --git a/desktop/src/features/onboarding/ui/OnboardingPreviewInput.tsx b/desktop/src/features/onboarding/ui/OnboardingPreviewInput.tsx
new file mode 100644
index 00000000000..5215f02a100
--- /dev/null
+++ b/desktop/src/features/onboarding/ui/OnboardingPreviewInput.tsx
@@ -0,0 +1,86 @@
+import * as React from "react";
+
+import { cn } from "@/shared/lib/cn";
+import { Input } from "@/shared/ui/input";
+import { useSmoothCorners } from "@/shared/ui/smoothCorners";
+
+type OnboardingPreviewInputProps = React.ComponentProps<typeof Input> & {
+  smooth?: boolean;
+};
+
+/**
+ * Preview-only input wrapper that keeps the app's smooth-corner clipping on
+ * the field while drawing the focus shadow on an unclipped outer frame.
+ */
+export const OnboardingPreviewInput = React.forwardRef<
+  HTMLInputElement,
+  OnboardingPreviewInputProps
+>(({ className, onBlur, onFocus, smooth = true, ...props }, forwardedRef) => {
+  const inputRef = React.useRef<HTMLInputElement | null>(null);
+  const [isFocused, setIsFocused] = React.useState(false);
+  useSmoothCorners(inputRef, { enabled: smooth });
+
+  const setInputRef = React.useCallback(
+    (node: HTMLInputElement | null) => {
+      inputRef.current = node;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else if (forwardedRef) {
+        forwardedRef.current = node;
+      }
+    },
+    [forwardedRef],
+  );
+
+  React.useEffect(() => {
+    if (!smooth || !isFocused) {
+      return;
+    }
+
+    const blurWhenPointerLeavesInput = (event: PointerEvent) => {
+      const input = inputRef.current;
+      if (!input || event.target === input) {
+        return;
+      }
+      input.blur();
+    };
+
+    document.addEventListener("pointerdown", blurWhenPointerLeavesInput, true);
+    return () => {
+      document.removeEventListener(
+        "pointerdown",
+        blurWhenPointerLeavesInput,
+        true,
+      );
+    };
+  }, [isFocused, smooth]);
+
+  return (
+    <span
+      className={cn(
+        smooth
+          ? "block rounded-xl transition-[box-shadow] duration-200 ease-out motion-reduce:transition-none"
+          : "contents",
+        smooth &&
+          isFocused &&
+          "shadow-[0_0_0_3px_white,0_0_0_6px_rgba(0,0,0,0.06)]",
+      )}
+      data-focused={isFocused ? "true" : undefined}
+    >
+      <Input
+        className={cn(className, smooth && "focus-visible:shadow-none")}
+        onBlur={(event) => {
+          setIsFocused(false);
+          onBlur?.(event);
+        }}
+        onFocus={(event) => {
+          setIsFocused(true);
+          onFocus?.(event);
+        }}
+        ref={setInputRef}
+        {...props}
+      />
+    </span>
+  );
+});
+OnboardingPreviewInput.displayName = "OnboardingPreviewInput";
diff --git a/desktop/src/features/onboarding/ui/OnboardingPreviewJourney.tsx b/desktop/src/features/onboarding/ui/OnboardingPreviewJourney.tsx
new file mode 100644
index 00000000000..25a70545363
--- /dev/null
+++ b/desktop/src/features/onboarding/ui/OnboardingPreviewJourney.tsx
@@ -0,0 +1,761 @@
+import {
+  Check,
+  ChevronRight,
+  Copy,
+  Plus,
+  RotateCcw,
+  Users,
+} from "lucide-react";
+import * as React from "react";
+
+import { HostedCommunityOnboarding } from "@/features/communities/ui/HostedCommunityOnboarding";
+import { cn } from "@/shared/lib/cn";
+import { pubkeyToNpub } from "@/shared/lib/nostrUtils";
+import { Button } from "@/shared/ui/button";
+import { Card } from "@/shared/ui/card";
+import { InviteRedeemForm } from "./InviteRedeemForm";
+import { CommunityProfileStage } from "./CommunityProfileStage";
+import { DownloadKeyStep } from "./DownloadKeyStep";
+import type { EncryptedBackupSession } from "./EncryptedBackupCreator";
+import { ONBOARDING_PRIMARY_CTA_CLASS } from "./OnboardingChrome";
+import { OnboardingFooter } from "./OnboardingFooter";
+import { OnboardingPreviewInput } from "./OnboardingPreviewInput";
+import {
+  OnboardingPreviewStep,
+  useOnboardingPreviewCardLayout,
+} from "./OnboardingPreviewShell";
+import { OnboardingSlideTransition } from "./OnboardingSlideTransition";
+import { WelcomeChannelAppPreview } from "./WelcomeChannelAppPreview";
+import { ONBOARDING_PREVIEW_CARD_INPUT_CLASS } from "./onboardingPreviewCardStyles";
+
+const FIELD_CLASS =
+  "h-12 rounded-2xl border-foreground/15 bg-white px-4 text-sm shadow-none";
+const COMMUNITY_OPTION_CLASS =
+  "w-full max-w-[320px] items-center px-6 py-4 text-center text-sm font-normal leading-6 text-foreground [--buzz-card-textured-min-height:88px] transition-[filter] duration-150 ease-out hover:brightness-[0.98] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-foreground/35";
+const PREVIEW_PUBLIC_ID = pubkeyToNpub(
+  "e5ebc6cdb579be112e336cc319b5989b4bb6af11786ea90dbe52b5f08d741b34",
+);
+
+export function BackupPasswordPreview({
+  onBack,
+  onDone,
+  session,
+  total,
+  v3Presentation = false,
+}: {
+  onBack: () => void;
+  onDone: () => void;
+  session: EncryptedBackupSession;
+  total: number;
+  v3Presentation?: boolean;
+}) {
+  return (
+    <OnboardingPreviewStep
+      onBack={onBack}
+      security
+      testId="onboarding-preview-backup-password"
+      total={total}
+    >
+      <DownloadKeyStep
+        direction="forward"
+        onBack={onDone}
+        previewMode
+        session={session}
+        v3Presentation={v3Presentation}
+      />
+    </OnboardingPreviewStep>
+  );
+}
+
+export function PasswordReset({
+  initialEmail,
+  onBack,
+  total,
+}: {
+  initialEmail: string;
+  onBack: () => void;
+  total: number;
+}) {
+  const cardLayout = useOnboardingPreviewCardLayout();
+  const [email, setEmail] = React.useState(initialEmail);
+  const [submitted, setSubmitted] = React.useState(false);
+
+  if (submitted) {
+    return (
+      <OnboardingPreviewStep
+        onBack={onBack}
+        testId="onboarding-preview-password-reset-sent"
+        total={total}
+      >
+        <OnboardingSlideTransition
+          className={cn(
+            "flex min-h-0 w-full max-w-[500px] flex-col",
+            cardLayout ? "items-stretch" : "items-center",
+          )}
+          transitionKey="preview-password-reset-sent"
+        >
+          <h1 className="text-title font-normal text-foreground">
+            Check your email
+          </h1>
+          <p className="mt-5 max-w-[440px] text-sm leading-6 text-foreground/80">
+            Use the link we sent to {email.trim()} to reset your password.
+          </p>
+        </OnboardingSlideTransition>
+      </OnboardingPreviewStep>
+    );
+  }
+
+  return (
+    <OnboardingPreviewStep
+      onBack={onBack}
+      testId="onboarding-preview-password-reset"
+      total={total}
+    >
+      <OnboardingSlideTransition
+        className={cn(
+          "flex min-h-0 w-full max-w-[500px] flex-col",
+          cardLayout ? "items-stretch" : "items-center",
+        )}
+        transitionKey="preview-password-reset"
+      >
+        <h1 className="text-title font-normal text-foreground">
+          Reset your password
+        </h1>
+        <p className="mt-5 max-w-[440px] text-sm leading-6 text-foreground/80">
+          Enter your email address and we'll send you a link to reset your
+          password.
+        </p>
+        <form
+          className="mt-8 w-full text-left"
+          onSubmit={(event) => {
+            event.preventDefault();
+            if (email.trim()) setSubmitted(true);
+          }}
+        >
+          <label
+            className="mb-2 block text-sm font-medium text-foreground"
+            htmlFor="onboarding-preview-password-reset-email"
+          >
+            Email
+          </label>
+          <OnboardingPreviewInput
+            autoComplete="email"
+            className={
+              cardLayout
+                ? ONBOARDING_PREVIEW_CARD_INPUT_CLASS
+                : "h-12 rounded-2xl border-foreground/15 bg-white px-4"
+            }
+            id="onboarding-preview-password-reset-email"
+            onChange={(event) => setEmail(event.target.value)}
+            placeholder="Enter your email address"
+            smooth={cardLayout}
+            type="email"
+            value={email}
+          />
+          <OnboardingFooter>
+            <Button
+              className={ONBOARDING_PRIMARY_CTA_CLASS}
+              disabled={!email.trim()}
+              onClick={() => setSubmitted(true)}
+              type="button"
+            >
+              Send reset link
+            </Button>
+          </OnboardingFooter>
+        </form>
+      </OnboardingSlideTransition>
+    </OnboardingPreviewStep>
+  );
+}
+
+export function DefaultConfigPreview({
+  onBack,
+  onNext,
+}: {
+  onBack: () => void;
+  onNext: () => void;
+}) {
+  const [harness, setHarness] = React.useState("buzz-agent");
+  const [provider, setProvider] = React.useState("");
+  const [model, setModel] = React.useState("");
+
+  return (
+    <OnboardingPreviewStep
+      current={4}
+      onBack={onBack}
+      testId="onboarding-preview-config"
+    >
+      <OnboardingSlideTransition
+        className="flex min-h-full w-full flex-col items-center"
+        transitionKey="preview-default-config"
+      >
+        <div className="w-full max-w-[500px] text-center">
+          <h1 className="text-title font-normal text-foreground">
+            Configure your default model settings
+          </h1>
+          <p className="mx-auto mt-3 max-w-[440px] text-sm leading-5 text-foreground/80">
+            This will be set as your default model configuration across Buzz.
+            You can always change this in your Settings or give specific agents
+            a different configuration.
+          </p>
+        </div>
+        <div className="flex w-full flex-1 items-center justify-center py-10">
+          <div className="w-full max-w-[328px] space-y-5 text-left">
+            <label
+              className="block text-sm font-medium"
+              htmlFor="preview-default-harness"
+            >
+              <span className="mb-2 block pl-3">Default harness</span>
+              <select
+                className={`${FIELD_CLASS} w-full`}
+                id="preview-default-harness"
+                onChange={(event) => setHarness(event.target.value)}
+                value={harness}
+              >
+                <option value="buzz-agent">Buzz Agent</option>
+                <option value="claude">Claude Code</option>
+                <option value="codex">Codex</option>
+                <option value="goose">Goose</option>
+              </select>
+            </label>
+            <label
+              className="block text-sm font-medium"
+              htmlFor="preview-default-provider"
+            >
+              <span className="mb-2 block pl-3">Provider</span>
+              <select
+                className={`${FIELD_CLASS} w-full`}
+                id="preview-default-provider"
+                onChange={(event) => setProvider(event.target.value)}
+                value={provider}
+              >
+                <option value="">Select a provider</option>
+                <option value="anthropic">Anthropic</option>
+                <option value="openai">OpenAI</option>
+                <option value="ollama">Ollama</option>
+              </select>
+            </label>
+            <label
+              className="block text-sm font-medium"
+              htmlFor="preview-default-model"
+            >
+              <span className="mb-2 block pl-3">Model</span>
+              <select
+                className={`${FIELD_CLASS} w-full`}
+                id="preview-default-model"
+                onChange={(event) => setModel(event.target.value)}
+                value={model}
+              >
+                <option value="">Select a model</option>
+                <option value="default">Provider default</option>
+              </select>
+            </label>
+          </div>
+        </div>
+        <OnboardingFooter>
+          <Button
+            className={ONBOARDING_PRIMARY_CTA_CLASS}
+            data-testid="onboarding-preview-config-next"
+            onClick={onNext}
+          >
+            Next
+          </Button>
+          <Button
+            className="h-9 whitespace-nowrap rounded-full px-6 text-sm hover:bg-foreground/10"
+            data-testid="onboarding-preview-config-skip"
+            onClick={onNext}
+            variant="ghost"
+          >
+            Skip for now
+          </Button>
+        </OnboardingFooter>
+      </OnboardingSlideTransition>
+    </OnboardingPreviewStep>
+  );
+}
+
+export type CommunityPreviewRoute = "join" | "create" | "existing";
+
+export function CommunityChoicePreview({
+  current = 5,
+  includeExistingCommunity = true,
+  onBack,
+  onChoose,
+  total,
+}: {
+  current?: number;
+  includeExistingCommunity?: boolean;
+  onBack: () => void;
+  onChoose: (route: CommunityPreviewRoute) => void;
+  total?: number;
+}) {
+  const cardLayout = useOnboardingPreviewCardLayout();
+  const routes: ReadonlyArray<readonly [CommunityPreviewRoute, string]> = [
+    ["join", "Join a community"],
+    ["create", "Create a community"],
+    ...(includeExistingCommunity
+      ? ([["existing", "I already have a community"]] as const)
+      : []),
+  ];
+  const routeIcons = {
+    create: Plus,
+    existing: RotateCcw,
+    join: Users,
+  } as const;
+
+  return (
+    <OnboardingPreviewStep
+      current={current}
+      onBack={onBack}
+      testId="onboarding-preview-community-choice"
+      total={total}
+    >
+      <OnboardingSlideTransition
+        className={cn(
+          "flex min-h-full w-full flex-col",
+          cardLayout ? "items-stretch" : "items-center",
+        )}
+        transitionKey="preview-community-choice"
+      >
+        <div className="w-full max-w-[760px]">
+          <h1 className="text-title font-normal">
+            {includeExistingCommunity
+              ? "Join or create a community"
+              : "Buzz happens in communities"}
+          </h1>
+          <p
+            className={cn(
+              "text-sm leading-6 text-foreground/80",
+              cardLayout ? "mt-2" : "mt-3",
+            )}
+          >
+            {includeExistingCommunity
+              ? "Join with an invite, create your own community, or reconnect one you already have."
+              : "Communities are shared spaces where people and agents work together."}
+          </p>
+        </div>
+        <div
+          className={cn(
+            "flex w-full flex-1 flex-col",
+            cardLayout
+              ? "-mx-2 w-[calc(100%+1rem)] items-stretch justify-start gap-2 py-6"
+              : "translate-y-16 items-center justify-center gap-20 py-8",
+          )}
+        >
+          {routes.map(([route, label]) => {
+            const RouteIcon = routeIcons[route];
+
+            return cardLayout ? (
+              <Button
+                className="group h-auto min-h-14 w-full justify-start gap-3 rounded-xl px-2 py-2 text-left text-sm font-medium text-foreground shadow-none hover:bg-foreground/[0.04] hover:text-foreground focus-visible:ring-2 focus-visible:ring-foreground/20"
+                data-testid={`onboarding-preview-community-${route}`}
+                key={route}
+                onClick={() => onChoose(route)}
+                type="button"
+                variant="ghost"
+              >
+                <span className="flex size-8 shrink-0 items-center justify-start">
+                  <RouteIcon aria-hidden className="!size-6" />
+                </span>
+                <span className="min-w-0 flex-1 truncate">{label}</span>
+                <span className="ml-auto flex size-10 shrink-0 items-center justify-end">
+                  <ChevronRight
+                    aria-hidden
+                    className="size-4 text-muted-foreground transition-colors duration-150 ease-out group-hover:text-foreground motion-reduce:transition-none"
+                  />
+                </span>
+              </Button>
+            ) : (
+              <Card
+                asChild
+                className={COMMUNITY_OPTION_CLASS}
+                key={route}
+                variant="textured"
+              >
+                <button
+                  data-testid={`onboarding-preview-community-${route}`}
+                  onClick={() => onChoose(route)}
+                  type="button"
+                >
+                  {label}
+                </button>
+              </Card>
+            );
+          })}
+        </div>
+      </OnboardingSlideTransition>
+    </OnboardingPreviewStep>
+  );
+}
+
+export function CommunityEntryPreview({
+  current = 5,
+  onBack,
+  onContinue,
+  previewVariant = "today",
+  route,
+  total,
+}: {
+  current?: number;
+  onBack: () => void;
+  onContinue: (communityName: string) => void;
+  previewVariant?: "today" | "v3";
+  route: Exclude<CommunityPreviewRoute, "create">;
+  total?: number;
+}) {
+  const cardLayout = useOnboardingPreviewCardLayout();
+  const [copiedPublicId, setCopiedPublicId] = React.useState(false);
+  const [membershipRequired, setMembershipRequired] = React.useState(false);
+  const heading =
+    route === "existing" ? "Reconnect to your community" : "Join a community";
+  const continueToCommunity = () => onContinue("Block Community");
+
+  return (
+    <OnboardingPreviewStep
+      current={current}
+      onBack={onBack}
+      testId="onboarding-preview-community-entry"
+      total={total}
+    >
+      <OnboardingSlideTransition
+        className={cn(
+          "flex w-full flex-col",
+          cardLayout
+            ? "min-h-0 items-stretch text-left"
+            : "min-h-[calc(100dvh-15.625rem)] items-center text-center",
+        )}
+        transitionKey={`preview-community-${route}`}
+      >
+        <div className="w-full max-w-[620px]">
+          <h1 className="text-title font-normal">{heading}</h1>
+          <p
+            className={cn(
+              "text-sm leading-6 text-foreground/80",
+              cardLayout ? "mt-2" : "mt-3",
+            )}
+          >
+            {route === "existing"
+              ? "Enter the community URL or an invite link. Your role will be restored when you connect."
+              : previewVariant === "v3"
+                ? "Paste the community URL or invite link you received."
+                : "Enter the invite link or community URL you received."}
+          </p>
+        </div>
+        <div
+          className={cn(
+            "flex w-full flex-1 flex-col",
+            cardLayout
+              ? "items-stretch justify-start gap-8 pt-8"
+              : "items-center justify-center gap-16",
+          )}
+        >
+          <InviteRedeemForm
+            error={null}
+            isRedeeming={false}
+            onCancel={onBack}
+            onConnect={continueToCommunity}
+            onMembershipRequirementChange={
+              route === "join" ? setMembershipRequired : undefined
+            }
+            onRedeem={continueToCommunity}
+            placeholder="Invite link or community URL"
+            previewMode
+            variant="onboarding-spotlight"
+          />
+          {route === "join" && membershipRequired ? (
+            <div aria-live="polite" className="w-full max-w-[560px] text-left">
+              <p className="text-sm font-medium text-foreground">
+                You’ll need to request access to this community
+              </p>
+              <p className="mt-2 text-sm leading-6 text-foreground/75">
+                This community requires an admin to add you before you can join.
+                Copy your public ID and send it to them.
+              </p>
+              <div className="mt-4 flex items-center gap-3 rounded-xl border border-foreground/10 bg-background/35 px-4 py-3">
+                <code className="min-w-0 flex-1 truncate font-mono text-xs text-foreground/80">
+                  {PREVIEW_PUBLIC_ID}
+                </code>
+                <Button
+                  aria-label="Copy public ID"
+                  className="h-9 shrink-0 rounded-full px-3"
+                  onClick={() => {
+                    setCopiedPublicId(true);
+                    window.setTimeout(() => setCopiedPublicId(false), 1500);
+                  }}
+                  size="sm"
+                  type="button"
+                  variant="outline"
+                >
+                  {copiedPublicId ? (
+                    <Check className="h-4 w-4" aria-hidden="true" />
+                  ) : (
+                    <Copy className="h-4 w-4" aria-hidden="true" />
+                  )}
+                  <span>{copiedPublicId ? "Copied" : "Copy"}</span>
+                </Button>
+              </div>
+            </div>
+          ) : null}
+        </div>
+      </OnboardingSlideTransition>
+    </OnboardingPreviewStep>
+  );
+}
+
+export function CommunityCreatePreview({
+  current = 5,
+  onBack,
+  onContinue,
+  total,
+}: {
+  current?: number;
+  onBack: () => void;
+  onContinue: (communityName: string) => void;
+  total?: number;
+}) {
+  const cardLayout = useOnboardingPreviewCardLayout();
+
+  return (
+    <OnboardingPreviewStep
+      current={current}
+      onBack={cardLayout ? onBack : undefined}
+      testId="onboarding-preview-community-entry"
+      total={total}
+    >
+      <OnboardingSlideTransition
+        className={cn(
+          "flex min-h-full w-full flex-col",
+          cardLayout ? "items-stretch" : "items-center",
+        )}
+        transitionKey="preview-community-create"
+      >
+        <HostedCommunityOnboarding
+          onBack={onBack}
+          onPreviewContinue={onContinue}
+          previewMode
+        />
+      </OnboardingSlideTransition>
+    </OnboardingPreviewStep>
+  );
+}
+
+export function CommunityConnectingPreview({
+  communityName,
+  onBack,
+  onContinue,
+}: {
+  communityName: string;
+  onBack: () => void;
+  onContinue: () => void;
+}) {
+  return (
+    <OnboardingPreviewStep
+      current={5}
+      onBack={onBack}
+      testId="onboarding-preview-community-connecting"
+    >
+      <OnboardingSlideTransition
+        className="flex min-h-full w-full max-w-[560px] flex-col items-center justify-center"
+        transitionKey="preview-community-connecting"
+      >
+        <Users className="h-10 w-10" aria-hidden />
+        <h1 className="mt-5 text-title font-normal">Joining {communityName}</h1>
+        <p className="mt-3 text-sm text-foreground/80">Connecting securely…</p>
+        <OnboardingFooter>
+          <Button
+            className={ONBOARDING_PRIMARY_CTA_CLASS}
+            data-testid="onboarding-preview-connecting-continue"
+            onClick={onContinue}
+          >
+            Continue
+          </Button>
+        </OnboardingFooter>
+      </OnboardingSlideTransition>
+    </OnboardingPreviewStep>
+  );
+}
+
+export function CommunityProfilePreview({
+  avatarUrl,
+  current = 6,
+  displayName,
+  onAvatarUrlChange,
+  onBack,
+  onDisplayNameChange,
+  onNext,
+  total,
+}: {
+  avatarUrl: string;
+  current?: number;
+  displayName: string;
+  onAvatarUrlChange: (value: string) => void;
+  onBack: () => void;
+  onDisplayNameChange: (value: string) => void;
+  onNext: () => void;
+  total?: number;
+}) {
+  const cardLayout = useOnboardingPreviewCardLayout();
+  const [isUploadingAvatar, setIsUploadingAvatar] = React.useState(false);
+
+  return (
+    <OnboardingPreviewStep
+      current={current}
+      onBack={onBack}
+      testId="onboarding-preview-community-profile"
+      total={total}
+    >
+      <OnboardingSlideTransition
+        className={cn(
+          "flex min-h-full w-full max-w-[500px] flex-col",
+          cardLayout ? "items-stretch" : "items-center",
+        )}
+        transitionKey="preview-community-profile"
+      >
+        <CommunityProfileStage
+          avatarUrl={avatarUrl}
+          displayName={displayName}
+          isPending={false}
+          isUploadingAvatar={isUploadingAvatar}
+          onAvatarUrlChange={onAvatarUrlChange}
+          onDisplayNameChange={onDisplayNameChange}
+          onNext={onNext}
+          onUploadingChange={setIsUploadingAvatar}
+          previewMode
+        />
+      </OnboardingSlideTransition>
+    </OnboardingPreviewStep>
+  );
+}
+
+const STARTER_TEAM = ["Fizz", "Honey", "Pollen"] as const;
+
+export function StarterTeamPreview({
+  onBack,
+  onNext,
+}: {
+  onBack: () => void;
+  onNext: () => void;
+}) {
+  return (
+    <OnboardingPreviewStep
+      current={7}
+      onBack={onBack}
+      testId="onboarding-preview-starter-team"
+    >
+      <OnboardingSlideTransition
+        className="flex min-h-full w-full max-w-[760px] flex-col items-center"
+        transitionKey="preview-starter-team"
+      >
+        <h1 className="text-title font-normal">Meet your starter team</h1>
+        <p className="mx-auto mt-3 max-w-[400px] text-sm leading-6 text-foreground/80">
+          Buzz lets you bring multiple agents into the same workspace. Your team
+          will help you get started using Buzz.
+        </p>
+        <div className="flex w-full flex-1 items-center justify-center py-10">
+          <div className="flex flex-wrap justify-center gap-8">
+            {STARTER_TEAM.map((name) => (
+              <div className="flex w-40 flex-col items-center gap-3" key={name}>
+                <img
+                  alt={`${name} animated character`}
+                  className="h-40 w-40 object-contain"
+                  src={`/onboarding/starter-team/${name.toLowerCase()}.png`}
+                />
+                <span className="font-mono text-xs font-medium uppercase tracking-[0.15em]">
+                  {name}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+        <OnboardingFooter>
+          <Button
+            className={ONBOARDING_PRIMARY_CTA_CLASS}
+            data-testid="onboarding-preview-team-next"
+            onClick={onNext}
+          >
+            Take me to Buzz
+          </Button>
+        </OnboardingFooter>
+      </OnboardingSlideTransition>
+    </OnboardingPreviewStep>
+  );
+}
+
+export function WelcomeChannelPreview({
+  communityName,
+  onBack,
+  onNext,
+}: {
+  communityName: string;
+  onBack: () => void;
+  onNext: () => void;
+}) {
+  return (
+    <OnboardingPreviewStep
+      current={7}
+      onBack={onBack}
+      testId="onboarding-preview-welcome-channel"
+    >
+      <OnboardingSlideTransition
+        className="flex min-h-full w-full max-w-[680px] flex-col items-center justify-center"
+        transitionKey="preview-welcome-channel"
+      >
+        <h1 className="text-title font-normal">
+          Your Welcome channel is ready
+        </h1>
+        <p className="mt-4 max-w-[480px] text-sm leading-6 text-foreground/80">
+          This is your starting place in {communityName}. Your starter team can
+          help you learn the space and decide what to do next.
+        </p>
+        <Card
+          className="mt-10 w-full max-w-[520px] px-6 py-6 text-left"
+          variant="textured"
+        >
+          <p className="text-lg font-medium"># Welcome</p>
+          <p className="mt-2 text-sm leading-6 text-foreground/70">
+            Meet your team, start a conversation, or explore your community.
+          </p>
+          <div className="mt-5 flex -space-x-2">
+            {STARTER_TEAM.map((name) => (
+              <span
+                aria-label={name}
+                className="flex h-9 w-9 items-center justify-center rounded-full border-2 border-background bg-primary/15 text-xs font-semibold"
+                key={name}
+                role="img"
+              >
+                {name[0]}
+              </span>
+            ))}
+          </div>
+        </Card>
+        <OnboardingFooter>
+          <Button
+            className={ONBOARDING_PRIMARY_CTA_CLASS}
+            data-testid="onboarding-preview-welcome-open"
+            onClick={onNext}
+          >
+            Open Welcome
+          </Button>
+        </OnboardingFooter>
+      </OnboardingSlideTransition>
+    </OnboardingPreviewStep>
+  );
+}
+
+export function CommunityHomePreview({
+  avatarUrl,
+  communityName,
+  displayName,
+}: {
+  avatarUrl: string;
+  communityName: string;
+  displayName: string;
+}) {
+  return (
+    <WelcomeChannelAppPreview
+      avatarUrl={avatarUrl}
+      communityName={communityName}
+      displayName={displayName}
+    />
+  );
+}
diff --git a/desktop/src/features/onboarding/ui/OnboardingPreviewShell.tsx b/desktop/src/features/onboarding/ui/OnboardingPreviewShell.tsx
new file mode 100644
index 00000000000..9eb383cecf6
--- /dev/null
+++ b/desktop/src/features/onboarding/ui/OnboardingPreviewShell.tsx
@@ -0,0 +1,110 @@
+import * as React from "react";
+
+import { cn } from "@/shared/lib/cn";
+import { Card } from "@/shared/ui/card";
+import { useSmoothCorners } from "@/shared/ui/smoothCorners";
+import { StartupWindowDragRegion } from "@/shared/ui/StartupWindowDragRegion";
+import { OnboardingChrome } from "./OnboardingChrome";
+import { OnboardingFooterProvider } from "./OnboardingFooter";
+
+const OnboardingPreviewCardContext = React.createContext(false);
+
+export function OnboardingPreviewLayoutProvider({
+  card,
+  children,
+}: {
+  card: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <OnboardingPreviewCardContext.Provider value={card}>
+      {children}
+    </OnboardingPreviewCardContext.Provider>
+  );
+}
+
+/** Whether the current workshop screen uses the experimental V3 card layout. */
+export function useOnboardingPreviewCardLayout() {
+  return React.useContext(OnboardingPreviewCardContext);
+}
+
+export function OnboardingPreviewStep({
+  allowWideContent = false,
+  allowHorizontalActionOverflow = false,
+  children,
+  current = 2,
+  onBack,
+  security = false,
+  testId,
+  total,
+}: {
+  allowWideContent?: boolean;
+  allowHorizontalActionOverflow?: boolean;
+  children: React.ReactNode;
+  current?: number;
+  onBack?: () => void;
+  security?: boolean;
+  testId: string;
+  total?: number;
+}) {
+  const cardLayout = useOnboardingPreviewCardLayout();
+  const cardRef = React.useRef<HTMLDivElement | null>(null);
+  useSmoothCorners(cardRef, { enabled: cardLayout });
+  const frame = (
+    <div
+      className={cn(
+        "buzz-onboarding-step-frame relative flex w-full flex-col",
+        cardLayout
+          ? cn(
+              "min-h-0 max-w-none flex-1 items-stretch overflow-x-hidden overflow-y-auto overscroll-contain text-left",
+              allowHorizontalActionOverflow
+                ? "-mx-6 w-[calc(100%+3rem)] px-6"
+                : "-mx-2 w-[calc(100%+1rem)] px-2",
+            )
+          : "max-w-[1040px] flex-1 items-center text-center",
+      )}
+    >
+      {children}
+    </div>
+  );
+
+  return (
+    <div
+      className={cn(
+        "buzz-onboarding-neutral-theme buzz-startup-shell flex max-h-dvh justify-center overflow-x-hidden overflow-y-auto px-4 text-foreground",
+        cardLayout ? "items-center py-6" : "items-start pb-28 pt-[106px]",
+        security && !cardLayout && "buzz-onboarding-security-theme",
+      )}
+      data-testid={testId}
+    >
+      <StartupWindowDragRegion />
+      {!security || cardLayout ? (
+        <OnboardingChrome current={current} total={total} />
+      ) : null}
+      {cardLayout ? (
+        <Card
+          className={cn(
+            "flex h-[min(41.5rem,calc(100dvh-3rem))] w-max min-w-[calc(38rem+2px)] max-w-[50rem] flex-col overflow-hidden rounded-[2rem] bg-white p-12 text-left shadow-lg [--buzz-onboarding-cta-label:#fff] [&_.buzz-onboarding-transition-content]:min-w-[32rem] [&_.buzz-onboarding-transition-content]:!text-left [&_.buzz-onboarding-transition-line]:justify-start [&_h1+p]:!mx-0 [&_h1+p]:!mt-2 [&_h1+p]:!text-left [&_h1+p]:!text-base [&_h1+p]:!leading-6 [&_h1]:!text-left [&_h1]:!text-2xl [&_h1]:!leading-8 [&_h1]:!text-foreground",
+            !allowWideContent &&
+              "[&_.buzz-onboarding-transition-content]:max-w-[32rem]",
+          )}
+          data-testid="onboarding-preview-content-card"
+          ref={cardRef}
+        >
+          <OnboardingFooterProvider
+            backAction={onBack ? { onClick: onBack } : undefined}
+            placement="card"
+          >
+            {frame}
+          </OnboardingFooterProvider>
+        </Card>
+      ) : (
+        <OnboardingFooterProvider
+          backAction={onBack ? { onClick: onBack } : undefined}
+        >
+          {frame}
+        </OnboardingFooterProvider>
+      )}
+    </div>
+  );
+}
diff --git a/desktop/src/features/onboarding/ui/SetupRuntimeCard.tsx b/desktop/src/features/onboarding/ui/SetupRuntimeCard.tsx
new file mode 100644
index 00000000000..d6c9dd82a5a
--- /dev/null
+++ b/desktop/src/features/onboarding/ui/SetupRuntimeCard.tsx
@@ -0,0 +1,301 @@
+import { Check } from "lucide-react";
+import type * as React from "react";
+
+import { describeResolvedCommand } from "@/features/agents/ui/agentUi";
+import type { AcpRuntimeCatalogEntry } from "@/shared/api/types";
+import { cn } from "@/shared/lib/cn";
+import { Button } from "@/shared/ui/button";
+import { Card } from "@/shared/ui/card";
+import { Spinner } from "@/shared/ui/spinner";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
+import { runtimeIsReadyForOnboarding } from "./onboardingRuntimeSelection";
+import { getRuntimeDisplayLabel, RuntimeIcon } from "./RuntimeIcon";
+
+function RuntimeReadinessIndicator({
+  runtime,
+  ready,
+}: {
+  runtime: AcpRuntimeCatalogEntry;
+  ready: boolean;
+}) {
+  // Checkmark temporarily hidden; flip to true to restore it.
+  const showReadinessCheckmark = false;
+  if (!ready || !showReadinessCheckmark) return null;
+
+  return (
+    <span
+      aria-hidden="true"
+      className="pointer-events-none absolute right-8 top-8 flex h-8 w-8 items-center justify-center rounded-full border border-[var(--buzz-welcome-chartreuse)] bg-[var(--buzz-welcome-chartreuse)]"
+      data-testid={`onboarding-runtime-check-${runtime.id}`}
+    >
+      <Check
+        className="h-4 w-4 text-foreground"
+        data-testid={`onboarding-runtime-checkmark-${runtime.id}`}
+        strokeWidth={3}
+      />
+    </span>
+  );
+}
+
+function RuntimeDetails({ runtime }: { runtime: AcpRuntimeCatalogEntry }) {
+  if (
+    runtime.availability === "available" &&
+    runtime.command &&
+    runtime.binaryPath
+  ) {
+    const description = describeResolvedCommand(
+      runtime.command,
+      runtime.binaryPath,
+    );
+    return (
+      <>
+        <p className="text-xs leading-4 text-white">
+          {description.charAt(0).toUpperCase() + description.slice(1)}
+        </p>
+        {runtime.defaultArgs.length > 0 ? (
+          <p className="mt-1 text-xs leading-4 text-white">
+            Args:{" "}
+            <code className="font-mono">{runtime.defaultArgs.join(", ")}</code>
+          </p>
+        ) : null}
+      </>
+    );
+  }
+
+  if (runtime.availability === "adapter_missing") {
+    return (
+      <>
+        <p className="text-xs leading-4 text-white">
+          CLI detected; ACP adapter missing.
+        </p>
+        <p className="mt-1 text-xs leading-4 text-white">
+          {runtime.installHint}
+        </p>
+      </>
+    );
+  }
+
+  if (runtime.availability === "adapter_outdated") {
+    return (
+      <>
+        <p className="text-xs leading-4 text-white">
+          ACP adapter detected but outdated — reinstall required.
+        </p>
+        <p className="mt-1 text-xs leading-4 text-white">
+          This updates the machine-global{" "}
+          <code className="rounded bg-white/10 px-0.5 font-mono text-xs text-white">
+            codex-acp
+          </code>{" "}
+          adapter. Older Buzz releases using the legacy adapter contract may
+          lose community access until{" "}
+          <code className="rounded bg-white/10 px-0.5 font-mono text-xs text-white">
+            @zed-industries/codex-acp@0.16.0
+          </code>{" "}
+          is restored.
+        </p>
+        <p className="mt-1 text-xs leading-4 text-white">
+          {runtime.installHint}
+        </p>
+      </>
+    );
+  }
+
+  if (runtime.availability === "cli_missing") {
+    return (
+      <>
+        <p className="text-xs leading-4 text-white">
+          ACP adapter detected; CLI missing.
+        </p>
+        <p className="mt-1 text-xs leading-4 text-white">
+          {runtime.installHint}
+        </p>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <p className="text-xs leading-4 text-white">Not installed yet.</p>
+      <p className="mt-1 text-xs leading-4 text-white">{runtime.installHint}</p>
+    </>
+  );
+}
+
+function runtimeDetailText(runtime: AcpRuntimeCatalogEntry): string {
+  if (
+    runtime.availability === "available" &&
+    runtime.command &&
+    runtime.binaryPath
+  ) {
+    const description = describeResolvedCommand(
+      runtime.command,
+      runtime.binaryPath,
+    );
+    return description.charAt(0).toUpperCase() + description.slice(1);
+  }
+  if (runtime.availability === "adapter_missing") {
+    return "CLI detected; ACP adapter missing.";
+  }
+  if (runtime.availability === "adapter_outdated") {
+    return "ACP adapter detected but outdated — reinstall required.";
+  }
+  if (
+    runtime.availability === "cli_missing" ||
+    runtime.availability === "not_installed"
+  ) {
+    return "CLI not detected.";
+  }
+  return "";
+}
+
+export function SetupRuntimeAction({
+  ariaLabel,
+  children,
+  disabled,
+  onClick,
+  testId,
+}: {
+  ariaLabel: string;
+  children: React.ReactNode;
+  disabled?: boolean;
+  onClick: () => void;
+  testId?: string;
+}) {
+  return (
+    <Button
+      aria-label={ariaLabel}
+      className="buzz-onboarding-runtime-setup h-5 rounded-full bg-[var(--buzz-welcome-chartreuse)]/30 px-2.5 font-mono !text-badge font-normal uppercase text-foreground hover:bg-[var(--buzz-welcome-chartreuse)]/40"
+      data-testid={testId}
+      disabled={disabled}
+      onClick={onClick}
+      type="button"
+      variant="ghost"
+    >
+      {children}
+    </Button>
+  );
+}
+
+export function SetupRuntimeInstallingStatus({
+  runtime,
+}: {
+  runtime: AcpRuntimeCatalogEntry;
+}) {
+  return (
+    <div
+      aria-label={`Installing ${runtime.label}`}
+      className="flex h-5 items-center gap-2 rounded-full bg-white/60 px-2.5 font-mono text-badge font-normal uppercase text-foreground"
+      role="status"
+    >
+      <Spinner className="h-3 w-3 border-2 text-foreground" />
+      INSTALLING
+    </div>
+  );
+}
+
+export function SetupRuntimeCheckingStatus({
+  runtime,
+}: {
+  runtime: AcpRuntimeCatalogEntry;
+}) {
+  return (
+    <div
+      aria-label={`Rechecking ${runtime.label}`}
+      className="flex h-5 items-center gap-2 rounded-full bg-[#EBEFEF] px-2.5 font-mono text-badge font-normal uppercase text-foreground"
+      data-testid={`onboarding-runtime-rechecking-${runtime.id}`}
+      role="status"
+    >
+      <Spinner className="h-3 w-3 border-2 text-foreground" />
+      CHECKING…
+    </div>
+  );
+}
+
+export function SetupRuntimeReadyStatus({
+  runtime,
+}: {
+  runtime: AcpRuntimeCatalogEntry;
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span
+          className="inline-flex h-5 cursor-default items-center rounded-full bg-[#EBEFEF] px-2.5 font-mono text-badge font-normal uppercase text-foreground"
+          data-testid={`onboarding-runtime-ready-${runtime.id}`}
+        >
+          READY
+        </span>
+      </TooltipTrigger>
+      <TooltipContent
+        className="max-w-80 bg-black text-left text-xs text-white shadow-sm"
+        side="top"
+      >
+        <RuntimeDetails runtime={runtime} />
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+export function SetupRuntimeCardPresentation({
+  footer,
+  installError,
+  installOutputLine,
+  isInstalling,
+  runtime,
+  status,
+}: {
+  footer?: React.ReactNode;
+  installError: string | null;
+  installOutputLine?: string | null;
+  isInstalling: boolean;
+  runtime: AcpRuntimeCatalogEntry;
+  status: React.ReactNode;
+}) {
+  const isAvailable = runtime.availability === "available";
+  const isReady = runtimeIsReadyForOnboarding(runtime);
+
+  return (
+    <Card
+      className={cn(
+        "group h-[224px] w-full max-w-[288px] select-none items-center px-3 py-1.5 text-center",
+        installError && "ring-1 ring-destructive/40",
+        isReady && "brightness-[0.98]",
+      )}
+      data-ready={isReady ? "true" : "false"}
+      data-testid={`onboarding-runtime-${runtime.id}`}
+      variant="textured"
+    >
+      <RuntimeReadinessIndicator ready={isReady} runtime={runtime} />
+
+      <div className="flex min-w-0 flex-col items-center gap-2.5">
+        <div className="flex min-w-0 items-center justify-center gap-3">
+          <RuntimeIcon className="h-7 w-7" runtime={runtime} />
+          <h2 className="truncate text-sm font-normal leading-5 text-foreground">
+            {getRuntimeDisplayLabel(runtime)}
+          </h2>
+        </div>
+        {status}
+        {isInstalling && installOutputLine ? (
+          <p
+            aria-live="polite"
+            className="max-w-[13rem] truncate font-mono text-2xs leading-4 text-muted-foreground"
+            data-testid={`onboarding-runtime-install-output-${runtime.id}`}
+          >
+            {installOutputLine}
+          </p>
+        ) : !isAvailable && runtimeDetailText(runtime) ? (
+          <p
+            aria-hidden={installError ? "true" : undefined}
+            className={cn(
+              "max-w-[13rem] text-2xs leading-4 text-muted-foreground",
+              installError && "invisible",
+            )}
+          >
+            {runtimeDetailText(runtime)}
+          </p>
+        ) : null}
+      </div>
+      {footer}
+    </Card>
+  );
+}
diff --git a/desktop/src/features/onboarding/ui/SetupStep.tsx b/desktop/src/features/onboarding/ui/SetupStep.tsx
index aac9b53846a..26e120456bc 100644
--- a/desktop/src/features/onboarding/ui/SetupStep.tsx
+++ b/desktop/src/features/onboarding/ui/SetupStep.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { openUrl } from "@tauri-apps/plugin-opener";
-import { Check, Info } from "lucide-react";
+import { Info } from "lucide-react";
 
 import {
   useAcpAuthMethodsQuery,
@@ -9,15 +9,10 @@ import {
   useInstallAcpRuntimeMutation,
 } from "@/features/agents/hooks";
 import { useInstallOutputLine } from "@/features/agents/lib/useInstallOutputLine";
-import { describeResolvedCommand } from "@/features/agents/ui/agentUi";
 import type { AcpAuthMethod, AcpRuntimeCatalogEntry } from "@/shared/api/types";
 import { getInstallErrorMessage } from "@/shared/lib/installError";
-import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
-import { Card } from "@/shared/ui/card";
 import { FlappingBee } from "@/shared/ui/buzz-logo/FlappingBee";
-import { Spinner } from "@/shared/ui/spinner";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/tooltip";
 import {
   getReadyOnboardingRuntimes,
   getVisibleOnboardingRuntimes,
@@ -26,7 +21,13 @@ import {
 import { ONBOARDING_PRIMARY_CTA_CLASS } from "./OnboardingChrome";
 import { RuntimeErrorTooltip } from "./RuntimeErrorTooltip";
 import { OnboardingFooter } from "./OnboardingFooter";
-import { getRuntimeDisplayLabel, RuntimeIcon } from "./RuntimeIcon";
+import {
+  SetupRuntimeAction,
+  SetupRuntimeCardPresentation,
+  SetupRuntimeCheckingStatus,
+  SetupRuntimeInstallingStatus,
+  SetupRuntimeReadyStatus,
+} from "./SetupRuntimeCard";
 import {
   type OnboardingTransitionDirection,
   OnboardingSlideTransition,
@@ -40,6 +41,7 @@ type SetupStepProps = {
 };
 
 type SetupStepContentProps = SetupStepProps & {
+  renderRuntimeCard?: (runtime: AcpRuntimeCatalogEntry) => React.ReactNode;
   state: SetupStepState;
 };
 
@@ -66,32 +68,6 @@ function useSetupStepState(): SetupStepState {
   };
 }
 
-function RuntimeReadinessIndicator({
-  runtime,
-  ready,
-}: {
-  runtime: AcpRuntimeCatalogEntry;
-  ready: boolean;
-}) {
-  // Checkmark temporarily hidden; flip to true to restore it.
-  const showReadinessCheckmark = false;
-  if (!ready || !showReadinessCheckmark) return null;
-
-  return (
-    <span
-      aria-hidden="true"
-      className="pointer-events-none absolute right-8 top-8 flex h-8 w-8 items-center justify-center rounded-full border border-[var(--buzz-welcome-chartreuse)] bg-[var(--buzz-welcome-chartreuse)]"
-      data-testid={`onboarding-runtime-check-${runtime.id}`}
-    >
-      <Check
-        className="h-4 w-4 text-foreground"
-        data-testid={`onboarding-runtime-checkmark-${runtime.id}`}
-        strokeWidth={3}
-      />
-    </span>
-  );
-}
-
 function RuntimeStatus({
   installError,
   isInstalling,
@@ -153,10 +129,8 @@ function RuntimeStatus({
   if (shouldSignIn) {
     return (
       <div className="flex flex-col items-center gap-1.5">
-        <Button
-          aria-label={`Sign in to ${runtime.label}`}
-          className="buzz-onboarding-runtime-setup h-5 rounded-full bg-[var(--buzz-welcome-chartreuse)]/30 px-2.5 font-mono !text-badge font-normal uppercase text-foreground hover:bg-[var(--buzz-welcome-chartreuse)]/40"
-          data-testid={`onboarding-runtime-instructions-${runtime.id}`}
+        <SetupRuntimeAction
+          ariaLabel={`Sign in to ${runtime.label}`}
           onClick={() => {
             if (didSignInCheckTimeOut) {
               setDidSignInCheckTimeOut(false);
@@ -178,15 +152,14 @@ function RuntimeStatus({
               },
             );
           }}
-          type="button"
-          variant="ghost"
+          testId={`onboarding-runtime-instructions-${runtime.id}`}
         >
           {isWaitingForSignIn
             ? "CHECKING…"
             : didSignInCheckTimeOut
               ? "CHECK AGAIN"
               : "SIGN IN"}
-        </Button>
+        </SetupRuntimeAction>
         {methodsQuery.error instanceof Error ? (
           <RuntimeErrorTooltip
             className="absolute inset-x-3 bottom-2 truncate text-xs leading-4 text-destructive"
@@ -206,16 +179,7 @@ function RuntimeStatus({
   }
 
   if (isInstalling) {
-    return (
-      <div
-        aria-label={`Installing ${runtime.label}`}
-        className="flex h-5 items-center gap-2 rounded-full bg-white/60 px-2.5 font-mono text-badge font-normal uppercase text-foreground"
-        role="status"
-      >
-        <Spinner className="h-3 w-3 border-2 text-foreground" />
-        INSTALLING
-      </div>
-    );
+    return <SetupRuntimeInstallingStatus runtime={runtime} />;
   }
 
   if (runtimeIsReadyForOnboarding(runtime)) {
@@ -227,50 +191,20 @@ function RuntimeStatus({
     // both clear and READY returns. Next stays gated by isChecking/errorMessage
     // in SetupStepContent, so this only governs the per-card claim.
     if (runtimesQuery.isFetching) {
-      return (
-        <div
-          aria-label={`Rechecking ${runtime.label}`}
-          className="flex h-5 items-center gap-2 rounded-full bg-[#EBEFEF] px-2.5 font-mono text-badge font-normal uppercase text-foreground"
-          data-testid={`onboarding-runtime-rechecking-${runtime.id}`}
-          role="status"
-        >
-          <Spinner className="h-3 w-3 border-2 text-foreground" />
-          CHECKING…
-        </div>
-      );
+      return <SetupRuntimeCheckingStatus runtime={runtime} />;
     }
     if (runtimesQuery.isError) {
       return (
-        <Button
-          aria-label={`Check ${runtime.label} again`}
-          className="buzz-onboarding-runtime-setup h-5 rounded-full bg-[var(--buzz-welcome-chartreuse)]/30 px-2.5 font-mono !text-badge font-normal uppercase text-foreground hover:bg-[var(--buzz-welcome-chartreuse)]/40"
-          data-testid={`onboarding-runtime-recheck-${runtime.id}`}
+        <SetupRuntimeAction
+          ariaLabel={`Check ${runtime.label} again`}
           onClick={() => void runtimesQuery.forceRefresh()}
-          type="button"
-          variant="ghost"
+          testId={`onboarding-runtime-recheck-${runtime.id}`}
         >
           CHECK AGAIN
-        </Button>
+        </SetupRuntimeAction>
       );
     }
-    return (
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <span
-            className="inline-flex h-5 cursor-default items-center rounded-full bg-[#EBEFEF] px-2.5 font-mono text-badge font-normal uppercase text-foreground"
-            data-testid={`onboarding-runtime-ready-${runtime.id}`}
-          >
-            READY
-          </span>
-        </TooltipTrigger>
-        <TooltipContent
-          className="max-w-80 bg-black text-left text-xs text-white shadow-sm"
-          side="top"
-        >
-          <RuntimeDetails runtime={runtime} />
-        </TooltipContent>
-      </Tooltip>
-    );
+    return <SetupRuntimeReadyStatus runtime={runtime} />;
   }
 
   if (
@@ -278,160 +212,40 @@ function RuntimeStatus({
     runtime.authStatus.status === "unknown"
   ) {
     return (
-      <Button
-        aria-label={`Check ${runtime.label} again`}
-        className="buzz-onboarding-runtime-setup h-5 rounded-full bg-[var(--buzz-welcome-chartreuse)]/30 px-2.5 font-mono !text-badge font-normal uppercase text-foreground hover:bg-[var(--buzz-welcome-chartreuse)]/40"
+      <SetupRuntimeAction
+        ariaLabel={`Check ${runtime.label} again`}
         disabled={runtimesQuery.isFetching}
         onClick={() => void runtimesQuery.forceRefresh()}
-        type="button"
-        variant="ghost"
       >
         {runtimesQuery.isFetching ? "CHECKING…" : "CHECK AGAIN"}
-      </Button>
+      </SetupRuntimeAction>
     );
   }
 
   const installLabel = installError ? "RETRY INSTALL" : "INSTALL";
   if (runtime.canAutoInstall) {
     return (
-      <Button
-        aria-label={`${installError ? "Retry installing" : "Install"} ${runtime.label}`}
-        className="buzz-onboarding-runtime-setup h-5 rounded-full bg-[var(--buzz-welcome-chartreuse)]/30 px-2.5 font-mono !text-badge font-normal uppercase text-foreground hover:bg-[var(--buzz-welcome-chartreuse)]/40"
-        data-testid={`onboarding-runtime-install-${runtime.id}`}
+      <SetupRuntimeAction
+        ariaLabel={`${installError ? "Retry installing" : "Install"} ${runtime.label}`}
         onClick={onInstall}
-        type="button"
-        variant="ghost"
+        testId={`onboarding-runtime-install-${runtime.id}`}
       >
         {installLabel}
-      </Button>
+      </SetupRuntimeAction>
     );
   }
 
   return (
-    <Button
-      aria-label={`View ${runtime.label} install instructions`}
-      className="buzz-onboarding-runtime-setup h-5 rounded-full bg-[var(--buzz-welcome-chartreuse)]/30 px-2.5 font-mono !text-badge font-normal uppercase text-foreground hover:bg-[var(--buzz-welcome-chartreuse)]/40"
-      data-testid={`onboarding-runtime-instructions-${runtime.id}`}
+    <SetupRuntimeAction
+      ariaLabel={`View ${runtime.label} install instructions`}
       onClick={() => void openUrl(runtime.installInstructionsUrl)}
-      type="button"
-      variant="ghost"
+      testId={`onboarding-runtime-instructions-${runtime.id}`}
     >
       INSTALL
-    </Button>
-  );
-}
-
-function RuntimeDetails({ runtime }: { runtime: AcpRuntimeCatalogEntry }) {
-  if (
-    runtime.availability === "available" &&
-    runtime.command &&
-    runtime.binaryPath
-  ) {
-    const description = describeResolvedCommand(
-      runtime.command,
-      runtime.binaryPath,
-    );
-    return (
-      <>
-        <p className="text-xs leading-4 text-white">
-          {description.charAt(0).toUpperCase() + description.slice(1)}
-        </p>
-        {runtime.defaultArgs.length > 0 ? (
-          <p className="mt-1 text-xs leading-4 text-white">
-            Args:{" "}
-            <code className="font-mono">{runtime.defaultArgs.join(", ")}</code>
-          </p>
-        ) : null}
-      </>
-    );
-  }
-
-  if (runtime.availability === "adapter_missing") {
-    return (
-      <>
-        <p className="text-xs leading-4 text-white">
-          CLI detected; ACP adapter missing.
-        </p>
-        <p className="mt-1 text-xs leading-4 text-white">
-          {runtime.installHint}
-        </p>
-      </>
-    );
-  }
-
-  if (runtime.availability === "adapter_outdated") {
-    return (
-      <>
-        <p className="text-xs leading-4 text-white">
-          ACP adapter detected but outdated — reinstall required.
-        </p>
-        <p className="mt-1 text-xs leading-4 text-white">
-          This updates the machine-global{" "}
-          <code className="rounded bg-white/10 px-0.5 font-mono text-xs text-white">
-            codex-acp
-          </code>{" "}
-          adapter. Older Buzz releases using the legacy adapter contract may
-          lose community access until{" "}
-          <code className="rounded bg-white/10 px-0.5 font-mono text-xs text-white">
-            @zed-industries/codex-acp@0.16.0
-          </code>{" "}
-          is restored.
-        </p>
-        <p className="mt-1 text-xs leading-4 text-white">
-          {runtime.installHint}
-        </p>
-      </>
-    );
-  }
-
-  if (runtime.availability === "cli_missing") {
-    return (
-      <>
-        <p className="text-xs leading-4 text-white">
-          ACP adapter detected; CLI missing.
-        </p>
-        <p className="mt-1 text-xs leading-4 text-white">
-          {runtime.installHint}
-        </p>
-      </>
-    );
-  }
-
-  return (
-    <>
-      <p className="text-xs leading-4 text-white">Not installed yet.</p>
-      <p className="mt-1 text-xs leading-4 text-white">{runtime.installHint}</p>
-    </>
+    </SetupRuntimeAction>
   );
 }
 
-function runtimeDetailText(runtime: AcpRuntimeCatalogEntry): string {
-  if (
-    runtime.availability === "available" &&
-    runtime.command &&
-    runtime.binaryPath
-  ) {
-    const description = describeResolvedCommand(
-      runtime.command,
-      runtime.binaryPath,
-    );
-    return description.charAt(0).toUpperCase() + description.slice(1);
-  }
-  if (runtime.availability === "adapter_missing") {
-    return "CLI detected; ACP adapter missing.";
-  }
-  if (runtime.availability === "adapter_outdated") {
-    return "ACP adapter detected but outdated — reinstall required.";
-  }
-  if (
-    runtime.availability === "cli_missing" ||
-    runtime.availability === "not_installed"
-  ) {
-    return "CLI not detected.";
-  }
-  return "";
-}
-
 function isSupportedOnboardingAuthMethod(
   runtime: AcpRuntimeCatalogEntry,
   method: AcpAuthMethod,
@@ -523,8 +337,6 @@ function RuntimeCard({
   const installError = installResults[runtime.id]?.error ?? null;
   const isInstalling = installMutation.isPending;
   const installOutputLine = useInstallOutputLine(runtime.id, isInstalling);
-  const isAvailable = runtime.availability === "available";
-  const isReady = runtimeIsReadyForOnboarding(runtime);
 
   function handleInstall() {
     onInstallResultsChange((current) => ({
@@ -557,66 +369,33 @@ function RuntimeCard({
   }
 
   return (
-    <Card
-      className={cn(
-        "group h-[224px] w-full max-w-[288px] select-none items-center px-3 py-1.5 text-center",
-        installError && "ring-1 ring-destructive/40",
-        isReady && "brightness-[0.98]",
-      )}
-      data-ready={isReady ? "true" : "false"}
-      data-testid={`onboarding-runtime-${runtime.id}`}
-      variant="textured"
-    >
-      <RuntimeReadinessIndicator ready={isReady} runtime={runtime} />
-
-      <div className="flex min-w-0 flex-col items-center gap-2.5">
-        <div className="flex min-w-0 items-center justify-center gap-3">
-          <RuntimeIcon className="h-7 w-7" runtime={runtime} />
-          <h2 className="truncate text-sm font-normal leading-5 text-foreground">
-            {getRuntimeDisplayLabel(runtime)}
-          </h2>
-        </div>
+    <SetupRuntimeCardPresentation
+      footer={
+        installError ? (
+          <RuntimeErrorTooltip
+            className="absolute inset-x-3 bottom-2 flex min-w-0 items-center justify-center gap-1.5 overflow-hidden whitespace-nowrap text-xs leading-4 text-destructive"
+            detail={installError}
+            label="Installation failed"
+            showIcon
+            testId={`onboarding-runtime-error-${runtime.id}`}
+          />
+        ) : (
+          <RuntimeAuthError runtime={runtime} />
+        )
+      }
+      installError={installError}
+      installOutputLine={installOutputLine}
+      isInstalling={isInstalling}
+      runtime={runtime}
+      status={
         <RuntimeStatus
           installError={installError}
           isInstalling={isInstalling}
           onInstall={handleInstall}
           runtime={runtime}
         />
-        {isInstalling && installOutputLine ? (
-          // Takes the detail text's slot rather than adding a row: the card is
-          // fixed-height, and during an install the live line is the more
-          // useful of the two.
-          <p
-            aria-live="polite"
-            className="max-w-[13rem] truncate font-mono text-2xs leading-4 text-muted-foreground"
-            data-testid={`onboarding-runtime-install-output-${runtime.id}`}
-          >
-            {installOutputLine}
-          </p>
-        ) : !isAvailable && runtimeDetailText(runtime) ? (
-          <p
-            aria-hidden={installError ? "true" : undefined}
-            className={cn(
-              "max-w-[13rem] text-2xs leading-4 text-muted-foreground",
-              installError && "invisible",
-            )}
-          >
-            {runtimeDetailText(runtime)}
-          </p>
-        ) : null}
-      </div>
-      {installError ? (
-        <RuntimeErrorTooltip
-          className="absolute inset-x-3 bottom-2 flex min-w-0 items-center justify-center gap-1.5 overflow-hidden whitespace-nowrap text-xs leading-4 text-destructive"
-          detail={installError}
-          label="Installation failed"
-          showIcon
-          testId={`onboarding-runtime-error-${runtime.id}`}
-        />
-      ) : (
-        <RuntimeAuthError runtime={runtime} />
-      )}
-    </Card>
+      }
+    />
   );
 }
 
@@ -642,6 +421,7 @@ function RuntimeProvidersSection({
   installResults,
   navigateToAgentSettings,
   onInstallResultsChange,
+  renderRuntimeCard,
   runtimeProviders,
 }: {
   installResults: InstallResultsState;
@@ -649,6 +429,7 @@ function RuntimeProvidersSection({
   onInstallResultsChange: React.Dispatch<
     React.SetStateAction<InstallResultsState>
   >;
+  renderRuntimeCard?: (runtime: AcpRuntimeCatalogEntry) => React.ReactNode;
   runtimeProviders: SetupStepState["runtimeProviders"];
 }) {
   const { errorMessage, isChecking, items } = runtimeProviders;
@@ -669,14 +450,20 @@ function RuntimeProvidersSection({
       <div className="flex w-full flex-1 flex-col items-center justify-center gap-8 py-10">
         {orderedItems.length > 0 ? (
           <div className="grid min-w-0 w-full max-w-[1200px] grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
-            {orderedItems.map((runtime) => (
-              <RuntimeCard
-                installResults={installResults}
-                key={runtime.id}
-                onInstallResultsChange={onInstallResultsChange}
-                runtime={runtime}
-              />
-            ))}
+            {orderedItems.map((runtime) =>
+              renderRuntimeCard ? (
+                <React.Fragment key={runtime.id}>
+                  {renderRuntimeCard(runtime)}
+                </React.Fragment>
+              ) : (
+                <RuntimeCard
+                  installResults={installResults}
+                  key={runtime.id}
+                  onInstallResultsChange={onInstallResultsChange}
+                  runtime={runtime}
+                />
+              ),
+            )}
           </div>
         ) : isChecking ? (
           <RuntimeProvidersLoadingState />
@@ -723,10 +510,11 @@ function RuntimeProvidersSection({
   );
 }
 
-function SetupStepContent({
+export function SetupStepContent({
   actions,
   direction,
   onReadyRuntimeIdsChange,
+  renderRuntimeCard,
   state,
 }: SetupStepContentProps) {
   const { runtimeProviders } = state;
@@ -758,6 +546,7 @@ function SetupStepContent({
         installResults={installResults}
         navigateToAgentSettings={actions.navigateToAgentSettings}
         onInstallResultsChange={setInstallResults}
+        renderRuntimeCard={renderRuntimeCard}
         runtimeProviders={runtimeProviders}
       />
 
diff --git a/desktop/src/features/onboarding/ui/SetupStepPreview.tsx b/desktop/src/features/onboarding/ui/SetupStepPreview.tsx
new file mode 100644
index 00000000000..ebab7c05ac2
--- /dev/null
+++ b/desktop/src/features/onboarding/ui/SetupStepPreview.tsx
@@ -0,0 +1,272 @@
+import * as React from "react";
+
+import type { AcpRuntimeCatalogEntry } from "@/shared/api/types";
+import { TooltipProvider } from "@/shared/ui/tooltip";
+import {
+  SetupRuntimeAction,
+  SetupRuntimeCardPresentation,
+  SetupRuntimeInstallingStatus,
+  SetupRuntimeReadyStatus,
+} from "./SetupRuntimeCard";
+import { SetupStepContent } from "./SetupStep";
+
+const PREVIEW_RUNTIMES: AcpRuntimeCatalogEntry[] = [
+  {
+    id: "claude",
+    label: "Claude Code",
+    avatarUrl: "",
+    availability: "available",
+    command: "claude-agent-acp",
+    binaryPath: "/usr/local/bin/claude-agent-acp",
+    defaultArgs: [],
+    mcpCommand: null,
+    modelEnvVar: null,
+    providerEnvVar: null,
+    thinkingEnvVar: null,
+    maxTokensEnvVar: null,
+    contextLimitEnvVar: null,
+    maxRoundsEnvVar: null,
+    installHint: "Install the Claude Code ACP adapter via npm.",
+    installInstructionsUrl:
+      "https://www.npmjs.com/package/@anthropic-ai/claude-agent-acp",
+    canAutoInstall: true,
+    requiresExternalCli: true,
+    underlyingCliPath: "/usr/local/bin/claude",
+    nodeRequired: false,
+    authStatus: { status: "logged_out" },
+    loginHint: "Sign in with your Claude subscription.",
+    source: "builtin",
+  },
+  {
+    id: "codex",
+    label: "Codex",
+    avatarUrl: "",
+    availability: "adapter_missing",
+    command: null,
+    binaryPath: null,
+    defaultArgs: [],
+    mcpCommand: null,
+    modelEnvVar: null,
+    providerEnvVar: null,
+    thinkingEnvVar: null,
+    maxTokensEnvVar: null,
+    contextLimitEnvVar: null,
+    maxRoundsEnvVar: null,
+    installHint: "Install the Codex ACP adapter.",
+    installInstructionsUrl: "https://github.com/openai/codex",
+    canAutoInstall: true,
+    requiresExternalCli: true,
+    underlyingCliPath: "/usr/local/bin/codex",
+    nodeRequired: false,
+    authStatus: { status: "unknown" },
+    loginHint: "Sign in with your ChatGPT subscription.",
+    source: "builtin",
+  },
+  {
+    id: "goose",
+    label: "Goose",
+    avatarUrl: "",
+    availability: "available",
+    command: "goose",
+    binaryPath: "/usr/local/bin/goose",
+    defaultArgs: ["acp"],
+    mcpCommand: null,
+    modelEnvVar: null,
+    providerEnvVar: null,
+    thinkingEnvVar: null,
+    maxTokensEnvVar: null,
+    contextLimitEnvVar: null,
+    maxRoundsEnvVar: null,
+    installHint: "Install Goose via the official install script.",
+    installInstructionsUrl: "https://block.github.io/goose/",
+    canAutoInstall: true,
+    requiresExternalCli: true,
+    underlyingCliPath: null,
+    nodeRequired: false,
+    authStatus: { status: "not_applicable" },
+    loginHint: null,
+    source: "builtin",
+  },
+  {
+    id: "buzz-agent",
+    label: "Buzz Agent",
+    avatarUrl: "",
+    availability: "available",
+    command: "buzz-agent",
+    binaryPath: "/Applications/Buzz.app/Contents/MacOS/buzz-agent",
+    defaultArgs: [],
+    mcpCommand: "buzz-dev-mcp",
+    modelEnvVar: null,
+    providerEnvVar: null,
+    thinkingEnvVar: null,
+    maxTokensEnvVar: null,
+    contextLimitEnvVar: null,
+    maxRoundsEnvVar: null,
+    installHint: "Ships with the Buzz desktop app.",
+    installInstructionsUrl: "https://github.com/block/buzz",
+    canAutoInstall: false,
+    requiresExternalCli: false,
+    underlyingCliPath: null,
+    nodeRequired: false,
+    authStatus: { status: "not_applicable" },
+    loginHint: null,
+    source: "builtin",
+  },
+];
+
+type PreviewActivity = "checking" | "idle" | "installing";
+
+function PreviewRuntimeCard({
+  onRuntimeChange,
+  runtime,
+}: {
+  onRuntimeChange: (
+    runtimeId: string,
+    update: (runtime: AcpRuntimeCatalogEntry) => AcpRuntimeCatalogEntry,
+  ) => void;
+  runtime: AcpRuntimeCatalogEntry;
+}) {
+  const [activity, setActivity] = React.useState<PreviewActivity>("idle");
+  const timeoutRef = React.useRef<number | null>(null);
+
+  React.useEffect(
+    () => () => {
+      if (timeoutRef.current !== null) {
+        window.clearTimeout(timeoutRef.current);
+      }
+    },
+    [],
+  );
+
+  function finishAfter(
+    activityValue: Exclude<PreviewActivity, "idle">,
+    update: (current: AcpRuntimeCatalogEntry) => AcpRuntimeCatalogEntry,
+  ) {
+    if (timeoutRef.current !== null) {
+      window.clearTimeout(timeoutRef.current);
+    }
+    setActivity(activityValue);
+    timeoutRef.current = window.setTimeout(() => {
+      onRuntimeChange(runtime.id, update);
+      setActivity("idle");
+      timeoutRef.current = null;
+    }, 700);
+  }
+
+  let status: React.ReactNode;
+  if (activity === "installing") {
+    status = <SetupRuntimeInstallingStatus runtime={runtime} />;
+  } else if (activity === "checking") {
+    status = (
+      <SetupRuntimeAction
+        ariaLabel={`Sign in to ${runtime.label}`}
+        disabled
+        onClick={() => undefined}
+        testId={`onboarding-runtime-instructions-${runtime.id}`}
+      >
+        CHECKING…
+      </SetupRuntimeAction>
+    );
+  } else if (
+    runtime.availability === "available" &&
+    (runtime.authStatus.status === "logged_in" ||
+      runtime.authStatus.status === "not_applicable")
+  ) {
+    status = <SetupRuntimeReadyStatus runtime={runtime} />;
+  } else if (
+    runtime.availability === "available" &&
+    runtime.authStatus.status === "logged_out"
+  ) {
+    status = (
+      <SetupRuntimeAction
+        ariaLabel={`Sign in to ${runtime.label}`}
+        onClick={() =>
+          finishAfter("checking", (current) => ({
+            ...current,
+            authStatus: { status: "logged_in" },
+          }))
+        }
+        testId={`onboarding-runtime-instructions-${runtime.id}`}
+      >
+        SIGN IN
+      </SetupRuntimeAction>
+    );
+  } else {
+    status = (
+      <SetupRuntimeAction
+        ariaLabel={`Install ${runtime.label}`}
+        onClick={() =>
+          finishAfter("installing", (current) => ({
+            ...current,
+            availability: "available",
+            authStatus: { status: "logged_out" },
+            binaryPath: `/usr/local/bin/${current.id}-acp`,
+            command: `${current.id}-acp`,
+          }))
+        }
+        testId={`onboarding-runtime-install-${runtime.id}`}
+      >
+        INSTALL
+      </SetupRuntimeAction>
+    );
+  }
+
+  return (
+    <SetupRuntimeCardPresentation
+      installError={null}
+      isInstalling={activity === "installing"}
+      runtime={runtime}
+      status={status}
+    />
+  );
+}
+
+export function SetupStepPreview({
+  onBack,
+  onNext,
+}: {
+  onBack: () => void;
+  onNext: () => void;
+}) {
+  const [runtimes, setRuntimes] = React.useState(PREVIEW_RUNTIMES);
+  const updateRuntime = React.useCallback(
+    (
+      runtimeId: string,
+      update: (runtime: AcpRuntimeCatalogEntry) => AcpRuntimeCatalogEntry,
+    ) => {
+      setRuntimes((current) =>
+        current.map((runtime) =>
+          runtime.id === runtimeId ? update(runtime) : runtime,
+        ),
+      );
+    },
+    [],
+  );
+
+  return (
+    <TooltipProvider>
+      <SetupStepContent
+        actions={{
+          back: onBack,
+          next: onNext,
+          navigateToAgentSettings: onNext,
+        }}
+        direction="forward"
+        onReadyRuntimeIdsChange={() => undefined}
+        renderRuntimeCard={(runtime) => (
+          <PreviewRuntimeCard
+            onRuntimeChange={updateRuntime}
+            runtime={runtime}
+          />
+        )}
+        state={{
+          runtimeProviders: {
+            errorMessage: null,
+            isChecking: false,
+            items: runtimes,
+          },
+        }}
+      />
+    </TooltipProvider>
+  );
+}
diff --git a/desktop/src/features/onboarding/ui/WelcomeChannelAppPreview.tsx b/desktop/src/features/onboarding/ui/WelcomeChannelAppPreview.tsx
new file mode 100644
index 00000000000..8ea27be2793
--- /dev/null
+++ b/desktop/src/features/onboarding/ui/WelcomeChannelAppPreview.tsx
@@ -0,0 +1,639 @@
+import {
+  ArrowUp,
+  AtSign,
+  Bot,
+  ChevronLeft,
+  ChevronRight,
+  FolderKanban,
+  Hash,
+  Headphones,
+  Home,
+  Lock,
+  MoreVertical,
+  Paperclip,
+  Plus,
+  Search,
+  Smile,
+  TerminalSquare,
+  Users,
+} from "lucide-react";
+import * as React from "react";
+
+import { ChannelIntroBlock } from "@/features/messages/ui/ChannelIntroBlock";
+import { ComposerDockBackdrop } from "@/features/messages/ui/ComposerDockBackdrop";
+import { ProfileAvatar } from "@/features/profile/ui/ProfileAvatar";
+import { cn } from "@/shared/lib/cn";
+import { Button } from "@/shared/ui/button";
+import { Dialog, DialogContent, DialogTitle } from "@/shared/ui/dialog";
+import { StartupWindowDragRegion } from "@/shared/ui/StartupWindowDragRegion";
+import {
+  HARNESS_CONNECTION_OPTIONS,
+  HarnessConnectionDetailPreview,
+  HarnessConnectionMethodPreview,
+  type HarnessConnectionMethod,
+  HarnessConnectionPreview,
+  runtimeNeedsOnboardingConnection,
+} from "./HarnessConnectionStep";
+import { OnboardingFooterProvider } from "./OnboardingFooter";
+import { OnboardingPreviewLayoutProvider } from "./OnboardingPreviewShell";
+
+const CHANNEL_ROW_CLASS =
+  "flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-sm transition-colors hover:bg-black/[0.06]";
+const WELCOME_TEAM = [
+  { name: "Fizz", image: "/onboarding/starter-team/fizz.png" },
+  { name: "Honey", image: "/onboarding/starter-team/honey.png" },
+  { name: "Pollen", image: "/onboarding/starter-team/pollen.png" },
+] as const;
+type PreviewThemeStyle = React.CSSProperties & Record<`--${string}`, string>;
+
+const PREVIEW_APP_THEME: PreviewThemeStyle = {
+  colorScheme: "light",
+  "--accent": "0 0% 94%",
+  "--accent-foreground": "0 0% 10%",
+  "--background": "0 0% 100%",
+  "--border": "0 0% 87%",
+  "--card": "0 0% 100%",
+  "--card-foreground": "0 0% 10%",
+  "--foreground": "0 0% 10%",
+  "--input": "0 0% 84%",
+  "--muted": "0 0% 94%",
+  "--muted-foreground": "0 0% 42%",
+  "--popover": "0 0% 100%",
+  "--popover-foreground": "0 0% 10%",
+  "--primary": "0 0% 10%",
+  "--primary-foreground": "0 0% 100%",
+  "--ring": "0 0% 20%",
+  "--secondary": "0 0% 96%",
+  "--secondary-foreground": "0 0% 10%",
+  "--sidebar": "48 48% 88%",
+  "--sidebar-accent": "0 0% 100%",
+  "--sidebar-accent-foreground": "0 0% 10%",
+  "--sidebar-background": "48 48% 88%",
+  "--sidebar-border": "0 0% 60%",
+  "--sidebar-foreground": "0 0% 18%",
+  "--sidebar-ring": "0 0% 20%",
+};
+
+type WelcomeHarnessPage = "method" | "list" | "detail";
+
+function WelcomeHarnessConnectionDialog({
+  onConnected,
+  onOpenChange,
+  open,
+}: {
+  onConnected: () => void;
+  onOpenChange: (open: boolean) => void;
+  open: boolean;
+}) {
+  const [page, setPage] = React.useState<WelcomeHarnessPage>("method");
+  const [method, setMethod] =
+    React.useState<HarnessConnectionMethod>("subscription");
+  const [selectedHarnessId, setSelectedHarnessId] =
+    React.useState("buzz-agent");
+  const [detailBackPage, setDetailBackPage] =
+    React.useState<WelcomeHarnessPage>("list");
+  const [installedIds, setInstalledIds] = React.useState(
+    () =>
+      new Set(
+        HARNESS_CONNECTION_OPTIONS.filter(
+          ({ runtime }) => runtime.availability === "available",
+        ).map(({ runtime }) => runtime.id),
+      ),
+  );
+  const selectedHarness =
+    HARNESS_CONNECTION_OPTIONS.find(
+      ({ runtime }) => runtime.id === selectedHarnessId,
+    ) ?? HARNESS_CONNECTION_OPTIONS[0];
+
+  React.useEffect(() => {
+    if (!open) return;
+    setPage("method");
+    setMethod("subscription");
+    setSelectedHarnessId("buzz-agent");
+    setDetailBackPage("list");
+  }, [open]);
+
+  const completeConnection = React.useCallback(() => {
+    onConnected();
+    onOpenChange(false);
+  }, [onConnected, onOpenChange]);
+
+  let content: React.ReactNode;
+  if (page === "method") {
+    content = (
+      <HarnessConnectionMethodPreview
+        embedded
+        onBack={() => onOpenChange(false)}
+        onSelect={(nextMethod) => {
+          setMethod(nextMethod);
+          if (nextMethod === "api") {
+            setSelectedHarnessId("buzz-agent");
+            setDetailBackPage("method");
+            setPage("detail");
+          } else {
+            setPage("list");
+          }
+        }}
+        onSetUpLater={() => onOpenChange(false)}
+        total={5}
+      />
+    );
+  } else if (page === "list") {
+    content = (
+      <HarnessConnectionPreview
+        embedded
+        installedIds={installedIds}
+        method={method}
+        onBack={() => setPage("method")}
+        onSelect={(option) => {
+          setSelectedHarnessId(option.runtime.id);
+          setDetailBackPage("list");
+          if (
+            installedIds.has(option.runtime.id) &&
+            !runtimeNeedsOnboardingConnection(method, option.runtime.id)
+          ) {
+            completeConnection();
+          } else {
+            setPage("detail");
+          }
+        }}
+        total={5}
+      />
+    );
+  } else {
+    content = (
+      <HarnessConnectionDetailPreview
+        embedded
+        installed={installedIds.has(selectedHarness.runtime.id)}
+        key={`${selectedHarness.runtime.id}-${method}`}
+        lockMethod
+        method={method}
+        onBack={() => setPage(detailBackPage)}
+        onCheckAgain={() => {
+          setInstalledIds((current) =>
+            new Set(current).add(selectedHarness.runtime.id),
+          );
+          if (
+            !runtimeNeedsOnboardingConnection(
+              method,
+              selectedHarness.runtime.id,
+            )
+          ) {
+            completeConnection();
+          }
+        }}
+        onContinue={completeConnection}
+        onMethodChange={setMethod}
+        onUseDifferentHarness={
+          method === "api" && selectedHarness.runtime.id === "buzz-agent"
+            ? () => setPage("list")
+            : undefined
+        }
+        option={selectedHarness}
+        total={5}
+      />
+    );
+  }
+
+  const backAction =
+    page === "method"
+      ? undefined
+      : {
+          onClick: () => setPage(page === "detail" ? detailBackPage : "method"),
+        };
+
+  return (
+    <Dialog onOpenChange={onOpenChange} open={open}>
+      <DialogContent
+        className="buzz-onboarding-neutral-theme !flex h-[min(41.5rem,calc(100dvh-3rem))] max-h-[calc(100dvh-2rem)] flex-col gap-0 overflow-hidden rounded-[2rem] bg-white p-12 text-left text-foreground sm:max-w-[38rem] [&_.buzz-onboarding-transition-content]:min-w-[32rem] [&_.buzz-onboarding-transition-content]:!text-left [&_h1+p]:!mx-0 [&_h1+p]:!mt-2 [&_h1+p]:!text-left [&_h1+p]:!text-base [&_h1+p]:!leading-6 [&_h1]:!text-left [&_h1]:!text-2xl [&_h1]:!leading-8 [&_h1]:!text-foreground"
+        data-testid="welcome-preview-harness-dialog"
+        style={PREVIEW_APP_THEME}
+      >
+        <DialogTitle className="sr-only">Connect AI provider</DialogTitle>
+        <OnboardingPreviewLayoutProvider card>
+          <OnboardingFooterProvider backAction={backAction} placement="card">
+            <div className="flex min-h-0 min-w-[32rem] flex-1 flex-col">
+              {content}
+            </div>
+          </OnboardingFooterProvider>
+        </OnboardingPreviewLayoutProvider>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function PreviewAvatar({
+  avatarUrl,
+  label,
+  size = "small",
+}: {
+  avatarUrl: string;
+  label: string;
+  size?: "small" | "message";
+}) {
+  const className =
+    size === "message"
+      ? "h-9 w-9 rounded-lg text-xs"
+      : "h-8 w-8 rounded-lg text-xs";
+  if (avatarUrl) {
+    return (
+      <ProfileAvatar
+        avatarUrl={avatarUrl}
+        className={className}
+        label={label}
+      />
+    );
+  }
+
+  return (
+    <span
+      aria-label={label}
+      className={cn(
+        "flex shrink-0 items-center justify-center bg-black font-semibold text-white",
+        className,
+      )}
+      role="img"
+    >
+      {label.trim().charAt(0).toUpperCase() || "Y"}
+    </span>
+  );
+}
+
+function PreviewSidebar({
+  avatarUrl,
+  channelName,
+  communityName,
+  profileName,
+  onPreviewAction,
+}: {
+  avatarUrl: string;
+  channelName: string;
+  communityName: string;
+  profileName: string;
+  onPreviewAction: (action: string) => void;
+}) {
+  return (
+    <aside className="flex w-[344px] shrink-0 flex-col pb-2 pr-2 pt-10 text-black/80">
+      <div className="flex h-9 items-center gap-0.5 px-2">
+        <Button
+          aria-label="Go back"
+          className="size-7 rounded-md text-black/35"
+          disabled
+          size="icon"
+          variant="ghost"
+        >
+          <ChevronLeft className="size-4" />
+        </Button>
+        <Button
+          aria-label="Go forward"
+          className="size-7 rounded-md text-black/35"
+          disabled
+          size="icon"
+          variant="ghost"
+        >
+          <ChevronRight className="size-4" />
+        </Button>
+      </div>
+
+      <div className="px-2 pb-3 pt-1">
+        <button
+          className="flex h-9 w-full items-center gap-2 rounded-lg bg-white/25 px-3 text-sm text-black/45 transition-colors hover:bg-white/45"
+          onClick={() => onPreviewAction("Search")}
+          type="button"
+        >
+          <Search className="size-4" />
+          <span className="flex-1 text-left">Search everything</span>
+          <span className="text-xs">⌘K</span>
+        </button>
+      </div>
+
+      <nav aria-label="Workspace" className="space-y-0.5 px-2">
+        <button className={CHANNEL_ROW_CLASS} type="button">
+          <Home className="size-4 text-black/50" />
+          Home
+        </button>
+        <button className={CHANNEL_ROW_CLASS} type="button">
+          <FolderKanban className="size-4 text-black/50" />
+          Projects
+        </button>
+        <button className={CHANNEL_ROW_CLASS} type="button">
+          <Bot className="size-4 text-black/50" />
+          Agents
+        </button>
+      </nav>
+
+      <div className="mt-5 flex items-center justify-between px-4 text-xs font-medium text-black/45">
+        <span>Channels</span>
+        <Plus className="size-3.5" />
+      </div>
+      <div className="mt-1 space-y-0.5 px-2">
+        <button className={CHANNEL_ROW_CLASS} type="button">
+          <Hash className="size-4 text-black/45" />
+          general
+        </button>
+        <button className={CHANNEL_ROW_CLASS} type="button">
+          <Hash className="size-4 text-black/45" />
+          welcome-everyone
+        </button>
+        <button
+          className={cn(CHANNEL_ROW_CLASS, "bg-black/[0.07] font-semibold")}
+          type="button"
+        >
+          <Lock className="size-4 text-black/55" />
+          {channelName}
+        </button>
+      </div>
+
+      <button
+        className="mt-auto flex items-center gap-2 rounded-xl px-2 py-2 text-left hover:bg-black/[0.05]"
+        onClick={() => onPreviewAction("Profile")}
+        type="button"
+      >
+        <PreviewAvatar avatarUrl={avatarUrl} label={profileName} />
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-sm font-semibold text-black/85">
+            {profileName}
+          </p>
+          <p className="truncate text-xs text-black/45">🐝 {communityName}</p>
+        </div>
+      </button>
+    </aside>
+  );
+}
+
+export function WelcomeChannelAppPreview({
+  avatarUrl,
+  communityName,
+  displayName,
+}: {
+  avatarUrl: string;
+  communityName: string;
+  displayName: string;
+}) {
+  const [draft, setDraft] = React.useState("");
+  const [messages, setMessages] = React.useState<string[]>([]);
+  const [harnessDialogOpen, setHarnessDialogOpen] = React.useState(false);
+  const [aiProviderConnected, setAiProviderConnected] = React.useState(false);
+  const [activePreviewAction, setActivePreviewAction] = React.useState<
+    string | null
+  >(null);
+  const channelName = "Welcome";
+  const profileName = displayName.trim() || "Your profile";
+  const submitDraft = (event: React.FormEvent) => {
+    event.preventDefault();
+    const message = draft.trim();
+    if (!message) return;
+    setMessages((current) => [...current, message]);
+    setDraft("");
+  };
+
+  const intro = {
+    actions: [
+      {
+        icon: <Hash aria-hidden className="size-4" />,
+        label: "Browse channels",
+        onClick: () => setActivePreviewAction("Browse channels"),
+        testId: "welcome-intro-action-browse-channels",
+      },
+      {
+        icon: <Plus aria-hidden className="size-4" />,
+        label: "Create a channel",
+        onClick: () => setActivePreviewAction("Create a channel"),
+        testId: "welcome-intro-action-create-channel",
+      },
+      {
+        icon: <Bot aria-hidden className="size-4" />,
+        label: "Create an agent",
+        onClick: () => setActivePreviewAction("Create an agent"),
+        testId: "welcome-intro-action-create-agent",
+      },
+    ],
+    channelKindLabel: "private welcome channel",
+    channelName,
+    description: null,
+  };
+
+  return (
+    <div
+      className="flex h-dvh w-full overflow-hidden bg-[linear-gradient(145deg,#f3ed8d_0%,#dce8bf_48%,#c8dde8_100%)] text-foreground"
+      data-testid="onboarding-preview-community-home"
+      style={PREVIEW_APP_THEME}
+    >
+      <StartupWindowDragRegion />
+      <PreviewSidebar
+        avatarUrl={avatarUrl}
+        channelName={channelName}
+        communityName={communityName}
+        onPreviewAction={setActivePreviewAction}
+        profileName={profileName}
+      />
+
+      <main className="relative z-10 m-2 ml-0 flex min-w-0 flex-1 flex-col overflow-hidden rounded-xl bg-white text-black shadow-[-1px_0_0_0_rgb(0_0_0_/_0.08)]">
+        <header
+          className="relative z-30 shrink-0 cursor-default select-none bg-white px-5 py-2"
+          data-testid="chat-header"
+          data-tauri-drag-region
+        >
+          <div className="flex h-9 min-w-0 items-center gap-2.5">
+            <div className="flex min-w-0 flex-1 items-center gap-1">
+              <Lock className="size-4 text-black/45" />
+              <h1
+                className="min-w-0 truncate text-base font-semibold leading-6 tracking-tight"
+                data-testid="chat-title"
+              >
+                {channelName}
+              </h1>
+            </div>
+            <div className="flex shrink-0 items-center gap-1.5">
+              <Button
+                aria-label="Open terminal"
+                className="size-9 rounded-xl"
+                size="icon"
+                variant="outline"
+              >
+                <TerminalSquare className="size-4" />
+              </Button>
+              <Button
+                aria-label="View members"
+                className="h-9 gap-2 rounded-xl px-3"
+                variant="outline"
+              >
+                <Users className="size-4" />
+                <span>4</span>
+              </Button>
+              <Button
+                aria-label="Start huddle"
+                className="size-9 rounded-xl"
+                size="icon"
+                variant="outline"
+              >
+                <Headphones className="size-4" />
+              </Button>
+              <Button
+                aria-label="More channel actions"
+                className="size-9 rounded-xl"
+                size="icon"
+                variant="outline"
+              >
+                <MoreVertical className="size-4" />
+              </Button>
+            </div>
+          </div>
+        </header>
+
+        <div className="min-h-0 flex-1 overflow-y-auto px-5 pb-48 pt-5">
+          <div className="mx-auto w-full max-w-[920px]">
+            <ChannelIntroBlock intro={intro} />
+
+            <section
+              className="mx-3 mt-7 max-w-[680px] border-t border-border/60 pt-6 text-left"
+              data-testid="welcome-preview-community-message"
+            >
+              <p className="text-lg font-semibold">
+                Welcome to {communityName}
+              </p>
+              <p className="mt-2 text-sm leading-6 text-muted-foreground">
+                Everyone starts with a private channel to get settled. This one
+                is yours. Use it to try out features, draft messages, or work
+                privately with agents.
+              </p>
+            </section>
+
+            {!aiProviderConnected ? (
+              <section
+                className="mx-3 mt-6 max-w-[680px] overflow-hidden rounded-2xl border border-border/70 bg-muted/35 text-left"
+                data-testid="welcome-preview-agent-activation"
+              >
+                <div className="flex items-center gap-4 p-5">
+                  <div className="flex shrink-0 -space-x-3">
+                    {WELCOME_TEAM.map((agent) => (
+                      <img
+                        alt={agent.name}
+                        className="size-14 rounded-2xl border-2 border-background bg-background object-contain"
+                        key={agent.name}
+                        src={agent.image}
+                      />
+                    ))}
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-2">
+                      <p className="text-base font-semibold">
+                        Bring your starter team online
+                      </p>
+                      <span className="rounded-full bg-foreground/[0.08] px-2 py-0.5 text-xs font-medium text-muted-foreground">
+                        Not connected
+                      </span>
+                    </div>
+                    <p className="mt-1.5 text-sm leading-5 text-muted-foreground">
+                      Connect an AI provider to start Fizz, Honey, and Pollen.
+                      They can help you learn Buzz and work through something
+                      you’re building.
+                    </p>
+                  </div>
+                </div>
+                <div className="flex items-center justify-between border-t border-border/60 bg-background/45 px-5 py-3">
+                  <p className="text-xs text-muted-foreground">
+                    You can change providers or agents later.
+                  </p>
+                  <Button
+                    className="h-9 rounded-full px-5"
+                    onClick={() => setHarnessDialogOpen(true)}
+                    type="button"
+                  >
+                    Connect AI provider
+                  </Button>
+                </div>
+              </section>
+            ) : null}
+
+            {messages.map((message, index) => (
+              <div
+                className="mt-6 flex items-start gap-3 px-3 text-left"
+                key={`${message}-${index.toString()}`}
+              >
+                <PreviewAvatar
+                  avatarUrl={avatarUrl}
+                  label={profileName}
+                  size="message"
+                />
+                <div>
+                  <div className="flex items-baseline gap-2">
+                    <p className="text-sm font-semibold">{profileName}</p>
+                    <p className="text-xs text-muted-foreground">Now</p>
+                  </div>
+                  <p className="mt-1 text-sm leading-5">{message}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="pointer-events-none absolute inset-x-0 bottom-0 z-40 isolate before:absolute before:inset-x-0 before:bottom-0 before:-z-10 before:h-24 before:bg-gradient-to-b before:from-transparent before:to-white before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:-z-10 after:h-12 after:bg-white after:content-['']">
+          <div className="composer-dock composer-overlay-corner-masks relative pointer-events-auto">
+            <ComposerDockBackdrop gutterClassName="inset-x-4" />
+            <form
+              className="relative z-10 mx-4 mb-3 rounded-2xl border border-black/10 bg-white/95 px-4 pb-3 pt-3 backdrop-blur-md"
+              data-testid="message-composer"
+              onSubmit={submitDraft}
+            >
+              <textarea
+                aria-label={`Message ${channelName}`}
+                className="min-h-11 w-full resize-none bg-transparent text-sm leading-5 outline-none placeholder:text-black/45"
+                data-testid="welcome-preview-composer-input"
+                onChange={(event) => setDraft(event.target.value)}
+                placeholder={`Message #${channelName}`}
+                rows={2}
+                value={draft}
+              />
+              <div className="flex items-center gap-1">
+                {[AtSign, Paperclip, Smile].map((Icon) => (
+                  <Button
+                    className="size-7 text-black/55"
+                    key={Icon.displayName ?? Icon.name}
+                    size="icon"
+                    type="button"
+                    variant="ghost"
+                  >
+                    <Icon className="size-4" />
+                  </Button>
+                ))}
+                <Button
+                  aria-label="Formatting"
+                  className="size-7 text-xs font-semibold text-black/55"
+                  size="icon"
+                  type="button"
+                  variant="ghost"
+                >
+                  Aa
+                </Button>
+                <Button
+                  aria-label="Send message"
+                  className="ml-auto size-9 rounded-full"
+                  disabled={!draft.trim()}
+                  size="icon"
+                  type="submit"
+                >
+                  <ArrowUp className="size-4" />
+                </Button>
+              </div>
+            </form>
+          </div>
+        </div>
+
+        {activePreviewAction ? (
+          <div
+            className="absolute right-5 top-16 z-50 rounded-lg border border-black/10 bg-white px-3 py-2 text-xs shadow-lg"
+            role="status"
+          >
+            {activePreviewAction}
+          </div>
+        ) : null}
+      </main>
+      <WelcomeHarnessConnectionDialog
+        onConnected={() => setAiProviderConnected(true)}
+        onOpenChange={setHarnessDialogOpen}
+        open={harnessDialogOpen}
+      />
+    </div>
+  );
+}
diff --git a/desktop/src/features/onboarding/ui/harnessConnectionOptions.ts b/desktop/src/features/onboarding/ui/harnessConnectionOptions.ts
new file mode 100644
index 00000000000..3bca71b7098
--- /dev/null
+++ b/desktop/src/features/onboarding/ui/harnessConnectionOptions.ts
@@ -0,0 +1,159 @@
+import type { AcpRuntimeCatalogEntry } from "@/shared/api/types";
+import type { HarnessConnectionOption } from "./HarnessConnectionStep";
+
+function previewRuntime({
+  available = false,
+  id,
+  installInstructionsUrl = "https://github.com/block/buzz",
+  label,
+  source = "preset",
+}: {
+  available?: boolean;
+  id: string;
+  installInstructionsUrl?: string;
+  label: string;
+  source?: AcpRuntimeCatalogEntry["source"];
+}): AcpRuntimeCatalogEntry {
+  return {
+    authStatus: available
+      ? { status: "not_applicable" }
+      : { status: "unknown" },
+    availability: available ? "available" : "not_installed",
+    avatarUrl: "",
+    binaryPath: available ? `/usr/local/bin/${id}` : null,
+    canAutoInstall: true,
+    command: available ? id : null,
+    contextLimitEnvVar: null,
+    defaultArgs: [],
+    id,
+    installHint: `Install ${label} to connect it to Buzz.`,
+    installInstructionsUrl,
+    label,
+    loginHint: null,
+    maxRoundsEnvVar: null,
+    maxTokensEnvVar: null,
+    mcpCommand: null,
+    modelEnvVar: null,
+    nodeRequired: false,
+    providerEnvVar: null,
+    requiresExternalCli: id !== "buzz-agent",
+    source,
+    thinkingEnvVar: null,
+    underlyingCliPath: null,
+  };
+}
+
+/** Fixed workshop catalog. Availability changes only in React memory. */
+export const HARNESS_CONNECTION_OPTIONS: readonly HarnessConnectionOption[] = [
+  {
+    methods: ["subscription"],
+    runtime: previewRuntime({
+      available: true,
+      id: "claude",
+      installInstructionsUrl: "https://code.claude.com/docs/en/getting-started",
+      label: "Claude Code",
+      source: "builtin",
+    }),
+  },
+  {
+    methods: ["subscription"],
+    runtime: previewRuntime({
+      id: "codex",
+      installInstructionsUrl: "https://developers.openai.com/codex/cli/",
+      label: "Codex",
+      source: "builtin",
+    }),
+  },
+  {
+    methods: ["api"],
+    runtime: previewRuntime({
+      available: true,
+      id: "goose",
+      installInstructionsUrl:
+        "https://goose-docs.ai/docs/getting-started/installation/",
+      label: "Goose",
+      source: "builtin",
+    }),
+  },
+  {
+    methods: ["api"],
+    runtime: previewRuntime({
+      available: true,
+      id: "buzz-agent",
+      label: "Buzz Agent",
+      source: "builtin",
+    }),
+  },
+  {
+    methods: ["subscription"],
+    runtime: previewRuntime({
+      id: "cursor",
+      installInstructionsUrl: "https://cursor.com/downloads",
+      label: "Cursor",
+    }),
+  },
+  {
+    methods: ["subscription"],
+    runtime: previewRuntime({
+      id: "devin",
+      installInstructionsUrl: "https://docs.devin.ai/cli",
+      label: "Devin",
+    }),
+  },
+  {
+    methods: ["api"],
+    runtime: previewRuntime({
+      id: "omp",
+      installInstructionsUrl: "https://omp.sh/",
+      label: "Oh My Pi",
+    }),
+  },
+  {
+    methods: ["api"],
+    runtime: previewRuntime({
+      id: "grok",
+      installInstructionsUrl: "https://build.x.ai/docs",
+      label: "Grok Build",
+    }),
+  },
+  {
+    methods: ["api"],
+    runtime: previewRuntime({
+      id: "opencode",
+      installInstructionsUrl: "https://opencode.ai/docs",
+      label: "OpenCode",
+    }),
+  },
+  {
+    methods: ["api"],
+    runtime: previewRuntime({
+      id: "kimi",
+      installInstructionsUrl: "https://kimi.ai/download",
+      label: "Kimi Code",
+    }),
+  },
+  {
+    methods: ["subscription"],
+    runtime: previewRuntime({
+      id: "amp",
+      installInstructionsUrl: "https://github.com/tao12345666333/amp-acp",
+      label: "Amp",
+    }),
+  },
+  {
+    methods: ["api"],
+    runtime: previewRuntime({
+      id: "hermes",
+      installInstructionsUrl: "https://hermes-agent.nousresearch.com",
+      label: "Hermes Agent",
+    }),
+  },
+  {
+    methods: ["api"],
+    runtime: previewRuntime({
+      id: "openclaw",
+      installInstructionsUrl: "https://docs.openclaw.ai/start/getting-started",
+      label: "OpenClaw",
+    }),
+  },
+];
diff --git a/desktop/src/features/onboarding/ui/onboardingPreviewCardStyles.ts b/desktop/src/features/onboarding/ui/onboardingPreviewCardStyles.ts
new file mode 100644
index 00000000000..c23dd3fd939
--- /dev/null
+++ b/desktop/src/features/onboarding/ui/onboardingPreviewCardStyles.ts
@@ -0,0 +1,7 @@
+export const ONBOARDING_PREVIEW_CARD_INPUT_CLASS =
+  "h-12 rounded-xl border-[#e2e2e2] bg-[#f9f9f9] px-4 text-[oklch(0.22213_0_0)] shadow-none transition-[border-color,box-shadow] duration-200 ease-out placeholder:text-[oklch(0.6901_0_0)] placeholder:opacity-60 hover:border-[#d6d6d6] focus-visible:border-[#e2e2e2] focus-visible:ring-0 focus-visible:shadow-[0_0_0_3px_white,0_0_0_6px_rgba(0,0,0,0.06)] motion-reduce:transition-none";
+
+/** Quiet V3 actions use the same translucent neutral treatment as Back. */
+export const ONBOARDING_PREVIEW_NEUTRAL_SURFACE_CLASS = "bg-[#e2e2e2]/30";
+
+export const ONBOARDING_PREVIEW_SECONDARY_CTA_CLASS = `${ONBOARDING_PREVIEW_NEUTRAL_SURFACE_CLASS} text-foreground hover:bg-[#e2e2e2]/50 hover:text-foreground`;
diff --git a/desktop/src/features/profile/lib/animatedAvatarCapture.ts b/desktop/src/features/profile/lib/animatedAvatarCapture.ts
index e812a0e65b2..f7f7e6d8cb7 100644
--- a/desktop/src/features/profile/lib/animatedAvatarCapture.ts
+++ b/desktop/src/features/profile/lib/animatedAvatarCapture.ts
@@ -228,12 +228,13 @@ export function preloadAvatarSegmenter(): void {
 export async function recordAnimatedAvatarFrames(
   video: HTMLVideoElement,
   options: {
+    removeBackground?: boolean;
     signal?: AbortSignal;
     onProgress?: (fraction: number) => void;
   } = {},
 ): Promise<AnimatedAvatarRecording> {
-  const { onProgress, signal } = options;
-  const handle = await loadSegmenter();
+  const { onProgress, removeBackground = true, signal } = options;
+  const handle = removeBackground ? await loadSegmenter() : null;
 
   const canvas = document.createElement("canvas");
   canvas.width = ANIMATED_AVATAR_CAPTURE_SIZE;
diff --git a/desktop/src/features/profile/ui/AnimatedAvatarCameraControls.tsx b/desktop/src/features/profile/ui/AnimatedAvatarCameraControls.tsx
index 4b91385cc8a..0c6bd7e60e4 100644
--- a/desktop/src/features/profile/ui/AnimatedAvatarCameraControls.tsx
+++ b/desktop/src/features/profile/ui/AnimatedAvatarCameraControls.tsx
@@ -11,9 +11,11 @@ import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
 
 type AnimatedAvatarCameraControlsProps = {
+  actionButtonClassName?: string;
   activeCameraSource: CameraSource | null;
   compact: boolean;
   computerDisabled: boolean;
+  dense?: boolean;
   disabled: boolean;
   helpText: string | null;
   iphoneDisabled: boolean;
@@ -27,9 +29,11 @@ type AnimatedAvatarCameraControlsProps = {
 };
 
 export function AnimatedAvatarCameraControls({
+  actionButtonClassName,
   activeCameraSource,
   compact,
   computerDisabled,
+  dense = false,
   disabled,
   helpText,
   iphoneDisabled,
@@ -42,11 +46,12 @@ export function AnimatedAvatarCameraControls({
   testIdPrefix,
 }: AnimatedAvatarCameraControlsProps) {
   return (
-    <div className="grid gap-4">
+    <div className={cn("grid gap-4", dense && "gap-2")}>
       {showCameraPicker ? (
         <AnimatedAvatarCameraPicker
           activeCameraSource={activeCameraSource}
           computerDisabled={computerDisabled}
+          dense={dense}
           disabled={disabled || isStarting}
           iphoneDisabled={iphoneDisabled}
           onSelectSource={onSelectSource}
@@ -58,45 +63,61 @@ export function AnimatedAvatarCameraControls({
           {helpText}
         </p>
       ) : null}
-      <div className={cn("h-14 pt-2", compact && "flex justify-center")}>
-        {onRetry ? (
-          <Button
-            className={cn(
-              "h-12 w-full rounded-xl",
-              compact &&
-                "bg-[rgb(var(--buzz-onboarding-avatar-accent-bg))] text-[rgb(var(--buzz-onboarding-avatar-accent-fg))] hover:bg-[rgb(var(--buzz-onboarding-avatar-accent-bg))]",
-            )}
-            data-testid={`${testIdPrefix}-animated-retry`}
-            disabled={disabled}
-            onClick={onRetry}
-            type="button"
-          >
-            Try camera again
-          </Button>
-        ) : isLive ? (
-          <Button
-            asChild
-            className={cn(
-              compact
-                ? "h-[2.375rem] rounded-full bg-[rgb(var(--buzz-onboarding-avatar-action-bg))] px-6 text-sm font-medium text-[rgb(var(--buzz-onboarding-avatar-action-fg))] hover:bg-[color:rgb(var(--buzz-onboarding-avatar-action-bg)_/_0.9)]"
-                : "h-12 w-full rounded-xl",
-            )}
-            data-testid={`${testIdPrefix}-animated-record`}
-            disabled={disabled}
-            onClick={onRecord}
-            type="button"
-          >
-            <motion.button
-              animate={{ opacity: 1 }}
-              initial={{ opacity: 0 }}
-              transition={ENTRANCE_TRANSITION}
+      {onRetry || isLive ? (
+        <div
+          className={cn(
+            "h-14 pt-2",
+            compact && "flex justify-center",
+            dense && "h-10 pt-1",
+            actionButtonClassName && "h-10 pt-0",
+          )}
+        >
+          {onRetry ? (
+            <Button
+              className={
+                actionButtonClassName ??
+                cn(
+                  "h-12 w-full rounded-xl",
+                  dense && "h-9",
+                  compact &&
+                    "bg-[rgb(var(--buzz-onboarding-avatar-accent-bg))] text-[rgb(var(--buzz-onboarding-avatar-accent-fg))] hover:bg-[rgb(var(--buzz-onboarding-avatar-accent-bg))]",
+                )
+              }
+              data-testid={`${testIdPrefix}-animated-retry`}
+              disabled={disabled}
+              onClick={onRetry}
+              type="button"
             >
-              <Video aria-hidden="true" className="mr-2 h-4 w-4" />
-              Capture {RECORD_SECONDS} sec video
-            </motion.button>
-          </Button>
-        ) : null}
-      </div>
+              Try camera again
+            </Button>
+          ) : isLive ? (
+            <Button
+              className={
+                actionButtonClassName ??
+                (compact
+                  ? "h-[2.375rem] rounded-full bg-[rgb(var(--buzz-onboarding-avatar-action-bg))] px-6 text-sm font-medium text-[rgb(var(--buzz-onboarding-avatar-action-fg))] hover:bg-[color:rgb(var(--buzz-onboarding-avatar-action-bg)_/_0.9)]"
+                  : "h-12 w-full rounded-xl")
+              }
+              data-testid={`${testIdPrefix}-animated-record`}
+              disabled={disabled}
+              onClick={onRecord}
+              type="button"
+            >
+              <motion.span
+                animate={{ opacity: 1 }}
+                className="inline-flex items-center"
+                initial={{ opacity: 0 }}
+                transition={ENTRANCE_TRANSITION}
+              >
+                {actionButtonClassName ? null : (
+                  <Video aria-hidden="true" className="mr-2 h-4 w-4" />
+                )}
+                Capture {RECORD_SECONDS} sec video
+              </motion.span>
+            </Button>
+          ) : null}
+        </div>
+      ) : null}
     </div>
   );
 }
diff --git a/desktop/src/features/profile/ui/AnimatedAvatarCameraPicker.tsx b/desktop/src/features/profile/ui/AnimatedAvatarCameraPicker.tsx
index 08cc858cc5c..5e5d132265b 100644
--- a/desktop/src/features/profile/ui/AnimatedAvatarCameraPicker.tsx
+++ b/desktop/src/features/profile/ui/AnimatedAvatarCameraPicker.tsx
@@ -6,6 +6,7 @@ import { cn } from "@/shared/lib/cn";
 type AnimatedAvatarCameraPickerProps = {
   activeCameraSource: CameraSource | null;
   computerDisabled: boolean;
+  dense?: boolean;
   disabled?: boolean;
   iphoneDisabled: boolean;
   onSelectSource: (source: CameraSource) => void;
@@ -15,6 +16,7 @@ type AnimatedAvatarCameraPickerProps = {
 export function AnimatedAvatarCameraPicker({
   activeCameraSource,
   computerDisabled,
+  dense = false,
   disabled = false,
   iphoneDisabled,
   onSelectSource,
@@ -44,6 +46,7 @@ export function AnimatedAvatarCameraPicker({
             aria-pressed={isSelected}
             className={cn(
               "relative flex h-[120px] flex-col items-center justify-center gap-3 overflow-hidden rounded-xl border border-transparent bg-muted text-foreground transition-[background-color,border-color,color,opacity] duration-[250ms] ease-out hover:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              dense && "h-32 flex-col gap-3 rounded-xl px-4",
               isSelected &&
                 "border-primary bg-primary/10 text-primary ring-1 ring-primary/35 hover:bg-primary/10",
               isDisabled && "cursor-not-allowed opacity-45 hover:bg-muted",
@@ -58,6 +61,7 @@ export function AnimatedAvatarCameraPicker({
               aria-hidden="true"
               className={cn(
                 "h-5 w-5 text-foreground transition-colors duration-[250ms] ease-out",
+                dense && "h-5 w-5 shrink-0",
                 isSelected && "text-primary",
               )}
             />
diff --git a/desktop/src/features/profile/ui/AnimatedAvatarCapture.helpers.ts b/desktop/src/features/profile/ui/AnimatedAvatarCapture.helpers.ts
index b0c061478df..a20edb83494 100644
--- a/desktop/src/features/profile/ui/AnimatedAvatarCapture.helpers.ts
+++ b/desktop/src/features/profile/ui/AnimatedAvatarCapture.helpers.ts
@@ -4,10 +4,15 @@ import {
   type AvatarCameraDevice,
   type AvatarComposition,
   composeAvatarFrame,
+  composeAvatarFrames,
   DEFAULT_PERSON_SCALE,
+  encodeAvatarAnimation,
+  renderAvatarPosterPng,
 } from "@/features/profile/lib/animatedAvatarCapture";
 import { beginAvatarPresentation } from "@/features/profile/avatarPresentationStore";
+import type { AnimatedAvatarRecordingProcessor } from "@/features/profile/ui/AnimatedAvatarCapture.types";
 import { AVATAR_COLORS } from "@/features/profile/ui/ProfileAvatarEditor.utils";
+import { uploadMediaBytes } from "@/shared/api/tauri";
 import { buildAnimatedAvatarUrl } from "@/shared/lib/animatedAvatar";
 
 export type CapturePhase =
@@ -49,6 +54,40 @@ export function presentAnimatedAvatar(
   return avatarUrl;
 }
 
+export async function saveAnimatedAvatar({
+  bitmaps,
+  composition,
+  posterIndex,
+  processRecording,
+}: {
+  bitmaps: ImageBitmap[];
+  composition: AvatarComposition;
+  posterIndex: number;
+  processRecording?: AnimatedAvatarRecordingProcessor;
+}): Promise<string> {
+  const composed = composeAvatarFrames(bitmaps, composition);
+  const posterFrame = composed[posterIndex] ?? composed[0];
+  if (!posterFrame) throw new Error("No frames were recorded.");
+
+  const animationBytes = encodeAvatarAnimation(composed);
+  const posterBytes = await renderAvatarPosterPng(posterFrame);
+  if (processRecording) {
+    return processRecording({ animationBytes, posterBytes });
+  }
+
+  const [animationUpload, posterUpload] = await Promise.all([
+    uploadMediaBytes([...animationBytes], "animated-avatar.png"),
+    uploadMediaBytes([...posterBytes], "animated-avatar-poster.png"),
+  ]);
+  if (
+    !animationUpload.type.startsWith("image/") ||
+    !posterUpload.type.startsWith("image/")
+  ) {
+    throw new Error("The relay rejected the recording. Try again.");
+  }
+  return presentAnimatedAvatar(posterUpload, animationUpload, posterBytes);
+}
+
 /** Keep things draggable but never fully lost off-frame. */
 const MAX_OFFSET = 192;
 
diff --git a/desktop/src/features/profile/ui/AnimatedAvatarCapture.tsx b/desktop/src/features/profile/ui/AnimatedAvatarCapture.tsx
index ca0c2d1ef3c..eb80bd97324 100644
--- a/desktop/src/features/profile/ui/AnimatedAvatarCapture.tsx
+++ b/desktop/src/features/profile/ui/AnimatedAvatarCapture.tsx
@@ -10,7 +10,6 @@ import {
   type AvatarComposition,
   buildPingPongAvatarFrames,
   composeAvatarFrame,
-  composeAvatarFrames,
   createAvatarFrameBitmaps,
   DEFAULT_PERSON_OFFSET_X,
   DEFAULT_PERSON_OFFSET_Y,
@@ -19,7 +18,6 @@ import {
   DEFAULT_SHAPE_OFFSET_X,
   DEFAULT_SHAPE_OFFSET_Y,
   DEFAULT_SHAPE_SCALE,
-  encodeAvatarAnimation,
   MAX_PERSON_SCALE,
   MAX_SHAPE_SCALE,
   MIN_PERSON_SCALE,
@@ -28,7 +26,6 @@ import {
   openAvatarCamera,
   preloadAvatarSegmenter,
   recordAnimatedAvatarFrames,
-  renderAvatarPosterPng,
   stopAvatarCamera,
 } from "@/features/profile/lib/animatedAvatarCapture";
 import { AnimatedAvatarBackdropPanel } from "@/features/profile/ui/AnimatedAvatarBackdropPanel";
@@ -49,8 +46,8 @@ import {
   defaultPersonScaleForSource,
   PERSON_SIZE_TIP,
   preferredCameraDevice,
-  presentAnimatedAvatar,
   randomBackdropColor,
+  saveAnimatedAvatar,
 } from "@/features/profile/ui/AnimatedAvatarCapture.helpers";
 import {
   AnimatedAvatarReviewNav,
@@ -63,12 +60,13 @@ import {
   hsvToHex,
   normalizeHue,
 } from "@/features/profile/ui/ProfileAvatarEditor.utils";
-import { uploadMediaBytes } from "@/shared/api/tauri";
 import { cn } from "@/shared/lib/cn";
 import { Button } from "@/shared/ui/button";
 import { Spinner } from "@/shared/ui/spinner";
 
 export function AnimatedAvatarCapture({
+  actionButtonClassName,
+  dense = false,
   disabled = false,
   testIdPrefix,
   onApply,
@@ -81,6 +79,7 @@ export function AnimatedAvatarCapture({
   showApplyButton = true,
   autoStartCamera = false,
   compactReview = false,
+  processRecording,
 }: AnimatedAvatarCaptureProps) {
   const [phase, setPhase] = React.useState<CapturePhase>("idle");
   const [errorMessage, setErrorMessage] = React.useState<string | null>(null);
@@ -120,9 +119,7 @@ export function AnimatedAvatarCapture({
   const [isPreviewPlaying, setIsPreviewPlaying] = React.useState(false);
   const [isDraggingPerson, setIsDraggingPerson] = React.useState(false);
   const [isSaving, setIsSaving] = React.useState(false);
-
-  // Drag, arrow keys, and the size slider adjust whichever framing section
-  // is open; the color/poster sections leave the person active.
+  // Framing controls adjust the active target; color/poster leave person active.
   const editTarget = activeSection === "shape" ? "shape" : "person";
   const activeOffset = editTarget === "shape" ? shapeOffset : personOffset;
   const setActiveOffset =
@@ -160,7 +157,6 @@ export function AnimatedAvatarCapture({
     setShapeScale(DEFAULT_SHAPE_SCALE);
   }, [initialShapeOffsetY]);
 
-  // Custom backdrop color picker (shared HSV panel).
   const [isCustomPickerOpen, setIsCustomPickerOpen] = React.useState(false);
   const [customHue, setCustomHue] = React.useState(210);
   const [customSaturation, setCustomSaturation] = React.useState(80);
@@ -329,7 +325,7 @@ export function AnimatedAvatarCapture({
       setPhase("starting");
       releaseCamera();
       // Warm the segmentation model while the user lines up their shot.
-      preloadAvatarSegmenter();
+      if (!processRecording) preloadAvatarSegmenter();
       try {
         let stream = await openAvatarCamera(cameraId || null);
         let resolvedCameraId = cameraId ?? null;
@@ -386,6 +382,7 @@ export function AnimatedAvatarCapture({
     [
       refreshCameraDevices,
       releaseCamera,
+      processRecording,
       selectedCameraId,
       selectedCameraSource,
     ],
@@ -444,6 +441,7 @@ export function AnimatedAvatarCapture({
 
     try {
       const captured = await recordAnimatedAvatarFrames(video, {
+        removeBackground: !processRecording,
         onProgress: setRecordProgress,
         signal: abort.signal,
       });
@@ -474,7 +472,13 @@ export function AnimatedAvatarCapture({
     } finally {
       recordAbortRef.current = null;
     }
-  }, [phase, releaseBitmaps, releaseCamera, selectedCameraSource]);
+  }, [
+    phase,
+    processRecording,
+    releaseBitmaps,
+    releaseCamera,
+    selectedCameraSource,
+  ]);
 
   const retake = React.useCallback(() => {
     setRecording(null);
@@ -501,26 +505,13 @@ export function AnimatedAvatarCapture({
     setIsSaving(true);
     setErrorMessage(null);
     try {
-      const composed = composeAvatarFrames(bitmaps, composition);
-      const posterFrame = composed[posterIndex] ?? composed[0];
-      if (!posterFrame) {
-        throw new Error("No frames were recorded.");
-      }
-      const animationBytes = encodeAvatarAnimation(composed);
-      const posterBytes = await renderAvatarPosterPng(posterFrame);
-      const [animationUpload, posterUpload] = await Promise.all([
-        uploadMediaBytes([...animationBytes], "animated-avatar.png"),
-        uploadMediaBytes([...posterBytes], "animated-avatar-poster.png"),
-      ]);
-      if (
-        !animationUpload.type.startsWith("image/") ||
-        !posterUpload.type.startsWith("image/")
-      ) {
-        setErrorMessage("The relay rejected the recording. Try again.");
-        return false;
-      }
       onApply(
-        presentAnimatedAvatar(posterUpload, animationUpload, posterBytes),
+        await saveAnimatedAvatar({
+          bitmaps,
+          composition,
+          posterIndex,
+          processRecording,
+        }),
       );
       return true;
     } catch (error) {
@@ -533,7 +524,7 @@ export function AnimatedAvatarCapture({
     } finally {
       setIsSaving(false);
     }
-  }, [bitmaps, composition, isSaving, onApply, posterIndex]);
+  }, [bitmaps, composition, isSaving, onApply, posterIndex, processRecording]);
 
   // Hand the host's Done button the current apply function whenever a
   // recording is ready to upload.
@@ -775,7 +766,7 @@ export function AnimatedAvatarCapture({
 
       {phase === "idle" ? (
         <div className="grid h-full w-full place-items-center rounded-full border-2 border-dashed border-border bg-background text-primary shadow-xs">
-          <Camera className="h-10 w-10" />
+          <Camera className="size-9" />
         </div>
       ) : phase === "starting" ? (
         <div className="absolute inset-0 grid place-items-center rounded-full bg-background/70 text-center shadow-inner">
@@ -802,7 +793,9 @@ export function AnimatedAvatarCapture({
           ? compactReview
             ? "gap-4 pb-2 pt-0"
             : "gap-7 pb-9 pt-2"
-          : "gap-4 pb-5",
+          : dense
+            ? "gap-2 pb-0"
+            : "gap-4 pb-5",
         phase === "review" && !showApplyButton && !compactReview && "mb-5",
         isCustomPickerVisible && "min-h-[504px]",
       )}
@@ -817,7 +810,12 @@ export function AnimatedAvatarCapture({
       ) : null}
 
       {showCaptureCard ? (
-        <div className="relative grid place-items-center rounded-xl bg-muted px-4 py-6">
+        <div
+          className={cn(
+            "relative grid place-items-center rounded-xl bg-muted px-4 py-6",
+            dense && "rounded-lg px-2 py-2",
+          )}
+        >
           {usePortal ? null : stageContent}
 
           {inlineCaptureHelpText ? (
@@ -921,9 +919,11 @@ export function AnimatedAvatarCapture({
 
       {showCameraControls ? (
         <AnimatedAvatarCameraControls
+          actionButtonClassName={actionButtonClassName}
           activeCameraSource={activeCameraSource}
           compact={compactReview}
           computerDisabled={cameraDevices.length > 0 && !computerCamera}
+          dense={dense}
           disabled={disabled}
           helpText={usePortal ? inlineCaptureHelpText : null}
           iphoneDisabled={
@@ -949,7 +949,7 @@ export function AnimatedAvatarCapture({
 
       {phase === "review" && showApplyButton ? (
         <Button
-          className="h-12 w-full rounded-xl"
+          className={actionButtonClassName ?? "h-12 w-full rounded-xl"}
           data-testid={`${testIdPrefix}-animated-apply`}
           disabled={disabled || isSaving}
           onClick={() => void apply()}
diff --git a/desktop/src/features/profile/ui/AnimatedAvatarCapture.types.ts b/desktop/src/features/profile/ui/AnimatedAvatarCapture.types.ts
index d443e98da74..fb7154760e7 100644
--- a/desktop/src/features/profile/ui/AnimatedAvatarCapture.types.ts
+++ b/desktop/src/features/profile/ui/AnimatedAvatarCapture.types.ts
@@ -1,4 +1,11 @@
+export type AnimatedAvatarRecordingProcessor = (input: {
+  animationBytes: Uint8Array;
+  posterBytes: Uint8Array;
+}) => Promise<string>;
+
 export type AnimatedAvatarCaptureProps = {
+  actionButtonClassName?: string;
+  dense?: boolean;
   disabled?: boolean;
   testIdPrefix: string;
   onApply: (avatarUrl: string) => void;
@@ -11,4 +18,5 @@ export type AnimatedAvatarCaptureProps = {
   showApplyButton?: boolean;
   autoStartCamera?: boolean;
   compactReview?: boolean;
+  processRecording?: AnimatedAvatarRecordingProcessor;
 };
diff --git a/desktop/src/features/profile/ui/ProfileAvatarEditor.tsx b/desktop/src/features/profile/ui/ProfileAvatarEditor.tsx
index 450292ebc4d..e52de27ba76 100644
--- a/desktop/src/features/profile/ui/ProfileAvatarEditor.tsx
+++ b/desktop/src/features/profile/ui/ProfileAvatarEditor.tsx
@@ -1,12 +1,12 @@
 import emojiData from "@emoji-mart/data";
 import Picker from "@emoji-mart/react";
-import { Link2, UploadCloud } from "lucide-react";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import * as React from "react";
 import { flushSync } from "react-dom";
 
 import { AnimatedAvatarCapture } from "@/features/profile/ui/AnimatedAvatarCapture";
 import { AvatarCustomColorPanel } from "@/features/profile/ui/AvatarCustomColorPanel";
+import { ProfileAvatarImagePanel } from "@/features/profile/ui/ProfileAvatarImagePanel";
 import { ProfileAvatarModeTabs } from "@/features/profile/ui/ProfileAvatarModeTabs";
 import { useAvatarSelection } from "@/features/profile/avatarPresentationStore";
 import { useAvatarUpload } from "@/features/profile/useAvatarUpload";
@@ -77,11 +77,14 @@ export function ProfileAvatarEditor({
   onAnimatedAvatarApply,
   onDone,
   onUploadingChange,
+  processAnimatedAvatar,
+  processImage,
   showEmojiColorControlsWhenEmpty = false,
   disabled,
   testIdPrefix = "profile-avatar",
   animatedPreviewContainer = null,
   modeTabsContainer,
+  modeTabsOrientation = "horizontal",
   onAnimatedPreviewActiveChange,
   onAnimatedPreviewCaptionChange,
   presentation = "default",
@@ -137,7 +140,18 @@ export function ProfileAvatarEditor({
               "--buzz-emoji-picker-padding": "10px",
               "--buzz-emoji-picker-scroll-padding-top": "18px",
             }
-          : null),
+          : presentation === "onboarding-inline"
+            ? {
+                "--buzz-emoji-picker-category-icon-size": "14px",
+                "--buzz-emoji-picker-fade-height": "0px",
+                "--buzz-emoji-picker-fade-opacity": "0",
+                "--buzz-emoji-picker-nav-button-size": "24px",
+                "--buzz-emoji-picker-nav-padding-x": "8px",
+                "--buzz-emoji-picker-padding": "6px",
+                "--buzz-emoji-picker-scroll-padding-top": "6px",
+                "--buzz-emoji-picker-search-control-height": "32px",
+              }
+            : null),
       }) as React.CSSProperties,
     [documentEmojiMartThemeVars, emojiPickerThemeVars, presentation],
   );
@@ -146,6 +160,8 @@ export function ProfileAvatarEditor({
     [customHue, customSaturation, customValue],
   );
   const isOnboardingModal = presentation === "onboarding-modal";
+  const isOnboardingInline = presentation === "onboarding-inline";
+  const isOnboardingSurface = isOnboardingInline || isOnboardingModal;
   const shouldShowColorControls =
     mode === "emoji" &&
     (selectedEmoji !== null || showEmojiColorControlsWhenEmpty);
@@ -189,7 +205,7 @@ export function ProfileAvatarEditor({
     isUploading,
     openPicker,
     uploadFile,
-  } = useAvatarUpload(uploadPreviewLifecycle);
+  } = useAvatarUpload({ ...uploadPreviewLifecycle, processImage });
   const isInputDisabled = disabled || isUploading || isAnimatedApplyPending;
   const handleAnimatedApply = React.useCallback(
     (animatedUrl: string) => {
@@ -254,7 +270,11 @@ export function ProfileAvatarEditor({
     onDone?.();
   }, [isAnimatedDoneQueued, onDone]);
 
-  useEmojiMartStyles(emojiPickerContainerRef, mode === "emoji");
+  useEmojiMartStyles(
+    emojiPickerContainerRef,
+    mode === "emoji",
+    isOnboardingInline,
+  );
 
   React.useEffect(() => {
     if (mode !== "emoji") return;
@@ -495,6 +515,7 @@ export function ProfileAvatarEditor({
       disabled={isInputDisabled}
       mode={mode}
       onModeChange={updateMode}
+      orientation={modeTabsOrientation}
       portalContainer={modeTabsContainer}
       presentation={presentation}
     />
@@ -504,8 +525,11 @@ export function ProfileAvatarEditor({
     <fieldset
       className={cn(
         "mx-auto w-full border-0 p-0 text-sm",
-        isOnboardingModal
-          ? "max-w-[456px] md:ml-0 md:mr-auto"
+        isOnboardingSurface
+          ? cn(
+              "md:ml-0 md:mr-auto",
+              isOnboardingInline ? "max-w-none" : "max-w-[456px]",
+            )
           : "max-w-[576px]",
       )}
       data-testid={`${testIdPrefix}-editor`}
@@ -572,7 +596,9 @@ export function ProfileAvatarEditor({
         <div
           className={cn(
             "relative w-full",
-            isOnboardingModal ? "flex min-h-[inherit] flex-col" : "grid gap-4",
+            isOnboardingSurface
+              ? "flex min-h-[inherit] flex-col"
+              : "grid gap-4",
           )}
         >
           {modeTabsContent}
@@ -580,157 +606,63 @@ export function ProfileAvatarEditor({
           <div
             className={cn(
               "transition-[height] duration-[250ms] ease-out",
-              isOnboardingModal
+              isOnboardingSurface
                 ? cn(
-                    "flex min-h-0 flex-1 items-center overflow-visible",
-                    shouldShowColorControls && "py-6",
+                    "flex min-h-0 items-center overflow-visible",
+                    isOnboardingInline ? "mt-3 h-52" : "flex-1",
+                    shouldShowColorControls &&
+                      (isOnboardingInline ? "py-2" : "py-6"),
                   )
                 : "overflow-hidden",
             )}
             data-testid={`${testIdPrefix}-mode-content-shell`}
             style={
-              isOnboardingModal || modeContentHeight === null
+              isOnboardingSurface || modeContentHeight === null
                 ? undefined
                 : { height: modeContentHeight }
             }
           >
             <div
-              className={cn("overflow-visible", isOnboardingModal && "w-full")}
+              className={cn(
+                "overflow-visible",
+                isOnboardingSurface && "w-full",
+                isOnboardingInline && "h-full",
+                isOnboardingInline &&
+                  mode === "animated" &&
+                  "flex items-center [&>*]:w-full",
+              )}
               ref={modeContentRef}
             >
               {mode === "image" ? (
-                <div className="grid content-start gap-3">
-                  <button
-                    className={cn(
-                      isOnboardingModal
-                        ? "relative flex h-32 flex-col items-center justify-center overflow-hidden rounded-lg border border-dashed border-[color:rgb(var(--buzz-onboarding-avatar-control-fg)_/_0.7)] bg-transparent text-[rgb(var(--buzz-onboarding-avatar-control-fg))] transition-[background-color,border-color,box-shadow,color] duration-[250ms] ease-out hover:bg-[color:rgb(var(--buzz-onboarding-avatar-accent-bg)_/_0.18)] disabled:opacity-60"
-                        : "relative flex h-[120px] flex-col items-center justify-center gap-3 overflow-hidden rounded-xl border border-transparent bg-muted text-foreground transition-[background-color,border-color,box-shadow,color] duration-[250ms] ease-out hover:bg-muted/80 disabled:opacity-60",
-                      isImageDropActive &&
-                        (isOnboardingModal
-                          ? "border-[rgb(var(--buzz-onboarding-avatar-control-fg))] bg-[color:rgb(var(--buzz-onboarding-avatar-accent-bg)_/_0.24)]"
-                          : "border-primary bg-primary/10 text-primary ring-1 ring-primary/35 hover:bg-primary/10"),
-                    )}
-                    data-dragging={isImageDropActive ? "true" : undefined}
-                    data-testid={`${testIdPrefix}-upload`}
-                    disabled={isInputDisabled}
-                    onClick={openPicker}
-                    type="button"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className={cn(
-                        "pointer-events-none absolute inset-0 rounded-[inherit] bg-primary/10 opacity-0 transition-opacity duration-[250ms] ease-out",
-                        isImageDropActive && "opacity-100",
-                      )}
-                      data-testid={`${testIdPrefix}-drop-mask`}
-                    />
-                    {isOnboardingModal ? null : isUploading ? (
-                      <Spinner
-                        aria-hidden
-                        className="relative h-8 w-8 border-2 text-muted-foreground"
-                      />
-                    ) : (
-                      <UploadCloud
-                        className={cn(
-                          "relative h-8 w-8 text-muted-foreground transition-colors duration-[250ms] ease-out",
-                          isImageDropActive && "text-primary",
-                        )}
-                      />
-                    )}
-                    <span
-                      className={cn(
-                        "relative transition-colors duration-[250ms] ease-out",
-                        isOnboardingModal
-                          ? "text-sm font-normal text-[rgb(var(--buzz-onboarding-avatar-control-fg))]"
-                          : "text-sm font-medium text-muted-foreground",
-                        isImageDropActive &&
-                          (isOnboardingModal
-                            ? "text-[rgb(var(--buzz-onboarding-avatar-control-fg))]"
-                            : "text-primary"),
-                      )}
-                    >
-                      {isUploading ? (
-                        "Uploading..."
-                      ) : isImageDropActive ? (
-                        "Drop image here"
-                      ) : isOnboardingModal ? (
-                        "Drag or browse"
-                      ) : (
-                        <>
-                          Drop or{" "}
-                          <span className="underline underline-offset-2">
-                            browse
-                          </span>
-                        </>
-                      )}
-                    </span>
-                  </button>
-
-                  <div
-                    className={cn(
-                      "flex items-center transition-colors duration-[250ms] ease-out",
-                      isOnboardingModal
-                        ? "h-[52px] rounded-lg border border-[color:rgb(var(--buzz-onboarding-avatar-control-fg)_/_0.45)] bg-transparent px-5 focus-within:border-[rgb(var(--buzz-onboarding-avatar-control-fg))]"
-                        : "h-16 gap-3 rounded-xl bg-muted px-5 focus-within:bg-muted/80",
-                    )}
-                  >
-                    {isOnboardingModal ? null : (
-                      <Link2 className="h-4 w-4 text-muted-foreground" />
-                    )}
-                    <input
-                      autoCapitalize="none"
-                      autoCorrect="off"
-                      className={cn(
-                        "min-w-0 flex-1 bg-transparent outline-none",
-                        isOnboardingModal
-                          ? "text-center text-sm font-normal text-foreground placeholder:text-[color:rgb(var(--buzz-onboarding-avatar-control-fg)_/_0.55)]"
-                          : "text-sm font-medium text-foreground placeholder:text-muted-foreground",
-                      )}
-                      data-testid={`${testIdPrefix}-url`}
-                      disabled={isInputDisabled}
-                      onBlur={() => {
-                        isUrlInputFocusedRef.current = false;
-                        applyUrl();
-                      }}
-                      onChange={(event) => {
-                        clearUploadError();
-                        hasUserEditedUrlDraftRef.current = true;
-                        setUrlDraft(event.target.value);
-                        onUploadedAvatarChange?.(null);
-                        setAvatar(event.target.value);
-                      }}
-                      onFocus={() => {
-                        isUrlInputFocusedRef.current = true;
-                      }}
-                      onKeyDown={(event) => {
-                        if (event.key === "Enter") {
-                          event.preventDefault();
-                          applyUrl();
-                        }
-                      }}
-                      placeholder={
-                        isOnboardingModal
-                          ? "Paste a URL"
-                          : "Paste a URL (Slack profile, etc.)"
-                      }
-                      spellCheck={false}
-                      type="url"
-                      value={urlDraft}
-                    />
-                  </div>
-
-                  {uploadErrorMessage ? (
-                    <p
-                      className="rounded-xl border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm font-medium text-destructive"
-                      data-testid={`${testIdPrefix}-upload-error`}
-                      role="alert"
-                    >
-                      {uploadErrorMessage}
-                    </p>
-                  ) : null}
-                </div>
+                <ProfileAvatarImagePanel
+                  disabled={isInputDisabled}
+                  isDropActive={isImageDropActive}
+                  isOnboardingInline={isOnboardingInline}
+                  isOnboardingSurface={isOnboardingSurface}
+                  isUploading={isUploading}
+                  onBrowse={openPicker}
+                  onUrlBlur={() => {
+                    isUrlInputFocusedRef.current = false;
+                    applyUrl();
+                  }}
+                  onUrlChange={(value) => {
+                    clearUploadError();
+                    hasUserEditedUrlDraftRef.current = true;
+                    setUrlDraft(value);
+                    onUploadedAvatarChange?.(null);
+                    setAvatar(value);
+                  }}
+                  onUrlFocus={() => {
+                    isUrlInputFocusedRef.current = true;
+                  }}
+                  onUrlSubmit={applyUrl}
+                  testIdPrefix={testIdPrefix}
+                  uploadErrorMessage={uploadErrorMessage}
+                  urlDraft={urlDraft}
+                />
               ) : mode === "animated" ? (
                 <AnimatedAvatarCapture
+                  dense={isOnboardingInline}
                   disabled={isInputDisabled}
                   onCustomColorPickerOpenChange={
                     setIsAnimatedCustomColorPickerOpen
@@ -740,17 +672,34 @@ export function ProfileAvatarEditor({
                   onPreviewActiveChange={onAnimatedPreviewActiveChange}
                   onPreviewCaptionChange={onAnimatedPreviewCaptionChange}
                   previewContainer={animatedPreviewContainer}
+                  processRecording={processAnimatedAvatar}
                   registerApply={registerAnimatedApply}
-                  compactReview={isOnboardingModal}
+                  compactReview={isOnboardingSurface}
                   showApplyButton={!onDone}
                   testIdPrefix={testIdPrefix}
                 />
               ) : (
-                <div className="relative grid content-start gap-3">
+                <div
+                  className={cn(
+                    "relative grid content-start",
+                    isOnboardingInline &&
+                      cn(
+                        "h-full gap-2",
+                        shouldShowColorControls
+                          ? "grid-rows-[6.25rem_auto]"
+                          : "grid-rows-[minmax(0,1fr)_auto]",
+                      ),
+                    !isOnboardingInline && "gap-3",
+                  )}
+                >
                   <div
                     className={cn(
                       "buzz-emoji-mart relative z-0 overflow-hidden rounded-xl bg-muted transition-colors duration-[250ms] ease-out",
-                      isOnboardingModal ? "h-[316px]" : "h-[384px]",
+                      isOnboardingInline
+                        ? "h-full min-h-0"
+                        : isOnboardingModal
+                          ? "h-[316px]"
+                          : "h-[384px]",
                     )}
                     data-testid={`${testIdPrefix}-emoji-picker`}
                     ref={emojiPickerContainerRef}
@@ -761,10 +710,14 @@ export function ProfileAvatarEditor({
                       data={emojiData}
                       dynamicWidth
                       emojiButtonRadius="999px"
-                      emojiButtonSize={isOnboardingModal ? 44 : 64}
-                      emojiSize={isOnboardingModal ? 28 : 48}
+                      emojiButtonSize={
+                        isOnboardingInline ? 48 : isOnboardingModal ? 44 : 64
+                      }
+                      emojiSize={
+                        isOnboardingInline ? 32 : isOnboardingModal ? 28 : 48
+                      }
                       icons="outline"
-                      navPosition="bottom"
+                      navPosition={isOnboardingInline ? "none" : "bottom"}
                       onEmojiSelect={(
                         emoji: { native?: string },
                         event?: MouseEvent,
@@ -779,7 +732,7 @@ export function ProfileAvatarEditor({
                           selectedEmoji === null
                             ? randomInitialEmojiAvatarColor()
                             : selectedColor;
-                        if (!isOnboardingModal) {
+                        if (!isOnboardingSurface) {
                           burstEmoji(emoji.native, event);
                         }
                         setSelectedEmoji(emoji.native);
@@ -801,7 +754,10 @@ export function ProfileAvatarEditor({
                         ? "overflow-hidden"
                         : "origin-top overflow-hidden transition-[max-height,margin,opacity,transform] duration-[250ms] ease-out",
                       shouldShowColorControls
-                        ? "mt-3 max-h-64 scale-100 opacity-100"
+                        ? cn(
+                            "max-h-64 scale-100 opacity-100",
+                            isOnboardingInline ? "mt-0" : "mt-3",
+                          )
                         : "mt-0 max-h-0 scale-[0.96] opacity-0",
                     )}
                     data-testid={`${testIdPrefix}-color-grid-shell`}
@@ -810,7 +766,11 @@ export function ProfileAvatarEditor({
                     <div
                       className={cn(
                         "grid grid-cols-8 justify-items-center rounded-xl bg-muted transition-colors duration-[250ms] ease-out",
-                        isOnboardingModal ? "gap-2 p-3" : "gap-3 p-4",
+                        isOnboardingInline
+                          ? "grid-cols-12 gap-1 p-2"
+                          : isOnboardingModal
+                            ? "gap-2 p-3"
+                            : "gap-3 p-4",
                       )}
                       data-testid={`${testIdPrefix}-color-grid`}
                     >
@@ -838,7 +798,11 @@ export function ProfileAvatarEditor({
                             aria-pressed={isSelected}
                             className={cn(
                               "relative scroll-mb-52 rounded-full border border-border transition-transform duration-200 ease-out hover:scale-[1.15] focus-visible:scale-[1.15] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                              isOnboardingModal ? "h-7 w-7" : "h-10 w-10",
+                              isOnboardingInline
+                                ? "h-5 w-5"
+                                : isOnboardingModal
+                                  ? "h-7 w-7"
+                                  : "h-10 w-10",
                               isCustomSwatch &&
                                 !selectedEmoji &&
                                 "cursor-not-allowed opacity-45 hover:scale-100 focus-visible:scale-100",
@@ -864,7 +828,7 @@ export function ProfileAvatarEditor({
                               <span
                                 className={cn(
                                   "absolute rounded-full border-[3px]",
-                                  isOnboardingModal ? "inset-0.5" : "inset-1",
+                                  isOnboardingSurface ? "inset-0.5" : "inset-1",
                                 )}
                                 style={{
                                   borderColor: contrastColorForBackground(
diff --git a/desktop/src/features/profile/ui/ProfileAvatarEditor.types.ts b/desktop/src/features/profile/ui/ProfileAvatarEditor.types.ts
index 5f701b2d415..460753eefc3 100644
--- a/desktop/src/features/profile/ui/ProfileAvatarEditor.types.ts
+++ b/desktop/src/features/profile/ui/ProfileAvatarEditor.types.ts
@@ -1,7 +1,11 @@
 import type * as React from "react";
+import type { AnimatedAvatarRecordingProcessor } from "./AnimatedAvatarCapture.types";
 
 export type AvatarMode = "image" | "emoji" | "animated";
-export type AvatarEditorPresentation = "default" | "onboarding-modal";
+export type AvatarEditorPresentation =
+  | "default"
+  | "onboarding-inline"
+  | "onboarding-modal";
 
 export type ProfileAvatarEditorProps = {
   avatarUrl: string;
@@ -27,7 +31,10 @@ export type ProfileAvatarEditorProps = {
   testIdPrefix?: string;
   animatedPreviewContainer?: HTMLElement | null;
   modeTabsContainer?: HTMLElement | null;
+  modeTabsOrientation?: "horizontal" | "vertical";
   onAnimatedPreviewActiveChange?: (active: boolean) => void;
   onAnimatedPreviewCaptionChange?: (caption: string | null) => void;
   presentation?: AvatarEditorPresentation;
+  processImage?: (file: File) => Promise<string>;
+  processAnimatedAvatar?: AnimatedAvatarRecordingProcessor;
 };
diff --git a/desktop/src/features/profile/ui/ProfileAvatarEditor.utils.ts b/desktop/src/features/profile/ui/ProfileAvatarEditor.utils.ts
index 03b5e38026d..6be847805fb 100644
--- a/desktop/src/features/profile/ui/ProfileAvatarEditor.utils.ts
+++ b/desktop/src/features/profile/ui/ProfileAvatarEditor.utils.ts
@@ -70,9 +70,17 @@ const EMOJI_MART_SHADOW_CSS = `
     width: 100%;
   }
 
+  :host([data-buzz-theme="light"]) #root {
+    color-scheme: light;
+    --em-rgb-background: var(--buzz-emoji-picker-rgb-background, 245, 245, 245);
+    --em-rgb-color: var(--buzz-emoji-picker-rgb-color, 23, 23, 23);
+    --em-rgb-input: var(--buzz-emoji-picker-rgb-input, 255, 255, 255);
+    --em-color-border: rgba(var(--buzz-emoji-picker-rgb-color, 23, 23, 23), 0.08);
+    --em-color-border-over: rgba(var(--buzz-emoji-picker-rgb-color, 23, 23, 23), 0.14);
+  }
+
   #root {
     --padding: var(--buzz-emoji-picker-padding, 16px);
-    --buzz-emoji-picker-search-control-height: 48px;
     --sidebar-width: 0px;
     display: flex;
     flex-direction: column;
@@ -128,6 +136,23 @@ const EMOJI_MART_SHADOW_CSS = `
     display: none;
   }
 
+  :host([data-buzz-category-labels]) .category .sticky {
+    background-color: rgb(var(--em-rgb-background));
+    display: block;
+  }
+
+  :host([data-buzz-category-labels]) #root > .padding-lr:not(.scroll) {
+    background-color: rgb(var(--em-rgb-background));
+    padding-bottom: 8px;
+    padding-top: 8px;
+    position: relative;
+    z-index: 4;
+  }
+
+  :host([data-buzz-category-labels]) .scroll {
+    padding-top: 0;
+  }
+
   /* Match the app's member-search controls: a distinct resting surface and
    * border make both the emoji search and its adjacent skin-tone control easy
    * to find before either receives focus. */
@@ -139,7 +164,7 @@ const EMOJI_MART_SHADOW_CSS = `
 
   .search input[type="search"] {
     border-radius: 12px;
-    height: var(--buzz-emoji-picker-search-control-height);
+    height: var(--buzz-emoji-picker-search-control-height, 48px);
     padding-bottom: 0;
     padding-top: 0;
   }
@@ -151,9 +176,9 @@ const EMOJI_MART_SHADOW_CSS = `
   .search + .flex {
     border-radius: 12px;
     flex: 0 0 auto;
-    height: var(--buzz-emoji-picker-search-control-height) !important;
+    height: var(--buzz-emoji-picker-search-control-height, 48px) !important;
     margin-left: 8px;
-    width: var(--buzz-emoji-picker-search-control-height) !important;
+    width: var(--buzz-emoji-picker-search-control-height, 48px) !important;
   }
 
   .skin-tone-button {
@@ -161,8 +186,30 @@ const EMOJI_MART_SHADOW_CSS = `
     border: 0 !important;
     border-radius: 8px;
     box-shadow: none !important;
-    height: calc(var(--buzz-emoji-picker-search-control-height) - 8px) !important;
-    width: calc(var(--buzz-emoji-picker-search-control-height) - 8px) !important;
+    height: calc(var(--buzz-emoji-picker-search-control-height, 48px) - 8px) !important;
+    width: calc(var(--buzz-emoji-picker-search-control-height, 48px) - 8px) !important;
+  }
+
+  :host([data-buzz-onboarding-inline]) #root > .padding-lr {
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    background-color: rgba(var(--em-rgb-background), 0.82);
+    padding-bottom: 8px;
+    padding-top: 4px;
+    position: relative;
+    z-index: 4;
+  }
+
+  :host([data-buzz-onboarding-inline])
+    #root
+    > .padding-lr
+    > div
+    > .spacer {
+    display: none;
+  }
+
+  :host([data-buzz-onboarding-inline]) #nav {
+    display: none;
   }
 
   .skin-tone-button[aria-selected] {
@@ -588,6 +635,9 @@ function installEmojiMartWheelScroll(shadowRoot: ShadowRoot) {
 export function useEmojiMartStyles(
   containerRef: React.RefObject<HTMLDivElement | null>,
   enabled: boolean,
+  onboardingInline = false,
+  themeOverride: "light" | null = null,
+  showCategoryLabels = false,
 ) {
   React.useEffect(() => {
     if (!enabled) {
@@ -596,6 +646,7 @@ export function useEmojiMartStyles(
 
     let animationFrame = 0;
     let removeWheelScroll: (() => void) | null = null;
+    let styledHost: Element | null = null;
 
     const installEmojiMartStyles = () => {
       const host = containerRef.current?.querySelector("em-emoji-picker");
@@ -606,12 +657,24 @@ export function useEmojiMartStyles(
         return;
       }
 
-      if (!shadowRoot.querySelector("#buzz-emoji-mart-style")) {
-        const style = document.createElement("style");
+      styledHost = host;
+      host.toggleAttribute("data-buzz-onboarding-inline", onboardingInline);
+      host.toggleAttribute("data-buzz-category-labels", showCategoryLabels);
+      if (themeOverride) {
+        host.setAttribute("data-buzz-theme", themeOverride);
+      } else {
+        host.removeAttribute("data-buzz-theme");
+      }
+
+      let style = shadowRoot.querySelector<HTMLStyleElement>(
+        "#buzz-emoji-mart-style",
+      );
+      if (!style) {
+        style = document.createElement("style");
         style.id = "buzz-emoji-mart-style";
-        style.textContent = EMOJI_MART_SHADOW_CSS;
         shadowRoot.appendChild(style);
       }
+      style.textContent = EMOJI_MART_SHADOW_CSS;
 
       removeWheelScroll ??= installEmojiMartWheelScroll(shadowRoot);
     };
@@ -621,8 +684,17 @@ export function useEmojiMartStyles(
     return () => {
       window.cancelAnimationFrame(animationFrame);
       removeWheelScroll?.();
+      styledHost?.removeAttribute("data-buzz-onboarding-inline");
+      styledHost?.removeAttribute("data-buzz-category-labels");
+      styledHost?.removeAttribute("data-buzz-theme");
     };
-  }, [containerRef, enabled]);
+  }, [
+    containerRef,
+    enabled,
+    onboardingInline,
+    showCategoryLabels,
+    themeOverride,
+  ]);
 }
 
 export function useEmojiMartThemeVars() {
diff --git a/desktop/src/features/profile/ui/ProfileAvatarImagePanel.tsx b/desktop/src/features/profile/ui/ProfileAvatarImagePanel.tsx
new file mode 100644
index 00000000000..77952e7f7fa
--- /dev/null
+++ b/desktop/src/features/profile/ui/ProfileAvatarImagePanel.tsx
@@ -0,0 +1,185 @@
+import { Link2, UploadCloud } from "lucide-react";
+
+import { cn } from "@/shared/lib/cn";
+import { Spinner } from "@/shared/ui/spinner";
+
+type ProfileAvatarImagePanelProps = {
+  disabled: boolean;
+  isDropActive: boolean;
+  isOnboardingInline: boolean;
+  isOnboardingSurface: boolean;
+  isUploading: boolean;
+  onBrowse: () => void;
+  onUrlBlur: () => void;
+  onUrlChange: (value: string) => void;
+  onUrlFocus: () => void;
+  onUrlSubmit: () => void;
+  testIdPrefix: string;
+  uploadErrorMessage: string | null;
+  urlDraft: string;
+};
+
+export function ProfileAvatarImagePanel({
+  disabled,
+  isDropActive,
+  isOnboardingInline,
+  isOnboardingSurface,
+  isUploading,
+  onBrowse,
+  onUrlBlur,
+  onUrlChange,
+  onUrlFocus,
+  onUrlSubmit,
+  testIdPrefix,
+  uploadErrorMessage,
+  urlDraft,
+}: ProfileAvatarImagePanelProps) {
+  return (
+    <div
+      className={cn(
+        "grid content-start gap-3",
+        isOnboardingInline && "h-full grid-rows-[minmax(0,1fr)_2.5rem]",
+      )}
+    >
+      <button
+        className={cn(
+          isOnboardingSurface
+            ? cn(
+                "relative flex flex-col items-center justify-center overflow-hidden rounded-lg border border-dashed bg-transparent transition-[background-color,border-color,box-shadow,color] duration-[250ms] ease-out disabled:opacity-60",
+                isOnboardingInline
+                  ? "h-full border-[#d4d4d4] text-foreground hover:bg-[#f5f5f5]"
+                  : "h-32 border-[color:rgb(var(--buzz-onboarding-avatar-control-fg)_/_0.7)] text-[rgb(var(--buzz-onboarding-avatar-control-fg))] hover:bg-[color:rgb(var(--buzz-onboarding-avatar-accent-bg)_/_0.18)]",
+              )
+            : "relative flex h-[120px] flex-col items-center justify-center gap-3 overflow-hidden rounded-xl border border-transparent bg-muted text-foreground transition-[background-color,border-color,box-shadow,color] duration-[250ms] ease-out hover:bg-muted/80 disabled:opacity-60",
+          isDropActive &&
+            (isOnboardingSurface
+              ? isOnboardingInline
+                ? "border-foreground bg-[#f5f5f5]"
+                : "border-[rgb(var(--buzz-onboarding-avatar-control-fg))] bg-[color:rgb(var(--buzz-onboarding-avatar-accent-bg)_/_0.24)]"
+              : "border-primary bg-primary/10 text-primary ring-1 ring-primary/35 hover:bg-primary/10"),
+        )}
+        data-dragging={isDropActive ? "true" : undefined}
+        data-testid={`${testIdPrefix}-upload`}
+        disabled={disabled}
+        onClick={onBrowse}
+        type="button"
+      >
+        <span
+          aria-hidden="true"
+          className={cn(
+            "pointer-events-none absolute inset-0 rounded-[inherit] bg-primary/10 opacity-0 transition-opacity duration-[250ms] ease-out",
+            isDropActive && "opacity-100",
+          )}
+          data-testid={`${testIdPrefix}-drop-mask`}
+        />
+        {isOnboardingSurface ? null : isUploading ? (
+          <Spinner
+            aria-hidden
+            className="relative h-8 w-8 border-2 text-muted-foreground"
+          />
+        ) : (
+          <UploadCloud
+            className={cn(
+              "relative h-8 w-8 text-muted-foreground transition-colors duration-[250ms] ease-out",
+              isDropActive && "text-primary",
+            )}
+          />
+        )}
+        <span
+          className={cn(
+            "relative transition-colors duration-[250ms] ease-out",
+            isOnboardingSurface
+              ? cn(
+                  "text-sm font-normal",
+                  isOnboardingInline
+                    ? "text-foreground"
+                    : "text-[rgb(var(--buzz-onboarding-avatar-control-fg))]",
+                )
+              : "text-sm font-medium text-muted-foreground",
+            isDropActive &&
+              (isOnboardingSurface
+                ? isOnboardingInline
+                  ? "text-foreground"
+                  : "text-[rgb(var(--buzz-onboarding-avatar-control-fg))]"
+                : "text-primary"),
+          )}
+        >
+          {isUploading ? (
+            "Uploading..."
+          ) : isDropActive ? (
+            "Drop image here"
+          ) : isOnboardingSurface ? (
+            "Drag or browse"
+          ) : (
+            <>
+              Drop or{" "}
+              <span className="underline underline-offset-2">browse</span>
+            </>
+          )}
+        </span>
+      </button>
+
+      <div
+        className={cn(
+          "flex items-center transition-colors duration-[250ms] ease-out",
+          isOnboardingSurface
+            ? cn(
+                "rounded-lg border bg-transparent",
+                isOnboardingInline
+                  ? "h-10 border-[#d4d4d4] px-3 focus-within:border-[#0f0f0f]"
+                  : "h-[52px] border-[color:rgb(var(--buzz-onboarding-avatar-control-fg)_/_0.45)] px-5 focus-within:border-[rgb(var(--buzz-onboarding-avatar-control-fg))]",
+              )
+            : "h-16 gap-3 rounded-xl bg-muted px-5 focus-within:bg-muted/80",
+        )}
+      >
+        {isOnboardingSurface ? null : (
+          <Link2 className="h-4 w-4 text-muted-foreground" />
+        )}
+        <input
+          autoCapitalize="none"
+          autoCorrect="off"
+          className={cn(
+            "min-w-0 flex-1 bg-transparent outline-none",
+            isOnboardingSurface
+              ? cn(
+                  "font-normal text-foreground",
+                  isOnboardingInline
+                    ? "text-left text-sm placeholder:text-muted-foreground"
+                    : "text-center text-sm placeholder:text-[color:rgb(var(--buzz-onboarding-avatar-control-fg)_/_0.55)]",
+                )
+              : "text-sm font-medium text-foreground placeholder:text-muted-foreground",
+          )}
+          data-testid={`${testIdPrefix}-url`}
+          disabled={disabled}
+          onBlur={onUrlBlur}
+          onChange={(event) => onUrlChange(event.target.value)}
+          onFocus={onUrlFocus}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              event.preventDefault();
+              onUrlSubmit();
+            }
+          }}
+          placeholder={
+            isOnboardingSurface
+              ? "Paste a URL"
+              : "Paste a URL (Slack profile, etc.)"
+          }
+          spellCheck={false}
+          type="url"
+          value={urlDraft}
+        />
+      </div>
+
+      {uploadErrorMessage ? (
+        <p
+          className="rounded-xl border border-destructive/30 bg-destructive/10 px-4 py-3 text-sm font-medium text-destructive"
+          data-testid={`${testIdPrefix}-upload-error`}
+          role="alert"
+        >
+          {uploadErrorMessage}
+        </p>
+      ) : null}
+    </div>
+  );
+}
diff --git a/desktop/src/features/profile/ui/ProfileAvatarModeTabs.tsx b/desktop/src/features/profile/ui/ProfileAvatarModeTabs.tsx
index 316fa54921e..7e86e6ee9b8 100644
--- a/desktop/src/features/profile/ui/ProfileAvatarModeTabs.tsx
+++ b/desktop/src/features/profile/ui/ProfileAvatarModeTabs.tsx
@@ -18,6 +18,7 @@ type ProfileAvatarModeTabsProps = {
   disabled: boolean;
   mode: AvatarMode;
   onModeChange: (mode: AvatarMode) => void;
+  orientation?: "horizontal" | "vertical";
   presentation: AvatarEditorPresentation;
   portalContainer?: HTMLElement | null;
 };
@@ -26,13 +27,20 @@ export function ProfileAvatarModeTabs({
   disabled,
   mode,
   onModeChange,
+  orientation = "horizontal",
   presentation,
   portalContainer,
 }: ProfileAvatarModeTabsProps) {
   const isOnboardingModal = presentation === "onboarding-modal";
+  const isOnboardingInline = presentation === "onboarding-inline";
+  const isOnboardingSurface = isOnboardingInline || isOnboardingModal;
+  const isVertical = orientation === "vertical";
   const tabs = (
     <Tabs
-      className={isOnboardingModal ? "flex w-full justify-center" : "w-full"}
+      className={cn(
+        "w-full",
+        isOnboardingSurface && !isVertical && "flex justify-center",
+      )}
       onValueChange={(nextMode) => {
         if (!disabled) onModeChange(nextMode as AvatarMode);
       }}
@@ -41,30 +49,49 @@ export function ProfileAvatarModeTabs({
       <TabsList
         aria-label="Avatar type"
         className={cn(
-          isOnboardingModal
-            ? "relative isolate grid h-10 w-full max-w-[320px] grid-cols-3 overflow-hidden rounded-full bg-[color:rgb(var(--buzz-onboarding-avatar-control-fg)_/_0.12)] p-1 text-muted-foreground"
-            : "relative isolate grid h-14 w-full grid-cols-3 overflow-hidden rounded-full bg-muted p-1 text-muted-foreground",
+          isOnboardingSurface && isVertical
+            ? "flex h-auto w-full flex-col gap-1 rounded-xl bg-transparent p-0 text-muted-foreground"
+            : isOnboardingSurface
+              ? isOnboardingInline
+                ? "relative isolate grid h-9 w-full grid-cols-3 gap-0.5 overflow-hidden rounded-full border border-[#d4d4d4] bg-[#e2e2e2]/30 p-[3px] text-[#0f0f0f]"
+                : "relative isolate grid h-10 w-full max-w-[320px] grid-cols-3 overflow-hidden rounded-full bg-[color:rgb(var(--buzz-onboarding-avatar-control-fg)_/_0.12)] p-1 text-muted-foreground"
+              : "relative isolate grid h-14 w-full grid-cols-3 overflow-hidden rounded-full bg-muted p-1 text-muted-foreground",
         )}
       >
-        <div
-          aria-hidden="true"
-          className={cn(
-            "absolute bottom-1 left-1 top-1 z-0 rounded-full shadow transition-transform duration-[250ms] ease-out",
-            isOnboardingModal
-              ? "bg-[rgb(var(--buzz-onboarding-avatar-action-bg))]"
-              : "bg-background",
-          )}
-          style={{
-            transform: `translateX(${MODE_TAB_ORDER.indexOf(mode) * 100}%)`,
-            width: "calc((100% - 8px) / 3)",
-          }}
-        />
+        {!isVertical ? (
+          <div
+            aria-hidden="true"
+            className={cn(
+              "absolute z-0 rounded-full transition-transform motion-reduce:transition-none",
+              isOnboardingInline
+                ? "bottom-[3px] left-[3px] top-[3px] bg-[#e2e2e2] duration-200 ease-in-out"
+                : cn(
+                    "bottom-1 left-1 top-1 shadow duration-[250ms] ease-out",
+                    isOnboardingSurface
+                      ? "bg-[rgb(var(--buzz-onboarding-avatar-action-bg))]"
+                      : "bg-background",
+                  ),
+            )}
+            style={{
+              transform: isOnboardingInline
+                ? `translateX(calc(${MODE_TAB_ORDER.indexOf(mode)} * (100% + 2px)))`
+                : `translateX(${MODE_TAB_ORDER.indexOf(mode) * 100}%)`,
+              width: isOnboardingInline
+                ? "calc((100% - 10px) / 3)"
+                : "calc((100% - 8px) / 3)",
+            }}
+          />
+        ) : null}
         {MODE_TAB_ORDER.map((tabMode) => (
           <TabsTrigger
             className={cn(
-              isOnboardingModal
-                ? "relative z-10 h-full rounded-full bg-transparent px-4 text-sm font-normal shadow-none transition-colors data-[state=active]:bg-transparent data-[state=active]:text-[rgb(var(--buzz-onboarding-avatar-action-fg))] data-[state=active]:shadow-none"
-                : "relative z-10 h-full rounded-full bg-transparent text-sm font-medium shadow-none transition-colors data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none",
+              isOnboardingSurface && isVertical
+                ? "h-10 w-full justify-start rounded-lg bg-transparent px-3 text-sm font-medium shadow-none transition-colors duration-150 ease-out hover:bg-foreground/[0.05] data-[state=active]:bg-[rgb(var(--buzz-onboarding-avatar-action-bg))] data-[state=active]:text-[rgb(var(--buzz-onboarding-avatar-action-fg))] data-[state=active]:shadow-none"
+                : isOnboardingSurface
+                  ? isOnboardingInline
+                    ? "relative z-10 h-full rounded-full bg-transparent px-4 py-1 text-sm font-medium text-[#0f0f0f] shadow-none transition-colors duration-150 ease-out focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[#0f0f0f] focus-visible:ring-offset-0 data-[state=active]:bg-transparent data-[state=active]:text-[#0f0f0f] data-[state=active]:shadow-none motion-reduce:transition-none"
+                    : "relative z-10 h-full rounded-full bg-transparent px-4 text-sm font-normal shadow-none transition-colors data-[state=active]:bg-transparent data-[state=active]:text-[rgb(var(--buzz-onboarding-avatar-action-fg))] data-[state=active]:shadow-none"
+                  : "relative z-10 h-full rounded-full bg-transparent text-sm font-medium shadow-none transition-colors data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none",
             )}
             disabled={disabled}
             key={tabMode}
diff --git a/desktop/src/main.tsx b/desktop/src/main.tsx
index 634a9b171a1..df0e3878b98 100644
--- a/desktop/src/main.tsx
+++ b/desktop/src/main.tsx
@@ -13,7 +13,12 @@ import { migrateLegacyCommunityStorageBeforeRender } from "@/features/communitie
 import { CommunitiesProvider } from "@/features/communities/useCommunities";
 import { huddleWindowChannelId } from "@/features/huddle/lib/huddleWindow";
 import { CommunityOnboardingProvider } from "@/features/onboarding/communityOnboarding";
-import { ThemeProvider } from "@/shared/theme/ThemeProvider";
+import { onboardingPreviewRequested } from "@/features/onboarding/onboardingPreview";
+import { OnboardingPreviewApp } from "@/features/onboarding/ui/OnboardingPreviewApp";
+import {
+  NonPersistentThemeProvider,
+  ThemeProvider,
+} from "@/shared/theme/ThemeProvider";
 import { EmojiBurstProvider } from "@/shared/ui/EmojiBurstProvider";
 import { PoofBurstProvider } from "@/shared/ui/PoofBurstProvider";
 import { Toaster } from "@/shared/ui/sonner";
@@ -108,6 +113,18 @@ function renderApp() {
   );
 }
 
+function renderOnboardingPreview() {
+  ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+    <React.StrictMode>
+      <RootErrorBoundary>
+        <NonPersistentThemeProvider>
+          <OnboardingPreviewApp />
+        </NonPersistentThemeProvider>
+      </RootErrorBoundary>
+    </React.StrictMode>,
+  );
+}
+
 async function installE2eBridgeIfConfigured() {
   // The mock bridge is compiled only into dev and explicit E2E builds. A
   // pre-bootstrap global alone must never activate mock IPC in production.
@@ -123,6 +140,13 @@ async function installE2eBridgeIfConfigured() {
 }
 
 async function bootstrap() {
+  if (onboardingPreviewRequested()) {
+    // Preview mounts before storage migration, community state, the normal app,
+    // or any native-backed onboarding action. Its state lives only in React.
+    renderOnboardingPreview();
+    return;
+  }
+
   resetDevWebviewStateFromUrl();
   configureDevE2eBridgeFromUrl();
   recoverLocalStorageQuotaOnStartup();
diff --git a/desktop/src/shared/styles/globals/components.css b/desktop/src/shared/styles/globals/components.css
index 033ab2585d2..b2f20996557 100644
--- a/desktop/src/shared/styles/globals/components.css
+++ b/desktop/src/shared/styles/globals/components.css
@@ -391,6 +391,10 @@
     color: var(--buzz-onboarding-backup-ink);
   }
 
+  .buzz-onboarding-key-text-v3 {
+    @apply max-w-[32ch] text-2xl font-medium text-foreground;
+  }
+
   .dark .buzz-onboarding-neutral-theme:not(.buzz-startup-shell) {
     --background: 0 0% 3.9%;
     --foreground: 0 0% 98%;
diff --git a/desktop/src/shared/styles/globals/spoilers.css b/desktop/src/shared/styles/globals/spoilers.css
index ec6c2e54513..3e5795ff6c4 100644
--- a/desktop/src/shared/styles/globals/spoilers.css
+++ b/desktop/src/shared/styles/globals/spoilers.css
@@ -95,6 +95,26 @@
   opacity: 0;
 }
 
+/* The onboarding key spoiler sits on a white security card even when the
+   surrounding workshop uses the dark theme. Keep the standard dark particles
+   visible and the local surface seamless. */
+.buzz-onboarding-private-key-spoiler .buzz-spoiler {
+  --buzz-spoiler-accent: #333;
+
+  background: transparent;
+}
+
+.buzz-onboarding-private-key-spoiler .buzz-spoiler[data-revealed="true"],
+.buzz-onboarding-private-key-spoiler .buzz-spoiler:hover,
+.buzz-onboarding-private-key-spoiler .buzz-spoiler:focus-visible {
+  background: transparent;
+}
+
+.buzz-onboarding-private-key-spoiler .buzz-spoiler:focus-visible {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 2px;
+}
+
 .ProseMirror .buzz-spoiler {
   background: transparent;
   color: transparent;
diff --git a/desktop/src/shared/theme/ThemeProvider.tsx b/desktop/src/shared/theme/ThemeProvider.tsx
index 63fd3adb4de..4f4336a0395 100644
--- a/desktop/src/shared/theme/ThemeProvider.tsx
+++ b/desktop/src/shared/theme/ThemeProvider.tsx
@@ -89,6 +89,41 @@ type ThemeProviderProps = {
 
 const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
 
+const NON_PERSISTENT_THEME_VALUE: ThemeContextValue = {
+  accentColor: DEFAULT_ACCENT,
+  applyAppearance: () => undefined,
+  followSystem: false,
+  glassBackground: false,
+  glassBackgroundSupported: false,
+  glassOpacity: 65,
+  hasPair: false,
+  isDark: false,
+  isLoading: false,
+  prominentActiveTab: false,
+  selectedThemeName: "buzz",
+  setAccentColor: () => undefined,
+  setFollowSystem: () => undefined,
+  setGlassBackground: () => undefined,
+  setGlassOpacity: () => undefined,
+  setProminentActiveTab: () => undefined,
+  setTheme: () => undefined,
+  terminalPalette: null,
+  themeName: "buzz",
+};
+
+/** Supplies theme context without reading, writing, or applying preferences. */
+export function NonPersistentThemeProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return (
+    <ThemeContext.Provider value={NON_PERSISTENT_THEME_VALUE}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
 function isValidThemeName(name: string): name is SyntaxThemeName {
   return (SYNTAX_THEMES as readonly string[]).includes(name);
 }
diff --git a/desktop/src/shared/ui/SpoilerParticles.tsx b/desktop/src/shared/ui/SpoilerParticles.tsx
index 0033a175b4e..b7633520a27 100644
--- a/desktop/src/shared/ui/SpoilerParticles.tsx
+++ b/desktop/src/shared/ui/SpoilerParticles.tsx
@@ -53,6 +53,43 @@ const RANDOM_SEED = 4011505;
 const V_MIN = 2;
 const V_MAX = 12;
 
+/**
+ * The particle renderer targets APIs available in current Tauri webviews, but
+ * some managed or unusually old Windows/Linux runtimes can lag behind. Hosts
+ * with a non-particle concealment treatment can use this check to fall back
+ * before hidden content is mounted behind an unusable canvas.
+ */
+export function supportsSpoilerParticles(): boolean {
+  if (typeof window === "undefined" || typeof document === "undefined")
+    return false;
+  if (
+    typeof window.PointerEvent === "undefined" ||
+    typeof window.ResizeObserver === "undefined" ||
+    typeof window.MutationObserver === "undefined" ||
+    typeof window.IntersectionObserver === "undefined" ||
+    typeof window.matchMedia !== "function" ||
+    typeof window.requestAnimationFrame !== "function" ||
+    typeof window.cancelAnimationFrame !== "function" ||
+    typeof document.createRange !== "function"
+  ) {
+    return false;
+  }
+
+  const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+  if (
+    typeof motionQuery.addEventListener !== "function" ||
+    typeof motionQuery.removeEventListener !== "function"
+  ) {
+    return false;
+  }
+
+  try {
+    return document.createElement("canvas").getContext("2d") !== null;
+  } catch {
+    return false;
+  }
+}
+
 export function SpoilerParticles({
   active,
   contentRef,
diff --git a/desktop/src/shared/ui/checkbox.tsx b/desktop/src/shared/ui/checkbox.tsx
index fbfa2da490d..3f304b93f01 100644
--- a/desktop/src/shared/ui/checkbox.tsx
+++ b/desktop/src/shared/ui/checkbox.tsx
@@ -4,12 +4,56 @@ import { motion, useReducedMotion } from "motion/react";
 
 import { cn } from "@/shared/lib/cn";
 
+type AnimatedCheckmarkProps = React.ComponentPropsWithoutRef<"svg"> & {
+  visible?: boolean;
+};
+
+function AnimatedCheckmark({
+  className,
+  visible = true,
+  ...props
+}: AnimatedCheckmarkProps) {
+  const shouldReduceMotion = useReducedMotion();
+
+  return (
+    <svg
+      aria-hidden="true"
+      className={cn("h-4 w-4", className)}
+      fill="none"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <motion.path
+        animate={
+          visible
+            ? { opacity: 1, pathLength: 1 }
+            : { opacity: 0, pathLength: 0 }
+        }
+        d="m5 12 4 4L19 6"
+        initial={
+          shouldReduceMotion || !visible ? false : { opacity: 0, pathLength: 0 }
+        }
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        transition={
+          shouldReduceMotion
+            ? { duration: 0 }
+            : {
+                duration: 0.18,
+                ease: [0.23, 1, 0.32, 1],
+              }
+        }
+      />
+    </svg>
+  );
+}
+
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
 >(({ className, ...props }, ref) => {
-  const shouldReduceMotion = useReducedMotion();
-
   return (
     <CheckboxPrimitive.Root
       ref={ref}
@@ -20,34 +64,11 @@ const Checkbox = React.forwardRef<
       {...props}
     >
       <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
-        <svg
-          aria-hidden="true"
-          className="h-4 w-4"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <motion.path
-            animate={{ opacity: 1, pathLength: 1 }}
-            d="m5 12 4 4L19 6"
-            initial={shouldReduceMotion ? false : { opacity: 0, pathLength: 0 }}
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth="2"
-            transition={
-              shouldReduceMotion
-                ? { duration: 0 }
-                : {
-                    duration: 0.18,
-                    ease: [0.23, 1, 0.32, 1],
-                  }
-            }
-          />
-        </svg>
+        <AnimatedCheckmark />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
   );
 });
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-export { Checkbox };
+export { AnimatedCheckmark, Checkbox };
diff --git a/desktop/src/shared/ui/markdown/SpoilerInline.tsx b/desktop/src/shared/ui/markdown/SpoilerInline.tsx
index 3b1519742d2..5d8975c8093 100644
--- a/desktop/src/shared/ui/markdown/SpoilerInline.tsx
+++ b/desktop/src/shared/ui/markdown/SpoilerInline.tsx
@@ -15,14 +15,19 @@ export function SpoilerInline({
   block = false,
   children,
   interactive = true,
+  revealOnHover = false,
 }: {
   block?: boolean;
   children?: React.ReactNode;
   interactive?: boolean;
+  /** Temporarily reveal for mouse/trackpad hover while preserving click and keyboard access. */
+  revealOnHover?: boolean;
 }) {
   const [revealed, setRevealed] = React.useState(false);
+  const [hovered, setHovered] = React.useState(false);
   const contentRef = React.useRef<HTMLElement | null>(null);
   const isBlock = block || hasBlockMedia(React.Children.toArray(children));
+  const visuallyRevealed = revealed || hovered;
 
   const setContentElement = React.useCallback((node: HTMLElement | null) => {
     contentRef.current = node;
@@ -34,28 +39,33 @@ export function SpoilerInline({
 
   const handlePointerDownCapture = React.useCallback(
     (event: React.PointerEvent<HTMLElement>) => {
-      if (revealed) return;
+      if (visuallyRevealed) return;
       event.stopPropagation();
     },
-    [revealed],
+    [visuallyRevealed],
   );
 
   const handleClickCapture = React.useCallback(
     (event: React.MouseEvent<HTMLElement>) => {
-      if (revealed) return;
+      if (visuallyRevealed) return;
       event.preventDefault();
       event.stopPropagation();
       toggleRevealed();
     },
-    [revealed, toggleRevealed],
+    [toggleRevealed, visuallyRevealed],
   );
 
   const handleClick = React.useCallback(
     (event: React.MouseEvent<HTMLElement>) => {
-      if (revealed && isBlock && event.target !== event.currentTarget) return;
+      // Hover is a temporary reveal: clicking or selecting while the pointer
+      // is inside must not pin the spoiler open after the pointer leaves.
+      // Touch and keyboard still toggle `revealed` because they have no hover.
+      if (revealOnHover && hovered) return;
+      if (visuallyRevealed && isBlock && event.target !== event.currentTarget)
+        return;
       toggleRevealed();
     },
-    [isBlock, revealed, toggleRevealed],
+    [hovered, isBlock, revealOnHover, toggleRevealed, visuallyRevealed],
   );
 
   const handleKeyDown = React.useCallback(
@@ -67,12 +77,25 @@ export function SpoilerInline({
     [toggleRevealed],
   );
 
+  const handlePointerEnter = React.useCallback(
+    (event: React.PointerEvent<HTMLElement>) => {
+      if (revealOnHover && event.pointerType === "mouse") setHovered(true);
+    },
+    [revealOnHover],
+  );
+
+  const handlePointerLeave = React.useCallback(() => {
+    if (revealOnHover) setHovered(false);
+  }, [revealOnHover]);
+
   const revealProps = {
     "aria-label": revealed ? "Hide spoiler" : "Reveal spoiler",
     "aria-pressed": revealed,
     onClick: handleClick,
     onClickCapture: handleClickCapture,
     onKeyDown: handleKeyDown,
+    onPointerEnter: handlePointerEnter,
+    onPointerLeave: handlePointerLeave,
     onPointerDownCapture: handlePointerDownCapture,
     role: "button",
     tabIndex: 0,
@@ -117,12 +140,12 @@ export function SpoilerInline({
       <div
         {...revealProps}
         className="buzz-spoiler buzz-spoiler--block"
-        data-revealed={revealed ? "true" : "false"}
+        data-revealed={visuallyRevealed ? "true" : "false"}
         data-spoiler=""
       >
-        <SpoilerParticles active={!revealed} contentRef={contentRef} />
+        <SpoilerParticles active={!visuallyRevealed} contentRef={contentRef} />
         <div className="buzz-spoiler__content" ref={setContentElement}>
-          <SpoilerHiddenContext.Provider value={!revealed}>
+          <SpoilerHiddenContext.Provider value={!visuallyRevealed}>
             {children}
           </SpoilerHiddenContext.Provider>
         </div>
@@ -134,12 +157,12 @@ export function SpoilerInline({
     <span
       {...revealProps}
       className="buzz-spoiler"
-      data-revealed={revealed ? "true" : "false"}
+      data-revealed={visuallyRevealed ? "true" : "false"}
       data-spoiler=""
     >
-      <SpoilerParticles active={!revealed} contentRef={contentRef} />
+      <SpoilerParticles active={!visuallyRevealed} contentRef={contentRef} />
       <span className="buzz-spoiler__content" ref={setContentElement}>
-        <SpoilerHiddenContext.Provider value={!revealed}>
+        <SpoilerHiddenContext.Provider value={!visuallyRevealed}>
           {children}
         </SpoilerHiddenContext.Provider>
       </span>
diff --git a/desktop/src/shared/ui/segmented-control.tsx b/desktop/src/shared/ui/segmented-control.tsx
index b95baaff10a..2745798135b 100644
--- a/desktop/src/shared/ui/segmented-control.tsx
+++ b/desktop/src/shared/ui/segmented-control.tsx
@@ -9,6 +9,7 @@ type SegmentOption<Value extends string> = {
 };
 
 type SegmentedControlSize = "compact" | "default" | "wide";
+type SegmentedControlAppearance = "default" | "onboarding-inline";
 
 const SIZE_CLASSES: Record<SegmentedControlSize, string> = {
   compact: "w-48",
@@ -18,6 +19,7 @@ const SIZE_CLASSES: Record<SegmentedControlSize, string> = {
 
 /** A mutually exclusive control with equal-width, optionally scrubbable options. */
 export function SegmentedControl<Value extends string>({
+  appearance = "default",
   className,
   disabled = false,
   indicatorTestId,
@@ -30,6 +32,7 @@ export function SegmentedControl<Value extends string>({
   testId,
   value,
 }: {
+  appearance?: SegmentedControlAppearance;
   className?: string;
   disabled?: boolean;
   indicatorTestId?: string;
@@ -44,17 +47,45 @@ export function SegmentedControl<Value extends string>({
 }) {
   const [previewValue, setPreviewValue] = React.useState<Value | null>(null);
   const controlRef = React.useRef<HTMLFieldSetElement | null>(null);
+  const optionRefs = React.useRef<Array<HTMLButtonElement | null>>([]);
+  const [inlineIndicator, setInlineIndicator] = React.useState({
+    left: 3,
+    width: 0,
+  });
   const activePointerIdRef = React.useRef<number | null>(null);
   const pointerStartXRef = React.useRef<number | null>(null);
   const pointerStartValueRef = React.useRef<Value | null>(null);
   const scrubValueRef = React.useRef<Value | null>(null);
   const skipPointerClickRef = React.useRef(false);
   const displayedValue = previewValue ?? value;
+  const isOnboardingInline = appearance === "onboarding-inline";
   const selectedIndex = Math.max(
     0,
     options.findIndex((option) => option.value === displayedValue),
   );
 
+  React.useLayoutEffect(() => {
+    if (!isOnboardingInline) return;
+    const control = controlRef.current;
+    const selectedOption = optionRefs.current[selectedIndex];
+    if (!control || !selectedOption) return;
+
+    const updateIndicator = () => {
+      const controlBounds = control.getBoundingClientRect();
+      const optionBounds = selectedOption.getBoundingClientRect();
+      setInlineIndicator({
+        left: optionBounds.left - controlBounds.left,
+        width: optionBounds.width,
+      });
+    };
+
+    updateIndicator();
+    const observer = new ResizeObserver(updateIndicator);
+    observer.observe(control);
+    observer.observe(selectedOption);
+    return () => observer.disconnect();
+  }, [isOnboardingInline, selectedIndex]);
+
   const getValueAtPointer = React.useCallback(
     (element: HTMLFieldSetElement, clientX: number): Value => {
       const bounds = element.getBoundingClientRect();
@@ -160,7 +191,10 @@ export function SegmentedControl<Value extends string>({
   return (
     <fieldset
       className={cn(
-        "relative isolate h-8 max-w-full shrink-0 overflow-hidden rounded-md bg-muted/45 p-0.5",
+        "relative isolate max-w-full shrink-0 overflow-hidden",
+        isOnboardingInline
+          ? "h-9 rounded-full border border-[#d4d4d4] bg-[#e2e2e2]/30 p-[3px] text-[#0f0f0f]"
+          : "h-8 rounded-md bg-muted/45 p-0.5",
         SIZE_CLASSES[size],
         onPreviewChange && "touch-none select-none cursor-ew-resize",
         "disabled:pointer-events-none disabled:opacity-50",
@@ -180,26 +214,44 @@ export function SegmentedControl<Value extends string>({
       <div
         aria-hidden="true"
         className={cn(
-          "absolute bottom-0.5 left-0.5 top-0.5 z-0 rounded-md bg-background shadow-sm transition-transform duration-200 ease-in-out motion-reduce:transition-none",
+          "absolute z-0 transition-[transform,width] duration-200 ease-in-out motion-reduce:transition-none",
+          isOnboardingInline
+            ? "bottom-[3px] left-0 top-[3px] rounded-full bg-[#e2e2e2]"
+            : "bottom-0.5 left-0.5 top-0.5 rounded-md bg-background shadow-sm",
           previewValue && "duration-0",
         )}
         data-testid={indicatorTestId ?? `${testId}-indicator`}
         style={{
-          transform: `translateX(${selectedIndex * 100}%)`,
-          width: `calc((100% - 0.25rem) / ${options.length})`,
+          transform: isOnboardingInline
+            ? `translateX(${inlineIndicator.left}px)`
+            : `translateX(${selectedIndex * 100}%)`,
+          width: isOnboardingInline
+            ? inlineIndicator.width
+            : `calc((100% - 0.25rem) / ${options.length})`,
         }}
       />
       {/* Legends escape grid/flex layout on a fieldset, so the columns live
           on an inner wrapper the legend is not part of. */}
-      <div className="grid h-full auto-cols-fr grid-flow-col">
-        {options.map(({ value: optionValue, label, Icon }) => (
+      <div
+        className={cn(
+          "h-full",
+          isOnboardingInline
+            ? "flex w-fit gap-0.5"
+            : "grid auto-cols-fr grid-flow-col",
+        )}
+      >
+        {options.map(({ value: optionValue, label, Icon }, optionIndex) => (
           <button
             aria-pressed={value === optionValue}
             className={cn(
-              "relative z-10 flex h-full items-center justify-center gap-1.5 rounded-md bg-transparent px-2.5 text-xs font-medium transition-colors duration-150 ease-out focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
-              displayedValue === optionValue
-                ? "text-foreground"
-                : "text-muted-foreground hover:text-foreground",
+              "relative z-10 flex h-full items-center justify-center gap-1.5 bg-transparent font-medium transition-colors duration-150 ease-out focus-visible:outline-hidden motion-reduce:transition-none",
+              isOnboardingInline
+                ? "rounded-full px-4 py-1 text-sm text-[#0f0f0f] focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-[#0f0f0f]"
+                : "rounded-md px-2.5 text-xs focus-visible:ring-2 focus-visible:ring-ring",
+              !isOnboardingInline &&
+                (displayedValue === optionValue
+                  ? "text-foreground"
+                  : "text-muted-foreground hover:text-foreground"),
             )}
             data-testid={`${optionTestIdPrefix}-${optionValue}`}
             key={optionValue}
@@ -210,6 +262,9 @@ export function SegmentedControl<Value extends string>({
               }
               onValueChange(optionValue);
             }}
+            ref={(element) => {
+              optionRefs.current[optionIndex] = element;
+            }}
             type="button"
           >
             {Icon ? <Icon className="h-3.5 w-3.5" /> : null}
diff --git a/desktop/tests/e2e/onboarding.spec.ts b/desktop/tests/e2e/onboarding.spec.ts
index b085e7dab69..e9b5b7aa20a 100644
--- a/desktop/tests/e2e/onboarding.spec.ts
+++ b/desktop/tests/e2e/onboarding.spec.ts
@@ -1107,11 +1107,15 @@ test("first-community choices route join, create, owner, and member intents", as
       "true",
     );
   }, BLANK_TYLER_IDENTITY.pubkey);
-  await installMockBridge(page, undefined, {
-    relayWsUrl: "ws://localhost:3000",
-    skipOnboardingSeed: true,
-    skipCommunitySeed: true,
-  });
+  await installMockBridge(
+    page,
+    { relayRequiresMembership: true },
+    {
+      relayWsUrl: "ws://localhost:3000",
+      skipOnboardingSeed: true,
+      skipCommunitySeed: true,
+    },
+  );
   await page.goto("/");
 
   await expect(
@@ -1158,12 +1162,23 @@ test("first-community choices route join, create, owner, and member intents", as
   await expect(
     page.getByRole("heading", { name: "Join a community" }),
   ).toBeVisible();
-  await expect(page.getByText("Joining a private community?")).toBeVisible();
+  const accessRequiredHeading = page.getByText(
+    "You’ll need to request access to this community",
+  );
+  await expect(accessRequiredHeading).toHaveCount(0);
+  await accessInput.fill("https://default.example.com");
+  await expect(accessRequiredHeading).toBeVisible();
+  await expect(
+    page.getByText(
+      "This community requires an admin to add you before you can join. Copy your public ID and send it to them.",
+    ),
+  ).toBeVisible();
   await expect(page.getByTestId("welcome-join-npub")).toBeVisible();
   await expect(
     page.getByRole("button", { name: "Copy public ID" }),
   ).toBeVisible();
   await accessInput.fill("https://default.example.com/invite/abc123");
+  await expect(accessRequiredHeading).toHaveCount(0);
   await expect(page.getByTestId("invite-redeem-submit")).toBeEnabled();
 });