agenciapsilmno/HANDOFF.md

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.

<!-- ❌ 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

# 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 + ...