isCompletedisCompleted

Author: olasunkanmi.raymond

src/webview-providers/handlers/onboarding-handler.ts

@@ -66,6 +66,7 @@ function isOnboardingMessage(msg: unknown): msg is OnboardingMessage {
 
 interface OnboardingStateDTO {
   shouldShow: boolean;
+  completed: boolean;
   providers: Array<{
     id: string;
     name: string;
@@ -94,16 +95,14 @@ export class OnboardingHandler implements WebviewMessageHandler {
         try {
           const shouldShow = svc.shouldShowOnboarding();
           const providers = svc.getProviders();
-          let projectInfo: ProjectInfo | null = null;
-          let suggestedTasks: Array<{ label: string; prompt: string }> = [];
 
-          if (shouldShow) {
-            projectInfo = await svc.detectProjectInfo();
-            suggestedTasks = svc.getSuggestedTasks(projectInfo);
-          }
+          // Always detect project info so the WelcomeScreen can show it
+          const projectInfo = await svc.detectProjectInfo();
+          const suggestedTasks = svc.getSuggestedTasks(projectInfo);
 
           const dto: OnboardingStateDTO = {
             shouldShow,
+            completed: !shouldShow,
             providers,
             projectInfo,
             suggestedTasks,
@@ -121,6 +120,7 @@ export class OnboardingHandler implements WebviewMessageHandler {
             command: "onboarding-state",
             data: {
               shouldShow: false,
+              completed: false,
               providers: [],
               projectInfo: null,
               suggestedTasks: [],

webviewUi/src/components/webview.tsx

@@ -517,13 +517,7 @@ export const WebviewUI = () => {
                 <div style={{ minWidth: 0, maxWidth: "100%" }}>
                   {/* Show welcome screen when there are no messages */}
                   {streamedMessages.length === 0 && !isBotLoading && !isCommandExecuting ? (
-                    <WelcomeScreen
-                      username={username}
-                      onGetStarted={() => {
-                        // Optional: Focus on the input or trigger a sample prompt
-                        console.log("User is ready to start!");
-                      }}
-                    />
+                    <WelcomeScreen username={username} />
                   ) : (
                     <>
                       {memoizedMessages}

webviewUi/src/components/welcomeUI.tsx

@@ -1,24 +1,9 @@
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styled, { keyframes } from "styled-components";
-import {
-  WelcomeHero,
-  WelcomeLogo,
-  WelcomeSubtitle as OnboardingSubtitle,
-  FeatureList,
-  FeatureItem,
-  FeatureIcon,
-  FeatureText,
-} from "./onboarding/styles";
-import {
-  CodeBuddyLogo,
-  ChatBubbleIcon,
-  SearchIcon,
-  LockIcon,
-  GlobeIcon,
-  WrenchIcon,
-  RefreshIcon,
-} from "./onboarding/icons";
+import { WelcomeHero, WelcomeLogo } from "./onboarding/styles";
+import { CodeBuddyLogo } from "./onboarding/icons";
+import { useOnboardingStore } from "../stores/onboarding.store";
 
 interface WelcomeScreenProps {
   username?: string;
@@ -55,9 +40,37 @@ const GreetingTitle = styled.h1`
   text-align: center;
 `;
 
+const Tagline = styled.p`
+  font-size: 13px;
+  color: var(--vscode-descriptionForeground, #999);
+  margin: 0 0 24px 0;
+  text-align: center;
+  max-width: 380px;
+  line-height: 1.5;
+`;
+
+const SetupCTA = styled.button`
+  background: var(--vscode-button-background);
+  color: var(--vscode-button-foreground);
+  border: none;
+  border-radius: 6px;
+  padding: 8px 20px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s ease;
+
+  &:hover {
+    background: var(--vscode-button-hoverBackground);
+  }
+`;
+
 export const WelcomeScreen: React.FC<WelcomeScreenProps> = ({ username }) => {
   const { t } = useTranslation();
   const [displayedText, setDisplayedText] = useState("");
+  const isCompleted = useOnboardingStore((s) => s.isCompleted);
+  const show = useOnboardingStore((s) => s.show);
+
   const greeting = username
     ? t("welcome.greetingWithName", { username })
     : t("welcome.greetingDefault");
@@ -83,53 +96,12 @@ export const WelcomeScreen: React.FC<WelcomeScreenProps> = ({ username }) => {
           <CodeBuddyLogo />
         </WelcomeLogo>
         <GreetingTitle>{displayedText}</GreetingTitle>
-        <OnboardingSubtitle>
-          {t("welcome.subtitle")}
-        </OnboardingSubtitle>
-        <FeatureList>
-          <FeatureItem>
-            <FeatureIcon><ChatBubbleIcon /></FeatureIcon>
-            <FeatureText>
-              <strong>{t("welcome.featureAgentMode")}</strong>
-              {t("welcome.featureAgentModeDesc")}
-            </FeatureText>
-          </FeatureItem>
-          <FeatureItem>
-            <FeatureIcon><SearchIcon /></FeatureIcon>
-            <FeatureText>
-              <strong>{t("welcome.featureAskMode")}</strong>
-              {t("welcome.featureAskModeDesc")}
-            </FeatureText>
-          </FeatureItem>
-          <FeatureItem>
-            <FeatureIcon><GlobeIcon /></FeatureIcon>
-            <FeatureText>
-              <strong>{t("welcome.featureProviders")}</strong>
-              {t("welcome.featureProvidersDesc")}
-            </FeatureText>
-          </FeatureItem>
-          <FeatureItem>
-            <FeatureIcon><LockIcon /></FeatureIcon>
-            <FeatureText>
-              <strong>{t("welcome.featureDiffReview")}</strong>
-              {t("welcome.featureDiffReviewDesc")}
-            </FeatureText>
-          </FeatureItem>
-          <FeatureItem>
-            <FeatureIcon><WrenchIcon /></FeatureIcon>
-            <FeatureText>
-              <strong>{t("welcome.featureMCP")}</strong>
-              {t("welcome.featureMCPDesc")}
-            </FeatureText>
-          </FeatureItem>
-          <FeatureItem>
-            <FeatureIcon><RefreshIcon /></FeatureIcon>
-            <FeatureText>
-              <strong>{t("welcome.featureMentions")}</strong>
-              {t("welcome.featureMentionsDesc")}
-            </FeatureText>
-          </FeatureItem>
-        </FeatureList>
+        <Tagline>{t("welcome.subtitle")}</Tagline>
+        {!isCompleted && (
+          <SetupCTA onClick={show}>
+            {t("welcome.setupCTA")}
+          </SetupCTA>
+        )}
       </WelcomeHero>
     </WelcomeContainer>
   );

webviewUi/src/hooks/useMessageDispatcher.ts

@@ -491,10 +491,11 @@ export function useMessageDispatcher(streamingChat: StreamingChatAPI) {
         // ── Onboarding ──
         case "onboarding-state": {
           const ob = useOnboardingStore.getState();
+          ob.setCompleted(message.data?.completed ?? false);
+          ob.setProviders(message.data?.providers ?? []);
+          ob.setProjectInfo(message.data?.projectInfo ?? null);
+          ob.setSuggestedTasks(message.data?.suggestedTasks ?? []);
           if (message.data?.shouldShow) {
-            ob.setProviders(message.data.providers ?? []);
-            ob.setProjectInfo(message.data.projectInfo ?? null);
-            ob.setSuggestedTasks(message.data.suggestedTasks ?? []);
             ob.show();
           }
           break;
@@ -525,6 +526,7 @@ export function useMessageDispatcher(streamingChat: StreamingChatAPI) {
         }
         case "onboarding-completed":
           useOnboardingStore.getState().setVisible(false);
+          useOnboardingStore.getState().setCompleted(true);
           break;
         case "onboarding-request-hydrate":
           useOnboardingStore.getState().hydrate();

webviewUi/src/i18n/en.json

@@ -85,7 +85,8 @@
     "featureMCP": "MCP Tools",
     "featureMCPDesc": "Extend with GitHub, GitLab, and custom integrations",
     "featureMentions": "@ Mentions",
-    "featureMentionsDesc": "Use @filename to include specific files as context"
+    "featureMentionsDesc": "Use @filename to include specific files as context",
+    "setupCTA": "Complete Setup"
   },
 
   "webview": {

webviewUi/src/stores/onboarding.store.ts

@@ -50,6 +50,7 @@ export const STEP_ORDER: OnboardingStep[] = [
 
 interface OnboardingState {
   isVisible: boolean;
+  isCompleted: boolean;
   currentStep: OnboardingStep;
   providers: ProviderInfo[];
   projectInfo: ProjectInfo | null;
@@ -82,12 +83,14 @@ interface OnboardingState {
   setStepCompleting: (completing: boolean) => void;
   setSavedKeyProvider: (provider: string | null) => void;
   setIsSavingKey: (saving: boolean) => void;
+  setCompleted: (completed: boolean) => void;
 }
 
 // ─── Store ──────────────────────────────────────────────
 
 export const useOnboardingStore = create<OnboardingState>()((set, get) => ({
   isVisible: false,
+  isCompleted: false,
   currentStep: "welcome",
   providers: [],
   projectInfo: null,
@@ -109,12 +112,12 @@ export const useOnboardingStore = create<OnboardingState>()((set, get) => ({
 
   dismiss: () => {
     vscode.postMessage({ command: "onboarding-dismiss" });
-    set({ isVisible: false });
+    set({ isVisible: false, isCompleted: true });
   },
 
   skip: () => {
     vscode.postMessage({ command: "onboarding-skip" });
-    set({ isVisible: false });
+    set({ isVisible: false, isCompleted: true });
   },
 
   nextStep: () => {
@@ -125,7 +128,7 @@ export const useOnboardingStore = create<OnboardingState>()((set, get) => ({
     } else {
       // Last step — complete the wizard
       vscode.postMessage({ command: "onboarding-dismiss" });
-      set({ isVisible: false });
+      set({ isVisible: false, isCompleted: true });
     }
   },
 
@@ -212,4 +215,5 @@ export const useOnboardingStore = create<OnboardingState>()((set, get) => ({
   setSavedKeyProvider: (provider) =>
     set({ savedKeyProvider: provider, isSavingKey: false }),
   setIsSavingKey: (saving) => set({ isSavingKey: saving }),
+  setCompleted: (completed) => set({ isCompleted: completed }),
 }));