cancelling actions works now

web/src/components/executions/ExecutionArtifactsPanel.tsx

@@ -337,11 +337,16 @@ function TextFileDetail({
 
 interface ProgressDetailProps {
   artifactId: number;
+  isRunning?: boolean;
   onClose: () => void;
 }
 
-function ProgressDetail({ artifactId, onClose }: ProgressDetailProps) {
-  const { data: artifactData, isLoading } = useArtifact(artifactId);
+function ProgressDetail({
+  artifactId,
+  isRunning = false,
+  onClose,
+}: ProgressDetailProps) {
+  const { data: artifactData, isLoading } = useArtifact(artifactId, isRunning);
   const artifact = artifactData?.data;
 
   const progressEntries = useMemo(() => {
@@ -707,6 +712,7 @@ export default function ExecutionArtifactsPanel({
                       <div className="px-3">
                         <ProgressDetail
                           artifactId={artifact.id}
+                          isRunning={isRunning}
                           onClose={() => setExpandedProgressId(null)}
                         />
                       </div>

web/src/components/executions/ExecutionPreviewPanel.tsx

@@ -69,9 +69,10 @@ const ExecutionPreviewPanel = memo(function ExecutionPreviewPanel({
     execution?.status === "running" ||
     execution?.status === "scheduling" ||
     execution?.status === "scheduled" ||
-    execution?.status === "requested";
+    execution?.status === "requested" ||
+    execution?.status === "canceling";
 
-  const isCancellable = isRunning || execution?.status === "canceling";
+  const isCancellable = isRunning;
 
   const startedAt = execution?.started_at
     ? new Date(execution.started_at)
@@ -241,13 +242,23 @@ const ExecutionPreviewPanel = memo(function ExecutionPreviewPanel({
               {execution.executor && (
                 <div>
                   <dt className="text-xs font-medium text-gray-500 uppercase tracking-wide">
-                    Executor
+                    Initiated By
                   </dt>
                   <dd className="mt-0.5 text-sm text-gray-900 font-mono">
                     #{execution.executor}
                   </dd>
                 </div>
               )}
+              {execution.worker && (
+                <div>
+                  <dt className="text-xs font-medium text-gray-500 uppercase tracking-wide">
+                    Worker
+                  </dt>
+                  <dd className="mt-0.5 text-sm text-gray-900 font-mono">
+                    #{execution.worker}
+                  </dd>
+                </div>
+              )}
               {execution.workflow_task && (
                 <div>
                   <dt className="text-xs font-medium text-gray-500 uppercase tracking-wide">