aiturk-hermes-ide/apps/desktop/electron/mobile-host-ui.mjs

// "Telefon bağlantısı" window UI. Talks to electron/mobile-host.mjs over the
// `mobileHost` bridge (mobile-preload.cjs); all logic lives in the main process.
/* global window, document */
import { drawQr } from './mobile/qr.mjs'

const TEXT = {
  tr: {
    eyebrow: 'AITURK · BİLGİSAYAR', title: 'Telefon bağlantısı',
    intro: 'Telefonunuz internetin olduğu her yerden bu bilgisayardaki IDE’ye bağlanır; aynı Wi-Fi gerekmez. Bağlantı uçtan uca şifrelidir. Bilgisayar açık ve AITURK IDE çalışıyor olmalı.',
    toggle: 'Telefon bağlantısını kullan',
    remote: 'IDE şu an uzak bir ağ geçidine bağlı. Telefon bağlantısı yalnız yerel IDE bağlantısıyla çalışır; Ayarlar’dan yerel bağlantıyı seçin.',
    relayLabel: 'İnternet üzerinden bağlantı', lanLabel: 'Aynı Wi-Fi’da doğrudan bağlantı',
    relay: { connected: 'hazır', connecting: 'bağlanıyor…', failed: 'kurulamadı (yeniden denenecek)', idle: 'beklemede (telefon eklenince bağlanır)',
      replaced: 'başka bir AITURK IDE aynı kaydı kullanıyor (30 sn sonra yeniden denenecek)', busy: 'servis dolu (yeniden denenecek)' },
    lanOpen: port => `açık (bağlantı noktası ${port})`, lanOff: 'kapalı', lanIdle: 'izin verildi (telefon eklenince açılır)',
    lanNoRule: 'Windows Güvenlik Duvarı izni yok', lanDenied: 'kapalı (Windows izin penceresi reddedildi)', lanFailed: 'kapalı (Güvenlik Duvarı kuralı eklenemedi)',
    lanAllow: 'Aynı Wi-Fi’da doğrudan bağlantıya da izin ver', allow: 'İzin ver', lanDisallow: 'Doğrudan bağlantıyı kapat',
    reissued: 'Röle kimliği yenilendi. Daha önce eklenen telefonları yeniden eşleştirin: telefonda bu bilgisayarı kaldırıp “Telefon ekle” ile yeniden bağlayın.',
    addPhone: 'Telefon ekle', cancel: 'Vazgeç',
    scan: 'Telefonda AITURK Mobil → “Bilgisayara bağlan” → bu QR kodunu okutun.',
    orCode: 'ya da telefonda şu kodu yazın:',
    codePending: 'Kodla bağlanma hazırlanıyor…', codeReady: 'Kodla bağlanma hazır.',
    codeUnavailable: 'Kodla bağlanma şu an kullanılamıyor; QR kodunu okutun.', codeRetry: 'Yeniden dene',
    securityCode: code => `Güvenlik kodu: ${code} (telefonda da aynı kod görünmeli)`,
    anyNetwork: 'Telefon ve bilgisayar aynı ağda olmak zorunda değil.', sameWifi: 'Telefon ve bilgisayar aynı Wi-Fi ağında olmalı.',
    countdown: (m, s) => `Kod ${m}:${s} sonra geçersiz olur`, expired: 'Kodun süresi doldu. Yeniden “Telefon ekle” seçin.',
    devices: 'Bağlı telefonlar', noDevices: 'Henüz bağlı telefon yok.',
    added: 'Eklenme', lastSeen: 'Son görülme', online: 'şu an bağlı', remove: 'Kaldır',
    removed: name => `${name} kaldırıldı.`, paired: name => `${name} bağlandı.`,
    removeRule: 'Güvenlik Duvarı kuralını kaldır', ruleRemoved: 'Güvenlik Duvarı kuralı kaldırıldı.',
    renew: 'Röle kimliğini yenile', renewed: 'Röle kimliği yenilendi. Telefonları yeniden eşleştirin.',
    renewConfirm: 'Röle kimliği yenilenirse bağlı telefonların hepsi kaldırılır ve yeniden eşleştirilmeleri gerekir. Devam edilsin mi?',
    errors: {
      remote_mode: 'IDE uzak ağ geçidine bağlıyken telefon bağlantısı açılamaz.',
      vault_unavailable: 'Windows güvenli anahtar kasası kullanılamıyor; telefon bağlantısı açılamadı.',
      not_enabled: 'Önce telefon bağlantısını açın.',
      no_lan_address: 'Bu bilgisayar bir yerel ağa (Wi-Fi ya da kablo) bağlı görünmüyor ve internet üzerinden bağlantı da kurulamadı.',
      relay_unavailable: 'İnternete ulaşılamıyor, yeniden deneyin.',
      port_unavailable: 'Boş bağlantı noktası bulunamadı (47321–47340 kullanımda).',
      failed: 'İşlem tamamlanamadı. Yeniden deneyin.',
    },
  },
  en: {
    eyebrow: 'AITURK · COMPUTER', title: 'Phone connection',
    intro: 'Your phone connects to the IDE on this computer from anywhere with internet access; the same Wi-Fi is not needed. The connection is end-to-end encrypted. The computer must be on and AITURK IDE must be running.',
    toggle: 'Use phone connection',
    remote: 'The IDE is connected to a remote gateway. Phone connection only works with the local IDE connection; choose the local connection in Settings.',
    relayLabel: 'Connection over the internet', lanLabel: 'Direct connection on the same Wi-Fi',
    relay: { connected: 'ready', connecting: 'connecting…', failed: 'could not be set up (will retry)', idle: 'waiting (connects once a phone is added)',
      replaced: 'another AITURK IDE is using the same registration (will retry in 30 s)', busy: 'service is full (will retry)' },
    lanOpen: port => `on (port ${port})`, lanOff: 'off', lanIdle: 'allowed (opens once a phone is added)',
    lanNoRule: 'no Windows Firewall permission', lanDenied: 'off (the Windows permission prompt was declined)', lanFailed: 'off (the Firewall rule could not be added)',
    lanAllow: 'Also allow a direct connection on the same Wi-Fi', allow: 'Allow', lanDisallow: 'Turn direct connection off',
    reissued: 'The relay identity was renewed. Pair the phones added earlier again: remove this computer on the phone and connect with “Add a phone”.',
    addPhone: 'Add a phone', cancel: 'Cancel',
    scan: 'On the phone: AITURK Mobile → “Connect to computer” → scan this QR code.',
    orCode: 'or type this code on the phone:',
    codePending: 'Preparing code sign-in…', codeReady: 'Connecting with the code is ready.',
    codeUnavailable: 'Connecting with the code is unavailable right now; scan the QR code.', codeRetry: 'Try again',
    securityCode: code => `Security code: ${code} (the phone must show the same code)`,
    anyNetwork: 'The phone and the computer do not have to be on the same network.', sameWifi: 'The phone and the computer must be on the same Wi-Fi network.',
    countdown: (m, s) => `The code expires in ${m}:${s}`, expired: 'The code expired. Choose “Add a phone” again.',
    devices: 'Connected phones', noDevices: 'No phone is connected yet.',
    added: 'Added', lastSeen: 'Last seen', online: 'connected now', remove: 'Remove',
    removed: name => `${name} was removed.`, paired: name => `${name} connected.`,
    removeRule: 'Remove the Firewall rule', ruleRemoved: 'The Firewall rule was removed.',
    renew: 'Renew the relay identity', renewed: 'The relay identity was renewed. Pair the phones again.',
    renewConfirm: 'Renewing the relay identity removes every connected phone; they must be paired again. Continue?',
    errors: {
      remote_mode: 'Phone connection cannot be turned on while the IDE uses a remote gateway.',
      vault_unavailable: 'The Windows secure key store is unavailable; phone connection could not be turned on.',
      not_enabled: 'Turn phone connection on first.',
      no_lan_address: 'This computer does not seem to be on a local network (Wi-Fi or cable) and the internet connection could not be set up either.',
      relay_unavailable: 'The internet cannot be reached, try again.',
      port_unavailable: 'No free port was found (47321–47340 are in use).',
      failed: 'That did not work. Try again.',
    },
  },
}
const lang = (navigator.language || '').toLowerCase().startsWith('en') ? 'en' : 'tr'
const t = TEXT[lang], host = window.mobileHost, $ = id => document.getElementById(id)
const when = value => new Date(value).toLocaleString(lang === 'tr' ? 'tr-TR' : 'en-GB', { dateStyle: 'medium', timeStyle: 'short' })
document.documentElement.lang = lang; document.title = `AITURK · ${t.title}`
for (const [id, key] of [['t-eyebrow', 'eyebrow'], ['t-title', 'title'], ['t-intro', 'intro'], ['t-remote', 'remote'], ['t-scan', 'scan'],
  ['t-or-code', 'orCode'], ['t-devices', 'devices'], ['devices-empty', 'noDevices'], ['t-enabled', 'toggle'], ['t-relay-label', 'relayLabel'],
  ['t-lan-label', 'lanLabel'], ['t-reissued', 'reissued'], ['lan-disallow', 'lanDisallow'], ['relay-renew', 'renew'],
  ['pair-begin', 'addPhone'], ['pair-cancel', 'cancel'], ['pair-republish', 'codeRetry'], ['firewall-remove', 'removeRule']]) $(id).textContent = t[key]

let current = null, drawnQr = '', busy = false
function notice(text) { $('notice').textContent = text || ''; $('notice').hidden = !text }
const errorText = error => t.errors[/aiturk-mobile:([a-z_]+)/.exec(String(error?.message))?.[1]] || t.errors.failed

function tick() {
  const pairing = current?.pairing
  if (!pairing) return
  const left = Math.max(0, Math.ceil((pairing.expiresAt - Date.now()) / 1000))
  $('pair-countdown').textContent = t.countdown(Math.floor(left / 60), String(left % 60).padStart(2, '0'))
  if (left === 0) { notice(t.expired); void refresh() }
}

function render(state) {
  current = state
  $('enabled').checked = state.enabled
  $('remote-box').hidden = !state.remote
  // Status rows say what is REALLY up right now: the relay socket, the LAN socket, the Windows rule as queried.
  const relay = state.relay || { status: 'off' }, lan = state.lan || { direct: false, listening: false, port: null, firewall: 'unknown' }
  $('status-box').hidden = !state.enabled || state.remote
  const relayKind = relay.status === 'failed' && t.relay[relay.code] ? relay.code : relay.status === 'off' ? 'idle' : relay.status
  $('relay-status').textContent = t.relay[relayKind]; $('relay-status').dataset.state = relay.status
  $('reissued-box').hidden = !(state.enabled && relay.reissued)
  const noRule = lan.direct && lan.firewall === 'missing'
  $('lan-status').textContent = lan.listening ? t.lanOpen(lan.port) : noRule ? t.lanNoRule : lan.direct ? t.lanIdle
    : state.firewall === 'denied' ? t.lanDenied : state.firewall === 'failed' ? t.lanFailed : t.lanOff
  $('lan-status').dataset.state = lan.listening ? 'connected' : noRule ? 'failed' : 'off'
  $('lan-allow').hidden = lan.direct && !noRule; $('lan-allow').textContent = noRule ? t.allow : t.lanAllow
  $('lan-disallow').hidden = !lan.direct
  $('pair-section').hidden = !state.enabled || state.remote
  $('pair-begin').hidden = Boolean(state.pairing); $('pair-live').hidden = !state.pairing
  if (state.pairing) {
    if (drawnQr !== state.pairing.qr) { drawQr($('pair-qr'), state.pairing.qr); drawnQr = state.pairing.qr }
    $('pair-qr').setAttribute('aria-label', t.scan)
    $('pair-code').textContent = `${state.pairing.code.slice(0, 4)}-${state.pairing.code.slice(4)}`
    $('pair-code-path').textContent = { pending: t.codePending, ready: t.codeReady, unavailable: t.codeUnavailable }[state.pairing.codePath]
    // Offered only once every background try is over; while they run the line above says "hazırlanıyor…".
    $('pair-republish').hidden = state.pairing.codePath !== 'unavailable'
    $('pair-security').textContent = state.pairing.securityCode ? t.securityCode(state.pairing.securityCode) : ''
    $('t-same-wifi').textContent = /[?&]r=/.test(state.pairing.qr) ? t.anyNetwork : t.sameWifi
    tick()
  } else { drawnQr = ''; $('pair-code').textContent = '' }
  $('devices-section').hidden = !state.enabled && state.devices.length === 0
  $('devices-empty').hidden = state.devices.length > 0
  $('devices').replaceChildren(...state.devices.map(device => {
    const row = document.createElement('div'), label = document.createElement('div'), name = document.createElement('strong')
    const added = document.createElement('small'), seen = document.createElement('small'), button = document.createElement('button')
    row.className = 'device'; name.textContent = device.name
    added.textContent = `${t.added}: ${when(device.createdAt)}`
    seen.textContent = device.live > 0 ? t.online : `${t.lastSeen}: ${when(device.lastSeenAt)}`
    button.textContent = t.remove; button.className = 'danger'
    button.onclick = () => run(async () => { render(await host.call('device.revoke', { deviceId: device.id })); notice(t.removed(device.name)) })
    label.append(name, added, seen); row.append(label, button)
    return row
  }))
  $('footer').hidden = !state.enabled || state.remote
  $('relay-renew').hidden = !relay.ready
  $('firewall-remove').hidden = lan.firewall !== 'allowed' || state.firewall === 'not-needed'
}

async function run(work) {
  if (busy) return
  busy = true; document.body.setAttribute('aria-busy', 'true')
  for (const button of document.querySelectorAll('button,input')) button.disabled = true
  try { await work() } catch (error) { notice(errorText(error)); await refresh() }
  finally { busy = false; document.body.removeAttribute('aria-busy'); for (const button of document.querySelectorAll('button,input')) button.disabled = false }
}
async function refresh() { try { render(await host.call('state')) } catch (error) { notice(errorText(error)) } }

$('enabled').onchange = () => { const on = $('enabled').checked; void run(async () => { notice(''); render(await host.call(on ? 'enable' : 'disable')) }) }
$('pair-begin').onclick = () => run(async () => { notice(''); render(await host.call('pair.begin')) })
$('pair-cancel').onclick = () => run(async () => { render(await host.call('pair.cancel')) })
$('pair-republish').onclick = () => run(async () => { render(await host.call('pair.republish')) })
$('lan-allow').onclick = () => run(async () => { notice(''); render(await host.call('lan.allow')) })
$('lan-disallow').onclick = () => run(async () => { notice(''); render(await host.call('lan.disallow')) })
$('relay-renew').onclick = () => { if (window.confirm(t.renewConfirm)) void run(async () => { render(await host.call('relay.renew')); notice(t.renewed) }) }
$('firewall-remove').onclick = () => run(async () => { render(await host.call('firewall.remove')); notice(t.ruleRemoved) })
host.onEvent(event => { if (!event?.state) return; render(event.state); if (event.type === 'paired') notice(t.paired(event.name)) })
setInterval(tick, 1000)
// "Last seen" and the live marker change without an event; keep the list fresh while the window is open.
setInterval(() => { if (!busy && current?.enabled) void refresh() }, 15000)
void refresh()