@cat-factory/app 0.310.3 → 0.311.1

package/README.md

@@ -321,6 +321,15 @@ That is the whole mechanism, and it is why there is no rule here about WHICH ste
 
 The default `radius` lives on the `Cat Factory` document in `app/utils/theme/builtins.ts`. It equals `THEME_DEFAULTS.radius` and so writes no CSS, which is the point: changing the number there is the whole edit.
 
+### Full-screen overlays bind their root class
+
+A phone's notch and home indicator cover whatever sits at the screen edge, and on a screen without them nothing looks wrong. So a full-screen overlay never spells `fixed inset-0` itself. Its root binds one of the two class lists in [`utils/safeArea.ts`](./app/utils/safeArea.ts), which carry the positioning, the `100dvh` cap and the safe-area padding, and the site adds only its stacking, direction and backdrop:
+
+- **`FULL_BLEED_TAKEOVER_CLASS`** for a takeover that fills the screen (`AgentStepDetail`, the model configuration takeover, the observability, reports, operator dashboard and Kaizen panels, the artifact lightbox). It pads by the inset alone, so a screen without one keeps the edge-to-edge layout.
+- **`WINDOWED_OVERLAY_CLASS`** for a window on a backdrop (`ResultWindowShell`). Its gutter is 1rem or the inset, whichever is larger.
+
+`scripts/check-frontend-safe-area.mjs` (CI) refuses any other `fixed` surface that spans a whole side of the viewport, in `.vue`, `.ts` and `.css`. A surface with no edge content (a scrim, a drawing layer) or one that pads its own edges (the sidebar drawer, the inspector's bottom sheet) says why with a `safe-area-ok:` comment, on the line or the one above it, or above the element's opening tag.
+
 ### A control is its Nuxt UI component
 
 Every CONTROL in the SPA is the Nuxt UI component for it, never the raw HTML element. A raw `<button>` beside a `UButton` is the same control rendered twice, and only one of the two follows the theme, the focus ring, the disabled state and the size scale; the SPA carried 152 of them, 24 raw `<input>`, five hand-built tables and six hand-rolled `<details>`, each with its own border, background and hover recipe.
@@ -611,6 +620,14 @@ The seams, and what a new feature should use rather than reading the store ad ho
 - **A surface that narrows inline** reads `useUiRoleStore().fullSurface` (the frame header's bug-hunt
   button, the palette's per-connection integration commands). Same rule as the tier: what remains
   must be exactly what the full surface would have shown, only less of it.
+- **A setup prompt** (a "configure this" card over the board) goes through `canActOnSetup`
+  (`app/utils/setupAudience.ts`) with the caller from `useSetupActor()`: it combines the role's
+  surface with the board and account grants and the owner the server reports for the gap
+  (`infraSetupOwners`). A caller who cannot act gets no card. If the gap stops runs they could start,
+  it reaches them as one line saying how it gets fixed (`blockingSetupNotice`): the owner to ask, or
+  the role switch when they hold the grant and only the designer surface hides the card. A viewer
+  gets nothing, and the line honours the card's dismissals. Never a button that opens a screen the
+  caller's save is refused on.
 - **A tutorial tour whose step clicks a non-`intake` nav entry declares
   `TUTORIAL_REQUIREMENTS.fullSurface`.** Which tours those are is not a judgement call:
   `tutorial-tours.spec.ts` derives the pairing from `navItemVisible`, so a tour that gains such a

package/app/assets/css/main.css

@@ -84,6 +84,16 @@ body,
   height: 100%;
 }
 
+/* No pull-to-refresh and no scroll chaining out of the app. The SPA is a full-screen canvas whose
+ * body never scrolls, so a vertical overscroll that reaches the viewport (from a modal's header,
+ * the end of a list, a gutter) has nothing to scroll and on a phone would reload the app instead,
+ * dropping whatever was open. Setting it on the root once covers every overlay, and inner scrollers
+ * still chain to the scroller around them. */
+html,
+body {
+  overscroll-behavior-y: none;
+}
+
 body {
   margin: 0;
   overflow: hidden;

package/app/components/board/DependencyConnectOverlay.vue

@@ -7,6 +7,7 @@ const { connecting } = useDependencyConnect()
 </script>
 
 <template>
+  <!-- safe-area-ok: a pointer-events-none drawing layer with no controls or text -->
   <svg
     v-if="connecting"
     class="pointer-events-none fixed inset-0 z-50 h-full w-full overflow-visible"

package/app/components/common/AsyncViewError.vue

@@ -9,6 +9,7 @@ function reload() {
 </script>
 
 <template>
+  <!-- safe-area-ok: a scrim with one card centred on it, so no content reaches an edge -->
   <div
     data-testid="async-view-error"
     class="fixed inset-0 z-50 grid place-items-center bg-app-950/80 p-6 backdrop-blur-sm"

package/app/components/github/GitHubOnboarding.vue

@@ -3,8 +3,11 @@
 // has no connection yet. cat-factory's whole flow runs on a connected repository host (agents
 // open pull/merge requests on the user's repos), so the board is withheld until the workspace
 // connects one. <VcsConnectSurfaces> renders whichever connect methods the deployment serves; a
-// "Sign out" escape hatch avoids trapping a user who needs to switch accounts.
+// "Sign out" escape hatch avoids trapping a user who needs to switch accounts. The board switcher is
+// the other escape: the gate replaces the whole board, sidebar included, so without it a member
+// who landed on a board they cannot connect had no way to reach a board they can.
 import VcsConnectSurfaces from '~/components/vcs/VcsConnectSurfaces.vue'
+import BoardSwitcher from '~/components/layout/BoardSwitcher.vue'
 import { VCS_PROVIDER_ICONS, VCS_PROVIDER_LABELS } from '~/utils/vcs'
 
 const { t } = useI18n()
@@ -39,6 +42,11 @@ const title = computed(() =>
 
       <VcsConnectSurfaces :app-intro="t('github.onboarding.appIntro')" />
 
+      <div class="mt-6 border-t border-default pt-4" data-testid="vcs-onboarding-switch-board">
+        <p class="mb-2 text-xs text-muted">{{ t('vcs.onboarding.switchBoard') }}</p>
+        <BoardSwitcher standalone />
+      </div>
+
       <p
         v-if="auth.required && auth.user"
         class="mt-6 border-t border-default pt-4 text-center text-xs text-dimmed"

package/app/components/kaizen/KaizenPanel.vue

@@ -4,6 +4,7 @@ import { onKeyStroke } from '@vueuse/core'
 import type { TableColumn } from '@nuxt/ui'
 import type { KaizenGrading } from '~/types/domain'
 import { agentKindMeta } from '~/utils/catalog'
+import { FULL_BLEED_TAKEOVER_CLASS } from '~/utils/safeArea'
 
 // The Kaizen screen: a full-panel overlay listing the workspace's grading history and
 // its verified-combo library. Opened via `ui.openKaizen()` from the sidebar. Read-only —
@@ -66,7 +67,8 @@ const historyColumns = computed<TableColumn<KaizenGrading>[]>(() => [
     <Transition name="kz-fade">
       <div
         v-if="open"
-        class="fixed inset-0 z-[60] flex flex-col bg-app-950/96 backdrop-blur-sm"
+        class="z-[60] flex-col bg-app-950/96 backdrop-blur-sm"
+        :class="FULL_BLEED_TAKEOVER_CLASS"
         role="dialog"
         aria-modal="true"
       >

package/app/components/layout/AccountTeamSettings.vue

@@ -53,7 +53,7 @@ function invitationStatusLabel(status: InvitationStatus): string {
 }
 
 /** Whether the signed-in caller is an admin of this account (drives edit affordances). */
-const isAdmin = computed(() => accounts.activeAccount?.roles?.includes('admin') ?? false)
+const isAdmin = computed(() => accounts.isActiveAccountAdmin)
 /**
  * Members / roles / invitations are org-scoped — the backend rejects membership on a
  * personal account. For a personal account we show a "create an organization" CTA in

package/app/components/layout/BoardSwitcher.vue

@@ -12,7 +12,16 @@ import SectionLabel from '~/components/common/SectionLabel.vue'
 // account row folds away — it is a label with a menu duplicated inside the board menu's
 // reach — and the board button keeps only its glyph. Both dropdowns are unchanged, so
 // switching boards never requires expanding the sidebar first.
-withDefaults(defineProps<{ collapsed?: boolean }>(), { collapsed: false })
+//
+// `standalone` is for a host OUTSIDE the board page (the repository-host gate), where the
+// page-level dialogs are not mounted. The items that open one are left out there: "Account
+// settings" opens `AccountSettingsPanel` and "Delete board" awaits `ConfirmDialog`, so on the gate
+// both would do nothing and then fire once a board page mounted, the delete against the board that
+// was active when it was asked.
+const props = withDefaults(defineProps<{ collapsed?: boolean; standalone?: boolean }>(), {
+  collapsed: false,
+  standalone: false,
+})
 
 const { t } = useI18n()
 
@@ -65,14 +74,19 @@ const accountItems = computed<DropdownMenuItem[][]>(() => [
     },
     // Account settings: the unified per-account panel (team + roles + invitations + email
     // sender + account-tier fragment library). The panel itself handles personal accounts
-    // (prompting to create an org for the team tab), so this is not gated.
-    {
-      label: t('layout.boardSwitcher.account.settings'),
-      icon: 'i-lucide-settings',
-      onSelect: () => ui.openAccountSettings(),
-    },
+    // (prompting to create an org for the team tab), so this is not gated by role; it is left out
+    // only where the panel is not mounted (`standalone`).
+    ...(props.standalone
+      ? []
+      : [
+          {
+            label: t('layout.boardSwitcher.account.settings'),
+            icon: 'i-lucide-settings',
+            onSelect: () => ui.openAccountSettings(),
+          },
+        ]),
     // Admins can set the account-wide default provider new services inherit.
-    ...(accounts.activeAccount?.roles?.includes('admin')
+    ...(accounts.isActiveAccountAdmin
       ? [
           {
             label: t('layout.boardSwitcher.account.defaultProvider'),
@@ -122,12 +136,17 @@ const boardItems = computed<DropdownMenuItem[][]>(() => [
             icon: 'i-lucide-pencil',
             onSelect: () => openPrompt('rename'),
           },
-          {
-            label: t('layout.boardSwitcher.board.delete'),
-            icon: 'i-lucide-trash-2',
-            color: 'error' as const,
-            onSelect: () => void removeBoard(),
-          },
+          // Delete confirms through the page's `ConfirmDialog`, absent in `standalone`.
+          ...(props.standalone
+            ? []
+            : [
+                {
+                  label: t('layout.boardSwitcher.board.delete'),
+                  icon: 'i-lucide-trash-2',
+                  color: 'error' as const,
+                  onSelect: () => void removeBoard(),
+                },
+              ]),
         ]
       : []),
   ],

package/app/components/layout/DefaultTestEnvBanner.vue

@@ -22,14 +22,17 @@ const ui = useUiStore()
 const workspace = useWorkspaceStore()
 const settingsStore = useWorkspaceSettingsStore()
 const { canManageSettings } = useWorkspaceAccess()
+const uiRole = useUiRoleStore()
 
 // Only prompt someone who can actually answer. A member/viewer cannot write workspace settings
 // (the endpoint is `settings.manage`-gated), so for them this would be an un-actionable nag
-// pointing at a screen that would refuse their save.
+// pointing at a screen that would refuse their save. The designer surface never configures the
+// platform, so it is kept off there too, whatever the grant.
 const show = computed(
   () =>
     workspace.ready &&
     canManageSettings.value &&
+    uiRole.fullSurface &&
     needsDefaultProvisioningChoice(settingsStore.settings) &&
     !ui.defaultProvisionDismissed,
 )

package/app/components/layout/InfraSetupBanner.vue

@@ -6,6 +6,11 @@
 // runtime whose account picked no backend — incl. Cloudflare without an ARTIFACT_BUCKET binding;
 // ephemeral test environments on any runtime that wires the integration).
 //
+// Audience: a card renders only for a caller who can act on its area, per the server-reported
+// owner (`infraSetupOwners`) and `canActOnSetup`. A caller who cannot (a member, a viewer, the
+// designer surface, or anyone when the operator owns the gap) sees one compact line instead, and
+// only for a gap that stops every run (`InfraSetupNotice`).
+//
 // Positioning/stacking against the sibling advisory banners (AI-readiness, provider-config) is
 // owned by the shared, click-through banner column in `pages/index.vue` — so concurrent prompts
 // stack vertically instead of drawing on top of each other. This component only stacks its OWN
@@ -52,11 +57,14 @@ import {
 import type { DropdownMenuItem } from '@nuxt/ui'
 import type { InfraSetupArea, InfraSetupStatus } from '~/types/domain'
 import { infraSetupDismissalKey, type InfraSetupCardKind } from '~/utils/infraSetup'
+import { blockingSetupNotice, canActOnSetup } from '~/utils/setupAudience'
+import InfraSetupNotice from '~/components/layout/InfraSetupNotice.vue'
 
 const { t } = useI18n()
 const ui = useUiStore()
 const auth = useAuthStore()
 const workspace = useWorkspaceStore()
+const { actor } = useSetupActor()
 
 // Severity order: no executor blocks EVERY agent, so it leads; a missing test environment blocks
 // only testing agents; missing storage only degrades the UI-tester's screenshots.
@@ -140,6 +148,9 @@ const visible = computed<AreaCard[]>(() => {
   return AREAS.filter((area) => {
     const kind = cardKind(status[area])
     if (!kind) return false
+    // A card is for the people who can act on it. Everyone else hears about a gap only when it
+    // stops their own work, through the one line below (`blockingSetupNotice`).
+    if (!canActOnSetup(workspace.infraSetupOwners?.[area], actor.value)) return false
     // Both dismissals are keyed by the CLAIM, not by the area: silencing "you haven't configured
     // this" must not also silence "you configured it and it is now down". The permanent dismissal
     // only ever covers a setup gap (`dismissPermanently` is offered nowhere else).
@@ -152,6 +163,18 @@ const visible = computed<AreaCard[]>(() => {
   }))
 })
 
+// The one line for a caller who cannot act on a gap that stops every run. It honours BOTH
+// dismissals of the card it stands in for, keyed by the same claim: someone who said "don't
+// notify me again" on the card (before their role changed, say) is not nagged again by the line.
+const notice = computed(() => {
+  const found = blockingSetupNotice(workspace.infraSetup, workspace.infraSetupOwners, actor.value)
+  if (!found) return null
+  if (ui.infraSetupSessionDismissed.includes(infraSetupDismissalKey(found.area, found.kind))) {
+    return null
+  }
+  return found.kind === 'setup' && dismissedForUser.value.includes(found.area) ? null : found
+})
+
 /** Which card an area's status raises, or null when it raises none (`configured`/`not_applicable`). */
 function cardKind(status: InfraSetupStatus): InfraSetupCardKind | null {
   if (isInfraSetupHealthStatus(status)) return 'outage'
@@ -169,7 +192,7 @@ function titleKey(card: AreaCard): string {
  * The dismiss dropdown: the product wants the user asked WHICH kind of dismissal on close. An
  * outage offers the session option ONLY — see the fork note at the top of this file.
  */
-function dismissMenu(card: AreaCard): DropdownMenuItem[][] {
+function dismissMenu(card: Pick<AreaCard, 'area' | 'kind'>): DropdownMenuItem[][] {
   const session = {
     label: t('layout.infraSetupBanner.dismiss.session'),
     icon: 'i-lucide-clock',
@@ -195,11 +218,12 @@ function dismissMenu(card: AreaCard): DropdownMenuItem[][] {
          than an assertive `role="alert"` per card — an advisory setup nag shouldn't interrupt a
          screen reader, and up to three stacked alerts would spam it. -->
     <div
-      v-if="visible.length > 0"
+      v-if="visible.length > 0 || notice"
       class="flex w-full flex-col items-center gap-2"
       role="status"
       aria-live="polite"
     >
+      <InfraSetupNotice v-if="notice" :notice="notice" :dismiss-menu="dismissMenu(notice)" />
       <!-- An OUTAGE reads red, a setup gap amber: one is something breaking now, the other is
            something never switched on, and a reader has to be able to tell at a glance. -->
       <div

package/app/components/layout/InfraSetupNotice.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+// The one line a caller sees for a setup gap they cannot fix from where they are, when it stops
+// their runs. It replaces the full card (and its "Configure" button that would open a screen their
+// save is refused on) with two facts: what does not work, and how it gets fixed. Compact on
+// purpose: the caller has nothing to do here, so it must not cover the board the way an actionable
+// card may.
+import type { DropdownMenuItem } from '@nuxt/ui'
+import type { BlockingInfraArea, SetupNotice, SetupRemedy } from '~/utils/setupAudience'
+
+defineProps<{
+  notice: SetupNotice
+  /** The card's own session / permanent choice, built by the banner so both close the same claim. */
+  dismissMenu: DropdownMenuItem[][]
+}>()
+
+const { t } = useI18n()
+
+// Exhaustive over the blocking areas and the remedies, so a new member of either fails typecheck
+// here rather than rendering a raw key.
+const STATE_KEYS: Record<BlockingInfraArea, Record<SetupNotice['kind'], string>> = {
+  agentExecutor: {
+    setup: 'layout.infraSetupNotice.agentExecutor.setup',
+    outage: 'layout.infraSetupNotice.agentExecutor.outage',
+  },
+}
+const REMEDY_KEYS: Record<SetupRemedy, string> = {
+  workspace_admin: 'layout.infraSetupNotice.owner.workspace_admin',
+  account_admin: 'layout.infraSetupNotice.owner.account_admin',
+  operator: 'layout.infraSetupNotice.owner.operator',
+  full_surface: 'layout.infraSetupNotice.fullSurface',
+}
+</script>
+
+<template>
+  <div
+    class="pointer-events-auto flex w-full max-w-3xl items-center gap-3 rounded-xl border px-4 py-2 shadow-lg backdrop-blur"
+    :class="
+      notice.kind === 'outage'
+        ? 'border-app-error-500/50 bg-app-error-950/90'
+        : 'border-app-warning-500/50 bg-app-warning-950/90'
+    "
+    :data-testid="`infra-setup-notice-${notice.area}`"
+    :data-infra-remedy="notice.remedy"
+  >
+    <UIcon
+      :name="notice.kind === 'outage' ? 'i-lucide-plug-zap' : 'i-lucide-server-off'"
+      class="h-5 w-5 shrink-0"
+      :class="notice.kind === 'outage' ? 'text-app-error-400' : 'text-app-warning-400'"
+    />
+    <p
+      class="min-w-0 flex-1 text-sm"
+      :class="notice.kind === 'outage' ? 'text-app-error-100' : 'text-app-warning-100'"
+    >
+      {{ t(STATE_KEYS[notice.area][notice.kind]) }}
+      <span class="opacity-80">{{ t(REMEDY_KEYS[notice.remedy]) }}</span>
+    </p>
+    <UDropdownMenu :items="dismissMenu" :content="{ align: 'end' }">
+      <UButton
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        icon="i-lucide-x"
+        class="shrink-0"
+        :aria-label="t('common.close')"
+        :data-testid="`infra-setup-notice-dismiss-${notice.area}`"
+      />
+    </UDropdownMenu>
+  </div>
+</template>

package/app/components/layout/ProviderConfigBanner.vue

@@ -6,11 +6,13 @@
 // link into its connect panel. Dismissible per session.
 import { computed, ref, watch } from 'vue'
 import type { ProviderConnectionKind } from '~/types/providerConnections'
+import { canActOnSetup } from '~/utils/setupAudience'
 
 const { t } = useI18n()
 const ui = useUiStore()
 const workspace = useWorkspaceStore()
 const store = useProviderConnectionsStore()
+const { actor } = useSetupActor()
 
 // Exhaustive per-kind title/action keys (leaf names mirror the kind verbatim).
 const TITLE_KEYS: Record<ProviderConnectionKind, string> = {
@@ -33,7 +35,12 @@ watch(
 
 const dismissed = ref(false)
 const pending = computed(() => store.needingConfig as ProviderConnectionKind[])
-const show = computed(() => pending.value.length > 0 && !dismissed.value)
+// Only for the people whose save would land: the connection fields are a workspace-admin write,
+// and a member or a designer could only open the panel and be refused.
+const show = computed(
+  () =>
+    pending.value.length > 0 && !dismissed.value && canActOnSetup('workspace_admin', actor.value),
+)
 </script>
 
 <template>

package/app/components/layout/SideBar.vue

@@ -154,6 +154,7 @@ watch(
     enter-from-class="opacity-0"
     leave-to-class="opacity-0"
   >
+    <!-- safe-area-ok: a scrim with no content; the drawer below pads its own edges -->
     <div
       v-if="ui.mobileNavOpen"
       class="fixed inset-0 z-30 bg-app-950/60 backdrop-blur-sm lg:hidden"
@@ -165,6 +166,8 @@ watch(
     />
   </Transition>
 
+  <!-- safe-area-ok: below lg, an edge drawer that pads the top, bottom and inline-start insets
+       itself. The start side is physical left in LTR and right in RTL, hence the `rtl:` override. -->
   <aside
     ref="aside"
     data-testid="sidebar"
@@ -173,7 +176,7 @@ watch(
     :aria-modal="drawerOpen ? 'true' : undefined"
     :aria-label="isCompact ? t('nav.menu') : undefined"
     :inert="isCompact && !ui.mobileNavOpen"
-    class="fixed inset-y-0 start-0 z-40 flex h-full w-64 shrink-0 flex-col gap-4 overflow-y-auto border-e border-default bg-default/95 px-3 pt-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))] backdrop-blur transition-transform duration-200 focus:outline-none lg:static lg:z-auto lg:translate-x-0 lg:bg-default/80"
+    class="fixed inset-y-0 start-0 z-40 flex h-full w-64 shrink-0 flex-col gap-4 overflow-y-auto border-e border-default bg-default/95 px-3 pt-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))] max-lg:ps-[calc(0.75rem+env(safe-area-inset-left))] max-lg:pt-[calc(0.75rem+env(safe-area-inset-top))] max-lg:rtl:ps-[calc(0.75rem+env(safe-area-inset-right))] backdrop-blur transition-transform duration-200 focus:outline-none lg:static lg:z-auto lg:translate-x-0 lg:bg-default/80"
     :class="[
       ui.mobileNavOpen
         ? 'translate-x-0'

package/app/components/media/ArtifactLightbox.vue

@@ -10,6 +10,7 @@ import { computed, ref, watch } from 'vue'
 import { useModalBehavior } from '@modular-vue/core'
 import type { ArtifactBlobs } from '~/composables/useArtifactBlobs'
 import IconButton from '~/components/common/IconButton.vue'
+import { FULL_BLEED_TAKEOVER_CLASS } from '~/utils/safeArea'
 
 interface LightboxItem {
   artifactId: string
@@ -161,7 +162,8 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
       v-if="open"
       ref="dialogRef"
       tabindex="-1"
-      class="fixed inset-0 z-[60] flex flex-col bg-app-950/95 backdrop-blur-sm focus:outline-none"
+      class="z-[60] flex-col bg-app-950/95 backdrop-blur-sm focus:outline-none"
+      :class="FULL_BLEED_TAKEOVER_CLASS"
       role="dialog"
       aria-modal="true"
       data-testid="artifact-lightbox"
@@ -170,7 +172,6 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
           ? t('media.lightbox.ariaLabel', { label: current.label })
           : t('media.lightbox.ariaLabelFallback')
       "
-      @click.self="close"
     >
       <!-- Toolbar -->
       <div class="flex items-center gap-3 border-b border-default/60 px-4 py-2.5">

package/app/components/panels/AgentStepDetail.vue

@@ -31,6 +31,7 @@ import InputGateNotice from '~/components/inputGate/InputGateNotice.vue'
 import RunDetailLoadState from '~/components/panels/RunDetailLoadState.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
 import IconButton from '~/components/common/IconButton.vue'
+import { FULL_BLEED_TAKEOVER_CLASS } from '~/utils/safeArea'
 
 // Detail overlay for a single pipeline step. Opened by clicking an agent in the
 // inspector list (TaskExecution) or the focus-view pipeline (PipelineProgress) via
@@ -393,7 +394,8 @@ async function copyOutput() {
     v-if="open && step && agent"
     data-testid="step-detail"
     :data-agent-kind="step?.agentKind"
-    class="fixed inset-0 z-50 flex max-h-[100dvh] bg-app-950/96 backdrop-blur-sm"
+    class="z-50 bg-app-950/96 backdrop-blur-sm"
+    :class="FULL_BLEED_TAKEOVER_CLASS"
     role="dialog"
     aria-modal="true"
   >
@@ -959,7 +961,7 @@ async function copyOutput() {
       <!-- edit-then-approve actions -->
       <div
         v-if="editing"
-        class="space-y-2 border-t border-default px-4 pt-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))]"
+        class="space-y-2 border-t border-default px-4 pt-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))] lg:pb-3"
       >
         <UButton
           size="sm"
@@ -984,7 +986,7 @@ async function copyOutput() {
 
       <div
         v-else
-        class="space-y-2 border-t border-default px-4 pt-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))]"
+        class="space-y-2 border-t border-default px-4 pt-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))] lg:pb-3"
       >
         <UButton
           data-testid="step-approve"

package/app/components/panels/InspectorPanel.vue

@@ -339,6 +339,7 @@ const showOriginalDescription = ref(false)
        NOT `data-block-id`: that attribute is the board's card selector, which the canvas drivers
        measure geometry through (`utils/blockRects.ts`), and a panel answering to it would offer
        the arrows a rect that is not on the canvas at all. -->
+  <!-- safe-area-ok: a bottom sheet below lg; its scroller pads the bottom and side insets -->
   <div
     v-if="block && statusMeta && typeMeta"
     data-testid="inspector-panel"
@@ -352,7 +353,7 @@ const showOriginalDescription = ref(false)
          On compact viewports the panel is a bottom sheet capped to the visible
          height (dvh excludes mobile browser chrome). -->
     <div
-      class="max-h-[80dvh] space-y-4 overflow-y-auto overscroll-contain px-4 pt-4 pb-[calc(1rem+env(safe-area-inset-bottom))] lg:max-h-[calc(100vh-7rem)]"
+      class="max-h-[80dvh] space-y-4 overflow-y-auto overscroll-contain pt-4 pr-[max(1rem,env(safe-area-inset-right))] pb-[calc(1rem+env(safe-area-inset-bottom))] pl-[max(1rem,env(safe-area-inset-left))] lg:max-h-[calc(100vh-7rem)]"
     >
       <!-- header -->
       <div class="flex items-start justify-between gap-2">

package/app/components/panels/ObservabilityPanel.vue

@@ -32,6 +32,7 @@ import RunFailureSummary from '~/components/observability/RunFailureSummary.vue'
 import ToolCallList from '~/components/observability/ToolCallList.vue'
 import SectionLabel from '~/components/common/SectionLabel.vue'
 import IconButton from '~/components/common/IconButton.vue'
+import { FULL_BLEED_TAKEOVER_CLASS } from '~/utils/safeArea'
 
 /** No run selected: the same empty, NOT-truncated trajectory the store answers with. */
 const EMPTY_TRAJECTORY: RunToolCallTrajectory = Object.freeze({
@@ -537,17 +538,18 @@ function exportJson() {
     <Transition name="obs-fade">
       <div
         v-if="open"
-        class="fixed inset-0 z-[60] flex flex-col bg-app-950/96 backdrop-blur-sm"
+        class="z-[60] flex-col bg-app-950/96 backdrop-blur-sm"
+        :class="FULL_BLEED_TAKEOVER_CLASS"
         role="dialog"
         aria-modal="true"
       >
-        <header class="flex items-center gap-3 border-b border-default px-6 py-4">
+        <header class="flex flex-wrap items-center gap-3 border-b border-default px-6 py-4">
           <div
             class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-app-info-500/15"
           >
             <UIcon name="i-lucide-activity" class="h-5 w-5 text-app-info-400" />
           </div>
-          <div class="min-w-0">
+          <div class="min-w-0 flex-1">
             <h1 class="truncate text-base font-semibold text-highlighted">
               {{ t('observability.modelActivity') }}
             </h1>
@@ -555,7 +557,11 @@ function exportJson() {
               {{ block.title }} · {{ runSubtitle }}
             </p>
           </div>
-          <div class="ms-auto flex items-center gap-1.5">
+          <!-- Below lg the controls take their own row, so the close button stays on screen.
+               The row scrolls sideways when the tabs are wider than the phone. -->
+          <div
+            class="order-last flex w-full min-w-0 items-center gap-1.5 overflow-x-auto lg:order-none lg:w-auto"
+          >
             <!-- Four VIEWS of the same run, which is what tabs mean. The trajectory is loaded
                  lazily the first time the tools view is opened, so the change is watched rather
                  than bound straight to `view`. -->
@@ -580,15 +586,16 @@ function exportJson() {
             >
               {{ t('observability.exportJson') }}
             </UButton>
-            <IconButton
-              icon="i-lucide-x"
-              color="neutral"
-              variant="ghost"
-              size="sm"
-              :label="t('observability.closeEsc')"
-              @click="close"
-            />
           </div>
+          <IconButton
+            class="lg:-ms-1.5"
+            icon="i-lucide-x"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            :label="t('observability.closeEsc')"
+            @click="close"
+          />
         </header>
 
         <div class="flex-1 overflow-auto px-6 py-6">