storkit: merge 429_story_interactive_project_setup_wizard_for_new_storkit_projects

2026-03-28 13:26:29 +00:00
parent 9feed0f882
commit 0b50c66caa
10 changed files with 1217 additions and 59 deletions
@@ -4,7 +4,11 @@ import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
 import type { AgentConfigInfo } from "../api/agents";
 import { agentsApi } from "../api/agents";
-import type { AnthropicModelInfo, PipelineState } from "../api/client";
+import type {
+	AnthropicModelInfo,
+	PipelineState,
+	WizardStateData,
+} from "../api/client";
 import { api, ChatWebSocket } from "../api/client";
 import { useChatHistory } from "../hooks/useChatHistory";
 import type { Message, ProviderConfig } from "../types";
@@ -17,6 +21,7 @@ import { LozengeFlyProvider } from "./LozengeFlyContext";
 import { MessageItem } from "./MessageItem";
 import type { LogEntry } from "./ServerLogsPanel";
 import { ServerLogsPanel } from "./ServerLogsPanel";
+import SetupWizard from "./SetupWizard";
 import { SideQuestionOverlay } from "./SideQuestionOverlay";
 import { StagePanel } from "./StagePanel";
 import { WorkItemDetailPanel } from "./WorkItemDetailPanel";
@@ -217,6 +222,7 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 		new Map(),
 	);
 	const [needsOnboarding, setNeedsOnboarding] = useState(false);
+	const [wizardState, setWizardState] = useState<WizardStateData | null>(null);
 	const onboardingTriggeredRef = useRef(false);
 	const [selectedWorkItemId, setSelectedWorkItemId] = useState<string | null>(
 		null,
@@ -466,6 +472,9 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 			onOnboardingStatus: (onboarding: boolean) => {
 				setNeedsOnboarding(onboarding);
 			},
+			onWizardState: (state: WizardStateData) => {
+				setWizardState(state);
+			},
 			onSideQuestionToken: (content) => {
 				setSideQuestion((prev) =>
 					prev ? { ...prev, response: prev.response + content } : prev,
@@ -978,63 +987,76 @@ export function Chat({ projectPath, onCloseProject }: ChatProps) {
 								gap: "24px",
 							}}
 						>
-							{needsOnboarding && messages.length === 0 && !loading && (
-								<div
-									data-testid="onboarding-welcome"
-									style={{
-										padding: "24px",
-										borderRadius: "12px",
-										background: "#1c2a1c",
-										border: "1px solid #2d4a2d",
-										marginBottom: "8px",
-									}}
-								>
-									<h3
+							{wizardState &&
+								!wizardState.completed &&
+								messages.length === 0 &&
+								!loading && (
+									<SetupWizard
+										wizardState={wizardState}
+										onWizardUpdate={setWizardState}
+										sendMessage={sendMessage}
+									/>
+								)}
+							{needsOnboarding &&
+								!wizardState &&
+								messages.length === 0 &&
+								!loading && (
+									<div
+										data-testid="onboarding-welcome"
 										style={{
-											margin: "0 0 8px 0",
-											color: "#a0d4a0",
-											fontSize: "1.1rem",
+											padding: "24px",
+											borderRadius: "12px",
+											background: "#1c2a1c",
+											border: "1px solid #2d4a2d",
+											marginBottom: "8px",
 										}}
 									>
-										Welcome to Storkit
-									</h3>
-									<p
-										style={{
-											margin: "0 0 16px 0",
-											color: "#ccc",
-											lineHeight: 1.5,
-										}}
-									>
-										This project needs to be set up before you can start writing
-										stories. The agent will guide you through configuring your
-										project goals and tech stack.
-									</p>
-									<button
-										type="button"
-										data-testid="onboarding-start-button"
-										onClick={() => {
-											if (onboardingTriggeredRef.current) return;
-											onboardingTriggeredRef.current = true;
-											setNeedsOnboarding(false);
-											sendMessage(
-												"I just created a new project. Help me set it up.",
-											);
-										}}
-										style={{
-											padding: "10px 20px",
-											borderRadius: "8px",
-											border: "none",
-											backgroundColor: "#a0d4a0",
-											color: "#1a1a1a",
-											cursor: "pointer",
-											fontSize: "0.95rem",
-											fontWeight: 600,
-										}}
-									>
-										Start Project Setup
-									</button>
-								</div>
-							)}
+										<h3
+											style={{
+												margin: "0 0 8px 0",
+												color: "#a0d4a0",
+												fontSize: "1.1rem",
+											}}
+										>
+											Welcome to Storkit
+										</h3>
+										<p
+											style={{
+												margin: "0 0 16px 0",
+												color: "#ccc",
+												lineHeight: 1.5,
+											}}
+										>
+											This project needs to be set up before you can start
+											writing stories. The agent will guide you through
+											configuring your project goals and tech stack.
+										</p>
+										<button
+											type="button"
+											data-testid="onboarding-start-button"
+											onClick={() => {
+												if (onboardingTriggeredRef.current) return;
+												onboardingTriggeredRef.current = true;
+												setNeedsOnboarding(false);
+												sendMessage(
+													"I just created a new project. Help me set it up.",
+												);
+											}}
+											style={{
+												padding: "10px 20px",
+												borderRadius: "8px",
+												border: "none",
+												backgroundColor: "#a0d4a0",
+												color: "#1a1a1a",
+												cursor: "pointer",
+												fontSize: "0.95rem",
+												fontWeight: 600,
+											}}
+										>
+											Start Project Setup
+										</button>
+									</div>
+								)}
 							{messages.map((msg: Message, idx: number) => (
 								<MessageItem
 									key={`msg-${idx}-${msg.role}-${msg.content.substring(0, 20)}`}