diff --git a/core/frontend/src/components/cloud/CloudSettingsTab.vue b/core/frontend/src/components/cloud/CloudSettingsTab.vue
new file mode 100644
index 0000000000..288c3a1db0
--- /dev/null
+++ b/core/frontend/src/components/cloud/CloudSettingsTab.vue
@@ -0,0 +1,97 @@
+<template>
+  <v-container class="text-center fill-height d-flex flex-column justify-center align-center mt-5">
+    <v-icon
+      :color="isTokenSet ? 'green' : 'yellow'"
+      size="70"
+    >
+      {{ isTokenSet ? 'mdi-weather-cloudy' : 'mdi-wrench' }}
+    </v-icon>
+    <v-card-title>
+      {{ isTokenSet ? 'Setup is complete!' : 'Lets connect your vehicle!' }}
+    </v-card-title>
+    <v-btn
+      color="primary"
+      elevation="3"
+      class="mt-4"
+      :href="isTokenSet ? blueosCloudUrl : blueosCloudVehiclesUrl"
+      target="_blank"
+      rel="noopener noreferrer"
+      @click="() => {}"
+    >
+      Go to BlueOS Cloud
+    </v-btn>
+    <v-container
+      class="d-flex align-center py-0 my-0"
+      style="height: 90px; width: auto;"
+    >
+      <v-card-subtitle
+        v-if="!settingToken"
+        class="token-link-text mt-2 pt-1 pb-1"
+        @click="$emit('toggle-token-input', true)"
+      >
+        Click here if you {{ isTokenSet ? 'want to change your token' : 'already have a token' }}
+      </v-card-subtitle>
+      <v-slide-x-reverse-transition>
+        <v-text-field
+          v-if="settingToken"
+          :value="token"
+          label="Token"
+          type="text"
+          variant="outlined"
+          @input="$emit('update:token', $event)"
+        >
+          <template #append>
+            <v-btn
+              icon
+              @click="$emit('submit-token')"
+            >
+              <v-icon
+                color="primary"
+                size="30"
+              >
+                mdi-check-circle-outline
+              </v-icon>
+            </v-btn>
+          </template>
+        </v-text-field>
+      </v-slide-x-reverse-transition>
+    </v-container>
+  </v-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'CloudSettingsTab',
+  props: {
+    isTokenSet: {
+      type: Boolean,
+      required: true,
+    },
+    settingToken: {
+      type: Boolean,
+      required: true,
+    },
+    token: {
+      type: String,
+      required: true,
+    },
+    blueosCloudUrl: {
+      type: String,
+      required: true,
+    },
+    blueosCloudVehiclesUrl: {
+      type: String,
+      required: true,
+    },
+  },
+})
+</script>
+
+<style scoped>
+.token-link-text {
+  cursor: pointer;
+  text-decoration: underline;
+}
+</style>
diff --git a/core/frontend/src/components/cloud/CloudSyncStatusTab.vue b/core/frontend/src/components/cloud/CloudSyncStatusTab.vue
new file mode 100644
index 0000000000..3dc87c7fb5
--- /dev/null
+++ b/core/frontend/src/components/cloud/CloudSyncStatusTab.vue
@@ -0,0 +1,148 @@
+<template>
+  <v-container class="cloud-status-tab pa-4">
+    <div class="mb-4">
+      <div class="text-subtitle-1 font-weight-medium">
+        {{ summaryMessage }}
+      </div>
+      <div class="text-caption text--secondary">
+        {{ activeCount }} uploading • {{ pendingCount }} waiting
+      </div>
+      <v-btn
+        class="mt-3"
+        color="primary"
+        elevation="2"
+        :href="missionsUrl"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Go to My Missions
+      </v-btn>
+    </div>
+    <section class="cloud-status-section">
+      <div class="d-flex align-center justify-space-between mb-2">
+        <span class="text-body-2 font-weight-medium">Cloud file sync</span>
+        <v-chip
+          small
+          outlined
+        >
+          {{ items.length }}
+        </v-chip>
+      </div>
+      <template v-if="items.length > 0">
+        <v-list
+          dense
+          class="py-0"
+        >
+          <v-list-item
+            v-for="item in items"
+            :key="item.id"
+            class="px-0"
+          >
+            <v-list-item-content class="pr-4">
+              <v-list-item-title class="text-body-2">
+                {{ getFileName(item.display_path || item.path) }}
+              </v-list-item-title>
+              <v-list-item-subtitle class="text-caption mb-1">
+                <template v-if="item.status === 'uploading'">
+                  {{ formatFileSize(item.sent || 0) }} / {{ formatFileSize(item.total || 0) }}
+                </template>
+                <template v-else-if="item.status === 'pending'">
+                  Waiting to upload • {{ formatFileSize(item.size) }}
+                </template>
+                <template v-else>
+                  Completed • {{ formatFileSize(item.size) }}
+                </template>
+              </v-list-item-subtitle>
+              <v-progress-linear
+                v-if="item.status === 'uploading'"
+                height="6"
+                color="primary"
+                :value="(item.progress || 0) * 100"
+              />
+            </v-list-item-content>
+            <v-list-item-action class="d-flex align-center">
+              <div v-if="item.status === 'uploading'">
+                {{ formatUploadProgress(item.progress || 0) }}
+              </div>
+              <v-progress-circular
+                v-else-if="item.status === 'pending'"
+                indeterminate
+                size="20"
+                width="2"
+                color="grey lighten-1"
+              />
+              <v-icon
+                v-else
+                color="green"
+              >
+                mdi-check-circle
+              </v-icon>
+            </v-list-item-action>
+          </v-list-item>
+        </v-list>
+      </template>
+      <div
+        v-else
+        class="cloud-status-empty"
+      >
+        No files in the queue.
+      </div>
+    </section>
+  </v-container>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+
+import { CloudSyncDisplayItem } from './types'
+
+export default Vue.extend({
+  name: 'CloudSyncStatusTab',
+  props: {
+    summaryMessage: {
+      type: String,
+      required: true,
+    },
+    items: {
+      type: Array as PropType<CloudSyncDisplayItem[]>,
+      default: () => [],
+    },
+    activeCount: {
+      type: Number,
+      required: true,
+    },
+    pendingCount: {
+      type: Number,
+      required: true,
+    },
+    getFileName: {
+      type: Function as PropType<(path: string) => string>,
+      required: true,
+    },
+    formatFileSize: {
+      type: Function as PropType<(value: number) => string>,
+      required: true,
+    },
+    formatUploadProgress: {
+      type: Function as PropType<(progress: number) => string>,
+      required: true,
+    },
+    missionsUrl: {
+      type: String,
+      required: true,
+    },
+  },
+})
+</script>
+
+<style scoped>
+.cloud-status-section + .cloud-status-section {
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  padding-top: 16px;
+}
+.cloud-status-empty {
+  font-size: 0.9rem;
+  color: rgba(255, 255, 255, 0.7);
+  padding: 12px 0;
+}
+</style>
diff --git a/core/frontend/src/components/cloud/CloudTrayMenu.vue b/core/frontend/src/components/cloud/CloudTrayMenu.vue
index a2e333aedb..5ad335be8b 100644
--- a/core/frontend/src/components/cloud/CloudTrayMenu.vue
+++ b/core/frontend/src/components/cloud/CloudTrayMenu.vue
@@ -9,20 +9,27 @@
     <template
       #activator="{ on, attrs }"
     >
-      <v-card
-        id="cloud-tray-menu-button"
-        elevation="0"
-        color="transparent"
-        v-bind="attrs"
-        v-on="on"
+      <v-badge
+        :value="pendingCount > 0"
+        :content="pendingBadgeLabel"
+        color="error"
+        overlap
       >
-        <v-icon
-          class="px-1"
-          color="white"
+        <v-card
+          id="cloud-tray-menu-button"
+          elevation="0"
+          color="transparent"
+          v-bind="attrs"
+          v-on="on"
         >
-          mdi-cloud
-        </v-icon>
-      </v-card>
+          <v-icon
+            class="px-1"
+            color="white"
+          >
+            mdi-cloud
+          </v-icon>
+        </v-card>
+      </v-badge>
     </template>
     <v-card
       elevation="1"
@@ -73,67 +80,65 @@
           elevate-on-scroll
         >
           <v-toolbar-title>Cloud</v-toolbar-title>
-          <v-spacer />
+          <v-spacer v-if="is_cloud_setup_complete" />
+          <span
+            v-if="is_cloud_setup_complete"
+            class="text-caption text--secondary"
+          >
+            {{ statusSummary }}
+          </span>
         </v-app-bar>
 
-        <v-container
-          class="text-center fill-height d-flex flex-column justify-center align-center mt-5"
-        >
-          <v-icon
-            :color="is_token_set ? 'green' : 'yellow'"
-            size="70"
-          >
-            {{ is_token_set ? 'mdi-weather-cloudy' : 'mdi-wrench' }}
-          </v-icon>
-          <v-card-title>
-            {{ is_token_set ? 'Setup is complete!' : 'Lets connect your vehicle!' }}
-          </v-card-title>
-          <v-btn
-            color="primary"
-            elevation="3"
-            class="mt-4"
-            :href="is_token_set ? blueos_cloud_url : blueos_cloud_vehicles_url"
-            target="_blank"
-            rel="noopener noreferrer"
-            @click="() => {}"
-          >
-            Go to BlueOS Cloud
-          </v-btn>
-          <v-container
-            class="d-flex align-center py-0 my-0"
-            style="height: 90px; width: auto;"
-          >
-            <v-card-subtitle
-              v-if="!setting_token"
-              class="token-link-text mt-2 pt-1 pb-1"
-              @click="setting_token = true"
+        <v-container class="px-0 py-0">
+          <template v-if="is_cloud_setup_complete">
+            <v-tabs
+              v-model="active_tab"
+              grow
+              background-color="transparent"
+              class="cloud-tray-tabs"
             >
-              Click here if you {{ is_token_set ? 'want to change your token' : 'already have a token' }}
-            </v-card-subtitle>
-            <v-slide-x-reverse-transition>
-              <v-text-field
-                v-if="setting_token"
-                v-model="token"
-                label="Token"
-                type="text"
-                variant="outlined"
-              >
-                <template #append>
-                  <v-btn
-                    icon
-                    @click="setMajorTomToken()"
-                  >
-                    <v-icon
-                      color="primary"
-                      size="30"
-                    >
-                      mdi-check-circle-outline
-                    </v-icon>
-                  </v-btn>
-                </template>
-              </v-text-field>
-            </v-slide-x-reverse-transition>
-          </v-container>
+              <v-tab>Account</v-tab>
+              <v-tab>Uploads</v-tab>
+            </v-tabs>
+            <v-tabs-items v-model="active_tab">
+              <v-tab-item>
+                <cloud-settings-tab
+                  :is-token-set="is_token_set"
+                  :setting-token="setting_token"
+                  :token="token"
+                  :blueos-cloud-url="blueos_cloud_url"
+                  :blueos-cloud-vehicles-url="blueos_cloud_vehicles_url"
+                  @toggle-token-input="setting_token = $event"
+                  @update:token="token = $event"
+                  @submit-token="setMajorTomToken"
+                />
+              </v-tab-item>
+              <v-tab-item>
+                <cloud-sync-status-tab
+                  :summary-message="statusSummary"
+                  :items="cloud_sync_items"
+                  :active-count="activeCount"
+                  :pending-count="pendingCount"
+                  :get-file-name="getFileName"
+                  :format-file-size="formatFileSize"
+                  :format-upload-progress="formatUploadProgress"
+                  :missions-url="missions_url"
+                />
+              </v-tab-item>
+            </v-tabs-items>
+          </template>
+          <template v-else>
+            <cloud-settings-tab
+              :is-token-set="is_token_set"
+              :setting-token="setting_token"
+              :token="token"
+              :blueos-cloud-url="blueos_cloud_url"
+              :blueos-cloud-vehicles-url="blueos_cloud_vehicles_url"
+              @toggle-token-input="setting_token = $event"
+              @update:token="token = $event"
+              @submit-token="setMajorTomToken"
+            />
+          </template>
         </v-container>
       </v-container>
       <v-container
@@ -167,10 +172,21 @@
 </template>
 
 <script lang="ts">
+import {
+  Config, QueryTarget, Receiver, RecvErr, ReplyError, Sample, Session, Subscriber,
+} from '@eclipse-zenoh/zenoh-ts'
 import axios from 'axios'
 import { StatusCodes } from 'http-status-codes'
 import Vue from 'vue'
 
+import CloudSettingsTab from '@/components/cloud/CloudSettingsTab.vue'
+import CloudSyncStatusTab from '@/components/cloud/CloudSyncStatusTab.vue'
+import {
+  CloudSyncDisplayItem,
+  FileSyncEntry,
+  FileSyncUploadingEvent,
+  UploadingTransfer,
+} from '@/components/cloud/types'
 import SpinningLogo from '@/components/common/SpinningLogo.vue'
 import PullProgress from '@/components/utils/PullProgress.vue'
 import filebrowser from '@/libs/filebrowser'
@@ -178,6 +194,7 @@ import bag from '@/store/bag'
 import { FilebrowserFile } from '@/types/filebrowser'
 import { InstalledExtensionData, RunningContainer } from '@/types/kraken'
 import back_axios from '@/utils/api'
+import { prettifySize } from '@/utils/helper_functions'
 import PullTracker from '@/utils/pull_tracker'
 
 const KRAKEN_API_URL = '/kraken/v1.0'
@@ -192,15 +209,23 @@ const BLUEOS_CLOUD_JOIN_URL = `${BLUEOS_CLOUD_URL}/api/agent/join/`
 
 const BLUEOS_CLOUD_VEHICLES_URL = `${BLUEOS_CLOUD_URL}/vehicle/register/`
 
+const MISSIONS_URL = `${BLUEOS_CLOUD_URL}/mission/`
+
 const MAJOR_TOM_CLOUD_TOKEN_FILE = {
   path: 'system_root/root/.majortom/token.key',
   name: 'token.key',
   extension: 'key',
 } as FilebrowserFile
 
+const MAJOR_TOM_FILE_SYNC_PENDING_TOPIC = 'services/major_tom/file_sync/pending'
+const MAJOR_TOM_FILE_SYNC_COMPLETED_TOPIC = 'services/major_tom/file_sync/completed'
+const MAJOR_TOM_FILE_SYNC_UPLOADING_TOPIC = 'services/major_tom/file_sync/uploading'
+
 export default Vue.extend({
   name: 'CloudTrayMenu',
   components: {
+    CloudSyncStatusTab,
+    CloudSettingsTab,
     SpinningLogo,
     PullProgress,
   },
@@ -210,6 +235,7 @@ export default Vue.extend({
       local_token: '',
       setting_token: false,
       menu_opened: false,
+      active_tab: 0,
       operation_in_progress: false,
       operation_description: '',
       pull_tracker: null as PullTracker | null,
@@ -219,6 +245,15 @@ export default Vue.extend({
       installed_extensions: {} as Record<string, InstalledExtensionData>,
       running_containers: [] as RunningContainer[],
       once_opened: false,
+      file_sync_session: null as Session | null,
+      file_sync_session_promise: null as Promise<Session> | null,
+      uploading_subscriber: null as Subscriber | null,
+      cloud_pending_uploads: [] as FileSyncEntry[],
+      cloud_completed_uploads: [] as FileSyncEntry[],
+      cloud_uploading_transfers: {} as Record<string, UploadingTransfer>,
+      file_sync_refresh_timeout: null as number | null,
+      uploading_idle_timeout: null as number | null,
+      file_sync_teardown_in_progress: null as Promise<void> | null,
     }
   },
   computed: {
@@ -241,28 +276,112 @@ export default Vue.extend({
     blueos_cloud_vehicles_url(): string {
       return BLUEOS_CLOUD_VEHICLES_URL
     },
+    missions_url(): string {
+      return MISSIONS_URL
+    },
     is_major_tom_ready(): boolean {
       return this.is_major_tom_installed && this.is_major_tom_running
     },
     is_tray_visible(): boolean {
       return this.is_major_tom_ready || this.once_opened
     },
+    is_cloud_setup_complete(): boolean {
+      return this.is_token_set
+    },
+    cloud_active_uploads(): UploadingTransfer[] {
+      return Object.values(this.cloud_uploading_transfers)
+        .sort((a, b) => b.timestamp - a.timestamp)
+    },
+    cloud_pending_queue(): FileSyncEntry[] {
+      return [...this.cloud_pending_uploads]
+    },
+    cloud_recent_completed(): FileSyncEntry[] {
+      return [...this.cloud_completed_uploads].slice(-5).reverse()
+    },
+    activeCount(): number {
+      return this.cloud_active_uploads.length
+    },
+    pendingCount(): number {
+      return this.cloud_pending_queue.length
+    },
+    statusSummary(): string {
+      if (this.activeCount > 0) {
+        const noun = this.activeCount === 1 ? 'file' : 'files'
+        return `Uploading ${this.activeCount} ${noun}`
+      }
+      if (this.pendingCount > 0) {
+        const noun = this.pendingCount === 1 ? 'file pending' : 'files pending'
+        return `${this.pendingCount} ${noun}`
+      }
+      return 'All caught up'
+    },
+    pendingBadgeLabel(): string {
+      if (this.pendingCount <= 0) {
+        return ''
+      }
+      return this.pendingCount > 99 ? '99+' : String(this.pendingCount)
+    },
+    cloud_sync_items(): CloudSyncDisplayItem[] {
+      const uploadingItems: CloudSyncDisplayItem[] = this.cloud_active_uploads.map(
+        (transfer) => ({
+          id: `uploading-${transfer.file}`,
+          path: transfer.file,
+          display_path: transfer.display_path,
+          size: transfer.total,
+          status: 'uploading',
+          sent: transfer.sent,
+          total: transfer.total,
+          progress: transfer.progress,
+        }),
+      )
+      const pendingItems: CloudSyncDisplayItem[] = this.cloud_pending_queue.map(
+        (entry, index) => ({
+          id: `pending-${entry.path}-${index}`,
+          path: entry.path,
+          size: entry.size,
+          status: 'pending',
+        }),
+      )
+      const completedItems: CloudSyncDisplayItem[] = this.cloud_recent_completed.map(
+        (entry, index) => ({
+          id: `completed-${entry.path}-${index}`,
+          path: entry.path,
+          size: entry.size,
+          status: 'completed',
+        }),
+      )
+
+      return [...uploadingItems, ...pendingItems, ...completedItems]
+    },
   },
   watch: {
-    menu_opened(new_value: boolean) {
+    async menu_opened(new_value: boolean) {
       if (new_value) {
         this.once_opened = true
-        this.setUpTrayMenu()
+        await this.setUpTrayMenu()
+        await this.initializeFileSyncTracking()
       } else {
+        this.active_tab = 0
         setTimeout(() => {
           this.setting_token = false
           this.token = ''
         }, 200)
       }
     },
+    async is_major_tom_ready(new_value: boolean) {
+      if (new_value) {
+        await this.initializeFileSyncTracking()
+      } else {
+        await this.teardownFileSyncTracking()
+      }
+    },
   },
   async mounted() {
     await this.setUpTrayMenu()
+    await this.initializeFileSyncTracking()
+  },
+  async beforeDestroy() {
+    await this.teardownFileSyncTracking()
   },
   methods: {
     async setUpTrayMenu() {
@@ -275,6 +394,331 @@ export default Vue.extend({
         }, 5000)
       }
     },
+    async initializeFileSyncTracking(): Promise<void> {
+      if (!this.is_major_tom_ready) {
+        return
+      }
+
+      if (this.file_sync_teardown_in_progress) {
+        try {
+          await this.file_sync_teardown_in_progress
+        } catch {
+          // Teardown errors are already logged in teardown handler.
+        }
+      }
+      const sessionReady = await this.ensureFileSyncSession()
+      if (!sessionReady) {
+        return
+      }
+
+      await this.fetchFileSyncQueues()
+      await this.ensureUploadingSubscriber()
+    },
+    async ensureFileSyncSession(): Promise<boolean> {
+      if (this.file_sync_session) {
+        return true
+      }
+
+      if (this.file_sync_session_promise) {
+        try {
+          await this.file_sync_session_promise
+          return this.file_sync_session !== null
+        } catch {
+          return false
+        }
+      }
+
+      try {
+        const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws'
+        const url = `${protocol}://${window.location.host}/zenoh-api/`
+        const config = new Config(url)
+        const sessionPromise = Session.open(config)
+        this.file_sync_session_promise = sessionPromise
+        this.file_sync_session = await sessionPromise
+        return true
+      } catch (error) {
+        console.error('[CloudTrayMenu] Failed to open Zenoh session for file sync tracking:', error)
+        return false
+      } finally {
+        this.file_sync_session_promise = null
+      }
+    },
+    async fetchFileSyncQueues(): Promise<void> {
+      try {
+        const [pending, completed] = await Promise.all([
+          this.queryFileSyncTopic(MAJOR_TOM_FILE_SYNC_PENDING_TOPIC),
+          this.queryFileSyncTopic(MAJOR_TOM_FILE_SYNC_COMPLETED_TOPIC),
+        ])
+
+        this.cloud_pending_uploads = pending ?? []
+        this.cloud_completed_uploads = completed ?? []
+      } catch (error) {
+        console.error('[CloudTrayMenu] Failed to fetch file sync queues:', error)
+      }
+    },
+    async queryFileSyncTopic(topic: string): Promise<FileSyncEntry[] | null> {
+      if (!this.file_sync_session) {
+        return null
+      }
+
+      try {
+        const receiver: void | Receiver = this.file_sync_session.get(topic, {
+          target: QueryTarget.BestMatching,
+        })
+
+        if (!(receiver instanceof Receiver)) {
+          console.warn(`[CloudTrayMenu] Query for ${topic} returned void receiver.`)
+          return null
+        }
+
+        let reply = await receiver.receive()
+        while (reply !== RecvErr.Disconnected) {
+          if (reply === RecvErr.MalformedReply) {
+            console.warn(`[CloudTrayMenu] Malformed reply while querying ${topic}.`)
+          } else {
+            const response = reply.result()
+            if (response instanceof Sample) {
+              const payload = response.payload().to_string()
+              return this.parseFileSyncQueue(payload)
+            }
+            const errorResponse: ReplyError = response
+            console.warn(`[CloudTrayMenu] Query error for ${topic}:`, errorResponse.payload().to_string())
+          }
+
+          reply = await receiver.receive()
+        }
+      } catch (error) {
+        console.error(`[CloudTrayMenu] Failed to query ${topic}:`, error)
+      }
+
+      return null
+    },
+    parseFileSyncQueue(payload: string): FileSyncEntry[] {
+      try {
+        const parsed = JSON.parse(payload)
+        if (!Array.isArray(parsed)) {
+          return []
+        }
+
+        const entries: FileSyncEntry[] = []
+        for (const item of parsed) {
+          if (Array.isArray(item) && item.length >= 2 && typeof item[0] === 'string') {
+            const [path, rawSize] = item
+            const size = typeof rawSize === 'number' ? rawSize : Number(rawSize) || 0
+            entries.push({ path, size })
+          } else if (item && typeof item === 'object') {
+            const objectEntry = item as { file?: unknown; path?: unknown; size?: unknown }
+            let candidatePath: string | undefined
+            if (typeof objectEntry.file === 'string') {
+              candidatePath = objectEntry.file
+            } else if (typeof objectEntry.path === 'string') {
+              candidatePath = objectEntry.path
+            }
+            if (candidatePath) {
+              const size = typeof objectEntry.size === 'number' ? objectEntry.size : Number(objectEntry.size) || 0
+              entries.push({ path: candidatePath, size })
+            }
+          }
+        }
+
+        return entries
+      } catch (error) {
+        console.error('[CloudTrayMenu] Failed to parse file sync payload:', error)
+        return []
+      }
+    },
+    async ensureUploadingSubscriber(): Promise<void> {
+      if (this.uploading_subscriber || !this.file_sync_session) {
+        return
+      }
+
+      try {
+        this.uploading_subscriber = await this.file_sync_session.declare_subscriber(
+          MAJOR_TOM_FILE_SYNC_UPLOADING_TOPIC,
+          {
+            handler: (sample: Sample) => {
+              this.handleUploadingSample(sample)
+            },
+            history: true,
+          },
+        )
+      } catch (error) {
+        console.error('[CloudTrayMenu] Failed to subscribe to file upload updates:', error)
+      }
+    },
+    handleUploadingSample(sample: Sample): void {
+      try {
+        const payload = sample.payload().to_string()
+        const event = JSON.parse(payload) as FileSyncUploadingEvent
+        const transfer = this.normalizeUploadingEvent(event)
+        if (!transfer) {
+          return
+        }
+
+        this.resetUploadingIdleWatchdog()
+
+        if (!transfer.completed) {
+          this.$set(this.cloud_uploading_transfers, transfer.file, transfer)
+        } else {
+          this.$delete(this.cloud_uploading_transfers, transfer.file)
+        }
+
+        this.removeFromPendingQueue(transfer.file)
+
+        if (transfer.completed) {
+          this.scheduleFileSyncRefresh()
+        }
+      } catch (error) {
+        console.error('[CloudTrayMenu] Failed to process uploading sample:', error)
+      }
+    },
+    normalizeUploadingEvent(event: FileSyncUploadingEvent): UploadingTransfer | null {
+      const rawFile = typeof event.file === 'string' ? event.file : null
+      if (!rawFile) {
+        return null
+      }
+
+      function toNumber(value: unknown): number {
+        if (typeof value === 'number' && Number.isFinite(value)) {
+          return value
+        }
+        const parsed = Number(value)
+        return Number.isFinite(parsed) ? parsed : 0
+      }
+
+      const normalizedFile = this.normalizeFilePath(rawFile)
+      const sent = toNumber(event.sent)
+      const total = toNumber(event.total)
+      const timestamp = toNumber(event.timestamp) || Date.now() / 1000
+      const progress = total > 0 ? Math.min(Math.max(sent / total, 0), 1) : 0
+
+      return {
+        file: normalizedFile,
+        display_path: rawFile,
+        sent,
+        total,
+        timestamp,
+        progress,
+        completed: total > 0 && sent >= total,
+      }
+    },
+    async teardownFileSyncTracking(): Promise<void> {
+      if (this.file_sync_teardown_in_progress) {
+        try {
+          await this.file_sync_teardown_in_progress
+        } catch {
+          // Errors already handled in teardown promise.
+        }
+        return
+      }
+
+      const teardownPromise = (async () => {
+        this.clearScheduledFileSyncRefresh()
+        this.clearUploadingIdleWatchdog()
+
+        try {
+          if (this.uploading_subscriber) {
+            await this.uploading_subscriber.undeclare()
+          }
+        } catch (error) {
+          console.warn('[CloudTrayMenu] Failed to undeclare uploading subscriber:', error)
+        } finally {
+          this.uploading_subscriber = null
+        }
+
+        try {
+          if (this.file_sync_session) {
+            await this.file_sync_session.close()
+          }
+        } catch (error) {
+          console.warn('[CloudTrayMenu] Failed to close file sync session:', error)
+        } finally {
+          this.file_sync_session = null
+          this.file_sync_session_promise = null
+        }
+
+        this.cloud_pending_uploads = []
+        this.cloud_completed_uploads = []
+        this.cloud_uploading_transfers = {}
+      })()
+
+      this.file_sync_teardown_in_progress = teardownPromise
+
+      try {
+        await teardownPromise
+      } finally {
+        this.file_sync_teardown_in_progress = null
+      }
+    },
+    normalizeFilePath(path: string): string {
+      if (!path) {
+        return ''
+      }
+      if (path.startsWith('/host/')) {
+        return path.substring(5)
+      }
+      if (path === '/host') {
+        return '/'
+      }
+      return path
+    },
+    pathsReferSameFile(pathA: string, pathB: string): boolean {
+      return this.normalizeFilePath(pathA) === this.normalizeFilePath(pathB)
+    },
+    removeFromPendingQueue(canonicalPath: string): void {
+      if (!canonicalPath) {
+        return
+      }
+      this.cloud_pending_uploads = this.cloud_pending_uploads.filter(
+        (entry) => !this.pathsReferSameFile(entry.path, canonicalPath),
+      )
+    },
+    scheduleFileSyncRefresh(delay = 1500): void {
+      this.clearScheduledFileSyncRefresh()
+      this.file_sync_refresh_timeout = window.setTimeout(async () => {
+        this.file_sync_refresh_timeout = null
+        await this.fetchFileSyncQueues()
+      }, delay)
+    },
+    clearScheduledFileSyncRefresh(): void {
+      if (this.file_sync_refresh_timeout !== null) {
+        clearTimeout(this.file_sync_refresh_timeout)
+        this.file_sync_refresh_timeout = null
+      }
+    },
+    resetUploadingIdleWatchdog(timeoutSeconds = 60): void {
+      this.clearUploadingIdleWatchdog()
+      this.uploading_idle_timeout = window.setTimeout(() => {
+        this.uploading_idle_timeout = null
+        this.fetchFileSyncQueues()
+      }, timeoutSeconds * 1000)
+    },
+    clearUploadingIdleWatchdog(): void {
+      if (this.uploading_idle_timeout !== null) {
+        clearTimeout(this.uploading_idle_timeout)
+        this.uploading_idle_timeout = null
+      }
+    },
+    getFileName(path: string): string {
+      if (!path) {
+        return ''
+      }
+      const parts = path.split(/[/\\]/)
+      return parts[parts.length - 1] || path
+    },
+    formatFileSize(value: number): string {
+      if (!Number.isFinite(value)) {
+        return 'N/A'
+      }
+      const size_kb = Math.max(value, 0) / 1024
+      return prettifySize(size_kb)
+    },
+    formatUploadProgress(progress: number): string {
+      if (!Number.isFinite(progress)) {
+        return '0%'
+      }
+      return `${Math.round(progress * 100)}%`
+    },
     startOperation(message: string): void {
       this.operation_description = message
       this.operation_error_title = null
@@ -480,8 +924,7 @@ export default Vue.extend({
 </script>
 
 <style scoped>
-.token-link-text {
-  cursor: pointer;
-  text-decoration: underline;
+.cloud-tray-tabs {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }
 </style>
diff --git a/core/frontend/src/components/cloud/types.ts b/core/frontend/src/components/cloud/types.ts
new file mode 100644
index 0000000000..4965b1a289
--- /dev/null
+++ b/core/frontend/src/components/cloud/types.ts
@@ -0,0 +1,34 @@
+export interface FileSyncEntry {
+  path: string
+  size: number
+}
+
+export interface UploadingTransfer {
+  file: string
+  display_path: string
+  sent: number
+  total: number
+  timestamp: number
+  progress: number
+  completed: boolean
+}
+
+export type CloudSyncItemStatus = 'uploading' | 'pending' | 'completed'
+
+export interface CloudSyncDisplayItem {
+  id: string
+  path: string
+  size: number
+  status: CloudSyncItemStatus
+  display_path?: string
+  sent?: number
+  total?: number
+  progress?: number
+}
+
+export interface FileSyncUploadingEvent {
+  file?: unknown
+  sent?: unknown
+  total?: unknown
+  timestamp?: unknown
+}