feat(dashboard): expose user-file attachments tab in report drawer

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: Ripwords

apps/dashboard/app/components/report-drawer/overview-tab.vue

@@ -1,12 +1,18 @@
 <!-- apps/dashboard/app/components/report-drawer/overview-tab.vue -->
 <script setup lang="ts">
-import type { ReportSummaryDTO } from "@reprojs/shared"
+import type { ReportDetailDTO } from "@reprojs/shared"
 import { safeHref } from "~/composables/use-safe-href"
 import { parseBrowser, parseOs } from "~/composables/use-user-agent"
 import { useMarkdown } from "~/composables/use-markdown"
 
-const props = defineProps<{ projectId: string; report: ReportSummaryDTO }>()
-const emit = defineEmits<{ "select-tab": [tab: "console" | "network" | "replay"] }>()
+const props = defineProps<{ projectId: string; report: ReportDetailDTO }>()
+const emit = defineEmits<{
+  "select-tab": [tab: "console" | "network" | "replay" | "attachments"]
+}>()
+
+const userFileCount = computed(
+  () => (props.report.attachments ?? []).filter((a) => a.kind === "user-file").length,
+)
 
 const ctx = computed(() => props.report.context)
 const sys = computed(() => ctx.value?.systemInfo)
@@ -39,6 +45,18 @@ const descriptionHtml = computed(() =>
       </div>
     </UCard>
 
+    <!-- User-uploaded file chip. Only visible when the reporter attached extra
+         files. Clicking navigates to the Attachments tab. -->
+    <button
+      v-if="userFileCount > 0"
+      type="button"
+      class="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary hover:bg-primary/20 transition-colors"
+      @click="emit('select-tab', 'attachments')"
+    >
+      <UIcon name="i-heroicons-paper-clip" class="size-3.5" />
+      {{ userFileCount }} additional {{ userFileCount === 1 ? "file" : "files" }}
+    </button>
+
     <!-- Reporter-authored description. Sits above the metadata so the user
          sees the "what" before the "where/when". Hidden entirely when the
          SDK caller submitted an empty description (common for widget-only

apps/dashboard/app/pages/projects/[id]/reports/[reportId].vue

@@ -12,6 +12,7 @@ import type { LogsAttachment, ReportDetailDTO } from "@reprojs/shared"
 import AppErrorState from "~/components/common/app-error-state.vue"
 import AppLoadingSkeleton from "~/components/common/app-loading-skeleton.vue"
 import ActivityTab from "~/components/report-drawer/activity-tab.vue"
+import AttachmentsTab from "~/components/report-drawer/attachments-tab.vue"
 import CommentsTab from "~/components/report-drawer/comments-tab.vue"
 import ConsoleTab from "~/components/report-drawer/console-tab.vue"
 import CookiesTab from "~/components/report-drawer/cookies-tab.vue"
@@ -57,6 +58,7 @@ type TabId =
   | "activity"
   | "comments"
   | "cookies"
+  | "attachments"
   | "system"
   | "raw"
 const activeTab = ref<TabId>("overview")
@@ -84,6 +86,9 @@ const consoleHasData = computed(
 )
 const networkHasData = computed(() => logs.value !== null && logs.value.network.length > 0)
 const cookiesHasData = computed(() => (report.value?.context?.cookies?.length ?? 0) > 0)
+const userFileCount = computed(
+  () => (report.value?.attachments ?? []).filter((a) => a.kind === "user-file").length,
+)
 
 const tabs = computed(() => {
   const base: { id: string; label: string; hasData?: boolean }[] = [
@@ -99,6 +104,9 @@ const tabs = computed(() => {
   if (report.value?.source !== "expo") {
     base.push({ id: "cookies", label: "Cookies", hasData: cookiesHasData.value })
   }
+  if (userFileCount.value > 0) {
+    base.push({ id: "attachments", label: "Attachments", hasData: true })
+  }
   base.push({ id: "system", label: "System" })
   base.push({ id: "raw", label: "Raw" })
   return base
@@ -256,6 +264,10 @@ onUnmounted(() => window.removeEventListener("keydown", onKey))
           :report-id="report.id"
         />
         <CookiesTab v-else-if="activeTab === 'cookies'" :project-id="projectId" :report="report" />
+        <AttachmentsTab
+          v-else-if="activeTab === 'attachments'"
+          :attachments="report.attachments ?? []"
+        />
         <div v-else-if="activeTab === 'system'" class="p-5">
           <UCard :ui="{ body: 'p-4' }">
             <pre class="text-sm font-mono whitespace-pre-wrap break-all">{{