Implement project picker keyboard shortcut and enhance feature management

- Added a new keyboard shortcut 'P' to open the project picker dropdown.
- Implemented functionality to select projects using number keys, allowing users to quickly switch between projects.
- Updated the feature list to include a new feature for project selection via keyboard shortcuts.
- Removed obsolete coding_prompt.md and added initializer_prompt.md for better session management.
- Introduced context management for features, enabling reading, writing, and deleting context files.
- Updated package dependencies to include @radix-ui/react-checkbox for enhanced UI components.

This commit enhances user experience by streamlining project selection and improves the overall feature management process.

🤖 Generated with Claude Code
This commit is contained in:
Cody Seibert
2025-12-09 12:20:07 -05:00
parent 95355f53f4
commit 9bae205312
39 changed files with 1551 additions and 4168 deletions

View File

@@ -88,38 +88,43 @@ export async function POST(request: NextRequest) {
// Convert message history to SDK format to preserve conversation context
// Include both user and assistant messages for full context
const sessionId = `api-session-${Date.now()}`;
const conversationMessages = messages.map((msg: { role: string; content: string }) => {
if (msg.role === 'user') {
return {
type: 'user' as const,
message: {
role: 'user' as const,
content: msg.content
},
parent_tool_use_id: null,
session_id: sessionId,
};
} else {
// Assistant message
return {
type: 'assistant' as const,
message: {
role: 'assistant' as const,
content: [
{
type: 'text' as const,
text: msg.content
}
]
},
session_id: sessionId,
};
const conversationMessages = messages.map(
(msg: { role: string; content: string }) => {
if (msg.role === "user") {
return {
type: "user" as const,
message: {
role: "user" as const,
content: msg.content,
},
parent_tool_use_id: null,
session_id: sessionId,
};
} else {
// Assistant message
return {
type: "assistant" as const,
message: {
role: "assistant" as const,
content: [
{
type: "text" as const,
text: msg.content,
},
],
},
session_id: sessionId,
};
}
}
});
);
// Execute query with full conversation context
const queryResult = query({
prompt: conversationMessages.length > 0 ? conversationMessages : lastMessage.content,
prompt:
conversationMessages.length > 0
? conversationMessages
: lastMessage.content,
options,
});

View File

@@ -1,6 +1,6 @@
"use client";
import { useState, useMemo } from "react";
import { useState, useMemo, useEffect, useCallback } from "react";
import { cn } from "@/lib/utils";
import { useAppStore } from "@/store/app-store";
import Link from "next/link";
@@ -62,6 +62,9 @@ export function Sidebar() {
removeProject,
} = useAppStore();
// State for project picker dropdown
const [isProjectPickerOpen, setIsProjectPickerOpen] = useState(false);
const navSections: NavSection[] = [
{
@@ -81,6 +84,33 @@ export function Sidebar() {
},
];
// Handler for selecting a project by number key
const selectProjectByNumber = useCallback((num: number) => {
const projectIndex = num - 1;
if (projectIndex >= 0 && projectIndex < projects.length) {
setCurrentProject(projects[projectIndex]);
setIsProjectPickerOpen(false);
}
}, [projects, setCurrentProject]);
// Handle number key presses when project picker is open
useEffect(() => {
if (!isProjectPickerOpen) return;
const handleKeyDown = (event: KeyboardEvent) => {
const num = parseInt(event.key, 10);
if (num >= 1 && num <= 5) {
event.preventDefault();
selectProjectByNumber(num);
} else if (event.key === "Escape") {
setIsProjectPickerOpen(false);
}
};
window.addEventListener("keydown", handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown);
}, [isProjectPickerOpen, selectProjectByNumber]);
// Build keyboard shortcuts for navigation
const navigationShortcuts: KeyboardShortcut[] = useMemo(() => {
const shortcuts: KeyboardShortcut[] = [];
@@ -99,6 +129,15 @@ export function Sidebar() {
description: "Open project (navigate to welcome view)",
});
// Project picker shortcut - only when we have projects
if (projects.length > 0) {
shortcuts.push({
key: ACTION_SHORTCUTS.projectPicker,
action: () => setIsProjectPickerOpen(true),
description: "Open project picker",
});
}
// Only enable nav shortcuts if there's a current project
if (currentProject) {
navSections.forEach((section) => {
@@ -122,7 +161,7 @@ export function Sidebar() {
}
return shortcuts;
}, [currentProject, setCurrentView, toggleSidebar]);
}, [currentProject, setCurrentView, toggleSidebar, projects.length]);
// Register keyboard shortcuts
useKeyboardShortcuts(navigationShortcuts);
@@ -216,7 +255,7 @@ export function Sidebar() {
{/* Project Selector */}
{sidebarOpen && projects.length > 0 && (
<div className="px-2 mt-3">
<DropdownMenu>
<DropdownMenu open={isProjectPickerOpen} onOpenChange={setIsProjectPickerOpen}>
<DropdownMenuTrigger asChild>
<button
className="w-full flex items-center justify-between px-3 py-2.5 rounded-lg bg-white/5 border border-white/10 hover:bg-white/10 transition-all text-white titlebar-no-drag"
@@ -228,20 +267,38 @@ export function Sidebar() {
{currentProject?.name || "Select Project"}
</span>
</div>
<ChevronDown className="h-4 w-4 text-zinc-400 flex-shrink-0" />
<div className="flex items-center gap-1">
<span
className="hidden lg:flex items-center justify-center w-5 h-5 text-[10px] font-mono rounded bg-white/5 border border-white/10 text-zinc-500"
data-testid="project-picker-shortcut"
>
{ACTION_SHORTCUTS.projectPicker}
</span>
<ChevronDown className="h-4 w-4 text-zinc-400 flex-shrink-0" />
</div>
</button>
</DropdownMenuTrigger>
<DropdownMenuContent
className="w-56 bg-zinc-800 border-zinc-700"
align="start"
data-testid="project-picker-dropdown"
>
{projects.map((project) => (
{projects.slice(0, 5).map((project, index) => (
<DropdownMenuItem
key={project.id}
onClick={() => setCurrentProject(project)}
onClick={() => {
setCurrentProject(project);
setIsProjectPickerOpen(false);
}}
className="flex items-center gap-2 cursor-pointer text-zinc-300 hover:text-white hover:bg-zinc-700/50"
data-testid={`project-option-${project.id}`}
>
<span
className="flex items-center justify-center w-5 h-5 text-[10px] font-mono rounded bg-white/5 border border-white/10 text-zinc-400"
data-testid={`project-hotkey-${index + 1}`}
>
{index + 1}
</span>
<Folder className="h-4 w-4" />
<span className="flex-1 truncate">{project.name}</span>
{currentProject?.id === project.id && (

View File

@@ -104,6 +104,10 @@ export function BoardView() {
};
}, [currentProject]);
// Track previous project to detect switches
const prevProjectPathRef = useRef<string | null>(null);
const isSwitchingProjectRef = useRef<boolean>(false);
// Auto mode hook
const autoMode = useAutoMode();
@@ -196,6 +200,20 @@ export function BoardView() {
const loadFeatures = useCallback(async () => {
if (!currentProject) return;
const currentPath = currentProject.path;
const previousPath = prevProjectPathRef.current;
// If project switched, clear features first to prevent cross-contamination
if (previousPath !== null && currentPath !== previousPath) {
console.log(`[BoardView] Project switch detected: ${previousPath} -> ${currentPath}, clearing features`);
isSwitchingProjectRef.current = true;
setFeatures([]);
setPersistedCategories([]); // Also clear categories
}
// Update the ref to track current project
prevProjectPathRef.current = currentPath;
setIsLoading(true);
try {
const api = getElectronAPI();
@@ -219,6 +237,7 @@ export function BoardView() {
console.error("Failed to load features:", error);
} finally {
setIsLoading(false);
isSwitchingProjectRef.current = false;
}
}, [currentProject, setFeatures]);
@@ -237,10 +256,14 @@ export function BoardView() {
if (Array.isArray(parsed)) {
setPersistedCategories(parsed);
}
} else {
// File doesn't exist, ensure categories are cleared
setPersistedCategories([]);
}
} catch (error) {
console.error("Failed to load categories:", error);
// If file doesn't exist, that's fine - start with empty array
// If file doesn't exist, ensure categories are cleared
setPersistedCategories([]);
}
}, [currentProject]);
@@ -384,7 +407,7 @@ export function BoardView() {
// Save when features change (after initial load is complete)
useEffect(() => {
if (!isLoading) {
if (!isLoading && !isSwitchingProjectRef.current) {
saveFeatures();
}
}, [features, saveFeatures, isLoading]);

View File

@@ -11,6 +11,7 @@ interface KanbanColumnProps {
count: number;
children: ReactNode;
isDoubleWidth?: boolean;
headerAction?: ReactNode;
}
export function KanbanColumn({
@@ -20,6 +21,7 @@ export function KanbanColumn({
count,
children,
isDoubleWidth = false,
headerAction,
}: KanbanColumnProps) {
const { setNodeRef, isOver } = useDroppable({ id });
@@ -37,6 +39,7 @@ export function KanbanColumn({
<div className="flex items-center gap-2 p-3 border-b border-white/5">
<div className={cn("w-3 h-3 rounded-full", color)} />
<h3 className="font-medium text-sm flex-1">{title}</h3>
{headerAction}
<span className="text-xs text-muted-foreground bg-background px-2 py-0.5 rounded-full">
{count}
</span>

View File

@@ -97,16 +97,6 @@ export function SpecView() {
</div>
</div>
<div className="flex gap-2">
<Button
variant="outline"
size="sm"
onClick={loadSpec}
disabled={isLoading}
data-testid="reload-spec"
>
<RefreshCw className="w-4 h-4 mr-2" />
Reload
</Button>
<Button
size="sm"
onClick={saveSpec}

View File

@@ -116,4 +116,5 @@ export const ACTION_SHORTCUTS: Record<string, string> = {
startNext: "Q", // Q for Queue (start next features from backlog)
newSession: "W", // W for new session (in agent view)
openProject: "O", // O for Open project (navigate to welcome view)
projectPicker: "P", // P for Project picker
};

View File

@@ -45,35 +45,6 @@ const DEFAULT_APP_SPEC = `<project_specification>
*/
const DEFAULT_FEATURE_LIST = JSON.stringify([], null, 2);
/**
* Default coding_prompt.md template for new projects
*/
const DEFAULT_CODING_PROMPT = `# Coding Guidelines
This file contains project-specific coding guidelines and conventions
that the AI agent should follow when implementing features.
## Code Style
- Follow existing code conventions in the project
- Use consistent formatting and naming conventions
- Add appropriate comments for complex logic
## Testing
- Write tests for new features when applicable
- Ensure existing tests pass before marking features complete
## Git Commits
- Use clear, descriptive commit messages
- Reference feature IDs when relevant
## Additional Notes
Add any project-specific guidelines here.
`;
/**
* Required files and directories in the .automaker directory
*/
@@ -86,7 +57,6 @@ const REQUIRED_STRUCTURE = {
files: {
".automaker/app_spec.txt": DEFAULT_APP_SPEC,
".automaker/feature_list.json": DEFAULT_FEATURE_LIST,
".automaker/coding_prompt.md": DEFAULT_CODING_PROMPT,
},
};
@@ -96,7 +66,9 @@ const REQUIRED_STRUCTURE = {
* @param projectPath - The root path of the project
* @returns Result indicating what was created or if the project was already initialized
*/
export async function initializeProject(projectPath: string): Promise<ProjectInitResult> {
export async function initializeProject(
projectPath: string
): Promise<ProjectInitResult> {
const api = getElectronAPI();
const createdFiles: string[] = [];
const existingFiles: string[] = [];
@@ -109,7 +81,9 @@ export async function initializeProject(projectPath: string): Promise<ProjectIni
}
// Check and create required files
for (const [relativePath, defaultContent] of Object.entries(REQUIRED_STRUCTURE.files)) {
for (const [relativePath, defaultContent] of Object.entries(
REQUIRED_STRUCTURE.files
)) {
const fullPath = `${projectPath}/${relativePath}`;
const exists = await api.exists(fullPath);
@@ -122,7 +96,8 @@ export async function initializeProject(projectPath: string): Promise<ProjectIni
}
// Determine if this is a new project (all files were created)
const isNewProject = createdFiles.length === Object.keys(REQUIRED_STRUCTURE.files).length;
const isNewProject =
createdFiles.length === Object.keys(REQUIRED_STRUCTURE.files).length;
return {
success: true,
@@ -146,7 +121,9 @@ export async function initializeProject(projectPath: string): Promise<ProjectIni
* @param projectPath - The root path of the project
* @returns true if all required files/directories exist
*/
export async function isProjectInitialized(projectPath: string): Promise<boolean> {
export async function isProjectInitialized(
projectPath: string
): Promise<boolean> {
const api = getElectronAPI();
try {
@@ -161,7 +138,10 @@ export async function isProjectInitialized(projectPath: string): Promise<boolean
return true;
} catch (error) {
console.error("[project-init] Error checking project initialization:", error);
console.error(
"[project-init] Error checking project initialization:",
error
);
return false;
}
}