arcadiasuite/.planning/phases/03-miroflow-embutido/03-03-PLAN.md

id	phase	plan	type	wave	depends_on	files_modified	autonomous	requirements	must_haves
03-03	03-miroflow-embutido	03	execute	2	03-02	client/src/components/MiroFlowControl.tsx client/src/pages/BiWorkspace.tsx	false	REQ-3.6	truths artifacts key_links Tab 'Científico' aparece na TabsList de BiWorkspace.tsx MiroFlowControl.tsx renderiza toggle 'Modo Científico' com ícone Brain Usuário pode selecionar agente (Statistician / Fiscal Auditor / Researcher) Usuário pode digitar tarefa e clicar em Analisar Resultado da análise é exibido em área de texto com scroll Estado de loading é exibido durante a chamada (ícone Loader2 girando) Erro da API é exibido ao usuário de forma legível Tabs existentes (overview, datasources, etc.) continuam funcionando normalmente path provides exports client/src/components/MiroFlowControl.tsx Componente React com toggle, seletor de agente, input de tarefa e exibição de resultado MiroFlowControl path provides contains client/src/pages/BiWorkspace.tsx Tab 'cientifico' adicionada à TabsList e TabsContent existentes TabsTrigger value="cientifico" from to via pattern client/src/components/MiroFlowControl.tsx /api/miroflow/analyze apiRequest('POST', '/api/miroflow/analyze', {agent, task}) miroflow/analyze from to via pattern client/src/pages/BiWorkspace.tsx client/src/components/MiroFlowControl.tsx import { MiroFlowControl } from '@/components/MiroFlowControl' MiroFlowControl

Criar o componente MiroFlowControl.tsx e integrá-lo ao BiWorkspace.tsx como nova tab "Científico" com toggle "Modo Científico".

Purpose: Expõe as análises científicas MiroFlow diretamente no contexto BI, permitindo ao usuário acionar agentes LLM especializados ao lado dos dashboards Superset. Output: Tab funcional em BiWorkspace com formulário de análise, seletor de agente e display de resultado.

<execution_context> @$HOME/.claude/get-shit-done/workflows/execute-plan.md @$HOME/.claude/get-shit-done/templates/summary.md </execution_context>

@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/phases/03-miroflow-embutido/03-02-SUMMARY.md @.planning/phases/03-miroflow-embutido/03-RESEARCH.md // Estado: const [activeTab, setActiveTab] = useState("overview");

// Estrutura: Visão Geral <TabsTrigger value="datasources" ...> <Database .../> Fontes de Dados <TabsTrigger value="upload" ...> <Upload .../> Upload <TabsTrigger value="datasets" ...> <FileText .../> Consultas <TabsTrigger value="charts" ...> <BarChart3 .../> Gráficos <TabsTrigger value="backups" ...> <Archive .../> Backups

... ...

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; // Lucide icons já importados: Bot, Brain NÃO está importado — adicionar ao import // shadcn/ui components já disponíveis: Button, Card, CardContent, CardHeader, CardTitle, // Badge, ScrollArea, Input, Textarea, Select, SelectContent, SelectItem, SelectTrigger, SelectValue

// Verificar como outros componentes fazem POST — geralmente: import { apiRequest } from "@/lib/queryClient"; // ou via useMutation do @tanstack/react-query const mutation = useMutation({ mutationFn: (body) => apiRequest("POST", "/api/miroflow/analyze", body) });

interface AnalyzeResponse { agent: string; model: string; result: string; execution_id: string; duration_ms: number; }

Task 1: Criar client/src/components/MiroFlowControl.tsx client/src/components/MiroFlowControl.tsx

<read_first> - /opt/arcadia_merged/client/src/lib/queryClient.ts (confirmar apiRequest signature) - /opt/arcadia_merged/client/src/pages/BiWorkspace.tsx linhas 1-60 (imports disponíveis e padrão de componentes) - /opt/arcadia_merged/client/src/components/ (listar arquivos para verificar convenções de nomenclatura) </read_first>

Criar client/src/components/MiroFlowControl.tsx como componente React standalone.

O componente deve:
1. Exibir card com header "Modo Científico" e ícone Brain
2. Toggle switch ou badge "Ativado" quando em modo científico (estado local `enabled`)
3. Select para escolha do agente: Statistician (deepseek-r1:14b), Fiscal Auditor (deepseek-r1:14b), Researcher (llama3.1:8b)
4. Textarea para digitar a tarefa (placeholder específico por agente)
5. Botão "Analisar" que dispara POST /api/miroflow/analyze
6. Área de resultado com ScrollArea mostrando a resposta formatada
7. Estado de loading com Loader2 animado durante chamada
8. Exibir erros de forma legível (badge vermelho + mensagem)
9. Metadados do resultado: modelo usado, tempo de execução, execution_id (em texto pequeno)

Props: `currentDashboardData?: Record<string, unknown>` (opcional, para contexto futuro)

Usar useMutation do @tanstack/react-query para a chamada POST.

Estrutura de tipos locais:
```typescript
interface AnalyzeRequest {
  agent: "statistician" | "fiscal_auditor" | "researcher";
  task: string;
  context?: Record<string, unknown>;
}

interface AnalyzeResponse {
  agent: string;
  model: string;
  result: string;
  execution_id: string;
  duration_ms: number;
}
```

Agentes disponíveis (hardcoded, sem fetch):
```typescript
const AGENTS = [
  { value: "statistician", label: "Statistician", model: "deepseek-r1:14b",
    placeholder: "Ex: Analise a distribuição de vendas por região no último trimestre" },
  { value: "fiscal_auditor", label: "Fiscal Auditor", model: "deepseek-r1:14b",
    placeholder: "Ex: Verifique inconsistências nos registros NFe do CNPJ 12.345.678/0001-90" },
  { value: "researcher", label: "Researcher", model: "llama3.1:8b",
    placeholder: "Ex: Quais fornecedores têm maior correlação com atrasos de entrega?" },
] as const;
```

Estilização: seguir o padrão dark de BiWorkspace (bg-[#1f334d], text-white, border-[#c89b3c]/20, text-[#c89b3c]).

NÃO usar estados globais, stores ou contextos externos.
NÃO fazer fetch para /api/miroflow/health neste componente.

cd /opt/arcadia_merged && npx tsc --noEmit --project tsconfig.json 2>&1 | grep -i "MiroFlowControl\|miroflow" | head -10 || echo "TypeScript OK"

<acceptance_criteria> - client/src/components/MiroFlowControl.tsx existe e exporta MiroFlowControl como default ou named export - npx tsc --noEmit não retorna erros relacionados a MiroFlowControl.tsx - Componente tem prop currentDashboardData?: Record<string, unknown> - Select com os 3 agentes (statistician, fiscal_auditor, researcher) - Textarea para task com placeholder dinâmico por agente selecionado - useMutation configurado para POST /api/miroflow/analyze - Estado de loading exibido (Loader2 ou spinner equivalente) - Erro exibido quando mutation.isError - Resultado exibido quando mutation.isSuccess com metadados (model, duration_ms) - Nenhuma referência a modelos acima de 14B </acceptance_criteria>

MiroFlowControl.tsx criado, compila sem erros TypeScript. Componente pronto para ser importado pelo BiWorkspace.

Task 2: Adicionar tab "Científico" ao BiWorkspace.tsx client/src/pages/BiWorkspace.tsx

<read_first> - /opt/arcadia_merged/client/src/pages/BiWorkspace.tsx linhas 2860-2920 (TabsList atual — localizar exatamente onde inserir) - /opt/arcadia_merged/client/src/pages/BiWorkspace.tsx linhas 1-55 (imports para adicionar Brain e MiroFlowControl) - /opt/arcadia_merged/client/src/pages/BiWorkspace.tsx linhas 2950-3050 (após os TabsContent existentes — localizar o fechamento para inserir novo TabsContent) </read_first>

BiWorkspace.tsx é um arquivo grande (~3000 linhas). Fazer APENAS as 3 modificações cirúrgicas abaixo:

MODIFICAÇÃO 1 — Adicionar Brain ao import de lucide-react (linha ~10-50):
Localizar `import { ... } from "lucide-react"` e adicionar `Brain` à lista.
(Verificar se Brain já está importado antes de adicionar)

MODIFICAÇÃO 2 — Adicionar MiroFlowControl import (após os imports existentes):
```typescript
import { MiroFlowControl } from "@/components/MiroFlowControl";
```

MODIFICAÇÃO 3 — Adicionar TabsTrigger na TabsList (após o último TabsTrigger existente, antes do fechamento </TabsList>):
```tsx
<TabsTrigger value="cientifico" className="data-[state=active]:bg-[#c89b3c] data-[state=active]:text-[#1f334d] text-white/70">
  <Brain className="w-4 h-4 mr-2" /> Científico
</TabsTrigger>
```

MODIFICAÇÃO 4 — Adicionar TabsContent (após o último TabsContent existente, antes do fechamento </Tabs>):
```tsx
<TabsContent value="cientifico">
  <MiroFlowControl />
</TabsContent>
```

NÃO alterar nenhum TabsTrigger ou TabsContent existente.
NÃO modificar o estado activeTab ou qualquer lógica existente.
NÃO reformatar ou reorganizar o código existente.
NÃO remover nenhum import existente.
Verificar o arquivo antes e depois com grep para confirmar que os 4 tabs originais ainda existem.

cd /opt/arcadia_merged && grep -c 'TabsTrigger value=' client/src/pages/BiWorkspace.tsx && npx tsc --noEmit --project tsconfig.json 2>&1 | grep -i "BiWorkspace\|MiroFlow" | head -5 || echo "TypeScript OK"

<acceptance_criteria> - grep -c 'TabsTrigger value=' client/src/pages/BiWorkspace.tsx retorna 7 (6 existentes + 1 novo "cientifico") - grep 'value="cientifico"' client/src/pages/BiWorkspace.tsx retorna 2 linhas (TabsTrigger + TabsContent) - grep 'Brain' client/src/pages/BiWorkspace.tsx retorna resultado (importado e usado) - grep 'MiroFlowControl' client/src/pages/BiWorkspace.tsx retorna resultado (importado e usado) - npx tsc --noEmit não retorna erros em BiWorkspace.tsx - Tabs existentes ("overview", "datasources", "upload", "datasets", "charts", "backups") ainda presentes - Nenhum outro código do arquivo foi alterado (git diff mostra apenas as 4 adições) </acceptance_criteria>

BiWorkspace.tsx contém tab "Científico" que renderiza MiroFlowControl. Tabs existentes preservadas. Compila sem erros.

- MiroFlowControl.tsx: componente com toggle "Modo Científico", seletor de 3 agentes, textarea de tarefa e display de resultado - BiWorkspace.tsx: tab "Científico" adicionada (7 tabs no total) - Backend (planos 01 e 02): microserviço Python porta 8006 + proxy Node + KG logging 1. Iniciar o servidor: `npm run dev` (ou verificar se já está rodando) 2. Iniciar o microserviço MiroFlow: `MIROFLOW_PORT=8006 python3 server/python/miroflow_service.py &` 3. Navegar para /bi-workspace no browser 4. Verificar que a tab "Científico" aparece no TabsList (ícone Brain + texto) 5. Clicar na tab "Científico" 6. Verificar que o painel MiroFlowControl renderiza sem erros JavaScript no console 7. Selecionar o agente "Statistician" 8. Digitar uma tarefa simples: "Liste os 3 principais insights sobre análise estatística" 9. Clicar em "Analisar" 10. Verificar que o estado de loading aparece (Loader2 girando) 11. Após resposta: verificar que o resultado é exibido com o modelo (deepseek-r1:14b) e tempo de execução 12. Verificar GET http://localhost:8006/health retorna {"online": true} em outro aba 13. Verificar as outras 6 tabs (overview, datasources, etc.) ainda funcionam normalmente Digite "aprovado" se tudo funcionar corretamente. Ou descreva os problemas encontrados (ex: "tab não aparece", "erro 502 na análise", "loading infinito"). ```bash # Verificar estrutura dos arquivos: ls /opt/arcadia_merged/client/src/components/MiroFlowControl.tsx

Verificar tab adicionada:

grep -n 'cientifico|Científico|MiroFlowControl|Brain' /opt/arcadia_merged/client/src/pages/BiWorkspace.tsx

Verificar compilação:

cd /opt/arcadia_merged && npx tsc --noEmit 2>&1 | tail -5

Contagem de tabs:

grep -c 'TabsTrigger value=' /opt/arcadia_merged/client/src/pages/BiWorkspace.tsx

</verification>

<success_criteria>
- MiroFlowControl.tsx existe e exporta componente válido
- BiWorkspace.tsx tem 7 TabsTriggers (6 originais + "cientifico")
- TypeScript compila sem erros nos novos arquivos
- Usuário aprova verificação visual do checkpoint
- Tabs existentes do BiWorkspace continuam funcionando
</success_criteria>

<output>
Após conclusão e aprovação do checkpoint, criar `.planning/phases/03-miroflow-embutido/03-03-SUMMARY.md` com:
- Arquivos criados/modificados
- Screenshot ou descrição do estado visual da tab "Científico"
- Resultado da verificação humana
- Qualquer ajuste feito após o checkpoint
</output>