@base44/superagent-native 0.0.1 → 0.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 base44
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OF OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -19,17 +19,7 @@ The build emits CommonJS, ES module, and TypeScript declaration files under
 resolve to that built output, while `source` stays pointed at `src/index.ts` for
 the Bob build pipeline.
 
-## Web preview
-
-Run the mock web preview before connecting the package to the native app:
-
-```sh
-npm run preview:web -w @base44/superagent-native
-```
-
-It serves a Vite app on `http://localhost:5177/` and uses `react-native-web` to
-render the package source with mock agents, messages, markdown, media actions,
-and custom tool widgets.
+## Usage
 
 ```tsx
 import { useMemo } from 'react';
@@ -109,15 +99,17 @@ widgets for specific tool call names.
 ## Publishing
 
 This package is published publicly to **npm** (`registry.npmjs.org`) under the
-`@base44` org, automated by the
-[`Publish superagent-native`](../../.github/workflows/publish-superagent-native.yml)
-workflow using [changesets](../../.changeset/README.md). Publishing authenticates
-via **npm Trusted Publishing (OIDC)** — there is no long-lived npm token; CI mints
-a short-lived credential at publish time.
-
-To ship a new version: include a changeset in your PR (`pnpm changeset`, pick
-`@base44/superagent-native`). On merge to `main` a "version packages" PR is
-opened; merging it builds and publishes the new version.
+`@base44` org by the
+[`Publish superagent-native`](../../../.github/workflows/publish-superagent-native.yml)
+workflow. Publishing authenticates via **npm Trusted Publishing (OIDC)** — there
+is no long-lived npm token; CI mints a short-lived credential at publish time.
+
+**Auto-bump on merge, nothing written to git:** you don't touch the version. On
+every merge to `main` that changes `packages/superagent-native/**`, the workflow
+reads the latest published version from npm, increments the **patch**, and
+publishes that — without committing or pushing anything back to the repo. npm is
+the source of truth for the version; the `version` field in this `package.json`
+is **cosmetic** and is not used by the publish.
 
 > First-time setup only: the package must exist on npm before OIDC works, so the
 > very first version is published manually

package/lib/commonjs/AgentSettingsPanel.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AgentSettingsPanel = AgentSettingsPanel;
 var _react = _interopRequireWildcard(require("react"));
+var _theme = require("./theme.js");
 var _reactNative = require("react-native");
 var _lucideReactNative = require("lucide-react-native");
 var _connectorBrandIcons = require("./connectorBrandIcons.js");
@@ -75,19 +76,36 @@ function AgentSettingsPanel({
   onUpdateToolPermissions,
   secrets = []
 }) {
+  const {
+    scheme,
+    setScheme
+  } = (0, _theme.useSuperagentTheme)();
   const [guardDrafts, setGuardDrafts] = (0, _react.useState)({});
   const [newSecretName, setNewSecretName] = (0, _react.useState)('');
   const [newSecretValue, setNewSecretValue] = (0, _react.useState)('');
   const [isModelPickerOpen, setIsModelPickerOpen] = (0, _react.useState)(false);
   const [pendingAction, setPendingAction] = (0, _react.useState)(null);
+  const [deletingSecretName, setDeletingSecretName] = (0, _react.useState)(null);
   const [visibleSecrets, setVisibleSecrets] = (0, _react.useState)(new Set());
-  const permissions = normalizePermissions(agent.toolsPermissionConfig);
+  const permissions = (0, _react.useMemo)(() => normalizePermissions(agent.toolsPermissionConfig), [agent.toolsPermissionConfig]);
+  // Optimistic override for the permission toggles: flipped immediately on
+  // press, cleared when fresh server state arrives, reverted on failure.
+  const [optimisticOps, setOptimisticOps] = (0, _react.useState)(null);
+  const autoApprovedOps = optimisticOps ?? permissions.auto_approved_operations;
   const selectedModel = (0, _react.useMemo)(() => MODEL_OPTIONS.find(model => model.id === (agent.model || 'default')) ?? MODEL_OPTIONS[0], [agent.model]);
   const activeConnectorIds = (0, _react.useMemo)(() => connectedConnectors.filter(connector => connector.status !== 'expired' && connector.status !== 'disconnected').map(connector => connector.id), [connectedConnectors]);
   const guardDraftsDirty = (0, _react.useMemo)(() => JSON.stringify(cleanGuards(guardDrafts)) !== JSON.stringify(permissions.connector_guards), [guardDrafts, permissions.connector_guards]);
   (0, _react.useEffect)(() => {
+    // Seed guard drafts only when switching agents — not on every
+    // toolsPermissionConfig change — so in-progress guard edits aren't wiped by
+    // an unrelated permission toggle before "Save rules" is pressed.
     setGuardDrafts(permissions.connector_guards);
-  }, [agent.id, permissions.connector_guards]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [agent.id]);
+  (0, _react.useEffect)(() => {
+    // Fresh server state (or an agent switch) supersedes the optimistic flip.
+    setOptimisticOps(null);
+  }, [agent.id, agent.toolsPermissionConfig]);
   const runAction = async (action, handler) => {
     if (pendingAction) {
       return;
@@ -99,17 +117,58 @@ function AgentSettingsPanel({
       setPendingAction(null);
     }
   };
-  const updatePermissions = async (nextConfig, action = 'toggle-permission') => {
+  const updatePermissions = async (nextConfig, action) => {
+    if (!onUpdateToolPermissions) {
+      return;
+    }
+    try {
+      await runAction(action, () => onUpdateToolPermissions({
+        agentId: agent.id,
+        config: {
+          auto_approved_operations: nextConfig.auto_approved_operations ?? [],
+          connector_guards: cleanGuards(nextConfig.connector_guards ?? {})
+        }
+      }));
+    } catch {
+      // onUpdateToolPermissions already surfaced the error; guard drafts stay
+      // dirty so the user can retry. (Nothing optimistic to revert on this path.)
+    }
+  };
+  const toggleOperation = (operationId, enabled) => {
     if (!onUpdateToolPermissions) {
       return;
     }
-    await runAction(action, () => onUpdateToolPermissions({
+    const nextOps = new Set(autoApprovedOps);
+    if (enabled) {
+      nextOps.add(operationId);
+    } else {
+      nextOps.delete(operationId);
+    }
+    const nextList = Array.from(nextOps);
+
+    // Optimistic: flip the switch now, sync with the server in the background,
+    // and fall back to the last known server state if the update fails.
+    setOptimisticOps(nextList);
+    Promise.resolve(onUpdateToolPermissions({
       agentId: agent.id,
       config: {
-        auto_approved_operations: nextConfig.auto_approved_operations ?? [],
-        connector_guards: cleanGuards(nextConfig.connector_guards ?? {})
+        auto_approved_operations: nextList,
+        connector_guards: cleanGuards(permissions.connector_guards)
       }
-    }));
+    })).catch(() => {
+      // Revert only this operation, not every optimistic flip: a sibling toggle
+      // the user changed in parallel may have already saved successfully, and
+      // clearing all optimistic state would visually undo it until a refresh.
+      setOptimisticOps(current => {
+        const reverted = new Set(current ?? permissions.auto_approved_operations);
+        if (enabled) {
+          reverted.delete(operationId);
+        } else {
+          reverted.add(operationId);
+        }
+        return Array.from(reverted);
+      });
+    });
   };
   const selectModel = model => {
     if (!onUpdateAgentModel || pendingAction === 'model') {
@@ -138,28 +197,43 @@ function AgentSettingsPanel({
   };
   const addSecret = async () => {
     const name = newSecretName.trim().toUpperCase();
-    const value = newSecretValue.trim();
-    if (!name || !value || !onSaveSecret) {
+    // Preserve the secret value byte-for-byte — PEM keys, tokens with a trailing
+    // newline, and whitespace-sensitive passwords must reach the backend exactly as
+    // typed (the API client sends it raw). Only require it to be non-empty.
+    const value = newSecretValue;
+    if (!name || !value.trim() || !onSaveSecret) {
       return;
     }
-    await runAction('save-secret', async () => {
-      await onSaveSecret({
-        agentId: agent.id,
-        name,
-        value
+
+    // Only clear the inputs after a successful save; if onSaveSecret rejects it
+    // already surfaced the error, and we keep the typed values so they aren't lost.
+    try {
+      await runAction('save-secret', async () => {
+        await onSaveSecret({
+          agentId: agent.id,
+          name,
+          value
+        });
+        setNewSecretName('');
+        setNewSecretValue('');
       });
-      setNewSecretName('');
-      setNewSecretValue('');
-    });
+    } catch {
+      // onSaveSecret already surfaced the error; keep the form populated.
+    }
   };
   const deleteSecret = async secret => {
     if (!onDeleteSecret) {
       return;
     }
-    await runAction('delete-secret', () => onDeleteSecret({
-      agentId: agent.id,
-      name: secret.name
-    }));
+    setDeletingSecretName(secret.name);
+    try {
+      await runAction('delete-secret', () => onDeleteSecret({
+        agentId: agent.id,
+        name: secret.name
+      }));
+    } finally {
+      setDeletingSecretName(null);
+    }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: _editorShellStyles.editorShellStyles.settingsStack,
@@ -191,10 +265,10 @@ function AgentSettingsPanel({
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: localStyles.modelDropdownIcon,
           children: pendingAction === 'model' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-            color: "#F4F4F5",
+            color: (0, _theme.themedColor)('#F4F4F5'),
             size: "small"
           }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideReactNative.ChevronDown, {
-            color: "#F4F4F5",
+            color: (0, _theme.themedColor)('#F4F4F5'),
             size: 20,
             strokeWidth: 2.5
           })
@@ -236,11 +310,11 @@ function AgentSettingsPanel({
                 pressed
               }) => [localStyles.iconButton, pressed && _styles.styles.pressed],
               children: isVisible ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideReactNative.EyeOff, {
-                color: "#E4E4E7",
+                color: (0, _theme.themedColor)('#E4E4E7'),
                 size: 16,
                 strokeWidth: 2.4
               }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideReactNative.Eye, {
-                color: "#E4E4E7",
+                color: (0, _theme.themedColor)('#E4E4E7'),
                 size: 16,
                 strokeWidth: 2.4
               })
@@ -252,11 +326,11 @@ function AgentSettingsPanel({
               style: ({
                 pressed
               }) => [localStyles.iconButtonDanger, pressed && _styles.styles.pressed],
-              children: pendingAction === 'delete-secret' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-                color: "#FCA5A5",
+              children: deletingSecretName === secret.name ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
+                color: (0, _theme.themedColor)('#FCA5A5'),
                 size: "small"
               }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideReactNative.Trash2, {
-                color: "#FCA5A5",
+                color: (0, _theme.themedColor)('#FCA5A5'),
                 size: 16,
                 strokeWidth: 2.4
               })
@@ -272,13 +346,13 @@ function AgentSettingsPanel({
           autoCapitalize: "characters",
           onChangeText: value => setNewSecretName(value.toUpperCase()),
           placeholder: "SECRET_NAME",
-          placeholderTextColor: "#71717A",
+          placeholderTextColor: (0, _theme.themedColor)('#71717A'),
           style: localStyles.textInput,
           value: newSecretName
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
           onChangeText: setNewSecretValue,
           placeholder: "Value",
-          placeholderTextColor: "#71717A",
+          placeholderTextColor: (0, _theme.themedColor)('#71717A'),
           secureTextEntry: true,
           style: localStyles.textInput,
           value: newSecretValue
@@ -291,10 +365,10 @@ function AgentSettingsPanel({
             pressed
           }) => [localStyles.primaryButton, (!onSaveSecret || !newSecretName.trim() || !newSecretValue.trim()) && localStyles.disabledButton, pressed && _styles.styles.pressed],
           children: [pendingAction === 'save-secret' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-            color: "#111111",
+            color: (0, _theme.themedColor)('#111111'),
             size: "small"
           }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideReactNative.Plus, {
-            color: "#111111",
+            color: (0, _theme.themedColor)('#111111'),
             size: 16,
             strokeWidth: 2.6
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -303,12 +377,38 @@ function AgentSettingsPanel({
           })]
         })]
       })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SettingsSection, {
+      icon: _lucideReactNative.Moon,
+      subtitle: "Choose how Superagent looks on this device.",
+      title: "Appearance",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: localStyles.permissionRow,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: localStyles.permissionText,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: localStyles.rowTitle,
+            children: "Dark mode"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: localStyles.rowBody,
+            children: "Use the dark theme across all Superagent screens."
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Switch, {
+          ios_backgroundColor: (0, _theme.themedSurface)('#2A2A2A'),
+          onValueChange: enabled => setScheme(enabled ? 'dark' : 'light'),
+          thumbColor: "#F4F4F5",
+          trackColor: {
+            false: (0, _theme.themedSurface)('#2A2A2A'),
+            true: '#246B43'
+          },
+          value: scheme === 'dark'
+        })]
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SettingsSection, {
       icon: _lucideReactNative.ShieldCheck,
       subtitle: "Matches the web tool permission controls.",
       title: "Tool Permissions",
       children: TOOL_OPERATIONS.map(operation => {
-        const isEnabled = permissions.auto_approved_operations.includes(operation.id);
+        const isEnabled = autoApprovedOps.includes(operation.id);
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: localStyles.permissionRow,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -321,23 +421,12 @@ function AgentSettingsPanel({
               children: operation.body
             })]
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Switch, {
-            disabled: !onUpdateToolPermissions || pendingAction === 'toggle-permission',
-            ios_backgroundColor: "#2A2A2A",
-            onValueChange: enabled => {
-              const nextOps = new Set(permissions.auto_approved_operations);
-              if (enabled) {
-                nextOps.add(operation.id);
-              } else {
-                nextOps.delete(operation.id);
-              }
-              updatePermissions({
-                ...permissions,
-                auto_approved_operations: Array.from(nextOps)
-              });
-            },
+            disabled: !onUpdateToolPermissions,
+            ios_backgroundColor: (0, _theme.themedSurface)('#2A2A2A'),
+            onValueChange: enabled => toggleOperation(operation.id, enabled),
             thumbColor: "#F4F4F5",
             trackColor: {
-              false: '#2A2A2A',
+              false: (0, _theme.themedSurface)('#2A2A2A'),
               true: '#246B43'
             },
             value: isEnabled
@@ -383,7 +472,7 @@ function AgentSettingsPanel({
               }));
             },
             placeholder: "Example: ask before sending email outside my domain.",
-            placeholderTextColor: "#71717A",
+            placeholderTextColor: (0, _theme.themedColor)('#71717A'),
             style: [localStyles.textInput, localStyles.guardInput],
             value: guardDrafts[connectorId] ?? ''
           })]
@@ -396,17 +485,21 @@ function AgentSettingsPanel({
         accessibilityRole: "button",
         disabled: !onUpdateToolPermissions || !guardDraftsDirty || pendingAction === 'save-guards',
         onPress: () => updatePermissions({
-          auto_approved_operations: permissions.auto_approved_operations,
+          // Carry the latest optimistic toggle state (autoApprovedOps), not the
+          // stale server-backed list: this PUT sends the FULL config, so using
+          // the server value would clobber a toggle the user just flipped but
+          // whose own request hasn't synced agent.toolsPermissionConfig yet.
+          auto_approved_operations: autoApprovedOps,
           connector_guards: guardDrafts
         }, 'save-guards'),
         style: ({
           pressed
         }) => [localStyles.secondaryButton, (!guardDraftsDirty || !onUpdateToolPermissions) && localStyles.disabledButton, pressed && _styles.styles.pressed],
         children: [pendingAction === 'save-guards' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-          color: "#F4F4F5",
+          color: (0, _theme.themedColor)('#F4F4F5'),
           size: "small"
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideReactNative.Check, {
-          color: "#F4F4F5",
+          color: (0, _theme.themedColor)('#F4F4F5'),
           size: 16,
           strokeWidth: 2.6
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -469,7 +562,7 @@ function SettingsSection({
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: [localStyles.sectionIcon, isDanger && localStyles.sectionIconDanger],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-          color: isDanger ? '#FCA5A5' : '#F4F4F5',
+          color: isDanger ? (0, _theme.themedColor)('#FCA5A5') : (0, _theme.themedColor)('#F4F4F5'),
           size: 19,
           strokeWidth: 2.35
         })
@@ -486,7 +579,7 @@ function SettingsSection({
     }), isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: localStyles.loadingRow,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-        color: "#FF5A1F"
+        color: (0, _theme.themedColor)('#FF5A1F')
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: localStyles.mutedText,
         children: "Loading..."
@@ -509,10 +602,10 @@ function HeaderAction({
       pressed
     }) => [localStyles.headerAction, pressed && _styles.styles.pressed],
     children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-      color: "#F4F4F5",
+      color: (0, _theme.themedColor)('#F4F4F5'),
       size: "small"
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-      color: "#F4F4F5",
+      color: (0, _theme.themedColor)('#F4F4F5'),
       size: 16,
       strokeWidth: 2.4
     })
@@ -575,7 +668,7 @@ function ModelPickerModal({
                   children: model.description
                 })]
               }), isSelected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideReactNative.Check, {
-                color: "#34D399",
+                color: (0, _theme.themedColor)('#34D399'),
                 size: 18,
                 strokeWidth: 2.7
               }) : null]
@@ -605,10 +698,10 @@ function ActionRow({
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [localStyles.actionIcon, isDanger && localStyles.actionIconDanger],
       children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-        color: isDanger ? '#FCA5A5' : '#F4F4F5',
+        color: isDanger ? (0, _theme.themedColor)('#FCA5A5') : (0, _theme.themedColor)('#F4F4F5'),
         size: "small"
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {
-        color: isDanger ? '#FCA5A5' : '#F4F4F5',
+        color: isDanger ? (0, _theme.themedColor)('#FCA5A5') : (0, _theme.themedColor)('#F4F4F5'),
         size: 18,
         strokeWidth: 2.35
       })
@@ -644,10 +737,10 @@ function ShareMembersSummary({
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: localStyles.actionIcon,
       children: isLoading || isSharing ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ActivityIndicator, {
-        color: "#F4F4F5",
+        color: (0, _theme.themedColor)('#F4F4F5'),
         size: "small"
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_lucideReactNative.Share2, {
-        color: "#F4F4F5",
+        color: (0, _theme.themedColor)('#F4F4F5'),
         size: 18,
         strokeWidth: 2.35
       })
@@ -681,7 +774,7 @@ function toggleSecretVisibility(current, name) {
   }
   return next;
 }
-const localStyles = _reactNative.StyleSheet.create({
+const localStyles = (0, _theme.createThemedStyles)({
   actionIcon: {
     alignItems: 'center',
     backgroundColor: '#1F1F23',