feat(nexus): add brainstormer panel for promote-to-project flow
Phase 12 — the form that rises into the bottom 70% during the promote animation. Collects goal (required), acceptance criteria (one per line), default gate checklist, and engineer template picker. ESC key cancels when not mid-create; goal field autofocuses on mount. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Nexus Dev
parent
d2d41886fa
commit
70698b9e58
2 changed files with 470 additions and 0 deletions
222
ui/src/components/assistant/BrainstormerPanel.test.tsx
Normal file
222
ui/src/components/assistant/BrainstormerPanel.test.tsx
Normal file
|
|
@ -0,0 +1,222 @@
|
|||
// @vitest-environment jsdom
|
||||
|
||||
import { act } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { BrainstormerPanel } from "./BrainstormerPanel";
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
|
||||
|
||||
describe("<BrainstormerPanel />", () => {
|
||||
let container: HTMLDivElement;
|
||||
let root: ReturnType<typeof createRoot> | null = null;
|
||||
|
||||
const noop = () => {};
|
||||
|
||||
beforeEach(() => {
|
||||
container = document.createElement("div");
|
||||
document.body.appendChild(container);
|
||||
root = null;
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
if (root) {
|
||||
act(() => {
|
||||
root!.unmount();
|
||||
});
|
||||
root = null;
|
||||
}
|
||||
if (container.parentNode) container.remove();
|
||||
});
|
||||
|
||||
function render(node: React.ReactNode) {
|
||||
root = createRoot(container);
|
||||
act(() => {
|
||||
root!.render(node);
|
||||
});
|
||||
}
|
||||
|
||||
function setValue(el: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, value: string) {
|
||||
const tag = el.tagName.toLowerCase();
|
||||
const proto =
|
||||
tag === "textarea"
|
||||
? HTMLTextAreaElement.prototype
|
||||
: tag === "select"
|
||||
? HTMLSelectElement.prototype
|
||||
: HTMLInputElement.prototype;
|
||||
const setter = Object.getOwnPropertyDescriptor(proto, "value")?.set;
|
||||
setter?.call(el, value);
|
||||
el.dispatchEvent(new Event("input", { bubbles: true }));
|
||||
el.dispatchEvent(new Event("change", { bubbles: true }));
|
||||
}
|
||||
|
||||
it("renders all form fields, gates, and action buttons", () => {
|
||||
render(
|
||||
<BrainstormerPanel
|
||||
conversationId="c-1"
|
||||
onConfirm={noop}
|
||||
onCancel={noop}
|
||||
/>,
|
||||
);
|
||||
expect(container.querySelector('[data-testid="brainstormer-goal"]')).not.toBeNull();
|
||||
expect(container.querySelector('[data-testid="brainstormer-acceptance"]')).not.toBeNull();
|
||||
expect(container.querySelector('[data-testid="brainstormer-engineer-template"]')).not.toBeNull();
|
||||
expect(container.querySelector('[data-testid="brainstormer-submit"]')).not.toBeNull();
|
||||
expect(container.querySelector('[data-testid="brainstormer-cancel"]')).not.toBeNull();
|
||||
// default gates
|
||||
expect(container.querySelector('[data-testid="brainstormer-gate-pm-review"]')).not.toBeNull();
|
||||
expect(container.querySelector('[data-testid="brainstormer-gate-code-review"]')).not.toBeNull();
|
||||
expect(container.querySelector('[data-testid="brainstormer-gate-design-review"]')).not.toBeNull();
|
||||
expect(container.querySelector('[data-testid="brainstormer-gate-deploy-approval"]')).not.toBeNull();
|
||||
});
|
||||
|
||||
it("threads conversation id onto the form element", () => {
|
||||
render(
|
||||
<BrainstormerPanel
|
||||
conversationId="c-42"
|
||||
onConfirm={noop}
|
||||
onCancel={noop}
|
||||
/>,
|
||||
);
|
||||
const panel = container.querySelector('[data-testid="brainstormer-panel"]') as HTMLElement;
|
||||
expect(panel.getAttribute("data-conversation-id")).toBe("c-42");
|
||||
});
|
||||
|
||||
it("shows a validation error and blocks confirm when goal is empty", () => {
|
||||
const onConfirm = vi.fn();
|
||||
render(
|
||||
<BrainstormerPanel
|
||||
conversationId="c-1"
|
||||
onConfirm={onConfirm}
|
||||
onCancel={noop}
|
||||
/>,
|
||||
);
|
||||
const submit = container.querySelector('[data-testid="brainstormer-submit"]') as HTMLButtonElement;
|
||||
act(() => {
|
||||
submit.click();
|
||||
});
|
||||
expect(onConfirm).not.toHaveBeenCalled();
|
||||
const error = container.querySelector('[data-testid="brainstormer-validation-error"]');
|
||||
expect(error).not.toBeNull();
|
||||
expect(error?.textContent).toContain("Goal is required");
|
||||
});
|
||||
|
||||
it("calls onConfirm with the full payload on submit", () => {
|
||||
const onConfirm = vi.fn();
|
||||
render(
|
||||
<BrainstormerPanel
|
||||
conversationId="c-1"
|
||||
onConfirm={onConfirm}
|
||||
onCancel={noop}
|
||||
engineerTemplates={[{ id: "tpl-1", label: "Frontend" }]}
|
||||
/>,
|
||||
);
|
||||
|
||||
const goal = container.querySelector('[data-testid="brainstormer-goal"]') as HTMLTextAreaElement;
|
||||
const acceptance = container.querySelector('[data-testid="brainstormer-acceptance"]') as HTMLTextAreaElement;
|
||||
const tpl = container.querySelector('[data-testid="brainstormer-engineer-template"]') as HTMLSelectElement;
|
||||
|
||||
act(() => {
|
||||
setValue(goal, "Ship Phase 12");
|
||||
setValue(acceptance, "animation lands\nESC cancels\n");
|
||||
setValue(tpl, "tpl-1");
|
||||
});
|
||||
|
||||
// toggle design-review on, pm-review stays on.
|
||||
const designGate = container.querySelector('[data-testid="brainstormer-gate-design-review"]') as HTMLInputElement;
|
||||
act(() => {
|
||||
designGate.click();
|
||||
});
|
||||
|
||||
const submit = container.querySelector('[data-testid="brainstormer-submit"]') as HTMLButtonElement;
|
||||
act(() => {
|
||||
submit.click();
|
||||
});
|
||||
|
||||
expect(onConfirm).toHaveBeenCalledTimes(1);
|
||||
const payload = onConfirm.mock.calls[0]![0];
|
||||
expect(payload).toMatchObject({
|
||||
goal: "Ship Phase 12",
|
||||
acceptanceCriteria: ["animation lands", "ESC cancels"],
|
||||
engineerTemplateId: "tpl-1",
|
||||
});
|
||||
expect(payload.gates).toEqual(expect.arrayContaining(["pm-review", "code-review", "design-review"]));
|
||||
});
|
||||
|
||||
it("calls onCancel on Cancel click", () => {
|
||||
const onCancel = vi.fn();
|
||||
render(
|
||||
<BrainstormerPanel
|
||||
conversationId="c-1"
|
||||
onConfirm={noop}
|
||||
onCancel={onCancel}
|
||||
/>,
|
||||
);
|
||||
const cancel = container.querySelector('[data-testid="brainstormer-cancel"]') as HTMLButtonElement;
|
||||
act(() => {
|
||||
cancel.click();
|
||||
});
|
||||
expect(onCancel).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("cancels on Escape key when not creating", () => {
|
||||
const onCancel = vi.fn();
|
||||
render(
|
||||
<BrainstormerPanel
|
||||
conversationId="c-1"
|
||||
onConfirm={noop}
|
||||
onCancel={onCancel}
|
||||
/>,
|
||||
);
|
||||
act(() => {
|
||||
window.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
|
||||
});
|
||||
expect(onCancel).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it("does NOT cancel on Escape when isCreating", () => {
|
||||
const onCancel = vi.fn();
|
||||
render(
|
||||
<BrainstormerPanel
|
||||
conversationId="c-1"
|
||||
onConfirm={noop}
|
||||
onCancel={onCancel}
|
||||
isCreating
|
||||
/>,
|
||||
);
|
||||
act(() => {
|
||||
window.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
|
||||
});
|
||||
expect(onCancel).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("disables inputs and shows 'Creating…' on submit button when isCreating", () => {
|
||||
render(
|
||||
<BrainstormerPanel
|
||||
conversationId="c-1"
|
||||
onConfirm={noop}
|
||||
onCancel={noop}
|
||||
isCreating
|
||||
/>,
|
||||
);
|
||||
const submit = container.querySelector('[data-testid="brainstormer-submit"]') as HTMLButtonElement;
|
||||
expect(submit.disabled).toBe(true);
|
||||
expect(submit.textContent).toContain("Creating");
|
||||
const goal = container.querySelector('[data-testid="brainstormer-goal"]') as HTMLTextAreaElement;
|
||||
expect(goal.disabled).toBe(true);
|
||||
});
|
||||
|
||||
it("renders an error alert when errorMessage is provided", () => {
|
||||
render(
|
||||
<BrainstormerPanel
|
||||
conversationId="c-1"
|
||||
onConfirm={noop}
|
||||
onCancel={noop}
|
||||
errorMessage="boom"
|
||||
/>,
|
||||
);
|
||||
const err = container.querySelector('[data-testid="brainstormer-error"]');
|
||||
expect(err?.textContent).toContain("boom");
|
||||
});
|
||||
});
|
||||
248
ui/src/components/assistant/BrainstormerPanel.tsx
Normal file
248
ui/src/components/assistant/BrainstormerPanel.tsx
Normal file
|
|
@ -0,0 +1,248 @@
|
|||
// [nexus] Phase 12 — BrainstormerPanel.
|
||||
//
|
||||
// The form that rises into the bottom 70% during the promote-to-project
|
||||
// transition (spec §5.6). Collects:
|
||||
//
|
||||
// - Goal (required)
|
||||
// - Acceptance criteria (one per line)
|
||||
// - Gates (checklist with default suggestions)
|
||||
// - Engineer template picker
|
||||
//
|
||||
// The panel is controlled: the parent hook (usePromoteToProject) owns
|
||||
// the commit step. This component just gathers input and calls
|
||||
// `onConfirm(payload)` or `onCancel()`.
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { BrainstormerPayload } from "../../hooks/usePromoteToProject";
|
||||
|
||||
export interface BrainstormerPanelProps {
|
||||
conversationId: string;
|
||||
onConfirm: (payload: BrainstormerPayload) => void | Promise<void>;
|
||||
onCancel: () => void;
|
||||
isCreating?: boolean;
|
||||
errorMessage?: string | null;
|
||||
/**
|
||||
* Optional list of engineer templates to pick from. Phase 12 ships with
|
||||
* no backend wiring — caller passes in the catalog if available.
|
||||
*/
|
||||
engineerTemplates?: Array<{ id: string; label: string }>;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const DEFAULT_GATES: ReadonlyArray<{ id: string; label: string }> = [
|
||||
{ id: "pm-review", label: "PM review before implementation" },
|
||||
{ id: "design-review", label: "Design review on visual changes" },
|
||||
{ id: "code-review", label: "Code review before merge" },
|
||||
{ id: "deploy-approval", label: "Deploy approval" },
|
||||
];
|
||||
|
||||
export function BrainstormerPanel({
|
||||
conversationId,
|
||||
onConfirm,
|
||||
onCancel,
|
||||
isCreating = false,
|
||||
errorMessage = null,
|
||||
engineerTemplates = [],
|
||||
className,
|
||||
}: BrainstormerPanelProps) {
|
||||
const [goal, setGoal] = useState("");
|
||||
const [acceptance, setAcceptance] = useState("");
|
||||
const [selectedGates, setSelectedGates] = useState<Set<string>>(
|
||||
() => new Set(["pm-review", "code-review"]),
|
||||
);
|
||||
const [engineerTemplateId, setEngineerTemplateId] = useState<string>("");
|
||||
const [validationError, setValidationError] = useState<string | null>(null);
|
||||
|
||||
const goalRef = useRef<HTMLTextAreaElement>(null);
|
||||
|
||||
// Autofocus goal field when mounted.
|
||||
useEffect(() => {
|
||||
goalRef.current?.focus();
|
||||
}, []);
|
||||
|
||||
// ESC cancels.
|
||||
useEffect(() => {
|
||||
function handleKey(e: KeyboardEvent) {
|
||||
if (e.key === "Escape" && !isCreating) {
|
||||
e.preventDefault();
|
||||
onCancel();
|
||||
}
|
||||
}
|
||||
window.addEventListener("keydown", handleKey);
|
||||
return () => window.removeEventListener("keydown", handleKey);
|
||||
}, [onCancel, isCreating]);
|
||||
|
||||
const toggleGate = useCallback((id: string) => {
|
||||
setSelectedGates((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(id)) next.delete(id);
|
||||
else next.add(id);
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleSubmit = useCallback(
|
||||
(e?: React.FormEvent) => {
|
||||
if (e) e.preventDefault();
|
||||
if (!goal.trim()) {
|
||||
setValidationError("Goal is required.");
|
||||
goalRef.current?.focus();
|
||||
return;
|
||||
}
|
||||
setValidationError(null);
|
||||
const payload: BrainstormerPayload = {
|
||||
goal: goal.trim(),
|
||||
acceptanceCriteria: acceptance
|
||||
.split("\n")
|
||||
.map((l) => l.trim())
|
||||
.filter((l) => l.length > 0),
|
||||
gates: Array.from(selectedGates),
|
||||
engineerTemplateId: engineerTemplateId || undefined,
|
||||
};
|
||||
void onConfirm(payload);
|
||||
},
|
||||
[goal, acceptance, selectedGates, engineerTemplateId, onConfirm],
|
||||
);
|
||||
|
||||
return (
|
||||
<form
|
||||
data-testid="brainstormer-panel"
|
||||
data-conversation-id={conversationId}
|
||||
onSubmit={handleSubmit}
|
||||
className={cn(
|
||||
"flex h-full w-full flex-col gap-4 overflow-auto bg-card p-6",
|
||||
"border-t border-border",
|
||||
className,
|
||||
)}
|
||||
aria-label="Promote conversation to project"
|
||||
>
|
||||
<header className="flex items-center justify-between">
|
||||
<h2 className="text-[14px] font-semibold uppercase tracking-[0.14em] text-foreground">
|
||||
Brainstormer
|
||||
</h2>
|
||||
<div className="text-[10px] uppercase tracking-[0.14em] text-muted-foreground">
|
||||
PM agent auto-assigned
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Goal */}
|
||||
<label className="flex flex-col gap-1.5">
|
||||
<span className="text-[11px] font-medium uppercase tracking-[0.12em] text-muted-foreground">
|
||||
Goal
|
||||
</span>
|
||||
<textarea
|
||||
ref={goalRef}
|
||||
data-testid="brainstormer-goal"
|
||||
value={goal}
|
||||
onChange={(e) => setGoal(e.target.value)}
|
||||
rows={3}
|
||||
disabled={isCreating}
|
||||
placeholder="What are we building?"
|
||||
className="rounded-[4px] border border-border bg-background px-3 py-2 text-[13px] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary disabled:opacity-50"
|
||||
/>
|
||||
</label>
|
||||
|
||||
{/* Acceptance criteria */}
|
||||
<label className="flex flex-col gap-1.5">
|
||||
<span className="text-[11px] font-medium uppercase tracking-[0.12em] text-muted-foreground">
|
||||
Acceptance criteria
|
||||
</span>
|
||||
<textarea
|
||||
data-testid="brainstormer-acceptance"
|
||||
value={acceptance}
|
||||
onChange={(e) => setAcceptance(e.target.value)}
|
||||
rows={4}
|
||||
disabled={isCreating}
|
||||
placeholder={"One per line\nAll tests pass\nDesign review approved"}
|
||||
className="rounded-[4px] border border-border bg-background px-3 py-2 text-[13px] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary disabled:opacity-50"
|
||||
/>
|
||||
</label>
|
||||
|
||||
{/* Gates */}
|
||||
<fieldset className="flex flex-col gap-2" disabled={isCreating}>
|
||||
<legend className="text-[11px] font-medium uppercase tracking-[0.12em] text-muted-foreground">
|
||||
Gates
|
||||
</legend>
|
||||
<div className="flex flex-col gap-1">
|
||||
{DEFAULT_GATES.map((gate) => (
|
||||
<label
|
||||
key={gate.id}
|
||||
className="flex items-center gap-2 text-[13px] text-foreground"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
data-testid={`brainstormer-gate-${gate.id}`}
|
||||
checked={selectedGates.has(gate.id)}
|
||||
onChange={() => toggleGate(gate.id)}
|
||||
className="h-3.5 w-3.5 rounded-[2px] border-border accent-primary"
|
||||
/>
|
||||
<span>{gate.label}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
{/* Engineer template */}
|
||||
<label className="flex flex-col gap-1.5">
|
||||
<span className="text-[11px] font-medium uppercase tracking-[0.12em] text-muted-foreground">
|
||||
Engineer template
|
||||
</span>
|
||||
<select
|
||||
data-testid="brainstormer-engineer-template"
|
||||
value={engineerTemplateId}
|
||||
onChange={(e) => setEngineerTemplateId(e.target.value)}
|
||||
disabled={isCreating}
|
||||
className="rounded-[4px] border border-border bg-background px-3 py-2 text-[13px] text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary disabled:opacity-50"
|
||||
>
|
||||
<option value="">— Pick later —</option>
|
||||
{engineerTemplates.map((t) => (
|
||||
<option key={t.id} value={t.id}>
|
||||
{t.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{/* Validation / error */}
|
||||
{validationError && (
|
||||
<p
|
||||
data-testid="brainstormer-validation-error"
|
||||
role="alert"
|
||||
className="text-[12px] text-destructive"
|
||||
>
|
||||
{validationError}
|
||||
</p>
|
||||
)}
|
||||
{errorMessage && (
|
||||
<p
|
||||
data-testid="brainstormer-error"
|
||||
role="alert"
|
||||
className="text-[12px] text-destructive"
|
||||
>
|
||||
{errorMessage}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="mt-auto flex items-center justify-end gap-2 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
data-testid="brainstormer-cancel"
|
||||
onClick={onCancel}
|
||||
disabled={isCreating}
|
||||
className="rounded-[4px] px-3 py-1.5 text-[12px] font-medium uppercase tracking-[0.1em] text-muted-foreground hover:text-foreground disabled:opacity-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
data-testid="brainstormer-submit"
|
||||
disabled={isCreating}
|
||||
className="inline-flex items-center gap-2 rounded-[4px] border border-primary px-3 py-1.5 text-[12px] font-medium uppercase tracking-[0.1em] text-primary hover:bg-primary/10 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{isCreating ? "Creating…" : "Create project"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue