@cat-factory/app 0.274.0 → 0.276.0

package/app/components/board/nodes/LaneGroup.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import LaneTask from './LaneTask.vue'
+import { MODULE_META, taskTypeMeta } from '~/utils/catalog'
+import { LANE_GEOMETRY } from '~/utils/laneGeometry'
+import type { LaneGroup, LaneGroupKey } from '~/utils/laneSort'
+import { LANE_REASON_LABEL_KEYS, type LaneReason } from '~/utils/swimlanes'
+
+/**
+ * One labelled run of cards inside a lane.
+ *
+ * The WRAPPER carries `data-drop-zone`, not the header, so dropping anywhere in a module's group
+ * — on its title or on a card already in it — means "into that module". With the zone on the
+ * header alone, a drop onto one of the group's own cards would fall through to the lane's frame
+ * zone and reparent the card OUT of the module it was dropped into, which is the opposite of
+ * what the gesture said.
+ *
+ * That drop target is also why module grouping matters beyond presentation: module sub-frames no
+ * longer render as boxes, so this is the board's drag route into a module. The inspector's module
+ * picker is the route that does not depend on the current grouping.
+ */
+const props = withDefaults(
+  defineProps<{
+    group: LaneGroup
+    groupKey: LaneGroupKey
+    /** The enclosing service frame, so the catch-all group can be the way back OUT of a module. */
+    frameId: string
+    /**
+     * How the group's own cards run: down a lane column (the default) or wrapped across the full
+     * width of the Done strip, which is what makes the opened archive a grid rather than a column.
+     */
+    layout?: 'column' | 'grid'
+  }>(),
+  { layout: 'column' },
+)
+
+const { t } = useI18n()
+
+/**
+ * Which block a drop onto this group reparents into.
+ *
+ * Only meaningful while grouping BY MODULE: a named group targets its module block, and the
+ * catch-all ("no module") targets the frame, which is what makes dragging a card out of a module
+ * possible. Under any other grouping the group is not a container at all, so it declares no zone
+ * and drops fall through to the lane's own frame zone.
+ */
+const dropZone = computed(() => {
+  if (props.groupKey !== 'module') return null
+  return props.group.label == null ? props.frameId : props.group.id
+})
+
+/** Group labels are DATA (a module name, a type, a reason), so each kind is rendered as itself. */
+const label = computed(() => {
+  const raw = props.group.label
+  // `none` grouping renders no header at all, so it has no catch-all label to name.
+  if (props.groupKey === 'none') return ''
+  if (raw == null) return t(`board.lanes.group.catchAll.${props.groupKey}`)
+  if (props.groupKey === 'task_type') return taskTypeMeta(raw).label
+  if (props.groupKey === 'blocking_reason') {
+    return t(LANE_REASON_LABEL_KEYS[raw as LaneReason] ?? 'board.lanes.reason.unclassified')
+  }
+  return raw
+})
+
+const icon = computed(() => {
+  if (props.groupKey === 'module') return MODULE_META.icon
+  if (props.groupKey === 'initiative') return 'i-lucide-flag'
+  if (props.groupKey === 'epic') return 'i-lucide-layers'
+  return null
+})
+</script>
+
+<template>
+  <div :data-drop-zone="dropZone ?? undefined" class="space-y-1.5">
+    <!-- `none` grouping renders no header: one unlabelled group IS the flat lane, and a header
+         saying "all of them" would be a row of chrome carrying no information. -->
+    <div
+      v-if="groupKey !== 'none'"
+      class="flex items-center gap-1 px-0.5 text-[10px] uppercase tracking-wide text-slate-500"
+    >
+      <UIcon v-if="icon" :name="icon" class="h-3 w-3 shrink-0" />
+      <span class="truncate" :title="label">{{ label }}</span>
+      <span class="ms-auto shrink-0 tabular-nums">{{ group.entries.length }}</span>
+    </div>
+    <div :class="layout === 'grid' ? 'flex flex-wrap items-start gap-2' : 'space-y-1.5'">
+      <LaneTask
+        v-for="entry in group.entries"
+        :key="entry.task.id"
+        :task-id="entry.task.id"
+        :style="layout === 'grid' ? { width: LANE_GEOMETRY.cardWidth + 'px' } : undefined"
+      />
+    </div>
+  </div>
+</template>

package/app/components/board/nodes/LaneTask.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import TaskCard from './TaskCard.vue'
+import { useBlockDrag } from '~/composables/useBlockDrag'
+
+/**
+ * One task card in a swimlane.
+ *
+ * Replaces the old `DraggableTask`, and the difference is the whole point of the lanes: a card
+ * no longer carries coordinates. It sits where its lane's order puts it, so this wrapper is an
+ * ordinary flow item and the drag it starts is REPARENT-ONLY (`positioned: false`) — moving work
+ * between services, and into or out of a module, which is what a task drag was always actually
+ * for. Nothing is previewed while dragging, because there is nowhere to preview to.
+ *
+ * It also renders merged tasks, where `DraggableTask` returned nothing for them. That is what
+ * the Done lane needed: a finished task used to vanish from the board entirely, so a service's
+ * own history was invisible on it.
+ */
+const props = defineProps<{ taskId: string }>()
+
+const board = useBoardStore()
+const access = useWorkspaceAccess()
+const expansion = useTaskExpansionStore()
+const { t } = useI18n()
+const { draggingId, startDrag } = useBlockDrag()
+
+const task = computed(() => board.getBlock(props.taskId))
+const dragging = computed(() => draggingId.value === props.taskId)
+
+// An expanded pipeline overlays its neighbours, so it must stack above the compact cards
+// around it. Reads the same predicate the pipeline itself renders on.
+const expanded = computed(() => expansion.isExpanded(props.taskId))
+
+function onHandle(e: PointerEvent) {
+  if (task.value) startDrag(task.value, e, { reparent: true, positioned: false })
+}
+</script>
+
+<template>
+  <div
+    v-if="task"
+    class="relative"
+    :style="{
+      zIndex: dragging ? 60 : expanded ? 20 : 10,
+      // While this card is being dragged it must not capture hit-tests, so the drop zone
+      // beneath the cursor (a lane, or a module's group) resolves on release. The handle sits
+      // in this wrapper above the card and would otherwise mask the zone under it.
+      pointerEvents: dragging ? 'none' : undefined,
+    }"
+    :class="{ 'opacity-40': dragging }"
+  >
+    <!-- Drag handle. `nopan` so a start-drag from here moves the card, not the pane. Hidden
+         for read-only viewers, for whom the drag is a no-op anyway (see useBlockDrag). -->
+    <div
+      v-if="access.canWriteBoard.value"
+      class="nodrag nopan flex cursor-grab touch-none items-center justify-center rounded-t-lg border border-b-0 border-slate-700 bg-slate-800/80 py-px active:cursor-grabbing pointer-coarse:py-2"
+      :title="t('board.frame.dragTask')"
+      @pointerdown="onHandle"
+    >
+      <UIcon
+        name="i-lucide-grip-horizontal"
+        class="h-3 w-3 text-slate-500 pointer-coarse:h-5 pointer-coarse:w-5"
+      />
+    </div>
+    <TaskCard :task-id="taskId" :class="access.canWriteBoard.value ? '!rounded-t-none' : ''" />
+  </div>
+</template>

package/app/components/board/nodes/TaskCard.vue

@@ -119,6 +119,7 @@ const prLabel = computed(() =>
  * every section says "nothing here" would teach people the surface is empty. A task marked done
  * by hand, with no pull request and no run, is that task.
  */
+const laneView = useLaneViewStore()
 const outcomeReadable = computed(() => {
   const block = task.value
   if (!block) return false
@@ -136,6 +137,17 @@ const outcomeReadable = computed(() => {
 const showPrChip = computed(
   () => Boolean(pr.value) && (uiMode.isAdvanced || !outcomeReadable.value),
 )
+
+/**
+ * The module chip, dropped while the swimlanes are GROUPED by module.
+ *
+ * Written as the invariant ("the card names its module wherever nothing else does") for the same
+ * reason `showPrChip` is: the surface that carries the other half is itself conditional, and two
+ * predicates that have to agree by coincidence eventually do not.
+ */
+const showModuleChip = computed(
+  () => Boolean(task.value?.moduleName) && laneView.groupKey !== 'module',
+)
 function openOutcome() {
   ui.openOutcome(props.taskId, task.value?.executionId ?? null)
 }
@@ -539,9 +551,11 @@ function selectTask() {
       </template>
     </div>
 
-    <!-- structural metadata: assigned module -->
+    <!-- Structural metadata: assigned module. Dropped while the lanes are GROUPED by module,
+         where the group header above the card already names it — two chips saying the same thing
+         cost a row of card height each and add nothing. -->
     <div
-      v-if="task.moduleName"
+      v-if="showModuleChip"
       class="mt-2 flex flex-wrap items-center gap-1 border-t border-slate-800 pt-2"
     >
       <span

package/app/components/board/nodes/TaskLane.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import LaneGroup from './LaneGroup.vue'
+import type { RenderedLane } from '~/composables/useFrameLanes'
+import { LANE_GEOMETRY } from '~/utils/laneGeometry'
+import type { LaneGroupKey } from '~/utils/laneSort'
+import { LANE_META } from '~/utils/swimlanes'
+
+/**
+ * One status lane inside a service frame.
+ *
+ * The lane BODY is the frame's drop zone, so a card dropped into any of another frame's lanes
+ * moves to that service. Which lane it lands in is not a choice a drop can make: the lane is
+ * derived from the task's state, so dropping a not-started card on "In progress" would have to
+ * either lie or silently ignore the gesture. Reparenting is the one thing a drag decides.
+ *
+ * The body SCROLLS rather than growing. A lane is a viewport onto an unbounded list, which is
+ * what keeps a busy service's frame the same size as a quiet one's; its height comes from the
+ * frame, so dragging the frame's border gives the reader more of the lane.
+ *
+ * It takes the whole {@link RenderedLane} rather than spreading it across three props, so the
+ * lane object stays one thing. Restating its fields here also collided the `LaneGroup` NAME with
+ * the component of that name imported above, leaving one identifier meaning the interface in
+ * type position and the component in value position.
+ */
+const props = defineProps<{
+  rendered: RenderedLane
+  groupKey: LaneGroupKey
+  frameId: string
+  /** The scroll viewport's height, resolved by the frame from its own size. */
+  bodyHeight: number
+}>()
+
+const { t } = useI18n()
+const meta = computed(() => LANE_META[props.rendered.lane])
+const isEmpty = computed(() => props.rendered.groups.every((g) => g.entries.length === 0))
+</script>
+
+<template>
+  <div
+    class="flex min-w-0 flex-col rounded-lg bg-slate-900/40"
+    :style="{ width: LANE_GEOMETRY.laneWidth + 'px' }"
+    :data-lane="rendered.lane"
+  >
+    <!-- Lane header -->
+    <div
+      class="flex items-center gap-1.5 rounded-t-lg border-b px-2 py-1.5"
+      :style="{ borderColor: meta.color + '33' }"
+    >
+      <UIcon :name="meta.icon" class="h-3.5 w-3.5 shrink-0" :style="{ color: meta.color }" />
+      <span class="truncate text-[11px] font-semibold text-slate-200">{{ t(meta.labelKey) }}</span>
+      <span
+        class="ms-auto shrink-0 rounded px-1 text-[10px] font-semibold tabular-nums"
+        :style="{ backgroundColor: meta.color + '22', color: meta.color }"
+        :data-testid="`lane-count-${rendered.lane}`"
+        >{{ rendered.total }}</span
+      >
+    </div>
+
+    <!-- Lane body: the frame's drop zone, and the scroll viewport. -->
+    <div
+      :data-drop-zone="frameId"
+      :data-testid="`lane-${rendered.lane}`"
+      class="nodrag flex-1 space-y-2 overflow-y-auto overflow-x-hidden p-2"
+      :style="{ height: bodyHeight + 'px' }"
+    >
+      <!-- An empty lane SAYS it is empty. Left blank, "nothing needs you" and "the lane failed
+           to render" look identical, and the first is worth stating: it is the answer a reader
+           scanning the needs-you column is hoping for. -->
+      <p v-if="isEmpty" class="px-1 pt-2 text-[10px] leading-snug text-slate-600">
+        {{ t(meta.emptyKey) }}
+      </p>
+      <LaneGroup
+        v-for="(group, i) in rendered.groups"
+        v-else
+        :key="group.label ?? `catch-all-${i}`"
+        :group="group"
+        :group-key="groupKey"
+        :frame-id="frameId"
+      />
+    </div>
+  </div>
+</template>

package/app/components/layout/BoardToolbar.vue

@@ -2,6 +2,7 @@
 import { useBoardFlow, BOARD_MIN_ZOOM, BOARD_MAX_ZOOM } from '~/composables/useBoardFlow'
 import NotificationsInbox from '~/components/layout/NotificationsInbox.vue'
 import IconButton from '~/components/common/IconButton.vue'
+import LaneViewControl from '~/components/board/LaneViewControl.vue'
 
 const ui = useUiStore()
 const board = useBoardStore()
@@ -209,6 +210,9 @@ const decisionItems = computed(() =>
       </UButton>
     </UDropdownMenu>
 
+    <!-- how every frame's swimlanes are ordered + grouped (an override; advanced tier) -->
+    <LaneViewControl />
+
     <!-- in-org sharing: add an existing org service to this board (mount = board.write) -->
     <UDropdownMenu
       v-if="mountableItems.length && access.canWriteBoard.value"

package/app/components/layout/CommandBar.vue

@@ -24,6 +24,7 @@ const documents = useDocumentsStore()
 const tasks = useTasksStore()
 const library = useFragmentLibraryStore()
 const access = useWorkspaceAccess()
+const uiRole = useUiRoleStore()
 
 // The static destination catalog + its RBAC/availability gating now comes from
 // the shared nav manifest (backend/docs/adr/0049-modular-vue-adoption.md, slice 1),
@@ -44,8 +45,14 @@ const activeIndex = ref(0)
 // carry: their label (connect vs manage) and set (one per document/task source)
 // depend on live connection state. Gated by `integrations.manage`, they render
 // under the palette's Integrations group.
+//
+// Also gated on the ROLE's surface, which the manifest entries get for free from `navSlotFilter`
+// (see `NavGates.fullSurface`): these are the platform-configuration half: connecting a source,
+// managing a connection, importing across the whole board. A narrowed role that happens to
+// hold `integrations.manage` would otherwise reach through the palette exactly the surfaces its
+// sidebar dropped. What it keeps is on the board: a frame's own from-ticket / from-design buttons.
 const dynamicIntegrationCommands = computed<Command[]>(() => {
-  if (!access.canManageIntegrations.value) return []
+  if (!access.canManageIntegrations.value || !uiRole.fullSurface) return []
   const groupIntegrations = t('layout.commandBar.groups.integrations')
   const list: Command[] = []
   if (github.available) {

package/app/components/layout/RolePrompt.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+// The first-run role question: asks once what the person is here to do, so the SPA can open on
+// the surfaces that job needs. Offered at launch (at most once per session, and only until it is
+// answered: see `stores/uiRole.ts`) and re-openable at any time from the command palette.
+//
+// It states what each role GIVES you rather than only naming it, because the narrowed role
+// genuinely removes destinations: a person picking blind would either avoid the choice or make it
+// and not know what happened to their sidebar. Same reason the footer names the way back.
+//
+// Closing without picking writes nothing: the role stays the default (the FULL surface), and the
+// next launch asks again. There is deliberately no "don't ask me again": an unanswered question
+// costs nothing here, where a wrongly-recorded answer costs a person destinations they need.
+import { ROLE_PRESENTATION, UI_ROLES, type UiRole } from '~/utils/uiRole'
+
+const { t } = useI18n()
+const uiRole = useUiRoleStore()
+
+const open = computed({
+  get: () => uiRole.promptOpen,
+  set: (v: boolean) => (v ? uiRole.openPrompt() : uiRole.closePrompt()),
+})
+
+function pick(role: UiRole) {
+  uiRole.setRole(role)
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" :title="t('uiRole.prompt.title')" :ui="{ content: 'max-w-lg' }">
+    <template #body>
+      <div class="space-y-4" data-testid="role-prompt">
+        <p class="text-sm text-slate-300">{{ t('uiRole.prompt.intro') }}</p>
+        <div class="space-y-2">
+          <button
+            v-for="role in UI_ROLES"
+            :key="role"
+            type="button"
+            :data-testid="`role-option-${role}`"
+            :aria-pressed="role === uiRole.role && uiRole.chosen"
+            class="flex w-full items-center gap-3 rounded-lg border p-3 text-start transition"
+            :class="
+              role === uiRole.role && uiRole.chosen
+                ? 'border-indigo-500/60 bg-indigo-500/10'
+                : 'border-slate-800 bg-slate-900/60 hover:border-slate-600 hover:bg-slate-800/60'
+            "
+            @click="pick(role)"
+          >
+            <UIcon :name="ROLE_PRESENTATION[role].icon" class="h-5 w-5 shrink-0 text-primary-400" />
+            <div class="min-w-0 flex-1">
+              <div class="text-sm font-medium text-slate-100">
+                {{ t(ROLE_PRESENTATION[role].labelKey) }}
+              </div>
+              <p class="text-xs text-slate-400">{{ t(ROLE_PRESENTATION[role].hintKey) }}</p>
+            </div>
+          </button>
+        </div>
+        <!-- The choice is not a commitment, and saying so is what makes the narrowed role
+             pickable: it is one dropdown at the top of the sidebar to leave again. -->
+        <p class="text-[11px] leading-snug text-slate-500">{{ t('uiRole.prompt.change') }}</p>
+      </div>
+    </template>
+    <template #footer>
+      <div class="flex w-full justify-end">
+        <UButton
+          color="neutral"
+          variant="soft"
+          data-testid="role-prompt-close"
+          @click="uiRole.closePrompt()"
+        >
+          {{ uiRole.chosen ? t('common.close') : t('uiRole.prompt.later') }}
+        </UButton>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/layout/SideBar.vue

@@ -6,15 +6,16 @@
 // context-fragment library, and workspace configuration (merge thresholds +
 // default models).
 //
-// Two orthogonal ways this panel shrinks. WHICH destinations exist is the interface
-// TIER (basic hides the `advanced` contributions, filtered upstream in `navSlotFilter`);
-// how much room they take is the COLLAPSE state (the icon-only rail). Basic mode starts
-// railed, but either can be changed independently from the tier switcher at the top /
-// the rail toggle.
+// Three orthogonal ways this panel shrinks. WHICH destinations exist is the person's ROLE (a
+// narrowed one keeps only the `intake` contributions) and then the interface TIER (basic hides the
+// `advanced` ones), both filtered upstream in `navSlotFilter`; how much room they take is the
+// COLLAPSE state (the icon-only rail). Basic mode starts railed, but each can be changed
+// independently from the role / tier switchers at the top and the rail toggle.
 import { useEventListener, useScrollLock } from '@vueuse/core'
 import BoardSwitcher from '~/components/layout/BoardSwitcher.vue'
 import LanguageSwitcher from '~/components/layout/LanguageSwitcher.vue'
 import UiModeSwitcher from '~/components/layout/UiModeSwitcher.vue'
+import UiRoleSwitcher from '~/components/layout/UiRoleSwitcher.vue'
 import UserMenu from '~/components/auth/UserMenu.vue'
 import { useViewport } from '~/composables/useViewport'
 import type { NavContribution } from '~/modular/nav-contributions'
@@ -67,6 +68,7 @@ const { isCompact } = useViewport()
 // it only to find a rail would be two taps for one destination. The tier decides the default
 // (basic starts collapsed), the user's toggle wins from there — see `stores/uiMode.ts`.
 const uiMode = useUiModeStore()
+const uiRole = useUiRoleStore()
 const railed = computed(() => !isCompact.value && uiMode.navCollapsed)
 
 // The off-canvas drawer is a modal surface on compact viewports, so give it the
@@ -201,15 +203,22 @@ watch(
 
     <BoardSwitcher :collapsed="railed" />
 
-    <!-- The interface tier sits ABOVE the destinations it gates, not in the footer: basic is the
-         shipped default, so this row is most users' only sight of the tier, and below the fold in
-         a scrolled navbar it is a thin thread to hang the advanced half of the product on. The
-         wrapper is what keeps the control and its hint together — the aside's own `gap-4` would
-         otherwise push them apart. Kept OUT of the `onNavAction` group deliberately: switching
-         tiers opens nothing, and closing the compact drawer would hide the destinations the
-         switch just revealed. -->
+    <!-- The two "how much of the app do I see" controls sit ABOVE the destinations they gate, not
+         in the footer: basic is the shipped default, so this row is most users' only sight of the
+         tier, and below the fold in a scrolled navbar it is a thin thread to hang the advanced
+         half of the product on. The wrapper is what keeps each control with its hint, since the aside's
+         own `gap-4` would otherwise push them apart. Kept OUT of the `onNavAction` group
+         deliberately: switching tier or role opens nothing, and closing the compact drawer would
+         hide the destinations the switch just revealed.
+
+         The ROLE comes first because it is the outer of the two: it caps the tier (see
+         `resolveUiMode`), which is also why the tier switcher is dropped on a narrowed role:
+         with the tier fixed at basic, a control that flipped it would be advertising a choice the
+         resolver ignores, exactly as it refuses to be under an env pin. The role switcher itself
+         is rendered in EVERY role: it is the way back. -->
     <div class="space-y-1">
-      <UiModeSwitcher :collapsed="railed" />
+      <UiRoleSwitcher :collapsed="railed" />
+      <UiModeSwitcher v-if="uiRole.fullSurface" :collapsed="railed" />
     </div>
 
     <div class="contents" @click="onNavAction">

package/app/components/layout/UiRoleSwitcher.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ROLE_PRESENTATION, UI_ROLES } from '~/utils/uiRole'
+
+// Role picker, at the TOP of the sidebar beside the interface-tier switcher: one place answers
+// "how much of the app do I see", and the role is the outer of the two (it can cap the tier, see
+// `resolveUiMode`), so it sits above it.
+//
+// A DROPDOWN rather than the tier switcher's segmented control, and the difference is not
+// cosmetic: three role names do not fit legibly across a 15rem sidebar, and the choice has already
+// been made explicitly once (the first-run prompt states what each role gives you), so this
+// control's job is to NAME the current role and offer the way out, not to advertise that a choice
+// exists. It is rendered in EVERY role, including the narrowed one, because it is the way back.
+//
+// In the collapsed rail it keeps the menu and drops to the glyph plus the role's name, so the rail
+// still says which role is on (the same reason the tier button keeps its label there).
+withDefaults(defineProps<{ collapsed?: boolean }>(), { collapsed: false })
+
+const uiRole = useUiRoleStore()
+const { t } = useI18n()
+
+// Name / glyph / one-line description all come from the shared presentation table, so this
+// control and the first-run prompt can never describe the same role differently.
+const current = computed(() => ROLE_PRESENTATION[uiRole.role])
+const currentLabel = computed(() => t(current.value.labelKey))
+
+const items = computed(() =>
+  UI_ROLES.map((role) => ({
+    label: t(ROLE_PRESENTATION[role].labelKey),
+    icon: ROLE_PRESENTATION[role].icon,
+    // The tick, so an open menu says which role is current as well as which are available.
+    trailingIcon: role === uiRole.role ? 'i-lucide-check' : undefined,
+    onSelect: () => uiRole.setRole(role),
+  })),
+)
+</script>
+
+<template>
+  <UDropdownMenu :items="items" :ui="{ content: 'min-w-48' }">
+    <!-- Rail: glyph over the role name, matching the tier button beside it. -->
+    <button
+      v-if="collapsed"
+      type="button"
+      data-testid="ui-role-toggle"
+      :aria-label="`${t('uiRole.switcher')}: ${currentLabel}`"
+      :title="`${t('uiRole.switcher')}: ${currentLabel}`"
+      class="flex w-full flex-col items-center gap-0.5 rounded-lg border border-slate-700 bg-slate-900/60 px-1 py-1.5 transition hover:border-indigo-500/60 hover:bg-slate-800/60"
+    >
+      <UIcon :name="current.icon" class="h-4 w-4 shrink-0 text-indigo-400" />
+      <span class="w-full truncate text-center text-[9px] font-medium uppercase text-slate-300">
+        {{ currentLabel }}
+      </span>
+    </button>
+
+    <button
+      v-else
+      type="button"
+      data-testid="ui-role-switcher"
+      :aria-label="t('uiRole.switcher')"
+      :title="t(current.hintKey)"
+      class="flex w-full items-center gap-2 rounded-lg border border-slate-700 bg-slate-900/60 p-2 text-start transition hover:border-indigo-500/60 hover:bg-slate-800/60"
+    >
+      <UIcon :name="current.icon" class="h-4 w-4 shrink-0 text-indigo-400" />
+      <div class="min-w-0 flex-1">
+        <div class="truncate text-[10px] uppercase tracking-wide text-slate-500">
+          {{ t('uiRole.switcher') }}
+        </div>
+        <div class="truncate text-xs font-medium text-slate-200">{{ currentLabel }}</div>
+      </div>
+      <UIcon name="i-lucide-chevron-down" class="h-3.5 w-3.5 shrink-0 text-slate-500" />
+    </button>
+  </UDropdownMenu>
+</template>

package/app/components/panels/InspectorPanel.vue

@@ -319,10 +319,23 @@ const showOriginalDescription = ref(false)
 </script>
 
 <template>
+  <!-- On lg+ the panel is a rail in the board pane's end corner, and it CLEARS the board's top
+       overlay region rather than sitting beside it (`top-16`, below the region's toolbar pill).
+       That region has one owner, `BoardTopOverlays`, and this rail is deliberately not a member:
+       it is an end-anchored side panel, not centred chrome. Clearing the region is how a
+       non-member stays out of the owner's way.
+       Overlapping is not a cosmetic problem. The toolbar is centred and grows with its contents,
+       so at some width its end reaches this corner, and whichever of the two is on top covers the
+       other's controls and EATS THEIR CLICKS: the click lands on the box above and no handler
+       runs, which reads as a dead button rather than as two overlapping boxes. Adding the
+       swimlane view control was the width that finally did it, to the notifications bell (then
+       with the panel on top; the region now paints above at `z-40`, which only swaps which side
+       loses). Sitting the panel below fixes it whichever way the stacking goes, and needs no
+       left/right arithmetic to stay correct under RTL. -->
   <div
     v-if="block && statusMeta && typeMeta"
     data-testid="inspector-panel"
-    class="fixed inset-x-0 bottom-0 z-20 overflow-hidden rounded-t-2xl border border-slate-700 bg-slate-900/95 shadow-2xl backdrop-blur lg:absolute lg:inset-x-auto lg:bottom-auto lg:end-4 lg:top-4 lg:w-80 lg:rounded-2xl"
+    class="fixed inset-x-0 bottom-0 z-20 overflow-hidden rounded-t-2xl border border-slate-700 bg-slate-900/95 shadow-2xl backdrop-blur lg:absolute lg:inset-x-auto lg:bottom-auto lg:end-4 lg:top-16 lg:w-80 lg:rounded-2xl"
   >
     <div class="h-1.5 w-full" :style="{ backgroundColor: statusMeta.color }" />
     <!-- A tall task (execution steps + scenarios + docs) can overflow the
@@ -331,7 +344,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-5rem)]"
+      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)]"
     >
       <!-- header -->
       <div class="flex items-start justify-between gap-2">