## CHANGES

- Replaced empty-state button with a helpful Auto Run onboarding panel 🧭
- Added feature highlights for Markdown docs, tasks, and batch execution 📄
- Introduced checkbox-task callout using a new CheckSquare icon ☑️
- Improved “Select Auto Run Folder” button styling and prominence 🎛️
- Auto Run setup now opens native folder picker for local sessions 🗂️
- SSH/remote sessions keep using the modal for path entry securely 🌐
- Setup modal title standardized to “Change Auto Run Folder” everywhere 🏷️
- Updated accessibility labeling to match the new modal title 
- Simplified setup-modal tests to reflect unified title behavior 🧪
This commit is contained in:
Pedram Amini
2026-01-03 15:44:39 -06:00
parent 0dbb12f316
commit 113c80cf3c
4 changed files with 89 additions and 43 deletions

View File

@@ -95,26 +95,6 @@ describe('AutoRunSetupModal', () => {
});
expect(screen.getByRole('dialog')).toBeInTheDocument();
expect(screen.getByText('Set Up Auto Run')).toBeInTheDocument();
});
it('renders with "Change Auto Run Folder" title when currentFolder is provided', async () => {
const onClose = vi.fn();
const onFolderSelected = vi.fn();
renderWithLayerStack(
<AutoRunSetupModal
theme={theme}
onClose={onClose}
onFolderSelected={onFolderSelected}
currentFolder="/existing/folder"
/>
);
await act(async () => {
await vi.runAllTimersAsync();
});
expect(screen.getByText('Change Auto Run Folder')).toBeInTheDocument();
});
@@ -136,7 +116,7 @@ describe('AutoRunSetupModal', () => {
const dialog = screen.getByRole('dialog');
expect(dialog).toHaveAttribute('aria-modal', 'true');
expect(dialog).toHaveAttribute('aria-label', 'Set Up Auto Run');
expect(dialog).toHaveAttribute('aria-label', 'Change Auto Run Folder');
});
it('renders close button with X icon', async () => {
@@ -1661,7 +1641,7 @@ describe('AutoRunSetupModal', () => {
await vi.runAllTimersAsync();
});
expect(screen.getByRole('heading', { name: 'Set Up Auto Run' })).toBeInTheDocument();
expect(screen.getByRole('heading', { name: 'Change Auto Run Folder' })).toBeInTheDocument();
});
it('has labeled input field', async () => {

View File

@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect, useLayoutEffect, useCallback, memo,
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeSlug from 'rehype-slug';
import { Eye, Edit, Play, Square, HelpCircle, Loader2, Image, X, Search, ChevronDown, ChevronRight, FolderOpen, FileText, RefreshCw, Maximize2, AlertTriangle, SkipForward, XCircle, RotateCcw, LayoutGrid } from 'lucide-react';
import { Eye, Edit, Play, Square, HelpCircle, Loader2, Image, X, Search, ChevronDown, ChevronRight, FolderOpen, FileText, RefreshCw, Maximize2, AlertTriangle, SkipForward, XCircle, RotateCcw, LayoutGrid, CheckSquare } from 'lucide-react';
import { getEncoder, formatTokenCount } from '../utils/tokenCounter';
import type { BatchRunState, SessionState, Theme, Shortcut } from '../types';
import type { FileNode } from '../types/fileTree';
@@ -1307,20 +1307,70 @@ const AutoRunInner = forwardRef<AutoRunHandle, AutoRunProps>(function AutoRunInn
}
}}
>
{/* No folder selected - show centered button only */}
{/* No folder selected - show setup content inline */}
{!folderPath && (
<div className="flex-1 flex items-center justify-center">
<button
onClick={onOpenSetup}
className="flex items-center gap-1.5 px-3 py-1.5 rounded text-xs font-medium transition-colors hover:opacity-90"
style={{
backgroundColor: theme.colors.accent,
color: theme.colors.accentForeground,
}}
>
<FolderOpen className="w-3.5 h-3.5" />
Select Auto Run Folder
</button>
<div className="flex-1 flex flex-col items-center justify-center px-4">
<div className="max-w-sm space-y-4">
{/* Explanation */}
<p className="text-sm leading-relaxed text-center" style={{ color: theme.colors.textMain }}>
Auto Run lets you manage and execute Markdown documents containing open tasks.
Select a folder that contains your task documents.
</p>
{/* Feature list */}
<div className="space-y-3">
<div className="flex items-start gap-3">
<FileText className="w-5 h-5 mt-0.5 flex-shrink-0" style={{ color: theme.colors.accent }} />
<div>
<div className="text-sm font-medium" style={{ color: theme.colors.textMain }}>
Markdown Documents
</div>
<div className="text-xs" style={{ color: theme.colors.textDim }}>
Each .md file in your folder becomes a runnable document
</div>
</div>
</div>
<div className="flex items-start gap-3">
<CheckSquare className="w-5 h-5 mt-0.5 flex-shrink-0" style={{ color: theme.colors.accent }} />
<div>
<div className="text-sm font-medium" style={{ color: theme.colors.textMain }}>
Checkbox Tasks
</div>
<div className="text-xs" style={{ color: theme.colors.textDim }}>
Use markdown checkboxes (- [ ]) to define tasks that can be automated
</div>
</div>
</div>
<div className="flex items-start gap-3">
<Play className="w-5 h-5 mt-0.5 flex-shrink-0" style={{ color: theme.colors.accent }} />
<div>
<div className="text-sm font-medium" style={{ color: theme.colors.textMain }}>
Batch Execution
</div>
<div className="text-xs" style={{ color: theme.colors.textDim }}>
Run multiple documents in sequence with loop and reset options
</div>
</div>
</div>
</div>
{/* Select Folder Button */}
<div className="pt-2 flex justify-center">
<button
onClick={onOpenSetup}
className="flex items-center gap-1.5 px-4 py-2 rounded text-sm font-medium transition-colors hover:opacity-90"
style={{
backgroundColor: theme.colors.accent,
color: theme.colors.accentForeground,
}}
>
<FolderOpen className="w-4 h-4" />
Select Auto Run Folder
</button>
</div>
</div>
</div>
)}

View File

@@ -8,7 +8,7 @@ interface AutoRunSetupModalProps {
theme: Theme;
onClose: () => void;
onFolderSelected: (folderPath: string) => void;
currentFolder?: string; // If changing existing folder
currentFolder?: string; // Current folder path (for changing existing folder)
sessionName?: string; // Name of the agent session
sshRemoteId?: string; // SSH remote ID if agent uses remote execution
sshRemoteHost?: string; // SSH remote host for tooltip display
@@ -135,13 +135,11 @@ export function AutoRunSetupModal({ theme, onClose, onFolderSelected, currentFol
}
};
const modalTitle = currentFolder ? 'Change Auto Run Folder' : 'Set Up Auto Run';
return (
<div onKeyDown={handleKeyDown}>
<Modal
theme={theme}
title={modalTitle}
title="Change Auto Run Folder"
priority={MODAL_PRIORITIES.AUTORUN_SETUP}
onClose={onClose}
width={520}

View File

@@ -294,9 +294,27 @@ export function useAutoRunHandlers(
}, [activeSession?.autoRunFolderPath, activeSession?.sshRemoteId, activeSession?.sessionSshRemoteConfig?.remoteId, autoRunDocumentList.length, setAutoRunDocumentList, setAutoRunDocumentTree, setAutoRunIsLoadingDocuments, setSuccessFlashNotification]);
// Auto Run open setup handler
const handleAutoRunOpenSetup = useCallback(() => {
setAutoRunSetupModalOpen(true);
}, [setAutoRunSetupModalOpen]);
// If no folder is configured, directly open folder picker
// If folder exists, open modal to allow changing it
const handleAutoRunOpenSetup = useCallback(async () => {
if (activeSession?.autoRunFolderPath) {
// Folder exists - open modal to change it
setAutoRunSetupModalOpen(true);
} else {
// No folder - directly open folder picker
const sshRemoteId = getSshRemoteId(activeSession);
if (sshRemoteId) {
// SSH remote session - must use modal for path input (no folder picker)
setAutoRunSetupModalOpen(true);
} else {
// Local session - use native folder picker
const folder = await window.maestro.dialog.selectFolder();
if (folder) {
handleAutoRunFolderSelected(folder);
}
}
}
}, [activeSession?.autoRunFolderPath, activeSession, setAutoRunSetupModalOpen, handleAutoRunFolderSelected]);
// Auto Run create new document handler
const handleAutoRunCreateDocument = useCallback(async (filename: string): Promise<boolean> => {