@quazardous/qdadm 2.32.0 → 2.33.1

package/src/components/display/LogStream.vue

@@ -0,0 +1,364 @@
+<script setup lang="ts">
+/**
+ * LogStream - live tail of a backend log (#4110)
+ *
+ * Shows a task's log as the worker writes it, then the whole log once done.
+ *
+ * Usage:
+ *   <LogStream :source="{ poll: (from) => fetchLog(task.id, from) }" error-pattern="ERROR|FATAL" />
+ *   <LogStream :stream="myStream" height="60vh" />   // a useLogStream() the page already holds
+ *
+ * - follow: on by default; scrolling up pauses it, scrolling back to the end
+ *   (or End, or the "new lines" button) resumes it.
+ * - Without wrapping, only the rows on screen are rendered (fixed line
+ *   height), so a log of tens of thousands of lines scrolls freely. With
+ *   wrapping, rows have no fixed height: every row is in the DOM and the
+ *   browser skips painting the ones off screen (content-visibility).
+ */
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import InputText from 'primevue/inputtext'
+import QdButton from '../base/QdButton.vue'
+import { useI18n } from '../../i18n/useI18n'
+import { ansiStyleToCss } from '../../utils/ansi'
+import { useLogStream, type LogLine, type LogSource, type UseLogStreamReturn } from '../../composables/useLogStream'
+
+interface Props {
+  /** Where the lines come from; ignored when `stream` is given. */
+  source?: LogSource | null
+  /** A stream the page already holds (shared with another view). */
+  stream?: UseLogStreamReturn | null
+  /** Lines matching it are marked, counted, and reachable from the toolbar. */
+  errorPattern?: RegExp | string | null
+  /** A timestamp at the start of a line, shown dimmed. */
+  timestampPattern?: RegExp | string | null
+  height?: string
+  /** Row height in px, without wrapping. Matches the stylesheet's line-height. */
+  lineHeight?: number
+  wrap?: boolean
+  follow?: boolean
+  lineNumbers?: boolean
+  filename?: string
+  /** Download with the ANSI escapes kept. */
+  downloadRaw?: boolean
+  maxLines?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  source: null,
+  stream: null,
+  errorPattern: null,
+  timestampPattern: null,
+  height: '24rem',
+  lineHeight: 20,
+  wrap: false,
+  follow: true,
+  lineNumbers: true,
+  filename: 'log.txt',
+  downloadRaw: false,
+  maxLines: 100_000,
+})
+
+const { t } = useI18n()
+
+const log: UseLogStreamReturn =
+  props.stream ??
+  useLogStream(props.source ?? { lines: [] }, { errorPattern: props.errorPattern, maxLines: props.maxLines })
+
+const viewport = ref<HTMLElement | null>(null)
+const scrollTop = ref(0)
+const viewportHeight = ref(0)
+const wrapping = ref(props.wrap)
+const following = ref(props.follow)
+const unseen = ref(0)
+const query = ref('')
+const onlyMatches = ref(false)
+const currentMatch = ref(-1)
+const currentError = ref(-1)
+const OVERSCAN = 20
+
+// A stream passed in may have been built without the pattern: flag here too.
+const errorRe = computed(() => {
+  const p = props.errorPattern
+  if (!p) return null
+  return typeof p === 'string' ? new RegExp(p, 'i') : new RegExp(p.source, p.flags.replace(/[gy]/g, ''))
+})
+const timestampRe = computed(() => {
+  const p = props.timestampPattern
+  if (!p) return null
+  const source = typeof p === 'string' ? p : p.source
+  return new RegExp(source.startsWith('^') ? source : `^(?:${source})`, typeof p === 'string' ? '' : p.flags.replace(/[gy]/g, ''))
+})
+const isError = (line: LogLine) => line.error || (errorRe.value ? errorRe.value.test(line.text) : false)
+
+const needle = computed(() => query.value.trim().toLowerCase())
+const isMatch = (line: LogLine) => needle.value !== '' && line.text.toLowerCase().includes(needle.value)
+
+/** The lines on show: all of them, or the matching ones. */
+const view = computed<LogLine[]>(() =>
+  onlyMatches.value && needle.value ? log.lines.value.filter(isMatch) : log.lines.value
+)
+const matchIndexes = computed(() => {
+  if (!needle.value) return []
+  const out: number[] = []
+  view.value.forEach((line, i) => isMatch(line) && out.push(i))
+  return out
+})
+const errorIndexes = computed(() => {
+  const out: number[] = []
+  view.value.forEach((line, i) => isError(line) && out.push(i))
+  return out
+})
+
+const visibleRows = computed(() => Math.ceil((viewportHeight.value || 400) / props.lineHeight))
+// Clamped: when the view shrinks (only matches), scrollTop can still point
+// past its end until the browser catches up.
+const windowStart = computed(() => {
+  if (wrapping.value) return 0
+  const fromScroll = Math.floor(scrollTop.value / props.lineHeight) - OVERSCAN
+  return Math.max(0, Math.min(fromScroll, view.value.length - visibleRows.value - OVERSCAN))
+})
+const windowRows = computed(() => {
+  if (wrapping.value) return view.value
+  const visible = visibleRows.value
+  return view.value.slice(windowStart.value, windowStart.value + visible + OVERSCAN * 2)
+})
+const totalHeight = computed(() => view.value.length * props.lineHeight)
+
+interface Piece {
+  text: string
+  style: Record<string, string>
+  cls: string
+}
+
+/** A row's styled segments, cut again where the timestamp and the matches start and end. */
+function pieces(line: LogLine): Piece[] {
+  const ranges: Array<[number, number, string]> = []
+  const ts = timestampRe.value?.exec(line.text)
+  if (ts && ts[0].length > 0) ranges.push([0, ts[0].length, 'qd-log-ts'])
+  if (needle.value) {
+    const lower = line.text.toLowerCase()
+    for (let at = lower.indexOf(needle.value); at !== -1; at = lower.indexOf(needle.value, at + needle.value.length)) {
+      ranges.push([at, at + needle.value.length, 'qd-log-mark'])
+    }
+  }
+  const out: Piece[] = []
+  let offset = 0
+  for (const seg of line.segments) {
+    const style = ansiStyleToCss(seg.style)
+    const end = offset + seg.text.length
+    const cuts = new Set([offset, end])
+    for (const [a, b] of ranges) {
+      if (a > offset && a < end) cuts.add(a)
+      if (b > offset && b < end) cuts.add(b)
+    }
+    const sorted = [...cuts].sort((x, y) => x - y)
+    for (let i = 0; i < sorted.length - 1; i++) {
+      const a = sorted[i]!
+      const b = sorted[i + 1]!
+      const cls = ranges.filter(([ra, rb]) => ra <= a && rb >= b).map((r) => r[2]).join(' ')
+      out.push({ text: seg.text.slice(a - offset, b - offset), style, cls })
+    }
+    offset = end
+  }
+  return out
+}
+
+// --- Scrolling and follow ---
+
+// No "programmatic scroll" flag: setting scrollTop to where it already is
+// fires no scroll event, so such a flag would stay up and swallow the user's
+// next scroll. Each scroll just asks whether the end is in view.
+// Where the last scroll to the end left the viewport. Below it, the user has
+// scrolled up; at it, nothing moved — including a log mounted hidden (a
+// dialog not laid out yet), whose first scroll to the end did nothing.
+let lastAutoTop = 0
+
+function scrollToEnd(): void {
+  const el = viewport.value
+  if (!el) return
+  el.scrollTop = el.scrollHeight
+  scrollTop.value = el.scrollTop
+  lastAutoTop = el.scrollTop
+}
+
+function onScroll(): void {
+  const el = viewport.value
+  if (!el) return
+  scrollTop.value = el.scrollTop
+  const atEnd = el.scrollTop + el.clientHeight >= el.scrollHeight - props.lineHeight
+  following.value = atEnd
+  if (atEnd) unseen.value = 0
+}
+
+function resume(): void {
+  following.value = true
+  unseen.value = 0
+  void nextTick(scrollToEnd)
+}
+
+function onKeydown(event: KeyboardEvent): void {
+  if (event.key === 'End') {
+    event.preventDefault()
+    resume()
+  }
+}
+
+watch(
+  () => log.lines.value,
+  (next, prev) => {
+    const added = Math.max(0, (next.at(-1)?.n ?? 0) - (prev?.at(-1)?.n ?? 0))
+    // Asked of the DOM, still at its old height: the scroll event of a user
+    // who just scrolled up may not have arrived yet, and following on would
+    // yank them back down.
+    const el = viewport.value
+    if (following.value && el && el.scrollTop < lastAutoTop - props.lineHeight) {
+      following.value = false
+    }
+    if (following.value) void nextTick(scrollToEnd)
+    else unseen.value += added
+  }
+)
+
+/** Bring a row of the view to the middle of the viewport, and stop following. */
+function reveal(index: number): void {
+  const el = viewport.value
+  if (!el) return
+  following.value = false
+  if (wrapping.value) {
+    void nextTick(() => {
+      el.querySelector<HTMLElement>(`[data-index="${index}"]`)?.scrollIntoView({ block: 'center' })
+    })
+    return
+  }
+  el.scrollTop = Math.max(0, index * props.lineHeight - el.clientHeight / 2)
+  scrollTop.value = el.scrollTop
+}
+
+function step(list: number[], current: { value: number }, delta: 1 | -1): void {
+  if (list.length === 0) return
+  current.value = (current.value + delta + list.length) % list.length
+  reveal(list[current.value]!)
+}
+
+const nextMatch = () => step(matchIndexes.value, currentMatch, 1)
+const previousMatch = () => step(matchIndexes.value, currentMatch, -1)
+const nextError = () => step(errorIndexes.value, currentError, 1)
+
+watch([needle, onlyMatches], () => {
+  currentMatch.value = -1
+})
+
+function toggleWrap(): void {
+  wrapping.value = !wrapping.value
+  if (following.value) void nextTick(scrollToEnd)
+}
+
+function toggleFollow(): void {
+  if (following.value) following.value = false
+  else resume()
+}
+
+// --- Download ---
+
+function download(): void {
+  const body = log.lines.value.map((l) => (props.downloadRaw ? l.raw : l.text)).join('\n')
+  const url = URL.createObjectURL(new Blob([body + '\n'], { type: 'text/plain;charset=utf-8' }))
+  const a = document.createElement('a')
+  a.href = url
+  a.download = props.filename
+  a.click()
+  setTimeout(() => URL.revokeObjectURL(url), 0)
+}
+
+// --- Status ---
+
+const statusLabel = computed(() => {
+  switch (log.status.value) {
+    case 'streaming':
+      return t('core.log.streaming')
+    case 'done':
+      return t('core.log.done')
+    case 'error':
+      return t('core.log.failed', { error: log.error.value ?? '' })
+    default:
+      return t('core.log.stopped')
+  }
+})
+
+let resizeObserver: ResizeObserver | null = null
+
+onMounted(() => {
+  const el = viewport.value
+  if (!el) return
+  viewportHeight.value = el.clientHeight
+  if (typeof ResizeObserver !== 'undefined') {
+    resizeObserver = new ResizeObserver(() => {
+      viewportHeight.value = el.clientHeight
+    })
+    resizeObserver.observe(el)
+  }
+  if (following.value) scrollToEnd()
+})
+
+onBeforeUnmount(() => resizeObserver?.disconnect())
+
+defineExpose({ log, resume, reveal })
+</script>
+
+<template>
+  <div class="qd-log-stream" :class="{ 'qd-log-stream--wrap': wrapping }">
+    <div class="qd-log-toolbar">
+      <span class="qd-log-status" :class="`qd-log-status--${log.status.value}`">
+        <span class="qd-log-status-dot" />
+        {{ statusLabel }}
+      </span>
+      <span class="qd-log-count">{{ t('core.log.lines', { count: log.lines.value.length }) }}</span>
+      <span class="qd-log-spacer-x" />
+      <span class="qd-log-search">
+        <InputText v-model="query" size="small" :placeholder="t('core.log.search')" :aria-label="t('core.log.search')"
+          @keydown.enter.prevent="$event.shiftKey ? previousMatch() : nextMatch()" />
+        <span v-if="needle" class="qd-log-search-count">
+          {{ currentMatch >= 0 ? currentMatch + 1 : 0 }}/{{ matchIndexes.length }}
+        </span>
+        <QdButton icon="pi pi-chevron-up" text rounded size="small" :disabled="!matchIndexes.length"
+          :aria-label="t('core.log.previous')" v-tooltip.top="t('core.log.previous')" @click="previousMatch" />
+        <QdButton icon="pi pi-chevron-down" text rounded size="small" :disabled="!matchIndexes.length"
+          :aria-label="t('core.log.next')" v-tooltip.top="t('core.log.next')" @click="nextMatch" />
+        <QdButton icon="pi pi-filter" rounded size="small" :text="!onlyMatches" :disabled="!needle"
+          :aria-label="t('core.log.onlyMatches')" :aria-pressed="onlyMatches" v-tooltip.top="t('core.log.onlyMatches')"
+          @click="onlyMatches = !onlyMatches" />
+      </span>
+      <QdButton v-if="errorPattern" class="qd-log-errors" icon="pi pi-exclamation-triangle" size="small" text
+        :severity="errorIndexes.length ? 'danger' : 'secondary'" :disabled="!errorIndexes.length"
+        :label="t('core.log.errors', { count: errorIndexes.length })" v-tooltip.top="t('core.log.firstError')"
+        @click="nextError" />
+      <QdButton icon="pi pi-align-left" rounded size="small" :text="!wrapping" :aria-label="t('core.log.wrap')"
+        :aria-pressed="wrapping" v-tooltip.top="t('core.log.wrap')" @click="toggleWrap" />
+      <QdButton icon="pi pi-angle-double-down" rounded size="small" :text="!following" :aria-label="t('core.log.follow')"
+        :aria-pressed="following" v-tooltip.top="t('core.log.follow')" @click="toggleFollow" />
+      <QdButton icon="pi pi-download" text rounded size="small" :disabled="!log.lines.value.length"
+        :aria-label="t('core.log.download')" v-tooltip.top="t('core.log.download')" @click="download" />
+    </div>
+
+    <div ref="viewport" class="qd-log-viewport" :style="{ height, '--qd-log-line-height': `${lineHeight}px` }" tabindex="0"
+      @scroll="onScroll" @keydown="onKeydown">
+      <div v-if="!view.length" class="qd-log-empty">{{ t('core.log.empty') }}</div>
+      <div v-else :style="wrapping ? undefined : { height: `${totalHeight}px`, position: 'relative' }">
+        <div :style="wrapping ? undefined : { transform: `translateY(${windowStart * lineHeight}px)` }">
+          <div v-for="(line, i) in windowRows" :key="line.n" class="qd-log-line" :data-index="windowStart + i"
+            :class="{
+              'qd-log-line--error': isError(line),
+              'qd-log-line--current': matchIndexes[currentMatch] === windowStart + i || errorIndexes[currentError] === windowStart + i,
+            }">
+            <span v-if="lineNumbers" class="qd-log-n">{{ line.n }}</span>
+            <span class="qd-log-text"><span v-for="(p, j) in pieces(line)" :key="j" :class="p.cls" :style="p.style">{{ p.text }}</span></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <button v-if="!following && unseen > 0" type="button" class="qd-log-resume" @click="resume">
+      <i class="pi pi-arrow-down" /> {{ t('core.log.newLines', { count: unseen }) }}
+    </button>
+  </div>
+</template>

package/src/components/display/PayloadDiff.vue

@@ -0,0 +1,236 @@
+<script setup lang="ts">
+/**
+ * PayloadDiff - compare two payloads, "expected" against "captured" (#4112)
+ *
+ * Usage:
+ *   <PayloadDiff :left="expected" :right="capture.body" content-type="application/xml" />
+ *   <PayloadDiff :left="feedA" :right="feedB" format="csv" csv-key="sku" />
+ *
+ * Both sides are normalised first (JSON with sorted keys, XML indented, form
+ * fields sorted), then compared line by line: formatting noise disappears,
+ * so what is left reads as a difference of content. A CSV with `csv-key` is
+ * compared row by row on that column, cell by cell by header name.
+ */
+import { computed, ref } from 'vue'
+import QdButton from '../base/QdButton.vue'
+import { useI18n } from '../../i18n/useI18n'
+import {
+  bodyText,
+  detectFormat,
+  diffCsv,
+  diffLines,
+  maskCsv,
+  normalizeLines,
+  parseCsv,
+  type DiffOp,
+  type PayloadBody,
+  type PayloadFormat,
+  type PayloadMask,
+} from '../../utils/payload'
+
+interface Props {
+  left?: PayloadBody
+  right?: PayloadBody
+  labels?: [string, string] | null
+  mode?: 'split' | 'inline'
+  format?: PayloadFormat | null
+  contentType?: string | null
+  /** CSV only: compare rows matched on this column. */
+  csvKey?: string | null
+  mask?: PayloadMask | null
+  /** Unchanged lines kept around each change; longer runs fold. */
+  context?: number
+  maxHeight?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  left: null,
+  right: null,
+  labels: null,
+  mode: 'split',
+  format: null,
+  contentType: null,
+  csvKey: null,
+  mask: null,
+  context: 3,
+  maxHeight: '32rem',
+})
+
+const { t } = useI18n()
+const labels = computed(() => props.labels ?? [t('core.payload.expected'), t('core.payload.captured')])
+const currentMode = ref(props.mode)
+
+const format = computed<PayloadFormat>(() => props.format ?? detectFormat(props.left ?? props.right, props.contentType))
+
+// --- Keyed CSV ---
+
+const csvDiff = computed(() => {
+  if (format.value !== 'csv' || !props.csvKey) return null
+  const l = maskCsv(parseCsv(bodyText(props.left)).rows, props.mask, true)
+  const r = maskCsv(parseCsv(bodyText(props.right)).rows, props.mask, true)
+  return diffCsv(l, r, props.csvKey)
+})
+const csvCounts = computed(() => {
+  const out = { added: 0, removed: 0, changed: 0, same: 0 }
+  for (const row of csvDiff.value?.rows ?? []) out[row.status]++
+  return out
+})
+const showSame = ref(false)
+
+// --- Lines ---
+
+const ops = computed<DiffOp[]>(() =>
+  csvDiff.value ? [] : diffLines(normalizeLines(props.left, format.value, props.mask), normalizeLines(props.right, format.value, props.mask))
+)
+const counts = computed(() => ({
+  added: ops.value.filter((o) => o.type === 'insert').length,
+  removed: ops.value.filter((o) => o.type === 'delete').length,
+}))
+const identical = computed(() => (csvDiff.value ? csvCounts.value.added + csvCounts.value.removed + csvCounts.value.changed === 0 : counts.value.added + counts.value.removed === 0))
+
+interface Hunk {
+  type: 'ops' | 'fold'
+  key: string
+  ops: DiffOp[]
+}
+
+const unfolded = ref(new Set<string>())
+
+/** Long runs of unchanged lines fold, keeping `context` lines around each change. */
+const hunks = computed<Hunk[]>(() => {
+  const list = ops.value
+  const keep = new Array<boolean>(list.length).fill(false)
+  list.forEach((op, i) => {
+    if (op.type === 'equal') return
+    for (let j = Math.max(0, i - props.context); j <= Math.min(list.length - 1, i + props.context); j++) keep[j] = true
+  })
+  const out: Hunk[] = []
+  let i = 0
+  while (i < list.length) {
+    const start = i
+    const kept = keep[i] || list.length <= props.context * 2 + 1
+    while (i < list.length && (keep[i] || list.length <= props.context * 2 + 1) === kept) i++
+    const slice = list.slice(start, i)
+    const key = `${start}`
+    if (kept || slice.length < 4 || unfolded.value.has(key)) out.push({ type: 'ops', key, ops: slice })
+    else out.push({ type: 'fold', key, ops: slice })
+  }
+  return out
+})
+
+function unfold(key: string): void {
+  unfolded.value = new Set([...unfolded.value, key])
+}
+
+interface SplitRow {
+  left?: DiffOp
+  right?: DiffOp
+}
+
+/** Side by side: a run of deletions faces the run of insertions that follows it. */
+function splitRows(list: DiffOp[]): SplitRow[] {
+  const rows: SplitRow[] = []
+  let i = 0
+  while (i < list.length) {
+    const op = list[i]!
+    if (op.type === 'equal') {
+      rows.push({ left: op, right: op })
+      i++
+      continue
+    }
+    const dels: DiffOp[] = []
+    const ins: DiffOp[] = []
+    while (i < list.length && list[i]!.type === 'delete') dels.push(list[i++]!)
+    while (i < list.length && list[i]!.type === 'insert') ins.push(list[i++]!)
+    for (let k = 0; k < Math.max(dels.length, ins.length); k++) rows.push({ left: dels[k], right: ins[k] })
+  }
+  return rows
+}
+</script>
+
+<template>
+  <div class="qd-payload qd-payload-diff">
+    <div class="qd-payload-toolbar">
+      <span class="qd-payload-format">{{ format.toUpperCase() }}</span>
+      <template v-if="csvDiff">
+        <span class="pl-count pl-count--add">+{{ csvCounts.added }}</span>
+        <span class="pl-count pl-count--del">−{{ csvCounts.removed }}</span>
+        <span class="pl-count pl-count--chg">~{{ csvCounts.changed }}</span>
+        <label class="qd-payload-check"><input v-model="showSame" type="checkbox" /> {{ t('core.payload.showSame', { count: csvCounts.same }) }}</label>
+      </template>
+      <template v-else>
+        <span class="pl-count pl-count--add">+{{ counts.added }}</span>
+        <span class="pl-count pl-count--del">−{{ counts.removed }}</span>
+      </template>
+      <span class="qd-payload-spacer" />
+      <QdButton v-if="!csvDiff" size="small" text :icon="currentMode === 'split' ? 'pi pi-bars' : 'pi pi-pause'"
+        :label="currentMode === 'split' ? t('core.payload.inline') : t('core.payload.split')"
+        @click="currentMode = currentMode === 'split' ? 'inline' : 'split'" />
+    </div>
+
+    <div v-if="identical" class="qd-payload-identical"><i class="pi pi-check" /> {{ t('core.payload.identical') }}</div>
+
+    <div class="qd-payload-body" :style="{ maxHeight }">
+      <table v-if="csvDiff" class="qd-payload-table pl-csv-diff">
+        <thead>
+          <tr>
+            <th class="pl-n" />
+            <th v-for="h in csvDiff.header" :key="h">{{ h }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <template v-for="row in csvDiff.rows" :key="row.key">
+            <tr v-if="row.status !== 'same' || showSame" :class="`pl-row--${row.status}`">
+              <td class="pl-n">{{ row.status === 'added' ? '+' : row.status === 'removed' ? '−' : row.status === 'changed' ? '~' : '' }}</td>
+              <td v-for="(h, c) in csvDiff.header" :key="h" :class="{ 'pl-cell--changed': row.changed.includes(c) }">
+                <template v-if="row.changed.includes(c)">
+                  <del>{{ row.left?.[c] }}</del> <ins>{{ row.right?.[c] }}</ins>
+                </template>
+                <template v-else>{{ (row.right ?? row.left)?.[c] }}</template>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+
+      <table v-else-if="currentMode === 'split'" class="pl-diff pl-diff--split">
+        <thead>
+          <tr>
+            <th colspan="2">{{ labels[0] }}</th>
+            <th colspan="2">{{ labels[1] }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <template v-for="hunk in hunks" :key="hunk.key">
+            <tr v-if="hunk.type === 'fold'" class="pl-fold">
+              <td colspan="4"><button type="button" @click="unfold(hunk.key)">{{ t('core.payload.unchanged', { count: hunk.ops.length }) }}</button></td>
+            </tr>
+            <tr v-for="(row, i) in (hunk.type === 'ops' ? splitRows(hunk.ops) : [])" v-else :key="`${hunk.key}:${i}`">
+              <td class="pl-n">{{ row.left?.left !== undefined ? row.left.left + 1 : '' }}</td>
+              <td :class="row.left ? (row.left.type === 'delete' ? 'pl-del' : '') : 'pl-empty'">{{ row.left?.text }}</td>
+              <td class="pl-n">{{ row.right?.right !== undefined ? row.right.right + 1 : '' }}</td>
+              <td :class="row.right ? (row.right.type === 'insert' ? 'pl-ins' : '') : 'pl-empty'">{{ row.right?.text }}</td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+
+      <table v-else class="pl-diff pl-diff--inline">
+        <tbody>
+          <template v-for="hunk in hunks" :key="hunk.key">
+            <tr v-if="hunk.type === 'fold'" class="pl-fold">
+              <td colspan="4"><button type="button" @click="unfold(hunk.key)">{{ t('core.payload.unchanged', { count: hunk.ops.length }) }}</button></td>
+            </tr>
+            <tr v-for="(op, i) in (hunk.type === 'ops' ? hunk.ops : [])" v-else :key="`${hunk.key}:${i}`"
+              :class="op.type === 'delete' ? 'pl-del' : op.type === 'insert' ? 'pl-ins' : ''">
+              <td class="pl-n">{{ op.left !== undefined ? op.left + 1 : '' }}</td>
+              <td class="pl-n">{{ op.right !== undefined ? op.right + 1 : '' }}</td>
+              <td class="pl-sign">{{ op.type === 'delete' ? '−' : op.type === 'insert' ? '+' : '' }}</td>
+              <td>{{ op.text }}</td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>