fix(image-gen): hide the placeholder glyph once the live preview renders

Device 2026-07-16: during 'Refining Image' the real preview thumbnail is shown, but the placeholder
<Icon name="image"> stayed in the header and overlapped/duplicated the image. Gate it on !imagePreviewPath
so it only shows in the pre-preview 'Generating Image' phase. Rendered test asserts the placeholder
tracks imagePreviewPath; red-verified by removing the gate.

Author: alichherawalla

__tests__/rntl/screens/ImageProgressIndicatorPlaceholder.test.tsx

@@ -0,0 +1,40 @@
+/**
+ * ImageProgressIndicator — the placeholder image glyph must disappear once the live preview renders.
+ *
+ * Device 2026-07-16: during "Refining Image" the real preview thumbnail is shown, but the placeholder
+ * <Icon name="image"> stayed in the header and overlapped/duplicated the image. It's only meaningful in
+ * the pre-preview "Generating Image" phase. Presentational component (styles/colors injected), so this
+ * renders it directly with both states and asserts the placeholder's presence tracks imagePreviewPath.
+ */
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ImageProgressIndicator } from '../../../src/screens/ChatScreen/ChatScreenComponents';
+
+// The component reads styles/colors purely for presentation; return benign values for any key.
+const styles = new Proxy({}, { get: () => ({}) }) as never;
+const colors = new Proxy({}, { get: () => '#000000' }) as never;
+
+const renderIndicator = (imagePreviewPath: string | null) =>
+  render(
+    <ImageProgressIndicator
+      styles={styles}
+      colors={colors}
+      imagePreviewPath={imagePreviewPath}
+      imageGenerationStatus="Refining"
+      imageGenerationProgress={{ step: 7, totalSteps: 8 }}
+      onStop={() => {}}
+    />,
+  );
+
+describe('ImageProgressIndicator placeholder glyph', () => {
+  it('shows the placeholder image glyph BEFORE a preview exists (Generating Image)', () => {
+    const { queryByTestId } = renderIndicator(null);
+    expect(queryByTestId('image-progress-placeholder-icon')).not.toBeNull();
+  });
+
+  it('HIDES the placeholder glyph once the live preview is showing (Refining Image)', () => {
+    // The real thumbnail is up — the placeholder would just overlap it.
+    const { queryByTestId } = renderIndicator('file:///tmp/preview.png');
+    expect(queryByTestId('image-progress-placeholder-icon')).toBeNull();
+  });
+});

src/screens/ChatScreen/ChatScreenComponents.tsx

@@ -197,9 +197,14 @@ export const ImageProgressIndicator: React.FC<{
         )}
         <View style={styles.imageProgressContent}>
           <View style={styles.imageProgressHeader}>
-            <View style={styles.imageProgressIconContainer}>
-              <Icon name="image" size={18} color={colors.primary} />
-            </View>
+            {/* The placeholder image glyph is only meaningful BEFORE the live preview renders.
+                Once the preview thumbnail is up (Refining Image), drop it — it just overlapped
+                the real image (device 2026-07-16). */}
+            {!imagePreviewPath && (
+              <View style={styles.imageProgressIconContainer} testID="image-progress-placeholder-icon">
+                <Icon name="image" size={18} color={colors.primary} />
+              </View>
+            )}
             <View style={styles.imageProgressInfo}>
               <Text style={styles.imageProgressTitle}>
                 {imagePreviewPath ? 'Refining Image' : 'Generating Image'}