Skip to content

frontend: vehiclesetup: failsafes: visual improvements#3799

Merged
patrickelectric merged 6 commits intobluerobotics:masterfrom
nicoschmdt:failsafes-visual-improvements
Feb 15, 2026
Merged

frontend: vehiclesetup: failsafes: visual improvements#3799
patrickelectric merged 6 commits intobluerobotics:masterfrom
nicoschmdt:failsafes-visual-improvements

Conversation

@nicoschmdt
Copy link
Contributor

@nicoschmdt nicoschmdt commented Feb 13, 2026

fix: #2788 and fix: #2786

image

Note

Cursor Bugbot is generating a summary for commit 2cee89a. Configure here.

Summary by Sourcery

Improve the vehiclesetup failsafes UI and disabled-state behavior.

New Features:

  • Indicate disabled failsafes visually with a warning-styled card, DISABLED badge, and subdued icon styling.
  • Disable editing of non-action parameters when a failsafe is turned off, while keeping the control/action parameter editable.

Bug Fixes:

  • Correct the Failsafes configuration component name and references so it is consistently registered and used.

Enhancements:

  • Adjust failsafe card layout spacing and container styling for better visual alignment and grouping.
  • Reorder specific failsafe cards (e.g., pressure and temperature) to improve presentation within the list.
  • Use a theme variable for the vehiclesetup main background color instead of a hard-coded value.

Summary by Sourcery

Improve the vehiclesetup failsafes UI, including disabled-state handling and configuration wiring.

New Features:

  • Visually indicate disabled failsafes via card styling and a DISABLED badge.
  • Prevent editing of non-action failsafe parameters when the failsafe is disabled while keeping the action/control parameter editable.

Bug Fixes:

  • Correct the Failsafes configuration component name and its usage in the vehiclesetup configuration view.

Enhancements:

  • Adjust failsafe card and container spacing for more consistent layout.
  • Reorder pressure and temperature failsafe cards within the list for clearer grouping.
  • Use a theme variable instead of a hard-coded color for the vehiclesetup main background.

@sourcery-ai
Copy link

sourcery-ai bot commented Feb 13, 2026

Reviewer's Guide

Updates the vehiclesetup failsafes configuration UI to better indicate and handle disabled failsafes, propagates a new disabled state into the inline parameter editor, tweaks layout/styling, reorders some failsafe cards, and fixes the Failsafes component naming/background color usage in the vehiclesetup configuration screen.

Sequence diagram for disabled failsafe parameter editing flow

sequenceDiagram
  actor User
  participant Configure
  participant FailsafesConfiguration
  participant FailsafeCard
  participant InlineParameterEditor
  participant AutopilotParamsStore

  User->>Configure: Select tab failsafes
  Configure->>FailsafesConfiguration: Render component
  FailsafesConfiguration->>AutopilotParamsStore: Load failsafe params
  AutopilotParamsStore-->>FailsafesConfiguration: params_finished_loaded, params
  FailsafesConfiguration->>FailsafeCard: Pass failsafeDefinition, params

  loop For each failsafe param
    FailsafeCard->>InlineParameterEditor: Render with param, disabled = is_disabled && param.name != actionParamName
  end

  User->>InlineParameterEditor: Change enable param value
  InlineParameterEditor->>AutopilotParamsStore: Update param FS_NAME_ENABLE
  AutopilotParamsStore-->>FailsafeCard: Updated param values
  FailsafeCard->>FailsafeCard: is_disabled = params[controlParam.name].value === 0
  FailsafeCard->>InlineParameterEditor: Re-render children with updated disabled flags

  User->>InlineParameterEditor: Try edit non action param when failsafe is disabled
  InlineParameterEditor->>InlineParameterEditor: disabled prop true, block input
  User->>InlineParameterEditor: Edit action param
  InlineParameterEditor->>AutopilotParamsStore: Update action param while other fields remain read only
Loading

Class diagram for updated failsafes configuration components

classDiagram
  class Configure {
    +main_container_style : background-color var(--v-mariner_blue-base)
    +items : Item[]
    +data()
  }

  class FailsafesConfiguration {
    +name : FailsafesConfiguration
    +params_finished_loaded : boolean
    +failsafes : FailsafeDefinition[]
    +created()
    +load_failsafe_definitions()
  }

  class FailsafeDefinition {
    +name : string
    +generalDescription : string
    +image : string
    +params : ParamDefinitions[]
  }

  class ParamDefinitions {
    +name : string
    +replacementTitle : string
    +icon : string
  }

  class FailsafeCard {
    +props failsafeDefinition : FailsafeDefinition
    +props params : any
    +data image : string
    +computed available_params() ParamDefinitions[]
    +computed is_disabled() boolean
    +computed actionParamName() string
    +mounted()
    +loadImage()
    +findControlParam() ParamDefinitions
  }

  class InlineParameterEditor {
    +props param : any
    +props label : string
    +props formatOptions : any
    +props forcing_input : boolean
    +props custom_input : boolean
    +props disabled : boolean
    +data internal_new_value : number | string
    +data waiting_for_param_update : boolean
    +computed as_select_items() any[]
    +methods updateVariables()
    +methods isInRange(value)
    +methods isValidType(value)
  }

  Configure --> FailsafesConfiguration : uses
  FailsafesConfiguration o--> FailsafeDefinition : defines
  FailsafesConfiguration --> FailsafeCard : renders
  FailsafeDefinition o--> ParamDefinitions : has
  FailsafeCard o--> ParamDefinitions : uses
  FailsafeCard --> InlineParameterEditor : renders_with_disabled_prop
  InlineParameterEditor --> ParamDefinitions : uses_param_metadata
Loading

File-Level Changes

Change Details Files
Make Failsafes configuration component name consistent and update references.
  • Rename the Failsafes Vue component from FailsafesConfigration to FailsafesConfiguration for clarity and correctness.
  • Update all imports, component registrations, and tab configurations in Configure.vue to use the new component name.
core/frontend/src/components/vehiclesetup/configuration/failsafes/Failsafes.vue
core/frontend/src/components/vehiclesetup/Configure.vue
Improve layout and visual spacing of failsafe cards in the Failsafes view.
  • Add a failsafes-container class to the failsafes wrapper div and define a gap between cards.
  • Keep existing flex and spacing utilities while refining grouping and alignment of failsafe cards.
  • Reorder the Excess Internal Pressure and Excess Internal Temperature failsafe definitions so they appear later in the list, after Low Battery.
core/frontend/src/components/vehiclesetup/configuration/failsafes/Failsafes.vue
Introduce disabled-state behavior and styling for failsafe cards based on their control/enable parameter.
  • Add a computed is_disabled property that determines if a failsafe is disabled by inspecting an associated control parameter and checking if its value is zero.
  • Implement a helper method findControlParam that prefers parameters labelled Enable or with names containing _ENABLE, falling back to parameters with replacementTitle 'Action'.
  • Expose the resolved action parameter name via a computed property and use it to allow editing of the action/control param while disabling all other params when the failsafe is disabled.
  • Apply a disabled-failsafe CSS class conditionally to visually mark disabled cards with warning border, hover effect, a DISABLED badge, and subdued icon styling.
core/frontend/src/components/vehiclesetup/configuration/failsafes/FailsafeCard.vue
Propagate a disabled prop through InlineParameterEditor and wire it from the failsafe card.
  • Extend InlineParameterEditor props to accept a disabled boolean with a default of false.
  • Pass the disabled prop from FailsafeCard into each InlineParameterEditor instance, computed as disabled when the failsafe is disabled and the param is not the action/control param.
  • Bind the disabled prop to all supported input variants inside InlineParameterEditor, including switch, select, and text/number field components.
core/frontend/src/components/vehiclesetup/configuration/failsafes/FailsafeCard.vue
core/frontend/src/components/parameter-editor/InlineParameterEditor.vue
Use a theme variable for the vehiclesetup main container background color.
  • Replace the hard-coded hex RGBA color in Configure.vue .main-container with the var(--v-mariner_blue-base) CSS variable to align with theme configuration.
core/frontend/src/components/vehiclesetup/Configure.vue

Assessment against linked issues

Issue Objective Addressed Explanation
#2786 Disable or grey-out configuration parameters for a failsafe (while keeping the Action/Enable parameter interactive) when that failsafe's action is set to Disabled.
#2786 Provide clear visual indication on the failsafe card that a failsafe is disabled (e.g., styling/greyed-out card or similar visual feedback).
#2788 Ensure a non-zero minimum horizontal margin/spacing between failsafe cards in the Vehicle Setup page (optionally via a reusable container/component).
#2788 Reorder the failsafe cards so that the Low Battery card appears directly after the Leak Sensor card, and keep the Excess Internal Pressure and Excess Internal Temperature cards grouped together after it.
#2788 Replace the hard-coded flat background color in the Vehicle Setup configuration view with a value derived from the theme variables (instead of a literal color), aligning with the page background styling.

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

Copy link

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've left some high level feedback:

  • The findControlParam heuristic in FailsafeCard.vue currently relies on replacementTitle text ('Action'/'Enable') and '_ENABLE' in the name, which is brittle; consider adding an explicit flag on the param definition (e.g. isControlParam: true) and using that instead.
  • The hard-coded 'DISABLED' label in the .disabled-failsafe::after CSS pseudo-element bypasses your usual localization/i18n pipeline; consider rendering this badge via the template so it can be translated.
Prompt for AI Agents
Please address the comments from this code review:

## Overall Comments
- The `findControlParam` heuristic in `FailsafeCard.vue` currently relies on `replacementTitle` text (`'Action'`/`'Enable'`) and `'_ENABLE'` in the name, which is brittle; consider adding an explicit flag on the param definition (e.g. `isControlParam: true`) and using that instead.
- The hard-coded `'DISABLED'` label in the `.disabled-failsafe::after` CSS pseudo-element bypasses your usual localization/i18n pipeline; consider rendering this badge via the template so it can be translated.

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

Copy link

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.

This is the final PR Bugbot will review for you during this billing cycle

Your free Bugbot reviews will reset on February 15

Details

Your team is on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle for each member of your team.

To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

@nicoschmdt nicoschmdt marked this pull request as draft February 13, 2026 15:33
@nicoschmdt nicoschmdt force-pushed the failsafes-visual-improvements branch from 2cee89a to 93e6e41 Compare February 13, 2026 15:37
@nicoschmdt nicoschmdt marked this pull request as ready for review February 13, 2026 15:37
Copy link

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've left some high level feedback:

  • The logic in findControlParam relies on hard-coded replacementTitle strings and _ENABLE suffixes; consider making the control/action parameter explicit in the failsafe definition type instead of inferring it via string matching to avoid future breakage when labels change.
  • The 'DISABLED' label in the .disabled-failsafe::after CSS rule is hard-coded; if the rest of the UI is localized or configurable, you may want to move this into a translatable string rendered in the template rather than in CSS content.
Prompt for AI Agents
Please address the comments from this code review:

## Overall Comments
- The logic in `findControlParam` relies on hard-coded `replacementTitle` strings and `_ENABLE` suffixes; consider making the control/action parameter explicit in the failsafe definition type instead of inferring it via string matching to avoid future breakage when labels change.
- The `'DISABLED'` label in the `.disabled-failsafe::after` CSS rule is hard-coded; if the rest of the UI is localized or configurable, you may want to move this into a translatable string rendered in the template rather than in CSS content.

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

@patrickelectric patrickelectric merged commit 6f9ada1 into bluerobotics:master Feb 15, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

core: frontend: vehicle-setup: failsafes: visual improvements core: frontend: vehicle-setup: failsafes: disable unused parameters

2 participants