feat(web): show sandbox TTL countdown in system status dialog

Display remaining time before each sandbox is cleaned up, calculated
from (session_ttl_sec - elapsed since last_used_at). Shows amber text
when under 60 seconds remaining. TTL is sourced from the Box runtime
status API. Includes i18n for all 8 supported languages.

Author: RockChinQ

web/src/app/home/monitoring/components/overview-cards/SystemStatusCards.tsx

@@ -9,6 +9,7 @@ import {
   Info,
   Container,
   Clock,
+  Timer,
   Cpu,
   HardDrive,
   Network,
@@ -348,6 +349,39 @@ export default function SystemStatusCard({
                                 </span>
                               </span>
                             </div>
+                            {boxStatus?.session_ttl_sec != null &&
+                              boxStatus.session_ttl_sec > 0 &&
+                              (() => {
+                                const elapsed =
+                                  (Date.now() -
+                                    new Date(session.last_used_at).getTime()) /
+                                  1000;
+                                const remaining = Math.max(
+                                  0,
+                                  boxStatus.session_ttl_sec! - elapsed,
+                                );
+                                const mins = Math.floor(remaining / 60);
+                                const secs = Math.floor(remaining % 60);
+                                return (
+                                  <div className="flex items-center gap-1.5 text-muted-foreground col-span-2">
+                                    <Timer className="w-3 h-3 flex-shrink-0" />
+                                    <span>
+                                      {t('monitoring.boxSessionTTL')}:{' '}
+                                      <span
+                                        className={
+                                          remaining <= 60
+                                            ? 'text-amber-600 font-medium'
+                                            : 'text-foreground'
+                                        }
+                                      >
+                                        {remaining <= 0
+                                          ? t('monitoring.boxSessionExpiring')
+                                          : `${mins}m ${secs.toString().padStart(2, '0')}s`}
+                                      </span>
+                                    </span>
+                                  </div>
+                                );
+                              })()}
                           </div>
                         </div>
                       ))}

web/src/i18n/locales/en-US.ts

@@ -1248,6 +1248,8 @@ const enUS = {
     boxSandboxes: 'Sandboxes',
     boxSessionCreated: 'Created',
     boxSessionLastUsed: 'Last used',
+    boxSessionTTL: 'Expires in',
+    boxSessionExpiring: 'Expiring soon',
   },
   limitation: {
     maxBotsReached:

web/src/i18n/locales/es-ES.ts

@@ -1273,6 +1273,8 @@ const esES = {
     boxSandboxes: 'Sandboxes',
     boxSessionCreated: 'Creado',
     boxSessionLastUsed: 'Último uso',
+    boxSessionTTL: 'Expira en',
+    boxSessionExpiring: 'Expirando pronto',
   },
   limitation: {
     maxBotsReached:

web/src/i18n/locales/ja-JP.ts

@@ -1245,6 +1245,8 @@
     boxSandboxes: 'サンドボックス',
     boxSessionCreated: '作成日時',
     boxSessionLastUsed: '最終使用',
+    boxSessionTTL: '残り時間',
+    boxSessionExpiring: 'まもなく期限切れ',
   },
   limitation: {
     maxBotsReached:

web/src/i18n/locales/ru-RU.ts

@@ -1247,6 +1247,8 @@ const ruRU = {
     boxSandboxes: 'Песочницы',
     boxSessionCreated: 'Создано',
     boxSessionLastUsed: 'Последнее использование',
+    boxSessionTTL: 'Истекает через',
+    boxSessionExpiring: 'Скоро истекает',
   },
   limitation: {
     maxBotsReached:

web/src/i18n/locales/th-TH.ts

@@ -1220,6 +1220,8 @@ const thTH = {
     boxSandboxes: 'แซนด์บ็อกซ์',
     boxSessionCreated: 'สร้างเมื่อ',
     boxSessionLastUsed: 'ใช้ล่าสุด',
+    boxSessionTTL: 'หมดอายุใน',
+    boxSessionExpiring: 'ใกล้หมดอายุ',
   },
   limitation: {
     maxBotsReached:

web/src/i18n/locales/vi-VN.ts

@@ -1241,6 +1241,8 @@ const viVN = {
     boxSandboxes: 'Sandbox',
     boxSessionCreated: 'Đã tạo',
     boxSessionLastUsed: 'Lần cuối sử dụng',
+    boxSessionTTL: 'Hết hạn sau',
+    boxSessionExpiring: 'Sắp hết hạn',
   },
   limitation: {
     maxBotsReached:

web/src/i18n/locales/zh-Hans.ts

@@ -1194,6 +1194,8 @@ const zhHans = {
     boxSandboxes: '沙箱数',
     boxSessionCreated: '创建时间',
     boxSessionLastUsed: '最后使用',
+    boxSessionTTL: '剩余时间',
+    boxSessionExpiring: '即将过期',
   },
   limitation: {
     maxBotsReached:

web/src/i18n/locales/zh-Hant.ts

@@ -1186,6 +1186,8 @@ const zhHant = {
     boxSandboxes: '沙箱數',
     boxSessionCreated: '建立時間',
     boxSessionLastUsed: '最後使用',
+    boxSessionTTL: '剩餘時間',
+    boxSessionExpiring: '即將過期',
   },
   limitation: {
     maxBotsReached: