feat: Revamped onboarding

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,10 @@
+import { execFile } from "node:child_process";
 import fs from "node:fs";
 import path from "node:path";
+import { promisify } from "node:util";
+
+const execFileAsync = promisify(execFile);
+
 import { execGh } from "@posthog/git/gh";
 import {
   getAllBranches,
@@ -53,6 +58,7 @@ import type {
   GitHubIssue,
   GitRepoInfo,
   GitStateSnapshot,
+  GitStatusOutput,
   GitSyncStatus,
   OpenPrOutput,
   PrActionType,
@@ -683,6 +689,16 @@ export class GitService extends TypedEventEmitter<GitServiceEvents> {
     };
   }
 
+  public async getGitStatus(): Promise<GitStatusOutput> {
+    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 +715,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

@@ -137,6 +137,11 @@ function App() {
     }),
   );
 
+  const needsInviteCode =
+    isAuthenticated && hasCodeAccess === false && hasCompletedOnboarding;
+  const isCheckingAccess =
+    isAuthenticated && hasCodeAccess === null && hasCompletedOnboarding;
+
   // Handle transition into main app — only show the dark overlay if dark mode is active
   useEffect(() => {
     const isInMainApp = isAuthenticated && hasCompletedOnboarding;
@@ -164,8 +169,16 @@ function App() {
     );
   }
 
-  // Four-phase rendering: auth → access gate → onboarding → main app
+  // Rendering: onboarding (includes auth + invite code 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 }}>
@@ -174,10 +187,9 @@ function App() {
       );
     }
 
-    // Access check loading state
-    if (hasCodeAccess === null) {
+    if (isCheckingAccess) {
       return (
-        <motion.div key="access-check">
+        <motion.div key="access-check" initial={{ opacity: 1 }}>
           <Flex align="center" justify="center" minHeight="100vh">
             <Flex align="center" gap="3">
               <Spinner size="3" />
@@ -188,23 +200,14 @@ function App() {
       );
     }
 
-    // Access gate: show invite code screen if flag is not enabled
-    if (!hasCodeAccess) {
+    if (needsInviteCode) {
       return (
-        <motion.div key="invite-code">
+        <motion.div key="invite-code" initial={{ opacity: 1 }}>
           <InviteCodeScreen />
         </motion.div>
       );
     }
 
-    if (!hasCompletedOnboarding) {
-      return (
-        <motion.div key="onboarding">
-          <OnboardingFlow />
-        </motion.div>
-      );
-    }
-
     return (
       <motion.div
         key="main"

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

@@ -1123,7 +1123,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/FullScreenLayout.tsx

@@ -0,0 +1,111 @@
+import { Lifebuoy } from "@phosphor-icons/react";
+import { Button, Flex, Theme } from "@radix-ui/themes";
+import phWordmark from "@renderer/assets/images/wordmark.svg";
+import phWordmarkWhite from "@renderer/assets/images/wordmark-white.svg";
+import { trpcClient } from "@renderer/trpc/client";
+import { useThemeStore } from "@stores/themeStore";
+import { EXTERNAL_LINKS } from "@utils/links";
+import type { ReactNode } from "react";
+import { DotPatternBackground } from "./DotPatternBackground";
+import { DraggableTitleBar } from "./DraggableTitleBar";
+
+interface FullScreenLayoutProps {
+  children: ReactNode;
+  footerLeft?: ReactNode;
+  footerRight?: ReactNode;
+}
+
+export function FullScreenLayout({
+  children,
+  footerLeft,
+  footerRight,
+}: FullScreenLayoutProps) {
+  const isDarkMode = useThemeStore((state) => state.isDarkMode);
+
+  return (
+    <Theme
+      appearance={isDarkMode ? "dark" : "light"}
+      accentColor={isDarkMode ? "yellow" : "orange"}
+      radius="medium"
+    >
+      <Flex
+        direction="column"
+        height="100vh"
+        style={{ position: "relative", overflow: "hidden" }}
+      >
+        <DraggableTitleBar />
+
+        <div
+          style={{
+            position: "absolute",
+            inset: 0,
+            backgroundColor: "var(--color-background)",
+          }}
+        />
+        <DotPatternBackground />
+
+        <Flex
+          direction="column"
+          flexGrow="1"
+          style={{
+            position: "relative",
+            zIndex: 1,
+            minHeight: 0,
+            width: "100%",
+          }}
+        >
+          <img
+            src={isDarkMode ? phWordmarkWhite : phWordmark}
+            alt="PostHog"
+            style={{
+              height: "40px",
+              objectFit: "contain",
+              alignSelf: "flex-start",
+              marginLeft: 32,
+              marginTop: "clamp(24px, 6vh, 80px)",
+              flexShrink: 0,
+            }}
+          />
+
+          <Flex
+            direction="column"
+            flexGrow="1"
+            overflow="hidden"
+            style={{ minHeight: 0 }}
+          >
+            {children}
+          </Flex>
+
+          <Flex
+            justify="between"
+            style={{
+              position: "absolute",
+              bottom: 20,
+              left: 32,
+              right: 32,
+              zIndex: 2,
+            }}
+          >
+            {footerLeft ?? (
+              <Button
+                size="1"
+                variant="ghost"
+                color="gray"
+                onClick={() =>
+                  trpcClient.os.openExternal.mutate({
+                    url: EXTERNAL_LINKS.discord,
+                  })
+                }
+                style={{ opacity: 0.5 }}
+              >
+                <Lifebuoy size={14} />
+                Get support
+              </Button>
+            )}
+            {footerRight ?? <div />}
+          </Flex>
+        </Flex>
+      </Flex>
+    </Theme>
+  );
+}