-
[OPIK-5198] [OPIK-5216] [FE] Onboarding: project creation and trace loading states (#5864)
frostbyte_neo 发布于
2026-03-26 16:56:26 +00:00 - [OPIK-5195] [FE] Add agent name onboarding step card
Add the first step of the new agent onboarding flow behind the
AGENT_CONFIGURATION_ENABLED feature toggle. Users enter an agent name
which is persisted to localStorage via a context provider with
step-based navigation (goToStep). When onboarding completes, the
user is redirected to the home page.Co-Authored-By: Claude Opus 4.6 noreply@anthropic.com
- [OPIK-5195] [FE] Fix feature toggle race condition and clean up onboarding
Block FeatureTogglesProvider children until toggles are fetched,
preventing premature redirect on get-started page. Also clean up
old OnboardingOverlay code, add CONNECT_AGENT step, and enforce
minimum agent name length.Co-Authored-By: Claude Opus 4.6 noreply@anthropic.com
- [OPIK-5195] [FE] Remove isFetched guard from FeatureTogglesProvider
Render immediately with defaults instead of blocking until toggles API
responds. Tech debt ticket OPIK-5238 tracks re-adding with a proper
loading state.Co-Authored-By: Claude Opus 4.6 noreply@anthropic.com
- [OPIK-5195] [FE] Revert feature-toggles-provider to main version
Remove unrelated changes to FeatureTogglesProvider — only the toggle
enum and BE/CI/docker removals are in scope for this PR.Co-Authored-By: Claude Opus 4.6 noreply@anthropic.com
- [OPIK-5195] Revert BE/CI/docker toggle changes (moved to separate branch)
Toggle removal moved to danield/NA-remove-agent-config-toggle branch.
Co-Authored-By: Claude Opus 4.6 noreply@anthropic.com
- [OPIK-5196] [OPIK-5197] [OPIK-5199] [FE] Add onboarding Step 2 — Connect agent tabs
Implement the "Connect your agent to Opik" step with two tabs:
- Install with AI: npx skills command + prompt for AI coding agents
- Manual integration: integration card grid with category filtering
and per-integration detail view with setup steps
Co-Authored-By: Claude Opus 4.6 noreply@anthropic.com
- [OPIK-5196] [FE] Polish onboarding Step 2 card based on feedback
- Dynamic title using agent name from Step 1
- Fix footer alignment: Back button left-aligned via mr-auto
- Consistent 1.25rem (gap-5) spacing from all card edges
- Conditional footer separator via showFooterSeparator prop
Co-Authored-By: Claude Opus 4.6 noreply@anthropic.com
- [OPIK-5196] [FE] Add arrow icons to Back and Skip footer buttons
Back gets ChevronLeft, Skip for now gets ChevronsRight per Figma design.
Co-Authored-By: Claude Opus 4.6 noreply@anthropic.com
- [OPIK-5196] [OPIK-5197] [OPIK-5199] [FE] Polish onboarding Step 2 UI per Figma
- Card width 40.5rem, footer separator gap 0.75rem
- Code blocks wrap text instead of horizontal scroll
- FAQ troubleshooting link on "Why isn't my trace showing?"
- Footer buttons: comet-body-s typography, muted-slate color
- Manual integration: side-by-side Project name / API key fields
- Integration chips: compact 4-col grid with ellipsis truncation
- Add SVG logos for Claude Code, Codex, Cursor
Co-Authored-By: Claude Opus 4.6 noreply@anthropic.com
- [OPIK-5196] [FE] Hide card title when viewing integration detail
Co-Authored-By: Claude Opus 4.6 noreply@anthropic.com
- [OPIK-5196] [FE] Mask API key in InstallWithAITab display prompt
Co-Authored-By: Claude Opus 4.6 noreply@anthropic.com
- [OPIK-5196] [FE] Remove InviteDevButton from onboarding, move help links and back button
Co-Authored-By: Claude Opus 4.6 noreply@anthropic.com
- [OPIK-5196] [FE] Move AgentOnboarding from pages-shared to pages/GetStartedPage
Co-Authored-By: Claude Opus 4.6 noreply@anthropic.com
- [OPIK-5196] [FE] Remove duplicate HelpLinks from ManualIntegrationDetail
Co-Authored-By: Claude Opus 4.6 noreply@anthropic.com
- [OPIK-5198] [OPIK-5216] [FE] Add project creation on onboarding and trace polling
Create project when user clicks Continue on agent name step. Handle
duplicate names (409) with inline error. Poll for first trace on step 2
Install with AI tab, show checkmark when received. Replace "Skip for now"
with "View traces & start optimizing" button that navigates to project
traces page with first trace open in sidebar (sorted ASC). Remove Back
button from step 2 to simplify flow. Also improve API key masking in
onboarding prompts.Co-Authored-By: Claude Opus 4.6 (1M context) noreply@anthropic.com
- [OPIK-5198] [FE] Remove accidental agentConfigurationEnabled toggle changes
These toggle additions belong in a separate branch and were
included by mistake from the base branch.Co-Authored-By: Claude Opus 4.6 (1M context) noreply@anthropic.com
- [OPIK-5198] [OPIK-5216] [FE] Address UX review for onboarding flow
- Step 1: input and button to 32px height (sm variant)
- Install with AI: align content with tab label, fix step number
colors to use --timeline-connector, fix code block header height,
smaller copy button, increase description-to-code gap, add hover
state to troubleshooting link, add pulsating bg on loader, fix
timeline connector color and alignment - Manual integration: 32px inputs with proper font, switch category
tabs to ToggleGroup secondary variant, remove accented from
integration labels - Integration detail: remove borders/padding from steps, add borders
to code blocks, smaller footer buttons (24px/2xs) - Card: reduce top padding and max-height for balanced margins
- Footer: remove padding from skip button
Co-Authored-By: Claude Opus 4.6 (1M context) noreply@anthropic.com
- [OPIK-5198] [OPIK-5216] [FE] Fix error UX, pre-fill project name in integrations
- Move inline error to footer row (same line as Continue button)
- Disable Continue when error is shown
- Fix glitch by only clearing isCreating in catch block
- Pre-fill project name in ManualIntegrationDetail code snippets
- Fix putConfigInCode to include projectName in self-hosted path
Co-Authored-By: Claude Opus 4.6 (1M context) noreply@anthropic.com
- [OPIK-5198] [OPIK-5216] [FE] Improve trace received UX and fix navigation
- Update success text to "First trace received! You're all set."
- Add "Traces are flowing" description on trace received
- Move trace polling to ConnectAgentStep for cleaner data flow
- Fix navigate/goToStep conflict by skipping hash replaceState when trace param present
- Navigate to /logs instead of /traces
- Extract projectId and firstTraceId constants
Co-Authored-By: Claude Opus 4.6 (1M context) noreply@anthropic.com
- [OPIK-5198] [OPIK-5216] [FE] Fix navigation race by storing traceId in onboarding state
Move trace navigation to NewQuickstart to eliminate race condition
between goToStep and navigate. Store traceId in onboarding localStorage
state so NewQuickstart can include it when redirecting to logs page.Co-Authored-By: Claude Opus 4.6 (1M context) noreply@anthropic.com
- [OPIK-5198] [OPIK-5216] [FE] Reuse useProjectCreateMutation, move polling to ConnectAgentStep
- Add showErrorToast option to useProjectCreateMutation (default true)
- Reuse the hook in AgentNameStep with showErrorToast: false
- Move trace polling from InstallWithAITab to ConnectAgentStep so it
runs regardless of active tab
Co-Authored-By: Claude Opus 4.6 (1M context) noreply@anthropic.com
Co-authored-by: Claude Opus 4.6 noreply@anthropic.com
下载附件