yaver-feedback-react-native 0.9.9 → 0.9.11

package/src/DogfoodSessionUi.tsx

@@ -101,10 +101,11 @@ export const DogfoodStatusRail: React.FC<{
 export const DogfoodLanePicker: React.FC<{
   options: readonly DogfoodLaneOption[];
   selected: DogfoodLane;
+  fallbackLane?: DogfoodLane;
   onSelect: (lane: DogfoodLane) => void;
   colors?: Partial<DogfoodUiColors>;
   showUnsupportedReasons?: boolean;
-}> = ({ options, selected, onSelect, colors: colorOverrides, showUnsupportedReasons = true }) => {
+}> = ({ options, selected, fallbackLane, onSelect, colors: colorOverrides, showUnsupportedReasons = true }) => {
   const colors = resolvedColors(colorOverrides);
   return (
     <View accessibilityRole="radiogroup" accessibilityLabel="Dogfood runtime lane">
@@ -128,7 +129,8 @@ export const DogfoodLanePicker: React.FC<{
               ]}
             >
               <Text style={[styles.choiceText, { color: colors.text }, active && styles.choiceTextActive]}>
-                {option.label}{option.default ? ' · default' : ''}
+                {option.label}
+                {active ? ' · preferred' : fallbackLane === option.lane ? ' · automatic fallback' : option.default ? ' · default' : ''}
               </Text>
             </Pressable>
           );
@@ -154,6 +156,7 @@ function runtimeTone(phase: DogfoodPhase, colors: DogfoodUiColors): string {
  * Logs; Hermes/WebRTC use the same lifecycle and failure/remedy treatment. */
 export const DogfoodLiveConsole: React.FC<{
   lane: DogfoodLane;
+  sourceLabel?: string;
   phase: DogfoodPhase;
   message: string;
   logs: readonly DogfoodLogLine[];
@@ -161,16 +164,18 @@ export const DogfoodLiveConsole: React.FC<{
   maxLines?: number;
   colors?: Partial<DogfoodUiColors>;
   renderText?: (text: string) => React.ReactNode;
-}> = ({ lane, phase, message, logs, failure, maxLines = 80, colors: colorOverrides, renderText }) => {
+}> = ({ lane, sourceLabel, 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';
+  const accessibleTitle = sourceLabel ? `${title} · ${sourceLabel}` : title;
   return (
-    <View style={[styles.console, { backgroundColor: colors.console, borderColor: colors.border }]} accessibilityLabel={title}>
+    <View style={[styles.console, { backgroundColor: colors.console, borderColor: colors.border }]} accessibilityLabel={accessibleTitle}>
       <View style={styles.consoleHeader}>
         <View style={[styles.statusDot, { backgroundColor: runtimeTone(phase, colors) }]} />
         <Text style={[styles.consoleTitle, { color: colors.text }]}>{title}</Text>
       </View>
+      {sourceLabel ? <Text style={[styles.consoleSource, { color: colors.muted }]}>Source · {sourceLabel}</Text> : null}
       <Text style={[styles.consoleStatus, { color: colors.muted }]}>{message}</Text>
       {text ? (
         renderText ? renderText(text) : <Text selectable style={[styles.consoleText, { color: colors.text }]}>{text}</Text>
@@ -204,6 +209,7 @@ const styles = StyleSheet.create({
   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' },
+  consoleSource: { fontSize: 10, lineHeight: 14 },
   consoleStatus: { fontSize: 11, lineHeight: 16 },
   consoleText: { fontFamily: 'monospace', fontSize: 10, lineHeight: 15 },
   consoleEmpty: { fontSize: 10, fontStyle: 'italic' },