From 2d5054e6c0c3d206f6dc9eade0e46a84e281a7d7 Mon Sep 17 00:00:00 2001
From: Mario Zechner <badlogicgames@gmail.com>
Date: Sat, 18 Oct 2025 00:13:16 +0200
Subject: [PATCH] Add reload button to HTML artifact header

Adds a reload button with RefreshCw icon to HTML artifact header buttons.
Clicking the button clears logs and re-executes the HTML content, useful
for manually refreshing when developing HTML artifacts or testing changes.

Changes:
- Import Button, icon from mini-lit and RefreshCw from lucide
- Add reload button to getHeaderButtons() that clears logs and calls executeContent()
- Add "Reload HTML" i18n key in English and German translations
---
 packages/web-ui/src/tools/artifacts/HtmlArtifact.ts | 13 ++++++++++++-
 packages/web-ui/src/utils/i18n.ts                   |  3 +++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/web-ui/src/tools/artifacts/HtmlArtifact.ts b/packages/web-ui/src/tools/artifacts/HtmlArtifact.ts
index 2b2c6cb3..d8964a38 100644
--- a/packages/web-ui/src/tools/artifacts/HtmlArtifact.ts
+++ b/packages/web-ui/src/tools/artifacts/HtmlArtifact.ts
@@ -1,9 +1,10 @@
-import { CopyButton, DownloadButton, PreviewCodeToggle } from "@mariozechner/mini-lit";
+import { Button, CopyButton, DownloadButton, icon, PreviewCodeToggle } from "@mariozechner/mini-lit";
 import hljs from "highlight.js";
 import { html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { createRef, type Ref, ref } from "lit/directives/ref.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { RefreshCw } from "lucide";
 import type { SandboxIframe } from "../../components/SandboxedIframe.js";
 import { type MessageConsumer, RUNTIME_MESSAGE_ROUTER } from "../../components/sandbox/RuntimeMessageRouter.js";
 import type { SandboxRuntimeProvider } from "../../components/sandbox/SandboxRuntimeProvider.js";
@@ -56,6 +57,16 @@ export class HtmlArtifact extends ArtifactElement {
 		return html`
 			<div class="flex items-center gap-2">
 				${toggle}
+				${Button({
+					variant: "ghost",
+					size: "sm",
+					onClick: () => {
+						this.logs = [];
+						this.executeContent(this._content);
+					},
+					title: i18n("Reload HTML"),
+					children: icon(RefreshCw, "sm"),
+				})}
 				${copyButton}
 				${DownloadButton({ content: downloadContent, filename: this.filename, mimeType: "text/html", title: i18n("Download HTML") })}
 			</div>
diff --git a/packages/web-ui/src/utils/i18n.ts b/packages/web-ui/src/utils/i18n.ts
index 206fde82..44293346 100644
--- a/packages/web-ui/src/utils/i18n.ts
+++ b/packages/web-ui/src/utils/i18n.ts
@@ -122,6 +122,7 @@ declare module "@mariozechner/mini-lit" {
 		Artifacts: string;
 		"Copy HTML": string;
 		"Download HTML": string;
+		"Reload HTML": string;
 		"Copy SVG": string;
 		"Download SVG": string;
 		"Copy Markdown": string;
@@ -294,6 +295,7 @@ export const translations = {
 		Artifacts: "Artifacts",
 		"Copy HTML": "Copy HTML",
 		"Download HTML": "Download HTML",
+		"Reload HTML": "Reload HTML",
 		"Copy SVG": "Copy SVG",
 		"Download SVG": "Download SVG",
 		"Copy Markdown": "Copy Markdown",
@@ -470,6 +472,7 @@ export const translations = {
 		Artifacts: "Artefakte",
 		"Copy HTML": "HTML kopieren",
 		"Download HTML": "HTML herunterladen",
+		"Reload HTML": "HTML neu laden",
 		"Copy SVG": "SVG kopieren",
 		"Download SVG": "SVG herunterladen",
 		"Copy Markdown": "Markdown kopieren",