@apify/mcp-widgets 0.2.30 → 0.3.0

package/README.md

@@ -22,9 +22,11 @@ import { ActorSearchWidget, WidgetHostProvider } from '@apify/mcp-widgets';
 </WidgetHostProvider>;
 ```
 
-`WidgetHost` has one required member, `openLink`. `requestDisplayMode` and `maxHeight` are optional: hosts with a single display mode or no height limit leave them out.
+`ActorRunWidget` only renders what it is given. `LiveActorRunWidget` keeps a run fresh on its own through the host's `callTool`, starting from as little as `{ runId }`.
 
-Exports: `ActorSearchWidget`, `ActorSearchDetail`, `ActorCard`, `ActorSearchResultsSkeleton`, `ActorSearchDetailSkeleton`, `WidgetLayout`, `SkeletonBlock`, `WidgetHostProvider`, `useWidgetHost` and the tool output types. Test ids for Playwright live under `@apify/mcp-widgets/test-ids`.
+`WidgetHost` has one required member, `openLink`. `requestDisplayMode`, `maxHeight`, `isInPage` and `callTool` are optional: hosts with a single display mode, no height limit, an iframe of their own or no way to call MCP tools leave them out.
+
+Exports: `ActorSearchWidget`, `ActorRunWidget`, `LiveActorRunWidget`, `ActorSearchDetail`, `ActorCard`, `ActorSearchResultsSkeleton`, `ActorSearchDetailSkeleton`, `WidgetLayout`, `SkeletonBlock`, `WidgetHostProvider`, `useWidgetHost` and the tool output types. Test ids for Playwright live under `@apify/mcp-widgets/test-ids`.
 
 ## Development
 

package/dist/components/actor_run/actor_run_preview_skeleton.d.ts

@@ -0,0 +1,2 @@
+export declare function ActorRunPreviewSkeleton(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=actor_run_preview_skeleton.d.ts.map

package/dist/components/actor_run/actor_run_preview_skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actor_run_preview_skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/actor_run/actor_run_preview_skeleton.tsx"],"names":[],"mappings":"AASA,wBAAgB,uBAAuB,4CA6BtC"}

package/dist/components/actor_run/actor_run_preview_skeleton.js

@@ -0,0 +1,34 @@
+import { SkeletonBlock } from "../skeleton_block/skeleton_block.js";
+import { PreviewTableWrapper } from "./actor_run_table.styles.js";
+import { actorRunWidgetTestIds } from "./actor_run_widget.test_ids.js";
+import { Table, TableBody, TableCell, TableHead, TableHeadCell, TableHeadRow, TableRow } from "@apify/ui-library";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/actor_run/actor_run_preview_skeleton.tsx
+var COLUMNS = [
+	0,
+	1,
+	2,
+	3,
+	4
+];
+var ROWS = [
+	0,
+	1,
+	2,
+	3,
+	4
+];
+function ActorRunPreviewSkeleton() {
+	return /* @__PURE__ */ jsx(PreviewTableWrapper, { children: /* @__PURE__ */ jsxs(Table, {
+		"data-test": actorRunWidgetTestIds.PREVIEW_SKELETON,
+		children: [/* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(TableHeadRow, { children: COLUMNS.map((column) => /* @__PURE__ */ jsx(TableHeadCell, { children: /* @__PURE__ */ jsx(SkeletonBlock, { style: {
+			width: `${60 + column * 10}px`,
+			height: "12px"
+		} }) }, column)) }) }), /* @__PURE__ */ jsx(TableBody, { children: ROWS.map((row) => /* @__PURE__ */ jsx(TableRow, { children: COLUMNS.map((column) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(SkeletonBlock, { style: {
+			width: `${70 + (row + column) % 3 * 30}px`,
+			height: "14px"
+		} }) }, column)) }, row)) })]
+	}) });
+}
+//#endregion
+export { ActorRunPreviewSkeleton };

package/dist/components/actor_run/actor_run_table.styles.d.ts

@@ -0,0 +1,3 @@
+/** Shared by the preview table and its skeleton: a few rows tall, scrolling past that, with long values cut short. */
+export declare const PreviewTableWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('@apify/ui-library').HorizontallyScrollableTableWrapperProps, never>> & string & Omit<import('react').FC<import('@apify/ui-library').HorizontallyScrollableTableWrapperProps>, keyof import('react').Component<any, {}, any>>;
+//# sourceMappingURL=actor_run_table.styles.d.ts.map

package/dist/components/actor_run/actor_run_table.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actor_run_table.styles.d.ts","sourceRoot":"","sources":["../../../src/components/actor_run/actor_run_table.styles.ts"],"names":[],"mappings":"AAIA,sHAAsH;AACtH,eAAO,MAAM,mBAAmB,8UAgB/B,CAAC"}

package/dist/components/actor_run/actor_run_table.styles.js

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+import { HorizontallyScrollableTableWrapper, tableClassNames } from "@apify/ui-library";
+//#region src/components/actor_run/actor_run_table.styles.ts
+/** Shared by the preview table and its skeleton: a few rows tall, scrolling past that, with long values cut short. */
+var PreviewTableWrapper = styled(HorizontallyScrollableTableWrapper)`
+    .${tableClassNames.WRAPPER_SCROLLABLE} {
+        max-height: 265px;
+        overflow-y: auto;
+    }
+
+    .${tableClassNames.HEAD_CELL} {
+        white-space: nowrap;
+    }
+
+    .${tableClassNames.BODY_CELL} {
+        max-width: 240px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+`;
+//#endregion
+export { PreviewTableWrapper };

package/dist/components/actor_run/actor_run_widget.d.ts

@@ -0,0 +1,30 @@
+import { ActorRunOutput, PreviewItem } from '../../types';
+/**
+ * The collapsed widget's height in a host's own page (`isInPage`) when its header fits on one line, for the host
+ * to hold its place before it mounts. The `CollapsedInPage` story checks it against the rendered widget.
+ */
+export declare const ACTOR_RUN_WIDGET_COLLAPSED_HEIGHT_PX = 62;
+type ActorRunWidgetProps = {
+    /** `structuredContent` of `call-actor` / `get-actor-run`; `null` until the run is known. */
+    output: ActorRunOutput | null;
+    /** Shown instead of the loading state when the tool call failed before a run existed. */
+    errorMessage?: string | null;
+    costUsd?: number;
+    /** Results in the default dataset; defaults to the count in `output`, which can trail a run that just finished. */
+    itemCount?: number;
+    /** The line below the widget saying how many results the run found; off where the host replies in its own words. */
+    shouldShowResultSummary?: boolean;
+    pictureUrl?: string;
+    /** First items of the default dataset once the run has succeeded; `null` while they load, `[]` when there are none. */
+    previewItems: PreviewItem[] | null;
+    /** The Actor's page, from `fetch-actor-details`; defaults to its Store page on apify.com. */
+    actorUrl?: string;
+    /** The host lost track of the run, so its last known status may be stale and is not shown. */
+    isStatusUnknown?: boolean;
+    /** Label of the button opening the run, e.g. a shorter one where the host already is Apify. */
+    openRunButtonLabel?: string;
+};
+/** Renders a `call-actor` / `get-actor-run` result; the host keeps `output` fresh while the run is in flight. */
+export declare function ActorRunWidget({ output, errorMessage, costUsd, itemCount, pictureUrl, previewItems, actorUrl: actorPageUrl, shouldShowResultSummary, openRunButtonLabel, isStatusUnknown, }: ActorRunWidgetProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=actor_run_widget.d.ts.map

package/dist/components/actor_run/actor_run_widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actor_run_widget.d.ts","sourceRoot":"","sources":["../../../src/components/actor_run/actor_run_widget.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAQ/D;;;GAGG;AACH,eAAO,MAAM,oCAAoC,KAAK,CAAC;AAEvD,KAAK,mBAAmB,GAAG;IACvB,4FAA4F;IAC5F,MAAM,EAAE,cAAc,GAAG,IAAI,CAAC;IAC9B,yFAAyF;IACzF,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mHAAmH;IACnH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oHAAoH;IACpH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uHAAuH;IACvH,YAAY,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC;IACnC,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8FAA8F;IAC9F,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+FAA+F;IAC/F,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC/B,CAAC;AAsQF,iHAAiH;AACjH,wBAAgB,cAAc,CAAC,EAC3B,MAAM,EACN,YAAY,EACZ,OAAO,EACP,SAA+D,EAC/D,UAAU,EACV,YAAY,EACZ,QAAQ,EAAE,YAAY,EACtB,uBAA8B,EAC9B,kBAAoC,EACpC,eAAuB,GAC1B,EAAE,mBAAmB,2CAqGrB"}

package/dist/components/actor_run/actor_run_widget.js

@@ -0,0 +1,322 @@
+import { useWidgetHost } from "../../host/widget_host_provider.js";
+import { capitalize, formatDuration, formatTimestamp, humanizeActorName } from "../../utils/formatting.js";
+import { isRunFinished } from "../../utils/run_status.js";
+import { WidgetLayout } from "../widget_layout/widget_layout.js";
+import { PreviewTableWrapper } from "./actor_run_table.styles.js";
+import { actorRunWidgetTestIds } from "./actor_run_widget.test_ids.js";
+import { ActorRunPreviewSkeleton } from "./actor_run_preview_skeleton.js";
+import styled from "styled-components";
+import { CheckIcon, ChevronDownIcon, CrossIcon, LoaderIcon } from "@apify/ui-icons";
+import { ActorAvatar, Badge, Button, IconButton, Table, TableBody, TableCell, TableHead, TableHeadCell, TableHeadRow, TableRow, Text, theme } from "@apify/ui-library";
+import { useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/actor_run/actor_run_widget.tsx
+/**
+* The collapsed widget's height in a host's own page (`isInPage`) when its header fits on one line, for the host
+* to hold its place before it mounts. The `CollapsedInPage` story checks it against the rendered widget.
+*/
+var ACTOR_RUN_WIDGET_COLLAPSED_HEIGHT_PX = 62;
+var FAILED_BADGE = {
+	variant: "danger",
+	Icon: CrossIcon
+};
+var IN_PROGRESS_BADGE = {
+	variant: "primary_blue",
+	Icon: LoaderIcon
+};
+var NEUTRAL_BADGE = { variant: "neutral" };
+var BADGE_BY_STATUS = {
+	SUCCEEDED: {
+		variant: "success",
+		Icon: CheckIcon
+	},
+	FAILED: FAILED_BADGE,
+	ABORTED: FAILED_BADGE,
+	"TIMED-OUT": FAILED_BADGE,
+	RUNNING: IN_PROGRESS_BADGE,
+	READY: IN_PROGRESS_BADGE,
+	"TIMING-OUT": IN_PROGRESS_BADGE,
+	ABORTING: IN_PROGRESS_BADGE
+};
+var Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    background: ${theme.color.neutral.background};
+    border: 1px solid ${theme.color.neutral.separatorSubtle};
+    border-radius: ${theme.radius.radius12};
+    padding: ${theme.space.space16};
+`;
+var Header = styled.div`
+    display: flex;
+    align-items: center;
+    gap: ${theme.space.space16};
+    width: 100%;
+    min-height: 24px;
+`;
+var ExpandToggle = styled.div`
+    display: flex;
+    flex-shrink: 0;
+
+    /* IconButton outlines itself on any focus, a mouse click included; keyboard focus keeps the browser's ring. */
+    button,
+    button:hover,
+    button:focus,
+    button:active {
+        border-color: transparent;
+    }
+
+    button:focus:not(:focus-visible) {
+        outline: none;
+    }
+
+    svg {
+        transition: transform 200ms ease-in-out;
+        transform: rotate(${({ $isExpanded }) => $isExpanded ? "180deg" : "0deg"});
+    }
+`;
+var Collapsible = styled.div`
+    display: grid;
+    grid-template-rows: ${({ $isExpanded }) => $isExpanded ? "1fr" : "0fr"};
+    visibility: ${({ $isExpanded }) => $isExpanded ? "visible" : "hidden"};
+    /* Shown at once on expand, hidden only once the collapse has finished. */
+    transition:
+        grid-template-rows 200ms ease-in-out,
+        visibility 0s linear ${({ $isExpanded }) => $isExpanded ? "0s" : "200ms"};
+`;
+var CollapsibleBody = styled.div`
+    min-height: 0;
+    overflow: hidden;
+`;
+var Body = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.space.space8};
+    padding-top: ${theme.space.space8};
+`;
+var ActorName = styled.div`
+    display: flex;
+    align-items: center;
+    gap: ${theme.space.space6};
+`;
+var ActorNameLink = styled.a`
+    color: ${theme.color.neutral.text};
+    text-decoration: underline;
+    text-decoration-color: ${theme.color.neutral.text};
+    cursor: pointer;
+    ${theme.typography.shared.desktop.bodyMMedium};
+
+    &:hover {
+        color: ${theme.color.primary.action};
+        text-decoration-color: ${theme.color.primary.action};
+    }
+`;
+var StatusRow = styled.div`
+    display: flex;
+    align-items: center;
+    gap: ${theme.space.space16};
+    flex-wrap: nowrap;
+    overflow: hidden;
+    flex: 1;
+`;
+var MetadataRow = styled.div`
+    display: flex;
+    align-items: center;
+    gap: ${theme.space.space8};
+    flex-wrap: nowrap;
+`;
+function MetadataText({ children, ...rest }) {
+	return /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		type: "body",
+		size: "small",
+		weight: "medium",
+		color: theme.color.neutral.text,
+		...rest,
+		children
+	});
+}
+var Divider = styled.span`
+    color: ${theme.color.neutral.textMuted};
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+`;
+var TableGradientOverlay = styled.div`
+    position: sticky;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 86px;
+    margin-top: -86px;
+    background: linear-gradient(178.84deg, transparent 13.4%, ${theme.color.neutral.background} 81.59%);
+    pointer-events: none;
+    border-radius: 0 0 ${theme.radius.radius12} ${theme.radius.radius12};
+    z-index: 2;
+`;
+var EmptyState = styled.div`
+    padding: ${theme.space.space24} ${theme.space.space16};
+    text-align: center;
+    color: ${theme.color.neutral.textMuted};
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: ${theme.space.space8};
+`;
+var Footer = styled.div`
+    display: flex;
+    align-items: center;
+`;
+function formatCell(value) {
+	if (value == null) return "—";
+	if (Array.isArray(value)) return `${value.length} items`;
+	if (typeof value === "object") return `${Object.keys(value).length} fields`;
+	return String(value) || "—";
+}
+function PreviewTable({ items }) {
+	const columns = Object.keys(items[0]);
+	return /* @__PURE__ */ jsxs(PreviewTableWrapper, { children: [/* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(TableHeadRow, { children: columns.map((column) => /* @__PURE__ */ jsx(TableHeadCell, { children: capitalize(column) }, column)) }) }), /* @__PURE__ */ jsx(TableBody, { children: items.map((item, index) => /* @__PURE__ */ jsx(TableRow, {
+		"data-test": actorRunWidgetTestIds.PREVIEW_ROW,
+		children: columns.map((column) => /* @__PURE__ */ jsx(TableCell, { children: formatCell(item[column]) }, column))
+	}, index)) })] }), items.length > 3 && /* @__PURE__ */ jsx(TableGradientOverlay, {})] });
+}
+/** Counts up every second while the run is going; the host only re-renders the widget when it polls. */
+function RunDuration({ startedAt, finishedAt }) {
+	const [, setNow] = useState(Date.now);
+	useEffect(() => {
+		if (finishedAt) return void 0;
+		const interval = setInterval(() => setNow(Date.now()), 1e3);
+		return () => clearInterval(interval);
+	}, [finishedAt]);
+	return formatDuration(startedAt, finishedAt);
+}
+var RUN_PREVIEW_EMPTY_TEXT = {
+	READY: "The Actor is ready to run.",
+	UNKNOWN: "Could not load the run's status. Open the run to see it."
+};
+function RunPreview({ status, previewItems }) {
+	if (previewItems && previewItems.length > 0) return /* @__PURE__ */ jsx(PreviewTable, { items: previewItems });
+	if (!isRunFinished(status) && status !== "READY" && status !== "UNKNOWN" || status === "SUCCEEDED" && previewItems === null) return /* @__PURE__ */ jsx(ActorRunPreviewSkeleton, {});
+	return /* @__PURE__ */ jsx(EmptyState, {
+		"data-test": actorRunWidgetTestIds.EMPTY_STATE,
+		children: /* @__PURE__ */ jsx(Text, {
+			type: "body",
+			size: "small",
+			color: theme.color.neutral.textMuted,
+			children: RUN_PREVIEW_EMPTY_TEXT[status] ?? "No results available."
+		})
+	});
+}
+function RunPlaceholder({ errorMessage }) {
+	return /* @__PURE__ */ jsx(WidgetLayout, { children: /* @__PURE__ */ jsx(Container, {
+		"data-test": actorRunWidgetTestIds.ROOT,
+		children: /* @__PURE__ */ jsx(EmptyState, { children: errorMessage ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Badge, {
+			variant: "danger",
+			size: "small",
+			LeadingIcon: CrossIcon,
+			children: "Failed"
+		}), /* @__PURE__ */ jsx(Text, {
+			type: "body",
+			size: "small",
+			"data-test": actorRunWidgetTestIds.ERROR,
+			children: errorMessage
+		})] }) : /* @__PURE__ */ jsx(Text, {
+			type: "body",
+			size: "small",
+			color: theme.color.neutral.textMuted,
+			"data-test": actorRunWidgetTestIds.LOADING,
+			children: "Loading Actor run data ..."
+		}) })
+	}) });
+}
+/** Renders a `call-actor` / `get-actor-run` result; the host keeps `output` fresh while the run is in flight. */
+function ActorRunWidget({ output, errorMessage, costUsd, itemCount = output?.storages?.datasets?.default?.itemCount ?? 0, pictureUrl, previewItems, actorUrl: actorPageUrl, shouldShowResultSummary = true, openRunButtonLabel = "View on Apify", isStatusUnknown = false }) {
+	const { openLink } = useWidgetHost();
+	const [isExpanded, setIsExpanded] = useState(false);
+	if (!output?.runId) return /* @__PURE__ */ jsx(RunPlaceholder, { errorMessage });
+	const { runId, startedAt, finishedAt } = output;
+	const status = isStatusUnknown ? "UNKNOWN" : output.status || "RUNNING";
+	const statusUpper = status.toUpperCase();
+	const badge = BADGE_BY_STATUS[statusUpper] ?? NEUTRAL_BADGE;
+	const { actorName } = output;
+	const actorTitle = actorName ? humanizeActorName(actorName.split("/").at(-1) ?? actorName) : "Unknown Actor";
+	const actorUrl = actorPageUrl ?? (actorName && `https://apify.com/${actorName}`);
+	const runUrl = output.apifyConsoleUrl ?? `https://console.apify.com/actors/runs/${runId}`;
+	return /* @__PURE__ */ jsxs(WidgetLayout, { children: [/* @__PURE__ */ jsxs(Container, {
+		"data-test": actorRunWidgetTestIds.ROOT,
+		children: [/* @__PURE__ */ jsxs(Header, { children: [
+			/* @__PURE__ */ jsxs(ActorName, { children: [/* @__PURE__ */ jsx(ActorAvatar, {
+				size: 20,
+				name: actorTitle,
+				url: pictureUrl
+			}), actorUrl ? /* @__PURE__ */ jsx(ActorNameLink, {
+				href: actorUrl,
+				"data-test": actorRunWidgetTestIds.ACTOR_LINK,
+				onClick: (event) => {
+					event.preventDefault();
+					openLink(actorUrl);
+				},
+				children: actorTitle
+			}) : /* @__PURE__ */ jsx(Text, {
+				weight: "medium",
+				children: actorTitle
+			})] }),
+			/* @__PURE__ */ jsxs(StatusRow, { children: [/* @__PURE__ */ jsx(Badge, {
+				variant: badge.variant,
+				size: "small",
+				LeadingIcon: badge.Icon,
+				"data-test": actorRunWidgetTestIds.STATUS,
+				children: capitalize(status.toLowerCase())
+			}), /* @__PURE__ */ jsxs(MetadataRow, { children: [
+				typeof costUsd === "number" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(MetadataText, { children: ["$", costUsd.toFixed(3)] }), /* @__PURE__ */ jsx(Divider, { children: "|" })] }),
+				/* @__PURE__ */ jsx(MetadataText, { children: startedAt ? formatTimestamp(startedAt) : "—" }),
+				/* @__PURE__ */ jsx(Divider, { children: "|" }),
+				/* @__PURE__ */ jsx(MetadataText, {
+					"data-test": actorRunWidgetTestIds.DURATION,
+					children: startedAt && !isStatusUnknown ? /* @__PURE__ */ jsx(RunDuration, {
+						startedAt,
+						finishedAt
+					}) : "—"
+				})
+			] })] }),
+			/* @__PURE__ */ jsx(ExpandToggle, {
+				$isExpanded: isExpanded,
+				children: /* @__PURE__ */ jsx(IconButton, {
+					Icon: ChevronDownIcon,
+					size: "small",
+					"aria-label": isExpanded ? "Hide run details" : "Show run details",
+					"aria-expanded": isExpanded,
+					"data-test": actorRunWidgetTestIds.TOGGLE,
+					onClick: () => setIsExpanded((wasExpanded) => !wasExpanded)
+				})
+			})
+		] }), /* @__PURE__ */ jsx(Collapsible, {
+			$isExpanded: isExpanded,
+			children: /* @__PURE__ */ jsx(CollapsibleBody, { children: /* @__PURE__ */ jsxs(Body, { children: [/* @__PURE__ */ jsx(RunPreview, {
+				status: statusUpper,
+				previewItems
+			}), /* @__PURE__ */ jsx(Footer, { children: /* @__PURE__ */ jsx(Button, {
+				variant: "secondary",
+				size: "small",
+				"data-test": actorRunWidgetTestIds.OPEN_RUN_BUTTON,
+				onClick: () => openLink(runUrl),
+				children: openRunButtonLabel
+			}) })] }) })
+		})]
+	}), shouldShowResultSummary && statusUpper === "SUCCEEDED" && itemCount > 0 && /* @__PURE__ */ jsxs(Text, {
+		as: "p",
+		color: theme.color.neutral.text,
+		"data-test": actorRunWidgetTestIds.RESULT_SUMMARY,
+		children: [
+			"The ",
+			actorTitle,
+			" found ",
+			itemCount,
+			" result",
+			itemCount !== 1 ? "s" : "",
+			". You can visit results via the provided link."
+		]
+	})] });
+}
+//#endregion
+export { ACTOR_RUN_WIDGET_COLLAPSED_HEIGHT_PX, ActorRunWidget };

package/dist/components/actor_run/actor_run_widget.test_ids.d.ts

@@ -0,0 +1,15 @@
+export declare const actorRunWidgetTestIds: {
+    readonly ROOT: "actor-run-widget";
+    readonly LOADING: "actor-run-widget-loading";
+    readonly ERROR: "actor-run-widget-error";
+    readonly STATUS: "actor-run-widget-status";
+    readonly DURATION: "actor-run-widget-duration";
+    readonly ACTOR_LINK: "actor-run-widget-actor-link";
+    readonly TOGGLE: "actor-run-widget-toggle";
+    readonly PREVIEW_ROW: "actor-run-widget-preview-row";
+    readonly PREVIEW_SKELETON: "actor-run-widget-preview-skeleton";
+    readonly EMPTY_STATE: "actor-run-widget-empty-state";
+    readonly OPEN_RUN_BUTTON: "actor-run-widget-open-run-button";
+    readonly RESULT_SUMMARY: "actor-run-widget-result-summary";
+};
+//# sourceMappingURL=actor_run_widget.test_ids.d.ts.map

package/dist/components/actor_run/actor_run_widget.test_ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actor_run_widget.test_ids.d.ts","sourceRoot":"","sources":["../../../src/components/actor_run/actor_run_widget.test_ids.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;CAaxB,CAAC"}

package/dist/components/actor_run/actor_run_widget.test_ids.js

@@ -0,0 +1,17 @@
+//#region src/components/actor_run/actor_run_widget.test_ids.ts
+var actorRunWidgetTestIds = {
+	ROOT: "actor-run-widget",
+	LOADING: "actor-run-widget-loading",
+	ERROR: "actor-run-widget-error",
+	STATUS: "actor-run-widget-status",
+	DURATION: "actor-run-widget-duration",
+	ACTOR_LINK: "actor-run-widget-actor-link",
+	TOGGLE: "actor-run-widget-toggle",
+	PREVIEW_ROW: "actor-run-widget-preview-row",
+	PREVIEW_SKELETON: "actor-run-widget-preview-skeleton",
+	EMPTY_STATE: "actor-run-widget-empty-state",
+	OPEN_RUN_BUTTON: "actor-run-widget-open-run-button",
+	RESULT_SUMMARY: "actor-run-widget-result-summary"
+};
+//#endregion
+export { actorRunWidgetTestIds };

package/dist/components/actor_run/live_actor_run_widget.d.ts

@@ -0,0 +1,13 @@
+import { ComponentProps } from 'react';
+import { ActorRunOutput } from '../../types';
+import { ActorRunWidget } from './actor_run_widget';
+type LiveActorRunWidgetProps = Pick<ComponentProps<typeof ActorRunWidget>, 'output' | 'costUsd' | 'errorMessage' | 'shouldShowResultSummary' | 'openRunButtonLabel'> & {
+    /** Called once when polling sees the run finish; not called for a run that had already finished. */
+    onRunFinished?: (output: ActorRunOutput) => void;
+    /** Wait before the run's next refresh, after `pollCount` refreshes. Absent to use the default back-off. */
+    pollDelayMs?: (pollCount: number) => number;
+};
+/** The run widget, kept up to date through the host's `callTool` until the run finishes. */
+export declare function LiveActorRunWidget(props: LiveActorRunWidgetProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=live_actor_run_widget.d.ts.map

package/dist/components/actor_run/live_actor_run_widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"live_actor_run_widget.d.ts","sourceRoot":"","sources":["../../../src/components/actor_run/live_actor_run_widget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAGpD,KAAK,uBAAuB,GAAG,IAAI,CAC/B,cAAc,CAAC,OAAO,cAAc,CAAC,EACrC,QAAQ,GAAG,SAAS,GAAG,cAAc,GAAG,yBAAyB,GAAG,oBAAoB,CAC3F,GAAG;IACA,oGAAoG;IACpG,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IACjD,2GAA2G;IAC3G,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C,CAAC;AAiCF,4FAA4F;AAC5F,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAGhE"}

package/dist/components/actor_run/live_actor_run_widget.js

@@ -0,0 +1,30 @@
+import { ActorRunWidget } from "./actor_run_widget.js";
+import { useActorRunPolling } from "./use_actor_run_polling.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/actor_run/live_actor_run_widget.tsx
+function PolledActorRunWidget({ output, costUsd, errorMessage, shouldShowResultSummary, openRunButtonLabel, onRunFinished, pollDelayMs }) {
+	const { run, itemCount, pictureUrl, actorUrl, previewItems, isStatusUnknown } = useActorRunPolling({
+		output,
+		costUsd,
+		onRunFinished,
+		pollDelayMs
+	});
+	return /* @__PURE__ */ jsx(ActorRunWidget, {
+		output: run?.output ?? output,
+		errorMessage,
+		costUsd: run?.costUsd,
+		itemCount,
+		pictureUrl,
+		actorUrl,
+		previewItems,
+		isStatusUnknown,
+		shouldShowResultSummary,
+		openRunButtonLabel
+	});
+}
+/** The run widget, kept up to date through the host's `callTool` until the run finishes. */
+function LiveActorRunWidget(props) {
+	return /* @__PURE__ */ jsx(PolledActorRunWidget, { ...props }, props.output?.runId);
+}
+//#endregion
+export { LiveActorRunWidget };

package/dist/components/actor_run/use_actor_run_polling.d.ts

@@ -0,0 +1,28 @@
+import { ActorRunOutput, PreviewItem } from '../../types';
+/** A `call-actor` / `get-actor-run` result: the run itself plus the cost the server sends in `_meta`. */
+type RunSnapshot = {
+    output: ActorRunOutput;
+    costUsd?: number;
+};
+/**
+ * Keeps a run fresh through the host's `callTool`: polls `get-actor-run` until the run finishes, then
+ * loads a preview of its results with `get-dataset-items`, and the Actor's picture with `fetch-actor-details`.
+ * `output` is what the host knows about the run; a bare `{ runId }` is enough, and is fetched at once.
+ */
+export declare function useActorRunPolling({ output, costUsd, onRunFinished, pollDelayMs, }: {
+    output: ActorRunOutput | null;
+    costUsd?: number;
+    onRunFinished?: (output: ActorRunOutput) => void;
+    /** Wait before the run's next refresh, after `pollCount` refreshes. */
+    pollDelayMs?: (pollCount: number) => number;
+}): {
+    run: RunSnapshot | null;
+    itemCount: number;
+    pictureUrl: string | undefined;
+    actorUrl: string | undefined;
+    previewItems: PreviewItem[] | null;
+    /** Polling gave up, so the last known status is stale. */
+    isStatusUnknown: boolean;
+};
+export {};
+//# sourceMappingURL=use_actor_run_polling.d.ts.map

package/dist/components/actor_run/use_actor_run_polling.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use_actor_run_polling.d.ts","sourceRoot":"","sources":["../../../src/components/actor_run/use_actor_run_polling.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAM/D,yGAAyG;AACzG,KAAK,WAAW,GAAG;IACf,MAAM,EAAE,cAAc,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAyCF;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,EAC/B,MAAM,EACN,OAAO,EACP,aAAa,EACb,WAAgC,GACnC,EAAE;IACC,MAAM,EAAE,cAAc,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IACjD,uEAAuE;IACvE,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;;;;;;IAgKO,0DAA0D;;EAGjE"}

package/dist/components/actor_run/use_actor_run_polling.js

@@ -0,0 +1,202 @@
+import { useWidgetHost } from "../../host/widget_host_provider.js";
+import { isRunFinished } from "../../utils/run_status.js";
+import { useEffect, useRef, useState } from "react";
+//#region src/components/actor_run/use_actor_run_polling.ts
+/** Where the MCP server puts a run's cost in a tool result's `_meta`. */
+var ACTOR_RUN_META_KEY = "com.apify/ActorRun";
+var PREVIEW_ITEM_LIMIT = 20;
+var ITEM_COUNT_SETTLE_MS = 3e4;
+var PREVIEW_REFRESH_MS = 5e3;
+var delay = async (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+var getDataset = (output) => output.storages?.datasets?.default;
+/** A revoked token or a run that no longer exists, which no later poll can recover from. */
+var UNRECOVERABLE_ERRORS = [
+	"401",
+	"Unauthorized",
+	"not found"
+];
+/** Unrecoverable errors in a row before polling gives up; one alone can be a token refresh or a lagging replica. */
+var MAX_UNRECOVERABLE_ERRORS = 3;
+var defaultPollDelayMs = (pollCount) => Math.min((Math.floor(pollCount / 2) * 5 + 5) * 1e3, 6e4);
+function extractUsageTotalUsd(meta) {
+	const value = (meta?.[ACTOR_RUN_META_KEY])?.usageTotalUsd;
+	return typeof value === "number" ? value : void 0;
+}
+/** Hosts hand a tool error back as a result rather than throwing; this makes it throw. */
+async function callToolOrThrow(callTool, name, args) {
+	const response = await callTool(name, args);
+	if (response.isError) {
+		const message = response.content?.map(({ text }) => text).join(" ");
+		throw new Error(`${name} failed: ${message}`);
+	}
+	return response;
+}
+/**
+* Keeps a run fresh through the host's `callTool`: polls `get-actor-run` until the run finishes, then
+* loads a preview of its results with `get-dataset-items`, and the Actor's picture with `fetch-actor-details`.
+* `output` is what the host knows about the run; a bare `{ runId }` is enough, and is fetched at once.
+*/
+function useActorRunPolling({ output, costUsd, onRunFinished, pollDelayMs = defaultPollDelayMs }) {
+	const { callTool } = useWidgetHost();
+	const callToolRef = useRef(callTool);
+	callToolRef.current = callTool;
+	const hasCallTool = Boolean(callTool);
+	const [run, setRun] = useState(null);
+	const [actorInfo, setActorInfo] = useState(null);
+	const [preview, setPreview] = useState(null);
+	const [isStatusUnknown, setIsStatusUnknown] = useState(false);
+	const onRunFinishedRef = useRef(onRunFinished);
+	onRunFinishedRef.current = onRunFinished;
+	const pollDelayMsRef = useRef(pollDelayMs);
+	pollDelayMsRef.current = pollDelayMs;
+	const runId = run?.output.runId;
+	const status = (run?.output.status ?? "").toUpperCase();
+	const actorName = run?.output.actorName;
+	const dataset = run ? getDataset(run.output) : void 0;
+	useEffect(() => {
+		if (!output?.runId) return;
+		setRun((current) => {
+			if (!current) return {
+				output,
+				costUsd
+			};
+			if (isRunFinished(current.output.status) || !output.status) return current;
+			return {
+				output: {
+					...current.output,
+					...output
+				},
+				costUsd: costUsd ?? current.costUsd
+			};
+		});
+	}, [output?.runId, output?.status]);
+	useEffect(() => {
+		const callTool = callToolRef.current;
+		if (!callTool || !run || isRunFinished(run.output.status) && run.costUsd !== void 0) return;
+		const current = run;
+		let isCancelled = false;
+		const poll = async () => {
+			let pollCount = 0;
+			let unrecoverableErrorCount = 0;
+			let nextDelayMs = current.output.status && current.costUsd !== void 0 ? pollDelayMsRef.current(pollCount) : 0;
+			while (!isCancelled) {
+				await delay(nextDelayMs);
+				if (isCancelled) return;
+				try {
+					const response = await callToolOrThrow(callTool, "get-actor-run", {
+						runId: current.output.runId,
+						waitSecs: 0
+					});
+					if (isCancelled) return;
+					const fetched = response.structuredContent;
+					if (!fetched?.runId) throw new Error("get-actor-run returned no run");
+					const output = fetched.actorName ? fetched : {
+						...fetched,
+						actorName: current.output.actorName
+					};
+					const costUsd = extractUsageTotalUsd(response._meta);
+					unrecoverableErrorCount = 0;
+					setIsStatusUnknown(false);
+					setRun((latest) => ({
+						output,
+						costUsd: costUsd ?? latest?.costUsd
+					}));
+					if (isRunFinished(output.status)) {
+						if (!isRunFinished(current.output.status)) onRunFinishedRef.current?.(output);
+						return;
+					}
+				} catch (err) {
+					if (isRunFinished(current.output.status)) return;
+					unrecoverableErrorCount = err instanceof Error && UNRECOVERABLE_ERRORS.some((text) => err.message.includes(text)) ? unrecoverableErrorCount + 1 : 0;
+					if (unrecoverableErrorCount >= MAX_UNRECOVERABLE_ERRORS) {
+						setIsStatusUnknown(true);
+						return;
+					}
+				}
+				pollCount++;
+				nextDelayMs = pollDelayMsRef.current(pollCount);
+			}
+		};
+		poll();
+		return () => {
+			isCancelled = true;
+		};
+	}, [
+		runId,
+		status,
+		hasCallTool
+	]);
+	const finishedAt = run?.output.finishedAt;
+	useEffect(() => {
+		const callTool = callToolRef.current;
+		if (!callTool || status !== "SUCCEEDED" || !dataset?.id) return;
+		const datasetId = dataset.id;
+		const settledAtMs = finishedAt ? Math.min(Date.parse(finishedAt), Date.now()) + ITEM_COUNT_SETTLE_MS : 0;
+		let isCancelled = false;
+		(async () => {
+			while (!isCancelled) {
+				try {
+					const response = await callToolOrThrow(callTool, "get-dataset-items", {
+						datasetId,
+						limit: PREVIEW_ITEM_LIMIT,
+						clean: true
+					});
+					if (isCancelled) return;
+					const content = response.structuredContent;
+					const items = Array.isArray(content?.items) ? content.items : [];
+					setPreview({
+						items,
+						total: Math.max(content?.totalItemCount ?? 0, items.length)
+					});
+				} catch {
+					if (!isCancelled) setPreview((current) => current ?? {
+						items: [],
+						total: 0
+					});
+				}
+				if (Date.now() >= settledAtMs) return;
+				await delay(PREVIEW_REFRESH_MS);
+			}
+		})();
+		return () => {
+			isCancelled = true;
+		};
+	}, [
+		hasCallTool,
+		status,
+		dataset?.id,
+		finishedAt
+	]);
+	useEffect(() => {
+		const callTool = callToolRef.current;
+		if (!callTool || !actorName || actorInfo !== null) return;
+		let isCancelled = false;
+		(async () => {
+			try {
+				const fetched = (await callToolOrThrow(callTool, "fetch-actor-details", {
+					actor: actorName,
+					output: { metadata: true }
+				})).structuredContent?.actorInfo;
+				if (!isCancelled && fetched) setActorInfo(fetched);
+			} catch {}
+		})();
+		return () => {
+			isCancelled = true;
+		};
+	}, [
+		hasCallTool,
+		actorName,
+		actorInfo
+	]);
+	return {
+		run,
+		itemCount: Math.max(dataset?.itemCount ?? 0, preview?.total ?? 0),
+		pictureUrl: actorInfo?.pictureUrl,
+		actorUrl: actorInfo?.url,
+		previewItems: preview?.items ?? null,
+		/** Polling gave up, so the last known status is stale. */
+		isStatusUnknown
+	};
+}
+//#endregion
+export { useActorRunPolling };

package/dist/components/actor_search/actor_search_widget.js

@@ -1,7 +1,7 @@
 import { ActorCard } from "../actor_card/actor_card.js";
+import { WidgetLayout } from "../widget_layout/widget_layout.js";
 import { ActorSearchDetail } from "./actor_search_detail.js";
 import { ActorSearchResultsSkeleton } from "./actor_search_skeleton.js";
-import { WidgetLayout } from "../widget_layout/widget_layout.js";
 import { actorSearchWidgetTestIds } from "./actor_search_widget.test_ids.js";
 import styled from "styled-components";
 import { Box, Message, theme } from "@apify/ui-library";

package/dist/components/widget_layout/widget_layout.js

@@ -8,16 +8,17 @@ var Layout = styled(Box)`
     flex-direction: column;
     gap: 1.5rem;
     width: 100%;
-    padding: 1rem 1.25rem 2.5rem;
+    padding: ${({ $isInPage }) => $isInPage ? "0" : "1rem 1.25rem 2.5rem"};
     overflow-y: auto;
     max-height: ${({ $maxHeight }) => $maxHeight ? `${$maxHeight}px` : "none"};
 `;
 function WidgetLayout({ children, className, style }) {
-	const { maxHeight } = useWidgetHost();
+	const { maxHeight, isInPage } = useWidgetHost();
 	return /* @__PURE__ */ jsx(Layout, {
 		className,
 		style,
 		$maxHeight: maxHeight,
+		$isInPage: isInPage,
 		children
 	});
 }

package/dist/files_hash_at_build.txt

@@ -1 +1 @@
-a3914439475f226af0d64163f3eb7b9d6d14f76e
+0c12a27a0062bd16f9aa2c3f2da1c88d9569af2e

package/dist/host/types.d.ts

@@ -1,4 +1,15 @@
 export type WidgetDisplayMode = 'inline' | 'fullscreen';
+/** The parts of an MCP `tools/call` result the widgets read. */
+export type ToolCallResult = {
+    /** Carries the error message when `isError` is set. */
+    content?: {
+        type: string;
+        text?: string;
+    }[];
+    structuredContent?: unknown;
+    _meta?: Record<string, unknown>;
+    isError?: boolean;
+};
 /** What a widget needs from its host (MCP Apps iframe, Console, Storybook). */
 export type WidgetHost = {
     openLink: (url: string) => void;
@@ -6,5 +17,9 @@ export type WidgetHost = {
     requestDisplayMode?: (mode: WidgetDisplayMode) => Promise<void> | void;
     /** In px; absent when unconstrained. */
     maxHeight?: number;
+    /** The widget sits in the host's own page, not an iframe, so the page sets the spacing around it. */
+    isInPage?: boolean;
+    /** Calls a tool on the Apify MCP server, for widgets that refresh their own data. Absent when the host cannot. */
+    callTool?: (name: string, args: Record<string, unknown>) => Promise<ToolCallResult>;
 };
 //# sourceMappingURL=types.d.ts.map

package/dist/host/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/host/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,YAAY,CAAC;AAExD,+EAA+E;AAC/E,MAAM,MAAM,UAAU,GAAG;IACrB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,sDAAsD;IACtD,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACvE,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CAEtB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/host/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,YAAY,CAAC;AAExD,gEAAgE;AAChE,MAAM,MAAM,cAAc,GAAG;IACzB,uDAAuD;IACvD,OAAO,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,+EAA+E;AAC/E,MAAM,MAAM,UAAU,GAAG;IACrB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,sDAAsD;IACtD,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACvE,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qGAAqG;IACrG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kHAAkH;IAClH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC,cAAc,CAAC,CAAC;CACvF,CAAC"}

package/dist/index.d.ts

@@ -1,10 +1,12 @@
 export { ActorCard } from './components/actor_card/actor_card';
+export { ACTOR_RUN_WIDGET_COLLAPSED_HEIGHT_PX, ActorRunWidget } from './components/actor_run/actor_run_widget';
+export { LiveActorRunWidget } from './components/actor_run/live_actor_run_widget';
 export { ActorSearchDetail } from './components/actor_search/actor_search_detail';
 export { ActorSearchDetailSkeleton, ActorSearchResultsSkeleton } from './components/actor_search/actor_search_skeleton';
 export { ActorSearchWidget } from './components/actor_search/actor_search_widget';
 export { SkeletonBlock } from './components/skeleton_block/skeleton_block';
 export { WidgetLayout } from './components/widget_layout/widget_layout';
-export type { WidgetDisplayMode, WidgetHost } from './host/types';
+export type { ToolCallResult, WidgetDisplayMode, WidgetHost } from './host/types';
 export { useWidgetHost, WidgetHostProvider } from './host/widget_host_provider';
-export type { Actor, ActorDetails, ActorStats, SearchActorsOutput, StructuredPricingInfo } from './types';
+export type { Actor, ActorDetails, ActorRunOutput, ActorStats, SearchActorsOutput, StructuredPricingInfo, } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAClF,OAAO,EAAE,yBAAyB,EAAE,0BAA0B,EAAE,MAAM,iDAAiD,CAAC;AACxH,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAClF,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAC3E,OAAO,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAC;AACxE,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAChF,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAC/D,OAAO,EAAE,oCAAoC,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AAC/G,OAAO,EAAE,kBAAkB,EAAE,MAAM,8CAA8C,CAAC;AAClF,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAClF,OAAO,EAAE,yBAAyB,EAAE,0BAA0B,EAAE,MAAM,iDAAiD,CAAC;AACxH,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAClF,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAC3E,OAAO,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAC;AACxE,YAAY,EAAE,cAAc,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAClF,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAChF,YAAY,EACR,KAAK,EACL,YAAY,EACZ,cAAc,EACd,UAAU,EACV,kBAAkB,EAClB,qBAAqB,GACxB,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -1,8 +1,10 @@
 import { WidgetHostProvider, useWidgetHost } from "./host/widget_host_provider.js";
 import { ActorCard } from "./components/actor_card/actor_card.js";
-import { ActorSearchDetail } from "./components/actor_search/actor_search_detail.js";
+import { WidgetLayout } from "./components/widget_layout/widget_layout.js";
 import { SkeletonBlock } from "./components/skeleton_block/skeleton_block.js";
+import { ACTOR_RUN_WIDGET_COLLAPSED_HEIGHT_PX, ActorRunWidget } from "./components/actor_run/actor_run_widget.js";
+import { LiveActorRunWidget } from "./components/actor_run/live_actor_run_widget.js";
+import { ActorSearchDetail } from "./components/actor_search/actor_search_detail.js";
 import { ActorSearchDetailSkeleton, ActorSearchResultsSkeleton } from "./components/actor_search/actor_search_skeleton.js";
-import { WidgetLayout } from "./components/widget_layout/widget_layout.js";
 import { ActorSearchWidget } from "./components/actor_search/actor_search_widget.js";
-export { ActorCard, ActorSearchDetail, ActorSearchDetailSkeleton, ActorSearchResultsSkeleton, ActorSearchWidget, SkeletonBlock, WidgetHostProvider, WidgetLayout, useWidgetHost };
+export { ACTOR_RUN_WIDGET_COLLAPSED_HEIGHT_PX, ActorCard, ActorRunWidget, ActorSearchDetail, ActorSearchDetailSkeleton, ActorSearchResultsSkeleton, ActorSearchWidget, LiveActorRunWidget, SkeletonBlock, WidgetHostProvider, WidgetLayout, useWidgetHost };

package/dist/test_ids.d.ts

@@ -1,4 +1,5 @@
 export { actorCardTestIds } from './components/actor_card/actor_card.test_ids.js';
+export { actorRunWidgetTestIds } from './components/actor_run/actor_run_widget.test_ids.js';
 export { actorSearchDetailTestIds } from './components/actor_search/actor_search_detail.test_ids.js';
 export { actorSearchSkeletonTestIds } from './components/actor_search/actor_search_skeleton.test_ids.js';
 export { actorSearchWidgetTestIds } from './components/actor_search/actor_search_widget.test_ids.js';

package/dist/test_ids.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"test_ids.d.ts","sourceRoot":"","sources":["../src/test_ids.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gDAAgD,CAAC;AAClF,OAAO,EAAE,wBAAwB,EAAE,MAAM,2DAA2D,CAAC;AACrG,OAAO,EAAE,0BAA0B,EAAE,MAAM,6DAA6D,CAAC;AACzG,OAAO,EAAE,wBAAwB,EAAE,MAAM,2DAA2D,CAAC"}
+{"version":3,"file":"test_ids.d.ts","sourceRoot":"","sources":["../src/test_ids.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gDAAgD,CAAC;AAClF,OAAO,EAAE,qBAAqB,EAAE,MAAM,qDAAqD,CAAC;AAC5F,OAAO,EAAE,wBAAwB,EAAE,MAAM,2DAA2D,CAAC;AACrG,OAAO,EAAE,0BAA0B,EAAE,MAAM,6DAA6D,CAAC;AACzG,OAAO,EAAE,wBAAwB,EAAE,MAAM,2DAA2D,CAAC"}

package/dist/test_ids.js

@@ -1,5 +1,6 @@
 import { actorCardTestIds } from "./components/actor_card/actor_card.test_ids.js";
+import { actorRunWidgetTestIds } from "./components/actor_run/actor_run_widget.test_ids.js";
 import { actorSearchDetailTestIds } from "./components/actor_search/actor_search_detail.test_ids.js";
 import { actorSearchSkeletonTestIds } from "./components/actor_search/actor_search_skeleton.test_ids.js";
 import { actorSearchWidgetTestIds } from "./components/actor_search/actor_search_widget.test_ids.js";
-export { actorCardTestIds, actorSearchDetailTestIds, actorSearchSkeletonTestIds, actorSearchWidgetTestIds };
+export { actorCardTestIds, actorRunWidgetTestIds, actorSearchDetailTestIds, actorSearchSkeletonTestIds, actorSearchWidgetTestIds };

package/dist/types.d.ts

@@ -56,4 +56,25 @@ export type SearchActorsOutput = {
 } | {
     actorDetails: ActorDetails;
 };
+/** One row of a run's default dataset. */
+export type PreviewItem = Record<string, unknown>;
+/** `structuredContent` of `call-actor` / `get-actor-run`, as far as the run widget reads it. */
+export type ActorRunOutput = {
+    runId?: string;
+    /** The run in Apify Console; the server sets it for Console sessions only. */
+    apifyConsoleUrl?: string;
+    /** `username/name`. */
+    actorName?: string;
+    status?: string;
+    startedAt?: string;
+    finishedAt?: string;
+    storages?: {
+        datasets?: {
+            default?: {
+                id: string;
+                itemCount?: number;
+            };
+        };
+    };
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,qBAAqB,GAAG;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,YAAY,EAAE,MAAM,CAAC;KACxB,EAAE,CAAC;IACJ,MAAM,CAAC,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,aAAa,CAAC,EAAE;YACZ,IAAI,EAAE,MAAM,CAAC;YACb,QAAQ,EAAE,MAAM,CAAC;SACpB,EAAE,CAAC;KACP,EAAE,CAAC;IACJ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,gBAAgB,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,iGAAiG;AACjG,MAAM,MAAM,KAAK,GAAG;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,2CAA2C;IAC3C,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,UAAU,CAAC;IAClB,kBAAkB,EAAE,qBAAqB,CAAC;CAC7C,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACvB,SAAS,EAAE,KAAK,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE;QACV,IAAI,EAAE,MAAM,CAAC;QACb,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;KACvC,CAAC;CACL,CAAC;AAEF,kGAAkG;AAClG,MAAM,MAAM,kBAAkB,GAAG;IAAE,YAAY,EAAE,KAAK,EAAE,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,YAAY,EAAE,YAAY,CAAA;CAAE,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,qBAAqB,GAAG;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,YAAY,EAAE,MAAM,CAAC;KACxB,EAAE,CAAC;IACJ,MAAM,CAAC,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,aAAa,CAAC,EAAE;YACZ,IAAI,EAAE,MAAM,CAAC;YACb,QAAQ,EAAE,MAAM,CAAC;SACpB,EAAE,CAAC;KACP,EAAE,CAAC;IACJ,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,gBAAgB,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,iGAAiG;AACjG,MAAM,MAAM,KAAK,GAAG;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,2CAA2C;IAC3C,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,UAAU,CAAC;IAClB,kBAAkB,EAAE,qBAAqB,CAAC;CAC7C,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACvB,SAAS,EAAE,KAAK,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE;QACV,IAAI,EAAE,MAAM,CAAC;QACb,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;KACvC,CAAC;CACL,CAAC;AAEF,kGAAkG;AAClG,MAAM,MAAM,kBAAkB,GAAG;IAAE,YAAY,EAAE,KAAK,EAAE,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,YAAY,EAAE,YAAY,CAAA;CAAE,CAAC;AAE3G,0CAA0C;AAC1C,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAElD,gGAAgG;AAChG,MAAM,MAAM,cAAc,GAAG;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE;QACP,QAAQ,CAAC,EAAE;YACP,OAAO,CAAC,EAAE;gBAAE,EAAE,EAAE,MAAM,CAAC;gBAAC,SAAS,CAAC,EAAE,MAAM,CAAA;aAAE,CAAC;SAChD,CAAC;KACL,CAAC;CACL,CAAC"}

package/dist/utils/formatting.d.ts

@@ -2,4 +2,11 @@ import { StructuredPricingInfo } from '../types';
 export declare function formatPricing(pricing: StructuredPricingInfo): string;
 export declare function formatNumber(value: number): string;
 export declare function formatDecimalNumber(value: number): string;
+/** Runs still in flight measure up to now. */
+export declare function formatDuration(startedAt: string, finishedAt?: string): string;
+/** `YYYY-MM-DD HH:mm` in the viewer's time zone. */
+export declare function formatTimestamp(dateString: string): string;
+export declare const capitalize: (value: string) => string;
+/** `python-example` → `Python Example`. */
+export declare function humanizeActorName(technicalName: string): string;
 //# sourceMappingURL=formatting.d.ts.map

package/dist/utils/formatting.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formatting.d.ts","sourceRoot":"","sources":["../../src/utils/formatting.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAyDtD,wBAAgB,aAAa,CAAC,OAAO,EAAE,qBAAqB,GAAG,MAAM,CAiBpE;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAIlD;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEzD"}
+{"version":3,"file":"formatting.d.ts","sourceRoot":"","sources":["../../src/utils/formatting.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAyDtD,wBAAgB,aAAa,CAAC,OAAO,EAAE,qBAAqB,GAAG,MAAM,CAiBpE;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAIlD;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEzD;AAED,8CAA8C;AAC9C,wBAAgB,cAAc,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAU7E;AAED,oDAAoD;AACpD,wBAAgB,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAI1D;AAED,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,WAAmD,CAAC;AAE5F,2CAA2C;AAC3C,wBAAgB,iBAAiB,CAAC,aAAa,EAAE,MAAM,GAAG,MAAM,CAE/D"}

package/dist/utils/formatting.js

@@ -58,5 +58,26 @@ function formatNumber(value) {
 function formatDecimalNumber(value) {
 	return Number.isInteger(value) ? value.toString() : value.toFixed(1);
 }
+/** Runs still in flight measure up to now. */
+function formatDuration(startedAt, finishedAt) {
+	const end = finishedAt ? new Date(finishedAt).getTime() : Date.now();
+	const seconds = Math.max(0, Math.floor((end - new Date(startedAt).getTime()) / 1e3));
+	const minutes = Math.floor(seconds / 60);
+	const hours = Math.floor(minutes / 60);
+	if (hours > 0) return `${hours}h ${minutes % 60}m ${seconds % 60}s`;
+	if (minutes > 0) return `${minutes}m ${seconds % 60}s`;
+	return `${seconds}s`;
+}
+/** `YYYY-MM-DD HH:mm` in the viewer's time zone. */
+function formatTimestamp(dateString) {
+	const date = new Date(dateString);
+	const pad = (value) => String(value).padStart(2, "0");
+	return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+var capitalize = (value) => value.charAt(0).toUpperCase() + value.slice(1);
+/** `python-example` → `Python Example`. */
+function humanizeActorName(technicalName) {
+	return technicalName.split("-").map(capitalize).join(" ");
+}
 //#endregion
-export { formatDecimalNumber, formatNumber, formatPricing };
+export { capitalize, formatDecimalNumber, formatDuration, formatNumber, formatPricing, formatTimestamp, humanizeActorName };

package/dist/utils/run_status.d.ts

@@ -0,0 +1,2 @@
+export declare const isRunFinished: (status: string | undefined) => boolean;
+//# sourceMappingURL=run_status.d.ts.map

package/dist/utils/run_status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"run_status.d.ts","sourceRoot":"","sources":["../../src/utils/run_status.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,GAAI,QAAQ,MAAM,GAAG,SAAS,YAA4D,CAAC"}

package/dist/utils/run_status.js

@@ -0,0 +1,10 @@
+//#region src/utils/run_status.ts
+var TERMINAL_RUN_STATUSES = new Set([
+	"SUCCEEDED",
+	"FAILED",
+	"ABORTED",
+	"TIMED-OUT"
+]);
+var isRunFinished = (status) => TERMINAL_RUN_STATUSES.has((status ?? "").toUpperCase());
+//#endregion
+export { isRunFinished };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/mcp-widgets",
-    "version": "0.2.30",
+    "version": "0.3.0",
     "description": "React components that render the output of Apify MCP tools (Actor search, Actor details)",
     "keywords": [
         "apify",
@@ -46,8 +46,8 @@
         "postpublish": "rimraf ./dist"
     },
     "dependencies": {
-        "@apify/ui-icons": "^1.53.0",
-        "@apify/ui-library": "^1.165.37",
+        "@apify/ui-icons": "^1.54.0",
+        "@apify/ui-library": "^1.166.1",
         "pluralize": "^8.0.0"
     },
     "peerDependencies": {
@@ -57,15 +57,17 @@
     },
     "devDependencies": {
         "@storybook/react-vite": "^10.3.5",
+        "@testing-library/react": "^16.3.2",
         "@types/pluralize": "0.0.33",
         "@types/react": "19.2.2",
         "@types/react-dom": "19.2.2",
         "@vitejs/plugin-react-swc": "^4.3.1",
+        "jsdom": "^29.1.1",
         "react": "19.2.0",
         "react-dom": "19.2.0",
         "styled-components": "^6.1.19",
         "vite": "^8.0.14",
         "vite-plugin-dts": "^5.0.1"
     },
-    "gitHead": "048ae8b5adce707866066e1442e3f71a533c79c9"
+    "gitHead": "97886d3a5a301bf1d8c907081bf752edaea290d6"
 }