From 972c4adb9164809a5c2d57ea8292927a6b87c960 Mon Sep 17 00:00:00 2001
From: Jeffrey Alan Scudder <me@jas.life>
Date: Sat, 28 Mar 2026 19:49:14 -0700
Subject: [PATCH] fix notepat.com boot and os link

---
 lith/Caddyfile                                |   2 +-
 system/netlify/functions/index.mjs            |  20 ++-
 .../aesthetic.computer/disks/notepat.mjs      | 116 +++++++++++++-----
 system/public/aesthetic.computer/lib/disk.mjs |  92 ++++++++------
 4 files changed, 152 insertions(+), 78 deletions(-)

diff --git a/lith/Caddyfile b/lith/Caddyfile
index b1c79ca108..236d2f106e 100644
--- a/lith/Caddyfile
+++ b/lith/Caddyfile
@@ -343,7 +343,7 @@
     @mainspa host aesthetic.computer www.aesthetic.computer kidlisp.com www.kidlisp.com notepat.com www.notepat.com p5.aesthetic.computer sitemap.aesthetic.computer
     handle @mainspa {
         # Preload critical assets (browser starts fetching before parsing HTML)
-        header Link "</aesthetic.computer/boot.mjs>; rel=preload; as=script; crossorigin, </aesthetic.computer/style.css>; rel=preload; as=style"
+        header Link "</aesthetic.computer/boot.mjs>; rel=preload; as=script, </aesthetic.computer/style.css>; rel=preload; as=style"
 
         # Assets → DO Spaces CDN
         handle /assets/* {
diff --git a/system/netlify/functions/index.mjs b/system/netlify/functions/index.mjs
index eb3fbaa982..027835e839 100644
--- a/system/netlify/functions/index.mjs
+++ b/system/netlify/functions/index.mjs
@@ -1134,12 +1134,11 @@ async function fun(event, context) {
             }
           });
         </script>
-        <script
-          crossorigin="anonymous"
-          src="/aesthetic.computer/boot.mjs"
-          type="module"
-          defer
-        ></script>
+        <script
+          src="/aesthetic.computer/boot.mjs"
+          type="module"
+          defer
+        ></script>
         ${dev ? `<!-- Modulepreload for module-loader (needed for fast WebSocket connection) -->
         <link rel="modulepreload" href="/aesthetic.computer/module-loader.mjs" />` : `<!-- Modulepreload hints for critical path modules (parallel fetch) -->
         <link rel="modulepreload" href="/aesthetic.computer/module-loader.mjs" />
@@ -1196,11 +1195,10 @@ async function fun(event, context) {
         </script>
         <!-- Preload the YWFT Processing font for instant boot animation -->
         <link rel="preload" href="/type/webfonts/ywft-processing-bold.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
-        <link
-          rel="stylesheet"
-          crossorigin="anonymous"
-          href="/aesthetic.computer/style.css"
-        />
+        <link
+          rel="stylesheet"
+          href="/aesthetic.computer/style.css"
+        />
         <link rel="stylesheet" href="/type/webfonts/ywft-processing-bold.css" />
         <script type="application/ld+json">
         ${JSON.stringify({
diff --git a/system/public/aesthetic.computer/disks/notepat.mjs b/system/public/aesthetic.computer/disks/notepat.mjs
index 928c99c689..8f3c57281c 100644
--- a/system/public/aesthetic.computer/disks/notepat.mjs
+++ b/system/public/aesthetic.computer/disks/notepat.mjs
@@ -1082,7 +1082,7 @@ let paintPictureOverlay = false;
 
 // let qrcells;
 
-let waveBtn, octBtn;
+let waveBtn, octBtn, osBtn;
 let slideBtn, roomBtn, glitchBtn, quickBtn; // Toggle buttons for slide/room/glitch/quick modes
 let metroBtn, bpmMinusBtn, bpmPlusBtn; // Metronome controls
 let melodyAliasBtn;
@@ -1503,10 +1503,11 @@ async function boot({
     }
   }
 
-  buildWaveButton(api);
-  buildOctButton(api);
-  buildToggleButtons(api);
-  buildMetronomeButtons(api);
+  buildWaveButton(api);
+  buildOctButton(api);
+  buildOsButton(api);
+  buildToggleButtons(api);
+  buildMetronomeButtons(api);
 
   const newOctave =
     parseInt(colon[0]) || parseInt(colon[1]) || parseInt(colon[2]);
@@ -4416,7 +4417,42 @@ function paint({
     ink("yellow");
     write("tap", { right: 6, top: 6 });
   } else if (!paintPictureOverlay) {
-    waveBtn?.paint((btn) => {
+    osBtn?.paint((btn) => {
+      ink(btn.down ? [20, 70, 70] : [10, 45, 45]).box(
+        btn.box.x,
+        btn.box.y + 3,
+        btn.box.w,
+        btn.box.h - 3,
+      );
+      if (btn.over && !btn.down) {
+        ink(255, 255, 255, 24).box(
+          btn.box.x,
+          btn.box.y + 3,
+          btn.box.w,
+          btn.box.h - 3,
+        );
+        ink(100, 255, 255, 140).box(
+          btn.box.x,
+          btn.box.y + 3,
+          btn.box.w,
+          btn.box.h - 3,
+          "outline",
+        );
+      }
+      ink(70, 160, 160).line(
+        btn.box.x + btn.box.w,
+        btn.box.y + 3,
+        btn.box.x + btn.box.w,
+        btn.box.y + btn.box.h - 1,
+      );
+      ink(btn.down ? [220, 255, 255] : [120, 255, 255]).write(
+        "os",
+        { x: btn.box.x + 3, y: btn.box.y + 5 },
+        undefined, undefined, false, "MatrixChunky8"
+      );
+    });
+
+    waveBtn?.paint((btn) => {
       ink(btn.down ? [40, 40, 100] : "darkblue").box(
         btn.box.x,
         btn.box.y + 3,
@@ -5607,11 +5643,12 @@ function act({
     }
   }
   if (e.is("reframed")) {
-    setupButtons(api);
-    buildWaveButton(api);
-    buildOctButton(api);
-    buildToggleButtons(api);
-    buildMetronomeButtons(api);
+    setupButtons(api);
+    buildWaveButton(api);
+    buildOctButton(api);
+    buildOsButton(api);
+    buildToggleButtons(api);
+    buildMetronomeButtons(api);
     // Resize picture to quarter resolution (half width, half height)
     const resizedPictureWidth = Math.max(1, Math.floor(screen.width / 2));
     const resizedPictureHeight = Math.max(1, Math.floor(screen.height / 2));
@@ -5710,10 +5747,10 @@ function act({
     const topPianoWidth = Math.min(140, Math.floor((screen.width - topBarBase) * 0.5));
     const topPianoEndX = topBarBase + topPianoWidth;
     const vizLeft = topPianoEndX; // Start after piano
-    const vizRight = waveBtn?.box?.x || screen.width;
-    if (e.x >= vizLeft && e.x <= vizRight) {
-      recitalMode = true;
-      recitalBlinkPhase = 0;
+    const vizRight = (osBtn?.box?.x ?? waveBtn?.box?.x ?? screen.width) - 1;
+    if (e.x >= vizLeft && e.x <= vizRight) {
+      recitalMode = true;
+      recitalBlinkPhase = 0;
     }
   }
 
@@ -6616,15 +6653,23 @@ function act({
       },
     });
 
-    waveBtn?.act(e, {
-      down: () => api.beep(400),
-      push: (btn) => {
-        api.beep();
-        waveIndex = (waveIndex + 1) % wavetypes.length;
-        wave = wavetypes[waveIndex];
-        buildWaveButton(api);
-      },
-    });
+    waveBtn?.act(e, {
+      down: () => api.beep(400),
+      push: (btn) => {
+        api.beep();
+        waveIndex = (waveIndex + 1) % wavetypes.length;
+        wave = wavetypes[waveIndex];
+        buildWaveButton(api);
+      },
+    });
+
+    osBtn?.act(e, {
+      down: () => api.beep(400),
+      push: () => {
+        api.beep();
+        jump("os");
+      },
+    });
 
     // 🎛️ Toggle button interactions
     slideBtn?.act(e, {
@@ -7742,7 +7787,7 @@ function buildWaveButton({ screen, ui, typeface }) {
   waveBtn.displayWave = displayWave;
 }
 
-function buildOctButton({ screen, ui, typeface }) {
+function buildOctButton({ screen, ui, typeface }) {
   const isNarrow = screen.width < 200;
   const glyphWidth = typeface?.glyphs?.["0"]?.resolution?.[0] ?? matrixFont?.glyphs?.["0"]?.resolution?.[0] ?? 6;
   const octWidth = octave.length * glyphWidth;
@@ -7753,9 +7798,24 @@ function buildOctButton({ screen, ui, typeface }) {
     octWidth + margin * 2 + 7,
     10 + margin * 2 - 1 + 2,
   );
-  octBtn.id = "oct-button";
-  octBtn.isNarrow = isNarrow;
-}
+  octBtn.id = "oct-button";
+  octBtn.isNarrow = isNarrow;
+}
+
+function buildOsButton({ ui }) {
+  const margin = 4;
+  const labelWidth = 2 * 6;
+  const buttonWidth = labelWidth + margin * 2;
+  const buttonHeight = 10 + margin * 2 - 1 + 2;
+  const waveX = waveBtn?.box?.x ?? 9999;
+  osBtn = new ui.Button(
+    waveX - buttonWidth - 3,
+    0,
+    buttonWidth,
+    buttonHeight,
+  );
+  osBtn.id = "os-button";
+}
 
 // Build metronome controls and toggle buttons with responsive layout
 // Calculates available space and shortens labels as needed to prevent overlap
diff --git a/system/public/aesthetic.computer/lib/disk.mjs b/system/public/aesthetic.computer/lib/disk.mjs
index 2b20ff4ba9..78a78c853d 100644
--- a/system/public/aesthetic.computer/lib/disk.mjs
+++ b/system/public/aesthetic.computer/lib/disk.mjs
@@ -193,7 +193,7 @@ function isSandboxed() {
 }
 
 // Helper function to get safe protocol and hostname for URL construction
-function getSafeUrlParts() {
+function getSafeUrlParts() {
   try {
     const sandboxed = isSandboxed();
     
@@ -232,8 +232,51 @@ function getSafeUrlParts() {
       protocol: "https:",
       hostname: "aesthetic.computer"
     };
-  }
-}
+  }
+}
+
+const SAME_ORIGIN_BUILT_IN_PIECE_HOSTS = new Set([
+  "aesthetic.computer",
+  "www.aesthetic.computer",
+  "kidlisp.com",
+  "www.kidlisp.com",
+  "notepat.com",
+  "www.notepat.com",
+  "p5.aesthetic.computer",
+  "sitemap.aesthetic.computer",
+]);
+
+function isLocalDevelopmentHost(hostname) {
+  return (
+    hostname === "localhost" ||
+    hostname === "127.0.0.1" ||
+    /^192\.168\./.test(hostname) ||
+    /^10\./.test(hostname) ||
+    /^172\.(1[6-9]|2[0-9]|3[01])\./.test(hostname)
+  );
+}
+
+function getBuiltInPieceBaseUrl() {
+  const { protocol, hostname } = getSafeUrlParts();
+
+  if (typeof window !== "undefined" && window.acSPIDER) {
+    return "https://aesthetic.computer";
+  }
+
+  if (
+    isLocalDevelopmentHost(hostname) &&
+    typeof location !== "undefined" &&
+    location.port
+  ) {
+    return `${protocol}//${hostname}:${location.port}`;
+  }
+
+  if (SAME_ORIGIN_BUILT_IN_PIECE_HOSTS.has(hostname)) {
+    return `${protocol}//${hostname}`;
+  }
+
+  return "https://aesthetic.computer";
+}
 
 let tf; // Active typeface global.
 
@@ -2862,17 +2905,10 @@ const $commonApi = {
   },
   
   // 🎄 Preload piece modules for merry pipelines (prevents network latency during fast cycling)
-  preloadPieces: async function preloadPieces(pieceNames) {
+  preloadPieces: async function preloadPieces(pieceNames) {
     if (!pieceNames || pieceNames.length === 0) return;
     
-    const { protocol, hostname } = getSafeUrlParts();
-    const isDevelopment = hostname === 'localhost' && typeof location !== 'undefined' && location.port;
-    let baseUrl;
-    if (isDevelopment) {
-      baseUrl = `${protocol}//${hostname}:${location.port}`;
-    } else {
-      baseUrl = `https://aesthetic.computer`;
-    }
+    const baseUrl = getBuiltInPieceBaseUrl();
     
     const fetchPromises = pieceNames.map(async (piece) => {
       // Skip if already cached
@@ -2883,7 +2919,7 @@ const $commonApi = {
       
       try {
         // Try .mjs first, then .lua, then .lisp
-        const mjsUrl = `${baseUrl}/aesthetic.computer/disks/${piece}.mjs?v=${Date.now()}`;
+        const mjsUrl = `${baseUrl}/aesthetic.computer/disks/${piece}.mjs?v=${Date.now()}`;
         let response = await fetch(mjsUrl, { cache: 'no-store' });
         
         if (response.ok) {
@@ -2894,7 +2930,7 @@ const $commonApi = {
         }
         
         // Try .lua
-        const luaUrl = `${baseUrl}/aesthetic.computer/disks/${piece}.lua?v=${Date.now()}`;
+        const luaUrl = `${baseUrl}/aesthetic.computer/disks/${piece}.lua?v=${Date.now()}`;
         response = await fetch(luaUrl, { cache: 'no-store' });
         
         if (response.ok) {
@@ -2905,7 +2941,7 @@ const $commonApi = {
         }
         
         // Try .lisp
-        const lispUrl = `${baseUrl}/aesthetic.computer/disks/${piece}.lisp?v=${Date.now()}`;
+        const lispUrl = `${baseUrl}/aesthetic.computer/disks/${piece}.lisp?v=${Date.now()}`;
         response = await fetch(lispUrl, { cache: 'no-store' });
         
         if (response.ok) {
@@ -7404,18 +7440,8 @@ async function load(
         baseUrl = ".";
       } else {
         // Check if we're in a development environment (localhost with port)
-        const isDevelopment = hostname === 'localhost' && typeof location !== 'undefined' && location.port;
-        if (isDevelopment) {
-          // Use the local development server
-          baseUrl = `${protocol}//${hostname}:${location.port}`;
-        } else if (hostname === 'aesthetic.computer') {
-          // If we're on the main aesthetic.computer domain (not subdomain), use same origin
-          baseUrl = `${protocol}//${hostname}`;
-        } else {
-          // Use the production server for sandboxed iframes, spider mode, or any subdomain
-          baseUrl = `https://aesthetic.computer`;
-        }
-      }
+        baseUrl = getBuiltInPieceBaseUrl();
+      }
     } else {
       baseUrl = `${protocol}//${hostname}`;
     }
@@ -8650,17 +8676,7 @@ async function load(
         let baseUrl;
         if (path.startsWith('aesthetic.computer/')) {
           // Check if we're in a development environment (localhost with port)
-          const isDevelopment = hostname === 'localhost' && typeof location !== 'undefined' && location.port;
-          if (isDevelopment) {
-            // Use the local development server
-            baseUrl = `${protocol}//${hostname}:${location.port}`;
-          } else if (hostname.includes('aesthetic.computer')) {
-            // If we're on any aesthetic.computer subdomain, use the same origin to avoid CORS
-            baseUrl = `${protocol}//${hostname}`;
-          } else {
-            // Use the production server for sandboxed iframes or production
-            baseUrl = `https://aesthetic.computer`;
-          }
+          baseUrl = getBuiltInPieceBaseUrl();
           
           // Only strip "aesthetic.computer/" if we're using the main production domain
           if (baseUrl === 'https://aesthetic.computer') {
-- 
2.51.2