Rebase fallout and Self-review

Author: EhabY

packages/shared/src/tasks/api.ts

@@ -47,13 +47,13 @@ const deleteTask = defineRequest<TaskActionParams, void>("deleteTask");
 const pauseTask = defineRequest<TaskActionParams, void>("pauseTask");
 const resumeTask = defineRequest<TaskActionParams, void>("resumeTask");
 const downloadLogs = defineRequest<{ taskId: string }, void>("downloadLogs");
+const sendTaskMessage = defineRequest<
+	{ taskId: string; message: string },
+	void
+>("sendTaskMessage");
 
 const viewInCoder = defineCommand<{ taskId: string }>("viewInCoder");
 const viewLogs = defineCommand<{ taskId: string }>("viewLogs");
-const sendTaskMessage = defineCommand<{
-	taskId: string;
-	message: string;
-}>("sendTaskMessage");
 
 const taskUpdated = defineNotification<Task>("taskUpdated");
 const tasksUpdated = defineNotification<Task[]>("tasksUpdated");
@@ -73,10 +73,10 @@ export const TasksApi = {
 	pauseTask,
 	resumeTask,
 	downloadLogs,
+	sendTaskMessage,
 	// Commands
 	viewInCoder,
 	viewLogs,
-	sendTaskMessage,
 	// Notifications
 	taskUpdated,
 	tasksUpdated,

packages/tasks/src/App.tsx

@@ -49,10 +49,9 @@ export default function App() {
 	const { onNotification } = useIpc();
 	useEffect(() => {
 		return onNotification(TasksApi.showCreateForm, () => {
-			deselectTask();
 			setCreateOpen(true);
 		});
-	}, [onNotification, setCreateOpen, deselectTask]);
+	}, [onNotification, setCreateOpen]);
 
 	useEffect(() => {
 		if (data) {

packages/tasks/src/components/AgentChatHistory.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useCallback } from "react";
+import { useEffect, useRef } from "react";
 
 import type { LogsStatus, TaskLogEntry } from "@repo/shared";
 
@@ -26,34 +26,20 @@ export function AgentChatHistory({
 }: AgentChatHistoryProps) {
 	const containerRef = useRef<HTMLDivElement>(null);
 	const isAtBottomRef = useRef(true);
-	const isInitialMountRef = useRef(true);
 
-	const checkIfAtBottom = useCallback(() => {
+	const handleScroll = () => {
 		const container = containerRef.current;
-		if (!container) return true;
+		if (!container) return;
 		const distanceFromBottom =
 			container.scrollHeight - container.scrollTop - container.clientHeight;
-		return distanceFromBottom <= 50;
-	}, []);
-
-	const handleScroll = useCallback(() => {
-		isAtBottomRef.current = checkIfAtBottom();
-	}, [checkIfAtBottom]);
-
-	useEffect(() => {
-		if (isInitialMountRef.current && containerRef.current) {
-			containerRef.current.scrollTop = containerRef.current.scrollHeight;
-			isInitialMountRef.current = false;
-		}
-	}, []);
+		isAtBottomRef.current = distanceFromBottom <= 50;
+	};
 
 	useEffect(() => {
 		if (containerRef.current && isAtBottomRef.current) {
 			containerRef.current.scrollTop = containerRef.current.scrollHeight;
 		}
-	}, [logs]);
-
-	const emptyMessage = getEmptyMessage(logsStatus);
+	}, [logs, isThinking]);
 
 	return (
 		<div className="agent-chat-history">
@@ -65,21 +51,24 @@ export function AgentChatHistory({
 			>
 				{logs.length === 0 ? (
 					<div
-						className={`chat-history-empty ${logsStatus === "error" ? "chat-history-error" : ""}`}
+						className={[
+							"chat-history-empty",
+							logsStatus === "error" && "chat-history-error",
+						]
+							.filter(Boolean)
+							.join(" ")}
 					>
-						{emptyMessage}
+						{getEmptyMessage(logsStatus)}
 					</div>
 				) : (
 					logs.map((log) => (
-						<div key={log.id} className={`log-entry log-entry-${log.type}`}>
+						<div key={log.id} className="log-entry">
 							{log.content}
 						</div>
 					))
 				)}
 				{isThinking && (
-					<div className="log-entry log-entry-thinking">
-						<span className="log-content">*Thinking...</span>
-					</div>
+					<div className="log-entry log-entry-thinking">Thinking...</div>
 				)}
 			</div>
 		</div>

packages/tasks/src/components/CreateTaskSection.tsx

@@ -47,6 +47,9 @@ export function CreateTaskSection({ templates }: CreateTaskSectionProps) {
 				onChange={setPrompt}
 				onSubmit={handleSubmit}
 				loading={isPending}
+				actionIcon="send"
+				actionLabel="Send"
+				actionDisabled={!canSubmit}
 			/>
 			{error && <div className="create-task-error">{error.message}</div>}
 			<div className="create-task-options">

packages/tasks/src/components/ErrorBanner.tsx

@@ -1,5 +1,4 @@
 import { VscodeIcon } from "@vscode-elements/react-elements";
-import { useCallback } from "react";
 
 import { useTasksApi } from "../hooks/useTasksApi";
 
@@ -11,17 +10,17 @@ interface ErrorBannerProps {
 
 export function ErrorBanner({ task }: ErrorBannerProps) {
 	const api = useTasksApi();
-	const message = task.current_state?.message || "Build failed";
-
-	const handleViewLogs = useCallback(() => {
-		void api.viewLogs(task.id);
-	}, [api, task.id]);
+	const message = task.current_state?.message || "Task failed";
 
 	return (
 		<div className="error-banner">
 			<VscodeIcon name="warning" />
-			<span className="error-banner-message">{message}.</span>
-			<button type="button" className="text-link" onClick={handleViewLogs}>
+			<span>{message}</span>
+			<button
+				type="button"
+				className="text-link"
+				onClick={() => api.viewLogs(task.id)}
+			>
 				View logs <VscodeIcon name="link-external" />
 			</button>
 		</div>

packages/tasks/src/components/PromptInput.tsx

@@ -12,6 +12,9 @@ interface PromptInputProps {
 	disabled?: boolean;
 	loading?: boolean;
 	placeholder?: string;
+	actionIcon: "send" | "debug-pause";
+	actionLabel: string;
+	actionDisabled: boolean;
 }
 
 export function PromptInput({
@@ -21,9 +24,10 @@ export function PromptInput({
 	disabled = false,
 	loading = false,
 	placeholder = "Prompt your AI agent to start a task...",
+	actionIcon,
+	actionLabel,
+	actionDisabled,
 }: PromptInputProps) {
-	const canSubmit = value.trim().length > 0 && !disabled && !loading;
-
 	return (
 		<div className="prompt-input-container">
 			<textarea
@@ -34,7 +38,7 @@ export function PromptInput({
 				onKeyDown={(e) => {
 					if (isSubmit(e)) {
 						e.preventDefault();
-						if (canSubmit) {
+						if (!actionDisabled) {
 							onSubmit();
 						}
 					}
@@ -47,10 +51,10 @@ export function PromptInput({
 				) : (
 					<VscodeIcon
 						actionIcon
-						name="send"
-						label="Send"
-						onClick={() => canSubmit && onSubmit()}
-						className={canSubmit ? "" : "disabled"}
+						name={actionIcon}
+						label={actionLabel}
+						onClick={() => !actionDisabled && onSubmit()}
+						className={actionDisabled ? "disabled" : ""}
 					/>
 				)}
 			</div>

packages/tasks/src/components/TaskDetailHeader.tsx

@@ -1,23 +1,21 @@
 import { getTaskLabel, type Task } from "@repo/shared";
 import { VscodeIcon } from "@vscode-elements/react-elements";
 
-import { ActionMenu, type ActionMenuItem } from "./ActionMenu";
+import { getActionLabel } from "../utils/taskLoadingState";
+
+import { ActionMenu } from "./ActionMenu";
 import { StatusIndicator } from "./StatusIndicator";
+import { useTaskMenuItems } from "./useTaskMenuItems";
 
 interface TaskDetailHeaderProps {
 	task: Task;
-	menuItems: ActionMenuItem[];
 	onBack: () => void;
-	loadingAction?: string | null;
 }
 
-export function TaskDetailHeader({
-	task,
-	menuItems,
-	onBack,
-	loadingAction,
-}: TaskDetailHeaderProps) {
-	const displayName = getTaskLabel(task);
+export function TaskDetailHeader({ task, onBack }: TaskDetailHeaderProps) {
+	const label = getTaskLabel(task);
+	const { menuItems, action } = useTaskMenuItems({ task });
+	const loadingAction = getActionLabel(action);
 
 	return (
 		<div className="task-detail-header">
@@ -28,8 +26,8 @@ export function TaskDetailHeader({
 				onClick={onBack}
 			/>
 			<StatusIndicator task={task} />
-			<span className="task-detail-title" title={displayName}>
-				{displayName}
+			<span className="task-detail-title" title={label}>
+				{label}
 				{loadingAction && (
 					<span className="task-action-label">{loadingAction}</span>
 				)}

packages/tasks/src/components/TaskDetailView.tsx

@@ -1,12 +1,9 @@
-import { getTaskActions, type TaskDetails } from "@repo/shared";
-
-import { getActionLabel } from "../utils/taskAction";
-
 import { AgentChatHistory } from "./AgentChatHistory";
 import { ErrorBanner } from "./ErrorBanner";
 import { TaskDetailHeader } from "./TaskDetailHeader";
-import { TaskInput } from "./TaskInput";
-import { useTaskMenuItems } from "./useTaskMenuItems";
+import { TaskMessageInput } from "./TaskMessageInput";
+
+import type { TaskDetails } from "@repo/shared";
 
 interface TaskDetailViewProps {
 	details: TaskDetails;
@@ -15,30 +12,22 @@ interface TaskDetailViewProps {
 
 export function TaskDetailView({ details, onBack }: TaskDetailViewProps) {
 	const { task, logs, logsStatus } = details;
-	const { canPause } = getTaskActions(task);
 
-	const isWorking =
+	const isThinking =
 		task.status === "active" &&
 		task.current_state?.state === "working" &&
 		task.workspace_agent_lifecycle === "ready";
 
-	const { menuItems, action } = useTaskMenuItems({ task });
-
 	return (
 		<div className="task-detail-view">
-			<TaskDetailHeader
-				task={task}
-				menuItems={menuItems}
-				onBack={onBack}
-				loadingAction={getActionLabel(action)}
-			/>
+			<TaskDetailHeader task={task} onBack={onBack} />
 			{task.status === "error" && <ErrorBanner task={task} />}
 			<AgentChatHistory
 				logs={logs}
 				logsStatus={logsStatus}
-				isThinking={isWorking}
+				isThinking={isThinking}
 			/>
-			<TaskInput taskId={task.id} task={task} canPause={canPause} />
+			<TaskMessageInput task={task} />
 		</div>
 	);
 }