@lvce-editor/static-server 0.75.6 → 0.75.7

package/static/{2586e4a → c4bc67d}/packages/chat-view/dist/chatViewWorkerMain.js

@@ -486,7 +486,7 @@ const execute = (command, ...args) => {
 
 const Two$1 = '2.0';
 const callbacks = Object.create(null);
-const get$2 = id => {
+const get$3 = id => {
   return callbacks[id];
 };
 const remove$1 = id => {
@@ -635,7 +635,7 @@ const warn = (...args) => {
   console.warn(...args);
 };
 const resolve = (id, response) => {
-  const fn = get$2(id);
+  const fn = get$3(id);
   if (!fn) {
     console.log(response);
     warn(`callback ${id} may already be disposed`);
@@ -991,7 +991,7 @@ const rpcs = Object.create(null);
 const set$3 = (id, rpc) => {
   rpcs[id] = rpc;
 };
-const get$1 = id => {
+const get$2 = id => {
   return rpcs[id];
 };
 const remove = id => {
@@ -1002,18 +1002,18 @@ const remove = id => {
 const create$2 = rpcId => {
   return {
     async dispose() {
-      const rpc = get$1(rpcId);
+      const rpc = get$2(rpcId);
       await rpc.dispose();
     },
     // @ts-ignore
     invoke(method, ...params) {
-      const rpc = get$1(rpcId);
+      const rpc = get$2(rpcId);
       // @ts-ignore
       return rpc.invoke(method, ...params);
     },
     // @ts-ignore
     invokeAndTransfer(method, ...params) {
-      const rpc = get$1(rpcId);
+      const rpc = get$2(rpcId);
       // @ts-ignore
       return rpc.invokeAndTransfer(method, ...params);
     },
@@ -1048,6 +1048,9 @@ const sendMessagePortToExtensionHostWorker$1 = async (port, rpcId = 0) => {
   const command = 'HandleMessagePort.handleMessagePort2';
   await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToExtensionHostWorker', port, command, rpcId);
 };
+const getPreference = async key => {
+  return await invoke('Preferences.get', key);
+};
 
 const toCommandId = key => {
   const dotIndex = key.indexOf('.');
@@ -1196,11 +1199,11 @@ 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.');
-const you = i18nString('You');
-const assistant = i18nString('Assistant');
+i18nString('You');
+i18nString('Assistant');
 const composePlaceholder = i18nString('Type your message. Enter to send, Shift+Enter for newline.');
 const sendMessage = i18nString('Send message');
-const send = i18nString('Send');
+i18nString('Send');
 const deleteChatSession$1 = i18nString('Delete chat session');
 const defaultSessionTitle = i18nString('Chat 1');
 const dummyChatA = i18nString('Dummy Chat A');
@@ -1224,18 +1227,36 @@ const createDefaultState = () => {
     listItemHeight: 40,
     models: [{
       id: defaultModelId,
-      name: 'test'
+      name: 'test',
+      provider: 'test'
     }, {
       id: 'codex-5.3',
-      name: 'Codex 5.3'
+      name: 'Codex 5.3',
+      provider: 'openRouter'
     }, {
       id: 'claude-code',
-      name: 'Claude Code'
+      name: 'Claude Code',
+      provider: 'openRouter'
     }, {
       id: 'claude-haiku',
-      name: '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'
     }],
     nextMessageId: 1,
+    openRouterApiBaseUrl: 'https://openrouter.ai/api/v1',
+    openRouterApiKey: '',
     platform: 0,
     renamingSessionId: '',
     selectedModelId: defaultModelId,
@@ -1245,7 +1266,10 @@ const createDefaultState = () => {
       messages: [],
       title: defaultSessionTitle
     }],
+    tokensMax: 0,
+    tokensUsed: 0,
     uid: 0,
+    usageOverviewEnabled: false,
     viewMode: 'list',
     warningCount: 0,
     width: 0,
@@ -1255,7 +1279,7 @@ const createDefaultState = () => {
 };
 
 const {
-  get,
+  get: get$1,
   getCommandIds,
   registerCommands,
   set,
@@ -1263,7 +1287,7 @@ const {
   wrapGetter
 } = create$1();
 
-const create = (uid, _uri, x, y, width, height, platform, assetDir) => {
+const create = (uid, x, y, width, height, platform, assetDir) => {
   const state = {
     ...createDefaultState(),
     assetDir,
@@ -1289,7 +1313,7 @@ const diffFocus = (oldState, newState) => {
 };
 
 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.viewMode === newState.viewMode;
+  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 RenderItems = 4;
@@ -1306,8 +1330,8 @@ const diffValue = (oldState, newState) => {
   return newState.inputSource !== 'script';
 };
 
-const modules = [isEqual, diffValue, diffFocus, isEqual$1];
-const numbers = [RenderIncremental, RenderValue, RenderFocus, RenderCss];
+const modules = [isEqual, diffValue, diffFocus, isEqual$1, diffFocus];
+const numbers = [RenderIncremental, RenderValue, RenderFocus, RenderCss, RenderFocusContext];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -1324,7 +1348,7 @@ const diff2 = uid => {
   const {
     newState,
     oldState
-  } = get(uid);
+  } = get$1(uid);
   const result = diff(oldState, newState);
   return result;
 };
@@ -1345,9 +1369,9 @@ const SetPatches = 'Viewlet.setPatches';
 
 const FocusChatInput = 8000;
 
-const Button$2 = 'button';
+const Button$1 = 'button';
 
-const Button$1 = 1;
+const Button = 1;
 const Div = 4;
 const Span = 8;
 const Text = 12;
@@ -1673,15 +1697,41 @@ const getKeyBindings = () => {
   }];
 };
 
-const SESSION_PREFIX$1 = 'session:';
+const getListIndex = (state, eventX, eventY) => {
+  const {
+    headerHeight,
+    height,
+    listItemHeight,
+    width,
+    x,
+    y
+  } = state;
+  if (eventX < x || eventY < y) {
+    return -1;
+  }
+  if (eventX >= x + width || eventY >= y + height) {
+    return -1;
+  }
+  const listY = eventY - y - headerHeight;
+  if (listY < 0) {
+    return -1;
+  }
+  const itemHeight = listItemHeight > 0 ? listItemHeight : 40;
+  return Math.floor(listY / itemHeight);
+};
+
 const CHAT_LIST_ITEM_CONTEXT_MENU = 'ChatListItemContextMenu';
-const handleChatListContextMenu = async (name, x, y) => {
-  if (!name || !name.startsWith(SESSION_PREFIX$1)) {
-    return;
+const handleChatListContextMenu = async (state, eventX, eventY) => {
+  const index = getListIndex(state, eventX, eventY);
+  if (index === -1) {
+    return state;
   }
-  const sessionId = name.slice(SESSION_PREFIX$1.length);
-  // @ts-ignore
-  await invoke('ContextMenu.show', x, y, CHAT_LIST_ITEM_CONTEXT_MENU, sessionId);
+  const item = state.sessions[index];
+  if (!item) {
+    return state;
+  }
+  await invoke('ContextMenu.show', eventX, eventY, CHAT_LIST_ITEM_CONTEXT_MENU, item.id);
+  return state;
 };
 
 const LVCE_CHAT_SESSIONS_DB_NAME = 'lvce-chat-view-sessions';
@@ -1917,11 +1967,104 @@ const focusInput = state => {
 const delay = async ms => {
   await new Promise(resolve => setTimeout(resolve, ms));
 };
-const getMockAiResponse = userMessage => {
+
+const getMockAiResponse = async userMessage => {
+  await delay(800);
   return `Mock AI response: I received "${userMessage}".`;
 };
-const getAiResponse = async (userText, nextMessageId) => {
-  await delay(800);
+
+const getTextContent = content => {
+  if (typeof content === 'string') {
+    return content;
+  }
+  if (!Array.isArray(content)) {
+    return '';
+  }
+  const textParts = [];
+  for (const part of content) {
+    if (!part || typeof part !== 'object') {
+      continue;
+    }
+    const maybeType = Reflect.get(part, 'type');
+    const maybeText = Reflect.get(part, 'text');
+    if (maybeType === 'text' && typeof maybeText === 'string') {
+      textParts.push(maybeText);
+    }
+  }
+  return textParts.join('\n');
+};
+
+const defaultOpenRouterApiBaseUrl = 'https://openrouter.ai/api/v1';
+const getOpenRouterApiEndpoint = openRouterApiBaseUrl => {
+  const trimmedBaseUrl = (openRouterApiBaseUrl || defaultOpenRouterApiBaseUrl).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'
+  });
+  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 choices = Reflect.get(parsed, 'choices');
+  if (!Array.isArray(choices)) {
+    return '';
+  }
+  const firstChoice = choices[0];
+  if (!firstChoice || typeof firstChoice !== 'object') {
+    return '';
+  }
+  const message = Reflect.get(firstChoice, 'message');
+  if (!message || typeof message !== 'object') {
+    return '';
+  }
+  const content = Reflect.get(message, 'content');
+  return getTextContent(content);
+};
+
+const getOpenRouterModelId = selectedModelId => {
+  if (selectedModelId.startsWith('openRouter/')) {
+    return selectedModelId.slice('openRouter/'.length);
+  }
+  return selectedModelId;
+};
+
+const isOpenRouterModel = (selectedModelId, models) => {
+  const selectedModel = models.find(model => model.id === selectedModelId);
+  if (selectedModel?.provider === 'openRouter') {
+    return true;
+  }
+  return selectedModelId.startsWith('openRouter/');
+};
+
+const getAiResponse = async (userText, nextMessageId, selectedModelId, models, openRouterApiKey, openRouterApiBaseUrl) => {
+  let text = '';
+  const shouldUseOpenRouter = isOpenRouterModel(selectedModelId, models) && openRouterApiKey;
+  if (shouldUseOpenRouter) {
+    try {
+      text = await getOpenRouterAssistantText(userText, getOpenRouterModelId(selectedModelId), openRouterApiKey, openRouterApiBaseUrl);
+    } catch {
+      text = '';
+    }
+  }
+  if (!text) {
+    text = await getMockAiResponse(userText);
+  }
   const assistantTime = new Date().toLocaleTimeString([], {
     hour: '2-digit',
     minute: '2-digit'
@@ -1929,7 +2072,7 @@ const getAiResponse = async (userText, nextMessageId) => {
   return {
     id: `message-${nextMessageId}`,
     role: 'assistant',
-    text: getMockAiResponse(userText),
+    text,
     time: assistantTime
   };
 };
@@ -1937,7 +2080,11 @@ const getAiResponse = async (userText, nextMessageId) => {
 const handleSubmit = async state => {
   const {
     composerValue,
+    models,
     nextMessageId,
+    openRouterApiBaseUrl,
+    openRouterApiKey,
+    selectedModelId,
     selectedSessionId,
     sessions,
     viewMode
@@ -2013,7 +2160,7 @@ const handleSubmit = async state => {
   set(state.uid, state, optimisticState);
   // @ts-ignore
   await invoke('Chat.rerender');
-  const assistantMessage = await getAiResponse(userText, optimisticState.nextMessageId);
+  const assistantMessage = await getAiResponse(userText, optimisticState.nextMessageId, selectedModelId, models, openRouterApiKey, openRouterApiBaseUrl);
   const updatedSessions = optimisticState.sessions.map(session => {
     if (session.id !== optimisticState.selectedSessionId) {
       return session;
@@ -2089,44 +2236,22 @@ const startRename = (state, id) => {
   };
 };
 
-const getListIndex = (state, eventX, eventY) => {
-  const {
-    headerHeight,
-    height,
-    listItemHeight,
-    width,
-    x,
-    y
-  } = state;
-  if (eventX < x || eventY < y) {
-    return -1;
-  }
-  if (eventX >= x + width || eventY >= y + height) {
-    return -1;
-  }
-  const listY = eventY - y - headerHeight;
-  if (listY < 0) {
-    return -1;
-  }
-  const itemHeight = listItemHeight > 0 ? listItemHeight : 40;
-  return Math.floor(listY / itemHeight);
-};
-
-const handleClickList = async (state, eventX, eventY) => {
+const selectListIndex = async (state, index) => {
   const {
     sessions
   } = state;
-  const index = getListIndex(state, eventX, eventY);
-  if (index < 0) {
+  if (index < 0 || index >= sessions.length) {
     return state;
   }
   const session = sessions[index];
-  if (!session) {
-    return state;
-  }
   return selectSession(state, session.id);
 };
 
+const handleClickList = async (state, eventX, eventY) => {
+  const index = getListIndex(state, eventX, eventY);
+  return selectListIndex(state, index);
+};
+
 const CREATE_SESSION = 'create-session';
 const SESSION_PREFIX = 'session:';
 const RENAME_PREFIX = 'session-rename:';
@@ -2398,6 +2523,10 @@ const getSavedViewMode = savedState => {
   return viewMode;
 };
 
+const get = async key => {
+  return getPreference(key);
+};
+
 const toSummarySession = session => {
   return {
     id: session.id,
@@ -2424,6 +2553,13 @@ const loadContent = async (state, savedState) => {
   const savedBounds = getSavedBounds(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 legacySavedSessions = getSavedSessions(savedState);
   const storedSessions = await listChatSessions();
   let sessions = storedSessions;
@@ -2450,6 +2586,7 @@ const loadContent = async (state, savedState) => {
     ...state,
     ...savedBounds,
     initial: false,
+    openRouterApiKey,
     selectedModelId,
     selectedSessionId,
     sessions,
@@ -2517,37 +2654,39 @@ const renderFocus = (oldState, newState) => {
 };
 
 const renderFocusContext = (oldState, newState) => {
-  const when = 2344;
-  return [SetFocusContext, newState.uid, when];
+  return [SetFocusContext, newState.uid, FocusChatInput];
 };
 
 const ChatActions = 'ChatActions';
 const ChatName = 'ChatName';
 const ChatSendArea = 'ChatSendArea';
+const SendButtonDisabled = 'SendButtonDisabled';
 const ChatSendAreaBottom = 'ChatSendAreaBottom';
 const ChatSendAreaContent = 'ChatSendAreaContent';
 const Chat = 'Chat';
 const ChatHeader = 'ChatHeader';
-const Button = 'Button';
-const ButtonDisabled = 'ButtonDisabled';
-const ButtonPrimary = 'ButtonPrimary';
 const IconButton = 'IconButton';
 const Label = 'Label';
+const LabelDetail = 'LabelDetail';
 const ChatList = 'ChatList';
 const ChatListEmpty = 'ChatListEmpty';
 const ChatListItem = 'ChatListItem';
 const ChatListItemLabel = 'ChatListItemLabel';
 const Markdown = 'Markdown';
 const Message = 'Message';
+const ChatMessageContent = 'ChatMessageContent';
 const MessageUser = 'MessageUser';
 const MessageAssistant = 'MessageAssistant';
 const MultilineInputBox = 'MultilineInputBox';
 const Option = 'Option';
+const TokenUsageOverview = 'TokenUsageOverview';
+const TokenUsageRing = 'TokenUsageRing';
+const TokenUsageRingInner = 'TokenUsageRingInner';
 const Select = 'Select';
 const Viewlet = 'Viewlet';
 const ChatWelcomeMessage = 'ChatWelcomeMessage';
 
-const HandleContextMenu = 2;
+const HandleListContextMenu = 2;
 const HandleFocus = 3;
 const HandleInput = 4;
 const HandleClick = 11;
@@ -2561,18 +2700,82 @@ const HandleClickDelete = 18;
 const HandleSubmit = 19;
 const HandleModelChange = 20;
 
-const getChatSendAreaDom = (composerValue, models, selectedModelId) => {
+const getModelLabel = model => {
+  if (model.provider === 'openRouter') {
+    return `${model.name} (OpenRouter)`;
+  }
+  return model.name;
+};
+const getModelOptionDOm = (model, selectedModelId) => {
+  return [{
+    childCount: 1,
+    className: Option,
+    selected: model.id === selectedModelId,
+    type: Option$1,
+    value: model.id
+  }, text(getModelLabel(model))];
+};
+
+const getSendButtonClassName = isSendDisabled => {
+  return isSendDisabled ? `${IconButton} ${SendButtonDisabled}` : `${IconButton}`;
+};
+
+const getSendButtonDom = isSendDisabled => {
+  const sendButtonClassName = getSendButtonClassName(isSendDisabled);
+  return [{
+    childCount: 1,
+    className: sendButtonClassName,
+    disabled: isSendDisabled,
+    name: 'send',
+    onClick: HandleSubmit,
+    role: Button$1,
+    title: sendMessage,
+    type: Button
+  }, {
+    childCount: 0,
+    className: 'MaskIcon MaskIconSend',
+    type: Div
+  }];
+};
+
+const clampToPercentage = (tokensUsed, tokensMax) => {
+  if (tokensMax <= 0) {
+    return 0;
+  }
+  const percentage = tokensUsed / tokensMax * 100;
+  return Math.max(0, Math.min(100, percentage));
+};
+
+const getUsageOverviewDom = (tokensUsed, tokensMax) => {
+  const usagePercent = clampToPercentage(tokensUsed, tokensMax);
+  const usageLabel = `${tokensUsed} / ${tokensMax}`;
+  const usageTitle = `${tokensUsed} of ${tokensMax} tokens used (${Math.round(usagePercent)}%)`;
+  return [{
+    childCount: 3,
+    className: TokenUsageOverview,
+    type: Div
+  }, {
+    childCount: 1,
+    className: TokenUsageRing,
+    style: `background: conic-gradient(var(--vscode-button-background) ${usagePercent}%, var(--vscode-editorWidget-border) 0);`,
+    title: usageTitle,
+    type: Div
+  }, {
+    childCount: 0,
+    className: TokenUsageRingInner,
+    style: 'background: var(--vscode-editor-background);',
+    type: Div
+  }, {
+    childCount: 1,
+    className: LabelDetail,
+    title: usageTitle,
+    type: Span
+  }, text(usageLabel)];
+};
+
+const getChatSendAreaDom = (composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax) => {
   const isSendDisabled = composerValue.trim() === '';
-  const sendButtonClassName = isSendDisabled ? `${Button} ${ButtonPrimary} ${ButtonDisabled}` : `${Button} ${ButtonPrimary}`;
-  const modelOptions = models.flatMap(model => {
-    return [{
-      childCount: 1,
-      className: Option,
-      selected: model.id === selectedModelId,
-      type: Option$1,
-      value: model.id
-    }, text(model.name)];
-  });
+  const modelOptions = models.flatMap(model => getModelOptionDOm(model, selectedModelId));
   return [{
     childCount: 1,
     className: ChatSendArea,
@@ -2585,13 +2788,14 @@ const getChatSendAreaDom = (composerValue, models, selectedModelId) => {
     childCount: 0,
     className: MultilineInputBox,
     name: 'composer',
+    onFocus: HandleFocus,
     onInput: HandleInput,
     placeholder: composePlaceholder,
     rows: 4,
     type: TextArea,
     value: composerValue
   }, {
-    childCount: 2,
+    childCount: usageOverviewEnabled ? 3 : 2,
     className: ChatSendAreaBottom,
     type: Div
   }, {
@@ -2601,16 +2805,23 @@ const getChatSendAreaDom = (composerValue, models, selectedModelId) => {
     onInput: HandleModelChange,
     type: Select$1,
     value: selectedModelId
-  }, ...modelOptions, {
+  }, ...modelOptions, ...(usageOverviewEnabled ? getUsageOverviewDom(tokensUsed, tokensMax) : []), ...getSendButtonDom(isSendDisabled)];
+};
+
+const getBackButtonVirtualDom = () => {
+  return [{
     childCount: 1,
-    className: sendButtonClassName,
-    disabled: isSendDisabled,
-    name: 'send',
-    onClick: HandleSubmit,
-    role: Button$2,
-    title: sendMessage,
-    type: Button$1
-  }, text(send)];
+    className: IconButton,
+    name: 'back',
+    onClick: HandleClickBack,
+    role: Button$1,
+    title: backToChats,
+    type: Button
+  }, {
+    childCount: 0,
+    className: 'MaskIcon MaskIconArrowLeft',
+    type: Div
+  }];
 };
 
 const getHeaderActionVirtualDom = item => {
@@ -2619,25 +2830,29 @@ const getHeaderActionVirtualDom = item => {
     className: IconButton,
     name: item.name,
     onClick: item.onClick,
-    role: Button$2,
+    role: Button$1,
     title: item.title,
-    type: Button$1
-  }, text(item.icon)];
+    type: Button
+  }, {
+    childCount: 0,
+    className: item.icon,
+    type: Div
+  }];
 };
 
 const getChatHeaderActionsDom = () => {
   const items = [{
-    icon: '+',
+    icon: 'MaskIcon MaskIconAdd',
     name: 'create-session',
     onClick: HandleClickNew,
     title: newChat
   }, {
-    icon: '⚙',
+    icon: 'MaskIcon MaskIconSettingsGear',
     name: 'settings',
     onClick: HandleClickSettings,
     title: settings
   }, {
-    icon: '×',
+    icon: 'MaskIcon MaskIconClose',
     name: 'close-chat',
     onClick: HandleClickClose,
     title: closeChat
@@ -2649,18 +2864,6 @@ const getChatHeaderActionsDom = () => {
   }, ...items.flatMap(getHeaderActionVirtualDom)];
 };
 
-const getChatHeaderBackButtonVirtualDom = () => {
-  return [{
-    childCount: 1,
-    className: IconButton,
-    name: 'back',
-    onClick: HandleClickBack,
-    role: Button$2,
-    title: backToChats,
-    type: Button$1
-  }, text('←')];
-};
-
 const getChatHeaderDomDetailMode = selectedSessionTitle => {
   return [{
     childCount: 2,
@@ -2670,7 +2873,7 @@ const getChatHeaderDomDetailMode = selectedSessionTitle => {
     childCount: 2,
     className: ChatName,
     type: Div
-  }, ...getChatHeaderBackButtonVirtualDom(), {
+  }, ...getBackButtonVirtualDom(), {
     childCount: 1,
     className: Label,
     type: Span
@@ -2680,14 +2883,14 @@ const getChatHeaderDomDetailMode = selectedSessionTitle => {
 const getChatMessageDom = message => {
   const roleClassName = message.role === 'user' ? MessageUser : MessageAssistant;
   return [{
-    childCount: 2,
+    childCount: 1,
     className: mergeClassNames(Message, roleClassName),
     type: Div
   }, {
     childCount: 1,
-    className: Label,
+    className: ChatMessageContent,
     type: Div
-  }, text(`${message.role === 'user' ? you : assistant} · ${message.time}`), {
+  }, {
     childCount: 1,
     className: Markdown,
     type: P
@@ -2709,7 +2912,7 @@ const getMessagesDom = messages => {
   }, ...messages.flatMap(getChatMessageDom)];
 };
 
-const getChatModeDetailVirtualDom = (sessions, selectedSessionId, composerValue, models, selectedModelId) => {
+const getChatModeDetailVirtualDom = (sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax) => {
   const selectedSession = sessions.find(session => session.id === selectedSessionId);
   const selectedSessionTitle = selectedSession?.title || chatTitle;
   const messages = selectedSession ? selectedSession.messages : [];
@@ -2717,7 +2920,7 @@ const getChatModeDetailVirtualDom = (sessions, selectedSessionId, composerValue,
     childCount: 3,
     className: mergeClassNames(Viewlet, Chat),
     type: Div
-  }, ...getChatHeaderDomDetailMode(selectedSessionTitle), ...getMessagesDom(messages), ...getChatSendAreaDom(composerValue, models, selectedModelId)];
+  }, ...getChatHeaderDomDetailMode(selectedSessionTitle), ...getMessagesDom(messages), ...getChatSendAreaDom(composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax)];
 };
 
 const getChatHeaderListModeDom = () => {
@@ -2754,7 +2957,7 @@ const getSessionDom = session => {
     childCount: 1,
     className: ChatListItemLabel,
     name: `session:${session.id}`,
-    onContextMenu: HandleContextMenu,
+    onContextMenu: HandleListContextMenu,
     tabIndex: 0,
     type: Div
   }, text(session.title), {
@@ -2767,10 +2970,10 @@ const getSessionDom = session => {
     'data-id': session.id,
     name: 'SessionDelete',
     onClick: HandleClickDelete,
-    role: Button$2,
+    role: Button$1,
     tabIndex: 0,
     title: deleteChatSession$1,
-    type: Button$1
+    type: Button
   }, text('🗑')];
 };
 
@@ -2786,12 +2989,12 @@ const getChatListDom = (sessions, selectedSessionId) => {
   }, ...sessions.flatMap(getSessionDom)];
 };
 
-const getChatModeListVirtualDom = (sessions, selectedSessionId, composerValue, models, selectedModelId) => {
+const getChatModeListVirtualDom = (sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax) => {
   return [{
     childCount: 3,
     className: mergeClassNames(Viewlet, Chat),
     type: Div
-  }, ...getChatHeaderListModeDom(), ...getChatListDom(sessions), ...getChatSendAreaDom(composerValue, models, selectedModelId)];
+  }, ...getChatHeaderListModeDom(), ...getChatListDom(sessions), ...getChatSendAreaDom(composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax)];
 };
 
 const getChatModeUnsupportedVirtualDom = () => {
@@ -2801,12 +3004,12 @@ const getChatModeUnsupportedVirtualDom = () => {
   }, text('Unknown view mode')];
 };
 
-const getChatVirtualDom = (sessions, selectedSessionId, composerValue, viewMode, models, selectedModelId) => {
+const getChatVirtualDom = (sessions, selectedSessionId, composerValue, viewMode, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax) => {
   switch (viewMode) {
     case 'detail':
-      return getChatModeDetailVirtualDom(sessions, selectedSessionId, composerValue, models, selectedModelId);
+      return getChatModeDetailVirtualDom(sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax);
     case 'list':
-      return getChatModeListVirtualDom(sessions, selectedSessionId, composerValue, models, selectedModelId);
+      return getChatModeListVirtualDom(sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax);
     default:
       return getChatModeUnsupportedVirtualDom();
   }
@@ -2820,13 +3023,16 @@ const renderItems = (oldState, newState) => {
     selectedModelId,
     selectedSessionId,
     sessions,
+    tokensMax,
+    tokensUsed,
     uid,
+    usageOverviewEnabled,
     viewMode
   } = newState;
   if (initial) {
     return [SetDom2, uid, []];
   }
-  const dom = getChatVirtualDom(sessions, selectedSessionId, composerValue, viewMode, models, selectedModelId);
+  const dom = getChatVirtualDom(sessions, selectedSessionId, composerValue, viewMode, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax);
   return [SetDom2, uid, dom];
 };
 
@@ -2879,7 +3085,7 @@ const render2 = (uid, diffResult) => {
   const {
     newState,
     oldState
-  } = get(uid);
+  } = get$1(uid);
   set(uid, newState, newState);
   const commands = applyRender(oldState, newState, diffResult);
   return commands;
@@ -2887,8 +3093,8 @@ const render2 = (uid, diffResult) => {
 
 const renderEventListeners = () => {
   return [{
-    name: HandleContextMenu,
-    params: ['handleChatListContextMenu', TargetName, ClientX, ClientY],
+    name: HandleListContextMenu,
+    params: ['handleChatListContextMenu', ClientX, ClientY],
     preventDefault: true
   }, {
     name: HandleClick,