@quazardous/qdadm 2.32.0 → 2.33.1

package/src/tasks/taskStore.ts

@@ -0,0 +1,460 @@
+/**
+ * Task store - long backend tasks, queued and followed to the end (#4114)
+ *
+ * An action whose handler queues a task on a worker (create a box, refresh a
+ * database, run a scenario) must neither block the screen nor be
+ * fire-and-forget. `run()` starts it, then follows the task record until it
+ * ends: through live entities when the task entity is live, by polling
+ * otherwise, both when both are there (the poll is then the slow fallback).
+ *
+ * One store per page load, at module level: the tray in the layout, the
+ * dialog, and every action that starts a task share it, whatever component
+ * they live in. Runs of a registered kind survive a reload (sessionStorage).
+ */
+
+import { reactive, computed, type ComputedRef } from 'vue'
+import type { LogSource } from '../composables/useLogStream'
+
+export type TaskStatus = 'starting' | 'queued' | 'running' | 'succeeded' | 'failed' | 'cancelled'
+
+type Reader<T> = string | ((record: Record<string, unknown>) => T)
+
+/** How to read the task record. */
+export interface TaskFollow {
+  /** The task entity: read through its manager, and followed live if it is live. */
+  entity?: string
+  /** Or read it yourself. */
+  get?: (taskId: string | number) => Promise<unknown>
+  /** Field or reader of the status. Default `status`. */
+  status?: Reader<unknown>
+  /** Backend values to statuses, on top of the usual names (done, error, in_progress…). */
+  statusMap?: Record<string, Exclude<TaskStatus, 'starting'>>
+  /** Percent, 0–100. Default field `progress`. */
+  progress?: Reader<unknown>
+  /** The current step, shown under the bar. Default field `step`. */
+  step?: Reader<unknown>
+  /** What a finished task produced. Default field `result`. */
+  result?: Reader<unknown>
+  /** Why it failed. Default field `error`. */
+  error?: Reader<unknown>
+  /** Poll interval, ms. Default 2000, or 10 000 as a fallback when the entity is live. */
+  intervalMs?: number
+}
+
+/** What a kind of task shares, whatever starts it: registered once, it lets runs resume after a reload. */
+export interface TaskKind {
+  label?: string
+  task: TaskFollow
+  /** Cancel the task on the backend. Without it, no cancel button. */
+  cancel?: (taskId: string | number) => Promise<unknown>
+  /** The task's log, shown live in the dialog (LogStream). */
+  log?: (taskId: string | number) => LogSource
+  /** Where the task's own page is (a vue-router location). */
+  to?: (taskId: string | number) => unknown
+  /** Toast when it ends. Default true. */
+  notify?: boolean
+}
+
+export interface TaskConfirm {
+  message?: string
+  /** The user must type this (a box name, an environment) before the task starts. */
+  typed?: string
+  /** Label of the confirm button. */
+  accept?: string
+}
+
+export interface RunOptions extends Partial<TaskKind> {
+  label: string
+  /** Queue the task; returns its id, or `{ task_id | taskId | id }`. */
+  start: () => Promise<unknown>
+  /** A registered kind; its settings are the defaults of this run, and the run resumes after a reload. */
+  kind?: string
+  confirm?: TaskConfirm
+  /** Open the follow dialog at once. Default true. */
+  open?: boolean
+}
+
+export interface TaskRun {
+  id: string
+  kind: string | null
+  label: string
+  taskId: string | number | null
+  status: TaskStatus
+  progress: number | null
+  step: string | null
+  result: unknown
+  error: string | null
+  startedAt: number
+  endedAt: number | null
+  cancelling: boolean
+}
+
+interface TaskHostDeps {
+  orchestrator?: {
+    get: (name: string) => unknown
+    toast?: Record<'success' | 'error' | 'warn' | 'info', (summary: string, detail?: string, options?: unknown) => void>
+  } | null
+  signals?: { on: (name: string, handler: (event: { data: unknown }) => void) => () => void } | null
+}
+
+interface PendingConfirm {
+  label: string
+  confirm: TaskConfirm
+  resolve: (ok: boolean) => void
+}
+
+const FINAL: TaskStatus[] = ['succeeded', 'failed', 'cancelled']
+const STORAGE_KEY = 'qdadm:tasks'
+const KEEP_FINISHED = 20
+
+const USUAL: Record<string, Exclude<TaskStatus, 'starting'>> = {
+  queued: 'queued', pending: 'queued', waiting: 'queued', scheduled: 'queued', new: 'queued',
+  running: 'running', started: 'running', in_progress: 'running', processing: 'running', active: 'running',
+  succeeded: 'succeeded', success: 'succeeded', done: 'succeeded', completed: 'succeeded', finished: 'succeeded', ok: 'succeeded',
+  failed: 'failed', failure: 'failed', error: 'failed', errored: 'failed',
+  cancelled: 'cancelled', canceled: 'cancelled', aborted: 'cancelled', killed: 'cancelled',
+}
+
+let seq = 0
+
+function read<T>(record: Record<string, unknown>, reader: Reader<T> | undefined, fallback: string): unknown {
+  if (typeof reader === 'function') return reader(record)
+  return record[reader ?? fallback]
+}
+
+function taskIdOf(started: unknown): string | number | null {
+  if (typeof started === 'string' || typeof started === 'number') return started
+  if (started && typeof started === 'object') {
+    const o = started as Record<string, unknown>
+    const id = o.task_id ?? o.taskId ?? o.id
+    if (typeof id === 'string' || typeof id === 'number') return id
+  }
+  return null
+}
+
+function errorText(err: unknown): string {
+  if (err instanceof Error) return err.message
+  if (typeof err === 'string') return err
+  if (err && typeof err === 'object' && 'message' in err) return String((err as { message: unknown }).message)
+  return err === null || err === undefined ? '' : JSON.stringify(err)
+}
+
+function createTaskStore() {
+  const state = reactive({
+    runs: [] as TaskRun[],
+    openId: null as string | null,
+    pendingConfirm: null as PendingConfirm | null,
+    hosts: 0,
+  })
+  const kinds = new Map<string, TaskKind>()
+  const defs = new Map<string, TaskKind>()
+  const stops = new Map<string, () => void>()
+  const pokes = new Map<string, () => void>()
+  let deps: TaskHostDeps = {}
+  let restored = false
+
+  // --- Persistence: runs of a registered kind come back after a reload ---
+
+  function persist(): void {
+    try {
+      const saved = state.runs
+        .filter((r) => r.kind && kinds.has(r.kind) && r.taskId !== null && !FINAL.includes(r.status))
+        .map((r) => ({ id: r.id, kind: r.kind, label: r.label, taskId: r.taskId, startedAt: r.startedAt }))
+      if (saved.length) sessionStorage.setItem(STORAGE_KEY, JSON.stringify(saved))
+      else sessionStorage.removeItem(STORAGE_KEY)
+    } catch {
+      // no storage (private mode, tests): runs just do not survive a reload
+    }
+  }
+
+  function restore(): void {
+    if (restored) return
+    restored = true
+    let saved: Array<Pick<TaskRun, 'id' | 'kind' | 'label' | 'taskId' | 'startedAt'>> = []
+    try {
+      saved = JSON.parse(sessionStorage.getItem(STORAGE_KEY) ?? '[]')
+    } catch {
+      return
+    }
+    for (const s of saved) {
+      const kind = s.kind ? kinds.get(s.kind) : undefined
+      if (!kind || s.taskId === null || state.runs.some((r) => r.id === s.id)) continue
+      const run = addRun({ id: s.id, kind: s.kind, label: s.label, taskId: s.taskId, status: 'running', startedAt: s.startedAt })
+      defs.set(run.id, kind)
+      follow(run.id)
+    }
+  }
+
+  // --- Runs ---
+
+  function addRun(partial: Partial<TaskRun> & Pick<TaskRun, 'label'>): TaskRun {
+    const run: TaskRun = {
+      id: partial.id ?? `task-${Date.now().toString(36)}-${++seq}`,
+      kind: partial.kind ?? null,
+      label: partial.label,
+      taskId: partial.taskId ?? null,
+      status: partial.status ?? 'starting',
+      progress: null,
+      step: null,
+      result: null,
+      error: null,
+      startedAt: partial.startedAt ?? Date.now(),
+      endedAt: null,
+      cancelling: false,
+    }
+    state.runs.unshift(run)
+    // Keep every active run, and the most recent finished ones.
+    const finished = state.runs.filter((r) => FINAL.includes(r.status))
+    for (const old of finished.slice(KEEP_FINISHED)) dismiss(old.id)
+    return state.runs.find((r) => r.id === run.id)!
+  }
+
+  const find = (id: string) => state.runs.find((r) => r.id === id)
+
+  function finish(id: string, status: TaskStatus, error: string | null = null): void {
+    const run = find(id)
+    if (!run || FINAL.includes(run.status)) return
+    run.status = status
+    run.endedAt = Date.now()
+    run.cancelling = false
+    if (error) run.error = error
+    stops.get(id)?.()
+    stops.delete(id)
+    pokes.delete(id)
+    persist()
+    notifyEnd(run)
+  }
+
+  function notifyEnd(run: TaskRun): void {
+    const def = defs.get(run.id)
+    if (def?.notify === false) return
+    const toast = deps.orchestrator?.toast
+    if (!toast) return
+    const to = def?.to && run.taskId !== null ? def.to(run.taskId) : undefined
+    const opts = { emitter: 'TaskRunner', ...(to ? { to } : {}) }
+    if (run.status === 'succeeded') toast.success(run.label, run.step ?? undefined, opts)
+    else if (run.status === 'failed') toast.error(run.label, run.error ?? undefined, { ...opts, keep: 'long' })
+    else if (run.status === 'cancelled') toast.warn(run.label, undefined, opts)
+  }
+
+  /** Read the task record once and apply it to the run. */
+  async function refresh(id: string): Promise<void> {
+    const run = find(id)
+    const def = defs.get(id)
+    if (!run || !def || run.taskId === null) return
+    const f = def.task
+    let record: unknown
+    if (f.get) record = await f.get(run.taskId)
+    else if (f.entity && deps.orchestrator) {
+      const manager = deps.orchestrator.get(f.entity) as { get: (id: unknown, ctx?: unknown, o?: unknown) => Promise<unknown> }
+      record = await manager.get(run.taskId, undefined, { listCache: false })
+    } else throw new Error(`TaskRunner: "${run.label}" has neither task.get nor a task.entity with an orchestrator`)
+    const r = (record ?? {}) as Record<string, unknown>
+    const current = find(id)
+    if (!current || FINAL.includes(current.status)) return
+
+    const raw = read(r, f.status, 'status')
+    const key = String(raw ?? '').toLowerCase()
+    const status = f.statusMap?.[String(raw)] ?? f.statusMap?.[key] ?? USUAL[key] ?? 'running'
+    const progress = Number(read(r, f.progress, 'progress'))
+    current.progress = Number.isFinite(progress) && read(r, f.progress, 'progress') !== null ? Math.max(0, Math.min(100, progress)) : null
+    const step = read(r, f.step, 'step')
+    current.step = step === null || step === undefined || step === '' ? null : String(step)
+    current.result = read(r, f.result, 'result') ?? null
+    const err = read(r, f.error, 'error')
+    if (err) current.error = errorText(err)
+    if (FINAL.includes(status)) finish(id, status)
+    else current.status = status
+  }
+
+  /** Poll until the run ends; a live event on its record reads it at once. */
+  function follow(id: string): void {
+    const run = find(id)
+    const def = defs.get(id)
+    if (!run || !def) return
+    const live = !!(def.task.entity && deps.signals)
+    const base = def.task.intervalMs ?? (live ? 10_000 : 2000)
+    let delay = base
+    let timer: ReturnType<typeof setTimeout> | null = null
+    let stopped = false
+    let busy = false
+    let again = false
+
+    const tick = async () => {
+      if (stopped) return
+      if (busy) {
+        again = true
+        return
+      }
+      busy = true
+      if (timer) clearTimeout(timer)
+      try {
+        await refresh(id)
+        delay = base
+      } catch (err) {
+        const r = find(id)
+        if (r) r.error = errorText(err)
+        delay = Math.min(delay * 2, 30_000)
+      } finally {
+        busy = false
+      }
+      if (stopped || FINAL.includes(find(id)?.status ?? 'failed')) return
+      if (again) {
+        again = false
+        void tick()
+        return
+      }
+      timer = setTimeout(tick, delay)
+    }
+
+    let off: (() => void) | null = null
+    if (live) {
+      off = deps.signals!.on('entity:data-invalidate', (event) => {
+        const p = (event.data ?? {}) as { entity?: string; id?: unknown }
+        if (p.entity !== def.task.entity) return
+        if (p.id !== undefined && String(p.id) !== String(find(id)?.taskId)) return
+        void tick()
+      })
+    }
+    stops.set(id, () => {
+      stopped = true
+      if (timer) clearTimeout(timer)
+      off?.()
+    })
+    pokes.set(id, () => void tick())
+    void tick()
+  }
+
+  // --- Public ---
+
+  function registerTaskKind(name: string, kind: TaskKind): void {
+    kinds.set(name, kind)
+  }
+
+  function requestConfirm(label: string, confirm: TaskConfirm): Promise<boolean> {
+    if (state.hosts === 0) {
+      console.warn(`[qdadm] Task "${label}" asks for a confirmation, but no TaskHost is mounted (AppLayout mounts one). Not started.`)
+      return Promise.resolve(false)
+    }
+    state.pendingConfirm?.resolve(false)
+    return new Promise((resolve) => {
+      state.pendingConfirm = { label, confirm, resolve }
+    })
+  }
+
+  function answerConfirm(ok: boolean): void {
+    const pending = state.pendingConfirm
+    state.pendingConfirm = null
+    pending?.resolve(ok)
+  }
+
+  /**
+   * Start a task and follow it. Resolves with the run once the task is
+   * queued (or null when the confirmation was declined); the run itself
+   * moves on in the store.
+   */
+  async function run(options: RunOptions): Promise<TaskRun | null> {
+    const base = options.kind ? kinds.get(options.kind) : undefined
+    if (options.kind && !base && !options.task) {
+      throw new Error(`TaskRunner: unknown task kind "${options.kind}"`)
+    }
+    const def: TaskKind = { ...base, ...options, task: { ...base?.task, ...options.task } } as TaskKind
+    if (options.confirm && !(await requestConfirm(options.label, options.confirm))) return null
+
+    const r = addRun({ label: options.label, kind: options.kind ?? null })
+    defs.set(r.id, def)
+    if (options.open !== false) state.openId = r.id
+    try {
+      const taskId = taskIdOf(await options.start())
+      if (taskId === null) throw new Error('the start handler returned no task id')
+      const current = find(r.id)!
+      current.taskId = taskId
+      current.status = 'queued'
+      persist()
+      follow(r.id)
+    } catch (err) {
+      finish(r.id, 'failed', errorText(err))
+    }
+    return find(r.id) ?? null
+  }
+
+  async function cancel(id: string): Promise<void> {
+    const r = find(id)
+    const def = defs.get(id)
+    if (!r || !def?.cancel || r.taskId === null || FINAL.includes(r.status)) return
+    r.cancelling = true
+    try {
+      await def.cancel(r.taskId)
+      pokes.get(id)?.()
+    } catch (err) {
+      r.cancelling = false
+      r.error = errorText(err)
+    }
+  }
+
+  function dismiss(id: string): void {
+    stops.get(id)?.()
+    stops.delete(id)
+    pokes.delete(id)
+    defs.delete(id)
+    const i = state.runs.findIndex((r) => r.id === id)
+    if (i !== -1) state.runs.splice(i, 1)
+    if (state.openId === id) state.openId = null
+    persist()
+  }
+
+  function clearFinished(): void {
+    for (const r of state.runs.filter((x) => FINAL.includes(x.status))) dismiss(r.id)
+  }
+
+  /** Wire the orchestrator (manager reads, toasts) and the signal bus (live). Called by useTaskRunner. */
+  function attach(next: TaskHostDeps): void {
+    if (next.orchestrator) deps.orchestrator = next.orchestrator
+    if (next.signals) deps.signals = next.signals
+    restore()
+  }
+
+  const active: ComputedRef<TaskRun[]> = computed(() => state.runs.filter((r) => !FINAL.includes(r.status)))
+
+  return {
+    state,
+    active,
+    run,
+    cancel,
+    dismiss,
+    clearFinished,
+    open: (id: string | null) => (state.openId = id),
+    registerTaskKind,
+    answerConfirm,
+    attach,
+    definition: (id: string) => defs.get(id),
+    isFinal: (status: TaskStatus) => FINAL.includes(status),
+    /** For tests: stop everything and forget every run. */
+    reset(): void {
+      for (const stop of stops.values()) stop()
+      stops.clear()
+      pokes.clear()
+      defs.clear()
+      kinds.clear()
+      state.runs.splice(0)
+      state.openId = null
+      state.pendingConfirm = null
+      state.hosts = 0
+      deps = {}
+      restored = false
+    },
+  }
+}
+
+export type TaskStore = ReturnType<typeof createTaskStore>
+
+let store: TaskStore | null = null
+
+export function getTaskStore(): TaskStore {
+  return (store ??= createTaskStore())
+}
+
+/** Register a kind of task, typically in a module's connect(): its runs then resume after a reload. */
+export function registerTaskKind(name: string, kind: TaskKind): void {
+  getTaskStore().registerTaskKind(name, kind)
+}

package/src/tasks/useTaskRunner.ts

@@ -0,0 +1,52 @@
+/**
+ * useTaskRunner - start a long backend task and follow it (#4114)
+ *
+ * ```ts
+ * const tasks = useTaskRunner()
+ * tasks.run({
+ *   label: `Create box ${name}`,
+ *   start: () => api.post('/boxes', { name }).then((r) => r.data),   // → { task_id }
+ *   task: { entity: 'tasks' },                                     // follow the task record
+ *   log: (id) => ({ poll: (from) => api.get(`/tasks/${id}/log`, { params: { from } }).then((r) => r.data) }),
+ *   cancel: (id) => api.post(`/tasks/${id}/cancel`),
+ *   to: (id) => ({ name: 'task-show', params: { id } }),
+ * })
+ *
+ * // As a row action, with a typed confirmation
+ * list.addAction('destroy', {
+ *   icon: 'pi pi-trash', severity: 'danger',
+ *   onClick: taskAction((box) => ({
+ *     label: `Destroy ${box.name}`, kind: 'destroy-box',
+ *     start: () => api.delete(`/boxes/${box.id}`).then((r) => r.data),
+ *     confirm: { typed: box.name, message: 'The box and its database are deleted.' },
+ *   })),
+ * })
+ * ```
+ */
+
+import { inject } from 'vue'
+import { getTaskStore, type RunOptions, type TaskRun } from './taskStore'
+
+export function useTaskRunner() {
+  const store = getTaskStore()
+  store.attach({
+    orchestrator: inject('qdadmOrchestrator', null),
+    signals: inject('qdadmSignals', null),
+  })
+  return {
+    run: store.run,
+    cancel: store.cancel,
+    dismiss: store.dismiss,
+    open: store.open,
+    runs: store.state.runs,
+    active: store.active,
+  }
+}
+
+/**
+ * An action handler that starts a task: `onClick: taskAction((row) => ({ label, start, ... }))`.
+ * Works for row actions, header actions, show-page actions and plain buttons.
+ */
+export function taskAction<A extends unknown[]>(build: (...args: A) => RunOptions): (...args: A) => Promise<TaskRun | null> {
+  return (...args: A) => getTaskStore().run(build(...args))
+}

package/src/utils/ansi.ts

@@ -0,0 +1,127 @@
+/**
+ * ANSI SGR parsing for log output (#4110).
+ *
+ * Only the Select Graphic Rendition sequences (`ESC [ … m`) carry meaning in
+ * a log: colours and weight. Every other escape (cursor moves, erase line,
+ * OSC titles) is dropped, since a tail has no cursor to move.
+ *
+ * The style carries from one line to the next, as in a terminal: a worker
+ * that prints `ESC[31m` and two lines later `ESC[0m` coloured both lines.
+ * So a stream is parsed in order, passing the state along.
+ */
+
+export interface AnsiStyle {
+  fg?: string
+  bg?: string
+  bold?: boolean
+  dim?: boolean
+  italic?: boolean
+  underline?: boolean
+  inverse?: boolean
+}
+
+export interface AnsiSegment {
+  text: string
+  style: AnsiStyle
+}
+
+/** xterm's default 16 colours: 0-7 normal, 8-15 bright. */
+const BASE_COLORS = [
+  '#000000', '#cd3131', '#0dbc79', '#e5e510', '#2472c8', '#bc3fbc', '#11a8cd', '#e5e5e5',
+  '#666666', '#f14c4c', '#23d18b', '#f5f543', '#3b8eea', '#d670d6', '#29b8db', '#ffffff',
+]
+
+function color256(n: number): string | undefined {
+  if (n < 0 || n > 255) return undefined
+  if (n < 16) return BASE_COLORS[n]
+  if (n < 232) {
+    const c = n - 16
+    const level = (v: number) => (v === 0 ? 0 : 55 + v * 40)
+    const r = level(Math.floor(c / 36))
+    const g = level(Math.floor(c / 6) % 6)
+    const b = level(c % 6)
+    return `rgb(${r}, ${g}, ${b})`
+  }
+  const grey = 8 + (n - 232) * 10
+  return `rgb(${grey}, ${grey}, ${grey})`
+}
+
+// eslint-disable-next-line no-control-regex
+const ESCAPE = /\x1b\[([0-9;:]*)([A-Za-z])|\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)|\x1b[@-Z\\-_]/g
+
+/** The text of a line without any escape sequence. */
+export function stripAnsi(text: string): string {
+  return text.replace(ESCAPE, '')
+}
+
+/** Apply one SGR parameter list to a style, returning the new style. */
+function applySgr(style: AnsiStyle, params: string): AnsiStyle {
+  const codes = params === '' ? [0] : params.split(/[;:]/).map((p) => (p === '' ? 0 : Number(p)))
+  let next: AnsiStyle = { ...style }
+  for (let i = 0; i < codes.length; i++) {
+    const code = codes[i]!
+    if (code === 0) next = {}
+    else if (code === 1) next.bold = true
+    else if (code === 2) next.dim = true
+    else if (code === 3) next.italic = true
+    else if (code === 4) next.underline = true
+    else if (code === 7) next.inverse = true
+    else if (code === 22) { delete next.bold; delete next.dim }
+    else if (code === 23) delete next.italic
+    else if (code === 24) delete next.underline
+    else if (code === 27) delete next.inverse
+    else if (code >= 30 && code <= 37) next.fg = BASE_COLORS[code - 30]
+    else if (code >= 90 && code <= 97) next.fg = BASE_COLORS[code - 90 + 8]
+    else if (code === 39) delete next.fg
+    else if (code >= 40 && code <= 47) next.bg = BASE_COLORS[code - 40]
+    else if (code >= 100 && code <= 107) next.bg = BASE_COLORS[code - 100 + 8]
+    else if (code === 49) delete next.bg
+    else if (code === 38 || code === 48) {
+      const key = code === 38 ? 'fg' : 'bg'
+      let value: string | undefined
+      if (codes[i + 1] === 5) {
+        value = color256(codes[i + 2] ?? -1)
+        i += 2
+      } else if (codes[i + 1] === 2) {
+        const [r, g, b] = [codes[i + 2], codes[i + 3], codes[i + 4]]
+        if ([r, g, b].every((v) => v !== undefined && v >= 0 && v <= 255)) value = `rgb(${r}, ${g}, ${b})`
+        i += 4
+      }
+      if (value) next[key] = value
+    }
+  }
+  return next
+}
+
+/**
+ * Split one line into styled segments, starting from `state` (the style the
+ * previous line ended in). Returns the segments and the style this line ends
+ * in, for the next one.
+ */
+export function parseAnsiLine(line: string, state: AnsiStyle = {}): { segments: AnsiSegment[]; state: AnsiStyle } {
+  const segments: AnsiSegment[] = []
+  let style = state
+  let last = 0
+  ESCAPE.lastIndex = 0
+  for (let m = ESCAPE.exec(line); m; m = ESCAPE.exec(line)) {
+    if (m.index > last) segments.push({ text: line.slice(last, m.index), style })
+    if (m[2] === 'm') style = applySgr(style, m[1] ?? '')
+    last = m.index + m[0].length
+  }
+  if (last < line.length) segments.push({ text: line.slice(last), style })
+  return { segments, state: style }
+}
+
+/** Inline CSS for a style; inverse swaps the colours it has. */
+export function ansiStyleToCss(style: AnsiStyle): Record<string, string> {
+  const css: Record<string, string> = {}
+  const fg = style.inverse ? style.bg ?? 'var(--qd-log-bg)' : style.fg
+  const bg = style.inverse ? style.fg ?? 'var(--qd-log-fg)' : style.bg
+  if (fg) css.color = fg
+  if (bg) css.backgroundColor = bg
+  if (style.bold) css.fontWeight = '700'
+  if (style.dim) css.opacity = '0.65'
+  if (style.italic) css.fontStyle = 'italic'
+  if (style.underline) css.textDecoration = 'underline'
+  return css
+}