@parhelia/core 0.1.12347 → 0.1.12368

package/dist/task-board/TaskBoardWorkspace.js

@@ -3,12 +3,13 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 import { cn } from "../lib/utils";
 import { Splitter } from "../editor/ui/Splitter";
-import { deleteProject, getExecutionState, getProjects, getTasks, getDependencies, runOrchestrator, triggerPlanning, updateProject, updateTask, } from "./services/taskService";
+import { deleteProject, getExecutionState, getGraphLayout, getProjects, getTasks, getDependencies, runOrchestrator, triggerPlanning, updateProject, updateTask, } from "./services/taskService";
 import { getAgent, } from "../editor/services/agentService";
 import { loadAiProfiles } from "../editor/services/aiService";
 import { useEditContext } from "../editor/client/editContext";
 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";
@@ -31,7 +32,8 @@ import { normalizeTaskStatus } from "./taskStatus";
 import { getTaskExecutionDisplay, } from "./taskExecutionStatus";
 import { indexTaskExecutionRecords, overlayTaskExecutionList, } from "./taskExecutionRecords";
 import { WizardCommunicationCenter } from "./components/WizardCommunicationCenter";
-import { Loader2 } from "lucide-react";
+import { Button } from "../components/ui/button";
+import { Loader2, Plus } from "lucide-react";
 import { MainContentTree } from "../editor/sidebar/MainContentTree";
 function TaskboardPreviewEditor({ itemDescriptor, }) {
     const slotContext = useEditorSlotContext({
@@ -55,7 +57,11 @@ function getInitialQueryValue(queryKey) {
 }
 function getInitialViewTabIndex() {
     const view = getInitialQueryValue(TASKBOARD_VIEW_QUERY_KEY)?.toLowerCase();
-    return view === "list" ? 1 : 0;
+    if (view === "list")
+        return 1;
+    if (view === "graph")
+        return 2;
+    return 0;
 }
 function getInitialWizardMode() {
     const value = getInitialQueryValue(TASKBOARD_WIZARD_QUERY_KEY)?.toLowerCase();
@@ -134,6 +140,7 @@ export function TaskBoardWorkspace() {
     const [tasks, setTasks] = useState([]);
     const [isTasksLoading, setIsTasksLoading] = useState(false);
     const [dependencies, setDependencies] = useState([]);
+    const [graphLayout, setGraphLayout] = useState(null);
     const [executionRecordsByTaskId, setExecutionRecordsByTaskId] = useState({});
     const [selectedTaskId, setSelectedTaskId] = useState(() => getInitialQueryValue(TASKBOARD_TASK_QUERY_KEY));
     const [selectedTaskSource, setSelectedTaskSource] = useState(() => getInitialQueryValue(TASKBOARD_TASK_QUERY_KEY) ? "system" : null);
@@ -159,7 +166,7 @@ export function TaskBoardWorkspace() {
     const [contextItemNamesByKey, setContextItemNamesByKey] = useState({});
     const [contextItemPathsByKey, setContextItemPathsByKey] = useState({});
     const [wizardPinnedTaskId, setWizardPinnedTaskId] = useState(null);
-    const [wizardPinnedTaskSource, setWizardPinnedTaskSource] = useState(null);
+    const [, setWizardPinnedTaskSource] = useState(null);
     const [wizardForceOverview, setWizardForceOverview] = useState(false);
     const setWizardPinnedTask = useCallback((taskId, source = null) => {
         setWizardPinnedTaskId(taskId);
@@ -180,11 +187,13 @@ export function TaskBoardWorkspace() {
     const tasksRequestCountRef = useRef(0);
     const latestTasksProjectIdRef = useRef(null);
     const latestDependenciesProjectIdRef = useRef(null);
+    const latestGraphLayoutProjectIdRef = useRef(null);
     const latestSubprojectCountsProjectIdRef = useRef(null);
     const refreshProjectsRef = useRef(null);
     const refreshTasksRef = useRef(null);
     const refreshExecutionStateRef = useRef(null);
     const refreshDependenciesRef = useRef(null);
+    const refreshGraphLayoutRef = useRef(null);
     const refreshSubprojectTaskCountsRef = useRef(null);
     const selectedProjectIdRef = useRef(null);
     const directSubprojectIdsRef = useRef(new Set());
@@ -345,8 +354,15 @@ export function TaskBoardWorkspace() {
     const canCreate = selectedProject?.permission === "Owner" ||
         selectedProject?.permission === "Editor";
     const canEditTasks = canCreate;
-    const viewTabIds = useMemo(() => ["kanban", "list"], []);
+    const viewTabs = useMemo(() => [
+        { id: "kanban", label: "Kanban", content: null },
+        { id: "list", label: "List", content: null },
+        { id: "graph", label: "Graph", content: null },
+    ], []);
+    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 handleSelectProject = useCallback((projectId) => {
         setSelectedProjectId((previousProjectId) => {
             if (previousProjectId !== projectId) {
@@ -359,6 +375,7 @@ export function TaskBoardWorkspace() {
     const clearSelectedProjectData = useCallback(() => {
         setTasks([]);
         setDependencies([]);
+        setGraphLayout(null);
         setExecutionRecordsByTaskId({});
         setSubprojectTaskCounts({});
         setSubprojectTasksByProjectId({});
@@ -374,9 +391,6 @@ export function TaskBoardWorkspace() {
             return selectedProject;
         return (projects.find((project) => project.project.projectId === selectedTask.projectId) ?? selectedProject);
     }, [projects, selectedProject, selectedTask]);
-    const planningTask = useMemo(() => tasksWithDisplayAssignees.find((t) => String(t.taskType ?? "").toLowerCase() === "plan") ??
-        tasksWithDisplayAssignees.find((t) => t.title === "Project Plan") ??
-        null, [tasksWithDisplayAssignees]);
     const selectedTaskIsPlan = useMemo(() => {
         const taskType = String(selectedTask?.taskType ?? "").toLowerCase();
         return taskType === "plan" || selectedTask?.title === "Project Plan";
@@ -673,7 +687,7 @@ export function TaskBoardWorkspace() {
         if (typeof window === "undefined")
             return;
         const current = new URLSearchParams(window.location.search);
-        const view = activeTab === 1 ? "list" : "kanban";
+        const view = viewTabIds[activeTab] ?? "kanban";
         if (selectedProjectId) {
             current.set(TASKBOARD_PROJECT_QUERY_KEY, selectedProjectId);
         }
@@ -702,7 +716,7 @@ export function TaskBoardWorkspace() {
         if (newUrl !== oldUrl) {
             window.history.replaceState(null, "", newUrl);
         }
-    }, [selectedProjectId, selectedTaskId, activeTab, isWizardMode]);
+    }, [selectedProjectId, selectedTaskId, activeTab, isWizardMode, viewTabIds]);
     useEffect(() => {
         const handlePopState = () => {
             syncTaskBoardStateFromUrl();
@@ -743,6 +757,19 @@ export function TaskBoardWorkspace() {
         const indexed = indexTaskExecutionRecords(records);
         setExecutionRecordsByTaskId(indexed);
     }, []);
+    const refreshGraphLayout = useCallback(async (projectId) => {
+        latestGraphLayoutProjectIdRef.current = projectId;
+        const requestProjectId = projectId;
+        const result = await getGraphLayout(projectId);
+        if (latestGraphLayoutProjectIdRef.current !== requestProjectId) {
+            return;
+        }
+        if (result.type !== "success") {
+            toast.error(result.summary || "Failed to load graph layout");
+            return;
+        }
+        setGraphLayout(result.data ?? null);
+    }, []);
     const refreshSubprojectTaskCounts = useCallback(async () => {
         const requestProjectId = selectedProjectId;
         latestSubprojectCountsProjectIdRef.current = requestProjectId;
@@ -978,6 +1005,7 @@ export function TaskBoardWorkspace() {
         refreshTasksRef.current = refreshTasks;
         refreshExecutionStateRef.current = refreshExecutionState;
         refreshDependenciesRef.current = refreshDependencies;
+        refreshGraphLayoutRef.current = refreshGraphLayout;
         refreshSubprojectTaskCountsRef.current = refreshSubprojectTaskCounts;
         selectedProjectIdRef.current = selectedProjectId;
         directSubprojectIdsRef.current = new Set(directSubprojects.map((subproject) => subproject.project.projectId));
@@ -987,6 +1015,7 @@ export function TaskBoardWorkspace() {
         refreshTasks,
         refreshExecutionState,
         refreshDependencies,
+        refreshGraphLayout,
         refreshSubprojectTaskCounts,
         selectedProjectId,
         directSubprojects,
@@ -1236,7 +1265,7 @@ export function TaskBoardWorkspace() {
                 if (editContext?.confirm) {
                     editContext.confirm({
                         header: "Delete project",
-                        message: `Are you sure you want to delete \"${title}\"?\n\nAny subprojects under this project will also be deleted. This action cannot be undone.`,
+                        message: `Are you sure you want to delete "${title}"?\n\nAny subprojects under this project will also be deleted. This action cannot be undone.`,
                         acceptLabel: "Delete",
                         showCancel: true,
                         accept: () => {
@@ -1275,6 +1304,7 @@ export function TaskBoardWorkspace() {
         handleSelectMyTask,
         handleSelectProject,
         handleRunOrchestrator,
+        selectedProject,
     ]);
     useEffect(() => {
         return () => {
@@ -1296,10 +1326,12 @@ export function TaskBoardWorkspace() {
         const refreshTasksFn = refreshTasksRef.current;
         const refreshExecutionStateFn = refreshExecutionStateRef.current;
         const refreshDependenciesFn = refreshDependenciesRef.current;
+        const refreshGraphLayoutFn = refreshGraphLayoutRef.current;
         void Promise.all([
             refreshTasksFn?.(selectedProjectId),
             refreshExecutionStateFn?.(selectedProjectId),
             refreshDependenciesFn?.(selectedProjectId),
+            refreshGraphLayoutFn?.(selectedProjectId),
         ]).finally(() => {
             if (cancelled)
                 return;
@@ -1369,6 +1401,19 @@ export function TaskBoardWorkspace() {
             return;
         const unsubscribe = addListener((message) => {
             const messageType = message?.type;
+            if (messageType === "project:properties:updated") {
+                const payload = message?.payload;
+                const projectId = payload?.projectId ?? payload?.ProjectId;
+                const currentProjectId = selectedProjectIdRef.current;
+                const refreshGraphLayoutFn = refreshGraphLayoutRef.current;
+                if (projectId &&
+                    currentProjectId &&
+                    projectId === currentProjectId &&
+                    refreshGraphLayoutFn) {
+                    void refreshGraphLayoutFn(projectId);
+                }
+                return;
+            }
             if (messageType === "task:state-changed") {
                 const payload = message?.payload;
                 const projectId = payload?.projectId ??
@@ -1578,21 +1623,20 @@ export function TaskBoardWorkspace() {
             clearWizardCloseTransitionTimeout();
             setWizardForceOverview(false);
             setTaskSelection(taskId, { source: "user", pinInWizard: true });
-        } })), [
-        wizardAttentionState,
+        }, onOpenAgentTab: isMobile ? () => setMobileActiveTab(2) : undefined })), [
         wizardDisplayedTask,
         wizardDisplayedAgentId,
         wizardDisplayedExecutionDisplay,
+        wizardAttentionState.summaryState,
+        wizardAttentionState.stats,
+        wizardTasksWithDisplayAssignees,
+        dependencies,
         canEditTasks,
-        selectedProjectId,
-        directSubprojects,
+        isMobile,
         refreshVisibleTaskData,
-        clearWizardCloseTransitionTimeout,
         handleCloseWizardTask,
-        selectedTaskId,
-        wizardPinnedTaskId,
-        selectedProject?.project.title,
-        selectedProject?.project.description,
+        clearWizardCloseTransitionTimeout,
+        setTaskSelection,
     ]);
     const isProjectViewLoading = !!selectedProjectId && projectViewLoadingId === selectedProjectId;
     const taskBoardContent = useMemo(() => {
@@ -1609,58 +1653,47 @@ 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" }), _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" }), sharedViewSwitcher, _jsx(ListView, { tasks: tasksWithDisplayAssignees, onSelectTask: (id) => setTaskSelection(id, { source: "user" }), selectedTaskId: selectedTaskId, onTasksChanged: () => {
                             void refreshVisibleTaskData();
-                        }, projectId: selectedProjectId, permission: selectedProject?.permission, activeTab: activeTab, onSetActiveTab: setActiveTab, canCreateTask: canEditTasks, onCreateTask: () => setCreateDialogOpen(true) })] }));
+                        }, 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" }), sharedViewSwitcher, _jsx("div", { className: "min-h-0 flex-1", children: _jsx(DependencyGraphView, { projectId: selectedProjectId, tasks: tasksWithDisplayAssignees, dependencies: dependencies, savedLayout: graphLayout, selectedTaskId: selectedTaskId, onSelectTask: (id) => setTaskSelection(id, { source: "user" }), permission: selectedProject?.permission, onLayoutSaved: setGraphLayout }) })] }));
         }
-        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" }), _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" }), sharedViewSwitcher, _jsx(KanbanView, { tasks: tasksWithDisplayAssignees, dependencies: dependencies, onSelectTask: (id) => setTaskSelection(id, { source: "user" }), selectedTaskId: selectedTaskId, onTasksChanged: () => {
                         void refreshVisibleTaskData();
-                    }, projectId: selectedProjectId, permission: selectedProject?.permission, activeTab: activeTab, onSetActiveTab: setActiveTab, canCreateTask: canEditTasks, onCreateTask: () => setCreateDialogOpen(true) })] }));
+                    }, projectId: selectedProjectId, permission: selectedProject?.permission })] }));
     }, [
         isProjectViewLoading,
         selectedProjectId,
         selectedProject,
-        nav,
+        isProjectsLoading,
         isWizardMode,
         isListView,
-        isTasksLoading,
-        isProjectsLoading,
-        tasksWithDisplayAssignees,
-        wizardSubprojectTaskLists,
-        selectedTaskId,
-        wizardDisplayedTask?.taskId,
-        refreshVisibleTaskData,
-        selectedProject?.permission,
-        selectedProject?.project.description,
-        selectedProject?.project.status,
-        selectedProject?.project.costLimit,
+        isGraphView,
         selectedProjectCumulativeCostUsed,
-        dependencies,
-        directSubprojects,
-        parentProject?.project.projectId,
-        parentProject?.project.title,
-        selectedProject?.project.title,
+        savingProjectStatus,
+        handleProjectStatusChange,
         selectedProjectTaskCounts,
+        directSubprojects,
         subprojectTaskCounts,
         subprojectCountsLoading,
-        wizardCommunicationPanel,
-        savingProjectStatus,
-        handleProjectStatusChange,
-        activeTab,
+        parentProject?.project.projectId,
+        parentProject?.project.title,
         handleSelectProject,
-        currentAgentId,
-        agentPanelMode,
-        selectedTaskIsPlan,
-        selectedTaskHasAssignedAgentProfile,
-        canRunAssignedAgent,
-        runAssignedAgentDisabledReason,
-        handleRunSelectedTaskAgent,
-        isPlanning,
-        handleStartPlanning,
-        selectedTaskIsBlocked,
+        sharedViewSwitcher,
+        tasksWithDisplayAssignees,
+        dependencies,
+        selectedTaskId,
+        activeTab,
         canEditTasks,
-        selectedTask?.assigneeDisplayName,
-        selectedTask?.assigneeId,
+        nav,
+        isTasksLoading,
+        wizardSubprojectTaskLists,
+        wizardDisplayedTask?.taskId,
+        wizardCommunicationPanel,
+        setTaskSelection,
+        refreshVisibleTaskData,
     ]);
     const taskDetailPanel = useMemo(() => (_jsx(TaskDetailPanel, { project: selectedTaskProject, task: selectedTask, allTasks: taskSelectionUniverse, dependencies: dependencies, onTaskChanged: () => {
             void refreshVisibleTaskData();
@@ -1670,6 +1703,7 @@ export function TaskBoardWorkspace() {
         taskSelectionUniverse,
         dependencies,
         refreshVisibleTaskData,
+        setTaskSelection,
     ]);
     const agentTerminalPanel = useMemo(() => (_jsx(TaskAgentPanel, { agentId: displayAgentId, mode: agentPanelMode, label: selectedTaskIsPlan ? "Planner" : "Task Agent", hasAssignedAgentProfile: !selectedTaskIsPlan && selectedTaskHasAssignedAgentProfile, assignedAgentProfileName: !selectedTaskIsPlan && selectedTaskHasAssignedAgentProfile
             ? selectedTask?.assigneeDisplayName ||
@@ -1872,20 +1906,21 @@ export function TaskBoardWorkspace() {
                     defaultSize: "auto",
                     content: (_jsx("div", { className: "h-full min-h-0 min-w-0 overflow-hidden bg-gray-50", children: editorContent })),
                 },
-            ], splitterClassName: "bg-gray-200 hover:bg-gray-300 w-[6px]", className: "h-full" }));
+            ], splitterClassName: "bg-gray-200 hover:bg-gray-300 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-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, { itemDescriptor: currentItemDescriptor })) })] }));
     }, [
         currentItemDescriptor,
-        contextItemOptions,
         hasMultipleContextItems,
-        handleSelectContextItem,
         selectedContextItemValue,
+        handleSelectContextItem,
+        contextItemOptions,
         previewItemName,
         previewItemPath,
         previewItemVersion,
+        isMobile,
     ]);
     useEffect(() => {
         if (!assignAgentDialogOpen)
@@ -1924,7 +1959,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 sm:p-4 sm:pt-3", children: taskBoardContent })),
+                    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 })),
                 },
                 {
                     name: "task-details",
@@ -1948,6 +1983,35 @@ export function TaskBoardWorkspace() {
             }
             return listPanels;
         }
+        if (isGraphView) {
+            const graphPanels = [
+                {
+                    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 })),
+                },
+                {
+                    name: "task-details",
+                    defaultSize: 420,
+                    content: taskDetailPanel,
+                    hidden: !selectedProjectId || !selectedTask,
+                },
+                {
+                    name: "agent-terminal",
+                    defaultSize: 560,
+                    content: agentTerminalPanel,
+                    hidden: !selectedProjectId || shouldHideAgentPanelForSelectedTask,
+                },
+            ];
+            if (showEditorPanel) {
+                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 })),
+                });
+            }
+            return graphPanels;
+        }
         const kanbanPanels = [
             {
                 name: "task-list",
@@ -1978,13 +2042,15 @@ export function TaskBoardWorkspace() {
     }, [
         isWizardMode,
         isListView,
+        isGraphView,
+        selectedProjectId,
         taskBoardContent,
         taskDetailPanel,
-        agentTerminalPanel,
         selectedTask,
+        agentTerminalPanel,
+        shouldHideAgentPanelForSelectedTask,
         showEditorPanel,
         itemPreviewPanel,
-        shouldHideAgentPanelForSelectedTask,
     ]);
     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: [
                                     { id: "project", label: "Project", content: null },
@@ -2003,7 +2069,9 @@ 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 && "p-2 pt-2 sm:p-4 sm: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
+                                ], 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 &&
+                                        !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
                         ? "task-board-wizard-splitter-v2"