Open
Conversation
Replaces the 3-step Workspace/Runtime/Agent onboarding with a single combined Workspace screen plus an alternate Join-a-workspace route, landing the user directly in #general with a default agent ready. Matches the ProposedFlow design in apps/storybook onboarding-flow.stories.tsx. - OnboardingFlow.tsx: drop the Stepper + sub-routes; route only /onboarding/workspace and /onboarding/join. - CreateWorkspaceStep.tsx: rewrite as the combined screen — implicit runtime scan runs on mount while the user names the workspace, a single confirmation row summarizes detected runtimes (with a Details popover for the full list), an inline TextLink routes to the Join flow, and Continue auto-mounts a default agent from the first detected runtime + first template, sets pendingWelcomeAgentId, and navigates to /chat/ch-welcome (reusing the existing welcome-message machinery in ChatView). - JoinWorkspaceStep.tsx: new, extracts the Join path from the old CreateWorkspaceStep, trimmed to English copy and the spec layout. - ConnectRuntimeStep.tsx + CreateAgentStep.tsx: deleted — their work is now implicit (runtime) or deferred to an in-workspace action (agent). Follow-up (not in this branch): dismissible "Bring your team along" banner on the welcome channel so team invites have a post-onboarding entry point per the Storybook spec. Made-with: Cursor
Deploying nexu-design with
|
| Latest commit: |
c4c8d1b
|
| Status: | 🚫 Build failed. |
added 3 commits
April 21, 2026 14:34
The Details and Join-a-workspace links visually appeared larger than their sibling copy. Both sides used 12px in theory, but mixing the Tailwind token class (text-sm) with arbitrary-value classes (text-[12px]) left the link with Tailwind's auto line-height while the siblings inherited, which made the link look a notch heavier. Standardize on text-sm everywhere and override the TextLink CVA size on the primitive call sites so both spans and links resolve to the same font-size/line-height pair. Made-with: Cursor
…status demoted Restructures the combined Workspace screen so the eye lands on the input, not the detection banner: - Headline: "What should we call your team?" (more direct prompt than the generic "Name your workspace"). - Input placeholder: "e.g. Design Ops AI Crew · My Digital Teammates" — acts as the implicit positioning cue (humans + AI as one team) now that no industry selector hints at Nexu's purpose. - Runtime detection moves out of the middle of the page. It now appears as a tiny status light below the Continue button (spinner while scanning, green dot + "N runtimes ready" when done, muted empty state otherwise). Click opens the same Popover with full details — the information is preserved, just demoted. - "~15 seconds to your first message." caption now sits directly above the Continue button as a pre-commit motivator. - Drops the RuntimeScanRow banner component and its summarize helper. Tile + headline + input + inline Join link stay at the top of the page; the status light at the bottom is a supporting glyph, not a decision the user has to read. Made-with: Cursor
- Drop the dual placeholder to a single evocative example: "e.g. My Digital Teammates". One strong cue reads cleaner than a bullet-separated pair. - Pull the runtime status light out of the tight Continue stack (was 8px below the button, now 40px — mt-4 on top of the outer gap-6). It's a supporting glyph, not button chrome, so it should breathe. - Promote the status light from a bare "dot + text" to a small clickable chip: surface-1 bg, border, and a trailing ChevronDown to signal the Popover is there. Hover brightens the border and fills to surface-2. Applies to all three states (scanning / ready / empty) so the affordance is consistent. Made-with: Cursor
6 tasks
mrcfps
pushed a commit
that referenced
this pull request
Apr 21, 2026
* feat(ui-web): polish stepper + shell primitives for onboarding flow - Stepper: 36px dark-filled indicators, current step keeps a soft halo, pending uses white + border, connector lines use a consistent faint tint instead of switching color with state. Completed steps keep their original step icon. Labels drop to text-xs / font-normal. - StepperItem: when onClick is provided the item becomes keyboard accessible (role=button, focus ring, Enter/Space activation) so completed steps can be revisited. - AuthShell: scroll column reserves scrollbar gutter so expanding long content no longer shifts centered children horizontally. - FormField: adds optional labelClassName. - Tabs (default): flatter active state, surface-3 list background. Made-with: Cursor * feat(slark): polish 3-step onboarding visuals OnboardingFlow / Stepper wiring - Completed steps are now clickable (onClick wired via Stepper's new interactive API) so users can jump back to earlier steps without a dedicated Back button. Connect Runtime step - Drop the redundant "Back" button; stepper handles backward nav now. - Hide the scanning progress bar and status line; per-card loaders are enough signal during detection. - Unified card styling for detected / attention / installable runtimes via canonical Card tokens (bg-card, border-subtle, shadow-rest); name next to logo, smaller logo tile, status icon on the right. - Selected state uses a subtle brand-accent border + checkmark instead of a heavy dark outline. - Attention (error) runtimes render in neutral grey — no warning tints — and fold into the "other supported runtimes" collapsible section next to not-yet-installed runtimes. Section auto-expands when zero runtimes are detected. All non-ready cards share one OtherRuntimeCard: error cards are non-interactive with truncated error + hover tooltip, installable cards link out with an ArrowUpRight icon and a blue "Install" action label. - StatusBar: shows "ready-count / total-count" to surface the full catalog size, and leaves the ready pill visible even when count is 0. Create Agent step - Template cards lift + shadow on hover, avatars gently scale + rotate; cards cascade in with a staggered fade/slide animation. - "Start from scratch" button drops its hover shadow (flat dashed CTA). - Primary "Create Agent" button becomes a full-width, icon-less CTA matching the form width; "Back to templates" moves below as a small ghost link. Made-with: Cursor * chore(slark): onboarding + settings polish pass Second round of UI polish on the 3-step onboarding branch, covering the Electron client, the shared component library, and the design system docs. Onboarding - Step 1 drops the Create / Join tabs in favor of a single page with the create path on top and a secondary "join an existing workspace" form beneath an "or" divider; removes forced mode-choice before any fields are visible. - Step 3 inherits the "Invite teammates" affordance previously on Step 1 (solid border, no "(optional)" suffix, `h-10` to match the sibling "Start from scratch" outline button). Settings / profile - Appearance: split Theme and Language into two equal cards, Language title bumped to 16px / semibold to match Theme, removes the leading globe icon from the select trigger, fixes broken flex row where the Select's default `w-full` squeezed the description. - Workspace / Profile / Danger zone cards switched from `variant="outline"` to `variant="static"` (no hover lift) with `border-border` to preserve the visible edge; unused CardHeader/CardTitle blocks removed and CardContent's default `mt-4` neutralized where there is no header. Chrome - Workspace switcher in the ActivityBar drops the Sign-out row; the switcher is now strictly a workspace picker. - Sidebar workspace dropdown gets 13px menu rows (previously 11px, below body-text floor), shorter "Invite people" copy, hard-coded English strings, and destructive-intent hover on Sign-out. - User detail profile rows get a `Shield` icon on the Role line and tighten their label column from `w-24` to `w-14`. Component library - `Button` loses `hover:shadow-*` on every variant and size. - `Avatar` primitive gains a 1px outer `ring-1 ring-border-subtle`. - `AGENTS.md` codifies "no hover shadow on buttons" under the Button variant selection section. Electron - `nativeTheme.themeSource = "light"` locks the host window's NSAppearance to light so the sidebar vibrancy renders as light frosted glass regardless of the user's system theme. - Default locale falls back to English when no saved preference exists, rather than auto-detecting from `navigator.language`. Storybook - Adds a Glass story for the `ActivityBar` primitive demonstrating the new `surface="glass"` variant on a gradient backdrop. Made-with: Cursor --------- Co-authored-by: chaoxiaoche <chaoxiaoche@chaoxiaochedeMacBook-Pro.local>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replaces the 3-step Workspace / Runtime / Agent onboarding in
apps/slarkwith a single combined Workspace screen (runtime detection runs implicitly in the background, and a default agent is auto-mounted on Continue), plus an alternate Join-a-workspace route. User lands directly in#generalwith a welcome message already streaming from their first agent.Implements the
ProposedFlowdesign reviewed in #31 (apps/storybook/src/stories/onboarding-flow.stories.tsx).Before / After
#general)Changes
OnboardingFlow.tsx— drop theStepper+ sub-routes. Router now only renders/onboarding/workspaceand/onboarding/join.CreateWorkspaceStep.tsx— rewritten as the combined screen:useRuntimesStore).Detailspopover listing name + version./onboarding/join.pendingWelcomeAgentId, and navigates to/chat/ch-welcome— reusing the existing welcome-message machinery inChatView.JoinWorkspaceStep.tsx— new. Extracts the Join path from the oldCreateWorkspaceStep, trimmed to English copy and the spec layout.ConnectRuntimeStep.tsx+CreateAgentStep.tsx— deleted. Their work is now implicit (runtime) or deferred to an in-workspace action (agent).Net: +314 / −1030.
Follow-up (not in this PR)
Test plan
pnpm --filter nexu dev→ sign up viaWelcomePage→ land on/onboarding/workspace→ confirm single screen matches the Proposed Storybook (hero tile, title, subtitle, input, runtime scan row, Join TextLink, Continue, "15s" caption)./chat/ch-welcomewith a streaming welcome message from the auto-mounted agent.Join a workspaceTextLink → verify/onboarding/joinrenders; Back button returns to/onboarding/workspace./onboarding/workspace.pnpm format:checkandpnpm biome:checkclean.Made with Cursor