@draht/web-ui 2026.3.2-2

package/src/components/AttachmentTile.ts

@@ -0,0 +1,107 @@
+import { icon } from "@mariozechner/mini-lit/dist/icons.js";
+import { LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit/html.js";
+import { FileSpreadsheet, FileText, X } from "lucide";
+import { AttachmentOverlay } from "../dialogs/AttachmentOverlay.js";
+import type { Attachment } from "../utils/attachment-utils.js";
+import { i18n } from "../utils/i18n.js";
+
+@customElement("attachment-tile")
+export class AttachmentTile extends LitElement {
+	@property({ type: Object }) attachment!: Attachment;
+	@property({ type: Boolean }) showDelete = false;
+	@property() onDelete?: () => void;
+
+	protected override createRenderRoot(): HTMLElement | DocumentFragment {
+		return this;
+	}
+
+	override connectedCallback(): void {
+		super.connectedCallback();
+		this.style.display = "block";
+		this.classList.add("max-h-16");
+	}
+
+	private handleClick = () => {
+		AttachmentOverlay.open(this.attachment);
+	};
+
+	override render() {
+		const hasPreview = !!this.attachment.preview;
+		const isImage = this.attachment.type === "image";
+		const isPdf = this.attachment.mimeType === "application/pdf";
+		const isExcel =
+			this.attachment.mimeType?.includes("spreadsheetml") ||
+			this.attachment.fileName.toLowerCase().endsWith(".xlsx") ||
+			this.attachment.fileName.toLowerCase().endsWith(".xls");
+
+		// Choose the appropriate icon
+		const getDocumentIcon = () => {
+			if (isExcel) return icon(FileSpreadsheet, "md");
+			return icon(FileText, "md");
+		};
+
+		return html`
+			<div class="relative group inline-block">
+				${
+					hasPreview
+						? html`
+							<div class="relative">
+								<img
+									src="data:${isImage ? this.attachment.mimeType : "image/png"};base64,${this.attachment.preview}"
+									class="w-16 h-16 object-cover rounded-lg border border-input cursor-pointer hover:opacity-80 transition-opacity"
+									alt="${this.attachment.fileName}"
+									title="${this.attachment.fileName}"
+									@click=${this.handleClick}
+								/>
+								${
+									isPdf
+										? html`
+											<!-- PDF badge overlay -->
+											<div class="absolute bottom-0 left-0 right-0 bg-background/90 px-1 py-0.5 rounded-b-lg">
+												<div class="text-[10px] text-muted-foreground text-center font-medium">${i18n("PDF")}</div>
+											</div>
+										`
+										: ""
+								}
+							</div>
+						`
+						: html`
+							<!-- Fallback: document icon + filename -->
+							<div
+								class="w-16 h-16 rounded-lg border border-input cursor-pointer hover:opacity-80 transition-opacity bg-muted text-muted-foreground flex flex-col items-center justify-center p-2"
+								@click=${this.handleClick}
+								title="${this.attachment.fileName}"
+							>
+								${getDocumentIcon()}
+								<div class="text-[10px] text-center truncate w-full">
+									${
+										this.attachment.fileName.length > 10
+											? `${this.attachment.fileName.substring(0, 8)}...`
+											: this.attachment.fileName
+									}
+								</div>
+							</div>
+						`
+				}
+				${
+					this.showDelete
+						? html`
+							<button
+								@click=${(e: Event) => {
+									e.stopPropagation();
+									this.onDelete?.();
+								}}
+								class="absolute -top-1 -right-1 w-5 h-5 bg-background hover:bg-muted text-muted-foreground hover:text-foreground rounded-full flex items-center justify-center opacity-100 hover:opacity-100 [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover:opacity-100 transition-opacity border border-input shadow-sm"
+								title="${i18n("Remove")}"
+							>
+								${icon(X, "xs")}
+							</button>
+						`
+						: ""
+				}
+			</div>
+		`;
+	}
+}

package/src/components/ConsoleBlock.ts

@@ -0,0 +1,72 @@
+import { icon } from "@mariozechner/mini-lit";
+import { LitElement } from "lit";
+import { property, state } from "lit/decorators.js";
+import { html } from "lit/html.js";
+import { Check, Copy } from "lucide";
+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 {
+		return this;
+	}
+
+	override connectedCallback(): void {
+		super.connectedCallback();
+		this.style.display = "block";
+	}
+
+	private async copy() {
+		try {
+			await navigator.clipboard.writeText(this.content || "");
+			this.copied = true;
+			setTimeout(() => {
+				this.copied = false;
+			}, 1500);
+		} catch (e) {
+			console.error("Copy failed", e);
+		}
+	}
+
+	override updated() {
+		// Auto-scroll to bottom on content changes
+		const container = this.querySelector(".console-scroll") as HTMLElement | null;
+		if (container) {
+			container.scrollTop = container.scrollHeight;
+		}
+	}
+
+	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">
+					<span class="text-xs text-muted-foreground font-mono">${i18n("console")}</span>
+					<button
+						@click=${() => this.copy()}
+						class="flex items-center gap-1 px-2 py-0.5 text-xs rounded hover:bg-accent text-muted-foreground hover:text-accent-foreground transition-colors"
+						title="${i18n("Copy output")}"
+					>
+						${this.copied ? icon(Check, "sm") : icon(Copy, "sm")}
+						${this.copied ? html`<span>${i18n("Copied!")}</span>` : ""}
+					</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 ${textClass} font-mono whitespace-pre-wrap">
+${this.content || ""}</pre
+					>
+				</div>
+			</div>
+		`;
+	}
+}
+
+// Register custom element
+if (!customElements.get("console-block")) {
+	customElements.define("console-block", ConsoleBlock);
+}

package/src/components/CustomProviderCard.ts

@@ -0,0 +1,100 @@
+import { i18n } from "@mariozechner/mini-lit";
+import { Button } from "@mariozechner/mini-lit/dist/Button.js";
+import { html, LitElement, type TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import type { CustomProvider } from "../storage/stores/custom-providers-store.js";
+
+@customElement("custom-provider-card")
+export class CustomProviderCard extends LitElement {
+	@property({ type: Object }) provider!: CustomProvider;
+	@property({ type: Boolean }) isAutoDiscovery = false;
+	@property({ type: Object }) status?: { modelCount: number; status: "connected" | "disconnected" | "checking" };
+	@property() onRefresh?: (provider: CustomProvider) => void;
+	@property() onEdit?: (provider: CustomProvider) => void;
+	@property() onDelete?: (provider: CustomProvider) => void;
+
+	protected createRenderRoot() {
+		return this;
+	}
+
+	private renderStatus(): TemplateResult {
+		if (!this.isAutoDiscovery) {
+			return html`
+				<div class="text-xs text-muted-foreground mt-1">
+					${i18n("Models")}: ${this.provider.models?.length || 0}
+				</div>
+			`;
+		}
+
+		if (!this.status) return html``;
+
+		const statusIcon =
+			this.status.status === "connected"
+				? html`<span class="text-green-500">●</span>`
+				: this.status.status === "checking"
+					? html`<span class="text-yellow-500">●</span>`
+					: html`<span class="text-red-500">●</span>`;
+
+		const statusText =
+			this.status.status === "connected"
+				? `${this.status.modelCount} ${i18n("models")}`
+				: this.status.status === "checking"
+					? i18n("Checking...")
+					: i18n("Disconnected");
+
+		return html`
+			<div class="text-xs text-muted-foreground mt-1 flex items-center gap-1">
+				${statusIcon} ${statusText}
+			</div>
+		`;
+	}
+
+	render(): TemplateResult {
+		return html`
+			<div class="border border-border rounded-lg p-4 space-y-2">
+				<div class="flex items-center justify-between">
+					<div class="flex-1">
+						<div class="font-medium text-sm text-foreground">${this.provider.name}</div>
+						<div class="text-xs text-muted-foreground mt-1">
+							<span class="capitalize">${this.provider.type}</span>
+							${this.provider.baseUrl ? html` • ${this.provider.baseUrl}` : ""}
+						</div>
+						${this.renderStatus()}
+					</div>
+					<div class="flex gap-2">
+						${
+							this.isAutoDiscovery && this.onRefresh
+								? Button({
+										onClick: () => this.onRefresh?.(this.provider),
+										variant: "ghost",
+										size: "sm",
+										children: i18n("Refresh"),
+									})
+								: ""
+						}
+						${
+							this.onEdit
+								? Button({
+										onClick: () => this.onEdit?.(this.provider),
+										variant: "ghost",
+										size: "sm",
+										children: i18n("Edit"),
+									})
+								: ""
+						}
+						${
+							this.onDelete
+								? Button({
+										onClick: () => this.onDelete?.(this.provider),
+										variant: "ghost",
+										size: "sm",
+										children: i18n("Delete"),
+									})
+								: ""
+						}
+					</div>
+				</div>
+			</div>
+		`;
+	}
+}

package/src/components/ExpandableSection.ts

@@ -0,0 +1,46 @@
+import { icon } from "@mariozechner/mini-lit";
+import { html, LitElement, type TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { ChevronDown, ChevronRight } from "lucide";
+
+/**
+ * Reusable expandable section component for tool renderers.
+ * Captures children in connectedCallback and re-renders them in the details area.
+ */
+@customElement("expandable-section")
+export class ExpandableSection extends LitElement {
+	@property() summary!: string;
+	@property({ type: Boolean }) defaultExpanded = false;
+	@state() private expanded = false;
+	private capturedChildren: Node[] = [];
+
+	protected createRenderRoot() {
+		return this; // light DOM
+	}
+
+	override connectedCallback() {
+		super.connectedCallback();
+		// Capture children before first render
+		this.capturedChildren = Array.from(this.childNodes);
+		// Clear children (we'll re-insert them in render)
+		this.innerHTML = "";
+		this.expanded = this.defaultExpanded;
+	}
+
+	override render(): TemplateResult {
+		return html`
+			<div>
+				<button
+					@click=${() => {
+						this.expanded = !this.expanded;
+					}}
+					class="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors w-full text-left"
+				>
+					${icon(this.expanded ? ChevronDown : ChevronRight, "sm")}
+					<span>${this.summary}</span>
+				</button>
+				${this.expanded ? html`<div class="mt-2">${this.capturedChildren}</div>` : ""}
+			</div>
+		`;
+	}
+}

package/src/components/Input.ts

@@ -0,0 +1,113 @@
+import { type BaseComponentProps, fc } from "@mariozechner/mini-lit/dist/mini.js";
+import { html } from "lit";
+import { type Ref, ref } from "lit/directives/ref.js";
+import { i18n } from "../utils/i18n.js";
+
+export type InputType = "text" | "email" | "password" | "number" | "url" | "tel" | "search";
+export type InputSize = "sm" | "md" | "lg";
+
+export interface InputProps extends BaseComponentProps {
+	type?: InputType;
+	size?: InputSize;
+	value?: string;
+	placeholder?: string;
+	label?: string;
+	error?: string;
+	disabled?: boolean;
+	required?: boolean;
+	name?: string;
+	autocomplete?: string;
+	min?: number;
+	max?: number;
+	step?: number;
+	inputRef?: Ref<HTMLInputElement>;
+	onInput?: (e: Event) => void;
+	onChange?: (e: Event) => void;
+	onKeyDown?: (e: KeyboardEvent) => void;
+	onKeyUp?: (e: KeyboardEvent) => void;
+}
+
+export const Input = fc<InputProps>(
+	({
+		type = "text",
+		size = "md",
+		value = "",
+		placeholder = "",
+		label = "",
+		error = "",
+		disabled = false,
+		required = false,
+		name = "",
+		autocomplete = "",
+		min,
+		max,
+		step,
+		inputRef,
+		onInput,
+		onChange,
+		onKeyDown,
+		onKeyUp,
+		className = "",
+	}) => {
+		const sizeClasses = {
+			sm: "h-8 px-3 py-1 text-sm",
+			md: "h-9 px-3 py-1 text-sm md:text-sm",
+			lg: "h-10 px-4 py-1 text-base",
+		};
+
+		const baseClasses =
+			"flex w-full min-w-0 rounded-md border bg-transparent text-foreground shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium";
+		const interactionClasses =
+			"placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground";
+		const focusClasses = "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]";
+		const darkClasses = "dark:bg-input/30";
+		const stateClasses = error
+			? "border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40"
+			: "border-input";
+		const disabledClasses = "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50";
+
+		const handleInput = (e: Event) => {
+			onInput?.(e);
+		};
+
+		const handleChange = (e: Event) => {
+			onChange?.(e);
+		};
+
+		return html`
+			<div class="flex flex-col gap-1.5 ${className}">
+				${
+					label
+						? html`
+							<label class="text-sm font-medium text-foreground">
+								${label} ${required ? html`<span class="text-destructive">${i18n("*")}</span>` : ""}
+							</label>
+						`
+						: ""
+				}
+				<input
+					type="${type}"
+					class="${baseClasses} ${
+						sizeClasses[size]
+					} ${interactionClasses} ${focusClasses} ${darkClasses} ${stateClasses} ${disabledClasses}"
+					.value=${value}
+					placeholder="${placeholder}"
+					?disabled=${disabled}
+					?required=${required}
+					?aria-invalid=${!!error}
+					name="${name}"
+					autocomplete="${autocomplete}"
+					min="${min ?? ""}"
+					max="${max ?? ""}"
+					step="${step ?? ""}"
+					@input=${handleInput}
+					@change=${handleChange}
+					@keydown=${onKeyDown}
+					@keyup=${onKeyUp}
+					${inputRef ? ref(inputRef) : ""}
+				/>
+				${error ? html`<span class="text-sm text-destructive">${error}</span>` : ""}
+			</div>
+		`;
+	},
+);