@taskforcehq/taskforce 0.3.304 → 0.3.305

package/dist/components/task/TaskForm.test.js

@@ -1,26 +1,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { render, screen, fireEvent } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, it, expect, vi } from 'vitest';
-import { TaskForm } from './TaskForm';
-describe('TaskForm Component', () => {
+import { render, screen, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi } from "vitest";
+import { TaskForm } from "./TaskForm";
+describe("TaskForm Component", () => {
     const defaultProps = {
         editingTaskId: null,
-        error: '',
-        title: '',
-        description: '',
-        category: 'general',
-        type: 'feature',
+        error: "",
+        title: "",
+        description: "",
+        category: "general",
+        type: "feature",
         priority: 2,
         complexity: 3,
-        approach: '',
-        assignee: 'unassigned',
-        scheduledDate: '',
-        dueDate: '',
-        workstreamInput: '',
+        approach: "",
+        assignee: "unassigned",
+        scheduledDate: "",
+        dueDate: "",
+        workstreamInput: "",
         checklistItems: [],
         comments: [],
-        newCommentText: '',
+        newCommentText: "",
         contextFiles: [],
         descriptionFocused: false,
         showMarkdownHelp: false,
@@ -32,41 +32,59 @@ describe('TaskForm Component', () => {
         taxonomies: [],
         approaches: [],
         assigneeOptions: [
-            { value: 'unassigned', label: 'Unassigned', icon: 'HelpCircle', color: 'var(--text-secondary)', kind: 'unassigned' },
-            { value: 'member-1', label: 'Alex Example', icon: 'User', color: '#22c55e', kind: 'member' },
+            {
+                value: "unassigned",
+                label: "Unassigned",
+                icon: "HelpCircle",
+                color: "var(--text-secondary)",
+                kind: "unassigned",
+            },
+            {
+                value: "member-1",
+                label: "Alex Example",
+                icon: "User",
+                color: "#22c55e",
+                kind: "member",
+            },
         ],
         categories: [
-            { value: 'general', label: 'General', disabled: false },
-            { value: 'backend', label: 'Backend', disabled: false }
+            { value: "general", label: "General", disabled: false },
+            { value: "backend", label: "Backend", disabled: false },
+        ],
+        types: [
+            { value: "feature", label: "Feature" },
+            { value: "bug", label: "Bug" },
+        ],
+        priorities: [
+            { value: 3, label: "High" },
+            { value: 2, label: "Medium" },
         ],
-        types: [{ value: 'feature', label: 'Feature' }, { value: 'bug', label: 'Bug' }],
-        priorities: [{ value: 3, label: 'High' }, { value: 2, label: 'Medium' }],
         workstreams: [
             {
-                id: 'workstream-1',
+                id: "workstream-1",
                 referenceNumber: 12,
-                referenceLabel: 'WS-12',
-                title: 'Platform Refinement',
+                referenceLabel: "WS-12",
+                title: "Platform Refinement",
                 description: null,
-                createdAt: '2026-04-03T00:00:00.000Z',
+                createdAt: "2026-04-03T00:00:00.000Z",
             },
             {
-                id: 'workstream-2',
+                id: "workstream-2",
                 referenceNumber: 44,
-                referenceLabel: 'WS-44',
-                title: 'Growth Experiments',
+                referenceLabel: "WS-44",
+                title: "Growth Experiments",
                 description: null,
-                createdAt: '2026-04-03T00:00:00.000Z',
+                createdAt: "2026-04-03T00:00:00.000Z",
             },
         ],
         initiatives: [
             {
-                id: 'initiative-1',
+                id: "initiative-1",
                 referenceNumber: 3,
-                referenceLabel: 'IN-3',
-                title: 'Execution model',
+                referenceLabel: "IN-3",
+                title: "Execution model",
                 description: null,
-                createdAt: '2026-04-03T00:00:00.000Z',
+                createdAt: "2026-04-03T00:00:00.000Z",
             },
         ],
         copiedId: null,
@@ -90,7 +108,7 @@ describe('TaskForm Component', () => {
         onShowCategoryManagerChange: vi.fn(),
         onShowTypeManagerChange: vi.fn(),
         onConfiguringCategoryChange: vi.fn(),
-        onSubmit: vi.fn(e => e.preventDefault()),
+        onSubmit: vi.fn((e) => e.preventDefault()),
         onAddComment: vi.fn(),
         onAddContextFile: vi.fn(),
         onRemoveContextFile: vi.fn(),
@@ -110,295 +128,325 @@ describe('TaskForm Component', () => {
         return render(_jsx(TaskForm, { ...defaultProps, ...props }));
     };
     // --- Create Task Tests ---
-    it('3.1 Open add form - Renders correctly', () => {
+    it("3.1 Open add form - Renders correctly", () => {
         renderForm();
-        expect(screen.getByPlaceholderText('What needs to be done?')).toBeInTheDocument();
-        expect(screen.getByTitle('Markdown Help')).toBeInTheDocument();
+        expect(screen.getByPlaceholderText("What needs to be done?")).toBeInTheDocument();
+        expect(screen.getByTitle("Markdown Help")).toBeInTheDocument();
     });
-    it('3.2 Title required - Submit disabled if empty', () => {
-        renderForm({ title: '' });
+    it("3.2 Title required - Submit disabled if empty", () => {
+        renderForm({ title: "" });
         // In the implementation, the form submit handles validation, but let's check input attribute
-        const input = screen.getByPlaceholderText('What needs to be done?');
+        const input = screen.getByPlaceholderText("What needs to be done?");
         expect(input).toBeRequired();
     });
-    it('3.3 Create minimal - Title input updates', async () => {
+    it("3.3 Create minimal - Title input updates", async () => {
         const user = userEvent.setup();
         renderForm();
-        const input = screen.getByPlaceholderText('What needs to be done?');
-        await user.type(input, 'New Task');
+        const input = screen.getByPlaceholderText("What needs to be done?");
+        await user.type(input, "New Task");
         expect(defaultProps.onTitleChange).toHaveBeenCalled();
     });
-    it('3.4 Create with all fields - Description updates', async () => {
+    it("3.4 Create with all fields - Description updates", async () => {
         const user = userEvent.setup();
         renderForm({ descriptionFocused: true }); // Ensure textarea is rendered
-        const textarea = screen.getByPlaceholderText('What needs to be done? (Markdown supported)');
-        await user.type(textarea, 'Details');
+        const textarea = screen.getByPlaceholderText("What needs to be done? (Markdown supported)");
+        await user.type(textarea, "Details");
         expect(defaultProps.onDescriptionChange).toHaveBeenCalled();
     });
-    it('renders actual newline paragraphs in description preview without escaped text', () => {
+    it("renders actual newline paragraphs in description preview without escaped text", () => {
         const { container } = renderForm({
-            description: 'Phase 1\n\nPhase 2',
-            descriptionFocused: false
+            description: "Phase 1\n\nPhase 2",
+            descriptionFocused: false,
         });
-        expect(screen.getByText('Phase 1')).toBeInTheDocument();
-        expect(screen.getByText('Phase 2')).toBeInTheDocument();
-        expect(container.textContent).not.toContain('\\n\\n');
+        expect(screen.getByText("Phase 1")).toBeInTheDocument();
+        expect(screen.getByText("Phase 2")).toBeInTheDocument();
+        expect(container.textContent).not.toContain("\\n\\n");
     });
-    it('3.5 Category selection', async () => {
+    it("3.5 Category selection", async () => {
         const user = userEvent.setup();
         renderForm();
-        const dropdown = screen.getByRole('combobox', { name: /category/i });
+        const dropdown = screen.getByRole("combobox", { name: /category/i });
         await user.click(dropdown);
-        const option = screen.getByText('Backend');
+        const option = screen.getByText("Backend");
         await user.click(option);
-        expect(defaultProps.onCategoryChange).toHaveBeenCalledWith('backend');
+        expect(defaultProps.onCategoryChange).toHaveBeenCalledWith("backend");
     });
-    it('keeps a legacy category selectable when the current task already uses it', async () => {
+    it("keeps a legacy category selectable when the current task already uses it", async () => {
         const user = userEvent.setup();
         renderForm({
-            category: 'backend',
+            category: "backend",
             categories: [
-                { value: 'default', label: 'General', disabled: false },
-                { value: 'backend', label: 'Backend', disabled: true }
-            ]
+                { value: "default", label: "General", disabled: false },
+                { value: "backend", label: "Backend", disabled: true },
+            ],
         });
-        const dropdown = screen.getByRole('combobox', { name: /category/i });
+        const dropdown = screen.getByRole("combobox", { name: /category/i });
         await user.click(dropdown);
-        expect(screen.getAllByText('Backend (Legacy)').length).toBeGreaterThan(0);
+        expect(screen.getAllByText("Backend (Legacy)").length).toBeGreaterThan(0);
     });
-    it('uses the configured default category label in the category picker', async () => {
+    it("uses the configured default category label in the category picker", async () => {
         const user = userEvent.setup();
         renderForm({
             categories: [
-                { value: 'default', label: 'Inbox Work', icon: 'Star', color: 'teal-500', disabled: false },
-                { value: 'backend', label: 'Backend', disabled: false }
-            ]
+                {
+                    value: "default",
+                    label: "Inbox Work",
+                    icon: "Star",
+                    color: "teal-500",
+                    disabled: false,
+                },
+                { value: "backend", label: "Backend", disabled: false },
+            ],
         });
-        const dropdown = screen.getByRole('combobox', { name: /category/i });
+        const dropdown = screen.getByRole("combobox", { name: /category/i });
         await user.click(dropdown);
-        expect(screen.getByText('Inbox Work')).toBeInTheDocument();
-        expect(screen.queryByText('General')).not.toBeInTheDocument();
+        expect(screen.getByText("Inbox Work")).toBeInTheDocument();
+        expect(screen.queryByText("General")).not.toBeInTheDocument();
     });
-    it('3.6 Type selection', async () => {
+    it("3.6 Type selection", async () => {
         const user = userEvent.setup();
         renderForm();
-        const dropdown = screen.getByRole('combobox', { name: /type/i });
+        const dropdown = screen.getByRole("combobox", { name: /type/i });
         await user.click(dropdown);
-        const option = screen.getByText('Bug');
+        const option = screen.getByText("Bug");
         await user.click(option);
-        expect(defaultProps.onTypeChange).toHaveBeenCalledWith('bug');
+        expect(defaultProps.onTypeChange).toHaveBeenCalledWith("bug");
     });
-    it('keeps a retired type selectable when the current task already uses it', async () => {
+    it("keeps a retired type selectable when the current task already uses it", async () => {
         const user = userEvent.setup();
         renderForm({
-            type: 'issue',
+            type: "issue",
             types: [
-                { value: 'task', label: 'Task', status: 'active' },
-                { value: 'issue', label: 'Issue', status: 'retired' }
-            ]
+                { value: "task", label: "Task", status: "active" },
+                { value: "issue", label: "Issue", status: "retired" },
+            ],
         });
-        const dropdown = screen.getByRole('combobox', { name: /type/i });
+        const dropdown = screen.getByRole("combobox", { name: /type/i });
         await user.click(dropdown);
-        expect(screen.getAllByText('Issue (Retired)').length).toBeGreaterThan(0);
+        expect(screen.getAllByText("Issue (Retired)").length).toBeGreaterThan(0);
     });
-    it('3.7 Priority selection', () => {
+    it("3.7 Priority selection", () => {
         renderForm();
         // LevelSelector uses divs/buttons. Looking at LevelSelector implementation (implied):
         // It renders options. Let's click one.
         // Priority and Complexity both have 'High' options.
-        const priorityOption = screen.getAllByTitle('High')[0];
+        const priorityOption = screen.getAllByTitle("High")[0];
         fireEvent.click(priorityOption);
         expect(defaultProps.onPriorityChange).toHaveBeenCalledWith(3);
     });
-    it('renders workspace member assignee options', async () => {
+    it("renders workspace member assignee options", async () => {
         const user = userEvent.setup();
         renderForm();
-        const dropdown = screen.getByRole('combobox', { name: /assigned to/i });
+        const dropdown = screen.getByRole("combobox", { name: /assigned to/i });
         await user.click(dropdown);
-        expect(screen.getByText('Alex Example')).toBeInTheDocument();
+        expect(screen.getByText("Alex Example")).toBeInTheDocument();
     });
-    it('shows attach to workstream only on the new task form', () => {
+    it("shows attach to workstream only on the new task form", () => {
         renderForm();
-        expect(screen.getByText('Attach to workstream')).toBeInTheDocument();
-        expect(screen.getByRole('combobox', { name: /attach to workstream/i })).toBeInTheDocument();
+        expect(screen.getByText("Attach to workstream")).toBeInTheDocument();
+        expect(screen.getByRole("combobox", { name: /attach to workstream/i })).toBeInTheDocument();
     });
-    it('does not show attach to workstream on the edit task form', () => {
+    it("does not show attach to workstream on the edit task form", () => {
         renderForm({
-            editingTaskId: 'task-1',
+            editingTaskId: "task-1",
             currentTask: {
-                id: 'task-1',
-                title: 'Existing task',
-                description: '',
-                category: 'general',
-                type: 'feature',
+                id: "task-1",
+                title: "Existing task",
+                description: "",
+                category: "general",
+                type: "feature",
                 priority: 2,
-                status: 'task',
-                createdAt: '2026-04-03T00:00:00.000Z',
-            }
+                status: "task",
+                createdAt: "2026-04-03T00:00:00.000Z",
+            },
         });
-        expect(screen.queryByText('Attach to workstream')).not.toBeInTheDocument();
+        expect(screen.queryByText("Attach to workstream")).not.toBeInTheDocument();
     });
-    it('switches the create-workstream control into manual entry when plus is clicked', async () => {
+    it("switches the create-workstream control into manual entry when plus is clicked", async () => {
         const user = userEvent.setup();
         renderForm();
-        await user.click(screen.getByRole('button', { name: /enter workstream by name/i }));
-        const manualInput = screen.getByRole('textbox', { name: /attach to workstream/i });
+        await user.click(screen.getByRole("button", { name: /enter workstream by name/i }));
+        const manualInput = screen.getByRole("textbox", {
+            name: /attach to workstream/i,
+        });
         expect(manualInput).toBeInTheDocument();
-        await user.type(manualInput, 'Platform Refinement');
+        await user.type(manualInput, "Platform Refinement");
         expect(defaultProps.onWorkstreamInputChange).toHaveBeenCalled();
     });
-    it('renders custom taxonomy descriptions as helper text', () => {
+    it("renders custom taxonomy descriptions as helper text", () => {
         renderForm({
-            taxonomies: [{
-                    id: 'review-status',
-                    label: 'Review Status',
-                    description: 'Use this to track review routing.',
-                    widgetType: 'select',
+            taxonomies: [
+                {
+                    id: "review-status",
+                    label: "Review Status",
+                    description: "Use this to track review routing.",
+                    widgetType: "select",
                     isSystem: false,
                     multiSelect: false,
-                    options: [{ value: 'pending', label: 'Pending', status: 'active' }]
-                }]
+                    options: [{ value: "pending", label: "Pending", status: "active" }],
+                },
+            ],
         });
-        expect(screen.getByText('Use this to track review routing.')).toBeInTheDocument();
+        expect(screen.getByText("Use this to track review routing.")).toBeInTheDocument();
     });
-    it('hides custom taxonomies from the task form when form visibility is disabled', () => {
+    it("hides custom taxonomies from the task form when form visibility is disabled", () => {
         renderForm({
-            taxonomies: [{
-                    id: 'review-status',
-                    label: 'Review Status',
+            taxonomies: [
+                {
+                    id: "review-status",
+                    label: "Review Status",
                     formEnabled: false,
-                    widgetType: 'select',
+                    widgetType: "select",
                     isSystem: false,
                     multiSelect: false,
-                    options: [{ value: 'pending', label: 'Pending', status: 'active' }]
-                }]
+                    options: [{ value: "pending", label: "Pending", status: "active" }],
+                },
+            ],
         });
-        expect(screen.queryByText('Review Status')).not.toBeInTheDocument();
+        expect(screen.queryByText("Review Status")).not.toBeInTheDocument();
     });
-    it('keeps a hidden custom taxonomy visible when the current task already has a value', () => {
+    it("keeps a hidden custom taxonomy visible when the current task already has a value", () => {
         renderForm({
-            formTaxonomies: { 'review-status': 'pending' },
-            taxonomies: [{
-                    id: 'review-status',
-                    label: 'Review Status',
+            formTaxonomies: { "review-status": "pending" },
+            taxonomies: [
+                {
+                    id: "review-status",
+                    label: "Review Status",
                     formEnabled: false,
-                    widgetType: 'select',
+                    widgetType: "select",
                     isSystem: false,
                     multiSelect: false,
-                    options: [{ value: 'pending', label: 'Pending', status: 'active' }]
-                }]
+                    options: [{ value: "pending", label: "Pending", status: "active" }],
+                },
+            ],
         });
-        expect(screen.getByText('Review Status')).toBeInTheDocument();
+        expect(screen.getByText("Review Status")).toBeInTheDocument();
     });
-    it('renders multi-select custom taxonomies as selectable chips', async () => {
+    it("renders multi-select custom taxonomies as selectable chips", async () => {
         const user = userEvent.setup();
         renderForm({
-            taxonomies: [{
-                    id: 'channels',
-                    label: 'Channels',
-                    widgetType: 'select',
+            taxonomies: [
+                {
+                    id: "channels",
+                    label: "Channels",
+                    widgetType: "select",
                     isSystem: false,
                     multiSelect: true,
                     options: [
-                        { value: 'email', label: 'Email', status: 'active' },
-                        { value: 'social', label: 'Social', status: 'active' }
-                    ]
-                }]
+                        { value: "email", label: "Email", status: "active" },
+                        { value: "social", label: "Social", status: "active" },
+                    ],
+                },
+            ],
         });
-        await user.click(screen.getByRole('button', { name: 'Email' }));
-        expect(defaultProps.onTaxonomyChange).toHaveBeenCalledWith('channels', ['email']);
+        await user.click(screen.getByRole("button", { name: "Email" }));
+        expect(defaultProps.onTaxonomyChange).toHaveBeenCalledWith("channels", [
+            "email",
+        ]);
     });
-    it('keeps selected retired multi-select custom taxonomy options available', () => {
+    it("keeps selected retired multi-select custom taxonomy options available", () => {
         renderForm({
-            formTaxonomies: { channels: ['email'] },
-            taxonomies: [{
-                    id: 'channels',
-                    label: 'Channels',
-                    widgetType: 'select',
+            formTaxonomies: { channels: ["email"] },
+            taxonomies: [
+                {
+                    id: "channels",
+                    label: "Channels",
+                    widgetType: "select",
                     isSystem: false,
                     multiSelect: true,
                     options: [
-                        { value: 'email', label: 'Email', status: 'retired' },
-                        { value: 'social', label: 'Social', status: 'active' }
-                    ]
-                }]
+                        { value: "email", label: "Email", status: "retired" },
+                        { value: "social", label: "Social", status: "active" },
+                    ],
+                },
+            ],
         });
-        expect(screen.getByRole('button', { name: /Email \(Retired\)/i })).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'Social' })).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: /Email \(Retired\)/i })).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Social" })).toBeInTheDocument();
     });
-    it('hides retired custom taxonomies from new-task entry when there is no selected value', () => {
+    it("hides retired custom taxonomies from new-task entry when there is no selected value", () => {
         renderForm({
-            taxonomies: [{
-                    id: 'channels',
-                    label: 'Channels',
-                    status: 'retired',
-                    widgetType: 'select',
+            taxonomies: [
+                {
+                    id: "channels",
+                    label: "Channels",
+                    status: "retired",
+                    widgetType: "select",
                     isSystem: false,
                     multiSelect: false,
-                    options: [{ value: 'email', label: 'Email', status: 'active' }]
-                }]
+                    options: [{ value: "email", label: "Email", status: "active" }],
+                },
+            ],
         });
-        expect(screen.queryByText('Channels')).not.toBeInTheDocument();
+        expect(screen.queryByText("Channels")).not.toBeInTheDocument();
     });
-    it('keeps retired custom taxonomies visible when the current task already has a value', () => {
+    it("keeps retired custom taxonomies visible when the current task already has a value", () => {
         renderForm({
-            formTaxonomies: { channels: 'email' },
-            taxonomies: [{
-                    id: 'channels',
-                    label: 'Channels',
-                    status: 'retired',
-                    widgetType: 'select',
+            formTaxonomies: { channels: "email" },
+            taxonomies: [
+                {
+                    id: "channels",
+                    label: "Channels",
+                    status: "retired",
+                    widgetType: "select",
                     isSystem: false,
                     multiSelect: false,
-                    options: [{ value: 'email', label: 'Email', status: 'active' }]
-                }]
+                    options: [{ value: "email", label: "Email", status: "active" }],
+                },
+            ],
         });
-        expect(screen.getByText('Channels')).toBeInTheDocument();
+        expect(screen.getByText("Channels")).toBeInTheDocument();
     });
     // --- Edit Task Tests ---
-    it('3.10 Load existing task', () => {
-        renderForm({ editingTaskId: '123', title: 'Existing Task' });
-        expect(screen.getByDisplayValue('Existing Task')).toBeInTheDocument();
+    it("3.10 Load existing task", () => {
+        renderForm({ editingTaskId: "123", title: "Existing Task" });
+        expect(screen.getByDisplayValue("Existing Task")).toBeInTheDocument();
     });
-    it('3.11 ID badge visible in edit mode', () => {
+    it("3.11 ID badge visible in edit mode", () => {
         // Form-level edit mode validation.
-        renderForm({ editingTaskId: '123' });
+        renderForm({ editingTaskId: "123" });
         expect(screen.getByText(/Activity & Comments/)).toBeInTheDocument();
     });
-    it('3.12 Copy ID', async () => {
+    it("3.12 Copy ID", async () => {
         // Header copy action is outside TaskForm; keep form render sanity check.
         renderForm();
-        expect(screen.getByPlaceholderText('What needs to be done?')).toBeInTheDocument();
+        expect(screen.getByPlaceholderText("What needs to be done?")).toBeInTheDocument();
     });
-    it('renders assignee audit activity with readable labels instead of raw ids', () => {
+    it("renders assignee audit activity with readable labels instead of raw ids", () => {
         renderForm({
-            editingTaskId: '123',
+            editingTaskId: "123",
             showComments: true,
             assigneeOptions: [
                 ...defaultProps.assigneeOptions,
-                { value: 'ai-profile-1', label: 'Planner Bot', icon: 'Bot', color: '#8b5cf6', kind: 'agent' },
+                {
+                    value: "ai-profile-1",
+                    label: "Planner Bot",
+                    icon: "Bot",
+                    color: "#8b5cf6",
+                    kind: "agent",
+                },
             ],
             currentTask: {
-                id: '123',
-                title: 'Existing Task',
+                id: "123",
+                title: "Existing Task",
                 activity: [
                     {
-                        id: 'event:task-event-1',
-                        type: 'event',
-                        timestamp: '2026-03-23T12:00:00.000Z',
+                        id: "event:task-event-1",
+                        type: "event",
+                        timestamp: "2026-03-23T12:00:00.000Z",
                         event: {
-                            id: 'task-event-1',
-                            taskId: '123',
-                            workspaceId: 'workspace-1',
-                            action: 'task-updated',
-                            actor: 'member-1',
-                            actorType: 'human',
-                            createdAt: '2026-03-23T12:00:00.000Z',
+                            id: "task-event-1",
+                            taskId: "123",
+                            workspaceId: "workspace-1",
+                            action: "task-updated",
+                            actor: "member-1",
+                            actorType: "human",
+                            createdAt: "2026-03-23T12:00:00.000Z",
                             details: {
                                 changes: {
                                     assignee: {
-                                        from: 'unassigned',
-                                        to: 'ai-profile-1',
+                                        from: "unassigned",
+                                        to: "ai-profile-1",
                                     },
                                 },
                             },
@@ -407,34 +455,34 @@ describe('TaskForm Component', () => {
                 ],
             },
         });
-        expect(screen.getByText('ASSIGNED TO: Unassigned -> Planner Bot')).toBeInTheDocument();
+        expect(screen.getByText("ASSIGNED TO: Unassigned -> Planner Bot")).toBeInTheDocument();
         expect(screen.queryByText(/ai-profile-1/i)).not.toBeInTheDocument();
     });
-    it('renders planning relationship audit activity with reference labels instead of raw ids', () => {
+    it("renders planning relationship audit activity with reference labels instead of raw ids", () => {
         renderForm({
-            editingTaskId: '123',
+            editingTaskId: "123",
             showComments: true,
             currentTask: {
-                id: '123',
-                title: 'Existing Task',
+                id: "123",
+                title: "Existing Task",
                 activity: [
                     {
-                        id: 'event:task-event-relationship',
-                        type: 'event',
-                        timestamp: '2026-03-23T12:00:00.000Z',
+                        id: "event:task-event-relationship",
+                        type: "event",
+                        timestamp: "2026-03-23T12:00:00.000Z",
                         event: {
-                            id: 'task-event-relationship',
-                            taskId: '123',
-                            workspaceId: 'workspace-1',
-                            action: 'task-relationship-changed',
-                            actor: 'member-1',
-                            actorType: 'human',
-                            createdAt: '2026-03-23T12:00:00.000Z',
+                            id: "task-event-relationship",
+                            taskId: "123",
+                            workspaceId: "workspace-1",
+                            action: "task-relationship-changed",
+                            actor: "member-1",
+                            actorType: "human",
+                            createdAt: "2026-03-23T12:00:00.000Z",
                             details: {
                                 changes: {
                                     workstreamId: {
                                         from: null,
-                                        to: 'workstream-1',
+                                        to: "workstream-1",
                                     },
                                 },
                             },
@@ -443,52 +491,52 @@ describe('TaskForm Component', () => {
                 ],
             },
         });
-        expect(screen.getByText('Workstream: none -> WS-12')).toBeInTheDocument();
+        expect(screen.getByText("Workstream: none -> WS-12")).toBeInTheDocument();
         expect(screen.queryByText(/workstream-1/i)).not.toBeInTheDocument();
     });
-    it('3.13 Update title', async () => {
+    it("3.13 Update title", async () => {
         const user = userEvent.setup();
-        renderForm({ editingTaskId: '123', title: 'Old Title' });
-        const input = screen.getByDisplayValue('Old Title');
+        renderForm({ editingTaskId: "123", title: "Old Title" });
+        const input = screen.getByDisplayValue("Old Title");
         await user.clear(input);
-        await user.type(input, 'New Title');
+        await user.type(input, "New Title");
         expect(defaultProps.onTitleChange).toHaveBeenCalled();
     });
-    it('keeps scheduled date editable in the task form', () => {
+    it("keeps scheduled date editable in the task form", () => {
         renderForm({
-            editingTaskId: 'parent-1',
-            currentTask: { id: 'parent-1', title: 'Parent Task' },
+            editingTaskId: "parent-1",
+            currentTask: { id: "parent-1", title: "Parent Task" },
         });
-        const scheduledLabel = screen.getByText('Scheduled:');
+        const scheduledLabel = screen.getByText("Scheduled:");
         const scheduledInput = scheduledLabel.nextElementSibling;
         expect(scheduledInput).toBeTruthy();
         if (!scheduledInput)
-            throw new Error('Scheduled date input missing');
+            throw new Error("Scheduled date input missing");
         expect(scheduledInput.disabled).toBe(false);
-        expect(screen.queryByText('Parent tasks cannot be scheduled. Schedule leaf tasks instead.')).not.toBeInTheDocument();
+        expect(screen.queryByText("Parent tasks cannot be scheduled. Schedule leaf tasks instead.")).not.toBeInTheDocument();
     });
-    it('3.14 Context Documents section renders', async () => {
+    it("3.14 Context Documents section renders", async () => {
         const user = userEvent.setup();
         renderForm();
-        expect(screen.getByText('Context Documents')).toBeInTheDocument();
-        await user.click(screen.getByTitle('Show context documents'));
-        expect(screen.getByRole('button', { name: /upload/i })).toBeInTheDocument();
+        expect(screen.getByText("Context Documents")).toBeInTheDocument();
+        await user.click(screen.getByTitle("Show context documents"));
+        expect(screen.getByRole("button", { name: /upload/i })).toBeInTheDocument();
     });
-    it('3.15 Markdown Help Toggle', async () => {
+    it("3.15 Markdown Help Toggle", async () => {
         const user = userEvent.setup();
         renderForm();
-        const helpBtn = screen.getByTitle('Markdown Help');
+        const helpBtn = screen.getByTitle("Markdown Help");
         await user.click(helpBtn);
         expect(defaultProps.onShowMarkdownHelpChange).toHaveBeenCalledWith(true);
     });
-    it('3.16 Description Focus', () => {
+    it("3.16 Description Focus", () => {
         renderForm();
-        renderForm({ description: 'Test Desc', descriptionFocused: false });
-        const previewDiv = screen.getByText('Test Desc');
+        renderForm({ description: "Test Desc", descriptionFocused: false });
+        const previewDiv = screen.getByText("Test Desc");
         fireEvent.click(previewDiv);
         expect(defaultProps.onDescriptionFocusedChange).toHaveBeenCalledWith(true);
     });
-    it('3.18 Category Manager Toggle', async () => {
+    it("3.18 Category Manager Toggle", async () => {
         const user = userEvent.setup();
         renderForm();
         // The + button next to Category label
@@ -517,252 +565,279 @@ describe('TaskForm Component', () => {
         const { container } = renderForm();
         // Select the first button with class manageLink (assuming style imports work or we use classname)
         // Styles are imported as object `styles`. In test, classes are mocked or stringified?
-        // Vitest CSS handling usually preserves class names if using `identity-obj-proxy` or similar, 
+        // Vitest CSS handling usually preserves class names if using `identity-obj-proxy` or similar,
         // but here we have `css: true` in vitest config.
         // It might be hashed.
         // Fallback: The button contains an SVG.
         // Let's try to find the button by its visual role.
         // It is `tabIndex={-1}`.
-        const buttons = screen.getAllByRole('button', { hidden: true }); // tabIndex -1 might hide it from accessibility tree? No.
+        const buttons = screen.getAllByRole("button", { hidden: true }); // tabIndex -1 might hide it from accessibility tree? No.
         // Let's skip this specific test for now or try to match by association.
         expect(true).toBe(true);
     });
     // --- Unsaved Changes Tests ---
     // These logic reside in the Parent (Taskforce), checking state vs original.
-    // TaskForm just calls `onChange`. 
+    // TaskForm just calls `onChange`.
     // So "Test 3.19 Trigger warning" is an INTEGRATION test for Taskforce, not Unit test for TaskForm.
     // But we CAN verify that TaskForm calls the change handlers correctly, which we did in 3.3, 3.4.
     // --- Comments ---
-    it('3.23 Expand comments', async () => {
-        const user = userEvent.setup();
-        renderForm({ editingTaskId: '123' });
-        const toggle = screen.getByTitle('Show Comments');
-        await user.click(toggle);
-        expect(defaultProps.onShowCommentsChange).toHaveBeenCalledWith(true);
+    it("3.23 Shows the activity sidebar in edit mode", () => {
+        renderForm({ editingTaskId: "123" });
+        expect(screen.getByText("Activity & Comments")).toBeInTheDocument();
+        expect(screen.getByPlaceholderText("Type a comment...")).toBeInTheDocument();
+    });
+    it("scrolls the activity thread to the latest item on open", () => {
+        const originalScrollIntoView = HTMLElement.prototype.scrollIntoView;
+        const scrollIntoView = vi.fn();
+        Object.defineProperty(HTMLElement.prototype, "scrollIntoView", {
+            configurable: true,
+            value: scrollIntoView,
+        });
+        try {
+            renderForm({
+                editingTaskId: "123",
+                comments: [
+                    {
+                        id: "comment-scroll-1",
+                        author: "member-1",
+                        text: "Latest comment",
+                        timestamp: "2026-03-22T10:10:00.000Z",
+                    },
+                ],
+            });
+            expect(scrollIntoView).toHaveBeenCalled();
+        }
+        finally {
+            if (originalScrollIntoView) {
+                Object.defineProperty(HTMLElement.prototype, "scrollIntoView", {
+                    configurable: true,
+                    value: originalScrollIntoView,
+                });
+            }
+            else {
+                delete HTMLElement.prototype.scrollIntoView;
+            }
+        }
     });
-    it('3.24 Add comment', async () => {
+    it("3.24 Add comment", async () => {
         const user = userEvent.setup();
-        renderForm({ editingTaskId: '123', showComments: true, newCommentText: 'Nice work' });
-        const sendBtn = screen.getByRole('button', { name: '' }); // Send icon has no text?
-        // The button has <Send /> icon.
-        // We can find by class or hierarchy.
-        // Or find the textarea and the button next to it.
-        const textarea = screen.getByPlaceholderText('Type a comment...');
-        const button = textarea.nextSibling; // Assuming button is next sibling
-        await user.click(button);
+        renderForm({ editingTaskId: "123", newCommentText: "Nice work" });
+        await user.click(screen.getByRole("button", { name: /send comment/i }));
         expect(defaultProps.onAddComment).toHaveBeenCalled();
     });
-    it('renders named AI comment authors from resolved actor data', () => {
+    it("renders named AI comment authors from resolved actor data", () => {
         renderForm({
-            editingTaskId: '123',
+            editingTaskId: "123",
             showComments: true,
             comments: [
                 {
-                    id: 'comment-1',
-                    author: 'ai-profile-123',
-                    text: 'I reviewed the task details.',
-                    timestamp: '2026-03-22T10:00:00.000Z',
+                    id: "comment-1",
+                    author: "ai-profile-123",
+                    text: "I reviewed the task details.",
+                    timestamp: "2026-03-22T10:00:00.000Z",
                     actor: {
-                        id: 'ai-profile-123',
-                        kind: 'ai',
-                        label: 'Codex',
-                        username: 'codex',
-                        icon: 'Bot',
-                        color: '#0ea5e9',
+                        id: "ai-profile-123",
+                        kind: "ai",
+                        label: "Codex",
+                        username: "codex",
+                        icon: "Bot",
+                        color: "#0ea5e9",
                         isNamed: true,
                     },
                 },
             ],
         });
-        expect(screen.getByText('Codex')).toBeInTheDocument();
-        expect(screen.queryByText('AI Agent')).not.toBeInTheDocument();
+        expect(screen.getByText("Codex")).toBeInTheDocument();
+        expect(screen.queryByText("AI Agent")).not.toBeInTheDocument();
     });
-    it('renders task audit events in the activity feed', () => {
+    it("renders task audit events in the activity feed", () => {
         renderForm({
-            editingTaskId: '123',
+            editingTaskId: "123",
             showComments: true,
             currentTask: {
-                id: 'task-activity-1',
-                title: 'Activity Task',
-                status: 'in-progress',
-                createdAt: '2026-03-22T09:00:00.000Z',
+                id: "task-activity-1",
+                title: "Activity Task",
+                status: "in-progress",
+                createdAt: "2026-03-22T09:00:00.000Z",
                 activity: [
                     {
-                        id: 'event:1',
-                        type: 'event',
-                        timestamp: '2026-03-22T10:00:00.000Z',
+                        id: "event:1",
+                        type: "event",
+                        timestamp: "2026-03-22T10:00:00.000Z",
                         event: {
-                            id: 'event-1',
-                            taskId: 'task-activity-1',
-                            workspaceId: 'default',
-                            action: 'task-status-changed',
-                            actor: 'user',
-                            actorType: 'human',
-                            createdAt: '2026-03-22T10:00:00.000Z',
+                            id: "event-1",
+                            taskId: "task-activity-1",
+                            workspaceId: "default",
+                            action: "task-status-changed",
+                            actor: "user",
+                            actorType: "human",
+                            createdAt: "2026-03-22T10:00:00.000Z",
                             details: {
                                 changes: {
-                                    status: { from: 'task', to: 'in-progress' }
-                                }
-                            }
-                        }
-                    }
-                ]
+                                    status: { from: "task", to: "in-progress" },
+                                },
+                            },
+                        },
+                    },
+                ],
             },
         });
-        expect(screen.getByText('Status: task -> in-progress')).toBeInTheDocument();
-        expect(screen.queryByText('System')).not.toBeInTheDocument();
+        expect(screen.getByText("Status: task -> in-progress")).toBeInTheDocument();
+        expect(screen.queryByText("System")).not.toBeInTheDocument();
     });
-    it('summarizes description audit events without rendering the full description body', () => {
+    it("summarizes description audit events without rendering the full description body", () => {
         renderForm({
-            editingTaskId: '123',
+            editingTaskId: "123",
             showComments: true,
             currentTask: {
-                id: 'task-activity-2',
-                title: 'Description Audit Task',
-                status: 'task',
-                createdAt: '2026-03-22T09:00:00.000Z',
+                id: "task-activity-2",
+                title: "Description Audit Task",
+                status: "task",
+                createdAt: "2026-03-22T09:00:00.000Z",
                 activity: [
                     {
-                        id: 'event:2',
-                        type: 'event',
-                        timestamp: '2026-03-22T10:00:00.000Z',
+                        id: "event:2",
+                        type: "event",
+                        timestamp: "2026-03-22T10:00:00.000Z",
                         event: {
-                            id: 'event-2',
-                            taskId: 'task-activity-2',
-                            workspaceId: 'default',
-                            action: 'task-updated',
-                            actor: 'user',
-                            actorType: 'human',
-                            createdAt: '2026-03-22T10:00:00.000Z',
+                            id: "event-2",
+                            taskId: "task-activity-2",
+                            workspaceId: "default",
+                            action: "task-updated",
+                            actor: "user",
+                            actorType: "human",
+                            createdAt: "2026-03-22T10:00:00.000Z",
                             details: {
                                 changes: {
                                     description: {
-                                        from: '',
-                                        to: 'Line one\n\nLine two\n\nLine three'
-                                    }
-                                }
-                            }
-                        }
-                    }
-                ]
+                                        from: "",
+                                        to: "Line one\n\nLine two\n\nLine three",
+                                    },
+                                },
+                            },
+                        },
+                    },
+                ],
             },
         });
-        expect(screen.getByText('DESCRIPTION: added')).toBeInTheDocument();
+        expect(screen.getByText("DESCRIPTION: added")).toBeInTheDocument();
         expect(screen.queryByText(/Line one/)).not.toBeInTheDocument();
         expect(screen.queryByText(/Line two/)).not.toBeInTheDocument();
         expect(screen.queryByText(/Line three/)).not.toBeInTheDocument();
     });
-    it('summarizes title audit events without rendering before and after title text', () => {
+    it("summarizes title audit events without rendering before and after title text", () => {
         renderForm({
-            editingTaskId: '123',
+            editingTaskId: "123",
             showComments: true,
             currentTask: {
-                id: 'task-activity-3',
-                title: 'Renamed task',
-                status: 'task',
-                createdAt: '2026-03-22T09:00:00.000Z',
+                id: "task-activity-3",
+                title: "Renamed task",
+                status: "task",
+                createdAt: "2026-03-22T09:00:00.000Z",
                 activity: [
                     {
-                        id: 'event:3',
-                        type: 'event',
-                        timestamp: '2026-03-22T10:00:00.000Z',
+                        id: "event:3",
+                        type: "event",
+                        timestamp: "2026-03-22T10:00:00.000Z",
                         event: {
-                            id: 'event-3',
-                            taskId: 'task-activity-3',
-                            workspaceId: 'default',
-                            action: 'task-updated',
-                            actor: 'user',
-                            actorType: 'human',
-                            createdAt: '2026-03-22T10:00:00.000Z',
+                            id: "event-3",
+                            taskId: "task-activity-3",
+                            workspaceId: "default",
+                            action: "task-updated",
+                            actor: "user",
+                            actorType: "human",
+                            createdAt: "2026-03-22T10:00:00.000Z",
                             details: {
                                 changes: {
                                     title: {
-                                        from: 'Old title',
-                                        to: 'New title'
-                                    }
-                                }
-                            }
-                        }
-                    }
-                ]
+                                        from: "Old title",
+                                        to: "New title",
+                                    },
+                                },
+                            },
+                        },
+                    },
+                ],
             },
         });
-        expect(screen.getByText('TITLE: updated')).toBeInTheDocument();
-        expect(screen.queryByText('Old title')).not.toBeInTheDocument();
-        expect(screen.queryByText('New title')).not.toBeInTheDocument();
+        expect(screen.getByText("TITLE: updated")).toBeInTheDocument();
+        expect(screen.queryByText("Old title")).not.toBeInTheDocument();
+        expect(screen.queryByText("New title")).not.toBeInTheDocument();
     });
-    it('falls back to the current task actor label for AI comments when only the id is present', () => {
+    it("falls back to the current task actor label for AI comments when only the id is present", () => {
         renderForm({
-            editingTaskId: '123',
+            editingTaskId: "123",
             showComments: true,
             currentTask: {
-                id: '123',
-                title: 'Codex-owned task',
-                assignee: 'ai-profile-123',
+                id: "123",
+                title: "Codex-owned task",
+                assignee: "ai-profile-123",
                 assigneeActor: {
-                    id: 'ai-profile-123',
-                    kind: 'ai',
-                    label: 'Codex',
-                    username: 'codex',
-                    icon: 'Bot',
-                    color: '#0ea5e9',
+                    id: "ai-profile-123",
+                    kind: "ai",
+                    label: "Codex",
+                    username: "codex",
+                    icon: "Bot",
+                    color: "#0ea5e9",
                     isNamed: true,
                 },
             },
             comments: [
                 {
-                    id: 'comment-2',
-                    author: 'ai-profile-123',
-                    text: 'Rendered from task actor fallback.',
-                    timestamp: '2026-03-22T10:05:00.000Z',
+                    id: "comment-2",
+                    author: "ai-profile-123",
+                    text: "Rendered from task actor fallback.",
+                    timestamp: "2026-03-22T10:05:00.000Z",
                 },
             ],
         });
-        expect(screen.getByText('Codex')).toBeInTheDocument();
+        expect(screen.getByText("Codex")).toBeInTheDocument();
         expect(screen.queryByText(/019d|ai-profile/i)).not.toBeInTheDocument();
     });
-    it('uses the resolved actor icon and color tint for named AI comments', () => {
+    it("uses the resolved actor icon and color tint for named AI comments", () => {
         const { container } = renderForm({
-            editingTaskId: '123',
+            editingTaskId: "123",
             showComments: true,
             comments: [
                 {
-                    id: 'comment-3',
-                    author: 'claude',
-                    text: 'Resolved actor presentation.',
-                    timestamp: '2026-03-22T10:10:00.000Z',
+                    id: "comment-3",
+                    author: "claude",
+                    text: "Resolved actor presentation.",
+                    timestamp: "2026-03-22T10:10:00.000Z",
                     actor: {
-                        id: 'ai-profile-claude',
-                        kind: 'ai',
-                        label: 'Claude',
-                        username: 'claude',
-                        icon: 'Bot',
-                        color: '#f59e0b',
+                        id: "ai-profile-claude",
+                        kind: "ai",
+                        label: "Claude",
+                        username: "claude",
+                        icon: "Bot",
+                        color: "#f59e0b",
                         isNamed: true,
                     },
                 },
             ],
         });
-        expect(container.querySelector('.lucide-bot')).toBeTruthy();
-        const bubble = screen.getByText('Resolved actor presentation.').closest('[class*="commentText"]');
+        expect(container.querySelector(".lucide-bot")).toBeTruthy();
+        const bubble = screen
+            .getByText("Resolved actor presentation.")
+            .closest('[class*="commentText"]');
         expect(bubble).toHaveStyle({
-            borderColor: 'rgba(245, 158, 11, 0.35)',
+            borderColor: "rgba(245, 158, 11, 0.35)",
         });
     });
     // --- Context Upload ---
-    it('3.25 Render context image', async () => {
+    it("3.25 Render context image", async () => {
         const user = userEvent.setup();
-        renderForm({ contextFiles: [{ path: 'img.png', timestamp: '' }] });
-        await user.click(screen.getByTitle('Show context documents'));
+        renderForm({ contextFiles: [{ path: "img.png", timestamp: "" }] });
+        await user.click(screen.getByTitle("Show context documents"));
         const img = screen.getByAltText(/Context file 0/i);
         expect(img).toBeInTheDocument();
-        expect(img).toHaveAttribute('src', 'img.png');
+        expect(img).toHaveAttribute("src", "img.png");
     });
-    it('3.26 Remove context file', async () => {
+    it("3.26 Remove context file", async () => {
         const user = userEvent.setup();
-        renderForm({ contextFiles: [{ path: 'img.png', timestamp: '' }] });
-        await user.click(screen.getByTitle('Show context documents'));
-        const deleteBtn = screen.getByTitle('Delete');
+        renderForm({ contextFiles: [{ path: "img.png", timestamp: "" }] });
+        await user.click(screen.getByTitle("Show context documents"));
+        const deleteBtn = screen.getByTitle("Delete");
         await user.click(deleteBtn);
         expect(defaultProps.onRemoveContextFile).toHaveBeenCalledWith(0);
     });