@lvce-editor/static-server 0.75.8 → 0.75.10

package/static/{407762e → 3db9eb3}/packages/chat-view/dist/chatViewWorkerMain.js

@@ -1036,6 +1036,7 @@ const create$2 = rpcId => {
 };
 
 const {
+  invoke: invoke$1,
   set: set$2
 } = create$2(ExtensionHostWorker);
 
@@ -1044,10 +1045,16 @@ const {
   invokeAndTransfer,
   set: set$1
 } = create$2(RendererWorker);
+const readFile = async uri => {
+  return invoke('FileSystem.readFile', uri);
+};
 const sendMessagePortToExtensionHostWorker$1 = async (port, rpcId = 0) => {
   const command = 'HandleMessagePort.handleMessagePort2';
   await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToExtensionHostWorker', port, command, rpcId);
 };
+const activateByEvent$1 = (event, assetDir, platform) => {
+  return invoke('ExtensionHostManagement.activateByEvent', event, assetDir, platform);
+};
 const getPreference = async key => {
   return await invoke('Preferences.get', key);
 };
@@ -1175,9 +1182,50 @@ const terminate = () => {
   globalThis.close();
 };
 
+const measureTextBlockHeight = async (text, fontFamily, fontSize, lineHeight, width) => {
+  return invoke('MeasureTextBlockHeight.measureTextBlockHeight', text, fontSize, fontFamily, lineHeight, width);
+};
+
+const getComposerWidth = width => {
+  return Math.max(1, width - 32);
+};
+const getMinComposerHeight = lineHeight => {
+  return lineHeight + 8;
+};
+const getMaxComposerHeight = (lineHeight, maxComposerRows) => {
+  return lineHeight * Math.max(1, maxComposerRows) + 8;
+};
+const estimateComposerHeight = (value, lineHeight) => {
+  const lineCount = value.split('\n').length;
+  return lineCount * lineHeight + 8;
+};
+const getComposerHeight = async (state, value, width = state.width) => {
+  const {
+    composerFontFamily,
+    composerFontSize,
+    composerLineHeight,
+    maxComposerRows
+  } = state;
+  const minimumHeight = getMinComposerHeight(composerLineHeight);
+  const maximumHeight = getMaxComposerHeight(composerLineHeight, maxComposerRows);
+  const content = value || ' ';
+  const composerWidth = getComposerWidth(width);
+  try {
+    const measuredHeight = await measureTextBlockHeight(content, composerFontFamily, composerFontSize, composerLineHeight, composerWidth);
+    const height = Math.ceil(measuredHeight) + 8;
+    return Math.max(minimumHeight, Math.min(maximumHeight, height));
+  } catch {
+    return Math.max(minimumHeight, Math.min(maximumHeight, estimateComposerHeight(value, composerLineHeight)));
+  }
+};
+const getMinComposerHeightForState = state => {
+  return getMinComposerHeight(state.composerLineHeight);
+};
+
 const clearInput = async state => {
   return {
     ...state,
+    composerHeight: getMinComposerHeightForState(state),
     composerValue: ''
   };
 };
@@ -1224,15 +1272,24 @@ const composePlaceholder = () => {
 const openRouterApiKeyPlaceholder = () => {
   return i18nString('Enter OpenRouter API key');
 };
+const openApiApiKeyPlaceholder = () => {
+  return i18nString('Enter OpenAI API key');
+};
 const sendMessage = () => {
   return i18nString('Send message');
 };
 const save = () => {
   return i18nString('Save');
 };
+const saving = () => {
+  return i18nString('Saving...');
+};
 const getOpenRouterApiKey = () => {
   return i18nString('Get API Key');
 };
+const getOpenApiApiKey = () => {
+  return i18nString('Get API Key');
+};
 const deleteChatSession$1 = () => {
   return i18nString('Delete chat session');
 };
@@ -1260,6 +1317,22 @@ const getDefaultModels = () => {
     id: defaultModelId,
     name: 'test',
     provider: 'test'
+  }, {
+    id: 'openapi/gpt-5-mini',
+    name: 'GPT-5 Mini',
+    provider: 'openApi'
+  }, {
+    id: 'openapi/gpt-4o-mini',
+    name: 'GPT-4o Mini',
+    provider: 'openApi'
+  }, {
+    id: 'openapi/gpt-4o',
+    name: 'GPT-4o',
+    provider: 'openApi'
+  }, {
+    id: 'openapi/gpt-4.1-mini',
+    name: 'GPT-4.1 Mini',
+    provider: 'openApi'
   }, {
     id: 'codex-5.3',
     name: 'Codex 5.3',
@@ -1313,8 +1386,15 @@ const getDefaultModels = () => {
 const createDefaultState = () => {
   const defaultSessionId = 'session-1';
   const defaultModelId = 'test';
+  const composerFontSize = 13;
+  const composerLineHeight = 20;
   return {
     assetDir: '',
+    chatListScrollTop: 0,
+    composerFontFamily: 'system-ui',
+    composerFontSize,
+    composerHeight: composerLineHeight + 8,
+    composerLineHeight,
     composerValue: '',
     errorCount: 0,
     focus: 'composer',
@@ -1325,12 +1405,20 @@ const createDefaultState = () => {
     inputSource: 'script',
     lastSubmittedSessionId: '',
     listItemHeight: 40,
+    maxComposerRows: 5,
+    messagesScrollTop: 0,
+    mockApiCommandId: '',
     models: getDefaultModels(),
     nextMessageId: 1,
+    openApiApiBaseUrl: 'https://api.openai.com/v1',
+    openApiApiKey: '',
+    openApiApiKeyInput: '',
+    openApiApiKeysSettingsUrl: 'https://platform.openai.com/api-keys',
     openRouterApiBaseUrl: 'https://openrouter.ai/api/v1',
     openRouterApiKey: '',
     openRouterApiKeyInput: '',
     openRouterApiKeysSettingsUrl: 'https://openrouter.ai/settings/keys',
+    openRouterApiKeyState: 'idle',
     platform: 0,
     renamingSessionId: '',
     selectedModelId: defaultModelId,
@@ -1340,10 +1428,12 @@ const createDefaultState = () => {
       messages: [],
       title: defaultSessionTitle()
     }],
+    streamingEnabled: false,
     tokensMax: 0,
     tokensUsed: 0,
     uid: 0,
     usageOverviewEnabled: false,
+    useMockApi: false,
     viewMode: 'list',
     warningCount: 0,
     width: 0,
@@ -1376,7 +1466,7 @@ const create = (uid, x, y, width, height, platform, assetDir) => {
 };
 
 const isEqual$1 = (oldState, newState) => {
-  return oldState.initial === newState.initial;
+  return oldState.initial === newState.initial && oldState.composerHeight === newState.composerHeight && oldState.composerLineHeight === newState.composerLineHeight && oldState.composerFontFamily === newState.composerFontFamily && oldState.composerFontSize === newState.composerFontSize;
 };
 
 const diffFocus = (oldState, newState) => {
@@ -1390,12 +1480,17 @@ const isEqual = (oldState, newState) => {
   return oldState.composerValue === newState.composerValue && oldState.initial === newState.initial && oldState.renamingSessionId === newState.renamingSessionId && oldState.selectedModelId === newState.selectedModelId && oldState.selectedSessionId === newState.selectedSessionId && oldState.sessions === newState.sessions && oldState.tokensMax === newState.tokensMax && oldState.tokensUsed === newState.tokensUsed && oldState.usageOverviewEnabled === newState.usageOverviewEnabled && oldState.viewMode === newState.viewMode;
 };
 
+const diffScrollTop = (oldState, newState) => {
+  return oldState.chatListScrollTop === newState.chatListScrollTop && oldState.messagesScrollTop === newState.messagesScrollTop;
+};
+
 const RenderItems = 4;
 const RenderFocus = 6;
 const RenderFocusContext = 7;
 const RenderValue = 8;
 const RenderCss = 10;
 const RenderIncremental = 11;
+const RenderScrollTop = 12;
 
 const diffValue = (oldState, newState) => {
   if (oldState.composerValue === newState.composerValue) {
@@ -1404,8 +1499,8 @@ const diffValue = (oldState, newState) => {
   return newState.inputSource !== 'script';
 };
 
-const modules = [isEqual, diffValue, diffFocus, isEqual$1, diffFocus];
-const numbers = [RenderIncremental, RenderValue, RenderFocus, RenderCss, RenderFocusContext];
+const modules = [isEqual, diffValue, diffFocus, isEqual$1, diffFocus, diffScrollTop];
+const numbers = [RenderIncremental, RenderValue, RenderFocus, RenderCss, RenderFocusContext, RenderScrollTop];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -1438,6 +1533,7 @@ const FocusSelector = 'Viewlet.focusSelector';
 const SetCss = 'Viewlet.setCss';
 const SetDom2 = 'Viewlet.setDom2';
 const SetFocusContext = 'Viewlet.setFocusContext';
+const SetProperty = 'Viewlet.setProperty';
 const SetValueByName = 'Viewlet.setValueByName';
 const SetPatches = 'Viewlet.setPatches';
 
@@ -2084,14 +2180,23 @@ const deleteSession = async (state, id) => {
   };
 };
 
+const handleClickOpenApiApiKeySettings = async state => {
+  await openExternal(state.openApiApiKeysSettingsUrl);
+  return state;
+};
+
 const handleClickOpenRouterApiKeySettings = async state => {
   await openExternal(state.openRouterApiKeysSettingsUrl);
   return state;
 };
 
+const openApiApiKeyRequiredMessage = 'OpenAI API key is not configured. Enter your OpenAI API key below and click Save.';
+const openApiRequestFailedMessage = 'OpenAI request failed.';
 const openRouterApiKeyRequiredMessage = 'OpenRouter API key is not configured. Enter your OpenRouter API key below and click Save.';
 const openRouterRequestFailedMessage = 'OpenRouter request failed. Possible reasons:';
+const openRouterTooManyRequestsMessage = 'OpenRouter rate limit reached (429). Please try again soon. Helpful tips:';
 const openRouterRequestFailureReasons = ['ContentSecurityPolicyViolation: Check DevTools for details.', 'OpenRouter server offline: Check DevTools for details.', 'Check your internet connection.'];
+const openRouterTooManyRequestsReasons = ['Wait a short time and retry your request.', 'Reduce request frequency to avoid rate limits.', 'Use a different model if this one is saturated.'];
 
 const delay = async ms => {
   await new Promise(resolve => setTimeout(resolve, ms));
@@ -2102,10 +2207,320 @@ const getMockAiResponse = async userMessage => {
   return `Mock AI response: I received "${userMessage}".`;
 };
 
-const defaultOpenRouterApiBaseUrl = 'https://openrouter.ai/api/v1';
-const getOpenRouterApiEndpoint = openRouterApiBaseUrl => {
-  const trimmedBaseUrl = (openRouterApiBaseUrl || defaultOpenRouterApiBaseUrl).replace(/\/+$/, '');
-  return `${trimmedBaseUrl}/chat/completions`;
+const activateByEvent = (event, assetDir, platform) => {
+  // @ts-ignore
+  return activateByEvent$1(event, assetDir, platform);
+};
+
+const executeProvider = async ({
+  assetDir,
+  event,
+  method,
+  noProviderFoundMessage,
+  params,
+  platform
+}) => {
+  await activateByEvent(event, assetDir, platform);
+  // @ts-ignore
+  const result = invoke$1(method, ...params);
+  return result;
+};
+
+const CommandExecute = 'ExtensionHostCommand.executeCommand';
+const FileSystemWriteFile = 'ExtensionHostFileSystem.writeFile';
+
+const normalizeLimitInfo = value => {
+  if (!value || typeof value !== 'object') {
+    return undefined;
+  }
+  const limitRemaining = Reflect.get(value, 'limitRemaining');
+  const limitReset = Reflect.get(value, 'limitReset');
+  const retryAfter = Reflect.get(value, 'retryAfter');
+  const usage = Reflect.get(value, 'usage');
+  const usageDaily = Reflect.get(value, 'usageDaily');
+  const normalized = {
+    limitRemaining: typeof limitRemaining === 'number' || limitRemaining === null ? limitRemaining : undefined,
+    limitReset: typeof limitReset === 'string' || limitReset === null ? limitReset : undefined,
+    retryAfter: typeof retryAfter === 'string' || retryAfter === null ? retryAfter : undefined,
+    usage: typeof usage === 'number' ? usage : undefined,
+    usageDaily: typeof usageDaily === 'number' ? usageDaily : undefined
+  };
+  const hasDetails = normalized.limitRemaining !== undefined || normalized.limitReset !== undefined || normalized.retryAfter !== undefined || normalized.usage !== undefined || normalized.usageDaily !== undefined;
+  return hasDetails ? normalized : undefined;
+};
+
+const normalizeMockResult = value => {
+  if (typeof value === 'string') {
+    return {
+      text: value,
+      type: 'success'
+    };
+  }
+  if (!value || typeof value !== 'object') {
+    return {
+      details: 'request-failed',
+      type: 'error'
+    };
+  }
+  const type = Reflect.get(value, 'type');
+  if (type === 'success') {
+    const text = Reflect.get(value, 'text');
+    if (typeof text === 'string') {
+      return {
+        text,
+        type: 'success'
+      };
+    }
+    return {
+      details: 'request-failed',
+      type: 'error'
+    };
+  }
+  if (type === 'error') {
+    const details = Reflect.get(value, 'details');
+    if (details === 'request-failed' || details === 'too-many-requests' || details === 'http-error') {
+      const rawMessage = Reflect.get(value, 'rawMessage');
+      const statusCode = Reflect.get(value, 'statusCode');
+      return {
+        details,
+        limitInfo: normalizeLimitInfo(Reflect.get(value, 'limitInfo')),
+        rawMessage: typeof rawMessage === 'string' ? rawMessage : undefined,
+        statusCode: typeof statusCode === 'number' ? statusCode : undefined,
+        type: 'error'
+      };
+    }
+  }
+  const text = Reflect.get(value, 'text');
+  if (typeof text === 'string') {
+    return {
+      text,
+      type: 'success'
+    };
+  }
+  return {
+    details: 'request-failed',
+    type: 'error'
+  };
+};
+
+const getMockOpenRouterAssistantText = async (messages, modelId, openRouterApiBaseUrl, openRouterApiKey, mockApiCommandId, assetDir, platform) => {
+  if (!mockApiCommandId) {
+    return {
+      details: 'request-failed',
+      type: 'error'
+    };
+  }
+  try {
+    const result = await executeProvider({
+      assetDir,
+      event: `onCommand:${mockApiCommandId}`,
+      method: CommandExecute,
+      noProviderFoundMessage: 'No mock api command found',
+      params: [mockApiCommandId, {
+        messages,
+        modelId,
+        openRouterApiBaseUrl,
+        openRouterApiKey
+      }],
+      platform
+    });
+    return normalizeMockResult(result);
+  } catch {
+    return {
+      details: 'request-failed',
+      type: 'error'
+    };
+  }
+};
+
+const OnFileSystem = 'onFileSystem';
+
+const isPathTraversalAttempt = path => {
+  if (!path) {
+    return false;
+  }
+  if (path.startsWith('/') || path.startsWith('\\')) {
+    return true;
+  }
+  if (path.startsWith('file://')) {
+    return true;
+  }
+  if (/^[a-zA-Z]:[\\/]/.test(path)) {
+    return true;
+  }
+  const segments = path.split(/[\\/]/);
+  return segments.includes('..');
+};
+const normalizeRelativePath = path => {
+  const segments = path.split(/[\\/]/).filter(segment => segment && segment !== '.');
+  if (segments.length === 0) {
+    return '.';
+  }
+  return segments.join('/');
+};
+const parseToolArguments = rawArguments => {
+  if (typeof rawArguments !== 'string') {
+    return {};
+  }
+  try {
+    const parsed = JSON.parse(rawArguments);
+    if (!parsed || typeof parsed !== 'object') {
+      return {};
+    }
+    return parsed;
+  } catch {
+    return {};
+  }
+};
+const executeFileSystemCommand = async (method, params, options) => {
+  return executeProvider({
+    assetDir: options.assetDir,
+    event: OnFileSystem,
+    method,
+    noProviderFoundMessage: 'No file system provider found',
+    params,
+    platform: options.platform
+  });
+};
+const getBasicChatTools = () => {
+  return [{
+    function: {
+      description: 'Read UTF-8 text content from a file inside the currently open workspace folder.',
+      name: 'read_file',
+      parameters: {
+        additionalProperties: false,
+        properties: {
+          path: {
+            description: 'Relative file path within the workspace (for example: src/index.ts).',
+            type: 'string'
+          }
+        },
+        required: ['path'],
+        type: 'object'
+      }
+    },
+    type: 'function'
+  }, {
+    function: {
+      description: 'Write UTF-8 text content to a file inside the currently open workspace folder.',
+      name: 'write_file',
+      parameters: {
+        additionalProperties: false,
+        properties: {
+          content: {
+            description: 'New UTF-8 text content to write to the file.',
+            type: 'string'
+          },
+          path: {
+            description: 'Relative file path within the workspace (for example: src/index.ts).',
+            type: 'string'
+          }
+        },
+        required: ['path', 'content'],
+        type: 'object'
+      }
+    },
+    type: 'function'
+  }, {
+    function: {
+      description: 'List direct children (files and folders) for a folder inside the currently open workspace folder.',
+      name: 'list_files',
+      parameters: {
+        additionalProperties: false,
+        properties: {
+          path: {
+            description: 'Relative folder path within the workspace. Use "." for the workspace root.',
+            type: 'string'
+          }
+        },
+        type: 'object'
+      }
+    },
+    type: 'function'
+  }];
+};
+const executeChatTool = async (name, rawArguments, options) => {
+  const args = parseToolArguments(rawArguments);
+  if (name === 'read_file') {
+    const filePath = typeof args.path === 'string' ? args.path : '';
+    if (!filePath || isPathTraversalAttempt(filePath)) {
+      return JSON.stringify({
+        error: 'Access denied: path must be relative and stay within the open workspace folder.'
+      });
+    }
+    const normalizedPath = normalizeRelativePath(filePath);
+    try {
+      const content = await readFile(normalizedPath);
+      return JSON.stringify({
+        content,
+        path: normalizedPath
+      });
+    } catch (error) {
+      return JSON.stringify({
+        error: String(error),
+        path: normalizedPath
+      });
+    }
+  }
+  if (name === 'write_file') {
+    const filePath = typeof args.path === 'string' ? args.path : '';
+    const content = typeof args.content === 'string' ? args.content : '';
+    if (!filePath || isPathTraversalAttempt(filePath)) {
+      return JSON.stringify({
+        error: 'Access denied: path must be relative and stay within the open workspace folder.'
+      });
+    }
+    const normalizedPath = normalizeRelativePath(filePath);
+    try {
+      await executeFileSystemCommand(FileSystemWriteFile, ['file', normalizedPath, content], options);
+      return JSON.stringify({
+        ok: true,
+        path: normalizedPath
+      });
+    } catch (error) {
+      return JSON.stringify({
+        error: String(error),
+        path: normalizedPath
+      });
+    }
+  }
+  if (name === 'list_files') {
+    const folderPath = typeof args.path === 'string' && args.path ? args.path : '.';
+    if (isPathTraversalAttempt(folderPath)) {
+      return JSON.stringify({
+        error: 'Access denied: path must be relative and stay within the open workspace folder.'
+      });
+    }
+    const normalizedPath = normalizeRelativePath(folderPath);
+    try {
+      const entries = await invoke('FileSystem.readDirWithFileTypes', normalizedPath);
+      return JSON.stringify({
+        entries,
+        path: normalizedPath
+      });
+    } catch (error) {
+      return JSON.stringify({
+        error: String(error),
+        path: normalizedPath
+      });
+    }
+  }
+  return JSON.stringify({
+    error: `Unknown tool: ${name}`
+  });
+};
+
+const getClientRequestIdHeader = () => {
+  return {
+    'x-client-request-id': crypto.randomUUID()
+  };
+};
+
+const getOpenApiApiEndpoint = (openApiApiBaseUrl, stream) => {
+  if (stream) {
+    return `${openApiApiBaseUrl}/chat/completions?stream=true`;
+  }
+  return `${openApiApiBaseUrl}/chat/completions`;
 };
 
 const getTextContent = content => {
@@ -2126,53 +2541,612 @@ const getTextContent = content => {
       textParts.push(maybeText);
     }
   }
-  return textParts.join('\n');
+  return textParts.join('\n');
+};
+
+const getStreamChunkText = content => {
+  if (typeof content === 'string') {
+    return content;
+  }
+  if (!Array.isArray(content)) {
+    return '';
+  }
+  return content.map(part => {
+    if (!part || typeof part !== 'object') {
+      return '';
+    }
+    const text = Reflect.get(part, 'text');
+    return typeof text === 'string' ? text : '';
+  }).join('');
+};
+const parseSseEvent = eventChunk => {
+  const lines = eventChunk.split('\n');
+  const dataLines = [];
+  for (const line of lines) {
+    if (!line.startsWith('data:')) {
+      continue;
+    }
+    dataLines.push(line.slice(5).trimStart());
+  }
+  return dataLines;
+};
+const parseOpenApiStream = async (response, onTextChunk) => {
+  if (!response.body) {
+    return {
+      details: 'request-failed',
+      type: 'error'
+    };
+  }
+  const reader = response.body.getReader();
+  const decoder = new TextDecoder();
+  let remainder = '';
+  let text = '';
+  let done = false;
+  while (!done) {
+    const {
+      done: streamDone,
+      value
+    } = await reader.read();
+    if (streamDone) {
+      done = true;
+    } else if (value) {
+      remainder += decoder.decode(value, {
+        stream: true
+      });
+    }
+    while (true) {
+      const separatorIndex = remainder.indexOf('\n\n');
+      if (separatorIndex === -1) {
+        break;
+      }
+      const rawEvent = remainder.slice(0, separatorIndex);
+      remainder = remainder.slice(separatorIndex + 2);
+      const dataLines = parseSseEvent(rawEvent);
+      if (dataLines.length === 0) {
+        continue;
+      }
+      for (const line of dataLines) {
+        if (line === '[DONE]') {
+          done = true;
+          break;
+        }
+        let parsed;
+        try {
+          parsed = JSON.parse(line);
+        } catch {
+          continue;
+        }
+        if (!parsed || typeof parsed !== 'object') {
+          continue;
+        }
+        const choices = Reflect.get(parsed, 'choices');
+        if (!Array.isArray(choices)) {
+          continue;
+        }
+        const firstChoice = choices[0];
+        if (!firstChoice || typeof firstChoice !== 'object') {
+          continue;
+        }
+        const delta = Reflect.get(firstChoice, 'delta');
+        if (!delta || typeof delta !== 'object') {
+          continue;
+        }
+        const content = Reflect.get(delta, 'content');
+        const chunkText = getStreamChunkText(content);
+        if (!chunkText) {
+          continue;
+        }
+        text += chunkText;
+        if (onTextChunk) {
+          await onTextChunk(chunkText);
+        }
+      }
+    }
+  }
+  if (remainder) {
+    const dataLines = parseSseEvent(remainder);
+    for (const line of dataLines) {
+      if (line === '[DONE]') {
+        continue;
+      }
+      let parsed;
+      try {
+        parsed = JSON.parse(line);
+      } catch {
+        continue;
+      }
+      if (!parsed || typeof parsed !== 'object') {
+        continue;
+      }
+      const choices = Reflect.get(parsed, 'choices');
+      if (!Array.isArray(choices)) {
+        continue;
+      }
+      const firstChoice = choices[0];
+      if (!firstChoice || typeof firstChoice !== 'object') {
+        continue;
+      }
+      const delta = Reflect.get(firstChoice, 'delta');
+      if (!delta || typeof delta !== 'object') {
+        continue;
+      }
+      const content = Reflect.get(delta, 'content');
+      const chunkText = getStreamChunkText(content);
+      if (!chunkText) {
+        continue;
+      }
+      text += chunkText;
+      if (onTextChunk) {
+        await onTextChunk(chunkText);
+      }
+    }
+  }
+  return {
+    text,
+    type: 'success'
+  };
+};
+const getOpenApiErrorDetails = async response => {
+  let parsed;
+  try {
+    parsed = await response.json();
+  } catch {
+    return {};
+  }
+  if (!parsed || typeof parsed !== 'object') {
+    return {};
+  }
+  const error = Reflect.get(parsed, 'error');
+  if (!error || typeof error !== 'object') {
+    return {};
+  }
+  const errorCode = Reflect.get(error, 'code');
+  const errorMessage = Reflect.get(error, 'message');
+  const errorType = Reflect.get(error, 'type');
+  return {
+    errorCode: typeof errorCode === 'string' ? errorCode : undefined,
+    errorMessage: typeof errorMessage === 'string' ? errorMessage : undefined,
+    errorType: typeof errorType === 'string' ? errorType : undefined
+  };
+};
+const getOpenApiAssistantText = async (messages, modelId, openApiApiKey, openApiApiBaseUrl, assetDir, platform, options) => {
+  const {
+    onTextChunk,
+    stream
+  } = options ?? {
+    stream: false
+  };
+  const completionMessages = messages.map(message => ({
+    content: message.text,
+    role: message.role
+  }));
+  const tools = getBasicChatTools();
+  const maxToolIterations = 4;
+  for (let i = 0; i <= maxToolIterations; i++) {
+    let response;
+    try {
+      response = await fetch(getOpenApiApiEndpoint(openApiApiBaseUrl, stream), {
+        body: JSON.stringify({
+          messages: completionMessages,
+          model: modelId,
+          ...(stream ? {
+            stream: true
+          } : {}),
+          tool_choice: 'auto',
+          tools
+        }),
+        headers: {
+          Authorization: `Bearer ${openApiApiKey}`,
+          'Content-Type': 'application/json',
+          ...getClientRequestIdHeader()
+        },
+        method: 'POST'
+      });
+    } catch {
+      return {
+        details: 'request-failed',
+        type: 'error'
+      };
+    }
+    if (!response.ok) {
+      const {
+        errorCode,
+        errorMessage,
+        errorType
+      } = await getOpenApiErrorDetails(response);
+      return {
+        details: 'http-error',
+        errorCode,
+        errorMessage,
+        errorType,
+        statusCode: response.status,
+        type: 'error'
+      };
+    }
+    if (stream) {
+      return parseOpenApiStream(response, onTextChunk);
+    }
+    let parsed;
+    try {
+      parsed = await response.json();
+    } catch {
+      return {
+        details: 'request-failed',
+        type: 'error'
+      };
+    }
+    if (!parsed || typeof parsed !== 'object') {
+      return {
+        text: '',
+        type: 'success'
+      };
+    }
+    const choices = Reflect.get(parsed, 'choices');
+    if (!Array.isArray(choices)) {
+      return {
+        text: '',
+        type: 'success'
+      };
+    }
+    const firstChoice = choices[0];
+    if (!firstChoice || typeof firstChoice !== 'object') {
+      return {
+        text: '',
+        type: 'success'
+      };
+    }
+    const message = Reflect.get(firstChoice, 'message');
+    if (!message || typeof message !== 'object') {
+      return {
+        text: '',
+        type: 'success'
+      };
+    }
+    const toolCalls = Reflect.get(message, 'tool_calls');
+    if (Array.isArray(toolCalls) && toolCalls.length > 0) {
+      completionMessages.push(message);
+      for (const toolCall of toolCalls) {
+        if (!toolCall || typeof toolCall !== 'object') {
+          continue;
+        }
+        const id = Reflect.get(toolCall, 'id');
+        const toolFunction = Reflect.get(toolCall, 'function');
+        if (typeof id !== 'string' || !toolFunction || typeof toolFunction !== 'object') {
+          continue;
+        }
+        const name = Reflect.get(toolFunction, 'name');
+        const rawArguments = Reflect.get(toolFunction, 'arguments');
+        const content = typeof name === 'string' ? await executeChatTool(name, rawArguments, {
+          assetDir,
+          platform
+        }) : '{}';
+        completionMessages.push({
+          content,
+          role: 'tool',
+          tool_call_id: id
+        });
+      }
+      continue;
+    }
+    const content = Reflect.get(message, 'content');
+    return {
+      text: getTextContent(content),
+      type: 'success'
+    };
+  }
+  return {
+    details: 'request-failed',
+    type: 'error'
+  };
+};
+
+const getOpenApiErrorMessage = errorResult => {
+  switch (errorResult.details) {
+    case 'http-error':
+      {
+        const errorMessage = errorResult.errorMessage?.trim();
+        const hasErrorCode = typeof errorResult.errorCode === 'string' && errorResult.errorCode.length > 0;
+        const hasErrorType = typeof errorResult.errorType === 'string' && errorResult.errorType.length > 0;
+        if (errorResult.statusCode === 429) {
+          let prefix = 'OpenAI rate limit exceeded (429)';
+          if (hasErrorCode) {
+            prefix = `OpenAI rate limit exceeded (429: ${errorResult.errorCode})`;
+          }
+          if (hasErrorType) {
+            prefix += ` [${errorResult.errorType}]`;
+          }
+          prefix += '.';
+          if (!errorMessage) {
+            return prefix;
+          }
+          return `${prefix} ${errorMessage}`;
+        }
+        if (typeof errorResult.statusCode === 'number') {
+          let prefix = `OpenAI request failed (status ${errorResult.statusCode})`;
+          if (hasErrorCode) {
+            prefix += `: ${errorResult.errorCode}`;
+          }
+          if (hasErrorType) {
+            prefix += ` [${errorResult.errorType}]`;
+          }
+          prefix += '.';
+          if (!errorMessage) {
+            return prefix;
+          }
+          return `${prefix} ${errorMessage}`;
+        }
+        if (errorMessage) {
+          return `OpenAI request failed. ${errorMessage}`;
+        }
+        return openApiRequestFailedMessage;
+      }
+    case 'request-failed':
+      return openApiRequestFailedMessage;
+  }
+};
+
+const getOpenApiModelId = selectedModelId => {
+  const openApiPrefix = 'openapi/';
+  const openAiPrefix = 'openai/';
+  const normalizedModelId = selectedModelId.toLowerCase();
+  if (normalizedModelId.startsWith(openApiPrefix)) {
+    return selectedModelId.slice(openApiPrefix.length);
+  }
+  if (normalizedModelId.startsWith(openAiPrefix)) {
+    return selectedModelId.slice(openAiPrefix.length);
+  }
+  return selectedModelId;
+};
+
+const getOpenRouterApiEndpoint = openRouterApiBaseUrl => {
+  const trimmedBaseUrl = openRouterApiBaseUrl.replace(/\/+$/, '');
+  return `${trimmedBaseUrl}/chat/completions`;
+};
+
+const getOpenRouterKeyEndpoint = openRouterApiBaseUrl => {
+  const trimmedBaseUrl = openRouterApiBaseUrl.replace(/\/+$/, '');
+  return `${trimmedBaseUrl}/auth/key`;
+};
+
+const getOpenRouterRaw429Message = async response => {
+  let parsed;
+  try {
+    parsed = await response.json();
+  } catch {
+    return undefined;
+  }
+  if (!parsed || typeof parsed !== 'object') {
+    return undefined;
+  }
+  const error = Reflect.get(parsed, 'error');
+  if (!error || typeof error !== 'object') {
+    return undefined;
+  }
+  const metadata = Reflect.get(error, 'metadata');
+  if (!metadata || typeof metadata !== 'object') {
+    return undefined;
+  }
+  const raw = Reflect.get(metadata, 'raw');
+  if (typeof raw !== 'string' || !raw) {
+    return undefined;
+  }
+  return raw;
+};
+const getOpenRouterLimitInfo = async (openRouterApiKey, openRouterApiBaseUrl) => {
+  let response;
+  try {
+    response = await fetch(getOpenRouterKeyEndpoint(openRouterApiBaseUrl), {
+      headers: {
+        Authorization: `Bearer ${openRouterApiKey}`,
+        ...getClientRequestIdHeader()
+      },
+      method: 'GET'
+    });
+  } catch {
+    return undefined;
+  }
+  if (!response.ok) {
+    return undefined;
+  }
+  let parsed;
+  try {
+    parsed = await response.json();
+  } catch {
+    return undefined;
+  }
+  if (!parsed || typeof parsed !== 'object') {
+    return undefined;
+  }
+  const data = Reflect.get(parsed, 'data');
+  if (!data || typeof data !== 'object') {
+    return undefined;
+  }
+  const limitRemaining = Reflect.get(data, 'limit_remaining');
+  const limitReset = Reflect.get(data, 'limit_reset');
+  const usage = Reflect.get(data, 'usage');
+  const usageDaily = Reflect.get(data, 'usage_daily');
+  const normalizedLimitInfo = {
+    limitRemaining: typeof limitRemaining === 'number' || limitRemaining === null ? limitRemaining : undefined,
+    limitReset: typeof limitReset === 'string' || limitReset === null ? limitReset : undefined,
+    usage: typeof usage === 'number' ? usage : undefined,
+    usageDaily: typeof usageDaily === 'number' ? usageDaily : undefined
+  };
+  const hasLimitInfo = normalizedLimitInfo.limitRemaining !== undefined || normalizedLimitInfo.limitReset !== undefined || normalizedLimitInfo.usage !== undefined || normalizedLimitInfo.usageDaily !== undefined;
+  if (!hasLimitInfo) {
+    return undefined;
+  }
+  return normalizedLimitInfo;
+};
+const getOpenRouterAssistantText = async (messages, modelId, openRouterApiKey, openRouterApiBaseUrl, assetDir, platform) => {
+  const completionMessages = messages.map(message => ({
+    content: message.text,
+    role: message.role
+  }));
+  const tools = getBasicChatTools();
+  const maxToolIterations = 4;
+  for (let i = 0; i <= maxToolIterations; i++) {
+    let response;
+    try {
+      response = await fetch(getOpenRouterApiEndpoint(openRouterApiBaseUrl), {
+        body: JSON.stringify({
+          messages: completionMessages,
+          model: modelId,
+          tool_choice: 'auto',
+          tools
+        }),
+        headers: {
+          Authorization: `Bearer ${openRouterApiKey}`,
+          'Content-Type': 'application/json',
+          ...getClientRequestIdHeader()
+        },
+        method: 'POST'
+      });
+    } catch {
+      return {
+        details: 'request-failed',
+        type: 'error'
+      };
+    }
+    if (!response.ok) {
+      if (response.status === 429) {
+        const retryAfter = response.headers?.get?.('retry-after') ?? null;
+        const rawMessage = await getOpenRouterRaw429Message(response);
+        const limitInfo = await getOpenRouterLimitInfo(openRouterApiKey, openRouterApiBaseUrl);
+        return {
+          details: 'too-many-requests',
+          limitInfo: limitInfo || retryAfter ? {
+            ...limitInfo,
+            retryAfter
+          } : undefined,
+          rawMessage,
+          statusCode: 429,
+          type: 'error'
+        };
+      }
+      return {
+        details: 'http-error',
+        statusCode: response.status,
+        type: 'error'
+      };
+    }
+    let parsed;
+    try {
+      parsed = await response.json();
+    } catch {
+      return {
+        details: 'request-failed',
+        type: 'error'
+      };
+    }
+    if (!parsed || typeof parsed !== 'object') {
+      return {
+        text: '',
+        type: 'success'
+      };
+    }
+    const choices = Reflect.get(parsed, 'choices');
+    if (!Array.isArray(choices)) {
+      return {
+        text: '',
+        type: 'success'
+      };
+    }
+    const firstChoice = choices[0];
+    if (!firstChoice || typeof firstChoice !== 'object') {
+      return {
+        text: '',
+        type: 'success'
+      };
+    }
+    const message = Reflect.get(firstChoice, 'message');
+    if (!message || typeof message !== 'object') {
+      return {
+        text: '',
+        type: 'success'
+      };
+    }
+    const toolCalls = Reflect.get(message, 'tool_calls');
+    if (Array.isArray(toolCalls) && toolCalls.length > 0) {
+      completionMessages.push(message);
+      for (const toolCall of toolCalls) {
+        if (!toolCall || typeof toolCall !== 'object') {
+          continue;
+        }
+        const id = Reflect.get(toolCall, 'id');
+        const toolFunction = Reflect.get(toolCall, 'function');
+        if (typeof id !== 'string' || !toolFunction || typeof toolFunction !== 'object') {
+          continue;
+        }
+        const name = Reflect.get(toolFunction, 'name');
+        const rawArguments = Reflect.get(toolFunction, 'arguments');
+        const content = typeof name === 'string' ? await executeChatTool(name, rawArguments, {
+          assetDir,
+          platform
+        }) : '{}';
+        completionMessages.push({
+          content,
+          role: 'tool',
+          tool_call_id: id
+        });
+      }
+      continue;
+    }
+    const content = Reflect.get(message, 'content');
+    return {
+      text: getTextContent(content),
+      type: 'success'
+    };
+  }
+  return {
+    details: 'request-failed',
+    type: 'error'
+  };
 };
 
-const getOpenRouterAssistantText = async (userText, modelId, openRouterApiKey, openRouterApiBaseUrl) => {
-  let response;
-  try {
-    response = await fetch(getOpenRouterApiEndpoint(openRouterApiBaseUrl), {
-      body: JSON.stringify({
-        messages: [{
-          content: userText,
-          role: 'user'
-        }],
-        model: modelId
-      }),
-      headers: {
-        Authorization: `Bearer ${openRouterApiKey}`,
-        'Content-Type': 'application/json'
-      },
-      method: 'POST'
-    });
-  } catch {
-    throw new Error(openRouterRequestFailedMessage);
-  }
-  if (!response.ok) {
-    throw new Error(`Failed to get OpenRouter response: ${response.status}`);
-  }
-  const parsed = await response.json();
-  if (!parsed || typeof parsed !== 'object') {
-    return '';
+const getOpenRouterTooManyRequestsMessage = errorResult => {
+  const details = [];
+  if (errorResult.rawMessage) {
+    details.push(errorResult.rawMessage);
   }
-  const choices = Reflect.get(parsed, 'choices');
-  if (!Array.isArray(choices)) {
-    return '';
+  const {
+    limitInfo
+  } = errorResult;
+  if (limitInfo) {
+    if (limitInfo.retryAfter) {
+      details.push(`Retry after: ${limitInfo.retryAfter}.`);
+    }
+    if (limitInfo.limitReset) {
+      details.push(`Limit resets: ${limitInfo.limitReset}.`);
+    }
+    if (limitInfo.limitRemaining === null) {
+      details.push('Credits remaining: unlimited.');
+    } else if (typeof limitInfo.limitRemaining === 'number') {
+      details.push(`Credits remaining: ${limitInfo.limitRemaining}.`);
+    }
+    if (typeof limitInfo.usageDaily === 'number') {
+      details.push(`Credits used today (UTC): ${limitInfo.usageDaily}.`);
+    }
+    if (typeof limitInfo.usage === 'number') {
+      details.push(`Credits used (all time): ${limitInfo.usage}.`);
+    }
   }
-  const firstChoice = choices[0];
-  if (!firstChoice || typeof firstChoice !== 'object') {
-    return '';
+  if (details.length === 0) {
+    return openRouterTooManyRequestsMessage;
   }
-  const message = Reflect.get(firstChoice, 'message');
-  if (!message || typeof message !== 'object') {
-    return '';
+  return `${openRouterTooManyRequestsMessage} ${details.join(' ')}`;
+};
+
+const getOpenRouterErrorMessage = errorResult => {
+  switch (errorResult.details) {
+    case 'http-error':
+    case 'request-failed':
+      return openRouterRequestFailedMessage;
+    case 'too-many-requests':
+      return getOpenRouterTooManyRequestsMessage(errorResult);
   }
-  const content = Reflect.get(message, 'content');
-  return getTextContent(content);
 };
 
-/* eslint-disable @cspell/spellchecker */
+// cspell:ignore openrouter
 const getOpenRouterModelId = selectedModelId => {
   const openRouterPrefix = 'openrouter/';
   if (selectedModelId.toLowerCase().startsWith(openRouterPrefix)) {
@@ -2181,7 +3155,17 @@ const getOpenRouterModelId = selectedModelId => {
   return selectedModelId;
 };
 
-/* eslint-disable @cspell/spellchecker */
+const isOpenApiModel = (selectedModelId, models) => {
+  const selectedModel = models.find(model => model.id === selectedModelId);
+  const normalizedProvider = selectedModel?.provider?.toLowerCase();
+  if (normalizedProvider === 'openapi' || normalizedProvider === 'openai' || normalizedProvider === 'open-ai') {
+    return true;
+  }
+  const normalizedModelId = selectedModelId.toLowerCase();
+  return normalizedModelId.startsWith('openapi/') || normalizedModelId.startsWith('openai/');
+};
+
+// cspell:ignore openrouter
 
 const isOpenRouterModel = (selectedModelId, models) => {
   const selectedModel = models.find(model => model.id === selectedModelId);
@@ -2192,25 +3176,70 @@ const isOpenRouterModel = (selectedModelId, models) => {
   return selectedModelId.toLowerCase().startsWith('openrouter/');
 };
 
-const getAiResponse = async (userText, nextMessageId, selectedModelId, models, openRouterApiKey, openRouterApiBaseUrl) => {
+const getAiResponse = async ({
+  assetDir,
+  messages,
+  mockApiCommandId,
+  models,
+  nextMessageId,
+  onTextChunk,
+  openApiApiBaseUrl,
+  openApiApiKey,
+  openRouterApiBaseUrl,
+  openRouterApiKey,
+  platform,
+  selectedModelId,
+  streamingEnabled = false,
+  useMockApi,
+  userText
+}) => {
   let text = '';
+  const usesOpenApiModel = isOpenApiModel(selectedModelId, models);
   const usesOpenRouterModel = isOpenRouterModel(selectedModelId, models);
-  if (usesOpenRouterModel) {
-    if (openRouterApiKey) {
-      try {
-        text = await getOpenRouterAssistantText(userText, getOpenRouterModelId(selectedModelId), openRouterApiKey, openRouterApiBaseUrl);
-      } catch (error) {
-        if (error instanceof Error && error.message) {
-          text = error.message;
-        } else {
-          text = openRouterRequestFailedMessage;
-        }
+  if (usesOpenApiModel) {
+    if (openApiApiKey) {
+      const result = await getOpenApiAssistantText(messages, getOpenApiModelId(selectedModelId), openApiApiKey, openApiApiBaseUrl, assetDir, platform, {
+        onTextChunk,
+        stream: streamingEnabled
+      });
+      if (result.type === 'success') {
+        const {
+          text: assistantText
+        } = result;
+        text = assistantText;
+      } else {
+        text = getOpenApiErrorMessage(result);
+      }
+    } else {
+      text = openApiApiKeyRequiredMessage;
+    }
+  } else if (usesOpenRouterModel) {
+    const modelId = getOpenRouterModelId(selectedModelId);
+    if (useMockApi) {
+      const result = await getMockOpenRouterAssistantText(messages, modelId, openRouterApiBaseUrl, openRouterApiKey, mockApiCommandId, assetDir, platform);
+      if (result.type === 'success') {
+        const {
+          text: assistantText
+        } = result;
+        text = assistantText;
+      } else {
+        text = getOpenRouterErrorMessage(result);
+      }
+    } else if (openRouterApiKey) {
+      const result = await getOpenRouterAssistantText(messages, modelId, openRouterApiKey, openRouterApiBaseUrl, assetDir, platform);
+      if (result.type === 'success') {
+        const {
+          text: assistantText
+        } = result;
+        text = assistantText;
+      } else {
+        text = getOpenRouterErrorMessage(result);
       }
     } else {
       text = openRouterApiKeyRequiredMessage;
     }
   }
-  if (!text && !usesOpenRouterModel) {
+  if (!text && !usesOpenApiModel && !usesOpenRouterModel) {
     text = await getMockAiResponse(userText);
   }
   const assistantTime = new Date().toLocaleTimeString([], {
@@ -2232,6 +3261,75 @@ const update = async settings => {
   await invoke('Preferences.update', settings);
 };
 
+const setOpenApiApiKey = async (state, openApiApiKey, persist = true) => {
+  if (persist) {
+    await update({
+      'secrets.openApiKey': openApiApiKey
+    });
+  }
+  return {
+    ...state,
+    openApiApiKey,
+    openApiApiKeyInput: openApiApiKey
+  };
+};
+
+const handleClickSaveOpenApiApiKey = async state => {
+  const {
+    openApiApiKeyInput
+  } = state;
+  const openApiApiKey = openApiApiKeyInput.trim();
+  if (!openApiApiKey) {
+    return state;
+  }
+  const updatedState = await setOpenApiApiKey(state, openApiApiKey);
+  const session = updatedState.sessions.find(item => item.id === updatedState.selectedSessionId);
+  if (!session) {
+    return updatedState;
+  }
+  const lastMessage = session.messages.at(-1);
+  const shouldRetryOpenApi = lastMessage?.role === 'assistant' && lastMessage.text === openApiApiKeyRequiredMessage;
+  if (!shouldRetryOpenApi) {
+    return updatedState;
+  }
+  const previousUserMessage = session.messages.toReversed().find(item => item.role === 'user');
+  if (!previousUserMessage) {
+    return updatedState;
+  }
+  const retryMessages = session.messages.slice(0, -1);
+  const assistantMessage = await getAiResponse({
+    assetDir: updatedState.assetDir,
+    messages: retryMessages,
+    mockApiCommandId: updatedState.mockApiCommandId,
+    models: updatedState.models,
+    nextMessageId: updatedState.nextMessageId,
+    openApiApiBaseUrl: updatedState.openApiApiBaseUrl,
+    openApiApiKey: updatedState.openApiApiKey,
+    openRouterApiBaseUrl: updatedState.openRouterApiBaseUrl,
+    openRouterApiKey: updatedState.openRouterApiKey,
+    platform: updatedState.platform,
+    selectedModelId: updatedState.selectedModelId,
+    useMockApi: updatedState.useMockApi,
+    userText: previousUserMessage.text
+  });
+  const updatedSession = {
+    ...session,
+    messages: [...session.messages.slice(0, -1), assistantMessage]
+  };
+  await saveChatSession(updatedSession);
+  const updatedSessions = updatedState.sessions.map(item => {
+    if (item.id !== updatedState.selectedSessionId) {
+      return item;
+    }
+    return updatedSession;
+  });
+  return {
+    ...updatedState,
+    nextMessageId: updatedState.nextMessageId + 1,
+    sessions: updatedSessions
+  };
+};
+
 const setOpenRouterApiKey = async (state, openRouterApiKey, persist = true) => {
   if (persist) {
     await update({
@@ -2253,7 +3351,18 @@ const handleClickSaveOpenRouterApiKey = async state => {
   if (!openRouterApiKey) {
     return state;
   }
-  const updatedState = await setOpenRouterApiKey(state, openRouterApiKey);
+  const optimisticState = {
+    ...state,
+    openRouterApiKeyState: 'saving'
+  };
+  set(state.uid, state, optimisticState);
+  // @ts-ignore
+  await invoke('Chat.rerender');
+  const persistedState = await setOpenRouterApiKey(optimisticState, openRouterApiKey);
+  const updatedState = {
+    ...persistedState,
+    openRouterApiKeyState: 'idle'
+  };
   const session = updatedState.sessions.find(item => item.id === updatedState.selectedSessionId);
   if (!session) {
     return updatedState;
@@ -2267,7 +3376,22 @@ const handleClickSaveOpenRouterApiKey = async state => {
   if (!previousUserMessage) {
     return updatedState;
   }
-  const assistantMessage = await getAiResponse(previousUserMessage.text, updatedState.nextMessageId, updatedState.selectedModelId, updatedState.models, openRouterApiKey, updatedState.openRouterApiBaseUrl);
+  const retryMessages = session.messages.slice(0, -1);
+  const assistantMessage = await getAiResponse({
+    assetDir: updatedState.assetDir,
+    messages: retryMessages,
+    mockApiCommandId: updatedState.mockApiCommandId,
+    models: updatedState.models,
+    nextMessageId: updatedState.nextMessageId,
+    openApiApiBaseUrl: updatedState.openApiApiBaseUrl,
+    openApiApiKey: updatedState.openApiApiKey,
+    openRouterApiBaseUrl: updatedState.openRouterApiBaseUrl,
+    openRouterApiKey,
+    platform: updatedState.platform,
+    selectedModelId: updatedState.selectedModelId,
+    useMockApi: updatedState.useMockApi,
+    userText: previousUserMessage.text
+  });
   const updatedSession = {
     ...session,
     messages: [...session.messages.slice(0, -1), assistantMessage]
@@ -2282,6 +3406,7 @@ const handleClickSaveOpenRouterApiKey = async state => {
   return {
     ...updatedState,
     nextMessageId: updatedState.nextMessageId + 1,
+    openRouterApiKeyState: 'idle',
     sessions: updatedSessions
   };
 };
@@ -2294,16 +3419,54 @@ const focusInput = state => {
   };
 };
 
+const appendMessageToSelectedSession = (sessions, selectedSessionId, message) => {
+  return sessions.map(session => {
+    if (session.id !== selectedSessionId) {
+      return session;
+    }
+    return {
+      ...session,
+      messages: [...session.messages, message]
+    };
+  });
+};
+const updateMessageTextInSelectedSession = (sessions, selectedSessionId, messageId, text, inProgress) => {
+  return sessions.map(session => {
+    if (session.id !== selectedSessionId) {
+      return session;
+    }
+    return {
+      ...session,
+      messages: session.messages.map(message => {
+        if (message.id !== messageId) {
+          return message;
+        }
+        return {
+          ...message,
+          inProgress,
+          text
+        };
+      })
+    };
+  });
+};
 const handleSubmit = async state => {
   const {
+    assetDir,
     composerValue,
+    mockApiCommandId,
     models,
     nextMessageId,
+    openApiApiBaseUrl,
+    openApiApiKey,
     openRouterApiBaseUrl,
     openRouterApiKey,
+    platform,
     selectedModelId,
     selectedSessionId,
     sessions,
+    streamingEnabled,
+    useMockApi,
     viewMode
   } = state;
   const userText = composerValue.trim();
@@ -2320,6 +3483,18 @@ const handleSubmit = async state => {
     text: userText,
     time: userTime
   };
+  const assistantMessageId = `message-${nextMessageId + 1}`;
+  const assistantTime = new Date().toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit'
+  });
+  const inProgressAssistantMessage = {
+    id: assistantMessageId,
+    inProgress: true,
+    role: 'assistant',
+    text: '',
+    time: assistantTime
+  };
   let workingSessions = sessions;
   if (viewMode === 'detail') {
     const loadedSession = await getChatSession(selectedSessionId);
@@ -2337,12 +3512,13 @@ const handleSubmit = async state => {
     const newSessionId = generateSessionId();
     const newSession = {
       id: newSessionId,
-      messages: [userMessage],
+      messages: streamingEnabled ? [userMessage, inProgressAssistantMessage] : [userMessage],
       title: `Chat ${workingSessions.length + 1}`
     };
     await saveChatSession(newSession);
     optimisticState = focusInput({
       ...state,
+      composerHeight: getMinComposerHeightForState(state),
       composerValue: '',
       inputSource: 'script',
       lastSubmittedSessionId: newSessionId,
@@ -2352,21 +3528,15 @@ const handleSubmit = async state => {
       viewMode: 'detail'
     });
   } else {
-    const updatedSessions = workingSessions.map(session => {
-      if (session.id !== selectedSessionId) {
-        return session;
-      }
-      return {
-        ...session,
-        messages: [...session.messages, userMessage]
-      };
-    });
+    const updatedWithUser = appendMessageToSelectedSession(workingSessions, selectedSessionId, userMessage);
+    const updatedSessions = streamingEnabled ? appendMessageToSelectedSession(updatedWithUser, selectedSessionId, inProgressAssistantMessage) : updatedWithUser;
     const selectedSession = updatedSessions.find(session => session.id === selectedSessionId);
     if (selectedSession) {
       await saveChatSession(selectedSession);
     }
     optimisticState = focusInput({
       ...state,
+      composerHeight: getMinComposerHeightForState(state),
       composerValue: '',
       inputSource: 'script',
       lastSubmittedSessionId: selectedSessionId,
@@ -2377,23 +3547,56 @@ const handleSubmit = async state => {
   set(state.uid, state, optimisticState);
   // @ts-ignore
   await invoke('Chat.rerender');
-  const assistantMessage = await getAiResponse(userText, optimisticState.nextMessageId, selectedModelId, models, openRouterApiKey, openRouterApiBaseUrl);
-  const updatedSessions = optimisticState.sessions.map(session => {
-    if (session.id !== optimisticState.selectedSessionId) {
-      return session;
+  let latestState = optimisticState;
+  let previousState = optimisticState;
+  const selectedOptimisticSession = latestState.sessions.find(session => session.id === latestState.selectedSessionId);
+  const messages = (selectedOptimisticSession?.messages ?? []).filter(message => !message.inProgress);
+  const onTextChunk = streamingEnabled ? async chunk => {
+    const selectedSession = latestState.sessions.find(session => session.id === latestState.selectedSessionId);
+    if (!selectedSession) {
+      return;
     }
-    return {
-      ...session,
-      messages: [...session.messages, assistantMessage]
+    const assistantMessage = selectedSession.messages.find(message => message.id === assistantMessageId);
+    if (!assistantMessage) {
+      return;
+    }
+    const updatedText = assistantMessage.text + chunk;
+    const updatedSessions = updateMessageTextInSelectedSession(latestState.sessions, latestState.selectedSessionId, assistantMessageId, updatedText, true);
+    const nextState = {
+      ...latestState,
+      sessions: updatedSessions
     };
+    set(state.uid, previousState, nextState);
+    previousState = nextState;
+    latestState = nextState;
+    // @ts-ignore
+    await invoke('Chat.rerender');
+  } : undefined;
+  const assistantMessage = await getAiResponse({
+    assetDir,
+    messages,
+    mockApiCommandId,
+    models,
+    nextMessageId: optimisticState.nextMessageId,
+    onTextChunk,
+    openApiApiBaseUrl,
+    openApiApiKey,
+    openRouterApiBaseUrl,
+    openRouterApiKey,
+    platform,
+    selectedModelId,
+    streamingEnabled,
+    useMockApi,
+    userText
   });
-  const selectedSession = updatedSessions.find(session => session.id === optimisticState.selectedSessionId);
+  const updatedSessions = streamingEnabled ? updateMessageTextInSelectedSession(latestState.sessions, latestState.selectedSessionId, assistantMessageId, assistantMessage.text, false) : appendMessageToSelectedSession(latestState.sessions, latestState.selectedSessionId, assistantMessage);
+  const selectedSession = updatedSessions.find(session => session.id === latestState.selectedSessionId);
   if (selectedSession) {
     await saveChatSession(selectedSession);
   }
   return focusInput({
-    ...optimisticState,
-    nextMessageId: optimisticState.nextMessageId + 1,
+    ...latestState,
+    nextMessageId: latestState.nextMessageId + 1,
     sessions: updatedSessions
   });
 };
@@ -2438,7 +3641,11 @@ const getRenameIdFromInputName = name => {
   return name.slice(RenamePrefix.length);
 };
 
-/* eslint-disable @cspell/spellchecker */
+const OpenApiApiKeyInput = 'open-api-api-key';
+const SaveOpenApiApiKey = 'save-openapi-api-key';
+const OpenOpenApiApiKeySettings = 'open-openapi-api-key-settings';
+
+// cspell:ignore openrouter
 const OpenRouterApiKeyInput = 'open-router-api-key';
 const SaveOpenRouterApiKey = 'save-openrouter-api-key';
 const OpenOpenRouterApiKeySettings = 'open-openrouter-api-key-settings';
@@ -2524,9 +3731,15 @@ const handleClick = async (state, name, id = '') => {
   if (name === SaveOpenRouterApiKey) {
     return handleClickSaveOpenRouterApiKey(state);
   }
+  if (name === SaveOpenApiApiKey) {
+    return handleClickSaveOpenApiApiKey(state);
+  }
   if (name === OpenOpenRouterApiKeySettings) {
     return handleClickOpenRouterApiKeySettings(state);
   }
+  if (name === OpenOpenApiApiKeySettings) {
+    return handleClickOpenApiApiKeySettings(state);
+  }
   return state;
 };
 
@@ -2557,6 +3770,12 @@ const handleClickSettings = async () => {
 };
 
 const handleInput = async (state, name, value, inputSource = 'user') => {
+  if (name === OpenApiApiKeyInput) {
+    return {
+      ...state,
+      openApiApiKeyInput: value
+    };
+  }
   if (name === OpenRouterApiKeyInput) {
     return {
       ...state,
@@ -2566,8 +3785,10 @@ const handleInput = async (state, name, value, inputSource = 'user') => {
   if (name !== Composer) {
     return state;
   }
+  const composerHeight = await getComposerHeight(state, value);
   return {
     ...state,
+    composerHeight,
     composerValue: value,
     inputSource
   };
@@ -2632,6 +3853,7 @@ const submitRename = async state => {
   }
   return {
     ...state,
+    composerHeight: getMinComposerHeightForState(state),
     composerValue: '',
     inputSource: 'script',
     renamingSessionId: '',
@@ -2670,7 +3892,29 @@ const handleModelChange = async (state, value) => {
 };
 
 const handleNewline = async state => {
-  return handleInput(state, Composer, `${state.composerValue}\n`);
+  const {
+    composerValue
+  } = state;
+  return handleInput(state, Composer, `${composerValue}\n`);
+};
+
+const handleChatListScroll = async (state, chatListScrollTop) => {
+  if (state.chatListScrollTop === chatListScrollTop) {
+    return state;
+  }
+  return {
+    ...state,
+    chatListScrollTop
+  };
+};
+const handleMessagesScroll = async (state, messagesScrollTop) => {
+  if (state.messagesScrollTop === messagesScrollTop) {
+    return state;
+  }
+  return {
+    ...state,
+    messagesScrollTop
+  };
 };
 
 const id = 7201;
@@ -2699,6 +3943,32 @@ const isObject = value => {
   return typeof value === 'object' && value !== null;
 };
 
+const getSavedChatListScrollTop = savedState => {
+  if (!isObject(savedState)) {
+    return undefined;
+  }
+  const {
+    chatListScrollTop
+  } = savedState;
+  if (typeof chatListScrollTop !== 'number') {
+    return undefined;
+  }
+  return chatListScrollTop;
+};
+
+const getSavedMessagesScrollTop = savedState => {
+  if (!isObject(savedState)) {
+    return undefined;
+  }
+  const {
+    messagesScrollTop
+  } = savedState;
+  if (typeof messagesScrollTop !== 'number') {
+    return undefined;
+  }
+  return messagesScrollTop;
+};
+
 const getSavedSelectedModelId = savedState => {
   if (!isObject(savedState)) {
     return undefined;
@@ -2751,6 +4021,39 @@ const getSavedViewMode = savedState => {
   return viewMode;
 };
 
+const loadOpenApiApiKey = async () => {
+  try {
+    const savedOpenApiKey = await get('secrets.openApiKey');
+    if (typeof savedOpenApiKey === 'string' && savedOpenApiKey) {
+      return savedOpenApiKey;
+    }
+    const legacySavedOpenApiApiKey = await get('secrets.openApiApiKey');
+    if (typeof legacySavedOpenApiApiKey === 'string' && legacySavedOpenApiApiKey) {
+      return legacySavedOpenApiApiKey;
+    }
+    const legacySavedOpenAiApiKey = await get('secrets.openAiApiKey');
+    return typeof legacySavedOpenAiApiKey === 'string' ? legacySavedOpenAiApiKey : '';
+  } catch {
+    return '';
+  }
+};
+const loadOpenRouterApiKey = async () => {
+  try {
+    const savedOpenRouterApiKey = await get('secrets.openRouterApiKey');
+    return typeof savedOpenRouterApiKey === 'string' ? savedOpenRouterApiKey : '';
+  } catch {
+    return '';
+  }
+};
+const loadPreferences = async () => {
+  const openApiApiKey = await loadOpenApiApiKey();
+  const openRouterApiKey = await loadOpenRouterApiKey();
+  return {
+    openApiApiKey,
+    openRouterApiKey
+  };
+};
+
 const toSummarySession = session => {
   return {
     id: session.id,
@@ -2776,13 +4079,10 @@ const loadSelectedSessionMessages = async (sessions, selectedSessionId) => {
 const loadContent = async (state, savedState) => {
   const savedSelectedModelId = getSavedSelectedModelId(savedState);
   const savedViewMode = getSavedViewMode(savedState);
-  let openRouterApiKey = '';
-  try {
-    const savedOpenRouterApiKey = await get('secrets.openRouterApiKey');
-    openRouterApiKey = typeof savedOpenRouterApiKey === 'string' ? savedOpenRouterApiKey : '';
-  } catch {
-    openRouterApiKey = '';
-  }
+  const {
+    openApiApiKey,
+    openRouterApiKey
+  } = await loadPreferences();
   const legacySavedSessions = getSavedSessions(savedState);
   const storedSessions = await listChatSessions();
   let sessions = storedSessions;
@@ -2800,6 +4100,8 @@ const loadContent = async (state, savedState) => {
   }
   const preferredSessionId = getSavedSelectedSessionId(savedState) || state.selectedSessionId;
   const preferredModelId = savedSelectedModelId || state.selectedModelId;
+  const chatListScrollTop = getSavedChatListScrollTop(savedState) ?? state.chatListScrollTop;
+  const messagesScrollTop = getSavedMessagesScrollTop(savedState) ?? state.messagesScrollTop;
   const selectedModelId = state.models.some(model => model.id === preferredModelId) ? preferredModelId : state.models[0]?.id || '';
   const selectedSessionId = sessions.some(session => session.id === preferredSessionId) ? preferredSessionId : sessions[0]?.id || '';
   sessions = await loadSelectedSessionMessages(sessions, selectedSessionId);
@@ -2807,7 +4109,11 @@ const loadContent = async (state, savedState) => {
   const viewMode = sessions.length === 0 || !selectedSessionId ? 'list' : preferredViewMode === 'detail' ? 'detail' : 'list';
   return {
     ...state,
+    chatListScrollTop,
     initial: false,
+    messagesScrollTop,
+    openApiApiKey,
+    openApiApiKeyInput: openApiApiKey,
     openRouterApiKey,
     openRouterApiKeyInput: openRouterApiKey,
     selectedModelId,
@@ -2851,12 +4157,22 @@ const openMockSession = async (state, mockSessionId, mockChatMessages) => {
   };
 };
 
+const getCss = composerHeight => {
+  return `:root {
+  --ChatInputBoxHeight: ${composerHeight}px;
+}`;
+};
+
 // TODO render things like scrollbar height,scrollbar offset, textarea height,
 // list height
-const css = `
-`;
+
 const renderCss = (oldState, newState) => {
-  return [SetCss, newState.uid, css];
+  const {
+    composerHeight,
+    uid
+  } = newState;
+  const css = getCss(composerHeight);
+  return [SetCss, uid, css];
 };
 
 const getFocusSelector = focus => {
@@ -2906,6 +4222,8 @@ const ChatListItemLabel = 'ChatListItemLabel';
 const Markdown = 'Markdown';
 const Message = 'Message';
 const ChatMessageContent = 'ChatMessageContent';
+const ChatOrderedList = 'ChatOrderedList';
+const ChatOrderedListItem = 'ChatOrderedListItem';
 const MessageUser = 'MessageUser';
 const MessageAssistant = 'MessageAssistant';
 const MultilineInputBox = 'MultilineInputBox';
@@ -2930,13 +4248,19 @@ const HandleClickList = 17;
 const HandleClickDelete = 18;
 const HandleSubmit = 19;
 const HandleModelChange = 20;
+const HandleChatListScroll = 21;
+const HandleMessagesScroll = 22;
 
 const getModelLabel = model => {
   if (model.provider === 'openRouter') {
     return `${model.name} (OpenRouter)`;
   }
+  if (model.provider === 'openApi' || model.provider === 'openAI' || model.provider === 'openai') {
+    return `${model.name} (OpenAI)`;
+  }
   return model.name;
 };
+
 const getModelOptionDOm = (model, selectedModelId) => {
   return [{
     childCount: 1,
@@ -3004,7 +4328,7 @@ const getUsageOverviewDom = (tokensUsed, tokensMax) => {
   }, text(usageLabel)];
 };
 
-const getChatSendAreaDom = (composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax) => {
+const getChatSendAreaDom = (composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, composerHeight = 28, composerFontSize = 13, composerFontFamily = 'system-ui', composerLineHeight = 20) => {
   const isSendDisabled = composerValue.trim() === '';
   const modelOptions = models.flatMap(model => getModelOptionDOm(model, selectedModelId));
   return [{
@@ -3022,7 +4346,7 @@ const getChatSendAreaDom = (composerValue, models, selectedModelId, usageOvervie
     onFocus: HandleFocus,
     onInput: HandleInput,
     placeholder: composePlaceholder(),
-    rows: 4,
+    // style: `height:${composerHeight}px;font-size:${composerFontSize}px;font-family:${composerFontFamily};line-height:${composerLineHeight}px;`,
     type: TextArea,
     value: composerValue
   }, {
@@ -3111,18 +4435,27 @@ const getChatHeaderDomDetailMode = selectedSessionTitle => {
   }, text(selectedSessionTitle), ...getChatHeaderActionsDom()];
 };
 
-const getMissingOpenRouterApiKeyDom = openRouterApiKeyInput => {
+const getMissingApiKeyDom = ({
+  getApiKeyText,
+  inputName,
+  inputValue,
+  openSettingsButtonName,
+  placeholder,
+  saveButtonDisabled = false,
+  saveButtonName,
+  saveButtonText = save()
+}) => {
   return [{
     childCount: 2,
     type: Div
   }, {
     childCount: 0,
     className: InputBox,
-    name: OpenRouterApiKeyInput,
+    name: inputName,
     onInput: HandleInput,
-    placeholder: openRouterApiKeyPlaceholder(),
+    placeholder,
     type: Input,
-    value: openRouterApiKeyInput
+    value: inputValue
   }, {
     childCount: 2,
     className: Actions,
@@ -3130,35 +4463,77 @@ const getMissingOpenRouterApiKeyDom = openRouterApiKeyInput => {
   }, {
     childCount: 1,
     className: mergeClassNames(Button, ButtonPrimary),
-    name: SaveOpenRouterApiKey,
+    disabled: saveButtonDisabled,
+    name: saveButtonName,
     onClick: HandleClick,
     type: Button$1
-  }, text(save()), {
+  }, text(saveButtonText), {
     childCount: 1,
     className: mergeClassNames(Button, ButtonSecondary),
-    name: OpenOpenRouterApiKeySettings,
+    name: openSettingsButtonName,
     onClick: HandleClick,
     type: Button$1
-  }, text(getOpenRouterApiKey())];
+  }, text(getApiKeyText)];
+};
+
+const getMissingOpenApiApiKeyDom = openApiApiKeyInput => {
+  return getMissingApiKeyDom({
+    getApiKeyText: getOpenApiApiKey(),
+    inputName: OpenApiApiKeyInput,
+    inputValue: openApiApiKeyInput,
+    openSettingsButtonName: OpenOpenApiApiKeySettings,
+    placeholder: openApiApiKeyPlaceholder(),
+    saveButtonName: SaveOpenApiApiKey
+  });
+};
+
+const getMissingOpenRouterApiKeyDom = (openRouterApiKeyInput, openRouterApiKeyState = 'idle') => {
+  const isSaving = openRouterApiKeyState === 'saving';
+  return getMissingApiKeyDom({
+    getApiKeyText: getOpenRouterApiKey(),
+    inputName: OpenRouterApiKeyInput,
+    inputValue: openRouterApiKeyInput,
+    openSettingsButtonName: OpenOpenRouterApiKeySettings,
+    placeholder: openRouterApiKeyPlaceholder(),
+    saveButtonDisabled: isSaving,
+    saveButtonName: SaveOpenRouterApiKey,
+    saveButtonText: isSaving ? saving() : save()
+  });
 };
 
 const getOpenRouterRequestFailedDom = () => {
   return [{
     childCount: openRouterRequestFailureReasons.length,
-    className: Markdown,
+    className: ChatOrderedList,
     type: Ol
   }, ...openRouterRequestFailureReasons.flatMap(reason => {
     return [{
       childCount: 1,
+      className: ChatOrderedListItem,
+      type: Li
+    }, text(reason)];
+  })];
+};
+const getOpenRouterTooManyRequestsDom = () => {
+  return [{
+    childCount: openRouterTooManyRequestsReasons.length,
+    className: ChatOrderedList,
+    type: Ol
+  }, ...openRouterTooManyRequestsReasons.flatMap(reason => {
+    return [{
+      childCount: 1,
+      className: ChatOrderedListItem,
       type: Li
     }, text(reason)];
   })];
 };
-const getChatMessageDom = (message, openRouterApiKeyInput) => {
+const getChatMessageDom = (message, openRouterApiKeyInput, openApiApiKeyInput = '', openRouterApiKeyState = 'idle') => {
   const roleClassName = message.role === 'user' ? MessageUser : MessageAssistant;
+  const isOpenApiApiKeyMissingMessage = message.role === 'assistant' && message.text === openApiApiKeyRequiredMessage;
   const isOpenRouterApiKeyMissingMessage = message.role === 'assistant' && message.text === openRouterApiKeyRequiredMessage;
   const isOpenRouterRequestFailedMessage = message.role === 'assistant' && message.text === openRouterRequestFailedMessage;
-  const extraChildCount = isOpenRouterApiKeyMissingMessage || isOpenRouterRequestFailedMessage ? 2 : 1;
+  const isOpenRouterTooManyRequestsMessage = message.role === 'assistant' && message.text.startsWith(openRouterTooManyRequestsMessage);
+  const extraChildCount = isOpenApiApiKeyMissingMessage || isOpenRouterApiKeyMissingMessage || isOpenRouterRequestFailedMessage || isOpenRouterTooManyRequestsMessage ? 2 : 1;
   return [{
     childCount: 1,
     className: mergeClassNames(Message, roleClassName),
@@ -3171,7 +4546,7 @@ const getChatMessageDom = (message, openRouterApiKeyInput) => {
     childCount: 1,
     className: Markdown,
     type: P
-  }, text(message.text), ...(isOpenRouterApiKeyMissingMessage ? getMissingOpenRouterApiKeyDom(openRouterApiKeyInput) : []), ...(isOpenRouterRequestFailedMessage ? getOpenRouterRequestFailedDom() : [])];
+  }, text(message.text), ...(isOpenApiApiKeyMissingMessage ? getMissingOpenApiApiKeyDom(openApiApiKeyInput) : []), ...(isOpenRouterApiKeyMissingMessage ? getMissingOpenRouterApiKeyDom(openRouterApiKeyInput, openRouterApiKeyState) : []), ...(isOpenRouterRequestFailedMessage ? getOpenRouterRequestFailedDom() : []), ...(isOpenRouterTooManyRequestsMessage ? getOpenRouterTooManyRequestsDom() : [])];
 };
 
 const getEmptyMessagesDom = () => {
@@ -3181,18 +4556,21 @@ const getEmptyMessagesDom = () => {
     type: Div
   }, text(startConversation())];
 };
-const getMessagesDom = (messages, openRouterApiKeyInput) => {
+
+const getMessagesDom = (messages, openRouterApiKeyInput, openApiApiKeyInput = '', openRouterApiKeyState = 'idle', messagesScrollTop = 0) => {
   if (messages.length === 0) {
     return getEmptyMessagesDom();
   }
   return [{
     childCount: messages.length,
     className: 'ChatMessages',
+    onScroll: HandleMessagesScroll,
+    scrollTop: messagesScrollTop,
     type: Div
-  }, ...messages.flatMap(message => getChatMessageDom(message, openRouterApiKeyInput))];
+  }, ...messages.flatMap(message => getChatMessageDom(message, openRouterApiKeyInput, openApiApiKeyInput, openRouterApiKeyState))];
 };
 
-const getChatModeDetailVirtualDom = (sessions, selectedSessionId, composerValue, openRouterApiKeyInput, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax) => {
+const getChatModeDetailVirtualDom = (sessions, selectedSessionId, composerValue, openRouterApiKeyInput, openApiApiKeyInput, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, openRouterApiKeyState = 'idle', composerHeight = 28, composerFontSize = 13, composerFontFamily = 'system-ui', composerLineHeight = 20, messagesScrollTop = 0) => {
   const selectedSession = sessions.find(session => session.id === selectedSessionId);
   const selectedSessionTitle = selectedSession?.title || chatTitle();
   const messages = selectedSession ? selectedSession.messages : [];
@@ -3200,7 +4578,7 @@ const getChatModeDetailVirtualDom = (sessions, selectedSessionId, composerValue,
     childCount: 3,
     className: mergeClassNames(Viewlet, Chat),
     type: Div
-  }, ...getChatHeaderDomDetailMode(selectedSessionTitle), ...getMessagesDom(messages, openRouterApiKeyInput), ...getChatSendAreaDom(composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax)];
+  }, ...getChatHeaderDomDetailMode(selectedSessionTitle), ...getMessagesDom(messages, openRouterApiKeyInput, openApiApiKeyInput, openRouterApiKeyState, messagesScrollTop), ...getChatSendAreaDom(composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, composerHeight, composerFontSize, composerFontFamily, composerLineHeight)];
 };
 
 const getChatHeaderListModeDom = () => {
@@ -3257,7 +4635,7 @@ const getSessionDom = session => {
   }, text('🗑')];
 };
 
-const getChatListDom = (sessions, selectedSessionId) => {
+const getChatListDom = (sessions, selectedSessionId, chatListScrollTop = 0) => {
   if (sessions.length === 0) {
     return getEmptyChatSessionsDom();
   }
@@ -3265,16 +4643,18 @@ const getChatListDom = (sessions, selectedSessionId) => {
     childCount: sessions.length,
     className: ChatList,
     onClick: HandleClickList,
+    onScroll: HandleChatListScroll,
+    scrollTop: chatListScrollTop,
     type: Div
   }, ...sessions.flatMap(getSessionDom)];
 };
 
-const getChatModeListVirtualDom = (sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax) => {
+const getChatModeListVirtualDom = (sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, composerHeight = 28, composerFontSize = 13, composerFontFamily = 'system-ui', composerLineHeight = 20, chatListScrollTop = 0) => {
   return [{
     childCount: 3,
     className: mergeClassNames(Viewlet, Chat),
     type: Div
-  }, ...getChatHeaderListModeDom(), ...getChatListDom(sessions), ...getChatSendAreaDom(composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax)];
+  }, ...getChatHeaderListModeDom(), ...getChatListDom(sessions, selectedSessionId, chatListScrollTop), ...getChatSendAreaDom(composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, composerHeight, composerFontSize, composerFontFamily, composerLineHeight)];
 };
 
 const getChatModeUnsupportedVirtualDom = () => {
@@ -3284,12 +4664,12 @@ const getChatModeUnsupportedVirtualDom = () => {
   }, text(unknownViewMode())];
 };
 
-const getChatVirtualDom = (sessions, selectedSessionId, composerValue, openRouterApiKeyInput, viewMode, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax) => {
+const getChatVirtualDom = (sessions, selectedSessionId, composerValue, openRouterApiKeyInput, viewMode, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, openApiApiKeyInput = '', openRouterApiKeyState = 'idle', composerHeight = 28, composerFontSize = 13, composerFontFamily = 'system-ui', composerLineHeight = 20, chatListScrollTop = 0, messagesScrollTop = 0) => {
   switch (viewMode) {
     case 'detail':
-      return getChatModeDetailVirtualDom(sessions, selectedSessionId, composerValue, openRouterApiKeyInput, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax);
+      return getChatModeDetailVirtualDom(sessions, selectedSessionId, composerValue, openRouterApiKeyInput, openApiApiKeyInput, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, openRouterApiKeyState, composerHeight, composerFontSize, composerFontFamily, composerLineHeight, messagesScrollTop);
     case 'list':
-      return getChatModeListVirtualDom(sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax);
+      return getChatModeListVirtualDom(sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, composerHeight, composerFontSize, composerFontFamily, composerLineHeight, chatListScrollTop);
     default:
       return getChatModeUnsupportedVirtualDom();
   }
@@ -3297,10 +4677,18 @@ const getChatVirtualDom = (sessions, selectedSessionId, composerValue, openRoute
 
 const renderItems = (oldState, newState) => {
   const {
+    chatListScrollTop,
+    composerFontFamily,
+    composerFontSize,
+    composerHeight,
+    composerLineHeight,
     composerValue,
     initial,
+    messagesScrollTop,
     models,
+    openApiApiKeyInput,
     openRouterApiKeyInput,
+    openRouterApiKeyState,
     selectedModelId,
     selectedSessionId,
     sessions,
@@ -3313,7 +4701,7 @@ const renderItems = (oldState, newState) => {
   if (initial) {
     return [SetDom2, uid, []];
   }
-  const dom = getChatVirtualDom(sessions, selectedSessionId, composerValue, openRouterApiKeyInput, viewMode, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax);
+  const dom = getChatVirtualDom(sessions, selectedSessionId, composerValue, openRouterApiKeyInput, viewMode, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, openApiApiKeyInput, openRouterApiKeyState, composerHeight, composerFontSize, composerFontFamily, composerLineHeight, chatListScrollTop, messagesScrollTop);
   return [SetDom2, uid, dom];
 };
 
@@ -3324,6 +4712,14 @@ const renderIncremental = (oldState, newState) => {
   return [SetPatches, newState.uid, patches];
 };
 
+const renderScrollTop = (oldState, newState) => {
+  const {
+    messagesScrollTop,
+    uid
+  } = newState;
+  return [SetProperty, uid, '.ChatMessages', 'scrollTop', messagesScrollTop];
+};
+
 const renderValue = (oldState, newState) => {
   const {
     composerValue
@@ -3343,6 +4739,8 @@ const getRenderer = diffType => {
       return renderIncremental;
     case RenderItems:
       return renderItems;
+    case RenderScrollTop:
+      return renderScrollTop;
     case RenderValue:
       return renderValue;
     default:
@@ -3404,6 +4802,12 @@ const renderEventListeners = () => {
   }, {
     name: HandleModelChange,
     params: ['handleModelChange', TargetValue]
+  }, {
+    name: HandleChatListScroll,
+    params: ['handleChatListScroll', 'event.target.scrollTop']
+  }, {
+    name: HandleMessagesScroll,
+    params: ['handleMessagesScroll', 'event.target.scrollTop']
   }, {
     name: HandleFocus,
     params: ['handleInputFocus', TargetName]
@@ -3424,6 +4828,7 @@ const reset = async state => {
   await clearChatSessions();
   return {
     ...state,
+    composerHeight: getMinComposerHeightForState(state),
     composerValue: '',
     openRouterApiKey: '',
     selectedSessionId: '',
@@ -3441,8 +4846,10 @@ const resize = (state, dimensions) => {
 
 const saveState = state => {
   const {
+    chatListScrollTop,
     composerValue,
     height,
+    messagesScrollTop,
     nextMessageId,
     renamingSessionId,
     selectedModelId,
@@ -3453,8 +4860,10 @@ const saveState = state => {
     y
   } = state;
   return {
+    chatListScrollTop,
     composerValue,
     height,
+    messagesScrollTop,
     nextMessageId,
     renamingSessionId,
     selectedModelId,
@@ -3488,6 +4897,21 @@ const setChatList = state => {
   };
 };
 
+const defaultMockApiCommandId = 'ChatE2e.mockApi';
+const useMockApi = (state, value, mockApiCommandId = defaultMockApiCommandId) => {
+  if (!value) {
+    return {
+      ...state,
+      useMockApi: false
+    };
+  }
+  return {
+    ...state,
+    mockApiCommandId,
+    useMockApi: true
+  };
+};
+
 const commandMap = {
   'Chat.clearInput': wrapCommand(clearInput),
   'Chat.create': create,
@@ -3497,6 +4921,7 @@ const commandMap = {
   'Chat.getKeyBindings': getKeyBindings,
   'Chat.getSelectedSessionId': wrapGetter(getSelectedSessionId),
   'Chat.handleChatListContextMenu': handleChatListContextMenu,
+  'Chat.handleChatListScroll': wrapCommand(handleChatListScroll),
   'Chat.handleClick': wrapCommand(handleClick),
   'Chat.handleClickBack': wrapCommand(handleClickBack),
   'Chat.handleClickClose': handleClickClose,
@@ -3507,6 +4932,7 @@ const commandMap = {
   'Chat.handleInput': wrapCommand(handleInput),
   'Chat.handleInputFocus': wrapCommand(handleInputFocus),
   'Chat.handleKeyDown': wrapCommand(handleKeyDown),
+  'Chat.handleMessagesScroll': wrapCommand(handleMessagesScroll),
   'Chat.handleModelChange': wrapCommand(handleModelChange),
   'Chat.handleSubmit': wrapCommand(handleSubmit),
   'Chat.initialize': initialize,
@@ -3521,7 +4947,8 @@ const commandMap = {
   'Chat.saveState': wrapGetter(saveState),
   'Chat.setChatList': wrapCommand(setChatList),
   'Chat.setOpenRouterApiKey': wrapCommand(setOpenRouterApiKey),
-  'Chat.terminate': terminate
+  'Chat.terminate': terminate,
+  'Chat.useMockApi': wrapCommand(useMockApi)
 };
 
 const listen = async () => {