yaver-feedback-react-native 0.9.0 → 0.9.3

package/src/YaverModeBadge.tsx

@@ -0,0 +1,234 @@
+// YaverModeBadge.tsx — the polite "you're running inside Yaver" mark, for
+// THIRD-PARTY apps.
+//
+// ── Why a third-party app needs this ────────────────────────────────────────
+//
+// When your app is pushed into Yaver's container as a Hermes bundle, it looks
+// exactly like your installed build. Same icon, same launch, same everything —
+// except it is a development bundle from someone's branch. Testers have chased
+// "bugs" that were only unbuilt work, and have been unable to find their way
+// back to the real app because nothing on screen said there was anywhere to go.
+//
+// So the SDK shows one small Y, low contrast, in a corner. Tapping it says what
+// you're in and how to leave. Nothing else.
+//
+// ── Defaults, and why ───────────────────────────────────────────────────────
+//
+// DEFAULT ENABLED (`modeBadge: true`), because the failure it prevents is
+// silent and lands on a tester rather than the developer — exactly the class
+// that should not be opt-in. Turn it off with `modeBadge: false` when your app
+// has its own in-container indicator, or when a screenshot-perfect surface
+// genuinely cannot afford 22 points in a corner.
+//
+// ── What it is NOT ──────────────────────────────────────────────────────────
+//
+// It is NOT the escape. Yaver's container owns that: shake opens Yaver's own
+// overlay with "Back to Yaver". This badge only tells you the gesture exists.
+// Making it the exit would put the way out inside the previewed app, which is
+// the trap the container's escape-ownership rules exist to prevent — the guest
+// could style over it, or unmount it, and the tester would be stuck.
+
+import React, { useEffect, useState } from 'react';
+import { Alert, Modal, NativeModules, Pressable, Text, View } from 'react-native';
+
+/** True only inside Yaver's container: the YaverInfo native module is
+ *  registered by Yaver's app and by nothing else. Same probe ShakeDetector
+ *  and P2PClient use — one answer, not three. */
+function isInsideYaver(): boolean {
+  try {
+    return !!(NativeModules as any)?.YaverInfo;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Per-RUN dismissal, shared by every mounted badge.
+ *
+ * Deliberately in memory, not storage. A permanently hidden badge recreates
+ * exactly the problem the badge exists to prevent: a tester who cannot tell an
+ * unbuilt branch from the installed app, and cannot find the way back. Polite
+ * means not nagging within a session — it does not mean permanent amnesia
+ * about which build you are looking at. A relaunch is a new context.
+ *
+ * An APP that wants it gone for good passes `modeBadge: false` at init. That is
+ * a developer making an informed choice, which is a different thing from a
+ * tester clearing their screen for a minute.
+ */
+let hiddenThisRun = false;
+const hideListeners = new Set<() => void>();
+
+/** Hide the mark for the rest of this run. Exposed on YaverFeedback so a host
+ *  can wire its own "hide" control, and used by the sheet's own button. */
+export function hideYaverModeBadge(): void {
+  hiddenThisRun = true;
+  hideListeners.forEach((l) => {
+    try {
+      l();
+    } catch {
+      /* one bad listener mustn't block the others */
+    }
+  });
+}
+
+/** Bring it back — e.g. when a NEW guest bundle loads and the context changed. */
+export function showYaverModeBadge(): void {
+  hiddenThisRun = false;
+  hideListeners.forEach((l) => {
+    try {
+      l();
+    } catch {
+      /* noop */
+    }
+  });
+}
+
+export function isYaverModeBadgeHidden(): boolean {
+  return hiddenThisRun;
+}
+
+export interface YaverModeBadgeProps {
+  /** Corner to sit in. Default bottom-left: bottom-right is where most apps
+   *  put a FAB, and the badge must never compete with the app's own action. */
+  position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+  /** Render even outside Yaver. Development aid only — the badge is meaningless
+   *  in a standalone build and would be wallpaper. */
+  force?: boolean;
+  /** Account-scoped third-party Dogfood mode. Keeps the same Yaver Y mark but
+   * changes the explanation and offers a confirmed exit to normal Feedback. */
+  dogfood?: boolean;
+  dogfoodLabel?: string;
+  onExitDogfood?: () => void | Promise<void>;
+}
+
+export function YaverModeBadge({
+  position = 'bottom-left',
+  force = false,
+  dogfood = false,
+  dogfoodLabel = 'Dogfood',
+  onExitDogfood,
+}: YaverModeBadgeProps) {
+  const [open, setOpen] = useState(false);
+  const [, bump] = useState(0);
+
+  useEffect(() => {
+    const listener = () => bump((n) => n + 1);
+    hideListeners.add(listener);
+    return () => {
+      hideListeners.delete(listener);
+    };
+  }, []);
+
+  // Standalone builds render nothing at all — zero cost, zero pixels.
+  if (!force && !dogfood && !isInsideYaver()) return null;
+  if (hiddenThisRun) return null;
+
+  const vertical = position.startsWith('top') ? { top: 44 } : { bottom: 28 };
+  const horizontal = position.endsWith('left') ? { left: 12 } : { right: 12 };
+
+  return (
+    <>
+      <View
+        // The wrapper never intercepts touches; only the 22pt mark does. A
+        // full-screen overlay that swallowed taps would break the app it is
+        // supposed to be politely annotating.
+        pointerEvents="box-none"
+        style={{ position: 'absolute', ...vertical, ...horizontal, zIndex: 9998 }}
+      >
+        <Pressable
+          onPress={() => setOpen(true)}
+          accessibilityRole="button"
+          accessibilityLabel={dogfood ? `Exit ${dogfoodLabel} Dogfood mode` : 'Running inside Yaver'}
+          hitSlop={10}
+          style={({ pressed }) => ({
+            width: 22,
+            height: 22,
+            borderRadius: 11,
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderWidth: 1,
+            borderColor: 'rgba(124,92,255,0.45)',
+            backgroundColor: 'rgba(124,92,255,0.14)',
+            opacity: pressed ? 0.6 : 0.9,
+          })}
+        >
+          <Text style={{ color: '#7C5CFF', fontSize: 12, fontWeight: '700', lineHeight: 14 }}>Y</Text>
+        </Pressable>
+      </View>
+
+      <Modal visible={open} transparent animationType="fade" onRequestClose={() => setOpen(false)}>
+        <Pressable style={{ flex: 1, backgroundColor: '#0008' }} onPress={() => setOpen(false)}>
+          <Pressable
+            onPress={(e) => e.stopPropagation()}
+            style={{
+              margin: 24,
+              marginTop: 'auto',
+              marginBottom: 48,
+              borderRadius: 16,
+              padding: 18,
+              backgroundColor: '#151519',
+              borderWidth: 1,
+              borderColor: '#2a2a32',
+              gap: 10,
+            }}
+          >
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+              <Text style={{ color: '#7C5CFF', fontSize: 15, fontWeight: '800' }}>Y</Text>
+              <Text style={{ color: '#fff', fontSize: 15, fontWeight: '700' }}>
+                {dogfood ? `${dogfoodLabel} Dogfood mode` : 'Running inside Yaver'}
+              </Text>
+            </View>
+            <Text style={{ color: '#b6b6c0', fontSize: 13, lineHeight: 19 }}>
+              {dogfood
+                ? 'This approved account is improving the app directly through Yaver. Tasks and re-render actions target this app instead of creating a feedback report.'
+                : 'This is a development build loaded into Yaver — not the version installed on this device. Anything unfinished here is work in progress, not a released bug.'}
+            </Text>
+            {dogfood ? (
+              <Pressable
+                onPress={() => Alert.alert(
+                  'Exit Dogfood mode?',
+                  'Return this SDK to normal Feedback mode. Your coding tasks and source changes are untouched.',
+                  [
+                    { text: 'Keep Dogfooding', style: 'cancel' },
+                    { text: 'Exit Dogfood', style: 'destructive', onPress: () => {
+                      void onExitDogfood?.();
+                      setOpen(false);
+                    } },
+                  ],
+                )}
+                style={{ paddingVertical: 10, alignItems: 'center' }}
+              >
+                <Text style={{ color: '#fca5a5', fontSize: 13, fontWeight: '700' }}>Exit Dogfood mode</Text>
+              </Pressable>
+            ) : (
+              <Text style={{ color: '#b6b6c0', fontSize: 13, lineHeight: 19 }}>
+                Shake the device to open Yaver's overlay, where "Back to Yaver" returns you to the installed app.
+              </Text>
+            )}
+            {/* Polite means closeable. "for now", never "don't show again":
+                the badge returns next launch so nobody forgets which build
+                they're testing. */}
+            <Pressable
+              onPress={() => {
+                hideYaverModeBadge();
+                setOpen(false);
+              }}
+              style={{ paddingVertical: 10, alignItems: 'center' }}
+            >
+              <Text style={{ color: '#8a8a96', fontSize: 13 }}>Hide for now</Text>
+            </Pressable>
+            <Text style={{ color: '#6b6b76', fontSize: 11, textAlign: 'center', lineHeight: 15 }}>
+              Hidden until you next launch this build.
+            </Text>
+
+            <Pressable onPress={() => setOpen(false)} style={{ paddingVertical: 10, alignItems: 'center' }}>
+              <Text style={{ color: '#8a8a96', fontSize: 13 }}>Close</Text>
+            </Pressable>
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </>
+  );
+}
+
+export default YaverModeBadge;

package/src/__tests__/AuthDevices.test.ts

@@ -9,7 +9,7 @@ describe('auth device listing', () => {
     mockFetch.mockReset();
   });
 
-  it('keeps guest-shared devices in the shared bucket', async () => {
+  it('returns the owner devices emitted by /devices/list', async () => {
     mockFetch.mockResolvedValue({
       ok: true,
       json: () =>
@@ -20,24 +20,10 @@ describe('auth device listing', () => {
               name: 'My Mac',
               platform: 'macos',
               isOnline: true,
-              isGuest: false,
               quicHost: '10.0.0.10',
               quicPort: 18080,
               lastHeartbeat: 123,
             },
-            {
-              deviceId: 'guest-1',
-              name: 'yaver-test-ephemeral',
-              platform: 'linux',
-              isOnline: true,
-              isGuest: true,
-              hostName: 'Host User',
-              hostEmail: 'host@example.com',
-              accessScope: 'shared-scoped',
-              quicHost: '198.51.100.20',
-              quicPort: 18080,
-              lastHeartbeat: 456,
-            },
           ],
         }),
     });
@@ -51,43 +37,6 @@ describe('auth device listing', () => {
       }),
     );
     expect(result.owned).toHaveLength(1);
-    expect(result.shared).toHaveLength(1);
     expect(result.owned[0].deviceId).toBe('own-1');
-    expect(result.shared[0]).toMatchObject({
-      deviceId: 'guest-1',
-      isGuest: true,
-      hostEmail: 'host@example.com',
-      accessScope: 'shared-scoped',
-    });
-  });
-
-  it('shows shared devices even when the guest owns no machines', async () => {
-    mockFetch.mockResolvedValue({
-      ok: true,
-      json: () =>
-        Promise.resolve({
-          devices: [
-            {
-              deviceId: 'guest-only',
-              name: 'yaver-test-ephemeral',
-              platform: 'linux',
-              isOnline: true,
-              isGuest: true,
-              hostName: 'Host User',
-              hostEmail: 'host@example.com',
-              accessScope: 'shared-scoped',
-              quicHost: '198.51.100.20',
-              quicPort: 18080,
-              lastHeartbeat: 789,
-            },
-          ],
-        }),
-    });
-
-    const result = await listReachableDevices('guest-only-token');
-
-    expect(result.owned).toEqual([]);
-    expect(result.shared).toHaveLength(1);
-    expect(result.shared[0].deviceId).toBe('guest-only');
   });
 });

package/src/__tests__/BlackBox.relayPassword.test.ts

@@ -0,0 +1,129 @@
+// BlackBox relay-password sourcing.
+//
+// This exists because BlackBox.start() used to read the relay password off
+// the feedback config:
+//
+//     BlackBox.relayPassword =
+//       (feedbackConfig as { relayPassword?: string }).relayPassword ?? '';
+//
+// `relayPassword` is not a key on FeedbackConfig. The cast is what stopped
+// the compiler from saying so, and the field was therefore permanently ''.
+// Since every X-Relay-Password header is written behind an
+// `if (BlackBox.relayPassword)` guard, the header was never sent, and the
+// relay 401s an empty password (relay/server.go). Net effect: on cellular
+// (the only time the relay is used at all) the SSE command channel died,
+// so the reload that lands after an agent fix never fired. On-LAN the
+// password is unused, so this was invisible in local dev — it only ever
+// broke remote users.
+//
+// The contract pinned here: BlackBox takes its relay password from
+// YaverFeedback.getRelayPassword(), the same source P2PClient uses.
+
+import { BlackBox } from '../BlackBox';
+import { YaverFeedback } from '../YaverFeedback';
+
+jest.mock('react-native', () => ({
+  Platform: { OS: 'ios' },
+}));
+
+jest.useFakeTimers();
+
+const mockFetch = jest.fn();
+global.fetch = mockFetch as any;
+
+class MockAbortController {
+  signal = { aborted: false };
+  abort = jest.fn(() => {
+    this.signal.aborted = true;
+  });
+}
+global.AbortController = MockAbortController as any;
+
+function emptySse(): ReadableStream<Uint8Array> {
+  return new ReadableStream<Uint8Array>({
+    start(controller) {
+      controller.close();
+    },
+  });
+}
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  mockFetch.mockImplementation((url: string) => {
+    if (String(url).includes('/blackbox/command-stream')) {
+      return Promise.resolve({ ok: true, body: emptySse() });
+    }
+    return Promise.resolve({ ok: true, json: () => Promise.resolve({}) });
+  });
+  // A relay-routed agent URL — the shape discovery produces off-LAN.
+  YaverFeedback.init({
+    agentUrl: 'https://public.yaver.io/d/macmini-1',
+    authToken: 'tok',
+  });
+});
+
+afterEach(() => {
+  BlackBox.stop();
+  jest.restoreAllMocks();
+});
+
+describe('BlackBox relay password', () => {
+  it('sends X-Relay-Password on the SSE command stream, sourced from getRelayPassword()', async () => {
+    jest.spyOn(YaverFeedback, 'getRelayPassword').mockReturnValue('s3cret-relay-pw');
+
+    BlackBox.start({ deviceId: 'dev-abc', appName: 'talos-mobile' });
+    await Promise.resolve();
+    await Promise.resolve();
+
+    const sseCall = mockFetch.mock.calls.find(([url]) =>
+      String(url).includes('/blackbox/command-stream'),
+    );
+    expect(sseCall).toBeDefined();
+    const [, init] = sseCall!;
+    expect(init.headers).toEqual(
+      expect.objectContaining({ 'X-Relay-Password': 's3cret-relay-pw' }),
+    );
+  });
+
+  it('sends X-Relay-Password on the event flush', async () => {
+    jest.spyOn(YaverFeedback, 'getRelayPassword').mockReturnValue('s3cret-relay-pw');
+
+    // maxBufferSize:1 makes push() flush synchronously on the first event,
+    // so this doesn't hang on interval semantics.
+    BlackBox.start({ deviceId: 'dev-abc', maxBufferSize: 1 });
+    BlackBox.log('hello');
+    await Promise.resolve();
+
+    const flush = mockFetch.mock.calls.find(([url]) =>
+      String(url).includes('/blackbox/events'),
+    );
+    expect(flush).toBeDefined();
+    const [, init] = flush!;
+    expect(init.headers).toEqual(
+      expect.objectContaining({ 'X-Relay-Password': 's3cret-relay-pw' }),
+    );
+  });
+
+  it('omits the header entirely when there is no relay password (direct LAN)', async () => {
+    // An empty header value is itself a 401 at the relay, so "no password"
+    // must mean "no header", not "empty header".
+    jest.spyOn(YaverFeedback, 'getRelayPassword').mockReturnValue('');
+
+    BlackBox.start({ deviceId: 'dev-abc' });
+    await Promise.resolve();
+    await Promise.resolve();
+
+    const sseCall = mockFetch.mock.calls.find(([url]) =>
+      String(url).includes('/blackbox/command-stream'),
+    );
+    expect(sseCall).toBeDefined();
+    const [, init] = sseCall!;
+    expect(init.headers).not.toHaveProperty('X-Relay-Password');
+  });
+
+  it('does not read a relayPassword key off the feedback config', () => {
+    // The original bug in one assertion: FeedbackConfig has no such key, so
+    // anyone reintroducing that read gets '' and silently breaks the relay.
+    expect(YaverFeedback.getConfig()).not.toHaveProperty('relayPassword');
+  });
+});

package/src/__tests__/BlackBoxAutoStart.test.ts

@@ -0,0 +1,111 @@
+// BlackBox auto-start config passthrough.
+//
+// The natural way to configure the flight recorder — and the one the README's
+// own snippet shows — is:
+//
+//     YaverFeedback.init({ trigger: 'shake' });
+//     BlackBox.start({ appName: 'my-app' });
+//
+// That start() early-returns: a zero-config init has no agentUrl yet, because
+// discovery resolves it asynchronously. The SDK's autoStartBlackBox then fires
+// ~500ms later once the agent and token exist — and used to call start() with
+// no arguments, quietly replacing the host's config with defaults and leaving
+// appName as ''. Hosts had no way to tell: the recorder streamed, just
+// anonymously.
+//
+// config.blackBox is now the supported channel, and auto-start honours it.
+
+import { BlackBox } from '../BlackBox';
+import { YaverFeedback } from '../YaverFeedback';
+
+jest.mock('react-native', () => ({
+  Platform: { OS: 'ios' },
+  DeviceEventEmitter: { emit: jest.fn(), addListener: jest.fn() },
+  NativeModules: {},
+}));
+
+jest.mock('../ShakeDetector', () => ({
+  ShakeDetector: jest.fn().mockImplementation(() => ({
+    start: jest.fn(),
+    stop: jest.fn(),
+  })),
+}));
+
+jest.useFakeTimers();
+
+const mockFetch = jest.fn(() =>
+  Promise.resolve({ ok: true, json: () => Promise.resolve({}), body: null }),
+);
+global.fetch = mockFetch as any;
+
+class MockAbortController {
+  signal = { aborted: false };
+  abort = jest.fn();
+}
+global.AbortController = MockAbortController as any;
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  YaverFeedback.destroy();
+});
+
+afterEach(() => {
+  BlackBox.stop();
+  YaverFeedback.destroy();
+});
+
+describe('autoStartBlackBox config passthrough', () => {
+  it('starts BlackBox with the config passed on init', async () => {
+    const startSpy = jest.spyOn(BlackBox, 'start').mockImplementation(() => {});
+
+    YaverFeedback.init({
+      trigger: 'shake',
+      agentUrl: 'http://localhost:18080',
+      authToken: 'tok',
+      blackBox: { appName: 'talos-mobile', flushInterval: 3000, maxBufferSize: 25 },
+    });
+
+    await jest.advanceTimersByTimeAsync(600);
+
+    expect(startSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        appName: 'talos-mobile',
+        flushInterval: 3000,
+        maxBufferSize: 25,
+      }),
+    );
+    startSpy.mockRestore();
+  });
+
+  it('still auto-starts when no blackBox config is given', async () => {
+    const startSpy = jest.spyOn(BlackBox, 'start').mockImplementation(() => {});
+
+    YaverFeedback.init({
+      trigger: 'shake',
+      agentUrl: 'http://localhost:18080',
+      authToken: 'tok',
+    });
+
+    await jest.advanceTimersByTimeAsync(600);
+
+    expect(startSpy).toHaveBeenCalled();
+    startSpy.mockRestore();
+  });
+
+  it('does not auto-start when autoStartBlackBox is false', async () => {
+    const startSpy = jest.spyOn(BlackBox, 'start').mockImplementation(() => {});
+
+    YaverFeedback.init({
+      trigger: 'shake',
+      agentUrl: 'http://localhost:18080',
+      authToken: 'tok',
+      autoStartBlackBox: false,
+      blackBox: { appName: 'talos-mobile' },
+    });
+
+    await jest.advanceTimersByTimeAsync(600);
+
+    expect(startSpy).not.toHaveBeenCalled();
+    startSpy.mockRestore();
+  });
+});