From 40d3b1fdde94a180d902cb0e329ed648df6336a3 Mon Sep 17 00:00:00 2001
From: Val Alexander <bunsthedev@gmail.com>
Date: Sat, 4 Apr 2026 13:42:50 -0500
Subject: [PATCH] Make stitch border more discrete and add toggle to settings

Reduce stitch visual presence (smaller, sparser, lower opacity, slower
animation) and add a showStitchBorder user setting so the border can be
turned off entirely from the settings page.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/web/src/appSettings.ts                |  1 +
 apps/web/src/components/VoodooStitches.tsx | 14 +++++++----
 apps/web/src/index.css                     |  4 +--
 apps/web/src/routes/_chat.settings.tsx     | 29 ++++++++++++++++++++++
 4 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/appSettings.ts b/apps/web/src/appSettings.ts
index ac9173d4f..02af596f3 100644
--- a/apps/web/src/appSettings.ts
+++ b/apps/web/src/appSettings.ts
@@ -85,6 +85,7 @@ export const AppSettingsSchema = Schema.Struct({
   sidebarAccentProjectNames: Schema.Boolean.pipe(withDefaults(() => true)),
   sidebarAccentColorOverride: Schema.optional(Schema.String.check(Schema.isMaxLength(64))),
   sidebarAccentBgColorOverride: Schema.optional(Schema.String.check(Schema.isMaxLength(64))),
+  showStitchBorder: Schema.Boolean.pipe(withDefaults(() => true)),
   sidebarWideThreadNames: Schema.Boolean.pipe(withDefaults(() => true)),
   customCodexModels: Schema.Array(Schema.String).pipe(withDefaults(() => [])),
   customClaudeModels: Schema.Array(Schema.String).pipe(withDefaults(() => [])),
diff --git a/apps/web/src/components/VoodooStitches.tsx b/apps/web/src/components/VoodooStitches.tsx
index 06151b691..1197455db 100644
--- a/apps/web/src/components/VoodooStitches.tsx
+++ b/apps/web/src/components/VoodooStitches.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState, useMemo } from "react";
+import { useAppSettings } from "../appSettings";
 
 /**
  * Purely decorative voodoo-doll stitch border around the entire viewport.
@@ -6,11 +7,11 @@ import { useEffect, useState, useMemo } from "react";
  * creating a wave that flows around the perimeter like calm backlit water.
  */
 
-const STITCH_SPACING = 30; // px between stitch centers
-const STITCH_SIZE = 6; // half-size of each X arm
-const EDGE_INSET = 6; // px inset from viewport edge
-const ANIMATION_DURATION = 6; // seconds for one full pulse cycle
-const STROKE_WIDTH = 1.5;
+const STITCH_SPACING = 40; // px between stitch centers
+const STITCH_SIZE = 4; // half-size of each X arm
+const EDGE_INSET = 4; // px inset from viewport edge
+const ANIMATION_DURATION = 8; // seconds for one full pulse cycle
+const STROKE_WIDTH = 1;
 
 interface Stitch {
   cx: number;
@@ -68,6 +69,7 @@ function generateStitches(w: number, h: number): { stitches: Stitch[]; total: nu
 }
 
 export function VoodooStitches() {
+  const { settings } = useAppSettings();
   const [dimensions, setDimensions] = useState({ w: window.innerWidth, h: window.innerHeight });
 
   useEffect(() => {
@@ -94,6 +96,8 @@ export function VoodooStitches() {
   // Wave spans the full perimeter — each stitch gets a delay proportional to its position
   const delayPerStitch = total > 0 ? ANIMATION_DURATION / total : 0;
 
+  if (!settings.showStitchBorder) return null;
+
   return (
     <div
       aria-hidden
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index df4e369aa..05764f1dd 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -667,10 +667,10 @@ label:has(> select#reasoning-effort) select {
 @keyframes voodoo-stitch-pulse {
   0%,
   100% {
-    opacity: 0.15;
+    opacity: 0.08;
   }
   50% {
-    opacity: 0.55;
+    opacity: 0.3;
   }
 }
 
diff --git a/apps/web/src/routes/_chat.settings.tsx b/apps/web/src/routes/_chat.settings.tsx
index aab482fd9..d60573103 100644
--- a/apps/web/src/routes/_chat.settings.tsx
+++ b/apps/web/src/routes/_chat.settings.tsx
@@ -411,6 +411,7 @@ function SettingsRouteView() {
     ...(fontFamily !== "inter" ? ["Font"] : []),
     ...(settings.timestampFormat !== defaults.timestampFormat ? ["Time format"] : []),
     ...(settings.diffWordWrap !== defaults.diffWordWrap ? ["Diff line wrapping"] : []),
+    ...(settings.showStitchBorder !== defaults.showStitchBorder ? ["Stitch border"] : []),
     ...(settings.enableAssistantStreaming !== defaults.enableAssistantStreaming
       ? ["Assistant output"]
       : []),
@@ -1150,6 +1151,34 @@ function SettingsRouteView() {
                 }
               />
 
+              <SettingsRow
+                title="Stitch border"
+                description="Show the decorative stitch border around the viewport."
+                resetAction={
+                  settings.showStitchBorder !== defaults.showStitchBorder ? (
+                    <SettingResetButton
+                      label="stitch border"
+                      onClick={() =>
+                        updateSettings({
+                          showStitchBorder: defaults.showStitchBorder,
+                        })
+                      }
+                    />
+                  ) : null
+                }
+                control={
+                  <Switch
+                    checked={settings.showStitchBorder}
+                    onCheckedChange={(checked) =>
+                      updateSettings({
+                        showStitchBorder: Boolean(checked),
+                      })
+                    }
+                    aria-label="Show stitch border"
+                  />
+                }
+              />
+
               <SettingsRow
                 title="Assistant output"
                 description="Show token-by-token output while a response is in progress."