@buoy-gg/core 7.0.15 → 7.0.17

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

@@ -0,0 +1,284 @@
+"use strict";
+
+/**
+ * MinimizedToolsStack — Web twin of MinimizedToolsStack.tsx +
+ * shared-ui's ExpandablePopover (inlined: the popover is only used here on
+ * web). A vertical stack of minimized-tool icons fused to the top of the
+ * floating bubble's drag handle:
+ * - collapsed: a 28px "peek" tab (chevron-up + count) with top corners only
+ * - expanded: animated-height panel, icons newest-first, collapse chevron
+ * - expanded state persists under "@react_buoy_minimized_stack_expanded"
+ * - each icon runs the native randomized glitch loop (translateX shake +
+ *   opacity flicker + scale pulse, 80ms), scheduled every 2-6s + index*300ms
+ *
+ * Data comes from the web AppHost (openApps with minimized === true) instead
+ * of the native MinimizedToolsContext — same derivation the MinimizedDock
+ * used before this replaced it.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { persistentStorage } from '@buoy-gg/shared-ui';
+import { useAppHost } from "./AppHost.web.js";
+
+// native MinimizedToolsStack.tsx constants
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PEEK_HEIGHT = 28;
+const TOOL_ITEM_SIZE = 32;
+const ICON_GAP = 6;
+const TOOLBAR_PADDING = 8;
+const COLLAPSE_BUTTON_SIZE = 24;
+const STORAGE_KEY_EXPANDED = '@react_buoy_minimized_stack_expanded';
+const GLITCH_DURATION_MS = 80;
+const MIN_GLITCH_DELAY = 2000;
+const MAX_GLITCH_DELAY = 6000;
+
+// native shared-ui buoyColors (gameUIColors.ts) — card + textMuted
+const CARD = '#1A1A1A';
+const TEXT_MUTED = '#888888';
+function ChevronGlyph({
+  down = false
+}) {
+  // native: ChevronUp size 12, strokeWidth 2, buoyColors.textMuted
+  return /*#__PURE__*/_jsx("svg", {
+    width: 12,
+    height: 12,
+    viewBox: "0 0 24 24",
+    "aria-hidden": "true",
+    style: {
+      transform: down ? 'rotate(180deg)' : undefined
+    },
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M18 15l-6-6-6 6",
+      fill: "none",
+      stroke: TEXT_MUTED,
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })
+  });
+}
+function GlitchToolButton({
+  title,
+  icon,
+  index,
+  onPress
+}) {
+  const innerRef = useRef(null);
+  useEffect(() => {
+    let mounted = true;
+    let timer;
+    const runGlitch = () => {
+      // native: parallel translateX shake / opacity flicker / scale pulse,
+      // all inside GLITCH_DURATION_MS — one WAAPI animation with offsets.
+      innerRef.current?.animate([{
+        transform: 'translateX(0) scale(1)',
+        opacity: 1,
+        offset: 0
+      }, {
+        transform: 'translateX(3px) scale(1.05)',
+        opacity: 0.4,
+        offset: 0.2
+      }, {
+        transform: 'translateX(-3px) scale(1.1)',
+        opacity: 1,
+        offset: 0.4
+      }, {
+        transform: 'translateX(2px) scale(1.0)',
+        opacity: 0.6,
+        offset: 0.6
+      }, {
+        transform: 'translateX(-1px) scale(0.95)',
+        opacity: 1,
+        offset: 0.8
+      }, {
+        transform: 'translateX(0) scale(1)',
+        opacity: 1,
+        offset: 1
+      }], {
+        duration: GLITCH_DURATION_MS,
+        easing: 'linear'
+      });
+    };
+    const schedule = initial => {
+      const delay = initial ? 500 + Math.random() * 1500 + index * 200 : MIN_GLITCH_DELAY + Math.random() * (MAX_GLITCH_DELAY - MIN_GLITCH_DELAY) + index * 300;
+      timer = setTimeout(() => {
+        if (!mounted) return;
+        runGlitch();
+        schedule(false);
+      }, delay);
+    };
+    schedule(true);
+    return () => {
+      mounted = false;
+      clearTimeout(timer);
+    };
+  }, [index]);
+  return /*#__PURE__*/_jsx("button", {
+    type: "button",
+    "aria-label": `Restore ${title}`,
+    onClick: onPress,
+    style: {
+      width: TOOL_ITEM_SIZE,
+      height: TOOL_ITEM_SIZE,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      background: 'none',
+      border: 'none',
+      padding: 0,
+      cursor: 'pointer'
+    },
+    children: /*#__PURE__*/_jsx("div", {
+      ref: innerRef,
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      children: icon
+    })
+  });
+}
+export function MinimizedToolsStack({
+  containerWidth = 32
+}) {
+  const {
+    openApps,
+    restore
+  } = useAppHost();
+  const minimized = openApps.filter(app => app.minimized && app.launchMode !== 'toggle-only');
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isStateRestored, setIsStateRestored] = useState(false);
+
+  // Restore + persist the expanded flag (native ExpandablePopover persistState).
+  useEffect(() => {
+    let cancelled = false;
+    const load = async () => {
+      const saved = await persistentStorage.getItem(STORAGE_KEY_EXPANDED);
+      if (!cancelled && saved === 'true') setIsExpanded(true);
+      if (!cancelled) setIsStateRestored(true);
+    };
+    void load();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  useEffect(() => {
+    if (!isStateRestored) return;
+    void persistentStorage.setItem(STORAGE_KEY_EXPANDED, isExpanded ? 'true' : 'false');
+  }, [isExpanded, isStateRestored]);
+  const handleRestore = useCallback(instanceId => {
+    restore(instanceId);
+  }, [restore]);
+  if (minimized.length === 0) return null;
+
+  // native: expandedHeight = padding + n*item + (n-1)*gap + gap + collapse + 4
+  const expandedHeight = TOOLBAR_PADDING + minimized.length * TOOL_ITEM_SIZE + (minimized.length - 1) * ICON_GAP + ICON_GAP + COLLAPSE_BUTTON_SIZE + 4;
+  const frame = {
+    // native peekButton/expandedContainer: card bg, top corners 6, 1px border
+    // on top/left/right only (fuses with the bubble below)
+    backgroundColor: CARD,
+    borderTopLeftRadius: 6,
+    borderTopRightRadius: 6,
+    borderTop: `1px solid ${TEXT_MUTED}66`,
+    borderLeft: `1px solid ${TEXT_MUTED}66`,
+    borderRight: `1px solid ${TEXT_MUTED}66`,
+    borderBottom: 'none',
+    boxSizing: 'border-box'
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    style: {
+      height: PEEK_HEIGHT,
+      overflow: 'visible',
+      position: 'relative'
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      style: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        width: containerWidth,
+        height: isExpanded ? expandedHeight : 0,
+        opacity: isExpanded ? 1 : 0,
+        overflow: 'hidden',
+        transition: 'height 200ms ease, opacity 200ms ease',
+        pointerEvents: isExpanded ? 'auto' : 'none',
+        ...frame
+      },
+      children: /*#__PURE__*/_jsxs("div", {
+        style: {
+          height: expandedHeight,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          paddingTop: TOOLBAR_PADDING,
+          gap: ICON_GAP,
+          boxSizing: 'border-box'
+        },
+        children: [[...minimized].reverse().map((app, index) => /*#__PURE__*/_jsx(GlitchToolButton, {
+          title: app.title || app.id,
+          icon: app.icon ?? /*#__PURE__*/_jsx("span", {
+            style: {
+              color: '#fff',
+              fontSize: 13
+            },
+            children: (app.title || app.id).slice(0, 1).toUpperCase()
+          }),
+          index: index,
+          onPress: () => handleRestore(app.instanceId)
+        }, app.instanceId)), /*#__PURE__*/_jsx("button", {
+          type: "button",
+          "aria-label": "Collapse",
+          onClick: () => setIsExpanded(false),
+          style: {
+            width: '100%',
+            height: COLLAPSE_BUTTON_SIZE,
+            marginTop: 3,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            padding: 0
+          },
+          children: /*#__PURE__*/_jsx(ChevronGlyph, {
+            down: true
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsxs("button", {
+      type: "button",
+      "aria-label": `Show ${minimized.length} minimized tools`,
+      onClick: () => setIsExpanded(true),
+      style: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        width: containerWidth,
+        height: PEEK_HEIGHT,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 2,
+        cursor: 'pointer',
+        padding: 0,
+        opacity: isExpanded ? 0 : 1,
+        transform: isExpanded ? 'scale(0.9)' : 'scale(1)',
+        transition: 'opacity 200ms ease, transform 200ms ease',
+        pointerEvents: isExpanded ? 'none' : 'auto',
+        ...frame
+      },
+      children: [/*#__PURE__*/_jsx(ChevronGlyph, {}), minimized.length > 1 && /*#__PURE__*/_jsx("span", {
+        style: {
+          fontSize: 9,
+          fontWeight: 600,
+          color: TEXT_MUTED,
+          marginLeft: 1
+        },
+        children: minimized.length
+      })]
+    })]
+  });
+}

package/lib/module/floatingMenu/ToolHost.js

@@ -0,0 +1,256 @@
+"use strict";
+
+/**
+ * ToolHost — the declarative chrome layer for custom tools.
+ *
+ * When an `InstalledApp` declares `modal: {...}`, the AppHost renders its
+ * component inside `ToolModalShell` instead of raw: the shared JsModal
+ * (drag/resize, floating⇄bottom-sheet, minimize, dimension persistence) plus
+ * a managed header (title/subtitle, back navigation, search, actions) and a
+ * lightweight toast layer. The tool body talks back to the shell through
+ * `useToolHost()` / `useToolHeader()`.
+ */
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Animated, StyleSheet, Text, View } from "react-native";
+import { JsModal, ModalHeader, HeaderSearchButton, devToolsStorageKeys, buoyColors, gameUIColors } from "@buoy-gg/shared-ui";
+
+/** Per-screen header overrides a tool body can apply (see `useToolHeader`). */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const noop = () => {};
+const FALLBACK_CONTEXT = {
+  search: "",
+  isSearchActive: false,
+  clearSearch: noop,
+  close: noop,
+  showToast: noop,
+  setHeaderOverride: noop
+};
+const ToolHostContext = /*#__PURE__*/createContext(null);
+
+/**
+ * Access the hosting shell from a custom tool body: search query, toasts,
+ * close. Safe to call outside the shell (returns inert no-ops) so tool
+ * components can also be mounted standalone.
+ */
+export function useToolHost() {
+  return useContext(ToolHostContext) ?? FALLBACK_CONTEXT;
+}
+
+/**
+ * Declare per-screen header state (title/subtitle/actions/back) from inside a
+ * tool body. Applies while the calling component is mounted and reverts to
+ * the preset's static config on unmount — so a detail screen simply mounts
+ * with its own header and the list header returns when it unmounts.
+ *
+ * ```tsx
+ * useToolHeader(
+ *   { title: flag.key, onBack: () => setScreen("list"), actions: <CopyButton value={flag} /> },
+ *   [flag.key]
+ * );
+ * ```
+ */
+export function useToolHeader(override, deps) {
+  const {
+    setHeaderOverride
+  } = useToolHost();
+  useEffect(() => {
+    setHeaderOverride(override);
+    return () => setHeaderOverride(null);
+    // Caller-provided deps intentionally control when the override refreshes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+}
+
+// ---------------------------------------------------------------------------
+// Toast layer
+// ---------------------------------------------------------------------------
+
+const TOAST_DURATION_MS = 2200;
+const TOAST_COLORS = {
+  success: gameUIColors.success,
+  error: gameUIColors.error,
+  info: gameUIColors.info
+};
+function ToastView({
+  message,
+  type,
+  nonce
+}) {
+  const opacity = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    opacity.setValue(0);
+    Animated.sequence([Animated.timing(opacity, {
+      toValue: 1,
+      duration: 150,
+      useNativeDriver: true
+    }), Animated.delay(TOAST_DURATION_MS - 450), Animated.timing(opacity, {
+      toValue: 0,
+      duration: 300,
+      useNativeDriver: true
+    })]).start();
+  }, [nonce, opacity]);
+  const color = TOAST_COLORS[type];
+  return /*#__PURE__*/_jsxs(Animated.View, {
+    pointerEvents: "none",
+    style: [styles.toast, {
+      opacity,
+      borderColor: color + "60"
+    }],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.toastDot, {
+        backgroundColor: color
+      }]
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.toastText,
+      numberOfLines: 2,
+      children: message
+    })]
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Shell
+// ---------------------------------------------------------------------------
+
+export function ToolModalShell({
+  app,
+  config,
+  visible,
+  zIndex,
+  onClose,
+  onMinimize,
+  initialModalState,
+  enableSharedModalDimensions,
+  bodyProps
+}) {
+  const Body = app.component;
+  const [isSearchActive, setIsSearchActive] = useState(false);
+  const [search, setSearch] = useState("");
+  const [headerOverride, setHeaderOverride] = useState(null);
+  const [toast, setToast] = useState(null);
+  const toastTimeoutRef = useRef(null);
+  const clearSearch = useCallback(() => {
+    setIsSearchActive(false);
+    setSearch("");
+  }, []);
+  const showToast = useCallback((message, type = "info") => {
+    if (toastTimeoutRef.current) clearTimeout(toastTimeoutRef.current);
+    setToast(prev => ({
+      message,
+      type,
+      nonce: (prev?.nonce ?? 0) + 1
+    }));
+    toastTimeoutRef.current = setTimeout(() => setToast(null), TOAST_DURATION_MS);
+  }, []);
+  useEffect(() => {
+    return () => {
+      if (toastTimeoutRef.current) clearTimeout(toastTimeoutRef.current);
+    };
+  }, []);
+  const contextValue = useMemo(() => ({
+    search: isSearchActive ? search : "",
+    isSearchActive,
+    clearSearch,
+    close: onClose,
+    showToast,
+    setHeaderOverride,
+    instanceId: app.instanceId
+  }), [search, isSearchActive, clearSearch, onClose, showToast, app.instanceId]);
+  const title = headerOverride?.title ?? config.title ?? app.title ?? app.id;
+  const subtitle = headerOverride?.subtitle ?? config.subtitle;
+  const onBack = headerOverride?.onBack;
+  const actions = headerOverride?.actions ?? config.headerActions;
+
+  // Tool-scoped persistence via the custom namespace unless the user has the
+  // shared-dimensions global setting on (all tools share one window size).
+  const persistenceKey = enableSharedModalDimensions ? devToolsStorageKeys.modal.root() : devToolsStorageKeys.custom(app.id).modal();
+  const header = /*#__PURE__*/_jsxs(ModalHeader, {
+    children: [onBack && !isSearchActive && /*#__PURE__*/_jsx(ModalHeader.Navigation, {
+      onBack: onBack
+    }), isSearchActive ? /*#__PURE__*/_jsx(ModalHeader.Search, {
+      value: search,
+      onChangeText: setSearch,
+      onCancel: clearSearch,
+      placeholder: config.searchPlaceholder
+    }) : /*#__PURE__*/_jsx(ModalHeader.Content, {
+      title: title,
+      subtitle: subtitle
+    }), /*#__PURE__*/_jsxs(ModalHeader.Actions, {
+      children: [!isSearchActive && actions, config.searchable && !isSearchActive && /*#__PURE__*/_jsx(HeaderSearchButton, {
+        onPress: () => setIsSearchActive(true)
+      })]
+    })]
+  });
+  return /*#__PURE__*/_jsx(ToolHostContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(JsModal, {
+      visible: visible,
+      onClose: onClose,
+      onBack: onBack,
+      onMinimize: onMinimize,
+      initialModalState: initialModalState,
+      zIndex: zIndex,
+      persistenceKey: persistenceKey,
+      enablePersistence: true,
+      initialMode: config.initialMode ?? "bottomSheet",
+      header: {
+        customContent: header,
+        showToggleButton: true
+      }
+      // Tool bodies own their scrolling (ScrollView/FlatList) — the shell
+      // must not add a competing wrapper.
+      ,
+      disableScrollWrapper: true,
+      styles: {},
+      children: /*#__PURE__*/_jsxs(View, {
+        style: styles.bodyRoot,
+        children: [/*#__PURE__*/_jsx(Body, {
+          ...bodyProps
+        }), toast && /*#__PURE__*/_jsx(ToastView, {
+          message: toast.message,
+          type: toast.type,
+          nonce: toast.nonce
+        })]
+      })
+    })
+  });
+}
+const styles = StyleSheet.create({
+  bodyRoot: {
+    flex: 1,
+    minHeight: 0,
+    backgroundColor: buoyColors.base
+  },
+  toast: {
+    position: "absolute",
+    bottom: 16,
+    alignSelf: "center",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    maxWidth: "86%",
+    backgroundColor: buoyColors.card,
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    shadowColor: "#000",
+    shadowOpacity: 0.4,
+    shadowRadius: 8,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    elevation: 6
+  },
+  toastDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3
+  },
+  toastText: {
+    flex: 1,
+    fontSize: 12,
+    color: buoyColors.text
+  }
+});

package/lib/module/floatingMenu/allToolsRegistry.js

@@ -27,7 +27,7 @@ import { ImageOverlayIcon } from "@buoy-gg/shared-ui";
 // in shared/icons/*.json and generated into @buoy-gg/floating-tools-core, which
 // IS a required dependency. Unavailable items therefore render the ACTUAL tool
 // icon (just dimmed by DialIcon), and it can no longer drift from the real one.
-import { ZustandIcon, ZUSTAND_ICON_COLOR, JotaiIcon, JOTAI_ICON_COLOR, IMAGE_OVERLAY_ICON_COLOR } from "@buoy-gg/floating-tools-core";
+import { ZustandIcon, ZUSTAND_ICON_COLOR, JotaiIcon, JOTAI_ICON_COLOR, IMAGE_OVERLAY_ICON_COLOR, TimeMachineIcon, TIME_MACHINE_ICON_COLOR } from "@buoy-gg/floating-tools-core";
 
 // ─── Registry entry type ──────────────────────────────────────────────────────
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -109,6 +109,13 @@ export const ALL_TOOLS_REGISTRY = [{
   renderIcon: size => /*#__PURE__*/_jsx(EventsIcon, {
     size: size
   })
+}, {
+  id: "time-machine",
+  name: "TIME MACHINE",
+  color: TIME_MACHINE_ICON_COLOR,
+  renderIcon: size => /*#__PURE__*/_jsx(TimeMachineIcon, {
+    size: size
+  })
 }, {
   id: "jotai",
   name: "JOTAI",

package/lib/module/floatingMenu/autoDiscoverPresets.js

@@ -185,6 +185,22 @@ export function autoDiscoverPresets() {
       }
     }
   },
+  // Time Machine
+  {
+    name: "@buoy-gg/time-machine",
+    loader: () => {
+      try {
+        // @ts-ignore - Dynamic import that may not exist
+        const {
+          timeMachineToolPreset
+        } = require("@buoy-gg/time-machine");
+        return timeMachineToolPreset;
+      } catch (e) {
+        reportOptionalRequireError("@buoy-gg/time-machine", e);
+        return null;
+      }
+    }
+  },
   // Redux DevTools
   {
     name: "@buoy-gg/redux",
@@ -314,6 +330,22 @@ export function autoDiscoverPresets() {
         return null;
       }
     }
+  },
+  // ASSETS — bundled-asset inventory (sizes / scale coverage / unused)
+  {
+    name: "@buoy-gg/assets",
+    loader: () => {
+      try {
+        // @ts-ignore - Dynamic import that may not exist
+        const {
+          assetsToolPreset
+        } = require("@buoy-gg/assets");
+        return assetsToolPreset;
+      } catch (e) {
+        reportOptionalRequireError("@buoy-gg/assets", e);
+        return null;
+      }
+    }
   }];
 
   // Attempt to load each preset

package/lib/module/floatingMenu/autoExternalSync.js

@@ -39,6 +39,7 @@ let zustandModule = null;
 let jotaiModule = null;
 let eventsModule = null;
 let consoleModule = null;
+let timeMachineModule = null;
 let envModule = null;
 let highlightUpdatesModule = null;
 let debugBordersModule = null;
@@ -46,6 +47,7 @@ let impersonateModule = null;
 let perfMonitorModule = null;
 let jsTopModule = null;
 let imagesModule = null;
+let assetsModule = null;
 let expoConstantsModule = null;
 
 // Catch bodies report through reportOptionalRequireError: silent for a
@@ -101,6 +103,11 @@ try {
 } catch (e) {
   reportOptionalRequireError("@buoy-gg/console", e);
 }
+try {
+  timeMachineModule = require("@buoy-gg/time-machine");
+} catch (e) {
+  reportOptionalRequireError("@buoy-gg/time-machine", e);
+}
 try {
   envModule = require("@buoy-gg/env");
 } catch (e) {
@@ -136,6 +143,11 @@ try {
 } catch (e) {
   reportOptionalRequireError("@buoy-gg/images", e);
 }
+try {
+  assetsModule = require("@buoy-gg/assets");
+} catch (e) {
+  reportOptionalRequireError("@buoy-gg/assets", e);
+}
 try {
   expoConstantsModule = require("expo-constants");
 } catch (e) {
@@ -249,6 +261,9 @@ export function AutoExternalSync({
     if (consoleModule?.consoleSyncAdapter) {
       map.console = consoleModule.consoleSyncAdapter;
     }
+    if (timeMachineModule?.timeMachineSyncAdapter) {
+      map["time-machine"] = timeMachineModule.timeMachineSyncAdapter;
+    }
     if (envModule?.createEnvSyncAdapter) {
       map.env = envModule.createEnvSyncAdapter(requiredEnvVars ?? []);
     }
@@ -270,6 +285,9 @@ export function AutoExternalSync({
     if (imagesModule?.imagesSyncAdapter) {
       map.images = imagesModule.imagesSyncAdapter;
     }
+    if (assetsModule?.assetsSyncAdapter) {
+      map.assets = assetsModule.assetsSyncAdapter;
+    }
     return map;
   }, [queryAdapter, requiredEnvVars]);
   useExternalSync({

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

@@ -11,9 +11,9 @@ import { getRankedToolIds, isDialUsageLoaded, loadDialUsage, recordToolUsage } f
 import { persistentStorage, useHintsDisabled, devToolsStorageKeys, buoyColors } from "@buoy-gg/shared-ui";
 import { DevToolsSettingsModal, useDevToolsSettings } from "../DevToolsSettingsModal";
 import { useProAccess } from "@buoy-gg/license";
-import { useAppHost } from "../AppHost.js";
-import { OnboardingTooltip } from "./OnboardingTooltip.js";
-import { getDialLayout, MAX_DIAL_SLOTS, DIAL_BUTTON_SIZE, DIAL_ICON_SIZE, dialAnimationConfig, dialColors } from "@buoy-gg/floating-tools-core";
+import { useAppHost } from "../AppHost";
+import { OnboardingTooltip } from "./OnboardingTooltip";
+import { getDialLayout, MAX_DIAL_SLOTS, DIAL_BUTTON_SIZE, DIAL_ICON_GLYPH_SIZE, dialAnimationConfig, dialColors } from "@buoy-gg/floating-tools-core";
 
 // The circle size depends on the live window width, so it's computed inside
 // the component via useWindowDimensions — a module-scope Dimensions.get
@@ -200,7 +200,8 @@ export const DialDevTools = ({
               launchMode: app.launchMode ?? "self-modal",
               singleton: app.singleton ?? true,
               icon: resolvedIcon,
-              color: app.color
+              color: app.color,
+              modal: app.modal
             });
           }
 
@@ -227,8 +228,11 @@ export const DialDevTools = ({
       map.set(tool.id, {
         id: tool.id,
         name: tool.name,
-        // Pre-render the icon at the standard dial slot size so it looks correct.
-        icon: tool.renderIcon(DIAL_ICON_SIZE),
+        // Pre-render the icon at the standard GLYPH size (not the slot size —
+        // the slot also holds the label + "Unavailable" caption, so a glyph
+        // rendered at DIAL_ICON_SIZE overflows the slot and looks ~2x bigger
+        // than installed tools' icons).
+        icon: tool.renderIcon(DIAL_ICON_GLYPH_SIZE),
         iconComponent: undefined,
         color: tool.color,
         unavailable: true,