feat(KB-092): polish planning mode modal UX
- Rework the planning modal into scrollable content regions with fixed footers for the initial, question, and summary states - Refresh question and summary styling with clearer progress, polished selection controls, and improved dependency and deliverable presentation - Improve responsive behavior with full-height mobile layout, stacked actions, and better overflow handling - Expand PlanningModeModal coverage to verify the new structure and add a TaskDetailModal smoke check
This commit is contained in:
gsxdsm
@@ -1,19 +1,40 @@
|
||||
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
|
||||
import { PlanningModeModal } from "./PlanningModeModal";
|
||||
import type { Task, PlanningQuestion, PlanningSummary } from "@kb/core";
|
||||
import { TaskDetailModal } from "./TaskDetailModal";
|
||||
import type { Task, TaskDetail, PlanningQuestion, PlanningSummary, MergeResult } from "@kb/core";
|
||||
|
||||
// Mock the API functions
|
||||
const mockStartPlanning = vi.fn();
|
||||
const mockRespondToPlanning = vi.fn();
|
||||
const mockCancelPlanning = vi.fn();
|
||||
const mockCreateTaskFromPlanning = vi.fn();
|
||||
const mockUploadAttachment = vi.fn();
|
||||
const mockDeleteAttachment = vi.fn();
|
||||
const mockUpdateTask = vi.fn();
|
||||
const mockPauseTask = vi.fn();
|
||||
const mockUnpauseTask = vi.fn();
|
||||
const mockFetchTaskDetail = vi.fn();
|
||||
const mockRequestSpecRevision = vi.fn();
|
||||
const mockApprovePlan = vi.fn();
|
||||
const mockRejectPlan = vi.fn();
|
||||
const mockRefineTask = vi.fn();
|
||||
|
||||
vi.mock("../api", () => ({
|
||||
startPlanning: (...args: any[]) => mockStartPlanning(...args),
|
||||
respondToPlanning: (...args: any[]) => mockRespondToPlanning(...args),
|
||||
cancelPlanning: (...args: any[]) => mockCancelPlanning(...args),
|
||||
createTaskFromPlanning: (...args: any[]) => mockCreateTaskFromPlanning(...args),
|
||||
uploadAttachment: (...args: any[]) => mockUploadAttachment(...args),
|
||||
deleteAttachment: (...args: any[]) => mockDeleteAttachment(...args),
|
||||
updateTask: (...args: any[]) => mockUpdateTask(...args),
|
||||
pauseTask: (...args: any[]) => mockPauseTask(...args),
|
||||
unpauseTask: (...args: any[]) => mockUnpauseTask(...args),
|
||||
fetchTaskDetail: (...args: any[]) => mockFetchTaskDetail(...args),
|
||||
requestSpecRevision: (...args: any[]) => mockRequestSpecRevision(...args),
|
||||
approvePlan: (...args: any[]) => mockApprovePlan(...args),
|
||||
rejectPlan: (...args: any[]) => mockRejectPlan(...args),
|
||||
refineTask: (...args: any[]) => mockRefineTask(...args),
|
||||
}));
|
||||
|
||||
const mockTasks: Task[] = [
|
||||
@@ -50,6 +71,22 @@ const mockSummary: PlanningSummary = {
|
||||
keyDeliverables: ["Login page", "Signup page", "Auth API"],
|
||||
};
|
||||
|
||||
const mockTaskDetail = {
|
||||
id: "KB-999",
|
||||
title: "Example task",
|
||||
description: "Example description",
|
||||
column: "todo",
|
||||
dependencies: [],
|
||||
steps: [],
|
||||
currentStep: 0,
|
||||
log: [],
|
||||
attachments: [],
|
||||
createdAt: "2026-01-01T00:00:00.000Z",
|
||||
updatedAt: "2026-01-01T00:00:00.000Z",
|
||||
prompt: "# Task\n\nExample prompt",
|
||||
paused: false,
|
||||
} as TaskDetail;
|
||||
|
||||
describe("PlanningModeModal", () => {
|
||||
const mockOnClose = vi.fn();
|
||||
const mockOnTaskCreated = vi.fn();
|
||||
@@ -61,7 +98,7 @@ describe("PlanningModeModal", () => {
|
||||
|
||||
describe("Initial view", () => {
|
||||
it("renders the initial input view when open", () => {
|
||||
render(
|
||||
const { container } = render(
|
||||
<PlanningModeModal
|
||||
isOpen={true}
|
||||
onClose={mockOnClose}
|
||||
@@ -72,6 +109,9 @@ describe("PlanningModeModal", () => {
|
||||
|
||||
expect(screen.getByText("Planning Mode")).toBeDefined();
|
||||
expect(screen.getByPlaceholderText(/e.g., Build a user authentication/)).toBeDefined();
|
||||
expect(container.querySelector(".planning-modal-body")).not.toBeNull();
|
||||
expect(container.querySelector(".planning-modal-body")?.classList.contains("modal-body")).toBe(false);
|
||||
expect(container.querySelector(".planning-examples-label")?.textContent).toBe("Try an example:");
|
||||
});
|
||||
|
||||
it("does not render when closed", () => {
|
||||
@@ -174,13 +214,7 @@ describe("PlanningModeModal", () => {
|
||||
|
||||
describe("Question view", () => {
|
||||
it("renders single_select question with options", async () => {
|
||||
mockStartPlanning.mockResolvedValue({
|
||||
sessionId: "session-123",
|
||||
currentQuestion: mockQuestion,
|
||||
summary: null,
|
||||
});
|
||||
|
||||
render(
|
||||
const { container } = render(
|
||||
<PlanningModeModal
|
||||
isOpen={true}
|
||||
onClose={mockOnClose}
|
||||
@@ -189,6 +223,12 @@ describe("PlanningModeModal", () => {
|
||||
/>
|
||||
);
|
||||
|
||||
mockStartPlanning.mockResolvedValue({
|
||||
sessionId: "session-123",
|
||||
currentQuestion: mockQuestion,
|
||||
summary: null,
|
||||
});
|
||||
|
||||
const textarea = screen.getByPlaceholderText(/e.g., Build a user authentication/);
|
||||
fireEvent.change(textarea, { target: { value: "Build auth system" } });
|
||||
fireEvent.click(screen.getByText("Start Planning"));
|
||||
@@ -198,6 +238,9 @@ describe("PlanningModeModal", () => {
|
||||
expect(screen.getByText("Medium")).toBeDefined();
|
||||
expect(screen.getByText("Large")).toBeDefined();
|
||||
});
|
||||
|
||||
expect(container.querySelector(".planning-question-form > .planning-view-scroll")).not.toBeNull();
|
||||
expect(container.querySelector(".planning-question-form > .planning-actions")).not.toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -209,7 +252,7 @@ describe("PlanningModeModal", () => {
|
||||
summary: mockSummary,
|
||||
});
|
||||
|
||||
render(
|
||||
const { container } = render(
|
||||
<PlanningModeModal
|
||||
isOpen={true}
|
||||
onClose={mockOnClose}
|
||||
@@ -225,6 +268,10 @@ describe("PlanningModeModal", () => {
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText("Planning Complete!")).toBeDefined();
|
||||
});
|
||||
|
||||
expect(container.querySelector(".planning-summary > .planning-view-scroll")).not.toBeNull();
|
||||
expect(container.querySelector(".planning-summary > .planning-actions")).not.toBeNull();
|
||||
expect(container.querySelector(".planning-summary .planning-deps-list")).not.toBeNull();
|
||||
});
|
||||
|
||||
it("creates task from summary", async () => {
|
||||
@@ -274,4 +321,30 @@ describe("PlanningModeModal", () => {
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("Modal smoke checks", () => {
|
||||
it("renders TaskDetailModal with the standard detail body structure", () => {
|
||||
const onMoveTask = vi.fn<(_: string, __: any) => Promise<Task>>().mockResolvedValue(mockTasks[0]);
|
||||
const onDeleteTask = vi.fn<(_: string) => Promise<Task>>().mockResolvedValue(mockTasks[0]);
|
||||
const onMergeTask = vi
|
||||
.fn<(_: string) => Promise<MergeResult>>()
|
||||
.mockResolvedValue({ merged: true, branch: "kb/kb-999" });
|
||||
|
||||
const { container } = render(
|
||||
<TaskDetailModal
|
||||
task={mockTaskDetail}
|
||||
tasks={mockTasks}
|
||||
onClose={mockOnClose}
|
||||
onOpenDetail={vi.fn()}
|
||||
onMoveTask={onMoveTask}
|
||||
onDeleteTask={onDeleteTask}
|
||||
onMergeTask={onMergeTask}
|
||||
addToast={vi.fn()}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText("Definition")).toBeDefined();
|
||||
expect(container.querySelector(".detail-body")).not.toBeNull();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -195,66 +195,70 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, tasks }: Pla
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="modal-body planning-content">
|
||||
<div className="planning-modal-body">
|
||||
{error && <div className="form-error planning-error">{error}</div>}
|
||||
|
||||
{view.type === "initial" && (
|
||||
<div className="planning-initial">
|
||||
<div className="planning-intro">
|
||||
<Sparkles size={32} style={{ color: "var(--triage)", marginBottom: "12px" }} />
|
||||
<h4>Transform your idea into a detailed task</h4>
|
||||
<p className="text-muted">
|
||||
Describe what you want to build in plain language. The AI will ask clarifying
|
||||
questions and help you structure a well-defined task.
|
||||
</p>
|
||||
</div>
|
||||
<div className="planning-view-scroll">
|
||||
<div className="planning-intro">
|
||||
<Sparkles size={32} style={{ color: "var(--triage)", marginBottom: "12px" }} />
|
||||
<h4>Transform your idea into a detailed task</h4>
|
||||
<p className="text-muted">
|
||||
Describe what you want to build in plain language. The AI will ask clarifying
|
||||
questions and help you structure a well-defined task.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="initial-plan">What do you want to build?</label>
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
id="initial-plan"
|
||||
rows={4}
|
||||
className="planning-textarea"
|
||||
placeholder="e.g., Build a user authentication system with login, signup, and password reset..."
|
||||
value={initialPlan}
|
||||
onChange={(e) => setInitialPlan(e.target.value.slice(0, 500))}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && !e.shiftKey && initialPlan.trim()) {
|
||||
e.preventDefault();
|
||||
handleStartPlanning();
|
||||
}
|
||||
}}
|
||||
maxLength={500}
|
||||
/>
|
||||
<div className="planning-char-counter">
|
||||
{initialPlan.length}/500 characters
|
||||
<div className="form-group">
|
||||
<label htmlFor="initial-plan">What do you want to build?</label>
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
id="initial-plan"
|
||||
rows={4}
|
||||
className="planning-textarea"
|
||||
placeholder="e.g., Build a user authentication system with login, signup, and password reset..."
|
||||
value={initialPlan}
|
||||
onChange={(e) => setInitialPlan(e.target.value.slice(0, 500))}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && !e.shiftKey && initialPlan.trim()) {
|
||||
e.preventDefault();
|
||||
handleStartPlanning();
|
||||
}
|
||||
}}
|
||||
maxLength={500}
|
||||
/>
|
||||
<div className="planning-char-count">
|
||||
{initialPlan.length}/500 characters
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="planning-examples">
|
||||
<span className="planning-examples-label">Try an example:</span>
|
||||
<div className="planning-example-chips">
|
||||
{EXAMPLE_PLANS.map((plan, i) => (
|
||||
<button
|
||||
key={i}
|
||||
className="planning-example-chip"
|
||||
onClick={() => setInitialPlan(plan)}
|
||||
>
|
||||
{plan.length > 40 ? plan.slice(0, 40) + "..." : plan}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="planning-examples">
|
||||
<span className="text-muted">Try an example:</span>
|
||||
<div className="planning-example-chips">
|
||||
{EXAMPLE_PLANS.map((plan, i) => (
|
||||
<button
|
||||
key={i}
|
||||
className="planning-example-chip"
|
||||
onClick={() => setInitialPlan(plan)}
|
||||
>
|
||||
{plan.length > 40 ? plan.slice(0, 40) + "..." : plan}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="planning-view-footer">
|
||||
<button
|
||||
className="btn btn-primary planning-start-btn"
|
||||
onClick={handleStartPlanning}
|
||||
disabled={!initialPlan.trim()}
|
||||
>
|
||||
<Lightbulb size={16} style={{ marginRight: "8px" }} />
|
||||
Start Planning
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="btn btn-primary planning-start-btn"
|
||||
onClick={handleStartPlanning}
|
||||
disabled={!initialPlan.trim()}
|
||||
>
|
||||
<Lightbulb size={16} style={{ marginRight: "8px" }} />
|
||||
Start Planning
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -267,24 +271,9 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, tasks }: Pla
|
||||
|
||||
{view.type === "question" && view.session.currentQuestion && (
|
||||
<div className="planning-question">
|
||||
<div className="planning-progress">
|
||||
<div className="planning-progress-bar">
|
||||
{[1, 2, 3].map((step) => (
|
||||
<div
|
||||
key={step}
|
||||
className={`planning-progress-step ${
|
||||
step <= getProgress() ? "active" : ""
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<span className="planning-progress-text">
|
||||
Question {getProgress()} of ~3
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<QuestionForm
|
||||
question={view.session.currentQuestion}
|
||||
progress={getProgress()}
|
||||
onSubmit={handleSubmitResponse}
|
||||
onBack={responseHistory.length > 0 ? handleBack : undefined}
|
||||
/>
|
||||
@@ -312,11 +301,12 @@ export function PlanningModeModal({ isOpen, onClose, onTaskCreated, tasks }: Pla
|
||||
|
||||
interface QuestionFormProps {
|
||||
question: PlanningQuestion;
|
||||
progress: number;
|
||||
onSubmit: (responses: QuestionResponse) => void;
|
||||
onBack?: () => void;
|
||||
}
|
||||
|
||||
function QuestionForm({ question, onSubmit, onBack }: QuestionFormProps) {
|
||||
function QuestionForm({ question, progress, onSubmit, onBack }: QuestionFormProps) {
|
||||
const [response, setResponse] = useState<QuestionResponse>({});
|
||||
const [textValue, setTextValue] = useState("");
|
||||
|
||||
@@ -353,97 +343,115 @@ function QuestionForm({ question, onSubmit, onBack }: QuestionFormProps) {
|
||||
|
||||
return (
|
||||
<div className="planning-question-form">
|
||||
<h4 className="planning-question-text">{question.question}</h4>
|
||||
{question.description && (
|
||||
<p className="planning-question-description">{question.description}</p>
|
||||
)}
|
||||
|
||||
<div className="planning-options">
|
||||
{question.type === "text" && (
|
||||
<textarea
|
||||
className="planning-textarea"
|
||||
rows={4}
|
||||
placeholder="Type your answer here..."
|
||||
value={textValue}
|
||||
onChange={(e) => setTextValue(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && !e.shiftKey && textValue.trim()) {
|
||||
e.preventDefault();
|
||||
handleSubmit();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{question.type === "single_select" && question.options && (
|
||||
<div className="planning-radio-group" role="radiogroup">
|
||||
{question.options.map((option) => (
|
||||
<label key={option.id} className="planning-option planning-option--radio">
|
||||
<input
|
||||
type="radio"
|
||||
name={question.id}
|
||||
value={option.id}
|
||||
checked={response[question.id] === option.id}
|
||||
onChange={() => setResponse({ [question.id]: option.id })}
|
||||
<div className="planning-view-scroll planning-question-scroll">
|
||||
<div className="planning-question-panel">
|
||||
<div className="planning-progress">
|
||||
<div className="planning-progress-bar">
|
||||
{[1, 2, 3].map((step) => (
|
||||
<div
|
||||
key={step}
|
||||
className={`planning-progress-step ${step <= progress ? "active" : ""}`}
|
||||
/>
|
||||
<div className="planning-option-content">
|
||||
<span className="planning-option-label">{option.label}</span>
|
||||
{option.description && (
|
||||
<span className="planning-option-description">{option.description}</span>
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
<span className="planning-progress-text">Question {progress} of ~3</span>
|
||||
</div>
|
||||
|
||||
<div className="planning-question-content">
|
||||
<h4 className="planning-question-text">{question.question}</h4>
|
||||
{question.description && (
|
||||
<p className="planning-question-desc">{question.description}</p>
|
||||
)}
|
||||
|
||||
<div className="planning-options">
|
||||
{question.type === "text" && (
|
||||
<textarea
|
||||
className="planning-textarea"
|
||||
rows={4}
|
||||
placeholder="Type your answer here..."
|
||||
value={textValue}
|
||||
onChange={(e) => setTextValue(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && !e.shiftKey && textValue.trim()) {
|
||||
e.preventDefault();
|
||||
handleSubmit();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{question.type === "single_select" && question.options && (
|
||||
<div className="planning-radio-group" role="radiogroup">
|
||||
{question.options.map((option) => (
|
||||
<label key={option.id} className="planning-option planning-option--radio">
|
||||
<input
|
||||
type="radio"
|
||||
name={question.id}
|
||||
value={option.id}
|
||||
checked={response[question.id] === option.id}
|
||||
onChange={() => setResponse({ [question.id]: option.id })}
|
||||
/>
|
||||
<div className="planning-option-content">
|
||||
<span className="planning-option-label">{option.label}</span>
|
||||
{option.description && (
|
||||
<span className="planning-option-desc">{option.description}</span>
|
||||
)}
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
{question.type === "multi_select" && question.options && (
|
||||
<div className="planning-checkbox-group">
|
||||
{question.options.map((option) => {
|
||||
const selected = (response[question.id] as string[]) || [];
|
||||
return (
|
||||
<label key={option.id} className="planning-option planning-option--checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
value={option.id}
|
||||
checked={selected.includes(option.id)}
|
||||
onChange={(e) => {
|
||||
const newSelected = e.target.checked
|
||||
? [...selected, option.id]
|
||||
: selected.filter((id) => id !== option.id);
|
||||
setResponse({ [question.id]: newSelected });
|
||||
}}
|
||||
/>
|
||||
<div className="planning-option-content">
|
||||
<span className="planning-option-label">{option.label}</span>
|
||||
{option.description && (
|
||||
<span className="planning-option-description">{option.description}</span>
|
||||
)}
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{question.type === "multi_select" && question.options && (
|
||||
<div className="planning-checkbox-group">
|
||||
{question.options.map((option) => {
|
||||
const selected = (response[question.id] as string[]) || [];
|
||||
return (
|
||||
<label key={option.id} className="planning-option planning-option--checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
value={option.id}
|
||||
checked={selected.includes(option.id)}
|
||||
onChange={(e) => {
|
||||
const newSelected = e.target.checked
|
||||
? [...selected, option.id]
|
||||
: selected.filter((id) => id !== option.id);
|
||||
setResponse({ [question.id]: newSelected });
|
||||
}}
|
||||
/>
|
||||
<div className="planning-option-content">
|
||||
<span className="planning-option-label">{option.label}</span>
|
||||
{option.description && (
|
||||
<span className="planning-option-desc">{option.description}</span>
|
||||
)}
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{question.type === "confirm" && (
|
||||
<div className="planning-confirm-group">
|
||||
<button
|
||||
className={`planning-confirm-btn ${response[question.id] === true ? "selected" : ""}`}
|
||||
onClick={() => setResponse({ [question.id]: true })}
|
||||
>
|
||||
<CheckCircle size={18} />
|
||||
Yes
|
||||
</button>
|
||||
<button
|
||||
className={`planning-confirm-btn ${response[question.id] === false ? "selected" : ""}`}
|
||||
onClick={() => setResponse({ [question.id]: false })}
|
||||
>
|
||||
<X size={18} />
|
||||
No
|
||||
</button>
|
||||
{question.type === "confirm" && (
|
||||
<div className="planning-confirm-group">
|
||||
<button
|
||||
className={`planning-confirm-btn ${response[question.id] === true ? "selected" : ""}`}
|
||||
onClick={() => setResponse({ [question.id]: true })}
|
||||
>
|
||||
<CheckCircle size={18} />
|
||||
Yes
|
||||
</button>
|
||||
<button
|
||||
className={`planning-confirm-btn ${response[question.id] === false ? "selected" : ""}`}
|
||||
onClick={() => setResponse({ [question.id]: false })}
|
||||
>
|
||||
<X size={18} />
|
||||
No
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="planning-actions">
|
||||
@@ -454,10 +462,9 @@ function QuestionForm({ question, onSubmit, onBack }: QuestionFormProps) {
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
className="btn btn-primary planning-actions-primary"
|
||||
onClick={handleSubmit}
|
||||
disabled={!isValid()}
|
||||
style={{ marginLeft: "auto" }}
|
||||
>
|
||||
Continue
|
||||
<ArrowRight size={16} style={{ marginLeft: "4px" }} />
|
||||
@@ -503,87 +510,94 @@ function SummaryView({
|
||||
|
||||
return (
|
||||
<div className="planning-summary">
|
||||
<div className="planning-summary-header">
|
||||
<CheckCircle size={24} style={{ color: "var(--color-success)" }} />
|
||||
<h4>Planning Complete!</h4>
|
||||
<p className="text-muted">Review and refine your task before creating it.</p>
|
||||
</div>
|
||||
|
||||
<div className="planning-summary-form">
|
||||
<div className="form-group">
|
||||
<label htmlFor="summary-title">Title</label>
|
||||
<input
|
||||
id="summary-title"
|
||||
type="text"
|
||||
value={summary.title}
|
||||
onChange={(e) => onSummaryChange({ ...summary, title: e.target.value })}
|
||||
/>
|
||||
<div className="planning-view-scroll planning-summary-scroll">
|
||||
<div className="planning-summary-header">
|
||||
<CheckCircle size={24} style={{ color: "var(--color-success)" }} />
|
||||
<h4>Planning Complete!</h4>
|
||||
<p className="text-muted">Review and refine your task before creating it.</p>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>
|
||||
Description
|
||||
<button
|
||||
className="planning-expand-btn"
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
>
|
||||
{isExpanded ? "Collapse" : "Expand"}
|
||||
</button>
|
||||
</label>
|
||||
<textarea
|
||||
className={`planning-textarea ${isExpanded ? "expanded" : ""}`}
|
||||
rows={isExpanded ? 10 : 4}
|
||||
value={summary.description}
|
||||
onChange={(e) => onSummaryChange({ ...summary, description: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Suggested Size</label>
|
||||
<div className="planning-size-selector">
|
||||
{(["S", "M", "L"] as const).map((size) => (
|
||||
<button
|
||||
key={size}
|
||||
className={`planning-size-btn ${summary.suggestedSize === size ? "selected" : ""}`}
|
||||
onClick={() => handleSizeChange(size)}
|
||||
>
|
||||
{size}
|
||||
<span className="planning-size-label">
|
||||
{size === "S" ? "Small" : size === "M" ? "Medium" : "Large"}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{tasks.length > 0 && (
|
||||
<div className="planning-summary-form">
|
||||
<div className="form-group">
|
||||
<label>Suggested Dependencies</label>
|
||||
<div className="planning-deps-list">
|
||||
{tasks.map((task) => (
|
||||
<label key={task.id} className="planning-dep-chip">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedDependencies.includes(task.id)}
|
||||
onChange={() => handleDependencyToggle(task.id)}
|
||||
/>
|
||||
<span className="planning-dep-id">{task.id}</span>
|
||||
<span className="planning-dep-title">
|
||||
{task.title || task.description.slice(0, 30)}
|
||||
<label htmlFor="summary-title">Title</label>
|
||||
<input
|
||||
id="summary-title"
|
||||
type="text"
|
||||
value={summary.title}
|
||||
onChange={(e) => onSummaryChange({ ...summary, title: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>
|
||||
Description
|
||||
<button
|
||||
type="button"
|
||||
className="planning-expand-btn"
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
>
|
||||
{isExpanded ? "Collapse" : "Expand"}
|
||||
</button>
|
||||
</label>
|
||||
<textarea
|
||||
className={`planning-textarea ${isExpanded ? "expanded" : ""}`}
|
||||
rows={isExpanded ? 10 : 4}
|
||||
value={summary.description}
|
||||
onChange={(e) => onSummaryChange({ ...summary, description: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Suggested Size</label>
|
||||
<div className="planning-size-selector">
|
||||
{(["S", "M", "L"] as const).map((size) => (
|
||||
<button
|
||||
key={size}
|
||||
type="button"
|
||||
className={`planning-size-btn ${summary.suggestedSize === size ? "selected" : ""}`}
|
||||
onClick={() => handleSizeChange(size)}
|
||||
>
|
||||
{size}
|
||||
<span className="planning-size-label">
|
||||
{size === "S" ? "Small" : size === "M" ? "Medium" : "Large"}
|
||||
</span>
|
||||
</label>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="form-group">
|
||||
<label>Key Deliverables</label>
|
||||
<ul className="planning-deliverables">
|
||||
{summary.keyDeliverables.map((item, i) => (
|
||||
<li key={i}>{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
{tasks.length > 0 && (
|
||||
<div className="form-group">
|
||||
<label>Suggested Dependencies</label>
|
||||
<div className="planning-deps-list">
|
||||
{tasks.map((task) => (
|
||||
<label
|
||||
key={task.id}
|
||||
className={`planning-dep-chip ${selectedDependencies.includes(task.id) ? "selected" : ""}`}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedDependencies.includes(task.id)}
|
||||
onChange={() => handleDependencyToggle(task.id)}
|
||||
/>
|
||||
<span className="planning-dep-id">{task.id}</span>
|
||||
<span className="planning-dep-title">
|
||||
{task.title || task.description.slice(0, 30)}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="form-group">
|
||||
<label>Key Deliverables</label>
|
||||
<ul className="planning-deliverables">
|
||||
{summary.keyDeliverables.map((item, i) => (
|
||||
<li key={i}>{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -5624,20 +5624,75 @@ html .column.drag-over * {
|
||||
max-width: 640px;
|
||||
min-height: 400px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.planning-modal .modal-header {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.planning-modal .text-muted {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.planning-modal-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.planning-error {
|
||||
flex-shrink: 0;
|
||||
margin: 24px 24px 0;
|
||||
}
|
||||
|
||||
.planning-view-scroll {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.planning-view-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 16px 24px 24px;
|
||||
border-top: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Initial View */
|
||||
.planning-initial {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
align-items: stretch;
|
||||
text-align: center;
|
||||
gap: 16px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.planning-intro {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
max-width: 520px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.planning-intro h4 {
|
||||
font-size: 20px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.planning-intro p {
|
||||
max-width: 480px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.planning-icon {
|
||||
@@ -5679,9 +5734,25 @@ html .column.drag-over * {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.planning-initial .form-group,
|
||||
.planning-summary-form .form-group {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.planning-initial .form-group,
|
||||
.planning-examples {
|
||||
max-width: 520px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.planning-initial .form-group {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.planning-examples {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
.planning-examples-label {
|
||||
@@ -5699,53 +5770,75 @@ html .column.drag-over * {
|
||||
}
|
||||
|
||||
.planning-example-chip {
|
||||
padding: 6px 12px;
|
||||
padding: 8px 14px;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
transition:
|
||||
background var(--transition-fast),
|
||||
border-color var(--transition-fast),
|
||||
color var(--transition-fast),
|
||||
transform var(--transition-fast),
|
||||
box-shadow var(--transition-fast);
|
||||
}
|
||||
|
||||
.planning-example-chip:hover {
|
||||
background: var(--card-hover);
|
||||
border-color: var(--todo);
|
||||
color: var(--text);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--focus-ring);
|
||||
}
|
||||
|
||||
.planning-start-btn {
|
||||
margin-top: 16px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.planning-initial .planning-view-footer {
|
||||
width: 100%;
|
||||
max-width: 568px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Question View */
|
||||
.planning-question {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.planning-progress {
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.planning-progress-bar {
|
||||
height: 4px;
|
||||
background: var(--border);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 8px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.planning-progress-fill {
|
||||
height: 100%;
|
||||
.planning-progress-step {
|
||||
height: 4px;
|
||||
border-radius: 999px;
|
||||
background: var(--border);
|
||||
transition: background-color var(--transition-fast);
|
||||
}
|
||||
|
||||
.planning-progress-step.active {
|
||||
background: var(--todo);
|
||||
border-radius: 2px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.planning-progress-text {
|
||||
@@ -5753,16 +5846,41 @@ html .column.drag-over * {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.planning-question-content h4 {
|
||||
.planning-question-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.planning-question-scroll {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.planning-question-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.planning-question-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.planning-question-text {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.planning-question-desc {
|
||||
font-size: 14px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 16px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
@@ -5770,24 +5888,35 @@ html .column.drag-over * {
|
||||
.planning-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.planning-option {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: var(--card);
|
||||
padding: 14px 16px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--radius-lg);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
transition:
|
||||
background var(--transition-fast),
|
||||
border-color var(--transition-fast),
|
||||
box-shadow var(--transition-fast),
|
||||
transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.planning-option--radio,
|
||||
.planning-option--checkbox {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.planning-option:hover {
|
||||
background: var(--card-hover);
|
||||
border-color: var(--border-hover);
|
||||
border-color: var(--todo);
|
||||
box-shadow: var(--focus-ring);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.planning-option input[type="radio"],
|
||||
@@ -5817,7 +5946,7 @@ html .column.drag-over * {
|
||||
.planning-checkbox-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.planning-confirm-group {
|
||||
@@ -5828,20 +5957,35 @@ html .column.drag-over * {
|
||||
.planning-confirm-btn {
|
||||
flex: 1;
|
||||
padding: 12px 24px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.planning-confirm-btn.selected {
|
||||
background: var(--todo);
|
||||
color: white;
|
||||
color: var(--bg);
|
||||
border-color: var(--todo);
|
||||
}
|
||||
|
||||
/* Actions */
|
||||
.planning-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-top: 8px;
|
||||
padding: 16px 24px 24px;
|
||||
border-top: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.planning-actions .btn {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.planning-actions-primary {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.planning-back-btn {
|
||||
@@ -5855,6 +5999,8 @@ html .column.drag-over * {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.planning-summary-header {
|
||||
@@ -5869,39 +6015,82 @@ html .column.drag-over * {
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.planning-summary-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
.planning-summary-scroll {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.planning-size-selector {
|
||||
.planning-summary-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.planning-summary-form .form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 16px;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.planning-summary-form .form-group label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.planning-expand-btn {
|
||||
margin-left: auto;
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--todo);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.planning-expand-btn:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.planning-size-selector {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.planning-size-btn {
|
||||
flex: 1;
|
||||
padding: 12px;
|
||||
min-width: 0;
|
||||
padding: 14px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: var(--card);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
border-radius: var(--radius-lg);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
transition:
|
||||
background var(--transition-fast),
|
||||
border-color var(--transition-fast),
|
||||
box-shadow var(--transition-fast),
|
||||
transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.planning-size-btn:hover {
|
||||
background: var(--card-hover);
|
||||
border-color: var(--border-hover);
|
||||
border-color: var(--todo);
|
||||
box-shadow: var(--focus-ring);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.planning-size-btn.selected {
|
||||
background: rgba(88, 166, 255, 0.15);
|
||||
background: var(--card-hover);
|
||||
border-color: var(--todo);
|
||||
box-shadow: inset 0 0 0 1px var(--todo);
|
||||
}
|
||||
|
||||
.planning-size-label {
|
||||
@@ -5912,26 +6101,43 @@ html .column.drag-over * {
|
||||
.planning-deps-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
gap: 8px;
|
||||
max-height: 120px;
|
||||
max-height: 180px;
|
||||
overflow-y: auto;
|
||||
padding-right: 4px;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.planning-dep-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 10px;
|
||||
background: var(--card);
|
||||
min-width: 0;
|
||||
padding: 8px 12px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
transition:
|
||||
background var(--transition-fast),
|
||||
border-color var(--transition-fast),
|
||||
box-shadow var(--transition-fast),
|
||||
transform var(--transition-fast);
|
||||
}
|
||||
|
||||
.planning-dep-chip:hover {
|
||||
background: var(--card-hover);
|
||||
border-color: var(--todo);
|
||||
box-shadow: var(--focus-ring);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.planning-dep-chip.selected {
|
||||
background: var(--card-hover);
|
||||
border-color: var(--todo);
|
||||
box-shadow: inset 0 0 0 1px var(--todo);
|
||||
}
|
||||
|
||||
.planning-dep-chip input[type="checkbox"] {
|
||||
@@ -5953,31 +6159,43 @@ html .column.drag-over * {
|
||||
}
|
||||
|
||||
.planning-deliverables {
|
||||
list-style: disc;
|
||||
padding-left: 20px;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
color: var(--text-muted);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.planning-deliverables li {
|
||||
margin: 4px 0;
|
||||
position: relative;
|
||||
padding-left: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.planning-deliverables li::before {
|
||||
content: "•";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--todo);
|
||||
}
|
||||
|
||||
.planning-summary-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* Loading State */
|
||||
.planning-loading {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 300px;
|
||||
gap: 16px;
|
||||
padding: 24px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
@@ -5986,13 +6204,41 @@ html .column.drag-over * {
|
||||
.planning-modal {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.planning-modal-body {
|
||||
.planning-error {
|
||||
margin: 16px 16px 0;
|
||||
}
|
||||
|
||||
.planning-view-scroll {
|
||||
padding: 16px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.planning-view-footer,
|
||||
.planning-actions {
|
||||
padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.planning-actions {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.planning-actions .btn,
|
||||
.planning-start-btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.planning-actions-primary {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.planning-example-chips {
|
||||
@@ -6001,15 +6247,34 @@ html .column.drag-over * {
|
||||
}
|
||||
|
||||
.planning-example-chip {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.planning-size-selector {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.planning-size-btn {
|
||||
min-height: 72px;
|
||||
padding: 12px 10px;
|
||||
}
|
||||
|
||||
.planning-deps-list {
|
||||
max-height: 160px;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.planning-dep-chip {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
.planning-dep-title {
|
||||
max-width: 100px;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user