ui(webhooks): expand modal to near full-screen and add collapsible integration guide with examples; improve form labeling and help text

templates/status.html

···
                     <button id="close-webhook-modal" aria-label="Close">✕</button>
                 </div>
                 <div class="webhook-modal-body">
-                    <div class="webhook-intro">
+                    <div class="webhook-intro" style="margin-bottom:10px;">
                         <p>Send signed events when your status changes. Configure a URL that accepts JSON POSTs. We include an HMAC-SHA256 signature in <code>X-Status-Webhook-Signature</code> and a UNIX timestamp in <code>X-Status-Webhook-Timestamp</code>.</p>
                     </div>
-                    <form id="create-webhook-form" class="webhook-form">
-                        <input type="url" id="wh-url" placeholder="https://example.com/webhook" required />
-                        <input type="text" id="wh-secret" placeholder="secret (optional – autogenerated if blank)" />
-                        <input type="text" id="wh-events" placeholder="events (optional, default *) e.g. status.created,status.deleted" />
-                        <button type="submit">add webhook</button>
+                    <form id="create-webhook-form" class="webhook-form" aria-label="create webhook">
+                        <div style="display:flex; flex-direction:column; gap:4px;">
+                            <input type="url" id="wh-url" placeholder="Webhook URL (https://example.com/webhook)" required />
+                            <div class="field-help">HTTPS required in production. Local/private hosts allowed only in local dev.</div>
+                        </div>
+                        <div style="display:flex; flex-direction:column; gap:4px;">
+                            <input type="text" id="wh-secret" placeholder="Secret (optional – autogenerated)" />
+                            <div class="field-help">Used to sign requests with HMAC-SHA256. Reveal only on creation/rotation.</div>
+                        </div>
+                        <div style="display:flex; flex-direction:column; gap:4px;">
+                            <input type="text" id="wh-events" placeholder="Events (optional, default *) e.g. status.created,status.deleted" />
+                            <div class="field-help">Comma-separated. Supported: <code>status.created</code>, <code>status.deleted</code> or <code>*</code>.</div>
+                        </div>
+                        <button type="submit" aria-label="add webhook">add webhook</button>
+                        <div class="field-help">You can add multiple webhooks. Toggle active, rotate secrets, or delete below.</div>
                     </form>
                     <div id="webhook-list" class="webhook-list" aria-live="polite"></div>
+
+                    <details class="wh-guide" id="webhook-guide">
+                        <summary>Integration guide</summary>
+                        <div class="content">
+                            <div class="wh-grid">
+                                <div>
+                                    <h4>Request</h4>
+                                    <ul>
+                                        <li>Method: POST</li>
+                                        <li>Content-Type: application/json</li>
+                                        <li>Header <code>X-Status-Webhook-Timestamp</code>: UNIX seconds</li>
+                                        <li>Header <code>X-Status-Webhook-Signature</code>: <code>sha256=&lt;hex&gt;</code></li>
+                                    </ul>
+                                    <h4>Payload</h4>
+<pre><code>{
+  "event": "status.created", // or "status.deleted"
+  "did": "did:plc:...",
+  "handle": null,
+  "status": "🙂",           // created only
+  "text": "in a meeting",   // optional
+  "uri": "at://...",       // record URI
+  "since": "2025-09-10T16:00:00Z", // created only
+  "expires": null            // created only
+}</code></pre>
+                                </div>
+                                <div>
+                                    <h4>Verify signature</h4>
+                                    <p>Compute HMAC-SHA256 over <code>timestamp + "." + rawBody</code> using your secret. Compare to header (without the <code>sha256=</code> prefix) with constant-time equality, and reject if timestamp is too old (e.g., &gt; 5 minutes).</p>
+<pre><code>// Node (TypeScript)
+import crypto from 'node:crypto';
+
+function verify(req: any, rawBody: Buffer, secret: string): boolean {
+  const ts = req.headers['x-status-webhook-timestamp'];
+  const sig = String(req.headers['x-status-webhook-signature'] || '').replace(/^sha256=/, '');
+  if (!ts || !sig) return false;
+  const now = Math.floor(Date.now()/1000);
+  if (Math.abs(now - Number(ts)) > 300) return false; // 5m
+  const mac = crypto.createHmac('sha256', secret).update(String(ts)).update('.').update(rawBody).digest('hex');
+  return crypto.timingSafeEqual(Buffer.from(mac, 'hex'), Buffer.from(sig, 'hex'));
+}
+</code></pre>
+<pre><code>// Rust (axum-ish)
+use hmac::{Hmac, Mac};
+use sha2::Sha256;
+
+fn verify(ts: &str, sig_hdr: &str, body: &[u8], secret: &str) -> bool {
+    let sig = sig_hdr.strip_prefix("sha256=").unwrap_or(sig_hdr);
+    if let Ok(ts_int) = ts.parse::<i64>() {
+        if (chrono::Utc::now().timestamp() - ts_int).abs() > 300 { return false; }
+    } else { return false; }
+    let mut mac = Hmac::<Sha256>::new_from_slice(secret.as_bytes()).unwrap();
+    mac.update(ts.as_bytes());
+    mac.update(b".");
+    mac.update(body);
+    let calc = hex::encode(mac.finalize().into_bytes());
+    subtle::ConstantTimeEq::ct_eq(calc.as_bytes(), sig.as_bytes()).into()
+}
+</code></pre>
+                                </div>
+                            </div>
+                        </div>
+                    </details>
                 </div>
             </div>
         </div>
···
     align-items: center;
     justify-content: center;
 }
-.webhook-modal-content {
-    width: min(920px, 95vw);
-    max-height: 90vh;
-    overflow: auto;
-    background: var(--bg, #111);
-    color: var(--text, #fff);
-    border: 1px solid var(--border-color, #2a2a2a);
-    border-radius: 12px;
-    padding: 16px 20px;
-}
-.webhook-modal-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 12px;
-}
-.webhook-modal-header h2 { margin: 0; font-size: 18px; }
-.webhook-modal-header button {
-    background: transparent;
-    color: inherit;
-    border: 1px solid var(--border-color, #2a2a2a);
-    border-radius: 8px;
-    padding: 6px 10px;
-    cursor: pointer;
-}
-.webhook-form {
-    display: grid;
-    grid-template-columns: 1fr 200px 1fr auto;
-    gap: 8px;
-    margin-bottom: 16px;
-}
-.webhook-form input { 
-    background: var(--bg-secondary, #0d0d0d);
-    color: var(--text, #fff);
-    border: 1px solid var(--border-color, #2a2a2a);
-    border-radius: 8px;
-    padding: 10px 12px;
-}
-.webhook-form button {
-    background: var(--accent, #1DA1F2);
-    color: #000;
-    border: none;
-    border-radius: 8px;
-    padding: 10px 12px;
-    cursor: pointer;
-}
-.webhook-list .item {
-    border: 1px solid var(--border-color, #2a2a2a);
-    border-radius: 8px;
-    padding: 12px;
-    margin-bottom: 10px;
-    display: grid;
-    grid-template-columns: 1fr auto;
-    gap: 8px;
-}
+        .webhook-modal-content {
+            width: 96vw;
+            height: 92vh;
+            max-width: 1400px;
+            max-height: 92vh;
+            background: var(--bg, #111);
+            color: var(--text, #fff);
+            border: 1px solid var(--border-color, #2a2a2a);
+            border-radius: 12px;
+            display: flex;
+            flex-direction: column;
+        }
+        .webhook-modal-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 16px 20px;
+            border-bottom: 1px solid var(--border-color, #2a2a2a);
+        }
+        .webhook-modal-header h2 { margin: 0; font-size: 20px; }
+        .webhook-modal-header button {
+            background: transparent;
+            color: inherit;
+            border: 1px solid var(--border-color, #2a2a2a);
+            border-radius: 8px;
+            padding: 6px 10px;
+            cursor: pointer;
+        }
+        .webhook-modal-body {
+            padding: 16px 20px;
+            overflow: auto;
+            height: calc(92vh - 60px);
+        }
+        .webhook-form {
+            display: grid;
+            grid-template-columns: 1.2fr 0.8fr 1fr auto;
+            gap: 8px;
+            margin-bottom: 16px;
+        }
+        .webhook-form input { 
+            background: var(--bg-secondary, #0d0d0d);
+            color: var(--text, #fff);
+            border: 1px solid var(--border-color, #2a2a2a);
+            border-radius: 8px;
+            padding: 10px 12px;
+        }
+        .webhook-form button {
+            background: var(--accent, #1DA1F2);
+            color: #000;
+            border: none;
+            border-radius: 8px;
+            padding: 10px 12px;
+            cursor: pointer;
+        }
+        .field-help { font-size: 12px; opacity: 0.8; margin-top: 2px; grid-column: 1 / -1; }
+        .webhook-list .item {
+            border: 1px solid var(--border-color, #2a2a2a);
+            border-radius: 8px;
+            padding: 12px;
+            margin-bottom: 10px;
+            display: grid;
+            grid-template-columns: 1fr auto;
+            gap: 8px;
+        }
 .webhook-list .meta { font-size: 12px; opacity: 0.8; }
 .webhook-actions { display: flex; gap: 8px; align-items: center; }
 .webhook-actions button {
···
     padding: 6px 10px;
     cursor: pointer;
 }
-.webhook-actions .danger { border-color: #803; color: #f77; }
-.webhook-active { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
-.webhook-active input { transform: translateY(1px); }
+        .webhook-actions .danger { border-color: #803; color: #f77; }
+        .webhook-active { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
+        .webhook-active input { transform: translateY(1px); }
+
+        /* Collapsible guide */
+        .wh-guide {
+            margin-top: 20px;
+            border: 1px solid var(--border-color, #2a2a2a);
+            border-radius: 10px;
+            overflow: hidden;
+        }
+        .wh-guide summary {
+            padding: 12px 14px;
+            cursor: pointer;
+            background: var(--bg-secondary, #0f0f0f);
+            font-weight: 600;
+            outline: none;
+        }
+        .wh-guide .content { padding: 14px; }
+        .wh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+        .wh-grid pre { background: #0b0b0b; border: 1px solid var(--border-color); border-radius: 8px; padding: 12px; overflow: auto; font-size: 12px; }
+        @media (max-width: 900px) { .wh-grid { grid-template-columns: 1fr; } }
 </style>
 
 <script>