Add clickable artifact pills to tool renderer

- Create ArtifactPill component (similar to SkillPill)
- Renders filename as clickable pill with FileCode2 icon
- Clicking pill opens artifacts panel and selects that artifact
- Update ArtifactsToolRenderer to accept artifactsPanel reference
- Pass artifactsPanel from ChatPanel to renderer on initialization
- Display artifact pill below header for all commands
- Pill only clickable when artifactsPanel reference is available

packages/web-ui/src/tools/artifacts/ArtifactPill.ts

@@ -0,0 +1,23 @@
+import { html, icon, type TemplateResult } from "@mariozechner/mini-lit";
+import { FileCode2 } from "lucide";
+import type { ArtifactsPanel } from "./artifacts.js";
+
+export function ArtifactPill(filename: string, artifactsPanel?: ArtifactsPanel): TemplateResult {
+	const handleClick = () => {
+		if (!artifactsPanel) return;
+		// openArtifact will show the artifact and call onOpen() to open the panel if needed
+		(artifactsPanel as any).openArtifact(filename);
+	};
+
+	return html`
+		<div
+			class="inline-flex items-center gap-2 px-2 py-1 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>
+	`;
+}