feat: add worktree provisioning view (#1300)

replace the long loading times for worktree creation with a view which displays the git stream of setting up a worktree, including any hooks that get triggered by that command

Author: jonathanlab

.posthog-code/environments/twig.toml

@@ -0,0 +1,7 @@
+id = "a5fe304a-8007-4435-951f-fcc982247457" # DO NOT EDIT MANUALLY
+version = 1
+
+name = "twig"
+
+[setup]
+script = "pnpm install"

apps/code/src/main/di/container.ts

@@ -30,6 +30,7 @@ import { NotificationService } from "../services/notification/service";
 import { OAuthService } from "../services/oauth/service";
 import { PosthogPluginService } from "../services/posthog-plugin/service";
 import { ProcessTrackingService } from "../services/process-tracking/service";
+import { ProvisioningService } from "../services/provisioning/service";
 import { settingsStore } from "../services/settingsStore";
 import { ShellService } from "../services/shell/service";
 import { SleepService } from "../services/sleep/service";
@@ -61,6 +62,7 @@ container.bind(MAIN_TOKENS.ConnectivityService).to(ConnectivityService);
 container.bind(MAIN_TOKENS.ContextMenuService).to(ContextMenuService);
 container.bind(MAIN_TOKENS.DeepLinkService).to(DeepLinkService);
 container.bind(MAIN_TOKENS.EnvironmentService).to(EnvironmentService);
+container.bind(MAIN_TOKENS.ProvisioningService).to(ProvisioningService);
 
 container.bind(MAIN_TOKENS.ExternalAppsService).to(ExternalAppsService);
 container.bind(MAIN_TOKENS.LlmGatewayService).to(LlmGatewayService);

apps/code/src/main/di/tokens.ts

@@ -49,5 +49,6 @@ export const MAIN_TOKENS = Object.freeze({
   TaskLinkService: Symbol.for("Main.TaskLinkService"),
   WatcherRegistryService: Symbol.for("Main.WatcherRegistryService"),
   EnvironmentService: Symbol.for("Main.EnvironmentService"),
+  ProvisioningService: Symbol.for("Main.ProvisioningService"),
   WorkspaceService: Symbol.for("Main.WorkspaceService"),
 });

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

@@ -0,0 +1,22 @@
+import { injectable } from "inversify";
+import { TypedEventEmitter } from "../../utils/typed-event-emitter";
+
+export const ProvisioningEvent = {
+  Output: "output",
+} as const;
+
+export interface ProvisioningOutputPayload {
+  taskId: string;
+  data: string;
+}
+
+export interface ProvisioningServiceEvents {
+  [ProvisioningEvent.Output]: ProvisioningOutputPayload;
+}
+
+@injectable()
+export class ProvisioningService extends TypedEventEmitter<ProvisioningServiceEvents> {
+  emitOutput(taskId: string, data: string): void {
+    this.emit(ProvisioningEvent.Output, { taskId, data });
+  }
+}

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

@@ -11,6 +11,7 @@ export const worktreeInfoSchema = z.object({
   branchName: z.string().nullable(),
   baseBranch: z.string(),
   createdAt: z.string(),
+  output: z.string().optional(),
 });
 
 export const workspaceInfoSchema = z.object({

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

@@ -28,6 +28,7 @@ import type { FileWatcherService } from "../file-watcher/service";
 import type { FocusService } from "../focus/service";
 import { FocusServiceEvent } from "../focus/service";
 import type { ProcessTrackingService } from "../process-tracking/service";
+import type { ProvisioningService } from "../provisioning/service";
 import { getWorktreeLocation } from "../settingsStore";
 import type { SuspensionService } from "../suspension/service.js";
 import type {
@@ -128,6 +129,9 @@ export class WorkspaceService extends TypedEventEmitter<WorkspaceServiceEvents>
   @inject(MAIN_TOKENS.SuspensionService)
   private suspensionService!: SuspensionService;
 
+  @inject(MAIN_TOKENS.ProvisioningService)
+  private provisioningService!: ProvisioningService;
+
   private creatingWorkspaces = new Map<string, Promise<WorkspaceInfo>>();
   private branchWatcherInitialized = false;
 
@@ -448,12 +452,17 @@ export class WorkspaceService extends TypedEventEmitter<WorkspaceServiceEvents>
       const selectedBranch = branch ?? defaultBranch;
       const isTrunkSelected = selectedBranch === defaultBranch;
 
+      const onOutput = (data: string) => {
+        this.provisioningService.emitOutput(taskId, data);
+      };
+
       if (isTrunkSelected) {
         log.info(
           `Trunk branch selected (${defaultBranch}), creating detached worktree`,
         );
         worktree = await worktreeManager.createWorktree({
           baseBranch: defaultBranch,
+          onOutput,
         });
         log.info(
           `Created detached worktree from trunk: ${worktree.worktreeName} at ${worktree.worktreePath}`,
@@ -463,10 +472,11 @@ export class WorkspaceService extends TypedEventEmitter<WorkspaceServiceEvents>
           `Non-trunk branch selected (${selectedBranch}), attempting checkout`,
         );
         try {
-          worktree =
-            await worktreeManager.createWorktreeForExistingBranch(
-              selectedBranch,
-            );
+          worktree = await worktreeManager.createWorktreeForExistingBranch(
+            selectedBranch,
+            undefined,
+            { onOutput },
+          );
           log.info(
             `Created worktree with branch checkout: ${worktree.worktreeName} at ${worktree.worktreePath} (branch: ${selectedBranch})`,
           );
@@ -481,6 +491,7 @@ export class WorkspaceService extends TypedEventEmitter<WorkspaceServiceEvents>
             );
             worktree = await worktreeManager.createWorktree({
               baseBranch: selectedBranch,
+              onOutput,
             });
             log.info(
               `Created detached worktree from occupied branch: ${worktree.worktreeName} at ${worktree.worktreePath}`,

apps/code/src/main/trpc/router.ts

@@ -22,6 +22,7 @@ import { notificationRouter } from "./routers/notification";
 import { oauthRouter } from "./routers/oauth";
 import { osRouter } from "./routers/os";
 import { processTrackingRouter } from "./routers/process-tracking";
+import { provisioningRouter } from "./routers/provisioning";
 import { secureStoreRouter } from "./routers/secure-store";
 import { shellRouter } from "./routers/shell";
 import { skillsRouter } from "./routers/skills";
@@ -57,6 +58,7 @@ export const trpcRouter = router({
   logs: logsRouter,
   os: osRouter,
   processTracking: processTrackingRouter,
+  provisioning: provisioningRouter,
   sleep: sleepRouter,
   suspension: suspensionRouter,
   secureStore: secureStoreRouter,

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

@@ -0,0 +1,21 @@
+import { container } from "../../di/container";
+import { MAIN_TOKENS } from "../../di/tokens";
+import {
+  ProvisioningEvent,
+  type ProvisioningService,
+} from "../../services/provisioning/service";
+import { publicProcedure, router } from "../trpc";
+
+const getService = () =>
+  container.get<ProvisioningService>(MAIN_TOKENS.ProvisioningService);
+
+export const provisioningRouter = router({
+  onOutput: publicProcedure.subscription(async function* (opts) {
+    const service = getService();
+    for await (const data of service.toIterable(ProvisioningEvent.Output, {
+      signal: opts.signal,
+    })) {
+      yield data;
+    }
+  }),
+});

apps/code/src/renderer/features/environments/components/EnvironmentSelector.tsx

@@ -32,8 +32,10 @@ export function EnvironmentSelector({
   const selectedEnvironment = environments.find((env) => env.id === value);
   const displayText = selectedEnvironment?.name ?? "No environment";
 
+  const NONE_VALUE = "__none__";
+
   const handleChange = (newValue: string) => {
-    onChange(newValue || null);
+    onChange(newValue === NONE_VALUE ? null : newValue || null);
     setOpen(false);
   };
 
@@ -70,6 +72,9 @@ export function EnvironmentSelector({
           <Combobox.Empty>No environments found.</Combobox.Empty>
 
           <Combobox.Group heading="Environments">
+            <Combobox.Item key={NONE_VALUE} value={NONE_VALUE}>
+              No environment
+            </Combobox.Item>
             {environments.map((env) => (
               <Combobox.Item
                 key={env.id}

apps/code/src/renderer/features/provisioning/components/ProvisioningView.tsx

@@ -0,0 +1,101 @@
+import { BackgroundWrapper } from "@components/BackgroundWrapper";
+import { Box, Flex, Spinner, Text } from "@radix-ui/themes";
+import { useTRPC } from "@renderer/trpc/client";
+import { useSubscription } from "@trpc/tanstack-react-query";
+import { useEffect, useRef, useState } from "react";
+
+interface ProvisioningViewProps {
+  taskId: string;
+}
+
+// biome-ignore lint/suspicious/noControlCharactersInRegex: ESC is required to strip ANSI sequences
+const ANSI_RE = /\x1b\[[0-9;]*[A-Za-z]/g;
+
+function stripAnsi(text: string): string {
+  return text.replace(ANSI_RE, "");
+}
+
+function processOutput(lines: string[], chunk: string): string[] {
+  const next = [...lines];
+  const parts = chunk.split("\n");
+
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i];
+    const crSegments = part.split("\r");
+    const lastSegment = crSegments[crSegments.length - 1];
+
+    if (i === 0 && next.length > 0) {
+      if (crSegments.length > 1) {
+        next[next.length - 1] = lastSegment;
+      } else {
+        next[next.length - 1] += lastSegment;
+      }
+    } else {
+      next.push(lastSegment);
+    }
+  }
+
+  return next;
+}
+
+export function ProvisioningView({ taskId }: ProvisioningViewProps) {
+  const trpc = useTRPC();
+  const [lines, setLines] = useState<string[]>([]);
+  const scrollRef = useRef<HTMLPreElement>(null);
+
+  useSubscription(
+    trpc.provisioning.onOutput.subscriptionOptions(undefined, {
+      onData: (data) => {
+        if (data.taskId !== taskId) return;
+        setLines((prev) => processOutput(prev, stripAnsi(data.data)));
+      },
+    }),
+  );
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (el) {
+      el.scrollTop = el.scrollHeight;
+    }
+  }, []);
+
+  return (
+    <BackgroundWrapper>
+      <Flex direction="column" height="100%" p="3" gap="2">
+        <Flex align="center" gap="2">
+          <Spinner size="1" />
+          <Text size="1" weight="medium">
+            Setting up worktree...
+          </Text>
+        </Flex>
+        <Box
+          style={{
+            flex: 1,
+            minHeight: 0,
+            borderRadius: "var(--radius-2)",
+            background: "var(--color-surface)",
+            border: "1px solid var(--gray-a5)",
+          }}
+        >
+          <pre
+            ref={scrollRef}
+            style={{
+              margin: 0,
+              padding: "var(--space-2)",
+              height: "100%",
+              overflow: "auto",
+              fontSize: "var(--font-size-1)",
+              lineHeight: "var(--line-height-2)",
+              fontFamily: "var(--code-font-family)",
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-all",
+              color: "var(--gray-12)",
+            }}
+          >
+            {lines.join("\n")}
+          </pre>
+        </Box>
+      </Flex>
+    </BackgroundWrapper>
+  );
+}