Strip metadata in the ExifTool worker during upload preview.

Cache stripped blobs, show original vs stripped metadata tabs, and keep user-facing errors on fixed store messages with console logging for diagnostics.

frontend/src/components/upload/MetadataInspector.vue

@@ -5,18 +5,55 @@
             <p v-if="fileName" class="mt-0.5 truncate text-xs text-muted-foreground">{{ fileName }}</p>
         </header>
 
-        <div class="flex flex-1 flex-col p-4">
+        <div class="flex flex-1 flex-col gap-3 p-4">
             <p v-if="!fileName" class="text-sm text-muted-foreground">Select an image to view its metadata.</p>
 
             <p v-else-if="entry.status === 'error'" class="text-sm text-destructive">
                 {{ entry.message }}
             </p>
 
-            <pre
-                v-else-if="entry.status === 'ready'"
-                class="max-h-96 flex-1 overflow-auto rounded-md bg-muted p-3 text-xs leading-relaxed whitespace-pre-wrap text-foreground"
-                >{{ entry.output }}</pre
-            >
+            <template v-else-if="entry.status === 'ready'">
+                <div
+                    class="inline-flex w-fit rounded-md border border-border p-0.5"
+                    role="tablist"
+                    aria-label="Metadata view"
+                >
+                    <button
+                        type="button"
+                        role="tab"
+                        class="rounded px-3 py-1.5 text-xs font-medium transition-colors"
+                        :class="
+                            activeTab === 'original'
+                                ? 'bg-muted text-foreground'
+                                : 'text-muted-foreground hover:text-foreground'
+                        "
+                        :aria-selected="activeTab === 'original'"
+                        @click="activeTab = 'original'"
+                    >
+                        Original
+                    </button>
+                    <button
+                        type="button"
+                        role="tab"
+                        class="rounded px-3 py-1.5 text-xs font-medium transition-colors"
+                        :class="
+                            activeTab === 'stripped'
+                                ? 'bg-muted text-foreground'
+                                : 'text-muted-foreground hover:text-foreground'
+                        "
+                        :aria-selected="activeTab === 'stripped'"
+                        @click="activeTab = 'stripped'"
+                    >
+                        Stripped
+                    </button>
+                </div>
+
+                <pre
+                    role="tabpanel"
+                    class="max-h-96 min-h-32 flex-1 overflow-auto rounded-md bg-muted p-3 text-xs leading-relaxed whitespace-pre-wrap text-foreground"
+                    >{{ activeTab === 'original' ? entry.output : entry.afterStripOutput }}</pre
+                >
+            </template>
 
             <p v-else class="text-sm text-muted-foreground">{{ entry.message }}</p>
         </div>
@@ -24,17 +61,27 @@
 </template>
 
 <script setup lang="ts">
-import type { PropType } from 'vue';
+import { ref, watch, type PropType } from 'vue';
 import type { MetadataPreviewEntry } from '@/types/metadata/MetadataPreview';
+import type { MetadataTab } from '@/types/metadata/MetadataTab';
 
-defineProps({
+const props = defineProps({
     fileName: {
         type: String as PropType<string | null>,
-        required: true
+        default: null
     },
     entry: {
         type: Object as PropType<MetadataPreviewEntry>,
         required: true
     }
 });
+
+const activeTab = ref<MetadataTab>('original');
+
+watch(
+    () => props.fileName,
+    () => {
+        activeTab.value = 'original';
+    }
+);
 </script>