improvement(emcn): let a modal refuse every dismissal while an action runs

ChipConfirmModal's docs promised "a single dismiss path shared by the header X /
dismiss button / Escape … and disabling dismiss while the confirm is in flight".
Only the dismiss button was ever guarded — Escape, outside-click and the header X
all still closed a confirmation mid-delete. Two knowledge-base connector modals
had the same shape: they guarded onOpenChange against a pending save, then handed
the header X a direct onOpenChange(false) that skipped the guard.

A modal now states the interlock once, as `dismissDisabled` on ChipModal or
ModalContent, and the primitive holds all four exits shut. ModalContent owns the
Radix paths because `{...props}` is spread after its own handlers, so a
consumer-passed onEscapeKeyDown/onInteractOutside would silently drop the
floating-layer guard; it publishes the flag through a context that
ChipModalHeader, ChipModalFooter and ModalHeader read. The two narrow props
compose with `||`, so an explicit `true` still disables a single button and an
explicit `false` cannot punch a hole in the root's guarantee.

Also turns on `turbo run type-check` for every workspace. packages/emcn,
packages/utils, apps/desktop and apps/docs had no type check in CI at all —
only @sim/realtime did — and apps/sim's source was covered solely as a side
effect of `next build`. All 23 workspaces pass today, so it lands green.

Author: waleedlatif1

.github/workflows/test-build.yml

@@ -178,8 +178,14 @@ jobs:
           fi
           bun run check:migrations "$BASE_REF"
 
-      - name: Type-check realtime server
-        run: bunx turbo run type-check --filter=@sim/realtime
+      # Every workspace, not just realtime. packages/emcn, packages/utils,
+      # apps/desktop and apps/docs had no type check in CI at all; apps/sim's
+      # source was covered only as a side effect of `next build` in the separate
+      # Build App job. Note this does NOT cover apps/sim's tests — its tsconfig
+      # excludes *.test.ts(x), and including them today surfaces ~2.2k errors,
+      # so that is its own cleanup rather than a gate to switch on here.
+      - name: Type-check all workspaces
+        run: bunx turbo run type-check
 
       # cloud-review-tools.test.ts runs the real helper on the runner, which shells
       # out to rg. Blacksmith's image ships it, GitHub's doesn't.

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx

@@ -235,9 +235,10 @@ export function AddConnectorModal({
     <>
       <ChipModal
         open={open}
-        onOpenChange={(val) => !isCreating && onOpenChange(val)}
+        onOpenChange={onOpenChange}
         srTitle={step === 'select-type' ? 'Connect Source' : `Configure ${connectorConfig?.name}`}
         size='md'
+        dismissDisabled={isCreating}
       >
         <ChipModalHeader onClose={() => onOpenChange(false)}>
           {step === 'configure' ? (
@@ -428,7 +429,6 @@ export function AddConnectorModal({
         {step === 'configure' && (
           <ChipModalFooter
             onCancel={() => onOpenChange(false)}
-            cancelDisabled={isCreating}
             primaryAction={{
               label: isCreating ? 'Connecting…' : 'Connect & Sync',
               onClick: handleSubmit,

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/edit-connector-modal.tsx

@@ -269,9 +269,10 @@ export function EditConnectorModal({
   return (
     <ChipModal
       open={open}
-      onOpenChange={(val) => !isSaving && onOpenChange(val)}
+      onOpenChange={onOpenChange}
       srTitle={`Edit ${displayName}`}
       size='md'
+      dismissDisabled={isSaving}
     >
       <ChipModalHeader icon={Icon ?? null} onClose={() => onOpenChange(false)}>
         Edit {displayName}
@@ -312,7 +313,6 @@ export function EditConnectorModal({
       {activeTab === 'settings' && (
         <ChipModalFooter
           onCancel={() => onOpenChange(false)}
-          cancelDisabled={isSaving}
           primaryAction={{
             label: isSaving ? 'Saving…' : 'Save',
             onClick: handleSave,

packages/emcn/src/components/chip-modal/chip-modal.test.tsx

@@ -0,0 +1,187 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { ChipConfirmModal, ChipModal, ChipModalFooter, ChipModalHeader } from './chip-modal'
+
+vi.mock('next/navigation', () => ({
+  usePathname: () => '/workspace/workspace-1/home',
+}))
+
+let root: Root | null = null
+let container: HTMLDivElement | null = null
+
+function mount(ui: ReactNode) {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+  act(() => root?.render(ui))
+}
+
+afterEach(() => {
+  if (root) act(() => root?.unmount())
+  container?.remove()
+  root = null
+  container = null
+})
+
+/** The dialog panel Radix renders, which owns the Escape/outside-click handlers. */
+function dialog(): HTMLElement {
+  const node = document.querySelector<HTMLElement>('[role="dialog"]')
+  if (!node) throw new Error('Dialog did not render')
+  return node
+}
+
+function buttonByText(text: string): HTMLButtonElement {
+  const match = Array.from(document.querySelectorAll('button')).find((button) =>
+    button.textContent?.includes(text)
+  )
+  if (!match) throw new Error(`No button containing "${text}"`)
+  return match as HTMLButtonElement
+}
+
+function closeButton(): HTMLButtonElement {
+  const match = Array.from(document.querySelectorAll('button')).find((button) =>
+    button.querySelector('.sr-only')?.textContent?.includes('Close')
+  )
+  if (!match) throw new Error('Close button did not render')
+  return match as HTMLButtonElement
+}
+
+function pressEscape() {
+  act(() => {
+    dialog().dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true })
+    )
+  })
+}
+
+function Harness({
+  onOpenChange,
+  dismissDisabled,
+}: {
+  onOpenChange: (open: boolean) => void
+  dismissDisabled?: boolean
+}) {
+  return (
+    <ChipModal
+      open
+      onOpenChange={onOpenChange}
+      srTitle='Test modal'
+      dismissDisabled={dismissDisabled}
+    >
+      <ChipModalHeader onClose={() => onOpenChange(false)}>Title</ChipModalHeader>
+      <ChipModalFooter
+        onCancel={() => onOpenChange(false)}
+        primaryAction={{ label: 'Save', onClick: () => {} }}
+      />
+    </ChipModal>
+  )
+}
+
+describe('ChipModal dismissDisabled', () => {
+  it('closes through every path when not set', () => {
+    const onOpenChange = vi.fn()
+    mount(<Harness onOpenChange={onOpenChange} />)
+
+    expect(closeButton().disabled).toBe(false)
+    expect(buttonByText('Cancel').disabled).toBe(false)
+
+    pressEscape()
+    expect(onOpenChange).toHaveBeenCalledWith(false)
+  })
+
+  // Outside-click is guarded by the same flag but jsdom cannot drive Radix's
+  // outside-interaction path, so asserting it here could never fail.
+  it('blocks the close button, Cancel and Escape when set', () => {
+    const onOpenChange = vi.fn()
+    mount(<Harness onOpenChange={onOpenChange} dismissDisabled />)
+
+    expect(closeButton().disabled).toBe(true)
+    expect(buttonByText('Cancel').disabled).toBe(true)
+
+    pressEscape()
+    expect(onOpenChange).not.toHaveBeenCalled()
+  })
+
+  // Either flag disables: an explicit `false` must not re-enable a button whose
+  // click Radix has already been told to ignore.
+  it('cannot be re-enabled by an explicit closeDisabled or cancelDisabled of false', () => {
+    const onOpenChange = vi.fn()
+    mount(
+      <ChipModal open onOpenChange={onOpenChange} srTitle='Test modal' dismissDisabled>
+        <ChipModalHeader onClose={() => onOpenChange(false)} closeDisabled={false}>
+          Title
+        </ChipModalHeader>
+        <ChipModalFooter
+          onCancel={() => onOpenChange(false)}
+          cancelDisabled={false}
+          primaryAction={{ label: 'Save', onClick: () => {} }}
+        />
+      </ChipModal>
+    )
+
+    expect(closeButton().disabled).toBe(true)
+    expect(buttonByText('Cancel').disabled).toBe(true)
+  })
+
+  it('still lets an explicit true disable a button on its own', () => {
+    const onOpenChange = vi.fn()
+    mount(
+      <ChipModal open onOpenChange={onOpenChange} srTitle='Test modal'>
+        <ChipModalHeader onClose={() => onOpenChange(false)} closeDisabled>
+          Title
+        </ChipModalHeader>
+        <ChipModalFooter
+          onCancel={() => onOpenChange(false)}
+          primaryAction={{ label: 'Save', onClick: () => {} }}
+        />
+      </ChipModal>
+    )
+
+    expect(closeButton().disabled).toBe(true)
+    expect(buttonByText('Cancel').disabled).toBe(false)
+  })
+})
+
+describe('ChipConfirmModal pending', () => {
+  it('holds every exit shut while the confirm runs', () => {
+    const onOpenChange = vi.fn()
+    mount(
+      <ChipConfirmModal
+        open
+        onOpenChange={onOpenChange}
+        title='Delete key'
+        text='This cannot be undone.'
+        confirm={{ label: 'Delete', onClick: () => {}, pending: true, pendingLabel: 'Deleting...' }}
+      />
+    )
+
+    expect(closeButton().disabled).toBe(true)
+    expect(buttonByText('Cancel').disabled).toBe(true)
+    expect(buttonByText('Deleting...').disabled).toBe(true)
+
+    pressEscape()
+    expect(onOpenChange).not.toHaveBeenCalled()
+  })
+
+  it('dismisses normally when the confirm is idle', () => {
+    const onOpenChange = vi.fn()
+    mount(
+      <ChipConfirmModal
+        open
+        onOpenChange={onOpenChange}
+        title='Delete key'
+        text='This cannot be undone.'
+        confirm={{ label: 'Delete', onClick: () => {} }}
+      />
+    )
+
+    expect(closeButton().disabled).toBe(false)
+    act(() => closeButton().click())
+    expect(onOpenChange).toHaveBeenCalledWith(false)
+  })
+})

packages/emcn/src/components/chip-modal/chip-modal.tsx

@@ -51,7 +51,7 @@ import { ChipInput } from '../chip-input/chip-input'
 import { ChipSwitch } from '../chip-switch/chip-switch'
 import { ChipTextarea } from '../chip-textarea/chip-textarea'
 import { Label } from '../label/label'
-import { Modal, ModalContent } from '../modal/modal'
+import { Modal, ModalContent, useModalDismissDisabled } from '../modal/modal'
 import { Tooltip } from '../tooltip/tooltip'
 
 /**
@@ -108,6 +108,14 @@ export interface ChipModalProps {
   size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
   /** Optional className forwarded to the outer panel ring. */
   className?: string
+  /**
+   * Refuses every exit while an action is in flight — Escape, outside-click,
+   * the header close button, and the footer Cancel. Stating it once here is the
+   * point: disabling only the buttons leaves Escape and outside-click open,
+   * which reads as handled without being handled.
+   * @default false
+   */
+  dismissDisabled?: boolean
   children?: React.ReactNode
 }
 
@@ -124,13 +132,20 @@ function ChipModal({
   srTitle = 'Dialog',
   size = 'md',
   className,
+  dismissDisabled = false,
   children,
 }: ChipModalProps) {
   const submitRef = React.useRef<ChipModalSubmit | null>(null)
   return (
     <ChipModalSubmitContext.Provider value={submitRef}>
       <Modal open={open} onOpenChange={onOpenChange}>
-        <ModalContent bare showClose={false} srTitle={srTitle} size={size}>
+        <ModalContent
+          bare
+          showClose={false}
+          srTitle={srTitle}
+          size={size}
+          dismissDisabled={dismissDisabled}
+        >
           <div
             className={cn(
               'flex min-h-0 w-full flex-col rounded-xl border border-[var(--border-muted)] bg-[var(--surface-4)] p-[3px] shadow-[var(--shadow-overlay)] dark:bg-[var(--surface-5)]',
@@ -154,7 +169,11 @@ export interface ChipModalHeaderProps extends React.HTMLAttributes<HTMLDivElemen
   icon?: React.ComponentType<{ className?: string }> | null
   /** Invoked when the trailing close button is activated. Always rendered. */
   onClose: () => void
-  /** Disables the trailing close button while an operation is in flight. */
+  /**
+   * Disables the trailing close button. Combines with
+   * {@link ChipModalProps.dismissDisabled}, which also blocks Escape and
+   * outside-click — prefer that for an in-flight operation.
+   */
   closeDisabled?: boolean
   /** Accessible label for the close button. */
   closeAriaLabel?: string
@@ -171,32 +190,35 @@ const ChipModalHeader = React.forwardRef<HTMLDivElement, ChipModalHeaderProps>(
       children,
       icon: Icon = null,
       onClose,
-      closeDisabled = false,
+      closeDisabled,
       closeAriaLabel = 'Close',
       ...props
     },
     ref
-  ) => (
-    <div ref={ref} className={cn('flex flex-col', className)} {...props}>
-      <div className='flex min-w-0 items-center justify-between gap-2 px-4 pt-3'>
-        <div className='flex min-w-0 items-center gap-2'>
-          {Icon ? <Icon className={chipContentIconClass} /> : null}
-          <span className={chipContentLabelClass}>{children}</span>
+  ) => {
+    const dismissDisabled = useModalDismissDisabled()
+    return (
+      <div ref={ref} className={cn('flex flex-col', className)} {...props}>
+        <div className='flex min-w-0 items-center justify-between gap-2 px-4 pt-3'>
+          <div className='flex min-w-0 items-center gap-2'>
+            {Icon ? <Icon className={chipContentIconClass} /> : null}
+            <span className={chipContentLabelClass}>{children}</span>
+          </div>
+          <Button
+            type='button'
+            variant='ghost'
+            onClick={onClose}
+            disabled={closeDisabled || dismissDisabled}
+            className='relative size-[14px] flex-shrink-0 p-0 before:absolute before:inset-[-14px] before:content-[""]'
+          >
+            <X className='size-[14px] text-[var(--text-icon)]' />
+            <span className='sr-only'>{closeAriaLabel}</span>
+          </Button>
         </div>
-        <Button
-          type='button'
-          variant='ghost'
-          onClick={onClose}
-          disabled={closeDisabled}
-          className='relative size-[14px] flex-shrink-0 p-0 before:absolute before:inset-[-14px] before:content-[""]'
-        >
-          <X className='size-[14px] text-[var(--text-icon)]' />
-          <span className='sr-only'>{closeAriaLabel}</span>
-        </Button>
+        <ChipModalSeparator className='mt-3' />
       </div>
-      <ChipModalSeparator className='mt-3' />
-    </div>
-  )
+    )
+  }
 )
 
 ChipModalHeader.displayName = 'ChipModalHeader'
@@ -924,6 +946,10 @@ export interface ChipModalFooterProps {
    * Disables the Cancel button. Set this while a primary/secondary action is
    * in flight (e.g. an async delete or save) so the user cannot dismiss the
    * modal and assume the operation was aborted while the mutation keeps running.
+   *
+   * This covers the Cancel button only. For an in-flight operation reach for
+   * {@link ChipModalProps.dismissDisabled} instead, which also blocks Escape,
+   * outside-click and the header's X.
    * @default false
    */
   cancelDisabled?: boolean
@@ -1025,6 +1051,7 @@ function ChipModalFooter({
   primaryAdjacentAction,
   secondaryActions,
 }: ChipModalFooterProps) {
+  const dismissDisabled = useModalDismissDisabled()
   const showsDisabledTooltip = Boolean(primaryAction.disabled && primaryAction.disabledTooltip)
 
   /**
@@ -1079,7 +1106,7 @@ function ChipModalFooter({
       }
     >
       {hideCancel ? null : (
-        <Chip onClick={onCancel} disabled={cancelDisabled}>
+        <Chip onClick={onCancel} disabled={cancelDisabled || dismissDisabled}>
           Cancel
         </Chip>
       )}
@@ -1303,6 +1330,7 @@ function ChipConfirmModal({
       onOpenChange={onOpenChange}
       size={size}
       srTitle={srTitle ?? (typeof title === 'string' ? title : 'Confirm')}
+      dismissDisabled={confirm.pending}
     >
       <ChipModalHeader icon={icon} onClose={dismiss}>
         {title}