` permanecem) - [ ] **Step 7: Criar `src/main.tsx`** ```tsx import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import { App } from "./App"; import "./styles.css"; const root = document.getElementById("app"); if (!root) throw new Error("elemento #app não encontrado"); createRoot(root).render( , ); ``` - [ ] **Step 8: Criar `src/App.tsx` mínimo (topbar com marca — será expandido na Task 10)** ```tsx import { createNativeClient, type NativeClient } from "./lib/tauri"; import { Settings, Minus, X } from "lucide-react"; export function App({ client = createNativeClient(), }: { client?: NativeClient; }) { return (

Transcript

); } ``` - [ ] **Step 9: Criar `src/styles.css` base** (a Task 4 define os tokens; aqui só o mínimo para o shell funcionar) ```css @import "tailwindcss"; @layer base { html { color-scheme: dark; } body { @apply bg-bg-base font-sans text-base text-fg antialiased; } } ``` - [ ] **Step 10: Criar `src/lib/tauri.ts` com o mínimo para o App compilar** — apenas `NativeClient` e `createNativeClient` por ora; a Task 8 expande com `commands` e `EVENTS`. ```ts import { invoke as tauriInvoke } from "@tauri-apps/api/core"; export interface NativeClient { invoke(command: string, args?: Record): Promise; } export function createNativeClient(): NativeClient { return { invoke: (command, args) => tauriInvoke(command, args), }; } ``` - [ ] **Step 11: Criar `src/App.test.tsx` (teste do shell)** ```tsx import { describe, expect, it } from "vitest"; import { render, screen } from "@testing-library/react"; import { App } from "./App"; import type { NativeClient } from "./lib/tauri"; const client: NativeClient = { invoke: () => Promise.reject(new Error("não usado neste teste")), }; describe("App", () => { it("renderiza a marca e os controles de janela", () => { render(); expect(screen.getByRole("heading", { name: "Transcript" })).toBeInTheDocument(); expect(screen.getByRole("button", { name: "Configurações" })).toBeInTheDocument(); expect(screen.getByRole("button", { name: "Minimizar" })).toBeInTheDocument(); expect(screen.getByRole("button", { name: "Fechar" })).toBeInTheDocument(); }); }); ``` - [ ] **Step 12: Ajustar a janela no `src-tauri/tauri.conf.json`** (janela vira redimensionável e maior; mantém frameless, transparent, alwaysOnTop) ```json { "label": "main", "width": 640, "height": 520, "minWidth": 420, "minHeight": 360, "maxWidth": 1024, "maxHeight": 768, "resizable": true, "maximizable": false, "minimizable": true, "closable": true, "alwaysOnTop": true, "visible": true, "decorations": false, "transparent": true, "backgroundColor": "#00000000", "shadow": false, "dragDropEnabled": false, "center": true } ``` - [ ] **Step 13: Atualizar as constantes de restauração no Rust** (`src-tauri/src/ui_commands.rs:28-29`). Sem isso, `restore_main_window` (tray) encolheria a janela para 380×460 a cada restauração. ```rust const APP_WINDOW_WIDTH: u32 = 640; const APP_WINDOW_HEIGHT: u32 = 520; ``` - [ ] **Step 14: Rodar o teste e verificar falha do shell** (o App antigo ainda é o entry de produção; o teste novo valida o novo shell) Run: `npm test -- --run src/App.test.tsx` Expected: PASS - [ ] **Step 15: Verificação completa** Run: `npm run typecheck && npm run build && npm test -- --run` Expected: tudo PASS (o app antigo continua passando; `build` gera o bundle novo). - [ ] **Step 16: Commit** ```bash git add -A git commit -m "feat: fundação React 19 + Tailwind v4 + janela redimensionável" ``` --- ### Task 2: Brief da fase de concorrência **Files:** - Create: `design/proposals/BRIEF.md` **Interfaces:** - Produces: `design/proposals/BRIEF.md` — documento que os 3 agentes designers seguem na Task 3. - [ ] **Step 1: Criar o BRIEF com este conteúdo exato** ```markdown # Brief — Direções visuais para o Transcript (front-end) Contexto: Transcript é um utilitário desktop (Tauri 2, Windows/Linux) de ditado por voz: hotkey global → fala → transcrição → texto inserido no app em foco. A UI atual é dark glass/acrylic, janela compacta, tudo numa tela. O front será reescrito em React 19 + Tailwind v4. Nesta fase você propõe UMA direção visual completa, em mockups HTML estáticos. ## Superfícies a cobrir (4 mockups mínimos, 7 arquivos) 1. Janela principal — estado vazio (design/proposals//main-empty.html) 2. Janela principal — com texto transcrito + painel "Refinar com IA" aberto (main-text.html) 3. Overlay de ditado — gravando (waveform) (dictation-recording.html) 4. Overlay de ditado — revisão pós-transcrição (dictation-review.html) 5. Configurações — com abas internas (settings.html) 6. Histórico — lista de áudios recentes (history.html) 7. tokens.css — direção estética em tokens CSS (tokens.css) Restrições de produto: janela pode ser maior que hoje, mas continua compacta (não é um IDE); o overlay de ditado é a superfície mais usada e aparece redimensionando a janela para ~560×124 (gravação) e ~720×~300 (revisão) — deve caber nesses tamanhos; fluxo primário: hotkey → fala → insere (velocidade acima de tudo). ## Conteúdo de cada mockup - HTML autossuficiente (CSS inline no