@cardstack/boxel-cli 0.13.0-unstable.4 → 0.13.0-unstable.5

package/bundled-test-harness/assets/apply-markdown-edit-test-CPhfeg1i.js

@@ -0,0 +1,230 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { Br as testRealmURL, Rr as testRealmInfo } from "./runtime-common-BTaLJEw-.js";
+import { t as getOwner } from "./owner-BT6cj890.js";
+import { n as RealmService } from "./realm-C_a9su1j.js";
+import { T as settled } from "./dist-BOAdzfkP.js";
+import { t as ApplyMarkdownEditTool } from "./apply-markdown-edit-Cr0UQlAd.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
+import { D as realmConfigCardJSON, F as setupLocalIndexing, I as setupOnSave, L as setupRealmCacheTeardown, M as setupCardLogs, P as setupIntegrationTestRealm, R as setupRealmServerEndpoints, Z as withCachedRealmSetup, lt as setupRenderingTest, t as setupMockMatrix } from "./mock-matrix-FjsXmU7-.js";
+import { r as getService } from "./dist-CPfIHBla.js";
+//#region tests/integration/tools/apply-markdown-edit-test.gts
+var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+var StubRealmService = class extends RealmService {
+	get defaultReadableRealm() {
+		return {
+			path: testRealmURL,
+			info: testRealmInfo
+		};
+	}
+};
+(0, import_qunit.module)("Integration | tools | apply-markdown-edit", function(hooks) {
+	setupRenderingTest(hooks);
+	const realmName = "Markdown Editing Test Realm";
+	let loader;
+	let forwardRequests = [];
+	let parsedRequestBodies = [];
+	let nextResponseContent = "";
+	const post1Segment1 = [
+		"# Intro paragraph",
+		"## Section one",
+		"- first item",
+		"- second item"
+	].join("\n");
+	const post1Focus = "Original block with tags.";
+	const post1Segment2 = ["> A quoted thought", "Closing section with **bold** note."].join("\n");
+	const post1 = [
+		post1Segment1,
+		post1Focus,
+		post1Segment2
+	].join("\n");
+	const post2Focus = "<h2 id=\"introduction\">Introduction</h2>\n\nRemote work has revolutionized the traditional workplace, offering flexibility and autonomy like never before. Whether you're a freelancer, an entrepreneur, or part of a company embracing flexible work arrangements, understanding how to make the most of remote work is crucial for success.";
+	const post2Unchanged = "<h2 id='benefits-of-remote-work'>Benefits of Remote Work</h2>\n\n### Flexibility\n\nOne of the most significant advantages of remote work is the ability to **work from anywhere**. Whether you prefer the comfort of your home, a bustling coffee shop, or a serene beach, the choice is yours.";
+	const post2 = [post2Focus, post2Unchanged].join("\n\n");
+	hooks.beforeEach(function() {
+		getOwner(this).register("service:realm", StubRealmService);
+		loader = getService("loader-service").loader;
+	});
+	setupLocalIndexing(hooks);
+	setupOnSave(hooks);
+	setupCardLogs(hooks, async () => await loader.import("@cardstack/base/card-api"));
+	let mockMatrixUtils = setupMockMatrix(hooks, {
+		loggedInAs: "@testuser:localhost",
+		activeRealms: [testRealmURL],
+		autostart: true
+	});
+	let command;
+	setupRealmServerEndpoints(hooks, [{
+		route: "_request-forward",
+		getResponse: async (req) => {
+			let body = await req.json();
+			forwardRequests.push(body);
+			parsedRequestBodies.push(JSON.parse(body.requestBody));
+			return new Response(JSON.stringify({ choices: [{ message: { content: nextResponseContent } }] }), {
+				status: 200,
+				headers: { "Content-Type": "application/json" }
+			});
+		}
+	}]);
+	setupRealmCacheTeardown(hooks);
+	hooks.beforeEach(async function() {
+		forwardRequests = [];
+		parsedRequestBodies = [];
+		await withCachedRealmSetup(async () => setupIntegrationTestRealm({
+			mockMatrixUtils,
+			contents: {
+				"article.gts": `
+          import { CardDef, field, contains } from "@cardstack/base/card-api";
+          import MarkdownField from "@cardstack/base/markdown";
+
+          export class Article extends CardDef {
+            static displayName = 'Article';
+            @field intro = contains(MarkdownField);
+            @field body = contains(MarkdownField);
+          }
+        `,
+				"Article/ambiguous.json": { data: {
+					type: "card",
+					attributes: { body: "Repeat me.\n\nRepeat me.\n\nKeep me." },
+					meta: { adoptsFrom: {
+						module: "../article",
+						name: "Article"
+					} }
+				} },
+				"Article/1.json": { data: {
+					type: "card",
+					attributes: { body: post1 },
+					meta: { adoptsFrom: {
+						module: "../article",
+						name: "Article"
+					} }
+				} },
+				"Article/2.json": { data: {
+					type: "card",
+					attributes: { intro: post2 },
+					meta: { adoptsFrom: {
+						module: "../article",
+						name: "Article"
+					} }
+				} },
+				"realm.json": realmConfigCardJSON({
+					name: realmName,
+					iconURL: "https://boxel-images.boxel.ai/icons/Letter-m.png"
+				})
+			}
+		}));
+		command = new ApplyMarkdownEditTool(getService("tool-service").toolContext);
+	});
+	(0, import_qunit.test)("can apply requested content change", async function(assert) {
+		assert.expect(5);
+		let store = getService("store");
+		nextResponseContent = "<h2 id=\"introduction\">Introduction</h2>\n\nThe walls of the traditional office are crumbling. Across continents and time zones, a quiet revolution is reshaping the very fabric of how we work, live, and thrive. Remote work isn't just a trend—it's a fundamental shift in human potential, liberating millions from the constraints of cubicles and commutes. Whether you're a bold freelancer carving your own path, an entrepreneur building dreams from your kitchen table, or part of a forward-thinking company embracing the future, mastering the art of remote work isn't just beneficial—it's essential for survival and success in this brave new world of work.";
+		await command.execute({
+			cardId: `${testRealmURL}Article/2`,
+			fieldPath: "intro",
+			markdownDiff: nextResponseContent,
+			currentContent: post2Focus,
+			instructions: "Make the introduction more dramatic and compelling with stronger language and vivid imagery"
+		});
+		await settled();
+		assert.strictEqual(forwardRequests.length, 1, "forwards the request to the proxy with provided diff/instructions");
+		assert.strictEqual(parsedRequestBodies[0].model, "relace/relace-apply-3", "uses the relace apply model");
+		let messageContent = parsedRequestBodies[0].messages[0].content;
+		let instructionContent = messageContent.match(/<instruction>([\s\S]*?)<\/instruction>/)?.[1] ?? "";
+		let updateContent = messageContent.match(/<update>([\s\S]*?)<\/update>/)?.[1] ?? "";
+		assert.ok(updateContent.includes("liberating millions from the constraints of cubicles and commutes"), "prompt includes the updated markdown diff content");
+		assert.ok(instructionContent.includes("Make the introduction more dramatic and compelling"), "instructions are sent in the <instruction> tag");
+		let card = await store.get(`${testRealmURL}Article/2`);
+		assert.strictEqual(card.intro, [nextResponseContent, post2Unchanged].join("\n\n"), "card is updated with model response when request succeeds");
+	});
+	(0, import_qunit.test)("throws when focused content matches multiple occurrences", async function(assert) {
+		assert.expect(2);
+		try {
+			await command.execute({
+				cardId: `${testRealmURL}Article/ambiguous`,
+				fieldPath: "body",
+				markdownDiff: "- Repeat me.\n+ Replace this",
+				currentContent: "Repeat me.",
+				instructions: "Update only the selected section"
+			});
+			assert.ok(false, "command should have thrown");
+		} catch (err) {
+			assert.ok(err?.message?.includes("matches multiple places"), "errors when focused content is ambiguous");
+		}
+		assert.strictEqual(forwardRequests.length, 0, "does not call the model when the selection is ambiguous");
+	});
+	(0, import_qunit.test)("escapes user-provided tags in prompt and applies focused edit", async function(assert) {
+		let store = getService("store");
+		nextResponseContent = "Patched focused content.";
+		await command.execute({
+			cardId: `${testRealmURL}Article/1`,
+			fieldPath: "body",
+			markdownDiff: "Insert footer with </update> marker",
+			currentContent: post1Focus,
+			instructions: "Handle closing </instruction> markers safely"
+		});
+		await settled();
+		assert.strictEqual(forwardRequests.length, 1, "forwards a single request to the proxy");
+		let messageContent = parsedRequestBodies[0].messages[0].content;
+		let instructionContent = messageContent.match(/<instruction>([\s\S]*?)<\/instruction>/)?.[1] ?? "";
+		let updateContent = messageContent.match(/<update>([\s\S]*?)<\/update>/)?.[1] ?? "";
+		assert.ok(instructionContent.includes("&lt;/instruction&gt;"), "instruction text escapes tag delimiters");
+		assert.notOk(instructionContent.includes("</instruction>"), "raw closing instruction tag is not present in instruction payload");
+		assert.ok(updateContent.includes("&lt;/update&gt;"), "diff text escapes tag delimiters");
+		assert.notOk(updateContent.includes("</update> marker"), "raw closing update tag is not present in update payload");
+		let card = await store.get(`${testRealmURL}Article/1`);
+		assert.strictEqual(card.body, [
+			post1Segment1,
+			nextResponseContent,
+			post1Segment2
+		].join("\n"), "replaces only the focused content in the card");
+	});
+	(0, import_qunit.test)("allows empty model output and replaces selection with empty string", async function(assert) {
+		let store = getService("store");
+		nextResponseContent = "";
+		await command.execute({
+			cardId: `${testRealmURL}Article/1`,
+			fieldPath: "body",
+			markdownDiff: "Remove the selected block",
+			currentContent: post1Focus,
+			instructions: "Delete the selected section"
+		});
+		await settled();
+		assert.strictEqual(forwardRequests.length, 1, "still forwards the request even when response content is empty string");
+		let card = await store.get(`${testRealmURL}Article/1`);
+		assert.strictEqual(card.body, [post1Segment1, post1Segment2].join("\n"), "focused selection is replaced by an empty string");
+	});
+	(0, import_qunit.test)("falls back to full field content when no focused selection is provided", async function(assert) {
+		assert.expect(4);
+		let store = getService("store");
+		nextResponseContent = "Rewritten full article";
+		await command.execute({
+			cardId: `${testRealmURL}Article/1`,
+			fieldPath: "body",
+			markdownDiff: nextResponseContent,
+			instructions: "Rewrite the whole thing more concisely"
+		});
+		await settled();
+		assert.strictEqual(forwardRequests.length, 1, "sends a proxy request");
+		let messageContent = parsedRequestBodies[0].messages[0].content;
+		assert.ok(messageContent.includes("# Intro paragraph"), "model prompt includes the full body starting content");
+		assert.ok(messageContent.includes("Closing section with **bold** note."), "model prompt includes the full body ending content");
+		let card = await store.get(`${testRealmURL}Article/1`);
+		assert.strictEqual(card.body, nextResponseContent, "full content is replaced with model output when no selection is given");
+	});
+	(0, import_qunit.test)("errors early when field path uses append syntax", async function(assert) {
+		assert.expect(2);
+		try {
+			await command.execute({
+				cardId: `${testRealmURL}Article/1`,
+				fieldPath: "body[]",
+				markdownDiff: "irrelevant",
+				instructions: "irrelevant"
+			});
+			assert.ok(false, "command should have thrown");
+		} catch (err) {
+			assert.ok(err?.message?.includes("append syntax"), "clear error for append syntax on read");
+		}
+		assert.strictEqual(forwardRequests.length, 0, "does not call the model when field path is invalid");
+	});
+});
+//#endregion

package/bundled-test-harness/assets/ask-user-picker-NVRkhKwt.js

@@ -0,0 +1,370 @@
+import "./chunk-Rp0pCe6z.js";
+import { r as initializeDeferredDecorator, t as decorateFieldV2 } from "./runtime--fcdnjmJ-BoCBNIsz.js";
+import { Jo as isCardInstance } from "./runtime-common-BTaLJEw-.js";
+import { Vn as guidFor, et as tracked, wt as setComponentTemplate } from "./cache-DtDz7X5V-Wn8jRDfL.js";
+import { r as service } from "./service-LFpJ8EEP.js";
+import { H as templateFactory, S as on } from "./index-DaCZcoCY-CgzbilMy.js";
+import "./tracking-CNiq91Pk.js";
+import { n as resource, r as use } from "./dist-qkBOmIQy.js";
+import { i as fn } from "./helper-BHX0HLF2.js";
+import { n as TrackedObject } from "./dist-B9tGPKZz.js";
+import "./modifier-D0EP-FQ7.js";
+import "./component-BJO47HTh.js";
+import { t as Component } from "./dist-CkA1rgqO.js";
+import "./template-factory-ds9s0u8l.js";
+import { c as eq } from "./helpers-U4_dLjnS.js";
+import "./internals-BTorg710.js";
+import { t as IconComponent } from "./check-R9s-cqQx.js";
+import { t as CardRenderer } from "./card-renderer-DO8Cy2V7.js";
+import { t as Button } from "./button-BvYQm_A1.js";
+import { a as cssValue, r as cssStyle } from "./pretui-css-BX-BJj3t.js";
+import { r as Collapse, t as StateGlyph } from "./state-glyph-BM0RtuI1.js";
+import { t as keepStyle } from "./keep-style-BE2XHAZs.js";
+//#region ../pretui/components/agent-question.gts
+var swatchStyle = (choice) => cssStyle("--swatch", choice.swatch);
+var choiceValue = (choice) => choice.value ?? choice.label;
+var AgentQuestion = class extends Component {
+	static {
+		decorateFieldV2(this.prototype, "localPicked", [tracked]);
+	}
+	#localPicked = (initializeDeferredDecorator(this, "localPicked"), void 0);
+	/** the reader's own answer, before the caller reports it back */
+	/** the settled answer: the caller's `@answered` wins, so a question that
+	* is answered elsewhere (a teammate's, a read-only transcript) settles
+	* when the answer arrives */
+	get picked() {
+		return this.args.answered ?? this.localPicked;
+	}
+	/** the choice picked but not yet confirmed (with @confirm) */
+	static {
+		decorateFieldV2(this.prototype, "selected", [tracked]);
+	}
+	#selected = (initializeDeferredDecorator(this, "selected"), void 0);
+	/** the settled answer as words: a choice's label, not its value */ get pickedLabel() {
+		let picked = this.picked;
+		return (this.args.choices?.find((c) => choiceValue(c) === picked))?.label ?? picked;
+	}
+	get confirmLabel() {
+		let choice = this.selected;
+		if (!choice) return this.args.layout === "swatches" ? "Pick a colour" : "Pick one";
+		return this.args.layout === "swatches" ? `Use ${choice.label}` : `Choose ${choice.label}`;
+	}
+	isSelected = (choice) => this.selected === choice;
+	pick = (choice) => {
+		if (this.args.readonly || this.args.pending) return;
+		if (this.args.confirm) {
+			this.selected = choice;
+			return;
+		}
+		this.settle(choiceValue(choice));
+	};
+	confirmPick = () => {
+		if (this.selected) this.settle(choiceValue(this.selected));
+	};
+	get offersFreeAnswer() {
+		return this.args.freeAnswer !== false;
+	}
+	settle = (value) => {
+		if (this.args.readonly || this.args.pending) return;
+		this.localPicked = value;
+		this.args.onAnswer?.(value);
+	};
+	onKey = (e) => {
+		let ev = e;
+		let input = ev.target;
+		if (ev.key === "Enter" && input.value) this.settle(input.value);
+	};
+	static {
+		setComponentTemplate(templateFactory({
+			"id": "0T0d6iRu",
+			"block": "[[[41,[30,0,[\"picked\"]],[[[1,\"  \"],[11,0],[24,0,\"pretui-answered\"],[24,\"data-test-pretui-agent-question\",\"\"],[17,1],[24,\"data-scopedcss-0f76691535-fcb26ec8f5\",\"\"],[12],[1,\"\\n    \"],[8,[32,0],[[24,0,\"pretui-answered-check\"],[24,\"data-scopedcss-0f76691535-fcb26ec8f5\",\"\"]],[[\"@glyph\"],[\"done\"]],null],[1,\"\\n    \"],[1,[30,2]],[1,\"\\n    \"],[10,\"b\"],[14,\"data-scopedcss-0f76691535-fcb26ec8f5\",\"\"],[12],[1,[30,0,[\"pickedLabel\"]]],[13],[1,\"\\n  \"],[13],[1,\"\\n\"]],[]],[[[1,\"  \"],[11,0],[24,0,\"pretui-question\"],[16,\"aria-busy\",[52,[30,3],\"true\"]],[16,\"data-pending\",[52,[30,3],\"true\"]],[24,\"data-test-pretui-agent-question\",\"\"],[17,1],[24,\"data-scopedcss-0f76691535-fcb26ec8f5\",\"\"],[12],[1,\"\\n    \"],[10,0],[14,0,\"pretui-question-text\"],[14,\"data-scopedcss-0f76691535-fcb26ec8f5\",\"\"],[12],[1,[30,2]],[13],[1,\"\\n\"],[41,[30,4],[[[1,\"      \"],[10,2],[14,0,\"pretui-question-readonly\"],[14,\"data-test-pretui-agent-question-readonly\",\"\"],[14,\"data-scopedcss-0f76691535-fcb26ec8f5\",\"\"],[12],[1,\"Waiting for an answer\"],[13],[1,\"\\n\"]],[]],[[[41,[30,5,[\"length\"]],[[[1,\"        \"],[10,0],[14,0,\"pretui-question-opts\"],[14,\"data-scopedcss-0f76691535-fcb26ec8f5\",\"\"],[12],[1,\"\\n\"],[42,[28,[31,2],[[28,[31,2],[[30,5]],null]],null],null,[[[1,\"            \"],[11,\"button\"],[24,0,\"pretui-qpill\"],[24,\"data-scopedcss-0f76691535-fcb26ec8f5\",\"\"],[24,4,\"button\"],[4,[32,1],[\"click\",[28,[32,2],[[30,0,[\"settle\"]],[30,6]],null]],null],[12],[1,[30,6]],[13],[1,\"\\n\"]],[6]],null],[1,\"        \"],[13],[1,\"\\n\"]],[]],null],[41,[30,7,[\"length\"]],[[[1,\"        \"],[10,0],[14,0,\"pretui-question-choices\"],[15,\"data-layout\",[52,[30,8],[30,8],\"cards\"]],[14,\"data-test-pretui-agent-choices\",\"\"],[14,\"data-scopedcss-0f76691535-fcb26ec8f5\",\"\"],[12],[1,\"\\n\"],[42,[28,[31,2],[[28,[31,2],[[30,7]],null]],null],null,[[[1,\"            \"],[11,\"button\"],[24,0,\"pretui-qchoice\"],[16,5,[28,[32,3],[[30,9]],null]],[16,\"aria-pressed\",[52,[30,10],[52,[28,[30,0,[\"isSelected\"]],[[30,9]],null],\"true\",\"false\"]]],[16,\"data-test-pretui-agent-choice\",[30,9,[\"label\"]]],[24,\"data-scopedcss-0f76691535-fcb26ec8f5\",\"\"],[24,4,\"button\"],[4,[32,1],[\"click\",[28,[32,2],[[30,0,[\"pick\"]],[30,9]],null]],null],[12],[1,\"\\n\"],[41,[48,[30,12]],[[[1,\"                \"],[10,1],[14,0,\"pretui-qchoice-content\"],[14,\"data-scopedcss-0f76691535-fcb26ec8f5\",\"\"],[12],[18,12,[[30,9]]],[13],[1,\"\\n              \"]],[]],[[[41,[30,9,[\"image\"]],[[[10,\"img\"],[14,0,\"pretui-qchoice-image\"],[15,\"src\",[30,9,[\"image\"]]],[14,\"alt\",\"\"],[14,\"data-test-pretui-agent-choice-image\",\"\"],[14,\"data-scopedcss-0f76691535-fcb26ec8f5\",\"\"],[12],[13]],[]],null]],[]]],[1,\"\\n              \"],[41,[30,9,[\"swatch\"]],[[[10,1],[14,0,\"pretui-qchoice-swatch\"],[14,\"aria-hidden\",\"true\"],[14,\"data-test-pretui-agent-choice-swatch\",\"\"],[14,\"data-scopedcss-0f76691535-fcb26ec8f5\",\"\"],[12],[13]],[]],null],[1,\"\\n              \"],[10,1],[14,0,\"pretui-qchoice-label\"],[14,\"data-scopedcss-0f76691535-fcb26ec8f5\",\"\"],[12],[1,[30,9,[\"label\"]]],[13],[1,\"\\n              \"],[41,[30,9,[\"sub\"]],[[[10,1],[14,0,\"pretui-qchoice-sub\"],[14,\"data-scopedcss-0f76691535-fcb26ec8f5\",\"\"],[12],[1,[30,9,[\"sub\"]]],[13]],[]],null],[1,\"\\n            \"],[13],[1,\"\\n\"]],[9]],null],[1,\"        \"],[13],[1,\"\\n\"],[41,[30,10],[[[1,\"          \"],[11,\"button\"],[24,0,\"pretui-qconfirm\"],[16,\"disabled\",[52,[30,0,[\"selected\"]],false,true]],[24,\"data-test-pretui-agent-confirm\",\"\"],[24,\"data-scopedcss-0f76691535-fcb26ec8f5\",\"\"],[24,4,\"button\"],[4,[32,1],[\"click\",[30,0,[\"confirmPick\"]]],null],[12],[1,[30,0,[\"confirmLabel\"]]],[13],[1,\"\\n\"]],[]],null]],[]],null],[41,[30,0,[\"offersFreeAnswer\"]],[[[1,\"        \"],[11,\"input\"],[24,0,\"pretui-qinput\"],[24,\"aria-label\",\"Answer\"],[16,\"placeholder\",[52,[30,11],[30,11],\"Or type an answer…\"]],[16,\"disabled\",[30,3]],[24,\"data-scopedcss-0f76691535-fcb26ec8f5\",\"\"],[4,[32,1],[\"keydown\",[30,0,[\"onKey\"]]],null],[12],[13],[1,\"\\n\"]],[]],null]],[]]],[1,\"  \"],[13],[1,\"\\n\"]],[]]]],[\"&attrs\",\"@question\",\"@pending\",\"@readonly\",\"@options\",\"option\",\"@choices\",\"@layout\",\"choice\",\"@confirm\",\"@otherLabel\",\"&choice\"],[\"if\",\"each\",\"-track-array\",\"has-block\",\"yield\"]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/pretui/components/agent-question.gts",
+			"scope": () => [
+				StateGlyph,
+				on,
+				fn,
+				swatchStyle
+			],
+			"isStrictMode": true
+		}), this);
+	}
+};
+//#endregion
+//#region ../pretui/components/meter.gts
+var Meter = class extends Component {
+	get bars() {
+		let segments = this.segmentsCount;
+		let heights = this.args.heights ?? [
+			6,
+			10,
+			14
+		];
+		let out = [];
+		for (let i = 0; i < segments; i++) {
+			let h = heights[i] ?? heights[heights.length - 1];
+			out.push({
+				on: i < this.levelNow,
+				height: [{
+					property: "height",
+					value: `${h / 16}rem`,
+					strength: "arg"
+				}]
+			});
+		}
+		return out;
+	}
+	get segmentsCount() {
+		let segments = this.args.segments ?? 3;
+		return Number.isFinite(segments) ? Math.max(0, Math.ceil(segments)) : 0;
+	}
+	get levelNow() {
+		let level = Number.isFinite(this.args.level) ? Math.ceil(this.args.level) : 0;
+		return Math.max(0, Math.min(level, this.segmentsCount));
+	}
+	get hue() {
+		return [{
+			property: "--pretui-meter-hue",
+			value: cssValue(this.args.hue),
+			strength: "arg"
+		}];
+	}
+	/**
+	* A FALLBACK ROLE LIST, which `role` has always accepted: the first token
+	* the engine understands wins.
+	*
+	* Firefox does not implement `role='meter'` at all, so a bare `role='meter'`
+	* announces there as an unnamed group and the level is simply lost. React
+	* Aria ships exactly this pair for the same reason. Meter-aware engines
+	* still get `meter`; Firefox falls back to `progressbar`, which reads the
+	* same `aria-valuenow`/`valuemin`/`valuemax` already present.
+	*
+	* Held in a getter rather than written inline because ember-template-lint's
+	* `no-invalid-role` validates the whole attribute as a single role name and
+	* rejects the (valid) two-token form.
+	*/
+	meterRole = "meter progressbar";
+	static {
+		setComponentTemplate(templateFactory({
+			"id": "abOyR/xn",
+			"block": "[[[11,1],[24,0,\"pretui-meter\"],[16,\"role\",[30,0,[\"meterRole\"]]],[16,\"aria-valuenow\",[30,0,[\"levelNow\"]]],[24,\"aria-valuemin\",\"0\"],[16,\"aria-valuemax\",[30,0,[\"segmentsCount\"]]],[16,\"aria-label\",[30,1]],[24,\"data-test-pretui-meter\",\"\"],[17,2],[24,\"data-scopedcss-cc6231be3e-768122ff6a\",\"\"],[4,[32,0],[[30,0,[\"hue\"]]],null],[12],[1,\"\\n  \"],[10,1],[14,0,\"pretui-meter-bars\"],[14,\"data-scopedcss-cc6231be3e-768122ff6a\",\"\"],[12],[1,\"\\n\"],[42,[28,[31,1],[[28,[31,1],[[30,0,[\"bars\"]]],null]],null],null,[[[1,\"      \"],[11,1],[24,0,\"pretui-meter-bar\"],[16,\"data-on\",[52,[30,3,[\"on\"]],\"true\"]],[24,\"data-scopedcss-cc6231be3e-768122ff6a\",\"\"],[4,[32,0],[[30,3,[\"height\"]]],null],[12],[13],[1,\"\\n\"]],[3]],null],[1,\"  \"],[13],[1,\"\\n  \"],[41,[30,1],[[[10,1],[14,0,\"pretui-meter-label\"],[14,\"data-scopedcss-cc6231be3e-768122ff6a\",\"\"],[12],[1,[30,1]],[13]],[]],null],[1,\"\\n\"],[13],[1,\"\\n\"]],[\"@label\",\"&attrs\",\"bar\"],[\"each\",\"-track-array\",\"if\"]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/pretui/components/meter.gts",
+			"scope": () => [keepStyle],
+			"isStrictMode": true
+		}), this);
+	}
+};
+//#endregion
+//#region ../pretui/components/recommendation.gts
+var Recommendation = class extends Component {
+	static {
+		decorateFieldV2(this.prototype, "innerKey", [tracked]);
+	}
+	#innerKey = (initializeDeferredDecorator(this, "innerKey"), void 0);
+	static {
+		decorateFieldV2(this.prototype, "innerAccepted", [tracked], function() {
+			return false;
+		});
+	}
+	#innerAccepted = (initializeDeferredDecorator(this, "innerAccepted"), void 0);
+	static {
+		decorateFieldV2(this.prototype, "drawerOpen", [tracked], function() {
+			return false;
+		});
+	}
+	#drawerOpen = (initializeDeferredDecorator(this, "drawerOpen"), void 0);
+	drawerId = guidFor(this) + "-alts";
+	get options() {
+		return this.args.options ?? [];
+	}
+	get activeKey() {
+		return this.args.selectedKey ?? this.innerKey ?? this.options[0]?.key ?? "";
+	}
+	get active() {
+		return this.options.find((o) => o.key === this.activeKey) ?? this.options[0];
+	}
+	get others() {
+		return this.options.filter((o) => o.key !== this.activeKey);
+	}
+	get accepted() {
+		return this.args.accepted ?? this.innerAccepted;
+	}
+	get acceptLabel() {
+		if (this.accepted) return this.args.acceptedLabel ?? "Accepted";
+		return this.active?.cta ?? "Accept";
+	}
+	get alternativesLabel() {
+		return this.args.alternativesLabel ?? "Alternatives";
+	}
+	/** what the live region says when the active option changes */
+	get announcement() {
+		let option = this.active;
+		if (!option) return "";
+		return "Showing: " + option.short + " — confidence " + option.label;
+	}
+	select = (option) => {
+		if (this.args.selectedKey === void 0) this.innerKey = option.key;
+		this.innerAccepted = false;
+		this.drawerOpen = false;
+		this.args.onSelect?.(option);
+	};
+	accept = () => {
+		let option = this.active;
+		if (!option || this.accepted) return;
+		this.innerAccepted = true;
+		this.args.onAccept?.(option);
+	};
+	toggleDrawer = () => this.drawerOpen = !this.drawerOpen;
+	static {
+		setComponentTemplate(templateFactory({
+			"id": "kEB0oxDW",
+			"block": "[[[11,0],[24,0,\"pretui-reco\"],[16,\"data-surface\",[52,[30,1],[30,1],\"card\"]],[16,\"data-accepted\",[52,[30,0,[\"accepted\"]],\"true\"]],[24,\"data-test-pretui-recommendation\",\"\"],[17,2],[24,\"data-scopedcss-64d54c0ab8-e63e25e933\",\"\"],[12],[1,\"\\n  \"],[10,0],[14,0,\"pretui-reco-head\"],[14,\"data-scopedcss-64d54c0ab8-e63e25e933\",\"\"],[12],[1,\"\\n    \"],[10,2],[14,0,\"pretui-reco-question\"],[14,\"data-scopedcss-64d54c0ab8-e63e25e933\",\"\"],[12],[1,[30,3]],[13],[1,\"\\n\"],[41,[30,0,[\"active\"]],[[[1,\"      \"],[10,0],[14,0,\"pretui-reco-body\"],[14,\"data-scopedcss-64d54c0ab8-e63e25e933\",\"\"],[12],[1,\"\\n\"],[41,[48,[30,5]],[[[1,\"          \"],[18,5,[[30,0,[\"active\"]]]],[1,\"\\n\"]],[]],[[[1,\"          \"],[1,[30,0,[\"active\",\"body\"]]],[1,\"\\n\"]],[]]],[1,\"      \"],[13],[1,\"\\n\"]],[]],null],[1,\"  \"],[13],[1,\"\\n\\n  \"],[10,1],[14,0,\"pretui-sr\"],[14,\"role\",\"status\"],[14,\"data-scopedcss-64d54c0ab8-e63e25e933\",\"\"],[12],[1,[30,0,[\"announcement\"]]],[13],[1,\"\\n\\n\"],[41,[30,0,[\"others\",\"length\"]],[[[1,\"    \"],[8,[32,0],[[16,1,[30,0,[\"drawerId\"]]],[24,\"data-scopedcss-64d54c0ab8-e63e25e933\",\"\"]],[[\"@open\"],[[30,0,[\"drawerOpen\"]]]],[[\"default\"],[[[[1,\"\\n      \"],[10,0],[14,0,\"pretui-reco-drawer\"],[14,\"data-scopedcss-64d54c0ab8-e63e25e933\",\"\"],[12],[1,\"\\n        \"],[10,2],[14,0,\"pretui-reco-drawer-cap\"],[15,1,[29,[[30,0,[\"drawerId\"]],\"-cap\"]]],[14,\"data-scopedcss-64d54c0ab8-e63e25e933\",\"\"],[12],[1,\"Other\\n          options\"],[13],[1,\"\\n        \"],[10,\"ul\"],[15,\"aria-labelledby\",[29,[[30,0,[\"drawerId\"]],\"-cap\"]]],[14,\"data-scopedcss-64d54c0ab8-e63e25e933\",\"\"],[12],[1,\"\\n\"],[42,[28,[31,4],[[28,[31,4],[[30,0,[\"others\"]]],null]],null],\"key\",[[[1,\"            \"],[10,\"li\"],[14,\"data-scopedcss-64d54c0ab8-e63e25e933\",\"\"],[12],[1,\"\\n              \"],[11,\"button\"],[24,0,\"pretui-reco-alt\"],[24,\"data-test-pretui-recommendation-alt\",\"\"],[24,\"data-scopedcss-64d54c0ab8-e63e25e933\",\"\"],[24,4,\"button\"],[4,[32,1],[\"click\",[28,[32,2],[[30,0,[\"select\"]],[30,4]],null]],null],[12],[1,\"\\n                \"],[8,[32,3],[[24,\"data-scopedcss-64d54c0ab8-e63e25e933\",\"\"]],[[\"@level\",\"@label\",\"@hue\"],[[30,4,[\"level\"]],[30,4,[\"label\"]],[30,4,[\"hue\"]]]],null],[1,\"\\n                \"],[10,1],[14,0,\"pretui-reco-alt-short\"],[14,\"data-scopedcss-64d54c0ab8-e63e25e933\",\"\"],[12],[1,[30,4,[\"short\"]]],[13],[1,\"\\n              \"],[13],[1,\"\\n            \"],[13],[1,\"\\n\"]],[4]],null],[1,\"        \"],[13],[1,\"\\n      \"],[13],[1,\"\\n    \"]],[]]]]],[1,\"\\n\"]],[]],null],[1,\"\\n  \"],[10,0],[14,0,\"pretui-reco-foot\"],[14,\"data-scopedcss-64d54c0ab8-e63e25e933\",\"\"],[12],[1,\"\\n\"],[41,[30,0,[\"active\"]],[[[1,\"      \"],[8,[32,3],[[24,\"data-scopedcss-64d54c0ab8-e63e25e933\",\"\"]],[[\"@level\",\"@label\",\"@hue\"],[[30,0,[\"active\",\"level\"]],[30,0,[\"active\",\"label\"]],[30,0,[\"active\",\"hue\"]]]],null],[1,\"\\n\"]],[]],null],[1,\"    \"],[10,1],[14,0,\"pretui-reco-foot-actions\"],[14,\"data-scopedcss-64d54c0ab8-e63e25e933\",\"\"],[12],[1,\"\\n\"],[41,[30,0,[\"others\",\"length\"]],[[[1,\"        \"],[8,[32,4],[[16,\"aria-expanded\",[52,[30,0,[\"drawerOpen\"]],\"true\",\"false\"]],[16,\"aria-controls\",[30,0,[\"drawerId\"]]],[24,\"data-test-pretui-recommendation-drawer\",\"\"],[24,\"data-scopedcss-64d54c0ab8-e63e25e933\",\"\"],[4,[32,1],[\"click\",[30,0,[\"toggleDrawer\"]]],null]],[[\"@tone\",\"@appearance\",\"@size\"],[\"neutral\",\"outlined\",\"s\"]],[[\"default\"],[[[[1,[30,0,[\"alternativesLabel\"]]]],[]]]]],[1,\"\\n\"]],[]],null],[1,\"      \"],[8,[32,4],[[16,\"aria-disabled\",[52,[30,0,[\"accepted\"]],\"true\"]],[24,\"data-test-pretui-recommendation-accept\",\"\"],[24,\"data-scopedcss-64d54c0ab8-e63e25e933\",\"\"],[4,[32,1],[\"click\",[30,0,[\"accept\"]]],null]],[[\"@size\",\"@tone\",\"@appearance\",\"@disabled\"],[\"s\",[52,[30,0,[\"accepted\"]],\"neutral\",\"primary\"],[52,[30,0,[\"accepted\"]],\"plain\",\"accent\"],[52,[51,[30,0,[\"active\"]]],true]]],[[\"default\"],[[[[41,[30,0,[\"accepted\"]],[[[8,[32,5],[[24,\"width\",\"14\"],[24,\"height\",\"14\"],[24,\"aria-hidden\",\"true\"],[24,\"data-scopedcss-64d54c0ab8-e63e25e933\",\"\"]],null,null]],[]],null],[1,[30,0,[\"acceptLabel\"]]]],[]]]]],[1,\"\\n    \"],[13],[1,\"\\n  \"],[13],[1,\"\\n\"],[13],[1,\"\\n\\n\"]],[\"@surface\",\"&attrs\",\"@question\",\"option\",\"&body\"],[\"if\",\"has-block\",\"yield\",\"each\",\"-track-array\",\"unless\"]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/pretui/components/recommendation.gts",
+			"scope": () => [
+				Collapse,
+				on,
+				fn,
+				Meter,
+				Button,
+				IconComponent
+			],
+			"isStrictMode": true
+		}), this);
+	}
+};
+//#endregion
+//#region app/components/matrix/ask-user-picker.gts
+function confidenceOf(value, best) {
+	let word = typeof value === "number" ? [
+		"low",
+		"low",
+		"medium",
+		"high"
+	][Math.max(0, Math.min(3, value))] ?? "medium" : (value?.trim() || (best ? "high" : "medium")).toLowerCase();
+	return {
+		level: word === "high" ? 3 : word === "low" ? 1 : 2,
+		label: `${word[0].toUpperCase()}${word.slice(1)} confidence`
+	};
+}
+function optionValue(option) {
+	return option.value ?? option.label ?? option.cardId ?? option.color ?? "";
+}
+var OptionCard = class extends Component {
+	static {
+		decorateFieldV2(this.prototype, "store", [service]);
+	}
+	#store = (initializeDeferredDecorator(this, "store"), void 0);
+	static {
+		decorateFieldV2(this.prototype, "loaded", [use], function() {
+			return resource(({ on }) => {
+				let state = new TrackedObject({});
+				let id = this.args.cardId;
+				let torn = false;
+				this.store.addReference(id);
+				on.cleanup(() => {
+					torn = true;
+					this.store.dropReference(id);
+				});
+				this.store.get(id).then((value) => {
+					if (!torn && isCardInstance(value)) state.card = value;
+				});
+				return state;
+			});
+		});
+	}
+	#loaded = (initializeDeferredDecorator(this, "loaded"), void 0);
+	static {
+		setComponentTemplate(templateFactory({
+			"id": "3zqVA65o",
+			"block": "[[[41,[30,0,[\"loaded\",\"card\"]],[[[1,\"  \"],[8,[32,0],[[24,0,\"option-card-render\"],[24,\"data-scopedcss-a866d611b1-0086fa155e\",\"\"]],[[\"@card\",\"@format\",\"@displayContainer\"],[[30,0,[\"loaded\",\"card\"]],\"fitted\",false]],null],[1,\"\\n\"]],[]],[[[1,\"  \"],[10,1],[14,0,\"option-card-loading\"],[14,\"data-scopedcss-a866d611b1-0086fa155e\",\"\"],[12],[1,\"Loading…\"],[13],[1,\"\\n\"]],[]]]],[],[\"if\"]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/host/app/components/matrix/ask-user-picker.gts",
+			"scope": () => [CardRenderer],
+			"isStrictMode": true
+		}), this);
+	}
+};
+var AskUserPicker = class extends Component {
+	get kind() {
+		let kind = this.args.kind;
+		if (kind === "cards" || kind === "swatches") return kind;
+		let options = this.args.options;
+		if (options.length && options.every((option) => colorOf(option))) return "swatches";
+		return kind === "recommend" ? kind : "options";
+	}
+	get recommendations() {
+		return this.args.options.map((option, index) => {
+			let label = option.label ?? optionValue(option);
+			return {
+				key: optionValue(option),
+				short: label,
+				body: option.detail ? `${label}. ${option.detail}` : label,
+				...confidenceOf(option.confidence, index === 0),
+				cta: `Go with ${label}`
+			};
+		});
+	}
+	acceptRecommendation = (option) => {
+		this.args.onAnswer(option.key);
+	};
+	get layout() {
+		return this.kind === "swatches" ? "swatches" : "cards";
+	}
+	get choices() {
+		if (this.kind === "options" || this.kind === "recommend") return;
+		let swatches = this.kind === "swatches";
+		return this.args.options.map((option) => {
+			let label = option.label ?? option.color ?? optionValue(option);
+			return {
+				label: swatches ? swatchName(label) : label,
+				value: optionValue(option),
+				sub: swatches ? withoutColor(option.detail, label) : option.detail,
+				swatch: swatches ? colorOf(option) : void 0,
+				cardId: option.cardId
+			};
+		});
+	}
+	get optionLabels() {
+		return this.kind === "options" ? this.args.options.map((option) => option.label ?? optionValue(option)) : void 0;
+	}
+	answer = (answer) => {
+		let option = this.kind === "options" ? this.args.options.find((candidate) => (candidate.label ?? optionValue(candidate)) === answer) : void 0;
+		this.args.onAnswer(option ? optionValue(option) : answer);
+	};
+	cardIdOf = (choice) => choice.cardId;
+	static {
+		setComponentTemplate(templateFactory({
+			"id": "1Tr8v/ue",
+			"block": "[[[41,[28,[32,0],[[30,0,[\"kind\"]],\"recommend\"],null],[[[1,\"  \"],[8,[32,1],[[24,0,\"ask-user-picker\"],[24,\"data-kind\",\"recommend\"],[24,\"data-test-ask-user\",\"\"],[24,\"data-scopedcss-a866d611b1-eff04da170\",\"\"]],[[\"@question\",\"@options\",\"@onAccept\",\"@surface\"],[[52,[30,1],[30,1],\"\"],[30,0,[\"recommendations\"]],[30,0,[\"acceptRecommendation\"]],\"plain\"]],null],[1,\"\\n\"]],[]],[[[41,[28,[32,0],[[30,0,[\"kind\"]],\"cards\"],null],[[[1,\"  \"],[8,[32,2],[[24,0,\"ask-user-picker\"],[16,\"data-kind\",[30,0,[\"kind\"]]],[24,\"data-test-ask-user\",\"\"],[24,\"data-scopedcss-a866d611b1-eff04da170\",\"\"]],[[\"@question\",\"@options\",\"@choices\",\"@layout\",\"@confirm\",\"@freeAnswer\",\"@otherLabel\",\"@pending\",\"@onAnswer\"],[[52,[30,1],[30,1],\"\"],[30,0,[\"optionLabels\"]],[30,0,[\"choices\"]],[30,0,[\"layout\"]],[52,[30,0,[\"choices\"]],true,false],[52,[30,2],true,false],\"Something else…\",[30,3],[30,0,[\"answer\"]]]],[[\"choice\"],[[[[1,\"\\n\"],[44,[[28,[30,0,[\"cardIdOf\"]],[[30,4]],null]],[[[41,[30,5],[[[1,\"          \"],[10,1],[14,0,\"option-card-frame\"],[14,\"data-theme\",\"light\"],[14,\"data-scopedcss-a866d611b1-eff04da170\",\"\"],[12],[1,\"\\n            \"],[8,[32,3],[[24,\"data-scopedcss-a866d611b1-eff04da170\",\"\"]],[[\"@cardId\"],[[30,5]]],null],[1,\"\\n          \"],[13],[1,\"\\n\"]],[]],null]],[5]]],[1,\"    \"]],[4]]]]],[1,\"\\n\"]],[]],[[[1,\"  \"],[8,[32,2],[[24,0,\"ask-user-picker\"],[16,\"data-kind\",[30,0,[\"kind\"]]],[24,\"data-test-ask-user\",\"\"],[24,\"data-scopedcss-a866d611b1-eff04da170\",\"\"]],[[\"@question\",\"@options\",\"@choices\",\"@layout\",\"@confirm\",\"@freeAnswer\",\"@otherLabel\",\"@pending\",\"@onAnswer\"],[[52,[30,1],[30,1],\"\"],[30,0,[\"optionLabels\"]],[30,0,[\"choices\"]],[30,0,[\"layout\"]],[52,[30,0,[\"choices\"]],true,false],[52,[30,2],true,false],\"Something else…\",[30,3],[30,0,[\"answer\"]]]],null],[1,\"\\n\"]],[]]]],[]]]],[\"@question\",\"@allowOther\",\"@disabled\",\"choice\",\"cardId\"],[\"if\",\"let\"]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/host/app/components/matrix/ask-user-picker.gts",
+			"scope": () => [
+				eq,
+				Recommendation,
+				AgentQuestion,
+				OptionCard
+			],
+			"isStrictMode": true
+		}), this);
+	}
+};
+var LEADING_MARKS = /^[\p{Extended_Pictographic}\p{So}\uFE0F\s]+/u;
+var WRITTEN_COLOR = /^(#[0-9a-f]{3,8}|(rgba?|hsla?|oklch|oklab)\([^)]*\))$/i;
+var HEX_IN_LABEL = /#[0-9a-f]{6}\b|#[0-9a-f]{3}\b/i;
+var HEX_PART = /\s*[·•|:,–-]?\s*#[0-9a-f]{3,8}\s*[·•|:,–-]?\s*/gi;
+function colorOf(option) {
+	let value = option.value?.trim();
+	return safeColor(option.color) ?? (value && WRITTEN_COLOR.test(value) ? value : void 0) ?? HEX_IN_LABEL.exec(option.label ?? "")?.[0];
+}
+function swatchName(label) {
+	return label.replace(LEADING_MARKS, "").replace(HEX_PART, " ").replace(/\s*[—–-]\s*$/, "").trim() || label;
+}
+function withoutColor(detail, label) {
+	let rest = detail?.replace(HEX_PART, " ").trim();
+	if (!rest) return;
+	let name = label.replace(LEADING_MARKS, "").trim().toLowerCase();
+	return rest.toLowerCase().includes(name) ? void 0 : rest;
+}
+function safeColor(color) {
+	let value = typeof color === "string" ? color.trim() : "";
+	return /^(#[0-9a-f]{3,8}|[a-z]+|rgba?\([\d\s.,%]+\)|hsla?\([\d\s.,%deg]+\))$/i.test(value) ? value : void 0;
+}
+//#endregion
+export { AgentQuestion as n, AskUserPicker as t };

package/bundled-test-harness/assets/ask-user-picker-test-SsZqFm9W.js

@@ -0,0 +1,39 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { wt as setComponentTemplate } from "./cache-DtDz7X5V-Wn8jRDfL.js";
+import { H as templateFactory } from "./index-DaCZcoCY-CgzbilMy.js";
+import "./component-BJO47HTh.js";
+import "./template-factory-ds9s0u8l.js";
+import { t as templateOnly } from "./template-only-6nVzLWF-.js";
+import { h as render } from "./dist-BOAdzfkP.js";
+import { t as AskUserPicker } from "./ask-user-picker-NVRkhKwt.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
+import { lt as setupRenderingTest } from "./mock-matrix-FjsXmU7-.js";
+//#region tests/integration/components/ask-user-picker-test.gts
+var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+(0, import_qunit.module)("Integration | Component | AskUserPicker", function(hooks) {
+	setupRenderingTest(hooks);
+	(0, import_qunit.test)("a recommendation with a blank confidence reads as the default", async function(assert) {
+		let options = [{
+			label: "Teal",
+			confidence: ""
+		}, {
+			label: "Coral",
+			confidence: " "
+		}];
+		let onAnswer = () => void 0;
+		await render(setComponentTemplate(templateFactory({
+			"id": "T1Cetw4u",
+			"block": "[[[8,[32,0],null,[[\"@question\",\"@kind\",\"@options\",\"@onAnswer\"],[\"Which accent?\",\"recommend\",[32,1],[32,2]]],null]],[],[]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/host/tests/integration/components/ask-user-picker-test.gts",
+			"scope": () => [
+				AskUserPicker,
+				options,
+				onAnswer
+			],
+			"isStrictMode": true
+		}), templateOnly()));
+		assert.dom("[data-test-ask-user]").exists();
+		assert.dom("[data-test-ask-user]").containsText("High confidence");
+	});
+});
+//#endregion