stack-agent 0.2.0 → 0.3.0

package/dist/index.js

@@ -6,14 +6,14 @@ import { withFullScreen } from "fullscreen-ink";
 
 // src/cli/app.tsx
 import { useState as useState5, useEffect as useEffect2, useCallback } from "react";
-import { Box as Box7, Text as Text7, useApp, useInput as useInput3 } from "ink";
+import { Box as Box8, Text as Text8, useApp, useInput as useInput3 } from "ink";
 import { useScreenSize } from "fullscreen-ink";
 
 // src/cli/components/header.tsx
 import { Box, Text } from "ink";
 import { jsx, jsxs } from "react/jsx-runtime";
-function Header({ appName, currentStage, stages, showDots = false }) {
-  const stageName = currentStage?.label ?? "Stack Progress";
+function Header({ appName, currentStage, stages, showDots = false, title }) {
+  const stageName = title ?? currentStage?.label ?? "Stack Progress";
   return /* @__PURE__ */ jsxs(Box, { borderStyle: "single", borderBottom: false, paddingX: 1, justifyContent: "space-between", children: [
     /* @__PURE__ */ jsxs(Box, { gap: 2, children: [
       /* @__PURE__ */ jsx(Text, { bold: true, color: "cyan", children: appName }),
@@ -53,6 +53,9 @@ function Footer({ progress, stages, terminalWidth, mode = "decisions" }) {
     case "input":
       display = "Enter submit \xB7 Esc stages";
       break;
+    case "scaffold":
+      display = "Scaffolding your project...";
+      break;
     default:
       display = buildDecisionsDisplay(progress, stages, terminalWidth);
       break;
@@ -391,7 +394,7 @@ function getMissingDecisions(progress) {
 }
 
 // src/cli/app.tsx
-import { TextInput as TextInput2, Spinner as Spinner2 } from "@inkjs/ui";
+import { TextInput as TextInput2, Spinner as Spinner3 } from "@inkjs/ui";
 
 // src/cli/components/project-info-form.tsx
 import { useState as useState4 } from "react";
@@ -444,6 +447,26 @@ function ProjectInfoForm({ onSubmit }) {
   ] });
 }
 
+// src/cli/components/scaffold-view.tsx
+import { Box as Box7, Text as Text7 } from "ink";
+import { Spinner as Spinner2 } from "@inkjs/ui";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function ScaffoldView({ steps }) {
+  return /* @__PURE__ */ jsx7(Box7, { flexDirection: "column", children: steps.map((step, i) => /* @__PURE__ */ jsxs5(Box7, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs5(Box7, { children: [
+      step.status === "running" && /* @__PURE__ */ jsx7(Spinner2, {}),
+      step.status === "done" && /* @__PURE__ */ jsx7(Text7, { color: "green", children: "\u2713" }),
+      step.status === "error" && /* @__PURE__ */ jsx7(Text7, { color: "red", children: "\u2717" }),
+      /* @__PURE__ */ jsxs5(Text7, { bold: step.status === "running", children: [
+        " ",
+        step.name
+      ] })
+    ] }),
+    step.status === "done" && step.files && step.files.length > 0 && /* @__PURE__ */ jsx7(Box7, { paddingLeft: 3, children: /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: step.files.join(", ") }) }),
+    step.status === "error" && step.error && /* @__PURE__ */ jsx7(Box7, { paddingLeft: 3, children: /* @__PURE__ */ jsx7(Text7, { color: "red", children: step.error }) })
+  ] }, i)) });
+}
+
 // src/cli/bridge.ts
 function createBridge() {
   const listeners = /* @__PURE__ */ new Map();
@@ -709,6 +732,10 @@ function scaffoldToolDefinitions() {
       input_schema: {
         type: "object",
         properties: {
+          name: {
+            type: "string",
+            description: 'Short name for this integration (e.g. "Database", "Auth", "AI Chat", "Deploy Config").'
+          },
           files: {
             type: "object",
             additionalProperties: { type: "string" },
@@ -735,7 +762,7 @@ function scaffoldToolDefinitions() {
             description: "List of environment variable names required by the integration."
           }
         },
-        required: ["files"]
+        required: ["name", "files"]
       }
     }
   ];
@@ -1068,14 +1095,7 @@ async function runStageLoop(stage, manager, bridge, mcpServers) {
     messages.push({ role: "user", content: inputResult.value });
   }
 }
-function createSimpleSpinner() {
-  return {
-    start: (msg) => process.stdout.write(`  ${msg}...`),
-    stop: (msg) => process.stdout.write(` ${msg}
-`)
-  };
-}
-async function runScaffoldLoop(progress, mcpServers) {
+async function runScaffoldLoop(progress, onProgress, mcpServers) {
   const messages = [];
   const system = buildScaffoldPrompt(progress);
   const cwd = process.cwd();
@@ -1083,11 +1103,22 @@ async function runScaffoldLoop(progress, mcpServers) {
   const projectDir = join2(cwd, projectName);
   let toolCallCount = 0;
   const maxToolCalls = 30;
+  const steps = [];
+  function pushStep(step) {
+    steps.push(step);
+    onProgress?.([...steps]);
+  }
+  function updateLastStep(patch) {
+    const last = steps[steps.length - 1];
+    if (last) Object.assign(last, patch);
+    onProgress?.([...steps]);
+  }
   messages.push({
     role: "user",
     content: "Begin scaffolding the project according to the plan."
   });
   while (true) {
+    pushStep({ name: "Planning next step...", status: "running" });
     const response = await chat({
       system,
       messages,
@@ -1095,6 +1126,8 @@ async function runScaffoldLoop(progress, mcpServers) {
       maxTokens: 16384,
       mcpServers
     });
+    steps.pop();
+    onProgress?.([...steps]);
     const contentBlocks = response.content;
     const toolUseBlocks = contentBlocks.filter(
       (b) => b.type === "tool_use"
@@ -1108,30 +1141,30 @@ async function runScaffoldLoop(progress, mcpServers) {
       const toolBlock = block;
       toolCallCount++;
       if (toolCallCount > maxToolCalls) {
-        console.error(`Tool call limit exceeded (${maxToolCalls}). Stopping scaffold loop.`);
+        pushStep({ name: "Tool call limit exceeded", status: "error", error: `Exceeded ${maxToolCalls} tool calls` });
         return false;
       }
-      const spinner = createSimpleSpinner();
       try {
         if (toolBlock.name === "run_scaffold") {
-          spinner.start(`Running scaffold: ${toolBlock.input.tool}`);
+          pushStep({ name: "Creating project", status: "running" });
           const outputDir = runScaffold(
             toolBlock.input.tool,
             toolBlock.input.args,
             projectName,
             cwd
           );
-          spinner.stop(`Scaffold complete: ${outputDir}`);
+          updateLastStep({ name: "Created project", status: "done" });
           toolResults.push({
             type: "tool_result",
             tool_use_id: toolBlock.id,
             content: `Scaffold completed. Project created at ${outputDir}`
           });
         } else if (toolBlock.name === "add_integration") {
-          const integrationDesc = Object.keys(
+          const files = Object.keys(
             toolBlock.input.files ?? {}
-          ).join(", ");
-          spinner.start(`Adding integration: ${integrationDesc}`);
+          );
+          const integrationName = toolBlock.input.name ?? "Integration";
+          pushStep({ name: `Adding ${integrationName}`, status: "running" });
           writeIntegration(projectDir, {
             files: toolBlock.input.files ?? {},
             dependencies: toolBlock.input.dependencies,
@@ -1139,14 +1172,14 @@ async function runScaffoldLoop(progress, mcpServers) {
             scripts: toolBlock.input.scripts,
             envVars: toolBlock.input.envVars
           });
-          spinner.stop("Integration added");
+          updateLastStep({ name: integrationName, status: "done", files });
           toolResults.push({
             type: "tool_result",
             tool_use_id: toolBlock.id,
             content: "Integration written successfully."
           });
         } else {
-          spinner.stop(`Unknown tool: ${toolBlock.name}`);
+          pushStep({ name: `Unknown tool: ${toolBlock.name}`, status: "error", error: `Unknown tool: "${toolBlock.name}"` });
           toolResults.push({
             type: "tool_result",
             tool_use_id: toolBlock.id,
@@ -1156,7 +1189,7 @@ async function runScaffoldLoop(progress, mcpServers) {
         }
       } catch (err) {
         const errorMessage = err instanceof Error ? err.message : String(err);
-        spinner.stop(`Error: ${errorMessage}`);
+        updateLastStep({ status: "error", error: errorMessage });
         toolResults.push({
           type: "tool_result",
           tool_use_id: toolBlock.id,
@@ -1256,7 +1289,7 @@ function applyRecommendations(progress, stages, recommendations) {
 }
 
 // src/cli/app.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function App({ manager, onBuild, onExit }) {
   const app = useApp();
   const { width, height } = useScreenSize();
@@ -1269,6 +1302,7 @@ function App({ manager, onBuild, onExit }) {
   const [stages, setStages] = useState5([...manager.stages]);
   const [options, setOptions] = useState5([]);
   const [errorMsg, setErrorMsg] = useState5("");
+  const [scaffoldSteps, setScaffoldSteps] = useState5([]);
   const syncState = useCallback(() => {
     setProgress({ ...manager.progress });
     setStages([...manager.stages]);
@@ -1330,7 +1364,7 @@ function App({ manager, onBuild, onExit }) {
     syncState();
     setView("stage_list");
   }, [manager, bridge, syncState]);
-  const handleStageResult = useCallback((result) => {
+  const handleStageResult = useCallback(async (result) => {
     if (result.kind === "select") {
       const stage = manager.stages.find((s) => s.id === result.stageId);
       if (stage && (stage.status === "complete" || stage.status === "skipped")) {
@@ -1339,7 +1373,24 @@ function App({ manager, onBuild, onExit }) {
       }
       runStage(result.stageId);
     } else if (result.kind === "build") {
-      onBuild();
+      setView("scaffold");
+      setScaffoldSteps([]);
+      const onScaffoldProgress = (steps) => {
+        setScaffoldSteps([...steps]);
+      };
+      try {
+        const success = await runScaffoldLoop(manager.progress, onScaffoldProgress);
+        if (success) {
+          manager.cleanup();
+          onBuild();
+        } else {
+          onBuild();
+        }
+      } catch (err) {
+        setErrorMsg(err.message);
+        setView("error");
+        return;
+      }
       app.exit();
     } else if (result.kind === "cancel") {
       manager.save();
@@ -1385,22 +1436,23 @@ function App({ manager, onBuild, onExit }) {
     syncState();
     setView("stage_list");
   }, [manager, syncState]);
-  const footerMode = view === "stage_list" ? "stage_list" : view === "options" ? "options" : view === "input" || view === "project_info" ? "input" : "decisions";
+  const footerMode = view === "scaffold" ? "scaffold" : view === "stage_list" ? "stage_list" : view === "options" ? "options" : view === "input" || view === "project_info" ? "input" : "decisions";
   const contentHeight = height - 4;
-  return /* @__PURE__ */ jsxs5(Box7, { flexDirection: "column", width, height, children: [
-    /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs6(Box8, { flexDirection: "column", width, height, children: [
+    /* @__PURE__ */ jsx8(
       Header,
       {
         appName: "stack-agent",
-        currentStage: view === "stage_list" ? null : currentStage,
+        currentStage: view === "stage_list" || view === "scaffold" ? null : currentStage,
         stages,
-        showDots: view !== "stage_list"
+        showDots: view !== "stage_list" && view !== "scaffold",
+        title: view === "scaffold" ? "Scaffolding" : void 0
       }
     ),
-    /* @__PURE__ */ jsxs5(Box7, { flexDirection: "column", height: contentHeight, paddingX: 1, borderStyle: "single", borderTop: false, borderBottom: false, children: [
-      view === "project_info" && /* @__PURE__ */ jsx7(ProjectInfoForm, { onSubmit: handleProjectInfo }),
-      view === "loading" && /* @__PURE__ */ jsx7(Box7, { flexDirection: "column", children: /* @__PURE__ */ jsx7(Spinner2, { label: "Analyzing your project and recommending a stack..." }) }),
-      view === "stage_list" && /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsxs6(Box8, { flexDirection: "column", height: contentHeight, paddingX: 1, borderStyle: "single", borderTop: false, borderBottom: false, children: [
+      view === "project_info" && /* @__PURE__ */ jsx8(ProjectInfoForm, { onSubmit: handleProjectInfo }),
+      view === "loading" && /* @__PURE__ */ jsx8(Box8, { flexDirection: "column", children: /* @__PURE__ */ jsx8(Spinner3, { label: "Analyzing your project and recommending a stack..." }) }),
+      view === "stage_list" && /* @__PURE__ */ jsx8(
         StageListView,
         {
           stages,
@@ -1409,10 +1461,10 @@ function App({ manager, onBuild, onExit }) {
           onResult: handleStageResult
         }
       ),
-      view === "conversation" && /* @__PURE__ */ jsx7(ConversationView, { bridge, maxLines: contentHeight }),
-      view === "input" && /* @__PURE__ */ jsxs5(Box7, { flexDirection: "column", children: [
-        /* @__PURE__ */ jsx7(ConversationView, { bridge, maxLines: contentHeight - 3 }),
-        /* @__PURE__ */ jsx7(Box7, { marginTop: 1, children: /* @__PURE__ */ jsx7(
+      view === "conversation" && /* @__PURE__ */ jsx8(ConversationView, { bridge, maxLines: contentHeight }),
+      view === "input" && /* @__PURE__ */ jsxs6(Box8, { flexDirection: "column", children: [
+        /* @__PURE__ */ jsx8(ConversationView, { bridge, maxLines: contentHeight - 3 }),
+        /* @__PURE__ */ jsx8(Box8, { marginTop: 1, children: /* @__PURE__ */ jsx8(
           TextInput2,
           {
             placeholder: "Type your response...",
@@ -1420,19 +1472,20 @@ function App({ manager, onBuild, onExit }) {
           }
         ) })
       ] }),
-      view === "options" && /* @__PURE__ */ jsxs5(Box7, { flexDirection: "column", children: [
-        /* @__PURE__ */ jsx7(ConversationView, { bridge, maxLines: contentHeight - 8 }),
-        /* @__PURE__ */ jsx7(OptionSelect, { options, onSelect: handleOptionSelect })
+      view === "options" && /* @__PURE__ */ jsxs6(Box8, { flexDirection: "column", children: [
+        /* @__PURE__ */ jsx8(ConversationView, { bridge, maxLines: contentHeight - 8 }),
+        /* @__PURE__ */ jsx8(OptionSelect, { options, onSelect: handleOptionSelect })
       ] }),
-      view === "error" && /* @__PURE__ */ jsxs5(Box7, { flexDirection: "column", children: [
-        /* @__PURE__ */ jsxs5(Text7, { color: "red", bold: true, children: [
+      view === "error" && /* @__PURE__ */ jsxs6(Box8, { flexDirection: "column", children: [
+        /* @__PURE__ */ jsxs6(Text8, { color: "red", bold: true, children: [
           "Error: ",
           errorMsg
         ] }),
-        /* @__PURE__ */ jsx7(Text7, { dimColor: true, children: "Press Esc to return to stage list" })
-      ] })
+        /* @__PURE__ */ jsx8(Text8, { dimColor: true, children: "Press Esc to return to stage list" })
+      ] }),
+      view === "scaffold" && /* @__PURE__ */ jsx8(ScaffoldView, { steps: scaffoldSteps })
     ] }),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       Footer,
       {
         progress,
@@ -1981,16 +2034,9 @@ Found saved progress for "${existingSession.progress.projectName ?? "unnamed"}"`
   await ink.start();
   await ink.waitUntilExit();
   if (shouldBuild) {
-    console.log("\nScaffolding your project...\n");
-    const success = await runScaffoldLoop(manager.progress);
-    if (success) {
-      const readiness = manager.progress.deployment ? checkDeployReadiness(manager.progress.deployment.component) : null;
-      renderPostScaffold(manager.progress.projectName, readiness);
-      manager.cleanup();
-      console.log("\nHappy building!\n");
-    } else {
-      console.error("\nScaffolding encountered errors. Check the output above.\n");
-    }
+    const readiness = manager.progress.deployment ? checkDeployReadiness(manager.progress.deployment.component) : null;
+    renderPostScaffold(manager.progress.projectName, readiness);
+    console.log("\nHappy building!\n");
   }
 }
 var args = process.argv.slice(2);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stack-agent",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "AI-powered CLI that helps developers choose and scaffold full-stack applications through conversational interaction",
   "type": "module",
   "license": "MIT",