From f054df7366c45a9c5614f7b375e3eecf637e4e68 Mon Sep 17 00:00:00 2001 From: Wes Date: Thu, 16 Jul 2026 20:49:45 -0600 Subject: [PATCH] feat(desktop): reskin provider, config, community, profile, and team onboarding pages (#2003) Signed-off-by: Wes Co-authored-by: Pinky <44b8e82baa6e0e254e0208d68f335c283c94e7b78dd1fa10d5a49d3f13dd0435@sprout-oss.stage.blox.sqprod.co> Co-authored-by: Brain <21994759fc7a6fa6b965551d35cfd7897d262f2495467f2d78694ddcfa6a5c7e@sprout-oss.stage.blox.sqprod.co> --- .../agents/ui/GlobalAgentConfigFields.tsx | 82 +++- .../features/communities/ui/WelcomeSetup.tsx | 52 ++- .../onboarding/ui/CommunityOnboardingFlow.tsx | 207 +++++++--- .../onboarding/ui/DefaultConfigStep.tsx | 177 +++++++++ .../onboarding/ui/MachineOnboardingFlow.tsx | 19 +- .../onboarding/ui/OnboardingStepDots.tsx | 6 +- .../src/features/onboarding/ui/SetupStep.tsx | 373 ++++++------------ desktop/src/features/onboarding/ui/types.ts | 5 + .../e2e/onboarding-agent-defaults.spec.ts | 115 ++++-- 9 files changed, 647 insertions(+), 389 deletions(-) create mode 100644 desktop/src/features/onboarding/ui/DefaultConfigStep.tsx diff --git a/desktop/src/features/agents/ui/GlobalAgentConfigFields.tsx b/desktop/src/features/agents/ui/GlobalAgentConfigFields.tsx index a5d2335ac7..0b9dcc5aa6 100644 --- a/desktop/src/features/agents/ui/GlobalAgentConfigFields.tsx +++ b/desktop/src/features/agents/ui/GlobalAgentConfigFields.tsx @@ -23,8 +23,11 @@ import { BLOCK_BUILD_HIDDEN_PROVIDER_IDS, CUSTOM_PROVIDER_DROPDOWN_VALUE, getPersonaProviderOptions, + getProviderApiKeyEnvVar, + requiredCredentialEnvKeys, } from "@/features/agents/ui/personaDialogPickers"; import { AgentModelField } from "@/features/agents/ui/personaProviderModelFields"; +import { PersonaProviderApiKeyField } from "@/features/agents/ui/PersonaProviderApiKeyField"; import { usePersonaModelDiscovery } from "@/features/agents/ui/usePersonaModelDiscovery"; import { BUZZ_AGENT_THINKING_EFFORT, @@ -100,6 +103,25 @@ export function GlobalAgentConfigFields({ const providerValue = config.provider ?? ""; const providerForDiscovery = isCustomProvider ? "" : providerValue; + const credentialProvider = isCustomProvider ? "" : effectiveProvider; + const requiredEnvKeys = requiredCredentialEnvKeys( + "buzz-agent", + credentialProvider, + ); + const apiKeyEnvVar = getProviderApiKeyEnvVar(credentialProvider); + const advancedRequiredEnvKeys = requiredEnvKeys.filter( + (key) => + key !== apiKeyEnvVar && !bakedEnv.some((entry) => entry.key === key), + ); + const apiKeyValue = apiKeyEnvVar ? (config.env_vars[apiKeyEnvVar] ?? "") : ""; + const bakedEnvKeys = React.useMemo( + () => bakedEnv.map((entry) => entry.key), + [bakedEnv], + ); + const apiKeyInherited = + apiKeyEnvVar !== null && + apiKeyValue.length === 0 && + bakedEnvKeys.includes(apiKeyEnvVar); const { discoveredModelOptions, @@ -131,21 +153,32 @@ export function GlobalAgentConfigFields({ }); function handleProviderChange(value: string) { + const previousApiKey = getProviderApiKeyEnvVar(effectiveProvider); if (value === CUSTOM_PROVIDER_DROPDOWN_VALUE) { + const nextEnvVars = { ...config.env_vars }; + if (previousApiKey) delete nextEnvVars[previousApiKey]; onIsCustomProviderChange(true); + onConfigChange({ ...config, env_vars: nextEnvVars, provider: null }); return; } - if (value === AUTO_PROVIDER_DROPDOWN_VALUE || value === "") { - onIsCustomProviderChange(false); - onConfigChange({ ...config, provider: null }); - } else { - onIsCustomProviderChange(false); - onConfigChange({ - ...config, - provider: value, - model: value === "relay-mesh" ? config.model || "auto" : config.model, - }); + const nextProvider = + value === AUTO_PROVIDER_DROPDOWN_VALUE || value === "" ? null : value; + const nextApiKey = getProviderApiKeyEnvVar( + nextProvider ?? bakedProvider ?? "", + ); + const nextEnvVars = { ...config.env_vars }; + if (previousApiKey && previousApiKey !== nextApiKey) { + delete nextEnvVars[previousApiKey]; } + + onIsCustomProviderChange(false); + onConfigChange({ + ...config, + env_vars: nextEnvVars, + provider: nextProvider, + model: + nextProvider === "relay-mesh" ? config.model || "auto" : config.model, + }); } function handleCustomProviderInput(value: string) { @@ -168,10 +201,6 @@ export function GlobalAgentConfigFields({ onConfigChange({ ...config, env_vars: merged }); } - const bakedEnvKeys = React.useMemo( - () => bakedEnv.map((e) => e.key), - [bakedEnv], - ); // On internal Block builds, BUZZ_AGENT_PROVIDER is baked in and a boot // migration rewrites v1→v2. Hide the legacy v1 option so it is not offered // for new selections; OSS builds show it. @@ -237,6 +266,29 @@ export function GlobalAgentConfigFields({

+ {apiKeyEnvVar ? ( +
+ + onConfigChange({ + ...config, + env_vars: { ...config.env_vars, [apiKeyEnvVar]: value }, + }) + } + value={apiKeyValue} + /> +
+ ) : null} + {/* Model field */}
k !== BUZZ_AGENT_THINKING_EFFORT, diff --git a/desktop/src/features/communities/ui/WelcomeSetup.tsx b/desktop/src/features/communities/ui/WelcomeSetup.tsx index c911a629e7..988a87eb87 100644 --- a/desktop/src/features/communities/ui/WelcomeSetup.tsx +++ b/desktop/src/features/communities/ui/WelcomeSetup.tsx @@ -13,6 +13,7 @@ import { pubkeyToNpub } from "@/shared/lib/nostrUtils"; import { Button } from "@/shared/ui/button"; import { StartupWindowDragRegion } from "@/shared/ui/StartupWindowDragRegion"; import { useSystemColorScheme } from "@/shared/theme/useSystemColorScheme"; +import { OnboardingStepDots } from "@/features/onboarding/ui/OnboardingStepDots"; type WelcomeSetupPage = "welcome" | "join" | "invite"; type WelcomeTransitionMode = "initial" | OnboardingTransitionDirection; @@ -94,7 +95,8 @@ export function WelcomeSetup({ data-system-color-scheme={systemColorScheme} > -
+ +
{page === "welcome" ? ( - Buzz -

- Welcome to Buzz -

-

- Choose how you want to get started. -

-
+
+

+ Join or create a community +

+

+ Request access to an existing community or create a new one. +

+
+
{isLocalDevRelayUrl(defaultRelayUrl) ? null : ( - + )} - - - +
) : page === "join" ? ( diff --git a/desktop/src/features/onboarding/ui/CommunityOnboardingFlow.tsx b/desktop/src/features/onboarding/ui/CommunityOnboardingFlow.tsx index a48926902e..a6fe5f84a0 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 { Bot, Users } from "lucide-react"; +import { Plus, Users, X } from "lucide-react"; import { markCommunityOnboardingComplete, @@ -8,15 +8,69 @@ import { } from "@/features/onboarding/communityOnboarding"; import { initializeStarterChannels } from "@/features/onboarding/hooks"; import { useClaimInvite } from "@/features/onboarding/useClaimInvite"; -import { AvatarUpload } from "@/features/profile/ui/AvatarUpload"; import { ProfileAvatar } from "@/features/profile/ui/ProfileAvatar"; +import { + parseEmojiAvatarDataUrl, + ProfileAvatarEditor, +} from "@/features/profile/ui/ProfileAvatarEditor"; import { updateProfile } from "@/shared/api/tauriProfiles"; import { getIdentity } from "@/shared/api/tauriIdentity"; import { listPersonas } from "@/shared/api/tauriPersonas"; import type { AgentPersona } from "@/shared/api/types"; +import { cn } from "@/shared/lib/cn"; import { Button } from "@/shared/ui/button"; import { Input } from "@/shared/ui/input"; import { StartupWindowDragRegion } from "@/shared/ui/StartupWindowDragRegion"; +import { OnboardingStepDots } from "./OnboardingStepDots"; + +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, +}: { + avatarUrl: string; + onClick: () => void; + previewName: string; +}) { + const emojiAvatar = parseEmojiAvatarDataUrl(avatarUrl); + const hasAvatar = avatarUrl.trim().length > 0; + + return ( + + ); +} export function CommunityOnboardingFlow({ onConnect, @@ -28,6 +82,7 @@ export function CommunityOnboardingFlow({ const [displayName, setDisplayName] = React.useState(""); const [avatarUrl, setAvatarUrl] = React.useState(""); const [isUploadingAvatar, setIsUploadingAvatar] = React.useState(false); + const [isAvatarEditorOpen, setIsAvatarEditorOpen] = React.useState(false); const [starterPersonas, setStarterPersonas] = React.useState( [], ); @@ -102,13 +157,25 @@ export function CommunityOnboardingFlow({ } }; + const isProfileStage = transaction.stage === "profile"; + const isTeamStage = + transaction.stage === "team-intro" || transaction.stage === "finalizing"; + return (
-
+ {isProfileStage || isTeamStage ? ( + + ) : null} +
{transaction.stage === "claiming" || transaction.stage === "connecting" ? ( <> @@ -116,7 +183,7 @@ export function CommunityOnboardingFlow({

Joining {transaction.communityName}

-

+

{transaction.error ?? (transaction.stage === "claiming" ? "Accepting your invite…" @@ -124,74 +191,113 @@ export function CommunityOnboardingFlow({

{transaction.error ? ( - + ) : null} -
- ) : transaction.stage === "profile" ? ( - <> -

- How should you appear here? -

-

- Your name and avatar are specific to {transaction.communityName}. -

-
- setDisplayName(event.target.value)} - placeholder="Your name" - value={displayName} - /> - + + setAvatarUrl("")} + emojiPickerTheme="auto" + emojiPickerThemeVars={NEUTRAL_EMOJI_PICKER_THEME_VARS} + onDone={() => setIsAvatarEditorOpen(false)} onUploadingChange={setIsUploadingAvatar} onUrlChange={setAvatarUrl} previewName={displayName.trim() || "Your profile"} - showClear={avatarUrl.length > 0} testIdPrefix="community-avatar" /> - {transaction.error ? ( -

{transaction.error}

- ) : null} -
- + ) : ( + <> +

Build your profile

+

+ Add a name and avatar. They’ll show up on your messages, + reactions, and agent handoffs. +

+
+ setIsAvatarEditorOpen(true)} + previewName={displayName.trim() || "Your profile"} + /> +
+
+ + setDisplayName(event.target.value)} + placeholder="First and last name" + value={displayName} + /> +
+ {transaction.error ? ( +

+ {transaction.error} +

+ ) : null} +
+ +
+ + ) ) : ( <> - -

- Meet your starter team -

-

- Fizz helps you build, Honey helps you communicate, and Bumble - helps you research. They’ll be ready when you need them. +

Meet your starter team

+

+ Buzz lets you bring multiple agents into the same workspace. This + team will help you get started using Buzz.

{starterPersonas.length > 0 ? ( -
+
{starterPersonas.map((persona) => (
- + {persona.displayName}
@@ -203,9 +309,9 @@ export function CommunityOnboardingFlow({ {transaction.error}

) : null} -
+
{transaction.error ? ( + + +
+ + ); +} diff --git a/desktop/src/features/onboarding/ui/MachineOnboardingFlow.tsx b/desktop/src/features/onboarding/ui/MachineOnboardingFlow.tsx index 35243f8496..8bfec109bb 100644 --- a/desktop/src/features/onboarding/ui/MachineOnboardingFlow.tsx +++ b/desktop/src/features/onboarding/ui/MachineOnboardingFlow.tsx @@ -9,13 +9,14 @@ import { import { Button } from "@/shared/ui/button"; import { StartupWindowDragRegion } from "@/shared/ui/StartupWindowDragRegion"; import { BackupStep } from "./BackupStep"; +import { DefaultConfigStep } from "./DefaultConfigStep"; import { LandingBees } from "./LandingBees"; import { NostrKeyImportForm } from "./NostrKeyImportForm"; import { OnboardingSlideTransition } from "./OnboardingSlideTransition"; import { OnboardingStepDots } from "./OnboardingStepDots"; import { SetupStep } from "./SetupStep"; -type MachinePage = "identity" | "key-import" | "backup" | "setup"; +type MachinePage = "identity" | "key-import" | "backup" | "setup" | "config"; export function MachineOnboardingFlow({ complete, @@ -89,14 +90,16 @@ export function MachineOnboardingFlow({ return (
{page === "identity" ? : null} {page !== "identity" ? ( - + ) : null}
{page === "identity" ? ( @@ -168,11 +171,19 @@ export function MachineOnboardingFlow({ onBack={() => setPage("identity")} onNext={() => setPage("setup")} /> - ) : ( + ) : page === "setup" ? ( setPage(identityWasImported ? "key-import" : "backup"), + next: () => setPage("config"), + }} + direction="forward" + /> + ) : ( + setPage("setup"), complete: () => complete(selectedPubkey ?? undefined), }} direction="forward" diff --git a/desktop/src/features/onboarding/ui/OnboardingStepDots.tsx b/desktop/src/features/onboarding/ui/OnboardingStepDots.tsx index b970eb5610..5e3a8551b9 100644 --- a/desktop/src/features/onboarding/ui/OnboardingStepDots.tsx +++ b/desktop/src/features/onboarding/ui/OnboardingStepDots.tsx @@ -1,10 +1,10 @@ import { BuzzMark } from "@/shared/ui/buzz-logo/BuzzMark"; /** - * Positions in the first-launch flow: landing, identity/key, provider setup, - * community choice, community profile, meet the team. + * Positions in the first-launch flow: landing, identity/key, harness setup, + * default config, community choice, community profile, meet the team. */ -export const TOTAL_ONBOARDING_PAGES = 6; +export const TOTAL_ONBOARDING_PAGES = 7; /** * Top-left paging indicator for the first-launch flow. The bee marks the diff --git a/desktop/src/features/onboarding/ui/SetupStep.tsx b/desktop/src/features/onboarding/ui/SetupStep.tsx index f99feff3fc..ebd08816a1 100644 --- a/desktop/src/features/onboarding/ui/SetupStep.tsx +++ b/desktop/src/features/onboarding/ui/SetupStep.tsx @@ -4,8 +4,8 @@ import { AlertTriangle, Check, ExternalLink, + Info, Plus, - RefreshCw, TerminalSquare, } from "lucide-react"; @@ -15,32 +15,19 @@ import { useGitBashPrerequisiteQuery, } from "@/features/agents/hooks"; import { describeResolvedCommand } from "@/features/agents/ui/agentUi"; -import { - GlobalAgentConfigFields, - EMPTY_GLOBAL_CONFIG, -} from "@/features/agents/ui/GlobalAgentConfigFields"; -import { createSaveCoalescer } from "./saveCoalescer"; -import { getBakedBuildEnv, type BakedEnvEntry } from "@/shared/api/tauri"; -import { - getGlobalAgentConfig, - setGlobalAgentConfig, -} from "@/shared/api/tauriGlobalAgentConfig"; -import type { - AcpRuntimeCatalogEntry, - GlobalAgentConfig, -} from "@/shared/api/types"; +import type { AcpRuntimeCatalogEntry } from "@/shared/api/types"; import { getInstallErrorMessage } from "@/shared/lib/installError"; import { cn } from "@/shared/lib/cn"; import { useTheme } from "@/shared/theme/ThemeProvider"; import { Badge } from "@/shared/ui/badge"; import { Button } from "@/shared/ui/button"; +import { Popover, PopoverContent, PopoverTrigger } from "@/shared/ui/popover"; import { Spinner } from "@/shared/ui/spinner"; import { type OnboardingTransitionDirection, OnboardingSlideTransition, } from "./OnboardingSlideTransition"; import type { SetupStepActions, SetupStepState } from "./types"; -import { resolveAgentReadiness } from "./agentReadiness"; type SetupStepProps = { actions: SetupStepActions; @@ -58,150 +45,6 @@ type InstallResultState = { success: boolean; }; -function AgentDefaultsSection() { - const runtimesQuery = useAcpRuntimesQuery(); - const [config, setConfig] = - React.useState(EMPTY_GLOBAL_CONFIG); - const [isLoading, setIsLoading] = React.useState(true); - const [isCustomProvider, setIsCustomProvider] = React.useState(false); - const [isCustomModelEditing, setIsCustomModelEditing] = React.useState(false); - const [bakedEnv, setBakedEnv] = React.useState([]); - const coalescerRef = React.useRef<{ - enqueue: (value: GlobalAgentConfig) => void; - cancel: () => void; - } | null>(null); - - React.useEffect(() => { - let unmounted = false; - - getGlobalAgentConfig() - .then((loaded) => { - if (!unmounted) { - setConfig(loaded); - setIsLoading(false); - } - }) - .catch(() => { - if (!unmounted) setIsLoading(false); - }); - getBakedBuildEnv() - .then((env) => { - if (!unmounted) setBakedEnv(env); - }) - .catch(() => undefined); - - // The coalescer serializes autosaves and drains any edit that arrived - // while a previous save was in flight. Cancel on unmount so a slow - // in-flight request never calls setState on an unmounted component. - const coalescer = createSaveCoalescer( - // set_global_agent_config returns a save result (config + restart - // counts); the coalescer round-trips the persisted config only. - async (next) => (await setGlobalAgentConfig(next)).config, - () => undefined, // saving state not surfaced in this autosave UX - (saved) => { - if (!unmounted) setConfig(saved); - }, - ); - coalescerRef.current = coalescer; - - return () => { - unmounted = true; - coalescer.cancel(); - }; - }, []); - - const buzzAgentRuntime = React.useMemo( - () => (runtimesQuery.data ?? []).find((r) => r.id === "buzz-agent"), - [runtimesQuery.data], - ); - - const readiness = resolveAgentReadiness(runtimesQuery.data ?? [], config); - - return ( -
-
-
-

- Agent defaults -

-

- Configure the LLM provider and credentials that buzz-agent uses, or - connect a CLI harness like Claude or Goose above. -

-
- -
- {readiness.ready ? ( - - {readiness.reason === "cli" - ? `${readiness.runtimeLabel} ready` - : "buzz-agent configured"} - - ) : ( - - Not configured - - )} - -
-
- - {isLoading ? ( -
- - Loading… -
- ) : ( - { - // Always apply optimistically so the UI never reverts mid-save, - // then enqueue the persist — the coalescer serialises multiple - // rapid edits into a single trailing request. - setConfig(next); - coalescerRef.current?.enqueue(next); - }} - onCustomModelEditingChange={setIsCustomModelEditing} - onIsCustomProviderChange={setIsCustomProvider} - /> - )} - - {!readiness.ready ? ( -

- You can finish now and configure agents later in Settings. -

- ) : null} -
- ); -} - function useSetupStepState(): SetupStepState { const runtimesQuery = useAcpRuntimesQuery(); const items = runtimesQuery.data ?? []; @@ -225,25 +68,24 @@ function RuntimeIcon({ runtime }: { runtime: AcpRuntimeCatalogEntry }) { if (runtime.avatarUrl && !imageFailed) { return ( -
- setImageFailed(true)} - src={runtime.avatarUrl} - /> -
+ setImageFailed(true)} + src={runtime.avatarUrl} + /> ); } return ( -
- -
+ ); } @@ -264,7 +106,7 @@ function RuntimeStatus({ return (
@@ -274,7 +116,7 @@ function RuntimeStatus({ if (installError) { return ( -
+
); @@ -282,8 +124,15 @@ function RuntimeStatus({ if (runtime.availability === "available" || installSuccess) { return ( -
- +
+
); } @@ -292,7 +141,7 @@ function RuntimeStatus({ return ( + + + + + +
+
-
-

- {runtime.label} -

- {isAvailable ? ( - - Installed - - ) : null} -
- - - +

+ {runtime.label} +

+ {!isAvailable && !installError ? ( +

+ {runtimeDetailText(runtime)} +

+ ) : null} {installError ? ( -

+

{installError}

) : null} - {installSuccess && runtime.availability !== "available" ? ( -

- Installed successfully. You can finish onboarding now. -

+

Installed

) : null}
- -
); } @@ -483,10 +366,10 @@ function GitBashPrerequisiteCard() { return (
@@ -572,23 +455,21 @@ function RuntimeProvidersSection({ } return ( -
-
-
-

- Agent harnesses -

-

- Buzz can launch local ACP-compatible agent harnesses. Install or - verify the runtimes this desktop app can see. -

-
+
+
+

+ Use the models that fit the task +

+

+ These are the local agent harnesses Buzz detected. You choose a + harness when creating each agent. +

{items.length > 0 ? ( -
+
{items.map((runtime) => ( ) : isChecking ? ( -
+
Looking for compatible runtimes...
) : errorMessage ? null : (

No compatible ACP runtimes detected yet. You can finish setup now and @@ -618,7 +499,7 @@ function RuntimeProvidersSection({ )} {errorMessage ? ( -

+

{errorMessage}

) : null} @@ -635,27 +516,25 @@ function SetupStepContent({ return ( - - -
+