Wizard integration and first data-less tasks

Author: charlesvien

apps/code/src/main/services/workspace/service.ts

@@ -14,6 +14,7 @@ import {
 import { CreateOrSwitchBranchSaga } from "@posthog/git/sagas/branch";
 import { DetachHeadSaga } from "@posthog/git/sagas/head";
 import { WorktreeManager } from "@posthog/git/worktree";
+import { ANALYTICS_EVENTS } from "@shared/types/analytics";
 import { inject, injectable } from "inversify";
 import type { RepositoryRepository } from "../../db/repositories/repository-repository";
 import type { WorkspaceRepository } from "../../db/repositories/workspace-repository";
@@ -340,9 +341,9 @@ export class WorkspaceService extends TypedEventEmitter<WorkspaceServiceEvents>
         branchName,
         error,
       });
-      trackAppEvent("branch_link_default_branch_unknown", {
-        taskId,
-        branchName,
+      trackAppEvent(ANALYTICS_EVENTS.BRANCH_LINK_DEFAULT_BRANCH_UNKNOWN, {
+        task_id: taskId,
+        branch_name: branchName,
       });
       return;
     }
@@ -368,7 +369,7 @@ export class WorkspaceService extends TypedEventEmitter<WorkspaceServiceEvents>
       taskId,
       branchName,
     });
-    trackAppEvent("branch_linked", {
+    trackAppEvent(ANALYTICS_EVENTS.BRANCH_LINKED, {
       task_id: taskId,
       branch_name: branchName,
       source: source ?? "unknown",
@@ -382,7 +383,7 @@ export class WorkspaceService extends TypedEventEmitter<WorkspaceServiceEvents>
       taskId,
       branchName: null,
     });
-    trackAppEvent("branch_unlinked", {
+    trackAppEvent(ANALYTICS_EVENTS.BRANCH_UNLINKED, {
       task_id: taskId,
       source: source ?? "unknown",
     });

apps/code/src/renderer/components/MainLayout.tsx

@@ -14,6 +14,7 @@ import { useInboxDeepLink } from "@features/inbox/hooks/useInboxDeepLink";
 import { FolderSettingsView } from "@features/settings/components/FolderSettingsView";
 import { SettingsDialog } from "@features/settings/components/SettingsDialog";
 import { useSettingsDialogStore } from "@features/settings/stores/settingsDialogStore";
+import { SetupView } from "@features/setup/components/SetupView";
 import { MainSidebar } from "@features/sidebar/components/MainSidebar";
 import { useSidebarData } from "@features/sidebar/hooks/useSidebarData";
 import { useVisualTaskOrder } from "@features/sidebar/hooks/useVisualTaskOrder";
@@ -115,6 +116,8 @@ export function MainLayout() {
           {view.type === "command-center" && <CommandCenterView />}
 
           {view.type === "skills" && <SkillsView />}
+
+          {view.type === "setup" && <SetupView />}
         </Box>
       </Flex>
 

apps/code/src/renderer/features/onboarding/components/context-collection/SuggestedTasks.tsx

@@ -0,0 +1,151 @@
+import type { DiscoveredTask } from "@features/setup/types";
+import type { Icon } from "@phosphor-icons/react";
+import {
+  ArrowRight,
+  Bug,
+  ChartLine,
+  Copy,
+  Flag,
+  Funnel,
+  Lightning,
+  Lock,
+  Trash,
+  Warning,
+  Wrench,
+} from "@phosphor-icons/react";
+import { Flex, Text } from "@radix-ui/themes";
+import { motion } from "framer-motion";
+
+const CATEGORY_CONFIG: Record<
+  DiscoveredTask["category"],
+  { icon: Icon; color: string }
+> = {
+  bug: { icon: Bug, color: "red" },
+  security: { icon: Lock, color: "red" },
+  dead_code: { icon: Trash, color: "gray" },
+  duplication: { icon: Copy, color: "orange" },
+  performance: { icon: Lightning, color: "green" },
+  stale_feature_flag: { icon: Flag, color: "amber" },
+  error_tracking: { icon: Warning, color: "orange" },
+  event_tracking: { icon: ChartLine, color: "blue" },
+  funnel: { icon: Funnel, color: "violet" },
+};
+
+interface SuggestedTasksProps {
+  tasks: DiscoveredTask[];
+  onSelectTask: (task: DiscoveredTask) => void;
+}
+
+export function SuggestedTasks({ tasks, onSelectTask }: SuggestedTasksProps) {
+  if (tasks.length === 0) {
+    return (
+      <Flex
+        align="center"
+        justify="center"
+        py="4"
+        style={{ color: "var(--gray-9)" }}
+      >
+        <Text size="2">No issues found. Your codebase looks clean!</Text>
+      </Flex>
+    );
+  }
+
+  return (
+    <Flex direction="column" gap="3" style={{ width: "100%" }}>
+      {tasks.map((task, index) => {
+        const config = CATEGORY_CONFIG[task.category] ?? {
+          icon: Wrench,
+          color: "gray",
+        };
+        const TaskIcon = config.icon;
+        return (
+          <motion.button
+            key={task.id}
+            initial={{ opacity: 0, y: 12 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.3, delay: index * 0.08 }}
+            onClick={() => onSelectTask(task)}
+            type="button"
+            style={{
+              display: "flex",
+              alignItems: "flex-start",
+              gap: 14,
+              padding: "16px 18px",
+              backgroundColor: "var(--color-panel-solid)",
+              border: "1px solid var(--gray-a3)",
+              borderRadius: 12,
+              boxShadow:
+                "0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02)",
+              cursor: "pointer",
+              textAlign: "left",
+              width: "100%",
+              transition: "border-color 0.15s ease, box-shadow 0.15s ease",
+            }}
+            whileHover={{
+              borderColor: `var(--${config.color}-6)`,
+              boxShadow:
+                "0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04)",
+            }}
+          >
+            <Flex
+              align="center"
+              justify="center"
+              style={{
+                width: 32,
+                height: 32,
+                borderRadius: 8,
+                backgroundColor: `var(--${config.color}-3)`,
+                flexShrink: 0,
+                marginTop: 2,
+              }}
+            >
+              <TaskIcon
+                size={18}
+                weight="duotone"
+                color={`var(--${config.color}-9)`}
+              />
+            </Flex>
+            <Flex direction="column" gap="1" style={{ flex: 1, minWidth: 0 }}>
+              <Flex align="center" justify="between" gap="2">
+                <Text
+                  size="2"
+                  weight="medium"
+                  style={{ color: "var(--gray-12)" }}
+                >
+                  {task.title}
+                </Text>
+                <ArrowRight
+                  size={14}
+                  color="var(--gray-8)"
+                  style={{ flexShrink: 0 }}
+                />
+              </Flex>
+              <Text
+                size="1"
+                style={{
+                  color: "var(--gray-11)",
+                  lineHeight: 1.5,
+                }}
+              >
+                {task.description}
+              </Text>
+              {task.file && (
+                <Text
+                  size="1"
+                  style={{
+                    color: "var(--gray-9)",
+                    fontStyle: "italic",
+                    marginTop: 2,
+                  }}
+                >
+                  {task.file}
+                  {task.lineHint ? `:${task.lineHint}` : ""}
+                </Text>
+              )}
+            </Flex>
+          </motion.button>
+        );
+      })}
+    </Flex>
+  );
+}

apps/code/src/renderer/features/onboarding/stores/onboardingStore.ts

@@ -8,6 +8,7 @@ const log = logger.scope("onboarding-store");
 interface OnboardingStoreState {
   currentStep: OnboardingStep;
   hasCompletedOnboarding: boolean;
+  hasCompletedSetup: boolean;
   isConnectingGithub: boolean;
   selectedProjectId: number | null;
   selectedDirectory: string;
@@ -16,6 +17,7 @@ interface OnboardingStoreState {
 interface OnboardingStoreActions {
   setCurrentStep: (step: OnboardingStep) => void;
   completeOnboarding: () => void;
+  completeSetup: () => void;
   resetOnboarding: () => void;
   resetSelections: () => void;
   setConnectingGithub: (isConnecting: boolean) => void;
@@ -28,6 +30,7 @@ type OnboardingStore = OnboardingStoreState & OnboardingStoreActions;
 const initialState: OnboardingStoreState = {
   currentStep: "welcome",
   hasCompletedOnboarding: false,
+  hasCompletedSetup: false,
   isConnectingGithub: false,
   selectedProjectId: null,
   selectedDirectory: "",
@@ -43,6 +46,7 @@ export const useOnboardingStore = create<OnboardingStore>()(
         log.info("completeOnboarding");
         set({ hasCompletedOnboarding: true });
       },
+      completeSetup: () => set({ hasCompletedSetup: true }),
       resetOnboarding: () => set({ ...initialState }),
       resetSelections: () =>
         set({
@@ -59,6 +63,7 @@ export const useOnboardingStore = create<OnboardingStore>()(
       partialize: (state) => ({
         currentStep: state.currentStep,
         hasCompletedOnboarding: state.hasCompletedOnboarding,
+        hasCompletedSetup: state.hasCompletedSetup,
         selectedProjectId: state.selectedProjectId,
         selectedDirectory: state.selectedDirectory,
       }),