improvement: move Task Actions out of details tab

src/components/shared/Dialogs/ComponentDetailsDialog.tsx

@@ -24,6 +24,7 @@ import { PublishedComponentDetails } from "../ManageComponent/PublishedComponent
 import { useFlagValue } from "../Settings/useFlags";
 import { withSuspenseWrapper } from "../SuspenseWrapper";
 import { TaskDetails, TaskImplementation, TaskIO } from "../TaskDetails";
+import TaskActions from "../TaskDetails/Actions";
 import { DialogContext } from "./dialog.context";
 
 interface ComponentDetailsProps {
@@ -120,11 +121,12 @@ const ComponentDetailsDialogContent = withSuspenseWrapper(
 
             <div className="overflow-auto h-[40vh]">
               <TabsContent value="details" className="h-full">
-                {remoteComponentLibrarySearchEnabled ? (
+                {remoteComponentLibrarySearchEnabled && (
                   <PublishedComponentDetails component={componentRef} />
-                ) : null}
+                )}
 
                 <TaskDetails componentRef={componentRef} />
+                <TaskActions componentRef={componentRef} className="mt-2" />
               </TabsContent>
 
               <TabsContent value="io" className="h-full">

src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskOverview/TaskOverview.tsx

@@ -10,6 +10,7 @@ import { ComponentDetailsDialog } from "@/components/shared/Dialogs";
 import { ComponentFavoriteToggle } from "@/components/shared/FavoriteComponentToggle";
 import { StatusIcon } from "@/components/shared/Status";
 import { TaskDetails } from "@/components/shared/TaskDetails";
+import TaskActions from "@/components/shared/TaskDetails/Actions";
 import { Icon } from "@/components/ui/icon";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
 import { Separator } from "@/components/ui/separator";
@@ -31,7 +32,8 @@ interface TaskOverviewProps {
 }
 
 const TaskOverview = ({ taskNode }: TaskOverviewProps) => {
-  const { displayName, taskSpec, taskId, state, callbacks } = taskNode;
+  const { componentRef, displayName, taskSpec, taskId, state, callbacks } =
+    taskNode;
 
   const executionData = useExecutionDataOptional();
   const details = executionData?.details;
@@ -57,8 +59,12 @@ const TaskOverview = ({ taskNode }: TaskOverviewProps) => {
   const canRename = !readOnly && isSubgraph;
 
   return (
-    <BlockStack className="h-full" data-context-panel="task-overview">
-      <InlineStack gap="2" className="px-2 pb-2">
+    <BlockStack
+      gap="4"
+      className="h-full px-2"
+      data-context-panel="task-overview"
+    >
+      <InlineStack gap="2">
         {isSubgraph && <Icon name="Workflow" />}
         <Text size="lg" weight="semibold" className="wrap-anywhere">
           {displayName}
@@ -72,7 +78,15 @@ const TaskOverview = ({ taskNode }: TaskOverviewProps) => {
         {readOnly && <StatusIcon status={status} tooltip label="task" />}
       </InlineStack>
 
-      <div className="px-4 overflow-y-auto pb-4 h-full w-full">
+      {!!componentRef && (
+        <TaskActions
+          componentRef={componentRef}
+          taskNode={taskNode}
+          readOnly={readOnly}
+        />
+      )}
+
+      <div className="overflow-y-auto pb-4 h-full w-full">
         <Tabs defaultValue="io" className="h-full">
           <TabsList className="mb-2">
             <TabsTrigger value="io" className="flex-1">

src/components/shared/TaskDetails/Actions.tsx

@@ -80,7 +80,13 @@ const TaskActions = ({
     deleteComponent,
   ].filter(Boolean);
 
-  return <ActionBlock actions={actions} className={className} />;
+  return (
+    <ActionBlock
+      actions={actions}
+      className={className}
+      data-testid="task-actions"
+    />
+  );
 };
 
 export default TaskActions;

src/components/shared/TaskDetails/Details.tsx

@@ -11,7 +11,6 @@ import { KeyValueList } from "../ContextPanel/Blocks/KeyValueList";
 import { TextBlock } from "../ContextPanel/Blocks/TextBlock";
 import { InlineEditor } from "../InlineEditor/InlineEditor";
 import { withSuspenseWrapper } from "../SuspenseWrapper";
-import TaskActions from "./Actions";
 import { DisplayNameEditor } from "./DisplayNameEditor";
 import { ExecutionDetails } from "./ExecutionDetails";
 import { GithubDetails } from "./GithubDetails";
@@ -180,13 +179,6 @@ const TaskDetailsInternal = ({
           />
         </ContentBlock>
       )}
-
-      <TaskActions
-        componentRef={hydratedComponentRef}
-        taskNode={taskNode}
-        readOnly={readOnly}
-        className={BASE_BLOCK_CLASS}
-      />
     </BlockStack>
   );
 };

src/providers/TaskNodeProvider.tsx

@@ -2,6 +2,7 @@ import { useReactFlow } from "@xyflow/react";
 import { type ReactNode, useCallback, useMemo } from "react";
 
 import useComponentFromUrl from "@/hooks/useComponentFromUrl";
+import { useHydrateComponentReference } from "@/hooks/useHydrateComponentReference";
 import { useTaskNodeDimensions } from "@/hooks/useTaskNodeDimensions";
 import useToastNotification from "@/hooks/useToastNotification";
 import type { Annotations } from "@/types/annotations";
@@ -13,6 +14,7 @@ import {
 import type {
   ArgumentType,
   ComponentReference,
+  HydratedComponentReference,
   InputSpec,
   OutputSpec,
   TaskSpec,
@@ -57,6 +59,7 @@ type TaskNodeProviderProps = {
 };
 
 export type TaskNodeContextType = {
+  componentRef?: HydratedComponentReference;
   taskSpec?: TaskSpec;
   taskId?: string;
   nodeId: string;
@@ -94,20 +97,24 @@ export const TaskNodeProvider = ({
     setCacheStaleness,
   } = data.callbacks ?? DEFAULT_TASK_NODE_CALLBACKS;
 
-  const componentRef = taskSpec?.componentRef ?? EMPTY_COMPONENT_REF;
-  const inputs = componentRef.spec?.inputs ?? EMPTY_INPUTS;
-  const outputs = componentRef.spec?.outputs ?? EMPTY_OUTPUTS;
+  const componentRef =
+    useHydrateComponentReference(
+      taskSpec?.componentRef ?? EMPTY_COMPONENT_REF,
+    ) || undefined;
 
-  const name = getComponentName(componentRef);
+  const inputs = componentRef?.spec?.inputs ?? EMPTY_INPUTS;
+  const outputs = componentRef?.spec?.outputs ?? EMPTY_OUTPUTS;
+
+  const name = getComponentName(componentRef ?? EMPTY_COMPONENT_REF);
   const displayName = getTaskDisplayName(taskId ?? "Task", taskSpec);
 
-  const isCustomComponent = !componentRef.url; // Custom components don't have a source url
+  const isCustomComponent = !componentRef?.url; // Custom components don't have a source url
 
   const { componentRef: mostRecentComponentRef } = useComponentFromUrl(
-    componentRef.url,
+    componentRef?.url,
   );
 
-  const isOutdated = componentRef.digest !== mostRecentComponentRef.digest;
+  const isOutdated = componentRef?.digest !== mostRecentComponentRef.digest;
 
   const dimensions = useTaskNodeDimensions(taskSpec);
 
@@ -199,6 +206,7 @@ export const TaskNodeProvider = ({
 
   const value = useMemo(
     () => ({
+      componentRef,
       taskSpec,
       taskId,
       nodeId,
@@ -211,6 +219,7 @@ export const TaskNodeProvider = ({
       select,
     }),
     [
+      componentRef,
       taskSpec,
       taskId,
       nodeId,