chore: merge upstream/master and resolve conflicts

Author: norulers

.github/workflows/ci.yml

@@ -8,6 +8,12 @@ on:
   # Run every 6 days to help us stay on our toes
   - cron: '0 0 */6 * *'
 
+env:
+  # Raise Node's V8 old-space limit so `vite build` doesn't OOM.
+  # The bundle sits near the default ~2 GB cap on every platform and
+  # intermittently crashes (seen most often on macos-15 arm64).
+  NODE_OPTIONS: --max-old-space-size=6144
+
 jobs:
   test:
     name: Test

.github/workflows/claude-pr-review.yml

@@ -49,8 +49,9 @@ jobs:
           REPO: ${{ github.repository }}
         with:
           anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
+          model: "claude-opus-4-6"
           max_turns: "40"
-          allowed_tools: "Bash(gh:*),Bash(jq:*),Bash(wc:*),Bash(cat:*),Bash(head:*),Bash(tail:*),View,GlobTool,GrepTool,BatchTool"
+          allowed_tools: "Bash(gh:*),Bash(jq:*),Bash(wc:*),Bash(cat:*),Bash(head:*),Bash(tail:*),View,GlobTool,GrepTool,BatchTool,Write"
           system_prompt: |
             You are an automated code review agent running inside a GitHub Actions workflow for the `bluerobotics/cockpit` repository.
 

package.json

@@ -66,6 +66,7 @@
     "jest-diff": "^29.7.0",
     "ky": "^1.2.0",
     "leaflet": "1.9.3",
+    "leaflet-edgebuffer": "^1.0.7",
     "leaflet.offline": "^3.1.0",
     "localforage": "^1.10.0",
     "mathjs": "^13.0.3",

src/components/CameraReplacementDialog.vue

@@ -359,8 +359,17 @@ watch(
   [stabilizationDone, orphanedWidgetStreams, unusedAvailableStreams],
   () => {
     if (!stabilizationDone.value) return
+
+    const hasOrphans = orphanedWidgetStreams.value.length > 0
+    const hasReplacements = unusedAvailableStreams.value.length > 0
+
+    if (!hasOrphans || !hasReplacements) {
+      if (showDialog.value) showDialog.value = false
+      dialogTriggered.value = false
+      return
+    }
+
     if (dialogTriggered.value) return
-    if (orphanedWidgetStreams.value.length === 0 || unusedAvailableStreams.value.length === 0) return
 
     dialogTriggered.value = true
     initReplacementMap()

src/components/ExternalFeaturesDiscoveryModal.vue

@@ -1,18 +1,23 @@
 <template>
-  <GlassModal :is-visible="isVisible" position="center">
+  <GlassModal :is-visible="isVisible" position="center" no-close-on-outside-click @outside-click="requestCloseModal">
     <div class="features-modal p-4 max-w-[95vw]">
       <div class="flex justify-center items-center mb-2">
         <h2 class="text-xl font-semibold">{{ $t('components.ExternalFeaturesDiscoveryModal.title') }}</h2>
       </div>
       <div class="fixed top-1 right-1">
-        <v-btn icon="mdi-close" size="small" variant="text" class="text-lg" @click="closeModal"></v-btn>
+        <v-btn icon="mdi-close" size="small" variant="text" class="text-lg" @click="requestCloseModal"></v-btn>
       </div>
 
       <v-tabs v-model="activeTab" class="mb-4">
-        <v-tab value="actions">{{ $t('components.ExternalFeaturesDiscoveryModal.actionsTab') }}</v-tab>
-        <v-tab value="joystick-suggestions">{{
-          $t('components.ExternalFeaturesDiscoveryModal.joystickMappingsTab')
-        }}</v-tab>
+        <v-tab value="actions" :class="{ 'tab-blink': activeTab !== 'actions' && hasPendingActions }">
+          {{ $t('components.ExternalFeaturesDiscoveryModal.actionsTab') }}
+        </v-tab>
+        <v-tab
+          value="joystick-suggestions"
+          :class="{ 'tab-blink': activeTab !== 'joystick-suggestions' && hasPendingJoystickSuggestions }"
+        >
+          {{ $t('components.ExternalFeaturesDiscoveryModal.joystickMappingsTab') }}
+        </v-tab>
       </v-tabs>
 
       <v-tabs-window v-model="activeTab">
@@ -29,6 +34,11 @@
               </p>
             </div>
 
+            <div v-else-if="filteredActions.length === 0" class="text-center py-6">
+              <v-icon size="40" class="mb-2 opacity-50">mdi-check-circle-outline</v-icon>
+              <p class="opacity-70 max-w-[70%] mx-auto">No new actions — all extension actions have been reviewed.</p>
+            </div>
+
             <!-- New Actions -->
             <div v-if="filteredActions.length > 0" class="mb-4">
               <div class="flex items-center gap-2 mb-2">
@@ -232,6 +242,13 @@
           </div>
 
           <div v-else class="actions-container">
+            <div v-if="filteredJoystickSuggestionsByExtension.length === 0" class="text-center py-6">
+              <v-icon size="40" class="mb-2 opacity-50">mdi-check-circle-outline</v-icon>
+              <p class="opacity-70 max-w-[70%] mx-auto">
+                No new suggestions — all joystick mapping suggestions have been reviewed.
+              </p>
+            </div>
+
             <!-- New Suggestions Section -->
             <div v-if="filteredJoystickSuggestionsByExtension.length > 0" class="mb-8">
               <div class="flex items-center gap-2 mb-4">
@@ -763,6 +780,70 @@
           </v-card-actions>
         </v-card>
       </v-dialog>
+
+      <!-- Close Confirmation Dialog -->
+      <v-dialog v-model="closeConfirmationDialog" max-width="500px">
+        <v-card class="rounded-lg" :style="interfaceStore.globalGlassMenuStyles">
+          <v-card-title class="text-center pt-4 pb-0">
+            <div class="flex items-center justify-center gap-2">
+              <v-icon color="warning" size="24">mdi-alert</v-icon>
+              <h2 class="text-xl font-semibold">Pending Extension Features</h2>
+            </div>
+          </v-card-title>
+          <v-btn
+            icon="mdi-close"
+            size="small"
+            variant="text"
+            class="absolute top-2 right-2 text-lg"
+            @click="closeConfirmationDialog = false"
+          ></v-btn>
+
+          <v-card-text class="px-6 pb-4">
+            <p class="text-center text-sm text-gray-300 mb-4">
+              There are still extension features pending your decision. Please accept or ignore each suggestion from
+              your BlueOS extensions. Otherwise, this dialog will open automatically again the next time you start
+              Cockpit.
+            </p>
+
+            <div class="max-h-[260px] overflow-y-auto pr-1 space-y-3">
+              <div v-if="filteredActions.length > 0">
+                <div class="flex items-center gap-2 mb-1">
+                  <v-icon size="16">mdi-lightning-bolt-outline</v-icon>
+                  <h3 class="text-sm font-semibold">Pending actions ({{ filteredActions.length }})</h3>
+                </div>
+                <ul class="list-disc list-inside text-xs text-gray-300 space-y-0.5">
+                  <li v-for="action in filteredActions" :key="action.id">
+                    {{ action.name }} <span class="opacity-60">— from {{ action.extensionName }}</span>
+                  </li>
+                </ul>
+              </div>
+
+              <div v-if="pendingJoystickSuggestions.length > 0">
+                <div class="flex items-center gap-2 mb-1">
+                  <v-icon size="16">mdi-gamepad-variant-outline</v-icon>
+                  <h3 class="text-sm font-semibold">
+                    Pending joystick mappings ({{ pendingJoystickSuggestions.length }})
+                  </h3>
+                </div>
+                <ul class="list-disc list-inside text-xs text-gray-300 space-y-0.5">
+                  <li v-for="item in pendingJoystickSuggestions" :key="item.id">
+                    {{ item.actionName }} <span class="opacity-60">— from {{ item.extensionName }}</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </v-card-text>
+
+          <div class="flex justify-center w-full px-6 pb-2">
+            <v-divider style="border-color: #ffffff14"></v-divider>
+          </div>
+
+          <v-card-actions class="px-6 pb-4 justify-space-between">
+            <v-btn variant="text" @click="confirmCloseModal">Close anyway</v-btn>
+            <v-btn @click="closeConfirmationDialog = false">Keep reviewing</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
     </div>
   </GlassModal>
 </template>
@@ -1166,11 +1247,35 @@ const ignoredJoystickSuggestionsByExtension = computed(() => {
     .filter((ext) => ext.suggestionGroups.length > 0)
 })
 
+/**
+ * Whether there are new actions pending user action
+ */
+const hasPendingActions = computed(() => filteredActions.value.length > 0)
+
+/**
+ * Whether there are new joystick suggestions pending user action
+ */
+const hasPendingJoystickSuggestions = computed(() => filteredJoystickSuggestionsByExtension.value.length > 0)
+
 /**
  * Whether there are new extension features that still need user action
  */
 const hasPendingBlueOSFeatures = computed(() => {
-  return filteredActions.value.length > 0 || filteredJoystickSuggestionsByExtension.value.length > 0
+  return hasPendingActions.value || hasPendingJoystickSuggestions.value
+})
+
+/**
+ * Flat list of pending joystick suggestions with their extension names
+ */
+const pendingJoystickSuggestions = computed((): JoystickSuggestionWithExtensionName[] => {
+  return filteredJoystickSuggestionsByExtension.value.flatMap((ext) =>
+    ext.suggestionGroups.flatMap((group) =>
+      group.buttonMappingSuggestions.map((suggestion) => ({
+        ...suggestion,
+        extensionName: ext.extensionName,
+      }))
+    )
+  )
 })
 
 /**
@@ -1508,6 +1613,11 @@ const restoreIgnoredSuggestion = (suggestion: JoystickMapSuggestion): void => {
   })
 }
 
+/**
+ * Controls visibility of the close confirmation dialog
+ */
+const closeConfirmationDialog = ref(false)
+
 /**
  * Close the modal
  */
@@ -1516,6 +1626,25 @@ const closeModal = (): void => {
   emit('close')
 }
 
+/**
+ * Request to close the modal. If there are still pending items to decide upon, ask the user to confirm first.
+ */
+const requestCloseModal = (): void => {
+  if (hasPendingBlueOSFeatures.value) {
+    closeConfirmationDialog.value = true
+    return
+  }
+  closeModal()
+}
+
+/**
+ * Confirm closing the modal from the confirmation dialog
+ */
+const confirmCloseModal = (): void => {
+  closeConfirmationDialog.value = false
+  closeModal()
+}
+
 /**
  * Check for available actions from BlueOS.
  */
@@ -1594,6 +1723,32 @@ watch(activeTab, () => {
   transition: width 0.2s ease;
 }
 
+.tab-blink {
+  position: relative;
+}
+
+.tab-blink::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  background-color: #ffffff22;
+  animation: tab-blink 1.2s ease-in-out infinite;
+  pointer-events: none;
+  z-index: 0;
+}
+
+@keyframes tab-blink {
+  0%,
+  100% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
 .features-modal:has(.v-expansion-panels) {
   width: 760px;
 }

src/components/GlassModal.vue

@@ -41,6 +41,12 @@ const props = defineProps<{
    * If true, modal will not close by pressing 'esc' or by an outside click.
    */
   isPersistent?: boolean
+  /**
+   * If true, the modal will not emit `outside-click` when the user clicks outside of it.
+   * Useful when the modal hosts Vuetify dialogs that are teleported to the document body,
+   * whose clicks would otherwise be interpreted as outside clicks of the modal.
+   */
+  noCloseOnOutsideClick?: boolean
   /**
    * The overflow property of the modal.
    */
@@ -177,7 +183,7 @@ const closeModal = (): void => {
 }
 
 onClickOutside(modal, () => {
-  if (!isPersistent.value) {
+  if (!isPersistent.value && !props.noCloseOnOutsideClick) {
     closeModal()
   }
   if (!isAlwaysOnTop.value) {

src/components/WidgetHugger.vue

@@ -75,7 +75,7 @@ import { useI18n } from 'vue-i18n'
 import { constrain, round } from '@/libs/utils'
 import { useDevelopmentStore } from '@/stores/development'
 import { useWidgetManagerStore } from '@/stores/widgetManager'
-import type { Point2D } from '@/types/general'
+import type { Point2D, SizeRect2D } from '@/types/general'
 import { type Widget, isWidgetConfigurable, widgetHasOwnContextMenu, WidgetType } from '@/types/widgets'
 
 import ContextMenu from './ContextMenu.vue'
@@ -225,22 +225,42 @@ const handleResizeStart = (event: MouseEvent): void => {
   event.preventDefault()
 }
 
+/**
+ * Clamps a desired position to a valid range that keeps the widget within the viewport.
+ * When the widget is taller than the visible area between bars, it cannot fit between them,
+ * so the clamp switches to [0, 1 - size.height] to avoid snapping past the viewport (issue #2608).
+ * @param {Point2D} desiredPos - The candidate position to clamp
+ * @param {SizeRect2D} widgetSize - The widget's size used for bounds calculation
+ * @returns {Point2D} The position clamped to the valid range
+ */
+const clampPositionToValidArea = (desiredPos: Point2D, widgetSize: SizeRect2D): Point2D => {
+  const topBarNormalized = widgetStore.currentTopBarHeightPixels / windowHeight.value
+  const bottomBarNormalized = widgetStore.currentBottomBarHeightPixels / windowHeight.value
+  const visibleAreaHeight = 1 - topBarNormalized - bottomBarNormalized
+
+  const widgetTallerThanVisibleArea = widgetSize.height >= visibleAreaHeight
+  const minY = widgetTallerThanVisibleArea ? 0 : topBarNormalized
+  const maxY = widgetTallerThanVisibleArea
+    ? Math.max(0, 1 - widgetSize.height)
+    : Math.max(minY, 1 - widgetSize.height - bottomBarNormalized)
+
+  return {
+    x: constrain(desiredPos.x, 0, Math.max(0, 1 - widgetSize.width)),
+    y: constrain(desiredPos.y, minY, maxY),
+  }
+}
+
 const handleDrag = (event: MouseEvent): void => {
   if (!draggingWidget.value || !initialMousePos.value) return
 
   const viewSize = getViewSize()
   const dx = (event.clientX - initialMousePos.value.x) / viewSize.width
   const dy = (event.clientY - initialMousePos.value.y) / viewSize.height
 
-  const topBarNormalized = widgetStore.currentTopBarHeightPixels / windowHeight.value
-  const bottomBarNormalized = widgetStore.currentBottomBarHeightPixels / windowHeight.value
-  const minY = topBarNormalized
-  const maxY = Math.max(minY, 1 - size.value.height - bottomBarNormalized)
-
-  position.value = {
-    x: constrain(initialWidgetPos.value.x + dx, 0, 1 - size.value.width),
-    y: constrain(initialWidgetPos.value.y + dy, minY, maxY),
-  }
+  position.value = clampPositionToValidArea(
+    { x: initialWidgetPos.value.x + dx, y: initialWidgetPos.value.y + dy },
+    size.value
+  )
 }
 
 const handleResize = (event: MouseEvent): void => {
@@ -327,6 +347,14 @@ onMounted(async () => {
   }
   widgetStore.widgetManagerVars(widget.value.hash).everMounted = true
 
+  // Sanitize persisted layouts so widgets that were previously dragged past the
+  // visible area (e.g., covering the top/bottom bar) get snapped back into bounds
+  // automatically on load, without requiring the user to drag them (issue #2608).
+  const sanitizedPosition = clampPositionToValidArea(position.value, size.value)
+  if (sanitizedPosition.x !== position.value.x || sanitizedPosition.y !== position.value.y) {
+    position.value = sanitizedPosition
+  }
+
   if (widgetResizeHandles.value) {
     for (let i = 0; i < widgetResizeHandles.value.length; i++) {
       const handle = widgetResizeHandles.value[i]