yaver-feedback-react-native 0.8.11 → 0.8.13

package/src/FeedbackModal.tsx

@@ -12,6 +12,7 @@ import {
   Text,
   TextInput,
   View,
+  useWindowDimensions,
 } from 'react-native';
 import { YaverFeedback } from './YaverFeedback';
 import {
@@ -27,6 +28,8 @@ import { uploadFeedback } from './upload';
 import { DeviceInfo, FeedbackBundle } from './types';
 import { AuthOverlay } from './AuthOverlay';
 import { QuickActionIcon } from './QuickActionIcon';
+import { VibeChatScreen } from './VibeChatScreen';
+import { DeployPanel } from './DeployPanel';
 import { listReachableDevices, RemoteDevice } from './auth';
 import {
   QUICK_ICON_COLOR_PRESETS,
@@ -62,6 +65,11 @@ type MachineCardState = {
 };
 
 export const FeedbackModal: React.FC = () => {
+  const { width: winW, height: winH } = useWindowDimensions();
+  const isTablet = Math.min(winW, winH) >= 600;
+  // Tablet color/icon picker fans out to 5/6 cols — 31% (3-col)
+  // looks empty on a 1024pt iPad. Mobile keeps 3-col.
+  const iconOptionWidthOverride = isTablet ? '18%' : undefined;
   const [visible, setVisible] = useState(false);
   const [action, setAction] = useState<ActionState>('idle');
   const [error, setError] = useState<string | null>(null);
@@ -79,6 +87,7 @@ export const FeedbackModal: React.FC = () => {
   // "pick something for me" prompt (which in 0.7.13 pointed Claude at
   // the wrong project because the matcher grepped the prompt itself).
   const [showVibeInput, setShowVibeInput] = useState(false);
+  const [showDeploy, setShowDeploy] = useState(false);
   const [vibePrompt, setVibePrompt] = useState('');
   const [lastVibeTaskId, setLastVibeTaskId] = useState<string | null>(null);
   const [quickIconColorPreset, setQuickIconColorPreset] =
@@ -415,6 +424,7 @@ export const FeedbackModal: React.FC = () => {
         config.agentUrl,
         config.authToken ?? '',
         bundle,
+        YaverFeedback.getRelayPassword(),
       );
       // The agent returns the new report id as `id` (see
       // feedback_http.go::ReceiveFeedback). Trigger the fix loop if we got
@@ -534,6 +544,17 @@ export const FeedbackModal: React.FC = () => {
     }
   }, [showVibeInput, vibePrompt]);
 
+  // Hold the active vibe-chat session — set when handleVibingSubmit
+  // returns a fresh taskId. Renders <VibeChatScreen> which streams the
+  // SSE transcript, supports multi-turn follow-ups via /tasks/{id}/
+  // resume, and exposes a Reload button. Mirrors the in-Yaver native
+  // pane's transcript-mode behaviour, just rendered in RN here.
+  const [activeVibe, setActiveVibe] = useState<{
+    taskId: string;
+    initialPrompt: string;
+  } | null>(null);
+  const [includeScreenshot, setIncludeScreenshot] = useState<boolean>(true);
+
   const handleVibingSubmit = useCallback(async () => {
     const client = YaverFeedback.getP2PClient();
     if (!client) {
@@ -553,13 +574,47 @@ export const FeedbackModal: React.FC = () => {
               .join('\n')
           : '';
       const userPrompt = vibePrompt.trim();
-      const prompt = userPrompt
+      const promptText = userPrompt
         ? userPrompt + errNote
         : 'Pick the next small improvement or fix for this app based on recent activity and the current screen.' +
           errNote;
-      const result = await client.vibing(prompt);
+
+      // Optional screenshot — captured from the host app's window.
+      // captureScreenshotBase64 returns null when react-native-view-
+      // shot isn't installed; we skip the screenshot rather than
+      // abort the whole feedback in that case.
+      let screenshotBase64: string | undefined;
+      if (includeScreenshot) {
+        const cap = await import('./capture');
+        const captured = await cap.captureScreenshotBase64();
+        if (captured?.base64) {
+          screenshotBase64 = captured.base64;
+        }
+      }
+
+      // Resolve project context the same way reloadApp / vibing did.
+      const { resolveAppIdentity } = await import('./P2PClient');
+      const identity = resolveAppIdentity();
+
+      // Pull the user's preferred runner / model from local prefs.
+      // Both are optional — the agent falls back to whatever runner
+      // is signed in if neither is provided.
+      const prefs = await import('./preferences');
+      const preferredRunner = (await prefs.getPreferredRunner?.()) ?? null;
+      const preferredModel = (await prefs.getPreferredModel?.()) ?? null;
+
+      const result = await client.createFeedbackTask({
+        userPrompt: promptText,
+        projectName: identity.projectName,
+        projectPath: identity.projectPath,
+        runner: preferredRunner ?? undefined,
+        model: preferredModel ?? undefined,
+        screenshotBase64,
+      });
       setLastVibeTaskId(result.taskId);
-      setToast(`Vibing task ${result.taskId.slice(0, 8)} created`);
+      // Hand off to VibeChatScreen — it streams the SSE transcript,
+      // accepts follow-ups, and surfaces a Reload button.
+      setActiveVibe({ taskId: result.taskId, initialPrompt: promptText });
       setVibePrompt('');
       setShowVibeInput(false);
     } catch (err: unknown) {
@@ -567,7 +622,7 @@ export const FeedbackModal: React.FC = () => {
     } finally {
       if (mountedRef.current) setAction('idle');
     }
-  }, [vibePrompt]);
+  }, [vibePrompt, includeScreenshot]);
 
   /*
   const handleScreenRecording = useCallback(async () => {
@@ -577,6 +632,40 @@ export const FeedbackModal: React.FC = () => {
 
   const busy = action !== 'idle';
 
+  // Once the user fires off a vibe task, swap the entire modal body
+  // for the live chat screen. The chat manages its own SSE
+  // subscription, multi-turn follow-ups, and Reload button. Closing
+  // the chat returns to idle and clears the active vibe.
+  if (visible && activeVibe) {
+    const client = YaverFeedback.getP2PClient();
+    return (
+      <>
+        <AuthOverlay />
+        <QuickActionIcon />
+        <Modal
+          visible={visible}
+          animationType="slide"
+          transparent
+          onRequestClose={() => setActiveVibe(null)}
+        >
+          {client ? (
+            <VibeChatScreen
+              client={client}
+              initialTaskId={activeVibe.taskId}
+              initialUserPrompt={activeVibe.initialPrompt}
+              onClose={() => setActiveVibe(null)}
+              onReload={async () => {
+                const c = YaverFeedback.getP2PClient();
+                if (!c) throw new Error('Not connected');
+                await c.reloadApp();
+              }}
+            />
+          ) : null}
+        </Modal>
+      </>
+    );
+  }
+
   return (
     <>
       <AuthOverlay />
@@ -596,7 +685,21 @@ export const FeedbackModal: React.FC = () => {
               pointerEvents="box-none"
             >
             <Pressable
-              style={styles.modal}
+              // Tablet: cap modal width and center as a card-style
+              // sheet rather than a phone bottom sheet that stretches
+              // across a 12.9" iPad. Phone behaviour unchanged.
+              style={[
+                styles.modal,
+                isTablet
+                  ? {
+                      width: '100%',
+                      maxWidth: 640,
+                      alignSelf: 'center',
+                      borderTopLeftRadius: 22,
+                      borderTopRightRadius: 22,
+                    }
+                  : null,
+              ]}
               onPress={(e) => {
                 e.stopPropagation();
                 Keyboard.dismiss();
@@ -702,6 +805,7 @@ export const FeedbackModal: React.FC = () => {
                         }}
                         style={[
                           styles.iconOption,
+                          iconOptionWidthOverride ? { width: iconOptionWidthOverride } : null,
                           selected && styles.iconOptionSelected,
                         ]}
                       >
@@ -810,6 +914,23 @@ export const FeedbackModal: React.FC = () => {
                 busy={action === 'capturing'}
               />
 
+              {/* Deploy — opens an inline panel that talks to
+                  /fleet/deploy-options on the agent and lets the user
+                  pick TestFlight / Play / Both, then a machine to run
+                  it on. Capabilities (e.g. "Linux can't TestFlight")
+                  come from the agent's doctor probes — no client-side
+                  platform smarts here. */}
+              {!showDeploy ? (
+                <ActionRow
+                  label="Deploy"
+                  tint="#7f8cf7"
+                  onPress={() => setShowDeploy(true)}
+                  disabled={busy}
+                />
+              ) : (
+                <DeployPanel onClose={() => setShowDeploy(false)} />
+              )}
+
               {/* Remote sign-in buttons — trigger codex/claude device-auth
                   on the selected agent without leaving the app. Opens a
                   small native modal showing the verification URL + 8-char

package/src/FloatingButton.tsx

@@ -11,6 +11,7 @@ import {
   TextInput,
   TouchableOpacity,
   View,
+  useWindowDimensions,
 } from 'react-native';
 import { YaverFeedback } from './YaverFeedback';
 import { FixReport } from './FixReport';
@@ -58,6 +59,15 @@ export interface FloatingButtonProps {
 
 const DEFAULT_SIZE = 40;
 const DEFAULT_COLOR = '#6366f1';
+
+// Tablet detection — short-edge dp >= 600 means iPad / 7"+ Android
+// tablet / Z Fold open. The SDK has no app-side responsive context
+// to lean on (it's a guest in third-party apps), so we infer
+// locally and bump the button + panel to tablet sizes.
+const TABLET_SHORT_EDGE = 600;
+function isTabletWindow(width: number, height: number): boolean {
+  return Math.min(width, height) >= TABLET_SHORT_EDGE;
+}
 const DEFAULT_PANEL_BG = '#2d2d2d';
 
 /**
@@ -101,7 +111,16 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
   healthCheckInterval = 5000,
   panelBackgroundColor,
 }) => {
-  const { width: screenWidth } = Dimensions.get('window');
+  // Read window size live so the SDK overlay re-pins itself when
+  // the host app rotates or splits. The legacy snapshot via
+  // Dimensions.get only ran once and parked the button off-screen
+  // after orientation changes on iPad.
+  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
+  const isTablet = isTabletWindow(screenWidth, screenHeight);
+  // Tablets get a larger touch target and a wider panel — phones
+  // keep the existing 40 / 280 defaults so guest apps aren't
+  // disrupted on small screens.
+  const effectiveSize = isTablet ? Math.max(size, 52) : size;
   const defaultX = initialPosition?.x ?? 10;
   const defaultY = initialPosition?.y ?? 90;
 
@@ -535,7 +554,12 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
   const buttonIcon = icon ?? 'y';
   const btnBg = isConnected ? color : `${color}88`;
 
-  const panelWidth = fullSize ? screenWidth - 24 : 280;
+  // Panel sizing — tablets get a wider compact panel (420) and a
+  // capped full-size panel (max 720 instead of full window) so the
+  // overlay doesn't dwarf the host app on a 12.9" iPad.
+  const compactPanelWidth = isTablet ? 420 : 280;
+  const fullPanelWidth = isTablet ? Math.min(screenWidth - 24, 720) : screenWidth - 24;
+  const panelWidth = fullSize ? fullPanelWidth : compactPanelWidth;
 
   return (
     <Animated.View
@@ -730,7 +754,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
         style={[
           s.button,
           isTerminal ? s.buttonTerminal : s.buttonMinimal,
-          { backgroundColor: btnBg, width: size, height: size },
+          { backgroundColor: btnBg, width: effectiveSize, height: effectiveSize },
           !isTerminal && { borderRadius: size / 2 },
         ]}
         activeOpacity={0.7}

package/src/P2PClient.ts

@@ -31,7 +31,7 @@ export interface ReloadAck {
  * NativeModules. None of the lookups throw — missing data just means
  * the agent will fall back to its own dev-server resolution.
  */
-function resolveAppIdentity(opts?: {
+export function resolveAppIdentity(opts?: {
   projectName?: string;
   bundleId?: string;
   projectPath?: string;
@@ -807,6 +807,202 @@ export class P2PClient {
   }
 
   /** Internal helper for authenticated GET/POST requests. */
+  /**
+   * Convergence point for ALL feedback surfaces — Tasks tab, in-Yaver
+   * native pane, and this standalone SDK all POST the same shape to
+   * `/tasks`. Wraps the user's text with the shared prompt builder
+   * (see `_core/buildFeedbackPrompt`) so every surface conditions
+   * the AI the same way.
+   *
+   * Returns the agent's response payload (`taskId`, etc.) so callers
+   * can wire `streamTaskOutput()` next for live transcript.
+   *
+   * Inputs:
+   *   - userPrompt          what the user typed
+   *   - projectName / path  optional Hot-Reload project context
+   *   - runner / model      optional preferred coding agent + model
+   *   - screenshotBase64    optional JPEG base64 (no `data:` prefix)
+   *   - imageMimeType       defaults to "image/jpeg"
+   */
+  async createFeedbackTask(input: {
+    userPrompt: string;
+    projectName?: string;
+    projectPath?: string;
+    runner?: string;
+    model?: string;
+    screenshotBase64?: string;
+    imageMimeType?: string;
+  }): Promise<{ taskId: string; raw?: unknown }> {
+    const { buildFeedbackPrompt } = await import('./_core/buildFeedbackPrompt');
+    const hasScreenshot = !!(input.screenshotBase64 && input.screenshotBase64.length > 0);
+    const description = buildFeedbackPrompt({
+      userPrompt: input.userPrompt,
+      projectName: input.projectName,
+      projectPath: input.projectPath,
+      hasScreenshot,
+    });
+    const images: Array<{ base64: string; mimeType: string; filename: string }> = [];
+    if (hasScreenshot && input.screenshotBase64) {
+      images.push({
+        base64: input.screenshotBase64,
+        mimeType: input.imageMimeType ?? 'image/jpeg',
+        filename: `yaver-feedback-${Math.floor(Date.now() / 1000)}.jpg`,
+      });
+    }
+    const body: Record<string, unknown> = {
+      title: input.userPrompt.slice(0, 80),
+      description,
+      userPrompt: input.userPrompt,
+      source: 'mobile-feedback',
+      images,
+    };
+    if (input.projectPath && input.projectPath.trim()) body.workDir = input.projectPath.trim();
+    if (input.projectName && input.projectName.trim()) body.projectName = input.projectName.trim();
+    if (input.runner && input.runner.trim()) body.runner = input.runner.trim();
+    if (input.model && input.model.trim()) body.model = input.model.trim();
+
+    const resp = await fetch(`${this.baseUrl}/tasks`, {
+      method: 'POST',
+      headers: this.authHeaders({ 'Content-Type': 'application/json' }),
+      body: JSON.stringify(body),
+    });
+    if (!resp.ok) {
+      const text = await resp.text().catch(() => '');
+      throw new Error(`createFeedbackTask HTTP ${resp.status}: ${text}`);
+    }
+    const json = (await resp.json().catch(() => ({}))) as { taskId?: string };
+    if (!json.taskId) {
+      throw new Error('createFeedbackTask: agent did not return taskId');
+    }
+    return { taskId: json.taskId, raw: json };
+  }
+
+  /**
+   * Subscribe to a task's live stdout/stderr stream. Returns an abort
+   * function — call it to detach. The agent emits NDJSON lines on
+   * `/tasks/{id}/output`; we surface each line via `onLine`.
+   *
+   * `onComplete` fires when the agent reports the task entered a
+   * terminal status (completed / failed / stopped). After that the
+   * caller should stop calling abort().
+   *
+   * Robust to fetch streaming on Hermes (streams Body via Response.
+   * body.getReader on platforms that support it; falls back to
+   * polling `/tasks/{id}` every 750 ms if streaming isn't available).
+   */
+  streamTaskOutput(
+    taskId: string,
+    onLine: (line: string) => void,
+    onComplete: (status: string) => void,
+  ): () => void {
+    const ctrl = new AbortController();
+    let closed = false;
+    const close = () => {
+      if (closed) return;
+      closed = true;
+      try { ctrl.abort(); } catch { /* ignore */ }
+    };
+
+    (async () => {
+      try {
+        const resp = await fetch(`${this.baseUrl}/tasks/${encodeURIComponent(taskId)}/output`, {
+          method: 'GET',
+          headers: this.authHeaders({ Accept: 'text/event-stream' }),
+          signal: ctrl.signal,
+        });
+        if (!resp.ok) {
+          throw new Error(`streamTaskOutput HTTP ${resp.status}`);
+        }
+        // RN Hermes: Response.body may be undefined. Fall back to
+        // polling final state.
+        const body = (resp as unknown as { body?: ReadableStream<Uint8Array> }).body;
+        if (!body || typeof body.getReader !== 'function') {
+          await pollTaskUntilDone(this, taskId, onLine, onComplete, () => closed);
+          return;
+        }
+        const reader = body.getReader();
+        const decoder = new TextDecoder();
+        let buf = '';
+        while (!closed) {
+          const { value, done } = await reader.read();
+          if (done) break;
+          buf += decoder.decode(value, { stream: true });
+          // SSE frames are separated by \n\n; payloads are `data: <json>\n`.
+          let idx = buf.indexOf('\n\n');
+          while (idx >= 0) {
+            const frame = buf.slice(0, idx);
+            buf = buf.slice(idx + 2);
+            for (const line of frame.split('\n')) {
+              if (line.startsWith('data:')) {
+                const payload = line.slice(5).trim();
+                if (payload) onLine(payload);
+              }
+            }
+            idx = buf.indexOf('\n\n');
+          }
+        }
+        // Stream closed cleanly — query final status.
+        try {
+          const final = await fetch(
+            `${this.baseUrl}/tasks/${encodeURIComponent(taskId)}`,
+            { headers: this.authHeaders() },
+          );
+          const j = (await final.json().catch(() => ({}))) as { status?: string };
+          onComplete(j.status ?? 'completed');
+        } catch {
+          onComplete('completed');
+        }
+      } catch (e) {
+        if (!closed) {
+          // Surface the error via onLine so the UI shows it inline,
+          // then mark complete so the caller stops waiting.
+          onLine(`__error__: ${e instanceof Error ? e.message : String(e)}`);
+          onComplete('failed');
+        }
+      }
+    })();
+    return close;
+  }
+
+  /**
+   * Send a follow-up message into an existing task — multi-turn vibe
+   * chat. The agent's `/tasks/{id}/resume` accepts the same shape as
+   * `/tasks` (description / userPrompt / images), and the existing
+   * task picks back up with the same runner + project context.
+   */
+  async resumeTask(input: {
+    taskId: string;
+    userPrompt: string;
+    screenshotBase64?: string;
+    imageMimeType?: string;
+  }): Promise<void> {
+    const images: Array<{ base64: string; mimeType: string; filename: string }> = [];
+    if (input.screenshotBase64 && input.screenshotBase64.length > 0) {
+      images.push({
+        base64: input.screenshotBase64,
+        mimeType: input.imageMimeType ?? 'image/jpeg',
+        filename: `yaver-feedback-followup-${Math.floor(Date.now() / 1000)}.jpg`,
+      });
+    }
+    const resp = await fetch(
+      `${this.baseUrl}/tasks/${encodeURIComponent(input.taskId)}/resume`,
+      {
+        method: 'POST',
+        headers: this.authHeaders({ 'Content-Type': 'application/json' }),
+        body: JSON.stringify({
+          description: input.userPrompt,
+          userPrompt: input.userPrompt,
+          source: 'mobile-feedback',
+          images,
+        }),
+      },
+    );
+    if (!resp.ok) {
+      const text = await resp.text().catch(() => '');
+      throw new Error(`resumeTask HTTP ${resp.status}: ${text}`);
+    }
+  }
+
   private async request(method: string, path: string): Promise<Response> {
     const response = await fetch(`${this.baseUrl}${path}`, {
       method,
@@ -823,3 +1019,53 @@ export class P2PClient {
     return response;
   }
 }
+
+/**
+ * Fallback path used by streamTaskOutput when the platform's fetch
+ * returns a Response with no streaming body (older Hermes builds).
+ * Polls `/tasks/{id}` every 750 ms; surfaces newly-appended output
+ * lines via `onLine`, fires `onComplete` when status is terminal.
+ */
+async function pollTaskUntilDone(
+  client: P2PClient,
+  taskId: string,
+  onLine: (line: string) => void,
+  onComplete: (status: string) => void,
+  isClosed: () => boolean,
+): Promise<void> {
+  // Use bracket access to read the private baseUrl/authHeaders without
+  // making them public — confined to this file's scope.
+  const c = client as unknown as {
+    baseUrl: string;
+    authHeaders: (extra?: Record<string, string>) => Record<string, string>;
+  };
+  let lastLen = 0;
+  for (;;) {
+    if (isClosed()) return;
+    try {
+      const r = await fetch(`${c.baseUrl}/tasks/${encodeURIComponent(taskId)}`, {
+        headers: c.authHeaders(),
+      });
+      const j = (await r.json().catch(() => ({}))) as {
+        status?: string;
+        output?: string[] | string;
+      };
+      const all = Array.isArray(j.output) ? j.output : (j.output ? [j.output] : []);
+      const flat = all.join('\n');
+      if (flat.length > lastLen) {
+        const fresh = flat.slice(lastLen);
+        lastLen = flat.length;
+        for (const ln of fresh.split('\n')) {
+          if (ln.length > 0) onLine(ln);
+        }
+      }
+      if (j.status && ['completed', 'failed', 'stopped'].includes(j.status)) {
+        onComplete(j.status);
+        return;
+      }
+    } catch {
+      // Transient — keep polling.
+    }
+    await new Promise((res) => setTimeout(res, 750));
+  }
+}