@buoy-gg/core 7.0.36 → 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/ToolHost.js

@@ -189,6 +189,7 @@ export function ToolModalShell({
       subtitle: subtitle
     }), /*#__PURE__*/_jsxs(ModalHeader.Actions, {
       children: [!isSearchActive && actions, searchable && !isSearchActive && /*#__PURE__*/_jsx(HeaderSearchButton, {
+        variant: "chip",
         testID: `tool-search-${app.id}`,
         onPress: () => setIsSearchActive(true)
       })]

package/lib/module/floatingMenu/autoExternalSync.js

@@ -19,6 +19,7 @@
  */
 import { useEffect, useMemo, useRef } from "react";
 import { Platform } from "react-native";
+import { LicenseManager } from "@buoy-gg/license";
 import { reportOptionalRequireError } from "./optionalRequire.js";
 import { appSyncAdapter } from "./sync/appSyncAdapter.js";
 import { useDeviceIdentity } from "./deviceIdentity.js";
@@ -285,11 +286,11 @@ export function AutoExternalSync({
   useEffect(() => {
     if (!socket) return;
     const emitLicense = () => {
+      if (!LicenseManager.hasAccountAccess() || !socket.connected) return;
       socket.emit("device-license", {
         isPro: licenseRef.current.isPro ? "1" : "0",
         // Brokers older than the tier split ignore this; newer ones prefer it.
-        tier: licenseRef.current.tier ?? (licenseRef.current.isPro ? "pro" : "anonymous"),
-        licenseKey: licenseRef.current.licenseKey ?? ""
+        tier: licenseRef.current.tier ?? (licenseRef.current.isPro ? "pro" : "free")
       });
     };
     if (socket.connected) emitLicense();

package/lib/module/floatingMenu/dial/DialDevTools.js

@@ -11,7 +11,7 @@ import { getRankedToolIds, isDialUsageLoaded, loadDialUsage, recordToolUsage } f
 import { persistentStorage, useHintsDisabled, devToolsStorageKeys, buoyColors, ToolBackground, useToolBackground } from "@buoy-gg/shared-ui";
 import { DevToolsSettingsModal, useDevToolsSettings } from "../DevToolsSettingsModal";
 import { useProAccess } from "@buoy-gg/license";
-import { renderAppIcon } from "../AppIcon.js";
+import { renderAppIcon } from "../AppIcon";
 import { useAppHost } from "../AppHost";
 import { OnboardingTooltip } from "./OnboardingTooltip";
 import { getDialLayout, MAX_DIAL_SLOTS, DIAL_BUTTON_SIZE, dialAnimationConfig, dialColors } from "@buoy-gg/floating-tools-core";
@@ -21,6 +21,14 @@ import { getDialLayout, MAX_DIAL_SLOTS, DIAL_BUTTON_SIZE, dialAnimationConfig, d
 // snapshot goes stale when the window resizes after load (web/desktop).
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const BUTTON_SIZE = DIAL_BUTTON_SIZE;
+/** The dial face is a circle, so its centre is the middle of the measured square. */
+const DIAL_BACKGROUND_FOCUS = {
+  x: 0.5,
+  y: 0.5
+};
+// Radius kept clear of grid spokes around the glass hub (its outer disc is
+// 0.75 × BUTTON_SIZE, plus a breath).
+const HUB_CLEARANCE = BUTTON_SIZE * 0.75 + 6;
 
 /**
  * The centre button's idle pulse, off by design.
@@ -97,6 +105,11 @@ export const DialDevTools = ({
     },
     gridLine: {
       width: circleSize
+    },
+    // Each spoke is two segments that stop short of the glass hub, so the
+    // six lines never meet in the middle where the background shows through.
+    spoke: {
+      width: circleSize / 2 - HUB_CLEARANCE
     }
   }), [circleSize]);
 
@@ -222,7 +235,7 @@ export const DialDevTools = ({
         iconComponent: typeof app.icon === "function" ? app.icon : undefined,
         color: app.color ?? buoyColors.primary,
         onPress: () => {
-          // Record usage so frequently/recently used tools rank toward page 1.
+          // Put this tool first the next time the dial opens.
           void recordToolUsage(app.id);
 
           // Call the app's onPress callback if provided, passing actions for
@@ -586,16 +599,23 @@ export const DialDevTools = ({
             style: styles.gridPattern,
             children: Array.from({
               length: 6
-            }).map((_, i) => /*#__PURE__*/_jsx(View, {
+            }).map((_, i) => /*#__PURE__*/_jsxs(View, {
               style: [styles.gridLine, sizeStyles.gridLine, {
                 transform: [{
                   rotate: `${i * 60}deg`
                 }]
-              }]
+              }],
+              children: [/*#__PURE__*/_jsx(View, {
+                style: [styles.spoke, sizeStyles.spoke, styles.spokeLeft]
+              }), /*#__PURE__*/_jsx(View, {
+                style: [styles.spoke, sizeStyles.spoke, styles.spokeRight]
+              })]
             }, i))
           }), backgroundId === "hyperspace" ? /*#__PURE__*/_jsx(DialHyperspace, {
             size: circleSize
-          }) : /*#__PURE__*/_jsx(ToolBackground, {})]
+          }) : /*#__PURE__*/_jsx(ToolBackground, {
+            focus: DIAL_BACKGROUND_FOCUS
+          })]
         }), allDialIcons.filter(({
           page
         }) => page === safePage).map(({
@@ -753,9 +773,20 @@ const styles = StyleSheet.create({
   },
   gridLine: {
     position: "absolute",
+    height: 1
+  },
+  spoke: {
+    position: "absolute",
+    top: 0,
     height: 1,
     backgroundColor: dialColors.dialGridLine
   },
+  spokeLeft: {
+    left: 0
+  },
+  spokeRight: {
+    right: 0
+  },
   buttonContainer: {
     zIndex: 1,
     backgroundColor: "transparent",
@@ -766,6 +797,10 @@ const styles = StyleSheet.create({
     height: BUTTON_SIZE * 1.5,
     borderRadius: BUTTON_SIZE
   },
+  // The hub is glass: no rings, no opaque fill. The outer disc is a barely-
+  // there shade and the inner button a soft puck, so the tool background runs
+  // through the middle of the dial while BUOY / PRO stay legible. The spokes
+  // stop at HUB_CLEARANCE so nothing draws under it.
   buttonGradient: {
     width: "100%",
     height: "100%",
@@ -773,7 +808,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     padding: 4,
-    backgroundColor: dialColors.dialBackground,
+    backgroundColor: dialColors.hubHalo,
     position: "relative",
     overflow: "hidden"
   },
@@ -800,14 +835,12 @@ const styles = StyleSheet.create({
     borderRadius: BUTTON_SIZE
   },
   buttonBorder: {
-    backgroundColor: dialColors.dialGridLine,
+    backgroundColor: dialColors.hubFill,
     alignItems: "center",
     justifyContent: "center",
     width: BUTTON_SIZE * 1.2,
     height: BUTTON_SIZE * 1.2,
-    borderRadius: BUTTON_SIZE * 0.6,
-    borderWidth: 2,
-    borderColor: dialColors.dialBorder
+    borderRadius: BUTTON_SIZE * 0.6
   },
   button: {
     width: BUTTON_SIZE,

package/lib/module/floatingMenu/dial/DialDevTools.web.js

@@ -548,6 +548,8 @@ export function DialMenu({
   // Computed values
   const buttonContainerSize = layout.buttonSize * dialStyles.centerButton.containerRatio;
   const buttonBorderSize = layout.buttonSize * dialStyles.centerButton.borderRatio;
+  // Grid spokes stop this far from the centre: the hub's outer disc plus a breath.
+  const hubClearance = layout.buttonSize * dialStyles.centerButton.containerRatio / 2 + 6;
   const isAnimating = entranceComplete && !isExiting;
   return /*#__PURE__*/_jsxs("div", {
     role: "dialog",
@@ -623,10 +625,19 @@ export function DialMenu({
           left: 0,
           right: 0,
           height: dialStyles.grid.lineHeight,
-          backgroundColor: dialColors.dialGridLine,
           transform: `rotate(${deg}deg)`,
           transformOrigin: 'center'
-        }
+        },
+        children: ['left', 'right'].map(side => /*#__PURE__*/_jsx("div", {
+          style: {
+            position: 'absolute',
+            top: 0,
+            [side]: 0,
+            width: `calc(50% - ${hubClearance}px)`,
+            height: dialStyles.grid.lineHeight,
+            backgroundColor: dialColors.dialGridLine
+          }
+        }, side))
       }, deg)), paddedIcons.map((icon, index) => /*#__PURE__*/_jsx(DialIconItem, {
         icon: icon,
         index: index,
@@ -646,7 +657,10 @@ export function DialMenu({
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          backgroundColor: dialColors.dialBackground,
+          // Glass hub — see the native twin: a barely-there shade on the outer
+          // disc, a soft puck inside, no rings, so the tool background runs
+          // through the middle of the dial.
+          backgroundColor: dialColors.hubHalo,
           borderRadius: layout.buttonSize,
           overflow: 'hidden',
           transform: `scale(${centerButtonScale * centerPulseScale})`,
@@ -685,8 +699,7 @@ export function DialMenu({
             width: buttonBorderSize,
             height: buttonBorderSize,
             borderRadius: layout.buttonSize * dialStyles.centerButton.borderRadiusRatio,
-            backgroundColor: dialColors.dialGridLine,
-            border: `${dialStyles.centerButton.borderWidth}px solid ${dialColors.dialBorder}`,
+            backgroundColor: dialColors.hubFill,
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center'