@bibobonking/opensol 0.0.0-stage → 3.0.1

package/src/lib/usage.ts

@@ -0,0 +1,155 @@
+import type { ChatSession, Message } from '../types'
+
+export type UsageRange = 'all' | '30d' | '7d'
+
+export interface ModelUsage {
+  model: string
+  messages: number
+  tokens: number
+}
+
+export interface HeatmapDay {
+  key: string
+  count: number
+  date: number
+}
+
+export interface UsageStats {
+  sessions: number
+  messages: number
+  tokens: number
+  activeDays: number
+  peakHour: string
+  favoriteModel: string
+  favoriteShare: number
+  models: ModelUsage[]
+  heatmap: HeatmapDay[]
+  busiestDay: number
+}
+
+const DAY_MS = 86_400_000
+const HEATMAP_WEEKS = 26
+
+export function startOfDay(timestamp: number): number {
+  const date = new Date(timestamp)
+  date.setHours(0, 0, 0, 0)
+  return date.getTime()
+}
+
+export function dayKey(timestamp: number): string {
+  const date = new Date(timestamp)
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`
+}
+
+export function rangeCutoff(range: UsageRange, now: number): number {
+  if (range === 'all') return 0
+  return startOfDay(now) - (range === '7d' ? 6 : 29) * DAY_MS
+}
+
+function messageTime(message: Message, fallback: number): number {
+  return typeof message.createdAt === 'number' ? message.createdAt : fallback
+}
+
+function estimateTokens(message: Message): number {
+  if (message.role !== 'assistant') return 0
+  const usage = message.usage
+  if (usage && (usage.input || usage.output)) return (usage.input ?? 0) + (usage.output ?? 0)
+  const text = `${message.content ?? ''}${message.reasoning ?? ''}`
+  return text.trim() ? Math.ceil(text.length / 4) : 0
+}
+
+function hourLabel(hour: number): string {
+  if (hour === 0) return '12 AM'
+  if (hour === 12) return '12 PM'
+  return hour < 12 ? `${hour} AM` : `${hour - 12} PM`
+}
+
+export function computeUsage(sessions: ChatSession[], range: UsageRange, now = Date.now()): UsageStats {
+  const cutoff = rangeCutoff(range, now)
+  const filteredSessions = sessions.filter((session) => session.updatedAt >= cutoff)
+  const messages: Array<{ message: Message; session: ChatSession }> = []
+
+  for (const session of filteredSessions) {
+    for (const message of session.messages) {
+      if (messageTime(message, session.updatedAt) >= cutoff) {
+        messages.push({ message, session })
+      }
+    }
+  }
+
+  const hours = new Array<number>(24).fill(0)
+  const days = new Map<string, HeatmapDay>()
+  const models = new Map<string, ModelUsage>()
+  let tokens = 0
+
+  for (const { message, session } of messages) {
+    const at = messageTime(message, session.updatedAt)
+    const key = dayKey(at)
+    const day = days.get(key)
+    if (day) day.count += 1
+    else days.set(key, { key, count: 1, date: startOfDay(at) })
+    hours[new Date(at).getHours()] += 1
+
+    if (message.role !== 'assistant') continue
+    const messageTokens = estimateTokens(message)
+    tokens += messageTokens
+    const model = typeof message.model === 'string' ? message.model.trim() : ''
+    if (!model) continue
+    const entry = models.get(model) ?? { model, messages: 0, tokens: 0 }
+    entry.messages += 1
+    entry.tokens += messageTokens
+    models.set(model, entry)
+  }
+
+  const rankedModels = [...models.values()].sort(
+    (a, b) => b.tokens - a.tokens || b.messages - a.messages || a.model.localeCompare(b.model),
+  )
+  const favorite = rankedModels[0]
+  const assistantMessages = messages.filter((entry) => entry.message.role === 'assistant').length
+
+  let peak = 0
+  for (let hour = 1; hour < 24; hour += 1) {
+    if (hours[hour] > hours[peak]) peak = hour
+  }
+
+  const heatmap = buildHeatmap(days, now)
+  const busiestDay = heatmap.reduce((max, day) => Math.max(max, day.count), 0)
+
+  return {
+    sessions: filteredSessions.length,
+    messages: messages.length,
+    tokens,
+    activeDays: days.size,
+    peakHour: messages.length ? hourLabel(peak) : '—',
+    favoriteModel: favorite?.model ?? '—',
+    favoriteShare: favorite && assistantMessages ? Math.round((favorite.messages / assistantMessages) * 100) : 0,
+    models: rankedModels,
+    heatmap,
+    busiestDay,
+  }
+}
+
+function buildHeatmap(counts: Map<string, HeatmapDay>, now: number): HeatmapDay[] {
+  const today = new Date(startOfDay(now))
+  const start = new Date(today)
+  start.setDate(start.getDate() - start.getDay() - (HEATMAP_WEEKS - 1) * 7)
+  const days: HeatmapDay[] = []
+  for (let index = 0; index < HEATMAP_WEEKS * 7; index += 1) {
+    const date = start.getTime() + index * DAY_MS
+    const key = dayKey(date)
+    days.push(counts.get(key) ?? { key, count: 0, date })
+  }
+  return days
+}
+
+export function formatTokens(value: number): string {
+  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(value >= 10_000_000 ? 0 : 1)}M`
+  if (value >= 1_000) return `${(value / 1_000).toFixed(value >= 10_000 ? 0 : 1)}k`
+  return String(value)
+}
+
+export function shortModelName(model: string): string {
+  if (!model || model === '—') return model
+  const parts = model.split('/')
+  return parts[parts.length - 1] || model
+}

package/src/lib/utils.ts

@@ -0,0 +1,73 @@
+import { clsx, type ClassValue } from 'clsx'
+
+export function cn(...inputs: ClassValue[]) {
+  return clsx(inputs)
+}
+
+export function formatBytes(bytes: number) {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`
+}
+
+export function formatRelativeTime(timestamp: number) {
+  const seconds = Math.round((Date.now() - timestamp) / 1000)
+  if (seconds < 60) return 'now'
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m`
+  if (seconds < 86_400) return `${Math.floor(seconds / 3600)}h`
+  if (seconds < 604_800) return `${Math.floor(seconds / 86_400)}d`
+  return new Date(timestamp).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+}
+
+export function groupChatsByDate<T extends { updatedAt: number }>(chats: T[]) {
+  const now = new Date()
+  const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime()
+  const startOfYesterday = startOfToday - 86_400_000
+  const sevenDays = startOfToday - 6 * 86_400_000
+  const thirtyDays = startOfToday - 29 * 86_400_000
+  const groups: Array<{ label: string; items: T[] }> = [
+    { label: 'Today', items: [] },
+    { label: 'Yesterday', items: [] },
+    { label: 'Previous 7 days', items: [] },
+    { label: 'Previous 30 days', items: [] },
+    { label: 'Older', items: [] },
+  ]
+  const sorted = [...chats].sort((a, b) => b.updatedAt - a.updatedAt)
+  for (const chat of sorted) {
+    let index = 4
+    if (chat.updatedAt >= startOfToday) index = 0
+    else if (chat.updatedAt >= startOfYesterday) index = 1
+    else if (chat.updatedAt >= sevenDays) index = 2
+    else if (chat.updatedAt >= thirtyDays) index = 3
+    groups[index].items.push(chat)
+  }
+  return groups.filter((group) => group.items.length > 0)
+}
+
+export function readFileAsDataUrl(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(String(reader.result))
+    reader.onerror = () => reject(reader.error ?? new Error('Could not read this file.'))
+    reader.readAsDataURL(file)
+  })
+}
+
+export function readFileAsText(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(String(reader.result))
+    reader.onerror = () => reject(reader.error ?? new Error('Could not read this file.'))
+    reader.readAsText(file)
+  })
+}
+
+export function downloadText(filename: string, text: string, mime = 'text/plain') {
+  const blob = new Blob([text], { type: mime })
+  const url = URL.createObjectURL(blob)
+  const anchor = document.createElement('a')
+  anchor.href = url
+  anchor.download = filename
+  anchor.click()
+  URL.revokeObjectURL(url)
+}

package/src/main.tsx

@@ -0,0 +1,16 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+import { ErrorBoundary } from './components/ErrorBoundary'
+import './index.css'
+
+const root = document.getElementById('root')
+if (!root) throw new Error('Root element not found.')
+
+createRoot(root).render(
+  <StrictMode>
+    <ErrorBoundary>
+      <App />
+    </ErrorBoundary>
+  </StrictMode>,
+)

package/src/plugins/api.test.mjs

@@ -0,0 +1,77 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+
+import { allowedDomain, createPluginApi, emptyContributions, hasCapability } from './api.ts'
+
+const plugin = {
+  id: 'demo',
+  manifest: { id: 'demo', name: 'Demo', version: '1.0.0', apiVersion: 1, entry: 'main.js', stylesheet: 'main.css', capabilities: [], domains: ['api.example.com'] },
+  manifestHash: 'x',
+  installedAt: '0',
+  safe: false,
+  enabled: false,
+  grants: { capabilities: [], domains: [] },
+}
+
+const calls = {
+  workspace: {
+    list: async () => [{ path: 'a.ts', name: 'a.ts', type: 'file' }],
+    read: async () => 'contents',
+    write: async () => undefined,
+    edit: async () => true,
+  },
+  network: async (_id, request) => ({ status: 200, contentType: 'application/json', body: JSON.stringify(request) }),
+}
+
+const full = { capabilities: ['workspace.list', 'workspace.read', 'workspace.write', 'workspace.edit', 'ui.commands', 'ui.panels', 'ui.themes', 'network.request'], domains: ['api.example.com'] }
+
+test('ungranted capabilities are refused at call time', async () => {
+  const api = createPluginApi(plugin, { capabilities: [], domains: [] }, calls)
+  assert.throws(() => api.registerCommand('x', 'X', () => undefined), /not granted ui\.commands/)
+  await assert.rejects(() => api.workspace.read('secret'), /not granted workspace\.read/)
+  assert.throws(() => api.network.request('https://api.example.com/v1'), /not granted network\.request/)
+})
+
+test('granted workspace calls reach the host and bad ids are rejected', async () => {
+  const contributions = emptyContributions()
+  const api = createPluginApi(plugin, full, calls, contributions)
+  assert.deepEqual(await api.workspace.list(), [{ path: 'a.ts', name: 'a.ts', type: 'file' }])
+  api.registerCommand('open-panel', 'Open panel', () => undefined)
+  assert.equal(contributions.commands.get('open-panel')?.label, 'Open panel')
+  assert.throws(() => api.registerCommand('../x', 'Bad', () => undefined), /lowercase/)
+})
+
+test('network stays inside the declared and granted host list', async () => {
+  const api = createPluginApi(plugin, full, calls)
+  const result = await api.network.request('https://api.example.com/v1')
+  assert.equal(result.status, 200)
+  assert.throws(() => api.network.request('https://evil.example.com/v1'), /declared and you granted/)
+  assert.throws(() => api.network.request('http://api.example.com/v1'), /declared and you granted/)
+})
+
+test('disabling a plugin drops its contributions', () => {
+  const contributions = emptyContributions()
+  const api = createPluginApi(plugin, full, calls, contributions)
+  api.registerPanel('settings', 'Settings', () => undefined)
+  contributions.commands.clear()
+  contributions.panels.clear()
+  contributions.themes.clear()
+  assert.equal(contributions.panels.size, 0)
+})
+
+test('a capability is only available once the user grants it', () => {
+  assert.equal(hasCapability({ capabilities: ['workspace.read'], domains: [] }, 'workspace.read'), true)
+  assert.equal(hasCapability({ capabilities: ['workspace.read'], domains: [] }, 'workspace.write'), false)
+  assert.equal(hasCapability(undefined, 'workspace.read'), false)
+})
+
+test('network is limited to a declared-and-granted HTTPS host on 443', () => {
+  const declared = ['api.example.com']
+  const granted = { capabilities: [], domains: declared }
+  assert.equal(allowedDomain(granted, declared, 'https://api.example.com/v1'), 'api.example.com')
+  assert.equal(allowedDomain(granted, declared, 'http://api.example.com/v1'), null)
+  assert.equal(allowedDomain(granted, declared, 'https://api.example.com:8443/v1'), null)
+  assert.equal(allowedDomain(granted, declared, 'https://api.example.com.evil.com/v1'), null)
+  assert.equal(allowedDomain(granted, declared, 'not a url'), null)
+  assert.equal(allowedDomain({ capabilities: [], domains: [] }, declared, 'https://api.example.com'), null)
+})

package/src/plugins/api.ts

@@ -0,0 +1,113 @@
+import type { InstalledPlugin } from '../lib/daemon'
+import type { PluginCapability, PluginContribution, PluginGrant, PluginRuntimeApi } from './types'
+
+const ID = /^[a-z0-9][a-z0-9-]{0,47}$/
+
+export function hasCapability(grant: PluginGrant | undefined, capability: PluginCapability): boolean {
+  return Boolean(grant?.capabilities.includes(capability))
+}
+
+/**
+ * A plugin may only reach a host its manifest declared *and* the user granted.
+ * HTTPS on port 443 only; the daemon re-checks all of this server-side.
+ */
+export function allowedDomain(
+  grant: PluginGrant | undefined,
+  declared: string[],
+  url: string,
+): string | null {
+  let host: string
+  try {
+    const parsed = new URL(url)
+    if (parsed.protocol !== 'https:') return null
+    if (parsed.port && parsed.port !== '443') return null
+    host = parsed.hostname.toLowerCase()
+  } catch {
+    return null
+  }
+  if (!declared.includes(host)) return null
+  if (!grant?.domains.includes(host)) return null
+  return host
+}
+
+export interface PluginHostCalls {
+  workspace: {
+    list(path?: string): Promise<{ path: string; name: string; type: string }[]>
+    read(path: string): Promise<string>
+    write(path: string, content: string): Promise<void>
+    edit(path: string, from: string, to: string): Promise<boolean>
+  }
+  network(pluginId: string, request: { url: string; method?: 'GET' | 'POST'; headers?: Record<string, string>; body?: string }): Promise<{
+    status: number
+    contentType: string
+    body: string
+  }>
+}
+
+export function emptyContributions(): PluginContribution {
+  return { commands: new Map(), panels: new Map(), themes: new Map() }
+}
+
+function denied(capability: string): never {
+  throw new Error(`The plugin was not granted ${capability}.`)
+}
+
+/**
+ * The API handed to plugin code. Every entry point re-checks the user's grants,
+ * so a plugin cannot reach a capability it never got approved for, even if it
+ * calls the API directly.
+ */
+export function createPluginApi(
+  plugin: InstalledPlugin,
+  grant: PluginGrant,
+  calls: PluginHostCalls,
+  contributions: PluginContribution = emptyContributions(),
+): PluginRuntimeApi {
+  const check = (capability: Parameters<typeof hasCapability>[1]) => {
+    if (!hasCapability(grant, capability)) denied(capability)
+  }
+  const checkId = (id: string) => {
+    if (!ID.test(id)) throw new Error('A plugin contribution id must be lowercase letters, digits and dashes.')
+  }
+
+  return {
+    manifest: Object.freeze({ ...plugin.manifest }),
+    version: 1,
+    registerCommand(id, label, run) {
+      check('ui.commands')
+      checkId(id)
+      if (typeof run !== 'function') throw new Error('A command needs a function.')
+      contributions.commands.set(id, { label: String(label).slice(0, 80), run })
+    },
+    registerPanel(id, label, render) {
+      check('ui.panels')
+      checkId(id)
+      if (typeof render !== 'function') throw new Error('A panel needs a render function.')
+      contributions.panels.set(id, { label: String(label).slice(0, 80), render })
+    },
+    registerTheme(id, label, palette) {
+      check('ui.themes')
+      checkId(id)
+      if (!palette || typeof palette !== 'object') throw new Error('A theme needs a palette.')
+      contributions.themes.set(id, { label: String(label).slice(0, 80), palette: { ...palette } })
+    },
+    workspace: {
+      list: async (path) => (check('workspace.list'), calls.workspace.list(path)),
+      read: async (path) => (check('workspace.read'), calls.workspace.read(path)),
+      write: async (path, content) => (check('workspace.write'), calls.workspace.write(path, content)),
+      edit: async (path, from, to) => (check('workspace.edit'), calls.workspace.edit(path, from, to)),
+    },
+    network: {
+      request(url, init) {
+        check('network.request')
+        if (!allowedDomain(grant, plugin.manifest.domains, url)) {
+          throw new Error('This plugin may only call HTTPS hosts it declared and you granted.')
+        }
+        return calls.network(plugin.id, { url, ...init })
+      },
+    },
+    log(message) {
+      console.info(`[plugin:${plugin.id}]`, message)
+    },
+  }
+}

package/src/plugins/bridge.d.mts

@@ -0,0 +1 @@
+export function isPluginPreviewMessage(value: unknown): boolean

package/src/plugins/bridge.mjs

@@ -0,0 +1,26 @@
+const ID = /^[a-z0-9][a-z0-9-]{0,47}$/
+
+export function isPluginPreviewMessage(value) {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return false
+  const prototype = Object.getPrototypeOf(value)
+  if (prototype !== Object.prototype && prototype !== null) return false
+  if (value.type === 'ready') return Object.keys(value).length === 1
+  if (value.type === 'command' || value.type === 'panel') {
+    return (
+      Object.keys(value).every((key) => ['type', 'id', 'label'].includes(key)) &&
+      typeof value.id === 'string' &&
+      ID.test(value.id) &&
+      typeof value.label === 'string' &&
+      value.label.trim().length > 0 &&
+      value.label.length <= 80
+    )
+  }
+  if (value.type === 'log' || value.type === 'error') {
+    return (
+      Object.keys(value).every((key) => ['type', 'message'].includes(key)) &&
+      typeof value.message === 'string' &&
+      value.message.length <= 500
+    )
+  }
+  return false
+}

package/src/plugins/bridge.test.mjs

@@ -0,0 +1,17 @@
+import test from 'node:test'
+import assert from 'node:assert/strict'
+import { isPluginPreviewMessage } from './bridge.mjs'
+
+test('preview bridge accepts bounded registration and status messages', () => {
+  assert.equal(isPluginPreviewMessage({ type: 'ready' }), true)
+  assert.equal(isPluginPreviewMessage({ type: 'command', id: 'open-panel', label: 'Open panel' }), true)
+  assert.equal(isPluginPreviewMessage({ type: 'panel', id: 'settings', label: 'Settings' }), true)
+  assert.equal(isPluginPreviewMessage({ type: 'log', message: 'preview ready' }), true)
+})
+
+test('preview bridge rejects API calls, malformed registrations, and oversized messages', () => {
+  assert.equal(isPluginPreviewMessage({ type: 'api-call', method: 'workspace.read', path: 'secret' }), false)
+  assert.equal(isPluginPreviewMessage({ type: 'command', id: '../x', label: 'Bad' }), false)
+  assert.equal(isPluginPreviewMessage({ type: 'error', message: 'x'.repeat(501) }), false)
+  assert.equal(isPluginPreviewMessage(Object.assign(Object.create({ polluted: true }), { type: 'ready' })), false)
+})

package/src/plugins/index.ts

@@ -0,0 +1,52 @@
+import { getWorkspaceTree, readWorkspaceFile, writeWorkspaceFile, pluginNetworkRequest, type InstalledPlugin } from '../lib/daemon'
+import { createPluginRuntime, type PluginRuntime } from './runtime'
+import type { PluginHostCalls } from './api'
+
+const calls: PluginHostCalls = {
+  workspace: {
+    async list(path = '') {
+      const tree = await getWorkspaceTree(path)
+      return tree.entries.map((entry) => ({ path: entry.path, name: entry.name, type: entry.type }))
+    },
+    async read(path) {
+      const file = await readWorkspaceFile(path)
+      return file.content
+    },
+    async write(path, content) {
+      await writeWorkspaceFile(path, content)
+    },
+    async edit(path, from, to) {
+      const file = await readWorkspaceFile(path)
+      if (!file.content.includes(from)) return false
+      await writeWorkspaceFile(path, file.content.replace(from, to))
+      return true
+    },
+  },
+  network: (pluginId, request) => pluginNetworkRequest(pluginId, request),
+}
+
+let runtime: PluginRuntime | null = null
+
+export function pluginRuntime(): PluginRuntime {
+  runtime ??= createPluginRuntime()
+  return runtime
+}
+
+/** Loads every Safe + enabled plugin, dropping anything no longer trusted. */
+export async function syncPlugins(plugins: InstalledPlugin[]): Promise<void> {
+  const active = new Set(plugins.filter((plugin) => plugin.safe && plugin.enabled).map((plugin) => plugin.id))
+  const live = pluginRuntime()
+  for (const id of [...live.contributions.keys()]) {
+    if (!active.has(id)) live.deactivate(id)
+  }
+  for (const plugin of plugins) {
+    if (!active.has(plugin.id)) continue
+    try {
+      await live.activate(plugin, calls)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+}
+
+export { calls as pluginHostCalls }

package/src/plugins/preview.test.mjs

@@ -0,0 +1,18 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+import { previewDocument } from './preview.ts'
+
+test('the preview document carries the stylesheet, the manifest identity and the source', () => {
+  const html = previewDocument({ id: 'demo', name: 'Demo' }, 'maxcode.log("hi")', 'body{color:red}')
+  assert.match(html, /<style>body\{color:red\}<\/style>/)
+  assert.match(html, /\{"id":"demo","name":"Demo"\}/)
+  assert.match(html, /maxcode\.log\("hi"\)/)
+  assert.equal(html.startsWith('<!doctype html>'), true)
+})
+
+test('the preview hands the plugin a stub API with no network and no workspace writes', () => {
+  const html = previewDocument({ id: 'demo', name: 'Demo' }, '', '')
+  assert.match(html, /network: \(\) => \{ throw new Error\('The sandboxed preview has no network access\.'\) \}/)
+  assert.match(html, /list: \(\) => \[\]/)
+  assert.doesNotMatch(html, /\bfetch\(|XMLHttpRequest|allow-same-origin/)
+})

package/src/plugins/preview.ts

@@ -0,0 +1,34 @@
+import { isPluginPreviewMessage } from './bridge.mjs'
+
+/**
+ * Sandboxed preview: an iframe with no same-origin access and no direct network,
+ * driven only by validated messages. No plugin API is exposed here.
+ */
+export function previewDocument(manifest: { id: string; name: string }, source: string, css: string): string {
+  const bridge = `
+    const send = (message) => parent.postMessage(message, '*')
+    const api = {
+      manifest: ${JSON.stringify({ id: manifest.id, name: manifest.name })},
+      command: (id, label) => send({ type: 'command', id, label }),
+      panel: (id, label) => send({ type: 'panel', id, label }),
+      log: (message) => send({ type: 'log', message: String(message).slice(0, 500) }),
+      network: () => { throw new Error('The sandboxed preview has no network access.') },
+      workspace: { list: () => [], read: () => '', write: () => {}, edit: () => false },
+    }
+    try { ;(function (maxcode) { ${source} })(api) } catch (error) {
+      send({ type: 'error', message: String(error && error.message ? error.message : error).slice(0, 500) })
+    }
+    send({ type: 'ready' })
+  `
+  return `<!doctype html><html><head><meta charset="utf-8"><style>${css}</style></head><body><script>${bridge}</script></body></html>`
+}
+
+export function attachPreviewBridge(iframe: HTMLIFrameElement, onMessage: (message: unknown) => void): () => void {
+  const listener = (event: MessageEvent) => {
+    if (event.source !== iframe.contentWindow) return
+    if (!isPluginPreviewMessage(event.data)) return
+    onMessage(event.data)
+  }
+  window.addEventListener('message', listener)
+  return () => window.removeEventListener('message', listener)
+}