Merge pull request #94 from AutoMaker-Org/app_spec_fixes

working on improving the app spec page

Author: webdevcody

README.md

@@ -1,6 +1,36 @@
+> **[!TIP]**
+>
+> **Learn more about Agentic Coding!**
+>
+> Automaker itself was built by a group of engineers using AI and agentic coding techniques to build features faster than ever. By leveraging tools like Cursor IDE and Claude Code CLI, the team orchestrated AI agents to implement complex functionality in days instead of weeks.
+>
+> **Learn how:** Master these same techniques and workflows in the [Agentic Jumpstart course](https://agenticjumpstart.com/).
+
 # Automaker
 
-Automaker is an autonomous AI development studio that helps you build software faster using AI-powered agents. It provides a visual Kanban board interface to manage features, automatically assigns AI agents to implement them, and tracks progress through an intuitive workflow from backlog to verified completion.
+**Stop typing code. Start directing AI agents.**
+
+Automaker is an autonomous AI development studio that transforms how you build software. Instead of manually writing every line of code, you describe features on a Kanban board and watch as AI agents powered by Claude Code automatically implement them.
+
+## What Makes Automaker Different?
+
+Traditional development tools help you write code. Automaker helps you **orchestrate AI agents** to build entire features autonomously. Think of it as having a team of AI developers working for you—you define what needs to be built, and Automaker handles the implementation.
+
+### The Workflow
+
+1. **Add Features** - Describe features you want built (with text, images, or screenshots)
+2. **Move to "In Progress"** - Automaker automatically assigns an AI agent to implement the feature
+3. **Watch It Build** - See real-time progress as the agent writes code, runs tests, and makes changes
+4. **Review & Verify** - Review the changes, run tests, and approve when ready
+5. **Ship Faster** - Build entire applications in days, not weeks
+
+### Powered by Claude Code
+
+Automaker leverages the [Claude Agent SDK](https://docs.anthropic.com/en/docs/claude-code) to give AI agents full access to your codebase. Agents can read files, write code, execute commands, run tests, and make git commits—all while working in isolated git worktrees to keep your main branch safe.
+
+### Why This Matters
+
+The future of software development is **agentic coding**—where developers become architects directing AI agents rather than manual coders. Automaker puts this future in your hands today, letting you experience what it's like to build software 10x faster with AI agents handling the implementation while you focus on architecture and business logic.
 
 ---
 
@@ -36,20 +66,22 @@ cd automaker
 # 2. Install dependencies
 npm install
 
-# 3. Get your Claude Code OAuth token
-claude setup-token
-# ⚠️ This prints your token - don't share your screen!
-
-# 4. Set the token and run
-export CLAUDE_CODE_OAUTH_TOKEN="sk-ant-oat01-..."
-npm run dev:electron
+# 3. Run Automaker (pick your mode)
+npm run dev
+# Then choose your run mode when prompted, or use specific commands below
 ```
 
 ## How to Run
 
-### Development Modes
+### Development Mode
 
-Automaker can be run in several modes:
+Start Automaker in development mode:
+
+```bash
+npm run dev
+```
+
+This will prompt you to choose your run mode, or you can specify a mode directly:
 
 #### Electron Desktop App (Recommended)
 
@@ -72,8 +104,6 @@ npm run dev:electron:wsl:gpu
 ```bash
 # Run in web browser (http://localhost:3007)
 npm run dev:web
-# or
-npm run dev
 ```
 
 ### Building for Production

apps/app/src/components/layout/sidebar.tsx

@@ -381,8 +381,6 @@ export function Sidebar() {
           toast.success("App specification created", {
             description: "Your project is now set up and ready to go!",
           });
-          // Navigate to spec view to show the new spec
-          setCurrentView("spec");
         } else if (event.type === "spec_regeneration_error") {
           setSpecCreatingForProject(null);
           toast.error("Failed to create specification", {

apps/app/src/components/new-project-modal.tsx

@@ -31,6 +31,8 @@ import { getHttpApiClient } from "@/lib/http-api-client";
 import { cn } from "@/lib/utils";
 import { useFileBrowser } from "@/contexts/file-browser-context";
 
+const LAST_PROJECT_DIR_KEY = "automaker:lastProjectDir";
+
 interface ValidationErrors {
   projectName?: boolean;
   workspaceDir?: boolean;
@@ -80,6 +82,14 @@ export function NewProjectModal({
   // Fetch workspace directory when modal opens
   useEffect(() => {
     if (open) {
+      // First, check localStorage for last used directory
+      const lastUsedDir = localStorage.getItem(LAST_PROJECT_DIR_KEY);
+      if (lastUsedDir) {
+        setWorkspaceDir(lastUsedDir);
+        return;
+      }
+
+      // Fall back to server config if no saved directory
       setIsLoadingWorkspace(true);
       const httpClient = getHttpApiClient();
       httpClient.workspace
@@ -201,6 +211,8 @@ export function NewProjectModal({
     });
     if (selectedPath) {
       setWorkspaceDir(selectedPath);
+      // Save to localStorage for next time
+      localStorage.setItem(LAST_PROJECT_DIR_KEY, selectedPath);
       // Clear any workspace error when a valid directory is selected
       if (errors.workspaceDir) {
         setErrors((prev) => ({ ...prev, workspaceDir: false }));

apps/app/src/components/views/board-view.tsx

@@ -1554,6 +1554,13 @@ export function BoardView() {
       }
     });
 
+    // Sort backlog by priority: 1 (high) -> 2 (medium) -> 3 (low) -> no priority
+    map.backlog.sort((a, b) => {
+      const aPriority = a.priority ?? 999; // Features without priority go last
+      const bPriority = b.priority ?? 999;
+      return aPriority - bPriority;
+    });
+
     return map;
   }, [features, runningAutoTasks, searchQuery]);
 

apps/app/src/components/views/kanban-card.tsx

@@ -57,6 +57,7 @@ import {
   ChevronDown,
   ChevronUp,
   Brain,
+  Flag,
 } from "lucide-react";
 import { CountUpTimer } from "@/components/ui/count-up-timer";
 import { getElectronAPI } from "@/lib/electron";
@@ -89,6 +90,33 @@ function formatThinkingLevel(level: ThinkingLevel | undefined): string {
   return labels[level];
 }
 
+/**
+ * Formats priority for display
+ */
+function formatPriority(priority: number | undefined): string | null {
+  if (!priority) return null;
+  const labels: Record<number, string> = {
+    1: "High",
+    2: "Medium",
+    3: "Low",
+  };
+  return labels[priority] || null;
+}
+
+/**
+ * Gets priority badge color classes
+ */
+function getPriorityBadgeClasses(priority: number | undefined): string {
+  if (priority === 1) {
+    return "bg-red-500/20 border border-red-500/50 text-red-400";
+  } else if (priority === 2) {
+    return "bg-yellow-500/20 border border-yellow-500/50 text-yellow-400";
+  } else if (priority === 3) {
+    return "bg-blue-500/20 border border-blue-500/50 text-blue-400";
+  }
+  return "";
+}
+
 interface KanbanCardProps {
   feature: Feature;
   onEdit: () => void;
@@ -198,6 +226,34 @@ export const KanbanCard = memo(function KanbanCard({
     return () => clearInterval(interval);
   }, [feature.justFinishedAt, feature.status, currentTime]);
 
+  // Calculate priority badge position
+  const priorityLabel = formatPriority(feature.priority);
+  const hasPriority = !!priorityLabel;
+
+  // Calculate top position for badges (stacking vertically)
+  const getBadgeTopPosition = (badgeIndex: number) => {
+    return badgeIndex === 0
+      ? "top-2"
+      : badgeIndex === 1
+      ? "top-8"
+      : badgeIndex === 2
+      ? "top-14"
+      : "top-20";
+  };
+
+  // Determine badge positions (must be after isJustFinished is defined)
+  let badgeIndex = 0;
+  const priorityBadgeIndex = hasPriority ? badgeIndex++ : -1;
+  const skipTestsBadgeIndex =
+    feature.skipTests && !feature.error ? badgeIndex++ : -1;
+  const errorBadgeIndex = feature.error ? badgeIndex++ : -1;
+  const justFinishedBadgeIndex = isJustFinished ? badgeIndex++ : -1;
+  const branchBadgeIndex =
+    hasWorktree && !isCurrentAutoTask ? badgeIndex++ : -1;
+
+  // Total number of badges displayed
+  const totalBadgeCount = badgeIndex;
+
   // Load context file for in_progress, waiting_approval, and verified features
   useEffect(() => {
     const loadContext = async () => {
@@ -353,12 +409,29 @@ export const KanbanCard = memo(function KanbanCard({
           style={{ opacity: opacity / 100 }}
         />
       )}
+      {/* Priority badge */}
+      {hasPriority && (
+        <div
+          className={cn(
+            "absolute px-1.5 py-0.5 text-[10px] font-medium rounded flex items-center gap-1 z-10",
+            getBadgeTopPosition(priorityBadgeIndex),
+            "left-2",
+            getPriorityBadgeClasses(feature.priority)
+          )}
+          data-testid={`priority-badge-${feature.id}`}
+          title={`Priority: ${priorityLabel}`}
+        >
+          <Flag className="w-3 h-3" />
+          <span>{priorityLabel}</span>
+        </div>
+      )}
       {/* Skip Tests indicator badge */}
       {feature.skipTests && !feature.error && (
         <div
           className={cn(
             "absolute px-1.5 py-0.5 text-[10px] font-medium rounded flex items-center gap-1 z-10",
-            "top-2 left-2",
+            getBadgeTopPosition(skipTestsBadgeIndex),
+            "left-2",
             "bg-orange-500/20 border border-orange-500/50 text-orange-400"
           )}
           data-testid={`skip-tests-badge-${feature.id}`}
@@ -373,7 +446,8 @@ export const KanbanCard = memo(function KanbanCard({
         <div
           className={cn(
             "absolute px-1.5 py-0.5 text-[10px] font-medium rounded flex items-center gap-1 z-10",
-            "top-2 left-2",
+            getBadgeTopPosition(errorBadgeIndex),
+            "left-2",
             "bg-red-500/20 border border-red-500/50 text-red-400"
           )}
           data-testid={`error-badge-${feature.id}`}
@@ -388,7 +462,8 @@ export const KanbanCard = memo(function KanbanCard({
         <div
           className={cn(
             "absolute px-1.5 py-0.5 text-[10px] font-medium rounded flex items-center gap-1 z-10",
-            feature.skipTests ? "top-8 left-2" : "top-2 left-2",
+            getBadgeTopPosition(justFinishedBadgeIndex),
+            "left-2",
             "bg-green-500/20 border border-green-500/50 text-green-400 animate-pulse"
           )}
           data-testid={`just-finished-badge-${feature.id}`}
@@ -407,10 +482,8 @@ export const KanbanCard = memo(function KanbanCard({
                 className={cn(
                   "absolute px-1.5 py-0.5 text-[10px] font-medium rounded flex items-center gap-1 z-10 cursor-default",
                   "bg-purple-500/20 border border-purple-500/50 text-purple-400",
-                  // Position below other badges if present, otherwise use normal position
-                  feature.error || feature.skipTests || isJustFinished
-                    ? "top-8 left-2"
-                    : "top-2 left-2"
+                  getBadgeTopPosition(branchBadgeIndex),
+                  "left-2"
                 )}
                 data-testid={`branch-badge-${feature.id}`}
               >
@@ -432,11 +505,11 @@ export const KanbanCard = memo(function KanbanCard({
         className={cn(
           "p-3 pb-2 block", // Reset grid layout to block for custom kanban card layout
           // Add extra top padding when badges are present to prevent text overlap
-          (feature.skipTests || feature.error || isJustFinished) && "pt-10",
-          // Add even more top padding when both badges and branch are shown
-          hasWorktree &&
-            (feature.skipTests || feature.error || isJustFinished) &&
-            "pt-14"
+          // Calculate padding based on number of badges
+          totalBadgeCount === 1 && "pt-10",
+          totalBadgeCount === 2 && "pt-14",
+          totalBadgeCount === 3 && "pt-20",
+          totalBadgeCount >= 4 && "pt-24"
         )}
       >
         {isCurrentAutoTask && (