Simplify git pull flow and add subtle stitched 3D border

apps/web/src/components/VoodooStitches.tsx

@@ -2,65 +2,70 @@ import { useEffect, useState, useMemo } from "react";
 import { useAppSettings } from "../appSettings";
 
 /**
- * Purely decorative voodoo-doll stitch border around the entire viewport.
- * Each X-shaped cross-stitch pulses in opacity with a sequential delay,
- * creating a wave that flows around the perimeter like calm backlit water.
+ * Minimal stitch border that wraps the viewport like thread pulled
+ * over the edge of a raised 3D panel.  Each stitch is a small
+ * perpendicular line crossing the edge, with a soft shadow underneath
+ * to sell the depth illusion.
  */
 
-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;
+const STITCH_SPACING = 56; // wider spacing → cleaner / more minimal
+const STITCH_LENGTH = 6; // half-length of each stitch line
+const EDGE_INSET = 6; // how far from viewport edge the "seam" sits
+const ANIMATION_DURATION = 10; // slower, calmer pulse
+const STROKE_WIDTH = 0.75;
 
 interface Stitch {
   cx: number;
   cy: number;
+  /** 'h' = horizontal stitch (top/bottom edges), 'v' = vertical (left/right) */
+  orientation: "h" | "v";
   index: number;
 }
 
 function generateStitches(w: number, h: number): { stitches: Stitch[]; total: number } {
   const stitches: Stitch[] = [];
   let index = 0;
 
-  // Top edge: left → right
+  // Top edge
   const topCount = Math.max(0, Math.floor((w - EDGE_INSET * 2) / STITCH_SPACING));
   const topOffset = (w - EDGE_INSET * 2 - (topCount - 1) * STITCH_SPACING) / 2;
   for (let i = 0; i < topCount; i++) {
     stitches.push({
       cx: EDGE_INSET + topOffset + i * STITCH_SPACING,
       cy: EDGE_INSET,
+      orientation: "v", // perpendicular to top edge → vertical
       index: index++,
     });
   }
 
-  // Right edge: top → bottom
+  // Right edge
   const rightCount = Math.max(0, Math.floor((h - EDGE_INSET * 2) / STITCH_SPACING));
   const rightOffset = (h - EDGE_INSET * 2 - (rightCount - 1) * STITCH_SPACING) / 2;
   for (let i = 0; i < rightCount; i++) {
     stitches.push({
       cx: w - EDGE_INSET,
       cy: EDGE_INSET + rightOffset + i * STITCH_SPACING,
+      orientation: "h", // perpendicular to right edge → horizontal
       index: index++,
     });
   }
 
-  // Bottom edge: right → left
-  const bottomCount = topCount;
-  for (let i = 0; i < bottomCount; i++) {
+  // Bottom edge (right → left)
+  for (let i = 0; i < topCount; i++) {
     stitches.push({
-      cx: EDGE_INSET + topOffset + (bottomCount - 1 - i) * STITCH_SPACING,
+      cx: EDGE_INSET + topOffset + (topCount - 1 - i) * STITCH_SPACING,
       cy: h - EDGE_INSET,
+      orientation: "v",
       index: index++,
     });
   }
 
-  // Left edge: bottom → top
-  const leftCount = rightCount;
-  for (let i = 0; i < leftCount; i++) {
+  // Left edge (bottom → top)
+  for (let i = 0; i < rightCount; i++) {
     stitches.push({
       cx: EDGE_INSET,
-      cy: EDGE_INSET + rightOffset + (leftCount - 1 - i) * STITCH_SPACING,
+      cy: EDGE_INSET + rightOffset + (rightCount - 1 - i) * STITCH_SPACING,
+      orientation: "h",
       index: index++,
     });
   }
@@ -93,7 +98,6 @@ export function VoodooStitches() {
     [dimensions.w, dimensions.h],
   );
 
-  // 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;
@@ -108,44 +112,55 @@ export function VoodooStitches() {
         zIndex: 9999,
       }}
     >
+      {/* Subtle inner shadow to sell the "raised panel" depth */}
+      <div className="voodoo-depth-shadow" />
+
       <svg
         width={dimensions.w}
         height={dimensions.h}
         viewBox={`0 0 ${dimensions.w} ${dimensions.h}`}
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
-        style={{ display: "block" }}
+        style={{ display: "block", position: "absolute", inset: 0 }}
       >
-        {stitches.map((s) => (
-          <g
-            key={s.index}
-            style={{
-              animation: `voodoo-stitch-pulse ${ANIMATION_DURATION}s ease-in-out infinite`,
-              animationDelay: `${-ANIMATION_DURATION + s.index * delayPerStitch}s`,
-            }}
-          >
-            {/* First arm of the X: ╲ */}
-            <line
-              x1={s.cx - STITCH_SIZE}
-              y1={s.cy - STITCH_SIZE}
-              x2={s.cx + STITCH_SIZE}
-              y2={s.cy + STITCH_SIZE}
-              stroke="var(--muted-foreground)"
-              strokeWidth={STROKE_WIDTH}
-              strokeLinecap="round"
-            />
-            {/* Second arm of the X: ╱ */}
+        <defs>
+          {/* Soft glow filter to give each stitch a slight shadow beneath it */}
+          <filter id="stitch-shadow" x="-50%" y="-50%" width="200%" height="200%">
+            <feGaussianBlur in="SourceAlpha" stdDeviation="1.5" result="blur" />
+            <feOffset dx="0" dy="0.5" result="offsetBlur" />
+            <feFlood floodColor="var(--background, #000)" floodOpacity="0.3" result="color" />
+            <feComposite in="color" in2="offsetBlur" operator="in" result="shadow" />
+            <feMerge>
+              <feMergeNode in="shadow" />
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
+        </defs>
+
+        {stitches.map((s) => {
+          const x1 = s.orientation === "v" ? s.cx : s.cx - STITCH_LENGTH;
+          const y1 = s.orientation === "v" ? s.cy - STITCH_LENGTH : s.cy;
+          const x2 = s.orientation === "v" ? s.cx : s.cx + STITCH_LENGTH;
+          const y2 = s.orientation === "v" ? s.cy + STITCH_LENGTH : s.cy;
+
+          return (
             <line
-              x1={s.cx + STITCH_SIZE}
-              y1={s.cy - STITCH_SIZE}
-              x2={s.cx - STITCH_SIZE}
-              y2={s.cy + STITCH_SIZE}
+              key={s.index}
+              x1={x1}
+              y1={y1}
+              x2={x2}
+              y2={y2}
               stroke="var(--muted-foreground)"
               strokeWidth={STROKE_WIDTH}
               strokeLinecap="round"
+              filter="url(#stitch-shadow)"
+              style={{
+                animation: `voodoo-stitch-pulse ${ANIMATION_DURATION}s ease-in-out infinite`,
+                animationDelay: `${-ANIMATION_DURATION + s.index * delayPerStitch}s`,
+              }}
             />
-          </g>
-        ))}
+          );
+        })}
       </svg>
     </div>
   );

apps/web/src/index.css

@@ -667,13 +667,34 @@ label:has(> select#reasoning-effort) select {
 @keyframes voodoo-stitch-pulse {
   0%,
   100% {
-    opacity: 0.08;
+    opacity: 0.06;
   }
   50% {
-    opacity: 0.3;
+    opacity: 0.18;
   }
 }
 
+/* ─── 3D depth shadow around viewport edge ─── */
+.voodoo-depth-shadow {
+  position: absolute;
+  inset: 0;
+  border-radius: 2px;
+  box-shadow:
+    inset 0 1px 3px 0 rgba(0, 0, 0, 0.08),
+    inset 0 -1px 2px 0 rgba(255, 255, 255, 0.02),
+    inset 1px 0 2px 0 rgba(0, 0, 0, 0.05),
+    inset -1px 0 2px 0 rgba(0, 0, 0, 0.05);
+  pointer-events: none;
+}
+
+.dark .voodoo-depth-shadow {
+  box-shadow:
+    inset 0 1px 4px 0 rgba(0, 0, 0, 0.25),
+    inset 0 -1px 2px 0 rgba(255, 255, 255, 0.015),
+    inset 1px 0 3px 0 rgba(0, 0, 0, 0.18),
+    inset -1px 0 3px 0 rgba(0, 0, 0, 0.18);
+}
+
 /* ─── Accessibility ─── */
 
 @media (prefers-reduced-motion: reduce) {