Flush tile grid + macOS-style seam pill for resizing adjacent tiles

Tiles now sit with zero gap (their 1px borders are the only seam) and the
grid runs edge to edge. Wherever two tiles share a vertical edge, an
invisible strip sits on the seam; hovering reveals a small grab pill
(split-view style) and dragging it moves the shared edge, trading width
between the two tiles. The combined span is preserved, both tiles' min
sizes are honored, and a third tile sitting behind part of the seam
blocks the drag instead of being overlapped. Pills hide during tile
drags/resizes and rebuild for the new geometry on release; seam sizes
persist with the layout. Also fixes cellMetrics treating a 0px grid gap
as falsy and falling back to 10px.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RNYUv9EyrGSFmCnmH7WYKH

README.md

@@ -63,7 +63,9 @@ are written by the app itself.
 - **＋ Add tile** — add any enabled module; multiple tiles of the same
   module are fine (e.g. two transcripts filtered to different channels).
 - Drag a tile by its **header** to move it; drag the **corner handle** to
-  resize; **✕** removes it.
+  resize; **✕** removes it. Tiles sit flush — when two share an edge, hover
+  the seam and a small grab pill appears; drag it to trade width between
+  the two tiles (macOS split-view style).
 - The **gear** on a tile holds per-tile settings (filters, text size,
   display options) — these belong to this browser's layout, not the server.
 - **Layout ▾** — save the current arrangement to the server under a name,

public/shell.js

@@ -161,7 +161,8 @@ function newId() {
 
 function cellMetrics() {
   const style = getComputedStyle(grid);
-  const gap = parseFloat(style.columnGap) || 10;
+  const gapRaw = parseFloat(style.columnGap);
+  const gap = Number.isFinite(gapRaw) ? gapRaw : 0;
   const cw = (grid.clientWidth - gap * (COLS - 1)) / COLS;
   const ch = parseFloat(style.gridAutoRows) || 72;
   return { cw, ch, gap };
@@ -171,9 +172,13 @@ function overlaps(a, b) {
   return a.x < b.x + b.w && b.x < a.x + a.w && a.y < b.y + b.h && b.y < a.y + a.h;
 }
 
-function isFree(rect, excludeId) {
+function isFreeExcept(rect, excludeIds) {
   if (rect.x < 0 || rect.y < 0 || rect.x + rect.w > COLS) return false;
-  return !tiles.some((t) => t.id !== excludeId && overlaps(rect, t));
+  return !tiles.some((t) => !excludeIds.includes(t.id) && overlaps(rect, t));
+}
+
+function isFree(rect, excludeId) {
+  return isFreeExcept(rect, [excludeId]);
 }
 
 /** First free spot scanning top-to-bottom, left-to-right. */
@@ -296,6 +301,7 @@ function wireDrag(tile, el, handle) {
       if (!moved && (dCols || dRows)) {
         moved = true;
         el.classList.add('dragging');
+        grid.classList.add('no-dividers');
       }
       const cand = {
         x: Math.max(0, Math.min(COLS - tile.w, startX + dCols)),
@@ -314,7 +320,11 @@ function wireDrag(tile, el, handle) {
       handle.removeEventListener('pointerup', onUp);
       handle.removeEventListener('pointercancel', onUp);
       el.classList.remove('dragging');
-      if (moved) saveLayout();
+      grid.classList.remove('no-dividers');
+      if (moved) {
+        saveLayout();
+        rebuildDividers();
+      }
     };
     handle.addEventListener('pointermove', onMove);
     handle.addEventListener('pointerup', onUp);
@@ -337,6 +347,7 @@ function wireResize(tile, el, handle) {
     const startH = tile.h;
     const min = minSizeOf(tile);
     el.classList.add('resizing');
+    grid.classList.add('no-dividers');
     let changed = false;
 
     const onMove = (e) => {
@@ -361,7 +372,11 @@ function wireResize(tile, el, handle) {
       handle.removeEventListener('pointerup', onUp);
       handle.removeEventListener('pointercancel', onUp);
       el.classList.remove('resizing');
-      if (changed) saveLayout();
+      grid.classList.remove('no-dividers');
+      if (changed) {
+        saveLayout();
+        rebuildDividers();
+      }
     };
     handle.addEventListener('pointermove', onMove);
     handle.addEventListener('pointerup', onUp);
@@ -376,6 +391,88 @@ function notifyResize(tile) {
   } catch { /* module's problem, not the shell's */ }
 }
 
+/* ── seam dividers between adjacent tiles ───────────────────────────── */
+
+/* Wherever two tiles share a vertical edge, a divider sits on the seam.
+   Dragging its pill moves the shared edge, trading width between the two
+   tiles — their combined span never changes, so nothing else can collide
+   except via the explicit check below (a third tile can sit behind the
+   seam for part of its height). */
+
+function rebuildDividers() {
+  grid.querySelectorAll('.tile-divider').forEach((el) => el.remove());
+  for (const L of tiles) {
+    for (const R of tiles) {
+      if (L === R || L.x + L.w !== R.x) continue;
+      const top = Math.max(L.y, R.y);
+      const bottom = Math.min(L.y + L.h, R.y + R.h);
+      if (bottom <= top) continue;
+      buildDivider(L, R, top, bottom);
+    }
+  }
+}
+
+function buildDivider(L, R, top, bottom) {
+  const el = document.createElement('div');
+  el.className = 'tile-divider';
+  el.title = 'Drag to resize';
+
+  const place = () => {
+    const m = cellMetrics();
+    // left as a percentage so the pill tracks window resizes for free
+    el.style.left = ((L.x + L.w) / COLS) * 100 + '%';
+    el.style.top = top * (m.ch + m.gap) + 'px';
+    el.style.height = (bottom - top) * (m.ch + m.gap) - m.gap + 'px';
+  };
+  place();
+
+  el.addEventListener('pointerdown', (ev) => {
+    if (ev.button !== 0 && ev.pointerType === 'mouse') return;
+    ev.preventDefault();
+    closeSettingsPopovers();
+    el.setPointerCapture(ev.pointerId);
+    el.classList.add('active');
+    const m = cellMetrics();
+    const sx = ev.clientX;
+    const startBoundary = L.x + L.w;
+    const rightEdge = R.x + R.w; // fixed for the whole drag
+    const minB = L.x + minSizeOf(L).w;
+    const maxB = rightEdge - minSizeOf(R).w;
+    let changed = false;
+
+    const onMove = (e) => {
+      const b = Math.max(minB, Math.min(maxB,
+        startBoundary + Math.round((e.clientX - sx) / (m.cw + m.gap))));
+      if (b === L.x + L.w) return;
+      const candL = { x: L.x, y: L.y, w: b - L.x, h: L.h };
+      const candR = { x: b, y: R.y, w: rightEdge - b, h: R.h };
+      if (!isFreeExcept(candL, [L.id, R.id]) || !isFreeExcept(candR, [L.id, R.id])) return;
+      L.w = candL.w;
+      R.x = candR.x;
+      R.w = candR.w;
+      applyRect(L);
+      applyRect(R);
+      notifyResize(L);
+      notifyResize(R);
+      place();
+      changed = true;
+    };
+    const onUp = () => {
+      el.removeEventListener('pointermove', onMove);
+      el.removeEventListener('pointerup', onUp);
+      el.removeEventListener('pointercancel', onUp);
+      el.classList.remove('active');
+      if (changed) saveLayout();
+      rebuildDividers(); // adjacencies may have changed
+    };
+    el.addEventListener('pointermove', onMove);
+    el.addEventListener('pointerup', onUp);
+    el.addEventListener('pointercancel', onUp);
+  });
+
+  grid.appendChild(el);
+}
+
 /* ── add / remove tiles ─────────────────────────────────────────────── */
 
 function addTile(moduleId) {
@@ -394,6 +491,7 @@ function addTile(moduleId) {
   buildTile(tile);
   refreshEmptyState();
   saveLayout();
+  rebuildDividers();
 }
 
 function removeTile(id) {
@@ -408,6 +506,7 @@ function removeTile(id) {
   }
   refreshEmptyState();
   saveLayout();
+  rebuildDividers();
 }
 
 function clearAllTiles() {
@@ -686,6 +785,7 @@ function renderLayout(list) {
   tiles = list.map(sanitizeTile);
   for (const tile of tiles) buildTile(tile);
   refreshEmptyState();
+  rebuildDividers();
 }
 
 /* ── menus ──────────────────────────────────────────────────────────── */

public/style.css

@@ -14,7 +14,7 @@
   --warn: #f0b429;
   /* grid geometry (shell.js reads these) */
   --cell-h: 72px;
-  --gap: 10px;
+  --gap: 0px; /* tiles sit flush; their 1px borders are the only seam */
 }
 
 * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -138,7 +138,6 @@ button { font-family: inherit; }
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
-  padding: var(--gap);
   overscroll-behavior: contain;
 }
 
@@ -277,6 +276,41 @@ button { font-family: inherit; }
   border-radius: 0 0 3px 0;
 }
 
+/* ── seam divider between adjacent tiles ───────────────────────────── */
+
+/* When two tiles share a vertical edge, an invisible strip sits on the seam;
+   hovering reveals a small macOS-split-view-style grab pill. Dragging it
+   trades width between the two tiles. */
+.tile-divider {
+  position: absolute;
+  width: 14px;
+  transform: translateX(-50%);
+  z-index: 30;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: col-resize;
+  touch-action: none;
+}
+
+.tile-divider::after {
+  content: "";
+  width: 5px;
+  height: 44px;
+  max-height: 55%;
+  border-radius: 999px;
+  background: var(--muted);
+  opacity: 0;
+  transition: opacity 0.15s ease, background 0.15s ease;
+}
+
+.tile-divider:hover::after { opacity: 0.7; }
+.tile-divider.active::after { opacity: 1; background: var(--text); }
+
+/* Hide the pills while a tile itself is being moved or corner-resized —
+   they're rebuilt for the new geometry on release. */
+#grid.no-dividers .tile-divider { display: none; }
+
 /* status message a module can show while degraded (also used by the shell
    when a module fails to load) */
 .tile-msg {