@buoy-gg/core 7.0.35 → 7.0.38

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

@@ -16,8 +16,41 @@
  * used before this replaced it.
  */
 
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { persistentStorage } from '@buoy-gg/shared-ui';
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { persistentStorage, getToolAttention, subscribeToolAttention } from '@buoy-gg/shared-ui';
+
+/** Twin of the native hook — see MinimizedToolsStack.tsx. */
+function useToolAttention(toolId) {
+  return useSyncExternalStore(subscribeToolAttention, () => getToolAttention(toolId), () => getToolAttention(toolId));
+}
+const ATTENTION_COLORS = {
+  needsInput: '#FF8329',
+  done: '#20C997',
+  failed: '#FF3B30'
+};
+const ATTENTION_RANK = {
+  needsInput: 3,
+  failed: 2,
+  done: 1
+};
+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;
+  }
+  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;
+}
+/** Twin of the native hook: the strongest attention across the folded dock. */
+function useStrongestAttention(toolIds) {
+  const key = toolIds.join('|');
+  return useSyncExternalStore(subscribeToolAttention, () => strongest(key), () => strongest(key));
+}
 import { useAppHost } from "./AppHost.web.js";
 
 // native MinimizedToolsStack.tsx constants
@@ -58,11 +91,13 @@ function ChevronGlyph({
   });
 }
 function GlitchToolButton({
+  id,
   title,
   icon,
   index,
   onPress
 }) {
+  const attention = useToolAttention(id);
   const innerRef = useRef(null);
   useEffect(() => {
     let mounted = true;
@@ -113,9 +148,9 @@ function GlitchToolButton({
       clearTimeout(timer);
     };
   }, [index]);
-  return /*#__PURE__*/_jsx("button", {
+  return /*#__PURE__*/_jsxs("button", {
     type: "button",
-    "aria-label": `Restore ${title}`,
+    "aria-label": attention ? `${title} — ${attention.label}. Restore` : `Restore ${title}`,
     onClick: onPress,
     style: {
       width: TOOL_ITEM_SIZE,
@@ -126,9 +161,10 @@ function GlitchToolButton({
       background: 'none',
       border: 'none',
       padding: 0,
-      cursor: 'pointer'
+      cursor: 'pointer',
+      position: 'relative'
     },
-    children: /*#__PURE__*/_jsx("div", {
+    children: [/*#__PURE__*/_jsx("div", {
       ref: innerRef,
       style: {
         display: 'flex',
@@ -136,7 +172,30 @@ function GlitchToolButton({
         justifyContent: 'center'
       },
       children: icon
-    })
+    }), attention ? /*#__PURE__*/_jsx("span", {
+      "aria-hidden": true,
+      "data-testid": `buoy-dock-badge-${id}-${attention.kind}`,
+      style: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        minWidth: 12,
+        height: 12,
+        borderRadius: 6,
+        padding: '0 2px',
+        boxSizing: 'border-box',
+        background: ATTENTION_COLORS[attention.kind],
+        border: '1.5px solid #0C0C0C',
+        color: '#000',
+        fontSize: 8,
+        fontWeight: 800,
+        lineHeight: '9px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      children: attention.kind === 'needsInput' ? '!' : ''
+    }) : null]
   });
 }
 export function MinimizedToolsStack({
@@ -149,6 +208,7 @@ export function MinimizedToolsStack({
   const minimized = openApps.filter(app => app.minimized && app.launchMode !== 'toggle-only');
   const [isExpanded, setIsExpanded] = useState(false);
   const [isStateRestored, setIsStateRestored] = useState(false);
+  const peekAttention = useStrongestAttention(minimized.map(app => app.id));
 
   // Restore + persist the expanded flag (native ExpandablePopover persistState).
   useEffect(() => {
@@ -216,6 +276,7 @@ export function MinimizedToolsStack({
           boxSizing: 'border-box'
         },
         children: [[...minimized].reverse().map((app, index) => /*#__PURE__*/_jsx(GlitchToolButton, {
+          id: app.id,
           title: app.title || app.id,
           icon: app.icon ?? /*#__PURE__*/_jsx("span", {
             style: {
@@ -270,7 +331,30 @@ export function MinimizedToolsStack({
         pointerEvents: isExpanded ? 'none' : 'auto',
         ...frame
       },
-      children: [/*#__PURE__*/_jsx(ChevronGlyph, {}), minimized.length > 1 && /*#__PURE__*/_jsx("span", {
+      children: [/*#__PURE__*/_jsx(ChevronGlyph, {}), peekAttention ? /*#__PURE__*/_jsx("span", {
+        "aria-hidden": true,
+        "data-testid": `buoy-dock-peek-attention`,
+        style: {
+          position: 'absolute',
+          top: 2,
+          right: 2,
+          minWidth: 11,
+          height: 11,
+          borderRadius: 6,
+          padding: '0 2px',
+          boxSizing: 'border-box',
+          background: ATTENTION_COLORS[peekAttention.kind],
+          border: '1.5px solid #0C0C0C',
+          color: '#000',
+          fontSize: 8,
+          fontWeight: 800,
+          lineHeight: '9px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        },
+        children: peekAttention.kind === 'needsInput' ? '!' : ''
+      }) : null, minimized.length > 1 && /*#__PURE__*/_jsx("span", {
         style: {
           fontSize: 9,
           fontWeight: 600,

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'

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

@@ -1,18 +1,12 @@
 "use strict";
 
 /**
- * Dial Usage Store - persists and ranks dial tool usage.
- *
- * Wraps the pure scoring logic from `@buoy-gg/floating-tools-core` with a
- * persisted, in-memory cache. The dial menu uses this to order tools by how
- * recently/frequently they are used, so the most-used tools land on page 1.
- *
- * The cache is loaded eagerly on import so `getRankedToolIds` can run
- * synchronously by the time the dial opens.
+ * Persists dial usage and orders tools by their last launch.
+ * The cache loads on import so opening the dial can rank tools synchronously.
  */
 
 import { persistentStorage, devToolsStorageKeys } from "@buoy-gg/shared-ui";
-import { rankToolIds, recordUsage, pruneUsage } from "@buoy-gg/floating-tools-core";
+import { recordUsage, pruneUsage } from "@buoy-gg/floating-tools-core";
 const STORAGE_KEY = devToolsStorageKeys.dial.usage();
 let cache = {};
 let loaded = false;
@@ -50,15 +44,15 @@ export function isDialUsageLoaded() {
   return loaded;
 }
 
-/**
- * Rank tool ids by recency-weighted usage, highest first. Synchronous —
- * operates against the in-memory cache. Never-used tools keep their original
- * order as a tie-breaker.
- *
- * @param orderedIds - Tool ids in their default/registration order
- */
+/** Most recently opened first; unused tools keep registration order. */
 export function getRankedToolIds(orderedIds) {
-  return rankToolIds(orderedIds, cache, Date.now());
+  return orderedIds.map((id, index) => ({
+    id,
+    index,
+    lastUsed: cache[id]?.lastUsed ?? 0
+  })).sort((a, b) => b.lastUsed - a.lastUsed || a.index - b.index).map(({
+    id
+  }) => id);
 }
 
 /**
@@ -69,7 +63,9 @@ export function getRankedToolIds(orderedIds) {
 export async function recordToolUsage(id) {
   if (!id) return;
   if (!loaded) await loadDialUsage();
-  const now = Date.now();
+
+  // Preserve launch order even when presses share a timestamp or the clock moves back.
+  const now = Math.max(Date.now(), ...Object.values(cache).map(entry => entry.lastUsed + 1));
   cache = pruneUsage(recordUsage(cache, id, now), now);
   try {
     await persistentStorage.setItem(STORAGE_KEY, JSON.stringify(cache));

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

@@ -1,64 +1,3 @@
 "use strict";
 
-import { Dimensions } from "react-native";
-
-/**
- * Shared constants for onboarding tooltip positioning
- * These ensure the floating menu aligns perfectly under the tooltip arrow
- * All positions are calculated dynamically based on screen size
- */
-
-// Arrow dimensions (relative positioning)
-export const ARROW_BOTTOM_OFFSET = -40; // Arrow extends below tooltip
-export const ARROW_HEIGHT = 20; // borderTopWidth of arrow
-export const SPACING_GAP = 10; // Gap between arrow tip and target element
-
-/**
- * Calculate the center Y position of the screen
- * This is used to vertically center the onboarding UI
- *
- * @returns Y coordinate at the center of the screen
- */
-export function getScreenCenterY() {
-  const {
-    height: screenHeight
-  } = Dimensions.get("window");
-  return screenHeight / 2;
-}
-
-/**
- * Calculate the tooltip position to center it vertically on screen
- * Uses flexbox-style centering - tooltip will center itself with its actual size
- *
- * @returns Distance from screen bottom for tooltip positioning
- */
-export function calculateTooltipPosition() {
-  // Position from center - tooltip will be centered with transform or flex
-  // We return a value that's slightly above center to account for the arrow below
-  const centerY = getScreenCenterY();
-
-  // Approximate offset to center the tooltip+arrow combo
-  // This is a reasonable estimate that works for most tooltip sizes
-  const estimatedHalfHeight = 130; // ~half of (tooltip + arrow)
-
-  return centerY - estimatedHalfHeight;
-}
-
-/**
- * Calculate the position where a target element should be placed
- * to align directly under the tooltip arrow
- *
- * @returns Distance from screen bottom where element should be positioned
- */
-export function calculateTargetPosition() {
-  const tooltipBottom = calculateTooltipPosition();
-
-  // Arrow tip position = tooltip bottom + arrow offset (arrow extends below, so negative)
-  const arrowTipFromBottom = tooltipBottom + ARROW_BOTTOM_OFFSET;
-
-  // Subtract arrow height to get to the actual tip
-  const actualArrowTip = arrowTipFromBottom - ARROW_HEIGHT;
-
-  // Subtract spacing gap to position element below arrow
-  return actualArrowTip - SPACING_GAP;
-}
+export { ARROW_BOTTOM_OFFSET, ARROW_HEIGHT, SPACING_GAP, getScreenCenterY, calculateTooltipPosition, calculateTargetPosition } from "@buoy-gg/shared-ui";

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

@@ -1,27 +1,3 @@
 "use strict";
 
-/**
- * Web twin of onboardingConstants.ts — same math, window.innerHeight instead
- * of RN Dimensions.
- */
-export const ARROW_BOTTOM_OFFSET = -40; // Arrow extends below tooltip
-export const ARROW_HEIGHT = 20; // borderTopWidth of arrow
-export const SPACING_GAP = 10; // Gap between arrow tip and target element
-
-export function getScreenCenterY() {
-  return window.innerHeight / 2;
-}
-
-/** Distance from screen bottom for tooltip positioning (centered-ish). */
-export function calculateTooltipPosition() {
-  const estimatedHalfHeight = 130; // ~half of (tooltip + arrow)
-  return getScreenCenterY() - estimatedHalfHeight;
-}
-
-/** Distance from screen bottom where the bubble should sit (under the arrow). */
-export function calculateTargetPosition() {
-  const tooltipBottom = calculateTooltipPosition();
-  const arrowTipFromBottom = tooltipBottom + ARROW_BOTTOM_OFFSET;
-  const actualArrowTip = arrowTipFromBottom - ARROW_HEIGHT;
-  return actualArrowTip - SPACING_GAP;
-}
+export { ARROW_BOTTOM_OFFSET, ARROW_HEIGHT, SPACING_GAP, getScreenCenterY, calculateTooltipPosition, calculateTargetPosition } from "@buoy-gg/shared-ui/floating";