7bb16a798e8c43077a9a0952209b6834155f433e
683 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Louis Knight-Webb
|
7bb16a798e |
The frontend TypeScript check passed without errors. (#1978)
The implementation is complete. The change removes the Bash-only restriction so that any tool with output (including MCP tools like `mcp:dev-manager:stop`) can now be clicked to view their results in the logs panel. **Summary of changes:** - **File:** `vibe-kanban/frontend/src/components/ui-new/NewDisplayConversationEntry.tsx` - **Change:** Simplified `hasOutput` check in `ToolSummaryEntry` from `isBash && content && content.trim().length > 0` to just `content && content.trim().length > 0` - **Effect:** MCP tool entries (and any other tool with output) are now clickable to view their JSON results in the logs panel |
||
Alex Netsch
|
1ffb70869e |
Revert "Fix workspace sidebar ordering to use updated_at instead of created_at (Vibe Kanban) (#1965)" (#1974)
This reverts commit
|
||
|
Louis Knight-Webb
|
572e9706e5 |
Prevent WorkspacesSidebar re-render on workspace switch (Vibe Kanban) (#1973)
* The refactoring is complete. Here's a summary of what was changed:
## Summary
**File modified:** `vibe-kanban/frontend/src/components/ui-new/containers/WorkspacesLayout.tsx`
**Change:** Restructured `renderContent()` so that `WorkspacesSidebar` is rendered **outside** the `ExecutionProcessesProvider`.
### Before:
```tsx
<ExecutionProcessesProvider key={`${selectedWorkspace?.id}-${selectedSessionId}`}>
<ReviewProvider>
<Allotment>
<Allotment.Pane>{renderSidebar()}</Allotment.Pane> // Inside provider
<Allotment.Pane>...</Allotment.Pane>
<Allotment.Pane>...</Allotment.Pane>
<Allotment.Pane>...</Allotment.Pane>
</Allotment>
</ReviewProvider>
</ExecutionProcessesProvider>
```
### After:
```tsx
<Allotment>
<Allotment.Pane>{renderSidebar()}</Allotment.Pane> // OUTSIDE provider - won't remount
<ExecutionProcessesProvider key={`${selectedWorkspace?.id}-${selectedSessionId}`}>
<ReviewProvider>
<>
<Allotment.Pane>...</Allotment.Pane>
<Allotment.Pane>...</Allotment.Pane>
<Allotment.Pane>...</Allotment.Pane>
</>
</ReviewProvider>
</ExecutionProcessesProvider>
</Allotment>
```
**Result:** When switching workspaces, the `ExecutionProcessesProvider`'s key changes, which unmounts/remounts only panes 2-4. The sidebar pane stays mounted and won't re-render unnecessarily.
* The implementation is complete. Here's a summary of what was changed:
## Summary
**File modified:** `vibe-kanban/frontend/src/components/ui-new/containers/WorkspacesLayout.tsx`
### Changes:
1. **Created nested Allotments structure:**
- **Outer Allotment** (2 panes): Sidebar + Content container
- **Inner Allotment** (3 panes): Main + Changes/Logs + Git Panel
2. **Separated resize handlers:**
- `handleOuterPaneResize`: Handles sidebar width only
- `handleInnerPaneResize`: Handles main, changes/logs, and git panel widths
3. **Removed old `handlePaneResize`** which was designed for the flat 4-pane structure
### Result:
```
Outer Allotment
├── Sidebar Pane (OUTSIDE providers - won't remount)
└── Content Pane
└── ExecutionProcessesProvider (keyed)
└── ReviewProvider
└── Inner Allotment
├── Main Pane
├── Changes/Logs Pane
└── Git Panel Pane
```
Now when switching workspaces:
- The `ExecutionProcessesProvider` with its key will remount the inner Allotment (ensuring clean state)
- The sidebar stays mounted because it's outside the keyed provider
- Layout looks the same as before (sidebar on left, 3 panes on right)
|
||
GitHub Action
|
2c474d689c | chore: bump version to 0.0.149 | ||
|
Louis Knight-Webb
|
7b30a4908e |
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.
|
||
|
Louis Knight-Webb
|
6cb45f54c1 |
Fix search input losing focus when hovering over dropdown items (Vibe Kanban) (#1966)
* Done! Here's a summary of the changes: ## Changes Made ### 1. `Dropdown.tsx` (lines 140-190) - Added `preventFocusOnHover?: boolean` prop to `DropdownMenuItemProps` interface - Added `onPointerMove` handler that calls `e.preventDefault()` when `preventFocusOnHover` is true, which stops Radix from stealing focus on hover ### 2. `SearchableDropdown.tsx` (line 110) - Added `preventFocusOnHover` prop to `DropdownMenuItem` ### 3. `ProjectSelectorContainer.tsx` (lines 181, 208) - Added `preventFocusOnHover` prop to both `DropdownMenuItem` components (the "Create new project" button and the virtualized project items) The fix uses `e.preventDefault()` on `onPointerMove` to disable Radix's hover-to-focus behavior, as documented in [Radix UI Issue #2193](https://github.com/radix-ui/primitives/issues/2193). This preserves all other functionality (click, keyboard navigation, selection) while allowing the search input to retain focus when hovering over items. * Done! I've added the `onPointerLeave` handler to `DropdownMenuItem` alongside the existing `onPointerMove` handler. Both now call `e.preventDefault()` when `preventFocusOnHover` is true. **Summary of the fix:** - Added `onPointerLeave` destructuring from props (line 161) - Added `onPointerLeave` handler that calls `e.preventDefault()` when `preventFocusOnHover` is true (lines 187-194) Per the [Radix UI Issue #2193](https://github.com/radix-ui/primitives/issues/2193), **both** `onPointerMove` and `onPointerLeave` need `preventDefault()` to fully disable hover-to-focus behavior. |
||
|
Alex Netsch
|
8dc07ee2b2 |
Fix workspace sidebar ordering to use updated_at instead of created_at (Vibe Kanban) (#1965)
* Done. I've updated the workspace sorting in `frontend/src/components/ui-new/hooks/useWorkspaces.ts` to use `updated_at` instead of `created_at`. Both active and archived workspaces will now be sorted by their most recent update time (with pinned workspaces still appearing first). All type checks and lint pass. * Cleanup script changes for workspace 37e99d73-8ab0-4501-990e-1007d78e44aa |
||
Anastasiia Solop
|
eff14ef094 |
Add Push button to Git panel when PR is open with unpushed commits (Vibe Kanban) (#1951)
* The implementation is complete. Here's a summary of what I changed:
## Summary
Added a "Push" button to the workspaces UI Git panel. The changes allow users to push changes when a PR is already open.
### Files Modified:
1. **`frontend/src/components/ui-new/primitives/RepoCard.tsx`** (lines 27-42)
- Added `'push'` to the `RepoAction` type union
- Added a new option to `repoActionOptions` array with the Push button configuration using `ArrowUpIcon`
2. **`frontend/src/components/ui-new/actions/index.ts`** (lines 33, 691-707)
- Imported `ArrowUpIcon` from phosphor-icons
- Added `GitPush` action definition that:
- Calls `attemptsApi.push()` with the workspace and repo IDs
- Handles the `force_push_required` error case
- Invalidates workspace queries on success to refresh the UI
3. **`frontend/src/components/ui-new/containers/WorkspacesLayout.tsx`** (line 103)
- Added mapping from `'push'` action to `Actions.GitPush` in the action handler
The Push button now appears in the Git panel dropdown alongside "Open pull request" and "Merge" options.
* The type check passes. Here's a summary of the updated changes:
## Summary
The Push button now appears **next to the PR number** when:
1. A PR is already open (`prStatus === 'open'`)
2. There are new commits ahead (`commitsAhead > 0`)
### Changes Made:
**`frontend/src/components/ui-new/primitives/RepoCard.tsx`**:
- Removed `push` from the `repoActionOptions` dropdown (lines 34-41)
- Added a dedicated Push button in the PR status row (lines 213-222) that:
- Only appears when `prStatus === 'open'` AND `commitsAhead > 0`
- Uses brand primary styling (`bg-brand-primary`) to make it prominent
- Displays with an up arrow icon and "Push" label using existing translation
- Calls `onActionsClick?.('push')` when clicked
The `GitPush` action and handler mapping from the previous changes remain in place to handle the push operation.
* Done. The Push button now uses the same styling as the "Open PR" button: `bg-panel text-normal hover:bg-tertiary`.
* The type check passes. Here's a summary of the fix:
## Summary
The Push button now correctly uses `remoteCommitsAhead` (unpushed commits to remote) instead of `commitsAhead` (total commits ahead of target branch) to determine when to show.
### Changes Made:
1. **`frontend/src/components/ui-new/views/GitPanel.tsx`**:
- Added `remoteCommitsAhead: number` to the `RepoInfo` interface
- Pass `remoteCommitsAhead` to `RepoCard`
2. **`frontend/src/components/ui-new/primitives/RepoCard.tsx`**:
- Added `remoteCommitsAhead?: number` to `RepoCardProps`
- Changed the push button condition from `commitsAhead > 0` to `remoteCommitsAhead > 0`
3. **`frontend/src/components/ui-new/containers/WorkspacesLayout.tsx`**:
- Added `remoteCommitsAhead: repoStatus?.remote_commits_ahead ?? 0` to the `repoInfos` mapping
Now the Push button will:
- Only appear when there's an open PR AND there are unpushed commits (`remote_commits_ahead > 0`)
- Disappear after a successful push (when `remote_commits_ahead` becomes 0)
- Reappear when new commits are made locally that haven't been pushed
* The type check passes. Here's a summary of the changes:
## Summary
The Push button now hides immediately when clicked and only reappears when new commits are available:
### Changes to `RepoCard.tsx`:
- Added `useState` and `useRef` imports
- Added `isPushHidden` state to track when the button should be hidden
- Added `lastRemoteCommitsAhead` ref to track the previous value
- Added `useEffect` that resets `isPushHidden` to `false` when `remoteCommitsAhead` increases (meaning new commits are available)
- Added `handlePushClick` function that hides the button immediately and triggers the push action
- Updated the button condition to include `!isPushHidden`
The button will:
1. Hide immediately when clicked (no double-clicking possible)
2. Stay hidden until `remoteCommitsAhead` increases above the last known value
3. Reappear when new local commits are made that need to be pushed
* Both the linter and type check pass. The linter errors are fixed. Here's a summary of the changes:
## Summary of Linter Fixes
The linter was flagging that `RepoCard` (a presentational component) should not manage state or have side effects. I refactored the code to lift the state up to the container component:
### Changes:
1. **`RepoCard.tsx`** - Made purely presentational:
- Removed `useState`, `useRef`, `useEffect` imports
- Removed `remoteCommitsAhead` prop
- Added `showPushButton` prop (boolean, controlled by parent)
- Added `onPushClick` callback prop
- The button now just renders based on `showPushButton` and calls `onPushClick`
2. **`GitPanel.tsx`** - Updated interface and props:
- `RepoInfo` now has optional `remoteCommitsAhead` and `showPushButton` fields
- Added `onPushClick` callback to `GitPanelProps`
- Passes `showPushButton` and `onPushClick` to `RepoCard`
3. **`WorkspacesLayout.tsx`** - State management moved here:
- Added `hiddenPushRepos` state (Set of repo IDs where push was clicked)
- Added `lastRemoteCommitsAhead` ref to track previous values
- Added `useEffect` to reset hidden state when `remoteCommitsAhead` increases
- Added `repoInfosWithPushButton` memo that computes `showPushButton` for each repo
- Added `handlePushClick` that hides button immediately and executes push action
* prettier fix
* Done. I've added `GitPush` to the Git actions list in the command bar. It now appears between "Merge" and "Rebase" in the Git Actions menu.
* Both type check and lint pass.
Done! The Push action in the command bar now has the same visibility conditions as in the Git panel - it only appears when:
1. There's a workspace
2. There are git repos
3. There's an open PR (`hasOpenPR`)
4. There are unpushed commits (`hasUnpushedCommits`)
### Summary of changes:
1. **`frontend/src/components/ui-new/actions/index.ts`**:
- Added `hasOpenPR` and `hasUnpushedCommits` to `ActionVisibilityContext`
- Updated `GitPush.isVisible` to check these new context properties
2. **`frontend/src/components/ui-new/actions/useActionVisibility.ts`**:
- Added `useBranchStatus` hook to get branch status data
- Computed `hasOpenPR` by checking if any repo has an open PR in merges
- Computed `hasUnpushedCommits` by checking if any repo has `remote_commits_ahead > 0`
- Added these values to the returned context
* The refactoring is complete. Here's a summary of the changes:
## Summary of Changes
The push button logic has been simplified by using React Query's mutation state instead of manually tracking hidden state with refs and effects.
### Key Changes:
1. **WorkspacesLayout.tsx (`GitPanelContainer`)**:
- Removed the complex `useEffect` that tracked `lastRemoteCommitsAhead` and managed `hiddenPushRepos` state
- Removed `hiddenPushRepos` state and `lastRemoteCommitsAhead` ref
- Added `usePush` hook with callbacks that:
- On success: awaits query invalidation before clearing the loading state
- On error: clears the loading state
- Added simple `pushingRepoId` state to track which repo is being pushed
- The button now shows loading state during push and automatically disappears after refetch if `remoteCommitsAhead` becomes 0
2. **GitPanel.tsx**:
- Added `isPushPending?: boolean` to `RepoInfo` interface
- Passes `isPushPending` to `RepoCard`
3. **RepoCard.tsx**:
- Added `isPushPending` prop
- Button shows while either `showPushButton` or `isPushPending` is true
- Button is disabled and shows spinner with "Pushing..." text when pending
- Uses existing translation key `git.states.pushing`
### How it works now:
1. User clicks push button
2. Button immediately shows loading state (spinner + "Pushing...")
3. Button is disabled to prevent multiple clicks
4. Push mutation runs
5. On success, query invalidation completes before clearing loading state
6. Once `branchStatus` refetches, if `remoteCommitsAhead` is 0, `showPushButton` becomes false and button disappears
7. On error, loading state clears and button returns to normal
This approach is simpler and more predictable than manually tracking previous values.
* Done. The push button now shows success feedback like the old UI:
## Summary of Changes
The push button now has three states:
1. **Normal**: Shows "Push" with an up arrow icon
2. **Pending**: Shows "Pushing..." with a spinning icon, button is disabled
3. **Success**: Shows "Pushed!" with a green checkmark icon and green background for 2 seconds
The flow is:
1. User clicks "Push"
2. Button immediately shows "Pushing..." with spinner
3. Push completes, queries are invalidated and refetched
4. Button shows green "Pushed!" for 2 seconds
5. Button disappears (if no more commits to push) or returns to normal state
* All code review issues have been addressed:
## Summary of Changes
1. **Unified push logic** - Now uses `executeAction(Actions.GitPush, ...)` instead of calling `usePush` hook directly. This ensures consistent error handling between the button and command bar.
2. **Proper setTimeout cleanup** - Added `successTimeoutRef` with a cleanup effect that clears the timeout when the component unmounts:
```typescript
const successTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
useEffect(() => {
return () => {
if (successTimeoutRef.current) {
clearTimeout(successTimeoutRef.current);
}
};
}, []);
```
3. **Error feedback** - Added error state handling:
- New `isPushError` prop flows through GitPanel to RepoCard
- Button shows red "Failed" with warning icon when push fails
- Error state clears after 3 seconds
- Added `git.states.pushFailed` translation key
4. **Simplified state management** - Changed from separate `pushingRepoId` and `pushSuccessRepoId` to a single `pushStates` record with `PushState` type (`'idle' | 'pending' | 'success' | 'error'`)
* All i18n checks pass now.
* Both code review issues have been addressed:
## Summary of Changes
### 1. Fixed stale closure issue
- Added a `pushStatesRef` that mirrors the `pushStates` state
- Changed the check from `pushStates[repoId]` to `pushStatesRef.current[repoId]`
- Removed `pushStates` from the dependency array
### 2. Added proper error logging and user-facing error message
- Modified `ActionsContext.tsx` to re-throw errors after showing the dialog, so callers can handle them
- Added `console.error('Push failed:', error)` for debugging purposes
- The error dialog is already shown by `executeAction` via `ConfirmDialog`
- The button now properly shows the error state when push fails
* fmt
* The fix is in place. The key change is:
- When we're in a "push flow" (state is `pending`, `success`, or `error`), we set `showPushButton: false` but the button remains visible because of the `isPushPending || isPushSuccess || isPushError` condition in RepoCard
- This prevents the race condition where the query refetch could hide the button before we set the success state
* All checks pass. The changes now:
1. **Reverted ActionsContext** - Removed the re-throw to maintain backwards compatibility
2. **Use `usePush` hook directly** - For proper success/error detection instead of going through `executeAction`
3. **Show error dialog manually** - Using `ConfirmDialog.show()` when push fails
4. **Track current repo with ref** - `currentPushRepoRef` tracks which repo is being pushed so callbacks can update the correct state
* All checks pass. Here's a summary of the force push handling:
## Force Push Functionality
Yes, force push is fully supported. Here's how it works:
**Old UI (`useGitOperations.ts`):**
1. When `usePush` fails with `errorData.type === 'force_push_required'`
2. It automatically shows `ForcePushDialog`
3. The dialog warns the user about the consequences and lets them confirm
4. If confirmed, it calls `useForcePush` to execute the force push
**New UI (now updated):**
1. When the push button is clicked and fails with `force_push_required`
2. The push state is reset to `idle` (so the button returns to normal)
3. `ForcePushDialog` is shown with the attemptId and repoId
4. User can confirm or cancel the force push from the dialog
The `ForcePushDialog` handles its own loading state, success/error feedback, and API call internally via `useForcePush` hook.
* clear pushStates on workspace change
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---------
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
|
||
Gabriel Gordon-Hall
|
ea2a053403 |
I've made both changes: (#1962)
1. **Moved the Dev Server Script input** to be the first field in the Scripts & Configuration section (in `ReposSettings.tsx`) 2. **Updated the section description** in the English locale to mention "dev server" scripts: the description now reads "Configure dev server, setup, cleanup, and copy files for this repository..." |
||
|
Alex Netsch
|
5ab75f0220 |
Done. I've updated the agent install hints across all 6 locales: (#1960)
**Changes made:** - `notFound`: Changed from "Not Found" → "Unknown" (and equivalent in other languages) - `notFoundTooltip`: Changed from "No previous usage detected. Agent may require installation and/or login." → "We couldn't verify this agent is set up, but go ahead and try it." **Files modified:** - `frontend/src/i18n/locales/en/settings.json` - `frontend/src/i18n/locales/es/settings.json` - `frontend/src/i18n/locales/ja/settings.json` - `frontend/src/i18n/locales/ko/settings.json` - `frontend/src/i18n/locales/zh-Hans/settings.json` - `frontend/src/i18n/locales/zh-Hant/settings.json` The new wording is softer and encourages users to just try the agent rather than assuming it's not installed. |
||
|
Louis Knight-Webb
|
cf5b04d3b8 |
Increase max height of chat box (#1957)
I've successfully implemented the change to allow the `ChatBoxBase.tsx` to expand vertically up to 50% of the window height. **Change made in** `vibe-kanban/frontend/src/components/ui-new/primitives/ChatBoxBase.tsx:144`: ```tsx // Before: className="min-h-0 max-h-[min(15rem,20vh)] overflow-y-auto" // After: className="min-h-0 max-h-[50vh] overflow-y-auto" ``` **What this does:** - The old constraint `max-h-[min(15rem,20vh)]` limited the editor to whichever was smaller: 15rem or 20% of viewport height - The new constraint `max-h-[50vh]` allows the editor to grow up to 50% of the viewport height - The editor still starts small and only expands as content is added (due to `min-h-0`) - `overflow-y-auto` ensures scrolling when content exceeds the max height **Verification:** - ✅ TypeScript check passes (`pnpm run check`) - ✅ ESLint passes (`pnpm run lint`) - The dev server was started and the change was tested in the browser (though the browser MCP encountered an issue during extended testing) |
||
|
Louis Knight-Webb
|
8e7eb54313 |
Solve task follow up section infinite loop (#1955)
**Root cause:** The `switch` statement was missing a `default` case. When `typ.type` didn't match any handled case, the loop continued forever because `curr` was never updated. **Changes made:** 1. **`vibe-kanban/frontend/src/utils/executor.ts`** (line 59-60): Added `default:` to fall through with `ScriptRequest`, advancing to the next action for any unhandled types. 2. **`vibe-kanban/frontend/src/components/tasks/TaskFollowUpSection.tsx`**: - Removed duplicate local `extractProfile` function (17 lines) - Added import from `@/utils/executor` - Updated usage to `extractProfileFromAction` 3. **`vibe-kanban/frontend/src/components/NormalizedConversation/RetryEditorInline.tsx`**: - Removed duplicate local `extractProfile` function (17 lines) - Added import from `@/utils/executor` - Updated usage to `extractProfileFromAction` Both type checks (TypeScript and Rust/cargo) pass successfully. |
||
|
Gabriel Gordon-Hall
|
8fa5b9d098 |
feat: remove agent_working_dir from settings (#1874)
* remove configurable agent_working_dir (cherry picked from commit 285b3e04abceeb8e4a4ee1be16e3de97a8f32299) * calculate agent_working_dir on create and start task * i18n |
||
Pedro Paixao
|
b6518fd930 |
fix: update font-feature-settings in diff-style-overrides.css (#1827)
* fix: update font-feature-settings in diff-style-overrides.css Changed the font-feature-settings property for the diff-tailwindcss-wrapper to disable ligatures by setting it to "liga" off, ensuring consistent text rendering across different components. * chore: run formatter --------- Co-authored-by: Pedro <> |
||
|
Louis Knight-Webb
|
d0a67aedf2 | STDERR logs will now display in red using the correct Tailwind color class from the new design system. (#1927) | ||
|
Anastasiia Solop
|
3d631defb4 | Fix vertical scroll in the right panels in workspaces UI (#1925) | ||
|
Gabriel Gordon-Hall
|
c5554610a9 |
feat: Repo level management (#1828)
* move dev server scripts onto project repos * wip: move scripts onto Repo structs * wip: repo settings page * i18n and fixes * fix refresh * i18n * nits * clickable repo cards * view logs for all dev servers * updates to workspaces * Let's make some changes to the way applications are tested: (vibe-kanban 4592de6c) - When the user starts a dev server, we should automatically open the `PreviewPanel.tsx` - In the preview panel, if no dev server script is set for any of the repos in the workspace show a message along these lines: Vibe Kanban can run dev servers to help you test your changes. You can set this up in the repo settings area. You can learn more about testing applications here: https://www.vibekanban.com/docs/core-features/testing-your-application - We should also not show the `PreviewControlsContainer.tsx` if none of the repos have a dev server script `vibe-kanban/frontend/src/components/panels/PreviewPanel.tsx` `vibe-kanban/frontend/src/components/ui-new/actions/index.ts` `vibe-kanban/frontend/src/components/ui-new/containers/PreviewControlsContainer.tsx` --------- Co-authored-by: Louis Knight-Webb <louis@bloop.ai> |
||
|
Louis Knight-Webb
|
4e20df9823 |
Improve executor profile selection with save-as-default toggle and variant ordering (Vibe Kanban) (#1912)
* All implementations are complete. Here's a summary of the changes: ## Summary of Changes ### 1. `frontend/src/utils/executor.ts` - Added `areProfilesEqual()` function to compare two `ExecutorProfileId` objects, treating `null`/`undefined` variant as equivalent to `"DEFAULT"` - Updated `getVariantOptions()` to sort variants with DEFAULT first, then alphabetically ### 2. `frontend/src/components/ui-new/containers/CreateChatBoxContainer.tsx` - Added `saveAsDefault` state (default: `false`) - Added `hasChangedFromDefault` memo to detect when user has changed from their saved default - Added `useEffect` to reset toggle when profile matches default again - Updated `handleExecutorChange` to: - Use saved variant when switching TO the user's default executor - Fall back to DEFAULT variant otherwise - Updated `handleSubmit` to save profile as default when toggle is checked - Added `saveAsDefault` prop to `CreateChatBox` ### 3. `frontend/src/components/ui-new/primitives/CreateChatBox.tsx` - Added `SaveAsDefaultProps` interface - Added `saveAsDefault` prop to `CreateChatBoxProps` - Rendered checkbox toggle in `headerLeft` (after executor dropdown) when `saveAsDefault.visible` is true ### 4. `frontend/src/i18n/locales/en/tasks.json` - Added `"saveAsDefault": "Save as default"` translation key under `conversation` * Cleanup script changes for workspace 143d0206-8a21-454b-96ad-ce53cbcfc24a * All translations have been added: | Language | Translation | |----------|-------------| | English (en) | "Save as default" | | Spanish (es) | "Guardar como predeterminado" | | Japanese (ja) | "デフォルトとして保存" | | Korean (ko) | "기본값으로 저장" | | Simplified Chinese (zh-Hans) | "设为默认" | | Traditional Chinese (zh-Hant) | "設為預設" | |
||
|
Louis Knight-Webb
|
d3dc1439cc |
Add PostHog analytics event for new UI access (Vibe Kanban) (#1895)
* Done. I've added PostHog analytics tracking to `NewDesignScope.tsx` that fires a `ui_new_accessed` event once per session when users visit any `/workspaces` route. The implementation: - Fires the event only once per session (using a `useRef` that resets on page refresh) - Respects the user's analytics opt-in/opt-out preferences (handled by PostHog SDK) - Located in `NewDesignScope` which wraps all new UI routes * Use sessionStorage for true once-per-session tracking The useRef approach only prevented duplicates within a single mount lifecycle. If the user navigated away from /workspaces and back, the component would remount and the ref would reset, firing the event again. sessionStorage persists for the entire browser tab lifetime, ensuring the event fires exactly once per session. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Revert to useRef for tracking 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com> |
||
|
Louis Knight-Webb
|
4120678cf7 |
Done. The fix adds two lines to the GitCreatePR action in actions/index.ts: (#1911)
1. Fetches the workspace repos via `attemptsApi.getRepos(workspaceId)` 2. Finds the specific repo and passes its `target_branch` to `CreatePRDialog.show()` This matches the pattern already used by the `GitRebase` action in the same file. Now when you create a PR from the workspaces (ui-new) layout, the base branch will correctly default to the workspace's target branch instead of the main repo's currently checked-out branch. |
||
|
Louis Knight-Webb
|
e2fad0e10c |
The TypeScript check passed with no errors. The debounce pattern from VirtualizedProcessLogs.tsx has been successfully rolled out to ConversationList.tsx. (#1909)
## Summary Added 100ms debounce to `ConversationList.tsx` matching the pattern in `VirtualizedProcessLogs.tsx`: 1. **Added refs** (lines 94-99): `pendingUpdateRef` to store pending updates and `debounceTimeoutRef` to track the timeout 2. **Modified `onEntriesUpdated`** (lines 115-149): Now stores updates in the ref and debounces state updates with a 100ms delay 3. **Added cleanup effect** (lines 107-113): Clears any pending timeout on unmount to prevent memory leaks |
||
|
Louis Knight-Webb
|
a92c35d42e |
The TypeScript check passed with no errors. (#1910)
## Summary
I've implemented the fix for showing the left sidebar when entering `WorkspacesLayout.tsx` when no changes/preview/logs panel is open:
**Changes made to `vibe-kanban/frontend/src/components/ui-new/containers/WorkspacesLayout.tsx`:**
1. Added `setSidebarVisible` to the destructured values from `useLayoutStore()` (line 161)
2. Added a new `useEffect` (lines 333-338) that shows the sidebar whenever no panel is open:
```typescript
useEffect(() => {
if (!isChangesMode && !isLogsMode && !isPreviewMode) {
setSidebarVisible(true);
}
}, [isChangesMode, isLogsMode, isPreviewMode, setSidebarVisible]);
```
This ensures that when the component mounts or when all panels are closed, the sidebar will automatically become visible.
|
||
|
Louis Knight-Webb
|
5ee40bf322 |
Improve diff viewer color styling for better theme support (Vibe Kanban) (#1894)
* improve diff styles * diffs * review comment styles |
||
|
GitHub Action
|
bd09ba8bd0 | chore: bump version to 0.0.148 | ||
Solomon
|
a9bc5f23e7 |
fix: empty process list regression (#1896)
* fix: empty process list regression * tyecheck fix |
||
|
Louis Knight-Webb
|
9aef10a1bb |
Done. I added min-w-0 to the URL bar container on line 68. This allows the flex container to shrink below its content size, enabling the truncate class on the URL text to work properly and prevent overflow. (#1892)
|
||
|
Louis Knight-Webb
|
6e3421c820 |
Fix CommandBar input and navigation issues with state machine refactor (Vibe Kanban) (#1885)
* Done! I've removed all 7 `shortcut` properties from the action definitions in `index.ts`:
- `NewWorkspace`: removed `shortcut: 'N'`
- `Settings`: removed `shortcut: ','`
- `ToggleSidebar`: removed `shortcut: '['`
- `ToggleGitPanel`: removed `shortcut: ']'`
- `ToggleChangesMode`: removed `shortcut: 'C'`
- `ToggleLogsMode`: removed `shortcut: 'L'`
- `TogglePreviewMode`: removed `shortcut: 'P'`
The `ActionDefinition` type (and its base `ActionBase` interface) were left unchanged as requested.
* fix tailwind nto auto creating styles
* I've successfully completed all the changes. Here's a summary of what was done:
## Summary of Changes
### 1. `ActionExecutorContext` (index.ts)
- Made all properties non-optional
- Removed `gitRepoId` from context (now passed as action parameter)
- Properties now use `| null` for values that may not exist
### 2. New `GitActionDefinition` Type (index.ts)
- Added new action type with `requiresTarget: 'git'`
- Git actions now explicitly require `repoId` as a parameter
### 3. Git Actions Updated (index.ts)
- `GitCreatePR`, `GitMerge`, `GitRebase`, `GitChangeTarget` now use `requiresTarget: 'git'`
- Each action's `execute` function takes `repoId` as third parameter
- Simplified implementations (no more fallback repo fetching logic)
### 4. `ActionsContext` Provider (ActionsContext.tsx)
- Now calls `useDevServer()` to get dev server state
- Provides all required context properties
- `executeAction` handles three action types: global, workspace, and git
- Removed `contextOverride` pattern
### 5. `ContextBarContainer` (ContextBarContainer.tsx)
- Simplified significantly - no longer builds extended context
- Uses executor context directly from provider
- Removed `containerPath` prop
### 6. `ActionVisibilityContext` (index.ts + useActionVisibility.ts)
- Made `editorType`, `devServerState`, `runningDevServerId` required
- Visibility hook now provides all values from hooks
### 7. Updated Call Sites
- `WorkspacesLayout`: Git actions now pass `repoId` as third parameter
- `WorkspacesMain`: Removed `containerPath` prop from ContextBarContainer
* Cleanup script changes for workspace e961e311-6db4-41bf-83a1-ef8dd96eb497
* All changes are complete and type checks pass. Here's a summary of the changes made:
## Summary of Changes
### 1. `ActionExecutorContext` - Made all properties non-optional
- Removed `?` from all properties
- Removed `gitRepoId` (moved to per-action parameter)
- Changed nullable properties to use `| null` type
### 2. New `GitActionDefinition` type
- Added new action type with `requiresTarget: 'git'`
- Takes `repoId` as explicit third parameter
### 3. Git actions updated
- `GitCreatePR`, `GitMerge`, `GitRebase`, `GitChangeTarget` now use `requiresTarget: 'git'`
- Each action's `execute` receives `repoId` as parameter
### 4. `ActionsContext` provider centralized
- Now calls `useDevServer()` to provide dev server state
- Provides all required context properties from hooks
- `executeAction` handles three action types: global, workspace, git
- Removed `contextOverride` pattern
### 5. `ActionVisibilityContext` - Made dev server properties required
- `editorType`, `devServerState`, `runningDevServerId` now required
- `useActionVisibilityContext` hook provides all values
### 6. `ContextBarContainer` simplified
- Removed extended context creation
- Uses executor context directly from provider
### 7. Provider order fix
- Moved `ExecutionProcessesProvider` up to `NewDesignScope`
- Required because `useDevServer` depends on `ExecutionProcessesContext`
### Files Modified:
- `vibe-kanban/frontend/src/components/ui-new/actions/index.ts`
- `vibe-kanban/frontend/src/components/ui-new/actions/useActionVisibility.ts`
- `vibe-kanban/frontend/src/contexts/ActionsContext.tsx`
- `vibe-kanban/frontend/src/components/ui-new/containers/ContextBarContainer.tsx`
- `vibe-kanban/frontend/src/components/ui-new/containers/WorkspacesLayout.tsx`
- `vibe-kanban/frontend/src/components/ui-new/views/WorkspacesMain.tsx`
- `vibe-kanban/frontend/src/components/ui-new/scope/NewDesignScope.tsx`
* The implementation is complete. Let me summarize what was changed:
## Summary of Changes
### `pages.ts`
- Added `'selectRepo'` to `PageId` type for dynamic repo selection page
- Created `StaticPageId` type (excludes `selectRepo`) for static page records
- Added `RepoItem` interface for repo selection items
- Extended `ResolvedGroupItem` union type to include `{ type: 'repo'; repo: RepoItem }`
- Updated `Pages` record and `getPageActions` to use `StaticPageId`
### `CommandBarDialog.tsx`
- Added `repos` from `useWorkspaceContext()`
- Added `pendingGitAction` state to track git actions awaiting repo selection
- Reset `pendingGitAction` when dialog opens/closes
- Modified `getPageWithItems` to generate dynamic `selectRepo` page with repo list
- Updated `handleSelect` to:
- Execute git actions immediately with single repo
- Navigate to `selectRepo` page when multiple repos exist
- Execute pending git action when user selects a repo
- Clear `pendingGitAction` when navigating back from `selectRepo` page
### `CommandBar.tsx`
- Added `FolderIcon` import
- Added rendering for `'repo'` item type with folder icon
## Behavior
1. **Single repo**: When user selects a git action (e.g., "Create Pull Request") and the workspace has only one git repo, the action executes immediately with that repo's ID.
2. **Multiple repos**: When workspace has multiple repos, selecting a git action navigates to a "Select Repository" page where the user can choose which repo to use, then the action executes with the selected repo.
3. **Back navigation**: Pressing back from the repo selection page clears the pending action and returns to the previous page.
* Done! The `CommandBarDialog` has been refactored to use a state machine pattern with `useReducer`. Here's a summary of the changes:
## Summary of Changes
**State Machine Types (lines 38-67):**
- `CommandBarState`: Discriminated union with `browsing` and `selectingRepo` states
- `CommandBarEvent`: `RESET`, `SEARCH_CHANGE`, `GO_BACK`, `SELECT_ITEM`
- `CommandBarEffect`: Side effects returned from reducer (`none` or `execute`)
**Reducer (lines 73-201):**
- Pure function returning `[newState, effect]` tuple
- Handles all state transitions based on current state and event
- Git action flow: single repo → execute, multiple repos → transition to `selectingRepo`
**Component Changes:**
- Replaced 4 `useState` calls with single `useReducer`
- `currentPage` is now derived from state (line 249-250)
- `handleSelect` computes effect from reducer, dispatches event, then handles effect (lines 456-475)
- `goBack` and `handleSearchChange` simply dispatch events (lines 446-453)
**Benefits:**
- All state transitions in one place (the reducer)
- State transitions are pure and testable
- Clear separation between state updates and side effects
- Impossible states are unrepresentable (e.g., can't have `pendingAction` while `browsing`)
* Done! Here's the final result:
## Summary
**Before:** 520 lines in 1 file (after initial state machine refactor)
**After:** 487 lines across 4 files
| File | Lines | Purpose |
|------|-------|---------|
| `CommandBarDialog.tsx` | 101 | Thin orchestration (down from 520) |
| `useCommandBarState.ts` | 177 | State machine hook |
| `useResolvedPage.ts` | 150 | Page building logic |
| `injectSearchMatches.ts` | 59 | DRY search helper |
**Key wins:**
- Main component: **520 → 101 lines** (80% reduction)
- Search injection code: **100 → 59 lines** (4× duplication eliminated)
- Each file has single responsibility
- State machine is testable in isolation
- Page building logic is reusable
* Cleanup script changes for workspace e961e311-6db4-41bf-83a1-ef8dd96eb497
* Done! Here are the final results:
## Final Summary
| File | Before | After | Reduction |
|------|--------|-------|-----------|
| `CommandBarDialog.tsx` | 101 | 106 | +5 (linter formatting) |
| `useCommandBarState.ts` | 177 | 95 | **-82 (46%)** |
| `useResolvedPage.ts` | 150 | 95 | **-55 (37%)** |
| `injectSearchMatches.ts` | 59 | 42 | **-17 (29%)** |
| **Total** | **487** | **338** | **-149 (31%)** |
**Original single file:** 398 lines
**Final 4 files:** 338 lines (15% less code overall)
Key wins:
- Main component is now just 106 lines of thin orchestration
- State machine is flattened (if statements instead of nested switch/case)
- Page resolution is simplified with reused types
- Search injection uses reduce() instead of for-loop
- All files pass type check
* Cleanup script changes for workspace e961e311-6db4-41bf-83a1-ef8dd96eb497
* I've fixed both issues with the CommandBar. Here's a summary of what was wrong and how I fixed it:
## Root Causes
### Issue 1: Nested `<Command>` Components
The `CommandDialog` component was wrapping children in a `<Command>` component, and `CommandBar` also rendered its own `<Command>`. This nested cmdk context caused conflicts with state management.
**Fix:** Removed the `<Command>` wrapper from `CommandDialog` in `Command.tsx:26-44`, and moved the styling classes to `CommandBar`'s `<Command>` component.
### Issue 2: Unstable `dispatch` Function Causing Infinite RESET Loop
In `useCommandBarState.ts`, the `dispatch` function had `[state, repoCount]` in its `useCallback` dependency array. This caused `dispatch` to be recreated on every state change.
In `CommandBarDialog.tsx`, the `useEffect` that resets state when the modal opens had `dispatch` in its dependency array:
```tsx
useEffect(() => {
if (modal.visible) {
dispatch({ type: 'RESET', page });
}
}, [modal.visible, page, dispatch]); // dispatch changes → useEffect runs → RESET
```
This created an infinite loop:
1. User types → state updates → `dispatch` recreated
2. `dispatch` changed → `useEffect` runs → `RESET` dispatched
3. State resets to empty → repeat
**Fix:** Made `dispatch` stable by using refs instead of state in dependencies:
```tsx
const stateRef = useRef<CommandBarState>(browsing(initialPage));
const repoCountRef = useRef(repoCount);
const dispatch = useCallback(
(event: CommandBarEvent): CommandBarEffect => {
const [, effect] = reducer(stateRef.current, event, repoCountRef.current);
rawDispatch(event);
return effect;
},
[] // No dependencies - uses refs for current values
);
```
## Files Changed
1. `vibe-kanban/frontend/src/components/ui-new/primitives/Command.tsx` - Removed nested `<Command>` wrapper from `CommandDialog`
2. `vibe-kanban/frontend/src/components/ui-new/primitives/CommandBar.tsx` - Added styling classes that were on the removed wrapper
3. `vibe-kanban/frontend/src/components/ui-new/dialogs/commandBar/useCommandBarState.ts` - Made `dispatch` stable using refs
|
||
|
Alex Netsch
|
29595c1929 |
Add Azure DevOps repository support for PR operations (Vibe Kanban) (#1808)
* All tasks are complete. Let me summarize what was implemented:
I've successfully implemented Azure DevOps repos support alongside the existing GitHub integration. Here's what was done:
- **`mod.rs`** - Defines the `GitHostService` trait and factory functions for creating services
- **`types.rs`** - Unified types: `GitHostProvider`, `RepoInfo`, `GitHostError`, `CreatePrRequest`, `UnifiedPrComment`
- **`detection.rs`** - URL pattern matching for auto-detecting GitHub (including Enterprise) and Azure DevOps
- **`github/mod.rs`** - `GitHubHostService` implementing the trait
- **`github/cli.rs`** - `GhCli` wrapper (moved from old location)
- **`azure/mod.rs`** - `AzureHostService` implementing the trait
- **`azure/cli.rs`** - `AzCli` wrapper for Azure DevOps CLI commands
1. **Auto-detection**: The system detects the provider from the git remote URL:
- `github.com` → GitHub
- `github.*.com` → GitHub Enterprise
- `dev.azure.com`, `*.visualstudio.com`, or URLs with `/_git/` → Azure DevOps
2. **Unified trait interface**: Both providers implement `GitHostService` with methods for:
- `get_repo_info()` - Get repository identification
- `check_auth()` - Verify CLI authentication
- `create_pr()` - Create pull requests
- `get_pr_status()` - Get PR status by URL
- `list_prs_for_branch()` - List PRs for a branch
- `get_pr_comments()` - Get PR comments
3. **Azure CLI commands supported**:
- `az repos pr create` - Create PRs
- `az repos pr show` - View PR details
- `az repos pr list` - List PRs
- `az repos pr list-threads` - Get PR comments
- `az account show` - Auth check
- `pr.rs` - Uses auto-detection for PR creation
- `pr_monitor.rs` - Uses provider detection from PR URL
- `task_attempts.rs` - Uses git_host for push auth checking
- `error.rs` - Updated `GitHost` error variant
- `share.rs` - Updated `GitHost` error variant
- `generate_types.rs` - Updated type exports
- Old `crates/services/src/services/github.rs` module and directory (replaced by git_host)
Cleanup script changes for workspace 28eb9564-f95a-42e0-8cf2-5228c2ffc0bf
All tests pass, including the new URL decoding tests. The fix is complete - the URL-encoded components (like `Vibe%20Kanban%20Test`) will now be properly decoded to `Vibe Kanban Test` before being passed to the Azure CLI.
Cleanup script changes for workspace 28eb9564-f95a-42e0-8cf2-5228c2ffc0bf
All done! Here's a summary of the changes:
Updated `get_repo_info()` to use the Azure CLI's `az repos show --detect true` command instead of manual URL parsing, similar to how GitHub uses `gh repo view --json owner,name`.
1. **Added `extract_repo_name_from_url()`** - A simple helper that extracts just the repository name from Azure DevOps URLs (looks for `/_git/{repo}` pattern). This is still needed because `az repos show` requires the `--repository` parameter.
2. **Updated `get_repo_info()`** - Now uses `az repos show --repository {name} --detect true --output json` which:
- Auto-detects organization and project from git config
- Returns canonical names (properly decoded)
- Validates the repo exists
3. **Added `extract_org_from_response()`** - Extracts the organization from the `remoteUrl` field in the CLI response, with fallback to URL parsing.
4. **Fixed `run()` method** - Now properly passes the `dir` parameter to `Command::current_dir()` so the `--detect` flag works correctly.
5. **Kept `parse_azure_remote_url()`** - Still used as a fallback for organization extraction and for PR URL parsing.
6. **Added tests** - New tests for `extract_repo_name_from_url()` covering various URL formats.
Cleanup script changes for workspace 28eb9564-f95a-42e0-8cf2-5228c2ffc0bf
Done! The cleanup is complete. Here's what was removed:
Removed the brittle `parse_azure_remote_url()` function and related code:
1. **Removed `AzureRepoInfo` struct** - No longer needed
2. **Removed `parse_azure_remote_url()` function** - The ~90-line function that manually parsed various Azure DevOps URL formats
3. **Updated `get_repo_info()`** - Changed from fallback (`unwrap_or_else`) to error (`ok_or_else`) when organization can't be extracted from the CLI response
4. **Removed 4 tests** - `test_parse_azure_remote_url_https`, `test_parse_azure_remote_url_visualstudio`, `test_parse_azure_remote_url_ssh`, `test_parse_azure_remote_url_with_spaces`
The code now relies entirely on:
- `extract_repo_name_from_url()` - Simple helper to get repo name from URL (for passing to `az repos show`)
- `az repos show --detect true` - Azure CLI command that auto-detects org/project from git config
- `extract_org_from_response()` - Extracts org from the CLI's `remoteUrl` JSON field
The implementation is complete. Here's a summary of the changes:
Simplified the Azure DevOps integration by using the CLI's `--detect` flag instead of parsing URLs to extract org/project/repo.
1. **`types.rs`** - Changed `RepoInfo::AzureDevOps` to store just `repo_path: PathBuf` instead of `organization`, `project`, and `repo_name`. Removed the unused `repo_name()` method.
2. **`cli.rs`** - Major simplification:
- Removed URL parsing helpers: `decode_url_component()`, `extract_repo_name_from_url()`, `extract_org_from_response()`
- `get_repo_info()` now just verifies it's a valid Azure repo via `az repos show --detect true` and returns the path
- `create_pr()` now takes `repo_path` and uses `--detect true` instead of explicit org/project/repo
- `list_prs_for_branch()` now takes `repo_path` and uses `--detect true`
- `get_pr_threads()` now takes `repo_path` and uses `--detect true`
- `view_pr()` now takes the full PR URL and parses org + PR ID internally
- `parse_pr_url()` simplified to return just `(org, pr_id)` instead of 4 values
- Parsing functions simplified to extract URLs from response's `repository.webUrl` field
- Updated tests for the new API
3. **`mod.rs`** - Updated `AzureHostService` to:
- Extract `repo_path` from `RepoInfo::AzureDevOps`
- Pass `repo_path` to CLI methods that need it
- Pass the PR URL directly to `view_pr()` for `get_pr_status()`
- URL parsing reduced to minimal extraction of org + PR ID from PR URLs (only needed for `get_pr_status()`)
- Repo-based operations don't parse URLs at all - CLI auto-detects via git config
- Much cleaner, less brittle code
Cleanup script changes for workspace 28eb9564-f95a-42e0-8cf2-5228c2ffc0bf
All done. The implementation is complete:
**Summary of changes:**
1. **`types.rs`**: Updated `RepoInfo::AzureDevOps` to store `organization_url`, `project`, `repo_name` instead of `repo_path`
2. **`cli.rs`**:
- `get_repo_info()` now parses the JSON response from `az repos show --detect true` to extract repo name, project name, and organization URL
- Added `extract_org_url()` helper to extract the base org URL from the API URL
- Updated `create_pr()`, `list_prs_for_branch()`, `get_pr_threads()` to take explicit `organization_url`, `project`, `repo_name` params
3. **`mod.rs`** (`AzureHostService`):
- `create_pr()`, `list_prs_for_branch()`, `get_pr_comments()` all now extract org/project/repo from `RepoInfo` and pass them to the CLI methods
The key insight was that the `url` field from `az repos show` (e.g., `https://dev.azure.com/{org}/.../_apis/...`) can be truncated to `https://dev.azure.com/{org}` and used directly with the `--organization` flag — minimal URL parsing needed.
Cleanup script changes for workspace 28eb9564-f95a-42e0-8cf2-5228c2ffc0bf
* Done. Refactored all 4 `serde_json::Value` parsing sites to use typed structs:
**Changes to `cli.rs`:**
1. **Added typed response structs** with `#[derive(Deserialize)]`:
- `AzRepoShowResponse`, `AzProject` - for `az repos show`
- `AzPrResponse`, `AzRepository`, `AzCommit` - for PR responses
- `AzThread`, `AzThreadContext`, `AzFilePosition`, `AzThreadComment`, `AzAuthor` - for thread comments
2. **Updated parsing functions**:
- `get_repo_info()` - now deserializes into `AzRepoShowResponse`
- `parse_pr_response()` - now deserializes into `AzPrResponse`
- `parse_pr_list_response()` - now deserializes into `Vec<AzPrResponse>`
- `parse_pr_threads()` - now deserializes into `Vec<AzThread>`
3. **Replaced `extract_pr_info()`** with `az_pr_to_info()` that takes the typed struct directly
4. **Removed `serde_json::Value` import** - no longer needed
The code is now cleaner with no `.get().and_then().as_str()` chains, and serde provides better error messages on parse failures.
* Done. Added the missing `--repository` parameter to `get_pr_threads()`:
1. **`cli.rs`**: Added `repo_name: &str` parameter and `--repository` flag to the CLI command
2. **`mod.rs`**: Updated `get_pr_comments()` to extract both `organization_url` and `repo_name` from `RepoInfo` and pass them to the CLI
Done. Here's a summary of the changes:
**Changes made to `crates/services/src/services/git_host/azure/cli.rs`:**
1. **Removed git2 dependency** - No longer imports `git2::Repository`
2. **Added new typed structs** for `az repos list` response:
- `AzRepoListItem` - with `name`, `project`, and `remote_url` fields
- `AzRepoProject` - with `name` field
3. **Rewrote `get_repo_info()`** to use `az repos list --detect true`:
- Runs CLI command from the repo directory to auto-detect org/project
- Takes the first repo from the list (assuming single repo per directory)
- Extracts org from `remoteUrl` field
4. **Replaced `parse_azure_remote_url()`** with simpler `extract_org_from_remote_url()`:
- Only extracts the organization name from the URL
- Handles both `dev.azure.com` and `visualstudio.com` formats
- Much simpler than the previous 3-tuple URL parser
5. **Updated tests** - Replaced the old URL parsing tests with new `extract_org_from_remote_url` tests
The key improvement is that `az repos list --detect true` uses the Azure CLI's built-in detection (from git config) to find the org and project, then returns all repo info including project name. This avoids git2 library usage and complex URL parsing entirely.
Done. Here's a summary of all changes:
**Summary of Changes**
1. **`crates/services/src/services/git_host/types.rs`**:
- Added `project_id` and `repo_id` fields to `RepoInfo::AzureDevOps` enum variant
2. **`crates/services/src/services/git_host/azure/cli.rs`**:
- Added `id` field to `AzRepoListItem` struct
- Added `id` field to `AzRepoProject` struct
- Added `AzThreadsResponse` struct to wrap the `{ "value": [...] }` REST API response
- Updated `get_repo_info()` to return `project_id` and `repo_id` from `az repos list` output
- Updated `get_pr_threads()` to:
- Accept `project_id` and `repo_id` instead of names
- Use `az rest` with REST API URL instead of non-existent `az repos pr list-threads`
- Updated `parse_pr_threads()` to unwrap the `value` field from REST API response
3. **`crates/services/src/services/git_host/azure/mod.rs`**:
- Updated `create_pr` and `list_prs_for_branch` to use `..` pattern for new fields
- Updated `get_pr_comments()` to extract and pass `project_id` and `repo_id` to CLI
**Key Improvements**:
- Uses UUIDs (`project_id`, `repo_id`) instead of names for REST API calls, avoiding URL encoding issues with names containing spaces like "Vibe Kanban Test"
- Fixed `get_pr_threads()` to use `az rest` since `az repos pr list-threads` doesn't exist as an Azure CLI command
- All unit tests pass
Cleanup script changes for workspace 28eb9564-f95a-42e0-8cf2-5228c2ffc0bf
Done. The fix adds `--resource 499b84ac-1321-427f-aa17-267ca6975798` to the `az rest` command, which tells it to request an Azure DevOps token instead of a generic Azure token. This should now properly authenticate to the Azure DevOps REST API.
Done. The fix replaces `az rest` with `az devops invoke --area git --resource pullRequestThreads`. This uses the same authentication as other `az repos pr` commands, so it should work without requiring the separate "identity materialization" step.
Done. The fix replaces the single combined string for `--route-parameters` with individual arguments for each `key=value` pair. This matches how the Azure CLI expects the parameters to be passed - each route parameter should be a separate shell argument after the `--route-parameters` flag.
Done. Removed all the requested comments from:
- `crates/server/src/routes/task_attempts.rs` (lines 451, 490)
- `crates/server/src/routes/task_attempts/pr.rs` (lines 283, 516)
- `crates/services/src/services/git_host/azure/cli.rs` (section header comment, doc comments on structs and methods)
* Done. Removed the module-level doc comment and all the method doc comments from the `GitHostService` trait and public functions in `mod.rs`.
Done. Removed the obvious/redundant comments from `types.rs`.
Done. Removed the unnecessary `Arc` usage from all three functions in `mod.rs`. The strings are already cloned when extracted from `RepoInfo`, so we can just clone them directly in the retry closure.
* All tests pass. Fixed the `npm run check` and `npm run lint` issues by:
1. Regenerated TypeScript types from Rust
2. Updated `frontend/src/lib/api.ts` to use `CreatePrApiRequest` instead of `CreateGitHubPrRequest`
3. Updated `CreatePRDialog.tsx` to handle the new error types (`cli_not_installed`/`cli_not_logged_in` with a `provider` field instead of `github_cli_not_installed`/`github_cli_not_logged_in`)
4. Fixed clippy warnings about collapsible if statements in `parse_pr_url()`
* Done. I've made `url`, `diff_hunk`, and `author_association` optional in the `UnifiedPrComment` type:
**Changes made:**
1. **`crates/services/src/services/git_host/types.rs`** - Changed the `UnifiedPrComment` enum:
- `url: String` → `url: Option<String>`
- `diff_hunk: String` → `diff_hunk: Option<String>`
- `author_association: String` → `author_association: Option<String>`
2. **`crates/services/src/services/git_host/azure/cli.rs`** - Updated Azure comment creation to use `None` instead of empty strings
3. **`crates/services/src/services/git_host/github/mod.rs`** - Wrapped GitHub values in `Some()`
4. **`frontend/src/components/ui/github-comment-card.tsx`** - Updated interface to allow `url?: string | null` and `diffHunk?: string | null`
5. **`frontend/src/components/ui/wysiwyg/nodes/github-comment-node.tsx`**:
- Updated `NormalizedComment` interface
- Fixed click handler to check `if (data.url)` before opening
- Removed `data.url` from validation (only `id`, `comment_type`, `author`, `body` required)
All checks pass (`pnpm run check`, `pnpm run lint`, `cargo test --workspace`).
* Done. All three changes are complete:
1. **Removed unnecessary temp file** in `azure/cli.rs:create_pr()` - was writing body to temp file then immediately reading it back. Now just passes `body` directly to `OsString`.
2. **Added structs for JSON parsing** in `github/cli.rs:parse_pr_comments()` - replaced manual `item.get("field")...` parsing with `GhCommentsWrapper` and `GhCommentResponse` structs using serde.
3. **Added structs for JSON parsing** in `github/cli.rs:parse_pr_review_comments()` - replaced manual parsing with `GhReviewCommentResponse` struct.
All checks pass (`pnpm run check`, `pnpm run lint`, `cargo test --workspace`).
Cleanup script changes for workspace 28eb9564-f95a-42e0-8cf2-5228c2ffc0bf
Done. Both changes are complete:
1. **Inlined single-field structs** - Consolidated `GhCommentAuthor` and `GhReviewCommentUser` into a single `GhUserLogin` struct that's reused by both `GhCommentResponse` and `GhReviewCommentResponse`.
2. **Converted `extract_pr_info` to struct parsing** - Added `GhPrResponse` and `GhMergeCommit` structs. Replaced the manual `Value::get()` parsing with serde deserialization. The new `pr_response_to_info()` helper converts the parsed struct to `PullRequestInfo`. Also removed the now-unused `serde_json::Value` import.
All checks pass (`pnpm run check`, `pnpm run lint`, `cargo test --workspace`).
Cleanup script changes for workspace 28eb9564-f95a-42e0-8cf2-5228c2ffc0bf
* Done. I've updated `detection.rs` to use `GitCli` instead of `git2`:
1. **Added `get_remote_url` method to `GitCli`** (`git/cli.rs`) - Uses `git remote get-url <remote>` to get the URL
2. **Updated `detect_provider`** (`git_host/detection.rs`) - Now uses `GitCli::get_remote_url()` instead of `git2::Repository`
This keeps the codebase consistent with the pattern of using `GitCli` for git operations rather than mixing `git2` directly in various modules.
All checks pass (`pnpm run check`, `pnpm run lint`, `cargo test --workspace`).
Cleanup script changes for workspace 28eb9564-f95a-42e0-8cf2-5228c2ffc0bf
* Done! The refactor is complete. Here's a summary of the changes:
**New Architecture:**
1. **`ProviderKind` enum** (was `GitHostProvider`) - The discriminant for provider types (GitHub, AzureDevOps, Unknown)
2. **`GitHostProvider` trait** (was `GitHostService`) - The interface that provider implementations must satisfy
3. **`GitHubProvider` struct** (was `GitHubHostService`) - GitHub implementation
4. **`AzureDevOpsProvider` struct** (was `AzureHostService`) - Azure DevOps implementation
5. **`GitHostService` struct** (new) - Main entry point that:
- Holds repo context (`repo_path`, `GitCli`)
- Provides `provider_for_remote(remote_name)` to get a provider for a specific remote
- Provides `provider_from_url(url)` for URL-based detection (e.g., PR URLs)
- Provides `provider_for_kind(kind)` for direct provider construction
**Benefits:**
- Provider detection is now contextual - callers specify which remote they want
- The service struct encapsulates provider detection logic
- Cleaner separation: `GitHostService` is the facade, `GitHostProvider` trait is the contract
- Ready for multi-remote support (different providers for different remotes)
All checks pass (`pnpm run check`, `pnpm run lint`, `cargo test --workspace`).
Cleanup script changes for workspace 28eb9564-f95a-42e0-8cf2-5228c2ffc0bf
All the call sites have been updated to use the new cleaner `GitHostService` facade API. Here's a summary of the changes:
**Changes made:**
1. **`pr.rs:414-418` (`attach_existing_pr`)**: Simplified from:
```rust
let git_host = git_host::GitHostService::new(&repo.path);
let git_host_provider = git_host.provider_for_remote("origin")?;
let repo_info = git_host_provider.get_repo_info(&repo.path).await?;
let prs = git_host_provider.list_prs_for_branch(&repo_info, &workspace.branch).await?;
```
To:
```rust
let git_host = git_host::GitHostService::new(&repo.path);
let prs = git_host.list_prs_for_branch(&workspace.branch).await?;
```
2. **`pr.rs:511-525` (`get_pr_comments`)**: Simplified from provider-based pattern to:
```rust
let git_host = git_host::GitHostService::new(&repo.path);
let provider = git_host.provider_kind()?;
match git_host.get_pr_comments(pr_info.number).await { ... }
```
3. **`task_attempts.rs:451-453` (`push_task_attempt_branch`)**: Removed explicit `check_auth()` call since auth is now checked during the actual operation. Just verify provider is supported:
```rust
let git_host = git_host::GitHostService::new(&worktree_path);
git_host.provider_kind()?;
```
4. **`task_attempts.rs:490-492` (`force_push_task_attempt_branch`)**: Same simplification.
The new API is much cleaner - call sites just create a `GitHostService::new(path)` and call methods directly without dealing with providers, repo info, or explicit auth checks.
Cleanup script changes for workspace 28eb9564-f95a-42e0-8cf2-5228c2ffc0bf
The refactoring is complete. Here's a summary of what was done:
**Changes made:**
1. **`crates/services/Cargo.toml`** - Added `enum_dispatch` dependency
2. **`crates/services/src/services/git_host/mod.rs`** - Completely rewritten:
- `GitHostProvider` is now a public trait with `#[enum_dispatch(GitHostService)]`
- `GitHostService` is now an enum with `GitHub` and `AzureDevOps` variants
- Constructors: `from_pr_url(url)` and `from_remote_url(url)` - no `new()` method
- Methods now take `repo_path` as a parameter where needed
3. **`crates/services/src/services/git_host/github/mod.rs`** - Updated to match new trait signature (methods take `repo_path`, `check_auth` called inside `create_pr`)
4. **`crates/services/src/services/git_host/azure/mod.rs`** - Updated similarly
5. **`crates/services/src/services/git.rs`** - Added `get_remote_url()` method to `GitService`
6. **Call site updates:**
- `pr_monitor.rs` - Uses `from_pr_url`
- `pr.rs` - Uses `get_remote_name_from_branch_name` + `get_remote_url` + `from_remote_url`
- `task_attempts.rs` - Same pattern for push functions
**New API usage:**
```rust
// From a PR URL (e.g., for checking PR status)
let git_host = GitHostService::from_pr_url(&pr_url)?;
let status = git_host.get_pr_status(&pr_url).await?;
// From a remote URL (e.g., for creating PRs)
let remote_name = git_service.get_remote_name_from_branch_name(&repo_path, &branch)?;
let remote_url = git_service.get_remote_url(&repo_path, &remote_name)?;
let git_host = GitHostService::from_remote_url(&remote_url)?;
let pr_info = git_host.create_pr(&repo_path, &pr_request).await?;
// Get provider kind (infallible since already constructed)
let provider = git_host.provider_kind();
```
Cleanup script changes for workspace 28eb9564-f95a-42e0-8cf2-5228c2ffc0bf
All cleaned up. Here's the final architecture:
**`git_host/mod.rs`:**
```rust
pub trait GitHostProvider: Send + Sync {
async fn create_pr(&self, repo_path: &Path, request: &CreatePrRequest) -> Result<PullRequestInfo, GitHostError>;
async fn get_pr_status(&self, pr_url: &str) -> Result<PullRequestInfo, GitHostError>;
async fn list_prs_for_branch(&self, repo_path: &Path, branch_name: &str) -> Result<Vec<PullRequestInfo>, GitHostError>;
async fn get_pr_comments(&self, repo_path: &Path, pr_number: i64) -> Result<Vec<UnifiedPrComment>, GitHostError>;
fn provider_kind(&self) -> ProviderKind;
}
pub enum GitHostService {
GitHub(GitHubProvider),
AzureDevOps(AzureDevOpsProvider),
}
impl GitHostService {
pub fn from_url(url: &str) -> Result<Self, GitHostError>
}
```
**Changes made:**
1. Removed `check_auth` and `get_repo_info` from the public trait - they're now private methods on each provider
2. Consolidated `from_pr_url` and `from_remote_url` into a single `from_url` constructor
3. The trait now has exactly 5 methods - the minimal public API needed by call sites
**Call site usage is clean:**
```rust
// From any URL (PR URL or remote URL)
let git_host = GitHostService::from_url(&url)?;
// Use the trait methods
let pr_info = git_host.create_pr(&repo_path, &request).await?;
let status = git_host.get_pr_status(&pr_url).await?;
let prs = git_host.list_prs_for_branch(&repo_path, &branch).await?;
let comments = git_host.get_pr_comments(&repo_path, pr_number).await?;
let kind = git_host.provider_kind();
```
Cleanup script changes for workspace 28eb9564-f95a-42e0-8cf2-5228c2ffc0bf
Done. The refactoring is complete:
1. **Created `GitHubRepoInfo`** in `git_host/github/cli.rs` - a simple struct with `owner` and `repo_name`
2. **Created `AzureRepoInfo`** in `git_host/azure/cli.rs` - a struct with `organization_url`, `project`, `project_id`, `repo_name`, `repo_id`
3. **Updated both providers** to use their respective provider-specific structs directly, removing all the match arms and error cases for "wrong variant" that could never happen
4. **Removed the shared `RepoInfo` enum** from `types.rs` and the public exports
The code is cleaner now - each provider has its own internal representation of repo info, and there's no shared enum that requires impossible error handling paths.
Cleanup script changes for workspace 28eb9564-f95a-42e0-8cf2-5228c2ffc0bf
The fix compiles. The issue was that `get_remote_name_from_branch_name` was calling `get_remote_from_branch_ref` which uses `repo.branch_remote_name()` - this git2 function requires the branch to have upstream tracking configured. For local branches that haven't been pushed yet (or don't have tracking set), this fails with the error you saw.
The fix changes the behavior to fall back to the default remote (typically "origin") when the branch doesn't have upstream tracking configured. This makes sense because:
1. Most repos only have one remote anyway
2. When creating a PR for a local branch, we need to push to *some* remote - the default is the sensible choice
3. The original code computed `default_remote` but never actually used it as a fallback
Done. Added `get_remote_url_from_branch_or_default` to `GitService` and updated all 4 call sites. The pattern is now:
```rust
let remote_url = deployment
.git()
.get_remote_url_from_branch_or_default(&repo_path, &branch)?;
let git_host = git_host::GitHostService::from_url(&remote_url)?;
```
Two lines instead of four, and the function name makes the fallback behavior explicit.
Done. Removed the unnecessary provider detection checks from both `push_task_attempt_branch` and `force_push_task_attempt_branch`. The push operations now just push directly - git push works with any remote regardless of whether we support it as a PR provider. Auth errors from git push itself (SSH keys, HTTPS credentials) still come through `GitServiceError::GitCLI(...)` and propagate to the frontend the same way.
* All done. Removed the low-value comments:
- "Create git host from the PR URL"
- "Fetch comments"
- "Get the URL for a remote (e.g., "origin")."
- "Azure DevOps-specific repository information"
- "GitHub-specific repository information"
- "Get the remote URL for the branch to detect the provider" (2 places)
- "Get repository info from the GitHub CLI"
- "Get repository info from the Azure CLI"
- "Check authentication status" (2 places)
Kept comments that provide actual value like the fallback behavior explanation on `get_remote_url_from_branch_or_default`.
All done. Removed the low-value comments:
- "Create git host from the PR URL"
- "Fetch comments"
- "Get the URL for a remote (e.g., "origin")."
- "Azure DevOps-specific repository information"
- "GitHub-specific repository information"
- "Get the remote URL for the branch to detect the provider" (2 places)
- "Get repository info from the GitHub CLI"
- "Get repository info from the Azure CLI"
- "Check authentication status" (2 places)
- "Get PR status from URL (auto-detects provider)"
- "High-level errors originating from the Azure CLI."
- "High-level errors originating from the GitHub CLI."
- "Azure DevOps hosting provider implementation"
- "GitHub hosting provider implementation"
- "Newtype wrapper for invoking the `gh` command."
- "Newtype wrapper for invoking the `az` command."
- "Trait for git hosting provider operations (GitHub, Azure DevOps, etc.)"
- All the trait method doc comments (Create a pull request, Get PR status, etc.)
- "Git hosting service - dispatches to the appropriate provider."
- "Create a GitHostService by detecting the provider from a URL."
- Simplified the Azure DevOps pattern comments in detection.rs
* Done. Here's a summary of the fix:
**Problem**: `get_repo_info` used `az repos list --detect true` which returns ALL repos in the Azure DevOps project, then just took the first one. This was wrong for multi-repo projects.
**Solution**:
1. `AzureDevOpsProvider` now stores the remote URL passed to `from_url()`
2. `get_repo_info` now takes the remote URL and filters the repo list to find the matching repo using `remote_urls_match()`
3. Added `remote_urls_match()` helper that normalizes URLs (lowercase, strips trailing `/` and `.git`) for comparison
4. Added `extract_organization_url()` to get the Azure organization URL from a remote URL (supports both `dev.azure.com` and legacy `visualstudio.com` formats)
5. Removed the now-unused `extract_org_from_remote_url()` function
The flow is now:
- Call site gets remote URL via `get_remote_url_from_branch_or_default()`
- Creates `GitHostService::from_url(&remote_url)` which stores the URL on `AzureDevOpsProvider`
- When `get_repo_info` is called, it lists all repos in the project and finds the one matching the stored remote URL
Cleanup script changes for workspace 28eb9564-f95a-42e0-8cf2-5228c2ffc0bf
* Done. Summary of changes:
1. **`pr.rs:get_pr_comments`** - Now gets the remote URL from `workspace_repo.target_branch` instead of using the PR URL to create the `GitHostService`
2. **`azure/cli.rs`**:
- Added `ssh_url` field to `AzRepoListItem`
- Updated `get_repo_info` to detect if the input URL is SSH (`starts_with("git@")`) and compare against the appropriate field (`ssh_url` vs `remote_url`)
- Renamed `remote_urls_match` to `urls_match` since it now handles both HTTPS and SSH URLs
- Added SSH URL test case
* Build passes. The simple fix handles both SSH formats without adding a dependency.
* Build passes. Now `ssh_url` is optional - if it's not in the response and the user has an SSH remote configured, they'll get a clear error message ("No repo found matching remote URL: ...").
* Done. The `urls_match` function now normalizes `ssh://` prefix to scp-style before comparing.
* Done. Summary of changes:
1. **Removed `remote_url` field from `AzureDevOpsProvider`** - no longer stored on the struct
2. **Updated `GitHostProvider` trait** - added `remote_url: &str` parameter to:
- `create_pr`
- `list_prs_for_branch`
- `get_pr_comments`
3. **Updated `AzureDevOpsProvider`** - methods now accept `remote_url` and pass it to `get_repo_info`
4. **Updated `GitHubProvider`** - methods accept `_remote_url` (unused, since gh CLI auto-detects)
5. **Updated call sites in `pr.rs`** - all three methods now pass `remote_url`:
- `create_pr` passes `&remote_url`
- `list_prs_for_branch` passes `&remote_url`
- `get_pr_comments` passes `&remote_url`
6. **Fixed `attach_existing_pr`** - now uses `workspace_repo.target_branch` instead of `workspace.branch` when getting the remote URL (consistent with other call sites)
* Cleanup script changes for workspace 28eb9564-f95a-42e0-8cf2-5228c2ffc0bf
* Update frontend remote copy (vibe-kanban a7bf13b6)
We added azure support but in the frontend many things have github specific wording. Please fix!
* Done. I've addressed the PR comment by:
1. **Renamed `CreatePrError` to `PrError`** - A more generic name that works for both `create_pr` and `attach_existing_pr`
2. **Updated `attach_existing_pr`** to mirror the error handling from `create_pr`:
- Changed return type from `ApiResponse<AttachPrResponse>` to `ApiResponse<AttachPrResponse, PrError>`
- Added error handling for `GitHostService::from_url()` - handles `UnsupportedProvider` and `CliNotInstalled`
- Added error handling for `list_prs_for_branch()` - handles `CliNotInstalled` and `AuthFailed`
3. **Updated `generate_types.rs`** to use the renamed `PrError`
4. **Updated `frontend/src/lib/api.ts`** to use `PrError` instead of `CreatePrError`
5. **Regenerated TypeScript types** and verified all checks pass
|
||
|
GitHub Action
|
3ad03a0a99 | chore: bump version to 0.0.147 | ||
|
Alex Netsch
|
e73c1b4bff |
All done. Here's a summary of the fix: (#1875)
## Summary Fixed PR comment labels showing raw translation keys instead of translated text. **Problem:** The `CommentWidgetLine.tsx` and `ReviewCommentRenderer.tsx` components were using translation keys that didn't exist in the translation files: - `comments.addReviewComment` - `comments.addPlaceholder` - `comments.editPlaceholder` - `actions.cancel` - `actions.saveChanges` - `actions.copied` **Solution:** Added the missing translation keys to `common.json` in all 6 locales: - English (en) - Spanish (es) - Japanese (ja) - Korean (ko) - Simplified Chinese (zh-Hans) - Traditional Chinese (zh-Hant) **Verification:** - ✅ `pnpm run check` passes (TypeScript and Rust checks) - ✅ i18n check script confirms translation keys are consistent across all locales - ✅ No duplicate JSON keys |
||
|
Louis Knight-Webb
|
06862ab010 |
Fix GitHub PR button display and refactor RepoCard styling (Vibe Kanban) (#1872)
* Both issues have been fixed:
**1. Fixed translation parameter mismatch** (`RepoCard.tsx:170, 176`)
- Changed `{ prNumber }` to `{ number: prNumber }` to match the translation key `Open PR #{{number}}`
**2. Refactored PR badge styling** (`RepoCard.tsx:156-180`)
- Replaced hardcoded Tailwind colors with design system tokens:
- Merged badge: `bg-panel text-success` (uses semantic success color)
- Open PR button/badge: `bg-panel text-normal hover:bg-tertiary transition-colors`
- Updated spacing to use consistent tokens: `gap-half`, `px-base`, `py-half`
- Changed border radius from `rounded-full` to `rounded-sm` to match other UI elements in the panel
* Both fixes are complete:
1. **Added spacing** - Added `mt-half` to the PR status row container (line 158) to create visual separation from the Actions row below
2. **Made merged PRs clickable** - When `prStatus === 'merged'` and `prUrl` is available, it now renders a clickable `<button>` with:
- The external link icon (`ArrowSquareOutIcon`)
- Hover state (`hover:bg-tertiary`)
- Same transition effect as the open PR button
* improve styles
|
||
|
Louis Knight-Webb
|
af70dd9239 |
The implementation is complete. Here's a summary of the changes made: (#1871)
## Summary
I've implemented the GitHub PR status display on `WorkspaceSummary.tsx`. The changes include:
### Backend Changes
1. **`crates/db/src/models/merge.rs`** - Added a new method `get_latest_pr_status_for_workspaces()` that efficiently queries the latest PR status for all workspaces grouped by archived status.
2. **`crates/server/src/routes/task_attempts/workspace_summary.rs`** - Added `pr_status: Option<MergeStatus>` field to the `WorkspaceSummary` struct and included the PR status query in the summary endpoint.
### Frontend Changes
3. **`frontend/src/components/ui-new/hooks/useWorkspaces.ts`** - Added `prStatus` to the `SidebarWorkspace` interface and mapped it in `toSidebarWorkspace()`.
4. **`frontend/src/components/ui-new/primitives/WorkspaceSummary.tsx`** - Added:
- Import for `GitPullRequestIcon`
- `prStatus` prop to the component
- Display logic showing:
- **PR open**: `GitPullRequestIcon` with `text-brand` (orange) color
- **PR merged**: `GitPullRequestIcon` with `text-success` (green) color
- **No PR/closed/unknown**: No icon displayed
5. **`frontend/src/components/ui-new/views/WorkspacesSidebar.tsx`** - Passed the `prStatus` prop to both active and archived workspace summaries.
### Generated Types
6. **`shared/types.ts`** - Auto-generated to include the new `pr_status` field in `WorkspaceSummary`.
|
||
|
Anastasiia Solop
|
b743f849f7 |
Add rename workspace functionality (Vibe Kanban) (#1868)
* I've added the rename workspace functionality. Here's a summary of the changes:
## Summary
The backend already had rename workspace support via the `PUT /api/task-attempts/{attemptId}` endpoint with the `name` field. I added the frontend UI to expose this functionality.
### Files Created
1. **`frontend/src/components/ui-new/dialogs/RenameWorkspaceDialog.tsx`**
- New dialog component for renaming workspaces
- Shows the current name (or branch name as fallback)
- Allows user to input a new name
- Handles mutation with proper error handling and cache invalidation
### Files Modified
1. **`frontend/src/components/ui-new/actions/index.ts`**
- Added `PencilSimpleIcon` import
- Added `RenameWorkspaceDialog` import
- Added new `RenameWorkspace` action that shows the rename dialog
2. **`frontend/src/components/ui-new/actions/pages.ts`**
- Added `Actions.RenameWorkspace` to the `workspaceActions` page (at the top of the list)
3. **`frontend/src/i18n/locales/en/common.json`**
- Added translations for the rename workspace dialog under `workspaces.rename`
### How to Use
Users can now rename a workspace by:
1. Clicking the three-dot menu (⋯) on any workspace in the sidebar
2. Selecting "Rename" from the command bar
3. Entering a new name in the dialog
4. Clicking "Rename" to save
* Cleanup script changes for workspace 4eb64331-cc43-43af-849e-3731664e53b9
* Added the missing translations for the rename workspace dialog to all locale files:
- **es** (Spanish)
- **ja** (Japanese)
- **ko** (Korean)
- **zh-Hans** (Simplified Chinese)
- **zh-Hant** (Traditional Chinese)
|
||
|
Louis Knight-Webb
|
078e7fc372 |
Done! I've changed block: 'nearest' to block: 'start' in ChangesPanelContainer.tsx:168. (#1869)
**What this fixes:** - `block: 'nearest'` only scrolled the minimum distance to make the element visible, which often left users "halfway" through a file - `block: 'start'` aligns the top of the selected diff with the top of the scroll container, ensuring the file header is always visible at the top |
||
|
Louis Knight-Webb
|
6a07e5cc16 |
Fix new sessions to inherit last used variant from previous session (Vibe Kanban) (#1870)
* The implementation is complete. Here's a summary of the changes:
## Summary
Fixed the issue where new sessions were inheriting the last used executor but not the last used variant.
### Changes Made to `vibe-kanban/frontend/src/components/ui-new/containers/SessionChatBoxContainer.tsx`:
1. **Added import** for `useExecutionProcesses` hook
2. **Added `lastSessionId`** - gets the most recent session's ID only when in new session mode:
```tsx
const lastSessionId = isNewSessionMode ? sessions?.[0]?.id : undefined;
```
3. **Added `useExecutionProcesses` call** - fetches processes from the last session to get the full executor profile:
```tsx
const { executionProcesses: lastSessionProcesses } =
useExecutionProcesses(lastSessionId);
```
4. **Added `lastSessionProfile` memo** - extracts the full profile (executor + variant) from the last session's processes:
```tsx
const lastSessionProfile = useMemo(() => {
if (!lastSessionProcesses?.length) return null;
return getLatestProfileFromProcesses(lastSessionProcesses);
}, [lastSessionProcesses]);
```
5. **Updated `latestProfileId` computation** - now uses `lastSessionProfile` (which includes the variant) before falling back to just the executor with `variant: null`
The type check passes successfully. When a user creates a new session, it will now correctly inherit both the executor AND variant from the most recently used session in that workspace.
* Done! The refactoring is complete. Here's a summary of the changes:
## Summary
Refactored the `latestProfileId` logic in `SessionChatBoxContainer.tsx` to be cleaner:
**Before:** 4 separate declarations
- `lastSessionExecutor` memo
- `lastSessionId`
- `lastSessionProcesses` hook
- `lastSessionProfile` memo
- `latestProfileId` memo (referencing all the above)
**After:** 3 declarations, consolidated
- `lastSessionId`
- `lastSessionProcesses` hook
- `latestProfileId` memo (all logic inlined)
**Changes:**
- Removed 2 intermediate `useMemo` hooks
- Inlined `lastSessionExecutor` and `lastSessionProfile` directly into `latestProfileId`
- Same 3-tier fallback behavior preserved: current processes → last session processes → session metadata
- Type check passes
|
||
|
Anastasiia Solop
|
7d75a73fc8 |
Make sidebar sections collapsible in workspaces UI (Vibe Kanban) (#1867)
* Done! Here's a summary of the changes: ## Summary I made the sections in the right sidebar collapsible by: 1. **Created `CollapsibleSectionHeader` component** (`frontend/src/components/ui-new/primitives/CollapsibleSectionHeader.tsx`): - Combines the `SectionHeader` styling (left border accent, border-bottom) with collapsible functionality - Supports optional icon with action handler (stops propagation to avoid toggling) - Uses persisted expanded state via `usePersistedExpanded` hook - Shows caret icon that rotates when collapsed 2. **Added new persist keys** (`frontend/src/stores/useUiPreferencesStore.ts`): - `gitPanelRepositories` - for Repositories section - `gitPanelProject` - for Project section - `gitPanelAddRepositories` - for Add Repositories section - `processesSection` - for Processes section 3. **Updated `GitPanel.tsx`**: Replaced `SectionHeader` with `CollapsibleSectionHeader` for the Repositories section, wrapping all repo cards and the Advanced section inside 4. **Updated `GitPanelCreate.tsx`**: Made all three sections collapsible: - Project section - Repositories section - Add Repositories section 5. **Updated `ProcessListContainer.tsx`**: Made the Processes section collapsible while keeping the search bar always visible All sections now: - Collapse when clicking on the section header - Expand when clicking again - Persist their expanded/collapsed state across sessions * Done! I've made the Changes and Dev Server sections collapsible as well: **Updated files:** - `frontend/src/stores/useUiPreferencesStore.ts` - Added `changesSection` and `devServerSection` persist keys - `frontend/src/components/ui-new/views/FileTree.tsx` - Made the "Changes" section collapsible - `frontend/src/components/ui-new/views/PreviewControls.tsx` - Made the "Dev Server" section collapsible All sections now use the `CollapsibleSectionHeader` component and persist their collapsed/expanded state. * Cleanup script changes for workspace 05769879-a23f-49ac-81f4-b17e18f14025 |
||
|
Anastasiia Solop
|
3d46edc579 | fix hash render in diff file names in the workspaces UI (#1864) | ||
|
Louis Knight-Webb
|
527febdc52 | Workspaces FE (#1733) | ||
|
GitHub Action
|
fe2215ba85 | chore: bump version to 0.0.146 | ||
|
GitHub Action
|
ae852b297f | chore: bump version to 0.0.145 | ||
|
Alex Netsch
|
67711e77f4 |
Show error when remote branch status is unavailable (Vibe Kanban) (#1825)
* I've completed the implementation. Here's a summary of the changes:
## Summary
### Changes Made
1. **`frontend/src/hooks/useBranchStatus.ts`**
- Modified to return `{ data, error, isError, isLoading, refetch }` instead of just the query result
- This exposes the error state to consuming components
2. **`frontend/src/components/tasks/Toolbar/GitOperations.tsx`**
- Added `branchStatusError` prop to interface
- Removed `hasConflictsCalculated` from the "Change target branch" button's disabled condition - now it stays enabled even during errors, allowing users to recover
- Changed the actions section from hiding completely when `selectedRepoStatus` is null to showing an error message when there's a `branchStatusError`
3. **`frontend/src/components/dialogs/tasks/GitActionsDialog.tsx`**
- Extracted `error` from `useBranchStatus` and passes it to `GitOperations` as `branchStatusError`
4. **`frontend/src/pages/ProjectTasks.tsx`**
- Updated `DiffsPanelContainer` to accept and pass `branchStatusError`
- Extracted `branchStatusError` from `useBranchStatus` hook
- Passes the error through to `DiffsPanelContainer`
5. **i18n translation files** (all 6 locales: en, es, ja, ko, zh-Hans, zh-Hant)
- Added `git.errors.branchStatusUnavailable` translation string
### Behavior Changes
- **Before**: When branch status API failed, git operations (Merge, PR/Push, Rebase buttons) were completely hidden
- **After**:
- An error message is shown: "Unable to fetch branch status. You can still change the target branch."
- The "Change target branch" button remains enabled, allowing users to recover from deadlock situations
- Users can see something went wrong instead of the UI silently failing
* Cleanup script changes for workspace cdcbb9c6-fc9f-45bf-9c30-0e432d06cccf
* Simplify useBranchStatus hook return
Return useQuery result directly instead of manually constructing an object.
The useQuery hook already returns all needed properties (data, error, isError, isLoading, refetch).
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Restore hasConflictsCalculated check for change target branch button
The conflict check wasn't needed for the branch status error fix.
Keeping it prevents changing target branch during active git conflicts.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
|
||
|
Alex Netsch
|
b63c90186e |
feat: Show timeout indicator for repository selector (Vibe Kanban) (#1510)
* Done. I've added a 5-second delay to the `list_git_repos` endpoint at `crates/server/src/routes/filesystem.rs:46`. This will let you see: - "Searching for repositories..." for the first 2 seconds - "Still searching... (2s)", "Still searching... (3s)", etc. after that - The "This is taking longer than usual" message after 3 seconds Remember to remove this delay (marked with `TODO`) once you're done testing! * Done, the delay has been removed. * All checks pass. The i18n script now passes with no new violations introduced. * feat: Add timeout indicator to repository selector - Shows progressive feedback when repo search takes longer than expected - Displays "no repos found" message when search completes empty - Added translations for all 6 locales (EN, ES, JA, KO, ZH-Hans, ZH-Hant) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com> |
||
|
Gabriel Gordon-Hall
|
76feaefdfe |
feat: add Exa and Chrome DevTools as one-click MCP server options (Vibe Kanban) (#1801)
* I've added the Exa Code MCP server as a one-click install option. Here's what was configured: **Changes made to `crates/executors/default_mcp.json`:** 1. **Server configuration** (lines 23-33): - Command: `npx -y exa-mcp-server` - Tools enabled: `web_search_exa` and `get_code_context_exa` (as requested) - Environment variable: `EXA_API_KEY` (required for authentication) 2. **Metadata** (lines 53-58): - Name: "Exa" - Description: "Web search and code context retrieval powered by Exa AI" - URL: https://docs.exa.ai/reference/exa-mcp - Icon: `mcp/exa_logo.svg` (already exists) The Exa MCP server icon was already present in the frontend public assets at `frontend/public/mcp/exa_logo.svg`. * Done. I've added Chrome DevTools MCP as a one-click install option: **Server configuration** (lines 34-39): - Command: `npx chrome-devtools-mcp@latest` - No environment variables required **Metadata** (lines 65-70): - Name: "Chrome DevTools" - Description: "Browser automation, debugging and performance analysis with Chrome DevTools" - URL: https://github.com/ChromeDevTools/chrome-devtools-mcp - Icon: `mcp/chrome_devtools_logo.svg` * The issue was that `justify-center` and `gap-3` were interfering with Embla Carousel's scroll calculations. Embla uses a specific margin/padding system (`-ml-4` on the content container and `pl-4` on items) to handle spacing and scroll positions. Adding `justify-center` shifts items in a way that breaks the scroll math, making it impossible to scroll to the leftmost items. The fix removes these conflicting classes from `CarouselContent`. |
||
|
GitHub Action
|
edef39c3fb | chore: bump version to 0.0.144 | ||
|
Gabriel Gordon-Hall
|
cbfb637b73 | fix i18n errors (#1796) | ||
Alex Huang
|
875b1068a0 |
feat(i18n): add zh-Hant UI translations and locale mapping (#1777)
* feat(i18n): add zh-Hant UI translations and locale mapping * chore(i18n): format config * fix(i18n): add zh-Hant config enum * chore(types): regenerate |
||
|
Gabriel Gordon-Hall
|
7224376170 |
feat: override auto-detected preview url (#1573)
* override auto-detected preview url * i18n * remove redundant useMemo |
||
|
GitHub Action
|
f99d2f06f2 | chore: bump version to 0.0.143 | ||
gsxdsm
|
332bfbd965 |
feat: dynamically determine devserver hostname from browser location instead of hardcoding localhost (#1640)
Co-authored-by: Vibe Kanban <noreply@vibekanban.com> |
||
|
Anastasiia Solop
|
36fbf7e12c |
Make file name in diffs sticky (vibe-kanban) (#1631)
* Perfect! I've successfully implemented sticky file name headers for the diffs view. Here's a summary of the changes: ## Summary I've made the file name headers in the diffs view sticky by modifying the `DiffCard` component: ### Changes Made **File**: `frontend/src/components/DiffCard.tsx:269` Added the following CSS classes to the header div: - `sticky` - Makes the header stick to the top when scrolling - `top-0` - Positions it at the very top of the scroll container - `z-[5]` - Sets appropriate z-index to ensure it stays above diff content but below the main panel header (which has z-10) - `bg-background` - Adds background color so content scrolling underneath is covered - `border-b` - Adds a bottom border for better visual separation ### How It Works When users scroll down through the diffs in the DiffsPanel, each file header will now: 1. Stick to the top of the viewport as you scroll past it 2. Stay visible so users always know which file diff they're viewing 3. Get replaced by the next file's header when that file reaches the top 4. Maintain proper layering with the main panel header staying on top The z-index hierarchy is: - Main panel header (DiffsPanel): `z-10` (highest) - Individual diff card headers: `z-[5]` (middle) - Diff content: default (lowest) This ensures a smooth scrolling experience where users can always see which file they're looking at, even when viewing large diffs. * delete package-lock.json |