yaver-feedback-react-native 0.9.6 → 0.9.8

package/src/DogfoodSessionUi.tsx

@@ -0,0 +1,213 @@
+import React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import type {
+  DogfoodFailure,
+  DogfoodLane,
+  DogfoodLaneOption,
+  DogfoodLogLine,
+  DogfoodPhase,
+} from './DogfoodRuntime';
+
+export type DogfoodStatusTone = 'ready' | 'attention' | 'blocked' | 'pending';
+
+export interface DogfoodStatusStep {
+  key: string;
+  label: string;
+  detail: string;
+  tone: DogfoodStatusTone;
+  actionLabel?: string;
+  actionDisabled?: boolean;
+  expanded?: boolean;
+  onAction?: () => void;
+}
+
+export interface DogfoodUiColors {
+  background: string;
+  border: string;
+  text: string;
+  muted: string;
+  accent: string;
+  accentSoft: string;
+  ready: string;
+  attention: string;
+  blocked: string;
+  console: string;
+}
+
+const DEFAULT_COLORS: DogfoodUiColors = {
+  background: '#111827',
+  border: '#334155',
+  text: '#f8fafc',
+  muted: '#94a3b8',
+  accent: '#818cf8',
+  accentSoft: '#312e81',
+  ready: '#22c55e',
+  attention: '#f59e0b',
+  blocked: '#ef4444',
+  console: '#070b12',
+};
+
+function resolvedColors(colors?: Partial<DogfoodUiColors>): DogfoodUiColors {
+  return { ...DEFAULT_COLORS, ...colors };
+}
+
+function toneColor(tone: DogfoodStatusTone, colors: DogfoodUiColors): string {
+  if (tone === 'ready') return colors.ready;
+  if (tone === 'blocked') return colors.blocked;
+  if (tone === 'attention') return colors.attention;
+  return colors.muted;
+}
+
+/** Shared readiness rail used by Yaver itself and every embedded SDK host. */
+export const DogfoodStatusRail: React.FC<{
+  steps: readonly DogfoodStatusStep[];
+  colors?: Partial<DogfoodUiColors>;
+}> = ({ steps, colors: colorOverrides }) => {
+  const colors = resolvedColors(colorOverrides);
+  return (
+    <View style={styles.rail} accessibilityLabel="Dogfood session readiness">
+      {steps.map((step) => {
+        const tone = toneColor(step.tone, colors);
+        return (
+          <View key={step.key} style={styles.statusRow}>
+            <View style={[styles.statusDot, { backgroundColor: tone }]} />
+            <View style={styles.statusCopy}>
+              <Text style={[styles.statusLabel, { color: colors.text }]}>{step.label}</Text>
+              <Text style={[styles.statusDetail, { color: tone }]}>{step.detail}</Text>
+            </View>
+            {step.actionLabel && step.onAction ? (
+              <Pressable
+                accessibilityRole="button"
+                accessibilityLabel={`${step.actionLabel} ${step.label}`}
+                accessibilityState={{ expanded: step.expanded, disabled: step.actionDisabled }}
+                disabled={step.actionDisabled}
+                onPress={step.onAction}
+                style={({ pressed }) => [
+                  styles.statusAction,
+                  { borderColor: colors.border, opacity: step.actionDisabled ? 0.5 : pressed ? 0.7 : 1 },
+                ]}
+              >
+                <Text style={[styles.statusActionText, { color: colors.accent }]}>{step.actionLabel}</Text>
+              </Pressable>
+            ) : null}
+          </View>
+        );
+      })}
+    </View>
+  );
+};
+
+/** One lane selector and one default policy across Yaver, SFMG, and Talos. */
+export const DogfoodLanePicker: React.FC<{
+  options: readonly DogfoodLaneOption[];
+  selected: DogfoodLane;
+  onSelect: (lane: DogfoodLane) => void;
+  colors?: Partial<DogfoodUiColors>;
+  showUnsupportedReasons?: boolean;
+}> = ({ options, selected, onSelect, colors: colorOverrides, showUnsupportedReasons = true }) => {
+  const colors = resolvedColors(colorOverrides);
+  return (
+    <View accessibilityRole="radiogroup" accessibilityLabel="Dogfood runtime lane">
+      <View style={styles.choiceRow}>
+        {options.map((option) => {
+          const active = selected === option.lane;
+          return (
+            <Pressable
+              key={option.lane}
+              disabled={!option.supported}
+              onPress={() => onSelect(option.lane)}
+              accessibilityRole="radio"
+              accessibilityState={{ checked: active, disabled: !option.supported }}
+              style={({ pressed }) => [
+                styles.choice,
+                {
+                  borderColor: active ? colors.accent : colors.border,
+                  backgroundColor: active ? colors.accentSoft : colors.background,
+                  opacity: !option.supported ? 0.45 : pressed ? 0.72 : 1,
+                },
+              ]}
+            >
+              <Text style={[styles.choiceText, { color: colors.text }, active && styles.choiceTextActive]}>
+                {option.label}{option.default ? ' · default' : ''}
+              </Text>
+            </Pressable>
+          );
+        })}
+      </View>
+      {showUnsupportedReasons ? options.filter((option) => !option.supported && option.reason).map((option) => (
+        <Text key={`${option.lane}-reason`} style={[styles.reason, { color: colors.muted }]}>
+          {option.label}: {option.reason}
+        </Text>
+      )) : null}
+    </View>
+  );
+};
+
+function runtimeTone(phase: DogfoodPhase, colors: DogfoodUiColors): string {
+  if (phase === 'ready') return colors.ready;
+  if (phase === 'failed') return colors.blocked;
+  if (phase === 'idle' || phase === 'stopped') return colors.muted;
+  return colors.attention;
+}
+
+/** Shared second-stage live console. Browser lane deliberately names Browser
+ * Logs; Hermes/WebRTC use the same lifecycle and failure/remedy treatment. */
+export const DogfoodLiveConsole: React.FC<{
+  lane: DogfoodLane;
+  phase: DogfoodPhase;
+  message: string;
+  logs: readonly DogfoodLogLine[];
+  failure?: DogfoodFailure;
+  maxLines?: number;
+  colors?: Partial<DogfoodUiColors>;
+  renderText?: (text: string) => React.ReactNode;
+}> = ({ lane, phase, message, logs, failure, maxLines = 80, colors: colorOverrides, renderText }) => {
+  const colors = resolvedColors(colorOverrides);
+  const text = logs.slice(-maxLines).map((line) => line.text).join('\n');
+  const title = lane === 'browser' ? 'Browser Logs' : lane === 'hermes' ? 'Hermes Logs' : 'WebRTC Logs';
+  return (
+    <View style={[styles.console, { backgroundColor: colors.console, borderColor: colors.border }]} accessibilityLabel={title}>
+      <View style={styles.consoleHeader}>
+        <View style={[styles.statusDot, { backgroundColor: runtimeTone(phase, colors) }]} />
+        <Text style={[styles.consoleTitle, { color: colors.text }]}>{title}</Text>
+      </View>
+      <Text style={[styles.consoleStatus, { color: colors.muted }]}>{message}</Text>
+      {text ? (
+        renderText ? renderText(text) : <Text selectable style={[styles.consoleText, { color: colors.text }]}>{text}</Text>
+      ) : (
+        <Text style={[styles.consoleEmpty, { color: colors.muted }]}>Waiting for the first line from the remote PC…</Text>
+      )}
+      {failure ? (
+        <View style={[styles.failure, { borderColor: colors.blocked }]}>
+          <Text style={[styles.failureText, { color: colors.text }]}>{failure.error}</Text>
+          <Text style={[styles.failureRemedy, { color: colors.muted }]}>{failure.remedy}</Text>
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  rail: { gap: 4 },
+  statusRow: { minHeight: 46, flexDirection: 'row', alignItems: 'center', gap: 9 },
+  statusDot: { width: 8, height: 8, borderRadius: 4 },
+  statusCopy: { flex: 1 },
+  statusLabel: { fontSize: 12, fontWeight: '700' },
+  statusDetail: { fontSize: 11, lineHeight: 16, marginTop: 1 },
+  statusAction: { borderWidth: 1, borderRadius: 8, paddingHorizontal: 10, paddingVertical: 7 },
+  statusActionText: { fontSize: 11, fontWeight: '700' },
+  choiceRow: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
+  choice: { borderWidth: 1, borderRadius: 8, paddingHorizontal: 11, paddingVertical: 8 },
+  choiceText: { fontSize: 12, fontWeight: '500' },
+  choiceTextActive: { fontWeight: '700' },
+  reason: { fontSize: 10, lineHeight: 14, marginTop: 5 },
+  console: { width: '100%', maxHeight: 320, overflow: 'hidden', marginTop: 10, borderWidth: 1, borderRadius: 10, padding: 11, gap: 7 },
+  consoleHeader: { flexDirection: 'row', alignItems: 'center', gap: 7 },
+  consoleTitle: { fontSize: 12, fontWeight: '800' },
+  consoleStatus: { fontSize: 11, lineHeight: 16 },
+  consoleText: { fontFamily: 'monospace', fontSize: 10, lineHeight: 15 },
+  consoleEmpty: { fontSize: 10, fontStyle: 'italic' },
+  failure: { borderWidth: 1, borderRadius: 8, padding: 9, gap: 4 },
+  failureText: { fontSize: 11, fontWeight: '700' },
+  failureRemedy: { fontSize: 10, lineHeight: 15 },
+});

package/src/FeedbackModal.tsx

@@ -38,6 +38,7 @@ import { AuthOverlay } from './AuthOverlay';
 import { QuickActionIcon } from './QuickActionIcon';
 import { YaverModeBadge } from './YaverModeBadge';
 import { VibeChatScreen } from './VibeChatScreen';
+import { DogfoodQuickControls } from './DogfoodQuickControls';
 import { DeployPanel } from './DeployPanel';
 import { listReachableDevices, RemoteDevice } from './auth';
 import { reloadActions } from './reloadActions';
@@ -60,6 +61,7 @@ import {
   type DogfoodSnapshot,
 } from './DogfoodRuntime';
 import { createP2PDogfoodDriver } from './P2PDogfoodDriver';
+import { DogfoodLanePicker, DogfoodLiveConsole, DogfoodStatusRail } from './DogfoodSessionUi';
 
 /**
  * Simplified feedback modal — launch scope is 3 actions:
@@ -1149,7 +1151,45 @@ export const FeedbackModal: React.FC = () => {
     && (selectedDogfoodRunner.ready || selectedDogfoodRunner.authConfigured);
   const dogfoodModelReady = !selectedDogfoodRunner?.models?.length
     || !!preferredModel && selectedDogfoodRunner.models.some((model) => model.id === preferredModel);
-  const dogfoodStartBlocked = !dogfoodProject || !dogfoodRunnerReady || !dogfoodModelReady;
+  const dogfoodLaneChoices = dogfoodLaneOptions(
+    dogfoodProject?.framework || YaverFeedback.getDogfoodOnboarding()?.framework || 'expo',
+    { nativeRuntimeAvailable: dogfoodNativeAvailable },
+  );
+  const dogfoodLaneReady = dogfoodLaneChoices.some((option) => option.lane === dogfoodLane && option.supported);
+  const dogfoodReadinessSteps = [
+    {
+      key: 'oauth', label: 'Yaver OAuth',
+      detail: YaverFeedback.isAuthed() ? 'Signed in · session saved' : 'Sign in required',
+      tone: YaverFeedback.isAuthed() ? 'ready' as const : 'attention' as const,
+    },
+    {
+      key: 'machine', label: 'Remote PC',
+      detail: machineCard.device ? machineCard.title : 'Choose a reachable development machine',
+      tone: machineCard.device && machineCard.status === 'live' ? 'ready' as const : 'attention' as const,
+    },
+    {
+      key: 'installation', label: 'This installation',
+      detail: dogfoodEnrollment?.status === 'active' ? 'Device key approved' : dogfoodEnrollment?.status || 'Checking device key',
+      tone: dogfoodEnrollment?.status === 'active' ? 'ready' as const
+        : dogfoodEnrollment?.status === 'failed' ? 'blocked' as const : 'pending' as const,
+    },
+    {
+      key: 'runner', label: 'Runner',
+      detail: dogfoodRunnerReady ? selectedDogfoodRunner?.name || preferredRunner || 'Ready' : 'Choose or configure a coding runner',
+      tone: dogfoodRunnerReady ? 'ready' as const : 'attention' as const,
+    },
+    {
+      key: 'model', label: 'Model',
+      detail: dogfoodModelReady ? preferredModel || 'Runner default' : 'Choose a model',
+      tone: dogfoodModelReady ? 'ready' as const : 'attention' as const,
+    },
+    {
+      key: 'lane', label: 'Runtime lane',
+      detail: dogfoodLaneChoices.find((option) => option.lane === dogfoodLane)?.label || dogfoodLane,
+      tone: dogfoodLaneReady ? 'ready' as const : 'blocked' as const,
+    },
+  ];
+  const dogfoodStartBlocked = !dogfoodProject || !dogfoodRunnerReady || !dogfoodModelReady || !dogfoodLaneReady;
 
   // Once the user fires off a vibe task, swap the entire modal body
   // for the live chat screen. The chat manages its own SSE
@@ -1160,6 +1200,7 @@ export const FeedbackModal: React.FC = () => {
     return (
       <>
         <AuthOverlay />
+        <DogfoodQuickControls />
         <QuickActionIcon />
         <YaverModeBadgeGate />
         <Modal
@@ -1201,6 +1242,7 @@ export const FeedbackModal: React.FC = () => {
   return (
     <>
       <AuthOverlay />
+      <DogfoodQuickControls />
       <QuickActionIcon />
       <YaverModeBadgeGate />
       {visible && (
@@ -1289,6 +1331,7 @@ export const FeedbackModal: React.FC = () => {
                   <Text style={styles.dogfoodWizardHint}>
                     OAuth ✓ · machine {machineCard.device ? '✓' : 'required'} · installation {dogfoodEnrollment?.status || 'checking'}
                   </Text>
+                  <DogfoodStatusRail steps={dogfoodReadinessSteps} />
                   {dogfoodEnrollment?.installationId ? (
                     <Text selectable style={styles.dogfoodInstallationId}>
                       This device · {dogfoodEnrollment.installationId}
@@ -1372,30 +1415,15 @@ export const FeedbackModal: React.FC = () => {
                         </>
                       ) : null}
                       <Text style={styles.dogfoodStepLabel}>Runtime lane</Text>
-                      <View style={styles.dogfoodChoiceRow}>
-                        {dogfoodLaneOptions(
-                          dogfoodProject?.framework || YaverFeedback.getDogfoodOnboarding()?.framework || 'expo',
-                          { nativeRuntimeAvailable: dogfoodNativeAvailable },
-                        ).map((option) => (
-                          <Pressable
-                            key={option.lane}
-                            onPress={() => {
-                              if (!option.supported) return;
-                              setDogfoodLane(option.lane);
-                              const appId = YaverFeedback.getDogfoodOnboarding()?.appId;
-                              if (appId) void setPreferredDogfoodLane(appId, option.lane);
-                            }}
-                            style={[
-                              styles.dogfoodChoice,
-                              dogfoodLane === option.lane && styles.dogfoodChoiceSelected,
-                              !option.supported && styles.actionBtnDisabled,
-                            ]}
-                            accessibilityState={{ disabled: !option.supported, selected: dogfoodLane === option.lane }}
-                          >
-                            <Text style={[styles.dogfoodChoiceText, dogfoodLane === option.lane && styles.dogfoodChoiceTextSelected]}>{option.label}</Text>
-                          </Pressable>
-                        ))}
-                      </View>
+                      <DogfoodLanePicker
+                        options={dogfoodLaneChoices}
+                        selected={dogfoodLane}
+                        onSelect={(lane) => {
+                          setDogfoodLane(lane);
+                          const appId = YaverFeedback.getDogfoodOnboarding()?.appId;
+                          if (appId) void setPreferredDogfoodLane(appId, lane);
+                        }}
+                      />
                       <Text style={styles.dogfoodWizardHint}>
                         {[preferredRunner || 'Choose a coding agent', preferredModel].filter(Boolean).join(' · ')}
                       </Text>
@@ -1407,20 +1435,20 @@ export const FeedbackModal: React.FC = () => {
                         busy={!!dogfoodRuntime && !['idle', 'ready', 'failed', 'stopped'].includes(dogfoodRuntime.phase)}
                       />
                       {dogfoodRuntime ? (
-                        <View style={styles.dogfoodConsole}>
-                          <Text style={styles.dogfoodConsoleStatus}>{dogfoodRuntime.message}</Text>
-                          {dogfoodRuntime.logs.slice(-80).map((line, index) => (
-                            <Text key={`${line.at}-${index}`} selectable style={styles.dogfoodConsoleLine}>{line.text}</Text>
-                          ))}
-                          {dogfoodRuntime.failure ? (
-                            <Text style={styles.dogfoodConsoleError}>{dogfoodRuntime.failure.error}{'\n'}{dogfoodRuntime.failure.remedy}</Text>
-                          ) : null}
+                        <>
+                          <DogfoodLiveConsole
+                            lane={dogfoodRuntime.project.lane}
+                            phase={dogfoodRuntime.phase}
+                            message={dogfoodRuntime.message}
+                            logs={dogfoodRuntime.logs}
+                            failure={dogfoodRuntime.failure}
+                          />
                           {dogfoodRuntime.result?.url ? (
                             <Pressable onPress={() => void Linking.openURL(dogfoodRuntime.result!.url!)} style={styles.dogfoodOpenPreview}>
                               <Text style={styles.dogfoodOpenPreviewText}>Open dogfooded app</Text>
                             </Pressable>
                           ) : null}
-                        </View>
+                        </>
                       ) : null}
                     </>
                   )}