finch-session-board 0.0.0-stage → 0.1.2

package/dist/canvas.js

@@ -0,0 +1,1083 @@
+(function() {
+	// finchapp/shared/utils/env.js
+	/** 开发档为 "yes"（build.js --dev 与 dev.js 注入），正式档为 "no"；字符串而非布尔，注入缺失时能一眼看出没钉上。 */
+	function isDev() {
+		return false;
+	}
+	// finchapp/shared/utils/time.js
+	const MONTH_SECONDS = 2592e3;
+	/**
+	* 毫秒时长只说最大那个单位，不做「1分钟-5秒」这种叠加。
+	* 一行放得下比精确更要紧，秒级的零头在列表上看不出意义。
+	* 单位用口语完整的写法（分钟、小时），不缩成单字。
+	* @param {number} ms 时长毫秒；非数字与负数都当 0
+	* @returns {string} 例如 "1天"、"3小时"、"15分钟"
+	*/
+	function formatDuration(ms) {
+		const total = Math.max(0, Math.floor((Number(ms) || 0) / 1e3));
+		const months = Math.floor(total / MONTH_SECONDS);
+		if (months > 0) return `${months}月`;
+		const days = Math.floor(total / 86400);
+		if (days > 0) return `${days}天`;
+		const hours = Math.floor(total / 3600);
+		if (hours > 0) return `${hours}小时`;
+		const minutes = Math.floor(total / 60);
+		if (minutes > 0) return `${minutes}分钟`;
+		return `${total}秒`;
+	}
+	// finchapp/sessionBoard/src/icons.js
+	/**
+	* 色调→颜色。色调只表达"要不要紧"：
+	* 蓝=只读工作，紫=会改文件，玫红=会动系统，橙=等你动手，黄绿=系统在自己处理，绿红=两种收场。
+	* 橙与黄绿差 60 度：等你确认要抢视线，重试和打断不该跟它抢。
+	*/
+	const TONE_COLORS = {
+		gray: "#6b7280",
+		blue: "#3b82f6",
+		purple: "#8b5cf6",
+		rose: "#ec4899",
+		orange: "#f97316",
+		lime: "#84cc16",
+		green: "#22c55e",
+		red: "#ef4444"
+	};
+	/** 圆角矩形路径，已在当前路径上追加，调用方自己决定 fill 还是 stroke。 */
+	function roundRect(ctx, x, y, w, h, r) {
+		const radius = Math.min(r, w / 2, h / 2);
+		ctx.beginPath();
+		ctx.moveTo(x + radius, y);
+		ctx.lineTo(x + w - radius, y);
+		ctx.quadraticCurveTo(x + w, y, x + w, y + radius);
+		ctx.lineTo(x + w, y + h - radius);
+		ctx.quadraticCurveTo(x + w, y + h, x + w - radius, y + h);
+		ctx.lineTo(x + radius, y + h);
+		ctx.quadraticCurveTo(x, y + h, x, y + h - radius);
+		ctx.lineTo(x, y + radius);
+		ctx.quadraticCurveTo(x, y, x + radius, y);
+		ctx.closePath();
+	}
+	/**
+	* 按图标名画一个图标，中心落在 (cx, cy)。
+	* 每个图标的坐标都按 14px 的框手写死，不随调用方缩放——这样所有图标的视觉重量才一致。
+	* 每个图标的画法都贴着"一眼能认"，而不是"像素级还原"——同一行右侧还有文字兜底。
+	* 线条色与填充色都用调用方传进来的 ctx.strokeStyle / fillStyle。
+	* @param {CanvasRenderingContext2D} ctx 画布上下文
+	* @param {string} name 图标名，见 src/sessions.js 的 PHASE_ICON 与 TOOL_RULES
+	* @param {number} cx 中心横坐标
+	* @param {number} cy 中心纵坐标
+	*/
+	function paintIcon(ctx, name, cx, cy) {
+		ctx.beginPath();
+		ctx.lineWidth = 2;
+		ctx.lineCap = "round";
+		ctx.lineJoin = "round";
+		switch (name) {
+			case "hourglass":
+				ctx.moveTo(cx - 4, cy - 5);
+				ctx.lineTo(cx + 4, cy - 5);
+				ctx.lineTo(cx, cy - .5);
+				ctx.closePath();
+				ctx.fill();
+				ctx.beginPath();
+				ctx.moveTo(cx - 4, cy + 5);
+				ctx.lineTo(cx + 4, cy + 5);
+				ctx.lineTo(cx, cy + .5);
+				ctx.closePath();
+				ctx.fill();
+				return;
+			case "bubble":
+				ctx.lineWidth = 2;
+				roundRect(ctx, cx - 5.2, cy - 4.6, 10.4, 8.2, 2.4);
+				ctx.stroke();
+				ctx.beginPath();
+				ctx.moveTo(cx - 2.6, cy + 3.4);
+				ctx.lineTo(cx - 3.8, cy + 6);
+				ctx.lineTo(cx - .4, cy + 3.4);
+				ctx.stroke();
+				return;
+			case "file":
+				ctx.moveTo(cx - 4, cy - 5);
+				ctx.lineTo(cx + 1.4, cy - 5);
+				ctx.lineTo(cx + 4, cy - 2.6);
+				ctx.lineTo(cx + 4, cy + 5);
+				ctx.lineTo(cx - 4, cy + 5);
+				ctx.closePath();
+				ctx.stroke();
+				return;
+			case "magnifier":
+				ctx.arc(cx - .8, cy - 1.4, 3.9, 0, Math.PI * 2);
+				ctx.stroke();
+				ctx.beginPath();
+				ctx.moveTo(cx + 2, cy + 1.6);
+				ctx.lineTo(cx + 5.4, cy + 5);
+				ctx.stroke();
+				return;
+			case "globe":
+				ctx.arc(cx, cy, 5.2, 0, Math.PI * 2);
+				ctx.stroke();
+				ctx.beginPath();
+				ctx.moveTo(cx - 5.2, cy);
+				ctx.lineTo(cx + 5.2, cy);
+				ctx.stroke();
+				ctx.beginPath();
+				ctx.ellipse(cx, cy, 2.2, 5.2, 0, 0, Math.PI * 2);
+				ctx.stroke();
+				return;
+			case "pencil":
+				ctx.moveTo(cx - 6, cy + 5.5);
+				ctx.lineTo(cx - 3.6, cy + 1);
+				ctx.lineTo(cx + 2.4, cy - 5);
+				ctx.lineTo(cx + 5.2, cy - 2.2);
+				ctx.lineTo(cx - .9, cy + 3.9);
+				ctx.closePath();
+				ctx.fill();
+				return;
+			case "terminal":
+				ctx.moveTo(cx - 5, cy - 3.5);
+				ctx.lineTo(cx - 1.5, cy);
+				ctx.lineTo(cx - 5, cy + 3.5);
+				ctx.stroke();
+				ctx.beginPath();
+				ctx.moveTo(cx - .5, cy + 3.5);
+				ctx.lineTo(cx + 5, cy + 3.5);
+				ctx.stroke();
+				return;
+			case "branch":
+				ctx.beginPath();
+				ctx.moveTo(cx - 2.5, cy + 4);
+				ctx.lineTo(cx - 2.5, cy - 1.5);
+				ctx.stroke();
+				ctx.beginPath();
+				ctx.moveTo(cx - 2.5, cy + .8);
+				ctx.quadraticCurveTo(cx - 2.5, cy - 4, cx + 2.6, cy - 4);
+				ctx.stroke();
+				ctx.beginPath();
+				ctx.arc(cx - 2.5, cy + 4.6, 1.6, 0, Math.PI * 2);
+				ctx.fill();
+				ctx.beginPath();
+				ctx.arc(cx + 2.6, cy - 4, 1.6, 0, Math.PI * 2);
+				ctx.fill();
+				return;
+			case "check":
+				ctx.lineWidth = 2.4;
+				ctx.beginPath();
+				ctx.moveTo(cx - 4.4, cy + .2);
+				ctx.lineTo(cx - 1.4, cy + 3.6);
+				ctx.lineTo(cx + 4.6, cy - 3.8);
+				ctx.stroke();
+				return;
+			case "cross":
+				ctx.lineWidth = 2.4;
+				ctx.beginPath();
+				ctx.moveTo(cx - 4.2, cy - 4.2);
+				ctx.lineTo(cx + 4.2, cy + 4.2);
+				ctx.moveTo(cx + 4.2, cy - 4.2);
+				ctx.lineTo(cx - 4.2, cy + 4.2);
+				ctx.stroke();
+				return;
+			case "bang":
+				ctx.lineWidth = 2.4;
+				ctx.beginPath();
+				ctx.moveTo(cx, cy - 5);
+				ctx.lineTo(cx, cy + 1.3);
+				ctx.stroke();
+				ctx.beginPath();
+				ctx.arc(cx, cy + 4.4, 1.3, 0, Math.PI * 2);
+				ctx.fill();
+				return;
+			case "loop":
+				ctx.lineWidth = 2.2;
+				ctx.beginPath();
+				ctx.arc(cx, cy, 4.6, Math.PI * .35, Math.PI * 1.85);
+				ctx.stroke();
+				ctx.beginPath();
+				ctx.moveTo(cx + 4.2, cy - 4);
+				ctx.lineTo(cx + 1.2, cy - 3.3);
+				ctx.lineTo(cx + 3.3, cy - .9);
+				ctx.closePath();
+				ctx.fill();
+				return;
+			case "stop":
+				roundRect(ctx, cx - 4.8, cy - 4.8, 9.6, 9.6, 2.2);
+				ctx.fill();
+				return;
+			case "slashbox":
+				ctx.lineWidth = 2;
+				roundRect(ctx, cx - 5, cy - 5, 10, 10, 2);
+				ctx.stroke();
+				ctx.beginPath();
+				ctx.moveTo(cx - 3.6, cy + 3.6);
+				ctx.lineTo(cx + 3.6, cy - 3.6);
+				ctx.stroke();
+				return;
+			case "collapse":
+				ctx.lineWidth = 2;
+				ctx.beginPath();
+				ctx.moveTo(cx - 4.6, cy - 3.4);
+				ctx.lineTo(cx - 2, cy);
+				ctx.lineTo(cx - 4.6, cy + 3.4);
+				ctx.stroke();
+				ctx.beginPath();
+				ctx.moveTo(cx + 4.6, cy - 3.4);
+				ctx.lineTo(cx + 2, cy);
+				ctx.lineTo(cx + 4.6, cy + 3.4);
+				ctx.stroke();
+				return;
+			default:
+				ctx.lineWidth = 2;
+				ctx.beginPath();
+				ctx.arc(cx, cy, 5, 0, Math.PI * 2);
+				ctx.stroke();
+		}
+	}
+	/**
+	* 图标目录：预览面板按这个顺序铺图标墙。
+	* 每一项的色调就是它在列表里会用的颜色，所以预览看到的是真实配色。
+	*/
+	const ICON_CATALOG = [
+		{
+			name: "dot",
+			label: "空闲",
+			tone: "gray"
+		},
+		{
+			name: "hourglass",
+			label: "思考中",
+			tone: "blue"
+		},
+		{
+			name: "bubble",
+			label: "回答中",
+			tone: "blue"
+		},
+		{
+			name: "file",
+			label: "读取",
+			tone: "blue"
+		},
+		{
+			name: "magnifier",
+			label: "查找",
+			tone: "blue"
+		},
+		{
+			name: "globe",
+			label: "联网",
+			tone: "blue"
+		},
+		{
+			name: "branch",
+			label: "调度",
+			tone: "blue"
+		},
+		{
+			name: "collapse",
+			label: "压缩",
+			tone: "blue"
+		},
+		{
+			name: "pencil",
+			label: "改写",
+			tone: "purple"
+		},
+		{
+			name: "terminal",
+			label: "执行命令",
+			tone: "rose"
+		},
+		{
+			name: "bang",
+			label: "等你确认",
+			tone: "orange"
+		},
+		{
+			name: "loop",
+			label: "重试中",
+			tone: "lime"
+		},
+		{
+			name: "stop",
+			label: "正在打断",
+			tone: "lime"
+		},
+		{
+			name: "slashbox",
+			label: "已打断",
+			tone: "lime"
+		},
+		{
+			name: "check",
+			label: "已完成",
+			tone: "green"
+		},
+		{
+			name: "cross",
+			label: "出错",
+			tone: "red"
+		}
+	];
+	/** 色卡：预览底部一排色块，标注每个色调代表什么。 */
+	const TONE_CATALOG = [
+		{
+			tone: "blue",
+			label: "只读"
+		},
+		{
+			tone: "purple",
+			label: "改文件"
+		},
+		{
+			tone: "rose",
+			label: "跑命令"
+		},
+		{
+			tone: "orange",
+			label: "等你"
+		},
+		{
+			tone: "lime",
+			label: "中断"
+		},
+		{
+			tone: "green",
+			label: "完成"
+		},
+		{
+			tone: "red",
+			label: "出错"
+		},
+		{
+			tone: "gray",
+			label: "空闲"
+		}
+	];
+	/**
+	* 由记录数算出窗口尺寸。
+	* 高度跟着条数走：一条都没有时只剩一条标题带，不留空行。
+	* 全篇只有 PAD 一个间隙值——标题带上下各一份、行间一份、列表底部一份，四处看起来才一样齐。
+	* @param {number} count 记录条数
+	* @returns {{ count: number, rows: number, rowH: number, width: number, height: number, overflow: number }}
+	*/
+	function layoutOf(count = 0) {
+		const total = Math.max(0, Math.floor(count) || 0);
+		const rows = Math.min(total, 8);
+		return {
+			count: total,
+			rows,
+			rowH: 22,
+			width: 240,
+			height: rows === 0 ? 32 : 42 + rows * 22,
+			overflow: total - rows
+		};
+	}
+	/** 预览墙每格的高与列数：三列铺 16 个图标，正好六行。 */
+	const PREVIEW_COLUMNS = 3;
+	const PREVIEW_CELL_H = 26;
+	/** 色卡每格的高与列数：八种色调铺两行。 */
+	const TONE_CELL_H = 24;
+	const TONE_COLUMNS = 4;
+	/**
+	* 图标预览模式的窗口尺寸。
+	* 高度由图标墙加色卡推出，和真实列表一样只有 PAD 一个间隙值。
+	* @returns {{ width: number, height: number }}
+	*/
+	function previewOf() {
+		return {
+			width: 240,
+			height: 266
+		};
+	}
+	/** 预览墙的格子尺寸，渲染层按它排图标。 */
+	const PREVIEW = {
+		columns: PREVIEW_COLUMNS,
+		cellH: PREVIEW_CELL_H,
+		toneCellH: TONE_CELL_H,
+		toneColumns: TONE_COLUMNS
+	};
+	/**
+	* 第 index 行的矩形。
+	* @param {{ rows: number, rowH: number }} layout 布局
+	* @param {number} index 行号
+	* @param {number} [top] 列表区顶边，渲染层按窗口实际高度算好传进来
+	* @returns {{ x: number, y: number, w: number, h: number }}
+	*/
+	function rowRect(layout, index, top = 32) {
+		return {
+			x: 10,
+			y: top + index * layout.rowH,
+			w: layout.width - 20,
+			h: layout.rowH
+		};
+	}
+	/**
+	* 命中测试：坐标落在第几行，没命中返回 -1。
+	* @param {{ rows: number, rowH: number, width: number }} layout 布局
+	* @param {number} x 画布内横坐标
+	* @param {number} y 画布内纵坐标
+	* @param {number} [top] 列表区顶边，与 rowRect 用同一个值
+	*/
+	function rowAt(layout, x, y, top = 32) {
+		if (x < 10 || x > layout.width - 10) return -1;
+		if (y < top || y >= top + layout.rows * layout.rowH) return -1;
+		return Math.floor((y - top) / layout.rowH);
+	}
+	// finchapp/sessionBoard/src/canvas.js
+	/** 画布 2D 上下文，init 时拿到；frame 每帧都用它重画。 */
+	let ctx2d = null;
+	/** 画布元素，只用来换鼠标指针形状。 */
+	let canvasEl = null;
+	/** 本画布实例的短码。同一时刻桌面上有几个看板窗口，靠这个字段数得出来。 */
+	const INSTANCE = Math.random().toString(36).slice(2, 8);
+	/**
+	* 色调→颜色、图标画法、圆角矩形都在 src/icons.js 里：
+	* 图标预览和真列表用同一份实现，改一处两边同时生效。
+	*/
+	/** 底板与文字的基础配色。底板不透明：底下是桌面，透出来会让字发灰、图标看不清。 */
+	const SURFACE = "#101116";
+	const SURFACE_BORDER = "rgba(255, 255, 255, 0.1)";
+	const TEXT_MAIN = "rgba(255, 255, 255, 0.92)";
+	const TEXT_DIM = "rgba(255, 255, 255, 0.45)";
+	const FONT_STACK = "\"Microsoft YaHei\", \"PingFang SC\", system-ui, sans-serif";
+	/** 会话标题最多显示几个字，超出直接截断加省略号。 */
+	const LABEL_MAX_CHARS = 8;
+	/** 状态变化时格子的脉冲时长。 */
+	const PULSE_MS = 220;
+	/** 当前快照。{ total, waiting, cells: [{ id, label, status, hint, phase, icon, tone, startedAt, endedAt }] } */
+	let board = {
+		total: 0,
+		waiting: 0,
+		cells: []
+	};
+	/** 当前布局，随记录条数变化。 */
+	let layout = layoutOf(0);
+	/** sessionId → 脉冲结束时刻。 */
+	const pulses = /* @__PURE__ */ new Map();
+	/** 画布尺寸，resize 时更新。 */
+	let viewWidth = layout.width;
+	let viewHeight = layout.height;
+	/** 上一次收到的画布尺寸，用来只在尺寸真变化时记日志。 */
+	let lastViewWidth = 0;
+	let lastViewHeight = 0;
+	/** 鼠标当前压在哪个标题栏按钮上，null 表示没有。只影响图标亮度。 */
+	let hoverButton = null;
+	/** 鼠标当前压在哪一行记录上，-1 表示没有。行底色靠它。 */
+	let hoverRow = -1;
+	/**
+	* 内容相对窗口的横向偏移。
+	* 窗口实际比布局宽几像素（系统给透明窗口加的边框），平分到左右，右边才不会空出一条。
+	*/
+	function contentOffset() {
+		return { x: Math.round((viewWidth - layout.width) / 2) };
+	}
+	/**
+	* 列表区顶边。
+	* 窗口实际高度会比布局多出几个像素（透明窗口的系统边框），
+	* 把行块放进「标题带以下的剩余空间」居中，上下的空白就都等于 PAD。
+	*/
+	function rowTopOf() {
+		if (!layout.rows) return 32;
+		return 32 + Math.max(0, (viewHeight - 32 - layout.rows * layout.rowH) / 2);
+	}
+	/** 上一帧的绘制时间，用于空闲降频。 */
+	let lastPaint = 0;
+	/** 首帧是否已经报过启动信息。init 阶段消息通道还没就绪，日志发不出去，只能等第一帧。 */
+	let booted = false;
+	/** 状态有变化、下一帧必须重画。 */
+	let dirty = true;
+	/** 按下时的位置与命中的格子，用来区分"点击"和"拖动"。 */
+	let pointerDown = null;
+	/** 拖动状态：按下那一刻的鼠标屏幕坐标与窗口屏幕坐标，之后的位移都相对它算。 */
+	let dragging = null;
+	/** 文案。由 Host 通过 locale 消息下发，默认值保证独立打开也不算空。 */
+	let strings = {
+		total: "会话",
+		waiting: "等待",
+		empty: "没有运行中的会话",
+		preview: "图标预览"
+	};
+	/**
+	* 图标预览模式：整窗铺一张图标墙加色卡，用来看 14px 下的实际观感。
+	* 只是显示开关，不进快照、不改任何会话数据。
+	*/
+	let preview = false;
+	/** 预览模式下窗口该多大。 */
+	const previewSize = () => ({
+		...layoutOf(0),
+		...previewOf()
+	});
+	/** 把文字压到指定宽度，超了截断加省略号。 */
+	function fitText(ctx, text, maxWidth) {
+		if (ctx.measureText(text).width <= maxWidth) return text;
+		const chars = Array.from(text);
+		while (chars.length > 1) {
+			chars.pop();
+			const candidate = `${chars.join("")}…`;
+			if (ctx.measureText(candidate).width <= maxWidth) return candidate;
+		}
+		return "…";
+	}
+	/**
+	* 按字数截断文本，超出部分换成省略号。
+	* 用字数不用像素：标题长度参差不齐时，固定字数比固定宽度更好对齐。
+	* @param {string} text 原文
+	* @param {number} maxChars 最多留几个字
+	* @returns {string} 截断后的文本
+	*/
+	function clipText(text, maxChars) {
+		const chars = Array.from(String(text ?? ""));
+		if (chars.length <= maxChars) return chars.join("");
+		return `${chars.slice(0, maxChars).join("")}…`;
+	}
+	/** 把窗口尺寸钉死在这块画布的大小上：min 和 max 相等，系统就没有边缘拉伸的余地。 */
+	function lockSize(width, height) {
+		finch.window.setResizable(false);
+		finch.window.setMinimumSize(width, height);
+		finch.window.setMaximumSize(width, height);
+	}
+	/**
+	* 把画布内的状态回传给 Host。
+	* 这段脚本跑在浏览器外壳里，宿主进程看不到它的异常和尺寸变化，只能靠消息桥送出去。
+	*/
+	function report(level, message, data) {
+		try {
+			finch.postMessage({
+				type: "log",
+				level,
+				message,
+				data
+			});
+		} catch {}
+	}
+	/** 取鼠标的屏幕坐标；外壳没给 screenX/Y 时用窗口原点加窗口内坐标兜底。 */
+	function screenPointOf(event) {
+		return {
+			x: typeof event.screenX === "number" ? event.screenX : window.screenX + event.x,
+			y: typeof event.screenY === "number" ? event.screenY : window.screenY + event.y
+		};
+	}
+	/** 画右上角的点阵把手，暗示这里可以拖动窗口。 */
+	function paintGrip(ctx, x, cy) {
+		ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
+		for (let row = 0; row < 3; row += 1) for (let column = 0; column < 2; column += 1) {
+			ctx.beginPath();
+			ctx.arc(x + column * 4, cy - 4 + row * 4, 1, 0, Math.PI * 2);
+			ctx.fill();
+		}
+	}
+	/**
+	* 画一条记录，单行三段：最左状态图标，中间一句话，最右会话标题。
+	* 中间那句话由归并器给出：有动作念动作，没动作念阶段名，一行只有一处文字。
+	*/
+	function paintRow(ctx, rect, item, now) {
+		const color = TONE_COLORS[item.tone] ?? TONE_COLORS.gray;
+		const pulseUntil = pulses.get(item.id) ?? 0;
+		const pulse = pulseUntil > now ? 1 - (pulseUntil - now) / PULSE_MS : 0;
+		const centerY = rect.y + rect.h / 2;
+		const iconX = rect.x + 11;
+		ctx.save();
+		if (pulse > 0) {
+			const scale = 1 + .18 * pulse;
+			ctx.translate(iconX, centerY);
+			ctx.scale(scale, scale);
+			ctx.translate(-iconX, -centerY);
+		}
+		ctx.fillStyle = color;
+		ctx.strokeStyle = color;
+		paintIcon(ctx, item.icon, iconX, centerY);
+		ctx.restore();
+		const contentLeft = rect.x + 26;
+		const contentRight = rect.x + rect.w - 2;
+		ctx.textBaseline = "middle";
+		const title = clipText(item.label ?? "", LABEL_MAX_CHARS);
+		ctx.textAlign = "right";
+		ctx.font = `400 10px ${FONT_STACK}`;
+		const titleWidth = title ? ctx.measureText(title).width : 0;
+		if (title) {
+			ctx.fillStyle = TEXT_DIM;
+			ctx.fillText(title, contentRight, centerY);
+		}
+		ctx.textAlign = "left";
+		ctx.font = `500 12px ${FONT_STACK}`;
+		ctx.fillStyle = TEXT_MAIN;
+		const usable = Math.max(30, contentRight - contentLeft - (titleWidth ? titleWidth + 12 : 0));
+		const text = fitText(ctx, item.text || item.status, usable);
+		ctx.fillText(text, contentLeft, centerY);
+		const elapsed = formatDuration((item.endedAt || Date.now()) - item.startedAt);
+		const textWidth = ctx.measureText(text).width;
+		const elapsedWidth = usable - textWidth - 8;
+		if (elapsedWidth >= 20) {
+			ctx.font = `400 10px ${FONT_STACK}`;
+			ctx.fillStyle = TEXT_DIM;
+			ctx.fillText(fitText(ctx, elapsed, elapsedWidth), contentLeft + textWidth + 8, centerY);
+		}
+	}
+	/**
+	* 画图标预览墙：每个图标一行排三列，下面接一条色卡。
+	* 用的就是列表里那份 paintIcon 和 TONE_COLORS，所以这里看到多大、多亮，列表里就是什么样。
+	* @param {CanvasRenderingContext2D} ctx 画布上下文
+	*/
+	function paintPreview(ctx) {
+		ctx.textBaseline = "middle";
+		ctx.textAlign = "left";
+		ctx.font = `600 12px ${FONT_STACK}`;
+		ctx.fillStyle = TEXT_MAIN;
+		ctx.fillText(strings.preview, 10, 16);
+		const columnWidth = (layout.width - 20) / PREVIEW.columns;
+		for (const [index, item] of ICON_CATALOG.entries()) {
+			const column = index % PREVIEW.columns;
+			const row = Math.floor(index / PREVIEW.columns);
+			const left = 10 + column * columnWidth;
+			const centerY = 42 + row * PREVIEW.cellH + PREVIEW.cellH / 2;
+			const color = TONE_COLORS[item.tone] ?? TONE_COLORS.gray;
+			ctx.fillStyle = color;
+			ctx.strokeStyle = color;
+			paintIcon(ctx, item.name, left + 7, centerY);
+			ctx.font = `400 12px ${FONT_STACK}`;
+			ctx.fillStyle = TEXT_MAIN;
+			ctx.fillText(item.label, left + 14 + 8, centerY);
+		}
+		const toneTop = 42 + Math.ceil(ICON_CATALOG.length / PREVIEW.columns) * PREVIEW.cellH + 10;
+		const toneWidth = (layout.width - 20) / PREVIEW.toneColumns;
+		for (const [index, item] of TONE_CATALOG.entries()) {
+			const column = index % PREVIEW.toneColumns;
+			const row = Math.floor(index / PREVIEW.toneColumns);
+			const left = 10 + column * toneWidth;
+			const centerY = toneTop + row * PREVIEW.toneCellH + PREVIEW.toneCellH / 2;
+			ctx.fillStyle = TONE_COLORS[item.tone] ?? TONE_COLORS.gray;
+			roundRect(ctx, left, centerY - 5, 10, 10, 2);
+			ctx.fill();
+			ctx.font = `400 11px ${FONT_STACK}`;
+			ctx.fillStyle = TEXT_DIM;
+			ctx.fillText(item.label, left + 16, centerY);
+		}
+	}
+	/** 已完成的条数，用来决定清除按钮要不要置灰。 */
+	function finishedCount() {
+		return board.cells.filter((cell) => cell.endedAt).length;
+	}
+	/**
+	* 标题栏右侧两个按钮的位置。
+	* 从右往左先让开拖动手柄，清除贴着手柄，眼睛在它左边。
+	* @returns {Array<{ id: string, x: number, y: number }>}
+	*/
+	function headerButtons() {
+		const base = layout.width - 10 - 24;
+		return [{
+			id: "hide",
+			x: base - 20,
+			y: 16
+		}, {
+			id: "clear",
+			x: base,
+			y: 16
+		}];
+	}
+	/**
+	* 命中了哪个标题栏按钮。
+	* @param {number} x 画布内横坐标
+	* @param {number} y 画布内纵坐标
+	* @returns {string | null} 按钮 id，没命中返回 null
+	*/
+	function hitHeaderButton(x, y) {
+		for (const button of headerButtons()) if (Math.abs(x - button.x) <= 10 && Math.abs(y - button.y) <= 10) return button.id;
+		return null;
+	}
+	/** 画眼睛：椭圆加瞳孔，尺寸跟右上角的拖动手柄一个量级。 */
+	function paintEye(ctx, cx, cy) {
+		ctx.beginPath();
+		ctx.ellipse(cx, cy, 4.6, 2.8, 0, 0, Math.PI * 2);
+		ctx.stroke();
+		ctx.beginPath();
+		ctx.arc(cx, cy, 1.2, 0, Math.PI * 2);
+		ctx.fill();
+	}
+	/** 画垃圾桶：盖、提手、桶身三笔。 */
+	function paintTrash(ctx, cx, cy) {
+		ctx.beginPath();
+		ctx.moveTo(cx - 4, cy - 3);
+		ctx.lineTo(cx + 4, cy - 3);
+		ctx.stroke();
+		ctx.beginPath();
+		ctx.moveTo(cx - 1.5, cy - 3);
+		ctx.lineTo(cx - 1.5, cy - 4.5);
+		ctx.lineTo(cx + 1.5, cy - 4.5);
+		ctx.lineTo(cx + 1.5, cy - 3);
+		ctx.stroke();
+		ctx.beginPath();
+		ctx.moveTo(cx - 2.8, cy - 3);
+		ctx.lineTo(cx - 2.2, cy + 4);
+		ctx.lineTo(cx + 2.2, cy + 4);
+		ctx.lineTo(cx + 2.8, cy - 3);
+		ctx.stroke();
+	}
+	/** 标题栏右侧的图标按钮：浅色方块垫底，图标居中，视觉重心才和左边文字齐。 */
+	function paintHeaderButtons(ctx) {
+		ctx.save();
+		ctx.lineWidth = 1.1;
+		ctx.lineCap = "round";
+		ctx.lineJoin = "round";
+		for (const button of headerButtons()) {
+			const disabled = button.id === "clear" && finishedCount() === 0;
+			const lit = hoverButton === button.id && !disabled;
+			const side = 16;
+			roundRect(ctx, button.x - side / 2, button.y - side / 2, side, side, 4);
+			ctx.fillStyle = lit ? "rgba(255, 255, 255, 0.14)" : "rgba(255, 255, 255, 0.07)";
+			ctx.fill();
+			const color = lit ? TEXT_MAIN : disabled ? "rgba(255, 255, 255, 0.3)" : TEXT_DIM;
+			ctx.strokeStyle = color;
+			ctx.fillStyle = color;
+			if (button.id === "hide") paintEye(ctx, button.x, button.y);
+			else paintTrash(ctx, button.x, button.y);
+		}
+		ctx.restore();
+	}
+	/** 整屏重画。 */
+	function paint(ctx) {
+		const now = performance.now();
+		ctx.clearRect(0, 0, viewWidth, viewHeight);
+		roundRect(ctx, .5, .5, viewWidth - 1, viewHeight - 1, 14);
+		ctx.fillStyle = SURFACE;
+		ctx.fill();
+		ctx.strokeStyle = SURFACE_BORDER;
+		ctx.lineWidth = 1;
+		ctx.stroke();
+		const shift = contentOffset();
+		const rowTop = rowTopOf();
+		ctx.save();
+		ctx.translate(shift.x, 0);
+		if (preview) {
+			paintPreview(ctx);
+			ctx.restore();
+			return;
+		}
+		const headerY = layout.rows > 0 ? 16 : Math.min(viewHeight, 32) / 2;
+		ctx.textBaseline = "middle";
+		ctx.textAlign = "left";
+		ctx.font = `600 12px ${FONT_STACK}`;
+		ctx.fillStyle = TEXT_MAIN;
+		const totalText = `${board.total} ${strings.total}`;
+		ctx.fillText(totalText, 10, headerY);
+		let cursor = 10 + ctx.measureText(totalText).width;
+		if (board.waiting > 0) {
+			const waitingText = `· ${board.waiting} ${strings.waiting}`;
+			cursor += 6;
+			ctx.fillStyle = TONE_COLORS.orange;
+			ctx.fillText(waitingText, cursor, headerY);
+			cursor += ctx.measureText(waitingText).width;
+		}
+		if (layout.overflow > 0) {
+			cursor += 6;
+			ctx.font = `400 9px ${FONT_STACK}`;
+			ctx.fillStyle = TEXT_DIM;
+			ctx.fillText(`+${layout.overflow}`, cursor, headerY);
+		}
+		paintHeaderButtons(ctx);
+		paintGrip(ctx, layout.width - 10 - 5, headerY);
+		if (layout.rows > 0) {
+			ctx.beginPath();
+			ctx.moveTo(10, 31.5);
+			ctx.lineTo(layout.width - 10, 31.5);
+			ctx.strokeStyle = SURFACE_BORDER;
+			ctx.lineWidth = 1;
+			ctx.stroke();
+		}
+		for (let index = 0; index < layout.rows; index += 1) {
+			const item = board.cells[index];
+			if (!item) break;
+			const rect = rowRect(layout, index, rowTop);
+			if (index === hoverRow) {
+				roundRect(ctx, rect.x - 4, rect.y, rect.w + 8, rect.h, 4);
+				ctx.fillStyle = "rgba(255, 255, 255, 0.07)";
+				ctx.fill();
+			}
+			paintRow(ctx, rect, item, now);
+		}
+		ctx.restore();
+	}
+	/** 有脉冲在跑时每帧都画，否则降到 4fps 省电。 */
+	function animating(now) {
+		for (const until of pulses.values()) if (until > now) return true;
+		return false;
+	}
+	/** 收到新快照：对比阶段变化，给变化的格子打一次脉冲。 */
+	function applyBoard(next) {
+		const previous = new Map(board.cells.map((cell) => [cell.id, cell.phase]));
+		board = next;
+		if (!preview) {
+			const before = layout.rows;
+			layout = layoutOf(next.cells.length);
+			if (layout.rows !== next.cells.length) report("warn", "行数与内容不一致", {
+				rows: layout.rows,
+				cells: next.cells.length,
+				layoutHeight: layout.height,
+				viewHeight
+			});
+			if (before !== layout.rows) report("debug", "画布行数变化", {
+				instance: INSTANCE,
+				from: before,
+				to: layout.rows,
+				height: layout.height,
+				viewHeight
+			});
+		}
+		const now = performance.now();
+		for (const cell of next.cells) {
+			const phase = previous.get(cell.id);
+			if (phase !== void 0 && phase !== cell.phase) pulses.set(cell.id, now + PULSE_MS);
+			if (phase === void 0) pulses.set(cell.id, now + PULSE_MS);
+		}
+		for (const id of pulses.keys()) if (!next.cells.some((cell) => cell.id === id)) pulses.delete(id);
+		dirty = true;
+	}
+	finch.canvas.define({
+		init({ ctx2d: context, canvas, width, height, initialData }) {
+			try {
+				ctx2d = context;
+				canvasEl = canvas;
+				preview = initialData?.preview === true;
+				layout = preview ? previewSize() : layoutOf(initialData?.count ?? 0);
+				viewWidth = width;
+				viewHeight = height;
+				if (initialData?.strings) strings = initialData.strings;
+				if (initialData?.board) applyBoard(initialData.board);
+				ctx2d.textBaseline = "middle";
+				lockSize(layout.width, layout.height);
+			} catch (error) {
+				report("error", "画布初始化失败", {
+					reason: String(error?.message ?? error),
+					stack: error?.stack
+				});
+				throw error;
+			}
+		},
+		resize(width, height) {
+			viewWidth = width;
+			viewHeight = height;
+			if (width !== lastViewWidth || height !== lastViewHeight) {
+				lastViewWidth = width;
+				lastViewHeight = height;
+				report("debug", "画布尺寸变化", {
+					instance: INSTANCE,
+					width,
+					height,
+					expect: `${layout.width}x${layout.height}`,
+					rows: layout.rows,
+					cells: board.cells.length,
+					dragging: dragging !== null,
+					inner: `${window.innerWidth}x${window.innerHeight}`,
+					outer: `${window.outerWidth}x${window.outerHeight}`,
+					dpr: window.devicePixelRatio
+				});
+			}
+			if (dragging) {
+				dirty = true;
+				return;
+			}
+			if (Math.abs(width - layout.width) > 6 || Math.abs(height - layout.height) > 6) {
+				report("warn", "画布尺寸被外部改动，已重新锁定", {
+					instance: INSTANCE,
+					width,
+					height,
+					expect: `${layout.width}x${layout.height}`
+				});
+				lockSize(layout.width, layout.height);
+				finch.window.setSize(layout.width, layout.height);
+			}
+			dirty = true;
+		},
+		frame() {
+			const now = performance.now();
+			const busy = animating(now);
+			if (!dirty && !busy && now - lastPaint < 250) return;
+			dirty = false;
+			lastPaint = now;
+			if (!booted) {
+				booted = true;
+				report("info", "画布首帧", {
+					instance: INSTANCE,
+					cells: board.cells.length,
+					rows: layout.rows,
+					layout: `${layout.width}x${layout.height}`,
+					view: `${viewWidth}x${viewHeight}`,
+					dpr: window.devicePixelRatio
+				});
+			}
+			paint(ctx2d);
+		},
+		onPointer(event) {
+			if (preview) return;
+			if (dragging) {
+				if (event.type === "move") {
+					const point = screenPointOf(event);
+					const dx = point.x - dragging.lastScreenX;
+					const dy = point.y - dragging.lastScreenY;
+					if (dx === 0 && dy === 0) return;
+					dragging.lastScreenX = point.x;
+					dragging.lastScreenY = point.y;
+					dragging.winX = Math.round(dragging.winX + dx);
+					dragging.winY = Math.round(dragging.winY + dy);
+					finch.postMessage({
+						type: "move",
+						x: dragging.winX,
+						y: dragging.winY
+					});
+					dragging.frames += 1;
+					if (isDev() && dragging.frames % 20 === 0) report("debug", "拖动中", {
+						frames: dragging.frames,
+						moveX: dragging.winX - dragging.startWinX,
+						moveY: dragging.winY - dragging.startWinY,
+						winX: dragging.winX,
+						winY: dragging.winY,
+						inner: `${window.innerWidth}x${window.innerHeight}`,
+						outer: `${window.outerWidth}x${window.outerHeight}`
+					});
+					return;
+				}
+				if (event.type === "up" || event.type === "cancel") {
+					const { winX, winY, frames, startWinX, startWinY } = dragging;
+					dragging = null;
+					report("debug", "拖动结束", {
+						type: event.type,
+						frames,
+						moveX: winX - startWinX,
+						moveY: winY - startWinY,
+						winX,
+						winY,
+						inner: `${window.innerWidth}x${window.innerHeight}`,
+						outer: `${window.outerWidth}x${window.outerHeight}`
+					});
+					finch.postMessage({
+						type: "dragEnd",
+						x: winX,
+						y: winY
+					});
+					return;
+				}
+			}
+			if (event.type === "move") {
+				const hit = hitHeaderButton(event.x, event.y);
+				const nextButton = hit === "clear" && finishedCount() === 0 ? null : hit;
+				const nextRow = nextButton ? -1 : rowAt(layout, event.x - contentOffset().x, event.y, rowTopOf());
+				if (nextButton !== hoverButton || nextRow !== hoverRow) {
+					hoverButton = nextButton;
+					hoverRow = nextRow;
+					if (canvasEl) canvasEl.style.cursor = nextButton || nextRow >= 0 ? "pointer" : "default";
+					dirty = true;
+				}
+				return;
+			}
+			if (event.type === "down" && event.button === 0) {
+				const button = hitHeaderButton(event.x, event.y);
+				if (button) {
+					if (button === "clear" && finishedCount() === 0) return;
+					pointerDown = {
+						button,
+						x: event.x,
+						y: event.y
+					};
+					return;
+				}
+				const index = rowAt(layout, event.x - contentOffset().x, event.y, rowTopOf());
+				if (index < 0) {
+					const point = screenPointOf(event);
+					dragging = {
+						lastScreenX: point.x,
+						lastScreenY: point.y,
+						winX: window.screenX,
+						winY: window.screenY,
+						startWinX: window.screenX,
+						startWinY: window.screenY,
+						frames: 0
+					};
+					report("debug", "拖动开始", {
+						screenX: point.x,
+						screenY: point.y,
+						winX: dragging.winX,
+						winY: dragging.winY,
+						screen: `${window.screenX},${window.screenY}`,
+						inner: `${window.innerWidth}x${window.innerHeight}`,
+						outer: `${window.outerWidth}x${window.outerHeight}`,
+						expect: `${layout.width}x${layout.height}`
+					});
+					return;
+				}
+				pointerDown = {
+					index,
+					x: event.x,
+					y: event.y
+				};
+				return;
+			}
+			if (event.type === "up" && pointerDown) {
+				const moved = Math.hypot(event.x - pointerDown.x, event.y - pointerDown.y);
+				if (pointerDown.button) {
+					if (moved <= 4 && hitHeaderButton(event.x, event.y) === pointerDown.button) finch.postMessage({ type: pointerDown.button === "hide" ? "hide" : "clear-finished" });
+					pointerDown = null;
+					return;
+				}
+				const index = rowAt(layout, event.x - contentOffset().x, event.y, rowTopOf());
+				if (moved <= 4 && index === pointerDown.index) {
+					const item = board.cells[index];
+					if (item) finch.postMessage({
+						type: "focus",
+						sessionId: item.id
+					});
+				}
+				pointerDown = null;
+				return;
+			}
+			if (event.type === "cancel") pointerDown = null;
+		},
+		onMessage(message) {
+			if (!message || typeof message !== "object") return;
+			if (message.type === "board") {
+				applyBoard(message.board);
+				return;
+			}
+			if (message.type === "config") {
+				if (message.strings) strings = message.strings;
+				if (typeof message.preview === "boolean" && message.preview !== preview) {
+					preview = message.preview;
+					layout = preview ? previewSize() : layoutOf(board.cells.length);
+					report("info", "切换图标预览", {
+						instance: INSTANCE,
+						preview,
+						layoutHeight: layout.height
+					});
+				}
+				dirty = true;
+				return;
+			}
+			if (message.type === "size") {
+				layout = preview ? previewSize() : layoutOf(message.count ?? board.cells.length);
+				report("debug", "收到尺寸消息", {
+					instance: INSTANCE,
+					count: message.count,
+					preview,
+					rows: layout.rows,
+					layoutHeight: layout.height,
+					viewHeight
+				});
+				lockSize(layout.width, layout.height);
+				dirty = true;
+			}
+		},
+		dispose() {
+			report("info", "画布销毁", {
+				instance: INSTANCE,
+				cells: board.cells.length
+			});
+			pulses.clear();
+		}
+	});
+	window.addEventListener("error", (event) => {
+		report("error", event.message || "未捕获错误", {
+			source: event.filename,
+			line: event.lineno,
+			column: event.colno
+		});
+	});
+	window.addEventListener("unhandledrejection", (event) => {
+		report("error", "未处理的 Promise 拒绝", { reason: String(event.reason?.message ?? event.reason) });
+	});
+})();