Polish message info metadata

src/chrome/src/message-info.js

@@ -1,6 +1,7 @@
 function formatSentTime(createdAt, locale) {
   const value = Number(createdAt);
   if (!Number.isFinite(value) || value <= 0) return '';
+  const date = new Date(value);
   try {
     return new Intl.DateTimeFormat(locale || undefined, {
       year: 'numeric',
@@ -9,11 +10,15 @@ function formatSentTime(createdAt, locale) {
       hour: '2-digit',
       minute: '2-digit',
       hour12: false,
-      timeZone: 'UTC',
       timeZoneName: 'short',
-    }).format(new Date(value));
+    }).format(date);
   } catch {
-    return new Date(value).toISOString().replace('T', ' ').slice(0, 16) + ' UTC';
+    const pad = (part) => String(part).padStart(2, '0');
+    const offsetMinutes = -date.getTimezoneOffset();
+    const offset = offsetMinutes === 0
+      ? 'UTC'
+      : `UTC${offsetMinutes > 0 ? '+' : '-'}${pad(Math.floor(Math.abs(offsetMinutes) / 60))}:${pad(Math.abs(offsetMinutes) % 60)}`;
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}, ${pad(date.getHours())}:${pad(date.getMinutes())} ${offset}`;
   }
 }
 

src/chrome/src/ui/locales/ar.js

@@ -5,7 +5,7 @@ import { getApocalypseModeCopy } from './apocalypse-copy.mjs';
 import { getEmergencyBoxCopy } from './emergency-copy.mjs';
 
 export default {
-  'sp.message_info.sent': '(sent {time})',
+  'sp.message_info.sent': 'sent {time}',
   'sp.message_info.speed': '{rate} tok/sec',
   'sp.message_info.tokens': '{count} tokens',
   'sp.message_info.duration': '{seconds}s',

src/chrome/src/ui/locales/bn.js

@@ -3,7 +3,7 @@ import { getApocalypseModeCopy } from './apocalypse-copy.mjs';
 import { getEmergencyBoxCopy } from './emergency-copy.mjs';
 
 export default {
-  'sp.message_info.sent': '(sent {time})',
+  'sp.message_info.sent': 'sent {time}',
   'sp.message_info.speed': '{rate} tok/sec',
   'sp.message_info.tokens': '{count} tokens',
   'sp.message_info.duration': '{seconds}s',

src/chrome/src/ui/locales/de.js

@@ -5,7 +5,7 @@ import { getApocalypseModeCopy } from './apocalypse-copy.mjs';
 import { getEmergencyBoxCopy } from './emergency-copy.mjs';
 
 export default {
-  'sp.message_info.sent': '(sent {time})',
+  'sp.message_info.sent': 'sent {time}',
   'sp.message_info.speed': '{rate} tok/sec',
   'sp.message_info.tokens': '{count} tokens',
   'sp.message_info.duration': '{seconds}s',

src/chrome/src/ui/locales/en.js

@@ -3,7 +3,7 @@ import apocalypseModeCopy from './apocalypse-copy.mjs';
 import emergencyCopy from './emergency-copy.mjs';
 
 export default {
-  'sp.message_info.sent': '(sent {time})',
+  'sp.message_info.sent': 'sent {time}',
   'sp.message_info.speed': '{rate} tok/sec',
   'sp.message_info.tokens': '{count} tokens',
   'sp.message_info.duration': '{seconds}s',

src/chrome/src/ui/locales/es.js

@@ -5,7 +5,7 @@ import { getApocalypseModeCopy } from './apocalypse-copy.mjs';
 import { getEmergencyBoxCopy } from './emergency-copy.mjs';
 
 export default {
-  'sp.message_info.sent': '(sent {time})',
+  'sp.message_info.sent': 'sent {time}',
   'sp.message_info.speed': '{rate} tok/sec',
   'sp.message_info.tokens': '{count} tokens',
   'sp.message_info.duration': '{seconds}s',

src/chrome/src/ui/locales/fa.js

@@ -3,7 +3,7 @@ import { getApocalypseModeCopy } from './apocalypse-copy.mjs';
 import { getEmergencyBoxCopy } from './emergency-copy.mjs';
 
 export default {
-  'sp.message_info.sent': '(sent {time})',
+  'sp.message_info.sent': 'sent {time}',
   'sp.message_info.speed': '{rate} tok/sec',
   'sp.message_info.tokens': '{count} tokens',
   'sp.message_info.duration': '{seconds}s',

src/chrome/src/ui/locales/fr.js

@@ -5,7 +5,7 @@ import { getApocalypseModeCopy } from './apocalypse-copy.mjs';
 import { getEmergencyBoxCopy } from './emergency-copy.mjs';
 
 export default {
-  'sp.message_info.sent': '(sent {time})',
+  'sp.message_info.sent': 'sent {time}',
   'sp.message_info.speed': '{rate} tok/sec',
   'sp.message_info.tokens': '{count} tokens',
   'sp.message_info.duration': '{seconds}s',

src/chrome/src/ui/locales/he.js

@@ -5,7 +5,7 @@ import { getApocalypseModeCopy } from './apocalypse-copy.mjs';
 import { getEmergencyBoxCopy } from './emergency-copy.mjs';
 
 export default {
-  'sp.message_info.sent': '(sent {time})',
+  'sp.message_info.sent': 'sent {time}',
   'sp.message_info.speed': '{rate} tok/sec',
   'sp.message_info.tokens': '{count} tokens',
   'sp.message_info.duration': '{seconds}s',

src/chrome/src/ui/locales/hi.js

@@ -3,7 +3,7 @@ import { getApocalypseModeCopy } from './apocalypse-copy.mjs';
 import { getEmergencyBoxCopy } from './emergency-copy.mjs';
 
 export default {
-  'sp.message_info.sent': '(sent {time})',
+  'sp.message_info.sent': 'sent {time}',
   'sp.message_info.speed': '{rate} tok/sec',
   'sp.message_info.tokens': '{count} tokens',
   'sp.message_info.duration': '{seconds}s',

src/chrome/src/ui/locales/id.js

@@ -5,7 +5,7 @@ import { getApocalypseModeCopy } from './apocalypse-copy.mjs';
 import { getEmergencyBoxCopy } from './emergency-copy.mjs';
 
 export default {
-  'sp.message_info.sent': '(sent {time})',
+  'sp.message_info.sent': 'sent {time}',
   'sp.message_info.speed': '{rate} tok/sec',
   'sp.message_info.tokens': '{count} tokens',
   'sp.message_info.duration': '{seconds}s',

src/chrome/src/ui/locales/ja.js

@@ -5,7 +5,7 @@ import { getApocalypseModeCopy } from './apocalypse-copy.mjs';
 import { getEmergencyBoxCopy } from './emergency-copy.mjs';
 
 export default {
-  'sp.message_info.sent': '(sent {time})',
+  'sp.message_info.sent': 'sent {time}',
   'sp.message_info.speed': '{rate} tok/sec',
   'sp.message_info.tokens': '{count} tokens',
   'sp.message_info.duration': '{seconds}s',

src/chrome/src/ui/locales/ko.js

@@ -5,7 +5,7 @@ import { getApocalypseModeCopy } from './apocalypse-copy.mjs';
 import { getEmergencyBoxCopy } from './emergency-copy.mjs';
 
 export default {
-  'sp.message_info.sent': '(sent {time})',
+  'sp.message_info.sent': 'sent {time}',
   'sp.message_info.speed': '{rate} tok/sec',
   'sp.message_info.tokens': '{count} tokens',
   'sp.message_info.duration': '{seconds}s',

src/chrome/src/ui/locales/ms.js

@@ -5,7 +5,7 @@ import { getApocalypseModeCopy } from './apocalypse-copy.mjs';
 import { getEmergencyBoxCopy } from './emergency-copy.mjs';
 
 export default {
-  'sp.message_info.sent': '(sent {time})',
+  'sp.message_info.sent': 'sent {time}',
   'sp.message_info.speed': '{rate} tok/sec',
   'sp.message_info.tokens': '{count} tokens',
   'sp.message_info.duration': '{seconds}s',

src/chrome/src/ui/locales/nl.js

@@ -5,7 +5,7 @@ import { getApocalypseModeCopy } from './apocalypse-copy.mjs';
 import { getEmergencyBoxCopy } from './emergency-copy.mjs';
 
 export default {
-  'sp.message_info.sent': '(sent {time})',
+  'sp.message_info.sent': 'sent {time}',
   'sp.message_info.speed': '{rate} tok/sec',
   'sp.message_info.tokens': '{count} tokens',
   'sp.message_info.duration': '{seconds}s',

src/chrome/src/ui/locales/pl.js

@@ -5,7 +5,7 @@ import { getApocalypseModeCopy } from './apocalypse-copy.mjs';
 import { getEmergencyBoxCopy } from './emergency-copy.mjs';
 
 export default {
-  'sp.message_info.sent': '(sent {time})',
+  'sp.message_info.sent': 'sent {time}',
   'sp.message_info.speed': '{rate} tok/sec',
   'sp.message_info.tokens': '{count} tokens',
   'sp.message_info.duration': '{seconds}s',

src/chrome/src/ui/locales/pt.js

@@ -3,7 +3,7 @@ import { getApocalypseModeCopy } from './apocalypse-copy.mjs';
 import { getEmergencyBoxCopy } from './emergency-copy.mjs';
 
 export default {
-  'sp.message_info.sent': '(sent {time})',
+  'sp.message_info.sent': 'sent {time}',
   'sp.message_info.speed': '{rate} tok/sec',
   'sp.message_info.tokens': '{count} tokens',
   'sp.message_info.duration': '{seconds}s',

src/chrome/src/ui/locales/ru.js

@@ -5,7 +5,7 @@ import { getApocalypseModeCopy } from './apocalypse-copy.mjs';
 import { getEmergencyBoxCopy } from './emergency-copy.mjs';
 
 export default {
-  'sp.message_info.sent': '(sent {time})',
+  'sp.message_info.sent': 'sent {time}',
   'sp.message_info.speed': '{rate} tok/sec',
   'sp.message_info.tokens': '{count} tokens',
   'sp.message_info.duration': '{seconds}s',

src/chrome/src/ui/locales/th.js

@@ -5,7 +5,7 @@ import { getApocalypseModeCopy } from './apocalypse-copy.mjs';
 import { getEmergencyBoxCopy } from './emergency-copy.mjs';
 
 export default {
-  'sp.message_info.sent': '(sent {time})',
+  'sp.message_info.sent': 'sent {time}',
   'sp.message_info.speed': '{rate} tok/sec',
   'sp.message_info.tokens': '{count} tokens',
   'sp.message_info.duration': '{seconds}s',

src/chrome/src/ui/locales/tl.js

@@ -5,7 +5,7 @@ import { getApocalypseModeCopy } from './apocalypse-copy.mjs';
 import { getEmergencyBoxCopy } from './emergency-copy.mjs';
 
 export default {
-  'sp.message_info.sent': '(sent {time})',
+  'sp.message_info.sent': 'sent {time}',
   'sp.message_info.speed': '{rate} tok/sec',
   'sp.message_info.tokens': '{count} tokens',
   'sp.message_info.duration': '{seconds}s',

src/chrome/src/ui/locales/tr.js

@@ -5,7 +5,7 @@ import { getApocalypseModeCopy } from './apocalypse-copy.mjs';
 import { getEmergencyBoxCopy } from './emergency-copy.mjs';
 
 export default {
-  'sp.message_info.sent': '(sent {time})',
+  'sp.message_info.sent': 'sent {time}',
   'sp.message_info.speed': '{rate} tok/sec',
   'sp.message_info.tokens': '{count} tokens',
   'sp.message_info.duration': '{seconds}s',

src/chrome/src/ui/locales/uk.js

@@ -5,7 +5,7 @@ import { getApocalypseModeCopy } from './apocalypse-copy.mjs';
 import { getEmergencyBoxCopy } from './emergency-copy.mjs';
 
 export default {
-  'sp.message_info.sent': '(sent {time})',
+  'sp.message_info.sent': 'sent {time}',
   'sp.message_info.speed': '{rate} tok/sec',
   'sp.message_info.tokens': '{count} tokens',
   'sp.message_info.duration': '{seconds}s',

src/chrome/src/ui/locales/vi.js

@@ -3,7 +3,7 @@ import { getApocalypseModeCopy } from './apocalypse-copy.mjs';
 import { getEmergencyBoxCopy } from './emergency-copy.mjs';
 
 export default {
-  'sp.message_info.sent': '(sent {time})',
+  'sp.message_info.sent': 'sent {time}',
   'sp.message_info.speed': '{rate} tok/sec',
   'sp.message_info.tokens': '{count} tokens',
   'sp.message_info.duration': '{seconds}s',

src/chrome/src/ui/locales/zh.js

@@ -5,7 +5,7 @@ import { getApocalypseModeCopy } from './apocalypse-copy.mjs';
 import { getEmergencyBoxCopy } from './emergency-copy.mjs';
 
 export default {
-  'sp.message_info.sent': '(sent {time})',
+  'sp.message_info.sent': 'sent {time}',
   'sp.message_info.speed': '{rate} tok/sec',
   'sp.message_info.tokens': '{count} tokens',
   'sp.message_info.duration': '{seconds}s',

src/chrome/src/ui/sidepanel.js

@@ -10546,12 +10546,25 @@ function messageCompletionFromElement(msgEl) {
 let messageInfoRowId = 0;
 
 function ensureMessageInfoElements(msgEl) {
-  let row = msgEl.querySelector(':scope > .message-info');
+  let bar = msgEl.querySelector(':scope > .message-info-bar');
+  let row = bar?.querySelector(':scope > .message-info')
+    || msgEl.querySelector(':scope > .message-info');
+  let toggle = msgEl.querySelector(':scope > .message-info-toggle')
+    || bar?.querySelector(':scope > .message-info-toggle');
+  if (!bar) {
+    bar = document.createElement('div');
+    bar.className = 'message-info-bar';
+    const legacyControl = toggle || row;
+    if (legacyControl) msgEl.insertBefore(bar, legacyControl);
+    else msgEl.appendChild(bar);
+  }
   if (!row) {
     row = document.createElement('div');
     row.className = 'message-info';
     row.setAttribute('role', 'status');
-    msgEl.appendChild(row);
+  }
+  if (row.parentNode !== bar) {
+    bar.appendChild(row);
   }
   if (!row.id) {
     let id;
@@ -10560,13 +10573,14 @@ function ensureMessageInfoElements(msgEl) {
     } while (document.getElementById(id));
     row.id = id;
   }
-  let toggle = msgEl.querySelector(':scope > .message-info-toggle');
   if (!toggle) {
     toggle = document.createElement('button');
     toggle.type = 'button';
     toggle.className = 'message-info-toggle';
-    toggle.textContent = 'ⓘ';
-    msgEl.insertBefore(toggle, row);
+  }
+  toggle.textContent = '';
+  if (toggle.parentNode !== msgEl) {
+    msgEl.insertBefore(toggle, msgEl.children[0] || null);
   }
   toggle.setAttribute('aria-controls', row.id);
   toggle.setAttribute('aria-expanded', String(msgEl.classList.contains('message-info-open')));

src/chrome/styles/sidepanel.css

@@ -1396,6 +1396,7 @@ body {
 
 /* Messages */
 .message {
+  position: relative;
   display: flex;
   flex-direction: column;
   max-width: 95%;
@@ -1495,31 +1496,44 @@ body {
   border-bottom-left-radius: 4px;
 }
 
-.message-info-toggle {
-  align-self: flex-start;
-  width: 22px;
-  height: 22px;
-  margin: 3px 3px 0;
-  padding: 0;
-  border: 0;
-  border-radius: 50%;
-  background: transparent;
-  color: var(--text-secondary);
-  cursor: pointer;
-  font-size: 14px;
-  line-height: 22px;
-  opacity: 0.72;
+.message-info-bar {
+  position: absolute;
+  inset-block-start: 100%;
+  inset-inline-start: 0;
+  display: none;
+  align-items: center;
+  width: max-content;
+  max-width: calc(100vw - 24px);
+  min-width: 0;
+  margin-top: 3px;
 }
 
-.message.user .message-info-toggle {
-  align-self: flex-end;
+.message.message-info-open {
+  margin-bottom: 25px;
 }
 
-.message-info-toggle:hover,
-.message-info-toggle:focus-visible {
-  background: var(--overlay-bg);
-  color: var(--text-primary);
-  opacity: 1;
+.message.message-info-open > .message-info-bar {
+  display: flex;
+}
+
+.message.user .message-info-bar {
+  inset-inline-start: auto;
+  inset-inline-end: 0;
+}
+
+.message-info-toggle {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius);
+  appearance: none;
+  background: transparent;
+  pointer-events: none;
 }
 
 .message-info-toggle:focus-visible {
@@ -1529,19 +1543,22 @@ body {
 
 .message-info {
   display: flex;
-  flex-wrap: wrap;
+  flex: 0 1 auto;
+  flex-wrap: nowrap;
   align-items: center;
   gap: 6px;
-  margin-top: 5px;
+  min-width: 0;
+  margin: 0;
   padding: 0 4px;
+  overflow: hidden;
+  white-space: nowrap;
   color: var(--text-secondary);
   font-size: 10px;
   font-variant-numeric: tabular-nums;
   line-height: 1.35;
 }
 
 .message.user .message-info {
-  align-self: flex-end;
   justify-content: flex-end;
 }