frontend/src/components/upload/MetadataInspector.vue

@@ -8,18 +8,16 @@
         <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>
 
-            <template v-else-if="entry.status === 'error'">
+            <template v-else-if="entry.status === 'error' && !entry.output">
                 <p class="text-sm text-destructive">{{ entry.message }}</p>
-                <p v-if="entry.output" class="text-xs font-medium text-foreground">Original</p>
-                <MetadataOutputPanel v-if="entry.output">{{ entry.output }}</MetadataOutputPanel>
             </template>
 
-            <template v-else-if="entry.status === 'ready'">
+            <template v-else-if="showMetadataTabs">
                 <InlineTabList v-model="activeTab" :options="metadataTabOptions" />
 
-                <MetadataOutputPanel>
+                <MetadataOutputPanel v-if="tabBody?.kind === 'output'">{{ tabBody.text }}</MetadataOutputPanel>
-                    {{ activeTab === 'original' ? entry.output : entry.afterStripOutput }}
+
-                </MetadataOutputPanel>
+                <p v-else-if="tabBody?.kind === 'error'" class="text-sm text-destructive">{{ tabBody.text }}</p>
             </template>
 
             <p v-else class="text-sm text-muted-foreground">{{ entry.message }}</p>
@@ -28,8 +26,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, type PropType } from 'vue';
+import { computed, ref, watch, type PropType } from 'vue';
 import type { MetadataPreviewEntry } from '@/types/metadata/MetadataPreview';
+import type { MetadataTabBody } from '@/types/metadata/MetadataTabBody';
 import type { MetadataTab } from '@/types/metadata/MetadataTab';
 import type { InlineTabOption } from '@/types/ui/InlineTabOption';
 
@@ -51,6 +50,40 @@ const props = defineProps({
 
 const activeTab = ref<MetadataTab>('original');
 
+const showMetadataTabs = computed(
+    () => props.entry.status === 'ready' || (props.entry.status === 'error' && Boolean(props.entry.output))
+);
+
+const tabBody = computed((): MetadataTabBody | null => {
+    const entry = props.entry;
+
+    if (!showMetadataTabs.value) {
+        return null;
+    }
+
+    if (activeTab.value === 'original') {
+        if (entry.status === 'ready') {
+            return { kind: 'output', text: entry.output };
+        }
+
+        if (entry.status === 'error' && entry.output) {
+            return { kind: 'output', text: entry.output };
+        }
+
+        return null;
+    }
+
+    if (entry.status === 'ready') {
+        return { kind: 'output', text: entry.afterStripOutput };
+    }
+
+    if (entry.status === 'error') {
+        return { kind: 'error', text: entry.message };
+    }
+
+    return null;
+});
+
 watch(
     () => props.fileName,
     () => {

frontend/src/types/metadata/MetadataTabBody.ts

@@ -0,0 +1 @@
+export type MetadataTabBody = { kind: 'output'; text: string } | { kind: 'error'; text: string };