Skip to content

feat: add task detail slide-over panel#21

Merged
hoootan merged 1 commit intomainfrom
feat/task-detail-panel
Apr 11, 2026
Merged

feat: add task detail slide-over panel#21
hoootan merged 1 commit intomainfrom
feat/task-detail-panel

Conversation

@hoootan
Copy link
Copy Markdown
Owner

@hoootan hoootan commented Apr 11, 2026

Summary

  • Task cards are now clickable — opens a slide-over detail panel
  • Panel shows: title, description, status/priority/assignee dropdowns, comments, timestamps
  • All fields are editable inline (PATCH on change)
  • Comments timeline with add comment input (Enter or Send button)
  • Delete task button with board refresh
  • Works in both Kanban board and list views

Test plan

  • Click task card in board → detail panel opens
  • Change status → board updates, task moves columns
  • Change agent assignment → saves
  • Add comment → appears in timeline
  • Delete task → panel closes, board refreshes

- Click any task card to open a detail panel (Sheet)
- Change status, priority, and agent assignment inline
- View and add comments on tasks
- Delete tasks from detail view
- Shows linked run ID and timestamps
@hoootan hoootan merged commit 7248e2f into main Apr 11, 2026
Copilot AI review requested due to automatic review settings April 11, 2026 18:27
@hoootan hoootan deleted the feat/task-detail-panel branch April 11, 2026 18:27
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds an in-page task detail slide-over (Sheet) to the Tasks dashboard so users can open a task from board/list views, edit key fields inline, view/add comments, and delete the task.

Changes:

  • Made task cards and list rows clickable to open a detail Sheet.
  • Implemented inline PATCH updates for status/priority/assignee from the detail panel.
  • Added comments timeline + “add comment” input and a delete-task action.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines 110 to 123
@@ -114,8 +119,42 @@ export default function TasksPage() {
useEffect(() => {
fetchBoard();
api.getAgents().then((data) => setAgents(data.agents));
api.getFunctions().then((data) => setFunctions(data.functions));
}, [fetchBoard]);
Comment on lines +125 to +129
const openTaskDetail = async (task: TaskType) => {
setSelectedTask(task);
const data = await api.getComments({ task_id: task.id });
setTaskComments(data.comments);
};
Comment on lines +144 to +145
setTaskComments([...taskComments, comment]);
setNewComment('');
Comment on lines +52 to 55
function TaskCard({ task, onClick }: { task: TaskType; onClick: () => void }) {
return (
<div className="bg-background border rounded-lg p-3 shadow-sm hover:shadow-md transition-shadow space-y-2">
<div onClick={onClick} className="cursor-pointer bg-background border rounded-lg p-3 shadow-sm hover:shadow-md transition-shadow space-y-2">
<div className="flex items-start justify-between gap-2">
{Object.entries(board?.columns || {}).flatMap(([status, tasks]) =>
(tasks as TaskType[]).map(task => (
<div key={task.id} className="flex items-center gap-4 px-4 py-3 hover:bg-muted/50">
<div key={task.id} className="flex items-center gap-4 px-4 py-3 hover:bg-muted/50 cursor-pointer" onClick={() => openTaskDetail(task)}>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants