@buoy-gg/core 7.0.35 → 7.0.38

package/lib/module/floatingMenu/DevToolsSettingsModal.js

@@ -4,10 +4,10 @@ import { useState, useEffect, useCallback, useMemo } from "react";
 import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Dimensions, Platform } from "react-native";
 import { settingsBus } from "./settingsBus.js";
 import { useDesktopSyncStatus } from "./useDesktopSyncStatus.js";
-import { SentryBugIcon, WifiCircuitIcon, ImageOverlayIcon, RenderCountIcon, Info, Layers, ChevronRightIcon, ChevronDown, getStorageBackendType, persistentStorage, Trash2, CheckCircle2, LicenseEntryModal, BackgroundSwitcher, night, NightCard, NightRows, NightSectionLabel, NightFootnote, NightSwitch, NightButton, NightSegmented, NightBadge, NightSeparator, monoFont } from "@buoy-gg/shared-ui";
+import { SentryIcon, WifiCircuitIcon, ImageOverlayIcon, RenderCountIcon, Info, Layers, ChevronRightIcon, ChevronDown, getStorageBackendType, persistentStorage, Trash2, CheckCircle2, LicenseEntryModal, BackgroundSwitcher, night, NightCard, NightRows, NightSectionLabel, NightFootnote, NightSwitch, NightButton, NightSegmented, NightBadge, NightSeparator, monoFont } from "@buoy-gg/shared-ui";
 import { EnvIcon, StorageIcon, RoutesIcon, NetworkIcon, QueryIcon, HighlighterIcon, ReduxIcon, EventsIcon } from "@buoy-gg/floating-tools-core";
 import { useDefaultConfig } from "./DefaultConfigContext.js";
-import { renderAppIcon } from "./AppIcon.js";
+import { renderAppIcon } from "./AppIcon";
 import { JsModal, devToolsStorageKeys } from "@buoy-gg/shared-ui";
 import { useSafeAreaInsets } from "@buoy-gg/shared-ui";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -374,10 +374,9 @@ export const DevToolsSettingsModal = ({
           size: 18
         });
       case "sentry":
-        return /*#__PURE__*/_jsx(SentryBugIcon, {
+        return /*#__PURE__*/_jsx(SentryIcon, {
           size: 18,
-          colorPreset: "red",
-          noBackground: true
+          color: "#9945FF"
         });
       case "storage":
         return /*#__PURE__*/_jsx(StorageIcon, {
@@ -595,6 +594,7 @@ export const DevToolsSettingsModal = ({
       contentContainerStyle: styles.scrollContainer,
       children: [activeTab === "floating" && /*#__PURE__*/_jsx(_Fragment, {
         children: renderSection("Floating Tools", /*#__PURE__*/_jsx(NightCard, {
+          glass: true,
           children: /*#__PURE__*/_jsx(NightRows, {
             children: Object.entries(settings.floatingTools).map(([key, value]) => renderToolRow(key, value, false, () => toggleFloatingTool(key)))
           })
@@ -603,11 +603,13 @@ export const DevToolsSettingsModal = ({
         }))
       }), activeTab === "settings" && /*#__PURE__*/_jsxs(_Fragment, {
         children: [renderSection("Background", /*#__PURE__*/_jsx(NightCard, {
+          glass: true,
           padded: true,
           children: /*#__PURE__*/_jsx(BackgroundSwitcher, {
             embedded: true
           })
         })), renderSection("Storage", /*#__PURE__*/_jsxs(NightCard, {
+          glass: true,
           children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
             activeOpacity: 0.7,
             onPress: () => setIsStorageExpanded(!isStorageExpanded),
@@ -688,6 +690,7 @@ export const DevToolsSettingsModal = ({
             })]
           })]
         })), desktopSyncStatus && desktopSyncStatus.state !== "idle" && renderSection("Desktop Sync", /*#__PURE__*/_jsxs(NightCard, {
+          glass: true,
           children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
             activeOpacity: 0.7,
             onPress: () => toggleSettingExpanded("desktopSync"),
@@ -729,12 +732,14 @@ export const DevToolsSettingsModal = ({
             })]
           })]
         })), renderSection("Modal Behavior", /*#__PURE__*/_jsx(NightCard, {
+          glass: true,
           children: /*#__PURE__*/_jsxs(NightRows, {
             children: [renderGlobalSettingRow("enableSharedModalDimensions", "Shared Modal Size", "Sync dimensions across all tools", "When enabled, all tool modals will share the same size and position. Resizing one modal will affect all others. When disabled, each tool remembers its own size and position independently.", "Keep OFF for the best experience. This allows you to customize each tool's modal size separately."), Platform.OS !== "web" ? renderGlobalSettingRow("expandableWindowControls", "Expand Controls", "iPad-style expandable window buttons", "When enabled, the window control buttons (minimize, toggle mode, close) start as small dots and expand into larger, easy-to-tap buttons when pressed. When disabled, buttons are directly tappable at their small size.", "Keep ON for touch devices where the small buttons are hard to press. Turn OFF if you prefer direct single-tap access.") : null]
           })
         }))]
       }), activeTab === "pro" && /*#__PURE__*/_jsxs(_Fragment, {
         children: [renderSection("License", /*#__PURE__*/_jsx(NightCard, {
+          glass: true,
           children: /*#__PURE__*/_jsxs(View, {
             style: styles.settingRow,
             children: [/*#__PURE__*/_jsx(View, {
@@ -755,6 +760,7 @@ export const DevToolsSettingsModal = ({
           children: isPro ? "You have full access to all Buoy DevTools features." : licenseError ? licenseErrorIsTransport ? `Couldn't reach the license server (${licenseError}). A VPN or corporate proxy can block api.keygen.sh — turn it off and reload. Your key hasn't been rejected.` : `License check failed: ${licenseError}.` : "Upgrade to Pro to unlock all features and support development."
         })), !isPro && /*#__PURE__*/_jsxs(_Fragment, {
           children: [renderSection("Pro Features", /*#__PURE__*/_jsx(NightCard, {
+            glass: true,
             children: /*#__PURE__*/_jsx(NightRows, {
               children: ["Advanced Settings", "Priority Support"].map(feature => /*#__PURE__*/_jsxs(View, {
                 style: styles.featureRow,
@@ -790,6 +796,7 @@ export const DevToolsSettingsModal = ({
       customContent: /*#__PURE__*/_jsx(View, {
         style: styles.headerRow,
         children: /*#__PURE__*/_jsx(NightSegmented, {
+          glass: true,
           tabs: [{
             key: "floating",
             label: "Floating"
@@ -1079,7 +1086,7 @@ const styles = StyleSheet.create({
     maxHeight: 150
   },
   storageKeyItem: {
-    backgroundColor: night.color.surfaceElevated,
+    backgroundColor: night.color.glassElevated,
     borderRadius: night.radius.segment,
     paddingHorizontal: 10,
     paddingVertical: 7,

package/lib/module/floatingMenu/DevToolsSettingsModal.web.js

@@ -27,7 +27,7 @@ getToolLabel, getToolDescription,
 globalSettingsConfig
 // Types
 } from '@buoy-gg/floating-tools-react';
-import { QueryIcon, EnvIcon, StorageIcon, NetworkIcon, RoutesIcon, HighlighterIcon, ReduxIcon, EventsIcon, WifiIcon, ImageOverlayIcon, ZustandIcon, JotaiIcon } from '@buoy-gg/floating-tools-core';
+import { QueryIcon, SentryIcon, EnvIcon, StorageIcon, NetworkIcon, RoutesIcon, HighlighterIcon, ReduxIcon, EventsIcon, WifiIcon, ImageOverlayIcon, ZustandIcon, JotaiIcon } from '@buoy-gg/floating-tools-core';
 // JsModal.web + storage keys via the consumer's shared-ui web shim — the
 // settings sheet is a real JsModal on web now, same as native. The
 // BackgroundSwitcher is the same RN component native mounts: it renders under
@@ -61,6 +61,9 @@ const night = {
   surfaceElevated: '#161618',
   border: '#1A1A1C',
   separator: 'rgba(255, 255, 255, 0.08)',
+  glass: 'rgba(5, 5, 5, 0.50)',
+  glassElevated: 'rgba(255, 255, 255, 0.06)',
+  glassBorder: 'rgba(255, 255, 255, 0.07)',
   fillTertiary: 'rgba(255, 255, 255, 0.12)',
   buttonSurface: 'rgba(8, 10, 14, 0.85)',
   button: '#1C1C1C',
@@ -147,28 +150,6 @@ const Sparkles = ({
   })]
 });
 
-/** Fallback for shared-ui SentryBugIcon (native sentry row icon, red). */
-const AlertTriangle = ({
-  size = 24,
-  color = 'currentColor'
-}) => /*#__PURE__*/_jsxs("svg", {
-  width: size,
-  height: size,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: color,
-  strokeWidth: "2",
-  strokeLinecap: "round",
-  strokeLinejoin: "round",
-  children: [/*#__PURE__*/_jsx("path", {
-    d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M12 9v4"
-  }), /*#__PURE__*/_jsx("path", {
-    d: "M12 17h.01"
-  })]
-});
-
 /** shared-ui Info icon (native default tool icon). */
 const Info = ({
   size = 24,
@@ -305,10 +286,9 @@ function ToolIcon({
         size: size
       });
     case 'sentry':
-      // native: SentryBugIcon colorPreset="red" noBackground
-      return /*#__PURE__*/_jsx(AlertTriangle, {
+      return /*#__PURE__*/_jsx(SentryIcon, {
         size: size,
-        color: night.danger
+        color: "#9945FF"
       });
     case 'storage':
       // native passes bgColor=night surface for the BIF knock-out parts
@@ -444,11 +424,11 @@ function Footnote({
   });
 }
 
-/** native NightCard: #0C0C0C, radius 14, 1px #1A1A1C, clipped */
+/** native NightCard glass: 50% black, radius 14, 1px white-alpha hairline, clipped */
 const cardStyle = {
-  backgroundColor: night.surface,
+  backgroundColor: night.glass,
   borderRadius: 14,
-  border: `1px solid ${night.border}`,
+  border: `1px solid ${night.glassBorder}`,
   overflow: 'hidden'
 };
 
@@ -793,8 +773,8 @@ export function SettingsModal({
   const displayTabs = settingsTabs.filter(tab => tab.key !== 'pro');
 
   // Segmented control rendered inside the JsModal header — native passes a
-  // NightSegmented as header.customContent the same way. Track = night bg at
-  // radius 10 / padding 3; active thumb = surfaceElevated at radius 8 with
+  // NightSegmented glass as header.customContent the same way. Track = glass
+  // at radius 10 / padding 3; active thumb = glassElevated at radius 8 with
   // the accent underline glow (the Everlights All/Day tabs).
   const tabHeader = /*#__PURE__*/_jsx("div", {
     style: {
@@ -809,9 +789,9 @@ export function SettingsModal({
       style: {
         flex: 1,
         display: 'flex',
-        backgroundColor: night.bg,
+        backgroundColor: night.glass,
         borderRadius: 10,
-        border: `1px solid ${night.border}`,
+        border: `1px solid ${night.glassBorder}`,
         padding: 3,
         boxSizing: 'border-box'
       },
@@ -829,7 +809,7 @@ export function SettingsModal({
             padding: '8px 0',
             borderRadius: 8,
             border: 'none',
-            backgroundColor: isActive ? night.surfaceElevated : 'transparent',
+            backgroundColor: isActive ? night.glassElevated : 'transparent',
             color: isActive ? night.text : night.textSecondary,
             fontSize: 13,
             fontWeight: isActive ? 600 : 500,
@@ -1014,7 +994,7 @@ export function SettingsModal({
                     },
                     children: savedKeys.map(key => /*#__PURE__*/_jsx("div", {
                       style: {
-                        backgroundColor: night.surfaceElevated,
+                        backgroundColor: night.glassElevated,
                         borderRadius: 8,
                         padding: '7px 10px',
                         marginBottom: 4

package/lib/module/floatingMenu/FloatingDevTools.js

@@ -1,6 +1,8 @@
 "use strict";
 
-import React, { useMemo, useCallback, useEffect, useState } from "react";
+import { FloatingToolHost } from "@buoy-gg/shared-ui";
+import { AccountSetup } from "@buoy-gg/shared-ui";
+import React, { useMemo, useCallback, useEffect } from "react";
 import { View, StyleSheet } from "react-native";
 import { AppHostProvider } from "./AppHost";
 import { FloatingMenu } from "./FloatingMenu.js";
@@ -9,10 +11,10 @@ import { ToolOpenerBridge } from "./ToolOpenerBridge.js";
 import { autoDiscoverPresets, autoDiscoverPresetsWithCustom } from "./autoDiscoverPresets.js";
 import { sendInstallPing } from "../telemetry/installPing.js";
 import { isTelemetryEnabled } from "../Buoy.js";
-import { renderAppIcon } from "./AppIcon.js";
+import { renderAppIcon } from "./AppIcon";
 import { DevToolsVisibilityProvider } from "./DevToolsVisibilityContext.js";
 import { reportOptionalRequireError } from "./optionalRequire.js";
-import { HintsProvider, LicenseEntryModal, normalizeEnvironment } from "@buoy-gg/shared-ui";
+import { HintsProvider, normalizeEnvironment } from "@buoy-gg/shared-ui";
 import { MinimizedToolsProvider } from "./MinimizedToolsContext.js";
 import { validateDialConfig } from "./defaultConfig.js";
 import { DefaultConfigProvider } from "./DefaultConfigContext.js";
@@ -120,7 +122,7 @@ export const FloatingDevTools = ({
   disableHints = false,
   defaultFloatingTools,
   defaultDialTools,
-  requireLicense = false,
+  requireLicense: _requireLicense,
   licenseKey: licenseKeyProp,
   zustandStores,
   environment,
@@ -138,24 +140,27 @@ export const FloatingDevTools = ({
     isLicensed
   } = useProAccess();
 
-  // Get full license state for requireLicense gating
+  // Account admission is mandatory; paid feature gates remain separate.
   const {
     licenseKey,
     isInitialized,
-    tier
+    tier,
+    access
   } = useLicense();
+  const configuredMatches = licenseKeyProp === undefined || licenseKeyProp.trim().toUpperCase() === (licenseKey ?? "");
+  const accountAdmitted = configuredMatches && access.status === "admitted";
 
   // Anonymous install ping — dev-only, once a day, no project or tool data.
-  // Deliberately waits for the license to resolve so the tier it reports is
-  // the real one rather than the "anonymous" the manager starts at.
+  // Deliberately waits for admission to resolve so what it reports is the
+  // real outcome (the account's tier, or "locked") rather than the manager's
+  // starting state.
   useEffect(() => {
-    if (!isInitialized) return;
+    if (!isInitialized || access.status === "initializing") return;
     void sendInstallPing({
-      tier,
+      tier: access.status === "admitted" ? tier : "locked",
       enabled: isTelemetryEnabled()
     });
-  }, [isInitialized, tier]);
-  const [showLicenseModal, setShowLicenseModal] = useState(false);
+  }, [isInitialized, access.status, tier]);
 
   // Initialize license manager on mount, and set/clear license key when prop changes.
   // The `licenseKey` prop is the source of truth WHEN PROVIDED:
@@ -163,28 +168,12 @@ export const FloatingDevTools = ({
   //   - "" (blank) → EXPLICITLY clear the cached license (key was removed)
   //   - undefined  → don't touch it (the app may set a key via Buoy.init())
   useEffect(() => {
-    if (licenseKeyProp && licenseKeyProp.trim() !== "") {
-      LicenseManager.initialize().then(() => LicenseManager.setLicenseKey(licenseKeyProp)).catch(() => {});
-    } else if (licenseKeyProp === "") {
-      // Explicit removal: wipe the 30-day cache so Pro actually turns off.
-      LicenseManager.initialize().then(() => LicenseManager.clearLicense()).catch(() => {});
-    } else {
-      LicenseManager.initialize();
-    }
+    void LicenseManager.configure(licenseKeyProp).catch(() => {});
   }, [licenseKeyProp]);
 
-  // Show license modal if requireLicense is enabled and no valid license
-  useEffect(() => {
-    if (requireLicense && isInitialized && !licenseKey) {
-      setShowLicenseModal(true);
-    } else if (licenseKey) {
-      setShowLicenseModal(false);
-    }
-  }, [requireLicense, isInitialized, licenseKey]);
-
   // Register zustand stores once on mount if provided
   useEffect(() => {
-    if (!zustandStores) return;
+    if (!zustandStores || access.status === "locked") return;
     try {
       const {
         watchStores
@@ -193,7 +182,7 @@ export const FloatingDevTools = ({
     } catch (e) {
       reportOptionalRequireError("@buoy-gg/zustand", e);
     }
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [zustandStores, access.status]);
 
   // Normalize dial tools configuration (truncates to max 6 with warning if needed)
   const normalizedDialTools = useMemo(() => {
@@ -450,17 +439,16 @@ export const FloatingDevTools = ({
 
   // Gate: only a PAID license works outside development.
   //
-  // Both untiered surfaces below it — anonymous (no key) and free (a key on the
-  // Free policy) — stay dev-only. `isLicensed` is safe to gate on because
-  // `isPro` is a strict mirror of `tier === "pro"`, so a free key reports false
-  // here even though it validates perfectly well.
+  // A free key (and, of course, no key at all) stays dev-only. `isLicensed` is
+  // safe to gate on because `isPro` is a strict mirror of `tier === "pro"`, so
+  // a free key reports false here even though it validates perfectly well.
   //
   // When Business on-device login lands, this becomes the boundary that a
   // logged-in QA/support seat crosses WITHOUT a key in the build — i.e.
   // `isLicensed || tierSource === "session"`. Nothing else should.
   const isDevelopment = typeof __DEV__ !== "undefined" && __DEV__;
   if (!isDevelopment && !isLicensed) {
-    // Anonymous or free user in production - don't render DevTools.
+    // Free or unadmitted user in production - don't render DevTools.
     // NOTE for whoever relaxes this for the free tier: desktop sync does NOT
     // ride on this check. It re-tests `isLicensed` itself (externalSyncGate),
     // so opening this door does not open a broker socket. Keep it that way.
@@ -487,10 +475,16 @@ export const FloatingDevTools = ({
     requiredEnvVars: requiredEnvVars,
     customApps: syncApps
   });
+  if (!accountAdmitted) {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [access.status === "initializing" && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [ReduxAutoInstrument && /*#__PURE__*/_jsx(ReduxAutoInstrument, {}), ConsoleRoot && /*#__PURE__*/_jsx(ConsoleRoot, {}), RouteTracker && /*#__PURE__*/_jsx(RouteTracker, {}), ReactQueryTracker && /*#__PURE__*/_jsx(ReactQueryTracker, {})]
+      }), !headless && /*#__PURE__*/_jsx(AccountSetup, {})]
+    });
+  }
 
   // Headless (sync-only): tool adapters + route tracking + desktop sync, no
-  // on-device UI. requireLicense is intentionally skipped — there's nothing
-  // to gate. All hooks above already ran, so hook order is preserved, and
+  // on-device UI. Account admission above applies to this path too. All hooks above already ran, so hook order is preserved, and
   // AutoExternalSync still obeys `syncEnabled` (the broker must never be
   // contacted from a shipped build that didn't ask for it).
   if (headless) {
@@ -506,16 +500,6 @@ export const FloatingDevTools = ({
     });
   }
 
-  // Gate: If requireLicense is enabled and no license, show only the license modal
-  if (requireLicense && isInitialized && !licenseKey) {
-    return /*#__PURE__*/_jsx(LicenseEntryModal, {
-      visible: showLicenseModal,
-      onClose: () => {} // Can't close without entering a license
-      ,
-      onSuccess: () => setShowLicenseModal(false)
-    });
-  }
-
   // Session blocking is handled inline by JsModal's SessionBlockedOverlay
   // No need to replace the entire UI - tools still render, but content is blocked
 
@@ -538,7 +522,9 @@ export const FloatingDevTools = ({
                 ...props,
                 apps: finalApps,
                 environment: resolvedEnvironment
-              }), props.hidden ? null : /*#__PURE__*/_jsx(AppOverlay, {}), /*#__PURE__*/_jsx(ToolOpenerBridge, {})]
+              }), props.hidden ? null : /*#__PURE__*/_jsxs(_Fragment, {
+                children: [/*#__PURE__*/_jsx(AppOverlay, {}), /*#__PURE__*/_jsx(FloatingToolHost, {})]
+              }), /*#__PURE__*/_jsx(ToolOpenerBridge, {})]
             })
           }), children, DebugBordersOverlay && /*#__PURE__*/_jsx(DebugBordersOverlay, {}), HighlightUpdatesOverlay && /*#__PURE__*/_jsx(HighlightUpdatesOverlay, {}), ImageOverlayOverlay && /*#__PURE__*/_jsx(ImageOverlayOverlay, {}), PerfMonitorOverlay && /*#__PURE__*/_jsx(PerfMonitorOverlay, {}), JsTopOverlay && /*#__PURE__*/_jsx(JsTopOverlay, {}), ImpersonateOverlay && /*#__PURE__*/_jsx(ImpersonateOverlay, {}), ScenariosOverlay && /*#__PURE__*/_jsx(ScenariosOverlay, {}), ReduxAutoInstrument && /*#__PURE__*/_jsx(ReduxAutoInstrument, {}), ConsoleRoot && /*#__PURE__*/_jsx(ConsoleRoot, {}), RouteTracker && /*#__PURE__*/_jsx(RouteTracker, {}), ReactQueryTracker && /*#__PURE__*/_jsx(ReactQueryTracker, {}), toolRegistry, syncEnabled && /*#__PURE__*/_jsx(AutoExternalSync, {
             options: externalSyncOptions(externalSync),

package/lib/module/floatingMenu/FloatingDevTools.web.js

@@ -1,5 +1,8 @@
 "use strict";
 
+import { FloatingToolHost } from "@buoy-gg/shared-ui/floating";
+import { LicenseManager, useLicense } from "@buoy-gg/license";
+import { AccountSetup } from "@buoy-gg/shared-ui";
 /**
  * FloatingDevTools - Unified dev tools component for React DOM Web.
  *
@@ -84,7 +87,7 @@ function MenuLauncherIcon({
 // Main Component
 // =============================
 
-export function FloatingDevTools(props) {
+function AdmittedFloatingDevTools(props) {
   // The tool host wraps everything so dial presses can open tool components
   // into the AppOverlay (web twin of the native AppHostProvider/AppOverlay).
   return /*#__PURE__*/_jsx(AppHostProvider, {
@@ -369,10 +372,28 @@ function FloatingDevToolsInner({
       onSettingsChange: _newSettings => {
         // Settings are already saved by the hook
       }
-    }), /*#__PURE__*/_jsx(AppOverlay, {})]
+    }), /*#__PURE__*/_jsx(AppOverlay, {}), /*#__PURE__*/_jsx(FloatingToolHost, {})]
   });
 }
 
 // =============================
 // Re-exports for convenience
-// =============================
+// =============================
+
+export function FloatingDevTools(props) {
+  const {
+    access,
+    isPro,
+    licenseKey
+  } = useLicense();
+  useEffect(() => {
+    void LicenseManager.configure(props.licenseKey);
+  }, [props.licenseKey]);
+  const matches = props.licenseKey === undefined || props.licenseKey.trim().toUpperCase() === (licenseKey ?? "");
+  const dev = typeof __DEV__ !== "undefined" ? __DEV__ : process.env.NODE_ENV !== "production";
+  if (!dev && !isPro) return null;
+  if (!matches || access.status !== "admitted") return props.headless ? null : /*#__PURE__*/_jsx(AccountSetup, {});
+  return /*#__PURE__*/_jsx(AdmittedFloatingDevTools, {
+    ...props
+  });
+}

package/lib/module/floatingMenu/FloatingMenu.js

@@ -4,7 +4,7 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
 import { TouchableOpacity, StyleSheet, View } from "react-native";
 import { absoluteFill } from "@buoy-gg/shared-ui";
 import { FloatingTools, UserStatus } from "./floatingTools";
-import { renderAppIcon } from "./AppIcon.js";
+import { renderAppIcon } from "./AppIcon";
 import { DialDevTools } from "./dial/DialDevTools";
 import { EnvironmentIndicator, persistentStorage, useHintsDisabled, devToolsStorageKeys, buoyColors } from "@buoy-gg/shared-ui";
 import { useDevToolsSettings } from "./DevToolsSettingsModal";

package/lib/module/floatingMenu/MinimizedToolsStack.js

@@ -1,14 +1,56 @@
 "use strict";
 
-import React, { useCallback, useEffect, useRef } from "react";
-import { Animated, TouchableOpacity, StyleSheet, Easing } from "react-native";
-import { ExpandablePopover } from "@buoy-gg/shared-ui";
+import React, { useCallback, useEffect, useRef, useSyncExternalStore } from "react";
+import { Animated, TouchableOpacity, View, Text, StyleSheet, Easing } from "react-native";
+import { ExpandablePopover, getToolAttention, subscribeToolAttention } from "@buoy-gg/shared-ui";
 import { useMinimizedTools } from "./MinimizedToolsContext.js";
 
+/**
+ * A hidden tool's "I need you". See `setToolAttention` in shared-ui — the tool
+ * publishes, the rail draws. Read through useSyncExternalStore so a badge set
+ * from inside a minimized sheet lands on the chip without the rail polling.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function useToolAttention(toolId) {
+  return useSyncExternalStore(subscribeToolAttention, () => getToolAttention(toolId), () => getToolAttention(toolId));
+}
+const ATTENTION_COLORS = {
+  needsInput: "#FF8329",
+  done: "#20C997",
+  failed: "#FF3B30"
+};
+
+/** needsInput outranks failed outranks done — the peek shows the one that matters most. */
+const ATTENTION_RANK = {
+  needsInput: 3,
+  failed: 2,
+  done: 1
+};
+
+/** The strongest attention across every minimized tool, for the folded peek. */
+function useStrongestAttention(toolIds) {
+  const key = toolIds.join("|");
+  return useSyncExternalStore(subscribeToolAttention, () => strongest(key), () => strongest(key));
+}
+const strongestCache = new Map();
+function strongest(key) {
+  let best = null;
+  for (const id of key ? key.split("|") : []) {
+    const a = getToolAttention(id);
+    if (a && (!best || ATTENTION_RANK[a.kind] > ATTENTION_RANK[best.kind])) best = a;
+  }
+  // Same value → same object, or useSyncExternalStore re-renders forever.
+  const prev = strongestCache.get(key);
+  if (prev && best && prev.kind === best.kind && prev.label === best.label) return prev;
+  if (!prev && !best) return null;
+  strongestCache.set(key, best);
+  return best;
+}
+
 // ============================================================================
 // Constants
 // ============================================================================
-import { jsx as _jsx } from "react/jsx-runtime";
+
 const PEEK_HEIGHT = 28;
 const TOOLBAR_WIDTH = 44;
 const TOOL_ITEM_SIZE = 32;
@@ -31,6 +73,7 @@ function GlitchToolButton({
   onSelect,
   index
 }) {
+  const attention = useToolAttention(tool.id);
   const glitchX = useRef(new Animated.Value(0)).current;
   const glitchOpacity = useRef(new Animated.Value(1)).current;
   const glitchScale = useRef(new Animated.Value(1)).current;
@@ -122,14 +165,14 @@ function GlitchToolButton({
       clearTimeout(timeoutId);
     };
   }, [glitchX, glitchOpacity, glitchScale, index]);
-  return /*#__PURE__*/_jsx(TouchableOpacity, {
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
     onPress: () => onSelect(tool),
     activeOpacity: 0.7,
     style: styles.toolButton,
-    accessibilityLabel: `Restore ${tool.title}`,
+    accessibilityLabel: attention ? `${tool.title} — ${attention.label}. Restore` : `Restore ${tool.title}`,
     accessibilityRole: "button",
     testID: `buoy-dock-restore-${tool.id}`,
-    children: /*#__PURE__*/_jsx(Animated.View, {
+    children: [/*#__PURE__*/_jsx(Animated.View, {
       style: {
         opacity: glitchOpacity,
         transform: [{
@@ -139,7 +182,17 @@ function GlitchToolButton({
         }]
       },
       children: tool.icon
-    })
+    }), attention ? /*#__PURE__*/_jsx(View, {
+      style: [styles.badge, {
+        backgroundColor: ATTENTION_COLORS[attention.kind]
+      }],
+      testID: `buoy-dock-badge-${tool.id}-${attention.kind}`,
+      pointerEvents: "none",
+      children: attention.kind === "needsInput" ? /*#__PURE__*/_jsx(Text, {
+        style: styles.badgeText,
+        children: "!"
+      }) : null
+    }) : null]
   });
 }
 
@@ -159,6 +212,7 @@ export function MinimizedToolsStack({
     minimizedTools,
     restore
   } = useMinimizedTools();
+  const peekAttention = useStrongestAttention(minimizedTools.map(t => t.id));
 
   // Calculate expanded height based on number of tools
   const expandedHeight = TOOLBAR_PADDING + minimizedTools.length * TOOL_ITEM_SIZE + (minimizedTools.length - 1) * ICON_GAP + ICON_GAP + COLLAPSE_BUTTON_SIZE + 4;
@@ -182,6 +236,11 @@ export function MinimizedToolsStack({
     collapsedLabel: `Show ${minimizedTools.length} minimized tools`,
     testID: "buoy-dock-peek",
     collapseTestID: "buoy-dock-collapse",
+    attention: peekAttention ? {
+      color: ATTENTION_COLORS[peekAttention.kind],
+      glyph: peekAttention.kind === "needsInput" ? "!" : undefined,
+      label: peekAttention.label
+    } : null,
     children: [...minimizedTools].reverse().map((tool, index) => /*#__PURE__*/_jsx(GlitchToolButton, {
       tool: tool,
       onSelect: handleToolPress,
@@ -201,5 +260,26 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: "transparent"
+  },
+  // Top-right of the chip. Needs-input carries a glyph; done/failed are a dot —
+  // the colour says which, the glyph says "act".
+  badge: {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    minWidth: 12,
+    height: 12,
+    borderRadius: 6,
+    paddingHorizontal: 2,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1.5,
+    borderColor: "#0C0C0C"
+  },
+  badgeText: {
+    color: "#000",
+    fontSize: 8,
+    fontWeight: "800",
+    lineHeight: 9
   }
 });