@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/task-list/task-list.styles.ts

@@ -0,0 +1,82 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { borderWidth } from "../../styles/interaction.stylex";
+import { space } from "../../styles/spacing.stylex";
+
+// Steps line up with the header: marker under its icon, title under its text.
+export const taskListStyles = create({
+	detail: { color: colors.mutedContent, margin: 0 },
+	duration: {
+		color: colors.mutedContent,
+		fontVariantNumeric: "tabular-nums",
+		whiteSpace: "nowrap",
+	},
+	error: {
+		alignItems: "flex-start",
+		display: "flex",
+		flexWrap: "wrap",
+		gap: space["2"],
+		justifyContent: "space-between",
+	},
+	errorText: { color: colors.destructiveText, margin: 0 },
+	marker: {
+		alignItems: "center",
+		blockSize: space["6"],
+		color: colors.mutedContent,
+		display: "inline-flex",
+		flexShrink: 0,
+		inlineSize: space["4"],
+		justifyContent: "center",
+	},
+	markerComplete: { color: colors.successSolid },
+	markerError: { color: colors.destructiveText },
+	meta: { color: colors.mutedContent, fontVariantNumeric: "tabular-nums" },
+	step: {
+		alignItems: "flex-start",
+		display: "flex",
+		gap: space["2"],
+		minInlineSize: 0,
+		paddingBlock: space["1"],
+		position: "relative",
+	},
+	stepBody: {
+		display: "flex",
+		flexDirection: "column",
+		flexGrow: 1,
+		gap: space["1"],
+		minInlineSize: 0,
+		paddingBlock: 2,
+	},
+	// A hairline from this marker's box to the next one's, through the marker
+	// column's center. The icons' own padding leaves air at each end. It is
+	// drawn on ::after; ::before is where press surfaces paint their fill.
+	stepConnected: {
+		"::after": {
+			backgroundColor: colors.controlBorderStrong,
+			content: "''",
+			inlineSize: borderWidth.thin,
+			insetBlockEnd: `calc(-1 * (${space["2"]} + ${space["1"]}))`,
+			insetBlockStart: `calc(${space["1"]} + ${space["6"]})`,
+			insetInlineStart: `calc(${space["4"]} / 2 - ${borderWidth.thin}px / 2)`,
+			position: "absolute",
+		},
+	},
+	stepHead: {
+		alignItems: "baseline",
+		display: "flex",
+		gap: space["2"],
+		justifyContent: "space-between",
+		minInlineSize: 0,
+	},
+	steps: {
+		display: "flex",
+		flexDirection: "column",
+		gap: space["2"],
+		listStyle: "none",
+		margin: 0,
+		padding: 0,
+	},
+	// A plan is read in full, so long titles wrap instead of cutting off.
+	stepTitle: { minInlineSize: 0, overflowWrap: "anywhere" },
+	titlePending: { color: colors.mutedContent },
+});

package/src/components/task-list/task-list.tsx

@@ -0,0 +1,430 @@
+"use client";
+
+import { props } from "@stylexjs/stylex";
+import {
+	type ComponentPropsWithRef,
+	type RefCallback,
+	useCallback,
+	useState,
+} from "react";
+import type { Closed } from "../../closed";
+import {
+	IconAlertCircle,
+	IconChevronDown,
+	IconCircle,
+	IconCircleCheck,
+	IconListCheck,
+	IconRefresh,
+} from "../../icons";
+import { MotionScope, Pop, Rise } from "../../motion";
+import { typeRoles } from "../../styles/typography.styles";
+import { formatShortSeconds, useElapsed } from "../../use-elapsed";
+import { agentThinkingStyles } from "../agent-thinking/agent-thinking.styles";
+import { Button } from "../button/button";
+import {
+	Collapsible,
+	CollapsiblePanel,
+	CollapsibleTrigger,
+} from "../collapsible/collapsible";
+import { Spinner } from "../spinner/spinner";
+import { toolCallStyles } from "../tool-call/tool-call.styles";
+import { VisuallyHidden } from "../visually-hidden/visually-hidden";
+import { visuallyHiddenStyles } from "../visually-hidden/visually-hidden.styles";
+import { taskListStyles as styles } from "./task-list.styles";
+
+export type TaskListStepState = "complete" | "error" | "pending" | "running";
+
+export interface TaskListStep {
+	/** A second line, such as the data the step works on. */
+	detail?: string;
+	/** Seconds the step took, for a plan loaded from history. */
+	duration?: number;
+	/** Why the step failed, shown with Retry from here. */
+	error?: string;
+	id: string;
+	status: TaskListStepState;
+	title: string;
+}
+
+export type TaskListProps = Omit<
+	Closed<ComponentPropsWithRef<"div">>,
+	"children" | "data-slot" | "role" | "title"
+> & {
+	/** Asks before the agent starts, with Approve and Revise. */
+	approval?: boolean;
+	/** Seconds the whole plan took, for a plan loaded from history. */
+	duration?: number;
+	onApprove?: () => void;
+	/** Shows Retry from here under a failed step. */
+	onRetry?: (stepId: string) => void;
+	/** Asks the person what to change, such as by focusing the composer. */
+	onRevise?: () => void;
+	steps: readonly TaskListStep[];
+	/** The plan's goal, such as "Prepare the Q3 board update". */
+	title: string;
+};
+
+type Phase = "approval" | "complete" | "error" | "running";
+
+const STATE_TEXT: Record<TaskListStepState, string> = {
+	complete: "done",
+	error: "failed",
+	pending: "not started",
+	running: "in progress",
+};
+
+function phaseOf(steps: readonly TaskListStep[], approval: boolean): Phase {
+	if (approval) {
+		return "approval";
+	}
+	if (steps.some((step) => step.status === "error")) {
+		return "error";
+	}
+	if (steps.length > 0 && steps.every((step) => step.status === "complete")) {
+		return "complete";
+	}
+	return "running";
+}
+
+function metaOf(phase: Phase, steps: readonly TaskListStep[]) {
+	const total = steps.length;
+	if (phase === "approval") {
+		return `${total} ${total === 1 ? "step" : "steps"}`;
+	}
+	if (phase === "error") {
+		const failed = steps.findIndex((step) => step.status === "error");
+		return `Stopped at step ${failed + 1}`;
+	}
+	const done = steps.filter((step) => step.status === "complete").length;
+	return `${done} of ${total}`;
+}
+
+function Summary({
+	markEnd,
+	markStart,
+	phase,
+	seconds,
+	steps,
+	title,
+}: {
+	markEnd: RefCallback<HTMLElement>;
+	markStart: RefCallback<HTMLElement>;
+	phase: Phase;
+	seconds: number | undefined;
+	steps: readonly TaskListStep[];
+	title: string;
+}) {
+	if (phase !== "complete") {
+		return (
+			<span ref={phase === "running" ? markStart : undefined}>
+				<span {...props(phase === "running" && agentThinkingStyles.stage)}>
+					{title}
+				</span>{" "}
+				<span {...props(styles.meta, phase === "error" && styles.errorText)}>
+					· {metaOf(phase, steps)}
+				</span>
+			</span>
+		);
+	}
+	const total = steps.length;
+	return (
+		<span ref={markEnd}>
+			{title}{" "}
+			<span {...props(styles.meta)}>
+				· {total} {total === 1 ? "step" : "steps"}
+				{seconds === undefined ? null : ` · ${formatShortSeconds(seconds)}`}
+			</span>
+		</span>
+	);
+}
+
+// A running step starts the clock; a completed one stops it.
+function timingRef(
+	status: TaskListStepState,
+	markStart: RefCallback<HTMLElement>,
+	markEnd: RefCallback<HTMLElement>
+) {
+	if (status === "running") {
+		return markStart;
+	}
+	return status === "complete" ? markEnd : undefined;
+}
+
+// The step's mark. A change of status pops in; a step that loads or
+// remounts shows its mark still.
+function Marker({
+	markEnd,
+	markStart,
+	status,
+}: {
+	markEnd: RefCallback<HTMLElement>;
+	markStart: RefCallback<HTMLElement>;
+	status: TaskListStepState;
+}) {
+	const failed = status === "error";
+	const ended = status === "complete" || failed;
+	const Icon = failed ? IconAlertCircle : IconCircleCheck;
+	return (
+		<Pop
+			change={status}
+			look={[
+				styles.marker,
+				status === "complete" && styles.markerComplete,
+				failed && styles.markerError,
+			]}
+			ref={timingRef(status, markStart, markEnd)}
+		>
+			{status === "running" ? <Spinner aria-hidden="true" /> : null}
+			{status === "pending" ? (
+				<IconCircle aria-hidden="true" size={14} />
+			) : null}
+			{ended ? <Icon aria-hidden="true" size={16} /> : null}
+		</Pop>
+	);
+}
+
+function Duration({ seconds }: { seconds: number | undefined }) {
+	if (seconds === undefined) {
+		return null;
+	}
+	return (
+		<span {...props(typeRoles.caption, styles.duration)}>
+			{formatShortSeconds(seconds)}
+		</span>
+	);
+}
+
+function StepError({
+	error,
+	onRetry,
+	stepId,
+}: {
+	error: string | undefined;
+	onRetry: TaskListProps["onRetry"];
+	stepId: string;
+}) {
+	const retry = useCallback(() => onRetry?.(stepId), [onRetry, stepId]);
+	return (
+		<div data-slot="task-list-error" {...props(styles.error)}>
+			<p {...props(typeRoles.caption, styles.errorText)}>
+				{error ?? "This step failed."}
+			</p>
+			{onRetry ? (
+				<Button onClick={retry} size="xs" variant="outline">
+					<IconRefresh aria-hidden="true" size="1em" />
+					Retry from here
+				</Button>
+			) : null}
+		</div>
+	);
+}
+
+function Step({
+	connected,
+	onRetry,
+	step,
+}: {
+	connected: boolean;
+	onRetry: TaskListProps["onRetry"];
+	step: TaskListStep;
+}) {
+	const elapsed = useElapsed();
+	const seconds = step.duration ?? elapsed.seconds;
+	const ended = step.status === "complete" || step.status === "error";
+	return (
+		<li
+			aria-current={step.status === "running" ? "step" : undefined}
+			data-slot="task-list-step"
+			data-status={step.status}
+			{...props(styles.step, connected && styles.stepConnected)}
+		>
+			<Marker
+				markEnd={elapsed.markEnd}
+				markStart={elapsed.markStart}
+				status={step.status}
+			/>
+			<div {...props(styles.stepBody)}>
+				<div {...props(typeRoles.ui, styles.stepHead)}>
+					<span
+						{...props(
+							styles.stepTitle,
+							step.status === "pending" && styles.titlePending
+						)}
+					>
+						{step.title}
+						<VisuallyHidden>, {STATE_TEXT[step.status]}</VisuallyHidden>
+					</span>
+					{ended ? <Duration seconds={seconds} /> : null}
+				</div>
+				{step.detail ? (
+					<p {...props(typeRoles.caption, styles.detail)}>{step.detail}</p>
+				) : null}
+				{step.status === "error" ? (
+					<StepError error={step.error} onRetry={onRetry} stepId={step.id} />
+				) : null}
+			</div>
+		</li>
+	);
+}
+
+function Review({
+	onApprove,
+	onRevise,
+}: Pick<TaskListProps, "onApprove" | "onRevise">) {
+	return (
+		<div
+			data-slot="task-list-approval"
+			{...props(toolCallStyles.notice, toolCallStyles.noticeSlot)}
+		>
+			<p {...props(typeRoles.ui, toolCallStyles.noticeText)}>
+				Approve this plan to start.
+			</p>
+			<div {...props(toolCallStyles.noticeActions)}>
+				{onRevise ? (
+					<Button onClick={onRevise} size="sm" variant="outline">
+						Revise
+					</Button>
+				) : null}
+				{onApprove ? (
+					<Button onClick={onApprove} size="sm">
+						Approve
+					</Button>
+				) : null}
+			</div>
+		</div>
+	);
+}
+
+// One region, always present, announces each step as it starts and the end.
+function Announcement({
+	phase,
+	steps,
+	title,
+}: {
+	phase: Phase;
+	steps: readonly TaskListStep[];
+	title: string;
+}) {
+	const index = steps.findIndex(
+		(candidate) =>
+			candidate.status === "running" || candidate.status === "error"
+	);
+	const step = steps[index];
+	let message = "";
+	if (phase === "complete") {
+		message = `Done: ${title}`;
+	} else if (step && phase !== "approval") {
+		const verb = step.status === "error" ? "Failed" : "Step";
+		message = `${verb} ${index + 1} of ${steps.length}: ${step.title}`;
+	}
+	return (
+		<span
+			aria-live="polite"
+			data-slot="task-list-status"
+			role="status"
+			{...props(visuallyHiddenStyles.root)}
+		>
+			{message}
+		</span>
+	);
+}
+
+/**
+ * The steps an agent plans and how far it has got. It can ask before the
+ * agent starts; while steps run it stays open with the current one marked,
+ * and once every step is done it folds into a summary.
+ */
+export function TaskList({
+	approval = false,
+	duration,
+	onApprove,
+	onRetry,
+	onRevise,
+	ref: forwardedRef,
+	steps,
+	title,
+	...rest
+}: TaskListProps) {
+	const elapsed = useElapsed();
+	const phase = phaseOf(steps, approval);
+	// null until the reader opens or closes it themselves.
+	const [open, setOpen] = useState<boolean | null>(null);
+	for (const prop of ["className", "data-slot", "role", "style"]) {
+		Reflect.deleteProperty(rest, prop);
+	}
+	const working = phase === "running";
+	return (
+		<div
+			{...rest}
+			data-slot="task-list"
+			data-status={phase}
+			ref={forwardedRef}
+			{...props(toolCallStyles.root)}
+		>
+			<Announcement phase={phase} steps={steps} title={title} />
+			<MotionScope>
+				<Collapsible
+					onOpenChange={setOpen}
+					open={open === null ? phase !== "complete" : open}
+					render={<div {...props(toolCallStyles.clip)} />}
+				>
+					<CollapsibleTrigger
+						render={
+							<button
+								type="button"
+								{...props(typeRoles.ui, toolCallStyles.row)}
+							/>
+						}
+					>
+						<Pop
+							change={working ? "working" : "idle"}
+							look={toolCallStyles.icon}
+						>
+							{working ? (
+								<Spinner aria-hidden="true" />
+							) : (
+								<IconListCheck aria-hidden="true" size={16} />
+							)}
+						</Pop>
+						<Rise
+							change={phase === "complete" ? "complete" : "open"}
+							look={toolCallStyles.title}
+						>
+							<Summary
+								markEnd={elapsed.markEnd}
+								markStart={elapsed.markStart}
+								phase={phase}
+								seconds={duration ?? elapsed.seconds}
+								steps={steps}
+								title={title}
+							/>
+						</Rise>
+						<IconChevronDown
+							aria-hidden="true"
+							size={14}
+							{...props(toolCallStyles.chevron)}
+						/>
+					</CollapsibleTrigger>
+					<CollapsiblePanel>
+						<div {...props(toolCallStyles.panel, toolCallStyles.details)}>
+							<ol aria-label={title} {...props(styles.steps)}>
+								{steps.map((step, index) => (
+									<Step
+										connected={index < steps.length - 1}
+										key={step.id}
+										onRetry={onRetry}
+										step={step}
+									/>
+								))}
+							</ol>
+						</div>
+					</CollapsiblePanel>
+					{/* Outside the fold, so the question stays in view when folded. */}
+					{phase === "approval" ? (
+						<Review onApprove={onApprove} onRevise={onRevise} />
+					) : null}
+				</Collapsible>
+			</MotionScope>
+		</div>
+	);
+}

package/src/components/terminal/ansi.ts

@@ -0,0 +1,86 @@
+/** How a run of output looks: Mizen keeps red, bold, and dim. */
+export interface AnsiSpan {
+	bold: boolean;
+	muted: boolean;
+	red: boolean;
+	text: string;
+}
+
+interface AnsiState {
+	bold: boolean;
+	muted: boolean;
+	red: boolean;
+}
+
+const PLAIN: AnsiState = { bold: false, muted: false, red: false };
+
+// Escape sequences: CSI codes such as colors and cursor moves, and OSC
+// codes such as window titles and links. Built from character codes, so
+// the source holds no raw control characters.
+const ESC = String.fromCharCode(27);
+const BEL = String.fromCharCode(7);
+const CSI = `${ESC}\\[([0-9;?]*)([A-Za-z])`;
+const OSC = `${ESC}\\][^${BEL}${ESC}]*(?:${BEL}|${ESC}\\\\)`;
+const ESCAPE = new RegExp(`${CSI}|${OSC}`, "gu");
+
+// Each SGR code sets one part of the style. Hues other than red, and the
+// background colors, keep the text plain: Mizen has text-safe tokens only
+// for red and muted ink.
+const CODES: Record<number, Partial<AnsiState>> = {
+	0: PLAIN,
+	1: { bold: true },
+	2: { muted: true },
+	22: { bold: false, muted: false },
+	30: { muted: true, red: false },
+	31: { muted: false, red: true },
+	39: { muted: false, red: false },
+	90: { muted: true, red: false },
+	91: { muted: false, red: true },
+};
+
+function applyCodes(state: AnsiState, params: string) {
+	const codes = params === "" ? [0] : params.split(";").map(Number);
+	const next = { ...state };
+	for (const code of codes) {
+		Object.assign(next, CODES[code]);
+	}
+	return next;
+}
+
+/**
+ * A line that redraws itself with carriage returns, such as a progress
+ * bar, keeps only what it shows last.
+ */
+function settleRedraws(output: string) {
+	return output
+		.split("\n")
+		.map((line) => line.split("\r").findLast((part) => part !== "") ?? "")
+		.join("\n");
+}
+
+/** Output with its styles, ready to render as spans. */
+export function parseAnsi(output: string): AnsiSpan[] {
+	const text = settleRedraws(output);
+	const spans: AnsiSpan[] = [];
+	let state = PLAIN;
+	let from = 0;
+	for (const match of text.matchAll(ESCAPE)) {
+		if (match.index > from) {
+			spans.push({ ...state, text: text.slice(from, match.index) });
+		}
+		// Only "m" sequences style text; cursor moves and titles drop out.
+		if (match[2] === "m") {
+			state = applyCodes(state, match[1] ?? "");
+		}
+		from = match.index + match[0].length;
+	}
+	if (from < text.length) {
+		spans.push({ ...state, text: text.slice(from) });
+	}
+	return spans;
+}
+
+/** Output as plain text, for copying. */
+export function plainOutput(output: string) {
+	return settleRedraws(output).replace(ESCAPE, "");
+}

package/src/components/terminal/terminal.styles.ts

@@ -0,0 +1,20 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { space } from "../../styles/spacing.stylex";
+import { fontWeight, lineHeight } from "../../styles/typography.stylex";
+
+export const terminalStyles = create({
+	bold: { fontWeight: fontWeight.semibold },
+	command: { color: colors.content },
+	muted: { color: colors.mutedContent },
+	// Sixteen lines of output, then it scrolls; long lines scroll sideways.
+	output: {
+		maxBlockSize: `calc(${lineHeight["20"]} * 16 + ${space["3"]} * 2)`,
+		overflowY: "auto",
+		overscrollBehaviorBlock: "contain",
+	},
+	// A line with nothing to open: no hover fill, no pointer.
+	plainRow: { backgroundColor: "transparent", cursor: "default" },
+	red: { color: colors.destructiveText },
+	verb: { color: colors.content },
+});