feat: Display detailed, expandable connection error in Comments component

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>

webclient/src/Comments.js

@@ -16,7 +16,7 @@ function Comments({ cache }) {
 	if (id in cache) console.log('cache hit');
 
 	const [story, setStory] = useState(cache[id] || false);
-	const [error, setError] = useState(false);
+	const [error, setError] = useState('');
 	const [collapsed, setCollapsed] = useState([]);
 	const [expanded, setExpanded] = useState([]);
 
@@ -31,7 +31,12 @@ function Comments({ cache }) {
 			);
 
 		fetch('/api/' + id)
-			.then(res => res.json())
+			.then(res => {
+				if (!res.ok) {
+					throw new Error(`Server responded with ${res.status} ${res.statusText}`);
+				}
+				return res.json();
+			})
 			.then(
 				(result) => {
 					setStory(result.story);
@@ -47,7 +52,8 @@ function Comments({ cache }) {
 					}
 				},
 				(error) => {
-					setError(true);
+					const errorMessage = `Failed to fetch comments (ID: ${id}). Your connection may be down or the server might be experiencing issues. ${error.toString()}.`;
+					setError(errorMessage);
 				}
 			);
 	}, [id]);
@@ -97,7 +103,13 @@ function Comments({ cache }) {
 
 	return (
 		<div className='container'>
-			{error && <p>Connection error?</p>}
+			{error &&
+				<details style={{marginBottom: '1rem'}}>
+					<summary>Connection error? Click to expand.</summary>
+					<p>{error}</p>
+					{story && <p>Loaded comments from cache.</p>}
+				</details>
+			}
 			{story ?
 				<div className='article'>
 					<Helmet>