@parhelia/core 0.1.12808 → 0.1.12838

package/dist/task-board/TaskBoardWorkspace.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { toast } from "sonner";
 import { cn } from "../lib/utils";
 import { Splitter } from "../editor/ui/Splitter";
@@ -9,7 +9,6 @@ import { useEditContext } from "../editor/client/editContext";
 import { LicenseFeatures, useFeature } from "../licensing";
 import { KanbanView } from "./views/KanbanView";
 import { ListView } from "./views/ListView";
-import { DependencyGraphView } from "./views/DependencyGraphView";
 import { WizardView } from "./views/WizardView";
 import { SimpleTabs } from "../editor/ui/SimpleTabs";
 import { TaskDetailPanel, } from "./components/TaskDetailPanel";
@@ -35,6 +34,9 @@ import { Button } from "../components/ui/button";
 import { Loader2, Plus } from "lucide-react";
 import { MainContentTree } from "../editor/sidebar/MainContentTree";
 import { useTaskBoardAgentPanelState } from "./useTaskBoardAgentPanelState";
+const DependencyGraphView = lazy(() => import("./views/DependencyGraphView").then((module) => ({
+    default: module.DependencyGraphView,
+})));
 function TaskboardPreviewEditor() {
     const editContext = useEditContext();
     const slotContext = editContext?.getActiveSlotContext();
@@ -399,7 +401,7 @@ export function TaskBoardWorkspace() {
     const viewTabIds = useMemo(() => ["kanban", "list", "graph"], []);
     const isListView = viewTabIds[activeTab] === "list";
     const isGraphView = viewTabIds[activeTab] === "graph";
-    const sharedViewSwitcher = useMemo(() => (_jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx(SimpleTabs, { tabs: viewTabs, activeTab: activeTab, setActiveTab: setActiveTab, hideContent: true, className: "rounded-lg border-0 bg-slate-100/50 p-1" }), _jsxs(Button, { size: "sm", onClick: () => setCreateDialogOpen(true), disabled: !canEditTasks, className: "h-8 px-3", "data-testid": "taskboard-create-task-button", children: [_jsx(Plus, { className: "h-4 w-4 sm:mr-1.5" }), _jsx("span", { className: "hidden sm:inline", children: "New Task" })] })] })), [activeTab, canEditTasks, viewTabs]);
+    const sharedViewSwitcher = useMemo(() => (_jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx(SimpleTabs, { tabs: viewTabs, activeTab: activeTab, setActiveTab: setActiveTab, hideContent: true, className: "bg-neutral-grey-5/50 rounded-lg border-0 p-1" }), _jsxs(Button, { size: "sm", onClick: () => setCreateDialogOpen(true), disabled: !canEditTasks, className: "h-8 px-3", "data-testid": "taskboard-create-task-button", children: [_jsx(Plus, { className: "h-4 w-4 sm:mr-1.5" }), _jsx("span", { className: "hidden sm:inline", children: "New Task" })] })] })), [activeTab, canEditTasks, viewTabs]);
     const handleSelectProject = useCallback((projectId) => {
         setSelectedProjectId((previousProjectId) => {
             if (previousProjectId !== projectId) {
@@ -1282,6 +1284,15 @@ export function TaskBoardWorkspace() {
             },
         });
     }, [editContext]);
+    const handleOpenSourceTemplate = useCallback((projectTemplateId) => {
+        editContext?.switchWorkspace("settings", {
+            skipConfirmation: false,
+            urlParams: {
+                ccpanel: "project-templates",
+                projectTemplateId,
+            },
+        });
+    }, [editContext]);
     useEffect(() => {
         setTaskBoardNavState({
             projectTitle: selectedProject?.project.title ?? "Tasks",
@@ -1619,7 +1630,12 @@ export function TaskBoardWorkspace() {
             // Clearing it here was the bug: editContext changes caused cleanup to
             // cancel the pending debounced refresh before it could fire.
         };
-    }, [editContext, isProjectWithinSelectedTree, queueSelectedProjectRefresh, queueSubprojectRefresh]);
+    }, [
+        editContext,
+        isProjectWithinSelectedTree,
+        queueSelectedProjectRefresh,
+        queueSubprojectRefresh,
+    ]);
     // Keep project dropdown in sync when projects are created elsewhere (e.g. by agents).
     useEffect(() => {
         const addListener = editContext?.addSocketMessageListener;
@@ -1744,7 +1760,7 @@ export function TaskBoardWorkspace() {
     const isProjectViewLoading = !!selectedProjectId && projectViewLoadingId === selectedProjectId;
     const taskBoardContent = useMemo(() => {
         if (isProjectViewLoading) {
-            return (_jsx("div", { className: "flex h-full min-h-[240px] items-center justify-center rounded-lg border border-dashed border-slate-200 bg-slate-50/70", "data-testid": "taskboard-project-loading-state", children: _jsxs("div", { className: "text-muted-foreground flex flex-col items-center gap-3 text-sm", children: [_jsx(Loader2, { className: "h-6 w-6 animate-spin" }), _jsx("div", { children: "Loading project..." })] }) }));
+            return (_jsx("div", { className: "border-border-default bg-neutral-grey-5/70 flex h-full min-h-[240px] items-center justify-center rounded-lg border border-dashed", "data-testid": "taskboard-project-loading-state", children: _jsxs("div", { className: "text-muted-foreground flex flex-col items-center gap-3 text-sm", children: [_jsx(Loader2, { className: "h-6 w-6 animate-spin" }), _jsx("div", { children: "Loading project..." })] }) }));
         }
         if (!selectedProjectId || (!selectedProject && !isProjectsLoading)) {
             return (_jsx("div", { className: "flex min-h-full w-full flex-col p-4 md:p-8", children: _jsx("div", { className: "mx-auto flex h-full min-h-0 w-full max-w-7xl flex-1", children: _jsx(ProjectOverviewContent, { nav: nav }) }) }));
@@ -1756,19 +1772,19 @@ export function TaskBoardWorkspace() {
                 }, projectTitle: selectedProject?.project.title ?? "No project selected", projectDescription: selectedProject?.project.description, projectCostUsed: selectedProjectCumulativeCostUsed, projectCostLimit: selectedProject?.project.costLimit ?? null, canEditProperties: selectedProject?.permission === "Owner", communicationPanel: wizardCommunicationPanel }));
         }
         if (isListView) {
-            return (_jsxs("div", { className: "grid gap-3", children: [_jsx(ProjectDashboard, { projectId: selectedProjectId, selectedProjectTitle: selectedProject?.project.title ?? "No project selected", selectedProjectDescription: selectedProject?.project.description, selectedProjectStatus: selectedProject?.project.status, selectedProjectCostUsed: selectedProjectCumulativeCostUsed, selectedProjectCostLimit: selectedProject?.project.costLimit ?? null, canEditProjectStatus: selectedProject?.permission === "Owner", savingProjectStatus: savingProjectStatus, onStatusChange: handleProjectStatusChange, selectedProjectTaskCounts: selectedProjectTaskCounts, subprojects: directSubprojects, taskCountsByProjectId: subprojectTaskCounts, loading: subprojectCountsLoading, parentProjectId: parentProject?.project.projectId ?? null, parentProjectTitle: parentProject?.project.title ?? null, onSelectProject: handleSelectProject, canEditProperties: selectedProject?.permission === "Owner", selectedProjectSourceTemplateId: selectedProject?.project.sourceProjectTemplateId ?? null, selectedProjectSourceTemplateName: selectedProject?.project.sourceProjectTemplateName ?? null, canOpenSourceTemplate: isAdministrator }), sharedViewSwitcher, _jsx(ListView, { tasks: tasksWithDisplayAssignees, onSelectTask: (id) => setTaskSelection(id, { source: "user" }), selectedTaskId: selectedTaskId, onTasksChanged: () => {
+            return (_jsxs("div", { className: "grid gap-3", children: [_jsx(ProjectDashboard, { projectId: selectedProjectId, selectedProjectTitle: selectedProject?.project.title ?? "No project selected", selectedProjectDescription: selectedProject?.project.description, selectedProjectStatus: selectedProject?.project.status, selectedProjectCostUsed: selectedProjectCumulativeCostUsed, selectedProjectCostLimit: selectedProject?.project.costLimit ?? null, canEditProjectStatus: selectedProject?.permission === "Owner", savingProjectStatus: savingProjectStatus, onStatusChange: handleProjectStatusChange, selectedProjectTaskCounts: selectedProjectTaskCounts, subprojects: directSubprojects, taskCountsByProjectId: subprojectTaskCounts, loading: subprojectCountsLoading, parentProjectId: parentProject?.project.projectId ?? null, parentProjectTitle: parentProject?.project.title ?? null, onSelectProject: handleSelectProject, canEditProperties: selectedProject?.permission === "Owner", selectedProjectSourceTemplateId: selectedProject?.project.sourceProjectTemplateId ?? null, selectedProjectSourceTemplateName: selectedProject?.project.sourceProjectTemplateName ?? null, canOpenSourceTemplate: isAdministrator, onOpenSourceTemplate: handleOpenSourceTemplate }), sharedViewSwitcher, _jsx(ListView, { tasks: tasksWithDisplayAssignees, onSelectTask: (id) => setTaskSelection(id, { source: "user" }), selectedTaskId: selectedTaskId, onTasksChanged: () => {
                             void refreshVisibleTaskData();
                         }, projectId: selectedProjectId, permission: selectedProject?.permission })] }));
         }
         if (isGraphView) {
-            return (_jsxs("div", { className: "flex h-full min-h-0 min-w-0 flex-col gap-3", children: [_jsx(ProjectDashboard, { projectId: selectedProjectId, selectedProjectTitle: selectedProject?.project.title ?? "No project selected", selectedProjectDescription: selectedProject?.project.description, selectedProjectStatus: selectedProject?.project.status, selectedProjectCostUsed: selectedProjectCumulativeCostUsed, selectedProjectCostLimit: selectedProject?.project.costLimit ?? null, canEditProjectStatus: selectedProject?.permission === "Owner", savingProjectStatus: savingProjectStatus, onStatusChange: handleProjectStatusChange, selectedProjectTaskCounts: selectedProjectTaskCounts, subprojects: directSubprojects, taskCountsByProjectId: subprojectTaskCounts, loading: subprojectCountsLoading, parentProjectId: parentProject?.project.projectId ?? null, parentProjectTitle: parentProject?.project.title ?? null, onSelectProject: handleSelectProject, canEditProperties: selectedProject?.permission === "Owner", selectedProjectSourceTemplateId: selectedProject?.project.sourceProjectTemplateId ?? null, selectedProjectSourceTemplateName: selectedProject?.project.sourceProjectTemplateName ?? null, canOpenSourceTemplate: isAdministrator }), sharedViewSwitcher, _jsx("div", { className: "min-h-0 flex-1", children: _jsx(DependencyGraphView, { projectId: selectedProjectId, tasks: tasksWithDisplayAssignees, dependencies: dependencies, miniMapWidth: 160, miniMapHeight: 120, orientation: "horizontal", autoLayoutStrategy: "hierarchy", showOrientationToggle: true, savedLayout: graphLayout, selectedTaskId: selectedTaskId, onSelectTask: (id) => setTaskSelection(id, { source: "user" }), permission: selectedProject?.permission, onLayoutSaved: (layout) => setGraphLayout(layout && selectedProjectId
-                                ? {
-                                    projectId: selectedProjectId,
-                                    ...layout,
-                                }
-                                : null) }) })] }));
-        }
-        return (_jsxs("div", { className: "flex h-full min-h-0 min-w-0 flex-col gap-3", children: [_jsx(ProjectDashboard, { projectId: selectedProjectId, selectedProjectTitle: selectedProject?.project.title ?? "No project selected", selectedProjectDescription: selectedProject?.project.description, selectedProjectStatus: selectedProject?.project.status, selectedProjectCostUsed: selectedProjectCumulativeCostUsed, selectedProjectCostLimit: selectedProject?.project.costLimit ?? null, canEditProjectStatus: selectedProject?.permission === "Owner", savingProjectStatus: savingProjectStatus, onStatusChange: handleProjectStatusChange, selectedProjectTaskCounts: selectedProjectTaskCounts, subprojects: directSubprojects, taskCountsByProjectId: subprojectTaskCounts, loading: subprojectCountsLoading, parentProjectId: parentProject?.project.projectId ?? null, parentProjectTitle: parentProject?.project.title ?? null, onSelectProject: handleSelectProject, canEditProperties: selectedProject?.permission === "Owner", selectedProjectSourceTemplateId: selectedProject?.project.sourceProjectTemplateId ?? null, selectedProjectSourceTemplateName: selectedProject?.project.sourceProjectTemplateName ?? null, canOpenSourceTemplate: isAdministrator }), sharedViewSwitcher, _jsx(KanbanView, { tasks: tasksWithDisplayAssignees, dependencies: dependencies, onSelectTask: (id) => setTaskSelection(id, { source: "user" }), selectedTaskId: selectedTaskId, onTasksChanged: () => {
+            return (_jsxs("div", { className: "flex h-full min-h-0 min-w-0 flex-col gap-3", children: [_jsx(ProjectDashboard, { projectId: selectedProjectId, selectedProjectTitle: selectedProject?.project.title ?? "No project selected", selectedProjectDescription: selectedProject?.project.description, selectedProjectStatus: selectedProject?.project.status, selectedProjectCostUsed: selectedProjectCumulativeCostUsed, selectedProjectCostLimit: selectedProject?.project.costLimit ?? null, canEditProjectStatus: selectedProject?.permission === "Owner", savingProjectStatus: savingProjectStatus, onStatusChange: handleProjectStatusChange, selectedProjectTaskCounts: selectedProjectTaskCounts, subprojects: directSubprojects, taskCountsByProjectId: subprojectTaskCounts, loading: subprojectCountsLoading, parentProjectId: parentProject?.project.projectId ?? null, parentProjectTitle: parentProject?.project.title ?? null, onSelectProject: handleSelectProject, canEditProperties: selectedProject?.permission === "Owner", selectedProjectSourceTemplateId: selectedProject?.project.sourceProjectTemplateId ?? null, selectedProjectSourceTemplateName: selectedProject?.project.sourceProjectTemplateName ?? null, canOpenSourceTemplate: isAdministrator, onOpenSourceTemplate: handleOpenSourceTemplate }), sharedViewSwitcher, _jsx("div", { className: "min-h-0 flex-1", children: _jsx(Suspense, { fallback: _jsx("div", { className: "text-muted-foreground flex h-full items-center justify-center text-sm", children: "Loading dependency graph..." }), children: _jsx(DependencyGraphView, { projectId: selectedProjectId, tasks: tasksWithDisplayAssignees, dependencies: dependencies, miniMapWidth: 160, miniMapHeight: 120, orientation: "horizontal", autoLayoutStrategy: "hierarchy", showOrientationToggle: true, savedLayout: graphLayout, selectedTaskId: selectedTaskId, onSelectTask: (id) => setTaskSelection(id, { source: "user" }), permission: selectedProject?.permission, onLayoutSaved: (layout) => setGraphLayout(layout && selectedProjectId
+                                    ? {
+                                        projectId: selectedProjectId,
+                                        ...layout,
+                                    }
+                                    : null) }) }) })] }));
+        }
+        return (_jsxs("div", { className: "flex h-full min-h-0 min-w-0 flex-col gap-3", children: [_jsx(ProjectDashboard, { projectId: selectedProjectId, selectedProjectTitle: selectedProject?.project.title ?? "No project selected", selectedProjectDescription: selectedProject?.project.description, selectedProjectStatus: selectedProject?.project.status, selectedProjectCostUsed: selectedProjectCumulativeCostUsed, selectedProjectCostLimit: selectedProject?.project.costLimit ?? null, canEditProjectStatus: selectedProject?.permission === "Owner", savingProjectStatus: savingProjectStatus, onStatusChange: handleProjectStatusChange, selectedProjectTaskCounts: selectedProjectTaskCounts, subprojects: directSubprojects, taskCountsByProjectId: subprojectTaskCounts, loading: subprojectCountsLoading, parentProjectId: parentProject?.project.projectId ?? null, parentProjectTitle: parentProject?.project.title ?? null, onSelectProject: handleSelectProject, canEditProperties: selectedProject?.permission === "Owner", selectedProjectSourceTemplateId: selectedProject?.project.sourceProjectTemplateId ?? null, selectedProjectSourceTemplateName: selectedProject?.project.sourceProjectTemplateName ?? null, canOpenSourceTemplate: isAdministrator, onOpenSourceTemplate: handleOpenSourceTemplate }), sharedViewSwitcher, _jsx(KanbanView, { tasks: tasksWithDisplayAssignees, dependencies: dependencies, onSelectTask: (id) => setTaskSelection(id, { source: "user" }), selectedTaskId: selectedTaskId, onTasksChanged: () => {
                         void refreshVisibleTaskData();
                     }, projectId: selectedProjectId, permission: selectedProject?.permission })] }));
     }, [
@@ -1782,6 +1798,7 @@ export function TaskBoardWorkspace() {
         selectedProjectCumulativeCostUsed,
         savingProjectStatus,
         handleProjectStatusChange,
+        handleOpenSourceTemplate,
         selectedProjectTaskCounts,
         directSubprojects,
         subprojectTaskCounts,
@@ -1943,13 +1960,13 @@ export function TaskBoardWorkspace() {
                 {
                     name: "editor-preview",
                     defaultSize: "auto",
-                    content: (_jsx("div", { className: "h-full min-h-0 min-w-0 overflow-hidden bg-gray-50", children: editorContent })),
+                    content: (_jsx("div", { className: "bg-neutral-grey-5 h-full min-h-0 min-w-0 overflow-hidden", children: editorContent })),
                 },
-            ], splitterClassName: "bg-gray-200 hover:bg-gray-300 w-[6px]", className: "h-full", direction: isMobile ? "vertical" : "horizontal" }));
+            ], splitterClassName: "bg-neutral-grey-10 hover:bg-neutral-grey-10 w-[6px]", className: "h-full", direction: isMobile ? "vertical" : "horizontal" }));
         if (!currentItemDescriptor) {
-            return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsx("div", { className: "border-b border-gray-200 bg-white px-3 py-2", children: hasCurrentItem ? (_jsxs("div", { className: "min-w-0", children: [hasMultipleContextItems ? (_jsx(Select, { value: selectedContextItemValue, onValueChange: handleSelectContextItem, options: contextItemOptions, placeholder: "Select context item", size: "xs", searchable: true, className: "h-7 rounded-md bg-white", maxWidth: 420, "data-testid": "taskboard-context-item-selector" })) : (_jsx("div", { className: "truncate text-sm font-medium text-slate-900", children: previewItemName || "Loading item..." })), _jsxs("div", { className: "mt-0.5 flex items-center gap-2", children: [_jsx("span", { className: "truncate text-xs text-slate-500", children: previewItemPath || "Path unavailable" }), _jsx("span", { className: "shrink-0 rounded bg-slate-100 px-1.5 py-0.5 text-[10px] font-medium text-slate-600", children: selectedContextItemValue.split("|")[1] || "" }), previewItemVersion != null && (_jsxs("span", { className: "shrink-0 rounded bg-slate-100 px-1.5 py-0.5 text-[10px] font-medium text-slate-600", children: ["v", previewItemVersion] }))] })] })) : (_jsx("div", { className: "text-xs text-slate-500", children: "No item loaded" })) }), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden bg-gray-50", children: renderPreviewSplit(_jsxs("div", { className: "flex h-full min-h-0 flex-col items-center justify-center gap-3 p-6 text-center", children: [_jsx("div", { className: "text-muted-foreground text-sm font-medium", children: "Editor preview unavailable" }), _jsx("div", { className: "text-muted-foreground text-xs", children: "Open the editor context item to preview and edit it here." })] })) })] }));
+            return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsx("div", { className: "border-border-default border-b bg-white px-3 py-2", children: hasCurrentItem ? (_jsxs("div", { className: "min-w-0", children: [hasMultipleContextItems ? (_jsx(Select, { value: selectedContextItemValue, onValueChange: handleSelectContextItem, options: contextItemOptions, placeholder: "Select context item", size: "xs", searchable: true, className: "h-7 rounded-md bg-white", maxWidth: 420, "data-testid": "taskboard-context-item-selector" })) : (_jsx("div", { className: "text-neutral-grey-100 truncate text-sm font-medium", children: previewItemName || "Loading item..." })), _jsxs("div", { className: "mt-0.5 flex items-center gap-2", children: [_jsx("span", { className: "text-neutral-grey-50 truncate text-xs", children: previewItemPath || "Path unavailable" }), _jsx("span", { className: "bg-neutral-grey-5 badge-pad-sm text-neutral-grey-50 shrink-0 rounded text-[10px] font-medium", children: selectedContextItemValue.split("|")[1] || "" }), previewItemVersion != null && (_jsxs("span", { className: "bg-neutral-grey-5 badge-pad-sm text-neutral-grey-50 shrink-0 rounded text-[10px] font-medium", children: ["v", previewItemVersion] }))] })] })) : (_jsx("div", { className: "text-neutral-grey-50 text-xs", children: "No item loaded" })) }), _jsx("div", { className: "bg-neutral-grey-5 min-h-0 flex-1 overflow-hidden", children: renderPreviewSplit(_jsxs("div", { className: "flex h-full min-h-0 flex-col items-center justify-center gap-3 p-6 text-center", children: [_jsx("div", { className: "text-muted-foreground text-sm font-medium", children: "Editor preview unavailable" }), _jsx("div", { className: "text-muted-foreground text-xs", children: "Open the editor context item to preview and edit it here." })] })) })] }));
         }
-        return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsx("div", { className: "border-b border-gray-200 bg-white px-3 py-2", children: hasCurrentItem ? (_jsxs("div", { className: "min-w-0", children: [hasMultipleContextItems ? (_jsx(Select, { value: selectedContextItemValue, onValueChange: handleSelectContextItem, options: contextItemOptions, placeholder: "Select context item", size: "xs", searchable: true, className: "h-7 rounded-md bg-white", maxWidth: 420, "data-testid": "taskboard-context-item-selector" })) : (_jsx("div", { className: "truncate text-sm font-medium text-slate-900", children: previewItemName || "Loading item..." })), _jsxs("div", { className: "mt-0.5 flex items-center gap-2", children: [_jsx("span", { className: "truncate text-xs text-slate-500", children: previewItemPath || "Path unavailable" }), _jsx("span", { className: "shrink-0 rounded bg-slate-100 px-1.5 py-0.5 text-[10px] font-medium text-slate-600", children: currentItemDescriptor?.language }), previewItemVersion != null && (_jsxs("span", { className: "shrink-0 rounded bg-slate-100 px-1.5 py-0.5 text-[10px] font-medium text-slate-600", children: ["v", previewItemVersion] }))] })] })) : (_jsx("div", { className: "text-xs text-slate-500", children: "No item loaded" })) }), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden bg-gray-50", children: renderPreviewSplit(_jsx(TaskboardPreviewEditor, {})) })] }));
+        return (_jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [_jsx("div", { className: "border-border-default border-b bg-white px-3 py-2", children: hasCurrentItem ? (_jsxs("div", { className: "min-w-0", children: [hasMultipleContextItems ? (_jsx(Select, { value: selectedContextItemValue, onValueChange: handleSelectContextItem, options: contextItemOptions, placeholder: "Select context item", size: "xs", searchable: true, className: "h-7 rounded-md bg-white", maxWidth: 420, "data-testid": "taskboard-context-item-selector" })) : (_jsx("div", { className: "text-neutral-grey-100 truncate text-sm font-medium", children: previewItemName || "Loading item..." })), _jsxs("div", { className: "mt-0.5 flex items-center gap-2", children: [_jsx("span", { className: "text-neutral-grey-50 truncate text-xs", children: previewItemPath || "Path unavailable" }), _jsx("span", { className: "bg-neutral-grey-5 badge-pad-sm text-neutral-grey-50 shrink-0 rounded text-[10px] font-medium", children: currentItemDescriptor?.language }), previewItemVersion != null && (_jsxs("span", { className: "bg-neutral-grey-5 badge-pad-sm text-neutral-grey-50 shrink-0 rounded text-[10px] font-medium", children: ["v", previewItemVersion] }))] })] })) : (_jsx("div", { className: "text-neutral-grey-50 text-xs", children: "No item loaded" })) }), _jsx("div", { className: "bg-neutral-grey-5 min-h-0 flex-1 overflow-hidden", children: renderPreviewSplit(_jsx(TaskboardPreviewEditor, {})) })] }));
     }, [
         currentItemDescriptor,
         hasMultipleContextItems,
@@ -1970,14 +1987,14 @@ export function TaskBoardWorkspace() {
                 {
                     name: "wizard-view",
                     defaultSize: 70,
-                    content: (_jsx("div", { className: "h-full overflow-x-hidden overflow-y-auto bg-slate-50/50", children: taskBoardContent })),
+                    content: (_jsx("div", { className: "bg-neutral-grey-5/50 h-full overflow-x-hidden overflow-y-auto", children: taskBoardContent })),
                 },
             ];
             if (showEditorPanel) {
                 wizardPanels.push({
                     name: "editor-preview",
                     defaultSize: 30,
-                    content: (_jsx("div", { className: "h-full overflow-hidden border-l border-gray-200 bg-gray-50", children: itemPreviewPanel })),
+                    content: (_jsx("div", { className: "border-border-default bg-neutral-grey-5 h-full overflow-hidden border-l", children: itemPreviewPanel })),
                 });
             }
             return wizardPanels;
@@ -1987,7 +2004,7 @@ export function TaskBoardWorkspace() {
                 {
                     name: "task-list",
                     defaultSize: "auto",
-                    content: (_jsx("div", { className: "h-full overflow-x-auto overflow-y-auto bg-slate-50/50 p-2 pt-2 md:p-4 md:pt-3", children: taskBoardContent })),
+                    content: (_jsx("div", { className: "bg-neutral-grey-5/50 h-full overflow-x-auto overflow-y-auto p-2 pt-2 md:p-4 md:pt-3", children: taskBoardContent })),
                 },
                 ...buildRightHandPanels(showAgentColumnForSelectedTask),
             ];
@@ -1995,7 +2012,7 @@ export function TaskBoardWorkspace() {
                 listPanels.push({
                     name: "editor-preview",
                     defaultSize: 500,
-                    content: (_jsx("div", { className: "h-full overflow-hidden border-l border-gray-200 bg-gray-50", children: itemPreviewPanel })),
+                    content: (_jsx("div", { className: "border-border-default bg-neutral-grey-5 h-full overflow-hidden border-l", children: itemPreviewPanel })),
                 });
             }
             return listPanels;
@@ -2005,7 +2022,7 @@ export function TaskBoardWorkspace() {
                 {
                     name: "task-list",
                     defaultSize: "auto",
-                    content: (_jsx("div", { className: cn("flex h-full min-h-0 flex-col overflow-x-hidden overflow-y-auto bg-slate-50/50", selectedProjectId && "p-4 pt-3"), children: taskBoardContent })),
+                    content: (_jsx("div", { className: cn("bg-neutral-grey-5/50 flex h-full min-h-0 flex-col overflow-x-hidden overflow-y-auto", selectedProjectId && "p-4 pt-3"), children: taskBoardContent })),
                 },
                 ...buildRightHandPanels(showAgentColumnForSelectedTask),
             ];
@@ -2013,7 +2030,7 @@ export function TaskBoardWorkspace() {
                 graphPanels.push({
                     name: "editor-preview",
                     defaultSize: 500,
-                    content: (_jsx("div", { className: "h-full overflow-hidden border-l border-gray-200 bg-gray-50", children: itemPreviewPanel })),
+                    content: (_jsx("div", { className: "border-border-default bg-neutral-grey-5 h-full overflow-hidden border-l", children: itemPreviewPanel })),
                 });
             }
             return graphPanels;
@@ -2022,7 +2039,7 @@ export function TaskBoardWorkspace() {
             {
                 name: "task-list",
                 defaultSize: "auto",
-                content: (_jsx("div", { className: cn("flex h-full min-h-0 flex-col overflow-x-hidden overflow-y-auto bg-slate-50/50", selectedProjectId && "p-4 pt-3"), children: taskBoardContent })),
+                content: (_jsx("div", { className: cn("bg-neutral-grey-5/50 flex h-full min-h-0 flex-col overflow-x-hidden overflow-y-auto", selectedProjectId && "p-4 pt-3"), children: taskBoardContent })),
             },
             ...buildRightHandPanels(showAgentColumnForSelectedTask),
         ];
@@ -2030,7 +2047,7 @@ export function TaskBoardWorkspace() {
             kanbanPanels.push({
                 name: "editor-preview",
                 defaultSize: 500,
-                content: (_jsx("div", { className: "h-full overflow-hidden border-l border-gray-200 bg-gray-50", children: itemPreviewPanel })),
+                content: (_jsx("div", { className: "border-border-default bg-neutral-grey-5 h-full overflow-hidden border-l", children: itemPreviewPanel })),
             });
         }
         return kanbanPanels;
@@ -2046,7 +2063,7 @@ export function TaskBoardWorkspace() {
         showEditorPanel,
         itemPreviewPanel,
     ]);
-    return (_jsxs("div", { className: "text-foreground flex h-full w-full flex-col bg-white select-text", children: [_jsx("div", { className: "min-h-0 flex-1", children: isMobile ? (_jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [selectedProjectId && (_jsx("div", { className: "shrink-0 border-b border-gray-100 bg-white px-4 shadow-[0_1px_2px_rgba(0,0,0,0.03)]", children: _jsx(SimpleTabs, { tabs: [
+    return (_jsxs("div", { className: "text-foreground flex h-full w-full flex-col bg-white select-text", children: [_jsx("div", { className: "min-h-0 flex-1", children: isMobile ? (_jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [selectedProjectId && (_jsx("div", { className: "border-border-default shrink-0 border-b bg-white px-4 shadow-[0_1px_2px_color-mix(in_srgb,var(--color-neutral-grey-100)_3%,transparent)]", children: _jsx(SimpleTabs, { tabs: [
                                     { id: "project", label: "Project", content: null },
                                     {
                                         id: "task",
@@ -2063,11 +2080,11 @@ export function TaskBoardWorkspace() {
                                     ...(showEditorPanel
                                         ? [{ id: "editor", label: "Editor", content: null }]
                                         : []),
-                                ], activeTab: mobileActiveTab, setActiveTab: setMobileActiveTab, hideContent: true, variant: "elegant", className: "gap-6" }) })), _jsxs("div", { className: "min-h-0 flex-1 overflow-hidden", children: [mobileActiveTab === 0 && (_jsx("div", { className: cn("flex h-full overflow-y-auto bg-slate-50/50", selectedProjectId &&
+                                ], activeTab: mobileActiveTab, setActiveTab: setMobileActiveTab, hideContent: true, className: "gap-6" }) })), _jsxs("div", { className: "min-h-0 flex-1 overflow-hidden", children: [mobileActiveTab === 0 && (_jsx("div", { className: cn("bg-neutral-grey-5/50 flex h-full overflow-y-auto", selectedProjectId &&
                                         !isWizardMode &&
                                         "p-2 pt-2 md:p-4 md:pt-3"), children: taskBoardContent })), mobileActiveTab === 1 && (_jsx("div", { className: "h-full overflow-y-auto bg-white", children: taskDetailPanel })), mobileActiveTab === 2 && (_jsx("div", { className: "h-full overflow-hidden bg-white", children: shouldHideAgentPanelForSelectedTask
                                         ? taskDetailPanel
-                                        : agentTerminalPanel })), mobileActiveTab === 3 && showEditorPanel && (_jsx("div", { className: "h-full overflow-hidden bg-gray-50", children: itemPreviewPanel }))] })] })) : (_jsx(Splitter, { panels: panels, direction: "horizontal", localStorageKey: isWizardMode
+                                        : agentTerminalPanel })), mobileActiveTab === 3 && showEditorPanel && (_jsx("div", { className: "bg-neutral-grey-5 h-full overflow-hidden", children: itemPreviewPanel }))] })] })) : (_jsx(Splitter, { panels: panels, direction: "horizontal", localStorageKey: isWizardMode
                         ? "task-board-wizard-splitter-v2"
                         : "task-board-main-splitter" })) }), selectedProjectId && (_jsx(CreateTaskDialog, { open: createDialogOpen, onOpenChange: setCreateDialogOpen, projectId: selectedProjectId, availableParentTasks: tasks, onCreated: () => {
                     void refreshTasks(selectedProjectId);