fix(artifacts): make edits more robust (lenient id linking + typography-tolerant matching) (#2379)

* fix(artifacts): link renamed/mismatched edit ids instead of dead-carding

When the model renames or drifts an artifact identifier on edit (e.g. green-button -> blue-button), the update orphaned into a dead 'This edit couldn't be linked to an artifact' card. collectArtifacts now falls back to the most-recently-created artifact when an update id doesn't match (and an artifact exists), attaching the edit as a proper new version. Also hardens the artifacts system prompt: keep the identifier byte-identical across versions, copy old_str verbatim, and don't call tools mid-artifact.

* fix(artifacts): tolerate curly quotes and dashes in edit old_str matching

findMatch now normalizes curly quotes and en/em dashes to ASCII (1:1, length-preserving, so offsets still index raw content) before matching, so a model that emits or omits smart quotes/dashes doesn't fail the edit. Unicode spaces are already covered by the existing whitespace-tolerant regex. Inspired by pi-mono's edit tool; the apply-against-original/reverse-order and hard-error ideas were deliberately not ported (we re-search per pair so there's no stale-offset bug, and have no tool-call retry loop).

* fix(artifacts): match drifted update id by normalized key before latest-artifact fallback

Addresses review: with multiple artifacts, a case/whitespace-drifted id (e.g. 'App' for 'app') was attached to the most-recently-created artifact instead of the one it meant. Now try a normalized (trim+lowercase) id match first; fall back to the latest only when there's no unambiguous normalized match.

Author: gary149

src/lib/server/textGeneration/artifacts.ts

@@ -36,10 +36,11 @@ Editing an artifact you created earlier in the conversation:
 <new_str>replacement text</new_str>
 </artifact>
 
-- Each old_str must match the latest version EXACTLY (including whitespace/indentation) and must be unique within it.
+- Each old_str must match the latest version EXACTLY (including whitespace/indentation) and must be unique within it. Copy it verbatim from the latest version; do not retype, reformat, or re-indent it.
 - Emit at most ONE update block per reply, with all the pairs (up to 4) inside that single block — never one block per pair.
 - For larger changes, re-emit the full artifact with the SAME identifier (this creates a new version).
-- Reuse the same identifier for every version of one artifact; pick a new identifier only for a genuinely different artifact.
+- Keep the identifier BYTE-IDENTICAL across every version, even when the title or content changes (renaming a green button to blue keeps the same identifier). Use a new identifier only for a genuinely different artifact.
+- Do not call tools while creating or editing an artifact; emit the artifact in your reply first, then use tools in a later turn if needed.
 
 Around the tags, briefly tell the user in plain text what you built or changed.`;
 

src/lib/utils/artifacts.spec.ts

@@ -149,6 +149,30 @@ describe("applyArtifactUpdate", () => {
 		]);
 		expect(result.content).toBe("v3");
 	});
+
+	it("matches across smart quotes in content, preserving surrounding text", () => {
+		// content has curly double quotes; old_str uses straight quotes
+		const content = `const greeting = “Hello”; // tag`;
+		const result = applyArtifactUpdate(content, [{ old: `"Hello"`, new: `"Goodbye"` }]);
+		expect(result).toMatchObject({ applied: 1, failed: 0 });
+		expect(result.content).toBe(`const greeting = "Goodbye"; // tag`);
+	});
+
+	it("matches when old_str uses smart quotes and content is straight", () => {
+		const result = applyArtifactUpdate(`x = "v"`, [{ old: `x = “v”`, new: `x = "w"` }]);
+		expect(result).toMatchObject({ applied: 1, failed: 0, content: `x = "w"` });
+	});
+
+	it("matches an em-dash in content against a hyphen in old_str", () => {
+		const result = applyArtifactUpdate(`a — b`, [{ old: `a - b`, new: `a + b` }]);
+		expect(result).toMatchObject({ applied: 1, failed: 0, content: `a + b` });
+	});
+
+	it("matches an NBSP in content against a normal space (whitespace tolerance)", () => {
+		const nbsp = String.fromCharCode(0xa0);
+		const result = applyArtifactUpdate(`foo${nbsp}bar`, [{ old: `foo bar`, new: `foo baz` }]);
+		expect(result).toMatchObject({ applied: 1, failed: 0, content: `foo baz` });
+	});
 });
 
 describe("collectArtifacts", () => {
@@ -252,6 +276,76 @@ describe("collectArtifacts", () => {
 		expect(registry.byMessageOp.get("m1:0")).toEqual({ identifier: "ghost", version: -1 });
 	});
 
+	it("links a renamed-identifier update to the existing artifact", () => {
+		const registry = collectArtifacts([
+			msg(
+				"m1",
+				`<artifact identifier="green-button" type="html" title="Green Button">a green btn</artifact>`
+			),
+			msg(
+				"m2",
+				`<artifact identifier="blue-button" type="update" title="Blue Button"><old_str>green</old_str><new_str>blue</new_str></artifact>`
+			),
+		]);
+		// The update linked to the existing artifact instead of orphaning into a dead card
+		expect(registry.artifacts.size).toBe(1);
+		const versions = registry.artifacts.get("green-button")?.versions;
+		expect(versions).toHaveLength(2);
+		expect(versions?.[1]).toMatchObject({
+			identifier: "green-button",
+			op: "update",
+			title: "Blue Button",
+			content: "a blue btn",
+		});
+		expect(registry.byMessageOp.get("m2:0")).toEqual({ identifier: "green-button", version: 2 });
+	});
+
+	it("links a case-drifted identifier update to the existing artifact", () => {
+		const registry = collectArtifacts([
+			msg("m1", `<artifact identifier="app" type="html" title="App">alpha beta</artifact>`),
+			msg(
+				"m2",
+				`<artifact identifier="App" type="update"><old_str>alpha</old_str><new_str>gamma</new_str></artifact>`
+			),
+		]);
+		expect(registry.artifacts.size).toBe(1);
+		expect(registry.artifacts.get("app")?.versions).toHaveLength(2);
+		expect(registry.artifacts.get("app")?.versions[1]?.content).toBe("gamma beta");
+	});
+
+	it("links an orphan update to the most-recently-created artifact when several exist", () => {
+		const registry = collectArtifacts([
+			msg("m1", `<artifact identifier="first" type="html" title="First">one</artifact>`),
+			msg("m2", `<artifact identifier="second" type="html" title="Second">two</artifact>`),
+			msg(
+				"m3",
+				`<artifact identifier="ghost" type="update"><old_str>two</old_str><new_str>three</new_str></artifact>`
+			),
+		]);
+		// No "ghost" artifact created; the update attached to the most recent ("second")
+		expect(registry.artifacts.has("ghost")).toBe(false);
+		expect(registry.artifacts.get("first")?.versions).toHaveLength(1);
+		expect(registry.artifacts.get("second")?.versions).toHaveLength(2);
+		expect(registry.artifacts.get("second")?.versions[1]?.content).toBe("three");
+		expect(registry.byMessageOp.get("m3:0")).toEqual({ identifier: "second", version: 2 });
+	});
+
+	it("prefers a normalized identifier match over the latest artifact for drifted ids", () => {
+		const registry = collectArtifacts([
+			msg("m1", `<artifact identifier="app" type="html" title="App">alpha</artifact>`),
+			msg("m2", `<artifact identifier="chart" type="html" title="Chart">bravo</artifact>`),
+			msg(
+				"m3",
+				`<artifact identifier="App" type="update"><old_str>alpha</old_str><new_str>gamma</new_str></artifact>`
+			),
+		]);
+		// "App" drifts from "app" by case, so it links there — not the latest ("chart")
+		expect(registry.artifacts.get("app")?.versions).toHaveLength(2);
+		expect(registry.artifacts.get("app")?.versions[1]?.content).toBe("gamma");
+		expect(registry.artifacts.get("chart")?.versions).toHaveLength(1);
+		expect(registry.byMessageOp.get("m3:0")).toEqual({ identifier: "app", version: 2 });
+	});
+
 	it("applies streaming update pairs progressively", () => {
 		const registry = collectArtifacts(
 			[

src/lib/utils/artifacts.ts

@@ -215,24 +215,46 @@ function escapeRegExp(s: string): string {
 	return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 
+/**
+ * Collapse curly quotes and en/em dashes to their ASCII forms so an old_str that
+ * uses (or omits) them still matches content stored the other way. Every
+ * substitution is 1:1, so length is preserved and an offset found in the
+ * normalized string maps straight back to the raw string (this is what lets
+ * findMatch search the normalized text but slice the raw content). Unicode
+ * spaces (NBSP etc.) need no handling here — they are already covered by the
+ * whitespace-tolerant regex below, since JS `\\s` matches them.
+ */
+function normalizeTypography(s: string): string {
+	return s
+		.replace(/[‘’‚‛′]/g, "'")
+		.replace(/[“”„‟″]/g, '"')
+		.replace(/[‐‑‒–—―−]/g, "-");
+}
+
 /**
  * Locate `needle` in `content`. Exact match first; if that fails, retry with
  * every whitespace run collapsed to \s+ — models routinely mis-copy
  * indentation in old_str, and a strict-only match would turn the whole edit
  * into a silent no-op (observed live with Kimi-K2.6 counting spaces).
  * Bracket runs are matched loosely the same way ("<<svg" ≈ "<svg"), since the
- * stored content is normalized but models quote their own raw output.
+ * stored content is normalized but models quote their own raw output. Both
+ * sides are also typography-normalized (curly quotes, en/em dashes) before
+ * matching.
  */
 function findMatch(content: string, needle: string): { start: number; end: number } | null {
-	const exact = content.indexOf(needle);
-	if (exact !== -1) return { start: exact, end: exact + needle.length };
-	const trimmed = needle.trim();
+	// Substitutions are 1:1, so offsets in the normalized strings index the raw
+	// `content` directly — no offset remapping needed.
+	const nContent = normalizeTypography(content);
+	const nNeedle = normalizeTypography(needle);
+	const exact = nContent.indexOf(nNeedle);
+	if (exact !== -1) return { start: exact, end: exact + nNeedle.length };
+	const trimmed = nNeedle.trim();
 	if (!trimmed) return null;
 	try {
 		const pattern = new RegExp(
 			escapeRegExp(trimmed.replace(/<{2,}/g, "<")).replace(/</g, "<+").replace(/\s+/g, "\\s+")
 		);
-		const match = pattern.exec(content);
+		const match = pattern.exec(nContent);
 		if (match) return { start: match.index, end: match.index + match[0].length };
 	} catch {
 		// needle too large/odd for a regex — treat as not found
@@ -307,6 +329,11 @@ export function artifactOpKey(messageId: Message["id"], opIndex: number): string
 	return `${messageId}:${opIndex}`;
 }
 
+/** Case/whitespace-insensitive identifier key, for tolerant update linking. */
+function normalizeIdentifier(id: string): string {
+	return id.trim().toLowerCase();
+}
+
 /**
  * Walk the active conversation path and fold artifact operations into
  * versioned artifacts. Updates apply onto the latest version of the same
@@ -371,15 +398,32 @@ export function collectArtifacts(
 			}
 
 			// update op
+			// Models sometimes rename the identifier when editing (e.g. green-button ->
+			// blue-button) or drift its case/whitespace, which would orphan the update as a
+			// dead "couldn't be linked" card. When the id doesn't match an existing artifact,
+			// first try a normalized (case/whitespace-insensitive) match so a drifted id hits
+			// the artifact it meant; otherwise fall back to the most-recently-created one (an
+			// update is by definition an edit to existing content, and the Map preserves
+			// insertion order). Only leave a disabled card when there's nothing to link to.
+			if (!artifact && artifacts.size > 0) {
+				const wanted = normalizeIdentifier(op.identifier);
+				const normalizedMatches = [...artifacts.values()].filter(
+					(a) => normalizeIdentifier(a.identifier) === wanted
+				);
+				artifact =
+					normalizedMatches.length === 1 ? normalizedMatches[0] : [...artifacts.values()].at(-1);
+			}
 			const base = artifact?.versions.at(-1);
 			if (!artifact || !base) {
-				// Update referencing an unknown artifact: surface a disabled card
 				byMessageOp.set(key, { identifier: op.identifier, version: -1 });
 				continue;
 			}
 			const result = applyArtifactUpdate(base.content, op.pairs);
+			// Use the resolved artifact's identifier (not op.identifier, which may be the
+			// renamed/mismatched one) so the new version attaches to the right artifact and
+			// the card resolves it.
 			const version: ArtifactVersion = {
-				identifier: op.identifier,
+				identifier: artifact.identifier,
 				type: base.type,
 				title: op.title || base.title,
 				language: base.language,
@@ -395,9 +439,9 @@ export function collectArtifacts(
 				failedPairs: Math.max(result.failed, !isLive && op.pairs.length === 0 ? 1 : 0),
 			};
 			artifact.versions.push(version);
-			byMessageOp.set(key, { identifier: op.identifier, version: version.version });
+			byMessageOp.set(key, { identifier: artifact.identifier, version: version.version });
 			if (isLive) {
-				streaming = { identifier: op.identifier, version: version.version };
+				streaming = { identifier: artifact.identifier, version: version.version };
 			}
 		}
 	}