timed out indicator

apps/hub/src/app/ai/WorkflowSummaryList/WorkflowStatusIcon.tsx

@@ -3,14 +3,18 @@ import { FC } from "react";
 import { ClientWorkflow } from "@quri/squiggle-ai";
 import { CheckCircleIcon, ErrorIcon, RefreshIcon } from "@quri/ui";
 
+export const maxWorkflowLoadingAge = 300; // 5 minutes
+
+export function isWorkflowOutdated(workflow: ClientWorkflow): boolean {
+  const ageInSeconds = (new Date().getTime() - workflow.timestamp) / 1000;
+  return ageInSeconds > maxWorkflowLoadingAge;
+}
+
 function getWorkflowStatusForIcon(
   workflow: ClientWorkflow
 ): ClientWorkflow["status"] {
-  const ageInSeconds = (new Date().getTime() - workflow.timestamp) / 1000;
-  const maxLoadingAge = 300;
-
   if (workflow.status === "loading") {
-    return ageInSeconds < maxLoadingAge ? "loading" : "error";
+    return isWorkflowOutdated(workflow) ? "error" : "loading";
   }
 
   if (workflow.status === "finished" && !workflow.result.isValid) {

apps/hub/src/app/ai/WorkflowViewer/index.tsx

@@ -3,13 +3,14 @@ import { format } from "date-fns";
 import { Children, FC } from "react";
 
 import { ClientWorkflow } from "@quri/squiggle-ai";
-import { StyledTab } from "@quri/ui";
+import { ErrorIcon, StyledTab } from "@quri/ui";
 
 import { commonDateFormat } from "@/lib/constants";
 import { useAvailableHeight } from "@/lib/hooks/useAvailableHeight";
 
 import { LogsView } from "../LogsView";
 import { SquigglePlaygroundForWorkflow } from "../SquigglePlaygroundForWorkflow";
+import { isWorkflowOutdated } from "../WorkflowSummaryList/WorkflowStatusIcon";
 import { Header } from "./Header";
 import { PublishWorkflowButton } from "./PublishWorkflowButton";
 import { WorkflowSteps } from "./WorkflowSteps";
@@ -106,7 +107,19 @@ const LoadingWorkflowViewer: FC<WorkflowViewerProps<"loading">> = ({
             <WorkflowDate workflow={workflow} />
           </LineSeparatedList>
         )}
-        renderRight={() => null}
+        renderRight={() => {
+          if (isWorkflowOutdated(workflow)) {
+            return (
+              <div className="flex items-center gap-1">
+                <ErrorIcon className="text-red-400" size={16} />
+                <span className="text-sm font-medium text-red-400">
+                  Timed Out
+                </span>
+              </div>
+            );
+          }
+          return null;
+        }}
       />
       <div ref={ref}>
         <WorkflowSteps workflow={workflow} height={usedHeight} />