@neta-art/cohub 10.0.0 → 11.1.0

package/dist/board/render/renderers/image-card-renderer.js

@@ -1,6 +1,6 @@
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
-import { Container, Graphics, Sprite, Texture } from "pixi.js";
+import { Container, Graphics, Rectangle, Sprite, Texture } from "pixi.js";
 //#region src/board/render/renderers/image-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();
 const RADIUS = 2;
@@ -15,6 +15,39 @@ function layoutContain(sprite, width, height) {
 	sprite.x = (width - sprite.width) / 2;
 	sprite.y = (height - sprite.height) / 2;
 }
+function cropRect(crop) {
+	if (!crop) return null;
+	const w = Math.min(crop.w, 1 - crop.x);
+	const h = Math.min(crop.h, 1 - crop.y);
+	return w > 0 && h > 0 ? {
+		x: crop.x,
+		y: crop.y,
+		w,
+		h
+	} : null;
+}
+function showTexture(parts, texture, crop) {
+	const rect = texture ? cropRect(crop) : null;
+	const key = rect ? `${rect.x}|${rect.y}|${rect.w}|${rect.h}` : "";
+	const previous = parts.cropped;
+	const reusable = previous && parts.cropSource === texture && parts.cropKey === key;
+	if (texture && rect && !reusable) {
+		const { frame } = texture;
+		const width = Math.max(1, frame.width * rect.w);
+		const height = Math.max(1, frame.height * rect.h);
+		const x = frame.x + Math.min(frame.width * rect.x, frame.width - width);
+		const y = frame.y + Math.min(frame.height * rect.y, frame.height - height);
+		parts.cropped = new Texture({
+			source: texture.source,
+			frame: new Rectangle(x, y, width, height)
+		});
+	} else if (!rect) parts.cropped = null;
+	parts.cropSource = rect ? texture : null;
+	parts.cropKey = key;
+	const display = parts.cropped ?? texture ?? Texture.EMPTY;
+	if (parts.sprite.texture !== display) parts.sprite.texture = display;
+	if (previous && previous !== parts.cropped) previous.destroy(false);
+}
 function sync(container, item, context) {
 	const parts = partsByContainer.get(container);
 	if (!parts) return;
@@ -33,12 +66,13 @@ function sync(container, item, context) {
 		selected,
 		hovered,
 		texId,
+		JSON.stringify(item.props.crop ?? null),
 		failed,
 		context.colorScheme
 	].join("|");
 	if (sig === parts.sig) return;
 	parts.sig = sig;
-	if (texture && parts.sprite.texture !== texture) parts.sprite.texture = texture;
+	showTexture(parts, texture, item.props.crop);
 	parts.sprite.visible = Boolean(texture);
 	if (texture) layoutContain(parts.sprite, width, height);
 	parts.placeholder.clear();
@@ -98,7 +132,10 @@ const imageCardRenderer = {
 			root,
 			sprite,
 			placeholder,
-			sig: ""
+			sig: "",
+			cropped: null,
+			cropSource: null,
+			cropKey: ""
 		});
 		if (item.type === "image") sync(root, item, context);
 		return root;
@@ -118,7 +155,9 @@ const imageCardRenderer = {
 		});
 	},
 	destroy: (container) => {
-		partsByContainer.get(container)?.root.destroy({ children: true });
+		const parts = partsByContainer.get(container);
+		parts?.root.destroy({ children: true });
+		parts?.cropped?.destroy(false);
 		partsByContainer.delete(container);
 	}
 };

package/dist/board/render/renderers/shape-card-renderer.js

@@ -1,10 +1,10 @@
 import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
 import { worldPoint } from "../../model/geometry.js";
+import { itemAlpha, itemColor } from "../palette.js";
 import { syncTextResolution, syncTextWrapWidth, textResolutionForZoom } from "../text-resolution.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
-import { itemColor } from "../palette.js";
-import { dashPattern, tracePolyline, trimPolyline } from "../stroke.js";
+import { dashPattern, roundRectPoints, tracePolyline, trimPolyline } from "../stroke.js";
 import { Container, Graphics, GraphicsPath, Matrix, Text } from "pixi.js";
 //#region src/board/render/renderers/shape-card-renderer.ts
 const DEFAULT_ROUNDED_RADIUS = 8;
@@ -86,27 +86,7 @@ function outlinePoints(geometry, width, height, radius) {
 			p(0, height),
 			p(width / 2, 0)
 		];
-		default: {
-			const r = Math.min(radius, width / 2, height / 2);
-			if (r <= 0) return [
-				p(0, 0),
-				p(width, 0),
-				p(width, height),
-				p(0, height),
-				p(0, 0)
-			];
-			const corner = (cx, cy, from) => Array.from({ length: 9 }, (_, index) => {
-				const angle = from + index / 8 * (Math.PI / 2);
-				return p(cx + Math.cos(angle) * r, cy + Math.sin(angle) * r);
-			});
-			return [
-				...corner(width - r, r, -Math.PI / 2),
-				...corner(width - r, height - r, 0),
-				...corner(r, height - r, Math.PI / 2),
-				...corner(r, r, Math.PI),
-				p(width - r, 0)
-			];
-		}
+		default: return roundRectPoints(width, height, radius);
 	}
 }
 function sync(container, item, context) {
@@ -119,7 +99,8 @@ function sync(container, item, context) {
 	const hovered = context.hoveredId === item.id;
 	const stroke = itemColor(context, style.stroke ?? style.fill, "brand");
 	const fill = itemColor(context, style.fill ?? style.stroke, "brand", "fill");
-	const fillOpacity = style.fillOpacity ?? (style.fill ? 1 : 0);
+	const fillOpacity = (style.fillOpacity ?? (style.fill ? 1 : 0)) * itemAlpha(context, style.fill ?? style.stroke);
+	const strokeAlpha = itemAlpha(context, style.stroke ?? style.fill);
 	const strokeWidth = style.strokeWidth ?? 1.75;
 	syncTextResolution(parts.label, parts, context.zoom);
 	const visualSig = [
@@ -132,6 +113,7 @@ function sync(container, item, context) {
 		fill,
 		fillOpacity,
 		stroke,
+		strokeAlpha,
 		strokeWidth,
 		style.dash,
 		style.radius,
@@ -159,12 +141,13 @@ function sync(container, item, context) {
 			parts.shape.stroke({
 				color: hovered && !selected ? context.palette.muted : stroke,
 				width: lineWidth,
-				alpha: selected ? 1 : hovered ? .95 : .85,
+				alpha: (selected ? 1 : hovered ? .95 : .85) * strokeAlpha,
 				cap: partial || pattern ? "round" : "butt",
 				join: "round"
 			});
 		}
 	}
+	parts.label.alpha = itemAlpha(context, style.stroke);
 	const label = itemColor(context, style.stroke, "neutral", "label");
 	const textSig = [
 		props.text,
@@ -226,9 +209,9 @@ const shapeCardRenderer = {
 		if (item.type !== "shape") return;
 		drawFarPlate(graphics, item.frame, {
 			fill: itemColor(context, item.style.fill ?? item.style.stroke, "brand", "fill"),
-			fillAlpha: Math.max(.18, item.style.fillOpacity ?? 0),
+			fillAlpha: Math.max(.18, item.style.fillOpacity ?? 0) * itemAlpha(context, item.style.fill ?? item.style.stroke),
 			accent: itemColor(context, item.style.stroke, "brand"),
-			accentAlpha: .9
+			accentAlpha: .9 * itemAlpha(context, item.style.stroke)
 		});
 	},
 	destroy: (container) => {

package/dist/board/render/renderers/task-card-renderer.d.ts

@@ -1,6 +1,7 @@
 import { BoardCardRenderer } from "./board-renderer-registry.js";
 //#region src/board/render/renderers/task-card-renderer.d.ts
 declare const TASK_CARD_FULL_DETAIL_ZOOM = 0.55;
+declare function formatTaskElapsed(ms: number): string;
 declare function containTaskPreviewRect(width: number, height: number, imageWidth: number, imageHeight: number): {
   x: number;
   y: number;
@@ -9,4 +10,4 @@ declare function containTaskPreviewRect(width: number, height: number, imageWidt
 };
 declare const taskCardRenderer: BoardCardRenderer;
 //#endregion
-export { TASK_CARD_FULL_DETAIL_ZOOM, containTaskPreviewRect, taskCardRenderer };
+export { TASK_CARD_FULL_DETAIL_ZOOM, containTaskPreviewRect, formatTaskElapsed, taskCardRenderer };

package/dist/board/render/renderers/task-card-renderer.js

@@ -1,17 +1,21 @@
 import { BOARD_FONT_STACK, BOARD_MONO_FONT_STACK } from "../../../protocol/dist/board-constants.js";
-import { featuredTaskArtifact } from "../../model/task.js";
+import { featuredTaskArtifact } from "../../../protocol/dist/board-task.js";
 import { drawAudioWaveform } from "../audio-waveform.js";
 import { syncTextResolution, textResolutionForZoom } from "../text-resolution.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
 import { fitTextToLines } from "./file-card-renderer.js";
-import { Container, Graphics, Sprite, Text } from "pixi.js";
+import { Container, FillGradient, Graphics, Sprite, Text } from "pixi.js";
 //#region src/board/render/renderers/task-card-renderer.ts
 const RADIUS = 4;
 const PADDING = 12;
 const META_HEIGHT = 28;
 const TASK_CARD_FULL_DETAIL_ZOOM = .55;
 const PLAY_BADGE_RADIUS = 15;
+const SHIMMER_PERIOD_MS = 1600;
+const SHIMMER_FRAME_MS = 33;
+const REVEAL_MS = 180;
+const SECOND = 1e3;
 const partsByContainer = /* @__PURE__ */ new WeakMap();
 function previewKindFor(artifact) {
 	if (!artifact) return "empty";
@@ -19,36 +23,51 @@ function previewKindFor(artifact) {
 	if (artifact.type === "audio") return artifact.previewUrl ? "texture" : "waveform";
 	return artifact.textExcerpt ? "text" : "empty";
 }
-function stateSurfaceFor(item, kind, hasTexture, previewFailed) {
+function liveStatus(item, context) {
+	const { snapshot } = item.props;
+	const live = snapshot.status === "completed" ? null : context.taskRun(item.props.taskRunId);
+	const liveStart = Date.parse(live?.startedAt ?? "");
+	const working = live?.status === "pending" || live?.status === "running";
+	const adopt = snapshot.status === "failed" ? working && liveStart > Date.parse(snapshot.updatedAt ?? "") : live?.status === "running" || live?.status === "pending" && snapshot.status === "pending";
+	const status = adopt && live ? live.status : snapshot.status;
+	const started = adopt ? liveStart : Date.parse(snapshot.startedAt ?? "");
+	return {
+		status,
+		startedAt: Number.isFinite(started) ? started : null
+	};
+}
+function stateSurfaceFor(status, kind, hasTexture, previewFailed) {
 	if (kind === "texture" && !hasTexture) {
-		if (item.props.snapshot.status === "failed") return "failed";
+		if (status === "failed") return "failed";
 		return previewFailed ? "unavailable" : "media-loading";
 	}
 	if (kind !== "empty") return null;
-	if (item.props.snapshot.status === "failed") return "failed";
-	if (item.props.snapshot.status === "running") return "generating";
-	if (item.props.snapshot.status === "pending") return "queued";
+	if (status === "failed") return "failed";
+	if (status === "running") return "generating";
+	if (status === "pending") return "queued";
 	return "empty";
 }
-function stateLabel(surface) {
+function stateLabel(surface, context) {
 	switch (surface) {
-		case "generating": return "Generating";
-		case "queued": return "Queued";
-		case "failed": return "Failed";
-		case "unavailable": return "Preview unavailable";
-		case "empty": return "No preview";
+		case "generating": return context.labels.generating;
+		case "queued": return context.labels.queued;
+		case "failed": return context.labels.failed;
+		case "unavailable": return context.labels.previewUnavailable;
+		case "empty": return context.labels.noPreview;
 		default: return "";
 	}
 }
-function statusColor(item, context) {
-	if (item.props.snapshot.status === "failed") return context.colors.rose.stroke;
-	if (item.props.snapshot.status === "running") return context.colors.brand.stroke;
+function statusColor(status, context) {
+	if (status === "failed") return context.colors.rose.stroke;
+	if (status === "running") return context.colors.brand.stroke;
 	return context.colors.neutral.stroke;
 }
-function metadata(item) {
-	const { artifactCount, artifacts } = item.props.snapshot;
-	const extra = artifactCount > artifacts.length ? `${artifacts.length}/${artifactCount}` : artifactCount > 1 ? `+${artifactCount - 1}` : null;
-	return [item.props.snapshot.model, extra].filter(Boolean).join(" · ");
+function formatTaskElapsed(ms) {
+	const total = Math.max(0, Math.floor(ms / SECOND));
+	const hours = Math.floor(total / 3600);
+	const minutes = Math.floor(total % 3600 / 60);
+	const seconds = String(total % 60).padStart(2, "0");
+	return hours > 0 ? `${hours}:${String(minutes).padStart(2, "0")}:${seconds}` : `${minutes}:${seconds}`;
 }
 function containTaskPreviewRect(width, height, imageWidth, imageHeight) {
 	if (width <= 0 || height <= 0 || imageWidth <= 0 || imageHeight <= 0) return {
@@ -150,15 +169,83 @@ function drawFailedBadge(graphics, width, color, context) {
 		cap: "round"
 	});
 }
+const shimmerGradients = /* @__PURE__ */ new Map();
+function shimmerGradient(color) {
+	let gradient = shimmerGradients.get(color);
+	if (!gradient) {
+		const rgb = `${color >> 16 & 255}, ${color >> 8 & 255}, ${color & 255}`;
+		gradient = new FillGradient({
+			type: "linear",
+			start: {
+				x: 0,
+				y: 0
+			},
+			end: {
+				x: 1,
+				y: 0
+			},
+			textureSpace: "local",
+			colorStops: [
+				{
+					offset: 0,
+					color: `rgba(${rgb}, 0)`
+				},
+				{
+					offset: .5,
+					color: `rgba(${rgb}, 0.07)`
+				},
+				{
+					offset: 1,
+					color: `rgba(${rgb}, 0)`
+				}
+			]
+		});
+		shimmerGradients.set(color, gradient);
+	}
+	return gradient;
+}
+function drawShimmerBand(graphics, width, height, color) {
+	const band = Math.max(48, width * .45);
+	graphics.clear().rect(-band, 0, band, height).fill(shimmerGradient(color));
+}
+function advance(parts, clock) {
+	const { motion } = parts;
+	let next = null;
+	if (motion.shimmer) {
+		const travel = motion.width + parts.shimmer.width;
+		parts.shimmer.x = clock % SHIMMER_PERIOD_MS / SHIMMER_PERIOD_MS * travel;
+		next = SHIMMER_FRAME_MS;
+	}
+	if (motion.startedAt !== null) {
+		const elapsedMs = Date.now() - motion.startedAt;
+		const elapsed = formatTaskElapsed(elapsedMs);
+		if (elapsed !== motion.elapsed) {
+			motion.elapsed = elapsed;
+			parts.body.text = `${motion.label} · ${elapsed}`;
+		}
+		const untilNextSecond = SECOND - Math.max(0, elapsedMs) % SECOND;
+		next = next === null ? untilNextSecond : Math.min(next, untilNextSecond);
+	}
+	if (motion.revealFrom !== null) {
+		const progress = Math.min(1, (clock - motion.revealFrom) / REVEAL_MS);
+		parts.preview.alpha = progress * (2 - progress);
+		if (progress >= 1) motion.revealFrom = null;
+		else next = 0;
+	}
+	return next;
+}
 function sync(container, item, context) {
 	const parts = partsByContainer.get(container);
 	if (!parts) return;
 	positionShell(parts.root, item);
 	const { width, height } = item.frame;
+	const { snapshot } = item.props;
+	const { status, startedAt } = liveStatus(item, context);
 	const selected = context.selectedIds.has(item.id);
 	const hovered = context.hoveredId === item.id;
 	const full = context.zoom >= TASK_CARD_FULL_DETAIL_ZOOM;
-	const color = statusColor(item, context);
+	const working = status === "pending" || status === "running";
+	const color = statusColor(status, context);
 	const key = context.assetKey(item);
 	if (key !== parts.assetKey) {
 		if (parts.assetKey) context.releaseTexture(parts.assetKey);
@@ -167,20 +254,58 @@ function sync(container, item, context) {
 	}
 	const texture = key ? context.getTexture(key) : null;
 	const previewFailed = Boolean(key && !texture && context.hasError(key));
-	const artifact = featuredTaskArtifact(item.props.snapshot.artifacts);
+	const artifact = featuredTaskArtifact(snapshot.artifacts);
 	const kind = previewKindFor(artifact);
-	const surface = stateSurfaceFor(item, kind, Boolean(texture), previewFailed);
+	const surface = stateSurfaceFor(status, kind, Boolean(texture), previewFailed);
 	const frame = {
 		x: 1,
 		y: 1,
 		width: Math.max(1, width - 2),
 		height: Math.max(1, height - 2)
 	};
-	const metaText = artifact ? metadata(item) : "";
+	const metaText = artifact || working ? snapshot.model ?? "" : "";
 	const showMeta = full && Boolean(metaText);
-	const failedWithOutput = item.props.snapshot.status === "failed" && kind !== "empty";
+	const failedWithOutput = status === "failed" && kind !== "empty";
+	const count = artifact && snapshot.artifactCount > 1 ? String(snapshot.artifactCount) : "";
+	const showBadge = full && Boolean(count);
+	const label = stateLabel(surface, context);
+	const counting = full && working && startedAt !== null && surface !== null;
+	const elapsed = counting ? formatTaskElapsed(Date.now() - startedAt) : "";
+	const detailText = !full || !surface ? "" : status === "failed" ? snapshot.errorExcerpt ?? "" : working ? snapshot.promptExcerpt ?? "" : "";
+	const textArtifact = kind === "text" && artifact?.type === "text";
+	const bodyText = textArtifact ? artifact.textExcerpt : counting ? `${label} · ${elapsed}` : label;
 	syncTextResolution(parts.body, parts, context.zoom);
+	syncTextResolution(parts.detail, parts, context.zoom);
 	syncTextResolution(parts.meta, parts, context.zoom);
+	syncTextResolution(parts.badge, parts, context.zoom);
+	const textSig = [
+		counting ? label : bodyText,
+		detailText,
+		metaText,
+		count,
+		kind,
+		surface,
+		full,
+		width,
+		height,
+		color,
+		context.palette.text,
+		context.palette.muted
+	].join("|");
+	if (textSig !== parts.textSig) {
+		parts.textSig = textSig;
+		const wrap = Math.max(24, width - 24);
+		parts.body.style.fill = surface === "failed" ? color : context.palette.text;
+		parts.body.anchor.set(textArtifact ? 0 : .5, 0);
+		fitTextToLines(parts.body, bodyText, textArtifact ? Math.max(1, Math.floor((height - 24 - (showMeta ? META_HEIGHT : 0)) / 16)) : 1, wrap);
+		parts.detail.style.fill = context.palette.muted;
+		fitTextToLines(parts.detail, detailText, height - 24 > 120 ? 2 : 1, Math.min(wrap, 360));
+		parts.meta.style.fill = context.palette.text;
+		fitTextToLines(parts.meta, metaText, 1, wrap);
+		parts.badge.style.fill = context.palette.text;
+		if (parts.badge.text !== count) parts.badge.text = count;
+	}
+	const badgeWidth = Math.max(22, parts.badge.width + 12);
 	const visualSig = [
 		width,
 		height,
@@ -191,6 +316,7 @@ function sync(container, item, context) {
 		kind,
 		surface,
 		showMeta,
+		showBadge && badgeWidth,
 		failedWithOutput,
 		artifact?.type ?? "none",
 		artifact?.id ?? "none",
@@ -199,7 +325,8 @@ function sync(container, item, context) {
 		context.palette.surface,
 		context.palette.hover,
 		context.palette.border,
-		context.palette.bg
+		context.palette.bg,
+		context.palette.text
 	].join("|");
 	if (visualSig !== parts.visualSig) {
 		parts.visualSig = visualSig;
@@ -217,6 +344,8 @@ function sync(container, item, context) {
 			alpha: .5
 		});
 		parts.previewMask.clear().rect(frame.x, frame.y, frame.width, frame.height).fill({ color: 16777215 });
+		drawShimmerBand(parts.shimmer, frame.width, frame.height, context.palette.text);
+		parts.shimmer.y = frame.y;
 		parts.previewArt.clear();
 		if (kind === "waveform") {
 			const bottomInset = showMeta ? META_HEIGHT : 0;
@@ -229,47 +358,52 @@ function sync(container, item, context) {
 		}
 		if (full && (artifact?.type === "audio" || artifact?.type === "video" && texture)) drawPlayBadge(parts.previewArt, frame, context);
 		if (surface) {
-			const markY = frame.y + frame.height / 2 - (full && stateLabel(surface) ? 10 : 0);
+			const markY = frame.y + frame.height / 2 - (full && label ? 18 : 0);
 			drawStateMark(parts.previewArt, surface, frame.x + frame.width / 2, markY, surface === "failed" ? color : context.colors.neutral.stroke);
 		}
 		if (showMeta) parts.previewArt.rect(frame.x, frame.y + frame.height - META_HEIGHT, frame.width, META_HEIGHT).fill({
 			color: context.palette.bg,
 			alpha: .68
 		});
+		if (showBadge) parts.previewArt.roundRect(width - badgeWidth - 8, 8, badgeWidth, 20, 10).fill({
+			color: context.palette.bg,
+			alpha: .72
+		});
 		if (failedWithOutput) drawFailedBadge(parts.previewArt, width, color, context);
 	}
-	parts.preview.visible = kind === "texture" && Boolean(texture);
-	if (parts.preview.visible && texture) {
+	const showPreview = kind === "texture" && Boolean(texture);
+	const revealKey = showPreview ? `${artifact?.id}:${texture?.uid}` : null;
+	const sameCard = parts.motion.itemId === item.id;
+	parts.motion.itemId = item.id;
+	if (revealKey !== parts.motion.revealKey || !sameCard) {
+		const appearing = sameCard && parts.motion.revealKey === null && revealKey !== null;
+		parts.motion.revealKey = revealKey;
+		parts.motion.revealFrom = appearing && !context.reducedMotion ? performance.now() : null;
+		parts.preview.alpha = parts.motion.revealFrom === null ? 1 : 0;
+	}
+	parts.preview.visible = showPreview;
+	if (showPreview && texture) {
 		if (parts.preview.texture !== texture) parts.preview.texture = texture;
 		const fitted = containTaskPreviewRect(frame.width, frame.height, texture.width, texture.height);
 		parts.preview.position.set(frame.x + fitted.x, frame.y + fitted.y);
 		parts.preview.width = fitted.width;
 		parts.preview.height = fitted.height;
 	}
-	const bodyText = kind === "text" && artifact?.type === "text" ? artifact.textExcerpt : stateLabel(surface);
-	const textSig = [
-		bodyText,
-		metaText,
-		kind,
-		surface,
-		full,
-		width,
-		height,
-		context.palette.text,
-		context.palette.muted
-	].join("|");
-	if (textSig !== parts.textSig) {
-		parts.textSig = textSig;
-		parts.body.style.fill = surface === "failed" ? color : context.palette.text;
-		fitTextToLines(parts.body, bodyText, kind === "text" ? Math.max(1, Math.floor((height - 24 - (showMeta ? META_HEIGHT : 0)) / 16)) : 1, Math.max(24, width - 24));
-		parts.meta.style.fill = context.palette.text;
-		fitTextToLines(parts.meta, metaText, 1, Math.max(24, width - 24));
-	}
 	parts.body.visible = full && Boolean(bodyText);
+	parts.detail.visible = full && Boolean(detailText);
 	parts.meta.visible = showMeta;
-	if (kind === "text") parts.body.position.set(PADDING, PADDING);
-	else parts.body.position.set(Math.max(PADDING, (width - parts.body.width) / 2), height / 2 + 10);
+	parts.badge.visible = showBadge;
+	if (textArtifact) parts.body.position.set(PADDING, PADDING);
+	else parts.body.position.set(width / 2, height / 2 + 2);
+	parts.detail.position.set(width / 2, height / 2 + 2 + parts.body.height + 4);
 	parts.meta.position.set(PADDING, height - META_HEIGHT + 7);
+	parts.badge.position.set(width - 8 - badgeWidth / 2, 18);
+	parts.motion.width = frame.width;
+	parts.motion.shimmer = full && working && kind !== "texture" && !context.reducedMotion;
+	parts.shimmer.visible = parts.motion.shimmer;
+	parts.motion.startedAt = counting ? startedAt : null;
+	parts.motion.label = label;
+	parts.motion.elapsed = elapsed;
 }
 const taskCardRenderer = {
 	id: "task-card",
@@ -281,35 +415,32 @@ const taskCardRenderer = {
 		const previewBg = new Graphics();
 		const preview = new Sprite();
 		const previewMask = new Graphics();
+		const shimmer = new Graphics();
 		const previewArt = new Graphics();
 		const resolution = textResolutionForZoom(context.zoom);
-		const body = new Text({
-			text: "",
-			style: {
-				fontFamily: BOARD_FONT_STACK,
-				fontSize: 11.5,
-				fontWeight: "500",
-				wordWrap: true,
-				breakWords: true
-			},
-			resolution,
-			roundPixels: true
-		});
-		const meta = new Text({
+		const text = (fontFamily, fontSize, fontWeight) => new Text({
 			text: "",
 			style: {
-				fontFamily: BOARD_MONO_FONT_STACK,
-				fontSize: 10,
-				fontWeight: "500",
+				fontFamily,
+				fontSize,
+				fontWeight,
 				wordWrap: true,
 				breakWords: true
 			},
 			resolution,
 			roundPixels: true
 		});
+		const body = text(BOARD_FONT_STACK, 11.5, "500");
+		const detail = text(BOARD_FONT_STACK, 10.5, "400");
+		const meta = text(BOARD_MONO_FONT_STACK, 10, "500");
+		const badge = text(BOARD_MONO_FONT_STACK, 10, "500");
+		badge.style.wordWrap = false;
+		badge.anchor.set(.5);
+		detail.anchor.set(.5, 0);
+		detail.style.align = "center";
 		preview.mask = previewMask;
 		root.mask = clip;
-		root.addChild(plate, clip, previewBg, preview, previewMask, previewArt, body, meta);
+		root.addChild(plate, clip, previewBg, shimmer, preview, previewMask, previewArt, body, detail, meta, badge);
 		partsByContainer.set(root, {
 			root,
 			plate,
@@ -317,13 +448,26 @@ const taskCardRenderer = {
 			previewBg,
 			preview,
 			previewMask,
+			shimmer,
 			previewArt,
+			badge,
 			body,
+			detail,
 			meta,
 			assetKey: null,
 			visualSig: "",
 			textSig: "",
-			resolution
+			resolution,
+			motion: {
+				itemId: "",
+				width: 0,
+				shimmer: false,
+				startedAt: null,
+				label: "",
+				elapsed: "",
+				revealFrom: null,
+				revealKey: null
+			}
 		});
 		if (item.type === "task") sync(root, item, context);
 		return root;
@@ -331,14 +475,19 @@ const taskCardRenderer = {
 	update: (container, item, context) => {
 		if (item.type === "task") sync(container, item, context);
 	},
+	tick: (container, clock) => {
+		const parts = partsByContainer.get(container);
+		return parts ? advance(parts, clock) : null;
+	},
 	renderFar: (graphics, item, context) => {
 		if (item.type !== "task") return;
-		const active = item.props.snapshot.status === "failed" || item.props.snapshot.status === "running" || item.props.snapshot.status === "pending";
+		const { status } = liveStatus(item, context);
+		const active = status === "failed" || status === "running" || status === "pending";
 		drawFarPlate(graphics, item.frame, {
 			fill: context.palette.surface,
 			fillAlpha: .82,
 			...active ? {
-				accent: statusColor(item, context),
+				accent: statusColor(status, context),
 				accentAlpha: .9
 			} : {}
 		});
@@ -351,4 +500,4 @@ const taskCardRenderer = {
 	}
 };
 //#endregion
-export { TASK_CARD_FULL_DETAIL_ZOOM, containTaskPreviewRect, taskCardRenderer };
+export { TASK_CARD_FULL_DETAIL_ZOOM, containTaskPreviewRect, formatTaskElapsed, taskCardRenderer };

package/dist/board/render/renderers/text-card-renderer.js

@@ -1,10 +1,10 @@
 import { layoutBoardText } from "../../../protocol/dist/board-layout.js";
 import { boardFontFamily } from "../../model/text-metrics.js";
+import { itemAlpha, itemColor } from "../palette.js";
+import { BOARD_FONT_STACKS } from "../text-measurement.js";
 import { syncTextResolution, textResolutionForZoom } from "../text-resolution.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
-import { itemColor } from "../palette.js";
-import { BOARD_FONT_STACKS } from "../text-measurement.js";
 import { Container, Graphics, Text } from "pixi.js";
 //#region src/board/render/renderers/text-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();
@@ -33,6 +33,8 @@ function sync(container, item, context) {
 	parts.body.anchor.set(anchorX, 0);
 	parts.body.position.set(item.frame.width * anchorX, 0);
 	syncTextResolution(parts.body, parts, context.zoom * Math.max(1, previewScale));
+	parts.body.alpha = itemAlpha(context, item.style.fill);
+	parts.caret.alpha = parts.body.alpha;
 	const ink = itemColor(context, item.style.fill, "neutral");
 	const text = revealed(props.text, props.reveal);
 	const contentSig = [
@@ -93,7 +95,7 @@ const textCardRenderer = {
 		if (item.type !== "text") return;
 		drawFarPlate(graphics, item.frame, {
 			fill: itemColor(context, item.style.fill, "neutral"),
-			fillAlpha: .35
+			fillAlpha: .35 * itemAlpha(context, item.style.fill)
 		});
 	},
 	destroy: (container) => {

package/dist/board/render/renderers/unknown-card-renderer.js

@@ -54,6 +54,7 @@ const unknownCardRenderer = {
 	create: (item, context) => {
 		const root = new Container();
 		const box = new Graphics();
+		box.context.batchMode = "batch";
 		const resolution = textResolutionForZoom(context.zoom);
 		const label = new Text({
 			text: "",