* I've successfully implemented workspace-specific panel state persistence. Here's a summary of the changes:
## Summary
### Changes Made
1. **`frontend/src/stores/useUiPreferencesStore.ts`**
- Added `WorkspacePanelState` type to track `rightMainPanelMode` and `isLeftMainPanelVisible` per workspace
- Added `workspacePanelStates: Record<string, WorkspacePanelState>` to store state keyed by workspace ID
- Updated `toggleLeftMainPanel`, `toggleRightMainPanelMode`, `setRightMainPanelMode`, and `setLeftMainPanelVisible` to accept an optional `workspaceId` parameter
- Added `getWorkspacePanelState` and `setWorkspacePanelState` actions
- Added `useWorkspacePanelState(workspaceId)` hook for easy consumption
- Updated `partialize` to persist `workspacePanelStates` to localStorage
2. **`frontend/src/components/ui-new/containers/WorkspacesLayout.tsx`**
- Changed from using `useUiPreferencesStore` directly to using `useWorkspacePanelState(workspaceId)` hook
- Panel state is now workspace-specific
3. **`frontend/src/components/ui-new/actions/useActionVisibility.ts`**
- Updated to use `useWorkspacePanelState` for visibility context
4. **`frontend/src/components/ui-new/actions/index.ts`**
- Updated `ToggleLeftMainPanel`, `ToggleChangesMode`, `ToggleLogsMode`, `TogglePreviewMode`, and `ToggleDevServer` actions to pass `currentWorkspaceId` when toggling panel modes
### Scope
**Workspace-specific:**
- `rightMainPanelMode` - Which panel (Preview/Changes/Logs) is open
- `isLeftMainPanelVisible` - Whether the chat panel is visible
**Stays global:**
- `isLeftSidebarVisible` - Workspace list sidebar (navigation element)
- `isRightSidebarVisible` - Git/Settings sidebar (global actions)
- Panel sizes (already work correctly)
### Testing
Verified the feature works:
1. Opened Preview panel in Workspace A
2. Navigated to Workspace B → Preview panel is closed (default state)
3. Navigated back to Workspace A → Preview panel is still open ✓
* Cleanup script changes for workspace c8b73e59-ac41-4c0f-be78-7b6499d514f9
* The refactoring is complete. Let me provide a summary of the changes:
## Summary
Refactored `useUiPreferencesStore.ts` to remove duplicate code paths for workspace-specific panel state:
### Changes Made
1. **`frontend/src/stores/useUiPreferencesStore.ts`**
- Removed legacy global state (`isLeftMainPanelVisible`, `rightMainPanelMode`) from State type and initialization
- Simplified 4 panel state actions by removing `else` branches for legacy behavior:
- `toggleLeftMainPanel` - now early-returns if no workspaceId
- `toggleRightMainPanelMode` - simplified to single set() call
- `setRightMainPanelMode` - simplified to single set() call
- `setLeftMainPanelVisible` - simplified
- Removed `resetForCreateMode` action (was only setting legacy state)
- Removed unused `useIsRightMainPanelVisible` hook
2. **`frontend/src/contexts/WorkspaceContext.tsx`**
- Removed the `useEffect` that called `resetForCreateMode()` on create mode
- Removed unused `useUiPreferencesStore` import
3. **`frontend/src/contexts/LogsPanelContext.tsx`**
- Updated to use `useWorkspacePanelState` with workspace ID from context
4. **`frontend/src/components/ui-new/containers/SessionChatBoxContainer.tsx`**
- Updated to use `useWorkspacePanelState` with workspace ID
### Impact
- **~50 lines removed** from the codebase
- **Cleaner code** - no more `if (workspaceId) ... else ...` branching in every action
- **Same behavior** - all callers were already passing workspaceId
* Cleanup script changes for workspace c8b73e59-ac41-4c0f-be78-7b6499d514f9
* Done. Here's a summary of the fix:
## Summary
**Issue #1937** is legitimate - Windows users cannot connect MCP tools when `HOST=0.0.0.0` because Windows doesn't allow client connections to that address.
**Fix applied** in `crates/server/src/bin/mcp_task_server.rs`:
Added `MCP_HOST` and `MCP_PORT` environment variables that override `HOST` and `BACKEND_PORT`/`PORT` for MCP client connections.
**Priority order:**
- Host: `VIBE_BACKEND_URL` > `MCP_HOST` > `HOST` > `127.0.0.1`
- Port: `VIBE_BACKEND_URL` > `MCP_PORT` > `BACKEND_PORT` > `PORT` > port file
**Usage for Windows users with LAN access:**
```bash
HOST=0.0.0.0 MCP_HOST=127.0.0.1 pnpm run dev
```
The change is minimal (4 lines modified) and backwards compatible - existing setups without `MCP_HOST`/`MCP_PORT` work exactly as before.
* Done. I've added `MCP_HOST` and `MCP_PORT` to the Environment Variables table in the README with descriptions explaining their purpose and the Windows use case.
* Done. Added Zed remote SSH support using the `zed://ssh/` protocol URL format.
**Generated URL format**: `zed://ssh/{user}@{host}{path}`
Examples:
- `zed://ssh/192.168.1.10/home/user/.vimrc`
- `zed://ssh/brit@scepcy/home/brit/projects/scepsy/`
* Restored the comment.
* Done. Added Zed to the frontend condition so the remote SSH host/user fields now appear when Zed is selected as the editor.
* add antigravity as an option in settings
* use early return for zed case to remove extra match statement
Store the actual shell path in each UnixShell variant (as PathBuf)
instead of hardcoding /bin/* paths. Now when $SHELL is e.g.
/nix/store/.../zsh, the actual path is preserved and used.
Also filter fallback shells in get_fresh_path() to skip non-existent
paths on systems where /bin/* shells don't exist.
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
* All changes are complete. Here's a summary of what was changed:
## Summary of Changes
### `WorkspaceSummary.tsx`
1. **Title truncation**: Replaced `truncate` class with CSS mask gradient that fades to transparent (no ellipsis dots)
2. **Simplified hover actions**: Removed pin and archive buttons, keeping only the "more options" (ListIcon) button
3. **Removed sliding animation**: The action button now uses simple opacity transition (`opacity-0 group-hover:opacity-100`) instead of the sliding animation
4. **Removed unused code**: `handleArchive`, `handlePin` functions and `ArchiveIcon` import removed
5. **Removed unused props**: `onArchive` and `onPin` props removed from interface
### `WorkspacesSidebar.tsx`
- Removed `onArchiveWorkspace` and `onPinWorkspace` props from interface and destructuring
### `WorkspacesSidebarContainer.tsx`
- Removed `handleArchiveWorkspace` and `handlePinWorkspace` callbacks
- Removed unused imports (`useCallback`, `useActions`, `Actions`)
All type checks pass. The pin and archive functionality is still accessible through the command bar (more options button).
* Cleanup script changes for workspace 262a1c1d-87ae-40f5-a36d-f43758d18fed
* Done. Changed `ListIcon` to `DotsThreeIcon` with `weight="bold"` for the more options button.
* Done. Changed the icon size from `size-icon-xs` to `size-5` (20px) while keeping the bold weight.
* Done. Added the `ArchiveWorkspace` action to the left side of the navbar in `NavbarActionGroups.left`.
* The fix is in place. Let me summarize the changes made:
## Summary
Fixed the mobile preview browser by implementing automatic scaling when the phone frame doesn't fit in the container.
### Changes made:
**`frontend/src/components/ui-new/views/PreviewBrowser.tsx`:**
1. Exported constants `MOBILE_WIDTH`, `MOBILE_HEIGHT`, and `PHONE_FRAME_PADDING` for use in the container
2. Added `mobileScale` prop to the component interface
3. Changed the content area's overflow from always `overflow-auto` to `overflow-hidden` when in mobile mode (to prevent scrollbars when the scaled content is smaller)
4. Applied CSS `transform: scale()` to the phone frame when `mobileScale < 1`, using `origin-center` to scale from the center
**`frontend/src/components/ui-new/containers/PreviewBrowserContainer.tsx`:**
1. Imported `useLayoutEffect` and the exported constants from `PreviewBrowser`
2. Added `mobileScale` state that calculates the appropriate scale factor
3. Added a `useLayoutEffect` that:
- Only runs when in mobile mode
- Uses `ResizeObserver` to track container size changes
- Calculates scale based on available space vs. phone frame dimensions
- Never scales up (only down when needed)
4. Passes `mobileScale` prop to the `PreviewBrowser` component
The mobile preview will now automatically scale down to fit within the available container space, preventing the vertical cutoff issue.
* Cleanup script changes for workspace abe7b640-b3ea-4716-850e-6fd096ac1a3e
- `logs.searchLogs` - Placeholder text for the search input in the logs panel
- `logs.selectProcessToView` - Empty state message when no process is selected
- `processes.noProcesses` - Empty state message when no processes exist
- `search.matchCount` - Shows current match position (e.g., "1 of 5")
- `search.noMatches` - Shown when search has no results
All type checks pass (`pnpm run check` completed successfully).
* So `git-url-parse` can give us `owner()` and `repo()` through the provider. That's cleaner than manual string parsing.
Let me present the options to you:
**Option 1: `git-url-parse` crate**
- Pros: Specifically designed for git URLs, gives owner/repo directly via provider
- Cons: New dependency (though small)
**Option 2: `gix-url` crate**
- Pros: Part of gitoxide (well-maintained), robust parsing
- Cons: New dependency, still need to extract owner/repo from path
**Option 3: Keep current approach but improve it**
- Use the `url` crate we already have for HTTPS URLs
- Handle SSH URLs as a special case (they use `:` instead of `/`)
- Less string magic, more structured
**Option 4: Use `gh` CLI to parse**
- `gh repo view <url> --json owner,name`
- Pros: No new deps, `gh` handles all edge cases
- Cons: Requires network/auth, slower
Which approach would you prefer? I'd recommend **Option 1 (`git-url-parse`)** since it's purpose-built for this exact use case.
* Cleanup script changes for workspace a07fdbcf-0608-4a84-a012-53d4fee6d115
* Let me provide a summary of all the changes made:
## Summary
Fixed the hardcoded remote handling to support fork workflows. Here's what changed:
### 1. `crates/services/src/services/git.rs`
- **`default_remote_name()`**: Now prefers "origin" (git's convention) instead of arbitrarily picking the first remote
- **`get_remote_url()`**: New helper to get the URL of a specific remote by name
- **`get_remote_url_from_branch_or_default()`**: New helper that gets the remote URL for a branch, falling back to default remote
### 2. `crates/services/src/services/git/cli.rs`
- **`default_remote_name()`**: Same fix as above - prefers "origin"
- **`get_remote_url()`**: New method to get remote URL by name
### 3. `crates/services/src/services/git_host/github/cli.rs`
- **`get_repo_info_from_url()`**: New method that uses `gh repo view <url> --json owner,name` to parse owner/repo from a remote URL (no string magic!)
### 4. `crates/services/src/services/git_host/github/mod.rs`
- **`get_repo_info_from_url()`**: Async wrapper for the new CLI method
- **`create_pr()`**: Now uses `get_repo_info_from_url()` with the `remote_url` parameter to determine which repo to create the PR against
### 5. `crates/server/src/routes/task_attempts/pr.rs`
- **Key fix**: Now extracts the target remote URL from the `target_branch` (e.g., `upstream/main`) instead of from `workspace.branch` (your task branch)
- This enables fork workflows: push to your fork (`origin`), but create PR against upstream (the target branch's remote)
### How fork workflows now work:
1. User selects target branch like `upstream/main`
2. Code pushes task branch to `origin` (your fork)
3. Code extracts remote URL from `upstream` remote (the upstream repo)
4. PR is created against the upstream repo using `gh pr create --repo upstream-owner/repo`
* Cleanup script changes for workspace a07fdbcf-0608-4a84-a012-53d4fee6d115
* Build passes. The response structs are now at module level alongside the other `Gh*` response types, which is cleaner and more consistent with the existing code style.
* Build passes. Now `gh repo view <url>` is run from the repo directory, which helps with GitHub Enterprise authentication context.
* Done. Removed all the redundant comments.
* Build passes.
* Build passes. Now the default remote logic follows git's behavior:
1. Check `remote.pushDefault` config first (user's explicit preference)
2. Fall back to "origin" if it exists (git's convention from `git clone`)
3. Fall back to first remote if no "origin"
4. Default to "origin" if no remotes exist
* I've fixed the bug in `check_remote_branch_exists` at `git.rs:1454-1484`. The issue was that when checking if a remote branch exists, the function was:
1. Using `default_remote_name()` (which returns "origin") to strip the prefix from branch names like `upstream/main`
2. Looking up the URL from the default remote instead of the actual remote the branch belongs to
Now the function:
1. For remote branches (like `upstream/main`), extracts the actual remote name from the branch using `get_remote_name_from_branch_name()`
2. Strips the correct prefix (`upstream/` not `origin/`)
3. Uses the correct remote's URL for the `git ls-remote` check
This allows fork workflows where you select `upstream/main` as the target branch - it will now correctly check if `main` exists on the `upstream` remote's URL.
* Cleanup script changes for workspace a07fdbcf-0608-4a84-a012-53d4fee6d115
* Fix cross-fork PR creation by formatting head branch with fork owner
When creating a PR from a fork to upstream, GitHub requires the head branch
to be formatted as "owner:branch" (e.g., "LSRCT:vk/feature-branch").
Added head_repo_url to CreatePrRequest and updated GitHubProvider to
compare owners and prefix the head branch accordingly.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Refactor PR remote handling: simplify by moving logic to caller
- Delete check_remote_branch_exists() from GitService (caller now composes
the check directly using GitCli)
- Add default_remote_name_for_path() convenience method
- Rewrite pr.rs remote handling to be explicit and linear:
1. Get push_remote and target_remote names
2. Get their URLs
3. Strip prefix to get base_branch
4. Check, push, create PR
The string split happens once, visibly at the call site.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Remove origin preference in default_remote_name
Use first available remote instead of preferring "origin". The fallback
to "origin" only applies when there are no remotes configured at all.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Fix PR creation when target branch not fetched locally
When the target branch doesn't exist as a local remote-tracking ref
(e.g., user types a branch name that exists on remote but isn't fetched),
fall back to using the push remote instead of failing with BranchNotFound.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Reject cross-fork PRs for Azure DevOps
Azure DevOps fork PRs require different handling (--fork-id parameter).
Return a clear error instead of silently failing.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Remove get_repo_info, always use explicit URL
The parameterless get_repo_info relied on gh CLI guessing the repo from
local git config. This is wrong for fork workflows where we need to
operate on a specific remote's repo. Now list_prs_for_branch and
get_pr_comments use the remote_url they're passed instead of ignoring it.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Format git service default remote helper
* Fix clippy collapsible-if warnings
* Route remote branch checks through git service
* Remove Azure PR comment
* Consolidate git remote helpers
* Consolidate git remote resolution helpers
* Remove unnecessary comments
* Fix git service error match for remote check
* Remove unused GitCli::default_remote_name
GitService::default_remote_name (using git2) is used instead.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Refactor unused vars
---------
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
* Done. I've updated both the Tags section and Files section in the typeahead plugin. The changes:
1. Added `border-l-2` to all items to create a left border
2. For selected items: `border-l-brand` (orange accent color) + `bg-muted` + `text-high`
3. For unselected items: `border-l-transparent` + `hover:bg-muted` + `text-muted-foreground`
4. Removed the redundant `text-foreground` class that was conflicting with `text-high`
The selected item now has a visible orange/brand-colored left border indicator that provides clear visual feedback in both light and dark modes.
* style
* perf: fix database query performance bottlenecks
- Add composite index on workspace_repos(workspace_id, repo_id) to optimize lookup queries that were taking up to 5 seconds
- Add composite index on merges(merge_type, pr_status) to optimize status filtering queries that were taking 2+ seconds
- Fix N+1 query pattern in workspace_repos.create_many by wrapping inserts in a transaction
- Fix N+1 query pattern in get_task_attempt_branch_status by batch fetching all merges upfront instead of querying per repo
These changes address significant performance bottlenecks identified in production logs where simple lookup queries were experiencing multi-second latencies.
* cargo fmt
* run sqlx prepare
---------
Co-authored-by: Solomon <abcpro11051@disroot.org>
* merge
* switch out panel lib
* fmt
* remove allotment dep
* bump lock
* The position of the react resizable panel is lost when the page is reloaded in (vibe-kanban 6ac32e23)
`WorkspacesLayout.tsx` , but should be stored in `useUiPreferencesStore.ts`
`vibe-kanban/frontend/src/components/ui-new/containers/WorkspacesLayout.tsx`
`vibe-kanban/frontend/src/stores/useUiPreferencesStore.ts`
* remove redundant type
* add dep
---------
Co-authored-by: Louis Knight-Webb <louis@bloop.ai>
* All type checks pass. Let me provide a summary of the changes made:
## Summary
I've added a "Repository settings" option to the Git panel dropdown in the Workspaces UI. Here are the changes made:
### 1. `frontend/src/components/ui-new/primitives/RepoCard.tsx`
- Added `DotsThreeIcon` and `GearIcon` imports from phosphor-icons
- Added `onOpenSettings?: () => void` prop to the `RepoCardProps` interface
- Changed the dropdown trigger icon from `ArrowSquareOutIcon` to `DotsThreeIcon` (three dots)
- Added a new dropdown menu item "Repository settings" with a gear icon that calls `onOpenSettings`
### 2. `frontend/src/components/ui-new/views/GitPanel.tsx`
- Added `onOpenSettings?: (repoId: string) => void` prop to the `GitPanelProps` interface
- Added `onOpenSettings` to the destructured props
- Passed `onOpenSettings` callback to each `RepoCard` component
### 3. `frontend/src/components/ui-new/containers/WorkspacesLayout.tsx`
- Added `useNavigate` import from react-router-dom
- Added `const navigate = useNavigate()` in `GitPanelContainer`
- Added `handleOpenSettings` callback that navigates to `/settings/repos?repoId=${repoId}`
- Passed `onOpenSettings={handleOpenSettings}` to the `GitPanel` component
### 4. `frontend/src/i18n/locales/en/common.json`
- Added `"repoSettings": "Repository settings"` translation under the `actions` section
* All checks pass:
- ✅ i18n check - Translation keys are consistent across all locales
- ✅ Linter - No lint errors
- ✅ TypeScript type check - No type errors
Fix parsing error where ESLint was trying to read tsconfig.json from root directory instead of frontend directory. Use path.join(__dirname, 'tsconfig.json') to ensure correct resolution.
- Added required deps: `react-compiler-runtime` + `babel-plugin-react-compiler` in `frontend/package.json:70` and `frontend/package.json:99`, plus `remote-frontend/package.json:20` and `remote-frontend/package.json:30` (lockfile updated in `pnpm-lock.yaml`).
## Problem
When multiple dev servers are running and the user switches between log tabs, logs from one dev server could appear in another dev server's tab. This happened because:
1. When `processId` changes (user switches tabs), the effect cleanup closes the old WebSocket
2. But WebSocket `close()` is asynchronous - the old WebSocket's event handlers can still fire
3. The old WebSocket's `onmessage` handler was still calling `setLogs()`, which would update the logs state even after switching to a different process
## Solution
Added a `currentProcessIdRef` ref to track the current active `processId`, and a `capturedProcessId` variable that captures the processId when each WebSocket is opened. All event handlers now check if their captured processId matches the current one before updating state:
1. **`onopen`**: Closes the WebSocket immediately if processId has changed since opening
2. **`addLogEntry`**: Discards log entries if they're from a stale WebSocket
3. **`onerror`**: Ignores errors from stale WebSocket connections
4. **`onclose`**: Prevents retry logic from running for stale connections
This ensures that each WebSocket connection only affects state when it's still the active connection for the currently selected process.
* The code compiles. The fix is complete. Here's a summary of what was changed:
**File: `crates/server/src/routes/containers.rs`**
1. Added `use uuid::Uuid;` import
2. Added `ContainerInfo` struct with `project_id`, `task_id`, and `attempt_id` fields
3. Added `get_container_info` handler that resolves the container reference and maps `workspace_id` → `attempt_id` for VSCode extension compatibility
4. Registered the `/containers/info` route
The VSCode extension can now call `GET /api/containers/info?ref={folder_path}` to auto-detect workspaces when opening a folder.
* Moved the doc comment to the route registration where it's more visible.
* Everything compiles. Let me summarize the logic:
**How the fix works:**
| Scenario | `container_ref` in DB | Path VSCode opens | Lookup method |
|----------|----------------------|-------------------|---------------|
| Multi-repo | `/workspaces/abc123` | `/workspaces/abc123` | Exact match ✓ |
| Single-repo | `/workspaces/abc123` | `/workspaces/abc123/my-repo` | Prefix match ✓ |
The `resolve_container_ref_by_prefix` method:
1. First tries exact match (handles multi-repo case)
2. Falls back to prefix match using SQLite GLOB: `path GLOB container_ref || '/*'` (handles single-repo case where path is a subfolder)
This should handle both cases correctly. The confidence is higher now because we've accounted for how "Open in IDE" behaves differently based on repo count.
* Everything compiles. Now the query handles both:
- Unix paths: `/workspaces/abc123/repo-name` matches `/workspaces/abc123` via `/*`
- Windows paths: `C:\workspaces\abc123\repo-name` matches `C:\workspaces\abc123` via `\*`
* Use std::path for cross-platform parent directory lookup
Instead of doing path prefix matching in SQL (which doesn't handle
Windows backslashes), we now:
1. Try exact match on the path
2. If not found, try the parent directory (handles single-repo case)
This uses std::path::Path::parent() which handles path separators
correctly on all platforms.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
* cleanup navbar
* re-enable dev server from command bar
* Add the ability to open the command bar from the `NavbarContainer.tsx` : (vibe-kanban 58189151)
- dots-three-outline icon
- position next to settings
`vibe-kanban/frontend/src/components/ui-new/containers/NavbarContainer.tsx`
* `NavbarContainer.tsx` button to go back to old UI should navigate back to task rather than attempt (vibe-kanban 2b6f4c76)
`index.ts`
`vibe-kanban/frontend/src/components/ui-new/containers/NavbarContainer.tsx`
`vibe-kanban/frontend/src/components/ui-new/actions/index.ts`
* Add new setting: beta\_workspaces, and beta\_workspaces\_invitation\_sent (vibe-kanban e2e73cb9)
- Stored in the `mod.rs`
- This defaults to 'false'
- If a user is considered an active user (they have created more than 50 task attempts), they should be proactively invited to join the beta of workspaces
- The invite will be displayed as dialog in the old UI, triggered when the user opens the `TaskAttemptPanel.tsx`
- The setting can be changed later in the `GeneralSettings.tsx` , right at the bottom in a section for beta features
- When the user has beta\_workspaces set to true:
- Previously when they open a task in the `TaskKanbanBoard.tsx` it would open a task attempt or task, now it will always open a task
- And when clicking on a task attempt in the `TaskPanel.tsx` it will open in the new workspaces view (/workspaces/[WORKSPACE\_ID])
`vibe-kanban/frontend/src/components/panels/TaskAttemptPanel.tsx`
`vibe-kanban/frontend/src/pages/settings/GeneralSettings.tsx`
`vibe-kanban/crates/services/src/services/config/mod.rs`
`vibe-kanban/frontend/src/components/tasks/TaskKanbanBoard.tsx`
`vibe-kanban/frontend/src/components/panels/TaskPanel.tsx`
* Introduce a way to give feedback (vibe-kanban 463fbf1d)
- Icon in `NavbarContainer.tsx` next to settings
- Also triggerable from command bar
- Using posthog client, already installed
`vibe-kanban/frontend/src/components/ui-new/containers/NavbarContainer.tsx`
* Create a new dialog that shows when users use workspaces (ui-new) for the first time. It should (vibe-kanban b0e8344a)
explain the features of workspaces. The component will consist of a popup with topics in a sidebar on the left and content (text and images) in a main section to the right. It does not use the existing Dialog component.
It is accessible by clicking a help icon in the `NavbarContainer.tsx` and from the command bar via `pages.ts`
Create the component and some seed content that I will edit:
1. Welcome to workspaces, here are some tips to get started
2. Use the command bar to navigate
3. Create workspaces in the sidebar, also view all your workspaces and the status of each here
4. Workspaces can be created with multiple repos
5. You can create multiple sessions for each workspace
6. Preview changes
7. View diffs, comment on them
8. If any any point you want to go back to the old UI, you can turn off workspaces in settings
`vibe-kanban/frontend/src/components/ui-new/containers/NavbarContainer.tsx`
`vibe-kanban/frontend/src/components/ui-new/actions/pages.ts`
* Update `WorkspacesGuideDialog.tsx` : (vibe-kanban b4c5d731)
- Make 600px height
- Add new section: Context Bar
> The context bar lets you switch between panes quickly. Drag it wherever works best for you.
`vibe-kanban/frontend/src/components/ui-new/dialogs/WorkspacesGuideDialog.tsx`
* The `WorkspacesGuideDialog.tsx` appears every time I reload the page, it doesn't seem that we're (vibe-kanban 7fd9e0c8)
saving that the user has already seen it once and it should no longer be auto shown
`vibe-kanban/frontend/src/components/ui-new/dialogs/WorkspacesGuideDialog.tsx`
* Please run `check-i18n.sh` and fix the issue (vibe-kanban d3323397)
`vibe-kanban/scripts/check-i18n.sh`
## Summary
Fixed the issue where the right sidebar (Git Panel) was using the left sidebar icon.
### Changes made to `frontend/src/components/ui-new/actions/index.ts`:
1. **Added imports** (line 1): `forwardRef` and `createElement` from React
2. **Created `RightSidebarIcon`** (lines 54-63): A wrapper component that renders `SidebarSimpleIcon` with `transform: scaleX(-1)` to mirror it horizontally, making it point to the right
3. **Updated `ToggleGitPanel`** (line 455): Changed from `SidebarSimpleIcon` to `RightSidebarIcon`
The fix uses CSS transform to flip the icon horizontally, maintaining visual consistency with the existing icon while correctly indicating that it controls the right sidebar.
Fixed gh CLI compatibility for older versions (e.g., v2.4.0) when creating pull requests.
**`crates/services/src/services/git_host/github/cli.rs`:**
- Added `repo_path: &Path` parameter to `create_pr()` method
- Added documentation explaining the compatibility requirement
- Changed `self.run(args, None)` to `self.run(args, Some(repo_path))` to execute the `gh pr create` command from within the git repository
**`crates/services/src/services/git_host/github/mod.rs`:**
- Threaded `repo_path` through the async closure to the CLI call
- Added `repo_path_buf` variable to convert the path reference to an owned `PathBuf` for the spawned blocking task
Older `gh` CLI versions (like v2.4.0 found on Ubuntu 22.04) require running `gh pr create` from within a git repository, even when the `--repo` flag is explicitly provided. By passing the `repo_path` as the working directory, the command now works correctly on all gh CLI versions.
Cleanup script changes for workspace 05a586e1-4195-4b66-b5ec-b626094910f8
* preview styles
* All tasks are complete. Let me provide a summary of the changes made:
## Summary
I've implemented the preview functionality improvements as requested:
### Changes Made
**1. Rust Types (`crates/db/src/models/scratch.rs`)**
- Renamed `PreviewUrlOverrideData` → `PreviewSettingsData`
- Added new fields: `screen_size`, `responsive_width`, `responsive_height`
- Updated `ScratchPayload` and `ScratchType` enum to use `PreviewSettings`
**2. New Hook (`frontend/src/hooks/usePreviewSettings.ts`)**
- Created new `usePreviewSettings` hook (replaced `usePreviewUrlOverride`)
- Manages both URL override and screen size settings
- Persists screen size via the scratch system (per-workspace)
- Exports `ScreenSize` and `ResponsiveDimensions` types
**3. PreviewBrowserContainer (`frontend/src/components/ui-new/containers/PreviewBrowserContainer.tsx`)**
- Added URL controls (input, copy, open in new tab, refresh, clear override)
- Added stop button and related handlers
- Added screen size state management
- Added responsive dimensions resize handlers
**4. PreviewBrowser View (`frontend/src/components/ui-new/views/PreviewBrowser.tsx`)**
- Added floating toolbar above the iframe with:
- URL input with action buttons
- Screen size toggle (Desktop/Mobile/Responsive icons)
- Dimensions display for responsive mode
- Stop button
- Implemented three screen modes:
- **Desktop**: Full width/height (current behavior)
- **Mobile**: 390×844px centered with shadow
- **Responsive**: Draggable resize handles on right, bottom, and corner edges
**5. PreviewControls View (`frontend/src/components/ui-new/views/PreviewControls.tsx`)**
- Simplified to show only logs
- Removed URL input row and all control buttons
- Renamed section header to "Dev Server Logs"
**6. PreviewControlsContainer (`frontend/src/components/ui-new/containers/PreviewControlsContainer.tsx`)**
- Removed all URL-related state and handlers
- Now only manages logs display and process tab switching
All type checks pass. The screen size preference is persisted per-workspace using the existing scratch system.
* Cleanup script changes for workspace dd65dbe3-2e31-4897-8aa4-b2f8f7971ab7
* All ESLint and TypeScript checks pass. The implementation is complete.
## Summary of Changes
**Files Modified:**
1. **`crates/db/src/models/scratch.rs`** - Renamed `PreviewUrlOverrideData` → `PreviewSettingsData` with new fields for screen size persistence
2. **`crates/server/src/bin/generate_types.rs`** - Updated type export to use new name
3. **`shared/types.ts`** - Regenerated with new types (`PreviewSettingsData`, `ScratchType.PREVIEW_SETTINGS`)
4. **`frontend/src/hooks/usePreviewSettings.ts`** (new) - Replaces `usePreviewUrlOverride.ts`, adds screen size management
5. **`frontend/src/hooks/usePreviewUrlOverride.ts`** - Deleted
6. **`frontend/src/components/ui-new/containers/PreviewBrowserContainer.tsx`** - Added URL controls, stop button, and resize state management
7. **`frontend/src/components/ui-new/views/PreviewBrowser.tsx`** - Added floating toolbar with:
- URL input with copy/open/refresh/clear buttons
- Screen size toggle (Desktop/Mobile/Responsive icons)
- Responsive resize handles
- Stop button
8. **`frontend/src/components/ui-new/containers/PreviewControlsContainer.tsx`** - Simplified to logs only
9. **`frontend/src/components/ui-new/views/PreviewControls.tsx`** - Simplified to logs only
* Cleanup script changes for workspace dd65dbe3-2e31-4897-8aa4-b2f8f7971ab7
* All checks pass. Here's a summary of the changes made:
## Summary of Changes
### 1. Fixed infinite loop bug (`usePreviewSettings.ts`)
- Added `useMemo` to stabilize the `responsiveDimensions` object reference
- This prevents the useEffect in the container from re-triggering on every render
### 2. Updated toolbar to always show with floating style (`PreviewBrowser.tsx`)
- Toolbar is now always visible (not conditional on `isServerRunning && hasUrl`)
- Changed styling from `border-b border-border` to `rounded-md shadow-md m-base` for a floating appearance
- URL input and action buttons are disabled (with `opacity-50 cursor-not-allowed`) when no URL is available
- Start/Stop button in toolbar changes based on server state:
- Shows "Start" button when server is not running
- Shows "Stop" button when server is running
- Simplified the empty state content area to just show a message pointing to the toolbar's Start button
* All checks pass. The fix:
1. **Changed from state to refs** for `isResizing` and `resizeDirection` - these now don't trigger re-renders when they change
2. **Added `localDimensionsRef`** to capture the current dimensions for the `handleEnd` callback without adding it to the effect's dependency array
3. **Effect now only depends on `setResponsiveDimensions`** (a stable callback), so event listeners are registered once on mount and cleaned up on unmount
4. **No more race conditions** - the same event handlers persist throughout the entire drag operation
The resize should now:
- Stop immediately when you release the mouse
- Be smooth without choppiness (no effect re-runs during drag)
* The responsive resize fix is complete. Here's a summary of the changes made:
**In `PreviewBrowserContainer.tsx`:**
1. Added `isResizing` state to track when resizing is active (for UI purposes)
2. Added `setResponsiveDimensionsRef` to store the callback in a ref, preventing the resize effect from re-running when the callback identity changes
3. Changed the resize effect to use an empty dependency array (`[]`) since all external values are now accessed via refs
4. Updated `handleResizeStart` to set `isResizing(true)`
5. Updated `handleEnd` to set `isResizing(false)` and use `setResponsiveDimensionsRef.current`
6. Passed `isResizing` prop to the `PreviewBrowser` view
**In `PreviewBrowser.tsx`:**
1. Added `isResizing` prop to the interface and destructured it
2. Applied `pointer-events-none` class to the iframe when `isResizing` is true - this prevents the iframe from capturing mouse events during resize, ensuring smooth dragging
These changes fix both issues:
- **Resize not stopping**: The effect no longer re-registers listeners when `setResponsiveDimensions` changes
- **Choppy dragging**: The iframe no longer captures mouse events during resize
* All checks pass. The fix is complete. The resize now uses delta-based calculation:
1. **`startPosRef`**: Captures the mouse position when resize starts
2. **`startDimensionsRef`**: Captures the iframe dimensions when resize starts
3. **`handleMove`**: Calculates delta (current position - start position) and applies it to the starting dimensions
4. **`handleEnd`**: Clears both refs when resize ends
This approach works regardless of where the iframe is positioned in the container, fixing both:
- The mouse jump offset (no longer tries to position based on container edge)
- The 50% distance issue (delta is 1:1 with mouse movement)
* Cleanup script changes for workspace dd65dbe3-2e31-4897-8aa4-b2f8f7971ab7
* Done. The resize should now move at 1:1 with the cursor. Since the centered element grows on both sides equally, doubling the delta ensures the edge under the cursor moves the full distance you drag.
* Done! I've added a minimal dark phone frame around the iframe when in mobile mode. The changes:
- **Mobile mode** now wraps the iframe in a phone skeleton with:
- Dark bezel (`bg-gray-900`)
- Rounded outer corners (`rounded-[3rem]`)
- Padding for bezel width (`p-3`)
- Shadow (`shadow-xl`)
- Rounded inner screen area (`rounded-[2.5rem]`)
- **Desktop and responsive modes** remain unchanged
You can test it by running `pnpm run dev:qa` and switching to mobile view in the preview browser.
* styles
* I've completed the implementation. Here's a summary of the changes:
## Summary
Created two new reusable button components and updated PreviewBrowser.tsx to standardize button styles:
### New Components
1. **`IconButton.tsx`** (`frontend/src/components/ui-new/primitives/IconButton.tsx`)
- Standalone icon button with consistent styling
- Supports `default` and `tertiary` variants
- Includes proper hover states (`bg-secondary/50`), disabled states, and transitions
2. **`IconButtonGroup.tsx`** (`frontend/src/components/ui-new/primitives/IconButtonGroup.tsx`)
- Container component for grouped icon buttons with shared border
- `IconButtonGroupItem` for individual buttons with `active` state support
- Consistent styling with border, padding, and hover/active states
### Updated PreviewBrowser.tsx
- **URL action buttons** (Clear, Copy, Open in new tab, Refresh): Now use `IconButton` component with consistent hover backgrounds
- **Screen size toggle** (Desktop, Mobile, Responsive): Now uses `IconButtonGroup` and `IconButtonGroupItem` with proper active state styling
- **Start/Stop button**: Kept using `PrimaryButton` (already consistent)
### Visual Consistency Achieved
All toolbar buttons now share:
- Consistent padding (`p-half`)
- Consistent hover states (`bg-secondary/50` background)
- Consistent active states (`bg-secondary` background) for toggles
- Consistent disabled states (`opacity-40 cursor-not-allowed`)
- Consistent icon sizing (`size-icon-sm`) with `weight="bold"`
- Consistent border radius (`rounded-sm`)
* Done. The URL action buttons (Copy, Open in new tab, Refresh) are now grouped in an `IconButtonGroup` with a shared border, matching the visual style of the screen size toggle group.
The toolbar now has three visually consistent button groups:
1. **URL input** with optional clear override button
2. **URL actions group** (Copy, Open in new tab, Refresh) - bordered group
3. **Screen size toggle group** (Desktop, Mobile, Responsive) - bordered group
4. **Start/Stop button** (PrimaryButton)
* Done. All changes have been implemented:
1. **Added `iconClassName` prop to `IconButtonGroupItem`** - Supports passing custom classes to the icon (e.g., `animate-spin` for the spinner)
2. **Moved Clear button into URL Actions group** - The Clear Override button (X icon) is now inside the `IconButtonGroup` with Copy, Open, and Refresh buttons
3. **Replaced Pause button with `IconButtonGroupItem`** - The stop/pause button now uses the same `IconButtonGroup` styling as the other toolbar buttons, with spinner animation support when stopping
The toolbar now has consistent visual styling with three button groups:
- **URL Actions**: Clear (conditional), Copy, Open in new tab, Refresh
- **Screen Size Toggle**: Desktop, Mobile, Responsive
- **Stop button**: Pause icon (when server is running)
- **Start button**: Kept as `PrimaryButton` since it has a text label
* Cleanup script changes for workspace dd65dbe3-2e31-4897-8aa4-b2f8f7971ab7
* Done. The Start/Stop button is now a single `IconButtonGroup` with one `IconButtonGroupItem` that:
- Shows Play icon when server is stopped, Pause icon when running
- Shows Spinner icon with animation when starting or stopping
- Has the same size as all other toolbar button groups
* Cleanup script changes for workspace dd65dbe3-2e31-4897-8aa4-b2f8f7971ab7
* Done. Fixed the spinning Play icon bug by making the `iconClassName` logic match the icon selection logic exactly. Now `animate-spin` is only applied when actually showing the `SpinnerIcon`.
* Done. The entire toolbar (URL input, URL actions, screen size toggle) is now disabled when the dev server isn't running. Only the Play/Start button remains enabled so users can start the server.
* The changes compile correctly. Here's a summary of what was fixed:
## Summary
Fixed the "Fix Script" button showing at the wrong time in `PreviewBrowser.tsx`.
**Changes made:**
1. **`PreviewBrowser.tsx`** - Added `hasFailedDevServer?: boolean` prop and updated the condition on line 345 from `{handleFixDevScript && (` to `{hasFailedDevServer && handleFixDevScript && (`
2. **`PreviewBrowserContainer.tsx`** - Added failed dev server detection logic (lines 45-51) that checks for processes with `status === 'failed'` or `status === 'completed'` with non-zero exit code, and passed the `hasFailedDevServer` prop to the view
The "Fix Script" button will now only appear when the last dev server process actually failed, not when it was successful or killed.
* update styles
* All tasks completed. Here's a summary of the changes made:
## Summary
### 1. `IconButtonGroup.tsx` (lines 3, 50-65)
- Added import for `Tooltip` component
- Modified `IconButtonGroupItem` to wrap buttons with `<Tooltip>` when `title` prop is provided
- Removed native `title` attribute from button (tooltip handles it now)
### 2. `en/tasks.json` (lines 125-134)
Added new i18n keys under `preview.toolbar`:
- `clearUrlOverride`: "Clear URL override"
- `desktopView`: "Desktop view"
- `mobileView`: "Mobile view (390x844)"
- `responsiveView`: "Responsive view (resizable)"
- `startDevServer`: "Start dev server"
Added new `preview.loading` section:
- `startingServer`: "Starting dev server..."
- `waitingForServer`: "Waiting for server..."
### 3. `PreviewBrowser.tsx` (lines 160-254, 342-344)
Replaced all hardcoded strings with i18n translations using `t()`:
- URL action buttons (clear override, copy, open in tab, refresh)
- Screen size toggle buttons (desktop, mobile, responsive)
- Start/stop server button
- Loading state messages
All icon buttons now have proper accessible tooltips via the `Tooltip` component instead of native browser `title` attributes, and all strings are internationalized.
* style
* All i18n issues have been fixed. Here's a summary of the changes made:
**1. Added missing translation keys to all non-English locales (es, ja, ko, zh-Hans, zh-Hant):**
- `preview.loading.startingServer`
- `preview.loading.waitingForServer`
- `preview.toolbar.clearUrlOverride`
- `preview.toolbar.desktopView`
- `preview.toolbar.mobileView`
- `preview.toolbar.responsiveView`
- `preview.toolbar.startDevServer`
**2. Fixed hardcoded strings in `PreviewBrowser.tsx`:**
- Replaced dimension separator `x` with HTML entity `×`
- Internationalized the "no dev script" setup message with 3 new i18n keys:
- `preview.noServer.setupTitle`
- `preview.noServer.editDevScript`
- `preview.noServer.learnMore`
**3. Added the 3 new keys to all locale files (en, es, ja, ko, zh-Hans, zh-Hant)**
The `check-i18n.sh` script now passes with:
- 128 violations (down from 131 on main - a net improvement!)
- No duplicate keys
- Translation keys consistent across all locales
* fix: run gh pr create from repo directory for old CLI compatibility
Older versions of the GitHub CLI (e.g., v2.4.0 on Ubuntu 22.04) require
running inside a git repository even when --repo is specified. This
change adds a repo_path parameter to create_pr that sets the working
directory when invoking gh, ensuring compatibility with older versions.
Changes:
- Add run_in_dir helper to GhCli for running commands in a specific directory
- Update create_pr to accept optional repo_path parameter
- Pass repo_path from the PR creation route where it's already available
Fixes#1665🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* fix: address review comments
- Remove redundant repo_path clone (use repo_path.clone() directly in closure)
- Use worktree_path instead of repo_path for gh pr create (consistent with git push)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Support CODEX_HOME environment variable for custom config location
Add a `codex_home()` helper function that checks the CODEX_HOME
environment variable first, then falls back to ~/.codex. This allows
users who have configured a custom Codex home directory to use
vibe-kanban without issues.
Fixes:
- Follow-up sessions not finding rollout files when CODEX_HOME is set
- MCP config not being detected from custom location
- Auth and installation detection checking wrong paths
Includes unit tests and documentation for the new feature.
Closes#1648🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Revert "fix: address review comments"
This reverts commit 44986bc6818f946834e5d4fe2196e1e06397c424.
* Revert "fix: run gh pr create from repo directory for old CLI compatibility"
This reverts commit b9e54e3c09b1ca86bc3624961c36880f58a8943f.
* address review feedback
* remove tests
---------
Co-authored-by: T Savo <tsavo@nightfall.ai>
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Co-authored-by: Solomon <abcpro11051@disroot.org>
* I've implemented the changes to the rebase/merge flow in the new workspaces UI. Here's a summary of what was done:
## Summary of Changes
### 1. Created `ResolveConflictsDialog` component
**File:** `frontend/src/components/ui-new/dialogs/ResolveConflictsDialog.tsx`
A new dialog that:
- Shows when conflicts are detected before rebase/merge operations
- Displays the list of conflicted files (up to 5, with a count for additional)
- Asks the user whether to resolve conflicts in:
- **Current session** (default when a session exists)
- **New session** (toggle switch, similar to StartReviewDialog)
- When creating a new session, allows selecting agent/profile
- Sends the conflict resolution instructions to the agent automatically
### 2. Updated `GitRebase` action
**File:** `frontend/src/components/ui-new/actions/index.ts`
- Now checks for existing conflicts before opening the RebaseDialog
- If conflicts exist (`is_rebase_in_progress` or `conflicted_files.length > 0`), shows the ResolveConflictsDialog instead
- If no conflicts, proceeds with normal rebase flow
### 3. Updated `GitMerge` action
**File:** `frontend/src/components/ui-new/actions/index.ts`
- Same conflict detection logic as GitRebase
- If conflicts exist, shows the ResolveConflictsDialog
- If no conflicts, proceeds with normal merge confirmation flow
### 4. Added translations
**File:** `frontend/src/i18n/locales/en/tasks.json`
Added new translation keys under `resolveConflicts.dialog`:
- `title`: "Resolve Conflicts"
- `description`: "Conflicts were detected. Choose how you want the agent to resolve them."
- `sessionLabel`: "Session"
- `existingSession`: "Continue in current session"
- `newSession`: "New Session"
- `resolve`: "Resolve Conflicts"
- `resolving`: "Starting..."
### How it works
1. When a user clicks **Rebase** or **Merge** in the RepoCard dropdown
2. The system fetches the branch status to check for conflicts
3. If conflicts exist:
- The `ResolveConflictsDialog` opens
- User can choose to resolve in current session or new session
- Clicking "Resolve Conflicts" sends pre-built conflict resolution instructions to the agent
4. If no conflicts:
- Normal flow continues (RebaseDialog for rebase, ConfirmDialog for merge)
* The type check passes. Now the flow will be:
1. User clicks Rebase → RebaseDialog opens
2. User selects branch and clicks Rebase
3. If conflicts occur during rebase:
- The error is caught with type `merge_conflicts` or `rebase_in_progress`
- RebaseDialog closes
- ResolveConflictsDialog opens with conflict details
4. If no conflicts → Rebase succeeds and dialog closes
This handles the first-time rebase scenario where conflicts are detected *after* the rebase attempt, not before.
* Cleanup script changes for workspace f54c4bcf-8b64-4260-8cae-c8d0bda2a350
* The type check passes. The key changes I made:
1. **Await query invalidation**: Changed from fire-and-forget `invalidateQueries` to awaiting them with `Promise.all()`. This ensures the sessions list is refreshed before we try to select the new session.
2. **Select session after queries refresh**: Moved the `selectSession` call to after the queries have been invalidated and refetched, so the new session exists in the list.
3. **Simplified the boolean logic**: Used a single `creatingNewSession` variable instead of computing the condition twice.
This should fix the issue where the previous session "disappears" - it was likely being overwritten by the auto-select behavior in `useWorkspaceSessions` that fires when sessions change. Now we wait for that to settle before selecting the new session.
* The type check passes. Here's a summary of the updated flow:
## Updated Flow
### Merge Action:
1. **Check for existing conflicts** → If conflicts exist, show ResolveConflictsDialog
2. **Check if branch is behind** → If `commits_behind > 0`, show "Rebase Required" dialog that offers to open RebaseDialog
3. **Otherwise** → Show normal merge confirmation dialog
### Rebase Action:
1. **Check for existing conflicts** → If conflicts exist, show ResolveConflictsDialog
2. **Otherwise** → Show RebaseDialog
3. **If rebase fails with conflicts** → RebaseDialog catches the error and shows ResolveConflictsDialog
This way:
- Clicking Merge when behind will prompt to rebase first (avoiding the "Branches diverged" error)
- Clicking Rebase when conflicts already exist will show the resolve dialog immediately
- If rebase creates new conflicts, the RebaseDialog will catch it and show the resolve dialog
* Both the type check and i18n lint pass now. The i18n issues in the ResolveConflictsDialog have been fixed by:
1. Added new translation keys in `tasks.json`:
- `filesWithConflicts_one`: "{{count}} file has conflicts"
- `filesWithConflicts_other`: "{{count}} files have conflicts"
- `andMore`: "...and {{count}} more"
2. Updated `ResolveConflictsDialog.tsx` to use `t()` function with these keys instead of hardcoded strings.
* All checks pass. The i18n translations have been added to all 5 locale files (es, ja, ko, zh-Hans, zh-Hant) for the `resolveConflicts.dialog.*` keys:
- `title` - Resolve Conflicts
- `description` - Conflicts were detected...
- `sessionLabel` - Session
- `existingSession` - Continue in current session
- `newSession` - Start a new session
- `resolve` - Resolve Conflicts
- `resolving` - Starting...
- `filesWithConflicts_one` - {{count}} file has conflicts
- `filesWithConflicts_other` - {{count}} files have conflicts
- `andMore` - ...and {{count}} more
All checks now pass:
- `./scripts/check-i18n.sh` ✅ - No missing translation keys
- `pnpm run lint` ✅ - Both frontend and backend linting pass
- `pnpm run check` ✅ - TypeScript and Rust type checks pass
* The GitHub comments integration is now complete. Here's a summary of what was implemented:
## Summary
The GitHub PR comments integration for the new UI (ui-new) is now complete. All tasks have been implemented:
### Files Modified:
1. **`useUiPreferencesStore.ts`** - Added persistence key for `showGitHubComments` toggle
2. **`WorkspaceContext.tsx`** - Extended with PR comments data, helpers (`getGitHubCommentsForFile`, `gitHubFileCommentCounts`), and toggle state
3. **`CommentCard.tsx`** (new) - Shared primitive for displaying comments with three variants: `user`, `github`, `input`
4. **`GitHubCommentRenderer.tsx`** (new) - Read-only renderer for GitHub comments with GitHub logo, author, timestamp, and external link
5. **`ReviewCommentRenderer.tsx`** - Refactored to use `CommentCard` primitive
6. **`CommentWidgetLine.tsx`** - Refactored to use `CommentCard` primitive
7. **`DiffViewCardWithComments.tsx`** - Integrated GitHub comments into diff view, showing both user and GitHub comments with separate counts in the header
8. **`FileTreeNode.tsx`** - Added GitHub comment badge showing count next to files
9. **`FileTree.tsx`** - Added toggle button in header to show/hide GitHub comments
10. **`FileTreeContainer.tsx`** - Wired up the context to pass toggle state and comment counts to FileTree
11. **`common.json`** (i18n) - Added translation keys for show/hide GitHub comments
### Features:
- GitHub PR comments displayed inline next to relevant code in diff views
- Toggle button in file tree to show/hide GitHub comments (persisted)
- Comment count badges on files in the file tree
- Visual differentiation: user comments have orange styling (`bg-brand/20 border-brand`), GitHub comments have neutral styling (`bg-secondary border-border`)
- User comments take priority when both exist on the same line
* Cleanup script changes for workspace 881e2956-9cca-406d-835f-7ea8acbe550e
* All checks pass. Let me show a summary of the changes made:
## Summary of Fixes
All code review feedback has been addressed:
| # | Fix | File | Change |
|---|-----|------|--------|
| 1 | Date parsing | `GitHubCommentRenderer.tsx:9-27` | Replaced `try/catch` with `isNaN(date.getTime())` check |
| 2 | Comment priority | `DiffViewCardWithComments.tsx:258-260` | Added comment explaining user comments take priority |
| 3 | SplitSide.new | `WorkspaceContext.tsx:163-165` | Added comment explaining why `SplitSide.new` is correct |
| 4 | Multi-repo TODO | `WorkspaceContext.tsx:133-134` | Added TODO about supporting multiple repos |
| 5 | Loading state | `FileTreeContainer.tsx`, `FileTree.tsx` | Passed `isGitHubCommentsLoading` prop and added `opacity-50 animate-pulse` to button |
Type checks pass. Ready for commit.
* Fixed! The `FileTree.tsx` now uses the correct `Tooltip` component from `@/components/ui-new/primitives/Tooltip` instead of the old `@/components/ui/tooltip`.
Changes made:
- Updated import to use `import { Tooltip } from '../primitives/Tooltip'`
- Simplified the tooltip usage from the compound component pattern (`Tooltip` + `TooltipTrigger` + `TooltipContent`) to the simpler API (`<Tooltip content="...">...</Tooltip>`)
* The path matching bug has been fixed. Here's a summary of the changes:
## Summary of Bug Fix
**Problem**: GitHub comments weren't displaying because paths didn't match.
- GitHub API returns paths like: `frontend/src/components/ui-new/actions/index.ts`
- Diff paths are prefixed with repo name: `vibe-kanban/frontend/src/components/ui-new/actions/index.ts`
**Solution**: Use `endsWith` matching instead of exact string equality.
### Files Changed:
1. **`WorkspaceContext.tsx`**:
- Added `pathMatches` helper function that checks if paths match using `endsWith`
- Updated `getGitHubCommentsForFile` to use `pathMatches`
- Replaced `gitHubFileCommentCounts: Record<string, number>` with `getGitHubCommentCountForFile: (filePath: string) => number` function that also uses `pathMatches`
2. **`FileTree.tsx`**:
- Changed prop from `fileCommentCounts?: Record<string, number>` to `getGitHubCommentCountForFile?: (filePath: string) => number`
- Updated usage from `fileCommentCounts?.[node.path]` to `getGitHubCommentCountForFile?.(node.path)`
3. **`FileTreeContainer.tsx`**:
- Updated to pass the new `getGitHubCommentCountForFile` function instead of `gitHubFileCommentCounts` Record
* Cleanup script changes for workspace 881e2956-9cca-406d-835f-7ea8acbe550e
* Fixed! The `renderExtendLine` function now includes a null check for `lineData.data` to prevent the TypeError when switching diff modes. The fix adds:
```typescript
// Guard against undefined data (can happen when switching diff modes)
if (!lineData.data) return null;
```
This prevents the crash when the `@git-diff-view` library passes undefined data during mode transitions.
* Done! GitHub comments will now be shown by default. The change was a simple one-liner in `WorkspaceContext.tsx`:
```typescript
// Before:
false // Default to hidden
// After:
true // Default to shown
```
* The proper fix is complete. Here's a summary of the changes:
## Summary: Comments on deleted lines fix
**Problem**: GitHub comments on deleted lines weren't showing because we were placing all comments on `SplitSide.new`.
**Solution**: Pass through the `side` field from GitHub's API which indicates whether the comment is on the "LEFT" (old/deleted) or "RIGHT" (new/added) side.
### Files Changed:
1. **`crates/services/src/services/git_host/types.rs`**
- Added `side: Option<String>` field to `UnifiedPrComment::Review` variant
2. **`crates/services/src/services/git_host/github/mod.rs`**
- Pass `c.side` through when creating `UnifiedPrComment::Review`
3. **`crates/services/src/services/git_host/azure/cli.rs`**
- Added `side: None` to Azure DevOps (doesn't have this info)
4. **`shared/types.ts`** (regenerated)
- Now includes `side: string | null` in the review comment type
5. **`frontend/src/contexts/WorkspaceContext.tsx`**
- Updated normalization to use `comment.side === 'LEFT' ? SplitSide.old : SplitSide.new`
6. **`frontend/src/components/ui-new/containers/DiffViewCardWithComments.tsx`**
- Updated `extendData` building to place GitHub comments on the correct side (`oldFileData` or `newFileData`) based on `comment.side`
* The refactoring is complete. Here's a summary of the changes:
**Created new file:** `frontend/src/hooks/useGitHubComments.ts`
- Contains the `NormalizedGitHubComment` interface
- Contains all GitHub comments logic: fetching, toggle state, normalization, path matching helpers
**Updated:** `frontend/src/contexts/WorkspaceContext.tsx`
- Removed ~70 lines of GitHub comments logic
- Now imports and uses `useGitHubComments` hook
- Re-exports `NormalizedGitHubComment` type for consumers that import it from the context
The context file is now smaller and more focused on workspace management, while the GitHub comments functionality is encapsulated in its own dedicated hook.
* Cleanup script changes for workspace 881e2956-9cca-406d-835f-7ea8acbe550e
* Done. Removed the duplicate `formatRelativeTime` function from `GitHubCommentRenderer.tsx` and replaced it with an import from the existing `@/utils/date` utility.
* The i18n check now passes. All translation keys are consistent across locales. I added the missing `showGitHubComments` and `hideGitHubComments` translations to:
- Spanish (es)
- Japanese (ja)
- Korean (ko)
- Simplified Chinese (zh-Hans)
- Traditional Chinese (zh-Hant)
* Done! I've implemented the feature. Here's a summary of the changes to `vibe-kanban/frontend/src/components/ui-new/actions/index.ts`:
1. **Added `getNextWorkspaceId` helper function** (lines 184-196) - A reusable function that finds the next workspace to navigate to when removing a workspace from the active list
2. **Refactored `ArchiveWorkspace`** - Now uses the helper function instead of inline logic
3. **Updated `DeleteWorkspace`** - Added navigation logic that:
- Only triggers when deleting the currently viewed workspace
- Navigates to the next workspace in the list (or previous if at end)
- Falls back to `/workspaces/create` if no other workspaces exist
* Cleanup script changes for workspace a60eb506-5db1-4ba7-8ee6-26592885587b
* The implementation is complete and tested. Here's a summary of the changes made:
I've implemented an editable URL bar in the Preview Controls that allows users to override the auto-detected dev server URL on a per-workspace basis.
| File | Changes |
|------|---------|
| `crates/db/src/models/scratch.rs` | Added `PreviewUrlOverrideData` struct and `PreviewUrlOverride` variant to `ScratchPayload` enum |
| `crates/server/src/bin/generate_types.rs` | Registered `PreviewUrlOverrideData::decl()` for TypeScript type generation |
| `shared/types.ts` | Auto-generated with new `PreviewUrlOverrideData` type and updated `ScratchPayload` union |
| `frontend/src/hooks/usePreviewUrlOverride.ts` | **New file** - Custom hook for managing URL override persistence via scratch system |
| `frontend/src/components/ui-new/containers/PreviewControlsContainer.tsx` | Added URL override hook integration, merged auto-detected with override URL |
| `frontend/src/components/ui-new/views/PreviewControls.tsx` | Replaced static `<span>` with editable `<input>`, added clear override button (X icon) |
- **Editable URL bar**: Users can type a custom URL to override the auto-detected one
- **Per-workspace persistence**: Override URL saved in the scratch system using workspace ID
- **Debounced saves**: Changes are debounced (300ms) before saving to avoid excessive API calls
- **Clear override button**: X button appears when override is active, allowing revert to auto-detected URL
- **Visual distinction**: Override URLs show in normal text color, auto-detected in dim text
* Cleanup script changes for workspace 3f3c315d-5cc2-43b0-9043-117c857f38b4
* The URL input fix is complete. Here's a summary of what was implemented:
**Feature: Editable URL bar with per-workspace persistence**
1. **New scratch type** - Added `PreviewUrlOverride` to the Rust scratch system for persisting URL overrides per workspace
2. **New hook** - Created `usePreviewUrlOverride.ts` that wraps the scratch system with debounced saves (300ms delay)
3. **Container integration** - Updated `PreviewControlsContainer.tsx` to use the override URL when set, falling back to auto-detected URL
4. **View updates** - Updated `PreviewControls.tsx` with:
- Editable input field instead of read-only display
- Clear button (X icon) to revert to auto-detected URL
- Local state management to prevent WebSocket updates from disrupting typing
**Bug fix for typing issue:**
- Added local state (`localValue`) and ref (`inputRef`) to track input value locally
- The effect only syncs from server when input is not focused, preventing cursor jumping and character loss during typing
* ESLint and Clippy both pass now. The fix moved the state management from the presentational view component (`PreviewControls.tsx`) to the container component (`PreviewControlsContainer.tsx`), which aligns with the codebase's architecture pattern of keeping views stateless.
* I can see projects now. Let me click on the first project to access a workspace where I can test the URL override feature:
* TypeScript check passes now. The fix was changing `RefObject<HTMLInputElement | null>` to `RefObject<HTMLInputElement>` in the props interface - the `null` is already implied in how React refs work.
## Summary
**Fixed:** Invalid layout state where only left and right sidebars are visible (no main content area).
### Changes Made:
**1. `frontend/src/stores/useLayoutStore.ts`**
- Added `setMainPanelVisible` setter function to the type and implementation
- Added `useIsRightMainPanelVisible` derived selector hook that checks if Changes/Logs/Preview panel is visible
**2. `frontend/src/components/ui-new/containers/WorkspacesLayout.tsx`**
- Imported `useIsRightMainPanelVisible` from the layout store
- Added `setMainPanelVisible` to the destructured store values
- Replaced verbose `isChangesMode || isLogsMode || isPreviewMode` checks with the helper
- Added guard effect that ensures the left main panel (chat) is visible when the right main panel is hidden - this prevents the invalid state after page reload
The guard effect automatically opens the main panel whenever the layout would otherwise show only sidebars:
```typescript
// Ensure left main panel (chat) is visible when right main panel is hidden
// This prevents invalid state where only sidebars are visible after page reload
useEffect(() => {
if (!isMainPanelVisible && !isRightMainPanelVisible) {
setMainPanelVisible(true);
}
}, [isMainPanelVisible, isRightMainPanelVisible, setMainPanelVisible]);
```
## Summary
Fixed the "workspace not found" error when performing actions on non-selected workspaces.
**Root cause**: The `getWorkspaceFromCache()` function only checked the React Query cache, but only the currently selected workspace had its full data cached.
**Solution**: Modified the helper function to fetch from the API when data isn't in cache.
**File modified**: `frontend/src/components/ui-new/actions/index.ts`
**Changes**:
1. Renamed `getWorkspaceFromCache` → `getWorkspace` and made it async
2. Added fallback to `attemptsApi.get(workspaceId)` when cache miss occurs
3. Updated all 6 call sites to use `await getWorkspace()`:
- `RenameWorkspace` (line 215)
- `PinWorkspace` (line 229)
- `ArchiveWorkspace` (line 246)
- `DeleteWorkspace` (line 281)
- `OpenInOldUI` (line 489)
- `GitCreatePR` (line 630)
**Changes:**
1. Added `useState` and `useEffect` to imports
2. Added `pendingStart` state to track when mutation has started but no running process exists yet
3. Added `useEffect` that clears `pendingStart` when `runningDevServers.length > 0`
4. Added `onMutate` callback to set `pendingStart = true` when mutation starts
5. Updated `onError` to clear `pendingStart` on failure
6. Updated `isStarting` return value to `startMutation.isPending || pendingStart`
**How it works:**
- When the user clicks "Start", `onMutate` fires immediately and sets `pendingStart = true`
- This makes `isStarting = true`, showing the "starting" state in the UI
- The `pendingStart` state persists even after the API request completes
- Only when a running dev server process appears in the data (via the `useEffect`), `pendingStart` is cleared
- If the mutation fails, `onError` clears `pendingStart` immediately
This ensures the "starting" state is visible until the dev server process actually appears, rather than just during the brief API request time.
