From 14492de587f69dcdf0fd7f341b373361e69c1010 Mon Sep 17 00:00:00 2001
From: Archan Datta <archandatta@lazertechnologies.com>
Date: Thu, 15 Jan 2026 15:13:15 +0000
Subject: [PATCH 1/6] feat: remove login components

---
 .../client/src/components/connect.vue         | 49 -------------------
 1 file changed, 49 deletions(-)

diff --git a/images/chromium-headful/client/src/components/connect.vue b/images/chromium-headful/client/src/components/connect.vue
index 911ed79d..43d81af1 100644
--- a/images/chromium-headful/client/src/components/connect.vue
+++ b/images/chromium-headful/client/src/components/connect.vue
@@ -1,15 +1,6 @@
 <template>
   <div class="connect">
     <div class="window">
-      <form class="message" v-if="!connecting" @submit.stop.prevent="connect">
-        <span v-if="!autoPassword">{{ $t('connect.login_title') }}</span>
-        <span v-else>{{ $t('connect.invitation_title') }}</span>
-        <input type="text" :placeholder="$t('connect.displayname')" v-model="displayname" />
-        <input type="password" :placeholder="$t('connect.password')" v-model="password" v-if="!autoPassword" />
-        <button type="submit" @click.stop.prevent="login">
-          {{ $t('connect.connect') }}
-        </button>
-      </form>
       <div class="loader" v-if="connecting">
         <img src="../assets/images/logo.svg" alt="loading" aria-hidden="true" class="kernel-logo" />
       </div>
@@ -54,46 +45,6 @@
         }
       }
 
-      .message {
-        display: flex;
-        flex-direction: column;
-
-        span {
-          display: block;
-          text-align: center;
-          text-transform: uppercase;
-          line-height: 30px;
-        }
-
-        input {
-          border: none;
-          padding: 6px 8px;
-          line-height: 20px;
-          border-radius: 5px;
-          margin: 5px 0;
-          background: $background-tertiary;
-          color: $text-normal;
-
-          &::selection {
-            background: $text-link;
-          }
-        }
-
-        button {
-          cursor: pointer;
-          border-radius: 5px;
-          padding: 4px;
-          background: $style-primary;
-          color: $text-normal;
-          text-align: center;
-          text-transform: uppercase;
-          font-weight: bold;
-          line-height: 30px;
-          margin: 5px 0;
-          border: none;
-        }
-      }
-
       .loader {
         width: 90px;
         height: 90px;

From 4f3a07e0d714935b845a922cba0b9949dc65c043 Mon Sep 17 00:00:00 2001
From: Archan Datta <archandatta@lazertechnologies.com>
Date: Thu, 15 Jan 2026 15:13:51 +0000
Subject: [PATCH 2/6] feat: add disconnected screen

---
 images/chromium-headful/client/src/app.vue    | 13 ++++++-
 .../client/src/components/disconnected.vue    | 38 +++++++++++++++++++
 .../chromium-headful/client/src/neko/base.ts  |  7 +++-
 .../chromium-headful/client/src/neko/index.ts | 10 ++---
 4 files changed, 57 insertions(+), 11 deletions(-)
 create mode 100644 images/chromium-headful/client/src/components/disconnected.vue

diff --git a/images/chromium-headful/client/src/app.vue b/images/chromium-headful/client/src/app.vue
index ebf73ca8..fc5f452b 100644
--- a/images/chromium-headful/client/src/app.vue
+++ b/images/chromium-headful/client/src/app.vue
@@ -32,7 +32,8 @@
         </div>
       </main>
       <neko-side v-if="!videoOnly && side" />
-      <neko-connect v-if="!connected" />
+      <neko-connect v-if="!connected && !wasConnected" />
+      <neko-disconnected v-if="!connected && wasConnected" />
       <neko-about v-if="about" />
       <notifications
         v-if="!videoOnly"
@@ -175,6 +176,7 @@
   import { Vue, Component, Ref, Watch } from 'vue-property-decorator'
 
   import Connect from '~/components/connect.vue'
+  import Disconnected from '~/components/disconnected.vue'
   import Video from '~/components/video.vue'
   import Menu from '~/components/menu.vue'
   import Side from '~/components/side.vue'
@@ -189,6 +191,7 @@
     name: 'neko',
     components: {
       'neko-connect': Connect,
+      'neko-disconnected': Disconnected,
       'neko-video': Video,
       // 'neko-menu': Menu,
       //'neko-side': Side,
@@ -204,6 +207,7 @@
     @Ref('video') video!: Video
 
     shakeKbd = false
+    wasConnected = false
 
     get volume() {
       const numberParam = parseFloat(new URL(location.href).searchParams.get('volume') || '1.0')
@@ -364,6 +368,11 @@
       }
     }
 
-
+    @Watch('connected', { immediate: true })
+    onConnectedChange(connected: boolean) {
+      if (connected) {
+        this.wasConnected = true
+      }
+    }
   }
 </script>
diff --git a/images/chromium-headful/client/src/components/disconnected.vue b/images/chromium-headful/client/src/components/disconnected.vue
new file mode 100644
index 00000000..8759db01
--- /dev/null
+++ b/images/chromium-headful/client/src/components/disconnected.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="disconnected-overlay">
+    <div class="message-container">
+      <span class="message">Browser has been shutdown and is no longer available</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .disconnected-overlay {
+    width: 100vw;
+    height: 100vh;
+    background: #000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .message-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 20px;
+
+      .message {
+        font-size: 18px;
+        color: #999;
+        text-align: center;
+      }
+    }
+  }
+</style>
+
+<script lang="ts">
+  import { Component, Vue } from 'vue-property-decorator'
+
+  @Component({ name: 'neko-disconnected' })
+  export default class extends Vue {}
+</script>
diff --git a/images/chromium-headful/client/src/neko/base.ts b/images/chromium-headful/client/src/neko/base.ts
index 12828595..501a8fd8 100644
--- a/images/chromium-headful/client/src/neko/base.ts
+++ b/images/chromium-headful/client/src/neko/base.ts
@@ -69,8 +69,11 @@ export abstract class BaseClient extends EventEmitter<BaseEvents> {
       )
       this.emit('debug', `connecting to ${this._ws.url}`)
       this._ws.onmessage = this.onMessage.bind(this)
-      this._ws.onerror = () => this.onError.bind(this)
-      this._ws.onclose = () => this.onDisconnected.bind(this, new Error('websocket closed'))
+      this._ws.onerror = this.onError.bind(this)
+      this._ws.onclose = (event) => {
+        this.emit('debug', `websocket closed: code=${event.code}, reason=${event.reason}`)
+        this.onDisconnected(new Error('websocket closed'))
+      }
       this._timeout = window.setTimeout(this.onTimeout.bind(this), 15000)
     } catch (err: any) {
       this.onDisconnected(err)
diff --git a/images/chromium-headful/client/src/neko/index.ts b/images/chromium-headful/client/src/neko/index.ts
index b0fb9397..3c31355c 100644
--- a/images/chromium-headful/client/src/neko/index.ts
+++ b/images/chromium-headful/client/src/neko/index.ts
@@ -75,13 +75,9 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
   // Internal Events
   /////////////////////////////
   protected [EVENT.RECONNECTING]() {
-    this.$vue.$notify({
-      group: 'neko',
-      type: 'warning',
-      title: this.$vue.$t('connection.reconnecting') as string,
-      duration: 5000,
-      speed: 1000,
-    })
+    // Don't show reconnecting notification or attempt reconnection
+    // show the disconnected state
+    this.cleanup()
   }
 
   protected [EVENT.CONNECTING]() {

From a7ec52cbce78aa8c8c5a3537155f8ff5eaa1d9a5 Mon Sep 17 00:00:00 2001
From: Archan Datta <archandatta@lazertechnologies.com>
Date: Thu, 15 Jan 2026 15:37:25 +0000
Subject: [PATCH 3/6] review: code clean up

---
 images/chromium-headful/client/src/app.vue          |  1 +
 .../client/src/components/disconnected.vue          | 13 ++++++++-----
 images/chromium-headful/client/src/locale/en-us.ts  |  4 ++++
 images/chromium-headful/client/src/neko/index.ts    |  1 +
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/images/chromium-headful/client/src/app.vue b/images/chromium-headful/client/src/app.vue
index fc5f452b..20f3c8e8 100644
--- a/images/chromium-headful/client/src/app.vue
+++ b/images/chromium-headful/client/src/app.vue
@@ -276,6 +276,7 @@
     @Watch('connected', { immediate: true })
     onConnected(value: boolean) {
       if (value) {
+        this.wasConnected = true
         this.applyQueryResolution()
         try {
           if (window.parent !== window) {
diff --git a/images/chromium-headful/client/src/components/disconnected.vue b/images/chromium-headful/client/src/components/disconnected.vue
index 8759db01..383a206f 100644
--- a/images/chromium-headful/client/src/components/disconnected.vue
+++ b/images/chromium-headful/client/src/components/disconnected.vue
@@ -1,16 +1,19 @@
 <template>
   <div class="disconnected-overlay">
     <div class="message-container">
-      <span class="message">Browser has been shutdown and is no longer available</span>
+      <span class="message">{{ $t('disconnected.message') }}</span>
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
   .disconnected-overlay {
-    width: 100vw;
-    height: 100vh;
-    background: #000;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba($color: $background-floating, $alpha: 0.95);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -23,7 +26,7 @@
 
       .message {
         font-size: 18px;
-        color: #999;
+        color: $text-muted;
         text-align: center;
       }
     }
diff --git a/images/chromium-headful/client/src/locale/en-us.ts b/images/chromium-headful/client/src/locale/en-us.ts
index edc7f2bb..2a5acedd 100644
--- a/images/chromium-headful/client/src/locale/en-us.ts
+++ b/images/chromium-headful/client/src/locale/en-us.ts
@@ -125,3 +125,7 @@ export const files = {
   uploads: 'Uploads',
   upload_here: 'Click or drag files here to upload',
 }
+
+export const disconnected = {
+  message: 'Browser has been shutdown and is no longer available',
+}
diff --git a/images/chromium-headful/client/src/neko/index.ts b/images/chromium-headful/client/src/neko/index.ts
index 3c31355c..874fb6f6 100644
--- a/images/chromium-headful/client/src/neko/index.ts
+++ b/images/chromium-headful/client/src/neko/index.ts
@@ -77,6 +77,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
   protected [EVENT.RECONNECTING]() {
     // Don't show reconnecting notification or attempt reconnection
     // show the disconnected state
+    this.disconnect()
     this.cleanup()
   }
 

From 2e8ef522836d722e13b461b33930526aaf19a658 Mon Sep 17 00:00:00 2001
From: Archan Datta <archandatta@lazertechnologies.com>
Date: Thu, 15 Jan 2026 18:50:50 +0000
Subject: [PATCH 4/6] review: update styles

---
 .../client/src/components/disconnected.vue               | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/images/chromium-headful/client/src/components/disconnected.vue b/images/chromium-headful/client/src/components/disconnected.vue
index 383a206f..db45cc78 100644
--- a/images/chromium-headful/client/src/components/disconnected.vue
+++ b/images/chromium-headful/client/src/components/disconnected.vue
@@ -8,12 +8,9 @@
 
 <style lang="scss" scoped>
   .disconnected-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba($color: $background-floating, $alpha: 0.95);
+    width: 100vw;
+    height: 100vh;
+    background: #000;
     display: flex;
     justify-content: center;
     align-items: center;

From 429d5dfa134dcb1650f0183831308f1e13413621 Mon Sep 17 00:00:00 2001
From: Archan Datta <archandatta@lazertechnologies.com>
Date: Thu, 15 Jan 2026 19:15:01 +0000
Subject: [PATCH 5/6] review: check for websocket connection

---
 images/chromium-headful/client/src/neko/index.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/images/chromium-headful/client/src/neko/index.ts b/images/chromium-headful/client/src/neko/index.ts
index 874fb6f6..92df801d 100644
--- a/images/chromium-headful/client/src/neko/index.ts
+++ b/images/chromium-headful/client/src/neko/index.ts
@@ -75,10 +75,14 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
   // Internal Events
   /////////////////////////////
   protected [EVENT.RECONNECTING]() {
-    // Don't show reconnecting notification or attempt reconnection
-    // show the disconnected state
-    this.disconnect()
-    this.cleanup()
+    // KERNEL: Differentiate between temporary network issues and permanent disconnection
+    // If WebSocket is still open, this is likely a temporary ICE disconnection (network glitch)
+    // Allow WebRTC to attempt recovery automatically
+    // If WebSocket is closed, the browser process is likely gone - show disconnected overlay
+    if (!this.socketOpen) {
+      this.cleanup()
+    }
+    // else: WebSocket still open, let WebRTC recover naturally
   }
 
   protected [EVENT.CONNECTING]() {

From 9227a23cd73681bc77f287c63cf3585fe78f01cc Mon Sep 17 00:00:00 2001
From: Archan Datta <archandatta@lazertechnologies.com>
Date: Fri, 16 Jan 2026 17:22:21 +0000
Subject: [PATCH 6/6] fix: typo

---
 images/chromium-headful/client/src/locale/en-us.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/images/chromium-headful/client/src/locale/en-us.ts b/images/chromium-headful/client/src/locale/en-us.ts
index 2a5acedd..3c976c73 100644
--- a/images/chromium-headful/client/src/locale/en-us.ts
+++ b/images/chromium-headful/client/src/locale/en-us.ts
@@ -127,5 +127,5 @@ export const files = {
 }
 
 export const disconnected = {
-  message: 'Browser has been shutdown and is no longer available',
+  message: 'Browser has been shut down and is no longer available',
 }