> ## Documentation Index > Fetch the complete documentation index at: https://docs.morada.ai/llms.txt > Use this file to discover all available pages before exploring further. # Ask for a visual explanation of a plan > Turn steps and dependencies into something your team can explore, understand, and discuss. export const planArtifact = { filename: "plano-lancamento-6-semanas.html", sha256: "8f86c2852b229ab2d7699eccf40e5d0d92b95dd94f85ad790d32dbc104d5b26c", html: ["\n\n\n \n \n Plano interativo de lançamento — 6 semanas\n \n\n\n
\n
\n

Plano de lançamento interativo

\n

Seis semanas de trabalho, com o impacto do atraso visível.

\n

Ajuste o atraso antes do piloto. O plano preserva a duração de todas as etapas e recalcula, na hora, a semana do lançamento.

\n\n
\n
\n
\n
\n \n 0 semanas\n
\n
\n \n
01234 semanas
\n
\n
\n ", " \n \n \n \n \n
\n
\n
\n Lançamento recalculado\n Semana 6\n

Piloto nas semanas 4 e 5 · plano total de 6 semanas

\n
\n
\n
\n\n \n
\n
\n\n
\n
\n
\n
\n
\n

Visão geral

\n

O que muda e o que permanece

\n
\n

O cenário-base tem seis semanas. Somente a espera antes do piloto amplia o calendário total.

\n
\n
\n
\n Trabalho planejado\n 6 semanas\n Permanece fixo\n
\n
\n Espera adicionada\n 0 semanas\n Variável de 0 a 4\n
\n
\n Calendário total\n 6 semanas\n Trabalho + espera\n
\n
\n Semana de lançamento\n Semana 6\n Resultado do cenário\n
\n
\n
\n
\n\n
\n
\n
\n
\n

Linha do tempo

\n

Plano recalculado

\n
\n

Sem atraso: as etapas seguem sem intervalo adicional.

\n
\n\n
\n

Deslize a linha do tempo para o lado.

\n
\n
\n
\n
\n\n
\n
\n
\n\n
\n
\n
\n
\n

Etapas

\n

Quatro blocos, durações fixas

\n
\n

A semana pode mudar para piloto e lançamento, mas o tempo gasto em cada etapa permanece igual.

\n
\n
\n
\n
1 semana · fixa
\n

Diagnóstico

\n
Semana 1
\n

Organizar o ponto de partida e esclarecer o que precisa ser validado antes de criar a solução.

\n
\n
\n
2 semanas · fixas
\n

Protótipo

\n
Semanas 2 e 3
\n

Transformar o diagnóstico em uma primeira versão e refiná-la antes do teste controlado.

\n
\n
\n
2 semanas · fixas
\n

Piloto

\n
Semanas 4 e 5
\n

Testar em escala limitada. O atraso escolhido muda o início desta etapa, não sua duração.

\n
\n
\n
1 semana · fixa
\n

Lançamento

\n
Semana 6
\n

Colocar a versão de lançamento em circulação assim que o piloto de duas semanas terminar.

\n
\n
\n
\n
\n\n
\n
\n
\n
\n

Dependências

\n

Uma etapa libera a próxima

\n
\n

A espera variável entra em um único ponto: entre o fim do protótipo e o começo do piloto.

\n
\n
\n
\n
DiagnósticoTermina na semana 1
\n
→
\n
ProtótipoComeça após o diagnóstico
\n
→
\n
PilotoComeça após o protótipo, sem espera adicional
\n
→
\n
LançamentoComeça quando o piloto termina
\n
\n
    \n
  • Diagnóstico → Protótipo: o protótipo só começa depois da primeira semana.
    • \n
  • Protótipo → Piloto: é aqui que o atraso de 0 a 4 semanas é aplicado.
    • \n
  • Piloto → Lançamento: o lançamento avança na mesma proporção do atraso.
    • \n
\n
\n
\n
\n\n
\n

Regra simples do cenário

\n
\n Semana-base do lançamento: 6\n +\n Atraso: 0\n =\n ", "Lançamento: semana 6\n
\n

Não há datas de calendário nem responsáveis neste plano. As semanas são posições relativas a partir do início do trabalho.

\n
\n
\n\n \n\n \n\n\n"].join("") }; export const GeneratedArtifact = ({example, source, language = "pt"}) => { const [artifact, setArtifact] = useState(null); const [expanded, setExpanded] = useState(false); const [canExpand, setCanExpand] = useState(false); const [expandFailed, setExpandFailed] = useState(false); const id = `generated-artifact-${example}`; const labels = language === "en" ? { loading: "Opening the generated example…", expand: "Enlarge example", restore: "Exit full screen", download: "Download original file", title: "Complete generated example", expandError: "Full screen is unavailable in this browser. You can still explore the example below or download it.", note: "Complete file generated in a Morada OS test conversation with fictional data. Scroll inside the example to explore the whole page." } : { loading: "Abrindo o exemplo gerado…", expand: "Ampliar exemplo", restore: "Sair da tela cheia", download: "Baixar arquivo original", title: "Exemplo completo gerado", expandError: "Não foi possível ampliar neste navegador. Você pode explorar o exemplo abaixo ou baixar o arquivo.", note: "Arquivo completo gerado em uma conversa de teste do Morada OS, com dados fictícios. Role dentro do exemplo para explorar a página inteira." }; useEffect(() => { setExpandFailed(false); const escapes = { "&": "&", '"': """, "<": "<", ">": ">" }; const html = source.html.replace(/[&"<>]/g, character => escapes[character]); const policy = "default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data: blob:; font-src data:; connect-src 'none'; base-uri 'none'; form-action 'none'; frame-src 'none'; worker-src 'none'; webrtc 'block'"; const srcDoc = ``; setArtifact({ filename: source.filename, html: source.html, srcDoc }); }, [source.html, source.filename, language]); useEffect(() => { setCanExpand(Boolean(document.fullscreenEnabled)); const changed = () => setExpanded(document.fullscreenElement?.id === id); document.addEventListener("fullscreenchange", changed); return () => document.removeEventListener("fullscreenchange", changed); }, [id]); const download = () => { if (!artifact) return; const url = URL.createObjectURL(new Blob([artifact.html], { type: "text/html;charset=utf-8" })); const anchor = document.createElement("a"); anchor.href = url; anchor.download = artifact.filename; document.body.appendChild(anchor); anchor.click(); anchor.remove(); setTimeout(() => URL.revokeObjectURL(url), 1000); }; const enlarge = () => { setExpandFailed(false); const action = expanded ? document.exitFullscreen() : document.getElementById(id)?.requestFullscreen(); action?.catch(() => setExpandFailed(true)); }; const css = ` .mo-artifact { --artifact-bg:#f8fafc; --artifact-ink:#1e293b; --artifact-line:#cbd5e1; --artifact-hover:#e2e8f0; margin:24px 0; border:1px solid var(--artifact-line); border-radius:16px; overflow:hidden; background:var(--artifact-bg); color:var(--artifact-ink); } .dark .mo-artifact { --artifact-bg:#18212e; --artifact-ink:#f1f5f9; --artifact-line:#475569; --artifact-hover:#334155; } .mo-artifact:fullscreen { width:100vw; height:100dvh; border:0; border-radius:0; margin:0; display:flex; flex-direction:column; } .mo-artifact .artifact-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:12px; border-bottom:1px solid var(--artifact-line); flex-shrink:0; } .mo-artifact .artifact-name { flex:1 1 180px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; } .mo-artifact button { min-height:44px; padding:8px 12px; border:1px solid var(--artifact-line); border-radius:8px; color:var(--artifact-ink); background:transparent; cursor:pointer; font:inherit; font-size:12px; } .mo-artifact button:hover { background:var(--artifact-hover); } .mo-artifact button:active { box-shadow:inset 0 0 0 2px var(--artifact-ink); } .mo-artifact button:focus-visible { outline:3px solid #2683eb; outline-offset:2px; } .mo-artifact button:disabled { cursor:default; opacity:.5; } .mo-artifact > iframe { display:block; width:100%; height:720px; border:0; background:white; } .mo-artifact:fullscreen > iframe { flex:1; min-height:0; height:100%; } .mo-artifact .artifact-status { padding:24px; font-size:14px; } .mo-artifact .artifact-note { margin:0; padding:12px; font-size:12px; line-height:1.6; color:var(--artifact-ink); border-top:1px solid var(--artifact-line); } .mo-artifact:fullscreen .artifact-note { display:none; } @media(max-width:600px) { .mo-artifact > iframe { height:640px; } .mo-artifact .artifact-name { flex-basis:100%; } } `; return
{artifact?.filename || labels.title} {canExpand && }
{artifact ?