@holdyapp/sdk 1.5.0 → 1.9.0

package/src/changes.ts

@@ -1,3 +1,5 @@
+import { TIP_CSS } from './tip-css'
+import { applyThemeVars, readTheme } from './theme'
 import { changeArm, matchesPathTemplate, type ChangeArm } from './arm'
 
 export type ChangeAnchor =
@@ -5,14 +7,21 @@ export type ChangeAnchor =
   | { kind: 'text'; value: string }
   | { kind: 'page' }
 
+export interface ChecklistItem {
+  definition_name: string
+  label: string
+  events: string[]
+}
+
 export interface ProductChange {
   id: string
-  kind: 'copy' | 'guidance'
+  kind: 'copy' | 'guidance' | 'question' | 'checklist'
   path: string
   anchor: ChangeAnchor
   expected_text: string | null
-  content: { text: string }
+  content: { text: string; items?: ChecklistItem[] }
   holdout_pct: number
+  plan_id?: string
 }
 
 export interface ProductChangesOptions {
@@ -25,6 +34,8 @@ export interface ProductChangesOptions {
 
 export interface ProductChangesHandle {
   onNavigate(): void
+  /** Evento do produto: marca na hora o passo do checklist que ele satisfaz; o servidor confirma depois. */
+  onEvent(name: string): void
   refresh(): Promise<void>
   teardown(): void
 }
@@ -35,13 +46,17 @@ const SCAN_DEBOUNCE_MS = 250
 const SEEN_KEY = 'holdy_changes_seen'
 const DISMISSED_KEY = 'holdy_changes_dismissed'
 const TIP_GAP_PX = 8
+const ANSWERED_KEY = 'holdy_questions_answered'
+const FOLDED_KEY = 'holdy_checklist_folded'
+const COMPLETED_KEY = 'holdy_checklist_completed'
+const PROGRESS_REFRESH_MS = 60 * 1000
+export const VOICE_EVENT = '$voice'
+export const MAX_ANSWER_CHARS = 1000
+const THANKS_MS = 1600
+export const PREVIEW_PARAM = 'holdy_preview'
+const PREVIEW_KEY = 'holdy_preview'
+const PREVIEW_ID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
 
-const TIP_CSS = `:host{all:initial}
-.tip{position:fixed;box-sizing:border-box;max-width:280px;padding:10px 12px;border-radius:8px;background:#111;color:#fff;font:13px/1.45 system-ui,-apple-system,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.18);pointer-events:auto;display:flex;gap:10px;align-items:flex-start}
-.tip p{margin:0;flex:1}
-.tip button{all:unset;cursor:pointer;opacity:.7;font-size:15px;line-height:1}
-.tip button:hover,.tip button:focus-visible{opacity:1}
-@media (prefers-color-scheme:dark){.tip{background:#fff;color:#111}}`
 
 export function normalizeText(text: string): string {
   return text.replace(/\s+/g, ' ').trim()
@@ -58,11 +73,24 @@ function isAnchor(value: unknown): value is ChangeAnchor {
   return (a?.kind === 'selector' || a?.kind === 'text') && typeof a.value === 'string' && a.value.length > 0
 }
 
+function isItem(value: unknown): value is ChecklistItem {
+  const i = value as ChecklistItem | null
+  return (
+    typeof i?.definition_name === 'string' &&
+    typeof i.label === 'string' &&
+    Array.isArray(i.events) &&
+    i.events.every((e) => typeof e === 'string')
+  )
+}
+
 function isChange(value: unknown): value is ProductChange {
   const c = value as ProductChange | null
   return (
     typeof c?.id === 'string' &&
-    (c.kind === 'copy' || c.kind === 'guidance') &&
+    (c.kind === 'copy' ||
+      c.kind === 'guidance' ||
+      (c.kind === 'question' && typeof c.plan_id === 'string') ||
+      (c.kind === 'checklist' && Array.isArray(c.content?.items) && c.content.items.length > 0 && c.content.items.every(isItem))) &&
     typeof c.path === 'string' &&
     isAnchor(c.anchor) &&
     typeof c.content?.text === 'string' &&
@@ -74,11 +102,40 @@ export function changesForPage(
   changes: readonly ProductChange[],
   path: string,
   accountKey: string | null,
-): Array<{ change: ProductChange; arm: ChangeArm }> {
-  if (!accountKey) return []
+  previewId: string | null = null,
+): Array<{ change: ProductChange; arm: ChangeArm; preview: boolean }> {
+  // O checklist acompanha a conta pelo produto inteiro: o molde de página é
+  // só onde ele nasceu, não onde aparece.
   return changes
-    .filter((c) => matchesPathTemplate(c.path, path))
-    .map((change) => ({ change, arm: changeArm(change.id, accountKey, change.holdout_pct) }))
+    .filter((c) => c.kind === 'checklist' || matchesPathTemplate(c.path, path))
+    .flatMap((change): Array<{ change: ProductChange; arm: ChangeArm; preview: boolean }> => {
+      if (change.id === previewId) return [{ change, arm: 'change', preview: true }]
+      if (!accountKey) return []
+      return [{ change, arm: changeArm(change.id, accountKey, change.holdout_pct), preview: false }]
+    })
+}
+
+export function resolvePreviewId(search: string, store: Pick<Storage, 'getItem' | 'setItem' | 'removeItem'> | undefined): string | null {
+  let asked: string | null = null
+  try {
+    asked = new URLSearchParams(search).get(PREVIEW_PARAM)
+  } catch {
+    asked = null
+  }
+  try {
+    if (asked !== null) {
+      if (PREVIEW_ID.test(asked)) {
+        store?.setItem(PREVIEW_KEY, asked)
+        return asked
+      }
+      store?.removeItem(PREVIEW_KEY)
+      return null
+    }
+    const kept = store?.getItem(PREVIEW_KEY) ?? null
+    return kept && PREVIEW_ID.test(kept) ? kept : null
+  } catch {
+    return asked !== null && PREVIEW_ID.test(asked) ? asked : null
+  }
 }
 
 function storage(kind: 'local' | 'session'): Storage | undefined {
@@ -155,7 +212,7 @@ interface AppliedCopy {
 
 export function installProductChanges(opts: ProductChangesOptions): ProductChangesHandle {
   if (typeof window === 'undefined' || typeof document === 'undefined') {
-    return { onNavigate: () => undefined, refresh: async () => undefined, teardown: () => undefined }
+    return { onNavigate: () => undefined, onEvent: () => undefined, refresh: async () => undefined, teardown: () => undefined }
   }
 
   let changes: ProductChange[] = []
@@ -165,6 +222,11 @@ export function installProductChanges(opts: ProductChangesOptions): ProductChang
   let host: HTMLElement | null = null
   const copies = new Map<string, AppliedCopy>()
   const tips = new Map<string, () => void>()
+  const progress = new Map<string, Set<string>>()
+  const progressAt = new Map<string, number>()
+  const lists = new Map<string, () => void>()
+  let fetchedForKey: string | null = null
+  let previewId = resolvePreviewId(location.search, storage('session'))
 
   const log = (message: string): void => {
     if (opts.debug) console.warn(`[holdy] ${message}`)
@@ -221,22 +283,69 @@ export function installProductChanges(opts: ProductChangesOptions): ProductChang
     return root
   }
 
-  const showTip = (anchor: Element | null, change: ProductChange): boolean => {
+  let dismissedPreview = false
+
+  const previewTag = (): HTMLElement => {
+    const tag = document.createElement('span')
+    tag.className = 'preview'
+    tag.textContent = 'Prévia, só você vê'
+    return tag
+  }
+
+  const showTip = (anchor: Element | null, change: ProductChange, preview: boolean): boolean => {
     if (tips.has(change.id)) return true
-    if (readSet(storage('local'), DISMISSED_KEY).has(change.id)) return true
+    if (!preview && readSet(storage('local'), DISMISSED_KEY).has(change.id)) return true
+    const asking = change.kind === 'question'
+    if (!preview && asking && readSet(storage('local'), ANSWERED_KEY).has(change.id)) return true
     const shadow = ensureRoot()
     if (!shadow) return false
+    if (host) applyThemeVars(host, readTheme(document, (el) => window.getComputedStyle(el as Element), anchor))
 
     const card = document.createElement('div')
-    card.className = 'tip'
-    card.setAttribute('role', 'tooltip')
+    card.className = asking ? 'tip ask' : 'tip'
+    card.setAttribute('role', asking ? 'dialog' : 'tooltip')
     const text = document.createElement('p')
     text.textContent = change.content.text
     const close = document.createElement('button')
     close.type = 'button'
     close.setAttribute('aria-label', 'Fechar')
     close.textContent = '×'
-    card.append(text, close)
+    if (asking) {
+      const head = document.createElement('div')
+      head.className = 'head'
+      head.append(text, close)
+      const input = document.createElement('textarea')
+      input.maxLength = MAX_ANSWER_CHARS
+      input.setAttribute('aria-label', change.content.text)
+      const send = document.createElement('button')
+      send.type = 'button'
+      send.className = 'send'
+      send.textContent = 'Enviar'
+      send.disabled = true
+      input.addEventListener('input', () => {
+        send.disabled = input.value.trim().length === 0
+      })
+      send.addEventListener('click', () => {
+        const answer = input.value.trim().slice(0, MAX_ANSWER_CHARS)
+        if (!answer) return
+        if (!preview) {
+          addToSet(storage('local'), ANSWERED_KEY, change.id)
+          opts.track(VOICE_EVENT, {
+            question: change.content.text,
+            text: answer,
+            action_plan_id: change.plan_id,
+            change_id: change.id,
+            path: location.pathname,
+          })
+        }
+        card.replaceChildren(Object.assign(document.createElement('p'), { textContent: 'Obrigado pela resposta.' }))
+        setTimeout(remove, THANKS_MS)
+      })
+      card.append(head, input, send)
+    } else {
+      card.append(text, close)
+    }
+    if (preview) card.prepend(previewTag())
     card.style.top = '-9999px'
     card.style.left = '-9999px'
     shadow.appendChild(card)
@@ -269,6 +378,11 @@ export function installProductChanges(opts: ProductChangesOptions): ProductChang
     }
 
     close.addEventListener('click', () => {
+      if (preview) {
+        dismissedPreview = true
+        remove()
+        return
+      }
       addToSet(storage('local'), DISMISSED_KEY, change.id)
       opts.track('$change_dismissed', { change_id: change.id, kind: change.kind })
       remove()
@@ -280,21 +394,154 @@ export function installProductChanges(opts: ProductChangesOptions): ProductChang
     return true
   }
 
+  const doneOf = (change: ProductChange): Set<string> => progress.get(change.id) ?? new Set()
+
+  const allDone = (change: ProductChange): boolean => {
+    const done = doneOf(change)
+    return (change.content.items ?? []).every((i) => done.has(i.definition_name))
+  }
+
+  const fetchProgress = async (change: ProductChange): Promise<void> => {
+    const account = opts.getAccountKey()
+    if (!account) return
+    const last = progressAt.get(change.id) ?? 0
+    if (Date.now() - last < PROGRESS_REFRESH_MS) return
+    progressAt.set(change.id, Date.now())
+    try {
+      const res = await fetch(
+        `${opts.baseUrl}/runtime/checklist?change_id=${encodeURIComponent(change.id)}&account=${encodeURIComponent(account)}`,
+        { headers: { Authorization: `Bearer ${opts.apiKey}` } },
+      )
+      if (!res.ok) return
+      const body = (await res.json()) as { done?: unknown }
+      const done = Array.isArray(body.done) ? body.done.filter((d): d is string => typeof d === 'string') : []
+      const set = doneOf(change)
+      for (const d of done) set.add(d)
+      progress.set(change.id, set)
+      lists.get(change.id)?.()
+    } catch (err) {
+      log(`checklist progress error: ${(err as Error).message}`)
+    }
+  }
+
+  const showChecklist = (change: ProductChange, preview: boolean): boolean => {
+    if (lists.has(change.id)) return true
+    if (!preview && readSet(storage('local'), COMPLETED_KEY).has(change.id)) return true
+    const shadow = ensureRoot()
+    if (!shadow) return false
+    const items = change.content.items ?? []
+
+    const card = document.createElement('div')
+    card.className = 'tip list'
+    card.setAttribute('role', 'region')
+    card.setAttribute('aria-label', change.content.text)
+    const head = document.createElement('div')
+    head.className = 'head'
+    const title = document.createElement('p')
+    const strong = document.createElement('strong')
+    strong.textContent = change.content.text
+    const count = document.createElement('span')
+    count.className = 'count'
+    title.append(strong, count)
+    const fold = document.createElement('button')
+    fold.type = 'button'
+    head.append(title, fold)
+    const list = document.createElement('ul')
+    card.append(head, list)
+    if (preview) card.prepend(previewTag())
+    card.style.position = 'fixed'
+    card.style.right = '16px'
+    card.style.bottom = '16px'
+    shadow.appendChild(card)
+
+    const remove = (): void => {
+      card.remove()
+      lists.delete(change.id)
+    }
+
+    const render = (): void => {
+      const done = doneOf(change)
+      const n = items.filter((i) => done.has(i.definition_name)).length
+      count.textContent = `${n} de ${items.length}`
+      const folded = readSet(storage('local'), FOLDED_KEY).has(change.id)
+      card.classList.toggle('folded', folded)
+      fold.textContent = folded ? '+' : '–'
+      fold.setAttribute('aria-label', folded ? 'Abrir' : 'Recolher')
+      list.replaceChildren(
+        ...items.map((item) => {
+          const li = document.createElement('li')
+          const isDone = done.has(item.definition_name)
+          if (isDone) li.className = 'done'
+          const mark = document.createElement('span')
+          mark.className = 'mark'
+          mark.setAttribute('aria-hidden', 'true')
+          mark.textContent = isDone ? '✓' : ''
+          const label = document.createElement('span')
+          label.textContent = item.label
+          li.append(mark, label)
+          return li
+        }),
+      )
+      if (!preview && n === items.length && items.length > 0) {
+        addToSet(storage('local'), COMPLETED_KEY, change.id)
+        opts.track('$checklist_completed', { change_id: change.id })
+        remove()
+      }
+    }
+
+    fold.addEventListener('click', () => {
+      const store = storage('local')
+      const set = readSet(store, FOLDED_KEY)
+      if (set.has(change.id)) set.delete(change.id)
+      else set.add(change.id)
+      try {
+        store?.setItem(FOLDED_KEY, JSON.stringify([...set].slice(-200)))
+      } catch {
+        /* storage indisponível */
+      }
+      render()
+    })
+
+    lists.set(change.id, render)
+    render()
+    void fetchProgress(change)
+    return true
+  }
+
   const scan = (): void => {
     timer = null
-    const active = changesForPage(changes, location.pathname, opts.getAccountKey())
+    const active = changesForPage(changes, location.pathname, opts.getAccountKey(), previewId)
     const activeIds = new Set(active.map((a) => a.change.id))
     for (const id of [...copies.keys()]) if (!activeIds.has(id)) restoreCopy(id)
     for (const [id, remove] of [...tips]) if (!activeIds.has(id)) remove()
+    for (const [id, render] of [...lists]) {
+      if (!activeIds.has(id)) {
+        lists.delete(id)
+        render()
+      }
+    }
 
-    for (const { change, arm } of active) {
+    for (const { change, arm, preview } of active) {
       const el = findAnchor(change.anchor)
-      if (!el && change.anchor.kind !== 'page') continue
-      if (change.kind === 'copy') {
+      if (!el && change.anchor.kind !== 'page') {
+        if (preview) log(`preview: âncora não encontrada em ${location.pathname}`)
+        continue
+      }
+      if (preview) {
+        if (change.kind === 'checklist') showChecklist(change, true)
+        else if (change.kind === 'copy') {
+          if (el) applyCopy(el, change)
+        } else if (!dismissedPreview) showTip(el, change, true)
+        continue
+      }
+      if (change.kind === 'checklist') {
+        if (arm === 'holdout' || allDone(change) || showChecklist(change, false)) expose(change, arm)
+        if (arm === 'change') void fetchProgress(change)
+      } else if (change.kind === 'copy') {
         if (!el) continue
         const shown = arm === 'change' ? applyCopy(el, change) : eligibleCopyNode(el, change) !== null
         if (shown) expose(change, arm)
-      } else if (arm === 'holdout' || showTip(el, change)) {
+      } else if (arm === 'holdout' || showTip(el, change, false)) {
         expose(change, arm)
       }
     }
@@ -306,8 +553,14 @@ export function installProductChanges(opts: ProductChangesOptions): ProductChang
 
   const refresh = async (): Promise<void> => {
     lastFetch = Date.now()
+    const account = opts.getAccountKey()
+    fetchedForKey = account
+    const params = new URLSearchParams()
+    if (account) params.set('account', account)
+    if (previewId) params.set('preview', previewId)
+    const qs = params.toString()
     try {
-      const res = await fetch(`${opts.baseUrl}/runtime/changes`, {
+      const res = await fetch(`${opts.baseUrl}/runtime/changes${qs ? `?${qs}` : ''}`, {
         headers: { Authorization: `Bearer ${opts.apiKey}` },
       })
       if (!res.ok) {
@@ -338,9 +591,28 @@ export function installProductChanges(opts: ProductChangesOptions): ProductChang
 
   return {
     onNavigate: () => {
-      if (Date.now() - lastFetch > NAV_REFRESH_MS) void refresh()
+      const asked = resolvePreviewId(location.search, storage('session'))
+      const previewChanged = asked !== previewId
+      if (previewChanged) {
+        previewId = asked
+        dismissedPreview = false
+        for (const id of [...copies.keys()]) restoreCopy(id)
+        for (const remove of [...tips.values()]) remove()
+      }
+      if (previewChanged || Date.now() - lastFetch > NAV_REFRESH_MS || opts.getAccountKey() !== fetchedForKey) void refresh()
       schedule()
     },
+    onEvent: (name) => {
+      for (const change of changes) {
+        if (change.kind !== 'checklist') continue
+        const hit = (change.content.items ?? []).filter((i) => i.events.includes(name))
+        if (hit.length === 0) continue
+        const set = doneOf(change)
+        for (const i of hit) set.add(i.definition_name)
+        progress.set(change.id, set)
+        lists.get(change.id)?.()
+      }
+    },
     refresh,
     teardown: () => {
       clearInterval(interval)
@@ -348,6 +620,7 @@ export function installProductChanges(opts: ProductChangesOptions): ProductChang
       observer?.disconnect()
       for (const id of [...copies.keys()]) restoreCopy(id)
       for (const remove of [...tips.values()]) remove()
+      for (const id of [...lists.keys()]) lists.delete(id)
       host?.remove()
       host = null
       root = null

package/src/core.test.ts

@@ -55,6 +55,21 @@ describe('HoldyCore', () => {
     expect(holdy.pending).toBe(0)
   })
 
+  it('release vai no context de todo evento, e só quando foi informada', async () => {
+    const { sent } = mockFetch()
+    const holdy = makeClient({ release: '  a1b2c3d  ' })
+    holdy.track('invite_sent')
+    holdy.track('invite_sent', undefined, { context: { release: 'da-chamada' } })
+    await holdy.flush()
+    expect(sent[0].events[0].context).toMatchObject({ release: 'a1b2c3d' })
+    expect(sent[0].events[1].context).toMatchObject({ release: 'da-chamada' })
+
+    const bare = makeClient()
+    bare.track('invite_sent')
+    await bare.flush()
+    expect(sent[1].events[0].context).toBeUndefined()
+  })
+
   it('identify emite $identify e persiste user_id nos próximos events', async () => {
     const { sent } = mockFetch()
     const holdy = makeClient()

package/src/core.ts

@@ -27,6 +27,7 @@ export class HoldyCore {
   private readonly flushAt: number
   private readonly debug: boolean
   private readonly source: 'sdk_web' | 'sdk_server'
+  private readonly release: string | null
 
   private queue: CanonicalEvent[] = []
   private timer: ReturnType<typeof setInterval> | null = null
@@ -46,6 +47,7 @@ export class HoldyCore {
     this.baseUrl = (opts.baseUrl ?? DEFAULT_BASE_URL).replace(/\/$/, '')
     this.flushAt = Math.max(1, opts.flushAt ?? DEFAULT_FLUSH_AT)
     this.debug = opts.debug ?? false
+    this.release = typeof opts.release === 'string' && opts.release.trim() ? opts.release.trim().slice(0, 64) : null
 
     const intervalMs = opts.flushIntervalMs ?? DEFAULT_FLUSH_INTERVAL_MS
     if (intervalMs > 0) {
@@ -71,6 +73,7 @@ export class HoldyCore {
     // porque é o que a Data layer usa pra resolver a conta.
     const context: Properties = {
       ...this.environmentContext(),
+      ...(this.release ? { release: this.release } : {}),
       ...(overrides?.context ?? {}),
     }
     if (accountKey) context.account_external_id = accountKey

package/src/friction.dom.test.ts

@@ -0,0 +1,54 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from 'vitest'
+import { installFrictionCapture, type FrictionCapture, type FrictionSignal } from './friction'
+
+let capture: FrictionCapture | null = null
+
+afterEach(() => {
+  capture?.teardown()
+  capture = null
+})
+
+function errorWithStack(message: string, stack: string): Error {
+  const err = new Error(message)
+  err.stack = stack
+  return err
+}
+
+describe('captura de erro de JS no navegador', () => {
+  it('erro de página sai com mensagem, linha, coluna e a pilha limpa', () => {
+    const signals: FrictionSignal[] = []
+    capture = installFrictionCapture({ onFriction: (s) => signals.push(s) })
+    const error = errorWithStack(
+      'dueDate indefinido',
+      'Error: dueDate indefinido\n    at salvar (https://app.acme.com/chunks/page.js?v=9:3:41)\n    at onClick (https://app.acme.com/chunks/main.js:8:2)',
+    )
+    window.dispatchEvent(
+      new ErrorEvent('error', { message: 'dueDate indefinido', filename: 'https://app.acme.com/chunks/page.js?v=9', lineno: 3, colno: 41, error }),
+    )
+    expect(signals).toHaveLength(1)
+    expect(signals[0].kind).toBe('js_error')
+    expect(signals[0].properties).toMatchObject({
+      message: 'dueDate indefinido',
+      source: 'https://app.acme.com/chunks/page.js',
+      line: 3,
+      column: 41,
+      stack: 'at salvar (https://app.acme.com/chunks/page.js:3:41)\nat onClick (https://app.acme.com/chunks/main.js:8:2)',
+    })
+  })
+
+  it('promise rejeitada leva a pilha do motivo, e erro sem pilha sai sem o campo', () => {
+    const signals: FrictionSignal[] = []
+    capture = installFrictionCapture({ onFriction: (s) => signals.push(s) })
+    const rejection = new Event('unhandledrejection') as Event & { reason?: unknown }
+    rejection.reason = errorWithStack('falhou', 'Error: falhou\n    at carregar (https://app.acme.com/chunks/a.js:1:7)')
+    window.dispatchEvent(rejection)
+    window.dispatchEvent(new ErrorEvent('error', { message: 'Script error.' }))
+    expect(signals[0].properties).toMatchObject({
+      message: 'falhou',
+      unhandled_rejection: true,
+      stack: 'at carregar (https://app.acme.com/chunks/a.js:1:7)',
+    })
+    expect('stack' in signals[1].properties).toBe(false)
+  })
+})

package/src/friction.test.ts

@@ -6,6 +6,7 @@ import {
   describeElement,
   stripRequestUrl,
   errorMessage,
+  sanitizeStack,
   installFrictionCapture,
   classifyRequest,
   documentStatus,
@@ -181,6 +182,13 @@ describe('isDeadClickTarget', () => {
     const icon = el('svg', {}, { closest: () => button })
     expect(isDeadClickTarget(icon)).toBe(true)
   })
+
+  it('alvo sem tagName não derruba o ouvinte, como no navegador do Facebook em 2026-10-08', () => {
+    const odd: ElementLike = { getAttribute: () => null }
+    expect(() => isDeadClickTarget(odd)).not.toThrow()
+    expect(isDeadClickTarget(odd)).toBe(false)
+    expect(() => describeElement(odd)).not.toThrow()
+  })
 })
 
 describe('describeElement', () => {
@@ -221,3 +229,38 @@ describe('installFrictionCapture fora do browser', () => {
     expect(() => capture.teardown()).not.toThrow()
   })
 })
+
+describe('sanitizeStack', () => {
+  it('guarda só os frames, sem a linha da mensagem e sem query na URL', () => {
+    const stack = [
+      "TypeError: Cannot read properties of undefined (reading 'dueDate') de ana@acme.com",
+      '    at ReminderForm (https://app.acme.com/_next/static/chunks/app/lembretes/page-1a2b.js?token=abc&v=2:1:4821)',
+      '    at onSubmit (https://app.acme.com/_next/static/chunks/main.js#frag:12:99)',
+      '    at async Promise.all (index 0)',
+    ].join('\n')
+    expect(sanitizeStack(stack)).toBe(
+      [
+        'at ReminderForm (https://app.acme.com/_next/static/chunks/app/lembretes/page-1a2b.js:1:4821)',
+        'at onSubmit (https://app.acme.com/_next/static/chunks/main.js:12:99)',
+        'at async Promise.all (index 0)',
+      ].join('\n'),
+    )
+  })
+
+  it('lê o formato do Firefox e do Safari', () => {
+    const stack = 'salvar@https://app.acme.com/assets/app.js?v=3:10:5\n@https://app.acme.com/assets/app.js:22:1'
+    expect(sanitizeStack(stack)).toBe(
+      'salvar@https://app.acme.com/assets/app.js:10:5\n@https://app.acme.com/assets/app.js:22:1',
+    )
+  })
+
+  it('corta em 8 frames de até 200 caracteres e devolve null quando não há frame', () => {
+    const frame = `    at f (https://app.acme.com/${'a'.repeat(300)}.js:1:1)`
+    const out = sanitizeStack(['Error: x', ...Array.from({ length: 20 }, () => frame)].join('\n')) ?? ''
+    expect(out.split('\n')).toHaveLength(8)
+    expect(out.split('\n').every((line) => line.length <= 200)).toBe(true)
+    expect(sanitizeStack('Error: só a mensagem')).toBeNull()
+    expect(sanitizeStack(undefined)).toBeNull()
+    expect(sanitizeStack('')).toBeNull()
+  })
+})