@lvce-editor/static-server 0.77.5 → 0.77.6

package/static/{e30ed59 → 101c327}/packages/chat-view/dist/chatViewWorkerMain.js

@@ -1198,6 +1198,7 @@ const Reference = 100;
 
 const ClientX = 'event.clientX';
 const ClientY = 'event.clientY';
+const DataTransferFiles2 = 'event.dataTransfer.files2';
 const DefaultPrevented = 'event.defaultPrevented';
 const Key = 'event.key';
 const ShiftKey = 'event.shiftKey';
@@ -1212,7 +1213,10 @@ const End = 255;
 const Home = 12;
 const UpArrow = 14;
 const DownArrow = 16;
+const KeyN = 42;
+const KeyV = 50;
 
+const CtrlCmd = 1 << 11 >>> 0;
 const Shift = 1 << 10 >>> 0;
 
 const Chat$2 = 97;
@@ -1307,6 +1311,10 @@ const showContextMenu2 = async (uid, menuId, x, y, args) => {
   number(y);
   await invoke('ContextMenu.show2', uid, menuId, x, y, args);
 };
+const getFileHandles = async fileIds => {
+  const files = await invoke('FileSystemHandle.getFileHandles', fileIds);
+  return files;
+};
 const sendMessagePortToClipBoardWorker$1 = async (port, rpcId) => {
   const command = 'ClipBoard.handleMessagePort';
   await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToClipBoardWorker', port, command, rpcId);
@@ -1485,15 +1493,68 @@ const terminate = () => {
   globalThis.close();
 };
 
+const getComposerWidth = width => {
+  return Math.max(1, width - 32);
+};
+
+const composerAttachmentGap = 8;
+const composerAttachmentMarginBottom = 8;
+const composerAttachmentFontSize = 12;
+const composerAttachmentHorizontalPadding = 20;
+const composerAttachmentBorderWidth = 2;
+const composerAttachmentHeight = 26;
+const averageCharacterWidth = composerAttachmentFontSize * 0.6;
+const fallbackComposerWidth = 480;
+const getComposerAttachmentLabel$1 = displayType => {
+  switch (displayType) {
+    case 'file':
+      return 'File';
+    case 'image':
+      return 'Image';
+    case 'invalid-image':
+      return 'Invalid image';
+    case 'text-file':
+      return 'Text file';
+    default:
+      return displayType;
+  }
+};
+const getAttachmentContainerWidth = width => {
+  if (width <= 0) {
+    return fallbackComposerWidth;
+  }
+  return Math.max(1, getComposerWidth(width));
+};
+const getComposerAttachmentWidth = (attachment, containerWidth) => {
+  const label = `${getComposerAttachmentLabel$1(attachment.displayType)} · ${attachment.name}`;
+  const estimatedWidth = Math.ceil(label.length * averageCharacterWidth) + composerAttachmentHorizontalPadding + composerAttachmentBorderWidth;
+  return Math.min(containerWidth, estimatedWidth);
+};
+const getComposerAttachmentsHeight = (composerAttachments, width) => {
+  if (composerAttachments.length === 0) {
+    return 0;
+  }
+  const containerWidth = getAttachmentContainerWidth(width);
+  let currentRowWidth = 0;
+  let rowCount = 1;
+  for (const attachment of composerAttachments) {
+    const attachmentWidth = getComposerAttachmentWidth(attachment, containerWidth);
+    const nextRowWidth = currentRowWidth === 0 ? attachmentWidth : currentRowWidth + composerAttachmentGap + attachmentWidth;
+    if (currentRowWidth > 0 && nextRowWidth > containerWidth) {
+      rowCount++;
+      currentRowWidth = attachmentWidth;
+    } else {
+      currentRowWidth = nextRowWidth;
+    }
+  }
+  return rowCount * composerAttachmentHeight + (rowCount - 1) * composerAttachmentGap + composerAttachmentMarginBottom;
+};
+
 const estimateComposerHeight = (value, lineHeight) => {
   const lineCount = value.split('\n').length;
   return lineCount * lineHeight + 8;
 };
 
-const getComposerWidth = width => {
-  return Math.max(1, width - 32);
-};
-
 const getMaxComposerHeight = (lineHeight, maxComposerRows) => {
   return lineHeight * Math.max(1, maxComposerRows) + 8;
 };
@@ -1552,10 +1613,12 @@ const getNextChatHistoryState = async (state, direction) => {
     const nextDraft = state.chatInputHistoryIndex === -1 ? state.composerValue : state.chatInputHistoryDraft;
     const nextComposerValue = getHistoryValueForIndex(state.chatInputHistory, nextIndex);
     const composerHeight = await getComposerHeight(state, nextComposerValue);
+    const composerAttachmentsHeight = getComposerAttachmentsHeight(state.composerAttachments, state.width);
     return {
       ...state,
       chatInputHistoryDraft: nextDraft,
       chatInputHistoryIndex: nextIndex,
+      composerAttachmentsHeight,
       composerHeight,
       composerSelectionEnd: nextComposerValue.length,
       composerSelectionStart: nextComposerValue.length,
@@ -1569,9 +1632,11 @@ const getNextChatHistoryState = async (state, direction) => {
   const nextIndex = state.chatInputHistoryIndex - 1;
   if (nextIndex === -1) {
     const composerHeight = await getComposerHeight(state, state.chatInputHistoryDraft);
+    const composerAttachmentsHeight = getComposerAttachmentsHeight(state.composerAttachments, state.width);
     return {
       ...state,
       chatInputHistoryIndex: -1,
+      composerAttachmentsHeight,
       composerHeight,
       composerSelectionEnd: state.chatInputHistoryDraft.length,
       composerSelectionStart: state.chatInputHistoryDraft.length,
@@ -1581,9 +1646,11 @@ const getNextChatHistoryState = async (state, direction) => {
   }
   const nextComposerValue = getHistoryValueForIndex(state.chatInputHistory, nextIndex);
   const composerHeight = await getComposerHeight(state, nextComposerValue);
+  const composerAttachmentsHeight = getComposerAttachmentsHeight(state.composerAttachments, state.width);
   return {
     ...state,
     chatInputHistoryIndex: nextIndex,
+    composerAttachmentsHeight,
     composerHeight,
     composerSelectionEnd: nextComposerValue.length,
     composerSelectionStart: nextComposerValue.length,
@@ -1783,12 +1850,14 @@ const Debug = 'Debug';
 const BackToChats = 'Back to chats';
 const BackToChatList = 'Back to chat list';
 const Search$1 = 'Search';
+const ScrollDown$1 = 'Scroll down';
 const SearchModels = 'Search models';
 const SearchChats = 'Search chats';
 const Paste = 'Paste';
 const Rename = 'Rename';
 const Archive = 'Archive';
 const AddProjectChat = 'Add Project';
+const RemoveProject = 'Remove Project';
 const Settings$1 = 'Settings';
 const LoginToBackend = 'Login to backend';
 const LogoutFromBackend = 'Logout from backend';
@@ -1801,12 +1870,19 @@ const StartConversationByTypingBelow = 'Start a conversation by typing below.';
 const NoMatchingModelsFound = 'No matching models have been found.';
 const ComposePlaceholder = 'Type your message. Enter to send.';
 const AttachImageAsContext = 'Attach Image as Context';
-const ImageCouldNotBeLoaded = 'image could not be loaded';
+const OpenImageInNewTab = 'Open image in new tab';
+const RemoveAttachment = 'Remove attachment';
+const ImageCouldNotBeLoaded = 'Image preview could not be loaded';
 const OpenRouterApiKeyPlaceholder = 'Enter OpenRouter API key';
 const OpenApiApiKeyPlaceholder = 'Enter OpenAI API key';
 const SendMessage = 'Send message';
 const StartVoiceDictation = 'Start voice dictation';
 const AddContext$1 = 'Add Context';
+const AddAction = 'Add Action';
+const OpenInVsCode = 'Open in VSCode';
+const Commit = 'Commit';
+const OpenTerminal = 'Open Terminal';
+const ShowDiff = 'Show Diff';
 const CreatePullRequest$2 = 'Create PR';
 const Save = 'Save';
 const Saving = 'Saving...';
@@ -1841,6 +1917,9 @@ const newChat = () => {
 const addProject = () => {
   return i18nString(AddProjectChat);
 };
+const removeProject = () => {
+  return i18nString(RemoveProject);
+};
 const debug = () => {
   return i18nString(Debug);
 };
@@ -1856,6 +1935,9 @@ const settings = () => {
 const search = () => {
   return i18nString(Search$1);
 };
+const scrollDown = () => {
+  return i18nString(ScrollDown$1);
+};
 const searchModels = () => {
   return i18nString(SearchModels);
 };
@@ -1895,6 +1977,12 @@ const composePlaceholder = () => {
 const attachImageAsContext = () => {
   return i18nString(AttachImageAsContext);
 };
+const openImageInNewTab = () => {
+  return i18nString(OpenImageInNewTab);
+};
+const removeAttachment = () => {
+  return i18nString(RemoveAttachment);
+};
 const imageCouldNotBeLoaded = () => {
   return i18nString(ImageCouldNotBeLoaded);
 };
@@ -1913,6 +2001,21 @@ const startVoiceDictation = () => {
 const addContext = () => {
   return i18nString(AddContext$1);
 };
+const addAction = () => {
+  return i18nString(AddAction);
+};
+const openInVsCode = () => {
+  return i18nString(OpenInVsCode);
+};
+const commit = () => {
+  return i18nString(Commit);
+};
+const openTerminal = () => {
+  return i18nString(OpenTerminal);
+};
+const showDiff = () => {
+  return i18nString(ShowDiff);
+};
 const createPullRequest = () => {
   return i18nString(CreatePullRequest$2);
 };
@@ -1971,29 +2074,35 @@ const getDefaultModelsOpenAi = () => {
     id: 'openapi/codex-5.3',
     name: 'Codex 5.3',
     provider: 'openApi',
+    supportsReasoningEffort: true,
     usageCost: 1
   }, {
     id: 'openapi/gpt-5.4-mini',
     name: 'GPT-5.4 Mini',
-    provider: 'openApi'
+    provider: 'openApi',
+    supportsReasoningEffort: true
   }, {
     id: 'openapi/gpt-5-mini',
     name: 'GPT-5 Mini',
-    provider: 'openApi'
+    provider: 'openApi',
+    supportsReasoningEffort: true
   }, {
     id: 'openapi/gpt-4o-mini',
     name: 'GPT-4o Mini',
     provider: 'openApi',
+    supportsImages: true,
     usageCost: 1
   }, {
     id: 'openapi/gpt-4o',
     name: 'GPT-4o',
     provider: 'openApi',
+    supportsImages: true,
     usageCost: 3
   }, {
     id: 'openapi/gpt-4.1-mini',
     name: 'GPT-4.1 Mini',
     provider: 'openApi',
+    supportsImages: true,
     usageCost: 1
   }];
 };
@@ -2101,6 +2210,22 @@ const getModelPickerHeight = (modelPickerHeaderHeight, itemCount) => {
   return Math.min(240, modelPickerHeaderHeight + effectiveItemCount * modelPickerItemHeight);
 };
 
+const minimumWidthForRunModePicker = 520;
+const minimumWidthForAgentModePicker = 640;
+const fullyVisibleResponsivePickerState = {
+  hasSpaceForAgentModePicker: true,
+  hasSpaceForRunModePicker: true
+};
+const getResponsivePickerState = (width, responsivePickerVisibilityEnabled) => {
+  if (!responsivePickerVisibilityEnabled) {
+    return fullyVisibleResponsivePickerState;
+  }
+  return {
+    hasSpaceForAgentModePicker: width >= minimumWidthForAgentModePicker,
+    hasSpaceForRunModePicker: width >= minimumWidthForRunModePicker
+  };
+};
+
 const getModelLabel = model => {
   if (model.provider === 'openRouter') {
     return `${model.name} (OpenRouter)`;
@@ -2186,8 +2311,10 @@ const createDefaultState = () => {
   const chatMessageLineHeight = 20;
   const composerFontSize = 13;
   const composerLineHeight = 20;
+  const responsivePickerVisibilityEnabled = false;
   const models = getDefaultModels();
   const visibleModels = getVisibleModels(models, '');
+  const responsivePickerState = getResponsivePickerState(800, responsivePickerVisibilityEnabled);
   return {
     addContextButtonEnabled: false,
     agentMode: defaultAgentMode,
@@ -2213,7 +2340,10 @@ const createDefaultState = () => {
     chatSendAreaPaddingLeft: 8,
     chatSendAreaPaddingRight: 8,
     chatSendAreaPaddingTop: 10,
+    composerAttachmentPreviewOverlayAttachmentId: '',
+    composerAttachmentPreviewOverlayError: false,
     composerAttachments: [],
+    composerAttachmentsHeight: 0,
     composerDropActive: false,
     composerDropEnabled: true,
     composerFontFamily: 'system-ui',
@@ -2229,6 +2359,7 @@ const createDefaultState = () => {
     focused: false,
     headerHeight: 50,
     height: 0,
+    ...responsivePickerState,
     initial: true,
     inputSource: 'script',
     lastNormalViewMode: 'list',
@@ -2241,12 +2372,14 @@ const createDefaultState = () => {
     messagesScrollTop: 0,
     mockAiResponseDelay: 800,
     mockApiCommandId: '',
+    mockOpenApiRequests: [],
     modelPickerHeaderHeight,
     modelPickerHeight: getModelPickerHeight(modelPickerHeaderHeight, visibleModels.length),
     modelPickerListScrollTop: 0,
     modelPickerOpen: false,
     modelPickerSearchValue: '',
     models,
+    nextAttachmentId: 1,
     nextMessageId: 1,
     openApiApiBaseUrl: 'https://api.openai.com/v1',
     openApiApiKey: '',
@@ -2274,8 +2407,10 @@ const createDefaultState = () => {
     reasoningEffortPickerOpen: false,
     reasoningPickerEnabled: false,
     renamingSessionId: '',
+    responsivePickerVisibilityEnabled,
     runMode: 'local',
     runModePickerOpen: false,
+    scrollDownButtonEnabled: false,
     searchEnabled: false,
     searchFieldVisible: false,
     searchValue: '',
@@ -2428,6 +2563,7 @@ const clearChatSessions = async () => {
   await clear();
 };
 const appendChatViewEvent = async event => {
+  // The local chat-view event union may temporarily grow ahead of the shared rpc-registry typings.
   await appendEvent(event);
 };
 const getChatViewEvents = async sessionId => {
@@ -2484,28 +2620,72 @@ const getComposerAttachmentDisplayType = async (blob, name, mimeType) => {
   return 'file';
 };
 
+const chunkSize = 0x80_00;
+const getBlobBase64 = async blob => {
+  const bytes = new Uint8Array(await blob.arrayBuffer());
+  if (typeof Buffer !== 'undefined') {
+    return Buffer.from(bytes).toString('base64');
+  }
+  let binary = '';
+  for (let i = 0; i < bytes.length; i += chunkSize) {
+    binary += String.fromCodePoint(...bytes.subarray(i, i + chunkSize));
+  }
+  return btoa(binary);
+};
+
+const getComposerAttachmentPreviewSrc = async (blob, displayType, mimeType) => {
+  if (displayType !== 'image') {
+    return undefined;
+  }
+  const base64 = await getBlobBase64(blob);
+  return `data:${mimeType || 'application/octet-stream'};base64,${base64}`;
+};
+
+const getComposerAttachmentTextContent = async (blob, displayType) => {
+  if (displayType !== 'text-file') {
+    return undefined;
+  }
+  return blob.text();
+};
+
 const isChatAttachmentAddedEvent = event => {
   return event.type === 'chat-attachment-added';
 };
+const isChatAttachmentRemovedEvent = event => {
+  return event.type === 'chat-attachment-removed';
+};
 const getComposerAttachments = async sessionId => {
   if (!sessionId) {
     return [];
   }
   const events = await getChatViewEvents(sessionId);
-  const attachments = [];
+  const attachments = new Map();
   for (const event of events) {
+    if (isChatAttachmentRemovedEvent(event)) {
+      attachments.delete(event.attachmentId);
+      continue;
+    }
     if (!isChatAttachmentAddedEvent(event)) {
       continue;
     }
-    attachments.push({
+    const displayType = await getComposerAttachmentDisplayType(event.blob, event.name, event.mimeType);
+    const previewSrc = await getComposerAttachmentPreviewSrc(event.blob, displayType, event.mimeType);
+    const textContent = await getComposerAttachmentTextContent(event.blob, displayType);
+    attachments.set(event.attachmentId, {
       attachmentId: event.attachmentId,
-      displayType: await getComposerAttachmentDisplayType(event.blob, event.name, event.mimeType),
+      displayType,
       mimeType: event.mimeType,
       name: event.name,
-      size: event.size
+      ...(previewSrc ? {
+        previewSrc
+      } : {}),
+      size: event.size,
+      ...(typeof textContent === 'string' ? {
+        textContent
+      } : {})
     });
   }
-  return attachments;
+  return [...attachments.values()];
 };
 
 const getNextSelectedSessionId = (sessions, deletedId) => {
@@ -2523,7 +2703,8 @@ const getNextSelectedSessionId = (sessions, deletedId) => {
 const deleteSession = async (state, id) => {
   const {
     renamingSessionId,
-    sessions
+    sessions,
+    width
   } = state;
   const filtered = sessions.filter(session => session.id !== id);
   if (filtered.length === sessions.length) {
@@ -2534,6 +2715,7 @@ const deleteSession = async (state, id) => {
     return {
       ...state,
       composerAttachments: [],
+      composerAttachmentsHeight: 0,
       renamingSessionId: '',
       selectedSessionId: '',
       sessions: [],
@@ -2555,6 +2737,7 @@ const deleteSession = async (state, id) => {
   return {
     ...state,
     composerAttachments,
+    composerAttachmentsHeight: getComposerAttachmentsHeight(composerAttachments, width),
     renamingSessionId: renamingSessionId === id ? '' : renamingSessionId,
     selectedSessionId: nextSelectedSessionId,
     sessions: hydratedSessions
@@ -2619,7 +2802,7 @@ const getRenderHtmlCss = (sessions, selectedSessionId) => {
 const isEqual$1 = (oldState, newState) => {
   const oldRenderHtmlCss = getRenderHtmlCss(oldState.sessions, oldState.selectedSessionId);
   const newRenderHtmlCss = getRenderHtmlCss(newState.sessions, newState.selectedSessionId);
-  return oldState.initial === newState.initial && oldState.chatMessageFontFamily === newState.chatMessageFontFamily && oldState.chatMessageFontSize === newState.chatMessageFontSize && oldState.chatMessageLineHeight === newState.chatMessageLineHeight && oldState.chatFocusContentMaxWidth === newState.chatFocusContentMaxWidth && oldState.chatSendAreaPaddingTop === newState.chatSendAreaPaddingTop && oldState.chatSendAreaPaddingLeft === newState.chatSendAreaPaddingLeft && oldState.chatSendAreaPaddingRight === newState.chatSendAreaPaddingRight && oldState.chatSendAreaPaddingBottom === newState.chatSendAreaPaddingBottom && oldState.composerHeight === newState.composerHeight && oldState.modelPickerHeight === newState.modelPickerHeight && oldState.composerLineHeight === newState.composerLineHeight && oldState.composerFontFamily === newState.composerFontFamily && oldState.composerFontSize === newState.composerFontSize && oldState.listItemHeight === newState.listItemHeight && oldState.textAreaPaddingTop === newState.textAreaPaddingTop && oldState.textAreaPaddingLeft === newState.textAreaPaddingLeft && oldState.textAreaPaddingRight === newState.textAreaPaddingRight && oldState.textAreaPaddingBottom === newState.textAreaPaddingBottom && oldRenderHtmlCss === newRenderHtmlCss;
+  return oldState.initial === newState.initial && oldState.chatMessageFontFamily === newState.chatMessageFontFamily && oldState.chatMessageFontSize === newState.chatMessageFontSize && oldState.chatMessageLineHeight === newState.chatMessageLineHeight && oldState.chatFocusContentMaxWidth === newState.chatFocusContentMaxWidth && oldState.chatSendAreaPaddingTop === newState.chatSendAreaPaddingTop && oldState.chatSendAreaPaddingLeft === newState.chatSendAreaPaddingLeft && oldState.chatSendAreaPaddingRight === newState.chatSendAreaPaddingRight && oldState.chatSendAreaPaddingBottom === newState.chatSendAreaPaddingBottom && oldState.composerHeight === newState.composerHeight && oldState.composerAttachmentsHeight === newState.composerAttachmentsHeight && oldState.modelPickerHeight === newState.modelPickerHeight && oldState.composerLineHeight === newState.composerLineHeight && oldState.composerFontFamily === newState.composerFontFamily && oldState.composerFontSize === newState.composerFontSize && oldState.listItemHeight === newState.listItemHeight && oldState.textAreaPaddingTop === newState.textAreaPaddingTop && oldState.textAreaPaddingLeft === newState.textAreaPaddingLeft && oldState.textAreaPaddingRight === newState.textAreaPaddingRight && oldState.textAreaPaddingBottom === newState.textAreaPaddingBottom && oldRenderHtmlCss === newRenderHtmlCss;
 };
 
 const diffFocus = (oldState, newState) => {
@@ -2640,7 +2823,7 @@ const isEqualComposerAttachments = (a, b) => {
     return false;
   }
   for (let i = 0; i < a.length; i++) {
-    if (a[i].attachmentId !== b[i].attachmentId || a[i].displayType !== b[i].displayType || a[i].mimeType !== b[i].mimeType || a[i].name !== b[i].name || a[i].size !== b[i].size) {
+    if (a[i].attachmentId !== b[i].attachmentId || a[i].displayType !== b[i].displayType || a[i].mimeType !== b[i].mimeType || a[i].name !== b[i].name || a[i].previewSrc !== b[i].previewSrc || a[i].size !== b[i].size) {
       return false;
     }
   }
@@ -2673,7 +2856,7 @@ const isEqualVisibleModels = (a, b) => {
 };
 
 const isEqual = (oldState, newState) => {
-  return oldState.addContextButtonEnabled === newState.addContextButtonEnabled && oldState.agentMode === newState.agentMode && oldState.agentModePickerOpen === newState.agentModePickerOpen && oldState.authEnabled === newState.authEnabled && oldState.authErrorMessage === newState.authErrorMessage && oldState.authStatus === newState.authStatus && isEqualComposerAttachments(oldState.composerAttachments, newState.composerAttachments) && oldState.composerDropActive === newState.composerDropActive && oldState.composerDropEnabled === newState.composerDropEnabled && oldState.composerValue === newState.composerValue && oldState.initial === newState.initial && oldState.modelPickerOpen === newState.modelPickerOpen && oldState.modelPickerSearchValue === newState.modelPickerSearchValue && isEqualVisibleModels(oldState.visibleModels, newState.visibleModels) && oldState.listFocusedIndex === newState.listFocusedIndex && isEqualProjectExpandedIds(oldState.projectExpandedIds, newState.projectExpandedIds) && oldState.projectListScrollTop === newState.projectListScrollTop && oldState.reasoningEffort === newState.reasoningEffort && oldState.reasoningEffortPickerOpen === newState.reasoningEffortPickerOpen && oldState.reasoningPickerEnabled === newState.reasoningPickerEnabled && oldState.renamingSessionId === newState.renamingSessionId && oldState.selectedModelId === newState.selectedModelId && oldState.selectedProjectId === newState.selectedProjectId && oldState.selectedSessionId === newState.selectedSessionId && oldState.showRunMode === newState.showRunMode && oldState.runMode === newState.runMode && oldState.runModePickerOpen === newState.runModePickerOpen && oldState.sessions === newState.sessions && oldState.tokensMax === newState.tokensMax && oldState.tokensUsed === newState.tokensUsed && oldState.usageOverviewEnabled === newState.usageOverviewEnabled && oldState.useChatMathWorker === newState.useChatMathWorker && oldState.viewMode === newState.viewMode && oldState.voiceDictationEnabled === newState.voiceDictationEnabled;
+  return oldState.addContextButtonEnabled === newState.addContextButtonEnabled && oldState.agentMode === newState.agentMode && oldState.agentModePickerOpen === newState.agentModePickerOpen && oldState.authEnabled === newState.authEnabled && oldState.authErrorMessage === newState.authErrorMessage && oldState.authStatus === newState.authStatus && isEqualComposerAttachments(oldState.composerAttachments, newState.composerAttachments) && oldState.composerDropActive === newState.composerDropActive && oldState.composerDropEnabled === newState.composerDropEnabled && oldState.composerValue === newState.composerValue && oldState.hasSpaceForAgentModePicker === newState.hasSpaceForAgentModePicker && oldState.hasSpaceForRunModePicker === newState.hasSpaceForRunModePicker && oldState.initial === newState.initial && oldState.modelPickerOpen === newState.modelPickerOpen && oldState.modelPickerSearchValue === newState.modelPickerSearchValue && isEqualVisibleModels(oldState.visibleModels, newState.visibleModels) && oldState.listFocusedIndex === newState.listFocusedIndex && isEqualProjectExpandedIds(oldState.projectExpandedIds, newState.projectExpandedIds) && oldState.projectListScrollTop === newState.projectListScrollTop && oldState.reasoningEffort === newState.reasoningEffort && oldState.reasoningEffortPickerOpen === newState.reasoningEffortPickerOpen && oldState.reasoningPickerEnabled === newState.reasoningPickerEnabled && oldState.renamingSessionId === newState.renamingSessionId && oldState.selectedModelId === newState.selectedModelId && oldState.selectedProjectId === newState.selectedProjectId && oldState.selectedSessionId === newState.selectedSessionId && oldState.showRunMode === newState.showRunMode && oldState.runMode === newState.runMode && oldState.runModePickerOpen === newState.runModePickerOpen && oldState.sessions === newState.sessions && oldState.tokensMax === newState.tokensMax && oldState.tokensUsed === newState.tokensUsed && oldState.usageOverviewEnabled === newState.usageOverviewEnabled && oldState.useChatMathWorker === newState.useChatMathWorker && oldState.viewMode === newState.viewMode && oldState.voiceDictationEnabled === newState.voiceDictationEnabled;
 };
 
 const diffScrollTop = (oldState, newState) => {
@@ -2694,10 +2877,7 @@ const RenderIncremental = 11;
 const RenderScrollTop = 12;
 
 const diffValue = (oldState, newState) => {
-  if (oldState.composerValue === newState.composerValue) {
-    return true;
-  }
-  return newState.inputSource !== 'script';
+  return oldState.composerValue === newState.composerValue || newState.inputSource !== 'script';
 };
 
 const modules = [isEqual, diffValue, diffSelection, diffFocus, isEqual$1, diffFocus, diffScrollTop];
@@ -2719,8 +2899,7 @@ const diff2 = uid => {
     newState,
     oldState
   } = get$1(uid);
-  const result = diff(oldState, newState);
-  return result;
+  return diff(oldState, newState);
 };
 
 const getAuthState = state => {
@@ -3061,7 +3240,8 @@ const openModelPicker = state => {
   return {
     ...state,
     agentModePickerOpen: false,
-    focus: 'model-picker-input',
+    focus: modelPickerOpen ? 'model-picker-input' : state.focus,
+    focused: modelPickerOpen ? true : state.focused,
     modelPickerHeight: getModelPickerHeight(state.modelPickerHeaderHeight, visibleModels.length),
     modelPickerListScrollTop: 0,
     modelPickerOpen,
@@ -3077,6 +3257,10 @@ const getKeyBindings = () => {
     command: 'Chat.chatInputHistoryDown',
     key: DownArrow,
     when: FocusChatInput
+  }, {
+    command: 'Chat.pasteInput',
+    key: CtrlCmd | KeyV,
+    when: FocusChatInput
   }, {
     command: 'Chat.chatInputHistoryUp',
     key: UpArrow,
@@ -3097,6 +3281,10 @@ const getKeyBindings = () => {
     command: 'Chat.chatListFocusPrevious',
     key: UpArrow,
     when: FocusChatList
+  }, {
+    command: 'Chat.handleClickNew',
+    key: CtrlCmd | KeyN,
+    when: FocusChatInput
   }, {
     command: 'Chat.handleSubmit',
     key: Enter,
@@ -3116,6 +3304,24 @@ const getKeyBindings = () => {
   }];
 };
 
+const getMenuEntriesChatAttachment = (attachmentId, previewSrc) => {
+  return [{
+    args: [previewSrc],
+    command: 'Chat.openChatAttachmentInNewTab',
+    flags: None,
+    id: 'openImageInNewTab',
+    // @ts-ignore
+    label: openImageInNewTab()
+  }, {
+    args: [attachmentId],
+    command: 'Chat.removeComposerAttachment',
+    flags: None,
+    id: 'removeAttachment',
+    // @ts-ignore
+    label: removeAttachment()
+  }];
+};
+
 const getMenuEntriesChatHeader = () => {
   // TODO
   return [{
@@ -3175,14 +3381,24 @@ const Composer = 'composer';
 const Search = 'search';
 const ComposerDropTarget = 'composer-drop-target';
 const ComposerAttachmentPrefix = 'composer-attachment:';
+const ComposerAttachmentPreviewPrefix = 'composer-attachment-preview:';
+const ComposerAttachmentRemovePrefix = 'composer-attachment-remove:';
+const ComposerAttachmentPreviewOverlay = 'composer-attachment-preview-overlay';
 const AddContext = 'add-context';
 const Dictate = 'dictate';
 const CreatePullRequest$1 = 'create-pull-request';
+const FocusAddAction = 'focus-add-action';
+const FocusOpenInVsCode = 'focus-open-in-vscode';
+const FocusCommit = 'focus-commit';
+const FocusOpenTerminal = 'focus-open-terminal';
+const FocusShowDiff = 'focus-show-diff';
 const Send = 'send';
+const ScrollDown = 'scroll-down';
 const Back = 'back';
 const ModelPickerToggle = 'model-picker-toggle';
 const ModelPickerSearch = 'model-picker-search';
 const ModelPickerList = 'model-picker-list';
+const PickerList = 'picker-list';
 const AgentModePickerToggle = 'agent-mode-picker-toggle';
 const AgentModePickerItemPrefix = 'agent-mode-picker-item:';
 const ReasoningEffortPickerToggle = 'reasoning-effort-picker-toggle';
@@ -3201,6 +3417,7 @@ const Login = 'login';
 const Logout = 'logout';
 const CloseChat = 'close-chat';
 const SessionDelete = 'SessionDelete';
+const ProjectDelete = 'ProjectDelete';
 const ProjectPrefix = 'project:';
 const SessionPrefix = 'session:';
 const RenamePrefix = 'session-rename:';
@@ -3244,6 +3461,30 @@ const getModelPickerItemInputName = modelId => {
 const getComposerAttachmentInputName = attachmentId => {
   return `${ComposerAttachmentPrefix}${attachmentId}`;
 };
+const isComposerAttachmentInputName = name => {
+  return name.startsWith(ComposerAttachmentPrefix);
+};
+const getAttachmentIdFromComposerAttachmentInputName = name => {
+  return name.slice(ComposerAttachmentPrefix.length);
+};
+const getComposerAttachmentRemoveInputName = attachmentId => {
+  return `${ComposerAttachmentRemovePrefix}${attachmentId}`;
+};
+const isComposerAttachmentPreviewInputName = name => {
+  return name.startsWith(ComposerAttachmentPreviewPrefix);
+};
+const getAttachmentIdFromComposerAttachmentPreviewInputName = name => {
+  return name.slice(ComposerAttachmentPreviewPrefix.length);
+};
+const isComposerAttachmentRemoveInputName = name => {
+  return name.startsWith(ComposerAttachmentRemovePrefix);
+};
+const getAttachmentIdFromComposerAttachmentRemoveInputName = name => {
+  return name.slice(ComposerAttachmentRemovePrefix.length);
+};
+const isComposerAttachmentPreviewOverlayInputName = name => {
+  return name === ComposerAttachmentPreviewOverlay;
+};
 const isModelPickerItemInputName = name => {
   return name.startsWith(ModelPickerItemPrefix);
 };
@@ -3285,17 +3526,27 @@ const menuEntryAddProject = {
   id: 'addProject',
   label: addProject()
 };
-const getMenuEntriesChatProjectList = (projectId = '') => {
+const getMenuEntriesChatProjectList = (projectId = '', canRemoveProject = true) => {
   if (!projectId) {
     return [menuEntryAddProject];
   }
-  return [{
+  const entries = [{
     args: [getCreateSessionInProjectInputName(projectId)],
     command: 'Chat.handleClick',
     flags: None,
     id: 'newChat',
     label: newChat()
   }, menuEntryAddProject];
+  if (canRemoveProject) {
+    entries.push({
+      args: [ProjectDelete, projectId],
+      command: 'Chat.handleClick',
+      flags: None,
+      id: 'removeProject',
+      label: removeProject()
+    });
+  }
+  return entries;
 };
 
 const getMenuEntriesProjectAddButton = () => {
@@ -3313,12 +3564,15 @@ const MenuChatHeader = 2179;
 const MenuChatInput = 2180;
 const MenuProjectAddButton = 2181;
 const MenuChatProjectList = 2182;
+const MenuChatAttachment = 2183;
 const getMenuEntryIds = () => {
-  return [Chat$2, MenuChatList, MenuChatHeader, MenuChatInput, MenuProjectAddButton, MenuChatProjectList];
+  return [Chat$2, MenuChatList, MenuChatHeader, MenuChatInput, MenuProjectAddButton, MenuChatProjectList, MenuChatAttachment];
 };
 
 const getMenuEntries = (menuId, props) => {
   switch (props.menuId) {
+    case MenuChatAttachment:
+      return getMenuEntriesChatAttachment(props.attachmentId, props.previewSrc);
     case MenuChatHeader:
       return getMenuEntriesChatHeader();
     case MenuChatInput:
@@ -3326,7 +3580,7 @@ const getMenuEntries = (menuId, props) => {
     case MenuChatList:
       return getMenuEntriesChatList();
     case MenuChatProjectList:
-      return getMenuEntriesChatProjectList(props.projectId);
+      return getMenuEntriesChatProjectList(props.projectId, props.canRemoveProject);
     case MenuProjectAddButton:
       return getMenuEntriesProjectAddButton();
     default:
@@ -3334,6 +3588,10 @@ const getMenuEntries = (menuId, props) => {
   }
 };
 
+const getMockOpenApiRequests = state => {
+  return state.mockOpenApiRequests;
+};
+
 const getQuickPickMenuEntries = () => {
   return [];
 };
@@ -3423,6 +3681,15 @@ const handleChatListContextMenu = async (state, eventX, eventY) => {
   };
 };
 
+const focusInput = state => {
+  return {
+    ...state,
+    focus: 'composer',
+    focused: true,
+    listFocusedIndex: -1
+  };
+};
+
 const generateSessionId = () => {
   return crypto.randomUUID();
 };
@@ -3438,14 +3705,93 @@ const createSession = async (state, projectIdOverride = '') => {
     title: `Chat ${state.sessions.length + 1}`
   };
   await saveChatSession(session);
-  return {
+  return focusInput({
     ...state,
     composerAttachments: [],
+    composerAttachmentsHeight: 0,
     projectExpandedIds: state.projectExpandedIds.includes(projectId) ? state.projectExpandedIds : [...state.projectExpandedIds, projectId],
     renamingSessionId: '',
     selectedProjectId: projectId,
     selectedSessionId: id,
     sessions: [...state.sessions, session]
+  });
+};
+
+const getBlankProjectId = (state, removedProjectId) => {
+  return state.projects.find(project => project.id !== removedProjectId && project.name === '_blank')?.id || '';
+};
+const getNextViewMode = (state, hasSelectedSession) => {
+  if (state.viewMode === 'chat-focus') {
+    return 'chat-focus';
+  }
+  if (!hasSelectedSession) {
+    return 'list';
+  }
+  return state.viewMode === 'detail' ? 'detail' : 'list';
+};
+const ensureExpandedProject = (state, projectExpandedIds, selectedProjectId, visibleSessions) => {
+  if (state.viewMode !== 'chat-focus' || !selectedProjectId || visibleSessions.length === 0 || projectExpandedIds.includes(selectedProjectId)) {
+    return projectExpandedIds;
+  }
+  return [...projectExpandedIds, selectedProjectId];
+};
+const deleteProject = async (state, projectId) => {
+  const project = state.projects.find(candidate => candidate.id === projectId);
+  if (!project || project.name === '_blank') {
+    return state;
+  }
+  const blankProjectId = getBlankProjectId(state, projectId);
+  if (!blankProjectId) {
+    return state;
+  }
+  const projects = state.projects.filter(candidate => candidate.id !== projectId);
+  const sessions = await Promise.all(state.sessions.map(async session => {
+    if (session.projectId !== projectId) {
+      return session;
+    }
+    const updatedSession = {
+      ...session,
+      projectId: blankProjectId
+    };
+    await saveChatSession(updatedSession);
+    return updatedSession;
+  }));
+  const selectedProjectId = !state.selectedProjectId || state.selectedProjectId === projectId || !projects.some(candidate => candidate.id === state.selectedProjectId) ? blankProjectId : state.selectedProjectId;
+  const projectExpandedIds = state.projectExpandedIds.filter(expandedProjectId => expandedProjectId !== projectId && projects.some(candidate => candidate.id === expandedProjectId));
+  const visibleSessions = getVisibleSessions(sessions, selectedProjectId);
+  const nextProjectExpandedIds = ensureExpandedProject(state, projectExpandedIds, selectedProjectId, visibleSessions);
+  if (visibleSessions.length === 0) {
+    return {
+      ...state,
+      composerAttachments: [],
+      composerAttachmentsHeight: 0,
+      projectExpandedIds: nextProjectExpandedIds,
+      projects,
+      selectedProjectId,
+      selectedSessionId: '',
+      sessions,
+      viewMode: getNextViewMode(state, false)
+    };
+  }
+  const selectedSessionId = visibleSessions.some(session => session.id === state.selectedSessionId) ? state.selectedSessionId : visibleSessions[0].id;
+  const loadedSession = await getChatSession(selectedSessionId);
+  const composerAttachments = await getComposerAttachments(selectedSessionId);
+  const hydratedSessions = sessions.map(session => {
+    if (session.id !== selectedSessionId || !loadedSession) {
+      return session;
+    }
+    return loadedSession;
+  });
+  return {
+    ...state,
+    composerAttachments,
+    composerAttachmentsHeight: getComposerAttachmentsHeight(composerAttachments, state.width),
+    projectExpandedIds: nextProjectExpandedIds,
+    projects,
+    selectedProjectId,
+    selectedSessionId,
+    sessions: hydratedSessions,
+    viewMode: getNextViewMode(state, true)
   };
 };
 
@@ -3458,6 +3804,12 @@ const getModelPickerClickIndex = (y, height, eventY, modelPickerBottomOffset, mo
   return Math.floor(relativeY / modelPickerItemHeight);
 };
 
+const AutoScrollTopA = Number.MAX_SAFE_INTEGER;
+const AutoScrollTopB = Number.MAX_SAFE_INTEGER - 1;
+const getNextAutoScrollTop = currentScrollTop => {
+  return currentScrollTop === AutoScrollTopA ? AutoScrollTopB : AutoScrollTopA;
+};
+
 const openFolder = async () => {
   try {
     return await invoke('FilePicker.showDirectoryPicker');
@@ -3467,24 +3819,32 @@ const openFolder = async () => {
 };
 
 const selectProject = async (state, projectId) => {
-  if (!projectId || state.selectedProjectId === projectId) {
+  const {
+    selectedProjectId,
+    selectedSessionId,
+    sessions,
+    viewMode,
+    width
+  } = state;
+  if (!projectId || selectedProjectId === projectId) {
     return state;
   }
-  const visibleSessions = getVisibleSessions(state.sessions, projectId);
+  const visibleSessions = getVisibleSessions(sessions, projectId);
   if (visibleSessions.length === 0) {
     return {
       ...state,
       composerAttachments: [],
+      composerAttachmentsHeight: 0,
       selectedProjectId: projectId,
       selectedSessionId: '',
-      viewMode: state.viewMode === 'chat-focus' ? 'chat-focus' : 'list'
+      viewMode: viewMode === 'chat-focus' ? 'chat-focus' : 'list'
     };
   }
-  const currentSessionVisible = visibleSessions.some(session => session.id === state.selectedSessionId);
-  const nextSelectedSessionId = currentSessionVisible ? state.selectedSessionId : visibleSessions[0].id;
+  const currentSessionVisible = visibleSessions.some(session => session.id === selectedSessionId);
+  const nextSelectedSessionId = currentSessionVisible ? selectedSessionId : visibleSessions[0].id;
   const loadedSession = await getChatSession(nextSelectedSessionId);
   const composerAttachments = await getComposerAttachments(nextSelectedSessionId);
-  const sessions = state.sessions.map(session => {
+  const hydratedSessions = sessions.map(session => {
     if (session.id !== nextSelectedSessionId || !loadedSession) {
       return session;
     }
@@ -3493,10 +3853,11 @@ const selectProject = async (state, projectId) => {
   return {
     ...state,
     composerAttachments,
+    composerAttachmentsHeight: getComposerAttachmentsHeight(composerAttachments, width),
     selectedProjectId: projectId,
     selectedSessionId: nextSelectedSessionId,
-    sessions,
-    viewMode: state.viewMode === 'chat-focus' ? 'chat-focus' : 'detail'
+    sessions: hydratedSessions,
+    viewMode: viewMode === 'chat-focus' ? 'chat-focus' : 'detail'
   };
 };
 
@@ -3535,6 +3896,7 @@ const handleClickCreateProject = async state => {
   return {
     ...state,
     composerAttachments: [],
+    composerAttachmentsHeight: 0,
     projects: [...state.projects, project],
     selectedProjectId: project.id,
     selectedSessionId: '',
@@ -3573,8 +3935,7 @@ const executeProvider = async ({
 }) => {
   await activateByEvent(event, assetDir, platform);
   // @ts-ignore
-  const result = invoke$2(method, ...params);
-  return result;
+  return invoke$2(method, ...params);
 };
 
 const CommandExecute = 'ExtensionHostCommand.executeCommand';
@@ -4025,6 +4386,54 @@ const getBasicChatTools = async (agentMode = defaultAgentMode, questionToolEnabl
   }
 };
 
+const getAttachmentTextPart = attachment => {
+  switch (attachment.displayType) {
+    case 'file':
+      return {
+        text: `Attached file "${attachment.name}" (${attachment.mimeType || 'application/octet-stream'}, ${attachment.size} bytes).`,
+        type: 'input_text'
+      };
+    case 'image':
+      return {
+        text: `Attached image "${attachment.name}" could not be encoded for the AI request.`,
+        type: 'input_text'
+      };
+    case 'invalid-image':
+      return {
+        text: `Attached file "${attachment.name}" could not be processed as a valid image.`,
+        type: 'input_text'
+      };
+    case 'text-file':
+      return {
+        text: attachment.textContent ? `Attached text file "${attachment.name}" (${attachment.mimeType || 'text/plain'}):\n\n${attachment.textContent}` : `Attached text file "${attachment.name}" (${attachment.mimeType || 'text/plain'}).`,
+        type: 'input_text'
+      };
+  }
+};
+const getChatMessageOpenAiContent = message => {
+  if (!message.attachments || message.attachments.length === 0) {
+    return message.text;
+  }
+  const parts = [];
+  if (message.text) {
+    parts.push({
+      text: message.text,
+      type: 'input_text'
+    });
+  }
+  for (const attachment of message.attachments) {
+    if (attachment.displayType === 'image' && attachment.previewSrc) {
+      parts.push({
+        image_url: attachment.previewSrc,
+        type: 'input_image'
+      });
+      continue;
+    }
+    parts.push(getAttachmentTextPart(attachment));
+  }
+  return parts;
+};
+
 const getClientRequestIdHeader = () => {
   return {
     'x-client-request-id': crypto.randomUUID()
@@ -4040,11 +4449,22 @@ const getMockAiResponse = async (userMessage, delayInMs) => {
   return `Mock AI response: I received "${userMessage}".`;
 };
 
+let requests = [];
+const reset$2 = () => {
+  requests = [];
+};
+const capture = request => {
+  requests = [...requests, request];
+};
+const getAll = () => {
+  return requests;
+};
+
 let queue = [];
 let waiters = [];
 let finished = false;
 let errorResult;
-const reset$2 = () => {
+const reset$1 = () => {
   queue = [];
   waiters = [];
   finished = false;
@@ -4118,6 +4538,47 @@ const readNextChunk = async () => {
   return promise;
 };
 
+const lastRequestSummaryToken = '__MOCK_OPENAPI_LAST_REQUEST_SUMMARY__';
+const getLastRequestSummary = () => {
+  const requests = getAll();
+  const request = requests.at(-1);
+  if (!request || !request.payload || typeof request.payload !== 'object') {
+    return 'mock-request-summary images=0 text-files=0';
+  }
+  const input = Reflect.get(request.payload, 'input');
+  if (!Array.isArray(input) || input.length === 0) {
+    return 'mock-request-summary images=0 text-files=0';
+  }
+  let imageCount = 0;
+  let textFileCount = 0;
+  for (const item of input) {
+    if (!item || typeof item !== 'object') {
+      continue;
+    }
+    const content = Reflect.get(item, 'content');
+    if (!Array.isArray(content)) {
+      continue;
+    }
+    for (const part of content) {
+      if (!part || typeof part !== 'object') {
+        continue;
+      }
+      const type = Reflect.get(part, 'type');
+      if (type === 'input_image') {
+        imageCount++;
+        continue;
+      }
+      if (type !== 'input_text') {
+        continue;
+      }
+      const text = Reflect.get(part, 'text');
+      if (typeof text === 'string' && text.startsWith('Attached text file "')) {
+        textFileCount++;
+      }
+    }
+  }
+  return `mock-request-summary images=${imageCount} text-files=${textFileCount}`;
+};
 const getResponseFunctionCalls$1 = value => {
   if (!value || typeof value !== 'object') {
     return [];
@@ -4315,9 +4776,10 @@ const getMockOpenApiAssistantText = async (stream, onTextChunk, onToolCallsChunk
       }
       continue;
     }
-    text += chunk;
+    const resolvedChunk = chunk === lastRequestSummaryToken ? getLastRequestSummary() : chunk;
+    text += resolvedChunk;
     if (stream && onTextChunk) {
-      await onTextChunk(chunk);
+      await onTextChunk(resolvedChunk);
     }
   }
   if (!requestDone && remainder) {
@@ -4517,7 +4979,7 @@ const getOpenAiTools = tools => {
     };
   });
 };
-const getOpenAiParams = (input, modelId, stream, includeObfuscation, tools, webSearchEnabled, maxToolCalls, systemPrompt = '', previousResponseId, reasoningEffort) => {
+const getOpenAiParams = (input, modelId, stream, includeObfuscation, tools, webSearchEnabled, maxToolCalls, systemPrompt = '', previousResponseId, reasoningEffort, supportsReasoningEffort = false) => {
   const openAiTools = getOpenAiTools(tools);
   return {
     input,
@@ -4536,7 +4998,7 @@ const getOpenAiParams = (input, modelId, stream, includeObfuscation, tools, webS
     ...(previousResponseId ? {
       previous_response_id: previousResponseId
     } : {}),
-    ...(reasoningEffort ? {
+    ...(reasoningEffort && supportsReasoningEffort ? {
       reasoning: {
         effort: reasoningEffort
       }
@@ -5143,6 +5605,7 @@ const getOpenApiAssistantText = async (messages, modelId, openApiApiKey, openApi
     questionToolEnabled = false,
     reasoningEffort,
     stream,
+    supportsReasoningEffort = false,
     systemPrompt = '',
     toolEnablement,
     useChatNetworkWorkerForRequests = false,
@@ -5153,7 +5616,7 @@ const getOpenApiAssistantText = async (messages, modelId, openApiApiKey, openApi
     stream: false
   };
   const openAiInput = messages.map(message => ({
-    content: message.text,
+    content: getChatMessageOpenAiContent(message),
     role: message.role
   }));
   const tools = await getBasicChatTools(agentMode, questionToolEnabled, toolEnablement);
@@ -5161,7 +5624,7 @@ const getOpenApiAssistantText = async (messages, modelId, openApiApiKey, openApi
   const maxToolIterations = safeMaxToolCalls - 1;
   let previousResponseId;
   for (let i = 0; i <= maxToolIterations; i++) {
-    const postBody = getOpenAiParams(openAiInput, modelId, stream, includeObfuscation, tools, webSearchEnabled, safeMaxToolCalls, systemPrompt, previousResponseId, reasoningEffort);
+    const postBody = getOpenAiParams(openAiInput, modelId, stream, includeObfuscation, tools, webSearchEnabled, safeMaxToolCalls, systemPrompt, previousResponseId, reasoningEffort, supportsReasoningEffort);
     if (stream) {
       const streamResult = useChatNetworkWorkerForRequests ? await (async () => {
         const requestResult = await makeStreamingApiRequest({
@@ -5546,12 +6009,22 @@ const getOpenApiAssistantText = async (messages, modelId, openApiApiKey, openApi
   };
 };
 
+const imageRegex = /\b(?:image|vision|multimodal)\b/i;
+const unsupportedRegex = /\bdoes(?:\s+not|n't)\s+support|not\s+support(?:ed)?|unsupported\b/i;
 const isOffline = () => {
   if (!globalThis.navigator) {
     return false;
   }
   return globalThis.navigator.onLine === false;
 };
+const isImageNotSupportedError = errorResult => {
+  const haystack = [errorResult.errorCode, errorResult.errorMessage, errorResult.errorType].filter(Boolean).join(' ');
+  return imageRegex.test(haystack) && unsupportedRegex.test(haystack);
+};
+const getImageNotSupportedMessage = modelName => {
+  const subject = modelName ? `${modelName} does not support image attachments.` : 'This model does not support image attachments.';
+  return `${subject} Choose a vision-capable model like GPT-4o Mini or GPT-4o, or remove the image and try again.`;
+};
 const getOpenApiErrorMessage = errorResult => {
   switch (errorResult.details) {
     case 'http-error':
@@ -5565,6 +6038,9 @@ const getOpenApiErrorMessage = errorResult => {
           const status = typeof errorResult.statusCode === 'number' ? errorResult.statusCode : 401;
           return `OpenAI request failed (Status ${status}): Invalid API key. Please verify your OpenAI API key in Chat Settings.`;
         }
+        if (isImageNotSupportedError(errorResult)) {
+          return getImageNotSupportedMessage();
+        }
         if (errorResult.statusCode === 429) {
           let prefix = 'OpenAI rate limit exceeded (429)';
           if (hasErrorCode) {
@@ -6013,17 +6489,6 @@ const isOpenRouterModel = (selectedModelId, models) => {
   return selectedModelId.toLowerCase().startsWith('openrouter/');
 };
 
-let requests = [];
-const reset$1 = () => {
-  requests = [];
-};
-const capture = request => {
-  requests = [...requests, request];
-};
-const getAll = () => {
-  return requests;
-};
-
 /* eslint-disable prefer-destructuring */
 
 const trailingSlashesRegex = /\/+$/;
@@ -6038,6 +6503,9 @@ const getEffectiveBackendModelId = selectedModelId => {
   }
   return selectedModelId.slice(separatorIndex + 1);
 };
+const hasImageAttachments = messages => {
+  return messages.some(message => message.attachments?.some(attachment => attachment.displayType === 'image'));
+};
 const getBackendAssistantText = async (messages, selectedModelId, backendUrl, authAccessToken, systemPrompt) => {
   let response;
   try {
@@ -6085,6 +6553,7 @@ const getAiResponse = async ({
   nextMessageId,
   onDataEvent,
   onEventStreamFinished,
+  onMockOpenApiRequestCaptured,
   onTextChunk,
   onToolCallsChunk,
   openApiApiBaseUrl,
@@ -6160,7 +6629,15 @@ const getAiResponse = async ({
     }
   }
   let text = '';
-  if (authEnabled) {
+  const usesOpenApiModel = isOpenApiModel(selectedModelId, models);
+  const usesOpenRouterModel = isOpenRouterModel(selectedModelId, models);
+  const selectedModel = models.find(model => model.id === selectedModelId);
+  const supportsImages = selectedModel?.supportsImages ?? false;
+  const supportsReasoningEffort = selectedModel?.supportsReasoningEffort ?? false;
+  if (hasImageAttachments(messages) && !supportsImages) {
+    text = getImageNotSupportedMessage(selectedModel?.name);
+  }
+  if (!text && authEnabled) {
     if (!backendUrl) {
       text = backendUrlRequiredMessage;
     } else if (authAccessToken) {
@@ -6169,13 +6646,11 @@ const getAiResponse = async ({
       text = backendAccessTokenRequiredMessage;
     }
   }
-  const usesOpenApiModel = isOpenApiModel(selectedModelId, models);
-  const usesOpenRouterModel = isOpenRouterModel(selectedModelId, models);
   if (!text && usesOpenApiModel) {
     const safeMaxToolCalls = Math.max(1, maxToolCalls);
     if (useMockApi) {
       const openAiInput = messages.map(message => ({
-        content: message.text,
+        content: getChatMessageOpenAiContent(message),
         role: message.role
       }));
       const modelId = getOpenApiModelId(selectedModelId);
@@ -6187,12 +6662,16 @@ const getAiResponse = async ({
       const maxToolIterations = safeMaxToolCalls - 1;
       let previousResponseId;
       for (let i = 0; i <= maxToolIterations; i++) {
-        capture({
+        const request = {
           headers,
           method: 'POST',
-          payload: getOpenAiParams(openAiInput, modelId, streamingEnabled, passIncludeObfuscation, await getBasicChatTools(agentMode, questionToolEnabled, toolEnablement), agentMode === 'plan' ? false : webSearchEnabled, safeMaxToolCalls, systemPrompt, previousResponseId, reasoningEffort),
+          payload: getOpenAiParams(openAiInput, modelId, streamingEnabled, passIncludeObfuscation, await getBasicChatTools(agentMode, questionToolEnabled, toolEnablement), agentMode === 'plan' ? false : webSearchEnabled, safeMaxToolCalls, systemPrompt, previousResponseId, reasoningEffort, supportsReasoningEffort),
           url: getOpenApiApiEndpoint(openApiApiBaseUrl)
-        });
+        };
+        capture(request);
+        if (onMockOpenApiRequestCaptured) {
+          await Promise.resolve(onMockOpenApiRequestCaptured(request));
+        }
         const result = await getMockOpenApiAssistantText(streamingEnabled, onTextChunk, onToolCallsChunk, onDataEvent, onEventStreamFinished);
         if (result.type !== 'success') {
           text = getOpenApiErrorMessage(result);
@@ -6270,6 +6749,7 @@ const getAiResponse = async ({
           reasoningEffort
         } : {}),
         stream: streamingEnabled,
+        supportsReasoningEffort,
         systemPrompt,
         ...(toolEnablement ? {
           toolEnablement
@@ -6334,8 +6814,8 @@ const getAiResponse = async ({
   return message;
 };
 
-const parseAndStoreMessagesContent$1 = async (parsedMessages, messages) => {
-  return invoke$7('ChatParser.parseMessageContent', parsedMessages, messages);
+const parseMessageContents = async rawMessages => {
+  return invoke$7('ChatMessageParsing.parseMessageContents', rawMessages);
 };
 
 const Actions = 'Actions';
@@ -6346,6 +6826,10 @@ const Chat = 'Chat';
 const ChatActions = 'ChatActions';
 const ChatAuthError = 'ChatAuthError';
 const ChatFocus = 'ChatFocus';
+const ChatFocusActions = 'ChatFocusActions';
+const ChatFocusHeader = 'ChatFocusHeader';
+const ChatFocusMainArea = 'ChatFocusMainArea';
+const ChatFocusProject = 'ChatFocusProject';
 const ChatHeader = 'ChatHeader';
 const ChatHeaderLabel = 'ChatHeaderLabel';
 const ChatInputBox = 'ChatInputBox';
@@ -6370,15 +6854,30 @@ const ChatModelPickerItemSelected = 'ChatModelPickerItemSelected';
 const ChatModelPickerItemUsageCost = 'ChatModelPickerItemUsageCost';
 const ChatModelPickerList = 'ChatModelPickerList';
 const ChatName = 'ChatName';
+const ChatOverlays = 'ChatOverlays';
 const ChatOrderedList = 'ChatOrderedList';
 const ChatOrderedListItem = 'ChatOrderedListItem';
 const ChatOrderedListItemContent = 'ChatOrderedListItemContent';
+const ChatOrderedListItemPrefix = 'ChatOrderedListItemPrefix';
 const ChatOrderedListMarker = 'ChatOrderedListMarker';
 const ChatComposerAttachment = 'ChatComposerAttachment';
 const ChatComposerAttachmentImage = 'ChatComposerAttachmentImage';
 const ChatComposerAttachmentInvalidImage = 'ChatComposerAttachmentInvalidImage';
+const ChatComposerAttachmentLabel = 'ChatComposerAttachmentLabel';
+const ChatComposerAttachmentPreview = 'ChatComposerAttachmentPreview';
+const ChatComposerAttachmentPreviewOverlay = 'ChatComposerAttachmentPreviewOverlay';
+const ChatComposerAttachmentPreviewOverlayError = 'ChatComposerAttachmentPreviewOverlayError';
+const ChatComposerAttachmentPreviewOverlayImage = 'ChatComposerAttachmentPreviewOverlayImage';
+const ChatComposerAttachmentRemoveButton = 'ChatComposerAttachmentRemoveButton';
 const ChatComposerAttachments = 'ChatComposerAttachments';
 const ChatComposerAttachmentTextFile = 'ChatComposerAttachmentTextFile';
+const ChatAttachment = 'ChatAttachment';
+const ChatAttachmentImage = 'ChatAttachmentImage';
+const ChatAttachmentInvalidImage = 'ChatAttachmentInvalidImage';
+const ChatAttachmentLabel = 'ChatAttachmentLabel';
+const ChatAttachmentPreview = 'ChatAttachmentPreview';
+const ChatAttachments = 'ChatAttachments';
+const ChatAttachmentTextFile = 'ChatAttachmentTextFile';
 const ChatSendArea = 'ChatSendArea';
 const ChatSendAreaBottom = 'ChatSendAreaBottom';
 const ChatSendAreaContent = 'ChatSendAreaContent';
@@ -6414,6 +6913,7 @@ const FileIcon = 'FileIcon';
 const IconButton = 'IconButton';
 const IconButtonDisabled = 'IconButtonDisabled';
 const ImageElement = 'ImageElement';
+const ImageErrorMessage = 'ImageErrorMessage';
 const InputBox = 'InputBox';
 const Insertion = 'Insertion';
 const Label = 'Label';
@@ -6427,6 +6927,7 @@ const MaskIconAccount = 'MaskIconAccount';
 const MaskIconAdd = 'MaskIconAdd';
 const MaskIconArrowLeft = 'MaskIconArrowLeft';
 const MaskIconChevronDown = 'MaskIconChevronDown';
+const MaskIconChevronRight = 'MaskIconChevronRight';
 const MaskIconChevronUp = 'MaskIconChevronUp';
 const MaskIconClose = 'MaskIconClose';
 const MaskIconDebugPause = 'MaskIconDebugPause';
@@ -6496,15 +6997,37 @@ const jsRules = [{
   className: TokenKeyword,
   regex: /\b(?:const|let|var|function|return|if|else|for|while|class|new|typeof|instanceof|import|export|from|default|async|await|try|catch|finally|throw|this|true|false|null|undefined)\b/
 }];
-const htmlRules = [{
+const tsRules = [{
   className: TokenComment,
-  regex: /<!--[\s\S]*?-->/
+  regex: /\/\/[^\n]*/
 }, {
-  className: TokenTag,
-  regex: /<\/[a-zA-Z][a-zA-Z0-9-]*\s*>/
+  className: TokenComment,
+  regex: /\/\*[\s\S]*?\*\//
 }, {
-  className: TokenTag,
-  regex: /<[a-zA-Z][a-zA-Z0-9-]*/
+  className: TokenString,
+  regex: /"[^"\\]*(?:\\.[^"\\]*)*"/
+}, {
+  className: TokenString,
+  regex: /'[^'\\]*(?:\\.[^'\\]*)*'/
+}, {
+  className: TokenString,
+  regex: /`[^`\\]*(?:\\.[^`\\]*)*`/
+}, {
+  className: TokenNumber,
+  regex: /\b\d+\.?\d*\b/
+}, {
+  className: TokenKeyword,
+  regex: /\b(?:abstract|any|as|asserts|async|await|boolean|class|const|constructor|declare|default|enum|export|extends|false|finally|for|from|function|get|if|implements|import|in|infer|instanceof|interface|is|keyof|let|module|namespace|never|new|null|number|object|override|private|protected|public|readonly|return|satisfies|set|static|string|super|switch|symbol|this|throw|true|try|type|typeof|undefined|unknown|var|void|while)\b/
+}];
+const htmlRules = [{
+  className: TokenComment,
+  regex: /<!--[\s\S]*?-->/
+}, {
+  className: TokenTag,
+  regex: /<\/[a-zA-Z][a-zA-Z0-9-]*\s*>/
+}, {
+  className: TokenTag,
+  regex: /<[a-zA-Z][a-zA-Z0-9-]*/
 }, {
   className: TokenTag,
   regex: /\/?>/
@@ -6619,6 +7142,9 @@ const highlightCode = (code, language) => {
   if (normalized === 'js' || normalized === 'javascript') {
     return tokenize(code, jsRules);
   }
+  if (normalized === 'ts' || normalized === 'typescript') {
+    return tokenize(code, tsRules);
+  }
   if (normalized === 'py' || normalized === 'python') {
     return tokenize(code, pythonRules);
   }
@@ -7769,9 +8295,28 @@ const parseAndStoreMessagesContent = async (parsedMessages, messages) => {
   }
   return nextParsedMessages;
 };
+const getMessagesNeedingParsing = (parsedMessages, messages) => {
+  return messages.filter(message => {
+    const existingParsedMessage = parsedMessages.find(item => item.id === message.id);
+    return !existingParsedMessage || existingParsedMessage.text !== message.text;
+  });
+};
+const parseAndStoreMessagesContentInWorker = async (parsedMessages, messages) => {
+  const messagesNeedingParsing = getMessagesNeedingParsing(parsedMessages, messages);
+  if (messagesNeedingParsing.length === 0) {
+    return parsedMessages;
+  }
+  const parsedContents = await parseMessageContents(messagesNeedingParsing.map(message => message.text));
+  let nextParsedMessages = parsedMessages;
+  for (const [index, message] of messagesNeedingParsing.entries()) {
+    const parsedContent = message.text === '' ? emptyMessageContent : parsedContents[index];
+    nextParsedMessages = setParsedMessageContent(nextParsedMessages, message.id, message.text, parsedContent);
+  }
+  return nextParsedMessages;
+};
 const parseAndStoreMessagesContentWithWorkerPreference = async (parsedMessages, messages, useChatMessageParsingWorker) => {
   if (useChatMessageParsingWorker) {
-    return parseAndStoreMessagesContent$1(parsedMessages, messages);
+    return parseAndStoreMessagesContentInWorker(parsedMessages, messages);
   }
   return parseAndStoreMessagesContent(parsedMessages, messages);
 };
@@ -8007,15 +8552,6 @@ const getSlashCommandHandler = command => {
   return slashCommandRegistry[command];
 };
 
-const focusInput = state => {
-  return {
-    ...state,
-    focus: 'composer',
-    focused: true,
-    listFocusedIndex: -1
-  };
-};
-
 const withClearedComposer = state => {
   return focusInput({
     ...state,
@@ -8169,12 +8705,6 @@ const getMentionContextMessage = async value => {
   };
 };
 
-const AutoScrollTopA = Number.MAX_SAFE_INTEGER;
-const AutoScrollTopB = Number.MAX_SAFE_INTEGER - 1;
-const getNextAutoScrollTop = currentScrollTop => {
-  return currentScrollTop === AutoScrollTopA ? AutoScrollTopB : AutoScrollTopA;
-};
-
 const slashCommandRegex = /^\/([a-z][a-z0-9-]*)(?:\s+.*)?$/i;
 const getSlashCommand = value => {
   const trimmed = value.trim();
@@ -8452,6 +8982,19 @@ const withUpdatedMessageScrollTop = state => {
   };
 };
 const workspaceUriPlaceholder = '{{workspaceUri}}';
+const clearComposerAttachments = async (sessionId, attachmentIds) => {
+  if (!sessionId) {
+    return;
+  }
+  for (const attachmentId of attachmentIds) {
+    await appendChatViewEvent({
+      attachmentId,
+      sessionId,
+      timestamp: new Date().toISOString(),
+      type: 'chat-attachment-removed'
+    });
+  }
+};
 const getCurrentDate = () => {
   return new Date().toISOString().slice(0, 10);
 };
@@ -8544,7 +9087,12 @@ const handleSubmit = async state => {
     minute: '2-digit'
   });
   const userMessageId = crypto.randomUUID();
+  const composerAttachments = state.composerAttachments.length > 0 ? state.composerAttachments : await getComposerAttachments(state.selectedSessionId);
+  await clearComposerAttachments(state.selectedSessionId, composerAttachments.map(attachment => attachment.attachmentId));
   const userMessage = {
+    ...(composerAttachments.length > 0 ? {
+      attachments: composerAttachments
+    } : {}),
     id: userMessageId,
     role: 'user',
     text: userText,
@@ -8600,6 +9148,7 @@ const handleSubmit = async state => {
     optimisticState = withUpdatedMessageScrollTop(focusInput({
       ...state,
       composerAttachments: [],
+      composerAttachmentsHeight: 0,
       composerHeight: getMinComposerHeightForState(state),
       composerSelectionEnd: 0,
       composerSelectionStart: 0,
@@ -8637,6 +9186,8 @@ const handleSubmit = async state => {
     }
     optimisticState = withUpdatedMessageScrollTop(focusInput({
       ...state,
+      composerAttachments: [],
+      composerAttachmentsHeight: 0,
       composerHeight: getMinComposerHeightForState(state),
       composerSelectionEnd: 0,
       composerSelectionStart: 0,
@@ -8656,6 +9207,9 @@ const handleSubmit = async state => {
     latestState: optimisticState,
     previousState: optimisticState
   };
+  let {
+    mockOpenApiRequests
+  } = optimisticState;
   const selectedOptimisticSession = optimisticState.sessions.find(session => session.id === optimisticState.selectedSessionId);
   const systemPrompt = getEffectiveSystemPrompt(optimisticState, selectedOptimisticSession);
   const workspaceUri = getWorkspaceUri(optimisticState, selectedOptimisticSession);
@@ -8698,6 +9252,9 @@ const handleSubmit = async state => {
         value: '[DONE]'
       });
     },
+    onMockOpenApiRequestCaptured: async request => {
+      mockOpenApiRequests = [...mockOpenApiRequests, request];
+    },
     ...(handleTextChunkFunctionRef ? {
       onTextChunk: handleTextChunkFunctionRef
     } : {}),
@@ -8754,6 +9311,7 @@ const handleSubmit = async state => {
   }
   return withUpdatedMessageScrollTop(focusInput({
     ...latestState,
+    mockOpenApiRequests,
     nextMessageId: latestState.nextMessageId + 1,
     parsedMessages: finalParsedMessages,
     sessions: updatedSessions
@@ -8780,11 +9338,43 @@ const handleReasoningEffortChange = async (state, value) => {
   return setReasoningEffort(state, value);
 };
 
+const handleRemoveComposerAttachment = async (state, attachmentId) => {
+  const {
+    composerAttachments,
+    selectedSessionId
+  } = state;
+  const nextComposerAttachments = composerAttachments.filter(attachment => attachment.attachmentId !== attachmentId);
+  if (nextComposerAttachments.length === composerAttachments.length) {
+    return state;
+  }
+  if (selectedSessionId) {
+    await appendChatViewEvent({
+      attachmentId,
+      sessionId: selectedSessionId,
+      timestamp: new Date().toISOString(),
+      type: 'chat-attachment-removed'
+    });
+  }
+  return {
+    ...state,
+    composerAttachments: nextComposerAttachments,
+    composerAttachmentsHeight: getComposerAttachmentsHeight(nextComposerAttachments, state.width)
+  };
+};
+
 const openAgentModePicker = state => {
+  if (!state.hasSpaceForAgentModePicker) {
+    return {
+      ...state,
+      agentModePickerOpen: false
+    };
+  }
   const agentModePickerOpen = !state.agentModePickerOpen;
   return {
     ...state,
     agentModePickerOpen,
+    focus: agentModePickerOpen ? 'picker-list' : state.focus,
+    focused: agentModePickerOpen ? true : state.focused,
     modelPickerOpen: false,
     modelPickerSearchValue: '',
     reasoningEffortPickerOpen: false,
@@ -8803,6 +9393,8 @@ const openReasoningEffortPicker = state => {
   return {
     ...state,
     agentModePickerOpen: false,
+    focus: reasoningEffortPickerOpen ? 'picker-list' : state.focus,
+    focused: reasoningEffortPickerOpen ? true : state.focused,
     modelPickerOpen: false,
     modelPickerSearchValue: '',
     reasoningEffortPickerOpen,
@@ -8818,10 +9410,18 @@ const OpenOpenRouterApiKeySettings = 'open-openrouter-api-key-settings';
 const OpenOpenRouterApiKeyWebsite = 'open-openrouter-api-key-website';
 
 const openRunModePicker = state => {
+  if (!state.hasSpaceForRunModePicker) {
+    return {
+      ...state,
+      runModePickerOpen: false
+    };
+  }
   const runModePickerOpen = !state.runModePickerOpen;
   return {
     ...state,
     agentModePickerOpen: false,
+    focus: runModePickerOpen ? 'picker-list' : state.focus,
+    focused: runModePickerOpen ? true : state.focused,
     modelPickerOpen: false,
     modelPickerSearchValue: '',
     reasoningEffortPickerOpen: false,
@@ -8831,13 +9431,19 @@ const openRunModePicker = state => {
 };
 
 const selectSession = async (state, id) => {
-  const exists = state.sessions.some(session => session.id === id);
+  const {
+    lastNormalViewMode,
+    sessions,
+    viewMode,
+    width
+  } = state;
+  const exists = sessions.some(session => session.id === id);
   if (!exists) {
     return state;
   }
   const loadedSession = await getChatSession(id);
   const composerAttachments = await getComposerAttachments(id);
-  const sessions = state.sessions.map(session => {
+  const hydratedSessions = sessions.map(session => {
     if (session.id !== id) {
       return session;
     }
@@ -8849,11 +9455,12 @@ const selectSession = async (state, id) => {
   return {
     ...state,
     composerAttachments,
-    lastNormalViewMode: state.viewMode === 'chat-focus' ? state.lastNormalViewMode : 'detail',
+    composerAttachmentsHeight: getComposerAttachmentsHeight(composerAttachments, width),
+    lastNormalViewMode: viewMode === 'chat-focus' ? lastNormalViewMode : 'detail',
     renamingSessionId: '',
     selectedSessionId: id,
-    sessions,
-    viewMode: state.viewMode === 'chat-focus' ? 'chat-focus' : 'detail'
+    sessions: hydratedSessions,
+    viewMode: viewMode === 'chat-focus' ? 'chat-focus' : 'detail'
   };
 };
 
@@ -8877,16 +9484,20 @@ const startRename = (state, id) => {
 };
 
 const toggleChatFocusMode = async state => {
-  if (state.viewMode === 'chat-focus') {
+  const {
+    lastNormalViewMode,
+    viewMode
+  } = state;
+  if (viewMode === 'chat-focus') {
     return {
       ...state,
-      viewMode: state.lastNormalViewMode
+      viewMode: lastNormalViewMode
     };
   }
-  if (state.viewMode === 'list' || state.viewMode === 'detail') {
+  if (viewMode === 'list' || viewMode === 'detail') {
     return {
       ...state,
-      lastNormalViewMode: state.viewMode,
+      lastNormalViewMode: viewMode,
       viewMode: 'chat-focus'
     };
   }
@@ -8894,25 +9505,32 @@ const toggleChatFocusMode = async state => {
 };
 
 const toggleProjectExpanded = async (state, projectId) => {
-  const isExpanded = state.projectExpandedIds.includes(projectId);
-  const projectExpandedIds = isExpanded ? state.projectExpandedIds.filter(id => id !== projectId) : [...state.projectExpandedIds, projectId];
-  const visibleSessions = getVisibleSessions(state.sessions, projectId);
+  const {
+    projectExpandedIds,
+    selectedSessionId,
+    sessions,
+    width
+  } = state;
+  const isExpanded = projectExpandedIds.includes(projectId);
+  const nextProjectExpandedIds = isExpanded ? projectExpandedIds.filter(id => id !== projectId) : [...projectExpandedIds, projectId];
+  const visibleSessions = getVisibleSessions(sessions, projectId);
   if (visibleSessions.length === 0) {
     return {
       ...state,
       composerAttachments: [],
-      projectExpandedIds,
+      composerAttachmentsHeight: 0,
+      projectExpandedIds: nextProjectExpandedIds,
       selectedProjectId: projectId,
       selectedSessionId: '',
       viewMode: 'chat-focus'
     };
   }
-  const selectedSessionVisible = visibleSessions.some(session => session.id === state.selectedSessionId);
-  const selectedSessionId = selectedSessionVisible ? state.selectedSessionId : visibleSessions[0].id;
-  const loadedSession = await getChatSession(selectedSessionId);
-  const composerAttachments = await getComposerAttachments(selectedSessionId);
-  const sessions = state.sessions.map(session => {
-    if (session.id !== selectedSessionId || !loadedSession) {
+  const selectedSessionVisible = visibleSessions.some(session => session.id === selectedSessionId);
+  const nextSelectedSessionId = selectedSessionVisible ? selectedSessionId : visibleSessions[0].id;
+  const loadedSession = await getChatSession(nextSelectedSessionId);
+  const composerAttachments = await getComposerAttachments(nextSelectedSessionId);
+  const hydratedSessions = sessions.map(session => {
+    if (session.id !== nextSelectedSessionId || !loadedSession) {
       return session;
     }
     return loadedSession;
@@ -8920,10 +9538,11 @@ const toggleProjectExpanded = async (state, projectId) => {
   return {
     ...state,
     composerAttachments,
-    projectExpandedIds,
+    composerAttachmentsHeight: getComposerAttachmentsHeight(composerAttachments, width),
+    projectExpandedIds: nextProjectExpandedIds,
     selectedProjectId: projectId,
-    selectedSessionId,
-    sessions,
+    selectedSessionId: nextSelectedSessionId,
+    sessions: hydratedSessions,
     viewMode: 'chat-focus'
   };
 };
@@ -9057,10 +9676,23 @@ const handleClick = async (state, name, id = '', eventX = 0, eventY = 0) => {
         const sessionId = getRenameIdFromInputName(name);
         return startRename(state, sessionId);
       }
+    case isComposerAttachmentRemoveInputName(name):
+      {
+        const attachmentId = getAttachmentIdFromComposerAttachmentRemoveInputName(name);
+        return handleRemoveComposerAttachment(state, attachmentId);
+      }
     case name === SessionDelete:
       return deleteSession(state, id);
+    case name === ProjectDelete:
+      return deleteProject(state, id);
     case name === Send:
       return handleClickSend(state);
+    case name === ScrollDown:
+      return {
+        ...state,
+        messagesAutoScrollEnabled: true,
+        messagesScrollTop: getNextAutoScrollTop(state.messagesScrollTop)
+      };
     case name === SaveOpenRouterApiKey:
       return handleClickSaveOpenRouterApiKey(state);
     case name === SaveOpenApiApiKey:
@@ -9086,6 +9718,7 @@ const handleClickBack = async state => {
   return {
     ...state,
     composerAttachments: [],
+    composerAttachmentsHeight: 0,
     lastNormalViewMode: 'list',
     renamingSessionId: '',
     viewMode: 'list'
@@ -9167,6 +9800,7 @@ const handleClickNew = async state => {
   return focusInput({
     ...clearedState,
     composerAttachments: [],
+    composerAttachmentsHeight: 0,
     lastNormalViewMode: 'list',
     renamingSessionId: '',
     viewMode: 'list'
@@ -9182,7 +9816,23 @@ const handleClickSettings = async () => {
   await invoke('Main.openUri', 'app://settings.json');
 };
 
-const handleContextMenuChatImageAttachment = async state => {
+const handleContextMenuChatImageAttachment = async (state, name, eventX, eventY) => {
+  const getFallbackAttachment = () => {
+    const attachmentsWithPreview = state.composerAttachments.filter(attachment => attachment.previewSrc);
+    if (attachmentsWithPreview.length !== 1) {
+      return undefined;
+    }
+    return attachmentsWithPreview[0];
+  };
+  const attachment = isComposerAttachmentPreviewInputName(name) ? state.composerAttachments.find(item => item.attachmentId === getAttachmentIdFromComposerAttachmentPreviewInputName(name)) : getFallbackAttachment();
+  if (!attachment?.previewSrc) {
+    return state;
+  }
+  await showContextMenu2(state.uid, MenuChatAttachment, eventX, eventY, {
+    attachmentId: attachment.attachmentId,
+    menuId: MenuChatAttachment,
+    previewSrc: attachment.previewSrc
+  });
   return state;
 };
 
@@ -9195,16 +9845,20 @@ const handleContextMenuChatSendAreaBottom = async state => {
 };
 
 const handleDragEnter = async (state, name, hasFiles = true) => {
+  const {
+    composerDropActive,
+    composerDropEnabled
+  } = state;
   if (name !== ComposerDropTarget) {
     return state;
   }
-  if (!state.composerDropEnabled) {
+  if (!composerDropEnabled) {
     return state;
   }
   if (!hasFiles) {
     return state;
   }
-  if (state.composerDropActive) {
+  if (composerDropActive) {
     return state;
   }
   return {
@@ -9227,16 +9881,20 @@ const handleDragLeave = async (state, name) => {
 };
 
 const handleDragOver = async (state, name, hasFiles = true) => {
+  const {
+    composerDropActive,
+    composerDropEnabled
+  } = state;
   if (name !== ComposerDropTarget) {
     return state;
   }
-  if (!state.composerDropEnabled) {
+  if (!composerDropEnabled) {
     return state;
   }
   if (!hasFiles) {
     return state;
   }
-  if (state.composerDropActive) {
+  if (composerDropActive) {
     return state;
   }
   return {
@@ -9245,47 +9903,92 @@ const handleDragOver = async (state, name, hasFiles = true) => {
   };
 };
 
-const handleDropFiles = async (state, name, files = []) => {
+const getDroppedFiles = async fileHandles => {
+  // TODO adjust e2e test and remove this code
+  if (fileHandles.some(item => typeof item !== 'number')) {
+    return fileHandles.map(item => {
+      return {
+        getFile() {
+          return item;
+        }
+      };
+    });
+  }
+  const actualHandles = await getFileHandles(fileHandles);
+  return actualHandles.map(item => item.value).filter(item => item.kind === 'file');
+};
+
+const handleDropFiles = async (state, name, fileHandles = []) => {
+  const droppedFileHandles = await getDroppedFiles(fileHandles);
+  const {
+    composerDropActive,
+    composerDropEnabled,
+    nextAttachmentId,
+    selectedSessionId,
+    width
+  } = state;
   if (name !== ComposerDropTarget) {
     return state;
   }
-  if (!state.composerDropEnabled) {
+  if (!composerDropEnabled) {
     return {
       ...state,
       composerDropActive: false
     };
   }
-  const nextState = state.composerDropActive === false ? state : {
+  const nextState = composerDropActive === false ? state : {
     ...state,
     composerDropActive: false
   };
-  if (!state.selectedSessionId || files.length === 0) {
+  if (!selectedSessionId || fileHandles.length === 0) {
     return nextState;
   }
   const nextAttachments = [];
-  for (const file of files) {
-    const attachmentId = crypto.randomUUID();
+  for (const droppedFileHandle of droppedFileHandles) {
+    const file = await droppedFileHandle.getFile();
+    const attachmentId = `attachment-${nextAttachmentId + nextAttachments.length}`;
+    const displayType = await getComposerAttachmentDisplayType(file, file.name, file.type);
+    const previewSrc = await getComposerAttachmentPreviewSrc(file, displayType, file.type);
+    const textContent = await getComposerAttachmentTextContent(file, displayType);
     await appendChatViewEvent({
       attachmentId,
       blob: file,
       mimeType: file.type,
       name: file.name,
-      sessionId: state.selectedSessionId,
+      sessionId: selectedSessionId,
       size: file.size,
       timestamp: new Date().toISOString(),
       type: 'chat-attachment-added'
     });
     nextAttachments.push({
       attachmentId,
-      displayType: await getComposerAttachmentDisplayType(file, file.name, file.type),
+      displayType,
       mimeType: file.type,
       name: file.name,
-      size: file.size
+      ...(previewSrc ? {
+        previewSrc
+      } : {}),
+      size: file.size,
+      ...(typeof textContent === 'string' ? {
+        textContent
+      } : {})
     });
   }
   return {
     ...nextState,
-    composerAttachments: [...nextState.composerAttachments, ...nextAttachments]
+    composerAttachments: [...nextState.composerAttachments, ...nextAttachments],
+    composerAttachmentsHeight: getComposerAttachmentsHeight([...nextState.composerAttachments, ...nextAttachments], width),
+    nextAttachmentId: nextAttachmentId + nextAttachments.length
+  };
+};
+
+const handleErrorComposerAttachmentPreviewOverlay = async state => {
+  if (!state.composerAttachmentPreviewOverlayAttachmentId || state.composerAttachmentPreviewOverlayError) {
+    return state;
+  }
+  return {
+    ...state,
+    composerAttachmentPreviewOverlayError: true
   };
 };
 
@@ -9297,9 +10000,6 @@ const handleSearchValueChange = (state, newValue) => {
 };
 
 const handleInput = async (state, name, value, inputSource = 'user') => {
-  const {
-    selectedSessionId
-  } = state;
   if (name === OpenApiApiKeyInput) {
     return {
       ...state,
@@ -9328,18 +10028,21 @@ const handleInput = async (state, name, value, inputSource = 'user') => {
   if (name !== Composer) {
     return state;
   }
-  if (selectedSessionId) {
+  if (state.selectedSessionId) {
     await appendChatViewEvent({
-      sessionId: selectedSessionId,
+      sessionId: state.selectedSessionId,
       timestamp: new Date().toISOString(),
       type: 'handle-input',
       value
     });
   }
   const composerHeight = await getComposerHeight(state, value);
+  const composerAttachmentsHeight = getComposerAttachmentsHeight(state.composerAttachments, state.width);
+  const chatInputHistoryDraft = state.chatInputHistoryIndex === -1 ? value : state.chatInputHistoryDraft;
   return {
     ...state,
-    chatInputHistoryDraft: state.chatInputHistoryIndex === -1 ? value : state.chatInputHistoryDraft,
+    chatInputHistoryDraft,
+    composerAttachmentsHeight,
     composerHeight,
     composerSelectionEnd: value.length,
     composerSelectionStart: value.length,
@@ -9395,6 +10098,18 @@ const handleInputFocus = async (state, name) => {
   };
 };
 
+const getSubmittedRenameState = (state, sessions) => {
+  return {
+    ...state,
+    composerHeight: getMinComposerHeightForState(state),
+    composerSelectionEnd: 0,
+    composerSelectionStart: 0,
+    composerValue: '',
+    inputSource: 'script',
+    renamingSessionId: '',
+    sessions
+  };
+};
 const submitRename = async state => {
   const {
     composerValue,
@@ -9408,29 +10123,24 @@ const submitRename = async state => {
       renamingSessionId: ''
     };
   }
+  const promptedTitle = sanitizeGeneratedTitle(await invoke('Main.prompt', title));
+  if (!promptedTitle) {
+    return getSubmittedRenameState(state, sessions);
+  }
   const updatedSessions = sessions.map(session => {
     if (session.id !== renamingSessionId) {
       return session;
     }
     return {
       ...session,
-      title
+      title: promptedTitle
     };
   });
   const renamedSession = updatedSessions.find(session => session.id === renamingSessionId);
   if (renamedSession) {
     await saveChatSession(renamedSession);
   }
-  return {
-    ...state,
-    composerHeight: getMinComposerHeightForState(state),
-    composerSelectionEnd: 0,
-    composerSelectionStart: 0,
-    composerValue: '',
-    inputSource: 'script',
-    renamingSessionId: '',
-    sessions: updatedSessions
-  };
+  return getSubmittedRenameState(state, updatedSessions);
 };
 
 const handleKeyDown = async (state, key, shiftKey) => {
@@ -9464,19 +10174,77 @@ const handleMissingOpenRouterApiKeyFormSubmit = async state => {
 };
 
 const handleModelChange = async (state, value) => {
+  const {
+    modelPickerHeaderHeight,
+    models
+  } = state;
   return {
     ...state,
     agentModePickerOpen: false,
-    modelPickerHeight: getModelPickerHeight(state.modelPickerHeaderHeight, state.models.length),
+    modelPickerHeight: getModelPickerHeight(modelPickerHeaderHeight, models.length),
     modelPickerListScrollTop: 0,
     modelPickerOpen: false,
     modelPickerSearchValue: '',
     reasoningEffortPickerOpen: false,
     selectedModelId: value,
-    visibleModels: state.models
+    visibleModels: models
+  };
+};
+
+const hideComposerAttachmentPreviewOverlay = async state => {
+  if (!state.composerAttachmentPreviewOverlayAttachmentId && !state.composerAttachmentPreviewOverlayError) {
+    return state;
+  }
+  return {
+    ...state,
+    composerAttachmentPreviewOverlayAttachmentId: '',
+    composerAttachmentPreviewOverlayError: false
+  };
+};
+
+const isCurrentAttachmentTarget = (name, attachmentId) => {
+  return name === getComposerAttachmentInputName(attachmentId) || isComposerAttachmentRemoveInputName(name) && getAttachmentIdFromComposerAttachmentRemoveInputName(name) === attachmentId;
+};
+const handleMouseOut = async (state, name, relatedName = '') => {
+  const {
+    composerAttachmentPreviewOverlayAttachmentId
+  } = state;
+  if (!composerAttachmentPreviewOverlayAttachmentId) {
+    return state;
+  }
+  const isLeavingOverlay = isComposerAttachmentPreviewOverlayInputName(name);
+  if (!isLeavingOverlay) {
+    return state;
+  }
+  if (isComposerAttachmentPreviewOverlayInputName(relatedName) || isCurrentAttachmentTarget(relatedName, composerAttachmentPreviewOverlayAttachmentId)) {
+    return state;
+  }
+  return hideComposerAttachmentPreviewOverlay(state);
+};
+
+const showComposerAttachmentPreviewOverlay = async (state, attachmentId) => {
+  const attachment = state.composerAttachments.find(item => item.attachmentId === attachmentId) ?? state.composerAttachments.find(item => item.displayType === 'image' && !!item.previewSrc);
+  if (!attachment || attachment.displayType !== 'image' || !attachment.previewSrc) {
+    return state;
+  }
+  if (state.composerAttachmentPreviewOverlayAttachmentId === attachmentId && !state.composerAttachmentPreviewOverlayError) {
+    return state;
+  }
+  return {
+    ...state,
+    composerAttachmentPreviewOverlayAttachmentId: attachmentId,
+    composerAttachmentPreviewOverlayError: false
   };
 };
 
+const handleMouseOver = async (state, name) => {
+  if (!isComposerAttachmentInputName(name)) {
+    return state;
+  }
+  const attachmentId = getAttachmentIdFromComposerAttachmentInputName(name);
+  return showComposerAttachmentPreviewOverlay(state, attachmentId);
+};
+
 const handleNewline = async state => {
   const {
     composerValue
@@ -9502,7 +10270,7 @@ const handleProjectAddButtonContextMenu = async (state, button, x, y) => {
   return state;
 };
 
-const getProjectIdAtIndex = (state, index) => {
+const getProjectAtIndex = (state, index) => {
   const {
     projectExpandedIds,
     projects,
@@ -9512,7 +10280,7 @@ const getProjectIdAtIndex = (state, index) => {
   let currentIndex = 0;
   for (const project of projects) {
     if (currentIndex === index) {
-      return project.id;
+      return project;
     }
     currentIndex++;
     if (projectExpandedIds.includes(project.id)) {
@@ -9522,13 +10290,13 @@ const getProjectIdAtIndex = (state, index) => {
           continue;
         }
         if (currentIndex === index) {
-          return project.id;
+          return project;
         }
         currentIndex++;
       }
     }
   }
-  return '';
+  return undefined;
 };
 const handleProjectListContextMenu = async (state, button, x, y) => {
   const {
@@ -9541,13 +10309,14 @@ const handleProjectListContextMenu = async (state, button, x, y) => {
   if (index < 0) {
     return state;
   }
-  const projectId = getProjectIdAtIndex(state, index);
-  if (!projectId) {
+  const project = getProjectAtIndex(state, index);
+  if (!project) {
     return state;
   }
   await showContextMenu2(uid, MenuChatProjectList, x, y, {
+    canRemoveProject: project.name !== '_blank',
     menuId: MenuChatProjectList,
-    projectId
+    projectId: project.id
   });
   return state;
 };
@@ -9670,6 +10439,23 @@ const getSavedChatListScrollTop = savedState => {
   return chatListScrollTop;
 };
 
+const getSavedComposerSelection = (savedState, composerValue) => {
+  if (!isObject$1(savedState)) {
+    return undefined;
+  }
+  const {
+    composerSelectionEnd,
+    composerSelectionStart
+  } = savedState;
+  if (typeof composerSelectionStart !== 'number') {
+    return undefined;
+  }
+  if (typeof composerSelectionEnd !== 'number') {
+    return undefined;
+  }
+  return getNormalizedComposerSelection(composerValue, composerSelectionStart, composerSelectionEnd);
+};
+
 const getSavedComposerValue = savedState => {
   if (!isObject$1(savedState)) {
     return undefined;
@@ -9971,6 +10757,15 @@ const loadReasoningPickerEnabled = async () => {
   }
 };
 
+const loadScrollDownButtonEnabled = async () => {
+  try {
+    const savedScrollDownButtonEnabled = await get('chatView.scrollDownButtonEnabled');
+    return typeof savedScrollDownButtonEnabled === 'boolean' ? savedScrollDownButtonEnabled : false;
+  } catch {
+    return false;
+  }
+};
+
 const loadSearchEnabled = async () => {
   try {
     const savedSearchEnabled = await get('chatView.searchEnabled');
@@ -10062,7 +10857,7 @@ const loadVoiceDictationEnabled = async () => {
 };
 
 const loadPreferences = async () => {
-  const [aiSessionTitleGenerationEnabled, authAccessToken, authEnabled, authRefreshToken, backendUrl, chatHistoryEnabled, composerDropEnabled, openApiApiKey, openRouterApiKey, emitStreamingFunctionCallEvents, reasoningPickerEnabled, searchEnabled, streamingEnabled, todoListToolEnabled, toolEnablement, passIncludeObfuscation, useChatCoordinatorWorker, useChatMathWorker, useChatMessageParsingWorker, useChatNetworkWorkerForRequests, useChatToolWorker, voiceDictationEnabled] = await Promise.all([loadAiSessionTitleGenerationEnabled(), loadBackendAccessToken(), loadAuthEnabled(), loadBackendRefreshToken(), loadBackendUrl(), loadChatHistoryEnabled(), loadComposerDropEnabled(), loadOpenApiApiKey(), loadOpenRouterApiKey(), loadEmitStreamingFunctionCallEvents(), loadReasoningPickerEnabled(), loadSearchEnabled(), loadStreamingEnabled(), loadTodoListToolEnabled(), loadToolEnablement(), loadPassIncludeObfuscation(), loadUseChatCoordinatorWorker(), loadUseChatMathWorker(), loadUseChatMessageParsingWorker(), loadUseChatNetworkWorkerForRequests(), loadUseChatToolWorker(), loadVoiceDictationEnabled()]);
+  const [aiSessionTitleGenerationEnabled, authAccessToken, authEnabled, authRefreshToken, backendUrl, chatHistoryEnabled, composerDropEnabled, openApiApiKey, openRouterApiKey, emitStreamingFunctionCallEvents, reasoningPickerEnabled, scrollDownButtonEnabled, searchEnabled, streamingEnabled, todoListToolEnabled, toolEnablement, passIncludeObfuscation, useChatCoordinatorWorker, useChatMathWorker, useChatMessageParsingWorker, useChatNetworkWorkerForRequests, useChatToolWorker, voiceDictationEnabled] = await Promise.all([loadAiSessionTitleGenerationEnabled(), loadBackendAccessToken(), loadAuthEnabled(), loadBackendRefreshToken(), loadBackendUrl(), loadChatHistoryEnabled(), loadComposerDropEnabled(), loadOpenApiApiKey(), loadOpenRouterApiKey(), loadEmitStreamingFunctionCallEvents(), loadReasoningPickerEnabled(), loadScrollDownButtonEnabled(), loadSearchEnabled(), loadStreamingEnabled(), loadTodoListToolEnabled(), loadToolEnablement(), loadPassIncludeObfuscation(), loadUseChatCoordinatorWorker(), loadUseChatMathWorker(), loadUseChatMessageParsingWorker(), loadUseChatNetworkWorkerForRequests(), loadUseChatToolWorker(), loadVoiceDictationEnabled()]);
   return {
     aiSessionTitleGenerationEnabled,
     authAccessToken,
@@ -10076,6 +10871,7 @@ const loadPreferences = async () => {
     openRouterApiKey,
     passIncludeObfuscation,
     reasoningPickerEnabled,
+    scrollDownButtonEnabled,
     searchEnabled,
     streamingEnabled,
     todoListToolEnabled,
@@ -10133,6 +10929,9 @@ const loadContent = async (state, savedState) => {
   const savedSelectedModelId = getSavedSelectedModelId(savedState);
   const savedViewMode = getSavedViewMode(savedState);
   const savedComposerValue = getSavedComposerValue(savedState);
+  const composerValue = savedComposerValue ?? state.composerValue;
+  const savedComposerSelection = getSavedComposerSelection(savedState, composerValue);
+  const [composerSelectionStart, composerSelectionEnd] = savedComposerSelection ?? [state.composerSelectionStart, state.composerSelectionEnd];
   const {
     aiSessionTitleGenerationEnabled,
     authAccessToken,
@@ -10146,6 +10945,7 @@ const loadContent = async (state, savedState) => {
     openRouterApiKey,
     passIncludeObfuscation,
     reasoningPickerEnabled,
+    scrollDownButtonEnabled,
     searchEnabled,
     streamingEnabled,
     todoListToolEnabled,
@@ -10221,9 +11021,12 @@ const loadContent = async (state, savedState) => {
     chatHistoryEnabled,
     chatListScrollTop,
     composerAttachments,
+    composerAttachmentsHeight: getComposerAttachmentsHeight(composerAttachments, state.width),
     composerDropActive: false,
     composerDropEnabled,
-    composerValue: savedComposerValue ?? state.composerValue,
+    composerSelectionEnd,
+    composerSelectionStart,
+    composerValue,
     emitStreamingFunctionCallEvents,
     initial: false,
     lastNormalViewMode,
@@ -10245,6 +11048,7 @@ const loadContent = async (state, savedState) => {
     reasoningEffortPickerOpen: false,
     reasoningPickerEnabled,
     runModePickerOpen: false,
+    scrollDownButtonEnabled,
     searchEnabled,
     searchFieldVisible: false,
     searchValue: '',
@@ -10302,7 +11106,7 @@ const mockOpenApiRequestGetAll = _state => {
 };
 
 const mockOpenApiRequestReset = state => {
-  reset$1();
+  reset$2();
   return state;
 };
 
@@ -10327,20 +11131,43 @@ const mockOpenApiStreamPushChunk = (state, chunk) => {
 };
 
 const mockOpenApiStreamReset = state => {
-  reset$2();
+  reset$1();
   return state;
 };
 
-const openMockSession = async (state, mockSessionId, mockChatMessages) => {
-  const {
-    sessions: currentSessions
-  } = state;
-  if (!mockSessionId) {
+const openMockProject = async (state, projectId, projectName, projectUri) => {
+  if (!projectId || !projectName) {
     return state;
   }
-  const parsedMessages = await parseAndStoreMessagesContentWithWorkerPreference(state.parsedMessages, mockChatMessages, state.useChatMessageParsingWorker);
-  const existingSession = currentSessions.find(session => session.id === mockSessionId);
-  const sessions = existingSession ? currentSessions.map(session => {
+  const project = {
+    id: projectId,
+    name: projectName,
+    uri: projectUri
+  };
+  const projects = state.projects.some(candidate => candidate.id === projectId) ? state.projects.map(candidate => {
+    if (candidate.id !== projectId) {
+      return candidate;
+    }
+    return project;
+  }) : [...state.projects, project];
+  return {
+    ...state,
+    projectExpandedIds: state.projectExpandedIds.includes(projectId) ? state.projectExpandedIds : [...state.projectExpandedIds, projectId],
+    projects,
+    selectedProjectId: projectId
+  };
+};
+
+const openMockSession = async (state, mockSessionId, mockChatMessages) => {
+  const {
+    sessions: currentSessions
+  } = state;
+  if (!mockSessionId) {
+    return state;
+  }
+  const parsedMessages = await parseAndStoreMessagesContentWithWorkerPreference(state.parsedMessages, mockChatMessages, state.useChatMessageParsingWorker);
+  const existingSession = currentSessions.find(session => session.id === mockSessionId);
+  const sessions = existingSession ? currentSessions.map(session => {
     if (session.id !== mockSessionId) {
       return session;
     }
@@ -10360,6 +11187,7 @@ const openMockSession = async (state, mockSessionId, mockChatMessages) => {
   return {
     ...state,
     composerAttachments: [],
+    composerAttachmentsHeight: 0,
     parsedMessages,
     renamingSessionId: '',
     selectedSessionId: mockSessionId,
@@ -10374,19 +11202,24 @@ const pasteInput = async state => {
 };
 
 const registerMockResponse = (state, mockResponse) => {
-  reset$2();
+  reset$1();
   pushChunk(mockResponse.text);
   finish();
   return state;
 };
 
-const getCss = (composerHeight, modelPickerHeight, listItemHeight, chatMessageFontSize, chatMessageLineHeight, chatMessageFontFamily, chatFocusContentMaxWidth, textAreaPaddingTop, textAreaPaddingLeft, textAreaPaddingRight, textAreaPaddingBottom, chatSendAreaPaddingTop, chatSendAreaPaddingLeft, chatSendAreaPaddingRight, chatSendAreaPaddingBottom, renderHtmlCss) => {
+const removeComposerAttachment = async (state, attachmentId) => {
+  return handleRemoveComposerAttachment(state, attachmentId);
+};
+
+const getCss = (composerHeight, composerAttachmentsHeight, modelPickerHeight, listItemHeight, chatMessageFontSize, chatMessageLineHeight, chatMessageFontFamily, chatFocusContentMaxWidth, textAreaPaddingTop, textAreaPaddingLeft, textAreaPaddingRight, textAreaPaddingBottom, chatSendAreaPaddingTop, chatSendAreaPaddingLeft, chatSendAreaPaddingRight, chatSendAreaPaddingBottom, renderHtmlCss) => {
   const buttonsHeight = 20;
   const gap = 10;
   const contentPadding = 10;
-  const chatSendAreaHeight = composerHeight + chatSendAreaPaddingTop + chatSendAreaPaddingBottom + buttonsHeight + gap + contentPadding * 2;
+  const chatSendAreaHeight = composerHeight + composerAttachmentsHeight + chatSendAreaPaddingTop + chatSendAreaPaddingBottom + buttonsHeight + gap + contentPadding * 2;
   const baseCss = `:root {
   --ChatInputBoxHeight: ${composerHeight}px;
+  --ChatComposerAttachmentsHeight: ${composerAttachmentsHeight}px;
   --ChatTextAreaHeight: ${composerHeight}px;
   --ChatSendAreaHeight: ${chatSendAreaHeight}px;
   --ChatTextAreaPaddingTop: ${textAreaPaddingTop}px;
@@ -10421,10 +11254,12 @@ const getCss = (composerHeight, modelPickerHeight, listItemHeight, chatMessageFo
 }
 
 .ChatComposerAttachment{
+  align-items: center;
+  display: inline-flex;
+  gap: 6px;
   max-width: 100%;
+  min-width: 0;
   overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   border-radius: 999px;
   border: 1px solid var(--vscode-widget-border, var(--vscode-panel-border));
   padding: 4px 10px;
@@ -10433,6 +11268,35 @@ const getCss = (composerHeight, modelPickerHeight, listItemHeight, chatMessageFo
   font-size: 12px;
 }
 
+.ChatComposerAttachmentLabel{
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ChatComposerAttachmentPreview{
+  width: 20px;
+  height: 20px;
+  flex: none;
+  border-radius: 4px;
+  object-fit: cover;
+}
+
+.ChatComposerAttachmentRemoveButton{
+  appearance: none;
+  background: transparent;
+  border: none;
+  border-radius: 999px;
+  color: inherit;
+  cursor: pointer;
+  flex-shrink: 0;
+  font: inherit;
+  line-height: 1;
+  margin: 0;
+  padding: 0;
+}
+
 .ChatComposerAttachmentImage{
   border-color: var(--vscode-charts-blue);
 }
@@ -10446,6 +11310,93 @@ const getCss = (composerHeight, modelPickerHeight, listItemHeight, chatMessageFo
   border-color: var(--vscode-charts-green, var(--vscode-widget-border, var(--vscode-panel-border)));
 }
 
+.ChatAttachments{
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.ChatAttachment{
+  align-items: center;
+  display: inline-flex;
+  gap: 6px;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  border-radius: 999px;
+  border: 1px solid var(--vscode-widget-border, var(--vscode-panel-border));
+  padding: 4px 10px;
+  background: var(--vscode-badge-background, color-mix(in srgb, var(--vscode-editor-background) 88%, white));
+  color: var(--vscode-badge-foreground, var(--vscode-foreground));
+  font-size: 12px;
+}
+
+.ChatAttachmentLabel{
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ChatAttachmentPreview{
+  width: 20px;
+  height: 20px;
+  flex: none;
+  border-radius: 4px;
+  object-fit: cover;
+}
+
+.ChatAttachmentImage{
+  border-color: var(--vscode-charts-blue);
+}
+
+.ChatAttachmentInvalidImage{
+  border-color: var(--vscode-inputValidation-errorBorder, var(--vscode-errorForeground));
+  color: var(--vscode-errorForeground, var(--vscode-foreground));
+}
+
+.ChatAttachmentTextFile{
+  border-color: var(--vscode-charts-green, var(--vscode-widget-border, var(--vscode-panel-border)));
+}
+
+.Chat{
+  position: relative;
+}
+
+.ChatComposerAttachmentPreviewOverlay{
+  position: absolute;
+  left: calc(var(--ChatSendAreaPaddingLeft) + 8px);
+  bottom: calc(var(--ChatSendAreaHeight) - 12px);
+  z-index: 6;
+  width: 240px;
+  min-width: 160px;
+  min-height: 160px;
+  max-width: calc(100% - var(--ChatSendAreaPaddingLeft) - var(--ChatSendAreaPaddingRight) - 16px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--vscode-widget-border, var(--vscode-panel-border));
+  border-radius: 12px;
+  background: var(--vscode-editorWidget-background, var(--vscode-editor-background));
+  box-shadow: 0 12px 28px color-mix(in srgb, var(--vscode-editor-background) 45%, black);
+  overflow: hidden;
+}
+
+.ChatComposerAttachmentPreviewOverlayImage{
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  max-height: min(320px, calc(100vh - 200px));
+  object-fit: contain;
+  background: color-mix(in srgb, var(--vscode-editor-background) 88%, black);
+}
+
+.ChatComposerAttachmentPreviewOverlayError{
+  padding: 12px;
+  color: var(--vscode-errorForeground, var(--vscode-foreground));
+}
+
 .CustomSelectContainer{
   position: relative;
   min-width: 0;
@@ -10457,6 +11408,20 @@ const getCss = (composerHeight, modelPickerHeight, listItemHeight, chatMessageFo
   justify-content: flex-end;
 }
 
+.ChatOverlays{
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.ChatOverlays > *{
+  pointer-events: auto;
+}
+
+.ChatViewDropOverlayActive{
+  background: rgba(255, 255, 255, 0.1);
+}
+
 .RunModePickerPopOver{
   overflow: hidden;
   border: 1px solid var(--vscode-widget-border, var(--vscode-panel-border));
@@ -10469,6 +11434,33 @@ const getCss = (composerHeight, modelPickerHeight, listItemHeight, chatMessageFo
   color: var(--vscode-textLink-foreground);
 }
 
+.ProjectListChevron{
+  display: inline-block;
+  flex: none;
+  height: 16px;
+  width: 16px;
+}
+
+.ChatOrderedListItem{
+  align-items: flex-start;
+  display: flex;
+  gap: 8px;
+}
+
+.ChatOrderedListMarker{
+  flex: none;
+  min-width: 1.5em;
+}
+
+.ChatOrderedListItemContent{
+  flex: 1;
+  min-width: 0;
+}
+
+.ChatOrderedListItemPrefix{
+  white-space: nowrap;
+}
+
 .ChatToolCalls .ChatOrderedList{
   list-style: none;
   margin: 0;
@@ -10491,6 +11483,49 @@ const getCss = (composerHeight, modelPickerHeight, listItemHeight, chatMessageFo
   min-width: 0;
 }
 
+.ChatMessages > .Message{
+  display: flex;
+}
+
+.ChatMessages > .MessageUser{
+  justify-content: flex-end;
+}
+
+.ChatMessages > .MessageAssistant{
+  justify-content: flex-start;
+}
+
+.ChatMessages > .MessageUser .ChatAttachments{
+  justify-content: flex-end;
+}
+
+.ChatFocus .ChatMessages > .Message{
+  inline-size: fit-content;
+  max-inline-size: min(100%, var(--ChatFocusContentMaxWidth));
+}
+
+.ChatFocus .ChatMessages > .Message > .ChatMessageContent{
+  max-inline-size: 100%;
+}
+
+
+.Viewlet.Chat.ChatFocus{
+  display: flex !important;
+  min-width: 0;
+}
+
+.ChatFocusMainArea{
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.ChatFocusMainArea > .ChatMessages{
+  flex: 1;
+  min-height: 0;
+}
+
 `;
   return `${baseCss}
 
@@ -10511,6 +11546,7 @@ const renderCss = (oldState, newState) => {
     chatSendAreaPaddingLeft,
     chatSendAreaPaddingRight,
     chatSendAreaPaddingTop,
+    composerAttachmentsHeight,
     composerHeight,
     listItemHeight,
     modelPickerHeight,
@@ -10523,10 +11559,11 @@ const renderCss = (oldState, newState) => {
     uid
   } = newState;
   const renderHtmlCss = getRenderHtmlCss(sessions, selectedSessionId);
-  const css = getCss(composerHeight, modelPickerHeight, listItemHeight, chatMessageFontSize, chatMessageLineHeight, chatMessageFontFamily, chatFocusContentMaxWidth, textAreaPaddingTop, textAreaPaddingLeft, textAreaPaddingRight, textAreaPaddingBottom, chatSendAreaPaddingTop, chatSendAreaPaddingLeft, chatSendAreaPaddingRight, chatSendAreaPaddingBottom, renderHtmlCss);
+  const css = getCss(composerHeight, composerAttachmentsHeight, modelPickerHeight, listItemHeight, chatMessageFontSize, chatMessageLineHeight, chatMessageFontFamily, chatFocusContentMaxWidth, textAreaPaddingTop, textAreaPaddingLeft, textAreaPaddingRight, textAreaPaddingBottom, chatSendAreaPaddingTop, chatSendAreaPaddingLeft, chatSendAreaPaddingRight, chatSendAreaPaddingBottom, renderHtmlCss);
   return [SetCss, uid, css];
 };
 
+const pickerListSelector = '.ChatOverlays .ChatModelPickerList';
 const getFocusSelector = state => {
   const {
     focus,
@@ -10552,6 +11589,8 @@ const getFocusSelector = state => {
       }
     case 'model-picker-input':
       return `[name="${ModelPickerSearch}"]`;
+    case 'picker-list':
+      return pickerListSelector;
     case 'send-button':
       return '[name="send"]';
     default:
@@ -10562,6 +11601,9 @@ const renderFocus = (oldState, newState) => {
   if (newState.modelPickerOpen && !oldState.modelPickerOpen) {
     return [FocusSelector, `[name="${ModelPickerSearch}"]`];
   }
+  if (newState.agentModePickerOpen && !oldState.agentModePickerOpen || newState.runModePickerOpen && !oldState.runModePickerOpen || newState.reasoningEffortPickerOpen && !oldState.reasoningEffortPickerOpen) {
+    return [FocusSelector, pickerListSelector];
+  }
   const selector = getFocusSelector(newState);
   return [FocusSelector, selector];
 };
@@ -10579,6 +11621,8 @@ const renderFocusContext = (oldState, newState) => {
 const HandleListContextMenu = 2;
 const HandleFocus = 3;
 const HandleInput = 4;
+const HandleMouseOut = 5;
+const HandleMouseOver = 7;
 const HandleClick = 11;
 const HandleKeyDown = 12;
 const HandleClickClose = 13;
@@ -10626,57 +11670,7 @@ const HandlePointerUpModelPickerList = 55;
 const HandleClickReasoningEffortPickerToggle = 56;
 const HandleClickAgentModePickerToggle = 57;
 const HandleContextMenuChatImageAttachment = 58;
-
-const getCustomSelectOptionVirtualDom = (name, label, selected, detail = '') => {
-  const className = mergeClassNames(ChatModelPickerItem, selected ? ChatModelPickerItemSelected : '');
-  const hasDetail = detail !== '';
-  return [{
-    childCount: 1,
-    type: Li
-  }, {
-    childCount: hasDetail ? 2 : 1,
-    className,
-    inputType: 'button',
-    name,
-    onClick: HandleClick,
-    type: Button$1
-  }, {
-    childCount: 1,
-    className: ChatModelPickerItemLabel,
-    name,
-    type: Span
-  }, text(label), ...(hasDetail ? [{
-    childCount: 1,
-    className: ChatModelPickerItemUsageCost,
-    name,
-    type: Span
-  }, text(detail)] : [])];
-};
-
-const getCustomSelectPopOverVirtualDom = (optionCount, height, optionNodes, containerClassName = '', popOverClassName = '') => {
-  return [{
-    childCount: 1,
-    className: mergeClassNames(ChatModelPickerContainer, containerClassName),
-    type: Div
-  }, {
-    childCount: 1,
-    className: mergeClassNames(ChatModelPicker, popOverClassName),
-    style: `height: ${height}px;`,
-    type: Div
-  }, {
-    childCount: optionCount,
-    className: ChatModelPickerList,
-    type: Ul
-  }, ...optionNodes];
-};
-
-const agentModePickerHeight = agentModes.length * 28;
-const getAgentModeOptionsVirtualDom = selectedAgentMode => {
-  return agentModes.flatMap(agentMode => getCustomSelectOptionVirtualDom(getAgentModePickerItemInputName(agentMode), getAgentModeLabel(agentMode), agentMode === selectedAgentMode));
-};
-const getAgentModePickerPopOverVirtualDom = selectedAgentMode => {
-  return getCustomSelectPopOverVirtualDom(agentModes.length, agentModePickerHeight, getAgentModeOptionsVirtualDom(selectedAgentMode));
-};
+const HandleErrorComposerAttachmentPreviewOverlay = 59;
 
 const getAddContextButtonDom = () => {
   return [{
@@ -10717,22 +11711,22 @@ const getCustomSelectToggleVirtualDom = (label, name, open, onClick, title = lab
   }];
 };
 
-const getAgentModePickerVirtualDom = (selectedAgentMode, agentModePickerOpen) => {
+const getCustomSelectPickerToggleVirtualDom = (label, name, open, onClick, title = label, containerChildCount = 1) => {
   return [{
-    childCount: 1,
+    childCount: containerChildCount,
     className: CustomSelectContainer,
     type: Div
-  }, ...getCustomSelectToggleVirtualDom(getAgentModeLabel(selectedAgentMode), AgentModePickerToggle, agentModePickerOpen, HandleClickAgentModePickerToggle)];
+  }, ...getCustomSelectToggleVirtualDom(label, name, open, onClick, title)];
+};
+
+const getAgentModePickerVirtualDom = (selectedAgentMode, agentModePickerOpen) => {
+  return getCustomSelectPickerToggleVirtualDom(getAgentModeLabel(selectedAgentMode), AgentModePickerToggle, agentModePickerOpen, HandleClickAgentModePickerToggle);
 };
 
 const getChatModelPickerToggleVirtualDom = (models, selectedModelId, modelPickerOpen) => {
   const selectedModel = models.find(model => model.id === selectedModelId);
   const selectedModelLabel = selectedModel ? selectedModel.name : selectedModelId;
-  return [{
-    childCount: 1,
-    className: CustomSelectContainer,
-    type: Div
-  }, ...getCustomSelectToggleVirtualDom(selectedModelLabel, ModelPickerToggle, modelPickerOpen, HandleClickModelPickerToggle)];
+  return getCustomSelectPickerToggleVirtualDom(selectedModelLabel, ModelPickerToggle, modelPickerOpen, HandleClickModelPickerToggle);
 };
 
 const getCreatePullRequestButtonDom = () => {
@@ -10750,6 +11744,32 @@ const getCreatePullRequestButtonDom = () => {
   }];
 };
 
+const getCustomSelectOptionVirtualDom = (name, label, selected, detail = '') => {
+  const className = mergeClassNames(ChatModelPickerItem, selected ? ChatModelPickerItemSelected : '');
+  const hasDetail = detail !== '';
+  return [{
+    childCount: 1,
+    type: Li
+  }, {
+    childCount: hasDetail ? 2 : 1,
+    className,
+    inputType: 'button',
+    name,
+    onClick: HandleClick,
+    type: Button$1
+  }, {
+    childCount: 1,
+    className: ChatModelPickerItemLabel,
+    name,
+    type: Span
+  }, text(label), ...(hasDetail ? [{
+    childCount: 1,
+    className: ChatModelPickerItemUsageCost,
+    name,
+    type: Span
+  }, text(detail)] : [])];
+};
+
 const reasoningEffortPickerHeight = reasoningEfforts.length * 28;
 const getReasoningEffortOptionsVirtualDom = selectedReasoningEffort => {
   return reasoningEfforts.flatMap(reasoningEffort => {
@@ -10759,11 +11779,7 @@ const getReasoningEffortOptionsVirtualDom = selectedReasoningEffort => {
   });
 };
 const getReasoningEffortPickerVirtualDom = (selectedReasoningEffort, reasoningEffortPickerOpen) => {
-  return [{
-    childCount: reasoningEffortPickerOpen ? 2 : 1,
-    className: CustomSelectContainer,
-    type: Div
-  }, ...getCustomSelectToggleVirtualDom(getReasoningEffortLabel(selectedReasoningEffort), ReasoningEffortPickerToggle, reasoningEffortPickerOpen, HandleClickReasoningEffortPickerToggle, 'Reasoning'), ...(reasoningEffortPickerOpen ? [{
+  return [...getCustomSelectPickerToggleVirtualDom(getReasoningEffortLabel(selectedReasoningEffort), ReasoningEffortPickerToggle, reasoningEffortPickerOpen, HandleClickReasoningEffortPickerToggle, 'Reasoning', reasoningEffortPickerOpen ? 2 : 1), ...(reasoningEffortPickerOpen ? [{
     childCount: 1,
     className: mergeClassNames(ChatModelPicker, CustomSelectPopOver),
     style: `height: ${reasoningEffortPickerHeight}px;`,
@@ -10771,16 +11787,29 @@ const getReasoningEffortPickerVirtualDom = (selectedReasoningEffort, reasoningEf
   }, {
     childCount: reasoningEfforts.length,
     className: ChatModelPickerList,
+    name: PickerList,
+    tabIndex: -1,
     type: Ul
   }, ...getReasoningEffortOptionsVirtualDom(selectedReasoningEffort)] : [])];
 };
 
 const getRunModePickerVirtualDom = (selectedRunMode, runModePickerOpen) => {
+  return getCustomSelectPickerToggleVirtualDom(selectedRunMode, RunModePickerToggle, runModePickerOpen, HandleClickRunModePickerToggle);
+};
+
+const getScrollDownButtonDom = () => {
   return [{
     childCount: 1,
-    className: CustomSelectContainer,
-    type: Div
-  }, ...getCustomSelectToggleVirtualDom(selectedRunMode, RunModePickerToggle, runModePickerOpen, HandleClickRunModePickerToggle)];
+    className: mergeClassNames(Button, ButtonSecondary),
+    inputType: 'button',
+    name: ScrollDown,
+    onClick: HandleClick,
+    title: scrollDown(),
+    type: Button$1
+  }, {
+    text: scrollDown(),
+    type: Text
+  }];
 };
 
 const getSendButtonClassName = isSendDisabled => {
@@ -10915,6 +11944,34 @@ const getComposerAttachmentClassName = displayType => {
       return ChatComposerAttachment;
   }
 };
+const getComposerAttachmentRemoveButtonDom = attachment => {
+  return [{
+    buttonType: 'button',
+    childCount: 1,
+    className: ChatComposerAttachmentRemoveButton,
+    name: getComposerAttachmentRemoveInputName(attachment.attachmentId),
+    onClick: HandleClick,
+    title: removeAttachment(),
+    type: Button$1
+  }, {
+    text: 'x',
+    type: Text
+  }];
+};
+const getComposerAttachmentPreviewDom = attachment => {
+  if (!attachment.previewSrc) {
+    return [];
+  }
+  return [{
+    alt: `Image preview for ${attachment.name}`,
+    childCount: 0,
+    className: ChatComposerAttachmentPreview,
+    name: getComposerAttachmentInputName(attachment.attachmentId),
+    onContextMenu: HandleContextMenuChatImageAttachment,
+    src: attachment.previewSrc,
+    type: Img
+  }];
+};
 const getComposerAttachmentsDom = composerAttachments => {
   if (composerAttachments.length === 0) {
     return [];
@@ -10923,15 +11980,28 @@ const getComposerAttachmentsDom = composerAttachments => {
     childCount: composerAttachments.length,
     className: ChatComposerAttachments,
     type: Div
-  }, ...composerAttachments.flatMap(attachment => [{
-    childCount: 1,
-    className: mergeClassNames(ChatComposerAttachment, getComposerAttachmentClassName(attachment.displayType)),
-    name: getComposerAttachmentInputName(attachment.attachmentId),
-    type: Div
-  }, {
-    text: `${getComposerAttachmentLabel(attachment.displayType)} · ${attachment.name}`,
-    type: Text
-  }])];
+  }, ...composerAttachments.flatMap(attachment => {
+    const removeButtonDom = getComposerAttachmentRemoveButtonDom(attachment);
+    const previewDom = getComposerAttachmentPreviewDom(attachment);
+    return [{
+      childCount: 1 + (removeButtonDom.length > 0 ? 1 : 0) + previewDom.length,
+      className: mergeClassNames(ChatComposerAttachment, getComposerAttachmentClassName(attachment.displayType)),
+      name: getComposerAttachmentInputName(attachment.attachmentId),
+      onMouseOut: HandleMouseOut,
+      onMouseOver: HandleMouseOver,
+      onPointerOut: HandleMouseOut,
+      onPointerOver: HandleMouseOver,
+      type: Div
+    }, ...removeButtonDom, ...previewDom, {
+      childCount: 1,
+      className: ChatComposerAttachmentLabel,
+      name: getComposerAttachmentInputName(attachment.attachmentId),
+      type: Span
+    }, {
+      text: `${getComposerAttachmentLabel(attachment.displayType)} · ${attachment.name}`,
+      type: Text
+    }];
+  })];
 };
 const getComposerTextAreaDom = () => {
   return {
@@ -10947,15 +12017,19 @@ const getComposerTextAreaDom = () => {
     type: TextArea
   };
 };
-const getChatSendAreaDom = (composerValue, composerAttachments, agentMode, agentModePickerOpen, modelPickerOpen, models, selectedModelId, reasoningPickerEnabled, reasoningEffort, reasoningEffortPickerOpen, usageOverviewEnabled, tokensUsed, tokensMax, addContextButtonEnabled, showRunMode, runMode, runModePickerOpen, todoListToolEnabled, todoListItems, showCreatePullRequestButton = false, voiceDictationEnabled = false) => {
+const getChatSendAreaDom = (composerValue, composerAttachments, agentMode, agentModePickerOpen, hasSpaceForAgentModePicker, modelPickerOpen, models, selectedModelId, reasoningPickerEnabled, reasoningEffort, reasoningEffortPickerOpen, usageOverviewEnabled, tokensUsed, tokensMax, addContextButtonEnabled, showRunMode, hasSpaceForRunModePicker, runMode, runModePickerOpen, todoListToolEnabled, todoListItems, showCreatePullRequestButton = false, voiceDictationEnabled = false, scrollDownButtonEnabled = false, messagesAutoScrollEnabled = true) => {
   const isSendDisabled = composerValue.trim() === '';
-  const bottomControlsCount = 2 + (usageOverviewEnabled ? 1 : 0) + (addContextButtonEnabled ? 1 : 0) + (showCreatePullRequestButton ? 1 : 0) + (voiceDictationEnabled ? 1 : 0);
-  const primaryControlsCount = 2 + (reasoningPickerEnabled ? 1 : 0) + (showRunMode ? 1 : 0);
+  const showAgentModePicker = hasSpaceForAgentModePicker;
+  const showResponsiveRunModePicker = showRunMode && hasSpaceForRunModePicker;
+  const showScrollDownButton = scrollDownButtonEnabled && !messagesAutoScrollEnabled;
+  const bottomControlsCount = 2 + (usageOverviewEnabled ? 1 : 0) + (addContextButtonEnabled ? 1 : 0) + (showCreatePullRequestButton ? 1 : 0) + (voiceDictationEnabled ? 1 : 0) + (showScrollDownButton ? 1 : 0);
+  const primaryControlsCount = 1 + (showAgentModePicker ? 1 : 0) + (reasoningPickerEnabled ? 1 : 0) + (showResponsiveRunModePicker ? 1 : 0);
   const hasTodoList = todoListToolEnabled && todoListItems.length > 0;
   const hasComposerAttachments = composerAttachments.length > 0;
   return [{
     childCount: 1,
     className: ChatSendArea,
+    onContextMenu: HandleContextMenuChatSendAreaBottom,
     onSubmit: HandleSubmit,
     type: Form
   }, {
@@ -10970,8 +12044,88 @@ const getChatSendAreaDom = (composerValue, composerAttachments, agentMode, agent
   }, {
     childCount: primaryControlsCount,
     className: ChatSendAreaPrimaryControls,
+    role: 'toolbar',
+    type: Div
+  }, ...(showAgentModePicker ? getAgentModePickerVirtualDom(agentMode, agentModePickerOpen) : []), ...getChatModelPickerToggleVirtualDom(models, selectedModelId, modelPickerOpen), ...(reasoningPickerEnabled ? getReasoningEffortPickerVirtualDom(reasoningEffort, reasoningEffortPickerOpen) : []), ...(showResponsiveRunModePicker ? getRunModePickerVirtualDom(runMode, runModePickerOpen) : []), ...(usageOverviewEnabled ? getUsageOverviewDom(tokensUsed, tokensMax) : []), ...(addContextButtonEnabled ? getAddContextButtonDom() : []), ...(showCreatePullRequestButton ? getCreatePullRequestButtonDom() : []), ...(showScrollDownButton ? getScrollDownButtonDom() : []), ...getSendButtonDom(isSendDisabled, voiceDictationEnabled)];
+};
+
+const focusHeaderStyle = 'align-items:center;border-bottom:1px solid var(--vscode-panel-border, transparent);display:flex;gap:12px;justify-content:space-between;padding:8px 12px;';
+const focusHeaderMetaStyle = 'align-items:baseline;display:flex;gap:8px;min-width:0;overflow:hidden;';
+const focusHeaderTitleStyle = 'margin:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;';
+const focusHeaderProjectStyle = 'overflow:hidden;text-overflow:ellipsis;white-space:nowrap;';
+const focusHeaderActionsStyle = 'display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;';
+const focusHeaderButtonStyle = 'white-space:nowrap;';
+const getFocusHeaderActionButtonDom = (label, name) => {
+  return [{
+    childCount: 1,
+    className: mergeClassNames(Button, ButtonSecondary),
+    inputType: 'button',
+    name,
+    onClick: HandleClick,
+    style: focusHeaderButtonStyle,
+    title: label,
+    type: Button$1
+  }, text(label)];
+};
+const getChatHeaderDomFocusMode = (selectedSessionTitle, selectedProjectName) => {
+  const items = [[addAction(), FocusAddAction], [openInVsCode(), FocusOpenInVsCode], [commit(), FocusCommit], [openTerminal(), FocusOpenTerminal], [showDiff(), FocusShowDiff]];
+  const hasProjectName = !!selectedProjectName;
+  return [{
+    childCount: 2,
+    className: ChatFocusHeader,
+    style: focusHeaderStyle,
+    type: Header
+  }, {
+    childCount: hasProjectName ? 2 : 1,
+    className: ChatName,
+    style: focusHeaderMetaStyle,
+    type: Div
+  }, {
+    childCount: 1,
+    className: ChatHeaderLabel,
+    style: focusHeaderTitleStyle,
+    type: H2
+  }, text(selectedSessionTitle), ...(hasProjectName ? [{
+    childCount: 1,
+    className: mergeClassNames(LabelDetail, ChatFocusProject),
+    style: focusHeaderProjectStyle,
+    type: Span
+  }, text(selectedProjectName)] : []), {
+    'aria-label': 'focus header actions',
+    childCount: items.length,
+    className: ChatFocusActions,
+    role: ToolBar,
+    style: focusHeaderActionsStyle,
+    type: Div
+  }, ...items.flatMap(([label, name]) => getFocusHeaderActionButtonDom(label, name))];
+};
+
+const getAgentModeOptionsVirtualDom = selectedAgentMode => {
+  return agentModes.flatMap(agentMode => getCustomSelectOptionVirtualDom(getAgentModePickerItemInputName(agentMode), getAgentModeLabel(agentMode), agentMode === selectedAgentMode));
+};
+
+const getCustomSelectPopOverVirtualDom = (optionCount, height, optionNodes, containerClassName = '', popOverClassName = '') => {
+  return [{
+    childCount: 1,
+    className: mergeClassNames(ChatModelPickerContainer, containerClassName),
+    type: Div
+  }, {
+    childCount: 1,
+    className: mergeClassNames(ChatModelPicker, popOverClassName),
+    style: `height: ${height}px;`,
     type: Div
-  }, ...getAgentModePickerVirtualDom(agentMode, agentModePickerOpen), ...getChatModelPickerToggleVirtualDom(models, selectedModelId, modelPickerOpen), ...(reasoningPickerEnabled ? getReasoningEffortPickerVirtualDom(reasoningEffort, reasoningEffortPickerOpen) : []), ...(showRunMode ? getRunModePickerVirtualDom(runMode, runModePickerOpen) : []), ...(usageOverviewEnabled ? getUsageOverviewDom(tokensUsed, tokensMax) : []), ...(addContextButtonEnabled ? getAddContextButtonDom() : []), ...(showCreatePullRequestButton ? getCreatePullRequestButtonDom() : []), ...getSendButtonDom(isSendDisabled, voiceDictationEnabled)];
+  }, {
+    childCount: optionCount,
+    className: ChatModelPickerList,
+    name: PickerList,
+    tabIndex: -1,
+    type: Ul
+  }, ...optionNodes];
+};
+
+const agentModePickerHeight = agentModes.length * 28;
+const getAgentModePickerPopOverVirtualDom = selectedAgentMode => {
+  return getCustomSelectPopOverVirtualDom(agentModes.length, agentModePickerHeight, getAgentModeOptionsVirtualDom(selectedAgentMode));
 };
 
 const getUsageCostLabel = model => {
@@ -11040,6 +12194,91 @@ const getChatModelPickerPopOverVirtualDom = (models, selectedModelId, modelPicke
   }, ...getModelPickerHeaderDom(modelPickerSearchValue), ...getChatModelListVirtualDom(visibleModels, selectedModelId)];
 };
 
+const getComposerAttachmentPreviewOverlayVirtualDom = (composerAttachments, attachmentId, hasError) => {
+  if (!attachmentId) {
+    return [];
+  }
+  const attachment = composerAttachments.find(item => item.attachmentId === attachmentId);
+  if (!attachment || attachment.displayType !== 'image' || !attachment.previewSrc) {
+    return [];
+  }
+  return [{
+    childCount: 1,
+    className: ChatComposerAttachmentPreviewOverlay,
+    name: ComposerAttachmentPreviewOverlay,
+    onMouseOut: HandleMouseOut,
+    onMouseOver: HandleMouseOver,
+    onPointerOut: HandleMouseOut,
+    onPointerOver: HandleMouseOver,
+    type: Div
+  }, ...(hasError ? [{
+    childCount: 1,
+    className: mergeClassNames(ChatComposerAttachmentPreviewOverlayError, ImageErrorMessage),
+    name: ComposerAttachmentPreviewOverlay,
+    type: Div
+  }, {
+    text: imageCouldNotBeLoaded(),
+    type: Text
+  }] : [{
+    alt: `Large image preview for ${attachment.name}`,
+    childCount: 0,
+    className: ChatComposerAttachmentPreviewOverlayImage,
+    name: ComposerAttachmentPreviewOverlay,
+    onError: HandleErrorComposerAttachmentPreviewOverlay,
+    src: attachment.previewSrc,
+    type: Img
+  }])];
+};
+
+const runModes = ['local', 'background', 'cloud'];
+const runModePickerHeight = runModes.length * 28;
+const getRunModeOptionsVirtualDom = selectedRunMode => {
+  return runModes.flatMap(runMode => getCustomSelectOptionVirtualDom(getRunModePickerItemInputName(runMode), runMode, runMode === selectedRunMode));
+};
+const getRunModePickerPopOverVirtualDom = selectedRunMode => {
+  return getCustomSelectPopOverVirtualDom(runModes.length, runModePickerHeight, getRunModeOptionsVirtualDom(selectedRunMode), RunModePickerContainer, RunModePickerPopOver);
+};
+
+const getDropOverlayVirtualDom = () => {
+  return [{
+    childCount: 1,
+    className: mergeClassNames(ChatViewDropOverlay, ChatViewDropOverlayActive),
+    name: ComposerDropTarget,
+    onDragLeave: HandleDragLeave,
+    onDragOver: HandleDragOver,
+    onDrop: HandleDrop,
+    type: Div
+  }, {
+    text: attachImageAsContext(),
+    type: Text
+  }];
+};
+const getChatOverlaysVirtualDom = ({
+  agentMode,
+  agentModePickerVisible,
+  composerAttachmentPreviewOverlayAttachmentId,
+  composerAttachmentPreviewOverlayError,
+  composerAttachmentPreviewOverlayVisible,
+  composerAttachments,
+  dropOverlayVisible,
+  modelPickerSearchValue,
+  modelPickerVisible,
+  runMode,
+  runModePickerVisible,
+  selectedModelId,
+  visibleModels
+}) => {
+  const overlayChildCount = (dropOverlayVisible ? 1 : 0) + (composerAttachmentPreviewOverlayVisible ? 1 : 0) + (agentModePickerVisible ? 1 : 0) + (modelPickerVisible ? 1 : 0) + (runModePickerVisible ? 1 : 0);
+  if (!overlayChildCount) {
+    return [];
+  }
+  return [{
+    childCount: overlayChildCount,
+    className: ChatOverlays,
+    type: Div
+  }, ...(dropOverlayVisible ? getDropOverlayVirtualDom() : []), ...getComposerAttachmentPreviewOverlayVirtualDom(composerAttachments, composerAttachmentPreviewOverlayAttachmentId, composerAttachmentPreviewOverlayError), ...(agentModePickerVisible ? getAgentModePickerPopOverVirtualDom(agentMode) : []), ...(modelPickerVisible ? getChatModelPickerPopOverVirtualDom(visibleModels, selectedModelId, modelPickerSearchValue) : []), ...(runModePickerVisible ? getRunModePickerPopOverVirtualDom(runMode) : [])];
+};
+
 const getBoldInlineNodeDom = (inlineNode, useChatMathWorker, renderInlineNodeDom) => {
   return [{
     childCount: inlineNode.children.length,
@@ -11170,12 +12409,17 @@ const getTokenDom = token => {
 
 const getCodeBlockDom = node => {
   const tokenDom = node.codeTokens.flatMap(getTokenDom);
+  const languageAttribute = node.language ? {
+    'data-lang': node.language
+  } : {};
   return [{
     childCount: 1,
-    type: Pre
+    type: Pre,
+    ...languageAttribute
   }, {
     childCount: node.codeTokens.length,
-    type: Code
+    type: Code,
+    ...languageAttribute
   }, ...tokenDom];
 };
 
@@ -11203,24 +12447,69 @@ const getHeadingDom = (node, useChatMathWorker) => {
   }, ...node.children.flatMap(child => getInlineNodeDom(child, useChatMathWorker))];
 };
 
+const leadingPunctuationRegex = /^([:;,.!?]+)([\s\S]*)$/;
+const splitLeadingPunctuation = children => {
+  const [firstChild, secondChild, ...restChildren] = children;
+  if (firstChild?.type !== 'bold' || secondChild?.type !== 'text') {
+    return {
+      prefixChildren: [],
+      remainingChildren: children
+    };
+  }
+  const match = secondChild.text.match(leadingPunctuationRegex);
+  if (!match) {
+    return {
+      prefixChildren: [],
+      remainingChildren: children
+    };
+  }
+  const [, punctuation, remainingText] = match;
+  const nextChildren = restChildren;
+  if (remainingText) {
+    nextChildren.unshift({
+      text: remainingText,
+      type: 'text'
+    });
+  }
+  return {
+    prefixChildren: [firstChild, {
+      text: punctuation,
+      type: 'text'
+    }],
+    remainingChildren: nextChildren
+  };
+};
 const getOrderedListItemDom = (item, useChatMathWorker, fallbackIndex, recurseOrdered, recurseUnordered) => {
   const hasNestedList = (item.nestedItems?.length || 0) > 0;
   const nestedListType = item.nestedListType || 'unordered-list';
+  const {
+    prefixChildren,
+    remainingChildren
+  } = splitLeadingPunctuation(item.children);
   const nestedListDom = hasNestedList ? [{
     childCount: item.nestedItems?.length || 0,
     className: nestedListType === 'ordered-list' ? ChatOrderedList : ChatUnorderedList,
     type: nestedListType === 'ordered-list' ? Ol : Ul
   }, ...(item.nestedItems || []).flatMap((nestedItem, index) => nestedListType === 'ordered-list' ? recurseOrdered(nestedItem, useChatMathWorker, index + 1) : recurseUnordered(nestedItem, useChatMathWorker))] : [];
   const marker = `${item.index ?? fallbackIndex}.`;
+  const prefixDom = prefixChildren.length === 0 ? [] : [{
+    childCount: prefixChildren.length,
+    className: ChatOrderedListItemPrefix,
+    type: Span
+  }, ...prefixChildren.flatMap(child => getInlineNodeDom(child, useChatMathWorker))];
   return [{
-    childCount: item.children.length + (hasNestedList ? 1 : 0) + 1,
+    childCount: 2,
     className: ChatOrderedListItem,
     type: Li
   }, {
     childCount: 1,
     className: ChatOrderedListMarker,
     type: Span
-  }, text(marker), ...item.children.flatMap(child => getInlineNodeDom(child, useChatMathWorker)), ...nestedListDom];
+  }, text(marker), {
+    childCount: (prefixDom.length === 0 ? 0 : 1) + remainingChildren.length + (hasNestedList ? 1 : 0),
+    className: ChatOrderedListItemContent,
+    type: Div
+  }, ...prefixDom, ...remainingChildren.flatMap(child => getInlineNodeDom(child, useChatMathWorker)), ...nestedListDom];
 };
 
 const getTableHeadCellDom = (cell, useChatMathWorker) => {
@@ -11623,11 +12912,22 @@ const getReadFileTarget = rawArguments => {
   };
 };
 
-const getToolCallFileNameDom = (fileName, fileNameClickableProps = {}) => {
+const getToolCallFileNameDom = (fileName, {
+  clickableProps = {},
+  title
+} = {}) => {
   return [{
+    childCount: 1,
+    className: ChatToolCallReadFileLink,
+    ...(title === undefined ? {} : {
+      title
+    }),
+    ...clickableProps,
+    type: Span
+  }, {
     childCount: 1,
     className: ChatToolCallFileName,
-    ...fileNameClickableProps,
+    ...clickableProps,
     type: Span
   }, text(fileName)];
 };
@@ -11656,75 +12956,9 @@ const getToolCallCreateDirectoryVirtualDom = toolCall => {
     childCount: 1,
     className: ToolCallName,
     type: Span
-  }, text('create_directory '), {
-    childCount: 1,
-    className: ChatToolCallReadFileLink,
-    ...fileNameClickableProps,
-    type: Span
-  }, ...getToolCallFileNameDom(directoryName, fileNameClickableProps), ...(statusLabel ? [text(statusLabel)] : [])];
-};
-
-const getToolCallEditFileVirtualDom = toolCall => {
-  const target = getReadFileTarget(toolCall.arguments);
-  if (!target) {
-    return [];
-  }
-  const fileName = getFileNameFromUri(target.title);
-  const fileNameClickableProps = target.clickableUri ? {
-    'data-uri': target.clickableUri,
-    onClick: HandleClickFileName
-  } : {};
-  return [{
-    childCount: 3,
-    className: ChatOrderedListItem,
-    title: target.title,
-    type: Li
-  }, {
-    childCount: 0,
-    className: FileIcon,
-    type: Div
-  }, {
-    childCount: 1,
-    className: ToolCallName,
-    type: Span
-  }, text('edit_file '), {
-    childCount: 1,
-    className: ChatToolCallReadFileLink,
-    title: target.clickableUri,
-    ...fileNameClickableProps,
-    type: Span
-  }, ...getToolCallFileNameDom(fileName, fileNameClickableProps)];
-};
-
-const getToolCallGetWorkspaceUriVirtualDom = toolCall => {
-  if (!toolCall.result) {
-    return [];
-  }
-  const statusLabel = getToolCallStatusLabel(toolCall);
-  const fileName = getFileNameFromUri(toolCall.result);
-  const fileNameClickableProps = {
-    'data-uri': toolCall.result,
-    onClick: HandleClickFileName
-  };
-  return [{
-    childCount: statusLabel ? 4 : 3,
-    className: ChatOrderedListItem,
-    title: toolCall.result,
-    type: Li
-  }, {
-    childCount: 0,
-    className: FileIcon,
-    type: Div
-  }, {
-    childCount: 1,
-    className: ToolCallName,
-    type: Span
-  }, text('get_workspace_uri '), {
-    childCount: 1,
-    className: ChatToolCallReadFileLink,
-    ...fileNameClickableProps,
-    type: Span
-  }, ...getToolCallFileNameDom(fileName, fileNameClickableProps), ...(statusLabel ? [text(statusLabel)] : [])];
+  }, text('create_directory '), ...getToolCallFileNameDom(directoryName, {
+    clickableProps: fileNameClickableProps
+  }), ...(statusLabel ? [text(statusLabel)] : [])];
 };
 
 const getToolCallArgumentPreview = rawArguments => {
@@ -11785,20 +13019,99 @@ const hasIncompleteJsonArguments = rawArguments => {
   }
 };
 
-const getToolCallLabel = toolCall => {
-  const displayName = getToolCallDisplayName(toolCall.name);
-  if (toolCall.name === 'write_file' && !toolCall.status && hasIncompleteJsonArguments(toolCall.arguments)) {
-    return `${displayName} (in progress)`;
+const getToolCallLabel = toolCall => {
+  const displayName = getToolCallDisplayName(toolCall.name);
+  if (toolCall.name === 'write_file' && !toolCall.status && hasIncompleteJsonArguments(toolCall.arguments)) {
+    return `${displayName} (in progress)`;
+  }
+  if ((toolCall.name === 'list_files' || toolCall.name === 'grep_search') && !toolCall.status && hasIncompleteJsonArguments(toolCall.arguments)) {
+    return displayName;
+  }
+  const argumentPreview = getToolCallArgumentPreview(toolCall.arguments);
+  const statusLabel = getToolCallStatusLabel(toolCall);
+  if (argumentPreview === '{}') {
+    return `${displayName}${statusLabel}`;
+  }
+  return `${displayName} ${argumentPreview}${statusLabel}`;
+};
+
+const RE_TOOL_NAME_PREFIX = /^([^ :]+)/;
+const getToolCallDefaultDom = toolCall => {
+  const label = getToolCallLabel(toolCall);
+  const match = RE_TOOL_NAME_PREFIX.exec(label);
+  const toolNamePrefix = match ? match[1] : label;
+  const suffix = label.slice(toolNamePrefix.length);
+  const hasSuffix = suffix.length > 0;
+  const hoverTitle = hasSuffix && toolCall.arguments.trim() ? toolCall.arguments : undefined;
+  return [{
+    childCount: hasSuffix ? 2 : 1,
+    className: ChatOrderedListItem,
+    ...(hoverTitle ? {
+      title: hoverTitle
+    } : {}),
+    type: Li
+  }, {
+    childCount: 1,
+    className: ToolCallName,
+    type: Span
+  }, text(toolNamePrefix), ...(hasSuffix ? [text(suffix)] : [])];
+};
+
+const getToolCallEditFileVirtualDom = toolCall => {
+  const target = getReadFileTarget(toolCall.arguments);
+  if (!target) {
+    return [];
   }
-  if ((toolCall.name === 'list_files' || toolCall.name === 'grep_search') && !toolCall.status && hasIncompleteJsonArguments(toolCall.arguments)) {
-    return displayName;
+  const fileName = getFileNameFromUri(target.title);
+  const fileNameClickableProps = target.clickableUri ? {
+    'data-uri': target.clickableUri,
+    onClick: HandleClickFileName
+  } : {};
+  return [{
+    childCount: 3,
+    className: ChatOrderedListItem,
+    title: target.title,
+    type: Li
+  }, {
+    childCount: 0,
+    className: FileIcon,
+    type: Div
+  }, {
+    childCount: 1,
+    className: ToolCallName,
+    type: Span
+  }, text('edit_file '), ...getToolCallFileNameDom(fileName, {
+    clickableProps: fileNameClickableProps,
+    title: target.clickableUri
+  })];
+};
+
+const getToolCallGetWorkspaceUriVirtualDom = toolCall => {
+  if (!toolCall.result) {
+    return [];
   }
-  const argumentPreview = getToolCallArgumentPreview(toolCall.arguments);
   const statusLabel = getToolCallStatusLabel(toolCall);
-  if (argumentPreview === '{}') {
-    return `${displayName}${statusLabel}`;
-  }
-  return `${displayName} ${argumentPreview}${statusLabel}`;
+  const fileName = getFileNameFromUri(toolCall.result);
+  const fileNameClickableProps = {
+    'data-uri': toolCall.result,
+    onClick: HandleClickFileName
+  };
+  return [{
+    childCount: statusLabel ? 4 : 3,
+    className: ChatOrderedListItem,
+    title: toolCall.result,
+    type: Li
+  }, {
+    childCount: 0,
+    className: FileIcon,
+    type: Div
+  }, {
+    childCount: 1,
+    className: ToolCallName,
+    type: Span
+  }, text('get_workspace_uri '), ...getToolCallFileNameDom(fileName, {
+    clickableProps: fileNameClickableProps
+  }), ...(statusLabel ? [text(statusLabel)] : [])];
 };
 
 const getToolCallReadFileVirtualDom = toolCall => {
@@ -11826,12 +13139,9 @@ const getToolCallReadFileVirtualDom = toolCall => {
     childCount: 1,
     className: ToolCallName,
     type: Span
-  }, text(toolNameLabel), {
-    childCount: 1,
-    className: ChatToolCallReadFileLink,
-    ...fileNameClickableProps,
-    type: Span
-  }, ...getToolCallFileNameDom(fileName, fileNameClickableProps), ...(statusLabel ? [text(statusLabel)] : [])];
+  }, text(toolNameLabel), ...getToolCallFileNameDom(fileName, {
+    clickableProps: fileNameClickableProps
+  }), ...(statusLabel ? [text(statusLabel)] : [])];
 };
 
 const maxHtmlLength = 40_000;
@@ -12208,12 +13518,9 @@ const getToolCallWriteFileVirtualDom = toolCall => {
     childCount: 1,
     className: ToolCallName,
     type: Span
-  }, text('write_file '), {
-    childCount: 1,
-    className: ChatToolCallReadFileLink,
-    ...fileNameClickableProps,
-    type: Span
-  }, ...getToolCallFileNameDom(fileName, fileNameClickableProps), ...(showDiffStats ? [{
+  }, text('write_file '), ...getToolCallFileNameDom(fileName, {
+    clickableProps: fileNameClickableProps
+  }), ...(showDiffStats ? [{
     childCount: 1,
     className: Insertion,
     type: Span
@@ -12224,7 +13531,6 @@ const getToolCallWriteFileVirtualDom = toolCall => {
   }, text(` -${linesDeleted}`)] : []), ...(statusLabel ? [text(statusLabel)] : [])];
 };
 
-const RE_TOOL_NAME_PREFIX = /^([^ :]+)/;
 const getToolCallDom = toolCall => {
   if (toolCall.name === 'getWorkspaceUri') {
     const virtualDom = getToolCallGetWorkspaceUriVirtualDom(toolCall);
@@ -12268,24 +13574,7 @@ const getToolCallDom = toolCall => {
       return virtualDom;
     }
   }
-  const label = getToolCallLabel(toolCall);
-  const match = RE_TOOL_NAME_PREFIX.exec(label);
-  const toolNamePrefix = match ? match[1] : label;
-  const suffix = label.slice(toolNamePrefix.length);
-  const hasSuffix = suffix.length > 0;
-  const hoverTitle = hasSuffix && toolCall.arguments.trim() ? toolCall.arguments : undefined;
-  return [{
-    childCount: hasSuffix ? 2 : 1,
-    className: ChatOrderedListItem,
-    ...(hoverTitle ? {
-      title: hoverTitle
-    } : {}),
-    type: Li
-  }, {
-    childCount: 1,
-    className: ToolCallName,
-    type: Span
-  }, text(toolNamePrefix), ...(hasSuffix ? [text(suffix)] : [])];
+  return getToolCallDefaultDom(toolCall);
 };
 
 const withOrderedListMarker = (virtualDom, index) => {
@@ -12343,6 +13632,70 @@ const getTopLevelNodeCount = nodes => {
   return topLevelCount;
 };
 
+const getChatAttachmentLabel = displayType => {
+  switch (displayType) {
+    case 'file':
+      return 'File';
+    case 'image':
+      return 'Image';
+    case 'invalid-image':
+      return 'Invalid image';
+    case 'text-file':
+      return 'Text file';
+    default:
+      return displayType;
+  }
+};
+const getChatAttachmentClassName = displayType => {
+  switch (displayType) {
+    case 'file':
+      return ChatAttachment;
+    case 'image':
+      return ChatAttachmentImage;
+    case 'invalid-image':
+      return ChatAttachmentInvalidImage;
+    case 'text-file':
+      return ChatAttachmentTextFile;
+    default:
+      return ChatAttachment;
+  }
+};
+const getChatAttachmentPreviewDom = attachment => {
+  if (!attachment.previewSrc) {
+    return [];
+  }
+  return [{
+    alt: `Attachment preview for ${attachment.name}`,
+    childCount: 0,
+    className: ChatAttachmentPreview,
+    src: attachment.previewSrc,
+    type: Img
+  }];
+};
+const getChatAttachmentsDom = attachments => {
+  if (attachments.length === 0) {
+    return [];
+  }
+  return [{
+    childCount: attachments.length,
+    className: ChatAttachments,
+    type: Div
+  }, ...attachments.flatMap(attachment => {
+    const previewDom = getChatAttachmentPreviewDom(attachment);
+    return [{
+      childCount: 1 + previewDom.length,
+      className: mergeClassNames(ChatAttachment, getChatAttachmentClassName(attachment.displayType)),
+      type: Div
+    }, ...previewDom, {
+      childCount: 1,
+      className: ChatAttachmentLabel,
+      type: Span
+    }, {
+      text: `${getChatAttachmentLabel(attachment.displayType)} · ${attachment.name}`,
+      type: Text
+    }];
+  })];
+};
 const getChatMessageDom = (message, parsedMessageContent, _openRouterApiKeyInput, _openApiApiKeyInput = '', openApiApiKeyState = 'idle', openApiApiKeysSettingsUrl = 'https://platform.openai.com/api-keys', openApiApiKeyInputPattern = '^sk-.+', openRouterApiKeyState = 'idle', useChatMathWorker = false) => {
   const roleClassName = message.role === 'user' ? MessageUser : MessageAssistant;
   const isOpenApiApiKeyMissingMessage = message.role === 'assistant' && message.text === openApiApiKeyRequiredMessage;
@@ -12350,10 +13703,12 @@ const getChatMessageDom = (message, parsedMessageContent, _openRouterApiKeyInput
   const isOpenRouterRequestFailedMessage = message.role === 'assistant' && message.text === openRouterRequestFailedMessage;
   const isOpenRouterTooManyRequestsMessage = message.role === 'assistant' && message.text.startsWith(openRouterTooManyRequestsMessage);
   const messageDom = getMessageContentDom(parsedMessageContent, useChatMathWorker);
+  const attachmentsDom = message.role === 'user' ? getChatAttachmentsDom(message.attachments ?? []) : [];
   const toolCallsDom = getToolCallsDom(message);
   const toolCallsChildCount = toolCallsDom.length > 0 ? 1 : 0;
   const messageDomChildCount = getTopLevelNodeCount(messageDom);
-  const extraChildCount = isOpenApiApiKeyMissingMessage || isOpenRouterApiKeyMissingMessage || isOpenRouterRequestFailedMessage || isOpenRouterTooManyRequestsMessage ? messageDomChildCount + 1 + toolCallsChildCount : messageDomChildCount + toolCallsChildCount;
+  const attachmentsChildCount = attachmentsDom.length > 0 ? 1 : 0;
+  const extraChildCount = isOpenApiApiKeyMissingMessage || isOpenRouterApiKeyMissingMessage || isOpenRouterRequestFailedMessage || isOpenRouterTooManyRequestsMessage ? messageDomChildCount + 1 + toolCallsChildCount + attachmentsChildCount : messageDomChildCount + toolCallsChildCount + attachmentsChildCount;
   return [{
     childCount: 1,
     className: mergeClassNames(Message, roleClassName),
@@ -12362,7 +13717,7 @@ const getChatMessageDom = (message, parsedMessageContent, _openRouterApiKeyInput
     childCount: extraChildCount,
     className: ChatMessageContent,
     type: Div
-  }, ...toolCallsDom, ...messageDom, ...(isOpenApiApiKeyMissingMessage ? getMissingOpenApiApiKeyDom(openApiApiKeyState, openApiApiKeysSettingsUrl, openApiApiKeyInputPattern) : []), ...(isOpenRouterApiKeyMissingMessage ? getMissingOpenRouterApiKeyDom(openRouterApiKeyState) : []), ...(isOpenRouterRequestFailedMessage ? getOpenRouterRequestFailedDom() : []), ...(isOpenRouterTooManyRequestsMessage ? getOpenRouterTooManyRequestsDom() : [])];
+  }, ...toolCallsDom, ...messageDom, ...attachmentsDom, ...(isOpenApiApiKeyMissingMessage ? getMissingOpenApiApiKeyDom(openApiApiKeyState, openApiApiKeysSettingsUrl, openApiApiKeyInputPattern) : []), ...(isOpenRouterApiKeyMissingMessage ? getMissingOpenRouterApiKeyDom(openRouterApiKeyState) : []), ...(isOpenRouterRequestFailedMessage ? getOpenRouterRequestFailedDom() : []), ...(isOpenRouterTooManyRequestsMessage ? getOpenRouterTooManyRequestsDom() : [])];
 };
 
 const parentNode$1 = {
@@ -12418,7 +13773,18 @@ const getDisplayMessages = (messages, parsedMessages) => {
 };
 const getMessagesDom = (messages, parsedMessages, openRouterApiKeyInput, openApiApiKeyInput = '', openApiApiKeyState = 'idle', openApiApiKeysSettingsUrl = 'https://platform.openai.com/api-keys', openApiApiKeyInputPattern = '^sk-.+', openRouterApiKeyState = 'idle', messagesScrollTop = 0, useChatMathWorker = false, hideWelcomeMessage = false) => {
   if (messages.length === 0) {
-    return hideWelcomeMessage ? [] : getEmptyMessagesDom();
+    if (!hideWelcomeMessage) {
+      return getEmptyMessagesDom();
+    }
+    return [{
+      childCount: 0,
+      className: 'ChatMessages',
+      onContextMenu: HandleMessagesContextMenu,
+      onScroll: HandleMessagesScroll,
+      role: 'log',
+      scrollTop: messagesScrollTop,
+      type: Div
+    }];
   }
   const displayMessages = getDisplayMessages(messages, parsedMessages);
   return [{
@@ -12426,24 +13792,26 @@ const getMessagesDom = (messages, parsedMessages, openRouterApiKeyInput, openApi
     className: 'ChatMessages',
     onContextMenu: HandleMessagesContextMenu,
     onScroll: HandleMessagesScroll,
+    role: 'log',
     scrollTop: messagesScrollTop,
     type: Div
   }, ...displayMessages.flatMap(item => getChatMessageDom(item.message, item.parsedContent, openRouterApiKeyInput, openApiApiKeyInput, openApiApiKeyState, openApiApiKeysSettingsUrl, openApiApiKeyInputPattern, openRouterApiKeyState, useChatMathWorker))];
 };
 
+const arrowLeft$1 = {
+  childCount: 0,
+  className: mergeClassNames(MaskIcon, MaskIconArrowLeft),
+  type: Div
+};
 const getBackToChatsButtonDom = () => {
   return [{
     childCount: 1,
-    className: mergeClassNames(Button, ButtonSecondary),
-    inputType: 'button',
+    className: IconButton,
     name: Back,
     onClick: HandleClickBack,
     title: backToChatList(),
     type: Button$1
-  }, {
-    text: backToChatList(),
-    type: Text
-  }];
+  }, arrowLeft$1];
 };
 
 const getProjectSessionDom = (session, selectedSessionId) => {
@@ -12483,10 +13851,10 @@ const getProjectGroupDom = (project, sessions, projectExpandedIds, selectedProje
     tabIndex: 0,
     type: Div
   }, {
-    childCount: 1,
-    className: ProjectListChevron,
-    type: Span
-  }, text(expanded ? '▾' : '▸'), {
+    childCount: 0,
+    className: mergeClassNames(ProjectListChevron, MaskIcon, expanded ? MaskIconChevronDown : MaskIconChevronRight),
+    type: Div
+  }, {
     childCount: 0,
     className: 'MaskIcon MaskIconFolder',
     type: Div
@@ -12535,15 +13903,6 @@ const getProjectListDom = (projects, sessions, projectExpandedIds, selectedProje
   }, text('+ Add Project'), ...(showBackToChatsButton ? getBackToChatsButtonDom() : [])];
 };
 
-const runModes = ['local', 'background', 'cloud'];
-const runModePickerHeight = runModes.length * 28;
-const getRunModeOptionsVirtualDom = selectedRunMode => {
-  return runModes.flatMap(runMode => getCustomSelectOptionVirtualDom(getRunModePickerItemInputName(runMode), runMode, runMode === selectedRunMode));
-};
-const getRunModePickerPopOverVirtualDom = selectedRunMode => {
-  return getCustomSelectPopOverVirtualDom(runModes.length, runModePickerHeight, getRunModeOptionsVirtualDom(selectedRunMode), RunModePickerContainer, RunModePickerPopOver);
-};
-
 const getChatModeChatFocusVirtualDom = ({
   addContextButtonEnabled,
   agentMode,
@@ -12551,6 +13910,8 @@ const getChatModeChatFocusVirtualDom = ({
   authEnabled = false,
   authErrorMessage = '',
   authStatus = 'signed-out',
+  composerAttachmentPreviewOverlayAttachmentId,
+  composerAttachmentPreviewOverlayError = false,
   composerAttachments,
   composerDropActive = false,
   composerDropEnabled = true,
@@ -12559,6 +13920,9 @@ const getChatModeChatFocusVirtualDom = ({
   composerHeight = 28,
   composerLineHeight = 20,
   composerValue,
+  hasSpaceForAgentModePicker,
+  hasSpaceForRunModePicker,
+  messagesAutoScrollEnabled,
   messagesScrollTop = 0,
   modelPickerOpen = false,
   modelPickerSearchValue = '',
@@ -12578,6 +13942,7 @@ const getChatModeChatFocusVirtualDom = ({
   reasoningPickerEnabled,
   runMode,
   runModePickerOpen = false,
+  scrollDownButtonEnabled,
   selectedModelId,
   selectedProjectId = '',
   selectedSessionId,
@@ -12593,31 +13958,43 @@ const getChatModeChatFocusVirtualDom = ({
   voiceDictationEnabled = false
 }) => {
   const selectedSession = sessions.find(session => session.id === selectedSessionId);
+  const selectedProject = projects.find(project => project.id === selectedProjectId);
   const messages = selectedSession ? selectedSession.messages : [];
+  const selectedSessionTitle = selectedSession?.title || chatTitle();
+  const selectedProjectName = selectedProject?.name || '';
   const showCreatePullRequestButton = canCreatePullRequest(selectedSession);
   const isDropOverlayVisible = composerDropEnabled && composerDropActive;
-  const isAgentModePickerVisible = agentModePickerOpen;
+  const isComposerAttachmentPreviewOverlayVisible = !!composerAttachmentPreviewOverlayAttachmentId;
+  const isAgentModePickerVisible = hasSpaceForAgentModePicker && agentModePickerOpen;
   const isNewModelPickerVisible = modelPickerOpen;
-  const isRunModePickerVisible = showRunMode && runModePickerOpen;
-  const chatRootChildCount = 3 + (isDropOverlayVisible ? 1 : 0) + (isAgentModePickerVisible ? 1 : 0) + (isNewModelPickerVisible ? 1 : 0) + (isRunModePickerVisible ? 1 : 0);
+  const isRunModePickerVisible = showRunMode && hasSpaceForRunModePicker && runModePickerOpen;
+  const hasVisibleOverlays = isDropOverlayVisible || isComposerAttachmentPreviewOverlayVisible || isAgentModePickerVisible || isNewModelPickerVisible || isRunModePickerVisible;
+  const chatRootChildCount = 2 + (hasVisibleOverlays ? 1 : 0);
   return [{
     childCount: chatRootChildCount,
     className: mergeClassNames(Viewlet, Chat, ChatFocus),
     onDragEnter: HandleDragEnterChatView,
     onDragOver: HandleDragOverChatView,
     type: Div
-  }, ...getProjectListDom(projects, sessions, projectExpandedIds, selectedProjectId, selectedSessionId, projectListScrollTop, true), ...getMessagesDom(messages, parsedMessages, openRouterApiKeyInput, openApiApiKeyInput, openApiApiKeyState, openApiApiKeysSettingsUrl, openApiApiKeyInputPattern, openRouterApiKeyState, messagesScrollTop, useChatMathWorker, true), ...getChatSendAreaDom(composerValue, composerAttachments, agentMode, agentModePickerOpen, modelPickerOpen, models, selectedModelId, reasoningPickerEnabled, reasoningEffort, reasoningEffortPickerOpen, usageOverviewEnabled, tokensUsed, tokensMax, addContextButtonEnabled, showRunMode, runMode, runModePickerOpen, todoListToolEnabled, todoListItems, showCreatePullRequestButton, voiceDictationEnabled), ...(isDropOverlayVisible ? [{
-    childCount: 1,
-    className: mergeClassNames(ChatViewDropOverlay, ChatViewDropOverlayActive),
-    name: ComposerDropTarget,
-    onDragLeave: HandleDragLeave,
-    onDragOver: HandleDragOver,
-    onDrop: HandleDrop,
+  }, ...getProjectListDom(projects, sessions, projectExpandedIds, selectedProjectId, selectedSessionId, projectListScrollTop, true), {
+    childCount: 3,
+    className: ChatFocusMainArea,
     type: Div
-  }, {
-    text: attachImageAsContext(),
-    type: Text
-  }] : []), ...(isAgentModePickerVisible ? getAgentModePickerPopOverVirtualDom(agentMode) : []), ...(isNewModelPickerVisible ? getChatModelPickerPopOverVirtualDom(visibleModels, selectedModelId, modelPickerSearchValue) : []), ...(isRunModePickerVisible ? getRunModePickerPopOverVirtualDom(runMode) : [])];
+  }, ...getChatHeaderDomFocusMode(selectedSessionTitle, selectedProjectName), ...getMessagesDom(messages, parsedMessages, openRouterApiKeyInput, openApiApiKeyInput, openApiApiKeyState, openApiApiKeysSettingsUrl, openApiApiKeyInputPattern, openRouterApiKeyState, messagesScrollTop, useChatMathWorker, true), ...getChatSendAreaDom(composerValue, composerAttachments, agentMode, agentModePickerOpen, hasSpaceForAgentModePicker, modelPickerOpen, models, selectedModelId, reasoningPickerEnabled, reasoningEffort, reasoningEffortPickerOpen, usageOverviewEnabled, tokensUsed, tokensMax, addContextButtonEnabled, showRunMode, hasSpaceForRunModePicker, runMode, runModePickerOpen, todoListToolEnabled, todoListItems, showCreatePullRequestButton, voiceDictationEnabled, scrollDownButtonEnabled, messagesAutoScrollEnabled), ...getChatOverlaysVirtualDom({
+    agentMode,
+    agentModePickerVisible: isAgentModePickerVisible,
+    composerAttachmentPreviewOverlayAttachmentId,
+    composerAttachmentPreviewOverlayError,
+    composerAttachmentPreviewOverlayVisible: isComposerAttachmentPreviewOverlayVisible,
+    composerAttachments,
+    dropOverlayVisible: isDropOverlayVisible,
+    modelPickerSearchValue,
+    modelPickerVisible: isNewModelPickerVisible,
+    runMode,
+    runModePickerVisible: isRunModePickerVisible,
+    selectedModelId,
+    visibleModels
+  })];
 };
 
 const arrowLeft = {
@@ -12656,22 +14033,31 @@ const getHeaderActionVirtualDom = item => {
   }];
 };
 
-const getChatHeaderActionsDom = (viewMode, authEnabled = false, authStatus = 'signed-out', searchEnabled = false) => {
-  const toggleTitle = viewMode === 'chat-focus' ? normalChatMode() : chatFocusMode();
+const getAuthAction = (authEnabled, authStatus) => {
   const isSigningIn = authStatus === 'signing-in';
-  const authAction = authEnabled && authStatus !== 'signed-in' ? {
-    disabled: isSigningIn,
-    icon: mergeClassNames(MaskIcon, MaskIconAccount),
-    name: Login,
-    onClick: HandleClick,
-    title: isSigningIn ? loggingInToBackend() : loginToBackend()
-  } : authEnabled ? {
+  if (!authEnabled) {
+    return undefined;
+  }
+  if (authStatus !== 'signed-in') {
+    return {
+      disabled: isSigningIn,
+      icon: mergeClassNames(MaskIcon, MaskIconAccount),
+      name: Login,
+      onClick: HandleClick,
+      title: isSigningIn ? loggingInToBackend() : loginToBackend()
+    };
+  }
+  return {
     disabled: false,
     icon: mergeClassNames(MaskIcon, MaskIconSignOut),
     name: Logout,
     onClick: HandleClick,
     title: logoutFromBackend()
-  } : undefined;
+  };
+};
+const getChatHeaderActionsDom = (viewMode, authEnabled = false, authStatus = 'signed-out', searchEnabled = false) => {
+  const toggleTitle = viewMode === 'chat-focus' ? normalChatMode() : chatFocusMode();
+  const authAction = getAuthAction(authEnabled, authStatus);
   const items = [{
     icon: mergeClassNames(MaskIcon, MaskIconLayoutPanelLeft),
     name: ToggleChatFocus,
@@ -12704,6 +14090,7 @@ const getChatHeaderActionsDom = (viewMode, authEnabled = false, authStatus = 'si
     title: closeChat()
   }];
   return [{
+    'aria-label': 'chat actions',
     childCount: items.length,
     className: ChatActions,
     role: ToolBar,
@@ -12727,7 +14114,7 @@ const getChatHeaderDomDetailMode = (selectedSessionTitle, authEnabled = false, a
     childCount: hasAuthError ? 3 : 2,
     className: ChatHeader,
     onContextMenu: HandleChatHeaderContextMenu,
-    type: Div
+    type: Header
   }, {
     childCount: 2,
     className: ChatName,
@@ -12746,6 +14133,8 @@ const getChatModeDetailVirtualDom = ({
   authEnabled = false,
   authErrorMessage = '',
   authStatus = 'signed-out',
+  composerAttachmentPreviewOverlayAttachmentId,
+  composerAttachmentPreviewOverlayError = false,
   composerAttachments,
   composerDropActive = false,
   composerDropEnabled = true,
@@ -12754,6 +14143,9 @@ const getChatModeDetailVirtualDom = ({
   composerHeight = 28,
   composerLineHeight = 20,
   composerValue,
+  hasSpaceForAgentModePicker,
+  hasSpaceForRunModePicker,
+  messagesAutoScrollEnabled,
   messagesScrollTop = 0,
   modelPickerOpen = false,
   modelPickerSearchValue = '',
@@ -12770,6 +14162,7 @@ const getChatModeDetailVirtualDom = ({
   reasoningPickerEnabled,
   runMode,
   runModePickerOpen = false,
+  scrollDownButtonEnabled,
   selectedModelId,
   selectedSessionId,
   sessions,
@@ -12788,28 +14181,33 @@ const getChatModeDetailVirtualDom = ({
   const messages = selectedSession ? selectedSession.messages : [];
   const showCreatePullRequestButton = canCreatePullRequest(selectedSession);
   const isDropOverlayVisible = composerDropEnabled && composerDropActive;
-  const isAgentModePickerVisible = agentModePickerOpen;
+  const isComposerAttachmentPreviewOverlayVisible = !!composerAttachmentPreviewOverlayAttachmentId;
+  const isAgentModePickerVisible = hasSpaceForAgentModePicker && agentModePickerOpen;
   const isNewModelPickerVisible = modelPickerOpen;
-  const isRunModePickerVisible = showRunMode && runModePickerOpen;
-  const chatRootChildCount = 3 + (isDropOverlayVisible ? 1 : 0) + (isAgentModePickerVisible ? 1 : 0) + (isNewModelPickerVisible ? 1 : 0) + (isRunModePickerVisible ? 1 : 0);
+  const isRunModePickerVisible = showRunMode && hasSpaceForRunModePicker && runModePickerOpen;
+  const hasVisibleOverlays = isDropOverlayVisible || isComposerAttachmentPreviewOverlayVisible || isAgentModePickerVisible || isNewModelPickerVisible || isRunModePickerVisible;
+  const chatRootChildCount = 3 + (hasVisibleOverlays ? 1 : 0);
   return [{
     childCount: chatRootChildCount,
     className: mergeClassNames(Viewlet, Chat),
     onDragEnter: HandleDragEnterChatView,
     onDragOver: HandleDragOverChatView,
     type: Div
-  }, ...getChatHeaderDomDetailMode(selectedSessionTitle, authEnabled, authStatus, authErrorMessage), ...getMessagesDom(messages, parsedMessages, openRouterApiKeyInput, openApiApiKeyInput, openApiApiKeyState, openApiApiKeysSettingsUrl, openApiApiKeyInputPattern, openRouterApiKeyState, messagesScrollTop, useChatMathWorker), ...getChatSendAreaDom(composerValue, composerAttachments, agentMode, agentModePickerOpen, modelPickerOpen, models, selectedModelId, reasoningPickerEnabled, reasoningEffort, reasoningEffortPickerOpen, usageOverviewEnabled, tokensUsed, tokensMax, addContextButtonEnabled, showRunMode, runMode, runModePickerOpen, todoListToolEnabled, todoListItems, showCreatePullRequestButton, voiceDictationEnabled), ...(isDropOverlayVisible ? [{
-    childCount: 1,
-    className: mergeClassNames(ChatViewDropOverlay, ChatViewDropOverlayActive),
-    name: ComposerDropTarget,
-    onDragLeave: HandleDragLeave,
-    onDragOver: HandleDragOver,
-    onDrop: HandleDrop,
-    type: Div
-  }, {
-    text: attachImageAsContext(),
-    type: Text
-  }] : []), ...(isAgentModePickerVisible ? getAgentModePickerPopOverVirtualDom(agentMode) : []), ...(isNewModelPickerVisible ? getChatModelPickerPopOverVirtualDom(visibleModels, selectedModelId, modelPickerSearchValue) : []), ...(isRunModePickerVisible ? getRunModePickerPopOverVirtualDom(runMode) : [])];
+  }, ...getChatHeaderDomDetailMode(selectedSessionTitle, authEnabled, authStatus, authErrorMessage), ...getMessagesDom(messages, parsedMessages, openRouterApiKeyInput, openApiApiKeyInput, openApiApiKeyState, openApiApiKeysSettingsUrl, openApiApiKeyInputPattern, openRouterApiKeyState, messagesScrollTop, useChatMathWorker), ...getChatSendAreaDom(composerValue, composerAttachments, agentMode, agentModePickerOpen, hasSpaceForAgentModePicker, modelPickerOpen, models, selectedModelId, reasoningPickerEnabled, reasoningEffort, reasoningEffortPickerOpen, usageOverviewEnabled, tokensUsed, tokensMax, addContextButtonEnabled, showRunMode, hasSpaceForRunModePicker, runMode, runModePickerOpen, todoListToolEnabled, todoListItems, showCreatePullRequestButton, voiceDictationEnabled, scrollDownButtonEnabled, messagesAutoScrollEnabled), ...getChatOverlaysVirtualDom({
+    agentMode,
+    agentModePickerVisible: isAgentModePickerVisible,
+    composerAttachmentPreviewOverlayAttachmentId,
+    composerAttachmentPreviewOverlayError,
+    composerAttachmentPreviewOverlayVisible: isComposerAttachmentPreviewOverlayVisible,
+    composerAttachments,
+    dropOverlayVisible: isDropOverlayVisible,
+    modelPickerSearchValue,
+    modelPickerVisible: isNewModelPickerVisible,
+    runMode,
+    runModePickerVisible: isRunModePickerVisible,
+    selectedModelId,
+    visibleModels
+  })];
 };
 
 const getChatSearchDom = (hasSearchField, searchValue) => {
@@ -12839,7 +14237,7 @@ const getChatHeaderListModeDom = (authEnabled = false, authStatus = 'signed-out'
     childCount: headerChildCount,
     className: ChatHeader,
     onContextMenu: HandleChatHeaderContextMenu,
-    type: Div
+    type: Header
   }, {
     childCount: 1,
     className: ChatHeaderLabel,
@@ -12938,23 +14336,6 @@ const getChatListDom = (sessions, selectedSessionId, listFocusedIndex, chatListS
   }, ...sessions.flatMap((session, index) => getSessionDom(session, index === listFocusedIndex))];
 };
 
-const getDropOverlayVirtualDom = isDropOverlayVisible => {
-  if (!isDropOverlayVisible) {
-    return [];
-  }
-  return [{
-    childCount: 1,
-    className: mergeClassNames(ChatViewDropOverlay, ChatViewDropOverlayActive),
-    name: ComposerDropTarget,
-    onDragLeave: HandleDragLeave,
-    onDragOver: HandleDragOver,
-    onDrop: HandleDrop,
-    type: Div
-  }, {
-    text: attachImageAsContext(),
-    type: Text
-  }];
-};
 const getChatModeListVirtualDom = ({
   addContextButtonEnabled,
   agentMode,
@@ -12963,6 +14344,8 @@ const getChatModeListVirtualDom = ({
   authErrorMessage = '',
   authStatus = 'signed-out',
   chatListScrollTop = 0,
+  composerAttachmentPreviewOverlayAttachmentId,
+  composerAttachmentPreviewOverlayError = false,
   composerAttachments,
   composerDropActive = false,
   composerDropEnabled = true,
@@ -12971,6 +14354,8 @@ const getChatModeListVirtualDom = ({
   composerHeight = 28,
   composerLineHeight = 20,
   composerValue,
+  hasSpaceForAgentModePicker,
+  hasSpaceForRunModePicker,
   listFocusedIndex = -1,
   modelPickerOpen = false,
   modelPickerSearchValue = '',
@@ -12996,10 +14381,12 @@ const getChatModeListVirtualDom = ({
   voiceDictationEnabled = false
 }) => {
   const isDropOverlayVisible = composerDropEnabled && composerDropActive;
-  const isAgentModePickerVisible = agentModePickerOpen;
+  const isComposerAttachmentPreviewOverlayVisible = !!composerAttachmentPreviewOverlayAttachmentId;
+  const isAgentModePickerVisible = hasSpaceForAgentModePicker && agentModePickerOpen;
   const isNewModelPickerVisible = modelPickerOpen;
-  const isRunModePickerVisible = showRunMode && runModePickerOpen;
-  const chatRootChildCount = 3 + (isDropOverlayVisible ? 1 : 0) + (isAgentModePickerVisible ? 1 : 0) + (isNewModelPickerVisible ? 1 : 0) + (isRunModePickerVisible ? 1 : 0);
+  const isRunModePickerVisible = showRunMode && hasSpaceForRunModePicker && runModePickerOpen;
+  const hasVisibleOverlays = isDropOverlayVisible || isComposerAttachmentPreviewOverlayVisible || isAgentModePickerVisible || isNewModelPickerVisible || isRunModePickerVisible;
+  const chatRootChildCount = 3 + (hasVisibleOverlays ? 1 : 0);
   const searchValueTrimmed = searchValue.trim().toLowerCase();
   const visibleSessions = searchEnabled && searchValueTrimmed ? sessions.filter(session => session.title.toLowerCase().includes(searchValueTrimmed)) : sessions;
   return [{
@@ -13008,7 +14395,21 @@ const getChatModeListVirtualDom = ({
     onDragEnter: HandleDragEnterChatView,
     onDragOver: HandleDragOverChatView,
     type: Div
-  }, ...getChatHeaderListModeDom(authEnabled, authStatus, authErrorMessage, searchEnabled, searchFieldVisible, searchValue), ...getChatListDom(visibleSessions, selectedSessionId, listFocusedIndex, chatListScrollTop), ...getChatSendAreaDom(composerValue, composerAttachments, agentMode, agentModePickerOpen, modelPickerOpen, models, selectedModelId, reasoningPickerEnabled, reasoningEffort, reasoningEffortPickerOpen, usageOverviewEnabled, tokensUsed, tokensMax, addContextButtonEnabled, showRunMode, runMode, runModePickerOpen, todoListToolEnabled, todoListItems, false, voiceDictationEnabled), ...getDropOverlayVirtualDom(isDropOverlayVisible), ...(isAgentModePickerVisible ? getAgentModePickerPopOverVirtualDom(agentMode) : []), ...(isNewModelPickerVisible ? getChatModelPickerPopOverVirtualDom(visibleModels, selectedModelId, modelPickerSearchValue) : []), ...(isRunModePickerVisible ? getRunModePickerPopOverVirtualDom(runMode) : [])];
+  }, ...getChatHeaderListModeDom(authEnabled, authStatus, authErrorMessage, searchEnabled, searchFieldVisible, searchValue), ...getChatListDom(visibleSessions, selectedSessionId, listFocusedIndex, chatListScrollTop), ...getChatSendAreaDom(composerValue, composerAttachments, agentMode, agentModePickerOpen, hasSpaceForAgentModePicker, modelPickerOpen, models, selectedModelId, reasoningPickerEnabled, reasoningEffort, reasoningEffortPickerOpen, usageOverviewEnabled, tokensUsed, tokensMax, addContextButtonEnabled, showRunMode, hasSpaceForRunModePicker, runMode, runModePickerOpen, todoListToolEnabled, todoListItems, false, voiceDictationEnabled), ...getChatOverlaysVirtualDom({
+    agentMode,
+    agentModePickerVisible: isAgentModePickerVisible,
+    composerAttachmentPreviewOverlayAttachmentId,
+    composerAttachmentPreviewOverlayError,
+    composerAttachmentPreviewOverlayVisible: isComposerAttachmentPreviewOverlayVisible,
+    composerAttachments,
+    dropOverlayVisible: isDropOverlayVisible,
+    modelPickerSearchValue,
+    modelPickerVisible: isNewModelPickerVisible,
+    runMode,
+    runModePickerVisible: isRunModePickerVisible,
+    selectedModelId,
+    visibleModels
+  })];
 };
 
 const getChatModeUnsupportedVirtualDom = () => {
@@ -13099,6 +14500,8 @@ const getChatVirtualDom = options => {
     authErrorMessage = '',
     authStatus = 'signed-out',
     chatListScrollTop,
+    composerAttachmentPreviewOverlayAttachmentId,
+    composerAttachmentPreviewOverlayError = false,
     composerAttachments,
     composerDropActive = false,
     composerDropEnabled = true,
@@ -13107,7 +14510,10 @@ const getChatVirtualDom = options => {
     composerHeight,
     composerLineHeight,
     composerValue,
+    hasSpaceForAgentModePicker,
+    hasSpaceForRunModePicker,
     listFocusedIndex = -1,
+    messagesAutoScrollEnabled,
     messagesScrollTop,
     modelPickerOpen = false,
     modelPickerSearchValue = '',
@@ -13127,6 +14533,7 @@ const getChatVirtualDom = options => {
     reasoningPickerEnabled,
     runMode,
     runModePickerOpen = false,
+    scrollDownButtonEnabled,
     searchEnabled = false,
     searchFieldVisible = false,
     searchValue = '',
@@ -13155,6 +14562,8 @@ const getChatVirtualDom = options => {
         authEnabled,
         authErrorMessage,
         authStatus,
+        composerAttachmentPreviewOverlayAttachmentId,
+        composerAttachmentPreviewOverlayError,
         composerAttachments,
         composerDropActive,
         composerDropEnabled,
@@ -13163,6 +14572,9 @@ const getChatVirtualDom = options => {
         composerHeight,
         composerLineHeight,
         composerValue,
+        hasSpaceForAgentModePicker,
+        hasSpaceForRunModePicker,
+        messagesAutoScrollEnabled,
         messagesScrollTop,
         modelPickerOpen,
         modelPickerSearchValue,
@@ -13182,6 +14594,7 @@ const getChatVirtualDom = options => {
         reasoningPickerEnabled,
         runMode,
         runModePickerOpen,
+        scrollDownButtonEnabled,
         selectedModelId,
         selectedProjectId,
         selectedSessionId,
@@ -13204,6 +14617,8 @@ const getChatVirtualDom = options => {
         authEnabled,
         authErrorMessage,
         authStatus,
+        composerAttachmentPreviewOverlayAttachmentId,
+        composerAttachmentPreviewOverlayError,
         composerAttachments,
         composerDropActive,
         composerDropEnabled,
@@ -13212,6 +14627,9 @@ const getChatVirtualDom = options => {
         composerHeight,
         composerLineHeight,
         composerValue,
+        hasSpaceForAgentModePicker,
+        hasSpaceForRunModePicker,
+        messagesAutoScrollEnabled,
         messagesScrollTop,
         modelPickerOpen,
         modelPickerSearchValue,
@@ -13228,6 +14646,7 @@ const getChatVirtualDom = options => {
         reasoningPickerEnabled,
         runMode,
         runModePickerOpen,
+        scrollDownButtonEnabled,
         selectedModelId,
         selectedSessionId,
         sessions,
@@ -13250,6 +14669,8 @@ const getChatVirtualDom = options => {
         authErrorMessage,
         authStatus,
         chatListScrollTop,
+        composerAttachmentPreviewOverlayAttachmentId,
+        composerAttachmentPreviewOverlayError,
         composerAttachments,
         composerDropActive,
         composerDropEnabled,
@@ -13258,6 +14679,8 @@ const getChatVirtualDom = options => {
         composerHeight,
         composerLineHeight,
         composerValue,
+        hasSpaceForAgentModePicker,
+        hasSpaceForRunModePicker,
         listFocusedIndex,
         modelPickerOpen,
         modelPickerSearchValue,
@@ -13296,6 +14719,8 @@ const renderItems = (oldState, newState) => {
     authErrorMessage,
     authStatus,
     chatListScrollTop,
+    composerAttachmentPreviewOverlayAttachmentId,
+    composerAttachmentPreviewOverlayError,
     composerAttachments,
     composerDropActive,
     composerDropEnabled,
@@ -13304,8 +14729,11 @@ const renderItems = (oldState, newState) => {
     composerHeight,
     composerLineHeight,
     composerValue,
+    hasSpaceForAgentModePicker,
+    hasSpaceForRunModePicker,
     initial,
     listFocusedIndex,
+    messagesAutoScrollEnabled,
     messagesScrollTop,
     modelPickerOpen,
     modelPickerSearchValue,
@@ -13325,6 +14753,7 @@ const renderItems = (oldState, newState) => {
     reasoningPickerEnabled,
     runMode,
     runModePickerOpen,
+    scrollDownButtonEnabled,
     searchEnabled,
     searchFieldVisible,
     searchValue,
@@ -13354,6 +14783,8 @@ const renderItems = (oldState, newState) => {
     authErrorMessage,
     authStatus,
     chatListScrollTop,
+    composerAttachmentPreviewOverlayAttachmentId,
+    composerAttachmentPreviewOverlayError,
     composerAttachments,
     composerDropActive,
     composerDropEnabled,
@@ -13362,7 +14793,10 @@ const renderItems = (oldState, newState) => {
     composerHeight,
     composerLineHeight,
     composerValue,
+    hasSpaceForAgentModePicker,
+    hasSpaceForRunModePicker,
     listFocusedIndex,
+    messagesAutoScrollEnabled,
     messagesScrollTop,
     modelPickerOpen,
     modelPickerSearchValue,
@@ -13382,6 +14816,7 @@ const renderItems = (oldState, newState) => {
     reasoningPickerEnabled,
     runMode,
     runModePickerOpen,
+    scrollDownButtonEnabled,
     searchEnabled,
     searchFieldVisible,
     searchValue,
@@ -13500,6 +14935,12 @@ const renderEventListeners = () => {
   }, {
     name: HandleClick,
     params: ['handleClick', TargetName, 'event.target.dataset.id', ClientX, ClientY]
+  }, {
+    name: HandleMouseOver,
+    params: ['handleMouseOver', TargetName]
+  }, {
+    name: HandleMouseOut,
+    params: ['handleMouseOut', TargetName, 'event.relatedTarget && event.relatedTarget.getAttribute ? event.relatedTarget.getAttribute("name") : ""']
   }, {
     name: HandleClickDictationButton,
     params: ['handleClickDictationButton']
@@ -13556,11 +14997,11 @@ const renderEventListeners = () => {
     params: ['handleSearchValueChange', TargetValue]
   }, {
     name: HandleDragEnter,
-    params: ['handleDragEnter', TargetName, 'Array.from(event.dataTransfer?.files || []).length > 0'],
+    params: ['handleDragEnter', TargetName, DataTransferFiles2],
     preventDefault: true
   }, {
     name: HandleDragOver,
-    params: ['handleDragOver', TargetName, 'Array.from(event.dataTransfer?.files || []).length > 0'],
+    params: ['handleDragOver', TargetName, DataTransferFiles2],
     preventDefault: true
   }, {
     name: HandleDragLeave,
@@ -13568,15 +15009,15 @@ const renderEventListeners = () => {
     preventDefault: true
   }, {
     name: HandleDrop,
-    params: ['handleDropFiles', TargetName, 'Array.from(event.dataTransfer?.files || [])'],
+    params: ['handleDropFiles', TargetName, DataTransferFiles2],
     preventDefault: true
   }, {
     name: HandleDragEnterChatView,
-    params: ['handleDragEnter', 'composer-drop-target', 'Array.from(event.dataTransfer?.files || []).length > 0'],
+    params: ['handleDragEnter', 'composer-drop-target', DataTransferFiles2],
     preventDefault: true
   }, {
     name: HandleDragOverChatView,
-    params: ['handleDragOver', 'composer-drop-target', 'Array.from(event.dataTransfer?.files || []).length > 0'],
+    params: ['handleDragOver', 'composer-drop-target', DataTransferFiles2],
     preventDefault: true
   }, {
     name: HandleModelChange,
@@ -13664,8 +15105,11 @@ const renderEventListeners = () => {
     params: ['handleModelInputBlur']
   }, {
     name: HandleContextMenuChatImageAttachment,
-    params: ['handleContextMenuChatImageAttachment'],
+    params: ['handleContextMenuChatImageAttachment', TargetName, ClientX, ClientY],
     preventDefault: true
+  }, {
+    name: HandleErrorComposerAttachmentPreviewOverlay,
+    params: ['handleErrorComposerAttachmentPreviewOverlay']
   }];
 };
 
@@ -13680,6 +15124,7 @@ const reset = async state => {
     agentMode: defaultAgentMode,
     agentModePickerOpen: false,
     composerAttachments: [],
+    composerAttachmentsHeight: 0,
     composerHeight: getMinComposerHeightForState(state),
     composerSelectionEnd: 0,
     composerSelectionStart: 0,
@@ -13704,14 +15149,39 @@ const reset = async state => {
 };
 
 const resize = async (state, dimensions, getComposerHeightFn = getComposerHeight) => {
+  const {
+    agentModePickerOpen,
+    responsivePickerVisibilityEnabled,
+    runModePickerOpen,
+    width
+  } = state;
+  const responsivePickerState = dimensions.width === undefined ? undefined : getResponsivePickerState(dimensions.width, responsivePickerVisibilityEnabled);
+  const responsivePickerOpenState = responsivePickerState ? {
+    agentModePickerOpen: responsivePickerState.hasSpaceForAgentModePicker ? agentModePickerOpen : false,
+    runModePickerOpen: responsivePickerState.hasSpaceForRunModePicker ? runModePickerOpen : false
+  } : {};
   const nextState = {
     ...state,
-    ...dimensions
+    ...dimensions,
+    ...responsivePickerState,
+    ...responsivePickerOpenState
   };
-  if (dimensions.width !== undefined && dimensions.width !== state.width && nextState.composerValue) {
+  const {
+    composerAttachments,
+    composerValue,
+    width: nextWidth
+  } = nextState;
+  if (dimensions.width !== undefined && dimensions.width !== width && composerValue) {
+    return {
+      ...nextState,
+      composerAttachmentsHeight: getComposerAttachmentsHeight(composerAttachments, nextWidth),
+      composerHeight: await getComposerHeightFn(nextState, composerValue, nextWidth)
+    };
+  }
+  if (dimensions.width !== undefined && dimensions.width !== width && composerAttachments.length > 0) {
     return {
       ...nextState,
-      composerHeight: await getComposerHeightFn(nextState, nextState.composerValue, nextState.width)
+      composerAttachmentsHeight: getComposerAttachmentsHeight(composerAttachments, nextWidth)
     };
   }
   return nextState;
@@ -13721,6 +15191,8 @@ const saveState = state => {
   const {
     agentMode,
     chatListScrollTop,
+    composerSelectionEnd,
+    composerSelectionStart,
     composerValue,
     lastNormalViewMode,
     maxToolCalls,
@@ -13742,6 +15214,8 @@ const saveState = state => {
   return {
     agentMode,
     chatListScrollTop,
+    composerSelectionEnd,
+    composerSelectionStart,
     composerValue,
     lastNormalViewMode,
     maxToolCalls,
@@ -13827,6 +15301,24 @@ const setReasoningPickerEnabled = (state, reasoningPickerEnabled) => {
   };
 };
 
+const setResponsivePickerVisibilityEnabled = (state, responsivePickerVisibilityEnabled) => {
+  const responsivePickerState = getResponsivePickerState(state.width, responsivePickerVisibilityEnabled);
+  return {
+    ...state,
+    ...responsivePickerState,
+    agentModePickerOpen: responsivePickerState.hasSpaceForAgentModePicker ? state.agentModePickerOpen : false,
+    responsivePickerVisibilityEnabled,
+    runModePickerOpen: responsivePickerState.hasSpaceForRunModePicker ? state.runModePickerOpen : false
+  };
+};
+
+const setScrollDownButtonEnabled = (state, scrollDownButtonEnabled) => {
+  return {
+    ...state,
+    scrollDownButtonEnabled
+  };
+};
+
 const setSearchEnabled = (state, searchEnabled) => {
   return {
     ...state,
@@ -13959,6 +15451,7 @@ const commandMap = {
   'Chat.getKeyBindings': getKeyBindings,
   'Chat.getMenuEntries': getMenuEntries,
   'Chat.getMenuEntryIds': getMenuEntryIds,
+  'Chat.getMockOpenApiRequests': wrapGetter(getMockOpenApiRequests),
   'Chat.getQuickPickMenuEntries': getQuickPickMenuEntries,
   'Chat.getSelectedSessionId': wrapGetter(getSelectedSessionId),
   'Chat.getSystemPrompt': wrapGetter(getSystemPrompt),
@@ -13991,6 +15484,7 @@ const commandMap = {
   'Chat.handleDragLeave': wrapCommand(handleDragLeave),
   'Chat.handleDragOver': wrapCommand(handleDragOver),
   'Chat.handleDropFiles': wrapCommand(handleDropFiles),
+  'Chat.handleErrorComposerAttachmentPreviewOverlay': wrapCommand(handleErrorComposerAttachmentPreviewOverlay),
   'Chat.handleInput': wrapCommand(handleInput),
   'Chat.handleInputFocus': wrapCommand(handleInputFocus),
   'Chat.handleKeyDown': wrapCommand(handleKeyDown),
@@ -14001,6 +15495,8 @@ const commandMap = {
   'Chat.handleModelChange': wrapCommand(handleModelChange),
   'Chat.handleModelInputBlur': wrapCommand(handleModelInputBlur),
   'Chat.handleModelPickerListScroll': wrapCommand(handleModelPickerListScroll),
+  'Chat.handleMouseOut': wrapCommand(handleMouseOut),
+  'Chat.handleMouseOver': wrapCommand(handleMouseOver),
   'Chat.handlePointerDownModelPickerList': wrapCommand(handlePointerDownModelPickerList),
   'Chat.handlePointerUpModelPickerList': wrapCommand(handlePointerUpModelPickerList),
   'Chat.handleProjectAddButtonContextMenu': wrapCommand(handleProjectAddButtonContextMenu),
@@ -14010,6 +15506,7 @@ const commandMap = {
   'Chat.handleRunModeChange': wrapCommand(handleRunModeChange),
   'Chat.handleSearchValueChange': wrapCommand(handleSearchValueChange),
   'Chat.handleSubmit': wrapCommand(handleSubmit),
+  'Chat.hideComposerAttachmentPreviewOverlay': wrapCommand(hideComposerAttachmentPreviewOverlay),
   'Chat.initialize': initialize,
   'Chat.loadContent': wrapCommand(loadContent),
   'Chat.loadContent2': wrapCommand(loadContent),
@@ -14022,12 +15519,14 @@ const commandMap = {
   'Chat.mockOpenApiStreamPushChunk': wrapCommand(mockOpenApiStreamPushChunk),
   'Chat.mockOpenApiStreamReset': wrapCommand(mockOpenApiStreamReset),
   'Chat.openAgentModePicker': wrapCommand(openAgentModePicker),
+  'Chat.openMockProject': wrapCommand(openMockProject),
   'Chat.openMockSession': wrapCommand(openMockSession),
   'Chat.openModelPicker': wrapCommand(openModelPicker),
   'Chat.openReasoningEffortPicker': wrapCommand(openReasoningEffortPicker),
   'Chat.openRunModePicker': wrapCommand(openRunModePicker),
   'Chat.pasteInput': wrapCommand(pasteInput),
   'Chat.registerMockResponse': wrapCommand(registerMockResponse),
+  'Chat.removeComposerAttachment': wrapCommand(removeComposerAttachment),
   'Chat.render2': render2,
   'Chat.renderEventListeners': renderEventListeners,
   'Chat.rerender': wrapCommand(rerender),
@@ -14044,6 +15543,8 @@ const commandMap = {
   'Chat.setQuestionToolEnabled': wrapCommand(setQuestionToolEnabled),
   'Chat.setReasoningEffort': wrapCommand(setReasoningEffort),
   'Chat.setReasoningPickerEnabled': wrapCommand(setReasoningPickerEnabled),
+  'Chat.setResponsivePickerVisibilityEnabled': wrapCommand(setResponsivePickerVisibilityEnabled),
+  'Chat.setScrollDownButtonEnabled': wrapCommand(setScrollDownButtonEnabled),
   'Chat.setSearchEnabled': wrapCommand(setSearchEnabled),
   'Chat.setShowRunMode': wrapCommand(setShowRunMode),
   'Chat.setStreamingEnabled': wrapCommand(setStreamingEnabled),
@@ -14054,6 +15555,7 @@ const commandMap = {
   'Chat.setUseChatMathWorker': wrapCommand(setUseChatMathWorker),
   'Chat.setUseChatMessageParsingWorker': wrapCommand(setUseChatMessageParsingWorker),
   'Chat.setUseChatNetworkWorkerForRequests': wrapCommand(setUseChatNetworkWorkerForRequests),
+  'Chat.showComposerAttachmentPreviewOverlay': wrapCommand(showComposerAttachmentPreviewOverlay),
   'Chat.terminate': terminate,
   'Chat.useMockApi': wrapCommand(useMockApi)
 };