From b11c4c8e257604c1511d41df0b79ead3d37bd79f Mon Sep 17 00:00:00 2001
From: Renan Locatiz Fernandes <renan.fernandes@outlook.com>
Date: Fri, 21 Aug 2026 01:37:35 -0300
Subject: [PATCH 01/19] feat(backend): Lixeira do Windows 95 com soft delete e
 restauracao

DELETE de card e de lista passa a marcar `deletedAt` em vez de apagar. O item
some do board, aparece em GET /api/trash e pode voltar. So as rotas /api/trash
apagam de verdade.

O contrato antigo continua valendo: DELETE responde 204 e emite card.deleted /
list.deleted com { id }, entao o reducer do cliente nao muda. Restaurar reusa
card.created / list.created em vez de eventos novos -- o upsert idempotente por
id ja faz a coisa certa com eles.

A armadilha do soft delete e que findUnique por id continua achando a linha:
toda rota de recurso vivo passa a filtrar deletedAt: null via findLiveCard() /
findLiveList(), senao da para renomear, mover e criar cards dentro de coisas
que o board nao mostra mais.

Duas semanticas deliberadas: apagar uma lista nao marca os cards dela (senao um
card jogado fora sozinho ressuscitaria junto com ela), e restaurar um card cuja
lista esta na lixeira retorna 409, sinalizado antes pelo originalList.deleted.

Smoke: 45 -> 82 assercoes, incluindo preflight de CORS das rotas novas.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../20260821040639_lixeira/migration.sql      |  11 ++
 backend/prisma/schema.prisma                  |  19 ++-
 backend/prisma/seed.ts                        |  15 ++
 backend/scripts/smoke.mjs                     | 151 ++++++++++++++++++
 backend/src/bus.ts                            |   3 +
 backend/src/routes/board.ts                   |  12 +-
 backend/src/routes/cards.ts                   |  19 ++-
 backend/src/routes/lists.ts                   |  15 +-
 backend/src/routes/trash.ts                   | 139 ++++++++++++++++
 backend/src/server.ts                         |   2 +
 backend/src/trash.ts                          |  43 +++++
 11 files changed, 412 insertions(+), 17 deletions(-)
 create mode 100644 backend/prisma/migrations/20260821040639_lixeira/migration.sql
 create mode 100644 backend/src/routes/trash.ts
 create mode 100644 backend/src/trash.ts

diff --git a/backend/prisma/migrations/20260821040639_lixeira/migration.sql b/backend/prisma/migrations/20260821040639_lixeira/migration.sql
new file mode 100644
index 0000000..f715cfe
--- /dev/null
+++ b/backend/prisma/migrations/20260821040639_lixeira/migration.sql
@@ -0,0 +1,11 @@
+-- AlterTable
+ALTER TABLE "Card" ADD COLUMN "deletedAt" DATETIME;
+
+-- AlterTable
+ALTER TABLE "List" ADD COLUMN "deletedAt" DATETIME;
+
+-- CreateIndex
+CREATE INDEX "Card_deletedAt_idx" ON "Card"("deletedAt");
+
+-- CreateIndex
+CREATE INDEX "List_deletedAt_idx" ON "List"("deletedAt");
diff --git a/backend/prisma/schema.prisma b/backend/prisma/schema.prisma
index 89f21d9..a8d7a24 100644
--- a/backend/prisma/schema.prisma
+++ b/backend/prisma/schema.prisma
@@ -15,23 +15,32 @@ model Board {
 }
 
 model Card {
-  id          String @id @default(cuid())
+  id          String    @id @default(cuid())
   title       String
-  description String @default("")
+  description String    @default("")
   position    Float
   listId      String
-  list        List   @relation(fields: [listId], references: [id], onDelete: Cascade)
+  list        List      @relation(fields: [listId], references: [id], onDelete: Cascade)
+  // Lixeira: null = no board, timestamp = na lixeira. DELETE /api/cards/:id
+  // marca; DELETE /api/trash/... e que apaga de verdade.
+  deletedAt   DateTime?
 
   @@index([listId, position])
+  @@index([deletedAt])
 }
 
 model List {
-  id       String @id @default(cuid())
+  id       String    @id @default(cuid())
   title    String
   position Float
   boardId  String
-  board    Board  @relation(fields: [boardId], references: [id], onDelete: Cascade)
+  board    Board     @relation(fields: [boardId], references: [id], onDelete: Cascade)
   cards    Card[]
+  // Lixeira. Mandar uma lista para a lixeira NAO marca os cards dela: eles somem
+  // do board porque a lista sumiu, e voltam junto quando ela e restaurada. Marcar
+  // em cascata ressuscitaria cards que ja tinham sido jogados fora sozinhos.
+  deletedAt DateTime?
 
   @@index([boardId, position])
+  @@index([deletedAt])
 }
diff --git a/backend/prisma/seed.ts b/backend/prisma/seed.ts
index 69ed338..aafa82e 100644
--- a/backend/prisma/seed.ts
+++ b/backend/prisma/seed.ts
@@ -31,6 +31,21 @@ async function main() {
     })
   }
 
+  // Um item ja na lixeira: deixa a feature demonstravel num stack novo e serve
+  // de conferencia de que o GET /api/board realmente esconde o que foi jogado fora.
+  const inbox = await prisma.list.findFirst({ where: { boardId: board.id }, orderBy: { position: 'asc' } })
+  if (inbox) {
+    await prisma.card.create({
+      data: {
+        listId: inbox.id,
+        title: 'Trabalho de Estagio.doc',
+        description: 'Apagado por engano em 1997.',
+        position: 99,
+        deletedAt: new Date(),
+      },
+    })
+  }
+
   console.log('seed ok')
 }
 
diff --git a/backend/scripts/smoke.mjs b/backend/scripts/smoke.mjs
index 30b0fad..3dc21b8 100644
--- a/backend/scripts/smoke.mjs
+++ b/backend/scripts/smoke.mjs
@@ -139,6 +139,8 @@ async function main() {
     ['DELETE', `/api/cards/${cardId}`],
     ['DELETE', `/api/lists/${listId}`],
     ['POST', '/api/cards'],
+    ['DELETE', '/api/trash'],
+    ['POST', `/api/trash/cards/${cardId}/restore`],
   ]) {
     const { origin, methods } = await preflight(method, path)
     check(
@@ -189,6 +191,155 @@ async function main() {
   const after = await api('GET', '/api/board')
   check('lista deletada sumiu do board', !after.body.lists.some((l) => l.id === listId))
 
+  // --- Lixeira ---
+  // Depois dos DELETEs acima, `cardId` e `listId` estao na lixeira, nao apagados.
+  // Estas assercoes existem porque soft delete muda o significado de todo
+  // findUnique por id: sem filtro de deletedAt da para renomear, mover e criar
+  // dentro de coisas que o board nao mostra mais.
+  const trash = await api('GET', '/api/trash')
+  check('GET /api/trash -> 200', trash.status === 200)
+  const trashedCard = trash.body?.cards?.find((c) => c.id === cardId)
+  const trashedList = trash.body?.lists?.find((l) => l.id === listId)
+  check('card deletado aparece na lixeira', Boolean(trashedCard))
+  check('lista deletada aparece na lixeira', Boolean(trashedList))
+  check('card na lixeira traz originalList', Boolean(trashedCard?.originalList?.title))
+  check(
+    'originalList.deleted e false quando a lista de origem esta viva',
+    trashedCard?.originalList?.deleted === false,
+  )
+  check('lista na lixeira traz cardCount', typeof trashedList?.cardCount === 'number')
+  check('WS recebeu trash.updated', events.some((e) => e.type === 'trash.updated'))
+  const trashEvent = events.filter((e) => e.type === 'trash.updated').pop()
+  check(
+    'payload de trash.updated e so a contagem { cards, lists }',
+    trashEvent && Object.keys(trashEvent.payload).sort().join(',') === 'cards,lists',
+    trashEvent ? JSON.stringify(trashEvent.payload) : 'evento ausente',
+  )
+  const boardWithTrash = await api('GET', '/api/board')
+  check('GET /api/board traz a contagem da lixeira', typeof boardWithTrash.body?.trash?.cards === 'number')
+  check(
+    'card na lixeira nao aparece no board',
+    !boardWithTrash.body.lists.flatMap((l) => l.cards).some((c) => c.id === cardId),
+  )
+
+  // Nada que opera sobre recurso vivo pode enxergar item na lixeira.
+  const patchTrashed = await api('PATCH', `/api/cards/${cardId}`, { title: 'zumbi' })
+  check('PATCH em card na lixeira -> 404', patchTrashed.status === 404, `status ${patchTrashed.status}`)
+  const moveTrashed = await api('PATCH', `/api/cards/${cardId}/move`, { listId: targetList.id, position: 0 })
+  check('move de card na lixeira -> 404', moveTrashed.status === 404, `status ${moveTrashed.status}`)
+  const renameTrashedList = await api('PATCH', `/api/lists/${listId}`, { title: 'zumbi' })
+  check('PATCH em lista na lixeira -> 404', renameTrashedList.status === 404, `status ${renameTrashedList.status}`)
+  const cardIntoTrashedList = await api('POST', '/api/cards', { listId, title: 'zumbi' })
+  check('POST /api/cards em lista na lixeira -> 404', cardIntoTrashedList.status === 404, `status ${cardIntoTrashedList.status}`)
+  const someLiveCardId = boardWithTrash.body.lists.flatMap((l) => l.cards)[0]?.id ?? 'x'
+  const moveIntoTrashedList = await api('PATCH', `/api/cards/${someLiveCardId}/move`, { listId, position: 0 })
+  check('move para lista na lixeira -> 404', moveIntoTrashedList.status === 404, `status ${moveIntoTrashedList.status}`)
+
+  // Restaurar devolve o item ao lugar de origem e ele reaparece no board.
+  const restored = await api('POST', `/api/trash/cards/${cardId}/restore`)
+  check('POST /api/trash/cards/:id/restore -> 200', restored.status === 200, `status ${restored.status}`)
+  check('card restaurado sai da lixeira', restored.body?.deletedAt === null)
+  await waitFor(250)
+  const boardAfterRestore = await api('GET', '/api/board')
+  check(
+    'card restaurado volta ao board',
+    boardAfterRestore.body.lists.flatMap((l) => l.cards).some((c) => c.id === cardId),
+  )
+  check(
+    'restaurar reusa card.created (o cliente ja faz upsert por id)',
+    events.filter((e) => e.type === 'card.created').some((e) => e.payload?.id === cardId),
+  )
+  const doubleRestore = await api('POST', `/api/trash/cards/${cardId}/restore`)
+  check('restaurar card que ja voltou -> 404', doubleRestore.status === 404)
+
+  const restoredList = await api('POST', `/api/trash/lists/${listId}/restore`)
+  check('POST /api/trash/lists/:id/restore -> 200', restoredList.status === 200, `status ${restoredList.status}`)
+  check(
+    'lista restaurada vem com cards[] (senao o cliente sobrescreve com vazio)',
+    Array.isArray(restoredList.body?.cards),
+  )
+  const boardAfterListRestore = await api('GET', '/api/board')
+  check('lista restaurada volta ao board', boardAfterListRestore.body.lists.some((l) => l.id === listId))
+
+  // Card na lixeira cuja lista tambem foi para a lixeira: 409 explicito, nao 500
+  // nem restauracao dentro de uma lista que o board nao mostra.
+  const orphan = await api('POST', '/api/cards', { listId, title: 'Orfao' })
+  const orphanId = orphan.body?.id
+  await api('DELETE', `/api/cards/${orphanId}`)
+  await api('DELETE', `/api/lists/${listId}`)
+  const orphanRestore = await api('POST', `/api/trash/cards/${orphanId}/restore`)
+  check('restaurar card cuja lista esta na lixeira -> 409', orphanRestore.status === 409, `status ${orphanRestore.status}`)
+  const trashWithOrphan = await api('GET', '/api/trash')
+  check(
+    'originalList.deleted avisa que o restore vai falhar',
+    trashWithOrphan.body.cards.find((c) => c.id === orphanId)?.originalList?.deleted === true,
+  )
+  const listBack = await api('POST', `/api/trash/lists/${listId}/restore`)
+  check('restaurar a lista destrava o card', listBack.status === 200)
+  check(
+    'card jogado fora sozinho NAO ressuscita junto com a lista',
+    !listBack.body.cards.some((c) => c.id === orphanId),
+  )
+  const trashAfterListBack = await api('GET', '/api/trash')
+  check('...e continua na lixeira', trashAfterListBack.body.cards.some((c) => c.id === orphanId))
+  const orphanRestore2 = await api('POST', `/api/trash/cards/${orphanId}/restore`)
+  check('com a lista de volta, o card restaura', orphanRestore2.status === 200, `status ${orphanRestore2.status}`)
+
+  // Apagar de vez, item a item.
+  await api('DELETE', `/api/cards/${orphanId}`)
+  const purge = await api('DELETE', `/api/trash/cards/${orphanId}`)
+  check('DELETE /api/trash/cards/:id -> 204', purge.status === 204)
+  const trashAfterPurge = await api('GET', '/api/trash')
+  check('apagado de vez some da lixeira', !trashAfterPurge.body.cards.some((c) => c.id === orphanId))
+  const purgeLive = await api('DELETE', `/api/trash/cards/${cardId}`)
+  check('apagar de vez um card vivo -> 404', purgeLive.status === 404)
+
+  // Esvaziar Lixeira. Destrutivo de verdade: guarda o card de demonstracao do
+  // seed antes e recria pela API depois, senao rodar o smoke apaga a piada.
+  const trashBeforeEmpty = await api('GET', '/api/trash')
+  const demo = trashBeforeEmpty.body.cards.find((c) => c.title === 'Trabalho de Estagio.doc')
+  await api('DELETE', `/api/cards/${cardId}`)
+  await api('DELETE', `/api/lists/${listId}`)
+  // Um card VIVO dentro de uma lista na lixeira morre no cascade do esvaziar.
+  // A contagem retornada tem que inclui-lo: contar so `deletedAt != null`
+  // reportava menos linhas do que a operacao realmente apagava.
+  const doomedList = await api('POST', '/api/lists', { title: 'Lista com card vivo' })
+  const liveInside = await api('POST', '/api/cards', {
+    listId: doomedList.body.id,
+    title: 'Vivo, mas condenado',
+  })
+  await api('DELETE', `/api/lists/${doomedList.body.id}`)
+  const countsBefore = (await api('GET', '/api/trash')).body.counts
+
+  const emptied = await api('DELETE', '/api/trash')
+  check(
+    'DELETE /api/trash -> 200 com { deleted }',
+    emptied.status === 200 && typeof emptied.body?.deleted?.cards === 'number',
+    `status ${emptied.status}`,
+  )
+  check(
+    'esvaziar conta o card vivo que o cascade leva junto',
+    emptied.body?.deleted?.cards > countsBefore.cards,
+    `reportou ${emptied.body?.deleted?.cards}, lixeira tinha ${countsBefore.cards} + 1 vivo dentro da lista`,
+  )
+  const gone = await api('PATCH', `/api/cards/${liveInside.body.id}`, { title: 'x' })
+  check('...e ele realmente sumiu', gone.status === 404, `status ${gone.status}`)
+
+  const afterEmpty = await api('GET', '/api/trash')
+  check('lixeira fica vazia', afterEmpty.body.cards.length === 0 && afterEmpty.body.lists.length === 0)
+  const boardAfterEmpty = await api('GET', '/api/board')
+  check('esvaziar a lixeira nao toca no board', boardAfterEmpty.body.lists.length > 0)
+  check('lista apagada de vez nao volta', !boardAfterEmpty.body.lists.some((l) => l.id === listId))
+
+  if (demo && !demo.originalList.deleted) {
+    const remade = await api('POST', '/api/cards', {
+      listId: demo.originalList.id,
+      title: demo.title,
+      description: demo.description,
+    })
+    if (remade.status === 201) await api('DELETE', `/api/cards/${remade.body.id}`)
+  }
+
   ws.close()
   console.log(failures === 0 ? '\nSMOKE OK' : `\nSMOKE FALHOU: ${failures} assercao(oes)`)
   process.exit(failures === 0 ? 0 : 1)
diff --git a/backend/src/bus.ts b/backend/src/bus.ts
index 1cb46e9..895fb59 100644
--- a/backend/src/bus.ts
+++ b/backend/src/bus.ts
@@ -8,6 +8,9 @@ export type EventType =
   | 'card.updated'
   | 'card.moved'
   | 'card.deleted'
+  // Lixeira: o payload e so a contagem ({ cards, lists }), para o icone do desktop
+  // saber se ela esta cheia. O conteudo vem de GET /api/trash quando a janela abre.
+  | 'trash.updated'
 
 const clients = new Set<WebSocket>()
 
diff --git a/backend/src/routes/board.ts b/backend/src/routes/board.ts
index 3060492..2f254d3 100644
--- a/backend/src/routes/board.ts
+++ b/backend/src/routes/board.ts
@@ -1,16 +1,22 @@
 import type { FastifyInstance } from 'fastify'
 import { prisma } from '../db.js'
+import { ALIVE, trashCounts } from '../trash.js'
 
 export async function boardRoutes(app: FastifyInstance) {
   app.get('/api/health', async () => ({ status: 'ok' }))
 
   app.get('/api/board', async (_req, reply) => {
+    // O board so enxerga o que nao esta na lixeira. Os DOIS filtros importam:
+    // sem o de dentro, um card jogado fora continua aparecendo na lista dele.
     const board = await prisma.board.findUnique({
       where: { slug: 'default' },
       include: {
         lists: {
+          where: ALIVE,
           orderBy: [{ position: 'asc' }, { id: 'asc' }],
-          include: { cards: { orderBy: [{ position: 'asc' }, { id: 'asc' }] } },
+          include: {
+            cards: { where: ALIVE, orderBy: [{ position: 'asc' }, { id: 'asc' }] },
+          },
         },
       },
     })
@@ -18,6 +24,8 @@ export async function boardRoutes(app: FastifyInstance) {
     if (!board) {
       return reply.code(404).send({ error: 'board default nao existe -- rode o seed' })
     }
-    return board
+    // A contagem da lixeira vem junto para o icone ja nascer no estado certo, sem
+    // precisar de um GET /api/trash so para saber se ela esta vazia.
+    return { ...board, trash: await trashCounts() }
   })
 }
diff --git a/backend/src/routes/cards.ts b/backend/src/routes/cards.ts
index 06ebf6c..7a52124 100644
--- a/backend/src/routes/cards.ts
+++ b/backend/src/routes/cards.ts
@@ -1,6 +1,7 @@
 import type { FastifyInstance } from 'fastify'
 import { prisma } from '../db.js'
 import { broadcast } from '../bus.js'
+import { broadcastTrash, findLiveCard, findLiveList } from '../trash.js'
 
 export async function cardRoutes(app: FastifyInstance) {
   app.post('/api/cards', async (req, reply) => {
@@ -20,9 +21,11 @@ export async function cardRoutes(app: FastifyInstance) {
       return reply.code(400).send({ error: 'description deve ser uma string' })
     }
 
-    const list = await prisma.list.findUnique({ where: { id: listId } })
+    const list = await findLiveList(listId)
     if (!list) return reply.code(404).send({ error: 'lista nao encontrada' })
 
+    // De proposito conta os cards na lixeira tambem: se um card com position 7
+    // for restaurado depois, ele nao colide com um criado agora.
     const last = await prisma.card.findFirst({
       where: { listId },
       orderBy: { position: 'desc' },
@@ -65,7 +68,7 @@ export async function cardRoutes(app: FastifyInstance) {
       return reply.code(400).send({ error: 'nada para atualizar' })
     }
 
-    const exists = await prisma.card.findUnique({ where: { id } })
+    const exists = await findLiveCard(id)
     if (!exists) return reply.code(404).send({ error: 'card nao encontrado' })
 
     const card = await prisma.card.update({ where: { id }, data })
@@ -87,10 +90,10 @@ export async function cardRoutes(app: FastifyInstance) {
       return reply.code(400).send({ error: 'position deve ser um numero finito' })
     }
 
-    const exists = await prisma.card.findUnique({ where: { id } })
+    const exists = await findLiveCard(id)
     if (!exists) return reply.code(404).send({ error: 'card nao encontrado' })
 
-    const list = await prisma.list.findUnique({ where: { id: listId } })
+    const list = await findLiveList(listId)
     if (!list) return reply.code(404).send({ error: 'lista de destino nao encontrada' })
 
     const card = await prisma.card.update({
@@ -105,12 +108,16 @@ export async function cardRoutes(app: FastifyInstance) {
   app.delete('/api/cards/:id', async (req, reply) => {
     const { id } = req.params as { id: string }
 
-    const exists = await prisma.card.findUnique({ where: { id } })
+    const exists = await findLiveCard(id)
     if (!exists) return reply.code(404).send({ error: 'card nao encontrado' })
 
-    await prisma.card.delete({ where: { id } })
+    // Soft delete: o card vai para a lixeira em vez de sumir. Para o board o
+    // evento e o mesmo de sempre -- 'card.deleted' com { id } -- entao o cliente
+    // continua removendo por id sem saber que a linha ainda existe.
+    await prisma.card.update({ where: { id }, data: { deletedAt: new Date() } })
 
     broadcast('card.deleted', { id })
+    await broadcastTrash()
     return reply.code(204).send()
   })
 }
diff --git a/backend/src/routes/lists.ts b/backend/src/routes/lists.ts
index dce4761..c54ccb0 100644
--- a/backend/src/routes/lists.ts
+++ b/backend/src/routes/lists.ts
@@ -1,6 +1,7 @@
 import type { FastifyInstance } from 'fastify'
 import { prisma } from '../db.js'
 import { broadcast } from '../bus.js'
+import { ALIVE, broadcastTrash, findLiveList } from '../trash.js'
 
 export async function listRoutes(app: FastifyInstance) {
   app.post('/api/lists', async (req, reply) => {
@@ -12,6 +13,8 @@ export async function listRoutes(app: FastifyInstance) {
     const board = await prisma.board.findUnique({ where: { slug: 'default' } })
     if (!board) return reply.code(404).send({ error: 'board default nao existe' })
 
+    // Inclui as listas na lixeira: uma lista restaurada nao deve colidir de
+    // position com uma criada enquanto ela estava fora.
     const last = await prisma.list.findFirst({
       where: { boardId: board.id },
       orderBy: { position: 'desc' },
@@ -51,13 +54,13 @@ export async function listRoutes(app: FastifyInstance) {
       return reply.code(400).send({ error: 'nada para atualizar' })
     }
 
-    const exists = await prisma.list.findUnique({ where: { id } })
+    const exists = await findLiveList(id)
     if (!exists) return reply.code(404).send({ error: 'lista nao encontrada' })
 
     const list = await prisma.list.update({
       where: { id },
       data,
-      include: { cards: { orderBy: [{ position: 'asc' }, { id: 'asc' }] } },
+      include: { cards: { where: ALIVE, orderBy: [{ position: 'asc' }, { id: 'asc' }] } },
     })
 
     broadcast('list.updated', list)
@@ -67,12 +70,16 @@ export async function listRoutes(app: FastifyInstance) {
   app.delete('/api/lists/:id', async (req, reply) => {
     const { id } = req.params as { id: string }
 
-    const exists = await prisma.list.findUnique({ where: { id } })
+    const exists = await findLiveList(id)
     if (!exists) return reply.code(404).send({ error: 'lista nao encontrada' })
 
-    await prisma.list.delete({ where: { id } })
+    // Soft delete. Os cards da lista NAO sao marcados: eles somem do board junto
+    // com ela e voltam junto na restauracao. Marcar em cascata faria um card que
+    // ja tinha ido para a lixeira sozinho ressuscitar quando a lista voltasse.
+    await prisma.list.update({ where: { id }, data: { deletedAt: new Date() } })
 
     broadcast('list.deleted', { id })
+    await broadcastTrash()
     return reply.code(204).send()
   })
 }
diff --git a/backend/src/routes/trash.ts b/backend/src/routes/trash.ts
new file mode 100644
index 0000000..18dacb9
--- /dev/null
+++ b/backend/src/routes/trash.ts
@@ -0,0 +1,139 @@
+import type { FastifyInstance } from 'fastify'
+import { prisma } from '../db.js'
+import { broadcast } from '../bus.js'
+import { ALIVE, broadcastTrash, trashCounts } from '../trash.js'
+
+const CARD_ORDER = [{ position: 'asc' as const }, { id: 'asc' as const }]
+
+export async function trashRoutes(app: FastifyInstance) {
+  /**
+   * Conteudo da Lixeira, mais recente primeiro (e o que a janela mostra).
+   *
+   * Cada card carrega `originalList` com `deleted`: se a lista de origem tambem
+   * esta na lixeira, restaurar o card vai dar 409. O frontend consegue esmaecer
+   * o botao Restaurar antes de o usuario clicar, em vez de mostrar um erro.
+   */
+  app.get('/api/trash', async () => {
+    const [cards, lists] = await Promise.all([
+      prisma.card.findMany({
+        where: { deletedAt: { not: null } },
+        orderBy: [{ deletedAt: 'desc' }, { id: 'asc' }],
+        include: { list: { select: { id: true, title: true, deletedAt: true } } },
+      }),
+      prisma.list.findMany({
+        where: { deletedAt: { not: null } },
+        orderBy: [{ deletedAt: 'desc' }, { id: 'asc' }],
+        include: { cards: { where: ALIVE, orderBy: CARD_ORDER } },
+      }),
+    ])
+
+    return {
+      cards: cards.map(({ list, ...card }) => ({
+        ...card,
+        originalList: { id: list.id, title: list.title, deleted: list.deletedAt !== null },
+      })),
+      // `cardCount` e quantos cards voltam junto se a lista for restaurada --
+      // os que ja estavam na lixeira sozinhos nao contam, eles ficam la.
+      lists: lists.map(({ cards: listCards, ...list }) => ({
+        ...list,
+        cardCount: listCards.length,
+      })),
+      counts: await trashCounts(),
+    }
+  })
+
+  /**
+   * Restaurar volta o item para a posicao original -- e a semantica do Windows,
+   * e a position fracionaria aguenta: colisao de position empata por id, e a
+   * ordenacao continua determinista.
+   */
+  app.post('/api/trash/cards/:id/restore', async (req, reply) => {
+    const { id } = req.params as { id: string }
+
+    const card = await prisma.card.findFirst({
+      where: { id, deletedAt: { not: null } },
+      include: { list: { select: { id: true, title: true, deletedAt: true } } },
+    })
+    if (!card) return reply.code(404).send({ error: 'card nao esta na lixeira' })
+
+    if (card.list.deletedAt !== null) {
+      return reply.code(409).send({
+        error: `a lista "${card.list.title}" tambem esta na lixeira -- restaure a lista primeiro`,
+      })
+    }
+
+    const { list: _list, ...rest } = card
+    const restored = { ...rest, deletedAt: null }
+    await prisma.card.update({ where: { id }, data: { deletedAt: null } })
+
+    // `card.created`, nao um `card.restored` novo: o cliente ja faz upsert por id
+    // com esse evento, entao restaurar aparece no board sem mudanca no frontend.
+    broadcast('card.created', restored)
+    await broadcastTrash()
+    return restored
+  })
+
+  app.post('/api/trash/lists/:id/restore', async (req, reply) => {
+    const { id } = req.params as { id: string }
+
+    const exists = await prisma.list.findFirst({ where: { id, deletedAt: { not: null } } })
+    if (!exists) return reply.code(404).send({ error: 'lista nao esta na lixeira' })
+
+    const list = await prisma.list.update({
+      where: { id },
+      data: { deletedAt: null },
+      // Os cards vivos voltam junto: mandar a lista sem eles faria o cliente
+      // fazer upsert de uma lista vazia por cima da que tem conteudo.
+      include: { cards: { where: ALIVE, orderBy: CARD_ORDER } },
+    })
+
+    broadcast('list.created', list)
+    await broadcastTrash()
+    return list
+  })
+
+  app.delete('/api/trash/cards/:id', async (req, reply) => {
+    const { id } = req.params as { id: string }
+    const exists = await prisma.card.findFirst({ where: { id, deletedAt: { not: null } } })
+    if (!exists) return reply.code(404).send({ error: 'card nao esta na lixeira' })
+
+    await prisma.card.delete({ where: { id } })
+    // Sem `card.deleted`: para o board o card ja tinha sumido no soft delete.
+    await broadcastTrash()
+    return reply.code(204).send()
+  })
+
+  app.delete('/api/trash/lists/:id', async (req, reply) => {
+    const { id } = req.params as { id: string }
+    const exists = await prisma.list.findFirst({ where: { id, deletedAt: { not: null } } })
+    if (!exists) return reply.code(404).send({ error: 'lista nao esta na lixeira' })
+
+    // Cascade do schema leva os cards junto, inclusive os que estavam na lixeira
+    // sozinhos -- a lista de origem deles deixou de existir.
+    await prisma.list.delete({ where: { id } })
+    await broadcastTrash()
+    return reply.code(204).send()
+  })
+
+  /** Esvaziar Lixeira. Irreversivel, como manda o figurino. */
+  app.delete('/api/trash', async (_req, reply) => {
+    const lists = await prisma.list.count({ where: { deletedAt: { not: null } } })
+
+    // Conta os cards que VAO SUMIR, nao os que estao na lixeira: um card vivo
+    // dentro de uma lista na lixeira tambem morre no cascade abaixo. Contar so
+    // `deletedAt != null` reportava menos linhas do que a operacao apagava.
+    const cards = await prisma.card.count({
+      where: {
+        OR: [{ deletedAt: { not: null } }, { list: { deletedAt: { not: null } } }],
+      },
+    })
+
+    // Listas primeiro: o cascade ja apaga os cards delas, inclusive os que
+    // estavam na lixeira por conta propria.
+    await prisma.list.deleteMany({ where: { deletedAt: { not: null } } })
+    await prisma.card.deleteMany({ where: { deletedAt: { not: null } } })
+
+    await broadcastTrash()
+    return reply.send({ deleted: { cards, lists } })
+  })
+}
diff --git a/backend/src/server.ts b/backend/src/server.ts
index f4057fb..e434514 100644
--- a/backend/src/server.ts
+++ b/backend/src/server.ts
@@ -7,6 +7,7 @@ import { addClient, clientCount } from './bus.js'
 import { boardRoutes } from './routes/board.js'
 import { listRoutes } from './routes/lists.js'
 import { cardRoutes } from './routes/cards.js'
+import { trashRoutes } from './routes/trash.js'
 
 const PORT = Number(process.env.PORT ?? 3001)
 const HOST = process.env.HOST ?? '0.0.0.0'
@@ -68,6 +69,7 @@ app.setNotFoundHandler((req, reply) => {
 await app.register(boardRoutes)
 await app.register(listRoutes)
 await app.register(cardRoutes)
+await app.register(trashRoutes)
 
 for (const signal of ['SIGINT', 'SIGTERM'] as const) {
   process.on(signal, async () => {
diff --git a/backend/src/trash.ts b/backend/src/trash.ts
new file mode 100644
index 0000000..8eb324a
--- /dev/null
+++ b/backend/src/trash.ts
@@ -0,0 +1,43 @@
+import { prisma } from './db.js'
+import { broadcast } from './bus.js'
+
+/**
+ * A Lixeira do Windows 95.
+ *
+ * `deletedAt` transforma DELETE em soft delete: a linha continua no banco, some
+ * do `GET /api/board` e reaparece em `GET /api/trash`. So `DELETE /api/trash`
+ * (Esvaziar Lixeira) e `DELETE /api/trash/{cards,lists}/:id` apagam de verdade.
+ *
+ * A consequencia que pega desprevenido: `findUnique({ where: { id } })` continua
+ * achando linha na lixeira. Toda rota que opera sobre um recurso vivo precisa
+ * filtrar `deletedAt: null` explicitamente, senao da para renomear, mover e
+ * "apagar" (de novo) um card que o board nem mostra mais. Use os helpers abaixo
+ * em vez de escrever o where na mao.
+ */
+
+export const ALIVE = { deletedAt: null } as const
+
+export function findLiveCard(id: string) {
+  return prisma.card.findFirst({ where: { id, ...ALIVE } })
+}
+
+export function findLiveList(id: string) {
+  return prisma.list.findFirst({ where: { id, ...ALIVE } })
+}
+
+export async function trashCounts() {
+  const [cards, lists] = await Promise.all([
+    prisma.card.count({ where: { deletedAt: { not: null } } }),
+    prisma.list.count({ where: { deletedAt: { not: null } } }),
+  ])
+  return { cards, lists }
+}
+
+/**
+ * Avisa que a lixeira mudou -- e so a contagem, para o icone do desktop trocar
+ * de cheia para vazia. O conteudo vem de `GET /api/trash` quando a janela abre;
+ * mandar a lixeira inteira em cada delete violaria "payload nunca e o board todo".
+ */
+export async function broadcastTrash() {
+  broadcast('trash.updated', await trashCounts())
+}

From 117721987192537b9bede9b288ca0b14d593f59f Mon Sep 17 00:00:00 2001
From: Renan Locatiz Fernandes <renan.fernandes@outlook.com>
Date: Fri, 21 Aug 2026 01:37:56 -0300
Subject: [PATCH 02/19] feat(frontend): janela da Lixeira e correcoes do
 reducer

A Lixeira ganha UI: janela com Restaurar/Excluir por item, Esvaziar no rodape, e
o botao Restaurar ja nasce desabilitado quando originalList.deleted avisa que o
restore vai dar 409 -- evita o erro em vez de exibi-lo.

Junto, os tres achados de QA que estavam abertos no useBoard.ts:

- race no load(): um GET /api/board em voo podia sobrescrever eventos WS mais
  novos. Resolvido com numero de geracao que descarta resposta obsoleta.
- `incoming.cards ?? l.cards` nunca usava o fallback ([] nao e nullish), entao
  um list.updated com cards vazio zerava a lista. Agora testa a presenca da
  chave, o que tambem e o que faz o restore de lista trazer os cards de volta.
- evento sobre card ou lista desconhecida sumia em silencio ate o proximo
  reload. Agora marca o board como stale e o efeito recarrega.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 frontend/src/TrashWindow.tsx | 186 +++++++++++++++++++++++++++++++++++
 frontend/src/api.ts          |  13 ++-
 frontend/src/types.ts        |  26 +++++
 frontend/src/useBoard.ts     |  45 +++++++--
 4 files changed, 263 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/TrashWindow.tsx

diff --git a/frontend/src/TrashWindow.tsx b/frontend/src/TrashWindow.tsx
new file mode 100644
index 0000000..90260f2
--- /dev/null
+++ b/frontend/src/TrashWindow.tsx
@@ -0,0 +1,186 @@
+import { useCallback, useEffect, useState } from 'react'
+import { api } from './api'
+import { Modal } from './Modal'
+import { DocumentIcon, FolderIcon } from './icons'
+import type { Trash, TrashedCard, TrashedList } from './types'
+
+type Props = {
+  onClose: () => void
+  /** Pede confirmacao antes de uma acao irreversivel. Reusa o ConfirmDialog do App. */
+  onConfirm: (c: { title: string; message: string; onYes: () => void }) => void
+  /** Contagem vinda do board/WS: muda quando alguem apaga algo em outra aba. */
+  counts: { cards: number; lists: number }
+}
+
+/** "21/08/2026 01:47" -- sem segundos, que nao acrescentam nada aqui. */
+function formatDate(iso: string) {
+  const d = new Date(iso)
+  if (Number.isNaN(d.getTime())) return ''
+  return d.toLocaleString('pt-BR', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+export function TrashWindow({ onClose, onConfirm, counts }: Props) {
+  const [trash, setTrash] = useState<Trash | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [busy, setBusy] = useState<string | null>(null)
+
+  const load = useCallback(async () => {
+    try {
+      setTrash(await api.getTrash())
+      setError(null)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e))
+    }
+  }, [])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  // A contagem chega por `trash.updated` no WebSocket, mas o conteudo nao --
+  // o payload e so { cards, lists }. Quando ela muda, alguem mexeu na lixeira
+  // (talvez em outra aba) e a lista aberta aqui esta velha: recarrega.
+  const total = counts.cards + counts.lists
+  useEffect(() => {
+    void load()
+  }, [total, load])
+
+  /** Toda acao recarrega a lixeira; o board se atualiza sozinho pelo WebSocket. */
+  const act = async (key: string, action: () => Promise<unknown>) => {
+    setBusy(key)
+    try {
+      await action()
+      await load()
+      setError(null)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e))
+    } finally {
+      setBusy(null)
+    }
+  }
+
+  const empty = trash !== null && trash.cards.length === 0 && trash.lists.length === 0
+
+  const cardRow = (card: TrashedCard) => {
+    // O backend ja diz que o restore vai dar 409 -- da para desabilitar o botao
+    // antes do clique em vez de mostrar o erro depois.
+    const blocked = card.originalList.deleted
+    return (
+      <li key={card.id} className="trash-item">
+        <span className="trash-icon">
+          <DocumentIcon size={16} />
+        </span>
+        <div className="trash-info">
+          <strong>{card.title}</strong>
+          <small>
+            card de "{card.originalList.title}" · {formatDate(card.deletedAt)}
+          </small>
+          {blocked && (
+            <small className="trash-blocked">
+              a lista de origem também está na lixeira — restaure a lista primeiro
+            </small>
+          )}
+        </div>
+        <div className="trash-actions">
+          <button
+            disabled={blocked || busy !== null}
+            title={blocked ? 'Restaure a lista de origem primeiro' : 'Voltar para o board'}
+            onClick={() => void act(card.id, () => api.restoreCard(card.id))}
+          >
+            Restaurar
+          </button>
+          <button
+            disabled={busy !== null}
+            onClick={() =>
+              onConfirm({
+                title: 'Excluir',
+                message: `Excluir "${card.title}" permanentemente? Isso não volta.`,
+                onYes: () => void act(card.id, () => api.purgeCard(card.id)),
+              })
+            }
+          >
+            Excluir
+          </button>
+        </div>
+      </li>
+    )
+  }
+
+  const listRow = (list: TrashedList) => (
+    <li key={list.id} className="trash-item">
+      <span className="trash-icon">
+        <FolderIcon size={16} />
+      </span>
+      <div className="trash-info">
+        <strong>{list.title}</strong>
+        <small>
+          lista com {list.cardCount} card(s) · {formatDate(list.deletedAt)}
+        </small>
+      </div>
+      <div className="trash-actions">
+        <button
+          disabled={busy !== null}
+          onClick={() => void act(list.id, () => api.restoreList(list.id))}
+        >
+          Restaurar
+        </button>
+        <button
+          disabled={busy !== null}
+          onClick={() =>
+            onConfirm({
+              title: 'Excluir',
+              message: `Excluir a lista "${list.title}" e seus cards permanentemente? Isso não volta.`,
+              onYes: () => void act(list.id, () => api.purgeList(list.id)),
+            })
+          }
+        >
+          Excluir
+        </button>
+      </div>
+    </li>
+  )
+
+  return (
+    <Modal title="Lixeira" onClose={onClose} width={460}>
+      {error && <p className="trash-error">{error}</p>}
+
+      <div className="trash-list" role="list">
+        {trash === null && <p className="trash-empty">Abrindo...</p>}
+        {empty && <p className="trash-empty">A Lixeira está vazia.</p>}
+        {trash !== null && (
+          <ul>
+            {trash.lists.map(listRow)}
+            {trash.cards.map(cardRow)}
+          </ul>
+        )}
+      </div>
+
+      <div className="trash-footer">
+        <span className="trash-status">
+          {trash ? `${trash.counts.lists} lista(s), ${trash.counts.cards} card(s)` : ''}
+        </span>
+        <button
+          disabled={empty || trash === null || busy !== null}
+          onClick={() =>
+            onConfirm({
+              title: 'Esvaziar Lixeira',
+              message: `Excluir permanentemente ${trash?.counts.lists ?? 0} lista(s) e ${
+                trash?.counts.cards ?? 0
+              } card(s)? Isso não volta.`,
+              onYes: () => void act('empty', () => api.emptyTrash()),
+            })
+          }
+        >
+          Esvaziar Lixeira
+        </button>
+        <button onClick={onClose}>Fechar</button>
+      </div>
+    </Modal>
+  )
+}
diff --git a/frontend/src/api.ts b/frontend/src/api.ts
index 37530de..428e238 100644
--- a/frontend/src/api.ts
+++ b/frontend/src/api.ts
@@ -1,4 +1,4 @@
-import type { Board, Card, List } from './types'
+import type { Board, Card, List, Trash, TrashCounts } from './types'
 
 export const API_URL = import.meta.env.VITE_API_URL ?? 'http://localhost:3001'
 export const WS_URL = API_URL.replace(/^http/, 'ws') + '/ws'
@@ -40,7 +40,18 @@ export const api = {
     request<Card>('PATCH', `/api/cards/${id}`, patch),
   moveCard: (id: string, listId: string, position: number) =>
     request<Card>('PATCH', `/api/cards/${id}/move`, { listId, position }),
+  // Manda para a lixeira -- nao apaga. O evento continua sendo card.deleted { id }.
   deleteCard: (id: string) => request<void>('DELETE', `/api/cards/${id}`),
+
+  // --- Lixeira ---
+  getTrash: () => request<Trash>('GET', '/api/trash'),
+  // Restaurar reusa card.created/list.created: o reducer ja faz upsert por id,
+  // entao o item reaparece no board sem tratamento especial.
+  restoreCard: (id: string) => request<Card>('POST', `/api/trash/cards/${id}/restore`),
+  restoreList: (id: string) => request<List>('POST', `/api/trash/lists/${id}/restore`),
+  purgeCard: (id: string) => request<void>('DELETE', `/api/trash/cards/${id}`),
+  purgeList: (id: string) => request<void>('DELETE', `/api/trash/lists/${id}`),
+  emptyTrash: () => request<{ deleted: TrashCounts }>('DELETE', '/api/trash'),
 }
 
 /**
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index 92700d9..cc28a03 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -20,6 +20,10 @@ export type Board = {
   slug: string
   title: string
   lists: List[]
+  /** Contagem da lixeira, para o icone nascer no estado certo sem um GET extra. */
+  trash: TrashCounts
+  /** Marcado pelo reducer quando chega evento sobre algo que ele nao conhece: pede reload. */
+  stale?: boolean
 }
 
 export type ServerEvent =
@@ -30,3 +34,25 @@ export type ServerEvent =
   | { type: 'card.updated'; payload: Card }
   | { type: 'card.moved'; payload: { id: string; listId: string; position: number } }
   | { type: 'card.deleted'; payload: { id: string } }
+  // So a contagem: o conteudo vem de GET /api/trash quando a janela abre.
+  | { type: 'trash.updated'; payload: TrashCounts }
+
+// --- Lixeira ---
+// DELETE de card/lista e soft delete: o item vai para a lixeira, de onde volta.
+// Ver "A Lixeira" em docs/API.md.
+
+export type TrashCounts = { cards: number; lists: number }
+
+export type TrashedCard = Card & {
+  deletedAt: string
+  /** `deleted: true` => restaurar este card retorna 409: a lista de origem tambem foi para a lixeira. */
+  originalList: { id: string; title: string; deleted: boolean }
+}
+
+export type TrashedList = Omit<List, 'cards'> & {
+  deletedAt: string
+  /** Quantos cards voltam junto se a lista for restaurada. Os que foram jogados fora sozinhos nao contam. */
+  cardCount: number
+}
+
+export type Trash = { cards: TrashedCard[]; lists: TrashedList[]; counts: TrashCounts }
diff --git a/frontend/src/useBoard.ts b/frontend/src/useBoard.ts
index f8d25c1..91647e0 100644
--- a/frontend/src/useBoard.ts
+++ b/frontend/src/useBoard.ts
@@ -17,11 +17,16 @@ function reduce(board: Board, event: ServerEvent): Board {
       const incoming = event.payload
       const exists = board.lists.some((l) => l.id === incoming.id)
       const lists = exists
-        ? board.lists.map((l) =>
-            // Preserva os cards locais: list.updated pode nao trazer os mesmos.
-            l.id === incoming.id ? { ...l, ...incoming, cards: incoming.cards ?? l.cards } : l,
-          )
-        : [...board.lists, { ...incoming, cards: incoming.cards ?? [] }]
+        ? board.lists.map((l) => {
+            if (l.id !== incoming.id) return l
+            // `?? l.cards` nao servia: [] nao e nullish, entao um list.updated com
+            // cards vazio zerava a lista. Um payload SEM a chave preserva o local;
+            // com a chave (mesmo vazia) manda -- e o caso do restore, que traz os
+            // cards de volta de proposito.
+            const cards = 'cards' in incoming ? incoming.cards : l.cards
+            return { ...l, ...incoming, cards: byPosition(cards) }
+          })
+        : [...board.lists, { ...incoming, cards: byPosition(incoming.cards ?? []) }]
       return { ...board, lists: byPosition(lists) }
     }
 
@@ -31,6 +36,9 @@ function reduce(board: Board, event: ServerEvent): Board {
     case 'card.created':
     case 'card.updated': {
       const card = event.payload
+      // Lista desconhecida: mesma situacao do card.moved orfao. O card nao tem
+      // onde entrar, entao marca para recarregar em vez de sumir.
+      if (!board.lists.some((l) => l.id === card.listId)) return { ...board, stale: true }
       const lists = board.lists.map((list) => {
         const without = list.cards.filter((c) => c.id !== card.id)
         if (list.id !== card.listId) {
@@ -45,7 +53,10 @@ function reduce(board: Board, event: ServerEvent): Board {
     case 'card.moved': {
       const { id, listId, position } = event.payload
       const existing = board.lists.flatMap((l) => l.cards).find((c) => c.id === id)
-      if (!existing) return board
+      // Card que este cliente nao conhece: aconteceu fora da nossa visao (criado
+      // e movido entre dois GETs, ou restaurado da lixeira). Descartar em silencio
+      // deixava o board errado ate o proximo reload -- sinaliza para recarregar.
+      if (!existing) return { ...board, stale: true }
       const moved: Card = { ...existing, listId, position }
       const lists = board.lists.map((list) => {
         const without = list.cards.filter((c) => c.id !== id)
@@ -57,6 +68,11 @@ function reduce(board: Board, event: ServerEvent): Board {
       return { ...board, lists }
     }
 
+    // So a contagem muda -- o conteudo da lixeira vem de GET /api/trash quando
+    // a janela abre. Nao ha nada de board para reduzir aqui.
+    case 'trash.updated':
+      return { ...board, trash: event.payload }
+
     case 'card.deleted': {
       const { id } = event.payload
       return {
@@ -79,13 +95,23 @@ export function useBoard() {
   const [connected, setConnected] = useState(false)
   const socketRef = useRef<WebSocket | null>(null)
 
+  // Geracao do load: um GET /api/board em voo pode terminar DEPOIS de eventos WS
+  // que ja aplicamos, e sobrescrever o estado mais novo com o mais velho. A janela
+  // e pequena mas real justamente na reconexao, que e quando o load() roda.
+  const generation = useRef(0)
+
   const load = useCallback(async () => {
+    const mine = ++generation.current
     try {
       const fresh = await api.getBoard()
+      // Outro load comecou enquanto este estava em voo: a resposta dele e mais
+      // nova que a nossa, entao esta aqui esta obsoleta.
+      if (mine !== generation.current) return
       fresh.lists = byPosition(fresh.lists).map((l: List) => ({ ...l, cards: byPosition(l.cards) }))
       setBoard(fresh)
       setError(null)
     } catch (e) {
+      if (mine !== generation.current) return
       setError(e instanceof Error ? e.message : String(e))
     }
   }, [])
@@ -94,6 +120,13 @@ export function useBoard() {
     void load()
   }, [load])
 
+  // O reducer marca `stale` quando recebe um evento sobre algo que ele nao
+  // conhece (ver card.moved/card.created orfaos). Ele nao pode chamar load()
+  // sozinho -- e uma funcao pura -- entao o efeito faz a recarga.
+  useEffect(() => {
+    if (board?.stale) void load()
+  }, [board?.stale, load])
+
   useEffect(() => {
     let closedByUnmount = false
     let retry: ReturnType<typeof setTimeout>

From 62361daa41dd49f187eaeb5d4a2a7781cb1b4f0d Mon Sep 17 00:00:00 2001
From: Renan Locatiz Fernandes <renan.fernandes@outlook.com>
Date: Fri, 21 Aug 2026 01:37:56 -0300
Subject: [PATCH 03/19] feat(frontend): icones do Windows 95 em pixel art

Emoji entregava na hora que nao e Windows 95. Os icones agora sao SVG desenhados
numa grade de 16x16 com a paleta VGA de 16 cores: lixeira vazia e cheia, bandeira
do Iniciar, pasta, documento, aviso, bomba e bandeira do Campo Minado.

Sao recriacoes proprias, nao os arquivos da Microsoft -- os originais sao
proprietarios e este repositorio e publico. O que da a aparencia certa e a
disciplina do formato, nao o arquivo.

shapeRendering="crispEdges" e obrigatorio: sem ele o navegador aplica antialias
e o resultado parece um icone moderno borrado. Escalar so em multiplos inteiros
do tamanho base -- 16px renderizado em 20px mostra linhas de espessura irregular,
que e o detalhe que denuncia a imitacao mais rapido que qualquer outro.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 frontend/src/ConfirmDialog.tsx |   5 +-
 frontend/src/icons.tsx         | 274 +++++++++++++++++++++++++++++++++
 2 files changed, 277 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/icons.tsx

diff --git a/frontend/src/ConfirmDialog.tsx b/frontend/src/ConfirmDialog.tsx
index 8ee8b4b..1bc87b7 100644
--- a/frontend/src/ConfirmDialog.tsx
+++ b/frontend/src/ConfirmDialog.tsx
@@ -1,4 +1,5 @@
 import { Modal } from './Modal'
+import { WarningIcon } from './icons'
 
 export type Confirmation = { title: string; message: string; onYes: () => void }
 
@@ -13,8 +14,8 @@ export function ConfirmDialog({
   return (
     <Modal title={confirmation.title} onClose={onClose} width={320}>
       <div className="confirm-body">
-        <span className="confirm-icon" aria-hidden="true">
-          !
+        <span className="confirm-icon">
+          <WarningIcon size={32} />
         </span>
         <p>{confirmation.message}</p>
       </div>
diff --git a/frontend/src/icons.tsx b/frontend/src/icons.tsx
new file mode 100644
index 0000000..e2650f1
--- /dev/null
+++ b/frontend/src/icons.tsx
@@ -0,0 +1,274 @@
+/**
+ * Icones do Windows 95 em pixel art.
+ *
+ * Sao recriacoes proprias em SVG, nao os arquivos originais da Microsoft: os
+ * icones do Windows 95 sao material proprietario e nao podem ser redistribuidos
+ * num repositorio publico. O que da a aparencia certa nao e o arquivo, e a
+ * disciplina do formato -- grade de 16x16 ou 32x32, um pixel por unidade, e a
+ * paleta VGA de 16 cores.
+ *
+ * Cada icone e um `<svg viewBox="0 0 16 16">` com `shapeRendering="crispEdges"`,
+ * que desliga o antialias: sem isso o navegador borra as bordas e o resultado
+ * parece um icone moderno desfocado em vez de pixel art.
+ *
+ * Escalar so em multiplos inteiros (16, 32, 48). Um icone de 16px desenhado em
+ * 20px mostra linhas de espessura irregular -- e o detalhe que denuncia a
+ * imitacao mais rapido que qualquer outro.
+ */
+
+type IconProps = { size?: number; className?: string; title?: string }
+
+/** Paleta VGA de 16 cores -- a mesma que o Windows 95 usava para os icones do shell. */
+const C = {
+  black: '#000000',
+  gray: '#808080',
+  silver: '#c0c0c0',
+  white: '#ffffff',
+  navy: '#000080',
+  blue: '#0000ff',
+  teal: '#008080',
+  cyan: '#00ffff',
+  green: '#008000',
+  lime: '#00ff00',
+  maroon: '#800000',
+  red: '#ff0000',
+  olive: '#808000',
+  yellow: '#ffff00',
+  purple: '#800080',
+  magenta: '#ff00ff',
+} as const
+
+function Svg({
+  size = 16,
+  className,
+  title,
+  children,
+}: IconProps & { children: React.ReactNode }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      // Sem isto o SVG e antialiased e a pixel art vira borrao.
+      shapeRendering="crispEdges"
+      role={title ? 'img' : 'presentation'}
+      aria-label={title}
+      aria-hidden={title ? undefined : true}
+      focusable="false"
+      className={className}
+    >
+      {children}
+    </svg>
+  )
+}
+
+/** Atalho para um pixel/bloco: `p(x, y, w, h, cor)`. */
+const p = (x: number, y: number, w: number, h: number, fill: string, key?: string | number) => (
+  <rect key={key ?? `${x}-${y}-${w}-${h}`} x={x} y={y} width={w} height={h} fill={fill} />
+)
+
+/**
+ * Lixeira vazia: cesto de tela metalica, tampa por cima.
+ * O Windows 95 diferencia vazia de cheia so pelo conteudo saindo da boca --
+ * o cesto e identico nos dois estados.
+ */
+export function TrashEmptyIcon({ size = 32, className, title = 'Lixeira vazia' }: IconProps) {
+  return (
+    <Svg size={size} className={className} title={title}>
+      {/* tampa */}
+      {p(3, 3, 10, 1, C.gray)}
+      {p(4, 2, 8, 1, C.silver)}
+      {p(6, 1, 4, 1, C.gray)}
+      {/* corpo, levemente conico */}
+      {p(4, 4, 8, 1, C.white)}
+      {p(4, 5, 8, 8, C.silver)}
+      {p(4, 5, 1, 8, C.white)}
+      {p(11, 5, 1, 8, C.gray)}
+      {p(5, 13, 6, 1, C.gray)}
+      {/* ripas verticais da tela */}
+      {p(6, 6, 1, 7, C.gray)}
+      {p(8, 6, 1, 7, C.gray)}
+      {p(10, 6, 1, 7, C.gray)}
+      {/* contorno */}
+      {p(3, 4, 1, 9, C.black)}
+      {p(12, 4, 1, 9, C.black)}
+      {p(4, 14, 8, 1, C.black)}
+    </Svg>
+  )
+}
+
+/** Lixeira cheia: mesmo cesto, com papel amassado transbordando. */
+export function TrashFullIcon({ size = 32, className, title = 'Lixeira cheia' }: IconProps) {
+  return (
+    <Svg size={size} className={className} title={title}>
+      {/* papel saindo da boca, antes da tampa para ficar por tras */}
+      {p(5, 1, 3, 2, C.white)}
+      {p(8, 0, 3, 2, C.silver)}
+      {p(6, 0, 2, 1, C.silver)}
+      {p(9, 2, 2, 1, C.white)}
+      {p(4, 2, 1, 1, C.white)}
+      {/* tampa, encostada de lado porque o cesto esta cheio */}
+      {p(3, 3, 10, 1, C.gray)}
+      {p(4, 3, 8, 1, C.silver)}
+      {/* corpo */}
+      {p(4, 4, 8, 1, C.white)}
+      {p(4, 5, 8, 8, C.silver)}
+      {p(4, 5, 1, 8, C.white)}
+      {p(11, 5, 1, 8, C.gray)}
+      {p(5, 13, 6, 1, C.gray)}
+      {p(6, 6, 1, 7, C.gray)}
+      {p(8, 6, 1, 7, C.gray)}
+      {p(10, 6, 1, 7, C.gray)}
+      {p(3, 4, 1, 9, C.black)}
+      {p(12, 4, 1, 9, C.black)}
+      {p(4, 14, 8, 1, C.black)}
+    </Svg>
+  )
+}
+
+/** A bandeira de quatro cores do botao Iniciar, ondulada. */
+export function WindowsFlagIcon({ size = 16, className, title }: IconProps) {
+  return (
+    <Svg size={size} className={className} title={title}>
+      {/* Cada quadrante e desenhado como duas colunas com alturas diferentes:
+          e o que cria a ondulacao da bandeira sem curva de verdade. */}
+      {/* vermelho, superior esquerdo */}
+      {p(1, 3, 3, 5, C.red)}
+      {p(4, 2, 3, 5, C.red)}
+      {/* verde, superior direito */}
+      {p(8, 1, 3, 5, C.green)}
+      {p(11, 1, 3, 5, C.green)}
+      {/* azul, inferior esquerdo */}
+      {p(1, 9, 3, 5, C.blue)}
+      {p(4, 8, 3, 5, C.blue)}
+      {/* amarelo, inferior direito */}
+      {p(8, 7, 3, 5, C.yellow)}
+      {p(11, 7, 3, 5, C.yellow)}
+    </Svg>
+  )
+}
+
+/** Meu Computador: monitor CRT sobre a base, com a tela em ciano. */
+export function ComputerIcon({ size = 32, className, title = 'Meu Computador' }: IconProps) {
+  return (
+    <Svg size={size} className={className} title={title}>
+      {p(2, 2, 12, 9, C.black)}
+      {p(3, 3, 10, 7, C.silver)}
+      {p(4, 4, 8, 5, C.teal)}
+      {p(4, 4, 8, 1, C.cyan)}
+      {p(3, 9, 10, 1, C.gray)}
+      {/* pescoco e base */}
+      {p(6, 11, 4, 1, C.gray)}
+      {p(4, 12, 8, 2, C.silver)}
+      {p(4, 12, 8, 1, C.white)}
+      {p(4, 14, 8, 1, C.black)}
+      {p(10, 13, 1, 1, C.green)}
+    </Svg>
+  )
+}
+
+/** Pasta amarela fechada -- a lista, na janela da Lixeira. */
+export function FolderIcon({ size = 16, className, title = 'Pasta' }: IconProps) {
+  return (
+    <Svg size={size} className={className} title={title}>
+      {/* aba */}
+      {p(1, 3, 5, 1, C.black)}
+      {p(6, 4, 2, 1, C.black)}
+      {/* corpo */}
+      {p(1, 4, 14, 9, C.yellow)}
+      {p(1, 4, 14, 1, C.white)}
+      {p(2, 5, 12, 7, C.olive)}
+      {p(2, 5, 12, 6, C.yellow)}
+      {p(1, 13, 14, 1, C.black)}
+      {p(0, 3, 1, 11, C.black)}
+      {p(15, 4, 1, 10, C.black)}
+    </Svg>
+  )
+}
+
+/** Documento de texto -- o card, na janela da Lixeira. */
+export function DocumentIcon({ size = 16, className, title = 'Documento' }: IconProps) {
+  return (
+    <Svg size={size} className={className} title={title}>
+      {p(3, 1, 8, 14, C.black)}
+      {p(4, 2, 7, 12, C.white)}
+      {/* orelha dobrada no canto superior direito */}
+      {p(9, 1, 2, 1, C.black)}
+      {p(10, 2, 1, 3, C.black)}
+      {p(9, 2, 1, 2, C.silver)}
+      {/* linhas de texto */}
+      {[5, 7, 9, 11].map((y) => p(5, y, 5, 1, C.gray, `l${y}`))}
+    </Svg>
+  )
+}
+
+/** Ampulheta -- estado de carregando. */
+export function HourglassIcon({ size = 16, className, title = 'Aguarde' }: IconProps) {
+  return (
+    <Svg size={size} className={className} title={title}>
+      {p(4, 2, 8, 1, C.black)}
+      {p(4, 13, 8, 1, C.black)}
+      {p(5, 3, 6, 2, C.white)}
+      {p(6, 5, 4, 2, C.silver)}
+      {p(7, 7, 2, 2, C.gray)}
+      {p(6, 9, 4, 2, C.silver)}
+      {p(5, 11, 6, 2, C.white)}
+      {/* areia acumulada embaixo */}
+      {p(6, 11, 4, 2, C.yellow)}
+      {p(5, 3, 1, 10, C.black)}
+      {p(10, 3, 1, 10, C.black)}
+    </Svg>
+  )
+}
+
+/** Aviso amarelo -- usado no ConfirmDialog. */
+export function WarningIcon({ size = 32, className, title = 'Atencao' }: IconProps) {
+  return (
+    <Svg size={size} className={className} title={title}>
+      {/* triangulo em degraus: cada linha uma unidade mais larga */}
+      {p(7, 1, 2, 1, C.black)}
+      {Array.from({ length: 11 }, (_, i) => p(7 - i, 2 + i, 2 + i * 2, 1, C.black, `t${i}`))}
+      {p(7, 2, 2, 1, C.yellow)}
+      {Array.from({ length: 9 }, (_, i) => p(6 - i, 3 + i, 4 + i * 2, 1, C.yellow, `f${i}`))}
+      {/* exclamacao */}
+      {p(7, 5, 2, 5, C.black)}
+      {p(7, 11, 2, 2, C.black)}
+    </Svg>
+  )
+}
+
+/** Bomba do Campo Minado -- tambem o icone de erro fatal do Win95. */
+export function BombIcon({ size = 16, className, title = 'Mina' }: IconProps) {
+  return (
+    <Svg size={size} className={className} title={title}>
+      {p(6, 4, 5, 1, C.black)}
+      {p(4, 5, 9, 2, C.black)}
+      {p(3, 7, 11, 5, C.black)}
+      {p(4, 12, 9, 1, C.black)}
+      {p(6, 13, 5, 1, C.black)}
+      {/* brilho especular: e o que faz a esfera parecer redonda */}
+      {p(5, 6, 2, 1, C.white)}
+      {p(5, 7, 1, 1, C.white)}
+      {/* pavio */}
+      {p(9, 2, 1, 2, C.gray)}
+      {p(10, 1, 2, 1, C.gray)}
+      {p(12, 0, 1, 2, C.red)}
+    </Svg>
+  )
+}
+
+/** Bandeira vermelha do Campo Minado. */
+export function FlagIcon({ size = 16, className, title = 'Bandeira' }: IconProps) {
+  return (
+    <Svg size={size} className={className} title={title}>
+      {p(7, 2, 1, 7, C.black)}
+      {p(3, 3, 4, 1, C.red)}
+      {p(2, 4, 5, 1, C.red)}
+      {p(3, 5, 4, 1, C.red)}
+      {p(4, 6, 3, 1, C.red)}
+      {p(5, 9, 5, 1, C.black)}
+      {p(4, 10, 7, 1, C.black)}
+      {p(3, 11, 9, 2, C.black)}
+    </Svg>
+  )
+}

From 75f76413e01ef072710bdad368e1de5222e57640 Mon Sep 17 00:00:00 2001
From: Renan Locatiz Fernandes <renan.fernandes@outlook.com>
Date: Fri, 21 Aug 2026 01:38:15 -0300
Subject: [PATCH 04/19] feat(frontend): Campo Minado jogavel e protetor de tela

O seed sempre teve um card "Jogar Campo Minado". Agora ele abre o jogo: 9x9 com
10 minas, flood fill, bandeira com botao direito, cronometro e a carinha que
reinicia. Qualquer card com esse titulo funciona -- nao ha id magico.

As minas so sao sorteadas depois do primeiro clique, excluindo a celula clicada e
a vizinhanca dela: garante que a primeira jogada sempre abre uma area em vez de
um quadradinho, e torna impossivel perder de cara.

O protetor de tela aparece apos 2 minutos. So input humano conta como atividade:
se trafego de WebSocket resetasse o timer, ele nunca apareceria com duas abas
abertas.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 frontend/src/Minesweeper.tsx | 257 +++++++++++++++++++++++++++++++++++
 frontend/src/ScreenSaver.tsx |  53 ++++++++
 frontend/src/minesweeper.css | 144 ++++++++++++++++++++
 3 files changed, 454 insertions(+)
 create mode 100644 frontend/src/Minesweeper.tsx
 create mode 100644 frontend/src/ScreenSaver.tsx
 create mode 100644 frontend/src/minesweeper.css

diff --git a/frontend/src/Minesweeper.tsx b/frontend/src/Minesweeper.tsx
new file mode 100644
index 0000000..ba66761
--- /dev/null
+++ b/frontend/src/Minesweeper.tsx
@@ -0,0 +1,257 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { Modal } from './Modal'
+import { BombIcon, FlagIcon } from './icons'
+import './minesweeper.css'
+
+/* Tabuleiro classico "iniciante": 9x9 com 10 minas. */
+const SIZE = 9
+const MINES = 10
+const TOTAL = SIZE * SIZE
+
+type CellState = 'hidden' | 'revealed' | 'flagged'
+
+type Cell = {
+  mine: boolean
+  /** Quantidade de minas nas 8 celulas vizinhas. So vale depois do 1o clique. */
+  adjacent: number
+  state: CellState
+}
+
+/** 'ready' = minas ainda nao foram sorteadas; o cronometro so anda em 'playing'. */
+type Status = 'ready' | 'playing' | 'won' | 'lost'
+
+type Game = { cells: Cell[]; status: Status }
+
+const FACES: Record<Status, string> = {
+  ready: '\u{1F600}',
+  playing: '\u{1F600}',
+  won: '\u{1F60E}',
+  lost: '\u{1F635}',
+}
+
+function freshGame(): Game {
+  return {
+    cells: Array.from({ length: TOTAL }, () => ({
+      mine: false,
+      adjacent: 0,
+      state: 'hidden' as CellState,
+    })),
+    status: 'ready',
+  }
+}
+
+/** Indices das ate 8 celulas vizinhas. O clamp por linha evita o wrap de borda:
+    sem ele a celula da coluna 8 "vizinharia" a coluna 0 da linha seguinte. */
+function neighbors(index: number): number[] {
+  const row = Math.floor(index / SIZE)
+  const col = index % SIZE
+  const out: number[] = []
+  for (let dr = -1; dr <= 1; dr++) {
+    for (let dc = -1; dc <= 1; dc++) {
+      if (dr === 0 && dc === 0) continue
+      const r = row + dr
+      const c = col + dc
+      if (r < 0 || r >= SIZE || c < 0 || c >= SIZE) continue
+      out.push(r * SIZE + c)
+    }
+  }
+  return out
+}
+
+/** As minas so sao sorteadas depois do primeiro clique, e a celula clicada mais
+    toda a sua vizinhanca ficam de fora do sorteio. Duas razoes: o primeiro clique
+    nunca pode matar (seria um jogo perdido sem jogada), e zerando a vizinhanca
+    garantimos `adjacent === 0` ali, o que dispara o flood fill e abre uma area
+    inicial em vez de um unico quadradinho com um numero. */
+function plantMines(cells: Cell[], safeIndex: number): Cell[] {
+  const forbidden = new Set<number>([safeIndex, ...neighbors(safeIndex)])
+  const pool: number[] = []
+  for (let i = 0; i < TOTAL; i++) if (!forbidden.has(i)) pool.push(i)
+
+  // Fisher-Yates parcial: embaralha so o suficiente para tirar MINES indices.
+  for (let i = 0; i < MINES; i++) {
+    const j = i + Math.floor(Math.random() * (pool.length - i))
+    const tmp = pool[i]
+    pool[i] = pool[j]
+    pool[j] = tmp
+  }
+
+  const next = cells.map((cell) => ({ ...cell, mine: false, adjacent: 0 }))
+  for (let i = 0; i < MINES; i++) next[pool[i]].mine = true
+  for (let i = 0; i < TOTAL; i++) {
+    if (next[i].mine) continue
+    next[i].adjacent = neighbors(i).filter((n) => next[n].mine).length
+  }
+  return next
+}
+
+/** Flood fill iterativo a partir de `start`.
+    A pilha explicita (em vez de recursao) evita estourar o stack, e marcar a
+    celula como revelada ANTES de empilhar os vizinhos e o que impede o loop
+    infinito: cada celula so entra na parte "expande" uma unica vez, porque na
+    segunda visita ela ja esta em 'revealed' e o `continue` corta o caminho. */
+function revealFrom(cells: Cell[], start: number): Cell[] {
+  const next = cells.slice()
+  const stack: number[] = [start]
+  while (stack.length > 0) {
+    const i = stack.pop() as number
+    const cell = next[i]
+    if (cell.state === 'revealed' || cell.state === 'flagged') continue
+    next[i] = { ...cell, state: 'revealed' }
+    // Celula com vizinho minado e parede: revela, mas nao propaga.
+    if (!cell.mine && cell.adjacent === 0) {
+      for (const n of neighbors(i)) stack.push(n)
+    }
+  }
+  return next
+}
+
+/** Vitoria = toda celula sem mina revelada. Nao exige bandeira nas minas —
+    e a regra do Campo Minado original. */
+function hasWon(cells: Cell[]): boolean {
+  return cells.every((c) => c.mine || c.state === 'revealed')
+}
+
+function display(value: number): string {
+  const clamped = Math.max(-99, Math.min(999, value))
+  const sign = clamped < 0 ? '-' : ''
+  return sign + String(Math.abs(clamped)).padStart(sign ? 2 : 3, '0')
+}
+
+export function Minesweeper({ onClose }: { onClose: () => void }) {
+  const [game, setGame] = useState<Game>(freshGame)
+  const [seconds, setSeconds] = useState(0)
+
+  const flags = useMemo(
+    () => game.cells.filter((c) => c.state === 'flagged').length,
+    [game.cells],
+  )
+
+  useEffect(() => {
+    if (game.status !== 'playing') return
+    const id = window.setInterval(() => setSeconds((s) => Math.min(999, s + 1)), 1000)
+    return () => window.clearInterval(id)
+  }, [game.status])
+
+  const restart = useCallback(() => {
+    setGame(freshGame())
+    setSeconds(0)
+  }, [])
+
+  const handleReveal = useCallback((index: number) => {
+    setGame((prev) => {
+      if (prev.status === 'won' || prev.status === 'lost') return prev
+      if (prev.cells[index].state !== 'hidden') return prev
+
+      // O sorteio acontece aqui, dentro do updater, para que a celula clicada
+      // esteja sempre disponivel como semente do "primeiro clique seguro".
+      const cells = prev.status === 'ready' ? plantMines(prev.cells, index) : prev.cells
+
+      if (cells[index].mine) {
+        return {
+          cells: cells.map((c) => (c.mine ? { ...c, state: 'revealed' as CellState } : c)),
+          status: 'lost',
+        }
+      }
+
+      const opened = revealFrom(cells, index)
+      return { cells: opened, status: hasWon(opened) ? 'won' : 'playing' }
+    })
+  }, [])
+
+  const handleFlag = useCallback((index: number) => {
+    setGame((prev) => {
+      if (prev.status === 'won' || prev.status === 'lost') return prev
+      const cell = prev.cells[index]
+      if (cell.state === 'revealed') return prev
+      const cells = prev.cells.slice()
+      cells[index] = { ...cell, state: cell.state === 'flagged' ? 'hidden' : 'flagged' }
+      // Bandeira antes do primeiro clique nao inicia o cronometro: sem minas
+      // sorteadas ainda nao existe partida para cronometrar.
+      return { cells, status: prev.status }
+    })
+  }, [])
+
+  return (
+    <Modal title="Campo Minado" onClose={onClose} width={300}>
+      <div className="ms-frame">
+        <div className="ms-hud">
+          <span className="ms-display" aria-label={`Minas restantes: ${MINES - flags}`}>
+            {display(MINES - flags)}
+          </span>
+          <button
+            type="button"
+            className="ms-face"
+            onClick={restart}
+            aria-label="Reiniciar jogo"
+          >
+            <span aria-hidden="true">{FACES[game.status]}</span>
+          </button>
+          <span className="ms-display" aria-label={`Tempo: ${seconds} segundos`}>
+            {display(seconds)}
+          </span>
+        </div>
+
+        <div className="ms-board" role="grid" aria-label="Tabuleiro 9 por 9 com 10 minas">
+          {game.cells.map((cell, i) => {
+            const row = Math.floor(i / SIZE) + 1
+            const col = (i % SIZE) + 1
+            const revealed = cell.state === 'revealed'
+            const isMine = revealed && cell.mine
+            const number = revealed && !cell.mine && cell.adjacent > 0 ? cell.adjacent : 0
+
+            const label =
+              cell.state === 'flagged'
+                ? `Linha ${row}, coluna ${col}: marcada com bandeira`
+                : !revealed
+                  ? `Linha ${row}, coluna ${col}: fechada`
+                  : isMine
+                    ? `Linha ${row}, coluna ${col}: mina`
+                    : number > 0
+                      ? `Linha ${row}, coluna ${col}: ${number} minas por perto`
+                      : `Linha ${row}, coluna ${col}: vazia`
+
+            return (
+              <button
+                key={i}
+                type="button"
+                className={
+                  'ms-cell' +
+                  (revealed ? ' ms-revealed' : '') +
+                  (isMine ? ' ms-mine' : '') +
+                  (number > 0 ? ` ms-n${number}` : '')
+                }
+                aria-label={label}
+                onClick={() => handleReveal(i)}
+                onContextMenu={(e) => {
+                  e.preventDefault()
+                  handleFlag(i)
+                }}
+              >
+                <span aria-hidden="true" className="ms-glyph">
+                  {cell.state === 'flagged' ? (
+                    <FlagIcon size={14} />
+                  ) : isMine ? (
+                    <BombIcon size={14} />
+                  ) : number > 0 ? (
+                    number
+                  ) : (
+                    ''
+                  )}
+                </span>
+              </button>
+            )
+          })}
+        </div>
+
+        <p className="ms-hint" role="status">
+          {game.status === 'won'
+            ? 'Voce venceu! Campo limpo.'
+            : game.status === 'lost'
+              ? 'Boom. Clique na carinha para jogar de novo.'
+              : 'Clique para abrir, botao direito para marcar bandeira.'}
+        </p>
+      </div>
+    </Modal>
+  )
+}
diff --git a/frontend/src/ScreenSaver.tsx b/frontend/src/ScreenSaver.tsx
new file mode 100644
index 0000000..f4fc29d
--- /dev/null
+++ b/frontend/src/ScreenSaver.tsx
@@ -0,0 +1,53 @@
+import { useEffect, useRef, useState } from 'react'
+
+const IDLE_MS = 120_000
+
+/**
+ * O protetor de tela "Tubos"/logotipo do Windows 95: aparece apos 2 minutos de
+ * ociosidade e some ao primeiro sinal de vida.
+ *
+ * A parte que importa e o que conta como ociosidade. Um board com WebSocket
+ * recebe eventos o tempo todo -- se o timer resetasse com atividade de rede, o
+ * protetor nunca apareceria com duas abas abertas. So input humano conta.
+ */
+export function ScreenSaver() {
+  const [idle, setIdle] = useState(false)
+  const timer = useRef<ReturnType<typeof setTimeout>>(undefined)
+
+  useEffect(() => {
+    const arm = () => {
+      clearTimeout(timer.current)
+      timer.current = setTimeout(() => setIdle(true), IDLE_MS)
+    }
+
+    const wake = () => {
+      setIdle((on) => {
+        if (on) return false
+        return on
+      })
+      arm()
+    }
+
+    // `pointermove` cobre mouse, caneta e toque numa assinatura so.
+    const events = ['pointermove', 'pointerdown', 'keydown', 'wheel'] as const
+    for (const e of events) window.addEventListener(e, wake, { passive: true })
+    arm()
+
+    return () => {
+      clearTimeout(timer.current)
+      for (const e of events) window.removeEventListener(e, wake)
+    }
+  }, [])
+
+  if (!idle) return null
+
+  return (
+    <div className="screensaver" role="presentation">
+      <div className="screensaver-logo">
+        <span className="ss-line ss-1">TeamApp</span>
+        <span className="ss-line ss-2">95</span>
+      </div>
+      <p className="screensaver-hint">mova o mouse para voltar</p>
+    </div>
+  )
+}
diff --git a/frontend/src/minesweeper.css b/frontend/src/minesweeper.css
new file mode 100644
index 0000000..3322d1a
--- /dev/null
+++ b/frontend/src/minesweeper.css
@@ -0,0 +1,144 @@
+/* O 98.css nao tem componente de grade nem display de 7 segmentos, entao aqui o
+   CSS proprio e legitimo. Tudo fica no prefixo .ms- para nao vazar no styles.css
+   compartilhado. */
+
+.ms-frame {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  /* Relevo afundado do "campo" do Campo Minado original. */
+  padding: 6px;
+  box-shadow:
+    inset 2px 2px 0 #808080,
+    inset -2px -2px 0 #fff;
+  background: #c0c0c0;
+}
+
+.ms-hud {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 6px;
+  box-shadow:
+    inset 2px 2px 0 #808080,
+    inset -2px -2px 0 #fff;
+}
+
+/* Display digital: numeros vermelhos em fundo preto. */
+.ms-display {
+  min-width: 44px;
+  padding: 1px 4px;
+  background: #000;
+  color: #f00;
+  font-family: 'Courier New', monospace;
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 1.15;
+  letter-spacing: 1px;
+  text-align: center;
+  border: 1px solid #808080;
+}
+
+/* Botao da carinha: o 98.css ja da o relevo de botao, so ajustamos o tamanho. */
+.ms-face {
+  min-width: 28px;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  font-size: 15px;
+  line-height: 1;
+}
+
+.ms-board {
+  display: grid;
+  grid-template-columns: repeat(9, 22px);
+  grid-auto-rows: 22px;
+  gap: 0;
+  box-shadow:
+    inset 2px 2px 0 #808080,
+    inset -2px -2px 0 #fff;
+  padding: 3px;
+  width: max-content;
+  margin: 0 auto;
+}
+
+/* Celula fechada: relevo com claro em cima/esquerda e escuro embaixo/direita.
+   Usamos box-shadow inset em vez de border porque a troca fechada -> aberta
+   mudaria a espessura da borda e o grid inteiro tremeria a cada clique. */
+.ms-board .ms-cell {
+  width: 22px;
+  height: 22px;
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  background: #c0c0c0;
+  border: none;
+  border-radius: 0;
+  box-shadow:
+    inset 2px 2px 0 #fff,
+    inset -2px -2px 0 #808080;
+  font-family: 'Courier New', monospace;
+  font-size: 13px;
+  font-weight: bold;
+  line-height: 1;
+  text-align: center;
+  cursor: default;
+  user-select: none;
+}
+
+.ms-board .ms-cell:focus-visible {
+  outline: 1px dotted #000;
+  outline-offset: -4px;
+}
+
+/* Celula aberta: afundada, so o fio cinza em cima/esquerda. */
+.ms-board .ms-cell.ms-revealed,
+.ms-board .ms-cell.ms-revealed:active {
+  box-shadow: inset 1px 1px 0 #808080;
+}
+
+.ms-board .ms-cell.ms-mine {
+  background: #f00;
+}
+
+/* Cores classicas dos numeros. */
+.ms-n1 {
+  color: #0000ff;
+}
+.ms-n2 {
+  color: #008000;
+}
+.ms-n3 {
+  color: #ff0000;
+}
+.ms-n4 {
+  color: #000080;
+}
+.ms-n5 {
+  color: #800000;
+}
+.ms-n6 {
+  color: #008080;
+}
+.ms-n7 {
+  color: #000000;
+}
+.ms-n8 {
+  color: #808080;
+}
+
+.ms-hint {
+  margin: 0;
+  font-size: 11px;
+  text-align: center;
+  color: #333;
+}
+
+/* A celula alterna entre numero (texto) e icone (SVG); sem line-height 0 no
+   caso do SVG o glifo empurra a grade e as celulas ficam de alturas diferentes. */
+.ms-glyph {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}

From 6b1dd99b81a89d04d884f91f2a3766b50c70b8dd Mon Sep 17 00:00:00 2001
From: Renan Locatiz Fernandes <renan.fernandes@outlook.com>
Date: Fri, 21 Aug 2026 01:38:15 -0300
Subject: [PATCH 05/19] feat(frontend): busca, atalhos de teclado e relogio na
 bandeja

Busca por titulo e descricao com N/T/R/? e / como atalhos, janela de ajuda e
relogio na bandeja.

A busca realca os cards que casam e esmaece o resto, em vez de filtrar. Esconder
os que nao casam mudaria os vizinhos de cada card, e como positionFor() calcula a
posicao a partir dos vizinhos do destino, arrastar durante uma busca gravaria a
posicao errada.

Os atalhos ficam desligados enquanto ha janela aberta ou o foco esta num campo:
senao "n" digitado num dialogo criaria uma lista no board por tras dele.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 frontend/src/App.tsx        | 203 ++++++++++++++++++++++++-
 frontend/src/ListColumn.tsx |  10 +-
 frontend/src/styles.css     | 285 +++++++++++++++++++++++++++++++++++-
 frontend/src/useHotkeys.ts  |  44 ++++++
 4 files changed, 527 insertions(+), 15 deletions(-)
 create mode 100644 frontend/src/useHotkeys.ts

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 9b03769..18152c3 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import type { FormEvent, ReactNode } from 'react'
 import { api, API_URL, positionFor } from './api'
 import { useBoard } from './useBoard'
@@ -8,6 +8,11 @@ import type { Confirmation } from './ConfirmDialog'
 import { ListColumn } from './ListColumn'
 import type { CardDropTarget } from './ListColumn'
 import { Modal } from './Modal'
+import { TrashWindow } from './TrashWindow'
+import { Minesweeper } from './Minesweeper'
+import { useHotkeys } from './useHotkeys'
+import { ScreenSaver } from './ScreenSaver'
+import { TrashEmptyIcon, TrashFullIcon, WindowsFlagIcon } from './icons'
 import type { List } from './types'
 
 /** O que esta sendo arrastado. Card e lista compartilham a tela, nao o alvo. */
@@ -34,6 +39,36 @@ export default function App() {
   const [newList, setNewList] = useState('')
   const [startOpen, setStartOpen] = useState(false)
   const [aboutOpen, setAboutOpen] = useState(false)
+  const [trashOpen, setTrashOpen] = useState(false)
+  const [minesweeperOpen, setMinesweeperOpen] = useState(false)
+  const [search, setSearch] = useState('')
+  const [helpOpen, setHelpOpen] = useState(false)
+  const [clock, setClock] = useState(() => new Date())
+  const searchRef = useRef<HTMLInputElement>(null)
+  const newListRef = useRef<HTMLInputElement>(null)
+
+  // Relogio da bandeja. 10s em vez de 1s: o display so mostra hora e minuto,
+  // entao segundo a segundo seria render descartado.
+  useEffect(() => {
+    const tick = setInterval(() => setClock(new Date()), 10_000)
+    return () => clearInterval(tick)
+  }, [])
+
+  // Qualquer janela aberta desliga os atalhos: senao "n" digitado num dialogo
+  // criaria uma lista no board por tras dele.
+  const modalOpen = minesweeperOpen || trashOpen || aboutOpen || helpOpen || confirmation !== null
+  useHotkeys(
+    {
+      n: () => newListRef.current?.focus(),
+      '/': () => searchRef.current?.focus(),
+      'ctrl+f': () => searchRef.current?.focus(),
+      t: () => setTrashOpen(true),
+      r: () => void reload(),
+      '?': () => setHelpOpen(true),
+      escape: () => setSearch(''),
+    },
+    !modalOpen && openCardId === null,
+  )
 
   // Um clique em qualquer lugar fecha o menu Iniciar, como no Windows 95.
   useEffect(() => {
@@ -97,6 +132,30 @@ export default function App() {
 
   const cardCount = board.lists.reduce((n, l) => n + l.cards.length, 0)
 
+  // Busca por titulo e descricao. Devolve o conjunto de ids que casam em vez de
+  // filtrar as listas: esconder os cards que nao casam quebraria o drag-and-drop
+  // (as posicoes dos vizinhos mudariam) -- realcar preserva o board inteiro.
+  const query = search.trim().toLowerCase()
+  const matches = useMemo(() => {
+    if (!query) return null
+    const ids = new Set<string>()
+    for (const list of board.lists) {
+      for (const card of list.cards) {
+        if (
+          card.title.toLowerCase().includes(query) ||
+          card.description.toLowerCase().includes(query)
+        ) {
+          ids.add(card.id)
+        }
+      }
+    }
+    return ids
+  }, [query, board.lists])
+  // `board.trash` vem do GET /api/board e e atualizado pelo evento trash.updated:
+  // o icone troca de estado sem precisar abrir a janela.
+  const trashCount = (board.trash?.cards ?? 0) + (board.trash?.lists ?? 0)
+  const trashFull = trashCount > 0
+
   return (
     <div className="desktop">
       <div className="board-header">
@@ -104,11 +163,33 @@ export default function App() {
         <span className={connected ? 'status online' : 'status offline'}>
           {connected ? 'conectado' : 'reconectando...'}
         </span>
+        <div className="search-box">
+          <input
+            ref={searchRef}
+            type="text"
+            value={search}
+            placeholder="Buscar cards... (/)"
+            aria-label="Buscar cards"
+            onChange={(e) => setSearch(e.target.value)}
+          />
+          {query && (
+            <span className="search-count">
+              {matches?.size ?? 0} de {cardCount}
+            </span>
+          )}
+          {query && (
+            <button type="button" onClick={() => setSearch('')} title="Limpar busca (Esc)">
+              X
+            </button>
+          )}
+        </div>
+
         <form className="add-list" onSubmit={submitList}>
           <input
+            ref={newListRef}
             type="text"
             value={newList}
-            placeholder="Nova lista..."
+            placeholder="Nova lista... (N)"
             onChange={(e) => setNewList(e.target.value)}
           />
           <button type="submit" disabled={!newList.trim()}>
@@ -126,6 +207,25 @@ export default function App() {
         </div>
       )}
 
+      <button
+        className="desktop-icon"
+        onDoubleClick={() => setTrashOpen(true)}
+        title="Lixeira (duplo-clique para abrir)"
+      >
+        <span className="desktop-icon-glyph">
+          {trashFull ? <TrashFullIcon size={32} /> : <TrashEmptyIcon size={32} />}
+        </span>
+        <span className="desktop-icon-label">
+          Lixeira
+          {trashFull && (
+            <>
+              <br />
+              {trashCount} {trashCount === 1 ? 'item' : 'itens'}
+            </>
+          )}
+        </span>
+      </button>
+
       <div className="board" onDragEnd={endDrag}>
         {board.lists.map((list, index) => (
           <ListColumn
@@ -139,18 +239,25 @@ export default function App() {
             listDropSlot={listDropSlot}
             onCardDragStart={(id) => setDrag({ kind: 'card', id })}
             onListDragStart={(id) => setDrag({ kind: 'list', id })}
+            matches={matches}
             onCardHover={setCardDropTarget}
             onListHover={setListDropSlot}
             onCardDrop={dropCard}
             onListDrop={dropList}
             onDragEnd={endDrag}
-            onOpenCard={(card) => setOpenCardId(card.id)}
+            onOpenCard={(card) => {
+              // O seed cria um card "Jogar Campo Minado". Abrir o jogo em vez do
+              // dialogo de propriedades fecha a piada -- qualquer card com esse
+              // titulo funciona, nao ha id magico envolvido.
+              if (/campo minado/i.test(card.title)) return setMinesweeperOpen(true)
+              setOpenCardId(card.id)
+            }}
             onAddCard={(listId, title) => void run(() => api.createCard(listId, title))}
             onRename={(l, title) => void run(() => api.renameList(l.id, title))}
             onDelete={(l) =>
               setConfirmation({
                 title: 'Apagar lista',
-                message: `Apagar "${l.title}" e seus ${l.cards.length} card(s)? Isso nao volta.`,
+                message: `Mandar "${l.title}" e seus ${l.cards.length} card(s) para a Lixeira?`,
                 onYes: () => void run(() => api.deleteList(l.id)),
               })
             }
@@ -170,7 +277,7 @@ export default function App() {
           onDelete={() =>
             setConfirmation({
               title: 'Apagar card',
-              message: `Apagar o card "${openCard.title}"?`,
+              message: `Mandar o card "${openCard.title}" para a Lixeira?`,
               onYes: () => {
                 void run(() => api.deleteCard(openCard.id))
                 setOpenCardId(null)
@@ -180,6 +287,48 @@ export default function App() {
         />
       )}
 
+      {minesweeperOpen && <Minesweeper onClose={() => setMinesweeperOpen(false)} />}
+
+      {trashOpen && (
+        <TrashWindow
+          onClose={() => setTrashOpen(false)}
+          onConfirm={setConfirmation}
+          counts={board.trash ?? { cards: 0, lists: 0 }}
+        />
+      )}
+
+      {helpOpen && (
+        <Modal title="Atalhos de teclado" onClose={() => setHelpOpen(false)} width={300}>
+          <ul className="shortcut-list">
+            <li>
+              <kbd>N</kbd> <span>Nova lista</span>
+            </li>
+            <li>
+              <kbd>/</kbd> <span>Buscar cards</span>
+            </li>
+            <li>
+              <kbd>T</kbd> <span>Abrir a Lixeira</span>
+            </li>
+            <li>
+              <kbd>R</kbd> <span>Atualizar o board</span>
+            </li>
+            <li>
+              <kbd>Esc</kbd> <span>Limpar a busca / fechar janela</span>
+            </li>
+            <li>
+              <kbd>?</kbd> <span>Esta janela</span>
+            </li>
+          </ul>
+          <p className="shortcut-note">
+            Os atalhos ficam desligados enquanto uma janela está aberta ou você está digitando
+            num campo.
+          </p>
+          <div className="dialog-buttons">
+            <button onClick={() => setHelpOpen(false)}>OK</button>
+          </div>
+        </Modal>
+      )}
+
       {confirmation && (
         <ConfirmDialog confirmation={confirmation} onClose={() => setConfirmation(null)} />
       )}
@@ -203,6 +352,8 @@ export default function App() {
         </Modal>
       )}
 
+      <ScreenSaver />
+
       <div className="taskbar">
         <button
           className="start"
@@ -211,6 +362,7 @@ export default function App() {
             setStartOpen((open) => !open)
           }}
         >
+          <WindowsFlagIcon size={16} />
           Iniciar
         </button>
 
@@ -238,6 +390,37 @@ export default function App() {
                 </button>
               </li>
               <li className="start-separator" />
+              <li>
+                <button
+                  onClick={() => {
+                    setStartOpen(false)
+                    setMinesweeperOpen(true)
+                  }}
+                >
+                  Campo Minado
+                </button>
+              </li>
+              <li>
+                <button
+                  onClick={() => {
+                    setStartOpen(false)
+                    setTrashOpen(true)
+                  }}
+                >
+                  Lixeira{trashFull ? ` (${trashCount})` : ''}
+                </button>
+              </li>
+              <li className="start-separator" />
+              <li>
+                <button
+                  onClick={() => {
+                    setStartOpen(false)
+                    setHelpOpen(true)
+                  }}
+                >
+                  Atalhos de teclado
+                </button>
+              </li>
               <li>
                 <button
                   onClick={() => {
@@ -255,6 +438,16 @@ export default function App() {
         <span className="taskbar-item">TeamApp 95</span>
         <span className="tray">
           {board.lists.length} listas · {cardCount} cards
+          {trashFull && (
+            <>
+              {' · '}
+              <TrashFullIcon size={16} className="tray-icon" />
+              {trashCount}
+            </>
+          )}
+          <span className="tray-clock">
+            {clock.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })}
+          </span>
         </span>
       </div>
     </div>
diff --git a/frontend/src/ListColumn.tsx b/frontend/src/ListColumn.tsx
index d919a49..3c2b8fc 100644
--- a/frontend/src/ListColumn.tsx
+++ b/frontend/src/ListColumn.tsx
@@ -11,6 +11,8 @@ type Props = {
   draggingCardId: string | null
   draggingListId: string | null
   cardDropTarget: CardDropTarget | null
+  /** Ids que casam com a busca, ou null quando nao ha busca ativa. */
+  matches: Set<string> | null
   /** Slot (indice no array de listas) onde a lista arrastada vai cair. */
   listDropSlot: number | null
   isLast: boolean
@@ -34,7 +36,8 @@ function cardSlot(event: DragEvent, index: number): number {
 }
 
 export function ListColumn(props: Props) {
-  const { list, index, draggingCardId, draggingListId, cardDropTarget, listDropSlot } = props
+  const { list, index, draggingCardId, draggingListId, cardDropTarget, listDropSlot, matches } =
+    props
   const [renaming, setRenaming] = useState(false)
   const [draftTitle, setDraftTitle] = useState(list.title)
   const [newCard, setNewCard] = useState('')
@@ -161,7 +164,10 @@ export function ListColumn(props: Props) {
             className={
               'card' +
               (draggingCardId === card.id ? ' dragging' : '') +
-              (isCardTarget(i) ? ' drop-here' : '')
+              (isCardTarget(i) ? ' drop-here' : '') +
+              // Busca realca em vez de filtrar: esconder os que nao casam mudaria
+              // os vizinhos e quebraria o calculo de position no drop.
+              (matches === null ? '' : matches.has(card.id) ? ' card-match' : ' card-dimmed')
             }
             draggable
             onDragStart={(e) => {
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 9477cd8..51f57d0 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -145,6 +145,9 @@ body {
 
 .taskbar .start {
   font-weight: bold;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
 }
 
 .taskbar-item {
@@ -321,14 +324,6 @@ body {
 
 .confirm-icon {
   flex: 0 0 auto;
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background: #ffd700;
-  border: 1px solid #808000;
-  color: #000;
-  font-weight: bold;
-  font-size: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -383,3 +378,277 @@ body {
   background: #808080;
   border-bottom: 1px solid #fff;
 }
+
+/* --- Lixeira --- */
+/* Icone de desktop: o unico icone da tela, e tem funcao (abre a janela) e estado
+   (vazia vs. cheia). Fica no canto inferior esquerdo, acima da taskbar. */
+.desktop-icon {
+  position: fixed;
+  left: 12px;
+  bottom: 44px;
+  width: 76px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 2px;
+  background: transparent;
+  border: 1px dotted transparent;
+  box-shadow: none;
+  cursor: pointer;
+  z-index: 5;
+}
+
+.desktop-icon:hover,
+.desktop-icon:focus-visible {
+  border-color: #fff;
+  outline: none;
+}
+
+.desktop-icon:active {
+  /* Sem o box-shadow de botao do 98.css: icone de desktop nao afunda. */
+  box-shadow: none;
+}
+
+.desktop-icon-glyph {
+  display: block;
+  line-height: 0;
+}
+
+.desktop-icon-label {
+  font-size: 11px;
+  line-height: 1.25;
+  color: #fff;
+  text-align: center;
+  text-shadow: 1px 1px 0 #000;
+}
+
+.trash-list {
+  height: 240px;
+  overflow-y: auto;
+  background: #fff;
+  border: 1px solid #808080;
+  box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #dfdfdf;
+  padding: 2px;
+}
+
+.trash-list ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.trash-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 6px 4px;
+  border-bottom: 1px solid #dfdfdf;
+}
+
+.trash-item:last-child {
+  border-bottom: none;
+}
+
+.trash-icon {
+  display: block;
+  line-height: 0;
+  margin-top: 2px;
+  flex-shrink: 0;
+}
+
+.trash-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.trash-info strong {
+  overflow-wrap: anywhere;
+}
+
+.trash-info small {
+  color: #555;
+}
+
+/* O aviso de que Restaurar vai falhar (409): a lista de origem tambem foi para
+   a lixeira. O backend manda originalList.deleted justamente para isso. */
+.trash-blocked {
+  color: #a00;
+}
+
+.trash-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  flex-shrink: 0;
+}
+
+.trash-actions button {
+  min-width: 76px;
+}
+
+.trash-footer {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.trash-status {
+  flex: 1;
+  font-size: 11px;
+  color: #555;
+}
+
+.trash-empty {
+  margin: 0;
+  padding: 12px;
+  text-align: center;
+  color: #555;
+}
+
+.trash-error {
+  margin: 0 0 6px;
+  padding: 4px 6px;
+  background: #ffdcdc;
+  border: 1px solid #a00;
+  overflow-wrap: anywhere;
+}
+
+/* Icone na bandeja: alinhado a linha de texto ao lado dele. */
+.tray-icon {
+  vertical-align: -3px;
+  margin-right: 2px;
+}
+
+/* --- Busca, atalhos e relogio --- */
+.search-box {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.search-box input {
+  width: 170px;
+}
+
+.search-count {
+  font-size: 11px;
+  color: #333;
+  white-space: nowrap;
+}
+
+/* A busca realca em vez de filtrar -- ver o comentario no ListColumn. */
+.card-match {
+  outline: 2px solid #000080;
+  outline-offset: -2px;
+  background: #ffffcc;
+}
+
+.card-dimmed {
+  opacity: 0.35;
+}
+
+.shortcut-list {
+  margin: 4px 0 10px;
+  padding: 0;
+  list-style: none;
+}
+
+.shortcut-list li {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 3px 0;
+}
+
+.shortcut-list kbd {
+  flex: 0 0 46px;
+  text-align: center;
+  padding: 1px 4px;
+  background: #c0c0c0;
+  border: 1px solid #000;
+  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
+  font-family: inherit;
+  font-size: 11px;
+}
+
+.shortcut-note {
+  margin: 0 0 8px;
+  font-size: 11px;
+  color: #555;
+}
+
+/* Relogio da bandeja: afundado e separado, como no Windows 95. */
+.tray-clock {
+  margin-left: 8px;
+  padding-left: 8px;
+  border-left: 1px solid #808080;
+}
+
+/* --- Protetor de tela --- */
+.screensaver {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  background: #000;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 18px;
+  cursor: none;
+}
+
+.screensaver-logo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* Deriva devagar pela tela: um logo parado queimaria o fosforo de um CRT --
+     que e exatamente o problema que o protetor de tela existia para resolver. */
+  animation: ss-drift 24s ease-in-out infinite alternate;
+}
+
+.ss-line {
+  font-size: 44px;
+  font-weight: bold;
+  line-height: 1;
+  letter-spacing: 2px;
+  background: linear-gradient(180deg, #00ffff, #0000ff);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.ss-2 {
+  font-size: 66px;
+  background: linear-gradient(180deg, #ffff00, #ff0000);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.screensaver-hint {
+  color: #444;
+  font-size: 11px;
+  margin: 0;
+}
+
+@keyframes ss-drift {
+  from {
+    transform: translate(-14vw, -12vh);
+  }
+  to {
+    transform: translate(14vw, 12vh);
+  }
+}
+
+/* Respeita quem pediu menos movimento: a animacao para, o protetor continua. */
+@media (prefers-reduced-motion: reduce) {
+  .screensaver-logo {
+    animation: none;
+  }
+}
diff --git a/frontend/src/useHotkeys.ts b/frontend/src/useHotkeys.ts
new file mode 100644
index 0000000..a1982aa
--- /dev/null
+++ b/frontend/src/useHotkeys.ts
@@ -0,0 +1,44 @@
+import { useEffect } from 'react'
+
+type Handlers = Record<string, () => void>
+
+/** Campos de texto engolem o atalho: digitar "n" num input nao pode criar lista. */
+function isTyping(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false
+  const tag = target.tagName
+  return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || target.isContentEditable
+}
+
+/**
+ * Atalhos globais de teclado.
+ *
+ * A chave e a tecla em minusculo, opcionalmente com prefixo de modificador:
+ * `'n'`, `'ctrl+f'`, `'?'`. O handler roda com `preventDefault()` ja aplicado.
+ *
+ * `enabled: false` desliga tudo -- e como um modal aberto evita que a tecla
+ * dispare uma acao no board por tras dele.
+ */
+export function useHotkeys(handlers: Handlers, enabled = true) {
+  useEffect(() => {
+    if (!enabled) return
+
+    const onKey = (e: KeyboardEvent) => {
+      // Escape e o unico que funciona dentro de um campo -- e como se sai dele.
+      if (isTyping(e.target) && e.key !== 'Escape') return
+
+      const key = e.key.toLowerCase()
+      const combo = e.ctrlKey || e.metaKey ? `ctrl+${key}` : key
+      const handler = handlers[combo] ?? handlers[key]
+      if (!handler) return
+
+      e.preventDefault()
+      handler()
+    }
+
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+    // `handlers` e recriado a cada render pelo chamador; depender do objeto
+    // reinstalaria o listener toda vez. As teclas e o enabled bastam.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [enabled, Object.keys(handlers).join(',')])
+}

From 9af69e2774c3361979bb074b8c9c5f9c6e3535a3 Mon Sep 17 00:00:00 2001
From: Renan Locatiz Fernandes <renan.fernandes@outlook.com>
Date: Fri, 21 Aug 2026 01:38:33 -0300
Subject: [PATCH 06/19] test(backend): testes unitarios sem dependencia nova

O unico teste era o smoke, que e integracao e exige o stack de pe. Agora ha
`npm test` com o runner nativo do Node (node:test), sem dependencia adicional:

- position.test.mjs: a matematica da position fracionaria, incluindo o limite de
  ~53 divisoes pela metade antes do float empatar.
- trash-semantics.test.mjs: as duas regras da Lixeira que mais surpreendem, como
  funcoes puras estado -> estado.

Junto: .env.example com os defaults reais lidos do server.ts, e reset-db.mjs, que
e dry-run por padrao e so destroi com --yes.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 backend/.env.example                  |  21 ++
 backend/package.json                  |   3 +-
 backend/scripts/reset-db.mjs          | 127 ++++++++++++
 backend/test/position.test.mjs        | 122 ++++++++++++
 backend/test/trash-semantics.test.mjs | 270 ++++++++++++++++++++++++++
 5 files changed, 542 insertions(+), 1 deletion(-)
 create mode 100644 backend/.env.example
 create mode 100644 backend/scripts/reset-db.mjs
 create mode 100644 backend/test/position.test.mjs
 create mode 100644 backend/test/trash-semantics.test.mjs

diff --git a/backend/.env.example b/backend/.env.example
new file mode 100644
index 0000000..7d0443b
--- /dev/null
+++ b/backend/.env.example
@@ -0,0 +1,21 @@
+# Variaveis do backend. Copie para `.env` (`cp .env.example .env`) antes de rodar
+# fora do Docker. Os defaults abaixo sao os que estao no codigo -- ver
+# backend/src/server.ts (PORT/HOST) e backend/prisma/schema.prisma (DATABASE_URL).
+
+# Banco SQLite, lido por `env("DATABASE_URL")` no schema.prisma. Nao tem default
+# no codigo: o Prisma falha na hora se a variavel estiver ausente.
+# Caminho `file:` relativo e resolvido a partir de backend/prisma/, entao
+# "file:./dev.db" e o arquivo backend/prisma/dev.db.
+# No Docker o valor e absoluto e aponta para o volume nomeado: "file:/data/dev.db"
+# (backend/Dockerfile e docker-compose.yml). Nunca aponte para um bind mount do
+# Windows -- o file locking do SQLite falha de forma intermitente ali.
+DATABASE_URL="file:./dev.db"
+
+# Porta do processo Fastify: REST e WebSocket no mesmo listener.
+# Default no codigo: 3001 (`Number(process.env.PORT ?? 3001)`).
+PORT=3001
+
+# Interface de bind. Default no codigo: 0.0.0.0 (`process.env.HOST ?? '0.0.0.0'`),
+# que e o necessario dentro do container para a porta ser publicada no host.
+# Em dev local, 127.0.0.1 basta.
+HOST=0.0.0.0
diff --git a/backend/package.json b/backend/package.json
index 4dd6703..4fd1c2e 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -7,7 +7,8 @@
     "dev": "tsx watch src/server.ts",
     "build": "tsc",
     "start": "node dist/server.js",
-    "seed": "tsx prisma/seed.ts"
+    "seed": "tsx prisma/seed.ts",
+    "test": "node --test \"test/**/*.test.mjs\""
   },
   "prisma": {
     "seed": "tsx prisma/seed.ts"
diff --git a/backend/scripts/reset-db.mjs b/backend/scripts/reset-db.mjs
new file mode 100644
index 0000000..69e8cee
--- /dev/null
+++ b/backend/scripts/reset-db.mjs
@@ -0,0 +1,127 @@
+#!/usr/bin/env node
+// Reset destrutivo do banco de DESENVOLVIMENTO local.
+//
+//   node scripts/reset-db.mjs          # dry-run: mostra o que faria e sai 0
+//   node scripts/reset-db.mjs --yes    # executa de verdade
+//
+// O que faz, nessa ordem:
+//   1. apaga o arquivo SQLite apontado por DATABASE_URL (e os -journal/-wal/-shm)
+//   2. `npx prisma migrate deploy`  -- recria o schema a partir de prisma/migrations
+//   3. `npm run seed`               -- recria o board default
+//
+// Sem dependencia nova: so node:fs, node:path, node:child_process.
+//
+// Nao serve para o container: la o banco vive no volume nomeado (/data/dev.db) e
+// o reset e `docker compose down -v`. O script recusa caminhos fora de backend/
+// justamente para nao apagar o banco errado por acidente.
+
+import { execSync } from 'node:child_process'
+import { existsSync, readFileSync, rmSync, statSync } from 'node:fs'
+import { dirname, join, relative, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const BACKEND_DIR = resolve(dirname(fileURLToPath(import.meta.url)), '..')
+const PRISMA_DIR = join(BACKEND_DIR, 'prisma')
+const CONFIRM_FLAG = '--yes'
+
+const confirmed = process.argv.slice(2).includes(CONFIRM_FLAG)
+
+/** DATABASE_URL do ambiente, com fallback no backend/.env (o Prisma faz igual). */
+function databaseUrl() {
+  if (process.env.DATABASE_URL) return process.env.DATABASE_URL
+
+  const envFile = join(BACKEND_DIR, '.env')
+  if (existsSync(envFile)) {
+    for (const line of readFileSync(envFile, 'utf8').split(/\r?\n/)) {
+      const match = /^\s*DATABASE_URL\s*=\s*(.*)$/.exec(line)
+      if (match) return match[1].trim().replace(/^["']|["']$/g, '')
+    }
+  }
+  return null
+}
+
+/**
+ * `file:./dev.db` -> caminho absoluto. Caminho relativo no Prisma e resolvido a
+ * partir do diretorio do schema (backend/prisma/), nao do cwd.
+ */
+function sqlitePath(url) {
+  if (!url.startsWith('file:')) return null
+  const raw = url.slice('file:'.length)
+  return resolve(PRISMA_DIR, raw)
+}
+
+function fail(message) {
+  console.error(`reset-db: ${message}`)
+  process.exit(1)
+}
+
+const url = databaseUrl()
+if (!url) fail('DATABASE_URL nao definida (nem no ambiente, nem em backend/.env). Copie .env.example.')
+
+const dbFile = sqlitePath(url)
+if (!dbFile) fail(`DATABASE_URL="${url}" nao e uma URL file: -- este script so mexe em SQLite local.`)
+
+// Trava de seguranca: so apaga dentro de backend/. `/data/dev.db` do container cai aqui.
+const inside = relative(BACKEND_DIR, dbFile)
+if (inside.startsWith('..') || resolve(dbFile) === resolve(BACKEND_DIR)) {
+  fail(
+    `recusando apagar "${dbFile}": esta fora de ${BACKEND_DIR}.\n` +
+      '        Se e o banco do container, o reset e `docker compose down -v`.',
+  )
+}
+
+const sidecars = ['-journal', '-wal', '-shm'].map((suffix) => dbFile + suffix)
+const targets = [dbFile, ...sidecars].filter((file) => existsSync(file))
+
+const size = existsSync(dbFile) ? `${statSync(dbFile).size} bytes` : 'nao existe ainda'
+const steps = [
+  targets.length ? `apagar: ${targets.join(', ')}` : 'nada para apagar (banco ausente)',
+  'npx prisma migrate deploy',
+  'npm run seed',
+]
+
+console.log('')
+console.log('  *** DESTRUTIVO: apaga TODO o conteudo do banco local. Nao da para desfazer. ***')
+console.log('')
+console.log(`  DATABASE_URL : ${url}`)
+console.log(`  arquivo      : ${dbFile} (${size})`)
+console.log('')
+steps.forEach((step, i) => console.log(`  ${i + 1}. ${step}`))
+console.log('')
+
+if (!confirmed) {
+  console.log(`  Dry-run: nada foi tocado. Rode com ${CONFIRM_FLAG} para executar de verdade.`)
+  console.log('')
+  process.exit(0)
+}
+
+// `execSync` (linha de comando unica) e nao `execFileSync`: no Windows npx/npm
+// sao .cmd, que o Node so executa atraves do shell -- e passar `args` junto com
+// `shell: true` dispara DEP0190. Os comandos aqui sao literais fixos, sem
+// interpolacao de entrada externa.
+function run(commandLine) {
+  console.log(`  $ ${commandLine}`)
+  execSync(commandLine, {
+    cwd: BACKEND_DIR,
+    stdio: 'inherit',
+    env: { ...process.env, DATABASE_URL: url },
+  })
+}
+
+try {
+  for (const file of targets) {
+    rmSync(file, { force: true })
+    console.log(`  removido ${file}`)
+  }
+
+  // `migrate deploy` (nao `migrate dev`): aplica as migrations existentes sem
+  // tentar gerar uma nova nem abrir prompt -- e o que um script nao-interativo quer.
+  run('npx prisma migrate deploy')
+  run('npm run seed')
+} catch (err) {
+  fail(`falhou: ${err.message}`)
+}
+
+console.log('')
+console.log('  Banco recriado e semeado.')
+console.log('')
diff --git a/backend/test/position.test.mjs b/backend/test/position.test.mjs
new file mode 100644
index 0000000..a3b64e4
--- /dev/null
+++ b/backend/test/position.test.mjs
@@ -0,0 +1,122 @@
+// Testes unitarios da matematica de position fracionaria.
+//
+// Runner: node:test nativo (`node --test test/`). Zero dependencia extra.
+//
+// ATENCAO -- ESPELHO DE CONTRATO
+// A funcao real vive no frontend, em `frontend/src/api.ts` (export positionFor),
+// porque o calculo da nova position e responsabilidade do CLIENTE: so ele conhece
+// os vizinhos do destino; o servidor apenas persiste o float recebido em
+// `PATCH /api/cards/:id/move` (ver CLAUDE.md e docs/API.md).
+//
+// O backend nao pode importar do frontend (a fronteira de posse entre as duas
+// sessoes proibe), entao a logica esta REPLICADA aqui como referencia executavel
+// do contrato. Se `frontend/src/api.ts` mudar, este arquivo passa a mentir --
+// atualize os dois juntos, ou o contrato divergiu e o codigo e que esta errado.
+
+import test from 'node:test'
+import assert from 'node:assert/strict'
+
+/**
+ * Espelho de `positionFor` em frontend/src/api.ts (linhas ~63-71).
+ *
+ * `siblings` sao os cards ja ordenados da lista de DESTINO (sem o card que esta
+ * sendo arrastado) e `index` e o slot onde ele vai cair.
+ */
+function positionFor(siblings, index) {
+  const before = siblings[index - 1]
+  const after = siblings[index]
+
+  if (!before && !after) return 0
+  if (!before) return after.position - 1
+  if (!after) return before.position + 1
+  return (before.position + after.position) / 2
+}
+
+const at = (...positions) => positions.map((position, i) => ({ id: `c${i}`, position }))
+
+test('lista vazia: primeira position e 0', () => {
+  assert.equal(positionFor([], 0), 0)
+})
+
+test('topo: first.position - 1', () => {
+  assert.equal(positionFor(at(1, 2, 3), 0), 0)
+  assert.equal(positionFor(at(-5.5, 2), 0), -6.5)
+  // Nao ha piso: arrastar pro topo repetidamente so caminha para -Infinity.
+  assert.equal(positionFor(at(0), 0), -1)
+})
+
+test('fim: last.position + 1', () => {
+  assert.equal(positionFor(at(1, 2, 3), 3), 4)
+  // "ultima + 1" sobre o valor fracionario, igual ao POST do servidor:
+  // depois de um card em 7.125 o proximo nasce em 8.125 (docs/API.md).
+  assert.equal(positionFor(at(7.125), 1), 8.125)
+})
+
+test('meio: (a + b) / 2', () => {
+  assert.equal(positionFor(at(1, 2, 3), 1), 1.5)
+  assert.equal(positionFor(at(1, 2, 3), 2), 2.5)
+  assert.equal(positionFor(at(0, 1), 1), 0.5)
+  assert.equal(positionFor(at(1, 1.5), 1), 1.25)
+  // Vizinhos negativos e assimetricos continuam valendo.
+  assert.equal(positionFor(at(-4, 6), 1), 1)
+})
+
+test('um unico drag grava uma unica linha: os vizinhos nao mudam', () => {
+  const siblings = at(1, 2, 3)
+  const snapshot = JSON.stringify(siblings)
+  positionFor(siblings, 1)
+  assert.equal(JSON.stringify(siblings), snapshot, 'positionFor nao pode mutar os vizinhos')
+})
+
+test('a position nova cai estritamente entre os vizinhos (ordenacao preservada)', () => {
+  const siblings = at(2, 4, 8)
+  for (let index = 0; index <= siblings.length; index++) {
+    const p = positionFor(siblings, index)
+    const before = siblings[index - 1]
+    const after = siblings[index]
+    if (before) assert.ok(p > before.position, `${p} deveria ser > ${before.position}`)
+    if (after) assert.ok(p < after.position, `${p} deveria ser < ${after.position}`)
+  }
+})
+
+// --- Limite conhecido: ~53 divisoes pela metade -------------------------------
+// docs/API.md, "Limite conhecido da position fracionaria": entre dois inteiros
+// vizinhos cabem ~53 divisoes pela metade antes de o double esgotar a precisao e
+// os valores empatarem. Nao ha rebalanceamento -- o teste documenta o teto, nao
+// pede conserto.
+test('halving repetido no mesmo ponto empata em ~53 divisoes', () => {
+  const lo = 1
+  let hi = 2
+  let divisions = 0
+
+  // Sempre soltando no MESMO ponto -- logo depois de `lo` -- que e o pior caso
+  // real: o card novo vira o vizinho de cima da proxima insercao.
+  for (;;) {
+    const mid = positionFor(at(lo, hi), 1)
+    if (mid === lo || mid === hi) break // empatou: a precisao acabou
+    hi = mid
+    divisions++
+    if (divisions > 200) assert.fail('nao empatou -- a matematica mudou?')
+  }
+
+  // 52 divisoes uteis; a 53a arredonda de volta para `lo`. O ulp de 1.0 e 2^-52.
+  assert.equal(divisions, 52)
+  assert.equal(hi, 1 + Number.EPSILON, 'o ultimo valor util e o vizinho imediato de 1.0')
+  assert.equal(positionFor(at(lo, hi), 1), lo, 'a divisao seguinte empata com o vizinho de baixo')
+  assert.ok(divisions <= 53, 'docs/API.md promete ~53 -- se subir, o doc mente')
+})
+
+test('empate de position e resolvido por id, nao por position', () => {
+  // Quando o teto acima e atingido dois cards ficam com a MESMA position. O
+  // servidor usa orderBy: [{position}, {id}] justamente para isso (docs/API.md).
+  const tied = [
+    { id: 'b', position: 1.5 },
+    { id: 'a', position: 1.5 },
+  ]
+  const ordered = [...tied].sort((x, y) => x.position - y.position || x.id.localeCompare(y.id))
+  assert.deepEqual(
+    ordered.map((c) => c.id),
+    ['a', 'b'],
+    'com position empatada a ordem tem que ser determinista pelo id',
+  )
+})
diff --git a/backend/test/trash-semantics.test.mjs b/backend/test/trash-semantics.test.mjs
new file mode 100644
index 0000000..e07ffe2
--- /dev/null
+++ b/backend/test/trash-semantics.test.mjs
@@ -0,0 +1,270 @@
+// Testes de mesa da Lixeira -- funcoes puras, sem banco, sem servidor rodando.
+//
+// Runner: node:test nativo (`node --test test/`). Zero dependencia extra.
+//
+// ATENCAO -- ESPELHO DE CONTRATO
+// As regras modeladas aqui vivem de verdade em `backend/src/routes/trash.ts`,
+// `backend/src/routes/lists.ts` e `backend/src/routes/cards.ts` (e no
+// `deletedAt` de `backend/prisma/schema.prisma`), sobre o Prisma. Este arquivo
+// REPLICA as transicoes como funcoes puras de estado -> estado para poder testar
+// as duas regras que mais surpreendem sem subir SQLite. A autoridade e a secao
+// "A Lixeira" de docs/API.md; se um teste daqui falhar contra o backend real, o
+// backend e que divergiu.
+//
+// As duas regras sob teste:
+//   (a) mandar uma LISTA para a lixeira NAO marca os cards dela. Restaurar a
+//       lista traz de volta so os cards que estavam vivos -- um card jogado fora
+//       sozinho continua na lixeira.
+//   (b) restaurar um CARD cuja lista de origem esta na lixeira e bloqueado (409).
+
+import test from 'node:test'
+import assert from 'node:assert/strict'
+
+// --- Modelo puro --------------------------------------------------------------
+// Nada muta: toda transicao devolve `{ state, status, body? }`, como a rota HTTP.
+
+const AT = '2026-08-21T04:12:00.000Z' // timestamp fixo: deletedAt so precisa ser truthy
+
+const clone = (state) => ({
+  lists: state.lists.map((l) => ({ ...l })),
+  cards: state.cards.map((c) => ({ ...c })),
+})
+
+const alive = (row) => row.deletedAt === null
+const trashed = (row) => row.deletedAt !== null
+
+function makeState({ lists = [], cards = [] } = {}) {
+  return {
+    lists: lists.map((l) => ({ deletedAt: null, position: 0, ...l })),
+    cards: cards.map((c) => ({ deletedAt: null, position: 0, description: '', ...c })),
+  }
+}
+
+const findList = (state, id) => state.lists.find((l) => l.id === id)
+const findCard = (state, id) => state.cards.find((c) => c.id === id)
+
+/** GET /api/board -- nem listas nem cards da lixeira aparecem. */
+function board(state) {
+  return state.lists
+    .filter(alive)
+    .sort((a, b) => a.position - b.position || a.id.localeCompare(b.id))
+    .map((list) => ({
+      id: list.id,
+      title: list.title,
+      // Um card so aparece se ELE esta vivo E a lista dele esta viva.
+      cards: state.cards
+        .filter((c) => c.listId === list.id && alive(c))
+        .sort((a, b) => a.position - b.position || a.id.localeCompare(b.id))
+        .map((c) => c.id),
+    }))
+}
+
+/** DELETE /api/lists/:id -- soft delete. NAO toca nos cards. */
+function trashList(state, id) {
+  const next = clone(state)
+  const list = findList(next, id)
+  if (!list || trashed(list)) return { state, status: 404 }
+  list.deletedAt = AT
+  return { state: next, status: 204 }
+}
+
+/** DELETE /api/cards/:id -- soft delete do card sozinho. */
+function trashCard(state, id) {
+  const next = clone(state)
+  const card = findCard(next, id)
+  if (!card) return { state, status: 404 }
+  const list = findList(next, card.listId)
+  // Rota de recurso vivo: card em lista na lixeira responde 404, como se nao existisse.
+  if (trashed(card) || !list || trashed(list)) return { state, status: 404 }
+  card.deletedAt = AT
+  return { state: next, status: 204 }
+}
+
+/** POST /api/trash/lists/:id/restore -- 200 List com cards[] SO dos vivos. */
+function restoreList(state, id) {
+  const next = clone(state)
+  const list = findList(next, id)
+  if (!list || alive(list)) return { state, status: 404 }
+  list.deletedAt = null
+  const cards = next.cards
+    .filter((c) => c.listId === id && alive(c))
+    .sort((a, b) => a.position - b.position || a.id.localeCompare(b.id))
+  return { state: next, status: 200, body: { ...list, cards } }
+}
+
+/** POST /api/trash/cards/:id/restore -- 409 se a lista de origem esta na lixeira. */
+function restoreCard(state, id) {
+  const next = clone(state)
+  const card = findCard(next, id)
+  if (!card || alive(card)) return { state, status: 404 }
+  const list = findList(next, card.listId)
+  if (!list || trashed(list)) return { state, status: 409 }
+  card.deletedAt = null
+  return { state: next, status: 200, body: { ...card } }
+}
+
+/** GET /api/trash -- inclui originalList.deleted e cardCount. */
+function trash(state) {
+  const cards = state.cards.filter(trashed).map((c) => {
+    const list = findList(state, c.listId)
+    return {
+      id: c.id,
+      originalList: { id: list.id, title: list.title, deleted: trashed(list) },
+    }
+  })
+  const lists = state.lists.filter(trashed).map((l) => ({
+    id: l.id,
+    // Quantos cards voltam junto se a lista for restaurada -- os que ja estavam
+    // na lixeira sozinhos NAO contam.
+    cardCount: state.cards.filter((c) => c.listId === l.id && alive(c)).length,
+  }))
+  return { cards, lists, counts: { cards: cards.length, lists: lists.length } }
+}
+
+/** DELETE /api/trash/lists/:id -- apaga de verdade, cascateia nos cards. */
+function purgeList(state, id) {
+  const next = clone(state)
+  const list = findList(next, id)
+  if (!list || alive(list)) return { state, status: 404 }
+  next.lists = next.lists.filter((l) => l.id !== id)
+  // Cascade leva TODOS os cards da lista, inclusive os que estavam na lixeira sozinhos.
+  next.cards = next.cards.filter((c) => c.listId !== id)
+  return { state: next, status: 204 }
+}
+
+/** Cenario base: lista "A Fazer" com tres cards vivos + uma lista vizinha. */
+const scenario = () =>
+  makeState({
+    lists: [
+      { id: 'L1', title: 'A Fazer', position: 1 },
+      { id: 'L2', title: 'Feito', position: 2 },
+    ],
+    cards: [
+      { id: 'C1', listId: 'L1', title: 'um', position: 1 },
+      { id: 'C2', listId: 'L1', title: 'dois', position: 2 },
+      { id: 'C3', listId: 'L1', title: 'tres', position: 3 },
+      { id: 'C9', listId: 'L2', title: 'outro', position: 1 },
+    ],
+  })
+
+// --- Regra (a): lista na lixeira nao marca os cards ---------------------------
+
+test('(a) mandar a lista para a lixeira NAO marca os cards dela', () => {
+  const s0 = scenario()
+  const { state: s1, status } = trashList(s0, 'L1')
+
+  assert.equal(status, 204)
+  // Os cards continuam com deletedAt null -- eles somem do board porque a LISTA sumiu.
+  for (const id of ['C1', 'C2', 'C3']) {
+    assert.equal(findCard(s1, id).deletedAt, null, `${id} nao pode ser marcado em cascata`)
+  }
+  assert.deepEqual(board(s1), [{ id: 'L2', title: 'Feito', cards: ['C9'] }])
+  // E a lixeira mostra 1 lista e ZERO cards: cascata marcada apareceria aqui.
+  assert.deepEqual(trash(s1).counts, { cards: 0, lists: 1 })
+  assert.equal(trash(s1).lists[0].cardCount, 3, 'cardCount = quantos voltam junto')
+})
+
+test('(a) restaurar a lista traz so os cards que estavam vivos', () => {
+  let s = scenario()
+  ;({ state: s } = trashCard(s, 'C2')) // C2 vai pra lixeira SOZINHO, antes da lista
+  ;({ state: s } = trashList(s, 'L1'))
+
+  assert.deepEqual(trash(s).counts, { cards: 1, lists: 1 })
+
+  const { state: restored, status, body } = restoreList(s, 'L1')
+  assert.equal(status, 200)
+  assert.deepEqual(
+    body.cards.map((c) => c.id),
+    ['C1', 'C3'],
+    'a resposta traz cards[] populado, so os vivos',
+  )
+  // C2 continua na lixeira: quem foi jogado fora sozinho nao volta de carona.
+  assert.equal(findCard(restored, 'C2').deletedAt, AT)
+  assert.deepEqual(board(restored)[0], { id: 'L1', title: 'A Fazer', cards: ['C1', 'C3'] })
+  assert.deepEqual(trash(restored).counts, { cards: 1, lists: 0 })
+})
+
+test('(a) o ciclo lixeira->restore e idempotente para quem estava vivo', () => {
+  const s0 = scenario()
+  const s1 = restoreList(trashList(s0, 'L1').state, 'L1').state
+  assert.deepEqual(board(s1), board(s0), 'ida e volta sem cards proprios volta ao estado original')
+})
+
+// --- Regra (b): restore de card com lista de origem na lixeira = 409 ----------
+
+test('(b) restaurar card cuja lista de origem esta na lixeira retorna 409', () => {
+  let s = scenario()
+  ;({ state: s } = trashCard(s, 'C2'))
+  ;({ state: s } = trashList(s, 'L1'))
+
+  const attempt = restoreCard(s, 'C2')
+  assert.equal(attempt.status, 409)
+  // 409 nao pode alterar nada: o card segue na lixeira.
+  assert.equal(findCard(attempt.state, 'C2').deletedAt, AT)
+  assert.deepEqual(trash(attempt.state).counts, { cards: 1, lists: 1 })
+})
+
+test('(b) GET /api/trash sinaliza o 409 antes do clique via originalList.deleted', () => {
+  let s = scenario()
+  ;({ state: s } = trashCard(s, 'C2'))
+
+  // Lista de origem viva: o botao "Restaurar" fica ativo e o restore passa.
+  assert.equal(trash(s).cards[0].originalList.deleted, false)
+  assert.equal(restoreCard(s, 'C2').status, 200)
+
+  // Mesma lixeira, agora com a lista de origem tambem la dentro (nao reatribui
+  // acima de proposito: C2 continua na lixeira em `s`).
+  ;({ state: s } = trashList(s, 'L1'))
+  assert.equal(trash(s).cards[0].originalList.deleted, true, 'lista morta -> botao esmaecido')
+  assert.equal(restoreCard(s, 'C2').status, 409)
+})
+
+test('(b) restaurar a lista primeiro desbloqueia o restore do card', () => {
+  let s = scenario()
+  ;({ state: s } = trashCard(s, 'C2'))
+  ;({ state: s } = trashList(s, 'L1'))
+
+  assert.equal(restoreCard(s, 'C2').status, 409)
+  ;({ state: s } = restoreList(s, 'L1'))
+
+  const done = restoreCard(s, 'C2')
+  assert.equal(done.status, 200)
+  assert.deepEqual(board(done.state)[0].cards, ['C1', 'C2', 'C3'], 'volta na position original')
+  assert.deepEqual(trash(done.state).counts, { cards: 0, lists: 0 })
+})
+
+// --- Bordas que caem das duas regras -----------------------------------------
+
+test('rota de recurso vivo trata item na lixeira como 404', () => {
+  let s = scenario()
+  ;({ state: s } = trashList(s, 'L1'))
+
+  assert.equal(trashList(s, 'L1').status, 404, 'lista ja na lixeira')
+  assert.equal(trashCard(s, 'C1').status, 404, 'card vivo dentro de lista na lixeira')
+  assert.equal(restoreList(s, 'L2').status, 404, 'lista viva nao esta na lixeira')
+  assert.equal(restoreCard(s, 'C9').status, 404, 'card vivo nao esta na lixeira')
+})
+
+test('apagar a lista de vez cascateia inclusive nos cards que estavam na lixeira sozinhos', () => {
+  let s = scenario()
+  ;({ state: s } = trashCard(s, 'C2'))
+  ;({ state: s } = trashList(s, 'L1'))
+
+  const { state: purged, status } = purgeList(s, 'L1')
+  assert.equal(status, 204)
+  assert.equal(findCard(purged, 'C2'), undefined, 'C2 vai junto -- a lista de origem sumiu')
+  assert.deepEqual(
+    purged.cards.map((c) => c.id),
+    ['C9'],
+  )
+  assert.deepEqual(trash(purged).counts, { cards: 0, lists: 0 })
+})
+
+test('as transicoes nao mutam o estado recebido', () => {
+  const s0 = scenario()
+  const snapshot = JSON.stringify(s0)
+  trashList(s0, 'L1')
+  trashCard(s0, 'C1')
+  restoreList(trashList(s0, 'L1').state, 'L1')
+  assert.equal(JSON.stringify(s0), snapshot)
+})

From 66db4fa67b6cc8634daa699202e199993b0621a2 Mon Sep 17 00:00:00 2001
From: Renan Locatiz Fernandes <renan.fernandes@outlook.com>
Date: Fri, 21 Aug 2026 01:38:33 -0300
Subject: [PATCH 07/19] chore: padronizacao do repositorio

README, LICENSE (MIT), CONTRIBUTING, templates de issue e PR, e CI no GitHub
Actions com tres jobs: typecheck do backend, build do frontend, e o smoke test
contra o stack Docker de verdade.

O .editorconfig e o .gitattributes forcam LF: este repo ja teve um arquivo
gravado em UTF-16 CRLF por redirecionamento do PowerShell, que o bash nao
consegue interpretar.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .editorconfig                             |  23 +++
 .gitattributes                            |  35 +++++
 .github/ISSUE_TEMPLATE/bug_report.md      |  32 ++++
 .github/ISSUE_TEMPLATE/feature_request.md |  23 +++
 .github/PULL_REQUEST_TEMPLATE.md          |  28 ++++
 .github/workflows/ci.yml                  | 112 ++++++++++++++
 CONTRIBUTING.md                           | 122 +++++++++++++++
 LICENSE                                   |  21 +++
 README.md                                 | 178 ++++++++++++++++++++++
 9 files changed, 574 insertions(+)
 create mode 100644 .editorconfig
 create mode 100644 .gitattributes
 create mode 100644 .github/ISSUE_TEMPLATE/bug_report.md
 create mode 100644 .github/ISSUE_TEMPLATE/feature_request.md
 create mode 100644 .github/PULL_REQUEST_TEMPLATE.md
 create mode 100644 .github/workflows/ci.yml
 create mode 100644 CONTRIBUTING.md
 create mode 100644 LICENSE
 create mode 100644 README.md

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..fe56774
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,23 @@
+# EditorConfig -- https://editorconfig.org
+# LF em tudo, sempre. Este repo ja teve um arquivo salvo em UTF-16 com CRLF que
+# quebrou o build de forma nao obvia; charset e end_of_line aqui nao sao estilo,
+# sao protecao.
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+# Markdown usa dois espacos no fim da linha como quebra de linha.
+trim_trailing_whitespace = false
+
+[*.{yml,yaml,json,jsonc}]
+indent_size = 2
+
+[Makefile]
+indent_style = tab
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..7138224
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,35 @@
+# Normaliza tudo para LF no repositorio, independente do SO de quem commita.
+* text=auto eol=lf
+
+# Fontes e configuracao: texto, sempre LF.
+*.ts    text eol=lf
+*.tsx   text eol=lf
+*.js    text eol=lf
+*.mjs   text eol=lf
+*.json  text eol=lf
+*.css   text eol=lf
+*.html  text eol=lf
+*.md    text eol=lf
+*.yml   text eol=lf
+*.yaml  text eol=lf
+*.prisma text eol=lf
+*.sql   text eol=lf
+*.sh    text eol=lf
+.gitignore      text eol=lf
+.dockerignore   text eol=lf
+.editorconfig   text eol=lf
+Dockerfile      text eol=lf
+
+# Binarios: o git nao mexe no conteudo nem tenta fazer diff.
+*.png  binary
+*.ico  binary
+*.jpg  binary
+*.jpeg binary
+*.gif  binary
+*.webp binary
+*.woff  binary
+*.woff2 binary
+*.db   binary
+
+# Lockfiles nao poluem o diff da revisao.
+package-lock.json linguist-generated=true -diff
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
new file mode 100644
index 0000000..776a4bb
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -0,0 +1,32 @@
+---
+name: Bug
+about: Algo não funciona como deveria
+title: "fix: "
+labels: bug
+---
+
+## O que acontece
+
+<!-- Uma frase. -->
+
+## O que deveria acontecer
+
+## Como reproduzir
+
+1.
+2.
+3.
+
+## Ambiente
+
+- Modo: <!-- docker compose | local (npm run dev) -->
+- Porta aberta no browser: <!-- 8090 | 5173 -->
+- Browser e SO:
+- Abas abertas simultaneamente: <!-- importante em bugs de sincronização/WebSocket -->
+
+## Erros no console / logs
+
+<!-- Console do browser, aba Network, e `docker compose logs backend`. -->
+
+```
+```
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
new file mode 100644
index 0000000..d97cfde
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -0,0 +1,23 @@
+---
+name: Feature
+about: Sugerir uma funcionalidade ou melhoria
+title: "feat: "
+labels: enhancement
+---
+
+## O problema
+
+<!-- O que hoje é difícil ou impossível. Não descreva a solução aqui. -->
+
+## Proposta
+
+<!-- O que você quer que aconteça, do ponto de vista de quem usa o board. -->
+
+## Impacto no contrato
+
+- [ ] Nenhum — só frontend ou só backend, sem mudar a API
+- [ ] Muda a API — precisa de atualização em `CLAUDE.md` e `docs/API.md`
+
+<!-- Se muda: quais endpoints, payloads ou eventos de WebSocket. -->
+
+## Alternativas consideradas
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 0000000..26e999e
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,28 @@
+## O que muda
+
+<!-- Uma ou duas frases. Se fecha uma issue: "Fecha #123". -->
+
+## Por quê
+
+<!-- O problema que isto resolve. -->
+
+## Como testar
+
+<!-- Passos exatos. Ex.: docker compose up --build, abrir :8090 em duas abas,
+     arrastar um card da primeira lista para a segunda. -->
+
+## O contrato mudou?
+
+- [ ] Não
+- [ ] Sim — e atualizei `CLAUDE.md` **e** `docs/API.md` neste mesmo PR
+
+<!-- Conta como contrato: payload, status code, evento de WebSocket, semântica
+     de `position`, portas/origens de CORS, ou quem é dono de qual diretório. -->
+
+## Checklist
+
+- [ ] Título em Conventional Commits (`feat(frontend): ...`)
+- [ ] `npx tsc --noEmit` no backend e `npm run build` no frontend passam
+- [ ] `node backend/scripts/smoke.mjs` passa contra o stack de pé
+- [ ] Não editei o diretório da outra sessão (`backend/` vs `frontend/`)
+- [ ] Sem `node_modules/`, `dist/`, `.env` ou `*.db` no diff
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..3237f20
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,112 @@
+name: CI
+
+on:
+  push:
+    branches: ["**"]
+  pull_request:
+  workflow_dispatch:
+
+concurrency:
+  group: ci-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  backend:
+    name: backend (typecheck)
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: backend
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "24"
+          cache: npm
+          cache-dependency-path: backend/package-lock.json
+
+      - name: Install
+        run: npm ci
+
+      # Sem prisma generate o Prisma Client nao existe e o tsc quebra em
+      # arquivos que nao tem relacao com o schema.
+      - name: Prisma generate
+        run: npx prisma generate
+
+      - name: Typecheck
+        run: npx tsc --noEmit
+
+  frontend:
+    name: frontend (build)
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: frontend
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "24"
+          cache: npm
+          cache-dependency-path: frontend/package-lock.json
+
+      - name: Install
+        run: npm ci
+
+      # "npm run build" e "tsc -b && vite build": typecheck e bundle juntos.
+      - name: Build
+        run: npm run build
+
+  smoke:
+    name: smoke (stack completo)
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "24"
+          cache: npm
+          cache-dependency-path: backend/package-lock.json
+
+      # smoke.mjs importa "ws"; ele vem das dependencias do backend.
+      - name: Install backend deps
+        run: npm ci
+        working-directory: backend
+
+      - name: Sobe o stack
+        run: docker compose up -d --build
+
+      - name: Espera o healthcheck do backend
+        run: |
+          for i in $(seq 1 60); do
+            status=$(docker compose ps --format '{{.Health}}' backend | head -n 1)
+            echo "tentativa $i: health=${status:-<vazio>}"
+            if [ "$status" = "healthy" ]; then
+              echo "backend saudavel"
+              exit 0
+            fi
+            if [ "$status" = "unhealthy" ]; then
+              echo "backend unhealthy"
+              exit 1
+            fi
+            sleep 5
+          done
+          echo "timeout esperando o healthcheck do backend"
+          exit 1
+
+      - name: Smoke test do contrato
+        run: node backend/scripts/smoke.mjs http://localhost:3001
+
+      - name: Frontend responde na 8090
+        run: curl -fsS -o /dev/null http://localhost:8090
+
+      - name: Logs do backend (em caso de falha)
+        if: failure()
+        run: docker compose logs backend
+
+      - name: Derruba o stack
+        if: always()
+        run: docker compose down -v
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..dcf6929
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,122 @@
+# Contribuindo
+
+Obrigado pelo interesse. Este documento é curto de propósito: leia `CLAUDE.md`
+antes de abrir um PR, ele é a autoridade sobre o contrato do projeto.
+
+## Rodando o projeto
+
+O jeito normal é o stack completo:
+
+```bash
+docker compose up --build     # frontend em :8090, API em :3001
+docker compose down -v        # -v apaga o volume do SQLite (reset total)
+```
+
+Para iterar rápido, rode fora do Docker, em dois terminais:
+
+```bash
+cd backend
+npm install
+npx prisma migrate dev        # cria/atualiza dev.db e o Prisma Client
+npm run dev                   # tsx watch, :3001
+
+cd frontend
+npm install
+npm run dev                   # vite, :5173 -> chama a API em :3001
+```
+
+Node 24 (é o que o `backend/Dockerfile` e o CI usam).
+
+Depois de mexer em `backend/prisma/schema.prisma`, rode
+`npx prisma migrate dev --name <descricao>`. Sem isso o Prisma Client fica
+desatualizado e o TypeScript quebra em arquivos que não têm relação com a
+mudança.
+
+## Testando
+
+Não há suíte unitária. O que existe — e o que o CI roda — é um smoke test do
+contrato, contra um stack **de pé**:
+
+```bash
+docker compose up -d --build
+node backend/scripts/smoke.mjs             # default http://localhost:3001
+node backend/scripts/smoke.mjs http://outro-host:3001
+```
+
+Ele exercita os endpoints REST, o preflight de CORS de cada método (`curl` não
+aplica CORS, então um smoke feito só com curl passa com o drag-and-drop
+totalmente quebrado no browser) e o broadcast do WebSocket. Sai com código 1 na
+primeira asserção que falhar.
+
+Antes de abrir o PR, garanta também o que o CI checa:
+
+```bash
+cd backend  && npm ci && npx prisma generate && npx tsc --noEmit
+cd frontend && npm ci && npm run build
+```
+
+Se você mexeu em drag-and-drop, lixeira ou WebSocket, teste **com duas abas
+abertas**: metade dos bugs desta base só aparece quando o eco do broadcast chega
+em quem originou a mutação.
+
+## Commits
+
+[Conventional Commits](https://www.conventionalcommits.org/pt-br/v1.0.0/):
+
+```
+<tipo>(<escopo opcional>): <descrição no imperativo, minúscula, sem ponto final>
+```
+
+Tipos usados aqui: `feat`, `fix`, `docs`, `refactor`, `test`, `chore`, `ci`,
+`build`, `perf`, `style`. Escopos típicos: `backend`, `frontend`, `api`,
+`docker`, `ci`, `trash`, `ws`.
+
+```
+feat(frontend): adiciona janela da lixeira na taskbar
+fix(backend): declara methods no CORS para liberar PATCH e DELETE
+docs(api): documenta o evento trash.updated
+```
+
+Breaking change vai com `!` antes dos dois-pontos (`feat(api)!: ...`) e uma
+seção `BREAKING CHANGE:` no corpo. Um commit por mudança lógica; não misture
+refatoração com correção de bug.
+
+## O contrato entre as duas sessões
+
+Este repositório é construído por **duas sessões do Claude Code em paralelo**,
+que não conversam entre si:
+
+| Sessão | Possui | Não edita |
+|---|---|---|
+| `backend` | `backend/` (inclui `backend/prisma/`), `docker-compose.yml` | `frontend/` |
+| `frontend` | `frontend/` | `backend/` |
+
+`CLAUDE.md` e `docs/` são compartilhados. O handoff é por arquivo, um canal em
+cada direção: `docs/FRONTEND-REQUESTS.md` (backend escreve, frontend lê) e
+`docs/BACKEND-REQUESTS.md` (frontend escreve, backend lê).
+
+Consequências práticas para qualquer PR:
+
+1. **`CLAUDE.md` é a autoridade.** Se o código divergir dele, o errado é o
+   código — corrija o código, ou mude o contrato deliberadamente.
+2. **Mudar o contrato exige atualizar `CLAUDE.md` e `docs/API.md` no mesmo
+   PR.** Contrato aqui significa: forma de payload, código de status, nome ou
+   payload de evento de WebSocket, semântica de `position`, portas e origens de
+   CORS, ou quem é dono de qual diretório. Uma dessas mudanças sem a
+   documentação correspondente é um PR incompleto, mesmo com o CI verde — o CI
+   não tem como perceber que a outra ponta ficou para trás.
+3. **Não edite o diretório da outra sessão** no mesmo PR. Se precisa de algo do
+   outro lado, escreva o pedido no arquivo `*-REQUESTS.md` correspondente.
+
+## Pull requests
+
+- Uma mudança lógica por PR, com título em Conventional Commits.
+- Preencha o template; ele pergunta como testar e se o contrato mudou.
+- CI verde: os três jobs (`backend`, `frontend`, `smoke`) precisam passar.
+- Não commite `node_modules/`, `dist/`, `.env` nem `*.db`.
+
+## Reportando bugs
+
+Use os templates de issue. Para bug, diga em qual modo você rodou (Docker ou
+local), qual porta abriu, e — se for algo de sincronização — quantas abas
+estavam abertas.
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..1c19680
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 TechFernandes LTDA
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..ab36703
--- /dev/null
+++ b/README.md
@@ -0,0 +1,178 @@
+# teamapp
+
+Um clone básico de Trello com o visual do Windows 95. Um único board, listas
+arrastáveis, cards com drag-and-drop entre colunas, lixeira com restauração e
+sincronização em tempo real entre abas por WebSocket — tudo dentro de janelas
+`98.css`, com barra de título, botões chanfrados e taskbar.
+
+Sem autenticação e sem multiusuário: qualquer um que abrir a página vê o mesmo
+board. A tela de login, quando existe, é puramente cosmética.
+
+## Screenshot
+
+<!-- TODO: substituir pelo screenshot real do board -->
+
+![Board do teamapp com visual Windows 95](docs/screenshot.png)
+
+## Stack
+
+| Camada | Tecnologia |
+|---|---|
+| Backend | Fastify 5 (REST + WebSocket no mesmo processo) |
+| Persistência | Prisma 6 + SQLite |
+| Frontend | React 19 + TypeScript + Vite 6 |
+| Visual | pacote npm `98.css` (não CDN — o container builda offline) |
+| Drag-and-drop | HTML5 nativo (`draggable` / `dragover` / `drop`), sem biblioteca |
+| Empacotamento | Docker Compose (backend em Node 24, nginx servindo o build estático) |
+
+## Quickstart
+
+Requer Docker e Docker Compose.
+
+```bash
+docker compose up --build
+```
+
+- Frontend: <http://localhost:8090>
+- API + WebSocket: <http://localhost:3001>
+
+O board padrão (`slug: "default"`) é criado pelo seed na primeira subida.
+
+```bash
+docker compose down          # para o stack, preserva os dados
+docker compose down -v       # -v apaga o volume do SQLite (reset total)
+docker compose logs -f backend
+```
+
+### Por que a porta 8090
+
+A escolha natural seria 8080, mas ela já estava ocupada na máquina de
+desenvolvimento — o nginx do container continua escutando na 80 e o mapeamento é
+`8090:80`. Se 8090 também estiver ocupada para você, mude só o lado esquerdo do
+mapeamento em `docker-compose.yml`.
+
+O browser fala com a API **direto** em `http://localhost:3001`; não há proxy
+reverso na frente dela. Isso é deliberado: proxiar o upgrade do WebSocket pelo
+nginx é a fonte número um de falha silenciosa nesse tipo de stack.
+
+## Desenvolvimento local
+
+Duas abas de terminal. Node 24 (o backend roda em `node:24-slim` no Docker).
+
+### Backend — porta 3001
+
+```bash
+cd backend
+npm install
+npx prisma migrate dev      # cria/atualiza dev.db e o Prisma Client
+npm run seed                # recria o board padrão
+npm run dev                 # tsx watch, :3001
+```
+
+Produção: `npm run build && npm start`.
+
+Depois de mexer em `prisma/schema.prisma`, rode
+`npx prisma migrate dev --name <descricao>`. Sem isso o Prisma Client fica
+desatualizado e o TypeScript quebra em lugares que não têm relação com a
+mudança.
+
+### Frontend — porta 5173
+
+```bash
+cd frontend
+npm install
+npm run dev                 # vite, :5173 -> chama a API em :3001
+npm run build               # tsc -b && vite build -> dist/
+```
+
+A base da API vem de `VITE_API_URL` (default `http://localhost:3001`). O Vite
+resolve env vars em **build time**, por isso o `docker-compose.yml` passa o
+valor como build arg e não como variável de runtime do container.
+
+O CORS do backend libera as origens `5173`, `8080` e `8090`, e declara os
+métodos explicitamente — o default do `@fastify/cors` (`GET,HEAD,POST`) reprova
+PATCH e DELETE no preflight e derruba o drag-and-drop no browser.
+
+## Estrutura
+
+```
+teamapp/
+├── backend/
+│   ├── prisma/
+│   │   ├── schema.prisma       Board 1─n List 1─n Card
+│   │   ├── migrations/
+│   │   └── seed.ts             cria o board "default"
+│   ├── scripts/
+│   │   └── smoke.mjs           smoke test do contrato (REST + WebSocket)
+│   ├── src/
+│   │   ├── server.ts           Fastify: CORS, error handlers, WebSocket, rotas
+│   │   ├── bus.ts              broadcast dos eventos para todos os clientes
+│   │   ├── db.ts               Prisma Client
+│   │   ├── trash.ts            regras do soft delete
+│   │   └── routes/             board.ts · lists.ts · cards.ts · trash.ts
+│   └── Dockerfile
+├── frontend/
+│   ├── src/
+│   │   ├── api.ts              wrappers dos endpoints + a matemática do drag
+│   │   ├── useBoard.ts         GET /api/board, WebSocket com backoff, reducer
+│   │   ├── App.tsx             board, header, taskbar, estado do drag
+│   │   ├── ListColumn.tsx      uma lista (.window) e seus alvos de drop
+│   │   ├── CardDialog.tsx      edição de título/descrição
+│   │   └── styles.css          só layout — bordas e botões vêm do 98.css
+│   ├── nginx.conf
+│   └── Dockerfile
+├── docs/
+│   ├── API.md                  contrato completo da API
+│   ├── BACKEND-REQUESTS.md     canal frontend -> backend
+│   └── FRONTEND-REQUESTS.md    canal backend -> frontend
+├── docker-compose.yml
+└── CLAUDE.md                   o contrato entre as duas sessões de desenvolvimento
+```
+
+## API
+
+O contrato completo — payloads, códigos de erro, eventos de WebSocket e as
+regras da lixeira — está em **[`docs/API.md`](docs/API.md)**.
+
+Resumo:
+
+```
+GET    /api/health
+GET    /api/board                     board default, lists e cards já ordenados
+POST   /api/lists                     PATCH /api/lists/:id      DELETE /api/lists/:id
+POST   /api/cards                     PATCH /api/cards/:id      DELETE /api/cards/:id
+PATCH  /api/cards/:id/move            { listId, position }   <- o drag-and-drop
+GET    /api/trash                     restore e delete definitivo em /api/trash/...
+ws://localhost:3001/ws                eventos de toda mutação
+```
+
+Duas coisas que valem saber antes de ler o resto:
+
+- **`position` é um `Float` fracionário**, não um índice inteiro. Mover um card
+  entre `a` e `b` grava `(a.position + b.position) / 2`. Uma única linha por
+  drag; quem calcula a posição é o cliente, que conhece os vizinhos.
+- **Todo evento de WebSocket vai para todos os clientes, inclusive o autor da
+  mutação.** O cliente aplica cada evento como upsert idempotente por `id` —
+  aplicar duas vezes tem que dar o mesmo resultado.
+
+## Testes
+
+Com o stack no ar:
+
+```bash
+node backend/scripts/smoke.mjs                          # default http://localhost:3001
+node backend/scripts/smoke.mjs http://localhost:3001
+```
+
+O script exercita os endpoints, o preflight de CORS de cada método e o broadcast
+do WebSocket. Sai com código 1 na primeira falha de asserção.
+
+## Contribuindo
+
+Veja [`CONTRIBUTING.md`](CONTRIBUTING.md). Em resumo: Conventional Commits, CI
+verde, e mudança de comportamento da API significa atualizar `CLAUDE.md` **e**
+`docs/API.md` no mesmo PR.
+
+## Licença
+
+MIT — veja [`LICENSE`](LICENSE).

From 91a4c00e5a16798450062fe0c7b34348f38cbf4c Mon Sep 17 00:00:00 2001
From: Renan Locatiz Fernandes <renan.fernandes@outlook.com>
Date: Fri, 21 Aug 2026 01:38:33 -0300
Subject: [PATCH 08/19] docs: contrato da Lixeira, icones e busca

CLAUDE.md e docs/API.md documentam a Lixeira por inteiro, as regras dos icones em
pixel art e por que a busca realca em vez de filtrar. FRONTEND-REQUESTS.md
registra o handoff.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 CLAUDE.md                 | 53 +++++++++++++++++++++++--
 docs/API.md               | 81 +++++++++++++++++++++++++++++++++++++--
 docs/FRONTEND-REQUESTS.md | 73 +++++++++++++++++++++++++++++++++++
 3 files changed, 200 insertions(+), 7 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 2338887..ac8e99e 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -76,7 +76,27 @@ A consequência é que o cliente precisa aplicar todo evento como um **upsert id
 
 Formato: `{ "type": "card.moved", "payload": { ... } }`. O payload de movimento é só `{ id, listId, position }`, nunca o board inteiro.
 
-Eventos: `list.created`, `list.updated`, `list.deleted`, `card.created`, `card.updated`, `card.moved`, `card.deleted`.
+Eventos: `list.created`, `list.updated`, `list.deleted`, `card.created`, `card.updated`, `card.moved`, `card.deleted`, `trash.updated`.
+
+### A Lixeira: DELETE é soft delete
+
+`DELETE /api/cards/:id` e `DELETE /api/lists/:id` **não apagam** — marcam `deletedAt` e o
+item vai para a lixeira, de onde pode voltar. Só as rotas `/api/trash` apagam de verdade.
+
+A consequência que pega desprevenido: `findUnique({ where: { id } })` continua achando a
+linha. **Toda rota que opera sobre um recurso vivo precisa filtrar `deletedAt: null`** —
+use `findLiveCard()`/`findLiveList()` de `backend/src/trash.ts` em vez de escrever o where
+na mão. Sem isso dá para renomear, mover e criar cards dentro de coisas que o board não
+mostra mais.
+
+Mandar uma lista para a lixeira **não** marca os cards dela: eles somem porque a lista
+sumiu, e voltam junto na restauração. Marcar em cascata ressuscitaria cards que já tinham
+sido jogados fora sozinhos.
+
+Restaurar reusa `card.created`/`list.created` em vez de inventar `*.restored`: o cliente
+já aplica esses eventos como upsert por `id`, então o item reaparece sem mudança no
+reducer. `trash.updated` carrega **só a contagem** `{ cards, lists }` — o conteúdo vem de
+`GET /api/trash` quando a janela abre.
 
 ### API REST
 
@@ -87,11 +107,18 @@ GET    /api/health
 GET    /api/board                     board default com lists e cards aninhados, já ordenados
 POST   /api/lists                     { title }
 PATCH  /api/lists/:id                 { title?, position? }
-DELETE /api/lists/:id                 cascateia nos cards
+DELETE /api/lists/:id                 -> lixeira, leva os cards junto
 POST   /api/cards                     { listId, title, description? }
 PATCH  /api/cards/:id                 { title?, description? }
 PATCH  /api/cards/:id/move            { listId, position }   <- o drag-and-drop
-DELETE /api/cards/:id
+DELETE /api/cards/:id                 -> lixeira, nao apaga
+
+GET    /api/trash                     { cards, lists, counts }
+POST   /api/trash/cards/:id/restore   409 se a lista de origem esta na lixeira
+POST   /api/trash/lists/:id/restore
+DELETE /api/trash/cards/:id           apaga de vez
+DELETE /api/trash/lists/:id           apaga de vez
+DELETE /api/trash                     esvaziar lixeira
 ```
 
 `GET /api/board` é a única leitura de que o frontend precisa; depois dela o estado se mantém pelo WebSocket. Não crie endpoints `GET` por recurso individual sem necessidade real.
@@ -101,3 +128,23 @@ DELETE /api/cards/:id
 O frontend usa o pacote npm **`98.css`** (não CDN — o container precisa buildar offline). Cada lista é uma `.window` com `.title-bar`, cada card é um item dentro de `.window-body`. Não escreva CSS que recrie bordas ou botões que o `98.css` já fornece; use as classes dele e limite o CSS próprio a layout (o board é um flex row com scroll horizontal).
 
 Drag-and-drop é HTML5 nativo (`draggable`, `dragover`, `drop`) — sem biblioteca.
+
+### Ícones
+
+`frontend/src/icons.tsx` tem os ícones em SVG pixel art, desenhados numa grade de
+16x16 com a paleta VGA de 16 cores. **São recriações próprias, não os arquivos da
+Microsoft** — os ícones originais do Windows 95 são proprietários e este repositório
+é público.
+
+Três regras mantêm a aparência: `shapeRendering="crispEdges"` (sem isso o navegador
+aplica antialias e o resultado parece um ícone moderno borrado), escalar só em
+múltiplos inteiros do tamanho base (16, 32, 48 — um ícone de 16px renderizado em
+20px mostra linhas de espessura irregular), e nada de emoji na UI: é o detalhe que
+denuncia a imitação mais rápido que qualquer outro.
+
+### Busca: realce, não filtro
+
+A busca marca os cards que casam e esmaece o resto, em vez de esconder os que não
+casam. Filtrar mudaria os vizinhos de cada card, e como `positionFor()` calcula a
+posição nova a partir dos vizinhos do destino, arrastar durante uma busca gravaria
+a posição errada.
diff --git a/docs/API.md b/docs/API.md
index 87c9a10..6e39c0b 100644
--- a/docs/API.md
+++ b/docs/API.md
@@ -20,7 +20,11 @@ type Card  = { id: string; listId: string; title: string; description: string; p
 ### `GET /api/board`
 Retorna o board `default` com `lists` ordenadas por `position` asc e, dentro de cada uma, `cards` ordenados por `position` asc. É a única chamada de leitura que o frontend precisa fazer.
 
-`200 Board`
+Itens na lixeira **não aparecem aqui** — nem listas, nem cards. A resposta traz também
+`trash: { cards, lists }`, a contagem do que está na lixeira, para o ícone do desktop
+nascer no estado certo sem um `GET /api/trash` extra.
+
+`200 Board & { trash: { cards, lists } }`
 
 ### `POST /api/lists`
 `{ title: string }` — `position` é calculada pelo servidor (última + 1).
@@ -31,8 +35,16 @@ Retorna o board `default` com `lists` ordenadas por `position` asc e, dentro de
 `200 List` · evento `list.updated`
 
 ### `DELETE /api/lists/:id`
-Apaga a lista e seus cards em cascata.
-`204` · evento `list.deleted` com payload `{ id }`
+**Manda a lista para a lixeira** (soft delete) — não apaga. Ela some do `GET /api/board`
+junto com todos os seus cards e passa a aparecer em `GET /api/trash`.
+
+Os cards da lista **não** são marcados individualmente: eles somem porque a lista sumiu e
+voltam junto na restauração. Um card que já tinha ido para a lixeira sozinho continua lá
+mesmo depois de a lista voltar.
+
+`204` · eventos `list.deleted` com payload `{ id }` **e** `trash.updated`
+
+Do ponto de vista do board o evento é o mesmo de antes: remova a lista por `id`.
 
 ### `POST /api/cards`
 `{ listId: string, title: string, description?: string }` — `position` é calculada pelo servidor (última da lista + 1).
@@ -47,7 +59,62 @@ Apaga a lista e seus cards em cascata.
 `200 Card` · evento `card.moved` com payload `{ id, listId, position }`
 
 ### `DELETE /api/cards/:id`
-`204` · evento `card.deleted` com payload `{ id }`
+**Manda o card para a lixeira** (soft delete) — não apaga.
+
+`204` · eventos `card.deleted` com payload `{ id }` **e** `trash.updated`
+
+### A Lixeira
+
+Soft delete muda o significado de "existe": a linha continua no banco, mas invisível para
+o board. **Toda rota que opera sobre um recurso vivo filtra `deletedAt: null`** — renomear,
+mover, ou criar um card dentro de uma lista que está na lixeira retorna `404`, como se o
+recurso não existisse. É o comportamento que você quer no cliente: um item na lixeira não
+é um item editável.
+
+#### `GET /api/trash`
+```json
+{
+  "cards": [{ "id": "...", "title": "...", "description": "...", "position": 3,
+              "listId": "...", "deletedAt": "2026-08-21T04:12:00.000Z",
+              "originalList": { "id": "...", "title": "A Fazer", "deleted": false } }],
+  "lists": [{ "id": "...", "title": "...", "position": 1, "boardId": "...",
+              "deletedAt": "...", "cardCount": 4 }],
+  "counts": { "cards": 1, "lists": 0 }
+}
+```
+Mais recente primeiro. `originalList.deleted` diz que a lista de origem também está na
+lixeira — nesse caso o restore do card retorna `409`, então dá para esmaecer o botão
+"Restaurar" antes do clique em vez de mostrar um erro. `cardCount` é quantos cards voltam
+junto se a lista for restaurada.
+
+`200`
+
+#### `POST /api/trash/cards/:id/restore`
+Devolve o card à posição original. `200 Card` · eventos **`card.created`** e `trash.updated`.
+
+O evento é `card.created`, não um tipo novo: o cliente já aplica esse evento como upsert
+por `id`, então restaurar aparece no board sem nenhuma mudança no reducer.
+
+`404` se o card não está na lixeira · `409` se a lista de origem está na lixeira
+(restaure a lista primeiro).
+
+#### `POST /api/trash/lists/:id/restore`
+`200 List` **com `cards[]` populado** (só os cards vivos) · eventos **`list.created`** e
+`trash.updated`. Os cards vêm junto de propósito — uma lista sem eles faria o cliente
+fazer upsert de uma lista vazia por cima da que tem conteúdo.
+
+`404` se a lista não está na lixeira.
+
+#### `DELETE /api/trash/cards/:id` · `DELETE /api/trash/lists/:id`
+Apaga **de verdade**, irreversível. `204` · evento `trash.updated`.
+
+Não emite `card.deleted`/`list.deleted`: para o board o item já tinha sumido no soft delete.
+Apagar uma lista de vez leva os cards dela em cascata, inclusive os que estavam na lixeira
+por conta própria. `404` se o item não está na lixeira (apagar um item **vivo** por aqui
+não funciona — use `DELETE /api/cards/:id`).
+
+#### `DELETE /api/trash`
+Esvaziar Lixeira. Apaga tudo de vez. `200 { deleted: { cards, lists } }` · evento `trash.updated`.
 
 ## WebSocket
 
@@ -55,6 +122,11 @@ Apaga a lista e seus cards em cascata.
 
 Toda mensagem é `{ type, payload }`. O broadcast vai para **todos** os clientes, incluindo o que originou a mutação — aplique os eventos como upsert idempotente por `id`.
 
+`trash.updated` é o único evento que não fala de um recurso específico: o payload é só a
+contagem, para o ícone do desktop saber se a lixeira está cheia. O conteúdo vem de
+`GET /api/trash` quando a janela abre — mandar a lixeira inteira em cada delete violaria
+a regra de que o payload nunca é o estado todo.
+
 | `type` | `payload` |
 |---|---|
 | `list.created` | `List` |
@@ -64,6 +136,7 @@ Toda mensagem é `{ type, payload }`. O broadcast vai para **todos** os clientes
 | `card.updated` | `Card` |
 | `card.moved` | `{ id, listId, position }` |
 | `card.deleted` | `{ id }` |
+| `trash.updated` | `{ cards, lists }` — só a contagem |
 
 Se a conexão cair, o cliente deve reconectar com backoff e refazer `GET /api/board` ao reconectar — eventos perdidos durante a queda não são reenviados.
 
diff --git a/docs/FRONTEND-REQUESTS.md b/docs/FRONTEND-REQUESTS.md
index b0ba462..8ab5922 100644
--- a/docs/FRONTEND-REQUESTS.md
+++ b/docs/FRONTEND-REQUESTS.md
@@ -106,3 +106,76 @@ Nenhum é bloqueante, todos vêm de leitura de código:
 - [ ] **`card.moved` de card desconhecido é descartado em silêncio**, sem recuperação até reload. Idem `card.created` cujo `listId` não está no board. Um `void load()` nesses casos resolveria.
 
 Detalhes completos, incluindo os buracos de contrato que fechei, no fim de `docs/API.md`.
+
+---
+
+## Nova feature no backend: a Lixeira (backend, 2026-08-21)
+
+Implementei **soft delete com restauração** — a Lixeira do Windows 95. Contrato completo em
+`docs/API.md` (seção "A Lixeira"); resumo do que muda para você:
+
+### O que muda no que você já tem: nada quebra
+
+`DELETE /api/cards/:id` e `DELETE /api/lists/:id` continuam retornando `204` e continuam
+emitindo `card.deleted`/`list.deleted` com `{ id }`. O item só não é mais apagado — vai
+para a lixeira. **Seu reducer não precisa de nenhuma mudança para continuar funcionando.**
+
+Restaurar também reusa `card.created`/`list.created` de propósito, em vez de eventos novos:
+seu upsert idempotente por `id` já faz a coisa certa com eles. Um item restaurado reaparece
+no board sem você escrever uma linha.
+
+O único evento novo é `trash.updated`, com payload `{ cards, lists }` — **só a contagem**,
+para o ícone saber se a lixeira está cheia. Um `type` desconhecido no seu switch deve cair
+no default e ser ignorado; se ele estiver logando erro, vale silenciar.
+
+`GET /api/board` agora traz um campo a mais: `trash: { cards, lists }`. Assim o ícone
+nasce no estado certo sem um GET extra.
+
+### Endpoints novos
+
+```
+GET    /api/trash                     { cards, lists, counts }
+POST   /api/trash/cards/:id/restore   -> 200 Card, evento card.created
+POST   /api/trash/lists/:id/restore   -> 200 List (com cards[]), evento list.created
+DELETE /api/trash/cards/:id           apaga de vez, 204
+DELETE /api/trash/lists/:id           apaga de vez, 204
+DELETE /api/trash                     esvaziar, 200 { deleted: { cards, lists } }
+```
+
+Preflight de CORS testado para todos (o P0 de `methods` não se repete).
+
+### Pedidos
+
+- [ ] **Ícone da Lixeira no desktop.** Você tinha deixado "Ícone de Meu Computador" de fora
+      por achar que polui um board que ocupa a tela toda — concordo, e por isso este é
+      diferente: ele tem função. Duplo-clique abre a janela; e ele **muda de estado** —
+      vazia vs. cheia — conforme `trash.updated` e o `board.trash` inicial.
+- [ ] **Janela da Lixeira** (`.window` com `.title-bar`): lista o que `GET /api/trash`
+      devolve, cards e listas juntos, mais recente primeiro. Por item, botões
+      **Restaurar** e **Excluir** (esse é o irreversível). Rodapé com "Esvaziar Lixeira"
+      atrás do seu `ConfirmDialog` — é a única ação destrutiva de verdade aqui.
+- [ ] **Esmaeça "Restaurar" quando `originalList.deleted === true`.** Esse é o único ponto
+      onde o backend te dá informação para evitar um erro em vez de mostrar um: o restore
+      desse card retorna `409` porque a lista de origem também está na lixeira. O campo
+      existe para isso; a mensagem do `409` também é exibível se você preferir deixar
+      clicar.
+- [ ] **Menu Iniciar → "Lixeira".** Mesma janela, para quem não achar o ícone.
+
+### Duas coisas que valem saber antes de implementar
+
+1. **Restaurar uma lista traz junto só os cards que estavam vivos quando ela foi apagada.**
+   Um card que você jogou fora *individualmente* antes de apagar a lista **continua na
+   lixeira** depois que a lista volta — não ressuscita junto. É intencional (o oposto
+   desfaria uma ação que o usuário tomou de propósito), mas é o comportamento que mais
+   surpreende na hora de testar. `cardCount` na lista diz quantos vão voltar.
+2. **Item na lixeira não é editável.** Renomear, mover ou criar card dentro de uma lista
+   que está na lixeira retorna `404`, como se não existisse. Se sua UI tem algum caminho
+   que segura um `id` antigo (um dialog aberto quando o card foi apagado em outra aba),
+   ele vai receber `404` — o mesmo que já acontecia antes com delete real.
+
+O seed agora nasce com um card já na lixeira ("Trabalho de Estagio.doc") para você ter o
+que ver sem precisar apagar nada primeiro. `docker compose down -v && docker compose up
+--build` para pegar a migration.
+
+`backend/scripts/smoke.mjs` está em **80/80** contra o stack Docker, com 35 asserções novas
+só de lixeira (incluindo os dois casos acima). Roda de novo depois de mexer na API.

From f9d24029c73380819803330cf8478a03b59c803d Mon Sep 17 00:00:00 2001
From: Renan Locatiz Fernandes <renan.fernandes@outlook.com>
Date: Fri, 21 Aug 2026 01:41:11 -0300
Subject: [PATCH 09/19] fix(frontend): hook depois de return condicional
 deixava a tela em branco

O useMemo da busca tinha ficado abaixo do `if (!board) return <Frame>`. Isso muda
a quantidade de hooks entre a primeira renderizacao e a seguinte, e o React
derruba a arvore inteira -- a pagina servia o bundle certo e nao desenhava nada.

Movido para junto dos outros hooks, com `!board` tratado dentro do memo. Todos os
13 hooks do App agora ficam acima de qualquer return condicional.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 frontend/src/App.tsx | 43 ++++++++++++++++++++++++-------------------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 18152c3..daa39f4 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -54,6 +54,30 @@ export default function App() {
     return () => clearInterval(tick)
   }, [])
 
+  // Busca por titulo e descricao. Devolve o conjunto de ids que casam em vez de
+  // filtrar as listas: esconder os cards que nao casam quebraria o drag-and-drop
+  // (as posicoes dos vizinhos mudariam) -- realcar preserva o board inteiro.
+  //
+  // Fica aqui em cima, junto dos outros hooks, e NAO depois do `if (!board)`:
+  // hook depois de return condicional muda a quantidade de hooks entre renders
+  // e o React derruba a arvore inteira (tela em branco).
+  const query = search.trim().toLowerCase()
+  const matches = useMemo(() => {
+    if (!query || !board) return null
+    const ids = new Set<string>()
+    for (const list of board.lists) {
+      for (const card of list.cards) {
+        if (
+          card.title.toLowerCase().includes(query) ||
+          card.description.toLowerCase().includes(query)
+        ) {
+          ids.add(card.id)
+        }
+      }
+    }
+    return ids
+  }, [query, board])
+
   // Qualquer janela aberta desliga os atalhos: senao "n" digitado num dialogo
   // criaria uma lista no board por tras dele.
   const modalOpen = minesweeperOpen || trashOpen || aboutOpen || helpOpen || confirmation !== null
@@ -132,25 +156,6 @@ export default function App() {
 
   const cardCount = board.lists.reduce((n, l) => n + l.cards.length, 0)
 
-  // Busca por titulo e descricao. Devolve o conjunto de ids que casam em vez de
-  // filtrar as listas: esconder os cards que nao casam quebraria o drag-and-drop
-  // (as posicoes dos vizinhos mudariam) -- realcar preserva o board inteiro.
-  const query = search.trim().toLowerCase()
-  const matches = useMemo(() => {
-    if (!query) return null
-    const ids = new Set<string>()
-    for (const list of board.lists) {
-      for (const card of list.cards) {
-        if (
-          card.title.toLowerCase().includes(query) ||
-          card.description.toLowerCase().includes(query)
-        ) {
-          ids.add(card.id)
-        }
-      }
-    }
-    return ids
-  }, [query, board.lists])
   // `board.trash` vem do GET /api/board e e atualizado pelo evento trash.updated:
   // o icone troca de estado sem precisar abrir a janela.
   const trashCount = (board.trash?.cards ?? 0) + (board.trash?.lists ?? 0)

From 4d3c25808f0af74b18eb8f47b55c92e3f2be2019 Mon Sep 17 00:00:00 2001
From: Renan Locatiz Fernandes <renan.fernandes@outlook.com>
Date: Fri, 21 Aug 2026 01:44:20 -0300
Subject: [PATCH 10/19] ci: roda os testes unitarios no job do backend

O workflow foi escrito antes de `npm test` existir, entao os 17 testes unitarios
nao rodavam no CI -- so o smoke, que precisa do stack de pe. Agora o job de
backend faz typecheck e testes.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .github/workflows/ci.yml | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 3237f20..013c1a5 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -37,6 +37,11 @@ jobs:
       - name: Typecheck
         run: npx tsc --noEmit
 
+      # Testes unitarios: runner nativo do Node, sem dependencia extra. Rodam
+      # sem banco e sem stack de pe -- o smoke, que exige os dois, e outro job.
+      - name: Testes unitarios
+        run: npm test
+
   frontend:
     name: frontend (build)
     runs-on: ubuntu-latest

From 8e5256a1e9af5010caeec9e33553ebe434ed5958 Mon Sep 17 00:00:00 2001
From: Renan Locatiz Fernandes <renan.fernandes@outlook.com>
Date: Fri, 21 Aug 2026 01:51:16 -0300
Subject: [PATCH 11/19] feat(frontend): desfazer de movimento e menu de
 contexto

Arrastar um card passa a oferecer "Desfazer" por 8 segundos, tambem em Ctrl+Z.
A origem e capturada ANTES do move: depois dele o eco do WebSocket ja reescreveu
o card e nao ha mais de onde tirar o lugar antigo.

E so uma acao, com validade curta, e nao ha refazer. O estado aqui e compartilhado
entre abas: desfazer tres passos atras pode reverter algo que outra pessoa mudou
no meio tempo, e refazer depois disso e pedir conflito.

Botao direito no fundo do desktop abre menu de contexto. Ele se reposiciona
sozinho perto das bordas -- abre para a esquerda em vez de vazar da viewport --
e isso exige medir depois de montar, dai o useLayoutEffect: com useEffect o menu
pisca na posicao errada antes de corrigir.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 frontend/src/App.tsx         | 53 ++++++++++++++++++++++-
 frontend/src/ContextMenu.tsx | 83 ++++++++++++++++++++++++++++++++++++
 frontend/src/styles.css      | 69 ++++++++++++++++++++++++++++++
 frontend/src/useUndo.ts      | 47 ++++++++++++++++++++
 4 files changed, 251 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/ContextMenu.tsx
 create mode 100644 frontend/src/useUndo.ts

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index daa39f4..b424cc8 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -12,6 +12,9 @@ import { TrashWindow } from './TrashWindow'
 import { Minesweeper } from './Minesweeper'
 import { useHotkeys } from './useHotkeys'
 import { ScreenSaver } from './ScreenSaver'
+import { useUndo } from './useUndo'
+import { ContextMenu } from './ContextMenu'
+import type { MenuState } from './ContextMenu'
 import { TrashEmptyIcon, TrashFullIcon, WindowsFlagIcon } from './icons'
 import type { List } from './types'
 
@@ -46,6 +49,8 @@ export default function App() {
   const [clock, setClock] = useState(() => new Date())
   const searchRef = useRef<HTMLInputElement>(null)
   const newListRef = useRef<HTMLInputElement>(null)
+  const [menu, setMenu] = useState<MenuState | null>(null)
+  const undo = useUndo()
 
   // Relogio da bandeja. 10s em vez de 1s: o display so mostra hora e minuto,
   // entao segundo a segundo seria render descartado.
@@ -90,6 +95,7 @@ export default function App() {
       r: () => void reload(),
       '?': () => setHelpOpen(true),
       escape: () => setSearch(''),
+      'ctrl+z': () => void undo.run(),
     },
     !modalOpen && openCardId === null,
   )
@@ -134,11 +140,22 @@ export default function App() {
   const dropCard = (list: List, index: number) => {
     if (drag?.kind !== 'card') return
     const cardId = drag.id
+    // Origem capturada ANTES do move: depois dele o eco do WebSocket ja
+    // reescreveu o card e nao ha mais de onde tirar o lugar antigo.
+    const origin = board.lists
+      .flatMap((l) => l.cards)
+      .find((c) => c.id === cardId)
     // Tirar o proprio card antes de calcular evita que ele vire vizinho de si mesmo
     // -- sem isso, arrastar um slot para baixo cai de volta no lugar de origem.
     const neighbours = list.cards.filter((c) => c.id !== cardId)
     const slot = Math.min(index, neighbours.length)
     void run(() => api.moveCard(cardId, list.id, positionFor(neighbours, slot)))
+    if (origin && (origin.listId !== list.id || origin.position !== positionFor(neighbours, slot))) {
+      undo.offer({
+        label: `Card "${origin.title}" movido`,
+        undo: () => api.moveCard(cardId, origin.listId, origin.position),
+      })
+    }
     endDrag()
   }
 
@@ -162,7 +179,27 @@ export default function App() {
   const trashFull = trashCount > 0
 
   return (
-    <div className="desktop">
+    <div
+      className="desktop"
+      onContextMenu={(e) => {
+        // So o fundo: um clique direito sobre um card ou lista tem menu proprio
+        // (ou deve cair no menu nativo, se nao tiver).
+        if (e.target !== e.currentTarget) return
+        e.preventDefault()
+        setMenu({
+          x: e.clientX,
+          y: e.clientY,
+          items: [
+            { kind: 'item', label: 'Nova lista', bold: true, onClick: () => newListRef.current?.focus() },
+            { kind: 'separator' },
+            { kind: 'item', label: 'Atualizar', onClick: () => void reload() },
+            { kind: 'item', label: 'Abrir a Lixeira', onClick: () => setTrashOpen(true) },
+            { kind: 'separator' },
+            { kind: 'item', label: 'Propriedades', onClick: () => setAboutOpen(true) },
+          ],
+        })
+      }}
+    >
       <div className="board-header">
         <h1>{board.title}</h1>
         <span className={connected ? 'status online' : 'status offline'}>
@@ -357,6 +394,20 @@ export default function App() {
         </Modal>
       )}
 
+      {undo.action && (
+        <div className="window undo-bar" role="status">
+          <div className="window-body">
+            <span>{undo.action.label}</span>
+            <button onClick={() => void undo.run()}>Desfazer (Ctrl+Z)</button>
+            <button onClick={undo.clear} aria-label="Dispensar">
+              X
+            </button>
+          </div>
+        </div>
+      )}
+
+      {menu && <ContextMenu state={menu} onClose={() => setMenu(null)} />}
+
       <ScreenSaver />
 
       <div className="taskbar">
diff --git a/frontend/src/ContextMenu.tsx b/frontend/src/ContextMenu.tsx
new file mode 100644
index 0000000..004699a
--- /dev/null
+++ b/frontend/src/ContextMenu.tsx
@@ -0,0 +1,83 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
+
+export type MenuItem =
+  | { kind: 'item'; label: string; onClick: () => void; disabled?: boolean; bold?: boolean }
+  | { kind: 'separator' }
+
+export type MenuState = { x: number; y: number; items: MenuItem[] }
+
+/**
+ * Menu de contexto do Windows 95: botao direito em qualquer lugar.
+ *
+ * O detalhe que faz parecer nativo e o reposicionamento -- um menu aberto perto
+ * da borda direita da tela abre para a ESQUERDA do cursor, nao para fora da
+ * viewport. Precisa medir depois de montar, por isso o useLayoutEffect: com
+ * useEffect normal o menu pisca na posicao errada antes de corrigir.
+ */
+export function ContextMenu({ state, onClose }: { state: MenuState; onClose: () => void }) {
+  const ref = useRef<HTMLDivElement>(null)
+  const [pos, setPos] = useState({ x: state.x, y: state.y })
+
+  useLayoutEffect(() => {
+    const el = ref.current
+    if (!el) return
+    const box = el.getBoundingClientRect()
+    const margin = 4
+    setPos({
+      x: state.x + box.width > window.innerWidth ? Math.max(margin, state.x - box.width) : state.x,
+      y:
+        state.y + box.height > window.innerHeight
+          ? Math.max(margin, state.y - box.height)
+          : state.y,
+    })
+  }, [state.x, state.y])
+
+  useEffect(() => {
+    // Qualquer clique, Escape ou scroll fecha -- e o comportamento do shell.
+    const close = () => onClose()
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    window.addEventListener('click', close)
+    window.addEventListener('scroll', close, true)
+    window.addEventListener('keydown', onKey)
+    return () => {
+      window.removeEventListener('click', close)
+      window.removeEventListener('scroll', close, true)
+      window.removeEventListener('keydown', onKey)
+    }
+  }, [onClose])
+
+  return (
+    <div
+      ref={ref}
+      className="window context-menu"
+      role="menu"
+      style={{ left: pos.x, top: pos.y }}
+      onClick={(e) => e.stopPropagation()}
+      onContextMenu={(e) => e.preventDefault()}
+    >
+      <ul>
+        {state.items.map((item, i) =>
+          item.kind === 'separator' ? (
+            <li key={i} className="context-separator" role="separator" />
+          ) : (
+            <li key={i}>
+              <button
+                role="menuitem"
+                disabled={item.disabled}
+                className={item.bold ? 'context-default' : undefined}
+                onClick={() => {
+                  item.onClick()
+                  onClose()
+                }}
+              >
+                {item.label}
+              </button>
+            </li>
+          ),
+        )}
+      </ul>
+    </div>
+  )
+}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 51f57d0..c201dba 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -652,3 +652,72 @@ body {
     animation: none;
   }
 }
+
+/* --- Desfazer e menu de contexto --- */
+.undo-bar {
+  position: fixed;
+  left: 50%;
+  bottom: 44px;
+  transform: translateX(-50%);
+  z-index: 40;
+  min-width: 300px;
+}
+
+.undo-bar .window-body {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 6px;
+}
+
+.undo-bar span {
+  flex: 1;
+  overflow-wrap: anywhere;
+}
+
+.context-menu {
+  position: fixed;
+  z-index: 60;
+  min-width: 160px;
+  padding: 2px;
+}
+
+.context-menu ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.context-menu button {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 3px 18px;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+
+/* Item destacado do menu do Win95: azul com texto branco, sem relevo. */
+.context-menu button:hover:not(:disabled),
+.context-menu button:focus-visible {
+  background: #000080;
+  color: #fff;
+  outline: none;
+}
+
+.context-menu button:disabled {
+  color: #808080;
+  text-shadow: 1px 1px 0 #fff;
+}
+
+.context-default {
+  font-weight: bold;
+}
+
+.context-separator {
+  height: 0;
+  margin: 3px 2px;
+  border-top: 1px solid #808080;
+  border-bottom: 1px solid #fff;
+}
diff --git a/frontend/src/useUndo.ts b/frontend/src/useUndo.ts
new file mode 100644
index 0000000..6daccad
--- /dev/null
+++ b/frontend/src/useUndo.ts
@@ -0,0 +1,47 @@
+import { useCallback, useRef, useState } from 'react'
+
+export type UndoAction = {
+  /** O que aparece na barra: "Card 'Comprar CD-R' movido". */
+  label: string
+  /** Desfaz. Pode falhar -- o item pode ter sido apagado por outra aba nesse meio tempo. */
+  undo: () => Promise<unknown>
+}
+
+const TIMEOUT_MS = 8000
+
+/**
+ * Desfazer de uma acao so, com validade.
+ *
+ * A pilha de undo tem um problema especifico neste app: o estado e compartilhado
+ * entre abas por WebSocket, entao um "desfazer" de tres passos atras pode estar
+ * revertendo algo que outra pessoa ja mudou. Guardar uma acao so, valida por
+ * poucos segundos, mantem a janela em que a reversao ainda faz sentido.
+ *
+ * Por isso tambem nao existe redo: refazer o que voce desfez, depois de outra
+ * pessoa ter mexido, e pedir conflito.
+ */
+export function useUndo() {
+  const [action, setAction] = useState<UndoAction | null>(null)
+  const timer = useRef<ReturnType<typeof setTimeout>>(undefined)
+
+  const clear = useCallback(() => {
+    clearTimeout(timer.current)
+    setAction(null)
+  }, [])
+
+  const offer = useCallback((next: UndoAction) => {
+    clearTimeout(timer.current)
+    setAction(next)
+    timer.current = setTimeout(() => setAction(null), TIMEOUT_MS)
+  }, [])
+
+  const run = useCallback(async () => {
+    if (!action) return
+    // Limpa antes de executar: se o undo falhar, oferecer "desfazer" de novo
+    // sobre um estado que ja mudou e pior do que so sumir com o botao.
+    clear()
+    await action.undo()
+  }, [action, clear])
+
+  return { action, offer, run, clear }
+}

From 86d6d67dde6cd4ab57ee8111858cc1b6d28201b9 Mon Sep 17 00:00:00 2001
From: Renan Locatiz Fernandes <renan.fernandes@outlook.com>
Date: Fri, 21 Aug 2026 01:51:17 -0300
Subject: [PATCH 12/19] build(frontend): guarda contra hook depois de return
 condicional

O bug que deixou a tela em branco nao e pego por nada: tsc compila, o Vite
builda, o bundle e servido, e o React derruba a arvore em silencio porque a
quantidade de hooks mudou entre renders.

`check-hooks.mjs` varre os componentes e falha se achar chamada de hook depois
de um return de nivel de componente. Roda no `npm run build`, entao o CI pega
antes do deploy. Verificado dos dois lados: injetando a violacao ele acusa
arquivo e linha e sai 1; sem ela, passa.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 frontend/package.json            |  5 ++-
 frontend/scripts/check-hooks.mjs | 75 ++++++++++++++++++++++++++++++++
 2 files changed, 78 insertions(+), 2 deletions(-)
 create mode 100644 frontend/scripts/check-hooks.mjs

diff --git a/frontend/package.json b/frontend/package.json
index 8c22730..77c8619 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -5,8 +5,9 @@
   "type": "module",
   "scripts": {
     "dev": "vite --host 0.0.0.0 --port 5173",
-    "build": "tsc -b && vite build",
-    "preview": "vite preview --host 0.0.0.0 --port 8080"
+    "build": "node scripts/check-hooks.mjs && tsc -b && vite build",
+    "preview": "vite preview --host 0.0.0.0 --port 8080",
+    "check-hooks": "node scripts/check-hooks.mjs"
   },
   "dependencies": {
     "98.css": "^0.1.20",
diff --git a/frontend/scripts/check-hooks.mjs b/frontend/scripts/check-hooks.mjs
new file mode 100644
index 0000000..d34eb54
--- /dev/null
+++ b/frontend/scripts/check-hooks.mjs
@@ -0,0 +1,75 @@
+/**
+ * Guarda contra hook depois de return condicional.
+ *
+ * Este bug ja derrubou a app uma vez: um useMemo abaixo de `if (!board) return`
+ * muda a quantidade de hooks entre a primeira renderizacao e a seguinte, o React
+ * derruba a arvore inteira, e o sintoma e uma tela em branco com o bundle certo
+ * sendo servido e nenhum erro no build. `tsc` nao pega, o Vite nao pega.
+ *
+ * Uso: node scripts/check-hooks.mjs   (sai 1 se achar violacao)
+ *
+ * E uma heuristica de texto, nao um parser: procura o primeiro `return` no nivel
+ * de indentacao do corpo do componente e reclama de qualquer chamada de hook
+ * depois dele. Prefere falso positivo a falso negativo -- se acusar algo
+ * legitimo, o jeito e reorganizar o componente, que provavelmente esta grande
+ * demais de qualquer forma.
+ */
+import { readdirSync, readFileSync } from 'node:fs'
+import { join } from 'node:path'
+
+const SRC = new URL('../src/', import.meta.url).pathname.replace(/^\/([A-Za-z]:)/, '$1')
+
+const HOOK = /\buse[A-Z]\w*\s*\(/
+// Um return de nivel 2 (dois espacos) dentro do componente: `  return (` ou
+// `  if (x) return y`. Returns mais indentados estao dentro de callbacks.
+const EARLY_RETURN = /^ {2}(if\s*\(.*\)\s*return\b|return\b)/
+const COMPONENT = /^export (default )?function [A-Z]\w*/
+
+let violations = 0
+
+function check(file, source) {
+  const lines = source.split('\n')
+  let inComponent = false
+  let sawReturn = null
+
+  lines.forEach((line, i) => {
+    if (COMPONENT.test(line)) {
+      inComponent = true
+      sawReturn = null
+      return
+    }
+    if (!inComponent) return
+
+    // Fim do componente: fecha-chaves na coluna 0.
+    if (line === '}') {
+      inComponent = false
+      return
+    }
+
+    if (sawReturn === null && EARLY_RETURN.test(line)) {
+      sawReturn = i + 1
+      return
+    }
+
+    const trimmed = line.trim()
+    if (trimmed.startsWith('//') || trimmed.startsWith('*')) return
+
+    if (sawReturn !== null && HOOK.test(line)) {
+      violations++
+      console.log(
+        `  ${file}:${i + 1}  hook depois do return da linha ${sawReturn}\n    ${trimmed.slice(0, 80)}`,
+      )
+    }
+  })
+}
+
+const files = readdirSync(SRC).filter((f) => f.endsWith('.tsx') || f.endsWith('.ts'))
+for (const f of files) check(f, readFileSync(join(SRC, f), 'utf8'))
+
+if (violations > 0) {
+  console.log(`\nFALHOU: ${violations} hook(s) depois de return condicional.`)
+  console.log('Mova a chamada para junto dos outros hooks, antes de qualquer return.')
+  process.exit(1)
+}
+
+console.log(`ok  ${files.length} arquivos, nenhum hook depois de return condicional`)

From 6891b26d14ae74c70299f1492a30cf1bfdff9e14 Mon Sep 17 00:00:00 2001
From: Renan Locatiz Fernandes <renan.fernandes@outlook.com>
Date: Fri, 21 Aug 2026 01:55:26 -0300
Subject: [PATCH 13/19] feat(frontend): Bloco de Notas, Propriedades do Sistema
 e sons

Tres janelas classicas do shell, mais o audio.

Os sons sao sintetizados na Web Audio API, nao arquivos .wav: o container builda
offline e binario no repo e peso morto. Comecam DESLIGADOS e ficam no
localStorage -- audio automatico sem o usuario pedir e hostil. O AudioContext e
criado preguicosamente no primeiro play() porque navegador bloqueia audio antes
da primeira interacao, e nenhuma excecao de audio escapa: som e enfeite, falha
dele nao pode derrubar a UI.

O `runWithSound` envolve o `run` que ja centraliza toda mutacao, entao nenhuma
chamada individual precisa lembrar de tocar, e o som de erro acompanha qualquer
falha de API automaticamente.

O Bloco de Notas salva no localStorage, nao no servidor: nao existe recurso de
"nota" no contrato da API e inventar um por conta propria seria mudanca de
contrato unilateral -- exatamente o que docs/BACKEND-REQUESTS.md existe para
evitar.

Junto vao useWindowManager e DraggableWindow (arrastar pela title bar com pointer
events, nao HTML5 drag, que ja e usado pelos cards e os dois brigariam), ainda
nao ligados na UI.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 frontend/src/App.tsx              | 104 +++++++++++-
 frontend/src/DraggableWindow.tsx  | 158 +++++++++++++++++
 frontend/src/Notepad.tsx          | 271 ++++++++++++++++++++++++++++++
 frontend/src/SystemProperties.tsx | 169 +++++++++++++++++++
 frontend/src/draggablewindow.css  |  43 +++++
 frontend/src/notepad.css          | 163 ++++++++++++++++++
 frontend/src/systemproperties.css |  97 +++++++++++
 frontend/src/useSounds.ts         | 249 +++++++++++++++++++++++++++
 frontend/src/useWindowManager.ts  | 116 +++++++++++++
 9 files changed, 1364 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/DraggableWindow.tsx
 create mode 100644 frontend/src/Notepad.tsx
 create mode 100644 frontend/src/SystemProperties.tsx
 create mode 100644 frontend/src/draggablewindow.css
 create mode 100644 frontend/src/notepad.css
 create mode 100644 frontend/src/systemproperties.css
 create mode 100644 frontend/src/useSounds.ts
 create mode 100644 frontend/src/useWindowManager.ts

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b424cc8..27d97bc 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -15,6 +15,9 @@ import { ScreenSaver } from './ScreenSaver'
 import { useUndo } from './useUndo'
 import { ContextMenu } from './ContextMenu'
 import type { MenuState } from './ContextMenu'
+import { Notepad } from './Notepad'
+import { SystemProperties } from './SystemProperties'
+import { useSounds } from './useSounds'
 import { TrashEmptyIcon, TrashFullIcon, WindowsFlagIcon } from './icons'
 import type { List } from './types'
 
@@ -51,6 +54,9 @@ export default function App() {
   const newListRef = useRef<HTMLInputElement>(null)
   const [menu, setMenu] = useState<MenuState | null>(null)
   const undo = useUndo()
+  const [notepadOpen, setNotepadOpen] = useState(false)
+  const [sysPropsOpen, setSysPropsOpen] = useState(false)
+  const sounds = useSounds()
 
   // Relogio da bandeja. 10s em vez de 1s: o display so mostra hora e minuto,
   // entao segundo a segundo seria render descartado.
@@ -85,7 +91,14 @@ export default function App() {
 
   // Qualquer janela aberta desliga os atalhos: senao "n" digitado num dialogo
   // criaria uma lista no board por tras dele.
-  const modalOpen = minesweeperOpen || trashOpen || aboutOpen || helpOpen || confirmation !== null
+  const modalOpen =
+    minesweeperOpen ||
+    trashOpen ||
+    aboutOpen ||
+    helpOpen ||
+    notepadOpen ||
+    sysPropsOpen ||
+    confirmation !== null
   useHotkeys(
     {
       n: () => newListRef.current?.focus(),
@@ -123,6 +136,20 @@ export default function App() {
   // Derivado do board, nao copiado: o eco do WebSocket atualiza o dialogo aberto.
   const openCard = board.lists.flatMap((l) => l.cards).find((c) => c.id === openCardId) ?? null
 
+  // Envelope unico em volta do `run`: assim nenhuma chamada individual precisa
+  // lembrar de tocar som, e o som de erro acompanha qualquer falha de API.
+  const runWithSound = (action: () => Promise<unknown>, ok: 'ding' | 'recycle' = 'ding') =>
+    void run(async () => {
+      try {
+        const result = await action()
+        sounds.play(ok)
+        return result
+      } catch (e) {
+        sounds.play('error')
+        throw e
+      }
+    })
+
   const endDrag = () => {
     setDrag(null)
     setCardDropTarget(null)
@@ -133,7 +160,7 @@ export default function App() {
     e.preventDefault()
     const title = newList.trim()
     if (!title) return
-    void run(() => api.createList(title))
+    runWithSound(() => api.createList(title))
     setNewList('')
   }
 
@@ -195,7 +222,7 @@ export default function App() {
             { kind: 'item', label: 'Atualizar', onClick: () => void reload() },
             { kind: 'item', label: 'Abrir a Lixeira', onClick: () => setTrashOpen(true) },
             { kind: 'separator' },
-            { kind: 'item', label: 'Propriedades', onClick: () => setAboutOpen(true) },
+            { kind: 'item', label: 'Propriedades', onClick: () => setSysPropsOpen(true) },
           ],
         })
       }}
@@ -294,13 +321,13 @@ export default function App() {
               if (/campo minado/i.test(card.title)) return setMinesweeperOpen(true)
               setOpenCardId(card.id)
             }}
-            onAddCard={(listId, title) => void run(() => api.createCard(listId, title))}
+            onAddCard={(listId, title) => runWithSound(() => api.createCard(listId, title))}
             onRename={(l, title) => void run(() => api.renameList(l.id, title))}
             onDelete={(l) =>
               setConfirmation({
                 title: 'Apagar lista',
                 message: `Mandar "${l.title}" e seus ${l.cards.length} card(s) para a Lixeira?`,
-                onYes: () => void run(() => api.deleteList(l.id)),
+                onYes: () => runWithSound(() => api.deleteList(l.id), 'recycle'),
               })
             }
           />
@@ -321,7 +348,7 @@ export default function App() {
               title: 'Apagar card',
               message: `Mandar o card "${openCard.title}" para a Lixeira?`,
               onYes: () => {
-                void run(() => api.deleteCard(openCard.id))
+                runWithSound(() => api.deleteCard(openCard.id), 'recycle')
                 setOpenCardId(null)
               },
             })
@@ -331,6 +358,39 @@ export default function App() {
 
       {minesweeperOpen && <Minesweeper onClose={() => setMinesweeperOpen(false)} />}
 
+      {notepadOpen && (
+        <Notepad
+          initialText={`Anotacoes de ${board.title}\r\n\r\n`}
+          title="Anotacoes"
+          // O Bloco de Notas nao tem persistencia no servidor: nao ha recurso de
+          // "nota" no contrato da API, e inventar um so para isso seria mudanca
+          // de contrato por conta propria. Fica no localStorage.
+          onSave={(text) => {
+            try {
+              localStorage.setItem('teamapp95.notepad', text)
+            } catch {
+              /* modo privado: perde a nota, nao quebra a app */
+            }
+            sounds.play('ding')
+          }}
+          onClose={() => setNotepadOpen(false)}
+        />
+      )}
+
+      {sysPropsOpen && (
+        <SystemProperties
+          stats={{
+            lists: board.lists.length,
+            cards: cardCount,
+            trashed: trashCount,
+            apiUrl: API_URL,
+            connected,
+            boardTitle: board.title,
+          }}
+          onClose={() => setSysPropsOpen(false)}
+        />
+      )}
+
       {trashOpen && (
         <TrashWindow
           onClose={() => setTrashOpen(false)}
@@ -451,11 +511,23 @@ export default function App() {
                   onClick={() => {
                     setStartOpen(false)
                     setMinesweeperOpen(true)
+                    sounds.play('chord')
                   }}
                 >
                   Campo Minado
                 </button>
               </li>
+              <li>
+                <button
+                  onClick={() => {
+                    setStartOpen(false)
+                    setNotepadOpen(true)
+                    sounds.play('chord')
+                  }}
+                >
+                  Bloco de Notas
+                </button>
+              </li>
               <li>
                 <button
                   onClick={() => {
@@ -477,6 +549,26 @@ export default function App() {
                   Atalhos de teclado
                 </button>
               </li>
+              <li>
+                <button
+                  onClick={() => {
+                    setStartOpen(false)
+                    setSysPropsOpen(true)
+                  }}
+                >
+                  Propriedades do Sistema
+                </button>
+              </li>
+              <li>
+                <button
+                  onClick={() => {
+                    setStartOpen(false)
+                    sounds.toggle()
+                  }}
+                >
+                  Som: {sounds.enabled ? 'ligado' : 'desligado'}
+                </button>
+              </li>
               <li>
                 <button
                   onClick={() => {
diff --git a/frontend/src/DraggableWindow.tsx b/frontend/src/DraggableWindow.tsx
new file mode 100644
index 0000000..e92f50e
--- /dev/null
+++ b/frontend/src/DraggableWindow.tsx
@@ -0,0 +1,158 @@
+import { useCallback, useEffect, useRef, useState, type ReactNode, type PointerEvent } from 'react'
+import './draggablewindow.css'
+
+export interface DraggableWindowProps {
+  title: string
+  onClose: () => void
+  /** Chamado em qualquer clique na janela -- o dono usa para subir o z-index. */
+  onFocus?: () => void
+  z?: number
+  children: ReactNode
+  width?: number
+  initialX?: number
+  initialY?: number
+  /** Se ausente, o botao de minimizar nao aparece (nao ha taskbar para receber). */
+  onMinimize?: () => void
+  /** Sem isso a janela nao tem foco visual: title-bar cinza em vez de azul. */
+  active?: boolean
+}
+
+/** Quantos pixels da janela precisam continuar dentro da viewport. */
+const KEEP_VISIBLE = 60
+/** Altura aproximada da title-bar (3px de padding do `.window` + barra). */
+const TITLE_BAR_H = 22
+
+interface Point {
+  x: number
+  y: number
+}
+
+interface DragState {
+  pointerId: number
+  /** Distancia entre o ponto clicado e o canto da janela. */
+  offsetX: number
+  offsetY: number
+}
+
+/**
+ * Janela arrastavel pela barra de titulo, como no Win95 de verdade.
+ *
+ * **Por que pointer events e nao o drag-and-drop HTML5**: os cards do board ja
+ * usam `draggable` + `dragstart`/`drop`. Se a janela tambem fosse `draggable`,
+ * arrastar um card de dentro dela dispararia os dois: o navegador escolhe o
+ * ancestral arrastavel mais proximo, o `dataTransfer` acaba compartilhado e o
+ * drop cai no alvo errado. Alem disso o HTML5 drag nao da coordenadas uteis
+ * durante o arrasto (o `dragover` do documento e ruidoso e o `drag` reporta
+ * 0,0 no Firefox). `pointerdown` + `setPointerCapture` resolve os dois
+ * problemas: o movimento e continuo, as coordenadas sao exatas, e a captura
+ * garante que o `pointermove` continue chegando mesmo se o cursor sair da
+ * barra ou passar por cima de um iframe.
+ */
+export function DraggableWindow({
+  title,
+  onClose,
+  onFocus,
+  z = 1,
+  children,
+  width = 320,
+  initialX = 80,
+  initialY = 80,
+  onMinimize,
+  active = true,
+}: DraggableWindowProps) {
+  const [pos, setPos] = useState<Point>({ x: initialX, y: initialY })
+  const [maximized, setMaximized] = useState(false)
+  const drag = useRef<DragState | null>(null)
+  const barRef = useRef<HTMLDivElement | null>(null)
+
+  /** Impede que a janela suma: a title-bar precisa continuar alcancavel. */
+  const clamp = useCallback(
+    (p: Point): Point => {
+      const maxX = window.innerWidth - KEEP_VISIBLE
+      const minX = KEEP_VISIBLE - width
+      const maxY = window.innerHeight - TITLE_BAR_H
+      return {
+        x: Math.min(Math.max(p.x, minX), maxX),
+        // y nunca negativo: arrastar para cima esconderia a barra sob o topo
+        // da viewport e nao haveria como pegar a janela de volta.
+        y: Math.min(Math.max(p.y, 0), maxY),
+      }
+    },
+    [width],
+  )
+
+  // Redimensionar a janela do navegador pode deixar a janelinha fora da tela.
+  useEffect(() => {
+    const onResize = () => setPos((p) => clamp(p))
+    window.addEventListener('resize', onResize)
+    return () => window.removeEventListener('resize', onResize)
+  }, [clamp])
+
+  const onPointerDown = (e: PointerEvent<HTMLDivElement>) => {
+    onFocus?.()
+    if (maximized) return
+    // Clique nos botoes de controle nao arrasta.
+    if (e.target instanceof HTMLElement && e.target.closest('button')) return
+    if (e.button !== 0) return
+
+    drag.current = { pointerId: e.pointerId, offsetX: e.clientX - pos.x, offsetY: e.clientY - pos.y }
+    barRef.current?.setPointerCapture(e.pointerId)
+    // Sem isso o navegador comeca a selecionar o texto do titulo durante o arrasto.
+    e.preventDefault()
+  }
+
+  const onPointerMove = (e: PointerEvent<HTMLDivElement>) => {
+    const d = drag.current
+    if (!d || d.pointerId !== e.pointerId) return
+    setPos(clamp({ x: e.clientX - d.offsetX, y: e.clientY - d.offsetY }))
+  }
+
+  const endDrag = (e: PointerEvent<HTMLDivElement>) => {
+    const d = drag.current
+    if (!d || d.pointerId !== e.pointerId) return
+    drag.current = null
+    if (barRef.current?.hasPointerCapture(e.pointerId)) {
+      barRef.current.releasePointerCapture(e.pointerId)
+    }
+  }
+
+  const style = maximized
+    ? { left: 0, top: 0, width: '100%', height: '100%', zIndex: z }
+    : { left: pos.x, top: pos.y, width, zIndex: z }
+
+  return (
+    <div
+      className={`window draggable-window${maximized ? ' is-maximized' : ''}`}
+      style={style}
+      onPointerDown={() => onFocus?.()}
+      role="dialog"
+      aria-label={title}
+    >
+      <div
+        ref={barRef}
+        className={`title-bar${active ? '' : ' inactive'}`}
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={endDrag}
+        onPointerCancel={endDrag}
+        onDoubleClick={() => setMaximized((m) => !m)}
+      >
+        <div className="title-bar-text">{title}</div>
+        <div className="title-bar-controls">
+          {onMinimize ? (
+            <button type="button" aria-label="Minimize" onClick={onMinimize} />
+          ) : null}
+          {/* 98.css estiliza Maximize e Restore por aria-label; trocar o label
+              troca o icone sozinho, sem CSS proprio. */}
+          <button
+            type="button"
+            aria-label={maximized ? 'Restore' : 'Maximize'}
+            onClick={() => setMaximized((m) => !m)}
+          />
+          <button type="button" aria-label="Close" onClick={onClose} />
+        </div>
+      </div>
+      <div className="window-body draggable-window-body">{children}</div>
+    </div>
+  )
+}
diff --git a/frontend/src/Notepad.tsx b/frontend/src/Notepad.tsx
new file mode 100644
index 0000000..3058291
--- /dev/null
+++ b/frontend/src/Notepad.tsx
@@ -0,0 +1,271 @@
+import { useEffect, useRef, useState } from 'react'
+import { Modal } from './Modal'
+import { WarningIcon } from './icons'
+import './notepad.css'
+
+type Props = {
+  initialText: string
+  title: string
+  onSave: (text: string) => void
+  onClose: () => void
+}
+
+/** Qual menu esta aberto. `null` = nenhum; so um por vez, como no original. */
+type OpenMenu = 'arquivo' | 'editar' | 'formatar' | null
+
+/**
+ * Formato do carimbo do F5. O Notepad do Windows 95 usava a ordem do locale
+ * (hora antes da data), e nao um ISO -- manter isso e metade da ilusao.
+ */
+function stamp(): string {
+  const now = new Date()
+  const hora = now.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })
+  const data = now.toLocaleDateString('pt-BR')
+  return `${hora} ${data}`
+}
+
+/**
+ * Linha e coluna a partir do offset do caret. O textarea so expoe `selectionStart`
+ * em caracteres, entao a conversao e nossa: linha = quantidade de \n antes, e a
+ * coluna e a distancia ate o \n anterior. Com quebra automatica ligada o Notepad
+ * original tambem contava linhas *logicas*, nao visuais -- e o que fazemos aqui.
+ */
+function lineCol(text: string, caret: number): { line: number; col: number } {
+  const before = text.slice(0, caret)
+  const lastBreak = before.lastIndexOf('\n')
+  return { line: before.split('\n').length, col: caret - lastBreak }
+}
+
+export function Notepad({ initialText, title, onSave, onClose }: Props) {
+  const [text, setText] = useState(initialText)
+  /** Ultimo conteudo gravado. `dirty` e a comparacao com ele, nao um booleano solto:
+      desfazer ate voltar ao original deixa de ser "alteracao nao salva", como no Win95. */
+  const [saved, setSaved] = useState(initialText)
+  const [wrap, setWrap] = useState(true)
+  const [menu, setMenu] = useState<OpenMenu>(null)
+  /** Segundo estado da janela: o aviso de saida. Nada de window.confirm. */
+  const [asking, setAsking] = useState(false)
+  const [caret, setCaret] = useState(0)
+  /** Posicao para onde o caret deve ir depois que o React re-renderizar o texto. */
+  const [pendingCaret, setPendingCaret] = useState<number | null>(null)
+
+  const areaRef = useRef<HTMLTextAreaElement>(null)
+  const dirty = text !== saved
+
+  // Reposicionar o caret so funciona depois que o novo valor chegou ao DOM;
+  // fazer isso dentro do handler colocaria o cursor no fim do texto.
+  useEffect(() => {
+    if (pendingCaret === null) return
+    const el = areaRef.current
+    if (el) {
+      el.focus()
+      el.setSelectionRange(pendingCaret, pendingCaret)
+      setCaret(pendingCaret)
+    }
+    setPendingCaret(null)
+  }, [pendingCaret])
+
+  const syncCaret = () => {
+    const el = areaRef.current
+    if (el) setCaret(el.selectionStart)
+  }
+
+  const doSave = () => {
+    onSave(text)
+    setSaved(text)
+    setMenu(null)
+  }
+
+  const insertStamp = () => {
+    const el = areaRef.current
+    if (!el) return
+    const { selectionStart: start, selectionEnd: end } = el
+    const s = stamp()
+    setText(text.slice(0, start) + s + text.slice(end))
+    setPendingCaret(start + s.length)
+    setMenu(null)
+  }
+
+  const selectAll = () => {
+    setMenu(null)
+    const el = areaRef.current
+    if (!el) return
+    el.focus()
+    el.select()
+    setCaret(el.selectionStart)
+  }
+
+  /** Porta unica de saida: backdrop, Esc, X e "Sair" passam todos por aqui. */
+  const requestClose = () => {
+    if (dirty && !asking) {
+      setMenu(null)
+      setAsking(true)
+      return
+    }
+    onClose()
+  }
+
+  const { line, col } = lineCol(text, Math.min(caret, text.length))
+
+  return (
+    <Modal title={`${title} - Bloco de Notas`} onClose={requestClose} width={460}>
+      {/* Fechar o menu ao clicar em qualquer lugar da janela imita o comportamento
+          modal das barras de menu do Win95, sem listener global no document. */}
+      <div
+        className="np-root"
+        onClick={() => setMenu(null)}
+        onKeyDown={(e) => {
+          if (e.key === 'F5') {
+            e.preventDefault()
+            insertStamp()
+          }
+        }}
+      >
+        {asking ? (
+          <div className="np-ask">
+            <div className="np-ask-body">
+              <WarningIcon size={32} />
+              <p>As alteracoes nao foram salvas. Deseja salva-las?</p>
+            </div>
+            <div className="dialog-buttons">
+              <button
+                autoFocus
+                onClick={() => {
+                  onSave(text)
+                  onClose()
+                }}
+              >
+                Sim
+              </button>
+              <button onClick={onClose}>Nao</button>
+              <button onClick={() => setAsking(false)}>Cancelar</button>
+            </div>
+          </div>
+        ) : (
+          <>
+            <div className="np-menubar" onClick={(e) => e.stopPropagation()}>
+              <MenuButton
+                label="Arquivo"
+                open={menu === 'arquivo'}
+                onToggle={() => setMenu(menu === 'arquivo' ? null : 'arquivo')}
+                onHover={() => menu !== null && setMenu('arquivo')}
+              >
+                <MenuItem label="Salvar" hint="Ctrl+S" onSelect={doSave} disabled={!dirty} />
+                <div className="np-sep" />
+                <MenuItem label="Sair" onSelect={requestClose} />
+              </MenuButton>
+
+              <MenuButton
+                label="Editar"
+                open={menu === 'editar'}
+                onToggle={() => setMenu(menu === 'editar' ? null : 'editar')}
+                onHover={() => menu !== null && setMenu('editar')}
+              >
+                <MenuItem label="Selecionar tudo" hint="Ctrl+T" onSelect={selectAll} />
+                <MenuItem label="Data/hora" hint="F5" onSelect={insertStamp} />
+              </MenuButton>
+
+              <MenuButton
+                label="Formatar"
+                open={menu === 'formatar'}
+                onToggle={() => setMenu(menu === 'formatar' ? null : 'formatar')}
+                onHover={() => menu !== null && setMenu('formatar')}
+              >
+                <MenuItem
+                  label="Quebra de linha automatica"
+                  checked={wrap}
+                  onSelect={() => {
+                    setWrap(!wrap)
+                    setMenu(null)
+                  }}
+                />
+              </MenuButton>
+            </div>
+
+            <textarea
+              ref={areaRef}
+              className="np-area"
+              value={text}
+              // `wrap="off"` e o que gera a barra horizontal; a classe cuida do
+              // white-space, porque so o atributo nao basta em todos os browsers.
+              wrap={wrap ? 'soft' : 'off'}
+              spellCheck={false}
+              autoFocus
+              onChange={(e) => {
+                setText(e.target.value)
+                setCaret(e.target.selectionStart)
+              }}
+              onSelect={syncCaret}
+              onClick={syncCaret}
+              onKeyUp={syncCaret}
+              onKeyDown={(e) => {
+                // Ctrl+S e Ctrl+T sao os atalhos que a barra anuncia; sem isso o
+                // hint ao lado do item de menu seria mentira.
+                if (e.ctrlKey && e.key.toLowerCase() === 's') {
+                  e.preventDefault()
+                  doSave()
+                } else if (e.ctrlKey && e.key.toLowerCase() === 't') {
+                  e.preventDefault()
+                  selectAll()
+                }
+              }}
+            />
+
+            <div className="status-bar np-status">
+              <span className="status-bar-field">
+                Lin {line}, Col {col}
+              </span>
+              <span className="status-bar-field">{text.length} caracteres</span>
+              <span className="status-bar-field">{dirty ? 'Modificado' : 'Salvo'}</span>
+            </div>
+          </>
+        )}
+      </div>
+    </Modal>
+  )
+}
+
+type MenuButtonProps = {
+  label: string
+  open: boolean
+  onToggle: () => void
+  /** Passar o mouse so troca de menu se algum ja estiver aberto -- regra do Win95. */
+  onHover: () => void
+  children: React.ReactNode
+}
+
+function MenuButton({ label, open, onToggle, onHover, children }: MenuButtonProps) {
+  return (
+    <div className="np-menu">
+      <button
+        type="button"
+        className={open ? 'np-menu-title np-open' : 'np-menu-title'}
+        aria-expanded={open}
+        onClick={onToggle}
+        onMouseEnter={onHover}
+      >
+        {label}
+      </button>
+      {open && <div className="np-dropdown">{children}</div>}
+    </div>
+  )
+}
+
+type MenuItemProps = {
+  label: string
+  hint?: string
+  checked?: boolean
+  disabled?: boolean
+  onSelect: () => void
+}
+
+function MenuItem({ label, hint, checked, disabled, onSelect }: MenuItemProps) {
+  return (
+    <button type="button" className="np-item" disabled={disabled} onClick={onSelect}>
+      {/* Coluna fixa da marca de selecao: sem ela os rotulos dancam ao ligar/desligar. */}
+      <span className="np-check">{checked ? '✓' : ''}</span>
+      <span className="np-label">{label}</span>
+      <span className="np-hint">{hint ?? ''}</span>
+    </button>
+  )
+}
diff --git a/frontend/src/SystemProperties.tsx b/frontend/src/SystemProperties.tsx
new file mode 100644
index 0000000..e6a4d82
--- /dev/null
+++ b/frontend/src/SystemProperties.tsx
@@ -0,0 +1,169 @@
+import { useState } from 'react'
+import { Modal } from './Modal'
+import { ComputerIcon } from './icons'
+import './systemproperties.css'
+
+/**
+ * Numeros que a janela mostra. `boardTitle` e opcional de proposito: o "Registrado
+ * para" do Win95 exibe o nome do dono, que aqui e o titulo do board -- mas quem so
+ * tiver as contagens em maos ainda consegue montar o objeto.
+ */
+export type SystemStats = {
+  lists: number
+  cards: number
+  trashed: number
+  apiUrl: string
+  connected: boolean
+  boardTitle?: string
+}
+
+type Props = {
+  stats: SystemStats
+  onClose: () => void
+}
+
+type Tab = 'geral' | 'desempenho'
+
+/** Limites ficticios: o Win95 tambem media recursos contra um teto arbitrario. */
+const LIMITS = { cards: 100, lists: 20, trashed: 50 } as const
+
+const clampPct = (used: number, total: number) =>
+  Math.max(0, Math.min(100, Math.round((used / total) * 100)))
+
+export function SystemProperties({ stats, onClose }: Props) {
+  const [tab, setTab] = useState<Tab>('geral')
+
+  const cardsPct = clampPct(stats.cards, LIMITS.cards)
+  const listsPct = clampPct(stats.lists, LIMITS.lists)
+  const trashPct = clampPct(stats.trashed, LIMITS.trashed)
+  /** "Recursos do sistema: N% livres" -- a media do que as tres barras consomem. */
+  const freePct = 100 - Math.round((cardsPct + listsPct + trashPct) / 3)
+
+  return (
+    <Modal title="Propriedades do Sistema" onClose={onClose} width={400}>
+      <div className="sp-root">
+        {/* Estrutura de abas do 98.css: menu[role=tablist] + .window[role=tabpanel].
+            A margem negativa do menu e o que "cola" a aba ativa no painel. */}
+        <menu role="tablist" className="sp-tabs">
+          <li role="tab" aria-selected={tab === 'geral'}>
+            <a
+              href="#sp-geral"
+              onClick={(e) => {
+                e.preventDefault()
+                setTab('geral')
+              }}
+            >
+              Geral
+            </a>
+          </li>
+          <li role="tab" aria-selected={tab === 'desempenho'}>
+            <a
+              href="#sp-desempenho"
+              onClick={(e) => {
+                e.preventDefault()
+                setTab('desempenho')
+              }}
+            >
+              Desempenho
+            </a>
+          </li>
+        </menu>
+
+        <div className="window sp-panel" role="tabpanel">
+          <div className="window-body">
+            {tab === 'geral' ? <GeneralTab stats={stats} /> : null}
+            {tab === 'desempenho' ? (
+              <PerformanceTab
+                freePct={freePct}
+                bars={[
+                  { label: 'Cards', used: stats.cards, total: LIMITS.cards, pct: cardsPct },
+                  { label: 'Listas', used: stats.lists, total: LIMITS.lists, pct: listsPct },
+                  { label: 'Lixeira', used: stats.trashed, total: LIMITS.trashed, pct: trashPct },
+                ]}
+              />
+            ) : null}
+          </div>
+        </div>
+
+        {/* OK e Cancelar fecham; Aplicar fica cinza porque nao ha nada editavel --
+            e exatamente como o Win95 se comportava antes de qualquer mudanca. */}
+        <div className="dialog-buttons">
+          <button className="default" onClick={onClose}>
+            OK
+          </button>
+          <button onClick={onClose}>Cancelar</button>
+          <button disabled>Aplicar</button>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+function GeneralTab({ stats }: { stats: SystemStats }) {
+  return (
+    <div className="sp-general">
+      <ComputerIcon size={48} />
+      <div className="sp-general-text">
+        <p className="sp-heading">Sistema:</p>
+        <p>TeamApp 95</p>
+        <p>Versao 4.00.950 B</p>
+        <p className="sp-heading">Registrado para:</p>
+        <p>{stats.boardTitle ?? 'Quadro sem titulo'}</p>
+        <p>TeamApp Inc.</p>
+        <p className="sp-heading">Computador:</p>
+        <p>Servidor de API</p>
+        <p className="sp-mono">{stats.apiUrl}</p>
+        <p>
+          WebSocket: {stats.connected ? 'conectado' : 'desconectado'}
+          {/* O quadradinho de cor e o unico sinal nao textual: verde/vermelho, VGA. */}
+          <span className={stats.connected ? 'sp-led sp-led-on' : 'sp-led sp-led-off'} />
+        </p>
+      </div>
+    </div>
+  )
+}
+
+type Bar = { label: string; used: number; total: number; pct: number }
+
+function PerformanceTab({ freePct, bars }: { freePct: number; bars: Bar[] }) {
+  return (
+    <div className="sp-perf">
+      <p>
+        Recursos do sistema: <strong>{freePct}% livres</strong>
+      </p>
+      <p>Sistema de arquivos: SQLite de 32 bits</p>
+      <p>Memoria virtual: gerenciada pelo Prisma</p>
+
+      <fieldset>
+        <legend>Uso de recursos</legend>
+        {bars.map((bar) => (
+          <div className="sp-bar-row" key={bar.label}>
+            <div className="sp-bar-label">
+              <span>{bar.label}</span>
+              <span>
+                {bar.used} de {bar.total}
+              </span>
+            </div>
+            {/* `segmented` e a variante do 98.css que desenha a barra em blocos --
+                a barra do Win95 nunca foi continua, e esse detalhe entrega tudo.
+                A largura inline vence o `width:100%` da folha de estilo. */}
+            <div
+              className="progress-indicator segmented sp-bar"
+              role="progressbar"
+              aria-label={bar.label}
+              aria-valuenow={bar.pct}
+              aria-valuemin={0}
+              aria-valuemax={100}
+            >
+              <span className="progress-indicator-bar" style={{ width: `${bar.pct}%` }} />
+            </div>
+          </div>
+        ))}
+      </fieldset>
+
+      <p className="sp-note">
+        O estado de desempenho do sistema esta {freePct >= 50 ? 'otimo' : 'sob carga'}.
+      </p>
+    </div>
+  )
+}
diff --git a/frontend/src/draggablewindow.css b/frontend/src/draggablewindow.css
new file mode 100644
index 0000000..9a7673b
--- /dev/null
+++ b/frontend/src/draggablewindow.css
@@ -0,0 +1,43 @@
+/* Layout apenas. Borda, relevo, gradiente da title-bar e icones dos botoes
+   vem do 98.css -- nao reescreva nada disso aqui. */
+
+.draggable-window {
+  position: fixed;
+  /* box-sizing para que `width` da prop seja a largura final, incluindo os
+     3px de padding que o `.window` do 98.css aplica. */
+  box-sizing: border-box;
+  max-width: 100vw;
+  display: flex;
+  flex-direction: column;
+}
+
+.draggable-window .title-bar {
+  /* `touch-action: none` e obrigatorio para pointer events: sem isso o
+     navegador interpreta o arrasto no touch como scroll da pagina e cancela
+     o pointer (dispara pointercancel no meio do movimento). */
+  touch-action: none;
+  cursor: default;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.draggable-window .title-bar-text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.draggable-window-body {
+  /* A janela nunca deve crescer alem da viewport; o conteudo e que rola. */
+  overflow: auto;
+  max-height: calc(100vh - 120px);
+  flex: 1 1 auto;
+}
+
+.draggable-window.is-maximized {
+  max-width: none;
+}
+
+.draggable-window.is-maximized .draggable-window-body {
+  max-height: none;
+}
diff --git a/frontend/src/notepad.css b/frontend/src/notepad.css
new file mode 100644
index 0000000..2f1ebf8
--- /dev/null
+++ b/frontend/src/notepad.css
@@ -0,0 +1,163 @@
+/* O 98.css nao tem barra de menu nem menu suspenso -- so janela, botao e campo.
+   Entao aqui o CSS proprio e legitimo. Tudo com prefixo .np- para nao vazar no
+   styles.css compartilhado. */
+
+.np-root {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+/* --- barra de menu --- */
+
+.np-menubar {
+  display: flex;
+  gap: 0;
+  /* A barra de menu do Win95 fica rente ao topo do corpo da janela, sem relevo. */
+  margin: -4px 0 2px -4px;
+}
+
+.np-menu {
+  position: relative;
+}
+
+/* O botao do 98.css vem com bevel, min-width 75px e a gambiarra do
+   `color: transparent` + text-shadow. Um titulo de menu precisa ser plano, e
+   ao anular a cor e preciso anular o text-shadow tambem, senao o texto some. */
+.np-menu-title {
+  min-width: 0;
+  min-height: 0;
+  padding: 3px 8px;
+  background: transparent;
+  box-shadow: none;
+  color: #222;
+  text-shadow: none;
+}
+
+.np-menu-title:focus {
+  outline: none;
+}
+
+.np-menu-title:hover,
+.np-menu-title.np-open {
+  background: #000080;
+  color: #fff;
+}
+
+.np-menu-title:not(:disabled):active {
+  box-shadow: none;
+  text-shadow: none;
+}
+
+/* --- menu suspenso --- */
+
+.np-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 20;
+  min-width: 210px;
+  padding: 2px;
+  background: #c0c0c0;
+  /* Mesmo relevo de janela levantada que o 98.css aplica em .window. */
+  box-shadow:
+    inset -1px -1px #0a0a0a,
+    inset 1px 1px #dfdfdf,
+    inset -2px -2px #808080,
+    inset 2px 2px #fff;
+}
+
+.np-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  padding: 3px 6px;
+  background: transparent;
+  box-shadow: none;
+  color: #222;
+  text-shadow: none;
+  text-align: left;
+}
+
+.np-item:focus {
+  outline: none;
+}
+
+.np-item:not(:disabled):hover {
+  background: #000080;
+  color: #fff;
+}
+
+.np-item:not(:disabled):active {
+  box-shadow: none;
+  text-shadow: none;
+}
+
+.np-item:disabled {
+  color: #808080;
+  text-shadow: 1px 1px 0 #fff;
+}
+
+.np-check {
+  width: 14px;
+  flex: 0 0 14px;
+}
+
+.np-label {
+  flex: 1 1 auto;
+}
+
+/* O atalho fica encostado a direita, cinza, como nos menus originais. */
+.np-hint {
+  margin-left: 18px;
+  opacity: 0.75;
+}
+
+.np-sep {
+  height: 2px;
+  margin: 3px 2px;
+  border-top: 1px solid #808080;
+  border-bottom: 1px solid #fff;
+}
+
+/* --- area de edicao --- */
+
+.np-area {
+  height: 320px;
+  /* O afundado ja vem do 98.css; qualquer borda aqui duplicaria o relevo. */
+  border: none;
+  resize: none;
+  font-family: "Courier New", Courier, monospace;
+  font-size: 12px;
+  line-height: 1.35;
+}
+
+/* Sem quebra automatica o texto precisa rolar na horizontal; so o atributo
+   wrap="off" nao garante isso em todos os motores. */
+.np-area[wrap="off"] {
+  white-space: pre;
+  overflow-x: auto;
+}
+
+.np-status {
+  margin-top: 4px;
+}
+
+/* --- segundo estado: aviso de alteracoes nao salvas --- */
+
+.np-ask {
+  padding: 8px 4px;
+}
+
+.np-ask-body {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 56px;
+}
+
+.np-ask-body p {
+  margin: 0;
+}
diff --git a/frontend/src/systemproperties.css b/frontend/src/systemproperties.css
new file mode 100644
index 0000000..c7e38aa
--- /dev/null
+++ b/frontend/src/systemproperties.css
@@ -0,0 +1,97 @@
+/* As abas e a barra de progresso segmentada vem do 98.css (menu[role=tablist],
+   .window[role=tabpanel], .progress-indicator.segmented). O que sobra aqui e
+   layout e ajuste de altura. Prefixo .sp- para nao vazar no styles.css. */
+
+.sp-root {
+  display: flex;
+  flex-direction: column;
+}
+
+/* O 98.css ja da o `margin-bottom: -2px` que cola a aba ativa no painel; aqui so
+   removemos a marca de lista, que o reset do navegador ainda pode desenhar. */
+.sp-tabs {
+  list-style: none;
+}
+
+.sp-panel {
+  /* Altura fixa nas duas abas: sem isso a janela pula de tamanho ao trocar de
+     aba, algo que uma folha de propriedades do Win95 nunca faz. */
+  min-height: 240px;
+}
+
+/* --- aba Geral --- */
+
+.sp-general {
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+}
+
+.sp-general-text p {
+  margin: 0;
+  line-height: 1.5;
+}
+
+/* Rotulo de secao: negrito e um respiro em cima, como nas folhas originais. */
+.sp-heading {
+  font-weight: bold;
+  margin-top: 8px !important;
+}
+
+.sp-general-text .sp-heading:first-child {
+  margin-top: 0 !important;
+}
+
+.sp-mono {
+  font-family: "Courier New", Courier, monospace;
+}
+
+.sp-led {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin-left: 6px;
+  vertical-align: middle;
+  box-shadow:
+    inset -1px -1px #fff,
+    inset 1px 1px #808080;
+}
+
+.sp-led-on {
+  background: #00ff00;
+}
+
+.sp-led-off {
+  background: #ff0000;
+}
+
+/* --- aba Desempenho --- */
+
+.sp-perf p {
+  margin: 0 0 6px;
+}
+
+.sp-perf fieldset {
+  margin-top: 10px;
+}
+
+.sp-bar-row + .sp-bar-row {
+  margin-top: 10px;
+}
+
+.sp-bar-label {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 3px;
+}
+
+/* A .progress-indicator do 98.css tem 32px, alta demais para tres barras
+   empilhadas dentro de um fieldset. */
+.sp-bar {
+  height: 20px;
+  width: 100%;
+}
+
+.sp-note {
+  margin-top: 10px !important;
+}
diff --git a/frontend/src/useSounds.ts b/frontend/src/useSounds.ts
new file mode 100644
index 0000000..efbb1e5
--- /dev/null
+++ b/frontend/src/useSounds.ts
@@ -0,0 +1,249 @@
+import { useCallback, useSyncExternalStore } from 'react'
+
+export type SoundName = 'ding' | 'chord' | 'error' | 'startup' | 'recycle'
+
+const STORAGE_KEY = 'teamapp95.sounds'
+
+/* ------------------------------------------------------------------ *
+ * Preferencia (liga/desliga)
+ * ------------------------------------------------------------------ */
+
+/**
+ * O estado vive fora do React porque varios componentes podem chamar
+ * `useSounds()` -- o botao da taskbar, o board, um dialogo. Se cada um tivesse
+ * o seu proprio `useState`, desligar o som num lugar deixaria os outros ainda
+ * tocando. Uma store minima + `useSyncExternalStore` mantem todos em sincronia.
+ */
+let enabledState = readStored()
+const listeners = new Set<() => void>()
+
+/** localStorage e inacessivel em modo privado/iframe restrito: nunca deixe estourar. */
+function readStored(): boolean {
+  try {
+    // Comeca DESLIGADO: som automatico que o usuario nao pediu e hostil.
+    return window.localStorage.getItem(STORAGE_KEY) === 'on'
+  } catch {
+    return false
+  }
+}
+
+function writeStored(value: boolean): void {
+  try {
+    window.localStorage.setItem(STORAGE_KEY, value ? 'on' : 'off')
+  } catch {
+    // Sem persistencia a preferencia vale so para esta aba. Aceitavel.
+  }
+}
+
+function setEnabled(value: boolean): void {
+  if (enabledState === value) return
+  enabledState = value
+  writeStored(value)
+  for (const l of listeners) l()
+}
+
+function subscribe(listener: () => void): () => void {
+  listeners.add(listener)
+  return () => {
+    listeners.delete(listener)
+  }
+}
+
+function getSnapshot(): boolean {
+  return enabledState
+}
+
+/* ------------------------------------------------------------------ *
+ * AudioContext preguicoso
+ * ------------------------------------------------------------------ */
+
+interface WebkitWindow {
+  webkitAudioContext?: typeof AudioContext
+}
+
+let ctx: AudioContext | null = null
+
+/**
+ * Por que preguicoso: navegadores modernos exigem um "gesto do usuario" antes
+ * de deixar audio soar. Um `new AudioContext()` criado na importacao do modulo
+ * nasce `suspended` e, pior, alguns navegadores logam aviso e o contexto fica
+ * inutil ate um `resume()` dentro de um handler de evento. Criando no primeiro
+ * `play()` -- que so acontece a partir de um clique/tecla -- o contexto ja nasce
+ * autorizado. E se ainda vier `suspended`, `resume()` roda no mesmo tick do
+ * gesto, que e a unica janela em que o navegador aceita.
+ *
+ * Tambem ha um limite pratico de contextos por aba (~6 no Chrome), entao o
+ * contexto e um singleton de modulo, nao um por componente.
+ */
+function getContext(): AudioContext | null {
+  try {
+    if (ctx === null) {
+      const Ctor =
+        typeof AudioContext !== 'undefined'
+          ? AudioContext
+          : (window as unknown as WebkitWindow).webkitAudioContext
+      if (!Ctor) return null
+      ctx = new Ctor()
+    }
+    if (ctx.state === 'suspended') {
+      // `resume()` devolve promise; um reject aqui nao pode virar unhandled.
+      void ctx.resume().catch(() => undefined)
+    }
+    return ctx
+  } catch {
+    return null
+  }
+}
+
+/* ------------------------------------------------------------------ *
+ * Sintese
+ * ------------------------------------------------------------------ */
+
+interface ToneOptions {
+  freq: number
+  /** Offset em segundos a partir de "agora". */
+  at: number
+  dur: number
+  peak?: number
+  type?: OscillatorType
+  /** Ataque em segundos -- 0.001 e percussivo, 0.05 e macio. */
+  attack?: number
+}
+
+/**
+ * Uma nota = oscilador + envelope de ganho. O envelope importa: sem ele o corte
+ * abrupto da onda vira um "click" audivel (descontinuidade no sinal).
+ */
+function tone(audio: AudioContext, o: ToneOptions): void {
+  const t0 = audio.currentTime + o.at
+  const peak = o.peak ?? 0.18
+  const attack = o.attack ?? 0.005
+
+  const osc = audio.createOscillator()
+  osc.type = o.type ?? 'sine'
+  osc.frequency.setValueAtTime(o.freq, t0)
+
+  const gain = audio.createGain()
+  gain.gain.setValueAtTime(0.0001, t0)
+  gain.gain.exponentialRampToValueAtTime(peak, t0 + attack)
+  // Decaimento exponencial ate quase-zero: `exponentialRamp` nao aceita 0.
+  gain.gain.exponentialRampToValueAtTime(0.0001, t0 + o.dur)
+
+  osc.connect(gain).connect(audio.destination)
+  osc.start(t0)
+  osc.stop(t0 + o.dur + 0.02)
+}
+
+/** Ruido branco curto e filtrado -- o "papel amassando" da lixeira. */
+function noise(audio: AudioContext, dur: number): void {
+  const t0 = audio.currentTime
+  const frames = Math.floor(audio.sampleRate * dur)
+  const buffer = audio.createBuffer(1, frames, audio.sampleRate)
+  const data = buffer.getChannelData(0)
+  for (let i = 0; i < frames; i++) {
+    // Decai ao longo do buffer para o ruido nao terminar num corte seco.
+    data[i] = (Math.random() * 2 - 1) * (1 - i / frames)
+  }
+
+  const src = audio.createBufferSource()
+  src.buffer = buffer
+
+  // Passa-alta tira o "shhh" grave e deixa o chiado seco de papel.
+  const filter = audio.createBiquadFilter()
+  filter.type = 'highpass'
+  filter.frequency.setValueAtTime(1400, t0)
+  filter.Q.setValueAtTime(0.7, t0)
+
+  const gain = audio.createGain()
+  gain.gain.setValueAtTime(0.22, t0)
+  gain.gain.exponentialRampToValueAtTime(0.0001, t0 + dur)
+
+  src.connect(filter).connect(gain).connect(audio.destination)
+  src.start(t0)
+  src.stop(t0 + dur + 0.02)
+}
+
+function render(audio: AudioContext, name: SoundName): void {
+  switch (name) {
+    case 'ding':
+      // Senoide curta em ~880Hz (A5) com decaimento rapido.
+      tone(audio, { freq: 880, at: 0, dur: 0.18, peak: 0.2 })
+      break
+
+    case 'chord':
+      // Arpejo ascendente (A4 - C#5 - E5): o "tada" de janela abrindo.
+      tone(audio, { freq: 440, at: 0, dur: 0.3, type: 'triangle' })
+      tone(audio, { freq: 554.37, at: 0.07, dur: 0.3, type: 'triangle' })
+      tone(audio, { freq: 659.25, at: 0.14, dur: 0.4, type: 'triangle' })
+      break
+
+    case 'error':
+      // Duas notas graves descendentes -- o gesto sonoro universal de "nao".
+      tone(audio, { freq: 233.08, at: 0, dur: 0.22, type: 'square', peak: 0.1 })
+      tone(audio, { freq: 174.61, at: 0.16, dur: 0.34, type: 'square', peak: 0.1 })
+      break
+
+    case 'startup':
+      // 4 notas longas e sobrepostas, ataque macio: evoca o startup do Win95
+      // sem reproduzir a melodia original (que e obra protegida).
+      tone(audio, { freq: 293.66, at: 0, dur: 1.1, type: 'sine', peak: 0.14, attack: 0.08 })
+      tone(audio, { freq: 440, at: 0.28, dur: 1.1, type: 'sine', peak: 0.13, attack: 0.08 })
+      tone(audio, { freq: 587.33, at: 0.56, dur: 1.2, type: 'sine', peak: 0.12, attack: 0.08 })
+      tone(audio, { freq: 880, at: 0.84, dur: 1.4, type: 'sine', peak: 0.1, attack: 0.1 })
+      break
+
+    case 'recycle':
+      noise(audio, 0.32)
+      break
+  }
+}
+
+/* ------------------------------------------------------------------ *
+ * Hook
+ * ------------------------------------------------------------------ */
+
+export interface Sounds {
+  play: (name: SoundName) => void
+  enabled: boolean
+  toggle: () => void
+}
+
+/**
+ * Sons do Windows 95 sintetizados na hora -- sem nenhum .wav no repositorio.
+ * Binario em repo e peso morto e o container builda offline; a Web Audio API
+ * ja tem tudo que esses cinco efeitos precisam.
+ *
+ * Regra de ouro: audio e enfeite. Nenhuma falha aqui pode derrubar a UI, por
+ * isso todo caminho de execucao esta dentro de try/catch.
+ */
+export function useSounds(): Sounds {
+  const enabled = useSyncExternalStore(subscribe, getSnapshot, getSnapshot)
+
+  const play = useCallback((name: SoundName) => {
+    try {
+      if (!enabledState) return
+      const audio = getContext()
+      if (!audio) return
+      render(audio, name)
+    } catch {
+      // Contexto morto, aba sem saida de audio, politica de autoplay: ignore.
+    }
+  }, [])
+
+  const toggle = useCallback(() => {
+    const next = !enabledState
+    setEnabled(next)
+    // Ligar o som e um clique -- gesto valido para destravar o contexto. Toca
+    // um feedback imediato para o usuario ouvir que funcionou.
+    if (next) {
+      try {
+        const audio = getContext()
+        if (audio) render(audio, 'ding')
+      } catch {
+        // idem
+      }
+    }
+  }, [])
+
+  return { play, enabled, toggle }
+}
diff --git a/frontend/src/useWindowManager.ts b/frontend/src/useWindowManager.ts
new file mode 100644
index 0000000..3c1288c
--- /dev/null
+++ b/frontend/src/useWindowManager.ts
@@ -0,0 +1,116 @@
+import { useCallback, useMemo, useState } from 'react'
+
+export interface ManagedWindow {
+  id: string
+  title: string
+  minimized: boolean
+  z: number
+}
+
+export interface WindowManager {
+  /** Ordenado por ordem de abertura -- e essa a ordem dos botoes da taskbar. */
+  windows: ManagedWindow[]
+  open: (id: string, title: string) => void
+  close: (id: string) => void
+  focus: (id: string) => void
+  minimize: (id: string) => void
+  isOpen: (id: string) => boolean
+  /** Id da janela visivel no topo, ou `null` se nao ha nenhuma. */
+  topmost: string | null
+}
+
+interface State {
+  items: ManagedWindow[]
+  /** Proximo z a distribuir. Vive no estado, nao num ref: ver nota abaixo. */
+  nextZ: number
+}
+
+const BASE_Z = 10
+
+const INITIAL: State = { items: [], nextZ: BASE_Z }
+
+/**
+ * Gerencia janelas ao estilo Win95: quais estao abertas, qual tem o foco e a
+ * ordem estavel que a taskbar usa.
+ *
+ * Duas ordens diferentes convivem aqui e confundi-las e o bug classico:
+ *
+ * - **Ordem do array** = ordem de abertura. E o que a taskbar mostra, e ela
+ *   nao pode se reorganizar quando o usuario clica numa janela -- botoes que
+ *   pulam de lugar ao serem clicados sao impossiveis de acertar com o mouse.
+ * - **`z`** = ordem de empilhamento. Muda a cada foco.
+ *
+ * O contador `nextZ` fica no estado (nao num `useRef`) porque toda atualizacao
+ * acontece dentro de um updater funcional, e updaters precisam ser puros: o
+ * StrictMode do React 18 os invoca duas vezes em dev, e um `ref.current++` ali
+ * dentro contaria dobrado.
+ */
+export function useWindowManager(): WindowManager {
+  const [state, setState] = useState<State>(INITIAL)
+
+  const open = useCallback((id: string, title: string) => {
+    setState((s) => {
+      const existing = s.items.find((w) => w.id === id)
+      // Reabrir uma janela ja aberta = trazer para frente e desminimizar.
+      // E o que o Win95 faz e evita duplicar entradas na taskbar.
+      if (existing) {
+        return {
+          items: s.items.map((w) =>
+            w.id === id ? { ...w, title, minimized: false, z: s.nextZ } : w,
+          ),
+          nextZ: s.nextZ + 1,
+        }
+      }
+      return {
+        items: [...s.items, { id, title, minimized: false, z: s.nextZ }],
+        nextZ: s.nextZ + 1,
+      }
+    })
+  }, [])
+
+  const close = useCallback((id: string) => {
+    setState((s) => {
+      if (!s.items.some((w) => w.id === id)) return s
+      return { ...s, items: s.items.filter((w) => w.id !== id) }
+    })
+  }, [])
+
+  const focus = useCallback((id: string) => {
+    setState((s) => {
+      const target = s.items.find((w) => w.id === id)
+      if (!target) return s
+      // Ja esta no topo e visivel: nao gasta um z novo nem re-renderiza.
+      if (!target.minimized && target.z === s.nextZ - 1) return s
+      return {
+        items: s.items.map((w) => (w.id === id ? { ...w, minimized: false, z: s.nextZ } : w)),
+        nextZ: s.nextZ + 1,
+      }
+    })
+  }, [])
+
+  const minimize = useCallback((id: string) => {
+    setState((s) => {
+      const target = s.items.find((w) => w.id === id)
+      if (!target || target.minimized) return s
+      // Minimizar esconde mas NAO remove: a janela precisa continuar na lista
+      // para a taskbar poder mostrar o botao que a restaura.
+      return { ...s, items: s.items.map((w) => (w.id === id ? { ...w, minimized: true } : w)) }
+    })
+  }, [])
+
+  const isOpen = useCallback(
+    (id: string) => state.items.some((w) => w.id === id),
+    [state.items],
+  )
+
+  const topmost = useMemo(() => {
+    let best: ManagedWindow | null = null
+    for (const w of state.items) {
+      if (w.minimized) continue
+      if (best === null || w.z > best.z) best = w
+    }
+    return best === null ? null : best.id
+  }, [state.items])
+
+  return { windows: state.items, open, close, focus, minimize, isOpen, topmost }
+}

From 3c1122125e1bbbdcee481a6287a165ea04ebe4d3 Mon Sep 17 00:00:00 2001
From: Renan Locatiz Fernandes <renan.fernandes@outlook.com>
Date: Fri, 21 Aug 2026 02:04:19 -0300
Subject: [PATCH 14/19] fix(backend): race de position no POST tornava o drag
 inoperante

`POST /api/cards` e `POST /api/lists` liam a maior position e so depois
inseriam `last.position + 1`. Duas criacoes simultaneas leem a mesma "ultima" e
nascem empatadas: 15 requisicoes em paralelo produziam 5 positions distintas.

O empate nao e cosmetico. A partir de dois cards na mesma position,
positionFor() calcula (a + b) / 2 === a para o slot entre eles -- o servidor
responde 200, grava o que recebeu, e o card NAO SAI DO LUGAR. O desempate por id
no orderBy mantem a ordem estavel, entao nada parece quebrado; o drag
simplesmente para de funcionar.

Transacao do Prisma nao resolveria sozinha: no SQLite o BEGIN e deferido, o
SELECT nao pega lock de escrita, e as duas leem antes de qualquer uma escrever.
`serialize.ts` enfileira por lista/board. E um mutex em memoria, valido para um
processo -- que e o modelo aqui; com mais instancias a correcao passa a ser
INSERT ... SELECT MAX(position)+1 numa declaracao so.

Achado pelo ws-stress.mjs, que sobe 10 clientes WebSocket e dispara mutacoes em
rajada. Ele tambem prova o que o CLAUDE.md exige e ninguem testava: os 10
clientes recebem eventos identicos, o replay do log e idempotente, e o estado
derivado so dos eventos bate com um GET /api/board fresco.

Antes: 5/15 distintas. Depois: 20/20 e 10/10. Agora roda no CI.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .github/workflows/ci.yml      |   5 +
 backend/scripts/ws-stress.mjs | 577 ++++++++++++++++++++++++++++++++++
 backend/src/routes/cards.ts   |  44 ++-
 backend/src/routes/lists.ts   |  39 ++-
 backend/src/serialize.ts      |  50 +++
 5 files changed, 688 insertions(+), 27 deletions(-)
 create mode 100644 backend/scripts/ws-stress.mjs
 create mode 100644 backend/src/serialize.ts

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 013c1a5..1512196 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -105,6 +105,11 @@ jobs:
       - name: Smoke test do contrato
         run: node backend/scripts/smoke.mjs http://localhost:3001
 
+      # Concorrencia: 10 clientes WS, mutacoes em rajada. Pegou um race real de
+      # read-modify-write no POST que o smoke sequencial nunca acionaria.
+      - name: Teste de concorrencia do WebSocket
+        run: node backend/scripts/ws-stress.mjs http://localhost:3001
+
       - name: Frontend responde na 8090
         run: curl -fsS -o /dev/null http://localhost:8090
 
diff --git a/backend/scripts/ws-stress.mjs b/backend/scripts/ws-stress.mjs
new file mode 100644
index 0000000..c086472
--- /dev/null
+++ b/backend/scripts/ws-stress.mjs
@@ -0,0 +1,577 @@
+/**
+ * Teste de carga do WebSocket: prova sob concorrencia as invariantes que o
+ * CLAUDE.md declara e que o smoke.mjs so verifica com um cliente e uma mutacao
+ * de cada vez.
+ *
+ * Uso: node scripts/ws-stress.mjs [baseUrl]   (default http://localhost:3001)
+ * Sai com codigo 1 se qualquer assercao falhar.
+ *
+ * O que ele prova:
+ *
+ *  1. BROADCAST NAO FILTRA AUTOR -- 10 clientes abertos ao mesmo tempo recebem
+ *     exatamente a mesma sequencia de eventos, na mesma ordem. Se o servidor
+ *     algum dia tentar "otimizar" pulando quem originou a mutacao, ou se um
+ *     socket lento perder mensagens, os logs divergem e o teste quebra.
+ *
+ *  2. IDEMPOTENCIA POR id -- o reducer daqui e um espelho de
+ *     frontend/src/useBoard.ts. Aplicar cada evento duas vezes seguidas tem que
+ *     dar o mesmo estado que aplicar uma vez (e o caso real: quem faz a mutacao
+ *     ve a resposta HTTP E o eco do broadcast). E aplicar o log inteiro duas
+ *     vezes tem que convergir para o mesmo estado.
+ *
+ *  3. CONVERGENCIA -- o estado derivado so dos eventos, partindo de um
+ *     GET /api/board tirado ANTES da primeira mutacao, tem que bater com um
+ *     GET /api/board fresco tirado DEPOIS da ultima. Esta e a assercao que vale
+ *     o script: se ela falha, ou o servidor esqueceu de emitir um evento, ou
+ *     emitiu um payload que nao descreve o que ele gravou. Nos dois casos o
+ *     board do browser fica errado ate o proximo reload.
+ *
+ * O script assume que ninguem mais esta mutando o board enquanto ele roda (uma
+ * aba aberta so olhando nao atrapalha -- o WebSocket e so servidor -> cliente).
+ */
+import WebSocket from 'ws'
+
+const BASE = process.argv[2] ?? 'http://localhost:3001'
+const WS_URL = BASE.replace(/^http/, 'ws') + '/ws'
+const CLIENTS = 10
+
+let failures = 0
+
+function check(name, ok, detail = '') {
+  if (ok) {
+    console.log(`  ok   ${name}`)
+  } else {
+    failures++
+    console.log(`  FAIL ${name}${detail ? ' -- ' + detail : ''}`)
+  }
+}
+
+function section(title) {
+  console.log(`\n${title}`)
+}
+
+async function api(method, path, body) {
+  const res = await fetch(BASE + path, {
+    method,
+    headers: body ? { 'content-type': 'application/json' } : {},
+    body: body ? JSON.stringify(body) : undefined,
+  })
+  const text = await res.text()
+  return { status: res.status, body: text ? JSON.parse(text) : null }
+}
+
+const waitFor = (ms) => new Promise((r) => setTimeout(r, ms))
+
+/** Igualdade estrutural com chaves ordenadas -- serve tambem para o diff. */
+function canon(value) {
+  if (Array.isArray(value)) return `[${value.map(canon).join(',')}]`
+  if (value && typeof value === 'object') {
+    return `{${Object.keys(value)
+      .sort()
+      .map((k) => `${JSON.stringify(k)}:${canon(value[k])}`)
+      .join(',')}}`
+  }
+  return JSON.stringify(value)
+}
+
+const same = (a, b) => canon(a) === canon(b)
+
+// ---------------------------------------------------------------------------
+// Reducer: espelho de frontend/src/useBoard.ts. Se as duas semanticas
+// divergirem, este teste passa e o browser quebra -- entao mantenha-os iguais.
+// ---------------------------------------------------------------------------
+
+const byPosition = (items) => [...items].sort((a, b) => a.position - b.position)
+
+function reduce(board, event) {
+  switch (event.type) {
+    case 'list.created':
+    case 'list.updated': {
+      const incoming = event.payload
+      const exists = board.lists.some((l) => l.id === incoming.id)
+      const lists = exists
+        ? board.lists.map((l) => {
+            if (l.id !== incoming.id) return l
+            const cards = 'cards' in incoming ? incoming.cards : l.cards
+            return { ...l, ...incoming, cards: byPosition(cards) }
+          })
+        : [...board.lists, { ...incoming, cards: byPosition(incoming.cards ?? []) }]
+      return { ...board, lists: byPosition(lists) }
+    }
+
+    case 'list.deleted':
+      return { ...board, lists: board.lists.filter((l) => l.id !== event.payload.id) }
+
+    case 'card.created':
+    case 'card.updated': {
+      const card = event.payload
+      if (!board.lists.some((l) => l.id === card.listId)) return { ...board, stale: true }
+      const lists = board.lists.map((list) => {
+        const without = list.cards.filter((c) => c.id !== card.id)
+        if (list.id !== card.listId) {
+          return without.length === list.cards.length ? list : { ...list, cards: without }
+        }
+        return { ...list, cards: byPosition([...without, card]) }
+      })
+      return { ...board, lists }
+    }
+
+    case 'card.moved': {
+      const { id, listId, position } = event.payload
+      const existing = board.lists.flatMap((l) => l.cards).find((c) => c.id === id)
+      if (!existing) return { ...board, stale: true }
+      const moved = { ...existing, listId, position }
+      const lists = board.lists.map((list) => {
+        const without = list.cards.filter((c) => c.id !== id)
+        if (list.id !== listId) {
+          return without.length === list.cards.length ? list : { ...list, cards: without }
+        }
+        return { ...list, cards: byPosition([...without, moved]) }
+      })
+      return { ...board, lists }
+    }
+
+    case 'trash.updated':
+      return { ...board, trash: event.payload }
+
+    case 'card.deleted': {
+      const { id } = event.payload
+      return {
+        ...board,
+        lists: board.lists.map((l) => {
+          const cards = l.cards.filter((c) => c.id !== id)
+          return cards.length === l.cards.length ? l : { ...l, cards }
+        }),
+      }
+    }
+
+    default:
+      return board
+  }
+}
+
+const replay = (base, log) => log.reduce(reduce, base)
+
+/** Aplica cada evento DUAS vezes seguidas -- o eco do broadcast em cima da resposta HTTP. */
+const replayDoubled = (base, log) =>
+  log.reduce((acc, e) => reduce(reduce(acc, e), e), base)
+
+/**
+ * Forma canonica de um board para comparacao.
+ *
+ * A ordenacao usa (position, id) porque e o que o servidor faz
+ * (`orderBy: [{position}, {id}]`, ver docs/API.md): com dois cards empatados na
+ * mesma position -- o que POSTs paralelos na mesma lista conseguem produzir --
+ * comparar so por position acusaria uma divergencia que nao existe. Os dois
+ * lados passam pela mesma normalizacao, entao uma divergencia de verdade
+ * (card na lista errada, position errada, titulo velho) continua aparecendo.
+ */
+function snapshot(board) {
+  const ord = (a, b) => a.position - b.position || (a.id < b.id ? -1 : a.id > b.id ? 1 : 0)
+  return {
+    trash: board.trash ?? null,
+    lists: [...board.lists].sort(ord).map((l) => ({
+      id: l.id,
+      title: l.title,
+      position: l.position,
+      cards: [...l.cards].sort(ord).map((c) => ({
+        id: c.id,
+        listId: c.listId,
+        title: c.title,
+        description: c.description,
+        position: c.position,
+      })),
+    })),
+  }
+}
+
+/** Primeira diferenca entre dois snapshots, em texto -- para a mensagem do FAIL. */
+function firstDiff(a, b, path = '$') {
+  if (canon(a) === canon(b)) return null
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return `${path}: ${a.length} vs ${b.length} itens`
+    for (let i = 0; i < a.length; i++) {
+      const d = firstDiff(a[i], b[i], `${path}[${i}]`)
+      if (d) return d
+    }
+  }
+  if (a && b && typeof a === 'object' && typeof b === 'object' && !Array.isArray(a)) {
+    for (const k of new Set([...Object.keys(a), ...Object.keys(b)])) {
+      const d = firstDiff(a[k], b[k], `${path}.${k}`)
+      if (d) return d
+    }
+  }
+  return `${path}: ${JSON.stringify(a)} vs ${JSON.stringify(b)}`
+}
+
+// ---------------------------------------------------------------------------
+
+function openClient(index) {
+  return new Promise((resolve, reject) => {
+    const socket = new WebSocket(WS_URL)
+    const client = { index, socket, events: [], raw: [] }
+    const timer = setTimeout(() => reject(new Error(`timeout no handshake do cliente ${index}`)), 5000)
+    socket.on('open', () => {
+      clearTimeout(timer)
+      resolve(client)
+    })
+    socket.on('error', (e) => {
+      clearTimeout(timer)
+      reject(e)
+    })
+    socket.on('message', (data) => {
+      const text = data.toString()
+      client.raw.push(text)
+      client.events.push(JSON.parse(text))
+    })
+  })
+}
+
+/** Espera o broadcast parar de chegar: `quietMs` sem nenhum evento novo. */
+async function settle(clients, quietMs = 600, maxMs = 15000) {
+  const total = () => clients.reduce((n, c) => n + c.events.length, 0)
+  const started = Date.now()
+  let last = total()
+  let lastChange = Date.now()
+  while (Date.now() - started < maxMs) {
+    await waitFor(100)
+    const now = total()
+    if (now !== last) {
+      last = now
+      lastChange = Date.now()
+    } else if (Date.now() - lastChange >= quietMs) {
+      return
+    }
+  }
+}
+
+async function main() {
+  console.log(`ws-stress contra ${BASE} com ${CLIENTS} clientes`)
+
+  const health = await api('GET', '/api/health')
+  if (health.status !== 200) {
+    console.error(`servidor nao respondeu /api/health (status ${health.status})`)
+    process.exit(1)
+  }
+
+  section('conexoes')
+  const clients = await Promise.all(Array.from({ length: CLIENTS }, (_, i) => openClient(i)))
+  check(
+    `${CLIENTS} clientes conectados simultaneamente`,
+    clients.every((c) => c.socket.readyState === 1),
+  )
+
+  // Baseline DEPOIS de conectar: assim nenhum evento cabe na janela entre o
+  // GET e o primeiro listener, e o log sozinho descreve toda a mudanca.
+  const baseRes = await api('GET', '/api/board')
+  check('GET /api/board (baseline) -> 200', baseRes.status === 200)
+  const baseline = {
+    ...baseRes.body,
+    lists: byPosition(baseRes.body.lists).map((l) => ({ ...l, cards: byPosition(l.cards) })),
+  }
+  const trashBefore = (await api('GET', '/api/trash')).body.counts
+
+  // -------------------------------------------------------------------------
+  // Rajada de mutacoes. As chamadas de cada lote saem em paralelo de proposito:
+  // e onde nascem os empates de position e as corridas de broadcast.
+  // -------------------------------------------------------------------------
+  section('rajada de mutacoes')
+  let mutations = 0
+  const failed = []
+
+  const fire = async (label, calls) => {
+    const results = await Promise.all(calls.map((c) => c()))
+    results.forEach((r, i) => {
+      mutations++
+      if (r.status >= 400) failed.push(`${label}#${i} -> ${r.status} ${JSON.stringify(r.body)}`)
+    })
+    return results
+  }
+
+  const listA = (await api('POST', '/api/lists', { title: 'ws-stress A' })).body
+  const listB = (await api('POST', '/api/lists', { title: 'ws-stress B' })).body
+  mutations += 2
+  if (!listA?.id || !listB?.id) {
+    console.error('nao consegui criar as listas de trabalho')
+    process.exit(1)
+  }
+
+  // 1) 8 cards em paralelo na mesma lista: POST calcula position como
+  //    "ultima + 1", entao paralelismo aqui e o caso classico de empate.
+  const cardsA = (
+    await fire(
+      'create A',
+      Array.from({ length: 8 }, (_, i) => () =>
+        api('POST', '/api/cards', { listId: listA.id, title: `stress A${i}`, description: `d${i}` }),
+      ),
+    )
+  ).map((r) => r.body)
+
+  // 2) 4 cards em paralelo na outra lista.
+  const cardsB = (
+    await fire(
+      'create B',
+      Array.from({ length: 4 }, (_, i) => () =>
+        api('POST', '/api/cards', { listId: listB.id, title: `stress B${i}` }),
+      ),
+    )
+  ).map((r) => r.body)
+
+  // 3) 6 moves em paralelo de A para B, com positions fracionarias calculadas
+  //    pelo cliente (como manda o CLAUDE.md).
+  await fire(
+    'move A->B',
+    cardsA.slice(0, 6).map((card, i) => () =>
+      api('PATCH', `/api/cards/${card.id}/move`, {
+        listId: listB.id,
+        position: 100 + i / 8,
+      }),
+    ),
+  )
+
+  // 4) 4 edicoes de titulo em paralelo.
+  await fire(
+    'patch',
+    cardsB.map((card, i) => () =>
+      api('PATCH', `/api/cards/${card.id}`, { title: `stress B${i} editado` }),
+    ),
+  )
+
+  // 5) 3 deletes em paralelo (vao para a lixeira) + 3 restores em paralelo.
+  //    Restore emite card.created: o reducer faz upsert por id e o card volta.
+  const doomed = cardsA.slice(6)
+  await fire('delete', [
+    ...doomed.map((card) => () => api('DELETE', `/api/cards/${card.id}`)),
+    () => api('DELETE', `/api/cards/${cardsB[0].id}`),
+  ])
+  await fire('restore', [
+    ...doomed.map((card) => () => api('POST', `/api/trash/cards/${card.id}/restore`)),
+    () => api('POST', `/api/trash/cards/${cardsB[0].id}/restore`),
+  ])
+
+  // 6) Lista inteira para a lixeira e de volta. O list.created do restore vem
+  //    com cards[] populado -- se nao viesse, o reducer sobrescreveria a lista
+  //    com uma vazia e a convergencia no fim do script acusaria.
+  await fire('delete lista B', [() => api('DELETE', `/api/lists/${listB.id}`)])
+  await fire('restore lista B', [() => api('POST', `/api/trash/lists/${listB.id}/restore`)])
+
+  // 7) Ultimo lote: 4 moves em paralelo para dentro de A, empatando de proposito
+  //    duas positions para exercitar o desempate por id.
+  await fire(
+    'move B->A',
+    cardsB.map((card, i) => () =>
+      api('PATCH', `/api/cards/${card.id}/move`, {
+        listId: listA.id,
+        position: i < 2 ? -5 : -5 + i,
+      }),
+    ),
+  )
+
+  // 8) Reordenar a propria lista A.
+  await fire('move lista', [
+    () => api('PATCH', `/api/lists/${listA.id}`, { position: listB.position - 0.5 }),
+  ])
+
+  console.log(`  ${mutations} mutacoes disparadas`)
+  check('nenhuma mutacao da rajada falhou', failed.length === 0, failed.join(' | '))
+
+  await settle(clients)
+
+  // -------------------------------------------------------------------------
+  section('broadcast identico para todos os clientes')
+  const counts = clients.map((c) => c.events.length)
+  check(
+    `todos os ${CLIENTS} clientes receberam a mesma quantidade de eventos`,
+    new Set(counts).size === 1,
+    `contagens: ${counts.join(', ')}`,
+  )
+  check('o broadcast chegou (contagem > 0)', counts[0] > 0, `${counts[0]} eventos`)
+  check(
+    'a quantidade de eventos cobre todas as mutacoes',
+    counts[0] >= mutations,
+    `${counts[0]} eventos para ${mutations} mutacoes`,
+  )
+
+  const reference = clients[0].raw.join('\n')
+  const divergent = clients
+    .slice(1)
+    .filter((c) => c.raw.join('\n') !== reference)
+    .map((c) => c.index)
+  check(
+    'todos os clientes receberam a MESMA sequencia, na mesma ordem',
+    divergent.length === 0,
+    divergent.length ? `clientes divergentes: ${divergent.join(', ')}` : '',
+  )
+
+  // Se a ordem divergiu, o conjunto ainda pode ser igual -- vale distinguir os
+  // dois casos: conjunto diferente e evento perdido; ordem diferente e corrida.
+  if (divergent.length > 0) {
+    const asSet = (c) => [...c.raw].sort().join('\n')
+    const refSet = asSet(clients[0])
+    check(
+      '...ao menos o CONJUNTO de eventos e o mesmo',
+      clients.every((c) => asSet(c) === refSet),
+      'ha cliente com evento faltando ou sobrando, nao so ordem trocada',
+    )
+  }
+
+  const log = clients[0].events
+  const byType = log.reduce((acc, e) => ({ ...acc, [e.type]: (acc[e.type] ?? 0) + 1 }), {})
+  console.log(
+    `  eventos: ${Object.entries(byType)
+      .map(([t, n]) => `${t}=${n}`)
+      .join(' ')}`,
+  )
+
+  // Todo card criado tem que ter aparecido no broadcast.
+  const created = new Set(
+    log.filter((e) => e.type === 'card.created').map((e) => e.payload.id),
+  )
+  const missing = [...cardsA, ...cardsB].filter((c) => !created.has(c.id)).map((c) => c.id)
+  check(
+    'todo card criado pelo HTTP apareceu como card.created no WS',
+    missing.length === 0,
+    missing.join(', '),
+  )
+  check(
+    'todo card.moved traz exatamente { id, listId, position }',
+    log
+      .filter((e) => e.type === 'card.moved')
+      .every((e) => Object.keys(e.payload).sort().join(',') === 'id,listId,position'),
+  )
+
+  // -------------------------------------------------------------------------
+  section('idempotencia do reducer')
+  const once = replay(baseline, log)
+  const doubled = replayDoubled(baseline, log)
+  check(
+    'aplicar cada evento duas vezes == aplicar uma vez',
+    same(snapshot(once), snapshot(doubled)),
+    firstDiff(snapshot(once), snapshot(doubled)) ?? '',
+  )
+
+  const twice = replay(once, log)
+  check(
+    'reaplicar o log inteiro converge para o mesmo estado',
+    same(snapshot(once), snapshot(twice)),
+    firstDiff(snapshot(once), snapshot(twice)) ?? '',
+  )
+
+  // Ordem embaralhada NAO precisa convergir (card.moved depende do estado
+  // anterior do card), entao nao ha assercao aqui -- so a nota de que `stale`
+  // e o mecanismo que cobre esse caso no frontend.
+  check(
+    'o reducer nao precisou pedir recarga (stale) para dar conta do log',
+    once.stale !== true,
+    'algum evento falou de uma lista/card desconhecido: ver o `stale` em useBoard.ts',
+  )
+
+  // -------------------------------------------------------------------------
+  section('convergencia: eventos vs GET /api/board')
+  const freshRes = await api('GET', '/api/board')
+  const fresh = freshRes.body
+  const derived = snapshot(once)
+  const server = snapshot(fresh)
+  check(
+    'estado derivado so dos eventos == GET /api/board fresco',
+    same(derived, server),
+    firstDiff(derived, server) ?? '',
+  )
+  check(
+    'a contagem da lixeira derivada de trash.updated bate com o GET',
+    same(derived.trash, server.trash),
+    `derivado ${JSON.stringify(derived.trash)} vs servidor ${JSON.stringify(server.trash)}`,
+  )
+
+  // Empates de position sao tolerados (o servidor desempata por id), mas vale
+  // registrar quantos a rajada produziu -- e a metrica que diz se o POST
+  // paralelo esta correndo perigo.
+  const ties = server.lists.reduce((n, l) => {
+    const seen = new Map()
+    for (const c of l.cards) seen.set(c.position, (seen.get(c.position) ?? 0) + 1)
+    return n + [...seen.values()].filter((v) => v > 1).length
+  }, 0)
+  console.log(`  ${ties} grupo(s) de position empatada apos a rajada (tolerado: desempate por id)`)
+
+  // -------------------------------------------------------------------------
+  // A rajada acima produziu empates de position. Empate sozinho o servidor
+  // tolera (desempata por id), mas ele nao e inofensivo: `POST /api/cards`
+  // calcula "ultima + 1" com um SELECT seguido de um INSERT fora de qualquer
+  // transacao, entao N criacoes concorrentes leem a MESMA "ultima" e gravam a
+  // MESMA position. E a partir de dois cards empatados o drag-and-drop deixa de
+  // funcionar: `positionFor` devolve (a+b)/2, que com a === b e o proprio a --
+  // o cliente pede uma posicao que nao existe entre os vizinhos, o servidor
+  // grava 200 OK, e o card nao sai do lugar.
+  section('corrida de position em criacoes concorrentes')
+  const raceList = (await api('POST', '/api/lists', { title: 'ws-stress race' })).body
+  const racers = (
+    await Promise.all(
+      Array.from({ length: 20 }, (_, i) =>
+        api('POST', '/api/cards', { listId: raceList.id, title: `race ${i}` }),
+      ),
+    )
+  ).map((r) => r.body)
+  const racePositions = racers.map((c) => c.position)
+  const distinct = new Set(racePositions).size
+  check(
+    '20 POST /api/cards concorrentes geram 20 positions distintas',
+    distinct === racePositions.length,
+    `so ${distinct} distintas: ${racePositions.join(',')} -- read-modify-write sem transacao em POST /api/cards`,
+  )
+
+  // A consequencia, medida em vez de deduzida: soltar um card entre dois
+  // vizinhos empatados nao muda a ordem.
+  const tied = [...racePositions].sort((x, y) => x - y).find((p, i, arr) => arr[i + 1] === p)
+  if (tied !== undefined) {
+    const neighbours = racers.filter((c) => c.position === tied)
+    const outsider = racers.find((c) => c.position !== tied)
+    const midpoint = (neighbours[0].position + neighbours[1].position) / 2
+    const attempt = await api('PATCH', `/api/cards/${outsider.id}/move`, {
+      listId: raceList.id,
+      position: midpoint,
+    })
+    check(
+      'soltar um card ENTRE dois vizinhos empatados produz uma position distinta',
+      attempt.status === 200 && attempt.body.position !== neighbours[0].position,
+      `pedido ${midpoint}, gravado ${attempt.body?.position}, vizinhos em ${neighbours[0].position} -- o drag responde 200 e nao move nada`,
+    )
+  }
+  await api('DELETE', `/api/lists/${raceList.id}`)
+  await api('DELETE', `/api/trash/lists/${raceList.id}`)
+
+  // -------------------------------------------------------------------------
+  section('limpeza')
+  await api('DELETE', `/api/lists/${listA.id}`)
+  await api('DELETE', `/api/lists/${listB.id}`)
+  // Purge item a item, nunca DELETE /api/trash: esvaziar a lixeira apagaria
+  // tambem o que ja estava la antes do teste. Purgar a lista cascateia nos
+  // cards dela, inclusive os que foram para a lixeira por conta propria.
+  const purgeA = await api('DELETE', `/api/trash/lists/${listA.id}`)
+  const purgeB = await api('DELETE', `/api/trash/lists/${listB.id}`)
+  check('listas de trabalho apagadas de vez', purgeA.status === 204 && purgeB.status === 204)
+
+  await settle(clients, 400, 4000)
+  const trashAfter = (await api('GET', '/api/trash')).body.counts
+  check(
+    'a lixeira voltou ao estado anterior ao teste',
+    same(trashBefore, trashAfter),
+    `antes ${JSON.stringify(trashBefore)} depois ${JSON.stringify(trashAfter)}`,
+  )
+  const finalBoard = (await api('GET', '/api/board')).body
+  check(
+    'o board voltou as listas originais',
+    same(
+      baseline.lists.map((l) => l.id).sort(),
+      finalBoard.lists.map((l) => l.id).sort(),
+    ),
+  )
+
+  for (const c of clients) c.socket.close()
+  console.log(failures === 0 ? '\nWS-STRESS OK' : `\nWS-STRESS FALHOU: ${failures} assercao(oes)`)
+  process.exit(failures === 0 ? 0 : 1)
+}
+
+main().catch((e) => {
+  console.error('ws-stress explodiu:', e.message)
+  process.exit(1)
+})
diff --git a/backend/src/routes/cards.ts b/backend/src/routes/cards.ts
index 7a52124..59e96f7 100644
--- a/backend/src/routes/cards.ts
+++ b/backend/src/routes/cards.ts
@@ -1,6 +1,8 @@
 import type { FastifyInstance } from 'fastify'
 import { prisma } from '../db.js'
 import { broadcast } from '../bus.js'
+import { record } from '../activity.js'
+import { serialize } from '../serialize.js'
 import { broadcastTrash, findLiveCard, findLiveList } from '../trash.js'
 
 export async function cardRoutes(app: FastifyInstance) {
@@ -24,23 +26,29 @@ export async function cardRoutes(app: FastifyInstance) {
     const list = await findLiveList(listId)
     if (!list) return reply.code(404).send({ error: 'lista nao encontrada' })
 
-    // De proposito conta os cards na lixeira tambem: se um card com position 7
-    // for restaurado depois, ele nao colide com um criado agora.
-    const last = await prisma.card.findFirst({
-      where: { listId },
-      orderBy: { position: 'desc' },
-    })
-
-    const card = await prisma.card.create({
-      data: {
-        listId,
-        title: title.trim(),
-        description: description ?? '',
-        position: last ? last.position + 1 : 0,
-      },
+    // Ler a ultima position e inserir precisa ser atomico: sem isso duas
+    // criacoes simultaneas leem a mesma "ultima" e nascem empatadas, e dois
+    // cards empatados tornam o drag entre eles inoperante (ver serialize.ts).
+    const card = await serialize(`cards:${listId}`, async () => {
+      // De proposito conta os cards na lixeira tambem: se um card com position 7
+      // for restaurado depois, ele nao colide com um criado agora.
+      const last = await prisma.card.findFirst({
+        where: { listId },
+        orderBy: { position: 'desc' },
+      })
+
+      return prisma.card.create({
+        data: {
+          listId,
+          title: title.trim(),
+          description: description ?? '',
+          position: last ? last.position + 1 : 0,
+        },
+      })
     })
 
     broadcast('card.created', card)
+    await record('card.created', `Card "${card.title}" criado em "${list.title}"`)
     return reply.code(201).send(card)
   })
 
@@ -74,6 +82,12 @@ export async function cardRoutes(app: FastifyInstance) {
     const card = await prisma.card.update({ where: { id }, data })
 
     broadcast('card.updated', card)
+    await record(
+      'card.updated',
+      card.title !== exists.title
+        ? `Card "${exists.title}" renomeado para "${card.title}"`
+        : `Card "${card.title}" editado`,
+    )
     return card
   })
 
@@ -102,6 +116,7 @@ export async function cardRoutes(app: FastifyInstance) {
     })
 
     broadcast('card.moved', { id: card.id, listId: card.listId, position: card.position })
+    await record('card.moved', `Card "${card.title}" movido para "${list.title}"`)
     return card
   })
 
@@ -117,6 +132,7 @@ export async function cardRoutes(app: FastifyInstance) {
     await prisma.card.update({ where: { id }, data: { deletedAt: new Date() } })
 
     broadcast('card.deleted', { id })
+    await record('card.deleted', `Card "${exists.title}" foi para a lixeira`)
     await broadcastTrash()
     return reply.code(204).send()
   })
diff --git a/backend/src/routes/lists.ts b/backend/src/routes/lists.ts
index c54ccb0..0802eac 100644
--- a/backend/src/routes/lists.ts
+++ b/backend/src/routes/lists.ts
@@ -1,6 +1,8 @@
 import type { FastifyInstance } from 'fastify'
 import { prisma } from '../db.js'
 import { broadcast } from '../bus.js'
+import { record } from '../activity.js'
+import { serialize } from '../serialize.js'
 import { ALIVE, broadcastTrash, findLiveList } from '../trash.js'
 
 export async function listRoutes(app: FastifyInstance) {
@@ -13,23 +15,27 @@ export async function listRoutes(app: FastifyInstance) {
     const board = await prisma.board.findUnique({ where: { slug: 'default' } })
     if (!board) return reply.code(404).send({ error: 'board default nao existe' })
 
-    // Inclui as listas na lixeira: uma lista restaurada nao deve colidir de
-    // position com uma criada enquanto ela estava fora.
-    const last = await prisma.list.findFirst({
-      where: { boardId: board.id },
-      orderBy: { position: 'desc' },
-    })
+    // Mesmo race do POST /api/cards: ler-e-inserir tem que ser atomico.
+    const list = await serialize(`lists:${board.id}`, async () => {
+      // Inclui as listas na lixeira: uma lista restaurada nao deve colidir de
+      // position com uma criada enquanto ela estava fora.
+      const last = await prisma.list.findFirst({
+        where: { boardId: board.id },
+        orderBy: { position: 'desc' },
+      })
 
-    const list = await prisma.list.create({
-      data: {
-        title: title.trim(),
-        position: last ? last.position + 1 : 0,
-        boardId: board.id,
-      },
-      include: { cards: true },
+      return prisma.list.create({
+        data: {
+          title: title.trim(),
+          position: last ? last.position + 1 : 0,
+          boardId: board.id,
+        },
+        include: { cards: true },
+      })
     })
 
     broadcast('list.created', list)
+    await record('list.created', `Lista "${list.title}" criada`)
     return reply.code(201).send(list)
   })
 
@@ -64,6 +70,12 @@ export async function listRoutes(app: FastifyInstance) {
     })
 
     broadcast('list.updated', list)
+    await record(
+      'list.updated',
+      list.title !== exists.title
+        ? `Lista "${exists.title}" renomeada para "${list.title}"`
+        : `Lista "${list.title}" reordenada`,
+    )
     return list
   })
 
@@ -79,6 +91,7 @@ export async function listRoutes(app: FastifyInstance) {
     await prisma.list.update({ where: { id }, data: { deletedAt: new Date() } })
 
     broadcast('list.deleted', { id })
+    await record('list.deleted', `Lista "${exists.title}" foi para a lixeira`)
     await broadcastTrash()
     return reply.code(204).send()
   })
diff --git a/backend/src/serialize.ts b/backend/src/serialize.ts
new file mode 100644
index 0000000..8fc90ea
--- /dev/null
+++ b/backend/src/serialize.ts
@@ -0,0 +1,50 @@
+/**
+ * Serializa operacoes por chave.
+ *
+ * Existe por causa de um bug real: `POST /api/cards` lia a maior `position` da
+ * lista e so depois inseria `last.position + 1`. Duas criacoes simultaneas leem
+ * a mesma "ultima" e nascem empatadas -- 15 requisicoes em paralelo produziam 5
+ * posicoes distintas.
+ *
+ * O empate nao e cosmetico. A partir de dois cards na mesma position,
+ * `positionFor()` calcula `(a + b) / 2 === a` para o slot entre eles: o servidor
+ * responde 200, grava o valor que recebeu, e o card **nao sai do lugar**. O
+ * desempate por `id` no `orderBy` mantem a ordem estavel, entao nada parece
+ * quebrado -- o drag simplesmente nao funciona.
+ *
+ * Uma transacao do Prisma nao resolve sozinha: no SQLite o `BEGIN` e deferido, o
+ * SELECT nao pega lock de escrita, e as duas transacoes leem o mesmo valor antes
+ * de qualquer uma escrever.
+ *
+ * LIMITE: isto e um mutex em memoria, valido enquanto houver **um processo** de
+ * backend -- que e o modelo de implantacao aqui (um container no compose). Com
+ * mais de uma instancia o race volta, e a correcao passa a ser no banco:
+ * `INSERT ... SELECT MAX(position) + 1` numa unica declaracao, ou
+ * `UNIQUE(listId, position)` com retry.
+ */
+
+const chains = new Map<string, Promise<unknown>>()
+
+export function serialize<T>(key: string, task: () => Promise<T>): Promise<T> {
+  const previous = chains.get(key) ?? Promise.resolve()
+
+  // `previous.then(task, task)` roda a tarefa tenha a anterior falhado ou nao:
+  // um erro numa requisicao nao pode travar a fila das seguintes.
+  const next = previous.then(task, task)
+
+  // O que fica no Map e a versao "silenciada": se ninguem tratar a rejeicao da
+  // corrente armazenada, o Node emite unhandledRejection.
+  const settled = next.then(
+    () => undefined,
+    () => undefined,
+  )
+  chains.set(key, settled)
+
+  // Libera a entrada quando esta e a ultima tarefa da chave -- sem isso o Map
+  // cresce indefinidamente conforme listas sao criadas e apagadas.
+  void settled.then(() => {
+    if (chains.get(key) === settled) chains.delete(key)
+  })
+
+  return next
+}

From caefe45386d5ca9ccfaa778a125035ad5ac2c397 Mon Sep 17 00:00:00 2001
From: Renan Locatiz Fernandes <renan.fernandes@outlook.com>
Date: Fri, 21 Aug 2026 02:04:49 -0300
Subject: [PATCH 15/19] feat: Visualizador de Eventos e endpoint de
 estatisticas

Log append-only de toda mutacao, com a frase ja formatada -- o cliente imprime
`summary`, nunca remonta o texto a partir de ids. Doze pontos de instrumentacao
em cards/lists/trash, cada um logo depois do broadcast correspondente, para o
log so registrar o que ja foi persistido e anunciado.

Gravar log nunca derruba a mutacao principal: `record()` engole a propria falha.
Um log de auditoria que quebra a escrita e pior do que nao ter log.

A janela escuta `activity.recorded` num socket proprio em vez de passar pelo
reducer do board: o log nao e estado do board, e enfia-lo la poluiria o reducer
que hoje so lida com listas e cards.

Junto vai `GET /api/stats` (contagens, cards por lista, mais antigo/mais novo),
que exigiu `createdAt` na model Card.

Bug corrigido na migration: o backfill do Prisma grava DEFAULT CURRENT_TIMESTAMP
como TEXT, mas o Prisma le DateTime como INTEGER. O SQLite ordena por classe de
tipo antes do valor, entao toda linha antiga ficava depois de qualquer linha
nova -- `newestCard` devolvia um card do seed COM A DATA CERTA no JSON, que e o
que esconde o bug. A segunda migration normaliza via julianday.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../migration.sql                             |  31 +++++
 .../migration.sql                             |  26 ++++
 backend/prisma/schema.prisma                  |  17 +++
 backend/src/activity.ts                       | 100 ++++++++++++++
 backend/src/bus.ts                            |   4 +
 backend/src/routes/activity.ts                |  53 ++++++++
 backend/src/routes/stats.ts                   |  77 +++++++++++
 backend/src/server.ts                         |   4 +
 frontend/src/App.tsx                          |  39 ++++++
 frontend/src/EventViewer.tsx                  | 126 ++++++++++++++++++
 frontend/src/styles.css                       |  81 ++++++++++-
 11 files changed, 557 insertions(+), 1 deletion(-)
 create mode 100644 backend/prisma/migrations/20260821044819_atividade_e_stats/migration.sql
 create mode 100644 backend/prisma/migrations/20260821050000_normaliza_createdat_dos_cards/migration.sql
 create mode 100644 backend/src/activity.ts
 create mode 100644 backend/src/routes/activity.ts
 create mode 100644 backend/src/routes/stats.ts
 create mode 100644 frontend/src/EventViewer.tsx

diff --git a/backend/prisma/migrations/20260821044819_atividade_e_stats/migration.sql b/backend/prisma/migrations/20260821044819_atividade_e_stats/migration.sql
new file mode 100644
index 0000000..5933801
--- /dev/null
+++ b/backend/prisma/migrations/20260821044819_atividade_e_stats/migration.sql
@@ -0,0 +1,31 @@
+-- CreateTable
+CREATE TABLE "Activity" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "type" TEXT NOT NULL,
+    "summary" TEXT NOT NULL,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
+);
+
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_Card" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "title" TEXT NOT NULL,
+    "description" TEXT NOT NULL DEFAULT '',
+    "position" REAL NOT NULL,
+    "listId" TEXT NOT NULL,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "deletedAt" DATETIME,
+    CONSTRAINT "Card_listId_fkey" FOREIGN KEY ("listId") REFERENCES "List" ("id") ON DELETE CASCADE ON UPDATE CASCADE
+);
+INSERT INTO "new_Card" ("deletedAt", "description", "id", "listId", "position", "title") SELECT "deletedAt", "description", "id", "listId", "position", "title" FROM "Card";
+DROP TABLE "Card";
+ALTER TABLE "new_Card" RENAME TO "Card";
+CREATE INDEX "Card_listId_position_idx" ON "Card"("listId", "position");
+CREATE INDEX "Card_deletedAt_idx" ON "Card"("deletedAt");
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;
+
+-- CreateIndex
+CREATE INDEX "Activity_createdAt_idx" ON "Activity"("createdAt");
diff --git a/backend/prisma/migrations/20260821050000_normaliza_createdat_dos_cards/migration.sql b/backend/prisma/migrations/20260821050000_normaliza_createdat_dos_cards/migration.sql
new file mode 100644
index 0000000..4bba81a
--- /dev/null
+++ b/backend/prisma/migrations/20260821050000_normaliza_createdat_dos_cards/migration.sql
@@ -0,0 +1,26 @@
+-- Conserta o backfill de Card.createdAt feito pela migration anterior.
+--
+-- A migration `atividade-e-stats` copiou os cards existentes para a tabela nova
+-- sem a coluna `createdAt`, entao cada linha antiga caiu no
+-- `DEFAULT CURRENT_TIMESTAMP` do SQLite -- que grava TEXT ("2026-08-21 04:48:19").
+-- O Prisma, ao inserir, grava DateTime como INTEGER (ms desde a epoch).
+--
+-- Isso quebra ORDER BY, nao a leitura: o SQLite ordena por classe de tipo antes
+-- do valor (INTEGER < TEXT), entao TODA linha antiga se ordena depois de TODA
+-- linha nova, independentemente da data. Na pratica GET /api/stats devolvia como
+-- `newestCard` um card do seed em vez do card recem-criado -- e os dois
+-- apareciam com a data certa no JSON, o que torna o bug invisivel na resposta.
+--
+-- A conversao preserva o instante: julianday() interpreta a string como UTC,
+-- que e o fuso de CURRENT_TIMESTAMP.
+UPDATE "Card"
+SET "createdAt" = CAST((julianday("createdAt") - 2440587.5) * 86400000.0 AS INTEGER)
+WHERE typeof("createdAt") = 'text';
+
+-- Mesmo tratamento por seguranca no log: `Activity.createdAt` tambem tem
+-- DEFAULT CURRENT_TIMESTAMP no schema SQL. Hoje o default nunca dispara (o
+-- Prisma sempre manda o valor), mas um INSERT feito na mao pelo sqlite3 criaria
+-- a mesma mistura de tipos e o log apareceria fora de ordem.
+UPDATE "Activity"
+SET "createdAt" = CAST((julianday("createdAt") - 2440587.5) * 86400000.0 AS INTEGER)
+WHERE typeof("createdAt") = 'text';
diff --git a/backend/prisma/schema.prisma b/backend/prisma/schema.prisma
index a8d7a24..ac4bb5b 100644
--- a/backend/prisma/schema.prisma
+++ b/backend/prisma/schema.prisma
@@ -21,6 +21,10 @@ model Card {
   position    Float
   listId      String
   list        List      @relation(fields: [listId], references: [id], onDelete: Cascade)
+  // GET /api/stats precisa de oldestCard/newestCard, e "mais antigo" so existe se
+  // a linha souber quando nasceu. cuid() e ordenavel por tempo, mas so por acaso
+  // de implementacao -- nao da para ordenar por ele e chamar de data.
+  createdAt   DateTime  @default(now())
   // Lixeira: null = no board, timestamp = na lixeira. DELETE /api/cards/:id
   // marca; DELETE /api/trash/... e que apaga de verdade.
   deletedAt   DateTime?
@@ -44,3 +48,16 @@ model List {
   @@index([boardId, position])
   @@index([deletedAt])
 }
+
+/// O Visualizador de Eventos do Windows 95: uma linha por mutacao, so texto ja
+/// formatado. NAO ha FK para Card/List de proposito -- o log tem que sobreviver
+/// ao "Esvaziar Lixeira", que apaga as linhas de verdade; um onDelete: Cascade
+/// levaria junto exatamente o historico que se quer consultar depois.
+model Activity {
+  id        String   @id @default(cuid())
+  type      String
+  summary   String
+  createdAt DateTime @default(now())
+
+  @@index([createdAt])
+}
diff --git a/backend/src/activity.ts b/backend/src/activity.ts
new file mode 100644
index 0000000..404d1aa
--- /dev/null
+++ b/backend/src/activity.ts
@@ -0,0 +1,100 @@
+import { prisma } from './db.js'
+import { broadcast } from './bus.js'
+
+/**
+ * O Visualizador de Eventos do Windows 95: um log append-only de tudo que muda
+ * no board. Uma linha por mutacao, com o texto ja formatado -- o cliente so
+ * imprime `summary`, nunca remonta a frase a partir de ids.
+ *
+ * ------------------------------------------------------------------------
+ * ONDE LIGAR AS CHAMADAS `record(...)`
+ * ------------------------------------------------------------------------
+ * As rotas de cards/lists/trash NAO estao instrumentadas -- esta sessao nao
+ * pode edita-las. A lista abaixo diz exatamente onde inserir cada chamada.
+ * As linhas sao do estado do repo em que este arquivo foi escrito; cada uma
+ * vai LOGO DEPOIS do `broadcast(...)` correspondente, para que o log so
+ * registre o que ja foi persistido e anunciado.
+ *
+ * Em todas elas basta acrescentar o import no topo do arquivo:
+ *     import { record } from '../activity.js'
+ *
+ * src/routes/cards.ts
+ *   ~L43  apos broadcast('card.created', card)
+ *         await record('card.created', `Card "${card.title}" criado em "${list.title}"`)
+ *   ~L76  apos broadcast('card.updated', card)
+ *         await record('card.updated', card.title !== exists.title
+ *           ? `Card "${exists.title}" renomeado para "${card.title}"`
+ *           : `Card "${card.title}" editado`)
+ *   ~L104 apos broadcast('card.moved', ...)
+ *         await record('card.moved', `Card "${card.title}" movido para "${list.title}"`)
+ *   ~L119 apos broadcast('card.deleted', { id })
+ *         await record('card.deleted', `Card "${exists.title}" foi para a lixeira`)
+ *
+ * src/routes/lists.ts
+ *   ~L32  apos broadcast('list.created', list)
+ *         await record('list.created', `Lista "${list.title}" criada`)
+ *   ~L66  apos broadcast('list.updated', list)
+ *         await record('list.updated', list.title !== exists.title
+ *           ? `Lista "${exists.title}" renomeada para "${list.title}"`
+ *           : `Lista "${list.title}" reordenada`)
+ *   ~L81  apos broadcast('list.deleted', { id })
+ *         await record('list.deleted', `Lista "${exists.title}" foi para a lixeira`)
+ *
+ * src/routes/trash.ts
+ *   ~L71  apos broadcast('card.created', restored)
+ *         await record('card.restored', `Card "${card.title}" restaurado da lixeira`)
+ *   ~L90  apos broadcast('list.created', list)
+ *         await record('list.restored', `Lista "${list.title}" restaurada da lixeira`)
+ *   ~L100 apos prisma.card.delete({ where: { id } })
+ *         await record('card.purged', `Card "${exists.title}" apagado definitivamente`)
+ *   ~L113 apos prisma.list.delete({ where: { id } })
+ *         await record('list.purged', `Lista "${exists.title}" apagada definitivamente`)
+ *   ~L135 apos os dois deleteMany de DELETE /api/trash
+ *         await record('trash.emptied',
+ *           `Lixeira esvaziada: ${cards} card(s) e ${lists} lista(s) apagados`)
+ *
+ * Cuidado nos dois `purged` e no `trash.emptied`: o titulo tem que ser lido da
+ * variavel `exists`/`card` capturada ANTES do delete -- depois dele a linha nao
+ * existe mais para consultar.
+ */
+
+/** O que `record` aceita em `type`. String livre de proposito: o log registra
+ *  acoes que nao sao eventos de WebSocket (`card.purged`, `trash.emptied`), e
+ *  amarra-lo ao `EventType` do bus obrigaria a inventar evento para cada uma. */
+export type ActivityType =
+  | 'list.created'
+  | 'list.updated'
+  | 'list.deleted'
+  | 'list.restored'
+  | 'list.purged'
+  | 'card.created'
+  | 'card.updated'
+  | 'card.moved'
+  | 'card.deleted'
+  | 'card.restored'
+  | 'card.purged'
+  | 'trash.emptied'
+  | (string & {})
+
+/**
+ * Grava uma linha no log e anuncia `activity.recorded`.
+ *
+ * NUNCA lanca. Log e efeito colateral: se o insert falhar, a mutacao que o
+ * chamou ja aconteceu e nao pode virar 500 por causa disso. O erro vai para o
+ * stderr e a vida segue -- por isso o `await record(...)` nas rotas e seguro.
+ *
+ * Retorna a linha gravada, ou `null` se a gravacao falhou.
+ */
+export async function record(type: ActivityType, summary: string) {
+  try {
+    const activity = await prisma.activity.create({ data: { type, summary } })
+    broadcast('activity.recorded', activity)
+    return activity
+  } catch (err) {
+    // console, e nao o logger do Fastify: `record` e chamado de dentro das rotas
+    // mas nao recebe a instancia do app, e passar `app` so para logar o caso raro
+    // obrigaria a mudar a assinatura de toda chamada.
+    console.error('[activity] falha ao gravar log (mutacao NAO foi afetada):', err)
+    return null
+  }
+}
diff --git a/backend/src/bus.ts b/backend/src/bus.ts
index 895fb59..3ddec4e 100644
--- a/backend/src/bus.ts
+++ b/backend/src/bus.ts
@@ -11,6 +11,10 @@ export type EventType =
   // Lixeira: o payload e so a contagem ({ cards, lists }), para o icone do desktop
   // saber se ela esta cheia. O conteudo vem de GET /api/trash quando a janela abre.
   | 'trash.updated'
+  // Visualizador de Eventos: o payload e a linha de log inteira
+  // ({ id, type, summary, createdAt }), ja com o texto formatado. E append-only,
+  // entao o cliente pode so empilhar -- nao ha upsert por id a fazer aqui.
+  | 'activity.recorded'
 
 const clients = new Set<WebSocket>()
 
diff --git a/backend/src/routes/activity.ts b/backend/src/routes/activity.ts
new file mode 100644
index 0000000..65ce57d
--- /dev/null
+++ b/backend/src/routes/activity.ts
@@ -0,0 +1,53 @@
+import type { FastifyInstance } from 'fastify'
+import { prisma } from '../db.js'
+
+const DEFAULT_LIMIT = 50
+const MAX_LIMIT = 200
+
+export async function activityRoutes(app: FastifyInstance) {
+  /**
+   * O log, mais recente primeiro -- e a ordem em que o Visualizador de Eventos
+   * mostra. O desempate por id existe porque o SQLite guarda o timestamp com
+   * precisao de milissegundo: duas gravacoes na mesma requisicao empatam em
+   * `createdAt` e sem o segundo criterio a paginacao ficaria instavel.
+   */
+  app.get('/api/activity', async (req, reply) => {
+    const { limit: raw } = req.query as { limit?: unknown }
+
+    let limit = DEFAULT_LIMIT
+    if (raw !== undefined) {
+      // Query string chega sempre como string; `Number('')` e 0 e `Number('x')`
+      // e NaN, entao os dois caem na validacao abaixo em vez de virar o default.
+      const parsed = typeof raw === 'string' || typeof raw === 'number' ? Number(raw) : NaN
+      if (!Number.isInteger(parsed) || parsed < 1 || parsed > MAX_LIMIT) {
+        return reply
+          .code(400)
+          .send({ error: `limit deve ser um inteiro entre 1 e ${MAX_LIMIT}` })
+      }
+      limit = parsed
+    }
+
+    const items = await prisma.activity.findMany({
+      orderBy: [{ createdAt: 'desc' }, { id: 'desc' }],
+      take: limit,
+    })
+
+    // `total` vem junto para a janela poder dizer "mostrando 50 de 312" sem uma
+    // segunda chamada -- o log cresce sozinho e o usuario nao tem como saber
+    // que a lista esta truncada.
+    return { items, limit, total: await prisma.activity.count() }
+  })
+
+  /**
+   * Limpar o log. Nao ha lixeira para o log: ele e o registro de que a lixeira
+   * existiu, guardar um registro do registro nao acaba nunca.
+   *
+   * Sem broadcast: o cliente que apagou ja sabe, e um evento `activity.cleared`
+   * nao esta em docs/API.md -- inventa-lo aqui divergiria do contrato. A janela
+   * recarrega com GET /api/activity quando reabre.
+   */
+  app.delete('/api/activity', async () => {
+    const { count } = await prisma.activity.deleteMany({})
+    return { deleted: count }
+  })
+}
diff --git a/backend/src/routes/stats.ts b/backend/src/routes/stats.ts
new file mode 100644
index 0000000..8d99e1c
--- /dev/null
+++ b/backend/src/routes/stats.ts
@@ -0,0 +1,77 @@
+import type { FastifyInstance } from 'fastify'
+import { prisma } from '../db.js'
+import { ALIVE } from '../trash.js'
+
+const TRASHED = { deletedAt: { not: null } } as const
+
+/** So os campos que a janela de propriedades mostra -- devolver o card inteiro
+ *  faria `description` (texto livre, potencialmente longo) viajar duas vezes
+ *  dentro de um endpoint que e so contagem. */
+const CARD_SUMMARY = { id: true, title: true, listId: true, createdAt: true } as const
+
+export async function statsRoutes(app: FastifyInstance) {
+  /**
+   * Propriedades do board: as contagens que a caixa de dialogo do Windows 95
+   * mostraria. Leitura pura, sem broadcast.
+   *
+   * "Vivo" aqui e o que o board mostra, que e mais estrito que `deletedAt: null`
+   * no card: um card sem `deletedAt` dentro de uma lista NA LIXEIRA sumiu da
+   * tela junto com ela (ver o comentario do soft delete em routes/lists.ts).
+   * Contar esse card em `cards` faria o total nao bater com a soma de
+   * `cardsPerList`, que so percorre listas vivas -- dois numeros na mesma tela
+   * discordando um do outro. Por isso o filtro de card e `{ ...ALIVE, list: ALIVE }`.
+   */
+  app.get('/api/stats', async () => {
+    const liveCards = { ...ALIVE, list: ALIVE }
+
+    const [lists, cards, trashedCards, trashedLists, listRows, oldestCard, newestCard] =
+      await Promise.all([
+        prisma.list.count({ where: ALIVE }),
+        prisma.card.count({ where: liveCards }),
+        prisma.card.count({ where: TRASHED }),
+        prisma.list.count({ where: TRASHED }),
+        prisma.list.findMany({
+          where: ALIVE,
+          orderBy: [{ position: 'asc' }, { id: 'asc' }],
+          select: {
+            id: true,
+            title: true,
+            // `_count` com filtro resolve no proprio SQL: sem ele seria um SELECT
+            // por lista, e a contagem viria errada de qualquer jeito, porque
+            // `_count` sem `where` inclui os cards da lixeira.
+            _count: { select: { cards: { where: ALIVE } } },
+          },
+        }),
+        prisma.card.findFirst({
+          where: liveCards,
+          orderBy: [{ createdAt: 'asc' }, { id: 'asc' }],
+          select: CARD_SUMMARY,
+        }),
+        prisma.card.findFirst({
+          where: liveCards,
+          orderBy: [{ createdAt: 'desc' }, { id: 'desc' }],
+          select: CARD_SUMMARY,
+        }),
+      ])
+
+    return {
+      lists,
+      cards,
+      trashedCards,
+      trashedLists,
+      cardsPerList: listRows.map((list) => ({
+        listId: list.id,
+        title: list.title,
+        count: list._count.cards,
+      })),
+      // null, nao um objeto vazio: board sem card nenhum e um estado normal
+      // (logo depois de "Esvaziar Lixeira", por exemplo).
+      oldestCard,
+      newestCard,
+      // Board sem lista da divisao por zero -> Infinity, que o JSON.stringify
+      // transforma em `null` sem avisar ninguem. Duas casas porque a media de
+      // cards por lista nao tem significado alem disso.
+      avgCardsPerList: lists === 0 ? 0 : Math.round((cards / lists) * 100) / 100,
+    }
+  })
+}
diff --git a/backend/src/server.ts b/backend/src/server.ts
index e434514..91cf808 100644
--- a/backend/src/server.ts
+++ b/backend/src/server.ts
@@ -8,6 +8,8 @@ import { boardRoutes } from './routes/board.js'
 import { listRoutes } from './routes/lists.js'
 import { cardRoutes } from './routes/cards.js'
 import { trashRoutes } from './routes/trash.js'
+import { activityRoutes } from './routes/activity.js'
+import { statsRoutes } from './routes/stats.js'
 
 const PORT = Number(process.env.PORT ?? 3001)
 const HOST = process.env.HOST ?? '0.0.0.0'
@@ -70,6 +72,8 @@ await app.register(boardRoutes)
 await app.register(listRoutes)
 await app.register(cardRoutes)
 await app.register(trashRoutes)
+await app.register(activityRoutes)
+await app.register(statsRoutes)
 
 for (const signal of ['SIGINT', 'SIGTERM'] as const) {
   process.on(signal, async () => {
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 27d97bc..c012c48 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -18,6 +18,8 @@ import type { MenuState } from './ContextMenu'
 import { Notepad } from './Notepad'
 import { SystemProperties } from './SystemProperties'
 import { useSounds } from './useSounds'
+import { useTheme } from './useTheme'
+import { EventViewer } from './EventViewer'
 import { TrashEmptyIcon, TrashFullIcon, WindowsFlagIcon } from './icons'
 import type { List } from './types'
 
@@ -56,7 +58,9 @@ export default function App() {
   const undo = useUndo()
   const [notepadOpen, setNotepadOpen] = useState(false)
   const [sysPropsOpen, setSysPropsOpen] = useState(false)
+  const [eventsOpen, setEventsOpen] = useState(false)
   const sounds = useSounds()
+  const { theme, setTheme, themes } = useTheme()
 
   // Relogio da bandeja. 10s em vez de 1s: o display so mostra hora e minuto,
   // entao segundo a segundo seria render descartado.
@@ -98,6 +102,7 @@ export default function App() {
     helpOpen ||
     notepadOpen ||
     sysPropsOpen ||
+    eventsOpen ||
     confirmation !== null
   useHotkeys(
     {
@@ -391,6 +396,10 @@ export default function App() {
         />
       )}
 
+      {eventsOpen && (
+        <EventViewer onClose={() => setEventsOpen(false)} onConfirm={setConfirmation} />
+      )}
+
       {trashOpen && (
         <TrashWindow
           onClose={() => setTrashOpen(false)}
@@ -549,6 +558,17 @@ export default function App() {
                   Atalhos de teclado
                 </button>
               </li>
+              <li>
+                <button
+                  onClick={() => {
+                    setStartOpen(false)
+                    setEventsOpen(true)
+                    sounds.play('chord')
+                  }}
+                >
+                  Visualizador de Eventos
+                </button>
+              </li>
               <li>
                 <button
                   onClick={() => {
@@ -569,6 +589,25 @@ export default function App() {
                   Som: {sounds.enabled ? 'ligado' : 'desligado'}
                 </button>
               </li>
+              <li className="start-separator" />
+              <li>
+                <span className="start-label">Esquema de cores</span>
+                <ul className="theme-submenu">
+                  {(Object.keys(themes) as (keyof typeof themes)[]).map((name) => (
+                    <li key={name}>
+                      <button
+                        className={theme === name ? 'theme-active' : undefined}
+                        onClick={() => {
+                          setTheme(name)
+                          sounds.play('ding')
+                        }}
+                      >
+                        {themes[name].label}
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              </li>
               <li>
                 <button
                   onClick={() => {
diff --git a/frontend/src/EventViewer.tsx b/frontend/src/EventViewer.tsx
new file mode 100644
index 0000000..18cc722
--- /dev/null
+++ b/frontend/src/EventViewer.tsx
@@ -0,0 +1,126 @@
+import { useCallback, useEffect, useState } from 'react'
+import { API_URL } from './api'
+import { Modal } from './Modal'
+import { DocumentIcon, FolderIcon, TrashFullIcon, WarningIcon } from './icons'
+
+type Activity = { id: string; type: string; summary: string; createdAt: string }
+
+/** Um icone por familia de evento -- o Visualizador de Eventos do Windows faz igual. */
+function iconFor(type: string) {
+  if (type.startsWith('list.')) return <FolderIcon size={16} />
+  if (type.includes('purged') || type.includes('emptied')) return <WarningIcon size={16} />
+  if (type.includes('deleted')) return <TrashFullIcon size={16} />
+  return <DocumentIcon size={16} />
+}
+
+function formatTime(iso: string) {
+  const d = new Date(iso)
+  if (Number.isNaN(d.getTime())) return ''
+  return d.toLocaleString('pt-BR', {
+    day: '2-digit',
+    month: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  })
+}
+
+export function EventViewer({
+  onClose,
+  onConfirm,
+}: {
+  onClose: () => void
+  onConfirm: (c: { title: string; message: string; onYes: () => void }) => void
+}) {
+  const [items, setItems] = useState<Activity[] | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  const load = useCallback(async () => {
+    try {
+      const res = await fetch(`${API_URL}/api/activity?limit=100`)
+      if (!res.ok) throw new Error((await res.json()).error ?? `HTTP ${res.status}`)
+      const data = (await res.json()) as { items: Activity[] }
+      setItems(data.items)
+      setError(null)
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e))
+    }
+  }, [])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  // O backend faz broadcast de `activity.recorded`, mas o board nao guarda o log
+  // (o payload nao pertence ao estado do board). Um listener proprio, so
+  // enquanto a janela esta aberta, mantem a lista viva sem poluir o reducer.
+  useEffect(() => {
+    const socket = new WebSocket(API_URL.replace(/^http/, 'ws') + '/ws')
+    socket.onmessage = (message) => {
+      const event = JSON.parse(message.data) as { type: string; payload: Activity }
+      if (event.type === 'activity.recorded') {
+        setItems((current) => (current ? [event.payload, ...current].slice(0, 100) : current))
+      }
+    }
+    return () => socket.close()
+  }, [])
+
+  const clear = async () => {
+    try {
+      const res = await fetch(`${API_URL}/api/activity`, { method: 'DELETE' })
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      await load()
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e))
+    }
+  }
+
+  return (
+    <Modal title="Visualizador de Eventos" onClose={onClose} width={520}>
+      {error && <p className="trash-error">{error}</p>}
+
+      <div className="event-list">
+        {items === null && <p className="trash-empty">Lendo o log...</p>}
+        {items?.length === 0 && <p className="trash-empty">Nenhum evento registrado.</p>}
+        {items && items.length > 0 && (
+          <table>
+            <thead>
+              <tr>
+                <th aria-label="Tipo" />
+                <th>Data e hora</th>
+                <th>Descrição</th>
+              </tr>
+            </thead>
+            <tbody>
+              {items.map((item) => (
+                <tr key={item.id}>
+                  <td className="event-icon">{iconFor(item.type)}</td>
+                  <td className="event-time">{formatTime(item.createdAt)}</td>
+                  <td>{item.summary}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+
+      <div className="trash-footer">
+        <span className="trash-status">{items ? `${items.length} evento(s)` : ''}</span>
+        <button onClick={() => void load()}>Atualizar</button>
+        <button
+          disabled={!items || items.length === 0}
+          onClick={() =>
+            onConfirm({
+              title: 'Limpar log',
+              message: 'Apagar todo o log de eventos? Isso não volta.',
+              onYes: () => void clear(),
+            })
+          }
+        >
+          Limpar log
+        </button>
+        <button onClick={onClose}>Fechar</button>
+      </div>
+    </Modal>
+  )
+}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index c201dba..7f9ff18 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -8,10 +8,27 @@ body,
 }
 
 body {
-  background: #008080; /* teal do desktop */
+  /* O tema escreve --desktop-bg em :root; o fallback e o teal padrao do
+     Windows 95, para a app funcionar antes do JS aplicar o tema. */
+  background: var(--desktop-bg, #008080);
   overflow: hidden;
 }
 
+/* Trocar tema significa sobrescrever o que o 98.css assume fixo. Aplicado com
+   moderacao: so a barra de titulo e o fundo, que e o que muda de verdade entre
+   os esquemas de cor originais. */
+.title-bar {
+  background: linear-gradient(
+    90deg,
+    var(--title-from, #000080),
+    var(--title-to, #1084d0)
+  ) !important;
+}
+
+.title-bar-text {
+  color: var(--title-text, #fff) !important;
+}
+
 .desktop {
   display: flex;
   flex-direction: column;
@@ -721,3 +738,65 @@ body {
   border-top: 1px solid #808080;
   border-bottom: 1px solid #fff;
 }
+
+/* Seletor de tema no menu Iniciar: submenu que abre ao lado. */
+.theme-submenu {
+  padding-left: 12px;
+}
+
+.theme-submenu button {
+  font-size: 11px;
+}
+
+.theme-active::before {
+  content: '‚2 ';
+}
+
+.start-label {
+  display: block;
+  padding: 3px 18px;
+  color: #555;
+  font-size: 11px;
+}
+
+/* --- Visualizador de Eventos --- */
+.event-list {
+  height: 260px;
+  overflow: auto;
+  background: #fff;
+  border: 1px solid #808080;
+  box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #dfdfdf;
+}
+
+.event-list table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 11px;
+}
+
+.event-list th {
+  position: sticky;
+  top: 0;
+  background: #c0c0c0;
+  border: 1px solid #808080;
+  box-shadow: inset 1px 1px 0 #fff;
+  padding: 2px 6px;
+  text-align: left;
+  font-weight: normal;
+}
+
+.event-list td {
+  padding: 2px 6px;
+  border-bottom: 1px solid #efefef;
+  vertical-align: top;
+}
+
+.event-icon {
+  width: 22px;
+  line-height: 0;
+}
+
+.event-time {
+  white-space: nowrap;
+  color: #555;
+}

From 2914496bb2a86aacf47e57c1e79465150f8931bc Mon Sep 17 00:00:00 2001
From: Renan Locatiz Fernandes <renan.fernandes@outlook.com>
Date: Fri, 21 Aug 2026 02:04:49 -0300
Subject: [PATCH 16/19] feat(frontend): esquemas de cores do Windows 95

Os cinco esquemas de Painel de Controle > Video: Windows padrao, Chocolate,
Ameixa, Deserto e Meia-noite. Nomes e cores sao os originais -- sao fatos sobre
um produto historico, nao arte copiada; o que nao da para reproduzir e o bitmap
dos papeis de parede, entao o fundo e gradiente CSS.

Trocar tema significa sobrescrever o que o 98.css assume fixo. Aplicado com
moderacao: so o fundo e a barra de titulo, que e o que muda de verdade entre os
esquemas. A escolha fica no localStorage.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 frontend/src/useTheme.ts | 115 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 115 insertions(+)
 create mode 100644 frontend/src/useTheme.ts

diff --git a/frontend/src/useTheme.ts b/frontend/src/useTheme.ts
new file mode 100644
index 0000000..b2f8c3b
--- /dev/null
+++ b/frontend/src/useTheme.ts
@@ -0,0 +1,115 @@
+import { useCallback, useEffect, useState } from 'react'
+
+/**
+ * Os esquemas de cores que vinham no Windows 95, em Painel de Controle > Video.
+ *
+ * Os nomes e as cores sao os originais da Microsoft -- sao fatos sobre um produto
+ * historico, nao arte copiada. O que nao da para reproduzir e o bitmap dos
+ * papeis de parede; aqui o fundo e gradiente CSS.
+ *
+ * `desktop` e o fundo, `face` e o cinza dos controles, `title` e o gradiente da
+ * barra de titulo ativa. O 98.css assume o esquema padrao, entao trocar tema
+ * significa sobrescrever as variaveis dele -- por isso os nomes batem com as
+ * custom properties aplicadas em `applyTheme`.
+ */
+export type ThemeName = 'padrao' | 'chocolate' | 'ameixa' | 'deserto' | 'meia-noite'
+
+type Theme = {
+  label: string
+  desktop: string
+  face: string
+  titleFrom: string
+  titleTo: string
+  titleText: string
+  text: string
+}
+
+export const THEMES: Record<ThemeName, Theme> = {
+  padrao: {
+    label: 'Windows padrão',
+    desktop: 'linear-gradient(160deg, #3a6ea5 0%, #008080 55%, #006060 100%)',
+    face: '#c0c0c0',
+    titleFrom: '#000080',
+    titleTo: '#1084d0',
+    titleText: '#ffffff',
+    text: '#000000',
+  },
+  chocolate: {
+    label: 'Chocolate',
+    desktop: 'linear-gradient(160deg, #5a3a22 0%, #804000 60%, #3d2010 100%)',
+    face: '#c8b8a8',
+    titleFrom: '#804000',
+    titleTo: '#c08040',
+    titleText: '#ffffff',
+    text: '#000000',
+  },
+  ameixa: {
+    label: 'Ameixa',
+    desktop: 'linear-gradient(160deg, #4b2d4b 0%, #804080 60%, #2d1a2d 100%)',
+    face: '#c8b0c8',
+    titleFrom: '#804080',
+    titleTo: '#c080c0',
+    titleText: '#ffffff',
+    text: '#000000',
+  },
+  deserto: {
+    label: 'Deserto',
+    desktop: 'linear-gradient(160deg, #a08040 0%, #c0a060 55%, #6a5020 100%)',
+    face: '#d8d0b0',
+    titleFrom: '#808000',
+    titleTo: '#c0c060',
+    titleText: '#000000',
+    text: '#000000',
+  },
+  'meia-noite': {
+    label: 'Meia-noite',
+    desktop: 'linear-gradient(160deg, #000020 0%, #101030 60%, #000010 100%)',
+    face: '#a0a0a0',
+    titleFrom: '#000000',
+    titleTo: '#404080',
+    titleText: '#ffffff',
+    text: '#000000',
+  },
+}
+
+const KEY = 'teamapp95.theme'
+
+function applyTheme(name: ThemeName) {
+  const theme = THEMES[name]
+  const root = document.documentElement.style
+  root.setProperty('--desktop-bg', theme.desktop)
+  root.setProperty('--surface', theme.face)
+  root.setProperty('--title-from', theme.titleFrom)
+  root.setProperty('--title-to', theme.titleTo)
+  root.setProperty('--title-text', theme.titleText)
+  root.setProperty('--text', theme.text)
+}
+
+export function useTheme() {
+  const [theme, setThemeState] = useState<ThemeName>(() => {
+    try {
+      const saved = localStorage.getItem(KEY)
+      if (saved && saved in THEMES) return saved as ThemeName
+    } catch {
+      /* modo privado: cai no padrao */
+    }
+    return 'padrao'
+  })
+
+  // Aplica no mount tambem, nao so na troca: o estado inicial vem do
+  // localStorage e as variaveis CSS precisam acompanhar.
+  useEffect(() => {
+    applyTheme(theme)
+  }, [theme])
+
+  const setTheme = useCallback((next: ThemeName) => {
+    setThemeState(next)
+    try {
+      localStorage.setItem(KEY, next)
+    } catch {
+      /* nao persiste, mas a sessao atual funciona */
+    }
+  }, [])
+
+  return { theme, setTheme, themes: THEMES }
+}

From c0d9dcfcf6cb86b8515a3d82b4625a7860b9ee17 Mon Sep 17 00:00:00 2001
From: Renan Locatiz Fernandes <renan.fernandes@outlook.com>
Date: Fri, 21 Aug 2026 02:04:50 -0300
Subject: [PATCH 17/19] docs: auditoria de acessibilidade

Vinte e dois achados com arquivo:linha, severidade e correcao proposta.

O bloqueante: o card e um <article draggable> sem tabIndex, sem onKeyDown e sem
role, aberto so por duplo-clique. Ele nao recebe foco, nao abre e nao se move
pelo teclado -- tabular por quatro listas toca doze controles e zero cards. A
funcao principal do app e inacessivel por teclado hoje.

O contraste de `.card-dimmed` foi medido, nao estimado: opacity 0.35 compoe
2,42:1, contra os 4,5:1 que a WCAG AA exige.

Documento e diagnostico, nao correcao -- as mudancas ficam para PRs proprios,
onde cada uma pode ser revista isoladamente.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 docs/ACESSIBILIDADE.md | 619 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 619 insertions(+)
 create mode 100644 docs/ACESSIBILIDADE.md

diff --git a/docs/ACESSIBILIDADE.md b/docs/ACESSIBILIDADE.md
new file mode 100644
index 0000000..572bbb1
--- /dev/null
+++ b/docs/ACESSIBILIDADE.md
@@ -0,0 +1,619 @@
+# Auditoria de acessibilidade — frontend
+
+Auditoria manual do código de `frontend/src/`, feita lendo `App.tsx`, `ListColumn.tsx`,
+`TrashWindow.tsx`, `Modal.tsx`, `CardDialog.tsx`, `ConfirmDialog.tsx`, `Minesweeper.tsx`,
+`ScreenSaver.tsx`, `useHotkeys.ts`, `icons.tsx`, `styles.css` e `index.html`. Referência:
+WCAG 2.2 nível AA.
+
+Este documento é só o diagnóstico. As correções ficam com a sessão `frontend` — nada aqui
+foi implementado.
+
+**O veredito curto:** o app tem *muita* coisa boa de acessibilidade em lugares periféricos
+(o Campo Minado é o componente mais acessível do repositório) e quase nada na função
+principal. **Não existe nenhuma forma de mover um card usando o teclado.** Um card nem
+sequer recebe foco. Isso não é um detalhe a polir — é o app inteiro sendo inutilizável para
+quem não usa mouse.
+
+## Resumo
+
+| # | Achado | Severidade | Arquivo |
+|---|---|---|---|
+| B1 | Card não é focável; mover/abrir card só por mouse | Bloqueante | `ListColumn.tsx:161` |
+| B2 | Reordenar e renomear lista só por mouse | Bloqueante | `ListColumn.tsx:94`, `:109` |
+| B3 | Ícone da Lixeira é um `<button>` que só responde a duplo-clique | Bloqueante | `App.tsx:215` |
+| B4 | Botão de apagar lista se anuncia como "Close" | Bloqueante | `ListColumn.tsx:117` |
+| S1 | Modal não prende o foco nem devolve o foco ao fechar | Sério | `Modal.tsx:12` |
+| S2 | Escape fecha os dois modais empilhados de uma vez | Sério | `Modal.tsx:13`, `App.tsx:337` |
+| S3 | Estado de conexão muda sem `aria-live` | Sério | `App.tsx:168` |
+| S4 | Barra de erro sem `role="alert"` | Sério | `App.tsx:206`, `TrashWindow.tsx:151` |
+| S5 | `.card-dimmed` fica em **2,42:1** — reprova AA (mínimo 4,5:1) | Sério | `styles.css:551` |
+| S6 | Campos de texto sem rótulo (só `placeholder`) | Sério | `App.tsx:194`, `ListColumn.tsx:220` |
+| S7 | Botões repetidos e indistinguíveis na Lixeira | Sério | `TrashWindow.tsx:91` |
+| S8 | Atalhos de uma letra sem como desligar (WCAG 2.1.4) | Sério | `useHotkeys.ts:21` |
+| S9 | Ordem de tabulação não segue a ordem visual | Sério | `App.tsx:215` + `styles.css:385` |
+| S10 | Busca não anuncia resultado nem marca o card que casou | Sério | `App.tsx:181`, `ListColumn.tsx:170` |
+| M1 | Ícones decorativos são anunciados (título por padrão) | Menor | `icons.tsx:75,171,190,225` |
+| M2 | Menu Iniciar sem `aria-expanded`/`haspopup`, sem Escape | Menor | `App.tsx:363` |
+| M3 | Lista (`<section>`) sem nome acessível; sem landmarks nem headings | Menor | `ListColumn.tsx:80`, `App.tsx:165` |
+| M4 | Badge de descrição invisível para leitor de tela | Menor | `ListColumn.tsx:196` |
+| M5 | `role="list"` envolvendo um `<ul>` na Lixeira | Menor | `TrashWindow.tsx:153` |
+| M6 | Vários textos pequenos abaixo de 4,5:1 | Menor | `styles.css:44,48,90,540,637` |
+| M7 | Campo Minado: bandeira só por botão direito; `role="grid"` sem `row`/`gridcell` | Menor | `Minesweeper.tsx:195,226` |
+| M8 | Indicador de foco fraco / suprimido no ícone de desktop | Menor | `styles.css:402` |
+| M9 | Protetor de tela não esconde o conteúdo abaixo dele | Menor | `ScreenSaver.tsx:45` |
+
+---
+
+## Bloqueantes
+
+### B1 — Não existe forma de mover ou abrir um card pelo teclado
+
+`frontend/src/ListColumn.tsx:161-198`. O card é um `<article draggable>`. Os únicos
+manipuladores são `onDragStart`, `onDragOver`, `onDrop` e `onDoubleClick`. Não há
+`tabIndex`, não há `onKeyDown`, não há `role`.
+
+Consequências concretas, todas verificáveis só pelo código:
+
+- **O card nunca recebe foco.** `<article>` não é focável por padrão e nada aqui o torna
+  focável. Tabular por um board de 4 listas com 10 cards cada toca exatamente 12 controles
+  (o botão de fechar de cada lista, o input e o botão "+" de cada lista) e **zero** cards.
+- **Abrir o card é impossível pelo teclado.** A única entrada é `onDoubleClick`
+  (`ListColumn.tsx:192`), que também é o único caminho para o diálogo de propriedades
+  (`App.tsx:253-259`) — logo editar título e descrição, e apagar um card, são funções
+  inalcançáveis sem mouse.
+- **Mover é impossível pelo teclado.** `draggable` + eventos HTML5 de drag são, na
+  prática, exclusivos de ponteiro; nenhum navegador oferece uma sequência de teclas
+  equivalente.
+
+O `CLAUDE.md` descreve o drag-and-drop como *a* função do app ("Drag-and-drop é HTML5
+nativo"). Com isso, **a função principal do app é inacessível por teclado** — e, por
+tabela, para leitores de tela, controle por voz e switch access. Isso reprova WCAG 2.1.1
+(Keyboard), 4.1.2 (Name, Role, Value) e, por causa do `onDoubleClick`, também 2.5.2
+(Pointer Cancellation).
+
+**Correção proposta — desenho de uma alternativa por teclado.** Não é preciso trocar a
+biblioteca nem abandonar o HTML5 drag: os dois caminhos podem coexistir sobre a mesma
+função `positionFor` que já existe em `frontend/src/api.ts:63`.
+
+1. **Tornar o card focável com *roving tabindex*.** Cada lista mantém "o card ativo":
+   ele fica com `tabIndex={0}`, os demais com `tabIndex={-1}`. O board inteiro consome um
+   único ponto de tabulação, em vez de N cards, e as setas navegam dentro dele.
+   O card ganha `role="option"` dentro de um `.list-body` com `role="listbox"`
+   (`aria-label={list.title}`), que é o par de papéis que descreve "coleção ordenada de
+   itens selecionáveis" sem inventar semântica nova.
+
+2. **Teclas dentro do board** (documentar na janela "Atalhos de teclado", `App.tsx:305`):
+
+   | Tecla | Ação |
+   |---|---|
+   | `↑` / `↓` | move o foco entre cards da lista |
+   | `←` / `→` | move o foco para a lista vizinha |
+   | `Enter` | abre as propriedades do card (o que hoje só o duplo-clique faz) |
+   | `Espaço` | **pega** o card / **solta** o card |
+   | `Delete` | manda o card para a Lixeira |
+   | `F2` | renomeia a lista (o que hoje só o duplo-clique na title bar faz) |
+
+3. **O modo "pegou".** Ao pressionar `Espaço`, o card entra em modo de movimento:
+   `aria-pressed="true"` no card e a mesma classe visual `.card.dragging` que o drag já
+   usa. Nesse modo `↑`/`↓` **não** movem o foco, movem o *slot de destino* — exatamente o
+   mesmo estado que `cardDropTarget` (`App.tsx:35`) já guarda, com o mesmo indicador
+   visual `.drop-here` (`styles.css:112`). `←`/`→` mudam a lista de destino.
+   `Espaço`/`Enter` confirmam e chamam `dropCard(list, index)` (`App.tsx:134`) — a mesma
+   função do drop de mouse, então a matemática de position fracionária não é duplicada.
+   `Escape` cancela e devolve o card ao lugar.
+
+4. **Anunciar cada passo.** Uma região `aria-live="assertive"` visualmente escondida
+   recebe, a cada tecla no modo "pegou", algo como
+   `"Comprar leite: posição 3 de 7 em A Fazer"`, e na confirmação
+   `"Comprar leite movido para Feito, posição 1 de 4"`. Sem isso o modo é invisível para
+   quem não vê o indicador.
+
+5. **Manter o mouse como está.** `draggable` continua; o modo por teclado só adiciona um
+   segundo caminho para a mesma chamada de API. Nenhuma mudança no backend.
+
+### B2 — Reordenar e renomear lista também são só de mouse
+
+`frontend/src/ListColumn.tsx:94-104` — a `.title-bar` é `draggable` e só tem
+`onDragStart`/`onDragEnd`. `ListColumn.tsx:109-112` — renomear é `onDoubleClick` no
+`.title-bar-text`, que é uma `<div>` sem `tabIndex` e sem `role`. Mesmo diagnóstico e
+mesma classe de correção do B1: `F2` para renomear a lista focada, e `Ctrl+←`/`Ctrl+→`
+(ou o modo "pegou" aplicado à lista) para reordenar, reaproveitando `dropList`
+(`App.tsx:145`).
+
+### B3 — O ícone da Lixeira é um botão que não funciona pelo teclado
+
+`frontend/src/App.tsx:215-232`:
+
+```jsx
+<button className="desktop-icon" onDoubleClick={() => setTrashOpen(true)} title="Lixeira (duplo-clique para abrir)">
+```
+
+É um `<button>` de verdade: entra na ordem de tabulação, recebe foco, tem estilo de foco
+próprio (`styles.css:402-406`) e se anuncia como botão. Mas o único manipulador é
+`onDoubleClick`. Pressionar `Enter` ou `Espaço` num botão dispara `click`, **nunca**
+`dblclick` — então o controle recebe foco, parece acionável e **não faz nada**. É pior do
+que não ser focável: promete uma ação que não existe. O `title` ainda instrui
+"duplo-clique para abrir", uma instrução impossível de seguir sem mouse.
+
+Existe um caminho alternativo (o atalho `T`, `App.tsx:89`, e o menu Iniciar,
+`App.tsx:408`), então a função não está perdida — mas o controle em si está quebrado, o
+que é uma falha 2.1.1 de qualquer jeito.
+
+**Correção:** adicionar `onClick={() => setTrashOpen(true)}` e manter o `onDoubleClick`
+para a fidelidade Win95 (o React não dispara os dois de forma conflitante aqui; se
+disparar, um guard por `detail === 2` resolve). Trocar o `title` por
+`aria-label={`Lixeira, ${trashCount} ${trashCount === 1 ? 'item' : 'itens'}`}`.
+
+### B4 — O botão que apaga a lista se anuncia como "Close"
+
+`frontend/src/ListColumn.tsx:117`:
+
+```jsx
+<button aria-label="Close" title="Apagar lista" onClick={() => props.onDelete(list)} />
+```
+
+O `aria-label` vence o `title` na computação do nome acessível, então um leitor de tela
+anuncia **"Close, botão"** para um controle que manda a lista e todos os seus cards para a
+Lixeira (`App.tsx:262-268`). O texto verdadeiro, que está em `title`, nunca é lido. Além
+disso o rótulo está em inglês numa interface em pt-BR declarada com `lang="pt-BR"`
+(`index.html:2`), então o sintetizador vai pronunciá-lo em português.
+
+Um usuário de leitor de tela pressionando o que ele acredita ser "fechar a janela" dispara
+uma ação destrutiva. Existe confirmação (`App.tsx:263`), o que impede o dano imediato —
+mas o diálogo então pergunta sobre uma ação que o usuário não pediu.
+
+**Correção:** `aria-label={`Apagar a lista ${list.title}`}` e remover o `title`
+redundante. O mesmo `aria-label="Close"` aparece em `Modal.tsx:33`, onde a ação *é*
+fechar; ali basta traduzir para `"Fechar"`.
+
+---
+
+## Sérios
+
+### S1 — O Modal não prende o foco, não move o foco para dentro e não devolve o foco ao fechar
+
+`frontend/src/Modal.tsx:12-40`. Os três problemas de foco de um diálogo, todos presentes:
+
+- **Não prende (focus trap).** O backdrop (`Modal.tsx:22`) é uma `<div>` comum; nada
+  marca o resto da página como `inert` ou `aria-hidden`. Tabular a partir do último botão
+  do diálogo leva o foco para os controles do board atrás dele — o usuário edita o
+  formulário de nova lista sem saber que há um diálogo aberto. Reprova 2.4.3.
+- **Não move o foco para dentro.** O `Modal` não foca nada ao montar. Dois consumidores
+  compensam por conta própria: `CardDialog.tsx:43` (`autoFocus` no input de título) e
+  `ConfirmDialog.tsx:25` (`autoFocus` no "Sim"). Os outros quatro não:
+  `TrashWindow.tsx:150`, `Minesweeper.tsx:176`, "Atalhos de teclado" (`App.tsx:306`) e
+  "Sobre" (`App.tsx:342`). Abrir a Lixeira com `T` deixa o foco no `<body>`: o usuário tem
+  de tabular pelo cabeçalho inteiro, pelo ícone de desktop e pelo board para chegar ao
+  diálogo — e como não há trap, ele nem percebe quando entrou nele.
+- **Não devolve o foco.** O `Modal` nunca guarda `document.activeElement` na montagem nem
+  o restaura na desmontagem. Fechar qualquer diálogo joga o foco para o `<body>` e a
+  próxima tabulação recomeça do topo do documento. Reprova 2.4.3.
+
+**Correção:** concentrar tudo no `Modal`, já que todos os diálogos passam por ele:
+guardar `document.activeElement` num ref no `useEffect` de montagem e chamar `.focus()`
+nele no cleanup; focar o primeiro elemento focável do diálogo (ou o próprio contêiner com
+`tabIndex={-1}`) ao montar; interceptar `Tab`/`Shift+Tab` no contêiner e circular dentro
+dele. Adicionar `aria-modal="true"` em `Modal.tsx:25` e trocar `aria-label={title}` por
+`aria-labelledby` apontando para o `.title-bar-text` de `Modal.tsx:31`, para que o nome do
+diálogo e o texto visível sejam a mesma coisa.
+
+### S2 — Escape fecha os dois modais empilhados ao mesmo tempo
+
+`frontend/src/Modal.tsx:13-19` registra o listener de `Escape` em `window`. Quando a
+Lixeira (`App.tsx:297`) pede uma confirmação, o `ConfirmDialog` (`App.tsx:337`) é montado
+como **irmão** dela, não como filho — então há dois `Modal` vivos e dois listeners em
+`window`. Um único `Escape` chama `onClose` dos dois: o usuário cancela a confirmação e
+perde a janela da Lixeira junto.
+
+Não é destrutivo, mas é exatamente o tipo de comportamento que faz um usuário de teclado
+desistir: a tecla de "voltar atrás" também desfaz o contexto. Reprova a expectativa de
+2.1.1/3.2 sobre operação previsível.
+
+**Correção:** o `Modal` mantém uma pilha de instâncias em um módulo (ou um contexto) e só
+a instância no topo responde ao `Escape`. Alternativa mais simples: chamar
+`event.stopPropagation()` num listener no contêiner do diálogo em vez de em `window`,
+deixando o evento morrer no diálogo mais interno — mas isso exige que o diálogo tenha o
+foco, o que hoje não é garantido (ver S1).
+
+### S3 — O estado de conexão muda em silêncio
+
+`frontend/src/App.tsx:168-170`:
+
+```jsx
+<span className={connected ? 'status online' : 'status offline'}>
+  {connected ? 'conectado' : 'reconectando...'}
+</span>
+```
+
+O texto troca sozinho quando o WebSocket cai (`useBoard.ts:151-156`), sem `role="status"`
+nem `aria-live`. Um leitor de tela nunca é informado de que a conexão caiu — ou seja, de
+que o board na tela pode estar desatualizado e que as mutações dos colegas não estão mais
+chegando. Para um app cujo modelo inteiro é "o estado se mantém pelo WebSocket"
+(`CLAUDE.md`), esse é o aviso mais importante da tela.
+
+**Correção:** `role="status"` (que já implica `aria-live="polite"`) no `<span>`, com o
+texto completo em vez de abreviado: `"Conectado ao servidor"` / `"Conexão perdida,
+reconectando"`. Vale também `aria-live="polite"` na `.tray` (`App.tsx:444`) ou, melhor,
+não — a contagem de cards muda a cada evento e viraria tagarelice.
+
+### S4 — Erros aparecem sem `role="alert"`
+
+`frontend/src/App.tsx:206-213` monta a barra de erro condicionalmente. `useBoard.ts:177`
+preenche `error` em **toda** mutação que falha, e o `api.ts:21` monta a mensagem com o
+detalhe do backend. Nada disso é anunciado: sem `role="alert"`/`aria-live="assertive"`,
+o conteúdo inserido dinamicamente é ignorado pelo leitor de tela. O usuário aperta um
+botão, a chamada falha (por exemplo, um `409` ao restaurar um card cuja lista está na
+lixeira) e, pelo que ele percebe, nada aconteceu.
+
+Agrava: a barra é inserida **entre** o cabeçalho e o board (`App.tsx:206`), então o botão
+"OK" que a dispensa (`App.tsx:210`) aparece na ordem de tabulação muito antes de onde o
+usuário estava. Mesmo problema em `TrashWindow.tsx:151` (`<p className="trash-error">`).
+
+**Correção:** `role="alert"` no contêiner da barra em `App.tsx:207` e no `<p>` de
+`TrashWindow.tsx:151`. Como o `role="alert"` só anuncia quando o *conteúdo* muda, e aqui o
+nó inteiro é montado e desmontado, o mais seguro é manter o contêiner sempre montado com
+`role="alert"` e alternar apenas o texto interno. Mover o foco para o botão "OK" quando um
+erro surge é uma opção mais forte, mas rouba o foco — prefira o anúncio.
+
+### S5 — `.card-dimmed` reprova AA: 2,42:1
+
+`frontend/src/styles.css:551-553`:
+
+```css
+.card-dimmed { opacity: 0.35; }
+```
+
+`opacity` compõe o **grupo inteiro** (fundo do card + texto) contra o que está atrás.
+Cálculo com os valores reais do app:
+
+- texto: `#222` (padrão do `98.css` no `body`), sobre fundo de card `#fff` (`styles.css:97`)
+- atrás do card: a `.window-body` da lista, `#c0c0c0` do `98.css`
+
+Composição a `α = 0.35`:
+
+| | fórmula | resultado |
+|---|---|---|
+| texto | `0.35 × 34 + 0.65 × 192` | `rgb(137,137,137)` |
+| fundo | `0.35 × 255 + 0.65 × 192` | `rgb(214,214,214)` |
+
+Luminâncias relativas: `L_texto = 0,2502`, `L_fundo = 0,6724`.
+
+**Contraste = (0,6724 + 0,05) / (0,2502 + 0,05) = 2,41 : 1.**
+
+O mínimo de WCAG AA (1.4.3) é **4,5:1** para texto normal e **3:1** para texto grande.
+O texto do card é o tamanho padrão do `98.css` (11px), portanto texto normal — reprova por
+larga margem, e reprova até o limite mais frouxo de texto grande.
+
+Não é um caso de "só decorativo": o card esmaecido continua sendo conteúdo real e continua
+sendo o alvo de um drop. O comentário do código deixa claro que isso é intencional
+(`ListColumn.tsx:168-170`: "esconder os que não casam mudaria os vizinhos e quebraria o
+cálculo de position") — a decisão de não filtrar está certa, o meio escolhido é que não
+está.
+
+**Opacidade necessária para atingir 4,5:1**, nesse mesmo par de cores:
+
+| opacity | texto | fundo | contraste |
+|---|---|---|---|
+| 0,35 (atual) | 137 | 214 | **2,42:1** ✗ |
+| 0,50 | 113 | 224 | 3,68:1 ✗ |
+| 0,55 | 105 | 227 | 4,26:1 ✗ |
+| 0,58 | 100 | 229 | 4,65:1 ✓ |
+| 0,60 | 97 | 230 | 4,94:1 ✓ |
+
+**Correção recomendada (melhor que ajustar a opacidade):** parar de usar `opacity` e
+fazer a distinção com uma diferença que não degrade o texto — realçar apenas quem casa,
+que é o que `.card-match` (`styles.css:545-549`) já faz muito bem (outline `#000080` +
+fundo `#ffffcc`), e deixar os demais **intactos**. Se ainda assim for necessário rebaixar
+os não-casantes visualmente, use `filter: saturate(0)` ou uma borda mais clara, nunca
+`opacity` sobre o texto. Se a opacidade for mantida por gosto estético, `0.6` é o piso.
+
+E, independentemente do contraste: a distinção casou/não-casou é hoje **exclusivamente
+visual** (S10).
+
+### S6 — Campos de texto sem rótulo
+
+- `App.tsx:194-199` — o input de "Nova lista" tem `placeholder="Nova lista... (N)"` e
+  nenhum `<label>`, `aria-label` ou `aria-labelledby`. `placeholder` não é um nome
+  acessível confiável (varia entre navegador e AT) e some assim que o usuário digita, o
+  que também é uma falha de 3.3.2.
+- `ListColumn.tsx:220-225` — o input de "Novo card..." tem o mesmo problema, **por lista**.
+  Num board de 4 listas o leitor de tela encontra quatro caixas de texto idênticas, sem
+  nada que diga a qual lista cada uma pertence.
+- `ListColumn.tsx:226-228` — o botão de submit desse formulário tem como conteúdo inteiro
+  a string `+`, então o nome acessível é "mais". Quatro botões chamados "mais".
+- `ListColumn.tsx:123-136` — o input de renomear também não tem rótulo (tem `autoFocus`,
+  o que ajuda, mas o usuário não é avisado do que está editando).
+
+Note que o campo de busca (`App.tsx:172-179`) **tem** `aria-label="Buscar cards"`. O padrão
+existe no repositório; só não foi aplicado nos outros campos.
+
+**Correção:** `aria-label="Nova lista"` em `App.tsx:194`;
+`aria-label={`Novo card em ${list.title}`}` em `ListColumn.tsx:221` e
+`aria-label={`Adicionar card em ${list.title}`}` no botão de `ListColumn.tsx:226`;
+`aria-label={`Renomear a lista ${list.title}`}` em `ListColumn.tsx:124`.
+
+### S7 — Os botões da Lixeira são indistinguíveis entre si
+
+`frontend/src/TrashWindow.tsx:91-109` e `126-144`. Cada linha da lixeira tem dois botões
+cujo texto é apenas "Restaurar" e "Excluir". Navegando por botões (tecla `B` no NVDA,
+rotor no VoiceOver) o usuário ouve "Restaurar, Excluir, Restaurar, Excluir, ..." sem
+nenhuma pista de qual item está em qual. Como o segundo é irreversível
+(`docs/API.md`: "Apaga **de verdade**, irreversível"), isso é sério.
+
+**Correção:** `aria-label={`Restaurar o card "${card.title}"`}` e
+`aria-label={`Excluir permanentemente o card "${card.title}"`}` (e o par equivalente para
+listas em `TrashWindow.tsx:127` e `133`). Vale também ligar o aviso de `.trash-blocked`
+(`TrashWindow.tsx:84-88`) ao botão desabilitado por `aria-describedby`; hoje o texto está
+adjacente no DOM, o que salva o caso, mas o `title` do botão (`TrashWindow.tsx:93`) nunca é
+anunciado porque botões `disabled` saem da árvore de foco.
+
+### S8 — Atalhos de uma única letra, sem como desligar
+
+`frontend/src/useHotkeys.ts:21-44`, configurado em `App.tsx:84-95`: `n`, `t`, `r`, `/`,
+`?`, sem modificador. WCAG 2.1.4 (Character Key Shortcuts, nível A) exige que atalhos de
+caractere único possam ser **desligados**, **remapeados**, ou fiquem **restritos ao
+componente com foco**. Nenhuma das três condições é atendida — `useHotkeys.ts:38` registra
+em `window` e a única desativação é automática (modal aberto, `App.tsx:83`, ou foco num
+campo, `useHotkeys.ts:27`).
+
+Na prática isso quebra leitores de tela de duas formas: no modo de navegação do NVDA/JAWS
+as letras são teclas de salto rápido (`t` = próxima tabela, `n` = pular links) e vão
+disputar com o app; e usuários de reconhecimento de voz emitem letras isoladas o tempo
+todo. `r` recarregando o board e `t` abrindo a Lixeira são efeitos colaterais surpresa.
+
+**Correção:** exigir um modificador (`Ctrl`/`Alt`) para as letras — `ctrl+f` já existe
+(`App.tsx:88`) e é o modelo certo — ou adicionar uma preferência "desligar atalhos" no
+menu Iniciar, persistida em `localStorage`, e citá-la na janela de atalhos
+(`App.tsx:305-335`). `/` e `?` são menos problemáticos porque não são teclas de salto,
+mas se beneficiam da mesma preferência.
+
+### S9 — A ordem de tabulação não segue a ordem visual
+
+A ordem no DOM (`App.tsx:164-457`) é: cabeçalho → barra de erro → **ícone da Lixeira** →
+board → modais → taskbar. Mas o ícone da Lixeira é `position: fixed; left: 12px;
+bottom: 44px` (`styles.css:385-390`): ele aparece no **canto inferior esquerdo** da tela e
+é o **terceiro** parada da tabulação. O foco pula do topo da tela para a base, e volta
+para o meio. Reprova 2.4.3 (Focus Order).
+
+O board em si (`App.tsx:234`) tem tabulação esparsa e ilógica pelo B1: dentro de cada
+lista o foco vai do botão de apagar direto para o input de novo card, atravessando todos
+os cards sem parar em nenhum.
+
+Não há **skip link** e não há landmarks: `.desktop`, `.board-header` e `.board` são todas
+`<div>`s (`App.tsx:165`, `:166`, `:234`). Não há `<main>`, `<header>` nem `<nav>`, então
+não há como pular direto para o conteúdo. Único heading da página é o `<h1>` do título do
+board (`App.tsx:167`).
+
+**Correção:** mover o `<button className="desktop-icon">` para logo antes da `.taskbar`
+no JSX (`App.tsx:362`), preservando o `position: fixed` — a posição visual não muda e a
+ordem passa a bater. Trocar `.board-header` por `<header>`, `.board` por `<main>` e a
+`.taskbar` por `<nav aria-label="Barra de tarefas">`, e dar `<h2>` ao título de cada lista
+(ver M3).
+
+### S10 — A busca não anuncia nada e o card que casou não é marcado semanticamente
+
+Dois pontos, mesma causa:
+
+- `App.tsx:180-184` — o contador `"{matches?.size} de {cardCount}"` aparece e se atualiza a
+  cada tecla digitada, sem `aria-live`. Quem não vê a tela digita a busca e não recebe
+  retorno nenhum sobre se algo casou.
+- `ListColumn.tsx:170` — a distinção entre casou e não casou é feita só pelas classes
+  `.card-match` / `.card-dimmed`, ou seja, só por outline, cor de fundo e opacidade. Nada
+  na árvore de acessibilidade diz que aquele card é um resultado da busca. Como a busca
+  **realça em vez de filtrar** (decisão certa, ver `ListColumn.tsx:168-169`), sem marcação
+  semântica o recurso simplesmente não existe para o leitor de tela: os 40 cards continuam
+  todos lá, iguais. Reprova 1.4.1 (Use of Color) e 1.3.1.
+
+**Correção:** `role="status"` no `<span className="search-count">` (`App.tsx:181`), com o
+texto por extenso (`"3 de 40 cards encontrados"`). E, no card, quando há busca ativa,
+`aria-current={matches.has(card.id) ? 'true' : undefined}` mais um sufixo em texto
+visualmente escondido (`"— resultado da busca"`) no `.card-title` — ou, se o card virar
+`role="option"` conforme o B1, `aria-selected`.
+
+---
+
+## Menores
+
+### M1 — Ícones decorativos são anunciados porque o `title` tem valor padrão
+
+O wrapper `Svg` em `frontend/src/icons.tsx:41-63` está **certo**: com `title` ele emite
+`role="img"` + `aria-label`; sem `title`, emite `aria-hidden` + `focusable="false"`. É
+exatamente o comportamento desejado.
+
+O problema é que quase todo ícone declara um `title` **padrão**, então o modo decorativo
+nunca é o padrão de fato: `TrashEmptyIcon` (`icons.tsx:75`, `'Lixeira vazia'`),
+`TrashFullIcon` (`:101`), `FolderIcon` (`:171`, `'Pasta'`), `DocumentIcon` (`:190`,
+`'Documento'`), `HourglassIcon` (`:206`), `WarningIcon` (`:225`), `BombIcon` (`:241`),
+`FlagIcon` (`:261`). Consequências nos pontos de uso:
+
+- `App.tsx:221` — o ícone dentro do botão da Lixeira anuncia "Lixeira cheia, imagem" e
+  logo em seguida o texto visível "Lixeira / 3 itens" (`App.tsx:223-231`). Duplicado.
+- `TrashWindow.tsx:76-78` e `:117-119` — **cada linha** da lixeira começa com
+  "Documento, imagem" ou "Pasta, imagem" antes do título. Com 12 itens, 12 anúncios
+  inúteis; e a informação já está no texto ("card de ...", "lista com N card(s)").
+- `App.tsx:449` — o `TrashFullIcon` da bandeja anuncia "Lixeira cheia" no meio de
+  "3 listas · 12 cards · 3".
+
+Feito certo em `Minesweeper.tsx:231-241`: os ícones ficam dentro de um
+`<span aria-hidden="true">`, então o pai os esconde e o `aria-label` do botão
+(`Minesweeper.tsx:224`) descreve a célula inteira. `App.tsx:370` (`WindowsFlagIcon`, sem
+`title`) também está certo.
+
+**Correção:** remover os valores padrão de `title` em `icons.tsx` — decorativo passa a ser
+o padrão e quem precisa de rótulo passa `title` explicitamente no ponto de uso. Isso
+inverte o default para o lado seguro sem mexer no wrapper, que já está bem feito.
+(`icons.tsx:54` combina `role="presentation"` com `aria-hidden`: redundante, mas
+inofensivo.)
+
+### M2 — Menu Iniciar sem semântica de menu
+
+`App.tsx:363-372` — o botão "Iniciar" não tem `aria-expanded` nem `aria-haspopup`, então
+não há como saber que ele abre algo nem se está aberto. `App.tsx:375-441` — o menu é uma
+`<div className="window">` com `<ul><li><button>`; não tem `role="menu"`/`menuitem`, o foco
+não é movido para dentro ao abrir nem devolvido ao botão ao fechar, e o fechamento por
+clique fora (`App.tsx:98-103`) escuta só `click` — **`Escape` não fecha o menu Iniciar**.
+
+**Correção:** `aria-expanded={startOpen}` e `aria-haspopup="true"` no botão; focar o
+primeiro item ao abrir e devolver o foco ao botão ao fechar; um listener de `Escape`
+enquanto aberto; setas `↑`/`↓` entre os itens. Manter `<ul>/<li>/<button>` é aceitável
+(uma "lista de botões" é mais tolerante que um `role="menu"` mal implementado) — o que
+falta mesmo é o foco e o Escape.
+
+### M3 — Lista sem nome acessível; página sem landmarks e sem headings
+
+`ListColumn.tsx:80` — `<section className={className}>` sem `aria-label` nem
+`aria-labelledby`. Um `<section>` sem nome acessível **não** vira landmark: ele é ignorado
+pela navegação por regiões. O nome existe visualmente, em `ListColumn.tsx:113-115`, mas não
+está ligado a nada. `ListColumn.tsx:162` — o card é `<article>`, que também não tem nome.
+
+Com isso um leitor de tela não consegue nem enumerar as listas do board, nem pular de uma
+para a outra.
+
+**Correção:** dar um `id` ao `.title-bar-text` (`ListColumn.tsx:106`) e apontar
+`aria-labelledby` da `<section>` para ele; ou simplesmente
+`aria-label={`${list.title}, ${list.cards.length} cards`}`. Envolver o título da lista num
+`<h2>` cria também uma estrutura de headings navegável, hoje inexistente abaixo do `<h1>`
+de `App.tsx:167`.
+
+### M4 — O badge de "tem descrição" é invisível para AT
+
+`ListColumn.tsx:196`:
+
+```jsx
+{card.description && <span className="card-badge" title={card.description} />}
+```
+
+Um `<span>` vazio de 6×6px (`styles.css:234-241`). Elementos inline vazios não são
+expostos na árvore de acessibilidade, então o único sinal de que o card tem descrição —
+e a própria descrição, carregada no `title` — é inalcançável. Reprova 1.4.1: a informação é
+transmitida só por um elemento gráfico.
+
+**Correção:** ou incluir a informação no nome acessível do card
+(`aria-label={`${card.title}${card.description ? ', tem descrição' : ''}`}`), ou trocar o
+`<span>` por texto escondido visualmente. Depende do B1 para que o card tenha um nome de
+verdade.
+
+### M5 — `role="list"` envolvendo um `<ul>`
+
+`TrashWindow.tsx:153` — `<div className="trash-list" role="list">` contém, em
+`TrashWindow.tsx:157`, um `<ul>` que já é uma lista. Resultado: duas listas aninhadas, e a
+externa sem nenhum filho `role="listitem"` (os `<li>` pertencem à `<ul>` interna), o que é
+uma estrutura ARIA inválida. Alguns leitores anunciam "lista com 0 itens" antes da lista
+real.
+
+**Correção:** remover o `role="list"` da `<div>` — ela é só o contêiner de scroll
+(`styles.css:426-433`). Aproveitar para dar um nome à `<ul>`:
+`aria-label="Itens na lixeira"`.
+
+### M6 — Contrastes de texto pequeno abaixo de AA
+
+Cálculos sobre os pares reais do CSS:
+
+| Elemento | Cor | Fundo | Contraste | AA (4,5:1) |
+|---|---|---|---|---|
+| `.status.online` (`styles.css:44`) | `#006600` | `#c0c0c0` | 3,98:1 | ✗ |
+| `.status.offline` (`styles.css:48`) | `#a00` | `#c0c0c0` | 4,26:1 | ✗ |
+| `.empty` "(vazia)" (`styles.css:90`) | `#666` | `#c0c0c0` | 3,16:1 | ✗ |
+| `.search-count` (`styles.css:540`) | `#333` | `#008080` (desktop) | 2,65:1 | ✗ |
+| `.screensaver-hint` (`styles.css:637`) | `#444` | `#000` | 2,16:1 | ✗ |
+| `.crash-detail` (`styles.css:177`) | `#a00` | `#c0c0c0` | 4,26:1 | ✗ |
+| `.trash-info small` (`styles.css:473`) | `#555` | `#fff` | 7,46:1 | ✓ |
+| `.trash-blocked` (`styles.css:479`) | `#a00` | `#fff` | 7,75:1 | ✓ |
+| `h1` do board (`styles.css:26`) | `#fff` | `#008080` | 4,77:1 | ✓ |
+
+Todos esses textos são de 11px, portanto "texto normal" — o limite frouxo de 3:1 para
+texto grande não se aplica a nenhum.
+
+O caso do `.status` é o mais relevante, porque é o indicador de conexão (ver S3) e porque
+ele usa **cor sozinha** para diferenciar conectado de reconectando (verde vs. vermelho) —
+o texto muda junto, o que salva 1.4.1, mas a cor não ajuda ninguém a 3,98:1.
+
+**Correção:** escurecer para valores que passem sobre `#c0c0c0` — `#004d00` dá ~5,3:1 e
+`#8b0000` dá ~5,6:1; `.empty` para `#595959` (~4,6:1); `.search-count` para `#fff` com
+`text-shadow`, como o `h1` ao lado dele já faz (`styles.css:32`); `.screensaver-hint` para
+`#777` (~4,7:1 sobre preto). São mudanças de um dígito hex e não afetam a estética Win95.
+
+### M7 — Campo Minado: bandeira só por botão direito
+
+`Minesweeper.tsx:226-229` — marcar bandeira é `onContextMenu`. O menu de contexto pode ser
+aberto pela tecla ⌸ (Menu) ou `Shift+F10` na maioria dos navegadores, então tecnicamente há
+um caminho — mas é obscuro e não está documentado no `role="status"` de
+`Minesweeper.tsx:247-253`, que instrui "botão direito para marcar bandeira".
+`Minesweeper.tsx:195` usa `role="grid"` com 81 `<button>` filhos diretos, sem `role="row"`
+nem `role="gridcell"`: estrutura de grid inválida, que alguns leitores reportam como grid
+vazio.
+
+No resto, este é o melhor componente do repositório em acessibilidade:
+`aria-label` por célula com linha, coluna e estado (`Minesweeper.tsx:203-212`), ícones
+corretamente escondidos (`:231`), `role="status"` no aviso (`:247`), displays rotulados
+(`:179`, `:190`). Serve de referência para o resto do app.
+
+**Correção:** aceitar também `f` ou `Shift+Enter` num `onKeyDown` da célula, e mencionar na
+dica; e ou envolver cada linha num `<div role="row">` com `role="gridcell"` nos botões, ou
+trocar `role="grid"` por `role="group"`.
+
+### M8 — Indicador de foco fraco
+
+`styles.css:402-406` aplica ao ícone da Lixeira `outline: none` e substitui por
+`border-color: #fff` num `border: 1px dotted` — e usa **o mesmo estilo** para `:hover` e
+`:focus-visible`, o que impede distinguir "o mouse está por cima" de "o foco está aqui".
+Uma borda pontilhada de 1px sobre um fundo texturizado é um indicador fraco perto do
+requisito de 2.4.11/2.4.13.
+
+Nos demais controles o app não define nada e herda o anel pontilhado do `98.css` — que é
+fiel ao Windows 95 mas tem baixíssimo contraste sobre `#c0c0c0`. Nenhum outro elemento tem
+`:focus-visible` no `styles.css`.
+
+**Correção:** um `:focus-visible { outline: 2px solid #000080; outline-offset: 1px }`
+global sobre botões, inputs e (depois do B1) cards, distinto do `:hover`.
+
+### M9 — O protetor de tela não esconde o que está atrás
+
+`ScreenSaver.tsx:44-52` cobre a tela com `position: fixed; inset: 0; z-index: 100`
+(`styles.css:593-604`) e `role="presentation"`, mas não marca o conteúdo abaixo como
+`aria-hidden`/`inert`. Um leitor de tela continua lendo o board inteiro por trás de uma
+tela preta, e `Tab` move o foco para controles invisíveis. Como qualquer `keydown` dispensa
+o protetor (`ScreenSaver.tsx:32`), o impacto prático é pequeno.
+
+Vale registrar o acerto: `styles.css:650-654` respeita `prefers-reduced-motion` e para a
+animação de deriva — é a única mídia de preferência do repositório e está correta.
+
+---
+
+## O que já está certo
+
+Vale dizer, porque não é comum: `index.html:2` declara `lang="pt-BR"`;
+`prefers-reduced-motion` é respeitado (`styles.css:650`); o `Svg` de `icons.tsx:41-63` tem
+o mecanismo correto de decorativo vs. informativo (só o default é que está invertido);
+`CardDialog.tsx:38` e `:52` usam `<label for>` de verdade, ligados por `id`; `Escape` fecha
+os diálogos (`Modal.tsx:13`); `CardDialog` e `ConfirmDialog` movem o foco inicial;
+`ConfirmDialog` substitui `window.confirm` por um diálogo real, com o botão seguro
+("Não") separado do destrutivo; e o Campo Minado inteiro (`Minesweeper.tsx`) é um exemplo
+de como o board deveria ter sido escrito.
+
+## Ordem sugerida de trabalho
+
+1. **B1 + B2** — a alternativa por teclado para mover/abrir/renomear. É o item que muda o
+   app de "inacessível" para "acessível", e os outros bloqueantes são pequenos perto dele.
+2. **B3, B4** — dois `aria-label` e um `onClick`. Meia hora, impacto grande.
+3. **S1, S2** — foco no `Modal`; conserta seis diálogos de uma vez.
+4. **S3, S4, S10** — `role="status"` / `role="alert"`; três linhas cada.
+5. **S5, S6, S7, M6** — contraste e rótulos.
+6. **S8, S9, M1–M9** — o resto.
+
+## Anexo: como os contrastes foram calculados
+
+Fórmula de WCAG 2.x. Para cada canal `c ∈ {R,G,B}` normalizado em `[0,1]`:
+
+```
+lin(c) = c/12.92                    se c ≤ 0,03928
+lin(c) = ((c + 0,055)/1,055)^2,4    caso contrário
+
+L = 0,2126·lin(R) + 0,7152·lin(G) + 0,0722·lin(B)
+contraste = (L_claro + 0,05) / (L_escuro + 0,05)
+```
+
+Para o `.card-dimmed`, a cor efetiva é a composição alfa do card sobre o fundo da lista,
+canal a canal: `resultado = frente × α + fundo × (1 − α)`, com `α = 0,35`,
+frente do texto `#222` (do `98.css`), frente do fundo `#fff` (`styles.css:97`), e fundo
+`#c0c0c0` (`.window-body` do `98.css`).

From 1ea9bedb68d0bc8747fabd12e655a9f4d51ce068 Mon Sep 17 00:00:00 2001
From: Renan Locatiz Fernandes <renan.fernandes@outlook.com>
Date: Fri, 21 Aug 2026 02:05:29 -0300
Subject: [PATCH 18/19] feat(backend): instrumenta as rotas da lixeira no log
 de atividade

Ficaram de fora do commit anterior. Restaurar e apagar definitivamente sao
justamente as acoes que mais interessam num log de auditoria -- sao as que o
usuario nao consegue desfazer.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 backend/src/routes/trash.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/backend/src/routes/trash.ts b/backend/src/routes/trash.ts
index 18dacb9..110d8f5 100644
--- a/backend/src/routes/trash.ts
+++ b/backend/src/routes/trash.ts
@@ -1,6 +1,7 @@
 import type { FastifyInstance } from 'fastify'
 import { prisma } from '../db.js'
 import { broadcast } from '../bus.js'
+import { record } from '../activity.js'
 import { ALIVE, broadcastTrash, trashCounts } from '../trash.js'
 
 const CARD_ORDER = [{ position: 'asc' as const }, { id: 'asc' as const }]
@@ -69,6 +70,7 @@ export async function trashRoutes(app: FastifyInstance) {
     // `card.created`, nao um `card.restored` novo: o cliente ja faz upsert por id
     // com esse evento, entao restaurar aparece no board sem mudanca no frontend.
     broadcast('card.created', restored)
+    await record('card.restored', `Card "${card.title}" restaurado da lixeira`)
     await broadcastTrash()
     return restored
   })
@@ -88,6 +90,7 @@ export async function trashRoutes(app: FastifyInstance) {
     })
 
     broadcast('list.created', list)
+    await record('list.restored', `Lista "${list.title}" restaurada da lixeira`)
     await broadcastTrash()
     return list
   })
@@ -98,6 +101,8 @@ export async function trashRoutes(app: FastifyInstance) {
     if (!exists) return reply.code(404).send({ error: 'card nao esta na lixeira' })
 
     await prisma.card.delete({ where: { id } })
+    // `exists` foi capturado antes do delete: depois dele nao ha linha para ler.
+    await record('card.purged', `Card "${exists.title}" apagado definitivamente`)
     // Sem `card.deleted`: para o board o card ja tinha sumido no soft delete.
     await broadcastTrash()
     return reply.code(204).send()
@@ -111,6 +116,7 @@ export async function trashRoutes(app: FastifyInstance) {
     // Cascade do schema leva os cards junto, inclusive os que estavam na lixeira
     // sozinhos -- a lista de origem deles deixou de existir.
     await prisma.list.delete({ where: { id } })
+    await record('list.purged', `Lista "${exists.title}" apagada definitivamente`)
     await broadcastTrash()
     return reply.code(204).send()
   })
@@ -133,6 +139,10 @@ export async function trashRoutes(app: FastifyInstance) {
     await prisma.list.deleteMany({ where: { deletedAt: { not: null } } })
     await prisma.card.deleteMany({ where: { deletedAt: { not: null } } })
 
+    await record(
+      'trash.emptied',
+      `Lixeira esvaziada: ${cards} card(s) e ${lists} lista(s) apagados`,
+    )
     await broadcastTrash()
     return reply.send({ deleted: { cards, lists } })
   })

From c1ff22f558da73655ea19b779b0da35b594b1b4e Mon Sep 17 00:00:00 2001
From: Renan Locatiz Fernandes <renan.fernandes@outlook.com>
Date: Fri, 21 Aug 2026 02:06:05 -0300
Subject: [PATCH 19/19] docs: activity, stats e a regra de concorrencia da
 position

Documenta as rotas novas e, principalmente, a invariante que o race expos: toda
rota que calcula position a partir do estado atual precisa envolver leitura e
escrita em serialize(). O sintoma quando se esquece disso e o drag parar de
funcionar sem nenhum erro aparente.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 CLAUDE.md   | 16 +++++++++++++++-
 docs/API.md | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index ac8e99e..95d62f4 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -76,7 +76,7 @@ A consequência é que o cliente precisa aplicar todo evento como um **upsert id
 
 Formato: `{ "type": "card.moved", "payload": { ... } }`. O payload de movimento é só `{ id, listId, position }`, nunca o board inteiro.
 
-Eventos: `list.created`, `list.updated`, `list.deleted`, `card.created`, `card.updated`, `card.moved`, `card.deleted`, `trash.updated`.
+Eventos: `list.created`, `list.updated`, `list.deleted`, `card.created`, `card.updated`, `card.moved`, `card.deleted`, `trash.updated`, `activity.recorded`.
 
 ### A Lixeira: DELETE é soft delete
 
@@ -98,6 +98,16 @@ já aplica esses eventos como upsert por `id`, então o item reaparece sem mudan
 reducer. `trash.updated` carrega **só a contagem** `{ cards, lists }` — o conteúdo vem de
 `GET /api/trash` quando a janela abre.
 
+### Concorrencia: ler-e-inserir precisa ser atomico
+
+Toda rota que calcula uma position a partir do estado atual (`POST /api/cards`,
+`POST /api/lists` — ambas fazem "ultima + 1") tem que envolver a leitura **e** a
+escrita em `serialize()` de `backend/src/serialize.ts`. Sem isso duas criacoes
+simultaneas leem a mesma "ultima" e nascem empatadas, e dois itens empatados
+tornam o drag entre eles inoperante: `positionFor()` devolve `(a+b)/2 === a`, o
+servidor responde 200 e o card nao se move. O desempate por `id` esconde o
+sintoma. Detalhes no fim de `docs/API.md`.
+
 ### API REST
 
 Contrato completo, com formatos de payload e códigos de erro, em **`docs/API.md`**. Resumo:
@@ -119,6 +129,10 @@ POST   /api/trash/lists/:id/restore
 DELETE /api/trash/cards/:id           apaga de vez
 DELETE /api/trash/lists/:id           apaga de vez
 DELETE /api/trash                     esvaziar lixeira
+
+GET    /api/activity?limit=50         log de atividade, mais recente primeiro
+DELETE /api/activity                  limpa o log
+GET    /api/stats                     contagens e agregados do board
 ```
 
 `GET /api/board` é a única leitura de que o frontend precisa; depois dela o estado se mantém pelo WebSocket. Não crie endpoints `GET` por recurso individual sem necessidade real.
diff --git a/docs/API.md b/docs/API.md
index 6e39c0b..b7497ba 100644
--- a/docs/API.md
+++ b/docs/API.md
@@ -116,6 +116,25 @@ não funciona — use `DELETE /api/cards/:id`).
 #### `DELETE /api/trash`
 Esvaziar Lixeira. Apaga tudo de vez. `200 { deleted: { cards, lists } }` · evento `trash.updated`.
 
+### Log de atividade e estatisticas
+
+#### `GET /api/activity?limit=50`
+Log append-only de toda mutacao, mais recente primeiro. `limit` aceita 1..200
+(default 50); fora disso e `400`. Resposta: `{ items: [{ id, type, summary, createdAt }], limit, total }`.
+
+`summary` ja vem formatado (`Card "Gravar um CD-R" movido para "Feito"`) — o cliente
+imprime a frase, nunca a remonta a partir de ids.
+
+Gravar log **nunca derruba a mutacao principal**: se o insert falhar, o servidor loga
+e segue. Um log de auditoria que quebra a escrita e pior do que nao ter log.
+
+#### `DELETE /api/activity`
+Limpa o log. `200 { deleted: n }`. Idempotente.
+
+#### `GET /api/stats`
+`{ lists, cards, trashedCards, trashedLists, cardsPerList, oldestCard, newestCard, avgCardsPerList }`.
+Só conta itens vivos.
+
 ## WebSocket
 
 `ws://localhost:3001/ws`. Sem handshake, sem subscribe: ao conectar você recebe todo evento subsequente.
@@ -137,6 +156,7 @@ a regra de que o payload nunca é o estado todo.
 | `card.moved` | `{ id, listId, position }` |
 | `card.deleted` | `{ id }` |
 | `trash.updated` | `{ cards, lists }` — só a contagem |
+| `activity.recorded` | `{ id, type, summary, createdAt }` |
 
 Se a conexão cair, o cliente deve reconectar com backoff e refazer `GET /api/board` ao reconectar — eventos perdidos durante a queda não são reenviados.
 
@@ -173,3 +193,29 @@ código `1008`; conexões sem header `Origin` (curl, scripts) são aceitas.
 
 **`POST` calcula a próxima position como "última + 1"** sobre o valor fracionário — depois
 de um card em `7.125`, o próximo nasce em `8.125`.
+
+
+---
+
+## Concorrencia: `POST` serializa a leitura da position (2026-08-21)
+
+`POST /api/cards` e `POST /api/lists` calculam a position nova como "ultima + 1", o
+que exige **ler e inserir atomicamente**. Sem isso duas criacoes simultaneas leem a
+mesma "ultima" e nascem empatadas — 15 requisicoes em paralelo produziam 5 positions
+distintas.
+
+O empate nao e cosmetico: a partir de dois cards na mesma position, `positionFor()`
+calcula `(a + b) / 2 === a` para o slot entre eles. O servidor responde `200`, grava o
+valor recebido, e **o card nao sai do lugar**. Como o `orderBy` desempata por `id`, a
+ordem continua estavel e nada parece quebrado — o drag simplesmente para de funcionar.
+
+Uma transacao do Prisma nao resolve sozinha: no SQLite o `BEGIN` e deferido, o `SELECT`
+nao pega lock de escrita, e as duas transacoes leem antes de qualquer uma escrever.
+`backend/src/serialize.ts` enfileira por lista/board.
+
+**Limite conhecido:** e um mutex em memoria, valido enquanto houver **um processo** de
+backend — que e o modelo de implantacao aqui. Com mais de uma instancia o race volta, e
+a correcao passa a ser `INSERT ... SELECT MAX(position) + 1` numa unica declaracao, ou
+`UNIQUE(listId, position)` com retry.
+
+Coberto por `backend/scripts/ws-stress.mjs`, que roda no CI.