Move faster with

Claude Code

Claude Code

Move faster withClaude Code

Claude Code

Goal: Install and integrate the vibe-kanban-web-companion so it renders at the app root in development. Do: 1) Detect package manager from lockfiles and use it: - pnpm-lock.yaml → pnpm add vibe-kanban-web-companion - yarn.lock → yarn add vibe-kanban-web-companion - package-lock.json → npm i vibe-kanban-web-companion - bun.lockb → bun add vibe-kanban-web-companion If already listed in package.json dependencies, skip install. 2) Detect framework and app entry: - Next.js (pages router): pages/_app.(tsx|js) - Next.js (app router): app/layout.(tsx|js) or an app/providers.(tsx|js) - Vite/CRA: src/main.(tsx|jsx|ts|js) and src/App.(tsx|jsx|ts|js) - Monorepo: operate in the correct package for the web app. Confirm by reading package.json and directory structure. 3) Integrate the component: import { VibeKanbanWebCompanion } from 'vibe-kanban-web-companion'; - Vite/CRA: render <VibeKanbanWebCompanion /> at the app root. - Next.js (pages): render in pages/_app.* - Next.js (app): render in app/layout.* or a client providers component. - For Next.js, if SSR issues arise, use dynamic import with ssr: false. 4) Verify: - Type-check, lint/format if configured. - Ensure it compiles and renders without SSR/hydration errors. Acceptance: - vibe-kanban-web-companion is installed in the correct package. - The component is rendered once at the app root without SSR/hydration errors. - Build/type-check passes.

This pull request introduces comprehensive browser-based integration tests for episode group functionality, and improves the accessibility and testability of the `GroupGrid` UI component. The new tests cover key user interactions and error handling for episode groups, while the UI changes add test IDs and accessibility attributes to important elements, and refactor drag-and-drop behavior for better usability. **Integration tests for episode group functionality:** * Added a new file `episode-group.browser.test.ts` containing integration tests that verify empty state, successful display, error handling, and user interactions for adding, renaming, and deleting episode groups, including database setup and teardown logic. **UI improvements for accessibility and testability:** * Added `data-testid` attributes to the group actions menu button and each dropdown item (`rename`, `move`, `delete`) in `GroupGrid.svelte`, improving testability and enabling more reliable selection in automated tests. [[1]](diffhunk://#diff-f8b2042b3f565e83ffc38bd4779e42e46445d1673056099eed7f69bf2fa8bde4R101-R110) [[2]](diffhunk://#diff-f8b2042b3f565e83ffc38bd4779e42e46445d1673056099eed7f69bf2fa8bde4L117-R135) * Added an `aria-label` to the group actions menu button for improved accessibility, using the group name in the label. **Drag-and-drop UI refactor:** * Moved the `draggable` handle from the entire group card to a dedicated icon (`AlignJustifyOutline`) in the top-left corner of each card, providing a clearer drag handle for users. [[1]](diffhunk://#diff-f8b2042b3f565e83ffc38bd4779e42e46445d1673056099eed7f69bf2fa8bde4R7) [[2]](diffhunk://#diff-f8b2042b3f565e83ffc38bd4779e42e46445d1673056099eed7f69bf2fa8bde4L74) [[3]](diffhunk://#diff-f8b2042b3f565e83ffc38bd4779e42e46445d1673056099eed7f69bf2fa8bde4R101-R110)

This pull request adds comprehensive integration tests for renaming and deleting episodes from the episode list, and introduces several testability improvements to the episode list UI. The changes include new tests for successful and failed rename/delete actions, improved mocking for navigation and filesystem APIs, and the addition of test IDs to key UI elements to support robust testing. ### Integration Test Enhancements * Added integration tests to verify that users can successfully rename and delete episodes, as well as tests to ensure proper error handling when these actions fail. * Improved mocking of navigation (`$app/navigation`) and filesystem (`@tauri-apps/plugin-fs`) APIs to isolate test cases and reliably check side effects like screen refreshes [[1]](diffhunk://#diff-7a72c1f6199681fa19a47d15f678b6c58d9a9010b017361c76fe8b05840ffc35R1) [[2]](diffhunk://#diff-7a72c1f6199681fa19a47d15f678b6c58d9a9010b017361c76fe8b05840ffc35R19-R30) [[3]](diffhunk://#diff-7a72c1f6199681fa19a47d15f678b6c58d9a9010b017361c76fe8b05840ffc35R103-L76). ### Episode List Table Testability * Added `data-testid` attributes to episode action buttons (rename, move, delete) and the drag handle for easier and more reliable element selection in tests [[1]](diffhunk://#diff-93b747b896a4f372b3d50c7a9c6fd17bb8fc22d28fd24df0fc3d466a1aa63350L81-R109) [[2]](diffhunk://#diff-93b747b896a4f372b3d50c7a9c6fd17bb8fc22d28fd24df0fc3d466a1aa63350R124) [[3]](diffhunk://#diff-93b747b896a4f372b3d50c7a9c6fd17bb8fc22d28fd24df0fc3d466a1aa63350R133) [[4]](diffhunk://#diff-93b747b896a4f372b3d50c7a9c6fd17bb8fc22d28fd24df0fc3d466a1aa63350R142). * Updated the drag handle UI to use the `AlignJustifyOutline` icon and made it non-clickable to prevent accidental row selection during drag operations [[1]](diffhunk://#diff-93b747b896a4f372b3d50c7a9c6fd17bb8fc22d28fd24df0fc3d466a1aa63350L16-R16) [[2]](diffhunk://#diff-93b747b896a4f372b3d50c7a9c6fd17bb8fc22d28fd24df0fc3d466a1aa63350R61-R63) [[3]](diffhunk://#diff-93b747b896a4f372b3d50c7a9c6fd17bb8fc22d28fd24df0fc3d466a1aa63350L81-R109). ### Confirm Modal Accessibility * Added a `data-testid="confirm-delete-button"` to the confirm button in the `ConfirmModal` component, improving testability for delete confirmation dialogs. ### Minor Test Utilities * Refactored helper functions in integration tests to return episode IDs, fetch episode titles, and open episode actions menus, supporting more granular assertions [[1]](diffhunk://#diff-7a72c1f6199681fa19a47d15f678b6c58d9a9010b017361c76fe8b05840ffc35L52-R63) [[2]](diffhunk://#diff-7a72c1f6199681fa19a47d15f678b6c58d9a9010b017361c76fe8b05840ffc35R72-R93).

Goal: Install and integrate the vibe-kanban-web-companion so it renders at the app root in development. Do: 1) Detect package manager from lockfiles and use it: - pnpm-lock.yaml → pnpm add vibe-kanban-web-companion - yarn.lock → yarn add vibe-kanban-web-companion - package-lock.json → npm i vibe-kanban-web-companion - bun.lockb → bun add vibe-kanban-web-companion If already listed in package.json dependencies, skip install. 2) Detect framework and app entry: - Next.js (pages router): pages/_app.(tsx|js) - Next.js (app router): app/layout.(tsx|js) or an app/providers.(tsx|js) - Vite/CRA: src/main.(tsx|jsx|ts|js) and src/App.(tsx|jsx|ts|js) - Monorepo: operate in the correct package for the web app. Confirm by reading package.json and directory structure. 3) Integrate the component: import { VibeKanbanWebCompanion } from 'vibe-kanban-web-companion'; - Vite/CRA: render <VibeKanbanWebCompanion /> at the app root. - Next.js (pages): render in pages/_app.* - Next.js (app): render in app/layout.* or a client providers component. - For Next.js, if SSR issues arise, use dynamic import with ssr: false. 4) Verify: - Type-check, lint/format if configured. - Ensure it compiles and renders without SSR/hydration errors. Acceptance: - vibe-kanban-web-companion is installed in the correct package. - The component is rendered once at the app root without SSR/hydration errors. - Build/type-check passes.

This pull request introduces comprehensive browser-based integration tests for episode group functionality, and improves the accessibility and testability of the `GroupGrid` UI component. The new tests cover key user interactions and error handling for episode groups, while the UI changes add test IDs and accessibility attributes to important elements, and refactor drag-and-drop behavior for better usability. **Integration tests for episode group functionality:** * Added a new file `episode-group.browser.test.ts` containing integration tests that verify empty state, successful display, error handling, and user interactions for adding, renaming, and deleting episode groups, including database setup and teardown logic. **UI improvements for accessibility and testability:** * Added `data-testid` attributes to the group actions menu button and each dropdown item (`rename`, `move`, `delete`) in `GroupGrid.svelte`, improving testability and enabling more reliable selection in automated tests. [[1]](diffhunk://#diff-f8b2042b3f565e83ffc38bd4779e42e46445d1673056099eed7f69bf2fa8bde4R101-R110) [[2]](diffhunk://#diff-f8b2042b3f565e83ffc38bd4779e42e46445d1673056099eed7f69bf2fa8bde4L117-R135) * Added an `aria-label` to the group actions menu button for improved accessibility, using the group name in the label. **Drag-and-drop UI refactor:** * Moved the `draggable` handle from the entire group card to a dedicated icon (`AlignJustifyOutline`) in the top-left corner of each card, providing a clearer drag handle for users. [[1]](diffhunk://#diff-f8b2042b3f565e83ffc38bd4779e42e46445d1673056099eed7f69bf2fa8bde4R7) [[2]](diffhunk://#diff-f8b2042b3f565e83ffc38bd4779e42e46445d1673056099eed7f69bf2fa8bde4L74) [[3]](diffhunk://#diff-f8b2042b3f565e83ffc38bd4779e42e46445d1673056099eed7f69bf2fa8bde4R101-R110)

This pull request adds comprehensive integration tests for renaming and deleting episodes from the episode list, and introduces several testability improvements to the episode list UI. The changes include new tests for successful and failed rename/delete actions, improved mocking for navigation and filesystem APIs, and the addition of test IDs to key UI elements to support robust testing. ### Integration Test Enhancements * Added integration tests to verify that users can successfully rename and delete episodes, as well as tests to ensure proper error handling when these actions fail. * Improved mocking of navigation (`$app/navigation`) and filesystem (`@tauri-apps/plugin-fs`) APIs to isolate test cases and reliably check side effects like screen refreshes [[1]](diffhunk://#diff-7a72c1f6199681fa19a47d15f678b6c58d9a9010b017361c76fe8b05840ffc35R1) [[2]](diffhunk://#diff-7a72c1f6199681fa19a47d15f678b6c58d9a9010b017361c76fe8b05840ffc35R19-R30) [[3]](diffhunk://#diff-7a72c1f6199681fa19a47d15f678b6c58d9a9010b017361c76fe8b05840ffc35R103-L76). ### Episode List Table Testability * Added `data-testid` attributes to episode action buttons (rename, move, delete) and the drag handle for easier and more reliable element selection in tests [[1]](diffhunk://#diff-93b747b896a4f372b3d50c7a9c6fd17bb8fc22d28fd24df0fc3d466a1aa63350L81-R109) [[2]](diffhunk://#diff-93b747b896a4f372b3d50c7a9c6fd17bb8fc22d28fd24df0fc3d466a1aa63350R124) [[3]](diffhunk://#diff-93b747b896a4f372b3d50c7a9c6fd17bb8fc22d28fd24df0fc3d466a1aa63350R133) [[4]](diffhunk://#diff-93b747b896a4f372b3d50c7a9c6fd17bb8fc22d28fd24df0fc3d466a1aa63350R142). * Updated the drag handle UI to use the `AlignJustifyOutline` icon and made it non-clickable to prevent accidental row selection during drag operations [[1]](diffhunk://#diff-93b747b896a4f372b3d50c7a9c6fd17bb8fc22d28fd24df0fc3d466a1aa63350L16-R16) [[2]](diffhunk://#diff-93b747b896a4f372b3d50c7a9c6fd17bb8fc22d28fd24df0fc3d466a1aa63350R61-R63) [[3]](diffhunk://#diff-93b747b896a4f372b3d50c7a9c6fd17bb8fc22d28fd24df0fc3d466a1aa63350L81-R109). ### Confirm Modal Accessibility * Added a `data-testid="confirm-delete-button"` to the confirm button in the `ConfirmModal` component, improving testability for delete confirmation dialogs. ### Minor Test Utilities * Refactored helper functions in integration tests to return episode IDs, fetch episode titles, and open episode actions menus, supporting more granular assertions [[1]](diffhunk://#diff-7a72c1f6199681fa19a47d15f678b6c58d9a9010b017361c76fe8b05840ffc35L52-R63) [[2]](diffhunk://#diff-7a72c1f6199681fa19a47d15f678b6c58d9a9010b017361c76fe8b05840ffc35R72-R93).