Script Fixer Dialog (Vibe Kanban) (#1968)

* All checks pass. Let me provide a summary of what was implemented:

## Summary

I've implemented the Script Fixer Dialog feature. Here's what was created and modified:

### New File Created:
1. **`frontend/src/components/dialogs/scripts/ScriptFixerDialog.tsx`** - A new dialog component that:
   - Shows the current script content in an editable textarea
   - Displays the last execution logs using `VirtualizedProcessLogs`
   - Provides "Save" and "Save and Test" buttons
   - Supports both setup scripts and dev server scripts
   - Handles multi-repo scenarios with a repo selector dropdown

### Files Modified:

**New UI (Setup Script):**
1. **`ChatScriptEntry.tsx`** - Added `onFix` prop and a "Fix Script" button that appears when a script fails
2. **`NewDisplayConversationEntry.tsx`** - Added `ScriptEntryWithFix` wrapper component that provides the fix handler to `ChatScriptEntry`

**Legacy UI (Setup Script):**
3. **`DisplayConversationEntry.tsx`** - Added `ScriptFixButton` component that renders a fix button for failed scripts in the legacy conversation view

**Preview/Dev Server:**
4. **`PreviewPanel.tsx`** - Added "Fix Script" button to the troubleshooting alert when dev server has issues
5. **`PreviewBrowser.tsx`** - Added optional `handleFixDevScript` prop and "Fix Script" button alongside "Start Server"
6. **`PreviewBrowserContainer.tsx`** - Wired up the dialog opening for dev server script fixes
7. **`PreviewControls.tsx`** - Added `onFixScript` prop and "Fix Script" button in the dev server controls
8. **`PreviewControlsContainer.tsx`** - Wired up the dialog opening for the controls

**Translations:**
9. **`tasks.json` (English)** - Added `scriptFixer` translation keys

* Cleanup script changes for workspace 5496d4c0-d1d3-4e6a-b9d0-6a421270eeac

* Type check passes. I've updated the `ScriptFixerDialog` to also start the dev server when "Save and Test" is clicked for dev_server script type.

* Done! I've updated the `ScriptFixerDialog` to:

1. **Keep the dialog open after "Save and Test"** - The dialog no longer closes after clicking "Save and Test", so the user can watch the logs update in real-time as the script executes

2. **Changed "Cancel" to "Close"** - The button now says "Close" (using `t('common:close')`) and is always enabled, making it clear the user can close the dialog at any time

3. **Logs update automatically** - The `useExecutionProcesses` and `useLogStream` hooks will automatically pick up the new execution process and stream its logs in real-time

* Cleanup script changes for workspace 5496d4c0-d1d3-4e6a-b9d0-6a421270eeac

* Done! I've fixed the horizontal overflow by adding `min-w-0` to all flex containers and `overflow-hidden` to the `DialogContent`. This prevents flex children from overflowing their container horizontally.

* The type check passes. The fix has been applied - the width constraints (`max-w-4xl w-[90vw]`) are now on the `Dialog` component instead of `DialogContent`. This will override the default `max-w-xl` from the Dialog component's base className, allowing the dialog to be wider and preventing horizontal overflow.

* Done! I've added the status indicator to the ScriptFixerDialog. Here's what was implemented:

**Changes made:**

1. **`ScriptFixerDialog.tsx`:**
   - Added import for `RunningDots` component
   - Added status computation logic to determine if the process is running, succeeded, failed, or killed
   - Added status indicator UI next to the "Last Execution Logs" label showing:
     - Animated dots + "Running..." when the script is executing
     - Green dot + "Completed successfully" when script succeeded (exit code 0)
     - Red dot + "Failed with exit code X" when script failed
     - Gray dot + "Process was killed" when killed

2. **`tasks.json` (translations):**
   - Added `statusRunning`, `statusSuccess`, `statusFailed`, and `statusKilled` translation keys

The status indicator will update in real-time as the script executes since it's computed from `latestProcess` which is updated via the `useExecutionProcesses` hook.

* Fixed! The issue was that `exit_code` can be `null` when the process completes successfully, and comparing `null !== BigInt(0)` returns `true`, which incorrectly triggered the error state.

The fix:
- Treat `exit_code === null` as success (same as exit code 0)
- Only show error when `exit_code` is explicitly a non-zero value

* Fixed. The issue was that `exit_code` comes back as a regular number `0` from the API, but the TypeScript type says `bigint`. Using `Number(exitCode) === 0` handles both cases correctly and satisfies the type checker.

* Fixed! The translation key was missing the `buttons.` namespace prefix. It now uses `t('common:buttons.close')` which maps to "Close".

* Done. Added `bg-error` and `text-error` classes alongside the `destructive` classes for the error state.

* styles

* Done! I've fixed the issue by passing `sessionId` to the `ScriptFixerDialog` in all three files:

1. **`PreviewPanel.tsx`** - Gets `sessionId` from `devServerProcesses[0]?.session_id`
2. **`PreviewBrowserContainer.tsx`** - Added `devServerProcesses` to destructuring from `usePreviewDevServer` and passes `sessionId`
3. **`PreviewControlsContainer.tsx`** - Already had `devServerProcesses`, just added `sessionId` to the dialog call

Now when you click "Save and Test" for a dev server script, the dialog will receive the session ID, connect to the WebSocket stream, and show the execution logs in real-time.

* rollback trigger the ScriptFixer for old UI

* Done! I've extended the ScriptFixerDialog to support cleanup scripts. Here's a summary of the changes:

**1. `frontend/src/i18n/locales/en/tasks.json`**
- Added `cleanupScriptTitle: "Fix Cleanup Script"` translation key

**2. `frontend/src/components/dialogs/scripts/ScriptFixerDialog.tsx`**
- Updated `ScriptType` from `'setup' | 'dev_server'` to `'setup' | 'cleanup' | 'dev_server'`
- Updated `latestProcess` filter to use `'cleanupscript'` run_reason for cleanup scripts
- Updated script fetching logic to read `cleanup_script` field
- Updated both `handleSave` and `handleSaveAndTest` to save `cleanup_script` field
- Updated execution logic to call `attemptsApi.runCleanupScript(workspaceId)` for cleanup scripts
- Updated dialog title to show "Fix Cleanup Script" for cleanup type
- Updated placeholder text to show `#!/bin/bash\nrm -rf node_modules` for cleanup scripts

**3. `frontend/src/components/ui-new/NewDisplayConversationEntry.tsx`**
- Fixed the scriptType mapping so "Cleanup Script" maps to `'cleanup'` instead of incorrectly mapping to `'setup'`

* All tasks are complete. Here's a summary of the changes I made:

## Summary

I've implemented the ScriptFixerDialog in the old UI for both `DisplayConversationEntry.tsx` and `PreviewPanel.tsx`.

### Changes Made:

**1. `DisplayConversationEntry.tsx`** (`frontend/src/components/NormalizedConversation/DisplayConversationEntry.tsx`):
- Added imports for `ScriptFixerDialog`, `ScriptType`, `useAttemptRepo`, `Button`, and `Wrench` icon
- Added `SCRIPT_TOOL_NAMES` constant to identify script entries
- Added `getScriptType()` helper function to map tool names to script types
- Created `ScriptToolCallCard` component that wraps `ToolCallCard` and adds a "Fix Script" button for failed scripts
- Modified `renderToolUse()` to detect script entries and render them with `ScriptToolCallCard`

**2. `PreviewPanel.tsx`** (`frontend/src/components/panels/PreviewPanel.tsx`):
- Added imports for `ScriptFixerDialog`, `useAttemptRepo`, and `Wrench` icon
- Added `useAttemptRepo(attemptId)` hook to get repos
- Added `handleFixDevScript()` function that opens the ScriptFixerDialog
- Added `canFixDevScript` computed value
- Added "Fix Dev Script" button in the troubleshooting alert next to the "Stop and Edit" button

**3. Translation Keys**:
- Added `conversation.fixScript: "Fix Script"` in `en/common.json`
- Added `preview.troubleAlert.fixScript: "Fix Dev Script"` in `en/tasks.json`

The implementation follows the same pattern as the new UI's `ScriptEntryWithFix` component in `NewDisplayConversationEntry.tsx`, using `useAttemptRepo` hook to fetch repos instead of `useWorkspaceContext` (which is only available in the new design scope).

* Cleanup script changes for workspace 5496d4c0-d1d3-4e6a-b9d0-6a421270eeac

* All tasks are complete. Here's a summary of the fixes made:

## Summary of Changes

### Problem
The "Fix Dev Script" button was only showing in the troubleshooting alert, which only appears when a dev server is **running** but slow to respond. When the dev server script **fails to start** (exits with error), there are no running dev servers, so the user saw `NoServerContent` without any fix option.

### Solution

**1. `PreviewPanel.tsx`** - Added failed dev server detection:
```typescript
const failedDevServerProcess = devServerProcesses.find(
  (p) =>
    p.status === 'failed' ||
    (p.status === 'completed' && p.exit_code !== null && p.exit_code !== 0n)
);
const hasFailedDevServer = Boolean(failedDevServerProcess);
```
And passed `hasFailedDevServer` and `onFixDevScript` to `NoServerContent`.

**2. `NoServerContent.tsx`** - Added new props and "Fix Dev Script" button:
- Added `hasFailedDevServer?: boolean` and `onFixDevScript?: () => void` props
- Added fix button that shows when dev server has failed

**3. Translation Keys** - Added `preview.noServer.fixScript: "Fix Dev Script"` to `en/tasks.json`

Now when a user tries to start a dev server and it fails, they'll see the "Fix Dev Script" button in the `NoServerContent` view, allowing them to open the ScriptFixerDialog to fix the script.

* Done! I've successfully added all the Script Fixer i18n translations to the 5 non-English locale files:

**Summary of changes:**

### common.json files (5 files updated)
Added `fixScript` key to the `conversation` section:
- **es**: `"Corregir Script"`
- **ja**: `"スクリプトを修正"`
- **ko**: `"스크립트 수정"`
- **zh-Hans**: `"修复脚本"`
- **zh-Hant**: `"修復腳本"`

### tasks.json files (5 files updated)
1. Added `fixScript` to `preview.noServer` section
2. Added `fixScript` to `preview.troubleAlert` section
3. Added the entire `scriptFixer` section with 17 keys including:
   - `title`, `setupScriptTitle`, `cleanupScriptTitle`, `devServerTitle`
   - `scriptLabel`, `logsLabel`
   - `saveButton`, `saveAndTestButton`, `saving`, `testing`
   - `noLogs`, `selectRepo`, `fixScript`
   - `statusRunning`, `statusSuccess`, `statusFailed`, `statusKilled`

All type checks (`pnpm run check`) passed successfully.

* Both lint and type check pass now. Here's a summary of the lint fixes I made:

**Fixed lint issues in:**

1. **`ScriptFixerDialog.tsx`** (lines 198 and 253):
   - Added missing `repos` dependency to both `handleSave` and `handleSaveAndTest` useCallback hooks
   - Removed unnecessary `modal` dependency from `handleSaveAndTest`

2. **`NewDisplayConversationEntry.tsx`** (line 658):
   - Used a `useRef` pattern to access `repos` inside the `handleFix` callback without including it in the dependency array, since the `repos` array is recreated on every render from context

* All checks pass. The fix is complete.

**Summary:** The "Fix Script" button in `PreviewControls` will now only appear when the latest dev server process has a status of `'failed'`. When the dev server is running, completed successfully, or was killed by the user, the button will be hidden.

frontend/src/i18n/locales/es/tasks.json

@@ -360,7 +360,8 @@
       "startButton": "Iniciar Servidor de Desarrollo",
       "startPrompt": "Por favor inicia un servidor de desarrollo para ver la vista previa",
       "stopAndEditButton": "Detener Servidor de Desarrollo y Resolver Problemas",
-      "title": "No hay servidor de desarrollo en ejecución"
+      "title": "No hay servidor de desarrollo en ejecución",
+      "fixScript": "Corregir Script de Desarrollo"
     },
     "selectAttempt": "Select an attempt to see preview",
     "title": "Preview",
@@ -378,7 +379,8 @@
       "item2Suffix": "? (así es como sabemos que está funcionando)",
       "item3": "¿Has instalado el Web Companion (requerido para hacer clic y editar)? Si no, por favor",
       "item3Link": "sigue las instrucciones de instalación aquí",
-      "title": "Tenemos problemas al previsualizar tu aplicación:"
+      "title": "Tenemos problemas al previsualizar tu aplicación:",
+      "fixScript": "Corregir Script de Desarrollo"
     }
   },
   "processes": {
@@ -655,5 +657,24 @@
       "deleted": "Eliminado",
       "renamed": "Renombrado"
     }
+  },
+  "scriptFixer": {
+    "title": "Corregir Script",
+    "setupScriptTitle": "Corregir Script de Configuración",
+    "cleanupScriptTitle": "Corregir Script de Limpieza",
+    "devServerTitle": "Corregir Script del Servidor de Desarrollo",
+    "scriptLabel": "Script (editar)",
+    "logsLabel": "Últimos Registros de Ejecución",
+    "saveButton": "Guardar",
+    "saveAndTestButton": "Guardar y Probar",
+    "saving": "Guardando...",
+    "testing": "Probando...",
+    "noLogs": "No hay registros de ejecución disponibles",
+    "selectRepo": "Repositorio",
+    "fixScript": "Corregir Script",
+    "statusRunning": "Ejecutando...",
+    "statusSuccess": "Completado exitosamente",
+    "statusFailed": "Falló con código de salida {{exitCode}}",
+    "statusKilled": "El proceso fue terminado"
   }
 }