Feat/Onboarding flow for BrowserOS #157

OmkarBansod02 · 2025-10-22T15:45:48Z

No description provided.

…and code cleanup

greptile-apps

Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.

felarof99 · 2025-10-22T16:11:56Z

@greptileai

greptile-apps

Greptile Overview

Greptile Summary

This PR introduces a comprehensive onboarding flow for BrowserOS that guides new users through initial setup. The implementation adds a multi-step wizard (Welcome → Import Data → API Keys → Try Examples → Completion) with animated UI components built using React, Zustand state management, and Tailwind CSS. The onboarding triggers automatically on extension install/update via chrome.runtime.onInstalled, checks completion status via chrome.storage.local, and integrates with existing extension infrastructure through message passing and tab management APIs. The webpack configuration was extended to build the new onboarding entry point alongside existing UI modules (sidepanel, newtab, options).

Important Files Changed

Changed Files

Filename	Score	Overview
webpack.config.js	5/5	Added onboarding entry point, incremented maxChunks to 7, and configured HtmlWebpackPlugin for onboarding.html
onboarding.html	4/5	New HTML entry point with theme initialization and React mount point (SVG icon has PNG type attribute mismatch)
src/onboarding/index.tsx	4/5	React initialization with error handling, but uses inline styles and relative imports instead of Tailwind/path aliases
src/onboarding/OnboardingApp.tsx	4/5	Main orchestrator component managing theme and step rendering (recreates renderStep function on every render)
src/onboarding/stores/onboardingStore.ts	4/5	Zustand store for state management, but uses interface instead of Zod schema and has off-by-one loop boundary issue
src/onboarding/styles.css	4/5	Tailwind theme configuration with CSS custom properties for light/dark/gray themes and transition utilities
src/onboarding/components/WelcomeStep.tsx	3/5	Animated welcome screen with undefined animation classes and relative asset paths requiring chrome.runtime.getURL()
src/onboarding/components/StepOne.tsx	4/5	Import data guide with chrome://settings navigation, hardcoded asset paths, and inline array definitions causing re-renders
src/onboarding/components/StepTwo.tsx	2/5	BYOK explanation screen with invalid `chrome://settings/browseros` URL that won't work in Chrome
src/onboarding/components/StepThree.tsx	3/5	Interactive example queries with hardcoded timeouts, missing error handling for chrome.runtime.sendMessage
src/onboarding/components/CompletionScreen.tsx	4/5	Final screen with cleanup logic, uses magic number timeout and tightly coupled tab cleanup
src/onboarding/components/ui/ProgressBar.tsx	4.5/5	Step indicator component with theme-aware styling and progress calculation
src/background/index.ts	4/5	Added onboarding trigger logic with chrome.runtime.onInstalled listener and dev mode testing support
src/sidepanel/components/ChatInput.tsx	5/5	Formatting cleanup only - removed trailing whitespace with no logical changes

Confidence score: 3/5

This PR introduces significant new functionality with several implementation issues that should be addressed before merging
Score reduced due to: (1) invalid Chrome URL in StepTwo (chrome://settings/browseros), (2) hardcoded timeouts instead of event-based loading, (3) missing error handling for chrome.runtime.sendMessage, (4) interface usage instead of Zod schemas violating project standards, (5) inline styles in error handling instead of Tailwind, (6) undefined Tailwind animation classes, (7) asset paths using relative URLs instead of chrome.runtime.getURL(), (8) off-by-one boundary issue in completeOnboarding loop
Pay close attention to src/onboarding/components/StepTwo.tsx (invalid URL), src/onboarding/components/StepThree.tsx (hardcoded timeouts/missing error handling), src/onboarding/stores/onboardingStore.ts (Zod schema conversion needed), and src/onboarding/components/WelcomeStep.tsx (undefined animation classes)

Sequence Diagram

sequenceDiagram
    participant User
    participant Chrome
    participant Background
    participant OnboardingApp
    participant OnboardingStore
    participant Storage
    participant SettingsPage
    participant SidePanel
    participant NewTab

    User->>Chrome: Install/Update Extension
    Chrome->>Background: chrome.runtime.onInstalled
    Background->>Storage: Check hasCompletedOnboarding
    Storage-->>Background: Return status
    
    alt Onboarding not completed
        Background->>Chrome: Create onboarding tab
        Chrome->>OnboardingApp: Load onboarding.html
        OnboardingApp->>OnboardingStore: Initialize (currentStep=0)
        OnboardingApp->>User: Show WelcomeStep
        
        User->>OnboardingStore: Click "Get Started"
        OnboardingStore->>OnboardingStore: skipVideo(), nextStep()
        OnboardingApp->>User: Show StepOne (Import Data)
        
        opt User wants to import
            User->>StepOne: Click "Open Import Settings"
            StepOne->>Chrome: Create tab chrome://settings/importData
        end
        
        User->>OnboardingStore: Click "Next Step"
        OnboardingStore->>OnboardingStore: nextStep()
        OnboardingApp->>User: Show StepTwo (API Keys)
        
        opt User wants to configure
            User->>StepTwo: Click "Configure API Keys"
            StepTwo->>Chrome: Create tab chrome://settings/browseros
            Chrome->>SettingsPage: Load settings page
        end
        
        User->>OnboardingStore: Click "Next Step"
        OnboardingStore->>OnboardingStore: nextStep()
        OnboardingApp->>User: Show StepThree (Try Examples)
        
        opt User tries example
            User->>StepThree: Click example card
            StepThree->>Chrome: Create new tab with URL
            StepThree->>Background: Send NEWTAB_EXECUTE_QUERY
            Background->>Background: Execute agent query
            StepThree->>Chrome: Open side panel
            Chrome->>SidePanel: Show execution
        end
        
        User->>OnboardingStore: Click "Complete Setup"
        OnboardingStore->>OnboardingStore: nextStep()
        OnboardingApp->>User: Show CompletionScreen
        
        CompletionScreen->>OnboardingStore: completeOnboarding()
        OnboardingStore->>Storage: Set hasCompletedOnboarding=true
        
        User->>CompletionScreen: Click "Open AI Agent Panel"
        CompletionScreen->>Chrome: Query active tab
        CompletionScreen->>Chrome: Close import settings tabs
        CompletionScreen->>Chrome: Open side panel
        Chrome->>SidePanel: Display panel
        CompletionScreen->>CompletionScreen: Redirect to newtab
        CompletionScreen->>NewTab: Load newtab.html
    else Onboarding completed
        Background->>Background: Skip onboarding
    end

Context used (4)

Context from dashboard - .cursorrules (source)
Context from dashboard - CLAUDE.md (source)
Context from dashboard - .cursor/rules/cursorrules.mdc (source)
Context from dashboard - .cursor/rules/always.mdc (source)

_{14 files reviewed, 6 comments}

_{Edit Code Review Agent Settings | Greptile}

greptile-apps · 2025-10-22T16:13:19Z

src/onboarding/components/WelcomeStep.tsx

+      <div className="flex items-center justify-center mb-2 animate-in fade-in zoom-in duration-700">
+        <div className="relative">
+          <div className="absolute inset-0 bg-brand/10 blur-3xl rounded-full animate-pulse" />
+          <img
+            src="/assets/product_logo_svg.svg"
+            alt="BrowserOS Logo"
+            className="h-24 w-auto relative z-10 drop-shadow-2xl transition-transform duration-300 hover:scale-110"
+          />
+        </div>
+      </div>
+
+      {/* Hero heading with staggered animation */}
+      <div className="space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-700 delay-100">
+        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight leading-tight px-4">
+          Welcome to{' '}
+          <span className="inline-block bg-gradient-to-r from-brand via-orange-500 to-brand bg-clip-text text-transparent">
+            BrowserOS
+          </span>
+        </h1>
+        <p className="text-lg sm:text-xl lg:text-2xl text-muted-foreground max-w-2xl mx-auto font-medium px-4">
+          The Open-Source Agentic Browser
+        </p>
+        <p className="text-sm sm:text-base text-muted-foreground/80 max-w-xl mx-auto leading-relaxed px-4">
+          Automate web tasks with AI-powered agents. Privacy-first, secure, and built for everyone.
+        </p>
+      </div>
+
+      {/* Feature highlights with enhanced cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 max-w-4xl mx-auto pt-6 px-4 animate-in fade-in slide-in-from-bottom-4 duration-700 delay-300">


syntax: animate-in classes undefined - Tailwind needs tailwindcss-animate plugin configured or custom keyframes defined

Prompt To Fix With AI

This is a comment left during a code review. Path: src/onboarding/components/WelcomeStep.tsx Line: 10:38 Comment: **syntax:** animate-in classes undefined - Tailwind needs tailwindcss-animate plugin configured or custom keyframes defined How can I resolve this? If you propose a fix, please make it concise.

greptile-apps · 2025-10-22T16:13:20Z

src/onboarding/components/StepTwo.tsx

+  const handleOpenSettings = () => {
+    chrome.tabs.create({ url: 'chrome://settings/browseros' })
+  }


logic: The URL chrome://settings/browseros is not a valid Chrome settings URL. Chrome settings URLs must use documented Chrome paths like chrome://extensions or chrome-extension:// URLs. This will fail to navigate correctly. What is the correct URL for the BrowserOS settings page? Should this be a chrome-extension:// URL pointing to browseros-settings.html?

Prompt To Fix With AI

This is a comment left during a code review. Path: src/onboarding/components/StepTwo.tsx Line: 7:9 Comment: **logic:** The URL `chrome://settings/browseros` is not a valid Chrome settings URL. Chrome settings URLs must use documented Chrome paths like `chrome://extensions` or `chrome-extension://` URLs. This will fail to navigate correctly. What is the correct URL for the BrowserOS settings page? Should this be a chrome-extension:// URL pointing to browseros-settings.html? How can I resolve this? If you propose a fix, please make it concise.

greptile-apps · 2025-10-22T16:13:21Z

src/onboarding/components/StepTwo.tsx

+        </button>
+
+        <p className="text-center text-xs text-muted-foreground">
+          💡 Access settings anytime: <code className="px-2 py-1 bg-background/90 border border-border/50 rounded font-mono text-xs">chrome://settings/browseros</code>


logic: Same invalid URL shown to users in the settings hint

Prompt To Fix With AI

This is a comment left during a code review. Path: src/onboarding/components/StepTwo.tsx Line: 87:87 Comment: **logic:** Same invalid URL shown to users in the settings hint How can I resolve this? If you propose a fix, please make it concise.

greptile-apps · 2025-10-22T16:13:21Z

src/onboarding/components/StepThree.tsx

+      await chrome.runtime.sendMessage({
+        type: 'NEWTAB_EXECUTE_QUERY',
+        tabId: newTab.id,
+        query: example.query,
+        metadata: {
+          source: 'onboarding',
+          executionMode: 'dynamic'
+        }
+      })


logic: no error handling for message sending - if background script doesn't respond or rejects, execution state remains stuck. Wrap in try/catch or add response validation

Prompt To Fix With AI

This is a comment left during a code review. Path: src/onboarding/components/StepThree.tsx Line: 105:113 Comment: **logic:** no error handling for message sending - if background script doesn't respond or rejects, execution state remains stuck. Wrap in try/catch or add response validation How can I resolve this? If you propose a fix, please make it concise.

greptile-apps · 2025-10-22T16:13:22Z

src/onboarding/stores/onboardingStore.ts

+interface OnboardingState {
+  currentStep: number  // 0 = welcome, 1-3 = steps, 4 = completion
+  videoSkipped: boolean
+  completedSteps: Set<number>
+
+  // Navigation methods
+  nextStep: () => void
+  previousStep: () => void
+  goToStep: (step: number) => void
+  skipVideo: () => void
+  completeOnboarding: () => Promise<void>
+
+  // State checks
+  canGoNext: () => boolean
+  canGoPrevious: () => boolean
+  isComplete: () => boolean
+}


syntax: Convert interface to Zod schema per project standards. Use inline comments for each field instead of JSDoc syntax.

Context Used: Context from dashboard - .cursor/rules/always.mdc (source)

Prompt To Fix With AI

This is a comment left during a code review. Path: src/onboarding/stores/onboardingStore.ts Line: 5:21 Comment: **syntax:** Convert interface to Zod schema per project standards. Use inline comments for each field instead of JSDoc syntax. **Context Used:** Context from `dashboard` - .cursor/rules/always.mdc ([source](https://app.greptile.com/review/custom-context?memory=b92e8652-37dd-46a3-bfe5-de0d525b9ea2)) How can I resolve this? If you propose a fix, please make it concise.

greptile-apps · 2025-10-22T16:13:23Z

src/onboarding/stores/onboardingStore.ts

+    const allSteps = new Set<number>()
+    for (let i = 0; i <= TOTAL_STEPS; i++) {
+      allSteps.add(i)
+    }


logic: Loop creates a set from 0 to TOTAL_STEPS. This marks 5 steps (0-4) as complete when only 4 actual steps exist (1-3 plus welcome/completion). Verify if step 0 and step 4 should be marked completed. Should completedSteps include step 0 (welcome) and step 4 (completion), or only steps 1-3?

Prompt To Fix With AI

This is a comment left during a code review. Path: src/onboarding/stores/onboardingStore.ts Line: 63:66 Comment: **logic:** Loop creates a set from 0 to TOTAL_STEPS. This marks 5 steps (0-4) as complete when only 4 actual steps exist (1-3 plus welcome/completion). Verify if step 0 and step 4 should be marked completed. Should completedSteps include step 0 (welcome) and step 4 (completion), or only steps 1-3? How can I resolve this? If you propose a fix, please make it concise.

OmkarBansod02 added 4 commits October 22, 2025 20:24

feat: add onboarding flow with welcome and setup steps

0182c7c

style: standardize buttons, cards, and animations across onboarding …

4b0cb70

…and code cleanup

improove UI/UX

f2fb5b6

chore:remove claude.local file

defb695

greptile-apps bot reviewed Oct 22, 2025

View reviewed changes

OmkarBansod02 and others added 10 commits October 23, 2025 00:28

changes at step 3

99fe9bf

changes on final page

a6b51c8

add revisit onboarding button to settings page

b4a5f77

add browserOS intro video

e69b2f9

minor ui fix

916236b

minor fix

0dca97c

remove fade-in/slide-in effect

189425e

trigger chatmode for example one

f575d2f

Merge branch 'main' into feat/onboarding-flow

e2b1d25

fix merge conflict

0d04f62

felarof99 merged commit 630d341 into browseros-ai:main Oct 22, 2025
1 check passed

github-actions bot locked and limited conversation to collaborators Oct 22, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Feat/Onboarding flow for BrowserOS #157

Feat/Onboarding flow for BrowserOS #157

Uh oh!

OmkarBansod02 commented Oct 22, 2025

Uh oh!

greptile-apps bot left a comment

Uh oh!

felarof99 commented Oct 22, 2025

Uh oh!

greptile-apps bot left a comment

Uh oh!

greptile-apps bot Oct 22, 2025

Uh oh!

greptile-apps bot Oct 22, 2025

Uh oh!

greptile-apps bot Oct 22, 2025

Uh oh!

greptile-apps bot Oct 22, 2025

Uh oh!

greptile-apps bot Oct 22, 2025

Uh oh!

greptile-apps bot Oct 22, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Feat/Onboarding flow for BrowserOS #157

Feat/Onboarding flow for BrowserOS #157

Uh oh!

Conversation

OmkarBansod02 commented Oct 22, 2025

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

felarof99 commented Oct 22, 2025

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Greptile Overview

Greptile Summary

Important Files Changed

Confidence score: 3/5

Sequence Diagram

Context used (4)

Uh oh!

greptile-apps bot Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants