fix overflow issues and replace pull request dropdown with matching UI from dotcom

mattdholloway · mattdholloway · commit f034e1962ff4 · 2026-02-05T18:03:23.000Z
diff --git a/pkg/github/pullrequests.go b/pkg/github/pullrequests.go
@@ -538,23 +538,25 @@ func CreatePullRequest(t translations.TranslationHelperFunc) inventory.ServerToo
 				return utils.NewToolResultError(err.Error()), nil, nil
 			}
 
-			// When insiders mode is enabled, show UI - the host will detect the UI metadata and display the form
-			if deps.GetFlags().InsidersMode {
+			// Check if required params for PR creation are provided
+			title, _ := OptionalParam[string](args, "title")
+			head, _ := OptionalParam[string](args, "head")
+			base, _ := OptionalParam[string](args, "base")
+
+			// When insiders mode is enabled and required params are missing, show UI
+			if deps.GetFlags().InsidersMode && (title == "" || head == "" || base == "") {
 				return utils.NewToolResultText(fmt.Sprintf("Ready to create a pull request in %s/%s. The interactive form will be displayed.", owner, repo)), nil, nil
 			}
 
-			// When not using UI, title/head/base are required
-			title, err := RequiredParam[string](args, "title")
-			if err != nil {
-				return utils.NewToolResultError(err.Error()), nil, nil
+			// When creating PR, title/head/base are required
+			if title == "" {
+				return utils.NewToolResultError("title is required"), nil, nil
 			}
-			head, err := RequiredParam[string](args, "head")
-			if err != nil {
-				return utils.NewToolResultError(err.Error()), nil, nil
+			if head == "" {
+				return utils.NewToolResultError("head is required"), nil, nil
 			}
-			base, err := RequiredParam[string](args, "base")
-			if err != nil {
-				return utils.NewToolResultError(err.Error()), nil, nil
+			if base == "" {
+				return utils.NewToolResultError("base is required"), nil, nil
 			}
 
 			body, err := OptionalParam[string](args, "body")
diff --git a/ui/src/apps/issue-write/App.tsx b/ui/src/apps/issue-write/App.tsx
@@ -259,9 +259,9 @@ function CreateIssueApp() {
         console.log("Repository search result:", result);
         if (result && !result.isError && result.content) {
           const textContent = result.content.find(
-            (c: { type: string }) => c.type === "text"
+            (c) => c.type === "text"
           );
-          if (textContent?.text) {
+          if (textContent && textContent.type === "text" && textContent.text) {
             const data = JSON.parse(textContent.text);
             console.log("Parsed repository data:", data);
             const repos = (data.repositories || data.items || []).map(
@@ -457,9 +457,9 @@ function CreateIssueApp() {
 
         if (result && !result.isError && result.content) {
           const textContent = result.content.find(
-            (c: { type: string }) => c.type === "text"
+            (c) => c.type === "text"
           );
-          if (textContent?.text) {
+          if (textContent && textContent.type === "text" && textContent.text) {
             const issueData = JSON.parse(textContent.text);
             console.log("Loaded issue data:", issueData);
 
@@ -754,15 +754,18 @@ function CreateIssueApp() {
         borderBottomWidth={1}
         borderBottomStyle="solid"
         borderBottomColor="border.default"
+        sx={{ minWidth: 0, overflow: "hidden" }}
       >
-        <ActionMenu>
-          <ActionMenu.Button
-            size="small"
-            leadingVisual={selectedRepo?.isPrivate ? LockIcon : RepoIcon}
-          >
-            {selectedRepo ? selectedRepo.fullName : "Select repository"}
-          </ActionMenu.Button>
-          <ActionMenu.Overlay width="large">
+        <Box sx={{ minWidth: 0, maxWidth: "100%" }}>
+          <ActionMenu>
+            <ActionMenu.Button
+              size="small"
+              leadingVisual={selectedRepo?.isPrivate ? LockIcon : RepoIcon}
+              sx={{ maxWidth: "100%", overflow: "hidden", "& > span:last-child": { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }}
+            >
+              {selectedRepo ? selectedRepo.fullName : "Select repository"}
+            </ActionMenu.Button>
+          <ActionMenu.Overlay width="medium">
             <ActionList selectionVariant="single">
               <Box px={3} py={2}>
                 <TextInput
@@ -828,6 +831,7 @@ function CreateIssueApp() {
             </ActionList>
           </ActionMenu.Overlay>
         </ActionMenu>
+        </Box>
       </Box>
 
       {/* Error banner */}
@@ -867,7 +871,7 @@ function CreateIssueApp() {
       </Box>
 
       {/* Metadata section */}
-      <Box display="flex" gap={1} mb={3} sx={{ flexWrap: "nowrap", overflow: "hidden" }}>
+      <Box display="flex" gap={3} mb={3} sx={{ flexWrap: "wrap" }}>
         {/* Labels dropdown */}
         <ActionMenu>
           <ActionMenu.Button size="small" leadingVisual={TagIcon}>
diff --git a/ui/src/apps/pr-write/App.tsx b/ui/src/apps/pr-write/App.tsx
@@ -12,13 +12,15 @@ import {
   ActionMenu,
   ActionList,
   Checkbox,
+  ButtonGroup,
 } from "@primer/react";
 import {
   GitPullRequestIcon,
   CheckCircleIcon,
   RepoIcon,
   LockIcon,
   GitBranchIcon,
+  TriangleDownIcon,
 } from "@primer/octicons-react";
 import { AppProvider } from "../../components/AppProvider";
 import { useMcpApp } from "../../hooks/useMcpApp";
@@ -199,8 +201,8 @@ function CreatePRApp() {
       try {
         const result = await callTool("search_repositories", { query: repoFilter, perPage: 10 });
         if (result && !result.isError && result.content) {
-          const textContent = result.content.find((c: { type: string }) => c.type === "text");
-          if (textContent?.text) {
+          const textContent = result.content.find((c) => c.type === "text");
+          if (textContent && textContent.type === "text" && textContent.text) {
             const data = JSON.parse(textContent.text);
             const repos = (data.repositories || data.items || []).map(
               (r: { id?: number; owner?: { login?: string } | string; name?: string; full_name?: string; private?: boolean }) => ({
@@ -291,11 +293,12 @@ function CreatePRApp() {
       });
 
       if (result.isError) {
-        const errorText = result.content?.find((c: { type: string }) => c.type === "text");
-        setError(errorText?.text || "Failed to create pull request");
+        const errorText = result.content?.find((c) => c.type === "text");
+        const errorMessage = errorText && errorText.type === "text" ? errorText.text : "Failed to create pull request";
+        setError(errorMessage);
       } else {
-        const textContent = result.content?.find((c: { type: string }) => c.type === "text");
-        if (textContent?.text) {
+        const textContent = result.content?.find((c) => c.type === "text");
+        if (textContent && textContent.type === "text" && textContent.text) {
           const prData = JSON.parse(textContent.text);
           setSuccessPR(prData);
         }
@@ -353,15 +356,18 @@ function CreatePRApp() {
           borderBottomWidth={1}
           borderBottomStyle="solid"
           borderBottomColor="border.default"
+          sx={{ minWidth: 0, overflow: "hidden" }}
         >
-          <ActionMenu>
-            <ActionMenu.Button
-              size="small"
-              leadingVisual={selectedRepo?.isPrivate ? LockIcon : RepoIcon}
-            >
-              {selectedRepo ? selectedRepo.fullName : "Select repository"}
-            </ActionMenu.Button>
-            <ActionMenu.Overlay width="large">
+          <Box sx={{ minWidth: 0, maxWidth: "100%" }}>
+            <ActionMenu>
+              <ActionMenu.Button
+                size="small"
+                leadingVisual={selectedRepo?.isPrivate ? LockIcon : RepoIcon}
+                sx={{ maxWidth: "100%", overflow: "hidden", "& > span:last-child": { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }}
+              >
+                {selectedRepo ? selectedRepo.fullName : "Select repository"}
+              </ActionMenu.Button>
+            <ActionMenu.Overlay width="medium">
               <ActionList selectionVariant="single">
                 <Box px={3} py={2}>
                   <TextInput
@@ -412,14 +418,15 @@ function CreatePRApp() {
               </ActionList>
             </ActionMenu.Overlay>
           </ActionMenu>
+          </Box>
         </Box>
 
         {/* Branch selectors */}
-        <Box display="flex" gap={3} mb={3} alignItems="flex-end">
-          <Box flex={1}>
+        <Box display="flex" gap={2} mb={3} alignItems="flex-end" sx={{ minWidth: 0, flexWrap: "wrap" }}>
+          <Box sx={{ flex: "1 1 120px", minWidth: 0 }}>
             <Text sx={{ fontSize: 0, color: "fg.muted", mb: 1, display: "block" }}>base</Text>
             <ActionMenu>
-              <ActionMenu.Button size="small" leadingVisual={GitBranchIcon} sx={{ width: "100%" }}>
+              <ActionMenu.Button size="small" leadingVisual={GitBranchIcon} sx={{ width: "100%", "& > span": { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }}>
                 {baseBranch || "Select base"}
               </ActionMenu.Button>
               <ActionMenu.Overlay width="medium">
@@ -455,12 +462,12 @@ function CreatePRApp() {
             </ActionMenu>
           </Box>
 
-          <Text sx={{ color: "fg.muted", pb: 1, px: 1 }}>←</Text>
+          <Text sx={{ color: "fg.muted", pb: 1, px: 1, flexShrink: 0 }}>←</Text>
 
-          <Box flex={1}>
+          <Box sx={{ flex: "1 1 120px", minWidth: 0 }}>
             <Text sx={{ fontSize: 0, color: "fg.muted", mb: 1, display: "block" }}>compare</Text>
             <ActionMenu>
-              <ActionMenu.Button size="small" leadingVisual={GitBranchIcon} sx={{ width: "100%" }}>
+              <ActionMenu.Button size="small" leadingVisual={GitBranchIcon} sx={{ width: "100%", "& > span": { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }}>
                 {headBranch || "Select head"}
               </ActionMenu.Button>
               <ActionMenu.Overlay width="medium">
@@ -519,33 +526,62 @@ function CreatePRApp() {
           <MarkdownEditor value={body} onChange={setBody} placeholder="Add a description..." />
         </Box>
 
-        {/* Options */}
-        <Box mb={3} display="flex" gap={4}>
-          <FormControl>
-            <Checkbox checked={isDraft} onChange={(e) => setIsDraft(e.target.checked)} />
-            <FormControl.Label sx={{ fontWeight: "normal", ml: 1 }}>Create as draft</FormControl.Label>
-          </FormControl>
-          <FormControl>
+        {/* Options and Submit */}
+        <Box display="flex" justifyContent="space-between" alignItems="flex-end" flexWrap="wrap" gap={3}>
+          <Box as="label" display="flex" alignItems="center" sx={{ cursor: "pointer", gap: 2 }}>
             <Checkbox checked={maintainerCanModify} onChange={(e) => setMaintainerCanModify(e.target.checked)} />
-            <FormControl.Label sx={{ fontWeight: "normal", ml: 1 }}>Allow maintainer edits</FormControl.Label>
-          </FormControl>
-        </Box>
+            <Text sx={{ fontSize: 1, color: "fg.muted" }}>Allow maintainer edits</Text>
+          </Box>
 
-        {/* Submit button */}
-        <Box display="flex" justifyContent="flex-end" gap={2}>
-          <Button
-            variant="primary"
-            onClick={handleSubmit}
-            disabled={isSubmitting || !owner || !repo || !baseBranch || !headBranch}
-          >
-            {isSubmitting ? (
-              <><Spinner size="small" sx={{ mr: 1 }} />Creating...</>
-            ) : isDraft ? (
-              "Create draft pull request"
-            ) : (
-              "Create pull request"
-            )}
-          </Button>
+          <ButtonGroup>
+            <Button
+              variant="primary"
+              onClick={handleSubmit}
+              disabled={isSubmitting || !owner || !repo || !baseBranch || !headBranch}
+            >
+              {isSubmitting ? (
+                <><Spinner size="small" sx={{ mr: 1 }} />Creating...</>
+              ) : isDraft ? (
+                "Draft pull request"
+              ) : (
+                "Create pull request"
+              )}
+            </Button>
+            <ActionMenu>
+              <ActionMenu.Anchor>
+                <Button
+                  variant="primary"
+                  disabled={isSubmitting || !owner || !repo || !baseBranch || !headBranch}
+                  sx={{ px: 2 }}
+                  aria-label="Select pull request type"
+                >
+                  <TriangleDownIcon />
+                </Button>
+              </ActionMenu.Anchor>
+              <ActionMenu.Overlay width="medium">
+                <ActionList selectionVariant="single">
+                  <ActionList.Item selected={!isDraft} onSelect={() => setIsDraft(false)}>
+                    <ActionList.LeadingVisual>
+                      <GitPullRequestIcon />
+                    </ActionList.LeadingVisual>
+                    Create pull request
+                    <ActionList.Description variant="block">
+                      Open a pull request that is ready for review
+                    </ActionList.Description>
+                  </ActionList.Item>
+                  <ActionList.Item selected={isDraft} onSelect={() => setIsDraft(true)}>
+                    <ActionList.LeadingVisual>
+                      <GitPullRequestIcon />
+                    </ActionList.LeadingVisual>
+                    Create draft pull request
+                    <ActionList.Description variant="block">
+                      Cannot be merged until marked ready for review
+                    </ActionList.Description>
+                  </ActionList.Item>
+                </ActionList>
+              </ActionMenu.Overlay>
+            </ActionMenu>
+          </ButtonGroup>
         </Box>
       </Box>
     </AppProvider>
diff --git a/ui/src/components/MarkdownEditor.tsx b/ui/src/components/MarkdownEditor.tsx
@@ -94,6 +94,79 @@ export function MarkdownEditor({
     }
   }, [value]);
 
+  // Handle Enter key for list continuation
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key !== "Enter" || e.shiftKey) return;
+
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+
+    const { selectionStart, value: currentValue } = textarea;
+    
+    // Get the current line
+    const beforeCursor = currentValue.substring(0, selectionStart);
+    const lastNewline = beforeCursor.lastIndexOf("\n");
+    const currentLine = beforeCursor.substring(lastNewline + 1);
+
+    // Match different list patterns
+    const unorderedMatch = currentLine.match(/^(\s*)([-*])\s/);
+    const orderedMatch = currentLine.match(/^(\s*)(\d+)\.\s/);
+    const taskMatch = currentLine.match(/^(\s*)([-*])\s\[[ x]\]\s/);
+
+    let prefix = "";
+    let isEmpty = false;
+
+    if (taskMatch) {
+      const indent = taskMatch[1];
+      const marker = taskMatch[2];
+      // Check if the line only has the list marker with no content
+      isEmpty = currentLine.trim() === `${marker} [ ]` || currentLine.trim() === `${marker} [x]`;
+      prefix = `${indent}${marker} [ ] `;
+    } else if (orderedMatch) {
+      const indent = orderedMatch[1];
+      const num = parseInt(orderedMatch[2], 10);
+      // Check if the line only has the list marker
+      isEmpty = currentLine.trim() === `${num}.`;
+      prefix = `${indent}${num + 1}. `;
+    } else if (unorderedMatch) {
+      const indent = unorderedMatch[1];
+      const marker = unorderedMatch[2];
+      // Check if the line only has the list marker
+      isEmpty = currentLine.trim() === marker;
+      prefix = `${indent}${marker} `;
+    }
+
+    if (prefix) {
+      e.preventDefault();
+      
+      if (isEmpty) {
+        // If just the list marker, remove it and exit list
+        const newValue = currentValue.substring(0, lastNewline + 1) + currentValue.substring(selectionStart);
+        onChange(newValue);
+        // Set cursor position after React updates
+        requestAnimationFrame(() => {
+          if (textarea) {
+            textarea.selectionStart = textarea.selectionEnd = lastNewline + 1;
+            textarea.focus();
+          }
+        });
+      } else {
+        // Continue the list on the next line
+        const afterCursor = currentValue.substring(selectionStart);
+        const newValue = beforeCursor + "\n" + prefix + afterCursor;
+        onChange(newValue);
+        // Set cursor position after the prefix
+        const newCursorPos = selectionStart + 1 + prefix.length;
+        requestAnimationFrame(() => {
+          if (textarea) {
+            textarea.selectionStart = textarea.selectionEnd = newCursorPos;
+            textarea.focus();
+          }
+        });
+      }
+    }
+  };
+
   return (
     <Box
       borderWidth={1}
@@ -248,6 +321,7 @@ export function MarkdownEditor({
           id={textareaId}
           defaultValue={value}
           onChange={(e) => onChange(e.target.value)}
+          onKeyDown={handleKeyDown}
           placeholder={placeholder}
           style={{
             width: "100%",
@@ -310,8 +384,11 @@ export function MarkdownEditor({
               borderLeft: "4px solid",
               borderColor: "border.default",
               pl: 3,
+              ml: 0,
+              mr: 0,
               my: 2,
               color: "fg.muted",
+              bg: "canvas.subtle",
             },
             "& a": {
               color: "accent.fg",
diff --git a/ui/src/hooks/useMcpApp.ts b/ui/src/hooks/useMcpApp.ts
