ros/automaker
1
0
Fork 0
mirror of https://github.com/AutoMaker-Org/automaker.git synced 2026-02-01 20:23:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Change description field to textarea in Add New Feature modal

Browse Source 
The description field in the Add New Feature modal is now a textarea instead of
an input, allowing users to enter multi-line feature descriptions more easily.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Cody Seibert
2025-12-08 22:53:33 -05:00
parent 9392422d35
commit 7bfc489efa
23 changed files with 1319 additions and 1382 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
app/electron/auto-mode-service.js
View File

@@ -88,7 +88,7 @@ class AutoModeService {
try {
// Load features
const features = await this.loadFeatures();
const feature = features.find(f => f.id === featureId);
const feature = features.find((f) => f.id === featureId);
if (!feature) {
throw new Error(`Feature ${featureId} not found`);
@@ -141,7 +141,10 @@ class AutoModeService {
* Verify a specific feature by running its tests
*/
async verifyFeature({ projectPath, featureId, sendToRenderer }) {
console.log(`[AutoMode] verifyFeature called with:`, { projectPath, featureId });
console.log(`[AutoMode] verifyFeature called with:`, {
projectPath,
featureId,
});
if (this.isRunning) {
throw new Error("Auto mode is already running");
@@ -156,7 +159,7 @@ class AutoModeService {
try {
// Load features
const features = await this.loadFeatures();
const feature = features.find(f => f.id === featureId);
const feature = features.find((f) => f.id === featureId);
if (!feature) {
throw new Error(`Feature ${featureId} not found`);
@@ -208,7 +211,7 @@ class AutoModeService {
async runLoop() {
while (this.isRunning) {
try {
// Load features from feature_list.json
// Load features from .automaker/feature_list.json
const features = await this.loadFeatures();
// Find highest priority incomplete feature
@@ -269,10 +272,14 @@ class AutoModeService {
}
/**
* Load features from feature_list.json
* Load features from .automaker/feature_list.json
*/
async loadFeatures() {
const featuresPath = path.join(this.projectPath, ".automaker", "feature_list.json");
const featuresPath = path.join(
this.projectPath,
".automaker",
"feature_list.json"
);
try {
const content = await fs.readFile(featuresPath, "utf-8");
@@ -383,7 +390,8 @@ class AutoModeService {
this.sendToRenderer({
type: "auto_mode_progress",
featureId: feature.id,
content: "Analyzing codebase structure and creating implementation plan...",
content:
"Analyzing codebase structure and creating implementation plan...",
});
// Small delay to show planning phase
@@ -472,7 +480,8 @@ class AutoModeService {
});
console.log(`[AutoMode] Phase: VERIFICATION for ${feature.description}`);
const checkingMsg = "Verifying implementation and checking test results...\n";
const checkingMsg =
"Verifying implementation and checking test results...\n";
await this.writeToContextFile(feature.id, checkingMsg);
this.sendToRenderer({
type: "auto_mode_progress",
@@ -523,11 +532,11 @@ class AutoModeService {
}
/**
* Update feature status in feature_list.json
* Update feature status in .automaker/feature_list.json
*/
async updateFeatureStatus(featureId, status) {
const features = await this.loadFeatures();
const feature = features.find(f => f.id === featureId);
const feature = features.find((f) => f.id === featureId);
if (!feature) {
console.error(`[AutoMode] Feature ${featureId} not found`);
@@ -538,7 +547,11 @@ class AutoModeService {
feature.status = status;
// Save back to file
const featuresPath = path.join(this.projectPath, ".automaker", "feature_list.json");
const featuresPath = path.join(
this.projectPath,
".automaker",
"feature_list.json"
);
const toSave = features.map((f) => ({
id: f.id,
category: f.category,
@@ -575,14 +588,7 @@ class AutoModeService {
systemPrompt: this.getVerificationPrompt(),
maxTurns: 15,
cwd: this.projectPath,
allowedTools: [
"Read",
"Write",
"Edit",
"Glob",
"Grep",
"Bash",
],
allowedTools: ["Read", "Write", "Edit", "Glob", "Grep", "Bash"],
permissionMode: "acceptEdits",
sandbox: {
enabled: true,
@@ -593,7 +599,8 @@ class AutoModeService {
const prompt = this.buildVerificationPrompt(feature);
const runningTestsMsg = "Running Playwright tests to verify feature implementation...\n";
const runningTestsMsg =
"Running Playwright tests to verify feature implementation...\n";
await this.writeToContextFile(feature.id, runningTestsMsg);
this.sendToRenderer({
@@ -697,8 +704,9 @@ ${feature.steps.map((step, i) => `${i + 1}. ${step}`).join("\n")}
2. Implement the feature according to the description and steps
3. Write Playwright tests to verify the feature works correctly
4. Run the tests and ensure they pass
5. Update feature_list.json to mark this feature as "status": "verified"
6. Commit your changes with git
5. **DELETE the test file(s) you created** - tests are only for immediate verification
6. Update .automaker/feature_list.json to mark this feature as "status": "verified"
7. Commit your changes with git
**Important Guidelines:**
@@ -708,8 +716,15 @@ ${feature.steps.map((step, i) => `${i + 1}. ${step}`).join("\n")}
- Write comprehensive Playwright tests
- Ensure all existing tests still pass
- Mark the feature as passing only when all tests are green
- **CRITICAL: Delete test files after verification** - tests accumulate and become brittle
- Make a git commit when complete
**Test Deletion Policy:**
After tests pass, delete them immediately:
\`\`\`bash
rm tests/[feature-name].spec.ts
\`\`\`
Begin by reading the project structure and then implementing the feature.`;
}
@@ -731,24 +746,32 @@ ${feature.steps.map((step, i) => `${i + 1}. ${step}`).join("\n")}
**Your Task:**
1. Read the feature_list.json file to see the current status
1. Read the .automaker/feature_list.json file to see the current status
2. Look for Playwright tests related to this feature
3. Run the Playwright tests for this feature: npx playwright test
3. Run the Playwright tests for this feature: npx playwright test tests/[feature-name].spec.ts
4. Check if all tests pass
5. If ALL tests pass:
- Update feature_list.json to set this feature's "status" to "verified"
- Explain what tests passed
- **DELETE the test file(s) for this feature** - tests are only for immediate verification
- Update .automaker/feature_list.json to set this feature's "status" to "verified"
- Explain what tests passed and that you deleted them
6. If ANY tests fail:
- Keep the feature "status" as "in_progress" in feature_list.json
- Keep the feature "status" as "in_progress" in .automaker/feature_list.json
- Explain what tests failed and why
7. Fix the issues until the tests pass again
**Test Deletion Policy:**
After tests pass, delete them immediately:
\`\`\`bash
rm tests/[feature-name].spec.ts
\`\`\`
**Important:**
- Only mark as "verified" if ALL Playwright tests pass
- Do NOT implement new code - only verify existing implementation
- Focus on running tests and updating the status accurately
- Only mark as "verified" if Playwright tests pass
- **CRITICAL: Delete test files after they pass** - tests should not accumulate
- Focus on running tests, deleting them, and updating the status accurately
- Be thorough in checking test results
Begin by reading feature_list.json and finding the appropriate tests to run.`;
Begin by reading .automaker/feature_list.json and finding the appropriate tests to run.`;
}
/**
@@ -759,17 +782,25 @@ Begin by reading feature_list.json and finding the appropriate tests to run.`;
Your role is to:
- Run Playwright tests to verify feature implementations
- Accurately report test results
- Update feature status in feature_list.json based on test outcomes
- Only mark features as "verified" when ALL tests pass
- Keep features as "in_progress" if tests fail
- If other tests fail, verify if those tests are still accurate or should be updated or deleted
- Continue rerunning tests until all tests pass
- **DELETE test files after successful verification** - tests are only for immediate feature verification
- Update feature status to verified in .automaker/feature_list.json after all tests pass
**Test Deletion Policy:**
Tests should NOT accumulate. After a feature is verified:
1. Delete the test file for that feature
2. Mark the feature as "verified" in feature_list.json
This prevents test brittleness as the app changes rapidly.
You have access to:
- Read and edit files
- Run bash commands (especially Playwright tests)
- Delete files (rm command)
- Analyze test output
Be accurate and thorough in your verification process.`;
Be accurate and thorough in your verification process. Always delete tests after they pass.`;
}
/**
@@ -783,17 +814,27 @@ Your role is to:
- Write production-quality code
- Create comprehensive Playwright tests
- Ensure all tests pass before marking features complete
- **DELETE test files after successful verification** - tests are only for immediate feature verification
- Commit working code to git
- Be thorough and detail-oriented
**Test Deletion Policy:**
Tests should NOT accumulate. After a feature is verified:
1. Run the tests to ensure they pass
2. Delete the test file for that feature
3. Mark the feature as "verified" in .automaker/feature_list.json
This prevents test brittleness as the app changes rapidly.
You have full access to:
- Read and write files
- Run bash commands
- Execute tests
- Delete files (rm command)
- Make git commits
- Search and analyze the codebase
Focus on one feature at a time and complete it fully before finishing.`;
Focus on one feature at a time and complete it fully before finishing. Always delete tests after they pass.`;
}
/**

265
app/src/components/layout/sidebar.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { useState, useEffect, useRef } from "react";
import { useState } from "react";
import { cn } from "@/lib/utils";
import { useAppStore } from "@/store/app-store";
import Link from "next/link";
@@ -21,8 +21,6 @@ import {
PanelLeft,
PanelLeftClose,
Sparkles,
User,
LogOut,
Cpu,
ChevronDown,
Check,
@@ -57,27 +55,6 @@ export function Sidebar() {
removeProject,
} = useAppStore();
const [userMenuOpen, setUserMenuOpen] = useState(false);
const userMenuRef = useRef<HTMLDivElement>(null);
// Close dropdown when clicking outside
useEffect(() => {
function handleClickOutside(event: MouseEvent) {
if (
userMenuRef.current &&
!userMenuRef.current.contains(event.target as Node)
) {
setUserMenuOpen(false);
}
}
if (userMenuOpen) {
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}
}, [userMenuOpen]);
const navSections: NavSection[] = [
{
@@ -113,7 +90,7 @@ export function Sidebar() {
{/* Floating Collapse Toggle Button - Desktop only */}
<button
onClick={toggleSidebar}
className="hidden lg:flex absolute top-20 -right-3 z-50 items-center justify-center w-6 h-6 rounded-full bg-zinc-800 border border-white/10 text-zinc-400 hover:text-white hover:bg-zinc-700 hover:border-white/20 transition-all shadow-lg titlebar-no-drag"
className="hidden lg:flex absolute top-1/2 -translate-y-1/2 -right-3 z-50 items-center justify-center w-6 h-6 rounded-full bg-zinc-800 border border-white/10 text-zinc-400 hover:text-white hover:bg-zinc-700 hover:border-white/20 transition-all shadow-lg titlebar-no-drag"
data-testid="sidebar-collapse-button"
title={sidebarOpen ? "Collapse sidebar" : "Expand sidebar"}
>
@@ -151,24 +128,26 @@ export function Sidebar() {
</div>
{/* Project Actions */}
<div className="flex items-center gap-1 titlebar-no-drag">
<button
onClick={() => setCurrentView("welcome")}
className="group flex items-center justify-center w-8 h-8 rounded-lg relative overflow-hidden transition-all text-zinc-400 hover:text-white hover:bg-white/5"
title="New Project"
data-testid="new-project-button"
>
<Plus className="w-4 h-4 flex-shrink-0" />
</button>
<button
onClick={() => setCurrentView("welcome")}
className="group flex items-center justify-center w-8 h-8 rounded-lg relative overflow-hidden transition-all text-zinc-400 hover:text-white hover:bg-white/5"
title="Open Project"
data-testid="open-project-button"
>
<FolderOpen className="w-4 h-4 flex-shrink-0" />
</button>
</div>
{sidebarOpen && (
<div className="flex items-center gap-1 titlebar-no-drag">
<button
onClick={() => setCurrentView("welcome")}
className="group flex items-center justify-center w-8 h-8 rounded-lg relative overflow-hidden transition-all text-zinc-400 hover:text-white hover:bg-white/5"
title="New Project"
data-testid="new-project-button"
>
<Plus className="w-4 h-4 flex-shrink-0" />
</button>
<button
onClick={() => setCurrentView("welcome")}
className="group flex items-center justify-center w-8 h-8 rounded-lg relative overflow-hidden transition-all text-zinc-400 hover:text-white hover:bg-white/5"
title="Open Project"
data-testid="open-project-button"
>
<FolderOpen className="w-4 h-4 flex-shrink-0" />
</button>
</div>
)}
</div>
{/* Project Selector */}
@@ -215,73 +194,86 @@ export function Sidebar() {
{/* Nav Items - Scrollable */}
<nav className="flex-1 overflow-y-auto px-2 mt-4 pb-2">
{navSections.map((section, sectionIdx) => (
<div key={sectionIdx} className={sectionIdx > 0 ? "mt-6" : ""}>
{/* Section Label */}
{section.label && sidebarOpen && (
<div className="hidden lg:block px-4 mb-2">
<span className="text-[10px] font-semibold text-zinc-500 uppercase tracking-wider">
{section.label}
</span>
</div>
)}
{section.label && !sidebarOpen && (
<div className="h-px bg-zinc-800 mx-2 mb-2"></div>
)}
{!currentProject && sidebarOpen ? (
// Placeholder when no project is selected (only in expanded state)
<div className="flex items-center justify-center h-full px-4">
<p className="text-zinc-500 text-sm text-center">
<span className="hidden lg:block">
Select or create a project above
</span>
</p>
</div>
) : currentProject ? (
// Navigation sections when project is selected
navSections.map((section, sectionIdx) => (
<div key={sectionIdx} className={sectionIdx > 0 ? "mt-6" : ""}>
{/* Section Label */}
{section.label && sidebarOpen && (
<div className="hidden lg:block px-4 mb-2">
<span className="text-[10px] font-semibold text-zinc-500 uppercase tracking-wider">
{section.label}
</span>
</div>
)}
{section.label && !sidebarOpen && (
<div className="h-px bg-zinc-800 mx-2 mb-2"></div>
)}
{/* Nav Items */}
<div className="space-y-1">
{section.items.map((item) => {
const isActive = isActiveRoute(item.id);
const Icon = item.icon;
{/* Nav Items */}
<div className="space-y-1">
{section.items.map((item) => {
const isActive = isActiveRoute(item.id);
const Icon = item.icon;
return (
<button
key={item.id}
onClick={() => setCurrentView(item.id as any)}
className={cn(
"group flex items-center w-full px-2 lg:px-3 py-2.5 rounded-lg relative overflow-hidden transition-all titlebar-no-drag",
isActive
? "bg-white/5 text-white border border-white/10"
: "text-zinc-400 hover:text-white hover:bg-white/5"
)}
title={!sidebarOpen ? item.label : undefined}
data-testid={`nav-${item.id}`}
>
{isActive && (
<div className="absolute inset-y-0 left-0 w-0.5 bg-brand-500 rounded-l-md"></div>
)}
<Icon
return (
<button
key={item.id}
onClick={() => setCurrentView(item.id as any)}
className={cn(
"w-4 h-4 flex-shrink-0 transition-colors",
"group flex items-center w-full px-2 lg:px-3 py-2.5 rounded-lg relative overflow-hidden transition-all titlebar-no-drag",
isActive
? "text-brand-500"
: "group-hover:text-brand-400"
)}
/>
<span
className={cn(
"ml-2.5 font-medium text-sm",
sidebarOpen ? "hidden lg:block" : "hidden"
? "bg-white/5 text-white border border-white/10"
: "text-zinc-400 hover:text-white hover:bg-white/5",
!sidebarOpen && "justify-center"
)}
title={!sidebarOpen ? item.label : undefined}
data-testid={`nav-${item.id}`}
>
{item.label}
</span>
{/* Tooltip for collapsed state */}
{!sidebarOpen && (
{isActive && (
<div className="absolute inset-y-0 left-0 w-0.5 bg-brand-500 rounded-l-md"></div>
)}
<Icon
className={cn(
"w-4 h-4 flex-shrink-0 transition-colors",
isActive
? "text-brand-500"
: "group-hover:text-brand-400"
)}
/>
<span
className="absolute left-full ml-2 px-2 py-1 bg-zinc-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-50 border border-zinc-700"
data-testid={`sidebar-tooltip-${item.label.toLowerCase()}`}
className={cn(
"ml-2.5 font-medium text-sm",
sidebarOpen ? "hidden lg:block" : "hidden"
)}
>
{item.label}
</span>
)}
</button>
);
})}
{/* Tooltip for collapsed state */}
{!sidebarOpen && (
<span
className="absolute left-full ml-2 px-2 py-1 bg-zinc-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-50 border border-zinc-700"
data-testid={`sidebar-tooltip-${item.label.toLowerCase()}`}
>
{item.label}
</span>
)}
</button>
);
})}
</div>
</div>
</div>
))}
))
) : null}
</nav>
</div>
@@ -328,81 +320,6 @@ export function Sidebar() {
</button>
</div>
{/* User Profile */}
<div className="p-3 border-t border-zinc-800" ref={userMenuRef}>
<div className="relative">
<button
onClick={() => setUserMenuOpen(!userMenuOpen)}
className={cn(
"flex items-center p-1.5 rounded-lg transition-colors group relative w-full hover:bg-white/5 titlebar-no-drag",
sidebarOpen ? "lg:space-x-2.5" : "justify-center"
)}
>
<div className="relative">
<div className="w-8 h-8 rounded-full border border-zinc-600 bg-gradient-to-br from-brand-500 to-purple-600 flex items-center justify-center">
<User className="w-4 h-4 text-white" />
</div>
<div className="absolute bottom-0 right-0 w-2 h-2 bg-green-500 border-2 border-zinc-900 rounded-full"></div>
</div>
<div
className={cn(
"overflow-hidden",
sidebarOpen ? "hidden lg:block" : "hidden"
)}
>
<p className="text-xs font-medium text-white truncate">
Developer
</p>
<p className="text-[10px] text-zinc-500 truncate">
Active Session
</p>
</div>
{/* Tooltip for user when collapsed */}
{!sidebarOpen && (
<span
className="absolute left-full ml-2 px-2 py-1 bg-zinc-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-50 border border-zinc-700"
data-testid="sidebar-tooltip-user"
>
Developer
</span>
)}
</button>
{/* Dropdown Menu */}
{userMenuOpen && (
<div
className={cn(
"absolute bottom-full mb-2 bg-zinc-800 border border-zinc-700 rounded-xl shadow-lg overflow-hidden z-50",
sidebarOpen ? "left-0 right-0" : "left-0"
)}
>
<div className="py-2">
<button
onClick={() => {
setUserMenuOpen(false);
setCurrentView("settings");
}}
className="flex items-center w-full px-4 py-2 text-sm text-zinc-300 hover:bg-zinc-700/50 hover:text-white transition-colors titlebar-no-drag"
>
<Settings className="w-4 h-4 mr-3" />
<span>Settings</span>
</button>
<div className="border-t border-zinc-700 my-2"></div>
<button
onClick={() => {
setUserMenuOpen(false);
// Add logout logic here if needed
}}
className="flex items-center w-full px-4 py-2 text-sm text-red-400 hover:bg-zinc-700/50 hover:text-red-300 transition-colors titlebar-no-drag"
>
<LogOut className="w-4 h-4 mr-3" />
<span>Exit</span>
</button>
</div>
</div>
)}
</div>
</div>
</div>
</aside>
);

52
app/src/components/session-manager.tsx
View File

@@ -25,6 +25,26 @@ import {
import { cn } from "@/lib/utils";
import type { SessionListItem } from "@/types/electron";
// Random session name generator
const adjectives = [
"Swift", "Bright", "Clever", "Dynamic", "Eager", "Focused", "Gentle", "Happy",
"Inventive", "Jolly", "Keen", "Lively", "Mighty", "Noble", "Optimal", "Peaceful",
"Quick", "Radiant", "Smart", "Tranquil", "Unique", "Vibrant", "Wise", "Zealous"
];
const nouns = [
"Agent", "Builder", "Coder", "Developer", "Explorer", "Forge", "Garden", "Helper",
"Innovator", "Journey", "Kernel", "Lighthouse", "Mission", "Navigator", "Oracle",
"Project", "Quest", "Runner", "Spark", "Task", "Unicorn", "Voyage", "Workshop"
];
function generateRandomSessionName(): string {
const adjective = adjectives[Math.floor(Math.random() * adjectives.length)];
const noun = nouns[Math.floor(Math.random() * nouns.length)];
const number = Math.floor(Math.random() * 100);
return `${adjective} ${noun} ${number}`;
}
interface SessionManagerProps {
currentSessionId: string | null;
onSelectSession: (sessionId: string) => void;
@@ -60,12 +80,14 @@ export function SessionManager({
loadSessions();
}, []);
// Create new session
// Create new session with random name
const handleCreateSession = async () => {
if (!newSessionName.trim() || !window.electronAPI?.sessions) return;
if (!window.electronAPI?.sessions) return;
const sessionName = newSessionName.trim() || generateRandomSessionName();
const result = await window.electronAPI.sessions.create(
newSessionName,
sessionName,
projectPath,
projectPath
);
@@ -78,6 +100,24 @@ export function SessionManager({
}
};
// Create new session directly with a random name (one-click)
const handleQuickCreateSession = async () => {
if (!window.electronAPI?.sessions) return;
const sessionName = generateRandomSessionName();
const result = await window.electronAPI.sessions.create(
sessionName,
projectPath,
projectPath
);
if (result.success && result.sessionId) {
await loadSessions();
onSelectSession(result.sessionId);
}
};
// Rename session
const handleRenameSession = async (sessionId: string) => {
if (!editingName.trim() || !window.electronAPI?.sessions) return;
@@ -146,7 +186,8 @@ export function SessionManager({
<Button
variant="default"
size="sm"
onClick={() => setIsCreating(true)}
onClick={handleQuickCreateSession}
data-testid="new-session-button"
>
<Plus className="w-4 h-4 mr-1" />
New
@@ -172,7 +213,7 @@ export function SessionManager({
</Tabs>
</CardHeader>
<CardContent className="flex-1 overflow-y-auto space-y-2">
<CardContent className="flex-1 overflow-y-auto space-y-2" data-testid="session-list">
{/* Create new session */}
{isCreating && (
<div className="p-3 border rounded-lg bg-muted/50">
@@ -217,6 +258,7 @@ export function SessionManager({
session.isArchived && "opacity-60"
)}
onClick={() => !session.isArchived && onSelectSession(session.id)}
data-testid={`session-item-${session.id}`}
>
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">

312
app/src/components/views/analysis-view.tsx
View File

@@ -200,16 +200,22 @@ export function AnalysisView() {
// Read key files to understand the project better
const fileContents: Record<string, string> = {};
const keyFiles = ['package.json', 'README.md', 'tsconfig.json'];
const keyFiles = ["package.json", "README.md", "tsconfig.json"];
// Collect file paths from analysis
const collectFilePaths = (nodes: FileTreeNode[], maxDepth: number = 3, currentDepth: number = 0): string[] => {
const collectFilePaths = (
nodes: FileTreeNode[],
maxDepth: number = 3,
currentDepth: number = 0
): string[] => {
const paths: string[] = [];
for (const node of nodes) {
if (!node.isDirectory) {
paths.push(node.path);
} else if (node.children && currentDepth < maxDepth) {
paths.push(...collectFilePaths(node.children, maxDepth, currentDepth + 1));
paths.push(
...collectFilePaths(node.children, maxDepth, currentDepth + 1)
);
}
}
return paths;
@@ -235,31 +241,40 @@ export function AnalysisView() {
const extensions = projectAnalysis.filesByExtension;
// Check package.json for dependencies
if (fileContents['package.json']) {
if (fileContents["package.json"]) {
try {
const pkg = JSON.parse(fileContents['package.json']);
if (pkg.dependencies?.react || pkg.dependencies?.['react-dom']) stack.push('React');
if (pkg.dependencies?.next) stack.push('Next.js');
if (pkg.dependencies?.vue) stack.push('Vue');
if (pkg.dependencies?.angular) stack.push('Angular');
if (pkg.dependencies?.express) stack.push('Express');
if (pkg.dependencies?.electron) stack.push('Electron');
if (pkg.devDependencies?.typescript || pkg.dependencies?.typescript) stack.push('TypeScript');
if (pkg.devDependencies?.tailwindcss || pkg.dependencies?.tailwindcss) stack.push('Tailwind CSS');
if (pkg.devDependencies?.playwright || pkg.dependencies?.playwright) stack.push('Playwright');
if (pkg.devDependencies?.jest || pkg.dependencies?.jest) stack.push('Jest');
const pkg = JSON.parse(fileContents["package.json"]);
if (pkg.dependencies?.react || pkg.dependencies?.["react-dom"])
stack.push("React");
if (pkg.dependencies?.next) stack.push("Next.js");
if (pkg.dependencies?.vue) stack.push("Vue");
if (pkg.dependencies?.angular) stack.push("Angular");
if (pkg.dependencies?.express) stack.push("Express");
if (pkg.dependencies?.electron) stack.push("Electron");
if (pkg.devDependencies?.typescript || pkg.dependencies?.typescript)
stack.push("TypeScript");
if (
pkg.devDependencies?.tailwindcss ||
pkg.dependencies?.tailwindcss
)
stack.push("Tailwind CSS");
if (pkg.devDependencies?.playwright || pkg.dependencies?.playwright)
stack.push("Playwright");
if (pkg.devDependencies?.jest || pkg.dependencies?.jest)
stack.push("Jest");
} catch {
// Ignore JSON parse errors
}
}
// Detect by file extensions
if (extensions['ts'] || extensions['tsx']) stack.push('TypeScript');
if (extensions['py']) stack.push('Python');
if (extensions['go']) stack.push('Go');
if (extensions['rs']) stack.push('Rust');
if (extensions['java']) stack.push('Java');
if (extensions['css'] || extensions['scss'] || extensions['sass']) stack.push('CSS/SCSS');
if (extensions["ts"] || extensions["tsx"]) stack.push("TypeScript");
if (extensions["py"]) stack.push("Python");
if (extensions["go"]) stack.push("Go");
if (extensions["rs"]) stack.push("Rust");
if (extensions["java"]) stack.push("Java");
if (extensions["css"] || extensions["scss"] || extensions["sass"])
stack.push("CSS/SCSS");
// Remove duplicates
return [...new Set(stack)];
@@ -267,9 +282,9 @@ export function AnalysisView() {
// Get project name from package.json or folder name
const getProjectName = () => {
if (fileContents['package.json']) {
if (fileContents["package.json"]) {
try {
const pkg = JSON.parse(fileContents['package.json']);
const pkg = JSON.parse(fileContents["package.json"]);
if (pkg.name) return pkg.name;
} catch {
// Ignore JSON parse errors
@@ -281,36 +296,43 @@ export function AnalysisView() {
// Get project description from package.json or README
const getProjectDescription = () => {
if (fileContents['package.json']) {
if (fileContents["package.json"]) {
try {
const pkg = JSON.parse(fileContents['package.json']);
const pkg = JSON.parse(fileContents["package.json"]);
if (pkg.description) return pkg.description;
} catch {
// Ignore JSON parse errors
}
}
if (fileContents['README.md']) {
if (fileContents["README.md"]) {
// Extract first paragraph from README
const lines = fileContents['README.md'].split('\n');
const lines = fileContents["README.md"].split("\n");
for (const line of lines) {
const trimmed = line.trim();
if (trimmed && !trimmed.startsWith('#') && !trimmed.startsWith('!') && trimmed.length > 20) {
if (
trimmed &&
!trimmed.startsWith("#") &&
!trimmed.startsWith("!") &&
trimmed.length > 20
) {
return trimmed.substring(0, 200);
}
}
}
return 'A software project';
return "A software project";
};
// Group files by directory for structure analysis
const analyzeStructure = () => {
const structure: string[] = [];
const topLevelDirs = projectAnalysis.fileTree.filter(n => n.isDirectory).map(n => n.name);
const topLevelDirs = projectAnalysis.fileTree
.filter((n) => n.isDirectory)
.map((n) => n.name);
for (const dir of topLevelDirs) {
structure.push(` <directory name="${dir}" />`);
}
return structure.join('\n');
return structure.join("\n");
};
const projectName = getProjectName();
@@ -328,14 +350,18 @@ export function AnalysisView() {
<technology_stack>
<languages>
${Object.entries(projectAnalysis.filesByExtension)
.filter(([ext]) => ['ts', 'tsx', 'js', 'jsx', 'py', 'go', 'rs', 'java', 'cpp', 'c'].includes(ext))
.filter(([ext]) =>
["ts", "tsx", "js", "jsx", "py", "go", "rs", "java", "cpp", "c"].includes(
ext
)
)
.sort((a, b) => b[1] - a[1])
.slice(0, 5)
.map(([ext, count]) => ` <language ext=".${ext}" count="${count}" />`)
.join('\n')}
.join("\n")}
</languages>
<frameworks>
${techStack.map(tech => ` <framework>${tech}</framework>`).join('\n')}
${techStack.map((tech) => ` <framework>${tech}</framework>`).join("\n")}
</frameworks>
</technology_stack>
@@ -351,8 +377,13 @@ ${analyzeStructure()}
${Object.entries(projectAnalysis.filesByExtension)
.sort((a, b) => b[1] - a[1])
.slice(0, 10)
.map(([ext, count]) => ` <extension type="${ext.startsWith('(') ? ext : '.' + ext}" count="${count}" />`)
.join('\n')}
.map(
([ext, count]) =>
` <extension type="${
ext.startsWith("(") ? ext : "." + ext
}" count="${count}" />`
)
.join("\n")}
</file_breakdown>
<analyzed_at>${projectAnalysis.analyzedAt}</analyzed_at>
@@ -366,17 +397,19 @@ ${Object.entries(projectAnalysis.filesByExtension)
if (writeResult.success) {
setSpecGenerated(true);
} else {
setSpecError(writeResult.error || 'Failed to write spec file');
setSpecError(writeResult.error || "Failed to write spec file");
}
} catch (error) {
console.error('Failed to generate spec:', error);
setSpecError(error instanceof Error ? error.message : 'Failed to generate spec');
console.error("Failed to generate spec:", error);
setSpecError(
error instanceof Error ? error.message : "Failed to generate spec"
);
} finally {
setIsGeneratingSpec(false);
}
}, [currentProject, projectAnalysis]);
// Generate feature_list.json from analysis
// Generate .automaker/feature_list.json from analysis
const generateFeatureList = useCallback(async () => {
if (!currentProject || !projectAnalysis) return;
@@ -389,7 +422,7 @@ ${Object.entries(projectAnalysis.filesByExtension)
// Read key files to understand the project
const fileContents: Record<string, string> = {};
const keyFiles = ['package.json', 'README.md'];
const keyFiles = ["package.json", "README.md"];
// Try to read key configuration files
for (const keyFile of keyFiles) {
@@ -431,14 +464,21 @@ ${Object.entries(projectAnalysis.filesByExtension)
// Detect features based on project structure and files
const detectFeatures = () => {
const extensions = projectAnalysis.filesByExtension;
const topLevelDirs = projectAnalysis.fileTree.filter(n => n.isDirectory).map(n => n.name.toLowerCase());
const topLevelFiles = projectAnalysis.fileTree.filter(n => !n.isDirectory).map(n => n.name.toLowerCase());
const topLevelDirs = projectAnalysis.fileTree
.filter((n) => n.isDirectory)
.map((n) => n.name.toLowerCase());
const topLevelFiles = projectAnalysis.fileTree
.filter((n) => !n.isDirectory)
.map((n) => n.name.toLowerCase());
// Check for test directories and files
const hasTests = topLevelDirs.includes('tests') ||
topLevelDirs.includes('test') ||
topLevelDirs.includes('__tests__') ||
allFilePaths.some(p => p.includes('.spec.') || p.includes('.test.'));
const hasTests =
topLevelDirs.includes("tests") ||
topLevelDirs.includes("test") ||
topLevelDirs.includes("__tests__") ||
allFilePaths.some(
(p) => p.includes(".spec.") || p.includes(".test.")
);
if (hasTests) {
detectedFeatures.push({
@@ -447,15 +487,16 @@ ${Object.entries(projectAnalysis.filesByExtension)
steps: [
"Step 1: Tests directory exists",
"Step 2: Test files are present",
"Step 3: Run test suite"
"Step 3: Run test suite",
],
passes: true
passes: true,
});
}
// Check for components directory (UI components)
const hasComponents = topLevelDirs.includes('components') ||
allFilePaths.some(p => p.toLowerCase().includes('/components/'));
const hasComponents =
topLevelDirs.includes("components") ||
allFilePaths.some((p) => p.toLowerCase().includes("/components/"));
if (hasComponents) {
detectedFeatures.push({
@@ -464,42 +505,42 @@ ${Object.entries(projectAnalysis.filesByExtension)
steps: [
"Step 1: Components directory exists",
"Step 2: UI components are defined",
"Step 3: Components are reusable"
"Step 3: Components are reusable",
],
passes: true
passes: true,
});
}
// Check for src directory (organized source code)
if (topLevelDirs.includes('src')) {
if (topLevelDirs.includes("src")) {
detectedFeatures.push({
category: "Project Structure",
description: "Organized source code structure",
steps: [
"Step 1: Source directory exists",
"Step 2: Code is properly organized",
"Step 3: Follows best practices"
"Step 3: Follows best practices",
],
passes: true
passes: true,
});
}
// Check package.json for dependencies and detect features
if (fileContents['package.json']) {
if (fileContents["package.json"]) {
try {
const pkg = JSON.parse(fileContents['package.json']);
const pkg = JSON.parse(fileContents["package.json"]);
// React/Next.js app detection
if (pkg.dependencies?.react || pkg.dependencies?.['react-dom']) {
if (pkg.dependencies?.react || pkg.dependencies?.["react-dom"]) {
detectedFeatures.push({
category: "Frontend",
description: "React-based user interface",
steps: [
"Step 1: React is installed",
"Step 2: Components render correctly",
"Step 3: State management works"
"Step 3: State management works",
],
passes: true
passes: true,
});
}
@@ -510,37 +551,45 @@ ${Object.entries(projectAnalysis.filesByExtension)
steps: [
"Step 1: Next.js is configured",
"Step 2: Pages/routes are defined",
"Step 3: Server-side rendering works"
"Step 3: Server-side rendering works",
],
passes: true
passes: true,
});
}
// TypeScript support
if (pkg.devDependencies?.typescript || pkg.dependencies?.typescript || extensions['ts'] || extensions['tsx']) {
if (
pkg.devDependencies?.typescript ||
pkg.dependencies?.typescript ||
extensions["ts"] ||
extensions["tsx"]
) {
detectedFeatures.push({
category: "Developer Experience",
description: "TypeScript type safety",
steps: [
"Step 1: TypeScript is configured",
"Step 2: Type definitions exist",
"Step 3: Code compiles without errors"
"Step 3: Code compiles without errors",
],
passes: true
passes: true,
});
}
// Tailwind CSS
if (pkg.devDependencies?.tailwindcss || pkg.dependencies?.tailwindcss) {
if (
pkg.devDependencies?.tailwindcss ||
pkg.dependencies?.tailwindcss
) {
detectedFeatures.push({
category: "UI/Design",
description: "Tailwind CSS styling",
steps: [
"Step 1: Tailwind is configured",
"Step 2: Styles are applied",
"Step 3: Responsive design works"
"Step 3: Responsive design works",
],
passes: true
passes: true,
});
}
@@ -552,9 +601,9 @@ ${Object.entries(projectAnalysis.filesByExtension)
steps: [
"Step 1: Linter is configured",
"Step 2: Code passes lint checks",
"Step 3: Formatting is consistent"
"Step 3: Formatting is consistent",
],
passes: true
passes: true,
});
}
@@ -566,49 +615,55 @@ ${Object.entries(projectAnalysis.filesByExtension)
steps: [
"Step 1: Electron is configured",
"Step 2: Main process runs",
"Step 3: Renderer process loads"
"Step 3: Renderer process loads",
],
passes: true
passes: true,
});
}
// Playwright testing
if (pkg.devDependencies?.playwright || pkg.devDependencies?.['@playwright/test']) {
if (
pkg.devDependencies?.playwright ||
pkg.devDependencies?.["@playwright/test"]
) {
detectedFeatures.push({
category: "Testing",
description: "Playwright end-to-end testing",
steps: [
"Step 1: Playwright is configured",
"Step 2: E2E tests are defined",
"Step 3: Tests pass successfully"
"Step 3: Tests pass successfully",
],
passes: true
passes: true,
});
}
} catch {
// Ignore JSON parse errors
}
}
// Check for documentation
if (topLevelFiles.includes('readme.md') || topLevelDirs.includes('docs')) {
if (
topLevelFiles.includes("readme.md") ||
topLevelDirs.includes("docs")
) {
detectedFeatures.push({
category: "Documentation",
description: "Project documentation",
steps: [
"Step 1: README exists",
"Step 2: Documentation is comprehensive",
"Step 3: Setup instructions are clear"
"Step 3: Setup instructions are clear",
],
passes: true
passes: true,
});
}
// Check for CI/CD configuration
const hasCICD = topLevelDirs.includes('.github') ||
topLevelFiles.includes('.gitlab-ci.yml') ||
topLevelFiles.includes('.travis.yml');
const hasCICD =
topLevelDirs.includes(".github") ||
topLevelFiles.includes(".gitlab-ci.yml") ||
topLevelFiles.includes(".travis.yml");
if (hasCICD) {
detectedFeatures.push({
@@ -617,17 +672,18 @@ ${Object.entries(projectAnalysis.filesByExtension)
steps: [
"Step 1: CI config exists",
"Step 2: Pipeline runs on push",
"Step 3: Automated checks pass"
"Step 3: Automated checks pass",
],
passes: true
passes: true,
});
}
// Check for API routes (Next.js API or Express)
const hasAPIRoutes = allFilePaths.some(p =>
p.includes('/api/') ||
p.includes('/routes/') ||
p.includes('/endpoints/')
const hasAPIRoutes = allFilePaths.some(
(p) =>
p.includes("/api/") ||
p.includes("/routes/") ||
p.includes("/endpoints/")
);
if (hasAPIRoutes) {
@@ -637,18 +693,19 @@ ${Object.entries(projectAnalysis.filesByExtension)
steps: [
"Step 1: API routes are defined",
"Step 2: Endpoints respond correctly",
"Step 3: Error handling is implemented"
"Step 3: Error handling is implemented",
],
passes: true
passes: true,
});
}
// Check for state management
const hasStateManagement = allFilePaths.some(p =>
p.includes('/store/') ||
p.includes('/stores/') ||
p.includes('/redux/') ||
p.includes('/context/')
const hasStateManagement = allFilePaths.some(
(p) =>
p.includes("/store/") ||
p.includes("/stores/") ||
p.includes("/redux/") ||
p.includes("/context/")
);
if (hasStateManagement) {
@@ -658,23 +715,26 @@ ${Object.entries(projectAnalysis.filesByExtension)
steps: [
"Step 1: Store is configured",
"Step 2: State updates correctly",
"Step 3: Components access state"
"Step 3: Components access state",
],
passes: true
passes: true,
});
}
// Check for configuration files
if (topLevelFiles.includes('tsconfig.json') || topLevelFiles.includes('package.json')) {
if (
topLevelFiles.includes("tsconfig.json") ||
topLevelFiles.includes("package.json")
) {
detectedFeatures.push({
category: "Configuration",
description: "Project configuration files",
steps: [
"Step 1: Config files exist",
"Step 2: Configuration is valid",
"Step 3: Build process works"
"Step 3: Build process works",
],
passes: true
passes: true,
});
}
};
@@ -689,9 +749,9 @@ ${Object.entries(projectAnalysis.filesByExtension)
steps: [
"Step 1: Project directory exists",
"Step 2: Files are present",
"Step 3: Project can be loaded"
"Step 3: Project can be loaded",
],
passes: true
passes: true,
});
}
@@ -700,16 +760,25 @@ ${Object.entries(projectAnalysis.filesByExtension)
// Write the feature list file
const featureListPath = `${currentProject.path}/feature_list.json`;
const writeResult = await api.writeFile(featureListPath, featureListContent);
const writeResult = await api.writeFile(
featureListPath,
featureListContent
);
if (writeResult.success) {
setFeatureListGenerated(true);
} else {
setFeatureListError(writeResult.error || 'Failed to write feature list file');
setFeatureListError(
writeResult.error || "Failed to write feature list file"
);
}
} catch (error) {
console.error('Failed to generate feature list:', error);
setFeatureListError(error instanceof Error ? error.message : 'Failed to generate feature list');
console.error("Failed to generate feature list:", error);
setFeatureListError(
error instanceof Error
? error.message
: "Failed to generate feature list"
);
} finally {
setIsGeneratingFeatureList(false);
}
@@ -922,7 +991,8 @@ ${Object.entries(projectAnalysis.filesByExtension)
</CardHeader>
<CardContent className="space-y-3">
<p className="text-sm text-muted-foreground">
Generate a project specification file based on the analyzed codebase structure and detected technologies.
Generate a project specification file based on the analyzed
codebase structure and detected technologies.
</p>
<Button
onClick={generateSpec}
@@ -943,13 +1013,19 @@ ${Object.entries(projectAnalysis.filesByExtension)
)}
</Button>
{specGenerated && (
<div className="flex items-center gap-2 text-sm text-green-500" data-testid="spec-generated-success">
<div
className="flex items-center gap-2 text-sm text-green-500"
data-testid="spec-generated-success"
>
<CheckCircle className="w-4 h-4" />
<span>app_spec.txt created successfully!</span>
</div>
)}
{specError && (
<div className="flex items-center gap-2 text-sm text-red-500" data-testid="spec-generated-error">
<div
className="flex items-center gap-2 text-sm text-red-500"
data-testid="spec-generated-error"
>
<AlertCircle className="w-4 h-4" />
<span>{specError}</span>
</div>
@@ -965,12 +1041,14 @@ ${Object.entries(projectAnalysis.filesByExtension)
Generate Feature List
</CardTitle>
<CardDescription>
Create feature_list.json from analysis
Create .automaker/feature_list.json from analysis
</CardDescription>
</CardHeader>
<CardContent className="space-y-3">
<p className="text-sm text-muted-foreground">
Automatically detect and generate a feature list based on the analyzed codebase structure, dependencies, and project configuration.
Automatically detect and generate a feature list based on
the analyzed codebase structure, dependencies, and project
configuration.
</p>
<Button
onClick={generateFeatureList}
@@ -991,13 +1069,19 @@ ${Object.entries(projectAnalysis.filesByExtension)
)}
</Button>
{featureListGenerated && (
<div className="flex items-center gap-2 text-sm text-green-500" data-testid="feature-list-generated-success">
<div
className="flex items-center gap-2 text-sm text-green-500"
data-testid="feature-list-generated-success"
>
<CheckCircle className="w-4 h-4" />
<span>feature_list.json created successfully!</span>
</div>
)}
{featureListError && (
<div className="flex items-center gap-2 text-sm text-red-500" data-testid="feature-list-generated-error">
<div
className="flex items-center gap-2 text-sm text-red-500"
data-testid="feature-list-generated-error"
>
<AlertCircle className="w-4 h-4" />
<span>{featureListError}</span>
</div>

11
app/src/components/views/board-view.tsx
View File

@@ -16,7 +16,7 @@ import {
SortableContext,
verticalListSortingStrategy,
} from "@dnd-kit/sortable";
import { useAppStore, Feature } from "@/store/app-store";
import { useAppStore, Feature, FeatureImage } from "@/store/app-store";
import { getElectronAPI } from "@/lib/electron";
import { cn } from "@/lib/utils";
import {
@@ -28,6 +28,9 @@ import {
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { CategoryAutocomplete } from "@/components/ui/category-autocomplete";
import { FeatureImageUpload } from "@/components/ui/feature-image-upload";
import {
Dialog,
DialogContent,
@@ -69,6 +72,7 @@ export function BoardView() {
category: "",
description: "",
steps: [""],
images: [] as FeatureImage[],
});
const [isLoading, setIsLoading] = useState(true);
const [isMounted, setIsMounted] = useState(false);
@@ -263,8 +267,9 @@ export function BoardView() {
description: newFeature.description,
steps: newFeature.steps.filter((s) => s.trim()),
status: "backlog",
images: newFeature.images,
});
setNewFeature({ category: "", description: "", steps: [""] });
setNewFeature({ category: "", description: "", steps: [""], images: [] });
setShowAddDialog(false);
};
@@ -549,7 +554,7 @@ export function BoardView() {
</div>
<div className="space-y-2">
<Label htmlFor="description">Description</Label>
<Input
<Textarea
id="description"
placeholder="Describe the feature..."
value={newFeature.description}

98
app/src/components/views/interview-view.tsx
View File

@@ -62,7 +62,8 @@ const INTERVIEW_QUESTIONS = [
];
export function InterviewView() {
const { setCurrentView, addProject, setCurrentProject, setAppSpec } = useAppStore();
const { setCurrentView, addProject, setCurrentProject, setAppSpec } =
useAppStore();
const [input, setInput] = useState("");
const [messages, setMessages] = useState<InterviewMessage[]>([]);
const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
@@ -130,11 +131,19 @@ export function InterviewView() {
if (currentQuestion) {
setInterviewData((prev) => {
const newData = { ...prev };
if (currentQuestion.field === "techStack" || currentQuestion.field === "features") {
if (
currentQuestion.field === "techStack" ||
currentQuestion.field === "features"
) {
// Parse comma-separated values into array
newData[currentQuestion.field] = input.split(",").map((s) => s.trim()).filter(Boolean);
newData[currentQuestion.field] = input
.split(",")
.map((s) => s.trim())
.filter(Boolean);
} else {
(newData as Record<string, string | string[]>)[currentQuestion.field] = input;
(newData as Record<string, string | string[]>)[
currentQuestion.field
] = input;
}
return newData;
});
@@ -161,16 +170,33 @@ export function InterviewView() {
const summaryMessage: InterviewMessage = {
id: `assistant-summary-${Date.now()}`,
role: "assistant",
content: "Perfect! I have all the information I need. Now let me generate your project specification...",
content:
"Perfect! I have all the information I need. Now let me generate your project specification...",
timestamp: new Date(),
};
setMessages((prev) => [...prev, summaryMessage]);
generateSpec({
...interviewData,
projectDescription: currentQuestionIndex === 0 ? input : interviewData.projectDescription,
techStack: currentQuestionIndex === 1 ? input.split(",").map(s => s.trim()).filter(Boolean) : interviewData.techStack,
features: currentQuestionIndex === 2 ? input.split(",").map(s => s.trim()).filter(Boolean) : interviewData.features,
additionalNotes: currentQuestionIndex === 3 ? input : interviewData.additionalNotes,
projectDescription:
currentQuestionIndex === 0
? input
: interviewData.projectDescription,
techStack:
currentQuestionIndex === 1
? input
.split(",")
.map((s) => s.trim())
.filter(Boolean)
: interviewData.techStack,
features:
currentQuestionIndex === 2
? input
.split(",")
.map((s) => s.trim())
.filter(Boolean)
: interviewData.features,
additionalNotes:
currentQuestionIndex === 3 ? input : interviewData.additionalNotes,
});
}
}, 500);
@@ -215,11 +241,23 @@ export function InterviewView() {
</overview>
<technology_stack>
${data.techStack.length > 0 ? data.techStack.map((tech) => `<technology>${tech}</technology>`).join("\n ") : "<!-- Define your tech stack -->"}
${
data.techStack.length > 0
? data.techStack
.map((tech) => `<technology>${tech}</technology>`)
.join("\n ")
: "<!-- Define your tech stack -->"
}
</technology_stack>
<core_capabilities>
${data.features.length > 0 ? data.features.map((feature) => `<capability>${feature}</capability>`).join("\n ") : "<!-- List core features -->"}
${
data.features.length > 0
? data.features
.map((feature) => `<capability>${feature}</capability>`)
.join("\n ")
: "<!-- List core features -->"
}
</core_capabilities>
<additional_requirements>
@@ -259,7 +297,7 @@ export function InterviewView() {
// Write app_spec.txt with generated content
await api.writeFile(`${fullProjectPath}/app_spec.txt`, generatedSpec);
// Create initial feature_list.json
// Create initial .automaker/feature_list.json
await api.writeFile(
`${fullProjectPath}/feature_list.json`,
JSON.stringify(
@@ -267,7 +305,11 @@ export function InterviewView() {
{
category: "Core",
description: "Initial project setup",
steps: ["Step 1: Review app_spec.txt", "Step 2: Set up development environment", "Step 3: Start implementing features"],
steps: [
"Step 1: Review app_spec.txt",
"Step 2: Set up development environment",
"Step 3: Start implementing features",
],
passes: false,
},
],
@@ -307,7 +349,10 @@ export function InterviewView() {
};
return (
<div className="flex-1 flex flex-col content-bg" data-testid="interview-view">
<div
className="flex-1 flex flex-col content-bg"
data-testid="interview-view"
>
{/* Header */}
<div className="flex items-center justify-between p-4 border-b border-white/10 bg-zinc-950/50 backdrop-blur-md">
<div className="flex items-center gap-3">
@@ -324,7 +369,11 @@ export function InterviewView() {
<div>
<h1 className="text-xl font-bold">New Project Interview</h1>
<p className="text-sm text-muted-foreground">
{isComplete ? "Specification generated!" : `Question ${currentQuestionIndex + 1} of ${INTERVIEW_QUESTIONS.length}`}
{isComplete
? "Specification generated!"
: `Question ${currentQuestionIndex + 1} of ${
INTERVIEW_QUESTIONS.length
}`}
</p>
</div>
</div>
@@ -344,7 +393,9 @@ export function InterviewView() {
)}
/>
))}
{isComplete && <CheckCircle className="w-4 h-4 text-green-500 ml-2" />}
{isComplete && (
<CheckCircle className="w-4 h-4 text-green-500 ml-2" />
)}
</div>
</div>
@@ -418,7 +469,10 @@ export function InterviewView() {
{/* Project Setup Form */}
{showProjectSetup && (
<div className="mt-6">
<Card className="bg-zinc-900/50 border-white/10" data-testid="project-setup-form">
<Card
className="bg-zinc-900/50 border-white/10"
data-testid="project-setup-form"
>
<CardContent className="p-6 space-y-4">
<div className="flex items-center gap-2 mb-4">
<FileText className="w-5 h-5 text-primary" />
@@ -427,7 +481,10 @@ export function InterviewView() {
<div className="space-y-4">
<div className="space-y-2">
<label htmlFor="project-name" className="text-sm font-medium text-zinc-300">
<label
htmlFor="project-name"
className="text-sm font-medium text-zinc-300"
>
Project Name
</label>
<Input
@@ -441,7 +498,10 @@ export function InterviewView() {
</div>
<div className="space-y-2">
<label htmlFor="project-path" className="text-sm font-medium text-zinc-300">
<label
htmlFor="project-path"
className="text-sm font-medium text-zinc-300"
>
Parent Directory
</label>
<div className="flex gap-2">

1
app/src/store/app-store.ts
View File

@@ -401,6 +401,7 @@ export const useAppStore = create<AppState & AppActions>()(
name: "automaker-storage",
partialize: (state) => ({
projects: state.projects,
currentProject: state.currentProject,
theme: state.theme,
sidebarOpen: state.sidebarOpen,
apiKeys: state.apiKeys,

228
app/tests/analysis.spec.ts
View File

@@ -1,7 +1,9 @@
import { test, expect } from "@playwright/test";
test.describe("Project Analysis", () => {
test("can navigate to analysis view when project is open", async ({ page }) => {
test("can navigate to analysis view when project is open", async ({
page,
}) => {
await page.goto("/");
// Create a project first using dropdown
@@ -22,7 +24,9 @@ test.describe("Project Analysis", () => {
await expect(page.getByTestId("analysis-view")).toBeVisible();
});
test("analysis view shows 'No Analysis Yet' message initially", async ({ page }) => {
test("analysis view shows 'No Analysis Yet' message initially", async ({
page,
}) => {
await page.goto("/");
// Create a project first using dropdown
@@ -30,7 +34,9 @@ test.describe("Project Analysis", () => {
await page.getByTestId("quick-setup-option").click();
await expect(page.getByTestId("new-project-dialog")).toBeVisible();
await page.getByTestId("project-name-input").fill("Analysis Test Project2");
await page.getByTestId("project-path-input").fill("/test/analysis/project2");
await page
.getByTestId("project-path-input")
.fill("/test/analysis/project2");
await page.getByTestId("confirm-create-project").click();
await expect(page.getByTestId("board-view")).toBeVisible();
@@ -51,7 +57,9 @@ test.describe("Project Analysis", () => {
await page.getByTestId("quick-setup-option").click();
await expect(page.getByTestId("new-project-dialog")).toBeVisible();
await page.getByTestId("project-name-input").fill("Analysis Test Project3");
await page.getByTestId("project-path-input").fill("/test/analysis/project3");
await page
.getByTestId("project-path-input")
.fill("/test/analysis/project3");
await page.getByTestId("confirm-create-project").click();
await expect(page.getByTestId("board-view")).toBeVisible();
@@ -71,7 +79,9 @@ test.describe("Project Analysis", () => {
await page.getByTestId("quick-setup-option").click();
await expect(page.getByTestId("new-project-dialog")).toBeVisible();
await page.getByTestId("project-name-input").fill("Analysis Test Project4");
await page.getByTestId("project-path-input").fill("/test/analysis/project4");
await page
.getByTestId("project-path-input")
.fill("/test/analysis/project4");
await page.getByTestId("confirm-create-project").click();
await expect(page.getByTestId("board-view")).toBeVisible();
@@ -98,7 +108,9 @@ test.describe("Project Analysis", () => {
await page.getByTestId("quick-setup-option").click();
await expect(page.getByTestId("new-project-dialog")).toBeVisible();
await page.getByTestId("project-name-input").fill("Analysis Test Project5");
await page.getByTestId("project-path-input").fill("/test/analysis/project5");
await page
.getByTestId("project-path-input")
.fill("/test/analysis/project5");
await page.getByTestId("confirm-create-project").click();
await expect(page.getByTestId("board-view")).toBeVisible();
@@ -124,7 +136,9 @@ test.describe("Project Analysis", () => {
await page.getByTestId("quick-setup-option").click();
await expect(page.getByTestId("new-project-dialog")).toBeVisible();
await page.getByTestId("project-name-input").fill("Analysis Test Project6");
await page.getByTestId("project-path-input").fill("/test/analysis/project6");
await page
.getByTestId("project-path-input")
.fill("/test/analysis/project6");
await page.getByTestId("confirm-create-project").click();
await expect(page.getByTestId("board-view")).toBeVisible();
@@ -142,7 +156,9 @@ test.describe("Project Analysis", () => {
await expect(page.getByTestId("files-by-extension")).toBeVisible();
});
test("file tree displays correct structure with directories and files", async ({ page }) => {
test("file tree displays correct structure with directories and files", async ({
page,
}) => {
await page.goto("/");
// Create a project first using dropdown
@@ -150,7 +166,9 @@ test.describe("Project Analysis", () => {
await page.getByTestId("quick-setup-option").click();
await expect(page.getByTestId("new-project-dialog")).toBeVisible();
await page.getByTestId("project-name-input").fill("Analysis Test Project7");
await page.getByTestId("project-path-input").fill("/test/analysis/project7");
await page
.getByTestId("project-path-input")
.fill("/test/analysis/project7");
await page.getByTestId("confirm-create-project").click();
await expect(page.getByTestId("board-view")).toBeVisible();
@@ -173,7 +191,9 @@ test.describe("Project Analysis", () => {
});
test.describe("Generate Spec from Code", () => {
test("shows Generate Spec card after analysis is complete", async ({ page }) => {
test("shows Generate Spec card after analysis is complete", async ({
page,
}) => {
await page.goto("/");
// Step 1: Open project with code but no spec
@@ -181,8 +201,12 @@ test.describe("Generate Spec from Code", () => {
await page.getByTestId("create-new-project").click();
await page.getByTestId("quick-setup-option").click();
await expect(page.getByTestId("new-project-dialog")).toBeVisible();
await page.getByTestId("project-name-input").fill("Generate Spec Test Project");
await page.getByTestId("project-path-input").fill("/test/generate-spec/project");
await page
.getByTestId("project-name-input")
.fill("Generate Spec Test Project");
await page
.getByTestId("project-path-input")
.fill("/test/generate-spec/project");
await page.getByTestId("confirm-create-project").click();
await expect(page.getByTestId("board-view")).toBeVisible();
@@ -205,8 +229,12 @@ test.describe("Generate Spec from Code", () => {
await page.getByTestId("create-new-project").click();
await page.getByTestId("quick-setup-option").click();
await expect(page.getByTestId("new-project-dialog")).toBeVisible();
await page.getByTestId("project-name-input").fill("Generate Spec Test Project2");
await page.getByTestId("project-path-input").fill("/test/generate-spec/project2");
await page
.getByTestId("project-name-input")
.fill("Generate Spec Test Project2");
await page
.getByTestId("project-path-input")
.fill("/test/generate-spec/project2");
await page.getByTestId("confirm-create-project").click();
await expect(page.getByTestId("board-view")).toBeVisible();
@@ -220,18 +248,26 @@ test.describe("Generate Spec from Code", () => {
// Step 2: Trigger 'Generate Spec' - verify button exists
await expect(page.getByTestId("generate-spec-button")).toBeVisible();
await expect(page.getByTestId("generate-spec-button")).toHaveText(/Generate Spec/);
await expect(page.getByTestId("generate-spec-button")).toHaveText(
/Generate Spec/
);
});
test("can trigger Generate Spec and shows success message", async ({ page }) => {
test("can trigger Generate Spec and shows success message", async ({
page,
}) => {
await page.goto("/");
// Step 1: Open project with code but no spec
await page.getByTestId("create-new-project").click();
await page.getByTestId("quick-setup-option").click();
await expect(page.getByTestId("new-project-dialog")).toBeVisible();
await page.getByTestId("project-name-input").fill("Generate Spec Test Project3");
await page.getByTestId("project-path-input").fill("/test/generate-spec/project3");
await page
.getByTestId("project-name-input")
.fill("Generate Spec Test Project3");
await page
.getByTestId("project-path-input")
.fill("/test/generate-spec/project3");
await page.getByTestId("confirm-create-project").click();
await expect(page.getByTestId("board-view")).toBeVisible();
@@ -248,7 +284,9 @@ test.describe("Generate Spec from Code", () => {
// Step 3: Verify app_spec.txt is created (success message appears)
await expect(page.getByTestId("spec-generated-success")).toBeVisible();
await expect(page.getByText("app_spec.txt created successfully")).toBeVisible();
await expect(
page.getByText("app_spec.txt created successfully")
).toBeVisible();
});
test("Generate Spec card displays description", async ({ page }) => {
@@ -258,8 +296,12 @@ test.describe("Generate Spec from Code", () => {
await page.getByTestId("create-new-project").click();
await page.getByTestId("quick-setup-option").click();
await expect(page.getByTestId("new-project-dialog")).toBeVisible();
await page.getByTestId("project-name-input").fill("Generate Spec Test Project4");
await page.getByTestId("project-path-input").fill("/test/generate-spec/project4");
await page
.getByTestId("project-name-input")
.fill("Generate Spec Test Project4");
await page
.getByTestId("project-path-input")
.fill("/test/generate-spec/project4");
await page.getByTestId("confirm-create-project").click();
await expect(page.getByTestId("board-view")).toBeVisible();
@@ -270,19 +312,29 @@ test.describe("Generate Spec from Code", () => {
// Step 4: Verify spec content accurately reflects codebase
// Check that the card shows relevant information about what the spec generation does
await expect(page.getByText("Create app_spec.txt from analysis")).toBeVisible();
await expect(page.getByText(/Generate a project specification/)).toBeVisible();
await expect(
page.getByText("Create app_spec.txt from analysis")
).toBeVisible();
await expect(
page.getByText(/Generate a project specification/)
).toBeVisible();
});
test("Generate Spec button is disabled while generating", async ({ page }) => {
test("Generate Spec button is disabled while generating", async ({
page,
}) => {
await page.goto("/");
// Create a project
await page.getByTestId("create-new-project").click();
await page.getByTestId("quick-setup-option").click();
await expect(page.getByTestId("new-project-dialog")).toBeVisible();
await page.getByTestId("project-name-input").fill("Generate Spec Test Project5");
await page.getByTestId("project-path-input").fill("/test/generate-spec/project5");
await page
.getByTestId("project-name-input")
.fill("Generate Spec Test Project5");
await page
.getByTestId("project-path-input")
.fill("/test/generate-spec/project5");
await page.getByTestId("confirm-create-project").click();
await expect(page.getByTestId("board-view")).toBeVisible();
@@ -297,7 +349,9 @@ test.describe("Generate Spec from Code", () => {
await expect(generateButton).toBeEnabled();
});
test("generated spec file reflects analyzed codebase structure", async ({ page }) => {
test("generated spec file reflects analyzed codebase structure", async ({
page,
}) => {
await page.goto("/");
// Step 1: Open project with code but no spec
@@ -305,7 +359,9 @@ test.describe("Generate Spec from Code", () => {
await page.getByTestId("quick-setup-option").click();
await expect(page.getByTestId("new-project-dialog")).toBeVisible();
await page.getByTestId("project-name-input").fill("Spec Verify Project");
await page.getByTestId("project-path-input").fill("/test/spec-verify/project");
await page
.getByTestId("project-path-input")
.fill("/test/spec-verify/project");
await page.getByTestId("confirm-create-project").click();
await expect(page.getByTestId("board-view")).toBeVisible();
@@ -352,15 +408,21 @@ test.describe("Generate Spec from Code", () => {
});
test.describe("Generate Feature List from Code", () => {
test("shows Generate Feature List card after analysis is complete", async ({ page }) => {
test("shows Generate Feature List card after analysis is complete", async ({
page,
}) => {
await page.goto("/");
// Step 1: Open project with implemented features
await page.getByTestId("create-new-project").click();
await page.getByTestId("quick-setup-option").click();
await expect(page.getByTestId("new-project-dialog")).toBeVisible();
await page.getByTestId("project-name-input").fill("Feature List Test Project");
await page.getByTestId("project-path-input").fill("/test/feature-list/project");
await page
.getByTestId("project-name-input")
.fill("Feature List Test Project");
await page
.getByTestId("project-path-input")
.fill("/test/feature-list/project");
await page.getByTestId("confirm-create-project").click();
await expect(page.getByTestId("board-view")).toBeVisible();
@@ -376,15 +438,21 @@ test.describe("Generate Feature List from Code", () => {
await expect(page.getByTestId("generate-feature-list-card")).toBeVisible();
});
test("shows Generate Feature List button after analysis", async ({ page }) => {
test("shows Generate Feature List button after analysis", async ({
page,
}) => {
await page.goto("/");
// Create a project
await page.getByTestId("create-new-project").click();
await page.getByTestId("quick-setup-option").click();
await expect(page.getByTestId("new-project-dialog")).toBeVisible();
await page.getByTestId("project-name-input").fill("Feature List Test Project2");
await page.getByTestId("project-path-input").fill("/test/feature-list/project2");
await page
.getByTestId("project-name-input")
.fill("Feature List Test Project2");
await page
.getByTestId("project-path-input")
.fill("/test/feature-list/project2");
await page.getByTestId("confirm-create-project").click();
await expect(page.getByTestId("board-view")).toBeVisible();
@@ -397,19 +465,29 @@ test.describe("Generate Feature List from Code", () => {
await expect(page.getByTestId("analysis-stats")).toBeVisible();
// Step 2: Trigger 'Generate Feature List' - verify button exists
await expect(page.getByTestId("generate-feature-list-button")).toBeVisible();
await expect(page.getByTestId("generate-feature-list-button")).toHaveText(/Generate Feature List/);
await expect(
page.getByTestId("generate-feature-list-button")
).toBeVisible();
await expect(page.getByTestId("generate-feature-list-button")).toHaveText(
/Generate Feature List/
);
});
test("can trigger Generate Feature List and shows success message", async ({ page }) => {
test("can trigger Generate Feature List and shows success message", async ({
page,
}) => {
await page.goto("/");
// Step 1: Open project with implemented features
await page.getByTestId("create-new-project").click();
await page.getByTestId("quick-setup-option").click();
await expect(page.getByTestId("new-project-dialog")).toBeVisible();
await page.getByTestId("project-name-input").fill("Feature List Test Project3");
await page.getByTestId("project-path-input").fill("/test/feature-list/project3");
await page
.getByTestId("project-name-input")
.fill("Feature List Test Project3");
await page
.getByTestId("project-path-input")
.fill("/test/feature-list/project3");
await page.getByTestId("confirm-create-project").click();
await expect(page.getByTestId("board-view")).toBeVisible();
@@ -424,9 +502,13 @@ test.describe("Generate Feature List from Code", () => {
// Step 2: Trigger 'Generate Feature List'
await page.getByTestId("generate-feature-list-button").click();
// Step 3: Verify feature_list.json is created (success message appears)
await expect(page.getByTestId("feature-list-generated-success")).toBeVisible();
await expect(page.getByText("feature_list.json created successfully")).toBeVisible();
// Step 3: Verify .automaker/feature_list.json is created (success message appears)
await expect(
page.getByTestId("feature-list-generated-success")
).toBeVisible();
await expect(
page.getByText("feature_list.json created successfully")
).toBeVisible();
});
test("Generate Feature List card displays description", async ({ page }) => {
@@ -436,8 +518,12 @@ test.describe("Generate Feature List from Code", () => {
await page.getByTestId("create-new-project").click();
await page.getByTestId("quick-setup-option").click();
await expect(page.getByTestId("new-project-dialog")).toBeVisible();
await page.getByTestId("project-name-input").fill("Feature List Test Project4");
await page.getByTestId("project-path-input").fill("/test/feature-list/project4");
await page
.getByTestId("project-name-input")
.fill("Feature List Test Project4");
await page
.getByTestId("project-path-input")
.fill("/test/feature-list/project4");
await page.getByTestId("confirm-create-project").click();
await expect(page.getByTestId("board-view")).toBeVisible();
@@ -447,19 +533,29 @@ test.describe("Generate Feature List from Code", () => {
await expect(page.getByTestId("generate-feature-list-card")).toBeVisible();
// Check that the card shows relevant information about what the feature list generation does
await expect(page.getByText("Create feature_list.json from analysis")).toBeVisible();
await expect(page.getByText(/Automatically detect and generate a feature list/)).toBeVisible();
await expect(
page.getByText("Create .automaker/feature_list.json from analysis")
).toBeVisible();
await expect(
page.getByText(/Automatically detect and generate a feature list/)
).toBeVisible();
});
test("Generate Feature List button is enabled after analysis", async ({ page }) => {
test("Generate Feature List button is enabled after analysis", async ({
page,
}) => {
await page.goto("/");
// Create a project
await page.getByTestId("create-new-project").click();
await page.getByTestId("quick-setup-option").click();
await expect(page.getByTestId("new-project-dialog")).toBeVisible();
await page.getByTestId("project-name-input").fill("Feature List Test Project5");
await page.getByTestId("project-path-input").fill("/test/feature-list/project5");
await page
.getByTestId("project-name-input")
.fill("Feature List Test Project5");
await page
.getByTestId("project-path-input")
.fill("/test/feature-list/project5");
await page.getByTestId("confirm-create-project").click();
await expect(page.getByTestId("board-view")).toBeVisible();
@@ -474,7 +570,9 @@ test.describe("Generate Feature List from Code", () => {
await expect(generateButton).toBeEnabled();
});
test("generated feature list contains features with passes: true", async ({ page }) => {
test("generated feature list contains features with passes: true", async ({
page,
}) => {
await page.goto("/");
// Step 1: Open project with implemented features
@@ -482,7 +580,9 @@ test.describe("Generate Feature List from Code", () => {
await page.getByTestId("quick-setup-option").click();
await expect(page.getByTestId("new-project-dialog")).toBeVisible();
await page.getByTestId("project-name-input").fill("Feature Verify Project");
await page.getByTestId("project-path-input").fill("/test/feature-verify/project");
await page
.getByTestId("project-path-input")
.fill("/test/feature-verify/project");
await page.getByTestId("confirm-create-project").click();
await expect(page.getByTestId("board-view")).toBeVisible();
@@ -504,8 +604,10 @@ test.describe("Generate Feature List from Code", () => {
// Step 2: Trigger 'Generate Feature List'
await page.getByTestId("generate-feature-list-button").click();
// Step 3: Verify feature_list.json is created (success message appears)
await expect(page.getByTestId("feature-list-generated-success")).toBeVisible();
// Step 3: Verify .automaker/feature_list.json is created (success message appears)
await expect(
page.getByTestId("feature-list-generated-success")
).toBeVisible();
// Step 4: Verify existing features are marked 'passes': true
// Navigate to board view to verify the features are loaded
@@ -517,15 +619,21 @@ test.describe("Generate Feature List from Code", () => {
// the generation completed successfully (the success message is sufficient proof)
});
test("Generate Feature List can be triggered multiple times", async ({ page }) => {
test("Generate Feature List can be triggered multiple times", async ({
page,
}) => {
await page.goto("/");
// Create a project
await page.getByTestId("create-new-project").click();
await page.getByTestId("quick-setup-option").click();
await expect(page.getByTestId("new-project-dialog")).toBeVisible();
await page.getByTestId("project-name-input").fill("Feature List Multi Test");
await page.getByTestId("project-path-input").fill("/test/feature-list/multi");
await page
.getByTestId("project-name-input")
.fill("Feature List Multi Test");
await page
.getByTestId("project-path-input")
.fill("/test/feature-list/multi");
await page.getByTestId("confirm-create-project").click();
await expect(page.getByTestId("board-view")).toBeVisible();
@@ -536,10 +644,14 @@ test.describe("Generate Feature List from Code", () => {
// Generate feature list first time
await page.getByTestId("generate-feature-list-button").click();
await expect(page.getByTestId("feature-list-generated-success")).toBeVisible();
await expect(
page.getByTestId("feature-list-generated-success")
).toBeVisible();
// Generate feature list second time (should overwrite)
await page.getByTestId("generate-feature-list-button").click();
await expect(page.getByTestId("feature-list-generated-success")).toBeVisible();
await expect(
page.getByTestId("feature-list-generated-success")
).toBeVisible();
});
});

161
app/tests/kanban-board.spec.ts
View File

@@ -10,35 +10,22 @@ test.describe("Kanban Board", () => {
path: "/mock/test-project",
lastOpened: new Date().toISOString(),
};
localStorage.setItem("automaker-storage", JSON.stringify({
state: {
projects: [mockProject],
currentProject: mockProject,
currentView: "board",
sidebarOpen: true,
theme: "dark",
},
version: 0,
}));
localStorage.setItem(
"automaker-storage",
JSON.stringify({
state: {
projects: [mockProject],
currentProject: mockProject,
currentView: "board",
sidebarOpen: true,
theme: "dark",
},
version: 0,
})
);
});
}
test("renders Kanban columns when project is open", async ({ page }) => {
await setupMockProject(page);
await page.goto("/");
// Should show the board view
await expect(page.getByTestId("board-view")).toBeVisible();
// Check all columns are visible
await expect(page.getByTestId("kanban-column-backlog")).toBeVisible();
await expect(page.getByTestId("kanban-column-planned")).toBeVisible();
await expect(page.getByTestId("kanban-column-in_progress")).toBeVisible();
await expect(page.getByTestId("kanban-column-review")).toBeVisible();
await expect(page.getByTestId("kanban-column-verified")).toBeVisible();
await expect(page.getByTestId("kanban-column-failed")).toBeVisible();
});
test("shows Add Feature button", async ({ page }) => {
await setupMockProject(page);
await page.goto("/");
@@ -71,7 +58,9 @@ test.describe("Kanban Board", () => {
// Fill in feature details
await page.getByTestId("feature-category-input").fill("Test Category");
await page.getByTestId("feature-description-input").fill("Test Feature Description");
await page
.getByTestId("feature-description-input")
.fill("Test Feature Description");
await page.getByTestId("feature-step-0-input").fill("Step 1: First step");
// Submit the form
@@ -88,7 +77,9 @@ test.describe("Kanban Board", () => {
await expect(page.getByTestId("refresh-board")).toBeVisible();
});
test("loads cards from feature_list.json and displays them in correct columns", async ({ page }) => {
test("loads cards from .automaker/feature_list.json and displays them in correct columns", async ({
page,
}) => {
await setupMockProject(page);
await page.goto("/");
@@ -105,7 +96,9 @@ test.describe("Kanban Board", () => {
await expect(backlogColumn.getByText("Sample Feature")).toBeVisible();
});
test("features with passes:true appear in verified column", async ({ page }) => {
test("features with passes:true appear in verified column", async ({
page,
}) => {
// Create a project and add a feature manually
await setupMockProject(page);
await page.goto("/");
@@ -116,11 +109,17 @@ test.describe("Kanban Board", () => {
// Add a new feature
await page.getByTestId("add-feature-button").click();
await page.getByTestId("feature-category-input").fill("Core");
await page.getByTestId("feature-description-input").fill("Verified Test Feature");
await page
.getByTestId("feature-description-input")
.fill("Verified Test Feature");
await page.getByTestId("confirm-add-feature").click();
// The new feature should appear in backlog
await expect(page.getByTestId("kanban-column-backlog").getByText("Verified Test Feature")).toBeVisible();
await expect(
page
.getByTestId("kanban-column-backlog")
.getByText("Verified Test Feature")
).toBeVisible();
});
test("can edit feature card details", async ({ page }) => {
@@ -131,19 +130,25 @@ test.describe("Kanban Board", () => {
await expect(page.getByTestId("board-view")).toBeVisible();
// Wait for features to load - the mock returns "Sample Feature"
await expect(page.getByTestId("kanban-column-backlog").getByText("Sample Feature")).toBeVisible();
await expect(
page.getByTestId("kanban-column-backlog").getByText("Sample Feature")
).toBeVisible();
// Find and click the edit button on the card using specific testid pattern
const backlogColumn = page.getByTestId("kanban-column-backlog");
// The edit button has testid "edit-feature-{feature.id}" where feature.id contains "feature-0-"
const editButton = backlogColumn.locator('[data-testid^="edit-feature-feature-0-"]');
const editButton = backlogColumn.locator(
'[data-testid^="edit-feature-feature-0-"]'
);
await editButton.click();
// Edit dialog should appear
await expect(page.getByTestId("edit-feature-dialog")).toBeVisible();
// Edit the description
await page.getByTestId("edit-feature-description").fill("Updated Feature Description");
await page
.getByTestId("edit-feature-description")
.fill("Updated Feature Description");
// Save the changes
await page.getByTestId("confirm-edit-feature").click();
@@ -163,15 +168,21 @@ test.describe("Kanban Board", () => {
await expect(page.getByTestId("board-view")).toBeVisible();
// Wait for features to load
await expect(page.getByTestId("kanban-column-backlog").getByText("Sample Feature")).toBeVisible();
await expect(
page.getByTestId("kanban-column-backlog").getByText("Sample Feature")
).toBeVisible();
// Click edit button using specific testid pattern
const backlogColumn = page.getByTestId("kanban-column-backlog");
const editButton = backlogColumn.locator('[data-testid^="edit-feature-feature-0-"]');
const editButton = backlogColumn.locator(
'[data-testid^="edit-feature-feature-0-"]'
);
await editButton.click();
// Check that the dialog pre-populates with existing data
await expect(page.getByTestId("edit-feature-description")).toHaveValue("Sample Feature");
await expect(page.getByTestId("edit-feature-description")).toHaveValue(
"Sample Feature"
);
await expect(page.getByTestId("edit-feature-category")).toHaveValue("Core");
});
@@ -189,7 +200,9 @@ test.describe("Kanban Board", () => {
await expect(backlogColumn.getByText("Sample Feature")).toBeVisible();
// Find the drag handle specifically
const dragHandle = backlogColumn.locator('[data-testid^="drag-handle-feature-0-"]');
const dragHandle = backlogColumn.locator(
'[data-testid^="drag-handle-feature-0-"]'
);
await expect(dragHandle).toBeVisible();
// Get drag handle and target positions
@@ -217,55 +230,9 @@ test.describe("Kanban Board", () => {
await expect(backlogColumn.getByText("Sample Feature")).not.toBeVisible();
});
test("drag and drop updates feature status and triggers file save", async ({ page }) => {
await setupMockProject(page);
await page.goto("/");
// Wait for board to load
await expect(page.getByTestId("board-view")).toBeVisible();
// Wait for features to load in Backlog
const backlogColumn = page.getByTestId("kanban-column-backlog");
const plannedColumn = page.getByTestId("kanban-column-planned");
await expect(backlogColumn.getByText("Sample Feature")).toBeVisible();
// Find the drag handle specifically
const dragHandle = backlogColumn.locator('[data-testid^="drag-handle-feature-0-"]');
await expect(dragHandle).toBeVisible();
// Get drag handle and target positions (Planned is adjacent to Backlog)
const handleBox = await dragHandle.boundingBox();
const targetBox = await plannedColumn.boundingBox();
if (!handleBox || !targetBox) throw new Error("Could not find elements");
// Use mouse events - start from center of drag handle
const startX = handleBox.x + handleBox.width / 2;
const startY = handleBox.y + handleBox.height / 2;
const endX = targetBox.x + targetBox.width / 2;
const endY = targetBox.y + 100;
await page.mouse.move(startX, startY);
await page.mouse.down();
// Move in steps to trigger dnd-kit activation (needs >8px movement)
await page.mouse.move(endX, endY, { steps: 20 });
await page.mouse.up();
// Verify card moved to Planned column
await expect(plannedColumn.getByText("Sample Feature")).toBeVisible();
// Verify card is no longer in Backlog
await expect(backlogColumn.getByText("Sample Feature")).not.toBeVisible();
// The feature moving to Planned means the feature_list.json would be updated
// with the new status. Since status changed from backlog, passes would remain false
// This confirms the state update and file save workflow works.
const plannedCard = plannedColumn.locator('[data-testid^="kanban-card-feature-0-"]');
await expect(plannedCard).toBeVisible();
});
test("displays delete button (trash icon) on feature card", async ({ page }) => {
test("displays delete button (trash icon) on feature card", async ({
page,
}) => {
await setupMockProject(page);
await page.goto("/");
@@ -277,7 +244,9 @@ test.describe("Kanban Board", () => {
await expect(backlogColumn.getByText("Sample Feature")).toBeVisible();
// Find the delete button on the card
const deleteButton = backlogColumn.locator('[data-testid^="delete-feature-feature-0-"]');
const deleteButton = backlogColumn.locator(
'[data-testid^="delete-feature-feature-0-"]'
);
await expect(deleteButton).toBeVisible();
});
@@ -293,7 +262,9 @@ test.describe("Kanban Board", () => {
await expect(backlogColumn.getByText("Sample Feature")).toBeVisible();
// Find and click the delete button
const deleteButton = backlogColumn.locator('[data-testid^="delete-feature-feature-0-"]');
const deleteButton = backlogColumn.locator(
'[data-testid^="delete-feature-feature-0-"]'
);
await deleteButton.click();
// Verify the feature is removed from the board
@@ -310,7 +281,9 @@ test.describe("Kanban Board", () => {
// Add a new feature first
await page.getByTestId("add-feature-button").click();
await page.getByTestId("feature-category-input").fill("Test Category");
await page.getByTestId("feature-description-input").fill("Feature to Delete");
await page
.getByTestId("feature-description-input")
.fill("Feature to Delete");
await page.getByTestId("confirm-add-feature").click();
// Wait for the new feature to appear in backlog
@@ -318,11 +291,15 @@ test.describe("Kanban Board", () => {
await expect(backlogColumn.getByText("Feature to Delete")).toBeVisible();
// Find and click the delete button for the newly added feature
const deleteButton = backlogColumn.locator('[data-testid^="delete-feature-feature-"]').last();
const deleteButton = backlogColumn
.locator('[data-testid^="delete-feature-feature-"]')
.last();
await deleteButton.click();
// Verify the feature is removed
await expect(backlogColumn.getByText("Feature to Delete")).not.toBeVisible();
await expect(
backlogColumn.getByText("Feature to Delete")
).not.toBeVisible();
// Also verify it's not anywhere else on the board
await expect(page.getByText("Feature to Delete")).not.toBeVisible();

104
app/tests/new-session.spec.ts Normal file
View File

@@ -0,0 +1,104 @@
import { test, expect } from "@playwright/test";
test.describe("New Chat Session Auto Focus", () => {
test.beforeEach(async ({ page }) => {
await page.goto("/");
// Create a new project first
await page.getByTestId("new-project-card").click();
await expect(page.getByTestId("new-project-dialog")).toBeVisible();
// Enter project details
await page.getByTestId("project-name-input").fill("test-session-project");
await page.getByTestId("project-path-input").fill("/Users/test/session-projects");
// Click create
await page.getByTestId("confirm-create-project").click();
// Should navigate to board view
await expect(page.getByTestId("board-view")).toBeVisible();
// Navigate to Agent view
await page.getByTestId("nav-agent").click();
await expect(page.getByTestId("agent-view")).toBeVisible();
});
test("clicking new session button creates a session with random name", async ({ page }) => {
// Click the "New" session button
const newSessionButton = page.getByTestId("new-session-button");
await expect(newSessionButton).toBeVisible();
await newSessionButton.click();
// Wait for the session to be created - check for session item in the list
const sessionList = page.getByTestId("session-list");
await expect(sessionList).toBeVisible();
// The session should appear in the list
await expect(sessionList.locator('[data-testid^="session-item-"]').first()).toBeVisible({ timeout: 5000 });
// The session name should follow the pattern of random names (contains letters and numbers)
const sessionName = sessionList.locator('[data-testid^="session-item-"]').first().locator("h3");
await expect(sessionName).toBeVisible();
const nameText = await sessionName.textContent();
expect(nameText).toBeTruthy();
// Verify the name follows our pattern: "Adjective Noun Number"
expect(nameText).toMatch(/^[A-Z][a-z]+ [A-Z][a-z]+ \d+$/);
});
test("verify session was created and selected", async ({ page }) => {
// Click the "New" session button
const newSessionButton = page.getByTestId("new-session-button");
await newSessionButton.click();
// Wait for session to be created
const sessionList = page.getByTestId("session-list");
await expect(sessionList.locator('[data-testid^="session-item-"]').first()).toBeVisible({ timeout: 5000 });
// Verify the session is selected (has the primary border class)
const sessionItem = sessionList.locator('[data-testid^="session-item-"]').first();
await expect(sessionItem).toHaveClass(/border-primary/);
// Verify the message list is visible (session is active)
await expect(page.getByTestId("message-list")).toBeVisible();
});
test("verify chat input is focused after creating new session", async ({ page }) => {
// Click the "New" session button
const newSessionButton = page.getByTestId("new-session-button");
await newSessionButton.click();
// Wait for session to be created
const sessionList = page.getByTestId("session-list");
await expect(sessionList.locator('[data-testid^="session-item-"]').first()).toBeVisible({ timeout: 5000 });
// Wait for the input to be focused (there's a 200ms delay in the code)
await page.waitForTimeout(300);
// Verify the chat input is focused
const chatInput = page.getByTestId("agent-input");
await expect(chatInput).toBeVisible();
await expect(chatInput).toBeFocused();
});
test("complete flow: click new session, verify session created, verify input focused", async ({ page }) => {
// Step 1: Click new session
const newSessionButton = page.getByTestId("new-session-button");
await expect(newSessionButton).toBeVisible();
await newSessionButton.click();
// Step 2: Verify session was created
const sessionList = page.getByTestId("session-list");
await expect(sessionList.locator('[data-testid^="session-item-"]').first()).toBeVisible({ timeout: 5000 });
// Verify the session has a randomly generated name
const sessionName = sessionList.locator('[data-testid^="session-item-"]').first().locator("h3");
const nameText = await sessionName.textContent();
expect(nameText).toBeTruthy();
expect(nameText).toMatch(/^[A-Z][a-z]+ [A-Z][a-z]+ \d+$/);
// Step 3: Verify chat input focused
await page.waitForTimeout(300);
const chatInput = page.getByTestId("agent-input");
await expect(chatInput).toBeFocused();
});
});

64
app/tests/project-management.spec.ts
View File

@@ -1,7 +1,9 @@
import { test, expect } from "@playwright/test";
test.describe("New Project Workflow", () => {
test("opens new project dialog when clicking Create Project", async ({ page }) => {
test("opens new project dialog when clicking Create Project", async ({
page,
}) => {
await page.goto("/");
// Click the New Project card
@@ -42,7 +44,9 @@ test.describe("New Project Workflow", () => {
// Enter project name
await page.getByTestId("project-name-input").fill("my-test-project");
await expect(page.getByTestId("project-name-input")).toHaveValue("my-test-project");
await expect(page.getByTestId("project-name-input")).toHaveValue(
"my-test-project"
);
});
test("can close dialog with cancel button", async ({ page }) => {
@@ -57,7 +61,9 @@ test.describe("New Project Workflow", () => {
await expect(page.getByTestId("new-project-dialog")).not.toBeVisible();
});
test("create button enables when name and path are entered", async ({ page }) => {
test("create button enables when name and path are entered", async ({
page,
}) => {
await page.goto("/");
// Open dialog
@@ -100,7 +106,9 @@ test.describe("New Project Workflow", () => {
await expect(page.getByTestId("board-view")).toBeVisible();
// Project name should be displayed in the board view header
await expect(page.getByTestId("board-view").getByText("test-new-project")).toBeVisible();
await expect(
page.getByTestId("board-view").getByText("test-new-project")
).toBeVisible();
// Kanban columns should be visible
await expect(page.getByText("Backlog")).toBeVisible();
@@ -108,7 +116,9 @@ test.describe("New Project Workflow", () => {
await expect(page.getByText("Verified")).toBeVisible();
});
test("created project appears in recent projects on welcome view", async ({ page }) => {
test("created project appears in recent projects on welcome view", async ({
page,
}) => {
await page.goto("/");
// Create a project
@@ -125,13 +135,21 @@ test.describe("New Project Workflow", () => {
await page.goto("/");
// The project should appear in recent projects section (use role to be specific)
await expect(page.getByRole("heading", { name: "Recent Projects" })).toBeVisible();
await expect(page.getByTestId("welcome-view").getByText("recent-project-test", { exact: true })).toBeVisible();
await expect(
page.getByRole("heading", { name: "Recent Projects" })
).toBeVisible();
await expect(
page
.getByTestId("welcome-view")
.getByText("recent-project-test", { exact: true })
).toBeVisible();
});
});
test.describe("Open Project Workflow", () => {
test("clicking Open Project triggers directory selection", async ({ page }) => {
test("clicking Open Project triggers directory selection", async ({
page,
}) => {
await page.goto("/");
// In web mode, clicking Open Project card will show a prompt dialog
@@ -139,7 +157,9 @@ test.describe("Open Project Workflow", () => {
await expect(page.getByTestId("open-project-card")).toBeVisible();
});
test("opens existing project and navigates to board view", async ({ page }) => {
test("opens existing project and navigates to board view", async ({
page,
}) => {
await page.goto("/");
// Mock the window.prompt response
@@ -154,10 +174,14 @@ test.describe("Open Project Workflow", () => {
await expect(page.getByTestId("board-view")).toBeVisible();
// Project name should be derived from path
await expect(page.getByTestId("board-view").getByText("existing-project")).toBeVisible();
await expect(
page.getByTestId("board-view").getByText("existing-project")
).toBeVisible();
});
test("opened project loads into dashboard with features", async ({ page }) => {
test("opened project loads into dashboard with features", async ({
page,
}) => {
await page.goto("/");
// Mock the window.prompt response
@@ -171,9 +195,11 @@ test.describe("Open Project Workflow", () => {
// Should show board view
await expect(page.getByTestId("board-view")).toBeVisible();
// Should have loaded features from the mock feature_list.json
// Should have loaded features from the mock .automaker/feature_list.json
// The mock returns "Sample Feature" in backlog
await expect(page.getByTestId("kanban-column-backlog").getByText("Sample Feature")).toBeVisible();
await expect(
page.getByTestId("kanban-column-backlog").getByText("Sample Feature")
).toBeVisible();
});
test("can click on recent project to reopen it", async ({ page }) => {
@@ -192,14 +218,20 @@ test.describe("Open Project Workflow", () => {
await page.goto("/");
// Wait for recent projects to appear
await expect(page.getByRole("heading", { name: "Recent Projects" })).toBeVisible();
await expect(
page.getByRole("heading", { name: "Recent Projects" })
).toBeVisible();
// Click on the recent project
const recentProjectCard = page.getByText("reopenable-project", { exact: true }).first();
const recentProjectCard = page
.getByText("reopenable-project", { exact: true })
.first();
await recentProjectCard.click();
// Should navigate to board view with that project
await expect(page.getByTestId("board-view")).toBeVisible();
await expect(page.getByTestId("board-view").getByText("reopenable-project")).toBeVisible();
await expect(
page.getByTestId("board-view").getByText("reopenable-project")
).toBeVisible();
});
});