airlock-bot 0.2.36 → 0.2.37

package/dist/configure-web/cli.js

@@ -1,3 +1,4 @@
+import { randomBytes } from 'crypto';
 import { existsSync, readFileSync, writeFileSync, copyFileSync } from 'fs';
 import { parseArgs } from 'util';
 import Fastify from 'fastify';
@@ -7,8 +8,10 @@ import { buildAdapters } from '../backend/factory.js';
 import { AuditConfig, GatewayConfig, McpServerConfig, ProviderConfig, getMcpConfigs, } from '../config/schema.js';
 import { rememberAllow } from '../config/mutator.js';
 import { validateConfig } from '../config/loader.js';
+import { applyProfiles } from '../config/profiles.js';
 import { ClientPool } from '../pool/pool.js';
 import { checkSuspiciousPatterns } from '../registry/sanitizer.js';
+import { bestSpecificity } from '../allowlist/pattern.js';
 import { VERSION } from '../version.js';
 const LATEST_VERSION_CACHE_TTL_MS = 60 * 60 * 1000;
 let latestVersionCache = null;
@@ -74,7 +77,9 @@ export async function runDashboard(argv) {
     const port = Number(values.port ?? '4177');
     const host = values.host ?? '127.0.0.1';
     const gatewayUrl = values['gateway-url'] ?? 'http://127.0.0.1:4111';
-    const gatewaySecret = values['gateway-secret'] ?? process.env['AIRLOCK_GATEWAY_SECRET'] ?? process.env['AIRLOCK_API_SECRET'];
+    const gatewaySecret = values['gateway-secret'] ??
+        process.env['AIRLOCK_GATEWAY_SECRET'] ??
+        process.env['AIRLOCK_API_SECRET'];
     if (!Number.isInteger(port) || port < 1 || port > 65535) {
         throw new Error(`Invalid --port: ${values.port}`);
     }
@@ -362,7 +367,7 @@ async function readRemoteCommandCenterStatus(configPath, remoteGateway) {
             id,
             type,
             enabled,
-            status: enabled ? runtime ?? 'ok' : 'disabled',
+            status: enabled ? (runtime ?? 'ok') : 'disabled',
             toolCount: 0,
             toolFingerprint: '',
             ...(runtime === 'down' ? { error: 'Provider is down on the gateway' } : {}),
@@ -430,10 +435,11 @@ function registerRemoteGatewayRoutes(app, configPath, remoteGateway) {
             const reader = response.body.getReader();
             try {
                 while (true) {
-                    const { done, value } = await reader.read();
-                    if (done)
+                    const result = await reader.read();
+                    if (result.done)
                         break;
-                    reply.raw.write(Buffer.from(value));
+                    if (result.value)
+                        reply.raw.write(Buffer.from(result.value));
                 }
             }
             catch {
@@ -504,7 +510,8 @@ async function rememberRemoteDecision(configPath, remoteGateway, code, remember,
     }
 }
 async function forwardRemoteApproval(remoteGateway, action, code) {
-    const response = await remoteGatewayFetch(remoteGateway, `/${action}?${new URLSearchParams({ code })}`, {
+    const params = new URLSearchParams({ code });
+    const response = await remoteGatewayFetch(remoteGateway, `/${action}?${params.toString()}`, {
         method: 'POST',
     });
     if (!response.ok)
@@ -564,6 +571,7 @@ export function saveRules(configPath, body) {
         existing.deny = parseStringArray(body.deny, 'deny');
     }
     else {
+        existing.extends = parseStringArray(body.extends, 'extends');
         existing.allow = parseStringArray(body.allow, 'allow');
         existing.ask = parseStringArray(body.ask, 'ask');
         existing.deny = parseStringArray(body.deny, 'deny');
@@ -584,15 +592,32 @@ export function createEntity(configPath, body) {
     const section = asMutableRecord(doc[sectionName]);
     if (section[id])
         throw new Error(`${kind} "${id}" already exists`);
-    if (body.baseId && section[body.baseId]) {
-        section[id] = structuredClone(section[body.baseId]);
+    const baseId = parseOptionalId(body.baseId);
+    const base = baseId && section[baseId] ? structuredClone(section[baseId]) : undefined;
+    const createdToken = kind === 'agent' ? createAgentToken() : undefined;
+    if (kind === 'agent') {
+        const agent = asMutableRecord(base);
+        const profileIds = parseOptionalStringArray(body.profileIds, 'profileIds');
+        delete agent.token;
+        agent.extends = profileIds ?? stringArray(agent.extends);
+        agent.allow = stringArray(agent.allow);
+        agent.ask = stringArray(agent.ask);
+        agent.deny = stringArray(agent.deny);
+        agent.token = createdToken;
+        section[id] = agent;
+    }
+    else if (base) {
+        section[id] = structuredClone(base);
     }
     else {
-        section[id] = { allow: [], ask: [], deny: [] };
+        section[id] = { extends: [], allow: [], ask: [], deny: [] };
     }
     doc[sectionName] = section;
     writeValidatedConfig(configPath, doc);
-    return readState(configPath);
+    return {
+        ...readState(configPath),
+        ...(createdToken ? { createdToken: { agentId: id, token: createdToken } } : {}),
+    };
 }
 export function deleteEntity(configPath, kind, id) {
     const parsedKind = parseKind(kind);
@@ -685,6 +710,44 @@ export function annotationTags(annotations, suspiciousPatterns = []) {
         tags.push('injection');
     return tags;
 }
+export function resolveEditableRuleDecision(rules, toolName) {
+    return resolveEditableRuleMatch(rules, toolName).decision;
+}
+export function resolveEditableRuleMatch(rules, toolName) {
+    const deny = bestRuleMatch(rules.deny, toolName);
+    const ask = bestRuleMatch(rules.ask, toolName);
+    const allow = bestRuleMatch(rules.allow, toolName);
+    const denySpec = deny?.specificity ?? -1;
+    const askSpec = ask?.specificity ?? -1;
+    const allowSpec = allow?.specificity ?? -1;
+    const best = Math.max(denySpec, askSpec, allowSpec);
+    if (best < 0)
+        return { decision: 'unset', source: 'none' };
+    if (denySpec === best)
+        return editableRuleMatch('deny', deny, toolName);
+    if (askSpec === best)
+        return editableRuleMatch('ask', ask, toolName);
+    return editableRuleMatch('allow', allow, toolName);
+}
+function editableRuleMatch(decision, match, toolName) {
+    if (!match)
+        return { decision, source: 'none' };
+    return {
+        decision,
+        source: match.pattern === toolName ? 'exact' : 'pattern',
+        pattern: match.pattern,
+    };
+}
+function bestRuleMatch(patterns, toolName) {
+    let best;
+    for (const pattern of patterns) {
+        const specificity = bestSpecificity([pattern], toolName);
+        if (specificity >= 0 && (!best || specificity > best.specificity)) {
+            best = { pattern, specificity };
+        }
+    }
+    return best;
+}
 export async function discoverTools(configPath) {
     const raw = readConfigObject(configPath);
     const parsed = GatewayConfig.parse(withoutDisabledProviders(raw));
@@ -820,6 +883,7 @@ function parseGatewayConfig(doc) {
                 ],
             };
         }
+        applyProfiles(result.data);
         return { config: result.data, diagnostics: validateConfig(result.data) };
     }
     catch (err) {
@@ -838,6 +902,7 @@ function toEditableAgents(input) {
                 allow: stringArray(agent.allow),
                 ask: stringArray(agent.ask),
                 deny: stringArray(agent.deny),
+                hasToken: typeof agent.token === 'string' && agent.token.trim().length > 0,
             },
         ];
     }));
@@ -868,6 +933,7 @@ function toEditableProfiles(input) {
         return [
             id,
             {
+                extends: stringArray(profile.extends),
                 allow: stringArray(profile.allow),
                 ask: stringArray(profile.ask),
                 deny: stringArray(profile.deny),
@@ -895,6 +961,14 @@ function parseId(value) {
     }
     return id;
 }
+function parseOptionalId(value) {
+    if (value === undefined || value === null || value === '')
+        return undefined;
+    return parseId(value);
+}
+function createAgentToken() {
+    return `airlock_agent_${randomBytes(32).toString('base64url')}`;
+}
 function parseBoolean(value) {
     if (typeof value === 'boolean')
         return value;
@@ -1479,6 +1553,25 @@ const INDEX_HTML = `<!doctype html>
       color: var(--red);
       font-weight: 700;
     }
+    .rule-actions button.active.pattern-match {
+      border-style: dashed;
+      font-weight: 650;
+    }
+    .rule-actions button.active.pattern-match[data-decision="allow"] {
+      border-color: #b8dfca;
+      background: #f6fbf8;
+      color: #4d7f63;
+    }
+    .rule-actions button.active.pattern-match[data-decision="ask"] {
+      border-color: #f1d99a;
+      background: #fffaf0;
+      color: #8a6a19;
+    }
+    .rule-actions button.active.pattern-match[data-decision="deny"] {
+      border-color: #f2c0bb;
+      background: #fff8f7;
+      color: #9b4a43;
+    }
     .pill {
       display: inline-flex;
       align-items: center;
@@ -1571,6 +1664,43 @@ const INDEX_HTML = `<!doctype html>
       overflow: auto;
       padding: 14px;
     }
+    .form-grid {
+      display: grid;
+      gap: 12px;
+    }
+    .field {
+      display: grid;
+      gap: 6px;
+    }
+    .field label {
+      color: var(--muted);
+      font-size: 12px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+    }
+    .field input, .field select {
+      min-height: 36px;
+      min-width: 0;
+      border: 1px solid var(--line);
+      border-radius: 7px;
+      padding: 0 10px;
+      background: #fff;
+      color: var(--ink);
+    }
+    .profile-select-list {
+      display: grid;
+      gap: 6px;
+      padding: 8px;
+      border: 1px solid var(--line);
+      border-radius: 7px;
+      background: #fbfcfe;
+    }
+    .token-value {
+      width: 100%;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+      font-size: 12px;
+    }
     .modal-title {
       min-width: 0;
       overflow-wrap: anywhere;
@@ -1725,6 +1855,19 @@ const INDEX_HTML = `<!doctype html>
       <div id="approvalModalFooter" class="modal-footer"></div>
     </div>
   </div>
+  <div id="entityModal" class="modal-backdrop">
+    <div class="modal" role="dialog" aria-modal="true" aria-labelledby="entityModalTitle">
+      <div class="modal-header">
+        <div>
+          <div id="entityModalTitle" class="modal-title"></div>
+          <div id="entityModalMeta" class="subtle"></div>
+        </div>
+        <button id="entityModalClose" title="Close">Close</button>
+      </div>
+      <div id="entityModalBody" class="modal-body"></div>
+      <div id="entityModalFooter" class="modal-footer"></div>
+    </div>
+  </div>
   <script>
     const state = {
       config: null,
@@ -1739,6 +1882,7 @@ const INDEX_HTML = `<!doctype html>
       errors: [],
       activeKind: 'agent',
       activeId: '',
+      createKind: '',
       drafts: {},
       descriptionExpanded: {},
       search: '',
@@ -2208,7 +2352,8 @@ const INDEX_HTML = `<!doctype html>
       el('addProvider').style.display = state.activeKind === 'providers' ? 'inline-flex' : 'none';
       el('deleteEntity').style.display = state.activeKind === 'activity' ? 'none' : el('deleteEntity').style.display;
       el('deleteEntity').disabled = !state.activeId || state.activeKind === 'activity';
-      el('profilePanel').style.display = state.activeKind === 'agent' ? 'block' : 'none';
+      el('profilePanel').style.display =
+        state.activeKind === 'agent' || state.activeKind === 'profile' ? 'block' : 'none';
 
       if (!draft) {
         if (state.activeKind === 'providers') {
@@ -2236,12 +2381,18 @@ const INDEX_HTML = `<!doctype html>
       }
 
       const denyCount = draft.deny.length;
+      const tokenPill = state.activeKind === 'agent'
+        ? '<span class="pill ' + (state.config.agents[state.activeId]?.hasToken ? 'tag-good' : 'tag-danger') + '">' + (state.config.agents[state.activeId]?.hasToken ? 'token set' : 'token missing') + '</span>'
+        : '';
       el('summary').innerHTML =
         '<span class="pill">allow ' + draft.allow.length + '</span>' +
         '<span class="pill">ask ' + draft.ask.length + '</span>' +
-        '<span class="pill">deny ' + denyCount + '</span>';
+        '<span class="pill">deny ' + denyCount + '</span>' +
+        tokenPill;
 
-      const profiles = Object.keys(state.config.profiles);
+      const profiles = Object.keys(state.config.profiles).filter(
+        (id) => state.activeKind !== 'profile' || id !== state.activeId
+      );
       el('profileChecks').innerHTML = profiles.length
         ? profiles.map((id) => {
             const checked = (draft.extends || []).includes(id) ? ' checked' : '';
@@ -2292,7 +2443,7 @@ const INDEX_HTML = `<!doctype html>
 
       const visible = filteredTools();
       el('tools').innerHTML = visible.length
-        ? visible.map((tool) => toolRow(tool, getDecision(draft, tool.name))).join('')
+        ? visible.map((tool) => toolRow(tool, getDecisionMatch(draft, tool.name))).join('')
         : '<div class="empty">No tools match the current filters.</div>';
 
       document.querySelectorAll('[data-rule]').forEach((button) => {
@@ -2321,7 +2472,8 @@ const INDEX_HTML = `<!doctype html>
       });
     }
 
-    function toolRow(tool, decision) {
+    function toolRow(tool, match) {
+      const decision = match.decision;
       const tags = tool.tags && tool.tags.length ? tool.tags : ['untagged'];
       const tagHtml = tags.map((tag) => '<span class="tag ' + tagClass(tag) + '">' + escapeHtml(tag) + '</span>').join('');
       const recommended = '<span class="tag tag-recommended ' + recommendedClass(tool.recommended) + '">recommended ' + escapeHtml(tool.recommended) + '</span>';
@@ -2336,10 +2488,10 @@ const INDEX_HTML = `<!doctype html>
         '<div class="tool-name"><span class="provider">' + escapeHtml(tool.provider) + '</span><br>' + escapeHtml(tool.shortName || tool.name) + '</div>' +
         '<div class="description"><div class="description-content' + descriptionClass + '">' + formatDescription(description) + '</div>' + toggle + '<div class="tag-list">' + tagHtml + recommended + '</div></div>' +
         '<div class="rule-actions">' +
-          ruleButton(tool.name, 'allow', decision) +
-          ruleButton(tool.name, 'ask', decision) +
-          ruleButton(tool.name, 'deny', decision) +
-          ruleButton(tool.name, 'unset', decision) +
+          ruleButton(tool.name, 'allow', match) +
+          ruleButton(tool.name, 'ask', match) +
+          ruleButton(tool.name, 'deny', match) +
+          ruleButton(tool.name, 'unset', match) +
         '</div>' +
       '</div>';
     }
@@ -2394,17 +2546,67 @@ const INDEX_HTML = `<!doctype html>
       return 'tag-good';
     }
 
-    function ruleButton(tool, decision, activeDecision) {
-      const active = decision === activeDecision ? ' active' : '';
+    function ruleButton(tool, decision, activeMatch) {
+      const active = decision === activeMatch.decision ? ' active' : '';
+      const patternMatch = active && activeMatch.source === 'pattern' ? ' pattern-match' : '';
       const label = decision === 'unset' ? 'Clear' : decision;
-      return '<button class="' + active + '" data-rule data-tool="' + escapeHtml(tool) + '" data-decision="' + decision + '">' + label + '</button>';
+      const title = activeMatch.source === 'pattern' && decision === activeMatch.decision
+        ? decision + ' by ' + activeMatch.pattern + '. Click to add an exact rule.'
+        : decision === activeMatch.decision && activeMatch.source === 'exact'
+          ? decision + ' by exact rule.'
+          : decision === 'unset'
+            ? 'Clear exact rule for this tool.'
+            : 'Set exact ' + decision + ' rule for this tool.';
+      return '<button class="' + active + patternMatch + '" title="' + escapeHtml(title) + '" data-rule data-tool="' + escapeHtml(tool) + '" data-decision="' + decision + '">' + label + '</button>';
     }
 
     function getDecision(draft, tool) {
-      if (draft.deny.includes(tool)) return 'deny';
-      if (draft.ask.includes(tool)) return 'ask';
-      if (draft.allow.includes(tool)) return 'allow';
-      return 'unset';
+      return getDecisionMatch(draft, tool).decision;
+    }
+
+    function getDecisionMatch(draft, tool) {
+      const deny = bestRuleMatch(draft.deny, tool);
+      const ask = bestRuleMatch(draft.ask, tool);
+      const allow = bestRuleMatch(draft.allow, tool);
+      const denySpec = deny ? deny.specificity : -1;
+      const askSpec = ask ? ask.specificity : -1;
+      const allowSpec = allow ? allow.specificity : -1;
+      const best = Math.max(denySpec, askSpec, allowSpec);
+      if (best < 0) return { decision: 'unset', source: 'none' };
+      if (denySpec === best) return decisionMatch('deny', deny, tool);
+      if (askSpec === best) return decisionMatch('ask', ask, tool);
+      return decisionMatch('allow', allow, tool);
+    }
+
+    function decisionMatch(decision, match, tool) {
+      if (!match) return { decision, source: 'none' };
+      return {
+        decision,
+        source: match.pattern === tool ? 'exact' : 'pattern',
+        pattern: match.pattern
+      };
+    }
+
+    function bestRuleMatch(patterns, tool) {
+      let best = null;
+      for (const pattern of patterns || []) {
+        const score = ruleSpecificity(pattern, tool);
+        if (score >= 0 && (!best || score > best.specificity)) best = { pattern, specificity: score };
+      }
+      return best;
+    }
+
+    function ruleSpecificity(pattern, tool) {
+      if (pattern === tool) return pattern.length + 1;
+      if (pattern.endsWith('/*')) {
+        const prefix = pattern.slice(0, -1);
+        return tool.startsWith(prefix) && !tool.slice(prefix.length).includes('/') ? prefix.length : -1;
+      }
+      if (pattern.endsWith('*')) {
+        const prefix = pattern.slice(0, -1);
+        return tool.startsWith(prefix) ? prefix.length : -1;
+      }
+      return -1;
     }
 
     function setDecision(draft, tool, decision) {
@@ -2473,12 +2675,104 @@ const INDEX_HTML = `<!doctype html>
       render();
     }
 
-    async function addEntity(kind) {
-      const id = prompt('New ' + kind + ' id');
-      if (!id) return;
-      state.config = await api('/api/entities', { method: 'POST', body: JSON.stringify({ kind, id }) });
+    function openCreateModal(kind) {
+      state.createKind = kind;
+      renderCreateModal();
+      el('entityModal').classList.add('open');
+      setTimeout(() => el('entityId')?.focus(), 0);
+    }
+
+    function closeEntityModal() {
+      el('entityModal').classList.remove('open');
+      state.createKind = '';
+    }
+
+    function renderCreateModal() {
+      const kind = state.createKind;
+      const isAgent = kind === 'agent';
+      const section = isAgent ? state.config.agents : state.config.profiles;
+      const baseOptions = ['<option value="">Blank</option>'].concat(
+        Object.keys(section).map((id) => '<option value="' + escapeHtml(id) + '">' + escapeHtml(id) + '</option>')
+      ).join('');
+      el('entityModalTitle').textContent = isAgent ? 'New agent' : 'New profile';
+      el('entityModalMeta').textContent = isAgent ? 'Creates a bearer token and permission policy' : 'Creates a reusable permission policy';
+      el('entityModalBody').innerHTML =
+        '<div class="form-grid">' +
+          '<div class="field"><label for="entityId">Id</label><input id="entityId" autocomplete="off" placeholder="' + (isAgent ? 'claude-code' : 'readonly') + '"></div>' +
+          '<div class="field"><label for="entityBase">Start from</label><select id="entityBase">' + baseOptions + '</select></div>' +
+          (isAgent ? profilePicker() : '') +
+        '</div>';
+      el('entityModalFooter').innerHTML =
+        '<button id="entityCreate" class="primary">Create</button>' +
+        '<button id="entityCancel">Cancel</button>';
+      el('entityCreate').addEventListener('click', () => submitCreateEntity().catch((error) => alert(error.message)));
+      el('entityCancel').addEventListener('click', closeEntityModal);
+      el('entityId').addEventListener('keydown', (event) => {
+        if (event.key === 'Enter') submitCreateEntity().catch((error) => alert(error.message));
+      });
+    }
+
+    function profilePicker() {
+      const profiles = Object.keys(state.config.profiles);
+      if (profiles.length === 0) {
+        return '<div class="field"><label>Profiles</label><div class="subtle">No profiles yet.</div></div>';
+      }
+      return '<div class="field"><label>Profiles</label><div class="profile-select-list">' +
+        profiles.map((id) => '<label class="check"><input type="checkbox" data-create-profile="' + escapeHtml(id) + '"> ' + escapeHtml(id) + '</label>').join('') +
+        '</div></div>';
+    }
+
+    async function submitCreateEntity() {
+      const kind = state.createKind;
+      const id = el('entityId').value.trim();
+      if (!id) throw new Error('Id is required');
+      const profileIds = Array.from(document.querySelectorAll('[data-create-profile]:checked')).map((box) => box.dataset.createProfile);
+      const body = {
+        kind,
+        id,
+        baseId: el('entityBase').value,
+        profileIds
+      };
+      const result = await api('/api/entities', { method: 'POST', body: JSON.stringify(body) });
+      state.config = result;
       state.drafts = {};
-      setActive(kind, id.trim());
+      setActive(kind, id);
+      if (result.createdToken?.token) {
+        showCreatedToken(result.createdToken.agentId, result.createdToken.token);
+      } else {
+        closeEntityModal();
+      }
+    }
+
+    function showCreatedToken(agentId, token) {
+      el('entityModalTitle').textContent = 'Agent token';
+      el('entityModalMeta').textContent = agentId;
+      el('entityModalBody').innerHTML =
+        '<div class="form-grid">' +
+          '<div class="field"><label for="createdToken">Bearer token</label><input id="createdToken" class="token-value" readonly value="' + escapeHtml(token) + '"></div>' +
+          '<div class="field"><label>Header</label><input class="token-value" readonly value="Authorization: Bearer ' + escapeHtml(token) + '"></div>' +
+        '</div>';
+      el('entityModalFooter').innerHTML =
+        '<button id="copyCreatedToken" class="primary">Copy Token</button>' +
+        '<button id="copyCreatedHeader">Copy Header</button>' +
+        '<button id="entityDone">Done</button>';
+      el('copyCreatedToken').addEventListener('click', () => copyText(token));
+      el('copyCreatedHeader').addEventListener('click', () => copyText('Authorization: Bearer ' + token));
+      el('entityDone').addEventListener('click', closeEntityModal);
+      el('createdToken').select();
+    }
+
+    async function copyText(value) {
+      if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(value);
+        return;
+      }
+      const textarea = document.createElement('textarea');
+      textarea.value = value;
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand('copy');
+      textarea.remove();
     }
 
     async function addProvider() {
@@ -2642,8 +2936,8 @@ const INDEX_HTML = `<!doctype html>
     el('manageProviders').addEventListener('click', () => setActive('providers'));
     el('viewActivity').addEventListener('click', () => setActive('activity'));
     el('addProvider').addEventListener('click', () => addProvider().catch((error) => alert(error.message)));
-    el('addAgent').addEventListener('click', () => addEntity('agent').catch((error) => alert(error.message)));
-    el('addProfile').addEventListener('click', () => addEntity('profile').catch((error) => alert(error.message)));
+    el('addAgent').addEventListener('click', () => openCreateModal('agent'));
+    el('addProfile').addEventListener('click', () => openCreateModal('profile'));
     el('deleteEntity').addEventListener('click', () => deleteCurrent().catch((error) => alert(error.message)));
     el('search').addEventListener('input', (event) => { state.search = event.target.value; renderTools(); });
     el('providerFilter').addEventListener('change', (event) => { state.provider = event.target.value; renderTools(); });
@@ -2669,11 +2963,16 @@ const INDEX_HTML = `<!doctype html>
     el('resetAllRules').addEventListener('click', resetAllToCurrentConfig);
     el('recommendedRules').addEventListener('click', setRecommended);
     el('approvalModalClose').addEventListener('click', closeApprovalModal);
+    el('entityModalClose').addEventListener('click', closeEntityModal);
     el('approvalModal').addEventListener('click', (event) => {
       if (event.target === el('approvalModal')) closeApprovalModal();
     });
+    el('entityModal').addEventListener('click', (event) => {
+      if (event.target === el('entityModal')) closeEntityModal();
+    });
     document.addEventListener('keydown', (event) => {
       if (event.key === 'Escape') {
+        closeEntityModal();
         closeApprovalModal();
         return;
       }