diff --git a/packages/i18n/src/locales/en/settings.yaml b/packages/i18n/src/locales/en/settings.yaml
index d847c34ac..e82d7ce5d 100644
--- a/packages/i18n/src/locales/en/settings.yaml
+++ b/packages/i18n/src/locales/en/settings.yaml
@@ -68,6 +68,23 @@ dialogs:
       stateRequesting: Requesting...
       stateGranted: Granted
       stateNotGranted: Not granted
+  bug-report:
+    title: Bug report (´;ω;`)ヾ(･∀･`)
+    subtitle: Oops, sorry we made something wrong. Would you mind telling us what happened?
+    trigger-label: Report a Bug
+    submit-label: Send Bug Report
+    triage-description: Include screenshot and page context to help us triage this issue.
+    description-placeholder: Steps to reproduce, expected behavior, and actual behavior
+    include-current-page-screenshot: Include current page screenshot
+    manual-media:
+      label: Manually choose screenshots / recordings
+      optional: Optional.
+    media-files:
+      label: Media files
+      description: 'Optional: manually select.'
+      placeholder: Choose screenshot or video file
+      selected-count: '{count} file(s) selected'
+    last-submitted-preview: Last Submitted Payload Preview
 language:
   title: Language
   description: |
diff --git a/packages/i18n/src/locales/en/tamagotchi/stage.yaml b/packages/i18n/src/locales/en/tamagotchi/stage.yaml
index d14c7ccaa..a0a3894f1 100644
--- a/packages/i18n/src/locales/en/tamagotchi/stage.yaml
+++ b/packages/i18n/src/locales/en/tamagotchi/stage.yaml
@@ -45,3 +45,49 @@ notice:
     preparing: Preparing…
     read-more: Read more
     preview-title: What is it?
+
+about:
+  subtitle: Desktop ver.
+  current-version: Current Version
+  common:
+    cancel: Cancel
+  links:
+    title: Links
+    home: Home
+    documentation: Documentations
+    github: GitHub
+  update:
+    lane:
+      label: Update lane
+      description: Choose which release lane updater checks against. Auto follows the current app prerelease lane.
+      placeholder: Choose update lane
+    channels:
+      auto: Auto
+      stable: Stable
+      alpha: Alpha
+      beta: Beta
+      nightly: Nightly
+      canary: Canary
+    status:
+      downloading: Downloading update...
+      error-prefix: Error
+      latest: Up to date (v{version}).
+      downloaded:
+        windows: Update ready to install silently (v{version}).
+        restart: Update ready to install on restart (v{version}).
+    actions:
+      download: Download Update
+      download-short: Download
+      confirm-download: Confirm Download
+      check-for-updates: Check for updates
+      checking: Checking...
+      latest-version: Latest version
+      disabled-dev: Updates disabled in Dev
+      retry-check: Retry Check
+      restart-silent: Restart to update silently
+      restart-install: Restart to install update
+      confirm-restart: Confirm Restart
+    dialog:
+      title: Update Available
+      description: A new version (v{version}) is available.
+      no-release-notes-markdown: _No release notes provided._
diff --git a/packages/stage-ui/src/components/scenarios/dialogs/bug-report/bug-report-dialog.vue b/packages/stage-ui/src/components/scenarios/dialogs/bug-report/bug-report-dialog.vue
new file mode 100644
index 000000000..38915c72a
--- /dev/null
+++ b/packages/stage-ui/src/components/scenarios/dialogs/bug-report/bug-report-dialog.vue
@@ -0,0 +1,214 @@
+<script setup lang="ts">
+import type { BugReportPageContext } from './bug-report-payload'
+import type { BugReportDialogSubmitPayload } from './types'
+
+import { useResizeObserver, useScreenSafeArea } from '@vueuse/core'
+import { DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, VisuallyHidden } from 'reka-ui'
+import { DrawerContent, DrawerHandle, DrawerOverlay, DrawerPortal, DrawerRoot } from 'vaul-vue'
+import { computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import BugReportForm from './bug-report-form.vue'
+
+import { useBreakpoints } from '../../../../composables/use-breakpoints'
+import { buildBugReportPayload, createBugReportPageContext } from './bug-report-payload'
+
+const props = withDefaults(defineProps<{
+  sending?: boolean
+  submitError?: unknown
+  title?: string
+  subtitle?: string
+  submitLabel?: string
+  triageContextSummary?: string
+  pageContext?: BugReportPageContext | null
+  screenshotAttached?: boolean
+}>(), {
+  sending: false,
+  submitError: undefined,
+  triageContextSummary: '',
+  pageContext: null,
+  screenshotAttached: false,
+})
+
+const emit = defineEmits<{
+  (e: 'submit', payload: BugReportDialogSubmitPayload): void
+  (e: 'requestTriageContext'): void
+  (e: 'feedback'): void
+}>()
+
+const showDialog = defineModel<boolean>({ default: false, required: false })
+const description = defineModel<string>('description', { default: '' })
+const includeTriageContext = defineModel<boolean>('includeTriageContext', { default: false })
+const uploadMediaFromLibrary = defineModel<boolean>('uploadMediaFromLibrary', { default: false })
+const screenshotFiles = defineModel<File[] | undefined>('screenshotFiles', { default: undefined })
+
+const { t } = useI18n()
+const { isDesktop } = useBreakpoints()
+const screenSafeArea = useScreenSafeArea()
+
+useResizeObserver(document.documentElement, () => screenSafeArea.update())
+onMounted(() => screenSafeArea.update())
+
+const effectiveTriageSummary = computed(() => {
+  if (props.triageContextSummary)
+    return props.triageContextSummary
+
+  return t('settings.dialogs.bug-report.triage-description')
+})
+
+const resolvedTitle = computed(() => props.title || t('settings.dialogs.bug-report.title'))
+const resolvedSubtitle = computed(() => props.subtitle || t('settings.dialogs.bug-report.subtitle'))
+const resolvedSubmitLabel = computed(() => props.submitLabel || t('settings.dialogs.bug-report.submit-label'))
+
+function onSubmit() {
+  const trimmedDescription = description.value.trim()
+  if (!trimmedDescription)
+    return
+
+  const includeContext = includeTriageContext.value
+  const selectedScreenshotFiles = screenshotFiles.value ?? []
+  const context = includeContext
+    ? (props.pageContext ?? createBugReportPageContext())
+    : null
+  const screenshotAttached = includeContext && (props.screenshotAttached || selectedScreenshotFiles.length > 0)
+  const formattedReport = buildBugReportPayload({
+    description: trimmedDescription,
+    includeTriageContext: includeContext,
+    context,
+    screenshotAttached,
+  })
+
+  emit('submit', {
+    description: trimmedDescription,
+    includeTriageContext: includeContext,
+    context,
+    screenshotAttached,
+    screenshotFiles: selectedScreenshotFiles,
+    formattedReport,
+  })
+}
+
+function onRequestTriageContext() {
+  includeTriageContext.value = true
+  emit('requestTriageContext')
+}
+</script>
+
+<template>
+  <DialogRoot v-if="isDesktop" :open="showDialog" @update:open="value => showDialog = value">
+    <DialogPortal>
+      <DialogOverlay
+        :class="[
+          'fixed inset-0 z-[9999] bg-black/50 backdrop-blur-sm',
+          'data-[state=closed]:animate-fadeOut data-[state=open]:animate-fadeIn',
+        ]"
+      />
+      <DialogContent
+        :class="[
+          'fixed left-1/2 top-1/2 z-[9999] max-h-full max-w-2xl w-[92dvw] transform',
+          'flex flex-col overflow-hidden rounded-2xl bg-white p-6 shadow-xl outline-none',
+          'backdrop-blur-md -translate-x-1/2 -translate-y-1/2',
+          'data-[state=closed]:animate-contentHide data-[state=open]:animate-contentShow',
+          'dark:bg-neutral-900',
+        ]"
+      >
+        <div
+          :class="[
+            'mb-4 flex flex-col gap-1',
+          ]"
+        >
+          <DialogTitle
+            :class="[
+              'text-lg font-semibold text-neutral-900 dark:text-neutral-100',
+            ]"
+          >
+            {{ resolvedTitle }}
+          </DialogTitle>
+          <DialogDescription
+            :class="[
+              'text-sm text-neutral-600 dark:text-neutral-300',
+            ]"
+          >
+            {{ resolvedSubtitle }}
+          </DialogDescription>
+        </div>
+
+        <BugReportForm
+          v-model:description="description"
+          v-model:include-triage-context="includeTriageContext"
+          v-model:upload-media-from-library="uploadMediaFromLibrary"
+          v-model:screenshot-files="screenshotFiles"
+          :sending="sending"
+          :submit-error="submitError"
+          :submit-label="resolvedSubmitLabel"
+          :triage-context-summary="effectiveTriageSummary"
+          @submit="onSubmit"
+          @request-triage-context="onRequestTriageContext"
+          @feedback="emit('feedback')"
+        />
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+
+  <DrawerRoot v-else :open="showDialog" should-scale-background @update:open="value => showDialog = value">
+    <DrawerPortal>
+      <DrawerOverlay
+        :class="[
+          'fixed inset-0 z-1000 bg-black/35 backdrop-blur-sm',
+        ]"
+      />
+      <DrawerContent
+        :class="[
+          'fixed bottom-0 left-0 right-0 z-1000 mt-20 h-full max-h-[90%]',
+          'flex flex-col rounded-t-[32px] bg-neutral-50/95 px-4 pt-4 outline-none',
+          'backdrop-blur-md dark:bg-neutral-900/95',
+        ]"
+        :style="{ paddingBottom: `${Math.max(Number.parseFloat(screenSafeArea.bottom.value.replace('px', '')), 24)}px` }"
+      >
+        <VisuallyHidden>
+          <DialogTitle>{{ resolvedTitle }}</DialogTitle>
+        </VisuallyHidden>
+        <DrawerHandle
+          :class="[
+            '[div&]:bg-neutral-400 [div&]:dark:bg-neutral-600',
+          ]"
+        />
+
+        <div
+          :class="[
+            'mb-4 mt-2 flex flex-col gap-1',
+          ]"
+        >
+          <div
+            :class="[
+              'text-lg font-semibold text-neutral-900 dark:text-neutral-100',
+            ]"
+          >
+            {{ resolvedTitle }}
+          </div>
+          <div
+            :class="[
+              'text-sm text-neutral-600 dark:text-neutral-300',
+            ]"
+          >
+            {{ resolvedSubtitle }}
+          </div>
+        </div>
+
+        <BugReportForm
+          v-model:description="description"
+          v-model:include-triage-context="includeTriageContext"
+          v-model:upload-media-from-library="uploadMediaFromLibrary"
+          v-model:screenshot-files="screenshotFiles"
+          :sending="sending"
+          :submit-error="submitError"
+          :submit-label="resolvedSubmitLabel"
+          :triage-context-summary="effectiveTriageSummary"
+          @submit="onSubmit"
+          @request-triage-context="onRequestTriageContext"
+          @feedback="emit('feedback')"
+        />
+      </DrawerContent>
+    </DrawerPortal>
+  </DrawerRoot>
+</template>
diff --git a/packages/stage-ui/src/components/scenarios/dialogs/bug-report/bug-report-form.vue b/packages/stage-ui/src/components/scenarios/dialogs/bug-report/bug-report-form.vue
new file mode 100644
index 000000000..0cefdb1d8
--- /dev/null
+++ b/packages/stage-ui/src/components/scenarios/dialogs/bug-report/bug-report-form.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { Button, ContainerError, FieldCheckbox, FieldInputFile, Textarea } from '@proj-airi/ui'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = withDefaults(defineProps<{
+  sending?: boolean
+  submitError?: unknown
+  submitLabel?: string
+  triageContextSummary?: string
+}>(), {
+  sending: false,
+  submitError: undefined,
+  triageContextSummary: '',
+})
+
+const emit = defineEmits<{
+  (e: 'submit'): void
+  (e: 'requestTriageContext'): void
+  (e: 'feedback'): void
+}>()
+
+const description = defineModel<string>('description', { default: '' })
+const includeTriageContext = defineModel<boolean>('includeTriageContext', { default: false })
+const uploadMediaFromLibrary = defineModel<boolean>('uploadMediaFromLibrary', { default: false })
+const screenshotFiles = defineModel<File[] | undefined>('screenshotFiles', { default: undefined })
+
+const { t } = useI18n()
+const canSubmit = computed(() => description.value.trim().length > 0 && !props.sending)
+const triageDescription = computed(() => props.triageContextSummary || t('settings.dialogs.bug-report.triage-description'))
+const resolvedSubmitLabel = computed(() => props.submitLabel || t('settings.dialogs.bug-report.submit-label'))
+const selectedScreenshotCount = computed(() => screenshotFiles.value?.length ?? 0)
+
+function onIncludeTriageContextChange(next: boolean) {
+  if (next) {
+    emit('requestTriageContext')
+    return
+  }
+
+  uploadMediaFromLibrary.value = false
+  screenshotFiles.value = undefined
+}
+
+function onUploadMediaFromLibraryChange(next: boolean) {
+  if (!next)
+    screenshotFiles.value = undefined
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      'min-h-0 min-w-0 w-full flex flex-1 flex-col gap-4',
+    ]"
+  >
+    <Textarea
+      v-model="description"
+      :class="[
+        'min-h-44 text-sm',
+      ]"
+      :placeholder="t('settings.dialogs.bug-report.description-placeholder')"
+    />
+
+    <FieldCheckbox
+      v-model="includeTriageContext"
+      :label="t('settings.dialogs.bug-report.include-current-page-screenshot')"
+      :description="triageDescription"
+      @update:model-value="onIncludeTriageContextChange"
+    />
+
+    <div
+      v-if="includeTriageContext"
+      :class="[
+        'flex flex-col gap-2',
+      ]"
+    >
+      <FieldCheckbox
+        v-model="uploadMediaFromLibrary"
+        :label="t('settings.dialogs.bug-report.manual-media.label')"
+        :description="t('settings.dialogs.bug-report.manual-media.optional')"
+        @update:model-value="onUploadMediaFromLibraryChange"
+      />
+
+      <FieldInputFile
+        v-if="uploadMediaFromLibrary"
+        v-model="screenshotFiles"
+        :label="t('settings.dialogs.bug-report.media-files.label')"
+        :description="t('settings.dialogs.bug-report.media-files.description')"
+        accept="image/*,video/*"
+        multiple
+        :placeholder="t('settings.dialogs.bug-report.media-files.placeholder')"
+      />
+
+      <div
+        v-if="uploadMediaFromLibrary && selectedScreenshotCount > 0"
+        :class="[
+          'text-xs text-neutral-500 dark:text-neutral-400',
+        ]"
+      >
+        {{ t('settings.dialogs.bug-report.media-files.selected-count', { count: selectedScreenshotCount }) }}
+      </div>
+    </div>
+
+    <div
+      :class="[
+        'min-h-0 flex-1',
+      ]"
+    />
+
+    <ContainerError
+      v-if="submitError"
+      :error="submitError"
+      height-preset="sm"
+      @feedback="emit('feedback')"
+    />
+
+    <Button
+      :loading="sending"
+      :disabled="!canSubmit"
+      size="lg"
+      block
+      :class="[
+        'min-h-14 text-base font-semibold',
+      ]"
+      @click="emit('submit')"
+    >
+      {{ resolvedSubmitLabel }}
+    </Button>
+  </div>
+</template>
diff --git a/packages/stage-ui/src/components/scenarios/dialogs/bug-report/bug-report-payload.test.ts b/packages/stage-ui/src/components/scenarios/dialogs/bug-report/bug-report-payload.test.ts
new file mode 100644
index 000000000..c13f4ba6f
--- /dev/null
+++ b/packages/stage-ui/src/components/scenarios/dialogs/bug-report/bug-report-payload.test.ts
@@ -0,0 +1,68 @@
+import { describe, expect, it } from 'vitest'
+
+import { buildBugReportPayload, createBugReportPageContext } from './bug-report-payload'
+
+describe('bug report payload helpers', () => {
+  it('builds markdown payload with description and optional context/screenshot flags', () => {
+    const payload = buildBugReportPayload({
+      description: 'Clicking send does nothing',
+      includeTriageContext: true,
+      context: {
+        url: 'https://airi.local/chat?room=debug',
+        title: 'AIRI Chat',
+        userAgent: 'test-agent',
+        viewport: '1440x900',
+        language: 'en-US',
+        timeZone: 'Asia/Shanghai',
+        timestamp: '2026-04-09T11:22:33.000Z',
+      },
+      screenshotAttached: true,
+    })
+
+    expect(payload).toContain('## Bug Report')
+    expect(payload).toContain('Clicking send does nothing')
+    expect(payload).toContain('## Triage Context')
+    expect(payload).toContain('- URL: https://airi.local/chat?room=debug')
+    expect(payload).toContain('- Screenshot attached: yes')
+  })
+
+  it('returns null page context when window is unavailable', () => {
+    const context = createBugReportPageContext(undefined)
+    expect(context).toBeNull()
+  })
+
+  it('extracts page context from a window-like object', () => {
+    const context = createBugReportPageContext({
+      location: {
+        href: 'https://airi.local/settings?tab=providers',
+      },
+      document: {
+        title: 'Settings',
+      },
+      navigator: {
+        userAgent: 'unit-test',
+        language: 'en-US',
+      },
+      innerWidth: 1280,
+      innerHeight: 720,
+      Intl: {
+        DateTimeFormat: () => ({
+          resolvedOptions: () => ({ timeZone: 'UTC' }),
+        }),
+      },
+      Date: {
+        now: () => 1_700_000_000_000,
+      },
+    })
+
+    expect(context).toEqual({
+      url: 'https://airi.local/settings?tab=providers',
+      title: 'Settings',
+      userAgent: 'unit-test',
+      viewport: '1280x720',
+      language: 'en-US',
+      timeZone: 'UTC',
+      timestamp: '2023-11-14T22:13:20.000Z',
+    })
+  })
+})
diff --git a/packages/stage-ui/src/components/scenarios/dialogs/bug-report/bug-report-payload.ts b/packages/stage-ui/src/components/scenarios/dialogs/bug-report/bug-report-payload.ts
new file mode 100644
index 000000000..65cba2a7c
--- /dev/null
+++ b/packages/stage-ui/src/components/scenarios/dialogs/bug-report/bug-report-payload.ts
@@ -0,0 +1,91 @@
+export interface BugReportPageContext {
+  url: string
+  title: string
+  userAgent: string
+  viewport: string
+  language: string
+  timeZone: string
+  timestamp: string
+}
+
+export interface BuildBugReportPayloadOptions {
+  description: string
+  includeTriageContext?: boolean
+  context?: BugReportPageContext | null
+  screenshotAttached?: boolean
+}
+
+interface WindowLike {
+  location?: {
+    href?: string
+  }
+  document?: {
+    title?: string
+  }
+  navigator?: {
+    userAgent?: string
+    language?: string
+  }
+  innerWidth?: number
+  innerHeight?: number
+  Intl?: {
+    DateTimeFormat?: () => {
+      resolvedOptions?: () => {
+        timeZone?: string
+      }
+    }
+  }
+  Date?: {
+    now?: () => number
+  }
+}
+
+export function createBugReportPageContext(win: WindowLike | undefined = globalThis.window): BugReportPageContext | null {
+  if (!win)
+    return null
+
+  const now = win.Date?.now?.() ?? Date.now()
+  const timeZone = win.Intl?.DateTimeFormat?.()?.resolvedOptions?.()?.timeZone ?? 'unknown'
+
+  return {
+    url: win.location?.href ?? 'unknown',
+    title: win.document?.title ?? '',
+    userAgent: win.navigator?.userAgent ?? 'unknown',
+    viewport: `${win.innerWidth ?? 0}x${win.innerHeight ?? 0}`,
+    language: win.navigator?.language ?? 'unknown',
+    timeZone,
+    timestamp: new Date(now).toISOString(),
+  }
+}
+
+export function buildBugReportPayload(options: BuildBugReportPayloadOptions): string {
+  const sections: string[] = [
+    '## Bug Report',
+    '',
+    options.description.trim() || '_No description provided._',
+  ]
+
+  if (!options.includeTriageContext)
+    return sections.join('\n')
+
+  sections.push('', '## Triage Context')
+
+  if (options.context) {
+    sections.push(
+      `- URL: ${options.context.url}`,
+      `- Title: ${options.context.title || 'unknown'}`,
+      `- Viewport: ${options.context.viewport}`,
+      `- User Agent: ${options.context.userAgent}`,
+      `- Language: ${options.context.language}`,
+      `- Time Zone: ${options.context.timeZone}`,
+      `- Captured At: ${options.context.timestamp}`,
+    )
+  }
+  else {
+    sections.push('- Page context unavailable')
+  }
+
+  sections.push(`- Screenshot attached: ${options.screenshotAttached ? 'yes' : 'no'}`)
+
+  return sections.join('\n')
+}
diff --git a/packages/stage-ui/src/components/scenarios/dialogs/bug-report/bug-report-trigger.vue b/packages/stage-ui/src/components/scenarios/dialogs/bug-report/bug-report-trigger.vue
new file mode 100644
index 000000000..c45ae224f
--- /dev/null
+++ b/packages/stage-ui/src/components/scenarios/dialogs/bug-report/bug-report-trigger.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import type { BugReportDialogSubmitPayload } from './types'
+
+import { Button } from '@proj-airi/ui'
+import { computed, shallowRef } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import BugReportDialog from './bug-report-dialog.vue'
+
+import { createBugReportPageContext } from './bug-report-payload'
+
+const props = defineProps<{
+  triggerLabel?: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'submit', payload: BugReportDialogSubmitPayload): void
+}>()
+
+const { t } = useI18n()
+const showDialog = shallowRef(false)
+const description = shallowRef('')
+const includeTriageContext = shallowRef(false)
+const uploadMediaFromLibrary = shallowRef(false)
+const sending = shallowRef(false)
+const submitError = shallowRef<unknown>(undefined)
+const pageContext = shallowRef(createBugReportPageContext())
+const screenshotAttached = shallowRef(false)
+const screenshotFiles = shallowRef<File[] | undefined>(undefined)
+const submittedReport = shallowRef('')
+const resolvedTriggerLabel = computed(() => props.triggerLabel || t('settings.dialogs.bug-report.trigger-label'))
+
+function onRequestTriageContext() {
+  includeTriageContext.value = true
+  screenshotAttached.value = true
+  pageContext.value = createBugReportPageContext()
+}
+
+function onSubmit(payload: BugReportDialogSubmitPayload) {
+  sending.value = true
+  submitError.value = undefined
+  submittedReport.value = payload.formattedReport
+  emit('submit', payload)
+
+  globalThis.setTimeout(() => {
+    sending.value = false
+    showDialog.value = false
+  }, 250)
+}
+</script>
+
+<template>
+  <div
+    :class="[
+      'flex flex-col gap-3',
+    ]"
+  >
+    <Button
+      variant="danger"
+      :class="[
+        'w-fit',
+      ]"
+      @click="showDialog = true"
+    >
+      <span
+        :class="[
+          'flex items-center gap-2',
+        ]"
+      >
+        <span
+          :class="[
+            'i-solar:danger-circle-outline h-4 w-4',
+          ]"
+        />
+        {{ resolvedTriggerLabel }}
+      </span>
+    </Button>
+
+    <div
+      v-if="submittedReport"
+      :class="[
+        'rounded-lg border border-neutral-200/80 bg-neutral-50/80 p-3 text-xs',
+        'text-neutral-600 leading-relaxed dark:border-neutral-700/60 dark:bg-neutral-900/50 dark:text-neutral-300',
+      ]"
+    >
+      <div
+        :class="[
+          'mb-2 text-xs font-semibold text-neutral-800 dark:text-neutral-200',
+        ]"
+      >
+        {{ t('settings.dialogs.bug-report.last-submitted-preview') }}
+      </div>
+      <pre
+        :class="[
+          'max-h-40 overflow-auto whitespace-pre-wrap break-words',
+        ]"
+      >{{ submittedReport }}</pre>
+    </div>
+
+    <BugReportDialog
+      v-model="showDialog"
+      v-model:description="description"
+      v-model:include-triage-context="includeTriageContext"
+      v-model:upload-media-from-library="uploadMediaFromLibrary"
+      v-model:screenshot-files="screenshotFiles"
+      :sending="sending"
+      :submit-error="submitError"
+      :page-context="pageContext"
+      :screenshot-attached="screenshotAttached"
+      @request-triage-context="onRequestTriageContext"
+      @submit="onSubmit"
+    />
+  </div>
+</template>
diff --git a/packages/stage-ui/src/components/scenarios/dialogs/bug-report/bug-report.story.vue b/packages/stage-ui/src/components/scenarios/dialogs/bug-report/bug-report.story.vue
new file mode 100644
index 000000000..90b626f7a
--- /dev/null
+++ b/packages/stage-ui/src/components/scenarios/dialogs/bug-report/bug-report.story.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import BugReportTrigger from './bug-report-trigger.vue'
+</script>
+
+<template>
+  <Story
+    title="Dialogs / Bug Report"
+    group="dialogs"
+  >
+    <Variant
+      id="default-trigger"
+      title="Default Trigger"
+    >
+      <div
+        :class="[
+          'mx-auto max-w-xl p-4',
+        ]"
+      >
+        <BugReportTrigger />
+      </div>
+    </Variant>
+
+    <Variant
+      id="chat-themed-trigger"
+      title="Chat Themed Trigger"
+    >
+      <div
+        :class="[
+          'mx-auto max-w-2xl rounded-2xl border border-neutral-200/70 bg-white/60 p-4',
+          'dark:border-neutral-700/70 dark:bg-neutral-900/70',
+        ]"
+      >
+        <div
+          :class="[
+            'mb-3 text-sm text-neutral-600 dark:text-neutral-300',
+          ]"
+        >
+          Use this to test reporting from a chat-like screen.
+        </div>
+        <BugReportTrigger trigger-label="Report Chat Bug" />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/packages/stage-ui/src/components/scenarios/dialogs/bug-report/index.ts b/packages/stage-ui/src/components/scenarios/dialogs/bug-report/index.ts
new file mode 100644
index 000000000..4d0265eb0
--- /dev/null
+++ b/packages/stage-ui/src/components/scenarios/dialogs/bug-report/index.ts
@@ -0,0 +1,4 @@
+export { default as BugReportDialog } from './bug-report-dialog.vue'
+export * from './bug-report-payload'
+export { default as BugReportTrigger } from './bug-report-trigger.vue'
+export * from './types'
diff --git a/packages/stage-ui/src/components/scenarios/dialogs/bug-report/types.ts b/packages/stage-ui/src/components/scenarios/dialogs/bug-report/types.ts
new file mode 100644
index 000000000..1e79e8d57
--- /dev/null
+++ b/packages/stage-ui/src/components/scenarios/dialogs/bug-report/types.ts
@@ -0,0 +1,10 @@
+import type { BugReportPageContext } from './bug-report-payload'
+
+export interface BugReportDialogSubmitPayload {
+  description: string
+  includeTriageContext: boolean
+  context: BugReportPageContext | null
+  screenshotAttached: boolean
+  screenshotFiles: File[]
+  formattedReport: string
+}
diff --git a/packages/stage-ui/src/components/scenarios/dialogs/index.ts b/packages/stage-ui/src/components/scenarios/dialogs/index.ts
index 365073882..67129f020 100644
--- a/packages/stage-ui/src/components/scenarios/dialogs/index.ts
+++ b/packages/stage-ui/src/components/scenarios/dialogs/index.ts
@@ -2,5 +2,6 @@ export * from './about'
 export { default as AboutDialogWithContent } from './about.vue'
 export * from './audio-input'
 export * from './background-picker'
+export * from './bug-report'
 export * from './onboarding'
 export * from './validation-details'