diff --git a/apps/ui/package.json b/apps/ui/package.json
index 116bb6ad..9c3522c6 100644
--- a/apps/ui/package.json
+++ b/apps/ui/package.json
@@ -67,7 +67,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "apps/ui/src/components/views/graph-view/hooks/use-graph-filter.ts": "^0.8.5",
+    "dagre": "^0.8.5",
     "dotenv": "^17.2.3",
     "geist": "^1.5.1",
     "lucide-react": "^0.562.0",
diff --git a/apps/ui/src/components/views/graph-view/components/task-node.tsx b/apps/ui/src/components/views/graph-view/components/task-node.tsx
index 44118662..06beb251 100644
--- a/apps/ui/src/components/views/graph-view/components/task-node.tsx
+++ b/apps/ui/src/components/views/graph-view/components/task-node.tsx
@@ -21,7 +21,6 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
@@ -225,7 +224,7 @@ export const TaskNode = memo(function TaskNode({ data, selected }: TaskNodeProps
                   className="text-xs cursor-pointer"
                   onClick={(e) => {
                     e.stopPropagation();
-                    data.onViewLogs?.();
+                    data.onViewDetails?.();
                   }}
                 >
                   <Eye className="w-3 h-3 mr-2" />
@@ -267,19 +266,6 @@ export const TaskNode = memo(function TaskNode({ data, selected }: TaskNodeProps
                     Resume Task
                   </DropdownMenuItem>
                 )}
-                {Boolean(data.branchName) && <DropdownMenuSeparator />}
-                {Boolean(data.branchName) && (
-                  <DropdownMenuItem
-                    className="text-xs cursor-pointer"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      data.onViewBranch?.();
-                    }}
-                  >
-                    <GitBranch className="w-3 h-3 mr-2" />
-                    View Branch
-                  </DropdownMenuItem>
-                )}
               </DropdownMenuContent>
             </DropdownMenu>
           </div>
diff --git a/apps/ui/src/components/views/graph-view/graph-view.tsx b/apps/ui/src/components/views/graph-view/graph-view.tsx
index 1f054c3a..f5ea8edc 100644
--- a/apps/ui/src/components/views/graph-view/graph-view.tsx
+++ b/apps/ui/src/components/views/graph-view/graph-view.tsx
@@ -83,6 +83,12 @@ export function GraphView({
           onViewOutput(feature);
         }
       },
+      onViewDetails: (featureId: string) => {
+        const feature = features.find((f) => f.id === featureId);
+        if (feature) {
+          onEditFeature(feature);
+        }
+      },
       onStartTask: (featureId: string) => {
         const feature = features.find((f) => f.id === featureId);
         if (feature) {
@@ -101,15 +107,8 @@ export function GraphView({
           onResumeTask?.(feature);
         }
       },
-      onViewBranch: (featureId: string) => {
-        const feature = features.find((f) => f.id === featureId);
-        if (feature?.branchName) {
-          // TODO: Implement view branch action
-          console.log('View branch:', feature.branchName);
-        }
-      },
     }),
-    [features, onViewOutput, onStartTask, onStopTask, onResumeTask]
+    [features, onViewOutput, onEditFeature, onStartTask, onStopTask, onResumeTask]
   );
 
   return (
diff --git a/apps/ui/src/components/views/graph-view/hooks/use-graph-nodes.ts b/apps/ui/src/components/views/graph-view/hooks/use-graph-nodes.ts
index 5dc38b83..66265477 100644
--- a/apps/ui/src/components/views/graph-view/hooks/use-graph-nodes.ts
+++ b/apps/ui/src/components/views/graph-view/hooks/use-graph-nodes.ts
@@ -14,10 +14,10 @@ export interface TaskNodeData extends Feature {
   isDimmed?: boolean;
   // Action callbacks
   onViewLogs?: () => void;
+  onViewDetails?: () => void;
   onStartTask?: () => void;
   onStopTask?: () => void;
   onResumeTask?: () => void;
-  onViewBranch?: () => void;
 }
 
 export type TaskNode = Node<TaskNodeData, 'task'>;
@@ -30,10 +30,10 @@ export type DependencyEdge = Edge<{
 
 export interface NodeActionCallbacks {
   onViewLogs?: (featureId: string) => void;
+  onViewDetails?: (featureId: string) => void;
   onStartTask?: (featureId: string) => void;
   onStopTask?: (featureId: string) => void;
   onResumeTask?: (featureId: string) => void;
-  onViewBranch?: (featureId: string) => void;
 }
 
 interface UseGraphNodesProps {
@@ -94,6 +94,9 @@ export function useGraphNodes({
           onViewLogs: actionCallbacks?.onViewLogs
             ? () => actionCallbacks.onViewLogs!(feature.id)
             : undefined,
+          onViewDetails: actionCallbacks?.onViewDetails
+            ? () => actionCallbacks.onViewDetails!(feature.id)
+            : undefined,
           onStartTask: actionCallbacks?.onStartTask
             ? () => actionCallbacks.onStartTask!(feature.id)
             : undefined,
@@ -103,9 +106,6 @@ export function useGraphNodes({
           onResumeTask: actionCallbacks?.onResumeTask
             ? () => actionCallbacks.onResumeTask!(feature.id)
             : undefined,
-          onViewBranch: actionCallbacks?.onViewBranch
-            ? () => actionCallbacks.onViewBranch!(feature.id)
-            : undefined,
         },
       };