\n ${isRunning\n ? `

`\n : `${step.step_number}`}\n ${esc(step.header)}\n ${fileBasename ? `${esc(fileBasename)}` : \"\"}\n ${sc.label}\n

${esc(step.description)}

\n ${step.options.length ? `

${optionPills}

` : \"\"}\n ${resultHtml\n ? `

${resultHtml}

`\n : \"\"}\n ${!isDone ? `\n Your instructions (optional)\n ${esc(step.custom_note ?? \"\")}` : \"\"}\n ${canRun ? `\n

\n \n

` : \"\"}\n

`;\n}\n\n// ── Render full plan panel ────────────────────────────────────────────────────\n// renderedResults: map of stepId → sanitized HTML (markdown already rendered server-side)\nexport function renderPlanPanel(\n plan: Plan,\n steps: PlanStep[],\n renderedResults: Record = {},\n): string {\n const done = steps.filter((s) => s.status === \"done\").length;\n const pct = steps.length ? Math.round((done / steps.length) * 100) : 0;\n const allDone = done === steps.length && steps.length > 0;\n const anyRunning = steps.some((s) => s.status === \"in_progress\");\n const hasRunnable = steps.some((s) => s.status === \"pending\" || s.status === \"error\");\n const metaLabel = plan.pr_title ? esc(plan.pr_title) : esc(plan.pr_url);\n\n return `\n

\n Implementation Plan\n ${steps.length} steps · ${metaLabel}\n \n

\n\n

\n ${steps.map((s) => renderStep(s, plan.id, renderedResults[s.id] ?? \"\")).join(\"\")}\n

\n\n

\n ${done}/${steps.length} done\n ${hasRunnable && !anyRunning\n ? ``\n : \"\"}\n \n ${anyRunning\n ? `

Running…`\n : \"\"}\n ${allDone\n ? `✓ All steps complete`\n : \"\"}\n

`;\n}\n\n// ── Loading state ─────────────────────────────────────────────────────────────\nexport function renderPlanPanelLoading(prUrl: string): string {\n return `\n

\n Generating Plan…\n ${esc(prUrl)}\n

\n Gemini is reading the PR diff and review comments…\n

`;\n}\n","deleted","label",[102],"permalink","https://www.val.town/x/arthrod/pr-comments-viewer/code/plan-ui.ts","extension","actionData","errors"]