From fa00ec32cf016764e1e4c2e2d9ef2ed0e41e2230 Mon Sep 17 00:00:00 2001
From: elkaix <melkholy@techmatrix.com>
Date: Sun, 16 Aug 2026 11:34:18 -0400
Subject: [PATCH 1/7] chore: add the missing desktop release changesets

The Host port fix and the dedicated desktop update channel both merged without a changeset, so neither is versioned or recorded in the desktop changelog.
---
 .changeset/desktop-dedicated-update-channel.md | 5 +++++
 .changeset/desktop-pin-host-port.md            | 5 +++++
 2 files changed, 10 insertions(+)
 create mode 100644 .changeset/desktop-dedicated-update-channel.md
 create mode 100644 .changeset/desktop-pin-host-port.md

diff --git a/.changeset/desktop-dedicated-update-channel.md b/.changeset/desktop-dedicated-update-channel.md
new file mode 100644
index 00000000..92f79f0f
--- /dev/null
+++ b/.changeset/desktop-dedicated-update-channel.md
@@ -0,0 +1,5 @@
+---
+"@pymodel/pythinker-desktop": patch
+---
+
+Publish desktop releases to a dedicated update channel so update checks resolve a desktop build instead of an unrelated release, and fail the release when a packaged build carries no update feed.
diff --git a/.changeset/desktop-pin-host-port.md b/.changeset/desktop-pin-host-port.md
new file mode 100644
index 00000000..58497f40
--- /dev/null
+++ b/.changeset/desktop-pin-host-port.md
@@ -0,0 +1,5 @@
+---
+"@pymodel/pythinker-desktop": patch
+---
+
+Pin the Host port so the desktop app reconnects to its own Host, and stop reporting builds that cannot self-update as update errors.

From 525fc2773ddf0956b2369d9e415f972dbf5edfdc Mon Sep 17 00:00:00 2001
From: elkaix <melkholy@techmatrix.com>
Date: Sun, 16 Aug 2026 11:34:22 -0400
Subject: [PATCH 2/7] feat(site): rework the hero as a dark desktop-first
 section

Lead with a dark hero that presents the desktop app and an app-window preview, make the nav react to scroll, expand the cursor-aware particle field, and drop the CSS bubble decorations and the separate desktop showcase section.
---
 apps/site/src/App.vue                      | 423 +++++++++++---------
 apps/site/src/components/ParticleField.vue | 428 ++++++++++++++++-----
 apps/site/src/style.css                    |  77 +---
 3 files changed, 589 insertions(+), 339 deletions(-)

diff --git a/apps/site/src/App.vue b/apps/site/src/App.vue
index f11a78c9..45bb75f8 100644
--- a/apps/site/src/App.vue
+++ b/apps/site/src/App.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { onMounted, onUnmounted, ref } from 'vue';
 import AgentLoop from './components/AgentLoop.vue';
-import InstallCommand from './components/InstallCommand.vue';
+
 import LegacyDownloadsPopup from './components/LegacyDownloadsPopup.vue';
 import ParticleField from './components/ParticleField.vue';
 import PythinkerMascot from './components/PythinkerMascot.vue';
@@ -86,6 +86,7 @@ const terminalDemos = [
 const vscodeInstallCommand = 'code --install-extension pymodel.pythinker';
 
 const copiedCommand = ref('');
+const scrolled = ref(false);
 const mobileMenu = ref(null);
 const menuButton = ref(null);
 const menuOpen = ref(false);
@@ -195,9 +196,15 @@ function onDocumentKeydown(event) {
   if (event.key === 'Escape') closeMenu();
 }
 
+function onScroll() {
+  scrolled.value = window.scrollY > 40;
+}
+
 onMounted(() => {
   document.addEventListener('pointerdown', onDocumentPointerdown);
   document.addEventListener('keydown', onDocumentKeydown);
+  window.addEventListener('scroll', onScroll, { passive: true });
+  onScroll();
   reducedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
   playTerminalDemo();
   if (reducedMotionQuery.matches) return;
@@ -220,12 +227,13 @@ onUnmounted(() => {
   revealObserver?.disconnect();
   document.removeEventListener('pointerdown', onDocumentPointerdown);
   document.removeEventListener('keydown', onDocumentKeydown);
+  window.removeEventListener('scroll', onScroll);
 });
 </script>
 
 <template>
   <ParticleField />
-  <nav class="site-nav" aria-label="Primary navigation">
+  <nav class="site-nav" :class="{ 'is-scrolled': scrolled }" aria-label="Primary navigation">
     <div class="container nav-inner">
       <a href="/" class="nav-brand"><PythinkerMascot :width="26" :height="32" /><span>Pythinker Code</span></a>
       <div class="nav-actions">
@@ -254,63 +262,46 @@ onUnmounted(() => {
   </nav>
 
   <main id="top">
-    <header class="hero container">
-      <div class="hero-copy">
-        <PythinkerMascot class="hero-mascot" :width="164" :height="205" />
-        <h1>Pythinker Code</h1>
-        <p class="hero-accent">Think first, then code.</p>
-        <p class="hero-lead">Pythinker Code is an open-source AI engineering agent. It reads your repo, edits files, runs commands, and iterates until the job is done &mdash; in a native desktop app, your terminal, or VS Code.</p>
-        <div class="hero-download">
-          <div class="hero-download-actions">
-            <a
-              v-for="(download, index) in heroDownloads"
-              :key="download.id"
-              :class="index === 0 ? 'button button-primary' : 'button button-secondary'"
-              :href="download.href"
-              rel="noopener"
-            >
-              <img :src="download.icon" alt="" aria-hidden="true" class="button-platform-icon" />
-              {{ download.label }}
+    <div id="desktop" class="hero-dark">
+      <header class="hero container">
+        <div class="hero-copy">
+          <h1>Pythinker<br>Code<br>Desktop</h1>
+          <p class="hero-lead">A native AI engineering agent for macOS and Windows. It reads your repo, edits files, runs commands, and iterates until the job is done.</p>
+          <div class="hero-download">
+            <div class="hero-download-actions">
+              <a
+                v-for="download in heroDownloads"
+                :key="download.id"
+                class="button button-hero"
+                :href="download.href"
+                rel="noopener"
+              >
+                <img :src="download.icon" alt="" aria-hidden="true" class="button-platform-icon" />
+                {{ download.label }}
+              </a>
+            </div>
+          </div>
+          <div class="hero-meta">
+            <a class="button button-ghost" href="https://github.com/PyModel/pythinker-code" target="_blank" rel="noopener">
+              <img src="/brand/github.svg" alt="" width="16" height="16" />
+              View on GitHub
             </a>
+            <span class="hero-install-hint">or <a href="#install">install the CLI</a></span>
           </div>
-          <p class="hero-download-note">
-            {{ heroDownloads.map((download) => download.note).join(' · ') }} ·
-            <a :href="heroDownloadsPage" target="_blank" rel="noopener">All downloads</a>
-          </p>
-        </div>
-        <p class="hero-install-label">Or install the CLI</p>
-        <div class="hero-install">
-          <InstallCommand />
+          <p class="hero-caption">Free and open source. MIT licensed. macOS, Linux, and Windows.</p>
         </div>
-        <p class="hero-caption">Free and open source. MIT licensed. macOS, Linux, and Windows.</p>
-      </div>
-    </header>
-
-    <section id="desktop" class="section container desktop-showcase" aria-labelledby="desktop-title">
-      <div class="desktop-showcase-media reveal">
-        <video autoplay muted loop playsinline preload="metadata" poster="/pythinker_desktop.png" aria-label="Pythinker Desktop app">
-          <source src="/pythinker_desktop.webm" type="video/webm" />
-          <img src="/pythinker_desktop.webp" alt="Pythinker Desktop showing an AI coding session" />
-        </video>
-        <img class="desktop-showcase-still" src="/pythinker_desktop.webp" alt="Pythinker Desktop showing an AI coding session" />
-      </div>
-      <div class="desktop-showcase-copy reveal">
-        <p class="eyebrow">Desktop app</p>
-        <h2 id="desktop-title" class="display-md">Pythinker Desktop</h2>
-        <p class="desktop-showcase-lead">The agent in native macOS and Windows apps, with sidebar sessions, live activity, and auto-updates.</p>
-        <div class="desktop-showcase-actions">
-          <a class="button button-primary" :href="desktopDownloads.mac" rel="noopener">
-            <img src="/brand/apple.svg" alt="" aria-hidden="true" class="button-platform-icon" />
-            Download for macOS
-          </a>
-          <a class="button button-secondary" :href="desktopDownloads.windows" rel="noopener">
-            <img src="/brand/windows11.svg" alt="" aria-hidden="true" class="button-platform-icon" />
-            Download for Windows
-          </a>
-          <span class="desktop-showcase-note">Auto-updates included · Apple Silicon and Windows x64</span>
+        <div class="hero-preview">
+          <div class="hero-preview-window">
+            <div class="hero-preview-titlebar">
+              <span class="hero-preview-light"></span>
+              <span class="hero-preview-light"></span>
+              <span class="hero-preview-light"></span>
+            </div>
+            <img src="/pythinker_desktop.webp" alt="Pythinker Desktop showing an AI coding session" width="2048" height="1300" loading="eager" />
+          </div>
         </div>
-      </div>
-    </section>
+      </header>
+    </div>
 
     <div class="works-with" aria-label="Works with leading AI models">
       <span class="works-with-label">Works with</span>
@@ -569,15 +560,62 @@ onUnmounted(() => {
 
 <style scoped>
 .site-nav {
-  position: sticky;
+  position: fixed;
   z-index: 10;
   top: 0;
+  right: 0;
+  left: 0;
   height: 64px;
-  border-bottom: 1px solid var(--hairline);
-  background: rgba(255, 255, 255, 0.9);
+  border-bottom: 1px solid transparent;
+  background: transparent;
+  transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
+}
+
+.site-nav.is-scrolled {
+  border-bottom-color: var(--hairline);
+  background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(8px);
 }
 
+.site-nav:not(.is-scrolled) .nav-brand {
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.site-nav:not(.is-scrolled) .nav-brand :deep(svg) {
+  filter: brightness(0) invert(1);
+}
+
+.site-nav:not(.is-scrolled) .nav-links a {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.site-nav:not(.is-scrolled) .nav-links a:hover {
+  color: #ffffff;
+}
+
+.site-nav:not(.is-scrolled) .nav-links img {
+  filter: brightness(0) invert(1);
+}
+
+.site-nav:not(.is-scrolled) .nav-cta {
+  background: rgba(255, 255, 255, 0.12);
+  color: #ffffff;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+}
+
+.site-nav:not(.is-scrolled) .nav-cta:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.site-nav:not(.is-scrolled) .menu-button {
+  background: rgba(255, 255, 255, 0.1);
+  color: #ffffff;
+}
+
+.site-nav:not(.is-scrolled) .menu-button:hover {
+  background: rgba(255, 255, 255, 0.18);
+}
+
 .nav-inner {
   display: flex;
   height: 100%;
@@ -708,168 +746,190 @@ onUnmounted(() => {
   transform: translateY(-4px);
 }
 
+/* ---- Dark hero ---- */
+
+.hero-dark {
+  position: relative;
+  padding-top: 64px; /* nav height offset (nav is now fixed) */
+  overflow: hidden;
+  background: transparent;
+}
+
 .hero {
   position: relative;
-  isolation: isolate;
-  padding-top: 24px;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: minmax(0, 520px) 1fr;
+  align-items: center;
+  gap: 48px;
+  padding-top: 72px;
+  padding-bottom: 80px;
 }
 
 .hero-copy {
-  max-width: 780px;
-  margin-inline: auto;
-  text-align: center;
+  text-align: left;
 }
 
 .hero h1 {
-  margin-top: 18px;
-  color: var(--ink);
-  font-size: clamp(52px, 9vw, 88px);
-  font-weight: 700;
-  line-height: 1.1;
-  letter-spacing: -0.02em;
-}
-
-.hero-accent {
-  margin-top: 8px;
-  color: var(--ink-muted);
-  font-size: clamp(24px, 3.4vw, 34px);
-  font-style: italic;
+  color: #f1f5fa;
+  font-size: clamp(48px, 8vw, 80px);
   font-weight: 700;
-  line-height: 1.2;
+  line-height: 1.05;
+  letter-spacing: -0.025em;
 }
 
 .hero-lead {
-  max-width: 640px;
+  max-width: 480px;
   margin-top: 24px;
-  margin-inline: auto;
-  color: var(--ink-muted);
-  font-size: 20px;
-  font-weight: 500;
-  line-height: 1.5;
+  color: rgba(241, 245, 250, 0.55);
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 1.6;
 }
 
 .hero-download {
-  margin-top: 24px;
+  margin-top: 32px;
 }
 
 .hero-download-actions {
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
-  gap: 10px;
+  gap: 12px;
 }
 
-.hero-install {
-  max-width: 720px;
-  margin: 10px auto 0;
+.button-hero {
+  gap: 10px;
+  min-height: 52px;
+  padding: 12px 24px;
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  border-radius: var(--r-pill);
+  background: rgba(255, 255, 255, 0.95);
+  color: #111113;
+  font-size: 15px;
+  font-weight: 600;
+  transition: background-color 150ms ease, transform 150ms ease;
 }
 
-.milestone-footnote {
-  display: flex;
-  justify-content: center;
-  margin-block: 48px;
+.button-hero:hover {
+  background: #ffffff;
+  transform: translateY(-1px);
 }
 
-.hero-download-note,
-.hero-install-label,
-.hero-caption {
-  color: var(--ink-subtle);
-  font-size: 13px;
+.button-hero .button-platform-icon {
+  width: 18px;
+  height: 18px;
 }
 
-.hero-download-note {
-  margin-top: 10px;
-  line-height: 1.38;
+.hero-meta {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-top: 20px;
 }
 
-.hero-install-label {
-  margin-top: 20px;
+.button-ghost {
+  gap: 8px;
+  min-height: 44px;
+  padding: 10px 18px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  border-radius: var(--r-pill);
+  background: transparent;
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 14px;
+  font-weight: 600;
+  transition: background-color 150ms ease, border-color 150ms ease;
 }
 
-.hero-caption {
-  margin-top: 12px;
-  line-height: 1.38;
+.button-ghost:hover {
+  border-color: rgba(255, 255, 255, 0.32);
+  background: rgba(255, 255, 255, 0.06);
 }
 
-.hero-mascot {
-  display: block;
-  width: clamp(128px, 12vw, 164px);
-  height: auto;
-  margin-inline: auto;
+.button-ghost img {
+  width: 16px;
+  height: 16px;
+  filter: brightness(0) invert(1);
+  opacity: 0.7;
 }
 
-.desktop-showcase {
-  display: grid;
-  grid-template-columns: 3fr 2fr;
-  align-items: center;
-  gap: 48px;
+.hero-install-hint {
+  color: rgba(241, 245, 250, 0.4);
+  font-size: 14px;
 }
 
-.desktop-showcase-media {
-  width: 100%;
-  max-width: 100%;
-  min-width: 0;
-  overflow: hidden;
-  aspect-ratio: 2048 / 1300;
-  border: 1px solid var(--hairline);
-  border-radius: var(--r-lg);
-  background: var(--terminal-bg);
-  box-shadow: var(--shadow-terminal);
+.hero-install-hint a {
+  color: rgba(241, 245, 250, 0.65);
+  text-decoration: underline;
+  text-underline-offset: 2px;
 }
 
-.desktop-showcase-media video,
-.desktop-showcase-media video > img,
-.desktop-showcase-media > img {
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  height: 100%;
-  object-fit: cover;
+.hero-install-hint a:hover {
+  color: rgba(241, 245, 250, 0.9);
 }
 
-.desktop-showcase-still {
-  display: none !important;
+.hero-caption {
+  margin-top: 20px;
+  color: rgba(241, 245, 250, 0.3);
+  font-size: 13px;
+  line-height: 1.38;
 }
 
-.desktop-showcase-copy {
+.milestone-footnote {
   display: flex;
-  flex-direction: column;
-  gap: 20px;
-  align-items: flex-start;
+  justify-content: center;
+  margin-block: 48px;
 }
 
-.desktop-showcase-lead {
-  color: var(--ink-muted);
-  font-size: 16px;
-  line-height: 1.6;
+/* ---- Hero app preview ---- */
+
+.hero-preview {
+  position: relative;
+  margin-right: calc(-48px - 40px); /* bleed past container */
 }
 
-.desktop-showcase-actions {
+.hero-preview-window {
+  position: relative;
+  overflow: hidden;
+  border-radius: 12px 0 0 12px;
+  background: #1a1a2e;
+  box-shadow:
+    0 48px 100px -24px rgba(0, 0, 0, 0.7),
+    0 24px 48px -12px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.06);
+}
+
+.hero-preview-titlebar {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
-  gap: 16px;
+  gap: 8px;
+  padding: 12px 16px;
+  background: linear-gradient(180deg, #3a3a4a 0%, #2e2e3e 100%);
 }
 
-.button-platform-icon {
-  width: 16px;
-  height: 16px;
+.hero-preview-light {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 0.5px solid rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.1);
 }
 
-.desktop-showcase-actions .button,
-.hero-download-actions .button {
-  gap: 8px;
+.hero-preview-light:nth-child(1) {
+  background: #ff5f57;
 }
 
-.desktop-showcase-actions .button-primary .button-platform-icon,
-.hero-download-actions .button-primary .button-platform-icon {
-  filter: brightness(0) invert(1);
+.hero-preview-light:nth-child(2) {
+  background: #febc2e;
 }
 
-.desktop-showcase-note {
-  color: var(--ink-subtle);
-  font-size: 13px;
-  line-height: 1.5;
+.hero-preview-light:nth-child(3) {
+  background: #28c840;
+}
+
+.hero-preview-window img {
+  display: block;
+  width: 100%;
+  height: auto;
 }
 
 .works-with {
@@ -1804,10 +1864,20 @@ onUnmounted(() => {
 }
 
 @media (max-width: 899px) {
+  .hero {
+    grid-template-columns: 1fr;
+    gap: 40px;
+    padding-top: 48px;
+    padding-bottom: 56px;
+  }
+
+  .hero-preview {
+    margin-right: calc(-24px - 20px);
+  }
+
   .quickstart-grid,
   .docs-grid,
-  .vscode-grid,
-  .desktop-showcase {
+  .vscode-grid {
     grid-template-columns: 1fr;
   }
 
@@ -1898,11 +1968,28 @@ onUnmounted(() => {
 
 @media (max-width: 640px) {
   .hero {
-    padding-top: 0;
+    padding-top: 32px;
+    padding-bottom: 40px;
+  }
+
+  .hero h1 {
+    font-size: clamp(36px, 10vw, 48px);
   }
 
   .hero-lead {
-    font-size: 18px;
+    font-size: 16px;
+  }
+
+  .hero-download-actions {
+    flex-direction: column;
+  }
+
+  .hero-preview {
+    margin-right: -24px;
+  }
+
+  .hero-preview-window {
+    border-radius: 10px 0 0 10px;
   }
 
   .terminal-header {
@@ -1967,14 +2054,6 @@ onUnmounted(() => {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .desktop-showcase-media video {
-    display: none;
-  }
-
-  .desktop-showcase-media .desktop-showcase-still {
-    display: block !important;
-  }
-
   .works-with-track {
     animation: none;
   }
diff --git a/apps/site/src/components/ParticleField.vue b/apps/site/src/components/ParticleField.vue
index e5622b84..4b856dd7 100644
--- a/apps/site/src/components/ParticleField.vue
+++ b/apps/site/src/components/ParticleField.vue
@@ -4,107 +4,301 @@ import { nextTick, onMounted, onUnmounted, ref } from 'vue';
 const canvas = ref(null);
 const enabled = ref(false);
 
-let context;
-let animationFrame;
-let particles = [];
+let gl = null;
+let ctx2d = null;
+let animationFrame = null;
+let program = null;
+let buffer = null;
+let uniformLocations = {};
+let startTime = 0;
 let viewportWidth = 0;
 let viewportHeight = 0;
 let mounted = false;
+let isWebGL = false;
 
-const pointer = { x: Infinity, y: Infinity };
-const pointerRadius = 120;
-
-function createParticles() {
-  const count = Math.max(40, Math.min(90, Math.round((viewportWidth * viewportHeight) / 16000)));
-  particles = Array.from({ length: count }, () => {
-    const homeX = Math.random() * viewportWidth;
-    const homeY = Math.random() * viewportHeight;
-    return {
-      homeX,
-      homeY,
-      x: homeX,
-      y: homeY,
-      velocityX: 0,
-      velocityY: 0,
-      driftX: (Math.random() - 0.5) * 0.08,
-      driftY: (Math.random() - 0.5) * 0.08,
-      radius: 0.8 + Math.random(),
-      color: Math.random() < 0.06 ? 'rgba(43, 137, 255, 0.35)' : 'rgba(17, 17, 19, 0.22)',
-    };
-  });
+// 2D Canvas fallback dots state
+let fallbackDots = [];
+
+const vsSource = `
+  attribute vec2 a_position;
+  void main() {
+    gl_Position = vec4(a_position, 0.0, 1.0);
+  }
+`;
+
+const fsSource = `
+  precision highp float;
+  uniform vec2 u_resolution;
+  uniform float u_time;
+  uniform float u_dpr;
+
+  // High quality pseudo-random hashes
+  float hash21(vec2 p) {
+    p = fract(p * vec2(123.34, 456.21));
+    p += dot(p, p + 45.32);
+    return fract(p.x * p.y);
+  }
+
+  float hash22(vec2 p) {
+    return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453123);
+  }
+
+  void main() {
+    vec2 st = gl_FragCoord.xy;
+    vec2 center = u_resolution * 0.5;
+
+    // Uniform grid spacing (~28 physical px scaled by DPR for consistent density)
+    float gridPitch = 26.0 * u_dpr;
+    float dotRadius = (6.0 * 0.5) * u_dpr; // 6px dot diameter
+
+    // Grid cell identification
+    vec2 cellIndex = floor(st / gridPitch);
+    vec2 cellCenter = (cellIndex + 0.5) * gridPitch;
+
+    // Distance to dot center in current cell
+    vec2 delta = st - cellCenter;
+    float distToDot = length(delta);
+
+    // Sharp dot shape with subtle sub-pixel anti-aliasing
+    float dotMask = 1.0 - smoothstep(dotRadius - 0.75 * u_dpr, dotRadius + 0.75 * u_dpr, distToDot);
+
+    if (dotMask <= 0.001) {
+      gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
+      return;
+    }
+
+    // Distance from viewport center (normalized 0.0 at center to 1.0+ at corners)
+    float maxDim = length(center);
+    float distFromCenter = length(cellCenter - center) / maxDim;
+
+    // Random seeds per cell for organic timing & opacity variation
+    float cellHash = hash21(cellIndex);
+    float cellHash2 = hash22(cellIndex);
+
+    // Subtle, technical, randomized base opacity (monochrome white/gray)
+    float baseOpacity = 0.12 + 0.42 * cellHash;
+
+    // Organic timing offset per dot for non-uniform wave front
+    float organicDist = distFromCenter + (cellHash - 0.5) * 0.26;
+
+    // Layer 1: Forward radial reveal wave (expanding outward from center)
+    float speed1 = 0.22;
+    float cycle1 = 7.0;
+    float t1 = mod(u_time * speed1, cycle1);
+    float waveProgress1 = (t1 / cycle1) * 2.2 - 0.2;
+    float forwardWave = smoothstep(waveProgress1 - 0.55, waveProgress1, organicDist)
+                      * (1.0 - smoothstep(waveProgress1, waveProgress1 + 0.55, organicDist));
+
+    // Layer 2: Reverse exit wave (disappearing toward outward regions with different speed)
+    float speed2 = 0.16;
+    float cycle2 = 8.5;
+    float t2 = mod(u_time * speed2 + 3.2, cycle2);
+    float waveProgress2 = (t2 / cycle2) * 2.2 - 0.2;
+    float reverseWave = smoothstep(waveProgress2 - 0.65, waveProgress2, organicDist)
+                      * (1.0 - smoothstep(waveProgress2, waveProgress2 + 0.65, organicDist));
+
+    // Subtle atmospheric baseline presence
+    float ambientPresence = 0.06 * (0.5 + 0.5 * sin(u_time * 0.4 + cellHash2 * 6.2831));
+
+    // Combined animated intensity
+    float waveAlpha = clamp(forwardWave * 0.85 + reverseWave * 0.60 + ambientPresence, 0.0, 1.0);
+    float dotAlpha = baseOpacity * waveAlpha * dotMask;
+
+    // Atmospheric Masking (pure black base):
+    // 1. Strong black radial gradient centered on viewport:
+    //    keeps center dark, allows dot texture to emerge away from center
+    float centerMask = smoothstep(0.08, 0.50, distFromCenter);
+
+    // 2. Top-to-bottom black gradient covering roughly upper third (fades upper area to pure black)
+    float yNorm = st.y / u_resolution.y; // 0.0 at bottom, 1.0 at top in WebGL
+    float topMask = smoothstep(0.96, 0.62, yNorm);
+    float bottomMask = smoothstep(0.02, 0.15, yNorm);
+
+    // Final monochrome white dot on pure black canvas
+    float finalAlpha = dotAlpha * centerMask * topMask * bottomMask;
+
+    gl_FragColor = vec4(vec3(finalAlpha), 1.0);
+  }
+`;
+
+function createShader(glCtx, type, source) {
+  const shader = glCtx.createShader(type);
+  glCtx.shaderSource(shader, source);
+  glCtx.compileShader(shader);
+  if (!glCtx.getShaderParameter(shader, glCtx.COMPILE_STATUS)) {
+    console.warn('WebGL shader compile error:', glCtx.getShaderInfoLog(shader));
+    glCtx.deleteShader(shader);
+    return null;
+  }
+  return shader;
 }
 
-function resize() {
-  viewportWidth = window.innerWidth;
-  viewportHeight = window.innerHeight;
-  const pixelRatio = Math.min(window.devicePixelRatio || 1, 2);
+function initWebGL() {
+  const cvs = canvas.value;
+  if (!cvs) return false;
+
+  gl = cvs.getContext('webgl', { antialias: false, alpha: false, depth: false, stencil: false })
+    || cvs.getContext('experimental-webgl');
+  if (!gl) return false;
+
+  const vs = createShader(gl, gl.VERTEX_SHADER, vsSource);
+  const fs = createShader(gl, gl.FRAGMENT_SHADER, fsSource);
+  if (!vs || !fs) return false;
+
+  program = gl.createProgram();
+  gl.attachShader(program, vs);
+  gl.attachShader(program, fs);
+  gl.linkProgram(program);
+
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    console.warn('WebGL program link error:', gl.getProgramInfoLog(program));
+    return false;
+  }
+
+  gl.useProgram(program);
+
+  // Full screen quad (-1 to 1)
+  const vertices = new Float32Array([
+    -1.0, -1.0,
+     1.0, -1.0,
+    -1.0,  1.0,
+    -1.0,  1.0,
+     1.0, -1.0,
+     1.0,  1.0,
+  ]);
 
-  context.setTransform(1, 0, 0, 1, 0, 0);
-  canvas.value.width = Math.round(viewportWidth * pixelRatio);
-  canvas.value.height = Math.round(viewportHeight * pixelRatio);
-  context.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
-  createParticles();
+  buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+
+  const positionLocation = gl.getAttribLocation(program, 'a_position');
+  gl.enableVertexAttribArray(positionLocation);
+  gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
+
+  uniformLocations = {
+    resolution: gl.getUniformLocation(program, 'u_resolution'),
+    time: gl.getUniformLocation(program, 'u_time'),
+    dpr: gl.getUniformLocation(program, 'u_dpr'),
+  };
+
+  return true;
 }
 
-function moveParticles() {
-  for (const particle of particles) {
-    particle.homeX += particle.driftX;
-    particle.homeY += particle.driftY;
-    if (particle.homeX < 0 || particle.homeX > viewportWidth) particle.driftX *= -1;
-    if (particle.homeY < 0 || particle.homeY > viewportHeight) particle.driftY *= -1;
-
-    const deltaX = particle.x - pointer.x;
-    const deltaY = particle.y - pointer.y;
-    const distance = Math.hypot(deltaX, deltaY);
-
-    if (distance < pointerRadius) {
-      const force = ((pointerRadius - distance) / pointerRadius) * 0.8;
-      const safeDistance = Math.max(distance, 0.01);
-      particle.velocityX += (deltaX / safeDistance) * force;
-      particle.velocityY += (deltaY / safeDistance) * force;
-    } else {
-      particle.velocityX += (particle.homeX - particle.x) * 0.008;
-      particle.velocityY += (particle.homeY - particle.y) * 0.008;
-    }
+function init2DFallback() {
+  const cvs = canvas.value;
+  if (!cvs) return;
+  ctx2d = cvs.getContext('2d');
+  createFallbackGrid();
+}
 
-    particle.velocityX *= 0.92;
-    particle.velocityY *= 0.92;
-    particle.x += particle.velocityX;
-    particle.y += particle.velocityY;
+function createFallbackGrid() {
+  const gridPitch = 26;
+  const cols = Math.ceil(viewportWidth / gridPitch);
+  const rows = Math.ceil(viewportHeight / gridPitch);
+  const cx = viewportWidth / 2;
+  const cy = viewportHeight / 2;
+  const maxDim = Math.hypot(cx, cy);
+
+  fallbackDots = [];
+  for (let c = 0; c < cols; c++) {
+    for (let r = 0; r < rows; r++) {
+      const x = (c + 0.5) * gridPitch;
+      const y = (r + 0.5) * gridPitch;
+      const dist = Math.hypot(x - cx, y - cy) / maxDim;
+      const hash = Math.abs(Math.sin(c * 12.9898 + r * 78.233) * 43758.5453) % 1;
+      fallbackDots.push({
+        x,
+        y,
+        dist,
+        hash,
+        baseAlpha: 0.12 + 0.42 * hash,
+        noiseDist: dist + (hash - 0.5) * 0.26,
+      });
+    }
   }
 }
 
-function drawParticles() {
-  context.clearRect(0, 0, viewportWidth, viewportHeight);
-  moveParticles();
+function resize() {
+  viewportWidth = window.innerWidth;
+  viewportHeight = window.innerHeight;
+  const dpr = Math.min(window.devicePixelRatio || 1, 2);
 
-  for (const particle of particles) {
-    context.beginPath();
-    context.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
-    context.fillStyle = particle.color;
-    context.fill();
+  if (canvas.value) {
+    canvas.value.width = Math.round(viewportWidth * dpr);
+    canvas.value.height = Math.round(viewportHeight * dpr);
+  }
+
+  if (isWebGL && gl && program) {
+    gl.viewport(0, 0, canvas.value.width, canvas.value.height);
+    gl.useProgram(program);
+    gl.uniform2f(uniformLocations.resolution, canvas.value.width, canvas.value.height);
+    gl.uniform1f(uniformLocations.dpr, dpr);
+  } else if (ctx2d) {
+    createFallbackGrid();
   }
 }
 
-function animate() {
-  drawParticles();
-  animationFrame = window.requestAnimationFrame(animate);
+function render(timestamp) {
+  const timeSec = (timestamp - startTime) * 0.001;
+
+  if (isWebGL && gl && program) {
+    gl.useProgram(program);
+    gl.uniform1f(uniformLocations.time, timeSec);
+    gl.drawArrays(gl.TRIANGLES, 0, 6);
+  } else if (ctx2d) {
+    const dpr = Math.min(window.devicePixelRatio || 1, 2);
+    ctx2d.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx2d.fillStyle = '#000000';
+    ctx2d.fillRect(0, 0, viewportWidth, viewportHeight);
+
+    const speed1 = 0.22;
+    const cycle1 = 7.0;
+    const t1 = (timeSec * speed1) % cycle1;
+    const waveProgress1 = (t1 / cycle1) * 2.2 - 0.2;
+
+    const speed2 = 0.16;
+    const cycle2 = 8.5;
+    const t2 = (timeSec * speed2 + 3.2) % cycle2;
+    const waveProgress2 = (t2 / cycle2) * 2.2 - 0.2;
+
+    for (const dot of fallbackDots) {
+      const d1 = dot.noiseDist;
+      let fw = 0;
+      if (d1 >= waveProgress1 - 0.55 && d1 <= waveProgress1 + 0.55) {
+        fw = Math.sin(((d1 - (waveProgress1 - 0.55)) / 1.1) * Math.PI);
+      }
+      let rw = 0;
+      if (d1 >= waveProgress2 - 0.65 && d1 <= waveProgress2 + 0.65) {
+        rw = Math.sin(((d1 - (waveProgress2 - 0.65)) / 1.3) * Math.PI);
+      }
+      const anim = Math.max(0, Math.min(1, fw * 0.85 + rw * 0.60 + 0.05));
+      const centerMask = Math.max(0, Math.min(1, (dot.dist - 0.08) / 0.42));
+      const yNorm = 1.0 - dot.y / viewportHeight;
+      const topMask = Math.max(0, Math.min(1, (yNorm - 0.62) / 0.34));
+      const alpha = dot.baseAlpha * anim * centerMask * (1.0 - topMask * 0.85);
+
+      if (alpha > 0.01) {
+        ctx2d.fillStyle = `rgba(255, 255, 255, ${alpha.toFixed(3)})`;
+        ctx2d.beginPath();
+        ctx2d.arc(dot.x, dot.y, 3, 0, Math.PI * 2);
+        ctx2d.fill();
+      }
+    }
+  }
+
+  animationFrame = window.requestAnimationFrame(render);
 }
 
 function startAnimation() {
-  if (animationFrame !== undefined || document.hidden) return;
-  animationFrame = window.requestAnimationFrame(animate);
+  if (animationFrame !== null || document.hidden) return;
+  startTime = performance.now();
+  animationFrame = window.requestAnimationFrame(render);
 }
 
 function stopAnimation() {
-  if (animationFrame === undefined) return;
+  if (animationFrame === null) return;
   window.cancelAnimationFrame(animationFrame);
-  animationFrame = undefined;
-}
-
-function onPointerMove(event) {
-  pointer.x = event.clientX;
-  pointer.y = event.clientY;
+  animationFrame = null;
 }
 
 function onVisibilityChange() {
@@ -114,45 +308,97 @@ function onVisibilityChange() {
 
 onMounted(async () => {
   mounted = true;
-  if (
-    window.matchMedia('(prefers-reduced-motion: reduce)').matches
-    || !window.matchMedia('(pointer: fine)').matches
-  ) return;
-
   enabled.value = true;
   await nextTick();
   if (!mounted) return;
 
-  context = canvas.value?.getContext('2d');
-  if (!context) return;
+  isWebGL = initWebGL();
+  if (!isWebGL) {
+    init2DFallback();
+  }
 
   resize();
-  window.addEventListener('pointermove', onPointerMove, { passive: true });
-  window.addEventListener('resize', resize);
+  window.addEventListener('resize', resize, { passive: true });
   document.addEventListener('visibilitychange', onVisibilityChange);
-  startAnimation();
+
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+    // Render single static frame for reduced motion
+    render(performance.now());
+    stopAnimation();
+  } else {
+    startAnimation();
+  }
 });
 
 onUnmounted(() => {
   mounted = false;
   stopAnimation();
-  window.removeEventListener('pointermove', onPointerMove);
   window.removeEventListener('resize', resize);
   document.removeEventListener('visibilitychange', onVisibilityChange);
+  if (gl && program) {
+    gl.deleteProgram(program);
+    gl.deleteBuffer(buffer);
+  }
 });
 </script>
 
 <template>
-  <canvas v-if="enabled" ref="canvas" class="particle-field" aria-hidden="true"></canvas>
+  <div class="dot-matrix-bg-container" aria-hidden="true">
+    <canvas v-if="enabled" ref="canvas" class="dot-matrix-canvas"></canvas>
+    <!-- Atmospheric Masking Layers -->
+    <div class="atmospheric-mask atmospheric-mask--radial"></div>
+    <div class="atmospheric-mask atmospheric-mask--gradient"></div>
+  </div>
 </template>
 
 <style scoped>
-.particle-field {
+.dot-matrix-bg-container {
   position: fixed;
-  z-index: -1;
+  z-index: 0;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: #000000;
+  overflow: hidden;
+  pointer-events: none;
+  contain: strict;
+}
+
+.dot-matrix-canvas {
+  position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
+  display: block;
+}
+
+/* Atmospheric masking over particles */
+.atmospheric-mask {
+  position: absolute;
+  inset: 0;
   pointer-events: none;
 }
+
+/* 1. Strong black radial gradient keeping center dark */
+.atmospheric-mask--radial {
+  background: radial-gradient(
+    circle at 50% 50%,
+    rgba(0, 0, 0, 0.94) 0%,
+    rgba(0, 0, 0, 0.70) 30%,
+    rgba(0, 0, 0, 0.20) 65%,
+    rgba(0, 0, 0, 0.85) 100%
+  );
+}
+
+/* 2. Top-to-bottom black gradient covering upper third */
+.atmospheric-mask--gradient {
+  background: linear-gradient(
+    180deg,
+    #000000 0%,
+    rgba(0, 0, 0, 0.90) 18%,
+    rgba(0, 0, 0, 0.0) 38%,
+    rgba(0, 0, 0, 0.0) 75%,
+    rgba(0, 0, 0, 0.95) 100%
+  );
+}
 </style>
diff --git a/apps/site/src/style.css b/apps/site/src/style.css
index 60c968a4..801407d7 100644
--- a/apps/site/src/style.css
+++ b/apps/site/src/style.css
@@ -52,83 +52,13 @@ body {
   min-width: 320px;
   min-height: 100vh;
   overflow-x: clip;
-  background-color: var(--canvas);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M48 0H0v48' fill='none' stroke='%23111113' stroke-opacity='0.045' stroke-width='1'/%3E%3C/svg%3E");
+  background-color: #000000;
   color: var(--ink);
   font-size: 17px;
   font-weight: 400;
   line-height: 1.55;
 }
 
-body::before,
-body::after {
-  position: fixed;
-  z-index: 0;
-  width: clamp(340px, 34vw, 520px);
-  border: 1px solid rgba(43, 137, 255, 0.1);
-  border-radius: 50%;
-  aspect-ratio: 1;
-  content: '';
-  pointer-events: none;
-  will-change: transform;
-}
-
-body::before {
-  top: 12vh;
-  left: clamp(-300px, -18vw, -190px);
-  background:
-    radial-gradient(circle at 64% 32%, rgba(255, 255, 255, 0.78) 0 4%, transparent 5%),
-    radial-gradient(circle at 58% 46%, var(--bubble-cyan), var(--bubble-blue) 42%, rgba(43, 137, 255, 0.035) 67%, transparent 72%);
-  box-shadow:
-    112px 300px 0 -190px rgba(92, 206, 255, 0.13),
-    188px -38px 0 -214px rgba(43, 137, 255, 0.12),
-    32px 30px 100px rgba(43, 137, 255, 0.08);
-  animation: bubble-drift-left 26s ease-in-out -8s infinite;
-}
-
-body::after {
-  right: clamp(-310px, -19vw, -200px);
-  bottom: 8vh;
-  background:
-    radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.72) 0 3.5%, transparent 4.5%),
-    radial-gradient(circle at 42% 44%, rgba(92, 206, 255, 0.16), rgba(43, 137, 255, 0.16) 44%, rgba(43, 137, 255, 0.03) 68%, transparent 73%);
-  box-shadow:
-    -128px -236px 0 -202px rgba(92, 206, 255, 0.12),
-    -194px 54px 0 -218px rgba(43, 137, 255, 0.12),
-    -28px 30px 100px rgba(43, 137, 255, 0.08);
-  animation: bubble-drift-right 31s ease-in-out -17s infinite;
-}
-
-@keyframes bubble-drift-left {
-  0%,
-  100% {
-    transform: translate3d(0, 0, 0) rotate(0deg);
-  }
-
-  36% {
-    transform: translate3d(14px, -18px, 0) rotate(1.5deg);
-  }
-
-  72% {
-    transform: translate3d(-8px, 12px, 0) rotate(-1deg);
-  }
-}
-
-@keyframes bubble-drift-right {
-  0%,
-  100% {
-    transform: translate3d(0, 0, 0) rotate(0deg);
-  }
-
-  42% {
-    transform: translate3d(-16px, 14px, 0) rotate(-1.4deg);
-  }
-
-  76% {
-    transform: translate3d(10px, -16px, 0) rotate(0.9deg);
-  }
-}
-
 #app {
   position: relative;
   z-index: 1;
@@ -263,11 +193,6 @@ code {
 }
 
 @media (max-width: 640px) {
-  body::before,
-  body::after {
-    opacity: 0.72;
-  }
-
   .section {
     margin-top: 48px;
   }

From 65a4f6c309f35ce2f4c63a86716bcfb62e209076 Mon Sep 17 00:00:00 2001
From: elkaix <melkholy@techmatrix.com>
Date: Sun, 16 Aug 2026 11:56:14 -0400
Subject: [PATCH 3/7] test(desktop): match the desktop anchor without depending
 on its element tag

The site hero moved the desktop anchor from a section to the hero header, so the packaging-config test extracted a null block. Bind the Windows assertion to the desktop download entry instead, so it cannot pass on the CLI install rows.
---
 apps/desktop/tests/packaging-config.spec.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/desktop/tests/packaging-config.spec.ts b/apps/desktop/tests/packaging-config.spec.ts
index 62c764ce..0e02b922 100644
--- a/apps/desktop/tests/packaging-config.spec.ts
+++ b/apps/desktop/tests/packaging-config.spec.ts
@@ -86,9 +86,10 @@ describe('desktop packaging configuration', () => {
     expect(siteSource).toContain('releases/download/v${DESKTOP_VERSION}')
     expect(siteSource).not.toContain('releases/download/v0.1.0')
 
-    const desktopShowcaseMatch = siteSource.match(/<section id="desktop"[\s\S]*?<\/section>/)
-    expect(desktopShowcaseMatch).not.toBeNull()
-    expect(desktopShowcaseMatch![0]).toContain('/brand/windows11.svg')
+    expect(siteSource).toContain('id="desktop"')
+    expect(siteSource).toMatch(
+      /\{[^}]*icon: '\/brand\/windows11\.svg', href: desktopDownloads\.windows[^}]*\}/,
+    )
   })
 
   it('maps the staged Host node_modules directory as the copy root', () => {

From 3670f2728197e0f637e3f6a1733bc40c75fde7e1 Mon Sep 17 00:00:00 2001
From: elkaix <melkholy@techmatrix.com>
Date: Sun, 16 Aug 2026 12:26:32 -0400
Subject: [PATCH 4/7] fix(web): make dark-mode secondary text legible on the
 desktop sidebar

The macOS sidebar renders on a translucent light surface, but the dark palette picked secondary text colours for an opaque dark background, so the workspace header, session timestamps, and the settings row disappeared. Raise the three faded tokens in both dark blocks, keeping their hierarchy.
---
 .changeset/dark-sidebar-contrast.md |  6 ++++++
 apps/pythinker-web/src/style.css    | 12 ++++++------
 2 files changed, 12 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/dark-sidebar-contrast.md

diff --git a/.changeset/dark-sidebar-contrast.md b/.changeset/dark-sidebar-contrast.md
new file mode 100644
index 00000000..648216b3
--- /dev/null
+++ b/.changeset/dark-sidebar-contrast.md
@@ -0,0 +1,6 @@
+---
+"@pymodel/pythinker-code": patch
+"@pymodel/pythinker-desktop": patch
+---
+
+Make the workspace header, session timestamps, and the settings row legible in dark mode on the translucent desktop sidebar.
diff --git a/apps/pythinker-web/src/style.css b/apps/pythinker-web/src/style.css
index ff1be664..ada44c30 100644
--- a/apps/pythinker-web/src/style.css
+++ b/apps/pythinker-web/src/style.css
@@ -73,9 +73,9 @@ html[data-color-scheme="dark"] {
   color-scheme: dark;
   --ink: #e8eaed;
   --text: #c9cdd4;
-  --dim: #9aa0a8;
-  --muted: #727983;
-  --faint: #525960;
+  --dim: #c2c8d0;
+  --muted: #aab1ba;
+  --faint: #8b939c;
   --line: #2d333b;
   --line2: #22272e;
   --panel: #1c2128;
@@ -99,9 +99,9 @@ html[data-color-scheme="dark"] {
   html[data-color-scheme="system"] {
     --ink: #e8eaed;
     --text: #c9cdd4;
-    --dim: #9aa0a8;
-    --muted: #727983;
-    --faint: #525960;
+    --dim: #c2c8d0;
+    --muted: #aab1ba;
+    --faint: #8b939c;
     --line: #2d333b;
     --line2: #22272e;
     --panel: #1c2128;

From 774aca7949300a7f1b04f5bccf0aef1bfec1546b Mon Sep 17 00:00:00 2001
From: elkaix <melkholy@techmatrix.com>
Date: Sun, 16 Aug 2026 12:37:15 -0400
Subject: [PATCH 5/7] fix(web): keep the new-session dialog inside its own
 border box

The dialog shell had a fixed height with no overflow clipping, and its body only scrolled below 640px. On desktop the body overflowed, pushing the actions row and footer outside the shell, so the bottom border drew across the Cancel button.
---
 apps/pythinker-web/src/components/NewSessionDialog.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/pythinker-web/src/components/NewSessionDialog.vue b/apps/pythinker-web/src/components/NewSessionDialog.vue
index b55bc93b..653d4b60 100644
--- a/apps/pythinker-web/src/components/NewSessionDialog.vue
+++ b/apps/pythinker-web/src/components/NewSessionDialog.vue
@@ -166,6 +166,7 @@ onUnmounted(() => document.removeEventListener('keydown', handleKeydown));
   border: 1px solid var(--line);
   border-top: 2px solid var(--blue);
   border-radius: 4px;
+  overflow: hidden;
   width: 520px;
   max-width: calc(100vw - 32px);
   height: 360px;
@@ -210,6 +211,8 @@ onUnmounted(() => document.removeEventListener('keydown', handleKeydown));
   flex-direction: column;
   gap: 12px;
   flex: 1;
+  overflow-y: auto;
+  min-height: 0;
 }
 
 .form-row {
@@ -349,7 +352,6 @@ onUnmounted(() => document.removeEventListener('keydown', handleKeydown));
     max-height: calc(100dvh - 24px);
   }
   .form-body {
-    overflow-y: auto;
     -webkit-overflow-scrolling: touch;
   }
   .form-row {

From 3cdf7b3bbd136fbbb2c44b6c90eddfeed3922d1e Mon Sep 17 00:00:00 2001
From: elkaix <melkholy@techmatrix.com>
Date: Sun, 16 Aug 2026 13:18:32 -0400
Subject: [PATCH 6/7] fix(web): bound the model quick-switch dropdown to the
 space above its pill

The dropdown opened upward with no height limit, so a long provider model list ran past the top of the window and the models above the fold could not be reached. Measure the pill on open and cap the menu, letting it scroll.
---
 .../pythinker-web/src/components/Composer.vue | 10 +++++++-
 apps/pythinker-web/test/composer.test.ts      | 24 +++++++++++++++++++
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/apps/pythinker-web/src/components/Composer.vue b/apps/pythinker-web/src/components/Composer.vue
index d7092026..35f1aef7 100644
--- a/apps/pythinker-web/src/components/Composer.vue
+++ b/apps/pythinker-web/src/components/Composer.vue
@@ -735,12 +735,18 @@ const hasUpload = computed(() => !!props.uploadImage);
 // ---------------------------------------------------------------------------
 
 const dropdownOpen = ref(false);
+const modelPillRef = ref<HTMLElement | null>(null);
+const modelDropdownStyle = ref<Record<string, string>>({});
 const permDropdownOpen = ref(false);
 const toolbarRef = ref<HTMLElement | null>(null);
 
 function toggleDropdown(): void {
   dropdownOpen.value = !dropdownOpen.value;
   if (dropdownOpen.value) {
+    const rect = modelPillRef.value?.getBoundingClientRect();
+    modelDropdownStyle.value = rect
+      ? { maxHeight: `${Math.max(160, rect.top - 4 - 12)}px` }
+      : {};
     permDropdownOpen.value = false;
     document.addEventListener('click', onDocClick, true);
   } else {
@@ -1179,6 +1185,7 @@ function selectModel(modelId: string): void {
           <!-- Model pill — click to open quick-switch dropdown -->
           <span
             v-if="status"
+            ref="modelPillRef"
             class="model-pill"
             :class="{ open: dropdownOpen }"
             role="button"
@@ -1195,7 +1202,7 @@ function selectModel(modelId: string): void {
         </div>
 
         <!-- Model dropdown — current provider models + controls + more -->
-        <div v-if="dropdownOpen && status" class="model-dropdown" role="menu" @click.stop>
+        <div v-if="dropdownOpen && status" class="model-dropdown" :style="modelDropdownStyle" role="menu" @click.stop>
           <!-- Starred models from other providers -->
           <div v-if="starredOtherModels.length > 0" class="md-section">{{ t('status.starredModels') }}</div>
           <button
@@ -1719,6 +1726,7 @@ function selectModel(modelId: string): void {
   display: flex;
   flex-direction: column;
   gap: 1px;
+  overflow-y: auto;
 }
 
 .md-section {
diff --git a/apps/pythinker-web/test/composer.test.ts b/apps/pythinker-web/test/composer.test.ts
index 0d8d6353..c8f21629 100644
--- a/apps/pythinker-web/test/composer.test.ts
+++ b/apps/pythinker-web/test/composer.test.ts
@@ -319,6 +319,30 @@ describe('Composer model dropdown', () => {
 
     expect(wrapper.emitted('selectModel')).toEqual([['openai/gpt-5']]);
   });
+
+  it('bounds the quick-switch dropdown to the measured space above its pill', async () => {
+    const wrapper = mountComposer({
+      status: { model: 'Model 0', modelId: 'pythinker/model-0', ctxUsed: 0, ctxMax: 128000, permission: 'manual' },
+      models: Array.from({ length: 17 }, (_, index) => ({
+        id: `pythinker/model-${index}`,
+        provider: 'pythinker',
+        model: `model-${index}`,
+        displayName: `Model ${index}`,
+        maxContextSize: 128000,
+      })),
+    });
+    const pill = wrapper.get('.model-pill');
+    const rect = vi.spyOn(pill.element, 'getBoundingClientRect');
+
+    rect.mockReturnValue({ top: 20 } as DOMRect);
+    await pill.trigger('click');
+    expect(wrapper.get('.model-dropdown').element.style.maxHeight).toBe('160px');
+
+    rect.mockReturnValue({ top: 300 } as DOMRect);
+    await pill.trigger('click');
+    await pill.trigger('click');
+    expect(wrapper.get('.model-dropdown').element.style.maxHeight).toBe('284px');
+  });
 });
 
 describe('Composer context indicator', () => {

From a2964e24efa6c964fad16b874b0268d0055a33f0 Mon Sep 17 00:00:00 2001
From: elkaix <melkholy@techmatrix.com>
Date: Sun, 16 Aug 2026 13:31:42 -0400
Subject: [PATCH 7/7] fix(desktop): paint an opaque window on every platform

The macOS window used vibrancy over a transparent background, so the dark palette rendered on a translucent light surface its secondary colours were never designed for. Drop vibrancy and transparency and paint the palette's own background colour, keeping the per-platform window chrome.
---
 apps/desktop/src/main.ts                     | 33 ++++--------
 apps/desktop/tests/window-appearance.spec.ts | 54 ++++++++++++--------
 2 files changed, 44 insertions(+), 43 deletions(-)

diff --git a/apps/desktop/src/main.ts b/apps/desktop/src/main.ts
index adea503d..6710701f 100644
--- a/apps/desktop/src/main.ts
+++ b/apps/desktop/src/main.ts
@@ -195,28 +195,17 @@ async function createMainWindow(): Promise<BrowserWindow> {
     autoHideMenuBar: true,
     frame: process.platform === 'win32',
     titleBarStyle: process.platform === 'darwin' ? 'hiddenInset' : 'hidden',
-    ...(process.platform === 'darwin' ? {} : {
-      titleBarOverlay: {
-        color: '#00000000',
-        symbolColor: '#7f858f',
-        height: 44,
-      },
-    }),
-    ...(process.platform === 'darwin' ? {
-      trafficLightPosition: { x: 16, y: 18 },
-      vibrancy: 'sidebar' as const,
-      visualEffectState: 'followWindow' as const,
-    } : {}),
-    // Windows uses an opaque window so theme colors do not blend with desktop wallpaper.
-    ...(process.platform === 'win32' ? {
-      backgroundColor: '#0d1117',
-      hasShadow: true,
-      roundedCorners: true,
-      thickFrame: true,
-    } : {
-      transparent: true,
-      backgroundColor: '#00000000',
-    }),
+    titleBarOverlay: process.platform === 'darwin' ? undefined : {
+      color: '#00000000',
+      symbolColor: '#7f858f',
+      height: 44,
+    },
+    trafficLightPosition: process.platform === 'darwin' ? { x: 16, y: 18 } : undefined,
+    // Use an opaque window so theme colors do not blend with desktop wallpaper.
+    backgroundColor: '#0d1117',
+    hasShadow: process.platform === 'win32' ? true : undefined,
+    roundedCorners: process.platform === 'win32' ? true : undefined,
+    thickFrame: process.platform === 'win32' ? true : undefined,
     title: APP_NAME,
     webPreferences: {
       contextIsolation: true,
diff --git a/apps/desktop/tests/window-appearance.spec.ts b/apps/desktop/tests/window-appearance.spec.ts
index 0a3b5fc9..dade733c 100644
--- a/apps/desktop/tests/window-appearance.spec.ts
+++ b/apps/desktop/tests/window-appearance.spec.ts
@@ -8,36 +8,48 @@ const desktopRoot = resolve(import.meta.dirname, '..')
 const mainSource = readFileSync(resolve(desktopRoot, 'src', 'main.ts'), 'utf8')
 
 describe('desktop window appearance configuration', () => {
-  it('keeps Windows opaque and non-Windows windows transparent', () => {
+  it('keeps the main window opaque on every platform', () => {
     const backgroundMaterialMatches = [...mainSource.matchAll(/backgroundMaterial/gu)]
-    const win32BranchMatches = [...mainSource.matchAll(
-      /\.\.\.\(process\.platform === 'win32' \? \{([\s\S]*?)\} : \{\s*transparent: true,/gu,
-    )]
-    const nonWin32BranchMatches = [...mainSource.matchAll(
-      /\} : \{\s*transparent: true,[\s\S]*?\}\),\s*title:/gu,
+    const mainWindowOptionMatches = [...mainSource.matchAll(
+      /const window = new BrowserWindow\(\{([\s\S]*?)\n  \}\)/gu,
     )]
 
     expect(backgroundMaterialMatches).toHaveLength(0)
-    expect(win32BranchMatches).toHaveLength(1)
-    expect(nonWin32BranchMatches).toHaveLength(1)
+    expect(mainWindowOptionMatches).toHaveLength(1)
 
-    const win32Branch = win32BranchMatches[0]![1]!
-    const opaqueColorMatches = [...win32Branch.matchAll(/backgroundColor:\s*'#[0-9a-fA-F]{6}'/gu)]
-    const alphaColorMatches = [...win32Branch.matchAll(/#[0-9a-fA-F]{8}/gu)]
-    const hasShadowMatches = [...win32Branch.matchAll(/hasShadow:\s*true/gu)]
-    const roundedCornersMatches = [...win32Branch.matchAll(/roundedCorners:\s*true/gu)]
-    const thickFrameMatches = [...win32Branch.matchAll(/thickFrame:\s*true/gu)]
+    const mainWindowOptions = mainWindowOptionMatches[0]![1]!
+    const vibrancyMatches = [...mainWindowOptions.matchAll(/vibrancy\s*:/gu)]
+    const visualEffectStateMatches = [...mainWindowOptions.matchAll(/visualEffectState\s*:/gu)]
+    const transparentMatches = [...mainWindowOptions.matchAll(/transparent:\s*true/gu)]
+    const backgroundColorMatches = [...mainWindowOptions.matchAll(
+      /backgroundColor:\s*'(#[0-9a-fA-F]{6}(?:[0-9a-fA-F]{2})?)'/gu,
+    )]
+    const transparentBackgroundMatches = backgroundColorMatches.filter(
+      (match) => match[1]!.length === 9 && match[1]!.endsWith('00'),
+    )
+    const hasShadowMatches = [...mainWindowOptions.matchAll(
+      /hasShadow:\s*process\.platform === 'win32' \? true : undefined/gu,
+    )]
+    const roundedCornersMatches = [...mainWindowOptions.matchAll(
+      /roundedCorners:\s*process\.platform === 'win32' \? true : undefined/gu,
+    )]
+    const thickFrameMatches = [...mainWindowOptions.matchAll(
+      /thickFrame:\s*process\.platform === 'win32' \? true : undefined/gu,
+    )]
 
-    expect(opaqueColorMatches).toHaveLength(1)
-    expect(alphaColorMatches).toHaveLength(0)
+    expect(vibrancyMatches).toHaveLength(0)
+    expect(visualEffectStateMatches).toHaveLength(0)
+    expect(transparentMatches).toHaveLength(0)
+    expect(backgroundColorMatches).toHaveLength(1)
+    expect(backgroundColorMatches[0]![1]).not.toBe('#00000000')
+    expect(transparentBackgroundMatches).toHaveLength(0)
     expect(hasShadowMatches).toHaveLength(1)
     expect(roundedCornersMatches).toHaveLength(1)
     expect(thickFrameMatches).toHaveLength(1)
 
-    expect(win32Branch).toContain('backgroundColor')
-    expect(nonWin32BranchMatches[0]![0]).toContain('transparent: true')
-    expect(win32Branch).toContain('hasShadow')
-    expect(win32Branch).toContain('roundedCorners')
-    expect(win32Branch).toContain('thickFrame')
+    expect(mainWindowOptions).toContain('backgroundColor')
+    expect(mainWindowOptions).toContain('hasShadow')
+    expect(mainWindowOptions).toContain('roundedCorners')
+    expect(mainWindowOptions).toContain('thickFrame')
   })
 })