2026-01-08 22:14:38 +00:00
|
|
|
import type { Icon } from '@phosphor-icons/react';
|
|
|
|
|
import type { NavigateFunction } from 'react-router-dom';
|
|
|
|
|
import type { QueryClient } from '@tanstack/react-query';
|
2026-01-11 08:03:19 +00:00
|
|
|
import type { EditorType, ExecutionProcess, Workspace } from 'shared/types';
|
2026-01-08 22:14:38 +00:00
|
|
|
import type { DiffViewMode } from '@/stores/useDiffViewStore';
|
|
|
|
|
import {
|
|
|
|
|
CopyIcon,
|
|
|
|
|
PushPinIcon,
|
|
|
|
|
ArchiveIcon,
|
|
|
|
|
TrashIcon,
|
|
|
|
|
PlusIcon,
|
|
|
|
|
GearIcon,
|
|
|
|
|
ColumnsIcon,
|
|
|
|
|
RowsIcon,
|
|
|
|
|
TextAlignLeftIcon,
|
|
|
|
|
EyeSlashIcon,
|
|
|
|
|
SidebarSimpleIcon,
|
|
|
|
|
ChatsTeardropIcon,
|
|
|
|
|
GitDiffIcon,
|
|
|
|
|
TerminalIcon,
|
|
|
|
|
SignOutIcon,
|
|
|
|
|
CaretDoubleUpIcon,
|
|
|
|
|
CaretDoubleDownIcon,
|
|
|
|
|
PlayIcon,
|
|
|
|
|
PauseIcon,
|
|
|
|
|
SpinnerIcon,
|
|
|
|
|
GitPullRequestIcon,
|
|
|
|
|
GitMergeIcon,
|
|
|
|
|
ArrowsClockwiseIcon,
|
|
|
|
|
CrosshairIcon,
|
|
|
|
|
DesktopIcon,
|
2026-01-09 10:06:29 +01:00
|
|
|
PencilSimpleIcon,
|
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>
2026-01-12 15:13:57 +01:00
|
|
|
ArrowUpIcon,
|
Add session-level review endpoint with StartReviewDialog (Vibe Kanban) (#1849)
* All checks pass. Let me provide a summary of what was implemented:
I've implemented the review endpoint as planned. Here's what was created:
1. **`crates/executors/src/actions/review.rs`** - New action type with:
- `RepoReviewContext` struct (repo_id + commit_hashes)
- `ReviewRequest` struct (executor_profile_id, context, additional_prompt, working_dir)
- `Executable` trait impl that calls `executor.spawn_review()`
2. **`crates/server/src/routes/task_attempts/review.rs`** - Endpoint handler with:
- `StartReviewRequest` for the API
- `RepoReviewContext` (endpoint-specific copy)
- `ReviewError::ProcessAlreadyRunning`
- `start_review` handler that:
- Verifies no running processes on workspace
- Creates fresh session
- Builds ReviewRequest action
- Starts execution with `ExecutionProcessRunReason::CodingAgent`
1. **`crates/executors/src/executors/mod.rs`**:
- Added `spawn_review()` to `StandardCodingAgentExecutor` trait with default prompt-based implementation
- Added `build_review_prompt()` helper function
2. **`crates/executors/src/actions/mod.rs`**:
- Added `pub mod review;`
- Added `ReviewRequest` to `ExecutorActionType` enum
- Updated `base_executor()` match
3. **`crates/services/src/services/container.rs`**:
- Updated match in `try_start_next_action` to handle `ReviewRequest`
4. **`crates/server/src/routes/task_attempts.rs`**:
- Added `pub mod review;`
- Added `.route("/review", post(review::start_review))`
5. **`crates/server/src/bin/generate_types.rs`**:
- Added new types to export list
**`POST /task-attempts/{id}/review`**
Request:
```json
{
"executor_profile_id": { "executor": "CLAUDE_CODE", "variant": null },
"context": [{ "repo_id": "uuid", "commit_hashes": ["abc123"] }],
"additional_prompt": "Focus on security issues"
}
```
Response: `ExecutionProcess` on success, `ReviewError` on failure.
To add native review for an executor (e.g., Codex), just override `spawn_review()` in that executor's `StandardCodingAgentExecutor` impl. No changes needed to action or endpoint.
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
All checks pass now. The duplicate type issue is fixed - we're using a single `RepoReviewContext` type from the executors crate.
All checks pass now. Both frontend lint (ESLint) and backend lint (Clippy) are passing.
Found and fixed the real issue. The problem was in `crates/services/src/services/container.rs` - the log normalization was only set up for `CodingAgentInitialRequest` and `CodingAgentFollowUpRequest`. `ReviewRequest` was falling through to the default case and returning `None`, so no normalizer was started for review processes.
Fixed in two places:
1. **Line 787-791**: Added `ReviewRequest` handling in `stream_normalized_logs` (for historic logs)
2. **Line 1149-1151**: Added `ReviewRequest` handling in `start_execution` (for live logs)
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* Backend changes for the `use_all_workspace_commits` flag are complete. Here's what was implemented:
Added `use_all_workspace_commits` flag to `StartReviewRequest` for automatically populating review context.
1. **`crates/db/src/models/execution_process_repo_state.rs`**
- Added `find_initial_commits_for_workspace()` - query to get the earliest `before_head_commit` for each repo in a workspace
2. **`crates/server/src/routes/task_attempts/review.rs`**
- Added `use_all_workspace_commits: bool` field to `StartReviewRequest` (defaults to `false`)
- When flag is `true` and `context` is `None`, auto-populates context with initial commits from workspace execution processes
3. **`crates/executors/src/executors/mod.rs`**
- Updated `build_review_prompt()` to detect single-commit context (indicating initial commit)
- When single commit per repo, prompts agent to "Review all changes made since the following base commit(s)" with git diff hint
4. **`crates/services/src/services/git.rs`**
- Added `get_commits_since_branch()` method (may be useful for future use)
5. **`shared/types.ts`**
- Generated TypeScript type includes `use_all_workspace_commits: boolean`
When frontend calls `POST /task-attempts/{id}/review` with:
```json
{
"executor_profile_id": { "executor": "CLAUDE_CODE", "variant": null },
"use_all_workspace_commits": true
}
```
The backend will:
1. Find the earliest execution process for the workspace
2. Get the `before_head_commit` for each repo (the commit before agents started making changes)
3. Pass that to the prompt builder which tells the agent to review all changes since that commit
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* Frontend UI implementation is complete. Here's a summary of what was added:
Added simple frontend UI to test the review endpoint.
1. **`frontend/src/lib/api.ts`**
- Added `startReview` method to `attemptsApi`
- Imports `StartReviewRequest`, `ReviewError` types
2. **`frontend/src/hooks/useStartReview.ts`** (NEW)
- Hook that calls `attemptsApi.startReview` with `use_all_workspace_commits: true`
- Invalidates `processes` and `branchStatus` queries on success
3. **`frontend/src/hooks/index.ts`**
- Exports `useStartReview`
4. **`frontend/src/components/ui/actions-dropdown.tsx`**
- Added "Start Review" menu item in the attempt actions section
- Uses the user's default executor profile from config
- Shows loading state while starting review
5. **`frontend/src/i18n/locales/en/tasks.json`**
- Added translation keys: `startReview`, `startingReview`
From the workspace actions dropdown (three dots menu), click "Start Review" to start a code review session using all workspace commits as context.
Done! The fix has been implemented. The review endpoint now uses `Session::find_latest_by_workspace_id` to find an existing session for the workspace, and only creates a new session if none exists. This means review logs will now appear in the same conversation view as other coding agent runs.
**Change summary:**
- Modified `crates/server/src/routes/task_attempts/review.rs` (lines 79-93)
- Instead of always creating a new session, it now checks for an existing session first using `Session::find_latest_by_workspace_id`
- This matches the pattern used by dev server, setup scripts, and other similar endpoints
Done! The fix is now in place. The change adds `ReviewRequest` to the action type filter in `useConversationHistory.ts` so review processes are included in the conversation view, and handles the content extraction appropriately (using `additional_prompt` for reviews instead of `prompt`).
**Change summary:**
- Modified `frontend/src/hooks/useConversationHistory.ts` (lines 226-244)
- Added `ReviewRequest` to the action type filter
- Used conditional to extract content from `additional_prompt` for reviews (with fallback "Review the code changes") vs `prompt` for coding agent requests
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
Done! All fixes are now in place:
1. **`useConversationHistory.ts` - `flattenEntries()`** (line 177-184): Added `ReviewRequest` to the filter so review processes are included in the flattened entries
2. **`useConversationHistory.ts` - `flattenEntriesForEmit()`** (line 226-244): Already fixed earlier - handles `ReviewRequest` and extracts `additional_prompt` for user message content
3. **`ProcessesTab.tsx`** (line 223-228): Added `ReviewRequest` to the ProfileVariantBadge conditional so the agent badge shows for review processes
* Done. Changes made:
1. **`crates/executors/src/actions/review.rs`**: Added `prompt: String` field to `ReviewRequest`
2. **`crates/server/src/routes/task_attempts/review.rs`**:
- Import `build_review_prompt`
- Build the full prompt from context and additional_prompt before creating the action
3. **`frontend/src/hooks/useConversationHistory.ts`**: Simplified content extraction to just use `actionType.prompt` for all action types (since `ReviewRequest` now has a prompt field too)
4. **Regenerated TypeScript types** - `ReviewRequest` in `shared/types.ts` now includes the `prompt` field
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* Done. Here's a summary of the changes:
**Backend:**
1. **`crates/executors/src/actions/review.rs`**:
- Added `CommitRange` enum with three variants: `FromBase`, `Specific`, and `Range`
- Updated `RepoReviewContext` to use `repo_name: String` and `commits: CommitRange` instead of `commit_hashes`
2. **`crates/executors/src/executors/mod.rs`**:
- Updated `build_review_prompt` to format output with repo names and handle all `CommitRange` variants
3. **`crates/server/src/routes/task_attempts/review.rs`**:
- Simplified `StartReviewRequest` (removed `context` field, kept `use_all_workspace_commits`)
- Updated handler to look up repo names via `Repo::find_by_ids` and use `CommitRange::FromBase`
4. **`crates/server/src/bin/generate_types.rs`**: Added `CommitRange` to exported types
**Frontend:**
- **`frontend/src/hooks/useStartReview.ts`**: Removed `context: null` since that field no longer exists
The prompt will now look like:
```
Please review the code changes.
Repository: vibe-kanban
Review all changes from base commit abc123 to HEAD.
Use `git diff abc123..HEAD` to see the changes.
```
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* Codex review support (vibe-kanban e7996a18)
## Context
We've added a review endpoint (\`POST /task-attempts/{id}/review\`) that starts a code review session. Currently it uses a default prompt-based implementation via \`spawn\_review()\` on \`StandardCodingAgentExecutor\`, which builds a prompt and delegates to \`spawn()\`.
## Goal
Implement native Codex review support by overriding \`spawn\_review()\` in the Codex executor to use Codex's native review mechanism instead of the prompt-based approach.
## Current Implementation
### Backend Types
\*\*\`CommitRange\` enum\*\* (\`crates/executors/src/actions/review.rs\`):
\`\`\`rust
pub enum CommitRange {
FromBase { commit: String },
Specific { commits: Vec<String> },
Range { from: String, to: String },
}
\`\`\`
\*\*\`RepoReviewContext\`\*\*:
\`\`\`rust
pub struct RepoReviewContext {
pub repo\_id: Uuid,
pub repo\_name: String,
pub commits: CommitRange,
}
\`\`\`
### Trait Method
\*\*\`spawn\_review()\`\*\* in \`StandardCodingAgentExecutor\` trait (\`crates/executors/src/executors/mod.rs\`):
\`\`\`rust
async fn spawn\_review(
&self,
current\_dir: &Path,
context: Option<&[RepoReviewContext]>,
additional\_prompt: Option<&str>,
env: &ExecutionEnv,
) -> Result<SpawnedChild, ExecutorError> {
// Default: build prompt and delegate to spawn()
let prompt = build\_review\_prompt(context, additional\_prompt);
self.spawn(current\_dir, &prompt, env).await
}
\`\`\`
## Tasks
1. Research Codex's native review API/mechanism (if it has one)
2. Override \`spawn\_review()\` in \`CodexExecutor\` to use native review if available
3. Fall back to prompt-based approach if native review isn't supported
* Done. Here's a summary of the changes:
1. **Removed dead code** from `crates/executors/src/executors/codex/review.rs`:
- Deleted the `map_to_review_target()` function (was ~120 lines)
- Removed unused imports (`CommitRange`, `RepoReviewContext`)
2. **Codex now uses `ReviewTarget::Custom`** with the pre-built prompt, which ensures the displayed prompt matches what Codex actually receives.
The build passes and TypeScript types have been regenerated.
* Use custom review target for codex
* Done. Here's a summary of the changes:
## Summary
Moved the review endpoint from workspace-level to session-level:
### Changes
1. **Created `crates/server/src/routes/sessions/review.rs`**
- New review endpoint at `POST /sessions/{id}/review`
- Takes `Extension<Session>` instead of `Extension<Workspace>`
- Looks up `agent_session_id` from previous executions using `find_latest_coding_agent_turn_session_id()`
- Passes `agent_session_id` to `ReviewAction` for session resumption
2. **Updated `crates/server/src/routes/sessions/mod.rs`**
- Added `pub mod review;`
- Added route `.route("/review", post(review::start_review))`
3. **Updated `crates/server/src/routes/task_attempts.rs`**
- Removed `pub mod review;`
- Removed `.route("/review", post(review::start_review))`
4. **Deleted `crates/server/src/routes/task_attempts/review.rs`**
5. **Updated `crates/server/src/bin/generate_types.rs`**
- Changed path from `task_attempts::review` to `sessions::review`
### API Change
- **Old**: `POST /api/task-attempts/{workspace_id}/review`
- **New**: `POST /api/sessions/{session_id}/review`
This ensures vk sessions and agent sessions are 1:1:
- Existing session → resumes agent session if available
- New session → fresh agent session
* Done! Here's a summary of all the frontend changes:
- Added `startReview` to `sessionsApi` using new endpoint `POST /api/sessions/${sessionId}/review`
- Removed `startReview` from `attemptsApi`
- Changed parameter from `attemptId` to `sessionId` and added optional `workspaceId` for query invalidation
- Changed API call from `attemptsApi.startReview` to `sessionsApi.startReview`
- Added `MagnifyingGlassIcon` import
- Added `onStartReview` and `isReviewStarting` to `SessionProps` interface
- Added "Start Review" menu item in the session dropdown
- Added `useStartReview` hook import and usage
- Added `handleStartReview` callback function
- Passed `onStartReview` and `isReviewStarting` to `SessionChatBox`
- Removed `useStartReview` import
- Removed `useUserSystem` import (now unused)
- Removed `startReview` hook usage
- Removed `handleStartReview` function
- Removed "Start Review" menu item from the dropdown
* Done. The fix adds the `ReviewRequest` case to `latest_executor_profile_for_session()` in `crates/db/src/models/execution_process.rs:688-690`.
The backend check passes. Follow-ups after reviews should now work correctly since the executor profile can be extracted from `ReviewRequest` just like from the other request types.
* Done. Removed `CommitRange` enum entirely. Changes:
1. **`crates/executors/src/actions/review.rs`** - Deleted `CommitRange` enum, changed `RepoReviewContext.commits` to `RepoReviewContext.base_commit: String`
2. **`crates/server/src/routes/sessions/review.rs`** - Updated construction to use `base_commit: initial_commit` instead of `commits: CommitRange::FromBase { commit: initial_commit }`
3. **`crates/executors/src/executors/mod.rs`** - Simplified `build_review_prompt()` to directly use `repo.base_commit` instead of matching on the enum
4. **`crates/server/src/bin/generate_types.rs`** - Removed `CommitRange::decl()` from type exports
5. **`shared/types.ts`** - Regenerated, `CommitRange` type is now gone
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* Done. Simplified the review context building:
**Changes:**
1. **`crates/db/src/models/execution_process_repo_state.rs`** - Replaced `find_initial_commits_for_workspace` with `find_initial_commit_for_repo` that takes a specific repo_id and uses ORDER BY + LIMIT 1 instead of GROUP BY/HAVING.
2. **`crates/server/src/routes/sessions/review.rs`** - Simplified the context building:
- Get workspace repos first (has repo names via `display_name`)
- For each repo, get initial commit
- Build context directly - no more HashMap joining, no more separate `Repo::find_by_ids` call
The new code is much easier to follow: get repos → for each, get initial commit → build context.
* Done. Addressed all 23 review comments:
1. Removed comment from `SessionChatBoxContainer.tsx` (line 161)
2. Removed doc comments from `RepoReviewContext` and `ReviewRequest` structs in `review.rs`
3. Removed module doc comment from `codex/review.rs`
4. Removed comment from `codex.rs` about Custom review target
5. Removed doc comments from `spawn_review` trait method in `mod.rs`
6. Removed doc comment from `build_review_prompt` function
7. Removed all comments from `sessions/review.rs` (doc comments and inline comments)
8. Removed unused `get_commits_since_branch` function from `git.rs` (~45 lines of dead code)
* Done. Added the review toggle button:
**Changes:**
1. **`SessionChatBox.tsx`**
- Added `ReviewModeProps` interface with `isActive`, `onToggle`, `isSubmitting`
- Added `reviewMode` prop to `SessionChatBoxProps`
- Added toggle button next to attach button (MagnifyingGlassIcon) - highlighted when active
- Updated placeholder to show "Enter review instructions..." when in review mode
- Removed old `onStartReview` and `isReviewStarting` from SessionProps
- Removed "Start Review" dropdown menu item
2. **`SessionChatBoxContainer.tsx`**
- Added `useState` for `isReviewMode`
- Updated `handleSend` to call `startReviewMutation` with `additionalPrompt` when in review mode
- Reset review mode after successful review start
- Pass `reviewMode` props to SessionChatBox
- Removed old `handleStartReview` callback
Now the user can:
1. Click the magnifying glass toggle next to attach
2. Enter review instructions in the text area
3. Click send → starts review with the prompt
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
TypeScript and Rust both compile. The changes are:
1. Button shows "Review" when review mode is active
2. Toggle icon uses `!text-accent-foreground` to force override the `text-low` class from the base component, along with `bg-accent rounded-sm` for the background highlight
Done. Changed `!text-accent-foreground` to `!text-normal` which uses the design system's proper text color for active/selected states. The `!` prefix forces the override of the base `text-low` class. Both TypeScript and Rust compile successfully.
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
All done. TypeScript and Rust compile successfully. Here's a summary of the changes:
**Created:**
- `frontend/src/components/dialogs/tasks/StartReviewDialog.tsx` - New dialog with:
- Agent/variant selection (using ExecutorProfileSelector)
- Review comments preview (if any)
- Additional instructions textarea
- Start Review / Cancel buttons
**Modified:**
- `frontend/src/components/dialogs/index.ts` - Added export for StartReviewDialog
- `frontend/src/components/ui-new/primitives/SessionChatBox.tsx`:
- Changed `ReviewModeProps` from toggle state to simple callback (`onReviewClick`, `isDisabled`)
- Removed toggle styling and review mode button text
- Button now just opens the dialog
- `frontend/src/components/ui-new/containers/SessionChatBoxContainer.tsx`:
- Removed `isReviewMode` state and `startReviewMutation`
- Added `handleReviewClick` callback that opens `StartReviewDialog`
- Disabled review button when in new session mode or no session exists
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
Done. TypeScript and Rust compile successfully. Summary of changes:
**`StartReviewDialog.tsx`:**
- Added "New Session" toggle (defaults ON when no session exists, disabled when no session to toggle from)
- Added conditional `AgentSelector` - only shown when creating a new session
- Always shows `ConfigSelector` for variant selection
- Handles session creation inline when toggle is on or no session exists
- Updated `onSuccess` callback to return new session ID when created
**`SessionChatBox.tsx`:**
- Removed `isDisabled` from `ReviewModeProps` interface
- Removed `reviewMode.isDisabled` from button disabled logic
**`SessionChatBoxContainer.tsx`:**
- Updated `handleReviewClick` to allow opening dialog without sessionId
- Updated `onSuccess` callback to select the new session if one was created
- Removed `isDisabled` from reviewMode prop
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
Done. Made `reviewMode` required and removed the conditional - the review button is now always shown.
Done. Now the StartReviewDialog:
- Shows `ExecutorProfileSelector` (Agent + Configuration side by side, like CreateAttemptDialog) when "New Session" toggle is ON
- Shows just `ConfigSelector` (variant only) when "New Session" toggle is OFF
TypeScript and Rust compile successfully. The Switch layout has been fixed to match the TaskFormDialog pattern:
- Switch is now on the LEFT of the label
- Uses `gap-2` instead of `justify-between`
- Has proper dark mode styling with `data-[state=checked]:bg-gray-900 dark:data-[state=checked]:bg-gray-100`
- Label has `cursor-pointer` for better UX
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
Done. The Switch is now moved to the footer (bottom of the dialog), matching the TaskFormDialog pattern:
- Switch on the left side of the footer
- Cancel and Start Review buttons on the right side
- Added `disabled:opacity-50` for better visibility when disabled in dark mode
Done. All changes complete:
1. **Removed header** - No more "Start Review" title or description
2. **Removed labels from selectors** - `showLabel={false}` for both `ExecutorProfileSelector` and `ConfigSelector`
3. **Fixed footer layout** - Cancel button on left, Switch + "New Session" + "Start Review" button grouped on right (matching TaskFormDialog)
4. **TypeScript compiles** - Both frontend and backend checks pass
Done. Changes made:
1. **Moved selector to bottom** - Now the order is: Additional Instructions textarea → Review comments preview → Error → Profile/Config selector → Footer
2. **Fixed Switch visibility** - Changed from `data-[state=checked]:bg-gray-900 dark:data-[state=checked]:bg-gray-100` to `bg-muted-foreground/30 data-[state=checked]:bg-foreground` using semantic colors
3. **TypeScript compiles** - Both frontend and backend checks pass
Done. The Switch className now uses `!` important modifiers to override the component's hardcoded background colors:
- `!bg-muted-foreground/30` - visible gray background when unchecked (overrides `bg-input`)
- `data-[state=checked]:!bg-foreground` - foreground color when checked (overrides `bg-foreground`)
Done. Changed the Switch className to use `!bg-muted` which should provide better contrast against the dialog's `bg-primary` background.
Done. Changed the Switch className to use `!bg-border` which should provide some contrast against the dialog's `bg-primary` background (25% lightness vs 18% lightness).
* Fix duplicate routes
* I've analyzed the problem. Here's my understanding:
**The issue:** After rebasing, stored commit SHAs (`after_head_commit`) become invalid because rebasing rewrites history with new SHAs.
**Your suggestion (`git diff A^..B`):** This still has the same problem - after rebase, commit `A` doesn't exist with that SHA anymore. `A^` requires resolving commit `A` first.
**My recommended fix:** Instead of using stored commit SHAs, use the **branch name** as the base:
- `git diff {target_branch}..HEAD` instead of `git diff {commit_sha}..HEAD`
- This is always valid regardless of rebasing
- Matches user intent: "show all changes on this workspace branch vs base"
This would require changes to:
1. `review.rs` - use `workspace.target_branch` instead of querying `find_first_commit_for_repo`
2. `build_review_prompt` - update to use branch name
3. `RepoReviewContext` - change `base_commit` to `base_branch`
**Questions:**
1. Is using `target_branch` the right base? Or do you need something more granular like "changes since session X"?
2. Should we keep `before_head_commit`/`after_head_commit` for per-execution tracking, or simplify?
* Done. Here's a summary of the changes:
## Changes Made
### 1. `crates/services/src/services/git/cli.rs`
- Made `merge_base` method public (was `fn`, now `pub fn`)
### 2. `crates/services/src/services/git.rs`
- Added new public method `get_fork_point()` that wraps the CLI `merge_base` function
- This method uses `git merge-base --fork-point` which survives rebasing by consulting the reflog
### 3. `crates/server/src/routes/sessions/review.rs`
- Removed import of `ExecutionProcessRepoState` (no longer needed)
- Added `PathBuf` import
- Changed from querying stored `after_head_commit` SHAs to computing fork-point dynamically
- Now uses `WorkspaceRepo::find_repos_with_target_branch_for_workspace` to get per-repo target branches
- Computes `get_fork_point(repo_path, target_branch, workspace.branch)` for each repo
## How It Works Now
Instead of storing commit SHAs that become invalid after rebasing:
```rust
// Old (broken after rebase):
let base_commit = ExecutionProcessRepoState::find_first_commit_for_repo(...)
```
We now compute the fork-point dynamically:
```rust
// New (survives rebasing):
let base_commit = deployment.git().get_fork_point(
&repo_path,
&repo.target_branch, // e.g., "main"
&workspace.branch, // e.g., "vk/task-123"
)
```
This uses `git merge-base --fork-point` which consults the reflog to find where the branch originally diverged, regardless of subsequent rebases.
* Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* Removed the unused `find_first_commit_for_repo` function. Everything still compiles.
* All comments removed and code still compiles.
* Fixed. The changes:
1. Added `effective_dir` method to `ReviewRequest` in `crates/executors/src/actions/review.rs`
2. Updated `container.rs` to use `request.effective_dir(&workspace_root)` instead of `workspace_root.clone()` for `ReviewRequest`
Now the log normalization for reviews will use the correct working directory, matching how the agent is actually spawned.
* Fixed. Now the workspace is re-fetched after `ensure_container_exists` to get the updated `container_ref`.
* Fixed. Now using the `container_ref` returned directly from `ensure_container_exists` instead of re-fetching the workspace.
* Fixed the naming:
- `workspace_path` - the container_ref path containing all repos
- `worktree_path` - the path to a specific repo's worktree within the workspace
* Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* Done. I've added an "Include git context" checkbox to the StartReviewDialog:
- Added state `includeGitContext` defaulting to `true`
- Added a checkbox UI with label "Include git context"
- The checkbox value is passed to the API as `use_all_workspace_commits`
The checkbox appears after the error message area and before the executor profile selector. Users will see it checked by default, making it clear that git context is being included without needing to add it themselves in the prompt.
* I've completed the i18n task. Here's a summary of what was done:
1. **Added i18n support to `StartReviewDialog.tsx`**:
- Imported `useTranslation` from `react-i18next`
- Replaced all hardcoded strings with translation keys:
- "Additional Instructions (optional)" → `t('startReviewDialog.additionalInstructions')`
- "Review Comments (...)" → `t('startReviewDialog.reviewComments', { count: ... })`
- "Include git context" → `t('startReviewDialog.includeGitContext')`
- "New Session" → `t('startReviewDialog.newSession')`
- "Cancel" → `t('common:buttons.cancel')`
- "Starting..." / "Start Review" → `t('actionsMenu.startingReview')` / `t('actionsMenu.startReview')`
2. **Added translations to all locale files** (`en`, `es`, `ja`, `ko`, `zh-Hans`, `zh-Hant`):
- Added `startReviewDialog` object with `additionalInstructions`, `reviewComments`, `includeGitContext`, and `newSession` keys
- Added `actionsMenu.startReview` and `actionsMenu.startingReview` to all non-English locales
3. **Verified with i18n check script**: All checks pass - no new literal strings introduced, no duplicate keys, and translation keys are consistent across all locales.
* Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* All checks pass. I've added a description below the "Include git context" checkbox:
**English:** "Tells the agent how to view all changes made on this branch"
The description appears as smaller muted text below the checkbox, explaining to users what the option does - it instructs the agent how to see all the changes on this branch (via the git diff command we inject). This helps users understand they don't need to manually ask the agent about branch changes.
* Done. Here's a summary of the changes:
1. **Replaced conditional rendering** with always showing both `AgentSelector` and `ConfigSelector`
2. **Agent selector is disabled** when `createNewSession` is false (locked to the session's executor)
3. **Fixed the variant retention bug** by adding `handleNewSessionChange` that resets `selectedProfile` to `defaultProfile` when toggling "New Session" off - this ensures the variant matches the locked executor
* Types
* Removed the unused `useStartReview` hook and its export from `hooks/index.ts`.
* All checks pass. Here's a summary of the changes made:
**`frontend/src/components/ui-new/actions/index.ts`:**
1. Added `HighlighterIcon` to the Phosphor icons import (line 33)
2. Added `StartReviewDialog` import (line 49)
3. Added `StartReview` action definition (lines 293-304) with:
- `id: 'start-review'`
- `label: 'Start Review'`
- `icon: HighlighterIcon`
- `requiresTarget: true`
- Visibility when workspace exists
- Execute function that opens `StartReviewDialog`
**`frontend/src/components/ui-new/actions/pages.ts`:**
1. Added `{ type: 'action', action: Actions.StartReview }` as the first item in the `workspaceActions` page group (line 105)
The "Start Review" action with the highlighter icon will now appear in the workspace actions menu (accessed via CMD+K or the three-dots menu on a workspace).
* All checks pass. Done. Here's a summary of the additional change:
**`frontend/src/components/ui-new/primitives/SessionChatBox.tsx`:**
- Changed `MagnifyingGlassIcon` to `HighlighterIcon` in the import (line 12)
- Updated the `ToolbarIconButton` to use `HighlighterIcon` instead of `MagnifyingGlassIcon` (line 635)
The review button in the text input now shows the highlighter icon instead of the magnifying glass.
* All checks pass. Here's a summary of the changes:
**`frontend/src/components/ui-new/primitives/Toolbar.tsx`:**
- Added proper disabled styling to `ToolbarIconButton` (`opacity-40 cursor-not-allowed`)
**`frontend/src/components/ui-new/primitives/SessionChatBox.tsx`:**
- Removed `HighlighterIcon` import (no longer hardcoded)
- Added `Icon` type import
- Replaced `ReviewModeProps` with generic `ToolbarActionProps` interface (`icon`, `label`, `onClick`)
- Changed `reviewMode` prop to `toolbarActions?: ToolbarActionProps[]`
- Updated footer to render toolbar actions dynamically from the array
**`frontend/src/components/ui-new/containers/SessionChatBoxContainer.tsx`:**
- Added `HighlighterIcon` import
- Changed `reviewMode` prop to `toolbarActions` array with the review action
The button is now:
1. Generic - accepts any action with icon/label/onClick
2. Shows proper disabled state (opacity + cursor)
3. Extensible - you can add more toolbar actions by adding to the array
* All checks pass. Now toolbar actions work identically to navbar actions:
**Summary of changes:**
1. **`SessionChatBox.tsx`**:
- Changed `toolbarActions` prop from simple `{icon, label, onClick}[]` to `{actions, context, onExecuteAction}` structure
- Uses `ActionDefinition[]` from the actions system
- Uses `isActionEnabled()` to derive disabled state from action context
- Uses `isSpecialIcon()` to filter out non-standard icons
- Handles `label` being either a string or function
2. **`SessionChatBoxContainer.tsx`**:
- Added `useActions()` and `useActionVisibilityContext()` hooks
- Created `handleToolbarAction` callback that routes actions through `executeAction`
- Created `toolbarActionsList` array containing `Actions.StartReview`
- Passes the full action context to `SessionChatBox`
Now adding a new action to the conversation input works the same as navbar:
```typescript
// Just add to the array
const toolbarActionsList = useMemo(
() => [Actions.StartReview, Actions.SomeOtherAction],
[]
);
```
The action's `isVisible`, `isEnabled`, icon, label, and execute logic all come from the central `Actions` definition in `index.ts`.
* Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* Done. The "Start Review" action with the highlighter icon now appears in both the navbar (left side) and the chat input toolbar.
* Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* Done. Removed `StartReview` from the navbar and added `ToggleChangesMode` to the conversation input toolbar alongside `StartReview`.
* Done.
* Removed the review-specific branch so the handler is generic, matching other containers. The toolbar action now just respects `requiresTarget`.
Details and context:
- Simplified the action handler in `frontend/src/components/ui-new/containers/SessionChatBoxContainer.tsx:444` to rely solely on the generic `action.requiresTarget` path.
- This aligns with `frontend/src/components/ui-new/containers/NavbarContainer.tsx:66`, where all actions flow through the same generic logic.
Next steps:
1) If you want, I can run a quick lint/typecheck on the frontend (`pnpm run check`) to confirm.
* Aligned the chatbox to use the shared visibility system, like the navbar, so action availability is handled by the same logic and execution stays generic.
Details and context:
- Filtered `toolbarActionsList` through `isActionVisible` with the shared `actionCtx` so Start Review only appears when it’s supposed to.
- Kept the execution handler generic so it just respects `requiresTarget`.
Files:
- `frontend/src/components/ui-new/containers/SessionChatBoxContainer.tsx`
Next steps:
1) If you want me to run a quick frontend typecheck (`pnpm run check`), say the word.
* Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* Updated the Start Review dialog so it derives the active session and a default executor profile from workspace context + config, which restores preselection and enables the “new session” toggle when a session exists. This keeps the chatbox action generic while fixing the dialog behavior.
Details and context:
- Added workspace context awareness and default profile derivation (mirrors Create Attempt’s logic).
- Uses the resolved session id to enable/disable the toggle and to decide whether a new session is required.
- Keeps user selection override behavior intact.
File:
- `frontend/src/components/dialogs/tasks/StartReviewDialog.tsx`
If you want, I can also add a quick regression check or walk through the UI flow with you.
* Fixed the lint issue and clippy qa-mode compile warning, then reran the requested commands. The Start Review dialog now uses `resolvedSessionId` consistently in its callback, and review log normalization handles qa-mode without unused vars.
Files updated:
- `frontend/src/components/dialogs/tasks/StartReviewDialog.tsx`
- `crates/services/src/services/container.rs`
Commands run:
- `npm run lint`
- `npm run format`
- `npm run check`
* Renamed the match binding to `_request` so we don’t need the no-op line, and removed the comment you flagged.
Notes:
- The `let _ = request;` was only there to silence an unused-var warning under the `qa-mode` cfg. Using `_request` is the standard way to mark it intentionally unused.
Files:
- `crates/services/src/services/container.rs`
- `frontend/src/components/ui-new/containers/SessionChatBoxContainer.tsx`
Want me to rerun `npm run lint` since this touched the linted files?
* Split the `ReviewRequest` arm by cfg so qa-mode uses `_request` and non-qa uses `request` normally—no dummy line needed.
File:
- `crates/services/src/services/container.rs`
* Done. The fix adds `ReviewRequest` to the match statement that creates `CodingAgentTurn` records. Now when a review is started, a `coding_agent_turn` row will be created with the review prompt, and the `agent_session_id` will be stored when Codex reports it. Subsequent follow-ups will find this session ID and correctly use `CodingAgentFollowUpRequest` instead of starting a fresh session.
* Done. Now if a new `ExecutorActionType` variant is added, the compiler will error on this match and force the developer to decide whether it should create a `CodingAgentTurn` record.
* Adjusted `sessionsApi.startReview` to return the unwrapped payload like other session calls, and aligned the `handleApiResponse` generic so callers get an `ExecutionProcess` instead of a misleading `ApiResponse`. This fixes the runtime mismatch and keeps the API consistent.
Updated `frontend/src/lib/api.ts`.
If you want, I can:
1) run `pnpm run check` to validate types, or
2) scan for any other session APIs with inconsistent `handleApiResponse` generics.
* All checks pass. Summary of changes:
1. **Removed tooltip from dialog button** - Dialog buttons don't use tooltips in this codebase
2. **Added `getTooltip` to the `StartReview` action definition** in `actions/index.ts` - This is the pattern used for action tooltips ("Ask the agent to review your changes")
3. **Removed `submitTooltip` from all locale files** since it's no longer used
4. **Added missing `title` and `description` to zh-Hant locale**
* Done. Now when a new session is created, the dialog will call `selectSession(targetSessionId)` to switch to the newly created session before closing.
2026-01-12 19:28:55 +00:00
|
|
|
HighlighterIcon,
|
2026-01-08 22:14:38 +00:00
|
|
|
} from '@phosphor-icons/react';
|
|
|
|
|
import { useDiffViewStore } from '@/stores/useDiffViewStore';
|
|
|
|
|
import { useUiPreferencesStore } from '@/stores/useUiPreferencesStore';
|
|
|
|
|
import { useLayoutStore } from '@/stores/useLayoutStore';
|
|
|
|
|
import { attemptsApi, tasksApi, repoApi } from '@/lib/api';
|
|
|
|
|
import { attemptKeys } from '@/hooks/useAttempt';
|
|
|
|
|
import { taskKeys } from '@/hooks/useTask';
|
|
|
|
|
import { workspaceSummaryKeys } from '@/components/ui-new/hooks/useWorkspaces';
|
|
|
|
|
import { ConfirmDialog } from '@/components/ui-new/dialogs/ConfirmDialog';
|
|
|
|
|
import { ChangeTargetDialog } from '@/components/ui-new/dialogs/ChangeTargetDialog';
|
|
|
|
|
import { RebaseDialog } from '@/components/ui-new/dialogs/RebaseDialog';
|
2026-01-09 10:06:29 +01:00
|
|
|
import { RenameWorkspaceDialog } from '@/components/ui-new/dialogs/RenameWorkspaceDialog';
|
2026-01-08 22:14:38 +00:00
|
|
|
import { CreatePRDialog } from '@/components/dialogs/tasks/CreatePRDialog';
|
|
|
|
|
import { getIdeName } from '@/components/ide/IdeIcon';
|
|
|
|
|
import { EditorSelectionDialog } from '@/components/dialogs/tasks/EditorSelectionDialog';
|
Add session-level review endpoint with StartReviewDialog (Vibe Kanban) (#1849)
* All checks pass. Let me provide a summary of what was implemented:
I've implemented the review endpoint as planned. Here's what was created:
1. **`crates/executors/src/actions/review.rs`** - New action type with:
- `RepoReviewContext` struct (repo_id + commit_hashes)
- `ReviewRequest` struct (executor_profile_id, context, additional_prompt, working_dir)
- `Executable` trait impl that calls `executor.spawn_review()`
2. **`crates/server/src/routes/task_attempts/review.rs`** - Endpoint handler with:
- `StartReviewRequest` for the API
- `RepoReviewContext` (endpoint-specific copy)
- `ReviewError::ProcessAlreadyRunning`
- `start_review` handler that:
- Verifies no running processes on workspace
- Creates fresh session
- Builds ReviewRequest action
- Starts execution with `ExecutionProcessRunReason::CodingAgent`
1. **`crates/executors/src/executors/mod.rs`**:
- Added `spawn_review()` to `StandardCodingAgentExecutor` trait with default prompt-based implementation
- Added `build_review_prompt()` helper function
2. **`crates/executors/src/actions/mod.rs`**:
- Added `pub mod review;`
- Added `ReviewRequest` to `ExecutorActionType` enum
- Updated `base_executor()` match
3. **`crates/services/src/services/container.rs`**:
- Updated match in `try_start_next_action` to handle `ReviewRequest`
4. **`crates/server/src/routes/task_attempts.rs`**:
- Added `pub mod review;`
- Added `.route("/review", post(review::start_review))`
5. **`crates/server/src/bin/generate_types.rs`**:
- Added new types to export list
**`POST /task-attempts/{id}/review`**
Request:
```json
{
"executor_profile_id": { "executor": "CLAUDE_CODE", "variant": null },
"context": [{ "repo_id": "uuid", "commit_hashes": ["abc123"] }],
"additional_prompt": "Focus on security issues"
}
```
Response: `ExecutionProcess` on success, `ReviewError` on failure.
To add native review for an executor (e.g., Codex), just override `spawn_review()` in that executor's `StandardCodingAgentExecutor` impl. No changes needed to action or endpoint.
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
All checks pass now. The duplicate type issue is fixed - we're using a single `RepoReviewContext` type from the executors crate.
All checks pass now. Both frontend lint (ESLint) and backend lint (Clippy) are passing.
Found and fixed the real issue. The problem was in `crates/services/src/services/container.rs` - the log normalization was only set up for `CodingAgentInitialRequest` and `CodingAgentFollowUpRequest`. `ReviewRequest` was falling through to the default case and returning `None`, so no normalizer was started for review processes.
Fixed in two places:
1. **Line 787-791**: Added `ReviewRequest` handling in `stream_normalized_logs` (for historic logs)
2. **Line 1149-1151**: Added `ReviewRequest` handling in `start_execution` (for live logs)
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* Backend changes for the `use_all_workspace_commits` flag are complete. Here's what was implemented:
Added `use_all_workspace_commits` flag to `StartReviewRequest` for automatically populating review context.
1. **`crates/db/src/models/execution_process_repo_state.rs`**
- Added `find_initial_commits_for_workspace()` - query to get the earliest `before_head_commit` for each repo in a workspace
2. **`crates/server/src/routes/task_attempts/review.rs`**
- Added `use_all_workspace_commits: bool` field to `StartReviewRequest` (defaults to `false`)
- When flag is `true` and `context` is `None`, auto-populates context with initial commits from workspace execution processes
3. **`crates/executors/src/executors/mod.rs`**
- Updated `build_review_prompt()` to detect single-commit context (indicating initial commit)
- When single commit per repo, prompts agent to "Review all changes made since the following base commit(s)" with git diff hint
4. **`crates/services/src/services/git.rs`**
- Added `get_commits_since_branch()` method (may be useful for future use)
5. **`shared/types.ts`**
- Generated TypeScript type includes `use_all_workspace_commits: boolean`
When frontend calls `POST /task-attempts/{id}/review` with:
```json
{
"executor_profile_id": { "executor": "CLAUDE_CODE", "variant": null },
"use_all_workspace_commits": true
}
```
The backend will:
1. Find the earliest execution process for the workspace
2. Get the `before_head_commit` for each repo (the commit before agents started making changes)
3. Pass that to the prompt builder which tells the agent to review all changes since that commit
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* Frontend UI implementation is complete. Here's a summary of what was added:
Added simple frontend UI to test the review endpoint.
1. **`frontend/src/lib/api.ts`**
- Added `startReview` method to `attemptsApi`
- Imports `StartReviewRequest`, `ReviewError` types
2. **`frontend/src/hooks/useStartReview.ts`** (NEW)
- Hook that calls `attemptsApi.startReview` with `use_all_workspace_commits: true`
- Invalidates `processes` and `branchStatus` queries on success
3. **`frontend/src/hooks/index.ts`**
- Exports `useStartReview`
4. **`frontend/src/components/ui/actions-dropdown.tsx`**
- Added "Start Review" menu item in the attempt actions section
- Uses the user's default executor profile from config
- Shows loading state while starting review
5. **`frontend/src/i18n/locales/en/tasks.json`**
- Added translation keys: `startReview`, `startingReview`
From the workspace actions dropdown (three dots menu), click "Start Review" to start a code review session using all workspace commits as context.
Done! The fix has been implemented. The review endpoint now uses `Session::find_latest_by_workspace_id` to find an existing session for the workspace, and only creates a new session if none exists. This means review logs will now appear in the same conversation view as other coding agent runs.
**Change summary:**
- Modified `crates/server/src/routes/task_attempts/review.rs` (lines 79-93)
- Instead of always creating a new session, it now checks for an existing session first using `Session::find_latest_by_workspace_id`
- This matches the pattern used by dev server, setup scripts, and other similar endpoints
Done! The fix is now in place. The change adds `ReviewRequest` to the action type filter in `useConversationHistory.ts` so review processes are included in the conversation view, and handles the content extraction appropriately (using `additional_prompt` for reviews instead of `prompt`).
**Change summary:**
- Modified `frontend/src/hooks/useConversationHistory.ts` (lines 226-244)
- Added `ReviewRequest` to the action type filter
- Used conditional to extract content from `additional_prompt` for reviews (with fallback "Review the code changes") vs `prompt` for coding agent requests
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
Done! All fixes are now in place:
1. **`useConversationHistory.ts` - `flattenEntries()`** (line 177-184): Added `ReviewRequest` to the filter so review processes are included in the flattened entries
2. **`useConversationHistory.ts` - `flattenEntriesForEmit()`** (line 226-244): Already fixed earlier - handles `ReviewRequest` and extracts `additional_prompt` for user message content
3. **`ProcessesTab.tsx`** (line 223-228): Added `ReviewRequest` to the ProfileVariantBadge conditional so the agent badge shows for review processes
* Done. Changes made:
1. **`crates/executors/src/actions/review.rs`**: Added `prompt: String` field to `ReviewRequest`
2. **`crates/server/src/routes/task_attempts/review.rs`**:
- Import `build_review_prompt`
- Build the full prompt from context and additional_prompt before creating the action
3. **`frontend/src/hooks/useConversationHistory.ts`**: Simplified content extraction to just use `actionType.prompt` for all action types (since `ReviewRequest` now has a prompt field too)
4. **Regenerated TypeScript types** - `ReviewRequest` in `shared/types.ts` now includes the `prompt` field
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* Done. Here's a summary of the changes:
**Backend:**
1. **`crates/executors/src/actions/review.rs`**:
- Added `CommitRange` enum with three variants: `FromBase`, `Specific`, and `Range`
- Updated `RepoReviewContext` to use `repo_name: String` and `commits: CommitRange` instead of `commit_hashes`
2. **`crates/executors/src/executors/mod.rs`**:
- Updated `build_review_prompt` to format output with repo names and handle all `CommitRange` variants
3. **`crates/server/src/routes/task_attempts/review.rs`**:
- Simplified `StartReviewRequest` (removed `context` field, kept `use_all_workspace_commits`)
- Updated handler to look up repo names via `Repo::find_by_ids` and use `CommitRange::FromBase`
4. **`crates/server/src/bin/generate_types.rs`**: Added `CommitRange` to exported types
**Frontend:**
- **`frontend/src/hooks/useStartReview.ts`**: Removed `context: null` since that field no longer exists
The prompt will now look like:
```
Please review the code changes.
Repository: vibe-kanban
Review all changes from base commit abc123 to HEAD.
Use `git diff abc123..HEAD` to see the changes.
```
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* Codex review support (vibe-kanban e7996a18)
## Context
We've added a review endpoint (\`POST /task-attempts/{id}/review\`) that starts a code review session. Currently it uses a default prompt-based implementation via \`spawn\_review()\` on \`StandardCodingAgentExecutor\`, which builds a prompt and delegates to \`spawn()\`.
## Goal
Implement native Codex review support by overriding \`spawn\_review()\` in the Codex executor to use Codex's native review mechanism instead of the prompt-based approach.
## Current Implementation
### Backend Types
\*\*\`CommitRange\` enum\*\* (\`crates/executors/src/actions/review.rs\`):
\`\`\`rust
pub enum CommitRange {
FromBase { commit: String },
Specific { commits: Vec<String> },
Range { from: String, to: String },
}
\`\`\`
\*\*\`RepoReviewContext\`\*\*:
\`\`\`rust
pub struct RepoReviewContext {
pub repo\_id: Uuid,
pub repo\_name: String,
pub commits: CommitRange,
}
\`\`\`
### Trait Method
\*\*\`spawn\_review()\`\*\* in \`StandardCodingAgentExecutor\` trait (\`crates/executors/src/executors/mod.rs\`):
\`\`\`rust
async fn spawn\_review(
&self,
current\_dir: &Path,
context: Option<&[RepoReviewContext]>,
additional\_prompt: Option<&str>,
env: &ExecutionEnv,
) -> Result<SpawnedChild, ExecutorError> {
// Default: build prompt and delegate to spawn()
let prompt = build\_review\_prompt(context, additional\_prompt);
self.spawn(current\_dir, &prompt, env).await
}
\`\`\`
## Tasks
1. Research Codex's native review API/mechanism (if it has one)
2. Override \`spawn\_review()\` in \`CodexExecutor\` to use native review if available
3. Fall back to prompt-based approach if native review isn't supported
* Done. Here's a summary of the changes:
1. **Removed dead code** from `crates/executors/src/executors/codex/review.rs`:
- Deleted the `map_to_review_target()` function (was ~120 lines)
- Removed unused imports (`CommitRange`, `RepoReviewContext`)
2. **Codex now uses `ReviewTarget::Custom`** with the pre-built prompt, which ensures the displayed prompt matches what Codex actually receives.
The build passes and TypeScript types have been regenerated.
* Use custom review target for codex
* Done. Here's a summary of the changes:
## Summary
Moved the review endpoint from workspace-level to session-level:
### Changes
1. **Created `crates/server/src/routes/sessions/review.rs`**
- New review endpoint at `POST /sessions/{id}/review`
- Takes `Extension<Session>` instead of `Extension<Workspace>`
- Looks up `agent_session_id` from previous executions using `find_latest_coding_agent_turn_session_id()`
- Passes `agent_session_id` to `ReviewAction` for session resumption
2. **Updated `crates/server/src/routes/sessions/mod.rs`**
- Added `pub mod review;`
- Added route `.route("/review", post(review::start_review))`
3. **Updated `crates/server/src/routes/task_attempts.rs`**
- Removed `pub mod review;`
- Removed `.route("/review", post(review::start_review))`
4. **Deleted `crates/server/src/routes/task_attempts/review.rs`**
5. **Updated `crates/server/src/bin/generate_types.rs`**
- Changed path from `task_attempts::review` to `sessions::review`
### API Change
- **Old**: `POST /api/task-attempts/{workspace_id}/review`
- **New**: `POST /api/sessions/{session_id}/review`
This ensures vk sessions and agent sessions are 1:1:
- Existing session → resumes agent session if available
- New session → fresh agent session
* Done! Here's a summary of all the frontend changes:
- Added `startReview` to `sessionsApi` using new endpoint `POST /api/sessions/${sessionId}/review`
- Removed `startReview` from `attemptsApi`
- Changed parameter from `attemptId` to `sessionId` and added optional `workspaceId` for query invalidation
- Changed API call from `attemptsApi.startReview` to `sessionsApi.startReview`
- Added `MagnifyingGlassIcon` import
- Added `onStartReview` and `isReviewStarting` to `SessionProps` interface
- Added "Start Review" menu item in the session dropdown
- Added `useStartReview` hook import and usage
- Added `handleStartReview` callback function
- Passed `onStartReview` and `isReviewStarting` to `SessionChatBox`
- Removed `useStartReview` import
- Removed `useUserSystem` import (now unused)
- Removed `startReview` hook usage
- Removed `handleStartReview` function
- Removed "Start Review" menu item from the dropdown
* Done. The fix adds the `ReviewRequest` case to `latest_executor_profile_for_session()` in `crates/db/src/models/execution_process.rs:688-690`.
The backend check passes. Follow-ups after reviews should now work correctly since the executor profile can be extracted from `ReviewRequest` just like from the other request types.
* Done. Removed `CommitRange` enum entirely. Changes:
1. **`crates/executors/src/actions/review.rs`** - Deleted `CommitRange` enum, changed `RepoReviewContext.commits` to `RepoReviewContext.base_commit: String`
2. **`crates/server/src/routes/sessions/review.rs`** - Updated construction to use `base_commit: initial_commit` instead of `commits: CommitRange::FromBase { commit: initial_commit }`
3. **`crates/executors/src/executors/mod.rs`** - Simplified `build_review_prompt()` to directly use `repo.base_commit` instead of matching on the enum
4. **`crates/server/src/bin/generate_types.rs`** - Removed `CommitRange::decl()` from type exports
5. **`shared/types.ts`** - Regenerated, `CommitRange` type is now gone
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* Done. Simplified the review context building:
**Changes:**
1. **`crates/db/src/models/execution_process_repo_state.rs`** - Replaced `find_initial_commits_for_workspace` with `find_initial_commit_for_repo` that takes a specific repo_id and uses ORDER BY + LIMIT 1 instead of GROUP BY/HAVING.
2. **`crates/server/src/routes/sessions/review.rs`** - Simplified the context building:
- Get workspace repos first (has repo names via `display_name`)
- For each repo, get initial commit
- Build context directly - no more HashMap joining, no more separate `Repo::find_by_ids` call
The new code is much easier to follow: get repos → for each, get initial commit → build context.
* Done. Addressed all 23 review comments:
1. Removed comment from `SessionChatBoxContainer.tsx` (line 161)
2. Removed doc comments from `RepoReviewContext` and `ReviewRequest` structs in `review.rs`
3. Removed module doc comment from `codex/review.rs`
4. Removed comment from `codex.rs` about Custom review target
5. Removed doc comments from `spawn_review` trait method in `mod.rs`
6. Removed doc comment from `build_review_prompt` function
7. Removed all comments from `sessions/review.rs` (doc comments and inline comments)
8. Removed unused `get_commits_since_branch` function from `git.rs` (~45 lines of dead code)
* Done. Added the review toggle button:
**Changes:**
1. **`SessionChatBox.tsx`**
- Added `ReviewModeProps` interface with `isActive`, `onToggle`, `isSubmitting`
- Added `reviewMode` prop to `SessionChatBoxProps`
- Added toggle button next to attach button (MagnifyingGlassIcon) - highlighted when active
- Updated placeholder to show "Enter review instructions..." when in review mode
- Removed old `onStartReview` and `isReviewStarting` from SessionProps
- Removed "Start Review" dropdown menu item
2. **`SessionChatBoxContainer.tsx`**
- Added `useState` for `isReviewMode`
- Updated `handleSend` to call `startReviewMutation` with `additionalPrompt` when in review mode
- Reset review mode after successful review start
- Pass `reviewMode` props to SessionChatBox
- Removed old `handleStartReview` callback
Now the user can:
1. Click the magnifying glass toggle next to attach
2. Enter review instructions in the text area
3. Click send → starts review with the prompt
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
TypeScript and Rust both compile. The changes are:
1. Button shows "Review" when review mode is active
2. Toggle icon uses `!text-accent-foreground` to force override the `text-low` class from the base component, along with `bg-accent rounded-sm` for the background highlight
Done. Changed `!text-accent-foreground` to `!text-normal` which uses the design system's proper text color for active/selected states. The `!` prefix forces the override of the base `text-low` class. Both TypeScript and Rust compile successfully.
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
All done. TypeScript and Rust compile successfully. Here's a summary of the changes:
**Created:**
- `frontend/src/components/dialogs/tasks/StartReviewDialog.tsx` - New dialog with:
- Agent/variant selection (using ExecutorProfileSelector)
- Review comments preview (if any)
- Additional instructions textarea
- Start Review / Cancel buttons
**Modified:**
- `frontend/src/components/dialogs/index.ts` - Added export for StartReviewDialog
- `frontend/src/components/ui-new/primitives/SessionChatBox.tsx`:
- Changed `ReviewModeProps` from toggle state to simple callback (`onReviewClick`, `isDisabled`)
- Removed toggle styling and review mode button text
- Button now just opens the dialog
- `frontend/src/components/ui-new/containers/SessionChatBoxContainer.tsx`:
- Removed `isReviewMode` state and `startReviewMutation`
- Added `handleReviewClick` callback that opens `StartReviewDialog`
- Disabled review button when in new session mode or no session exists
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
Done. TypeScript and Rust compile successfully. Summary of changes:
**`StartReviewDialog.tsx`:**
- Added "New Session" toggle (defaults ON when no session exists, disabled when no session to toggle from)
- Added conditional `AgentSelector` - only shown when creating a new session
- Always shows `ConfigSelector` for variant selection
- Handles session creation inline when toggle is on or no session exists
- Updated `onSuccess` callback to return new session ID when created
**`SessionChatBox.tsx`:**
- Removed `isDisabled` from `ReviewModeProps` interface
- Removed `reviewMode.isDisabled` from button disabled logic
**`SessionChatBoxContainer.tsx`:**
- Updated `handleReviewClick` to allow opening dialog without sessionId
- Updated `onSuccess` callback to select the new session if one was created
- Removed `isDisabled` from reviewMode prop
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
Done. Made `reviewMode` required and removed the conditional - the review button is now always shown.
Done. Now the StartReviewDialog:
- Shows `ExecutorProfileSelector` (Agent + Configuration side by side, like CreateAttemptDialog) when "New Session" toggle is ON
- Shows just `ConfigSelector` (variant only) when "New Session" toggle is OFF
TypeScript and Rust compile successfully. The Switch layout has been fixed to match the TaskFormDialog pattern:
- Switch is now on the LEFT of the label
- Uses `gap-2` instead of `justify-between`
- Has proper dark mode styling with `data-[state=checked]:bg-gray-900 dark:data-[state=checked]:bg-gray-100`
- Label has `cursor-pointer` for better UX
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
Done. The Switch is now moved to the footer (bottom of the dialog), matching the TaskFormDialog pattern:
- Switch on the left side of the footer
- Cancel and Start Review buttons on the right side
- Added `disabled:opacity-50` for better visibility when disabled in dark mode
Done. All changes complete:
1. **Removed header** - No more "Start Review" title or description
2. **Removed labels from selectors** - `showLabel={false}` for both `ExecutorProfileSelector` and `ConfigSelector`
3. **Fixed footer layout** - Cancel button on left, Switch + "New Session" + "Start Review" button grouped on right (matching TaskFormDialog)
4. **TypeScript compiles** - Both frontend and backend checks pass
Done. Changes made:
1. **Moved selector to bottom** - Now the order is: Additional Instructions textarea → Review comments preview → Error → Profile/Config selector → Footer
2. **Fixed Switch visibility** - Changed from `data-[state=checked]:bg-gray-900 dark:data-[state=checked]:bg-gray-100` to `bg-muted-foreground/30 data-[state=checked]:bg-foreground` using semantic colors
3. **TypeScript compiles** - Both frontend and backend checks pass
Done. The Switch className now uses `!` important modifiers to override the component's hardcoded background colors:
- `!bg-muted-foreground/30` - visible gray background when unchecked (overrides `bg-input`)
- `data-[state=checked]:!bg-foreground` - foreground color when checked (overrides `bg-foreground`)
Done. Changed the Switch className to use `!bg-muted` which should provide better contrast against the dialog's `bg-primary` background.
Done. Changed the Switch className to use `!bg-border` which should provide some contrast against the dialog's `bg-primary` background (25% lightness vs 18% lightness).
* Fix duplicate routes
* I've analyzed the problem. Here's my understanding:
**The issue:** After rebasing, stored commit SHAs (`after_head_commit`) become invalid because rebasing rewrites history with new SHAs.
**Your suggestion (`git diff A^..B`):** This still has the same problem - after rebase, commit `A` doesn't exist with that SHA anymore. `A^` requires resolving commit `A` first.
**My recommended fix:** Instead of using stored commit SHAs, use the **branch name** as the base:
- `git diff {target_branch}..HEAD` instead of `git diff {commit_sha}..HEAD`
- This is always valid regardless of rebasing
- Matches user intent: "show all changes on this workspace branch vs base"
This would require changes to:
1. `review.rs` - use `workspace.target_branch` instead of querying `find_first_commit_for_repo`
2. `build_review_prompt` - update to use branch name
3. `RepoReviewContext` - change `base_commit` to `base_branch`
**Questions:**
1. Is using `target_branch` the right base? Or do you need something more granular like "changes since session X"?
2. Should we keep `before_head_commit`/`after_head_commit` for per-execution tracking, or simplify?
* Done. Here's a summary of the changes:
## Changes Made
### 1. `crates/services/src/services/git/cli.rs`
- Made `merge_base` method public (was `fn`, now `pub fn`)
### 2. `crates/services/src/services/git.rs`
- Added new public method `get_fork_point()` that wraps the CLI `merge_base` function
- This method uses `git merge-base --fork-point` which survives rebasing by consulting the reflog
### 3. `crates/server/src/routes/sessions/review.rs`
- Removed import of `ExecutionProcessRepoState` (no longer needed)
- Added `PathBuf` import
- Changed from querying stored `after_head_commit` SHAs to computing fork-point dynamically
- Now uses `WorkspaceRepo::find_repos_with_target_branch_for_workspace` to get per-repo target branches
- Computes `get_fork_point(repo_path, target_branch, workspace.branch)` for each repo
## How It Works Now
Instead of storing commit SHAs that become invalid after rebasing:
```rust
// Old (broken after rebase):
let base_commit = ExecutionProcessRepoState::find_first_commit_for_repo(...)
```
We now compute the fork-point dynamically:
```rust
// New (survives rebasing):
let base_commit = deployment.git().get_fork_point(
&repo_path,
&repo.target_branch, // e.g., "main"
&workspace.branch, // e.g., "vk/task-123"
)
```
This uses `git merge-base --fork-point` which consults the reflog to find where the branch originally diverged, regardless of subsequent rebases.
* Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* Removed the unused `find_first_commit_for_repo` function. Everything still compiles.
* All comments removed and code still compiles.
* Fixed. The changes:
1. Added `effective_dir` method to `ReviewRequest` in `crates/executors/src/actions/review.rs`
2. Updated `container.rs` to use `request.effective_dir(&workspace_root)` instead of `workspace_root.clone()` for `ReviewRequest`
Now the log normalization for reviews will use the correct working directory, matching how the agent is actually spawned.
* Fixed. Now the workspace is re-fetched after `ensure_container_exists` to get the updated `container_ref`.
* Fixed. Now using the `container_ref` returned directly from `ensure_container_exists` instead of re-fetching the workspace.
* Fixed the naming:
- `workspace_path` - the container_ref path containing all repos
- `worktree_path` - the path to a specific repo's worktree within the workspace
* Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* Done. I've added an "Include git context" checkbox to the StartReviewDialog:
- Added state `includeGitContext` defaulting to `true`
- Added a checkbox UI with label "Include git context"
- The checkbox value is passed to the API as `use_all_workspace_commits`
The checkbox appears after the error message area and before the executor profile selector. Users will see it checked by default, making it clear that git context is being included without needing to add it themselves in the prompt.
* I've completed the i18n task. Here's a summary of what was done:
1. **Added i18n support to `StartReviewDialog.tsx`**:
- Imported `useTranslation` from `react-i18next`
- Replaced all hardcoded strings with translation keys:
- "Additional Instructions (optional)" → `t('startReviewDialog.additionalInstructions')`
- "Review Comments (...)" → `t('startReviewDialog.reviewComments', { count: ... })`
- "Include git context" → `t('startReviewDialog.includeGitContext')`
- "New Session" → `t('startReviewDialog.newSession')`
- "Cancel" → `t('common:buttons.cancel')`
- "Starting..." / "Start Review" → `t('actionsMenu.startingReview')` / `t('actionsMenu.startReview')`
2. **Added translations to all locale files** (`en`, `es`, `ja`, `ko`, `zh-Hans`, `zh-Hant`):
- Added `startReviewDialog` object with `additionalInstructions`, `reviewComments`, `includeGitContext`, and `newSession` keys
- Added `actionsMenu.startReview` and `actionsMenu.startingReview` to all non-English locales
3. **Verified with i18n check script**: All checks pass - no new literal strings introduced, no duplicate keys, and translation keys are consistent across all locales.
* Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* All checks pass. I've added a description below the "Include git context" checkbox:
**English:** "Tells the agent how to view all changes made on this branch"
The description appears as smaller muted text below the checkbox, explaining to users what the option does - it instructs the agent how to see all the changes on this branch (via the git diff command we inject). This helps users understand they don't need to manually ask the agent about branch changes.
* Done. Here's a summary of the changes:
1. **Replaced conditional rendering** with always showing both `AgentSelector` and `ConfigSelector`
2. **Agent selector is disabled** when `createNewSession` is false (locked to the session's executor)
3. **Fixed the variant retention bug** by adding `handleNewSessionChange` that resets `selectedProfile` to `defaultProfile` when toggling "New Session" off - this ensures the variant matches the locked executor
* Types
* Removed the unused `useStartReview` hook and its export from `hooks/index.ts`.
* All checks pass. Here's a summary of the changes made:
**`frontend/src/components/ui-new/actions/index.ts`:**
1. Added `HighlighterIcon` to the Phosphor icons import (line 33)
2. Added `StartReviewDialog` import (line 49)
3. Added `StartReview` action definition (lines 293-304) with:
- `id: 'start-review'`
- `label: 'Start Review'`
- `icon: HighlighterIcon`
- `requiresTarget: true`
- Visibility when workspace exists
- Execute function that opens `StartReviewDialog`
**`frontend/src/components/ui-new/actions/pages.ts`:**
1. Added `{ type: 'action', action: Actions.StartReview }` as the first item in the `workspaceActions` page group (line 105)
The "Start Review" action with the highlighter icon will now appear in the workspace actions menu (accessed via CMD+K or the three-dots menu on a workspace).
* All checks pass. Done. Here's a summary of the additional change:
**`frontend/src/components/ui-new/primitives/SessionChatBox.tsx`:**
- Changed `MagnifyingGlassIcon` to `HighlighterIcon` in the import (line 12)
- Updated the `ToolbarIconButton` to use `HighlighterIcon` instead of `MagnifyingGlassIcon` (line 635)
The review button in the text input now shows the highlighter icon instead of the magnifying glass.
* All checks pass. Here's a summary of the changes:
**`frontend/src/components/ui-new/primitives/Toolbar.tsx`:**
- Added proper disabled styling to `ToolbarIconButton` (`opacity-40 cursor-not-allowed`)
**`frontend/src/components/ui-new/primitives/SessionChatBox.tsx`:**
- Removed `HighlighterIcon` import (no longer hardcoded)
- Added `Icon` type import
- Replaced `ReviewModeProps` with generic `ToolbarActionProps` interface (`icon`, `label`, `onClick`)
- Changed `reviewMode` prop to `toolbarActions?: ToolbarActionProps[]`
- Updated footer to render toolbar actions dynamically from the array
**`frontend/src/components/ui-new/containers/SessionChatBoxContainer.tsx`:**
- Added `HighlighterIcon` import
- Changed `reviewMode` prop to `toolbarActions` array with the review action
The button is now:
1. Generic - accepts any action with icon/label/onClick
2. Shows proper disabled state (opacity + cursor)
3. Extensible - you can add more toolbar actions by adding to the array
* All checks pass. Now toolbar actions work identically to navbar actions:
**Summary of changes:**
1. **`SessionChatBox.tsx`**:
- Changed `toolbarActions` prop from simple `{icon, label, onClick}[]` to `{actions, context, onExecuteAction}` structure
- Uses `ActionDefinition[]` from the actions system
- Uses `isActionEnabled()` to derive disabled state from action context
- Uses `isSpecialIcon()` to filter out non-standard icons
- Handles `label` being either a string or function
2. **`SessionChatBoxContainer.tsx`**:
- Added `useActions()` and `useActionVisibilityContext()` hooks
- Created `handleToolbarAction` callback that routes actions through `executeAction`
- Created `toolbarActionsList` array containing `Actions.StartReview`
- Passes the full action context to `SessionChatBox`
Now adding a new action to the conversation input works the same as navbar:
```typescript
// Just add to the array
const toolbarActionsList = useMemo(
() => [Actions.StartReview, Actions.SomeOtherAction],
[]
);
```
The action's `isVisible`, `isEnabled`, icon, label, and execute logic all come from the central `Actions` definition in `index.ts`.
* Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* Done. The "Start Review" action with the highlighter icon now appears in both the navbar (left side) and the chat input toolbar.
* Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* Done. Removed `StartReview` from the navbar and added `ToggleChangesMode` to the conversation input toolbar alongside `StartReview`.
* Done.
* Removed the review-specific branch so the handler is generic, matching other containers. The toolbar action now just respects `requiresTarget`.
Details and context:
- Simplified the action handler in `frontend/src/components/ui-new/containers/SessionChatBoxContainer.tsx:444` to rely solely on the generic `action.requiresTarget` path.
- This aligns with `frontend/src/components/ui-new/containers/NavbarContainer.tsx:66`, where all actions flow through the same generic logic.
Next steps:
1) If you want, I can run a quick lint/typecheck on the frontend (`pnpm run check`) to confirm.
* Aligned the chatbox to use the shared visibility system, like the navbar, so action availability is handled by the same logic and execution stays generic.
Details and context:
- Filtered `toolbarActionsList` through `isActionVisible` with the shared `actionCtx` so Start Review only appears when it’s supposed to.
- Kept the execution handler generic so it just respects `requiresTarget`.
Files:
- `frontend/src/components/ui-new/containers/SessionChatBoxContainer.tsx`
Next steps:
1) If you want me to run a quick frontend typecheck (`pnpm run check`), say the word.
* Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* Updated the Start Review dialog so it derives the active session and a default executor profile from workspace context + config, which restores preselection and enables the “new session” toggle when a session exists. This keeps the chatbox action generic while fixing the dialog behavior.
Details and context:
- Added workspace context awareness and default profile derivation (mirrors Create Attempt’s logic).
- Uses the resolved session id to enable/disable the toggle and to decide whether a new session is required.
- Keeps user selection override behavior intact.
File:
- `frontend/src/components/dialogs/tasks/StartReviewDialog.tsx`
If you want, I can also add a quick regression check or walk through the UI flow with you.
* Fixed the lint issue and clippy qa-mode compile warning, then reran the requested commands. The Start Review dialog now uses `resolvedSessionId` consistently in its callback, and review log normalization handles qa-mode without unused vars.
Files updated:
- `frontend/src/components/dialogs/tasks/StartReviewDialog.tsx`
- `crates/services/src/services/container.rs`
Commands run:
- `npm run lint`
- `npm run format`
- `npm run check`
* Renamed the match binding to `_request` so we don’t need the no-op line, and removed the comment you flagged.
Notes:
- The `let _ = request;` was only there to silence an unused-var warning under the `qa-mode` cfg. Using `_request` is the standard way to mark it intentionally unused.
Files:
- `crates/services/src/services/container.rs`
- `frontend/src/components/ui-new/containers/SessionChatBoxContainer.tsx`
Want me to rerun `npm run lint` since this touched the linted files?
* Split the `ReviewRequest` arm by cfg so qa-mode uses `_request` and non-qa uses `request` normally—no dummy line needed.
File:
- `crates/services/src/services/container.rs`
* Done. The fix adds `ReviewRequest` to the match statement that creates `CodingAgentTurn` records. Now when a review is started, a `coding_agent_turn` row will be created with the review prompt, and the `agent_session_id` will be stored when Codex reports it. Subsequent follow-ups will find this session ID and correctly use `CodingAgentFollowUpRequest` instead of starting a fresh session.
* Done. Now if a new `ExecutorActionType` variant is added, the compiler will error on this match and force the developer to decide whether it should create a `CodingAgentTurn` record.
* Adjusted `sessionsApi.startReview` to return the unwrapped payload like other session calls, and aligned the `handleApiResponse` generic so callers get an `ExecutionProcess` instead of a misleading `ApiResponse`. This fixes the runtime mismatch and keeps the API consistent.
Updated `frontend/src/lib/api.ts`.
If you want, I can:
1) run `pnpm run check` to validate types, or
2) scan for any other session APIs with inconsistent `handleApiResponse` generics.
* All checks pass. Summary of changes:
1. **Removed tooltip from dialog button** - Dialog buttons don't use tooltips in this codebase
2. **Added `getTooltip` to the `StartReview` action definition** in `actions/index.ts` - This is the pattern used for action tooltips ("Ask the agent to review your changes")
3. **Removed `submitTooltip` from all locale files** since it's no longer used
4. **Added missing `title` and `description` to zh-Hant locale**
* Done. Now when a new session is created, the dialog will call `selectSession(targetSessionId)` to switch to the newly created session before closing.
2026-01-12 19:28:55 +00:00
|
|
|
import { StartReviewDialog } from '@/components/dialogs/tasks/StartReviewDialog';
|
2026-01-08 22:14:38 +00:00
|
|
|
|
|
|
|
|
// Special icon types for ContextBar
|
|
|
|
|
export type SpecialIconType = 'ide-icon' | 'copy-icon';
|
|
|
|
|
export type ActionIcon = Icon | SpecialIconType;
|
|
|
|
|
|
|
|
|
|
// Workspace type for sidebar (minimal subset needed for workspace selection)
|
|
|
|
|
interface SidebarWorkspace {
|
|
|
|
|
id: string;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Dev server state type for visibility context
|
|
|
|
|
export type DevServerState = 'stopped' | 'starting' | 'running' | 'stopping';
|
|
|
|
|
|
|
|
|
|
// Context provided to action executors (from React hooks)
|
|
|
|
|
export interface ActionExecutorContext {
|
|
|
|
|
navigate: NavigateFunction;
|
|
|
|
|
queryClient: QueryClient;
|
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
2026-01-09 16:25:42 +00:00
|
|
|
selectWorkspace: (workspaceId: string) => void;
|
|
|
|
|
activeWorkspaces: SidebarWorkspace[];
|
|
|
|
|
currentWorkspaceId: string | null;
|
|
|
|
|
containerRef: string | null;
|
2026-01-11 08:03:19 +00:00
|
|
|
runningDevServers: ExecutionProcess[];
|
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
2026-01-09 16:25:42 +00:00
|
|
|
startDevServer: () => void;
|
|
|
|
|
stopDevServer: () => void;
|
2026-01-08 22:14:38 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Context for evaluating action visibility and state conditions
|
|
|
|
|
export interface ActionVisibilityContext {
|
|
|
|
|
// Layout state
|
|
|
|
|
isChangesMode: boolean;
|
|
|
|
|
isLogsMode: boolean;
|
|
|
|
|
isPreviewMode: boolean;
|
|
|
|
|
isSidebarVisible: boolean;
|
|
|
|
|
isMainPanelVisible: boolean;
|
|
|
|
|
isGitPanelVisible: boolean;
|
|
|
|
|
isCreateMode: boolean;
|
|
|
|
|
|
|
|
|
|
// Workspace state
|
|
|
|
|
hasWorkspace: boolean;
|
|
|
|
|
workspaceArchived: boolean;
|
|
|
|
|
|
|
|
|
|
// Diff state
|
|
|
|
|
hasDiffs: boolean;
|
|
|
|
|
diffViewMode: DiffViewMode;
|
|
|
|
|
isAllDiffsExpanded: boolean;
|
|
|
|
|
|
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
2026-01-09 16:25:42 +00:00
|
|
|
// Dev server state
|
|
|
|
|
editorType: EditorType | null;
|
|
|
|
|
devServerState: DevServerState;
|
2026-01-11 08:03:19 +00:00
|
|
|
runningDevServers: ExecutionProcess[];
|
2026-01-08 22:14:38 +00:00
|
|
|
|
|
|
|
|
// Git panel state
|
|
|
|
|
hasGitRepos: boolean;
|
|
|
|
|
hasMultipleRepos: boolean;
|
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>
2026-01-12 15:13:57 +01:00
|
|
|
hasOpenPR: boolean;
|
|
|
|
|
hasUnpushedCommits: boolean;
|
2026-01-12 21:00:47 +00:00
|
|
|
|
|
|
|
|
// Execution state
|
|
|
|
|
isAttemptRunning: boolean;
|
2026-01-08 22:14:38 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Base properties shared by all actions
|
|
|
|
|
interface ActionBase {
|
|
|
|
|
id: string;
|
|
|
|
|
label: string | ((workspace?: Workspace) => string);
|
|
|
|
|
icon: ActionIcon;
|
|
|
|
|
shortcut?: string;
|
|
|
|
|
variant?: 'default' | 'destructive';
|
|
|
|
|
// Optional visibility condition - if omitted, action is always visible
|
|
|
|
|
isVisible?: (ctx: ActionVisibilityContext) => boolean;
|
|
|
|
|
// Optional active state - if omitted, action is not active
|
|
|
|
|
isActive?: (ctx: ActionVisibilityContext) => boolean;
|
|
|
|
|
// Optional enabled state - if omitted, action is enabled
|
|
|
|
|
isEnabled?: (ctx: ActionVisibilityContext) => boolean;
|
|
|
|
|
// Optional dynamic icon - if omitted, uses static icon property
|
|
|
|
|
getIcon?: (ctx: ActionVisibilityContext) => ActionIcon;
|
|
|
|
|
// Optional dynamic tooltip - if omitted, uses label
|
|
|
|
|
getTooltip?: (ctx: ActionVisibilityContext) => string;
|
|
|
|
|
// Optional dynamic label - if omitted, uses static label property
|
|
|
|
|
getLabel?: (ctx: ActionVisibilityContext) => string;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Global action (no target needed)
|
|
|
|
|
export interface GlobalActionDefinition extends ActionBase {
|
|
|
|
|
requiresTarget: false;
|
|
|
|
|
execute: (ctx: ActionExecutorContext) => Promise<void> | void;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Workspace action (target required - validated by ActionsContext)
|
|
|
|
|
export interface WorkspaceActionDefinition extends ActionBase {
|
|
|
|
|
requiresTarget: true;
|
|
|
|
|
execute: (
|
|
|
|
|
ctx: ActionExecutorContext,
|
|
|
|
|
workspaceId: string
|
|
|
|
|
) => Promise<void> | void;
|
|
|
|
|
}
|
|
|
|
|
|
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
2026-01-09 16:25:42 +00:00
|
|
|
// Git action (requires workspace + repoId)
|
|
|
|
|
export interface GitActionDefinition extends ActionBase {
|
|
|
|
|
requiresTarget: 'git';
|
|
|
|
|
execute: (
|
|
|
|
|
ctx: ActionExecutorContext,
|
|
|
|
|
workspaceId: string,
|
|
|
|
|
repoId: string
|
|
|
|
|
) => Promise<void> | void;
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-08 22:14:38 +00:00
|
|
|
// Discriminated union
|
|
|
|
|
export type ActionDefinition =
|
|
|
|
|
| GlobalActionDefinition
|
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
2026-01-09 16:25:42 +00:00
|
|
|
| WorkspaceActionDefinition
|
|
|
|
|
| GitActionDefinition;
|
2026-01-08 22:14:38 +00:00
|
|
|
|
2026-01-12 23:02:56 +00:00
|
|
|
// Helper to get workspace from query cache or fetch from API
|
|
|
|
|
async function getWorkspace(
|
2026-01-08 22:14:38 +00:00
|
|
|
queryClient: QueryClient,
|
|
|
|
|
workspaceId: string
|
2026-01-12 23:02:56 +00:00
|
|
|
): Promise<Workspace> {
|
|
|
|
|
const cached = queryClient.getQueryData<Workspace>(
|
2026-01-08 22:14:38 +00:00
|
|
|
attemptKeys.byId(workspaceId)
|
|
|
|
|
);
|
2026-01-12 23:02:56 +00:00
|
|
|
if (cached) {
|
|
|
|
|
return cached;
|
2026-01-08 22:14:38 +00:00
|
|
|
}
|
2026-01-12 23:02:56 +00:00
|
|
|
// Fetch from API if not in cache
|
|
|
|
|
return attemptsApi.get(workspaceId);
|
2026-01-08 22:14:38 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Helper to invalidate workspace-related queries
|
|
|
|
|
function invalidateWorkspaceQueries(
|
|
|
|
|
queryClient: QueryClient,
|
|
|
|
|
workspaceId: string
|
|
|
|
|
) {
|
|
|
|
|
queryClient.invalidateQueries({ queryKey: attemptKeys.byId(workspaceId) });
|
|
|
|
|
queryClient.invalidateQueries({ queryKey: workspaceSummaryKeys.all });
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-12 23:39:42 +00:00
|
|
|
// Helper to find the next workspace to navigate to when removing current workspace
|
|
|
|
|
function getNextWorkspaceId(
|
|
|
|
|
activeWorkspaces: SidebarWorkspace[],
|
|
|
|
|
removingWorkspaceId: string
|
|
|
|
|
): string | null {
|
|
|
|
|
const currentIndex = activeWorkspaces.findIndex(
|
|
|
|
|
(ws) => ws.id === removingWorkspaceId
|
|
|
|
|
);
|
|
|
|
|
if (currentIndex >= 0 && activeWorkspaces.length > 1) {
|
|
|
|
|
const nextWorkspace =
|
|
|
|
|
activeWorkspaces[currentIndex + 1] || activeWorkspaces[currentIndex - 1];
|
|
|
|
|
return nextWorkspace?.id ?? null;
|
|
|
|
|
}
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-08 22:14:38 +00:00
|
|
|
// All application actions
|
|
|
|
|
export const Actions = {
|
|
|
|
|
// === Workspace Actions ===
|
|
|
|
|
DuplicateWorkspace: {
|
|
|
|
|
id: 'duplicate-workspace',
|
|
|
|
|
label: 'Duplicate',
|
|
|
|
|
icon: CopyIcon,
|
|
|
|
|
requiresTarget: true,
|
|
|
|
|
execute: async (ctx, workspaceId) => {
|
|
|
|
|
try {
|
|
|
|
|
const firstMessage = await attemptsApi.getFirstUserMessage(workspaceId);
|
|
|
|
|
ctx.navigate('/workspaces/create', {
|
|
|
|
|
state: { duplicatePrompt: firstMessage },
|
|
|
|
|
});
|
|
|
|
|
} catch {
|
|
|
|
|
// Fallback to creating without the prompt
|
|
|
|
|
ctx.navigate('/workspaces/create');
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
2026-01-09 10:06:29 +01:00
|
|
|
RenameWorkspace: {
|
|
|
|
|
id: 'rename-workspace',
|
|
|
|
|
label: 'Rename',
|
|
|
|
|
icon: PencilSimpleIcon,
|
|
|
|
|
requiresTarget: true,
|
|
|
|
|
execute: async (ctx, workspaceId) => {
|
2026-01-12 23:02:56 +00:00
|
|
|
const workspace = await getWorkspace(ctx.queryClient, workspaceId);
|
2026-01-09 10:06:29 +01:00
|
|
|
await RenameWorkspaceDialog.show({
|
|
|
|
|
workspaceId,
|
|
|
|
|
currentName: workspace.name || workspace.branch,
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
2026-01-08 22:14:38 +00:00
|
|
|
PinWorkspace: {
|
|
|
|
|
id: 'pin-workspace',
|
|
|
|
|
label: (workspace?: Workspace) => (workspace?.pinned ? 'Unpin' : 'Pin'),
|
|
|
|
|
icon: PushPinIcon,
|
|
|
|
|
requiresTarget: true,
|
|
|
|
|
execute: async (ctx, workspaceId) => {
|
2026-01-12 23:02:56 +00:00
|
|
|
const workspace = await getWorkspace(ctx.queryClient, workspaceId);
|
2026-01-08 22:14:38 +00:00
|
|
|
await attemptsApi.update(workspaceId, {
|
|
|
|
|
pinned: !workspace.pinned,
|
|
|
|
|
});
|
|
|
|
|
invalidateWorkspaceQueries(ctx.queryClient, workspaceId);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
ArchiveWorkspace: {
|
|
|
|
|
id: 'archive-workspace',
|
|
|
|
|
label: (workspace?: Workspace) =>
|
|
|
|
|
workspace?.archived ? 'Unarchive' : 'Archive',
|
|
|
|
|
icon: ArchiveIcon,
|
|
|
|
|
requiresTarget: true,
|
|
|
|
|
isVisible: (ctx) => ctx.hasWorkspace,
|
|
|
|
|
isActive: (ctx) => ctx.workspaceArchived,
|
|
|
|
|
execute: async (ctx, workspaceId) => {
|
2026-01-12 23:02:56 +00:00
|
|
|
const workspace = await getWorkspace(ctx.queryClient, workspaceId);
|
2026-01-08 22:14:38 +00:00
|
|
|
const wasArchived = workspace.archived;
|
|
|
|
|
|
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
2026-01-09 16:25:42 +00:00
|
|
|
// Calculate next workspace before archiving
|
2026-01-12 23:39:42 +00:00
|
|
|
const nextWorkspaceId = !wasArchived
|
|
|
|
|
? getNextWorkspaceId(ctx.activeWorkspaces, workspaceId)
|
|
|
|
|
: null;
|
2026-01-08 22:14:38 +00:00
|
|
|
|
|
|
|
|
// Perform the archive/unarchive
|
|
|
|
|
await attemptsApi.update(workspaceId, { archived: !wasArchived });
|
|
|
|
|
invalidateWorkspaceQueries(ctx.queryClient, workspaceId);
|
|
|
|
|
|
|
|
|
|
// Select next workspace after successful archive
|
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
2026-01-09 16:25:42 +00:00
|
|
|
if (!wasArchived && nextWorkspaceId) {
|
2026-01-08 22:14:38 +00:00
|
|
|
ctx.selectWorkspace(nextWorkspaceId);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
DeleteWorkspace: {
|
|
|
|
|
id: 'delete-workspace',
|
|
|
|
|
label: 'Delete',
|
|
|
|
|
icon: TrashIcon,
|
|
|
|
|
variant: 'destructive',
|
|
|
|
|
requiresTarget: true,
|
|
|
|
|
execute: async (ctx, workspaceId) => {
|
2026-01-12 23:02:56 +00:00
|
|
|
const workspace = await getWorkspace(ctx.queryClient, workspaceId);
|
2026-01-08 22:14:38 +00:00
|
|
|
const result = await ConfirmDialog.show({
|
|
|
|
|
title: 'Delete Workspace',
|
|
|
|
|
message:
|
|
|
|
|
'Are you sure you want to delete this workspace? This action cannot be undone.',
|
|
|
|
|
confirmText: 'Delete',
|
|
|
|
|
cancelText: 'Cancel',
|
|
|
|
|
variant: 'destructive',
|
|
|
|
|
});
|
|
|
|
|
if (result === 'confirmed') {
|
2026-01-12 23:39:42 +00:00
|
|
|
// Calculate next workspace before deleting (only if deleting current)
|
|
|
|
|
const isCurrentWorkspace = ctx.currentWorkspaceId === workspaceId;
|
|
|
|
|
const nextWorkspaceId = isCurrentWorkspace
|
|
|
|
|
? getNextWorkspaceId(ctx.activeWorkspaces, workspaceId)
|
|
|
|
|
: null;
|
|
|
|
|
|
2026-01-08 22:14:38 +00:00
|
|
|
await tasksApi.delete(workspace.task_id);
|
|
|
|
|
ctx.queryClient.invalidateQueries({ queryKey: taskKeys.all });
|
|
|
|
|
ctx.queryClient.invalidateQueries({
|
|
|
|
|
queryKey: workspaceSummaryKeys.all,
|
|
|
|
|
});
|
2026-01-12 23:39:42 +00:00
|
|
|
|
|
|
|
|
// Navigate away if we deleted the current workspace
|
|
|
|
|
if (isCurrentWorkspace) {
|
|
|
|
|
if (nextWorkspaceId) {
|
|
|
|
|
ctx.selectWorkspace(nextWorkspaceId);
|
|
|
|
|
} else {
|
|
|
|
|
ctx.navigate('/workspaces/create');
|
|
|
|
|
}
|
|
|
|
|
}
|
2026-01-08 22:14:38 +00:00
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
Add session-level review endpoint with StartReviewDialog (Vibe Kanban) (#1849)
* All checks pass. Let me provide a summary of what was implemented:
I've implemented the review endpoint as planned. Here's what was created:
1. **`crates/executors/src/actions/review.rs`** - New action type with:
- `RepoReviewContext` struct (repo_id + commit_hashes)
- `ReviewRequest` struct (executor_profile_id, context, additional_prompt, working_dir)
- `Executable` trait impl that calls `executor.spawn_review()`
2. **`crates/server/src/routes/task_attempts/review.rs`** - Endpoint handler with:
- `StartReviewRequest` for the API
- `RepoReviewContext` (endpoint-specific copy)
- `ReviewError::ProcessAlreadyRunning`
- `start_review` handler that:
- Verifies no running processes on workspace
- Creates fresh session
- Builds ReviewRequest action
- Starts execution with `ExecutionProcessRunReason::CodingAgent`
1. **`crates/executors/src/executors/mod.rs`**:
- Added `spawn_review()` to `StandardCodingAgentExecutor` trait with default prompt-based implementation
- Added `build_review_prompt()` helper function
2. **`crates/executors/src/actions/mod.rs`**:
- Added `pub mod review;`
- Added `ReviewRequest` to `ExecutorActionType` enum
- Updated `base_executor()` match
3. **`crates/services/src/services/container.rs`**:
- Updated match in `try_start_next_action` to handle `ReviewRequest`
4. **`crates/server/src/routes/task_attempts.rs`**:
- Added `pub mod review;`
- Added `.route("/review", post(review::start_review))`
5. **`crates/server/src/bin/generate_types.rs`**:
- Added new types to export list
**`POST /task-attempts/{id}/review`**
Request:
```json
{
"executor_profile_id": { "executor": "CLAUDE_CODE", "variant": null },
"context": [{ "repo_id": "uuid", "commit_hashes": ["abc123"] }],
"additional_prompt": "Focus on security issues"
}
```
Response: `ExecutionProcess` on success, `ReviewError` on failure.
To add native review for an executor (e.g., Codex), just override `spawn_review()` in that executor's `StandardCodingAgentExecutor` impl. No changes needed to action or endpoint.
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
All checks pass now. The duplicate type issue is fixed - we're using a single `RepoReviewContext` type from the executors crate.
All checks pass now. Both frontend lint (ESLint) and backend lint (Clippy) are passing.
Found and fixed the real issue. The problem was in `crates/services/src/services/container.rs` - the log normalization was only set up for `CodingAgentInitialRequest` and `CodingAgentFollowUpRequest`. `ReviewRequest` was falling through to the default case and returning `None`, so no normalizer was started for review processes.
Fixed in two places:
1. **Line 787-791**: Added `ReviewRequest` handling in `stream_normalized_logs` (for historic logs)
2. **Line 1149-1151**: Added `ReviewRequest` handling in `start_execution` (for live logs)
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* Backend changes for the `use_all_workspace_commits` flag are complete. Here's what was implemented:
Added `use_all_workspace_commits` flag to `StartReviewRequest` for automatically populating review context.
1. **`crates/db/src/models/execution_process_repo_state.rs`**
- Added `find_initial_commits_for_workspace()` - query to get the earliest `before_head_commit` for each repo in a workspace
2. **`crates/server/src/routes/task_attempts/review.rs`**
- Added `use_all_workspace_commits: bool` field to `StartReviewRequest` (defaults to `false`)
- When flag is `true` and `context` is `None`, auto-populates context with initial commits from workspace execution processes
3. **`crates/executors/src/executors/mod.rs`**
- Updated `build_review_prompt()` to detect single-commit context (indicating initial commit)
- When single commit per repo, prompts agent to "Review all changes made since the following base commit(s)" with git diff hint
4. **`crates/services/src/services/git.rs`**
- Added `get_commits_since_branch()` method (may be useful for future use)
5. **`shared/types.ts`**
- Generated TypeScript type includes `use_all_workspace_commits: boolean`
When frontend calls `POST /task-attempts/{id}/review` with:
```json
{
"executor_profile_id": { "executor": "CLAUDE_CODE", "variant": null },
"use_all_workspace_commits": true
}
```
The backend will:
1. Find the earliest execution process for the workspace
2. Get the `before_head_commit` for each repo (the commit before agents started making changes)
3. Pass that to the prompt builder which tells the agent to review all changes since that commit
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* Frontend UI implementation is complete. Here's a summary of what was added:
Added simple frontend UI to test the review endpoint.
1. **`frontend/src/lib/api.ts`**
- Added `startReview` method to `attemptsApi`
- Imports `StartReviewRequest`, `ReviewError` types
2. **`frontend/src/hooks/useStartReview.ts`** (NEW)
- Hook that calls `attemptsApi.startReview` with `use_all_workspace_commits: true`
- Invalidates `processes` and `branchStatus` queries on success
3. **`frontend/src/hooks/index.ts`**
- Exports `useStartReview`
4. **`frontend/src/components/ui/actions-dropdown.tsx`**
- Added "Start Review" menu item in the attempt actions section
- Uses the user's default executor profile from config
- Shows loading state while starting review
5. **`frontend/src/i18n/locales/en/tasks.json`**
- Added translation keys: `startReview`, `startingReview`
From the workspace actions dropdown (three dots menu), click "Start Review" to start a code review session using all workspace commits as context.
Done! The fix has been implemented. The review endpoint now uses `Session::find_latest_by_workspace_id` to find an existing session for the workspace, and only creates a new session if none exists. This means review logs will now appear in the same conversation view as other coding agent runs.
**Change summary:**
- Modified `crates/server/src/routes/task_attempts/review.rs` (lines 79-93)
- Instead of always creating a new session, it now checks for an existing session first using `Session::find_latest_by_workspace_id`
- This matches the pattern used by dev server, setup scripts, and other similar endpoints
Done! The fix is now in place. The change adds `ReviewRequest` to the action type filter in `useConversationHistory.ts` so review processes are included in the conversation view, and handles the content extraction appropriately (using `additional_prompt` for reviews instead of `prompt`).
**Change summary:**
- Modified `frontend/src/hooks/useConversationHistory.ts` (lines 226-244)
- Added `ReviewRequest` to the action type filter
- Used conditional to extract content from `additional_prompt` for reviews (with fallback "Review the code changes") vs `prompt` for coding agent requests
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
Done! All fixes are now in place:
1. **`useConversationHistory.ts` - `flattenEntries()`** (line 177-184): Added `ReviewRequest` to the filter so review processes are included in the flattened entries
2. **`useConversationHistory.ts` - `flattenEntriesForEmit()`** (line 226-244): Already fixed earlier - handles `ReviewRequest` and extracts `additional_prompt` for user message content
3. **`ProcessesTab.tsx`** (line 223-228): Added `ReviewRequest` to the ProfileVariantBadge conditional so the agent badge shows for review processes
* Done. Changes made:
1. **`crates/executors/src/actions/review.rs`**: Added `prompt: String` field to `ReviewRequest`
2. **`crates/server/src/routes/task_attempts/review.rs`**:
- Import `build_review_prompt`
- Build the full prompt from context and additional_prompt before creating the action
3. **`frontend/src/hooks/useConversationHistory.ts`**: Simplified content extraction to just use `actionType.prompt` for all action types (since `ReviewRequest` now has a prompt field too)
4. **Regenerated TypeScript types** - `ReviewRequest` in `shared/types.ts` now includes the `prompt` field
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* Done. Here's a summary of the changes:
**Backend:**
1. **`crates/executors/src/actions/review.rs`**:
- Added `CommitRange` enum with three variants: `FromBase`, `Specific`, and `Range`
- Updated `RepoReviewContext` to use `repo_name: String` and `commits: CommitRange` instead of `commit_hashes`
2. **`crates/executors/src/executors/mod.rs`**:
- Updated `build_review_prompt` to format output with repo names and handle all `CommitRange` variants
3. **`crates/server/src/routes/task_attempts/review.rs`**:
- Simplified `StartReviewRequest` (removed `context` field, kept `use_all_workspace_commits`)
- Updated handler to look up repo names via `Repo::find_by_ids` and use `CommitRange::FromBase`
4. **`crates/server/src/bin/generate_types.rs`**: Added `CommitRange` to exported types
**Frontend:**
- **`frontend/src/hooks/useStartReview.ts`**: Removed `context: null` since that field no longer exists
The prompt will now look like:
```
Please review the code changes.
Repository: vibe-kanban
Review all changes from base commit abc123 to HEAD.
Use `git diff abc123..HEAD` to see the changes.
```
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* Codex review support (vibe-kanban e7996a18)
## Context
We've added a review endpoint (\`POST /task-attempts/{id}/review\`) that starts a code review session. Currently it uses a default prompt-based implementation via \`spawn\_review()\` on \`StandardCodingAgentExecutor\`, which builds a prompt and delegates to \`spawn()\`.
## Goal
Implement native Codex review support by overriding \`spawn\_review()\` in the Codex executor to use Codex's native review mechanism instead of the prompt-based approach.
## Current Implementation
### Backend Types
\*\*\`CommitRange\` enum\*\* (\`crates/executors/src/actions/review.rs\`):
\`\`\`rust
pub enum CommitRange {
FromBase { commit: String },
Specific { commits: Vec<String> },
Range { from: String, to: String },
}
\`\`\`
\*\*\`RepoReviewContext\`\*\*:
\`\`\`rust
pub struct RepoReviewContext {
pub repo\_id: Uuid,
pub repo\_name: String,
pub commits: CommitRange,
}
\`\`\`
### Trait Method
\*\*\`spawn\_review()\`\*\* in \`StandardCodingAgentExecutor\` trait (\`crates/executors/src/executors/mod.rs\`):
\`\`\`rust
async fn spawn\_review(
&self,
current\_dir: &Path,
context: Option<&[RepoReviewContext]>,
additional\_prompt: Option<&str>,
env: &ExecutionEnv,
) -> Result<SpawnedChild, ExecutorError> {
// Default: build prompt and delegate to spawn()
let prompt = build\_review\_prompt(context, additional\_prompt);
self.spawn(current\_dir, &prompt, env).await
}
\`\`\`
## Tasks
1. Research Codex's native review API/mechanism (if it has one)
2. Override \`spawn\_review()\` in \`CodexExecutor\` to use native review if available
3. Fall back to prompt-based approach if native review isn't supported
* Done. Here's a summary of the changes:
1. **Removed dead code** from `crates/executors/src/executors/codex/review.rs`:
- Deleted the `map_to_review_target()` function (was ~120 lines)
- Removed unused imports (`CommitRange`, `RepoReviewContext`)
2. **Codex now uses `ReviewTarget::Custom`** with the pre-built prompt, which ensures the displayed prompt matches what Codex actually receives.
The build passes and TypeScript types have been regenerated.
* Use custom review target for codex
* Done. Here's a summary of the changes:
## Summary
Moved the review endpoint from workspace-level to session-level:
### Changes
1. **Created `crates/server/src/routes/sessions/review.rs`**
- New review endpoint at `POST /sessions/{id}/review`
- Takes `Extension<Session>` instead of `Extension<Workspace>`
- Looks up `agent_session_id` from previous executions using `find_latest_coding_agent_turn_session_id()`
- Passes `agent_session_id` to `ReviewAction` for session resumption
2. **Updated `crates/server/src/routes/sessions/mod.rs`**
- Added `pub mod review;`
- Added route `.route("/review", post(review::start_review))`
3. **Updated `crates/server/src/routes/task_attempts.rs`**
- Removed `pub mod review;`
- Removed `.route("/review", post(review::start_review))`
4. **Deleted `crates/server/src/routes/task_attempts/review.rs`**
5. **Updated `crates/server/src/bin/generate_types.rs`**
- Changed path from `task_attempts::review` to `sessions::review`
### API Change
- **Old**: `POST /api/task-attempts/{workspace_id}/review`
- **New**: `POST /api/sessions/{session_id}/review`
This ensures vk sessions and agent sessions are 1:1:
- Existing session → resumes agent session if available
- New session → fresh agent session
* Done! Here's a summary of all the frontend changes:
- Added `startReview` to `sessionsApi` using new endpoint `POST /api/sessions/${sessionId}/review`
- Removed `startReview` from `attemptsApi`
- Changed parameter from `attemptId` to `sessionId` and added optional `workspaceId` for query invalidation
- Changed API call from `attemptsApi.startReview` to `sessionsApi.startReview`
- Added `MagnifyingGlassIcon` import
- Added `onStartReview` and `isReviewStarting` to `SessionProps` interface
- Added "Start Review" menu item in the session dropdown
- Added `useStartReview` hook import and usage
- Added `handleStartReview` callback function
- Passed `onStartReview` and `isReviewStarting` to `SessionChatBox`
- Removed `useStartReview` import
- Removed `useUserSystem` import (now unused)
- Removed `startReview` hook usage
- Removed `handleStartReview` function
- Removed "Start Review" menu item from the dropdown
* Done. The fix adds the `ReviewRequest` case to `latest_executor_profile_for_session()` in `crates/db/src/models/execution_process.rs:688-690`.
The backend check passes. Follow-ups after reviews should now work correctly since the executor profile can be extracted from `ReviewRequest` just like from the other request types.
* Done. Removed `CommitRange` enum entirely. Changes:
1. **`crates/executors/src/actions/review.rs`** - Deleted `CommitRange` enum, changed `RepoReviewContext.commits` to `RepoReviewContext.base_commit: String`
2. **`crates/server/src/routes/sessions/review.rs`** - Updated construction to use `base_commit: initial_commit` instead of `commits: CommitRange::FromBase { commit: initial_commit }`
3. **`crates/executors/src/executors/mod.rs`** - Simplified `build_review_prompt()` to directly use `repo.base_commit` instead of matching on the enum
4. **`crates/server/src/bin/generate_types.rs`** - Removed `CommitRange::decl()` from type exports
5. **`shared/types.ts`** - Regenerated, `CommitRange` type is now gone
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* Done. Simplified the review context building:
**Changes:**
1. **`crates/db/src/models/execution_process_repo_state.rs`** - Replaced `find_initial_commits_for_workspace` with `find_initial_commit_for_repo` that takes a specific repo_id and uses ORDER BY + LIMIT 1 instead of GROUP BY/HAVING.
2. **`crates/server/src/routes/sessions/review.rs`** - Simplified the context building:
- Get workspace repos first (has repo names via `display_name`)
- For each repo, get initial commit
- Build context directly - no more HashMap joining, no more separate `Repo::find_by_ids` call
The new code is much easier to follow: get repos → for each, get initial commit → build context.
* Done. Addressed all 23 review comments:
1. Removed comment from `SessionChatBoxContainer.tsx` (line 161)
2. Removed doc comments from `RepoReviewContext` and `ReviewRequest` structs in `review.rs`
3. Removed module doc comment from `codex/review.rs`
4. Removed comment from `codex.rs` about Custom review target
5. Removed doc comments from `spawn_review` trait method in `mod.rs`
6. Removed doc comment from `build_review_prompt` function
7. Removed all comments from `sessions/review.rs` (doc comments and inline comments)
8. Removed unused `get_commits_since_branch` function from `git.rs` (~45 lines of dead code)
* Done. Added the review toggle button:
**Changes:**
1. **`SessionChatBox.tsx`**
- Added `ReviewModeProps` interface with `isActive`, `onToggle`, `isSubmitting`
- Added `reviewMode` prop to `SessionChatBoxProps`
- Added toggle button next to attach button (MagnifyingGlassIcon) - highlighted when active
- Updated placeholder to show "Enter review instructions..." when in review mode
- Removed old `onStartReview` and `isReviewStarting` from SessionProps
- Removed "Start Review" dropdown menu item
2. **`SessionChatBoxContainer.tsx`**
- Added `useState` for `isReviewMode`
- Updated `handleSend` to call `startReviewMutation` with `additionalPrompt` when in review mode
- Reset review mode after successful review start
- Pass `reviewMode` props to SessionChatBox
- Removed old `handleStartReview` callback
Now the user can:
1. Click the magnifying glass toggle next to attach
2. Enter review instructions in the text area
3. Click send → starts review with the prompt
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
TypeScript and Rust both compile. The changes are:
1. Button shows "Review" when review mode is active
2. Toggle icon uses `!text-accent-foreground` to force override the `text-low` class from the base component, along with `bg-accent rounded-sm` for the background highlight
Done. Changed `!text-accent-foreground` to `!text-normal` which uses the design system's proper text color for active/selected states. The `!` prefix forces the override of the base `text-low` class. Both TypeScript and Rust compile successfully.
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
All done. TypeScript and Rust compile successfully. Here's a summary of the changes:
**Created:**
- `frontend/src/components/dialogs/tasks/StartReviewDialog.tsx` - New dialog with:
- Agent/variant selection (using ExecutorProfileSelector)
- Review comments preview (if any)
- Additional instructions textarea
- Start Review / Cancel buttons
**Modified:**
- `frontend/src/components/dialogs/index.ts` - Added export for StartReviewDialog
- `frontend/src/components/ui-new/primitives/SessionChatBox.tsx`:
- Changed `ReviewModeProps` from toggle state to simple callback (`onReviewClick`, `isDisabled`)
- Removed toggle styling and review mode button text
- Button now just opens the dialog
- `frontend/src/components/ui-new/containers/SessionChatBoxContainer.tsx`:
- Removed `isReviewMode` state and `startReviewMutation`
- Added `handleReviewClick` callback that opens `StartReviewDialog`
- Disabled review button when in new session mode or no session exists
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
Done. TypeScript and Rust compile successfully. Summary of changes:
**`StartReviewDialog.tsx`:**
- Added "New Session" toggle (defaults ON when no session exists, disabled when no session to toggle from)
- Added conditional `AgentSelector` - only shown when creating a new session
- Always shows `ConfigSelector` for variant selection
- Handles session creation inline when toggle is on or no session exists
- Updated `onSuccess` callback to return new session ID when created
**`SessionChatBox.tsx`:**
- Removed `isDisabled` from `ReviewModeProps` interface
- Removed `reviewMode.isDisabled` from button disabled logic
**`SessionChatBoxContainer.tsx`:**
- Updated `handleReviewClick` to allow opening dialog without sessionId
- Updated `onSuccess` callback to select the new session if one was created
- Removed `isDisabled` from reviewMode prop
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
Done. Made `reviewMode` required and removed the conditional - the review button is now always shown.
Done. Now the StartReviewDialog:
- Shows `ExecutorProfileSelector` (Agent + Configuration side by side, like CreateAttemptDialog) when "New Session" toggle is ON
- Shows just `ConfigSelector` (variant only) when "New Session" toggle is OFF
TypeScript and Rust compile successfully. The Switch layout has been fixed to match the TaskFormDialog pattern:
- Switch is now on the LEFT of the label
- Uses `gap-2` instead of `justify-between`
- Has proper dark mode styling with `data-[state=checked]:bg-gray-900 dark:data-[state=checked]:bg-gray-100`
- Label has `cursor-pointer` for better UX
Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
Done. The Switch is now moved to the footer (bottom of the dialog), matching the TaskFormDialog pattern:
- Switch on the left side of the footer
- Cancel and Start Review buttons on the right side
- Added `disabled:opacity-50` for better visibility when disabled in dark mode
Done. All changes complete:
1. **Removed header** - No more "Start Review" title or description
2. **Removed labels from selectors** - `showLabel={false}` for both `ExecutorProfileSelector` and `ConfigSelector`
3. **Fixed footer layout** - Cancel button on left, Switch + "New Session" + "Start Review" button grouped on right (matching TaskFormDialog)
4. **TypeScript compiles** - Both frontend and backend checks pass
Done. Changes made:
1. **Moved selector to bottom** - Now the order is: Additional Instructions textarea → Review comments preview → Error → Profile/Config selector → Footer
2. **Fixed Switch visibility** - Changed from `data-[state=checked]:bg-gray-900 dark:data-[state=checked]:bg-gray-100` to `bg-muted-foreground/30 data-[state=checked]:bg-foreground` using semantic colors
3. **TypeScript compiles** - Both frontend and backend checks pass
Done. The Switch className now uses `!` important modifiers to override the component's hardcoded background colors:
- `!bg-muted-foreground/30` - visible gray background when unchecked (overrides `bg-input`)
- `data-[state=checked]:!bg-foreground` - foreground color when checked (overrides `bg-foreground`)
Done. Changed the Switch className to use `!bg-muted` which should provide better contrast against the dialog's `bg-primary` background.
Done. Changed the Switch className to use `!bg-border` which should provide some contrast against the dialog's `bg-primary` background (25% lightness vs 18% lightness).
* Fix duplicate routes
* I've analyzed the problem. Here's my understanding:
**The issue:** After rebasing, stored commit SHAs (`after_head_commit`) become invalid because rebasing rewrites history with new SHAs.
**Your suggestion (`git diff A^..B`):** This still has the same problem - after rebase, commit `A` doesn't exist with that SHA anymore. `A^` requires resolving commit `A` first.
**My recommended fix:** Instead of using stored commit SHAs, use the **branch name** as the base:
- `git diff {target_branch}..HEAD` instead of `git diff {commit_sha}..HEAD`
- This is always valid regardless of rebasing
- Matches user intent: "show all changes on this workspace branch vs base"
This would require changes to:
1. `review.rs` - use `workspace.target_branch` instead of querying `find_first_commit_for_repo`
2. `build_review_prompt` - update to use branch name
3. `RepoReviewContext` - change `base_commit` to `base_branch`
**Questions:**
1. Is using `target_branch` the right base? Or do you need something more granular like "changes since session X"?
2. Should we keep `before_head_commit`/`after_head_commit` for per-execution tracking, or simplify?
* Done. Here's a summary of the changes:
## Changes Made
### 1. `crates/services/src/services/git/cli.rs`
- Made `merge_base` method public (was `fn`, now `pub fn`)
### 2. `crates/services/src/services/git.rs`
- Added new public method `get_fork_point()` that wraps the CLI `merge_base` function
- This method uses `git merge-base --fork-point` which survives rebasing by consulting the reflog
### 3. `crates/server/src/routes/sessions/review.rs`
- Removed import of `ExecutionProcessRepoState` (no longer needed)
- Added `PathBuf` import
- Changed from querying stored `after_head_commit` SHAs to computing fork-point dynamically
- Now uses `WorkspaceRepo::find_repos_with_target_branch_for_workspace` to get per-repo target branches
- Computes `get_fork_point(repo_path, target_branch, workspace.branch)` for each repo
## How It Works Now
Instead of storing commit SHAs that become invalid after rebasing:
```rust
// Old (broken after rebase):
let base_commit = ExecutionProcessRepoState::find_first_commit_for_repo(...)
```
We now compute the fork-point dynamically:
```rust
// New (survives rebasing):
let base_commit = deployment.git().get_fork_point(
&repo_path,
&repo.target_branch, // e.g., "main"
&workspace.branch, // e.g., "vk/task-123"
)
```
This uses `git merge-base --fork-point` which consults the reflog to find where the branch originally diverged, regardless of subsequent rebases.
* Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* Removed the unused `find_first_commit_for_repo` function. Everything still compiles.
* All comments removed and code still compiles.
* Fixed. The changes:
1. Added `effective_dir` method to `ReviewRequest` in `crates/executors/src/actions/review.rs`
2. Updated `container.rs` to use `request.effective_dir(&workspace_root)` instead of `workspace_root.clone()` for `ReviewRequest`
Now the log normalization for reviews will use the correct working directory, matching how the agent is actually spawned.
* Fixed. Now the workspace is re-fetched after `ensure_container_exists` to get the updated `container_ref`.
* Fixed. Now using the `container_ref` returned directly from `ensure_container_exists` instead of re-fetching the workspace.
* Fixed the naming:
- `workspace_path` - the container_ref path containing all repos
- `worktree_path` - the path to a specific repo's worktree within the workspace
* Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* Done. I've added an "Include git context" checkbox to the StartReviewDialog:
- Added state `includeGitContext` defaulting to `true`
- Added a checkbox UI with label "Include git context"
- The checkbox value is passed to the API as `use_all_workspace_commits`
The checkbox appears after the error message area and before the executor profile selector. Users will see it checked by default, making it clear that git context is being included without needing to add it themselves in the prompt.
* I've completed the i18n task. Here's a summary of what was done:
1. **Added i18n support to `StartReviewDialog.tsx`**:
- Imported `useTranslation` from `react-i18next`
- Replaced all hardcoded strings with translation keys:
- "Additional Instructions (optional)" → `t('startReviewDialog.additionalInstructions')`
- "Review Comments (...)" → `t('startReviewDialog.reviewComments', { count: ... })`
- "Include git context" → `t('startReviewDialog.includeGitContext')`
- "New Session" → `t('startReviewDialog.newSession')`
- "Cancel" → `t('common:buttons.cancel')`
- "Starting..." / "Start Review" → `t('actionsMenu.startingReview')` / `t('actionsMenu.startReview')`
2. **Added translations to all locale files** (`en`, `es`, `ja`, `ko`, `zh-Hans`, `zh-Hant`):
- Added `startReviewDialog` object with `additionalInstructions`, `reviewComments`, `includeGitContext`, and `newSession` keys
- Added `actionsMenu.startReview` and `actionsMenu.startingReview` to all non-English locales
3. **Verified with i18n check script**: All checks pass - no new literal strings introduced, no duplicate keys, and translation keys are consistent across all locales.
* Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* All checks pass. I've added a description below the "Include git context" checkbox:
**English:** "Tells the agent how to view all changes made on this branch"
The description appears as smaller muted text below the checkbox, explaining to users what the option does - it instructs the agent how to see all the changes on this branch (via the git diff command we inject). This helps users understand they don't need to manually ask the agent about branch changes.
* Done. Here's a summary of the changes:
1. **Replaced conditional rendering** with always showing both `AgentSelector` and `ConfigSelector`
2. **Agent selector is disabled** when `createNewSession` is false (locked to the session's executor)
3. **Fixed the variant retention bug** by adding `handleNewSessionChange` that resets `selectedProfile` to `defaultProfile` when toggling "New Session" off - this ensures the variant matches the locked executor
* Types
* Removed the unused `useStartReview` hook and its export from `hooks/index.ts`.
* All checks pass. Here's a summary of the changes made:
**`frontend/src/components/ui-new/actions/index.ts`:**
1. Added `HighlighterIcon` to the Phosphor icons import (line 33)
2. Added `StartReviewDialog` import (line 49)
3. Added `StartReview` action definition (lines 293-304) with:
- `id: 'start-review'`
- `label: 'Start Review'`
- `icon: HighlighterIcon`
- `requiresTarget: true`
- Visibility when workspace exists
- Execute function that opens `StartReviewDialog`
**`frontend/src/components/ui-new/actions/pages.ts`:**
1. Added `{ type: 'action', action: Actions.StartReview }` as the first item in the `workspaceActions` page group (line 105)
The "Start Review" action with the highlighter icon will now appear in the workspace actions menu (accessed via CMD+K or the three-dots menu on a workspace).
* All checks pass. Done. Here's a summary of the additional change:
**`frontend/src/components/ui-new/primitives/SessionChatBox.tsx`:**
- Changed `MagnifyingGlassIcon` to `HighlighterIcon` in the import (line 12)
- Updated the `ToolbarIconButton` to use `HighlighterIcon` instead of `MagnifyingGlassIcon` (line 635)
The review button in the text input now shows the highlighter icon instead of the magnifying glass.
* All checks pass. Here's a summary of the changes:
**`frontend/src/components/ui-new/primitives/Toolbar.tsx`:**
- Added proper disabled styling to `ToolbarIconButton` (`opacity-40 cursor-not-allowed`)
**`frontend/src/components/ui-new/primitives/SessionChatBox.tsx`:**
- Removed `HighlighterIcon` import (no longer hardcoded)
- Added `Icon` type import
- Replaced `ReviewModeProps` with generic `ToolbarActionProps` interface (`icon`, `label`, `onClick`)
- Changed `reviewMode` prop to `toolbarActions?: ToolbarActionProps[]`
- Updated footer to render toolbar actions dynamically from the array
**`frontend/src/components/ui-new/containers/SessionChatBoxContainer.tsx`:**
- Added `HighlighterIcon` import
- Changed `reviewMode` prop to `toolbarActions` array with the review action
The button is now:
1. Generic - accepts any action with icon/label/onClick
2. Shows proper disabled state (opacity + cursor)
3. Extensible - you can add more toolbar actions by adding to the array
* All checks pass. Now toolbar actions work identically to navbar actions:
**Summary of changes:**
1. **`SessionChatBox.tsx`**:
- Changed `toolbarActions` prop from simple `{icon, label, onClick}[]` to `{actions, context, onExecuteAction}` structure
- Uses `ActionDefinition[]` from the actions system
- Uses `isActionEnabled()` to derive disabled state from action context
- Uses `isSpecialIcon()` to filter out non-standard icons
- Handles `label` being either a string or function
2. **`SessionChatBoxContainer.tsx`**:
- Added `useActions()` and `useActionVisibilityContext()` hooks
- Created `handleToolbarAction` callback that routes actions through `executeAction`
- Created `toolbarActionsList` array containing `Actions.StartReview`
- Passes the full action context to `SessionChatBox`
Now adding a new action to the conversation input works the same as navbar:
```typescript
// Just add to the array
const toolbarActionsList = useMemo(
() => [Actions.StartReview, Actions.SomeOtherAction],
[]
);
```
The action's `isVisible`, `isEnabled`, icon, label, and execute logic all come from the central `Actions` definition in `index.ts`.
* Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* Done. The "Start Review" action with the highlighter icon now appears in both the navbar (left side) and the chat input toolbar.
* Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* Done. Removed `StartReview` from the navbar and added `ToggleChangesMode` to the conversation input toolbar alongside `StartReview`.
* Done.
* Removed the review-specific branch so the handler is generic, matching other containers. The toolbar action now just respects `requiresTarget`.
Details and context:
- Simplified the action handler in `frontend/src/components/ui-new/containers/SessionChatBoxContainer.tsx:444` to rely solely on the generic `action.requiresTarget` path.
- This aligns with `frontend/src/components/ui-new/containers/NavbarContainer.tsx:66`, where all actions flow through the same generic logic.
Next steps:
1) If you want, I can run a quick lint/typecheck on the frontend (`pnpm run check`) to confirm.
* Aligned the chatbox to use the shared visibility system, like the navbar, so action availability is handled by the same logic and execution stays generic.
Details and context:
- Filtered `toolbarActionsList` through `isActionVisible` with the shared `actionCtx` so Start Review only appears when it’s supposed to.
- Kept the execution handler generic so it just respects `requiresTarget`.
Files:
- `frontend/src/components/ui-new/containers/SessionChatBoxContainer.tsx`
Next steps:
1) If you want me to run a quick frontend typecheck (`pnpm run check`), say the word.
* Cleanup script changes for workspace 38f8b607-9fdc-43dc-afa3-16e8f5e9cbd3
* Updated the Start Review dialog so it derives the active session and a default executor profile from workspace context + config, which restores preselection and enables the “new session” toggle when a session exists. This keeps the chatbox action generic while fixing the dialog behavior.
Details and context:
- Added workspace context awareness and default profile derivation (mirrors Create Attempt’s logic).
- Uses the resolved session id to enable/disable the toggle and to decide whether a new session is required.
- Keeps user selection override behavior intact.
File:
- `frontend/src/components/dialogs/tasks/StartReviewDialog.tsx`
If you want, I can also add a quick regression check or walk through the UI flow with you.
* Fixed the lint issue and clippy qa-mode compile warning, then reran the requested commands. The Start Review dialog now uses `resolvedSessionId` consistently in its callback, and review log normalization handles qa-mode without unused vars.
Files updated:
- `frontend/src/components/dialogs/tasks/StartReviewDialog.tsx`
- `crates/services/src/services/container.rs`
Commands run:
- `npm run lint`
- `npm run format`
- `npm run check`
* Renamed the match binding to `_request` so we don’t need the no-op line, and removed the comment you flagged.
Notes:
- The `let _ = request;` was only there to silence an unused-var warning under the `qa-mode` cfg. Using `_request` is the standard way to mark it intentionally unused.
Files:
- `crates/services/src/services/container.rs`
- `frontend/src/components/ui-new/containers/SessionChatBoxContainer.tsx`
Want me to rerun `npm run lint` since this touched the linted files?
* Split the `ReviewRequest` arm by cfg so qa-mode uses `_request` and non-qa uses `request` normally—no dummy line needed.
File:
- `crates/services/src/services/container.rs`
* Done. The fix adds `ReviewRequest` to the match statement that creates `CodingAgentTurn` records. Now when a review is started, a `coding_agent_turn` row will be created with the review prompt, and the `agent_session_id` will be stored when Codex reports it. Subsequent follow-ups will find this session ID and correctly use `CodingAgentFollowUpRequest` instead of starting a fresh session.
* Done. Now if a new `ExecutorActionType` variant is added, the compiler will error on this match and force the developer to decide whether it should create a `CodingAgentTurn` record.
* Adjusted `sessionsApi.startReview` to return the unwrapped payload like other session calls, and aligned the `handleApiResponse` generic so callers get an `ExecutionProcess` instead of a misleading `ApiResponse`. This fixes the runtime mismatch and keeps the API consistent.
Updated `frontend/src/lib/api.ts`.
If you want, I can:
1) run `pnpm run check` to validate types, or
2) scan for any other session APIs with inconsistent `handleApiResponse` generics.
* All checks pass. Summary of changes:
1. **Removed tooltip from dialog button** - Dialog buttons don't use tooltips in this codebase
2. **Added `getTooltip` to the `StartReview` action definition** in `actions/index.ts` - This is the pattern used for action tooltips ("Ask the agent to review your changes")
3. **Removed `submitTooltip` from all locale files** since it's no longer used
4. **Added missing `title` and `description` to zh-Hant locale**
* Done. Now when a new session is created, the dialog will call `selectSession(targetSessionId)` to switch to the newly created session before closing.
2026-01-12 19:28:55 +00:00
|
|
|
StartReview: {
|
|
|
|
|
id: 'start-review',
|
|
|
|
|
label: 'Start Review',
|
|
|
|
|
icon: HighlighterIcon,
|
|
|
|
|
requiresTarget: true,
|
|
|
|
|
isVisible: (ctx) => ctx.hasWorkspace,
|
|
|
|
|
getTooltip: () => 'Ask the agent to review your changes',
|
|
|
|
|
execute: async (_ctx, workspaceId) => {
|
|
|
|
|
await StartReviewDialog.show({
|
|
|
|
|
workspaceId,
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
2026-01-08 22:14:38 +00:00
|
|
|
// === Global/Navigation Actions ===
|
|
|
|
|
NewWorkspace: {
|
|
|
|
|
id: 'new-workspace',
|
|
|
|
|
label: 'New Workspace',
|
|
|
|
|
icon: PlusIcon,
|
|
|
|
|
requiresTarget: false,
|
|
|
|
|
execute: (ctx) => {
|
|
|
|
|
ctx.navigate('/workspaces/create');
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
Settings: {
|
|
|
|
|
id: 'settings',
|
|
|
|
|
label: 'Settings',
|
|
|
|
|
icon: GearIcon,
|
|
|
|
|
requiresTarget: false,
|
|
|
|
|
execute: (ctx) => {
|
|
|
|
|
ctx.navigate('/settings');
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// === Diff View Actions ===
|
|
|
|
|
ToggleDiffViewMode: {
|
|
|
|
|
id: 'toggle-diff-view-mode',
|
|
|
|
|
label: () =>
|
|
|
|
|
useDiffViewStore.getState().mode === 'unified'
|
|
|
|
|
? 'Switch to Side-by-Side View'
|
|
|
|
|
: 'Switch to Inline View',
|
|
|
|
|
icon: ColumnsIcon,
|
|
|
|
|
requiresTarget: false,
|
|
|
|
|
isVisible: (ctx) => ctx.isChangesMode,
|
|
|
|
|
isActive: (ctx) => ctx.diffViewMode === 'split',
|
|
|
|
|
getIcon: (ctx) => (ctx.diffViewMode === 'split' ? ColumnsIcon : RowsIcon),
|
|
|
|
|
getTooltip: (ctx) =>
|
|
|
|
|
ctx.diffViewMode === 'split' ? 'Inline view' : 'Side-by-side view',
|
|
|
|
|
execute: () => {
|
|
|
|
|
useDiffViewStore.getState().toggle();
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
ToggleIgnoreWhitespace: {
|
|
|
|
|
id: 'toggle-ignore-whitespace',
|
|
|
|
|
label: () =>
|
|
|
|
|
useDiffViewStore.getState().ignoreWhitespace
|
|
|
|
|
? 'Show Whitespace Changes'
|
|
|
|
|
: 'Ignore Whitespace Changes',
|
|
|
|
|
icon: EyeSlashIcon,
|
|
|
|
|
requiresTarget: false,
|
|
|
|
|
isVisible: (ctx) => ctx.isChangesMode,
|
|
|
|
|
execute: () => {
|
|
|
|
|
const store = useDiffViewStore.getState();
|
|
|
|
|
store.setIgnoreWhitespace(!store.ignoreWhitespace);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
ToggleWrapLines: {
|
|
|
|
|
id: 'toggle-wrap-lines',
|
|
|
|
|
label: () =>
|
|
|
|
|
useDiffViewStore.getState().wrapText
|
|
|
|
|
? 'Disable Line Wrapping'
|
|
|
|
|
: 'Enable Line Wrapping',
|
|
|
|
|
icon: TextAlignLeftIcon,
|
|
|
|
|
requiresTarget: false,
|
|
|
|
|
isVisible: (ctx) => ctx.isChangesMode,
|
|
|
|
|
execute: () => {
|
|
|
|
|
const store = useDiffViewStore.getState();
|
|
|
|
|
store.setWrapText(!store.wrapText);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// === Layout Panel Actions ===
|
|
|
|
|
ToggleSidebar: {
|
|
|
|
|
id: 'toggle-sidebar',
|
|
|
|
|
label: () =>
|
|
|
|
|
useLayoutStore.getState().isSidebarVisible
|
|
|
|
|
? 'Hide Sidebar'
|
|
|
|
|
: 'Show Sidebar',
|
|
|
|
|
icon: SidebarSimpleIcon,
|
|
|
|
|
requiresTarget: false,
|
|
|
|
|
isActive: (ctx) => ctx.isSidebarVisible,
|
|
|
|
|
execute: () => {
|
|
|
|
|
useLayoutStore.getState().toggleSidebar();
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
ToggleMainPanel: {
|
|
|
|
|
id: 'toggle-main-panel',
|
|
|
|
|
label: () =>
|
|
|
|
|
useLayoutStore.getState().isMainPanelVisible
|
|
|
|
|
? 'Hide Chat Panel'
|
|
|
|
|
: 'Show Chat Panel',
|
|
|
|
|
icon: ChatsTeardropIcon,
|
|
|
|
|
requiresTarget: false,
|
|
|
|
|
isActive: (ctx) => ctx.isMainPanelVisible,
|
|
|
|
|
isEnabled: (ctx) => !(ctx.isMainPanelVisible && !ctx.isChangesMode),
|
|
|
|
|
execute: () => {
|
|
|
|
|
useLayoutStore.getState().toggleMainPanel();
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
ToggleGitPanel: {
|
|
|
|
|
id: 'toggle-git-panel',
|
|
|
|
|
label: () =>
|
|
|
|
|
useLayoutStore.getState().isGitPanelVisible
|
|
|
|
|
? 'Hide Git Panel'
|
|
|
|
|
: 'Show Git Panel',
|
|
|
|
|
icon: SidebarSimpleIcon,
|
|
|
|
|
requiresTarget: false,
|
|
|
|
|
isActive: (ctx) => ctx.isGitPanelVisible,
|
|
|
|
|
execute: () => {
|
|
|
|
|
useLayoutStore.getState().toggleGitPanel();
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
ToggleChangesMode: {
|
|
|
|
|
id: 'toggle-changes-mode',
|
|
|
|
|
label: () =>
|
|
|
|
|
useLayoutStore.getState().isChangesMode
|
|
|
|
|
? 'Hide Changes Panel'
|
|
|
|
|
: 'Show Changes Panel',
|
|
|
|
|
icon: GitDiffIcon,
|
|
|
|
|
requiresTarget: false,
|
|
|
|
|
isVisible: (ctx) => !ctx.isCreateMode,
|
|
|
|
|
isActive: (ctx) => ctx.isChangesMode,
|
|
|
|
|
isEnabled: (ctx) => !ctx.isCreateMode,
|
|
|
|
|
execute: () => {
|
|
|
|
|
useLayoutStore.getState().toggleChangesMode();
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
ToggleLogsMode: {
|
|
|
|
|
id: 'toggle-logs-mode',
|
|
|
|
|
label: () =>
|
|
|
|
|
useLayoutStore.getState().isLogsMode
|
|
|
|
|
? 'Hide Logs Panel'
|
|
|
|
|
: 'Show Logs Panel',
|
|
|
|
|
icon: TerminalIcon,
|
|
|
|
|
requiresTarget: false,
|
|
|
|
|
isVisible: (ctx) => !ctx.isCreateMode,
|
|
|
|
|
isActive: (ctx) => ctx.isLogsMode,
|
|
|
|
|
isEnabled: (ctx) => !ctx.isCreateMode,
|
|
|
|
|
execute: () => {
|
|
|
|
|
useLayoutStore.getState().toggleLogsMode();
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
TogglePreviewMode: {
|
|
|
|
|
id: 'toggle-preview-mode',
|
|
|
|
|
label: () =>
|
|
|
|
|
useLayoutStore.getState().isPreviewMode
|
|
|
|
|
? 'Hide Preview Panel'
|
|
|
|
|
: 'Show Preview Panel',
|
|
|
|
|
icon: DesktopIcon,
|
|
|
|
|
requiresTarget: false,
|
|
|
|
|
isVisible: (ctx) => !ctx.isCreateMode,
|
|
|
|
|
isActive: (ctx) => ctx.isPreviewMode,
|
|
|
|
|
isEnabled: (ctx) => !ctx.isCreateMode,
|
|
|
|
|
execute: () => {
|
|
|
|
|
useLayoutStore.getState().togglePreviewMode();
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// === Navigation Actions ===
|
|
|
|
|
OpenInOldUI: {
|
|
|
|
|
id: 'open-in-old-ui',
|
|
|
|
|
label: 'Open in Old UI',
|
|
|
|
|
icon: SignOutIcon,
|
|
|
|
|
requiresTarget: false,
|
|
|
|
|
execute: async (ctx) => {
|
|
|
|
|
// If no workspace is selected, navigate to root
|
|
|
|
|
if (!ctx.currentWorkspaceId) {
|
|
|
|
|
ctx.navigate('/');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-12 23:02:56 +00:00
|
|
|
const workspace = await getWorkspace(
|
2026-01-08 22:14:38 +00:00
|
|
|
ctx.queryClient,
|
|
|
|
|
ctx.currentWorkspaceId
|
|
|
|
|
);
|
|
|
|
|
if (!workspace?.task_id) {
|
|
|
|
|
ctx.navigate('/');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Fetch task lazily to get project_id
|
|
|
|
|
const task = await tasksApi.getById(workspace.task_id);
|
|
|
|
|
if (task?.project_id) {
|
|
|
|
|
ctx.navigate(
|
|
|
|
|
`/projects/${task.project_id}/tasks/${workspace.task_id}/attempts/${workspace.id}`
|
|
|
|
|
);
|
|
|
|
|
} else {
|
|
|
|
|
ctx.navigate('/');
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// === Diff Actions for Navbar ===
|
|
|
|
|
ToggleAllDiffs: {
|
|
|
|
|
id: 'toggle-all-diffs',
|
|
|
|
|
label: () => {
|
|
|
|
|
const { diffPaths } = useDiffViewStore.getState();
|
|
|
|
|
const { expanded } = useUiPreferencesStore.getState();
|
|
|
|
|
const keys = diffPaths.map((p) => `diff:${p}`);
|
|
|
|
|
const isAllExpanded =
|
|
|
|
|
keys.length > 0 && keys.every((k) => expanded[k] !== false);
|
|
|
|
|
return isAllExpanded ? 'Collapse All Diffs' : 'Expand All Diffs';
|
|
|
|
|
},
|
|
|
|
|
icon: CaretDoubleUpIcon,
|
|
|
|
|
requiresTarget: false,
|
|
|
|
|
isVisible: (ctx) => ctx.isChangesMode,
|
|
|
|
|
getIcon: (ctx) =>
|
|
|
|
|
ctx.isAllDiffsExpanded ? CaretDoubleUpIcon : CaretDoubleDownIcon,
|
|
|
|
|
getTooltip: (ctx) =>
|
|
|
|
|
ctx.isAllDiffsExpanded ? 'Collapse all diffs' : 'Expand all diffs',
|
|
|
|
|
execute: () => {
|
|
|
|
|
const { diffPaths } = useDiffViewStore.getState();
|
|
|
|
|
const { expanded, setExpandedAll } = useUiPreferencesStore.getState();
|
|
|
|
|
const keys = diffPaths.map((p) => `diff:${p}`);
|
|
|
|
|
const isAllExpanded =
|
|
|
|
|
keys.length > 0 && keys.every((k) => expanded[k] !== false);
|
|
|
|
|
setExpandedAll(keys, !isAllExpanded);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// === ContextBar Actions ===
|
|
|
|
|
OpenInIDE: {
|
|
|
|
|
id: 'open-in-ide',
|
|
|
|
|
label: 'Open in IDE',
|
|
|
|
|
icon: 'ide-icon' as const,
|
|
|
|
|
requiresTarget: false,
|
|
|
|
|
isVisible: (ctx) => ctx.hasWorkspace,
|
|
|
|
|
getTooltip: (ctx) => `Open in ${getIdeName(ctx.editorType)}`,
|
|
|
|
|
execute: async (ctx) => {
|
|
|
|
|
if (!ctx.currentWorkspaceId) return;
|
|
|
|
|
try {
|
|
|
|
|
const response = await attemptsApi.openEditor(ctx.currentWorkspaceId, {
|
|
|
|
|
editor_type: null,
|
|
|
|
|
file_path: null,
|
|
|
|
|
});
|
|
|
|
|
if (response.url) {
|
|
|
|
|
window.open(response.url, '_blank');
|
|
|
|
|
}
|
|
|
|
|
} catch {
|
|
|
|
|
// Show editor selection dialog on failure
|
|
|
|
|
EditorSelectionDialog.show({
|
|
|
|
|
selectedAttemptId: ctx.currentWorkspaceId,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
CopyPath: {
|
|
|
|
|
id: 'copy-path',
|
|
|
|
|
label: 'Copy path',
|
|
|
|
|
icon: 'copy-icon' as const,
|
|
|
|
|
requiresTarget: false,
|
|
|
|
|
isVisible: (ctx) => ctx.hasWorkspace,
|
|
|
|
|
execute: async (ctx) => {
|
|
|
|
|
if (!ctx.containerRef) return;
|
|
|
|
|
await navigator.clipboard.writeText(ctx.containerRef);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
ToggleDevServer: {
|
|
|
|
|
id: 'toggle-dev-server',
|
|
|
|
|
label: 'Dev Server',
|
|
|
|
|
icon: PlayIcon,
|
|
|
|
|
requiresTarget: false,
|
|
|
|
|
isVisible: (ctx) => ctx.hasWorkspace,
|
|
|
|
|
isEnabled: (ctx) =>
|
|
|
|
|
ctx.devServerState !== 'starting' && ctx.devServerState !== 'stopping',
|
|
|
|
|
getIcon: (ctx) => {
|
|
|
|
|
if (
|
|
|
|
|
ctx.devServerState === 'starting' ||
|
|
|
|
|
ctx.devServerState === 'stopping'
|
|
|
|
|
) {
|
|
|
|
|
return SpinnerIcon;
|
|
|
|
|
}
|
|
|
|
|
if (ctx.devServerState === 'running') {
|
|
|
|
|
return PauseIcon;
|
|
|
|
|
}
|
|
|
|
|
return PlayIcon;
|
|
|
|
|
},
|
|
|
|
|
getTooltip: (ctx) => {
|
|
|
|
|
switch (ctx.devServerState) {
|
|
|
|
|
case 'starting':
|
|
|
|
|
return 'Starting dev server...';
|
|
|
|
|
case 'stopping':
|
|
|
|
|
return 'Stopping dev server...';
|
|
|
|
|
case 'running':
|
|
|
|
|
return 'Stop dev server';
|
|
|
|
|
default:
|
|
|
|
|
return 'Start dev server';
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
getLabel: (ctx) =>
|
|
|
|
|
ctx.devServerState === 'running' ? 'Stop Dev Server' : 'Start Dev Server',
|
|
|
|
|
execute: (ctx) => {
|
2026-01-11 08:03:19 +00:00
|
|
|
if (ctx.runningDevServers.length > 0) {
|
2026-01-08 22:14:38 +00:00
|
|
|
ctx.stopDevServer();
|
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
2026-01-09 16:25:42 +00:00
|
|
|
} else {
|
2026-01-08 22:14:38 +00:00
|
|
|
ctx.startDevServer();
|
2026-01-11 08:03:19 +00:00
|
|
|
// Auto-open preview mode when starting dev server
|
|
|
|
|
useLayoutStore.getState().setPreviewMode(true);
|
2026-01-08 22:14:38 +00:00
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// === Git Actions ===
|
|
|
|
|
GitCreatePR: {
|
|
|
|
|
id: 'git-create-pr',
|
|
|
|
|
label: 'Create Pull Request',
|
|
|
|
|
icon: GitPullRequestIcon,
|
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
2026-01-09 16:25:42 +00:00
|
|
|
requiresTarget: 'git',
|
2026-01-08 22:14:38 +00:00
|
|
|
isVisible: (ctx) => ctx.hasWorkspace && ctx.hasGitRepos,
|
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
2026-01-09 16:25:42 +00:00
|
|
|
execute: async (ctx, workspaceId, repoId) => {
|
2026-01-12 23:02:56 +00:00
|
|
|
const workspace = await getWorkspace(ctx.queryClient, workspaceId);
|
2026-01-08 22:14:38 +00:00
|
|
|
const task = await tasksApi.getById(workspace.task_id);
|
|
|
|
|
|
2026-01-10 12:01:49 +00:00
|
|
|
const repos = await attemptsApi.getRepos(workspaceId);
|
|
|
|
|
const repo = repos.find((r) => r.id === repoId);
|
|
|
|
|
|
2026-01-08 22:14:38 +00:00
|
|
|
const result = await CreatePRDialog.show({
|
|
|
|
|
attempt: workspace,
|
|
|
|
|
task: {
|
|
|
|
|
...task,
|
|
|
|
|
has_in_progress_attempt: false,
|
|
|
|
|
last_attempt_failed: false,
|
|
|
|
|
executor: '',
|
|
|
|
|
},
|
|
|
|
|
repoId,
|
2026-01-10 12:01:49 +00:00
|
|
|
targetBranch: repo?.target_branch,
|
2026-01-08 22:14:38 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (!result.success && result.error) {
|
|
|
|
|
throw new Error(result.error);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
GitMerge: {
|
|
|
|
|
id: 'git-merge',
|
|
|
|
|
label: 'Merge',
|
|
|
|
|
icon: GitMergeIcon,
|
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
2026-01-09 16:25:42 +00:00
|
|
|
requiresTarget: 'git',
|
2026-01-08 22:14:38 +00:00
|
|
|
isVisible: (ctx) => ctx.hasWorkspace && ctx.hasGitRepos,
|
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
2026-01-09 16:25:42 +00:00
|
|
|
execute: async (ctx, workspaceId, repoId) => {
|
2026-01-08 22:14:38 +00:00
|
|
|
const confirmResult = await ConfirmDialog.show({
|
|
|
|
|
title: 'Merge Branch',
|
|
|
|
|
message:
|
|
|
|
|
'Are you sure you want to merge this branch into the target branch?',
|
|
|
|
|
confirmText: 'Merge',
|
|
|
|
|
cancelText: 'Cancel',
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (confirmResult === 'confirmed') {
|
|
|
|
|
await attemptsApi.merge(workspaceId, { repo_id: repoId });
|
|
|
|
|
invalidateWorkspaceQueries(ctx.queryClient, workspaceId);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
GitRebase: {
|
|
|
|
|
id: 'git-rebase',
|
|
|
|
|
label: 'Rebase',
|
|
|
|
|
icon: ArrowsClockwiseIcon,
|
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
2026-01-09 16:25:42 +00:00
|
|
|
requiresTarget: 'git',
|
2026-01-08 22:14:38 +00:00
|
|
|
isVisible: (ctx) => ctx.hasWorkspace && ctx.hasGitRepos,
|
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
2026-01-09 16:25:42 +00:00
|
|
|
execute: async (_ctx, workspaceId, repoId) => {
|
2026-01-08 22:14:38 +00:00
|
|
|
const repos = await attemptsApi.getRepos(workspaceId);
|
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
2026-01-09 16:25:42 +00:00
|
|
|
const repo = repos.find((r) => r.id === repoId);
|
|
|
|
|
if (!repo) throw new Error('Repository not found');
|
2026-01-08 22:14:38 +00:00
|
|
|
|
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
2026-01-09 16:25:42 +00:00
|
|
|
const branches = await repoApi.getBranches(repoId);
|
2026-01-08 22:14:38 +00:00
|
|
|
await RebaseDialog.show({
|
|
|
|
|
attemptId: workspaceId,
|
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
2026-01-09 16:25:42 +00:00
|
|
|
repoId,
|
2026-01-08 22:14:38 +00:00
|
|
|
branches,
|
|
|
|
|
initialTargetBranch: repo.target_branch,
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
GitChangeTarget: {
|
|
|
|
|
id: 'git-change-target',
|
|
|
|
|
label: 'Change Target Branch',
|
|
|
|
|
icon: CrosshairIcon,
|
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
2026-01-09 16:25:42 +00:00
|
|
|
requiresTarget: 'git',
|
2026-01-08 22:14:38 +00:00
|
|
|
isVisible: (ctx) => ctx.hasWorkspace && ctx.hasGitRepos,
|
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
2026-01-09 16:25:42 +00:00
|
|
|
execute: async (_ctx, workspaceId, repoId) => {
|
2026-01-08 22:14:38 +00:00
|
|
|
const branches = await repoApi.getBranches(repoId);
|
|
|
|
|
await ChangeTargetDialog.show({
|
|
|
|
|
attemptId: workspaceId,
|
|
|
|
|
repoId,
|
|
|
|
|
branches,
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
},
|
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>
2026-01-12 15:13:57 +01:00
|
|
|
|
|
|
|
|
GitPush: {
|
|
|
|
|
id: 'git-push',
|
|
|
|
|
label: 'Push',
|
|
|
|
|
icon: ArrowUpIcon,
|
|
|
|
|
requiresTarget: 'git',
|
|
|
|
|
isVisible: (ctx) =>
|
|
|
|
|
ctx.hasWorkspace &&
|
|
|
|
|
ctx.hasGitRepos &&
|
|
|
|
|
ctx.hasOpenPR &&
|
|
|
|
|
ctx.hasUnpushedCommits,
|
|
|
|
|
execute: async (ctx, workspaceId, repoId) => {
|
|
|
|
|
const result = await attemptsApi.push(workspaceId, { repo_id: repoId });
|
|
|
|
|
if (!result.success) {
|
|
|
|
|
if (result.error?.type === 'force_push_required') {
|
|
|
|
|
throw new Error(
|
|
|
|
|
'Force push required. The remote branch has diverged.'
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
throw new Error('Failed to push changes');
|
|
|
|
|
}
|
|
|
|
|
invalidateWorkspaceQueries(ctx.queryClient, workspaceId);
|
|
|
|
|
},
|
|
|
|
|
},
|
2026-01-12 21:00:47 +00:00
|
|
|
|
|
|
|
|
// === Script Actions ===
|
|
|
|
|
RunSetupScript: {
|
|
|
|
|
id: 'run-setup-script',
|
|
|
|
|
label: 'Run Setup Script',
|
|
|
|
|
icon: TerminalIcon,
|
|
|
|
|
requiresTarget: true,
|
|
|
|
|
isVisible: (ctx) => ctx.hasWorkspace,
|
|
|
|
|
isEnabled: (ctx) => !ctx.isAttemptRunning,
|
|
|
|
|
execute: async (_ctx, workspaceId) => {
|
|
|
|
|
const result = await attemptsApi.runSetupScript(workspaceId);
|
|
|
|
|
if (!result.success) {
|
|
|
|
|
if (result.error?.type === 'no_script_configured') {
|
|
|
|
|
throw new Error('No setup script configured for this project');
|
|
|
|
|
}
|
|
|
|
|
if (result.error?.type === 'process_already_running') {
|
|
|
|
|
throw new Error('Cannot run script while another process is running');
|
|
|
|
|
}
|
|
|
|
|
throw new Error('Failed to run setup script');
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
RunCleanupScript: {
|
|
|
|
|
id: 'run-cleanup-script',
|
|
|
|
|
label: 'Run Cleanup Script',
|
|
|
|
|
icon: TerminalIcon,
|
|
|
|
|
requiresTarget: true,
|
|
|
|
|
isVisible: (ctx) => ctx.hasWorkspace,
|
|
|
|
|
isEnabled: (ctx) => !ctx.isAttemptRunning,
|
|
|
|
|
execute: async (_ctx, workspaceId) => {
|
|
|
|
|
const result = await attemptsApi.runCleanupScript(workspaceId);
|
|
|
|
|
if (!result.success) {
|
|
|
|
|
if (result.error?.type === 'no_script_configured') {
|
|
|
|
|
throw new Error('No cleanup script configured for this project');
|
|
|
|
|
}
|
|
|
|
|
if (result.error?.type === 'process_already_running') {
|
|
|
|
|
throw new Error('Cannot run script while another process is running');
|
|
|
|
|
}
|
|
|
|
|
throw new Error('Failed to run cleanup script');
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
2026-01-08 22:14:38 +00:00
|
|
|
} as const satisfies Record<string, ActionDefinition>;
|
|
|
|
|
|
|
|
|
|
// Helper to resolve dynamic label
|
|
|
|
|
export function resolveLabel(
|
|
|
|
|
action: ActionDefinition,
|
|
|
|
|
workspace?: Workspace
|
|
|
|
|
): string {
|
|
|
|
|
return typeof action.label === 'function'
|
|
|
|
|
? action.label(workspace)
|
|
|
|
|
: action.label;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Divider marker for navbar action groups
|
|
|
|
|
export const NavbarDivider = { type: 'divider' } as const;
|
|
|
|
|
export type NavbarItem = ActionDefinition | typeof NavbarDivider;
|
|
|
|
|
|
|
|
|
|
// Navbar action groups define which actions appear in each section
|
|
|
|
|
export const NavbarActionGroups = {
|
|
|
|
|
left: [Actions.ArchiveWorkspace, Actions.OpenInOldUI] as ActionDefinition[],
|
|
|
|
|
right: [
|
|
|
|
|
Actions.ToggleDiffViewMode,
|
|
|
|
|
Actions.ToggleAllDiffs,
|
|
|
|
|
NavbarDivider,
|
|
|
|
|
Actions.ToggleSidebar,
|
|
|
|
|
Actions.ToggleMainPanel,
|
|
|
|
|
Actions.ToggleChangesMode,
|
|
|
|
|
Actions.ToggleLogsMode,
|
|
|
|
|
Actions.TogglePreviewMode,
|
|
|
|
|
Actions.ToggleGitPanel,
|
|
|
|
|
] as NavbarItem[],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Divider marker for context bar action groups
|
|
|
|
|
export const ContextBarDivider = { type: 'divider' } as const;
|
|
|
|
|
export type ContextBarItem = ActionDefinition | typeof ContextBarDivider;
|
|
|
|
|
|
|
|
|
|
// ContextBar action groups define which actions appear in each section
|
|
|
|
|
export const ContextBarActionGroups = {
|
|
|
|
|
primary: [Actions.OpenInIDE, Actions.CopyPath] as ActionDefinition[],
|
|
|
|
|
secondary: [
|
|
|
|
|
Actions.ToggleDevServer,
|
|
|
|
|
Actions.TogglePreviewMode,
|
|
|
|
|
Actions.ToggleChangesMode,
|
|
|
|
|
] as ActionDefinition[],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Helper to check if an icon is a special type
|
|
|
|
|
export function isSpecialIcon(icon: ActionIcon): icon is SpecialIconType {
|
|
|
|
|
return icon === 'ide-icon' || icon === 'copy-icon';
|
|
|
|
|
}
|