@shepai/cli 1.30.0 → 1.32.0

package/dist/packages/core/src/infrastructure/services/git/git-pr.service.js

@@ -0,0 +1,182 @@
+/**
+ * Git PR Service Implementation
+ *
+ * Manages git operations for PR creation, merging, and CI status checks.
+ * Uses constructor dependency injection for the command executor.
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var __param = (this && this.__param) || function (paramIndex, decorator) {
+    return function (target, key) { decorator(target, key, paramIndex); }
+};
+import { injectable, inject } from 'tsyringe';
+import { GitPrError, GitPrErrorCode, } from '../../../application/ports/output/services/git-pr-service.interface.js';
+let GitPrService = class GitPrService {
+    execFile;
+    constructor(execFile) {
+        this.execFile = execFile;
+    }
+    async hasUncommittedChanges(cwd) {
+        const { stdout } = await this.execFile('git', ['status', '--porcelain'], { cwd });
+        return stdout.trim().length > 0;
+    }
+    async commitAll(cwd, message) {
+        try {
+            await this.execFile('git', ['add', '-A'], { cwd });
+            await this.execFile('git', ['commit', '-m', message], { cwd });
+            const { stdout } = await this.execFile('git', ['rev-parse', 'HEAD'], { cwd });
+            return stdout.trim();
+        }
+        catch (error) {
+            throw this.parseGitError(error);
+        }
+    }
+    async push(cwd, branch, setUpstream) {
+        const args = ['push'];
+        if (setUpstream)
+            args.push('--set-upstream');
+        args.push('origin', branch);
+        try {
+            await this.execFile('git', args, { cwd });
+        }
+        catch (error) {
+            throw this.parseGitError(error);
+        }
+    }
+    async createPr(cwd, prYamlPath) {
+        try {
+            const { stdout } = await this.execFile('gh', ['pr', 'create', '--title', prYamlPath, '--body-file', prYamlPath], { cwd });
+            const url = stdout.trim();
+            const number = this.parsePrNumberFromUrl(url);
+            return { url, number };
+        }
+        catch (error) {
+            throw this.parseGhError(error);
+        }
+    }
+    async mergePr(cwd, prNumber, strategy = 'squash') {
+        try {
+            await this.execFile('gh', ['pr', 'merge', String(prNumber), `--${strategy}`], { cwd });
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            const cause = error instanceof Error ? error : undefined;
+            throw new GitPrError(message, GitPrErrorCode.MERGE_FAILED, cause);
+        }
+    }
+    async mergeBranch(cwd, sourceBranch, targetBranch) {
+        try {
+            await this.execFile('git', ['checkout', targetBranch], { cwd });
+            await this.execFile('git', ['merge', sourceBranch], { cwd });
+            await this.execFile('git', ['push'], { cwd });
+        }
+        catch (error) {
+            throw this.parseGitError(error);
+        }
+    }
+    async getCiStatus(cwd, branch) {
+        const { stdout } = await this.execFile('gh', ['run', 'list', '--branch', branch, '--json', 'conclusion,url', '--limit', '1'], { cwd });
+        const runs = JSON.parse(stdout);
+        if (runs.length === 0 || !runs[0].conclusion) {
+            return { status: 'pending', runUrl: runs[0]?.url };
+        }
+        return {
+            status: runs[0].conclusion === 'success' ? 'success' : 'failure',
+            runUrl: runs[0].url,
+        };
+    }
+    async watchCi(cwd, branch, timeoutMs) {
+        try {
+            const args = ['run', 'watch', '--branch', branch];
+            const { stdout } = await this.execFile('gh', args, {
+                cwd,
+                ...(timeoutMs ? { timeout: timeoutMs } : {}),
+            });
+            const isSuccess = stdout.includes('success') || stdout.includes('completed');
+            return {
+                status: isSuccess ? 'success' : 'failure',
+                logExcerpt: stdout.trim(),
+            };
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            const cause = error instanceof Error ? error : undefined;
+            if (message.includes('timed out') || message.includes('timeout')) {
+                throw new GitPrError(message, GitPrErrorCode.CI_TIMEOUT, cause);
+            }
+            throw new GitPrError(message, GitPrErrorCode.GIT_ERROR, cause);
+        }
+    }
+    async deleteBranch(cwd, branch, deleteRemote) {
+        try {
+            await this.execFile('git', ['branch', '-d', branch], { cwd });
+            if (deleteRemote) {
+                await this.execFile('git', ['push', 'origin', '--delete', branch], { cwd });
+            }
+        }
+        catch (error) {
+            throw this.parseGitError(error);
+        }
+    }
+    async getPrDiffSummary(cwd, baseBranch) {
+        const { stdout: diffStat } = await this.execFile('git', ['diff', '--stat', `${baseBranch}...HEAD`], { cwd });
+        const { stdout: logOutput } = await this.execFile('git', ['log', '--oneline', `${baseBranch}...HEAD`], { cwd });
+        return this.parseDiffStat(diffStat, logOutput);
+    }
+    parseGitError(error) {
+        const message = error instanceof Error ? error.message : String(error);
+        const cause = error instanceof Error ? error : undefined;
+        if (message.includes('rejected') || message.includes('conflict')) {
+            return new GitPrError(message, GitPrErrorCode.MERGE_CONFLICT, cause);
+        }
+        if (message.includes('Authentication') || message.includes('auth') || message.includes('403')) {
+            return new GitPrError(message, GitPrErrorCode.AUTH_FAILURE, cause);
+        }
+        return new GitPrError(message, GitPrErrorCode.GIT_ERROR, cause);
+    }
+    parseGhError(error) {
+        const message = error instanceof Error ? error.message : String(error);
+        const cause = error instanceof Error ? error : undefined;
+        const errnoCode = error?.code;
+        if (errnoCode === 'ENOENT' || message.includes('ENOENT')) {
+            return new GitPrError(message, GitPrErrorCode.GH_NOT_FOUND, cause);
+        }
+        if (message.includes('Authentication') || message.includes('auth') || message.includes('403')) {
+            return new GitPrError(message, GitPrErrorCode.AUTH_FAILURE, cause);
+        }
+        return new GitPrError(message, GitPrErrorCode.GIT_ERROR, cause);
+    }
+    parsePrNumberFromUrl(url) {
+        const match = url.match(/\/pull\/(\d+)/);
+        return match ? parseInt(match[1], 10) : 0;
+    }
+    parseDiffStat(diffStat, logOutput) {
+        const summaryLine = diffStat.trim().split('\n').pop() ?? '';
+        const filesMatch = summaryLine.match(/(\d+)\s+files?\s+changed/);
+        const addMatch = summaryLine.match(/(\d+)\s+insertions?\(\+\)/);
+        const delMatch = summaryLine.match(/(\d+)\s+deletions?\(-\)/);
+        const commitCount = logOutput
+            .trim()
+            .split('\n')
+            .filter((l) => l.trim()).length;
+        return {
+            filesChanged: filesMatch ? parseInt(filesMatch[1], 10) : 0,
+            additions: addMatch ? parseInt(addMatch[1], 10) : 0,
+            deletions: delMatch ? parseInt(delMatch[1], 10) : 0,
+            commitCount,
+        };
+    }
+};
+GitPrService = __decorate([
+    injectable(),
+    __param(0, inject('ExecFunction')),
+    __metadata("design:paramtypes", [Function])
+], GitPrService);
+export { GitPrService };

package/dist/src/presentation/cli/commands/feat/new.command.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"new.command.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/cli/commands/feat/new.command.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAgBpC;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,OAAO,CAsE1C"}
+{"version":3,"file":"new.command.d.ts","sourceRoot":"","sources":["../../../../../../src/presentation/cli/commands/feat/new.command.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAkCpC;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,OAAO,CAsF1C"}

package/dist/src/presentation/cli/commands/feat/new.command.js

@@ -16,6 +16,20 @@ import { container } from '../../../../../packages/core/src/infrastructure/di/co
 import { CreateFeatureUseCase } from '../../../../../packages/core/src/application/use-cases/features/create/create-feature.use-case.js';
 import { colors, messages, spinner } from '../../ui/index.js';
 import { getShepHomeDir } from '../../../../../packages/core/src/infrastructure/services/filesystem/shep-directory.service.js';
+import { getSettings, hasSettings } from '../../../../../packages/core/src/infrastructure/services/settings.service.js';
+/**
+ * Read workflow defaults from settings, falling back to false if settings unavailable.
+ */
+function getWorkflowDefaults() {
+    if (!hasSettings()) {
+        return { openPr: false, autoMerge: false };
+    }
+    const settings = getSettings();
+    return {
+        openPr: settings.workflow.openPrOnImplementationComplete,
+        autoMerge: settings.workflow.autoMergeOnImplementationComplete,
+    };
+}
 /**
  * Create the feat new command
  */
@@ -24,26 +38,43 @@ export function createNewCommand() {
         .description('Create a new feature')
         .argument('<description>', 'Feature description')
         .option('-r, --repo <path>', 'Repository path (defaults to current directory)')
+        .option('--pr', 'Open PR on implementation complete')
+        .option('--no-pr', 'Do not open PR on implementation complete')
+        .option('--auto-merge', 'Auto-merge on implementation complete')
+        .option('--no-auto-merge', 'Do not auto-merge on implementation complete')
         .option('--allow-prd', 'Auto-approve through requirements, pause after')
         .option('--allow-plan', 'Auto-approve through planning, pause at implementation')
+        .option('--allow-merge', 'Auto-approve merge phase')
         .option('--allow-all', 'Run fully autonomous (no approval pauses)')
         .action(async (description, options) => {
         try {
             const useCase = container.resolve(CreateFeatureUseCase);
             const repoPath = options.repo ?? process.cwd();
+            // Resolve openPr and autoMerge from CLI flags or settings defaults
+            const defaults = getWorkflowDefaults();
+            const openPr = options.pr ?? defaults.openPr;
+            const autoMerge = options.autoMerge ?? defaults.autoMerge;
             // Build approval gates from flags (default: pause after every phase)
             let approvalGates = {
                 allowPrd: !!options.allowPrd,
                 allowPlan: !!options.allowPlan,
                 allowMerge: false,
             };
-            if (options.allowAll) {
+            if (options.allowPlan)
+                approvalGates = { allowPrd: true, allowPlan: true, allowMerge: approvalGates.allowMerge };
+            if (options.allowMerge)
+                approvalGates = { ...approvalGates, allowMerge: true };
+            // --auto-merge implies --allow-merge
+            if (autoMerge)
+                approvalGates = { ...approvalGates, allowMerge: true };
+            if (options.allowAll)
                 approvalGates = undefined; // no gates = fully autonomous
-            }
             const result = await spinner('Thinking', () => useCase.execute({
                 userInput: description,
                 repositoryPath: repoPath,
                 approvalGates,
+                openPr,
+                autoMerge,
             }));
             const { feature, warning } = result;
             const repoHash = createHash('sha256').update(repoPath).digest('hex').slice(0, 16);

package/dist/src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.d.ts

@@ -1,9 +1,20 @@
-import type { CreateFeatureInput } from '../../../../../../packages/core/src/application/use-cases/features/create/types.js';
+import type { FileAttachment } from '../../../../../../packages/core/src/infrastructure/services/file-dialog.service.js';
 export type { FileAttachment } from '../../../../../../packages/core/src/infrastructure/services/file-dialog.service.js';
+export interface FeatureCreatePayload {
+    name: string;
+    description?: string;
+    attachments: FileAttachment[];
+    repositoryPath: string;
+    approvalGates: {
+        allowPrd: boolean;
+        allowPlan: boolean;
+        allowMerge: boolean;
+    };
+}
 export interface FeatureCreateDrawerProps {
     open: boolean;
     onClose: () => void;
-    onSubmit: (data: CreateFeatureInput) => void;
+    onSubmit: (data: FeatureCreatePayload) => void;
     repositoryPath: string;
     isSubmitting?: boolean;
 }

package/dist/src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-create-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0DAA0D,CAAC;AAGnG,YAAY,EAAE,cAAc,EAAE,MAAM,0DAA0D,CAAC;AAiC/F,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC7C,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,cAAc,EACd,YAAoB,GACrB,EAAE,wBAAwB,2CA6L1B"}
+{"version":3,"file":"feature-create-drawer.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0DAA0D,CAAC;AAG/F,YAAY,EAAE,cAAc,EAAE,MAAM,0DAA0D,CAAC;AAE/F,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,cAAc,EAAE,CAAC;IAC9B,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE;QACb,QAAQ,EAAE,OAAO,CAAC;QAClB,SAAS,EAAE,OAAO,CAAC;QACnB,UAAU,EAAE,OAAO,CAAC;KACrB,CAAC;CACH;AAcD,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC/C,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,cAAc,EACd,YAAoB,GACrB,EAAE,wBAAwB,2CA+L1B"}

package/dist/src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.js

@@ -22,17 +22,6 @@ const EMPTY_GATES = {
     allowPlan: false,
     allowMerge: false,
 };
-function composeUserInput(name, description, attachments) {
-    let userInput = `Feature: ${name}`;
-    if (description) {
-        userInput += `\n\n${description}`;
-    }
-    if (attachments.length > 0) {
-        const paths = attachments.map((a) => `- ${a.path}`).join('\n');
-        userInput += `\n\nAttached files:\n${paths}`;
-    }
-    return userInput;
-}
 export function FeatureCreateDrawer({ open, onClose, onSubmit, repositoryPath, isSubmitting = false, }) {
     const [name, setName] = useState('');
     const [description, setDescription] = useState('');
@@ -54,9 +43,11 @@ export function FeatureCreateDrawer({ open, onClose, onSubmit, repositoryPath, i
         e.preventDefault();
         if (!name.trim())
             return;
-        const userInput = composeUserInput(name.trim(), description.trim() || undefined, attachments);
+        const trimmedDescription = description.trim() || undefined;
         onSubmit({
-            userInput,
+            name: name.trim(),
+            description: trimmedDescription,
+            attachments,
             repositoryPath,
             approvalGates: {
                 allowPrd: approvalGates.allowPrd ?? false,

package/dist/src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.stories.d.ts

@@ -18,13 +18,12 @@ import { FeatureCreateDrawer } from './feature-create-drawer.js';
  * |------|------|-------------|
  * | `open` | `boolean` | Controls drawer visibility |
  * | `onClose` | `() => void` | Called on dismiss (close button, cancel, or backdrop) |
- * | `onSubmit` | `(data: CreateFeatureInput) => void` | Called with `{ userInput, repositoryPath, approvalGates }` |
+ * | `onSubmit` | `(data: FeatureCreatePayload) => void` | Called with `{ name, description, attachments, repositoryPath, approvalGates }` |
  * | `repositoryPath` | `string` | Repository path (mandatory) included in the submitted data |
- * | `isSubmitting` | `boolean` | Disables all fields and shows "Creating..." on submit button |
  *
  * ### Behavior
  * - Form resets (name, description, attachments, checkboxes) when the drawer closes
- * - Submit button is disabled when name is empty OR `isSubmitting` is true
+ * - Submit button is disabled when name is empty
  * - `approvalGates` always included: `{ allowPrd, allowPlan, allowMerge }` (all false by default)
  * - Non-modal (`modal={false}`) — canvas stays interactive behind the drawer
  * - Fixed width: 384px (`w-96`)
@@ -41,11 +40,6 @@ export declare const Default: Story;
  * Demonstrates the form in a "ready to submit" state.
  */
 export declare const PreFilled: Story;
-/**
- * Submitting/loading state — all form fields are disabled, submit button shows "Creating...".
- * Click the trigger to open and observe the disabled form.
- */
-export declare const Submitting: Story;
 /**
  * Validation state — open the drawer with an empty name field.
  * The "+ Create Feature" button is disabled because name validation fails.
@@ -77,8 +71,8 @@ export declare const MergeOnly: Story;
  * Fully interactive story — open the drawer, fill the form, toggle checkboxes,
  * and click "Add Files" to attach files via the native OS file picker.
  *
- * **Submitted data** is displayed in a styled panel showing `CreateFeatureInput`
- * with `approvalGates: { allowPrd, allowPlan, allowMerge }`.
+ * **Submitted data** is displayed in a styled panel showing `FeatureCreatePayload`
+ * with `{ name, description, attachments, repositoryPath, approvalGates }`.
  *
  * In Storybook, the native picker won't work (no backend), but submitted data
  * would show the paths if files were attached programmatically.

package/dist/src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-create-drawer.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAQ9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,mBAAmB,CA8B1C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAiDlD,uFAAuF;AACvF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAiBvB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAExB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAMhC,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAMF;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAUxB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAMF;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,EAAE,KAsCzB,CAAC"}
+{"version":3,"file":"feature-create-drawer.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAQ9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,mBAAmB,CAyB1C,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,mBAAmB,CAAC,CAAC;AA0ClD,uFAAuF;AACvF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAiBvB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAMhC,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAMF;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAUxB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAMF;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,EAAE,KAsCzB,CAAC"}

package/dist/src/presentation/web/components/common/feature-create-drawer/feature-create-drawer.stories.js

@@ -24,13 +24,12 @@ import { Button } from '../../ui/button.js';
  * |------|------|-------------|
  * | `open` | `boolean` | Controls drawer visibility |
  * | `onClose` | `() => void` | Called on dismiss (close button, cancel, or backdrop) |
- * | `onSubmit` | `(data: CreateFeatureInput) => void` | Called with `{ userInput, repositoryPath, approvalGates }` |
+ * | `onSubmit` | `(data: FeatureCreatePayload) => void` | Called with `{ name, description, attachments, repositoryPath, approvalGates }` |
  * | `repositoryPath` | `string` | Repository path (mandatory) included in the submitted data |
- * | `isSubmitting` | `boolean` | Disables all fields and shows "Creating..." on submit button |
  *
  * ### Behavior
  * - Form resets (name, description, attachments, checkboxes) when the drawer closes
- * - Submit button is disabled when name is empty OR `isSubmitting` is true
+ * - Submit button is disabled when name is empty
  * - `approvalGates` always included: `{ allowPrd, allowPlan, allowMerge }` (all false by default)
  * - Non-modal (`modal={false}`) — canvas stays interactive behind the drawer
  * - Fixed width: 384px (`w-96`)
@@ -53,16 +52,12 @@ const meta = {
             description: 'Callback fired when the drawer is dismissed (close button, cancel, or backdrop click).',
         },
         onSubmit: {
-            description: 'Callback fired with `CreateFeatureInput` when the form is submitted. Receives `{ userInput, repositoryPath, approvalGates }`.',
+            description: 'Callback fired with `FeatureCreatePayload` when the form is submitted. Receives `{ name, description, attachments, repositoryPath, approvalGates }`.',
         },
         repositoryPath: {
             control: 'text',
             description: 'Repository path (mandatory) included in the submitted data.',
         },
-        isSubmitting: {
-            control: 'boolean',
-            description: 'When true, all form fields and buttons are disabled, and the submit button shows "Creating...".',
-        },
     },
 };
 export default meta;
@@ -75,7 +70,7 @@ const logClose = fn().mockName('onClose');
  * Trigger wrapper — every story uses this so nothing auto-opens on Docs page
  * ------------------------------------------------------------------------- */
 /** Starts closed — click button to open. Actions are logged. */
-function CreateDrawerTrigger({ isSubmitting = false, label = 'Open Create Feature', }) {
+function CreateDrawerTrigger({ label = 'Open Create Feature' }) {
     const [open, setOpen] = useState(false);
     return (_jsxs("div", { className: "flex h-screen items-start p-4", children: [_jsx(Button, { variant: "outline", onClick: () => setOpen(true), children: label }), _jsx(FeatureCreateDrawer, { open: open, onClose: () => {
                     setOpen(false);
@@ -83,7 +78,7 @@ function CreateDrawerTrigger({ isSubmitting = false, label = 'Open Create Featur
                 }, onSubmit: (data) => {
                     logSubmit(data);
                     setOpen(false);
-                }, repositoryPath: "/Users/dev/my-repo", isSubmitting: isSubmitting })] }));
+                }, repositoryPath: "/Users/dev/my-repo" })] }));
 }
 /* ---------------------------------------------------------------------------
  * Per-state stories
@@ -109,13 +104,6 @@ export const PreFilled = {
         await userEvent.type(descInput, 'Implement OAuth2 authentication with GitHub as the identity provider. Includes login, callback handling, and token refresh.');
     },
 };
-/**
- * Submitting/loading state — all form fields are disabled, submit button shows "Creating...".
- * Click the trigger to open and observe the disabled form.
- */
-export const Submitting = {
-    render: () => _jsx(CreateDrawerTrigger, { isSubmitting: true, label: "Open (Submitting)" }),
-};
 /**
  * Validation state — open the drawer with an empty name field.
  * The "+ Create Feature" button is disabled because name validation fails.
@@ -198,8 +186,8 @@ export const MergeOnly = {
  * Fully interactive story — open the drawer, fill the form, toggle checkboxes,
  * and click "Add Files" to attach files via the native OS file picker.
  *
- * **Submitted data** is displayed in a styled panel showing `CreateFeatureInput`
- * with `approvalGates: { allowPrd, allowPlan, allowMerge }`.
+ * **Submitted data** is displayed in a styled panel showing `FeatureCreatePayload`
+ * with `{ name, description, attachments, repositoryPath, approvalGates }`.
  *
  * In Storybook, the native picker won't work (no backend), but submitted data
  * would show the paths if files were attached programmatically.

package/dist/src/presentation/web/components/common/feature-create-drawer/index.d.ts

@@ -1,2 +1,2 @@
-export { FeatureCreateDrawer, type FeatureCreateDrawerProps, type FileAttachment, } from './feature-create-drawer.js';
+export { FeatureCreateDrawer, type FeatureCreateDrawerProps, type FeatureCreatePayload, type FileAttachment, } from './feature-create-drawer.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/presentation/web/components/common/feature-create-drawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-create-drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,cAAc,GACpB,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-create-drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,EAC7B,KAAK,oBAAoB,EACzB,KAAK,cAAc,GACpB,MAAM,yBAAyB,CAAC"}

package/dist/src/presentation/web/components/common/feature-drawer/feature-drawer.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-drawer.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer/feature-drawer.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAOpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAC;AAgG5C,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAE5B,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAMF,wEAAwE;AACxE,eAAO,MAAM,WAAW,EAAE,KAEzB,CAAC;AAEF,qFAAqF;AACrF,eAAO,MAAM,SAAS,EAAE,KAqBvB,CAAC;AAuDF,0DAA0D;AAC1D,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AA6CF,wDAAwD;AACxD,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC;AAMF,qDAAqD;AACrD,eAAO,MAAM,gBAAgB,EAAE,KAO9B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAE/B,CAAC;AAoCF,wDAAwD;AACxD,eAAO,MAAM,gBAAgB,EAAE,KAE9B,CAAC;AAEF,yEAAyE;AACzE,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC;AAEF,+FAA+F;AAC/F,eAAO,MAAM,kBAAkB,EAAE,KAEhC,CAAC"}
+{"version":3,"file":"feature-drawer.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-drawer/feature-drawer.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAOpC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,aAAa,CAAC,CAAC;AAgG5C,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAE5B,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAElB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAEnB,CAAC;AAMF,wEAAwE;AACxE,eAAO,MAAM,WAAW,EAAE,KAEzB,CAAC;AAEF,qFAAqF;AACrF,eAAO,MAAM,SAAS,EAAE,KAqBvB,CAAC;AAmEF,0DAA0D;AAC1D,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC;AA6CF,wDAAwD;AACxD,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC;AAMF,qDAAqD;AACrD,eAAO,MAAM,gBAAgB,EAAE,KAO9B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAE/B,CAAC;AAoCF,wDAAwD;AACxD,eAAO,MAAM,gBAAgB,EAAE,KAE9B,CAAC;AAEF,yEAAyE;AACzE,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAC;AAEF,+FAA+F;AAC/F,eAAO,MAAM,kBAAkB,EAAE,KAEhC,CAAC"}

package/dist/src/presentation/web/components/common/feature-drawer/feature-drawer.stories.js

@@ -129,7 +129,18 @@ export const AllFields = {
 /* ---------------------------------------------------------------------------
  * Matrix stories — interactive state/lifecycle switcher
  * ------------------------------------------------------------------------- */
+const creatingData = {
+    name: 'User Onboarding',
+    description: 'Implement guided onboarding wizard',
+    featureId: '',
+    lifecycle: 'requirements',
+    state: 'creating',
+    progress: 0,
+    repositoryPath: '/home/user/my-repo',
+    branch: '',
+};
 const stateFixtures = {
+    creating: creatingData,
     running: runningData,
     'action-required': actionRequiredData,
     done: doneData,

package/dist/src/presentation/web/components/common/feature-node/feature-node-state-config.d.ts

@@ -1,7 +1,7 @@
 import { type LucideIcon } from 'lucide-react';
 import type { Node } from '@xyflow/react';
 import type { AgentTypeValue } from './agent-type-icons.js';
-export type FeatureNodeState = 'running' | 'action-required' | 'done' | 'blocked' | 'error';
+export type FeatureNodeState = 'creating' | 'running' | 'action-required' | 'done' | 'blocked' | 'error';
 export type FeatureLifecyclePhase = 'requirements' | 'research' | 'implementation' | 'review' | 'deploy' | 'maintain';
 /** Human-readable display labels for lifecycle phases. */
 export declare const lifecycleDisplayLabels: Record<FeatureLifecyclePhase, string>;

package/dist/src/presentation/web/components/common/feature-node/feature-node-state-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-node-state-config.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-node-state-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmD,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAChG,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,iBAAiB,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAE5F,MAAM,MAAM,qBAAqB,GAC7B,cAAc,GACd,UAAU,GACV,gBAAgB,GAChB,QAAQ,GACR,QAAQ,GACR,UAAU,CAAC;AAEf,0DAA0D;AAC1D,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,qBAAqB,EAAE,MAAM,CAOxE,CAAC;AAEF,gFAAgF;AAChF,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,qBAAqB,EAAE,MAAM,CAOvE,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,qBAAqB,CAAC;IACjC,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,cAAc,EAAE,MAAM,CAAC;IACvB,uCAAuC;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;AAEnE,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,UAAU,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,gBAAgB,EAAE,sBAAsB,CAmDnF,CAAC"}
+{"version":3,"file":"feature-node-state-config.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-node-state-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmD,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAChG,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,MAAM,MAAM,gBAAgB,GACxB,UAAU,GACV,SAAS,GACT,iBAAiB,GACjB,MAAM,GACN,SAAS,GACT,OAAO,CAAC;AAEZ,MAAM,MAAM,qBAAqB,GAC7B,cAAc,GACd,UAAU,GACV,gBAAgB,GAChB,QAAQ,GACR,QAAQ,GACR,UAAU,CAAC;AAEf,0DAA0D;AAC1D,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,qBAAqB,EAAE,MAAM,CAOxE,CAAC;AAEF,gFAAgF;AAChF,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,qBAAqB,EAAE,MAAM,CAOvE,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,qBAAqB,CAAC;IACjC,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,cAAc,EAAE,MAAM,CAAC;IACvB,uCAAuC;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;AAEnE,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,UAAU,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,gBAAgB,EAAE,sBAAsB,CA6DnF,CAAC"}

package/dist/src/presentation/web/components/common/feature-node/feature-node-state-config.js

@@ -18,6 +18,16 @@ export const lifecycleRunningVerbs = {
     maintain: 'Maintaining',
 };
 export const featureNodeStateConfig = {
+    creating: {
+        icon: Loader2,
+        borderClass: 'border-l-blue-500',
+        labelClass: 'text-blue-500',
+        progressClass: 'bg-blue-500',
+        badgeClass: 'text-blue-700',
+        badgeBgClass: 'bg-blue-50',
+        label: 'Creating...',
+        showProgressBar: false,
+    },
     running: {
         icon: Loader2,
         borderClass: 'border-l-blue-500',

package/dist/src/presentation/web/components/common/feature-node/feature-node.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-node.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-node.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAwBnE,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,eAAe,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,2CAqJA"}
+{"version":3,"file":"feature-node.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-node.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AA0BnE,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,eAAe,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,2CAsKA"}

package/dist/src/presentation/web/components/common/feature-node/feature-node.js

@@ -12,6 +12,8 @@ function AgentIcon({ agentType, className }) {
 function getBadgeText(data) {
     const config = featureNodeStateConfig[data.state];
     switch (data.state) {
+        case 'creating':
+            return 'Creating...';
         case 'running':
             return lifecycleRunningVerbs[data.lifecycle];
         case 'done':
@@ -27,10 +29,10 @@ function getBadgeText(data) {
 export function FeatureNode({ data, selected, }) {
     const config = featureNodeStateConfig[data.state];
     const Icon = config.icon;
-    return (_jsxs("div", { className: "group relative", children: [data.showHandles ? (_jsx(Handle, { type: "target", position: Position.Left, isConnectable: false, className: "opacity-0!" })) : null, _jsxs("div", { "data-testid": "feature-node-card", className: cn('bg-card flex min-h-35 w-72 flex-col rounded-lg border p-3 shadow-sm', selected && 'ring-primary ring-2'), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { "data-testid": "feature-node-lifecycle-label", className: cn('text-[10px] font-semibold tracking-wider'), children: lifecycleDisplayLabels[data.lifecycle] }), data.onSettings ? (_jsx("button", { type: "button", "aria-label": "Settings", "data-testid": "feature-node-settings-button", onClick: (e) => {
+    return (_jsxs("div", { className: "group relative", children: [data.showHandles ? (_jsx(Handle, { type: "target", position: Position.Left, isConnectable: false, className: "opacity-0!" })) : null, _jsxs("div", { "data-testid": "feature-node-card", "aria-busy": data.state === 'creating' ? 'true' : undefined, className: cn('bg-card flex min-h-35 w-72 flex-col rounded-lg border p-3 shadow-sm', selected && 'ring-primary ring-2'), children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { "data-testid": "feature-node-lifecycle-label", className: cn('text-[10px] font-semibold tracking-wider'), children: lifecycleDisplayLabels[data.lifecycle] }), data.onSettings ? (_jsx("button", { type: "button", "aria-label": "Settings", "data-testid": "feature-node-settings-button", onClick: (e) => {
                                     e.stopPropagation();
                                     data.onSettings?.();
-                                }, className: "nodrag text-muted-foreground hover:text-foreground -mt-1 -mr-1 p-1", children: _jsx(Settings, { className: "h-3.5 w-3.5" }) })) : null] }), _jsx("h3", { className: "mt-1 truncate text-sm font-bold", children: data.name }), data.description ? (_jsx("p", { "data-testid": "feature-node-description", className: "text-muted-foreground mt-0.5 truncate text-xs", children: data.description })) : null, _jsx("div", { className: "mt-auto pt-2", children: data.state === 'running' ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mt-1.5 flex items-center gap-1.5 text-xs", children: [_jsx(AgentIcon, { agentType: data.agentType, className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "text-muted-foreground", children: getBadgeText(data) })] }), _jsx("div", { "data-testid": "feature-node-progress-bar", className: "bg-muted mt-1.5 h-1 w-full overflow-hidden rounded-full", children: _jsx("div", { className: "animate-indeterminate-progress bg-foreground/30 h-full w-1/3 rounded-full" }) })] })) : config.showProgressBar ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted-foreground flex items-center justify-end text-[10px]", children: _jsxs("span", { children: [data.progress, "%"] }) }), _jsx("div", { "data-testid": "feature-node-progress-bar", className: "bg-muted mt-1.5 h-1 w-full overflow-hidden rounded-full", children: _jsx("div", { className: cn('h-full rounded-full transition-all', config.progressClass), style: { width: `${data.progress}%` } }) })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted-foreground text-[10px]", children: _jsx("span", { children: data.featureId }) }), _jsxs("div", { "data-testid": "feature-node-badge", className: cn('mt-1.5 flex items-center justify-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium', config.badgeBgClass, config.badgeClass), children: [_jsx(Icon, { className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: getBadgeText(data) })] })] })) })] }), data.onAction ? (_jsx(Handle, { type: "source", position: Position.Right, className: "h-0! w-0! border-0! bg-transparent!", children: _jsx("button", { type: "button", "aria-label": "Add", "data-testid": "feature-node-action-button", onClick: (e) => {
+                                }, className: "nodrag text-muted-foreground hover:text-foreground -mt-1 -mr-1 p-1", children: _jsx(Settings, { className: "h-3.5 w-3.5" }) })) : null] }), _jsx("h3", { className: "mt-1 truncate text-sm font-bold", children: data.name }), data.description ? (_jsx("p", { "data-testid": "feature-node-description", className: "text-muted-foreground mt-0.5 truncate text-xs", children: data.description })) : null, _jsx("div", { className: "mt-auto pt-2", children: data.state === 'creating' ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mt-1.5 flex items-center gap-1.5 text-xs", children: [_jsx(Icon, { className: "h-3.5 w-3.5 shrink-0 animate-spin" }), _jsx("span", { className: "text-muted-foreground", children: getBadgeText(data) })] }), _jsx("div", { "data-testid": "feature-node-progress-bar", className: "bg-muted mt-1.5 h-1 w-full overflow-hidden rounded-full", children: _jsx("div", { className: "motion-safe:animate-indeterminate-progress bg-foreground/30 h-full w-1/3 rounded-full" }) })] })) : data.state === 'running' ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "mt-1.5 flex items-center gap-1.5 text-xs", children: [_jsx(AgentIcon, { agentType: data.agentType, className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "text-muted-foreground", children: getBadgeText(data) })] }), _jsx("div", { "data-testid": "feature-node-progress-bar", className: "bg-muted mt-1.5 h-1 w-full overflow-hidden rounded-full", children: _jsx("div", { className: "animate-indeterminate-progress bg-foreground/30 h-full w-1/3 rounded-full" }) })] })) : config.showProgressBar ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted-foreground flex items-center justify-end text-[10px]", children: _jsxs("span", { children: [data.progress, "%"] }) }), _jsx("div", { "data-testid": "feature-node-progress-bar", className: "bg-muted mt-1.5 h-1 w-full overflow-hidden rounded-full", children: _jsx("div", { className: cn('h-full rounded-full transition-all', config.progressClass), style: { width: `${data.progress}%` } }) })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-muted-foreground text-[10px]", children: _jsx("span", { children: data.featureId }) }), _jsxs("div", { "data-testid": "feature-node-badge", className: cn('mt-1.5 flex items-center justify-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium', config.badgeBgClass, config.badgeClass), children: [_jsx(Icon, { className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: getBadgeText(data) })] })] })) })] }), data.onAction ? (_jsx(Handle, { type: "source", position: Position.Right, className: "h-0! w-0! border-0! bg-transparent!", children: _jsx("button", { type: "button", "aria-label": "Add", "data-testid": "feature-node-action-button", onClick: (e) => {
                         e.stopPropagation();
                         data.onAction?.();
                     }, className: "nodrag absolute top-1/2 left-1/2 flex h-6 w-6 -translate-x-1/2 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full bg-blue-500 text-white opacity-0 shadow-md transition-opacity group-hover:opacity-100 hover:bg-blue-600", children: _jsx(Plus, { className: "h-3.5 w-3.5" }) }) })) : data.showHandles ? (_jsx(Handle, { type: "source", position: Position.Right, isConnectable: false, className: "opacity-0!" })) : null] }));

package/dist/src/presentation/web/components/common/feature-node/feature-node.stories.d.ts

@@ -11,6 +11,7 @@ export declare const WithAction: Story;
 export declare const LongContent: Story;
 export declare const DoneWithRuntime: Story;
 export declare const BlockedByFeature: Story;
+export declare const Creating: Story;
 export declare const ErrorWithMessage: Story;
 export declare const Interactive: Story;
 //# sourceMappingURL=feature-node.stories.d.ts.map

package/dist/src/presentation/web/components/common/feature-node/feature-node.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-node.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-node.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,KAAK,EACV,eAAe,EAIhB,MAAM,6BAA6B,CAAC;AAiCrC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,eAAe,CAc/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;AAEvC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AA0DF,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAC;AAWF,eAAO,MAAM,aAAa,EAAE,KAqB3B,CAAC;AAsEF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAW7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAC;AA4EF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC"}
+{"version":3,"file":"feature-node.stories.d.ts","sourceRoot":"","sources":["../../../../../../../src/presentation/web/components/common/feature-node/feature-node.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,KAAK,EACV,eAAe,EAIhB,MAAM,6BAA6B,CAAC;AAiCrC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,eAAe,CAc/B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;AAEvC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAoEF,eAAO,MAAM,SAAS,EAAE,KAQvB,CAAC;AAWF,eAAO,MAAM,aAAa,EAAE,KAqB3B,CAAC;AAsEF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAW7B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAW9B,CAAC;AA4EF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC"}

package/dist/src/presentation/web/components/common/feature-node/feature-node.stories.js

@@ -29,6 +29,16 @@ export const Default = {
     render: (args) => _jsx(FeatureNodeCanvas, { data: args }),
 };
 const allStatesData = [
+    {
+        name: 'User Onboarding',
+        description: 'Implement guided onboarding wizard',
+        featureId: '',
+        lifecycle: 'requirements',
+        state: 'creating',
+        progress: 0,
+        repositoryPath: '/home/user/my-repo',
+        branch: '',
+    },
     {
         name: 'Auth Module',
         description: 'Implement OAuth2 authentication flow',
@@ -214,6 +224,17 @@ export const BlockedByFeature = {
     },
     render: (args) => _jsx(FeatureNodeCanvas, { data: args }),
 };
+export const Creating = {
+    args: {
+        name: 'User Onboarding',
+        description: 'Implement guided onboarding wizard',
+        featureId: '',
+        lifecycle: 'requirements',
+        state: 'creating',
+        progress: 0,
+    },
+    render: (args) => _jsx(FeatureNodeCanvas, { data: args }),
+};
 export const ErrorWithMessage = {
     args: {
         name: 'Email Service',

package/dist/src/presentation/web/components/common/index.d.ts

@@ -1,7 +1,7 @@
 export { AddRepositoryNode, type AddRepositoryNodeData, type AddRepositoryNodeType, } from './add-repository-node/index.js';
 export { ElapsedTime, formatElapsed } from './elapsed-time/index.js';
 export { EmptyState, type EmptyStateProps } from './empty-state/index.js';
-export { FeatureCreateDrawer, type FeatureCreateDrawerProps } from './feature-create-drawer/index.js';
+export { FeatureCreateDrawer, type FeatureCreateDrawerProps, type FeatureCreatePayload, } from './feature-create-drawer/index.js';
 export { FeatureDrawer, type FeatureDrawerProps } from './feature-drawer/index.js';
 export { FeatureListItem, type FeatureListItemProps } from './feature-list-item/index.js';
 export { useFeatureActions, type FeatureActionsInput, type FeatureActionsState, } from './feature-drawer/use-feature-actions.js';