serverest 3.3.0-beta.1 → 3.3.0-beta.2

package/README.md

@@ -132,6 +132,8 @@ Toda resposta das rotas `/login`, `/usuarios`, `/produtos` e `/carrinhos` inform
 |---|---|
 | `X-ServeRest-Stages` | Todas as etapas da rota, em ordem de execução, com status, duração e detalhes |
 
+A página de documentação desenha essas etapas logo abaixo da resposta de cada "Try it out": mostra onde a requisição parou, por que parou e como seguir, sem precisar ler o cabeçalho.
+
 O cabeçalho é listado em `Access-Control-Expose-Headers`. Requisições `OPTIONS` (preflight de CORS) e as demais rotas (`/`, `/version`, `/swagger.json`) não possuem esse cabeçalho.
 
 Exemplo de 401 sem token em `POST /carrinhos`:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "serverest",
-  "version": "3.3.0-beta.1",
+  "version": "3.3.0-beta.2",
   "description": "Servidor REST local de forma rápida e simples para estudo de testes de API",
   "author": "Paulo Gonçalves <author@serverest.dev> (https://www.linkedin.com/in/paulo-goncalves/)",
   "license": "GPL-3.0",

package/src/app.js

@@ -122,7 +122,17 @@ if (!ehAmbienteDeTestes) {
 const uiOptionsBase = {
   customSiteTitle: 'ServeRest',
   customfavIcon: '/favicon.ico',
-  customCss
+  customCss,
+  swaggerOptions: {
+    // O swagger-ui-express serializa estas funções pelo código-fonte e elas só executam no navegador.
+    // A guarda evita página em branco quando o service worker serve um init mais novo que a página.
+    plugins: [
+      /* istanbul ignore next */
+      function () { return window.SwaggerUIBundle.plugins.DownloadUrl.apply(this, arguments) },
+      /* istanbul ignore next */
+      function () { return window.serverestFlowPanelPlugin ? window.serverestFlowPanelPlugin.apply(this, arguments) : {} }
+    ]
+  }
 }
 
 app.use('/', swaggerUi.serve)

package/src/swagger/index.js

@@ -7,7 +7,7 @@ const STYLES_DIR = join(__dirname, 'styles')
 const SCRIPTS_DIR = join(__dirname, 'scripts')
 const TRANSLATIONS_DIR = join(__dirname, 'translations')
 
-const STYLE_FILES = ['topbar.css', 'language-switcher.css', 'release-toast.css']
+const STYLE_FILES = ['topbar.css', 'language-switcher.css', 'release-toast.css', 'flow-panel.css']
 
 function loadCustomCss () {
   return STYLE_FILES
@@ -40,6 +40,14 @@ function buildUiLabelTranslations () {
   return entries.join(',\n')
 }
 
+// O painel sempre renderiza pt-BR e a tradução da página troca o texto, como no resto da UI.
+// ui.response entra porque o painel reaproveita o rótulo "Resposta" já existente.
+function buildFlowPanelTexts () {
+  const ptBr = require(join(TRANSLATIONS_DIR, 'pt-BR.js'))
+  const keys = Object.keys(ptBr).filter(k => k.startsWith('ui.flow.') || k === 'ui.response')
+  return JSON.stringify(keys.reduce((texts, key) => ({ ...texts, [key]: ptBr[key] }), {}))
+}
+
 const customCss = loadCustomCss()
 const customJsTemplate = loadCustomJsTemplate()
 
@@ -48,7 +56,8 @@ function buildCustomJsStr (releaseInfo, currentVersion, forceBanner) {
     __RELEASE_INFO__: JSON.stringify(releaseInfo),
     __CURRENT_VERSION__: JSON.stringify(currentVersion),
     __FORCE_BANNER__: JSON.stringify(forceBanner),
-    __UI_LABEL_TRANSLATIONS__: buildUiLabelTranslations()
+    __UI_LABEL_TRANSLATIONS__: buildUiLabelTranslations(),
+    __FLOW_PANEL_TEXTS__: buildFlowPanelTexts()
   }
   return Object.keys(replacements).reduce(
     (output, key) => output.split(key).join(replacements[key]),

package/src/swagger/scripts/08-flow-panel.js

@@ -0,0 +1,374 @@
+/* Painel "Fluxo da requisição": desenha o header X-ServeRest-Stages abaixo da resposta do "Try it out" */
+// O ponto e vírgula inicial é obrigatório: os scripts desta pasta são concatenados e, sem ele, o
+// navegador interpreta este bloco como uma chamada do resultado do script anterior.
+;(function () {
+  const texts = __FLOW_PANEL_TEXTS__
+  const stagesHeader = 'x-serverest-stages'
+  const slowMotionKey = 'serverestFlowSlowMotion'
+
+  function knownKey (key) {
+    return Object.prototype.hasOwnProperty.call(texts, key) ? key : null
+  }
+
+  function text (key) {
+    return knownKey(key) ? texts[key] : ''
+  }
+
+  function parseEntry (piece) {
+    const [name, ...params] = piece.split(';').map(part => part.trim())
+    const entry = {}
+    params.filter(Boolean).forEach(param => {
+      const separator = param.indexOf('=')
+      const key = separator === -1 ? param : param.slice(0, separator)
+      entry[key] = separator === -1 ? '' : param.slice(separator + 1)
+    })
+    entry.name = name
+    if (entry.dur !== undefined) {
+      const dur = Number(entry.dur)
+      entry.dur = entry.dur === '' || Number.isNaN(dur) ? undefined : dur
+    }
+    return entry
+  }
+
+  function parseStages (headerValue) {
+    if (typeof headerValue !== 'string') return []
+    return headerValue.split(',')
+      .map(piece => piece.trim())
+      .filter(Boolean)
+      .map(parseEntry)
+      .filter(entry => entry.name)
+  }
+
+  function extraParams (entry) {
+    return Object.keys(entry)
+      .filter(key => !['name', 'st', 'dur'].includes(key))
+      .reduce((params, key) => Object.assign(params, { [key]: entry[key] }), {})
+  }
+
+  function buildStage (entry) {
+    return {
+      name: entry.name,
+      st: entry.st,
+      dur: entry.dur,
+      params: extraParams(entry),
+      labelKey: knownKey('ui.flow.stage_label.' + entry.name),
+      descriptionKey: knownKey('ui.flow.stage_description.' + entry.name),
+      statusKey: knownKey('ui.flow.status.' + entry.st),
+      width: 0,
+      rules: []
+    }
+  }
+
+  function buildRule (entry, code) {
+    return {
+      name: entry.name,
+      code,
+      st: entry.st,
+      item: entry.item,
+      params: extraParams(entry),
+      labelKey: knownKey('ui.flow.rule_label.' + code),
+      statusKey: knownKey('ui.flow.status.' + entry.st)
+    }
+  }
+
+  function failureKeys (stage, rule, status) {
+    // 408 marca como failed a etapa em execução no timeout, e 500 ou mais é erro inesperado: a etapa não explica a falha.
+    if (status === 408) return { whyKey: 'ui.flow.why.status.timeout', howKey: 'ui.flow.how.status.timeout' }
+    if (status >= 500) return { whyKey: 'ui.flow.why.status.unexpected_error', howKey: 'ui.flow.how.status.unexpected_error' }
+    if (rule) {
+      const why = knownKey('ui.flow.why.rule.' + rule.code)
+      const how = knownKey('ui.flow.how.rule.' + rule.code)
+      if (why && how) return { whyKey: why, howKey: how }
+    }
+    if (stage.name === 'auth' && stage.params.reason) {
+      const why = knownKey('ui.flow.why.auth.' + stage.params.reason)
+      const how = knownKey('ui.flow.how.auth.' + stage.params.reason)
+      if (why && how) return { whyKey: why, howKey: how }
+    }
+    return {
+      whyKey: knownKey('ui.flow.why.stage.' + stage.name),
+      howKey: knownKey('ui.flow.how.stage.' + stage.name)
+    }
+  }
+
+  function buildFlowModel (entries, statusCode) {
+    if (!Array.isArray(entries) || entries.length === 0) return null
+    const stages = []
+    entries.forEach(entry => {
+      const separator = entry.name.indexOf('.')
+      const owner = separator > 0 ? entry.name.slice(0, separator) : null
+      const parent = owner ? stages.filter(stage => stage.name === owner).pop() : null
+      if (parent) {
+        parent.rules.push(buildRule(entry, entry.name.slice(separator + 1)))
+      } else {
+        stages.push(buildStage(entry))
+      }
+    })
+    const totalDur = stages.reduce((total, stage) => total + (stage.dur || 0), 0)
+    stages.forEach(stage => {
+      stage.width = totalDur > 0 ? (stage.dur || 0) / totalDur : 0
+    })
+    const status = Number(statusCode)
+    const failedStage = stages.find(stage => stage.st === 'failed') || null
+    const failedRule = failedStage ? failedStage.rules.find(rule => rule.st === 'failed') || null : null
+    let summary = 'completed'
+    let keys = { whyKey: null, howKey: null }
+    if (failedStage) {
+      summary = 'stopped'
+      keys = failureKeys(failedStage, failedRule, status)
+    } else if (status >= 400) {
+      summary = 'outside'
+      keys = { whyKey: 'ui.flow.why.outside', howKey: 'ui.flow.how.outside' }
+    }
+    return {
+      statusCode: Number.isNaN(status) ? null : status,
+      summary,
+      failedStage: failedStage ? failedStage.name : null,
+      failedRule: failedRule ? failedRule.code : null,
+      whyKey: keys.whyKey,
+      howKey: keys.howKey,
+      stages
+    }
+  }
+
+  function stepDelay (stage) {
+    if (stage.dur === undefined) return 420
+    return Math.min(1700, Math.max(420, stage.dur * 480))
+  }
+
+  function prefersReducedMotion () {
+    try {
+      return !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+    } catch (e) {
+      return false
+    }
+  }
+
+  function readSlowMotion () {
+    try {
+      return window.localStorage.getItem(slowMotionKey) !== 'false'
+    } catch (e) {
+      return true
+    }
+  }
+
+  function saveSlowMotion (enabled) {
+    try {
+      window.localStorage.setItem(slowMotionKey, enabled ? 'true' : 'false')
+    } catch (e) {}
+  }
+
+  function readResponse (response) {
+    try {
+      const headers = response && response.get('headers')
+      const map = headers && headers.toJS ? headers.toJS() : {}
+      const name = Object.keys(map).find(key => key.toLowerCase() === stagesHeader)
+      if (!name || map[name] === undefined || map[name] === null) return null
+      return { header: String(map[name]), status: response.get('status') }
+    } catch (e) {
+      return null
+    }
+  }
+
+  function createComponents (React) {
+    const h = React.createElement
+
+    class FlowBoundary extends React.Component {
+      constructor (props) {
+        super(props)
+        this.state = { failed: false }
+      }
+
+      static getDerivedStateFromError () {
+        return { failed: true }
+      }
+
+      componentDidCatch () {}
+
+      render () {
+        return this.state.failed ? null : this.props.children
+      }
+    }
+
+    // Todo texto traduzível fica sozinho no seu nó: a tradução da página compara o nó inteiro.
+    function label (key, className) {
+      return h('span', { key, className }, text(key))
+    }
+
+    // Código desconhecido vai em <code>, que a tradução da página nunca altera.
+    function codeOrLabel (key, raw, className) {
+      return key ? label(key, className) : h('code', { key: 'raw-' + raw, className }, String(raw === undefined ? '' : raw))
+    }
+
+    function statusClass (item) {
+      return 'serverest-flow-st-' + (item.statusKey ? item.st : 'unknown')
+    }
+
+    function textBlock (titleKey, bodyKey, className) {
+      return h('div', { key: titleKey, className: 'serverest-flow-block ' + className },
+        h('strong', { className: 'serverest-flow-block-title' }, text(titleKey)),
+        h('p', { className: 'serverest-flow-block-text' }, text(bodyKey))
+      )
+    }
+
+    function RuleRow (props) {
+      const rule = props.rule
+      return h('li', { className: 'serverest-flow-rule ' + statusClass(rule) },
+        codeOrLabel(rule.statusKey, rule.st, 'serverest-flow-status'),
+        codeOrLabel(rule.labelKey, rule.code, 'serverest-flow-name'),
+        rule.item !== undefined
+          ? h('span', { className: 'serverest-flow-item' },
+            label('ui.flow.item_position', 'serverest-flow-item-label'),
+            h('span', { className: 'serverest-flow-item-value' }, String(rule.item)))
+          : null
+      )
+    }
+
+    function StageRow (props) {
+      const { stage, model, expanded, onToggle } = props
+      const isFailed = model.failedStage === stage.name && stage.st === 'failed'
+      const expandable = !!stage.descriptionKey || (isFailed && !!model.whyKey)
+      const content = [
+        codeOrLabel(stage.statusKey, stage.st, 'serverest-flow-status'),
+        codeOrLabel(stage.labelKey, stage.name, 'serverest-flow-name'),
+        stage.dur !== undefined ? h('span', { className: 'serverest-flow-dur' }, stage.dur.toFixed(2) + ' ms') : null
+      ]
+      const head = expandable
+        ? h('button', { type: 'button', className: 'serverest-flow-row', 'aria-expanded': expanded ? 'true' : 'false', onClick: onToggle }, ...content)
+        : h('div', { className: 'serverest-flow-row' }, ...content)
+      const details = expandable && expanded
+        ? h('div', { className: 'serverest-flow-details' },
+          stage.descriptionKey ? textBlock('ui.flow.stage_description_title', stage.descriptionKey, 'serverest-flow-block-description') : null,
+          isFailed && model.whyKey ? textBlock('ui.flow.why_title', model.whyKey, 'serverest-flow-block-why') : null,
+          isFailed && model.howKey ? textBlock('ui.flow.how_title', model.howKey, 'serverest-flow-block-how') : null)
+        : null
+      const rules = stage.rules.length
+        ? h('ol', { className: 'serverest-flow-rules' }, stage.rules.map(rule => h(RuleRow, { key: rule.name, rule })))
+        : null
+      return h('li', { className: 'serverest-flow-stage ' + statusClass(stage) + (isFailed ? ' serverest-flow-stage-failed' : '') }, head, details, rules)
+    }
+
+    function Summary (props) {
+      const model = props.model
+      if (model.summary === 'stopped') {
+        const stage = model.stages.find(item => item.name === model.failedStage)
+        return h('p', { key: 'stopped-' + stage.name, className: 'serverest-flow-summary' },
+          label('ui.flow.stopped_at', 'serverest-flow-summary-label'),
+          codeOrLabel(stage.labelKey, stage.name, 'serverest-flow-summary-stage'))
+      }
+      const key = model.summary === 'outside' ? 'ui.flow.outside' : 'ui.flow.completed'
+      return h('p', { key, className: 'serverest-flow-summary' }, label(key, 'serverest-flow-summary-label'))
+    }
+
+    function FlowPanel (props) {
+      const { model, animate, showControls, slowMotion, onToggleSlowMotion, onReplay } = props
+      const executed = model.stages.filter(stage => stage.st !== 'not_run')
+      const [revealed, setRevealed] = React.useState(animate ? 0 : executed.length)
+      const [expanded, setExpanded] = React.useState(model.failedStage ? { [model.failedStage]: true } : {})
+      const done = revealed >= executed.length
+
+      React.useEffect(() => {
+        if (done) return undefined
+        if (!animate) {
+          setRevealed(executed.length)
+          return undefined
+        }
+        const timer = setTimeout(() => setRevealed(count => count + 1), stepDelay(executed[revealed]))
+        return () => clearTimeout(timer)
+      }, [revealed, animate, done])
+
+      const visible = model.stages.filter(stage => {
+        if (stage.st === 'not_run') return done
+        return executed.indexOf(stage) <= revealed
+      })
+      const active = done ? null : executed[revealed]
+      const listed = visible.filter(stage => stage !== active)
+
+      const segments = visible.map(stage => h('span', {
+        key: stage.name,
+        className: 'serverest-flow-segment ' + statusClass(stage) + (stage === active ? ' serverest-flow-active' : ''),
+        style: { flexGrow: stage.width }
+      }, codeOrLabel(stage.labelKey, stage.name, 'serverest-flow-segment-label')))
+      if (done) {
+        segments.push(h('span', { key: 'response', className: 'serverest-flow-segment serverest-flow-segment-response' },
+          label('ui.response', 'serverest-flow-segment-label'),
+          model.statusCode !== null ? h('span', { className: 'serverest-flow-segment-code' }, String(model.statusCode)) : null))
+      }
+
+      const controls = showControls
+        ? h('div', { className: 'serverest-flow-controls' },
+          h('label', { className: 'serverest-flow-slow-motion' },
+            h('input', { type: 'checkbox', checked: slowMotion, onChange: onToggleSlowMotion }),
+            label('ui.flow.slow_motion', 'serverest-flow-slow-motion-label')),
+          h('button', { type: 'button', className: 'serverest-flow-replay', onClick: onReplay }, text('ui.flow.replay')))
+        : null
+
+      return h('section', { className: 'serverest-flow' },
+        h('div', { className: 'serverest-flow-header' },
+          h('h4', { className: 'serverest-flow-title' }, text('ui.flow.title')),
+          done ? h(Summary, { key: 'summary-' + model.summary, model }) : null,
+          controls),
+        h('div', { className: 'serverest-flow-bar' }, segments),
+        done && model.summary === 'outside'
+          ? h('p', { className: 'serverest-flow-outside' },
+            label(model.whyKey, 'serverest-flow-outside-why'),
+            label(model.howKey, 'serverest-flow-outside-how'))
+          : null,
+        h('ol', { className: 'serverest-flow-stages' }, listed.map(stage => h(StageRow, {
+          key: stage.name,
+          stage,
+          model,
+          expanded: !!expanded[stage.name],
+          onToggle: () => setExpanded(current => Object.assign({}, current, { [stage.name]: !current[stage.name] }))
+        })))
+      )
+    }
+
+    function FlowRoot (props) {
+      const [run, setRun] = React.useState(0)
+      const [slowMotion, setSlowMotion] = React.useState(readSlowMotion)
+      const { header, status } = props
+      const model = buildFlowModel(parseStages(header), status)
+      if (!model) return null
+      const reduced = prefersReducedMotion()
+      return h(FlowPanel, {
+        // Remontar a cada resposta ou repetição evita que o React edite um nó já traduzido.
+        key: header + '|' + status + '|' + run,
+        model,
+        animate: slowMotion && !reduced,
+        showControls: !reduced,
+        slowMotion,
+        onToggleSlowMotion: event => {
+          const enabled = !!event.target.checked
+          saveSlowMotion(enabled)
+          setSlowMotion(enabled)
+        },
+        onReplay: () => setRun(count => count + 1)
+      })
+    }
+
+    return { FlowBoundary, FlowRoot }
+  }
+
+  function serverestFlowPanelPlugin (system) {
+    const React = system && system.React
+    if (!React || !React.Component || !React.useState) return {}
+    const { FlowBoundary, FlowRoot } = createComponents(React)
+    const h = React.createElement
+    return {
+      wrapComponents: {
+        liveResponse: Original => function ServerestLiveResponse (props) {
+          const data = readResponse(props.response)
+          const panel = data
+            ? h(FlowBoundary, { key: data.header + '|' + data.status }, h(FlowRoot, { header: data.header, status: data.status }))
+            : null
+          return h(React.Fragment, null, h(Original, props), panel)
+        }
+      }
+    }
+  }
+
+  serverestFlowPanelPlugin.parseStages = parseStages
+  serverestFlowPanelPlugin.buildFlowModel = buildFlowModel
+  window.serverestFlowPanelPlugin = serverestFlowPanelPlugin
+})()

package/src/swagger/styles/flow-panel.css

@@ -0,0 +1,231 @@
+/* Painel "Fluxo da requisição" abaixo da resposta do "Try it out" */
+.swagger-ui .serverest-flow {
+  margin: 16px 0 8px;
+  padding: 14px 16px;
+  border: 1px solid #d8dde7;
+  border-radius: 8px;
+  background: #ffffff;
+  color: #1f2937;
+  font-family: sans-serif;
+  font-size: 13px;
+}
+
+.swagger-ui .serverest-flow-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 16px;
+  margin-bottom: 12px;
+}
+
+.swagger-ui .serverest-flow-title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.swagger-ui .serverest-flow-summary {
+  display: inline-flex;
+  gap: 6px;
+  margin: 0;
+  font-weight: 600;
+}
+
+.swagger-ui .serverest-flow-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  margin-left: auto;
+}
+
+.swagger-ui .serverest-flow-slow-motion {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+}
+
+.swagger-ui .serverest-flow-replay {
+  padding: 4px 12px;
+  border: 1px solid #9ca3af;
+  border-radius: 4px;
+  background: #ffffff;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.swagger-ui .serverest-flow-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3px;
+  min-height: 26px;
+  margin-bottom: 12px;
+}
+
+.swagger-ui .serverest-flow-segment {
+  display: flex;
+  flex-basis: 0;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-width: max-content;
+  min-height: 26px;
+  padding: 0 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  white-space: nowrap;
+  overflow: hidden;
+  animation: serverestFlowIn 220ms ease-out;
+}
+
+.swagger-ui .serverest-flow-segment-response {
+  flex-grow: 0;
+  background: #1f2937;
+  color: #ffffff;
+}
+
+.swagger-ui .serverest-flow-segment.serverest-flow-active {
+  animation: serverestFlowPulse 900ms ease-in-out infinite;
+}
+
+.swagger-ui .serverest-flow-st-ok.serverest-flow-segment { background: #2f9e6b; color: #ffffff; }
+.swagger-ui .serverest-flow-st-failed.serverest-flow-segment { background: #c53030; color: #ffffff; }
+.swagger-ui .serverest-flow-st-skipped.serverest-flow-segment { background: #6b7280; color: #ffffff; }
+.swagger-ui .serverest-flow-st-not_run.serverest-flow-segment { background: #e5e7eb; color: #4b5563; }
+.swagger-ui .serverest-flow-st-unknown.serverest-flow-segment { background: #d1d5db; color: #1f2937; }
+
+.swagger-ui .serverest-flow-outside {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin: 0 0 12px;
+}
+
+.swagger-ui .serverest-flow-stages,
+.swagger-ui .serverest-flow-rules {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.swagger-ui .serverest-flow-stage {
+  border-top: 1px solid #eef1f5;
+  animation: serverestFlowIn 220ms ease-out;
+}
+
+.swagger-ui .serverest-flow-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 6px 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+
+.swagger-ui button.serverest-flow-row {
+  cursor: pointer;
+}
+
+.swagger-ui .serverest-flow-status {
+  flex-shrink: 0;
+  min-width: 11em;
+  padding: 1px 8px;
+  border-radius: 10px;
+  font-size: 11px;
+  text-align: center;
+}
+
+.swagger-ui .serverest-flow-st-ok > .serverest-flow-row .serverest-flow-status,
+.swagger-ui .serverest-flow-rule.serverest-flow-st-ok .serverest-flow-status { background: #d1fae5; color: #065f46; }
+.swagger-ui .serverest-flow-st-failed > .serverest-flow-row .serverest-flow-status,
+.swagger-ui .serverest-flow-rule.serverest-flow-st-failed .serverest-flow-status { background: #fee2e2; color: #991b1b; }
+.swagger-ui .serverest-flow-st-skipped > .serverest-flow-row .serverest-flow-status,
+.swagger-ui .serverest-flow-rule.serverest-flow-st-skipped .serverest-flow-status { background: #e5e7eb; color: #374151; }
+.swagger-ui .serverest-flow-st-not_run > .serverest-flow-row .serverest-flow-status,
+.swagger-ui .serverest-flow-rule.serverest-flow-st-not_run .serverest-flow-status { background: #f3f4f6; color: #6b7280; }
+
+.swagger-ui .serverest-flow-name {
+  font-weight: 600;
+}
+
+.swagger-ui .serverest-flow-dur {
+  margin-left: auto;
+  color: #6b7280;
+  font-variant-numeric: tabular-nums;
+}
+
+.swagger-ui .serverest-flow-stage-failed > .serverest-flow-row .serverest-flow-name {
+  color: #991b1b;
+}
+
+.swagger-ui .serverest-flow-details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 0 0 10px 22px;
+}
+
+.swagger-ui .serverest-flow-block-title {
+  display: block;
+  margin-bottom: 2px;
+  font-size: 12px;
+}
+
+.swagger-ui .serverest-flow-block-text {
+  margin: 0;
+}
+
+.swagger-ui .serverest-flow-block-why,
+.swagger-ui .serverest-flow-block-how {
+  padding: 6px 10px;
+  border-left: 3px solid #c53030;
+  background: #fef2f2;
+}
+
+.swagger-ui .serverest-flow-block-how {
+  border-left-color: #2f9e6b;
+  background: #f0fdf4;
+}
+
+.swagger-ui .serverest-flow-rule {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  padding: 4px 0 4px 22px;
+  color: #4b5563;
+}
+
+.swagger-ui .serverest-flow-item {
+  display: inline-flex;
+  gap: 4px;
+  margin-left: auto;
+}
+
+@keyframes serverestFlowIn {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@keyframes serverestFlowPulse {
+  0% { opacity: 0.45; }
+  50% { opacity: 1; }
+  100% { opacity: 0.45; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .swagger-ui .serverest-flow-segment,
+  .swagger-ui .serverest-flow-stage,
+  .swagger-ui .serverest-flow-segment.serverest-flow-active {
+    animation: none;
+  }
+
+  .swagger-ui .serverest-flow-controls {
+    display: none;
+  }
+}

package/src/swagger/translations/en.js

@@ -25,6 +25,78 @@ module.exports = {
   'ui.download': 'Download',
   'ui.available_authorizations': 'Available authorizations',
   'ui.example_lower': 'example',
+  'ui.flow.title': 'Request flow',
+  'ui.flow.stopped_at': 'Stopped at',
+  'ui.flow.completed': 'Went through all stages',
+  'ui.flow.outside': 'The response came from outside the stages',
+  'ui.flow.slow_motion': 'Slow motion',
+  'ui.flow.replay': 'Replay',
+  'ui.flow.why_title': 'Why it stopped here',
+  'ui.flow.how_title': 'How to proceed',
+  'ui.flow.stage_description_title': 'What this stage does',
+  'ui.flow.item_position': 'Index of the item in the product list, counting from zero:',
+  'ui.flow.status.ok': 'Passed',
+  'ui.flow.status.failed': 'Stopped here',
+  'ui.flow.status.skipped': 'Does not apply in this environment',
+  'ui.flow.status.not_run': 'Did not run',
+  'ui.flow.stage_label.body': 'Body parsing',
+  'ui.flow.stage_label.rate_limit': 'Request limit',
+  'ui.flow.stage_label.auth': 'Authentication',
+  'ui.flow.stage_label.schema': 'Data validation',
+  'ui.flow.stage_label.read': 'Data lookup',
+  'ui.flow.stage_label.rules': 'Business rules',
+  'ui.flow.stage_label.write': 'Saving',
+  'ui.flow.stage_description.body': 'The server reads and parses the request body.',
+  'ui.flow.stage_description.rate_limit': 'The server checks that the client has not exceeded the request limit.',
+  'ui.flow.stage_description.auth': 'The server checks the token sent in the Authorization header.',
+  'ui.flow.stage_description.schema': 'The server checks that the data sent has the expected format.',
+  'ui.flow.stage_description.read': 'The server fetches the requested data.',
+  'ui.flow.stage_description.rules': 'The server applies the business rules of the route.',
+  'ui.flow.stage_description.write': 'The server saves the changes.',
+  'ui.flow.rule_label.single_cart': 'One cart per user',
+  'ui.flow.rule_label.no_duplicate_product': 'Products without repetition',
+  'ui.flow.rule_label.product_exists': 'Existence of the products',
+  'ui.flow.rule_label.enough_stock': 'Stock of the products',
+  'ui.flow.why.stage.body': 'The request body could not be read. The most common cause is malformed JSON.',
+  'ui.flow.how.stage.body': 'Check the quotes, commas and braces of the JSON sent.',
+  'ui.flow.why.stage.rate_limit': 'Too many requests were sent in a short time.',
+  'ui.flow.how.stage.rate_limit': 'Wait a few seconds and try again. This environment does not accept load testing.',
+  'ui.flow.why.auth.token_missing': 'The request did not include the Authorization header.',
+  'ui.flow.how.auth.token_missing': 'Log in at POST /login and send the authorization value in the Authorization header.',
+  'ui.flow.why.auth.bad_format': 'The Authorization header is not in the format Bearer followed by the token.',
+  'ui.flow.how.auth.bad_format': 'Send the value exactly as POST /login returns it, starting with Bearer.',
+  'ui.flow.why.auth.token_expired': 'The token has expired.',
+  'ui.flow.how.auth.token_expired': 'Log in again at POST /login to generate a new token.',
+  'ui.flow.why.auth.token_invalid': 'The token is not valid: it was changed, is incomplete or was not generated by this server.',
+  'ui.flow.how.auth.token_invalid': 'Log in at POST /login and use the returned token, without changes.',
+  'ui.flow.why.auth.user_not_found': 'The user who owns the token no longer exists. This happens when the user is deleted or when the server data is reset.',
+  'ui.flow.how.auth.user_not_found': 'Register the user again and log in to generate a new token.',
+  'ui.flow.why.auth.not_admin': 'The token is valid, but the user is not an administrator.',
+  'ui.flow.how.auth.not_admin': 'Use the token of a user registered with administrador equal to true.',
+  'ui.flow.why.stage.auth': 'The token was not accepted.',
+  'ui.flow.how.stage.auth': 'Log in at POST /login and send the authorization value in the Authorization header.',
+  'ui.flow.why.stage.schema': 'One or more values sent do not have the expected format.',
+  'ui.flow.how.stage.schema': 'The response body points out each field with a problem.',
+  'ui.flow.why.stage.read': 'The lookup could not be completed. The most common cause is a record that does not exist.',
+  'ui.flow.how.stage.read': 'Check the identifier provided.',
+  'ui.flow.why.stage.rules': 'A business rule of the route was not met.',
+  'ui.flow.how.stage.rules': 'The message in the response body says which rule it was.',
+  'ui.flow.why.rule.single_cart': 'Each user can have one cart at a time, and this user already has one.',
+  'ui.flow.how.rule.single_cart': 'Complete or cancel the current purchase before registering another cart.',
+  'ui.flow.why.rule.no_duplicate_product': 'The same product appears more than once in the list.',
+  'ui.flow.how.rule.no_duplicate_product': 'Send each product only once and adjust the quantity.',
+  'ui.flow.why.rule.product_exists': 'One of the products provided does not exist. The check goes item by item and stops at the first problem, so the following items were not checked.',
+  'ui.flow.how.rule.product_exists': 'Check the idProduto. The GET /produtos route lists the registered products.',
+  'ui.flow.why.rule.enough_stock': 'The requested quantity is greater than the product stock. The check goes item by item and stops at the first problem, so the following items were not checked.',
+  'ui.flow.how.rule.enough_stock': 'Reduce the quantity or choose another product. The response body shows the current stock.',
+  'ui.flow.why.stage.write': 'The changes could not be saved.',
+  'ui.flow.how.stage.write': 'Try again. If the error persists, open an issue in the repository.',
+  'ui.flow.why.status.timeout': 'The server went past the time limit to respond, and this was the stage running.',
+  'ui.flow.how.status.timeout': 'Try again in a few moments.',
+  'ui.flow.why.status.unexpected_error': 'The server found an unexpected error in this stage.',
+  'ui.flow.how.status.unexpected_error': 'Try again. If the error persists, open an issue in the repository.',
+  'ui.flow.why.outside': 'The response came from outside the stages: the route does not exist or the URL is invalid.',
+  'ui.flow.how.outside': 'Check the method and path of the request.',
   'info.description': '**ServeRest is a free REST API that simulates a virtual store to serve as study material for API testing.**\n\n**Don\'t forget to follow the [project author](https://github.com/PauloGoncalvesBH) and star the repository: [github.com/ServeRest/ServeRest](https://github.com/ServeRest/ServeRest)**\n\nThis page documents all routes and how to access them. For more details about ServeRest (how to run locally using Docker or NPM, change authentication timeout, etc), see [the ServeRest repository](https://github.com/serverest/serverest).\n\nUsing Postman? Import the [Swagger JSON](https://raw.githubusercontent.com/ServeRest/ServeRest/trunk/docs/swagger.json) to access the collections.\n\nDoing load testing? Read the \'[Load Testing](https://github.com/ServeRest/ServeRest#teste-de-carga)\' section.\n\n\nThank you ♥ to everyone who supports the project [financially](https://opencollective.com/serverest#section-contributors) or [with code, ideas, and promotion](https://github.com/ServeRest/ServeRest#contribuidores-); thanks to you **more than R$ 2000,00 were donated to the NGO [Todas as letras](https://todasasletras.org/)** so far.\n\nServeRest has a front-end in beta; check it out: [front.serverest.dev](https://front.serverest.dev).\n\nNeed help? [Open an issue](https://github.com/ServeRest/ServeRest/issues) or contact the project maintainer:\n',
   'tags.login.description': 'Authenticate your user to create a cart and, if you are an admin, manage products',
   'tags.usuarios.description': 'Manage users, check login data, and create admin users',

package/src/swagger/translations/es.js

@@ -25,6 +25,78 @@ module.exports = {
   'ui.download': 'Descargar',
   'ui.available_authorizations': 'Autenticaciones disponibles',
   'ui.example_lower': 'ejemplo',
+  'ui.flow.title': 'Flujo de la solicitud',
+  'ui.flow.stopped_at': 'Se detuvo en',
+  'ui.flow.completed': 'Pasó por todas las etapas',
+  'ui.flow.outside': 'La respuesta vino de fuera de las etapas',
+  'ui.flow.slow_motion': 'Cámara lenta',
+  'ui.flow.replay': 'Repetir',
+  'ui.flow.why_title': 'Por qué se detuvo aquí',
+  'ui.flow.how_title': 'Cómo seguir',
+  'ui.flow.stage_description_title': 'Qué hace esta etapa',
+  'ui.flow.item_position': 'Índice del ítem en la lista de productos, contando desde cero:',
+  'ui.flow.status.ok': 'Pasó',
+  'ui.flow.status.failed': 'Se detuvo aquí',
+  'ui.flow.status.skipped': 'No se aplica en este entorno',
+  'ui.flow.status.not_run': 'No se ejecutó',
+  'ui.flow.stage_label.body': 'Lectura del cuerpo',
+  'ui.flow.stage_label.rate_limit': 'Límite de solicitudes',
+  'ui.flow.stage_label.auth': 'Autenticación',
+  'ui.flow.stage_label.schema': 'Validación de los datos',
+  'ui.flow.stage_label.read': 'Consulta',
+  'ui.flow.stage_label.rules': 'Reglas de negocio',
+  'ui.flow.stage_label.write': 'Guardado',
+  'ui.flow.stage_description.body': 'El servidor lee e interpreta el cuerpo de la solicitud.',
+  'ui.flow.stage_description.rate_limit': 'El servidor verifica que el cliente no haya superado el límite de solicitudes.',
+  'ui.flow.stage_description.auth': 'El servidor verifica el token enviado en el encabezado Authorization.',
+  'ui.flow.stage_description.schema': 'El servidor verifica que los datos enviados tengan el formato esperado.',
+  'ui.flow.stage_description.read': 'El servidor busca los datos solicitados.',
+  'ui.flow.stage_description.rules': 'El servidor aplica las reglas de negocio de la ruta.',
+  'ui.flow.stage_description.write': 'El servidor guarda los cambios.',
+  'ui.flow.rule_label.single_cart': 'Un carrito por usuario',
+  'ui.flow.rule_label.no_duplicate_product': 'Productos sin repetición',
+  'ui.flow.rule_label.product_exists': 'Existencia de los productos',
+  'ui.flow.rule_label.enough_stock': 'Stock de los productos',
+  'ui.flow.why.stage.body': 'No se pudo leer el cuerpo de la solicitud. La causa más común es un JSON mal formado.',
+  'ui.flow.how.stage.body': 'Revise las comillas, las comas y las llaves del JSON enviado.',
+  'ui.flow.why.stage.rate_limit': 'Se enviaron demasiadas solicitudes en poco tiempo.',
+  'ui.flow.how.stage.rate_limit': 'Espere unos segundos e intente de nuevo. Este entorno no acepta pruebas de carga.',
+  'ui.flow.why.auth.token_missing': 'La solicitud no incluyó el encabezado Authorization.',
+  'ui.flow.how.auth.token_missing': 'Inicie sesión en POST /login y envíe el valor de authorization en el encabezado Authorization.',
+  'ui.flow.why.auth.bad_format': 'El encabezado Authorization no está en el formato Bearer seguido del token.',
+  'ui.flow.how.auth.bad_format': 'Envíe el valor exactamente como lo devuelve POST /login, comenzando por Bearer.',
+  'ui.flow.why.auth.token_expired': 'El token expiró.',
+  'ui.flow.how.auth.token_expired': 'Inicie sesión de nuevo en POST /login para generar otro token.',
+  'ui.flow.why.auth.token_invalid': 'El token no es válido: fue alterado, está incompleto o no fue generado por este servidor.',
+  'ui.flow.how.auth.token_invalid': 'Inicie sesión en POST /login y use el token devuelto, sin cambios.',
+  'ui.flow.why.auth.user_not_found': 'El usuario dueño del token ya no existe. Esto ocurre cuando se elimina o cuando se reinician los datos del servidor.',
+  'ui.flow.how.auth.user_not_found': 'Registre el usuario de nuevo e inicie sesión para generar otro token.',
+  'ui.flow.why.auth.not_admin': 'El token es válido, pero el usuario no es administrador.',
+  'ui.flow.how.auth.not_admin': 'Use el token de un usuario registrado con administrador igual a true.',
+  'ui.flow.why.stage.auth': 'El token no fue aceptado.',
+  'ui.flow.how.stage.auth': 'Inicie sesión en POST /login y envíe el valor de authorization en el encabezado Authorization.',
+  'ui.flow.why.stage.schema': 'Uno o más datos enviados no tienen el formato esperado.',
+  'ui.flow.how.stage.schema': 'El cuerpo de la respuesta señala cada campo con problema.',
+  'ui.flow.why.stage.read': 'No se pudo completar la consulta. La causa más común es un registro que no existe.',
+  'ui.flow.how.stage.read': 'Revise el identificador informado.',
+  'ui.flow.why.stage.rules': 'No se cumplió una regla de negocio de la ruta.',
+  'ui.flow.how.stage.rules': 'El mensaje en el cuerpo de la respuesta indica qué regla fue.',
+  'ui.flow.why.rule.single_cart': 'Cada usuario puede tener un carrito a la vez, y este usuario ya tiene uno.',
+  'ui.flow.how.rule.single_cart': 'Concluya o cancele la compra actual antes de registrar otro carrito.',
+  'ui.flow.why.rule.no_duplicate_product': 'El mismo producto aparece más de una vez en la lista.',
+  'ui.flow.how.rule.no_duplicate_product': 'Envíe cada producto una sola vez y ajuste la cantidad.',
+  'ui.flow.why.rule.product_exists': 'Uno de los productos informados no existe. La verificación se hace ítem por ítem y se detiene en el primer problema, así que los ítems siguientes no fueron verificados.',
+  'ui.flow.how.rule.product_exists': 'Revise el idProduto. La ruta GET /produtos lista los productos registrados.',
+  'ui.flow.why.rule.enough_stock': 'La cantidad solicitada es mayor que el stock del producto. La verificación se hace ítem por ítem y se detiene en el primer problema, así que los ítems siguientes no fueron verificados.',
+  'ui.flow.how.rule.enough_stock': 'Reduzca la cantidad o elija otro producto. El cuerpo de la respuesta informa el stock actual.',
+  'ui.flow.why.stage.write': 'No se pudieron guardar los cambios.',
+  'ui.flow.how.stage.write': 'Intente de nuevo. Si el error continúa, abra una issue en el repositorio.',
+  'ui.flow.why.status.timeout': 'El servidor superó el tiempo límite para responder, y esta era la etapa en ejecución.',
+  'ui.flow.how.status.timeout': 'Intente de nuevo en unos instantes.',
+  'ui.flow.why.status.unexpected_error': 'El servidor encontró un error inesperado en esta etapa.',
+  'ui.flow.how.status.unexpected_error': 'Intente de nuevo. Si el error continúa, abra una issue en el repositorio.',
+  'ui.flow.why.outside': 'La respuesta vino de fuera de las etapas: la ruta no existe o la URL es inválida.',
+  'ui.flow.how.outside': 'Revise el método y la ruta de la solicitud.',
   'info.description': '**ServeRest es una API REST gratuita que simula una tienda virtual para servir como material de estudio para pruebas de API.**\n\n**No olvides seguir al [autor del proyecto](https://github.com/PauloGoncalvesBH) y dar una estrella al repositorio: [github.com/ServeRest/ServeRest](https://github.com/ServeRest/ServeRest)**\n\nEsta página documenta todas las rutas y cómo acceder a ellas. Para más detalles sobre ServeRest (cómo ejecutar localmente usando Docker o NPM, cambiar el tiempo de expiración de autenticación, etc.) visita [el repositorio de ServeRest](https://github.com/serverest/serverest).\n\n¿Usas Postman? Importa el [JSON de Swagger](https://raw.githubusercontent.com/ServeRest/ServeRest/trunk/docs/swagger.json) para acceder a las colecciones.\n\n¿Vas a hacer pruebas de carga? Lee la sección \'[Pruebas de carga](https://github.com/ServeRest/ServeRest#teste-de-carga)\'.\n\n\nMuchas gracias ♥ a todos los que apoyan el proyecto [financieramente](https://opencollective.com/serverest#section-contributors) o [con código, ideas y difusión](https://github.com/ServeRest/ServeRest#contribuidores-), gracias a ustedes **más de R$ 2000,00 fueron donados a la ONG [Todas as letras](https://todasasletras.org/)** hasta el momento.\n\nServeRest tiene un front-end en beta, no dejes de conocerlo: [front.serverest.dev](https://front.serverest.dev).\n\n¿Necesitas ayuda? [Abre un issue](https://github.com/ServeRest/ServeRest/issues) o contacta al mantenedor del proyecto:\n',
   'tags.login.description': 'Autentica a tu usuario para crear un carrito y, si eres administrador, gestionar los productos',
   'tags.usuarios.description': 'Gestiona usuarios, consulta datos para inicio de sesión y crea administradores',

package/src/swagger/translations/pt-BR.js

@@ -25,6 +25,78 @@ module.exports = {
   'ui.download': 'Baixar',
   'ui.available_authorizations': 'Autenticações disponíveis',
   'ui.example_lower': 'exemplo',
+  'ui.flow.title': 'Fluxo da requisição',
+  'ui.flow.stopped_at': 'Parou em',
+  'ui.flow.completed': 'Passou por todas as etapas',
+  'ui.flow.outside': 'A resposta veio de fora das etapas',
+  'ui.flow.slow_motion': 'Câmera lenta',
+  'ui.flow.replay': 'Repetir',
+  'ui.flow.why_title': 'Por que parou aqui',
+  'ui.flow.how_title': 'Como seguir',
+  'ui.flow.stage_description_title': 'O que esta etapa faz',
+  'ui.flow.item_position': 'Índice do item na lista de produtos, contando a partir de zero:',
+  'ui.flow.status.ok': 'Passou',
+  'ui.flow.status.failed': 'Parou aqui',
+  'ui.flow.status.skipped': 'Não se aplica neste ambiente',
+  'ui.flow.status.not_run': 'Não executou',
+  'ui.flow.stage_label.body': 'Leitura do corpo',
+  'ui.flow.stage_label.rate_limit': 'Limite de requisições',
+  'ui.flow.stage_label.auth': 'Autenticação',
+  'ui.flow.stage_label.schema': 'Validação dos dados',
+  'ui.flow.stage_label.read': 'Consulta',
+  'ui.flow.stage_label.rules': 'Regras de negócio',
+  'ui.flow.stage_label.write': 'Gravação',
+  'ui.flow.stage_description.body': 'O servidor lê e interpreta o corpo da requisição.',
+  'ui.flow.stage_description.rate_limit': 'O servidor confere se o cliente não passou do limite de requisições.',
+  'ui.flow.stage_description.auth': 'O servidor confere o token enviado no header Authorization.',
+  'ui.flow.stage_description.schema': 'O servidor confere se os dados enviados têm o formato esperado.',
+  'ui.flow.stage_description.read': 'O servidor busca os dados pedidos.',
+  'ui.flow.stage_description.rules': 'O servidor aplica as regras de negócio da rota.',
+  'ui.flow.stage_description.write': 'O servidor grava as alterações.',
+  'ui.flow.rule_label.single_cart': 'Um carrinho por usuário',
+  'ui.flow.rule_label.no_duplicate_product': 'Produtos sem repetição',
+  'ui.flow.rule_label.product_exists': 'Existência dos produtos',
+  'ui.flow.rule_label.enough_stock': 'Estoque dos produtos',
+  'ui.flow.why.stage.body': 'O corpo da requisição não pôde ser lido. O caso mais comum é um JSON malformado.',
+  'ui.flow.how.stage.body': 'Confira as aspas, as vírgulas e as chaves do JSON enviado.',
+  'ui.flow.why.stage.rate_limit': 'Foram enviadas requisições demais em pouco tempo.',
+  'ui.flow.how.stage.rate_limit': 'Aguarde alguns segundos e tente de novo. Este ambiente não aceita teste de carga.',
+  'ui.flow.why.auth.token_missing': 'A requisição não trouxe o header Authorization.',
+  'ui.flow.how.auth.token_missing': 'Faça login em POST /login e envie o valor de authorization no header Authorization.',
+  'ui.flow.why.auth.bad_format': 'O header Authorization não está no formato Bearer seguido do token.',
+  'ui.flow.how.auth.bad_format': 'Envie o valor exatamente como POST /login devolve, começando por Bearer.',
+  'ui.flow.why.auth.token_expired': 'O token expirou.',
+  'ui.flow.how.auth.token_expired': 'Faça login de novo em POST /login para gerar outro token.',
+  'ui.flow.why.auth.token_invalid': 'O token não é válido: foi alterado, está incompleto ou não foi gerado por este servidor.',
+  'ui.flow.how.auth.token_invalid': 'Faça login em POST /login e use o token devolvido, sem alterações.',
+  'ui.flow.why.auth.user_not_found': 'O usuário dono do token não existe mais. Isso acontece quando ele é excluído ou quando os dados do servidor são reiniciados.',
+  'ui.flow.how.auth.user_not_found': 'Cadastre o usuário de novo e faça login para gerar outro token.',
+  'ui.flow.why.auth.not_admin': 'O token é válido, mas o usuário não é administrador.',
+  'ui.flow.how.auth.not_admin': 'Use o token de um usuário cadastrado com administrador igual a true.',
+  'ui.flow.why.stage.auth': 'O token não foi aceito.',
+  'ui.flow.how.stage.auth': 'Faça login em POST /login e envie o valor de authorization no header Authorization.',
+  'ui.flow.why.stage.schema': 'Um ou mais dados enviados não têm o formato esperado.',
+  'ui.flow.how.stage.schema': 'O corpo da resposta aponta cada campo com problema.',
+  'ui.flow.why.stage.read': 'A consulta não pôde ser concluída. O caso mais comum é um registro que não existe.',
+  'ui.flow.how.stage.read': 'Confira o identificador informado.',
+  'ui.flow.why.stage.rules': 'Uma regra de negócio da rota não foi atendida.',
+  'ui.flow.how.stage.rules': 'A mensagem no corpo da resposta diz qual regra foi.',
+  'ui.flow.why.rule.single_cart': 'Cada usuário pode ter um carrinho por vez, e este usuário já tem um.',
+  'ui.flow.how.rule.single_cart': 'Conclua ou cancele a compra atual antes de cadastrar outro carrinho.',
+  'ui.flow.why.rule.no_duplicate_product': 'O mesmo produto aparece mais de uma vez na lista.',
+  'ui.flow.how.rule.no_duplicate_product': 'Envie cada produto uma única vez e ajuste a quantidade.',
+  'ui.flow.why.rule.product_exists': 'Um dos produtos informados não existe. A conferência é feita item a item e para no primeiro problema, então os itens seguintes não foram conferidos.',
+  'ui.flow.how.rule.product_exists': 'Confira o idProduto. A rota GET /produtos lista os produtos cadastrados.',
+  'ui.flow.why.rule.enough_stock': 'A quantidade pedida é maior que o estoque do produto. A conferência é feita item a item e para no primeiro problema, então os itens seguintes não foram conferidos.',
+  'ui.flow.how.rule.enough_stock': 'Reduza a quantidade ou escolha outro produto. O corpo da resposta informa o estoque atual.',
+  'ui.flow.why.stage.write': 'A gravação não pôde ser concluída.',
+  'ui.flow.how.stage.write': 'Tente de novo. Se o erro continuar, abra uma issue no repositório.',
+  'ui.flow.why.status.timeout': 'O servidor passou do tempo limite para responder, e esta era a etapa em execução.',
+  'ui.flow.how.status.timeout': 'Tente de novo em instantes.',
+  'ui.flow.why.status.unexpected_error': 'O servidor encontrou um erro inesperado nesta etapa.',
+  'ui.flow.how.status.unexpected_error': 'Tente de novo. Se o erro continuar, abra uma issue no repositório.',
+  'ui.flow.why.outside': 'A resposta veio de fora das etapas: a rota não existe ou a URL é inválida.',
+  'ui.flow.how.outside': 'Confira o método e o caminho da requisição.',
   'info.description': '**O ServeRest é uma API REST gratuita que simula uma loja virtual com intuito de servir de material de estudos de testes de API.**\n\n**Não deixe de seguir o [autor do projeto](https://github.com/PauloGoncalvesBH) e deixar um star no repositório: [github.com/ServeRest/ServeRest](https://github.com/ServeRest/ServeRest)**\n\nEssa página documenta todas as rotas e como acessá-las. Para mais detalhes do ServeRest (como executar localmente utilizando Docker ou NPM, alterar timeout de autenticação, etc) acesse [o repositório do ServeRest](https://github.com/serverest/serverest).\n\nEstá utilizando Postman? Importe o [JSON do Swagger](https://raw.githubusercontent.com/ServeRest/ServeRest/trunk/docs/swagger.json) para ter acesso às collections.\n\nVai fazer teste de carga? Leia a seção \'[Teste de Carga](https://github.com/ServeRest/ServeRest#teste-de-carga)\'.\n\n\nMuito obrigado ♥ a todos que apoiam o projeto [financeiramente](https://opencollective.com/serverest#section-contributors) ou [com código, ideias e divulgação](https://github.com/ServeRest/ServeRest#contribuidores-), graças a vocês **mais de R$ 2000,00 foram doados para a ONG [Todas as letras](https://todasasletras.org/)** até o momento.\n\nO ServeRest possui um front, com status em beta, não deixe de conhecer: [front.serverest.dev](https://front.serverest.dev).\n\nPrecisa de apoio? [Abra uma issue](https://github.com/ServeRest/ServeRest/issues) ou contate o mantenedor do projeto:\n',
   'tags.login.description': 'Autentique o seu usuário para montar um carrinho e, se for administrador, gerenciar os produtos',
   'tags.usuarios.description': 'Gerencie os usuários, consulte dados para login e cadastre administrador',