arcadia-admin
/
arcadiasuite
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
arcadiasuite/.planning/phases/03-miroflow-embutido/03-03-PLAN.md

316 lines
14 KiB
Markdown
Raw Blame History

---
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>
Reference in New Issue View Git Blame Copy Permalink