yaver-feedback-react-native 0.8.12 → 0.8.13

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));
+  }
+}

package/src/VibeChatScreen.tsx

@@ -0,0 +1,362 @@
+// VibeChatScreen — the converged chat UI for the standalone feedback
+// SDK. Mirrors Yaver mobile's Tasks tab + the in-Yaver native pane:
+//
+//   1. User sees a live SSE transcript of agent stdout (PhaseStatusLine
+//      style "searching… / compiling…" while running, full markdown
+//      output once it lands).
+//   2. User can keep vibing — type a follow-up after the first turn
+//      lands and POST a /tasks/{id}/resume to multi-turn the same
+//      coding session.
+//   3. Reload button at the bottom hits client.reloadApp() so the user
+//      can see the change without leaving the chat.
+//
+// State machine:
+//   idle    — empty, waiting for first prompt (handled by parent screen)
+//   running — task is live, transcript streams, follow-up disabled
+//   done    — task finished, follow-up enabled, Reload prominent
+//   failed  — same as done but error tinted
+
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import type { P2PClient } from './P2PClient';
+
+export type VibeTurnRole = 'user' | 'assistant' | 'status';
+
+export interface VibeTurn {
+  id: string;
+  role: VibeTurnRole;
+  text: string;
+  timestamp: number;
+}
+
+interface Props {
+  client: P2PClient;
+  initialTaskId: string;
+  initialUserPrompt: string;
+  onClose?: () => void;
+  /** Called when the user taps Reload after a task completes — uses
+   *  P2PClient.reloadApp() with the active project context. */
+  onReload?: () => Promise<void>;
+}
+
+export function VibeChatScreen({
+  client,
+  initialTaskId,
+  initialUserPrompt,
+  onClose,
+  onReload,
+}: Props) {
+  const [taskId, setTaskId] = useState(initialTaskId);
+  const [turns, setTurns] = useState<VibeTurn[]>(() => [
+    {
+      id: `user-${Date.now()}`,
+      role: 'user',
+      text: initialUserPrompt,
+      timestamp: Date.now(),
+    },
+    {
+      id: `status-${Date.now()}`,
+      role: 'status',
+      text: 'starting…',
+      timestamp: Date.now(),
+    },
+  ]);
+  const [streamBuffer, setStreamBuffer] = useState('');
+  const [status, setStatus] = useState<'running' | 'done' | 'failed'>('running');
+  const [followUp, setFollowUp] = useState('');
+  const [isResuming, setIsResuming] = useState(false);
+  const [isReloading, setIsReloading] = useState(false);
+  const scrollRef = useRef<ScrollView | null>(null);
+  const abortRef = useRef<(() => void) | null>(null);
+
+  // Subscribe to the current task's SSE stream. Re-runs whenever the
+  // taskId changes (resumeTask reuses the same id, so this only fires
+  // once per task — which is fine).
+  useEffect(() => {
+    let live = true;
+    const acc: string[] = [];
+    const close = client.streamTaskOutput(
+      taskId,
+      (line) => {
+        if (!live) return;
+        // Filter our internal error sentinel from the SSE helper.
+        if (line.startsWith('__error__:')) {
+          setStatus('failed');
+          setStreamBuffer((prev) => prev + (prev ? '\n' : '') + line.slice('__error__:'.length).trim());
+          return;
+        }
+        acc.push(line);
+        // Throttle re-renders: flush every ~100ms.
+        setStreamBuffer(acc.join('\n'));
+      },
+      (terminal) => {
+        if (!live) return;
+        setStatus(terminal === 'completed' ? 'done' : 'failed');
+        // Move the buffered stream into a real assistant turn so the
+        // user sees a stable render and can scroll back, then clear
+        // the buffer for any follow-up.
+        setTurns((prev) => {
+          const collapsed = acc.join('\n').trim();
+          if (!collapsed) return prev.filter((t) => t.role !== 'status');
+          const next = prev.filter((t) => t.role !== 'status');
+          next.push({
+            id: `assistant-${taskId}-${Date.now()}`,
+            role: 'assistant',
+            text: collapsed,
+            timestamp: Date.now(),
+          });
+          return next;
+        });
+        setStreamBuffer('');
+      },
+    );
+    abortRef.current = close;
+    return () => {
+      live = false;
+      try { close(); } catch { /* ignore */ }
+    };
+  }, [client, taskId]);
+
+  // Auto-scroll the transcript when new content lands.
+  useEffect(() => {
+    const t = setTimeout(() => {
+      scrollRef.current?.scrollToEnd({ animated: true });
+    }, 50);
+    return () => clearTimeout(t);
+  }, [streamBuffer, turns]);
+
+  const handleSendFollowUp = useCallback(async () => {
+    const text = followUp.trim();
+    if (!text || isResuming) return;
+    setIsResuming(true);
+    // Add user turn immediately for snappy UX.
+    setTurns((prev) => [
+      ...prev,
+      { id: `user-${Date.now()}`, role: 'user', text, timestamp: Date.now() },
+      { id: `status-${Date.now()}`, role: 'status', text: 'thinking…', timestamp: Date.now() },
+    ]);
+    setFollowUp('');
+    setStatus('running');
+    setStreamBuffer('');
+    try {
+      await client.resumeTask({ taskId, userPrompt: text });
+      // resumeTask reuses the same taskId, so the SSE subscription
+      // above will pick up the new output stream automatically. To
+      // force a fresh subscription we momentarily flip taskId to a
+      // sentinel and back; cleaner than tearing down + re-attaching
+      // the SSE manually.
+      const same = taskId;
+      setTaskId(`${same}#`);
+      setTimeout(() => setTaskId(same), 0);
+    } catch (e) {
+      setStatus('failed');
+      setTurns((prev) => [
+        ...prev.filter((t) => t.role !== 'status'),
+        {
+          id: `assistant-err-${Date.now()}`,
+          role: 'assistant',
+          text: `Failed to send follow-up: ${e instanceof Error ? e.message : String(e)}`,
+          timestamp: Date.now(),
+        },
+      ]);
+    } finally {
+      setIsResuming(false);
+    }
+  }, [client, followUp, isResuming, taskId]);
+
+  const handleReload = useCallback(async () => {
+    if (isReloading || !onReload) return;
+    setIsReloading(true);
+    try {
+      await onReload();
+    } catch (e) {
+      setTurns((prev) => [
+        ...prev,
+        {
+          id: `assistant-reload-err-${Date.now()}`,
+          role: 'assistant',
+          text: `Reload failed: ${e instanceof Error ? e.message : String(e)}`,
+          timestamp: Date.now(),
+        },
+      ]);
+    } finally {
+      setIsReloading(false);
+    }
+  }, [isReloading, onReload]);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.title}>Vibe</Text>
+        {onClose && (
+          <TouchableOpacity onPress={onClose} accessibilityLabel="Close vibe chat">
+            <Text style={styles.close}>✕</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+
+      <ScrollView
+        ref={scrollRef}
+        style={styles.transcript}
+        contentContainerStyle={styles.transcriptContent}
+        keyboardShouldPersistTaps="handled"
+      >
+        {turns.map((turn) => (
+          <View
+            key={turn.id}
+            style={[
+              styles.turn,
+              turn.role === 'user' && styles.turnUser,
+              turn.role === 'assistant' && styles.turnAssistant,
+              turn.role === 'status' && styles.turnStatus,
+            ]}
+          >
+            <Text style={styles.turnText}>{turn.text}</Text>
+          </View>
+        ))}
+        {/* Live streaming buffer rendered as a single trailing
+            assistant block while the task is running. Once the task
+            terminates the stream is moved into a real turn (above)
+            and this block clears. */}
+        {streamBuffer && status === 'running' && (
+          <View style={[styles.turn, styles.turnAssistant]}>
+            <Text style={styles.turnText}>{streamBuffer}</Text>
+          </View>
+        )}
+        {status === 'running' && (
+          <View style={styles.spinnerRow}>
+            <ActivityIndicator size="small" color="#9ca3af" />
+            <Text style={styles.spinnerText}>working…</Text>
+          </View>
+        )}
+      </ScrollView>
+
+      <View style={styles.footer}>
+        <TextInput
+          style={styles.input}
+          value={followUp}
+          onChangeText={setFollowUp}
+          placeholder={status === 'running' ? 'wait for the agent…' : 'follow up…'}
+          placeholderTextColor="#666"
+          editable={status !== 'running' && !isResuming}
+          multiline
+        />
+        <View style={styles.actions}>
+          {onReload && (
+            <TouchableOpacity
+              style={[
+                styles.actionBtn,
+                styles.reloadBtn,
+                (isReloading || status === 'running') && styles.actionBtnDisabled,
+              ]}
+              onPress={handleReload}
+              disabled={isReloading || status === 'running'}
+            >
+              <Text style={styles.actionText}>
+                {isReloading ? 'reloading…' : '⟳ reload'}
+              </Text>
+            </TouchableOpacity>
+          )}
+          <TouchableOpacity
+            style={[
+              styles.actionBtn,
+              styles.sendBtn,
+              (isResuming || status === 'running' || !followUp.trim()) && styles.actionBtnDisabled,
+            ]}
+            onPress={handleSendFollowUp}
+            disabled={isResuming || status === 'running' || !followUp.trim()}
+          >
+            <Text style={styles.actionText}>
+              {isResuming ? '…' : '↑ send'}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: '#0a0a0a' },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingTop: 14,
+    paddingBottom: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: 'rgba(255,255,255,0.08)',
+  },
+  title: { color: '#fff', fontSize: 17, fontWeight: '600' },
+  close: { color: '#9ca3af', fontSize: 18 },
+  transcript: { flex: 1 },
+  transcriptContent: { padding: 12, paddingBottom: 24 },
+  turn: {
+    marginVertical: 4,
+    padding: 10,
+    borderRadius: 12,
+    maxWidth: '92%',
+  },
+  turnUser: {
+    backgroundColor: '#7582f5',
+    alignSelf: 'flex-end',
+  },
+  turnAssistant: {
+    backgroundColor: 'rgba(255,255,255,0.06)',
+    borderColor: 'rgba(255,255,255,0.10)',
+    borderWidth: 1,
+    alignSelf: 'flex-start',
+  },
+  turnStatus: {
+    backgroundColor: 'transparent',
+    alignSelf: 'flex-start',
+    paddingHorizontal: 4,
+  },
+  turnText: { color: '#f1f5f9', fontSize: 14, lineHeight: 20 },
+  spinnerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 8,
+    paddingHorizontal: 4,
+  },
+  spinnerText: { color: '#9ca3af', fontSize: 12, marginLeft: 8 },
+  footer: {
+    borderTopWidth: 1,
+    borderTopColor: 'rgba(255,255,255,0.08)',
+    padding: 10,
+  },
+  input: {
+    minHeight: 40,
+    maxHeight: 120,
+    color: '#f1f5f9',
+    fontSize: 14,
+    backgroundColor: 'rgba(255,255,255,0.04)',
+    borderRadius: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+  actions: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    marginTop: 8,
+  },
+  actionBtn: {
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderRadius: 10,
+    marginLeft: 8,
+  },
+  actionBtnDisabled: { opacity: 0.5 },
+  reloadBtn: { backgroundColor: 'rgba(255,255,255,0.08)' },
+  sendBtn: { backgroundColor: '#7582f5' },
+  actionText: { color: '#fff', fontSize: 13, fontWeight: '600' },
+});