@antzsoft/chat-core 1.2.2 → 1.2.4

package/docs/integration-guide.html

@@ -155,7 +155,7 @@ section.sec>h2:hover{color:#fff}
 
   <div class="section-label">What's New</div>
   <ul>
-    <li><a href="#whats-new">v1.2.0 Release Notes</a></li>
+    <li><a href="#whats-new">v1.2.4 Release Notes</a></li>
   </ul>
 
   <div class="section-label">Getting Started</div>
@@ -192,6 +192,7 @@ section.sec>h2:hover{color:#fff}
     <li><a href="#step-realtime">10. Real-time Events</a></li>
     <li><a href="#step-typing">11. Typing Indicators</a></li>
     <li><a href="#step-read">12. Read Receipts &amp; Last Seen</a></li>
+    <li><a href="#step-message-info">12b. Message Info Screen</a></li>
     <li><a href="#step-edit">13. Edit &amp; Delete</a></li>
     <li><a href="#step-search">14. Search Messages</a></li>
     <li><a href="#step-reactions">15. Reactions, Pin, Star</a></li>
@@ -242,16 +243,225 @@ section.sec>h2:hover{color:#fff}
   <h2>What's New</h2>
   <p style="color:var(--muted);font-size:13px;margin-bottom:20px">Version history and release notes. Click a version to expand.</p>
 
-  <!-- ── v1.2.0 (current) ── -->
-  <div class="wn-version open" id="wn-120">
-    <div class="wn-header" onclick="toggleVersion('wn-120')">
+  <!-- ── v1.2.4 (current) ── -->
+  <div class="wn-version open" id="wn-124">
+    <div class="wn-header" onclick="toggleVersion('wn-124')">
       <div class="wn-title">
-        <span class="wn-ver">v1.2.0</span>
+        <span class="wn-ver">v1.2.4</span>
         <span class="wn-badge current">Current</span>
         <span class="wn-date">May 2026</span>
       </div>
       <span class="wn-chevron">▲</span>
     </div>
+    <div class="wn-body">
+
+      <div class="wn-item" id="wn-124-mp1">
+        <div class="wn-item-header" onclick="toggleItem('wn-124-mp1')">
+          <span class="wn-tag new">New</span>
+          <span class="wn-item-title">Chunked multipart upload for files ≥ 10 MB (S3 and local)</span>
+          <span class="wn-chevron-sm">▾</span>
+        </div>
+        <div class="wn-item-body">
+          <p>Files at or above <strong>10 MB</strong> on S3 and local storage now use chunked multipart upload instead of a single presigned POST. The SDK splits the file into 10 MB chunks, uploads up to 3 parts in parallel, then completes the upload server-side.</p>
+          <p><strong>What changes per provider:</strong></p>
+          <table>
+            <thead><tr><th>Provider</th><th>File &lt; 10 MB</th><th>File ≥ 10 MB</th></tr></thead>
+            <tbody>
+              <tr><td>AWS S3</td><td>Presigned POST (unchanged)</td><td><strong>New:</strong> chunked multipart — N presigned PUT URLs (one per part) → <code>CompleteMultipartUpload</code></td></tr>
+              <tr><td>Local (same-server / mount)</td><td>Presigned POST (unchanged)</td><td><strong>New:</strong> chunked multipart — N signed PUT URLs (one per part) → <code>POST /storage/multipart/complete/:fileId</code> assembles parts on disk</td></tr>
+              <tr><td>Azure Blob Storage</td><td>Presigned PUT (unchanged)</td><td>Presigned PUT (unchanged)</td></tr>
+            </tbody>
+          </table>
+          <p><strong>Benefits at 50 MB+:</strong> resumes from last completed part on network failure, parallel throughput, no single-request timeout, supports files up to 5 TB.</p>
+          <p><strong>No integration changes required</strong> for Web SDK (<code>@antzsoft/chat-web-sdk</code>) and RN SDK (<code>@antzsoft/chat-rn-sdk</code>) users — <code>webUploadPartFn</code> and <code>rnUploadPartFn</code> are wired in automatically. Node.js / custom integrators must pass <code>platformUploadPartFn</code> to <code>uploadBatch</code> to enable chunked uploads.</p>
+          <p class="wn-ref">→ <a href="#step-upload">Step 16 — Upload Files</a></p>
+        </div>
+      </div>
+
+      <div class="wn-item" id="wn-124-mp2">
+        <div class="wn-item-header" onclick="toggleItem('wn-124-mp2')">
+          <span class="wn-tag new">New</span>
+          <span class="wn-item-title"><code>storageApi.completeMultipartUpload()</code> · <code>PlatformUploadPartFn</code> type · <code>CompletedPart</code> / <code>MultipartUploadInfo</code> types</span>
+          <span class="wn-chevron-sm">▾</span>
+        </div>
+        <div class="wn-item-body">
+          <p><code>storageApi.completeMultipartUpload(fileId, uploadId, parts)</code> is called automatically by <code>uploadBatch</code> — only needed in custom manual upload flows. It assembles S3 parts and transitions the file record to active in one round-trip (replaces the separate <code>confirmUpload</code> call for the multipart path).</p>
+          <p><code>PlatformUploadPartFn</code> is the new platform adapter type: <code>(uploadUrl: string, blob: Blob | ArrayBuffer, onProgress?) =&gt; Promise&lt;string&gt;</code> — returns the ETag S3 sends back for the part. Exported from <code>@antzsoft/chat-core</code>.</p>
+          <p>New exported types: <code>MultipartUploadInfo</code>, <code>MultipartPartUrl</code>, <code>CompletedPart</code>.</p>
+        </div>
+      </div>
+
+
+      <div class="wn-item" id="wn-124-1">
+        <div class="wn-item-header" onclick="toggleItem('wn-124-1')">
+          <span class="wn-tag improvement">Improvement</span>
+          <span class="wn-item-title">S3 and local storage uploads now use presigned POST multipart — file bytes never touch the chat server</span>
+          <span class="wn-chevron-sm">▾</span>
+        </div>
+        <div class="wn-item-body">
+          <p>File uploads to S3 and the local storage provider now use <strong>presigned POST</strong> (AWS POST policy / HMAC-signed form fields) instead of presigned PUT. The client sends a <code>multipart/form-data</code> request directly to the storage endpoint — S3 or the chat server's own <code>/storage/files/upload</code> endpoint — with the signed fields embedded in the form body. No file bytes pass through the chat server.</p>
+          <p><strong>What changed per provider:</strong></p>
+          <table>
+            <thead><tr><th>Provider</th><th>Upload method</th><th>Change</th></tr></thead>
+            <tbody>
+              <tr><td>AWS S3</td><td>Presigned POST (multipart/form-data)</td><td>Changed from presigned PUT → POST. AWS signs a policy; client POSTs a FormData with all fields + file.</td></tr>
+              <tr><td>Local (same-server / mount)</td><td>Presigned POST (multipart/form-data)</td><td>HMAC-signed fields now go in the form body (not query string) — WAF-friendly.</td></tr>
+              <tr><td>Azure Blob Storage</td><td>Presigned PUT (SAS token)</td><td>Unchanged — Azure has no form-based upload API.</td></tr>
+            </tbody>
+          </table>
+          <p><strong>How the SDK handles both paths:</strong> The <code>PresignedUrlResponse</code> carries <code>method: 'POST'</code> and a <code>fields</code> object for S3/local. Your <code>platformUploadFn</code> should branch on this:</p>
+          <pre><code><span class="cm">// S3 / local → multipart FormData (method: 'POST', fields present)</span>
+<span class="cm">// Azure      → raw PUT body      (method: 'PUT',  no fields)</span>
+<span class="kw">if</span> (presigned.method === <span class="str">'POST'</span> &amp;&amp; presigned.fields) {
+  <span class="kw">const</span> fd = <span class="kw">new</span> <span class="fn">FormData</span>();
+  Object.<span class="fn">entries</span>(presigned.fields).<span class="fn">forEach</span>(([k, v]) => fd.<span class="fn">append</span>(k, v));
+  fd.<span class="fn">append</span>(<span class="str">'file'</span>, blob, file.name); <span class="cm">// file must be last</span>
+  xhr.<span class="fn">send</span>(fd);
+} <span class="kw">else</span> {
+  xhr.<span class="fn">send</span>(blob); <span class="cm">// Azure PUT</span>
+}</code></pre>
+          <p><strong>No integration changes required.</strong> Both the web SDK and RN SDK already implement this branching. If you are using the recommended <code>platformUploadFn</code> from Step 1 of this guide, it already handles both paths correctly. Only custom <code>platformUploadFn</code> implementations that unconditionally used <code>presigned.method</code> as PUT need updating — see the updated examples in <a href="#step1">Step 1</a>.</p>
+          <p class="wn-ref">→ <a href="#step1">Step 1 — platformUploadFn examples</a> · <a href="#step-upload">Step 16 — Upload Files</a></p>
+        </div>
+      </div>
+
+      <div class="wn-item" id="wn-124-2">
+        <div class="wn-item-header" onclick="toggleItem('wn-124-2')">
+          <span class="wn-tag fix">Fix</span>
+          <span class="wn-item-title"><code>POST /storage/files/upload</code> returns <code>403</code> when transit encryption is enabled</span>
+          <span class="wn-chevron-sm">▾</span>
+        </div>
+        <div class="wn-item-body">
+          <p>The local-storage direct upload endpoint (<code>POST /storage/files/upload</code>) was missing the <code>@PreTransit()</code> decorator. With <code>transitEncryption: true</code>, the <code>TransitEnforceGuard</code> rejected every upload request with <code>403 Transit encryption required</code>.</p>
+          <p><strong>Why this endpoint is pre-transit:</strong> The client uploads directly via XHR/fetch — not through the Axios client — so no <code>x-transit-session</code> header is ever present on this request. Auth is the HMAC signature embedded in the <code>multipart/form-data</code> fields (<code>token</code>, <code>ts</code>) which the server validates independently.</p>
+          <p><strong>No integration changes required.</strong> This fix unblocks uploads on deployments with <code>transitEncryption: true</code>. No client-side changes needed.</p>
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+  <!-- ── v1.2.3 ── -->
+  <div class="wn-version" id="wn-123">
+    <div class="wn-header" onclick="toggleVersion('wn-123')">
+      <div class="wn-title">
+        <span class="wn-ver">v1.2.3</span>
+        <span class="wn-date">May 2026</span>
+      </div>
+      <span class="wn-chevron">▼</span>
+    </div>
+    <div class="wn-body">
+
+      <div class="wn-item" id="wn-123-1">
+        <div class="wn-item-header" onclick="toggleItem('wn-123-1')">
+          <span class="wn-tag new">New</span>
+          <span class="wn-item-title"><code>messagesApi.getReceipts(messageId)</code> — per-user read &amp; delivery receipt detail</span>
+          <span class="wn-chevron-sm">▾</span>
+        </div>
+        <div class="wn-item-body">
+          <p>New endpoint <code>GET /messages/:id/receipts</code> returns the full read and delivery receipt list for a single message, with user profiles (name, avatar) resolved server-side. Designed as the initial load for a "Read by / Delivered to" message info screen.</p>
+          <p>Response shape:</p>
+          <pre><code>{
+  messageId: string,
+  readBy:     [{ userId, displayName, avatarUrl, readAt }],
+  deliveredTo: [{ userId, displayName, avatarUrl, deliveredAt }]
+}</code></pre>
+          <p>No secondary user lookup needed — profiles are included. The "Sent to" bucket (not yet delivered) is derived client-side by subtracting <code>readBy</code> and <code>deliveredTo</code> user IDs from the conversation participant list.</p>
+          <p class="wn-ref">→ <a href="#step-message-info">Step 12b — Message Info Screen</a> for the complete pattern including live updates.</p>
+        </div>
+      </div>
+
+      <div class="wn-item" id="wn-123-2">
+        <div class="wn-item-header" onclick="toggleItem('wn-123-2')">
+          <span class="wn-tag fix">Fix</span>
+          <span class="wn-item-title"><code>message_delivered</code> now fires per recipient, not all-or-nothing</span>
+          <span class="wn-chevron-sm">▾</span>
+        </div>
+        <div class="wn-item-body">
+          <p>Previously <code>message_delivered</code> only fired to the sender when <em>all</em> recipients were online at the moment of sending — if even one recipient was offline, the sender received no delivery event at all until every recipient came online simultaneously (which often never happens in large groups).</p>
+          <p>The server now fires <code>message_delivered</code> once per online recipient at send time. The payload's <code>deliveredTo</code> field is now a single object <code>{ userId, deliveredAt }</code> (previously an array) — one event per person, matching how <code>read_receipt</code> works.</p>
+          <p>This means the delivery section of a message info screen builds up live one entry at a time, exactly as WhatsApp does.</p>
+          <p><strong>Backward compatible</strong> — existing <code>message_delivered</code> handlers in both the web and RN SDKs only read <code>event.messageId</code> to update the tick mark and are unaffected by the <code>deliveredTo</code> shape change. The event fires more frequently (good — more accurate delivery feedback) but the existing handler logic is identical.</p>
+          <p class="wn-ref">→ <a href="#step-message-info">Step 12b — Message Info Screen</a> · <a href="#step-realtime">Step 10 — Real-time Events</a></p>
+        </div>
+      </div>
+
+      <div class="wn-item" id="wn-123-3">
+        <div class="wn-item-header" onclick="toggleItem('wn-123-3')">
+          <span class="wn-tag new">New</span>
+          <span class="wn-item-title">Viewer-aware system message text — SDK resolves "You", "you", or full names automatically</span>
+          <span class="wn-chevron-sm">▾</span>
+        </div>
+        <div class="wn-item-body">
+          <p>System messages (member added/removed, admin promoted/demoted, group created/updated) now render differently depending on who is reading them — matching WhatsApp behaviour.</p>
+          <table>
+            <thead><tr><th>Viewer</th><th>Rendered text</th></tr></thead>
+            <tbody>
+              <tr><td>Actor (Anil removed Ajay)</td><td>"You removed Ajay Antony"</td></tr>
+              <tr><td>Target (Ajay was removed)</td><td>"Anil Rathod removed you"</td></tr>
+              <tr><td>Bystander (Saket)</td><td>"Anil Rathod removed Ajay Antony"</td></tr>
+            </tbody>
+          </table>
+          <p><strong>How it works:</strong> The server stores the neutral third-person form in <code>content.text</code> (used for push notifications and exports) and sends structured <code>actorUserId</code>, <code>actorUserName</code>, <code>targetUserId</code>, <code>targetUserName</code> fields in the message <code>metadata</code>. The SDK's <code>messagesApi.list()</code> applies <code>resolveSystemMessageText()</code> in-memory before returning messages — <code>content.text</code> is already correct by the time it reaches your UI. No frontend logic changes needed.</p>
+          <p><strong>Socket path:</strong> For raw <code>new_message</code> socket events handled outside the SDK pipeline (e.g. <code>AntzChatClient</code> headless usage), call <code>resolveSystemMessageText(message, currentUserId)</code> manually:</p>
+          <pre><code>import { resolveSystemMessageText, getAuthStore } from '@antzsoft/chat-core';
+
+client.socket.on('new_message', (event) => {
+  const message = event.message;
+  if (message.content.type === 'system') {
+    const uid = getAuthStore().useAuthStore.getState().user?.id ?? '';
+    message.content.text = resolveSystemMessageText(message, uid);
+  }
+  appendMessageToView(message);
+});</code></pre>
+          <p><strong>Backward compatible:</strong></p>
+          <ul>
+            <li>Old SDK + new server: <code>actorUserId</code> fields ignored, raw <code>content.text</code> displayed — degrades gracefully.</li>
+            <li>New SDK + old server: <code>actorUserId</code> absent, guard fires, raw <code>content.text</code> returned unchanged.</li>
+          </ul>
+          <p>Applies to: <code>group_created</code>, <code>user_added</code>, <code>user_removed</code>, <code>user_left</code>, <code>admin_promoted</code>, <code>admin_demoted</code>, <code>group_updated</code>.</p>
+          <p><strong>Also fixed in this release:</strong></p>
+          <ul>
+            <li><code>group_updated</code> system message text now includes the actor name ("Anil changed the group name to 'X'" instead of the previous "Group name changed to 'X'").</li>
+            <li>Push notification body for <code>admin_demoted</code> corrected from "made you member" to "removed you as admin".</li>
+            <li>Removed users who are offline at the time of removal now receive a push notification ("Anil Rathod removed you from the group") since the socket event cannot reach them.</li>
+          </ul>
+        </div>
+      </div>
+
+    </div>
+  </div><!-- /.wn-version -->
+
+  <!-- ── Version history button ── -->
+  <button class="wn-history-btn" onclick="openVersionHistory()">
+    <span class="wn-history-icon">⏱</span>
+    View version history
+    <span class="wn-history-count">15 older versions</span>
+  </button>
+
+</section>
+
+<!-- ── Version history modal ── -->
+<div id="version-history-modal" class="vh-overlay" onclick="if(event.target===this)closeVersionHistory()">
+  <div class="vh-drawer">
+    <div class="vh-header">
+      <div class="vh-header-left">
+        <span class="vh-title">Version History</span>
+        <span class="vh-subtitle">All previous releases</span>
+      </div>
+      <button class="vh-close" onclick="closeVersionHistory()">✕</button>
+    </div>
+    <div class="vh-body">
+
+  <!-- ── v1.2.0 ── -->
+  <div class="wn-version" id="wn-120">
+    <div class="wn-header" onclick="toggleVersion('wn-120')">
+      <div class="wn-title">
+        <span class="wn-ver">v1.2.0</span>
+        <span class="wn-date">May 2026</span>
+      </div>
+      <span class="wn-chevron">▾</span>
+    </div>
     <div class="wn-body">
 
       <div class="wn-item" id="wn-120-1">
@@ -280,7 +490,7 @@ section.sec>h2:hover{color:#fff}
       </div>
       <span class="wn-chevron">▾</span>
     </div>
-    <div class="wn-body" style="display:none">
+    <div class="wn-body">
 
       <div class="wn-item" id="wn-119-1">
         <div class="wn-item-header" onclick="toggleItem('wn-119-1')">
@@ -320,7 +530,7 @@ section.sec>h2:hover{color:#fff}
       </div>
       <span class="wn-chevron">▾</span>
     </div>
-    <div class="wn-body" style="display:none">
+    <div class="wn-body">
 
       <div class="wn-item" id="wn-118-1">
         <div class="wn-item-header" onclick="toggleItem('wn-118-1')">
@@ -373,7 +583,7 @@ section.sec>h2:hover{color:#fff}
       </div>
       <span class="wn-chevron">▾</span>
     </div>
-    <div class="wn-body" style="display:none">
+    <div class="wn-body">
 
       <div class="wn-item" id="wn-117-1">
         <div class="wn-item-header" onclick="toggleItem('wn-117-1')">
@@ -413,7 +623,7 @@ section.sec>h2:hover{color:#fff}
       </div>
       <span class="wn-chevron">▾</span>
     </div>
-    <div class="wn-body" style="display:none">
+    <div class="wn-body">
 
       <div class="wn-item" id="wn-116-1">
         <div class="wn-item-header" onclick="toggleItem('wn-116-1')">
@@ -1540,7 +1750,9 @@ messaging().<span class="fn">onTokenRefresh</span>(<span class="kw">async</span>
     </div><!-- /.wn-body -->
   </div><!-- /.wn-version -->
 
-</section>
+    </div><!-- /.vh-body -->
+  </div><!-- /.vh-drawer -->
+</div><!-- /#version-history-modal -->
 
 <style>
 /* ── What's New ── */
@@ -1575,7 +1787,29 @@ messaging().<span class="fn">onTokenRefresh</span>(<span class="kw">async</span>
 .wn-tag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;letter-spacing:.4px;white-space:nowrap}
 .wn-tag.new{background:rgba(108,140,255,.15);color:var(--accent);border:1px solid rgba(108,140,255,.3)}
 .wn-tag.fix{background:rgba(251,191,36,.12);color:var(--yellow);border:1px solid rgba(251,191,36,.25)}
+.wn-tag.improvement{background:rgba(52,211,153,.1);color:var(--green);border:1px solid rgba(52,211,153,.25)}
 .wn-tag.break{background:rgba(248,113,113,.12);color:var(--red);border:1px solid rgba(248,113,113,.25)}
+
+/* ── Version history button ── */
+.wn-history-btn{display:flex;align-items:center;gap:10px;width:100%;padding:13px 18px;background:transparent;border:1px dashed var(--border);border-radius:var(--radius);cursor:pointer;color:var(--muted);font-size:13px;font-family:var(--font-sans);transition:all .15s;margin-top:4px}
+.wn-history-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(108,140,255,.04)}
+.wn-history-icon{font-size:14px}
+.wn-history-count{margin-left:auto;font-size:11px;background:var(--surface2);padding:2px 8px;border-radius:20px;border:1px solid var(--border)}
+.wn-history-btn:hover .wn-history-count{border-color:rgba(108,140,255,.4);color:var(--accent)}
+
+/* ── Version history modal ── */
+.vh-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:500;align-items:flex-start;justify-content:flex-end}
+.vh-overlay.open{display:flex}
+.vh-drawer{width:min(680px,92vw);height:100vh;background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;animation:slideIn .22s ease}
+@keyframes slideIn{from{transform:translateX(40px);opacity:0}to{transform:translateX(0);opacity:1}}
+.vh-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border);flex-shrink:0}
+.vh-header-left{display:flex;flex-direction:column;gap:2px}
+.vh-title{font-size:16px;font-weight:800;color:#fff}
+.vh-subtitle{font-size:12px;color:var(--muted)}
+.vh-close{background:var(--surface2);border:1px solid var(--border);color:var(--muted);width:30px;height:30px;border-radius:6px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all .15s;font-family:var(--font-sans)}
+.vh-close:hover{color:#fff;border-color:var(--accent);background:rgba(108,140,255,.1)}
+.vh-body{flex:1;overflow-y:auto;padding:20px 24px 40px}
+.vh-body .wn-version{margin-bottom:10px}
 </style>
 
 <!-- ─── OVERVIEW ──────────────────────────────────────────────────────── -->
@@ -1724,14 +1958,16 @@ npx pod-install</code></pre>
 
 <span class="kw">export const</span> <span class="at">rnUploadFn</span>: <span class="tp">PlatformUploadFn</span> = <span class="kw">async</span> (presigned, file, onProgress) => {
   <span class="kw">let</span> body: <span class="tp">Blob</span> | <span class="tp">FormData</span>;
-  <span class="kw">if</span> (presigned.method === <span class="str">'PUT'</span>) {
-    <span class="kw">const</span> res = <span class="kw">await</span> <span class="fn">fetch</span>(file.uri);
-    body = <span class="kw">await</span> res.<span class="fn">blob</span>();
-  } <span class="kw">else</span> {
+  <span class="kw">if</span> (presigned.method === <span class="str">'POST'</span> &amp;&amp; presigned.fields) {
+    <span class="cm">// S3 / local — multipart FormData with signed policy fields</span>
     <span class="kw">const</span> form = <span class="kw">new</span> <span class="fn">FormData</span>();
-    <span class="kw">if</span> (presigned.fields) Object.<span class="fn">entries</span>(presigned.fields).<span class="fn">forEach</span>(([k,v]) => form.<span class="fn">append</span>(k,v <span class="kw">as</span> <span class="tp">string</span>));
+    Object.<span class="fn">entries</span>(presigned.fields).<span class="fn">forEach</span>(([k,v]) => form.<span class="fn">append</span>(k, v <span class="kw">as</span> <span class="tp">string</span>));
     form.<span class="fn">append</span>(<span class="str">'file'</span>, { <span class="at">uri</span>: file.uri, <span class="at">type</span>: file.type, <span class="at">name</span>: file.name } <span class="kw">as any</span>);
     body = form;
+  } <span class="kw">else</span> {
+    <span class="cm">// Azure — raw blob PUT</span>
+    <span class="kw">const</span> res = <span class="kw">await</span> <span class="fn">fetch</span>(file.uri);
+    body = <span class="kw">await</span> res.<span class="fn">blob</span>();
   }
   <span class="kw">await</span> <span class="fn">fetch</span>(presigned.uploadUrl, { <span class="at">method</span>: presigned.method, <span class="at">headers</span>: presigned.headers, body });
   onProgress?.(<span class="num">100</span>);
@@ -1748,26 +1984,37 @@ npx pod-install</code></pre>
     Object.<span class="fn">entries</span>(presigned.headers ?? {}).<span class="fn">forEach</span>(([k,v]) => xhr.<span class="fn">setRequestHeader</span>(k, v));
     xhr.onload = () => xhr.status &lt; <span class="num">300</span> ? <span class="fn">resolve</span>() : <span class="fn">reject</span>(<span class="kw">new</span> <span class="fn">Error</span>(`Upload failed: ${xhr.status}`));
     xhr.onerror = () => <span class="fn">reject</span>(<span class="kw">new</span> <span class="fn">Error</span>(<span class="str">'Upload network error'</span>));
-    <span class="kw">if</span> (presigned.method === <span class="str">'PUT'</span>) {
-      xhr.<span class="fn">send</span>(file <span class="kw">as any</span>);
-    } <span class="kw">else</span> {
+    <span class="kw">if</span> (presigned.method === <span class="str">'POST'</span> &amp;&amp; presigned.fields) {
+      <span class="cm">// S3 / local — multipart FormData with signed policy fields</span>
       <span class="kw">const</span> form = <span class="kw">new</span> <span class="fn">FormData</span>();
-      <span class="kw">if</span> (presigned.fields) Object.<span class="fn">entries</span>(presigned.fields).<span class="fn">forEach</span>(([k,v]) => form.<span class="fn">append</span>(k,v));
-      form.<span class="fn">append</span>(<span class="str">'file'</span>, file <span class="kw">as any</span>);
-      xhr.<span class="fn">send</span>(form);
+      Object.<span class="fn">entries</span>(presigned.fields).<span class="fn">forEach</span>(([k,v]) => form.<span class="fn">append</span>(k, v));
+      <span class="fn">fetch</span>(file.uri).<span class="fn">then</span>(r => r.<span class="fn">blob</span>()).<span class="fn">then</span>(blob => { form.<span class="fn">append</span>(<span class="str">'file'</span>, blob, file.name); xhr.<span class="fn">send</span>(form); }).<span class="fn">catch</span>(reject);
+    } <span class="kw">else</span> {
+      <span class="cm">// Azure — raw blob PUT</span>
+      <span class="fn">fetch</span>(file.uri).<span class="fn">then</span>(r => r.<span class="fn">blob</span>()).<span class="fn">then</span>(blob => xhr.<span class="fn">send</span>(blob)).<span class="fn">catch</span>(reject);
     }
   });</code></pre>
   </div>
   <div data-p="node">
-    <pre><code><span class="kw">import</span> { createReadStream } <span class="kw">from</span> <span class="str">'fs'</span>;
+    <pre><code><span class="kw">import</span> { readFileSync } <span class="kw">from</span> <span class="str">'fs'</span>;
 <span class="kw">import</span> { <span class="tp">PlatformUploadFn</span> } <span class="kw">from</span> <span class="str">'@antzsoft/chat-core'</span>;
 
 <span class="kw">export const</span> <span class="at">nodeUploadFn</span>: <span class="tp">PlatformUploadFn</span> = <span class="kw">async</span> (presigned, file, onProgress) => {
-  <span class="kw">const</span> res = <span class="kw">await</span> <span class="fn">fetch</span>(presigned.uploadUrl, {
-    <span class="at">method</span>: presigned.method,
-    <span class="at">headers</span>: { <span class="str">'Content-Type'</span>: file.type, ...presigned.headers },
-    <span class="at">body</span>: <span class="fn">createReadStream</span>(file.uri) <span class="kw">as any</span>,
-  });
+  <span class="kw">let</span> body: <span class="tp">any</span>;
+  <span class="kw">let</span> headers: <span class="tp">Record</span>&lt;<span class="tp">string</span>, <span class="tp">string</span>&gt; = { ...presigned.headers };
+  <span class="kw">if</span> (presigned.method === <span class="str">'POST'</span> &amp;&amp; presigned.fields) {
+    <span class="cm">// S3 / local — multipart FormData with signed policy fields</span>
+    <span class="kw">const</span> { <span class="fn">FormData</span>, <span class="fn">Blob</span> } = <span class="kw">await</span> <span class="kw">import</span>(<span class="str">'node:buffer'</span>) <span class="kw">as any</span>;
+    <span class="kw">const</span> fd = <span class="kw">new</span> <span class="fn">FormData</span>();
+    Object.<span class="fn">entries</span>(presigned.fields).<span class="fn">forEach</span>(([k, v]) => fd.<span class="fn">append</span>(k, v <span class="kw">as</span> <span class="tp">string</span>));
+    fd.<span class="fn">append</span>(<span class="str">'file'</span>, <span class="kw">new</span> <span class="fn">Blob</span>([<span class="fn">readFileSync</span>(file.uri.<span class="fn">replace</span>(<span class="str">'file://'</span>, <span class="str">''</span>))], { <span class="at">type</span>: file.type }), file.name);
+    body = fd;
+  } <span class="kw">else</span> {
+    <span class="cm">// Azure — raw buffer PUT</span>
+    body = <span class="fn">readFileSync</span>(file.uri.<span class="fn">replace</span>(<span class="str">'file://'</span>, <span class="str">''</span>));
+    headers[<span class="str">'Content-Type'</span>] = file.type;
+  }
+  <span class="kw">const</span> res = <span class="kw">await</span> <span class="fn">fetch</span>(presigned.uploadUrl, { <span class="at">method</span>: presigned.method, headers, body });
   <span class="kw">if</span> (!res.ok) <span class="kw">throw new</span> <span class="fn">Error</span>(`Upload failed: ${res.status}`);
   onProgress?.(<span class="num">100</span>);
 };</code></pre>
@@ -2641,12 +2888,12 @@ socket.<span class="fn">on</span>(<span class="str">'message_deleted'</span>, (e
       </tr>
       <tr>
         <td><code>'message_delivered'</code></td>
-        <td>A single message you sent was delivered to all active recipients. Payload: <code>{ messageId, conversationId, deliveredTo: Array&lt;{ userId, deliveredAt }&gt; }</code></td>
-        <td><strong>Chat detail screen</strong> — add on mount, remove on unmount.</td>
+        <td>Fired to the sender each time a recipient receives a message — <strong>one event per recipient</strong>. Fires at send time for online recipients, and again per recipient as offline recipients reconnect. Payload: <code>{ messageId, conversationId, deliveredTo: { userId, deliveredAt } }</code></td>
+        <td><strong>Chat detail screen / message info screen</strong> — add on mount, remove on unmount.</td>
       </tr>
       <tr>
         <td><code>'messages_delivered'</code></td>
-        <td>Batch delivery catch-up when a recipient comes online. Payload: <code>{ conversationId, messageIds[], deliveredTo: string, deliveredAt }</code></td>
+        <td>Batch delivery catch-up fired to the sender when an offline recipient reconnects and all pending messages are marked delivered in bulk. Payload: <code>{ conversationId, messageIds[], deliveredTo: string, deliveredAt }</code></td>
         <td><strong>Chat detail screen</strong> — add on mount, remove on unmount.</td>
       </tr>
       <tr>
@@ -2848,6 +3095,79 @@ socket?.<span class="fn">on</span>(<span class="str">'read_receipt'</span>, ({ c
   </table>
 </section>
 
+<!-- ─── STEP 12b: MESSAGE INFO SCREEN ────────────────────────────────── -->
+<section id="step-message-info">
+  <h2><span class="step">STEP 12b</span> Message Info Screen (Read by / Delivered to)</h2>
+
+  <p>The message info screen shows all group participants split into three buckets: <strong>Read by</strong>, <strong>Delivered to</strong>, and <strong>Sent to</strong> (not yet received). The list updates live as participants read or receive the message.</p>
+
+  <h3>Initial load</h3>
+  <p>Call <code>messagesApi.getReceipts(messageId)</code> on open. This returns <code>readBy[]</code> and <code>deliveredTo[]</code> with resolved user profiles — no secondary lookup needed.</p>
+
+  <pre><code><span class="kw">import</span> { messagesApi, conversationsApi } <span class="kw">from</span> <span class="str">'@antzsoft/chat-core'</span>;
+<span class="kw">import</span> <span class="tp">{ MessageReceiptsResponse }</span> <span class="kw">from</span> <span class="str">'@antzsoft/chat-core'</span>;
+
+<span class="cm">// Fetch receipts + participants in parallel</span>
+<span class="kw">const</span> [receipts, conversation] = <span class="kw">await</span> Promise.<span class="fn">all</span>([
+  messagesApi.<span class="fn">getReceipts</span>(messageId),
+  conversationsApi.<span class="fn">get</span>(conversationId),
+]);
+
+<span class="kw">const</span> readByIds    = <span class="kw">new</span> <span class="fn">Set</span>(receipts.readBy.<span class="fn">map</span>(r => r.userId));
+<span class="kw">const</span> deliveredIds = <span class="kw">new</span> <span class="fn">Set</span>(receipts.deliveredTo.<span class="fn">map</span>(d => d.userId));
+
+<span class="kw">const</span> sentTo = conversation.participants
+  .<span class="fn">filter</span>(p => !readByIds.<span class="fn">has</span>(p.userId) && !deliveredIds.<span class="fn">has</span>(p.userId) && p.userId !== senderId)
+  .<span class="fn">map</span>(p => p.user);</code></pre>
+
+  <h3>Live updates</h3>
+  <p>Subscribe to <code>read_receipt</code> and <code>message_delivered</code> while the screen is open. Both fire per-person so the buckets update one entry at a time.</p>
+
+  <pre><code><span class="kw">import</span> { tryGetSocket } <span class="kw">from</span> <span class="str">'@antzsoft/chat-core'</span>;
+<span class="kw">import</span> <span class="tp">{ ReadReceiptEvent, MessageDeliveredEvent }</span> <span class="kw">from</span> <span class="str">'@antzsoft/chat-core'</span>;
+
+<span class="kw">const</span> socket = <span class="fn">tryGetSocket</span>();
+
+<span class="kw">function</span> <span class="fn">onReadReceipt</span>(evt: <span class="tp">ReadReceiptEvent</span>) {
+  <span class="kw">if</span> (!evt.updatedMessageIds?.<span class="fn">includes</span>(messageId)) <span class="kw">return</span>;
+  <span class="cm">// Move evt.userId from deliveredTo / sentTo → readBy</span>
+  <span class="fn">addToReadBy</span>({ userId: evt.userId, readAt: evt.readAt });
+  <span class="fn">removeFromDeliveredTo</span>(evt.userId);
+  <span class="fn">removeFromSentTo</span>(evt.userId);
+}
+
+<span class="kw">function</span> <span class="fn">onMessageDelivered</span>(evt: <span class="tp">MessageDeliveredEvent</span>) {
+  <span class="kw">if</span> (evt.messageId !== messageId) <span class="kw">return</span>;
+  <span class="cm">// Move evt.deliveredTo.userId from sentTo → deliveredTo</span>
+  <span class="fn">addToDeliveredTo</span>(evt.deliveredTo);
+  <span class="fn">removeFromSentTo</span>(evt.deliveredTo.userId);
+}
+
+socket?.<span class="fn">on</span>(<span class="str">'read_receipt'</span>, onReadReceipt);
+socket?.<span class="fn">on</span>(<span class="str">'message_delivered'</span>, onMessageDelivered);
+
+<span class="cm">// Clean up on screen close</span>
+<span class="kw">return</span> () => {
+  socket?.<span class="fn">off</span>(<span class="str">'read_receipt'</span>, onReadReceipt);
+  socket?.<span class="fn">off</span>(<span class="str">'message_delivered'</span>, onMessageDelivered);
+};</code></pre>
+
+  <div class="callout tip">
+    <strong>Three-bucket logic</strong> — All group participants minus the sender form the full list. <code>readBy</code> takes priority: once someone is in <code>readBy</code>, remove them from <code>deliveredTo</code> and <code>sentTo</code>. <code>deliveredTo</code> takes priority over <code>sentTo</code>. The <code>sentTo</code> bucket is always derived as the remainder.
+  </div>
+
+  <h4>Summary — what is automatic vs. what you do</h4>
+  <table>
+    <thead><tr><th>Action</th><th>Automatic?</th><th>What you do</th></tr></thead>
+    <tbody>
+      <tr><td>Initial receipt list with user profiles</td><td>❌ Manual</td><td>Call <code>messagesApi.getReceipts(messageId)</code> on screen open</td></tr>
+      <tr><td>Live read updates</td><td>❌ Manual</td><td>Listen to <code>read_receipt</code>, check <code>updatedMessageIds</code></td></tr>
+      <tr><td>Live delivery updates</td><td>❌ Manual</td><td>Listen to <code>message_delivered</code>, check <code>messageId</code></td></tr>
+      <tr><td>Participant list for "Sent to" bucket</td><td>❌ Manual</td><td>Fetch via <code>conversationsApi.get(conversationId)</code></td></tr>
+    </tbody>
+  </table>
+</section>
+
 <!-- ─── STEP 13: EDIT & DELETE ────────────────────────────────────────── -->
 <section id="step-edit">
   <h2><span class="step">STEP 13</span> Edit &amp; Delete Messages</h2>
@@ -2935,6 +3255,8 @@ socket?.<span class="fn">on</span>(<span class="str">'read_receipt'</span>, ({ c
   <h2><span class="step">STEP 16</span> Upload Files</h2>
   <p>The SDK handles the full flow: presigned URL request → binary upload via your <code>platformUploadFn</code> → server confirmation. You get back <code>fileId</code>s to attach to messages.</p>
 
+  <div class="callout tip"><strong>Direct-to-storage upload · Chunked multipart for large files (v1.2.4+)</strong> File bytes go directly from the client to the storage provider — no file data passes through the chat server. S3 and local use presigned POST (<code>multipart/form-data</code>). Azure uses presigned PUT. <strong>For files ≥ 10 MB on S3 or local</strong>, the SDK automatically uses chunked multipart upload (10 MB parts, up to 3 parallel) — Web and RN SDK users get this for free. Your <code>platformUploadFn</code> still handles small files via <code>presigned.method === 'POST' &amp;&amp; presigned.fields</code>; the new <code>platformUploadPartFn</code> handles individual parts — see <a href="#step1">Step 1</a>.</div>
+
   <div data-p="rn">
     <pre><code><span class="kw">import</span> * <span class="kw">as</span> ImagePicker <span class="kw">from</span> <span class="str">'expo-image-picker'</span>;
 
@@ -3432,6 +3754,133 @@ self.<span class="fn">addEventListener</span>(<span class="str">'notificationcli
     simultaneously when a notification is triggered. Removing a token only deactivates that specific
     device; other devices continue to receive notifications.
   </p>
+
+  <!-- ── Notification payload + channel/category setup (RN only) ──────── -->
+  <div data-p="rn">
+    <h3>Handling incoming notifications</h3>
+
+    <h4>Notification payload</h4>
+    <p>
+      Every push notification the server sends includes <code>channelId</code> and <code>categoryId</code>
+      at the top level (read by the OS / Expo SDK) and mirrored inside the <code>data</code> object
+      (readable by your JS notification handler):
+    </p>
+    <pre><code>{
+  <span class="str">"title"</span>: <span class="str">"Alice replied to you"</span>,
+  <span class="str">"body"</span>:  <span class="str">"Sounds good!"</span>,
+  <span class="str">"priority"</span>:   <span class="str">"high"</span>,
+  <span class="str">"channelId"</span>:  <span class="str">"reply"</span>,
+  <span class="str">"categoryId"</span>: <span class="str">"reply"</span>,
+  <span class="str">"data"</span>: {
+    <span class="str">"event"</span>:               <span class="str">"reply"</span>,
+    <span class="str">"channelId"</span>:          <span class="str">"reply"</span>,
+    <span class="str">"categoryId"</span>:         <span class="str">"reply"</span>,
+    <span class="str">"conversation_id"</span>:    <span class="str">"..."</span>,
+    <span class="str">"message_id"</span>:         <span class="str">"..."</span>,
+    <span class="str">"original_message_id"</span>: <span class="str">"..."</span>,
+    <span class="str">"sender_id"</span>:          <span class="str">"..."</span>,
+    <span class="str">"sender_name"</span>:        <span class="str">"Alice"</span>
+  }
+}</code></pre>
+
+    <h4>Per-event channelId and categoryId</h4>
+    <table style="width:100%;border-collapse:collapse;font-size:13px;margin:12px 0">
+      <thead><tr style="border-bottom:1px solid var(--border)">
+        <th style="text-align:left;padding:6px 10px;color:var(--muted)">Event</th>
+        <th style="text-align:left;padding:6px 10px;color:var(--muted)">channelId</th>
+        <th style="text-align:left;padding:6px 10px;color:var(--muted)">categoryId</th>
+        <th style="text-align:left;padding:6px 10px;color:var(--muted)">Notes</th>
+      </tr></thead>
+      <tbody>
+        <tr style="border-bottom:1px solid var(--border)"><td style="padding:6px 10px"><code>dm_message</code></td><td style="padding:6px 10px"><code>messages</code></td><td style="padding:6px 10px"><code>message</code></td><td style="padding:6px 10px">Direct message</td></tr>
+        <tr style="border-bottom:1px solid var(--border)"><td style="padding:6px 10px"><code>group_message</code></td><td style="padding:6px 10px"><code>messages</code></td><td style="padding:6px 10px"><code>message</code></td><td style="padding:6px 10px">Group message</td></tr>
+        <tr style="border-bottom:1px solid var(--border)"><td style="padding:6px 10px"><code>mention</code></td><td style="padding:6px 10px"><code>messages</code></td><td style="padding:6px 10px"><code>message</code></td><td style="padding:6px 10px">Mentioned in a group</td></tr>
+        <tr style="border-bottom:1px solid var(--border)"><td style="padding:6px 10px"><code>reply</code></td><td style="padding:6px 10px"><code>reply</code></td><td style="padding:6px 10px"><code>reply</code></td><td style="padding:6px 10px">Reply to your message</td></tr>
+        <tr style="border-bottom:1px solid var(--border)"><td style="padding:6px 10px"><code>dm_reaction</code> / <code>group_reaction</code></td><td style="padding:6px 10px"><code>reactions</code></td><td style="padding:6px 10px"><code>reaction</code></td><td style="padding:6px 10px">Emoji reaction</td></tr>
+        <tr style="border-bottom:1px solid var(--border)"><td style="padding:6px 10px"><code>group_invite</code></td><td style="padding:6px 10px"><code>group_invites</code></td><td style="padding:6px 10px"><code>invite</code></td><td style="padding:6px 10px">Added to a group</td></tr>
+        <tr style="border-bottom:1px solid var(--border)"><td style="padding:6px 10px"><code>group_removed</code></td><td style="padding:6px 10px"><code>group_updates</code></td><td style="padding:6px 10px">—</td><td style="padding:6px 10px">Removed from a group</td></tr>
+        <tr style="border-bottom:1px solid var(--border)"><td style="padding:6px 10px"><code>group_role_changed</code></td><td style="padding:6px 10px"><code>group_updates</code></td><td style="padding:6px 10px">—</td><td style="padding:6px 10px">Role changed in a group</td></tr>
+        <tr><td style="padding:6px 10px"><code>message_edited</code> / <code>message_deleted</code></td><td style="padding:6px 10px"><code>silent</code></td><td style="padding:6px 10px">—</td><td style="padding:6px 10px">Silent background sync, no sound</td></tr>
+      </tbody>
+    </table>
+    <div class="callout tip">
+      <strong>channelId</strong> is Android-only (Android 8+) — controls sound, importance, and DND behaviour per channel.<br>
+      <strong>categoryId</strong> is iOS-only — links to interactive action buttons registered with <code>setNotificationCategoryAsync</code>.<br>
+      If the channel/category is not registered yet on the client, the OS falls back to default behaviour — notifications still arrive normally.
+    </div>
+
+    <h4>Android — register channels at app startup</h4>
+    <p>Create all channels unconditionally on every app launch, before the first notification arrives:</p>
+    <pre><code><span class="kw">import</span> * <span class="kw">as</span> Notifications <span class="kw">from</span> <span class="str">'expo-notifications'</span>;
+
+<span class="kw">async function</span> <span class="fn">setupNotificationChannels</span>() {
+  <span class="kw">await</span> Notifications.<span class="fn">setNotificationChannelAsync</span>(<span class="str">'messages'</span>, {
+    name: <span class="str">'Messages'</span>,
+    importance: Notifications.AndroidImportance.HIGH,
+    sound: <span class="str">'default'</span>,
+  });
+  <span class="kw">await</span> Notifications.<span class="fn">setNotificationChannelAsync</span>(<span class="str">'reply'</span>, {
+    name: <span class="str">'Replies'</span>,
+    importance: Notifications.AndroidImportance.HIGH,
+    sound: <span class="str">'default'</span>,
+  });
+  <span class="kw">await</span> Notifications.<span class="fn">setNotificationChannelAsync</span>(<span class="str">'reactions'</span>, {
+    name: <span class="str">'Reactions'</span>,
+    importance: Notifications.AndroidImportance.DEFAULT,
+  });
+  <span class="kw">await</span> Notifications.<span class="fn">setNotificationChannelAsync</span>(<span class="str">'group_invites'</span>, {
+    name: <span class="str">'Group Invites'</span>,
+    importance: Notifications.AndroidImportance.HIGH,
+    sound: <span class="str">'default'</span>,
+  });
+  <span class="kw">await</span> Notifications.<span class="fn">setNotificationChannelAsync</span>(<span class="str">'group_updates'</span>, {
+    name: <span class="str">'Group Updates'</span>,
+    importance: Notifications.AndroidImportance.LOW,
+  });
+  <span class="kw">await</span> Notifications.<span class="fn">setNotificationChannelAsync</span>(<span class="str">'silent'</span>, {
+    name: <span class="str">'Background Sync'</span>,
+    importance: Notifications.AndroidImportance.MIN,
+    sound: <span class="kw">undefined</span>,
+    enableVibrate: <span class="kw">false</span>,
+  });
+}</code></pre>
+
+    <h4>iOS — register categories with interactive actions</h4>
+    <p>Register categories before requesting push permission. The <code>reply</code> category adds a Reply button when the app is killed:</p>
+    <pre><code><span class="kw">import</span> * <span class="kw">as</span> Notifications <span class="kw">from</span> <span class="str">'expo-notifications'</span>;
+
+<span class="kw">async function</span> <span class="fn">setupNotificationCategories</span>() {
+  <span class="kw">await</span> Notifications.<span class="fn">setNotificationCategoryAsync</span>(<span class="str">'reply'</span>, [
+    {
+      identifier: <span class="str">'REPLY_ACTION'</span>,
+      buttonTitle: <span class="str">'Reply'</span>,
+      textInput: { submitButtonTitle: <span class="str">'Send'</span>, placeholder: <span class="str">'Type a reply...'</span> },
+    },
+  ]);
+  <span class="kw">await</span> Notifications.<span class="fn">setNotificationCategoryAsync</span>(<span class="str">'message'</span>, [
+    {
+      identifier: <span class="str">'REPLY_ACTION'</span>,
+      buttonTitle: <span class="str">'Reply'</span>,
+      textInput: { submitButtonTitle: <span class="str">'Send'</span>, placeholder: <span class="str">'Type a reply...'</span> },
+    },
+  ]);
+  <span class="kw">await</span> Notifications.<span class="fn">setNotificationCategoryAsync</span>(<span class="str">'reaction'</span>, []);
+  <span class="kw">await</span> Notifications.<span class="fn">setNotificationCategoryAsync</span>(<span class="str">'invite'</span>, []);
+}</code></pre>
+
+    <h4>Reading data in your notification handler</h4>
+    <p>Use <code>data.conversation_id</code> for deep-linking and <code>data.event</code> to distinguish notification types:</p>
+    <pre><code><span class="kw">import</span> * <span class="kw">as</span> Notifications <span class="kw">from</span> <span class="str">'expo-notifications'</span>;
+
+Notifications.<span class="fn">addNotificationResponseReceivedListener</span>((response) => {
+  <span class="kw">const</span> { event, conversation_id, channelId } =
+    response.notification.request.content.data;
+
+  <span class="kw">if</span> (conversation_id) {
+    navigation.<span class="fn">navigate</span>(<span class="str">'Chat'</span>, { conversationId: conversation_id });
+  }
+});</code></pre>
+  </div>
 </section>
 
 <!-- ─── STEP 17.5: NOTIFICATION PREFERENCES ──────────────────────────── -->
@@ -3978,12 +4427,36 @@ applyGating();
 
 // ── What's New toggles ───────────────────────────────────────────────────
 function toggleVersion(id) {
-  document.getElementById(id).classList.toggle('open');
+  const el = document.getElementById(id);
+  const isInsideModal = !!el.closest('#version-history-modal');
+  if (isInsideModal) {
+    // Accordion: close all siblings first, then open the clicked one
+    const alreadyOpen = el.classList.contains('open');
+    document.querySelectorAll('#version-history-modal .wn-version.open').forEach(v => v.classList.remove('open'));
+    if (!alreadyOpen) el.classList.add('open');
+  } else {
+    el.classList.toggle('open');
+  }
 }
 function toggleItem(id) {
   document.getElementById(id).classList.toggle('open');
 }
 
+// ── Version history modal ─────────────────────────────────────────────────
+function openVersionHistory() {
+  const modal = document.getElementById('version-history-modal');
+  modal.classList.add('open');
+  document.body.style.overflow = 'hidden';
+}
+function closeVersionHistory() {
+  const modal = document.getElementById('version-history-modal');
+  modal.classList.remove('open');
+  document.body.style.overflow = '';
+}
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') closeVersionHistory();
+});
+
 // ── Progress bar + go-to-top FAB ─────────────────────────────────────────
 const _fab = document.getElementById('gototop');
 window.addEventListener('scroll', () => {