From 7ac311fee3fed3283e97204cc826fa81fcd8187a Mon Sep 17 00:00:00 2001
From: RedStar <redstar071@proton.me>
Date: Sun, 8 Nov 2026 19:11:29 +0100
Subject: [PATCH 1/2] feat(dashboard): make the shell usable on phones

Below 768px the sidebar was hidden with nothing in its place, so Audit,
Settings, the account and sign-out were unreachable. The sidebar now opens
as a drawer from a per-page navbar, following the layout of the Nuxt UI
dashboard starter within the existing UnoCSS design system.

- AppNavbar replaces three copies of the page header; language and theme
  move to the sidebar footer with the account
- Metrics become one strip that reflows without an orphan cell
- New task opens in a native modal dialog from the navbar
- Define the missing btn-primary shortcut and replace text-error with
  text-danger, which left the queue and approve buttons unstyled
---
 apps/web/app/layouts/default.vue              |  10 +-
 apps/web/app/pages/(dashboard)/audit.vue      |  39 ++--
 apps/web/app/pages/(dashboard)/index.vue      | 122 +++++++------
 apps/web/app/pages/(dashboard)/settings.vue   |  45 ++---
 .../(organizations)/organizations/index.vue   |   9 +-
 apps/web/modules/auth/components/UserMenu.vue |  42 ++++-
 .../dashboard/components/NewTaskDialog.vue    |  52 ++++++
 .../dashboard/components/NewTaskForm.vue      | 132 ++++++--------
 .../dashboard/components/RunnerMetrics.vue    |  45 ++---
 .../dashboard/components/task/Inspector.vue   |   6 +-
 .../modules/shared/components/app/Navbar.vue  |  35 ++++
 .../modules/shared/components/app/Sidebar.vue | 166 +++++++++++++++---
 .../shared/composables/useSidebarOpen.ts      |  16 ++
 apps/web/uno.config.ts                        |   3 +
 packages/i18n/locales/en/dashboard.json       |   8 +-
 packages/i18n/locales/it/dashboard.json       |   8 +-
 packages/i18n/schemas/dashboard.schema.json   |  18 +-
 17 files changed, 461 insertions(+), 295 deletions(-)
 create mode 100644 apps/web/modules/dashboard/components/NewTaskDialog.vue
 create mode 100644 apps/web/modules/shared/components/app/Navbar.vue
 create mode 100644 apps/web/modules/shared/composables/useSidebarOpen.ts

diff --git a/apps/web/app/layouts/default.vue b/apps/web/app/layouts/default.vue
index b5620096..20085a93 100644
--- a/apps/web/app/layouts/default.vue
+++ b/apps/web/app/layouts/default.vue
@@ -1,7 +1,12 @@
 <template>
-  <div class="min-h-screen bg-canvas text-ink">
+  <div class="min-h-dvh bg-canvas text-ink">
     <AppSidebar />
-    <main class="min-h-screen transition-[margin]" :class="collapsed ? 'md:ms-16' : 'md:ms-52'">
+    <!-- Inert while the narrow-screen drawer is open, so focus and screen readers stay in it. -->
+    <main
+      class="min-h-dvh flex flex-col transition-[margin]"
+      :class="collapsed ? 'md:ms-16' : 'md:ms-52'"
+      :inert="open"
+    >
       <slot />
     </main>
     <AppShortcutsDialog />
@@ -10,6 +15,7 @@
 
 <script setup lang="ts">
 const collapsed = useSidebarCollapsed();
+const open = useSidebarOpen();
 
 // Bound here rather than in a plugin so the shell owns them: the sign-in pages use the `auth`
 // layout and should not answer to `g a`. The bindings resolve `document` lazily, so SSR is safe.
diff --git a/apps/web/app/pages/(dashboard)/audit.vue b/apps/web/app/pages/(dashboard)/audit.vue
index e4fe4d7f..60702454 100644
--- a/apps/web/app/pages/(dashboard)/audit.vue
+++ b/apps/web/app/pages/(dashboard)/audit.vue
@@ -1,32 +1,17 @@
 <template>
-  <header
-    class="h-16 flex items-center justify-between border-b border-line bg-canvas/92 px-4 backdrop-blur md:px-6"
-  >
-    <div>
-      <p class="m-0 text-3xs text-muted font-700 tracking-[0.18em] uppercase">
-        {{ $t('dashboard.audit.header.eyebrow') }}
-      </p>
-      <h1 class="m-0 mt-1 text-lg font-650 tracking-tight">
-        {{ $t('dashboard.audit.header.title') }}
-      </h1>
-    </div>
-
-    <div class="flex items-center gap-3">
-      <LocaleSwitcher />
-      <ClientOnly>
-        <ColorModeToggle />
-        <template #fallback>
-          <span class="h-9 w-9 border border-line bg-raised" aria-hidden="true" />
-        </template>
-      </ClientOnly>
-      <button class="btn-subtle gap-2 px-3" type="button" :disabled="pending" @click="refresh">
-        <Icon aria-hidden="true" class="h-3.5 w-3.5" name="lucide:refresh-cw" />
-        {{ $t('common.actions.refresh') }}
-      </button>
-    </div>
-  </header>
+  <AppNavbar :title="$t('dashboard.audit.header.title')">
+    <button
+      class="btn-subtle gap-2 px-3 max-sm:h-11 max-sm:w-11 max-sm:px-0"
+      type="button"
+      :disabled="pending"
+      @click="refresh"
+    >
+      <Icon aria-hidden="true" class="h-3.5 w-3.5 max-sm:h-4 max-sm:w-4" name="lucide:refresh-cw" />
+      <span class="max-sm:sr-only">{{ $t('common.actions.refresh') }}</span>
+    </button>
+  </AppNavbar>
 
-  <div class="p-3 sm:p-4 md:p-5">
+  <div class="p-4 sm:p-6">
     <AuditTable ref="auditTable" :rows="rows" :pending="pending" :error="error" @retry="refresh" />
 
     <!-- Reported beside the list, never in place of it: the control plane's own records are this
diff --git a/apps/web/app/pages/(dashboard)/index.vue b/apps/web/app/pages/(dashboard)/index.vue
index 07e3562d..a3dca977 100644
--- a/apps/web/app/pages/(dashboard)/index.vue
+++ b/apps/web/app/pages/(dashboard)/index.vue
@@ -1,72 +1,56 @@
 <template>
-  <header
-    class="h-16 flex items-center justify-between border-b border-line bg-canvas/92 px-4 backdrop-blur md:px-6"
-  >
-    <div>
-      <p class="m-0 text-3xs text-muted font-700 tracking-[0.18em] uppercase">
-        {{ $t('dashboard.header.eyebrow') }}
-      </p>
-      <h1 class="m-0 mt-1 text-lg font-650 tracking-tight">{{ $t('dashboard.header.title') }}</h1>
-    </div>
-
-    <div class="flex items-center gap-3">
-      <div class="hidden h-9 items-center gap-2 border border-line bg-raised px-3 lg:flex">
-        <span class="label-upper">{{ $t('dashboard.header.mode') }}</span>
-      </div>
-      <!--
-        Says whether the board is following the control plane right now. Without it a stalled
-        stream is indistinguishable from a quiet one, and a quiet board is exactly what an
-        operator would take as "nothing is happening".
-      -->
-      <ClientOnly>
-        <div
-          class="hidden h-9 items-center gap-2 border border-line bg-raised px-3 sm:flex"
-          :aria-label="live ? $t('dashboard.header.liveAria') : $t('dashboard.header.staleAria')"
-          role="status"
-        >
-          <span
-            aria-hidden="true"
-            class="h-1.5 w-1.5 rounded-full"
-            :class="live ? 'bg-accent' : 'bg-muted'"
-          />
-          <span class="label-upper">
-            {{ live ? $t('dashboard.header.live') : $t('dashboard.header.stale') }}
-          </span>
-        </div>
-      </ClientOnly>
-      <ClientOnly>
-        <div class="hidden h-9 items-center gap-2 border border-line bg-raised px-3 sm:flex">
-          <Icon aria-hidden="true" class="h-3.5 w-3.5 text-muted" name="lucide:clock-3" />
-          <span class="mono text-ink">{{ now.toISOString().slice(0, 19) }}Z</span>
-        </div>
-      </ClientOnly>
-      <LocaleSwitcher />
-      <ClientOnly>
-        <ColorModeToggle />
-        <template #fallback>
-          <span class="h-9 w-9 border border-line bg-raised" aria-hidden="true" />
-        </template>
-      </ClientOnly>
-      <button class="btn-subtle gap-2 px-3" type="button" @click="refreshDashboard">
-        <Icon aria-hidden="true" class="h-3.5 w-3.5" name="lucide:refresh-cw" />
-        {{ $t('common.actions.refresh') }}
-      </button>
+  <AppNavbar :title="$t('dashboard.header.title')">
+    <!--
+      Says whether the board is following the control plane right now. Without it a stalled
+      stream is indistinguishable from a quiet one, and a quiet board is exactly what an
+      operator would take as "nothing is happening". A dot alone on a phone, labelled from `sm`.
+    -->
+    <ClientOnly>
       <div
-        aria-hidden="true"
-        class="h-9 w-9 hidden place-items-center border border-accent/45 bg-accent/8 font-mono text-xs text-accent font-700 sm:grid"
+        class="h-9 flex items-center gap-2 sm:border sm:border-line sm:bg-raised sm:px-3"
+        :aria-label="live ? $t('dashboard.header.liveAria') : $t('dashboard.header.staleAria')"
+        role="status"
       >
-        AZ
+        <span
+          aria-hidden="true"
+          class="h-2 w-2 rounded-full sm:h-1.5 sm:w-1.5"
+          :class="live ? 'bg-accent' : 'bg-muted'"
+        />
+        <span class="label-upper max-sm:hidden">
+          {{ live ? $t('dashboard.header.live') : $t('dashboard.header.stale') }}
+        </span>
+      </div>
+    </ClientOnly>
+    <ClientOnly>
+      <div class="hidden h-9 items-center gap-2 border border-line bg-raised px-3 xl:flex">
+        <Icon aria-hidden="true" class="h-3.5 w-3.5 text-muted" name="lucide:clock-3" />
+        <span class="mono text-ink">{{ now.toISOString().slice(0, 19) }}Z</span>
       </div>
-    </div>
-  </header>
+    </ClientOnly>
+    <button
+      class="btn-subtle gap-2 px-3 max-sm:h-11 max-sm:w-11 max-sm:px-0"
+      type="button"
+      @click="refreshDashboard"
+    >
+      <Icon aria-hidden="true" class="h-3.5 w-3.5 max-sm:h-4 max-sm:w-4" name="lucide:refresh-cw" />
+      <span class="max-sm:sr-only">{{ $t('common.actions.refresh') }}</span>
+    </button>
+    <button
+      class="btn-primary gap-2 px-3 max-sm:h-11 max-sm:w-11 max-sm:px-0"
+      type="button"
+      aria-haspopup="dialog"
+      @click="newTaskOpen = true"
+    >
+      <Icon aria-hidden="true" class="h-3.5 w-3.5 max-sm:h-4 max-sm:w-4" name="lucide:plus" />
+      <span class="max-sm:sr-only">{{ $t('dashboard.newTask.title') }}</span>
+    </button>
+  </AppNavbar>
 
-  <div class="p-3 sm:p-4 md:p-5">
+  <div class="flex flex-col gap-4 p-4 sm:gap-6 sm:p-6">
     <RunnerMetrics :overview="overview" />
 
-    <NewTaskForm class="mt-4" :pending="createPending" :error="createError" @submit="createTask" />
-
-    <section class="mt-4 grid gap-4 xl:grid-cols-[minmax(0,1fr)_22rem]">
-      <div class="min-w-0 space-y-4">
+    <section class="grid gap-4 sm:gap-6 xl:grid-cols-[minmax(0,1fr)_22rem]">
+      <div class="min-w-0 flex flex-col gap-4 sm:gap-6">
         <TaskTable
           ref="taskTable"
           :tasks="overview.tasks"
@@ -84,6 +68,13 @@
       />
     </section>
   </div>
+
+  <NewTaskDialog
+    v-model:open="newTaskOpen"
+    :pending="createPending"
+    :error="createError"
+    @submit="createTask"
+  />
 </template>
 
 <script setup lang="ts">
@@ -170,6 +161,12 @@ const decisionPending = ref(false);
 const decisionError = ref<string>();
 const createPending = ref(false);
 const createError = ref<string>();
+const newTaskOpen = ref(false);
+
+// A failure belongs to the attempt that produced it; reopening starts without it.
+watch(newTaskOpen, (isOpen) => {
+  if (isOpen) createError.value = undefined;
+});
 
 /**
  * Queues a task through the control plane.
@@ -184,6 +181,7 @@ async function createTask(request: NewTaskRequest): Promise<void> {
   createError.value = undefined;
   try {
     await $orpc.tasks.create(request);
+    newTaskOpen.value = false;
   } catch {
     // Refusals name a rule, not a value, but the server's text is still untrusted input this page
     // would render; the trail records which rule refused.
diff --git a/apps/web/app/pages/(dashboard)/settings.vue b/apps/web/app/pages/(dashboard)/settings.vue
index dddc27a1..9810bfe9 100644
--- a/apps/web/app/pages/(dashboard)/settings.vue
+++ b/apps/web/app/pages/(dashboard)/settings.vue
@@ -1,38 +1,17 @@
 <template>
-  <header
-    class="h-16 flex items-center justify-between border-b border-line bg-canvas/92 px-4 backdrop-blur md:px-6"
-  >
-    <div>
-      <p class="m-0 text-3xs text-muted font-700 tracking-[0.18em] uppercase">
-        {{ $t('dashboard.settings.header.eyebrow') }}
-      </p>
-      <h1 class="m-0 mt-1 text-lg font-650 tracking-tight">
-        {{ $t('dashboard.settings.header.title') }}
-      </h1>
-    </div>
-
-    <div class="flex items-center gap-3">
-      <LocaleSwitcher />
-      <ClientOnly>
-        <ColorModeToggle />
-        <template #fallback>
-          <span class="h-9 w-9 border border-line bg-raised" aria-hidden="true" />
-        </template>
-      </ClientOnly>
-      <button
-        class="btn-subtle gap-2 px-3"
-        type="button"
-        :disabled="pending"
-        :aria-label="$t('common.actions.refresh')"
-        @click="refresh"
-      >
-        <Icon aria-hidden="true" class="h-3.5 w-3.5" name="lucide:refresh-cw" />
-        <span class="hidden sm:inline">{{ $t('common.actions.refresh') }}</span>
-      </button>
-    </div>
-  </header>
+  <AppNavbar :title="$t('dashboard.settings.header.title')">
+    <button
+      class="btn-subtle gap-2 px-3 max-sm:h-11 max-sm:w-11 max-sm:px-0"
+      type="button"
+      :disabled="pending"
+      @click="refresh"
+    >
+      <Icon aria-hidden="true" class="h-3.5 w-3.5 max-sm:h-4 max-sm:w-4" name="lucide:refresh-cw" />
+      <span class="max-sm:sr-only">{{ $t('common.actions.refresh') }}</span>
+    </button>
+  </AppNavbar>
 
-  <div class="p-3 sm:p-4 md:p-5">
+  <div class="p-4 sm:p-6">
     <SettingsState
       v-if="!view && (pending || !error)"
       kind="loading"
diff --git a/apps/web/app/pages/(organizations)/organizations/index.vue b/apps/web/app/pages/(organizations)/organizations/index.vue
index 582888c2..b5f25bc8 100644
--- a/apps/web/app/pages/(organizations)/organizations/index.vue
+++ b/apps/web/app/pages/(organizations)/organizations/index.vue
@@ -1,9 +1,8 @@
 <template>
-  <div class="mx-auto max-w-4xl p-6">
-    <header>
-      <h1 class="m-0 text-lg text-ink font-650">{{ $t('organizations.title') }}</h1>
-      <p class="m-0 mt-1 text-xs text-muted">{{ $t('organizations.subtitle') }}</p>
-    </header>
+  <AppNavbar :title="$t('organizations.title')" />
+
+  <div class="mx-auto max-w-4xl w-full p-4 sm:p-6">
+    <p class="m-0 text-xs text-muted">{{ $t('organizations.subtitle') }}</p>
 
     <p v-if="error" class="m-0 mt-4 border border-line bg-raised p-3 text-xs text-ink" role="alert">
       {{ $t(error) }}
diff --git a/apps/web/modules/auth/components/UserMenu.vue b/apps/web/modules/auth/components/UserMenu.vue
index 1479c859..db1064f7 100644
--- a/apps/web/modules/auth/components/UserMenu.vue
+++ b/apps/web/modules/auth/components/UserMenu.vue
@@ -1,21 +1,45 @@
 <template>
-  <div v-if="ready && loggedIn" class="border-t border-line p-4">
-    <p class="m-0 label-upper">
-      {{ $t('auth.session.signedInAs') }}
-    </p>
-    <p class="m-0 mt-1 truncate text-xs font-650" :title="user?.email">
-      {{ user?.name || user?.email }}
-    </p>
+  <div v-if="ready && loggedIn" class="flex items-center gap-2.5 border-t border-line p-3">
+    <span
+      aria-hidden="true"
+      class="h-8 w-8 shrink-0 grid place-items-center rounded-full border border-line bg-raised font-mono text-3xs text-ink font-700 uppercase"
+    >
+      {{ initials }}
+    </span>
+    <div class="min-w-0 flex-1">
+      <span class="sr-only">{{ $t('auth.session.signedInAs') }}</span>
+      <p class="m-0 truncate text-xs font-650" :title="user?.email">
+        {{ user?.name || user?.email }}
+      </p>
+      <p v-if="user?.name" class="m-0 truncate text-3xs text-muted">{{ user.email }}</p>
+    </div>
     <button
-      class="focus-ring mt-2.5 h-8 w-full border border-line bg-raised text-xs text-ink font-650 transition hover:border-muted"
+      class="btn-icon shrink-0 border-transparent bg-transparent text-muted hover:text-ink max-md:h-11 max-md:w-11"
       type="button"
+      :aria-label="$t('auth.session.signOut')"
+      :title="$t('auth.session.signOut')"
       @click="signOut()"
     >
-      {{ $t('auth.session.signOut') }}
+      <Icon aria-hidden="true" class="h-4 w-4 rtl:scale-x-[-1]" name="lucide:log-out" />
     </button>
   </div>
 </template>
 
 <script setup lang="ts">
+const WHITESPACE = /\s+/;
+
 const { user, loggedIn, ready, signOut } = useUserSession();
+
+/** Up to two letters for the avatar: the name's first two words, or the email's first letter. */
+const initials = computed(() => {
+  const name = user.value?.name?.trim();
+  if (name) {
+    return name
+      .split(WHITESPACE)
+      .slice(0, 2)
+      .map((word) => word.charAt(0))
+      .join('');
+  }
+  return user.value?.email?.charAt(0) ?? '';
+});
 </script>
diff --git a/apps/web/modules/dashboard/components/NewTaskDialog.vue b/apps/web/modules/dashboard/components/NewTaskDialog.vue
new file mode 100644
index 00000000..ea997f69
--- /dev/null
+++ b/apps/web/modules/dashboard/components/NewTaskDialog.vue
@@ -0,0 +1,52 @@
+<template>
+  <!--
+    A native modal `dialog` rather than an overlay built here: `showModal()` already traps focus,
+    makes the page behind it inert, closes on Escape and hands focus back to the button that opened
+    it, so none of that is reimplemented.
+  -->
+  <dialog
+    ref="dialog"
+    class="m-auto max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-xl overflow-y-auto border border-line bg-panel p-0 text-ink backdrop:bg-canvas/70 backdrop:backdrop-blur-sm"
+    :aria-labelledby="titleId"
+    @close="open = false"
+    @click.self="open = false"
+  >
+    <div class="section-title">
+      <h2 :id="titleId" class="m-0 text-xs font-750 tracking-[0.12em] uppercase">
+        {{ $t('dashboard.newTask.title') }}
+      </h2>
+      <button
+        class="btn-icon h-8 w-8 border-transparent bg-transparent text-muted hover:text-ink"
+        type="button"
+        :aria-label="$t('common.actions.close')"
+        @click="open = false"
+      >
+        <Icon aria-hidden="true" class="h-4 w-4" name="lucide:x" />
+      </button>
+    </div>
+
+    <!-- Mounted per opening, so closing discards the draft: the alternative is a form that quietly
+         keeps a repository path from earlier and submits it against whatever is typed next. -->
+    <NewTaskForm v-if="open" :pending="pending" :error="error" @submit="emit('submit', $event)" />
+  </dialog>
+</template>
+
+<script setup lang="ts">
+import type { NewTaskRequest } from './NewTaskForm.vue';
+
+defineProps<{ pending?: boolean; error?: string }>();
+
+const emit = defineEmits<{ submit: [request: NewTaskRequest] }>();
+
+const open = defineModel<boolean>('open', { default: false });
+
+const dialog = useTemplateRef<HTMLDialogElement>('dialog');
+const titleId = useId();
+
+watch(open, (isOpen) => {
+  const element = dialog.value;
+  if (!element) return;
+  if (isOpen && !element.open) element.showModal();
+  else if (!isOpen && element.open) element.close();
+});
+</script>
diff --git a/apps/web/modules/dashboard/components/NewTaskForm.vue b/apps/web/modules/dashboard/components/NewTaskForm.vue
index a3775d52..72c9cd2b 100644
--- a/apps/web/modules/dashboard/components/NewTaskForm.vue
+++ b/apps/web/modules/dashboard/components/NewTaskForm.vue
@@ -1,79 +1,59 @@
 <template>
-  <!--
-    `details` rather than a dialog with its own open state: the form is a secondary action on a
-    monitoring page, and the element already handles toggling, keyboard, and screen-reader
-    semantics without any of it being reimplemented here.
-  -->
-  <details ref="root" class="panel" @toggle="onToggle">
-    <summary
-      class="h-11 flex cursor-pointer list-none items-center gap-2 px-4 text-xs font-650 marker:hidden"
-    >
-      <Icon aria-hidden="true" class="h-3.5 w-3.5 text-muted" name="lucide:plus" />
-      {{ $t('dashboard.newTask.title') }}
-    </summary>
-
-    <form class="border-t border-line p-4" @submit.prevent="submit">
-      <div class="grid gap-3 md:grid-cols-3">
-        <label class="md:col-span-3">
-          <span class="label-upper">{{ $t('dashboard.newTask.repository') }}</span>
-          <input
-            v-model="repository"
-            class="mt-1.5 h-9 w-full border border-line bg-canvas px-2 font-mono text-xs text-ink"
-            :disabled="pending"
-            :placeholder="$t('dashboard.newTask.repositoryHint')"
-            required
-            type="text"
-          />
-        </label>
-
-        <label>
-          <span class="label-upper">{{ $t('dashboard.newTask.mode') }}</span>
-          <select
-            v-model="mode"
-            class="mt-1.5 h-9 w-full border border-line bg-canvas px-2 text-xs text-ink"
-            :disabled="pending"
-          >
-            <option v-for="option in MODES" :key="option" :value="option">
-              {{ $t(`dashboard.newTask.modes.${option}`) }}
-            </option>
-          </select>
-        </label>
-
-        <label>
-          <span class="label-upper">{{ $t('dashboard.newTask.trigger') }}</span>
-          <select
-            v-model="trigger"
-            class="mt-1.5 h-9 w-full border border-line bg-canvas px-2 text-xs text-ink"
-            :disabled="pending"
-          >
-            <option v-for="option in TRIGGERS" :key="option" :value="option">
-              {{ $t(`dashboard.newTask.triggers.${option}`) }}
-            </option>
-          </select>
-        </label>
-      </div>
-
-      <label v-if="trigger === 'feedback'" class="mt-3 block">
-        <span class="label-upper">{{ $t('dashboard.newTask.feedback') }}</span>
-        <textarea
-          v-model="feedback"
-          class="mt-1.5 w-full border border-line bg-canvas p-2 text-xs text-ink"
+  <!-- The fields only. `NewTaskDialog` decides when they are shown and mounts a fresh copy each
+       time it opens, which is what discards an earlier draft. -->
+  <form class="p-4" @submit.prevent="submit">
+    <div class="grid gap-3 sm:grid-cols-2">
+      <label class="sm:col-span-2">
+        <span class="label-upper">{{ $t('dashboard.newTask.repository') }}</span>
+        <input
+          v-model="repository"
+          class="input-field mt-1.5 w-full font-mono max-md:h-11"
           :disabled="pending"
+          :placeholder="$t('dashboard.newTask.repositoryHint')"
           required
-          rows="3"
+          type="text"
         />
       </label>
 
-      <p v-if="error" class="mb-0 mt-3 text-xs text-error">{{ error }}</p>
+      <label>
+        <span class="label-upper">{{ $t('dashboard.newTask.mode') }}</span>
+        <select v-model="mode" class="input-field mt-1.5 w-full max-md:h-11" :disabled="pending">
+          <option v-for="option in MODES" :key="option" :value="option">
+            {{ $t(`dashboard.newTask.modes.${option}`) }}
+          </option>
+        </select>
+      </label>
 
-      <div class="mt-4 flex items-center gap-3">
-        <button class="btn-primary px-3" type="submit" :disabled="pending">
-          {{ $t('dashboard.newTask.submit') }}
-        </button>
-        <p class="m-0 text-xs text-muted">{{ $t('dashboard.newTask.note') }}</p>
-      </div>
-    </form>
-  </details>
+      <label>
+        <span class="label-upper">{{ $t('dashboard.newTask.trigger') }}</span>
+        <select v-model="trigger" class="input-field mt-1.5 w-full max-md:h-11" :disabled="pending">
+          <option v-for="option in TRIGGERS" :key="option" :value="option">
+            {{ $t(`dashboard.newTask.triggers.${option}`) }}
+          </option>
+        </select>
+      </label>
+    </div>
+
+    <label v-if="trigger === 'feedback'" class="mt-3 block">
+      <span class="label-upper">{{ $t('dashboard.newTask.feedback') }}</span>
+      <textarea
+        v-model="feedback"
+        class="focus-ring mt-1.5 w-full border border-line bg-raised p-2.5 text-xs text-ink"
+        :disabled="pending"
+        required
+        rows="3"
+      />
+    </label>
+
+    <p v-if="error" class="mb-0 mt-3 text-xs text-danger" role="alert">{{ error }}</p>
+
+    <div class="mt-5 flex flex-col gap-3 sm:flex-row sm:items-center">
+      <button class="btn-primary shrink-0 px-4 max-md:h-11" type="submit" :disabled="pending">
+        {{ $t('dashboard.newTask.submit') }}
+      </button>
+      <p class="m-0 text-xs text-muted">{{ $t('dashboard.newTask.note') }}</p>
+    </div>
+  </form>
 </template>
 
 <script setup lang="ts">
@@ -93,7 +73,6 @@ const props = defineProps<{ pending?: boolean; error?: string }>();
 /** Submitted rather than sent from here, for the reason `TaskInspector` emits its decision. */
 const emit = defineEmits<{ submit: [request: NewTaskRequest] }>();
 
-const root = useTemplateRef<HTMLDetailsElement>('root');
 const repository = ref('');
 const mode = ref<(typeof MODES)[number]>('observe');
 const trigger = ref<(typeof TRIGGERS)[number]>('proactive');
@@ -108,17 +87,4 @@ function submit(): void {
     ...(trigger.value === 'feedback' ? { feedback: feedback.value.trim() } : {}),
   });
 }
-
-/**
- * Closing discards the draft, opening starts from an empty one.
- *
- * The alternative is a form that quietly keeps a repository path from an earlier session and
- * submits it against whatever the operator typed next.
- */
-function onToggle(): void {
-  if (root.value?.open === true) {
-    repository.value = '';
-    feedback.value = '';
-  }
-}
 </script>
diff --git a/apps/web/modules/dashboard/components/RunnerMetrics.vue b/apps/web/modules/dashboard/components/RunnerMetrics.vue
index f8a367c0..f76be1fb 100644
--- a/apps/web/modules/dashboard/components/RunnerMetrics.vue
+++ b/apps/web/modules/dashboard/components/RunnerMetrics.vue
@@ -1,30 +1,28 @@
 <template>
-  <section :aria-label="$t('dashboard.metrics.aria')" class="panel grid grid-cols-2 lg:grid-cols-5">
+  <!--
+    One strip of figures: a 1 px gap over the line colour draws every divider, so the grid can
+    reflow from two columns to five without per-cell border bookkeeping. The last figure spans the
+    row on narrow screens, where five cells would otherwise leave a hole.
+  -->
+  <dl
+    :aria-label="$t('dashboard.metrics.aria')"
+    class="m-0 grid grid-cols-2 gap-px border border-line bg-line lg:grid-cols-5"
+  >
     <div
       v-for="(metric, index) in metrics"
       :key="metric.label"
-      class="min-h-22 flex items-center gap-3 border-line p-3.5 sm:p-4"
-      :class="[
-        index % 2 === 0 ? 'border-r' : '',
-        index < 4 ? 'border-b lg:border-b-0 lg:border-r' : '',
-      ]"
+      class="min-w-0 bg-panel px-4 py-3.5 sm:py-4"
+      :class="index === metrics.length - 1 ? 'col-span-2 lg:col-span-1' : ''"
     >
-      <div class="h-9 w-9 shrink-0 grid place-items-center border border-line bg-raised">
-        <Icon aria-hidden="true" class="h-4 w-4 text-muted" :name="metric.icon" />
-      </div>
-      <div class="min-w-0">
-        <p class="m-0 text-4xs text-muted font-700 tracking-[0.16em] uppercase">
-          {{ metric.label }}
-        </p>
-        <p
-          class="m-0 mt-1.5 truncate font-mono text-xl font-600 tracking-tight"
-          :class="metric.tone"
-        >
-          {{ metric.value }}
-        </p>
-      </div>
+      <dt class="label-upper leading-snug">{{ metric.label }}</dt>
+      <dd
+        class="m-0 mt-2 truncate font-mono text-xl font-600 tracking-tight sm:text-2xl"
+        :class="metric.tone"
+      >
+        {{ metric.value }}
+      </dd>
     </div>
-  </section>
+  </dl>
 </template>
 
 <script setup lang="ts">
@@ -38,31 +36,26 @@ const metrics = computed(() => [
   {
     label: t('dashboard.metrics.activeRunners'),
     value: props.overview.active.toString(),
-    icon: 'lucide:server',
     tone: 'text-accent',
   },
   {
     label: t('dashboard.metrics.queuedTasks'),
     value: props.overview.queued.toString(),
-    icon: 'lucide:list-todo',
     tone: 'text-ink',
   },
   {
     label: t('dashboard.metrics.awaitingApproval'),
     value: props.overview.awaitingApproval.toString(),
-    icon: 'lucide:hourglass',
     tone: props.overview.awaitingApproval > 0 ? 'text-warning' : 'text-ink',
   },
   {
     label: t('dashboard.metrics.tokens'),
     value: props.overview.totalTokens.toLocaleString(locale.value),
-    icon: 'lucide:coins',
     tone: 'text-ink',
   },
   {
     label: t('dashboard.metrics.recordedCost'),
     value: `$${props.overview.costUsd.toFixed(4)}`,
-    icon: 'lucide:circle-dollar-sign',
     tone: 'text-ink',
   },
 ]);
diff --git a/apps/web/modules/dashboard/components/task/Inspector.vue b/apps/web/modules/dashboard/components/task/Inspector.vue
index e054e5e1..ada945b9 100644
--- a/apps/web/modules/dashboard/components/task/Inspector.vue
+++ b/apps/web/modules/dashboard/components/task/Inspector.vue
@@ -1,5 +1,5 @@
 <template>
-  <aside class="panel min-h-120 overflow-hidden xl:sticky xl:top-20 xl:h-fit">
+  <aside class="panel overflow-hidden xl:sticky xl:top-22 xl:h-fit xl:min-h-120">
     <div class="section-title">
       <h2 class="m-0 text-xs font-750 tracking-[0.12em] uppercase">
         {{ $t('dashboard.inspector.title') }}
@@ -91,7 +91,7 @@
             :disabled="pending"
           />
         </label>
-        <p v-if="error" class="mb-0 mt-2 text-xs text-error">{{ error }}</p>
+        <p v-if="error" class="mb-0 mt-2 text-xs text-danger" role="alert">{{ error }}</p>
         <div class="mt-3 flex gap-2">
           <button class="btn-primary px-3" type="submit" :disabled="pending">
             {{ $t('dashboard.inspector.approval.approve') }}
@@ -124,7 +124,7 @@
       </div>
     </div>
 
-    <div v-else class="min-h-120 grid place-items-center px-6 text-center">
+    <div v-else class="min-h-52 grid place-items-center px-6 py-10 text-center xl:min-h-120">
       <div>
         <div class="mx-auto h-10 w-10 grid place-items-center border border-line bg-raised">
           <Icon aria-hidden="true" class="h-4 w-4 text-muted" name="lucide:search" />
diff --git a/apps/web/modules/shared/components/app/Navbar.vue b/apps/web/modules/shared/components/app/Navbar.vue
new file mode 100644
index 00000000..8503047b
--- /dev/null
+++ b/apps/web/modules/shared/components/app/Navbar.vue
@@ -0,0 +1,35 @@
+<template>
+  <!--
+    One bar per page, in the place every page keeps it: the page title and the actions that act on
+    the whole page. Preferences (language, theme) live in the sidebar, not here, so the bar still
+    fits on a phone.
+  -->
+  <header
+    class="sticky top-0 z-20 h-16 flex shrink-0 items-center gap-2 border-b border-line bg-canvas/92 px-4 backdrop-blur sm:gap-3 sm:px-6"
+  >
+    <button
+      class="focus-ring -ms-2.5 h-11 w-11 grid shrink-0 place-items-center text-ink transition hover:bg-raised md:hidden"
+      type="button"
+      aria-controls="app-sidebar"
+      :aria-expanded="open"
+      :aria-label="$t('dashboard.nav.open')"
+      @click="open = true"
+    >
+      <Icon aria-hidden="true" class="h-5 w-5" name="lucide:menu" />
+    </button>
+
+    <h1 class="m-0 min-w-0 flex-1 truncate text-base font-650 tracking-tight sm:text-lg">
+      {{ title }}
+    </h1>
+
+    <div v-if="$slots.default" class="flex shrink-0 items-center gap-2 sm:gap-3">
+      <slot />
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+defineProps<{ title: string }>();
+
+const open = useSidebarOpen();
+</script>
diff --git a/apps/web/modules/shared/components/app/Sidebar.vue b/apps/web/modules/shared/components/app/Sidebar.vue
index 2905120b..3fd790ae 100644
--- a/apps/web/modules/shared/components/app/Sidebar.vue
+++ b/apps/web/modules/shared/components/app/Sidebar.vue
@@ -1,58 +1,113 @@
 <template>
+  <!-- Narrow screens only: dims the page behind the open drawer and closes it on a tap. -->
+  <div
+    v-if="open"
+    aria-hidden="true"
+    class="fixed inset-0 z-30 bg-canvas/70 backdrop-blur-sm md:hidden"
+    @click="open = false"
+  />
+
+  <!--
+    One sidebar for every width. From `md` up it is docked and can collapse to icons; below `md` it
+    is a drawer the navbar opens, hidden (and out of the tab order) until then. Rendering it once
+    rather than twice keeps a single copy of every control, so nothing on the page is duplicated
+    for assistive technology or for a test looking a control up by name.
+  -->
   <aside
-    class="fixed inset-y-0 inset-is-0 z-20 hidden flex-col border-ie border-line bg-panel transition-[width] md:flex"
-    :class="collapsed ? 'w-16' : 'w-52'"
+    id="app-sidebar"
+    class="fixed inset-y-0 inset-is-0 z-40 w-72 max-w-[85vw] flex flex-col border-ie border-line bg-panel duration-200 ease-out md:z-20 md:max-w-none"
+    :class="[
+      // Visibility flips at once when the drawer opens, so focus can move into it straight away,
+      // and only after the slide when it closes, so the slide stays visible.
+      // (Arbitrary properties: UnoCSS drops `transition-[a,b]` when the list has a comma.)
+      open
+        ? '[transition-property:translate,width]'
+        : '[transition-property:translate,visibility,width] max-md:invisible max-md:-translate-x-full rtl:max-md:translate-x-full',
+      compact ? 'md:w-16' : 'md:w-52',
+    ]"
   >
     <div
-      class="h-16 flex items-center border-b border-line"
-      :class="collapsed ? 'justify-center' : 'px-4'"
+      class="h-16 flex shrink-0 items-center gap-3 border-b border-line"
+      :class="compact ? 'justify-center' : 'px-4'"
     >
       <div class="h-8 w-8 shrink-0 grid place-items-center border border-accent/45 bg-accent/8">
         <span class="font-mono text-xs text-accent font-750">AZ</span>
       </div>
-      <div v-if="!collapsed" class="ms-3 min-w-0">
+      <div v-if="!compact" class="min-w-0 flex-1">
         <p class="m-0 truncate text-sm font-750 tracking-tight">Code Zero</p>
         <p class="m-0 text-4xs text-muted font-650 tracking-[0.18em] uppercase">
           {{ $t('common.brand.subtitle') }}
         </p>
       </div>
+      <button
+        v-if="open"
+        ref="closeButton"
+        class="focus-ring -me-2 h-11 w-11 grid shrink-0 place-items-center text-muted transition hover:bg-raised hover:text-ink md:hidden"
+        type="button"
+        :aria-label="$t('dashboard.nav.close')"
+        @click="open = false"
+      >
+        <Icon aria-hidden="true" class="h-5 w-5" name="lucide:x" />
+      </button>
     </div>
 
-    <nav :aria-label="$t('dashboard.nav.aria')" class="flex-1 overflow-y-auto px-3 py-4">
+    <nav
+      :aria-label="$t('dashboard.nav.aria')"
+      class="flex-1 overflow-y-auto overscroll-contain px-3 py-4"
+    >
       <NuxtLink
         v-for="item in navItems"
         :key="item.key"
         :to="item.to"
-        class="focus-ring mb-1 h-9 w-full flex items-center border-is-2 text-start text-xs font-600 transition"
+        class="focus-ring mb-1 h-11 w-full flex items-center border-is-2 text-start text-sm font-600 transition md:h-9 md:text-xs"
         :class="[
-          collapsed ? 'justify-center px-0' : 'px-3',
+          compact ? 'justify-center px-0' : 'px-3',
           isActive(item)
             ? 'border-accent bg-accent/8 text-ink'
             : 'border-transparent text-muted hover:bg-raised hover:text-ink',
         ]"
         :aria-current="isActive(item) ? 'page' : undefined"
-        :title="collapsed ? $t(item.labelKey) : undefined"
-        :aria-label="collapsed ? $t(item.labelKey) : undefined"
+        :title="compact ? $t(item.labelKey) : undefined"
+        :aria-label="compact ? $t(item.labelKey) : undefined"
+        @click="open = false"
       >
         <Icon
           :name="item.icon"
           aria-hidden="true"
           class="h-4 w-4 shrink-0"
-          :class="[collapsed ? '' : 'me-2.5', isActive(item) ? 'text-accent' : '']"
+          :class="[compact ? '' : 'me-2.5', isActive(item) ? 'text-accent' : '']"
         />
-        <span v-if="!collapsed" class="truncate">{{ $t(item.labelKey) }}</span>
+        <span v-if="!compact" class="truncate">{{ $t(item.labelKey) }}</span>
       </NuxtLink>
     </nav>
 
     <ClientOnly>
       <!-- Only rendered where the deployment actually enables organizations, as `/api/capabilities`
            reports at runtime; the auth server enforces the same policy regardless. -->
-      <OrganizationsSwitcher v-if="!collapsed && enableOrganizations" />
-      <UserMenu v-if="!collapsed" />
+      <OrganizationsSwitcher v-if="!compact && enableOrganizations" />
+      <UserMenu v-if="!compact" />
     </ClientOnly>
 
-    <div class="border-t border-line" :class="collapsed ? 'px-2 py-3' : 'p-4'">
-      <template v-if="!collapsed">
+    <!-- Preferences belong to the person, not to a page, so they sit with the account rather than
+         being repeated in every page header. -->
+    <div
+      class="flex items-center gap-2 border-t border-line"
+      :class="compact ? 'justify-center px-2 py-3' : 'p-3'"
+    >
+      <LocaleSwitcher v-if="!compact" class="min-w-0 flex-1 max-md:h-11" />
+      <ClientOnly>
+        <ColorModeToggle class="shrink-0 max-md:h-11 max-md:w-11" />
+        <template #fallback>
+          <span
+            class="h-9 w-9 shrink-0 border border-line bg-raised max-md:h-11 max-md:w-11"
+            aria-hidden="true"
+          />
+        </template>
+      </ClientOnly>
+    </div>
+
+    <div class="border-t border-line" :class="compact ? 'px-2 py-3' : 'p-4'">
+      <template v-if="!compact">
         <p class="m-0 label-upper">{{ $t('common.system.label') }}</p>
         <p class="m-0 mt-1.5 flex items-center gap-1.5 text-xs text-accent font-650">
           <span class="h-1.5 w-1.5 rounded-full bg-accent shadow-[0_0_8px_var(--cz-accent-glow)]" />
@@ -74,10 +129,11 @@
       </div>
     </div>
 
-    <div class="border-t border-line p-2">
+    <!-- Collapsing only means something while the sidebar is docked. -->
+    <div class="border-t border-line p-2 max-md:hidden">
       <button
         class="focus-ring h-9 w-full flex items-center text-xs text-muted font-600 transition hover:bg-raised hover:text-ink"
-        :class="collapsed ? 'justify-center px-0' : 'px-3'"
+        :class="compact ? 'justify-center px-0' : 'px-3'"
         type="button"
         :aria-expanded="!collapsed"
         :title="collapsed ? $t('dashboard.nav.expand') : $t('dashboard.nav.collapse')"
@@ -87,9 +143,9 @@
           :name="collapsed ? 'lucide:chevrons-right' : 'lucide:chevrons-left'"
           aria-hidden="true"
           class="h-4 w-4 shrink-0 rtl:scale-x-[-1]"
-          :class="collapsed ? '' : 'me-2.5'"
+          :class="compact ? '' : 'me-2.5'"
         />
-        <span v-if="!collapsed">{{ $t('dashboard.nav.collapse') }}</span>
+        <span v-if="!compact">{{ $t('dashboard.nav.collapse') }}</span>
         <span v-else class="sr-only">{{ $t('dashboard.nav.expand') }}</span>
       </button>
     </div>
@@ -97,13 +153,28 @@
 </template>
 
 <script setup lang="ts">
-// Used as a value by the `<component :is>` above, not as a tag, so auto-import does not
-// cover it: the nav renders a link where an item has a route and a plain button otherwise.
-import { NuxtLink } from '#components';
+import { useHotkey } from '@tanstack/vue-hotkeys';
 
 const collapsed = useSidebarCollapsed();
+const open = useSidebarOpen();
 const route = useRoute();
 
+// Bound to the document rather than to the drawer, so Escape still closes it after a tap on
+// something inside that cannot hold focus. `ignoreInputs: false` for the language picker.
+useHotkey(
+  'Escape',
+  () => {
+    open.value = false;
+  },
+  { enabled: open, ignoreInputs: false },
+);
+
+/**
+ * Whether the sidebar shows icons only. Collapsing is a desktop preference; the drawer a narrow
+ * screen opens always shows the labels, whatever that preference says.
+ */
+const compact = computed(() => collapsed.value && !open.value);
+
 const capabilities = await useAuthCapabilities();
 const enableOrganizations = computed(() => capabilities.value.organizations);
 
@@ -133,4 +204,53 @@ const navItems: readonly NavItem[] = [
 function isActive(item: NavItem): boolean {
   return route.path === item.to;
 }
+
+const closeButton = useTemplateRef<HTMLButtonElement>('closeButton');
+
+/** Where focus was when the drawer opened, so closing it puts the reader back where they were. */
+let returnFocusTo: HTMLElement | undefined;
+
+watch(open, async (isOpen) => {
+  if (isOpen) {
+    returnFocusTo =
+      document.activeElement instanceof HTMLElement ? document.activeElement : undefined;
+    await nextTick();
+    closeButton.value?.focus();
+    return;
+  }
+  // After the render that lifts `inert` from the page, or the button cannot take focus. The navbar
+  // that opened the drawer is gone when it closed by navigating; focus then stays with the new
+  // page instead of jumping to a detached button.
+  const target = returnFocusTo;
+  returnFocusTo = undefined;
+  await nextTick();
+  if (target?.isConnected) target.focus();
+});
+
+// Back and forward navigate without a click on the nav, and should still leave the page visible.
+watch(
+  () => route.fullPath,
+  () => {
+    open.value = false;
+  },
+);
+
+/**
+ * Closes the drawer when the window grows past `md`: the sidebar docks there, and the layout
+ * would otherwise keep the page inert behind a drawer that no longer exists.
+ */
+let desktop: MediaQueryList | undefined;
+
+function closeOnDesktop(event: MediaQueryListEvent): void {
+  if (event.matches) open.value = false;
+}
+
+onMounted(() => {
+  desktop = window.matchMedia('(min-width: 48rem)');
+  desktop.addEventListener('change', closeOnDesktop);
+});
+
+onBeforeUnmount(() => {
+  desktop?.removeEventListener('change', closeOnDesktop);
+});
 </script>
diff --git a/apps/web/modules/shared/composables/useSidebarOpen.ts b/apps/web/modules/shared/composables/useSidebarOpen.ts
new file mode 100644
index 00000000..18bcf5d1
--- /dev/null
+++ b/apps/web/modules/shared/composables/useSidebarOpen.ts
@@ -0,0 +1,16 @@
+import { useState } from 'nuxt/app';
+// Imported explicitly rather than relying on Nuxt auto-imports, for the reason given in
+// `useSidebarCollapsed.ts`.
+import type { Ref } from 'vue';
+
+/**
+ * Whether the navigation drawer is open on a narrow screen.
+ *
+ * Separate from `useSidebarCollapsed`: collapsing narrows the desktop sidebar, opening slides the
+ * same sidebar over the page below the `md` breakpoint, where there is no room to keep it docked.
+ * The page navbar owns the button that opens it, the sidebar closes it, and the layout makes the
+ * page behind it inert while it is open.
+ */
+export function useSidebarOpen(): Ref<boolean> {
+  return useState<boolean>('sidebar-open', () => false);
+}
diff --git a/apps/web/uno.config.ts b/apps/web/uno.config.ts
index 5ba7b912..a6073078 100644
--- a/apps/web/uno.config.ts
+++ b/apps/web/uno.config.ts
@@ -13,6 +13,9 @@ export default defineCodeZeroUno({
       'btn',
       'focus-ring h-9 flex items-center justify-center border text-xs text-ink font-650 transition disabled:cursor-wait disabled:opacity-60',
     ],
+    // The one solid control on a screen: queue a task, approve a run. Same treatment as the
+    // marketing site's primary action, at the console's density.
+    ['btn-primary', 'btn border-accent bg-accent text-canvas hover:bg-accent/88'],
     ['btn-link', 'focus-ring text-xs text-link'],
     // A small, square tag for a value that is one of a few: a mode, a source, an edition.
     [
diff --git a/packages/i18n/locales/en/dashboard.json b/packages/i18n/locales/en/dashboard.json
index 205d87ea..bdf3a2c0 100644
--- a/packages/i18n/locales/en/dashboard.json
+++ b/packages/i18n/locales/en/dashboard.json
@@ -2,9 +2,7 @@
   "$schema": "../../schemas/dashboard.schema.json",
   "dashboard": {
     "header": {
-      "eyebrow": "Code Zero / Operations",
       "title": "Control Plane",
-      "mode": "Local interface",
       "live": "Live",
       "stale": "Reconnecting",
       "liveAria": "Live updates connected",
@@ -16,7 +14,9 @@
       "audit": "Audit Log",
       "collapse": "Collapse",
       "expand": "Expand",
-      "settings": "Settings"
+      "settings": "Settings",
+      "open": "Open navigation",
+      "close": "Close navigation"
     },
     "metrics": {
       "aria": "Runner metrics",
@@ -75,7 +75,6 @@
     },
     "audit": {
       "header": {
-        "eyebrow": "Code Zero / Governance",
         "title": "Audit Log"
       },
       "table": {
@@ -152,7 +151,6 @@
     },
     "settings": {
       "header": {
-        "eyebrow": "Code Zero / Configuration",
         "title": "Settings"
       },
       "loading": "Loading the settings…",
diff --git a/packages/i18n/locales/it/dashboard.json b/packages/i18n/locales/it/dashboard.json
index acba9dba..cdebd2d5 100644
--- a/packages/i18n/locales/it/dashboard.json
+++ b/packages/i18n/locales/it/dashboard.json
@@ -2,9 +2,7 @@
   "$schema": "../../schemas/dashboard.schema.json",
   "dashboard": {
     "header": {
-      "eyebrow": "Code Zero / Operazioni",
       "title": "Piano di controllo",
-      "mode": "Interfaccia locale",
       "live": "In diretta",
       "stale": "Riconnessione",
       "liveAria": "Aggiornamenti in tempo reale connessi",
@@ -16,7 +14,9 @@
       "audit": "Registro di audit",
       "collapse": "Comprimi",
       "expand": "Espandi",
-      "settings": "Impostazioni"
+      "settings": "Impostazioni",
+      "open": "Apri la navigazione",
+      "close": "Chiudi la navigazione"
     },
     "metrics": {
       "aria": "Metriche runner",
@@ -75,7 +75,6 @@
     },
     "audit": {
       "header": {
-        "eyebrow": "Code Zero / Governance",
         "title": "Registro di audit"
       },
       "table": {
@@ -152,7 +151,6 @@
     },
     "settings": {
       "header": {
-        "eyebrow": "Code Zero / Configurazione",
         "title": "Impostazioni"
       },
       "loading": "Caricamento delle impostazioni…",
diff --git a/packages/i18n/schemas/dashboard.schema.json b/packages/i18n/schemas/dashboard.schema.json
index 2b55d79f..e5f426d4 100644
--- a/packages/i18n/schemas/dashboard.schema.json
+++ b/packages/i18n/schemas/dashboard.schema.json
@@ -10,15 +10,9 @@
         "header": {
           "type": "object",
           "properties": {
-            "eyebrow": {
-              "type": "string"
-            },
             "title": {
               "type": "string"
             },
-            "mode": {
-              "type": "string"
-            },
             "live": {
               "type": "string"
             },
@@ -54,6 +48,12 @@
             },
             "settings": {
               "type": "string"
+            },
+            "open": {
+              "type": "string"
+            },
+            "close": {
+              "type": "string"
             }
           },
           "additionalProperties": false
@@ -229,9 +229,6 @@
             "header": {
               "type": "object",
               "properties": {
-                "eyebrow": {
-                  "type": "string"
-                },
                 "title": {
                   "type": "string"
                 }
@@ -460,9 +457,6 @@
             "header": {
               "type": "object",
               "properties": {
-                "eyebrow": {
-                  "type": "string"
-                },
                 "title": {
                   "type": "string"
                 }

From 7c5f2279308d8ddcf89e1907062874f234f87e42 Mon Sep 17 00:00:00 2001
From: RedStar <redstar071@proton.me>
Date: Sun, 8 Nov 2026 19:16:43 +0100
Subject: [PATCH 2/2] fix(dashboard): keep shortcuts and the drawer footer in
 reach

Shortcuts outside the new-task dialog stand down while it is open, so
`g a` no longer navigates away from a draft and `?` no longer opens the
sheet behind the modal. The drawer now scrolls everything below the brand,
so the account and preferences stay reachable on a short screen.
---
 apps/web/app/pages/(dashboard)/index.vue      |  12 +-
 .../dashboard/components/NewTaskDialog.vue    |   6 +
 .../modules/shared/components/app/Sidebar.vue | 141 +++++++++---------
 .../shared/composables/useAppShortcuts.ts     |  16 +-
 4 files changed, 101 insertions(+), 74 deletions(-)

diff --git a/apps/web/app/pages/(dashboard)/index.vue b/apps/web/app/pages/(dashboard)/index.vue
index a3dca977..645336c8 100644
--- a/apps/web/app/pages/(dashboard)/index.vue
+++ b/apps/web/app/pages/(dashboard)/index.vue
@@ -251,16 +251,20 @@ function moveSelection(offset: number): void {
   selectedId.value = ids[next];
 }
 
+// Stands down while the new-task dialog is open, so keys meant for the form leave the board alone.
+const modalOpen = useModalDialogOpen();
+const notWhileModalOpen = { enabled: () => !modalOpen.value };
+
 // The sheet under `?` lists these; keep the two in step when either changes.
 useHotkeys([
-  { hotkey: 'J', callback: () => moveSelection(1) },
-  { hotkey: 'K', callback: () => moveSelection(-1) },
-  { hotkey: 'R', callback: refreshDashboard },
+  { hotkey: 'J', callback: () => moveSelection(1), options: notWhileModalOpen },
+  { hotkey: 'K', callback: () => moveSelection(-1), options: notWhileModalOpen },
+  { hotkey: 'R', callback: refreshDashboard, options: notWhileModalOpen },
   {
     hotkey: '/',
     callback: () => taskTable.value?.focusFilter(),
     // Otherwise the slash lands in the field it just focused.
-    options: { preventDefault: true },
+    options: { ...notWhileModalOpen, preventDefault: true },
   },
 ]);
 </script>
diff --git a/apps/web/modules/dashboard/components/NewTaskDialog.vue b/apps/web/modules/dashboard/components/NewTaskDialog.vue
index ea997f69..2f20add4 100644
--- a/apps/web/modules/dashboard/components/NewTaskDialog.vue
+++ b/apps/web/modules/dashboard/components/NewTaskDialog.vue
@@ -42,11 +42,17 @@ const open = defineModel<boolean>('open', { default: false });
 
 const dialog = useTemplateRef<HTMLDialogElement>('dialog');
 const titleId = useId();
+const modalOpen = useModalDialogOpen();
 
 watch(open, (isOpen) => {
+  modalOpen.value = isOpen;
   const element = dialog.value;
   if (!element) return;
   if (isOpen && !element.open) element.showModal();
   else if (!isOpen && element.open) element.close();
 });
+
+onBeforeUnmount(() => {
+  if (open.value) modalOpen.value = false;
+});
 </script>
diff --git a/apps/web/modules/shared/components/app/Sidebar.vue b/apps/web/modules/shared/components/app/Sidebar.vue
index 3fd790ae..f7a6396c 100644
--- a/apps/web/modules/shared/components/app/Sidebar.vue
+++ b/apps/web/modules/shared/components/app/Sidebar.vue
@@ -51,81 +51,84 @@
       </button>
     </div>
 
-    <nav
-      :aria-label="$t('dashboard.nav.aria')"
-      class="flex-1 overflow-y-auto overscroll-contain px-3 py-4"
-    >
-      <NuxtLink
-        v-for="item in navItems"
-        :key="item.key"
-        :to="item.to"
-        class="focus-ring mb-1 h-11 w-full flex items-center border-is-2 text-start text-sm font-600 transition md:h-9 md:text-xs"
-        :class="[
-          compact ? 'justify-center px-0' : 'px-3',
-          isActive(item)
-            ? 'border-accent bg-accent/8 text-ink'
-            : 'border-transparent text-muted hover:bg-raised hover:text-ink',
-        ]"
-        :aria-current="isActive(item) ? 'page' : undefined"
-        :title="compact ? $t(item.labelKey) : undefined"
-        :aria-label="compact ? $t(item.labelKey) : undefined"
-        @click="open = false"
-      >
-        <Icon
-          :name="item.icon"
-          aria-hidden="true"
-          class="h-4 w-4 shrink-0"
-          :class="[compact ? '' : 'me-2.5', isActive(item) ? 'text-accent' : '']"
-        />
-        <span v-if="!compact" class="truncate">{{ $t(item.labelKey) }}</span>
-      </NuxtLink>
-    </nav>
-
-    <ClientOnly>
-      <!-- Only rendered where the deployment actually enables organizations, as `/api/capabilities`
-           reports at runtime; the auth server enforces the same policy regardless. -->
-      <OrganizationsSwitcher v-if="!compact && enableOrganizations" />
-      <UserMenu v-if="!compact" />
-    </ClientOnly>
-
-    <!-- Preferences belong to the person, not to a page, so they sit with the account rather than
-         being repeated in every page header. -->
-    <div
-      class="flex items-center gap-2 border-t border-line"
-      :class="compact ? 'justify-center px-2 py-3' : 'p-3'"
-    >
-      <LocaleSwitcher v-if="!compact" class="min-w-0 flex-1 max-md:h-11" />
-      <ClientOnly>
-        <ColorModeToggle class="shrink-0 max-md:h-11 max-md:w-11" />
-        <template #fallback>
-          <span
-            class="h-9 w-9 shrink-0 border border-line bg-raised max-md:h-11 max-md:w-11"
+    <!-- Everything between the brand and the collapse button scrolls as one, so the account and
+         preferences stay reachable on a short screen, such as a phone held in landscape. -->
+    <div class="min-h-0 flex flex-1 flex-col overflow-y-auto overscroll-contain">
+      <nav :aria-label="$t('dashboard.nav.aria')" class="flex-1 px-3 py-4">
+        <NuxtLink
+          v-for="item in navItems"
+          :key="item.key"
+          :to="item.to"
+          class="focus-ring mb-1 h-11 w-full flex items-center border-is-2 text-start text-sm font-600 transition md:h-9 md:text-xs"
+          :class="[
+            compact ? 'justify-center px-0' : 'px-3',
+            isActive(item)
+              ? 'border-accent bg-accent/8 text-ink'
+              : 'border-transparent text-muted hover:bg-raised hover:text-ink',
+          ]"
+          :aria-current="isActive(item) ? 'page' : undefined"
+          :title="compact ? $t(item.labelKey) : undefined"
+          :aria-label="compact ? $t(item.labelKey) : undefined"
+          @click="open = false"
+        >
+          <Icon
+            :name="item.icon"
             aria-hidden="true"
+            class="h-4 w-4 shrink-0"
+            :class="[compact ? '' : 'me-2.5', isActive(item) ? 'text-accent' : '']"
           />
-        </template>
+          <span v-if="!compact" class="truncate">{{ $t(item.labelKey) }}</span>
+        </NuxtLink>
+      </nav>
+
+      <ClientOnly>
+        <!-- Only rendered where the deployment actually enables organizations, as `/api/capabilities`
+           reports at runtime; the auth server enforces the same policy regardless. -->
+        <OrganizationsSwitcher v-if="!compact && enableOrganizations" />
+        <UserMenu v-if="!compact" />
       </ClientOnly>
-    </div>
 
-    <div class="border-t border-line" :class="compact ? 'px-2 py-3' : 'p-4'">
-      <template v-if="!compact">
-        <p class="m-0 label-upper">{{ $t('common.system.label') }}</p>
-        <p class="m-0 mt-1.5 flex items-center gap-1.5 text-xs text-accent font-650">
-          <span class="h-1.5 w-1.5 rounded-full bg-accent shadow-[0_0_8px_var(--cz-accent-glow)]" />
-          {{ $t('common.system.healthy') }}
-        </p>
-        <p class="m-0 mt-3 label-upper">{{ $t('common.build.label') }}</p>
-        <!-- Sits directly under the signed-in user, where an operator reading a bug report looks
-             for what the deployment in front of them actually is. -->
-        <BuildEnvironment />
-      </template>
+      <!-- Preferences belong to the person, not to a page, so they sit with the account rather than
+         being repeated in every page header. -->
       <div
-        v-else
-        class="grid place-items-center py-1"
-        :title="$t('common.system.healthy')"
-        role="img"
-        :aria-label="`${$t('common.system.label')}: ${$t('common.system.healthy')}`"
+        class="flex items-center gap-2 border-t border-line"
+        :class="compact ? 'justify-center px-2 py-3' : 'p-3'"
       >
-        <span class="h-1.5 w-1.5 rounded-full bg-accent shadow-[0_0_8px_var(--cz-accent-glow)]" />
+        <LocaleSwitcher v-if="!compact" class="min-w-0 flex-1 max-md:h-11" />
+        <ClientOnly>
+          <ColorModeToggle class="shrink-0 max-md:h-11 max-md:w-11" />
+          <template #fallback>
+            <span
+              class="h-9 w-9 shrink-0 border border-line bg-raised max-md:h-11 max-md:w-11"
+              aria-hidden="true"
+            />
+          </template>
+        </ClientOnly>
+      </div>
+
+      <div class="border-t border-line" :class="compact ? 'px-2 py-3' : 'p-4'">
+        <template v-if="!compact">
+          <p class="m-0 label-upper">{{ $t('common.system.label') }}</p>
+          <p class="m-0 mt-1.5 flex items-center gap-1.5 text-xs text-accent font-650">
+            <span
+              class="h-1.5 w-1.5 rounded-full bg-accent shadow-[0_0_8px_var(--cz-accent-glow)]"
+            />
+            {{ $t('common.system.healthy') }}
+          </p>
+          <p class="m-0 mt-3 label-upper">{{ $t('common.build.label') }}</p>
+          <!-- Sits directly under the signed-in user, where an operator reading a bug report looks
+             for what the deployment in front of them actually is. -->
+          <BuildEnvironment />
+        </template>
+        <div
+          v-else
+          class="grid place-items-center py-1"
+          :title="$t('common.system.healthy')"
+          role="img"
+          :aria-label="`${$t('common.system.label')}: ${$t('common.system.healthy')}`"
+        >
+          <span class="h-1.5 w-1.5 rounded-full bg-accent shadow-[0_0_8px_var(--cz-accent-glow)]" />
+        </div>
       </div>
     </div>
 
diff --git a/apps/web/modules/shared/composables/useAppShortcuts.ts b/apps/web/modules/shared/composables/useAppShortcuts.ts
index f7466ccd..755466cc 100644
--- a/apps/web/modules/shared/composables/useAppShortcuts.ts
+++ b/apps/web/modules/shared/composables/useAppShortcuts.ts
@@ -46,6 +46,17 @@ export function useShortcutsDialog(): Ref<boolean> {
   return useState<boolean>('shortcuts-dialog', () => false);
 }
 
+/**
+ * Whether a native modal `dialog` (such as the new-task form) is open.
+ *
+ * `showModal()` makes the rest of the document inert, but document-wide shortcuts still fire: `g a`
+ * would navigate away and discard a draft, and `?` would open the sheet behind the modal. Every
+ * binding outside the modal stands down while this is set; the modal component sets it.
+ */
+export function useModalDialogOpen(): Ref<boolean> {
+  return useState<boolean>('modal-dialog-open', () => false);
+}
+
 /**
  * Binds the shortcuts that work on every dashboard page.
  *
@@ -58,11 +69,12 @@ export function useAppShortcuts(): void {
   const router = useRouter();
   const collapsed = useSidebarCollapsed();
   const dialogOpen = useShortcutsDialog();
+  const modalOpen = useModalDialogOpen();
 
   // Gated on the sheet being closed: it is a modal overlay, and without the guard `g a`/`g c`
   // would still navigate and `b` would still move the sidebar out from under it while the reader
   // is looking at the sheet instead of the page it would obscure.
-  const notWhileDialogOpen = { enabled: () => !dialogOpen.value };
+  const notWhileDialogOpen = { enabled: () => !dialogOpen.value && !modalOpen.value };
 
   // Vim-style prefixes: `g` then the page's initial. A sequence rather than a bare letter because
   // single letters are the scarce namespace, and navigation is the least frequent action here.
@@ -91,6 +103,8 @@ export function useAppShortcuts(): void {
       callback: () => {
         dialogOpen.value = !dialogOpen.value;
       },
+      // A native modal would leave the sheet inert behind it.
+      options: { enabled: () => !modalOpen.value },
     },
   ]);
 }