-
-
{
- setNsecInput(e.target.value);
- setError(null);
- }}
- placeholder="nsec1… (or drop a .key file)"
- spellCheck={false}
- type="password"
- value={nsecInput}
- />
-
-
- Drop a `.key` file anywhere in this box, or paste your nsec.
+
+
+ First, let's start with your name
+
+
+ Enter a nickname or whatever you want people to call you.
- {/* Live preview of the resolved npub once the input is valid. */}
- {isValid && previewNpub ? (
-
-
-
-
- This will switch your identity to:
-
-
- {shortenNpub(previewNpub)}
-
-
-
- ) : null}
-
- {showInvalidHint && !error ? (
-
- Waiting for a valid `nsec1…` key.
-
- ) : null}
-
- {error ?
{error}
: null}
-
-
-
-
-
-
- );
-}
-
-export function ProfileStep({ actions, state }: ProfileStepProps) {
- const {
- advanceWithoutSaving,
- clearAvatarDraft,
- importIdentity,
- onUploadingChange,
- skipForNow,
- submit,
- updateAvatarUrl,
- updateDisplayName,
- } = actions;
- const {
- avatar,
- currentNpub,
- isUploadingAvatar,
- isSaving,
- name,
- saveRecovery,
- } = state;
- const { draftValue: displayNameDraft, savedValue: savedDisplayName } = name;
- const canSubmit =
- displayNameDraft.trim().length > 0 && !isSaving && !isUploadingAvatar;
- const avatarPreviewLabel =
- displayNameDraft.trim() || savedDisplayName || "You";
-
- return (
-
-
-
First run
-
-
- Set up your profile
-
-
-
-
-
-
-
-
-
+
Name
+
+ {!hasDisplayNameDraft ? (
+
+
+
+ Name
+
+
+ ) : null}
+
-
+
-
0 && avatar.draftUrl !== avatar.savedUrl
- }
- disabled={isSaving}
- idleHint=""
- testIdPrefix="onboarding-avatar"
- />
+ {saveRecovery.errorMessage ? (
+
+ ) : null}
-
-
-
-
-
- {currentNpub ? (
- <>
-
- {shortenNpub(currentNpub)}
-
-
-
- ) : null}
-
- {saveRecovery.canSkipForNow ? (
-
- ) : null}
- {saveRecovery.canAdvanceWithoutSaving ? (
-
- ) : null}
+
+
+ {back ? (
+
+ ) : null}
+
+
+
+ {saveRecovery.canSkipForNow ? (
+
+ ) : null}
+ {saveRecovery.canAdvanceWithoutSaving ? (
+
+ ) : null}
+
+
-
+
![]()
setImageFailed(true)}
+ src={runtime.avatarUrl}
+ />
+
+
+
+ );
+}
+
+function RuntimeStatus({
+ installError,
+ installSuccess,
+ isInstalling,
+ onInstall,
+ runtime,
+}: {
+ installError: string | null;
+ installSuccess: boolean;
+ isInstalling: boolean;
+ onInstall: () => void;
+ runtime: AcpRuntimeCatalogEntry;
+}) {
+ if (isInstalling) {
+ return (
+
+
+
+ );
+ }
+
+ if (installError) {
+ return (
+
+ );
+ }
+
+ if (runtime.availability === "available" || installSuccess) {
+ return (
+
+
+
+ );
+ }
+
+ if (runtime.canAutoInstall) {
+ return (
+
+ );
+ }
+
+ return (
+
+ );
+}
+
+function RuntimeDetails({ runtime }: { runtime: AcpRuntimeCatalogEntry }) {
+ if (
+ runtime.availability === "available" &&
+ runtime.command &&
+ runtime.binaryPath
+ ) {
+ return (
+ <>
+
+ {describeResolvedCommand(runtime.command, runtime.binaryPath)}
+
+ {runtime.defaultArgs.length > 0 ? (
+
+ Args:{" "}
+ {runtime.defaultArgs.join(", ")}
+
+ ) : null}
+
+ );
+ }
+
+ if (runtime.availability === "adapter_missing") {
+ return (
+ <>
+
+ CLI detected; ACP adapter missing.
+
+
+ {runtime.installHint}
+
+
+ );
+ }
+
+ if (runtime.availability === "cli_missing") {
+ return (
+ <>
+
+ ACP adapter detected; CLI missing.
+
+
+ {runtime.installHint}
+
+
+ );
+ }
+
+ return (
+ <>
+
+ Not installed yet.
+
+
+ {runtime.installHint}
+
+
+ );
+}
+
+function RuntimeCard({
+ installError,
+ installSuccess,
+ isInstalling,
+ onInstall,
+ runtime,
+}: {
+ installError: string | null;
+ installSuccess: boolean;
+ isInstalling: boolean;
+ onInstall: () => void;
+ runtime: AcpRuntimeCatalogEntry;
+}) {
+ const isAvailable = runtime.availability === "available" || installSuccess;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ {runtime.label}
+
+ {isAvailable ? (
+
+ Installed
+
+ ) : null}
+
+
+
+
+
+ {installError ? (
+
+ {installError}
+
+ ) : null}
+
+ {installSuccess && runtime.availability !== "available" ? (
+
+ Installed successfully. You can finish onboarding now.
+
+ ) : null}
+
-
-
-
- We only list runtimes the app can actually see on this machine.
-
-
-
- {items.length > 0 ? (
-
- {items.map((provider) => (
-
-
-
- {provider.label}
-
-
{provider.command}
-
-
- ))}
-
- ) : isChecking ? (
-
- Looking for compatible runtimes...
-
- ) : errorMessage ? null : (
-
- No compatible ACP runtimes detected yet.
-
- )}
-
- {showSetupLaterHint ? (
-
- Nothing is installed yet. That's fine. You can finish setup now
- and come back later in Settings > Doctor.
-
- ) : null}
-
- {errorMessage ? (
-
- {errorMessage}
-
- ) : null}
-
-
-
First run
-
+
+
+
- ACP runtimes
+ Agent harnesses
-
- ACP runtimes only matter when you want Sprout to launch local tools
- from this machine.
+
+ Sprout can launch local ACP-compatible agent harnesses. Install or
+ verify the runtimes this desktop app can see.
+ {items.map((runtime) => (
+ handleInstall(runtime.id)}
+ runtime={runtime}
+ />
+ ))}
+
+ ) : isChecking ? (
+
+ Looking for compatible runtimes...
+
+ ) : errorMessage ? null : (
+
+ No compatible ACP runtimes detected yet. You can finish setup now and
+ come back later in Settings > Doctor.
+
+ )}
+
+ {errorMessage ? (
+
+ {errorMessage}
+
+ ) : null}
+
+ );
+}
+
+function SetupStepContent({
+ actions,
+ direction,
+ state,
+}: SetupStepContentProps) {
+ const { runtimeProviders } = state;
+
+ return (
+
-
-
+
+
+
-
);
}
-export function SetupStep({ actions }: SetupStepProps) {
+export function SetupStep({ actions, direction }: SetupStepProps) {
const state = useSetupStepState();
- return
;
+ return (
+
+ );
}
diff --git a/desktop/src/features/onboarding/ui/ThemeStep.tsx b/desktop/src/features/onboarding/ui/ThemeStep.tsx
new file mode 100644
index 0000000000..0ba54fcdc2
--- /dev/null
+++ b/desktop/src/features/onboarding/ui/ThemeStep.tsx
@@ -0,0 +1,619 @@
+import { Check } from "lucide-react";
+import * as React from "react";
+
+import { createThemeVars, hexToHsl } from "@/shared/theme/adaptive-theme";
+import {
+ ACCENT_COLORS,
+ ACCENT_STORAGE_KEY,
+ NEUTRAL_ACCENT,
+ THEME_STORAGE_KEY,
+ useTheme,
+} from "@/shared/theme/ThemeProvider";
+import {
+ ONBOARDING_DEFAULT_THEME_NAME,
+ SYNTAX_THEMES,
+ type SyntaxThemeName,
+ extractThemeInfo,
+ isLightTheme,
+ loadThemeData,
+} from "@/shared/theme/theme-loader";
+import { cn } from "@/shared/lib/cn";
+import { Button } from "@/shared/ui/button";
+import { StepProgress } from "@/shared/ui/step-progress";
+import {
+ type OnboardingTransitionDirection,
+ OnboardingSlideTransition,
+} from "./OnboardingSlideTransition";
+import type { ThemeStepActions } from "./types";
+
+type ThemeStepProps = {
+ actions: ThemeStepActions;
+ direction: OnboardingTransitionDirection;
+};
+
+type ThemePreviewVars = Record
;
+
+const LIGHT_PREVIEW_VARS: ThemePreviewVars = {
+ "--background": "0 0% 100%",
+ "--border": "0 0% 89.8%",
+ "--foreground": "0 0% 9%",
+ "--muted": "0 0% 96.1%",
+ "--muted-foreground": "0 0% 45.1%",
+ "--primary": "0 0% 9%",
+ "--sidebar-background": "0 0% 98%",
+ "--sidebar-foreground": "0 0% 9%",
+};
+
+const DARK_PREVIEW_VARS: ThemePreviewVars = {
+ "--background": "0 0% 3.9%",
+ "--border": "0 0% 14.9%",
+ "--foreground": "0 0% 98%",
+ "--muted": "0 0% 14.9%",
+ "--muted-foreground": "0 0% 63.9%",
+ "--primary": "0 0% 98%",
+ "--sidebar-background": "0 0% 0%",
+ "--sidebar-foreground": "0 0% 98%",
+};
+
+const GRADUAL_BLUR_LEVELS = [0.5, 1.25, 2.5, 4.5, 7, 10] as const;
+const THEME_TILE_WIDTH = 174;
+const THEME_TILE_HEIGHT = 160;
+const THEME_TILE_GAP = 12;
+const THEME_VISIBLE_ROW_COUNT = 2;
+const THEME_ROW_PEEK_HEIGHT = 48;
+const THEME_SCROLL_MAX_HEIGHT =
+ THEME_TILE_HEIGHT * THEME_VISIBLE_ROW_COUNT +
+ THEME_TILE_GAP * THEME_VISIBLE_ROW_COUNT +
+ THEME_ROW_PEEK_HEIGHT;
+
+type ThemePreviewVarsByTheme = Partial<
+ Record
+>;
+
+let themePreviewVarsCache: ThemePreviewVarsByTheme | null = null;
+let themePreviewVarsPromise: Promise | null = null;
+
+function hsl(vars: ThemePreviewVars | null, key: string) {
+ return `hsl(${vars?.[key] ?? LIGHT_PREVIEW_VARS[key]})`;
+}
+
+function hslAlpha(vars: ThemePreviewVars | null, key: string, alpha: number) {
+ return `hsl(${vars?.[key] ?? LIGHT_PREVIEW_VARS[key]} / ${alpha})`;
+}
+
+function contrastColorForHex(hex: string) {
+ const match = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+ if (!match) {
+ return "#ffffff";
+ }
+
+ const r = Number.parseInt(match[1], 16);
+ const g = Number.parseInt(match[2], 16);
+ const b = Number.parseInt(match[3], 16);
+ const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+ return luminance > 0.5 ? "#000000" : "#ffffff";
+}
+
+function formatThemeLabel(name: string): string {
+ return name
+ .split("-")
+ .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+ .join(" ");
+}
+
+function withAccentPreviewVars(
+ vars: ThemePreviewVars | null,
+ accentColor: string,
+): ThemePreviewVars | null {
+ if (!vars) {
+ return null;
+ }
+
+ if (accentColor === NEUTRAL_ACCENT) {
+ return {
+ ...vars,
+ "--primary": vars["--foreground"],
+ "--primary-foreground": vars["--background"],
+ };
+ }
+
+ return {
+ ...vars,
+ "--primary": hexToHsl(accentColor),
+ };
+}
+
+function getOrderedThemes() {
+ return [
+ ONBOARDING_DEFAULT_THEME_NAME,
+ ...SYNTAX_THEMES.filter((name) => name !== ONBOARDING_DEFAULT_THEME_NAME),
+ ];
+}
+
+function getThemeFallbackPreviewVars(name: SyntaxThemeName) {
+ return isLightTheme(name) ? LIGHT_PREVIEW_VARS : DARK_PREVIEW_VARS;
+}
+
+async function loadThemePreviewVars(name: SyntaxThemeName) {
+ const themeData = await loadThemeData(name);
+ const info = extractThemeInfo(name, themeData);
+ const { vars } = createThemeVars(info.bg, info.fg, info.comment, {
+ added: info.added,
+ deleted: info.deleted,
+ modified: info.modified,
+ });
+ return [name, vars] as const;
+}
+
+export function preloadThemePreviewVars() {
+ if (themePreviewVarsCache) {
+ return Promise.resolve(themePreviewVarsCache);
+ }
+
+ if (!themePreviewVarsPromise) {
+ themePreviewVarsPromise = Promise.all(
+ SYNTAX_THEMES.map((name) => loadThemePreviewVars(name)),
+ )
+ .then((entries) => {
+ const previewVars = Object.fromEntries(
+ entries,
+ ) as ThemePreviewVarsByTheme;
+ themePreviewVarsCache = previewVars;
+ return previewVars;
+ })
+ .catch((error) => {
+ themePreviewVarsPromise = null;
+ throw error;
+ });
+ }
+
+ return themePreviewVarsPromise;
+}
+
+function useThemePreviewVars() {
+ const [previewVarsByTheme, setPreviewVarsByTheme] =
+ React.useState(() => themePreviewVarsCache ?? {});
+
+ React.useEffect(() => {
+ let canceled = false;
+
+ void preloadThemePreviewVars()
+ .then((previewVars) => {
+ if (!canceled) {
+ setPreviewVarsByTheme(previewVars);
+ }
+ })
+ .catch(() => {
+ if (!canceled) {
+ setPreviewVarsByTheme({});
+ }
+ });
+
+ return () => {
+ canceled = true;
+ };
+ }, []);
+
+ return previewVarsByTheme;
+}
+
+function ThemePreviewSvg({ vars }: { vars: ThemePreviewVars | null }) {
+ const clipId = React.useId().replace(/:/g, "");
+ const background = hsl(vars, "--background");
+ const border = hsl(vars, "--border");
+ const foreground = hsl(vars, "--foreground");
+ const mutedForeground = hsl(vars, "--muted-foreground");
+ const primary = hsl(vars, "--primary");
+ const primarySoft = hslAlpha(vars, "--primary", 0.68);
+ const sidebar = hsl(vars, "--sidebar-background");
+ const sidebarForeground = hslAlpha(vars, "--sidebar-foreground", 0.58);
+
+ return (
+
+ );
+}
+
+function GradualBottomBlur() {
+ return (
+
+ {GRADUAL_BLUR_LEVELS.map((blur, index) => {
+ const transparentStop = 96 - index * 11;
+ const solidStop = Math.max(0, transparentStop - 28);
+ const maskImage = `linear-gradient(to top, black 0%, black ${solidStop}%, transparent ${transparentStop}%)`;
+
+ return (
+
+ );
+ })}
+
+
+
+ {ACCENT_COLORS.map((color) => {
+ const isNeutral = color.value === NEUTRAL_ACCENT;
+ const isSelected = accentColor === color.value;
+ const swatchBackground = isNeutral
+ ? "hsl(var(--foreground))"
+ : color.value;
+ const selectedRingColor = isNeutral
+ ? "hsl(var(--background))"
+ : contrastColorForHex(color.value);
+
+ return (
+
+ );
+ })}
+
+
+
+
+
+ Pick a theme
+
+
+ Choose a look that makes Sprout feel like yours.
+
+
+
+
+
+
+
+
+ {orderedThemes.map((name) => {
+ const vars = withAccentPreviewVars(
+ previewVarsByTheme[name] ??
+ getThemeFallbackPreviewVars(name),
+ accentColor,
+ );
+
+ return (
+ setTheme(name)}
+ vars={vars}
+ />
+ );
+ })}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- {mode === "image" ? (
-
-
{onDone && !isCustomColorPickerOpen ? (
@@ -835,7 +959,11 @@ export function ProfileAvatarEditor({
onClick={onDone}
type="button"
>
- {donePending ? "Saving..." : "Done"}
+ {donePending ? (
+
+ ) : (
+ "Done"
+ )}
) : null}
diff --git a/desktop/src/features/profile/useAvatarUpload.ts b/desktop/src/features/profile/useAvatarUpload.ts
index 3dba241fe1..6ada0fc242 100644
--- a/desktop/src/features/profile/useAvatarUpload.ts
+++ b/desktop/src/features/profile/useAvatarUpload.ts
@@ -1,4 +1,5 @@
import * as React from "react";
+import { flushSync } from "react-dom";
import { uploadMediaBytes } from "@/shared/api/tauri";
@@ -45,8 +46,10 @@ export function useAvatarUpload({
return;
}
- setIsUploading(true);
- setErrorMessage(null);
+ flushSync(() => {
+ setIsUploading(true);
+ setErrorMessage(null);
+ });
try {
const buffer = await file.arrayBuffer();
diff --git a/desktop/src/features/workspaces/ui/WelcomeSetup.tsx b/desktop/src/features/workspaces/ui/WelcomeSetup.tsx
index 3b996e7be6..06bafc8d91 100644
--- a/desktop/src/features/workspaces/ui/WelcomeSetup.tsx
+++ b/desktop/src/features/workspaces/ui/WelcomeSetup.tsx
@@ -1,113 +1,616 @@
import * as React from "react";
+import { Check, KeyRound, Sprout } from "lucide-react";
+import { flushSync } from "react-dom";
-import { getIdentity } from "@/shared/api/tauri";
+import {
+ getIdentity,
+ importIdentity as tauriImportIdentity,
+} from "@/shared/api/tauri";
+import {
+ type OnboardingTransitionDirection,
+ OnboardingSlideTransition,
+} from "@/features/onboarding/ui/OnboardingSlideTransition";
+import { cn } from "@/shared/lib/cn";
+import { nsecToNpub, shortenNpub } from "@/shared/lib/nostrUtils";
import { Button } from "@/shared/ui/button";
import { Input } from "@/shared/ui/input";
+import { Spinner } from "@/shared/ui/spinner";
+import { StepProgress } from "@/shared/ui/step-progress";
+import { useSystemColorScheme } from "@/shared/theme/useSystemColorScheme";
-import { initFirstWorkspace, deriveWorkspaceName } from "../workspaceStorage";
+import type { Workspace } from "../types";
+import { initFirstWorkspace } from "../workspaceStorage";
-const LOCAL_RELAY_URL = "ws://localhost:3000";
+type WelcomeSetupPage = "welcome" | "create-workspace" | "nostr-key";
+type WelcomeTransitionMode = "initial" | OnboardingTransitionDirection;
type WelcomeSetupProps = {
defaultRelayUrl: string;
- onComplete: () => void;
+ initialTransitionMode?: WelcomeTransitionMode;
+ onComplete: (workspace: Workspace) => void;
};
-export function WelcomeSetup({
- defaultRelayUrl,
- onComplete,
-}: WelcomeSetupProps) {
- const isInternalBuild = defaultRelayUrl !== LOCAL_RELAY_URL;
- const [relayUrl, setRelayUrl] = React.useState(defaultRelayUrl);
- const [isConnecting, setIsConnecting] = React.useState(false);
- const [error, setError] = React.useState
(null);
+const DEFAULT_WORKSPACE_HANDOFF_MIN_MS = 200;
+const NOSTR_KEY_FILE_MAX_BYTES = 1024;
- const handleConnect = React.useCallback(async () => {
- const trimmedUrl = relayUrl.trim();
- if (!trimmedUrl) {
- setError("Please enter a relay URL.");
+function wait(ms: number) {
+ return new Promise((resolve) => {
+ window.setTimeout(resolve, ms);
+ });
+}
+
+function NostrKeyImportPage({
+ connectionError,
+ disabled,
+ onBack,
+ onImport,
+}: {
+ connectionError: string | null;
+ disabled: boolean;
+ onBack: () => void;
+ onImport: (nsec: string) => Promise;
+}) {
+ const [nsecInput, setNsecInput] = React.useState("");
+ const [isImporting, setIsImporting] = React.useState(false);
+ const [importError, setImportError] = React.useState(null);
+ const [isDragging, setIsDragging] = React.useState(false);
+ const inputRef = React.useRef(null);
+ const fileInputRef = React.useRef(null);
+ const previewNpub = React.useMemo(() => nsecToNpub(nsecInput), [nsecInput]);
+ const trimmedInput = nsecInput.trim();
+ const hasInput = trimmedInput.length > 0;
+ const isValid = previewNpub !== null;
+ const isBusy = disabled || isImporting;
+ const showInvalidHint = hasInput && !isValid && trimmedInput.length >= 5;
+ const errorMessage = importError ?? connectionError;
+
+ React.useLayoutEffect(() => {
+ inputRef.current?.focus();
+ }, []);
+
+ const openFilePicker = React.useCallback(() => {
+ if (isBusy) {
return;
}
- setIsConnecting(true);
- setError(null);
+ fileInputRef.current?.click();
+ }, [isBusy]);
+
+ const handleFiles = React.useCallback(async (files: FileList | null) => {
+ const file = files?.[0];
+ if (!file) {
+ return;
+ }
+
+ if (file.size > NOSTR_KEY_FILE_MAX_BYTES) {
+ setImportError(
+ "That file is too large to be a key. Drop a .key file or paste your nsec.",
+ );
+ return;
+ }
try {
- // We snapshot only the pubkey for display purposes (workspace switcher
- // labels, etc.). The private key lives on disk in `identity.key` and
- // is the single source of truth — never copied into localStorage.
- const identity = await getIdentity();
- initFirstWorkspace(trimmedUrl, identity.pubkey);
-
- // The reload triggered by onComplete() will re-run useWorkspaceInit,
- // which calls applyWorkspace with the saved config. No need to apply here.
- onComplete();
- } catch (err) {
- setError(
- err instanceof Error ? err.message : "Failed to connect. Try again.",
+ const text = await file.text();
+ const firstLine =
+ text.split(/\r?\n/).find((line) => line.trim().length > 0) ?? "";
+ setNsecInput(firstLine.trim());
+ setImportError(null);
+ } catch (error) {
+ setImportError(
+ error instanceof Error ? error.message : "Couldn't read that file.",
);
- setIsConnecting(false);
}
- }, [relayUrl, onComplete]);
+ }, []);
- const workspaceName = React.useMemo(
- () => deriveWorkspaceName(relayUrl.trim() || LOCAL_RELAY_URL),
- [relayUrl],
- );
+ const handleSubmit = React.useCallback(async () => {
+ if (!previewNpub) {
+ setImportError(
+ "That doesn't look like a valid nsec. Paste an nsec1 key.",
+ );
+ return;
+ }
+
+ setIsImporting(true);
+ setImportError(null);
+
+ try {
+ await onImport(trimmedInput);
+ } catch (error) {
+ setImportError(
+ error instanceof Error ? error.message : "Failed to import key.",
+ );
+ } finally {
+ setIsImporting(false);
+ }
+ }, [onImport, previewNpub, trimmedInput]);
return (
-
-
-
- Sprout
-
-
- Welcome
+
+
+
+ Continue using Nostr
-
- {isInternalBuild
- ? "Connect to your workspace to get started."
- : "Running a local relay? Connect now. Or enter a custom relay URL."}
+
+ Import an existing Nostr private key to use that identity with Sprout.
+
- {!isInternalBuild ? (
-
-
-
{
- setRelayUrl(e.target.value);
- setError(null);
- }}
- placeholder="ws://localhost:3000"
- type="url"
- value={relayUrl}
- />
+
+
+ );
+}
+
+export function WelcomeSetup({
+ defaultRelayUrl,
+ initialTransitionMode = "initial",
+ onComplete,
+}: WelcomeSetupProps) {
+ const [page, setPage] = React.useState
("welcome");
+ const [transitionMode, setTransitionMode] =
+ React.useState(initialTransitionMode);
+ const [customWorkspaceName, setCustomWorkspaceName] = React.useState("");
+ const [customRelayUrl, setCustomRelayUrl] = React.useState("");
+ const [isConnecting, setIsConnecting] = React.useState(false);
+ const [error, setError] = React.useState(null);
+ const systemColorScheme = useSystemColorScheme();
+
+ const handleConnect = React.useCallback(
+ async (relayUrl: string, workspaceName?: string, pubkey?: string) => {
+ const trimmedUrl = relayUrl.trim();
+ if (!trimmedUrl) {
+ setError("Please enter a workspace URL.");
+ return;
+ }
+
+ const handoffStartedAt = performance.now();
+ flushSync(() => {
+ setIsConnecting(true);
+ setError(null);
+ });
+
+ try {
+ // We snapshot only the pubkey for display purposes (workspace switcher
+ // labels, etc.). The private key lives on disk in `identity.key` and
+ // is the single source of truth — never copied into localStorage.
+ const identityPubkey = pubkey ?? (await getIdentity()).pubkey;
+ const workspace = initFirstWorkspace(
+ trimmedUrl,
+ identityPubkey,
+ workspaceName,
+ );
+
+ if (!workspaceName) {
+ const elapsedMs = performance.now() - handoffStartedAt;
+ if (elapsedMs < DEFAULT_WORKSPACE_HANDOFF_MIN_MS) {
+ await wait(DEFAULT_WORKSPACE_HANDOFF_MIN_MS - elapsedMs);
+ }
+ }
+
+ // The parent moves this workspace into React state so first-run setup
+ // can continue without a full page reload.
+ onComplete(workspace);
+ } catch (err) {
+ setError(
+ err instanceof Error ? err.message : "Failed to connect. Try again.",
+ );
+ setIsConnecting(false);
+ }
+ },
+ [onComplete],
+ );
+
+ const handleNostrImport = React.useCallback(
+ async (nsec: string) => {
+ const identity = await tauriImportIdentity(nsec);
+ await handleConnect(defaultRelayUrl, undefined, identity.pubkey);
+ },
+ [defaultRelayUrl, handleConnect],
+ );
+
+ const handleCustomWorkspaceSubmit = React.useCallback(
+ (event: React.FormEvent) => {
+ event.preventDefault();
+ const trimmedName = customWorkspaceName.trim();
+ const trimmedUrl = customRelayUrl.trim();
+ if (!trimmedName) {
+ setError("Please enter a workspace name.");
+ return;
+ }
+ if (!trimmedUrl) {
+ setError("Please enter a workspace URL.");
+ return;
+ }
+ void handleConnect(trimmedUrl, trimmedName);
+ },
+ [customRelayUrl, customWorkspaceName, handleConnect],
+ );
+
+ const showCreateWorkspacePage = React.useCallback(() => {
+ setError(null);
+ setTransitionMode("forward");
+ setPage("create-workspace");
+ }, []);
+
+ const showNostrKeyPage = React.useCallback(() => {
+ setError(null);
+ setTransitionMode("forward");
+ setPage("nostr-key");
+ }, []);
+
+ const showWelcomePage = React.useCallback(() => {
+ setError(null);
+ setTransitionMode("backward");
+ setPage("welcome");
+ }, []);
+
+ const currentStep =
+ page === "welcome" ? (isConnecting ? 2 : 1) : page === "nostr-key" ? 1 : 2;
+ const transitionDirection =
+ transitionMode === "backward" ? "backward" : "forward";
+ const welcomeEffect =
+ transitionMode === "backward" ? "line-slide" : "mask-reveal-up";
+
+ return (
+
+
+
+
+ {page === "welcome" ? (
+
+
+
+
+
+
+ Welcome to Sprout
+
+
+ Choose your first workspace to get started.
+
+
+
+
+
+
+
+
+
+
+ {error ? (
+
+ ) : null}
+
+ ) : page === "create-workspace" ? (
+
+
+
+ Join a workspace
+
+
+ Workspaces are where teammates and agents collaborate across
+ channels, DMs, and shared projects.
+
+
+ ) : (
+
+ )}
+ {Array.from({ length: safeTotalSteps }, (_, index) => {
+ const step = index + 1;
+ const isActive = step === safeCurrentStep;
+ const isComplete = step < safeCurrentStep;
+
+ return (
+
+ );
+ })}
+
+ );
+}
diff --git a/desktop/src/testing/e2eBridge.ts b/desktop/src/testing/e2eBridge.ts
index 60acfeacda..b1ad96911c 100644
--- a/desktop/src/testing/e2eBridge.ts
+++ b/desktop/src/testing/e2eBridge.ts
@@ -1,6 +1,7 @@
-import { hexToBytes } from "@noble/hashes/utils.js";
+import { bytesToHex, hexToBytes } from "@noble/hashes/utils.js";
import { mockIPC, mockWindows } from "@tauri-apps/api/mocks";
-import { finalizeEvent } from "nostr-tools/pure";
+import { decode } from "nostr-tools/nip19";
+import { finalizeEvent, getPublicKey } from "nostr-tools/pure";
import { parse as yamlParse } from "yaml";
import type { RelayEvent } from "@/shared/api/types";
@@ -1621,6 +1622,44 @@ function readStoredIdentityOverride(): TestIdentity | undefined {
}
}
+function writeStoredIdentityOverride(identity: TestIdentity) {
+ window.localStorage.setItem(
+ E2E_IDENTITY_OVERRIDE_STORAGE_KEY,
+ JSON.stringify(identity),
+ );
+}
+
+function importMockIdentity(nsec: string) {
+ const decoded = decode(nsec.trim());
+ if (decoded.type !== "nsec") {
+ throw new Error("Invalid Nostr private key.");
+ }
+
+ const privateKey = bytesToHex(decoded.data);
+ const pubkey = getPublicKey(decoded.data);
+ const username = mockDisplayNames.get(pubkey) ?? "";
+ const identity = {
+ privateKey,
+ pubkey,
+ username,
+ };
+ writeStoredIdentityOverride(identity);
+ if (!mockProfiles.has(pubkey)) {
+ mockProfiles.set(pubkey, {
+ pubkey,
+ display_name: username || null,
+ avatar_url: null,
+ about: null,
+ nip05_handle: null,
+ });
+ }
+
+ return {
+ pubkey,
+ display_name: username,
+ };
+}
+
function isRelayMode(config: E2eConfig | undefined): boolean {
return config?.mode === "relay";
}
@@ -2609,27 +2648,27 @@ async function handleUpdateProfile(
}
const profile = ensureMockProfile(config);
- const nextDisplayName = args.displayName?.trim();
- const nextAvatarUrl = args.avatarUrl?.trim();
- const nextAbout = args.about?.trim();
- const nextNip05Handle = args.nip05Handle?.trim();
+ const hasDisplayNameUpdate = typeof args.displayName === "string";
+ const hasAvatarUrlUpdate = typeof args.avatarUrl === "string";
+ const hasAboutUpdate = typeof args.about === "string";
+ const hasNip05HandleUpdate = typeof args.nip05Handle === "string";
+ const nextDisplayName = args.displayName?.trim() ?? "";
+ const nextAvatarUrl = args.avatarUrl?.trim() ?? "";
+ const nextAbout = args.about?.trim() ?? "";
+ const nextNip05Handle = args.nip05Handle?.trim() ?? "";
- if (nextDisplayName && nextDisplayName !== profile.display_name) {
- profile.display_name = nextDisplayName;
- applyMockDisplayName(profile.pubkey, nextDisplayName);
+ if (hasDisplayNameUpdate && nextDisplayName !== profile.display_name) {
+ profile.display_name = nextDisplayName || null;
+ applyMockDisplayName(profile.pubkey, profile.display_name);
}
- if (nextAvatarUrl && nextAvatarUrl !== profile.avatar_url) {
- profile.avatar_url = nextAvatarUrl;
+ if (hasAvatarUrlUpdate && nextAvatarUrl !== profile.avatar_url) {
+ profile.avatar_url = nextAvatarUrl || null;
}
- if (typeof nextAbout === "string" && nextAbout !== profile.about) {
- profile.about = nextAbout;
+ if (hasAboutUpdate && nextAbout !== profile.about) {
+ profile.about = nextAbout || null;
}
- if (
- typeof nextNip05Handle === "string" &&
- nextNip05Handle !== profile.nip05_handle
- ) {
- profile.nip05_handle =
- nextNip05Handle.length > 0 ? nextNip05Handle : null;
+ if (hasNip05HandleUpdate && nextNip05Handle !== profile.nip05_handle) {
+ profile.nip05_handle = nextNip05Handle || null;
}
return cloneProfile(profile);
@@ -5503,6 +5542,10 @@ export function maybeInstallE2eTauriMocks() {
return DEFAULT_MOCK_IDENTITY;
case "get_nsec":
return "nsec1mock000000000000000000000000000000000000000000000000000000";
+ case "import_identity":
+ return importMockIdentity(
+ (payload as { nsec?: string } | null)?.nsec ?? "",
+ );
case "apply_workspace":
return;
case "get_profile":
diff --git a/desktop/tests/e2e/onboarding.spec.ts b/desktop/tests/e2e/onboarding.spec.ts
index ada5423e33..b7a09f4c42 100644
--- a/desktop/tests/e2e/onboarding.spec.ts
+++ b/desktop/tests/e2e/onboarding.spec.ts
@@ -1,4 +1,6 @@
+import { hexToBytes } from "@noble/hashes/utils.js";
import { expect, test, type Page } from "@playwright/test";
+import { nsecEncode } from "nostr-tools/nip19";
import { installMockBridge, TEST_IDENTITIES } from "../helpers/bridge";
@@ -9,10 +11,24 @@ const BLANK_TYLER_IDENTITY = {
...TEST_IDENTITIES.tyler,
username: "",
};
+const BLANK_AVATAR_PLACEHOLDER_IDENTITY = {
+ ...TEST_IDENTITIES.tyler,
+ pubkey: "1".repeat(64),
+ username: "",
+};
+const BLANK_AVATAR_EMOJI_IDENTITY = {
+ ...TEST_IDENTITIES.tyler,
+ pubkey: "2".repeat(64),
+ username: "",
+};
const FIRST_RUN_ALICE = {
...TEST_IDENTITIES.alice,
username: "",
};
+const FIRST_RUN_KENNY = {
+ ...TEST_IDENTITIES.tyler,
+ username: "Kenny QA",
+};
type TestIdentity = {
privateKey: string;
@@ -55,6 +71,25 @@ async function expectNoHomeSeenEntries(page: Page) {
await expect.poll(async () => readHomeSeenStorageKeys(page)).toEqual([]);
}
+async function selectFirstEmojiFromPicker(page: Page) {
+ const picker = page.locator("em-emoji-picker");
+ await expect(picker).toBeVisible();
+ await expect
+ .poll(() =>
+ picker.evaluate((element) =>
+ Boolean(element.shadowRoot?.querySelector(".scroll button")),
+ ),
+ )
+ .toBe(true);
+ await picker.evaluate((element) => {
+ const button = element.shadowRoot?.querySelector(".scroll button");
+ if (!(button instanceof HTMLElement)) {
+ throw new Error("Emoji picker did not render an emoji button.");
+ }
+ button.click();
+ });
+}
+
async function expectHomeSeenCount(page: Page, expectedCount: number) {
await expect
.poll(async () => {
@@ -83,6 +118,27 @@ async function expectHomeView(page: Page) {
await expect(page.getByTestId("home-inbox-list")).toBeVisible();
}
+async function getMockProfile(page: Page) {
+ return page.evaluate(async () => {
+ const invoke = (
+ window as Window & {
+ __SPROUT_E2E_INVOKE_MOCK_COMMAND__?: (
+ command: string,
+ payload?: Record,
+ ) => Promise;
+ }
+ ).__SPROUT_E2E_INVOKE_MOCK_COMMAND__;
+ if (!invoke) {
+ throw new Error("Mock invoke bridge is unavailable.");
+ }
+
+ return (await invoke("get_profile")) as {
+ avatar_url: string | null;
+ display_name: string | null;
+ };
+ });
+}
+
async function expectIncompleteOnboarding(page: Page) {
await expect(page.getByTestId("onboarding-gate")).toBeVisible();
await expectShellHidden(page);
@@ -92,6 +148,19 @@ async function expectIncompleteOnboarding(page: Page) {
async function continueToSetupPage(page: Page) {
await page.getByTestId("onboarding-next").click();
+ await expect(page.getByTestId("onboarding-page-avatar")).toBeVisible();
+ await page
+ .getByTestId("onboarding-avatar-url")
+ .fill("https://example.com/onboarding-avatar.png");
+ await page.getByTestId("onboarding-next").click();
+ await expect(page.getByTestId("onboarding-page-theme")).toBeVisible();
+ await page.getByTestId("onboarding-theme-option-github-light").click();
+ await expect
+ .poll(() =>
+ page.evaluate(() => window.localStorage.getItem("sprout-theme")),
+ )
+ .toBe("github-light");
+ await page.getByTestId("onboarding-next").click();
await expect(page.getByTestId("onboarding-page-2")).toBeVisible();
}
@@ -108,6 +177,115 @@ test("completed users skip the loading gate while profile is still settling", as
await expectHomeView(page);
});
+test("first-run default workspace handoff gives immediate stepper feedback", async ({
+ page,
+}) => {
+ await seedActiveIdentity(page, FIRST_RUN_KENNY);
+ await installMockBridge(
+ page,
+ {
+ profileReadDelayMs: 2_000,
+ },
+ { skipOnboardingSeed: true, skipWorkspaceSeed: true },
+ );
+ await page.goto("/");
+
+ await expect(page.getByText("Welcome to Sprout")).toBeVisible();
+ await page
+ .getByRole("button", { name: "Continue with Block Inc. workspace" })
+ .click();
+
+ await page.waitForTimeout(80);
+ await expect(page.getByRole("button", { name: "Connecting..." })).toHaveCount(
+ 0,
+ );
+ await expect(
+ page.getByRole("button", { name: "Continue with Block Inc. workspace" }),
+ ).toBeVisible();
+ await expect(page.getByRole("progressbar")).toHaveAttribute(
+ "aria-valuenow",
+ "2",
+ );
+ await page.waitForTimeout(240);
+ await expect(page.getByTestId("welcome-continue-nostr")).toBeVisible();
+ await expect(page.getByRole("progressbar")).toHaveAttribute(
+ "aria-valuenow",
+ "2",
+ );
+
+ const nameInput = page.getByTestId("onboarding-display-name");
+ await expect(nameInput).toHaveValue("Kenny QA");
+ await expect(page.getByRole("progressbar")).toHaveAttribute(
+ "aria-valuenow",
+ "2",
+ );
+ await expect(nameInput).toHaveAttribute("autocomplete", "off");
+ await expect(page.getByTestId("onboarding-back")).toBeVisible();
+});
+
+test("welcome can continue using an existing Nostr key", async ({ page }) => {
+ await installMockBridge(page, undefined, {
+ skipOnboardingSeed: true,
+ skipWorkspaceSeed: true,
+ });
+ await page.goto("/");
+
+ await page.getByTestId("welcome-continue-nostr").click();
+ await expect(
+ page.getByRole("heading", { name: "Continue using Nostr" }),
+ ).toBeVisible();
+
+ const importedNsec = nsecEncode(hexToBytes(TEST_IDENTITIES.alice.privateKey));
+ await page.getByTestId("welcome-nostr-nsec-input").fill(importedNsec);
+ await expect(page.getByTestId("welcome-nostr-npub-preview")).toBeVisible();
+ await page.getByTestId("welcome-nostr-submit").click();
+
+ await expect(page.getByTestId("onboarding-display-name")).toHaveValue(
+ "alice",
+ );
+ await expect
+ .poll(() =>
+ page.evaluate(() => {
+ const rawWorkspaces = window.localStorage.getItem("sprout-workspaces");
+ const workspaces = rawWorkspaces
+ ? (JSON.parse(rawWorkspaces) as Array<{ pubkey?: string }>)
+ : [];
+ return workspaces[0]?.pubkey ?? null;
+ }),
+ )
+ .toBe(TEST_IDENTITIES.alice.pubkey);
+ await expect
+ .poll(() =>
+ page.evaluate((storageKey) => {
+ const rawIdentity = window.localStorage.getItem(storageKey);
+ const identity = rawIdentity
+ ? (JSON.parse(rawIdentity) as { pubkey?: string })
+ : null;
+ return identity?.pubkey ?? null;
+ }, E2E_IDENTITY_OVERRIDE_STORAGE_KEY),
+ )
+ .toBe(TEST_IDENTITIES.alice.pubkey);
+});
+
+test("welcome presents custom workspace setup as joining a workspace", async ({
+ page,
+}) => {
+ await installMockBridge(page, undefined, {
+ skipOnboardingSeed: true,
+ skipWorkspaceSeed: true,
+ });
+ await page.goto("/");
+
+ await page.getByRole("button", { name: "Join a workspace" }).click();
+
+ await expect(
+ page.getByRole("heading", { name: "Join a workspace" }),
+ ).toBeVisible();
+ await expect(
+ page.getByRole("button", { name: "Join a workspace" }),
+ ).toBeVisible();
+});
+
test("identity fallback text does not count as a real onboarding name", async ({
page,
}) => {
@@ -115,14 +293,53 @@ test("identity fallback text does not count as a real onboarding name", async ({
await page.goto("/");
await expectIncompleteOnboarding(page);
- await expect(page.getByTestId("onboarding-avatar-upload")).toHaveText(
- "Drop an image or browse",
- );
- await expect(page.getByTestId("onboarding-avatar-url")).toHaveValue("");
await expect(page.getByTestId("onboarding-next")).toBeDisabled();
});
-test("page 1 accepts an avatar URL as the secondary avatar path", async ({
+test("avatar step uses an add-image placeholder before an avatar is chosen", async ({
+ page,
+}) => {
+ await seedActiveIdentity(page, BLANK_AVATAR_PLACEHOLDER_IDENTITY);
+ await installMockBridge(page, undefined, { skipOnboardingSeed: true });
+ await page.goto("/");
+
+ await page.getByTestId("onboarding-display-name").fill("Morty QA");
+ await page.getByTestId("onboarding-next").click();
+
+ await expect(page.getByTestId("onboarding-page-avatar")).toBeVisible();
+ const preview = page.getByTestId("onboarding-avatar-preview");
+ await expect(preview).toBeVisible();
+ await expect(preview).toHaveAttribute("aria-label", "Add a display image");
+ await expect(preview).toHaveClass(/border-dashed/);
+});
+
+test("avatar step reveals preset backgrounds after the first emoji pick", async ({
+ page,
+}) => {
+ await seedActiveIdentity(page, BLANK_AVATAR_EMOJI_IDENTITY);
+ await installMockBridge(page, undefined, { skipOnboardingSeed: true });
+ await page.goto("/");
+
+ await page.getByTestId("onboarding-display-name").fill("Morty QA");
+ await page.getByTestId("onboarding-next").click();
+ await expect(page.getByTestId("onboarding-page-avatar")).toBeVisible();
+
+ await page.getByRole("tab", { name: "Emoji" }).click();
+
+ const colorGridShell = page.getByTestId("onboarding-avatar-color-grid-shell");
+ await expect(colorGridShell).toHaveAttribute("aria-hidden", "true");
+
+ await selectFirstEmojiFromPicker(page);
+
+ await expect(colorGridShell).toHaveAttribute("aria-hidden", "false");
+ await expect(page.getByTestId("onboarding-avatar-color-grid")).toBeVisible();
+ await expect(page.getByTestId("onboarding-avatar-preview")).not.toHaveCSS(
+ "background-color",
+ "rgb(255, 255, 255)",
+ );
+});
+
+test("avatar step accepts an avatar URL before theme selection", async ({
page,
}) => {
await seedActiveIdentity(page, BLANK_TYLER_IDENTITY);
@@ -130,6 +347,8 @@ test("page 1 accepts an avatar URL as the secondary avatar path", async ({
await page.goto("/");
await page.getByTestId("onboarding-display-name").fill("Morty QA");
+ await page.getByTestId("onboarding-next").click();
+ await expect(page.getByTestId("onboarding-page-avatar")).toBeVisible();
await page
.getByTestId("onboarding-avatar-url")
.fill("https://example.com/morty.png");
@@ -137,13 +356,119 @@ test("page 1 accepts an avatar URL as the secondary avatar path", async ({
const preview = page.getByTestId("onboarding-avatar-preview");
await expect(preview).toBeVisible();
const box = await preview.boundingBox();
- expect(box?.width).toBeCloseTo(80, 0);
- expect(box?.height).toBeCloseTo(80, 0);
+ expect(box?.width).toBeCloseTo(192, 0);
+ expect(box?.height).toBeCloseTo(192, 0);
- await continueToSetupPage(page);
+ await page.getByTestId("onboarding-next").click();
+ await expect(page.getByTestId("onboarding-page-theme")).toBeVisible();
+ await page.getByTestId("onboarding-theme-option-github-light").click();
+ await expect
+ .poll(() =>
+ page.evaluate(() => window.localStorage.getItem("sprout-theme")),
+ )
+ .toBe("github-light");
+ await page.getByTestId("onboarding-next").click();
+ await expect(page.getByTestId("onboarding-page-2")).toBeVisible();
await expect(page.getByTestId("onboarding-runtime-goose")).toBeVisible();
});
+test("failed avatar saves can continue without saving the avatar", async ({
+ page,
+}) => {
+ await seedActiveIdentity(page, BLANK_TYLER_IDENTITY);
+ await installMockBridge(page, {}, { skipOnboardingSeed: true });
+ await page.goto("/");
+
+ await page.getByTestId("onboarding-display-name").fill("Morty QA");
+ await page.getByTestId("onboarding-next").click();
+ await expect(page.getByTestId("onboarding-page-avatar")).toBeVisible();
+ await page
+ .getByTestId("onboarding-avatar-url")
+ .fill("https://example.com/morty.png");
+ await page.evaluate(() => {
+ const testWindow = window as Window & {
+ __SPROUT_E2E__?: { mock?: { profileUpdateError?: string } };
+ };
+ if (testWindow.__SPROUT_E2E__?.mock) {
+ testWindow.__SPROUT_E2E__.mock.profileUpdateError =
+ "Temporary avatar sync failure.";
+ }
+ });
+
+ await page.getByTestId("onboarding-next").click();
+
+ await expect(page.getByText("Temporary avatar sync failure.")).toBeVisible();
+ await expect(
+ page.getByTestId("onboarding-next-without-saving"),
+ ).toBeVisible();
+ await page.getByTestId("onboarding-next-without-saving").click();
+
+ await expect(page.getByTestId("onboarding-page-theme")).toBeVisible();
+});
+
+test("theme step offers skip instead of going back", async ({ page }) => {
+ await seedActiveIdentity(page, BLANK_TYLER_IDENTITY);
+ await installMockBridge(page, undefined, { skipOnboardingSeed: true });
+ await page.goto("/");
+
+ await page.getByTestId("onboarding-display-name").fill("Morty QA");
+ await page.getByTestId("onboarding-next").click();
+ await expect(page.getByTestId("onboarding-page-avatar")).toBeVisible();
+ await page
+ .getByTestId("onboarding-avatar-url")
+ .fill("https://example.com/morty.png");
+ await expect
+ .poll(() =>
+ page.evaluate(() => window.localStorage.getItem("sprout-theme")),
+ )
+ .toBe("github-light-default");
+ await expect
+ .poll(() =>
+ page.evaluate(() => window.localStorage.getItem("sprout-accent-color")),
+ )
+ .toBe("neutral");
+ await expect
+ .poll(() =>
+ page.evaluate(() => document.documentElement.classList.contains("light")),
+ )
+ .toBe(true);
+ await page.getByTestId("onboarding-next").click();
+
+ await expect(page.getByTestId("onboarding-page-theme")).toBeVisible();
+ await expect
+ .poll(() =>
+ page.evaluate(() => window.localStorage.getItem("sprout-theme")),
+ )
+ .toBe("github-light-default");
+ await expect
+ .poll(() =>
+ page.evaluate(() => window.localStorage.getItem("sprout-accent-color")),
+ )
+ .toBe("neutral");
+ await expect(
+ page.getByTestId("onboarding-theme-option-github-light-default"),
+ ).toHaveAttribute("aria-pressed", "true");
+ await expect(
+ page.getByTestId("onboarding-accent-color-neutral"),
+ ).toHaveAttribute("aria-pressed", "true");
+ await page.getByTestId("onboarding-accent-color-blue").click();
+ await expect
+ .poll(() =>
+ page.evaluate(() => window.localStorage.getItem("sprout-accent-color")),
+ )
+ .toBe("#3b82f6");
+ await page.getByTestId("onboarding-accent-color-neutral").click();
+ await expect
+ .poll(() =>
+ page.evaluate(() => window.localStorage.getItem("sprout-accent-color")),
+ )
+ .toBe("neutral");
+ await expect(page.getByTestId("onboarding-back")).toHaveCount(0);
+ await page.getByTestId("onboarding-skip").click();
+
+ await expect(page.getByTestId("onboarding-page-2")).toBeVisible();
+});
+
test("avatar upload rejects a file whose server-detected MIME is not an image", async ({
page,
}) => {
@@ -171,13 +496,16 @@ test("avatar upload rejects a file whose server-detected MIME is not an image",
);
await page.goto("/");
+ await page.getByTestId("onboarding-display-name").fill("Morty QA");
+ await page.getByTestId("onboarding-next").click();
+ await expect(page.getByTestId("onboarding-page-avatar")).toBeVisible();
await page.getByTestId("onboarding-avatar-input").setInputFiles({
name: "looks-like.png",
mimeType: "image/png",
buffer: Buffer.from("not really a png"),
});
- await expect(page.getByTestId("onboarding-avatar-error")).toContainText(
+ await expect(page.getByRole("alert")).toContainText(
"Choose a PNG, JPG, GIF, or WebP image.",
);
await expect(page.getByTestId("onboarding-avatar-url")).toHaveValue("");
@@ -205,6 +533,9 @@ test("avatar upload accepts a file whose server-detected MIME is an image", asyn
);
await page.goto("/");
+ await page.getByTestId("onboarding-display-name").fill("Morty QA");
+ await page.getByTestId("onboarding-next").click();
+ await expect(page.getByTestId("onboarding-page-avatar")).toBeVisible();
await page.getByTestId("onboarding-avatar-input").setInputFiles({
name: "avatar.png",
mimeType: "image/png",
@@ -215,7 +546,7 @@ test("avatar upload accepts a file whose server-detected MIME is an image", asyn
await expect(page.getByTestId("onboarding-avatar-error")).toHaveCount(0);
});
-test("first-run onboarding keeps the shell hidden through both pages and only marks Home seen after finish", async ({
+test("first-run onboarding keeps the shell hidden through setup and only marks Home seen after finish", async ({
page,
}) => {
await seedActiveIdentity(page, FIRST_RUN_ALICE);
@@ -239,15 +570,20 @@ test("first-run onboarding keeps the shell hidden through both pages and only ma
await expectHomeSeenCount(page, 2);
});
-test("existing relay profile auto-skips onboarding without localStorage completion", async ({
+test("existing relay profile prefills the name step without localStorage completion", async ({
page,
}) => {
await seedActiveIdentity(page, TEST_IDENTITIES.alice);
await installMockBridge(page, undefined, { skipOnboardingSeed: true });
await page.goto("/");
- await expect(page.getByTestId("onboarding-gate")).toHaveCount(0);
- await expectHomeView(page);
+ await expect(page.getByTestId("onboarding-gate")).toBeVisible();
+ await expectShellHidden(page);
+ await expect(page.getByTestId("onboarding-display-name")).toHaveValue(
+ "alice",
+ );
+ await expect(page.getByTestId("onboarding-next")).toBeEnabled();
+ await expect(page.getByTestId("onboarding-back")).toHaveCount(0);
});
test("finishing onboarding auto-joins the #general channel for a new member", async ({
@@ -327,3 +663,89 @@ test("failed first profile saves can be skipped for the current session", async
await expect(page.getByTestId("onboarding-gate")).toHaveCount(0);
await expectHomeView(page);
});
+
+test("failed saved profile saves can continue without retrying the display name", async ({
+ page,
+}) => {
+ await seedActiveIdentity(page, TEST_IDENTITIES.alice);
+ await installMockBridge(
+ page,
+ {
+ profileUpdateError: "Temporary profile sync failure.",
+ },
+ { skipOnboardingSeed: true },
+ );
+ await page.goto("/");
+
+ await expect(page.getByTestId("onboarding-display-name")).toHaveValue(
+ "alice",
+ );
+ await page.getByTestId("onboarding-display-name").fill("Alice Draft");
+ await page.getByTestId("onboarding-next").click();
+
+ await expect(page.getByText("Temporary profile sync failure.")).toBeVisible();
+ await page.getByTestId("onboarding-next-without-saving").click();
+
+ await expect(page.getByTestId("onboarding-page-avatar")).toBeVisible();
+ const avatarUrl = "https://example.com/alice-onboarding-avatar.png";
+ await page.getByTestId("onboarding-avatar-url").fill(avatarUrl);
+ await page.getByTestId("onboarding-next").click();
+
+ await expect(page.getByTestId("onboarding-page-theme")).toBeVisible();
+ await expect(await getMockProfile(page)).toMatchObject({
+ avatar_url: avatarUrl,
+ display_name: "alice",
+ });
+});
+
+test("membership denial can import a different invited key", async ({
+ page,
+}) => {
+ await seedActiveIdentity(page, BLANK_TYLER_IDENTITY);
+ await installMockBridge(
+ page,
+ {
+ relayRole: null,
+ },
+ { skipOnboardingSeed: true },
+ );
+ await page.goto("/");
+
+ await page.getByTestId("onboarding-display-name").fill("Morty QA");
+ await page.getByTestId("onboarding-next").click();
+
+ await expect(page.getByTestId("membership-denied")).toBeVisible();
+ await page.getByTestId("membership-denied-change-key").click();
+
+ const importedNsec = nsecEncode(hexToBytes(TEST_IDENTITIES.alice.privateKey));
+ await page.getByTestId("membership-denied-nsec-input").fill(importedNsec);
+ await expect(
+ page.getByTestId("membership-denied-npub-preview"),
+ ).toBeVisible();
+ await page.getByTestId("membership-denied-import-key").click();
+
+ await expect
+ .poll(() =>
+ page.evaluate(
+ () =>
+ (window as Window & { __SPROUT_E2E_COMMANDS__?: string[] })
+ .__SPROUT_E2E_COMMANDS__ ?? [],
+ ),
+ )
+ .toEqual(expect.arrayContaining(["plugin:websocket|disconnect"]));
+ await expect(page.getByTestId("onboarding-page-1")).toBeVisible();
+ await expect
+ .poll(() =>
+ page.evaluate((storageKey) => {
+ const rawIdentity = window.localStorage.getItem(storageKey);
+ const identity = rawIdentity
+ ? (JSON.parse(rawIdentity) as { pubkey?: string })
+ : null;
+ return identity?.pubkey ?? null;
+ }, E2E_IDENTITY_OVERRIDE_STORAGE_KEY),
+ )
+ .toBe(TEST_IDENTITIES.alice.pubkey);
+ await page.getByTestId("onboarding-next").click();
+
+ await expect(page.getByTestId("onboarding-page-avatar")).toBeVisible();
+});
diff --git a/desktop/tests/e2e/profile.spec.ts b/desktop/tests/e2e/profile.spec.ts
index 5b10d3cbc5..fd1a178481 100644
--- a/desktop/tests/e2e/profile.spec.ts
+++ b/desktop/tests/e2e/profile.spec.ts
@@ -445,6 +445,10 @@ test("snaps custom avatar colors to the dot grid", async ({ page }) => {
page.getByTestId("profile-avatar-custom-color-done"),
).toBeVisible();
+ const hueSlider = page.getByTestId("profile-avatar-custom-color-hue");
+ await hueSlider.press("Home");
+ await expect(hueSlider).toHaveAttribute("aria-valuenow", "0");
+
const spectrumBox = await spectrum.boundingBox();
if (!spectrumBox) {
throw new Error("Custom color spectrum did not render bounds.");
diff --git a/desktop/tests/helpers/bridge.ts b/desktop/tests/helpers/bridge.ts
index 92aac3ed5a..c0db1039e8 100644
--- a/desktop/tests/helpers/bridge.ts
+++ b/desktop/tests/helpers/bridge.ts
@@ -98,6 +98,7 @@ type BridgeOptions = {
relayHttpUrl?: string;
relayWsUrl?: string;
skipOnboardingSeed?: boolean;
+ skipWorkspaceSeed?: boolean;
/**
* When true (default), seed every preview feature in preview-features.json as
* enabled in localStorage so E2E tests can interact with gated UI without
@@ -165,9 +166,11 @@ export async function installBridge(page: Page, options: BridgeOptions) {
? TEST_IDENTITIES[options.user ?? "tyler"]
: undefined;
- // Always seed a workspace so useWorkspaceInit doesn't show WelcomeSetup.
+ // Most specs seed a workspace so useWorkspaceInit doesn't show WelcomeSetup.
// skipOnboardingSeed only controls the onboarding-completion flag.
- await seedDefaultWorkspace(page, options.relayWsUrl);
+ if (!options.skipWorkspaceSeed) {
+ await seedDefaultWorkspace(page, options.relayWsUrl);
+ }
if (!options.skipOnboardingSeed) {
await seedOnboardingCompletionForKnownIdentities(page);
}
@@ -264,12 +267,17 @@ export async function installBridge(page: Page, options: BridgeOptions) {
export async function installMockBridge(
page: Page,
mock?: MockBridgeOptions,
- options?: { skipOnboardingSeed?: boolean; seedPreviewFeatures?: boolean },
+ options?: {
+ skipOnboardingSeed?: boolean;
+ skipWorkspaceSeed?: boolean;
+ seedPreviewFeatures?: boolean;
+ },
) {
await installBridge(page, {
mode: "mock",
mock,
skipOnboardingSeed: options?.skipOnboardingSeed,
+ skipWorkspaceSeed: options?.skipWorkspaceSeed,
seedPreviewFeatures: options?.seedPreviewFeatures,
});
}