Onboarding: connection terminal and flags table#7856
Draft
talissoncosta wants to merge 11 commits into
Draft
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
github-actions
Bot
added
the
front-end
A prop-driven sdk console: amber LISTENING with an unchecked checklist and a blinking cursor while waiting, green LIVE with a connection receipt once connected. Always dark and reduced-motion aware, with stories for both states. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
The 'Your flags' card reusing the product FeatureName / Tag / Switch, prop driven with waiting and connected states. Connected lifts it with the accent border and glow; waiting dims it. Stories cover the states and the toggle. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
#7766) OnboardingFlow renders both below the connect panel. useOnboardingFlag resolves the demo flag's Development feature state and toggles it via updateFeatureState (persisted, no simulated output). Status is the pre-connection state for now; the real first-evaluation signal lands in #7767. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
…e glow (#7766) Use --radius-xl / --radius-full instead of literal radii, and bring back the mock's purple accent border + glow on the connected flags card, derived from --color-border-action via oklch alpha so it still tracks the theme. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
…nnection (#7766) One seam for the verify connection status so #7767 only swaps the hook body. Stubbed to the pre-connection state today, with a ?connected query-param escape hatch to exercise the connected UI in the live flow before the real signal exists. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Resolve the demo flag's tags (useGetTagsQuery) and pass them through to the flags table, so a tag attached to the flag appears in the onboarding table automatically rather than being hardcoded. The mock's 'Onboarding' tag shows once such a tag is attached to the flag (resource setup / #7767). Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
…rap (#7766) Best-effort find-or-create the 'Onboarding' tag and attach it to the demo flag, so the flags table shows the badge from the design out of the box. ensureFlag now returns the flag; tagging is wrapped so it never blocks the bootstrap. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
…ippets (#7766) The terminal is now per-step (installCopied / snippetCopied / connected) instead of a single status: copying the install or wire snippet ticks its checklist item and the active step shows amber, the first evaluation flips it to LIVE. CodeCard gains an onCopy that the connect panel threads up to the page. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
…7766) The toggle cell was 56px while the ENABLED header column is 96px (the design's 40px action cell filled the gap, which we dropped), so the toggle sat right of the header. Widen the toggle cell to match, lining it up under ENABLED. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
…#7766) The Onboarding tag's colour was an off-palette hex; switch to a green from the product tag palette (Constants.tagColors) so it's consistent with how tags are coloured everywhere else. Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
talissoncosta
force-pushed
the
feat/onboarding-terminal-flags-table-7766
branch
from
523818f to
0bc5a99
Compare
Chrome offered contact autofill on the ghost inline-edit field, dropping a person/chevron icon that overlapped the trailing edit pencil. A ghost field is never a contact or credential input, so opt out of autofill and the password-manager overlays (1Password, LastPass). Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
talissoncosta
force-pushed
the
feat/onboarding-terminal-flags-table-7766
branch
from
0bc5a99 to
d2474f9
Compare
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.
docs/if required so people know about the feature.Changes
Contributes to #7766. Stacked on #7765 (renders into the single-page flow).
FeatureName/Tag/Switch, with a real Development toggle (updateFeatureState) and the flag's real tags. Bootstrap attaches anOnboardingtag so the badge shows out of the box.useOnboardingConnectionseam, so the real first-evaluation signal (Onboarding: flag gating, resource setup and connection signal #7767) is a one-file change. A?connectedquery param exercises the connected UI now.How did you test this code?
OnboardingTerminal(Listening / InstallCopied / SnippetsCopied / Connected) andOnboardingFlagsTable(Connected / Waiting / Off / WithTag)./getting-started— copied the install + wire snippets and watched the checklist tick; toggled the Dev flag and confirmed it persists; visited/getting-started?connectedto see the LIVE / connected state.