feat: implement re-authentication flow for Linear and Notion HITL connectors and improve their HITL flow and error states

- Added re-authentication endpoints for Linear and Notion connectors to handle expired authentication.
- Enhanced error handling in issue creation, deletion, and update tools to return appropriate authentication error messages.
- Updated UI components to display authentication status and guide users on re-authentication steps.
- Improved account health checks to ensure valid tokens are used for operations.

surfsense_web/components/tool-ui/notion/create-notion-page.tsx

@@ -37,6 +37,7 @@ interface InterruptResult {
 			workspace_id: string | null;
 			workspace_name: string;
 			workspace_icon: string;
+			auth_expired?: boolean;
 		}>;
 		parent_pages?: Record<
 			number,
@@ -65,7 +66,14 @@ interface ErrorResult {
 	message: string;
 }
 
-type CreateNotionPageResult = InterruptResult | SuccessResult | ErrorResult;
+interface AuthErrorResult {
+	status: "auth_error";
+	message: string;
+	connector_id?: number;
+	connector_type: string;
+}
+
+type CreateNotionPageResult = InterruptResult | SuccessResult | ErrorResult | AuthErrorResult;
 
 function isInterruptResult(result: unknown): result is InterruptResult {
 	return (
@@ -76,6 +84,15 @@ function isInterruptResult(result: unknown): result is InterruptResult {
 	);
 }
 
+function isAuthErrorResult(result: unknown): result is AuthErrorResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"status" in result &&
+		(result as AuthErrorResult).status === "auth_error"
+	);
+}
+
 function isErrorResult(result: unknown): result is ErrorResult {
 	return (
 		typeof result === "object" &&
@@ -105,13 +122,15 @@ function ApprovalCard({
 	const openHitlEditPanel = useSetAtom(openHitlEditPanelAtom);
 
 	const accounts = interruptData.context?.accounts ?? [];
+	const validAccounts = accounts.filter(a => !a.auth_expired);
+	const expiredAccounts = accounts.filter(a => a.auth_expired);
 	const parentPages = interruptData.context?.parent_pages ?? {};
 
 	const defaultAccountId = useMemo(() => {
 		if (args.connector_id) return String(args.connector_id);
-		if (accounts.length === 1) return String(accounts[0].id);
+		if (validAccounts.length === 1) return String(validAccounts[0].id);
 		return "";
-	}, [args.connector_id, accounts]);
+	}, [args.connector_id, validAccounts]);
 
 	const [selectedAccountId, setSelectedAccountId] = useState<string>(defaultAccountId);
 	const [selectedParentPageId, setSelectedParentPageId] = useState<string>(
@@ -164,7 +183,7 @@ function ApprovalCard({
 			className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300"
 		>
 			{/* Header */}
-			<div className="flex items-start justify-between px-5 pt-5 pb-4">
+			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
 				<div>
 					<p className="text-sm font-semibold text-foreground">
 						{decided === "reject"
@@ -225,36 +244,44 @@ function ApprovalCard({
 			{!decided && interruptData.context && (
 				<>
 					<div className="mx-5 h-px bg-border/50" />
-					<div className="px-5 py-4 space-y-4">
+					<div className="px-5 py-4 space-y-4 select-none">
 						{interruptData.context.error ? (
 							<p className="text-sm text-destructive">{interruptData.context.error}</p>
 						) : (
 							<>
-								{accounts.length > 0 && (
-									<div className="space-y-2">
-										<p className="text-xs font-medium text-muted-foreground">
-											Notion Account <span className="text-destructive">*</span>
-										</p>
-										<Select
-											value={selectedAccountId}
-											onValueChange={(value) => {
-												setSelectedAccountId(value);
-												setSelectedParentPageId("__none__");
-											}}
-										>
-											<SelectTrigger className="w-full">
-												<SelectValue placeholder="Select an account" />
-											</SelectTrigger>
-											<SelectContent>
-												{accounts.map((account) => (
-													<SelectItem key={account.id} value={String(account.id)}>
-														{account.workspace_name}
-													</SelectItem>
-												))}
-											</SelectContent>
-										</Select>
-									</div>
-								)}
+							{accounts.length > 0 && (
+								<div className="space-y-2">
+									<p className="text-xs font-medium text-muted-foreground">
+										Notion Account <span className="text-destructive">*</span>
+									</p>
+									<Select
+										value={selectedAccountId}
+										onValueChange={(value) => {
+											setSelectedAccountId(value);
+											setSelectedParentPageId("__none__");
+										}}
+									>
+										<SelectTrigger className="w-full">
+											<SelectValue placeholder="Select an account" />
+										</SelectTrigger>
+										<SelectContent>
+											{validAccounts.map((account) => (
+												<SelectItem key={account.id} value={String(account.id)}>
+													{account.workspace_name}
+												</SelectItem>
+											))}
+											{expiredAccounts.map((a) => (
+												<div
+													key={a.id}
+													className="relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 px-2 text-sm select-none opacity-50 pointer-events-none"
+												>
+													{a.workspace_name} (needs re-authentication)
+												</div>
+											))}
+										</SelectContent>
+									</Select>
+								</div>
+							)}
 
 								{selectedAccountId && (
 									<div className="space-y-2">
@@ -316,7 +343,7 @@ function ApprovalCard({
 			{!decided && (
 				<>
 					<div className="mx-5 h-px bg-border/50" />
-					<div className="px-5 py-4 flex items-center gap-2">
+					<div className="px-5 py-4 flex items-center gap-2 select-none">
 						{allowedDecisions.includes("approve") && (
 							<Button
 								size="sm"
@@ -348,6 +375,22 @@ function ApprovalCard({
 	);
 }
 
+function AuthErrorCard({ result }: { result: AuthErrorResult }) {
+	return (
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30">
+			<div className="px-5 pt-5 pb-4">
+				<p className="text-sm font-semibold text-destructive">
+					Notion authentication expired
+				</p>
+			</div>
+			<div className="mx-5 h-px bg-border/50" />
+			<div className="px-5 py-4">
+				<p className="text-sm text-muted-foreground">{result.message}</p>
+			</div>
+		</div>
+	);
+}
+
 function ErrorCard({ result }: { result: ErrorResult }) {
 	return (
 		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30">
@@ -427,6 +470,10 @@ export const CreateNotionPageToolUI = makeAssistantToolUI<
 			);
 		}
 
+		if (isAuthErrorResult(result)) {
+			return <AuthErrorCard result={result} />;
+		}
+
 		if (
 			typeof result === "object" &&
 			result !== null &&

surfsense_web/components/tool-ui/notion/delete-notion-page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { makeAssistantToolUI } from "@assistant-ui/react";
-import { CornerDownLeftIcon, InfoIcon, TriangleAlertIcon } from "lucide-react";
+import { CornerDownLeftIcon, TriangleAlertIcon } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
@@ -62,12 +62,20 @@ interface WarningResult {
 	message?: string;
 }
 
+interface AuthErrorResult {
+	status: "auth_error";
+	message: string;
+	connector_id?: number;
+	connector_type: string;
+}
+
 type DeleteNotionPageResult =
 	| InterruptResult
 	| SuccessResult
 	| ErrorResult
 	| InfoResult
-	| WarningResult;
+	| WarningResult
+	| AuthErrorResult;
 
 function isInterruptResult(result: unknown): result is InterruptResult {
 	return (
@@ -96,6 +104,15 @@ function isInfoResult(result: unknown): result is InfoResult {
 	);
 }
 
+function isAuthErrorResult(result: unknown): result is AuthErrorResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"status" in result &&
+		(result as AuthErrorResult).status === "auth_error"
+	);
+}
+
 function isWarningResult(result: unknown): result is WarningResult {
 	return (
 		typeof result === "object" &&
@@ -155,7 +172,7 @@ function ApprovalCard({
 	return (
 		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
 			{/* Header */}
-			<div className="flex items-start justify-between px-5 pt-5 pb-4">
+			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
 				<div>
 					<p className="text-sm font-semibold text-foreground">
 						{decided === "reject"
@@ -178,7 +195,7 @@ function ApprovalCard({
 			{!decided && interruptData.context && (
 				<>
 					<div className="mx-5 h-px bg-border/50" />
-					<div className="px-5 py-4 space-y-4">
+					<div className="px-5 py-4 space-y-4 select-none">
 						{interruptData.context.error ? (
 							<p className="text-sm text-destructive">{interruptData.context.error}</p>
 						) : (
@@ -210,7 +227,7 @@ function ApprovalCard({
 			{!decided && (
 				<>
 					<div className="mx-5 h-px bg-border/50" />
-					<div className="px-5 py-4">
+					<div className="px-5 py-4 select-none">
 						<label className="flex items-start gap-2 cursor-pointer">
 							<input
 								type="checkbox"
@@ -233,33 +250,49 @@ function ApprovalCard({
 			{!decided && (
 				<>
 					<div className="mx-5 h-px bg-border/50" />
-					<div className="px-5 py-4 flex items-center gap-2">
-						<Button
-							size="sm"
-							className="rounded-lg gap-1.5"
-							onClick={handleApprove}
-						>
-							Approve
-							<CornerDownLeftIcon className="size-3 opacity-60" />
-						</Button>
-						<Button
-							size="sm"
-							variant="ghost"
-							className="rounded-lg text-muted-foreground"
-							onClick={() => {
-								setDecided("reject");
-								onDecision({ type: "reject", message: "User rejected the action." });
-							}}
-						>
-							Reject
-						</Button>
-					</div>
+				<div className="px-5 py-4 flex items-center gap-2 select-none">
+					<Button
+						size="sm"
+						className="rounded-lg gap-1.5"
+						onClick={handleApprove}
+					>
+						Approve
+						<CornerDownLeftIcon className="size-3 opacity-60" />
+					</Button>
+					<Button
+						size="sm"
+						variant="ghost"
+						className="rounded-lg text-muted-foreground"
+						onClick={() => {
+							setDecided("reject");
+							onDecision({ type: "reject", message: "User rejected the action." });
+						}}
+					>
+						Reject
+					</Button>
+				</div>
 				</>
 			)}
 		</div>
 	);
 }
 
+function AuthErrorCard({ result }: { result: AuthErrorResult }) {
+	return (
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30">
+			<div className="px-5 pt-5 pb-4">
+				<p className="text-sm font-semibold text-destructive">
+					Notion authentication expired
+				</p>
+			</div>
+			<div className="mx-5 h-px bg-border/50" />
+			<div className="px-5 py-4">
+				<p className="text-sm text-muted-foreground">{result.message}</p>
+			</div>
+		</div>
+	);
+}
+
 function ErrorCard({ result }: { result: ErrorResult }) {
 	return (
 		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30">
@@ -277,8 +310,13 @@ function ErrorCard({ result }: { result: ErrorResult }) {
 function InfoCard({ result }: { result: InfoResult }) {
 	return (
 		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30">
-			<div className="flex items-start gap-3 px-5 py-4">
-				<InfoIcon className="size-4 mt-0.5 shrink-0 text-muted-foreground" />
+			<div className="px-5 pt-5 pb-4">
+				<p className="text-sm font-semibold text-amber-600 dark:text-amber-400">
+					Page not found
+				</p>
+			</div>
+			<div className="mx-5 h-px bg-border/50" />
+			<div className="px-5 py-4">
 				<p className="text-sm text-muted-foreground">{result.message}</p>
 			</div>
 		</div>
@@ -387,6 +425,10 @@ export const DeleteNotionPageToolUI = makeAssistantToolUI<
 			return <WarningCard result={result} />;
 		}
 
+		if (isAuthErrorResult(result)) {
+			return <AuthErrorCard result={result} />;
+		}
+
 		if (isErrorResult(result)) {
 			return <ErrorCard result={result} />;
 		}

surfsense_web/components/tool-ui/notion/update-notion-page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { makeAssistantToolUI } from "@assistant-ui/react";
-import { CornerDownLeftIcon, InfoIcon, Pen } from "lucide-react";
+import { CornerDownLeftIcon, Pen } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { PlateEditor } from "@/components/editor/plate-editor";
@@ -59,7 +59,14 @@ interface InfoResult {
 	message: string;
 }
 
-type UpdateNotionPageResult = InterruptResult | SuccessResult | ErrorResult | InfoResult;
+interface AuthErrorResult {
+	status: "auth_error";
+	message: string;
+	connector_id?: number;
+	connector_type: string;
+}
+
+type UpdateNotionPageResult = InterruptResult | SuccessResult | ErrorResult | InfoResult | AuthErrorResult;
 
 function isInterruptResult(result: unknown): result is InterruptResult {
 	return (
@@ -79,6 +86,15 @@ function isErrorResult(result: unknown): result is ErrorResult {
 	);
 }
 
+function isAuthErrorResult(result: unknown): result is AuthErrorResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"status" in result &&
+		(result as AuthErrorResult).status === "auth_error"
+	);
+}
+
 function isInfoResult(result: unknown): result is InfoResult {
 	return (
 		typeof result === "object" &&
@@ -144,7 +160,7 @@ function ApprovalCard({
 	return (
 		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
 			{/* Header */}
-			<div className="flex items-start justify-between px-5 pt-5 pb-4">
+			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
 				<div>
 					<p className="text-sm font-semibold text-foreground">
 						{decided === "reject"
@@ -202,7 +218,7 @@ function ApprovalCard({
 			{!decided && interruptData.context && (
 				<>
 					<div className="mx-5 h-px bg-border/50" />
-					<div className="px-5 py-4 space-y-4">
+					<div className="px-5 py-4 space-y-4 select-none">
 						{interruptData.context.error ? (
 							<p className="text-sm text-destructive">{interruptData.context.error}</p>
 						) : (
@@ -258,7 +274,7 @@ function ApprovalCard({
 			{!decided && (
 				<>
 					<div className="mx-5 h-px bg-border/50" />
-					<div className="px-5 py-4 flex items-center gap-2">
+					<div className="px-5 py-4 flex items-center gap-2 select-none">
 						{allowedDecisions.includes("approve") && (
 							<Button
 								size="sm"
@@ -289,6 +305,22 @@ function ApprovalCard({
 	);
 }
 
+function AuthErrorCard({ result }: { result: AuthErrorResult }) {
+	return (
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30">
+			<div className="px-5 pt-5 pb-4">
+				<p className="text-sm font-semibold text-destructive">
+					Notion authentication expired
+				</p>
+			</div>
+			<div className="mx-5 h-px bg-border/50" />
+			<div className="px-5 py-4">
+				<p className="text-sm text-muted-foreground">{result.message}</p>
+			</div>
+		</div>
+	);
+}
+
 function ErrorCard({ result }: { result: ErrorResult }) {
 	return (
 		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30">
@@ -306,8 +338,13 @@ function ErrorCard({ result }: { result: ErrorResult }) {
 function InfoCard({ result }: { result: InfoResult }) {
 	return (
 		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30">
-			<div className="flex items-start gap-3 px-5 py-4">
-				<InfoIcon className="size-4 mt-0.5 shrink-0 text-muted-foreground" />
+			<div className="px-5 pt-5 pb-4">
+				<p className="text-sm font-semibold text-amber-600 dark:text-amber-400">
+					Page not found
+				</p>
+			</div>
+			<div className="mx-5 h-px bg-border/50" />
+			<div className="px-5 py-4">
 				<p className="text-sm text-muted-foreground">{result.message}</p>
 			</div>
 		</div>
@@ -392,6 +429,10 @@ export const UpdateNotionPageToolUI = makeAssistantToolUI<
 			return <InfoCard result={result} />;
 		}
 
+		if (isAuthErrorResult(result)) {
+			return <AuthErrorCard result={result} />;
+		}
+
 		if (isErrorResult(result)) {
 			return <ErrorCard result={result} />;
 		}