A pin on the title bar, and no more notch

Pointing at a tile's top edge already brings its bar back, which left the
notch doing half a job: it could still hide a bar, but hiding one tile at a
time stopped being the interesting question once the whole dashboard could
fold its bars at once. It is gone.

In its place, a pin beside each tile's label. Pinned, that tile keeps its
bar while auto-hide is on — for the one or two tiles whose controls are
wanted at a glance. It sits next to the label rather than out with the gear
and ✕ because it is about the bar, not about the tile's contents, and it
stays faint until the tile is pointed at or the pin is on, so a wall of
unpinned tiles is not a wall of pins.

Fullscreen keeps its own rule: every bar folds, pinned or not, because that
is a mode for watching. What it loses with the notch it gets back better —
the same hover at a tile's top edge peeks a bar there too, and now as an
overlay, so peeking no longer pushes the tile's content down and disturbs
the auto-fit. The peek timer the notch needed goes with it.

Per-tile `headHidden` gives way to `headPinned` in the layout, on disk and
on the server.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

README.md

@@ -145,10 +145,11 @@ set on a tile itself (a PCO Plan header colour, say) is deliberately kept.
 
 ## Installing modules and updating
 
-Everything below happens in the **admin page**; ProdDash talks to its GitHub
-repository (`michaelmcgary2008/ProdDash`, branch `main` — change with
-`repo` / `branch` in `proddash.json` or the `PRODDASH_REPO` variable,
-`owner/repo#branch`). It downloads one small archive of the branch, at most
+Everything below happens in the **admin page**; ProdDash talks to its git
+repository — `michael/ProdDash` on the church's own Gitea at
+`chronicles-ab.waterschurch.org:3000`, branch `main`. Change it with `forge`,
+`repo` and `branch` in `proddash.json`, or the `PRODDASH_FORGE` and
+`PRODDASH_REPO` variables (`owner/repo#branch`). It downloads one small archive of the branch, at most
 every few minutes, only while the admin page is open or for the update check
 below. Nothing is installed without someone clicking.
 
@@ -188,13 +189,17 @@ below. Nothing is installed without someone clicking.
 
 - **＋** — 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 **title bar** to move it; drag either **bottom
-  corner** to resize; **✕** removes it. Hover a tile and a small pill
-  appears on its **bottom edge** — drag it to change just the height. If
-  another tile sits directly below, the pill moves the shared edge instead,
-  trading rows between the two so the column keeps its total height. Tiles
-  sit flush — when two share a vertical edge, hover the seam and the same
-  kind of pill appears; drag it to trade width (macOS split-view style).
+- Drag a tile by its **title bar** to move it; **✕** removes it.
+- **Resize from any edge or bottom corner**, the way a window resizes:
+  nothing is drawn on a tile to mark the spots — the cursor over an edge is
+  what says it can be dragged. An edge moves only itself, so the tile grows
+  or shrinks into the space beside it while the opposite edge stays put,
+  stopping at a neighbour or at the module's own minimum size. Two
+  exceptions, both of which move a *shared* edge instead: with another tile
+  directly below, the bottom edge trades rows between the two so the column
+  keeps its total height; and where two tiles meet side by side, the seam
+  between them trades width (macOS split-view style), showing itself only
+  while you drag it.
 - **Fullscreen** (the ⛶ button) is a viewing mode: the menu bar hides (its
   green lip at the top-left brings it back, minus the Admin button), the
   occupied columns stretch to the full width, and every column runs to the
@@ -204,9 +209,21 @@ below. Nothing is installed without someone clicking.
   gap; alone in its columns it stays as it is. Nothing is saved — the layout
   reverts when you leave fullscreen. A layout deeper than the screen keeps
   its normal row height and scrolls.
-- A tile's actions (menus, text size, clear…) live in its **title bar**;
-  the small **notch** on the bar's bottom edge hides/shows the whole bar
-  for a clean wall-display look. The menu bar's handle is the **ProdDash
+- A tile's actions (menus, text size, clear…) live in its **title bar**.
+- **Auto-hide bars** (the button left of ⛶) folds every title bar away, for
+  a windowed screen that should read like a wall display. A folded bar is
+  not a gone bar: point at the tile's top edge and it slides back in over
+  the content, where its buttons click and its width drags the tile exactly
+  as before — so a dashboard can be arranged with every bar out of the way.
+  The switch is off on a fresh dashboard and saves with the layout —
+  including a named layout on the server, so a booth loads its screen with
+  the bars already tucked away. Fullscreen folds every bar regardless, and
+  the same hover brings one back there too.
+- The **pin** beside a tile's title keeps *that* tile's bar showing while
+  auto-hide is on — for the one or two tiles whose controls are wanted at
+  a glance. It turns the accent colour when it is on and saves with the
+  layout. Fullscreen still folds a pinned bar with the rest.
+- The menu bar's own handle is the **ProdDash
   name itself**, wrapped in a translucent green pill at the left — click it
   to hide the bar; the slim green lip it leaves at the top-left edge brings
   the bar back. It stays at the left so it never sits on top of a tile's

config/proddash.json

@@ -1,7 +1,7 @@
 {
   "port": 24500,
   "adminPasscode": "",
-  "forge": "github",
-  "repo": "michaelmcgary2008/ProdDash",
+  "forge": "http://chronicles-ab.waterschurch.org:3000",
+  "repo": "michael/ProdDash",
   "branch": "main"
 }

docs/MODULE-GUIDE.md

@@ -367,9 +367,10 @@ fallback), never a "Text size" field in `instanceSchema`; a timestamps or
 newest-first toggle in the header means no such switch in the gear. The
 gear is for display choices that have no button of their own.
 
-One more thing to know: the user can hide the whole title bar with the
-small notch on its bottom edge (a clean-view mode for wall displays). Your
-controls disappear with it, so nothing essential — status, reconnects,
+One more thing to know: the whole title bar folds away when the dashboard
+auto-hides it, and always in fullscreen (a clean-view mode for wall
+displays) — it comes back only while the pointer is at the tile's top edge.
+Your controls fold away with it, so nothing essential — status, reconnects,
 live data — may exist *only* as a header control.
 
 `sse(path, handlers)` handlers:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "proddash",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "private": true,
   "description": "Modular production dashboard for Waters Church \u2014 zero-dependency Node server + vanilla client",
   "license": "UNLICENSED",

public/index.html

@@ -19,6 +19,14 @@
 
     <span class="spacer"></span>
 
+    <button class="tb-btn icon" id="autohide-btn" title="Auto-hide bars" aria-label="Auto-hide tile title bars" aria-pressed="false">
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M9 6l3-3 3 3"/>
+        <rect x="4" y="10" width="16" height="10" rx="1.5"/>
+        <path d="M4 14h16"/>
+      </svg>
+    </button>
+
     <button class="tb-btn icon" id="fs-btn" title="Fullscreen" aria-label="Fullscreen">
       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
         <path d="M4 9V5a1 1 0 0 1 1-1h4"/><path d="M20 9V5a1 1 0 0 0-1-1h-4"/>

public/shell.js

@@ -24,6 +24,7 @@ function toast(msg, isError = false) {
   toastTimer = setTimeout(() => { toastEl.hidden = true; }, 3200);
 }
 
+const autoHideBtn = document.getElementById('autohide-btn');
 const modalBackdrop = document.getElementById('modal-backdrop');
 const modalEl = document.getElementById('modal');
 
@@ -161,18 +162,25 @@ async function loadRegistry() {
 let tiles = [];
 const tileEls = new Map(); // tile id -> { el, body, dot, titleEl, instance }
 
+/* Whether tile title bars fold away until you point at them. It is part of
+   how a dashboard is arranged rather than a preference of this browser, so
+   it saves with the layout — including a named layout on the server — and a
+   fresh dashboard starts with the bars showing. Fullscreen folds every bar
+   away regardless; this is the windowed equivalent, asked for by hand. */
+let autoHideHeads = false;
+
 function saveLayout() {
   try {
-    localStorage.setItem(LS_LAYOUT, JSON.stringify({ v: 1, tiles }));
+    localStorage.setItem(LS_LAYOUT, JSON.stringify({ v: 1, autoHideHeads, tiles }));
   } catch { /* private mode / full — layout just won't persist */ }
 }
 
 function loadLayoutFromStorage() {
   try {
     const raw = JSON.parse(localStorage.getItem(LS_LAYOUT) || 'null');
-    if (raw && Array.isArray(raw.tiles)) return raw.tiles;
+    if (raw && Array.isArray(raw.tiles)) return raw;
   } catch { /* corrupted — start fresh */ }
-  return [];
+  return { tiles: [] };
 }
 
 function sanitizeTile(t) {
@@ -185,7 +193,7 @@ function sanitizeTile(t) {
     w,
     h: Math.max(1, Number(t.h) || 2),
     settings: (t.settings && typeof t.settings === 'object') ? t.settings : {},
-    headHidden: Boolean(t.headHidden),
+    headPinned: Boolean(t.headPinned),
     // set when the tile was added from a module's tile list (multi-tile modules)
     variant: t.variant ? String(t.variant) : '',
     title: t.title ? String(t.title) : '',
@@ -249,9 +257,48 @@ function minSizeOf(tile) {
   };
 }
 
+/* ── title bars that fold away ──────────────────────────────────────── */
+
+/* A bar is "off" when it is folded out of sight: the dashboard has auto-hide
+   on and this tile is not pinned, or the screen is in fullscreen, which folds
+   every bar for watching whatever the tiles say. Off is never gone — the top
+   edge of the tile brings it back for as long as the pointer is there. */
+
+/** How close to the tile's top edge the pointer opens a folded-away bar. */
+const HEAD_REVEAL_PX = 22;
+/** How far down it may wander before that bar folds away again (bar + a little). */
+const HEAD_HOLD_PX = 38;
+
+function headIsOff(tile) {
+  if (document.body.classList.contains('fullscreen')) return true;
+  return autoHideHeads && !tile.headPinned;
+}
+
+function applyHeadState(tile, el = tileEls.get(tile.id)?.el) {
+  if (!el) return;
+  const off = headIsOff(tile);
+  el.classList.toggle('head-off', off);
+  if (!off) el.classList.remove('head-peek');
+}
+
+/** Re-read every tile's bar — after the toggle, or after fullscreen changes. */
+function applyAllHeadStates() {
+  for (const tile of tiles) applyHeadState(tile);
+}
+
+function setAutoHideHeads(on, { save = true } = {}) {
+  autoHideHeads = Boolean(on);
+  document.body.classList.toggle('autohide-heads', autoHideHeads);
+  autoHideBtn?.classList.toggle('is-on', autoHideHeads);
+  autoHideBtn?.setAttribute('aria-pressed', autoHideHeads ? 'true' : 'false');
+  applyAllHeadStates();
+  if (save) saveLayout();
+}
+
 /* ── tile DOM ───────────────────────────────────────────────────────── */
 
 const CLOSE_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>';
+const PIN_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 16.5V22"/><path class="pin-head" d="M8.5 3h7l-1.2 7 3.2 3.2H6.5L9.7 10 8.5 3z"/></svg>';
 const GEAR_SVG = '<svg viewBox="0 0 90 90" fill="currentColor" aria-hidden="true"><path d="M 82.94 32.538 c -2.685 0 -5.093 -1.545 -6.327 -3.929 c -0.245 -0.476 -0.504 -0.948 -0.774 -1.416 c -0.27 -0.468 -0.55 -0.928 -0.84 -1.378 c -1.448 -2.26 -1.582 -5.117 -0.239 -7.443 c 1.951 -3.378 0.792 -7.696 -2.584 -9.645 l -9.352 -5.4 c -3.378 -1.951 -7.696 -0.792 -9.645 2.584 l -0.002 0.003 c -1.322 2.291 -3.815 3.641 -6.456 3.512 c -1.149 -0.056 -2.301 -0.057 -3.455 0 c -2.638 0.128 -5.124 -1.226 -6.444 -3.513 l -0.002 -0.002 c -1.951 -3.378 -6.269 -4.535 -9.645 -2.584 l -9.352 5.4 c -3.378 1.951 -4.535 6.269 -2.584 9.645 l 0.002 0.002 c 1.321 2.286 1.25 5.117 -0.18 7.336 c -0.625 0.972 -1.201 1.97 -1.726 2.993 c -1.209 2.353 -3.625 3.836 -6.269 3.836 H 7.063 c -3.9 0 -7.061 3.162 -7.061 7.061 v 10.801 c 0 3.9 3.162 7.061 7.061 7.061 l 0 0 c 2.685 0 5.093 1.545 6.327 3.929 c 0.245 0.475 0.504 0.948 0.774 1.416 c 0.27 0.468 0.55 0.928 0.84 1.378 c 1.448 2.26 1.582 5.117 0.239 7.443 c -1.951 3.378 -0.792 7.696 2.584 9.645 l 9.352 5.4 c 3.378 1.951 7.696 0.792 9.645 -2.584 l 0.002 -0.003 c 1.322 -2.291 3.815 -3.641 6.456 -3.512 c 1.149 0.056 2.301 0.057 3.455 0 c 2.638 -0.128 5.124 1.226 6.444 3.513 l 0.002 0.002 c 1.951 3.378 6.268 4.535 9.645 2.584 l 9.352 -5.4 c 3.378 -1.949 4.535 -6.268 2.584 -9.645 l -0.002 -0.002 c -1.321 -2.286 -1.25 -5.117 0.18 -7.336 c 0.625 -0.972 1.201 -1.97 1.726 -2.993 c 1.209 -2.353 3.625 -3.836 6.269 -3.836 h 0.003 c 3.9 0 7.061 -3.162 7.061 -7.061 V 39.599 C 90.001 35.7 86.84 32.538 82.94 32.538 z M 54.998 62.318 c -9.565 5.523 -21.796 2.245 -27.317 -7.32 c -5.523 -9.565 -2.245 -21.796 7.32 -27.317 s 21.796 -2.245 27.317 7.32 C 67.841 44.566 64.563 56.797 54.998 62.318 z"/></svg>';
 
 function buildTile(tile) {
@@ -278,7 +325,34 @@ function buildTile(tile) {
   const controls = document.createElement('span');
   controls.className = 'tile-controls';
 
-  head.append(dot, title, controls);
+  /* Pinned tiles keep their bar through auto-hide. The switch sits right
+     beside the label rather than out with the actions, because it is about
+     this bar rather than about the tile's contents. */
+  const pin = document.createElement('button');
+  pin.className = 'tile-btn pin';
+  pin.innerHTML = PIN_SVG;
+  const paintPin = () => {
+    const on = Boolean(tile.headPinned);
+    pin.classList.toggle('is-pinned', on);
+    pin.setAttribute('aria-pressed', on ? 'true' : 'false');
+    // Instant tooltips read `title` the first time and `data-tip` after.
+    pin.title = on ? 'Unpin bar' : 'Pin bar';
+    pin.setAttribute('data-tip', pin.title);
+  };
+  paintPin();
+  pin.addEventListener('click', (e) => {
+    e.stopPropagation();
+    tile.headPinned = !tile.headPinned;
+    paintPin();
+    applyHeadState(tile, el);
+    saveLayout();
+  });
+
+  // Keeps the label hugging the pin however wide the tile gets.
+  const gap = document.createElement('span');
+  gap.className = 'tile-head-gap';
+
+  head.append(dot, title, pin, gap, controls);
 
   // Every tile has something to set: its own settings when the module
   // offers any, and the tint either way.
@@ -307,45 +381,47 @@ function buildTile(tile) {
   const body = document.createElement('div');
   body.className = 'tile-body';
 
-  const resize = document.createElement('div');
-  resize.className = 'tile-resize';
-  resize.title = 'Drag to resize';
+  /* The rim: both bottom corners resize in two directions, the bottom edge
+     moves that edge (trading rows with tiles below), and the other three
+     move only themselves — the top edge changes where the tile starts, the
+     sides how wide it is — each stopping where a neighbour or the tile's own
+     minimum says it must. None of them draw anything: the cursor over an
+     edge is what says it can be dragged, as on a window. */
+  const grip = (cls) => {
+    const gripEl = document.createElement('div');
+    gripEl.className = cls;
+    return gripEl;
+  };
+  const resize = grip('tile-resize');
+  const resizeLeft = grip('tile-resize-left');
+  const resizeBottom = grip('tile-resize-bottom');
+  const edgeTop = grip('tile-resize-top');
+  const edgeRight = grip('tile-resize-right');
+  const edgeLeft = grip('tile-resize-side');
 
-  const resizeLeft = document.createElement('div');
-  resizeLeft.className = 'tile-resize-left';
-  resizeLeft.title = 'Drag to resize';
-
-  // pill on the bottom edge: moves that edge (trading rows with tiles below)
-  const resizeBottom = document.createElement('div');
-  resizeBottom.className = 'tile-resize-bottom';
-  resizeBottom.title = 'Drag to adjust height';
-
-  // notch on the title bar's bottom edge: hides/shows the bar
-  const notch = document.createElement('button');
-  notch.className = 'tile-notch';
-  notch.title = 'Hide / show the title bar';
-  notch.addEventListener('click', (e) => {
-    e.stopPropagation();
-    // In fullscreen the bars are all folded away for watching; the notch
-    // peeks one open for a moment without touching what this tile saved.
-    if (document.body.classList.contains('fullscreen')) {
-      peekHead(tile, el, !el.classList.contains('head-peek'));
-      return;
-    }
-    tile.headHidden = !tile.headHidden;
-    el.classList.toggle('head-hidden', tile.headHidden);
-    saveLayout();
+  // A folded-away bar is still reachable: point at the tile's top edge and it
+  // slides in over the content, where its buttons click and its whole width
+  // drags the tile exactly as when it is showing.
+  el.addEventListener('pointermove', (ev) => {
+    if (!headIsOff(tile)) return;
+    // Mid-drag the tile moves under the pointer, and mid-resize the edges do
+    // — neither is a moment to take the bar away.
+    if (el.classList.contains('dragging') || el.classList.contains('resizing')) return;
+    const y = ev.clientY - el.getBoundingClientRect().top;
+    const shown = el.classList.contains('head-peek');
+    // It takes less to hold the bar open than to open it, so a bar that
+    // appears under the pointer cannot flicker straight back out.
+    if (!shown && y <= HEAD_REVEAL_PX) el.classList.add('head-peek');
+    else if (shown && y > HEAD_HOLD_PX) el.classList.remove('head-peek');
   });
 
-  // A peeked title bar stays while the pointer is on its tile, and starts
-  // counting down as soon as it leaves.
-  el.addEventListener('pointerenter', () => clearPeekTimer(tile.id));
   el.addEventListener('pointerleave', () => {
-    if (el.classList.contains('head-peek')) schedulePeekHide(tile.id, el);
+    if (el.classList.contains('dragging') || el.classList.contains('resizing')) return;
+    el.classList.remove('head-peek');
   });
 
-  el.append(head, body, resize, resizeLeft, resizeBottom, notch);
-  el.classList.toggle('head-hidden', Boolean(tile.headHidden));
+  el.append(head, body, resize, resizeLeft, resizeBottom, edgeTop, edgeRight, edgeLeft);
+  applyHeadState(tile, el);
   grid.appendChild(el);
 
   const entry = { el, body, dot, titleEl: title, controls, instance: null };
@@ -356,6 +432,9 @@ function buildTile(tile) {
   wireResize(tile, el, resize, false);
   wireResize(tile, el, resizeLeft, true);
   wireBottomResize(tile, el, resizeBottom);
+  wireEdgeResize(tile, el, edgeTop, 'n');
+  wireEdgeResize(tile, el, edgeRight, 'e');
+  wireEdgeResize(tile, el, edgeLeft, 'w');
 
   mountModule(tile);
   return entry;
@@ -369,7 +448,7 @@ function refreshEmptyState() {
 
 function wireDrag(tile, el, handle) {
   handle.addEventListener('pointerdown', (ev) => {
-    if (ev.target.closest('.tile-btn') || ev.target.closest('.tile-menu') || ev.target.closest('.tile-notch')) return;
+    if (ev.target.closest('.tile-btn') || ev.target.closest('.tile-menu')) return;
     if (ev.button !== 0 && ev.pointerType === 'mouse') return;
     if (document.body.classList.contains('fullscreen')) return;
     ev.preventDefault();
@@ -486,6 +565,80 @@ function wireResize(tile, el, handle, fromLeft) {
   });
 }
 
+/* ── drag the top, left or right edge ───────────────────────────────── */
+
+/* One edge moves and the opposite one stays where it is, so the tile grows
+   or shrinks into the space beside it. Unlike the bottom-edge pill these do
+   not trade rows or columns with a neighbour: the edge simply stops when it
+   meets one, which is what "resize this tile" should mean. */
+
+function wireEdgeResize(tile, el, handle, edge) {
+  handle.addEventListener('pointerdown', (ev) => {
+    if (ev.button !== 0 && ev.pointerType === 'mouse') return;
+    if (document.body.classList.contains('fullscreen')) return;
+    ev.preventDefault();
+    ev.stopPropagation();
+    closeSettingsPopovers();
+    handle.setPointerCapture(ev.pointerId);
+    const m = cellMetrics();
+    const sx = ev.clientX;
+    const sy = ev.clientY;
+    const startX = tile.x;
+    const startY = tile.y;
+    const startW = tile.w;
+    const startH = tile.h;
+    const min = minSizeOf(tile);
+    el.classList.add('resizing');
+    grid.classList.add('no-dividers');
+    let changed = false;
+
+    const onMove = (e) => {
+      const dCols = Math.round((e.clientX - sx) / (m.cw + m.gap));
+      const dRows = Math.round((e.clientY - sy) / (m.ch + m.gap));
+      let cand;
+      if (edge === 'n') {
+        // the top edge moves; the bottom edge stays put
+        const y = Math.max(0, Math.min(startY + startH - min.h, startY + dRows));
+        cand = { x: tile.x, y, w: tile.w, h: startY + startH - y };
+      } else if (edge === 'w') {
+        // the left edge moves; the right edge stays put
+        const x = Math.max(0, Math.min(startX + startW - min.w, startX + dCols));
+        cand = { x, y: tile.y, w: startX + startW - x, h: tile.h };
+      } else {
+        cand = {
+          x: tile.x,
+          y: tile.y,
+          w: Math.max(min.w, Math.min(COLS - tile.x, startW + dCols)),
+          h: tile.h,
+        };
+      }
+      if (cand.x === tile.x && cand.y === tile.y && cand.w === tile.w && cand.h === tile.h) return;
+      if (!isFree(cand, tile.id)) return;
+      tile.x = cand.x;
+      tile.y = cand.y;
+      tile.w = cand.w;
+      tile.h = cand.h;
+      applyRect(tile);
+      changed = true;
+      notifyResize(tile);
+    };
+    const onUp = () => {
+      handle.removeEventListener('pointermove', onMove);
+      handle.removeEventListener('pointerup', onUp);
+      handle.removeEventListener('pointercancel', onUp);
+      el.classList.remove('resizing');
+      grid.classList.remove('no-dividers');
+      if (changed) {
+        saveLayout();
+        rebuildDividers();
+      }
+    };
+    handle.addEventListener('pointermove', onMove);
+    handle.addEventListener('pointerup', onUp);
+    handle.addEventListener('pointercancel', onUp);
+  });
+}
+
 /* ── drag the bottom edge: height only ──────────────────────────────── */
 
 /* The pill on a tile's bottom edge moves that edge. When other tiles sit
@@ -613,7 +766,6 @@ function seamPairsAt(boundary) {
 function buildDivider(L, R, top, bottom) {
   const el = document.createElement('div');
   el.className = 'tile-divider';
-  el.title = 'Drag to resize this column';
 
   const place = () => {
     const m = cellMetrics();
@@ -626,14 +778,6 @@ function buildDivider(L, R, top, bottom) {
 
   const boundary = () => L.x + L.w;
   const groupEls = () => dividers.filter((d) => d.boundary() === boundary()).map((d) => d.el);
-  const unlink = () => { for (const d of dividers) d.el.classList.remove('linked'); };
-
-  // Before anything is dragged, show which seams travel with this one.
-  el.addEventListener('pointerenter', () => {
-    if (document.body.classList.contains('fullscreen')) return;
-    for (const other of groupEls()) other.classList.add('linked');
-  });
-  el.addEventListener('pointerleave', unlink);
 
   el.addEventListener('pointerdown', (ev) => {
     if (ev.button !== 0 && ev.pointerType === 'mouse') return;
@@ -689,7 +833,6 @@ function buildDivider(L, R, top, bottom) {
       el.removeEventListener('pointerup', onUp);
       el.removeEventListener('pointercancel', onUp);
       for (const other of group) other.classList.remove('active');
-      unlink();
       if (changed) saveLayout();
       rebuildDividers(); // adjacencies may have changed
     };
@@ -727,7 +870,7 @@ function addTile(moduleId, entry = null) {
     if (spec && 'default' in spec) settings[key] = spec.default;
   }
   Object.assign(settings, entry?.settings || {});
-  const tile = { id: newId(), module: moduleId, ...spot, ...size, settings };
+  const tile = { id: newId(), module: moduleId, ...spot, ...size, settings, headPinned: false };
   if (entry) {
     tile.variant = String(entry.id);
     tile.title = String(entry.name || '');
@@ -743,7 +886,6 @@ function addTile(moduleId, entry = null) {
 function removeTile(id) {
   const idx = tiles.findIndex((t) => t.id === id);
   if (idx < 0) return;
-  clearPeekTimer(id);
   unmountModule(tiles[idx]);
   tiles.splice(idx, 1);
   const entry = tileEls.get(id);
@@ -997,7 +1139,7 @@ function buildModuleApi(tile, man, entry) {
     /**
      * The tile's title bar. Controls added here live next to the gear/close
      * buttons and are removed automatically when the instance stops. The
-     * whole bar can be hidden by the user via the notch, so nothing
+     * whole bar folds away when the dashboard auto-hides it, so nothing
      * essential should exist ONLY as a header control.
      */
     header: {
@@ -1712,9 +1854,13 @@ function remountTile(tile) {
 
 /* ── layout apply / reset ───────────────────────────────────────────── */
 
-function renderLayout(list) {
+function renderLayout(layout) {
+  // Callers pass a whole layout; an array on its own is still understood so
+  // "reset" can simply hand over no tiles.
+  const list = Array.isArray(layout) ? layout : (layout?.tiles || []);
   clearAllTiles();
   tiles = list.map(sanitizeTile);
+  if (!Array.isArray(layout)) setAutoHideHeads(Boolean(layout?.autoHideHeads), { save: false });
   for (const tile of tiles) buildTile(tile);
   refreshEmptyState();
   rebuildDividers();
@@ -1794,7 +1940,7 @@ wireDropdown('layout-btn', 'layout-menu', async (menu, stillOpen) => {
       const res = await fetch('/api/layouts/' + encodeURIComponent(name), {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ layout: { tiles } }),
+        body: JSON.stringify({ layout: { autoHideHeads, tiles } }),
       });
       const body = await res.json().catch(() => ({}));
       if (!res.ok) throw new Error(body.error || 'Save failed (' + res.status + ')');
@@ -1838,7 +1984,7 @@ wireDropdown('layout-btn', 'layout-menu', async (menu, stillOpen) => {
         if (!res.ok) throw new Error(body.error || 'Load failed (' + res.status + ')');
         // Loading copies the layout into this browser's own state — it
         // does not live-link browsers together.
-        renderLayout(body.layout.tiles || []);
+        renderLayout(body.layout);
         saveLayout();
         toast(`Loaded “${l.name}”`);
       } catch (e) {
@@ -1850,7 +1996,7 @@ wireDropdown('layout-btn', 'layout-menu', async (menu, stillOpen) => {
   menu.insertBefore(block, reset);
 });
 
-/* ── menu bar show/hide (notch, like the tile title bars) ───────────── */
+/* ── menu bar show/hide (its own notch, at the top-left) ────────────── */
 
 const topbar = document.getElementById('topbar');
 const topbarNotch = document.getElementById('topbar-notch');
@@ -1877,41 +2023,6 @@ try {
   if (localStorage.getItem(LS_MENU) === '1') setMenuHidden(true, { persist: false });
 } catch { /* fine */ }
 
-/* ── fullscreen: peeking at a tile's title bar ──────────────────────── */
-
-/** How long a peeked title bar stays after the pointer leaves its tile. */
-const PEEK_HIDE_MS = 10000;
-const peekTimers = new Map();   // tile id → timeout
-
-function clearPeekTimer(id) {
-  const timer = peekTimers.get(id);
-  if (timer === undefined) return;
-  clearTimeout(timer);
-  peekTimers.delete(id);
-}
-
-function schedulePeekHide(id, el) {
-  clearPeekTimer(id);
-  peekTimers.set(id, setTimeout(() => {
-    peekTimers.delete(id);
-    el.classList.remove('head-peek');
-  }, PEEK_HIDE_MS));
-}
-
-function peekHead(tile, el, on) {
-  el.classList.toggle('head-peek', on);
-  clearPeekTimer(tile.id);
-  // Opened from a click the pointer is on the tile, so the countdown waits
-  // for it to leave — unless it already has (a keyboard or touch open).
-  if (on && !el.matches(':hover')) schedulePeekHide(tile.id, el);
-}
-
-/** Back to a plain screen: no peeks left open, no timers left running. */
-function clearPeeks() {
-  for (const id of [...peekTimers.keys()]) clearPeekTimer(id);
-  document.querySelectorAll('.tile.head-peek').forEach((el) => el.classList.remove('head-peek'));
-}
-
 /* ── fullscreen: auto-fit the layout to the screen ──────────────────── */
 
 /* Fullscreen is a viewing mode. The occupied columns stretch proportionally
@@ -2026,6 +2137,13 @@ function clearFullscreenFit() {
   }
 }
 
+autoHideBtn?.addEventListener('click', () => {
+  setAutoHideHeads(!autoHideHeads);
+  toast(autoHideHeads
+    ? 'Title bars hide until you point at a tile\u2019s top edge'
+    : 'Title bars stay put');
+});
+
 fsBtn.addEventListener('click', () => {
   if (!document.fullscreenElement) {
     document.documentElement.requestFullscreen?.().catch(() => {});
@@ -2039,14 +2157,15 @@ document.addEventListener('fullscreenchange', () => {
   document.body.classList.toggle('fullscreen', active);
   if (active) {
     closeSettingsPopovers();
+    applyAllHeadStates(); // fullscreen has its own rule for the bars
     menuHiddenBeforeFs = document.body.classList.contains('menu-hidden');
     setMenuHidden(true, { persist: false }); // the menu auto-hides; its notch brings it back
     // let the collapsed menubar's space settle before measuring
     requestAnimationFrame(() => requestAnimationFrame(applyFullscreenFit));
   } else {
     setMenuHidden(menuHiddenBeforeFs, { persist: false });
-    clearPeeks();
     clearFullscreenFit();
+    applyAllHeadStates();
   }
 });
 

public/style.css

@@ -126,6 +126,14 @@ body.menu-hidden #topbar {
   line-height: 1;
 }
 .tb-btn.icon svg { display: block; }
+/* A top-bar button that is a switch rather than an action lights up the same
+   way an open tile button does, so "on" reads the same everywhere. */
+.tb-btn.is-on,
+.tb-btn.is-on:hover {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--accent-text);
+}
 
 /* ── dropdown menus ────────────────────────────────────────────────── */
 
@@ -270,11 +278,33 @@ body.menu-hidden #topbar {
   transition: height 0.22s ease, border-bottom-width 0.22s ease;
 }
 .tile.dragging .tile-head { cursor: grabbing; }
-/* hidden = collapsed, not removed, so the notch toggle animates */
-.tile.head-hidden .tile-head {
-  height: 0;
-  border-bottom-width: 0;
-  overflow: hidden;
+
+/* Folded away: the bar leaves the flow and parks just above the tile, so the
+   module keeps the whole body and nothing reflows as the bar comes and goes.
+   Pointing at the tile's top edge slides it back in over the content
+   (shell.js adds .head-peek) — and because it is the same element, its
+   buttons click and its width drags the tile just as they always did. */
+.tile.head-off > .tile-head {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 7;
+  background: color-mix(in srgb, var(--panel) 90%, transparent);
+  -webkit-backdrop-filter: blur(7px);
+  backdrop-filter: blur(7px);
+  transform: translateY(-100%);
+  opacity: 0;
+  pointer-events: none;
+  transition: transform 0.18s ease, opacity 0.18s ease;
+}
+.tile.head-off.head-peek > .tile-head {
+  transform: none;
+  opacity: 1;
+  pointer-events: auto;
+}
+.tile.is-tinted.head-off > .tile-head {
+  background: color-mix(in srgb, var(--tile-tint) 20%, var(--panel));
 }
 
 .tile-head .dot {
@@ -290,7 +320,7 @@ body.menu-hidden #topbar {
 .tile-head .dot.error { background: var(--danger); }
 
 .tile-title {
-  flex: 1;
+  flex: 0 1 auto;
   min-width: 0;
   font-size: 12px;
   font-weight: 700;
@@ -321,6 +351,33 @@ body.menu-hidden #topbar {
 .tile-btn.is-open,
 .tile-btn.is-open:hover { background: var(--accent); color: var(--accent-text); }
 
+/* The pin: a state, not an action, so it stays quiet until it is on and
+   sits closer to the label than to the buttons at the other end. It fades
+   in with the rest of the tile's chrome so a wall of unpinned tiles is not
+   a wall of pins. */
+.tile-btn.pin {
+  width: 18px;
+  height: 18px;
+  margin-left: 2px;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+.tile-btn.pin svg { width: 12px; height: 12px; }
+.tile:hover .tile-btn.pin,
+.tile-btn.pin:focus-visible { opacity: 0.75; }
+.tile-btn.pin:hover { opacity: 1; }
+/* Pinned reads at a glance, whether or not anything is being pointed at. */
+.tile-btn.pin.is-pinned,
+.tile:hover .tile-btn.pin.is-pinned {
+  opacity: 1;
+  color: var(--accent);
+}
+.tile-btn.pin.is-pinned .pin-head { fill: currentColor; }
+.tile-btn.pin.is-pinned:hover { background: var(--border); }
+
+/* Keeps the label hugging its pin however wide the tile is. */
+.tile-head-gap { flex: 1 1 auto; min-width: 0; }
+
 /* the shell's tooltip: shown at once under the button the pointer is on */
 #tip {
   position: fixed;
@@ -374,55 +431,6 @@ body.menu-hidden #topbar {
 }
 .tile-menu[hidden] { display: none; }
 
-/* notch on the title bar's bottom edge: click to hide/show the bar
-   (same idea as the ProdCom Listener's pull-down menubar handle) */
-.tile-notch {
-  position: absolute;
-  top: 32px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 46px;
-  height: 13px;
-  padding: 0;
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-top: none;
-  border-radius: 0 0 10px 10px;
-  cursor: pointer;
-  z-index: 6;
-  opacity: 0;
-  transition: opacity 0.15s ease, top 0.22s ease;
-}
-.tile:hover .tile-notch { opacity: 0.6; }
-.tile .tile-notch:hover { opacity: 1; }
-.tile.head-hidden .tile-notch { top: 0; }
-.tile-notch::after {
-  content: "";
-  display: block;
-  width: 18px;
-  height: 3px;
-  margin: 4px auto 0;
-  border-radius: 999px;
-  background: var(--muted);
-}
-.tile-notch:hover::after { background: var(--text); }
-
-/* Fullscreen is for watching, not arranging: every title bar folds away, and
-   a tile's own hidden/shown preference is left untouched for when the screen
-   comes back. The notch still peeks one open, and it folds back once the
-   pointer has been off that tile for a while (PEEK_HIDE_MS in shell.js). */
-body.fullscreen .tile:not(.head-peek) .tile-head {
-  height: 0;
-  border-bottom-width: 0;
-  overflow: hidden;
-}
-body.fullscreen .tile:not(.head-peek) .tile-notch { top: 0; }
-body.fullscreen .tile.head-peek .tile-head {
-  height: 32px;
-  border-bottom-width: 1px;
-}
-body.fullscreen .tile.head-peek .tile-notch { top: 32px; }
-
 .tile-body {
   flex: 1;
   position: relative;
@@ -431,80 +439,67 @@ body.fullscreen .tile.head-peek .tile-notch { top: 32px; }
   overflow: hidden;
 }
 
+/* ── resizing: the whole rim of a tile, drawn nowhere ────────────────
+   Every edge and both bottom corners resize, so there is nothing to point
+   at — the grips are invisible and the cursor says what each one does, the
+   way a window's own edges do. Together they tile the tile's outer 8px
+   without a gap: the top strip runs corner to corner, the sides run between
+   it and the bottom corners, and the bottom strip fills between those. */
+
+.tile-resize,
+.tile-resize-left,
+.tile-resize-bottom,
+.tile-resize-top,
+.tile-resize-right,
+.tile-resize-side {
+  position: absolute;
+  z-index: 5;
+  touch-action: none;
+}
+
+/* the two bottom corners: both directions at once */
 .tile-resize,
 .tile-resize-left {
-  position: absolute;
   bottom: 0;
   width: 20px;
   height: 20px;
-  touch-action: none;
-  z-index: 5;
-  color: var(--muted);
-  opacity: 0; /* corner indicators only show while hovering the tile */
-  transition: opacity 0.15s ease;
 }
 .tile-resize { right: 0; cursor: nwse-resize; }
 .tile-resize-left { left: 0; cursor: nesw-resize; }
-.tile:hover .tile-resize,
-.tile:hover .tile-resize-left { opacity: 0.6; }
-.tile .tile-resize:hover,
-.tile .tile-resize-left:hover { opacity: 1; color: var(--text); }
-.tile-resize::after,
-.tile-resize-left::after {
-  content: "";
-  position: absolute;
-  bottom: 4px;
-  width: 9px;
-  height: 9px;
-  border-bottom: 2px solid currentColor;
-}
-.tile-resize::after {
-  right: 4px;
-  border-right: 2px solid currentColor;
-  border-radius: 0 0 3px 0;
-}
-.tile-resize-left::after {
-  left: 4px;
-  border-left: 2px solid currentColor;
-  border-radius: 0 0 0 3px;
-}
 
-/* bottom edge: drag to move the tile's bottom edge (height only). Drawn as
-   the same 2px line as the corner handles it sits between, on the same
-   4px inset, so the three read as one set of marks along the bottom. */
+/* top and bottom: height only */
+.tile-resize-top,
 .tile-resize-bottom {
-  position: absolute;
-  left: 24px;
-  right: 24px;
-  bottom: 0;
-  height: 10px;
-  z-index: 5;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
+  height: 8px;
   cursor: ns-resize;
-  touch-action: none;
-  color: var(--muted);
-  opacity: 0;
-  transition: opacity 0.15s ease;
 }
-.tile-resize-bottom::after {
-  content: "";
-  width: 44px;
-  max-width: 60%;
-  height: 0;
-  margin-bottom: 4px;
-  border-bottom: 2px solid currentColor;
+.tile-resize-top {
+  top: 0;
+  left: 0;
+  right: 0;
+  /* Above a revealed title bar: the bar slides in under the pointer here,
+     and this strip has to stay the top edge rather than become part of it. */
+  z-index: 8;
 }
-.tile:hover .tile-resize-bottom { opacity: 0.6; }
-.tile .tile-resize-bottom:hover,
-.tile.resizing .tile-resize-bottom { opacity: 1; color: var(--text); }
+.tile-resize-bottom { bottom: 0; left: 20px; right: 20px; }
+
+/* left and right: width only, between the top strip and the bottom corners */
+.tile-resize-right,
+.tile-resize-side {
+  top: 8px;
+  bottom: 20px;
+  width: 8px;
+  cursor: ew-resize;
+}
+.tile-resize-right { right: 0; }
+.tile-resize-side { left: 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. */
+/* When two tiles share a vertical edge, an invisible strip sits on the seam.
+   Dragging it trades width between the two tiles rather than resizing one,
+   so it sits above their own edge grips. Like them it draws nothing at rest
+   — only while it is being dragged, to show which seam is moving. */
 .tile-divider {
   position: absolute;
   width: 14px;
@@ -528,22 +523,24 @@ body.fullscreen .tile.head-peek .tile-notch { top: 32px; }
   transition: opacity 0.15s ease, background 0.15s ease;
 }
 
-.tile-divider:hover::after,
-.tile-divider.linked::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. */
+/* Drop the seams while a tile itself is being moved or resized — they're
+   rebuilt for the new geometry on release. */
 #grid.no-dividers .tile-divider { display: none; }
 
 /* ── fullscreen mode ───────────────────────────────────────────────── */
 
 /* Fullscreen is a viewing mode: the layout auto-fits the screen, so the
-   editing affordances (corner handles, seam pills) are parked. */
+   editing affordances (the rim grips and the seams) are parked. */
 body.fullscreen .tile-resize,
 body.fullscreen .tile-resize-left,
 body.fullscreen .tile-resize-bottom,
+body.fullscreen .tile-resize-top,
+body.fullscreen .tile-resize-right,
+body.fullscreen .tile-resize-side,
 body.fullscreen .tile-divider,
+body.fullscreen #autohide-btn,
 body.fullscreen #admin-link { display: none; }
 body.fullscreen #grid { padding-bottom: 0; }
 #gridwrap.no-scroll { overflow-y: hidden; }

server.js

@@ -766,7 +766,7 @@ function parseRepoSetting(value, fallbackBranch) {
 }
 
 const REPO = parseRepoSetting(process.env.PRODDASH_REPO || shellConfig.repo, shellConfig.branch)
-  || parseRepoSetting('michaelmcgary2008/ProdDash', 'main');
+  || parseRepoSetting('michael/ProdDash', 'main');
 
 /**
  * Which server the code comes from. GitHub unless `forge` names another —
@@ -1394,7 +1394,11 @@ function layoutPath(name) {
 function sanitizeLayout(raw) {
   const tiles = Array.isArray(raw?.tiles) ? raw.tiles.slice(0, 100) : [];
   return {
-    tiles: tiles.map((t) => ({
+    // Whether tile title bars auto-hide is part of how a dashboard is
+    // arranged, so it travels with the layout like the tiles themselves.
+    autoHideHeads: Boolean(raw?.autoHideHeads),
+    tiles: tiles.map((t) => {
+      const tile = {
         id: String(t?.id || ''),
         module: String(t?.module || ''),
         x: Number(t?.x) || 0,
@@ -1402,7 +1406,18 @@ function sanitizeLayout(raw) {
         w: Number(t?.w) || 1,
         h: Number(t?.h) || 1,
         settings: t?.settings && typeof t.settings === 'object' ? t.settings : {},
-    })),
+        // Which picker entry the tile came from, and what it was called.
+        // Without these a saved "Now" tile comes back as the full Now/Next
+        // card, and a solo timer comes back with a full tile's settings.
+        variant: String(t?.variant || ''),
+        title: String(t?.title || ''),
+        headPinned: Boolean(t?.headPinned),
+      };
+      if (Number(t?.minSize?.w) > 0 && Number(t?.minSize?.h) > 0) {
+        tile.minSize = { w: Number(t.minSize.w), h: Number(t.minSize.h) };
+      }
+      return tile;
+    }),
   };
 }