-
[OPIK-5196] [OPIK-5197] [OPIK-5199] [FE] Add onboarding Step 2 — Connect agent tabs (#5839)
frostbyte_neo 发布于
2026-03-25 17:19:48 +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 debug console.log from NewQuickstart
Co-Authored-By: Claude Opus 4.6 noreply@anthropic.com
- [OPIK-5195] [FE] Remove agentConfigurationEnabled toggle and old onboarding from v2
Agent onboarding is now always enabled in v2 — no feature toggle needed.
Remove old OnboardingOverlay questionnaire and IntegrationExplorer from
v2 get-started page. Add CONNECT_AGENT step constant and step-based
routing in AgentOnboardingOverlay.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
Co-authored-by: Claude Opus 4.6 noreply@anthropic.com
下载附件