kasy-cli 1.19.1 → 1.20.0

package/templates/firebase/lib/core/dev_inspector/dev_inspector.dart

@@ -6,29 +6,29 @@ import 'package:flutter/scheduler.dart';
 import 'package:flutter/services.dart';
 import 'package:kasy_kit/core/dev_inspector/dev_inspector_info.dart';
 import 'package:kasy_kit/core/dev_inspector/dev_inspector_service.dart';
-import 'package:kasy_kit/core/icons/kasy_icons.dart';
-import 'package:kasy_kit/core/theme/colors.dart';
-import 'package:kasy_kit/core/theme/extensions/theme_extension.dart';
 import 'package:kasy_kit/core/theme/providers/theme_provider.dart';
 import 'package:kasy_kit/i18n/translations.g.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 
-const Color _highlightColor = Color(0xFFD2F51E);
+/// Same lime used by the Kasy CLI brand color (Tailwind lime-500). Balanced
+/// for visibility on both light and dark surfaces.
+const Color _highlightColor = Color(0xFF84CC16);
 const double _highlightStrokeWidth = 2.0;
 const double _highlightCornerRadius = 4.0;
 
 final GlobalKey<ScaffoldMessengerState> devInspectorRootScaffoldMessengerKey =
     GlobalKey<ScaffoldMessengerState>(debugLabel: 'devInspectorRoot');
 
-/// Persisted flag — Settings (admin, debug only) toggles this; [DevInspector] listens.
-const String devInspectorFabEnabledPrefKey = 'dev_inspector_fab_enabled';
+/// Persisted master switch flipped from the admin settings sheet. When `true`
+/// the inspector is permanently armed (`devInspectorActiveNotifier` follows it).
+/// Esc/pill toggles flip this same flag, which is then persisted to prefs so
+/// the next launch matches what the user left.
+///
+/// Key kept as `dev_inspector_fab_enabled` for backwards compatibility with
+/// users who already had the toggle on before the FAB was removed.
+const String devInspectorEnabledPrefKey = 'dev_inspector_fab_enabled';
 
-final ValueNotifier<bool> devInspectorFabEnabledNotifier =
-    ValueNotifier<bool>(false);
-
-/// Set to true to reveal the FAB immediately (bypasses the startup delay).
-/// [DevInspector] resets it back to false after consuming the signal.
-final ValueNotifier<bool> devInspectorRevealNowNotifier =
+final ValueNotifier<bool> devInspectorEnabledNotifier =
     ValueNotifier<bool>(false);
 
 /// Set to true to trigger a copy of the currently selected widget.
@@ -36,12 +36,40 @@ final ValueNotifier<bool> devInspectorRevealNowNotifier =
 final ValueNotifier<bool> devInspectorCopyTriggerNotifier =
     ValueNotifier<bool>(false);
 
-/// Active state of the custom inspector. Toggled by the FAB (native) and by
-/// the Web Device Preview pill; observed by [DevInspector] to mount the
-/// tap-absorbing overlay and the highlight.
+/// Runtime active state of the inspector. Mirrors [devInspectorEnabledNotifier]
+/// — the Web Device Preview pill, the admin toggle and the Esc shortcut all
+/// flip the persisted notifier, and this one follows.
 final ValueNotifier<bool> devInspectorActiveNotifier =
     ValueNotifier<bool>(false);
 
+/// Set to true to hide the in-app status pill that the [DevInspector] shows
+/// while active (e.g. when the WebDevicePreview chrome is already displaying
+/// its own inspector state).
+final ValueNotifier<bool> devInspectorSuppressStatusPillNotifier =
+    ValueNotifier<bool>(false);
+
+/// Rect of the currently selected widget expressed in **root view coordinates**
+/// (the browser window / native window). External surfaces — e.g. the Web
+/// Device Preview chrome which renders OUTSIDE the device frame — listen to
+/// this and draw the highlight above the frame so it stays visible even when
+/// the selected widget hugs the edges of the simulated device.
+final ValueNotifier<Rect?> devInspectorHighlightGlobalRect =
+    ValueNotifier<Rect?>(null);
+
+const Color devInspectorHighlightColor = _highlightColor;
+const double devInspectorHighlightStrokeWidth = _highlightStrokeWidth;
+const double devInspectorHighlightCornerRadius = _highlightCornerRadius;
+
+/// Keyboard shortcut for toggling the inspector, formatted for the current
+/// platform. Key names are kept in English regardless of the app locale —
+/// "Command", "Ctrl" and "Shift" are universal keyboard conventions.
+String devInspectorShortcutLabel() {
+  final String mod = defaultTargetPlatform == TargetPlatform.macOS
+      ? 'Command'
+      : 'Ctrl';
+  return '$mod + Shift + P';
+}
+
 class DevInspector extends StatefulWidget {
   const DevInspector({super.key, required this.child});
 
@@ -57,55 +85,59 @@ class DevInspector extends StatefulWidget {
 }
 
 class _DevInspectorState extends State<DevInspector>
-    with SingleTickerProviderStateMixin {
-  static const Duration _fabRevealDelay = Duration(seconds: 2);
-  static const Duration _fabDeemphasizeDelay = Duration(seconds: 2);
-  static const Duration _fabOpacityAnimation = Duration(milliseconds: 700);
-  static const double _fabOpacityIdle = 0.75;
-  static const double _fabOpacityInspectorOn = 1.0;
+    with TickerProviderStateMixin {
   static const Duration _copyFeedbackVisible = Duration(milliseconds: 2200);
-  /// Horizontal inset from the right so the banner does not sit under the FAB.
-  static const double _copyFeedbackRightInset = 68;
+  static const double _copyFeedbackRightInset = 16;
+  static const int _historyCapacity = 20;
 
   bool _active = false;
   bool _copyBusy = false;
 
-  double? _fabDx;
-  double? _fabDy;
-  bool _dragging = false;
-
-  Timer? _revealTimer;
-  Timer? _fabDeemphasizeTimer;
   Timer? _copyFeedbackTimer;
   String? _copyFeedbackText;
   bool _copyFeedbackIsError = false;
-  bool _fabLayerMounted = false;
-  bool _fabFadeIn = false;
-  bool _fabEmphasized = false;
 
   DevInspectorInfo? _selectedInfo;
   RenderObject? _selectedRender;
   Rect? _highlightRect;
   Ticker? _highlightTicker;
+  late final AnimationController _transitionCtrl;
+  Rect? _transitionFromRect;
+  Rect? _transitionToRect;
+  Rect? _transitionFromGlobalRect;
+  Rect? _transitionToGlobalRect;
+  final GlobalKey _overlayKey = GlobalKey(debugLabel: 'devInspectorOverlay');
+  final GlobalKey _contentKey = GlobalKey(debugLabel: 'devInspectorContent');
+
+  /// Past selections, oldest → newest. [_historyCursor] points at the current
+  /// position; ← and → keys walk this list. Cleared when the inspector is
+  /// disabled.
+  final List<({DevInspectorInfo info, RenderObject renderObject})> _history =
+      [];
+  int _historyCursor = -1;
+  bool _navigatingHistory = false;
 
   @override
   void initState() {
     super.initState();
+    _transitionCtrl = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 140),
+    )..addListener(_handleTransitionTick);
     devInspectorActiveNotifier.addListener(_handleActiveChanged);
-    devInspectorFabEnabledNotifier.addListener(_onFabEnabledNotifierChanged);
-    devInspectorRevealNowNotifier.addListener(_onRevealNow);
+    devInspectorEnabledNotifier.addListener(_handleEnabledChanged);
     devInspectorCopyTriggerNotifier.addListener(_onCopyTriggered);
-    unawaited(_bootstrapFabPreference());
+    HardwareKeyboard.instance.addHandler(_handleKeyEvent);
+    unawaited(_bootstrapEnabledPreference());
   }
 
   @override
   void dispose() {
-    _revealTimer?.cancel();
-    _fabDeemphasizeTimer?.cancel();
     _copyFeedbackTimer?.cancel();
     _highlightTicker?.dispose();
-    devInspectorFabEnabledNotifier.removeListener(_onFabEnabledNotifierChanged);
-    devInspectorRevealNowNotifier.removeListener(_onRevealNow);
+    _transitionCtrl.dispose();
+    HardwareKeyboard.instance.removeHandler(_handleKeyEvent);
+    devInspectorEnabledNotifier.removeListener(_handleEnabledChanged);
     devInspectorCopyTriggerNotifier.removeListener(_onCopyTriggered);
     devInspectorActiveNotifier.removeListener(_handleActiveChanged);
     if (devInspectorActiveNotifier.value) {
@@ -114,103 +146,170 @@ class _DevInspectorState extends State<DevInspector>
     super.dispose();
   }
 
-  Future<void> _bootstrapFabPreference() async {
-    final SharedPreferences prefs = await SharedPreferences.getInstance();
+  void _handleTransitionTick() {
     if (!mounted) return;
-    final bool enabled = prefs.getBool(devInspectorFabEnabledPrefKey) ?? false;
-    final bool changed = devInspectorFabEnabledNotifier.value != enabled;
-    devInspectorFabEnabledNotifier.value = enabled;
-    if (!changed) {
-      _applyFabEnabled(enabled);
+    final Rect? from = _transitionFromRect;
+    final Rect? to = _transitionToRect;
+    if (from == null || to == null) return;
+    final double t = Curves.easeOutCubic.transform(_transitionCtrl.value);
+    setState(() => _highlightRect = Rect.lerp(from, to, t));
+
+    final Rect? gFrom = _transitionFromGlobalRect;
+    final Rect? gTo = _transitionToGlobalRect;
+    if (gFrom != null && gTo != null) {
+      devInspectorHighlightGlobalRect.value = Rect.lerp(gFrom, gTo, t);
     }
   }
 
-  void _onFabEnabledNotifierChanged() {
-    _applyFabEnabled(devInspectorFabEnabledNotifier.value);
+  /// Global keyboard shortcuts. The "wake up" combo works from anywhere,
+  /// even when the inspector is off; the rest only fire when it's active.
+  ///   • Cmd/Ctrl + Shift + P → toggle inspector on/off (debug only)
+  ///   • Esc                  → deactivate (and persist OFF)
+  ///   • C                    → copy the selected widget (no modifier; the
+  ///                            usual Cmd/Ctrl+C still copies text elsewhere)
+  ///   • ← / →                → step backward / forward through history
+  bool _handleKeyEvent(KeyEvent event) {
+    if (event is! KeyDownEvent) return false;
+    final HardwareKeyboard kb = HardwareKeyboard.instance;
+
+    // Cmd/Ctrl + Shift + P — works regardless of active state.
+    if (kDebugMode &&
+        event.logicalKey == LogicalKeyboardKey.keyP &&
+        (kb.isMetaPressed || kb.isControlPressed) &&
+        kb.isShiftPressed &&
+        !kb.isAltPressed) {
+      _toggleInspectorFromShortcut();
+      return true;
+    }
+
+    if (!_active) return false;
+
+    final bool hasModifier = kb.isMetaPressed ||
+        kb.isControlPressed ||
+        kb.isAltPressed ||
+        kb.isShiftPressed;
+
+    if (event.logicalKey == LogicalKeyboardKey.escape) {
+      // Esc must turn the inspector off no matter HOW it was activated:
+      //   • Admin toggle  → flip Enabled (and let it cascade to Active).
+      //   • WebDevicePreview pill → only Active is set; flip it directly.
+      // We touch both so ValueNotifier always observes a real change.
+      if (devInspectorEnabledNotifier.value) {
+        devInspectorEnabledNotifier.value = false;
+      }
+      if (devInspectorActiveNotifier.value) {
+        devInspectorActiveNotifier.value = false;
+      }
+      HapticFeedback.lightImpact();
+      return true;
+    }
+    if (event.logicalKey == LogicalKeyboardKey.keyC && !hasModifier) {
+      if (_selectedInfo == null) return false;
+      unawaited(_copySelection());
+      return true;
+    }
+    if (event.logicalKey == LogicalKeyboardKey.arrowLeft && !hasModifier) {
+      return _stepHistory(-1);
+    }
+    if (event.logicalKey == LogicalKeyboardKey.arrowRight && !hasModifier) {
+      return _stepHistory(1);
+    }
+    return false;
   }
 
-  void _onCopyTriggered() {
-    if (!devInspectorCopyTriggerNotifier.value) return;
-    devInspectorCopyTriggerNotifier.value = false;
-    if (!_active) return;
-    unawaited(_copySelection());
+  /// Flip the inspector on or off via the global shortcut. Mirrors what the
+  /// admin toggle does on the ON side, and what Esc does on the OFF side.
+  void _toggleInspectorFromShortcut() {
+    final bool turningOn = !_active;
+    if (turningOn) {
+      devInspectorEnabledNotifier.value = true;
+    } else {
+      if (devInspectorEnabledNotifier.value) {
+        devInspectorEnabledNotifier.value = false;
+      }
+      if (devInspectorActiveNotifier.value) {
+        devInspectorActiveNotifier.value = false;
+      }
+    }
+    HapticFeedback.lightImpact();
   }
 
-  void _onRevealNow() {
-    if (!devInspectorRevealNowNotifier.value) return;
-    devInspectorRevealNowNotifier.value = false;
-    if (!devInspectorFabEnabledNotifier.value || !mounted) return;
-    _revealTimer?.cancel();
+  bool _stepHistory(int delta) {
+    if (_history.isEmpty) return false;
+    final int next = _historyCursor + delta;
+    if (next < 0 || next >= _history.length) return false;
+    _historyCursor = next;
+    final entry = _history[next];
+    if (!entry.renderObject.attached) return false;
+
+    final Rect? newRect = _rectInOverlaySpace(entry.renderObject);
+    final Rect? newGlobalRect = _rectInRootSpace(entry.renderObject);
+    final Rect? fromRect = _highlightRect;
+    final Rect? fromGlobalRect = devInspectorHighlightGlobalRect.value;
+
+    _navigatingHistory = true;
     setState(() {
-      _fabLayerMounted = true;
-      _fabFadeIn = false;
-    });
-    WidgetsBinding.instance.addPostFrameCallback((_) {
-      if (!mounted) return;
-      setState(() => _fabFadeIn = true);
+      _selectedInfo = entry.info;
+      _selectedRender = entry.renderObject;
     });
+    _animateHighlightTo(
+      fromRect: fromRect,
+      toRect: newRect,
+      fromGlobalRect: fromGlobalRect,
+      toGlobalRect: newGlobalRect,
+    );
+    _navigatingHistory = false;
+    HapticFeedback.selectionClick();
+    return true;
   }
 
-  void _applyFabEnabled(bool enabled) {
-    _revealTimer?.cancel();
-    _fabDeemphasizeTimer?.cancel();
+  Future<void> _bootstrapEnabledPreference() async {
+    final SharedPreferences prefs = await SharedPreferences.getInstance();
     if (!mounted) return;
+    final bool enabled = prefs.getBool(devInspectorEnabledPrefKey) ?? false;
+    if (devInspectorEnabledNotifier.value != enabled) {
+      devInspectorEnabledNotifier.value = enabled;
+    } else {
+      _applyEnabled(enabled);
+    }
+  }
+
+  Future<void> _persistEnabled(bool value) async {
+    try {
+      final SharedPreferences prefs = await SharedPreferences.getInstance();
+      await prefs.setBool(devInspectorEnabledPrefKey, value);
+    } catch (_) {
+      // Best-effort persistence — don't crash the inspector if prefs fail.
+    }
+  }
+
+  void _handleEnabledChanged() {
+    _applyEnabled(devInspectorEnabledNotifier.value);
+    unawaited(_persistEnabled(devInspectorEnabledNotifier.value));
+  }
+
+  void _applyEnabled(bool enabled) {
+    if (!mounted) return;
+    // Master switch directly drives the runtime active flag — no FAB stage.
+    if (devInspectorActiveNotifier.value != enabled) {
+      devInspectorActiveNotifier.value = enabled;
+    }
     if (!enabled) {
-      if (_active) {
-        devInspectorActiveNotifier.value = false;
-      }
       _copyFeedbackTimer?.cancel();
       setState(() {
         _active = false;
-        _fabLayerMounted = false;
-        _fabFadeIn = false;
-        _fabEmphasized = false;
-        _dragging = false;
         _copyFeedbackText = null;
         _copyFeedbackIsError = false;
         _clearSelection();
       });
-      _copyFeedbackTimer?.cancel();
-      return;
     }
-    setState(() {
-      _fabLayerMounted = false;
-      _fabFadeIn = false;
-    });
-    _revealTimer = Timer(_fabRevealDelay, _onFabRevealDelayElapsed);
-  }
-
-  void _onFabRevealDelayElapsed() {
-    if (!mounted) return;
-    setState(() {
-      _fabLayerMounted = true;
-      _fabFadeIn = false;
-    });
-    WidgetsBinding.instance.addPostFrameCallback((_) {
-      if (!mounted) return;
-      setState(() => _fabFadeIn = true);
-    });
   }
 
-  void _scheduleFabDeemphasize() {
-    _fabDeemphasizeTimer?.cancel();
-    _fabDeemphasizeTimer = Timer(_fabDeemphasizeDelay, () {
-      if (!mounted) return;
-      setState(() => _fabEmphasized = false);
-      _fabDeemphasizeTimer = null;
-    });
-  }
-
-  double get _fabAnimatedOpacity {
-    if (!_fabLayerMounted) return 0.0;
-    if (!_fabFadeIn) return 0.0;
-    if (_dragging || _copyBusy || _fabEmphasized) return 1.0;
-    return _active ? _fabOpacityInspectorOn : _fabOpacityIdle;
-  }
-
-  void _setInspectorActive(bool value) {
-    devInspectorActiveNotifier.value = value;
-    HapticFeedback.lightImpact();
+  void _onCopyTriggered() {
+    if (!devInspectorCopyTriggerNotifier.value) return;
+    devInspectorCopyTriggerNotifier.value = false;
+    if (!_active) return;
+    unawaited(_copySelection());
   }
 
   void _handleActiveChanged() {
@@ -227,24 +326,140 @@ class _DevInspectorState extends State<DevInspector>
     _selectedInfo = null;
     _selectedRender = null;
     _highlightRect = null;
+    _transitionFromRect = null;
+    _transitionToRect = null;
+    _transitionFromGlobalRect = null;
+    _transitionToGlobalRect = null;
+    if (_transitionCtrl.isAnimating) _transitionCtrl.stop();
     _stopHighlightTicker();
+    devInspectorHighlightGlobalRect.value = null;
+    _history.clear();
+    _historyCursor = -1;
+  }
+
+  void _pushHistory(DevInspectorInfo info, RenderObject renderObject) {
+    // Drop anything ahead of the cursor — selecting a new widget after
+    // pressing ← invalidates the "forward" history (same as a browser).
+    if (_historyCursor < _history.length - 1) {
+      _history.removeRange(_historyCursor + 1, _history.length);
+    }
+    _history.add((info: info, renderObject: renderObject));
+    if (_history.length > _historyCapacity) {
+      _history.removeAt(0);
+    }
+    _historyCursor = _history.length - 1;
   }
 
   void _onInspectorTap(Offset globalPosition) {
-    final picked = DevInspectorService.pickAt(globalPosition);
+    final RenderObject? content = _contentKey.currentContext?.findRenderObject();
+    if (content is! RenderBox) {
+      HapticFeedback.heavyImpact();
+      return;
+    }
+    var picked = DevInspectorService.pickAtInBox(content, globalPosition);
     if (picked == null) {
       HapticFeedback.heavyImpact();
       return;
     }
+
+    // Repeat-click bubbles the selection up: if the tap landed on the SAME
+    // widget that's already selected, climb one level up the meaningful
+    // hierarchy instead of re-selecting it.
+    if (_selectedRender != null &&
+        identical(picked.renderObject, _selectedRender)) {
+      final climbed = DevInspectorService.climbFrom(picked.renderObject);
+      if (climbed != null) picked = climbed;
+    }
+
+    final Rect? newRect = _rectInOverlaySpace(picked.renderObject);
+    final Rect? newGlobalRect = _rectInRootSpace(picked.renderObject);
+    final Rect? fromRect = _highlightRect;
+    final Rect? fromGlobalRect = devInspectorHighlightGlobalRect.value;
+
     setState(() {
-      _selectedInfo = picked.info;
+      _selectedInfo = picked!.info;
       _selectedRender = picked.renderObject;
-      _highlightRect = picked.info.boundingBox;
     });
-    _startHighlightTicker();
+
+    if (!_navigatingHistory) {
+      _pushHistory(picked.info, picked.renderObject);
+    }
+
+    _animateHighlightTo(
+      fromRect: fromRect,
+      toRect: newRect,
+      fromGlobalRect: fromGlobalRect,
+      toGlobalRect: newGlobalRect,
+    );
     HapticFeedback.selectionClick();
   }
 
+  /// Animates the highlight from [fromRect] to [toRect] in ~140 ms, then hands
+  /// off to the per-frame ticker (which keeps the highlight glued to the
+  /// widget if it animates internally). If there's no previous rect or no
+  /// change in geometry, the new rect is applied instantly.
+  void _animateHighlightTo({
+    required Rect? fromRect,
+    required Rect? toRect,
+    required Rect? fromGlobalRect,
+    required Rect? toGlobalRect,
+  }) {
+    _stopHighlightTicker();
+    if (_transitionCtrl.isAnimating) _transitionCtrl.stop();
+
+    if (fromRect == null || toRect == null || fromRect == toRect) {
+      setState(() => _highlightRect = toRect);
+      devInspectorHighlightGlobalRect.value = toGlobalRect;
+      if (toRect != null && _selectedRender != null) _startHighlightTicker();
+      return;
+    }
+
+    _transitionFromRect = fromRect;
+    _transitionToRect = toRect;
+    _transitionFromGlobalRect = fromGlobalRect;
+    _transitionToGlobalRect = toGlobalRect;
+    _transitionCtrl.forward(from: 0.0).whenComplete(() {
+      if (!mounted) return;
+      if (_transitionCtrl.status != AnimationStatus.completed) return;
+      setState(() => _highlightRect = toRect);
+      devInspectorHighlightGlobalRect.value = toGlobalRect;
+      _transitionFromRect = null;
+      _transitionToRect = null;
+      _transitionFromGlobalRect = null;
+      _transitionToGlobalRect = null;
+      if (_selectedRender != null) _startHighlightTicker();
+    });
+  }
+
+  /// Computes the bounds of [target] in the overlay's local coordinate space,
+  /// walking the paint-transform matrix directly. This works regardless of any
+  /// transforms applied above the overlay (e.g. WebDevicePreview's scale).
+  Rect? _rectInOverlaySpace(RenderObject target) {
+    if (!target.attached) return null;
+    final RenderObject? overlay =
+        _overlayKey.currentContext?.findRenderObject();
+    if (overlay == null || !overlay.attached) return null;
+    try {
+      final Matrix4 transform = target.getTransformTo(overlay);
+      return MatrixUtils.transformRect(transform, target.paintBounds);
+    } catch (_) {
+      return null;
+    }
+  }
+
+  /// Computes the bounds of [target] in **root view coordinates** (the browser
+  /// window / native window). Used to drive the external highlight overlay
+  /// that sits ABOVE the device frame in WebDevicePreview.
+  Rect? _rectInRootSpace(RenderObject target) {
+    if (!target.attached) return null;
+    try {
+      final Matrix4 transform = target.getTransformTo(null);
+      return MatrixUtils.transformRect(transform, target.paintBounds);
+    } catch (_) {
+      return null;
+    }
+  }
+
   void _startHighlightTicker() {
     _highlightTicker ??= createTicker(_onHighlightTick);
     if (!_highlightTicker!.isActive) _highlightTicker!.start();
@@ -257,13 +472,17 @@ class _DevInspectorState extends State<DevInspector>
   void _onHighlightTick(Duration _) {
     final RenderObject? target = _selectedRender;
     if (target == null) return;
-    final Rect? rect = DevInspectorService.remeasure(target);
-    if (rect == null) {
+    if (!target.attached) {
       setState(_clearSelection);
       return;
     }
-    if (_highlightRect != rect) {
-      setState(() => _highlightRect = rect);
+    final Rect? local = _rectInOverlaySpace(target);
+    if (local != null && _highlightRect != local) {
+      setState(() => _highlightRect = local);
+    }
+    final Rect? global = _rectInRootSpace(target);
+    if (global != devInspectorHighlightGlobalRect.value) {
+      devInspectorHighlightGlobalRect.value = global;
     }
   }
 
@@ -359,17 +578,10 @@ class _DevInspectorState extends State<DevInspector>
         data: shellTheme,
         child: Builder(
           builder: (BuildContext context) {
-            final KasyColors colors = context.colors;
-
-            // Default: bottom-right, just above the home bottom nav (still draggable).
-            // ~16px from right; larger bottom inset → sits a bit higher above the bar.
-            _fabDx ??= size.width - 68.0;
-            _fabDy ??= size.height - padding.bottom - 152.0;
-
             return Stack(
               clipBehavior: Clip.none,
               children: <Widget>[
-                widget.child,
+                KeyedSubtree(key: _contentKey, child: widget.child),
                 if (_active)
                   Positioned.fill(
                     child: Listener(
@@ -378,61 +590,19 @@ class _DevInspectorState extends State<DevInspector>
                           _onInspectorTap(ev.position),
                       child: IgnorePointer(
                         child: CustomPaint(
+                          key: _overlayKey,
                           painter: _HighlightPainter(rect: _highlightRect),
                           size: Size.infinite,
                         ),
                       ),
                     ),
                   ),
-                if (_fabLayerMounted &&
-                    devInspectorFabEnabledNotifier.value)
+                if (_active)
                   Positioned(
-                    left: _fabDx,
-                    top: _fabDy,
-                    child: AnimatedOpacity(
-                      opacity: _fabAnimatedOpacity,
-                      duration: _fabOpacityAnimation,
-                      curve: Curves.easeOutCubic,
-                      child: GestureDetector(
-                        onTapDown: (_) => setState(() => _fabEmphasized = true),
-                        onTap: () {
-                          if (_active) {
-                            _copySelection().whenComplete(
-                              _scheduleFabDeemphasize,
-                            );
-                          } else {
-                            _setInspectorActive(true);
-                            _scheduleFabDeemphasize();
-                          }
-                        },
-                        onPanStart: (_) => setState(() {
-                          _dragging = true;
-                          _fabEmphasized = true;
-                        }),
-                        onPanUpdate: (DragUpdateDetails details) {
-                          setState(() {
-                            _fabDx = (_fabDx! + details.delta.dx).clamp(
-                              8.0,
-                              size.width - 60.0,
-                            );
-                            _fabDy = (_fabDy! + details.delta.dy).clamp(
-                              padding.top + 8.0,
-                              size.height - padding.bottom - 60.0,
-                            );
-                          });
-                        },
-                        onPanEnd: (_) {
-                          if (!mounted) return;
-                          setState(() => _dragging = false);
-                          _scheduleFabDeemphasize();
-                        },
-                        child: _EntryFab(
-                          dragging: _dragging,
-                          active: _active,
-                          busy: _copyBusy,
-                          colors: colors,
-                        ),
-                      ),
+                    bottom: padding.bottom + 12,
+                    right: 12,
+                    child: const IgnorePointer(
+                      child: _InspectorStatusPill(),
                     ),
                   ),
                 if (_copyFeedbackText != null)
@@ -483,62 +653,6 @@ class _DevInspectorState extends State<DevInspector>
   }
 }
 
-class _EntryFab extends StatelessWidget {
-  const _EntryFab({
-    required this.dragging,
-    required this.active,
-    required this.busy,
-    required this.colors,
-  });
-
-  final bool dragging;
-  final bool active;
-  final bool busy;
-  final KasyColors colors;
-
-  @override
-  Widget build(BuildContext context) {
-    return Semantics(
-      label: active ? t.devInspector.copyForAi : t.devInspector.activate,
-      button: true,
-      child: AnimatedContainer(
-        duration: const Duration(milliseconds: 180),
-        width: 52,
-        height: 52,
-        decoration: BoxDecoration(
-          color: colors.surface,
-          shape: BoxShape.circle,
-          border: Border.all(
-            color: colors.onSurface.withValues(alpha: 0.14),
-            width: 1.5,
-          ),
-          boxShadow: <BoxShadow>[
-            BoxShadow(
-              color: colors.onSurface.withValues(alpha: dragging ? 0.20 : 0.08),
-              blurRadius: dragging ? 18 : 10,
-              offset: Offset(0, dragging ? 6 : 3),
-            ),
-          ],
-        ),
-        child: busy
-            ? SizedBox(
-                width: 20,
-                height: 20,
-                child: CircularProgressIndicator(
-                  strokeWidth: 2,
-                  valueColor: AlwaysStoppedAnimation<Color>(colors.primary),
-                ),
-              )
-            : Icon(
-                active ? KasyIcons.copy : KasyIcons.widgets,
-                color: colors.primary,
-                size: 22,
-              ),
-      ),
-    );
-  }
-}
-
 class _HighlightPainter extends CustomPainter {
   _HighlightPainter({required this.rect});
 
@@ -564,3 +678,96 @@ class _HighlightPainter extends CustomPainter {
   bool shouldRepaint(_HighlightPainter oldDelegate) =>
       oldDelegate.rect != rect;
 }
+
+/// Minimal status pill tucked in the bottom-right corner while the inspector
+/// is active. Mirrors the role of the WebDevicePreview chrome (which already
+/// shows inspector state); hidden when that chrome is present via
+/// [devInspectorSuppressStatusPillNotifier].
+class _InspectorStatusPill extends StatelessWidget {
+  const _InspectorStatusPill();
+
+  @override
+  Widget build(BuildContext context) {
+    return ValueListenableBuilder<bool>(
+      valueListenable: devInspectorSuppressStatusPillNotifier,
+      builder: (BuildContext context, bool suppressed, Widget? _) {
+        if (suppressed) return const SizedBox.shrink();
+        return Container(
+          padding: const EdgeInsets.symmetric(horizontal: 9, vertical: 5),
+          decoration: BoxDecoration(
+            color: const Color(0xB3111111),
+            borderRadius: BorderRadius.circular(999),
+            boxShadow: const <BoxShadow>[
+              BoxShadow(
+                color: Color(0x33000000),
+                blurRadius: 8,
+                offset: Offset(0, 2),
+              ),
+            ],
+          ),
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            children: <Widget>[
+              const _PulsingDot(),
+              const SizedBox(width: 7),
+              Text(
+                t.devInspector.statusActive,
+                style: const TextStyle(
+                  color: Color(0xE6FFFFFF),
+                  fontSize: 10.5,
+                  fontWeight: FontWeight.w500,
+                  letterSpacing: 0.2,
+                ),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}
+
+class _PulsingDot extends StatefulWidget {
+  const _PulsingDot();
+  @override
+  State<_PulsingDot> createState() => _PulsingDotState();
+}
+
+class _PulsingDotState extends State<_PulsingDot>
+    with SingleTickerProviderStateMixin {
+  late final AnimationController _ctrl;
+
+  @override
+  void initState() {
+    super.initState();
+    _ctrl = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 1100),
+    )..repeat(reverse: true);
+  }
+
+  @override
+  void dispose() {
+    _ctrl.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedBuilder(
+      animation: _ctrl,
+      builder: (BuildContext context, Widget? _) {
+        final double t = Curves.easeInOut.transform(_ctrl.value);
+        final double alpha = 0.45 + 0.55 * t;
+        return Container(
+          width: 7,
+          height: 7,
+          decoration: BoxDecoration(
+            color: _highlightColor.withValues(alpha: alpha),
+            shape: BoxShape.circle,
+          ),
+        );
+      },
+    );
+  }
+}