Allow permanent moderators to delegate temporary access (#420)

* Add temporary moderator capability foundation

* Add temporary moderator socket actions

* Clarify temporary moderator revocation

* Add temporary moderator controls

* Document and verify temporary moderators

* Fold temporary moderation into friend control

* Allow revoking disconnected temporary moderators

* Simplify temporary moderator architecture

* Separate moderation and clear capabilities

* Reuse choice dialog for moderator grants

* Bound temporary moderator grants globally

* Streamline temporary moderator actions

* Simplify live moderator capability refresh

* Consolidate temporary moderator coverage

* Keep temporary moderator docs concise

* Use authoritative temporary moderator updates

* Keep grant validation at socket boundary

* Unify temporary moderator grant mutations

* Compact temporary moderator state

* Trim temporary moderator choice flow

* Remove redundant capability scenario

* Unify moderation action dialogs

Author: lovasoa

AGENTS.md

@@ -249,6 +249,10 @@ secret/IP ban expires. The browser schedules one reconnect at that boundary so
 non-moderator report targeting the reporter's own socket or another socket with
 the same non-empty, secret-derived user identity.
 
+Board state and presence expose `canBan` separately from `canClear`. Moderation
+UI and moderator markers use `canBan`; Clear-tool access, large-batch admission,
+and destructive rate-limit bypasses use `canClear`.
+
 Before the reported socket is closed, the server emits
 `moderation_disconnect { "banDurationMs": <duration>, "source": "moderator" | "peer_report", "moderationRule"?: "<rule>" }`.
 Moderator actions use `source: "moderator"`; `0` means a warning and a positive
@@ -262,7 +266,13 @@ server emits `user_reported` only to connected moderators on that board. The
 `{ "reporterName": "<display name>", "reportedName": "<display name>" }`.
 Moderator warning/ban actions do not emit `user_reported`; warning actions only
 disconnect the reported user, while ban actions also ban the reported secret and
-IP.
+IP. Active moderators are protected targets based on authoritative live
+capabilities, including when the reporter is a temporary moderator.
+
+Permanent moderators use `set_temporary_moderator { socketId, durationMs }` to
+grant up to one week or revoke with `0`. Grants are board-scoped, process-local,
+secret-keyed across tabs, lost on restart, and cannot be delegated by temporary
+moderators. Changes refresh board state and presence for every matching socket.
 
 Client write messages normally have top-level `tool` and `type` fields.
 Tool-owned batches have top-level `tool` plus `_children`; each child carries its

client-data/board.css

@@ -235,45 +235,58 @@ html[data-ui-direction="rtl"]
   text-transform: uppercase;
 }
 
-.moderation-action-durations {
-  display: flex;
-  flex-wrap: wrap;
+.moderation-action-stacked {
+  display: grid;
   gap: 6px;
+  margin-bottom: 14px;
+}
+
+.moderation-action-stacked .moderation-action-choice {
+  width: 100%;
+}
+
+.moderation-action-segmented {
+  display: flex;
+  width: 100%;
   margin-bottom: 12px;
 }
 
-.moderation-action-duration {
-  flex: 0 0 auto;
+.moderation-action-segmented .moderation-action-choice {
+  flex: 1 1 0;
+  min-width: 0;
+  margin-inline-start: -1px;
+  border-radius: 0;
   border-color: var(--board-control-border-strong);
   background: #ffffff;
   color: #111827;
 }
 
-.moderation-action-duration.wbo-dialog-button-warning,
-.moderation-action-duration.wbo-dialog-button-danger {
+.moderation-action-segmented .moderation-action-choice:first-child {
+  margin-inline-start: 0;
+  border-start-start-radius: var(--board-control-radius);
+  border-end-start-radius: var(--board-control-radius);
+}
+
+.moderation-action-segmented .moderation-action-choice:last-child {
+  border-start-end-radius: var(--board-control-radius);
+  border-end-end-radius: var(--board-control-radius);
+}
+
+.moderation-action-segmented .wbo-dialog-button-warning,
+.moderation-action-segmented .wbo-dialog-button-danger {
   border-color: var(--board-control-border-strong);
   background: #ffffff;
   color: #111827;
 }
 
-.moderation-action-duration-selected {
+.moderation-action-choice-selected {
+  z-index: 1;
   border-color: var(--board-accent-strong);
   background: var(--board-control-bg-active);
   box-shadow: 0 0 0 1px var(--board-accent-strong);
 }
 
-.moderation-action-status {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  border: 0;
-}
-
-.moderation-action-rules {
+.moderation-action-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 8px;
@@ -340,7 +353,7 @@ html[data-ui-direction="rtl"]
 }
 
 @media (max-width: 380px) {
-  .moderation-action-rules {
+  .moderation-action-grid {
     grid-template-columns: 1fr;
   }
 }
@@ -1134,6 +1147,10 @@ select {
   width: max-content;
 }
 
+#tools > .tool[hidden] {
+  display: none;
+}
+
 #menu .tool:hover {
   max-width: 100%;
 }

client-data/board.html

@@ -62,9 +62,9 @@
 		<div id="menuItems">
 			<ul id="tools" class="tools">
 				{{#tools}}
-				<li class="tool disabledTool" tabindex="-1" id="toolID-{{id}}" data-tool-id="{{id}}" aria-label="{{label}}"
+				<li class="tool disabledTool" tabindex="-1" id="toolID-{{id}}" data-tool-id="{{id}}" aria-label="{{label}}" {{^visible}}hidden{{/visible}}
 					aria-disabled="true">
-					<img class="tool-icon" width="35" height="35" src="{{iconUrl}}" alt="" aria-hidden="true"
+					<img class="tool-icon" width="35" height="35" src="{{initialIconUrl}}" data-icon-url="{{iconUrl}}" alt="" aria-hidden="true"
 						fetchpriority="low" />
 					<span class="tool-name">{{label}}</span>
 					<img class="tool-icon secondaryIcon" width="35" height="35" src="data:," alt="" aria-hidden="true" />

client-data/js/board_access_module.js

@@ -21,6 +21,14 @@ export class AccessModule {
     return this.boardState.canClear;
   }
 
+  get canBan() {
+    return this.boardState.canBan === true;
+  }
+
+  get canGrantTemporaryModerator() {
+    return this.boardState.canGrantTemporaryModerator === true;
+  }
+
   get canReport() {
     return this.boardState.canReport !== false;
   }
@@ -34,27 +42,18 @@ export class AccessModule {
     const Tools = this.getTools();
     this.boardState = boardState;
     Tools.connection.scheduleAccessRefresh(boardState.accessRefreshAfterMs);
-
     // Hide editing affordances whenever the user cannot edit (a read-only board,
     // or a banned user on a writable one). The drawing tools themselves are
     // gated by shouldDisplayTool, which is capability-aware.
     const hideEditingTools = !this.canEdit;
     const settings = document.getElementById("settings");
     if (settings) settings.style.display = hideEditingTools ? "none" : "";
 
-    Object.keys(Tools.toolRegistry.mounted || {}).forEach((toolName) => {
-      const toolElem = document.getElementById(`toolID-${toolName}`);
-      if (!toolElem) return;
-      toolElem.style.display = Tools.toolRegistry.shouldDisplayTool(toolName)
-        ? ""
-        : "none";
-    });
-
+    Tools.toolRegistry.syncRenderedToolAvailability();
     Tools.toolRegistry.syncDrawToolAvailability(true);
     Tools.presence.schedulePresenceRender();
 
     if (
-      hideEditingTools &&
       Tools.toolRegistry.current &&
       !Tools.toolRegistry.shouldDisplayTool(Tools.toolRegistry.current.name) &&
       Tools.toolRegistry.mounted.hand

client-data/js/board_page_state.js

@@ -8,6 +8,8 @@ export const DEFAULT_BOARD_STATE = /** @type {BoardState} */ (
     readonly: false,
     canEdit: true,
     canClear: false,
+    canBan: false,
+    canGrantTemporaryModerator: false,
     canReport: true,
     canWrite: true,
   })
@@ -55,7 +57,7 @@ export function normalizeBoardState(value) {
     return DEFAULT_BOARD_STATE;
   }
   const state =
-    /** @type {{readonly?: boolean, canEdit?: boolean, canClear?: boolean, canReport?: boolean, canWrite?: boolean, accessRefreshAfterMs?: number}} */ (
+    /** @type {{readonly?: boolean, canEdit?: boolean, canClear?: boolean, canBan?: boolean, canGrantTemporaryModerator?: boolean, canReport?: boolean, canWrite?: boolean, accessRefreshAfterMs?: number}} */ (
       value
     );
   const canEdit = state.canEdit === true || state.canWrite === true;
@@ -69,6 +71,8 @@ export function normalizeBoardState(value) {
     readonly: state.readonly === true,
     canEdit,
     canClear: state.canClear === true,
+    canBan: state.canBan === true,
+    canGrantTemporaryModerator: state.canGrantTemporaryModerator === true,
     canReport: state.canReport !== false,
     canWrite: canEdit,
     ...(accessRefreshAfterMs === undefined ? {} : { accessRefreshAfterMs }),