feat(kiloclaw): polish onboarding previews with shared chat shell#3354
Open
Drixled wants to merge 1 commit into
Open
feat(kiloclaw): polish onboarding previews with shared chat shell#3354Drixled wants to merge 1 commit into
Drixled wants to merge 1 commit into
Conversation
Adds a reusable BriefingChatPreview that shows the user's bot identity sending a sample tomorrow-morning message, used as the left column of the Calendar / Inbound Email / Interests steps to pay off the Identity step's personalization across the rest of the wizard. Tightens visual hierarchy on each step's right column: drops redundant single-row eyebrows, right-sizes integration tiles to match the chat preview avatar, swaps the generic Lucide calendar icon for the Google brand mark, replaces brand-yellow-on-every-row tip tiles with a neutral numbered list, and merges the inbound email address + Copy button into a single bordered field. Migrates the wizard's primary CTAs from legacy blue (variant=primary, hardcoded #2B6AD2) to brand yellow-green via bg-brand-primary on variant=default. The semantic --primary token mismatch in globals.css is intentionally not touched here — flipping the token would affect ~89 other consumers (chat bubbles, message input, selected-state cards, payment success buttons) that should not be yellow. Trims verbose copy: Interests description 33 -> 13 words; feature titles drop redundant 'Read' prefix; Calendar subtitle simplified.
![kilo-code-bot[bot]](https://avatars.githubusercontent.com/in/2193792?s=60&v=4){kind=small}
| // even when the user picks many topics. Past the cap we collapse the | ||
| // remainder into a single "+ N more topics" line so the magnitude is | ||
| // still honest without unbounded vertical growth. | ||
| const TOPIC_CAP = 6; |
Contributor
There was a problem hiding this comment.
SUGGESTION: TOPIC_CAP is a module-level constant but is declared inside the useMemo callback.
It'll be re-evaluated on every memo recalculation and is not visible to callers or tests. Hoist it next to the other module-scope constants (EASE_OUT_QUART, TOPIC_PREVIEW_SAMPLES, etc.):
Suggested change
| const TOPIC_CAP = 6; | |
| const TOPIC_CAP = 6; |
Wait — to hoist it, replace this line with just the usage reference and declare const TOPIC_CAP = 6; at module scope alongside EASE_OUT_QUART. Since this is a multi-line refactor and the suggestion block can only replace one line, the fix would be:
- Remove line 96 (
const TOPIC_CAP = 6;) from inside theuseMemo - Add
const TOPIC_CAP = 6;at module scope (e.g. after line 19 withTAP_EASE)
Contributor
Code Review SummaryStatus: 1 Issue Found | Recommendation: Merge (minor suggestion only) Executive SummaryPR is a clean UI polish — new Overview
Issue Details (click to expand)SUGGESTION
Files Reviewed (6 files)
Fix these issues in Kilo Cloud Reviewed by claude-sonnet-4.6 · 1,612,552 tokens Review guidance: REVIEW.md from base branch |
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
BriefingChatPreviewcomponent (apps/web/src/app/(app)/claw/components/BriefingChatPreview.tsx) that renders the user's bot identity sending a sample tomorrow-morning message — used as the left column of the Calendar / Inbound Email / Interests steps so the Identity step's personalization (name + emoji) carries through the rest of the wizard.ACCESS,INBOUND ADDRESS), right-sizes integration tiles (56px → 40px) to match the chat avatar, swaps the generic LucideCalendaricon for the multi-color Google "G" mark from the existingGoogleLogo, and replaces three brand-yellow-on-every-rowForwardtip tiles with a neutral mono numbered list (1,2,3) — three yellow tiles violated the brand's "yellow scarce" rule.border-ldivider action, matching the field-with-action pattern used elsewhere in the codebase.variant="primary"= hardcoded#2B6AD2) to brand yellow-green by overriding withbg-brand-primaryclassName onvariant="default". Follows existing precedent (KiloClawCheckoutSuccessClient,SidebarMenuBadge); does not introduce a new Button variant.Readprefix (Read your calendar events→Calendar events); Calendar subtitle simplified (via OAuth · read-only→OAuth · Read-only).border + bg-cardwrappers around inner content blocks on Calendar and Interests steps.+ N more topicsoverflow line so the preview shell stays predictably sized when users select many topics, while still being honest about the magnitude.Verification
?fakeOnboardingStep=non-prod route (identity,calendar,email,interests, pluscompleteanderrorterminal states). Chat preview renders the fake identity (Aria 🤖) consistently across the three middle steps.Connected as <email>vsOAuth · Read-only) and the emeraldConnectedpill only when connected.aria-labelupdates accordingly.Skip for nowbuttons render with thebg-accenthover and focus-visible ring.md:grid-cols-[1fr_2fr]) collapses cleanly to a single column below themdbreakpoint.Visual Changes
Before/after screenshots can be captured by running locally — I don't have a way to attach images from a coding session.
To preview locally:
.env.local:KILO_PORT_OFFSET=auto pnpm dev:start.dev-port?fakeUser=...&callbackPath=%2Fclaw%2Fnew%3FfakeOnboardingStep%3D<step>identity,calendar,email,interestsReviewer Notes
--primarytoken mismatch left intentionally.apps/web/src/app/globals.css:138has--primary: oklch(0.922 0 0)(near-white), contradictingdesign.mdandkilo-brand.mdwhich say it should equal the brand yellow-green (oklch(95% 0.15 108)). Flipping the token would turn ~89 unrelated consumers yellow — chat bubbles, message input send button, selected-state cards, payment success buttons, sidebar menu badges, reaction pills. That's a coordinated design-system task. The CTA migration here usesbg-brand-primaryclassName override instead, matching the existing precedent inKiloClawCheckoutSuccessClient.tsx.SettingsTab,OpenClawButton,BillingBanner,WelcomePage,PlanSelectionDialog,AccessLockedDialog, andSubscriptionTaball still usevariant="primary"(legacy blue). They're outside the wizard flow so deliberately out of scope for this PR — easy follow-up:grep -rn 'variant="primary"' apps/web/srcreturns the rest.<button>rather than theButtonprimitive. The merged field needed precise control overself-stretch,border-ldivider,rounded-nonecorners, andhover:bg-muted/60to integrate cleanly. It still carries focus-visible ring and disabled-state styling consistent with the Button primitive. If a second screen needs the same merged-field affordance, that's the moment to promote it to a Button variant.botIdentitymay benullbriefly during OAuth resume on the Calendar step.ClawOnboardingFlow.tsx's hydration effect catches this frominstanceStatus, but until it fires, the chat preview falls back toDEFAULT_BOT_IDENTITY(KiloClaw 🦾). Sub-second flash, acceptable.ClawOnboardingFakeWalkthroughgot aFAKE_BOT_IDENTITYconstant (Aria 🤖 / Operator) so the preview reads convincingly when designers/reviewers load steps directly via the fake route without going through Identity first.ClawSetupErrorStep's "Contact Support" button moved fromvariant="primary"tovariant="default"+bg-brand-primaryso the brand action color is consistent across all wizard exit states.