diff --git a/.changeset/fn-7834-task-documents-grouping.md b/.changeset/fn-7834-task-documents-grouping.md new file mode 100644 index 0000000000..d46060c6f0 --- /dev/null +++ b/.changeset/fn-7834-task-documents-grouping.md @@ -0,0 +1,7 @@ +--- +"@runfusion/fusion": patch +--- + +summary: Artifacts view — Task Documents sidebar now shows clearer task grouping and more space between tasks. +category: fix +dev: DocumentsView Task Documents sidebar restyles .documents-task-sidebar-group-header vs .documents-task-document-item hierarchy and increases inter-group separation, scoped under .documents-task-documents-sidebar so Project Files and Artifacts tabs are unaffected. diff --git a/docs/dashboard-guide.md b/docs/dashboard-guide.md index d41d67d78c..741a666913 100644 --- a/docs/dashboard-guide.md +++ b/docs/dashboard-guide.md @@ -830,7 +830,7 @@ Artifacts view aggregates registered artifacts, project markdown files, and task Features: -- Browse **Task Documents** in the same left-sidebar/right-pane pattern as **Project Files**: the sidebar groups document entries by task ID with revision metadata and parent task status badges when available, while the right pane loads the selected document content +- Browse **Task Documents** in the same left-sidebar/right-pane pattern as **Project Files**: the sidebar groups document entries by task ID in distinct task cards with clear spacing between tasks, revision metadata, and parent task status badges when available, while the right pane loads the selected document content - Search documents across tasks - Open project markdown files and task documents with inline preview - Browse the **Artifacts** tab for registry media registered by any agent, dashboard chat/user action, or system tool across tasks diff --git a/packages/dashboard/app/components/DocumentsView.css b/packages/dashboard/app/components/DocumentsView.css index 10dcb076a3..beb4167786 100644 --- a/packages/dashboard/app/components/DocumentsView.css +++ b/packages/dashboard/app/components/DocumentsView.css @@ -370,27 +370,37 @@ Task-document header actions group the Markdown/Plain toggle with the new Edit ( /* FNXC:DocumentsView 2026-07-10-17:40: FN-7811 reuses the Project Files shell for Task Documents, while task-scoped sidebar groups preserve task id/title/status context before each selectable document entry. Keep these styles scoped so Project Files continues to own the generic markdown-file list visuals. + +FNXC:DocumentsView 2026-07-11-19:03: +FN-7834 requires task-document groups to scan as discrete task containers, not a flat sequence of peer rows. Keep the stronger card/header hierarchy and inter-group gap scoped under .documents-task-documents-sidebar so Project Files' shared .markdown-file-item list and the Artifacts gallery remain visually unchanged. */ .documents-task-documents-sidebar { display: flex; flex-direction: column; + gap: var(--space-md); + padding: var(--space-sm); + background: var(--surface); } .documents-task-sidebar-group { - border-bottom: 1px solid var(--border); + overflow: hidden; + border: thin solid var(--border); + border-radius: var(--radius-lg); + background: var(--card); + box-shadow: var(--shadow-sm); } .documents-task-sidebar-group:last-child { - border-bottom: none; + border-bottom: thin solid var(--border); } .documents-task-sidebar-group-header { display: flex; flex-direction: column; gap: var(--space-sm); - padding: var(--space-md); - background: var(--surface); - border-bottom: 1px solid var(--border); + padding: var(--space-md) var(--space-lg); + background: color-mix(in srgb, var(--todo) 8%, var(--card)); + border-bottom: thin solid var(--border); } .documents-task-sidebar-title-wrap { @@ -415,8 +425,23 @@ FN-7811 reuses the Project Files shell for Task Documents, while task-scoped sid gap: var(--space-sm); } +.documents-task-documents-sidebar .documents-task-document-list { + background: var(--card); +} + .documents-task-document-item { border-left-color: transparent; + padding-inline-start: var(--space-lg); + background: color-mix(in srgb, var(--surface) 44%, transparent); +} + +.documents-task-document-item:hover { + background: var(--card-hover); +} + +.documents-task-document-item.markdown-file-item--selected { + border-left-color: var(--todo); + background: color-mix(in srgb, var(--todo) 14%, var(--card)); } /* @@ -433,13 +458,14 @@ The meta line (author · revision · date) renders as its own row directly under .documents-group-task-id { font-family: var(--font-mono); font-size: 12px; + font-weight: 700; color: var(--text-muted); flex-shrink: 0; } .documents-group-task-title { font-size: 14px; - font-weight: 500; + font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; diff --git a/packages/dashboard/app/components/__tests__/DocumentsView.test.tsx b/packages/dashboard/app/components/__tests__/DocumentsView.test.tsx index ec1d20ea1b..008ffdfaff 100644 --- a/packages/dashboard/app/components/__tests__/DocumentsView.test.tsx +++ b/packages/dashboard/app/components/__tests__/DocumentsView.test.tsx @@ -389,6 +389,56 @@ describe("DocumentsView", () => { expect(screen.queryByText("Alpha document content")).not.toBeInTheDocument(); }); + /* + FNXC:DocumentsView 2026-07-11-19:03: + FN-7834 protects the Task Documents sidebar hierarchy: task headers must remain non-clickable group containers while each document stays a selectable child row, so CSS-only visual hierarchy changes cannot accidentally collapse the two surfaces into peer list items again. + */ + it("keeps task document group headers structurally distinct from document entries", () => { + mockUseProjectMarkdownFiles.mockReturnValue({ + files: [], + loading: false, + error: null, + refresh: vi.fn().mockResolvedValue(undefined), + }); + mockUseDocuments.mockReturnValue({ + documents: mockStatusTaskDocuments, + projectFiles: [], + loading: false, + error: null, + refresh: vi.fn().mockResolvedValue(undefined), + }); + + render(); + + fireEvent.click(screen.getByRole("tab", { name: /show task documents/i })); + + const sidebar = screen.getByLabelText("Task documents"); + expect(sidebar).toHaveClass("documents-task-documents-sidebar"); + + const groups = Array.from(sidebar.querySelectorAll(".documents-task-sidebar-group")); + expect(groups.length).toBeGreaterThan(1); + + const doneGroup = screen.getByRole("heading", { name: /KB-DONE.*Done task/i }).closest(".documents-task-sidebar-group") as HTMLElement; + const doneHeader = doneGroup.children[0]; + const doneDocumentList = doneGroup.children[1]; + + expect(doneHeader).toHaveClass("documents-task-sidebar-group-header"); + expect(doneHeader).not.toHaveClass("markdown-file-item"); + expect(doneHeader.querySelector(".documents-task-document-item")).toBeNull(); + expect(doneDocumentList).toHaveClass("documents-task-document-list"); + + const doneEntries = within(doneDocumentList as HTMLElement).getAllByRole("button", { name: /open KB-DONE/i }); + expect(doneEntries).toHaveLength(2); + doneEntries.forEach((entry) => { + expect(entry).toHaveClass("markdown-file-item", "documents-task-document-item"); + expect(entry.closest(".documents-task-sidebar-group-header")).toBeNull(); + }); + + const legacyGroup = screen.getByRole("heading", { name: /KB-MISSING.*Legacy task/i }).closest(".documents-task-sidebar-group") as HTMLElement; + expect(legacyGroup.children[0]).toHaveClass("documents-task-sidebar-group-header"); + expect(legacyGroup.querySelector(".documents-group-status")).not.toBeInTheDocument(); + }); + it("selecting a task document loads content and marks the sidebar entry current", () => { render();