@peers-app/peers-ui 0.8.23 → 0.9.0

package/dist/screens/data-explorer/query-executor.js

@@ -58,6 +58,7 @@ function QueryExecutor() {
     const [results, setResults] = (0, react_1.useState)({});
     const [errors, setErrors] = (0, react_1.useState)({});
     const [loading, setLoading] = (0, react_1.useState)({});
+    const [writeEnabled, setWriteEnabled] = (0, react_1.useState)(false);
     // Local state for query input to avoid locking up on fast typing
     const [localQuery, setLocalQuery] = (0, react_1.useState)('');
     const debounceTimeoutRef = (0, react_1.useRef)();
@@ -173,7 +174,7 @@ function QueryExecutor() {
                 setError('Data Explorer API not available');
                 return;
             }
-            const queryResult = await api.executeQuery(query);
+            const queryResult = await api.executeQuery(query, writeEnabled);
             setResult(queryResult);
         }
         catch (err) {
@@ -263,9 +264,12 @@ function QueryExecutor() {
                         react_1.default.createElement("i", { className: "bi bi-plus-lg" }))))),
         react_1.default.createElement("div", { className: "card mb-4" },
             react_1.default.createElement("div", { className: "card-body" },
-                react_1.default.createElement("label", { htmlFor: "query-input", className: "form-label" },
-                    react_1.default.createElement("strong", null, "SQL Query"),
-                    react_1.default.createElement("span", { className: "text-muted small ms-2" }, "(Read-only: SELECT and PRAGMA only)")),
+                react_1.default.createElement("div", { className: "d-flex justify-content-between align-items-center" },
+                    react_1.default.createElement("label", { htmlFor: "query-input", className: "form-label mb-0" },
+                        react_1.default.createElement("strong", null, "SQL Query")),
+                    react_1.default.createElement("div", { className: "form-check form-switch" },
+                        react_1.default.createElement("input", { className: "form-check-input", type: "checkbox", id: "enable-writes", checked: writeEnabled, onChange: (e) => setWriteEnabled(e.target.checked) }),
+                        react_1.default.createElement("label", { className: "form-check-label small", htmlFor: "enable-writes" }, "Enable Writes"))),
                 react_1.default.createElement("textarea", { id: "query-input", className: "form-control font-monospace", rows: 6, value: query, onChange: (e) => setQuery(e.target.value), onBlur: handleBlur, onKeyDown: handleKeyDown, placeholder: "Enter your SQL query here..." }),
                 react_1.default.createElement("div", { className: "mt-3 d-flex justify-content-between align-items-center" },
                     react_1.default.createElement("button", { className: "btn btn-primary", onClick: executeQuery, disabled: isLoading || !query.trim() }, isLoading ? (react_1.default.createElement(react_1.default.Fragment, null,
@@ -287,14 +291,24 @@ function QueryExecutor() {
             react_1.default.createElement("div", { className: "card-body" },
                 react_1.default.createElement("div", { className: "d-flex justify-content-between align-items-center mb-3" },
                     react_1.default.createElement("h5", { className: "card-title mb-0" },
-                        "Query Results",
-                        react_1.default.createElement("span", { className: "badge bg-primary ms-2" },
+                        result.isWriteOperation ? 'Write Result' : 'Query Results',
+                        result.isWriteOperation ? (react_1.default.createElement("span", { className: "badge bg-success ms-2" },
+                            result.changesCount,
+                            " row",
+                            result.changesCount !== 1 ? 's' : '',
+                            " affected")) : (react_1.default.createElement("span", { className: "badge bg-primary ms-2" },
                             result.rowCount,
-                            " rows")),
+                            " rows"))),
                     react_1.default.createElement("button", { className: "btn btn-sm btn-outline-secondary", onClick: () => setResult(null) },
                         react_1.default.createElement("i", { className: "bi bi-x" }),
                         " Clear")),
-                result.rowCount === 0 ? (react_1.default.createElement("div", { className: "alert alert-info mb-0" }, "Query executed successfully but returned no rows.")) : (react_1.default.createElement("div", { className: "table-responsive" },
+                result.isWriteOperation ? (react_1.default.createElement("div", { className: "alert alert-success mb-0" },
+                    react_1.default.createElement("i", { className: "bi bi-check-circle-fill me-2" }),
+                    "Query executed successfully. ",
+                    result.changesCount,
+                    " row",
+                    result.changesCount !== 1 ? 's' : '',
+                    " affected.")) : result.rowCount === 0 ? (react_1.default.createElement("div", { className: "alert alert-info mb-0" }, "Query executed successfully but returned no rows.")) : (react_1.default.createElement("div", { className: "table-responsive" },
                     react_1.default.createElement("table", { className: "table table-sm table-hover table-bordered" },
                         react_1.default.createElement("thead", { className: "table-light" },
                             react_1.default.createElement("tr", null, result.columns.map((col, idx) => (react_1.default.createElement("th", { key: idx, className: "font-monospace small" }, col))))),

package/dist/screens/settings/voice-settings.js

@@ -115,9 +115,14 @@ const VoiceSettings = () => {
                 };
                 setSettings(loadedSettings);
                 setLocalSettings(loadedSettings);
-                // Load audio devices
-                const devices = await peers_sdk_1.rpcServerCalls.voiceGetAudioDevices();
-                setAudioDevices(devices);
+                // Load audio devices (may not be available in React Native)
+                try {
+                    const devices = await peers_sdk_1.rpcServerCalls.voiceGetAudioDevices();
+                    setAudioDevices(devices || []);
+                }
+                catch {
+                    // voiceGetAudioDevices not available (e.g. React Native) - leave empty
+                }
             }
             catch (err) {
                 console.error('Failed to load voice settings:', err);

package/dist/tabs-layout/tabs-layout.js

@@ -50,6 +50,30 @@ const system_apps_1 = require("../system-apps");
 const routes_loader_1 = require("../ui-router/routes-loader");
 const ui_loader_1 = require("../ui-router/ui-loader");
 const tabs_state_1 = require("./tabs-state");
+class TabErrorBoundary extends react_1.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error(`TabErrorBoundary caught error in tab "${this.props.tabTitle}":`, error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError) {
+            return (react_1.default.createElement("div", { style: { padding: '24px', textAlign: 'center' } },
+                react_1.default.createElement("h4", { style: { marginBottom: '12px' } },
+                    "Something went wrong in \"",
+                    this.props.tabTitle,
+                    "\""),
+                react_1.default.createElement("p", { style: { opacity: 0.7, marginBottom: '16px', fontFamily: 'monospace', fontSize: '13px' } }, this.state.error?.message || 'Unknown error'),
+                react_1.default.createElement("button", { className: "btn btn-outline-primary btn-sm", onClick: () => this.setState({ hasError: false, error: null }) }, "Try Again")));
+        }
+        return this.props.children;
+    }
+}
 function TabsLayoutApp() {
     const userId = (0, hooks_1.usePromise)(async () => {
         const _userId = await peers_sdk_1.rpcServerCalls.getUserId();
@@ -166,7 +190,8 @@ function TabsLayoutInternal() {
                     msOverflowStyle: 'none'
                 } }, tabs.map(tab => (react_1.default.createElement(TabHeader, { key: tab.tabId, tab: tab, isActive: activeTab === tab.tabId, onSwitch: switchTab, onClose: closeTab, colorMode: _colorMode }))))))),
         react_1.default.createElement("div", { className: "flex-grow-1 overflow-hidden" }, tabs.map(tab => (react_1.default.createElement("div", { key: tab.tabId, className: `h-100 ${activeTab === tab.tabId ? 'd-block' : 'd-none'}`, style: { display: activeTab === tab.tabId ? 'block' : 'none' } },
-            react_1.default.createElement(TabContent, { tab: tab, isMobile: isMobile, isActive: activeTab === tab.tabId })))))));
+            react_1.default.createElement(TabErrorBoundary, { tabTitle: tab.title, tabId: tab.tabId },
+                react_1.default.createElement(TabContent, { tab: tab, isMobile: isMobile, isActive: activeTab === tab.tabId }))))))));
 }
 function MobileTabsHeader({ tabs, activeTab, onSwitch, onClose, colorMode }) {
     const [showMenuDropdown, setShowMenuDropdown] = react_1.default.useState(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.8.23",
+  "version": "0.9.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/peers-app/peers-ui.git"
@@ -26,7 +26,7 @@
     "test:coverage": "jest --coverage"
   },
   "peerDependencies": {
-    "@peers-app/peers-sdk": "^0.8.23",
+    "@peers-app/peers-sdk": "^0.9.0",
     "bootstrap": "^5.3.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
@@ -37,7 +37,7 @@
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.27.1",
     "@electron/rebuild": "^3.6.0",
-    "@peers-app/peers-sdk": "0.8.23",
+    "@peers-app/peers-sdk": "0.9.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",

package/src/screens/data-explorer/query-executor.tsx

@@ -9,6 +9,8 @@ interface ISqlQueryResult {
   columns: string[];
   rows: any[][];
   rowCount: number;
+  isWriteOperation?: boolean;
+  changesCount?: number;
 }
 
 interface IQueryTab {
@@ -38,6 +40,7 @@ export function QueryExecutor() {
   const [results, setResults] = useState<{ [tabId: string]: ISqlQueryResult }>({});
   const [errors, setErrors] = useState<{ [tabId: string]: string }>({});
   const [loading, setLoading] = useState<{ [tabId: string]: boolean }>({});
+  const [writeEnabled, setWriteEnabled] = useState(false);
   
   // Local state for query input to avoid locking up on fast typing
   const [localQuery, setLocalQuery] = useState<string>('');
@@ -168,7 +171,7 @@ export function QueryExecutor() {
         return;
       }
 
-      const queryResult = await api.executeQuery(query);
+      const queryResult = await api.executeQuery(query, writeEnabled);
       setResult(queryResult);
     } catch (err: any) {
       setError(err.message || 'Query execution failed');
@@ -312,10 +315,23 @@ export function QueryExecutor() {
       {/* Query Input */}
       <div className="card mb-4">
         <div className="card-body">
-          <label htmlFor="query-input" className="form-label">
-            <strong>SQL Query</strong>
-            <span className="text-muted small ms-2">(Read-only: SELECT and PRAGMA only)</span>
-          </label>
+          <div className="d-flex justify-content-between align-items-center">
+            <label htmlFor="query-input" className="form-label mb-0">
+              <strong>SQL Query</strong>
+            </label>
+            <div className="form-check form-switch">
+              <input
+                className="form-check-input"
+                type="checkbox"
+                id="enable-writes"
+                checked={writeEnabled}
+                onChange={(e) => setWriteEnabled(e.target.checked)}
+              />
+              <label className="form-check-label small" htmlFor="enable-writes">
+                Enable Writes
+              </label>
+            </div>
+          </div>
           <textarea
             id="query-input"
             className="form-control font-monospace"
@@ -371,8 +387,14 @@ export function QueryExecutor() {
           <div className="card-body">
             <div className="d-flex justify-content-between align-items-center mb-3">
               <h5 className="card-title mb-0">
-                Query Results
-                <span className="badge bg-primary ms-2">{result.rowCount} rows</span>
+                {result.isWriteOperation ? 'Write Result' : 'Query Results'}
+                {result.isWriteOperation ? (
+                  <span className="badge bg-success ms-2">
+                    {result.changesCount} row{result.changesCount !== 1 ? 's' : ''} affected
+                  </span>
+                ) : (
+                  <span className="badge bg-primary ms-2">{result.rowCount} rows</span>
+                )}
               </h5>
               <button
                 className="btn btn-sm btn-outline-secondary"
@@ -382,7 +404,12 @@ export function QueryExecutor() {
               </button>
             </div>
 
-            {result.rowCount === 0 ? (
+            {result.isWriteOperation ? (
+              <div className="alert alert-success mb-0">
+                <i className="bi bi-check-circle-fill me-2"></i>
+                Query executed successfully. {result.changesCount} row{result.changesCount !== 1 ? 's' : ''} affected.
+              </div>
+            ) : result.rowCount === 0 ? (
               <div className="alert alert-info mb-0">
                 Query executed successfully but returned no rows.
               </div>

package/src/screens/settings/voice-settings.tsx

@@ -131,9 +131,13 @@ export const VoiceSettings: React.FC = () => {
         setSettings(loadedSettings);
         setLocalSettings(loadedSettings);
         
-        // Load audio devices
-        const devices = await rpcServerCalls.voiceGetAudioDevices();
-        setAudioDevices(devices);
+        // Load audio devices (may not be available in React Native)
+        try {
+          const devices = await rpcServerCalls.voiceGetAudioDevices();
+          setAudioDevices(devices || []);
+        } catch {
+          // voiceGetAudioDevices not available (e.g. React Native) - leave empty
+        }
       } catch (err) {
         console.error('Failed to load voice settings:', err);
         setError('Failed to load voice settings.');

package/src/tabs-layout/tabs-layout.tsx

@@ -1,5 +1,5 @@
 import { getUserContext, hasShownWelcomeModal, IAppNav, rpcServerCalls, setDefaultClientUserContext, sleep, Subscription } from "@peers-app/peers-sdk";
-import React, { useEffect, useState } from 'react';
+import React, { Component, useEffect, useState } from 'react';
 import { openCommandPalette } from '../command-palette/command-palette';
 import { CommandPaletteOverlay } from '../command-palette/command-palette-ui';
 import { GroupSwitcher } from '../components/group-switcher';
@@ -14,6 +14,54 @@ import { allPackages, loadAllRoutes } from '../ui-router/routes-loader';
 import { UIRouter } from '../ui-router/ui-loader';
 import { activeTabId, activeTabs, goToTabPath, initializedTabs, recentlyUsedApps, TabState } from './tabs-state';
 
+// Error boundary that wraps each tab's content so a crash in one tab
+// doesn't take down the entire app.
+interface TabErrorBoundaryProps {
+  tabTitle: string;
+  tabId: string;
+  children: React.ReactNode;
+}
+
+interface TabErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+class TabErrorBoundary extends Component<TabErrorBoundaryProps, TabErrorBoundaryState> {
+  constructor(props: TabErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): TabErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error(`TabErrorBoundary caught error in tab "${this.props.tabTitle}":`, error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{ padding: '24px', textAlign: 'center' }}>
+          <h4 style={{ marginBottom: '12px' }}>Something went wrong in "{this.props.tabTitle}"</h4>
+          <p style={{ opacity: 0.7, marginBottom: '16px', fontFamily: 'monospace', fontSize: '13px' }}>
+            {this.state.error?.message || 'Unknown error'}
+          </p>
+          <button
+            className="btn btn-outline-primary btn-sm"
+            onClick={() => this.setState({ hasError: false, error: null })}
+          >
+            Try Again
+          </button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
 export function TabsLayoutApp() {
   const userId = usePromise(async () => {
     const _userId = await rpcServerCalls.getUserId();
@@ -208,7 +256,9 @@ function TabsLayoutInternal() {
             className={`h-100 ${activeTab === tab.tabId ? 'd-block' : 'd-none'}`}
             style={{ display: activeTab === tab.tabId ? 'block' : 'none' }}
           >
-            <TabContent tab={tab} isMobile={isMobile} isActive={activeTab === tab.tabId} />
+            <TabErrorBoundary tabTitle={tab.title} tabId={tab.tabId}>
+              <TabContent tab={tab} isMobile={isMobile} isActive={activeTab === tab.tabId} />
+            </TabErrorBoundary>
           </div>
         ))}
       </div>