diff --git a/apps/studio/ui/src/app/App.vue b/apps/studio/ui/src/app/App.vue
index 69cc2ba..ba619d4 100644
--- a/apps/studio/ui/src/app/App.vue
+++ b/apps/studio/ui/src/app/App.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { computed, onUnmounted, watch } from 'vue'
+import { computed, defineAsyncComponent, onErrorCaptured, onUnmounted, watch } from 'vue'
 import { RouterView, useRoute, useRouter } from 'vue-router'
 import { LockKeyhole, RefreshCw, TriangleAlert } from '@lucide/vue'
 
 import { Button, Spinner } from '@/design'
+import { useCapturedErrors } from '@/features/debug/captured-errors'
 import DialogHost from '@/features/dialogs/DialogHost.vue'
 import { useDialog } from '@/features/dialogs/use-dialog'
 import ToastHost from '@/features/toasts/ToastHost.vue'
@@ -27,6 +28,14 @@ const bootStore = useBootStore()
 const navigationStore = useNavigationStore()
 const dialog = useDialog()
 const toast = useToast()
+const DebugBar = import.meta.env.DEV
+  ? defineAsyncComponent(() => import('@/features/debug/DebugBar.vue'))
+  : null
+
+if (import.meta.env.DEV) {
+  const { capture } = useCapturedErrors()
+  onErrorCaptured(capture)
+}
 
 setAPIDialogHandler((request) => {
   void dialog.open(request)
@@ -180,6 +189,7 @@ function humanizeEntity(value: string): string {
   </Shell>
   <DialogHost />
   <ToastHost />
+  <DebugBar v-if="DebugBar && usesShell" />
 </template>
 
 <style scoped>
diff --git a/apps/studio/ui/src/features/debug/DebugBar.vue b/apps/studio/ui/src/features/debug/DebugBar.vue
new file mode 100644
index 0000000..4e19db0
--- /dev/null
+++ b/apps/studio/ui/src/features/debug/DebugBar.vue
@@ -0,0 +1,474 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { PopoverContent, PopoverRoot, PopoverTrigger } from 'reka-ui'
+import { AlertTriangle, ChevronDown, ChevronUp, Copy, X } from '@lucide/vue'
+
+import { routeParam } from '@/router/routes'
+import { useAuthStore } from '@/stores/auth.store'
+import { useBootStore } from '@/stores/boot.store'
+import { useCapturedErrors } from './captured-errors'
+import { useToast } from '@/features/toasts/use-toast'
+
+const authStore = useAuthStore()
+const bootStore = useBootStore()
+const route = useRoute()
+const { errors: capturedErrors, clear: clearErrors } = useCapturedErrors()
+
+const toast = useToast()
+const open = ref(false)
+const errorExpanded = ref<number | null>(null)
+
+const hasErrors = computed(() => capturedErrors.value.length > 0)
+
+const routeName = computed(() => String(route.name ?? '—'))
+const routePath = computed(() => route.fullPath || route.path || '/')
+const entity = computed(() => {
+  const value = route.params.entity
+  if (typeof value !== 'string' && !Array.isArray(value)) return ''
+  return routeParam(value)
+})
+const recordName = computed(() => {
+  const value = route.params.recordName
+  if (typeof value !== 'string' && !Array.isArray(value)) return ''
+  return routeParam(value)
+})
+const userEmail = computed(() => authStore.currentUser?.email ?? 'signed out')
+const userRole = computed(() => {
+  const user = authStore.currentUser
+  if (!user) return '—'
+  return user.administrator ? 'administrator' : 'user'
+})
+const bootLabel = computed(() => bootStore.status || 'idle')
+
+function toggleErrorExpanded(id: number) {
+  errorExpanded.value = errorExpanded.value === id ? null : id
+}
+
+function buildDebugBundle(): string {
+  return JSON.stringify({
+    timestamp: new Date().toISOString(),
+    route: { name: routeName.value, path: routePath.value },
+    entity: entity.value || null,
+    record: recordName.value || null,
+    user: { email: userEmail.value, role: userRole.value },
+    boot: bootLabel.value,
+    errors: capturedErrors.value.map((e) => ({
+      message: e.message,
+      timestamp: e.timestamp,
+      stack: e.stack ?? null,
+    })),
+  }, null, 2)
+}
+
+async function copyBundle() {
+  if (typeof navigator === 'undefined' || !navigator.clipboard?.writeText) {
+    toast.error('Clipboard is unavailable.')
+    return
+  }
+
+  try {
+    await navigator.clipboard.writeText(buildDebugBundle())
+    toast.success('Debug bundle copied.')
+  } catch {
+    toast.error('Could not copy debug bundle.')
+  }
+}
+</script>
+
+<template>
+  <div
+    class="studio-debug-indicator"
+    :data-state="open ? 'open' : 'closed'"
+    :data-has-errors="hasErrors ? 'true' : 'false'"
+  >
+    <PopoverRoot v-model:open="open">
+      <PopoverContent class="studio-debug-indicator__panel" side="top" align="start" :side-offset="10" aria-label="Studio debug">
+        <!-- Header -->
+        <div class="studio-debug-indicator__header">
+          <span class="studio-debug-indicator__title">Studio</span>
+          <button
+            class="studio-debug-indicator__icon-btn"
+            type="button"
+            aria-label="Close"
+            @click="open = false"
+          >
+            <X :size="13" :stroke-width="2" aria-hidden="true" />
+          </button>
+        </div>
+
+        <!-- Errors section -->
+        <div v-if="hasErrors" class="studio-debug-indicator__errors">
+          <div class="studio-debug-indicator__errors-header">
+            <AlertTriangle :size="12" :stroke-width="2" aria-hidden="true" />
+            <span>{{ capturedErrors.length }} error{{ capturedErrors.length === 1 ? '' : 's' }} captured</span>
+            <button class="studio-debug-indicator__clear" type="button" @click="clearErrors">
+              Clear
+            </button>
+          </div>
+          <div
+            v-for="err in capturedErrors"
+            :key="err.id"
+            class="studio-debug-indicator__error"
+          >
+            <button
+              class="studio-debug-indicator__error-toggle"
+              type="button"
+              :aria-expanded="errorExpanded === err.id"
+              @click="toggleErrorExpanded(err.id)"
+            >
+              <ChevronDown v-if="errorExpanded !== err.id" :size="11" :stroke-width="2.5" aria-hidden="true" />
+              <ChevronUp v-else :size="11" :stroke-width="2.5" aria-hidden="true" />
+              <span class="studio-debug-indicator__error-msg">{{ err.message }}</span>
+            </button>
+            <pre v-if="errorExpanded === err.id && err.stack" class="studio-debug-indicator__stack">{{ err.stack }}</pre>
+          </div>
+        </div>
+
+        <!-- Info rows -->
+        <dl class="studio-debug-indicator__list">
+          <div class="studio-debug-indicator__row">
+            <dt>Route</dt>
+            <dd>
+              <span class="studio-debug-indicator__mono">{{ routeName }}</span>
+              <span class="studio-debug-indicator__path">{{ routePath }}</span>
+            </dd>
+          </div>
+          <div v-if="entity" class="studio-debug-indicator__row">
+            <dt>Entity</dt>
+            <dd class="studio-debug-indicator__mono">{{ entity }}</dd>
+          </div>
+          <div v-if="recordName" class="studio-debug-indicator__row">
+            <dt>Record</dt>
+            <dd class="studio-debug-indicator__mono">{{ recordName }}</dd>
+          </div>
+          <div class="studio-debug-indicator__row">
+            <dt>User</dt>
+            <dd>
+              <span class="studio-debug-indicator__mono">{{ userEmail }}</span>
+              <span class="studio-debug-indicator__path">{{ userRole }}</span>
+            </dd>
+          </div>
+          <div class="studio-debug-indicator__row">
+            <dt>Boot</dt>
+            <dd class="studio-debug-indicator__mono">{{ bootLabel }}</dd>
+          </div>
+        </dl>
+
+        <!-- Footer -->
+        <div class="studio-debug-indicator__footer">
+          <button class="studio-debug-indicator__btn" type="button" @click="copyBundle">
+            <Copy :size="12" :stroke-width="2" aria-hidden="true" />
+            Copy bundle
+          </button>
+          <button
+            class="studio-debug-indicator__btn studio-debug-indicator__btn--muted"
+            type="button"
+            @click="open = false"
+          >
+            Close
+          </button>
+        </div>
+      </PopoverContent>
+
+      <!-- Trigger badge -->
+      <PopoverTrigger
+        class="studio-debug-indicator__trigger"
+        type="button"
+        aria-label="Open Studio debug indicator"
+      >
+        <span
+          v-if="hasErrors"
+          class="studio-debug-indicator__error-dot"
+          aria-label="Errors present"
+        />
+        <span class="studio-debug-indicator__mark" aria-hidden="true">d</span>
+      </PopoverTrigger>
+    </PopoverRoot>
+  </div>
+</template>
+
+<style scoped>
+.studio-debug-indicator {
+  position: fixed;
+  left: 16px;
+  bottom: 16px;
+  z-index: 55;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+/* Trigger */
+.studio-debug-indicator__trigger {
+  position: relative;
+  display: inline-flex;
+  width: 36px;
+  height: 36px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgb(255 255 255 / 0.08);
+  border-radius: 10px;
+  background: #0a0a0a;
+  box-shadow:
+    0 0 0 1px rgb(0 0 0 / 0.08),
+    0 8px 24px rgb(0 0 0 / 0.18);
+  color: #fafafa;
+  cursor: pointer;
+  transition: transform 120ms ease, box-shadow 120ms ease;
+}
+
+.studio-debug-indicator__trigger:hover {
+  transform: translateY(-1px);
+  box-shadow:
+    0 0 0 1px rgb(0 0 0 / 0.1),
+    0 12px 28px rgb(0 0 0 / 0.22);
+}
+
+.studio-debug-indicator__trigger:focus-visible {
+  outline: 2px solid var(--studio-focus);
+  outline-offset: 2px;
+}
+
+.studio-debug-indicator__mark {
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: -0.04em;
+  line-height: 1;
+}
+
+.studio-debug-indicator__error-dot {
+  position: absolute;
+  top: 7px;
+  right: 7px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: oklch(0.55 0.15 28);
+  box-shadow: 0 0 0 1.5px #0a0a0a;
+}
+
+/* Panel */
+.studio-debug-indicator__panel {
+  width: min(320px, calc(100vw - 32px));
+  max-height: calc(100dvh - 78px);
+  overflow-y: auto;
+  border: 1px solid rgb(255 255 255 / 0.08);
+  border-radius: 12px;
+  background: #0a0a0a;
+  box-shadow:
+    0 0 0 1px rgb(0 0 0 / 0.2),
+    0 18px 40px rgb(0 0 0 / 0.28);
+  color: #fafafa;
+}
+
+.studio-debug-indicator__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  border-bottom: 1px solid rgb(255 255 255 / 0.08);
+  padding: 10px 12px;
+}
+
+.studio-debug-indicator__title {
+  font-size: 12px;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+}
+
+.studio-debug-indicator__icon-btn {
+  display: inline-flex;
+  width: 22px;
+  height: 22px;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: #737373;
+  cursor: pointer;
+}
+
+.studio-debug-indicator__icon-btn:hover {
+  background: rgb(255 255 255 / 0.08);
+  color: #fafafa;
+}
+
+/* Errors section */
+.studio-debug-indicator__errors {
+  border-bottom: 1px solid rgb(255 255 255 / 0.08);
+}
+
+.studio-debug-indicator__errors-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px 6px;
+  color: oklch(0.72 0.15 28);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.studio-debug-indicator__clear {
+  margin-left: auto;
+  border: 0;
+  background: transparent;
+  color: #737373;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.studio-debug-indicator__clear:hover {
+  color: #fafafa;
+}
+
+.studio-debug-indicator__error {
+  border-top: 1px solid rgb(255 255 255 / 0.05);
+}
+
+.studio-debug-indicator__error-toggle {
+  display: flex;
+  width: 100%;
+  align-items: flex-start;
+  gap: 6px;
+  border: 0;
+  background: transparent;
+  color: #fafafa;
+  padding: 7px 12px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.studio-debug-indicator__error-toggle:hover {
+  background: rgb(255 255 255 / 0.04);
+}
+
+.studio-debug-indicator__error-toggle svg {
+  flex: 0 0 auto;
+  margin-top: 1px;
+  color: #737373;
+}
+
+.studio-debug-indicator__error-msg {
+  overflow: hidden;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 11px;
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.studio-debug-indicator__stack {
+  overflow-x: auto;
+  margin: 0;
+  border-top: 1px solid rgb(255 255 255 / 0.05);
+  background: rgb(255 255 255 / 0.03);
+  color: #a1a1a1;
+  padding: 8px 12px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 10px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+/* Info rows */
+.studio-debug-indicator__list {
+  display: grid;
+  margin: 0;
+  padding: 4px 0;
+}
+
+.studio-debug-indicator__row {
+  display: grid;
+  grid-template-columns: 60px minmax(0, 1fr);
+  gap: 8px;
+  align-items: start;
+  padding: 7px 12px;
+}
+
+.studio-debug-indicator__row dt {
+  margin: 0;
+  color: #737373;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+.studio-debug-indicator__row dd {
+  display: grid;
+  gap: 2px;
+  margin: 0;
+  min-width: 0;
+  font-size: 12px;
+  line-height: 1.35;
+}
+
+.studio-debug-indicator__mono {
+  overflow: hidden;
+  color: #fafafa;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 11px;
+  font-weight: 550;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.studio-debug-indicator__path {
+  overflow: hidden;
+  color: #737373;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 11px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Footer */
+.studio-debug-indicator__footer {
+  display: flex;
+  gap: 6px;
+  border-top: 1px solid rgb(255 255 255 / 0.08);
+  padding: 10px 12px;
+}
+
+.studio-debug-indicator__btn {
+  display: inline-flex;
+  min-height: 28px;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border: 1px solid rgb(255 255 255 / 0.1);
+  border-radius: 7px;
+  background: rgb(255 255 255 / 0.06);
+  color: #fafafa;
+  padding: 0 10px;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.studio-debug-indicator__btn:hover {
+  background: rgb(255 255 255 / 0.1);
+}
+
+.studio-debug-indicator__btn--muted {
+  margin-left: auto;
+  border-color: transparent;
+  background: transparent;
+  color: #737373;
+}
+
+.studio-debug-indicator__btn--muted:hover {
+  background: rgb(255 255 255 / 0.06);
+  color: #fafafa;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .studio-debug-indicator__trigger {
+    transition: none;
+  }
+}
+</style>
diff --git a/apps/studio/ui/src/features/debug/captured-errors.test.ts b/apps/studio/ui/src/features/debug/captured-errors.test.ts
new file mode 100644
index 0000000..abcc493
--- /dev/null
+++ b/apps/studio/ui/src/features/debug/captured-errors.test.ts
@@ -0,0 +1,45 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+import { createRenderer, defineComponent, h, onErrorCaptured } from 'vue'
+
+import { useCapturedErrors } from './captured-errors.ts'
+
+test('capture retains the five newest errors with distinct identities and clears them', () => {
+  const { capture, errors, clear } = useCapturedErrors()
+  clear()
+  for (let i = 0; i < 7; i++) capture(new Error(`Failure ${i}`))
+  assert.deepEqual(errors.value.map((error) => error.message), [
+    'Failure 6', 'Failure 5', 'Failure 4', 'Failure 3', 'Failure 2',
+  ])
+  assert.equal(new Set(errors.value.map((error) => error.id)).size, 5)
+  assert.match(errors.value[0].stack ?? '', /Failure 6/)
+  clear()
+  assert.equal(errors.value.length, 0)
+})
+
+test('capturing a Vue component error preserves application error reporting', () => {
+  const { capture, errors, clear } = useCapturedErrors()
+  clear()
+  const failure = new Error('Component failed')
+  const renderer = createRenderer<object, object>({
+    createElement: () => ({}), createText: () => ({}), createComment: () => ({}),
+    insert() {}, remove() {}, setText() {}, setElementText() {}, patchProp() {},
+    parentNode: () => null, nextSibling: () => null,
+  })
+  const Child = defineComponent({ setup() { throw failure } })
+  const Parent = defineComponent({
+    setup() {
+      onErrorCaptured(capture)
+      return () => h(Child)
+    },
+  })
+  const reported: unknown[] = []
+  const app = renderer.createApp(Parent)
+  app.config.errorHandler = (error) => { reported.push(error) }
+  app.config.warnHandler = () => {}
+  app.mount({})
+  assert.deepEqual(reported, [failure])
+  assert.equal(errors.value[0].message, failure.message)
+  app.unmount()
+  clear()
+})
diff --git a/apps/studio/ui/src/features/debug/captured-errors.ts b/apps/studio/ui/src/features/debug/captured-errors.ts
new file mode 100644
index 0000000..0747f58
--- /dev/null
+++ b/apps/studio/ui/src/features/debug/captured-errors.ts
@@ -0,0 +1,36 @@
+import { ref } from 'vue'
+
+export type CapturedError = {
+  id: number
+  message: string
+  stack: string | undefined
+  timestamp: string
+}
+
+let nextErrorID = 0
+const capturedErrors = ref<CapturedError[]>([])
+
+export function useCapturedErrors() {
+  function capture(err: unknown): void {
+    const error = err instanceof Error ? err : new Error(String(err))
+    capturedErrors.value = [
+      {
+        id: ++nextErrorID,
+        message: error.message,
+        stack: error.stack,
+        timestamp: new Date().toISOString(),
+      },
+      ...capturedErrors.value,
+    ].slice(0, 5)
+  }
+
+  function clear(): void {
+    capturedErrors.value = []
+  }
+
+  return {
+    errors: capturedErrors,
+    capture,
+    clear,
+  }
+}