@buoy-gg/shared-ui 7.0.4 → 7.0.6

package/lib/commonjs/hooks/safe-area-impl.js

@@ -7,7 +7,7 @@ exports.useNativeSafeAreaInsets = exports.safeAreaType = exports.hasSafeAreaPack
 /**
  * Auto-generated safe area implementation
  * Detected: none
- * Generated at: 2026-07-23T18:32:21.569Z
+ * Generated at: 2026-07-29T13:27:30.301Z
  *
  * DO NOT EDIT - This file is generated by scripts/detect-safe-area.js
  *

package/lib/commonjs/icons/index.js

@@ -8,6 +8,18 @@ var _exportNames = {
   NETWORK_ICON_COLOR: true,
   EnvIcon: true,
   ENV_ICON_COLOR: true,
+  ConsoleIcon: true,
+  CONSOLE_ICON_COLOR: true,
+  ImagesIcon: true,
+  IMAGES_ICON_COLOR: true,
+  ImpersonateIcon: true,
+  IMPERSONATE_ICON_COLOR: true,
+  ImageOverlayIcon: true,
+  IMAGE_OVERLAY_ICON_COLOR: true,
+  ZustandIcon: true,
+  ZUSTAND_ICON_COLOR: true,
+  JotaiIcon: true,
+  JOTAI_ICON_COLOR: true,
   EnvLaptopIcon: true,
   LaptopIcon: true,
   ReactQueryIcon: true,
@@ -22,7 +34,6 @@ var _exportNames = {
   HighlightUpdatesIcon: true,
   RenderCountIcon: true,
   BenchmarkIcon: true,
-  ImageOverlayIcon: true,
   IconBackground: true
 };
 Object.defineProperty(exports, "BenchmarkIcon", {
@@ -31,6 +42,18 @@ Object.defineProperty(exports, "BenchmarkIcon", {
     return _BenchmarkIcon.BenchmarkIcon;
   }
 });
+Object.defineProperty(exports, "CONSOLE_ICON_COLOR", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolsCore.CONSOLE_ICON_COLOR;
+  }
+});
+Object.defineProperty(exports, "ConsoleIcon", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolsCore.ConsoleIcon;
+  }
+});
 Object.defineProperty(exports, "ENV_ICON_COLOR", {
   enumerable: true,
   get: function () {
@@ -55,6 +78,24 @@ Object.defineProperty(exports, "HighlightUpdatesIcon", {
     return _StackPulseIcon.HighlightUpdatesIcon;
   }
 });
+Object.defineProperty(exports, "IMAGES_ICON_COLOR", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolsCore.IMAGES_ICON_COLOR;
+  }
+});
+Object.defineProperty(exports, "IMAGE_OVERLAY_ICON_COLOR", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolsCore.IMAGE_OVERLAY_ICON_COLOR;
+  }
+});
+Object.defineProperty(exports, "IMPERSONATE_ICON_COLOR", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolsCore.IMPERSONATE_ICON_COLOR;
+  }
+});
 Object.defineProperty(exports, "IconBackground", {
   enumerable: true,
   get: function () {
@@ -64,7 +105,31 @@ Object.defineProperty(exports, "IconBackground", {
 Object.defineProperty(exports, "ImageOverlayIcon", {
   enumerable: true,
   get: function () {
-    return _ImageOverlayIcon.ImageOverlayIcon;
+    return _floatingToolsCore.ImageOverlayIcon;
+  }
+});
+Object.defineProperty(exports, "ImagesIcon", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolsCore.ImagesIcon;
+  }
+});
+Object.defineProperty(exports, "ImpersonateIcon", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolsCore.ImpersonateIcon;
+  }
+});
+Object.defineProperty(exports, "JOTAI_ICON_COLOR", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolsCore.JOTAI_ICON_COLOR;
+  }
+});
+Object.defineProperty(exports, "JotaiIcon", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolsCore.JotaiIcon;
   }
 });
 Object.defineProperty(exports, "LaptopIcon", {
@@ -145,6 +210,18 @@ Object.defineProperty(exports, "WifiCircuitIcon", {
     return _WifiCircuitIcon.WifiCircuitIcon;
   }
 });
+Object.defineProperty(exports, "ZUSTAND_ICON_COLOR", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolsCore.ZUSTAND_ICON_COLOR;
+  }
+});
+Object.defineProperty(exports, "ZustandIcon", {
+  enumerable: true,
+  get: function () {
+    return _floatingToolsCore.ZustandIcon;
+  }
+});
 var _index = require("./primitives/index.js");
 Object.keys(_index).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -167,7 +244,6 @@ var _RouteMapIcon = require("./RouteMapIcon.js");
 var _StackPulseIcon = require("./StackPulseIcon.js");
 var _RenderCountIcon = require("./RenderCountIcon.js");
 var _BenchmarkIcon = require("./BenchmarkIcon.js");
-var _ImageOverlayIcon = require("./ImageOverlayIcon.js");
 var _IconBackground = require("./IconBackground.js");
 var _lucideIcons = require("./lucide-icons.js");
 Object.keys(_lucideIcons).forEach(function (key) {

package/lib/commonjs/icons/lucide-icons-original-full.js

@@ -970,7 +970,11 @@ const GlobeIcon = ({
   strokeWidth = 2,
   ...props
 }) => {
-  color = _gameUIColors.gameUIColors.env;
+  // NOTE: this used to reassign `color = gameUIColors.env` right here, throwing
+  // away whatever the caller passed. The default above already covers the
+  // "network tool green" case; the reassignment only broke every caller that
+  // asked for something else (e.g. the network empty state, which asks for
+  // muted grey and was getting a green globe on the white canvas).
   const scale = size / 24;
   const globeSize = 18 * scale;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {

package/lib/commonjs/icons/lucide-icons.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Play = exports.Pin = exports.PhoneIcon = exports.Phone = exports.PauseIcon = exports.Pause = exports.PaletteIcon = exports.Palette = exports.NavigationIcon = exports.Navigation = exports.MusicIcon = exports.Music = exports.MinusIcon = exports.Minus = exports.Maximize2Icon = exports.Maximize2 = exports.LockIcon = exports.Lock = exports.LinkIcon = exports.Link = exports.LayersIcon = exports.Layers = exports.KeyIcon = exports.Key = exports.InfoIcon = exports.Info = exports.ImageIcon = exports.Image = exports.HomeIcon = exports.Home = exports.HelpCircle = exports.HashIcon = exports.Hash = exports.HardDriveIcon = exports.HardDrive = exports.HandIcon = exports.Hand = exports.GlobeIcon = exports.Globe = exports.GitBranchIcon = exports.GitBranch = exports.FloatWindow = exports.FlaskConicalIcon = exports.FlaskConical = exports.FilterIcon = exports.Filter = exports.FilmIcon = exports.Film = exports.FileTextIcon = exports.FileText = exports.FileJsonIcon = exports.FileJson = exports.FileCodeIcon = exports.FileCode = exports.EyeOffIcon = exports.EyeOff = exports.EyeIcon = exports.Eye = exports.Edit3Icon = exports.Edit3 = exports.DownloadIcon = exports.Download = exports.DockBottom = exports.DatabaseIcon = exports.Database = exports.CopyIcon = exports.Copy = exports.CloudIcon = exports.Cloud = exports.ClockIcon = exports.Clock = exports.ChevronUpIcon = exports.ChevronUp = exports.ChevronRightIcon = exports.ChevronRight = exports.ChevronLeftIcon = exports.ChevronLeft = exports.ChevronDownIcon = exports.ChevronDown = exports.CheckSquareIcon = exports.CheckSquare = exports.CheckIcon = exports.CheckCircleIcon = exports.CheckCircle2Icon = exports.CheckCircle2 = exports.CheckCircle = exports.Check = exports.BugIcon = exports.Bug = exports.BoxIcon = exports.Box = exports.BarChart3Icon = exports.BarChart3 = exports.AlertTriangleIcon = exports.AlertTriangle = exports.AlertOctagon = exports.AlertCircleIcon = exports.AlertCircle = exports.ActivityIcon = exports.Activity = void 0;
-exports.ZapIcon = exports.Zap = exports.XIcon = exports.XCircleIcon = exports.XCircle = exports.X = exports.WifiIcon = exports.Wifi = exports.VolumeIcon = exports.Volume = exports.UsersIcon = exports.Users = exports.UserIcon = exports.User = exports.UploadIcon = exports.Upload = exports.UnlockIcon = exports.Unlock = exports.TriangleAlertIcon = exports.TriangleAlert = exports.TrashIcon = exports.Trash2Icon = exports.Trash2 = exports.Trash = exports.TouchpadIcon = exports.Touchpad = exports.TimerIcon = exports.Timer = exports.TestTube2Icon = exports.TestTube2 = exports.SquareIcon = exports.SquareDashedIcon = exports.SquareDashed = exports.Square = exports.SmartphoneIcon = exports.Smartphone = exports.ShieldIcon = exports.Shield = exports.SettingsIcon = exports.Settings = exports.ServerIcon = exports.Server = exports.SearchIcon = exports.Search = exports.RouteIcon = exports.Route = exports.RefreshCwIcon = exports.RefreshCw = exports.PowerIcon = exports.Power = exports.PlusIcon = exports.Plus = exports.PlayIcon = void 0;
+exports.Pin = exports.PhoneIcon = exports.Phone = exports.PauseIcon = exports.Pause = exports.PaletteIcon = exports.Palette = exports.NavigationIcon = exports.Navigation = exports.MusicIcon = exports.Music = exports.MinusIcon = exports.Minus = exports.Maximize2Icon = exports.Maximize2 = exports.LockIcon = exports.Lock = exports.LinkIcon = exports.Link = exports.LayersIcon = exports.Layers = exports.KeyIcon = exports.Key = exports.InfoIcon = exports.Info = exports.ImageIcon = exports.Image = exports.HomeIcon = exports.Home = exports.HelpCircle = exports.HashIcon = exports.Hash = exports.HardDriveIcon = exports.HardDrive = exports.HandIcon = exports.Hand = exports.GlobeIcon = exports.Globe = exports.GitBranchIcon = exports.GitBranch = exports.FloatWindow = exports.FlaskConicalIcon = exports.FlaskConical = exports.FilterIcon = exports.Filter = exports.FilmIcon = exports.Film = exports.FileTextIcon = exports.FileText = exports.FileJsonIcon = exports.FileJson = exports.FileCodeIcon = exports.FileCode = exports.EyeOffIcon = exports.EyeOff = exports.EyeIcon = exports.Eye = exports.Edit3Icon = exports.Edit3 = exports.DownloadIcon = exports.Download = exports.DockBottom = exports.DatabaseIcon = exports.Database = exports.CopyIcon = exports.Copy = exports.CloudIcon = exports.Cloud = exports.ClockIcon = exports.Clock = exports.ChevronUpIcon = exports.ChevronUp = exports.ChevronRightIcon = exports.ChevronRight = exports.ChevronLeftIcon = exports.ChevronLeft = exports.ChevronDownIcon = exports.ChevronDown = exports.CheckSquareIcon = exports.CheckSquare = exports.CheckIcon = exports.CheckCircleIcon = exports.CheckCircle2Icon = exports.CheckCircle2 = exports.CheckCircle = exports.Check = exports.BugIcon = exports.Bug = exports.BoxIcon = exports.Box = exports.Bookmark = exports.BarChart3Icon = exports.BarChart3 = exports.AlertTriangleIcon = exports.AlertTriangle = exports.AlertOctagon = exports.AlertCircleIcon = exports.AlertCircle = exports.ActivityIcon = exports.Activity = void 0;
+exports.ZapIcon = exports.Zap = exports.XIcon = exports.XCircleIcon = exports.XCircle = exports.X = exports.WifiIcon = exports.Wifi = exports.VolumeIcon = exports.Volume = exports.UsersIcon = exports.Users = exports.UserIcon = exports.User = exports.UploadIcon = exports.Upload = exports.UnlockIcon = exports.Unlock = exports.TriangleAlertIcon = exports.TriangleAlert = exports.TrashIcon = exports.Trash2Icon = exports.Trash2 = exports.Trash = exports.TouchpadIcon = exports.Touchpad = exports.TimerIcon = exports.Timer = exports.TestTube2Icon = exports.TestTube2 = exports.SquareIcon = exports.SquareDashedIcon = exports.SquareDashed = exports.Square = exports.SmartphoneIcon = exports.Smartphone = exports.ShieldIcon = exports.Shield = exports.SettingsIcon = exports.Settings = exports.ServerIcon = exports.Server = exports.SearchIcon = exports.Search = exports.RouteIcon = exports.Route = exports.RefreshCwIcon = exports.RefreshCw = exports.PowerIcon = exports.Power = exports.PlusIcon = exports.Plus = exports.PlayIcon = exports.Play = void 0;
 var _reactNative = require("react-native");
 var OriginalIcons = _interopRequireWildcard(require("./lucide-icons-original-full.js"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -549,7 +549,64 @@ const Pin = ({
     strokeWidth: strokeWidth
   })]
 });
+
+/**
+ * Bookmark — the "saved request" glyph (Network tool's favorites).
+ *
+ * Lucide's Star would be the obvious choice, but these icons are composed from
+ * View-based `Line`/`Circle`/`Rect` primitives (there is no `Path`), so a
+ * 5-point star isn't drawable here. A bookmark is five straight segments and
+ * reads as "kept for later" at 10px, which is what the glyph has to say.
+ */
 exports.Pin = Pin;
+const Bookmark = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Svg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+    x1: 5,
+    y1: 3,
+    x2: 19,
+    y2: 3,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+    x1: 5,
+    y1: 3,
+    x2: 5,
+    y2: 21,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+    x1: 19,
+    y1: 3,
+    x2: 19,
+    y2: 21,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+    x1: 5,
+    y1: 21,
+    x2: 12,
+    y2: 15,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+    x1: 19,
+    y1: 21,
+    x2: 12,
+    y2: 15,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
+exports.Bookmark = Bookmark;
 const EyeOff = ({
   size = 24,
   color = "currentColor",

package/lib/commonjs/index.js

@@ -29,6 +29,10 @@ var _exportNames = {
   getCachedOptionalModule: true,
   setRenderCaptureProvider: true,
   getRenderCaptureProvider: true,
+  reloadApp: true,
+  scheduleReloadApp: true,
+  resolveReloadStrategy: true,
+  REMOTE_RELOAD_DELAY_MS: true,
   Subscribable: true,
   subscriberCountNotifier: true,
   subscribeToSubscriberCountChanges: true,
@@ -49,6 +53,7 @@ var _exportNames = {
   JsModal: true,
   gameUIColors: true,
   buoyColors: true,
+  refreshGameUIColors: true,
   dialColors: true,
   macOSColors: true,
   EnvironmentIndicator: true,
@@ -129,6 +134,12 @@ Object.defineProperty(exports, "ProUpgradeModal", {
     return _index12.ProUpgradeModal;
   }
 });
+Object.defineProperty(exports, "REMOTE_RELOAD_DELAY_MS", {
+  enumerable: true,
+  get: function () {
+    return _index3.REMOTE_RELOAD_DELAY_MS;
+  }
+});
 Object.defineProperty(exports, "Subscribable", {
   enumerable: true,
   get: function () {
@@ -363,12 +374,36 @@ Object.defineProperty(exports, "persistentStorage", {
     return _index3.persistentStorage;
   }
 });
+Object.defineProperty(exports, "refreshGameUIColors", {
+  enumerable: true,
+  get: function () {
+    return _gameUIColors.refreshGameUIColors;
+  }
+});
+Object.defineProperty(exports, "reloadApp", {
+  enumerable: true,
+  get: function () {
+    return _index3.reloadApp;
+  }
+});
+Object.defineProperty(exports, "resolveReloadStrategy", {
+  enumerable: true,
+  get: function () {
+    return _index3.resolveReloadStrategy;
+  }
+});
 Object.defineProperty(exports, "safeStringify", {
   enumerable: true,
   get: function () {
     return _index3.safeStringify;
   }
 });
+Object.defineProperty(exports, "scheduleReloadApp", {
+  enumerable: true,
+  get: function () {
+    return _index3.scheduleReloadApp;
+  }
+});
 Object.defineProperty(exports, "setRenderCaptureProvider", {
   enumerable: true,
   get: function () {

package/lib/commonjs/settings/components/BubbleSettingsSection.js

@@ -12,6 +12,8 @@ var _react = require("react");
 var _CyberpunkSectionButton = require("../../ui/console/CyberpunkSectionButton.js");
 var _devToolsStorageKeys = require("../../storage/devToolsStorageKeys.js");
 var _persistentStorage = require("../../utils/persistentStorage.js");
+var _macOSDesignSystemColors = require("../../ui/gameUI/constants/macOSDesignSystemColors.js");
+var _gameUIColors = require("../../ui/gameUI/constants/gameUIColors.js");
 var _jsxRuntime = require("react/jsx-runtime");
 const STORAGE_KEY = _devToolsStorageKeys.devToolsStorageKeys.bubble.settings();
 const USER_PREFERENCES_KEY = _devToolsStorageKeys.devToolsStorageKeys.bubble.userPreferences();
@@ -212,7 +214,7 @@ function BubbleSettingsDetail({
               false: "#4B5563",
               true: "#10B981"
             },
-            thumbColor: settings[config.key] ? "#fff" : "#9CA3AF"
+            thumbColor: settings[config.key] ? "#fff" : _gameUIColors.buoyColors.textSecondary
           })]
         }, config.key))
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -221,7 +223,7 @@ function BubbleSettingsDetail({
           style: styles.noteContainer,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.EyeOff, {
             size: 16,
-            color: "#9CA3AF"
+            color: _gameUIColors.buoyColors.textSecondary
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: styles.noteText,
             children: "User status indicator is always visible and cannot be disabled"
@@ -250,7 +252,7 @@ const styles = _reactNative.StyleSheet.create({
     flexGrow: 1
   },
   sectionCard: {
-    backgroundColor: "#1F2937",
+    backgroundColor: _gameUIColors.buoyColors.input,
     borderRadius: 8,
     padding: 16,
     flexDirection: "row",
@@ -270,25 +272,25 @@ const styles = _reactNative.StyleSheet.create({
     flex: 1
   },
   title: {
-    color: "#E5E7EB",
+    color: _gameUIColors.buoyColors.text,
     fontSize: 14,
     fontWeight: "600",
     marginBottom: 2
   },
   subtitle: {
-    color: "#9CA3AF",
+    color: _gameUIColors.buoyColors.textSecondary,
     fontSize: 12
   },
   chevron: {
-    color: "#6B7280",
+    color: _macOSDesignSystemColors.macOSColors.text.icon,
     fontSize: 20
   },
   detailContainer: {
     flex: 1,
-    backgroundColor: "#171717"
+    backgroundColor: _gameUIColors.buoyColors.card
   },
   loadingText: {
-    color: "#9CA3AF",
+    color: _gameUIColors.buoyColors.textSecondary,
     fontSize: 14,
     textAlign: "center",
     marginTop: 20
@@ -296,16 +298,16 @@ const styles = _reactNative.StyleSheet.create({
   header: {
     padding: 16,
     borderBottomWidth: 1,
-    borderBottomColor: "rgba(255, 255, 255, 0.1)"
+    borderBottomColor: "rgba(128, 128, 128, 0.2)"
   },
   headerTitle: {
-    color: "#E5E7EB",
+    color: _gameUIColors.buoyColors.text,
     fontSize: 16,
     fontWeight: "600",
     marginBottom: 4
   },
   headerDescription: {
-    color: "#9CA3AF",
+    color: _gameUIColors.buoyColors.textSecondary,
     fontSize: 12
   },
   settingsList: {
@@ -316,7 +318,7 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: "center",
     paddingVertical: 12,
     borderBottomWidth: 1,
-    borderBottomColor: "rgba(255, 255, 255, 0.05)"
+    borderBottomColor: "rgba(128, 128, 128, 0.1)"
   },
   settingIconContainer: {
     width: 32,
@@ -330,13 +332,13 @@ const styles = _reactNative.StyleSheet.create({
     marginRight: 12
   },
   settingLabel: {
-    color: "#E5E7EB",
+    color: _gameUIColors.buoyColors.text,
     fontSize: 14,
     fontWeight: "500",
     marginBottom: 2
   },
   settingDescription: {
-    color: "#6B7280",
+    color: _macOSDesignSystemColors.macOSColors.text.icon,
     fontSize: 11
   },
   indicator: {
@@ -347,7 +349,7 @@ const styles = _reactNative.StyleSheet.create({
   footer: {
     padding: 16,
     borderTopWidth: 1,
-    borderTopColor: "rgba(255, 255, 255, 0.1)"
+    borderTopColor: "rgba(128, 128, 128, 0.2)"
   },
   noteContainer: {
     flexDirection: "row",
@@ -356,12 +358,12 @@ const styles = _reactNative.StyleSheet.create({
     marginBottom: 8
   },
   noteText: {
-    color: "#9CA3AF",
+    color: _gameUIColors.buoyColors.textSecondary,
     fontSize: 12,
     flex: 1
   },
   restartNote: {
-    color: "#6B7280",
+    color: _macOSDesignSystemColors.macOSColors.text.icon,
     fontSize: 11,
     fontStyle: "italic"
   },
@@ -370,10 +372,10 @@ const styles = _reactNative.StyleSheet.create({
     paddingVertical: 8,
     marginTop: 8,
     borderTopWidth: 1,
-    borderTopColor: "rgba(255, 255, 255, 0.06)"
+    borderTopColor: "rgba(128, 128, 128, 0.12)"
   },
   sectionTitle: {
-    color: "#9CA3AF",
+    color: _gameUIColors.buoyColors.textSecondary,
     fontSize: 12,
     fontWeight: "600",
     letterSpacing: 0.5,

package/lib/commonjs/storage/devToolsStorageKeys.js

@@ -102,8 +102,6 @@ const devToolsStorageKeys = exports.devToolsStorageKeys = {
     preferences: () => `${devToolsStorageKeys.storage.root()}_preferences`,
     activeTab: () => `${devToolsStorageKeys.storage.root()}_active_tab`,
     isMonitoring: () => `${devToolsStorageKeys.storage.root()}_is_monitoring`,
-    detailView: () => `${devToolsStorageKeys.storage.root()}_detail_view`,
-    // 'current' | 'diff'
     diffViewerMode: () => `${devToolsStorageKeys.storage.root()}_diff_viewer_mode` // 'split' | 'tree'
   },
   /**
@@ -130,7 +128,12 @@ const devToolsStorageKeys = exports.devToolsStorageKeys = {
     ignoredDomains: () => `${devToolsStorageKeys.network.root()}_ignored_domains`,
     ignoredUrls: () => `${devToolsStorageKeys.network.root()}_ignored_urls`,
     preferences: () => `${devToolsStorageKeys.network.root()}_preferences`,
-    copyOptions: () => `${devToolsStorageKeys.network.root()}_copy_options`
+    copyOptions: () => `${devToolsStorageKeys.network.root()}_copy_options`,
+    /**
+     * Pinned + saved requests (snapshots, not IDs — request IDs are
+     * per-runtime counters and collide across app launches).
+     */
+    saved: () => `${devToolsStorageKeys.network.root()}_saved`
   },
   /**
    * Route events-related storage keys

package/lib/commonjs/ui/components/Badge.js

@@ -212,6 +212,8 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: "center"
   },
   methodBadge: {
+    // Fixed width keeps the URL column aligned down the list whether or not
+    // the badge still has a chip around it.
     minWidth: 45,
     alignItems: "center"
   },

package/lib/commonjs/ui/components/CompactRow.js

@@ -118,12 +118,19 @@ const styles = _reactNative.StyleSheet.create({
     borderRadius: 8,
     borderWidth: 1,
     borderColor: _gameUIColors.buoyColors.border + "40",
+    // …separated by a single hairline instead of four borders per row.
+    // Declared after borderWidth so the specific side wins on the chat path.
+    borderBottomWidth: 1,
+    borderBottomColor: _gameUIColors.buoyColors.border + "40",
     padding: 12,
+    paddingHorizontal: 12,
     transform: [{
       scale: 1
     }]
   },
   selectedRow: {
+    // Neutral fill, no outline, no lift — the same selection language as the
+    // sidebar. The classic path keeps its tinted, scaled, glowing card.
     backgroundColor: _gameUIColors.buoyColors.primary + "15",
     borderColor: _gameUIColors.buoyColors.primary + "50",
     transform: [{

package/lib/commonjs/ui/components/CopyButton.js

@@ -59,6 +59,8 @@ const CopyButton = exports.CopyButton = /*#__PURE__*/(0, _react.memo)(function C
   isFocused = false,
   size = 16,
   buttonStyle,
+  label,
+  labelStyle,
   onCopySuccess,
   onCopyError,
   feedbackDuration = 1500,
@@ -180,7 +182,7 @@ const CopyButton = exports.CopyButton = /*#__PURE__*/(0, _react.memo)(function C
     });
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
       ...touchableProps,
       style: [styles.button, buttonStyle],
       onPress: copyState === "idle" || !isPro ? handlePress : undefined,
@@ -193,7 +195,12 @@ const CopyButton = exports.CopyButton = /*#__PURE__*/(0, _react.memo)(function C
       },
       accessibilityLabel: copyState === "idle" ? "Copy to clipboard" : copyState === "success" ? "Copied to clipboard" : "Failed to copy",
       accessibilityRole: "button",
-      children: renderIcon()
+      children: [renderIcon(), label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.label, {
+          color: getColor()
+        }, labelStyle],
+        children: label
+      }) : null]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClipboardHintBanner.ClipboardHintBanner, {
       visible: showHint,
       onAcknowledge: handleHintAcknowledge
@@ -208,7 +215,15 @@ const styles = _reactNative.StyleSheet.create({
   button: {
     padding: 4,
     justifyContent: "center",
-    alignItems: "center"
+    alignItems: "center",
+    // Only relevant when a `label` is present; a bare icon button has one
+    // child, so the row direction and gap cost it nothing.
+    flexDirection: "row",
+    gap: 7
+  },
+  label: {
+    fontSize: 12.5,
+    fontWeight: "600"
   }
 });
 
@@ -272,7 +287,15 @@ const clearStyles = _reactNative.StyleSheet.create({
   button: {
     padding: 4,
     justifyContent: "center",
-    alignItems: "center"
+    alignItems: "center",
+    // Only relevant when a `label` is present; a bare icon button has one
+    // child, so the row direction and gap cost it nothing.
+    flexDirection: "row",
+    gap: 7
+  },
+  label: {
+    fontSize: 12.5,
+    fontWeight: "600"
   },
   disabled: {
     opacity: 0.4

package/lib/commonjs/ui/components/DevToolsCard.js

@@ -78,6 +78,11 @@ function DevToolsCard({
     })
   });
 }
+
+/**
+ * A bordered tile in a gutter. `CompactRow` is the other row primitive; keep the
+ * two in step.
+ */
 const styles = _reactNative.StyleSheet.create({
   wrapper: {
     marginHorizontal: DEVTOOLS_CARD_CONSTANTS.marginHorizontal,
@@ -88,10 +93,16 @@ const styles = _reactNative.StyleSheet.create({
     borderRadius: DEVTOOLS_CARD_CONSTANTS.borderRadius,
     borderWidth: DEVTOOLS_CARD_CONSTANTS.borderWidth,
     borderColor: _gameUIColors.buoyColors.border + "40",
+    // The separator. On classic this just re-states the full outline; on chat
+    // it is the ONLY edge the row has.
+    borderBottomWidth: 1,
+    borderBottomColor: _gameUIColors.buoyColors.border + "40",
     padding: DEVTOOLS_CARD_CONSTANTS.padding,
+    paddingHorizontal: DEVTOOLS_CARD_CONSTANTS.padding,
     minHeight: DEVTOOLS_CARD_CONSTANTS.minHeight
   },
   selectedCard: {
+    // Neutral grey fill, no tinted outline and no lift — see CompactRow.
     backgroundColor: _gameUIColors.buoyColors.primary + "15",
     borderColor: _gameUIColors.buoyColors.primary + "50",
     shadowColor: _gameUIColors.buoyColors.primary,

package/lib/commonjs/ui/components/DynamicFilterView.js

@@ -385,7 +385,14 @@ const styles = _reactNative.StyleSheet.create({
     borderRadius: 8,
     borderWidth: 1
   },
+  /**
+   * Selection is marked with a 2px accent outline. Border width stays 1 so
+   * selecting a
+   * tile doesn't shift the grid by a pixel.
+   */
   tabButtonActive: {
+    // White THUMB, not a grey one — the INACTIVE tab is already
+    // `buoyColors.hover` here, so a grey active state would be invisible.
     backgroundColor: _gameUIColors.buoyColors.primary + "20",
     borderColor: _gameUIColors.buoyColors.primary,
     borderWidth: 2
@@ -448,7 +455,7 @@ const styles = _reactNative.StyleSheet.create({
     backgroundColor: _gameUIColors.buoyColors.primary + "33",
     borderColor: _gameUIColors.buoyColors.primary,
     borderWidth: 2,
-    // Subtle glow effect like web
+    // Subtle glow effect like web — no glows on a light surface.
     shadowColor: _gameUIColors.buoyColors.primary,
     shadowOffset: {
       width: 0,

package/lib/commonjs/ui/components/EmptyState.js

@@ -8,6 +8,7 @@ exports.NoDataEmptyState = NoDataEmptyState;
 exports.NoResultsEmptyState = NoResultsEmptyState;
 exports.NoSearchResultsEmptyState = NoSearchResultsEmptyState;
 var _reactNative = require("react-native");
+var _macOSDesignSystemColors = require("../gameUI/constants/macOSDesignSystemColors.js");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Reusable empty state component for consistent empty/no-data displays
@@ -17,7 +18,7 @@ function EmptyState({
   description,
   icon: Icon,
   iconSize = 48,
-  iconColor = "#4B5563",
+  iconColor = _macOSDesignSystemColors.macOSColors.border.hover,
   action,
   variant = "default",
   style
@@ -94,11 +95,11 @@ const styles = _reactNative.StyleSheet.create({
     maxWidth: 300
   },
   cardVariant: {
-    backgroundColor: "rgba(255, 255, 255, 0.03)",
+    backgroundColor: "rgba(128, 128, 128, 0.06)",
     padding: 32,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.05)"
+    borderColor: "rgba(128, 128, 128, 0.1)"
   },
   minimalVariant: {
     padding: 16
@@ -107,14 +108,20 @@ const styles = _reactNative.StyleSheet.create({
     marginBottom: 16
   },
   title: {
-    color: "#6B7280",
+    color: _macOSDesignSystemColors.macOSColors.text.icon,
     fontSize: 16,
     fontWeight: "500",
     textAlign: "center",
     marginBottom: 8
   },
   description: {
-    color: "#4B5563",
+    // ⚠️ KNOWN LOW CONTRAST. This reads a BORDER token — border.hover is tuned
+    // to be a faint LINE, so as text it lands at ~2.8:1 on the near-black
+    // canvas, under WCAG AA. `macOSColors.text.muted` is the real tertiary-text
+    // token and would clear it comfortably. Left as-is because it is the
+    // shipped look and changing it moves every empty state in the suite; worth
+    // a deliberate pass rather than a drive-by.
+    color: _macOSDesignSystemColors.macOSColors.border.hover,
     fontSize: 14,
     textAlign: "center",
     lineHeight: 20