feat: convert state-sync effects to derived values, add useMountEffect to contexts (#922)

Phase 3-5 of useEffect refactoring:
- ToolTimelineItem: derive isExpanded from initial message.artifact instead of effect
- FileEditorPanel: derive isTreeCollapsed from isMobile, derive effectiveShowPreview
  instead of effect-based reset, remove isRecording state sync (use prop directly),
  inline latestEditorValueRef assignment instead of effect
- ChatContext: convert loadPersistentContextFiles mount effect to useMountEffect
- AppContext: convert fetchAppVersion mount effect to useMountEffect

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Signed-off-by: ryaneggz <kre8mymedia@gmail.com>

Author: ryaneggz

frontend/src/components/panels/FileEditorPanel.tsx

@@ -152,17 +152,9 @@ export default function FileEditorPanel() {
 
 	// Tree sidebar state - auto-collapse on mobile
 	const isMobile = useIsMobile();
-	const [isTreeCollapsed, setIsTreeCollapsed] = useState(false);
+	const [isTreeCollapsed, setIsTreeCollapsed] = useState(isMobile);
 
-	// Auto-collapse tree sidebar on mobile
-	useEffect(() => {
-		if (isMobile) {
-			setIsTreeCollapsed(true);
-		}
-	}, [isMobile]);
-
-	// Voice recording state
-	const [isRecording, setIsRecording] = useState(false);
+	// Voice recording state (derived from recorderControls below)
 	const recorderControls = useVoiceVisualizer();
 	const { startRecording, stopRecording, isRecordingInProgress, recordedBlob } =
 		recorderControls;
@@ -222,14 +214,10 @@ export default function FileEditorPanel() {
 	// Use activeFile from context (no local selectedFile state needed)
 	const selectedFile = activeFile;
 
-	useEffect(() => {
-		if (!selectedFile) {
-			latestEditorValueRef.current = "";
-			return;
-		}
-
-		latestEditorValueRef.current = getFileContent(selectedFile);
-	}, [getFileContent, selectedFile]);
+	// Keep editor value ref in sync (ref assignment, not state)
+	latestEditorValueRef.current = selectedFile
+		? getFileContent(selectedFile)
+		: "";
 
 	// Parse selected file path into breadcrumb segments
 	const breadcrumbSegments = useMemo((): BreadcrumbSegment[] => {
@@ -244,22 +232,10 @@ export default function FileEditorPanel() {
 		}));
 	}, [selectedFile]);
 
-	// Reset preview when switching to non-previewable file
-	useEffect(() => {
-		if (
-			selectedFile &&
-			!isMarkdownFile(selectedFile) &&
-			!isHtmlFile(selectedFile) &&
-			!isMermaidFile(selectedFile)
-		) {
-			setShowPreview(false);
-		}
-	}, [selectedFile]);
+	// effectiveShowPreview is computed below, after helper function definitions
 
-	// Track recording state changes
-	useEffect(() => {
-		setIsRecording(isRecordingInProgress);
-	}, [isRecordingInProgress]);
+	// Use isRecordingInProgress directly instead of syncing to local state
+	const isRecording = isRecordingInProgress;
 
 	// Handle recorded blob - transcribe and optionally send to LLM for inference
 	useEffect(() => {
@@ -487,6 +463,14 @@ export default function FileEditorPanel() {
 		return filename.toLowerCase().endsWith(".mmd");
 	};
 
+	// Derive effective preview state — disable for non-previewable files
+	const canPreview =
+		!!selectedFile &&
+		(isMarkdownFile(selectedFile) ||
+			isHtmlFile(selectedFile) ||
+			isMermaidFile(selectedFile));
+	const effectiveShowPreview = showPreview && canPreview;
+
 	// Validate file path
 	const validatePath = (path: string, excludePath?: string): string => {
 		if (!path.trim()) return "Path is required";
@@ -1114,17 +1098,17 @@ export default function FileEditorPanel() {
 										isHtmlFile(selectedFile) ||
 										isMermaidFile(selectedFile)) && (
 										<Button
-											variant={showPreview ? "secondary" : "ghost"}
+											variant={effectiveShowPreview ? "secondary" : "ghost"}
 											size="sm"
 											onClick={() => setShowPreview(!showPreview)}
 											className="h-8 gap-2"
 											title={
-												showPreview
+												effectiveShowPreview
 													? "Show code"
 													: `Preview ${isHtmlFile(selectedFile) ? "HTML" : isMermaidFile(selectedFile) ? "Mermaid diagram" : "markdown"}`
 											}
 											aria-label={
-												showPreview
+												effectiveShowPreview
 													? "Show code"
 													: `Preview ${isHtmlFile(selectedFile) ? "HTML" : isMermaidFile(selectedFile) ? "Mermaid diagram" : "markdown"}`
 											}
@@ -1208,20 +1192,20 @@ export default function FileEditorPanel() {
 						<div className="flex-1 overflow-hidden">
 							{selectedFile && fileSystem.has(selectedFile) ? (
 								<>
-									{showPreview && isMarkdownFile(selectedFile) ? (
+									{effectiveShowPreview && isMarkdownFile(selectedFile) ? (
 										<ScrollArea className="h-full">
 											<div className="p-6 max-w-4xl mx-auto">
 												<MarkdownCard content={getFileContent(selectedFile)} />
 											</div>
 										</ScrollArea>
-									) : showPreview && isHtmlFile(selectedFile) ? (
+									) : effectiveShowPreview && isHtmlFile(selectedFile) ? (
 										<iframe
 											srcDoc={getFileContent(selectedFile)}
 											sandbox="allow-same-origin"
 											className="w-full h-full border-0 bg-white"
 											title={`Preview of ${selectedFile}`}
 										/>
-									) : showPreview && isMermaidFile(selectedFile) ? (
+									) : effectiveShowPreview && isMermaidFile(selectedFile) ? (
 										<ScrollArea className="h-full">
 											<div className="p-6 max-w-4xl mx-auto">
 												<MarkdownCard

frontend/src/components/timeline/ToolTimelineItem.tsx

@@ -1,4 +1,4 @@
-import { useState, lazy, Suspense, useEffect } from "react";
+import { useState, lazy, Suspense } from "react";
 import { ChevronDown, ChevronUp, Wrench } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { truncateFrom } from "@/lib/utils/format";
@@ -104,7 +104,7 @@ export default function ToolTimelineItem({
 	message,
 	maxPreviewLength = 100,
 }: ToolTimelineItemProps) {
-	const [isExpanded, setIsExpanded] = useState(false);
+	const [isExpanded, setIsExpanded] = useState(!!message.artifact);
 
 	// Get preview text from content
 	const getPreviewText = () => {
@@ -120,12 +120,6 @@ export default function ToolTimelineItem({
 
 	const isSuccess = message.status === "success";
 
-	useEffect(() => {
-		if (message.artifact) {
-			setIsExpanded(true);
-		}
-	}, [message.artifact]);
-
 	return (
 		<div className="bg-muted/50 rounded-lg border border-border/50 overflow-hidden">
 			{/* Header - always visible */}

frontend/src/context/AppContext.tsx

@@ -1,6 +1,7 @@
-import { useContext, createContext, useEffect } from "react";
+import { useContext, createContext } from "react";
 import useAppHook from "@/hooks/useAppHook";
 import { useDocumentTitle } from "@/hooks/useDocumentTitle";
+import { useMountEffect } from "@/hooks/useMountEffect";
 
 export const AppContext = createContext({});
 
@@ -17,9 +18,9 @@ export default function AppProvider({
 }) {
 	const appHooks = useAppHook();
 
-	useEffect(() => {
+	useMountEffect(() => {
 		appHooks.fetchAppVersion();
-	}, []);
+	});
 
 	return (
 		<AppContext.Provider

frontend/src/context/ChatContext.tsx

@@ -14,6 +14,7 @@ import useThread from "@/hooks/useThread";
 import useModel from "@/hooks/useModel";
 import useFileSystem, { type FileData } from "@/hooks/useFileSystem";
 import useMessageQueue from "@/hooks/useMessageQueue";
+import { useMountEffect } from "@/hooks/useMountEffect";
 import MemoryService from "@/lib/services/memoryService";
 import {
 	getSettings,
@@ -531,9 +532,9 @@ export default function ChatProvider({
 		}
 	}, [isAuthenticated]);
 
-	useEffect(() => {
+	useMountEffect(() => {
 		void loadPersistentContextFiles();
-	}, [loadPersistentContextFiles]);
+	});
 
 	useEffect(() => {
 		const nextVisibleFiles = buildVisibleWorkspaceFiles({