# HANDOFF — 2026-04-26 (continuação 2026-04-27: bug Teleport resolvido)

Documento de continuidade. **Quando voltar, comece lendo esta página.**
Sessão inteira polindo o Layout Melissa: light mode, integração no /profile,
Agenda fullscreen, dock taskbar, cadastro de paciente, ações contextuais.

---

## ✅ BUG RESOLVIDO — chip do cronômetro (2026-04-27)

**Era:** dois `<Teleport to=".melissa-dock">` (chip cronômetro + dock contextual)
com `<Transition>` interno + `v-if` interno apontando pro mesmo target. O slot
do `<Transition>` colapsava pra comment placeholder VNode quando falsy, e
esses placeholders ficavam intercalados no array de children do target —
ao patch/reorder, `shouldUpdateComponent` lia `.component.emitsOptions` em
nó cujo `.component` foi anulado pelo unmount irmão. Daí `null`.

**Fix (pattern oficial Vue):** `<Transition>` envolvendo `<Teleport>`, não o
contrário. Assim o Teleport some/aparece como unidade, sem deixar placeholder
no target compartilhado.

```vue
<!-- ❌ ANTES -->
<Teleport to=".melissa-dock">
    <Transition name="...">
        <Element v-if="cond" />
    </Transition>
</Teleport>

<!-- ✅ DEPOIS -->
<Transition name="...">
    <Teleport v-if="cond" to=".melissa-dock">
        <Element />
    </Teleport>
</Transition>
```

Aplicado em `MelissaCronometro.vue:322` e `MelissaAgenda.vue:842`.

**Lição persistida:** quando múltiplos Teleports compartilham target, evitar
`v-if` dentro do Teleport — coloca o `v-if` no próprio Teleport.

---

## ✅ O que aconteceu hoje (cronologia)

### Manhã — Light mode + /profile
- **Light bloom no MelissaLayout** — gradiente Bloom usa CSS vars (`--bloom-c1/c2/base-1/base-2`) que flipam dark/light. Dark: 400/300/950. Light: 200/100/0. Removido `background-image: none !important`. Corrigido branco-em-branco do clock + ψ + psi-kbd. Panels light com 92% opacity. Classe `win11-has-photo` quando upload de foto.
- **Layout Melissa em /profile** — 3º card na seção 06 com badge "Em construção" + listras diagonais. Aceita `'melissa'` em `setVariant`/`_loadVariant`/bootstrap. Migration `20260425000001_user_settings_layout_variant_melissa.sql` (já aplicada). **Switch real do app fica pra Fase 5 (A#32 no dev_auditoria_items).**
- **Cronômetro/Personalização em light** — trocados `color: white` scoped → `var(--m-text)` em `.mc-select`, `.mc-display`, `.mc-btn--secondary`, `.mc-chip`, `.settings-select`, `.settings-test-btn`. Pílula `psi-kbd` ganhou tokens `--m-kbd-bg/--m-kbd-text` (era `rgba(0,0,0,.65)` hardcoded — em light virava preto sobre preto). Shadow do `.psi-btn` suavizada em light.
- **Ícones tons claros** — bloco de overrides em light mapeia `text-{cor}-200/300/400` → `text-{cor}-600` (17 cores Tailwind: emerald, green, amber, purple, blue, sky, cyan, teal, indigo, violet, pink, rose, red, orange, yellow, fuchsia, lime).

### Tarde — Agenda fullscreen
- **Cores light na MelissaAgenda** — 12 substituições de `color: white` → `var(--m-text)` semântico. Mantido white em `.mini-cal__day.is-hoje` (bg accent saturado). Avatar do paciente: bg `--m-accent-strong` (translúcido, invisível em light) → `--m-accent` (saturado). Tweaks light: shadow suave na `.ma-page`, eventos do FC com `saturate(140%)` + box-shadow leve, cursor "agora" com glow vermelho.
- **Mini-cal funcionalidades** — click no dia pula o FC (`fcApi().gotoDate`), range visível do FC destacado (`is-in-range` via `viewStart/viewEnd`), dots por evento real do mês (`useMelissaEventosRange(miniRangeStart, miniRangeEnd)` separado), até 3 dots por dia.
- **Feriados** — `useFeriados` integrado. Cores: nacional=rose, municipal=amber, personalizado=violet. Tooltip combina nome do feriado + count de eventos. Hoje + feriado: ring externo na cor do feriado. Recarrega ao mudar de ano via watch.
- **Dias fechados** — `useAgendaSettings.workRules` carregado. `workDowSet` computed. Dias fora da jornada → `is-fechado` (cinza apagado). Mutex com feriado (feriado vence cinza). Fallback seg-sex se sem regras.
- **FC central com feriados** — `fcEvents` agora `[...eventosSemana, ...feriadoFcEvents]` (display:'background' amber suave).

### Tarde 2 — Layout estrutural da Agenda
- **Card `Hoje` mesclado** — antes 2 cards (stats + sessões). Agora 1 só: header + 4 stats + divider + lista de sessões. Count à direita do header.
- **Card Hoje movido pra esquerda** — sai da col 3 (widgets), vai pro topo da col 1 (sidebar pacientes). Modificador `.ma-w--side` com margem + max-height 50vh + lista interna scrollable.
- **ProximosFeriadosCard reaproveitado** — entre mini-cal e Hoje na col 3. Override visual (`bg-soft`, `border-color`, `border-radius: 12px`) pra encaixar no glass.

### Noite 1 — Dock + cadastro de paciente
- **Dock taskbar** (`.melissa-dock`) — faixa fixa 76px no bottom, transparente, `position:fixed`. ψ desceu pra `bottom: 10px` (centralizado vertical na faixa). Token `--m-dock-h: 76px`. Páginas reservam space via `inset` (`.ma-page` ajustada). **CSS no `<style>` global** pra evitar perda de scoped em static-hoisted nodes.
- **Chip cronômetro teleportado** pro dock. Substituído `position:fixed top:1.5rem left:1.5rem` por `position:relative` (filho flex). Aparece após ψ, com gap.
- **Animação minimize macOS-style** — `isMinimizing` flag + computed `dialogTransitionName` ('minimize' vs 'lift' default). CSS `transform-origin: 96px calc(100% - 38px)` (posição do chip no dock). Scale 1→0.05 + opacity em 340ms cubic-bezier ease-in. Chip-pop com `transition-delay: 120ms` no enter pra dar sensação macOS.
- **Botão fake "Adicionar paciente"** no topo da lista — tracejado com `+`. Click abre `PatientCreatePopover` (3 opções: rápido/completo/link de cadastro com URL+copy). Reaproveita `PatientCadastroDialog` + `ComponentCadastroRapido`. Emit `patient-created` → MelissaLayout faz `refetchPacientes`.
- **Pacientes novos no topo** — composable agora retorna `created_at`. Threshold 7 dias. Computed `pacientesFiltrados` particiona em [novos sort desc, resto alfabético]. Visual: `is-novo` bg `--m-accent-soft` + badge "novo" pílula primary.

### Noite 2 — Dock contextual ⚠️ INTRODUZIU O BUG PENDENTE
- **Imports adicionados** no MelissaAgenda: `PatientProntuario`, `useConversationDrawerStore`, `getSessionCounts`. Removido depois: `import Menu from 'primevue/menu'` (auto-import).
- **State + funções** pra dock contextual: `pacienteSelecionado` computed, `sessionCountsMap` cache, `prontuarioOpen`/`prontuarioPatient`, handlers `abrirSessoes/Whatsapp/Prontuario`, `editarPacienteSelecionado`, `desselecionarPaciente`, `toggleKebab`/`kebabItems`.
- **Template** — `<button>` do paciente virou `<div>` (não pode ter button-dentro-de-button por causa do kebab `.ma-pat__kebab`). `<Teleport to=".melissa-dock">` com `<Transition name="ma-dock-pop">` mostrando avatar + nome + count + 4 ações + close. `<Menu>` PrimeVue popup. `<PatientProntuario v-if=...>`.
- **CSS** — `.ma-dock-actions` glass aesthetic (espelha .mc-chip), responsivo (some em ≤ 1024px). `.ma-pat__kebab` só visível em mobile.

**Estado pós-implementação:** funcionou inicialmente. Depois de algum HMR, o chip do cronômetro deixou de aparecer. Erro `emitsOptions: null` no console. Tentei 3 fixes sem sucesso. Investigar amanhã.

---

## 📋 Pendências do dia (não commitado)

```
M HANDOFF.md
M src/router/routes.misc.js                      (rota /preview/melissa — do dia 24)
M src/views/pages/saas/SaasAddonsPage.vue        (do dia 24, ainda não commitado)
M src/views/pages/account/ProfilePage.vue        (card Melissa)
M src/layout/composables/layout.js               (variant aceita 'melissa')
M src/app/bootstrapUserSettings.js               (bootstrap aceita 'melissa')
M src/layout/melissa/MelissaLayout.vue           (light bloom + dock + tokens)
M src/layout/melissa/MelissaCronometro.vue       (light + teleport chip + animação minimize)
M src/layout/melissa/MelissaAgenda.vue           (light + mini-cal + feriados + cadastro + dock contextual)
M src/layout/melissa/composables/useMelissaPacientes.js  (created_at)
?? src/layout/melissa/                           (todo o trabalho do dia 24-26)
?? layout-scratchs/                              (rascunhos design Direção A)
?? database-novo/migrations/20260425000001_user_settings_layout_variant_melissa.sql
```

**Sugestão de commits separados (ordem):**

1. **Fix admin adjust créditos (do dia 24, ainda pendente):**
   ```
   Fix admin adjust créditos: clamp silencioso vira erro vermelho
   ```

2. **Layout Melissa — preview funcional (dia 24):**
   ```
   Layout Melissa (Direção B) — preview em /preview/melissa
   ```

3. **Layout Melissa — Profile + light mode + ícones tons claros (dia 25-26):**
   ```
   Melissa: light bloom + opção em /account/profile (Em construção)

   - Light mode usa CSS vars --bloom-* (tons 200/100/surface-0)
   - Card "Melissa" em /account/profile com badge Em construção
   - Migration: layout_variant aceita 'melissa'
   - Cores light em cronômetro/personalização (color: white → var(--m-text))
   - Ícones text-X-200/300/400 → text-X-600 em light (17 cores)
   - Switch real do app: A#32 (Fase 5)
   ```

4. **Melissa Agenda — cores light + mini-cal funcional + feriados (dia 26):**
   ```
   Melissa Agenda: light + mini-cal completo + feriados + dias fechados

   - 12 cores white → var(--m-text) na .ma-page e widgets
   - Mini-cal: click pula FC, range visível destacado, dots reais por mês
   - Feriados nacional/municipal/personalizado (rose/amber/violet)
   - Dias fechados (workRules) cinza apagado
   - FC central com feriados como background events
   ```

5. **Melissa Agenda — layout estrutural (dia 26):**
   ```
   Melissa Agenda: card Hoje na sidebar + ProximosFeriadosCard

   - Card Hoje (stats+sessões) mesclados em um, movidos pra col esquerda
   - ProximosFeriadosCard reaproveitado entre mini-cal e Hoje
   ```

6. **Melissa — dock + cadastro paciente (dia 26):**
   ```
   Melissa: dock taskbar Win11 + cadastro paciente via PatientCreatePopover

   - .melissa-dock fixed bottom 76px receptor de items teleportados
   - Chip cronômetro teleportado pro dock + animação minimize macOS-style
   - ψ centralizado vertical na faixa (bottom:10px)
   - Botão fake "+" no topo da lista de pacientes abre popover
   - Pacientes novos (7d) no topo + badge "novo"
   ```

7. **✅ Dock contextual com ações de paciente (bug resolvido 2026-04-27):**
   - Mudanças do MelissaAgenda relacionadas a `.ma-dock-actions`, `Menu kebab`, `PatientProntuario` integration
   - Bug do chip resolvido (Transition envolvendo Teleport)
   ```
   Melissa Agenda: dock contextual com ações do paciente selecionado
   ```

---

## 📚 Tracking persistente

- **A#32** — Fase 5 router wire-up (ainda pendente, sessão dedicada)
- **Memória atualizada:** `project_layout_melissa.md` — adicionar nota sobre bug pendente + estado da sessão
- Adicionar **A#33** amanhã pro bug do chip do cronômetro pendente, depois fechar quando resolvido

---

## 📦 Setup pra retomar

```bash
# Terminal 1 — functions
supabase functions serve --no-verify-jwt --env-file supabase/functions/.env

# Terminal 2 — vite
npm run dev

# Browser
http://localhost:5173/preview/melissa     # ← Melissa preview
http://localhost:5173/account/profile     # ← /profile com card Melissa
http://localhost:5173/auth/login          # ← Login (dados reais)
```

---

## 📌 Próximas opções (escolha amanhã)

**A. Resolver bug do chip do cronômetro** ⚠️ prioridade — bloqueia commit do dock contextual
   - Ver hipóteses na seção "BUG PENDENTE" no topo
   - Estratégia recomendada: comentar o `<PatientProntuario>` primeiro, hard refresh, ver se chip volta. Se sim, é o componente. Se não, comentar `<Menu>` kebab. Se não, comentar `<Teleport>` do `.ma-dock-actions`. Isolar a causa.

**B. Continuar polindo Melissa**
   - Toolbar custom da Agenda (revisar visual)
   - Stats hoje (interatividade — click filtra?)
   - Evento panel (visual + actions)
   - Drag/resize no FC com persist (Fase 2 do roadmap)
   - Recorrências virtuais (RRULE → ocorrências)

**C. Fase 5 (A#32)** — wire-up router pra Layout Melissa virar real
   - Alto risco — sessão dedicada
   - Precisa de Fase 3 antes (split MelissaLayout/MelissaResumo)

**D. Voltar pro QA** (Seção 3.4 do roteiro de testes)
   - SLA de conversas + Bot triagem + Lembrar paciente + ...