From 58b9c36268d538d39408ee474ad03f59d52d0f96 Mon Sep 17 00:00:00 2001
From: Mario Zechner <badlogicgames@gmail.com>
Date: Wed, 8 Oct 2025 14:12:02 +0200
Subject: [PATCH] Make renderHeader and renderCollapsibleHeader accept string |
 TemplateResult

- Update renderHeader and renderCollapsibleHeader in renderer-registry.ts to accept `text: string | TemplateResult`
- Remove duplicated renderCollapsibleHeaderWithPill helper in artifacts-tool-renderer.ts
- Update all artifact renderer calls to use renderHeaderWithPill() inline
- Remove all separate pill rendering below headers

This allows artifact pills to be rendered inline with header text without code duplication.
---
 packages/ai/src/models.generated.ts           | 123 ++++++++----------
 .../src/tools/artifacts/ArtifactPill.ts       |   8 +-
 .../artifacts/artifacts-tool-renderer.ts      |  40 +++---
 .../web-ui/src/tools/renderer-registry.ts     |  16 ++-
 4 files changed, 84 insertions(+), 103 deletions(-)

diff --git a/packages/ai/src/models.generated.ts b/packages/ai/src/models.generated.ts
index 448cc03c..f7008755 100644
--- a/packages/ai/src/models.generated.ts
+++ b/packages/ai/src/models.generated.ts
@@ -1711,8 +1711,8 @@ export const MODELS = {
 			reasoning: true,
 			input: ["text", "image"],
 			cost: {
-				input: 0.19,
-				output: 0.78,
+				input: 0.3,
+				output: 1.2,
 				cacheRead: 0,
 				cacheWrite: 0,
 			},
@@ -2042,23 +2042,6 @@ export const MODELS = {
 			contextWindow: 131072,
 			maxTokens: 131072,
 		} satisfies Model<"openai-completions">,
-		"deepseek/deepseek-chat-v3.1:free": {
-			id: "deepseek/deepseek-chat-v3.1:free",
-			name: "DeepSeek: DeepSeek V3.1 (free)",
-			api: "openai-completions",
-			provider: "openrouter",
-			baseUrl: "https://openrouter.ai/api/v1",
-			reasoning: true,
-			input: ["text"],
-			cost: {
-				input: 0,
-				output: 0,
-				cacheRead: 0,
-				cacheWrite: 0,
-			},
-			contextWindow: 163800,
-			maxTokens: 4096,
-		} satisfies Model<"openai-completions">,
 		"deepseek/deepseek-chat-v3.1": {
 			id: "deepseek/deepseek-chat-v3.1",
 			name: "DeepSeek: DeepSeek V3.1",
@@ -2238,13 +2221,13 @@ export const MODELS = {
 			reasoning: true,
 			input: ["text"],
 			cost: {
-				input: 0.14,
-				output: 0.86,
+				input: 0,
+				output: 0,
 				cacheRead: 0,
 				cacheWrite: 0,
 			},
-			contextWindow: 131072,
-			maxTokens: 131072,
+			contextWindow: 32768,
+			maxTokens: 32768,
 		} satisfies Model<"openai-completions">,
 		"qwen/qwen3-235b-a22b-thinking-2507": {
 			id: "qwen/qwen3-235b-a22b-thinking-2507",
@@ -3300,23 +3283,6 @@ export const MODELS = {
 			contextWindow: 32768,
 			maxTokens: 4096,
 		} satisfies Model<"openai-completions">,
-		"cohere/command-r-plus-08-2024": {
-			id: "cohere/command-r-plus-08-2024",
-			name: "Cohere: Command R+ (08-2024)",
-			api: "openai-completions",
-			provider: "openrouter",
-			baseUrl: "https://openrouter.ai/api/v1",
-			reasoning: false,
-			input: ["text"],
-			cost: {
-				input: 2.5,
-				output: 10,
-				cacheRead: 0,
-				cacheWrite: 0,
-			},
-			contextWindow: 128000,
-			maxTokens: 4000,
-		} satisfies Model<"openai-completions">,
 		"cohere/command-r-08-2024": {
 			id: "cohere/command-r-08-2024",
 			name: "Cohere: Command R (08-2024)",
@@ -3334,6 +3300,23 @@ export const MODELS = {
 			contextWindow: 128000,
 			maxTokens: 4000,
 		} satisfies Model<"openai-completions">,
+		"cohere/command-r-plus-08-2024": {
+			id: "cohere/command-r-plus-08-2024",
+			name: "Cohere: Command R+ (08-2024)",
+			api: "openai-completions",
+			provider: "openrouter",
+			baseUrl: "https://openrouter.ai/api/v1",
+			reasoning: false,
+			input: ["text"],
+			cost: {
+				input: 2.5,
+				output: 10,
+				cacheRead: 0,
+				cacheWrite: 0,
+			},
+			contextWindow: 128000,
+			maxTokens: 4000,
+		} satisfies Model<"openai-completions">,
 		"microsoft/phi-3.5-mini-128k-instruct": {
 			id: "microsoft/phi-3.5-mini-128k-instruct",
 			name: "Microsoft: Phi-3.5 Mini 128K Instruct",
@@ -3368,22 +3351,22 @@ export const MODELS = {
 			contextWindow: 65000,
 			maxTokens: 4096,
 		} satisfies Model<"openai-completions">,
-		"meta-llama/llama-3.1-8b-instruct": {
-			id: "meta-llama/llama-3.1-8b-instruct",
-			name: "Meta: Llama 3.1 8B Instruct",
+		"meta-llama/llama-3.1-70b-instruct": {
+			id: "meta-llama/llama-3.1-70b-instruct",
+			name: "Meta: Llama 3.1 70B Instruct",
 			api: "openai-completions",
 			provider: "openrouter",
 			baseUrl: "https://openrouter.ai/api/v1",
 			reasoning: false,
 			input: ["text"],
 			cost: {
-				input: 0.02,
-				output: 0.03,
+				input: 0.39999999999999997,
+				output: 0.39999999999999997,
 				cacheRead: 0,
 				cacheWrite: 0,
 			},
-			contextWindow: 16384,
-			maxTokens: 16384,
+			contextWindow: 131072,
+			maxTokens: 4096,
 		} satisfies Model<"openai-completions">,
 		"meta-llama/llama-3.1-405b-instruct": {
 			id: "meta-llama/llama-3.1-405b-instruct",
@@ -3402,22 +3385,22 @@ export const MODELS = {
 			contextWindow: 32768,
 			maxTokens: 16384,
 		} satisfies Model<"openai-completions">,
-		"meta-llama/llama-3.1-70b-instruct": {
-			id: "meta-llama/llama-3.1-70b-instruct",
-			name: "Meta: Llama 3.1 70B Instruct",
+		"meta-llama/llama-3.1-8b-instruct": {
+			id: "meta-llama/llama-3.1-8b-instruct",
+			name: "Meta: Llama 3.1 8B Instruct",
 			api: "openai-completions",
 			provider: "openrouter",
 			baseUrl: "https://openrouter.ai/api/v1",
 			reasoning: false,
 			input: ["text"],
 			cost: {
-				input: 0.39999999999999997,
-				output: 0.39999999999999997,
+				input: 0.02,
+				output: 0.03,
 				cacheRead: 0,
 				cacheWrite: 0,
 			},
 			contextWindow: 131072,
-			maxTokens: 4096,
+			maxTokens: 16384,
 		} satisfies Model<"openai-completions">,
 		"mistralai/mistral-nemo": {
 			id: "mistralai/mistral-nemo",
@@ -3589,23 +3572,6 @@ export const MODELS = {
 			contextWindow: 128000,
 			maxTokens: 4096,
 		} satisfies Model<"openai-completions">,
-		"mistralai/mistral-small": {
-			id: "mistralai/mistral-small",
-			name: "Mistral Small",
-			api: "openai-completions",
-			provider: "openrouter",
-			baseUrl: "https://openrouter.ai/api/v1",
-			reasoning: false,
-			input: ["text"],
-			cost: {
-				input: 0.19999999999999998,
-				output: 0.6,
-				cacheRead: 0,
-				cacheWrite: 0,
-			},
-			contextWindow: 32768,
-			maxTokens: 4096,
-		} satisfies Model<"openai-completions">,
 		"mistralai/mistral-tiny": {
 			id: "mistralai/mistral-tiny",
 			name: "Mistral Tiny",
@@ -3623,6 +3589,23 @@ export const MODELS = {
 			contextWindow: 32768,
 			maxTokens: 4096,
 		} satisfies Model<"openai-completions">,
+		"mistralai/mistral-small": {
+			id: "mistralai/mistral-small",
+			name: "Mistral Small",
+			api: "openai-completions",
+			provider: "openrouter",
+			baseUrl: "https://openrouter.ai/api/v1",
+			reasoning: false,
+			input: ["text"],
+			cost: {
+				input: 0.19999999999999998,
+				output: 0.6,
+				cacheRead: 0,
+				cacheWrite: 0,
+			},
+			contextWindow: 32768,
+			maxTokens: 4096,
+		} satisfies Model<"openai-completions">,
 		"mistralai/mixtral-8x7b-instruct": {
 			id: "mistralai/mixtral-8x7b-instruct",
 			name: "Mistral: Mixtral 8x7B Instruct",
diff --git a/packages/web-ui/src/tools/artifacts/ArtifactPill.ts b/packages/web-ui/src/tools/artifacts/ArtifactPill.ts
index b57157fd..2e22b2c7 100644
--- a/packages/web-ui/src/tools/artifacts/ArtifactPill.ts
+++ b/packages/web-ui/src/tools/artifacts/ArtifactPill.ts
@@ -10,14 +10,14 @@ export function ArtifactPill(filename: string, artifactsPanel?: ArtifactsPanel):
 	};
 
 	return html`
-		<div
-			class="inline-flex items-center gap-2 px-2 py-1 text-xs bg-muted/50 border border-border rounded ${
+		<span
+			class="inline-flex items-center gap-1 px-2 py-0.5 text-xs bg-muted/50 border border-border rounded ${
 				artifactsPanel ? "cursor-pointer hover:bg-muted transition-colors" : ""
 			}"
 			@click=${artifactsPanel ? handleClick : null}
 		>
 			${icon(FileCode2, "sm")}
-			<span class="font-mono text-foreground">${filename}</span>
-		</div>
+			<span class="text-foreground">${filename}</span>
+		</span>
 	`;
 }
diff --git a/packages/web-ui/src/tools/artifacts/artifacts-tool-renderer.ts b/packages/web-ui/src/tools/artifacts/artifacts-tool-renderer.ts
index 3e7ec337..0237662f 100644
--- a/packages/web-ui/src/tools/artifacts/artifacts-tool-renderer.ts
+++ b/packages/web-ui/src/tools/artifacts/artifacts-tool-renderer.ts
@@ -1,8 +1,8 @@
-import { Diff, html, type TemplateResult } from "@mariozechner/mini-lit";
+import { Diff, html, icon, iconDOM, type TemplateResult } from "@mariozechner/mini-lit";
 import "@mariozechner/mini-lit/dist/CodeBlock.js";
 import type { ToolResultMessage } from "@mariozechner/pi-ai";
 import { createRef, ref } from "lit/directives/ref.js";
-import { FileCode2 } from "lucide";
+import { ChevronDown, ChevronRight, FileCode2, Loader } from "lucide";
 import "../../components/ConsoleBlock.js";
 import { i18n } from "../../utils/i18n.js";
 import { renderCollapsibleHeader, renderHeader } from "../renderer-registry.js";
@@ -74,9 +74,12 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
 			return labels[command] || { streaming: i18n("Processing artifact"), complete: i18n("Processed artifact") };
 		};
 
-		// Helper to render artifact pill if filename present
-		const renderPill = (filename?: string): TemplateResult | string => {
-			return filename ? ArtifactPill(filename, this.artifactsPanel) : "";
+		// Helper to render header text with inline artifact pill
+		const renderHeaderWithPill = (labelText: string, filename?: string): TemplateResult => {
+			if (filename) {
+				return html`<span>${labelText} ${ArtifactPill(filename, this.artifactsPanel)}</span>`;
+			}
+			return html`<span>${labelText}</span>`;
 		};
 
 		// Error handling
@@ -96,8 +99,7 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
 
 				return html`
 					<div>
-						${renderCollapsibleHeader(state, FileCode2, headerText, contentRef, chevronRef, false)}
-						${renderPill(filename) ? html`<div class="mt-2">${renderPill(filename)}</div>` : ""}
+						${renderCollapsibleHeader(state, FileCode2, renderHeaderWithPill(headerText, filename), contentRef, chevronRef, false)}
 						<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300 space-y-3">
 							${content ? html`<code-block .code=${content} language=${getLanguageFromFilename(filename)}></code-block>` : ""}
 							${
@@ -132,8 +134,7 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
 				const fileContent = result.output || i18n("(no output)");
 				return html`
 					<div>
-						${renderCollapsibleHeader(state, FileCode2, headerText, contentRef, chevronRef, false)}
-						${renderPill(filename) ? html`<div class="mt-2">${renderPill(filename)}</div>` : ""}
+						${renderCollapsibleHeader(state, FileCode2, renderHeaderWithPill(headerText, filename), contentRef, chevronRef, false)}
 						<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300">
 							<code-block .code=${fileContent} language=${getLanguageFromFilename(filename)}></code-block>
 						</div>
@@ -146,8 +147,7 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
 				const logs = result.output || i18n("(no output)");
 				return html`
 					<div>
-						${renderCollapsibleHeader(state, FileCode2, headerText, contentRef, chevronRef, false)}
-						${renderPill(filename) ? html`<div class="mt-2">${renderPill(filename)}</div>` : ""}
+						${renderCollapsibleHeader(state, FileCode2, renderHeaderWithPill(headerText, filename), contentRef, chevronRef, false)}
 						<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300">
 							<console-block .content=${logs}></console-block>
 						</div>
@@ -163,8 +163,7 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
 
 				return html`
 					<div>
-						${renderCollapsibleHeader(state, FileCode2, headerText, contentRef, chevronRef, false)}
-						${renderPill(filename) ? html`<div class="mt-2">${renderPill(filename)}</div>` : ""}
+						${renderCollapsibleHeader(state, FileCode2, renderHeaderWithPill(headerText, filename), contentRef, chevronRef, false)}
 						<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300 space-y-3">
 							${codeContent ? html`<code-block .code=${codeContent} language=${getLanguageFromFilename(filename)}></code-block>` : ""}
 							${isHtml && logs ? html`<console-block .content=${logs}></console-block>` : ""}
@@ -176,8 +175,7 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
 			// For DELETE, just show header
 			return html`
 				<div class="space-y-3">
-					${renderHeader(state, FileCode2, headerText)}
-					${renderPill(filename) ? html`<div class="mt-2">${renderPill(filename)}</div>` : ""}
+					${renderHeader(state, FileCode2, renderHeaderWithPill(headerText, filename))}
 				</div>
 			`;
 		}
@@ -200,8 +198,7 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
 				case "rewrite":
 					return html`
 						<div>
-							${renderCollapsibleHeader(state, FileCode2, headerText, contentRef, chevronRef, false)}
-							${renderPill(filename) ? html`<div class="mt-2">${renderPill(filename)}</div>` : ""}
+							${renderCollapsibleHeader(state, FileCode2, renderHeaderWithPill(headerText, filename), contentRef, chevronRef, false)}
 							<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300">
 								${
 									content
@@ -215,8 +212,7 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
 				case "update":
 					return html`
 						<div>
-							${renderCollapsibleHeader(state, FileCode2, headerText, contentRef, chevronRef, false)}
-							${renderPill(filename) ? html`<div class="mt-2">${renderPill(filename)}</div>` : ""}
+							${renderCollapsibleHeader(state, FileCode2, renderHeaderWithPill(headerText, filename), contentRef, chevronRef, false)}
 							<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300">
 								${
 									old_str !== undefined && new_str !== undefined
@@ -231,8 +227,7 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
 				case "logs":
 					return html`
 						<div>
-							${renderCollapsibleHeader(state, FileCode2, headerText, contentRef, chevronRef, false)}
-							${renderPill(filename) ? html`<div class="mt-2">${renderPill(filename)}</div>` : ""}
+							${renderCollapsibleHeader(state, FileCode2, renderHeaderWithPill(headerText, filename), contentRef, chevronRef, false)}
 							<div ${ref(contentRef)} class="max-h-0 overflow-hidden transition-all duration-300"></div>
 						</div>
 					`;
@@ -241,8 +236,7 @@ export class ArtifactsToolRenderer implements ToolRenderer<ArtifactsParams, unde
 				default:
 					return html`
 						<div>
-							${renderHeader(state, FileCode2, headerText)}
-							${renderPill(filename) ? html`<div class="mt-2">${renderPill(filename)}</div>` : ""}
+							${renderHeader(state, FileCode2, renderHeaderWithPill(headerText, filename))}
 						</div>
 					`;
 			}
diff --git a/packages/web-ui/src/tools/renderer-registry.ts b/packages/web-ui/src/tools/renderer-registry.ts
index d951b10d..ac5f2b8f 100644
--- a/packages/web-ui/src/tools/renderer-registry.ts
+++ b/packages/web-ui/src/tools/renderer-registry.ts
@@ -25,7 +25,11 @@ export function getToolRenderer(toolName: string): ToolRenderer | undefined {
  * Helper to render a header for tool renderers
  * Shows icon on left when complete/error, spinner on right when in progress
  */
-export function renderHeader(state: "inprogress" | "complete" | "error", toolIcon: any, text: string): TemplateResult {
+export function renderHeader(
+	state: "inprogress" | "complete" | "error",
+	toolIcon: any,
+	text: string | TemplateResult,
+): TemplateResult {
 	const statusIcon = (iconComponent: any, color: string) =>
 		html`<span class="inline-block ${color}">${icon(iconComponent, "sm")}</span>`;
 
@@ -35,7 +39,7 @@ export function renderHeader(state: "inprogress" | "complete" | "error", toolIco
 				<div class="flex items-center justify-between gap-2 text-sm text-muted-foreground">
 					<div class="flex items-center gap-2">
 						${statusIcon(toolIcon, "text-foreground")}
-						<span>${text}</span>
+						${text}
 					</div>
 					${statusIcon(Loader, "text-foreground animate-spin")}
 				</div>
@@ -44,14 +48,14 @@ export function renderHeader(state: "inprogress" | "complete" | "error", toolIco
 			return html`
 				<div class="flex items-center gap-2 text-sm text-muted-foreground">
 					${statusIcon(toolIcon, "text-green-600 dark:text-green-500")}
-					<span>${text}</span>
+					${text}
 				</div>
 			`;
 		case "error":
 			return html`
 				<div class="flex items-center gap-2 text-sm text-muted-foreground">
 					${statusIcon(toolIcon, "text-destructive")}
-					<span>${text}</span>
+					${text}
 				</div>
 			`;
 	}
@@ -64,7 +68,7 @@ export function renderHeader(state: "inprogress" | "complete" | "error", toolIco
 export function renderCollapsibleHeader(
 	state: "inprogress" | "complete" | "error",
 	toolIcon: any,
-	text: string,
+	text: string | TemplateResult,
 	contentRef: Ref<HTMLElement>,
 	chevronRef: Ref<HTMLElement>,
 	defaultExpanded = false,
@@ -102,7 +106,7 @@ export function renderCollapsibleHeader(
 			<div class="flex items-center gap-2">
 				${state === "inprogress" ? statusIcon(Loader, "text-foreground animate-spin") : ""}
 				${statusIcon(toolIcon, toolIconColor)}
-				<span>${text}</span>
+				${text}
 			</div>
 			<span class="inline-block text-muted-foreground" ${ref(chevronRef)}>
 				${icon(defaultExpanded ? ChevronDown : ChevronRight, "sm")}