bosun 0.41.2 → 0.41.4

package/ui/tabs/workflows.js

@@ -19,11 +19,13 @@ import { formatDate, formatDuration, formatRelative } from "../modules/utils.js"
 import {
   HISTORY_LIMIT,
   HISTORY_COMMIT_DEBOUNCE_MS,
+  buildNodeStatusesFromRunDetail,
   createHistoryState,
   getNodeSearchMetadata,
   parseGraphSnapshot,
   pushHistorySnapshot,
   redoHistory,
+  resolveNodeOutputPreview,
   searchNodeTypes,
   serializeGraphSnapshot,
   undoHistory,
@@ -67,6 +69,9 @@ const WORKFLOW_LIVE_WS_BATCH_MS = 90;
 const NODE_COMPLETION_FLASH_MS = 1400;
 const NODE_RUNNING_HINT_MS = 500;
 const EDGE_FLOW_ANIMATION_MS = 1200;
+const WORKFLOW_NODE_HEADER_HEIGHT = 44;
+const NODE_HEADER = WORKFLOW_NODE_HEADER_HEIGHT;
+const NODE_HEADER_H = WORKFLOW_NODE_HEADER_HEIGHT;
 const workflowRunsLimit = signal(WORKFLOW_RUN_PAGE_SIZE);
 
 // ── Execute Dialog state ──────────────────────────────────────────────────
@@ -85,6 +90,15 @@ const installDialogVars = signal({});
 const installDialogMode = signal("quick");
 const installDialogInstalling = signal(false);
 const installDialogResult = signal(null);
+const workflowsLoading = signal(false);
+const templatesLoading = signal(false);
+const nodeTypesLoading = signal(false);
+
+function getWorkflowNameById(workflowId) {
+  const id = String(workflowId || "").trim();
+  if (!id) return "";
+  return (workflows.value || []).find((workflow) => workflow?.id === id)?.name || id;
+}
 
 function resetWorkflowRunsState(scopeWorkflowId = null) {
   workflowRuns.value = [];
@@ -127,34 +141,78 @@ function returnToWorkflowList() {
   setRouteParams({}, { replace: true, skipGuard: true });
 }
 
+function openWorkflowCanvas(workflowId) {
+  const id = String(workflowId || "").trim();
+  if (!id) return;
+  apiFetch(`/api/workflows/${encodeURIComponent(id)}`)
+    .then((data) => {
+      activeWorkflow.value = data?.workflow || (workflows.value || []).find((workflow) => workflow.id === id) || null;
+      if (activeWorkflow.value) {
+        viewMode.value = "canvas";
+      }
+    })
+    .catch(() => {
+      const existing = (workflows.value || []).find((workflow) => workflow.id === id) || null;
+      if (existing) {
+        activeWorkflow.value = existing;
+        viewMode.value = "canvas";
+      }
+    });
+}
+
+export function openWorkflowRunsView(workflowId, runId = null) {
+  const scopedWorkflowId = String(workflowId || "").trim() || null;
+  resetWorkflowRunsState(scopedWorkflowId);
+  selectedRunId.value = null;
+  selectedRunDetail.value = null;
+  viewMode.value = "runs";
+  const route = { runsView: true };
+  if (scopedWorkflowId) route.runsWorkflowId = scopedWorkflowId;
+  if (runId) route.runId = runId;
+  setRouteParams(route, { replace: false, skipGuard: true });
+  loadRuns(scopedWorkflowId, { reset: true }).catch(() => {});
+  if (runId) {
+    loadRunDetail(runId, { workflowId: scopedWorkflowId }).catch(() => {});
+  }
+}
+
 /* ═══════════════════════════════════════════════════════════════
  *  API Helpers
  * ═══════════════════════════════════════════════════════════════ */
 
 async function loadWorkflows() {
+  workflowsLoading.value = true;
   try {
     const data = await apiFetch("/api/workflows");
     if (data?.workflows) workflows.value = data.workflows;
   } catch (err) {
     console.error("[workflows] Failed to load:", err);
+  } finally {
+    workflowsLoading.value = false;
   }
 }
 
 async function loadTemplates() {
+  templatesLoading.value = true;
   try {
     const data = await apiFetch("/api/workflows/templates");
     if (data?.templates) templates.value = data.templates;
   } catch (err) {
     console.error("[workflows] Failed to load templates:", err);
+  } finally {
+    templatesLoading.value = false;
   }
 }
 
 async function loadNodeTypes() {
+  nodeTypesLoading.value = true;
   try {
     const data = await apiFetch("/api/workflows/node-types");
     if (data?.nodeTypes) nodeTypes.value = data.nodeTypes;
   } catch (err) {
     console.error("[workflows] Failed to load node types:", err);
+  } finally {
+    nodeTypesLoading.value = false;
   }
 }
 
@@ -602,7 +660,7 @@ function ExecuteWorkflowDialog() {
       PaperProps=${{ sx: { bgcolor: 'var(--color-bg-secondary, #1a1f2e)', color: 'var(--color-text, #e8eaf0)', borderRadius: '12px' } }}
     >
       <${DialogTitle} sx=${{ display: 'flex', alignItems: 'center', gap: 1 }}>
-        <span style="font-size: 20px">${resolveIcon("play")}</span>
+        <span class="icon-inline">${resolveIcon("play")}</span>
         <span>Execute: ${wf.name}</span>
       <//>
 
@@ -962,7 +1020,7 @@ function InstallTemplateDialog() {
       PaperProps=${{ sx: { bgcolor: 'var(--color-bg-secondary, #1a1f2e)', color: 'var(--color-text, #e8eaf0)', borderRadius: '12px' } }}
     >
       <${DialogTitle} sx=${{ display: 'flex', alignItems: 'center', gap: 1 }}>
-        <span style="font-size: 20px">${resolveIcon("download")}</span>
+        <span class="icon-inline">${resolveIcon("download")}</span>
         <span>Install: ${template.name}</span>
       <//>
 
@@ -1141,6 +1199,55 @@ async function applyTemplateUpdate(workflowId, mode = "replace", force = false)
   return null;
 }
 
+async function relayoutTemplateWorkflow(workflowId) {
+  try {
+    const data = await apiFetch(`/api/workflows/${encodeURIComponent(workflowId)}/reflow-layout`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ workflowId }),
+    });
+    if (data?.workflow) {
+      const refreshed = data.workflow;
+      workflows.value = (workflows.value || []).map((workflow) => (
+        workflow.id === refreshed.id ? refreshed : workflow
+      ));
+      if (activeWorkflow.value?.id === refreshed.id) {
+        activeWorkflow.value = refreshed;
+      }
+      showToast("Workflow layout refreshed", "success");
+      return refreshed;
+    }
+  } catch (err) {
+    showToast(`Failed to refresh workflow layout: ${err.message}`, "error");
+  }
+  return null;
+}
+
+async function relayoutInstalledTemplateWorkflows() {
+  try {
+    const data = await apiFetch("/api/workflows/reflow-template-layouts", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({}),
+    });
+    const result = data?.result || {};
+    const updated = Number(result.updated || 0);
+    await loadWorkflows();
+    if (activeWorkflow.value?.id) {
+      const updatedActive = (workflows.value || []).find((workflow) => workflow.id === activeWorkflow.value.id);
+      if (updatedActive) activeWorkflow.value = updatedActive;
+    }
+    showToast(
+      updated > 0 ? `Refreshed layout for ${updated} template workflow${updated === 1 ? "" : "s"}` : "No template workflows needed relayout",
+      "success",
+    );
+    return result;
+  } catch (err) {
+    showToast(`Failed to refresh template layouts: ${err.message}`, "error");
+  }
+  return null;
+}
+
 async function loadRuns(workflowId, opts = {}) {
   const append = opts.append === true;
   const hasScopedWorkflowId = workflowId !== undefined;
@@ -1194,15 +1301,21 @@ async function loadRuns(workflowId, opts = {}) {
   }
 }
 
-async function loadRunDetail(runId) {
+async function loadRunDetail(runId, opts = {}) {
   if (!runId) return;
   try {
     const data = await apiFetch(`/api/workflows/runs/${encodeURIComponent(runId)}`);
     if (data?.run) {
+      const scopedWorkflowId = String(opts?.workflowId || workflowRunsScopeId.value || data.run.workflowId || "").trim() || null;
+      if (scopedWorkflowId) {
+        workflowRunsScopeId.value = scopedWorkflowId;
+      }
       selectedRunId.value = runId;
       selectedRunDetail.value = data.run;
       viewMode.value = "runs";
-      setRouteParams({ runsView: true, runId }, { replace: false, skipGuard: true });
+      const route = { runsView: true, runId };
+      if (scopedWorkflowId) route.runsWorkflowId = scopedWorkflowId;
+      setRouteParams(route, { replace: false, skipGuard: true });
     }
   } catch (err) {
     showToast("Failed to load run details", "error");
@@ -1402,6 +1515,10 @@ function WorkflowCanvas({ workflow, onSave, nodeTypes: availableNodeTypes = [] }
   const [marquee, setMarquee] = useState(null);
   const [liveHighlightEnabled, setLiveHighlightEnabled] = useState(true);
   const [liveRun, setLiveRun] = useState(null);
+  const [recentRuns, setRecentRuns] = useState([]);
+  const [recentRunsTotal, setRecentRunsTotal] = useState(0);
+  const [recentRunsLoading, setRecentRunsLoading] = useState(false);
+  const [runsPanelOpen, setRunsPanelOpen] = useState(true);
   const [liveNodeStatuses, setLiveNodeStatuses] = useState({});
   const [liveNodeOutputPreviews, setLiveNodeOutputPreviews] = useState({});
   const [liveNodeFlashStates, setLiveNodeFlashStates] = useState({});
@@ -1419,6 +1536,14 @@ function WorkflowCanvas({ workflow, onSave, nodeTypes: availableNodeTypes = [] }
   const selectedNodeIdsRef = useRef(selectedNodeIds);
   const liveEventQueueRef = useRef([]);
   const liveEventFlushTimerRef = useRef(null);
+  // Derived live status helpers
+  const hasLiveStatuses = Object.keys(liveNodeStatuses).length > 0;
+  const liveActiveNodes = Object.values(liveNodeStatuses).filter(
+    (s) => s === "running" || s === "active" || s === "in_progress",
+  ).length;
+  const liveRunDuration = liveRun?.status === "running" && liveRun?.startedAt
+    ? Math.max(0, liveNowTick - Number(liveRun.startedAt))
+    : Number(liveRun?.duration) || 0;
   const workflowSnapshotKey = useMemo(
     () => serializeGraphSnapshot(workflow?.nodes || [], workflow?.edges || []),
     [workflow?.nodes, workflow?.edges],
@@ -1466,8 +1591,11 @@ function WorkflowCanvas({ workflow, onSave, nodeTypes: availableNodeTypes = [] }
   }, [workflow?.id, workflowSnapshotKey, normalizeNodesForCanvas]);
 
   useEffect(() => {
-    if (!liveHighlightEnabled || !workflow?.id) {
+    if (!workflow?.id) {
       setLiveRun(null);
+      setRecentRuns([]);
+      setRecentRunsTotal(0);
+      setRecentRunsLoading(false);
       setLiveNodeStatuses({});
       setLiveNodeOutputPreviews({});
       setLiveNodeFlashStates({});
@@ -1479,9 +1607,13 @@ function WorkflowCanvas({ workflow, onSave, nodeTypes: availableNodeTypes = [] }
 
     const pollLiveRun = async () => {
       try {
-        const data = await apiFetch(`/api/workflows/runs?workflowId=${encodeURIComponent(workflow.id)}&limit=10`);
+        setRecentRunsLoading(true);
+        const data = await apiFetch(`/api/workflows/${encodeURIComponent(workflow.id)}/runs?limit=12`);
         if (cancelled) return;
         const runs = Array.isArray(data?.runs) ? data.runs : [];
+        const total = Number(data?.pagination?.total);
+        setRecentRuns(runs);
+        setRecentRunsTotal(Number.isFinite(total) ? total : runs.length);
         const running = runs.find((run) => run?.status === "running");
         const targetRun = running || runs[0] || null;
         if (!targetRun?.runId) {
@@ -1493,6 +1625,15 @@ function WorkflowCanvas({ workflow, onSave, nodeTypes: availableNodeTypes = [] }
           setLiveEdgeActivity({});
           return;
         }
+        if (!liveHighlightEnabled) {
+          setLiveRun(targetRun);
+          setLiveNodeStatuses({});
+          setLiveNodeRunningHints({});
+          setLiveNodeOutputPreviews({});
+          setLiveNodeFlashStates({});
+          setLiveEdgeActivity({});
+          return;
+        }
         if (targetRun.status !== "running") {
           setLiveRun(targetRun);
           setLiveNodeStatuses({});
@@ -1533,6 +1674,8 @@ function WorkflowCanvas({ workflow, onSave, nodeTypes: availableNodeTypes = [] }
         });
       } catch {
         if (cancelled) return;
+      } finally {
+        if (!cancelled) setRecentRunsLoading(false);
       }
     };
 
@@ -2514,6 +2657,22 @@ function WorkflowCanvas({ workflow, onSave, nodeTypes: availableNodeTypes = [] }
           <span class="btn-icon">${resolveIcon("play")}</span>
           Run
         <//>
+        <${Button}
+          variant="outlined"
+          size="small"
+          onClick=${() => openWorkflowRunsView(workflow?.id)}
+        >
+          <span class="btn-icon">${resolveIcon("chart")}</span>
+          Runs
+        <//>
+        ${workflow?.metadata?.installedFrom && html`<${Button}
+          variant="outlined"
+          size="small"
+          onClick=${() => relayoutTemplateWorkflow(workflow.id)}
+        >
+          <span class="btn-icon">${resolveIcon("refresh")}</span>
+          Re-layout
+        <//>`}
         ${workflow?.core !== true && html`<${Button}
           variant="outlined"
           size="small"
@@ -2555,7 +2714,7 @@ function WorkflowCanvas({ workflow, onSave, nodeTypes: availableNodeTypes = [] }
           </span>
         `}
         ${liveHighlightEnabled && hasLiveStatuses && html`
-          <span class="wf-badge" style="font-size: 11px; background: #3b82f630; color: #60a5fa;">
+          <span class="wf-badge" style="font-size: 11px; background: var(--accent-soft, rgba(59,130,246,0.18)); color: var(--accent, #60a5fa);">
             ${liveActiveNodes} active node${liveActiveNodes === 1 ? "" : "s"}
           </span>
         `}
@@ -2564,6 +2723,54 @@ function WorkflowCanvas({ workflow, onSave, nodeTypes: availableNodeTypes = [] }
         <${Button} variant="text" size="small" onClick=${returnToWorkflowList}>← Back to Workflows<//>
       </div>
 
+      <div style="position: absolute; top: 64px; right: 12px; z-index: 18; width: min(340px, calc(100vw - 24px)); pointer-events: none;">
+        <div style="pointer-events: auto; background: var(--bg-card, #2b2a27); border: 1px solid var(--color-border, #2a3040); border-radius: 12px; backdrop-filter: blur(8px); box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,0.28)); overflow: hidden; color: var(--color-text, #e8eaf0);">
+          <div style="display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom: 1px solid var(--color-border, #2a3040);">
+            <span class="icon-inline">${resolveIcon("chart")}</span>
+            <div style="font-size: 12px; font-weight: 700; letter-spacing: 0.02em; flex:1;">Workflow Runs</div>
+            <span class="wf-badge" style="font-size: 10px; background: var(--bg-secondary, #1f2937); color: var(--text-secondary, #cbd5e1);">${recentRunsTotal || recentRuns.length} total</span>
+            ${recentRuns.some((run) => run?.status === "running") && html`<span class="wf-badge" style="font-size: 10px; background: var(--accent-soft, rgba(59,130,246,0.18)); color: var(--accent, #60a5fa);">active</span>`}
+            <${Button} variant="text" size="small" onClick=${() => setRunsPanelOpen((open) => !open)}>${runsPanelOpen ? "Hide" : "Show"}<//>
+          </div>
+          ${runsPanelOpen && html`
+            <div style="padding: 10px 10px 12px; display:flex; flex-direction:column; gap:8px;">
+              <div style="display:flex; gap:8px; flex-wrap:wrap;">
+                <${Button} variant="outlined" size="small" onClick=${() => openWorkflowRunsView(workflow?.id)}>View all runs<//>
+                ${liveRun?.runId && html`<${Button} variant="text" size="small" onClick=${() => openWorkflowRunsView(workflow?.id, liveRun.runId)}>Open current run<//>`}
+              </div>
+              ${recentRunsLoading && recentRuns.length === 0 && html`<div style="font-size: 12px; color: var(--color-text-secondary, #8b95a5);">Loading recent runs…</div>`}
+              ${!recentRunsLoading && recentRuns.length === 0 && html`<div style="font-size: 12px; color: var(--color-text-secondary, #8b95a5);">No runs recorded for this workflow yet.</div>`}
+              ${recentRuns.map((run) => {
+                const styles = getRunStatusBadgeStyles(run?.status);
+                const lastActivityAt = getRunActivityAt(run);
+                return html`
+                  <button
+                    key=${run.runId}
+                    type="button"
+                    onClick=${() => openWorkflowRunsView(workflow?.id, run.runId)}
+                    style="text-align:left; width:100%; border:1px solid ${run?.status === 'running' ? 'var(--accent, #60a5fa)' : 'var(--color-border, #2a3040)'}; border-radius:10px; background:var(--bg-secondary, #111827); color:inherit; padding:10px; display:flex; gap:10px; cursor:pointer; box-shadow: var(--shadow-sm, none);"
+                  >
+                    <div style="flex:1; min-width:0;">
+                      <div style="display:flex; align-items:center; gap:8px; margin-bottom:4px;">
+                        <span class="wf-badge" style="background:${styles.bg}; color:${styles.color}; font-size:10px;">${run?.status || 'unknown'}</span>
+                        <span style="font-size:11px; color: var(--color-text-secondary, #94a3b8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${String(run?.runId || '').slice(0, 12) || 'run'}</span>
+                      </div>
+                      <div style="font-size:12px; font-weight:600; color:var(--color-text, #e5e7eb); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${formatRelative(run?.startedAt)}</div>
+                      <div style="font-size:11px; color: var(--color-text-secondary, #8b95a5); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
+                        ${formatDuration(run?.status === 'running' && run?.startedAt ? Math.max(0, liveNowTick - Number(run.startedAt)) : Number(run?.duration) || 0)}
+                        ${lastActivityAt ? ` · active ${formatRelative(lastActivityAt)}` : ''}
+                        ${run?.errorCount ? ` · ${run.errorCount} error${run.errorCount === 1 ? '' : 's'}` : ''}
+                      </div>
+                    </div>
+                    <div style="display:flex; align-items:center; color:var(--color-text-secondary, #94a3b8);">${resolveIcon('arrow-right') || '→'}</div>
+                  </button>
+                `;
+              })}
+            </div>
+          `}
+        </div>
+      </div>
+
       <${NodePalette}
         open=${showNodePalette}
         nodeTypes=${availableNodeTypes}
@@ -2624,6 +2831,8 @@ function WorkflowCanvas({ workflow, onSave, nodeTypes: availableNodeTypes = [] }
             const isSelected = selectedEdgeId.value === edge.id;
             const hasCondition = !!edge.condition;
             const edgeColor = sourcePort?.color || (hasCondition ? "#f59e0b" : "#6b7280");
+            const edgePath = curvePath(from.x, from.y, to.x, to.y);
+            const isActiveFlow = liveHighlightEnabled && liveEdgeActivity[edge.id];
             return html`
               <g key=${edge.id} class="wf-edge" onClick=${(e) => { e.stopPropagation(); selectedEdgeId.value = edge.id; }}>
                 <path
@@ -3931,6 +4140,8 @@ function resolveWorkflowTemplateSource(workflow, templateLookupById, templateLoo
 function WorkflowListView() {
   const wfs = workflows.value || [];
   const tmpls = templates.value || [];
+  const isWorkflowListLoading = workflowsLoading.value;
+  const isTemplateListLoading = templatesLoading.value;
   const installedTemplateIds = new Set();
   wfs.forEach((wf) => {
     if (wf.metadata?.installedFrom) installedTemplateIds.add(wf.metadata.installedFrom);
@@ -3998,10 +4209,22 @@ function WorkflowListView() {
           <span class="btn-icon">${resolveIcon("chart")}</span>
           Run History
         <//>
+        <${Button} type="button" variant="outlined" size="small" onClick=${() => relayoutInstalledTemplateWorkflows()}>
+          <span class="btn-icon">${resolveIcon("refresh")}</span>
+          Re-layout Installed Templates
+        <//>
       </div>
 
       <!-- Active Workflows -->
-      ${wfs.length > 0 && html`
+      ${isWorkflowListLoading && html`
+        <div style="text-align: center; padding: 40px 20px; background: var(--color-bg-secondary, #1a1f2e); border-radius: 12px; margin-bottom: 24px; border: 1px solid var(--color-border, #2a3040);">
+          <${CircularProgress} size=${28} />
+          <div style="font-size: 16px; font-weight: 600; margin-top: 12px; margin-bottom: 8px;">Loading workflows…</div>
+          <div style="font-size: 13px; color: var(--color-text-secondary, #8b95a5);">Fetching installed workflows and template metadata.</div>
+        </div>
+      `}
+
+      ${!isWorkflowListLoading && wfs.length > 0 && html`
         <div style="margin-bottom: 24px;">
           <h3 style="font-size: 14px; font-weight: 600; color: var(--color-text-secondary, #8b95a5); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px;">
             Your Workflows (${wfs.length})
@@ -4147,7 +4370,7 @@ function WorkflowListView() {
         </div>
       `}
 
-      ${wfs.length === 0 && html`
+      ${!isWorkflowListLoading && wfs.length === 0 && html`
         <div style="text-align: center; padding: 40px 20px; background: var(--color-bg-secondary, #1a1f2e); border-radius: 12px; margin-bottom: 24px; border: 1px solid var(--color-border, #2a3040);">
           <div style="font-size: 36px; margin-bottom: 12px;">
             <span class="icon-inline">${resolveIcon("refresh")}</span>
@@ -4175,15 +4398,21 @@ function WorkflowListView() {
       <!-- Templates (grouped by category, deduped against installed) -->
       <div>
         <h3 style="font-size: 14px; font-weight: 600; color: var(--color-text-secondary, #8b95a5); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px;">
-          Available Templates (${availableTemplates.length})${tmpls.length !== availableTemplates.length ? html` <span style="font-size: 11px; font-weight: 400; opacity: 0.6;">· ${tmpls.length - availableTemplates.length} installed</span>` : ""}
+          Available Templates (${isTemplateListLoading ? "…" : availableTemplates.length})${!isTemplateListLoading && tmpls.length !== availableTemplates.length ? html` <span style="font-size: 11px; font-weight: 400; opacity: 0.6;">· ${tmpls.length - availableTemplates.length} installed</span>` : ""}
         </h3>
-        ${availableTemplates.length === 0 && html`
+        ${isTemplateListLoading && html`
+          <div style="text-align: center; padding: 24px; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 8px;">
+            <${CircularProgress} size=${18} />
+            <span>Loading templates…</span>
+          </div>
+        `}
+        ${!isTemplateListLoading && availableTemplates.length === 0 && html`
           <div style="text-align: center; padding: 24px; opacity: 0.5; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 6px;">
             <span class="icon-inline">${resolveIcon("star")}</span>
             <span>All templates are installed!</span>
           </div>
         `}
-        ${availableTemplateGroups.map((group) => html`
+        ${!isTemplateListLoading && availableTemplateGroups.map((group) => html`
           <div key=${group.key} style="margin-bottom: 20px;">
             <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--color-border, #2a304060);">
               <span class="icon-inline" style="font-size: 16px;">${resolveIcon(group.icon) || ICONS.dot}</span>
@@ -4236,6 +4465,16 @@ function WorkflowListView() {
  *  Run History View
  * ═══════════════════════════════════════════════════════════════ */
 
+function normalizeLiveNodeStatus(status) {
+  const s = String(status || "").trim().toLowerCase();
+  if (!s) return "";
+  if (s === "success" || s === "done" || s === "complete") return "completed";
+  if (s === "fail" || s === "error" || s === "errored") return "failed";
+  if (s === "in_progress" || s === "active" || s === "executing") return "running";
+  if (s === "idle" || s === "queued") return "pending";
+  return s;
+}
+
 function getRunStatusBadgeStyles(status) {
   const normalized = normalizeLiveNodeStatus(status) || String(status || "").trim().toLowerCase();
   if (normalized === "completed" || normalized === "success") return { bg: "#10b98130", color: "#10b981" };
@@ -4245,6 +4484,31 @@ function getRunStatusBadgeStyles(status) {
   return { bg: "#6b728030", color: "#9ca3af" };
 }
 
+function getCanvasNodeExecutionVisuals(status, isSelected, selectedColor, flashState = "") {
+  const normalized = normalizeLiveNodeStatus(status) || String(status || "").trim().toLowerCase();
+  if (normalized === "running") {
+    return { fill: "#10233f", stroke: "#60a5fa", strokeWidth: 2.5, filter: "url(#node-glow)" };
+  }
+  if (normalized === "failed" || normalized === "fail" || flashState === "fail") {
+    return { fill: "#2a1217", stroke: "#ef4444", strokeWidth: 2.25, filter: "url(#node-shadow)" };
+  }
+  if (normalized === "completed" || normalized === "success" || flashState === "success") {
+    return { fill: "#0f2a23", stroke: "#10b981", strokeWidth: 2, filter: "url(#node-shadow)" };
+  }
+  if (normalized === "skipped" || flashState === "skipped") {
+    return { fill: "#1f2430", stroke: "#94a3b8", strokeWidth: 2, filter: "url(#node-shadow)" };
+  }
+  if (normalized === "waiting" || normalized === "pending") {
+    return { fill: "#2f2310", stroke: "#f59e0b", strokeWidth: 2, filter: "url(#node-shadow)" };
+  }
+  return {
+    fill: isSelected ? "#1e293b" : "#1a1f2e",
+    stroke: isSelected ? selectedColor : "#2a3040",
+    strokeWidth: isSelected ? 2 : 1,
+    filter: isSelected ? "url(#node-glow)" : "url(#node-shadow)",
+  };
+}
+
 function getNodeStatusRank(status) {
   const normalized = normalizeLiveNodeStatus(status) || status;
   if (normalized === "running") return 0;
@@ -4335,6 +4599,8 @@ function RunHistoryView() {
   const hasMoreRuns = workflowRunsHasMore.value === true;
   const loadingMoreRuns = workflowRunsLoadingMore.value === true;
   const selectedRun = selectedRunDetail.value;
+  const scopedWorkflowId = String(workflowRunsScopeId.value || "").trim();
+  const scopedWorkflowName = scopedWorkflowId ? getWorkflowNameById(scopedWorkflowId) : "";
   const workflowNameMap = new Map((workflows.value || []).map((wf) => [wf.id, wf.name]));
   const [nowTick, setNowTick] = useState(Date.now());
   const hasRunningRuns = runs.some((run) => run?.status === "running");
@@ -4462,6 +4728,7 @@ function RunHistoryView() {
           <${Button} variant="text" size="small" onClick=${() => { selectedRunId.value = null; selectedRunDetail.value = null; }}>
             ← Back to Run History
           <//>
+          ${selectedRun.workflowId && html`<${Button} variant="text" size="small" onClick=${() => openWorkflowCanvas(selectedRun.workflowId)}>Open Workflow<//>`}
           <h2 style="margin: 0; font-size: 18px; font-weight: 700;">Run Details</h2>
           <${Button} variant="text" size="small" onClick=${() => loadRunDetail(selectedRun.runId)}>Refresh<//>
         </div>
@@ -4544,7 +4811,8 @@ function RunHistoryView() {
     <div style="padding: 0 4px;">
       <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap;">
         <${Button} variant="text" size="small" onClick=${returnToWorkflowList}>← Back to Workflows<//>
-        <h2 style="margin: 0; font-size: 18px; font-weight: 700;">Run History</h2>
+        ${scopedWorkflowId && html`<${Button} variant="text" size="small" onClick=${() => openWorkflowCanvas(scopedWorkflowId)}>Open Workflow<//>`}
+        <h2 style="margin: 0; font-size: 18px; font-weight: 700;">Run History${scopedWorkflowName ? ` · ${scopedWorkflowName}` : ""}</h2>
         <${Button}
           variant="text"
           size="small"
@@ -4650,8 +4918,8 @@ function RunHistoryView() {
             ? Math.max(0, nowTick - run.startedAt)
             : run.duration;
           const borderColor = run.isStuck
-            ? "#f59e0b80"
-            : (run.status === "running" ? "#3b82f680" : "var(--color-border, #2a3040)");
+            ? "var(--accent-warning, #f59e0b)"
+            : (run.status === "running" ? "var(--accent, #60a5fa)" : "var(--color-border, #2a3040)");
           const triggerLabel = getWorkflowRunTriggerLabel(run);
           return html`
             <${Button}
@@ -4742,14 +5010,15 @@ export function WorkflowsTab() {
     const route = routeParams.value || {};
     const workflowId = String(route.workflowId || "").trim();
     const runId = String(route.runId || "").trim();
+    const runsWorkflowId = String(route.runsWorkflowId || "").trim();
     const wantsRuns = Boolean(route.runsView) || Boolean(runId);
 
     if (wantsRuns) {
-      resetWorkflowRunsState();
+      resetWorkflowRunsState(runsWorkflowId || null);
       viewMode.value = "runs";
-      loadRuns(null, { reset: true });
+      loadRuns(runsWorkflowId || null, { reset: true });
       if (runId) {
-        loadRunDetail(runId);
+        loadRunDetail(runId, { workflowId: runsWorkflowId || null });
       } else {
         selectedRunId.value = null;
         selectedRunDetail.value = null;
@@ -4794,12 +5063,13 @@ export function WorkflowsTab() {
     }
     if (mode === "runs") {
       if (selectedRunId.value) {
-        setRouteParams(
-          { runsView: true, runId: selectedRunId.value },
-          { replace: true, skipGuard: true },
-        );
+        const route = { runsView: true, runId: selectedRunId.value };
+        if (workflowRunsScopeId.value) route.runsWorkflowId = workflowRunsScopeId.value;
+        setRouteParams(route, { replace: true, skipGuard: true });
       } else {
-        setRouteParams({ runsView: true }, { replace: true, skipGuard: true });
+        const route = { runsView: true };
+        if (workflowRunsScopeId.value) route.runsWorkflowId = workflowRunsScopeId.value;
+        setRouteParams(route, { replace: true, skipGuard: true });
       }
       return;
     }