@devchitchat/chat 0.0.0

package/pages/public/client/long-press.js

@@ -0,0 +1,59 @@
+/**
+ * long-press.js — fires a callback after a pointer is held still for THRESHOLD_MS.
+ *
+ * Cancels on movement beyond MOVE_TOLERANCE_PX or on pointer-up before threshold.
+ * Returns a cleanup function that removes all listeners.
+ */
+
+const THRESHOLD_MS     = 500
+const MOVE_TOLERANCE_PX = 6
+
+/**
+ * @param {Element} el
+ * @param {(e: TouchEvent|MouseEvent, el: Element) => void} onLongPress
+ * @returns {() => void} cleanup
+ */
+export function addLongPress(el, onLongPress) {
+  let timer  = null
+  let startX = 0
+  let startY = 0
+
+  function start(e) {
+    const pt = e.touches?.[0] ?? e
+    startX = pt.clientX
+    startY = pt.clientY
+    timer = setTimeout(() => {
+      timer = null
+      onLongPress(e, el)
+    }, THRESHOLD_MS)
+  }
+
+  function cancel() {
+    if (timer) { clearTimeout(timer); timer = null }
+  }
+
+  function move(e) {
+    const pt = e.touches?.[0] ?? e
+    const dx = Math.abs(pt.clientX - startX)
+    const dy = Math.abs(pt.clientY - startY)
+    if (dx > MOVE_TOLERANCE_PX || dy > MOVE_TOLERANCE_PX) cancel()
+  }
+
+  el.addEventListener('touchstart',  start,  { passive: true })
+  el.addEventListener('touchmove',   move,   { passive: true })
+  el.addEventListener('touchend',    cancel)
+  el.addEventListener('touchcancel', cancel)
+  el.addEventListener('mousedown',   start)
+  el.addEventListener('mousemove',   move)
+  el.addEventListener('mouseup',     cancel)
+
+  return () => {
+    el.removeEventListener('touchstart',  start)
+    el.removeEventListener('touchmove',   move)
+    el.removeEventListener('touchend',    cancel)
+    el.removeEventListener('touchcancel', cancel)
+    el.removeEventListener('mousedown',   start)
+    el.removeEventListener('mousemove',   move)
+    el.removeEventListener('mouseup',     cancel)
+  }
+}

package/pages/public/client/modal.js

@@ -0,0 +1,50 @@
+/**
+ * modal.js — singleton centered modal for desktop.
+ *
+ * Dismisses on backdrop click or Escape key.
+ */
+
+let backdropEl = null
+let modalEl    = null
+
+function ensureDOM() {
+  if (backdropEl) return
+
+  backdropEl = document.createElement('div')
+  backdropEl.className = 'modal-backdrop'
+  backdropEl.innerHTML = `
+    <div class="modal" role="dialog" aria-modal="true">
+      <div class="modal-header">
+        <span class="modal-title"></span>
+        <button class="modal-close" aria-label="Close">&times;</button>
+      </div>
+      <div class="modal-body"></div>
+    </div>
+  `
+  document.body.appendChild(backdropEl)
+  modalEl = backdropEl.querySelector('.modal')
+
+  backdropEl.addEventListener('click', e => {
+    if (e.target === backdropEl) dismiss()
+  })
+  backdropEl.querySelector('.modal-close').addEventListener('click', dismiss)
+  document.addEventListener('keydown', e => {
+    if (e.key === 'Escape') dismiss()
+  })
+}
+
+/**
+ * @param {{ title: string, build: (body: HTMLElement) => void }} opts
+ */
+export function showModal({ title, build }) {
+  ensureDOM()
+  modalEl.querySelector('.modal-title').textContent = title
+  const body = modalEl.querySelector('.modal-body')
+  body.innerHTML = ''
+  build(body)
+  requestAnimationFrame(() => backdropEl.classList.add('open'))
+}
+
+export function dismiss() {
+  backdropEl?.classList.remove('open')
+}

package/pages/public/client/router.js

@@ -0,0 +1,87 @@
+/**
+ * router.js — client-side SPA navigation for /channels/* links.
+ *
+ * Intercepts link clicks, fetches the new page, morphs only .chat-panel
+ * (data-* attributes + .messages content), then dispatches chatpanel:navigated
+ * so the existing call.js island can re-initialise its chat state without
+ * tearing down WebRTC connections.
+ */
+import { patchSettings } from './settings-sync.js'
+
+const BASE_PATH = window.__BASE_PATH__ ?? ''
+
+let inFlight = false
+
+export function initRouter() {
+  document.addEventListener('click', handleClick)
+  window.addEventListener('popstate', () => navigateTo(location.href, false))
+}
+
+function isChannelUrl(href) {
+  try {
+    const url = new URL(href, location.href)
+    return url.origin === location.origin && url.pathname.startsWith(`${BASE_PATH}/channels/`)
+  } catch { return false }
+}
+
+async function handleClick(e) {
+  if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return
+  const link = e.target.closest('a[href]')
+  if (!link || !isChannelUrl(link.href)) return
+  e.preventDefault()
+  history.pushState({}, '', link.href)
+  await navigateTo(link.href, true)
+}
+
+export async function navigateTo(url, scroll) {
+  if (inFlight) return
+  inFlight = true
+  try {
+    const res = await fetch(url, { headers: { Accept: 'text/html' } })
+    if (!res.ok) { location.href = url; return }
+    const html = await res.text()
+
+    const next = new DOMParser().parseFromString(html, 'text/html')
+    const nextPanel = next.querySelector('.chat-panel')
+    const currPanel = document.querySelector('.chat-panel')
+    if (!nextPanel || !currPanel) { location.href = url; return }
+
+    // 1. Swap data-* attributes so the island can read the new channel's identity
+    for (const { name } of [...currPanel.attributes]) {
+      if (name.startsWith('data-')) currPanel.removeAttribute(name)
+    }
+    for (const { name, value } of [...nextPanel.attributes]) {
+      if (name.startsWith('data-')) currPanel.setAttribute(name, value)
+    }
+
+    // 2. Replace .messages content (seed articles + <template> from new page)
+    const currMessages = currPanel.querySelector('#messages')
+    const nextMessages = nextPanel.querySelector('#messages')
+    if (currMessages && nextMessages) {
+      currMessages.innerHTML = nextMessages.innerHTML
+    }
+
+    // 3. Notify the existing island — it will leave the old channel and join the new one
+    const d = currPanel.dataset
+    document.dispatchEvent(new CustomEvent('chatpanel:navigated', {
+      detail: {
+        channelId:    d.id,
+        name:         d.name,
+        topic:        d.topic ?? '',
+        kind:         d.kind ?? 'text',
+        seedSeq:      parseInt(d.seedSeq ?? '0', 10),
+        seedFirstSeq: parseInt(d.seedFirstSeq ?? '0', 10),
+        seedHasMore:  d.seedHasMore === 'true',
+      }
+    }))
+
+    // 4. Persist the new channel so PWA restores here on next launch
+    if (d.id) patchSettings({ last_channel_id: d.id, mobile_chat_open: true })
+
+    if (scroll && currMessages) currMessages.scrollTop = currMessages.scrollHeight
+  } catch {
+    location.href = url
+  } finally {
+    inFlight = false
+  }
+}

package/pages/public/client/rtc-peer-manager.js

@@ -0,0 +1,344 @@
+/**
+ * RtcPeerManager — WebRTC peer connection lifecycle.
+ *
+ * Manages RTCPeerConnection instances, negotiation serialisation,
+ * transceiver slot management, ICE candidate queuing, and inbound
+ * stream resolution. Completely decoupled from WebSocket message
+ * types, UI, and call state signals — all I/O is via callbacks.
+ *
+ * Patterns ported from v1 RtcCallService (significant debugging invested):
+ *   - negotiationInFlight / negotiationQueued per-peer serialisation
+ *   - Pre-allocated transceiver slots (1 audio + 2 video: cam + screen)
+ *   - replaceTrack() + direction toggle rather than addTrack() for renegotiation
+ *   - waitForStableSignaling() before every offer
+ *   - ICE candidate queue (pendingIce) until remote description is set
+ *   - New joiner is offerer toward all existing peers; existing peers are answerers
+ *
+ * @param {object} options
+ * @param {RTCIceServer[]}             options.iceServers
+ * @param {() => { audio, video, screen }} options.getLocalStreams  — reads current local MediaStreams from caller
+ * @param {object}                     options.handlers
+ * @param {(peerId, sdp) => void}      options.handlers.onOffer         — send rtc.offer via WS
+ * @param {(peerId, sdp) => void}      options.handlers.onAnswer        — send rtc.answer via WS
+ * @param {(peerId, candidate) => void} options.handlers.onIceCandidate — send rtc.ice via WS
+ * @param {(peerId, tileId, stream, label) => void} options.handlers.onTrack — render a remote video tile
+ * @param {(peerId, stream) => void}   options.handlers.onAudio         — ensure a remote audio element
+ * @param {(peerId) => void}           options.handlers.onPeerClosed    — remove tiles + audio for this peer
+ */
+export class RtcPeerManager {
+  #peerActors    = new Map()  // peerId → { pc }
+  #displayNames  = new Map()  // peerId → display_name string
+  #remoteStreams = new Map()  // peerId → Map<key, MediaStream>
+  #pendingIce    = new Map()  // peerId → RTCIceCandidate[]
+  #inFlight      = new Set()  // peerIds currently negotiating
+  #queued        = new Set()  // peerIds with a queued renegotiation
+
+  #iceServers
+  #getLocalStreams
+  #handlers
+
+  constructor({ iceServers, getLocalStreams, handlers }) {
+    this.#iceServers      = iceServers ?? [{ urls: 'stun:stun.l.google.com:19302' }]
+    this.#getLocalStreams = getLocalStreams
+    this.#handlers        = handlers
+  }
+
+  setIceServers(servers) {
+    this.#iceServers = servers
+  }
+
+  setDisplayName(peerId, name) {
+    if (name) this.#displayNames.set(peerId, name)
+  }
+
+  /** Iterate connected peer IDs — used by caller to renegotiate after local stream changes. */
+  peerIds() {
+    return this.#peerActors.keys()
+  }
+
+  /**
+   * Ensure a peer actor exists, creating a new RTCPeerConnection if needed.
+   * Safe to call for both offerer and answerer paths — does NOT pre-add
+   * transceiver slots (that only happens in the offerer negotiation path).
+   */
+  ensurePeer(peerId) {
+    if (this.#peerActors.has(peerId)) return this.#peerActors.get(peerId)
+
+    const pc = new RTCPeerConnection({ iceServers: this.#iceServers })
+
+    pc.onicecandidate = ({ candidate }) => {
+      if (candidate) this.#handlers.onIceCandidate(peerId, candidate)
+    }
+
+    pc.ontrack = (event) => {
+      // If our transceiver is sendonly the remote peer is recvonly — they are
+      // not sending into this slot (e.g. iPhone has no screen share).
+      // Skip to avoid rendering an empty video element.
+      if (event.transceiver?.direction === 'sendonly') return
+
+      const stream = this.#getOrCreateInboundStream(event, peerId)
+      if (!stream) return
+
+      // Audio-only stream → just ensure an <audio> element exists
+      if (stream.getVideoTracks().length === 0) {
+        this.#handlers.onAudio(peerId, stream)
+        return
+      }
+
+      // Video stream → render tile + ensure audio (video stream may carry audio track)
+      const tileId = `${peerId}-${event.transceiver?.mid ?? 'cam'}`
+      const label  = this.#displayNames.get(peerId) ?? peerId
+      this.#handlers.onTrack(peerId, tileId, stream, label)
+      this.#handlers.onAudio(peerId, stream)
+    }
+
+    pc.onconnectionstatechange = () => {
+      if (['failed', 'closed'].includes(pc.connectionState)) {
+        this.closePeer(peerId)
+      }
+    }
+
+    const actor = { pc }
+    this.#peerActors.set(peerId, actor)
+    return actor
+  }
+
+  /** Close and remove a peer, then call onPeerClosed so caller can clean up UI. */
+  closePeer(peerId) {
+    const actor = this.#peerActors.get(peerId)
+    if (actor) { actor.pc.close(); this.#peerActors.delete(peerId) }
+    this.#remoteStreams.delete(peerId)
+    this.#pendingIce.delete(peerId)
+    this.#inFlight.delete(peerId)
+    this.#queued.delete(peerId)
+    this.#displayNames.delete(peerId)
+    this.#handlers.onPeerClosed(peerId)
+  }
+
+  /**
+   * Queue a negotiation for peerId, serialising concurrent attempts.
+   * Safe to call multiple times — excess calls queue behind the in-flight one.
+   */
+  async negotiate(peerId) {
+    if (this.#inFlight.has(peerId)) {
+      this.#queued.add(peerId)
+      return
+    }
+    this.#inFlight.add(peerId)
+    try {
+      do {
+        this.#queued.delete(peerId)
+        await this.#negotiateOnce(peerId)
+      } while (this.#queued.has(peerId))
+    } finally {
+      this.#inFlight.delete(peerId)
+    }
+  }
+
+  /**
+   * Handle an incoming offer from a remote peer: set remote description,
+   * drain queued ICE, attach local tracks, create and send an answer.
+   */
+  async handleRemoteOffer(peerId, callId, sdp) {
+    const actor = this.ensurePeer(peerId)
+    const pc    = actor.pc
+
+    await pc.setRemoteDescription({ type: 'offer', sdp })
+    await this.#drainIce(peerId, pc)
+    await this.#attachLocalTracks(pc)
+
+    const answer = await pc.createAnswer()
+    await pc.setLocalDescription(answer)
+    this.#handlers.onAnswer(peerId, answer.sdp)
+  }
+
+  /**
+   * Handle an incoming answer from a remote peer: set remote description
+   * and drain any queued ICE candidates.
+   */
+  async handleRemoteAnswer(peerId, sdp) {
+    const actor = this.#peerActors.get(peerId)
+    if (!actor) return
+    await actor.pc.setRemoteDescription({ type: 'answer', sdp })
+    await this.#drainIce(peerId, actor.pc)
+  }
+
+  /**
+   * Handle an incoming ICE candidate. Queues it if the remote description
+   * has not been set yet (race between offer/answer and ICE trickle).
+   */
+  async handleIceCandidate(peerId, candidate) {
+    if (!candidate) return
+    const actor = this.#peerActors.get(peerId)
+    if (!actor || !actor.pc.remoteDescription) {
+      if (!this.#pendingIce.has(peerId)) this.#pendingIce.set(peerId, [])
+      this.#pendingIce.get(peerId).push(candidate)
+      return
+    }
+    await actor.pc.addIceCandidate(candidate)
+  }
+
+  /**
+   * Replace a single track slot in all active peer connections without
+   * triggering a full renegotiation (used for device switching).
+   * @param {'audio'|'camera'|'screen'} slotName
+   * @param {MediaStreamTrack|null} track
+   */
+  async replaceTrack(slotName, track) {
+    for (const { pc } of this.#peerActors.values()) {
+      const slots = this.#getTransceiverSlots(pc)
+      const transceiver = slots[slotName]
+      if (transceiver?.sender) await transceiver.sender.replaceTrack(track)
+    }
+  }
+
+  /** Close all peer connections and clear all state. */
+  teardown() {
+    for (const [, actor] of this.#peerActors) actor.pc.close()
+    this.#peerActors.clear()
+    this.#displayNames.clear()
+    this.#remoteStreams.clear()
+    this.#pendingIce.clear()
+    this.#inFlight.clear()
+    this.#queued.clear()
+  }
+
+  // ── Private ──────────────────────────────────────────────────────────────────
+
+  async #negotiateOnce(peerId) {
+    const actor = this.#peerActors.get(peerId)
+    if (!actor) return
+    const pc = actor.pc
+
+    const stable = await this.#waitForStable(pc)
+    if (!stable) return  // timed out — don't attempt offer in bad state
+
+    this.#ensureTransceiverSlots(pc)
+    await this.#attachLocalTracks(pc)
+
+    const offer = await pc.createOffer()
+    await pc.setLocalDescription(offer)
+    this.#handlers.onOffer(peerId, offer.sdp)
+  }
+
+  async #waitForStable(pc, timeoutMs = 3000) {
+    if (!pc || pc.signalingState === 'stable') return true
+    return new Promise(resolve => {
+      const timer   = setTimeout(() => { cleanup(); resolve(false) }, timeoutMs)
+      const handler = () => {
+        if (pc.signalingState !== 'stable') return
+        cleanup(); resolve(true)
+      }
+      const cleanup = () => { clearTimeout(timer); pc.removeEventListener('signalingstatechange', handler) }
+      pc.addEventListener('signalingstatechange', handler)
+    })
+  }
+
+  // ── Transceiver slot management ────────────────────────────────────────────
+  // Pre-allocate 1 audio + 2 video transceivers (camera slot + screen slot).
+  // Using replaceTrack() + direction toggle avoids creating new m= sections
+  // on every track change, which prevents SDP renegotiation races.
+
+  #ensureTransceiverSlots(pc) {
+    // Ensure at least 1 audio transceiver
+    while (pc.getTransceivers().filter(t => {
+      const k = t.receiver?.track?.kind ?? t.sender?.track?.kind
+      return k === 'audio'
+    }).length < 1) {
+      pc.addTransceiver('audio', { direction: 'recvonly' })
+    }
+    // Ensure at least 2 video transceivers (camera + screen)
+    const videoCount = pc.getTransceivers().filter(t => {
+      const k = t.receiver?.track?.kind ?? t.sender?.track?.kind
+      return k === 'video'
+    }).length
+    let added = videoCount
+    while (added < 2) {
+      pc.addTransceiver('video', { direction: 'recvonly' })
+      added++
+    }
+  }
+
+  #getTransceiverSlots(pc) {
+    const all        = pc.getTransceivers()
+    const audioSlot  = all.find(t => (t.receiver?.track?.kind ?? t.sender?.track?.kind) === 'audio') ??
+                       all.find(t => !t.receiver?.track && !t.sender?.track) ?? null
+    const videoSlots = all.filter(t => (t.receiver?.track?.kind ?? t.sender?.track?.kind) === 'video')
+    const byMid      = all.filter(t => {
+      const k = t.receiver?.track?.kind ?? t.sender?.track?.kind
+      return k === 'video' || (!t.receiver?.track && !t.sender?.track)
+    })
+    return {
+      audio:  audioSlot,
+      camera: videoSlots[0] ?? byMid[0] ?? null,
+      screen: videoSlots[1] ?? byMid[1] ?? null,
+    }
+  }
+
+  async #attachLocalTracks(pc) {
+    this.#ensureTransceiverSlots(pc)
+    const slots = this.#getTransceiverSlots(pc)
+    const { audio, video, screen } = this.#getLocalStreams()
+    await Promise.all([
+      this.#setTransceiverTrack(slots.audio,  audio?.getAudioTracks()[0]  ?? null),
+      this.#setTransceiverTrack(slots.camera, video?.getVideoTracks()[0]  ?? null),
+      this.#setTransceiverTrack(slots.screen, screen?.getVideoTracks()[0] ?? null),
+    ])
+  }
+
+  async #setTransceiverTrack(transceiver, track) {
+    if (!transceiver?.sender) return
+    if (transceiver.sender.track?.id === track?.id) return
+    if (track) {
+      if (transceiver.direction === 'recvonly' || transceiver.direction === 'inactive') {
+        transceiver.direction = 'sendrecv'
+      }
+      await transceiver.sender.replaceTrack(track)
+    } else {
+      await transceiver.sender.replaceTrack(null)
+      if (transceiver.direction === 'sendrecv' || transceiver.direction === 'sendonly') {
+        transceiver.direction = 'recvonly'
+      }
+    }
+  }
+
+  // ── Inbound stream resolution (v1 RtcInboundStream pattern) ────────────────
+  // Track events don't always carry an associated stream in all browsers.
+  // Index by transceiver mid first, then stream id, synthesise if needed.
+
+  #getOrCreateInboundStream(event, peerId) {
+    if (!this.#remoteStreams.has(peerId)) this.#remoteStreams.set(peerId, new Map())
+    const peerStreams = this.#remoteStreams.get(peerId)
+
+    const signaledStream = event.streams?.[0]
+    if (signaledStream) {
+      peerStreams.set(`stream:${signaledStream.id}`, signaledStream)
+      const mid = event.transceiver?.mid
+      if (mid != null) peerStreams.set(`mid:${mid}`, signaledStream)
+      return signaledStream
+    }
+
+    if (!event.track) return null
+    const mid = event.transceiver?.mid
+    const key = mid != null ? `mid:${mid}` : `track:${event.track.kind}:${event.track.id}`
+
+    let stream = peerStreams.get(key) ??
+      [...peerStreams.values()].find(s => s.getTracks().some(t => t.id === event.track.id)) ??
+      null
+    if (!stream) { stream = new MediaStream(); peerStreams.set(key, stream) }
+
+    // Replace any stale track of the same kind
+    stream.getTracks()
+      .filter(t => t.kind === event.track.kind && t.id !== event.track.id)
+      .forEach(t => { try { stream.removeTrack(t) } catch { /* ignore */ } })
+
+    if (!stream.getTracks().some(t => t.id === event.track.id)) stream.addTrack(event.track)
+    return stream
+  }
+
+  async #drainIce(peerId, pc) {
+    const pending = this.#pendingIce.get(peerId) ?? []
+    for (const c of pending) await pc.addIceCandidate(c)
+    this.#pendingIce.delete(peerId)
+  }
+}

package/pages/public/client/settings-sync.js

@@ -0,0 +1,76 @@
+/**
+ * settings-sync.js — client-side settings: localStorage + background server sync.
+ *
+ * This module owns all localStorage reads/writes and server sync. Islands import
+ * from here — they never touch localStorage or the API directly.
+ *
+ * Storage shape: { settings: { last_channel_id, mobile_chat_open }, updated_at: number }
+ */
+
+const STORAGE_KEY = 'devchitchat_settings'
+const BASE_PATH = window.__BASE_PATH__ ?? ''
+
+function readLocal() {
+  try {
+    return JSON.parse(localStorage.getItem(STORAGE_KEY) ?? '{}')
+  } catch {
+    return {}
+  }
+}
+
+function writeLocal(data) {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(data))
+}
+
+// Returns current settings object (instant, synchronous)
+export function getSettings() {
+  return readLocal().settings ?? {}
+}
+
+// Writes one or more keys, updates local timestamp, queues server sync
+export function patchSettings(patch) {
+  const local = readLocal()
+  const updated_at = Math.floor(Date.now() / 1000)
+  const settings = { ...(local.settings ?? {}), ...patch }
+  writeLocal({ settings, updated_at })
+  syncToServer(settings, updated_at) // fire-and-forget
+}
+
+// Push local state to server (fire-and-forget)
+async function syncToServer(settings, updated_at) {
+  try {
+    await fetch(`${BASE_PATH}/api/user/settings`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ settings, updated_at }),
+    })
+  } catch {
+    // Network failure — local state is still correct, server syncs on next load
+  }
+}
+
+// Pull from server and reconcile. Call once on page load.
+// Returns remote settings if the server had newer data, null otherwise.
+export async function syncFromServer() {
+  try {
+    const res = await fetch(`${BASE_PATH}/api/user/settings`)
+    if (!res.ok) return null
+
+    const remote = await res.json() // { settings, updated_at }
+    const local = readLocal()
+    const localUpdatedAt = local.updated_at ?? 0
+
+    if (remote.updated_at > localUpdatedAt) {
+      // Server is newer — overwrite local
+      writeLocal({ settings: remote.settings, updated_at: remote.updated_at })
+      return remote.settings
+    } else if (localUpdatedAt > remote.updated_at) {
+      // Local is newer — push to server
+      syncToServer(local.settings, localUpdatedAt)
+    }
+    // Equal timestamps — no action needed
+  } catch {
+    // Network failure — proceed with local state
+  }
+  return null
+}