dsh-remote-control-plugin 0.0.0-stage → 0.3.0

package/client.js

@@ -0,0 +1,563 @@
+window.__ModuleLoader__.load({
+  id: 'dsh-remote-control-plugin',
+  factory(require) {
+    const React = require('react')
+    const h = React.createElement
+    const { useCallback, useEffect, useMemo, useRef, useState } = React
+
+    const S = {
+      page: { display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0, color: 'var(--dsw-alias-label-primary)' },
+      header: {
+        display: 'flex', alignItems: 'center', gap: '10px', padding: '14px 18px',
+        borderBottom: '1px solid var(--dsw-alias-border-l1)',
+      },
+      title: { fontSize: '15px', fontWeight: 600, margin: 0 },
+      subtitle: { fontSize: '12px', color: 'var(--dsw-alias-label-secondary)' },
+      grow: { flex: 1 },
+      body: { display: 'flex', flex: 1, minHeight: 0 },
+      column: { display: 'flex', flexDirection: 'column', minHeight: 0 },
+      list: { flex: 1, overflowY: 'auto', padding: '10px' },
+      row: {
+        display: 'flex', alignItems: 'center', gap: '10px', padding: '10px 12px',
+        borderRadius: '10px', border: '1px solid var(--dsw-alias-border-l1)',
+        background: 'var(--dsw-alias-bg-layer-1)', marginBottom: '8px',
+      },
+      rowButton: { cursor: 'pointer', textAlign: 'left', width: '100%' },
+      rowActive: { borderColor: 'var(--dsw-alias-brand-primary)' },
+      name: { fontSize: '13px', fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+      meta: { fontSize: '11px', color: 'var(--dsw-alias-label-secondary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+      chip: {
+        fontSize: '11px', padding: '2px 8px', borderRadius: '999px',
+        border: '1px solid var(--dsw-alias-border-l1)', color: 'var(--dsw-alias-label-secondary)',
+        whiteSpace: 'nowrap',
+      },
+      chipOk: { color: 'var(--dsw-alias-state-success-primary)', borderColor: 'var(--dsw-alias-state-success-primary)' },
+      chipWarn: { color: 'var(--dsw-alias-state-warn-primary)', borderColor: 'var(--dsw-alias-state-warn-primary)' },
+      chipBad: { color: 'var(--dsw-alias-state-error-primary)', borderColor: 'var(--dsw-alias-state-error-primary)' },
+      button: {
+        font: 'inherit', fontSize: '12px', padding: '6px 12px', borderRadius: '8px', cursor: 'pointer',
+        border: '1px solid var(--dsw-alias-border-l1)', background: 'var(--dsw-alias-bg-layer-2)',
+        color: 'var(--dsw-alias-label-primary)',
+      },
+      primary: { background: 'var(--dsw-alias-brand-primary)', borderColor: 'var(--dsw-alias-brand-primary)', color: '#fff' },
+      danger: { color: 'var(--dsw-alias-state-error-primary)', borderColor: 'var(--dsw-alias-state-error-primary)' },
+      notice: {
+        margin: '10px', padding: '10px 12px', borderRadius: '10px',
+        border: '1px solid var(--dsw-alias-state-warn-primary)',
+        background: 'var(--dsw-alias-bg-layer-1)', fontSize: '12px',
+      },
+      log: { flex: 1, overflowY: 'auto', padding: '14px 18px', display: 'flex', flexDirection: 'column', gap: '8px' },
+      bubble: {
+        maxWidth: '78%', padding: '8px 11px', borderRadius: '12px', fontSize: '13px',
+        whiteSpace: 'pre-wrap', overflowWrap: 'anywhere', border: '1px solid var(--dsw-alias-border-l1)',
+      },
+      userBubble: { alignSelf: 'flex-end', background: 'var(--dsw-alias-bg-layer-2)' },
+      assistantBubble: { alignSelf: 'flex-start', background: 'var(--dsw-alias-bg-layer-1)' },
+      toolRow: { fontSize: '11px', color: 'var(--dsw-alias-label-secondary)', alignSelf: 'flex-start' },
+      note: { fontSize: '11px', color: 'var(--dsw-alias-label-secondary)', alignSelf: 'center' },
+      composer: {
+        display: 'flex', gap: '8px', alignItems: 'flex-end', padding: '10px 14px',
+        borderTop: '1px solid var(--dsw-alias-border-l1)',
+      },
+      input: {
+        flex: 1, resize: 'none', font: 'inherit', fontSize: '13px', padding: '8px 10px', minHeight: '38px',
+        maxHeight: '140px', borderRadius: '10px', color: 'var(--dsw-alias-label-primary)',
+        background: 'var(--dsw-alias-bg-layer-1)', border: '1px solid var(--dsw-alias-border-l1)',
+      },
+      empty: { margin: 'auto', padding: '24px', textAlign: 'center', fontSize: '13px', color: 'var(--dsw-alias-label-secondary)' },
+      pane: { width: '300px', borderRight: '1px solid var(--dsw-alias-border-l1)' },
+      field: {
+        font: 'inherit', fontSize: '12px', padding: '7px 9px', borderRadius: '8px', minWidth: '180px',
+        color: 'var(--dsw-alias-label-primary)', background: 'var(--dsw-alias-bg-layer-2)',
+        border: '1px solid var(--dsw-alias-border-l1)',
+      },
+      error: { fontSize: '12px', color: 'var(--dsw-alias-state-error-primary)', padding: '8px 18px' },
+    }
+
+    async function api(path, body) {
+      const response = await fetch(path, {
+        method: body === undefined ? 'GET' : 'POST',
+        credentials: 'same-origin',
+        headers: body === undefined ? undefined : { 'content-type': 'application/json' },
+        body: body === undefined ? undefined : JSON.stringify(body),
+      })
+      const data = await response.json().catch(() => ({}))
+      if (!response.ok) throw new Error(data.message || data.error || `HTTP ${response.status}`)
+      return data
+    }
+
+    function shortAccount(userId) {
+      if (!userId) return 'signed out'
+      return String(userId).slice(0, 8)
+    }
+
+    function relativeTime(value) {
+      const delta = Date.now() - Number(value || 0)
+      if (!Number.isFinite(delta)) return ''
+      const seconds = Math.round(delta / 1000)
+      if (seconds < 10) return 'now'
+      if (seconds < 60) return `${seconds}s ago`
+      const minutes = Math.round(seconds / 60)
+      if (minutes < 60) return `${minutes}m ago`
+      return `${Math.round(minutes / 60)}h ago`
+    }
+
+    function Icon({ size, active }) {
+      const edge = size || 20
+      return h('svg', {
+        viewBox: '0 0 24 24', width: edge, height: edge, fill: 'none',
+        stroke: 'currentColor', strokeWidth: 1.7, strokeLinecap: 'round', strokeLinejoin: 'round',
+        style: { opacity: active ? 1 : 0.72 },
+      },
+        h('rect', { x: 3, y: 4, width: 18, height: 12, rx: 2 }),
+        h('path', { d: 'M8 20h8M12 16v4' }),
+        h('path', { d: 'M7.5 10h2l1.5 2 1.5-4 1.5 2h2.5' }),
+      )
+    }
+
+    /* ---------------- chat ---------------- */
+
+    function Chat({ peerId, sessionId, title }) {
+      const [entries, setEntries] = useState([])
+      const [live, setLive] = useState('')
+      const [running, setRunning] = useState(false)
+      const [draft, setDraft] = useState('')
+      const [error, setError] = useState(null)
+      const seen = useRef(new Set())
+      const logRef = useRef(null)
+      const pinned = useRef(true)
+
+      useEffect(() => {
+        seen.current = new Set()
+        setEntries([])
+        setLive('')
+        setRunning(false)
+        setError(null)
+        if (!peerId || !sessionId) return undefined
+        const source = new EventSource(
+          `/remote-control/api/peer/${encodeURIComponent(peerId)}/stream?sessionId=${encodeURIComponent(sessionId)}`,
+        )
+        source.onmessage = (event) => {
+          let frame
+          try { frame = JSON.parse(event.data) } catch { return }
+          if (frame.type === 'snapshot') {
+            const batch = []
+            for (const record of frame.records || []) {
+              const entry = toEntry(record?.event, seen.current)
+              if (entry) batch.push(entry)
+            }
+            if (batch.length > 0) setEntries((current) => current.concat(batch))
+            return
+          }
+          if (frame.type === 'event') {
+            const entry = toEntry(frame.event, seen.current)
+            if (!entry) return
+            if (entry.kind === 'turn-start') { setRunning(true); return }
+            if (entry.kind === 'turn-end') { setRunning(false); return }
+            if (entry.kind === 'live-reset') { setLive(''); return }
+            if (entry.kind === 'assistant') setLive('')
+            setEntries((current) => current.concat([entry]))
+            return
+          }
+          if (frame.type === 'assistant-stream') {
+            const inner = frame.frame || {}
+            if (inner.type === 'start') { setLive(''); return }
+            if (inner.type === 'chunk' && inner.chunk?.type === 'text-delta') {
+              setLive((current) => current + String(inner.chunk.text ?? ''))
+            }
+            if (inner.type === 'end') {
+              setTimeout(() => setLive(''), 700)
+            }
+            return
+          }
+          if (frame.type === 'remote-error') setError(`${frame.code || 'error'}: ${frame.message || 'stream failed'}`)
+        }
+        source.onerror = () => { /* EventSource retries on its own */ }
+        return () => source.close()
+      }, [peerId, sessionId])
+
+      useEffect(() => {
+        if (!pinned.current) return
+        const node = logRef.current
+        if (node) node.scrollTop = node.scrollHeight
+      }, [entries, live])
+
+      const send = useCallback(async () => {
+        const text = draft.trim()
+        if (!text || !peerId || !sessionId) return
+        setDraft('')
+        setError(null)
+        try {
+          await api(`/remote-control/api/peer/${encodeURIComponent(peerId)}/prompt`, { sessionId, text })
+        } catch (failure) {
+          setDraft(text)
+          setError(failure.message)
+        }
+      }, [draft, peerId, sessionId])
+
+      const stop = useCallback(async () => {
+        try {
+          await api(`/remote-control/api/peer/${encodeURIComponent(peerId)}/cancel`, { sessionId })
+        } catch (failure) {
+          setError(failure.message)
+        }
+      }, [peerId, sessionId])
+
+      return h('div', { style: { ...S.column, flex: 1, minHeight: 0 } },
+        h('div', {
+          style: { padding: '10px 18px', borderBottom: '1px solid var(--dsw-alias-border-l1)', fontSize: '13px', fontWeight: 600 },
+        }, title || sessionId),
+        error ? h('div', { style: S.error }, error) : null,
+        h('div', {
+          ref: logRef,
+          style: S.log,
+          onScroll: (event) => {
+            const node = event.currentTarget
+            pinned.current = node.scrollHeight - node.scrollTop - node.clientHeight < 60
+          },
+        },
+          entries.length === 0 && !live
+            ? h('div', { style: S.empty }, 'No messages yet. Send one below.')
+            : entries.map((entry) => renderEntry(entry)),
+          live ? h('div', { style: { ...S.bubble, ...S.assistantBubble, opacity: 0.85 } }, live) : null,
+        ),
+        h('div', { style: S.composer },
+          h('textarea', {
+            style: S.input,
+            rows: 1,
+            value: draft,
+            placeholder: 'Message this device…',
+            onChange: (event) => setDraft(event.target.value),
+            onKeyDown: (event) => {
+              if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); send() }
+            },
+          }),
+          running ? h('button', { type: 'button', style: { ...S.button, ...S.danger }, onClick: stop }, 'Stop') : null,
+          h('button', { type: 'button', style: { ...S.button, ...S.primary }, onClick: send, disabled: !draft.trim() }, 'Send'),
+        ),
+      )
+    }
+
+    function renderEntry(entry) {
+      if (entry.kind === 'user') return h('div', { key: entry.key, style: { ...S.bubble, ...S.userBubble } }, entry.text)
+      if (entry.kind === 'assistant') return h('div', { key: entry.key, style: { ...S.bubble, ...S.assistantBubble } }, entry.text)
+      if (entry.kind === 'tool') return h('div', { key: entry.key, style: S.toolRow }, `⚙ ${entry.text}`)
+      return h('div', { key: entry.key, style: S.note }, entry.text)
+    }
+
+    function blocksText(content) {
+      if (typeof content === 'string') return content
+      if (!Array.isArray(content)) return ''
+      return content.map((block) => (block && block.type === 'text' ? String(block.text ?? '') : '')).join('')
+    }
+
+    function toEntry(event, seen) {
+      if (!event || typeof event.seq !== 'number' || seen.has(event.seq)) return null
+      seen.add(event.seq)
+      const key = `e${event.seq}`
+      const data = event.data || {}
+      switch (event.type) {
+        case 'user/message': {
+          const kind = data.source?.kind
+          if (kind && kind !== 'user') return null
+          const text = blocksText(data.content ?? data.message?.content)
+          return text ? { key, kind: 'user', text } : null
+        }
+        case 'assistant/message': {
+          const text = blocksText(data.message?.content)
+          return text ? { key, kind: 'assistant', text } : null
+        }
+        case 'tool/call':
+          return { key, kind: 'tool', text: String(data.name || 'tool') }
+        case 'turn/start':
+          return { key, kind: 'turn-start' }
+        case 'turn/end':
+          return { key, kind: 'turn-end' }
+        case 'session/title':
+          return null
+        default:
+          return null
+      }
+    }
+
+    /* ---------------- devices page ---------------- */
+
+    function DevicesPage() {
+      const [state, setState] = useState(null)
+      const [error, setError] = useState(null)
+      const [busy, setBusy] = useState(null)
+      const [openPeer, setOpenPeer] = useState(null)
+      const [sessions, setSessions] = useState(null)
+      const [sessionId, setSessionId] = useState(null)
+      const [relayOpen, setRelayOpen] = useState(false)
+      const [relayUrl, setRelayUrl] = useState('')
+      const [relayKey, setRelayKey] = useState('')
+
+      const refresh = useCallback(async () => {
+        try {
+          const value = await api('/remote-control/api/state')
+          setState(value)
+          setError(null)
+        } catch (failure) {
+          setError(failure.message)
+        }
+      }, [])
+
+      useEffect(() => {
+        let alive = true
+        refresh()
+        const timer = setInterval(() => { if (alive) refresh() }, 3000)
+        return () => { alive = false; clearInterval(timer) }
+      }, [refresh])
+
+      const approve = useCallback(async (requestId) => {
+        setBusy(requestId)
+        try { await api('/remote-control/api/approve', { requestId }) } catch (failure) { setError(failure.message) }
+        setBusy(null)
+        refresh()
+      }, [refresh])
+
+      const deny = useCallback(async (requestId) => {
+        setBusy(requestId)
+        try { await api('/remote-control/api/deny', { requestId }) } catch (failure) { setError(failure.message) }
+        setBusy(null)
+        refresh()
+      }, [refresh])
+
+      const connect = useCallback(async (deviceId) => {
+        setBusy(deviceId)
+        try { await api('/remote-control/api/connect', { deviceId }) } catch (failure) { setError(failure.message) }
+        setBusy(null)
+        refresh()
+      }, [refresh])
+
+      const open = useCallback(async (peer) => {
+        setOpenPeer(peer)
+        setSessions(null)
+        setSessionId(null)
+        try {
+          const value = await api(`/remote-control/api/peer/${encodeURIComponent(peer.deviceId)}/sessions`)
+          setSessions(value.items || [])
+        } catch (failure) {
+          setError(failure.message)
+          setSessions([])
+        }
+      }, [])
+
+      const saveRelay = useCallback(async () => {
+        setBusy('relay')
+        setError(null)
+        const parts = relayUrl.trim().split(/\s+/)
+        const url = parts[0] || ''
+        const key = parts[1] || relayKey
+        try {
+          await api('/remote-control/api/relay', { url, key })
+          setRelayKey('')
+          setRelayOpen(false)
+        } catch (failure) {
+          setError(failure.message)
+        }
+        setBusy(null)
+        refresh()
+      }, [relayUrl, relayKey, refresh])
+
+      const hostRelay = useCallback(async () => {
+        setBusy('relay')
+        setError(null)
+        try {
+          await api('/remote-control/api/relay/host', { enabled: true })
+        } catch (failure) {
+          setError(failure.message)
+        }
+        setBusy(null)
+        refresh()
+      }, [refresh])
+
+      const stopHosting = useCallback(async () => {
+        setBusy('relay')
+        try { await api('/remote-control/api/relay/host', { enabled: false }) } catch (failure) { setError(failure.message) }
+        setBusy(null)
+        refresh()
+      }, [refresh])
+
+      const clearRelay = useCallback(async () => {
+        setBusy('relay')
+        try { await api('/remote-control/api/relay/clear', {}) } catch (failure) { setError(failure.message) }
+        setBusy(null)
+        refresh()
+      }, [refresh])
+
+      const peers = state?.peers ?? []
+      const requests = state?.requests ?? []
+      const self = state?.self
+      const relay = state?.relay
+
+      return h('div', { style: S.page },
+        h('div', { style: S.header },
+          h('div', null,
+            h('h2', { style: S.title }, 'Devices'),
+            h('div', { style: S.subtitle },
+              self ? `${self.deviceName} · ${shortAccount(self.userId)} · port ${self.port}` : 'Discovering…'),
+          ),
+          h('div', { style: S.grow }),
+          h('span', { style: { ...S.chip, ...(relay?.connected ? S.chipOk : {}) } },
+            relay?.connected ? `Relay · ${relay.peers}` : 'LAN only'),
+          h('button', { type: 'button', style: S.button, onClick: () => setRelayOpen((value) => !value) }, 'Relay'),
+          h('span', { style: S.chip }, `${peers.length} found`),
+          h('button', { type: 'button', style: S.button, onClick: refresh }, 'Refresh'),
+        ),
+        error ? h('div', { style: S.error }, error) : null,
+
+        relayOpen
+          ? h('div', { style: S.notice },
+            relay?.hosted
+              ? h('div', null,
+                h('div', { style: { ...S.meta, marginBottom: '6px' } },
+                  'This device is hosting the relay. Paste this invite into the other device’s Relay panel.'),
+                h('div', { style: { display: 'flex', gap: '8px', flexWrap: 'wrap', alignItems: 'center' } },
+                  h('input', {
+                    style: { ...S.field, flex: 1, minWidth: '260px' },
+                    readOnly: true,
+                    value: relay.invite || '',
+                    onFocus: (event) => event.target.select(),
+                  }),
+                  h('button', {
+                    type: 'button',
+                    style: S.button,
+                    onClick: () => { try { navigator.clipboard?.writeText(relay.invite || '') } catch { /* ignore */ } },
+                  }, 'Copy'),
+                  h('button', { type: 'button', style: S.button, disabled: busy === 'relay', onClick: stopHosting }, 'Stop hosting'),
+                ),
+                h('div', { style: { ...S.meta, marginTop: '6px' } },
+                  `Reachable at ${(relay.urls || []).join(', ') || 'this machine'} — forward that port (or set publicUrl) so other networks can reach it.`),
+              )
+              : h('div', null,
+                h('div', { style: { display: 'flex', gap: '8px', flexWrap: 'wrap', alignItems: 'center' } },
+                  h('input', {
+                    style: S.field,
+                    placeholder: 'relay URL or invite',
+                    value: relayUrl,
+                    onChange: (event) => setRelayUrl(event.target.value),
+                  }),
+                  h('input', {
+                    style: S.field,
+                    type: 'password',
+                    placeholder: 'workspace key',
+                    value: relayKey,
+                    onChange: (event) => setRelayKey(event.target.value),
+                  }),
+                  h('button', {
+                    type: 'button',
+                    style: { ...S.button, ...S.primary },
+                    disabled: busy === 'relay' || !relayUrl.trim(),
+                    onClick: saveRelay,
+                  }, 'Connect'),
+                  h('button', { type: 'button', style: S.button, disabled: busy === 'relay', onClick: hostRelay }, 'Create relay here'),
+                  relay?.connected
+                    ? h('button', { type: 'button', style: S.button, disabled: busy === 'relay', onClick: clearRelay }, 'Disconnect')
+                    : null,
+                ),
+                h('div', { style: { ...S.meta, marginTop: '6px' } },
+                  'Paste an invite (URL and key), or create a relay here and share it with your other devices.'),
+              ),
+          )
+          : null,
+
+        requests.length > 0
+          ? h('div', null, requests.map((request) => h('div', { key: request.requestId, style: S.notice },
+            h('div', { style: { marginBottom: '8px' } },
+              h('strong', null, request.deviceName),
+              ` wants to control this computer (account ${shortAccount(request.userId)}).`),
+            h('div', { style: { display: 'flex', gap: '8px' } },
+              h('button', {
+                type: 'button', style: { ...S.button, ...S.primary }, disabled: busy === request.requestId,
+                onClick: () => approve(request.requestId),
+              }, 'Allow'),
+              h('button', {
+                type: 'button', style: S.button, disabled: busy === request.requestId,
+                onClick: () => deny(request.requestId),
+              }, 'Deny'),
+            ),
+          )))
+          : null,
+
+        h('div', { style: S.body },
+          h('div', { style: { ...S.column, ...S.pane } },
+            h('div', { style: S.list },
+              peers.length === 0
+                ? h('div', { style: S.empty }, 'No other DSH device found on this network yet.')
+                : peers.map((peer) => h('div', {
+                  key: peer.deviceId,
+                  style: {
+                    ...S.row,
+                    ...(peer.approved ? S.rowButton : {}),
+                    ...(openPeer?.deviceId === peer.deviceId ? S.rowActive : {}),
+                  },
+                  onClick: peer.approved ? () => open(peer) : undefined,
+                },
+                  h('div', { style: { flex: 1, minWidth: 0 } },
+                    h('div', { style: S.name }, peer.deviceName),
+                    h('div', { style: S.meta }, `${peer.address}:${peer.port} · ${peer.userId ? shortAccount(peer.userId) : 'signed out'} · ${peer.transport === 'relay' ? 'relay' : 'LAN'} · ${relativeTime(peer.lastSeen)}`),
+                  ),
+                  peer.approved
+                    ? h('span', { style: { ...S.chip, ...S.chipOk } }, 'Trusted')
+                    : peer.connecting
+                      ? h('span', { style: { ...S.chip, ...S.chipWarn } }, 'Waiting')
+                      : h('button', {
+                        type: 'button', style: S.button, disabled: busy === peer.deviceId,
+                        onClick: (event) => { event.stopPropagation(); connect(peer.deviceId) },
+                      }, 'Request'),
+                  peer.userId && self?.userId && peer.userId !== self.userId
+                    ? h('span', { style: { ...S.chip, ...S.chipBad } }, 'Other account')
+                    : null,
+                )),
+            ),
+          ),
+
+          openPeer
+            ? h('div', { style: { ...S.column, flex: 1, minWidth: 0 } },
+              sessions === null
+                ? h('div', { style: S.empty }, 'Loading sessions…')
+                : sessions.length === 0
+                  ? h('div', { style: S.empty }, 'This device has no sessions.')
+                  : h('div', { style: { display: 'flex', flex: 1, minHeight: 0 } },
+                    h('div', { style: { ...S.column, ...S.pane, width: '220px' } },
+                      h('div', { style: S.list }, sessions.map((session) => h('div', {
+                        key: session.id,
+                        style: { ...S.row, ...S.rowButton, ...(sessionId === session.id ? S.rowActive : {}) },
+                        onClick: () => setSessionId(session.id),
+                      },
+                        h('div', { style: { minWidth: 0 } },
+                          h('div', { style: S.name }, session.title || session.cwd || session.id),
+                          h('div', { style: S.meta },
+                            [session.running ? 'running' : '', relativeTime(session.updatedAt)].filter(Boolean).join(' · ')),
+                        ),
+                      ))),
+                    ),
+                    sessionId
+                      ? h(Chat, {
+                        peerId: openPeer.deviceId,
+                        sessionId,
+                        title: sessions.find((session) => session.id === sessionId)?.title,
+                      })
+                      : h('div', { style: S.empty }, 'Pick a session to control it.'),
+                  ),
+            )
+            : h('div', { style: S.empty }, 'Select a trusted device to see its sessions.'),
+        ),
+      )
+    }
+
+    return {
+      inject: ['slots'],
+      apply(ctx) {
+        ctx.slots.inject('sidebar.panellist', () => ctx.slots.register({
+          name: 'sidebar.panellist', id: 'devices', order: 20, label: () => 'Devices',
+        }, Icon))
+        ctx.slots.inject('main', () => ctx.slots.register({
+          name: 'main', key: 'devices',
+        }, DevicesPage))
+      },
+    }
+  },
+})

package/cordis.patch.yml

@@ -0,0 +1,3 @@
+- insert:
+    - id: remote-control
+      name: 'dsh-remote-control-plugin'