Function planTab

extensions/java-modernization-studio/renderer.mjs:598–668

(s)

    }

    function planTab(s) {
        const usingProgress = !!(s.progress && s.progress.steps.length);
        const steps = (usingProgress ? s.progress.steps : (s.plan ? s.plan.steps : [])) || [];
        if (!steps.length) {
            return emptyState(
                "No plan yet",
                "Run an assessment or generate an upgrade plan. App Modernization writes <code>plan.md</code> and a <code>progress.md</code> checklist, and your steps land here — each unchecked one becomes a button that hands that exact step to the agent.",
                btn("Run assessment", "start_assessment", {}, { primary: true }) + btn("Generate upgrade plan", "generate_plan", { targetJava: 21 })
            );
        }
        const src = usingProgress ? "progress.md" : "plan.md";
        const total = steps.length;
        const done = steps.filter((x) => x.status === "done").length;
        const ord = s.ordering || { activeRank: null, activePhase: null };

        // Intro + overall progress + legend.
        let html = '<div class="card"><h2>Plan &amp; Progress <span class="muted" style="font-weight:400">' + esc(src) + "</span><span class=\"spacer\"></span>" + statusBadge(s.status) + "</h2>";
        html += '<p class="muted" style="margin:0 0 10px">Your live modernization checklist. Each unchecked step has a <b>Work on this</b> button that hands just that step to the agent in this session — it checks the box here when the step is done.</p>';
        html += '<div class="progress"><span style="width:' + (s.percent || 0) + '%"></span></div>';
        html += '<p class="muted" style="margin:6px 0 0">' + done + " of " + total + " steps done · " + (s.percent || 0) + "% complete</p>";
        html += '<div class="legend"><span><span class="dot done"></span>Done</span><span><span class="dot in_progress"></span>In progress</span><span><span class="dot pending"></span>To do</span><span>🔒 Do later</span></div>';
        html += "</div>";

        // Recommended-order guide so users don't work steps out of sequence.
        html += approachGuide(ord);

        // Autopilot: hand the whole phase to the agent instead of clicking each step.
        html += autopilotCard(s);

        // "Continue here" — the recommended next step: first not-done step in the
        // active phase (falls back to the first not-done step overall).
        const next = steps.find((x) => x.status !== "done" && (ord.activeRank == null || x.rank === ord.activeRank)) || steps.find((x) => x.status !== "done");
        if (next) {
            html +=
                '<div class="hero"><div class="eyebrow">Continue here · recommended next step</div>' +
                '<div class="htitle">' + esc(next.title) + "</div>" +
                (next.section ? '<div class="hbody">Phase: ' + esc(next.section) + "</div>" : "") +
                '<div class="actions">' + stepAction(next) + (next.section && /validation|gates/i.test(next.section) ? btn("Open Validation", "goto:validation") : "") + "</div></div>";
        } else {
            html += '<div class="banner">✓ Every step is checked off. Re-run the validation gates, then open a pull request.</div>';
        }

        // Steps grouped by their phase/section.
        const groups = [];
        const idx = {};
        steps.forEach((st) => {
            const key = st.section || "Steps";
            if (idx[key] == null) { idx[key] = groups.length; groups.push({ name: key, items: [], rank: st.rank }); }
            groups[idx[key]].items.push(st);
        });

        groups.forEach((g) => {
            const gdone = g.items.filter((x) => x.status === "done").length;
            const isValidation = /validation|gates/i.test(g.name);
            const gLocked = ord.activeRank != null && g.rank != null && g.rank > ord.activeRank;
            html += '<div class="card' + (gLocked ? " locked" : "") + '"><h2>' + (gLocked ? "🔒 " : "") + esc(g.name) + ' <span class="badge ' + (gdone === g.items.length && g.items.length ? "b-green" : "b-gray") + '">' + gdone + "/" + g.items.length + "</span>";
            if (isValidation) html += '<span class="spacer"></span>' + btn("Open Validation →", "goto:validation");
            else if (gLocked) html += '<span class="spacer"></span><span class="smuted">after ' + esc(shortPhase(ord.activePhase)) + "</span>";