@peers-app/peers-ui 0.8.3 → 0.8.5

package/dist/hooks.d.ts

@@ -1,9 +1,10 @@
-import React from 'react';
 import { Observable } from "@peers-app/peers-sdk";
+import React from 'react';
 /**
  * Use this to subscribe to an observable or computed in a functional component.
+ * Uses useSyncExternalStore for proper React 18 concurrent rendering support.
  * @param sub the observable or computed to subscribe to
- * @param deps an array of dependencies to pass to useEffect which will trigger a re-render when any of the dependencies change
+ * @param deps an array of dependencies that will cause re-subscription when changed
  * @returns the current value of the observable or computed and a function to set the value
  */
 export declare function useObservable<T>(sub: Observable<T> | T, deps?: React.DependencyList): [T, (value: T) => void];

package/dist/hooks.js

@@ -5,46 +5,38 @@ exports.usePromise = usePromise;
 exports.useObservableState = useObservableState;
 exports.useSubscription = useSubscription;
 exports.useOnScreen = useOnScreen;
-const react_1 = require("react");
-const lodash_1 = require("lodash");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = require("react");
 /**
  * Use this to subscribe to an observable or computed in a functional component.
+ * Uses useSyncExternalStore for proper React 18 concurrent rendering support.
  * @param sub the observable or computed to subscribe to
- * @param deps an array of dependencies to pass to useEffect which will trigger a re-render when any of the dependencies change
+ * @param deps an array of dependencies that will cause re-subscription when changed
  * @returns the current value of the observable or computed and a function to set the value
  */
 function useObservable(sub, deps = []) {
-    const [data, setData] = (0, react_1.useState)(() => (0, peers_sdk_1.unwrapObservable)(sub));
-    (0, react_1.useEffect)(() => {
+    // Create memoized subscribe function that adapts Observable's subscribe API to useSyncExternalStore's expected signature
+    const subscribe = (0, react_1.useCallback)((onStoreChange) => {
         if (!(0, peers_sdk_1.isSubscribable)(sub)) {
-            return;
-        }
-        const subscription = sub.subscribe(() => {
-            const newData = sub();
-            // @ts-ignore
-            if ((0, lodash_1.isArray)(newData) && newData === data) {
-                // @ts-ignore
-                setData([...newData]);
-            }
-            else {
-                setData(newData);
-            }
-        });
-        // the data might change _after_ useObservable is called but _before_ the subscription has been created
-        // this checks for that and updates the state with the new data if necessary
-        const newData = sub();
-        if (!(0, lodash_1.isEqual)(data, newData)) {
-            setData(newData);
+            // If not subscribable, return a no-op unsubscribe
+            return () => { };
         }
+        const subscription = sub.subscribe(onStoreChange);
         return () => subscription.dispose();
-    }, deps);
-    return [data, newData => {
-            setData(newData);
-            if ((0, peers_sdk_1.isSubscribable)(sub)) {
-                sub(newData);
-            }
-        }];
+    }, [sub, ...deps]);
+    // getSnapshot returns the current value from the observable
+    const getSnapshot = (0, react_1.useCallback)(() => {
+        return (0, peers_sdk_1.unwrapObservable)(sub);
+    }, [sub, ...deps]);
+    // Use useSyncExternalStore for concurrent-safe subscription
+    const data = (0, react_1.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+    // Create setter that updates both local understanding and the observable
+    const setter = (0, react_1.useCallback)((newData) => {
+        if ((0, peers_sdk_1.isSubscribable)(sub)) {
+            sub(newData);
+        }
+    }, [sub]);
+    return [data, setter];
 }
 /**
  * Use this to easily wait for a promise in a functional component.
@@ -104,26 +96,3 @@ function useOnScreen(ref) {
     }, []);
     return isIntersecting;
 }
-// /**
-//  * This creates an observable that will automatically persist its value between page reloads using localStorage.
-//  * If localStorage is not available, the observable will not persist its value.
-//  * @param initialValue the initial value of the observable
-//  * @param globalName the name to use when storing the value in localStorage
-//  * @returns the observable that will persist between page reloads
-//  */
-// export function persistentValue<T>(initialValue: T, globalName: string): Observable<T | undefined> {
-//   let q = observable<T>();
-//   if (typeof localStorage === 'undefined') {
-//     return q;
-//   }
-//   q.subscribe(newVal => {
-//     localStorage.setItem(globalName, JSON.stringify(toJSON(newVal)))
-//   })
-//   const existing = localStorage.getItem(globalName);
-//   if (existing) {
-//     q(fromJSON(JSON.parse(existing)))
-//   } else {
-//     q(initialValue);
-//   }
-//   return q;
-// }

package/dist/hooks.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks.test.js

@@ -0,0 +1,247 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const hooks_1 = require("./hooks");
+// Helper component to test useObservable
+function TestComponent({ obs, testId = 'value' }) {
+    const [value, setValue] = (0, hooks_1.useObservable)(obs);
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("span", { "data-testid": testId }, JSON.stringify(value)),
+        react_1.default.createElement("button", { "data-testid": "setter", onClick: () => setValue('new-value') }, "Set")));
+}
+// Helper component to test array behavior
+function ArrayTestComponent({ obs }) {
+    const [value] = (0, hooks_1.useObservable)(obs);
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("span", { "data-testid": "array-value" }, JSON.stringify(value)),
+        react_1.default.createElement("span", { "data-testid": "array-length" }, value.length)));
+}
+// Helper component to test useObservableState
+function ObservableStateTestComponent({ initialValue }) {
+    const obs = (0, hooks_1.useObservableState)(initialValue);
+    const [value] = (0, hooks_1.useObservable)(obs);
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("span", { "data-testid": "state-value" }, value),
+        react_1.default.createElement("button", { "data-testid": "increment", onClick: () => obs(obs() + 1) }, "Increment")));
+}
+describe('useObservable', () => {
+    describe('basic functionality', () => {
+        it('should return the current value of an observable', () => {
+            const obs = (0, peers_sdk_1.observable)('hello');
+            (0, react_2.render)(react_1.default.createElement(TestComponent, { obs: obs }));
+            expect(react_2.screen.getByTestId('value')).toHaveTextContent('"hello"');
+        });
+        it('should return the value when passed a plain value (non-observable)', () => {
+            (0, react_2.render)(react_1.default.createElement(TestComponent, { obs: "plain-value" }));
+            expect(react_2.screen.getByTestId('value')).toHaveTextContent('"plain-value"');
+        });
+        it('should re-render when observable value changes', async () => {
+            const obs = (0, peers_sdk_1.observable)('initial');
+            (0, react_2.render)(react_1.default.createElement(TestComponent, { obs: obs }));
+            expect(react_2.screen.getByTestId('value')).toHaveTextContent('"initial"');
+            (0, react_2.act)(() => {
+                obs('updated');
+            });
+            await (0, react_2.waitFor)(() => {
+                expect(react_2.screen.getByTestId('value')).toHaveTextContent('"updated"');
+            });
+        });
+        it('should update the observable when setter is called', async () => {
+            const obs = (0, peers_sdk_1.observable)('initial');
+            (0, react_2.render)(react_1.default.createElement(TestComponent, { obs: obs }));
+            (0, react_2.act)(() => {
+                react_2.screen.getByTestId('setter').click();
+            });
+            await (0, react_2.waitFor)(() => {
+                expect(obs()).toBe('new-value');
+                expect(react_2.screen.getByTestId('value')).toHaveTextContent('"new-value"');
+            });
+        });
+        it('should handle undefined values', () => {
+            const obs = (0, peers_sdk_1.observable)(undefined);
+            (0, react_2.render)(react_1.default.createElement(TestComponent, { obs: obs }));
+            // undefined serializes to empty string in JSON.stringify, but actually shows as nothing
+            expect(react_2.screen.getByTestId('value')).toHaveTextContent('');
+        });
+        it('should handle object values', async () => {
+            const obs = (0, peers_sdk_1.observable)({ name: 'test', count: 5 });
+            (0, react_2.render)(react_1.default.createElement(TestComponent, { obs: obs }));
+            expect(react_2.screen.getByTestId('value')).toHaveTextContent('{"name":"test","count":5}');
+            (0, react_2.act)(() => {
+                obs({ name: 'updated', count: 10 });
+            });
+            await (0, react_2.waitFor)(() => {
+                expect(react_2.screen.getByTestId('value')).toHaveTextContent('{"name":"updated","count":10}');
+            });
+        });
+    });
+    describe('array handling', () => {
+        it('should handle array values', () => {
+            const obs = (0, peers_sdk_1.observable)(['a', 'b', 'c']);
+            (0, react_2.render)(react_1.default.createElement(ArrayTestComponent, { obs: obs }));
+            expect(react_2.screen.getByTestId('array-value')).toHaveTextContent('["a","b","c"]');
+            expect(react_2.screen.getByTestId('array-length')).toHaveTextContent('3');
+        });
+        it('should re-render when array is replaced with new reference', async () => {
+            const obs = (0, peers_sdk_1.observable)(['a', 'b']);
+            (0, react_2.render)(react_1.default.createElement(ArrayTestComponent, { obs: obs }));
+            expect(react_2.screen.getByTestId('array-length')).toHaveTextContent('2');
+            (0, react_2.act)(() => {
+                obs(['a', 'b', 'c']); // New array reference
+            });
+            await (0, react_2.waitFor)(() => {
+                expect(react_2.screen.getByTestId('array-length')).toHaveTextContent('3');
+            });
+        });
+        it('should NOT re-render when array is mutated in place (requires immutable updates)', async () => {
+            // This tests the case where an array is mutated in place and notifySubscribers is called.
+            // 
+            // IMPORTANT BEHAVIORAL NOTE:
+            // The OLD implementation (useState + useEffect) had special handling that would 
+            // spread the array when it detected same-reference mutation: 
+            //   if (isArray(newData) && newData === data) setData([...newData])
+            // 
+            // The NEW implementation (useSyncExternalStore) does NOT do this.
+            // useSyncExternalStore uses Object.is() comparison on getSnapshot results.
+            // If the reference is the same, React won't re-render.
+            //
+            // This is actually the CORRECT behavior - it encourages immutable data patterns
+            // which are required for React 18 concurrent rendering to work correctly.
+            // Mutating data in place can cause tearing in concurrent mode.
+            const obs = (0, peers_sdk_1.observable)(['a', 'b']);
+            (0, react_2.render)(react_1.default.createElement(ArrayTestComponent, { obs: obs }));
+            expect(react_2.screen.getByTestId('array-length')).toHaveTextContent('2');
+            (0, react_2.act)(() => {
+                // Mutate the array in place (BAD PRACTICE - don't do this!)
+                const arr = obs();
+                arr.push('c');
+                obs.notifySubscribers();
+            });
+            // The observable itself has the mutated value
+            expect(obs()).toEqual(['a', 'b', 'c']);
+            // But the component did NOT re-render because the reference didn't change
+            // This is expected with useSyncExternalStore - it requires immutable updates
+            expect(react_2.screen.getByTestId('array-length')).toHaveTextContent('2');
+        });
+        it('should re-render when array is properly updated with spread', async () => {
+            // This is the recommended pattern for updating arrays
+            const obs = (0, peers_sdk_1.observable)(['a', 'b']);
+            (0, react_2.render)(react_1.default.createElement(ArrayTestComponent, { obs: obs }));
+            expect(react_2.screen.getByTestId('array-length')).toHaveTextContent('2');
+            (0, react_2.act)(() => {
+                obs([...obs(), 'c']); // Proper immutable update
+            });
+            await (0, react_2.waitFor)(() => {
+                expect(react_2.screen.getByTestId('array-length')).toHaveTextContent('3');
+                expect(react_2.screen.getByTestId('array-value')).toHaveTextContent('["a","b","c"]');
+            });
+        });
+    });
+    describe('subscription management', () => {
+        it('should unsubscribe when component unmounts', () => {
+            const obs = (0, peers_sdk_1.observable)('test');
+            const initialSubscriberCount = obs.subscriberCount();
+            const { unmount } = (0, react_2.render)(react_1.default.createElement(TestComponent, { obs: obs }));
+            // Should have subscribed
+            expect(obs.subscriberCount()).toBeGreaterThan(initialSubscriberCount);
+            unmount();
+            // Should have unsubscribed
+            expect(obs.subscriberCount()).toBe(initialSubscriberCount);
+        });
+        it('should handle multiple components subscribing to same observable', async () => {
+            const obs = (0, peers_sdk_1.observable)('shared');
+            (0, react_2.render)(react_1.default.createElement("div", null,
+                react_1.default.createElement(TestComponent, { obs: obs, testId: "value1" }),
+                react_1.default.createElement(TestComponent, { obs: obs, testId: "value2" })));
+            expect(react_2.screen.getByTestId('value1')).toHaveTextContent('"shared"');
+            expect(react_2.screen.getByTestId('value2')).toHaveTextContent('"shared"');
+            (0, react_2.act)(() => {
+                obs('updated');
+            });
+            await (0, react_2.waitFor)(() => {
+                expect(react_2.screen.getByTestId('value1')).toHaveTextContent('"updated"');
+                expect(react_2.screen.getByTestId('value2')).toHaveTextContent('"updated"');
+            });
+        });
+    });
+    describe('rapid updates', () => {
+        it('should handle rapid sequential updates correctly', async () => {
+            const obs = (0, peers_sdk_1.observable)(0);
+            function CounterComponent() {
+                const [value] = (0, hooks_1.useObservable)(obs);
+                return react_1.default.createElement("span", { "data-testid": "counter" }, value);
+            }
+            (0, react_2.render)(react_1.default.createElement(CounterComponent, null));
+            (0, react_2.act)(() => {
+                for (let i = 1; i <= 10; i++) {
+                    obs(i);
+                }
+            });
+            await (0, react_2.waitFor)(() => {
+                expect(react_2.screen.getByTestId('counter')).toHaveTextContent('10');
+            });
+        });
+    });
+});
+describe('useObservableState', () => {
+    it('should create an observable with the initial value', () => {
+        (0, react_2.render)(react_1.default.createElement(ObservableStateTestComponent, { initialValue: 42 }));
+        expect(react_2.screen.getByTestId('state-value')).toHaveTextContent('42');
+    });
+    it('should re-render when the observable is updated', async () => {
+        (0, react_2.render)(react_1.default.createElement(ObservableStateTestComponent, { initialValue: 0 }));
+        expect(react_2.screen.getByTestId('state-value')).toHaveTextContent('0');
+        (0, react_2.act)(() => {
+            react_2.screen.getByTestId('increment').click();
+        });
+        await (0, react_2.waitFor)(() => {
+            expect(react_2.screen.getByTestId('state-value')).toHaveTextContent('1');
+        });
+    });
+    it('should maintain the same observable instance across re-renders', async () => {
+        let capturedObs = null;
+        function CaptureObsComponent() {
+            const obs = (0, hooks_1.useObservableState)(0);
+            if (!capturedObs) {
+                capturedObs = obs;
+            }
+            const [value] = (0, hooks_1.useObservable)(obs);
+            return (react_1.default.createElement("div", null,
+                react_1.default.createElement("span", { "data-testid": "value" }, value),
+                react_1.default.createElement("span", { "data-testid": "same-obs" }, obs === capturedObs ? 'same' : 'different'),
+                react_1.default.createElement("button", { "data-testid": "update", onClick: () => obs(obs() + 1) }, "Update")));
+        }
+        (0, react_2.render)(react_1.default.createElement(CaptureObsComponent, null));
+        expect(react_2.screen.getByTestId('same-obs')).toHaveTextContent('same');
+        // Trigger a re-render by updating the observable
+        (0, react_2.act)(() => {
+            react_2.screen.getByTestId('update').click();
+        });
+        await (0, react_2.waitFor)(() => {
+            expect(react_2.screen.getByTestId('value')).toHaveTextContent('1');
+            expect(react_2.screen.getByTestId('same-obs')).toHaveTextContent('same');
+        });
+    });
+    it('should not subscribe when doNotSubscribe is true', () => {
+        function NoSubscribeComponent() {
+            const obs = (0, hooks_1.useObservableState)(0, true); // doNotSubscribe = true
+            return (react_1.default.createElement("div", null,
+                react_1.default.createElement("span", { "data-testid": "value" }, obs()),
+                react_1.default.createElement("button", { "data-testid": "update", onClick: () => obs(obs() + 1) }, "Update")));
+        }
+        (0, react_2.render)(react_1.default.createElement(NoSubscribeComponent, null));
+        expect(react_2.screen.getByTestId('value')).toHaveTextContent('0');
+        // Update won't cause re-render since we're not subscribed
+        (0, react_2.act)(() => {
+            react_2.screen.getByTestId('update').click();
+        });
+        // Value in DOM should still show 0 since component didn't re-render
+        // But the observable itself has been updated
+        expect(react_2.screen.getByTestId('value')).toHaveTextContent('0');
+    });
+});

package/dist/screens/console-logs/console-logs-list.js

@@ -48,6 +48,8 @@ const color_mode_dropdown_1 = require("../settings/color-mode-dropdown");
 const log_display_1 = require("./log-display");
 const log_filters_1 = require("./log-filters");
 const resizable_table_header_1 = require("./resizable-table-header");
+const globals_1 = require("../../globals");
+const mobile_log_card_1 = require("./mobile-log-card");
 const windowHeight = () => window.innerHeight;
 const DEFAULT_COLUMNS = [
     { key: 'timestamp', label: 'Timestamp', width: 150 },
@@ -68,6 +70,8 @@ const ConsoleLogsList = () => {
     const [_colorMode] = (0, hooks_1.useObservable)(color_mode_dropdown_1.colorMode);
     const logsEndRef = react_1.default.useRef(null);
     const containerRef = react_1.default.useRef(null);
+    (0, hooks_1.useObservable)(globals_1.isDesktop);
+    const isMobile = !(0, globals_1.isDesktop)();
     const batchSize = 50;
     // Track fixed column widths to trigger message column recalculation
     const fixedColumnsWidthKey = (0, react_1.useMemo)(() => {
@@ -225,7 +229,7 @@ const ConsoleLogsList = () => {
                 marginBottom: '50px',
                 overflow: 'hidden',
             } },
-            react_1.default.createElement(resizable_table_header_1.ResizableTableHeader, { columns: columns, onColumnsChange: setColumns, colorMode: _colorMode }),
+            !isMobile && (react_1.default.createElement(resizable_table_header_1.ResizableTableHeader, { columns: columns, onColumnsChange: setColumns, colorMode: _colorMode })),
             react_1.default.createElement("div", { id: "scrollableLogsDiv", style: {
                     flex: 1,
                     overflow: 'auto',
@@ -239,10 +243,12 @@ const ConsoleLogsList = () => {
                     react_1.default.createElement("div", { ref: logsEndRef }),
                     _logs.length === 0 && allLogsLoaded ? (react_1.default.createElement("div", { className: "text-center p-5 text-muted" },
                         react_1.default.createElement("i", { className: "bi bi-inbox display-1" }),
-                        react_1.default.createElement("p", { className: "mt-2" }, "No logs found"))) : (react_1.default.createElement("table", { className: "table table-sm table-hover mb-0", style: { fontSize: '0.85rem', tableLayout: 'fixed', width: '100%' } },
-                        react_1.default.createElement("tbody", null, _logs.map((log) => (
-                        // log.logId
-                        react_1.default.createElement(log_display_1.LogDisplay, { key: log.logId, log: log, columns: columns }))))))))),
+                        react_1.default.createElement("p", { className: "mt-2" }, "No logs found"))) : isMobile ? (
+                    /* Mobile: Card-based layout */
+                    react_1.default.createElement("div", null, _logs.map((log) => (react_1.default.createElement(mobile_log_card_1.MobileLogCard, { key: log.logId, log: log, colorMode: _colorMode }))))) : (
+                    /* Desktop: Table layout */
+                    react_1.default.createElement("table", { className: "table table-sm table-hover mb-0", style: { fontSize: '0.85rem', tableLayout: 'fixed', width: '100%' } },
+                        react_1.default.createElement("tbody", null, _logs.map((log) => (react_1.default.createElement(log_display_1.LogDisplay, { key: log.logId, log: log, columns: columns }))))))))),
         react_1.default.createElement("div", { style: {
                 position: 'fixed',
                 bottom: 0,

package/dist/screens/console-logs/mobile-log-card.d.ts

@@ -0,0 +1,8 @@
+import { IConsoleLog } from "@peers-app/peers-sdk";
+import React from 'react';
+interface MobileLogCardProps {
+    log: IConsoleLog;
+    colorMode: string;
+}
+export declare const MobileLogCard: ({ log, colorMode }: MobileLogCardProps) => React.JSX.Element;
+export {};

package/dist/screens/console-logs/mobile-log-card.js

@@ -0,0 +1,96 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileLogCard = void 0;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const moment_1 = __importDefault(require("moment"));
+const react_1 = __importDefault(require("react"));
+const getLevelColor = (level) => {
+    switch (level) {
+        case 'error': return '#dc3545';
+        case 'warn': return '#ffc107';
+        case 'info': return '#0dcaf0';
+        case 'log': return '#6c757d';
+        case 'debug': return '#6c757d';
+        default: return '#6c757d';
+    }
+};
+const getProcessColor = (process) => {
+    switch (process) {
+        case 'ui':
+        case 'renderer': return '#0dcaf0';
+        case 'electron':
+        case 'main': return '#d946ef';
+        case 'react-native': return '#61dafb';
+        default: return '#6c757d';
+    }
+};
+const getLevelIcon = (level) => {
+    switch (level) {
+        case 'error': return 'bi-x-circle-fill';
+        case 'warn': return 'bi-exclamation-triangle-fill';
+        case 'info': return 'bi-info-circle-fill';
+        case 'debug': return 'bi-bug-fill';
+        default: return 'bi-chat-square-text';
+    }
+};
+const MobileLogCard = ({ log, colorMode }) => {
+    const isDark = colorMode === 'dark';
+    // Parse context if it's a string
+    let context = log.context;
+    if (typeof context === 'string') {
+        try {
+            context = (0, peers_sdk_1.fromJSONString)(context);
+        }
+        catch (err) { }
+    }
+    return (react_1.default.createElement("div", { style: {
+            padding: '10px 12px',
+            borderBottom: `1px solid ${isDark ? '#333' : '#e9ecef'}`,
+            backgroundColor: isDark ? '#1a1a1a' : '#fff',
+        } },
+        react_1.default.createElement("div", { className: "d-flex align-items-center gap-2 mb-1", style: { flexWrap: 'wrap' } },
+            react_1.default.createElement("span", { style: { fontSize: '0.7rem', color: isDark ? '#888' : '#666' } }, (0, moment_1.default)(log.timestamp).format('HH:mm:ss.SSS')),
+            react_1.default.createElement("span", { className: "badge text-white", style: {
+                    backgroundColor: getLevelColor(log.level),
+                    fontSize: '0.65rem',
+                    padding: '2px 6px'
+                } },
+                react_1.default.createElement("i", { className: `${getLevelIcon(log.level)} me-1` }),
+                log.level),
+            react_1.default.createElement("span", { className: "badge text-white", style: {
+                    backgroundColor: getProcessColor(log.process),
+                    fontSize: '0.65rem',
+                    padding: '2px 6px'
+                } }, log.process),
+            log.source && (react_1.default.createElement("span", { style: { fontSize: '0.65rem', color: isDark ? '#666' : '#999' } }, log.source))),
+        react_1.default.createElement("div", { style: {
+                fontSize: '0.8rem',
+                wordBreak: 'break-word',
+                color: isDark ? '#e0e0e0' : '#333'
+            } }, log.message),
+        context && (react_1.default.createElement("details", { className: "mt-1" },
+            react_1.default.createElement("summary", { className: "text-muted", style: { cursor: 'pointer', fontSize: '0.7rem' } },
+                react_1.default.createElement("i", { className: "bi bi-code-square me-1" }),
+                "Context"),
+            react_1.default.createElement("pre", { className: "mt-1 p-2 rounded", style: {
+                    fontSize: '0.65rem',
+                    backgroundColor: isDark ? '#252525' : '#f8f9fa',
+                    color: isDark ? '#aaa' : '#333',
+                    overflow: 'auto',
+                    maxHeight: '150px'
+                } }, JSON.stringify(context, null, 2)))),
+        log.stackTrace && (react_1.default.createElement("details", { className: "mt-1" },
+            react_1.default.createElement("summary", { className: "text-danger", style: { cursor: 'pointer', fontSize: '0.7rem' } },
+                react_1.default.createElement("i", { className: "bi bi-bug me-1" }),
+                "Stack Trace"),
+            react_1.default.createElement("pre", { className: "mt-1 p-2 rounded text-danger", style: {
+                    fontSize: '0.6rem',
+                    backgroundColor: isDark ? '#2a1a1a' : '#fff0f0',
+                    overflow: 'auto',
+                    maxHeight: '150px'
+                } }, log.stackTrace)))));
+};
+exports.MobileLogCard = MobileLogCard;

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

@@ -46,7 +46,8 @@ const SettingsPage = () => {
         react_1.default.createElement(DeviceName, null),
         react_1.default.createElement(PackagesRootDirectory, null),
         react_1.default.createElement(ReloadPackagesOnPageRefresh, null),
-        react_1.default.createElement(ResetDeviceSyncInfos, null)));
+        react_1.default.createElement(ResetDeviceSyncInfos, null),
+        react_1.default.createElement(DeleteLocalDatabase, null)));
 };
 exports.SettingsPage = SettingsPage;
 const DeviceName = () => {
@@ -130,3 +131,20 @@ const ResetDeviceSyncInfos = () => {
                 }
             } }, "Reset All Device Sync Info")));
 };
+const DeleteLocalDatabase = () => {
+    return (react_1.default.createElement("div", { className: 'mt-3' },
+        react_1.default.createElement("button", { className: 'btn btn-danger btn-sm ms-2', onClick: async () => {
+                const confirmed = confirm('Are you sure you want to delete the local database for the current group? ' +
+                    'This will remove all local data. You will need to restart the app and re-sync from other devices.');
+                if (!confirmed)
+                    return;
+                try {
+                    await peers_sdk_1.rpcServerCalls.deleteLocalDatabase();
+                    alert('Local database has been deleted. Please restart the app.');
+                }
+                catch (err) {
+                    console.error('Error while deleting local database', err);
+                    alert('Failed to delete local database: ' + err.message);
+                }
+            } }, "Delete Local Database")));
+};

package/dist/setupTests.js

@@ -1,6 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 require("@testing-library/jest-dom");
+const util_1 = require("util");
+// Polyfill TextEncoder/TextDecoder for jsdom environment
+global.TextEncoder = util_1.TextEncoder;
+global.TextDecoder = util_1.TextDecoder;
 // Mock IntersectionObserver
 global.IntersectionObserver = class {
     constructor() { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.8.3",
+  "version": "0.8.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/peers-app/peers-ui.git"
@@ -21,13 +21,13 @@
     "release:minor": "yarn clean && yarn build && npm version minor && git push && git push --tags",
     "release:major": "yarn clean && yarn build && npm version major && git push && git push --tags",
     "release": "yarn release:patch",
-    "test": "echo 'no tests yet'",
+    "test": "jest --no-watchman",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage"
   },
   "peerDependencies": {
+    "@peers-app/peers-sdk": "^0.8.5",
     "bootstrap": "^5.3.3",
-    "@peers-app/peers-sdk": "^0.8.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
@@ -37,13 +37,14 @@
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.27.1",
     "@electron/rebuild": "^3.6.0",
+    "@peers-app/peers-sdk": "0.8.5",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/bootstrap": "^5.2.10",
     "@types/dompurify": "^3.0.5",
-    "@types/jest": "^29.5.12",
+    "@types/jest": "^30.0.0",
     "@types/lodash": "^4.17.1",
     "@types/node": "^20.12.10",
     "@types/prismjs": "^1.26.4",
@@ -57,7 +58,6 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^30.0.5",
     "path-browserify": "^1.0.1",
-    "@peers-app/peers-sdk": "0.8.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "string-width": "^7.1.0",

package/src/hooks.test.tsx

@@ -0,0 +1,324 @@
+import React from 'react';
+import { render, screen, act, waitFor } from '@testing-library/react';
+import { observable, Observable } from '@peers-app/peers-sdk';
+import { useObservable, useObservableState } from './hooks';
+
+// Helper component to test useObservable
+function TestComponent<T>({ obs, testId = 'value' }: { obs: Observable<T> | T, testId?: string }) {
+  const [value, setValue] = useObservable(obs);
+  return (
+    <div>
+      <span data-testid={testId}>{JSON.stringify(value)}</span>
+      <button data-testid="setter" onClick={() => setValue('new-value' as any)}>Set</button>
+    </div>
+  );
+}
+
+// Helper component to test array behavior
+function ArrayTestComponent({ obs }: { obs: Observable<string[]> }) {
+  const [value] = useObservable(obs);
+  return (
+    <div>
+      <span data-testid="array-value">{JSON.stringify(value)}</span>
+      <span data-testid="array-length">{value.length}</span>
+    </div>
+  );
+}
+
+// Helper component to test useObservableState
+function ObservableStateTestComponent({ initialValue }: { initialValue: number }) {
+  const obs = useObservableState(initialValue);
+  const [value] = useObservable(obs);
+  return (
+    <div>
+      <span data-testid="state-value">{value}</span>
+      <button data-testid="increment" onClick={() => obs(obs() + 1)}>Increment</button>
+    </div>
+  );
+}
+
+describe('useObservable', () => {
+  describe('basic functionality', () => {
+    it('should return the current value of an observable', () => {
+      const obs = observable('hello');
+      render(<TestComponent obs={obs} />);
+      expect(screen.getByTestId('value')).toHaveTextContent('"hello"');
+    });
+
+    it('should return the value when passed a plain value (non-observable)', () => {
+      render(<TestComponent obs="plain-value" />);
+      expect(screen.getByTestId('value')).toHaveTextContent('"plain-value"');
+    });
+
+    it('should re-render when observable value changes', async () => {
+      const obs = observable('initial');
+      render(<TestComponent obs={obs} />);
+      
+      expect(screen.getByTestId('value')).toHaveTextContent('"initial"');
+      
+      act(() => {
+        obs('updated');
+      });
+      
+      await waitFor(() => {
+        expect(screen.getByTestId('value')).toHaveTextContent('"updated"');
+      });
+    });
+
+    it('should update the observable when setter is called', async () => {
+      const obs = observable('initial');
+      render(<TestComponent obs={obs} />);
+      
+      act(() => {
+        screen.getByTestId('setter').click();
+      });
+      
+      await waitFor(() => {
+        expect(obs()).toBe('new-value');
+        expect(screen.getByTestId('value')).toHaveTextContent('"new-value"');
+      });
+    });
+
+    it('should handle undefined values', () => {
+      const obs = observable<string | undefined>(undefined);
+      render(<TestComponent obs={obs} />);
+      // undefined serializes to empty string in JSON.stringify, but actually shows as nothing
+      expect(screen.getByTestId('value')).toHaveTextContent('');
+    });
+
+    it('should handle object values', async () => {
+      const obs = observable({ name: 'test', count: 5 });
+      render(<TestComponent obs={obs} />);
+      
+      expect(screen.getByTestId('value')).toHaveTextContent('{"name":"test","count":5}');
+      
+      act(() => {
+        obs({ name: 'updated', count: 10 });
+      });
+      
+      await waitFor(() => {
+        expect(screen.getByTestId('value')).toHaveTextContent('{"name":"updated","count":10}');
+      });
+    });
+  });
+
+  describe('array handling', () => {
+    it('should handle array values', () => {
+      const obs = observable(['a', 'b', 'c']);
+      render(<ArrayTestComponent obs={obs} />);
+      
+      expect(screen.getByTestId('array-value')).toHaveTextContent('["a","b","c"]');
+      expect(screen.getByTestId('array-length')).toHaveTextContent('3');
+    });
+
+    it('should re-render when array is replaced with new reference', async () => {
+      const obs = observable(['a', 'b']);
+      render(<ArrayTestComponent obs={obs} />);
+      
+      expect(screen.getByTestId('array-length')).toHaveTextContent('2');
+      
+      act(() => {
+        obs(['a', 'b', 'c']); // New array reference
+      });
+      
+      await waitFor(() => {
+        expect(screen.getByTestId('array-length')).toHaveTextContent('3');
+      });
+    });
+
+    it('should NOT re-render when array is mutated in place (requires immutable updates)', async () => {
+      // This tests the case where an array is mutated in place and notifySubscribers is called.
+      // 
+      // IMPORTANT BEHAVIORAL NOTE:
+      // The OLD implementation (useState + useEffect) had special handling that would 
+      // spread the array when it detected same-reference mutation: 
+      //   if (isArray(newData) && newData === data) setData([...newData])
+      // 
+      // The NEW implementation (useSyncExternalStore) does NOT do this.
+      // useSyncExternalStore uses Object.is() comparison on getSnapshot results.
+      // If the reference is the same, React won't re-render.
+      //
+      // This is actually the CORRECT behavior - it encourages immutable data patterns
+      // which are required for React 18 concurrent rendering to work correctly.
+      // Mutating data in place can cause tearing in concurrent mode.
+      
+      const obs = observable(['a', 'b']);
+      render(<ArrayTestComponent obs={obs} />);
+      
+      expect(screen.getByTestId('array-length')).toHaveTextContent('2');
+      
+      act(() => {
+        // Mutate the array in place (BAD PRACTICE - don't do this!)
+        const arr = obs();
+        arr.push('c');
+        obs.notifySubscribers();
+      });
+      
+      // The observable itself has the mutated value
+      expect(obs()).toEqual(['a', 'b', 'c']);
+      
+      // But the component did NOT re-render because the reference didn't change
+      // This is expected with useSyncExternalStore - it requires immutable updates
+      expect(screen.getByTestId('array-length')).toHaveTextContent('2');
+    });
+
+    it('should re-render when array is properly updated with spread', async () => {
+      // This is the recommended pattern for updating arrays
+      const obs = observable(['a', 'b']);
+      render(<ArrayTestComponent obs={obs} />);
+      
+      expect(screen.getByTestId('array-length')).toHaveTextContent('2');
+      
+      act(() => {
+        obs([...obs(), 'c']); // Proper immutable update
+      });
+      
+      await waitFor(() => {
+        expect(screen.getByTestId('array-length')).toHaveTextContent('3');
+        expect(screen.getByTestId('array-value')).toHaveTextContent('["a","b","c"]');
+      });
+    });
+  });
+
+  describe('subscription management', () => {
+    it('should unsubscribe when component unmounts', () => {
+      const obs = observable('test');
+      const initialSubscriberCount = obs.subscriberCount();
+      
+      const { unmount } = render(<TestComponent obs={obs} />);
+      
+      // Should have subscribed
+      expect(obs.subscriberCount()).toBeGreaterThan(initialSubscriberCount);
+      
+      unmount();
+      
+      // Should have unsubscribed
+      expect(obs.subscriberCount()).toBe(initialSubscriberCount);
+    });
+
+    it('should handle multiple components subscribing to same observable', async () => {
+      const obs = observable('shared');
+      
+      render(
+        <div>
+          <TestComponent obs={obs} testId="value1" />
+          <TestComponent obs={obs} testId="value2" />
+        </div>
+      );
+      
+      expect(screen.getByTestId('value1')).toHaveTextContent('"shared"');
+      expect(screen.getByTestId('value2')).toHaveTextContent('"shared"');
+      
+      act(() => {
+        obs('updated');
+      });
+      
+      await waitFor(() => {
+        expect(screen.getByTestId('value1')).toHaveTextContent('"updated"');
+        expect(screen.getByTestId('value2')).toHaveTextContent('"updated"');
+      });
+    });
+  });
+
+  describe('rapid updates', () => {
+    it('should handle rapid sequential updates correctly', async () => {
+      const obs = observable(0);
+      
+      function CounterComponent() {
+        const [value] = useObservable(obs);
+        return <span data-testid="counter">{value}</span>;
+      }
+      
+      render(<CounterComponent />);
+      
+      act(() => {
+        for (let i = 1; i <= 10; i++) {
+          obs(i);
+        }
+      });
+      
+      await waitFor(() => {
+        expect(screen.getByTestId('counter')).toHaveTextContent('10');
+      });
+    });
+  });
+});
+
+describe('useObservableState', () => {
+  it('should create an observable with the initial value', () => {
+    render(<ObservableStateTestComponent initialValue={42} />);
+    expect(screen.getByTestId('state-value')).toHaveTextContent('42');
+  });
+
+  it('should re-render when the observable is updated', async () => {
+    render(<ObservableStateTestComponent initialValue={0} />);
+    
+    expect(screen.getByTestId('state-value')).toHaveTextContent('0');
+    
+    act(() => {
+      screen.getByTestId('increment').click();
+    });
+    
+    await waitFor(() => {
+      expect(screen.getByTestId('state-value')).toHaveTextContent('1');
+    });
+  });
+
+  it('should maintain the same observable instance across re-renders', async () => {
+    let capturedObs: Observable<number> | null = null;
+    
+    function CaptureObsComponent() {
+      const obs = useObservableState(0);
+      if (!capturedObs) {
+        capturedObs = obs;
+      }
+      const [value] = useObservable(obs);
+      return (
+        <div>
+          <span data-testid="value">{value}</span>
+          <span data-testid="same-obs">{obs === capturedObs ? 'same' : 'different'}</span>
+          <button data-testid="update" onClick={() => obs(obs() + 1)}>Update</button>
+        </div>
+      );
+    }
+    
+    render(<CaptureObsComponent />);
+    
+    expect(screen.getByTestId('same-obs')).toHaveTextContent('same');
+    
+    // Trigger a re-render by updating the observable
+    act(() => {
+      screen.getByTestId('update').click();
+    });
+    
+    await waitFor(() => {
+      expect(screen.getByTestId('value')).toHaveTextContent('1');
+      expect(screen.getByTestId('same-obs')).toHaveTextContent('same');
+    });
+  });
+
+  it('should not subscribe when doNotSubscribe is true', () => {
+    function NoSubscribeComponent() {
+      const obs = useObservableState(0, true); // doNotSubscribe = true
+      return (
+        <div>
+          <span data-testid="value">{obs()}</span>
+          <button data-testid="update" onClick={() => obs(obs() + 1)}>Update</button>
+        </div>
+      );
+    }
+    
+    render(<NoSubscribeComponent />);
+    
+    expect(screen.getByTestId('value')).toHaveTextContent('0');
+    
+    // Update won't cause re-render since we're not subscribed
+    act(() => {
+      screen.getByTestId('update').click();
+    });
+    
+    // Value in DOM should still show 0 since component didn't re-render
+    // But the observable itself has been updated
+    expect(screen.getByTestId('value')).toHaveTextContent('0');
+  });
+});

package/src/hooks.ts

@@ -1,47 +1,43 @@
 
-import React, { useState, useEffect } from 'react';
-import { isArray, isEqual } from 'lodash';
-import { observable, isSubscribable, unwrapObservable, Observable } from "@peers-app/peers-sdk";
+import { isSubscribable, observable, Observable, unwrapObservable } from "@peers-app/peers-sdk";
+import React, { useCallback, useEffect, useState, useSyncExternalStore } from 'react';
 
 
 
 /**
  * Use this to subscribe to an observable or computed in a functional component.
+ * Uses useSyncExternalStore for proper React 18 concurrent rendering support.
  * @param sub the observable or computed to subscribe to
- * @param deps an array of dependencies to pass to useEffect which will trigger a re-render when any of the dependencies change
+ * @param deps an array of dependencies that will cause re-subscription when changed
  * @returns the current value of the observable or computed and a function to set the value
  */
 export function useObservable<T>(sub: Observable<T> | T, deps: React.DependencyList = []): [T, (value: T) => void] {
-  const [data, setData] = useState(() => unwrapObservable(sub));
-  useEffect(() => {
+  // Create memoized subscribe function that adapts Observable's subscribe API to useSyncExternalStore's expected signature
+  const subscribe = useCallback((onStoreChange: () => void) => {
     if (!isSubscribable(sub)) {
-      return;
-    }
-    const subscription = sub.subscribe(() => {
-      const newData = sub();
-      // @ts-ignore
-      if (isArray(newData) && newData === data) {
-        // @ts-ignore
-        setData([...newData])
-      } else {
-        setData(newData)      
-      }
-    })
-    // the data might change _after_ useObservable is called but _before_ the subscription has been created
-    // this checks for that and updates the state with the new data if necessary
-    const newData = sub();
-    if (!isEqual(data, newData)) {
-      setData(newData);
+      // If not subscribable, return a no-op unsubscribe
+      return () => {};
     }
+    const subscription = sub.subscribe(onStoreChange);
     return () => subscription.dispose();
-  }, deps);
+  }, [sub, ...deps]);
 
-  return [data, newData => {
-    setData(newData);
+  // getSnapshot returns the current value from the observable
+  const getSnapshot = useCallback(() => {
+    return unwrapObservable(sub);
+  }, [sub, ...deps]);
+
+  // Use useSyncExternalStore for concurrent-safe subscription
+  const data = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+
+  // Create setter that updates both local understanding and the observable
+  const setter = useCallback((newData: T) => {
     if (isSubscribable(sub)) {
       sub(newData);
     }
-  }];
+  }, [sub]);
+
+  return [data, setter];
 }
 
 /**
@@ -120,27 +116,3 @@ export function useOnScreen(ref: React.RefObject<any>) {
 
   return isIntersecting
 }
-
-// /**
-//  * This creates an observable that will automatically persist its value between page reloads using localStorage.
-//  * If localStorage is not available, the observable will not persist its value.
-//  * @param initialValue the initial value of the observable
-//  * @param globalName the name to use when storing the value in localStorage
-//  * @returns the observable that will persist between page reloads
-//  */
-// export function persistentValue<T>(initialValue: T, globalName: string): Observable<T | undefined> {
-//   let q = observable<T>();
-//   if (typeof localStorage === 'undefined') {
-//     return q;
-//   }
-//   q.subscribe(newVal => {
-//     localStorage.setItem(globalName, JSON.stringify(toJSON(newVal)))
-//   })
-//   const existing = localStorage.getItem(globalName);
-//   if (existing) {
-//     q(fromJSON(JSON.parse(existing)))
-//   } else {
-//     q(initialValue);
-//   }
-//   return q;
-// }

package/src/screens/console-logs/console-logs-list.tsx

@@ -9,6 +9,8 @@ import { colorMode } from '../settings/color-mode-dropdown';
 import { LogDisplay } from './log-display';
 import { LogFilters } from './log-filters';
 import { ResizableTableHeader } from './resizable-table-header';
+import { isDesktop } from '../../globals';
+import { MobileLogCard } from './mobile-log-card';
 
 const windowHeight = () => window.innerHeight;
 
@@ -37,7 +39,9 @@ export const ConsoleLogsList = () => {
   const [totalLogCount, setTotalLogCount] = useState<number>(0);
   const [_colorMode] = useObservable(colorMode);
   const logsEndRef = React.useRef<HTMLDivElement>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);  
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  useObservable(isDesktop);
+  const isMobile = !isDesktop();
 
   const batchSize = 50;
 
@@ -226,12 +230,14 @@ export const ConsoleLogsList = () => {
           overflow: 'hidden',
         }}
       >
-        {/* Resizable table header outside scroll area */}
-        <ResizableTableHeader
-          columns={columns}
-          onColumnsChange={setColumns}
-          colorMode={_colorMode}
-        />
+        {/* Desktop: Resizable table header outside scroll area */}
+        {!isMobile && (
+          <ResizableTableHeader
+            columns={columns}
+            onColumnsChange={setColumns}
+            colorMode={_colorMode}
+          />
+        )}
 
         {/* Scrollable content area */}
         <div
@@ -267,11 +273,18 @@ export const ConsoleLogsList = () => {
                 <i className="bi bi-inbox display-1"></i>
                 <p className="mt-2">No logs found</p>
               </div>
+            ) : isMobile ? (
+              /* Mobile: Card-based layout */
+              <div>
+                {_logs.map((log) => (
+                  <MobileLogCard key={log.logId} log={log} colorMode={_colorMode} />
+                ))}
+              </div>
             ) : (
+              /* Desktop: Table layout */
               <table className="table table-sm table-hover mb-0" style={{ fontSize: '0.85rem', tableLayout: 'fixed', width: '100%' }}>
                 <tbody>
                   {_logs.map((log) => (
-                    // log.logId
                     <LogDisplay key={log.logId} log={log} columns={columns} />
                   ))}
                 </tbody>

package/src/screens/console-logs/mobile-log-card.tsx

@@ -0,0 +1,154 @@
+import { fromJSONString, IConsoleLog } from "@peers-app/peers-sdk";
+import moment from 'moment';
+import React from 'react';
+
+interface MobileLogCardProps {
+  log: IConsoleLog;
+  colorMode: string;
+}
+
+const getLevelColor = (level: string) => {
+  switch (level) {
+    case 'error': return '#dc3545';
+    case 'warn': return '#ffc107';
+    case 'info': return '#0dcaf0';
+    case 'log': return '#6c757d';
+    case 'debug': return '#6c757d';
+    default: return '#6c757d';
+  }
+};
+
+const getProcessColor = (process: string) => {
+  switch (process) {
+    case 'ui':
+    case 'renderer': return '#0dcaf0';
+    case 'electron':
+    case 'main': return '#d946ef';
+    case 'react-native': return '#61dafb';
+    default: return '#6c757d';
+  }
+};
+
+const getLevelIcon = (level: string) => {
+  switch (level) {
+    case 'error': return 'bi-x-circle-fill';
+    case 'warn': return 'bi-exclamation-triangle-fill';
+    case 'info': return 'bi-info-circle-fill';
+    case 'debug': return 'bi-bug-fill';
+    default: return 'bi-chat-square-text';
+  }
+};
+
+export const MobileLogCard = ({ log, colorMode }: MobileLogCardProps) => {
+  const isDark = colorMode === 'dark';
+  
+  // Parse context if it's a string
+  let context = log.context;
+  if (typeof context === 'string') {
+    try {
+      context = fromJSONString(context);
+    } catch (err) {}
+  }
+
+  return (
+    <div
+      style={{
+        padding: '10px 12px',
+        borderBottom: `1px solid ${isDark ? '#333' : '#e9ecef'}`,
+        backgroundColor: isDark ? '#1a1a1a' : '#fff',
+      }}
+    >
+      {/* Header row: timestamp, level, process */}
+      <div className="d-flex align-items-center gap-2 mb-1" style={{ flexWrap: 'wrap' }}>
+        <span style={{ fontSize: '0.7rem', color: isDark ? '#888' : '#666' }}>
+          {moment(log.timestamp).format('HH:mm:ss.SSS')}
+        </span>
+        <span
+          className="badge text-white"
+          style={{ 
+            backgroundColor: getLevelColor(log.level),
+            fontSize: '0.65rem',
+            padding: '2px 6px'
+          }}
+        >
+          <i className={`${getLevelIcon(log.level)} me-1`}></i>
+          {log.level}
+        </span>
+        <span
+          className="badge text-white"
+          style={{ 
+            backgroundColor: getProcessColor(log.process),
+            fontSize: '0.65rem',
+            padding: '2px 6px'
+          }}
+        >
+          {log.process}
+        </span>
+        {log.source && (
+          <span style={{ fontSize: '0.65rem', color: isDark ? '#666' : '#999' }}>
+            {log.source}
+          </span>
+        )}
+      </div>
+      
+      {/* Message */}
+      <div style={{ 
+        fontSize: '0.8rem', 
+        wordBreak: 'break-word',
+        color: isDark ? '#e0e0e0' : '#333'
+      }}>
+        {log.message}
+      </div>
+      
+      {/* Context (collapsible) */}
+      {context && (
+        <details className="mt-1">
+          <summary 
+            className="text-muted" 
+            style={{ cursor: 'pointer', fontSize: '0.7rem' }}
+          >
+            <i className="bi bi-code-square me-1"></i>
+            Context
+          </summary>
+          <pre 
+            className="mt-1 p-2 rounded" 
+            style={{ 
+              fontSize: '0.65rem',
+              backgroundColor: isDark ? '#252525' : '#f8f9fa',
+              color: isDark ? '#aaa' : '#333',
+              overflow: 'auto',
+              maxHeight: '150px'
+            }}
+          >
+            {JSON.stringify(context, null, 2)}
+          </pre>
+        </details>
+      )}
+      
+      {/* Stack trace (collapsible) */}
+      {log.stackTrace && (
+        <details className="mt-1">
+          <summary 
+            className="text-danger" 
+            style={{ cursor: 'pointer', fontSize: '0.7rem' }}
+          >
+            <i className="bi bi-bug me-1"></i>
+            Stack Trace
+          </summary>
+          <pre 
+            className="mt-1 p-2 rounded text-danger" 
+            style={{ 
+              fontSize: '0.6rem',
+              backgroundColor: isDark ? '#2a1a1a' : '#fff0f0',
+              overflow: 'auto',
+              maxHeight: '150px'
+            }}
+          >
+            {log.stackTrace}
+          </pre>
+        </details>
+      )}
+    </div>
+  );
+};
+

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

@@ -13,6 +13,7 @@ export const SettingsPage: React.FC = () => {
       <PackagesRootDirectory />
       <ReloadPackagesOnPageRefresh />
       <ResetDeviceSyncInfos />
+      <DeleteLocalDatabase />
     </div>
   );
 };
@@ -144,4 +145,30 @@ const ResetDeviceSyncInfos: React.FC = () => {
       </button>
     </div>
   );
+}
+
+const DeleteLocalDatabase: React.FC = () => {
+  return (
+    <div className='mt-3'>
+      <button
+        className='btn btn-danger btn-sm ms-2'
+        onClick={async () => {
+          const confirmed = confirm(
+            'Are you sure you want to delete the local database for the current group? ' +
+            'This will remove all local data. You will need to restart the app and re-sync from other devices.'
+          );
+          if (!confirmed) return;
+          try {
+            await rpcServerCalls.deleteLocalDatabase();
+            alert('Local database has been deleted. Please restart the app.');
+          } catch (err) {
+            console.error('Error while deleting local database', err);
+            alert('Failed to delete local database: ' + (err as Error).message);
+          }
+        }}
+      >
+        Delete Local Database
+      </button>
+    </div>
+  );
 }

package/src/setupTests.ts

@@ -1,4 +1,9 @@
 import '@testing-library/jest-dom';
+import { TextEncoder, TextDecoder } from 'util';
+
+// Polyfill TextEncoder/TextDecoder for jsdom environment
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder as any;
 
 // Mock IntersectionObserver
 (global as any).IntersectionObserver = class {

package/tsconfig.json

@@ -9,16 +9,14 @@
     "strict": true,
     "noImplicitAny": true,
     "strictNullChecks": true,
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "types": ["jest", "node"]
   },
   "include": [
     "src/**/*.ts",
-    "src/**/*.tsx",
+    "src/**/*.tsx"
   ],
   "exclude": [
-    "src/**/__tests__/**/*",
-    "src/**/*.test.*",
-    "src/**/*.spec.*",
     "node_modules"
   ]
 }