- (null)
const statusInitialized = ref(false)
const statusError = ref('')
-const statusLoading = ref(false)
const statusRequestActive = ref(false)
-const copiedToken = ref(false)
const manualTokenInput = ref('')
const manualTokenError = ref('')
-const successBlastVisible = ref(false)
-const successBlastKey = ref(0)
const autoConnectAttemptKey = ref('')
+const autoCloseFailed = ref(false)
// Log panel state
interface LogEntry {
@@ -453,15 +292,7 @@ const token = computed(() => {
})
const hasToken = computed(() => token.value.length >= 6)
-const hasQueryToken = computed(() => {
- const value = route.query.token
- if (Array.isArray(value)) {
- return Boolean(value[0])
- }
- return typeof value === 'string' && value.trim().length > 0
-})
-const manualTokenRemaining = computed(() => Math.max(0, 6 - manualTokenInput.value.length))
-const manualTokenReady = computed(() => manualTokenRemaining.value === 0)
+const manualTokenReady = computed(() => manualTokenInput.value.length === 6)
const loginTarget = computed(() => `/login?redirect=${encodeURIComponent(route.fullPath || '/bridge')}`)
const authDisplayName = computed(() => {
@@ -476,7 +307,6 @@ const isLinkedToAuthenticatedUser = computed(() => {
}
return connectionStatus.value.user?.id === user.value?.id
})
-const tokenLinkedWithoutAuth = computed(() => Boolean(connectionStatus.value?.connected && !hasAuthenticatedUser.value))
const tokenLinkedToOtherUser = computed(() => {
if (!connectionStatus.value?.connected || !hasAuthenticatedUser.value) {
return false
@@ -484,46 +314,12 @@ const tokenLinkedToOtherUser = computed(() => {
return connectionStatus.value.user?.id !== user.value?.id
})
-const connectionLabel = computed(() => {
- if (!hasToken.value) {
- return 'Pairing code missing'
- }
- if (!connectionStatus.value?.connected) {
- return 'Waiting for confirmation'
- }
- if (tokenLinkedWithoutAuth.value) {
- return 'Code already linked'
- }
- if (tokenLinkedToOtherUser.value) {
- return 'Linked to a different account'
- }
- const name = connectionStatus.value.user?.name || connectionStatus.value.user?.email
- return name ? `Linked as ${name}` : 'Linked successfully'
-})
-
-const formattedConnectedAt = computed(() => formatTimestamp(connectionStatus.value?.connectedAt ?? null))
-const successBannerVisible = computed(() => hasAuthenticatedUser.value && (connectSuccess.value || isLinkedToAuthenticatedUser.value))
const alreadyLinked = computed(() => isLinkedToAuthenticatedUser.value)
-const successSparks = Array.from({ length: 14 }, (_unused, index) => index)
function sanitizePairingCode(input: string) {
return input.toUpperCase().replace(/[^A-Z0-9]/g, '').slice(0, 6)
}
-let successBlastTimer: ReturnType | null = null
-
-function triggerSuccessBlast() {
- successBlastKey.value += 1
- successBlastVisible.value = true
- if (successBlastTimer) {
- clearTimeout(successBlastTimer)
- }
- successBlastTimer = setTimeout(() => {
- successBlastVisible.value = false
- successBlastTimer = null
- }, 2200)
-}
-
function onManualTokenInput() {
manualTokenInput.value = sanitizePairingCode(manualTokenInput.value)
if (manualTokenError.value && manualTokenReady.value) {
@@ -560,20 +356,6 @@ async function clearPairingCode() {
await router.replace({ query })
}
-function formatTimestamp(value: string | null) {
- if (!value) {
- return '—'
- }
- const parsed = new Date(value)
- if (Number.isNaN(parsed.getTime())) {
- return '—'
- }
- return new Intl.DateTimeFormat('en-GB', {
- dateStyle: 'short',
- timeStyle: 'medium',
- }).format(parsed)
-}
-
async function connectBridge() {
if (!hasToken.value || !accessToken.value || !hasAuthenticatedUser.value) {
return
@@ -665,9 +447,6 @@ async function fetchStatus(force = false) {
}
statusRequestActive.value = true
- if (force || !statusInitialized.value) {
- statusLoading.value = true
- }
try {
const response = await $fetch('/api/bridge/me', {
@@ -693,23 +472,21 @@ async function fetchStatus(force = false) {
'We could not refresh the status.'
} finally {
statusRequestActive.value = false
- statusLoading.value = false
}
}
-async function copyToken() {
- if (!hasToken.value) return
- if (typeof navigator === 'undefined' || !navigator.clipboard) return
-
+function closeWindow() {
try {
- await navigator.clipboard.writeText(token.value)
- copiedToken.value = true
- setTimeout(() => {
- copiedToken.value = false
- }, 1800)
+ window.close()
} catch {
- // Ignore clipboard errors.
+ autoCloseFailed.value = true
}
+ // window.close() is a no-op for tabs the script didn't open — detect that.
+ setTimeout(() => {
+ if (!window.closed) {
+ autoCloseFailed.value = true
+ }
+ }, 600)
}
function formatLogTime(ts: number) {
@@ -807,6 +584,8 @@ function startPolling() {
}, 5000)
}
+let autoCloseTimer: ReturnType | null = null
+
watch(token, () => {
connectError.value = ''
disconnectError.value = ''
@@ -815,12 +594,7 @@ watch(token, () => {
connectionStatus.value = null
statusInitialized.value = false
statusError.value = ''
-
- if (successBlastTimer) {
- clearTimeout(successBlastTimer)
- successBlastTimer = null
- }
- successBlastVisible.value = false
+ autoCloseFailed.value = false
// Reset log state
logEntries.value = []
@@ -853,14 +627,15 @@ watch(
{ immediate: true },
)
-watch(
- () => successBannerVisible.value,
- (visible, wasVisible) => {
- if (visible && !wasVisible) {
- triggerSuccessBlast()
- }
- },
-)
+// Once linked, try to close the tab automatically and stop polling.
+watch(alreadyLinked, (linked) => {
+ if (!linked) return
+ stopPolling()
+ if (autoCloseTimer) clearTimeout(autoCloseTimer)
+ autoCloseTimer = setTimeout(() => {
+ closeWindow()
+ }, 2000)
+})
watch(logPanelOpen, (open) => {
if (open) {
@@ -870,21 +645,20 @@ watch(logPanelOpen, (open) => {
}
})
-
onMounted(() => {
if (!initialized.value) {
auth.fetchUser().catch(() => {})
}
startPolling()
+
})
onBeforeUnmount(() => {
stopPolling()
stopLogPolling()
-
- if (successBlastTimer) {
- clearTimeout(successBlastTimer)
- successBlastTimer = null
+ if (autoCloseTimer) {
+ clearTimeout(autoCloseTimer)
+ autoCloseTimer = null
}
})
@@ -896,9 +670,9 @@ onBeforeUnmount(() => {
overflow: hidden;
color: #fff;
background:
- radial-gradient(130% 80% at 14% -8%, rgba(22, 187, 215, 0.18), transparent 65%),
- radial-gradient(110% 72% at 86% -12%, rgba(70, 98, 255, 0.22), transparent 70%),
- linear-gradient(180deg, #070d1d 0%, #070b1a 48%, #050816 100%);
+ radial-gradient(120% 70% at 18% -10%, rgba(22, 187, 215, 0.16), transparent 60%),
+ radial-gradient(110% 65% at 84% -12%, rgba(70, 98, 255, 0.18), transparent 64%),
+ linear-gradient(180deg, #070d1d 0%, #070b1a 50%, #050816 100%);
}
.bridge-connect-background {
@@ -923,320 +697,144 @@ onBeforeUnmount(() => {
background-image: url('/img/bridge/goldengate_angle.jpeg');
background-position: center 30%;
background-size: cover;
- opacity: 0.34;
- filter: saturate(1.08) contrast(1.06) brightness(0.82);
+ opacity: 0.62;
+ filter: saturate(1.1) contrast(1.04) brightness(0.9);
transform: scale(1.06);
- -webkit-mask-image: radial-gradient(circle at 50% 30%, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.86) 26%, rgba(0, 0, 0, 0.34) 58%, transparent 79%);
- mask-image: radial-gradient(circle at 50% 30%, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.86) 26%, rgba(0, 0, 0, 0.34) 58%, transparent 79%);
+ -webkit-mask-image: radial-gradient(circle at 50% 32%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.96) 40%, rgba(0, 0, 0, 0.6) 70%, transparent 92%);
+ mask-image: radial-gradient(circle at 50% 32%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.96) 40%, rgba(0, 0, 0, 0.6) 70%, transparent 92%);
}
.bridge-connect-background__noise {
position: absolute;
inset: 0;
background:
- radial-gradient(circle at 50% 50%, rgba(6, 11, 24, 0.12), rgba(6, 11, 24, 0.72));
-}
-
-.bridge-surface {
- position: relative;
- border-radius: 1.8rem;
- border: 1px solid rgba(255, 255, 255, 0.13);
- background:
- linear-gradient(150deg, rgba(13, 23, 46, 0.82), rgba(7, 14, 32, 0.84));
- box-shadow:
- inset 0 1px 0 rgba(255, 255, 255, 0.12),
- 0 26px 70px rgba(2, 7, 22, 0.5);
- backdrop-filter: blur(14px);
- -webkit-backdrop-filter: blur(14px);
- animation: bridge-surface-in 580ms cubic-bezier(0.2, 0.8, 0.2, 1);
-}
-
-.bridge-surface--warm {
- background:
- linear-gradient(165deg, rgba(16, 32, 64, 0.86), rgba(8, 16, 36, 0.86));
-}
-
-.bridge-token-btn {
- display: flex;
- width: 100%;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- gap: 0.5rem;
- border-radius: 1.3rem;
- border: 1px solid rgba(22, 187, 215, 0.55);
- background:
- radial-gradient(circle at 20% 20%, rgba(22, 187, 215, 0.24), transparent 45%),
- rgba(5, 12, 31, 0.84);
- padding: 1.05rem 1rem;
- transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
-}
-
-.bridge-token-btn:hover {
- transform: translateY(-1px);
- border-color: rgba(122, 224, 241, 0.8);
- box-shadow: 0 14px 34px rgba(5, 35, 55, 0.45);
-}
-
-.bridge-token-btn__code {
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
- font-size: clamp(1.6rem, 4.8vw, 2.4rem);
- font-weight: 700;
- line-height: 1;
- letter-spacing: 0.42em;
- text-transform: uppercase;
- color: rgba(165, 240, 250, 0.98);
-}
-
-.bridge-token-btn__hint {
- font-size: 0.69rem;
- letter-spacing: 0.24em;
- text-transform: uppercase;
- color: rgba(255, 255, 255, 0.56);
-}
-
-.bridge-mini-card {
- border-radius: 1.2rem;
- border: 1px solid rgba(255, 255, 255, 0.11);
- background: rgba(10, 18, 39, 0.68);
- padding: 0.85rem 0.9rem;
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
-}
-
-.bridge-mini-card__label {
- font-size: 0.62rem;
- letter-spacing: 0.23em;
- text-transform: uppercase;
- color: rgba(255, 255, 255, 0.5);
-}
-
-.bridge-mini-card__value {
- margin-top: 0.35rem;
- font-size: 0.94rem;
- font-weight: 600;
- color: rgba(255, 255, 255, 0.92);
-}
-
-.bridge-success-banner {
- position: relative;
- overflow: hidden;
- animation: bridge-success-card-in 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
-}
-
-.bridge-success-banner::before {
- content: '';
- position: absolute;
- inset: -1px;
- background: linear-gradient(112deg, transparent 12%, rgba(167, 243, 208, 0.82) 48%, transparent 82%);
- transform: translateX(-120%);
- animation: bridge-success-sheen 1200ms ease-out forwards;
- pointer-events: none;
-}
-
-.bridge-success-overlay {
- pointer-events: none;
- position: fixed;
- inset: 0;
- z-index: 40;
- display: grid;
- place-items: center;
- overflow: hidden;
-}
-
-.bridge-success-blast {
- position: relative;
- display: grid;
- place-items: center;
- width: min(74vmin, 440px);
- aspect-ratio: 1;
- animation: bridge-success-fade 2200ms ease-out forwards;
-}
-
-.bridge-success-core {
- position: relative;
- z-index: 3;
- display: grid;
- place-items: center;
- width: 6.25rem;
- height: 6.25rem;
- border-radius: 999px;
- border: 2px solid rgba(74, 222, 128, 0.78);
- background: radial-gradient(circle at 30% 30%, rgba(167, 243, 208, 0.92), rgba(16, 185, 129, 0.72) 62%, rgba(5, 150, 105, 0.84));
- box-shadow:
- 0 0 60px rgba(16, 185, 129, 0.85),
- inset 0 0 28px rgba(220, 252, 231, 0.55);
- animation: bridge-success-core 700ms cubic-bezier(0.22, 1, 0.36, 1);
-}
-
-.bridge-success-check {
- font-size: 2.5rem;
- font-weight: 700;
- color: rgba(4, 32, 18, 0.8);
- text-shadow: 0 2px 8px rgba(220, 252, 231, 0.45);
-}
-
-.bridge-success-label {
- position: absolute;
- bottom: 14%;
- z-index: 3;
- margin: 0;
- border-radius: 999px;
- border: 1px solid rgba(167, 243, 208, 0.52);
- background: rgba(6, 95, 70, 0.72);
- padding: 0.55rem 1rem;
- font-size: 0.76rem;
- letter-spacing: 0.24em;
- text-transform: uppercase;
- color: rgba(236, 253, 245, 0.96);
- animation: bridge-success-label 820ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.bridge-success-ring {
- position: absolute;
- inset: auto;
- border-radius: 999px;
- border: 2px solid rgba(110, 231, 183, 0.62);
- opacity: 0;
-}
-
-.bridge-success-ring--one {
- width: 38%;
- aspect-ratio: 1;
- animation: bridge-success-ring 980ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.bridge-success-ring--two {
- width: 54%;
- aspect-ratio: 1;
- animation: bridge-success-ring 980ms 120ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.bridge-success-ring--three {
- width: 72%;
- aspect-ratio: 1;
- animation: bridge-success-ring 980ms 240ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.bridge-success-spark {
- position: absolute;
- left: 50%;
- top: 50%;
- width: 0.33rem;
- height: 3.6rem;
- border-radius: 999px;
- background: linear-gradient(180deg, rgba(236, 253, 245, 1), rgba(16, 185, 129, 0));
- opacity: 0;
- transform-origin: 50% 0%;
- animation: bridge-success-spark 920ms var(--spark-delay) cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-@keyframes bridge-surface-in {
- from {
- opacity: 0;
- transform: translateY(12px) scale(0.985);
- }
- to {
- opacity: 1;
- transform: translateY(0) scale(1);
- }
-}
-
-@keyframes bridge-success-card-in {
- from {
- opacity: 0;
- transform: translateY(10px) scale(0.98);
- }
- to {
- opacity: 1;
- transform: translateY(0) scale(1);
- }
-}
-
-@keyframes bridge-success-sheen {
- to {
- transform: translateX(120%);
- }
-}
-
-@keyframes bridge-success-fade {
- 0% {
- opacity: 0;
- transform: scale(0.88);
- }
- 15% {
- opacity: 1;
- transform: scale(1);
- }
- 76% {
- opacity: 1;
- }
- 100% {
- opacity: 0;
- transform: scale(1.08);
- }
-}
-
-@keyframes bridge-success-core {
- 0% {
- transform: scale(0.45);
- opacity: 0;
- }
- 60% {
- transform: scale(1.12);
- opacity: 1;
- }
- 100% {
- transform: scale(1);
- opacity: 1;
- }
-}
-
-@keyframes bridge-success-label {
- from {
- opacity: 0;
- transform: translateY(14px) scale(0.95);
- }
- to {
- opacity: 1;
- transform: translateY(0) scale(1);
- }
-}
-
-@keyframes bridge-success-ring {
- 0% {
- opacity: 0.62;
- transform: scale(0.25);
- }
- 100% {
- opacity: 0;
- transform: scale(1.72);
- }
-}
-
-@keyframes bridge-success-spark {
- 0% {
- opacity: 0;
- transform: rotate(var(--spark-angle)) translateY(-0.5rem) scaleY(0.4);
- }
- 24% {
- opacity: 1;
- }
- 100% {
- opacity: 0;
- transform: rotate(var(--spark-angle)) translateY(-11.25rem) scaleY(1);
- }
+ radial-gradient(circle at 50% 50%, rgba(6, 11, 24, 0.04), rgba(6, 11, 24, 0.5));
}
@media (max-width: 640px) {
.bridge-connect-background__photo {
- opacity: 0.28;
+ opacity: 0.48;
-webkit-mask-image: radial-gradient(circle at 50% 18%, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.78) 30%, rgba(0, 0, 0, 0.25) 62%, transparent 88%);
mask-image: radial-gradient(circle at 50% 18%, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.78) 30%, rgba(0, 0, 0, 0.25) 62%, transparent 88%);
}
+}
- .bridge-token-btn__code {
- letter-spacing: 0.3em;
- }
+.bridge-card {
+ border-radius: 1.6rem;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ background: linear-gradient(150deg, rgba(13, 23, 46, 0.82), rgba(7, 14, 32, 0.85));
+ box-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, 0.1),
+ 0 22px 60px rgba(2, 7, 22, 0.5);
+ backdrop-filter: blur(14px);
+ -webkit-backdrop-filter: blur(14px);
+}
+
+.bridge-btn-primary {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 1rem;
+ background: #16BBD7;
+ padding: 0.8rem 1.5rem;
+ font-size: 0.875rem;
+ font-weight: 600;
+ color: #081226;
+ transition: background 160ms ease;
+}
+
+.bridge-btn-primary:hover {
+ background: #13aac5;
+}
+
+.bridge-btn-primary:disabled {
+ cursor: not-allowed;
+ background: rgba(22, 187, 215, 0.45);
+}
+
+.bridge-card--success {
+ border-color: rgba(52, 211, 153, 0.45);
+ background: linear-gradient(150deg, rgba(6, 78, 59, 0.5), rgba(7, 14, 32, 0.88));
+ box-shadow:
+ inset 0 1px 0 rgba(167, 243, 208, 0.18),
+ 0 0 0 1px rgba(52, 211, 153, 0.12),
+ 0 22px 70px rgba(5, 60, 40, 0.45);
+ animation: bridge-success-card 600ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.bridge-check {
+ position: relative;
+ display: grid;
+ place-items: center;
+ width: 4.5rem;
+ height: 4.5rem;
+ border-radius: 999px;
+ border: 2px solid rgba(74, 222, 128, 0.7);
+ background: radial-gradient(circle at 30% 30%, rgba(167, 243, 208, 0.9), rgba(16, 185, 129, 0.7) 62%, rgba(5, 150, 105, 0.82));
+ box-shadow: 0 0 44px rgba(16, 185, 129, 0.6);
+ animation: bridge-pop 520ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.bridge-check__mark {
+ position: relative;
+ z-index: 2;
+ font-size: 2rem;
+ font-weight: 700;
+ color: rgba(4, 32, 18, 0.85);
+}
+
+.bridge-check__ring {
+ position: absolute;
+ inset: -2px;
+ border-radius: 999px;
+ border: 2px solid rgba(74, 222, 128, 0.55);
+ opacity: 0;
+ animation: bridge-ring 1900ms ease-out infinite;
+}
+
+.bridge-check__ring--delayed {
+ animation-delay: 950ms;
+}
+
+.bridge-success-pill {
+ border-radius: 999px;
+ border: 1px solid rgba(110, 231, 183, 0.4);
+ background: rgba(16, 185, 129, 0.18);
+ padding: 0.25rem 0.85rem;
+ font-size: 0.66rem;
+ font-weight: 600;
+ letter-spacing: 0.24em;
+ text-transform: uppercase;
+ color: rgba(167, 243, 208, 0.95);
+}
+
+@keyframes bridge-ring {
+ 0% { opacity: 0.6; transform: scale(1); }
+ 100% { opacity: 0; transform: scale(1.9); }
+}
+
+@keyframes bridge-success-card {
+ from { transform: translateY(8px) scale(0.99); }
+ to { transform: translateY(0) scale(1); }
+}
+
+.bridge-spinner {
+ width: 2.75rem;
+ height: 2.75rem;
+ border-radius: 999px;
+ border: 3px solid rgba(22, 187, 215, 0.25);
+ border-top-color: #16BBD7;
+ animation: bridge-spin 700ms linear infinite;
+}
+
+@keyframes bridge-spin {
+ to { transform: rotate(360deg); }
+}
+
+@keyframes bridge-pop {
+ 0% { transform: scale(0.5); opacity: 0; }
+ 60% { transform: scale(1.1); opacity: 1; }
+ 100% { transform: scale(1); opacity: 1; }
}
.bridge-log-entry pre {
@@ -1255,14 +853,10 @@ onBeforeUnmount(() => {
}
@media (prefers-reduced-motion: reduce) {
- .bridge-surface,
- .bridge-success-banner,
- .bridge-success-banner::before,
- .bridge-success-blast,
- .bridge-success-core,
- .bridge-success-label,
- .bridge-success-ring,
- .bridge-success-spark {
+ .bridge-card--success,
+ .bridge-check,
+ .bridge-check__ring,
+ .bridge-spinner {
animation: none !important;
}
}
-
@@ -393,15 +235,12 @@ const disconnectError = ref('')
const connectionStatus = refStep 1
-Pairing code
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
+
+
+ ✓
-
- {{ hasToken ? 'Code ready' : 'Waiting for code' }}
-
-
-
-
- - Paste the 6-character pairing code from your desktop Bridge app. -
- - -
-
-
-
- - Confirmed pairing code. Tap it to copy if you need to paste it back into the Bridge app. + Connected +
Bridge connected
++ Linked to {{ authDisplayName }}. + You can close this page and return to the app.
-
-
- {{ hasQueryToken ? 'Loaded from URL' : 'Set manually' }}
-
-
+
+
+
+
+
+
+ Enter your pairing code
++ Type the 6-character code shown in your desktop Bridge app. +
+ + +
+
+
+ Go to login
+
+
+
+
+
+
+ Sign in to link
+ ++ Please sign in to your OpenSquawk account to link the Bridge. +
+ + ++ This code is already linked to another account. +
+
+
+
- Code in use
++ This pairing code is linked to a different account. +
+ -
-
-
-
-
-
- {{ hasAuthenticatedUser ? 'Signed in' : 'Login needed' }}
-
- Step 2
-Account + link
-
-
-
-
- Go to login
-
-
-
-
- Signed in account
- - -{{ authDisplayName }}
-
- Wrong user?
-
Sign in once, then link this pairing code to your account.
-
-
-
-
-
- Bridge link status
- - {{ alreadyLinked ? 'Linked' : 'Not linked' }} - -- {{ connectionLabel }} -
-Connected since {{ formattedConnectedAt }}
- -
-
-
-
-
-
-
-
- {{ disconnectError }}
-{{ connectError }}
-This code is already linked. Sign in to manage it.
-This code is linked to another account.
-Enter or load a pairing code first.
-Sign in first to enable linking.
- - -Code
-{{ hasToken ? 'Ready' : 'Missing' }}
-Auth
-{{ hasAuthenticatedUser ? 'Ready' : 'Missing' }}
-Bridge
-{{ alreadyLinked ? 'Linked' : 'Waiting' }}
-Refreshing status …
-{{ statusError }}
- - -
-
-
-
-
-
-
- Latest Telemetry
-
- IAS {{ latestTelemetry.AIRSPEED_INDICATED?.toFixed(0) ?? '—' }}kt
- ALT {{ latestTelemetry.PLANE_ALTITUDE?.toFixed(0) ?? '—' }}ft
- VS {{ latestTelemetry.VERTICAL_SPEED?.toFixed(0) ?? '—' }}fpm
- GS {{ latestTelemetry.GROUND_VELOCITY?.toFixed(0) ?? '—' }}kt
- HDG {{ latestTelemetry.PLANE_PITCH_DEGREES?.toFixed(1) ?? '—' }}°
- N1 {{ latestTelemetry.TURB_ENG_N1_1?.toFixed(1) ?? '—' }}%
- XPDR {{ formatSquawk(latestTelemetry.TRANSPONDER_CODE) }}
- GND {{ latestTelemetry.SIM_ON_GROUND ? 'YES' : 'NO' }}
- GEAR {{ latestTelemetry.GEAR_HANDLE_POSITION ? 'DN' : 'UP' }}
- BRK {{ latestTelemetry.BRAKE_PARKING_POSITION ? 'SET' : 'OFF' }}
-
-
-
- No log entries yet. Waiting for bridge activity …
-
-
-
-
+
+
+
+ Linking Bridge …
+Connecting code {{ token }} to {{ authDisplayName }}.
+{{ statusError }}
+ + +
+
+
+
+
+ Latest Telemetry
+
+ IAS {{ latestTelemetry.AIRSPEED_INDICATED?.toFixed(0) ?? '—' }}kt
+ ALT {{ latestTelemetry.PLANE_ALTITUDE?.toFixed(0) ?? '—' }}ft
+ VS {{ latestTelemetry.VERTICAL_SPEED?.toFixed(0) ?? '—' }}fpm
+ GS {{ latestTelemetry.GROUND_VELOCITY?.toFixed(0) ?? '—' }}kt
+ N1 {{ latestTelemetry.TURB_ENG_N1_1?.toFixed(1) ?? '—' }}%
+ XPDR {{ formatSquawk(latestTelemetry.TRANSPONDER_CODE) }}
+ GND {{ latestTelemetry.SIM_ON_GROUND ? 'YES' : 'NO' }}
+ GEAR {{ latestTelemetry.GEAR_HANDLE_POSITION ? 'DN' : 'UP' }}
+ BRK {{ latestTelemetry.BRAKE_PARKING_POSITION ? 'SET' : 'OFF' }}
+
+
+
+
+ No log entries yet. Waiting for bridge activity …
+
+
+
+
+
+
+
+
+ {{ JSON.stringify(entry.data, null, 2) }}
+