fix(platform): fold helper copy lines into labels, placeholders and options

Drop the second line of copy under fields, form dialogs, settings rows and
page headers across the product routes, and the hint data that fed them.
Each line is deleted when it restated its label, baked into the
placeholder, label or option when it carried a format, bound or trade-off,
or left to the dialog's Setup guide when it was setup steps. Validation
moves to error, a locked control's reason to disabledReason, and a
preference's explanation into its existing About tooltip.

Kept lines carry what nothing else can: one-time secrets, irreversible
consequences, security or privacy exposure, and state the viewer cannot
otherwise see.

Author: waleedlatif1

apps/sim/app/(product)/_components/access-requests/review-modal.tsx

@@ -138,7 +138,11 @@ export function ReviewModal({ organizationId, requestId, onClose }: ReviewModalP
                   inputMode='numeric'
                   value={newLimit}
                   onChange={setNewLimit}
-                  hint='Enter a whole number above the current limit.'
+                  error={
+                    newLimit.trim() && !review.isValidLimit(parsedLimit)
+                      ? 'Enter a whole number above the current limit.'
+                      : undefined
+                  }
                 />
               )}
             </>

apps/sim/app/(product)/_components/access-requests/review-requests.tsx

@@ -56,7 +56,7 @@ export function ReviewRequests({ organizationId }: ReviewRequestsProps) {
             label='Allow requests'
             description={
               settings.allowed
-                ? 'People can send requests for administrators to review.'
+                ? undefined
                 : 'New requests and approvals are paused. You can still view history and decline pending requests.'
             }
           >

apps/sim/app/(product)/_components/chat/panel/browser-session/page-prompts.tsx

@@ -130,7 +130,6 @@ interface ChoicePromptProps {
   fieldLabel: string
   placeholder: string
   options: readonly { value: string; label: string }[]
-  hintFor?: (choiceId: string) => string | undefined
   /** A refusal the page should remember, offered beside Cancel. */
   refuse?: { label: string; onSelect: () => void }
   onCancel: () => void
@@ -147,7 +146,6 @@ function ChoicePrompt({
   fieldLabel,
   placeholder,
   options,
-  hintFor,
   refuse,
   onCancel,
   onChoose,
@@ -191,7 +189,6 @@ function ChoicePrompt({
           options={options}
           value={choiceId || undefined}
           onValueChange={setChoiceId}
-          hint={choiceId ? hintFor?.(choiceId) : undefined}
         />
       </div>
     </Modal>
@@ -227,14 +224,8 @@ function ClientCertificatePrompt({ prompt, respond }: PromptModalProps<'client-c
       placeholder='Choose a certificate'
       options={prompt.certificates.map((certificate) => ({
         value: certificate.id,
-        label: certificate.subject || certificate.id,
+        label: `${certificate.subject || certificate.id} · ${certificate.issuer || 'Unknown issuer'} · Expires ${formatInstantDate(certificate.expiresAt)}`,
       }))}
-      hintFor={(choiceId) => {
-        const chosen = prompt.certificates.find((certificate) => certificate.id === choiceId)
-        return chosen
-          ? `Issued by ${chosen.issuer || 'unknown issuer'} · Expires ${formatInstantDate(chosen.expiresAt)}`
-          : undefined
-      }}
       refuse={{
         label: "Don't send",
         onSelect: () => respond({ allowed: false, remember: true }),

apps/sim/app/(product)/_components/links-page/link-editor.tsx

@@ -36,6 +36,9 @@ export function LinkEditor({
 }: LinkEditorProps) {
   const editor = useLinkEditor(organizationId, link, initialName, initialUrl)
   const { draft, errors, pending } = editor
+  const accessReason = editor.canManage
+    ? undefined
+    : 'Only the creator or an organization admin can change access.'
   return (
     <Modal
       open
@@ -65,7 +68,6 @@ export function LinkEditor({
           value={draft.defaultUrl ?? ''}
           onChange={(value) => editor.change('defaultUrl', value || null)}
           error={errors.defaultUrl}
-          hint={`Opens when no value fills ${LINK_LIMITS.variable}.`}
         />
       )}
       <TextField
@@ -87,25 +89,20 @@ export function LinkEditor({
         onChange={(value) => editor.change('description', value)}
         error={errors.description}
       />
-      <FieldFrame
-        label='Access'
-        hint={
-          editor.canManage
-            ? undefined
-            : 'Only the creator or an organization admin can change access.'
-        }
-      >
+      <FieldFrame label='Access'>
         <div className={styles.access}>
           <Checkbox
             label='Hide from the Links page'
             checked={draft.unlisted}
             disabled={!editor.canManage || pending}
+            disabledReason={accessReason}
             onCheckedChange={(checked) => editor.change('unlisted', checked)}
           />
           <Checkbox
             label='Only the creator and admins can edit'
             checked={draft.restrictEdit}
             disabled={!editor.canManage || pending}
+            disabledReason={accessReason}
             onCheckedChange={(checked) => editor.change('restrictEdit', checked)}
           />
         </div>

apps/sim/app/(product)/_components/oauth-connect-modal/oauth-connect-modal.tsx

@@ -112,7 +112,6 @@ export function OAuthConnectModal({
             value={connect.clientFieldValues[field.id] ?? ''}
             onValueChange={(value) => connect.setClientField(field.id, value)}
             options={field.options}
-            hint={field.hint}
           />
         ) : field.secret ? (
           <SecretField
@@ -123,7 +122,6 @@ export function OAuthConnectModal({
             placeholder={field.placeholder}
             autoComplete='new-password'
             required
-            hint={field.hint}
           />
         ) : (
           <TextField
@@ -134,7 +132,6 @@ export function OAuthConnectModal({
             placeholder={field.placeholder}
             autoComplete='off'
             required
-            hint={field.hint}
           />
         )
       )}

apps/sim/app/(product)/_components/service-account-modal/service-account-modal.dom.test.tsx

@@ -268,7 +268,7 @@ it('adds a keyless AWS role: shows what to paste into AWS and submits the signed
 
 it('adds AWS access keys: submits only the keys, never a subject, and requires both', async () => {
   const dialog = await open('aws-service-account', 'AWS')
-  await chooseAuthType(dialog, 'Access keys')
+  await chooseAuthType(dialog, 'Access keys (long-lived)')
 
   expect(labelled(dialog, 'Issuer')).toBeNull()
   expect(labelled(dialog, 'Role ARN')).toBeNull()
@@ -287,12 +287,12 @@ it('adds AWS access keys: submits only the keys, never a subject, and requires b
 
 it('drops a secret when the auth type that used it is left', async () => {
   const dialog = await open('aws-service-account', 'AWS')
-  await chooseAuthType(dialog, 'Access keys')
+  await chooseAuthType(dialog, 'Access keys (long-lived)')
   type(input(dialog, 'Access key ID'), 'AKIAEXAMPLEKEY12345')
   type(input(dialog, 'Secret access key'), 'first-secret')
 
   await chooseAuthType(dialog, 'IAM role (keyless, via Sim OIDC)')
-  await chooseAuthType(dialog, 'Access keys')
+  await chooseAuthType(dialog, 'Access keys (long-lived)')
 
   expect(input(dialog, 'Secret access key').value).toBe('')
   expect(input(dialog, 'Access key ID').value).toBe('AKIAEXAMPLEKEY12345')
@@ -322,7 +322,7 @@ it('offers keyless sign-in disabled, with no instructions, where the deployment
   keyless = { available: false }
   const dialog = await open('aws-service-account', 'AWS')
 
-  expect(authTypeTrigger(dialog).textContent).toContain('Access keys')
+  expect(authTypeTrigger(dialog).textContent).toContain('Access keys (long-lived)')
   expect(labelled(dialog, 'Issuer')).toBeNull()
   act(() => authTypeTrigger(dialog).click())
   await settle()
@@ -336,7 +336,7 @@ it('never offers keyless sign-in to an organization credential, and never mints
     scope: { kind: 'organization', organizationId: 'org-1' },
   })
 
-  expect(authTypeTrigger(dialog).textContent).toContain('Access keys')
+  expect(authTypeTrigger(dialog).textContent).toContain('Access keys (long-lived)')
   expect(requests.some((request) => request.path === '/api/credentials/workload-identity')).toBe(
     false
   )

apps/sim/app/(product)/_components/service-account-modal/service-account-modal.tsx

@@ -194,10 +194,9 @@ function KeyFormModal({
               placeholder={field.placeholder}
               viewOnly
               spellCheck={false}
-              hint={field.hint}
             />
           ) : (
-            <CopyField key={field.id} label={field.label} value={field.value} hint={field.hint} />
+            <CopyField key={field.id} label={field.label} value={field.value} />
           )
         ) : field.options ? (
           <SelectField
@@ -206,7 +205,6 @@ function KeyFormModal({
             value={field.value}
             onValueChange={(value) => form.setField(field.id, value)}
             options={field.options}
-            hint={field.hint}
             error={field.error}
             optional={!field.required}
           />
@@ -221,7 +219,7 @@ function KeyFormModal({
             spellCheck={false}
             required={field.required}
             optional={!field.required}
-            hint={field.hint}
+            hint={field.formatWarning}
             error={field.error}
           />
         ) : field.secret ? (
@@ -234,7 +232,7 @@ function KeyFormModal({
             autoComplete='new-password'
             required={field.required}
             optional={!field.required}
-            hint={field.hint}
+            hint={field.formatWarning}
             error={field.error}
           />
         ) : (
@@ -247,7 +245,7 @@ function KeyFormModal({
             autoComplete='off'
             required={field.required}
             optional={!field.required}
-            hint={field.hint}
+            hint={field.formatWarning}
             error={field.error}
           />
         )
@@ -256,15 +254,15 @@ function KeyFormModal({
         label='Display name'
         value={form.displayName}
         onChange={form.setDisplayName}
-        placeholder={form.displayNamePlaceholder}
+        placeholder={`${form.vendorName ?? serviceName} ${form.connectNoun}`}
         autoComplete='off'
         optional
       />
       <TextAreaField
         label='Description'
         value={form.description}
         onChange={form.setDescription}
-        placeholder='Optional description'
+        placeholder='What will you use this connection for?'
         maxLength={500}
         optional
       />

apps/sim/app/(product)/_components/settings-parts/saved-settings.tsx

@@ -26,28 +26,31 @@ export function SavedSettingsSection({ title, children }: SavedSettingsSectionPr
 interface BooleanRowProps {
   setting: Parameters<typeof useBooleanSetting>[0]
   label: string
-  description: string
-  preview?: 'auto-connect-on-drop' | 'auto-focus-on-click' | 'canvas-error-notification'
+  /** A clip of the behavior and the one line that explains it, both in the row's About tooltip. */
+  preview?: {
+    clip: 'auto-connect-on-drop' | 'auto-focus-on-click' | 'canvas-error-notification'
+    caption: string
+  }
 }
 
 /** A saved on-or-off preference. */
-export function BooleanRow({ setting, label, description, preview }: BooleanRowProps) {
+export function BooleanRow({ setting, label, preview }: BooleanRowProps) {
   const { checked, disabled, set } = useBooleanSetting(setting)
   return (
-    <SettingsRow label={label} description={description}>
+    <SettingsRow label={label}>
       {preview && (
         <Tooltip
-          label={description}
+          label={preview.caption}
           panel={
             <span className={styles.preview} data-material='floating' data-elevation='menu'>
-              <span data-type='T060'>{description}</span>
+              <span data-type='T060'>{preview.caption}</span>
               <video
                 aria-label={`${label} example`}
                 autoPlay
                 muted
                 playsInline
-                loop={preview !== 'canvas-error-notification'}
-                src={`/tooltips/${preview}.mp4`}
+                loop={preview.clip !== 'canvas-error-notification'}
+                src={`/tooltips/${preview.clip}.mp4`}
               />
             </span>
           }

apps/sim/app/(product)/_components/skill-fields/skill-fields.tsx

@@ -28,8 +28,8 @@ interface SkillFieldsProps {
   onEdit: (next: SkillDraft, changed: readonly (keyof SkillDraft)[]) => void
   viewOnly?: boolean
   disabled?: boolean
-  /** Guidance under the name, such as why the skill cannot be edited. */
-  nameHint?: string
+  /** Why a view-only skill cannot be edited, which a read-only field cannot otherwise show. */
+  readOnlyReason?: string
 }
 
 /**
@@ -42,7 +42,7 @@ export function SkillFields({
   onEdit,
   viewOnly = false,
   disabled = false,
-  nameHint,
+  readOnlyReason,
 }: SkillFieldsProps) {
   function editContent(value: string) {
     const parsed = parseSkillMarkdown(value)
@@ -58,8 +58,8 @@ export function SkillFields({
       <TextField
         label='Name'
         name='name'
-        placeholder='Skill name'
-        hint={nameHint}
+        placeholder='my-skill'
+        hint={readOnlyReason}
         error={errors.name}
         value={draft.name}
         onChange={(name) => onEdit({ ...draft, name }, ['name'])}

apps/sim/app/(product)/_components/workspace/knowledge/connector-modal/connector-modal.tsx

@@ -297,11 +297,6 @@ function ConnectorDialog({
               label: credential.name || credential.provider,
             }))}
             disabled={busy}
-            hint={
-              isSearchIndex
-                ? 'Members sync with their own accounts connected in Integrations.'
-                : undefined
-            }
           />
         )}
       {fields(