From cfea01bd6755bdd4b078f7a528f7fa5327321cdf Mon Sep 17 00:00:00 2001
From: Pedro Lamas <pedrolamas@gmail.com>
Date: Fri, 3 Jul 2026 19:27:12 +0100
Subject: [PATCH 1/4] feat: add retract and extrude indicator

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
---
 .../widgets/retract/RetractCard.vue           |  2 +-
 .../widgets/toolhead/ExtruderMoves.vue        | 14 +++++++++--
 .../widgets/toolhead/ToolheadCard.vue         | 25 +++++++++++++++++++
 src/globals.ts                                |  8 ++++--
 src/locales/en.yaml                           |  2 ++
 5 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/src/components/widgets/retract/RetractCard.vue b/src/components/widgets/retract/RetractCard.vue
index ce4615b8bb..bd720c9efa 100644
--- a/src/components/widgets/retract/RetractCard.vue
+++ b/src/components/widgets/retract/RetractCard.vue
@@ -1,7 +1,7 @@
 <template>
   <collapsable-card
     :title="$t('app.general.title.retract')"
-    icon="$retract"
+    icon="$retractions"
     draggable
     layout-path="dashboard.retract-card"
   >
diff --git a/src/components/widgets/toolhead/ExtruderMoves.vue b/src/components/widgets/toolhead/ExtruderMoves.vue
index 7e0df3a557..5adc9abc24 100644
--- a/src/components/widgets/toolhead/ExtruderMoves.vue
+++ b/src/components/widgets/toolhead/ExtruderMoves.vue
@@ -35,7 +35,12 @@
           @click="retract"
         >
           {{ $t('app.general.btn.retract') }}
-          <v-icon>$chevronUp</v-icon>
+          <v-icon
+            small
+            right
+          >
+            $retract
+          </v-icon>
         </app-btn>
       </v-col>
     </v-row>
@@ -73,7 +78,12 @@
           @click="extrude"
         >
           {{ $t('app.general.btn.extrude') }}
-          <v-icon>$chevronDown</v-icon>
+          <v-icon
+            small
+            right
+          >
+            $extrude
+          </v-icon>
         </app-btn>
       </v-col>
     </v-row>
diff --git a/src/components/widgets/toolhead/ToolheadCard.vue b/src/components/widgets/toolhead/ToolheadCard.vue
index 62613471d0..e962b89964 100644
--- a/src/components/widgets/toolhead/ToolheadCard.vue
+++ b/src/components/widgets/toolhead/ToolheadCard.vue
@@ -47,6 +47,23 @@
         </template>
         <span v-safe-html="$t('app.tool.tooltip.extruder_disabled', { min: activeExtruder?.min_extrude_temp })" />
       </v-tooltip>
+
+      <v-tooltip
+        v-if="extruderMovementDirection"
+        bottom
+      >
+        <template #activator="{ on, attrs }">
+          <v-icon
+            v-bind="attrs"
+            class="ml-3"
+            :color="extruderMovementDirection < 0 ? 'red' : 'green'"
+            v-on="on"
+          >
+            {{ extruderMovementDirection < 0 ? '$retract' : '$extrude' }}
+          </v-icon>
+        </template>
+        <span>{{ extruderMovementDirection < 0 ? $t('app.tool.tooltip.retracting') : $t('app.tool.tooltip.extruding') }}</span>
+      </v-tooltip>
     </template>
 
     <template #menu>
@@ -184,6 +201,14 @@ export default class ToolheadCard extends Mixins(StateMixin, ToolheadMixin) {
     return this.$typedGetters['printer/getKlippyApp']
   }
 
+  get liveExtruderVelocity (): number {
+    return this.$typedState.printer.printer.motion_report?.live_extruder_velocity ?? 0
+  }
+
+  get extruderMovementDirection (): number {
+    return Math.sign(this.liveExtruderVelocity)
+  }
+
   get printerSettings (): Klipper.SettingsState {
     return this.$typedGetters['printer/getPrinterSettings']
   }
diff --git a/src/globals.ts b/src/globals.ts
index 260a20dead..67782b3754 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -201,7 +201,9 @@ import {
   mdiArrowDownBold,
   mdiArrowUpBold,
   mdiDockTop,
-  mdiDockBottom
+  mdiDockBottom,
+  mdiTriangle,
+  mdiTriangleDown,
 } from '@mdi/js'
 
 import {
@@ -220,6 +222,7 @@ const mdiFilamentChange = 'm23.5 18.5-3-3v2h-4v2h4v2zm-9 0 3 3v-2h4v-2h-4v-2zM12
 const mdiFileImageLock = 'M6 2c-1.11 0-2 .89-2 2v16a2 2 0 0 0 2 2h6v-2H6l6-6 1.21 1.21C13.377 12.674 15.688 11 18 11c.7 0 1.4.2 2 .4V8l-6-6zm7 1.5L18.5 9H13zM8 9a2 2 0 0 1 2 2 2 2 0 0 1-2 2 2 2 0 0 1-2-2 2 2 0 0 1 2-2m10 4c-1.4 0-2.8 1.1-2.8 2.5V17c-.6 0-1.2.6-1.2 1.2v3.5c0 .7.6 1.3 1.2 1.3h5.5c.7 0 1.3-.6 1.3-1.2v-3.5c0-.7-.6-1.3-1.2-1.3v-1.5c0-1.4-1.4-2.5-2.8-2.5m0 1.2c.8 0 1.5.5 1.5 1.3V17h-3v-1.5c0-.8.7-1.3 1.5-1.3'
 const mdiFileDocumentLock = 'M12 21.7V18H6v-2h6.9l.3-.3v-.2q0-.75.3-1.5H6v-2h9.1c.8-.6 1.8-1 2.9-1 .7 0 1.4.2 2 .4V8l-6-6H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h6zm1-18.2L18.5 9H13ZM20.8 17v-1.5c0-1.4-1.4-2.5-2.8-2.5s-2.8 1.1-2.8 2.5V17c-.6 0-1.2.6-1.2 1.2v3.5c0 .7.6 1.3 1.2 1.3h5.5c.7 0 1.3-.6 1.3-1.2v-3.5c0-.7-.6-1.3-1.2-1.3m-1.3 0h-3v-1.5c0-.8.7-1.3 1.5-1.3s1.5.5 1.5 1.3z'
 const mdiEmergencyStop = 'M12 1 8 5l.05.05 1.48 1.48L12 9V6a5.98 5.98 0 0 1 5.828 4.564l1.93-.517C18.883 6.579 15.733 4 12 4zM6.436 6.264a7.975 7.975 0 0 0-1.36 9.734L2.475 17.5l5.462 1.465.018-.069h.002l.541-2.019.904-3.377-2.6 1.502A6 6 0 0 1 6 12a5.98 5.98 0 0 1 1.84-4.332zm13.627 5.771-.065.018-1.336.357-.691.186-3.373.904 2.601 1.502A5.98 5.98 0 0 1 12 18c-.58 0-1.14-.082-1.67-.234l-.518 1.927c.696.199 1.43.307 2.188.307 2.952 0 5.536-1.614 6.922-4.004l2.603 1.504z'
+
 /**
  * Global, static constants.
  */
@@ -461,7 +464,8 @@ export const Icons = Object.freeze({
   contentCopy: mdiContentCopy,
   apps: mdiApps,
   shieldAccount: mdiShieldAccount,
-  retract: mdiSwapVertical,
+  retract: mdiTriangle,
+  extrude: mdiTriangleDown,
   codeJson: mdiCodeJson,
   desktopTower: mdiDesktopTower,
   harddisk: mdiHarddisk,
diff --git a/src/locales/en.yaml b/src/locales/en.yaml
index e0a5d8f989..4cc4ce89d9 100644
--- a/src/locales/en.yaml
+++ b/src/locales/en.yaml
@@ -967,11 +967,13 @@ app:
       absolute_positioning: Absolute Positioning
       extruder_disabled: extruder disabled, below min_extrude_temp 
         (%{min}<small>°C</small>)
+      extruding: Extruding
       home_xy: Home XY
       home_z: Home Z
       manual_probe: Manual Probe
       motors_off: Motors Off
       relative_positioning: Relative Positioning
+      retracting: Retracting
       select_tool: Select tool %{tool}
       tools: Tools
     label:

From a74efcc8d2e7e7c1d80b977432bd127223d3ec55 Mon Sep 17 00:00:00 2001
From: Pedro Lamas <pedrolamas@gmail.com>
Date: Sat, 4 Jul 2026 16:31:34 +0100
Subject: [PATCH 2/4] style: update retract/extrude icons

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
---
 src/globals.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/globals.ts b/src/globals.ts
index 67782b3754..cc84b83ac6 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -202,8 +202,6 @@ import {
   mdiArrowUpBold,
   mdiDockTop,
   mdiDockBottom,
-  mdiTriangle,
-  mdiTriangleDown,
 } from '@mdi/js'
 
 import {
@@ -464,8 +462,8 @@ export const Icons = Object.freeze({
   contentCopy: mdiContentCopy,
   apps: mdiApps,
   shieldAccount: mdiShieldAccount,
-  retract: mdiTriangle,
-  extrude: mdiTriangleDown,
+  retract: mdiArrowUpBold,
+  extrude: mdiArrowDownBold,
   codeJson: mdiCodeJson,
   desktopTower: mdiDesktopTower,
   harddisk: mdiHarddisk,

From 8f943f69bafc1802f7816f08ec6276e816772d42 Mon Sep 17 00:00:00 2001
From: Pedro Lamas <pedrolamas@gmail.com>
Date: Sat, 4 Jul 2026 16:47:33 +0100
Subject: [PATCH 3/4] refactor: simplify extruder indicator logic

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
---
 .../widgets/toolhead/ToolheadCard.vue         | 105 +++++++++---------
 1 file changed, 53 insertions(+), 52 deletions(-)

diff --git a/src/components/widgets/toolhead/ToolheadCard.vue b/src/components/widgets/toolhead/ToolheadCard.vue
index e962b89964..bd2da4ee69 100644
--- a/src/components/widgets/toolhead/ToolheadCard.vue
+++ b/src/components/widgets/toolhead/ToolheadCard.vue
@@ -12,58 +12,59 @@
       </v-icon>
       <span class="font-weight-light">{{ $t('app.general.title.tool') }}</span>
 
-      <v-tooltip
-        v-if="extruderDisconnected"
-        bottom
-      >
-        <template #activator="{ on, attrs }">
-          <v-icon
-            v-bind="attrs"
-            class="ml-3"
-            color="warning"
-            small
-            v-on="on"
-          >
-            $warning
-          </v-icon>
-        </template>
-        <span>{{ $t('app.general.label.disconnected') }}</span>
-      </v-tooltip>
-
-      <v-tooltip
-        v-else
-        bottom
-      >
-        <template #activator="{ on, attrs }">
-          <v-icon
-            v-show="hasExtruder && !extruderReady"
-            v-bind="attrs"
-            class="ml-3"
-            color="info"
-            v-on="on"
-          >
-            $snowflakeAlert
-          </v-icon>
-        </template>
-        <span v-safe-html="$t('app.tool.tooltip.extruder_disabled', { min: activeExtruder?.min_extrude_temp })" />
-      </v-tooltip>
-
-      <v-tooltip
-        v-if="extruderMovementDirection"
-        bottom
-      >
-        <template #activator="{ on, attrs }">
-          <v-icon
-            v-bind="attrs"
-            class="ml-3"
-            :color="extruderMovementDirection < 0 ? 'red' : 'green'"
-            v-on="on"
-          >
-            {{ extruderMovementDirection < 0 ? '$retract' : '$extrude' }}
-          </v-icon>
-        </template>
-        <span>{{ extruderMovementDirection < 0 ? $t('app.tool.tooltip.retracting') : $t('app.tool.tooltip.extruding') }}</span>
-      </v-tooltip>
+      <template v-if="hasExtruder">
+        <v-tooltip
+          v-if="extruderDisconnected"
+          bottom
+        >
+          <template #activator="{ on, attrs }">
+            <v-icon
+              v-bind="attrs"
+              class="ml-3"
+              color="warning"
+              small
+              v-on="on"
+            >
+              $warning
+            </v-icon>
+          </template>
+          <span>{{ $t('app.general.label.disconnected') }}</span>
+        </v-tooltip>
+
+        <v-tooltip
+          v-else-if="!extruderReady"
+          bottom
+        >
+          <template #activator="{ on, attrs }">
+            <v-icon
+              v-bind="attrs"
+              class="ml-3"
+              color="info"
+              v-on="on"
+            >
+              $snowflakeAlert
+            </v-icon>
+          </template>
+          <span v-safe-html="$t('app.tool.tooltip.extruder_disabled', { min: activeExtruder?.min_extrude_temp })" />
+        </v-tooltip>
+
+        <v-tooltip
+          v-if="extruderMovementDirection"
+          bottom
+        >
+          <template #activator="{ on, attrs }">
+            <v-icon
+              v-bind="attrs"
+              class="ml-3"
+              :color="extruderMovementDirection < 0 ? 'red' : 'green'"
+              v-on="on"
+            >
+              {{ extruderMovementDirection < 0 ? '$retract' : '$extrude' }}
+            </v-icon>
+          </template>
+          <span>{{ extruderMovementDirection < 0 ? $t('app.tool.tooltip.retracting') : $t('app.tool.tooltip.extruding') }}</span>
+        </v-tooltip>
+      </template>
     </template>
 
     <template #menu>

From b71a067432fa3f61f9fac744550d07ea11d7b471 Mon Sep 17 00:00:00 2001
From: Pedro Lamas <pedrolamas@gmail.com>
Date: Sat, 4 Jul 2026 17:04:59 +0100
Subject: [PATCH 4/4] fix: hide extruder indicators if klippy not ready

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
---
 src/components/widgets/toolhead/ToolheadCard.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/widgets/toolhead/ToolheadCard.vue b/src/components/widgets/toolhead/ToolheadCard.vue
index bd2da4ee69..fe4f7d17d0 100644
--- a/src/components/widgets/toolhead/ToolheadCard.vue
+++ b/src/components/widgets/toolhead/ToolheadCard.vue
@@ -12,7 +12,7 @@
       </v-icon>
       <span class="font-weight-light">{{ $t('app.general.title.tool') }}</span>
 
-      <template v-if="hasExtruder">
+      <template v-if="klippyReady && hasExtruder">
         <v-tooltip
           v-if="extruderDisconnected"
           bottom
@@ -49,7 +49,7 @@
         </v-tooltip>
 
         <v-tooltip
-          v-if="extruderMovementDirection"
+          v-else-if="extruderMovementDirection"
           bottom
         >
           <template #activator="{ on, attrs }">