---
id: "03-03"
phase: 03-miroflow-embutido
plan: 03
type: execute
wave: 2
depends_on: ["03-02"]
files_modified:
  - client/src/components/MiroFlowControl.tsx
  - client/src/pages/BiWorkspace.tsx
autonomous: false
requirements:
  - REQ-3.6

must_haves:
  truths:
    - "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"
  artifacts:
    - path: "client/src/components/MiroFlowControl.tsx"
      provides: "Componente React com toggle, seletor de agente, input de tarefa e exibição de resultado"
      exports: ["MiroFlowControl"]
    - path: "client/src/pages/BiWorkspace.tsx"
      provides: "Tab 'cientifico' adicionada à TabsList e TabsContent existentes"
      contains: "TabsTrigger value=\"cientifico\""
  key_links:
    - from: "client/src/components/MiroFlowControl.tsx"
      to: "/api/miroflow/analyze"
      via: "apiRequest('POST', '/api/miroflow/analyze', {agent, task})"
      pattern: "miroflow/analyze"
    - from: "client/src/pages/BiWorkspace.tsx"
      to: "client/src/components/MiroFlowControl.tsx"
      via: "import { MiroFlowControl } from '@/components/MiroFlowControl'"
      pattern: "MiroFlowControl"
---

<objective>
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.
</objective>

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

<context>
@.planning/PROJECT.md
@.planning/ROADMAP.md
@.planning/phases/03-miroflow-embutido/03-02-SUMMARY.md
@.planning/phases/03-miroflow-embutido/03-RESEARCH.md

<interfaces>
<!-- BiWorkspace.tsx — estrutura de tabs (linhas 2870-2888) -->
// Estado:
const [activeTab, setActiveTab] = useState("overview");

// Estrutura:
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
  <TabsList className="bg-[#1f334d] border border-[#c89b3c]/20 p1">
    <TabsTrigger value="overview" className="data-[state=active]:bg-[#c89b3c] data-[state=active]:text-[#1f334d] text-white/70">
      <LayoutDashboard className="w-4 h-4 mr-2" /> Visão Geral
    </TabsTrigger>
    <TabsTrigger value="datasources" ...> <Database .../> Fontes de Dados </TabsTrigger>
    <TabsTrigger value="upload" ...> <Upload .../> Upload </TabsTrigger>
    <TabsTrigger value="datasets" ...> <FileText .../> Consultas </TabsTrigger>
    <TabsTrigger value="charts" ...> <BarChart3 .../> Gráficos </TabsTrigger>
    <TabsTrigger value="backups" ...> <Archive .../> Backups </TabsTrigger>
    <!-- ADICIONAR AQUI: <TabsTrigger value="cientifico" ...> <Brain .../> Científico </TabsTrigger> -->
  </TabsList>

  <TabsContent value="overview">...</TabsContent>
  <TabsContent value="datasources">...</TabsContent>
  <!-- ... outros TabsContent ... -->
  <!-- ADICIONAR: <TabsContent value="cientifico"><MiroFlowControl /></TabsContent> -->
</Tabs>

<!-- Imports disponíveis em BiWorkspace.tsx — já importados, usar estes -->
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

<!-- API pattern usado no projeto (apiRequest de wouter/queryClient) -->
// 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) });

<!-- AnalyzeResponse do backend (03-02) -->
interface AnalyzeResponse {
  agent: string;
  model: string;
  result: string;
  execution_id: string;
  duration_ms: number;
}
</interfaces>
</context>

<tasks>

<task type="auto">
  <name>Task 1: Criar client/src/components/MiroFlowControl.tsx</name>
  <files>client/src/components/MiroFlowControl.tsx</files>

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

  <action>
    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.
  </action>

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

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

  <done>MiroFlowControl.tsx criado, compila sem erros TypeScript. Componente pronto para ser importado pelo BiWorkspace.</done>
</task>

<task type="auto">
  <name>Task 2: Adicionar tab "Científico" ao BiWorkspace.tsx</name>
  <files>client/src/pages/BiWorkspace.tsx</files>

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

  <action>
    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.
  </action>

  <verify>
    <automated>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"</automated>
  </verify>

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

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

<task type="checkpoint:human-verify" gate="blocking">
  <what-built>
    - 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
  </what-built>

  <how-to-verify>
    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
  </how-to-verify>

  <resume-signal>
    Digite "aprovado" se tudo funcionar corretamente.
    Ou descreva os problemas encontrados (ex: "tab não aparece", "erro 502 na análise", "loading infinito").
  </resume-signal>
</task>

</tasks>

<verification>
```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>