UI/UX: Adaptive Homescreen

src/core/config/ContextProxy.ts

@@ -53,12 +53,26 @@ export class ContextProxy {
 	public async initialize() {
 		for (const key of GLOBAL_STATE_KEYS) {
 			try {
+				// Revert to original assignment
 				this.stateCache[key] = this.originalContext.globalState.get(key)
 			} catch (error) {
 				logger.error(`Error loading global ${key}: ${error instanceof Error ? error.message : String(error)}`)
 			}
 		}
 
+		// Explicitly load historyPreviewCollapsed after the main loop
+		try {
+			const historyCollapsedValue = this.originalContext.globalState.get("historyPreviewCollapsed")
+			if (typeof historyCollapsedValue === "boolean") {
+				this.stateCache.historyPreviewCollapsed = historyCollapsedValue
+			}
+			// No logging needed here anymore
+		} catch (error) {
+			logger.error(
+				`Error loading global historyPreviewCollapsed: ${error instanceof Error ? error.message : String(error)}`,
+			)
+		}
+
 		const promises = SECRET_STATE_KEYS.map(async (key) => {
 			try {
 				this.secretCache[key] = await this.originalContext.secrets.get(key)

src/core/webview/ClineProvider.ts

@@ -1243,8 +1243,11 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 			showRooIgnoredFiles,
 			language,
 			maxReadFileLine,
+			historyPreviewCollapsed, // Destructure the new state value
 		} = await this.getState()
 
+		this.log(`[Debug] getState historyPreviewCollapsed: ${historyPreviewCollapsed}`) // Add logging here
+
 		const telemetryKey = process.env.POSTHOG_API_KEY
 		const machineId = vscode.env.machineId
 		const allowedCommands = vscode.workspace.getConfiguration("roo-cline").get<string[]>("allowedCommands") || []
@@ -1327,6 +1330,7 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 			maxReadFileLine: maxReadFileLine ?? 500,
 			settingsImportedAt: this.settingsImportedAt,
 			hasSystemPromptOverride,
+			historyPreviewCollapsed: historyPreviewCollapsed ?? false, // Add to the returned state object
 		}
 	}
 
@@ -1414,6 +1418,7 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 			telemetrySetting: stateValues.telemetrySetting || "unset",
 			showRooIgnoredFiles: stateValues.showRooIgnoredFiles ?? true,
 			maxReadFileLine: stateValues.maxReadFileLine ?? 500,
+			historyPreviewCollapsed: stateValues.historyPreviewCollapsed ?? false, // Add to the internal getState as well
 		}
 	}
 

src/core/webview/webviewMessageHandler.ts

@@ -943,6 +943,10 @@ export const webviewMessageHandler = async (provider: ClineProvider, message: We
 			await updateGlobalState("maxReadFileLine", message.value)
 			await provider.postStateToWebview()
 			break
+		case "setHistoryPreviewCollapsed": // Add the new case handler
+			await updateGlobalState("historyPreviewCollapsed", message.bool ?? false)
+			// No need to call postStateToWebview here as the UI already updated optimistically
+			break
 		case "toggleApiConfigPin":
 			if (message.text) {
 				const currentPinned = getGlobalState("pinnedApiConfigs") ?? {}

src/exports/roo-code.d.ts

@@ -354,6 +354,7 @@ type GlobalSettings = {
 		  }
 		| undefined
 	enhancementApiConfigId?: string | undefined
+	historyPreviewCollapsed?: boolean | undefined
 }
 
 type ClineMessage = {

src/exports/types.ts

@@ -357,6 +357,7 @@ type GlobalSettings = {
 		  }
 		| undefined
 	enhancementApiConfigId?: string | undefined
+	historyPreviewCollapsed?: boolean | undefined
 }
 
 export type { GlobalSettings }

src/schemas/index.ts

@@ -565,6 +565,7 @@ export const globalSettingsSchema = z.object({
 	customModePrompts: customModePromptsSchema.optional(),
 	customSupportPrompts: customSupportPromptsSchema.optional(),
 	enhancementApiConfigId: z.string().optional(),
+	historyPreviewCollapsed: z.boolean().optional(), // Add the new setting
 })
 
 export type GlobalSettings = z.infer<typeof globalSettingsSchema>
@@ -641,6 +642,7 @@ const globalSettingsRecord: GlobalSettingsRecord = {
 	customSupportPrompts: undefined,
 	enhancementApiConfigId: undefined,
 	cachedChromeHostUrl: undefined,
+	historyPreviewCollapsed: undefined, // Add to the record
 }
 
 export const GLOBAL_SETTINGS_KEYS = Object.keys(globalSettingsRecord) as Keys<GlobalSettings>[]

src/shared/ExtensionMessage.ts

@@ -69,6 +69,7 @@ export interface ExtensionMessage {
 		| "fileSearchResults"
 		| "toggleApiConfigPin"
 		| "acceptInput"
+		| "setHistoryPreviewCollapsed" // Add the new message type
 	text?: string
 	action?:
 		| "chatButtonClicked"
@@ -206,6 +207,7 @@ export type ExtensionState = Pick<
 
 	renderContext: "sidebar" | "editor"
 	settingsImportedAt?: number
+	historyPreviewCollapsed?: boolean // Add the new state property
 }
 
 export type { ClineMessage, ClineAsk, ClineSay }

src/shared/WebviewMessage.ts

@@ -125,6 +125,7 @@ export interface WebviewMessage {
 		| "maxReadFileLine"
 		| "searchFiles"
 		| "toggleApiConfigPin"
+		| "setHistoryPreviewCollapsed" // Add the missing type here
 	text?: string
 	disabled?: boolean
 	askResponse?: ClineAskResponse

webview-ui/src/components/chat/Announcement.tsx

@@ -42,66 +42,68 @@ const Announcement = ({ version, hideAnnouncement }: AnnouncementProps) => {
 	)
 
 	return (
-		<div
-			style={{
-				backgroundColor: "var(--vscode-editor-inactiveSelectionBackground)",
-				borderRadius: "3px",
-				padding: "12px 16px",
-				margin: "5px 15px 5px 15px",
-				position: "relative",
-				flexShrink: 0,
-			}}>
-			<VSCodeButton
-				appearance="icon"
-				onClick={hideAnnouncement}
-				title={t("chat:announcement.hideButton")}
-				style={{ position: "absolute", top: "8px", right: "8px" }}>
-				<span className="codicon codicon-close"></span>
-			</VSCodeButton>
-			<h2 style={{ margin: "0 0 8px" }}>{t("chat:announcement.title")}</h2>
+		<div className="flex flex-col justify-center absolute top-0 bottom-0 z-50 p-10 bg-black/50">
+			<div
+				style={{
+					backgroundColor: "var(--vscode-editor-inactiveSelectionBackground)",
+					borderRadius: "3px",
+					padding: "12px 16px",
+					margin: "5px 15px 5px 15px",
+					position: "relative",
+					flexShrink: 0,
+				}}>
+				<VSCodeButton
+					appearance="icon"
+					onClick={hideAnnouncement}
+					title={t("chat:announcement.hideButton")}
+					style={{ position: "absolute", top: "8px", right: "8px" }}>
+					<span className="codicon codicon-close"></span>
+				</VSCodeButton>
+				<h2 style={{ margin: "0 0 8px" }}>{t("chat:announcement.title")}</h2>
 
-			<p style={{ margin: "5px 0px" }}>{t("chat:announcement.description")}</p>
+				<p style={{ margin: "5px 0px" }}>{t("chat:announcement.description")}</p>
 
-			<h3 style={{ margin: "12px 0 5px", fontSize: "14px" }}>{t("chat:announcement.whatsNew")}</h3>
-			<ul style={{ margin: "5px 0" }}>
-				<li>
-					•{" "}
-					<Trans
-						i18nKey="chat:announcement.feature1"
-						components={{
-							bold: <b />,
-						}}
-					/>
-				</li>
-				<li>
-					•{" "}
-					<Trans
-						i18nKey="chat:announcement.feature2"
-						components={{
-							bold: <b />,
-						}}
-					/>
-				</li>
-				<li>
-					•{" "}
+				<h3 style={{ margin: "12px 0 5px", fontSize: "14px" }}>{t("chat:announcement.whatsNew")}</h3>
+				<ul style={{ margin: "5px 0" }}>
+					<li>
+						•{" "}
+						<Trans
+							i18nKey="chat:announcement.feature1"
+							components={{
+								bold: <b />,
+							}}
+						/>
+					</li>
+					<li>
+						•{" "}
+						<Trans
+							i18nKey="chat:announcement.feature2"
+							components={{
+								bold: <b />,
+							}}
+						/>
+					</li>
+					<li>
+						•{" "}
+						<Trans
+							i18nKey="chat:announcement.feature3"
+							components={{
+								bold: <b />,
+							}}
+						/>
+					</li>
+				</ul>
+
+				<p style={{ margin: "10px 0px 0px" }}>
 					<Trans
-						i18nKey="chat:announcement.feature3"
+						i18nKey="chat:announcement.detailsDiscussLinks"
 						components={{
-							bold: <b />,
+							discordLink: discordLink,
+							redditLink: redditLink,
 						}}
 					/>
-				</li>
-			</ul>
-
-			<p style={{ margin: "10px 0px 0px" }}>
-				<Trans
-					i18nKey="chat:announcement.detailsDiscussLinks"
-					components={{
-						discordLink: discordLink,
-						redditLink: redditLink,
-					}}
-				/>
-			</p>
+				</p>
+			</div>
 		</div>
 	)
 }