@silicaclaw/cli 2026.3.20-2 → 2026.3.20-21

package/apps/local-console/public/app/app.js

@@ -27,6 +27,7 @@ if (!root) {
   throw new Error("Missing root element: app-root");
 }
 root.innerHTML = appTemplate;
+const APP_UPDATE_SESSION_KEY = 'silicaclaw_pending_updated_version';
 
       const i18n = createI18n(TRANSLATIONS);
       const DEFAULT_LOCALE = i18n.DEFAULT_LOCALE;
@@ -51,13 +52,15 @@ root.innerHTML = appTemplate;
           summary.setAttribute('data-i18n-closed-label', t('labels.show'));
           summary.setAttribute('data-i18n-open-label', t('labels.hide'));
         });
-        setText('.sidebar-nav__label', t('common.control'));
+        setText('.nav-section__label', t('common.control'));
         setText('[data-tab="overview"] .tab-title', t('pageMeta.overview.title'));
         setText('[data-tab="overview"] .tab-copy', t('labels.overviewTabCopy'));
         setText('[data-tab="agent"] .tab-title', t('pageMeta.agent.title'));
         setText('[data-tab="agent"] .tab-copy', t('labels.agentTabCopy'));
         setText('[data-tab="chat"] .tab-title', t('pageMeta.chat.title'));
         setText('[data-tab="chat"] .tab-copy', t('labels.chatTabCopy'));
+        setText('[data-tab="private"] .tab-title', t('pageMeta.private.title'));
+        setText('[data-tab="private"] .tab-copy', t('labels.privateTabCopy'));
         setText('[data-tab="skills"] .tab-title', t('pageMeta.skills.title'));
         setText('[data-tab="skills"] .tab-copy', t('labels.skillsTabCopy'));
         setText('[data-tab="profile"] .tab-title', t('pageMeta.profile.title'));
@@ -70,6 +73,10 @@ root.innerHTML = appTemplate;
         document.getElementById('sidebarToggleBtn').setAttribute('aria-label', t('labels.collapseSidebar'));
         document.querySelector('.sidebar-version').title = t('common.version');
         setText('.sidebar-version__label', t('common.version'));
+        document.getElementById('brandUpdateHint').textContent = t('labels.versionChecking');
+        document.getElementById('brandRelayHint').textContent = t('labels.relayQueuesHealthy');
+        document.getElementById('brandCheckUpdateBtn').textContent = t('actions.checkUpdate');
+        document.getElementById('brandUpdateBtn').textContent = t('actions.updateNow');
         document.getElementById('integrationStatusBar').textContent = t('social.barStatus', {
           connected: '-',
           mode: '-',
@@ -103,22 +110,38 @@ root.innerHTML = appTemplate;
         document.getElementById('chatBannerBody').textContent = t('hints.chatBannerBody');
         document.getElementById('chatBannerFeedLabel').textContent = t('hints.chatBannerFeed');
         document.getElementById('chatComposerTitle').textContent = t('actions.sendPublicMessage');
+        document.getElementById('privateBannerEyebrow').textContent = t('pageMeta.private.title');
+        document.getElementById('privateBannerTitle').textContent = t('pageMeta.private.body');
+        document.getElementById('privateBannerBody').textContent = t('pageMeta.private.body');
+        document.getElementById('privateBannerStateLabel').textContent = t('labels.state');
+        document.getElementById('privateConversationsTitle').textContent = t('pageMeta.private.title');
+        document.getElementById('privateComposerTitle').textContent = t('actions.sendPrivateMessage');
+        document.getElementById('privateTargetLabel').textContent = t('labels.target');
+        document.getElementById('privateTargetIdLabel').textContent = t('social.agentId');
+        document.getElementById('privateMessageSendBtn').textContent = t('actions.sendPrivateMessage');
+        document.getElementById('privateRefreshBtn').textContent = t('actions.refreshPrivate');
         document.getElementById('chatFeedHint').textContent = t('hints.chatFeedHint');
         document.getElementById('overviewGuideTitle').textContent = t('overview.guideTitle');
         document.getElementById('overviewGuideBody').textContent = t('overview.guideBody');
+        document.getElementById('overviewGuideStatus').textContent = t('overview.guideNeedSetup');
         document.getElementById('overviewStepProfileEyebrow').textContent = t('overview.stepLabel', { step: '1' });
         document.getElementById('overviewStepProfileTitle').textContent = t('overview.stepProfileTitle');
         document.getElementById('overviewStepProfileBody').textContent = t('overview.stepProfileBody');
+        document.getElementById('overviewStepProfileStatus').textContent = t('overview.stepIncomplete');
         document.getElementById('overviewStepProfileBtn').textContent = t('actions.editProfile');
         document.getElementById('overviewStepPublicEyebrow').textContent = t('overview.stepLabel', { step: '2' });
         document.getElementById('overviewStepPublicTitle').textContent = t('overview.stepPublicTitle');
         document.getElementById('overviewStepPublicBody').textContent = t('overview.stepPublicBody');
+        document.getElementById('overviewStepPublicStatus').textContent = t('overview.stepIncomplete');
         document.getElementById('overviewStepPublicBtn').textContent = t('actions.editProfile');
         document.getElementById('overviewStepBroadcastEyebrow').textContent = t('overview.stepLabel', { step: '3' });
         document.getElementById('overviewStepBroadcastTitle').textContent = t('overview.stepBroadcastTitle');
         document.getElementById('overviewStepBroadcastBody').textContent = t('overview.stepBroadcastBody');
+        document.getElementById('overviewStepBroadcastStatus').textContent = t('overview.stepWaiting');
         document.getElementById('overviewStepBroadcastBtn').textContent = t('actions.broadcastNow');
         document.getElementById('homeMissionEyebrow').textContent = t('hints.homeMissionEyebrow');
+        document.getElementById('homeMissionTitle').textContent = t('hints.homeMissionTitle');
+        document.getElementById('homeMissionBody').textContent = t('hints.homeMissionBody');
         document.getElementById('homeBriefTitle').textContent = t('hints.homeBriefTitle');
         document.getElementById('homeOpenAgentBtn').textContent = t('actions.openAgent');
         document.getElementById('homeOpenSocialBtn').textContent = t('pageMeta.social.title');
@@ -156,7 +179,7 @@ root.innerHTML = appTemplate;
         setText('#view-profile .profile-meta h4', t('labels.publicCard'), 0);
         setText('#view-profile .profile-meta h4', t('labels.publishStatus'), 1);
         setText('#view-profile .profile-meta h4', t('labels.publicProfilePreview'), 2);
-        setText('#view-profile .profile-meta .field-hint', t('hints.signedPublicProfileHint'));
+        setText('#view-profile .profile-meta .field-hint', t('hints.signedPublicProfileHint'), 1);
         setText('#view-network .section-header__eyebrow', t('labels.networkEyebrow'));
         document.getElementById('networkBannerTitle').textContent = t('hints.networkBannerTitle');
         document.getElementById('networkBannerBody').textContent = t('hints.networkBannerBody');
@@ -190,6 +213,7 @@ root.innerHTML = appTemplate;
         document.getElementById('skillsBannerTitle').textContent = t('hints.skillsBannerTitle');
         document.getElementById('skillsBannerBody').textContent = t('hints.skillsBannerBody');
         document.getElementById('skillsBannerRuntimeLabel').textContent = t('hints.skillsBannerRuntime');
+        document.getElementById('skillsBannerRuntimeValue').textContent = t('hints.skillsRuntimeChecking');
         document.getElementById('skillsActionEyebrow').textContent = t('labels.skillsRecommendedAction');
         document.getElementById('skillsActionTitle').textContent = t('hints.skillsActionInstallTitle');
         document.getElementById('skillsActionBody').textContent = t('hints.skillsActionInstallBody');
@@ -200,6 +224,16 @@ root.innerHTML = appTemplate;
         document.getElementById('skillsJumpBundled').textContent = t('labels.skillsBundled');
         document.getElementById('skillsJumpInstalled').textContent = t('labels.skillsInstalled');
         document.getElementById('skillsJumpDialogue').textContent = t('labels.skillsDialogue');
+        document.getElementById('skillsSearchLabel').textContent = t('labels.skillsSearch');
+        document.getElementById('skillsSearchInput').placeholder = t('placeholders.skillsSearch');
+        document.getElementById('skillsFilterAll').textContent = t('labels.skillsFilterAll');
+        document.getElementById('skillsFilterAttention').textContent = t('labels.skillsFilterAttention');
+        document.getElementById('skillsFilterUpdates').textContent = t('labels.skillsFilterUpdates');
+        document.getElementById('skillsFilterInstalled').textContent = t('labels.skillsFilterInstalled');
+        document.getElementById('skillsFilterMeta').textContent = t('hints.skillsFilterMeta', {
+          count: '0',
+          filter: t('labels.skillsFilterAll'),
+        });
         document.getElementById('skillsFeaturedTitle').textContent = t('labels.skillsFeatured');
         document.getElementById('skillsFeaturedHint').textContent = t('hints.skillsFeaturedHint');
         document.getElementById('skillsBundledTitle').textContent = t('labels.skillsBundled');
@@ -219,6 +253,7 @@ root.innerHTML = appTemplate;
         document.getElementById('socialSkillLearningTitle').textContent = t('labels.openclawSkillLearning');
         document.getElementById('socialMessagePathTitle').textContent = t('labels.messagePath');
         document.getElementById('socialMessagePathHint').textContent = t('hints.socialMessagePathHint');
+        document.getElementById('socialOwnerDeliveryStatus').textContent = t('hints.checkingOwnerDelivery');
         document.getElementById('socialGovernanceTitle').textContent = t('labels.messageGovernance');
         document.getElementById('socialModerationTitle').textContent = t('labels.recentModeration');
         document.getElementById('socialAdvancedSummary').textContent = t('labels.advancedNetworkDetails');
@@ -240,6 +275,10 @@ root.innerHTML = appTemplate;
         setText('.hero-meta-item .label', t('labels.room'), 3);
         document.getElementById('publicDiscoveryHint').innerHTML = t('hints.publicDiscoverySwitch');
         document.getElementById('clearDiscoveryCacheBtn').textContent = t('actions.clearDiscoveryCache');
+        document.getElementById('overviewModeHint').textContent = t('overview.modeCurrentSource', {
+          mode: '-',
+          hint: t('overview.modeCacheHint'),
+        });
         document.getElementById('socialMessageTitle').textContent = t('overview.messageTitle');
         document.getElementById('socialMessageMeta').textContent = t('overview.messageMetaInitial');
         document.getElementById('socialMessageHint').textContent = t('overview.messageHint');
@@ -262,6 +301,7 @@ root.innerHTML = appTemplate;
         document.querySelector('label[for="governanceBlockedTermsInput"]').textContent = t('labels.blockedTerms');
         document.getElementById('startBroadcastBtn').textContent = t('actions.startBroadcast');
         document.getElementById('stopBroadcastBtn').textContent = t('actions.stopBroadcast');
+        document.getElementById('broadcastNowBtn').textContent = t('actions.broadcastNow');
         document.getElementById('quickGlobalPreviewBtn').textContent = t('actions.enablePreview');
         document.getElementById('refreshLogsBtn').textContent = t('actions.refreshLogs');
         document.getElementById('socialExportBtn').textContent = t('actions.exportTemplate');
@@ -296,6 +336,246 @@ root.innerHTML = appTemplate;
         toast,
         writeUiCache,
       } = shell;
+      let appUpdatePollTimer = null;
+      let appUpdateCheckInFlight = false;
+      let appUpdatePendingTargetVersion = '';
+      let relayQueueCheckInFlight = false;
+      let lastRelayQueueCheckAt = 0;
+
+      function setAppUpdateUi({
+        hint,
+        buttonVisible = false,
+        buttonDisabled = false,
+        buttonText = t('actions.updateNow'),
+        checkVisible = false,
+        checkDisabled = false,
+      }) {
+        const hintEl = document.getElementById('brandUpdateHint');
+        const buttonEl = document.getElementById('brandUpdateBtn');
+        const checkEl = document.getElementById('brandCheckUpdateBtn');
+        if (hintEl) {
+          hintEl.textContent = hint;
+          hintEl.classList.toggle('hidden', !hint);
+        }
+        if (checkEl) {
+          checkEl.textContent = t('actions.checkUpdate');
+          checkEl.classList.toggle('hidden', !checkVisible);
+          checkEl.disabled = checkDisabled;
+        }
+        if (buttonEl) {
+          buttonEl.textContent = buttonText;
+          buttonEl.classList.toggle('hidden', !buttonVisible);
+          buttonEl.disabled = buttonDisabled;
+        }
+      }
+
+      function platformUpdateHint(platform) {
+        if (platform === 'darwin') return t('labels.versionPlatformMac');
+        if (platform === 'linux') return t('labels.versionPlatformLinux');
+        return t('labels.versionPlatformOther');
+      }
+
+      function setRelayQueueUi({ hint = '', tone = 'ok', visible = false }) {
+        const hintEl = document.getElementById('brandRelayHint');
+        if (!hintEl) return;
+        hintEl.textContent = hint;
+        hintEl.classList.toggle('hidden', !visible || !hint);
+        hintEl.classList.remove('warn', 'danger');
+        if (tone === 'warn' || tone === 'danger') {
+          hintEl.classList.add(tone);
+        }
+      }
+
+      async function refreshRelayQueueStatus({ force = false } = {}) {
+        const now = Date.now();
+        if (relayQueueCheckInFlight) return null;
+        if (!force && now - lastRelayQueueCheckAt < 15_000) return null;
+        relayQueueCheckInFlight = true;
+        try {
+          const result = await api('/api/peers');
+          const peers = result.data || {};
+          const peerItems = Array.isArray(peers.items) ? peers.items : [];
+          const relayQueueMax = peerItems.reduce((max, peer) => Math.max(max, Number(peer?.meta?.relay_queue_size || 0)), 0);
+          const signalQueueMax = peerItems.reduce((max, peer) => Math.max(max, Number(peer?.meta?.signal_queue_size || 0)), 0);
+          const queueMax = Math.max(relayQueueMax, signalQueueMax);
+          if (queueMax >= 100) {
+            setRelayQueueUi({ hint: t('labels.relayQueuesHigh'), tone: 'danger', visible: true });
+          } else if (queueMax >= 20) {
+            setRelayQueueUi({ hint: t('labels.relayQueuesWatch'), tone: 'warn', visible: true });
+          } else {
+            setRelayQueueUi({ hint: t('labels.relayQueuesHealthy'), tone: 'ok', visible: true });
+          }
+          lastRelayQueueCheckAt = now;
+          return { relayQueueMax, signalQueueMax };
+        } catch (_error) {
+          return null;
+        } finally {
+          relayQueueCheckInFlight = false;
+        }
+      }
+
+      async function refreshAppUpdateStatus({ silent = false } = {}) {
+        if (appUpdateCheckInFlight) return null;
+        appUpdateCheckInFlight = true;
+        try {
+          const result = await api('/api/app/update-status');
+          const status = result.data || {};
+          const currentVersion = String(status.current_version || '').trim();
+          const latestVersion = String(status.latest_version || '').trim();
+          const platformHint = platformUpdateHint(String(status.platform || ''));
+          const pendingTarget = String(appUpdatePendingTargetVersion || '').trim();
+          if (currentVersion) {
+            document.getElementById('brandVersion').textContent = currentVersion.startsWith('v') ? currentVersion : `v${currentVersion}`;
+          }
+          if (pendingTarget && currentVersion && currentVersion === pendingTarget) {
+            appUpdatePendingTargetVersion = '';
+            setAppUpdateUi({
+              hint: t('labels.versionUpdated', { version: currentVersion.startsWith('v') ? currentVersion : `v${currentVersion}` }),
+              buttonVisible: false,
+              buttonDisabled: false,
+              buttonText: t('actions.updateNow'),
+              checkVisible: true,
+              checkDisabled: false,
+            });
+            return status;
+          }
+          if (pendingTarget) {
+            setAppUpdateUi({
+              hint: t('labels.versionUpdatingTo', { version: pendingTarget.startsWith('v') ? pendingTarget : `v${pendingTarget}` }),
+              buttonVisible: true,
+              buttonDisabled: true,
+              buttonText: t('labels.versionUpdating'),
+              checkVisible: true,
+              checkDisabled: true,
+            });
+            return status;
+          }
+          if (status.update_available && status.latest_version) {
+            setAppUpdateUi({
+              hint: `${t('labels.versionUpdateReady', { version: `v${status.latest_version}` })} · ${platformHint}`,
+              buttonVisible: true,
+              buttonDisabled: false,
+              buttonText: t('actions.updateNowVersion', { version: latestVersion.startsWith('v') ? latestVersion : `v${latestVersion}` }),
+              checkVisible: true,
+              checkDisabled: false,
+            });
+          } else if (status.check_error) {
+            setAppUpdateUi({
+              hint: t('labels.versionCheckFailed'),
+              buttonVisible: false,
+              buttonDisabled: false,
+              buttonText: t('actions.updateNow'),
+              checkVisible: true,
+              checkDisabled: false,
+            });
+            if (!silent) {
+              setFeedback('networkFeedback', t('feedback.appUpdateCheckFailed'), 'warn');
+            }
+          } else {
+            setAppUpdateUi({
+              hint: `${t('labels.versionCurrent')} · ${platformHint}`,
+              buttonVisible: false,
+              buttonDisabled: false,
+              buttonText: t('actions.updateNow'),
+              checkVisible: true,
+              checkDisabled: false,
+            });
+          }
+          return status;
+        } catch (_error) {
+          setAppUpdateUi({
+            hint: t('labels.versionCheckFailed'),
+            buttonVisible: false,
+            buttonDisabled: false,
+            buttonText: t('actions.updateNow'),
+            checkVisible: true,
+            checkDisabled: false,
+          });
+          if (!silent) {
+            setFeedback('networkFeedback', t('feedback.appUpdateCheckFailed'), 'warn');
+          }
+          return null;
+        } finally {
+          appUpdateCheckInFlight = false;
+        }
+      }
+
+      function startAppUpdatePolling(targetVersion) {
+        if (appUpdatePollTimer) {
+          window.clearInterval(appUpdatePollTimer);
+        }
+        appUpdatePendingTargetVersion = String(targetVersion || '').trim();
+        let attempts = 0;
+        appUpdatePollTimer = window.setInterval(async () => {
+          attempts += 1;
+          const status = await refreshAppUpdateStatus({ silent: true });
+          if (status && !status.update_available && String(status.current_version || '') === String(targetVersion || '')) {
+            window.clearInterval(appUpdatePollTimer);
+            appUpdatePollTimer = null;
+            appUpdatePendingTargetVersion = '';
+            if (targetVersion) {
+              window.sessionStorage.setItem(APP_UPDATE_SESSION_KEY, String(targetVersion));
+            }
+            window.location.reload();
+            return;
+          }
+          if (attempts >= 24) {
+            window.clearInterval(appUpdatePollTimer);
+            appUpdatePollTimer = null;
+            appUpdatePendingTargetVersion = '';
+            setAppUpdateUi({
+              hint: t('labels.versionUpdateStillPending'),
+              buttonVisible: true,
+              buttonDisabled: false,
+              buttonText: t('actions.updateRetry'),
+              checkVisible: true,
+              checkDisabled: false,
+            });
+          }
+        }, 5000);
+      }
+
+      async function triggerAppUpdate() {
+        const buttonEl = document.getElementById('brandUpdateBtn');
+        setAppUpdateUi({
+          hint: t('labels.versionUpdating'),
+          buttonVisible: true,
+          buttonDisabled: true,
+          buttonText: t('labels.versionUpdating'),
+          checkVisible: true,
+          checkDisabled: true,
+        });
+        try {
+          const result = await api('/api/app/update', { method: 'POST' });
+          const data = result.data || {};
+          if (!data.started) {
+            appUpdatePendingTargetVersion = '';
+            setAppUpdateUi({
+              hint: t('labels.versionCurrent'),
+              buttonVisible: false,
+              buttonDisabled: false,
+              buttonText: t('actions.updateNow'),
+              checkVisible: true,
+              checkDisabled: false,
+            });
+            toast(t('feedback.appUpdateLatest'));
+            return;
+          }
+          toast(t('feedback.appUpdateStarted'));
+          startAppUpdatePolling(String(data.target_version || ''));
+        } catch (error) {
+          appUpdatePendingTargetVersion = '';
+          setAppUpdateUi({
+            hint: t('labels.versionCheckFailed'),
+            buttonVisible: true,
+            buttonDisabled: false,
+            buttonText: t('actions.updateRetry'),
+            checkVisible: true,
+            checkDisabled: false,
+          });
+          setFeedback('networkFeedback', error instanceof Error ? error.message : t('feedback.appUpdateFailed'), 'error');
+        }
+      }
       setLocale(currentLocale);
       applyStaticTranslations();
 
@@ -309,6 +589,11 @@ root.innerHTML = appTemplate;
       let visibleRemotePublicCount = 0;
       let socialMessageFilter = 'all';
       let socialMessageGovernance = null;
+      let privateState = null;
+      let privateConversations = [];
+      let privateMessages = [];
+      let privateTarget = null;
+      let selectedPrivateConversationId = '';
       let overviewMode = 'lan';
       let onlyShowOnline = false;
       let agentsPage = 1;
@@ -392,7 +677,7 @@ root.innerHTML = appTemplate;
         }
         activeTab = tab;
         document.querySelectorAll('.tab').forEach((b) => b.classList.toggle('active', b.dataset.tab === tab));
-        ['overview', 'agent', 'chat', 'skills', 'profile', 'network', 'social'].forEach((k) => {
+        ['overview', 'agent', 'chat', 'private', 'skills', 'profile', 'network', 'social'].forEach((k) => {
           document.getElementById(`view-${k}`).classList.toggle('active', k === tab);
         });
         const meta = pageMeta[tab] || pageMeta.overview;
@@ -404,6 +689,25 @@ root.innerHTML = appTemplate;
         document.getElementById('publicDiscoveryHint')?.classList.toggle('hidden', tab !== 'overview');
         if (tab === 'profile' && !profileController.isDirty() && !profileController.isSaving()) {
           refreshProfile().catch(() => {});
+        } else if (tab === 'overview') {
+          refreshOverview().catch(() => {});
+          refreshMessages().catch(() => {});
+        } else if (tab === 'agent') {
+          refreshOverview().catch(() => {});
+        } else if (tab === 'chat') {
+          refreshMessages().catch(() => {});
+        } else if (tab === 'private') {
+          refreshPrivate().catch(() => {});
+        } else if (tab === 'skills') {
+          refreshSkills().catch(() => {});
+        } else if (tab === 'network') {
+          refreshNetwork().catch(() => {});
+          refreshPeers().catch(() => {});
+          refreshDiscovery().catch(() => {});
+          refreshLogs().catch(() => {});
+        } else if (tab === 'social') {
+          refreshSocial().catch(() => {});
+          refreshMessages().catch(() => {});
         }
       }
 
@@ -417,6 +721,81 @@ root.innerHTML = appTemplate;
         });
       }
 
+      function renderPrivate() {
+        const privateDeliveryLabel = (status) => {
+          if (status === 'direct-sent') return 'Direct';
+          if (status === 'fallback-sent') return 'Fallback';
+          if (status === 'received') return 'Received';
+          if (status === 'read') return 'Read';
+          return 'Sent';
+        };
+        document.getElementById('privateStateMeta').textContent = privateState?.enabled
+          ? `${privateConversations.length} conversation(s)`
+          : 'Private messaging unavailable';
+        document.getElementById('privateTargetName').value = privateTarget?.display_name || '';
+        document.getElementById('privateTargetAgentId').value = privateTarget?.agent_id || '';
+        document.getElementById('privateConversationList').innerHTML = privateConversations.length
+          ? privateConversations.map((item) => `
+              <button class="agent-card" type="button" data-private-conversation="${escapeHtml(item.conversation_id)}">
+                <div class="agent-card__avatar-fallback">${escapeHtml(((item.peer_display_name || item.peer_agent_id || '?')[0] || '?').toUpperCase())}</div>
+                <div class="agent-card__main">
+                  <div class="agent-card__row">
+                    <div class="agent-card__name">${escapeHtml(item.peer_display_name || item.peer_agent_id || 'Unknown')}</div>
+                    <div class="agent-card__id mono">${escapeHtml(shortId(item.peer_agent_id || ''))}</div>
+                  </div>
+                </div>
+              </button>
+            `).join('')
+          : `<div class="empty-state">No private conversations yet.</div>`;
+        document.getElementById('privateMessageList').innerHTML = privateMessages.length
+          ? privateMessages.map((item) => `
+              <div class="log-item">
+                <div style="display:flex; align-items:center; justify-content:space-between; gap:12px;">
+                  <div>
+                    <strong>${item.is_self ? 'Me' : escapeHtml(privateTarget?.display_name || item.from_agent_id || 'Unknown')}</strong>
+                    <span class="tag-chip" style="margin-left:8px;">${escapeHtml(privateDeliveryLabel(item.delivery_status))}</span>
+                  </div>
+                  <div class="mono" style="color:#90a2c3;">${new Date(item.created_at).toLocaleString()}</div>
+                </div>
+                <div style="margin-top:8px; line-height:1.6;">${formatMessageBody(item.body || '')}</div>
+              </div>
+            `).join('')
+          : `<div class="empty-state">No private messages yet.</div>`;
+      }
+
+      async function refreshPrivate() {
+        const [stateRes, conversationsRes] = await Promise.all([
+          api('/api/private/state'),
+          api('/api/private/conversations'),
+        ]);
+        privateState = stateRes.data || null;
+        privateConversations = Array.isArray(conversationsRes.data) ? conversationsRes.data : [];
+        if ((!privateTarget || privateTarget.agent_id === privateState?.agent_id) && privateConversations[0]) {
+          const first = privateConversations[0];
+          privateTarget = {
+            agent_id: first.peer_agent_id,
+            display_name: first.peer_display_name,
+            private_encryption_public_key: first.peer_public_key,
+          };
+          selectedPrivateConversationId = first.conversation_id;
+        }
+        const selectedConversation = privateConversations.find((item) => item.conversation_id === selectedPrivateConversationId);
+        if (selectedConversation) {
+          privateTarget = {
+            agent_id: selectedConversation.peer_agent_id,
+            display_name: selectedConversation.peer_display_name,
+            private_encryption_public_key: selectedConversation.peer_public_key,
+          };
+        }
+        if (selectedPrivateConversationId) {
+          const messageRes = await api(`/api/private/messages?conversation_id=${encodeURIComponent(selectedPrivateConversationId)}&limit=100`);
+          privateMessages = Array.isArray(messageRes.data) ? messageRes.data : [];
+        } else {
+          privateMessages = [];
+        }
+        renderPrivate();
+      }
+
       const renderSocialMessages = socialController.renderSocialMessages;
       const refreshMessages = socialController.refreshMessages;
 
@@ -430,14 +809,25 @@ root.innerHTML = appTemplate;
       const renderLogs = socialController.renderLogs;
       const refreshLogs = socialController.refreshLogs;
       const refreshSkills = socialController.refreshSkills;
+      let autoRefreshInFlight = false;
 
-      async function refreshAll() {
-        const tasks = [refreshOverview(), refreshNetwork(), refreshSocial(), refreshSkills(), refreshPublicProfilePreview(), refreshMessages()];
-        if (activeTab === 'network') {
-          tasks.push(refreshPeers(), refreshDiscovery(), refreshLogs());
-        }
-        const shouldRefreshProfile = !(activeTab === 'profile' && profileController.isDirty());
-        if (shouldRefreshProfile) {
+      async function refreshActiveView() {
+        const tasks = [refreshPublicProfilePreview(), refreshRelayQueueStatus()];
+        if (activeTab === 'overview') {
+          tasks.push(refreshOverview(), refreshMessages());
+        } else if (activeTab === 'agent') {
+          tasks.push(refreshOverview());
+        } else if (activeTab === 'chat') {
+          tasks.push(refreshMessages());
+        } else if (activeTab === 'private') {
+          tasks.push(refreshPrivate());
+        } else if (activeTab === 'skills') {
+          tasks.push(refreshSkills());
+        } else if (activeTab === 'network') {
+          tasks.push(refreshNetwork(), refreshPeers(), refreshDiscovery(), refreshLogs());
+        } else if (activeTab === 'social') {
+          tasks.push(refreshSocial(), refreshMessages());
+        } else if (activeTab === 'profile' && !profileController.isDirty() && !profileController.isSaving()) {
           tasks.push(refreshProfile());
         }
         const results = await Promise.allSettled(tasks);
@@ -447,6 +837,22 @@ root.innerHTML = appTemplate;
         }
       }
 
+      async function refreshAuto() {
+        if (document.hidden || autoRefreshInFlight) {
+          return;
+        }
+        autoRefreshInFlight = true;
+        try {
+          await refreshActiveView();
+        } finally {
+          autoRefreshInFlight = false;
+        }
+      }
+
+      async function refreshAll() {
+        await refreshActiveView();
+      }
+
       bindAppEvents({
         api,
         applyTheme,
@@ -486,8 +892,93 @@ root.innerHTML = appTemplate;
         toPrettyJson,
       });
 
+      document.getElementById('agentsWrap').addEventListener('click', (event) => {
+        const button = event.target?.closest?.('[data-private-agent]');
+        if (!button) return;
+        privateTarget = {
+          agent_id: String(button.getAttribute('data-private-agent') || ''),
+          display_name: String(button.getAttribute('data-private-name') || ''),
+          private_encryption_public_key: String(button.getAttribute('data-private-key') || ''),
+        };
+        selectedPrivateConversationId = [privateState?.agent_id || '', privateTarget.agent_id].sort().join(':');
+        switchTab('private');
+      });
+
+      document.getElementById('privateConversationList').addEventListener('click', async (event) => {
+        const button = event.target?.closest?.('[data-private-conversation]');
+        if (!button) return;
+        selectedPrivateConversationId = String(button.getAttribute('data-private-conversation') || '');
+        const selectedConversation = privateConversations.find((item) => item.conversation_id === selectedPrivateConversationId);
+        if (selectedConversation) {
+          privateTarget = {
+            agent_id: selectedConversation.peer_agent_id,
+            display_name: selectedConversation.peer_display_name,
+            private_encryption_public_key: selectedConversation.peer_public_key,
+          };
+        }
+        await refreshPrivate();
+      });
+
+      document.getElementById('privateRefreshBtn').addEventListener('click', async () => {
+        await refreshPrivate();
+      });
+
+      document.getElementById('privateMessageSendBtn').addEventListener('click', async () => {
+        const body = String(document.getElementById('privateMessageInput').value || '').trim();
+        if (!privateTarget?.agent_id || !privateTarget?.private_encryption_public_key) {
+          setFeedback('privateFeedback', 'Pick an agent with private messaging support first.', 'warn');
+          return;
+        }
+        if (privateTarget.agent_id === privateState?.agent_id) {
+          setFeedback('privateFeedback', 'Private messages must target another agent.', 'warn');
+          return;
+        }
+        if (!body) {
+          setFeedback('privateFeedback', t('feedback.messageEmpty'), 'warn');
+          return;
+        }
+        setFeedback('privateFeedback', 'Sending private message...');
+        try {
+          const result = await api('/api/private/messages/send', {
+            method: 'POST',
+            body: JSON.stringify({
+              to_agent_id: privateTarget.agent_id,
+              recipient_encryption_public_key: privateTarget.private_encryption_public_key,
+              body,
+            }),
+          });
+          document.getElementById('privateMessageInput').value = '';
+          setFeedback('privateFeedback', result.meta?.message || 'Private message sent.');
+          await refreshPrivate();
+        } catch (error) {
+          setFeedback('privateFeedback', error instanceof Error ? error.message : 'Private message failed.', 'error');
+        }
+      });
+
       applyTheme(localStorage.getItem('silicaclaw_theme_mode') || 'dark');
       hydrateCachedShell();
+      document.getElementById('brandUpdateBtn').addEventListener('click', () => {
+        triggerAppUpdate().catch(() => {});
+      });
+      document.getElementById('brandCheckUpdateBtn').addEventListener('click', () => {
+        refreshAppUpdateStatus().catch(() => {});
+      });
       refreshAll();
+      refreshAppUpdateStatus({ silent: true }).catch(() => {});
+      const updatedVersion = window.sessionStorage.getItem(APP_UPDATE_SESSION_KEY);
+      if (updatedVersion) {
+        window.sessionStorage.removeItem(APP_UPDATE_SESSION_KEY);
+        toast(t('feedback.appUpdatedTo', { version: updatedVersion.startsWith('v') ? updatedVersion : `v${updatedVersion}` }));
+      }
       exportSocialTemplate().catch(() => {});
-      setInterval(refreshAll, 4000);
+      document.addEventListener('visibilitychange', () => {
+        if (!document.hidden) {
+          refreshAuto().catch(() => {});
+          refreshAppUpdateStatus({ silent: true }).catch(() => {});
+          refreshRelayQueueStatus({ force: true }).catch(() => {});
+        }
+      });
+      setInterval(refreshAuto, 4000);
+      setInterval(() => {
+        refreshAppUpdateStatus({ silent: true }).catch(() => {});
+      }, 15 * 60 * 1000);