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/components/ConsoleBlock.ts

@@ -6,6 +6,7 @@ import { i18n } from "../utils/i18n.js";
 
 export class ConsoleBlock extends LitElement {
 	@property() content: string = "";
+	@property() variant: "default" | "error" = "default";
 	@state() private copied = false;
 
 	protected override createRenderRoot(): HTMLElement | DocumentFragment {
@@ -38,6 +39,9 @@ export class ConsoleBlock extends LitElement {
 	}
 
 	override render() {
+		const isError = this.variant === "error";
+		const textClass = isError ? "text-destructive" : "text-foreground";
+
 		return html`
 			<div class="border border-border rounded-lg overflow-hidden">
 				<div class="flex items-center justify-between px-3 py-1.5 bg-muted border-b border-border">
@@ -52,7 +56,7 @@ export class ConsoleBlock extends LitElement {
 					</button>
 				</div>
 				<div class="console-scroll overflow-auto max-h-64">
-					<pre class="!bg-background !border-0 !rounded-none m-0 p-3 text-xs text-foreground font-mono whitespace-pre-wrap">
+					<pre class="!bg-background !border-0 !rounded-none m-0 p-3 text-xs ${textClass} font-mono whitespace-pre-wrap">
 ${this.content || ""}</pre
 					>
 				</div>