Slack 1.2.1: a clearer Send tile, and a send target you can see

The line above the message box said "Sending as Apollo Beach → #ops" with a
Lock button beside it. The box's own placeholder already reads "Message
#ops…" and the title bar already has a Lock, so both went. Quick replies
keeps its line: it has no placeholder, so that is the only place its target
is named.

The bigger thing behind it: until a transcript was clicked, a send went to
the first channel in the admin list whether or not that channel was on the
dashboard — so a board showing only #ops would quietly aim at #general. The
target now falls to the first configured channel whose transcript is
actually up, which with a single transcript is that one. Only when the page
shows no transcript at all does it fall back to the first configured
channel.

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

CLAUDE.md

@@ -32,12 +32,6 @@ title-bar controls). The rules that matter most:
   and bump the module's `version` on every change.
 - Browsers never call upstream services directly; the module's server routes
   proxy everything (no CORS, secrets stay server-side).
-- **Keep the interface clean** (guide rules 5-11): no `help` and no label
-  over three words in a tile's gear; server-side settings in `configSchema`
-  only; a tile setting changes that tile alone; hide-toggles ungrouped when
-  there are four or fewer, in a folded **Show** group when there are five or
-  more; title-bar controls are icons with tooltips, never labels, and never
-  repeat something the gear already offers.
 - Style with the shell's CSS variables only, scoped under
   `[data-module="<id>"]`; survive upstream loss (reconnect + `setStatus`).
 - Verify against the guide's testing section and resilience checklist. Mocks

README.md

@@ -99,19 +99,10 @@ with this machine's shell settings — the same keys as the checked-in
 | Key | Meaning |
 | --- | --- |
 | `port` | Port ProdDash serves on (default `24500`). The macOS launcher writes this one, so the port it is set to holds however ProdDash is started. |
-| `adminPin` | The admin PIN, as a scrypt hash. **Set it in the admin page's Admin PIN section**, not by hand — 6 digits, and only the hash is stored. Absent means admin is open to anyone on the network. |
-| `adminPasscode` | An older free-text passcode. Still honoured, so an existing install keeps working; new installs should use `adminPin`. |
+| `adminPasscode` | If set, the admin page asks for this shared passcode. Leave `""` for none — it's a plain-HTTP LAN tool. |
 | `forge` | Where updates and module installs are fetched from. Absent or `"github"` uses GitHub; a Gitea or Forgejo base URL such as `"http://10.3.8.90:3000"` uses a server of your own. Set it per machine in the data directory, alongside `repo`. |
 | `theme` | The dashboard palette: `booth` (default), `harbor`, `graphite`, `ember` or `daylight`. The admin page's **Theme** section writes this one — see [Themes](#themes). |
 
-**Locked out?** Delete `adminPin` from the data directory's `proddash.json`
-and restart, or start the server with `PRODDASH_PASSCODE` set — that passcode
-overrides the PIN and always gets you in.
-
-Only `/admin` and the admin API are behind the PIN. Dashboards stay open, so a
-wall display needs no PIN, and it is unrelated to a module's own PIN (Slack's
-4–8 digit send PIN, say), which guards that module's actions only.
-
 **Updating from your own git server.** ProdDash fetches one `tar.gz` of the
 branch — nothing else — so any Gitea or Forgejo works. Point `forge` at its
 base URL and `repo` at the owner/repo there:
@@ -198,17 +189,13 @@ 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; **✕** 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.
+- 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).
 - **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
@@ -218,21 +205,9 @@ 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**.
-- **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
+- 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
   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
@@ -296,29 +271,6 @@ below. Nothing is installed without someone clicking.
   (gear menu): the top-bar text (placeholders such as
   `{series} • {part} | {serviceType} • {date}`), colors, text size, and a
   show/hide checklist for every detail.
-- **Slack** — live transcripts of this location's Slack channels, plus
-  PIN-protected sending as the location. The ＋ picker lists one transcript
-  tile per configured channel, titled `#channel`, and two send surfaces (one
-  of each per dashboard): **Send message**, a free-text box with the admin's
-  quick emojis one press away, and **Quick replies**, a grid of preset
-  buttons. Both post to the channel of whichever transcript was clicked last
-  — its bottom edge lights up in the accent color — and to the first
-  configured channel until one is clicked. Messages arrive with avatars,
-  names and times, Slack's inline formatting and the workspace's custom
-  emoji; a right-click on one opens the reaction menu, and text size and
-  jump-to-latest sit in the title bar. Nothing leaves the machine until the
-  PIN is entered: one PIN unlocks every Slack tile on that dashboard page
-  until the auto-lock idles out, a reload asks again, and the lock button on
-  a send tile's title bar ends it early.
-  Admin config is in four groups: **Slack account** (the location account's
-  User OAuth Token — `xoxp-…`, so messages are literally from the campus —
-  or a bot token plus "Send as"), **Channels** (the joined channels to
-  follow, one transcript tile each), **Transcript** (refresh interval,
-  messages kept, thread replies) and **Sending** (the switch on the group's
-  title row, a 4–8 digit PIN, auto-lock minutes, quick replies one per line
-  as `Label | Message` — add `| #channel` to bind one to a channel — and up
-  to eight quick emojis).
-  Tile settings: avatars, timestamps, names and channel notices.
 - **Clock** — a big booth clock; also the smallest possible module and the
   reference for module authors.
 
@@ -326,12 +278,10 @@ To develop modules against mocks instead of real gear:
 `node tools/prodcom-mock.js` (ProdCom on `127.0.0.1:24480`),
 `node band-lineup-display/tmp/pp-mock.js 1599` (ProPresenter slides on
 `127.0.0.1:1599`), `node tools/pp-timers-mock.js 1600` (ProPresenter
-timers + timecode on `127.0.0.1:1600`), `node tools/pco-mock.js`
+timers + timecode on `127.0.0.1:1600`) and `node tools/pco-mock.js`
 (Planning Center Services on `127.0.0.1:24700` — run ProdDash with
-`PCO_PLAN_API_BASE=http://127.0.0.1:24700`) and
-`node tools/slack-mock.js 24716` (the Slack Web API on `127.0.0.1:24716` —
-run ProdDash with `SLACK_API_BASE=http://127.0.0.1:24716/api`). See the
-testing section of the [module guide](docs/MODULE-GUIDE.md).
+`PCO_PLAN_API_BASE=http://127.0.0.1:24700`). See the testing section of the
+[module guide](docs/MODULE-GUIDE.md).
 
 ## Install as a desktop web app
 

docs/MODULE-GUIDE.md

@@ -34,46 +34,6 @@ people running the booth depend on them.
    The admin page refuses to install a module whose requirement the running
    shell doesn't meet, and it offers updates by comparing versions.
 
-### Keeping the interface clean
-
-A dashboard is read across a booth, at a glance, by someone doing three
-other things. These rules are what keep every tile looking like one product
-instead of six. They are as binding as the four above.
-
-5. **No explanatory text in a tile's gear.** No `help` on an
-   `instanceSchema` field or an `instanceGroups` entry. Labels are **three
-   words at most, one or two preferred** — "Slide count", "Item tags",
-   "Running clock". A control that cannot be understood in three words is
-   not a display choice; it belongs in `configSchema`, where `help` is
-   welcome and expected. *One exception:* a `template` field may keep a
-   single `help` line naming its placeholders, which nobody can guess.
-6. **Server-side settings are admin-only.** Anything the module's server
-   acts on — a host, a credential, what to fetch, how often to poll — is
-   `configSchema`. `instanceSchema` is display choices and nothing else:
-   what this tile shows, and how big.
-7. **A tile setting changes that tile and nothing else.** Never another
-   tile, never the module as a whole, never the server. If two tiles must
-   agree on something, it is either admin config or page state the shell
-   owns — not a setting each tile keeps its own copy of.
-8. **Offer toggles for the elements you draw.** Every tile should let the
-   operator switch off the parts it does not need. **One to four toggles:**
-   give them no `group` at all, so they sit unlabelled at the top of the
-   gear. **Five or more:** one group named **Show**, `collapsed: true`,
-   `columns: 2`. Nothing else goes in that group — colours, formats and
-   text belong in groups of their own.
-9. **Title-bar controls are icons.** No `label` on `addButton` or
-   `addMenu`; the tooltip carries the words, and `docs` above covers drawing
-   the icon. A small state indicator may ride alongside an icon — ProdCom's
-   channel button shows a count while a filter is on — but a control is
-   never named in the bar.
-10. **If a control needs words to explain it, it is not a title-bar
-    control.** Put it in the gear. The bar is for actions whose icon and
-    tooltip say everything: refresh, clear, jump to latest, bigger text.
-11. **One control per action.** Whatever has a dedicated title-bar button is
-    not offered again in the gear, and the reverse. Text size is A− / A+ up
-    there, never a "Text size" field; a timestamps button in the bar means
-    no timestamps switch below it.
-
 ## The shape of a module
 
 A module is one folder dropped into `modules/`:
@@ -217,18 +177,14 @@ the group name:
 
 `help` on a field puts one line of guidance under its control — allowed
 placeholders, where a value comes from. Keep labels short and put the
-explanation there. **This is for `configSchema` only**: a tile's gear
-carries no explanations at all (rule 5), so a setting that needs one is
-telling you it belongs in admin.
+explanation there.
 
-`group` works on `instanceSchema` fields too, and a manifest
+`group` and `help` work on `instanceSchema` fields too, and a manifest
 `instanceGroups` map plays the `configGroups` role for the tile's gear
-popover (`collapsed: true | false`, `columns`, `toggle` — but not `help`,
-per rule 5). That is how a module with a long show/hide checklist keeps the
-popover usable: five or more hide-toggles go in one **Show** group, folded
-by default, and fewer than five go in no group at all — see `pco-plan` for
-the long form and `slack` for the short one. Display choices belong there,
-per tile; admin config is for connections. The popover itself is a small window beside the tile — sized to
+popover (`collapsed: true | false`, `columns`, `help`, `toggle`). That is how
+a module with a long show/hide checklist keeps the popover usable — see
+`pco-plan`. Display choices belong there, per tile; admin config is for
+connections. The popover itself is a small window beside the tile — sized to
 its content, moved by the slim bar on top, closed by clicking anywhere else
 or pressing Escape — so a tile never has to be big enough to hold its own
 settings, and a change can be watched as it lands. Under everything you
@@ -398,25 +354,22 @@ menu.setLabel('Channels (2/4) ▾'); // update the button text any time
 ```
 
 Everything you add is removed automatically when your instance stops, so a
-remount never duplicates controls. **Icons only, no labels** (rule 9): the
-title bar is 32 px tall and shared with the tile's name, and the tooltip
-says what the icon means. Draw icons as inline SVG rather than characters —
-a glyph such as ✕ or ＋ takes its size from whatever font each browser
-picks; text-size buttons are a drawn − and +. A small state indicator may
-ride alongside an icon (ProdCom's channel button carries a count while a
-filter is on); a name may not.
+remount never duplicates controls. Keep them compact (icon buttons, short
+labels): the title bar is 32 px tall and shared with the tile's name. Draw
+icons as inline SVG rather than characters — a glyph such as ✕ or ＋ takes
+its size from whatever font each browser picks; text-size buttons are a
+drawn − and +.
 
-**One control per action** (rule 11). Whatever has a dedicated header button
-is not offered again in the gear popover: text size is − / + up here
-(persisted through `saveInstanceSettings({ textSize })`, read back with a
-sane 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
+**One control per action.** Whatever has a dedicated header button is not
+offered again in the gear popover: text size is A− / A+ up here (persisted
+through `saveInstanceSettings({ textSize })`, read back with a sane
+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 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,
+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,
 live data — may exist *only* as a header control.
 
 `sse(path, handlers)` handlers:

modules/pco-plan/module.json

@@ -1,23 +1,15 @@
 {
   "id": "pco-plan",
   "name": "PCO Plan",
-  "version": "1.5.0",
+  "version": "1.4.0",
   "proddash": ">=1.4.0",
   "description": "Order of service from Planning Center Services",
-  "provides": [
-    "timers"
-  ],
+  "provides": ["timers"],
   "client": "client.js",
   "server": "server.js",
   "style": "style.css",
-  "minSize": {
-    "w": 3,
-    "h": 3
-  },
-  "defaultSize": {
-    "w": 5,
-    "h": 6
-  },
+  "minSize": { "w": 3, "h": 3 },
+  "defaultSize": { "w": 5, "h": 6 },
   "configGroups": {
     "Planning Center credentials": {
       "collapsed": "whenSet",
@@ -56,12 +48,7 @@
       "type": "select",
       "label": "Plan",
       "default": "",
-      "options": [
-        {
-          "value": "",
-          "label": "Automatic — today's plan, else the next upcoming"
-        }
-      ],
+      "options": [{ "value": "", "label": "Automatic — today's plan, else the next upcoming" }],
       "optionsRoute": "/plans",
       "optionsDependsOn": "serviceTypeId"
     },
@@ -95,14 +82,8 @@
       "group": "Service timing",
       "showWhen": "useDocumentTriggers",
       "options": [
-        {
-          "value": "schedule",
-          "label": "Scheduled service time"
-        },
-        {
-          "value": "document",
-          "label": "ProPresenter document"
-        }
+        { "value": "schedule", "label": "Scheduled service time" },
+        { "value": "document", "label": "ProPresenter document" }
       ]
     },
     "serviceStartDocument": {
@@ -143,94 +124,37 @@
     "Item notes": {
       "toggle": "showNotes"
     },
-    "Show": {
+    "Show / hide": {
       "collapsed": true,
-      "columns": 2
+      "columns": 3,
+      "help": "Switch off anything this tile should not show."
     }
   },
   "instanceSchema": {
-    "autoScroll": {
-      "type": "boolean",
-      "label": "Auto-scroll",
-      "default": true
-    },
+    "autoScroll": { "type": "boolean", "label": "Keep the current item in view", "default": true },
     "headerTemplate": {
       "type": "template",
       "label": "Top bar text",
       "default": "{series} • {part} | {serviceType} • {date}",
       "group": "Top bar",
       "variables": [
-        {
-          "value": "{series}",
-          "label": "Series"
-        },
-        {
-          "value": "{part}",
-          "label": "Part / plan title"
-        },
-        {
-          "value": "{serviceType}",
-          "label": "Service type"
-        },
-        {
-          "value": "{date}",
-          "label": "Date"
-        },
-        {
-          "value": "{shortDate}",
-          "label": "Short date"
-        },
-        {
-          "value": "{time}",
-          "label": "Service time"
-        },
-        {
-          "value": "{length}",
-          "label": "Planned length"
-        },
-        {
-          "value": "{items}",
-          "label": "Item count"
-        }
+        { "value": "{series}", "label": "Series" },
+        { "value": "{part}", "label": "Part / plan title" },
+        { "value": "{serviceType}", "label": "Service type" },
+        { "value": "{date}", "label": "Date" },
+        { "value": "{shortDate}", "label": "Short date" },
+        { "value": "{time}", "label": "Service time" },
+        { "value": "{length}", "label": "Planned length" },
+        { "value": "{items}", "label": "Item count" }
       ],
       "help": "Use • between items and | to start a second line."
     },
-    "keyColor": {
-      "type": "color",
-      "label": "Song key",
-      "default": "#4ea1ff",
-      "group": "Colors"
-    },
-    "headerColor": {
-      "type": "color",
-      "label": "Section headers",
-      "default": "#2ee59a",
-      "group": "Colors"
-    },
-    "currentColor": {
-      "type": "color",
-      "label": "Current item",
-      "default": "#2ee59a",
-      "group": "Colors"
-    },
-    "headerGradient": {
-      "type": "boolean",
-      "label": "Header fade",
-      "default": true,
-      "group": "Colors"
-    },
-    "tintByType": {
-      "type": "boolean",
-      "label": "Tint by type",
-      "default": false,
-      "group": "Colors"
-    },
-    "showNotes": {
-      "type": "switch",
-      "label": "Item notes",
-      "default": true,
-      "group": "Item notes"
-    },
+    "keyColor": { "type": "color", "label": "Song key", "default": "#4ea1ff", "group": "Colors" },
+    "headerColor": { "type": "color", "label": "Section headers", "default": "#2ee59a", "group": "Colors" },
+    "currentColor": { "type": "color", "label": "Current item", "default": "#2ee59a", "group": "Colors" },
+    "headerGradient": { "type": "boolean", "label": "Fade header color to the right", "default": true, "group": "Colors" },
+    "tintByType": { "type": "boolean", "label": "Tint items by type (song / media / other)", "default": false, "group": "Colors" },
+    "showNotes": { "type": "switch", "label": "Item notes", "default": true, "group": "Item notes" },
     "noteCategories": {
       "type": "multiselect",
       "label": "Categories",
@@ -239,149 +163,29 @@
       "columns": 3,
       "allByDefault": true
     },
-    "showTopBar": {
-      "type": "boolean",
-      "label": "Top bar",
-      "default": true,
-      "group": "Show"
-    },
-    "showSeries": {
-      "type": "boolean",
-      "label": "Series name",
-      "default": true,
-      "group": "Show"
-    },
-    "showPart": {
-      "type": "boolean",
-      "label": "Part / title",
-      "default": true,
-      "group": "Show"
-    },
-    "showServiceType": {
-      "type": "boolean",
-      "label": "Service type",
-      "default": true,
-      "group": "Show"
-    },
-    "showDate": {
-      "type": "boolean",
-      "label": "Plan date",
-      "default": true,
-      "group": "Show"
-    },
-    "showServiceTime": {
-      "type": "boolean",
-      "label": "Service time",
-      "default": true,
-      "group": "Show"
-    },
-    "showTotalLength": {
-      "type": "boolean",
-      "label": "Total length",
-      "default": true,
-      "group": "Show"
-    },
-    "showRunningClock": {
-      "type": "boolean",
-      "label": "Running clock",
-      "default": true,
-      "group": "Show"
-    },
-    "showCountdown": {
-      "type": "boolean",
-      "label": "Countdown",
-      "default": true,
-      "group": "Show"
-    },
-    "showHeaders": {
-      "type": "boolean",
-      "label": "Section headers",
-      "default": true,
-      "group": "Show"
-    },
-    "showItemNumbers": {
-      "type": "boolean",
-      "label": "Item numbers",
-      "default": false,
-      "group": "Show"
-    },
-    "showStartTimes": {
-      "type": "boolean",
-      "label": "Start times",
-      "default": true,
-      "group": "Show"
-    },
-    "showLength": {
-      "type": "boolean",
-      "label": "Item length",
-      "default": true,
-      "group": "Show"
-    },
-    "showItemType": {
-      "type": "boolean",
-      "label": "Type badge",
-      "default": true,
-      "group": "Show"
-    },
-    "showKey": {
-      "type": "boolean",
-      "label": "Song key",
-      "default": true,
-      "group": "Show"
-    },
-    "showArrangement": {
-      "type": "boolean",
-      "label": "Arrangement",
-      "default": false,
-      "group": "Show"
-    },
-    "showSongAuthor": {
-      "type": "boolean",
-      "label": "Author / CCLI",
-      "default": false,
-      "group": "Show"
-    },
-    "showDescription": {
-      "type": "boolean",
-      "label": "Item description",
-      "default": true,
-      "group": "Show"
-    },
-    "showPreService": {
-      "type": "boolean",
-      "label": "Pre-service",
-      "default": true,
-      "group": "Show"
-    },
-    "showPostService": {
-      "type": "boolean",
-      "label": "Post-service",
-      "default": true,
-      "group": "Show"
-    },
-    "showNowIndicator": {
-      "type": "boolean",
-      "label": "Now indicator",
-      "default": true,
-      "group": "Show"
-    },
-    "showItemRuntime": {
-      "type": "boolean",
-      "label": "Item runtime",
-      "default": true,
-      "group": "Show"
-    },
-    "dimCompleted": {
-      "type": "boolean",
-      "label": "Dim completed",
-      "default": true,
-      "group": "Show"
-    },
-    "showLiveFooter": {
-      "type": "boolean",
-      "label": "Match line",
-      "default": true,
-      "group": "Show"
-    }
+    "showTopBar": { "type": "boolean", "label": "Top bar", "default": true, "group": "Show / hide" },
+    "showSeries": { "type": "boolean", "label": "Series name", "default": true, "group": "Show / hide" },
+    "showPart": { "type": "boolean", "label": "Part # / plan title", "default": true, "group": "Show / hide" },
+    "showServiceType": { "type": "boolean", "label": "Service type", "default": true, "group": "Show / hide" },
+    "showDate": { "type": "boolean", "label": "Plan date", "default": true, "group": "Show / hide" },
+    "showServiceTime": { "type": "boolean", "label": "Service time", "default": true, "group": "Show / hide" },
+    "showTotalLength": { "type": "boolean", "label": "Planned total length", "default": true, "group": "Show / hide" },
+    "showRunningClock": { "type": "boolean", "label": "Running clock (ahead / behind)", "default": true, "group": "Show / hide" },
+    "showCountdown": { "type": "boolean", "label": "Countdown to service start", "default": true, "group": "Show / hide" },
+    "showHeaders": { "type": "boolean", "label": "Section headers", "default": true, "group": "Show / hide" },
+    "showItemNumbers": { "type": "boolean", "label": "Item numbers", "default": false, "group": "Show / hide" },
+    "showStartTimes": { "type": "boolean", "label": "Scheduled start times", "default": true, "group": "Show / hide" },
+    "showLength": { "type": "boolean", "label": "Item length", "default": true, "group": "Show / hide" },
+    "showItemType": { "type": "boolean", "label": "Item type badge", "default": true, "group": "Show / hide" },
+    "showKey": { "type": "boolean", "label": "Song key", "default": true, "group": "Show / hide" },
+    "showArrangement": { "type": "boolean", "label": "Song arrangement", "default": false, "group": "Show / hide" },
+    "showSongAuthor": { "type": "boolean", "label": "Song author / CCLI", "default": false, "group": "Show / hide" },
+    "showDescription": { "type": "boolean", "label": "Item description", "default": true, "group": "Show / hide" },
+    "showPreService": { "type": "boolean", "label": "Pre-service items", "default": true, "group": "Show / hide" },
+    "showPostService": { "type": "boolean", "label": "Post-service items", "default": true, "group": "Show / hide" },
+    "showNowIndicator": { "type": "boolean", "label": "Now indicator", "default": true, "group": "Show / hide" },
+    "showItemRuntime": { "type": "boolean", "label": "Item runtime (elapsed vs planned)", "default": true, "group": "Show / hide" },
+    "dimCompleted": { "type": "boolean", "label": "Dim completed items", "default": true, "group": "Show / hide" },
+    "showLiveFooter": { "type": "boolean", "label": "ProPresenter match line", "default": true, "group": "Show / hide" }
   }
 }

modules/prodcom-transcript/module.json

@@ -1,7 +1,7 @@
 {
   "id": "prodcom-transcript",
   "name": "ProdCom",
-  "version": "1.3.2",
+  "version": "1.3.1",
   "proddash": ">=1.1.0",
   "description": "Live ProdCom transcript",
   "permissions": [
@@ -40,7 +40,7 @@
   "instanceSchema": {
     "showAvatars": {
       "type": "boolean",
-      "label": "Channel icons",
+      "label": "Show channel icons",
       "default": true
     }
   }

modules/propresenter-now-next/module.json

@@ -1,34 +1,22 @@
 {
   "id": "propresenter-now-next",
   "name": "ProPresenter",
-  "version": "1.1.1",
+  "version": "1.1.0",
   "proddash": ">=1.5.0",
   "description": "What is live in ProPresenter and what comes next",
   "permissions": [
-    {
-      "kind": "local-network",
-      "reason": "Reaching ProPresenter on this network"
-    }
+    { "kind": "local-network", "reason": "Reaching ProPresenter on this network" }
   ],
   "client": "client.js",
   "server": "server.js",
   "style": "style.css",
-  "minSize": {
-    "w": 3,
-    "h": 3
-  },
-  "defaultSize": {
-    "w": 4,
-    "h": 5
-  },
+  "minSize": { "w": 3, "h": 3 },
+  "defaultSize": { "w": 4, "h": 5 },
   "configSchema": {
     "propresenter": {
       "type": "endpoint",
       "label": "ProPresenter",
-      "default": {
-        "host": "",
-        "port": 1025
-      }
+      "default": { "host": "", "port": 1025 }
     },
     "password": {
       "type": "password",
@@ -37,64 +25,17 @@
     }
   },
   "instanceSchema": {
-    "cleanTitles": {
-      "type": "switch",
-      "label": "Tidy titles",
-      "default": true
-    },
-    "showPlaylist": {
-      "type": "switch",
-      "label": "Playlist",
-      "default": true,
-      "group": "Show"
-    },
-    "showLive": {
-      "type": "switch",
-      "label": "Live status",
-      "default": true,
-      "group": "Show"
-    },
-    "showNowLabel": {
-      "type": "switch",
-      "label": "Now label",
-      "default": true,
-      "group": "Show"
-    },
-    "showSlideCount": {
-      "type": "switch",
-      "label": "Slide count",
-      "default": true,
-      "group": "Show"
-    },
-    "showProgress": {
-      "type": "switch",
-      "label": "Progress bar",
-      "default": true,
-      "group": "Show"
-    },
-    "showNext": {
-      "type": "switch",
-      "label": "Next list",
-      "default": true,
-      "group": "Show"
-    },
-    "showNextLabel": {
-      "type": "switch",
-      "label": "Next label",
-      "default": true,
-      "group": "Show"
-    },
-    "showTags": {
-      "type": "switch",
-      "label": "Item tags",
-      "default": true,
-      "group": "Show"
-    }
+    "cleanTitles": { "type": "switch", "label": "Tidy titles", "default": true },
+    "showPlaylist": { "type": "switch", "label": "Playlist", "default": true, "group": "Show" },
+    "showLive": { "type": "switch", "label": "Live status", "default": true, "group": "Show" },
+    "showNowLabel": { "type": "switch", "label": "Now label", "default": true, "group": "Show" },
+    "showSlideCount": { "type": "switch", "label": "Slide count", "default": true, "group": "Show" },
+    "showProgress": { "type": "switch", "label": "Progress bar", "default": true, "group": "Show" },
+    "showNext": { "type": "switch", "label": "Next list", "default": true, "group": "Show" },
+    "showNextLabel": { "type": "switch", "label": "Next label", "default": true, "group": "Show" },
+    "showTags": { "type": "switch", "label": "Item tags", "default": true, "group": "Show" }
   },
   "instanceGroups": {
-    "Show": {
-      "collapsed": true,
-      "columns": 2
-    }
+    "Show": { "collapsed": false, "columns": 2 }
   }
 }

modules/propresenter-now-next/server.js

@@ -140,7 +140,7 @@ module.exports = {
           showSlideCount: { type: 'switch', label: 'Slide count', default: true, group: 'Show' },
           showProgress: { type: 'switch', label: 'Progress bar', default: true, group: 'Show' },
         },
-        instanceGroups: { Show: { collapsed: true, columns: 2 } },
+        instanceGroups: { Show: { collapsed: false, columns: 2 } },
       },
     ];
   },

modules/propresenter-timers/client.js

@@ -15,7 +15,7 @@
 
    Per-tile choices: the gear popover's static switches (whole sources,
    headings, status lines, the clock's format, the state colours) and the
-   timers header menu, which hides any single timer — keyed `source:id`
+   "Timers ▾" header menu, which hides any single timer — keyed `source:id`
    and saved with the layout via saveInstanceSettings. The header can be
    hidden by the user, so the static switches stay the primary controls.
    A solo tile's gear carries only the settings its one card can use (the
@@ -196,10 +196,6 @@ function defaultStatus(timer, value, tone) {
 
 /* ── the tile ─────────────────────────────────────────────────────────── */
 
-/* The header menu's icon: a stopwatch, for the list of timers behind it.
-   Title-bar controls carry no words (module guide, rule 9). */
-const TIMERS_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="M10 2h4"/><path d="M12 14V9"/><circle cx="12" cy="14" r="8"/></svg>';
-
 export default function create({ root, moduleApi }) {
   let state = null;
   let feedOffline = false;
@@ -231,7 +227,7 @@ export default function create({ root, moduleApi }) {
   }
 
   /* Which picker entry this tile was added as (the module's tiles() list):
-     '' or 'all' = every timer, selectable via the timers menu;
+     '' or 'all' = every timer, selectable via the Timers ▾ menu;
      'solo:<source>:<id>' = exactly one card, no menu, no headings. The
      earlier entries 'timer:<uuid>' and 'ltc' map onto the new keys. */
   const variant = String(moduleApi.variant || '');
@@ -287,8 +283,8 @@ export default function create({ root, moduleApi }) {
 
   let menuEl = null; // the open menu's element (filled on each open)
   const itemsMenu = solo ? null : moduleApi.header.addMenu({
-    icon: TIMERS_SVG,
-    title: 'Timers',
+    label: 'Timers ▾',
+    title: 'Choose timers',
     build(menu) {
       // the shell hands over an emptied element on every open
       menu.classList.add('tm-menu');
@@ -296,12 +292,6 @@ export default function create({ root, moduleApi }) {
       rebuildMenu(true);
     },
   });
-  // The icon carries the name; a count rides alongside it while some timers
-  // are hidden, so the bar says "filtered" without saying it in words.
-  const itemsCountEl = document.createElement('span');
-  itemsCountEl.className = 'tm-count';
-  itemsCountEl.hidden = true;
-  if (itemsMenu) itemsMenu.button.appendChild(itemsCountEl);
 
   function menuRows() {
     const rows = [];
@@ -329,9 +319,7 @@ export default function create({ root, moduleApi }) {
     if (!itemsMenu) return;
     const rows = menuRows();
     const visible = rows.filter((r) => !hidden.has(r.key)).length;
-    const filtering = visible !== rows.length;
-    itemsCountEl.textContent = filtering ? `${visible}/${rows.length}` : '';
-    itemsCountEl.hidden = !filtering;
+    itemsMenu.setLabel(visible === rows.length ? 'Timers ▾' : `Timers (${visible}/${rows.length}) ▾`);
   }
 
   let menuSignature = '';
@@ -791,7 +779,7 @@ export default function create({ root, moduleApi }) {
     let hint = '';
     const groups = visibleGroups();
     if (state && !state.sources.length) hint = 'Every source is switched off — turn one on in Admin.';
-    else if (state && !groups.length) hint = 'Nothing selected — switch a source on in this tile’s settings, or pick timers in the title bar’s timers menu.';
+    else if (state && !groups.length) hint = 'Nothing selected — switch a source on in this tile’s settings, or pick timers in the Timers ▾ menu.';
     hintEl.hidden = !hint;
     hintEl.textContent = hint;
     groupsEl.hidden = Boolean(hint);

modules/propresenter-timers/module.json

@@ -1,7 +1,7 @@
 {
   "id": "propresenter-timers",
   "name": "Timers",
-  "version": "1.4.0",
+  "version": "1.3.0",
   "proddash": ">=1.4.0",
   "description": "Timers, Clocks, and LTC From configured Modules",
   "provides": [
@@ -112,7 +112,7 @@
   },
   "instanceGroups": {
     "Show": {
-      "collapsed": true,
+      "collapsed": false,
       "columns": 2
     },
     "Clock": {
@@ -121,7 +121,8 @@
     },
     "Colours": {
       "collapsed": true,
-      "columns": 2
+      "columns": 2,
+      "help": "The time's colour per state. Left at the default, a colour follows the dashboard theme; one you change here wins over it."
     }
   },
   "instanceSchema": {

modules/propresenter-timers/style.css

@@ -321,7 +321,7 @@
 
 @keyframes tm-nosignal-blink { 50% { opacity: 0.35; } }
 
-/* ── the timers menu (container styled/positioned by the shell) ── */
+/* ── the "Timers ▾" menu (container styled/positioned by the shell) ── */
 
 [data-module="propresenter-timers"] .tm-menu-item {
   display: flex;
@@ -383,11 +383,3 @@
   font-size: 12px;
   white-space: nowrap;
 }
-
-/* the count beside the title-bar timers icon, while some are hidden */
-[data-module="propresenter-timers"] .tm-count {
-  font-size: 10px;
-  font-weight: 700;
-  font-variant-numeric: tabular-nums;
-}
-[data-module="propresenter-timers"] .tm-count[hidden] { display: none; }

package.json

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

public/admin/admin.css

@@ -512,49 +512,3 @@ a.btn { text-decoration: none; }
   color: var(--accent);
 }
 #theme-status { margin-top: 4px; }
-
-/* ── the admin PIN ── */
-
-/* Digits, evenly spaced, so six of them read as a PIN rather than a word. */
-.pin-input {
-  font-variant-numeric: tabular-nums;
-  letter-spacing: 0.35em;
-  text-align: center;
-  max-width: 9em;
-}
-.pin-form {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  gap: 12px;
-}
-.pin-field {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  font-size: 12px;
-  color: var(--muted);
-}
-.pin-field[hidden] { display: none; }
-.pin-field input {
-  padding: 8px 10px;
-  font-size: 14px;
-  color: var(--text);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 7px;
-}
-.pin-field input:focus { outline: none; border-color: var(--accent); }
-.pin-actions {
-  display: flex;
-  gap: 8px;
-  margin-left: auto;
-}
-.pin-note { margin-top: 12px; }
-.pin-note code {
-  font-size: 0.92em;
-  padding: 1px 5px;
-  border-radius: 4px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-}

public/admin/admin.js

@@ -2,10 +2,8 @@
 
    Everything here is server-wide: module enable/disable and admin config
    (written to config/modules.json, module re-inited on save), plus named
-   layout management. Behind the admin PIN when one is set — a shell setting of
-   its own, nothing to do with a module's PIN (Slack's send PIN, say). */
+   layout management. Guarded by the shared passcode when one is set. */
 
-const securitySection = document.getElementById('security-section');
 const loginCard = document.getElementById('login-card');
 const loginStatus = document.getElementById('login-status');
 const passcodeInput = document.getElementById('passcode');
@@ -64,30 +62,20 @@ function showLogin() {
   layoutsSection.hidden = true;
   updateCard.hidden = true;
   themeSection.hidden = true;
-  securitySection.hidden = true;
-  passcodeInput.value = '';
   passcodeInput.focus();
 }
 
-let loggingIn = false;
-
 async function login() {
-  if (loggingIn) return;
-  loggingIn = true;
   loginStatus.textContent = '';
   loginStatus.className = 'admin-status';
   try {
-    await api('/api/admin/login', { method: 'POST', body: JSON.stringify({ pin: passcodeInput.value }) });
+    await api('/api/admin/login', { method: 'POST', body: JSON.stringify({ passcode: passcodeInput.value }) });
     passcodeInput.value = '';
     loginCard.hidden = true;
     await loadState();
   } catch (e) {
-    passcodeInput.value = '';
     loginStatus.textContent = e.message;
     loginStatus.className = 'admin-status error';
-    passcodeInput.focus();
-  } finally {
-    loggingIn = false;
   }
 }
 
@@ -95,83 +83,6 @@ document.getElementById('login-btn').addEventListener('click', login);
 passcodeInput.addEventListener('keydown', (e) => {
   if (e.key === 'Enter') login();
 });
-// Six digits is the whole PIN, so there is nothing left to press.
-passcodeInput.addEventListener('input', () => {
-  passcodeInput.value = passcodeInput.value.replace(/\D/g, '').slice(0, 6);
-  if (passcodeInput.value.length === 6) login();
-});
-
-/* ── the admin PIN ───────────────────────────────────────────────────── */
-
-const pinCurrentField = document.getElementById('pin-current-field');
-const pinCurrent = document.getElementById('pin-current');
-const pinNew = document.getElementById('pin-new');
-const pinRepeat = document.getElementById('pin-repeat');
-const pinSaveBtn = document.getElementById('pin-save');
-const pinClearBtn = document.getElementById('pin-clear');
-const pinStatus = document.getElementById('pin-status');
-const pinStateEl = document.getElementById('pin-state');
-
-for (const input of [pinCurrent, pinNew, pinRepeat]) {
-  input.addEventListener('input', () => {
-    input.value = input.value.replace(/\D/g, '').slice(0, 6);
-  });
-}
-
-/** Paint the section for "no PIN yet" or "one is set". */
-function renderPin(state) {
-  const set = Boolean(state.pinSet);
-  const fromEnv = Boolean(state.pinFromEnv);
-  securitySection.hidden = false;
-  pinCurrentField.hidden = !set;
-  pinClearBtn.hidden = !set;
-  document.getElementById('pin-new-label').textContent = set ? 'New PIN' : 'PIN';
-  pinSaveBtn.textContent = set ? 'Change PIN' : 'Set PIN';
-  pinStateEl.textContent = fromEnv
-    ? 'A passcode is set in this server’s environment (PRODDASH_PASSCODE) and takes precedence. Anything set here applies once that is removed.'
-    : set
-      ? 'Admin is locked. This page asks for the PIN, and so does every admin request.'
-      : 'Admin is open to anyone on the network. Set a 6-digit PIN to lock it.';
-  if (state.dataDir) document.getElementById('pin-file').textContent = state.dataDir + '/proddash.json';
-}
-
-function pinMessage(text, bad = false) {
-  pinStatus.textContent = text;
-  pinStatus.className = 'admin-status' + (bad ? ' error' : ' ok');
-}
-
-async function savePin(clearing = false) {
-  pinStatus.textContent = '';
-  pinStatus.className = 'admin-status';
-  const current = pinCurrent.value;
-  const next = clearing ? '' : pinNew.value;
-  if (!clearing) {
-    if (!/^\d{6}$/.test(next)) return pinMessage('The PIN must be exactly 6 digits.', true);
-    if (next !== pinRepeat.value) return pinMessage('The two PINs are not the same.', true);
-  }
-  if (!pinCurrentField.hidden && !/^\d{6}$/.test(current)) {
-    return pinMessage('Enter the current PIN to change it.', true);
-  }
-  pinSaveBtn.disabled = true;
-  pinClearBtn.disabled = true;
-  try {
-    const body = await api('/api/admin/pin', { method: 'POST', body: JSON.stringify({ pin: next, current }) });
-    for (const i of [pinCurrent, pinNew, pinRepeat]) i.value = '';
-    pinMessage(body.pinSet ? 'PIN saved. It is asked for from the next visit.' : 'PIN removed — admin is open again.');
-    await loadState();
-  } catch (e) {
-    pinMessage(e.message, true);
-  } finally {
-    pinSaveBtn.disabled = false;
-    pinClearBtn.disabled = false;
-  }
-}
-
-pinSaveBtn.addEventListener('click', () => savePin(false));
-pinClearBtn.addEventListener('click', () => {
-  if (confirm('Turn the admin PIN off? Anyone on the network could then change this server’s settings.')) savePin(true);
-});
-pinRepeat.addEventListener('keydown', (e) => { if (e.key === 'Enter') savePin(false); });
 
 /* ── module cards ───────────────────────────────────────────────────── */
 
@@ -945,7 +856,6 @@ async function loadState() {
   for (const mod of state.modules || []) {
     modulesList.appendChild(buildModuleCard(mod));
   }
-  renderPin(state);
   loadTheme();
   loadLayouts();
   loadCatalog(false);

public/admin/index.html

@@ -18,11 +18,10 @@
 
   <main id="admin-main">
     <section class="admin-card" id="login-card" hidden>
-      <h2>Admin PIN</h2>
+      <h2>Admin passcode</h2>
       <p class="admin-copy">This page changes the server-wide configuration for every dashboard in the building.</p>
       <div class="login-row">
-        <input type="password" id="passcode" class="pin-input" inputmode="numeric" autocomplete="off"
-               maxlength="6" placeholder="••••••" aria-label="Admin PIN">
+        <input type="password" id="passcode" placeholder="Passcode" autocomplete="current-password">
         <button class="btn primary" id="login-btn">Unlock</button>
       </div>
       <div class="admin-status" id="login-status"></div>
@@ -66,39 +65,6 @@
       <h1 class="admin-h1">Saved layouts</h1>
       <div id="layouts-list"></div>
     </section>
-
-    <section id="security-section" hidden>
-      <h1 class="admin-h1">Admin PIN</h1>
-      <p class="admin-copy" id="pin-state"></p>
-      <div class="admin-card">
-        <div class="pin-form">
-          <label class="pin-field" id="pin-current-field" hidden>
-            <span>Current PIN</span>
-            <input type="password" id="pin-current" class="pin-input" inputmode="numeric"
-                   autocomplete="off" maxlength="6" placeholder="••••••">
-          </label>
-          <label class="pin-field">
-            <span id="pin-new-label">New PIN</span>
-            <input type="password" id="pin-new" class="pin-input" inputmode="numeric"
-                   autocomplete="off" maxlength="6" placeholder="6 digits">
-          </label>
-          <label class="pin-field">
-            <span>Repeat</span>
-            <input type="password" id="pin-repeat" class="pin-input" inputmode="numeric"
-                   autocomplete="off" maxlength="6" placeholder="6 digits">
-          </label>
-          <div class="pin-actions">
-            <button class="btn primary" id="pin-save">Set PIN</button>
-            <button class="btn" id="pin-clear" hidden>Turn off</button>
-          </div>
-        </div>
-        <p class="admin-copy pin-note">Only this page and the admin API ask for it — dashboards stay
-          open, and it is nothing to do with a module's own PIN, such as Slack's send PIN. Forgotten?
-          Remove <code>adminPin</code> from <code id="pin-file">proddash.json</code> in the settings
-          folder and restart.</p>
-        <div class="admin-status" id="pin-status"></div>
-      </div>
-    </section>
   </main>
 
   <div id="toast" hidden></div>

public/index.html

@@ -19,14 +19,6 @@
 
     <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,7 +24,6 @@ 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');
 
@@ -162,25 +161,18 @@ 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, autoHideHeads, tiles }));
+    localStorage.setItem(LS_LAYOUT, JSON.stringify({ v: 1, 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;
+    if (raw && Array.isArray(raw.tiles)) return raw.tiles;
   } catch { /* corrupted — start fresh */ }
-  return { tiles: [] };
+  return [];
 }
 
 function sanitizeTile(t) {
@@ -193,7 +185,7 @@ function sanitizeTile(t) {
     w,
     h: Math.max(1, Number(t.h) || 2),
     settings: (t.settings && typeof t.settings === 'object') ? t.settings : {},
-    headPinned: Boolean(t.headPinned),
+    headHidden: Boolean(t.headHidden),
     // 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) : '',
@@ -257,48 +249,9 @@ 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) {
@@ -325,34 +278,7 @@ function buildTile(tile) {
   const controls = document.createElement('span');
   controls.className = 'tile-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);
+  head.append(dot, title, controls);
 
   // Every tile has something to set: its own settings when the module
   // offers any, and the tint either way.
@@ -381,47 +307,45 @@ function buildTile(tile) {
   const body = document.createElement('div');
   body.className = 'tile-body';
 
-  /* 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 resize = document.createElement('div');
+  resize.className = 'tile-resize';
+  resize.title = 'Drag to resize';
 
-  // 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');
+  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 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('dragging') || el.classList.contains('resizing')) return;
-    el.classList.remove('head-peek');
+    if (el.classList.contains('head-peek')) schedulePeekHide(tile.id, el);
   });
 
-  el.append(head, body, resize, resizeLeft, resizeBottom, edgeTop, edgeRight, edgeLeft);
-  applyHeadState(tile, el);
+  el.append(head, body, resize, resizeLeft, resizeBottom, notch);
+  el.classList.toggle('head-hidden', Boolean(tile.headHidden));
   grid.appendChild(el);
 
   const entry = { el, body, dot, titleEl: title, controls, instance: null };
@@ -432,9 +356,6 @@ 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;
@@ -448,7 +369,7 @@ function refreshEmptyState() {
 
 function wireDrag(tile, el, handle) {
   handle.addEventListener('pointerdown', (ev) => {
-    if (ev.target.closest('.tile-btn') || ev.target.closest('.tile-menu')) return;
+    if (ev.target.closest('.tile-btn') || ev.target.closest('.tile-menu') || ev.target.closest('.tile-notch')) return;
     if (ev.button !== 0 && ev.pointerType === 'mouse') return;
     if (document.body.classList.contains('fullscreen')) return;
     ev.preventDefault();
@@ -565,80 +486,6 @@ 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
@@ -766,6 +613,7 @@ 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();
@@ -778,6 +626,14 @@ 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;
@@ -833,6 +689,7 @@ 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
     };
@@ -870,7 +727,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, headPinned: false };
+  const tile = { id: newId(), module: moduleId, ...spot, ...size, settings };
   if (entry) {
     tile.variant = String(entry.id);
     tile.title = String(entry.name || '');
@@ -886,6 +743,7 @@ 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);
@@ -1139,7 +997,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 folds away when the dashboard auto-hides it, so nothing
+     * whole bar can be hidden by the user via the notch, so nothing
      * essential should exist ONLY as a header control.
      */
     header: {
@@ -1854,13 +1712,9 @@ function remountTile(tile) {
 
 /* ── layout apply / reset ───────────────────────────────────────────── */
 
-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 || []);
+function renderLayout(list) {
   clearAllTiles();
   tiles = list.map(sanitizeTile);
-  if (!Array.isArray(layout)) setAutoHideHeads(Boolean(layout?.autoHideHeads), { save: false });
   for (const tile of tiles) buildTile(tile);
   refreshEmptyState();
   rebuildDividers();
@@ -1940,7 +1794,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: { autoHideHeads, tiles } }),
+        body: JSON.stringify({ layout: { tiles } }),
       });
       const body = await res.json().catch(() => ({}));
       if (!res.ok) throw new Error(body.error || 'Save failed (' + res.status + ')');
@@ -1984,7 +1838,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);
+        renderLayout(body.layout.tiles || []);
         saveLayout();
         toast(`Loaded “${l.name}”`);
       } catch (e) {
@@ -1996,7 +1850,7 @@ wireDropdown('layout-btn', 'layout-menu', async (menu, stillOpen) => {
   menu.insertBefore(block, reset);
 });
 
-/* ── menu bar show/hide (its own notch, at the top-left) ────────────── */
+/* ── menu bar show/hide (notch, like the tile title bars) ───────────── */
 
 const topbar = document.getElementById('topbar');
 const topbarNotch = document.getElementById('topbar-notch');
@@ -2023,6 +1877,41 @@ 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
@@ -2137,13 +2026,6 @@ 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(() => {});
@@ -2157,15 +2039,14 @@ 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,14 +126,6 @@ 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 ────────────────────────────────────────────────── */
 
@@ -278,33 +270,11 @@ body.menu-hidden #topbar {
   transition: height 0.22s ease, border-bottom-width 0.22s ease;
 }
 .tile.dragging .tile-head { cursor: grabbing; }
-
-/* 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));
+/* hidden = collapsed, not removed, so the notch toggle animates */
+.tile.head-hidden .tile-head {
+  height: 0;
+  border-bottom-width: 0;
+  overflow: hidden;
 }
 
 .tile-head .dot {
@@ -320,7 +290,7 @@ body.menu-hidden #topbar {
 .tile-head .dot.error { background: var(--danger); }
 
 .tile-title {
-  flex: 0 1 auto;
+  flex: 1;
   min-width: 0;
   font-size: 12px;
   font-weight: 700;
@@ -351,33 +321,6 @@ 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;
@@ -431,6 +374,55 @@ 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;
@@ -439,67 +431,80 @@ body.menu-hidden #topbar {
   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;
+}
 
-/* top and bottom: height only */
-.tile-resize-top,
+/* 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. */
 .tile-resize-bottom {
-  height: 8px;
+  position: absolute;
+  left: 24px;
+  right: 24px;
+  bottom: 0;
+  height: 10px;
+  z-index: 5;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
   cursor: ns-resize;
+  touch-action: none;
+  color: var(--muted);
+  opacity: 0;
+  transition: opacity 0.15s ease;
 }
-.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-resize-bottom::after {
+  content: "";
+  width: 44px;
+  max-width: 60%;
+  height: 0;
+  margin-bottom: 4px;
+  border-bottom: 2px solid currentColor;
 }
-.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; }
+.tile:hover .tile-resize-bottom { opacity: 0.6; }
+.tile .tile-resize-bottom:hover,
+.tile.resizing .tile-resize-bottom { opacity: 1; color: var(--text); }
 
 /* ── seam divider between adjacent 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. */
+/* 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;
@@ -523,24 +528,22 @@ body.menu-hidden #topbar {
   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); }
 
-/* Drop the seams while a tile itself is being moved or resized — they're
-   rebuilt for the new geometry on release. */
+/* 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; }
 
 /* ── fullscreen mode ───────────────────────────────────────────────── */
 
 /* Fullscreen is a viewing mode: the layout auto-fits the screen, so the
-   editing affordances (the rim grips and the seams) are parked. */
+   editing affordances (corner handles, seam pills) 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

@@ -12,8 +12,7 @@
  * Configure via config/proddash.json (defaults, in the repo), an optional
  * proddash.json in the data directory (this machine's overrides), or env vars:
  *   PORT               (default: value in proddash.json, else 24500)
- *   PRODDASH_PASSCODE  (a passcode that overrides the stored admin PIN —
- *                       also the way back in if the PIN is ever forgotten)
+ *   PRODDASH_PASSCODE  (overrides adminPasscode in proddash.json)
  *   PRODDASH_FORGE     (overrides `forge`: "github", or a Gitea/Forgejo base
  *                       URL such as http://10.3.8.90:3000)
  *   PRODDASH_DATA_DIR  (where module config + layouts are kept; see below)
@@ -1171,109 +1170,12 @@ function restartServer(reason) {
 
 /* ── admin API ──────────────────────────────────────────────────────── */
 
-/* Admin is behind a 6-digit PIN, set in the admin page and kept in this
-   machine's proddash.json as a scrypt hash — never in the clear, because that
-   file gets copied between machines. A dashboard needs no PIN; only /admin
-   and the admin API do. Two ways back in if it is ever forgotten: set
-   PRODDASH_PASSCODE in the environment, or delete "adminPin" from
-   proddash.json in the data directory and restart. `adminPasscode` (the older
-   free-text setting) still works so an existing install keeps running. */
-const PIN_RE = /^\d{6}$/;
-const PIN_MAX_WRONG = 5;
-const PIN_LOCKOUT_MS = 30000;
 const ADMIN_PASSCODE = String(process.env.PRODDASH_PASSCODE || shellConfig.adminPasscode || '');
-/** Session token: regenerating it every boot is fine — admins just re-enter the PIN. */
+/** Session token: regenerating it every boot is fine — admins just re-enter the passcode. */
 const adminToken = crypto.randomBytes(24).toString('hex');
-/** The stored PIN, as "scrypt$<salt>$<hash>"; '' when admin is open. */
-let adminPinHash = String(shellConfig.adminPin || '');
-const pinAttempts = new Map(); // ip → { count, lockedUntil }
-
-function hashPin(pin, salt = crypto.randomBytes(16).toString('hex')) {
-  return `scrypt$${salt}$${crypto.scryptSync(String(pin), salt, 32).toString('hex')}`;
-}
-
-/** Constant-time check of a PIN against the stored hash. */
-function pinMatches(given, stored) {
-  const parts = String(stored || '').split('$');
-  if (parts.length !== 3 || parts[0] !== 'scrypt') return false;
-  const expected = Buffer.from(parts[2], 'hex');
-  const actual = crypto.scryptSync(String(given), parts[1], expected.length);
-  return expected.length === actual.length && crypto.timingSafeEqual(expected, actual);
-}
-
-/** Is a credential required at all? */
-function adminLocked() {
-  return Boolean(ADMIN_PASSCODE || adminPinHash);
-}
-
-/** True when `given` is the credential in force (the env passcode, or the PIN). */
-function credentialOk(given) {
-  const s = String(given ?? '');
-  if (!s) return false;
-  if (ADMIN_PASSCODE) {
-    const a = Buffer.from(s);
-    const b = Buffer.from(ADMIN_PASSCODE);
-    if (a.length === b.length && crypto.timingSafeEqual(a, b)) return true;
-  }
-  return adminPinHash ? pinMatches(s, adminPinHash) : false;
-}
-
-function clientIp(req) {
-  return String(req.socket?.remoteAddress || 'unknown');
-}
-
-/** Seconds of lockout left for this address, or 0. */
-function lockoutLeft(ip) {
-  const a = pinAttempts.get(ip);
-  if (!a || !a.lockedUntil) return 0;
-  const left = a.lockedUntil - Date.now();
-  if (left <= 0) {
-    pinAttempts.delete(ip);
-    return 0;
-  }
-  return Math.ceil(left / 1000);
-}
-
-function noteWrongPin(ip) {
-  const a = pinAttempts.get(ip) || { count: 0, lockedUntil: 0 };
-  a.count += 1;
-  if (a.count >= PIN_MAX_WRONG) {
-    a.count = 0;
-    a.lockedUntil = Date.now() + PIN_LOCKOUT_MS;
-    console.warn(`[proddash] ${PIN_MAX_WRONG} wrong admin PINs from ${ip} — locked out for ${PIN_LOCKOUT_MS / 1000} s`);
-  }
-  pinAttempts.set(ip, a);
-}
-
-/**
- * Store a new PIN (6 digits), or '' to open admin up again. Keeps every other
- * key in this machine's proddash.json. Throws an httpError the route reports.
- */
-function setAdminPin(pin) {
-  const next = String(pin ?? '');
-  if (next && !PIN_RE.test(next)) throw httpError(400, 'The PIN must be exactly 6 digits.');
-  const file = path.join(DATA_DIR, 'proddash.json');
-  let existing = {};
-  if (fs.existsSync(file)) {
-    existing = readJson(file, null);
-    if (!existing || typeof existing !== 'object' || Array.isArray(existing)) {
-      throw httpError(500, `${file} is not a JSON object — fix it by hand before changing the PIN.`);
-    }
-  }
-  const hash = next ? hashPin(next) : '';
-  const out = { ...existing };
-  if (hash) out.adminPin = hash;
-  else delete out.adminPin;
-  writeJson(file, out);
-  adminPinHash = hash;
-  shellConfig.adminPin = hash;
-  pinAttempts.clear();
-  console.log(`[proddash] admin PIN ${hash ? 'set' : 'removed — admin is open again'}`);
-  return { pinSet: Boolean(hash) };
-}
 
 function isAuthed(req) {
-  if (!adminLocked()) return true;
+  if (!ADMIN_PASSCODE) return true;
   const cookies = String(req.headers.cookie || '');
   return cookies.split(';').some((c) => c.trim() === 'proddash_admin=' + adminToken);
 }
@@ -1281,7 +1183,7 @@ function isAuthed(req) {
 /** Guard a state-changing admin route. Returns true when the request was refused. */
 function refuseAdminWrite(req, res) {
   if (!isAuthed(req)) {
-    sendJson(res, 401, { error: 'Enter the admin PIN first.', authRequired: true });
+    sendJson(res, 401, { error: 'Enter the admin passcode first.', authRequired: true });
     return true;
   }
   // Requiring application/json forces a CORS preflight that a hostile page
@@ -1366,19 +1268,10 @@ async function handleAdminApi(req, res, urlPath) {
     } catch {
       return sendJson(res, 400, { error: 'Malformed request.' });
     }
-    if (!adminLocked()) return sendJson(res, 200, { ok: true, authRequired: false });
-    const ip = clientIp(req);
-    const left = lockoutLeft(ip);
-    if (left) return sendJson(res, 429, { error: `Too many wrong PINs — try again in ${left} s.`, retryAfter: left });
-    // `passcode` is what the older admin page sent; `pin` is what this one does.
-    if (!credentialOk(body.pin ?? body.passcode)) {
-      noteWrongPin(ip);
-      const now = lockoutLeft(ip);
-      return sendJson(res, 403, now
-        ? { error: `Too many wrong PINs — try again in ${now} s.`, retryAfter: now }
-        : { error: 'Wrong PIN.' });
+    if (!ADMIN_PASSCODE) return sendJson(res, 200, { ok: true, authRequired: false });
+    if (String(body.passcode || '') !== ADMIN_PASSCODE) {
+      return sendJson(res, 403, { error: 'Wrong passcode.' });
     }
-    pinAttempts.delete(ip);
     res.writeHead(200, {
       'Content-Type': 'application/json; charset=utf-8',
       'Set-Cookie': `proddash_admin=${adminToken}; Path=/; SameSite=Lax; HttpOnly`,
@@ -1387,50 +1280,12 @@ async function handleAdminApi(req, res, urlPath) {
     return res.end(JSON.stringify({ ok: true }));
   }
 
-  if (urlPath === '/api/admin/pin' && req.method === 'POST') {
-    if (refuseAdminWrite(req, res)) return;
-    let body = {};
-    try {
-      body = JSON.parse((await readBody(req)) || '{}');
-    } catch {
-      return sendJson(res, 400, { error: 'Malformed request.' });
-    }
-    // Changing a credential re-asserts it, so a browser left open on the
-    // admin page can't be used to take the machine over.
-    if (adminPinHash) {
-      const ip = clientIp(req);
-      const left = lockoutLeft(ip);
-      if (left) return sendJson(res, 429, { error: `Too many wrong PINs — try again in ${left} s.`, retryAfter: left });
-      if (!pinMatches(String(body.current ?? ''), adminPinHash)) {
-        noteWrongPin(ip);
-        return sendJson(res, 403, { error: 'That is not the current PIN.' });
-      }
-      pinAttempts.delete(ip);
-    }
-    try {
-      const result = setAdminPin(body.pin);
-      // Whoever just set it has proved they are allowed, so hand them the
-      // session rather than bouncing them to the unlock card they just built.
-      res.writeHead(200, {
-        'Content-Type': 'application/json; charset=utf-8',
-        'Set-Cookie': `proddash_admin=${adminToken}; Path=/; SameSite=Lax; HttpOnly`,
-        'Cache-Control': 'no-store',
-      });
-      return res.end(JSON.stringify(result));
-    } catch (err) {
-      return sendJson(res, err.status || 500, { error: err.message || 'Could not save the PIN.' });
-    }
-  }
-
   if (urlPath === '/api/admin/state' && req.method === 'GET') {
     if (!isAuthed(req)) {
       return sendJson(res, 401, { authRequired: true, authed: false });
     }
     return sendJson(res, 200, {
-      authRequired: adminLocked(),
-      // The env passcode can't be changed from here; the page says so.
-      pinSet: Boolean(adminPinHash),
-      pinFromEnv: Boolean(ADMIN_PASSCODE),
+      authRequired: Boolean(ADMIN_PASSCODE),
       authed: true,
       version: SHELL_VERSION,
       dataDir: DATA_DIR,
@@ -1539,30 +1394,15 @@ function layoutPath(name) {
 function sanitizeLayout(raw) {
   const tiles = Array.isArray(raw?.tiles) ? raw.tiles.slice(0, 100) : [];
   return {
-    // 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,
-        y: Number(t?.y) || 0,
-        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;
-    }),
+    tiles: tiles.map((t) => ({
+      id: String(t?.id || ''),
+      module: String(t?.module || ''),
+      x: Number(t?.x) || 0,
+      y: Number(t?.y) || 0,
+      w: Number(t?.w) || 1,
+      h: Number(t?.h) || 1,
+      settings: t?.settings && typeof t.settings === 'object' ? t.settings : {},
+    })),
   };
 }
 
@@ -1626,7 +1466,7 @@ async function handleLayoutsApi(req, res, urlPath) {
   }
 
   if (!m[2] && req.method === 'DELETE') {
-    if (!isAuthed(req)) return sendJson(res, 401, { error: 'Enter the admin PIN first.', authRequired: true });
+    if (!isAuthed(req)) return sendJson(res, 401, { error: 'Enter the admin passcode first.', authRequired: true });
     try {
       fs.unlinkSync(layoutPath(name));
     } catch {