feat: Revamped onboarding

apps/code/package.json

@@ -147,6 +147,9 @@
     "@trpc/client": "^11.12.0",
     "@trpc/server": "^11.12.0",
     "@trpc/tanstack-react-query": "^11.12.0",
+    "@tsparticles/engine": "^3.9.1",
+    "@tsparticles/react": "^3.0.0",
+    "@tsparticles/slim": "^3.9.1",
     "@xterm/addon-fit": "^0.10.0",
     "@xterm/addon-serialize": "^0.13.0",
     "@xterm/addon-web-links": "^0.11.0",

apps/code/src/main/services/git/schemas.ts

@@ -212,6 +212,14 @@ export const commitInput = z.object({
 
 export type CommitInput = z.infer<typeof commitInput>;
 
+// Git CLI status
+export const gitStatusOutput = z.object({
+  installed: z.boolean(),
+  version: z.string().nullable(),
+});
+
+export type GitStatusOutput = z.infer<typeof gitStatusOutput>;
+
 // GitHub CLI status
 export const ghStatusOutput = z.object({
   installed: z.boolean(),

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

@@ -1,5 +1,7 @@
+import { execFile } from "node:child_process";
 import fs from "node:fs";
 import path from "node:path";
+import { promisify } from "node:util";
 import { execGh } from "@posthog/git/gh";
 import {
   getAllBranches,
@@ -53,6 +55,7 @@ import type {
   GitHubIssue,
   GitRepoInfo,
   GitStateSnapshot,
+  GitStatusOutput,
   GitSyncStatus,
   OpenPrOutput,
   PrActionType,
@@ -683,6 +686,17 @@ export class GitService extends TypedEventEmitter<GitServiceEvents> {
     };
   }
 
+  public async getGitStatus(): Promise<GitStatusOutput> {
+    const execFileAsync = promisify(execFile);
+    try {
+      const { stdout } = await execFileAsync("git", ["--version"]);
+      const version = stdout.trim().replace("git version ", "");
+      return { installed: true, version };
+    } catch {
+      return { installed: false, version: null };
+    }
+  }
+
   public async getGhStatus(): Promise<GhStatusOutput> {
     const versionResult = await execGh(["--version"]);
     if (versionResult.exitCode !== 0) {
@@ -699,7 +713,9 @@ export class GitService extends TypedEventEmitter<GitServiceEvents> {
     const authResult = await execGh(["auth", "status"]);
     const authenticated = authResult.exitCode === 0;
     const authOutput = `${authResult.stdout}\n${authResult.stderr}`;
-    const usernameMatch = authOutput.match(/Logged in to github.com as (\S+)/);
+    const usernameMatch = authOutput.match(
+      /Logged in to github.com (?:as |account )(\S+)/,
+    );
 
     return {
       installed: true,

apps/code/src/main/trpc/routers/git.ts

@@ -51,6 +51,7 @@ import {
   ghAuthTokenOutput,
   ghStatusOutput,
   gitStateSnapshotSchema,
+  gitStatusOutput,
   openPrInput,
   openPrOutput,
   prStatusInput,
@@ -269,6 +270,10 @@ export const gitRouter = router({
       getService().sync(input.directoryPath, input.remote),
     ),
 
+  getGitStatus: publicProcedure
+    .output(gitStatusOutput)
+    .query(() => getService().getGitStatus()),
+
   getGhStatus: publicProcedure
     .output(ghStatusOutput)
     .query(() => getService().getGhStatus()),

apps/code/src/renderer/App.tsx

@@ -156,8 +156,16 @@ function App() {
     );
   }
 
-  // Four-phase rendering: auth → access gate → onboarding → main app
+  // Rendering: onboarding → auth → access gate → main app
   const renderContent = () => {
+    if (!hasCompletedOnboarding) {
+      return (
+        <motion.div key="onboarding" initial={{ opacity: 1 }}>
+          <OnboardingFlow />
+        </motion.div>
+      );
+    }
+
     if (!isAuthenticated) {
       return (
         <motion.div key="auth" initial={{ opacity: 1 }}>
@@ -189,14 +197,6 @@ function App() {
       );
     }
 
-    if (!hasCompletedOnboarding) {
-      return (
-        <motion.div key="onboarding">
-          <OnboardingFlow />
-        </motion.div>
-      );
-    }
-
     return (
       <motion.div
         key="main"

apps/code/src/renderer/api/posthogClient.ts

@@ -1096,7 +1096,8 @@ export class PostHogAPIClient {
 
     const data = await response.json();
 
-    const repos = data.repositories ?? data.results ?? data ?? [];
+    const repos =
+      data.repositories ?? data.results ?? (Array.isArray(data) ? data : []);
     return repos.map((repo: string | { full_name?: string; name?: string }) => {
       if (typeof repo === "string") return repo;
       return (repo.full_name ?? repo.name ?? "").toLowerCase();

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

@@ -0,0 +1,45 @@
+import { useId } from "react";
+
+const DOT_FILL = "var(--gray-6)";
+
+interface DotPatternBackgroundProps {
+  style?: React.CSSProperties;
+}
+
+export function DotPatternBackground({ style }: DotPatternBackgroundProps) {
+  const patternId = useId();
+
+  return (
+    <svg
+      aria-hidden="true"
+      style={{
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+        opacity: 0.4,
+        maskImage: "linear-gradient(to top, black 0%, transparent 100%)",
+        WebkitMaskImage: "linear-gradient(to top, black 0%, transparent 100%)",
+        ...style,
+      }}
+    >
+      <defs>
+        <pattern
+          id={patternId}
+          patternUnits="userSpaceOnUse"
+          width="8"
+          height="8"
+        >
+          <circle cx="0" cy="0" r="1" fill={DOT_FILL} />
+          <circle cx="0" cy="8" r="1" fill={DOT_FILL} />
+          <circle cx="8" cy="8" r="1" fill={DOT_FILL} />
+          <circle cx="8" cy="0" r="1" fill={DOT_FILL} />
+          <circle cx="4" cy="4" r="1" fill={DOT_FILL} />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill={`url(#${patternId})`} />
+    </svg>
+  );
+}

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

@@ -9,6 +9,7 @@ import { CommandCenterView } from "@features/command-center/components/CommandCe
 import { InboxView } from "@features/inbox/components/InboxView";
 import { FolderSettingsView } from "@features/settings/components/FolderSettingsView";
 import { SettingsDialog } from "@features/settings/components/SettingsDialog";
+import { SetupView } from "@features/setup/components/SetupView";
 import { MainSidebar } from "@features/sidebar/components/MainSidebar";
 import { SkillsView } from "@features/skills/components/SkillsView";
 import { TaskDetail } from "@features/task-detail/components/TaskDetail";
@@ -80,6 +81,8 @@ export function MainLayout() {
           {view.type === "command-center" && <CommandCenterView />}
 
           {view.type === "skills" && <SkillsView />}
+
+          {view.type === "setup" && <SetupView />}
         </Box>
       </Flex>