Move PR checkout flow to dialog and drop /checkout-pr command

- Replace the inline composer PR menu with a dedicated `PullRequestThreadDialog` - Remove `/checkout-pr` from composer slash-command parsing and tests - Fix branch selector virtualization sizing for the checkout-PR row

Julius Marminge committed 8 months ago

Commit d28ced81 parent 07660805 files · +154 −166Browse files

Unified · Split

5 files

apps/web/src/components/BranchToolbarBranchSelector.tsx +3 −2
apps/web/src/components/ChatView.tsx +46 −79
apps/web/src/components/PullRequestThreadDialog.tsx +99 −77
apps/web/src/composer-logic.test.ts +4 −4
apps/web/src/composer-logic.ts +2 −4

apps/web/src/components/BranchToolbarBranchSelector.tsx+3−2

   const branchListScrollElementRef = useRef<HTMLDivElement | null>(null);
   const branchListVirtualizer = useVirtualizer({
     count: filteredBranchPickerItems.length,
-    estimateSize: () => 28,
+    estimateSize: (index) =>
+      filteredBranchPickerItems[index] === checkoutPullRequestItemValue ? 44 : 28,
     getScrollElement: () => branchListScrollElementRef.current,
     overscan: 12,
     enabled: isBranchMenuOpen && shouldVirtualizeBranchList,
       items={branchPickerItems}
       filteredItems={filteredBranchPickerItems}
       autoHighlight
-      virtualized
+      virtualized={shouldVirtualizeBranchList}
       onItemHighlighted={(_value, eventDetails) => {
         if (!isBranchMenuOpen || eventDetails.index < 0) return;
         branchListVirtualizer.scrollToIndex(eventDetails.index, { align: "auto" });

apps/web/src/components/ChatView.tsx+46−79

   type TurnDiffTreeNode,
 } from "../lib/turnDiffTree";
 import BranchToolbar from "./BranchToolbar";
-import { ComposerPullRequestCommandMenu } from "./ComposerPullRequestCommandMenu";
 import GitActionsControl from "./GitActionsControl";
 import {
   isOpenFavoriteEditorShortcut,
 import { selectThreadTerminalState, useTerminalStateStore } from "../terminalStateStore";
 import { clamp } from "effect/Number";
 import { ComposerPromptEditor, type ComposerPromptEditorHandle } from "./ComposerPromptEditor";
+import { PullRequestThreadDialog } from "./PullRequestThreadDialog";
 import { estimateTimelineMessageHeight } from "./timelineHeight";
 function formatMessageMeta(createdAt: string, duration: string | null): string {
 type SendPhase = "idle" | "preparing-worktree" | "sending-turn";
-interface PullRequestComposerMenuState {
+interface PullRequestDialogState {
   initialReference: string | null;
   key: number;
 }
   const [nowTick, setNowTick] = useState(() => Date.now());
   const [terminalFocusRequestId, setTerminalFocusRequestId] = useState(0);
   const [composerHighlightedItemId, setComposerHighlightedItemId] = useState<string | null>(null);
-  const [pullRequestComposerMenuState, setPullRequestComposerMenuState] =
+  const [pullRequestDialogState, setPullRequestDialogState] = useState<PullRequestDialogState | null>(
-    useState<PullRequestComposerMenuState | null>(null);
+    null,
+  );
   const [attachmentPreviewHandoffByMessageId, setAttachmentPreviewHandoffByMessageId] = useState<
     Record<string, string[]>
   >({});
   const latestTurnSettled = isLatestTurnSettled(activeLatestTurn, activeThread?.session ?? null);
   const activeProject = projects.find((p) => p.id === activeThread?.projectId);
-  const openPullRequestComposerMenu = useCallback((reference?: string) => {
+  const openPullRequestDialog = useCallback((reference?: string) => {
     if (!canCheckoutPullRequestIntoThread) {
       return;
     }
-    setPullRequestComposerMenuState({
+    setPullRequestDialogState({
       initialReference: reference ?? null,
       key: Date.now(),
     });
     setComposerHighlightedItemId(null);
   }, [canCheckoutPullRequestIntoThread]);
-  const closePullRequestComposerMenu = useCallback(() => {
+  const closePullRequestDialog = useCallback(() => {
-    setPullRequestComposerMenuState(null);
+    setPullRequestDialogState(null);
   }, []);
   const openOrReuseProjectDraftThread = useCallback(
     timelineEntries,
   ]);
   const gitCwd = activeThread?.worktreePath ?? activeProject?.cwd ?? null;
-  const pullRequestComposerMenuOpen = pullRequestComposerMenuState !== null;
   const composerTriggerKind = composerTrigger?.kind ?? null;
   const pathTriggerQuery = composerTrigger?.kind === "path" ? composerTrigger.query : "";
   const isPathTrigger = composerTriggerKind === "path";
           label: "/default",
           description: "Switch this thread back to normal chat mode",
         },
-        {
-          id: "slash:checkout-pr",
-          type: "slash-command",
-          command: "checkout-pr",
-          label: "/checkout-pr",
-          description: "Create a new thread from a GitHub pull request",
-        },
       ] satisfies ReadonlyArray<Extract<ComposerCommandItem, { type: "slash-command" }>>;
-      const availableSlashCommandItems = canCheckoutPullRequestIntoThread
-        ? slashCommandItems
-        : slashCommandItems.filter((item) => item.command !== "checkout-pr");
       const query = composerTrigger.query.trim().toLowerCase();
       if (!query) {
-        return [...availableSlashCommandItems];
+        return [...slashCommandItems];
       }
-      return availableSlashCommandItems.filter(
+      return slashCommandItems.filter(
         (item) => item.command.includes(query) || item.label.slice(1).includes(query),
       );
     }
         label: name,
         description: `${providerLabel} · ${slug}`,
       }));
-  }, [canCheckoutPullRequestIntoThread, composerTrigger, searchableModelOptions, workspaceEntries]);
+  }, [composerTrigger, searchableModelOptions, workspaceEntries]);
-  const composerMenuOpen = Boolean(composerTrigger) || pullRequestComposerMenuOpen;
+  const composerMenuOpen = Boolean(composerTrigger);
   const activeComposerMenuItem = useMemo(
     () =>
-      pullRequestComposerMenuOpen
+      composerMenuItems.find((item) => item.id === composerHighlightedItemId) ??
-        ? null
+      composerMenuItems[0] ??
-        : (composerMenuItems.find((item) => item.id === composerHighlightedItemId) ??
+      null,
-          composerMenuItems[0] ??
+    [composerHighlightedItemId, composerMenuItems],
-          null),
-    [composerHighlightedItemId, composerMenuItems, pullRequestComposerMenuOpen],
   );
   composerMenuOpenRef.current = composerMenuOpen;
   composerMenuItemsRef.current = composerMenuItems;
   useEffect(() => {
     setExpandedWorkGroups({});
-    setPullRequestComposerMenuState(null);
+    setPullRequestDialogState(null);
     if (planSidebarOpenOnNextThreadRef.current) {
       planSidebarOpenOnNextThreadRef.current = false;
       setPlanSidebarOpen(true);
       setComposerHighlightedItemId(null);
       return;
     }
-    if (pullRequestComposerMenuOpen) {
-      setComposerHighlightedItemId(null);
-      return;
-    }
     setComposerHighlightedItemId((existing) =>
       existing && composerMenuItems.some((item) => item.id === existing)
         ? existing
         : (composerMenuItems[0]?.id ?? null),
     );
-  }, [composerMenuItems, composerMenuOpen, pullRequestComposerMenuOpen]);
+  }, [composerMenuItems, composerMenuOpen]);
   useEffect(() => {
     setIsRevertingCheckpoint(false);
     }
     const standaloneSlashCommand =
       composerImages.length === 0 ? parseStandaloneComposerSlashCommand(trimmed) : null;
-    const shouldHandleStandaloneSlashCommand =
+    if (standaloneSlashCommand) {
-      standaloneSlashCommand !== null &&
+      await handleInteractionModeChange(standaloneSlashCommand);
-      (standaloneSlashCommand !== "checkout-pr" || canCheckoutPullRequestIntoThread);
-    if (shouldHandleStandaloneSlashCommand && standaloneSlashCommand) {
-      if (standaloneSlashCommand === "checkout-pr") {
-        openPullRequestComposerMenu();
-      } else {
-        await handleInteractionModeChange(standaloneSlashCommand);
-      }
       promptRef.current = "";
       clearComposerDraftContent(activeThread.id);
       setComposerHighlightedItemId(null);
           }
           return;
         }
-        if (item.command === "checkout-pr") {
+        void handleInteractionModeChange(item.command === "plan" ? "plan" : "default");
-          openPullRequestComposerMenu();
-        } else {
-          void handleInteractionModeChange(item.command === "plan" ? "plan" : "default");
-        }
         const applied = applyPromptReplacement(trigger.rangeStart, trigger.rangeEnd, "", {
           expectedText: expectedToken,
         });
     [
       applyPromptReplacement,
       handleInteractionModeChange,
-      openPullRequestComposerMenu,
       onProviderModelSelect,
       resolveActiveComposerTrigger,
     ],
     const { trigger } = resolveActiveComposerTrigger();
     const menuIsActive = composerMenuOpenRef.current || trigger !== null;
-    if (pullRequestComposerMenuOpen) {
-      if (key === "ArrowDown" || key === "ArrowUp" || key === "Tab" || key === "Enter") {
-        return true;
-      }
-    }
     if (menuIsActive) {
       const currentItems = composerMenuItemsRef.current;
       if (key === "ArrowDown" && currentItems.length > 0) {
                 >
                   {composerMenuOpen && !isComposerApprovalState && (
                     <div className="absolute inset-x-0 bottom-full z-20 mb-2 px-1">
-                      {pullRequestComposerMenuState ? (
+                      <ComposerCommandMenu
-                        <ComposerPullRequestCommandMenu
+                        items={composerMenuItems}
-                          key={pullRequestComposerMenuState.key}
+                        resolvedTheme={resolvedTheme}
-                          cwd={activeProject?.cwd ?? null}
+                        isLoading={isComposerMenuLoading}
-                          initialReference={pullRequestComposerMenuState.initialReference}
+                        triggerKind={composerTriggerKind}
-                          onCancel={closePullRequestComposerMenu}
+                        activeItemId={activeComposerMenuItem?.id ?? null}
-                          onPrepared={async (input) => {
+                        onHighlightedItemChange={onComposerMenuItemHighlighted}
-                            await handlePreparedPullRequestThread(input);
+                        onSelect={onSelectComposerItem}
-                            closePullRequestComposerMenu();
+                      />
-                          }}
-                        />
-                      ) : (
-                        <ComposerCommandMenu
-                          items={composerMenuItems}
-                          resolvedTheme={resolvedTheme}
-                          isLoading={isComposerMenuLoading}
-                          triggerKind={composerTriggerKind}
-                          activeItemId={activeComposerMenuItem?.id ?? null}
-                          onHighlightedItemChange={onComposerMenuItemHighlighted}
-                          onSelect={onSelectComposerItem}
-                        />
-                      )}
                     </div>
                   )}
               envLocked={envLocked}
               onComposerFocusRequest={scheduleComposerFocus}
               {...(canCheckoutPullRequestIntoThread
-                ? { onCheckoutPullRequestRequest: openPullRequestComposerMenu }
+                ? { onCheckoutPullRequestRequest: openPullRequestDialog }
                 : {})}
             />
           )}
+          {pullRequestDialogState ? (
+            <PullRequestThreadDialog
+              key={pullRequestDialogState.key}
+              open
+              cwd={activeProject?.cwd ?? null}
+              initialReference={pullRequestDialogState.initialReference}
+              onOpenChange={(open) => {
+                if (!open) {
+                  closePullRequestDialog();
+                }
+              }}
+              onPrepared={handlePreparedPullRequestThread}
+            />
+          ) : null}
         </div>{/* end chat column */}
         {/* Plan sidebar */}

apps/web/src/components/PullRequestThreadDialog.tsxrenamed from apps/web/src/components/ComposerPullRequestCommandMenu.tsx+99−77

 import { cn } from "~/lib/utils";
 import { parsePullRequestReference } from "~/pullRequestReference";
 import { Button } from "./ui/button";
+import {
+  Dialog,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogPanel,
+  DialogPopup,
+  DialogTitle,
+} from "./ui/dialog";
 import { Input } from "./ui/input";
 import { Spinner } from "./ui/spinner";
-interface ComposerPullRequestCommandMenuProps {
+interface PullRequestThreadDialogProps {
+  open: boolean;
   cwd: string | null;
   initialReference: string | null;
-  onCancel: () => void;
+  onOpenChange: (open: boolean) => void;
   onPrepared: (input: { branch: string; worktreePath: string | null }) => Promise<void> | void;
 }
-export function ComposerPullRequestCommandMenu({
+export function PullRequestThreadDialog({
+  open,
   cwd,
   initialReference,
-  onCancel,
+  onOpenChange,
   onPrepared,
-}: ComposerPullRequestCommandMenuProps) {
+}: PullRequestThreadDialogProps) {
   const queryClient = useQueryClient();
   const referenceInputRef = useRef<HTMLInputElement>(null);
   const [reference, setReference] = useState(initialReference ?? "");
   );
   useEffect(() => {
+    if (!open) return;
     setReference(initialReference ?? "");
     setReferenceDirty(false);
     setPreparingMode(null);
-  }, [initialReference]);
+  }, [initialReference, open]);
   useEffect(() => {
+    if (!open) return;
     const frame = window.requestAnimationFrame(() => {
       referenceInputRef.current?.focus();
       referenceInputRef.current?.select();
     return () => {
       window.cancelAnimationFrame(frame);
     };
-  }, []);
+  }, [open]);
   const parsedReference = parsePullRequestReference(reference);
   const parsedDebouncedReference = parsePullRequestReference(debouncedReference);
   const resolvePullRequestQuery = useQuery(
     gitResolvePullRequestQueryOptions({
       cwd,
-      reference: parsedDebouncedReference,
+      reference: open ? parsedDebouncedReference : null,
     }),
   );
   const cachedPullRequest = useMemo(() => {
       : null;
   const resolvedPullRequest = liveResolvedPullRequest ?? cachedPullRequest;
   const isResolving =
+    open &&
     parsedReference !== null &&
     resolvedPullRequest === null &&
     (referenceDebouncer.state.isPending ||
         branch: result.branch,
         worktreePath: result.worktreePath,
       });
+      onOpenChange(false);
     } finally {
       setPreparingMode(null);
     }
   }, [
     cwd,
+    onOpenChange,
     onPrepared,
     parsedReference,
     preparePullRequestThreadMutation,
     !referenceDirty
       ? null
       : reference.trim().length === 0
-      ? "Paste a GitHub pull request URL or enter 123 / #123."
+        ? "Paste a GitHub pull request URL or enter 123 / #123."
-      : parsedReference === null
+        : parsedReference === null
-        ? "Use a GitHub pull request URL, 123, or #123."
+          ? "Use a GitHub pull request URL, 123, or #123."
-        : null;
+          : null;
   const errorMessage =
     validationMessage ??
     (resolvedPullRequest === null && resolvePullRequestQuery.isError
             : null));
   return (
-    <div className="overflow-hidden rounded-xl border border-border/80 bg-popover/96 shadow-lg/8 backdrop-blur-xs">
+    <Dialog
-      <div className="space-y-4 p-3">
+      open={open}
-        <div className="space-y-2">
+      onOpenChange={(nextOpen) => {
-          <div className="flex items-center justify-between gap-3">
+        if (!preparePullRequestThreadMutation.isPending) {
-            <div>
+          onOpenChange(nextOpen);
-              <p className="font-medium text-sm">Checkout Pull Request</p>
+        }
-              <p className="text-muted-foreground text-xs">
+      }}
-                Resolve a PR, then choose Local or Worktree for the new draft thread.
+    >
-              </p>
+      <DialogPopup className="max-w-xl">
-            </div>
+        <DialogHeader>
-          </div>
+          <DialogTitle>Checkout Pull Request</DialogTitle>
-          <Input
+          <DialogDescription>
-            autoFocus
+            Resolve a GitHub pull request, then create the draft thread in the main repo or in a
-            ref={referenceInputRef}
+            dedicated worktree.
-            placeholder="https://github.com/owner/repo/pull/42 or #42"
+          </DialogDescription>
-            value={reference}
+        </DialogHeader>
-            onChange={(event) => {
+        <DialogPanel className="space-y-4">
-              setReferenceDirty(true);
+          <label className="grid gap-1.5">
-              setReference(event.target.value);
+            <span className="text-xs font-medium text-foreground">Pull request</span>
-            }}
+            <Input
-            onKeyDown={(event) => {
+              ref={referenceInputRef}
-              if (event.key !== "Enter") {
+              placeholder="https://github.com/owner/repo/pull/42 or #42"
-                return;
+              value={reference}
-              }
+              onChange={(event) => {
-              event.preventDefault();
+                setReferenceDirty(true);
-              if (!isResolving && !preparePullRequestThreadMutation.isPending) {
+                setReference(event.target.value);
-                void handleConfirm("local");
+              }}
-              }
+              onKeyDown={(event) => {
-            }}
+                if (event.key !== "Enter") {
-          />
+                  return;
-        </div>
+                }
+                event.preventDefault();
+                if (!isResolving && !preparePullRequestThreadMutation.isPending) {
+                  void handleConfirm("local");
+                }
+              }}
+            />
+          </label>
-        {resolvedPullRequest ? (
+          {resolvedPullRequest ? (
-          <div className="rounded-xl border border-border/70 bg-muted/24 p-3">
+            <div className="rounded-xl border border-border/70 bg-muted/24 p-3">
-            <div className="flex items-start justify-between gap-3">
+              <div className="flex items-start justify-between gap-3">
-              <div className="min-w-0">
+                <div className="min-w-0">
-                <p className="truncate font-medium text-sm">{resolvedPullRequest.title}</p>
+                  <p className="truncate font-medium text-sm">{resolvedPullRequest.title}</p>
-                <p className="truncate text-muted-foreground text-xs">
+                  <p className="truncate text-muted-foreground text-xs">
-                  #{resolvedPullRequest.number} · {resolvedPullRequest.headBranch} to{" "}
+                    #{resolvedPullRequest.number} · {resolvedPullRequest.headBranch} to{" "}
-                  {resolvedPullRequest.baseBranch}
+                    {resolvedPullRequest.baseBranch}
-                </p>
+                  </p>
+                </div>
+                <span className={cn("shrink-0 text-xs capitalize", statusTone)}>
+                  {resolvedPullRequest.state}
+                </span>
               </div>
-              <span className={cn("shrink-0 text-xs capitalize", statusTone)}>
-                {resolvedPullRequest.state}
-              </span>
             </div>
-          </div>
+          ) : null}
-        ) : null}
-        {isResolving ? (
-          <div className="flex items-center gap-2 text-muted-foreground text-xs">
-            <Spinner className="size-3.5" />
-            Resolving pull request...
-          </div>
-        ) : null}
-        {errorMessage ? <p className="text-destructive text-xs">{errorMessage}</p> : null}
+          {isResolving ? (
-      </div>
+            <div className="flex items-center gap-2 text-muted-foreground text-xs">
+              <Spinner className="size-3.5" />
+              Resolving pull request...
+            </div>
+          ) : null}
-      <div className="flex items-center justify-between gap-2 border-t px-3 py-2">
+          {errorMessage ? <p className="text-destructive text-xs">{errorMessage}</p> : null}
-        <p className="text-muted-foreground text-xs">
+        </DialogPanel>
-          {resolvedPullRequest
+        <DialogFooter>
-            ? "Create the draft thread in the main repo or in a dedicated worktree."
+          <Button
-            : "Resolve the pull request first."}
+            type="button"
-        </p>
+            variant="outline"
-        <div className="flex items-center gap-2">
+            size="sm"
-          <Button type="button" variant="ghost" size="sm" onClick={onCancel}>
+            onClick={() => onOpenChange(false)}
+            disabled={preparePullRequestThreadMutation.isPending}
+          >
             Cancel
           </Button>
           <Button
           >
             {preparingMode === "worktree" ? "Preparing worktree..." : "Worktree"}
           </Button>
-        </div>
+        </DialogFooter>
-      </div>
+      </DialogPopup>
-    </div>
+    </Dialog>
   );
 }

apps/web/src/composer-logic.test.ts+4−4

     expect(parseStandaloneComposerSlashCommand("/default")).toBe("default");
   });
-  it("parses standalone /checkout-pr command", () => {
-    expect(parseStandaloneComposerSlashCommand(" /checkout-pr ")).toBe("checkout-pr");
-  });
   it("ignores slash commands with extra message text", () => {
     expect(parseStandaloneComposerSlashCommand("/plan explain this")).toBeNull();
   });
+  it("ignores removed /checkout-pr command", () => {
+    expect(parseStandaloneComposerSlashCommand(" /checkout-pr ")).toBeNull();
+  });
 });

apps/web/src/composer-logic.ts+2−4

 import { splitPromptIntoComposerSegments } from "./composer-editor-mentions";
 export type ComposerTriggerKind = "path" | "slash-command" | "slash-model";
-export type ComposerSlashCommand = "model" | "plan" | "default" | "checkout-pr";
+export type ComposerSlashCommand = "model" | "plan" | "default";
 export interface ComposerTrigger {
   kind: ComposerTriggerKind;
   "model",
   "plan",
   "default",
-  "checkout-pr",
 ];
 function clampCursor(text: string, cursor: number): number {
   ComposerSlashCommand,
   "model"
 > | null {
-  const match = /^\/(plan|default|checkout-pr)\s*$/i.exec(text.trim());
+  const match = /^\/(plan|default)\s*$/i.exec(text.trim());
   if (!match) {
     return null;
   }
   const command = match[1]?.toLowerCase();
   if (command === "plan") return "plan";
-  if (command === "checkout-pr") return "checkout-pr";
   return "default";
 }