@buoy-gg/core 7.0.16 → 7.0.18

package/lib/module/floatingMenu/ToolHost.js

@@ -0,0 +1,266 @@
+"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, TickProvider, 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;
+  const searchable = headerOverride?.searchable ?? config.searchable;
+
+  // A screen that hides search while it's open would strand the input with
+  // no way to dismiss it — close it on entry instead.
+  useEffect(() => {
+    if (!searchable && isSearchActive) clearSearch();
+  }, [searchable, isSearchActive, clearSearch]);
+
+  // 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, searchable && !isSearchActive && /*#__PURE__*/_jsx(HeaderSearchButton, {
+        testID: `tool-search-${app.id}`,
+        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(TickProvider, {
+          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",

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;
@@ -102,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) {
@@ -169,7 +175,8 @@ export function AutoExternalSync({
   options,
   requiredEnvVars,
   isPro,
-  licenseKey
+  licenseKey,
+  customApps
 }) {
   const {
     useExternalSyncSocket,
@@ -255,6 +262,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 ?? []);
     }
@@ -279,8 +289,17 @@ export function AutoExternalSync({
     if (assetsModule?.assetsSyncAdapter) {
       map.assets = assetsModule.assetsSyncAdapter;
     }
+
+    // Third-party custom tools that declared InstalledApp.sync. Namespaced so
+    // a custom tool named "network" can't shadow the first-party adapter on
+    // the broker, in MCP call_action, or in desktop watch state.
+    for (const app of customApps ?? []) {
+      if (app?.sync) {
+        map[`custom:${app.id}`] = app.sync;
+      }
+    }
     return map;
-  }, [queryAdapter, requiredEnvVars]);
+  }, [queryAdapter, requiredEnvVars, customApps]);
   useExternalSync({
     tools,
     socket,

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

@@ -11,6 +11,7 @@ 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 { renderAppIcon } from "../AppIcon.js";
 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";
@@ -172,9 +173,14 @@ export const DialDevTools = ({
       map.set(app.id, {
         id: app.id,
         name: app.name,
-        // Pass both the pre-rendered icon (for non-function icons) and the
-        // component (for dynamic rendering).
-        icon: typeof app.icon === "function" ? null : app.icon,
+        // Pass both the pre-rendered icon (for non-function icons; strings
+        // resolve to auto-fitting text icons) and the component (for dynamic
+        // rendering).
+        icon: typeof app.icon === "function" ? null : renderAppIcon(app.icon, {
+          slot: "dial",
+          size: 20,
+          color: app.color
+        }),
         // Cast to the expected type - the signature is compatible at runtime.
         iconComponent: typeof app.icon === "function" ? app.icon : undefined,
         color: app.color ?? buoyColors.primary,
@@ -188,10 +194,11 @@ export const DialDevTools = ({
 
           // Only open modal if not a toggle-only tool.
           if (app.launchMode !== "toggle-only") {
-            const resolvedIcon = typeof app.icon === "function" ? app.icon({
+            const resolvedIcon = renderAppIcon(app.icon, {
               slot: "dial",
-              size: 20
-            }) : app.icon;
+              size: 20,
+              color: app.color
+            });
             open({
               id: app.id,
               title: app.name,
@@ -200,7 +207,8 @@ export const DialDevTools = ({
               launchMode: app.launchMode ?? "self-modal",
               singleton: app.singleton ?? true,
               icon: resolvedIcon,
-              color: app.color
+              color: app.color,
+              modal: app.modal
             });
           }
 

package/lib/module/index.js

@@ -20,6 +20,12 @@ export { DevToolsSettingsModal, useDevToolsSettings } from "./floatingMenu/DevTo
 // Export AppHost components for advanced use cases
 export { AppHostProvider, AppOverlay, useAppHost } from "./floatingMenu/AppHost";
 
+// Declarative chrome for custom tools (pairs with InstalledApp.modal)
+export { useToolHost, useToolHeader } from "./floatingMenu/ToolHost.js";
+
+// The custom-tools toolkit: blessed shared-ui components/hooks/tokens
+export * from "./toolkit.js";
+
 // Export DevTools visibility tracking
 export { DevToolsVisibilityProvider, useDevToolsVisibility } from "./floatingMenu/DevToolsVisibilityContext.js";
 

package/lib/module/toolkit.js

@@ -0,0 +1,62 @@
+"use strict";
+
+/**
+ * The public custom-tools toolkit — the blessed subset of Buoy's shared UI
+ * re-exported from `@buoy-gg/core`, so third-party tool authors need exactly
+ * one dependency and never touch `@buoy-gg/shared-ui` (which stays internal
+ * and free to churn).
+ *
+ * Design rules for this surface (keep it Tailwind-small):
+ * - Variants over components: a styling difference is a prop, not an export.
+ * - Behavior earns a component (CopyButton); a size preset does not.
+ * - The tool shell owns chrome — header/back/search buttons are not user API.
+ *
+ * Everything here is considered API: additions are minor bumps, removals are
+ * major. If a component you want is missing, that's deliberate — request it
+ * rather than deep-importing.
+ */
+
+// ---- Theme tokens ---------------------------------------------------------
+export { toolTheme } from "@buoy-gg/shared-ui";
+
+// ---- Badges & status ------------------------------------------------------
+// One Badge for every chip job; color it with the semantic helpers.
+export { Badge, StatusDot, statusColor, methodColor, typeColor } from "./toolkitComponents.js";
+
+// ---- Buttons --------------------------------------------------------------
+export { ToolButton as Button, CopyButton, PowerToggleButton as PowerToggle } from "@buoy-gg/shared-ui";
+
+// ---- Rows & cards ---------------------------------------------------------
+export { CompactRow as Row, DevToolsCard as Card } from "@buoy-gg/shared-ui";
+export { InfoRow } from "./toolkitComponents.js";
+
+// ---- Structure ------------------------------------------------------------
+export { SectionHeader, CollapsibleSection, TabSelector, EmptyState, SearchBar, EventStepperFooter } from "@buoy-gg/shared-ui";
+
+// ---- Data -----------------------------------------------------------------
+export { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
+export { DiffViewer } from "./toolkitComponents.js";
+
+// ---- Stores (event log / observable state for tool data) ------------------
+export { BaseEventStore } from "@buoy-gg/shared-ui";
+
+// ---- Time -----------------------------------------------------------------
+// The tool shell mounts the shared tick clock, so RelativeTime just works.
+export { RelativeTime } from "@buoy-gg/shared-ui";
+
+// ---- Formatting -----------------------------------------------------------
+export { formatBytes, formatDuration, formatNumber, truncateMiddle, safeStringify } from "@buoy-gg/shared-ui";
+
+// ---- Persistence ----------------------------------------------------------
+export { usePersistedState, persistentStorage, devToolsStorageKeys } from "@buoy-gg/shared-ui";
+
+// ---- Hooks / utils --------------------------------------------------------
+export { useSafeAreaInsets, copyToClipboard } from "@buoy-gg/shared-ui";
+
+// ---- Manual chrome (advanced escape hatch) --------------------------------
+// Tools should use `InstalledApp.modal` + `useToolHost` instead; JsModal is
+// for the rare tool that needs full control of its shell.
+export { JsModal } from "@buoy-gg/shared-ui";
+
+// ---- Icons (curated lucide set) ------------------------------------------
+export { Activity, AlertTriangle, Bug, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clock, Copy, Database, Eye, EyeOff, FileJson, FileText, Filter, FlaskConical, Globe, Hash, Info, Key, Layers, Lock, Pause, Play, Plus, Power, RefreshCw, Search, Settings, Shield, Trash2, User, Wifi, X, Zap, AlertCircle, BarChart3, Bookmark, Cloud, Download, Edit3, GitBranch, HardDrive, HelpCircle, Home, Image, Link, Maximize2, Minus, Palette, Pin, Route, Server, Smartphone, Square, CheckSquare, Timer, Unlock, Upload, Users, XCircle } from "@buoy-gg/shared-ui";