Start hooking up issue buttons

Author: mjbvz

src/github/dashboardWebviewProvider.ts

@@ -470,7 +470,6 @@ export class DashboardWebviewProvider extends WebviewBase {
 	private getTargetRepositories(): string[] {
 		// If explicit repos are configured, use those
 		if (this._repos) {
-
 			return this._repos;
 		}
 
@@ -511,7 +510,6 @@ export class DashboardWebviewProvider extends WebviewBase {
 
 			return Promise.all(searchResult.items.map(issue => this.convertIssueToData(issue)));
 		} catch (error) {
-
 			return [];
 		}
 	}
@@ -1140,7 +1138,7 @@ Keep your response focused and actionable - ask at most 3 essential questions if
 	 * Determines if a query represents a coding task vs a general question using VS Code's Language Model API
 	 */
 	private async isCodingTask(query: string): Promise<boolean> {
-		return await this._taskManager.isCodingTask(query);
+		return this._taskManager.isCodingTask(query);
 	}
 
 	/**
@@ -1150,7 +1148,7 @@ Keep your response focused and actionable - ask at most 3 essential questions if
 	 * Shows a quick pick to let user choose between local and remote work
 	 */
 	private async showWorkModeQuickPick(): Promise<'local' | 'remote' | undefined> {
-		return await this._taskManager.showWorkModeQuickPick();
+		return this._taskManager.showWorkModeQuickPick();
 	}
 
 	/**

webviews/dashboardView/app.tsx

@@ -40,6 +40,8 @@ function Dashboard() {
 	const [issueSort, setIssueSort] = useState<'date-oldest' | 'date-newest'>('date-oldest');
 	const [hoveredIssue, setHoveredIssue] = useState<IssueData | null>(null);
 	const [globalFilter, setGlobalFilter] = useState<FilterState>({ showTasks: true, showProjects: true });
+	const [chatInputValue, setChatInputValue] = useState('');
+	const [focusTrigger, setFocusTrigger] = useState(0);
 
 	useEffect(() => {
 		// Listen for messages from the extension
@@ -90,12 +92,18 @@ function Dashboard() {
 		});
 	}, []);
 
-	const handleStartRemoteAgent = useCallback((issue: any, event: React.MouseEvent) => {
+	const handlePopulateLocalInput = useCallback((issue: any, event: React.MouseEvent) => {
 		event.stopPropagation(); // Prevent triggering the issue click
-		vscode.postMessage({
-			command: 'start-remote-agent',
-			args: { issue }
-		});
+		const command = `@local start work on #${issue.number}`;
+		setChatInputValue(command);
+		setFocusTrigger(prev => prev + 1); // Trigger focus
+	}, []);
+
+	const handlePopulateRemoteInput = useCallback((issue: any, event: React.MouseEvent) => {
+		event.stopPropagation(); // Prevent triggering the issue click
+		const command = `@copilot start work on #${issue.number}`;
+		setChatInputValue(command);
+		setFocusTrigger(prev => prev + 1); // Trigger focus
 	}, []);
 
 	const handlePullRequestClick = useCallback((pullRequest: { number: number; title: string; url: string }) => {
@@ -203,7 +211,13 @@ function Dashboard() {
 				{/* Input Area */}
 				<div className="input-area">
 					<h2 className="area-header new-task">Start new task</h2>
-					<ChatInput data={dashboardState} isGlobal={!!isGlobal} />
+					<ChatInput 
+						data={dashboardState} 
+						isGlobal={!!isGlobal} 
+						value={chatInputValue}
+						onValueChange={setChatInputValue}
+						focusTrigger={focusTrigger}
+					/>
 
 				</div>
 
@@ -247,7 +261,8 @@ function Dashboard() {
 												key={issue.number}
 												issue={issue}
 												onIssueClick={handleIssueClick}
-												onStartRemoteAgent={handleStartRemoteAgent}
+												onPopulateLocalInput={handlePopulateLocalInput}
+												onPopulateRemoteInput={handlePopulateRemoteInput}
 												associatedSession={associatedSession}
 												onSessionClick={handleSessionClick}
 												onPullRequestClick={handlePullRequestClick}

webviews/dashboardView/components/ChatInput.tsx

@@ -143,21 +143,36 @@ function setupMonaco() {
 interface ChatInputProps {
 	isGlobal: boolean;
 	readonly data: DashboardState | null;
+	value: string;
+	onValueChange: (value: string) => void;
+	focusTrigger?: number; // Increment this to trigger focus
 }
 
-export const ChatInput: React.FC<ChatInputProps> = ({ data, isGlobal }) => {
-	const [chatInput, setChatInput] = useState('');
+export const ChatInput: React.FC<ChatInputProps> = ({ data, isGlobal, value, onValueChange, focusTrigger }) => {
 	const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor | null>(null);
 	const [showDropdown, setShowDropdown] = useState(false);
 
-	// Handle content changes
-	const handleEditorChange = useCallback((value: string | undefined) => {
-		setChatInput(value || '');
-	}, []);
+	// Focus the editor when focusTrigger changes
+	useEffect(() => {
+		if (focusTrigger !== undefined && editor) {
+			editor.focus();
+			// Position cursor at the end
+			const model = editor.getModel();
+			if (model) {
+				const position = model.getPositionAt(value.length);
+				editor.setPosition(position);
+			}
+		}
+	}, [focusTrigger, editor, value]);
+
+	// Handle content changes from the editor
+	const handleEditorChange = useCallback((newValue: string | undefined) => {
+		onValueChange(newValue || '');
+	}, [onValueChange]);
 
 	const handleAgentClick = useCallback((agent: string) => {
 		let finalInput: string;
-		const currentInput = chatInput.trim();
+		const currentInput = value.trim();
 
 		if (!currentInput) {
 			// Empty input - just set the agent
@@ -174,7 +189,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ data, isGlobal }) => {
 			}
 		}
 
-		setChatInput(finalInput);
+		onValueChange(finalInput);
 		if (editor) {
 			editor.focus();
 			// Position cursor at the end
@@ -184,28 +199,28 @@ export const ChatInput: React.FC<ChatInputProps> = ({ data, isGlobal }) => {
 				editor.setPosition(position);
 			}
 		}
-	}, [chatInput, editor]);
+	}, [value, editor, onValueChange]);
 
 	const handleSendChat = useCallback(() => {
-		if (chatInput.trim()) {
-			const trimmedInput = chatInput.trim();
+		if (value.trim()) {
+			const trimmedInput = value.trim();
 
 			// Send all chat input to the provider for processing
 			vscode.postMessage({
 				command: 'submit-chat',
 				args: { query: trimmedInput }
 			});
 
-			setChatInput('');
+			onValueChange('');
 		}
-	}, [chatInput]);
+	}, [value, onValueChange]);
 
 
 
 	// Handle dropdown option for planning task with local agent
 	const handlePlanWithLocalAgent = useCallback(() => {
-		if (chatInput.trim()) {
-			const trimmedInput = chatInput.trim();
+		if (value.trim()) {
+			const trimmedInput = value.trim();
 			// Remove @copilot prefix for planning with local agent
 			const cleanQuery = trimmedInput.replace(/@copilot\s*/, '').trim();
 
@@ -215,10 +230,10 @@ export const ChatInput: React.FC<ChatInputProps> = ({ data, isGlobal }) => {
 				args: { query: cleanQuery }
 			});
 
-			setChatInput('');
+			onValueChange('');
 			setShowDropdown(false);
 		}
-	}, [chatInput]);
+	}, [value, onValueChange]);
 
 	// Handle clicking outside dropdown to close it
 	useEffect(() => {
@@ -287,7 +302,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ data, isGlobal }) => {
 				<Editor
 					key="task-input-editor"
 					defaultLanguage="taskInput"
-					value={chatInput}
+					value={value}
 					theme="taskInputTheme"
 					loading={null}
 					onMount={handleEditorDidMount}
@@ -322,12 +337,12 @@ export const ChatInput: React.FC<ChatInputProps> = ({ data, isGlobal }) => {
 						automaticLayout: true
 					}}
 				/>
-				{isCopilotCommand(chatInput) ? (
+				{isCopilotCommand(value) ? (
 					<div className="send-button-container">
 						<button
 							className="send-button-inline split-left"
 							onClick={handleSendChat}
-							disabled={!chatInput.trim()}
+							disabled={!value.trim()}
 							title="Start new remote Copilot task (Ctrl+Enter)"
 						>
 							<span style={{ marginRight: '4px', fontSize: '12px' }}>Start remote task</span>
@@ -339,7 +354,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ data, isGlobal }) => {
 								e.stopPropagation();
 								setShowDropdown(!showDropdown);
 							}}
-							disabled={!chatInput.trim()}
+							disabled={!value.trim()}
 							title="More options"
 						>
 							<span className="codicon codicon-chevron-down"></span>
@@ -360,15 +375,15 @@ export const ChatInput: React.FC<ChatInputProps> = ({ data, isGlobal }) => {
 					<button
 						className="send-button-inline"
 						onClick={handleSendChat}
-						disabled={!chatInput.trim()}
+						disabled={!value.trim()}
 						title={
-							isLocalCommand(chatInput)
+							isLocalCommand(value)
 								? 'Start new local task (Ctrl+Enter)'
 								: 'Send message (Ctrl+Enter)'
 						}
 					>
 						<span style={{ marginRight: '4px', fontSize: '12px' }}>
-							{isLocalCommand(chatInput)
+							{isLocalCommand(value)
 								? 'Start local task'
 								: 'Send'
 							}

webviews/dashboardView/components/IssueItem.tsx

@@ -9,7 +9,8 @@ import { formatDate, formatFullDateTime, IssueData, SessionData } from '../types
 interface IssueItemProps {
 	issue: IssueData;
 	onIssueClick: (issueUrl: string) => void;
-	onStartRemoteAgent: (issue: IssueData, event: React.MouseEvent) => void;
+	onPopulateLocalInput: (issue: IssueData, event: React.MouseEvent) => void;
+	onPopulateRemoteInput: (issue: IssueData, event: React.MouseEvent) => void;
 	associatedSession?: SessionData;
 	onSessionClick?: (session: SessionData) => void;
 	onPullRequestClick?: (pullRequest: { number: number; title: string; url: string }) => void;
@@ -20,7 +21,8 @@ interface IssueItemProps {
 export const IssueItem: React.FC<IssueItemProps> = ({
 	issue,
 	onIssueClick,
-	onStartRemoteAgent,
+	onPopulateLocalInput,
+	onPopulateRemoteInput,
 	associatedSession,
 	onSessionClick,
 	onPullRequestClick,
@@ -72,13 +74,24 @@ export const IssueItem: React.FC<IssueItemProps> = ({
 						)}
 					</div>
 				) : (
-					<button
-						className="remote-agent-button"
-						onClick={(e) => onStartRemoteAgent(issue, e)}
-						title="Start remote agent for this issue"
-					>
-						<span className="codicon codicon-send-to-remote-agent"></span>
-					</button>
+					<div className="task-buttons">
+						<button
+							className="local-task-button"
+							onClick={(e) => onPopulateLocalInput(issue, e)}
+							title="Populate input with local task command"
+						>
+							<span className="codicon codicon-repo-clone"></span>
+							<span>Local</span>
+						</button>
+						<button
+							className="coding-agent-task-button"
+							onClick={(e) => onPopulateRemoteInput(issue, e)}
+							title="Populate input with remote agent command"
+						>
+							<span className="codicon codicon-robot"></span>
+							<span>Remote</span>
+						</button>
+					</div>
 				)}
 			</div>
 			<div className="item-metadata">

webviews/dashboardView/index.css

@@ -363,6 +363,54 @@ body {
 	font-size: 14px;
 }
 
+.task-buttons {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	margin-left: 8px;
+	flex-shrink: 0;
+	opacity: 0;
+	transition: opacity 0.2s;
+}
+
+.issue-item:hover .task-buttons {
+	opacity: 1;
+}
+
+.local-task-button,
+.coding-agent-task-button {
+	background: transparent;
+	border: 1px solid var(--vscode-button-border);
+	color: var(--vscode-button-foreground);
+	cursor: pointer;
+	padding: 3px 6px;
+	border-radius: 3px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 3px;
+	font-size: 11px;
+	transition: background-color 0.2s, border-color 0.2s;
+	white-space: nowrap;
+}
+
+.local-task-button:hover {
+	background-color: var(--vscode-button-hoverBackground);
+	border-color: var(--vscode-button-hoverBackground);
+	color: var(--vscode-button-foreground);
+}
+
+.coding-agent-task-button:hover {
+	background-color: var(--vscode-button-hoverBackground);
+	border-color: var(--vscode-button-hoverBackground);
+	color: var(--vscode-button-foreground);
+}
+
+.local-task-button .codicon,
+.coding-agent-task-button .codicon {
+	font-size: 12px;
+}
+
 .associated-session-info {
 	display: flex;
 	align-items: center;