together-code
Version:
AI-powered coding assistant that plans, then builds
71 lines (70 loc) • 3.58 kB
JavaScript
import React from 'react';
import { Box, Text } from 'ink';
const PlanDisplay = ({ plan, currentStepId, completedSteps, onApprove, onModify }) => {
const getStepStatus = (step) => {
if (completedSteps.includes(step.id))
return 'completed';
if (currentStepId === step.id)
return 'current';
return 'pending';
};
const getStatusIcon = (status) => {
switch (status) {
case 'completed': return '✅';
case 'current': return '⚡';
case 'pending': return '⏳';
default: return '⏳';
}
};
const getStatusColor = (status) => {
switch (status) {
case 'completed': return 'green';
case 'current': return 'yellow';
case 'pending': return 'gray';
default: return 'gray';
}
};
return (React.createElement(Box, { flexDirection: "column", padding: 1 },
React.createElement(Box, { marginBottom: 1 },
React.createElement(Text, { color: "cyan", bold: true }, "\uD83D\uDCCB Project Plan")),
React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
React.createElement(Text, { color: "white" }, plan.overview)),
React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
React.createElement(Text, { color: "cyan" },
"Steps (",
completedSteps.length,
"/",
plan.steps.length,
" completed):"),
plan.steps.map((step, index) => {
const status = getStepStatus(step);
const statusIcon = getStatusIcon(status);
const statusColor = getStatusColor(status);
return (React.createElement(Box, { key: step.id, flexDirection: "column", marginTop: 1 },
React.createElement(Box, null,
React.createElement(Text, { color: statusColor },
statusIcon,
" ",
index + 1,
". ",
step.title),
step.estimatedTime && (React.createElement(Text, { color: "gray", dimColor: true },
" (",
step.estimatedTime,
")"))),
React.createElement(Box, { paddingLeft: 3 },
React.createElement(Text, { color: "gray", dimColor: true }, step.description))));
})),
!currentStepId && completedSteps.length === 0 && (React.createElement(Box, { flexDirection: "column", marginTop: 1 },
React.createElement(Text, { color: "yellow" }, "Review the plan above. Press:"),
React.createElement(Text, { color: "green" }, " \u2705 ENTER to approve and start execution"),
React.createElement(Text, { color: "blue" }, " \uD83D\uDCDD M to modify the plan"),
React.createElement(Text, { color: "red" }, " \u274C ESC to cancel"))),
currentStepId && (React.createElement(Box, { marginTop: 1 },
React.createElement(Text, { color: "yellow" },
"Executing step: ",
plan.steps.find(s => s.id === currentStepId)?.title))),
completedSteps.length === plan.steps.length && (React.createElement(Box, { marginTop: 1 },
React.createElement(Text, { color: "green", bold: true }, "\uD83C\uDF89 All steps completed!")))));
};
export default PlanDisplay;