fix(web-ui): add model selector filter, onModelSelect callback, onClose callback, fuzzy search, fix streaming duplicates

packages/web-ui/src/components/AgentInterface.ts

@@ -32,6 +32,8 @@ export class AgentInterface extends LitElement {
 	@property({ attribute: false }) onBeforeToolCall?: (toolName: string, args: any) => boolean | Promise<boolean>;
 	// Optional callback called when cost display is clicked
 	@property({ attribute: false }) onCostClick?: () => void;
+	// Optional callback to override model selector behavior
+	@property({ attribute: false }) onModelSelect?: () => void;
 
 	// References
 	@query("message-editor") private _messageEditor!: MessageEditor;
@@ -151,12 +153,19 @@ export class AgentInterface extends LitElement {
 		this._unsubscribeSession = this.session.subscribe(async (ev: AgentEvent) => {
 			switch (ev.type) {
 				case "message_start":
-				case "message_end":
 				case "turn_start":
 				case "turn_end":
 				case "agent_start":
 					this.requestUpdate();
 					break;
+				case "message_end":
+					// Clear streaming container when a message completes
+					// to prevent duplicate rendering (stable list now has this message)
+					if (this._streamingContainer) {
+						this._streamingContainer.setMessage(null, true);
+					}
+					this.requestUpdate();
+					break;
 				case "agent_end":
 					// Clear streaming container when agent finishes
 					if (this._streamingContainer) {
@@ -364,7 +373,11 @@ export class AgentInterface extends LitElement {
 							}}
 							.onAbort=${() => session.abort()}
 							.onModelSelect=${() => {
-								ModelSelector.open(state.model, (model) => session.setModel(model));
+								if (this.onModelSelect) {
+									this.onModelSelect();
+								} else {
+									ModelSelector.open(state.model, (model) => session.setModel(model));
+								}
 							}}
 							.onThinkingChange=${
 								this.enableThinkingSelector

packages/web-ui/src/components/ProviderKeyInput.ts

@@ -10,7 +10,7 @@ import { Input } from "./Input.js";
 
 // Test models for each provider
 const TEST_MODELS: Record<string, string> = {
-	anthropic: "claude-3-5-haiku-20241022",
+	anthropic: "claude-haiku-4-5",
 	openai: "gpt-4o-mini",
 	google: "gemini-2.5-flash",
 	groq: "openai/gpt-oss-20b",