fix (tasks): recurring tasks qna

Author: itsskofficial

src/client/app/integrations/page.js

@@ -13,7 +13,7 @@ import { PostHogProvider } from "@components/PostHogProvider"
  */
 export const metadata = {
 	title: "Sentient", // Title of the application, displayed in browser tab or window title
-	description: "Your autopilot for productivity" // Description of the application, used for SEO purposes
+	description: "Your personal AI that actually gets work done" // Description of the application, used for SEO purposes
 }
 
 /**

src/client/app/layout.js

@@ -276,6 +276,20 @@ function TasksPageContent() {
 		[fetchTasks]
 	)
 
+	const handleAnswerClarifications = async (taskId, answers) => {
+		await handleAction(
+			() =>
+				fetch("/api/tasks/answer-clarifications", {
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify({ taskId, answers })
+				}),
+			"Answers submitted successfully. The task will now resume."
+		)
+		// After submitting, close the panel to show the updated task list
+		handleCloseRightPanel()
+	}
+
 	const handleAddTask = (newTask) => {
 		// Optimistically add the new task to the state
 		setAllTasks((prevTasks) => [...prevTasks, newTask])
@@ -524,6 +538,9 @@ Description: ${event.description || "No description."}`
 											integrations={integrations}
 											onClose={handleCloseRightPanel}
 											onSave={handleUpdateTask}
+											onAnswerClarifications={
+												handleAnswerClarifications
+											}
 											onDelete={(taskId) =>
 												handleAction(
 													() =>

src/client/app/tasks/page.js

@@ -21,13 +21,113 @@ import {
 	IconHeadphones,
 	IconBrandDiscord,
 	IconPlayerPlay,
-	IconSlideshow
+	IconSlideshow,
+	IconSparkles,
+	IconCheck
 } from "@tabler/icons-react"
 import { cn } from "@utils/cn"
 import { usePlan } from "@hooks/usePlan"
 import { motion, AnimatePresence } from "framer-motion"
 import useClickOutside from "@hooks/useClickOutside"
 
+const proPlanFeatures = [
+	{ name: "Text Chat", limit: "100 messages per day" },
+	{ name: "Voice Chat", limit: "10 minutes per day" },
+	{ name: "One-Time Tasks", limit: "20 async tasks per day" },
+	{ name: "Recurring Tasks", limit: "10 active recurring workflows" },
+	{ name: "Triggered Tasks", limit: "10 triggered workflows" },
+	{
+		name: "Parallel Agents",
+		limit: "5 complex tasks per day with 50 sub agents"
+	},
+	{ name: "File Uploads", limit: "20 files per day" },
+	{ name: "Memories", limit: "Unlimited memories" },
+	{
+		name: "Other Integrations",
+		limit: "Notion, GitHub, Slack, Discord, Trello"
+	}
+]
+
+const UpgradeToProModal = ({ isOpen, onClose }) => {
+	if (!isOpen) return null
+
+	const handleUpgrade = () => {
+		const dashboardUrl = process.env.NEXT_PUBLIC_LANDING_PAGE_URL
+		if (dashboardUrl) {
+			window.open(`${dashboardUrl}/dashboard`, "_blank")
+		}
+		onClose()
+	}
+
+	return (
+		<AnimatePresence>
+			{isOpen && (
+				<motion.div
+					initial={{ opacity: 0 }}
+					animate={{ opacity: 1 }}
+					exit={{ opacity: 0 }}
+					className="fixed inset-0 bg-black/70 backdrop-blur-md z-[100] flex items-center justify-center p-4"
+					onClick={onClose}
+				>
+					<motion.div
+						initial={{ scale: 0.95, y: 20 }}
+						animate={{ scale: 1, y: 0 }}
+						exit={{ scale: 0.95, y: -20 }}
+						transition={{ duration: 0.2, ease: "easeInOut" }}
+						onClick={(e) => e.stopPropagation()}
+						className="relative bg-neutral-900/90 backdrop-blur-xl p-6 rounded-2xl shadow-2xl w-full max-w-md border border-neutral-700 flex flex-col"
+					>
+						<header className="text-center mb-6">
+							<h2 className="text-2xl font-bold text-white flex items-center justify-center gap-2">
+								<IconSparkles className="text-brand-orange" />
+								Upgrade to Pro
+							</h2>
+							<p className="text-neutral-400 mt-2">
+								For professionals who want to conquer their day.
+							</p>
+						</header>
+						<main className="space-y-3">
+							{proPlanFeatures.map((feature) => (
+								<div
+									key={feature.name}
+									className="flex items-start gap-3"
+								>
+									<IconCheck
+										size={20}
+										className="text-green-400 flex-shrink-0 mt-0.5"
+									/>
+									<div>
+										<p className="text-white font-medium">
+											{feature.name}
+										</p>
+										<p className="text-neutral-400 text-sm">
+											{feature.limit}
+										</p>
+									</div>
+								</div>
+							))}
+						</main>
+						<footer className="mt-8 flex flex-col gap-2">
+							<button
+								onClick={handleUpgrade}
+								className="w-full py-3 px-5 rounded-lg bg-brand-orange hover:bg-brand-orange/90 text-brand-black font-semibold transition-colors"
+							>
+								Upgrade to Pro - $9/month
+							</button>
+							<button
+								onClick={onClose}
+								className="w-full py-2 px-5 rounded-lg hover:bg-neutral-800 text-sm font-medium text-neutral-400"
+							>
+								Not now
+							</button>
+						</footer>
+					</motion.div>
+				</motion.div>
+			)}
+		</AnimatePresence>
+	)
+}
+
 const UserProfileSection = ({ isCollapsed, user }) => {
 	const [isUserMenuOpen, setUserMenuOpen] = useState(false)
 	const userMenuRef = useRef(null)
@@ -233,6 +333,7 @@ const SidebarContent = ({
 	const pathname = usePathname()
 	const [isHelpMenuOpen, setHelpMenuOpen] = useState(false)
 	const [isVideoModalOpen, setVideoModalOpen] = useState(false)
+	const [isUpgradeModalOpen, setUpgradeModalOpen] = useState(false)
 	const router = useRouter()
 
 	// CHANGED: Use the environment variable for the namespace
@@ -269,6 +370,10 @@ const SidebarContent = ({
 
 	return (
 		<div className="flex flex-col h-full w-full overflow-y-auto custom-scrollbar">
+			<UpgradeToProModal
+				isOpen={isUpgradeModalOpen}
+				onClose={() => setUpgradeModalOpen(false)}
+			/>
 			<AnimatePresence>
 				{isVideoModalOpen && (
 					<HelpVideoModal onClose={() => setVideoModalOpen(false)} />
@@ -341,9 +446,8 @@ const SidebarContent = ({
 			</button>
 
 			{!isPro && (
-				<a
-					href={dashboardUrl}
-					rel="noopener noreferrer"
+				<button
+					onClick={() => setUpgradeModalOpen(true)}
 					className={cn(
 						"w-full bg-neutral-800/40 border border-neutral-700/80 rounded-lg p-2.5 text-left mb-2 hover:bg-neutral-800/80 transition-colors",
 						isCollapsed && "flex justify-center"
@@ -371,7 +475,7 @@ const SidebarContent = ({
 							)}
 						</AnimatePresence>
 					</div>
-				</a>
+				</button>
 			)}
 
 			<nav className="flex flex-col gap-1 flex-grow overflow-hidden">

src/client/components/Sidebar.js

@@ -1,12 +1,110 @@
 "use client"
 
-import React from "react"
+import React, { useState } from "react"
 import { format, parseISO } from "date-fns"
 import { taskStatusColors, priorityMap } from "./constants"
 import { cn } from "@utils/cn"
 import CollapsibleSection from "./CollapsibleSection"
 import ExecutionUpdate from "./ExecutionUpdate"
 import ReactMarkdown from "react-markdown"
+import toast from "react-hot-toast"
+import { IconLoader } from "@tabler/icons-react"
+
+// This component is copied from TaskDetailsContent.js to handle clarification questions
+// within recurring task runs. It's modified to use the run's status.
+const QnaSection = ({ questions, task, onAnswerClarifications, runStatus }) => {
+	const [answers, setAnswers] = useState({})
+	const [isSubmitting, setIsSubmitting] = useState(false)
+	// Use the status of the specific run to determine if input is needed.
+	const isInputMode = runStatus === "clarification_pending"
+
+	const handleAnswerChange = (questionId, text) => {
+		setAnswers((prev) => ({ ...prev, [questionId]: text }))
+	}
+
+	const handleSubmit = async () => {
+		const unansweredQuestions = questions.filter(
+			(q) => !answers[q.question_id]?.trim()
+		)
+		if (unansweredQuestions.length > 0) {
+			toast.error("Please answer all questions before submitting.")
+			return
+		}
+
+		setIsSubmitting(true)
+		const answersPayload = Object.entries(answers).map(
+			([question_id, answer_text]) => ({
+				question_id,
+				answer_text
+			})
+		)
+		await onAnswerClarifications(task.task_id, answersPayload)
+		setIsSubmitting(false)
+	}
+
+	return (
+		<div>
+			<h4 className="font-semibold text-neutral-300 mb-2">
+				Clarifying Questions
+			</h4>
+			<div
+				className={cn(
+					"space-y-4 p-4 rounded-lg border",
+					isInputMode
+						? "bg-yellow-500/10 border-yellow-500/20"
+						: "bg-neutral-800/20 border-neutral-700/50"
+				)}
+			>
+				{questions.map((q, index) => (
+					<div key={q.question_id || index}>
+						<label className="block text-sm font-medium text-neutral-300 mb-2">
+							{q.text}
+						</label>
+						{isInputMode ? (
+							<textarea
+								value={answers[q.question_id] || ""}
+								onChange={(e) =>
+									handleAnswerChange(
+										q.question_id,
+										e.target.value
+									)
+								}
+								rows={2}
+								className="w-full p-2 bg-neutral-800 border border-neutral-700 rounded-md text-sm text-white transition-colors focus:border-yellow-400 focus:ring-0"
+								placeholder="Your answer..."
+							/>
+						) : (
+							<p className="text-sm text-neutral-100 p-2 bg-neutral-900/50 rounded-md whitespace-pre-wrap">
+								{q.answer || (
+									<span className="italic text-neutral-500">
+										No answer provided.
+									</span>
+								)}
+							</p>
+						)}
+					</div>
+				))}
+				{isInputMode && (
+					<div className="flex justify-end">
+						<button
+							onClick={handleSubmit}
+							disabled={isSubmitting}
+							className="px-4 py-2 text-sm font-semibold bg-yellow-400 text-black rounded-md hover:bg-yellow-300 disabled:opacity-50 flex items-center gap-2"
+						>
+							{isSubmitting && (
+								<IconLoader
+									size={16}
+									className="animate-spin"
+								/>
+							)}
+							{isSubmitting ? "Submitting..." : "Submit Answers"}
+						</button>
+					</div>
+				)}
+			</div>
+		</div>
+	)
+}
 
 const RecurringTaskDetails = ({ task, onAnswerClarifications }) => {
 	if (!task) return null
@@ -156,6 +254,20 @@ const RecurringTaskDetails = ({ task, onAnswerClarifications }) => {
 										defaultOpen={index === 0}
 									>
 										<div className="bg-neutral-800/50 p-4 rounded-lg border border-neutral-700/50 space-y-4 mt-2">
+											{run.clarifying_questions &&
+												run.clarifying_questions
+													.length > 0 && (
+													<QnaSection
+														questions={
+															run.clarifying_questions
+														}
+														task={task}
+														onAnswerClarifications={
+															onAnswerClarifications
+														}
+														runStatus={run.status}
+													/>
+												)}
 											{run.plan &&
 												run.plan.length > 0 && (
 													<div>

src/client/components/tasks/RecurringTaskDetails.js

@@ -358,7 +358,8 @@ const TaskDetailsContent = ({
 	handleStepChange,
 	allTools,
 	integrations,
-	onSendChatMessage
+	onSendChatMessage,
+	onAnswerClarifications
 }) => {
 	if (!task) {
 		return null

src/client/components/tasks/TaskDetailsContent.js

@@ -32,7 +32,8 @@ const TaskDetailsPanel = ({
 	onRerun,
 	onArchiveTask,
 	className,
-	onSendChatMessage
+	onSendChatMessage,
+	onAnswerClarifications
 }) => {
 	const [isEditing, setIsEditing] = useState(false)
 	const [editableTask, setEditableTask] = useState(task)
@@ -211,26 +212,19 @@ const TaskDetailsPanel = ({
 								handleStepChange={handleStepChange}
 								allTools={allTools}
 								integrations={integrations}
-								onSendChatMessage={onSendChatMessage}
 							/>
 						) : scheduleType === "recurring" ? (
 							<RecurringTaskDetails
 								task={task}
 								onAnswerClarifications={onAnswerClarifications}
 							/>
+						) : scheduleType === "triggered" ? (
+							<TriggeredTaskDetails task={task} />
 						) : (
 							<TaskDetailsContent
 								task={task}
-								isEditing={isEditing}
-								editableTask={editableTask}
-								handleFieldChange={handleFieldChange}
-								handleScheduleChange={handleScheduleChange}
-								handleAddStep={handleAddStep}
-								handleRemoveStep={handleRemoveStep}
-								handleStepChange={handleStepChange}
-								allTools={allTools}
-								integrations={integrations}
 								onSendChatMessage={onSendChatMessage}
+								onAnswerClarifications={onAnswerClarifications}
 							/>
 						)}
 					</main>

src/client/components/tasks/TaskDetailsPanel.js

@@ -66,12 +66,13 @@ export function getDisplayName(task) {
  * @returns {Date|null} The next run date object or null.
  */
 export function calculateNextRun(schedule, createdAt, runs) {
-	// FIX: Check that schedule.time is a string before trying to split it.
-	// This handles cases where a recurring task is created without a specific time.
 	if (
 		!schedule ||
 		schedule.type !== "recurring" ||
-		typeof schedule.time !== "string"
+		// FIX: Check that schedule.time is a string before trying to split it.
+		// This handles cases where a recurring task is created without a specific time.
+		typeof schedule.time !== "string" ||
+		!schedule.time.includes(":")
 	) {
 		return null
 	}