@lvce-editor/chat-view 1.13.0 → 1.15.0

package/dist/chatViewWorkerMain.js

@@ -1036,6 +1036,7 @@ const create$2 = rpcId => {
 };
 
 const {
+  invoke: invoke$1,
   set: set$2
 } = create$2(ExtensionHostWorker);
 
@@ -1048,9 +1049,15 @@ 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);
 };
+const openExternal = async uri => {
+  await invoke('Open.openExternal', uri);
+};
 
 const toCommandId = key => {
   const dotIndex = key.indexOf('.');
@@ -1191,25 +1198,128 @@ const i18nString = (key, placeholders = emptyObject) => {
   return key.replaceAll(RE_PLACEHOLDER, replacer);
 };
 
-const chatTitle = i18nString('Chat');
-const chats = i18nString('Chats');
-const newChat = i18nString('New Chat');
-const backToChats = i18nString('Back to chats');
-const settings = i18nString('Settings');
-const closeChat = i18nString('Close Chat');
-const clickToOpenNewChat = i18nString('Click the + button to open a new chat.');
-const startConversation = i18nString('Start a conversation by typing below.');
-i18nString('You');
-i18nString('Assistant');
-const composePlaceholder = i18nString('Type your message. Enter to send, Shift+Enter for newline.');
-const sendMessage = i18nString('Send message');
-i18nString('Send');
-const deleteChatSession$1 = i18nString('Delete chat session');
-const defaultSessionTitle = i18nString('Chat 1');
-const dummyChatA = i18nString('Dummy Chat A');
-const dummyChatB = i18nString('Dummy Chat B');
-const dummyChatC = i18nString('Dummy Chat C');
+const chatTitle = () => {
+  return i18nString('Chat');
+};
+const chats = () => {
+  return i18nString('Chats');
+};
+const newChat = () => {
+  return i18nString('New Chat');
+};
+const backToChats = () => {
+  return i18nString('Back to chats');
+};
+const settings = () => {
+  return i18nString('Settings');
+};
+const closeChat = () => {
+  return i18nString('Close Chat');
+};
+const clickToOpenNewChat = () => {
+  return i18nString('Click the + button to open a new chat.');
+};
+const startConversation = () => {
+  return i18nString('Start a conversation by typing below.');
+};
+const composePlaceholder = () => {
+  return i18nString('Type your message. Enter to send, Shift+Enter for newline.');
+};
+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 getOpenRouterApiKey = () => {
+  return i18nString('Get API Key');
+};
+const getOpenApiApiKey = () => {
+  return i18nString('Get API Key');
+};
+const deleteChatSession$1 = () => {
+  return i18nString('Delete chat session');
+};
+const defaultSessionTitle = () => {
+  return i18nString('Chat 1');
+};
+const dummyChatA = () => {
+  return i18nString('Dummy Chat A');
+};
+const dummyChatB = () => {
+  return i18nString('Dummy Chat B');
+};
+const dummyChatC = () => {
+  return i18nString('Dummy Chat C');
+};
+const unknownViewMode = () => {
+  return i18nString('Unknown view mode');
+};
+
+/* eslint-disable @cspell/spellchecker */
 
+const getDefaultModels = () => {
+  const defaultModelId = 'test';
+  return [{
+    id: defaultModelId,
+    name: 'test',
+    provider: 'test'
+  }, {
+    id: 'codex-5.3',
+    name: 'Codex 5.3',
+    provider: 'openRouter'
+  }, {
+    id: 'claude-code',
+    name: 'Claude Code',
+    provider: 'openRouter'
+  }, {
+    id: 'claude-haiku',
+    name: 'Claude Haiku',
+    provider: 'openRouter'
+  }, {
+    id: 'openRouter/openai/gpt-4o-mini',
+    name: 'GPT-4o Mini',
+    provider: 'openRouter'
+  }, {
+    id: 'openRouter/anthropic/claude-3.5-haiku',
+    name: 'Claude 3.5 Haiku',
+    provider: 'openRouter'
+  }, {
+    id: 'openRouter/google/gemini-2.0-flash-001',
+    name: 'Gemini 2.0 Flash',
+    provider: 'openRouter'
+  }, {
+    id: 'openRouter/openai/gpt-oss-20b:free',
+    name: 'GPT OSS 20B (Free)',
+    provider: 'openRouter'
+  }, {
+    id: 'openRouter/openai/gpt-oss-120b:free',
+    name: 'GPT OSS 120B (Free)',
+    provider: 'openRouter'
+  }, {
+    id: 'openRouter/meta-llama/llama-3.3-70b-instruct:free',
+    name: 'Llama 3.3 70B Instruct (Free)',
+    provider: 'openRouter'
+  }, {
+    id: 'openRouter/google/gemma-3-27b-it:free',
+    name: 'Gemma 3 27B IT (Free)',
+    provider: 'openRouter'
+  }, {
+    id: 'openRouter/qwen/qwen3-coder:free',
+    name: 'Qwen3 Coder (Free)',
+    provider: 'openRouter'
+  }, {
+    id: 'openRouter/mistralai/mistral-small-3.1-24b-instruct:free',
+    name: 'Mistral Small 3.1 24B Instruct (Free)',
+    provider: 'openRouter'
+  }];
+};
 const createDefaultState = () => {
   const defaultSessionId = 'session-1';
   const defaultModelId = 'test';
@@ -1225,38 +1335,17 @@ const createDefaultState = () => {
     inputSource: 'script',
     lastSubmittedSessionId: '',
     listItemHeight: 40,
-    models: [{
-      id: defaultModelId,
-      name: 'test',
-      provider: 'test'
-    }, {
-      id: 'codex-5.3',
-      name: 'Codex 5.3',
-      provider: 'openRouter'
-    }, {
-      id: 'claude-code',
-      name: 'Claude Code',
-      provider: 'openRouter'
-    }, {
-      id: 'claude-haiku',
-      name: 'Claude Haiku',
-      provider: 'openRouter'
-    }, {
-      id: 'openRouter/openai/gpt-4o-mini',
-      name: 'GPT-4o Mini',
-      provider: 'openRouter'
-    }, {
-      id: 'openRouter/anthropic/claude-3.5-haiku',
-      name: 'Claude 3.5 Haiku',
-      provider: 'openRouter'
-    }, {
-      id: 'openRouter/google/gemini-2.0-flash-001',
-      name: 'Gemini 2.0 Flash',
-      provider: 'openRouter'
-    }],
+    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',
     platform: 0,
     renamingSessionId: '',
     selectedModelId: defaultModelId,
@@ -1264,12 +1353,13 @@ const createDefaultState = () => {
     sessions: [{
       id: defaultSessionId,
       messages: [],
-      title: defaultSessionTitle
+      title: defaultSessionTitle()
     }],
     tokensMax: 0,
     tokensUsed: 0,
     uid: 0,
     usageOverviewEnabled: false,
+    useMockApi: false,
     viewMode: 'list',
     warningCount: 0,
     width: 0,
@@ -1369,12 +1459,15 @@ const SetPatches = 'Viewlet.setPatches';
 
 const FocusChatInput = 8000;
 
-const Button$1 = 'button';
+const Button$2 = 'button';
 
-const Button = 1;
+const Button$1 = 1;
 const Div = 4;
+const Input = 6;
 const Span = 8;
 const Text = 12;
+const Li = 48;
+const Ol = 49;
 const P = 50;
 const TextArea = 62;
 const Select$1 = 63;
@@ -1697,6 +1790,10 @@ const getKeyBindings = () => {
   }];
 };
 
+const getSelectedSessionId = state => {
+  return state.selectedSessionId;
+};
+
 const getListIndex = (state, eventX, eventY) => {
   const {
     headerHeight,
@@ -1734,96 +1831,143 @@ const handleChatListContextMenu = async (state, eventX, eventY) => {
   return state;
 };
 
-const LVCE_CHAT_SESSIONS_DB_NAME = 'lvce-chat-view-sessions';
-const LVCE_CHAT_SESSIONS_DB_VERSION = 1;
-const LVCE_CHAT_SESSIONS_STORE = 'chat-sessions';
 const toError = error => {
   if (error instanceof Error) {
     return error;
   }
   return new Error('IndexedDB request failed');
 };
+
 const requestToPromise = async createRequest => {
   const request = createRequest();
-  return new Promise((resolve, reject) => {
-    request.addEventListener('success', () => {
-      resolve(request.result);
-    });
-    request.addEventListener('error', () => {
-      reject(toError(request.error));
-    });
+  const {
+    promise,
+    reject,
+    resolve
+  } = Promise.withResolvers();
+  request.addEventListener('success', () => {
+    resolve(request.result);
   });
-};
-const transactionToPromise = async createTransaction => {
-  const transaction = createTransaction();
-  return new Promise((resolve, reject) => {
-    transaction.addEventListener('complete', () => {
-      resolve();
-    });
-    transaction.addEventListener('error', () => {
-      reject(toError(transaction.error));
-    });
-    transaction.addEventListener('abort', () => {
-      reject(toError(transaction.error));
-    });
+  request.addEventListener('error', () => {
+    reject(toError(request.error));
   });
+  return promise;
 };
-const openSessionsDatabase = async () => {
-  const request = indexedDB.open(LVCE_CHAT_SESSIONS_DB_NAME, LVCE_CHAT_SESSIONS_DB_VERSION);
+
+const openSessionsDatabase = async (databaseName, databaseVersion, storeName) => {
+  const request = indexedDB.open(databaseName, databaseVersion);
   request.addEventListener('upgradeneeded', () => {
     const database = request.result;
-    if (!database.objectStoreNames.contains(LVCE_CHAT_SESSIONS_STORE)) {
-      database.createObjectStore(LVCE_CHAT_SESSIONS_STORE, {
+    if (!database.objectStoreNames.contains(storeName)) {
+      database.createObjectStore(storeName, {
         keyPath: 'id'
       });
     }
   });
   return requestToPromise(() => request);
 };
+
+const getDatabase = async (getDatabasePromise, setDatabasePromise, databaseName, databaseVersion, storeName) => {
+  const existingDatabasePromise = getDatabasePromise();
+  if (existingDatabasePromise) {
+    return existingDatabasePromise;
+  }
+  const nextDatabasePromise = openSessionsDatabase(databaseName, databaseVersion, storeName);
+  setDatabasePromise(nextDatabasePromise);
+  return nextDatabasePromise;
+};
+
+const transactionToPromise = async createTransaction => {
+  const transaction = createTransaction();
+  const {
+    promise,
+    reject,
+    resolve
+  } = Promise.withResolvers();
+  transaction.addEventListener('complete', () => {
+    resolve();
+  });
+  transaction.addEventListener('error', () => {
+    reject(toError(transaction.error));
+  });
+  transaction.addEventListener('abort', () => {
+    reject(toError(transaction.error));
+  });
+  return promise;
+};
+
+const clear = async (getDatabasePromise, setDatabasePromise, databaseName, databaseVersion, storeName) => {
+  const database = await getDatabase(getDatabasePromise, setDatabasePromise, databaseName, databaseVersion, storeName);
+  const transaction = database.transaction(storeName, 'readwrite');
+  const createTransaction = () => transaction;
+  const store = transaction.objectStore(storeName);
+  store.clear();
+  await transactionToPromise(createTransaction);
+};
+
+const deleteSession$1 = async (getDatabasePromise, setDatabasePromise, databaseName, databaseVersion, storeName, id) => {
+  const database = await getDatabase(getDatabasePromise, setDatabasePromise, databaseName, databaseVersion, storeName);
+  const transaction = database.transaction(storeName, 'readwrite');
+  const createTransaction = () => transaction;
+  const store = transaction.objectStore(storeName);
+  store.delete(id);
+  await transactionToPromise(createTransaction);
+};
+
+const getSession = async (getDatabasePromise, setDatabasePromise, databaseName, databaseVersion, storeName, id) => {
+  const database = await getDatabase(getDatabasePromise, setDatabasePromise, databaseName, databaseVersion, storeName);
+  const transaction = database.transaction(storeName, 'readonly');
+  const store = transaction.objectStore(storeName);
+  const result = await requestToPromise(() => store.get(id));
+  return result;
+};
+
+const listSessions = async (getDatabasePromise, setDatabasePromise, databaseName, databaseVersion, storeName) => {
+  const database = await getDatabase(getDatabasePromise, setDatabasePromise, databaseName, databaseVersion, storeName);
+  const transaction = database.transaction(storeName, 'readonly');
+  const store = transaction.objectStore(storeName);
+  const result = await requestToPromise(() => store.getAll());
+  return result;
+};
+
+const setSession = async (getDatabasePromise, setDatabasePromise, databaseName, databaseVersion, storeName, session) => {
+  const database = await getDatabase(getDatabasePromise, setDatabasePromise, databaseName, databaseVersion, storeName);
+  const transaction = database.transaction(storeName, 'readwrite');
+  const createTransaction = () => transaction;
+  const store = transaction.objectStore(storeName);
+  store.put(session);
+  await transactionToPromise(createTransaction);
+};
+
 class IndexedDbChatSessionStorage {
-  async getDatabase() {
-    if (!this.databasePromise) {
-      this.databasePromise = openSessionsDatabase();
-    }
-    return this.databasePromise;
+  constructor(options = {}) {
+    this.state = {
+      databaseName: options.databaseName || 'lvce-chat-view-sessions',
+      databasePromise: undefined,
+      databaseVersion: options.databaseVersion || 1,
+      storeName: options.storeName || 'chat-sessions'
+    };
   }
+  getDatabasePromise = () => {
+    return this.state.databasePromise;
+  };
+  setDatabasePromise = databasePromise => {
+    this.state.databasePromise = databasePromise;
+  };
   async clear() {
-    const database = await this.getDatabase();
-    const transaction = database.transaction(LVCE_CHAT_SESSIONS_STORE, 'readwrite');
-    const createTransaction = () => transaction;
-    const store = transaction.objectStore(LVCE_CHAT_SESSIONS_STORE);
-    store.clear();
-    await transactionToPromise(createTransaction);
+    return clear(this.getDatabasePromise, this.setDatabasePromise, this.state.databaseName, this.state.databaseVersion, this.state.storeName);
   }
   async deleteSession(id) {
-    const database = await this.getDatabase();
-    const transaction = database.transaction(LVCE_CHAT_SESSIONS_STORE, 'readwrite');
-    const createTransaction = () => transaction;
-    const store = transaction.objectStore(LVCE_CHAT_SESSIONS_STORE);
-    store.delete(id);
-    await transactionToPromise(createTransaction);
+    return deleteSession$1(this.getDatabasePromise, this.setDatabasePromise, this.state.databaseName, this.state.databaseVersion, this.state.storeName, id);
   }
   async getSession(id) {
-    const database = await this.getDatabase();
-    const transaction = database.transaction(LVCE_CHAT_SESSIONS_STORE, 'readonly');
-    const store = transaction.objectStore(LVCE_CHAT_SESSIONS_STORE);
-    const result = await requestToPromise(() => store.get(id));
-    return result;
+    return getSession(this.getDatabasePromise, this.setDatabasePromise, this.state.databaseName, this.state.databaseVersion, this.state.storeName, id);
   }
   async listSessions() {
-    const database = await this.getDatabase();
-    const transaction = database.transaction(LVCE_CHAT_SESSIONS_STORE, 'readonly');
-    const store = transaction.objectStore(LVCE_CHAT_SESSIONS_STORE);
-    const result = await requestToPromise(() => store.getAll());
-    return result;
+    return listSessions(this.getDatabasePromise, this.setDatabasePromise, this.state.databaseName, this.state.databaseVersion, this.state.storeName);
   }
   async setSession(session) {
-    const database = await this.getDatabase();
-    const transaction = database.transaction(LVCE_CHAT_SESSIONS_STORE, 'readwrite');
-    const createTransaction = () => transaction;
-    const store = transaction.objectStore(LVCE_CHAT_SESSIONS_STORE);
-    store.put(session);
-    await transactionToPromise(createTransaction);
+    return setSession(this.getDatabasePromise, this.setDatabasePromise, this.state.databaseName, this.state.databaseVersion, this.state.storeName, session);
   }
 }
 
@@ -1956,14 +2100,45 @@ const deleteSession = async (state, id) => {
   };
 };
 
-const focusInput = state => {
-  return {
-    ...state,
-    focus: 'composer',
-    focused: true
-  };
+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 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 delay = async ms => {
   await new Promise(resolve => setTimeout(resolve, ms));
 };
@@ -1973,6 +2148,10 @@ const getMockAiResponse = async userMessage => {
   return `Mock AI response: I received "${userMessage}".`;
 };
 
+const getOpenApiApiEndpoint = openApiApiBaseUrl => {
+  return `${openApiApiBaseUrl}/chat/completions`;
+};
+
 const getTextContent = content => {
   if (typeof content === 'string') {
     return content;
@@ -1994,75 +2173,482 @@ const getTextContent = content => {
   return textParts.join('\n');
 };
 
-const defaultOpenRouterApiBaseUrl = 'https://openrouter.ai/api/v1';
+const getOpenApiAssistantText = async (messages, modelId, openApiApiKey, openApiApiBaseUrl) => {
+  let response;
+  try {
+    response = await fetch(getOpenApiApiEndpoint(openApiApiBaseUrl), {
+      body: JSON.stringify({
+        messages: messages.map(message => ({
+          content: message.text,
+          role: message.role
+        })),
+        model: modelId
+      }),
+      headers: {
+        Authorization: `Bearer ${openApiApiKey}`,
+        'Content-Type': 'application/json'
+      },
+      method: 'POST'
+    });
+  } catch {
+    return {
+      details: 'request-failed',
+      type: 'error'
+    };
+  }
+  if (!response.ok) {
+    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 content = Reflect.get(message, 'content');
+  return {
+    text: getTextContent(content),
+    type: 'success'
+  };
+};
+
+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 || defaultOpenRouterApiBaseUrl).replace(/\/+$/, '');
+  const trimmedBaseUrl = openRouterApiBaseUrl.replace(/\/+$/, '');
   return `${trimmedBaseUrl}/chat/completions`;
 };
-const getOpenRouterAssistantText = async (userText, modelId, openRouterApiKey, openRouterApiBaseUrl) => {
-  const 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'
-  });
+
+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}`
+      },
+      method: 'GET'
+    });
+  } catch {
+    return undefined;
+  }
   if (!response.ok) {
-    throw new Error(`Failed to get OpenRouter response: ${response.status}`);
+    return undefined;
+  }
+  let parsed;
+  try {
+    parsed = await response.json();
+  } catch {
+    return undefined;
   }
-  const parsed = await response.json();
   if (!parsed || typeof parsed !== 'object') {
-    return '';
+    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) => {
+  let response;
+  try {
+    response = await fetch(getOpenRouterApiEndpoint(openRouterApiBaseUrl), {
+      body: JSON.stringify({
+        messages: messages.map(message => ({
+          content: message.text,
+          role: message.role
+        })),
+        model: modelId
+      }),
+      headers: {
+        Authorization: `Bearer ${openRouterApiKey}`,
+        'Content-Type': 'application/json'
+      },
+      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 '';
+    return {
+      text: '',
+      type: 'success'
+    };
   }
   const firstChoice = choices[0];
   if (!firstChoice || typeof firstChoice !== 'object') {
-    return '';
+    return {
+      text: '',
+      type: 'success'
+    };
   }
   const message = Reflect.get(firstChoice, 'message');
   if (!message || typeof message !== 'object') {
-    return '';
+    return {
+      text: '',
+      type: 'success'
+    };
   }
   const content = Reflect.get(message, 'content');
-  return getTextContent(content);
+  return {
+    text: getTextContent(content),
+    type: 'success'
+  };
 };
 
+/* eslint-disable @cspell/spellchecker */
 const getOpenRouterModelId = selectedModelId => {
-  if (selectedModelId.startsWith('openRouter/')) {
-    return selectedModelId.slice('openRouter/'.length);
+  const openRouterPrefix = 'openrouter/';
+  if (selectedModelId.toLowerCase().startsWith(openRouterPrefix)) {
+    return selectedModelId.slice(openRouterPrefix.length);
   }
   return selectedModelId;
 };
 
+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/');
+};
+
+/* eslint-disable @cspell/spellchecker */
+
 const isOpenRouterModel = (selectedModelId, models) => {
   const selectedModel = models.find(model => model.id === selectedModelId);
-  if (selectedModel?.provider === 'openRouter') {
+  const normalizedProvider = selectedModel?.provider?.toLowerCase();
+  if (normalizedProvider === 'openrouter' || normalizedProvider === 'open-router') {
     return true;
   }
-  return selectedModelId.startsWith('openRouter/');
+  return selectedModelId.toLowerCase().startsWith('openrouter/');
 };
 
-const getAiResponse = async (userText, nextMessageId, selectedModelId, models, openRouterApiKey, openRouterApiBaseUrl) => {
+const getOpenRouterTooManyRequestsMessage = errorResult => {
+  const details = [];
+  if (errorResult.rawMessage) {
+    details.push(errorResult.rawMessage);
+  }
+  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}.`);
+    }
+  }
+  if (details.length === 0) {
+    return openRouterTooManyRequestsMessage;
+  }
+  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 getOpenApiErrorMessage = errorResult => {
+  switch (errorResult.details) {
+    case 'http-error':
+    case 'request-failed':
+      return openApiRequestFailedMessage;
+  }
+};
+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 getAiResponse = async (userText, messages, nextMessageId, selectedModelId, models, openApiApiKey, openApiApiBaseUrl, openRouterApiKey, openRouterApiBaseUrl, useMockApi, mockApiCommandId, assetDir, platform) => {
   let text = '';
-  const shouldUseOpenRouter = isOpenRouterModel(selectedModelId, models) && openRouterApiKey;
-  if (shouldUseOpenRouter) {
-    try {
-      text = await getOpenRouterAssistantText(userText, getOpenRouterModelId(selectedModelId), openRouterApiKey, openRouterApiBaseUrl);
-    } catch {
-      text = '';
+  const usesOpenApiModel = isOpenApiModel(selectedModelId, models);
+  const usesOpenRouterModel = isOpenRouterModel(selectedModelId, models);
+  if (usesOpenApiModel) {
+    if (openApiApiKey) {
+      const result = await getOpenApiAssistantText(messages, getOpenApiModelId(selectedModelId), openApiApiKey, openApiApiBaseUrl);
+      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);
+      if (result.type === 'success') {
+        const {
+          text: assistantText
+        } = result;
+        text = assistantText;
+      } else {
+        text = getOpenRouterErrorMessage(result);
+      }
+    } else {
+      text = openRouterApiKeyRequiredMessage;
     }
   }
-  if (!text) {
+  if (!text && !usesOpenApiModel && !usesOpenRouterModel) {
     text = await getMockAiResponse(userText);
   }
   const assistantTime = new Date().toLocaleTimeString([], {
@@ -2077,16 +2663,149 @@ const getAiResponse = async (userText, nextMessageId, selectedModelId, models, o
   };
 };
 
+const get = async key => {
+  return getPreference(key);
+};
+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(previousUserMessage.text, retryMessages, updatedState.nextMessageId, updatedState.selectedModelId, updatedState.models, updatedState.openApiApiKey, updatedState.openApiApiBaseUrl, updatedState.openRouterApiKey, updatedState.openRouterApiBaseUrl, updatedState.useMockApi, updatedState.mockApiCommandId, updatedState.assetDir, updatedState.platform);
+  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({
+      'secrets.openRouterApiKey': openRouterApiKey
+    });
+  }
+  return {
+    ...state,
+    openRouterApiKey,
+    openRouterApiKeyInput: openRouterApiKey
+  };
+};
+
+const handleClickSaveOpenRouterApiKey = async state => {
+  const {
+    openRouterApiKeyInput
+  } = state;
+  const openRouterApiKey = openRouterApiKeyInput.trim();
+  if (!openRouterApiKey) {
+    return state;
+  }
+  const updatedState = await setOpenRouterApiKey(state, openRouterApiKey);
+  const session = updatedState.sessions.find(item => item.id === updatedState.selectedSessionId);
+  if (!session) {
+    return updatedState;
+  }
+  const lastMessage = session.messages.at(-1);
+  const shouldRetryOpenRouter = lastMessage?.role === 'assistant' && lastMessage.text === openRouterApiKeyRequiredMessage;
+  if (!shouldRetryOpenRouter) {
+    return updatedState;
+  }
+  const previousUserMessage = session.messages.toReversed().find(item => item.role === 'user');
+  if (!previousUserMessage) {
+    return updatedState;
+  }
+  const retryMessages = session.messages.slice(0, -1);
+
+  // @ts-ignore
+  const assistantMessage = await getAiResponse(previousUserMessage.text, retryMessages, updatedState.nextMessageId, updatedState.selectedModelId, updatedState.models, updatedState.openApiApiKey, updatedState.openApiApiBaseUrl, openRouterApiKey, updatedState.openRouterApiBaseUrl, updatedState.useMockApi, updatedState.mockApiCommandId, updatedState.assetDir, updatedState.platform);
+  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 focusInput = state => {
+  return {
+    ...state,
+    focus: 'composer',
+    focused: true
+  };
+};
+
 const handleSubmit = async state => {
   const {
+    assetDir,
     composerValue,
+    mockApiCommandId,
     models,
     nextMessageId,
+    openApiApiBaseUrl,
+    openApiApiKey,
     openRouterApiBaseUrl,
     openRouterApiKey,
+    platform,
     selectedModelId,
     selectedSessionId,
     sessions,
+    useMockApi,
     viewMode
   } = state;
   const userText = composerValue.trim();
@@ -2160,7 +2879,9 @@ 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 selectedOptimisticSession = optimisticState.sessions.find(session => session.id === optimisticState.selectedSessionId);
+  const messages = selectedOptimisticSession?.messages ?? [];
+  const assistantMessage = await getAiResponse(userText, messages, optimisticState.nextMessageId, selectedModelId, models, openApiApiKey, openApiApiBaseUrl, openRouterApiKey, openRouterApiBaseUrl, useMockApi, mockApiCommandId, assetDir, platform);
   const updatedSessions = optimisticState.sessions.map(session => {
     if (session.id !== optimisticState.selectedSessionId) {
       return session;
@@ -2195,6 +2916,41 @@ const handleClickSend = async state => {
   return handleSubmit(submitState);
 };
 
+const Composer = 'composer';
+const Send = 'send';
+const Back = 'back';
+const Model = 'model';
+const CreateSession = 'create-session';
+const Settings = 'settings';
+const CloseChat = 'close-chat';
+const SessionDelete = 'SessionDelete';
+const SessionPrefix = 'session:';
+const RenamePrefix = 'session-rename:';
+const getSessionInputName = sessionId => {
+  return `${SessionPrefix}${sessionId}`;
+};
+const isSessionInputName = name => {
+  return name.startsWith(SessionPrefix);
+};
+const getSessionIdFromInputName = name => {
+  return name.slice(SessionPrefix.length);
+};
+const isRenameInputName = name => {
+  return name.startsWith(RenamePrefix);
+};
+const getRenameIdFromInputName = name => {
+  return name.slice(RenamePrefix.length);
+};
+
+const OpenApiApiKeyInput = 'open-api-api-key';
+const SaveOpenApiApiKey = 'save-openapi-api-key';
+const OpenOpenApiApiKeySettings = 'open-openapi-api-key-settings';
+
+/* eslint-disable @cspell/spellchecker */
+const OpenRouterApiKeyInput = 'open-router-api-key';
+const SaveOpenRouterApiKey = 'save-openrouter-api-key';
+const OpenOpenRouterApiKeySettings = 'open-openrouter-api-key-settings';
+
 const selectSession = async (state, id) => {
   const exists = state.sessions.some(session => session.id === id);
   if (!exists) {
@@ -2252,32 +3008,39 @@ const handleClickList = async (state, eventX, eventY) => {
   return selectListIndex(state, index);
 };
 
-const CREATE_SESSION = 'create-session';
-const SESSION_PREFIX = 'session:';
-const RENAME_PREFIX = 'session-rename:';
-const SESSION_DELETE = 'SessionDelete';
-const SEND = 'send';
 const handleClick = async (state, name, id = '') => {
   if (!name) {
     return state;
   }
-  if (name === CREATE_SESSION) {
+  if (name === CreateSession) {
     return createSession(state);
   }
-  if (name.startsWith(SESSION_PREFIX)) {
-    const id = name.slice(SESSION_PREFIX.length);
-    return selectSession(state, id);
+  if (isSessionInputName(name)) {
+    const sessionId = getSessionIdFromInputName(name);
+    return selectSession(state, sessionId);
   }
-  if (name.startsWith(RENAME_PREFIX)) {
-    const id = name.slice(RENAME_PREFIX.length);
-    return startRename(state, id);
+  if (isRenameInputName(name)) {
+    const sessionId = getRenameIdFromInputName(name);
+    return startRename(state, sessionId);
   }
-  if (name === SESSION_DELETE) {
+  if (name === SessionDelete) {
     return deleteSession(state, id);
   }
-  if (name === SEND) {
+  if (name === Send) {
     return handleClickSend(state);
   }
+  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;
 };
 
@@ -2307,7 +3070,22 @@ const handleClickSettings = async () => {
   await invoke('Main.openUri', 'app://settings.json');
 };
 
-const handleInput = async (state, value, inputSource = 'user') => {
+const handleInput = async (state, name, value, inputSource = 'user') => {
+  if (name === OpenApiApiKeyInput) {
+    return {
+      ...state,
+      openApiApiKeyInput: value
+    };
+  }
+  if (name === OpenRouterApiKeyInput) {
+    return {
+      ...state,
+      openRouterApiKeyInput: value
+    };
+  }
+  if (name !== Composer) {
+    return state;
+  }
   return {
     ...state,
     composerValue: value,
@@ -2316,24 +3094,24 @@ const handleInput = async (state, value, inputSource = 'user') => {
 };
 
 const handleInputFocus = async (state, name) => {
-  if (name === 'composer') {
+  if (name === Composer) {
     return focusInput(state);
   }
-  if (name === 'send') {
+  if (name === Send) {
     return {
       ...state,
       focus: 'send-button',
       focused: true
     };
   }
-  if (name.startsWith('session:') || name === 'SessionDelete') {
+  if (isSessionInputName(name) || name === SessionDelete) {
     return {
       ...state,
       focus: 'list',
       focused: true
     };
   }
-  if (name === 'create-session' || name === 'settings' || name === 'close-chat' || name === 'back') {
+  if (name === CreateSession || name === Settings || name === CloseChat || name === Back) {
     return {
       ...state,
       focus: 'header',
@@ -2412,7 +3190,7 @@ const handleModelChange = async (state, value) => {
 };
 
 const handleNewline = async state => {
-  return handleInput(state, `${state.composerValue}\n`);
+  return handleInput(state, Composer, `${state.composerValue}\n`);
 };
 
 const id = 7201;
@@ -2441,36 +3219,6 @@ const isObject = value => {
   return typeof value === 'object' && value !== null;
 };
 
-const getSavedBounds = savedState => {
-  if (!isObject(savedState)) {
-    return undefined;
-  }
-  const {
-    height,
-    width,
-    x,
-    y
-  } = savedState;
-  if (typeof x !== 'number') {
-    return undefined;
-  }
-  if (typeof y !== 'number') {
-    return undefined;
-  }
-  if (typeof width !== 'number') {
-    return undefined;
-  }
-  if (typeof height !== 'number') {
-    return undefined;
-  }
-  return {
-    height,
-    width,
-    x,
-    y
-  };
-};
-
 const getSavedSelectedModelId = savedState => {
   if (!isObject(savedState)) {
     return undefined;
@@ -2523,10 +3271,6 @@ const getSavedViewMode = savedState => {
   return viewMode;
 };
 
-const get = async key => {
-  return getPreference(key);
-};
-
 const toSummarySession = session => {
   return {
     id: session.id,
@@ -2550,9 +3294,25 @@ const loadSelectedSessionMessages = async (sessions, selectedSessionId) => {
   });
 };
 const loadContent = async (state, savedState) => {
-  const savedBounds = getSavedBounds(savedState);
   const savedSelectedModelId = getSavedSelectedModelId(savedState);
   const savedViewMode = getSavedViewMode(savedState);
+  let openApiApiKey = '';
+  try {
+    const savedOpenApiKey = await get('secrets.openApiKey');
+    if (typeof savedOpenApiKey === 'string' && savedOpenApiKey) {
+      openApiApiKey = savedOpenApiKey;
+    } else {
+      const legacySavedOpenApiApiKey = await get('secrets.openApiApiKey');
+      if (typeof legacySavedOpenApiApiKey === 'string' && legacySavedOpenApiApiKey) {
+        openApiApiKey = legacySavedOpenApiApiKey;
+      } else {
+        const legacySavedOpenAiApiKey = await get('secrets.openAiApiKey');
+        openApiApiKey = typeof legacySavedOpenAiApiKey === 'string' ? legacySavedOpenAiApiKey : '';
+      }
+    }
+  } catch {
+    openApiApiKey = '';
+  }
   let openRouterApiKey = '';
   try {
     const savedOpenRouterApiKey = await get('secrets.openRouterApiKey');
@@ -2584,9 +3344,11 @@ const loadContent = async (state, savedState) => {
   const viewMode = sessions.length === 0 || !selectedSessionId ? 'list' : preferredViewMode === 'detail' ? 'detail' : 'list';
   return {
     ...state,
-    ...savedBounds,
     initial: false,
+    openApiApiKey,
+    openApiApiKeyInput: openApiApiKey,
     openRouterApiKey,
+    openRouterApiKeyInput: openRouterApiKey,
     selectedModelId,
     selectedSessionId,
     sessions,
@@ -2595,11 +3357,14 @@ const loadContent = async (state, savedState) => {
 };
 
 const openMockSession = async (state, mockSessionId, mockChatMessages) => {
+  const {
+    sessions: currentSessions
+  } = state;
   if (!mockSessionId) {
     return state;
   }
-  const existingSession = state.sessions.find(session => session.id === mockSessionId);
-  const sessions = existingSession ? state.sessions.map(session => {
+  const existingSession = currentSessions.find(session => session.id === mockSessionId);
+  const sessions = existingSession ? currentSessions.map(session => {
     if (session.id !== mockSessionId) {
       return session;
     }
@@ -2607,7 +3372,7 @@ const openMockSession = async (state, mockSessionId, mockChatMessages) => {
       ...session,
       messages: mockChatMessages
     };
-  }) : [...state.sessions, {
+  }) : [...currentSessions, {
     id: mockSessionId,
     messages: mockChatMessages,
     title: mockSessionId
@@ -2657,6 +3422,7 @@ const renderFocusContext = (oldState, newState) => {
   return [SetFocusContext, newState.uid, FocusChatInput];
 };
 
+const Actions = 'Actions';
 const ChatActions = 'ChatActions';
 const ChatName = 'ChatName';
 const ChatSendArea = 'ChatSendArea';
@@ -2665,7 +3431,11 @@ const ChatSendAreaBottom = 'ChatSendAreaBottom';
 const ChatSendAreaContent = 'ChatSendAreaContent';
 const Chat = 'Chat';
 const ChatHeader = 'ChatHeader';
+const Button = 'Button';
+const ButtonPrimary = 'ButtonPrimary';
+const ButtonSecondary = 'ButtonSecondary';
 const IconButton = 'IconButton';
+const InputBox = 'InputBox';
 const Label = 'Label';
 const LabelDetail = 'LabelDetail';
 const ChatList = 'ChatList';
@@ -2675,6 +3445,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';
@@ -2704,8 +3476,12 @@ 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,
@@ -2726,11 +3502,11 @@ const getSendButtonDom = isSendDisabled => {
     childCount: 1,
     className: sendButtonClassName,
     disabled: isSendDisabled,
-    name: 'send',
+    name: Send,
     onClick: HandleSubmit,
-    role: Button$1,
-    title: sendMessage,
-    type: Button
+    role: Button$2,
+    title: sendMessage(),
+    type: Button$1
   }, {
     childCount: 0,
     className: 'MaskIcon MaskIconSend',
@@ -2787,10 +3563,10 @@ const getChatSendAreaDom = (composerValue, models, selectedModelId, usageOvervie
   }, {
     childCount: 0,
     className: MultilineInputBox,
-    name: 'composer',
+    name: Composer,
     onFocus: HandleFocus,
     onInput: HandleInput,
-    placeholder: composePlaceholder,
+    placeholder: composePlaceholder(),
     rows: 4,
     type: TextArea,
     value: composerValue
@@ -2801,7 +3577,7 @@ const getChatSendAreaDom = (composerValue, models, selectedModelId, usageOvervie
   }, {
     childCount: models.length,
     className: Select,
-    name: 'model',
+    name: Model,
     onInput: HandleModelChange,
     type: Select$1,
     value: selectedModelId
@@ -2812,11 +3588,11 @@ const getBackButtonVirtualDom = () => {
   return [{
     childCount: 1,
     className: IconButton,
-    name: 'back',
+    name: Back,
     onClick: HandleClickBack,
-    role: Button$1,
-    title: backToChats,
-    type: Button
+    role: Button$2,
+    title: backToChats(),
+    type: Button$1
   }, {
     childCount: 0,
     className: 'MaskIcon MaskIconArrowLeft',
@@ -2830,9 +3606,9 @@ const getHeaderActionVirtualDom = item => {
     className: IconButton,
     name: item.name,
     onClick: item.onClick,
-    role: Button$1,
+    role: Button$2,
     title: item.title,
-    type: Button
+    type: Button$1
   }, {
     childCount: 0,
     className: item.icon,
@@ -2843,19 +3619,19 @@ const getHeaderActionVirtualDom = item => {
 const getChatHeaderActionsDom = () => {
   const items = [{
     icon: 'MaskIcon MaskIconAdd',
-    name: 'create-session',
+    name: CreateSession,
     onClick: HandleClickNew,
-    title: newChat
+    title: newChat()
   }, {
     icon: 'MaskIcon MaskIconSettingsGear',
-    name: 'settings',
+    name: Settings,
     onClick: HandleClickSettings,
-    title: settings
+    title: settings()
   }, {
     icon: 'MaskIcon MaskIconClose',
-    name: 'close-chat',
+    name: CloseChat,
     onClick: HandleClickClose,
-    title: closeChat
+    title: closeChat()
   }];
   return [{
     childCount: items.length,
@@ -2880,47 +3656,142 @@ const getChatHeaderDomDetailMode = selectedSessionTitle => {
   }, text(selectedSessionTitle), ...getChatHeaderActionsDom()];
 };
 
-const getChatMessageDom = message => {
+const getMissingApiKeyDom = ({
+  getApiKeyText,
+  inputName,
+  inputValue,
+  openSettingsButtonName,
+  placeholder,
+  saveButtonName
+}) => {
+  return [{
+    childCount: 2,
+    type: Div
+  }, {
+    childCount: 0,
+    className: InputBox,
+    name: inputName,
+    onInput: HandleInput,
+    placeholder,
+    type: Input,
+    value: inputValue
+  }, {
+    childCount: 2,
+    className: Actions,
+    type: Div
+  }, {
+    childCount: 1,
+    className: mergeClassNames(Button, ButtonPrimary),
+    name: saveButtonName,
+    onClick: HandleClick,
+    type: Button$1
+  }, text(save()), {
+    childCount: 1,
+    className: mergeClassNames(Button, ButtonSecondary),
+    name: openSettingsButtonName,
+    onClick: HandleClick,
+    type: Button$1
+  }, text(getApiKeyText)];
+};
+
+const getMissingOpenApiApiKeyDom = openApiApiKeyInput => {
+  return getMissingApiKeyDom({
+    getApiKeyText: getOpenApiApiKey(),
+    inputName: OpenApiApiKeyInput,
+    inputValue: openApiApiKeyInput,
+    openSettingsButtonName: OpenOpenApiApiKeySettings,
+    placeholder: openApiApiKeyPlaceholder(),
+    saveButtonName: SaveOpenApiApiKey
+  });
+};
+
+const getMissingOpenRouterApiKeyDom = openRouterApiKeyInput => {
+  return getMissingApiKeyDom({
+    getApiKeyText: getOpenRouterApiKey(),
+    inputName: OpenRouterApiKeyInput,
+    inputValue: openRouterApiKeyInput,
+    openSettingsButtonName: OpenOpenRouterApiKeySettings,
+    placeholder: openRouterApiKeyPlaceholder(),
+    saveButtonName: SaveOpenRouterApiKey
+  });
+};
+
+const getOpenRouterRequestFailedDom = () => {
+  return [{
+    childCount: openRouterRequestFailureReasons.length,
+    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, openApiApiKeyInput = '') => {
   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 isOpenRouterTooManyRequestsMessage = message.role === 'assistant' && message.text.startsWith(openRouterTooManyRequestsMessage);
+  const extraChildCount = isOpenApiApiKeyMissingMessage || isOpenRouterApiKeyMissingMessage || isOpenRouterRequestFailedMessage || isOpenRouterTooManyRequestsMessage ? 2 : 1;
   return [{
     childCount: 1,
     className: mergeClassNames(Message, roleClassName),
     type: Div
   }, {
-    childCount: 1,
+    childCount: extraChildCount,
     className: ChatMessageContent,
     type: Div
   }, {
     childCount: 1,
     className: Markdown,
     type: P
-  }, text(message.text)];
+  }, text(message.text), ...(isOpenApiApiKeyMissingMessage ? getMissingOpenApiApiKeyDom(openApiApiKeyInput) : []), ...(isOpenRouterApiKeyMissingMessage ? getMissingOpenRouterApiKeyDom(openRouterApiKeyInput) : []), ...(isOpenRouterRequestFailedMessage ? getOpenRouterRequestFailedDom() : []), ...(isOpenRouterTooManyRequestsMessage ? getOpenRouterTooManyRequestsDom() : [])];
 };
 
-const getMessagesDom = messages => {
+const getEmptyMessagesDom = () => {
+  return [{
+    childCount: 1,
+    className: ChatWelcomeMessage,
+    type: Div
+  }, text(startConversation())];
+};
+
+const getMessagesDom = (messages, openRouterApiKeyInput, openApiApiKeyInput = '') => {
   if (messages.length === 0) {
-    return [{
-      childCount: 1,
-      className: ChatWelcomeMessage,
-      type: Div
-    }, text(startConversation)];
+    return getEmptyMessagesDom();
   }
   return [{
     childCount: messages.length,
     className: 'ChatMessages',
     type: Div
-  }, ...messages.flatMap(getChatMessageDom)];
+  }, ...messages.flatMap(message => getChatMessageDom(message, openRouterApiKeyInput, openApiApiKeyInput))];
 };
 
-const getChatModeDetailVirtualDom = (sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax) => {
+const getChatModeDetailVirtualDom = (sessions, selectedSessionId, composerValue, openRouterApiKeyInput, openApiApiKeyInput, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax) => {
   const selectedSession = sessions.find(session => session.id === selectedSessionId);
-  const selectedSessionTitle = selectedSession?.title || chatTitle;
+  const selectedSessionTitle = selectedSession?.title || chatTitle();
   const messages = selectedSession ? selectedSession.messages : [];
   return [{
     childCount: 3,
     className: mergeClassNames(Viewlet, Chat),
     type: Div
-  }, ...getChatHeaderDomDetailMode(selectedSessionTitle), ...getMessagesDom(messages), ...getChatSendAreaDom(composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax)];
+  }, ...getChatHeaderDomDetailMode(selectedSessionTitle), ...getMessagesDom(messages, openRouterApiKeyInput, openApiApiKeyInput), ...getChatSendAreaDom(composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax)];
 };
 
 const getChatHeaderListModeDom = () => {
@@ -2932,7 +3803,7 @@ const getChatHeaderListModeDom = () => {
     childCount: 1,
     className: Label,
     type: Span
-  }, text(chats), ...getChatHeaderActionsDom()];
+  }, text(chats()), ...getChatHeaderActionsDom()];
 };
 
 const getEmptyChatSessionsDom = () => {
@@ -2944,7 +3815,7 @@ const getEmptyChatSessionsDom = () => {
     childCount: 1,
     className: Label,
     type: Div
-  }, text(clickToOpenNewChat)];
+  }, text(clickToOpenNewChat())];
 };
 
 const getSessionDom = session => {
@@ -2956,7 +3827,7 @@ const getSessionDom = session => {
   }, {
     childCount: 1,
     className: ChatListItemLabel,
-    name: `session:${session.id}`,
+    name: getSessionInputName(session.id),
     onContextMenu: HandleListContextMenu,
     tabIndex: 0,
     type: Div
@@ -2968,12 +3839,12 @@ const getSessionDom = session => {
     childCount: 1,
     className: IconButton,
     'data-id': session.id,
-    name: 'SessionDelete',
+    name: SessionDelete,
     onClick: HandleClickDelete,
-    role: Button$1,
+    role: Button$2,
     tabIndex: 0,
-    title: deleteChatSession$1,
-    type: Button
+    title: deleteChatSession$1(),
+    type: Button$1
   }, text('🗑')];
 };
 
@@ -3001,13 +3872,13 @@ const getChatModeUnsupportedVirtualDom = () => {
   return [{
     childCount: 1,
     type: Div
-  }, text('Unknown view mode')];
+  }, text(unknownViewMode())];
 };
 
-const getChatVirtualDom = (sessions, selectedSessionId, composerValue, viewMode, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax) => {
+const getChatVirtualDom = (sessions, selectedSessionId, composerValue, openRouterApiKeyInput, viewMode, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, openApiApiKeyInput = '') => {
   switch (viewMode) {
     case 'detail':
-      return getChatModeDetailVirtualDom(sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax);
+      return getChatModeDetailVirtualDom(sessions, selectedSessionId, composerValue, openRouterApiKeyInput, openApiApiKeyInput, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax);
     case 'list':
       return getChatModeListVirtualDom(sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax);
     default:
@@ -3020,6 +3891,8 @@ const renderItems = (oldState, newState) => {
     composerValue,
     initial,
     models,
+    openApiApiKeyInput,
+    openRouterApiKeyInput,
     selectedModelId,
     selectedSessionId,
     sessions,
@@ -3032,7 +3905,7 @@ const renderItems = (oldState, newState) => {
   if (initial) {
     return [SetDom2, uid, []];
   }
-  const dom = getChatVirtualDom(sessions, selectedSessionId, composerValue, viewMode, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax);
+  const dom = getChatVirtualDom(sessions, selectedSessionId, composerValue, openRouterApiKeyInput, viewMode, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, openApiApiKeyInput);
   return [SetDom2, uid, dom];
 };
 
@@ -3047,7 +3920,7 @@ const renderValue = (oldState, newState) => {
   const {
     composerValue
   } = newState;
-  return [SetValueByName, newState.uid, 'composer', composerValue];
+  return [SetValueByName, newState.uid, Composer, composerValue];
 };
 
 const getRenderer = diffType => {
@@ -3119,7 +3992,7 @@ const renderEventListeners = () => {
     params: ['handleClickList', ClientX, ClientY]
   }, {
     name: HandleInput,
-    params: ['handleInput', TargetValue]
+    params: ['handleInput', TargetName, TargetValue]
   }, {
     name: HandleModelChange,
     params: ['handleModelChange', TargetValue]
@@ -3144,6 +4017,7 @@ const reset = async state => {
   return {
     ...state,
     composerValue: '',
+    openRouterApiKey: '',
     selectedSessionId: '',
     sessions: [],
     viewMode: 'list'
@@ -3187,15 +4061,15 @@ const saveState = state => {
 const dummySessions = [{
   id: 'session-a',
   messages: [],
-  title: dummyChatA
+  title: dummyChatA()
 }, {
   id: 'session-b',
   messages: [],
-  title: dummyChatB
+  title: dummyChatB()
 }, {
   id: 'session-c',
   messages: [],
-  title: dummyChatC
+  title: dummyChatC()
 }];
 const setChatList = state => {
   return {
@@ -3206,6 +4080,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,
@@ -3213,6 +4102,7 @@ const commandMap = {
   'Chat.enterNewLine': wrapCommand(handleNewline),
   'Chat.getCommandIds': getCommandIds,
   'Chat.getKeyBindings': getKeyBindings,
+  'Chat.getSelectedSessionId': wrapGetter(getSelectedSessionId),
   'Chat.handleChatListContextMenu': handleChatListContextMenu,
   'Chat.handleClick': wrapCommand(handleClick),
   'Chat.handleClickBack': wrapCommand(handleClickBack),
@@ -3237,7 +4127,9 @@ const commandMap = {
   'Chat.resize': wrapCommand(resize),
   'Chat.saveState': wrapGetter(saveState),
   'Chat.setChatList': wrapCommand(setChatList),
-  'Chat.terminate': terminate
+  'Chat.setOpenRouterApiKey': wrapCommand(setOpenRouterApiKey),
+  'Chat.terminate': terminate,
+  'Chat.useMockApi': wrapCommand(useMockApi)
 };
 
 const listen = async () => {