From 0c6892216ff096e64b09f39a07e46eab87ac92d2 Mon Sep 17 00:00:00 2001
From: Louis Knight-Webb <louis@bloop.ai>
Date: Mon, 14 Jul 2025 16:39:50 +0100
Subject: [PATCH] ## Summary (#171)

I've successfully improved the "open in IDE" button to make it more user-friendly! Here's what was changed:

**Before**: The button was a small icon with only a tooltip showing "Open in editor"

**After**: The button now displays clear text "Open in [IDE NAME]" where [IDE NAME] is the actual configured editor (e.g., "Open in Visual Studio Code", "Open in Cursor", etc.)

### Changes made:

1. **Added config integration**: Imported the `useConfig` hook to access the user's editor configuration
2. **Created helper function**: Added `getEditorDisplayName()` to convert editor types to friendly display names
3. **Updated button UI**:
   - Replaced the icon-only button with a text + icon button
   - Added proper spacing and sizing
   - Removed the tooltip since the button text is now self-explanatory

The button now dynamically shows the correct editor name based on the user's configuration, making it much clearer what will happen when they click it.
---
 .../tasks/Toolbar/CurrentAttempt.tsx          | 54 +++++++++++++------
 1 file changed, 37 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/tasks/Toolbar/CurrentAttempt.tsx b/frontend/src/components/tasks/Toolbar/CurrentAttempt.tsx
index 83093100..e869b109 100644
--- a/frontend/src/components/tasks/Toolbar/CurrentAttempt.tsx
+++ b/frontend/src/components/tasks/Toolbar/CurrentAttempt.tsx
@@ -44,6 +44,27 @@ import {
   TaskExecutionStateContext,
   TaskSelectedAttemptContext,
 } from '@/components/context/taskDetailsContext.ts';
+import { useConfig } from '@/components/config-provider.tsx';
+
+// Helper function to get the display name for different editor types
+function getEditorDisplayName(editorType: string): string {
+  switch (editorType) {
+    case 'vscode':
+      return 'Visual Studio Code';
+    case 'cursor':
+      return 'Cursor';
+    case 'windsurf':
+      return 'Windsurf';
+    case 'intellij':
+      return 'IntelliJ IDEA';
+    case 'zed':
+      return 'Zed';
+    case 'custom':
+      return 'Custom Editor';
+    default:
+      return 'Editor';
+  }
+}
 
 type Props = {
   setError: Dispatch<SetStateAction<string | null>>;
@@ -71,6 +92,7 @@ function CurrentAttempt({
 }: Props) {
   const { task, projectId, handleOpenInEditor, projectHasDevScript } =
     useContext(TaskDetailsContext);
+  const { config } = useConfig();
   const { setSelectedAttempt } = useContext(TaskSelectedAttemptContext);
   const { isStopping, setIsStopping } = useContext(TaskAttemptStoppingContext);
   const { attemptData, fetchAttemptData, isAttemptRunning } = useContext(
@@ -353,6 +375,12 @@ function CurrentAttempt({
     return selectedBranch;
   }, [selectedBranch]);
 
+  // Get display name for the configured editor
+  const editorDisplayName = useMemo(() => {
+    if (!config?.editor?.editor_type) return 'Editor';
+    return getEditorDisplayName(config.editor.editor_type);
+  }, [config?.editor?.editor_type]);
+
   return (
     <div className="space-y-2">
       <div className="grid grid-cols-4 gap-3 items-start">
@@ -425,23 +453,15 @@ function CurrentAttempt({
           <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
             Worktree Path
           </div>
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => handleOpenInEditor()}
-                  className="h-4 w-4 p-0 hover:bg-muted"
-                >
-                  <ExternalLink className="h-3 w-3" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>Open in editor</p>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => handleOpenInEditor()}
+            className="h-6 px-2 text-xs hover:bg-muted gap-1"
+          >
+            <ExternalLink className="h-3 w-3" />
+            Open in {editorDisplayName}
+          </Button>
         </div>
         <div className="text-xs font-mono text-muted-foreground bg-muted px-2 py-1 rounded break-all">
           {selectedAttempt.worktree_path}