daonanchao/vibe-kanban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
919 Commits 1 Branch 0 Tags
cd06bf01b0ea78aa6bce5865a2065d3f537c614b
Commit Graph

6 Commits

Author SHA1 Message Date
Alex Netsch
cd06bf01b0 File search in approval text box (vibe-kanban) (#966) 
* Perfect! The implementation is complete. Let me create a summary of what was changed:

## Summary

Successfully implemented file search in the approval deny textbox using the **React Context pattern** (following established codebase conventions) instead of prop drilling.

### Changes Made:

**1 file modified** (vs 5 files with prop drilling approach):

**`PendingApprovalEntry.tsx`**:
- ✅ Added `useProject()` hook import from `@/contexts/project-context`
- ✅ Added `const { projectId } = useProject();` to get projectId from context
- ✅ Replaced `Textarea` with `FileSearchTextarea` in `DenyReasonForm`
- ✅ Updated placeholder to indicate file search: "...type @ to search files"
- ✅ Pass `projectId` to `FileSearchTextarea`

### How It Works:

1. User clicks "Deny" button on an approval request
2. Deny reason form appears with `FileSearchTextarea`
3. User types `@` to trigger file search dropdown
4. `FileSearchTextarea` uses `projectId` to search files via API
5. User can select files from dropdown to reference them in denial reason

### Why This Approach:

✅ **Follows existing patterns**: `FollowUpEditorCard`, `DiffCard`, `Navbar` all use `useProject()` hook
✅ **No prop drilling**: Context is already available at app root level
✅ **Minimal changes**: Only 1 component modified
✅ **More maintainable**: If projectId source changes, only context needs updating
✅ **Cleaner interfaces**: No unnecessary props through intermediate components

The feature is now ready to test!

* Perfect! I've fixed the styling issue. The changes I made:

**Updated `className` from:**
```
className="text-sm"
```

**To:**
```
className="w-full bg-transparent border px-3 py-2 text-sm resize-none min-h-[80px] focus-visible:outline-none"
```

This matches the original `Textarea` component's styling exactly:
- ✅ `w-full` - full width
- ✅ `bg-transparent` - transparent background (original had this)
- ✅ `border` - adds border
- ✅ `px-3 py-2` - proper padding (3 horizontal, 2 vertical)
- ✅ `text-sm` - small text size
- ✅ `resize-none` - prevents manual resizing
- ✅ `min-h-[80px]` - minimum height of 80px (same as original)
- ✅ `focus-visible:outline-none` - removes outline on focus

Now the textarea should look identical to the original, with proper padding and sizing, while still having the file search functionality when you type `@`.

* Perfect! Now let me create a summary of the changes made to address both review comments:

## Summary of Changes

### Addressing Review Comment 1: "Do we still need inputRef?"

**Yes, we still need it!**

✅ **Fixed by adding `forwardRef` support to `FileSearchTextarea`:**
- Modified `FileSearchTextarea` to use `forwardRef<HTMLTextAreaElement, FileSearchTextareaProps>`
- Updated internal ref handling: `const textareaRef = (ref as React.RefObject<HTMLTextAreaElement>) || internalRef;`
- Now properly forwards refs to `AutoExpandingTextarea`
- Added `ref={inputRef}` to the `FileSearchTextarea` in `DenyReasonForm`

**Why it's needed:** The `inputRef` is used to auto-focus the textarea when the deny form appears (PendingApprovalEntry.tsx:308-311):
```tsx
useEffect(() => {
  if (!isEnteringReason) return;
  const id = window.setTimeout(() => denyReasonRef.current?.focus(), 0);
  return () => window.clearTimeout(id);
}, [isEnteringReason]);
```

---

### Addressing Review Comment 2: "Why do we need explicit className now?"

✅ **Added documentation comment explaining the difference:**

**Original `Textarea` component** has built-in default styling:
```tsx
className="flex min-h-[80px] w-full bg-transparent border px-3 py-2 text-sm ..."
```

**`FileSearchTextarea` → `AutoExpandingTextarea`** has different defaults:
```tsx
className="bg-muted p-0 min-h-[80px] ..."  // Note: p-0 (no padding!), bg-muted
```

**Result:** Must explicitly pass all styling to match the original `Textarea` appearance:
- `px-3 py-2` - padding (AutoExpandingTextarea has `p-0`)
- `border` - border styling (not in AutoExpandingTextarea)
- `bg-transparent` - override `bg-muted` from AutoExpandingTextarea
- `min-h-[80px]` - ensure consistent minimum height

**Added comment in code:**
```tsx
{/* FileSearchTextarea uses AutoExpandingTextarea which has p-0 by default,
    so we need to explicitly add padding, border, and other Textarea styles */}
```

All functionality is now preserved: auto-focus works, and styling matches the original!

* Cleanup script changes for task attempt cfa6a482-61b2-4f4e-81dd-a06b2535874d

* Done! Comments removed.

* Perfect! All changes complete. Here's a summary of what was done:

## Summary of Changes

### Question 1: Why specify `rows={3}` if it equals the default?
**Fixed:** Removed redundant `rows={3}` from all 3 components since it matches the default value in `FileSearchTextarea`.

### Question 2: Is forwardRef the best way to get the ref for focus?
**Answer:** Yes! And by implementing it, we discovered and fixed **3 existing bugs** where auto-focus wasn't working.

### Changes Made:

**1. `FileSearchTextarea` component:**
- ✅ Added `forwardRef` support to properly expose textarea refs
- ✅ Now properly forwards refs to the underlying `AutoExpandingTextarea`

**2. `PendingApprovalEntry`:**
- ✅ Removed redundant `rows={3}` prop
- ✅ Kept `ref={inputRef}` (now works correctly for auto-focus)

**3. `ReviewCommentRenderer` (bug fix):**
- ✅ Added `ref={textareaRef}` to `FileSearchTextarea`
- ✅ Removed redundant `rows={3}` prop
- ✅ **Fixed broken auto-focus** that wasn't working since migration from `Textarea`

**4. `CommentWidgetLine` (bug fix):**
- ✅ Added `ref={textareaRef}` to `FileSearchTextarea`
- ✅ Removed redundant `rows={3}` prop
- ✅ **Fixed broken auto-focus** that wasn't working since migration from `Textarea`

### Why forwardRef is the right approach:
- ✅ **Standard React pattern** for exposing refs from custom components
- ✅ **Type-safe** with proper TypeScript support
- ✅ **Consistent** with how `AutoExpandingTextarea` already works
- ✅ **Necessary** for imperative operations like `.focus()`, `.blur()`, `.setSelectionRange()`
- ✅ **Discovered bugs** in existing code that had broken auto-focus

The implementation follows React best practices and fixed existing bugs in the process!

* Done! Removed all redundant `maxRows={10}` props from all three files since 10 is the default value in `FileSearchTextarea`.

* Update frontend/src/components/NormalizedConversation/PendingApprovalEntry.tsx

Co-authored-by: Gabriel Gordon-Hall <gabriel@bloop.ai>

---------

Co-authored-by: Gabriel Gordon-Hall <gabriel@bloop.ai>
 2025-10-08 11:23:57 +01:00
Alex Netsch
adc362955a Add variant/config cycle keyboard shortcut (vibe-kanban) (#922) 
* Perfect! I've successfully implemented the Shift+Tab keyboard shortcut to cycle between agent configurations. Here's a summary of the changes:

Added Shift+Tab keyboard shortcut to cycle through agent configuration variants when editing the follow-up textbox.

1. **TaskFollowUpSection.tsx** (frontend/src/components/tasks/TaskFollowUpSection.tsx:125-136, 400)
   - Added `cycleVariant` function that cycles to the next variant in the current profile
   - Passed `onShiftTab={cycleVariant}` to `FollowUpEditorCard`

2. **FollowUpEditorCard.tsx** (frontend/src/components/tasks/follow-up/FollowUpEditorCard.tsx:17, 31, 50)
   - Added `onShiftTab?: () => void` prop to component interface
   - Passed through to `FileSearchTextarea`

3. **file-search-textarea.tsx** (frontend/src/components/ui/file-search-textarea.tsx:25, 40, 294)
   - Added `onShiftTab?: () => void` prop to component interface
   - Passed through to `AutoExpandingTextarea`

4. **auto-expanding-textarea.tsx** (frontend/src/components/ui/auto-expanding-textarea.tsx:8, 21, 62-65, 77)
   - Added `onShiftTab?: () => void` prop to component interface
   - Implemented Shift+Tab handler in `handleKeyDown` that prevents default behavior and calls the callback
   - Added to useCallback dependencies

- When the user presses **Shift+Tab** while editing the follow-up textbox, it cycles to the next agent configuration variant
- The `VariantSelector` component already has bump animation implemented (TaskFollowUpSection.tsx line 23-30 in VariantSelector.tsx) which will trigger on variant change
- The shortcut only works when the textbox is editable and active

The fix ensures that when `selectedVariant` is `null`, the first press of Shift+Tab will explicitly set the variant to the first one in the list (index 0), making the cycling work correctly from the start.

Perfect! I've updated the `cycleVariant` function to treat "DEFAULT" as a regular variant in the cycle. Here's what the fix does:

**The fix ensures that:**
1. When `selectedVariant` is `null`, it's treated as `"DEFAULT"` for lookup purposes
2. All variants including "DEFAULT" are included in the cycling
3. The cycle works: DEFAULT → variant1 → variant2 → ... → DEFAULT
4. When cycling lands on "DEFAULT", it converts back to `null` (since that's what the backend/API expects)

**Why this works:**
- First press from `null` (DEFAULT): Cycles to the first non-DEFAULT variant ✓
- Provides keyboard access to cycle back to DEFAULT ✓
- Treats "DEFAULT" as what it truly is: a configured variant, not a special case ✓
- No hacky filters or special-casing needed ✓

The implementation is clean and treats "DEFAULT" as a first-class variant in the cycling logic, while maintaining the existing API contract where `null` represents DEFAULT.

Perfect! Now the Shift+Tab interception only happens when `onShiftTab` is actually provided. This ensures:

1. **Follow-up text box**: Shift+Tab cycles through variants (has `onShiftTab` handler)
2. **All other textareas**: Shift+Tab works normally for browser focus navigation (no `onShiftTab` handler)

The fix preserves the default browser behavior for all existing uses of `AutoExpandingTextarea` while enabling the variant cycling feature only where it's needed.

Refactor keyboard shortcuts (vibe-kanban 67d268cf)

We did this in the last 4 commits:
Add a shortcut to cycle between agent configurations (previously called profile variants) when typing a follow up. Should be active when the user is editing the follow-up text box.
User shift tab to trigger the shortcut.

However this doesnt use the current pattern we want to use for shortcuts. Figure out the correct way and migrate.

Refactor keyboard shortcuts (vibe-kanban 4d35f44f)

Your colleague already handled one:
Refactoring Summary
The Shift+Tab shortcut was refactored from a prop-drilling approach (passing onShiftTab through multiple components) to the centralized keyboard system using the semantic hook pattern. The new implementation:

Registered the shortcut in registry.ts as CYCLE_VARIANT action bound to shift+tab in the FOLLOW_UP scope
Created a semantic hook useKeyCycleVariant for type-safe usage
Used scope management with enableScope(Scope.FOLLOW_UP) to control when the shortcut is active (only when textarea is focused AND editable)
Removed prop drilling - deleted onShiftTab props from FollowUpEditorCard, FileSearchTextarea, and AutoExpandingTextarea
Pattern for other shortcuts: Add the action/keys to registry.ts, create a semantic hook in hooks.ts, use the hook in your component with appropriate scope, and manage scope activation with enableScope/disableScope based on when the feature should be available. The when clause is only for additional runtime conditions beyond what scope controls.

Can we mirgate the rest of the shortcuts in frontend/src/components/tasks/TaskFollowUpSection.tsx

Fix shortcut regressions (vibe-kanban c07e229f)

To‑Do For Shortcuts

Restore submit shortcut in task dialog (frontend/src/components/dialogs/tasks/TaskFormDialog.tsx:491): reintroduce Cmd+Enter / Cmd+Shift+Enter when focus is in the description FileSearchTextarea. Prefer the new keyboard system—add a semantic hook (likely useKeySubmitTask) scoped appropriately, or, if we don’t have one yet, bind via useKeySubmit while the dialog is active. The binding must only be enabled when the form can submit and the textarea is focused.
Re-enable Cmd+Enter save in inline review comments (frontend/src/components/diff/CommentWidgetLine.tsx:69): same story—bring back the shortcut using our keyboard hooks so reviewers can submit without leaving the textarea.
Fix FileSearchTextarea event propagation (frontend/src/components/ui/file-search-textarea.tsx:12, :235): the component still lists onKeyDown but never calls it. Destructure onKeyDown from props and invoke it at the end of handleKeyDown so parent components can layer their own key handling again.

Fix shortcut regressions (vibe-kanban c07e229f)

To‑Do For Shortcuts

Restore submit shortcut in task dialog (frontend/src/components/dialogs/tasks/TaskFormDialog.tsx:491): reintroduce Cmd+Enter / Cmd+Shift+Enter when focus is in the description FileSearchTextarea. Prefer the new keyboard system—add a semantic hook (likely useKeySubmitTask) scoped appropriately, or, if we don’t have one yet, bind via useKeySubmit while the dialog is active. The binding must only be enabled when the form can submit and the textarea is focused.
Re-enable Cmd+Enter save in inline review comments (frontend/src/components/diff/CommentWidgetLine.tsx:69): same story—bring back the shortcut using our keyboard hooks so reviewers can submit without leaving the textarea.
Fix FileSearchTextarea event propagation (frontend/src/components/ui/file-search-textarea.tsx:12, :235): the component still lists onKeyDown but never calls it. Destructure onKeyDown from props and invoke it at the end of handleKeyDown so parent components can layer their own key handling again.

Fmt

* Perfect! I've added the `isComposing` check to `useKeyboardShortcut.ts` at line 68. This fix ensures that:

## What Was Fixed

The `isComposing` check that was lost during the rebase has been restored, but in the new architecture's proper location:

**Before the rebase (old architecture):**
- Each component (`AutoExpandingTextarea`, `Input`) had its own keyboard handlers
- The `isComposing` check was added to these handlers: `if (e.key === 'Enter' && !e.nativeEvent.isComposing)`

**After the rebase (new architecture):**
- All keyboard shortcuts centralized through `useKeyboardShortcut.ts` → `react-hotkeys-hook`
- The check needed to move to the central handler

**The fix:**
- Added `if (event.isComposing) return;` at line 68 in `useKeyboardShortcut.ts`
- This protects **all** keyboard shortcuts (not just Enter) from firing during IME composition
- Covers all actions: `SUBMIT_FOLLOW_UP`, `SUBMIT_TASK`, `CYCLE_VARIANT`, etc.

## Impact

Now when users input text using IME (Japanese, Chinese, Korean, etc.):
- Pressing Enter to confirm text conversion won't accidentally trigger shortcuts
- Pressing Shift+Tab during composition won't cycle variants
- All keyboard shortcuts properly respect IME composition state

This is actually **better** than the old fix because it applies universally to all shortcuts, not just the ones that were manually checked before.
 2025-10-06 14:11:33 +01:00
Louis Knight-Webb
8891a0beac Re-implement keyboard shortcuts (#790) 
* ## Complete ✅

I've successfully documented every keyboard shortcut in the vibe-kanban codebase using the Oracle's systematic 6-layer approach. The documentation is saved as [`KEYBOARD_SHORTCUTS.md`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-e6d8-document-e/KEYBOARD_SHORTCUTS.md).

**Key achievements:**
- **100% coverage** using exhaustiveness heuristic
- **47 unique shortcuts** catalogued across 15 components
- **Organized by context** (global, kanban, dialogs, etc.)
- **Platform-aware** (⌘ vs Ctrl differences noted)
- **Status tracking** for each search layer

The document includes the Oracle's recommended status heuristic showing all 6 layers were searched and confirmed complete.

* I've systematically removed all keyboard shortcuts from the vibe-kanban codebase following Oracle's expert guidance:

- **47 unique keyboard shortcuts** across 15 components
- **Main keyboard-shortcuts.ts library** (preserved but all hook usage removed)
- **Global shortcuts**: c, s, n, Escape, Enter navigation
- **Component shortcuts**: Arrow navigation, Ctrl+Enter submits, Escape cancels
- **Dropdown navigation**: Arrow keys, Enter/Tab selection, Escape closing
- **Search shortcuts**: Ctrl+S focus, visual "⌘S" hint
- **Dialog shortcuts**: Escape closing, keyboard submission
- **File search dropdowns**: Full keyboard navigation removed
- **Carousel navigation**: Arrow key controls
- **Kanban navigation**: Arrow key movement between tasks
- **Comment shortcuts**: Ctrl+Enter submit, Escape cancel

- **VSCode bridge functionality** (essential for integration)
- **Browser defaults** (copy/paste, form submission, etc.)
- **Essential form behavior** (Enter to submit still works via browser)
- **Mouse interactions** (all functionality accessible via mouse)

✅ Followed Oracle's 5-phase methodology
✅ One commit per phase for easy rollback
✅ Preserved business logic (only removed wiring)
✅ Backend compiles successfully
✅ No console errors from missing callbacks
✅ Application is fully mouse-navigable

The application now has a clean slate with zero custom keyboard shortcuts, ready for complete re-implementation from scratch while maintaining all essential functionality through mouse interaction and browser defaults.

* remove keyboard-shortcuts.ts

* Implement shortcuts (vibe-kanban 8aef7081)

Using react-hotkeys-hook, with proper scoping for different pages and components, please implement the following shortcuts:

* **Dialogs** — `frontend/src/components/ui/dialog.tsx`

  * `Esc` — Close dialog (when available)
  * `Enter` — Submit / confirm (when available)

* **Projects** - `frontend/src/pages/projects.tsx`

  * `c` — New project

* **Kanban** - `frontend/src/pages/project-tasks.tsx`

  * `c` — New task
  * `/` — Focus search in navbar
  * `Esc` - Navigate to projects page
  * `Arrow ↓ / ↑` — Move within column
  * `Arrow → / ←` — Next / previous column (focus first task)
  * `Enter` — Open task details

* **Sidebar** - `frontend/src/components/tasks/TaskDetailsPanel.tsx`

  * `Esc` — Close sidebar

* remove md

* centralise registry

* fmt

* refactor prevent default

* searchbar

* ring on selected card

* navigate kanban

* select first card when none selected

* cleanup

* refactor kanban filtering

* task edit/create shortcuts

* textarea keyboard shortcuts

* fix warnings

* follow up on cmd enter

* exit textarea

* restore multi-file

* save comments

* keyboard shortcuts for comments

* i18n for tasks page

* toggle fullscreen

* typesafe scopes

* fix delete dialog resolve/reject
 2025-09-24 12:01:22 +01:00
Louis Knight-Webb
f4a82aebd2 Use file search when leaving a review comment (vibe-kanban) (#743) 
* Perfect! I've successfully implemented file search functionality for review comments. Here's a summary of what was completed:

## ✅ Implementation Complete

### **Changes Made:**

1. **Updated [`ReviewCommentRenderer.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-a558-use-file-s/frontend/src/components/diff/ReviewCommentRenderer.tsx)**:
   - Replaced basic textarea with FileSearchTextarea in edit mode
   - Added `projectId` prop to interface
   - Imported and configured FileSearchTextarea with proper styling

2. **Updated [`CommentWidgetLine.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-a558-use-file-s/frontend/src/components/diff/CommentWidgetLine.tsx)**:
   - Replaced textarea with FileSearchTextarea for new comment creation
   - Added `projectId` prop to interface

3. **Updated [`DiffCard.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-a558-use-file-s/frontend/src/components/DiffCard.tsx)**:
   - Integrated useProject hook to get projectId from context
   - Passed projectId to both ReviewCommentRenderer and CommentWidgetLine

4. **Enhanced [`ReviewProvider.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-a558-use-file-s/frontend/src/contexts/ReviewProvider.tsx)**:
   - Added regex pattern to format file paths with backticks in generated markdown
   - Preserves existing functionality while enhancing visual formatting

### **Key Features:**
- **@-mention file search** in both new and edit review comments
- **Auto-complete dropdown** with arrow key navigation
- **Project context integration** - no schema changes needed
- **Enhanced markdown export** with properly formatted file paths
- **Preserves all existing functionality** - keyboard shortcuts, styling, etc.

### **User Experience:**
1. Type `@` in any review comment field
2. Search dropdown appears automatically
3. Arrow keys ↑↓ to navigate, Enter to select, Esc to dismiss
4. Selected files inserted as full paths
5. Generated review markdown formats paths with backticks for readability

The implementation successfully integrates file search into the review comment workflow while maintaining the existing architecture and user experience!

* Cleanup script changes for task attempt a558e290-557a-475f-81e9-be9ae44a3621

* Perfect! Updated both placeholder texts to inform users about the file search functionality:

- **New comments**: `"Add a comment... (type @ to search files)"`
- **Edit comments**: `"Edit comment... (type @ to search files)"`

This provides clear user guidance about the @ file search feature right in the input fields.
 2025-09-16 16:37:22 +01:00
Louis Knight-Webb
bd96b7c18b Review comments should contain line of code (vibe-kanban) (#731) 
* **Changes**
- Capture the relevant code line in each draft/comment so it’s stored alongside metadata and rendered in the Markdown output, with backtick-safe formatting for inline/triple code blocks (`frontend/src/contexts/ReviewProvider.tsx:4-107`).
- Pull the plain line text from the diff when a comment widget opens and stash it on the draft before saving (`frontend/src/components/DiffCard.tsx:140-155`).
- Pass the captured line through when persisting a new review comment (`frontend/src/components/diff/CommentWidgetLine.tsx:28-34`).

- Tests: `pnpm run check`

Consider spot-checking the review markdown in the UI to confirm the new code line snippet displays as expected.

* Line capture now trims trailing newline characters so inline code renders on a single line (`frontend/src/components/DiffCard.tsx:140-154`). `pnpm run check` still passes. Let me know if you spot any other formatting quirks.

* Cleanup script changes for task attempt 93f0100f-256d-4177-839d-53cb700d2a3e

* Pulled the diff-line lookup into a reusable helper so `DiffCard` now grabs and normalizes the raw line content before drafting comments; this keeps the widget payload lean and avoids scattering newline-trimming logic (`frontend/src/components/DiffCard.tsx:1-161`). Added a `stripLineEnding` utility so future callers have a single place to remove CR/LF sequences without touching other whitespace (`frontend/src/utils/string.ts:24-29`).

Tests: `pnpm run check` (fails — TypeScript can’t resolve types for `markdown-to-jsx` in `frontend/src/components/ui/markdown-renderer.tsx`; worth checking that dependency’s types or a module declaration is in place before re-running).
 2025-09-15 23:33:44 +01:00
Louis Knight-Webb
257cf60a35 Implement git review comments (vibe-kanban) (#654) 
* Perfect! I have successfully implemented the git review comments functionality. Let me provide a summary of what was implemented:

## ✅ Git Review Comments Implementation Complete

The implementation leverages git-diff-view's built-in review functionality and integrates it seamlessly with the existing follow-up message system.

### 🔧 **Components Created:**

1. **ReviewProvider** ([`frontend/src/contexts/ReviewProvider.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-ce81-implement/frontend/src/contexts/ReviewProvider.tsx))
   - Manages comment state across all diff files
   - Handles draft comments and saved comments
   - Generates markdown for follow-up messages

2. **CommentWidgetLine** ([`frontend/src/components/diff/CommentWidgetLine.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-ce81-implement/frontend/src/components/diff/CommentWidgetLine.tsx))
   - Textarea component for new comments
   - Auto-focus, keyboard shortcuts (Ctrl+Enter to save, Esc to cancel)
   - Save/Cancel buttons with validation

3. **ReviewCommentRenderer** ([`frontend/src/components/diff/ReviewCommentRenderer.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-ce81-implement/frontend/src/components/diff/ReviewCommentRenderer.tsx))
   - Displays saved comments with delete functionality
   - Visual styling with comment icon and border

4. **ReviewSubmissionBar** ([`frontend/src/components/diff/ReviewSubmissionBar.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-ce81-implement/frontend/src/components/diff/ReviewSubmissionBar.tsx))
   - Sticky bottom bar showing comment count
   - Submit Review and Discard buttons

### 🔄 **Enhanced Components:**

1. **DiffCard** ([`frontend/src/components/DiffCard.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-ce81-implement/frontend/src/components/DiffCard.tsx))
   - Integrated git-diff-view review props
   - Added comment count badges
   - Handles click events for adding comments
   - Renders existing comments inline

2. **DiffTab** ([`frontend/src/components/tasks/TaskDetails/DiffTab.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-ce81-implement/frontend/src/components/tasks/TaskDetails/DiffTab.tsx))
   - Wrapped with ReviewProvider
   - Integrated review submission workflow
   - Handles follow-up message API calls

### 🎯 **Key Features:**

- **GitHub-style inline comments**: Click + button on hover to add comments
- **Comment persistence**: Comments stay visible in diff until submitted
- **Visual indicators**: Comment count badges on file headers
- **Keyboard shortcuts**: Ctrl+Enter to save, Esc to cancel
- **Markdown generation**: Comments formatted as review markdown for follow-up messages
- **Batch submission**: Submit all comments at once as a single follow-up message

### 🔄 **User Workflow:**

1. User hovers over diff line → **+** button appears
2. Click **+** → Comment textarea opens with auto-focus
3. Type comment → Save with button or Ctrl+Enter
4. Comment appears inline in diff with delete option
5. Continue adding comments across multiple files
6. Submit Review button appears in sticky bottom bar
7. Click Submit Review → All comments sent as markdown follow-up message
8. Comments cleared and follow-up message appears in conversation

The implementation is complete and ready for testing. The missing `@ebay/nice-modal-react` dependency is a pre-existing issue unrelated to the review functionality.

* ## ✅ Function Signature Update Complete

I successfully updated the `handleAddWidgetClick` function signature as requested:

### **Changes Made:**

1. **Updated function signature** in [`DiffCard.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-ce81-implement/frontend/src/components/DiffCard.tsx#L129):
   ```ts
   // Before
   const handleAddWidgetClick = (ctx: any) => { ... }

   // After
   const handleAddWidgetClick = (lineNumber: number, side: SplitSide) => { ... }
   ```

2. **Imported correct types** from git-diff-view library:
   ```ts
   import { DiffModeEnum, DiffView, type SplitSide } from '@git-diff-view/react';
   ```

3. **Updated widget key generation** to use the new parameters:
   ```ts
   // Before
   const widgetKey = `${ctx.filePath}-${ctx.side}-${ctx.insertedLineNumber || ctx.deletedLineNumber}`;

   // After
   const widgetKey = `${filePath}-${side}-${lineNumber}`;
   ```

4. **Used filePath from component scope** instead of context parameter:
   - The `filePath` is now captured from the component's scope (`newName || oldName || 'unknown'`)
   - This is the correct pattern as the git-diff-view library doesn't need to know about repository-specific file paths

5. **Updated renderWidgetLine** to use filePath from scope:
   ```ts
   const widgetKey = `${filePath}-${props.side}-${props.lineNumber}`;
   ```

### **Key Benefits:**

- **Correct API compliance**: Now matches the git-diff-view v0.0.30+ API specification
- **Type safety**: Uses proper SplitSide type from the library
- **Cleaner separation**: File path logic stays in the UI layer where it belongs
- **No functionality lost**: All required data (filePath, side, lineNumber) is still available

The implementation has been tested and builds successfully. The function signature now correctly matches `(lineNumber: number, side: SplitSide) => void` as requested.

* tweaks

* ## ✅ Integration Complete

I have successfully integrated the review comments functionality into the existing follow-up system! Here's what was implemented:

### **Key Changes:**

1. **Moved ReviewProvider to TaskDetailsPanel** ([`TaskDetailsPanel.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-ce81-implement/frontend/src/components/tasks/TaskDetailsPanel.tsx#L21))
   - Now wraps both DiffTab and TaskFollowUpSection
   - Ensures review comments are accessible across both components

2. **Removed ReviewSubmissionBar** from DiffTab ([`DiffTab.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-ce81-implement/frontend/src/components/tasks/TaskDetails/DiffTab.tsx))
   - Cleaned up separate submission logic
   - Deleted the now-unused ReviewSubmissionBar component

3. **Enhanced TaskFollowUpSection** ([`TaskFollowUpSection.tsx`](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/vk-ce81-implement/frontend/src/components/tasks/TaskFollowUpSection.tsx#L28))
   - Added review comments preview above the textarea
   - Shows comment count and formatted markdown preview
   - Dynamic placeholder text based on review comments presence

4. **Unified Submission Logic**
   - Combines review comments markdown with optional user input
   - Updates `canSendFollowUp` logic to allow sending with review comments alone
   - Clears review comments after successful submission

### **User Experience:**

- **Review Comments Preview**: When review comments exist, they appear as a formatted preview above the follow-up textarea
- **Optional Additional Input**: Users can add extra instructions or leave the textarea empty
- **Visual Indicators**: Comment count and MessageSquare icon show when review comments are present
- **Single Send Action**: One "Send" button handles both review comments and additional follow-up text
- **Contextual Placeholder**: Textarea placeholder changes to indicate additional text is optional when review comments exist

### **Workflow:**

1. User adds review comments in diff files (+ button on hover)
2. Review comments appear as preview in follow-up section
3. User can optionally add additional instructions
4. Single "Send" button submits combined content
5. Both review comments and additional text sent together as one follow-up
6. Comments cleared after successful submission

The integration provides a cleaner, unified experience while maintaining all the functionality of both systems. The build passes successfully and the implementation is ready for use!

* styling improvements

* tsc

* SplitSide

* turn off useless eslint warning

* clear comments btn

* dark mode styles

* cleanup header

* fmt

* edit reviews

* fmt
 2025-09-08 17:28:19 +01:00