feat(dashboard): mobile-aware detail drawer (hide replay, show device card)

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

Author: Ripwords

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

@@ -29,15 +29,22 @@ const fmtTime = (iso: string) => new Date(iso).toLocaleString()
           <span class="text-default truncate">{{ report.reporterEmail ?? "anonymous" }}</span>
         </div>
         <div class="flex gap-2">
-          <span class="text-muted w-24 flex-shrink-0">Page</span>
-          <a
-            :href="safeHref(report.pageUrl)"
-            target="_blank"
-            rel="noopener"
-            class="text-primary-600 dark:text-primary-400 hover:underline truncate"
-          >
-            {{ report.pageUrl }}
-          </a>
+          <span class="text-muted w-24 flex-shrink-0">{{
+            ctx?.source === "expo" ? "Route" : "Page"
+          }}</span>
+          <template v-if="ctx?.source === 'expo'">
+            <span class="text-default truncate">{{ report.pageUrl }}</span>
+          </template>
+          <template v-else>
+            <a
+              :href="safeHref(report.pageUrl)"
+              target="_blank"
+              rel="noopener"
+              class="text-primary-600 dark:text-primary-400 hover:underline truncate"
+            >
+              {{ report.pageUrl }}
+            </a>
+          </template>
         </div>
         <div class="flex gap-2">
           <span class="text-muted w-24 flex-shrink-0">Received</span>
@@ -52,16 +59,25 @@ const fmtTime = (iso: string) => new Date(iso).toLocaleString()
       </template>
       <dl class="text-sm space-y-3">
         <div class="flex items-center gap-3">
-          <dt class="text-muted w-24 flex-shrink-0">Website</dt>
+          <dt class="text-muted w-24 flex-shrink-0">
+            {{ ctx?.source === "expo" ? "Route" : "Website" }}
+          </dt>
           <dd class="min-w-0 flex-1">
-            <a
-              :href="safeHref(report.pageUrl)"
-              target="_blank"
-              rel="noopener"
-              class="text-primary-600 dark:text-primary-400 hover:underline truncate inline-block max-w-full align-bottom"
-            >
-              {{ report.pageUrl }}
-            </a>
+            <template v-if="ctx?.source === 'expo'">
+              <span class="text-default truncate inline-block max-w-full align-bottom">
+                {{ report.pageUrl }}
+              </span>
+            </template>
+            <template v-else>
+              <a
+                :href="safeHref(report.pageUrl)"
+                target="_blank"
+                rel="noopener"
+                class="text-primary-600 dark:text-primary-400 hover:underline truncate inline-block max-w-full align-bottom"
+              >
+                {{ report.pageUrl }}
+              </a>
+            </template>
           </dd>
         </div>
         <div class="flex items-center gap-3">
@@ -102,6 +118,32 @@ const fmtTime = (iso: string) => new Date(iso).toLocaleString()
       </dl>
     </UCard>
 
+    <UCard v-if="ctx?.source === 'expo' && sys">
+      <template #header>
+        <div class="text-sm font-medium text-default">Device</div>
+      </template>
+      <dl class="text-sm space-y-3">
+        <div class="flex items-center gap-3">
+          <dt class="text-muted w-24 flex-shrink-0">Platform</dt>
+          <dd class="min-w-0 flex-1 text-default">{{ sys.devicePlatform ?? "—" }}</dd>
+        </div>
+        <div class="flex items-center gap-3">
+          <dt class="text-muted w-24 flex-shrink-0">OS version</dt>
+          <dd class="min-w-0 flex-1 text-default">{{ sys.osVersion ?? "—" }}</dd>
+        </div>
+        <div class="flex items-center gap-3">
+          <dt class="text-muted w-24 flex-shrink-0">Device</dt>
+          <dd class="min-w-0 flex-1 text-default">{{ sys.deviceModel ?? "—" }}</dd>
+        </div>
+        <div class="flex items-center gap-3">
+          <dt class="text-muted w-24 flex-shrink-0">App</dt>
+          <dd class="min-w-0 flex-1 text-default">
+            {{ sys.appVersion ?? "—" }}<span v-if="sys.appBuild"> ({{ sys.appBuild }})</span>
+          </dd>
+        </div>
+      </dl>
+    </UCard>
+
     <UCard v-if="sys">
       <template #header>
         <div class="text-sm font-medium text-default">System info</div>

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

@@ -83,16 +83,23 @@ 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 tabs = computed(() => [
-  { id: "overview", label: "Overview" },
-  { id: "console", label: "Console", hasData: consoleHasData.value },
-  { id: "network", label: "Network", hasData: networkHasData.value },
-  { id: "replay", label: "Replay", hasData: report.value?.hasReplay ?? false },
-  { id: "activity", label: "Activity" },
-  { id: "cookies", label: "Cookies", hasData: cookiesHasData.value },
-  { id: "system", label: "System" },
-  { id: "raw", label: "Raw" },
-])
+const tabs = computed(() => {
+  const base: { id: string; label: string; hasData?: boolean }[] = [
+    { id: "overview", label: "Overview" },
+    { id: "console", label: "Console", hasData: consoleHasData.value },
+    { id: "network", label: "Network", hasData: networkHasData.value },
+  ]
+  if (report.value?.source !== "expo") {
+    base.push({ id: "replay", label: "Replay", hasData: report.value?.hasReplay ?? false })
+  }
+  base.push({ id: "activity", label: "Activity" })
+  if (report.value?.source !== "expo") {
+    base.push({ id: "cookies", label: "Cookies", hasData: cookiesHasData.value })
+  }
+  base.push({ id: "system", label: "System" })
+  base.push({ id: "raw", label: "Raw" })
+  return base
+})
 
 // After a triage mutation, re-fetch the report row and refresh the activity
 // feed so the timeline reflects the new event immediately.