Kernel Computer Operator API (v1)

images/chromium-headful/Kraftfile.erofs

@@ -0,0 +1,12 @@
+spec: v0.6
+
+runtime: index.unikraft.io/official/base-compat:latest
+
+labels:
+  cloud.unikraft.v1.instances/scale_to_zero.policy: "idle"
+  cloud.unikraft.v1.instances/scale_to_zero.stateful: "true"
+  cloud.unikraft.v1.instances/scale_to_zero.cooldown_time_ms: 5000
+
+rootfs: ./initrd
+
+cmd: ["/wrapper.sh"]

images/chromium-headful/Kraftfile.no-erofs

@@ -0,0 +1,12 @@
+spec: v0.6
+
+runtime: index.unikraft.io/official/base-compat:latest
+
+labels:
+  cloud.unikraft.v1.instances/scale_to_zero.policy: "on"
+  cloud.unikraft.v1.instances/scale_to_zero.stateful: "true"
+  cloud.unikraft.v1.instances/scale_to_zero.cooldown_time_ms: 4000
+
+rootfs: ./Dockerfile
+
+cmd: ["/wrapper.sh"]

images/chromium-headful/build-docker.sh

@@ -11,5 +11,8 @@ source ../../shared/start-buildkit.sh
 # Build the kernel-images API binary and place it into ./bin for Docker build context
 source ../../shared/build-server.sh "$(pwd)/bin"
 
+# Build operator api + test + .env → ./bin
+source ../../shared/build-operator-api.sh "$(pwd)/bin"
+
 # Build (and optionally push) the Docker image.
 docker build -t "$IMAGE" .

images/chromium-headful/build-unikernel.sh

@@ -1,37 +1,75 @@
 #!/usr/bin/env bash
 
+# Flag to control whether to use EROFS or not
+EROFS_DISABLE=${EROFS_DISABLE:-false}
+
 # Move to the script's directory so relative paths work regardless of the caller CWD
 SCRIPT_DIR=$(cd "$(dirname "$0")" && pwd)
 cd "$SCRIPT_DIR"
 source "$SCRIPT_DIR/../../shared/ensure-common-build-run-vars.sh" chromium-headful
-source "$SCRIPT_DIR/../../shared/erofs-utils.sh"
 
-# Ensure the mkfs.erofs tool is available
-if ! check_mkfs_erofs; then
-    echo "mkfs.erofs is not installed. Installing erofs-utils..."
-    install_erofs_utils
-fi
+# Copy the appropriate Kraftfile based on EROFS_DISABLE flag
+if [ "$EROFS_DISABLE" = "false" ]; then
+  echo "Using EROFS configuration (default)..."
+  cp Kraftfile.erofs Kraftfile
+  source "$SCRIPT_DIR/../../shared/erofs-utils.sh"
+
+  # Ensure the mkfs.erofs tool is available
+  if ! check_mkfs_erofs; then
+      echo "mkfs.erofs is not installed. Installing erofs-utils..."
+      install_erofs_utils
+  fi
+
+  set -euo pipefail  
+
+  # Build the root file system
+  source ../../shared/start-buildkit.sh
+
+  rm -rf ./.rootfs || true
+
+  # Build the API binary
+  source ../../shared/build-server.sh "$(pwd)/bin"
 
-set -euo pipefail  
-
-# Build the root file system
-source ../../shared/start-buildkit.sh
-rm -rf ./.rootfs || true
-# Build the API binary
-source ../../shared/build-server.sh "$(pwd)/bin"
-app_name=chromium-headful-build
-docker build --platform linux/amd64 -t "$IMAGE" .
-docker rm cnt-"$app_name" || true
-docker create --platform linux/amd64 --name cnt-"$app_name" "$IMAGE" /bin/sh
-docker cp cnt-"$app_name":/ ./.rootfs
-rm -f initrd || true
-sudo mkfs.erofs --all-root -d2 -E noinline_data -b 4096 initrd ./.rootfs
-
-# Package the unikernel (and the new initrd) to KraftCloud
-kraft pkg \
-  --name $UKC_INDEX/$IMAGE \
-  --plat kraftcloud \
-  --arch x86_64 \
-  --strategy overwrite \
-  --push \
-  .
+  # Build operator api + test + .env → ./bin
+  source ../../shared/build-operator-api.sh "$(pwd)/bin"
+
+  app_name=chromium-headful-build
+  docker build --platform linux/amd64 -t "$IMAGE" .
+  docker rm cnt-"$app_name" || true
+  docker create --platform linux/amd64 --name cnt-"$app_name" "$IMAGE" /bin/sh
+  docker cp cnt-"$app_name":/ ./.rootfs
+  rm -f initrd || true
+  # sudo mkfs.erofs --all-root -d2 -E noinline_data -b 4096 initrd ./.rootfs
+  # default block size is 4096 and -b fails for some reason, removed it
+  sudo mkfs.erofs --all-root -d2 -E noinline_data initrd ./.rootfs
+
+  # Package the unikernel (and the new initrd) to KraftCloud
+  kraft pkg \
+    --name $UKC_INDEX/$IMAGE \
+    --plat kraftcloud \
+    --arch x86_64 \
+    --strategy overwrite \
+    --push \
+    .
+else
+  echo "Using non-EROFS configuration..."
+  cp Kraftfile.no-erofs Kraftfile
+
+  set -euo pipefail  
+
+  source ../../shared/start-buildkit.sh
+
+  # Build the API binary
+  source ../../shared/build-server.sh "$(pwd)/bin"
+
+  # Build operator api + test + .env → ./bin
+  source ../../shared/build-operator-api.sh "$(pwd)/bin"
+
+  # Package the unikernel to KraftCloud
+  kraft pkg \
+    --name $UKC_INDEX/$IMAGE \
+    --plat kraftcloud --arch x86_64 \
+    --strategy overwrite \
+    --push \
+    .
+fi

images/chromium-headful/client/public/browserconfig.xml

@@ -3,7 +3,7 @@
     <msapplication>
         <tile>
             <square150x150logo src="/mstile-150x150.png"/>
-            <TileColor>#19bd9c</TileColor>
+            <TileColor>#7B42F6</TileColor>
         </tile>
     </msapplication>
 </browserconfig>

images/chromium-headful/client/public/index.html

@@ -9,9 +9,9 @@
     <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
     <link rel="manifest" href="site.webmanifest">
-    <link rel="mask-icon" href="safari-pinned-tab.svg" color="#19bd9c">
-    <meta name="msapplication-TileColor" content="#19bd9c">
-    <meta name="theme-color" content="#19bd9c">
+    <link rel="mask-icon" href="safari-pinned-tab.svg" color="#7B42F6">
+    <meta name="msapplication-TileColor" content="#7B42F6">
+    <meta name="theme-color" content="#7B42F6">
     <style> /* weird iOS bug, if this is not set right here, video just does not start */ .video-container { width: 100%; height: 100%; } </style>
   </head>
   <body>

images/chromium-headful/client/public/site.webmanifest

@@ -13,7 +13,7 @@
             "type": "image/png"
         }
     ],
-    "theme_color": "#19bd9c",
-    "background_color": "#19bd9c",
+    "theme_color": "#7B42F6",
+    "background_color": "#7B42F6",
     "display": "standalone"
 }

images/chromium-headful/client/src/assets/styles/_variables.scss

@@ -21,10 +21,9 @@ $background-modifier-accent: hsla(0, 0%, 100%, 0.06);
 $elevation-low: 0 1px 0 rgba(4, 4, 5, 0.2), 0 1.5px 0 rgba(6, 6, 7, 0.05), 0 2px 0 rgba(4, 4, 5, 0.05);
 $elevation-high: 0 8px 16px rgba(0, 0, 0, 0.24);
 
-$style-primary: #19bd9c;
+$style-primary: #7B42F6;
 $style-error: #d32f2f;
 
 $menu-height: 40px;
 $controls-height: 125px;
 $side-width: 400px;
-

images/chromium-headful/client/src/components/connect.vue

@@ -11,8 +11,7 @@
         </button>
       </form>
       <div class="loader" v-if="connecting">
-        <div class="bounce1"></div>
-        <div class="bounce2"></div>
+        <img src="/kernel.svg" class="spinning-logo" alt="Loading..." />
       </div>
     </div>
   </div>
@@ -103,40 +102,25 @@
       .loader {
         width: 90px;
         height: 90px;
-        position: relative;
         margin: 0 auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
 
-        .bounce1,
-        .bounce2 {
+        .spinning-logo {
           width: 100%;
           height: 100%;
-          border-radius: 50%;
-          background-color: $style-primary;
-          opacity: 0.6;
-          position: absolute;
-          top: 0;
-          left: 0;
-
-          -webkit-animation: bounce 2s infinite ease-in-out;
-          animation: bounce 2s infinite ease-in-out;
-        }
-
-        .bounce2 {
-          -webkit-animation-delay: -1s;
-          animation-delay: -1s;
+          animation: spin 2s linear infinite;
         }
       }
     }
 
-    @keyframes bounce {
-      0%,
-      100% {
-        transform: scale(0);
-        -webkit-transform: scale(0);
+    @keyframes spin {
+      from {
+        transform: rotate(0deg);
       }
-      50% {
-        transform: scale(1);
-        -webkit-transform: scale(1);
+      to {
+        transform: rotate(360deg);
       }
     }
   }

images/chromium-headful/client/src/components/video.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="component" class="video">
-    <div ref="player" class="player">
+    <div ref="player" class="player" :class="{ 'is-muted': muted }">
       <div ref="container" class="player-container">
         <video ref="video" playsinline />
         <div class="emotes">
@@ -85,6 +85,19 @@
 </template>
 
 <style lang="scss" scoped>
+  /* KERNEL MODIFICATION: Keyframes for the mute indicator pulse effect */
+  @keyframes mute-pulse {
+    0% {
+      box-shadow: inset 0 0 0 2px rgba(255, 80, 80, 0.2);
+    }
+    50% {
+      box-shadow: inset 0 0 0 2px rgba(255, 80, 80, 0.4);
+    }
+    100% {
+      box-shadow: inset 0 0 0 2px rgba(255, 80, 80, 0.2);
+    }
+  }
+
   .video {
     width: 100%;
     height: 100%;
@@ -96,6 +109,11 @@
       align-items: center;
       background: #000;
 
+      /* KERNEL MODIFICATION: Style for the mute indicator */
+      &.is-muted {
+        animation: mute-pulse 2s infinite;
+      }
+
       .video-menu {
         position: absolute;
         right: 20px;
@@ -259,6 +277,10 @@
     private fullscreen = false
     private mutedOverlay = true
 
+    /* KERNEL MODIFICATION: State flag to ensure unmute happens only once. */
+    private hasInteracted = false
+    private unmuteHandler: (() => void) | null = null
+
     get admin() {
       return this.$accessor.user.admin
     }
@@ -470,6 +492,23 @@
       }
     }
 
+    /* KERNEL MODIFICATION: Centralized one-time unmute logic. */
+    _unmuteOnFirstInteraction() {
+      if (this.hasInteracted || !this.muted) {
+        return
+      }
+
+      this.hasInteracted = true
+      this.unmute()
+      this.$accessor.video.setVolume(100)
+
+      // Clean up global listeners if they were set
+      if (this.unmuteHandler) {
+        document.documentElement.removeEventListener('mousedown', this.unmuteHandler)
+        document.documentElement.removeEventListener('keydown', this.unmuteHandler)
+      }
+    }
+
     mounted() {
       this._container.addEventListener('resize', this.onResize)
       this.onVolumeChanged(this.volume)
@@ -533,12 +572,23 @@
         this.$client.sendData('keyup', { key: this.keyMap(key) })
       }
       this.keyboard.listenTo(this._overlay)
+
+      /* KERNEL MODIFICATION: Set up listeners for the first interaction. */
+      this.unmuteHandler = this._unmuteOnFirstInteraction.bind(this)
+      document.documentElement.addEventListener('mousedown', this.unmuteHandler, { once: true })
+      document.documentElement.addEventListener('keydown', this.unmuteHandler, { once: true })
     }
 
     beforeDestroy() {
       this.observer.disconnect()
       this.$accessor.video.setPlayable(false)
       /* Guacamole Keyboard does not provide destroy functions */
+
+      /* KERNEL MODIFICATION: Clean up listeners on component destruction. */
+      if (this.unmuteHandler) {
+        document.documentElement.removeEventListener('mousedown', this.unmuteHandler)
+        document.documentElement.removeEventListener('keydown', this.unmuteHandler)
+      }
     }
 
     get hasMacOSKbd() {
@@ -761,6 +811,9 @@
     }
 
     onMouseDown(e: MouseEvent) {
+      /* KERNEL MODIFICATION: Trigger unmute on first video click. */
+      this._unmuteOnFirstInteraction()
+
       if (!this.hosting) {
         this.$emit('control-attempt', e)
       }
@@ -846,4 +899,4 @@
       this._overlay.focus()
     }
   }
-</script>
+</script>