feat: implement terminal reconnection UI components (Phase 2)

blink-so[bot] · BrunoQuaresma · blink-so[bot] · commit 417b053bcc26 · 2025-07-01T16:29:11.000Z
- Create TerminalRetryConnection component with countdown display and retry button - Add comprehensive Storybook stories covering all retry states - Integrate component with TerminalAlerts for proper positioning - Use consistent TerminalAlert styling for seamless integration - Ensure proper resize handling through existing MutationObserver Implements Phase 2 of terminal reconnection feature as outlined in: coder/internal#659 Co-authored-by: BrunoQuaresma <3165839+BrunoQuaresma@users.noreply.github.com>
diff --git a/site/src/pages/TerminalPage/TerminalAlerts.tsx b/site/src/pages/TerminalPage/TerminalAlerts.tsx
@@ -5,17 +5,29 @@ import { Button } from "components/Button/Button";
 import { type FC, useEffect, useRef, useState } from "react";
 import { docs } from "utils/docs";
 import type { ConnectionStatus } from "./types";
+import { TerminalRetryConnection } from "./TerminalRetryConnection";
 
 type TerminalAlertsProps = {
 	agent: WorkspaceAgent | undefined;
 	status: ConnectionStatus;
 	onAlertChange: () => void;
+	// Retry connection props
+	isRetrying?: boolean;
+	timeUntilNextRetry?: number | null;
+	attemptCount?: number;
+	maxAttempts?: number;
+	onRetryNow?: () => void;
 };
 
 export const TerminalAlerts = ({
 	agent,
 	status,
 	onAlertChange,
+	isRetrying = false,
+	timeUntilNextRetry = null,
+	attemptCount = 0,
+	maxAttempts = 10,
+	onRetryNow,
 }: TerminalAlertsProps) => {
 	const lifecycleState = agent?.lifecycle_state;
 	const prevLifecycleState = useRef(lifecycleState);
@@ -49,7 +61,13 @@ export const TerminalAlerts = ({
 	return (
 		<div ref={wrapperRef}>
 			{status === "disconnected" ? (
-				<DisconnectedAlert />
+				<TerminalRetryConnection
+					isRetrying={isRetrying}
+					timeUntilNextRetry={timeUntilNextRetry}
+					attemptCount={attemptCount}
+					maxAttempts={maxAttempts}
+					onRetryNow={onRetryNow || (() => {})}
+				/>
 			) : lifecycleState === "start_error" ? (
 				<ErrorScriptAlert />
 			) : lifecycleState === "starting" ? (
diff --git a/site/src/pages/TerminalPage/TerminalRetryConnection.stories.tsx b/site/src/pages/TerminalPage/TerminalRetryConnection.stories.tsx
@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TerminalRetryConnection } from "./TerminalRetryConnection";
+
+const meta: Meta<typeof TerminalRetryConnection> = {
+	title: "pages/TerminalPage/TerminalRetryConnection",
+	component: TerminalRetryConnection,
+	parameters: {
+		layout: "padded",
+	},
+	args: {
+		onRetryNow: () => {
+			console.log("Retry now clicked");
+		},
+		maxAttempts: 10,
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof TerminalRetryConnection>;
+
+// Hidden state - component returns null
+export const Hidden: Story = {
+	args: {
+		isRetrying: false,
+		timeUntilNextRetry: null,
+		attemptCount: 0,
+	},
+};
+
+// Currently retrying state
+export const Retrying: Story = {
+	args: {
+		isRetrying: true,
+		timeUntilNextRetry: null,
+		attemptCount: 1,
+	},
+};
+
+// Countdown to next retry - first attempt (1 second)
+export const CountdownFirstAttempt: Story = {
+	args: {
+		isRetrying: false,
+		timeUntilNextRetry: 1000, // 1 second
+		attemptCount: 1,
+	},
+};
+
+// Countdown to next retry - second attempt (2 seconds)
+export const CountdownSecondAttempt: Story = {
+	args: {
+		isRetrying: false,
+		timeUntilNextRetry: 2000, // 2 seconds
+		attemptCount: 2,
+	},
+};
+
+// Countdown to next retry - longer delay (15 seconds)
+export const CountdownLongerDelay: Story = {
+	args: {
+		isRetrying: false,
+		timeUntilNextRetry: 15000, // 15 seconds
+		attemptCount: 5,
+	},
+};
+
+// Countdown with 1 second remaining (singular)
+export const CountdownOneSecond: Story = {
+	args: {
+		isRetrying: false,
+		timeUntilNextRetry: 1000, // 1 second
+		attemptCount: 3,
+	},
+};
+
+// Countdown with less than 1 second remaining
+export const CountdownLessThanOneSecond: Story = {
+	args: {
+		isRetrying: false,
+		timeUntilNextRetry: 500, // 0.5 seconds (should show "1 second")
+		attemptCount: 3,
+	},
+};
+
+// Max attempts reached - no more automatic retries
+export const MaxAttemptsReached: Story = {
+	args: {
+		isRetrying: false,
+		timeUntilNextRetry: null,
+		attemptCount: 10,
+		maxAttempts: 10,
+	},
+};
+
+// Connection lost but no retry scheduled yet
+export const ConnectionLostNoRetry: Story = {
+	args: {
+		isRetrying: false,
+		timeUntilNextRetry: null,
+		attemptCount: 1,
+		maxAttempts: 10,
+	},
+};
diff --git a/site/src/pages/TerminalPage/TerminalRetryConnection.tsx b/site/src/pages/TerminalPage/TerminalRetryConnection.tsx
@@ -0,0 +1,110 @@
+import { Alert, type AlertProps } from "components/Alert/Alert";
+import { Button } from "components/Button/Button";
+import { Spinner } from "components/Spinner/Spinner";
+import type { FC } from "react";
+
+interface TerminalRetryConnectionProps {
+	/**
+	 * Whether a retry is currently in progress
+	 */
+	isRetrying: boolean;
+	/**
+	 * Time in milliseconds until the next automatic retry (null if not scheduled)
+	 */
+	timeUntilNextRetry: number | null;
+	/**
+	 * Number of retry attempts made
+	 */
+	attemptCount: number;
+	/**
+	 * Maximum number of retry attempts
+	 */
+	maxAttempts: number;
+	/**
+	 * Callback to manually trigger a retry
+	 */
+	onRetryNow: () => void;
+}
+
+/**
+ * Formats milliseconds into a human-readable countdown
+ */
+function formatCountdown(ms: number): string {
+	const seconds = Math.ceil(ms / 1000);
+	return `${seconds} second${seconds !== 1 ? "s" : ""}`;
+}
+
+/**
+ * Terminal-specific alert component with consistent styling
+ */
+const TerminalAlert: FC<AlertProps> = (props) => {
+	return (
+		<Alert
+			{...props}
+			css={(theme) => ({
+				borderRadius: 0,
+				borderWidth: 0,
+				borderBottomWidth: 1,
+				borderBottomColor: theme.palette.divider,
+				backgroundColor: theme.palette.background.paper,
+				borderLeft: `3px solid ${theme.palette[props.severity!].light}`,
+				marginBottom: 1,
+			})}
+		/>
+	);
+};
+
+export const TerminalRetryConnection: FC<TerminalRetryConnectionProps> = ({
+	isRetrying,
+	timeUntilNextRetry,
+	attemptCount,
+	maxAttempts,
+	onRetryNow,
+}) => {
+	// Don't show anything if we're not in a retry state
+	if (!isRetrying && timeUntilNextRetry === null) {
+		return null;
+	}
+
+	// Show different messages based on state
+	let message: string;
+	let showRetryButton = true;
+
+	if (isRetrying) {
+		message = "Reconnecting to terminal...";
+		showRetryButton = false; // Don't show button while actively retrying
+	} else if (timeUntilNextRetry !== null) {
+		const countdown = formatCountdown(timeUntilNextRetry);
+		message = `Connection lost. Retrying in ${countdown}...`;
+	} else if (attemptCount >= maxAttempts) {
+		message = "Connection failed after multiple attempts.";
+	} else {
+		message = "Connection lost.";
+	}
+
+	return (
+		<TerminalAlert
+			severity="warning"
+			actions={
+				showRetryButton ? (
+					<Button
+						variant="outline"
+						size="sm"
+						onClick={onRetryNow}
+						disabled={isRetrying}
+						css={{
+							display: "flex",
+							alignItems: "center",
+							gap: "0.5rem",
+						}}
+					>
+						{isRetrying && <Spinner size="sm" />}
+						Retry now
+					</Button>
+				) : null
+			}
+		>
+			{message}
+		</TerminalAlert>
+	);
+};
