refactor(FN-761): make card inline editing description-only and remove terminal features

- Simplify TaskCard inline editing to support description-only editing - Remove terminal/PTY features: useTerminal hook, TerminalModal, xterm integration - Remove project store resolver caching and session file route handling - Simplify executor worktree pool and remove terminal-related code - Clean up dead code from dashboard server, styles, and engine - Update QuickEntryBox and all related tests for the simplified editing model - Remove unused .gitignore entries and update dashboard README
2026-04-03 07:13:07 -07:00
parent 01637ccb04
commit 5148d4670b
4 changed files with 133 additions and 118 deletions
--- a/packages/dashboard/README.md
+++ b/packages/dashboard/README.md
@@ -40,7 +40,7 @@ AI-guided interactive planning for creating well-specified tasks from high-level

 ### Task Management
 - **Kanban Board**: Drag-and-drop task management across columns (Triage, Todo, In Progress, In Review, Done)
- **Inline Editing**: Quick-edit task title and description directly on the board for Triage and Todo columns. Double-click a card or use the pencil icon — visible on hover for desktop, always visible on mobile for touch accessibility.
+- **Inline Editing**: Quick-edit a task's description directly on the board for Triage and Todo columns. Double-click a card or use the pencil icon — visible on hover for desktop, always visible on mobile for touch accessibility. Inline editing changes only the description; the title is preserved. To edit both title and description, use the task detail modal.
 - **Task Detail Editing**: Edit task title and description directly in the task detail modal. Click the pencil icon in the modal header (available for Triage and Todo tasks) to enter edit mode.
 - **List View**: Alternative tabular view for tasks with sorting and filtering. The "Hide Done" toggle hides both Done and Archived tasks for an active-work-only view.
 - **Model Selection at Creation**: Choose executor and validator AI models while creating tasks from the board or list view, or leave them unset to use the global defaults.
--- a/packages/dashboard/app/components/TaskCard.tsx
+++ b/packages/dashboard/app/components/TaskCard.tsx
@@ -134,7 +134,6 @@ function TaskCardComponent({
  const [dragging, setDragging] = useState(false);
  const [fileDragOver, setFileDragOver] = useState(false);
  const [isEditing, setIsEditing] = useState(false);
-  const [editTitle, setEditTitle] = useState(task.title || "");
  const [editDescription, setEditDescription] = useState(task.description || "");
  const [isSaving, setIsSaving] = useState(false);
  const [showSteps, setShowSteps] = useState(
@@ -142,7 +141,6 @@ function TaskCardComponent({
    (task.column === "triage" && task.steps.some(s => s.status === "done" || s.status === "skipped"))
  );

-  const titleInputRef = useRef<HTMLInputElement>(null);
  const descTextareaRef = useRef<HTMLTextAreaElement>(null);
  const touchOpenHandledRef = useRef(false);
  const cardRef = useRef<HTMLDivElement>(null);
@@ -160,15 +158,13 @@ function TaskCardComponent({

  // Reset edit state when task changes
  useEffect(() => {
-    setEditTitle(task.title || "");
    setEditDescription(task.description || "");
-  }, [task.id, task.title, task.description]);
+  }, [task.id, task.description]);

-  // Auto-focus on title when entering edit mode
+  // Auto-focus on description textarea when entering edit mode
  useEffect(() => {
    if (isEditing) {
-      titleInputRef.current?.focus();
-      titleInputRef.current?.select();
+      descTextareaRef.current?.focus();
    }
  }, [isEditing]);

@@ -386,19 +382,17 @@ function TaskCardComponent({
    e?.stopPropagation();
    if (!canEdit || isSaving) return;
    setIsEditing(true);
-    setEditTitle(task.title || "");
    setEditDescription(task.description || "");
-  }, [canEdit, isSaving, task.title, task.description]);
+  }, [canEdit, isSaving, task.description]);

  const exitEditMode = useCallback(() => {
    setIsEditing(false);
-    setEditTitle(task.title || "");
    setEditDescription(task.description || "");
-  }, [task.title, task.description]);
+  }, [task.description]);

  const hasChanges = useCallback(() => {
-    return editTitle !== (task.title || "") || editDescription !== (task.description || "");
-  }, [editTitle, editDescription, task.title, task.description]);
+    return editDescription !== (task.description || "");
+  }, [editDescription, task.description]);

  const saveChanges = useCallback(async () => {
    if (!onUpdateTask || isSaving) return;
@@ -410,7 +404,6 @@ function TaskCardComponent({
    setIsSaving(true);
    try {
      await onUpdateTask(task.id, {
-        title: editTitle.trim() || undefined,
        description: editDescription.trim() || undefined,
      });
      addToast(`Updated ${task.id}`, "success");
@@ -421,18 +414,7 @@ function TaskCardComponent({
    } finally {
      setIsSaving(false);
    }
-  }, [onUpdateTask, task.id, editTitle, editDescription, isSaving, hasChanges, exitEditMode, addToast]);
-
-  const handleTitleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    if (e.key === "Enter") {
-      e.preventDefault();
-      // Move focus to description textarea
-      descTextareaRef.current?.focus();
-    } else if (e.key === "Escape") {
-      e.preventDefault();
-      exitEditMode();
-    }
-  }, [exitEditMode]);
+  }, [onUpdateTask, task.id, editDescription, isSaving, hasChanges, exitEditMode, addToast]);

  const handleDescKeyDown = useCallback((e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !e.shiftKey) {
@@ -445,12 +427,10 @@ function TaskCardComponent({
  }, [saveChanges, exitEditMode]);

  const handleBlur = useCallback(() => {
-    // Small delay to allow focus to move between title and description inputs
-    // before checking if we should save or cancel
+    // Small delay to allow focus to move before checking if we should save or cancel
    setTimeout(() => {
      const activeElement = document.activeElement;
      const isFocusInEditArea =
-        activeElement === titleInputRef.current ||
        activeElement === descTextareaRef.current ||
        activeElement?.closest(".card-editing-content");

@@ -522,17 +502,6 @@ function TaskCardComponent({
        onDoubleClick={handleDoubleClick}
      >
        <div className="card-editing-content">
-          <input
-            ref={titleInputRef}
-            type="text"
-            className="card-edit-title-input"
-            placeholder="Task title (optional)"
-            value={editTitle}
-            onChange={(e) => setEditTitle(e.target.value)}
-            onKeyDown={handleTitleKeyDown}
-            onBlur={handleBlur}
-            disabled={isSaving}
-          />
          <textarea
            ref={descTextareaRef}
            className="card-edit-desc-textarea"
--- a/packages/dashboard/app/components/tests/TaskCard.test.tsx
+++ b/packages/dashboard/app/components/tests/TaskCard.test.tsx
@@ -1005,13 +1005,12 @@ describe("TaskCard inline editing", () => {
    expect(card).toBeDefined();
    fireEvent.doubleClick(card!);

-    // Should show editing UI
-    const titleInput = screen.getByPlaceholderText(/Task title/i);
+    // Should show editing UI — description textarea only, no title input
+    const titleInput = screen.queryByPlaceholderText(/Task title/i);
    const descTextarea = screen.getByPlaceholderText(/Task description/i);

-    expect(titleInput).toBeDefined();
+    expect(titleInput).toBeNull();
    expect(descTextarea).toBeDefined();
-    expect((titleInput as HTMLInputElement).value).toBe("Test Title");
    expect((descTextarea as HTMLTextAreaElement).value).toBe("Test Description");
  });

@@ -1030,8 +1029,11 @@ describe("TaskCard inline editing", () => {
    const editBtn = screen.getByRole("button", { name: /Edit task/i });
    fireEvent.click(editBtn);

-    const titleInput = screen.getByPlaceholderText(/Task title/i);
-    expect(titleInput).toBeDefined();
+    // Should show description textarea only, no title input
+    const titleInput = screen.queryByPlaceholderText(/Task title/i);
+    const descTextarea = screen.getByPlaceholderText(/Task description/i);
+    expect(titleInput).toBeNull();
+    expect(descTextarea).toBeDefined();
  });

  it("does NOT enter edit mode on double-click for non-editable cards", () => {
@@ -1050,12 +1052,12 @@ describe("TaskCard inline editing", () => {
    fireEvent.doubleClick(card!);

    // Should NOT show editing UI
-    const titleInput = screen.queryByPlaceholderText(/Task title/i);
-    expect(titleInput).toBeNull();
+    const descTextarea = screen.queryByPlaceholderText(/Task description/i);
+    expect(descTextarea).toBeNull();
  });

  it("Escape key cancels edit mode", () => {
-    const task = makeEditableTask({ title: "Original Title" });
+    const task = makeEditableTask({ title: "Original Title", description: "Original Desc" });

    render(
      <TaskCard
@@ -1070,14 +1072,14 @@ describe("TaskCard inline editing", () => {
    const card = document.querySelector('[data-id="FN-099"]');
    fireEvent.doubleClick(card!);

-    const titleInput = screen.getByPlaceholderText(/Task title/i) as HTMLInputElement;
-    fireEvent.change(titleInput, { target: { value: "Changed Title" } });
+    const descTextarea = screen.getByPlaceholderText(/Task description/i) as HTMLTextAreaElement;
+    fireEvent.change(descTextarea, { target: { value: "Changed Desc" } });

    // Press Escape
-    fireEvent.keyDown(titleInput, { key: "Escape" });
+    fireEvent.keyDown(descTextarea, { key: "Escape" });

    // Should exit edit mode without saving
-    expect(screen.queryByPlaceholderText(/Task title/i)).toBeNull();
+    expect(screen.queryByPlaceholderText(/Task description/i)).toBeNull();
    expect(noopUpdateTask).not.toHaveBeenCalled();
  });

@@ -1098,17 +1100,17 @@ describe("TaskCard inline editing", () => {
    const card = document.querySelector('[data-id="FN-099"]');
    await user.dblClick(card!);

-    const titleInput = screen.getByPlaceholderText(/Task title/i);
+    const descTextarea = screen.getByPlaceholderText(/Task description/i);
+    expect(descTextarea).toBeDefined();

    // Tab out to move focus outside the editing area
    await user.tab();
-    await user.tab(); // Second tab to move past the textarea

    // Wait for the blur handler to execute
    await new Promise((resolve) => setTimeout(resolve, 50));

-    // Should have exited edit mode
-    expect(screen.queryByPlaceholderText(/Task title/i)).toBeNull();
+    // Should have exited edit mode without saving
+    expect(screen.queryByPlaceholderText(/Task description/i)).toBeNull();
    expect(noopUpdateTask).not.toHaveBeenCalled();
  });

@@ -1137,38 +1139,11 @@ describe("TaskCard inline editing", () => {

    await waitFor(() => {
      expect(mockUpdateTask).toHaveBeenCalledWith("FN-099", {
-        title: "Title",
        description: "New Desc",
      });
    });
  });

-  it("Enter in title moves focus to description", () => {
-    const task = makeEditableTask();
-
-    render(
-      <TaskCard
-        task={task}
-        onOpenDetail={vi.fn()}
-        addToast={noopToast}
-        onUpdateTask={noopUpdateTask}
-      />
-    );
-
-    // Enter edit mode
-    const card = document.querySelector('[data-id="FN-099"]');
-    fireEvent.doubleClick(card!);
-
-    const titleInput = screen.getByPlaceholderText(/Task title/i) as HTMLInputElement;
-    const descTextarea = screen.getByPlaceholderText(/Task description/i) as HTMLTextAreaElement;
-
-    // Press Enter in title - should move focus to description
-    fireEvent.keyDown(titleInput, { key: "Enter" });
-
-    // Description should receive focus
-    expect(document.activeElement).toBe(descTextarea);
-  });
-
  it("Shift+Enter in description adds newline", () => {
    const task = makeEditableTask({ description: "Line 1" });

@@ -1308,6 +1283,110 @@ describe("TaskCard inline editing", () => {
    const editingCard = document.querySelector(".card-editing");
    expect(editingCard).toBeDefined();
  });
+
+  it("saves only description — existing title is not sent in update", async () => {
+    const task = makeEditableTask({ title: "Keep This Title", description: "Old Desc" });
+    const mockUpdateTask = vi.fn().mockResolvedValue({ ...task, description: "New Desc" });
+
+    render(
+      <TaskCard
+        task={task}
+        onOpenDetail={vi.fn()}
+        addToast={noopToast}
+        onUpdateTask={mockUpdateTask}
+      />
+    );
+
+    // Enter edit mode
+    const card = document.querySelector('[data-id="FN-099"]');
+    fireEvent.doubleClick(card!);
+
+    const descTextarea = screen.getByPlaceholderText(/Task description/i) as HTMLTextAreaElement;
+    fireEvent.change(descTextarea, { target: { value: "New Desc" } });
+
+    // Press Enter to save
+    fireEvent.keyDown(descTextarea, { key: "Enter" });
+
+    await waitFor(() => {
+      // onUpdateTask should only receive description, not title
+      expect(mockUpdateTask).toHaveBeenCalledWith("FN-099", {
+        description: "New Desc",
+      });
+    });
+  });
+
+  it("description textarea is auto-focused when entering edit mode", () => {
+    const task = makeEditableTask({ description: "Some description" });
+
+    render(
+      <TaskCard
+        task={task}
+        onOpenDetail={vi.fn()}
+        addToast={noopToast}
+        onUpdateTask={noopUpdateTask}
+      />
+    );
+
+    // Enter edit mode
+    const card = document.querySelector('[data-id="FN-099"]');
+    fireEvent.doubleClick(card!);
+
+    const descTextarea = screen.getByPlaceholderText(/Task description/i);
+    expect(document.activeElement).toBe(descTextarea);
+  });
+
+  it("no-change blur exits edit mode without saving", async () => {
+    const user = userEvent.setup();
+    const task = makeEditableTask({ description: "Original Desc" });
+
+    render(
+      <TaskCard
+        task={task}
+        onOpenDetail={vi.fn()}
+        addToast={noopToast}
+        onUpdateTask={noopUpdateTask}
+      />
+    );
+
+    // Enter edit mode
+    const card = document.querySelector('[data-id="FN-099"]');
+    await user.dblClick(card!);
+
+    // Verify description textarea is visible with original value
+    const descTextarea = screen.getByPlaceholderText(/Task description/i);
+    expect((descTextarea as HTMLTextAreaElement).value).toBe("Original Desc");
+
+    // Tab away to move focus outside the editing area
+    await user.tab();
+
+    // Wait for the blur handler to execute
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    // Should exit edit mode without calling update
+    expect(screen.queryByPlaceholderText(/Task description/i)).toBeNull();
+    expect(noopUpdateTask).not.toHaveBeenCalled();
+  });
+
+  it("does not render an inline title input in edit mode", () => {
+    const task = makeEditableTask({ title: "Some Title" });
+
+    render(
+      <TaskCard
+        task={task}
+        onOpenDetail={vi.fn()}
+        addToast={noopToast}
+        onUpdateTask={noopUpdateTask}
+      />
+    );
+
+    // Enter edit mode
+    const card = document.querySelector('[data-id="FN-099"]');
+    fireEvent.doubleClick(card!);
+
+    // Only description textarea should exist, no title input
+    expect(screen.queryByPlaceholderText(/Task title/i)).toBeNull();
+    expect(screen.getByPlaceholderText(/Task description/i)).toBeDefined();
+  });
 });

 /**
--- a/packages/dashboard/app/styles.css
+++ b/packages/dashboard/app/styles.css
@@ -3746,38 +3746,6 @@ body {
  gap: var(--space-sm);
 }

-/* Title input in edit mode */
-.card-edit-title-input {
-  width: 100%;
-  padding: 6px 8px;
-  background: transparent;
-  border: 1px solid transparent;
-  border-bottom: 1px solid var(--border);
-  color: var(--text);
-  font-size: 13px;
-  font-weight: 500;
-  font-family: inherit;
-  outline: none;
-  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
-}
-
-.card-edit-title-input:focus {
-  border-color: var(--todo);
-  border-bottom-color: var(--todo);
-  box-shadow: var(--focus-ring);
-  border-radius: var(--radius);
-}
-
-.card-edit-title-input::placeholder {
-  color: var(--text-dim);
-  font-weight: 400;
-}
-
-.card-edit-title-input:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
 /* Description textarea in edit mode - follows InlineCreateCard patterns */
 .card-edit-desc-textarea {
  width: 100%;
@@ -4601,7 +4569,6 @@ body {
  .quick-entry-input,
  #new-task-description,
  .inline-create-input,
-  .card-edit-title-input,
  .card-edit-desc-textarea {
    font-size: 16px;
  }