feat: widget 3-mode launcher, media gallery, screen recording & share links

.env.example

@@ -139,7 +139,15 @@ DB_IDLE_TX_TIMEOUT_MS=10000
 INTAKE_RATE_PER_KEY=60
 INTAKE_RATE_PER_IP=20
 INTAKE_RATE_PER_KEY_ANON=10
-INTAKE_MAX_BYTES=5242880
+# Whole-request ceiling — keep above the per-file/total attachment caps below
+# (10 MB file + 25 MB total) plus the gallery media caps (100 MB video) or
+# attachments the widget accepts will 413. (Was 41943040 / 40 MB before
+# gallery media support raised the ceiling to fit one max-size video.)
+# The intake handlers reject an oversized declared Content-Length before
+# buffering the body, but Content-Length can be absent or lie on chunked
+# bodies — put a reverse-proxy body-size cap (e.g. nginx client_max_body_size)
+# in front of the app to bound streamed/chunked requests too.
+INTAKE_MAX_BYTES=157286400
 INTAKE_REQUIRE_DWELL=true
 INTAKE_MIN_DWELL_MS=1500
 
@@ -148,6 +156,12 @@ INTAKE_USER_FILE_MAX_BYTES=10485760
 INTAKE_USER_FILES_TOTAL_MAX_BYTES=26214400
 INTAKE_USER_FILES_MAX_COUNT=5
 
+# Gallery media caps (media[N] + mediaMeta parts: screenshots + trimmed
+# recordings from the SDK's capture flow)
+INTAKE_MEDIA_MAX_COUNT=3
+INTAKE_MEDIA_IMAGE_MAX_BYTES=10485760
+INTAKE_MEDIA_VIDEO_MAX_BYTES=104857600
+
 # Virus scan via the bundled clamav sidecar. Off by default — flip to true
 # AFTER `docker compose up -d` and the clamav service has finished pulling
 # its signature DB (~500MB, watch with `docker compose logs -f clamav`

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

@@ -1,15 +1,23 @@
 <!-- apps/dashboard/app/components/report-drawer/attachments-tab.vue -->
 <script setup lang="ts">
 import type { AttachmentDTO } from "@reprojs/shared"
+import TrimVideo from "~/components/report-drawer/trim-video.vue"
 
 const props = defineProps<{
   attachments: AttachmentDTO[]
 }>()
 
+// The tab covers two attachment kinds: "user-file" (generic uploads, shown
+// as Images/Files below) and "media" (widget gallery screenshots + trimmed
+// recordings, shown in their own Media section further down).
 const userFiles = computed(() => props.attachments.filter((a) => a.kind === "user-file"))
 const images = computed(() => userFiles.value.filter((a) => a.contentType.startsWith("image/")))
 const others = computed(() => userFiles.value.filter((a) => !a.contentType.startsWith("image/")))
 
+const media = computed(() => props.attachments.filter((a) => a.kind === "media"))
+const mediaImages = computed(() => media.value.filter((a) => a.contentType.startsWith("image/")))
+const mediaVideos = computed(() => media.value.filter((a) => a.contentType.startsWith("video/")))
+
 function formatBytes(n: number): string {
   if (n < 1024) return `${n} B`
   if (n < 1024 * 1024) return `${(n / 1024).toFixed(0)} KB`
@@ -66,10 +74,59 @@ function scanBadge(file: AttachmentDTO): ScanBadge {
 
 <template>
   <div class="space-y-6 p-4">
-    <p v-if="userFiles.length === 0" class="text-sm text-muted italic">
+    <p v-if="userFiles.length === 0 && media.length === 0" class="text-sm text-muted italic">
       No additional attachments on this report.
     </p>
 
+    <section v-if="mediaImages.length > 0 || mediaVideos.length > 0" class="space-y-3">
+      <h3 class="text-xs font-semibold uppercase tracking-wide text-muted">
+        Media ({{ media.length }})
+      </h3>
+      <div v-if="mediaImages.length > 0" class="grid grid-cols-3 gap-3">
+        <div v-for="img in mediaImages" :key="img.id" class="space-y-1.5">
+          <a
+            :href="img.url"
+            target="_blank"
+            rel="noopener"
+            class="block aspect-square overflow-hidden rounded-md border border-default bg-elevated/40"
+            :title="img.filename ?? ''"
+          >
+            <img
+              :src="img.url"
+              :alt="img.filename ?? 'attachment'"
+              class="h-full w-full object-cover"
+              @error="($event.target as HTMLImageElement).style.display = 'none'"
+            />
+          </a>
+          <div
+            class="flex items-center gap-1 text-[11px]"
+            :class="scanBadge(img).tone === 'success' ? 'text-success' : 'text-muted'"
+            :title="scanBadge(img).detail"
+          >
+            <UIcon
+              :name="
+                scanBadge(img).status === 'clean'
+                  ? 'i-heroicons-shield-check'
+                  : 'i-heroicons-shield-exclamation'
+              "
+              class="size-3 shrink-0"
+            />
+            <span class="truncate">{{ scanBadge(img).label }}</span>
+          </div>
+        </div>
+      </div>
+      <div v-if="mediaVideos.length > 0" class="space-y-4">
+        <TrimVideo
+          v-for="vid in mediaVideos"
+          :key="vid.id"
+          :src="vid.url"
+          :trim-start-ms="vid.trimStartMs"
+          :trim-end-ms="vid.trimEndMs"
+          :download-name="vid.filename ?? 'recording'"
+        />
+      </div>
+    </section>
+
     <section v-if="images.length > 0" class="space-y-3">
       <h3 class="text-xs font-semibold uppercase tracking-wide text-muted">
         Images ({{ images.length }})

apps/dashboard/app/components/report-drawer/trim-video.vue

@@ -0,0 +1,60 @@
+<!-- apps/dashboard/app/components/report-drawer/trim-video.vue -->
+<script setup lang="ts">
+import { clampPlayback } from "~/utils/clamp-playback"
+
+const props = defineProps<{
+  src: string
+  trimStartMs: number | null
+  trimEndMs: number | null
+  downloadName?: string
+}>()
+
+const video = ref<HTMLVideoElement | null>(null)
+
+// Same adapter shape as app/pages/s/[token].vue — clampPlayback is the pure,
+// loop-proof helper; this handler only translates its verdict into DOM
+// mutations. Do not reimplement the clamp math inline here.
+function clampToTrim() {
+  const v = video.value
+  if (!v) return
+  const action = clampPlayback({
+    currentTime: v.currentTime,
+    duration: v.duration,
+    trimStartMs: props.trimStartMs,
+    trimEndMs: props.trimEndMs,
+  })
+  if (action.type === "seek") {
+    v.currentTime = action.to
+  } else if (action.type === "pause-and-reset") {
+    v.pause()
+    v.currentTime = action.to
+  }
+}
+</script>
+
+<template>
+  <div>
+    <video
+      ref="video"
+      controls
+      preload="metadata"
+      :src="src"
+      class="w-full rounded-lg"
+      @loadedmetadata="clampToTrim"
+      @timeupdate="clampToTrim"
+    />
+    <div class="mt-1 flex items-center justify-between text-xs text-muted">
+      <span v-if="trimStartMs != null || trimEndMs != null"
+        >Trimmed view · full file via download</span
+      >
+      <span v-else />
+      <a
+        :href="src"
+        :download="downloadName ?? 'recording'"
+        class="font-medium text-primary-600 dark:text-primary-400 hover:underline"
+      >
+        Download full recording
+      </a>
+    </div>
+  </div>
+</template>

apps/dashboard/app/middleware/auth.global.ts

@@ -1,5 +1,5 @@
 export default defineNuxtRouteMiddleware(async (to) => {
-  const publicPaths = ["/auth/sign-in"]
+  const publicPaths = ["/auth/sign-in", "/s/"]
   if (publicPaths.some((p) => to.path.startsWith(p))) return
 
   // useRequestFetch() forwards the incoming request's cookie during SSR.

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

@@ -87,7 +87,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,
+  () =>
+    (report.value?.attachments ?? []).filter((a) => a.kind === "user-file" || a.kind === "media")
+      .length,
 )
 
 const tabs = computed(() => {