feat(KB-145): add inline editing to task detail modal

- Add edit state and handlers to TaskDetailModal component
- Add edit button and inline editing UI with save/cancel actions
- Add CSS styles for inline editing form elements
- Add comprehensive tests for inline editing functionality
- Update README and add changeset for the feature

packages/dashboard/app/components/TaskDetailModal.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react";
+import { Pencil } from "lucide-react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import type { Task, TaskDetail, TaskAttachment, Column, MergeResult, PrInfo } from "@kb/core";
@@ -66,6 +67,8 @@ function truncate(s: string, max: number): string {
   return s.length > max ? s.slice(0, max) + "…" : s;
 }
 
+const EDITABLE_COLUMNS: Set<Column> = new Set(["triage", "todo"]);
+
 export function TaskDetailModal({
   task,
   tasks = [],
@@ -90,9 +93,98 @@ export function TaskDetailModal({
   const [showRefineModal, setShowRefineModal] = useState(false);
   const [refineFeedback, setRefineFeedback] = useState("");
   const [isRefining, setIsRefining] = useState(false);
+
+  // Edit mode state
+  const [isEditing, setIsEditing] = useState(false);
+  const [editTitle, setEditTitle] = useState(task.title || "");
+  const [editDescription, setEditDescription] = useState(task.description || "");
+  const [isSaving, setIsSaving] = useState(false);
+  const titleInputRef = useRef<HTMLInputElement>(null);
+
+  // Reset edit state when task changes
   useEffect(() => {
-    if (!showDepDropdown) setDepSearch("");
-  }, [showDepDropdown]);
+    setEditTitle(task.title || "");
+    setEditDescription(task.description || "");
+    setIsEditing(false);
+  }, [task.id, task.title, task.description]);
+
+  // Auto-focus title when entering edit mode
+  useEffect(() => {
+    if (isEditing) {
+      titleInputRef.current?.focus();
+      titleInputRef.current?.select();
+    }
+  }, [isEditing]);
+
+  // Check if task can be edited
+  const canEdit = EDITABLE_COLUMNS.has(task.column) && !isSaving;
+  const hasChanges = editTitle !== (task.title || "") || editDescription !== (task.description || "");
+
+  const enterEditMode = useCallback(() => {
+    if (!canEdit) return;
+    setIsEditing(true);
+    setEditTitle(task.title || "");
+    setEditDescription(task.description || "");
+  }, [canEdit, task.title, task.description]);
+
+  const exitEditMode = useCallback(() => {
+    setIsEditing(false);
+    setEditTitle(task.title || "");
+    setEditDescription(task.description || "");
+  }, [task.title, task.description]);
+
+  const handleSave = useCallback(async () => {
+    if (!hasChanges) {
+      exitEditMode();
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      await updateTask(task.id, {
+        title: editTitle.trim() || undefined,
+        description: editDescription.trim() || undefined,
+      });
+      addToast(`Updated ${task.id}`, "success");
+      setIsEditing(false);
+    } catch (err: any) {
+      addToast(`Failed to update ${task.id}: ${err.message}`, "error");
+      // Stay in edit mode on error so user can retry
+    } finally {
+      setIsSaving(false);
+    }
+  }, [task.id, editTitle, editDescription, hasChanges, exitEditMode, addToast]);
+
+  const handleTitleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      // Move focus to description textarea
+      const textarea = document.querySelector('.modal-edit-textarea') as HTMLTextAreaElement;
+      textarea?.focus();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      exitEditMode();
+    }
+  }, [exitEditMode]);
+
+  const handleDescKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault();
+      handleSave();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      exitEditMode();
+    }
+  }, [handleSave, exitEditMode]);
+
+  const handleDescChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setEditDescription(e.target.value);
+    // Auto-resize textarea
+    const el = e.target;
+    el.style.height = "auto";
+    el.style.height = el.scrollHeight + "px";
+  }, []);
+
   const fileInputRef = useRef<HTMLInputElement>(null);
   const { entries: agentLogEntries, loading: agentLogLoading } = useAgentLogs(
     task.id,
@@ -100,11 +192,11 @@ export function TaskDetailModal({
   );
   useEffect(() => {
     const handleKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
+      if (e.key === "Escape" && !isEditing) onClose();
     };
     document.addEventListener("keydown", handleKey);
     return () => document.removeEventListener("keydown", handleKey);
-  }, [onClose]);
+  }, [onClose, isEditing]);
 
   const handleOverlayClick = useCallback(
     (e: React.MouseEvent) => {
@@ -403,16 +495,73 @@ export function TaskDetailModal({
               {COLUMN_LABELS[task.column]}
             </span>
           </div>
-          <button className="modal-close" onClick={onClose}>
-            &times;
-          </button>
+          <div className="modal-header-actions">
+            {!isEditing && canEdit && (
+              <button
+                className="modal-edit-btn"
+                onClick={enterEditMode}
+                title="Edit task"
+                aria-label="Edit task"
+              >
+                <Pencil size={14} />
+              </button>
+            )}
+            <button className="modal-close" onClick={onClose}>
+              &times;
+            </button>
+          </div>
         </div>
         <div className="detail-body">
-          <h2 className="detail-title">{task.title || task.description}</h2>
-          <div className="detail-meta">
-            Created {new Date(task.createdAt).toLocaleDateString()} · Updated{" "}
-            {new Date(task.updatedAt).toLocaleDateString()}
-          </div>
+          {isEditing ? (
+            <div className="modal-edit-form">
+              <input
+                ref={titleInputRef}
+                type="text"
+                className="modal-edit-input"
+                placeholder="Task title"
+                value={editTitle}
+                onChange={(e) => setEditTitle(e.target.value)}
+                onKeyDown={handleTitleKeyDown}
+                disabled={isSaving}
+              />
+              <textarea
+                className="modal-edit-textarea"
+                placeholder="Task description"
+                value={editDescription}
+                onChange={handleDescChange}
+                onKeyDown={handleDescKeyDown}
+                disabled={isSaving}
+                rows={3}
+              />
+              <div className="modal-edit-actions">
+                <button
+                  className="btn btn-sm"
+                  onClick={exitEditMode}
+                  disabled={isSaving}
+                >
+                  Cancel
+                </button>
+                <button
+                  className="btn btn-primary btn-sm"
+                  onClick={handleSave}
+                  disabled={!hasChanges || isSaving}
+                >
+                  {isSaving ? "Saving…" : "Save"}
+                </button>
+              </div>
+              <div className="modal-edit-hint">
+                <kbd>Ctrl+Enter</kbd> to save · <kbd>Escape</kbd> to cancel
+              </div>
+            </div>
+          ) : (
+            <>
+              <h2 className="detail-title">{task.title || task.description}</h2>
+              <div className="detail-meta">
+                Created {new Date(task.createdAt).toLocaleDateString()} · Updated{" "}
+                {new Date(task.updatedAt).toLocaleDateString()}
+              </div>
+            </>
+          )}
           {task.status === "failed" && task.error && (
             <div className="detail-error-alert">
               <span className="detail-error-icon">⚠</span>
@@ -422,6 +571,8 @@ export function TaskDetailModal({
               </div>
             </div>
           )}
+          {!isEditing && (
+            <>
           <div className="detail-tabs">
             <button
               className={`detail-tab${activeTab === "definition" ? " detail-tab-active" : ""}`}
@@ -737,6 +888,8 @@ export function TaskDetailModal({
           )}
           </>
           )}
+          </>
+          )}
         </div>
         <div className="modal-actions">
           <button className="btn btn-danger btn-sm" onClick={handleDelete}>

packages/dashboard/app/components/__tests__/TaskDetailModal.test.tsx

@@ -2323,4 +2323,352 @@ describe("TaskDetailModal", () => {
       });
     });
   });
+
+  describe("inline editing", () => {
+    beforeEach(() => {
+      vi.clearAllMocks();
+    });
+
+    it("shows Edit button in header when task is in triage column", () => {
+      const { container } = render(
+        <TaskDetailModal
+          task={makeTask({ id: "KB-001", column: "triage", title: "Test task" })}
+          onClose={noop}
+          onMoveTask={noopMove}
+          onDeleteTask={noopDelete}
+          onMergeTask={noopMerge}
+          onOpenDetail={noopOpenDetail}
+          addToast={noop}
+        />,
+      );
+
+      const editButton = container.querySelector(".modal-edit-btn");
+      expect(editButton).toBeTruthy();
+    });
+
+    it("shows Edit button in header when task is in todo column", () => {
+      const { container } = render(
+        <TaskDetailModal
+          task={makeTask({ id: "KB-001", column: "todo", title: "Test task" })}
+          onClose={noop}
+          onMoveTask={noopMove}
+          onDeleteTask={noopDelete}
+          onMergeTask={noopMerge}
+          onOpenDetail={noopOpenDetail}
+          addToast={noop}
+        />,
+      );
+
+      const editButton = container.querySelector(".modal-edit-btn");
+      expect(editButton).toBeTruthy();
+    });
+
+    it("does not show Edit button when task is in in-progress column", () => {
+      const { container } = render(
+        <TaskDetailModal
+          task={makeTask({ id: "KB-001", column: "in-progress", title: "Test task" })}
+          onClose={noop}
+          onMoveTask={noopMove}
+          onDeleteTask={noopDelete}
+          onMergeTask={noopMerge}
+          onOpenDetail={noopOpenDetail}
+          addToast={noop}
+        />,
+      );
+
+      const editButton = container.querySelector(".modal-edit-btn");
+      expect(editButton).toBeNull();
+    });
+
+    it("does not show Edit button when already in edit mode", () => {
+      const { container } = render(
+        <TaskDetailModal
+          task={makeTask({ id: "KB-001", column: "triage", title: "Test task" })}
+          onClose={noop}
+          onMoveTask={noopMove}
+          onDeleteTask={noopDelete}
+          onMergeTask={noopMerge}
+          onOpenDetail={noopOpenDetail}
+          addToast={noop}
+        />,
+      );
+
+      // Enter edit mode
+      const editButton = container.querySelector(".modal-edit-btn");
+      expect(editButton).toBeTruthy();
+      fireEvent.click(editButton!);
+
+      // Edit button should be hidden now
+      expect(container.querySelector(".modal-edit-btn")).toBeNull();
+      // But input should be visible
+      expect(container.querySelector(".modal-edit-input")).toBeTruthy();
+    });
+
+    it("entering edit mode shows title input and description textarea", () => {
+      const { container } = render(
+        <TaskDetailModal
+          task={makeTask({ id: "KB-001", column: "triage", title: "Test task", description: "Test description" })}
+          onClose={noop}
+          onMoveTask={noopMove}
+          onDeleteTask={noopDelete}
+          onMergeTask={noopMerge}
+          onOpenDetail={noopOpenDetail}
+          addToast={noop}
+        />,
+      );
+
+      // Initially shows title as h2
+      expect(container.querySelector("h2.detail-title")).toBeTruthy();
+      expect(container.querySelector(".modal-edit-input")).toBeNull();
+
+      // Enter edit mode
+      fireEvent.click(container.querySelector(".modal-edit-btn")!);
+
+      // Now shows edit form
+      expect(container.querySelector("h2.detail-title")).toBeNull();
+      expect(container.querySelector(".modal-edit-input")).toBeTruthy();
+      expect(container.querySelector(".modal-edit-textarea")).toBeTruthy();
+    });
+
+    it("clicking Cancel exits edit mode without saving", () => {
+      const { container } = render(
+        <TaskDetailModal
+          task={makeTask({ id: "KB-001", column: "triage", title: "Original title", description: "Original description" })}
+          onClose={noop}
+          onMoveTask={noopMove}
+          onDeleteTask={noopDelete}
+          onMergeTask={noopMerge}
+          onOpenDetail={noopOpenDetail}
+          addToast={noop}
+        />,
+      );
+
+      // Enter edit mode
+      fireEvent.click(container.querySelector(".modal-edit-btn")!);
+
+      // Change values
+      const titleInput = container.querySelector(".modal-edit-input") as HTMLInputElement;
+      fireEvent.change(titleInput, { target: { value: "Modified title" } });
+
+      // Click Cancel
+      fireEvent.click(screen.getByText("Cancel"));
+
+      // Should exit edit mode without saving
+      expect(container.querySelector(".modal-edit-input")).toBeNull();
+      expect(container.querySelector("h2.detail-title")?.textContent).toBe("Original title");
+    });
+
+    it("clicking Save calls updateTask with correct parameters", async () => {
+      const { updateTask } = await import("../../api");
+      const mockUpdate = vi.mocked(updateTask);
+      mockUpdate.mockResolvedValueOnce({ id: "KB-001" } as Task);
+
+      const { container } = render(
+        <TaskDetailModal
+          task={makeTask({ id: "KB-001", column: "triage", title: "Original title", description: "Original description" })}
+          onClose={noop}
+          onMoveTask={noopMove}
+          onDeleteTask={noopDelete}
+          onMergeTask={noopMerge}
+          onOpenDetail={noopOpenDetail}
+          addToast={noop}
+        />,
+      );
+
+      // Enter edit mode
+      fireEvent.click(container.querySelector(".modal-edit-btn")!);
+
+      // Change values
+      const titleInput = container.querySelector(".modal-edit-input") as HTMLInputElement;
+      const descTextarea = container.querySelector(".modal-edit-textarea") as HTMLTextAreaElement;
+      fireEvent.change(titleInput, { target: { value: "New title" } });
+      fireEvent.change(descTextarea, { target: { value: "New description" } });
+
+      // Click Save
+      fireEvent.click(screen.getByText("Save"));
+
+      await waitFor(() => {
+        expect(mockUpdate).toHaveBeenCalledWith("KB-001", {
+          title: "New title",
+          description: "New description",
+        });
+      });
+    });
+
+    it("Save button is disabled when no changes made", () => {
+      const { container } = render(
+        <TaskDetailModal
+          task={makeTask({ id: "KB-001", column: "triage", title: "Test title", description: "Test description" })}
+          onClose={noop}
+          onMoveTask={noopMove}
+          onDeleteTask={noopDelete}
+          onMergeTask={noopMerge}
+          onOpenDetail={noopOpenDetail}
+          addToast={noop}
+        />,
+      );
+
+      // Enter edit mode
+      fireEvent.click(container.querySelector(".modal-edit-btn")!);
+
+      const saveButton = screen.getByText("Save");
+      expect(saveButton.hasAttribute("disabled")).toBe(true);
+    });
+
+    it("Save button shows 'Saving…' during save operation", async () => {
+      const { updateTask } = await import("../../api");
+      const mockUpdate = vi.mocked(updateTask);
+      // Delay the resolution to keep isSaving true
+      mockUpdate.mockImplementationOnce(() => new Promise(resolve => setTimeout(() => resolve({ id: "KB-001" } as Task), 100)));
+
+      const { container } = render(
+        <TaskDetailModal
+          task={makeTask({ id: "KB-001", column: "triage", title: "Original" })}
+          onClose={noop}
+          onMoveTask={noopMove}
+          onDeleteTask={noopDelete}
+          onMergeTask={noopMerge}
+          onOpenDetail={noopOpenDetail}
+          addToast={noop}
+        />,
+      );
+
+      // Enter edit mode
+      fireEvent.click(container.querySelector(".modal-edit-btn")!);
+
+      // Change value
+      const titleInput = container.querySelector(".modal-edit-input") as HTMLInputElement;
+      fireEvent.change(titleInput, { target: { value: "New title" } });
+
+      // Click Save
+      fireEvent.click(screen.getByText("Save"));
+
+      // Should show "Saving…" immediately
+      expect(screen.getByText("Saving…")).toBeTruthy();
+    });
+
+    it("successful save shows toast and exits edit mode", async () => {
+      const { updateTask } = await import("../../api");
+      const mockUpdate = vi.mocked(updateTask);
+      mockUpdate.mockResolvedValueOnce({ id: "KB-001" } as Task);
+
+      const addToast = vi.fn();
+
+      const { container } = render(
+        <TaskDetailModal
+          task={makeTask({ id: "KB-001", column: "triage", title: "Original" })}
+          onClose={noop}
+          onMoveTask={noopMove}
+          onDeleteTask={noopDelete}
+          onMergeTask={noopMerge}
+          onOpenDetail={noopOpenDetail}
+          addToast={addToast}
+        />,
+      );
+
+      // Enter edit mode
+      fireEvent.click(container.querySelector(".modal-edit-btn")!);
+
+      // Change value
+      const titleInput = container.querySelector(".modal-edit-input") as HTMLInputElement;
+      fireEvent.change(titleInput, { target: { value: "New title" } });
+
+      // Click Save
+      fireEvent.click(screen.getByText("Save"));
+
+      await waitFor(() => {
+        expect(addToast).toHaveBeenCalledWith("Updated KB-001", "success");
+      });
+
+      // Should exit edit mode
+      expect(container.querySelector(".modal-edit-input")).toBeNull();
+    });
+
+    it("failed save shows toast with error and stays in edit mode", async () => {
+      const { updateTask } = await import("../../api");
+      const mockUpdate = vi.mocked(updateTask);
+      mockUpdate.mockRejectedValueOnce(new Error("Network error"));
+
+      const addToast = vi.fn();
+
+      const { container } = render(
+        <TaskDetailModal
+          task={makeTask({ id: "KB-001", column: "triage", title: "Original" })}
+          onClose={noop}
+          onMoveTask={noopMove}
+          onDeleteTask={noopDelete}
+          onMergeTask={noopMerge}
+          onOpenDetail={noopOpenDetail}
+          addToast={addToast}
+        />,
+      );
+
+      // Enter edit mode
+      fireEvent.click(container.querySelector(".modal-edit-btn")!);
+
+      // Change value
+      const titleInput = container.querySelector(".modal-edit-input") as HTMLInputElement;
+      fireEvent.change(titleInput, { target: { value: "New title" } });
+
+      // Click Save
+      fireEvent.click(screen.getByText("Save"));
+
+      await waitFor(() => {
+        expect(addToast).toHaveBeenCalledWith("Failed to update KB-001: Network error", "error");
+      });
+
+      // Should stay in edit mode
+      expect(container.querySelector(".modal-edit-input")).toBeTruthy();
+    });
+
+    it("Escape key exits edit mode", () => {
+      const { container } = render(
+        <TaskDetailModal
+          task={makeTask({ id: "KB-001", column: "triage", title: "Test title" })}
+          onClose={noop}
+          onMoveTask={noopMove}
+          onDeleteTask={noopDelete}
+          onMergeTask={noopMerge}
+          onOpenDetail={noopOpenDetail}
+          addToast={noop}
+        />,
+      );
+
+      // Enter edit mode
+      fireEvent.click(container.querySelector(".modal-edit-btn")!);
+      expect(container.querySelector(".modal-edit-input")).toBeTruthy();
+
+      // Press Escape
+      const titleInput = container.querySelector(".modal-edit-input") as HTMLInputElement;
+      fireEvent.keyDown(titleInput, { key: "Escape" });
+
+      // Should exit edit mode
+      expect(container.querySelector(".modal-edit-input")).toBeNull();
+    });
+
+    it("Enter in title input moves focus to description textarea", () => {
+      const { container } = render(
+        <TaskDetailModal
+          task={makeTask({ id: "KB-001", column: "triage", title: "Test title", description: "Test description" })}
+          onClose={noop}
+          onMoveTask={noopMove}
+          onDeleteTask={noopDelete}
+          onMergeTask={noopMerge}
+          onOpenDetail={noopOpenDetail}
+          addToast={noop}
+        />,
+      );
+
+      // Enter edit mode
+      fireEvent.click(container.querySelector(".modal-edit-btn")!);
+
+      // Press Enter in title input
+      const titleInput = container.querySelector(".modal-edit-input") as HTMLInputElement;
+      fireEvent.keyDown(titleInput, { key: "Enter" });
+
+      // Description textarea should be focused (we can check by seeing if the textarea exists)
+      // Note: focus testing is limited in JSDOM, but we verify the handler doesn't error
+      expect(container.querySelector(".modal-edit-textarea")).toBeTruthy();
+    });
+  });
 });