Melissa: blueprint tabular + Cadastros/Agendamentos/Pacientes + restore

Sprint E (05-05). Blueprint tabular oficial pras paginas Melissa de
listagem (DataTable + sidebar com stats e filtros coloridos, view
toggle list/grade, subheader explicativo, mobile pencil+popover).

Novo arquivo:
- blueprints/melissa-table-page-blueprint.md (~530L, 18 secoes) —
  referencia canonica MelissaCadastrosRecebidos

Paginas refatoradas/criadas:
- MelissaCadastrosRecebidos: refator pra blueprint (DataTable + frozen
  action + view toggle + subheader)
- MelissaAgendamentosRecebidos (NOVO): substitui o embed via
  MelissaEmbed; 4 status coloridos (Pendente/Autorizado/Convertido/
  Recusado), 3 acoes condicionais (Recusar/Autorizar/Converter em
  sessao), wired com AgendaEventDialog
- MelissaPacientes: refator parcial (subheader, sombras, status pills
  coloridas, email/phone colunas proprias, mobile pencil+popover, fix
  scroll mobile com min-height:0 na .mp-list, view toggle persistido,
  tags/grupos color fix g.cor->g.color, restore de arquivados)
- MelissaEmbed: agendamentos-recebidos removido do EMBED_MAP
- MelissaLayout: wire-up MelissaAgendamentosRecebidos nativo
- composables/useMelissaPacientes + useMelissaPacientesAside ajustes

Restore de pacientes arquivados:
- patientsRepository: novo restorePatient(id, { tenantId })
- PatientsCadastroPage statusOpts: +Arquivado (fecha gap de
  inconsistencia ao editar paciente arquivado)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

blueprints/melissa-table-page-blueprint.md

@@ -0,0 +1,812 @@
+# Blueprint — Melissa Table Page
+
+Padrão de página Melissa que apresenta uma **coleção tabular** (intake
+requests, médicos, recorrências, compromissos, etc.) com 2 modos de
+visualização (lista/grade), filtros laterais coloridos, busca, e
+DataTable com paginação + coluna de ação fixa.
+
+Validado em `src/layout/melissa/MelissaCadastrosRecebidos.vue`
+(referência canônica). Estende o
+[`melissa-page-blueprint.md`](./melissa-page-blueprint.md) — leia aquele
+primeiro pra entender a estrutura macro (`.xx-page` / `.xx-body` /
+`.xx-side` / `.xx-main`, drawer mobile, header).
+
+---
+
+## 1. Princípio
+
+Página de coleção = **sidebar de filtros + coluna principal com
+toolbar + visualização tabular**. O user controla:
+
+- **Busca** (texto livre — nome / email / telefone / etc.)
+- **Filtro de status** (mutualmente exclusivo, com botão "Limpar")
+- **Modo de visualização** (lista densa via DataTable ou grade de cards)
+- **Paginação** (10/20/50/100 por página)
+
+A linha tem 1 ação primária visível (botão pencil) que abre um Dialog
+com detalhes + ações secundárias (rejeitar, converter, etc.).
+
+---
+
+## 2. Estrutura do template
+
+Segue a macro do `melissa-page-blueprint.md` (drawer + backdrop + page
++ header + body com aside Teleportada). Sobre essa base, esta blueprint
+adiciona um **subheader explicativo** (logo abaixo do header, antes do
+body) e a estrutura tabular dentro da `.xx-main`:
+
+```vue
+<section class="xx-page">
+    <header class="xx-page__head">…</header>
+
+    <!-- Subheader explicativo — 1 frase de contexto sobre o que essa
+         página faz, com palavras-chave em <strong>. Diferencia páginas
+         que têm layout idêntico (ex: Cadastros Recebidos vs.
+         Agendamentos Recebidos). -->
+    <div class="xx-subheader">
+        <i class="pi pi-info-circle xx-subheader__icon" />
+        <span class="xx-subheader__text">
+            Texto descritivo da página em 1-2 frases. Use
+            <strong>palavras-chave</strong> em negrito pra destacar as
+            ações disponíveis (autorize, recuse, converta, etc.).
+        </span>
+    </div>
+
+    <div class="xx-body">…sidebar + main…</div>
+</section>
+```
+
+A diferença dentro da `.xx-main`:
+
+```vue
+<div class="xx-main">
+    <!-- A) Toolbar — busca + view toggle -->
+    <div class="xx-toolbar">
+        <div class="xx-search">
+            <i class="pi pi-search xx-search__icon" />
+            <input v-model="busca" class="xx-search__input" placeholder="…" />
+            <button v-if="busca" class="xx-search__clear" @click="busca = ''">
+                <i class="pi pi-times" />
+            </button>
+        </div>
+        <div class="xx-view-toggle" role="group" aria-label="Visualização">
+            <button :class="{ 'is-active': viewMode === 'list' }" @click="setViewMode('list')">
+                <i class="pi pi-list" />
+            </button>
+            <button :class="{ 'is-active': viewMode === 'grid' }" @click="setViewMode('grid')">
+                <i class="pi pi-th-large" />
+            </button>
+        </div>
+    </div>
+
+    <!-- B) View Lista (DataTable) -->
+    <DataTable v-if="viewMode === 'list'" … />
+
+    <!-- C) View Grade (cards em CSS grid + Paginator standalone) -->
+    <div v-else-if="viewMode === 'grid'" class="xx-grid-wrap">
+        <div class="xx-grid">
+            <div v-for="r in pagedItems" class="xx-grid__card" role="button" tabindex="0" @click="openDetails(r)">…</div>
+        </div>
+        <Paginator class="xx-paginator" :rows="rowsXX" :first="firstXX" … />
+    </div>
+</div>
+```
+
+E na sidebar (`.xx-side`), ao invés de Hoje/Pacientes/Mini-cal, tem:
+
+```vue
+<aside class="xx-side">
+    <!-- Stats (4 contadores em grid 2x2) -->
+    <div class="xx-w xx-w--side">
+        <div class="xx-w__head">
+            <span class="xx-w__title"><i class="pi pi-chart-bar" /> Estatísticas</span>
+        </div>
+        <div class="xx-stats">
+            <div v-for="s in stats" class="xx-stat" :class="`is-${s.cls}`">
+                <div class="xx-stat__val">{{ s.value }}</div>
+                <div class="xx-stat__lbl">{{ s.label }}</div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Filtros (botões coloridos por status + Limpar filtro) -->
+    <div class="xx-w xx-w--side">
+        <div class="xx-w__head">
+            <span class="xx-w__title"><i class="pi pi-filter" /> Status</span>
+            <span v-if="statusFilter" class="xx-w__count">1</span>
+        </div>
+        <div class="xx-side__list">
+            <button
+                v-for="o in STATUS_FILTER_OPTIONS"
+                class="xx-side__item"
+                :class="[`is-${o.key}`, { 'is-active': statusFilter === o.key }]"
+                @click="toggleStatusFilter(o.key)"
+            >
+                <i :class="o.icon" /><span>{{ o.label }}</span>
+            </button>
+            <Transition name="xx-clear">
+                <button v-if="statusFilter" class="xx-side__item is-clear" @click="statusFilter = ''">
+                    <i class="pi pi-filter-slash" /><span>Limpar filtro</span>
+                </button>
+            </Transition>
+        </div>
+    </div>
+</aside>
+```
+
+---
+
+## 3. Estado JS (script setup)
+
+```js
+// ── Filtros + busca ──
+const busca = ref('');
+const statusFilter = ref('');
+function toggleStatusFilter(s) {
+    statusFilter.value = statusFilter.value === s ? '' : s;
+}
+
+// ── Computeds derivados ──
+const stats = computed(() => {/* contadores por status */});
+const filtered = computed(() => {/* aplica busca + statusFilter sobre rows */});
+
+// ── Paginação compartilhada (DataTable + grid) ──
+const PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
+const rowsXX = ref(10);
+const firstXX = ref(0);
+function onPage(event) {
+    firstXX.value = event.first;
+    rowsXX.value = event.rows;
+}
+watch([busca, statusFilter], () => { firstXX.value = 0; }); // reset à pg 1
+
+// ── View mode persistido ──
+const VIEW_MODE_KEY = 'xx.viewMode.v1';
+const viewMode = ref('list');
+try {
+    const saved = localStorage.getItem(VIEW_MODE_KEY);
+    if (saved === 'list' || saved === 'grid') viewMode.value = saved;
+} catch (_) {}
+function setViewMode(m) {
+    if (m !== 'list' && m !== 'grid') return;
+    viewMode.value = m;
+    try { localStorage.setItem(VIEW_MODE_KEY, m); } catch (_) {}
+}
+
+// ── Slice da grid (DataTable pagina internamente) ──
+const pagedItems = computed(() =>
+    filtered.value.slice(firstXX.value, firstXX.value + rowsXX.value)
+);
+
+// ── Row click + ação ──
+function onRowClick(event) { if (event?.data) openDetails(event.data); }
+function rowStatusClass(data) { return statusClass(data?.status); }
+```
+
+---
+
+## 4. DataTable (view Lista) — props canônicas
+
+```vue
+<DataTable
+    v-if="viewMode === 'list'"
+    :value="filtered"
+    :loading="loading"
+    dataKey="id"
+    paginator
+    :rows="rowsXX"
+    :first="firstXX"
+    :rowsPerPageOptions="PAGE_SIZE_OPTIONS"
+    paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+    currentPageReportTemplate="{first}–{last} de {totalRecords}"
+    :rowClass="rowStatusClass"
+    selectionMode="single"
+    scrollable
+    scrollHeight="flex"
+    tableStyle="min-width: 640px"
+    class="xx-table"
+    @row-click="onRowClick"
+    @page="onPage"
+>
+    <Column header="Paciente" style="min-width: 220px">
+        <template #body="{ data }">…avatar + nome + badge…</template>
+    </Column>
+    <Column header="Contato" style="min-width: 220px">
+        <template #body="{ data }">…email + tel…</template>
+    </Column>
+    <Column header="Recebido" style="width: 130px">
+        <template #body="{ data }">…tempo relativo…</template>
+    </Column>
+
+    <!-- Coluna de ação fixa (frozen à direita) -->
+    <Column
+        header=""
+        :style="{ width: '60px', maxWidth: '60px', minWidth: '60px' }"
+        frozen
+        alignFrozen="right"
+    >
+        <template #body="{ data }">
+            <button class="xx-row__action" @click.stop="openDetails(data)">
+                <i class="pi pi-pencil" />
+            </button>
+        </template>
+    </Column>
+
+    <template #empty>…empty state contextual…</template>
+    <template #loading>…spinner inline…</template>
+</DataTable>
+```
+
+### Props críticas explicadas
+
+| Prop | Por quê |
+|---|---|
+| `:loading="loading"` | Overlay nativo do PrimeVue + slot `#loading` custom — substitui skeleton manual. |
+| `paginator + :rows + :first + @page` | Paginator embutido controlado; `firstXX` permite resetar à página 1 quando filtros mudam. |
+| `paginatorTemplate="RowsPerPageDropdown First… Last…"` | Ordem do exemplo PrimeVue 4: dropdown ANTES dos navegadores; CurrentPageReport no meio. |
+| `currentPageReportTemplate="{first}–{last} de {totalRecords}"` | i18n PT-BR. |
+| `:rowClass="rowStatusClass"` | Aplica `is-new` / `is-done` / `is-rejected` no `<tr>` → border-left colorido via CSS deep. |
+| `selectionMode="single"` | Marca visualmente a row selecionada; `@row-click` abre o dialog. |
+| `scrollable + scrollHeight="flex"` | Tabela preenche o flex restante da `.xx-main` e scrolla internamente (vertical). |
+| `tableStyle="min-width: 640px"` | Força scroll horizontal em mobile pra ativar a coluna frozen. |
+| `dataKey="id"` | Identificação estável de rows pra seleção + reactive updates. |
+
+### Coluna frozen — regras
+
+- **Última `<Column>`** do template
+- `frozen alignFrozen="right"` — fixa à direita
+- `width: 60px, maxWidth: 60px, minWidth: 60px` — todas três pra evitar reflow durante scroll
+- **`header=""`** vazio (icon do botão é auto-explicativo; tooltip cobre o resto)
+- Botão interno usa **`@click.stop`** — sem isso, o row-click do DataTable também dispararia
+
+---
+
+## 5. View Grade (cards em CSS grid)
+
+Quando `viewMode === 'grid'`, renderiza cards num grid responsivo com
+Paginator standalone abaixo (compartilha state com a list view):
+
+```vue
+<div v-else-if="viewMode === 'grid'" class="xx-grid-wrap">
+    <div v-if="loading && filtered.length === 0" class="xx-grid__loading">…</div>
+    <div v-else-if="filtered.length === 0" class="xx-empty">…</div>
+    <div v-else class="xx-grid">
+        <div
+            v-for="r in pagedItems"
+            class="xx-grid__card"
+            :class="statusClass(r.status)"
+            role="button"
+            tabindex="0"
+            @click="openDetails(r)"
+            @keydown.enter.prevent="openDetails(r)"
+            @keydown.space.prevent="openDetails(r)"
+        >
+            <div class="xx-grid__top">
+                <span class="xx-card__avatar">…</span>
+                <div class="xx-grid__top-right">
+                    <span class="xx-card__badge" :class="statusClass(r.status)">…</span>
+                    <button class="xx-row__action" @click.stop="openDetails(r)">
+                        <i class="pi pi-pencil" />
+                    </button>
+                </div>
+            </div>
+            <div class="xx-grid__name">…</div>
+            <div class="xx-grid__meta">…</div>
+            <div class="xx-grid__time">…</div>
+        </div>
+    </div>
+    <Paginator
+        v-if="filtered.length > 0"
+        class="xx-paginator"
+        :rows="rowsXX"
+        :totalRecords="filtered.length"
+        :first="firstXX"
+        :rowsPerPageOptions="PAGE_SIZE_OPTIONS"
+        template="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
+        currentPageReportTemplate="{first}–{last} de {totalRecords}"
+        @page="onPage"
+    />
+</div>
+```
+
+### Por que `<div role="button">` em vez de `<button>`?
+
+HTML não permite aninhar `<button>` em `<button>`. A grid card tem o
+botão pencil interno, então o card precisa ser um `<div>` com
+`role="button"`, `tabindex="0"` e handlers de teclado (`@keydown.enter`
++ `@keydown.space`) pra manter acessibilidade.
+
+---
+
+## 6. Tokens de surface (light/dark)
+
+A consistência visual entre **header da tabela**, **coluna frozen**, e
+**cards da sidebar** depende de usar o token certo:
+
+| Elemento | Token | Light | Dark |
+|---|---|---|---|
+| `.xx-page` (background da página) | `var(--m-bg-medium)` | branco opaco | 88% opaco (glass) |
+| `.xx-side` (sidebar) | `var(--m-bg-soft)` | surface-100 | 50% opaco |
+| `.xx-w` (cards) | `var(--m-bg-medium)` | branco opaco | 88% opaco |
+| `.xx-card` / `.xx-grid__card` (cards de linha) | `var(--m-bg-soft)` | surface-100 | 50% opaco |
+| **Header da tabela** (`.p-datatable-thead > tr > th`) | **`var(--p-content-background)`** | **branco opaco** | **surface dark configurado** |
+| **Coluna frozen** (header + body) | **`var(--p-content-background)`** | **branco opaco** | **surface dark configurado** |
+| **Botão pencil** (bg) | **`var(--p-content-background)`** | **branco opaco** | **surface dark configurado** |
+
+**Por que `--p-content-background` e não `--m-bg-medium`** pro frozen?
+No dark mode `--m-bg-medium` tem 12% de transparência (efeito glass),
+o que faz a coluna frozen vazar conteúdo de outras colunas durante
+scroll horizontal. `--p-content-background` é 100% opaco em ambos os
+modos e segue a config de surface do tema PrimeVue (token canônico de
+"superfície de card").
+
+---
+
+## 7. Cores de status (semântica + paleta)
+
+Tailwind 600 — fortes o bastante pra ler em ambos os modos:
+
+| Status | Cor | RGB | Uso |
+|---|---|---|---|
+| Novo / Pendente | 🔵 azul | `rgb(37, 99, 235)` | item recém-chegado, ação requerida |
+| Convertido / Concluído | 🟢 verde | `rgb(22, 163, 74)` | sucesso, finalizado |
+| Rejeitado / Cancelado | 🔴 vermelho | `rgb(220, 38, 38)` | descartado, falha |
+
+**Aplicação consistente** em 4 lugares por status:
+
+1. **Stat value** (`.xx-stat.is-info / is-ok / is-danger`) — número colorido
+2. **Filtro lateral** (`.xx-side__item.is-X`) — bg/border/ícone tinted (3 níveis: default 5% / hover 10% / active 16% + ring)
+3. **Border-left da row** (`.xx-table tr.is-X`) — 3px sólido na cor
+4. **Badge** (`.xx-card__badge.is-X`) — pill colorido no card/row
+
+Variável `cls` no objeto stats:
+
+```js
+{ key: 'new',       label: 'Novos',       value: n, cls: n > 0 ? 'info' : 'neutral' },
+{ key: 'converted', label: 'Convertidos', value: c, cls: 'ok' },
+{ key: 'rejected',  label: 'Rejeitados',  value: r, cls: r > 0 ? 'danger' : 'neutral' },
+```
+
+**Não usar `is-warn`** (amarelo) pra "Novo" — semanticamente novo é
+informativo, não alerta.
+
+---
+
+## 8. Filtro de status — botões + "Limpar filtro"
+
+3 botões coloridos (Novo / Convertido / Rejeitado) + 4º botão
+**"Limpar filtro"** que aparece com `<Transition name="xx-clear">`
+quando algum filtro está ativo:
+
+```css
+.xx-side__item.is-clear {
+    margin-top: 4px;
+    background: var(--m-bg-soft);
+    border-color: var(--m-border);
+    color: var(--m-text-muted);
+    font-style: italic;
+}
+
+/* Fade + slide vertical + collapse de altura */
+.xx-clear-enter-active,
+.xx-clear-leave-active {
+    transition: opacity 220ms ease, transform 220ms ease,
+                max-height 220ms ease, margin-top 220ms ease;
+    overflow: hidden;
+}
+.xx-clear-enter-from,
+.xx-clear-leave-to {
+    opacity: 0;
+    transform: translateY(-4px);
+    max-height: 0;
+    margin-top: 0;
+}
+.xx-clear-enter-to,
+.xx-clear-leave-from {
+    opacity: 1;
+    transform: translateY(0);
+    max-height: 40px;
+}
+```
+
+**Estilo neutro/itálico** (não colorido) pra distinguir dos 3 botões
+de filtro coloridos. Ícone `pi pi-filter-slash`.
+
+---
+
+## 9. Subheader explicativo
+
+Faixa estreita abaixo do `xx-page__head`, antes do `xx-body`. Tem 2
+papéis:
+
+1. **Diferenciar páginas** que têm o mesmo layout (Cadastros Recebidos
+   vs. Agendamentos Recebidos parecem visualmente idênticos sem isso)
+2. **Resumir as ações** disponíveis pra reduzir cliques exploratórios
+   do user
+
+```css
+.xx-subheader {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 10px 18px;
+    border-bottom: 1px solid var(--m-border);
+    background: var(--m-bg-soft);
+    font-size: 0.78rem;
+    color: var(--m-text-muted);
+    line-height: 1.45;
+    flex-shrink: 0;
+}
+.xx-subheader__icon {
+    color: var(--p-primary-color);
+    font-size: 0.92rem;
+    flex-shrink: 0;
+    margin-top: 1px;
+}
+.xx-subheader__text {
+    flex: 1;
+    min-width: 0;
+}
+.xx-subheader__text strong {
+    color: var(--m-text);
+    font-weight: 600;
+}
+```
+
+### Convenção do texto
+
+- 1-2 frases curtas (~20-30 palavras max)
+- Inicia descrevendo a fonte/origem dos dados ("Solicitações vindas
+  de...", "Cadastros enviados por...")
+- Termina enumerando as ações principais com `<strong>`
+  (`autorize`, `recuse`, `converta`)
+- Tom direto, sem formalidade excessiva ("a gente cria o paciente
+  automaticamente" ✓ vs. "o sistema procederá com a criação" ✗)
+- Ícone fixo: `pi pi-info-circle` em primary
+
+### Exemplos validados
+
+**Cadastros Recebidos:**
+> Cadastros completos enviados por pacientes via formulário externo
+> (link público). Revise os dados, **converta em paciente ativo** com
+> 1 clique ou **rejeite** com motivo opcional.
+
+**Agendamentos Recebidos:**
+> Solicitações de horário vindas do agendador online à espera de ação.
+> **Autorize** pra reservar o slot, **recuse** com motivo, ou
+> **converta direto em sessão** — a gente cria o paciente
+> automaticamente se ainda não existir.
+
+---
+
+## 10. Toolbar — busca + view toggle (no main column)
+
+```css
+.xx-toolbar {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.xx-search {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+}
+.xx-search__input {
+    width: 100%;
+    background: var(--m-bg-medium);
+    border: 1px solid var(--m-border);
+    padding: 9px 36px 9px 34px; /* espaço pro ícone esq + clear dir */
+    border-radius: 10px;
+}
+.xx-search__icon { position: absolute; left: 12px; }
+.xx-search__clear { position: absolute; right: 8px; }
+
+/* Segmented control list/grid */
+.xx-view-toggle {
+    flex-shrink: 0;
+    display: inline-flex;
+    background: var(--m-bg-medium);
+    border: 1px solid var(--m-border);
+    border-radius: 10px;
+    padding: 2px;
+    gap: 2px;
+}
+.xx-view-toggle__btn {
+    width: 32px; height: 32px;
+    background: transparent;
+    border: none;
+    border-radius: 8px;
+}
+.xx-view-toggle__btn.is-active {
+    background: var(--m-accent-soft);
+    color: var(--m-accent);
+}
+```
+
+A **busca está no main column** (não na sidebar). Esta é a regra do
+blueprint — sidebar só tem stats + filtros; busca + toggle ficam acima
+da tabela.
+
+---
+
+## 11. DataTable — estilos de header, rows, paginator
+
+```css
+/* Wrapper que faz a DataTable ocupar o flex restante */
+.xx-table {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+}
+.xx-table :deep(.p-datatable) {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    background: transparent;
+    border: 1px solid var(--m-border);
+    border-radius: 10px;
+    overflow: hidden;
+}
+.xx-table :deep(.p-datatable-table-container) {
+    flex: 1;
+    min-height: 0;
+    background: transparent;
+}
+
+/* Header — totalmente transparente nos níveis externos, surface no <th> */
+.xx-table :deep(.p-datatable-thead),
+.xx-table :deep(.p-datatable-thead > tr) {
+    background: transparent !important;
+}
+.xx-table :deep(.p-datatable-thead > tr > th) {
+    background: var(--p-content-background) !important; /* canônico */
+    color: var(--m-text);
+    font-size: 0.78rem;
+    font-weight: 700; /* negrito */
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--m-border);
+}
+
+/* Rows */
+.xx-table :deep(.p-datatable-tbody > tr) {
+    background: transparent;
+    cursor: pointer;
+    border-left: 3px solid var(--m-border); /* default neutro */
+    transition: background-color 140ms ease;
+}
+.xx-table :deep(.p-datatable-tbody > tr > td) {
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--m-border);
+    background: transparent;
+    vertical-align: middle;
+}
+.xx-table :deep(.p-datatable-tbody > tr:hover) { background: var(--m-bg-soft-hover); }
+.xx-table :deep(.p-datatable-tbody > tr.p-datatable-row-selected) {
+    background: var(--m-accent-soft);
+}
+
+/* Border-left colorido por status — espelha .ma-sess do MelissaAgenda */
+.xx-table :deep(tr.is-new)      { border-left-color: rgb(37, 99, 235); }
+.xx-table :deep(tr.is-done)     { border-left-color: rgb(22, 163, 74); }
+.xx-table :deep(tr.is-rejected) { border-left-color: rgb(220, 38, 38); opacity: 0.85; }
+
+/* Coluna frozen — mesma surface do header */
+.xx-table :deep(td.p-datatable-frozen-column),
+.xx-table :deep(th.p-datatable-frozen-column) {
+    background: var(--p-content-background) !important;
+    box-shadow: -3px 0 6px -3px rgba(0, 0, 0, 0.18);
+    z-index: 1;
+}
+.xx-table :deep(.p-datatable-tbody > tr:hover td.p-datatable-frozen-column) {
+    background: var(--m-bg-soft-hover);
+}
+.xx-table :deep(.p-datatable-tbody > tr.p-datatable-row-selected td.p-datatable-frozen-column) {
+    background: var(--m-accent-soft);
+}
+
+/* Paginator integrado — centralizado, sem refresh à esquerda */
+.xx-table :deep(.p-paginator) {
+    background: var(--m-bg-medium);
+    border: none;
+    border-top: 1px solid var(--m-border);
+    padding: 8px 12px;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+.xx-table :deep(.p-paginator-current) {
+    color: var(--m-text-muted);
+    font-size: 0.78rem;
+    background: transparent;
+    border: none;
+}
+.xx-table :deep(.p-paginator-page.p-paginator-page-selected) {
+    background: var(--m-accent-soft);
+    border-color: var(--m-accent-strong);
+    color: var(--m-accent);
+}
+
+/* Select de "rows per page" — bg transparente + label centralizado */
+.xx-table :deep(.p-select) {
+    background: transparent;
+    border: 1px solid var(--m-border);
+    border-radius: 8px;
+    height: 30px;
+    display: inline-flex;
+    align-items: center;
+}
+.xx-table :deep(.p-select-label) {
+    padding: 0 8px;
+    color: var(--m-text);
+    font-size: 0.78rem;
+    display: flex;
+    align-items: center;
+    line-height: 1;
+    height: 100%;
+    background: transparent;
+}
+```
+
+---
+
+## 12. Botão de ação (pencil) — coluna fixa
+
+```css
+.xx-row__action {
+    width: 30px; height: 30px;
+    display: grid;
+    place-items: center;
+    background: var(--p-content-background); /* opaco — não vaza no scroll */
+    border: 1px solid color-mix(in srgb, var(--p-primary-color) 30%, var(--m-border));
+    color: var(--p-primary-color); /* primary do tema */
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
+}
+.xx-row__action:hover {
+    background: color-mix(in srgb, var(--p-primary-color) 12%, var(--p-content-background));
+    border-color: var(--p-primary-color);
+}
+```
+
+Reutilizável **na list view (dentro da coluna frozen)** e **na grid
+view (dentro do `.xx-grid__top-right`)** — mesma classe, mesmo visual.
+
+---
+
+## 13. Empty / loading
+
+Ambos via slot do DataTable + replicados na grid view:
+
+```vue
+<template #empty>
+    <div class="xx-empty">
+        <i class="pi pi-inbox xx-empty__icon" />
+        <div class="xx-empty__title">Nenhum cadastro encontrado</div>
+        <div class="xx-empty__hint">
+            <template v-if="busca || statusFilter">Ajuste os filtros pra ver mais.</template>
+            <template v-else>… mensagem default contextual …</template>
+        </div>
+    </div>
+</template>
+
+<template #loading>
+    <div class="xx-table__loading">
+        <i class="pi pi-spin pi-spinner" />
+        <span>Carregando…</span>
+    </div>
+</template>
+```
+
+```css
+.xx-empty {
+    margin: 24px 0;
+    padding: 56px 28px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    color: var(--m-text-muted);
+    border: 2px dashed var(--m-border-strong);
+    border-radius: 12px;
+    background: color-mix(in srgb, var(--m-bg-soft) 40%, transparent);
+    gap: 8px;
+}
+.xx-empty__icon { font-size: 2rem; opacity: 0.6; }
+.xx-empty__title { font-size: 0.92rem; font-weight: 600; }
+.xx-empty__hint { font-size: 0.78rem; }
+```
+
+---
+
+## 14. Mobile (<1024px)
+
+A sidebar é Teleportada pro drawer (já documentado em
+`melissa-page-blueprint.md`). Específico desta página:
+
+```css
+@media (max-width: 1023px) {
+    .xx-body { flex-direction: column; padding: 0; }
+    .xx-main { width: 100%; padding: 8px; }
+    .xx-page__title > span:first-of-type { display: none; }
+    .xx-menu-btn--mobile-only { display: inline-flex; }
+
+    /* IMPORTANTE: NÃO esconder colunas em mobile.
+       O scroll horizontal (via tableStyle min-width:640px) cuida
+       do overflow, e a coluna frozen "Ação" continua visível na
+       borda direita enquanto o user scrolla as outras. */
+    /* (sem display: none em qualquer th/td) */
+
+    /* Reset do bg/border-right da sidebar quando teleportada */
+    .xx-mobile-drawer__scroll .xx-side {
+        background: transparent;
+        border-right: none;
+    }
+}
+```
+
+---
+
+## 15. Acessibilidade
+
+- `role="button" tabindex="0"` no card grid + `@keydown.enter.prevent` + `@keydown.space.prevent`
+- `:focus-visible { outline: 2px solid var(--p-primary-color); outline-offset: 2px; }` nos cards
+- `aria-label` em todos os icon-only buttons (pencil, view toggle, search clear)
+- `v-tooltip` complementa visualmente (não substitui aria-label)
+
+---
+
+## 16. Checklist de adoção
+
+Ao criar uma nova página tabular Melissa (ex: MelissaCompromissos):
+
+- [ ] Renomeia `xx` → prefixo da página (`mco`, `mmd`, `mcv` etc.)
+- [ ] Define `STATUS_FILTER_OPTIONS` com 3 keys/labels/icons
+- [ ] Define `stats` computed retornando 4 itens (total + 3 status) com `cls` correto
+- [ ] Implementa `filtered` computed (busca + statusFilter)
+- [ ] Adiciona `rowsXX/firstXX/onPage` + watch reset
+- [ ] Adiciona `viewMode` com persistência (`xx.viewMode.v1`)
+- [ ] Adiciona `pagedItems` computed (slice pra grid)
+- [ ] Adiciona `onRowClick + rowStatusClass`
+- [ ] Adiciona `openDetails(r)` que abre o Dialog
+- [ ] **Subheader explicativo** abaixo do `xx-page__head` (1-2 frases, fonte/origem + ações com `<strong>`, ícone `pi pi-info-circle`)
+- [ ] Template: drawer + backdrop + page + header + **subheader** + body + sidebar (stats + filtros + clear) + main (toolbar + DataTable + grid)
+- [ ] DataTable: `:loading + paginator + scrollable + scrollHeight="flex" + tableStyle="min-width: 640px"`
+- [ ] Coluna frozen Ação: `width 60px + frozen alignFrozen="right"` + button pencil com `@click.stop`
+- [ ] Grid card: `<div role="button" tabindex="0">` + handlers de teclado
+- [ ] CSS: tokens `--p-content-background` em header, frozen, e botão pencil
+- [ ] Mobile: NÃO esconder colunas; scroll horizontal via `tableStyle min-width`
+
+---
+
+## 17. Anti-patterns (NÃO fazer)
+
+- ❌ **Busca na sidebar** — sempre no topo do main, ao lado do view toggle
+- ❌ **`display: none` em colunas no mobile** — usar scroll horizontal + frozen
+- ❌ **`<button>` envolvendo card no grid** — quebra HTML quando tem pencil interno; usar `<div role="button">`
+- ❌ **`var(--m-bg-medium)` na coluna frozen no dark** — tem 12% transparência, vaza scroll. Usar `var(--p-content-background)`
+- ❌ **`text-amber-300` Tailwind hardcoded** no ícone do header da página — usar `color: var(--p-primary-color)` via classe
+- ❌ **`cls: 'warn'` pra "Novo"** — semanticamente errado (warn = aviso amarelo, novo = info azul)
+- ❌ **Paginator com `#paginatorstart` slot duplicando refresh** — refresh já vive no header da página; centralizar o paginator (sem paginatorstart)
+- ❌ **Skeleton manual + `carregandoInicial` na lista** — DataTable tem `:loading` nativo
+- ❌ **`pageMCR + filteredPaginated` manual** — DataTable pagina internamente; só usa `firstXX/rowsXX` compartilhado
+- ❌ **Border-left só em `is-new`** — todos os 3 status devem ter border-left colorido (consistência visual)
+- ❌ **Misturar opacidade pesada (0.55, 0.75) com border colorido** — escolher uma estratégia; preferir border + opacidade leve (0.85 max)
+
+---
+
+## 18. Referência canônica
+
+`src/layout/melissa/MelissaCadastrosRecebidos.vue` — implementação 1:1
+deste blueprint. Quando dúvida, abrir esse arquivo lado-a-lado e
+copiar o padrão exato (variáveis, ordem dos templates, tokens CSS).
+
+Próximas adoções planejadas: `MelissaCompromissos`, `MelissaMedicos`,
+`MelissaConversas`, `MelissaRecorrencias`, `MelissaTags`,
+`MelissaGrupos` — todas seguem este blueprint.

src/features/patients/cadastro/PatientsCadastroPage.vue

@@ -746,7 +746,7 @@ const escolaridadeOpts = [
   { label:'Prefere não informar',         value:'Prefere não informar'         },
 ]
 const canalOpts     = [{ label:'WhatsApp',value:'WhatsApp' },{ label:'Telefone',value:'Telefone' },{ label:'E-mail',value:'E-mail' },{ label:'SMS',value:'SMS' }]
-const statusOpts    = [{ label:'Ativo',value:'Ativo' },{ label:'Em espera',value:'Em espera' },{ label:'Inativo',value:'Inativo' },{ label:'Alta',value:'Alta' }]
+const statusOpts    = [{ label:'Ativo',value:'Ativo' },{ label:'Em espera',value:'Em espera' },{ label:'Inativo',value:'Inativo' },{ label:'Alta',value:'Alta' },{ label:'Arquivado',value:'Arquivado' }]
 const scopeOpts     = [{ label:'Clínica',value:'Clínica' },{ label:'Particular',value:'Particular' },{ label:'Online',value:'Online' },{ label:'Híbrido',value:'Híbrido' }]
 const tipoContatoOpts = [{ label:'Emergência',value:'emergencia' },{ label:'Familiar',value:'familiar' },{ label:'Profissional de saúde',value:'profissional_saude' },{ label:'Amigo(a)',value:'amigo' },{ label:'Outro',value:'outro' }]
 

src/features/patients/services/patientsRepository.js

@@ -95,6 +95,22 @@ export async function softDeletePatient(id, { tenantId } = {}) {
     if (error) throw error;
 }
 
+/**
+ * Restaura um paciente arquivado — volta status pra 'Ativo'.
+ * Inverso explícito do softDeletePatient. Uso: botão "Restaurar"
+ * que aparece nas ações quando p.status === 'Arquivado'.
+ */
+export async function restorePatient(id, { tenantId } = {}) {
+    if (!id) throw new Error('id obrigatório');
+    assertTenantId(tenantId);
+    const { error } = await supabase
+        .from('patients')
+        .update({ status: 'Ativo' })
+        .eq('id', id)
+        .eq('tenant_id', tenantId);
+    if (error) throw error;
+}
+
 // ─────────────────────────────────────────────────────────────────────────
 // Groups
 // -----------------------------------------------------------------------------

src/layout/melissa/MelissaEmbed.vue

@@ -53,12 +53,9 @@ const EMBED_MAP = {
         icon: 'pi pi-file-edit',
         comp: defineAsyncComponent(() => import('@/features/documents/DocumentTemplatesPage.vue'))
     },
-    'agendamentos-recebidos': {
-        label: 'Agendamentos recebidos',
-        desc: 'Solicitações vindas do agendador online à espera de confirmação.',
-        icon: 'pi pi-inbox',
-        comp: defineAsyncComponent(() => import('@/features/agenda/pages/AgendamentosRecebidosPage.vue'))
-    },
+    // 'agendamentos-recebidos' migrou pra Melissa Page nativa
+    // (MelissaAgendamentosRecebidos.vue) — segue o blueprint
+    // melissa-table-page-blueprint.md. Removido do embed map.
     'online-scheduling': {
         label: 'Agendador online',
         desc: 'Configure o link público pra pacientes solicitarem horários.',

src/layout/melissa/MelissaLayout.vue

@@ -35,6 +35,7 @@ import MelissaGrupos from './MelissaGrupos.vue';
 import MelissaConfiguracoes from './MelissaConfiguracoes.vue';
 import MelissaEmbed from './MelissaEmbed.vue';
 import MelissaCadastrosRecebidos from './MelissaCadastrosRecebidos.vue';
+import MelissaAgendamentosRecebidos from './MelissaAgendamentosRecebidos.vue';
 import MelissaMedicos from './MelissaMedicos.vue';
 import MelissaEventoPanel from './MelissaEventoPanel.vue';
 import { TOQUES, playToque } from './melissaToques';
@@ -42,6 +43,7 @@ import { useMelissaPacientes } from './composables/useMelissaPacientes';
 import { useMelissaEventosHoje } from './composables/useMelissaEventos';
 import { useMelissaWhatsapp } from './composables/useMelissaWhatsapp';
 import { useMelissaAgenda, MELISSA_AGENDA_KEY } from './composables/useMelissaAgenda';
+import { useMelissaDockPins } from './composables/useMelissaDockPins';
 import { supabase } from '@/lib/supabase/client';
 import { useConversationDrawerStore } from '@/stores/conversationDrawerStore';
 import ConversationDrawer from '@/components/conversations/ConversationDrawer.vue';
@@ -56,10 +58,53 @@ import { useNotificationStore } from '@/stores/notificationStore';
 import { useAjuda } from '@/composables/useAjuda';
 import { useTopbarPlanMenu } from '@/composables/useTopbarPlanMenu';
 
-// Pacientes ativos do tenant (real, via Supabase)
-const { pacientes: pacientesReais, loading: pacientesLoading, refetch: refetchPacientes } = useMelissaPacientes();
-// Eventos reais de hoje — alimenta timeline + cards + busca + "Hoje há"
-const { eventos: eventosHojeReais, refetch: refetchEventosHoje } = useMelissaEventosHoje();
+// Pacientes + eventos do dia.
+//
+// PERF: quando o usuário entra direto numa seção (`/melissa/agenda`,
+// `/melissa/pacientes`...), o resumo fica tapado pelo conteúdo da seção.
+// Carregar os dois loaders na hora competiria com as queries da seção
+// (que é o que o user efetivamente vai ver). Adiamos os loaders do
+// resumo pra rodarem em background via `requestIdleCallback` quando a
+// rota inicial já tem seção. Quando o user fecha a seção (volta pro
+// resumo), o cache provavelmente já tá quente — se não estiver, o
+// loading aparece naturalmente.
+//
+// CACHE: composables usam stale-while-revalidate via melissaCacheStore.
+// Reabertura do Melissa na mesma sessão SPA é instantânea.
+// Snapshot da rota no setup pra detectar deep-link com seção já no boot.
+// (`route` reativo é declarado mais abaixo, mas só precisamos do params
+// inicial aqui — `setup` roda 1× por mount, params do router já estão
+// resolvidos nesse ponto.)
+const _hasInitialSecao = !!useRoute().params?.secao;
+const {
+    pacientes: pacientesReais,
+    loading: pacientesLoading,
+    refetch: refetchPacientes,
+    fetchCached: fetchPacientesCached
+} = useMelissaPacientes({ autoFetch: !_hasInitialSecao });
+const {
+    eventos: eventosHojeReais,
+    refetch: refetchEventosHoje,
+    fetchCached: fetchEventosHojeCached
+} = useMelissaEventosHoje({ autoFetch: !_hasInitialSecao });
+
+// Defer manual quando a rota inicial é uma seção: agenda os fetches do
+// resumo pra rodarem após a seção montar (idle callback) — fetchCached
+// usa stale-while-revalidate, então não tomba o cache. setTimeout 200
+// como fallback pra navegadores sem requestIdleCallback (Safari < 16).
+if (_hasInitialSecao) {
+    const _idleFetch = () => {
+        fetchPacientesCached();
+        fetchEventosHojeCached();
+    };
+    if (typeof window !== 'undefined') {
+        if (typeof window.requestIdleCallback === 'function') {
+            window.requestIdleCallback(_idleFetch, { timeout: 1500 });
+        } else {
+            setTimeout(_idleFetch, 200);
+        }
+    }
+}
 
 // ───────────────────────────────────────────────────────────────
 // Catálogo de cards do resumo (extensível — novos cards entram aqui)
@@ -129,14 +174,14 @@ const SECOES = {
 };
 
 // Set de keys que renderizam via MelissaEmbed (Onda 1 — pages 1-coluna)
-const MELISSA_EMBED_KEYS = ['financeiro', 'financeiro-lancamentos', 'documentos', 'documentos-templates', 'agendamentos-recebidos', 'online-scheduling', 'relatorios', 'notificacoes', 'link-externo'];
+const MELISSA_EMBED_KEYS = ['financeiro', 'financeiro-lancamentos', 'documentos', 'documentos-templates', 'online-scheduling', 'relatorios', 'notificacoes', 'link-externo'];
 
 // Slugs reservados pra páginas dedicadas (não-config) — agenda, pacientes,
 // conversas etc. + as MELISSA_EMBED_KEYS. Usado no isConfigRoute pra
 // evitar colisão (ex: /melissa/agenda → MelissaAgenda, não config).
 const MELISSA_NON_CONFIG_SLUGS = new Set([
     'agenda', 'pacientes', 'compromissos', 'recorrencias', 'conversas',
-    'tags', 'grupos', 'cadastros-recebidos', 'medicos',
+    'tags', 'grupos', 'cadastros-recebidos', 'medicos', 'agendamentos-recebidos',
     ...MELISSA_EMBED_KEYS
 ]);
 // Aliases "bonitos" + INLINE_KEYS reconhecidos pelo MelissaConfiguracoes.
@@ -171,6 +216,17 @@ const secaoAberta = computed(() => {
     return null;
 });
 
+// Quando o usuário fecha a seção e volta pro resumo, garante que os
+// dados estão prontos (caso o idle callback ainda não tenha disparado
+// no fluxo deep-link). fetchCached é idempotente: cache hit → instant,
+// cache miss → fetch real. Sem cache, não dispara nada estranho.
+watch(secaoAberta, (newVal, oldVal) => {
+    if (oldVal && !newVal) {
+        fetchPacientesCached();
+        fetchEventosHojeCached();
+    }
+});
+
 function abrirSecao(key) {
     // Fecha overlays paralelos pra evitar empilhamento
     workspaceOpen.value = false;
@@ -183,6 +239,74 @@ function fecharSecao() {
     router.push({ name: 'Melissa', params: {} });
 }
 
+// ── Pins dinâmicos do dock (híbrido: 4 fixos + 3 MRU) ──────────
+const dockPins = useMelissaDockPins();
+const pinContextMenu = ref(null);
+const pinContextSlug = ref('');
+
+// Toda vez que a seção muda, registra como "recente" no dock (se não
+// for builtin nem pinned). Slugs de configuração (cfg-*) também viram
+// recent — útil quando o user fica navegando entre páginas de config.
+watch(secaoAberta, (slug) => {
+    if (slug) dockPins.pushRecent(slug);
+});
+
+function openPinContextMenu(event, slug) {
+    event.preventDefault();
+    event.stopPropagation();
+    pinContextSlug.value = slug;
+    pinContextMenu.value?.show(event);
+}
+
+const pinContextMenuItems = computed(() => {
+    const slug = pinContextSlug.value;
+    if (!slug) return [];
+    const isPinned = dockPins.isPinned(slug);
+    const items = [];
+    if (isPinned) {
+        items.push({
+            label: 'Desafixar',
+            icon: 'pi pi-bookmark',
+            command: () => dockPins.unpin(slug)
+        });
+    } else {
+        items.push({
+            label: 'Fixar no dock',
+            icon: 'pi pi-bookmark-fill',
+            command: () => {
+                const result = dockPins.pin(slug);
+                if (!result.ok && result.reason === 'full') {
+                    toast.add({
+                        severity: 'warn',
+                        summary: 'Limite atingido',
+                        detail: `Você pode fixar até ${dockPins.MAX_PINNED} atalhos. Desafixe um pra liberar espaço.`,
+                        life: 3500
+                    });
+                }
+            }
+        });
+    }
+    items.push({ separator: true });
+    items.push({
+        label: 'Remover do dock',
+        icon: 'pi pi-times',
+        command: () => dockPins.remove(slug)
+    });
+    return items;
+});
+
+// Resolve label/ícone a partir do slug pra renderizar no pin.
+// Usa o catálogo SECOES (já existente) — fallback genérico se slug
+// for de uma rota cfg-* (configurações embeds).
+function pinMeta(slug) {
+    const fromSecoes = SECOES[slug];
+    if (fromSecoes) return { label: fromSecoes.label, icon: fromSecoes.icon };
+    if (slug?.startsWith('cfg-')) {
+        return { label: 'Configuração', icon: 'pi pi-cog' };
+    }
+    return { label: slug, icon: 'pi pi-bookmark' };
+}
+
 // Prefs de layout/UI (toque, fundo, opacidade, formato hora)
 // TODO: migrar pra configs do tenant — hoje só localStorage pra survive refresh
 const LAYOUT_STORAGE_KEY = 'melissa.layout.v1';
@@ -619,14 +743,23 @@ function onConcluir()  { updateEventoStatus('realizado', 'Sessão marcada como r
 function onFaltou()    { updateEventoStatus('faltou', 'Marcada como falta'); }
 function onCancelar()  { updateEventoStatus('cancelado', 'Evento cancelado'); }
 
-function onWhatsapp() {
+async function onWhatsapp() {
     const ev = eventoSelecionado.value;
     if (!ev?.patient_id) {
         toast.add({ severity: 'warn', summary: 'Paciente sem id', life: 2200 });
         return;
     }
-    conversationDrawerStore.openForPatient(String(ev.patient_id));
+    const patientId = String(ev.patient_id);
     fecharEvento();
+    // openForPatient é async — busca thread existente ou cria stub.
+    // Se paciente não tem telefone (ou outro erro), o store seta `error`
+    // e mantém `isOpen=false` silenciosamente. Aguardamos pra dar feedback.
+    await conversationDrawerStore.openForPatient(patientId);
+    if (!conversationDrawerStore.isOpen) {
+        const detail = conversationDrawerStore.error?.message || 'Não foi possível abrir a conversa.';
+        toast.add({ severity: 'warn', summary: 'WhatsApp', detail, life: 3500 });
+        conversationDrawerStore.error = null;
+    }
 }
 
 // ── Pending agenda actions ────────────────────────────────────
@@ -666,8 +799,31 @@ function onAbrirProntuario() {
 }
 
 function onHistoricoSessoes() {
+    const ev = eventoSelecionado.value;
+    if (!ev?.patient_id) {
+        toast.add({ severity: 'warn', summary: 'Paciente não vinculado', life: 2200 });
+        return;
+    }
+    const patientId = ev.patient_id;
     fecharEvento();
-    _callOnAgenda((agenda) => agenda.setView?.('lista'));
+    // Abre a Agenda (se não estiver) e dispara o overlay "Todas as sessões"
+    // filtrado pelo paciente — mesmo fluxo do botão Sessões em .ma-dock-actions.
+    _callOnAgenda((agenda) => agenda.openSessoesPaciente?.(patientId));
+}
+
+// Editar cadastro do paciente vinculado à sessão. Difere de onEditEvento
+// (que abre o AgendaEventDialog pra mexer na sessão em si). Reusa o
+// PatientCadastroDialog já montado dentro do MelissaAgenda via método
+// exposto openEditPatient.
+function onEditPaciente() {
+    const ev = eventoSelecionado.value;
+    if (!ev?.patient_id) {
+        toast.add({ severity: 'warn', summary: 'Paciente não vinculado', life: 2200 });
+        return;
+    }
+    const patientId = ev.patient_id;
+    fecharEvento();
+    _callOnAgenda((agenda) => agenda.openEditPatient?.(patientId));
 }
 
 async function onEditEvento() {
@@ -1178,10 +1334,20 @@ function onKeydown(e) {
     }
 
     if (e.key !== 'Escape') return;
+    // Bail-out: se há um overlay PrimeVue (Dialog/Drawer) aberto, deixa
+    // o componente cuidar do ESC pelo seu próprio closeOnEscape. Sem
+    // este guard, o ESC fechava o overlay E uma camada do cascade —
+    // o usuário via "duas janelas fechando" (drawer WhatsApp + agenda,
+    // AgendaEventDialog + evento panel, ConfirmDialog + workspace, etc).
+    if (document.querySelector('.p-dialog-mask, .p-drawer-mask')) return;
+
+    // Cascata top-down do z-order — ESC fecha SOMENTE a camada do topo.
+    // Ordem (mais sobreposto → menos): central modal > evento panel >
+    // cronômetro > seção (agenda/pacientes/etc) > workspace > settings.
     if (centralOpen.value) centralOpen.value = false;
-    else if (secaoAberta.value) fecharSecao();
     else if (eventoSelecionado.value) fecharEvento();
     else if (cronoVisible.value) fecharCronometro();
+    else if (secaoAberta.value) fecharSecao();
     else if (workspaceOpen.value) closeWorkspace();
     else if (settingsOpen.value) settingsOpen.value = false;
 }
@@ -1774,7 +1940,7 @@ function onKeydown(e) {
                 type="button"
                 class="dock-pin"
                 v-tooltip.top="'WhatsApp'"
-                :class="{ 'dock-pin--active': secaoAtual === 'conversas' }"
+                :class="{ 'dock-pin--active': secaoAberta === 'conversas' }"
                 @click="abrirSecao('conversas')"
             >
                 <i class="pi pi-whatsapp" />
@@ -1784,6 +1950,46 @@ function onKeydown(e) {
                     :title="`${whatsappPendente.count} mensagens não lidas`"
                 >{{ whatsappPendente.count > 99 ? '99+' : whatsappPendente.count }}</span>
             </button>
+
+            <!-- Divisor entre builtins e pins dinâmicos. Só aparece se
+                 o user tem pelo menos 1 pin (fixo ou recente). -->
+            <div
+                v-if="dockPins.pinned.value.length || dockPins.recent.value.length"
+                class="dock-divider"
+                aria-hidden="true"
+            />
+
+            <!-- Pins fixados pelo user (max 4). Click direito → menu
+                 desafixar/remover. Hover mostra subtle ring. -->
+            <button
+                v-for="slug in dockPins.pinned.value" :key="`p-${slug}`"
+                type="button"
+                class="dock-pin dock-pin--user"
+                :class="{ 'dock-pin--active': secaoAberta === slug }"
+                v-tooltip.top="pinMeta(slug).label + ' (fixado)'"
+                @click="abrirSecao(slug)"
+                @contextmenu="openPinContextMenu($event, slug)"
+            >
+                <i :class="pinMeta(slug).icon" />
+                <span class="dock-pin__pinned-mark" aria-hidden="true" />
+            </button>
+
+            <!-- Pins MRU (max 3) — empurrados pelas últimas seções abertas.
+                 Visual mais leve (opacity menor) pra destacar dos fixos. -->
+            <button
+                v-for="slug in dockPins.recent.value" :key="`r-${slug}`"
+                type="button"
+                class="dock-pin dock-pin--recent"
+                :class="{ 'dock-pin--active': secaoAberta === slug }"
+                v-tooltip.top="pinMeta(slug).label + ' (recente — clique direito pra fixar)'"
+                @click="abrirSecao(slug)"
+                @contextmenu="openPinContextMenu($event, slug)"
+            >
+                <i :class="pinMeta(slug).icon" />
+            </button>
+
+            <!-- Menu de contexto dos pins dinâmicos (popup global) -->
+            <Menu ref="pinContextMenu" :model="pinContextMenuItems" :popup="true" />
         </div>
 
 
@@ -1812,7 +2018,8 @@ function onKeydown(e) {
                 @faltou="onFaltou"
                 @cancelar="onCancelar"
                 @remarcar="onRemarcar"
-                @edit="onEditEvento"
+                @edit-sessao="onEditEvento"
+                @edit-paciente="onEditPaciente"
                 @abrir-prontuario="onAbrirProntuario"
                 @whatsapp="onWhatsapp"
                 @historico="onHistoricoSessoes"
@@ -1910,6 +2117,8 @@ function onKeydown(e) {
             @close="fecharSecao"
             @patient-created="refetchPacientes"
             @goto-agenda="abrirSecao('agenda')"
+            @goto-grupos="abrirSecao('grupos')"
+            @goto-tags="abrirSecao('tags')"
         />
 
         <MelissaCompromissos
@@ -1942,6 +2151,11 @@ function onKeydown(e) {
             @close="fecharSecao"
         />
 
+        <MelissaAgendamentosRecebidos
+            v-if="layoutReady && secaoAberta === 'agendamentos-recebidos'"
+            @close="fecharSecao"
+        />
+
         <MelissaMedicos
             v-if="layoutReady && secaoAberta === 'medicos'"
             @close="fecharSecao"
@@ -3177,6 +3391,42 @@ html:not(.app-dark) .melissa-dock .dock-pin:hover {
     box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
 }
 
+/* ─── Pins dinâmicos do dock (híbrido fixo + recente) ───────── */
+/* Divisor entre builtins e dinâmicos. Fininho, atravessa o gap. */
+.dock-divider {
+    width: 1px;
+    height: 24px;
+    align-self: center;
+    background: var(--m-border, rgba(255, 255, 255, 0.18));
+    opacity: 0.7;
+}
+html:not(.app-dark) .dock-divider {
+    background: rgba(15, 23, 42, 0.18);
+}
+
+/* Pin fixado pelo user — pequena marca no canto pra diferenciar do recente. */
+.dock-pin--user .dock-pin__pinned-mark {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: color-mix(in srgb, var(--p-primary-color) 70%, white);
+    box-shadow: 0 0 6px color-mix(in srgb, var(--p-primary-color) 50%, transparent);
+    pointer-events: none;
+}
+
+/* Pin recente (MRU) — visualmente mais leve pra denotar transitoriedade.
+   Fica entre opacity total (active/hover) e ~70% no estado normal. */
+.dock-pin--recent {
+    opacity: 0.78;
+}
+.dock-pin--recent:hover,
+.dock-pin--recent.dock-pin--active {
+    opacity: 1;
+}
+
 /* ─── Skeleton loading utilitário (global pra atravessar scoped CSS dos
        componentes filhos). Use a classe .melissa-skeleton em qualquer
        container — vira um placeholder com shimmer suave.

src/layout/melissa/composables/useMelissaPacientes.js

@@ -17,6 +17,7 @@
 import { ref, onMounted } from 'vue';
 import { supabase } from '@/lib/supabase/client';
 import { useTenantStore } from '@/stores/tenantStore';
+import { useMelissaCacheStore, MELISSA_CACHE_TTL } from '@/stores/melissaCacheStore';
 
 // Mesma lógica da PatientsListPage.vue — DB pode ter valores variados
 function normalizeStatus(s) {
@@ -37,7 +38,9 @@ function normalizeStatus(s) {
  */
 export function useMelissaPacientes(opts = {}) {
     const onlyActive = opts.onlyActive !== false; // default true (compat)
+    const autoFetch  = opts.autoFetch !== false;  // default true (compat)
     const tenantStore = useTenantStore();
+    const cache = useMelissaCacheStore();
 
     const pacientes = ref([]);
     const loading = ref(false);
@@ -46,17 +49,51 @@ export function useMelissaPacientes(opts = {}) {
 
     async function ensureUid() {
         if (uid.value) return uid.value;
+        // Fast path: session do storage local (<10ms vs ~80ms do getUser)
+        const { data: ses } = await supabase.auth.getSession();
+        if (ses?.session?.user?.id) {
+            uid.value = ses.session.user.id;
+            return uid.value;
+        }
         const { data, error: err } = await supabase.auth.getUser();
         if (err) return null;
         uid.value = data?.user?.id || null;
         return uid.value;
     }
 
-    async function fetchPacientes() {
-        const userId = await ensureUid();
+    async function _doFetch(userId, tid, cacheKey) {
+        const { data, error: err } = await supabase
+            .from('patients')
+            .select('id, nome_completo, email_principal, telefone, status, avatar_url, last_attended_at, created_at, data_nascimento')
+            .eq('owner_id', userId)
+            .eq('tenant_id', tid)
+            .order('nome_completo', { ascending: true })
+            .limit(1000);
 
-        // Garante que o tenantStore foi hidratado (preview misc não passa por
-        // guard de auth, então o store pode estar vazio mesmo com user logado)
+        if (err) throw err;
+
+        const todos = (data || []).map((r) => ({
+            id: r.id,
+            nome: r.nome_completo || '',
+            email: r.email_principal || '',
+            telefone: r.telefone || '',
+            avatar_url: r.avatar_url || null,
+            status: normalizeStatus(r.status),
+            last_attended_at: r.last_attended_at || null,
+            created_at: r.created_at || null,
+            data_nascimento: r.data_nascimento || null
+        }));
+
+        const finalList = onlyActive ? todos.filter((p) => p.status === 'Ativo') : todos;
+        cache.set('pacientesTimeline', finalList, cacheKey);
+        pacientes.value = finalList;
+        return finalList;
+    }
+
+    // useCache=true (boot/auto): hidrata do cache se válido + revalida em background.
+    // useCache=false (refetch após mutation): força query nova, descarta cache.
+    async function _fetch({ useCache = true } = {}) {
+        const userId = await ensureUid();
         if (typeof tenantStore.ensureLoaded === 'function') {
             await tenantStore.ensureLoaded();
         }
@@ -67,35 +104,28 @@ export function useMelissaPacientes(opts = {}) {
             return;
         }
 
+        const cacheKey = `${userId}:${tid}:${onlyActive ? 'a' : 'all'}`;
+
+        if (useCache) {
+            const cached = cache.get('pacientesTimeline', cacheKey, MELISSA_CACHE_TTL.pacientesTimeline);
+            if (cached) {
+                pacientes.value = cached;
+                _doFetch(userId, tid, cacheKey).catch((e) => {
+                    // eslint-disable-next-line no-console
+                    console.warn('[useMelissaPacientes] revalidate', e);
+                });
+                return;
+            }
+        } else {
+            // Force: invalida o slot pra outras instâncias (se houver) também
+            // pegarem fresh na próxima leitura.
+            cache.invalidate('pacientesTimeline');
+        }
+
         loading.value = true;
         error.value = null;
-
         try {
-            // Não filtra status no SQL — DB tem valores inconsistentes
-            // ('ativo', 'Ativo', 'active', null...). Normaliza e filtra no client.
-            const { data, error: err } = await supabase
-                .from('patients')
-                .select('id, nome_completo, email_principal, telefone, status, avatar_url, last_attended_at, created_at, data_nascimento')
-                .eq('owner_id', userId)
-                .eq('tenant_id', tid)
-                .order('nome_completo', { ascending: true })
-                .limit(1000);
-
-            if (err) throw err;
-
-            const todos = (data || []).map((r) => ({
-                id: r.id,
-                nome: r.nome_completo || '',
-                email: r.email_principal || '',
-                telefone: r.telefone || '',
-                avatar_url: r.avatar_url || null,
-                status: normalizeStatus(r.status),
-                last_attended_at: r.last_attended_at || null,
-                created_at: r.created_at || null,
-                data_nascimento: r.data_nascimento || null
-            }));
-
-            pacientes.value = onlyActive ? todos.filter((p) => p.status === 'Ativo') : todos;
+            await _doFetch(userId, tid, cacheKey);
         } catch (e) {
             error.value = e?.message || 'Erro ao carregar pacientes';
             pacientes.value = [];
@@ -106,12 +136,15 @@ export function useMelissaPacientes(opts = {}) {
         }
     }
 
-    onMounted(fetchPacientes);
+    if (autoFetch) onMounted(() => _fetch({ useCache: true }));
 
     return {
         pacientes,
         loading,
         error,
-        refetch: fetchPacientes
+        // refetch força query nova (uso em handlers pós-mutation: criar/editar/deletar).
+        refetch: () => _fetch({ useCache: false }),
+        // fetchCached usa stale-while-revalidate (uso em defer/idle callback).
+        fetchCached: () => _fetch({ useCache: true })
     };
 }

src/layout/melissa/composables/useMelissaPacientesAside.js

@@ -66,6 +66,14 @@ export function useMelissaPacientesAside(opts) {
 
     async function _ensureUid() {
         if (_uid.value) return _uid.value;
+        // Fast path: session já hidratada no storage (<10ms).
+        const { data: ses } = await supabase.auth.getSession();
+        const uid = ses?.session?.user?.id;
+        if (uid) {
+            _uid.value = uid;
+            return uid;
+        }
+        // Fallback: round-trip pro auth server (cold start).
         const { data, error: err } = await supabase.auth.getUser();
         if (err) return null;
         _uid.value = data?.user?.id || null;