@puredesktop/puredesktop-ui-bridge 2.1.4 → 2.1.7

package/src/components/common/media/ImageReferencePicker.tsx

@@ -22,11 +22,13 @@ const Wrap = styled.div<{ $variant: 'standalone' | 'embedded' }>`
   gap: 10px;
   padding-top: ${({ $variant }) => ($variant === 'embedded' ? '0' : '14px')};
   border-top: ${({ $variant }) =>
-    $variant === 'embedded' ? '0' : '1px solid rgb(127 127 127 / 16%)'};
+    $variant === 'embedded'
+      ? '0'
+      : '1px solid var(--platform-colors-border, #e7e4dd)'};
   outline: none;
 
   &:focus-within {
-    border-top-color: rgb(127 127 127 / 34%);
+    border-top-color: var(--platform-colors-border-strong, #bdb8ad);
   }
 `
 
@@ -37,11 +39,13 @@ const Head = styled.div<{ $variant: 'standalone' | 'embedded' }>`
   gap: 14px;
   padding-top: ${({ $variant }) => ($variant === 'embedded' ? '10px' : '0')};
   border-top: ${({ $variant }) =>
-    $variant === 'embedded' ? '1px solid rgb(127 127 127 / 12%)' : '0'};
+    $variant === 'embedded'
+      ? '1px solid var(--platform-colors-divider, #f0ede7)'
+      : '0'};
 `
 
 const Label = styled.div`
-  color: rgb(104 112 123);
+  color: var(--platform-colors-text-secondary, #6b665e);
   font-size: 12px;
   font-weight: 800;
   letter-spacing: 0.06em;
@@ -51,7 +55,7 @@ const Label = styled.div`
 const Description = styled.p`
   margin: 0;
   max-width: 560px;
-  color: rgb(104 112 123);
+  color: var(--platform-colors-text-secondary, #6b665e);
   font-size: 12.5px;
   line-height: 1.45;
 `
@@ -74,15 +78,19 @@ const Grid = styled.div`
 const PasteTarget = styled.div`
   min-height: 58px;
   padding: 11px 13px;
-  border: 1px dashed rgb(127 127 127 / 28%);
-  border-radius: 7px;
-  color: rgb(104 112 123);
+  border: 1px dashed var(--platform-colors-border-strong, #bdb8ad);
+  border-radius: var(--platform-radius-sm, 0px);
+  color: var(--platform-colors-text-secondary, #6b665e);
   font-size: 13px;
   line-height: 1.45;
-  background: rgb(255 255 255 / 26%);
+  background: color-mix(
+    in srgb,
+    var(--platform-colors-surface, #ffffff) 72%,
+    transparent
+  );
 
   &:focus {
-    border-color: rgb(127 127 127 / 48%);
+    border-color: var(--platform-colors-focus, #1c1a17);
     outline: none;
   }
 `
@@ -98,9 +106,9 @@ const Thumb = styled.img`
   width: 100%;
   aspect-ratio: 16 / 10;
   object-fit: cover;
-  border: 1px solid rgb(127 127 127 / 18%);
-  border-radius: 3px;
-  background: rgb(127 127 127 / 8%);
+  border: 1px solid var(--platform-colors-border, #e7e4dd);
+  border-radius: var(--platform-radius-sm, 0px);
+  background: var(--platform-colors-surface-hover, #f0ede7);
 `
 
 const Caption = styled.figcaption`
@@ -108,7 +116,7 @@ const Caption = styled.figcaption`
   align-items: center;
   justify-content: space-between;
   gap: 8px;
-  color: rgb(79 88 100);
+  color: var(--platform-colors-text-secondary, #6b665e);
   font-size: 12px;
   line-height: 1.25;
 

package/src/components/common/narrative/NarrativeMention.tsx

@@ -19,10 +19,13 @@ export const MentionButton = styled.button<{ $dim?: boolean }>`
   display: inline;
   padding: 0;
   border: 0;
-  border-bottom: 1px solid var(--narrative-underline, rgba(127, 127, 127, 0.4));
+  border-bottom: 1px solid
+    var(--narrative-underline, var(--platform-colors-border-strong, #bdb8ad));
   background: transparent;
   color: ${({ $dim }) =>
-    $dim ? 'var(--narrative-faint, #9aa2ad)' : 'var(--narrative-ink, inherit)'};
+    $dim
+      ? 'var(--narrative-faint, var(--platform-colors-text-tertiary, #8f897f))'
+      : 'var(--narrative-ink, inherit)'};
   font: inherit;
   font-weight: 500;
   cursor: pointer;
@@ -41,10 +44,12 @@ export const MentionHoverCard = styled.span`
   min-width: 240px;
   max-width: 330px;
   padding: 12px 14px;
-  border: 1px solid rgba(127, 127, 127, 0.28);
-  border-radius: 6px;
-  background: var(--narrative-card, #fff);
-  box-shadow: 0 14px 34px rgba(38, 46, 55, 0.14);
+  border: 1px solid
+    var(--narrative-border, var(--platform-colors-border, #e7e4dd));
+  border-radius: var(--platform-radius-sm, 0px);
+  background: var(--narrative-card, var(--platform-colors-surface, #ffffff));
+  box-shadow: 0 14px 34px
+    color-mix(in srgb, var(--platform-colors-text, #1c1a17) 14%, transparent);
   font-size: 12px;
   font-weight: 400;
   line-height: 1.55;
@@ -61,14 +66,15 @@ export const MentionHoverTitle = styled.span`
 export const MentionHoverLine = styled.span`
   display: block;
   margin-top: 3px;
-  color: var(--narrative-muted, #737b86);
+  color: var(--narrative-muted, var(--platform-colors-text-secondary, #6b665e));
 `
 
 export const MentionHoverNote = styled.span`
   display: block;
   margin-top: 8px;
   padding-left: 8px;
-  border-left: 2px solid var(--narrative-accent, #525a65);
-  color: var(--narrative-muted, #737b86);
+  border-left: 2px solid
+    var(--narrative-accent, var(--platform-colors-accent, #1c1a17));
+  color: var(--narrative-muted, var(--platform-colors-text-secondary, #6b665e));
   font-style: italic;
 `

package/src/components/common/navigation/NavigationCardRow.tsx

@@ -26,14 +26,14 @@ const StyledRow = styled.button<{ $active?: boolean }>`
   border: 1px solid
     ${({ $active }) =>
       $active
-        ? 'color-mix(in srgb, var(--platform-colors-focus, #0f766e) 72%, var(--platform-colors-border, #d8dfde))'
+        ? 'color-mix(in srgb, var(--platform-colors-focus, var(--platform-colors-accent, #1c1a17)) 72%, var(--platform-colors-border, #e7e4dd))'
         : 'var(--platform-colors-border-subtle, #ebeeee)'};
   border-radius: var(--platform-radius-sm, 8px);
   padding: var(--platform-spacing-sm, 8px);
   color: var(--platform-colors-text, #20272b);
   background: ${({ $active }) =>
     $active
-      ? 'color-mix(in srgb, var(--platform-colors-focus, #0f766e) 8%, var(--platform-colors-surface, #fff))'
+      ? 'color-mix(in srgb, var(--platform-colors-focus, var(--platform-colors-accent, #1c1a17)) 8%, var(--platform-colors-surface, #ffffff))'
       : 'var(--platform-colors-surface, #fff)'};
   text-align: left;
   cursor: pointer;

package/src/components/common/navigation/UnderlineTabs.tsx

@@ -65,6 +65,7 @@ export function UnderlineTabs({
     const active = item.id === activeId
     return (
       <StyledTab
+        key={item.id}
         type="button"
         $active={active}
         aria-current={active}

package/src/components/common/overlays/Modal.tsx

@@ -9,8 +9,10 @@ import {
   type ReactNode,
 } from 'react'
 import { createPortal } from 'react-dom'
+import { X } from 'lucide-react'
 import { keyframes, styled } from 'styled-components'
 import { zi } from '../../../theme/themeVars.js'
+import { PlatformIcon } from '../../chrome/PlatformIcon.js'
 import { ModalChromeHeader } from './ModalChromeHeader.js'
 
 export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen'
@@ -93,6 +95,10 @@ const StyledBackdrop = styled.div<{ $fullscreen: boolean }>`
   justify-content: ${({ $fullscreen }) => ($fullscreen ? 'stretch' : 'center')};
   padding: ${({ $fullscreen }) =>
     $fullscreen ? '0' : 'var(--platform-spacing-md)'};
+  background: ${({ $fullscreen }) =>
+    $fullscreen
+      ? 'transparent'
+      : 'var(--platform-colors-scrim, rgba(28, 26, 23, 0.42))'};
   animation: ${fadeIn} var(--platform-transition-fast);
 
   @media (prefers-reduced-motion: reduce) {
@@ -133,7 +139,7 @@ const StyledDialog = styled.div<{ $size: ModalSize; $chrome: boolean }>`
   color: var(--platform-colors-text);
   border: ${({ $size }) =>
     $size === 'fullscreen' ? '0' : '1px solid var(--platform-colors-border)'};
-  border-radius: ${({ $size }) => ($size === 'fullscreen' ? '0' : '1rem')};
+  border-radius: 0;
   box-shadow: ${({ $size }) =>
     $size === 'fullscreen' ? 'none' : 'var(--platform-shadow-md)'};
   animation: ${fadeIn} var(--platform-transition-fast);
@@ -147,15 +153,48 @@ const StyledDialog = styled.div<{ $size: ModalSize; $chrome: boolean }>`
   }
 `
 
+const StyledPlainHeader = styled.header`
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--platform-spacing-md);
+  padding: var(--platform-modal-inset);
+  border-bottom: 1px solid var(--platform-colors-border);
+`
+
 const StyledTitle = styled.h2`
   flex: 0 0 auto;
   margin: 0;
-  padding: var(--platform-modal-inset);
   font-size: var(--platform-typography-font-size-lg);
   font-weight: var(--platform-typography-font-weight-bold);
   line-height: var(--platform-typography-line-height-tight);
 `
 
+const StyledPlainClose = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  flex: 0 0 auto;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--platform-colors-text-secondary);
+  cursor: pointer;
+
+  &:hover {
+    background: var(--platform-colors-surface-hover);
+    color: var(--platform-colors-text);
+  }
+
+  &:focus-visible {
+    outline: 1px solid var(--platform-colors-focus);
+    outline-offset: 2px;
+  }
+`
+
 const StyledBody = styled.div<{ $fullscreen: boolean }>`
   display: flex;
   flex-direction: column;
@@ -280,7 +319,17 @@ export function Modal({
             trailing={chromeTrailing}
           />
         ) : title ? (
-          <StyledTitle id={titleId}>{title}</StyledTitle>
+          <StyledPlainHeader>
+            <StyledTitle id={titleId}>{title}</StyledTitle>
+            <StyledPlainClose
+              type="button"
+              aria-label="Close"
+              title="Close"
+              onClick={onClose}
+            >
+              <PlatformIcon icon={X} size={16} strokeWidth={1.75} />
+            </StyledPlainClose>
+          </StyledPlainHeader>
         ) : null}
         <StyledBody className={bodyClassName} $fullscreen={fullscreen}>
           {children}

package/src/components/common/overlays/ObjectActionStrip.tsx

@@ -20,7 +20,7 @@ const Strip = styled.div`
   align-items: center;
   padding: 3px 4px;
   border: 1px solid rgb(35 40 45 / 12%);
-  border-radius: 999px;
+  border-radius: var(--platform-radius-sm);
   background: rgb(255 255 255 / 72%);
   color: rgb(35 40 45 / 68%);
   box-shadow: 0 6px 18px rgb(20 26 33 / 6%);
@@ -30,7 +30,7 @@ const Strip = styled.div`
 const Action = styled.button`
   appearance: none;
   border: 0;
-  border-radius: 999px;
+  border-radius: var(--platform-radius-sm);
   background: transparent;
   color: inherit;
   font: inherit;

package/src/components/common/people/AutoUpdateReviewList.tsx

@@ -30,7 +30,7 @@ const Card = styled.div`
   display: grid;
   gap: 10px;
   padding: 14px 16px;
-  border-radius: 8px;
+  border-radius: var(--platform-radius-md, 0px);
   background: color-mix(
     in srgb,
     var(--platform-colors-accent-muted) 46%,
@@ -55,7 +55,7 @@ const Badge = styled.span`
   width: fit-content;
   padding: 2px 7px;
   border: 1px solid var(--platform-colors-border);
-  border-radius: var(--platform-radius-full);
+  border-radius: var(--platform-radius-sm);
   background: var(--platform-colors-surface);
   color: var(--platform-colors-text);
   font-size: 10px;

package/src/components/common/people/EntityList.tsx

@@ -30,14 +30,18 @@ const Row = styled.button<{ $active?: boolean }>`
   width: 100%;
   padding: 10px 0 10px 12px;
   border: 0;
-  border-left: 2px solid
+  border-left: 3px solid
     ${({ $active }) =>
-      $active ? 'var(--platform-colors-text)' : 'transparent'};
+      $active ? 'var(--app-acc, var(--platform-colors-text))' : 'transparent'};
   border-radius: 0;
   background: ${({ $active }) =>
     $active
-      ? 'color-mix(in srgb, var(--platform-colors-surface-hover) 62%, transparent)'
+      ? 'color-mix(in srgb, var(--app-bg, var(--platform-colors-surface-hover)) 28%, transparent)'
       : 'transparent'};
+  box-shadow: ${({ $active }) =>
+    $active
+      ? 'inset 3px 0 0 var(--app-acc, var(--platform-colors-text))'
+      : 'none'};
   color: inherit;
   font: inherit;
   text-align: left;

package/src/components/common/people/EntityPortrait.tsx

@@ -48,7 +48,12 @@ export function EntityPortrait({
       aria-label={`${kind} image for ${name}`}
     >
       {imageUrl ? (
-        <Image src={imageUrl} alt="" loading="lazy" referrerPolicy="no-referrer" />
+        <Image
+          src={imageUrl}
+          alt=""
+          loading="lazy"
+          referrerPolicy="no-referrer"
+        />
       ) : (
         initials(name)
       )}

package/src/components/common/people/LinkedDossierList.tsx

@@ -81,7 +81,9 @@ export function LinkedDossierList({
             <Meta>{dossier.appSlug}</Meta>
           </Head>
           {dossier.summary ? <Summary>{dossier.summary}</Summary> : null}
-          {dossier.updatedAt ? <Meta>{formatDate(dossier.updatedAt)}</Meta> : null}
+          {dossier.updatedAt ? (
+            <Meta>{formatDate(dossier.updatedAt)}</Meta>
+          ) : null}
         </Item>
       ))}
     </List>

package/src/components/common/people/RelationshipMap.tsx

@@ -62,9 +62,7 @@ const GraphSvg = styled.svg`
 
 const EdgeLine = styled.line<{ $active?: boolean }>`
   stroke: ${({ $active }) =>
-    $active
-      ? 'var(--platform-colors-text)'
-      : 'var(--platform-colors-border)'};
+    $active ? 'var(--platform-colors-text)' : 'var(--platform-colors-border)'};
   stroke-width: ${({ $active }) => ($active ? 2 : 1.2)};
   opacity: ${({ $active }) => ($active ? 0.54 : 0.82)};
 `
@@ -93,9 +91,7 @@ const NodeShape = styled.circle<{
   $active?: boolean
 }>`
   fill: ${({ $active }) =>
-    $active
-      ? 'var(--platform-colors-text)'
-      : 'var(--platform-colors-surface)'};
+    $active ? 'var(--platform-colors-text)' : 'var(--platform-colors-surface)'};
   stroke: ${({ $active, $kind }) =>
     $active
       ? 'var(--platform-colors-text)'
@@ -312,9 +308,7 @@ function layoutNodes(
     return (degree.get(b.id) ?? 0) - (degree.get(a.id) ?? 0)
   })
   const active = sorted.find(node => node.active)
-  const outer = active
-    ? sorted.filter(node => node.id !== active.id)
-    : sorted
+  const outer = active ? sorted.filter(node => node.id !== active.id) : sorted
   const ringRadiusX = outer.length > 5 ? 245 : 215
   const ringRadiusY = outer.length > 5 ? 116 : 104
 

package/src/components/common/research/EvidenceDossier.tsx

@@ -85,12 +85,16 @@ function formatUpdatedAt(value?: string): string | null {
   if (!value) return null
   const date = new Date(value)
   if (Number.isNaN(date.getTime())) return value
-  return new Intl.DateTimeFormat(undefined, {
+  const monthDayYear = new Intl.DateTimeFormat('en-US', {
     month: 'short',
     day: 'numeric',
+    year: 'numeric',
+  }).format(date)
+  const time = new Intl.DateTimeFormat('en-US', {
     hour: 'numeric',
     minute: '2-digit',
   }).format(date)
+  return `${monthDayYear} · ${time}`
 }
 
 function normalizeEvidenceSource(
@@ -159,7 +163,7 @@ const Dossier = styled.article`
   gap: 24px;
   min-width: 0;
   position: relative;
-  color: var(--platform-colors-text, #2e3338);
+  color: var(--platform-colors-text, #1c1a17);
 `
 
 const Header = styled.header`
@@ -187,7 +191,7 @@ const ModeSwitch = styled.div`
   gap: 4px;
   padding: 3px;
   border: 1px solid var(--platform-colors-border, rgb(46 51 56 / 10%));
-  border-radius: 999px;
+  border-radius: var(--platform-radius-sm);
   background: var(--platform-colors-surface, rgb(255 254 250 / 86%));
   box-shadow: var(--platform-shadows-sm, 0 10px 30px rgb(46 51 56 / 8%));
   backdrop-filter: blur(10px);
@@ -210,13 +214,13 @@ const ModeDescription = styled.div`
 const ModeButton = styled.button<{ $active: boolean }>`
   min-height: 26px;
   border: 0;
-  border-radius: 999px;
+  border-radius: var(--platform-radius-sm);
   background: ${({ $active }) =>
     $active ? 'var(--platform-colors-surface-hover)' : 'transparent'};
   padding: 0 10px;
   color: ${({ $active }) =>
     $active
-      ? 'var(--platform-colors-text, #2e3338)'
+      ? 'var(--platform-colors-text, #1c1a17)'
       : 'var(--platform-colors-text-secondary, #8f98a4)'};
   font: inherit;
   font-size: 12px;
@@ -225,7 +229,7 @@ const ModeButton = styled.button<{ $active: boolean }>`
 `
 
 const Kicker = styled.div`
-  color: var(--platform-colors-text-secondary, #9aa2ad);
+  color: var(--platform-colors-text-secondary, #8f897f);
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 0.08em;
@@ -271,13 +275,13 @@ const TitleInput = styled.textarea`
 
 const Question = styled.div`
   max-width: 72ch;
-  color: var(--platform-colors-text-secondary, #68717c);
+  color: var(--platform-colors-text-secondary, #6b665e);
   font-size: 14px;
   line-height: 1.55;
 `
 
 const UpdatedStamp = styled.div`
-  color: var(--platform-colors-text-secondary, #9aa2ad);
+  color: var(--platform-colors-text-secondary, #8f897f);
   font-size: 11px;
   font-weight: 750;
   letter-spacing: 0.05em;
@@ -294,7 +298,7 @@ const Narrative = styled.section`
 
 const Lead = styled.div`
   margin: 0;
-  color: var(--platform-colors-text, #2e3338);
+  color: var(--platform-colors-text, #1c1a17);
   font-size: clamp(18px, 1.6vw, 22px);
   line-height: 1.58;
 `
@@ -320,7 +324,7 @@ const Finding = styled.article`
 `
 
 const FindingNumber = styled.div`
-  color: var(--platform-colors-text-secondary, #9aa2ad);
+  color: var(--platform-colors-text-secondary, #8f897f);
   font-size: 13px;
   font-weight: 800;
   letter-spacing: 0.05em;
@@ -367,7 +371,7 @@ const DeleteAction = styled.button`
   padding: 0;
   border: 0;
   background: transparent;
-  color: var(--platform-colors-text-secondary, #9aa2ad);
+  color: var(--platform-colors-text-secondary, #8f897f);
   font: inherit;
   font-size: 11px;
   font-weight: 800;
@@ -395,7 +399,7 @@ const Confidence = styled.span<{ $strength: EvidenceStrength }>`
       ? '#3d6b4a'
       : $strength === 'weak'
       ? '#9a694f'
-      : 'var(--platform-colors-text-secondary, #68717c)'};
+      : 'var(--platform-colors-text-secondary, #6b665e)'};
   font-size: 11px;
   font-weight: 800;
   letter-spacing: 0.05em;
@@ -405,7 +409,7 @@ const Confidence = styled.span<{ $strength: EvidenceStrength }>`
 const Claim = styled.p`
   max-width: 76ch;
   margin: 0;
-  color: var(--platform-colors-text, #2e3338);
+  color: var(--platform-colors-text, #1c1a17);
   font-size: 14.5px;
   line-height: 1.72;
 `
@@ -418,7 +422,7 @@ const Annotation = styled.aside`
   max-width: 72ch;
   border-left: 3px solid rgb(82 90 101 / 36%);
   padding: 4px 0 4px 14px;
-  color: var(--platform-colors-text-secondary, #68717c);
+  color: var(--platform-colors-text-secondary, #6b665e);
   font-size: 13px;
   line-height: 1.55;
 `
@@ -445,7 +449,7 @@ const EvidenceHandle = styled.button<{ $strength: EvidenceStrength }>`
       ? '#3d6b4a'
       : $strength === 'weak'
       ? '#9a694f'
-      : 'var(--platform-colors-text-secondary, #68717c)'};
+      : 'var(--platform-colors-text-secondary, #6b665e)'};
   font: inherit;
   font-size: 0.78em;
   font-weight: 750;
@@ -485,7 +489,7 @@ const AuditList = styled.section`
 
 const AuditIntro = styled.div`
   max-width: 70ch;
-  color: var(--platform-colors-text-secondary, #68717c);
+  color: var(--platform-colors-text-secondary, #6b665e);
   font-size: 13px;
   line-height: 1.55;
 `
@@ -500,7 +504,7 @@ const EvidenceCard = styled.div`
   gap: 8px;
   min-width: 0;
   border: 1px solid var(--platform-colors-border, rgb(46 51 56 / 10%));
-  border-radius: 8px;
+  border-radius: var(--platform-radius-md, 0px);
   background: var(--platform-colors-surface, rgb(255 255 255 / 56%));
   padding: 12px 13px;
 `
@@ -523,7 +527,7 @@ const EvidenceLabel = styled.span`
 const EvidenceTitle = styled.a`
   min-width: 0;
   overflow: hidden;
-  color: var(--platform-colors-text, #2e3338);
+  color: var(--platform-colors-text, #1c1a17);
   font-size: 14px;
   font-weight: 750;
   line-height: 1.3;
@@ -541,7 +545,7 @@ const EvidenceTitle = styled.a`
 `
 
 const EvidenceNote = styled.div`
-  color: var(--platform-colors-text-secondary, #68717c);
+  color: var(--platform-colors-text-secondary, #6b665e);
   font-size: 13px;
   line-height: 1.45;
 `
@@ -579,7 +583,7 @@ const QuietListItems = styled.div`
 `
 
 const QuietListItem = styled.div`
-  color: var(--platform-colors-text-secondary, #68717c);
+  color: var(--platform-colors-text-secondary, #6b665e);
   font-size: 14px;
   line-height: 1.55;
 `

package/src/components/common/tiles/CatalogCard.tsx

@@ -59,7 +59,7 @@ const StyledStatusBadge = styled.span<{ $active: boolean }>`
   flex: 0 0 auto;
   align-self: flex-start;
   padding: 2px var(--platform-spacing-sm);
-  border-radius: var(--platform-radius-full);
+  border-radius: var(--platform-radius-sm);
   background: ${({ $active }) =>
     $active
       ? 'var(--platform-colors-accent)'

package/src/components/credentials/CredentialsPanel.tsx

@@ -177,9 +177,7 @@ export function CredentialsPanel({
               loading={loading}
               busy={busyId === entry.id}
               storageBlocked={storageBlocked}
-              onSave={value =>
-                run(entry.id, () => onSave(entry.id, value))
-              }
+              onSave={value => run(entry.id, () => onSave(entry.id, value))}
               onDelete={() => run(entry.id, () => onDelete(entry.id))}
             />
           ))}
@@ -219,9 +217,7 @@ export function CredentialsPanel({
               disabled={loading || storageBlocked}
               busy={busy}
               aria-label={`${entry.label} API key`}
-              onSave={value =>
-                run(entry.id, () => onSave(entry.id, value))
-              }
+              onSave={value => run(entry.id, () => onSave(entry.id, value))}
               onRemove={
                 entry.configured
                   ? () => run(entry.id, () => onDelete(entry.id))