pinokiod 7.3.0 → 7.3.3

package/server/public/logs.js

@@ -4,6 +4,23 @@
   const LOGS_SIDEBAR_WIDTH_KEY = 'pinokio.logs.sidebar-width'
   const LOGS_SIDEBAR_MIN_WIDTH = 220
   const LOGS_SIDEBAR_MAX_WIDTH = 560
+  const DRAFT_BODY_TARGET_BYTES = 750 * 1024
+  const DRAFT_IMPORT_FIELD_LIMIT_BYTES = 1024 * 1024
+  const DRAFT_TITLE_MAX_LENGTH = 120
+  const DRAFT_TITLE_DISPLAY_LENGTH = 96
+  const DRAFT_TITLE_RECENT_WINDOW_MS = 48 * 60 * 60 * 1000
+  const DRAFT_SECTION_MODES = [
+    { value: 'full', label: 'Full section' },
+    { value: 'last-2000', label: 'Last 2000 lines', lines: 2000 },
+    { value: 'last-1000', label: 'Last 1000 lines', lines: 1000 },
+    { value: 'last-500', label: 'Last 500 lines', lines: 500 },
+    { value: 'exclude', label: 'Exclude' }
+  ]
+  const DRAFT_TITLE_FAILURE_PATTERN = /\b(?:error|exception|failed|failure|fatal|cannot|can't|can not|not found|denied|timeout|timed out|refused|unavailable|invalid|missing|abort|aborted|panic|overflow|crash|crashed)\b/i
+  const DRAFT_TITLE_STRONG_PATTERN = /\b(?:[A-Za-z_][A-Za-z0-9_.]*(?:Error|Exception)|ERROR|FATAL|ERR!|exit code\s+\d+)\b/i
+  const DRAFT_TITLE_STACK_PATTERN = /^\s*(?:File\s+"[^"]+",\s+line\s+\d+|at\s+\S+|from\s+\S+\s+import\s+|return\s+|await\s+|sys\.exit\b)/i
+  const DRAFT_TITLE_NOISE_PATTERN = /^\s*(?:<<PINOKIO_SHELL>>|={6,}|-{6,}|\[api\s+local\.set\]|The default interactive shell is now|To update your account|For more details, please visit)/i
+  const textEncoder = typeof TextEncoder === 'function' ? new TextEncoder() : null
 
   const safeJsonParse = (value) => {
     try {
@@ -13,6 +30,130 @@
     }
   }
 
+  const humanBytes = (value) => {
+    const units = ['B', 'KB', 'MB', 'GB']
+    let size = Number(value) || 0
+    let index = 0
+    while (size >= 1024 && index < units.length - 1) {
+      size /= 1024
+      index += 1
+    }
+    return `${size.toFixed(index === 0 ? 0 : 1)} ${units[index]}`
+  }
+
+  const textByteLength = (value) => {
+    const text = String(value || '')
+    if (textEncoder) {
+      return textEncoder.encode(text).length
+    }
+    return unescape(encodeURIComponent(text)).length
+  }
+
+  const withQueryParam = (href, key, value) => {
+    try {
+      const url = new URL(href, window.location.origin)
+      url.searchParams.set(key, value)
+      return `${url.pathname}${url.search}${url.hash}`
+    } catch (_) {
+      return href
+    }
+  }
+
+  class PrivacyFilterClient {
+    constructor() {
+      this.worker = null
+      this.nextId = 1
+      this.pending = new Map()
+      this.runtimePromise = null
+    }
+    getWorker() {
+      if (this.worker) {
+        return this.worker
+      }
+      try {
+        this.worker = new Worker('/privacy_filter_worker.js', { type: 'module' })
+      } catch (_) {
+        this.worker = new Worker('/privacy_filter_worker.js')
+      }
+      this.worker.addEventListener('message', (event) => this.handleMessage(event.data || {}))
+      this.worker.addEventListener('error', (event) => {
+        const error = new Error(event.message || 'Privacy filter worker failed.')
+        for (const pending of this.pending.values()) {
+          pending.reject(error)
+        }
+        this.pending.clear()
+        this.worker = null
+      })
+      return this.worker
+    }
+    handleMessage(message) {
+      if (message.type === 'download') {
+        for (const pending of this.pending.values()) {
+          pending.onProgress(message)
+        }
+        return
+      }
+      const pending = this.pending.get(message.id)
+      if (!pending) {
+        return
+      }
+      if (message.type === 'chunk') {
+        pending.onProgress(message)
+      } else if (message.type === 'fallback') {
+        pending.onProgress(message)
+      } else if (message.type === 'result') {
+        this.pending.delete(message.id)
+        pending.resolve(message)
+      } else if (message.type === 'error') {
+        this.pending.delete(message.id)
+        pending.reject(new Error(message.message || 'Privacy filter failed.'))
+      }
+    }
+    detectRuntime() {
+      if (this.runtimePromise) {
+        return this.runtimePromise
+      }
+      this.runtimePromise = (async () => {
+        try {
+          if (navigator.gpu && typeof navigator.gpu.requestAdapter === 'function') {
+            const adapter = await navigator.gpu.requestAdapter()
+            if (adapter) {
+              return {
+                device: 'webgpu',
+                dtype: adapter.features && adapter.features.has('shader-f16') ? 'q4f16' : 'q4'
+              }
+            }
+          }
+        } catch (_) {}
+        return { device: 'wasm', dtype: 'q8' }
+      })()
+      return this.runtimePromise
+    }
+    async filter(text, onProgress) {
+      const runtime = await this.detectRuntime()
+      const id = this.nextId
+      this.nextId += 1
+      const worker = this.getWorker()
+      if (typeof onProgress === 'function') {
+        onProgress({ type: 'runtime', ...runtime })
+      }
+      return new Promise((resolve, reject) => {
+        this.pending.set(id, {
+          resolve,
+          reject,
+          onProgress: typeof onProgress === 'function' ? onProgress : () => {}
+        })
+        worker.postMessage({
+          type: 'filter',
+          id,
+          text,
+          device: runtime.device,
+          dtype: runtime.dtype
+        })
+      })
+    }
+  }
+
   class LogsZipControls {
     constructor(options) {
       this.button = options.button
@@ -68,6 +209,1198 @@
     }
   }
 
+  class LogsLatestReport {
+    constructor(options) {
+      this.reportUrl = options.reportUrl || ''
+      this.rawReportUrl = this.reportUrl ? withQueryParam(this.reportUrl, 'redaction', 'none') : ''
+      this.draftUrl = options.draftUrl || ''
+      this.registryBase = options.registryBase || 'https://pinokio.co'
+      this.statusEl = options.statusEl
+      this.outputEl = options.outputEl
+      this.copyButton = options.copyButton
+      this.createDraftButton = options.createDraftButton
+      this.draftTitleInput = options.draftTitleInput
+      this.draftTitleNoteEl = options.draftTitleNoteEl
+      this.runFilterButton = options.runFilterButton
+      this.refreshButton = options.refreshButton
+      this.reportFilesEl = options.reportFilesEl
+      this.reportGeneratedEl = options.reportGeneratedEl
+      this.reportSectionsEl = options.reportSectionsEl
+      this.draftSizeBadgeEl = options.draftSizeBadgeEl
+      this.draftMeterFillEl = options.draftMeterFillEl
+      this.draftStatusEl = options.draftStatusEl
+      this.reviewListEl = options.reviewListEl
+      this.reviewFiltersEl = options.reviewFiltersEl
+      this.reviewCountEl = options.reviewCountEl
+      this.privacyFilter = options.privacyFilter || new PrivacyFilterClient()
+      this.report = null
+      this.rawMarkdown = ''
+      this.reviewMarkdown = ''
+      this.currentMarkdown = ''
+      this.sectionModes = new Map()
+      this.draftBodyBytes = 0
+      this.draftPayloadBytes = 0
+      this.draftOversized = false
+      this.importingDraft = false
+      this.draftTitleEdited = false
+      this.draftTitleSuggestion = null
+      this.redactionItems = []
+      this.renderedRedactionItems = []
+      this.filterChunks = 0
+      this.redactionHasRun = false
+      this.filtering = false
+      this.activeRedactionFilter = 'all'
+      this.selectedRedactionId = null
+      this.filterToken = 0
+      this.loading = false
+
+      if (this.copyButton) {
+        this.copyButton.addEventListener('click', () => this.copy())
+      }
+      if (this.createDraftButton) {
+        this.createDraftButton.addEventListener('click', () => this.createDraft())
+      }
+      if (this.draftTitleInput) {
+        this.draftTitleInput.addEventListener('input', () => {
+          this.draftTitleEdited = true
+          this.updateDraftTitleNote()
+          this.updateDraftSizeReview()
+        })
+      }
+      if (this.runFilterButton) {
+        this.runFilterButton.addEventListener('click', () => this.filterReport())
+      }
+      if (this.refreshButton) {
+        this.refreshButton.addEventListener('click', () => this.load(true))
+      }
+    }
+    setStatus(message, isError) {
+      if (!this.statusEl) return
+      this.statusEl.textContent = message || ''
+      this.statusEl.classList.toggle('is-error', Boolean(isError))
+    }
+    setBusy(isBusy) {
+      if (!this.refreshButton) return
+      this.refreshButton.disabled = Boolean(isBusy)
+      this.refreshButton.classList.toggle('is-busy', Boolean(isBusy))
+    }
+    formatGenerated(value) {
+      if (!value) return '--'
+      const date = new Date(value)
+      if (Number.isNaN(date.getTime())) return String(value)
+      return date.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })
+    }
+    clearReportFiles() {
+      if (!this.reportFilesEl) return
+      while (this.reportFilesEl.firstChild) {
+        this.reportFilesEl.removeChild(this.reportFilesEl.firstChild)
+      }
+    }
+    sectionKey(section, index) {
+      return String((section && (section.file || section.script || section.source)) || `section-${index}`)
+    }
+    sectionMode(section, index) {
+      const key = this.sectionKey(section, index)
+      return this.sectionModes.get(key) || 'full'
+    }
+    setSectionMode(section, index, mode) {
+      const key = this.sectionKey(section, index)
+      const valid = DRAFT_SECTION_MODES.some((item) => item.value === mode)
+      this.sectionModes.set(key, valid ? mode : 'full')
+      this.rebuildDraftPreview(true)
+      this.renderReportFiles(this.report && this.report.sections)
+    }
+    ensureSectionModes(sections) {
+      const keys = new Set()
+      ;(sections || []).forEach((section, index) => {
+        const key = this.sectionKey(section, index)
+        keys.add(key)
+        if (!this.sectionModes.has(key)) {
+          this.sectionModes.set(key, 'full')
+        }
+      })
+      for (const key of Array.from(this.sectionModes.keys())) {
+        if (!keys.has(key)) {
+          this.sectionModes.delete(key)
+        }
+      }
+    }
+    prepareSection(section, index) {
+      const mode = this.sectionMode(section, index)
+      if (mode === 'exclude') {
+        return null
+      }
+      const config = DRAFT_SECTION_MODES.find((item) => item.value === mode)
+      const text = String((section && section.text) || '')
+      const lines = text ? text.split(/\r?\n/) : []
+      if (config && config.lines && lines.length > config.lines) {
+        const omitted = lines.length - config.lines
+        return {
+          text: `[Older ${omitted.toLocaleString()} lines omitted by user. Showing the last ${config.lines.toLocaleString()} lines.]\n${lines.slice(-config.lines).join('\n')}`,
+          includedLines: config.lines,
+          omittedLines: omitted,
+          mode
+        }
+      }
+      return {
+        text,
+        includedLines: lines.length,
+        omittedLines: 0,
+        mode
+      }
+    }
+    includedSectionCount(sections) {
+      return (sections || []).reduce((total, section, index) => {
+        return total + (this.prepareSection(section, index) ? 1 : 0)
+      }, 0)
+    }
+    updateSectionCount(sections) {
+      if (!this.reportSectionsEl) return
+      const total = Array.isArray(sections) ? sections.length : 0
+      const included = this.includedSectionCount(sections || [])
+      this.reportSectionsEl.textContent = included === total ? String(total) : `${included} / ${total}`
+    }
+    defaultDraftTitle() {
+      const payload = this.report || {}
+      const appTitle = payload.title || payload.app_id || 'Pinokio app'
+      return this.truncateDraftTitle(`Issue report: ${appTitle}`, DRAFT_TITLE_MAX_LENGTH)
+    }
+    truncateDraftTitle(value, maxLength = DRAFT_TITLE_DISPLAY_LENGTH) {
+      const text = String(value || '').replace(/\s+/g, ' ').trim()
+      if (text.length <= maxLength) {
+        return text
+      }
+      return `${text.slice(0, Math.max(0, maxLength - 1)).trimEnd()}…`
+    }
+    draftTitleValue() {
+      if (this.draftTitleInput) {
+        return this.truncateDraftTitle(this.draftTitleInput.value, DRAFT_TITLE_MAX_LENGTH)
+      }
+      return (this.draftTitleSuggestion && this.draftTitleSuggestion.title) || this.defaultDraftTitle()
+    }
+    hasDraftTitle() {
+      return Boolean(this.draftTitleValue())
+    }
+    clearDraftTitle() {
+      this.draftTitleEdited = false
+      this.draftTitleSuggestion = null
+      if (this.draftTitleInput) {
+        this.draftTitleInput.value = ''
+        this.draftTitleInput.disabled = true
+      }
+      this.updateDraftTitleNote()
+    }
+    updateDraftTitleNote() {
+      if (!this.draftTitleNoteEl) return
+      let note = ''
+      if (this.draftTitleInput && !this.draftTitleInput.disabled && !this.draftTitleInput.value.trim()) {
+        note = 'Title required'
+      }
+      this.draftTitleNoteEl.textContent = note
+    }
+    updateDraftTitleSuggestion(force = false) {
+      this.draftTitleSuggestion = this.suggestDraftTitle()
+      if (this.draftTitleInput) {
+        if (force || !this.draftTitleEdited) {
+          this.draftTitleInput.value = this.draftTitleSuggestion.title
+          this.draftTitleEdited = false
+        }
+        this.draftTitleInput.disabled = !this.reviewMarkdown
+      }
+      this.updateDraftTitleNote()
+    }
+    suggestDraftTitle() {
+      const payload = this.report || {}
+      const appTitle = payload.title || payload.app_id || 'Pinokio app'
+      const sections = Array.isArray(payload.sections) ? payload.sections : []
+      const preparedSections = []
+      let newestModified = 0
+      sections.forEach((section, index) => {
+        const prepared = this.prepareSection(section, index)
+        if (!prepared) return
+        const modified = Date.parse(section.modified || '')
+        if (Number.isFinite(modified)) {
+          newestModified = Math.max(newestModified, modified)
+        }
+        preparedSections.push({ section, index, prepared, modified: Number.isFinite(modified) ? modified : 0 })
+      })
+
+      const candidates = []
+      for (const item of preparedSections) {
+        const candidate = this.bestTitleCandidateForSection(item.section, item.index, item.prepared)
+        if (!candidate) continue
+        let score = candidate.score
+        if (newestModified && item.modified && newestModified - item.modified > DRAFT_TITLE_RECENT_WINDOW_MS) {
+          score -= 35
+        }
+        candidates.push({
+          ...candidate,
+          score,
+          modified: item.modified,
+          file: item.section.file || item.section.script || 'log'
+        })
+      }
+
+      candidates.sort((a, b) => {
+        const scoreDelta = b.score - a.score
+        if (Math.abs(scoreDelta) > 10) return scoreDelta
+        if (a.modified && b.modified && Math.abs(a.modified - b.modified) > 60000) {
+          return a.modified - b.modified
+        }
+        return a.lineIndex - b.lineIndex
+      })
+
+      const best = candidates[0]
+      if (!best || best.score < 35) {
+        return { title: '', confidence: 'low', fallback: true }
+      }
+      return {
+        title: this.truncateDraftTitle(`${appTitle}: ${best.text}`, DRAFT_TITLE_MAX_LENGTH),
+        confidence: best.score >= 70 ? 'high' : 'medium',
+        source: best.file,
+        fallback: false
+      }
+    }
+    bestTitleCandidateForSection(section, index, prepared) {
+      const lines = String((prepared && prepared.text) || '').split(/\r?\n/)
+      let best = null
+      lines.forEach((line, lineIndex) => {
+        const text = this.cleanDraftTitleLine(line)
+        if (!text) return
+        const score = this.scoreDraftTitleLine(text, lineIndex, lines.length)
+        if (score < 25) return
+        if (!best || score > best.score + 6 || (Math.abs(score - best.score) <= 6 && lineIndex < best.lineIndex)) {
+          best = { text, score, lineIndex, sectionIndex: index }
+        }
+      })
+      return best
+    }
+    scoreDraftTitleLine(line, lineIndex, lineCount) {
+      let score = 0
+      if (DRAFT_TITLE_FAILURE_PATTERN.test(line)) score += 35
+      if (DRAFT_TITLE_STRONG_PATTERN.test(line)) score += 35
+      if (/:\s+\S/.test(line) && DRAFT_TITLE_FAILURE_PATTERN.test(line)) score += 8
+      if (lineIndex > Math.floor(lineCount * 0.7)) score += 6
+      if (DRAFT_TITLE_STACK_PATTERN.test(line)) score -= 28
+      if (DRAFT_TITLE_NOISE_PATTERN.test(line)) score -= 60
+      if (line.length > 180) score -= 12
+      return score
+    }
+    cleanDraftTitleLine(value) {
+      let text = String(value || '')
+        .replace(/\x1b\[[0-9;?]*[ -/]*[@-~]/g, '')
+        .replace(/\r/g, ' ')
+        .trim()
+      if (!text || DRAFT_TITLE_NOISE_PATTERN.test(text)) {
+        return ''
+      }
+      text = text
+        .replace(/^[-+*]\s+/, '')
+        .replace(/^<<PINOKIO_SHELL>>\s*/, '')
+        .replace(/\b([A-Za-z_][A-Za-z0-9_.-]*(?:TOKEN|SECRET|PASSWORD|API[_-]?KEY)[A-Za-z0-9_.-]*\s*=\s*)\S+/gi, '$1[redacted]')
+        .replace(/\b(?:sk|hf|ghp|github_pat|xox[baprs])[-_A-Za-z0-9]{12,}\b/g, '[secret]')
+        .replace(/\/(?:Users|home)\/[^/\s"'`]+\/[^\s"'`]*/g, (match) => this.shortenTitlePath(match, '/'))
+        .replace(/[A-Za-z]:\\Users\\[^\\\s"'`]+\\[^\s"'`]*/g, (match) => this.shortenTitlePath(match, '\\'))
+        .replace(/\s+/g, ' ')
+        .trim()
+      if (!text || /^[\s=#-]+$/.test(text)) {
+        return ''
+      }
+      return this.truncateDraftTitle(text, DRAFT_TITLE_DISPLAY_LENGTH)
+    }
+    shortenTitlePath(value, separator) {
+      const text = String(value || '')
+      const parts = text.split(separator).filter(Boolean)
+      if (parts.length <= 3) {
+        return text
+      }
+      return `…${separator}${parts.slice(-2).join(separator)}`
+    }
+    renderDraftMarkdown() {
+      const payload = this.report || {}
+      const sections = Array.isArray(payload.sections) ? payload.sections : []
+      const lines = [
+        '# Issue Report',
+        '',
+        `App: ${payload.title || payload.app_id || 'unknown'} (${payload.app_id || 'unknown'})`,
+        payload.repo_url ? `Repo: ${payload.repo_url}` : null,
+        `Generated: ${payload.generated_at || new Date().toISOString()}`,
+        `Pinokio: ${payload.pinokiod || 'unknown'}`,
+        `Platform: ${payload.platform || 'unknown'} ${payload.arch || ''}`.trim(),
+        `Node: ${payload.node || 'unknown'}`,
+        '',
+        '## Summary',
+        '',
+        '',
+        '## System',
+        '',
+        '```json',
+        JSON.stringify(payload.system_spec || {}, null, 2),
+        '```',
+        '',
+        '## Logs'
+      ].filter((line) => line !== null)
+
+      let included = 0
+      sections.forEach((section, index) => {
+        const prepared = this.prepareSection(section, index)
+        if (!prepared) {
+          return
+        }
+        included += 1
+        const totalLines = Number(section.line_count) || prepared.includedLines || 0
+        const availableLines = Math.min(totalLines, Number(section.tail_count) || prepared.includedLines || totalLines)
+        const lineSummary = prepared.omittedLines > 0
+          ? `${totalLines} total, last ${prepared.includedLines} selected by user`
+          : `${totalLines} total, last ${availableLines} included${section.truncated ? ' (truncated)' : ''}`
+        lines.push(
+          '',
+          `### ${section.file || section.script || 'log'}`,
+          '',
+          `Source: ${section.source || 'api'}${section.script ? ` / ${section.script}` : ''}`,
+          `Lines: ${lineSummary}`,
+          '',
+          '```text',
+          prepared.text || '',
+          '```'
+        )
+      })
+      if (!included) {
+        lines.push('', 'No app log files were selected.')
+      }
+      return lines.join('\n')
+    }
+    rebuildDraftPreview(resetRedactions) {
+      this.reviewMarkdown = this.renderDraftMarkdown()
+      if (resetRedactions) {
+        this.redactionHasRun = false
+        this.redactionItems = []
+        this.renderedRedactionItems = []
+        this.selectedRedactionId = null
+        this.activeRedactionFilter = 'all'
+        this.resetRedactionReview(this.reviewMarkdown ? 'Run the privacy filter to review detected items.' : 'No report text to review.')
+      }
+      this.currentMarkdown = this.reviewMarkdown
+      this.updateDraftTitleSuggestion(false)
+      this.renderCurrentReport()
+      this.updateSectionCount(this.report && this.report.sections)
+      this.setRunFilterEnabled(Boolean(this.reviewMarkdown) && !this.filtering)
+    }
+    renderReportFiles(sections) {
+      this.clearReportFiles()
+      if (!this.reportFilesEl) return
+      ;(sections || []).forEach((section, index) => {
+        const mode = this.sectionMode(section, index)
+        const prepared = this.prepareSection(section, index)
+        const item = document.createElement('div')
+        item.className = 'logs-section-control'
+        item.classList.toggle('is-excluded', mode === 'exclude')
+
+        const checkbox = document.createElement('input')
+        checkbox.type = 'checkbox'
+        checkbox.className = 'logs-section-checkbox'
+        checkbox.checked = mode !== 'exclude'
+        checkbox.setAttribute('aria-label', `Include ${section.file || section.script || 'log section'}`)
+        checkbox.addEventListener('change', () => {
+          this.setSectionMode(section, index, checkbox.checked ? 'full' : 'exclude')
+        })
+
+        const textWrap = document.createElement('div')
+        textWrap.className = 'logs-section-text'
+        const name = document.createElement('div')
+        name.className = 'logs-section-name'
+        name.textContent = section.file || section.script || section.source || 'log'
+        name.title = name.textContent
+        const meta = document.createElement('div')
+        meta.className = 'logs-section-meta'
+        const size = Number(section.size) ? humanBytes(section.size) : 'unknown size'
+        const totalLines = Number(section.line_count) || 0
+        const trimText = prepared && prepared.omittedLines > 0 ? ` · ${prepared.omittedLines.toLocaleString()} older lines omitted` : ''
+        meta.textContent = `${totalLines.toLocaleString()} lines · ${size}${trimText}`
+        textWrap.appendChild(name)
+        textWrap.appendChild(meta)
+
+        const select = document.createElement('select')
+        select.className = 'logs-section-mode'
+        select.setAttribute('aria-label', `Draft inclusion for ${name.textContent}`)
+        for (const optionConfig of DRAFT_SECTION_MODES) {
+          const option = document.createElement('option')
+          option.value = optionConfig.value
+          option.textContent = optionConfig.label
+          select.appendChild(option)
+        }
+        select.value = mode
+        select.addEventListener('change', () => this.setSectionMode(section, index, select.value))
+
+        item.appendChild(checkbox)
+        item.appendChild(textWrap)
+        item.appendChild(select)
+        this.reportFilesEl.appendChild(item)
+      })
+      if (!sections || !sections.length) {
+        const empty = document.createElement('div')
+        empty.className = 'logs-review-empty'
+        empty.textContent = 'No latest files found.'
+        this.reportFilesEl.appendChild(empty)
+      }
+    }
+    renderSummary(payload) {
+      const sections = Array.isArray(payload && payload.sections) ? payload.sections : []
+      this.updateSectionCount(sections)
+      if (this.reportGeneratedEl) {
+        this.reportGeneratedEl.textContent = this.formatGenerated(payload && payload.generated_at)
+      }
+      this.renderReportFiles(sections)
+      return sections
+    }
+    setCopyEnabled(enabled) {
+      if (this.copyButton) {
+        this.copyButton.disabled = !enabled
+      }
+    }
+    setRunFilterEnabled(enabled) {
+      if (this.runFilterButton) {
+        this.runFilterButton.disabled = !enabled
+        if (!this.filtering) {
+          this.runFilterButton.classList.remove('is-busy')
+          this.runFilterButton.innerHTML = '<i class="fa-solid fa-shield-halved"></i><span>Run privacy filter</span>'
+        }
+      }
+    }
+    setFiltering(isFiltering) {
+      this.filtering = Boolean(isFiltering)
+      if (this.runFilterButton) {
+        this.runFilterButton.disabled = this.filtering || !this.reviewMarkdown
+        this.runFilterButton.classList.toggle('is-busy', this.filtering)
+        if (this.filtering) {
+          this.runFilterButton.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i><span>Filtering…</span>'
+        } else {
+          this.runFilterButton.innerHTML = '<i class="fa-solid fa-shield-halved"></i><span>Run privacy filter</span>'
+        }
+      }
+      this.updateDraftSizeReview()
+    }
+    setOutputText(text) {
+      if (this.outputEl) {
+        this.outputEl.textContent = text || ''
+      }
+    }
+    normalizeRedactionItems(items, text) {
+      const normalized = (Array.isArray(items) ? items : [])
+        .map((item, index) => {
+          const sourceStart = Number(item.sourceStart != null ? item.sourceStart : item.maskedStart)
+          const sourceEnd = Number(item.sourceEnd != null ? item.sourceEnd : item.maskedEnd)
+          if (!Number.isFinite(sourceStart) || !Number.isFinite(sourceEnd) || sourceEnd <= sourceStart || sourceStart < 0 || sourceEnd > text.length) {
+            return null
+          }
+          const id = item.id != null ? String(item.id) : String(index)
+          const label = String(item.label || 'private')
+          return {
+            id,
+            label,
+            sourceStart,
+            sourceEnd,
+            replacement: item.replacement || `[${label}]`,
+            enabled: item.enabled !== false,
+            line: this.lineForOffset(text, sourceStart),
+            context: this.lineContext(text, sourceStart, sourceEnd),
+            source: this.sourceForOffset(text, sourceStart)
+          }
+        })
+        .filter(Boolean)
+        .sort((a, b) => a.sourceStart - b.sourceStart || a.sourceEnd - b.sourceEnd)
+      const nonOverlapping = []
+      let cursor = 0
+      for (const item of normalized) {
+        if (item.sourceStart < cursor) {
+          continue
+        }
+        nonOverlapping.push(item)
+        cursor = item.sourceEnd
+      }
+      return nonOverlapping
+    }
+    lineForOffset(text, offset) {
+      return String(text || '').slice(0, Math.max(0, offset)).split('\n').length
+    }
+    lineContext(text, start, end) {
+      const value = String(text || '')
+      const lineStart = value.lastIndexOf('\n', Math.max(0, start - 1)) + 1
+      const nextLine = value.indexOf('\n', Math.max(0, end))
+      const lineEnd = nextLine >= 0 ? nextLine : value.length
+      return value.slice(lineStart, lineEnd).trim()
+    }
+    sourceForOffset(text, offset) {
+      const before = String(text || '').slice(0, Math.max(0, offset))
+      let source = 'Issue report'
+      const pattern = /^###\s+(.+)$/gm
+      let match = pattern.exec(before)
+      while (match) {
+        source = match[1]
+        match = pattern.exec(before)
+      }
+      return source
+    }
+    buildCurrentReport() {
+      const text = this.reviewMarkdown || ''
+      if (!text || !this.redactionItems.length) {
+        this.currentMarkdown = text
+        this.renderedRedactionItems = []
+        return
+      }
+      let cursor = 0
+      let output = ''
+      const renderedItems = []
+      for (const item of this.redactionItems) {
+        if (item.sourceStart < cursor) {
+          continue
+        }
+        if (item.sourceStart > cursor) {
+          output += text.slice(cursor, item.sourceStart)
+        }
+        const value = item.enabled ? item.replacement : text.slice(item.sourceStart, item.sourceEnd)
+        const maskedStart = output.length
+        output += value
+        const maskedEnd = output.length
+        renderedItems.push({
+          ...item,
+          maskedStart,
+          maskedEnd,
+          line: this.lineForOffset(output, maskedStart),
+          context: this.lineContext(output, maskedStart, maskedEnd),
+          source: this.sourceForOffset(output, maskedStart)
+        })
+        cursor = item.sourceEnd
+      }
+      if (cursor < text.length) {
+        output += text.slice(cursor)
+      }
+      this.currentMarkdown = output
+      this.renderedRedactionItems = renderedItems
+    }
+    enabledRedactionCount() {
+      return this.redactionItems.reduce((total, item) => total + (item.enabled ? 1 : 0), 0)
+    }
+    updateRedactionCount() {
+      if (!this.reviewCountEl) return
+      if (!this.redactionHasRun) {
+        this.reviewCountEl.textContent = 'Not run'
+        return
+      }
+      const enabled = this.enabledRedactionCount()
+      const total = this.redactionItems.length
+      this.reviewCountEl.textContent = total ? `${enabled} masked` : '0 masked'
+    }
+    encodeUtf8Base64(value) {
+      const text = String(value || '')
+      if (!textEncoder || typeof btoa !== 'function') {
+        return btoa(unescape(encodeURIComponent(text)))
+      }
+      const bytes = textEncoder.encode(text)
+      let binary = ''
+      const chunkSize = 0x8000
+      for (let index = 0; index < bytes.length; index += chunkSize) {
+        const chunk = bytes.subarray(index, index + chunkSize)
+        binary += String.fromCharCode.apply(null, chunk)
+      }
+      return btoa(binary)
+    }
+    buildDraftMetadata() {
+      const payload = this.report || {}
+      const appTitle = payload.title || payload.app_id || 'Pinokio app'
+      const title = this.draftTitleInput
+        ? this.draftTitleValue()
+        : (this.draftTitleValue() || `Issue report: ${appTitle}`)
+      const metadata = {
+        title,
+        body: this.currentMarkdown || this.reviewMarkdown || '',
+        tags: ['bug', 'logs'],
+        source: 'pinokio-logs',
+        appLocalId: payload.app_id || ''
+      }
+      if (payload.repo_url) {
+        metadata.repoUrl = payload.repo_url
+        metadata.appRepoUrl = payload.repo_url
+        metadata.parent = { type: 'app', url: payload.repo_url }
+      }
+      return metadata
+    }
+    buildDraftImportPayload() {
+      const metadata = this.buildDraftMetadata()
+      const metadataJson = JSON.stringify(metadata)
+      const metadataB64 = this.encodeUtf8Base64(metadataJson)
+      return {
+        metadata,
+        metadataB64,
+        bodyBytes: textByteLength(metadata.body || ''),
+        payloadBytes: textByteLength(metadataB64)
+      }
+    }
+    setCreateDraftBusy(isBusy) {
+      this.importingDraft = Boolean(isBusy)
+      if (!this.createDraftButton) return
+      if (this.importingDraft) {
+        this.createDraftButton.disabled = true
+        this.createDraftButton.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i><span>Opening…</span>'
+      } else {
+        this.createDraftButton.innerHTML = '<i class="fa-solid fa-paper-plane"></i><span>Ask Community</span>'
+        this.updateDraftSizeReview()
+      }
+    }
+    updateDraftSizeReview() {
+      const hasText = Boolean(this.currentMarkdown || this.reviewMarkdown)
+      const hasTitle = this.hasDraftTitle()
+      let draft = null
+      if (hasText) {
+        draft = this.buildDraftImportPayload()
+        this.draftBodyBytes = draft.bodyBytes
+        this.draftPayloadBytes = draft.payloadBytes
+        this.draftOversized = draft.bodyBytes > DRAFT_BODY_TARGET_BYTES || draft.payloadBytes > DRAFT_IMPORT_FIELD_LIMIT_BYTES
+      } else {
+        this.draftBodyBytes = 0
+        this.draftPayloadBytes = 0
+        this.draftOversized = false
+      }
+      if (this.draftSizeBadgeEl) {
+        this.draftSizeBadgeEl.textContent = hasText ? `${humanBytes(this.draftBodyBytes)} / ${humanBytes(DRAFT_BODY_TARGET_BYTES)}` : '--'
+        this.draftSizeBadgeEl.classList.toggle('is-error', Boolean(hasText && this.draftOversized))
+      }
+      if (this.draftMeterFillEl) {
+        const pct = hasText ? Math.min(100, Math.round((this.draftBodyBytes / DRAFT_BODY_TARGET_BYTES) * 100)) : 0
+        this.draftMeterFillEl.style.width = `${pct}%`
+        this.draftMeterFillEl.classList.toggle('is-error', Boolean(hasText && this.draftOversized))
+      }
+      if (this.draftStatusEl) {
+        let message = 'Waiting for latest log snapshot.'
+        let isError = false
+        if (hasText && this.draftOversized) {
+          isError = true
+          message = this.draftPayloadBytes > DRAFT_IMPORT_FIELD_LIMIT_BYTES
+            ? `Too large for registry import after encoding. Exclude a section or keep fewer recent lines.`
+            : `Too large for one-click draft import. Exclude a section or keep fewer recent lines.`
+        } else if (hasText && !hasTitle) {
+          isError = true
+          message = 'Add a title before posting to Community.'
+        } else if (hasText) {
+          message = 'Ready. Community will use this preview exactly.'
+        }
+        this.draftStatusEl.textContent = message
+        this.draftStatusEl.classList.toggle('is-error', isError)
+      }
+      if (this.draftTitleInput) {
+        this.draftTitleInput.disabled = !hasText
+      }
+      this.updateDraftTitleNote()
+      if (this.createDraftButton && !this.importingDraft) {
+        const canCreate = hasText && hasTitle && !this.draftOversized && !this.filtering && Boolean(this.draftUrl)
+        this.createDraftButton.disabled = !canCreate
+        this.createDraftButton.title = canCreate
+          ? 'Open a draft question on Community'
+          : (!hasTitle ? 'Add a title before posting to Community' : (this.draftOversized ? 'Reduce the report size before posting to Community' : 'Community posting is not available for this view'))
+      }
+    }
+    renderCurrentReport() {
+      this.buildCurrentReport()
+      const text = this.currentMarkdown || 'No latest app logs were found.'
+      this.renderHighlightedOutput(text, this.renderedRedactionItems)
+      this.renderRedactionReview()
+      this.updateRedactionCount()
+      this.updateDraftSizeReview()
+      this.setCopyEnabled(Boolean(this.currentMarkdown))
+      this.selectRedaction(this.selectedRedactionId, false)
+    }
+    renderHighlightedOutput(text, items = []) {
+      if (!this.outputEl) {
+        return
+      }
+      this.outputEl.textContent = ''
+      if (!text) {
+        return
+      }
+      if (!items.length) {
+        this.outputEl.textContent = text
+        return
+      }
+      let cursor = 0
+      for (const item of items) {
+        if (item.maskedStart < cursor) {
+          continue
+        }
+        if (item.maskedStart > cursor) {
+          this.outputEl.appendChild(document.createTextNode(text.slice(cursor, item.maskedStart)))
+        }
+        const token = document.createElement('span')
+        token.className = item.enabled ? 'logs-mask-token' : 'logs-unmasked-token'
+        token.dataset.redactionId = item.id
+        token.textContent = text.slice(item.maskedStart, item.maskedEnd)
+        token.title = `${item.enabled ? 'Masked' : 'Visible'} ${item.label} · line ${item.line}`
+        this.outputEl.appendChild(token)
+        cursor = item.maskedEnd
+      }
+      if (cursor < text.length) {
+        this.outputEl.appendChild(document.createTextNode(text.slice(cursor)))
+      }
+    }
+    renderRedactionReview() {
+      const items = this.redactionItems || []
+      const renderedById = new Map((this.renderedRedactionItems || []).map((item) => [item.id, item]))
+      const labels = new Map()
+      for (const item of items) {
+        labels.set(item.label, (labels.get(item.label) || 0) + 1)
+      }
+      this.updateRedactionCount()
+      if (this.reviewFiltersEl) {
+        this.reviewFiltersEl.textContent = ''
+        const filters = [['all', `All ${items.length}`], ...Array.from(labels.entries()).sort(([a], [b]) => a.localeCompare(b)).map(([label, count]) => [label, `${label} ${count}`])]
+        for (const [value, label] of filters) {
+          const button = document.createElement('button')
+          button.type = 'button'
+          button.className = 'logs-redaction-filter'
+          button.classList.toggle('is-active', this.activeRedactionFilter === value)
+          button.dataset.redactionFilter = value
+          button.textContent = label
+          button.addEventListener('click', () => {
+            this.activeRedactionFilter = value
+            this.renderRedactionReview()
+          })
+          this.reviewFiltersEl.appendChild(button)
+        }
+      }
+      if (!this.reviewListEl) {
+        return
+      }
+      this.reviewListEl.textContent = ''
+      if (!items.length) {
+        const empty = document.createElement('div')
+        empty.className = 'logs-redaction-empty'
+        empty.textContent = this.redactionHasRun ? 'No redactions detected.' : 'Run the privacy filter to review detected items.'
+        this.reviewListEl.appendChild(empty)
+        return
+      }
+      const visibleItems = this.activeRedactionFilter === 'all'
+        ? items
+        : items.filter((item) => item.label === this.activeRedactionFilter)
+      if (!visibleItems.length) {
+        const empty = document.createElement('div')
+        empty.className = 'logs-redaction-empty'
+        empty.textContent = 'No redactions match this filter.'
+        this.reviewListEl.appendChild(empty)
+        return
+      }
+      for (const item of visibleItems) {
+        const rendered = renderedById.get(item.id) || item
+        const row = document.createElement('div')
+        row.className = 'logs-redaction-row'
+        row.dataset.redactionId = item.id
+        row.classList.toggle('is-selected', this.selectedRedactionId === item.id)
+        row.classList.toggle('is-disabled', !item.enabled)
+        row.tabIndex = 0
+        row.setAttribute('role', 'button')
+        row.setAttribute('aria-current', this.selectedRedactionId === item.id ? 'true' : 'false')
+        row.addEventListener('click', () => this.selectRedaction(item.id, true))
+        row.addEventListener('keydown', (event) => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault()
+            this.selectRedaction(item.id, true)
+          }
+        })
+
+        const top = document.createElement('div')
+        top.className = 'logs-redaction-row-top'
+        const meta = document.createElement('div')
+        meta.className = 'logs-redaction-row-meta'
+
+        const label = document.createElement('span')
+        label.className = 'logs-redaction-label'
+        label.textContent = item.label
+        meta.appendChild(label)
+
+        const source = document.createElement('span')
+        source.className = 'logs-redaction-source'
+        source.textContent = `${item.source} · line ${item.line}`
+        source.title = source.textContent
+        meta.appendChild(source)
+
+        const toggle = document.createElement('label')
+        toggle.className = 'logs-redaction-toggle'
+        toggle.title = item.enabled ? 'Keep this item masked' : 'Show this item in the copied report'
+        toggle.addEventListener('click', (event) => event.stopPropagation())
+        const checkbox = document.createElement('input')
+        checkbox.type = 'checkbox'
+        checkbox.checked = item.enabled
+        checkbox.setAttribute('aria-label', `${item.enabled ? 'Mask' : 'Show'} ${item.label}`)
+        checkbox.addEventListener('click', (event) => event.stopPropagation())
+        checkbox.addEventListener('change', (event) => {
+          event.stopPropagation()
+          item.enabled = checkbox.checked
+          this.selectedRedactionId = item.id
+          this.renderCurrentReport()
+        })
+        const toggleTrack = document.createElement('span')
+        toggleTrack.className = 'logs-redaction-toggle-track'
+        toggle.appendChild(checkbox)
+        toggle.appendChild(toggleTrack)
+
+        const context = document.createElement('div')
+        context.className = 'logs-redaction-context'
+        context.textContent = rendered.context || ''
+        context.title = rendered.context || ''
+
+        top.appendChild(meta)
+        top.appendChild(toggle)
+        row.appendChild(top)
+        row.appendChild(context)
+        this.reviewListEl.appendChild(row)
+      }
+    }
+    selectRedaction(id, scrollPreview) {
+      this.selectedRedactionId = id == null ? null : String(id)
+      if (this.outputEl) {
+        this.outputEl.querySelectorAll('.logs-mask-token, .logs-unmasked-token').forEach((node) => {
+          node.classList.toggle('is-selected', node.dataset.redactionId === this.selectedRedactionId)
+        })
+      }
+      if (this.reviewListEl) {
+        this.reviewListEl.querySelectorAll('.logs-redaction-row').forEach((node) => {
+          const selected = node.dataset.redactionId === this.selectedRedactionId
+          node.classList.toggle('is-selected', selected)
+          node.setAttribute('aria-current', selected ? 'true' : 'false')
+        })
+      }
+      if (!scrollPreview || !this.outputEl || !this.selectedRedactionId) {
+        return
+      }
+      const token = Array.from(this.outputEl.querySelectorAll('.logs-mask-token, .logs-unmasked-token')).find((node) => {
+        return node.dataset.redactionId === this.selectedRedactionId
+      })
+      if (!token) {
+        return
+      }
+      const reducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches
+      const outputRect = this.outputEl.getBoundingClientRect()
+      const tokenRect = token.getBoundingClientRect()
+      const nextTop = this.outputEl.scrollTop + tokenRect.top - outputRect.top - Math.round(outputRect.height * 0.35)
+      this.outputEl.scrollTo({
+        top: Math.max(0, nextTop),
+        behavior: reducedMotion ? 'auto' : 'smooth'
+      })
+    }
+    resetRedactionReview(message = 'Filtering has not run yet.') {
+      this.redactionItems = []
+      this.renderedRedactionItems = []
+      this.selectedRedactionId = null
+      this.activeRedactionFilter = 'all'
+      this.updateRedactionCount()
+      if (this.reviewFiltersEl) {
+        this.reviewFiltersEl.textContent = ''
+      }
+      if (this.reviewListEl) {
+        this.reviewListEl.textContent = ''
+        const empty = document.createElement('div')
+        empty.className = 'logs-redaction-empty'
+        empty.textContent = message
+        this.reviewListEl.appendChild(empty)
+      }
+    }
+    render(payload) {
+      const sections = this.renderSummary(payload)
+      this.rawMarkdown = payload && payload.markdown ? String(payload.markdown) : ''
+      this.ensureSectionModes(sections)
+      this.reviewMarkdown = this.renderDraftMarkdown()
+      this.currentMarkdown = this.reviewMarkdown
+      this.redactionItems = []
+      this.renderedRedactionItems = []
+      this.filterChunks = 0
+      this.redactionHasRun = false
+      this.filtering = false
+      this.selectedRedactionId = null
+      this.activeRedactionFilter = 'all'
+      this.draftTitleEdited = false
+      this.updateDraftTitleSuggestion(true)
+      this.renderCurrentReport()
+      this.resetRedactionReview(this.reviewMarkdown ? 'Run the privacy filter to review detected items.' : 'No report text to review.')
+      this.updateRedactionCount()
+      this.setRunFilterEnabled(Boolean(this.reviewMarkdown))
+      if (!this.reviewMarkdown) {
+        this.setStatus(`Latest snapshot found ${sections.length} log section${sections.length === 1 ? '' : 's'}.`)
+        return
+      }
+      this.setStatus(`Latest snapshot built from ${sections.length} log section${sections.length === 1 ? '' : 's'}. Run the privacy filter only if you want local redaction review.`)
+    }
+    renderError(message) {
+      if (this.reportSectionsEl) this.reportSectionsEl.textContent = '--'
+      if (this.reportGeneratedEl) this.reportGeneratedEl.textContent = '--'
+      this.clearReportFiles()
+      this.rawMarkdown = ''
+      this.reviewMarkdown = ''
+      this.currentMarkdown = ''
+      this.redactionHasRun = false
+      this.filtering = false
+      this.clearDraftTitle()
+      this.setOutputText(message || 'Unable to build latest log snapshot.')
+      this.resetRedactionReview('No redaction review is available.')
+      this.setCopyEnabled(false)
+      this.setRunFilterEnabled(false)
+      this.updateDraftSizeReview()
+      this.setStatus(message || 'Unable to build latest log snapshot.', true)
+    }
+    renderFilterProgress(progress) {
+      if (!progress || typeof progress !== 'object') {
+        return
+      }
+      if (progress.type === 'runtime') {
+        this.setStatus(`Loading OpenAI Privacy Filter locally (${progress.device}/${progress.dtype}). First run downloads and caches the model.`)
+      } else if (progress.type === 'fallback') {
+        this.setStatus(progress.message || `Retrying privacy filtering locally with ${progress.device}/${progress.dtype}.`)
+      } else if (progress.type === 'download') {
+        const fileLabel = progress.file ? ` ${progress.file}` : ''
+        if (progress.total) {
+          this.setStatus(`Downloading privacy filter${fileLabel}: ${humanBytes(progress.loaded)} / ${humanBytes(progress.total)}. Cached for future reports.`)
+        } else {
+          this.setStatus(`Downloading privacy filter${fileLabel}. Cached for future reports.`)
+        }
+      } else if (progress.type === 'chunk') {
+        const total = Number(progress.total) || 0
+        const done = Number(progress.done) || 0
+        this.setStatus(total > 0 ? `Filtering locally… ${Math.min(done + 1, total)} / ${total} chunks.` : 'Filtering locally…')
+      }
+    }
+    renderFilterError(error) {
+      this.redactionItems = []
+      this.renderedRedactionItems = []
+      this.redactionHasRun = false
+      this.currentMarkdown = this.reviewMarkdown
+      this.selectedRedactionId = null
+      this.setCopyEnabled(Boolean(this.currentMarkdown))
+      this.setRunFilterEnabled(Boolean(this.reviewMarkdown))
+      this.setOutputText(this.reviewMarkdown || 'Privacy filter failed. No report text is available.')
+      this.updateDraftSizeReview()
+      this.resetRedactionReview('Privacy filtering failed before any redactions could be reviewed.')
+      this.setStatus(error && error.message ? error.message : 'Privacy filter failed.', true)
+    }
+    async filterReport() {
+      const sourceMarkdown = this.reviewMarkdown || ''
+      if (!sourceMarkdown || this.filtering) {
+        return
+      }
+      const token = this.filterToken + 1
+      this.filterToken = token
+      this.setFiltering(true)
+      this.setCopyEnabled(false)
+      try {
+        const result = await this.privacyFilter.filter(sourceMarkdown, (progress) => {
+          if (token === this.filterToken) {
+            this.renderFilterProgress(progress)
+          }
+        })
+        if (token !== this.filterToken) {
+          return
+        }
+        this.redactionItems = this.normalizeRedactionItems(result && result.items, sourceMarkdown)
+        this.filterChunks = Number(result && result.chunks) || 1
+        this.redactionHasRun = true
+        this.selectedRedactionId = this.redactionItems.length ? this.redactionItems[0].id : null
+        this.renderCurrentReport()
+        this.selectRedaction(this.selectedRedactionId, false)
+        const maskedCount = this.enabledRedactionCount()
+        this.setStatus(`Privacy filter finished locally. ${maskedCount} item${maskedCount === 1 ? '' : 's'} masked across ${this.filterChunks} chunk${this.filterChunks === 1 ? '' : 's'}.`)
+      } catch (error) {
+        if (token === this.filterToken) {
+          this.renderFilterError(error)
+        }
+      } finally {
+        if (token === this.filterToken) {
+          this.setFiltering(false)
+        }
+      }
+    }
+    async load(force = false) {
+      if (!this.reportUrl) {
+        this.renderError('Latest log snapshot is available for app workspaces.')
+        return
+      }
+      if (this.report && !force) {
+        this.renderSummary(this.report)
+        this.rebuildDraftPreview(false)
+        this.setRunFilterEnabled(Boolean(this.reviewMarkdown) && !this.filtering)
+        if (!this.redactionHasRun && this.reviewMarkdown) {
+          this.setStatus('Unfiltered report is ready. Run the privacy filter only if you want local redaction review.')
+        }
+        return
+      }
+      if (this.loading) return
+      this.loading = true
+      this.setBusy(true)
+      this.setStatus('Building latest log snapshot…')
+      this.filterToken += 1
+      this.rawMarkdown = ''
+      this.reviewMarkdown = ''
+      this.currentMarkdown = ''
+      this.redactionItems = []
+      this.renderedRedactionItems = []
+      this.redactionHasRun = false
+      this.selectedRedactionId = null
+      this.activeRedactionFilter = 'all'
+      this.clearDraftTitle()
+      this.resetRedactionReview('Waiting for latest log snapshot.')
+      this.setCopyEnabled(false)
+      this.setFiltering(false)
+      this.updateDraftSizeReview()
+      try {
+        const response = await fetch(this.rawReportUrl || this.reportUrl, {
+          headers: { 'Accept': 'application/json' },
+          cache: 'no-store'
+        })
+        const payload = await response.json().catch(() => null)
+        if (!response.ok) {
+          throw new Error(payload && payload.error ? payload.error : `HTTP ${response.status}`)
+        }
+        this.report = payload
+        this.render(payload)
+      } catch (error) {
+        this.renderError(error && error.message ? error.message : String(error || 'Unknown error'))
+      } finally {
+        this.loading = false
+        this.setBusy(false)
+      }
+    }
+    registryOrigin(value) {
+      try {
+        return new URL(value || this.registryBase, window.location.origin).origin
+      } catch (_) {
+        return 'https://pinokio.co'
+      }
+    }
+    registryMessageOrigins() {
+      const origins = new Set([this.registryOrigin(this.registryBase)])
+      if (origins.has('https://pinokio.co')) {
+        origins.add('https://www.pinokio.co')
+      }
+      return origins
+    }
+    async submitDraftImport(token, registry, popup, popupOrigin) {
+      const draft = this.buildDraftImportPayload()
+      if (!draft.metadata.title) {
+        throw new Error('Add a title before posting to Community.')
+      }
+      if (!draft.metadata.body || this.draftOversized || draft.payloadBytes > DRAFT_IMPORT_FIELD_LIMIT_BYTES) {
+        throw new Error('Draft is too large for registry import.')
+      }
+      const form = new FormData()
+      form.append('token', token)
+      form.append('registry', registry || this.registryBase)
+      form.append('metadata_b64', draft.metadataB64)
+      const response = await fetch(this.draftUrl, {
+        method: 'POST',
+        body: form,
+        cache: 'no-store'
+      })
+      const payload = await response.json().catch(() => ({}))
+      if (!response.ok) {
+        throw new Error(payload && payload.error ? payload.error : `Draft import failed (${response.status})`)
+      }
+      const editUrl = payload && payload.editUrl ? String(payload.editUrl) : ''
+      if (popup && !popup.closed) {
+        popup.postMessage({
+          type: 'pinokio:draft-import-result',
+          ok: true,
+          editUrl
+        }, popupOrigin || this.registryOrigin(this.registryBase))
+      }
+      this.setStatus(editUrl ? 'Community draft created. Opening editor.' : 'Community draft created.')
+      return payload
+    }
+    async createDraft() {
+      if (this.importingDraft || this.draftOversized || !this.hasDraftTitle() || !this.currentMarkdown || !this.draftUrl) {
+        this.updateDraftSizeReview()
+        return
+      }
+      const authorizeUrl = new URL('/draft-import/authorize', this.registryBase)
+      authorizeUrl.searchParams.set('handoff', 'post_message')
+      authorizeUrl.searchParams.set('origin', window.location.origin)
+      authorizeUrl.searchParams.set('wait', '1')
+      this.setCreateDraftBusy(true)
+      this.setStatus('Opening Community authorization…')
+      const popup = window.open(authorizeUrl.toString(), 'pinokio-draft-import', 'width=720,height=760')
+      if (!popup) {
+        this.setCreateDraftBusy(false)
+        this.setStatus('Community authorization window was blocked.', true)
+        return
+      }
+      const registryOrigin = this.registryOrigin(this.registryBase)
+      const registryMessageOrigins = this.registryMessageOrigins()
+      let popupOrigin = registryOrigin
+      let settled = false
+      const finish = (message, isError) => {
+        settled = true
+        window.removeEventListener('message', onMessage)
+        window.clearInterval(closeTimer)
+        this.setCreateDraftBusy(false)
+        if (message) {
+          this.setStatus(message, isError)
+        }
+      }
+      const failPopup = (message) => {
+        if (popup && !popup.closed) {
+          popup.postMessage({
+            type: 'pinokio:draft-import-result',
+            ok: false,
+            error: message
+          }, popupOrigin)
+        }
+      }
+      const onMessage = async (event) => {
+        if (settled || event.source !== popup || !registryMessageOrigins.has(event.origin)) {
+          return
+        }
+        const data = event.data || {}
+        if (!data || data.type !== 'pinokio:draft-import-token') {
+          return
+        }
+        popupOrigin = event.origin
+        const token = typeof data.token === 'string' ? data.token : ''
+        const registry = typeof data.registry === 'string' ? data.registry : this.registryBase
+        if (!token) {
+          failPopup('Community did not return an import token.')
+          finish('Community did not return an import token.', true)
+          return
+        }
+        try {
+          await this.submitDraftImport(token, registry, popup, popupOrigin)
+          finish(null, false)
+        } catch (error) {
+          const message = error && error.message ? error.message : 'Draft import failed.'
+          failPopup(message)
+          finish(message, true)
+        }
+      }
+      const closeTimer = window.setInterval(() => {
+        if (!settled && popup.closed) {
+          finish('Community authorization was closed before import.', true)
+        }
+      }, 1000)
+      window.addEventListener('message', onMessage)
+      popup.focus()
+    }
+    async copy() {
+      if (!this.currentMarkdown) return
+      try {
+        await navigator.clipboard.writeText(this.currentMarkdown)
+        this.setStatus(this.redactionHasRun ? 'Reviewed report copied.' : 'Unfiltered report copied.')
+      } catch (_) {
+        if (this.outputEl) {
+          this.outputEl.focus()
+          const selection = window.getSelection()
+          const range = document.createRange()
+          range.selectNodeContents(this.outputEl)
+          selection.removeAllRanges()
+          selection.addRange(range)
+        }
+        this.setStatus('Select the snapshot text to copy.')
+      }
+    }
+  }
+
   class LogsViewer {
     constructor(options) {
       this.outputEl = options.outputEl
@@ -385,6 +1718,8 @@
       this.rootDisplay = config.rootDisplay || ''
       this.workspace = typeof config.workspace === 'string' ? config.workspace.trim() : ''
       this.workspaceTitle = config.workspaceTitle || ''
+      this.reportUrl = config.reportUrl || (this.workspace ? `/apps/logs/${encodeURIComponent(this.workspace)}/report` : '')
+      this.initialView = config.initialView === 'latest' && this.reportUrl ? 'latest' : 'raw'
       this.boundApplyHeight = null
       this.boundBeforeUnload = null
       this.headerObserver = null
@@ -399,6 +1734,7 @@
       this.resizeState = null
       this.sidebarPreferenceKey = this.workspace ? `${LOGS_SIDEBAR_STORAGE_KEY}:${this.workspace}` : LOGS_SIDEBAR_STORAGE_KEY
       this.sidebarWidthKey = this.workspace ? `${LOGS_SIDEBAR_WIDTH_KEY}:${this.workspace}` : LOGS_SIDEBAR_WIDTH_KEY
+      this.closeButton = document.getElementById('logs-close-view')
       const downloadHref = config.downloadUrl || (this.workspace ? `/pinokio/logs.zip?workspace=${encodeURIComponent(this.workspace)}` : '/pinokio/logs.zip')
       const zipEndpoint = this.workspace ? `/pinokio/log?workspace=${encodeURIComponent(this.workspace)}` : '/pinokio/log'
       const zipControls = new LogsZipControls({
@@ -409,6 +1745,28 @@
         defaultDownloadHref: downloadHref
       })
       this.zipControls = zipControls
+      this.latestReport = new LogsLatestReport({
+        reportUrl: this.reportUrl,
+        draftUrl: config.draftUrl || '',
+        registryBase: config.registryBase || 'https://pinokio.co',
+        statusEl: document.getElementById('logs-report-status'),
+        outputEl: document.getElementById('logs-report-output'),
+        copyButton: document.getElementById('logs-copy-report'),
+        createDraftButton: document.getElementById('logs-create-draft'),
+        draftTitleInput: document.getElementById('logs-draft-title'),
+        draftTitleNoteEl: document.getElementById('logs-draft-title-note'),
+        runFilterButton: document.getElementById('logs-run-filter'),
+        refreshButton: document.getElementById('logs-refresh-report'),
+        reportFilesEl: document.getElementById('logs-report-files'),
+        reportGeneratedEl: document.getElementById('logs-report-generated'),
+        reportSectionsEl: document.getElementById('logs-report-sections'),
+        draftSizeBadgeEl: document.getElementById('logs-draft-size-badge'),
+        draftMeterFillEl: document.getElementById('logs-draft-meter-fill'),
+        draftStatusEl: document.getElementById('logs-draft-status'),
+        reviewListEl: document.getElementById('logs-redaction-list'),
+        reviewFiltersEl: document.getElementById('logs-redaction-filters'),
+        reviewCountEl: document.getElementById('logs-redaction-count')
+      })
       this.viewer = new LogsViewer({
         outputEl: document.getElementById('logs-viewer-output'),
         statusEl: document.getElementById('logs-viewer-status'),
@@ -440,12 +1798,82 @@
           }
         })
       }
+      this.initCloseButton()
+      this.initViewSwitch()
       this.initSidebarWidth()
       this.initSidebarToggle()
       this.initSidebarResizer()
       this.setupPaneHeightManagement()
     }
 
+    initCloseButton() {
+      if (!this.closeButton) {
+        return
+      }
+      this.closeButton.addEventListener('click', (event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        try {
+          window.parent.postMessage({ type: 'pinokio:close-logs', e: 'pinokio:close-logs' }, window.location.origin)
+        } catch (_) {
+          window.parent.postMessage({ type: 'pinokio:close-logs', e: 'pinokio:close-logs' }, '*')
+        }
+      })
+    }
+
+    initViewSwitch() {
+      if (!this.rootElement) {
+        return
+      }
+      this.viewButtons = Array.from(this.rootElement.querySelectorAll('[data-logs-view]'))
+      this.viewButtons.forEach((button) => {
+        button.addEventListener('click', () => {
+          const view = button.dataset.logsView === 'latest' && this.reportUrl ? 'latest' : 'raw'
+          this.setView(view, true)
+        })
+      })
+      this.setView(this.initialView, false)
+    }
+
+    setView(view, updateUrl) {
+      const nextView = view === 'latest' && this.reportUrl ? 'latest' : 'raw'
+      if (this.rootElement) {
+        this.rootElement.dataset.view = nextView
+      }
+      if (Array.isArray(this.viewButtons)) {
+        this.viewButtons.forEach((button) => {
+          const active = button.dataset.logsView === nextView
+          button.classList.toggle('is-active', active)
+          button.setAttribute('aria-selected', active ? 'true' : 'false')
+          button.tabIndex = active ? 0 : -1
+        })
+      }
+      const latestPanel = document.getElementById('logs-latest-panel')
+      const rawPanel = document.getElementById('logs-raw-panel')
+      if (latestPanel) {
+        latestPanel.hidden = nextView !== 'latest'
+      }
+      if (rawPanel) {
+        rawPanel.hidden = nextView !== 'raw'
+      }
+      if (nextView === 'latest') {
+        if (this.viewer) {
+          this.viewer.stop()
+        }
+        if (this.latestReport) {
+          this.latestReport.load(false)
+        }
+      }
+      if (updateUrl) {
+        try {
+          const url = new URL(window.location.href)
+          url.searchParams.set('view', nextView === 'latest' ? 'latest' : 'raw')
+          window.history.replaceState(window.history.state, '', `${url.pathname}${url.search}${url.hash}`)
+        } catch (_) {}
+      }
+      this.applyPaneHeight()
+    }
+
     initSidebarWidth() {
       if (!this.rootElement) {
         return