fix: preserve IME composition in Enter handlers

src/app/components/add-callback-dialog/add-callback-dialog.component.html

@@ -58,7 +58,7 @@ <h2 mat-dialog-title>{{ isEditMode ? 'Edit Callback' : 'Add ' + callbackType + '
       #callbackNameInput="ngModel"
       (ngModelChange)="validate()"
       [errorStateMatcher]="matcher"
-      (keydown.enter)="addCallback()"
+      (keydown.enter)="addCallback($event)"
       matInput>
     <mat-error *ngIf="callbackNameInput.hasError('duplicateName')">Same callback name has been used</mat-error>
     <mat-error *ngIf="callbackNameInput.hasError('hasSpaces')">Cannot have callback consist of two words</mat-error>

src/app/components/add-callback-dialog/add-callback-dialog.component.spec.ts

@@ -16,6 +16,7 @@
  */
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 // 1p-ONLY-IMPORTS: import {beforeEach, describe, expect, it}
@@ -101,6 +102,20 @@ describe('AddCallbackDialogComponent', () => {
     expect(mockDialogRef.close).not.toHaveBeenCalled();
   });
 
+  it('should not submit while an IME composition is active', () => {
+    component.callbackName = 'テスト';
+    component.callbackType = 'before_agent';
+    fixture.detectChanges();
+
+    const input = fixture.debugElement.query(By.css('input'));
+    input.triggerEventHandler(
+      'keydown.enter',
+      new KeyboardEvent('keydown', {key: 'Enter', isComposing: true}),
+    );
+
+    expect(mockDialogRef.close).not.toHaveBeenCalled();
+  });
+
   it('should close dialog without data when cancel is called', () => {
     component.cancel();
 

src/app/components/add-callback-dialog/add-callback-dialog.component.ts

@@ -35,6 +35,7 @@ import { MatSelectModule } from '@angular/material/select';
 import { CallbackNode } from '../../core/models/AgentBuilder';
 import { TooltipUtil, CallbackInfo } from '../../../utils/tooltip-util';
 import { MatIconModule } from '@angular/material/icon';
+import {isImeComposing} from '../../utils/keyboard-event.utils';
 
 /** Error when invalid control is dirty, touched, or submitted. */
 export class ImmediateErrorStateMatcher implements ErrorStateMatcher {
@@ -98,7 +99,11 @@ export class AddCallbackDialogComponent {
     }
   }
 
-  addCallback() {
+  addCallback(event?: Event) {
+    if (isImeComposing(event)) {
+      return;
+    }
+
     if (!this.callbackName.trim() || this.hasSpaces() || this.isDuplicateName()) {
       return;
     }

src/app/components/add-item-dialog/add-item-dialog.component.html

@@ -20,7 +20,7 @@ <h2 mat-dialog-title class="new-app-title">Create a new app</h2>
     <input
       [(ngModel)]="newAppName"
       matInput
-      (keydown.enter)="createNewApp()">
+      (keydown.enter)="createNewApp($event)">
       @if (!isNameValid()) {
         <mat-hint class="validation-hint">
         Start with a letter or underscore, and contain only letters, digits, and underscores.

src/app/components/add-item-dialog/add-item-dialog.component.ts

@@ -32,6 +32,7 @@ import { MatFormField, MatHint } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
 import { FormsModule } from '@angular/forms';
 import { MatButton } from '@angular/material/button';
+import {isImeComposing} from '../../utils/keyboard-event.utils';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.Default,
@@ -84,7 +85,11 @@ export class AddItemDialogComponent {
     public dialogRef: MatDialogRef<AddItemDialogComponent>,
   ) {}
 
-  createNewApp() {
+  createNewApp(event?: Event) {
+    if (isImeComposing(event)) {
+      return;
+    }
+
     const trimmedName = this.newAppName.trim();
 
     // Check validation first

src/app/components/add-tool-dialog/add-tool-dialog.component.html

@@ -49,7 +49,7 @@ <h2 mat-dialog-title class="dialog-title">{{ isEditMode ? 'Editing Tool' : 'Add
       [(ngModel)]="toolName"
       matInput
       placeholder="Enter full function name"
-      (keydown.enter)="addTool()">
+      (keydown.enter)="addTool($event)">
   </mat-form-field>
   }
 

src/app/components/add-tool-dialog/add-tool-dialog.component.ts

@@ -25,6 +25,7 @@ import { MatInput } from '@angular/material/input';
 import { MatOption, MatSelect } from '@angular/material/select';
 import { MatIcon } from '@angular/material/icon';
 import { TooltipUtil } from '../../../utils/tooltip-util';
+import {isImeComposing} from '../../utils/keyboard-event.utils';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.Default,
@@ -90,7 +91,11 @@ export class AddToolDialogComponent implements OnInit{
     }
   }
 
-  addTool() {
+  addTool(event?: Event) {
+    if (isImeComposing(event)) {
+      return;
+    }
+
     if (this.toolType === 'Function tool' && !this.toolName.trim()) {
       return;
     }

src/app/components/eval-tab/add-eval-session-dialog/add-eval-session-dialog/add-eval-session-dialog.component.html

@@ -24,10 +24,10 @@ <h2 mat-dialog-title>Add Current Session To Eval Set</h2>
   </div>
 } @else {
   <mat-form-field style="padding-left:20px; padding-right: 24px;">
-    <input [(ngModel)]="newCaseId" matInput (keydown.enter)="createNewEvalCase()">
+    <input [(ngModel)]="newCaseId" matInput (keydown.enter)="createNewEvalCase($event)">
   </mat-form-field>
 }
 <mat-dialog-actions align="end">
   <button mat-button mat-dialog-close [disabled]="loading">Cancel</button>
   <button mat-button cdkFocusInitial (click)="createNewEvalCase()" [disabled]="loading">Create</button>
-</mat-dialog-actions>
+</mat-dialog-actions>

src/app/components/eval-tab/add-eval-session-dialog/add-eval-session-dialog/add-eval-session-dialog.component.ts

@@ -25,6 +25,7 @@ import { MatInput } from '@angular/material/input';
 import { FormsModule } from '@angular/forms';
 import { MatButton } from '@angular/material/button';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import {isImeComposing} from '../../../../utils/keyboard-event.utils';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Default,
@@ -61,7 +62,11 @@ export class AddEvalSessionDialogComponent {
 
   constructor() {}
 
-  createNewEvalCase() {
+  createNewEvalCase(event?: Event) {
+    if (isImeComposing(event)) {
+      return;
+    }
+
     if (!this.newCaseId || this.newCaseId == '') {
       alert('Cannot create eval set with empty id!');
     } else {

src/app/components/eval-tab/new-eval-set-dialog/new-eval-set-dialog-component/new-eval-set-dialog-component.component.html

@@ -20,7 +20,7 @@ <h2 mat-dialog-title>Create New Eval Set</h2>
 </mat-dialog-content>
 <mat-form-field style="padding-left:20px; padding-right: 24px;">
     <mat-label>Eval Set Name</mat-label>
-    <input [(ngModel)]="newSetId" matInput (keydown.enter)="createNewEvalSet()">
+    <input [(ngModel)]="newSetId" matInput (keydown.enter)="createNewEvalSet($event)">
   </mat-form-field>
 @if (isEvalV2Enabled) {
 <mat-form-field style="padding-left:20px; padding-right: 24px;">
@@ -34,4 +34,4 @@ <h2 mat-dialog-title>Create New Eval Set</h2>
 <mat-dialog-actions align="end">
   <button mat-button mat-dialog-close>Cancel</button>
   <button mat-button cdkFocusInitial (click)="createNewEvalSet()">Create</button>
-</mat-dialog-actions>
+</mat-dialog-actions>

src/app/components/eval-tab/new-eval-set-dialog/new-eval-set-dialog-component/new-eval-set-dialog-component.component.ts

@@ -26,6 +26,7 @@ import { MatInput } from '@angular/material/input';
 import { FormsModule } from '@angular/forms';
 import { MatButton } from '@angular/material/button';
 import { MatSelectModule } from '@angular/material/select';
+import {isImeComposing} from '../../../../utils/keyboard-event.utils';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.Default,
@@ -61,7 +62,11 @@ export class NewEvalSetDialogComponentComponent {
     });
   }
 
-  createNewEvalSet() {
+  createNewEvalSet(event?: Event) {
+    if (isImeComposing(event)) {
+      return;
+    }
+
     if (!this.newSetId || this.newSetId == '') {
       alert('Cannot create eval set with empty id!');
     } else {

src/app/components/long-running-response/long-running-response.html

@@ -110,7 +110,7 @@
             }
           </div>
         } @else {
-          <input class="response-input" [(ngModel)]="functionCall.userResponse" (keydown.enter)="onSend()"
+          <input class="response-input" [(ngModel)]="functionCall.userResponse" (keydown.enter)="onSend($event)"
             placeholder="Enter your response..." />
           <button mat-icon-button (click)="onSend()" [disabled]="!functionCall.userResponse" class="send-button">
             <mat-icon>send</mat-icon>
@@ -207,7 +207,7 @@
           }
         </div>
       } @else {
-        <input class="response-input" [(ngModel)]="functionCall.userResponse" (keydown.enter)="onSend()"
+        <input class="response-input" [(ngModel)]="functionCall.userResponse" (keydown.enter)="onSend($event)"
           placeholder="Enter your response..." />
         <button mat-icon-button (click)="onSend()" [disabled]="!functionCall.userResponse" class="send-button">
           <mat-icon>send</mat-icon>
@@ -217,4 +217,4 @@
   </div>
   }
 </div>
-}
+}

src/app/components/long-running-response/long-running-response.ts

@@ -25,6 +25,7 @@ import { MatIcon } from '@angular/material/icon';
 
 import { AgentRunRequest } from '../../core/models/AgentRunRequest';
 import { MarkdownComponent } from '../markdown/markdown.component';
+import {isImeComposing} from '../../utils/keyboard-event.utils';
 
 
 
@@ -198,7 +199,11 @@ export class LongRunningResponseComponent implements OnChanges {
     }
   }
 
-  onSend() {
+  onSend(event?: Event) {
+    if (isImeComposing(event)) {
+      return;
+    }
+
     if (this.isConfirmationRequest) {
       let payloadObj: any = {};
       try {

src/app/utils/keyboard-event.utils.spec.ts

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// 1p-ONLY-IMPORTS: import {describe, expect, it}
+import {isImeComposing} from './keyboard-event.utils';
+
+describe('isImeComposing', () => {
+  it('returns true when the browser reports active composition', () => {
+    const event = new KeyboardEvent('keydown', {
+      key: 'Enter',
+      isComposing: true,
+    });
+
+    expect(isImeComposing(event)).toBeTrue();
+  });
+
+  it('returns true for the legacy IME key code fallback', () => {
+    const event = new KeyboardEvent('keydown', {key: 'Enter'});
+    Object.defineProperty(event, 'keyCode', {value: 229});
+
+    expect(isImeComposing(event)).toBeTrue();
+  });
+
+  it('returns false for a regular Enter key or no event', () => {
+    const event = new KeyboardEvent('keydown', {key: 'Enter'});
+
+    expect(isImeComposing(event)).toBeFalse();
+    expect(isImeComposing()).toBeFalse();
+  });
+});

src/app/utils/keyboard-event.utils.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/** Returns whether a keyboard event is confirming an active IME composition. */
+export function isImeComposing(event?: Event): boolean {
+  return (
+    event instanceof KeyboardEvent &&
+    (event.isComposing || event.keyCode === 229)
+  );
+}