[local-explorer-ui] Fix Workflows page (colors, icons, etc) (#13654)

Author: pombosilva

.changeset/fix-workflows-instance-ui.md

@@ -0,0 +1,9 @@
+---
+"@cloudflare/local-explorer-ui": patch
+---
+
+fix: Preserve expanded workflow steps across polling and improve instance page UX
+
+Expanded steps no longer collapse when new steps arrive via polling. Expansion state is lifted into the parent component and tracked by stable step keys, and polling skips state updates when data hasn't changed.
+
+Also: navigate to instance page after triggering, distinct refresh/restart icons, toolbar layout below stats strip, always-visible stats, unified status colors, and visual-only stripping of internal step name suffixes.

.changeset/fix-workflows-step-name-suffix.md

@@ -0,0 +1,7 @@
+---
+"miniflare": patch
+---
+
+fix: Preserve internal counter suffix on workflow step names in local explorer API
+
+Stop stripping the `-N` suffix from step names in the API response so the UI can distinguish duplicate step names. The suffix is now stripped only visually in the UI.

packages/local-explorer-ui/src/__e2e__/workflows/workflow.spec.ts

@@ -83,7 +83,7 @@ describe("Workflows", () => {
 			await waitForText("Trigger this workflow?");
 		});
 
-		test("triggers a new instance with params", async () => {
+		test("triggers a new instance and navigates to its detail page", async () => {
 			await navigateToWorkflow(WORKFLOW_NAME);
 
 			await clickButton("Trigger");
@@ -95,10 +95,9 @@ describe("Workflows", () => {
 
 			await dialog.getByRole("button", { name: "Trigger Instance" }).click();
 
-			await page.waitForSelector('[role="dialog"]', {
-				state: "hidden",
-				timeout: 10_000,
-			});
+			// Should navigate to the instance detail page
+			await waitForText("Steps Completed", { timeout: 10_000 });
+			await waitForText("Input params", { timeout: 10_000 });
 		});
 
 		test("cancels the trigger dialog", async () => {

packages/local-explorer-ui/src/__tests__/workflows/step-helpers.test.ts

@@ -0,0 +1,55 @@
+import { describe, test } from "vitest";
+import {
+	getStepDisplayName,
+	getStepKey,
+} from "../../components/workflows/StepRow";
+
+describe("getStepKey", () => {
+	test("produces key from type and name", ({ expect }) => {
+		expect(getStepKey({ type: "step", name: "fetch-1" })).toBe("step-fetch-1");
+	});
+
+	test("different counter suffixes produce different keys", ({ expect }) => {
+		const a = getStepKey({ type: "step", name: "fetch-1" });
+		const b = getStepKey({ type: "step", name: "fetch-2" });
+		expect(a).not.toBe(b);
+	});
+
+	test("same name with different types produce different keys", ({
+		expect,
+	}) => {
+		const a = getStepKey({ type: "step", name: "process-1" });
+		const b = getStepKey({ type: "waitForEvent", name: "process-1" });
+		expect(a).not.toBe(b);
+	});
+
+	test("handles undefined type and name", ({ expect }) => {
+		expect(getStepKey({})).toBe("undefined-undefined");
+	});
+});
+
+describe("getStepDisplayName", () => {
+	test("strips trailing counter suffix", ({ expect }) => {
+		expect(getStepDisplayName("fetch-1")).toBe("fetch");
+	});
+
+	test("strips multi-digit counter suffix", ({ expect }) => {
+		expect(getStepDisplayName("fetch-12")).toBe("fetch");
+	});
+
+	test("preserves name when no suffix", ({ expect }) => {
+		expect(getStepDisplayName("fetch")).toBe("fetch");
+	});
+
+	test("only strips the last numeric suffix", ({ expect }) => {
+		expect(getStepDisplayName("retry-3-1")).toBe("retry-3");
+	});
+
+	test("returns 'Unknown step' for undefined", ({ expect }) => {
+		expect(getStepDisplayName(undefined)).toBe("Unknown step");
+	});
+
+	test("handles name that is just a number suffix", ({ expect }) => {
+		expect(getStepDisplayName("step-0")).toBe("step");
+	});
+});

packages/local-explorer-ui/src/components/workflows/CreateInstanceDialog.tsx

@@ -3,7 +3,7 @@ import { useCallback, useState } from "react";
 import { workflowsCreateInstance } from "../../api";
 
 interface CreateWorkflowInstanceDialogProps {
-	onCreated: () => void;
+	onCreated: (instanceId: string) => void;
 	onOpenChange: (open: boolean) => void;
 	open: boolean;
 	workflowName: string;
@@ -68,13 +68,20 @@ export function CreateWorkflowInstanceDialog({
 				body.params = result.value;
 			}
 
-			await workflowsCreateInstance({
+			const response = await workflowsCreateInstance({
 				path: { workflow_name: workflowName },
 				body,
 			});
 
+			const newId = (response.data?.result as { id?: string } | undefined)?.id;
+
+			if (!newId) {
+				setError("Instance was created but no ID was returned");
+				return;
+			}
+
 			resetForm();
-			onCreated();
+			onCreated(newId);
 		} catch (err) {
 			setError(
 				err instanceof Error ? err.message : "Failed to create instance"

packages/local-explorer-ui/src/components/workflows/StatusBadge.tsx

@@ -4,9 +4,9 @@ import type { WorkflowsInstance } from "../../api";
 type WorkflowStatus = NonNullable<WorkflowsInstance["status"]>;
 
 const statusStyles: Record<WorkflowStatus, string> = {
-	complete: "bg-kumo-success text-white",
-	errored: "bg-kumo-danger text-white",
-	terminated: "bg-kumo-danger text-white",
+	complete: "bg-kumo-badge-teal text-white",
+	errored: "bg-kumo-badge-red text-white",
+	terminated: "bg-kumo-badge-red text-white",
 	waiting: "bg-kumo-brand text-white",
 	paused: "bg-kumo-brand text-white",
 	running: "bg-kumo-brand text-white",

packages/local-explorer-ui/src/components/workflows/StepRow.tsx

@@ -1,6 +1,6 @@
 import { Loader } from "@cloudflare/kumo";
 import { CheckIcon, PlusIcon } from "@phosphor-icons/react";
-import { useState } from "react";
+import { memo } from "react";
 import { CopyButton } from "./CopyButton";
 import { formatDuration, formatJson } from "./helpers";
 import { ScrollableCodeBlock } from "./ScrollableCodeBlock";
@@ -27,7 +27,7 @@ function StepStatusIcon({
 			);
 		}
 		return (
-			<div className="flex size-5 items-center justify-center rounded bg-kumo-danger">
+			<div className="flex size-5 items-center justify-center rounded bg-kumo-badge-red">
 				<span className="text-xs font-bold text-white">!</span>
 			</div>
 		);
@@ -41,7 +41,7 @@ function StepStatusIcon({
 			);
 		}
 		return (
-			<div className="flex size-5 items-center justify-center rounded bg-kumo-success">
+			<div className="flex size-5 items-center justify-center rounded bg-kumo-badge-teal">
 				<CheckIcon size={12} weight="bold" className="text-white" />
 			</div>
 		);
@@ -56,23 +56,38 @@ function StepStatusIcon({
 const TYPE_BADGE_STYLES: Record<string, string> = {
 	step: "bg-kumo-tint text-kumo-subtle",
 	sleep: "bg-kumo-overlay text-kumo-subtle",
-	waitForEvent: "bg-kumo-brand/10 text-kumo-brand",
+	waitForEvent: "bg-kumo-badge-purple/10 text-kumo-badge-purple",
 };
 
-export function StepRow({ step }: { step: StepData }): JSX.Element {
-	const [expanded, setExpanded] = useState(false);
+export function getStepKey(step: StepData): string {
+	return `${step.type}-${step.name}`;
+}
+
+/** Strip the internal "-N" counter suffix for display purposes */
+export function getStepDisplayName(name: string | undefined): string {
+	return (name ?? "Unknown step").replace(/-\d+$/, "");
+}
 
+export const StepRow = memo(function StepRow({
+	step,
+	isExpanded,
+	onToggleExpanded,
+}: {
+	step: StepData;
+	isExpanded: boolean;
+	onToggleExpanded: () => void;
+}): JSX.Element {
 	const hasDetails =
 		step.type === "step" ||
 		(step.type === "waitForEvent" &&
-			(step.error || step.output !== undefined || step.finished));
+			(step.error || step.output != null || step.finished));
 
 	return (
 		<div className="border-b border-kumo-fill p-1 last:border-b-0">
 			{/* Collapsed row */}
 			<div
 				className={`grid h-10 grid-cols-[20px_1fr_160px_160px_80px_24px] items-center gap-3 rounded-lg px-2 transition-colors ${hasDetails ? "cursor-pointer hover:bg-kumo-fill" : ""}`}
-				onClick={hasDetails ? () => setExpanded(!expanded) : undefined}
+				onClick={hasDetails ? onToggleExpanded : undefined}
 			>
 				<StepStatusIcon
 					success={step.success}
@@ -89,7 +104,7 @@ export function StepRow({ step }: { step: StepData }): JSX.Element {
 						</span>
 					)}
 					<span className="truncate text-sm text-kumo-default">
-						{step.name ?? "Unknown step"}
+						{getStepDisplayName(step.name)}
 					</span>
 				</div>
 
@@ -103,7 +118,7 @@ export function StepRow({ step }: { step: StepData }): JSX.Element {
 					{hasDetails ? (
 						<PlusIcon
 							size={14}
-							className={`text-kumo-subtle transition-transform ${expanded ? "rotate-45" : ""}`}
+							className={`text-kumo-subtle transition-transform ${isExpanded ? "rotate-45" : ""}`}
 						/>
 					) : (
 						<div className="w-6" />
@@ -112,7 +127,7 @@ export function StepRow({ step }: { step: StepData }): JSX.Element {
 			</div>
 
 			{/* Expanded detail panel */}
-			{expanded && hasDetails && (
+			{isExpanded && hasDetails && (
 				<div className="-mx-1 -mb-1">
 					<div className="mt-1 h-2 rounded-t-lg border-t border-kumo-fill" />
 					<div className="px-4 pt-3 pb-4">
@@ -125,7 +140,7 @@ export function StepRow({ step }: { step: StepData }): JSX.Element {
 			)}
 		</div>
 	);
-}
+});
 
 function StepCodeCard({
 	label,