UI top down homescreen

src/core/config/ContextProxy.ts

@@ -53,6 +53,7 @@ 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)}`)

src/core/webview/ClineProvider.ts

@@ -1213,8 +1213,11 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 			language,
 			maxReadFileLine,
 			terminalCompressProgressBar,
+			historyPreviewCollapsed
 		} = 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") || []
@@ -1298,6 +1301,7 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 			settingsImportedAt: this.settingsImportedAt,
 			terminalCompressProgressBar: terminalCompressProgressBar ?? true,
 			hasSystemPromptOverride,
+			historyPreviewCollapsed: historyPreviewCollapsed ?? false,
 		}
 	}
 
@@ -1386,6 +1390,7 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
 			telemetrySetting: stateValues.telemetrySetting || "unset",
 			showRooIgnoredFiles: stateValues.showRooIgnoredFiles ?? true,
 			maxReadFileLine: stateValues.maxReadFileLine ?? 500,
+			historyPreviewCollapsed: stateValues.historyPreviewCollapsed ?? false, 
 		}
 	}
 

src/core/webview/webviewMessageHandler.ts

@@ -843,6 +843,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

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

src/exports/types.ts

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

src/schemas/index.ts

@@ -573,6 +573,7 @@ export const globalSettingsSchema = z.object({
 	customModePrompts: customModePromptsSchema.optional(),
 	customSupportPrompts: customSupportPromptsSchema.optional(),
 	enhancementApiConfigId: z.string().optional(),
+	historyPreviewCollapsed: z.boolean().optional(),
 })
 
 export type GlobalSettings = z.infer<typeof globalSettingsSchema>
@@ -650,6 +651,7 @@ const globalSettingsRecord: GlobalSettingsRecord = {
 	customSupportPrompts: undefined,
 	enhancementApiConfigId: undefined,
 	cachedChromeHostUrl: undefined,
+	historyPreviewCollapsed: undefined, 
 }
 
 export const GLOBAL_SETTINGS_KEYS = Object.keys(globalSettingsRecord) as Keys<GlobalSettings>[]

src/shared/ExtensionMessage.ts

@@ -66,6 +66,7 @@ export interface ExtensionMessage {
 		| "fileSearchResults"
 		| "toggleApiConfigPin"
 		| "acceptInput"
+		| "setHistoryPreviewCollapsed"
 	text?: string
 	action?:
 		| "chatButtonClicked"
@@ -197,6 +198,7 @@ export type ExtensionState = Pick<
 
 	renderContext: "sidebar" | "editor"
 	settingsImportedAt?: number
+	historyPreviewCollapsed?: boolean
 }
 
 export type { ClineMessage, ClineAsk, ClineSay }

src/shared/WebviewMessage.ts

@@ -124,6 +124,7 @@ export interface WebviewMessage {
 		| "maxReadFileLine"
 		| "searchFiles"
 		| "toggleApiConfigPin"
+		| "setHistoryPreviewCollapsed"
 	text?: string
 	disabled?: boolean
 	askResponse?: ClineAskResponse
@@ -150,6 +151,7 @@ export interface WebviewMessage {
 	requestId?: string
 	ids?: string[]
 	hasSystemPromptOverride?: boolean
+	historyPreviewCollapsed?: boolean
 }
 
 export const checkoutDiffPayloadSchema = z.object({

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

@@ -42,69 +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 left-0 right-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 />,
-							code: <code />,
-						}}
-					/>
-				</li>
-				<li>
-					•{" "}
-					<Trans
-						i18nKey="chat:announcement.feature2"
-						components={{
-							bold: <b />,
-							code: <code />,
-						}}
-					/>
-				</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 />,
-							code: <code />,
+							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>
 	)
 }