Refactor artifacts renderer and add Console component

- Extract ArtifactsToolRenderer from ArtifactsPanel into standalone renderer
- Fix ChatPanel to register ArtifactsToolRenderer instead of panel
- Implement command-specific rendering logic (create/update/rewrite/get/logs/delete)
- Create reusable Console component with copy button and autoscroll toggle
- Replace custom console implementation with ExpandableSection and Console
- Fix Lit reactivity for HtmlArtifact logs using spread operator
- Add Lucide icons (FileCode2, ChevronsDown, Lock) for UI consistency
- Follow skill.ts patterns with renderHeader and state handling
- Add i18n strings for all artifact actions and console features

packages/web-ui/src/tools/renderer-registry.ts

@@ -1,3 +1,5 @@
+import { html, icon, type TemplateResult } from "@mariozechner/mini-lit";
+import { Loader } from "lucide";
 import type { ToolRenderer } from "./types.js";
 
 // Registry of tool renderers
@@ -16,3 +18,39 @@ export function registerToolRenderer(toolName: string, renderer: ToolRenderer):
 export function getToolRenderer(toolName: string): ToolRenderer | undefined {
 	return toolRenderers.get(toolName);
 }
+
+/**
+ * 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 {
+	const statusIcon = (iconComponent: any, color: string) =>
+		html`<span class="inline-block ${color}">${icon(iconComponent, "sm")}</span>`;
+
+	switch (state) {
+		case "inprogress":
+			return html`
+				<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>
+					</div>
+					${statusIcon(Loader, "text-foreground animate-spin")}
+				</div>
+			`;
+		case "complete":
+			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>
+				</div>
+			`;
+		case "error":
+			return html`
+				<div class="flex items-center gap-2 text-sm text-muted-foreground">
+					${statusIcon(toolIcon, "text-destructive")}
+					<span>${text}</span>
+				</div>
+			`;
+	}
+}