collavre 0.22.0 → 0.24.0

data/app/javascript/lib/utils/__tests__/markdown.test.js

@@ -0,0 +1,153 @@
+import { renderMarkdown, renderCommentMarkdown, highlightCodeBlocks } from "../markdown"
+
+// The renderers run with marked's `breaks: true` so a single newline becomes a
+// <br> (GitHub/Slack style), matching the canonical markdown_source which stores
+// consecutive rich-editor lines one-per-line instead of separated by a blank line.
+describe("renderMarkdown hard breaks", () => {
+  it("renders a single newline as <br> within one paragraph", () => {
+    const html = renderMarkdown("abc\ndef")
+    expect(html).toContain("<br")
+    expect((html.match(/<p>/g) || []).length).toBe(1)
+  })
+
+  it("keeps a blank line as a paragraph break", () => {
+    const html = renderMarkdown("abc\n\ndef")
+    expect((html.match(/<p>/g) || []).length).toBe(2)
+  })
+})
+
+describe("renderCommentMarkdown hard breaks", () => {
+  it("renders a single newline in a comment as <br>", () => {
+    expect(renderCommentMarkdown("line1\nline2")).toContain("<br")
+  })
+})
+
+// Markdown-mode preview and chat/comment code blocks must use the SAME Prism
+// engine + `lexical-token-*` classes as the editor and rendered creative view —
+// not highlight.js's `hljs-*` — so a fenced block looks identical everywhere it
+// is rendered. (highlight.js produces a different palette/tokenization, which is
+// why these surfaces visibly diverged from the editor.)
+describe("markdown renderers use the shared Prism token classes", () => {
+  it("renderMarkdown (preview) tokenizes a fenced ruby block with lexical-token classes", () => {
+    const html = renderMarkdown("```ruby\ndef foo\n  true\nend\n```")
+    expect(html).toContain("lexical-token-")
+    expect(html).not.toContain("hljs-")
+    const keywords = (html.match(/lexical-token-keyword/g) || [])
+    expect(keywords.length).toBeGreaterThan(0) // def / end
+  })
+
+  it("renderCommentMarkdown tokenizes a fenced javascript block with lexical-token classes", () => {
+    const html = renderCommentMarkdown("```javascript\nconst x = true\n```")
+    expect(html).toContain("lexical-token-")
+    expect(html).not.toContain("hljs-")
+  })
+
+  it("honors an explicit fence language instead of re-detecting it (matches the editor)", () => {
+    // ruby fence over JS-looking content: detection alone would pick javascript;
+    // the editor/view honor the explicit fence, so the preview must too.
+    const html = renderMarkdown("```ruby\nconst x = function() {}\n```")
+    expect(html).toContain('lang="ruby"')
+  })
+})
+
+// Creative descriptions arrive as server-rendered `<pre lang="ruby"><code>raw</code></pre>`
+// (commonmarker's inline highlighter is disabled). highlightCodeBlocks re-tokenizes
+// them client-side with the SAME Prism + `lexical-token-*` classes the editor uses,
+// so the rendered creative matches edit mode token-for-token.
+describe("highlightCodeBlocks", () => {
+  it("tokenizes a plain server code block with lexical-token classes", () => {
+    const el = document.createElement("div")
+    el.innerHTML = '<pre lang="javascript"><code>const ok = true</code></pre>'
+    highlightCodeBlocks(el)
+    const code = el.querySelector("pre code")
+    expect(code.querySelector(".lexical-token-keyword")).toBeTruthy() // const
+    expect(code.querySelector(".lexical-token-boolean")).toBeTruthy() // true
+  })
+
+  it("honors an explicit ruby fence and tokenizes with the ruby grammar", () => {
+    // The shared code_languages module registers the ruby grammar on the same
+    // Prism instance the editor uses, so an explicit ```ruby fence is honored
+    // instead of falling back to JavaScript.
+    const el = document.createElement("div")
+    el.innerHTML = '<pre lang="ruby"><code>def foo\n  nil\nend</code></pre>'
+    highlightCodeBlocks(el)
+    const code = el.querySelector("pre code")
+    // `def`/`end` are Ruby keywords; JavaScript tokenization would not mark them.
+    const keywords = Array.from(code.querySelectorAll(".lexical-token-keyword")).map((s) => s.textContent)
+    expect(keywords).toContain("def")
+    expect(keywords).toContain("end")
+  })
+
+  const RUBY_SRC =
+    '# frozen_string_literal: true\n' +
+    'module CollavreCompat\n' +
+    '  module_function\n' +
+    '  def call(receiver, method_name, *args, **kwargs)\n' +
+    '    receiver.public_send(method_name, *args, **kwargs)\n' +
+    '  end\n' +
+    'end'
+
+  it("honors an explicit javascript label instead of re-detecting it (matches the editor)", () => {
+    // The user can deliberately choose ```javascript. The view must honor it
+    // verbatim — same as the editor, which honors any import-resolved language —
+    // so edit and view never disagree. (Previously the view re-detected this to
+    // Ruby, which contradicted an explicit choice.)
+    const el = document.createElement("div")
+    el.innerHTML = '<pre lang="javascript"><code>' + RUBY_SRC + '</code></pre>'
+    highlightCodeBlocks(el)
+    const code = el.querySelector("pre code")
+    const keywords = Array.from(code.querySelectorAll(".lexical-token-keyword")).map((s) => s.textContent)
+    // Ruby's `def`/`end` are NOT JavaScript keywords — proof it tokenized as JS,
+    // i.e. the explicit label was honored rather than overridden to Ruby.
+    expect(keywords).not.toContain("def")
+    expect(keywords).not.toContain("end")
+  })
+
+  it("content-detects an UNLABELED Ruby block and tokenizes as ruby", () => {
+    // No fence language → fall back to content detection so the block is colored.
+    const el = document.createElement("div")
+    el.innerHTML = '<pre><code>' + RUBY_SRC + '</code></pre>'
+    highlightCodeBlocks(el)
+    const code = el.querySelector("pre code")
+    const keywords = Array.from(code.querySelectorAll(".lexical-token-keyword")).map((s) => s.textContent)
+    expect(keywords).toContain("def")
+    expect(keywords).toContain("end")
+    expect(code.querySelector(".lexical-token-comment")).toBeTruthy()
+  })
+
+  it("re-highlights legacy blocks from textContent, dropping baked inline styles", () => {
+    const el = document.createElement("div")
+    // Simulates an old description whose stored HTML still carries syntect's
+    // inline-styled spans and a dark <pre> background.
+    el.innerHTML = '<pre lang="javascript" style="background-color:#2b303b;"><code>' +
+      '<span style="color:#96b5b4;">const </span><span style="color:#a3be8c;">x = true</span></code></pre>'
+    highlightCodeBlocks(el)
+    const pre = el.querySelector("pre")
+    const code = el.querySelector("pre code")
+    expect(pre.getAttribute("style")).toBeNull()
+    expect(code.innerHTML).not.toContain("#2b303b")
+    expect(code.textContent).toBe("const x = true")
+    expect(code.querySelector(".lexical-token-keyword")).toBeTruthy()
+  })
+
+  it("does not reinterpret code text as live HTML (no XSS via innerHTML)", () => {
+    const el = document.createElement("div")
+    // The decoded source text contains an XSS payload; after re-highlighting it
+    // must remain inert text, never a live <img> element.
+    el.innerHTML = '<pre lang="text"><code>&lt;img src=x onerror=alert(1)&gt;</code></pre>'
+    highlightCodeBlocks(el)
+    const code = el.querySelector("pre code")
+    // The payload survives only as inert text, never as a live element.
+    expect(code.querySelector("img")).toBeNull()
+    expect(code.textContent).toBe("<img src=x onerror=alert(1)>")
+  })
+
+  it("is idempotent — already-highlighted blocks are skipped", () => {
+    const el = document.createElement("div")
+    el.innerHTML = '<pre lang="javascript"><code>const x = true</code></pre>'
+    highlightCodeBlocks(el)
+    const first = el.querySelector("pre code").innerHTML
+    highlightCodeBlocks(el)
+    expect(el.querySelector("pre code").innerHTML).toBe(first)
+  })
+})

data/app/javascript/lib/utils/__tests__/sanitize_description.test.js

@@ -0,0 +1,68 @@
+import { sanitizeDescriptionHtml } from '../sanitize_description'
+
+describe('sanitizeDescriptionHtml', () => {
+  test('keeps a YouTube embed iframe the server generated', () => {
+    const html =
+      '<p><iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" ' +
+      'title="YouTube video player" frameborder="0" ' +
+      'allow="autoplay; encrypted-media" allowfullscreen></iframe></p>'
+    const out = sanitizeDescriptionHtml(html)
+    expect(out).toContain('<iframe')
+    expect(out).toContain('youtube.com/embed/dQw4w9WgXcQ')
+    expect(out).toContain('allowfullscreen')
+  })
+
+  test('keeps a youtube-nocookie embed iframe', () => {
+    const html =
+      '<iframe src="https://www.youtube-nocookie.com/embed/abc123"></iframe>'
+    expect(sanitizeDescriptionHtml(html)).toContain('<iframe')
+  })
+
+  test('strips a non-YouTube iframe (XSS protection)', () => {
+    const html = '<p><iframe src="https://evil.example.com/x"></iframe></p>'
+    const out = sanitizeDescriptionHtml(html)
+    expect(out).not.toContain('<iframe')
+    expect(out).not.toContain('evil.example.com')
+  })
+
+  test('strips an iframe pointing at the YouTube watch page (not /embed/)', () => {
+    const html =
+      '<iframe src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"></iframe>'
+    expect(sanitizeDescriptionHtml(html)).not.toContain('<iframe')
+  })
+
+  test('strips an iframe with a javascript: src', () => {
+    const html = '<iframe src="javascript:alert(1)"></iframe>'
+    expect(sanitizeDescriptionHtml(html)).not.toContain('<iframe')
+  })
+
+  test('strips script tags', () => {
+    const out = sanitizeDescriptionHtml('<p>hi</p><script>alert(1)</script>')
+    expect(out).toContain('hi')
+    expect(out).not.toContain('<script')
+  })
+
+  test('preserves ordinary description markup', () => {
+    const html = '<p>Hello <strong>world</strong></p>'
+    expect(sanitizeDescriptionHtml(html)).toBe(html)
+  })
+
+  test('treats null/undefined as empty string', () => {
+    expect(sanitizeDescriptionHtml(null)).toBe('')
+    expect(sanitizeDescriptionHtml(undefined)).toBe('')
+  })
+})
+
+describe('global iframe hook does not leak into the markdown/comment path', () => {
+  test('renderMarkdown still strips YouTube iframes when the hook is loaded', async () => {
+    // Importing the sanitizer registers a global DOMPurify uponSanitizeElement
+    // hook. The comment/markdown sanitizer does not allow <iframe>, so even a
+    // trusted YouTube iframe must still be stripped there.
+    await import('../sanitize_description')
+    const { renderMarkdown } = await import('../markdown')
+    const out = renderMarkdown(
+      '<p><iframe src="https://www.youtube.com/embed/abc"></iframe></p>'
+    )
+    expect(out).not.toContain('<iframe')
+  })
+})

data/app/javascript/lib/utils/__tests__/table_download.test.js

@@ -0,0 +1,93 @@
+import { addTableDownloadButtons, addCreativeTableDownloadButtons } from "../table_download"
+
+// addTableDownloadButtons is the single shared utility used to attach CSV/Excel
+// download toolbars to rendered markdown tables. It must be container-agnostic so
+// chat comments (.comment-content) and creative descriptions (.creative-content)
+// get an identical toolbar — that is what "unify creative tables with chat
+// tables" relies on.
+function makeTable() {
+  const el = document.createElement("div")
+  el.innerHTML =
+    "<table><thead><tr><th>이름</th><th>점수</th></tr></thead>" +
+    "<tbody><tr><td>철수</td><td>90</td></tr></tbody></table>"
+  return el
+}
+
+describe("addTableDownloadButtons (shared comment + creative path)", () => {
+  it("wraps a table in any container and adds CSV + Excel buttons", () => {
+    const container = makeTable()
+    container.className = "creative-content"
+
+    addTableDownloadButtons(container)
+
+    const wrapper = container.querySelector(".table-download-wrapper")
+    expect(wrapper).not.toBeNull()
+    const buttons = wrapper.querySelectorAll(".table-download-btn")
+    expect(buttons.length).toBe(2)
+    const labels = Array.from(buttons).map((b) => b.textContent)
+    expect(labels.some((l) => l.includes("CSV"))).toBe(true)
+    expect(labels.some((l) => l.includes("Excel"))).toBe(true)
+    // The table itself is moved inside the wrapper (toolbar precedes it).
+    expect(wrapper.querySelector("table")).not.toBeNull()
+  })
+
+  it("is idempotent — repeated calls (Lit re-renders) do not double-wrap", () => {
+    const container = makeTable()
+    container.className = "creative-content"
+
+    addTableDownloadButtons(container)
+    addTableDownloadButtons(container)
+    addTableDownloadButtons(container)
+
+    expect(container.querySelectorAll(".table-download-wrapper").length).toBe(1)
+    expect(container.querySelectorAll(".table-download-btn").length).toBe(2)
+  })
+
+  it("does nothing when there is no table", () => {
+    const container = document.createElement("div")
+    container.className = "creative-content"
+    container.innerHTML = "<p>no table here</p>"
+
+    addTableDownloadButtons(container)
+
+    expect(container.querySelector(".table-download-wrapper")).toBeNull()
+  })
+})
+
+describe("addCreativeTableDownloadButtons (row-scoped)", () => {
+  const tableHtml =
+    "<table><thead><tr><th>이름</th></tr></thead><tbody><tr><td>철수</td></tr></tbody></table>"
+
+  // Mirrors the live DOM: the inline editor is appended into .creative-tree as a
+  // sibling of the display areas, so a whole-subtree scan (the old bug) would
+  // move its <table> into a wrapper and corrupt in-progress edits.
+  function makeRow() {
+    const row = document.createElement("div")
+    row.innerHTML =
+      '<div class="creative-tree">' +
+      `<div class="creative-row"><div class="creative-content">${tableHtml}</div></div>` +
+      `<div id="inline-edit-form"><div data-lexical-editor-root>${tableHtml}</div>` +
+      `<div id="markdown-preview">${tableHtml}</div></div>` +
+      "</div>"
+    return row
+  }
+
+  it("wraps display-area tables but never the inline editor's tables", () => {
+    const row = makeRow()
+
+    addCreativeTableDownloadButtons(row)
+
+    expect(row.querySelector(".creative-content .table-download-wrapper")).not.toBeNull()
+    expect(row.querySelector("#inline-edit-form .table-download-wrapper")).toBeNull()
+    expect(row.querySelector("#markdown-preview .table-download-wrapper")).toBeNull()
+  })
+
+  it("also wraps title-content tables", () => {
+    const row = document.createElement("div")
+    row.innerHTML = `<div class="creative-title-content">${tableHtml}</div>`
+
+    addCreativeTableDownloadButtons(row)
+
+    expect(row.querySelector(".creative-title-content .table-download-wrapper")).not.toBeNull()
+  })
+})

data/app/javascript/lib/utils/confirm_dialog.js

@@ -0,0 +1,10 @@
+/**
+ * confirm_dialog — backwards-compatible entry point.
+ *
+ * The implementation now lives in ./dialog.js alongside alertDialog and
+ * promptDialog, which share one modal core. This module is kept so existing
+ * `import { confirmDialog } from '.../confirm_dialog'` call sites (and their
+ * tests) keep working. New code should import from './dialog' to also reach
+ * alertDialog / promptDialog.
+ */
+export { confirmDialog, default } from './dialog'

data/app/javascript/lib/utils/dialog.js

@@ -0,0 +1,300 @@
+/**
+ * dialog — Promise-based, in-app replacements for the native browser dialogs
+ * window.alert(), window.confirm() and window.prompt().
+ *
+ * Why: the packaged desktop app runs inside a Tauri (WKWebView) webview, which
+ * does not reliably present native dialogs — alert() shows nothing, confirm()
+ * returns false with no UI, and prompt() returns null. Every action gated on
+ * `if (confirm(...))` then silently no-ops, and every `alert(error)` swallows
+ * the message, so a failure looks like data loss. Rendering our own DOM modal
+ * behaves identically in a browser and in the webview, removing the native
+ * dialog dependency entirely.
+ *
+ * Public API (all return Promises so callers `await` them):
+ *   await alertDialog(message)                  → undefined  (single OK button)
+ *   await confirmDialog(message, { danger })    → boolean    (OK / Cancel)
+ *   await promptDialog(message, { defaultValue })→ string|null (input + OK / Cancel)
+ *
+ * Reuses the shared .modal-dialog styles (modal_dialog.css) so any host app or
+ * engine that bundles the collavre stylesheet renders these consistently.
+ */
+
+// Localized default button labels. Dialog *messages* are localized by the
+// caller (server-side strings / data attributes); only the generic OK/Cancel
+// buttons need a locale here. Locale comes from <html lang>, falling back to
+// the webview/browser language.
+const LABELS = {
+  ko: { ok: '확인', cancel: '취소' },
+  en: { ok: 'OK', cancel: 'Cancel' },
+}
+
+function localeLabels() {
+  const lang = (
+    document.documentElement.lang ||
+    navigator.language ||
+    'en'
+  ).toLowerCase()
+  const key = Object.keys(LABELS).find((l) => lang.startsWith(l))
+  return LABELS[key] || LABELS.en
+}
+
+// Stack of open dialogs so keyboard handling only targets the topmost one.
+const stack = []
+
+/**
+ * Internal modal builder shared by alert/confirm/prompt.
+ *
+ * @param {object} config
+ * @param {string} config.message      Body text (rendered as text, never HTML).
+ * @param {string|null} config.title   Optional header title.
+ * @param {boolean} config.danger      Style the confirm button as destructive.
+ * @param {boolean} config.showCancel  Render a Cancel button (confirm/prompt).
+ * @param {string} config.confirmText  Confirm button label.
+ * @param {string} config.cancelText   Cancel button label.
+ * @param {object|null} config.input   When set, render a text input:
+ *        { defaultValue?: string, placeholder?: string }
+ * @returns {Promise<{ confirmed: boolean, value: string|null }>}
+ *        confirmed=true on OK/Enter; false on Cancel/Escape/overlay dismiss.
+ *        value=current input text (always '' when no input is rendered).
+ */
+function runDialog(config) {
+  const labels = localeLabels()
+  const {
+    message,
+    title = null,
+    danger = false,
+    showCancel = false,
+    confirmText = labels.ok,
+    cancelText = labels.cancel,
+    input = null,
+  } = config
+
+  return new Promise((resolve) => {
+    const previousFocus = document.activeElement
+
+    const overlay = document.createElement('div')
+    overlay.className = 'modal-dialog-overlay open'
+
+    // A real <dialog> (not a <div>): showModal() promotes it into the browser
+    // top layer so it renders ABOVE native <dialog> lightboxes (also top layer)
+    // and z-index:9999 fullscreen popups. A plain z-index can never beat the
+    // top layer, so an in-app confirm gated behind those surfaces would be
+    // invisible and look hung — the exact silent-no-op failure this module
+    // exists to remove.
+    const dialog = document.createElement('dialog')
+    dialog.className = 'modal-dialog modal-dialog-compact open'
+    dialog.setAttribute('role', 'alertdialog')
+    dialog.setAttribute('aria-modal', 'true')
+
+    if (title) {
+      const header = document.createElement('div')
+      header.className = 'modal-dialog-header'
+      const titleEl = document.createElement('div')
+      titleEl.className = 'modal-dialog-title'
+      titleEl.textContent = title
+      header.appendChild(titleEl)
+      dialog.appendChild(header)
+    }
+
+    const body = document.createElement('div')
+    body.className = 'modal-dialog-body'
+
+    // Message text. textContent (not innerHTML): the message may contain
+    // untrusted content, and native dialogs never rendered HTML either.
+    // white-space: pre-wrap (CSS) preserves the \n line breaks they honored.
+    if (message != null && String(message) !== '') {
+      const text = document.createElement('div')
+      text.className = 'confirm-dialog-message'
+      text.textContent = String(message)
+      body.appendChild(text)
+    }
+
+    // Optional input field (promptDialog).
+    let inputEl = null
+    if (input) {
+      inputEl = document.createElement('input')
+      inputEl.type = 'text'
+      inputEl.className = 'modal-dialog-input'
+      if (input.placeholder) inputEl.placeholder = input.placeholder
+      inputEl.value = input.defaultValue != null ? String(input.defaultValue) : ''
+      // Spacing when a message precedes the input.
+      if (body.childNodes.length > 0) inputEl.style.marginTop = 'var(--space-3)'
+      body.appendChild(inputEl)
+    }
+
+    dialog.appendChild(body)
+
+    const footer = document.createElement('div')
+    footer.className = 'modal-dialog-footer'
+
+    let cancelBtn = null
+    if (showCancel) {
+      cancelBtn = document.createElement('button')
+      cancelBtn.type = 'button'
+      cancelBtn.className = 'modal-dialog-btn modal-dialog-btn-secondary'
+      cancelBtn.textContent = cancelText
+      footer.appendChild(cancelBtn)
+    }
+
+    const confirmBtn = document.createElement('button')
+    confirmBtn.type = 'button'
+    confirmBtn.className =
+      'modal-dialog-btn ' +
+      (danger ? 'modal-dialog-btn-danger' : 'modal-dialog-btn-primary')
+    confirmBtn.textContent = confirmText
+    footer.appendChild(confirmBtn)
+
+    dialog.appendChild(footer)
+
+    const entry = { dialog }
+    let settled = false
+
+    function close(confirmed) {
+      if (settled) return
+      settled = true
+      const value = inputEl ? inputEl.value : ''
+      const i = stack.indexOf(entry)
+      if (i !== -1) stack.splice(i, 1)
+      document.removeEventListener('keydown', onKeydown, true)
+      overlay.remove() // no-op when never appended (top-layer path)
+      // Exit the top layer before detaching (close event is not observed here).
+      try {
+        if (dialog.open && typeof dialog.close === 'function') dialog.close()
+      } catch (_) {
+        /* unsupported — removal below still drops it from the top layer */
+      }
+      dialog.remove()
+      // Restore focus to whatever triggered the dialog.
+      try {
+        if (previousFocus && typeof previousFocus.focus === 'function') {
+          previousFocus.focus()
+        }
+      } catch (_) {
+        /* element gone — ignore */
+      }
+      resolve({ confirmed, value })
+    }
+
+    function onKeydown(e) {
+      // Only the topmost dialog reacts to keys.
+      if (stack[stack.length - 1] !== entry) return
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        e.stopPropagation()
+        close(false)
+      } else if (e.key === 'Enter') {
+        // In a text input, Enter submits (parity with native prompt).
+        e.preventDefault()
+        e.stopPropagation()
+        close(true)
+      }
+    }
+
+    if (cancelBtn) cancelBtn.addEventListener('click', () => close(false))
+    confirmBtn.addEventListener('click', () => close(true))
+    // Click on the ::backdrop (its event target is the <dialog> itself, since
+    // the panel content is nested) dismisses — parity with the old overlay.
+    dialog.addEventListener('click', (e) => {
+      if (e.target === dialog) close(false)
+    })
+    // Escape on a modal <dialog> fires `cancel`; route it through our teardown
+    // (focus restore + promise resolution) instead of the bare native close.
+    dialog.addEventListener('cancel', (e) => {
+      e.preventDefault()
+      close(false)
+    })
+    document.addEventListener('keydown', onKeydown, true)
+
+    document.body.appendChild(dialog)
+    stack.push(entry)
+
+    // Promote into the top layer. Fall back to a z-index overlay backdrop only
+    // where showModal is unavailable (jsdom under tests, very old webviews).
+    let topLayer = false
+    try {
+      dialog.showModal()
+      topLayer = true
+    } catch (_) {
+      /* no showModal — manual backdrop + stacking below */
+    }
+    if (!topLayer) {
+      dialog.setAttribute('open', '')
+      overlay.addEventListener('click', () => close(false))
+      document.body.insertBefore(overlay, dialog)
+    }
+
+    // Focus the input (prompt) or the confirm button (alert/confirm) so Enter
+    // accepts, matching native dialog behavior.
+    if (inputEl) {
+      inputEl.focus()
+      inputEl.select()
+    } else {
+      confirmBtn.focus()
+    }
+  })
+}
+
+/**
+ * alertDialog — in-app replacement for window.alert().
+ * Resolves (undefined) when dismissed. Usually fire-and-forget at call sites,
+ * but returns a Promise so callers may `await` it when ordering matters.
+ *
+ *   alertDialog('Failed to save')
+ *   await alertDialog('Done', { title: 'Export' })
+ */
+export function alertDialog(message, options = {}) {
+  const { title = null, confirmText, danger = false } = options
+  return runDialog({
+    message,
+    title,
+    danger,
+    showCancel: false,
+    confirmText,
+  }).then(() => undefined)
+}
+
+/**
+ * confirmDialog — in-app replacement for window.confirm().
+ * Resolves true when confirmed, false when cancelled/dismissed.
+ *
+ *   if (await confirmDialog(message, { danger: true })) doDestructiveThing()
+ */
+export function confirmDialog(message, options = {}) {
+  const { confirmText, cancelText, danger = false, title = null } = options
+  return runDialog({
+    message,
+    title,
+    danger,
+    showCancel: true,
+    confirmText,
+    cancelText,
+  }).then((r) => r.confirmed)
+}
+
+/**
+ * promptDialog — in-app replacement for window.prompt().
+ * Resolves the entered string when confirmed, or null when cancelled/dismissed
+ * (parity with native prompt, which returns null on cancel).
+ *
+ *   const name = await promptDialog('New name?', { defaultValue: current })
+ *   if (name !== null) rename(name)
+ */
+export function promptDialog(message, options = {}) {
+  const {
+    defaultValue = '',
+    placeholder = '',
+    confirmText,
+    cancelText,
+    title = null,
+  } = options
+  return runDialog({
+    message,
+    title,
+    showCancel: true,
+    confirmText,
+    cancelText,
+    input: { defaultValue, placeholder },
+  }).then((r) => (r.confirmed ? r.value : null))
+}
+
+export default confirmDialog