Add End Session button

Author: sarahsturgeon

web/frontend/src/lib/Console.svelte

@@ -186,6 +186,12 @@
         };
     }
 
+    function endSession() {
+        if (socket?.readyState === WebSocket.OPEN) {
+            socket.send(JSON.stringify({ type: "CLOSE_SESSION" }));
+        }
+    }
+
     function sendCommand(commandText: string) {
         if (socket?.readyState === WebSocket.OPEN) {
             virtualConsole.addLines([`\u001b[92m> ${commandText}\u001b[0m`]);
@@ -224,7 +230,7 @@
 </script>
 
 <div id="console-container" class="h-full flex flex-col bg-gray-900 relative">
-    <StatusPanel {socket} />
+    <StatusPanel {socket} on:endsession={endSession} />
 
     <div bind:this={outputContainer} class="flex-grow overflow-y-auto overflow-x-hidden p-4"></div>
     <div class="mt-auto p-4">

web/frontend/src/lib/EndSessionButton.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { createEventDispatcher } from "svelte";
+
+    const dispatch = createEventDispatcher();
+
+    let confirming = false;
+
+    function confirm() {
+        dispatch("endsession");
+        confirming = false;
+    }
+</script>
+
+{#if confirming}
+    <div class="flex items-center justify-between text-xs">
+        <span class="text-gray-300">End session?</span>
+        <div class="flex gap-2">
+            <button on:click={confirm} class="text-red-400 hover:text-red-300 font-semibold transition-colors">Yes</button>
+            <button on:click={() => confirming = false} class="text-gray-400 hover:text-gray-300 transition-colors">No</button>
+        </div>
+    </div>
+{:else}
+    <button on:click={() => confirming = true} class="w-full text-xs text-center py-1.5 rounded-md bg-red-600/10 hover:bg-red-600/25 text-red-400/70 hover:text-red-300 border border-red-500/20 hover:border-red-500/30 transition-colors">
+        End Session
+    </button>
+{/if}

web/frontend/src/lib/StatusPanel.svelte

@@ -3,6 +3,11 @@
     import { sessionState, sessionMetadata, sessionTimer } from "./stores";
     import SessionMetadata from "./SessionMetadata.svelte";
     import TimeoutBar from "./TimeoutBar.svelte";
+    import EndSessionButton from "./EndSessionButton.svelte";
+
+    import { createEventDispatcher } from "svelte";
+
+    const dispatch = createEventDispatcher();
 
     export let socket: WebSocket | null;
 
@@ -108,6 +113,9 @@
                     <div class="border-t border-gray-700 pt-3">
                         <SessionMetadata />
                     </div>
+                    {#if $sessionState === "active"}
+                        <EndSessionButton on:endsession={() => dispatch("endsession")} />
+                    {/if}
                 </div>
             {/if}
         </div>

web/src/index.ts

@@ -251,6 +251,13 @@ export class BaseSession extends Container<Env> {
         this.handleExtensionRequest();
         return;
       }
+      if (message.type === "CLOSE_SESSION") {
+        if (this.sessionState === "ACTIVE") {
+          console.log("Browser requested session close");
+          this.closeSession();
+        }
+        return;
+      }
       if (this.containerSocket?.readyState === WebSocket.OPEN) {
         if (message.type === "SCRIPT") {
             const content = message.payload.content || "";