pi-crew 0.1.49 → 0.2.0

package/src/ui/dashboard-panes/cancellation-pane.ts

@@ -1,43 +1,43 @@
-import type { TeamRunManifest, TeamTaskState } from "../../state/types.ts";
-
-export interface CancellationPaneOptions {
-	maxReasons?: number;
-}
-
-export function renderCancellationPane(manifest: TeamRunManifest, tasks: TeamTaskState[], opts: CancellationPaneOptions = {}): string[] {
-	const maxReasons = opts.maxReasons ?? 5;
-	if (manifest.status !== "cancelled" && manifest.status !== "blocked") {
-		const cancellingTasks = tasks.filter((t) => t.status === "cancelled");
-		if (cancellingTasks.length === 0) return ["Cancellation pane: no active cancellations"];
-	}
-
-	const lines: string[] = ["Cancellation pane"];
-
-	if (manifest.status === "cancelled") {
-		lines.push(`  Run status: cancelled`);
-	} else if (manifest.status === "blocked") {
-		lines.push(`  Run status: blocked`);
-	}
-
-	const cancelledTasks = tasks.filter((t) => t.status === "cancelled");
-	if (cancelledTasks.length > 0) {
-		lines.push(`  Cancelled tasks (${cancelledTasks.length}):`);
-		for (const task of cancelledTasks.slice(0, maxReasons)) {
-			const reason = task.error ?? "unknown";
-			lines.push(`    ✗ ${task.id}: ${reason}`);
-		}
-		if (cancelledTasks.length > maxReasons) {
-			lines.push(`    ... and ${cancelledTasks.length - maxReasons} more`);
-		}
-	}
-
-	if (manifest.policyDecisions?.length) {
-		const decisions = manifest.policyDecisions.slice(0, maxReasons);
-		lines.push(`  Policy decisions (${manifest.policyDecisions.length}):`);
-		for (const d of decisions) {
-			lines.push(`    ${d.action}: ${d.message}`);
-		}
-	}
-
-	return lines;
+import type { TeamRunManifest, TeamTaskState } from "../../state/types.ts";
+
+export interface CancellationPaneOptions {
+	maxReasons?: number;
+}
+
+export function renderCancellationPane(manifest: TeamRunManifest, tasks: TeamTaskState[], opts: CancellationPaneOptions = {}): string[] {
+	const maxReasons = opts.maxReasons ?? 5;
+	if (manifest.status !== "cancelled" && manifest.status !== "blocked") {
+		const cancellingTasks = tasks.filter((t) => t.status === "cancelled");
+		if (cancellingTasks.length === 0) return ["Cancellation pane: no active cancellations"];
+	}
+
+	const lines: string[] = ["Cancellation pane"];
+
+	if (manifest.status === "cancelled") {
+		lines.push(`  Run status: cancelled`);
+	} else if (manifest.status === "blocked") {
+		lines.push(`  Run status: blocked`);
+	}
+
+	const cancelledTasks = tasks.filter((t) => t.status === "cancelled");
+	if (cancelledTasks.length > 0) {
+		lines.push(`  Cancelled tasks (${cancelledTasks.length}):`);
+		for (const task of cancelledTasks.slice(0, maxReasons)) {
+			const reason = task.error ?? "unknown";
+			lines.push(`    ✗ ${task.id}: ${reason}`);
+		}
+		if (cancelledTasks.length > maxReasons) {
+			lines.push(`    ... and ${cancelledTasks.length - maxReasons} more`);
+		}
+	}
+
+	if (manifest.policyDecisions?.length) {
+		const decisions = manifest.policyDecisions.slice(0, maxReasons);
+		lines.push(`  Policy decisions (${manifest.policyDecisions.length}):`);
+		for (const d of decisions) {
+			lines.push(`    ${d.action}: ${d.message}`);
+		}
+	}
+
+	return lines;
 }

package/src/ui/dashboard-panes/capability-pane.ts

@@ -1,60 +1,60 @@
-import { buildCapabilityInventory } from "../../runtime/capability-inventory.ts";
-import type { PiTeamsConfig } from "../../config/config.ts";
-import type { CapabilityItem } from "../../runtime/capability-inventory.ts";
-
-export interface CapabilityPaneOptions {
-	config?: PiTeamsConfig;
-	filter?: string;
-}
-
-function kindIcon(kind: string): string {
-	switch (kind) {
-		case "team": return "👥";
-		case "workflow": return "📋";
-		case "agent": return "🤖";
-		case "skill": return "🔧";
-		case "tool": return "🛠";
-		case "runtime": return "⚙";
-		default: return "•";
-	}
-}
-
-function stateLabel(state: string): string {
-	switch (state) {
-		case "active": return "";
-		case "disabled": return " [DISABLED]";
-		case "shadowed": return " [SHADOWED]";
-		case "missing": return " [MISSING]";
-		default: return "";
-	}
-}
-
-export function renderCapabilityPane(cwd: string, opts: CapabilityPaneOptions = {}): string[] {
-	const inventory = buildCapabilityInventory(cwd, opts.config);
-	const filtered = opts.filter
-		? inventory.filter((item) => item.kind.includes(opts.filter!.toLowerCase()) || item.name.toLowerCase().includes(opts.filter!.toLowerCase()) || item.id.toLowerCase().includes(opts.filter!.toLowerCase()))
-		: inventory;
-
-	if (filtered.length === 0) return ["Capability pane: no items found"];
-
-	const byKind = new Map<string, CapabilityItem[]>();
-	for (const item of filtered) {
-		const group = byKind.get(item.kind) ?? [];
-		group.push(item);
-		byKind.set(item.kind, group);
-	}
-
-	const lines = [`Capability pane: ${filtered.length} item(s) (filter: ${opts.filter ?? "none"})`];
-	for (const [kind, items] of byKind) {
-		lines.push(`  ${kindIcon(kind)} ${kind} (${items.length}):`);
-		for (const item of items.slice(0, 10)) {
-			const icon = item.state === "active" ? "✓" : "✗";
-			lines.push(`    ${icon} ${item.name}${stateLabel(item.state)} [${item.source}]`);
-		}
-		if (items.length > 10) lines.push(`    ... and ${items.length - 10} more`);
-	}
-
-	const disabled = filtered.filter((i) => i.state === "disabled").length;
-	if (disabled > 0) lines.push(`  Disabled: ${disabled}`);
-	return lines;
+import { buildCapabilityInventory } from "../../runtime/capability-inventory.ts";
+import type { PiTeamsConfig } from "../../config/config.ts";
+import type { CapabilityItem } from "../../runtime/capability-inventory.ts";
+
+export interface CapabilityPaneOptions {
+	config?: PiTeamsConfig;
+	filter?: string;
+}
+
+function kindIcon(kind: string): string {
+	switch (kind) {
+		case "team": return "👥";
+		case "workflow": return "📋";
+		case "agent": return "🤖";
+		case "skill": return "🔧";
+		case "tool": return "🛠";
+		case "runtime": return "⚙";
+		default: return "•";
+	}
+}
+
+function stateLabel(state: string): string {
+	switch (state) {
+		case "active": return "";
+		case "disabled": return " [DISABLED]";
+		case "shadowed": return " [SHADOWED]";
+		case "missing": return " [MISSING]";
+		default: return "";
+	}
+}
+
+export function renderCapabilityPane(cwd: string, opts: CapabilityPaneOptions = {}): string[] {
+	const inventory = buildCapabilityInventory(cwd, opts.config);
+	const filtered = opts.filter
+		? inventory.filter((item) => item.kind.includes(opts.filter!.toLowerCase()) || item.name.toLowerCase().includes(opts.filter!.toLowerCase()) || item.id.toLowerCase().includes(opts.filter!.toLowerCase()))
+		: inventory;
+
+	if (filtered.length === 0) return ["Capability pane: no items found"];
+
+	const byKind = new Map<string, CapabilityItem[]>();
+	for (const item of filtered) {
+		const group = byKind.get(item.kind) ?? [];
+		group.push(item);
+		byKind.set(item.kind, group);
+	}
+
+	const lines = [`Capability pane: ${filtered.length} item(s) (filter: ${opts.filter ?? "none"})`];
+	for (const [kind, items] of byKind) {
+		lines.push(`  ${kindIcon(kind)} ${kind} (${items.length}):`);
+		for (const item of items.slice(0, 10)) {
+			const icon = item.state === "active" ? "✓" : "✗";
+			lines.push(`    ${icon} ${item.name}${stateLabel(item.state)} [${item.source}]`);
+		}
+		if (items.length > 10) lines.push(`    ... and ${items.length - 10} more`);
+	}
+
+	const disabled = filtered.filter((i) => i.state === "disabled").length;
+	if (disabled > 0) lines.push(`  Disabled: ${disabled}`);
+	return lines;
 }

package/src/ui/dashboard-panes/mailbox-pane.ts

@@ -1,35 +1,35 @@
-import type { RunUiSnapshot } from "../snapshot-types.ts";
-
-export function renderMailboxPane(snapshot: RunUiSnapshot | undefined): string[] {
-	if (!snapshot) return ["Mailbox pane: snapshot unavailable"];
-	const mailbox = snapshot.mailbox;
-	const approx = mailbox.approximate ? " · approximate (tail)" : "";
-	const lines: string[] = [
-		`Mailbox pane: inbox unread=${mailbox.inboxUnread} · outbox pending=${mailbox.outboxPending} · attention=${mailbox.needsAttention}${approx}`,
-	];
-	// Kind-separated breakdown
-	const kindParts: string[] = [];
-	const steer = mailbox.steerUnread ?? 0;
-	const followUp = mailbox.followUpUnread ?? 0;
-	const response = mailbox.responseUnread ?? 0;
-	const message = mailbox.messageUnread ?? 0;
-	if (steer > 0) kindParts.push(`steer=${steer}`);
-	if (followUp > 0) kindParts.push(`follow-up=${followUp}`);
-	if (response > 0) kindParts.push(`response=${response}`);
-	if (message > 0) kindParts.push(`message=${message}`);
-	if (kindParts.length > 0) {
-		lines.push(`  Breakdown: ${kindParts.join(" · ")}`);
-		if (steer > 0) {
-			lines.push("  ⚠ Urgent: steering messages require immediate attention.");
-		}
-		if (followUp > 0) {
-			lines.push(`  📋 ${followUp} follow-up(s) pending review.`);
-		}
-	}
-	if (mailbox.needsAttention > 0) {
-		lines.push("Needs attention: press Enter for detail · A ack · N nudge · C compose · X ack all.");
-	} else {
-		lines.push("No mailbox items need attention. Press Enter for detail or C compose.");
-	}
-	return lines;
-}
+import type { RunUiSnapshot } from "../snapshot-types.ts";
+
+export function renderMailboxPane(snapshot: RunUiSnapshot | undefined): string[] {
+	if (!snapshot) return ["Mailbox pane: snapshot unavailable"];
+	const mailbox = snapshot.mailbox;
+	const approx = mailbox.approximate ? " · approximate (tail)" : "";
+	const lines: string[] = [
+		`Mailbox pane: inbox unread=${mailbox.inboxUnread} · outbox pending=${mailbox.outboxPending} · attention=${mailbox.needsAttention}${approx}`,
+	];
+	// Kind-separated breakdown
+	const kindParts: string[] = [];
+	const steer = mailbox.steerUnread ?? 0;
+	const followUp = mailbox.followUpUnread ?? 0;
+	const response = mailbox.responseUnread ?? 0;
+	const message = mailbox.messageUnread ?? 0;
+	if (steer > 0) kindParts.push(`steer=${steer}`);
+	if (followUp > 0) kindParts.push(`follow-up=${followUp}`);
+	if (response > 0) kindParts.push(`response=${response}`);
+	if (message > 0) kindParts.push(`message=${message}`);
+	if (kindParts.length > 0) {
+		lines.push(`  Breakdown: ${kindParts.join(" · ")}`);
+		if (steer > 0) {
+			lines.push("  ⚠ Urgent: steering messages require immediate attention.");
+		}
+		if (followUp > 0) {
+			lines.push(`  📋 ${followUp} follow-up(s) pending review.`);
+		}
+	}
+	if (mailbox.needsAttention > 0) {
+		lines.push("Needs attention: press Enter for detail · A ack · N nudge · C compose · X ack all.");
+	} else {
+		lines.push("No mailbox items need attention. Press Enter for detail or C compose.");
+	}
+	return lines;
+}

package/src/ui/dashboard-panes/metrics-pane.ts

@@ -1,34 +1,34 @@
-import type { MetricRegistry } from "../../observability/metric-registry.ts";
-import type { HistogramPoint, MetricLabels, MetricPoint } from "../../observability/metrics-primitives.ts";
-import type { RunUiSnapshot } from "../snapshot-types.ts";
-
-export interface MetricsPaneOptions {
-	registry?: MetricRegistry;
-	maxCounters?: number;
-}
-
-function labelsText(labels: MetricLabels): string {
-	const entries = Object.entries(labels);
-	return entries.length ? `{${entries.map(([key, value]) => `${key}=${value}`).join(",")}}` : "";
-}
-
-function isHistogramPoint(point: MetricPoint | HistogramPoint): point is HistogramPoint {
-	return "quantiles" in point;
-}
-
-export function renderMetricsPane(_snapshot: RunUiSnapshot | undefined, opts: MetricsPaneOptions = {}): string[] {
-	if (!opts.registry) return ["Metrics pane: registry unavailable"];
-	const snapshots = opts.registry.snapshot();
-	if (!snapshots.length) return ["Metrics pane: no metrics recorded"];
-	const lines = ["Metrics pane: top metrics"];
-	for (const snapshot of snapshots.slice(0, opts.maxCounters ?? 10)) {
-		const first = snapshot.values[0];
-		if (!first) {
-			lines.push(`${snapshot.name}: empty`);
-			continue;
-		}
-		if (isHistogramPoint(first)) lines.push(`${snapshot.name}${labelsText(first.labels)} count=${first.count} p95=${Number.isFinite(first.quantiles.p95) ? Math.round(first.quantiles.p95) : "n/a"}`);
-		else lines.push(`${snapshot.name}${labelsText(first.labels)} ${first.value}`);
-	}
-	return lines;
-}
+import type { MetricRegistry } from "../../observability/metric-registry.ts";
+import type { HistogramPoint, MetricLabels, MetricPoint } from "../../observability/metrics-primitives.ts";
+import type { RunUiSnapshot } from "../snapshot-types.ts";
+
+export interface MetricsPaneOptions {
+	registry?: MetricRegistry;
+	maxCounters?: number;
+}
+
+function labelsText(labels: MetricLabels): string {
+	const entries = Object.entries(labels);
+	return entries.length ? `{${entries.map(([key, value]) => `${key}=${value}`).join(",")}}` : "";
+}
+
+function isHistogramPoint(point: MetricPoint | HistogramPoint): point is HistogramPoint {
+	return "quantiles" in point;
+}
+
+export function renderMetricsPane(_snapshot: RunUiSnapshot | undefined, opts: MetricsPaneOptions = {}): string[] {
+	if (!opts.registry) return ["Metrics pane: registry unavailable"];
+	const snapshots = opts.registry.snapshot();
+	if (!snapshots.length) return ["Metrics pane: no metrics recorded"];
+	const lines = ["Metrics pane: top metrics"];
+	for (const snapshot of snapshots.slice(0, opts.maxCounters ?? 10)) {
+		const first = snapshot.values[0];
+		if (!first) {
+			lines.push(`${snapshot.name}: empty`);
+			continue;
+		}
+		if (isHistogramPoint(first)) lines.push(`${snapshot.name}${labelsText(first.labels)} count=${first.count} p95=${Number.isFinite(first.quantiles.p95) ? Math.round(first.quantiles.p95) : "n/a"}`);
+		else lines.push(`${snapshot.name}${labelsText(first.labels)} ${first.value}`);
+	}
+	return lines;
+}

package/src/ui/dashboard-panes/progress-pane.ts

@@ -1,4 +1,5 @@
 import type { RunUiSnapshot } from "../snapshot-types.ts";
+import { computePhaseProgress, formatPhaseProgressLine } from "../../runtime/phase-progress.ts";
 
 export function renderProgressPane(snapshot: RunUiSnapshot | undefined): string[] {
 	if (!snapshot) return ["Progress pane: snapshot unavailable"];
@@ -6,8 +7,18 @@ export function renderProgressPane(snapshot: RunUiSnapshot | undefined): string[
 	const groupJoins = snapshot.groupJoins ?? [];
 	const groupJoinLines = groupJoins.length ? groupJoins.map((item) => `group join ${item.partial ? "partial" : "completed"}: ${item.requestId} ack=${item.ack}`) : ["group joins: none"];
 	const cancellationLine = snapshot.cancellationReason ? [`cancelled: reason=${snapshot.cancellationReason}`] : [];
+	const runProgress = computePhaseProgress(snapshot.tasks);
+	const phaseLines = runProgress.phases.length > 0
+		? runProgress.phases.map((p) => {
+			const done = p.completed + p.failed;
+			const status = p.running > 0 ? "running" : p.queued > 0 ? "queued" : done >= p.total ? "done" : "waiting";
+			return `  Phase ${p.index + 1} ${p.phase}: ${p.percentage}% (${done}/${p.total}) [${status}]`;
+		})
+		: [];
+	const phaseHeader = phaseLines.length > 0 ? [formatPhaseProgressLine(runProgress), ...phaseLines] : [];
 	return [
 		`Progress pane: ${progress.completed}/${progress.total} completed · running=${progress.running} queued=${progress.queued} failed=${progress.failed}`,
+		...phaseHeader,
 		...cancellationLine,
 		...groupJoinLines,
 		...snapshot.recentEvents.slice(-10).map((event) => {

package/src/ui/dynamic-border.ts

@@ -1,25 +1,25 @@
-import type { CrewTheme } from "./theme-adapter.ts";
-
-export interface DynamicCrewBorderOptions {
-	color?: (value: string) => string;
-	char?: string;
-}
-
-export class DynamicCrewBorder {
-	private readonly theme: CrewTheme;
-	private readonly color?: (value: string) => string;
-	private readonly char: string;
-
-	constructor(theme: CrewTheme, options: DynamicCrewBorderOptions = {}) {
-		this.theme = theme;
-		this.color = options.color;
-		this.char = options.char && options.char.length > 0 ? options.char : "─";
-	}
-
-	render(width: number): string[] {
-		const line = this.char.repeat(Math.max(0, width));
-		return [this.color ? this.color(line) : this.theme.fg("border", line)];
-	}
-
-	invalidate(): void {}
-}
+import type { CrewTheme } from "./theme-adapter.ts";
+
+export interface DynamicCrewBorderOptions {
+	color?: (value: string) => string;
+	char?: string;
+}
+
+export class DynamicCrewBorder {
+	private readonly theme: CrewTheme;
+	private readonly color?: (value: string) => string;
+	private readonly char: string;
+
+	constructor(theme: CrewTheme, options: DynamicCrewBorderOptions = {}) {
+		this.theme = theme;
+		this.color = options.color;
+		this.char = options.char && options.char.length > 0 ? options.char : "─";
+	}
+
+	render(width: number): string[] {
+		const line = this.char.repeat(Math.max(0, width));
+		return [this.color ? this.color(line) : this.theme.fg("border", line)];
+	}
+
+	invalidate(): void {}
+}

package/src/ui/layout-primitives.ts

@@ -1,106 +1,106 @@
-import { pad, wrapHard } from "../utils/visual.ts";
-
-export interface RenderableComponent {
-	invalidate(): void;
-	render(width: number): string[];
-}
-
-export class Container implements RenderableComponent {
-	private children: RenderableComponent[] = [];
-
-	addChild(child: RenderableComponent): void {
-		this.children.push(child);
-	}
-
-	clear(): void {
-		this.children = [];
-	}
-
-	invalidate(): void {
-		for (const child of this.children) {
-			child.invalidate();
-		}
-	}
-
-	render(width: number): string[] {
-		const lines: string[] = [];
-		for (const child of this.children) {
-			lines.push(...child.render(width));
-		}
-		return lines;
-	}
-}
-
-export class Box extends Container {
-	private readonly paddingX: number;
-	private readonly paddingY: number;
-
-	constructor(paddingX = 0, paddingY = 0) {
-		super();
-		this.paddingX = paddingX;
-		this.paddingY = paddingY;
-	}
-
-	render(width: number): string[] {
-		const innerWidth = Math.max(1, width - this.paddingX * 2);
-		const rows = super.render(innerWidth);
-		const paddedRows: string[] = [];
-		const left = " ".repeat(this.paddingX);
-		const right = " ".repeat(this.paddingX);
-		for (const row of rows) {
-			paddedRows.push(pad(`${left}${row}${right}`, width));
-		}
-		const emptyRow = pad("", width);
-		if (this.paddingY <= 0) return paddedRows;
-		if (this.paddingY > 0) {
-			const topAndBottom = Array.from({ length: this.paddingY }, () => emptyRow);
-			return [...topAndBottom, ...paddedRows, ...topAndBottom];
-		}
-		return paddedRows;
-	}
-}
-
-export class Text implements RenderableComponent {
-	private text: string;
-	private cachedWidth = 0;
-	private cachedResult: string[] = [];
-
-	constructor(text = "") {
-		this.text = text;
-	}
-
-	setText(text: string): void {
-		if (text === this.text) return;
-		this.text = text;
-		this.invalidate();
-	}
-
-	invalidate(): void {
-		this.cachedWidth = 0;
-		this.cachedResult = [];
-	}
-
-	render(width: number): string[] {
-		if (this.cachedWidth === width) return this.cachedResult;
-		const wrapped = wrapHard(this.text, Math.max(1, width));
-		const lines = wrapped.length ? wrapped : [""];
-		this.cachedWidth = width;
-		this.cachedResult = lines.map((line) => pad(line, width));
-		return this.cachedResult;
-	}
-}
-
-export class Spacer implements RenderableComponent {
-	private readonly rows: number;
-
-	constructor(rows = 0) {
-		this.rows = rows;
-	}
-
-	render(width: number): string[] {
-		if (this.rows <= 0) return [];
-		return Array.from({ length: Math.max(0, this.rows) }, () => pad("", width));
-	}
-
-	invalidate(): void {}
-}
+import { pad, wrapHard } from "../utils/visual.ts";
+
+export interface RenderableComponent {
+	invalidate(): void;
+	render(width: number): string[];
+}
+
+export class Container implements RenderableComponent {
+	private children: RenderableComponent[] = [];
+
+	addChild(child: RenderableComponent): void {
+		this.children.push(child);
+	}
+
+	clear(): void {
+		this.children = [];
+	}
+
+	invalidate(): void {
+		for (const child of this.children) {
+			child.invalidate();
+		}
+	}
+
+	render(width: number): string[] {
+		const lines: string[] = [];
+		for (const child of this.children) {
+			lines.push(...child.render(width));
+		}
+		return lines;
+	}
+}
+
+export class Box extends Container {
+	private readonly paddingX: number;
+	private readonly paddingY: number;
+
+	constructor(paddingX = 0, paddingY = 0) {
+		super();
+		this.paddingX = paddingX;
+		this.paddingY = paddingY;
+	}
+
+	render(width: number): string[] {
+		const innerWidth = Math.max(1, width - this.paddingX * 2);
+		const rows = super.render(innerWidth);
+		const paddedRows: string[] = [];
+		const left = " ".repeat(this.paddingX);
+		const right = " ".repeat(this.paddingX);
+		for (const row of rows) {
+			paddedRows.push(pad(`${left}${row}${right}`, width));
+		}
+		const emptyRow = pad("", width);
+		if (this.paddingY <= 0) return paddedRows;
+		if (this.paddingY > 0) {
+			const topAndBottom = Array.from({ length: this.paddingY }, () => emptyRow);
+			return [...topAndBottom, ...paddedRows, ...topAndBottom];
+		}
+		return paddedRows;
+	}
+}
+
+export class Text implements RenderableComponent {
+	private text: string;
+	private cachedWidth = 0;
+	private cachedResult: string[] = [];
+
+	constructor(text = "") {
+		this.text = text;
+	}
+
+	setText(text: string): void {
+		if (text === this.text) return;
+		this.text = text;
+		this.invalidate();
+	}
+
+	invalidate(): void {
+		this.cachedWidth = 0;
+		this.cachedResult = [];
+	}
+
+	render(width: number): string[] {
+		if (this.cachedWidth === width) return this.cachedResult;
+		const wrapped = wrapHard(this.text, Math.max(1, width));
+		const lines = wrapped.length ? wrapped : [""];
+		this.cachedWidth = width;
+		this.cachedResult = lines.map((line) => pad(line, width));
+		return this.cachedResult;
+	}
+}
+
+export class Spacer implements RenderableComponent {
+	private readonly rows: number;
+
+	constructor(rows = 0) {
+		this.rows = rows;
+	}
+
+	render(width: number): string[] {
+		if (this.rows <= 0) return [];
+		return Array.from({ length: Math.max(0, this.rows) }, () => pad("", width));
+	}
+
+	invalidate(): void {}
+}