Trying to do better but it's hard

src/App.svelte

@@ -31,6 +31,7 @@
     FileStack,
     PanelLeftOpen,
     PanelRightOpen,
+    CircleStop,
   } from "lucide-svelte";
 
   const appContext = createAppContext();
@@ -44,7 +45,7 @@
     uiState,
     executionContext,
   } = appContext;
-  const csoundDerived = createCsoundDerivedStores(csound);
+  const { logs: csoundLogs, initialized, compiled, running } = createCsoundDerivedStores(csound);
 
   let analyserNode = $state<AnalyserNode | null>(null);
   let interpreterLogs = $state<LogEntry[]>([]);
@@ -91,9 +92,27 @@
       projectEditor.loadProject(projectToLoad);
     }
 
-    logsUnsubscribe = csoundDerived.logs.subscribe((logs) => {
+    logsUnsubscribe = csoundLogs.subscribe((logs) => {
       interpreterLogs = logs;
     });
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === '.') {
+        e.preventDefault();
+        handleStop();
+      }
+
+      if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+        e.preventDefault();
+        handleSave();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
   });
 
   onDestroy(async () => {
@@ -220,6 +239,14 @@
     }
   }
 
+  async function handleStop() {
+    try {
+      await csound.stop();
+    } catch (error) {
+      console.error("Failed to stop:", error);
+    }
+  }
+
   $effect(() => {
     if (uiState.scopePopupVisible || uiState.spectrogramPopupVisible) {
       analyserNode = csound.getAnalyserNode();
@@ -281,6 +308,14 @@
 <div class="app-container">
   <TopBar title="OldBoy">
     {#snippet leftActions()}
+      <button
+        onclick={handleStop}
+        class="icon-button stop-button"
+        disabled={!$running}
+        title="Stop audio (Ctrl+.)"
+      >
+        <CircleStop size={18} />
+      </button>
       <button
         class="icon-button"
         onclick={handleNewFromTemplate}
@@ -292,8 +327,8 @@
         class="icon-button"
         onclick={handleSave}
         disabled={!projectEditor.hasUnsavedChanges}
-        title="Save {projectEditor.hasUnsavedChanges
-          ? '(unsaved changes)'
+        title="Save (Ctrl+S){projectEditor.hasUnsavedChanges
+          ? ' - unsaved changes'
           : ''}"
         class:has-changes={projectEditor.hasUnsavedChanges}
       >
@@ -537,6 +572,15 @@
     color: #646cff;
   }
 
+  .icon-button.stop-button:not(:disabled) {
+    color: #ff6b6b;
+  }
+
+  .icon-button.stop-button:hover:not(:disabled) {
+    color: #ff5252;
+    border-color: #ff5252;
+  }
+
   h3 {
     margin-top: 0;
     color: rgba(255, 255, 255, 0.87);