Louis Knight-Webb 103f55621c Task and attempt relationships (#1083)
* Display parent task attempt (vibe-kanban 13d990e8)

If there is a parent task attempt, display a box with summary info about it and allow the user to navigate to that

frontend/src/components/panels/TaskPanel.tsx

* If parent task attempt, show icon in kanban card (vibe-kanban 806790be)

If task has a parent task attempt, it should be visible and also easy to navigate to the parent from the kanban card

Let's place an arrow-up icon to the left of the burger menu icon, when there is a parent task attempt. Clicking this should navigate to the task attempt

frontend/src/components/tasks/TaskKanbanBoard.tsx

* Popup to view related tasks for the task attempt (vibe-kanban b77eeb33)

frontend/src/components/panels/AttemptHeaderActions.tsx

Should be possible to view tasks that have parent_task_attempt set to this task. Similar to frontend/src/components/dialogs/tasks/ViewProcessesDialog.tsx

* i18n

* Improve related tasks (vibe-kanban) (#1166)

* Excellent! All checks are passing. Let me create a quick summary of what was changed:

## Summary

I've successfully fixed the related tasks list to show both parent and child tasks. Here's what was changed:

### Changes Made

1. **`frontend/src/hooks/useTaskChildren.ts`**
   - Renamed `useTaskChildren` to `useTaskRelationships` (kept old export for backwards compatibility)
   - Changed return type from `Task[]` to `TaskRelationships`
   - Now returns the full relationships object including `parent_task`, `current_attempt`, and `children`
   - Updated query keys from `taskChildren` to `taskRelationships`

2. **`frontend/src/components/dialogs/tasks/ViewRelatedTasksDialog.tsx`**
   - Updated to use `useTaskRelationships` hook
   - Combines parent and children into a single `relatedTasks` array
   - Now displays both parent and child tasks in the dialog

3. **`frontend/src/hooks/useTaskMutations.ts`**
   - Updated imports to use `taskRelationshipsKeys`
   - Updated cache invalidation comments to reflect "relationships" instead of "children"

### How It Works

The backend endpoint `/api/task-attempts/:id/children` already returns the full `TaskRelationships` object containing:
- `parent_task: Option<Task>` - The parent task (if any)
- `current_attempt: TaskAttempt` - The current attempt being viewed
- `children: Vec<Task>` - Child tasks created by this attempt

The hook now correctly exposes this full object, allowing the UI to display both parent and child tasks as "related tasks".

All TypeScript types check, linting passes, and formatting is correct!

* Perfect! All tasks are complete. Let me create a summary of the final changes:

## Summary

I've successfully fixed the related tasks feature to show both parent and child tasks. Here are the final changes:

### Changes Made

1. **Renamed `frontend/src/hooks/useTaskChildren.ts` → `frontend/src/hooks/useTaskRelationships.ts`**
   - Removed all backwards compatibility aliases
   - Changed return type from `Task[]` to `TaskRelationships`
   - Returns the full relationships object including `parent_task`, `current_attempt`, and `children`
   - Updated query keys from `taskChildren` to `taskRelationships`

2. **Updated `frontend/src/components/dialogs/tasks/ViewRelatedTasksDialog.tsx`**
   - Updated import to use `useTaskRelationships` from the renamed file
   - Combines parent and children into a single `relatedTasks` array
   - Now displays both parent and child tasks in the dialog

3. **Updated `frontend/src/hooks/useTaskMutations.ts`**
   - Updated import path to `@/hooks/useTaskRelationships`
   - Uses `taskRelationshipsKeys` for cache invalidation

### How It Works

The backend endpoint `/api/task-attempts/:id/children` returns a `TaskRelationships` object containing:
- `parent_task: Option<Task>` - The parent task (if exists)
- `current_attempt: TaskAttempt` - The current attempt being viewed
- `children: Vec<Task>` - Child tasks created by this attempt

The hook now correctly returns this full object, allowing the UI to display both parent and children as "related tasks" in the ViewRelatedTasksDialog.

All checks pass:
-  TypeScript compilation
-  ESLint (101 pre-existing warnings, no new ones)
-  Prettier formatting

* Excellent! The change is complete and passes linting.

## Summary

I've updated the navigation behavior for related tasks. When clicking on a related task (parent or child) from the ViewRelatedTasksDialog, the app now navigates to `/attempts/latest` instead of just the task page. This ensures users are taken directly to the latest task attempt, which is the expected behavior throughout the application.

**Changed file:**
- `frontend/src/components/ui/ActionsDropdown.tsx:80` - Updated navigation URL to include `/attempts/latest`

---------

Co-authored-by: Alex Netsch <alex@bloop.ai>
2025-11-04 11:21:06 +00:00
2025-08-08 13:53:27 +01:00
2025-08-08 13:53:27 +01:00
2025-10-31 17:07:25 +00:00
2025-09-04 10:52:18 +01:00
2025-08-08 13:53:27 +01:00
2025-07-11 15:57:30 +01:00
2025-10-20 13:24:04 +01:00
2025-07-11 16:31:08 +01:00
2025-10-31 17:07:25 +00:00
2025-06-14 15:14:08 -04:00
2025-06-25 09:27:29 +01:00
2025-06-25 09:27:29 +01:00

Vibe Kanban Logo

Get 10X more out of Claude Code, Gemini CLI, Codex, Amp and other coding agents...

npm Build status Ask DeepWiki

Overview

AI coding agents are increasingly writing the world's code and human engineers now spend the majority of their time planning, reviewing, and orchestrating tasks. Vibe Kanban streamlines this process, enabling you to:

  • Easily switch between different coding agents
  • Orchestrate the execution of multiple coding agents in parallel or in sequence
  • Quickly review work and start dev servers
  • Track the status of tasks that your coding agents are working on
  • Centralise configuration of coding agent MCP configs
  • Open projects remotely via SSH when running Vibe Kanban on a remote server

You can watch a video overview here.

Installation

Make sure you have authenticated with your favourite coding agent. A full list of supported coding agents can be found in the docs. Then in your terminal run:

npx vibe-kanban

Documentation

Please head to the website for the latest documentation and user guides.

Support

We use GitHub Discussions for feature requests. Please open a discussion to create a feature request. For bugs please open an issue on this repo.

Contributing

We would prefer that ideas and changes are first raised with the core team via GitHub Discussions or Discord, where we can discuss implementation details and alignment with the existing roadmap. Please do not open PRs without first discussing your proposal with the team.

Development

Prerequisites

Additional development tools:

cargo install cargo-watch
cargo install sqlx-cli

Install dependencies:

pnpm i

Running the dev server

pnpm run dev

This will start the backend. A blank DB will be copied from the dev_assets_seed folder.

Building the frontend

To build just the frontend:

cd frontend
pnpm build

Build from source

  1. Run build-npm-package.sh
  2. In the npx-cli folder run npm pack
  3. You can run your build with npx [GENERATED FILE].tgz

Environment Variables

The following environment variables can be configured at build time or runtime:

Variable Type Default Description
GITHUB_CLIENT_ID Build-time Ov23li9bxz3kKfPOIsGm GitHub OAuth app client ID for authentication
POSTHOG_API_KEY Build-time Empty PostHog analytics API key (disables analytics if empty)
POSTHOG_API_ENDPOINT Build-time Empty PostHog analytics endpoint (disables analytics if empty)
BACKEND_PORT Runtime 0 (auto-assign) Backend server port
FRONTEND_PORT Runtime 3000 Frontend development server port
HOST Runtime 127.0.0.1 Backend server host
DISABLE_WORKTREE_ORPHAN_CLEANUP Runtime Not set Disable git worktree cleanup (for debugging)

Build-time variables must be set when running pnpm run build. Runtime variables are read when the application starts.

Custom GitHub OAuth App (Optional)

By default, Vibe Kanban uses Bloop AI's GitHub OAuth app for authentication. To use your own GitHub app for self-hosting or custom branding:

  1. Create a GitHub OAuth App at GitHub Developer Settings
  2. Enable "Device Flow" in the app settings
  3. Set scopes to include user:email,repo
  4. Build with your client ID:
    GITHUB_CLIENT_ID=your_client_id_here pnpm run build
    

Remote Deployment

When running Vibe Kanban on a remote server (e.g., via systemctl, Docker, or cloud hosting), you can configure your editor to open projects via SSH:

  1. Access via tunnel: Use Cloudflare Tunnel, ngrok, or similar to expose the web UI
  2. Configure remote SSH in Settings → Editor Integration:
    • Set Remote SSH Host to your server hostname or IP
    • Set Remote SSH User to your SSH username (optional)
  3. Prerequisites:
    • SSH access from your local machine to the remote server
    • SSH keys configured (passwordless authentication)
    • VSCode Remote-SSH extension

When configured, the "Open in VSCode" buttons will generate URLs like vscode://vscode-remote/ssh-remote+user@host/path that open your local editor and connect to the remote server.

See the documentation for detailed setup instructions.

Description
Get 10X more out of Claude Code, Codex or any coding agent
https://www.vibekanban.com/
Readme Apache-2.0 48 MiB
Languages
Rust 51.1%
TypeScript 46.6%
CSS 1.1%
JavaScript 0.7%
PLpgSQL 0.2%
Other 0.2%