@lvce-editor/static-server 0.75.4 → 0.75.6

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

@@ -964,31 +964,9 @@ const create$3 = async ({
   return rpc;
 };
 
-const Button$2 = 'button';
-
-const Button$1 = 1;
-const Div = 4;
-const Span = 8;
-const Text = 12;
-const P = 50;
-const TextArea = 62;
-const Strong = 70;
-const Reference = 100;
-
-const ClientX = 'event.clientX';
-const ClientY = 'event.clientY';
-const Key = 'event.key';
-const ShiftKey = 'event.shiftKey';
-const TargetName = 'event.target.name';
-const TargetValue = 'event.target.value';
-
 const ExtensionHostWorker = 44;
 const RendererWorker = 1;
 
-const SetCss = 'Viewlet.setCss';
-const SetDom2 = 'Viewlet.setDom2';
-const SetPatches = 'Viewlet.setPatches';
-
 const createMockRpc = ({
   commandMap
 }) => {
@@ -1191,6 +1169,13 @@ const terminate = () => {
   globalThis.close();
 };
 
+const clearInput = async state => {
+  return {
+    ...state,
+    composerValue: ''
+  };
+};
+
 const emptyObject = {};
 const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
 const i18nString = (key, placeholders = emptyObject) => {
@@ -1216,7 +1201,7 @@ const assistant = i18nString('Assistant');
 const composePlaceholder = i18nString('Type your message. Enter to send, Shift+Enter for newline.');
 const sendMessage = i18nString('Send message');
 const send = i18nString('Send');
-const deleteChatSession = i18nString('Delete chat session');
+const deleteChatSession$1 = i18nString('Delete chat session');
 const defaultSessionTitle = i18nString('Chat 1');
 const dummyChatA = i18nString('Dummy Chat A');
 const dummyChatB = i18nString('Dummy Chat B');
@@ -1224,16 +1209,36 @@ const dummyChatC = i18nString('Dummy Chat C');
 
 const createDefaultState = () => {
   const defaultSessionId = 'session-1';
+  const defaultModelId = 'test';
   return {
     assetDir: '',
     composerValue: '',
     errorCount: 0,
-    ignoreNextInput: false,
+    focus: 'composer',
+    focused: false,
+    headerHeight: 50,
+    height: 0,
     initial: true,
+    inputSource: 'script',
     lastSubmittedSessionId: '',
+    listItemHeight: 40,
+    models: [{
+      id: defaultModelId,
+      name: 'test'
+    }, {
+      id: 'codex-5.3',
+      name: 'Codex 5.3'
+    }, {
+      id: 'claude-code',
+      name: 'Claude Code'
+    }, {
+      id: 'claude-haiku',
+      name: 'Claude Haiku'
+    }],
     nextMessageId: 1,
     platform: 0,
     renamingSessionId: '',
+    selectedModelId: defaultModelId,
     selectedSessionId: defaultSessionId,
     sessions: [{
       id: defaultSessionId,
@@ -1242,7 +1247,10 @@ const createDefaultState = () => {
     }],
     uid: 0,
     viewMode: 'list',
-    warningCount: 0
+    warningCount: 0,
+    width: 0,
+    x: 0,
+    y: 0
   };
 };
 
@@ -1255,12 +1263,16 @@ const {
   wrapGetter
 } = create$1();
 
-const create = (uid, uri, x, y, width, height, platform, assetDir) => {
+const create = (uid, _uri, x, y, width, height, platform, assetDir) => {
   const state = {
     ...createDefaultState(),
     assetDir,
+    height,
     platform,
-    uid
+    uid,
+    width,
+    x,
+    y
   };
   set(uid, state, state);
 };
@@ -1269,16 +1281,33 @@ const isEqual$1 = (oldState, newState) => {
   return oldState.initial === newState.initial;
 };
 
+const diffFocus = (oldState, newState) => {
+  if (!newState.focused) {
+    return true;
+  }
+  return oldState.focus === newState.focus && oldState.focused === newState.focused;
+};
+
 const isEqual = (oldState, newState) => {
-  return oldState.composerValue === newState.composerValue && oldState.ignoreNextInput === newState.ignoreNextInput && oldState.initial === newState.initial && oldState.renamingSessionId === newState.renamingSessionId && 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.viewMode === newState.viewMode;
 };
 
 const RenderItems = 4;
+const RenderFocus = 6;
+const RenderFocusContext = 7;
+const RenderValue = 8;
 const RenderCss = 10;
 const RenderIncremental = 11;
 
-const modules = [isEqual, isEqual$1];
-const numbers = [RenderIncremental, RenderCss];
+const diffValue = (oldState, newState) => {
+  if (oldState.composerValue === newState.composerValue) {
+    return true;
+  }
+  return newState.inputSource !== 'script';
+};
+
+const modules = [isEqual, diffValue, diffFocus, isEqual$1];
+const numbers = [RenderIncremental, RenderValue, RenderFocus, RenderCss];
 
 const diff = (oldState, newState) => {
   const diffResult = [];
@@ -1300,421 +1329,146 @@ const diff2 = uid => {
   return result;
 };
 
-const getKeyBindings = () => {
-  return [];
-};
+const ClientX = 'event.clientX';
+const ClientY = 'event.clientY';
+const Key = 'event.key';
+const ShiftKey = 'event.shiftKey';
+const TargetName = 'event.target.name';
+const TargetValue = 'event.target.value';
 
-const SESSION_PREFIX$1 = 'session:';
-const CHAT_LIST_ITEM_CONTEXT_MENU = 'ChatListItemContextMenu';
-const handleChatListContextMenu = async (name, x, y) => {
-  if (!name || !name.startsWith(SESSION_PREFIX$1)) {
-    return;
-  }
-  const sessionId = name.slice(SESSION_PREFIX$1.length);
-  // @ts-ignore
-  await invoke('ContextMenu.show', x, y, CHAT_LIST_ITEM_CONTEXT_MENU, sessionId);
-};
+const FocusSelector = 'Viewlet.focusSelector';
+const SetCss = 'Viewlet.setCss';
+const SetDom2 = 'Viewlet.setDom2';
+const SetFocusContext = 'Viewlet.setFocusContext';
+const SetValueByName = 'Viewlet.setValueByName';
+const SetPatches = 'Viewlet.setPatches';
 
-const generateSessionId = () => {
-  return crypto.randomUUID();
+const FocusChatInput = 8000;
+
+const Button$2 = 'button';
+
+const Button$1 = 1;
+const Div = 4;
+const Span = 8;
+const Text = 12;
+const P = 50;
+const TextArea = 62;
+const Select$1 = 63;
+const Option$1 = 64;
+const Reference = 100;
+
+const Enter = 3;
+
+const Shift = 1 << 10 >>> 0;
+
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
 };
 
-const handleSubmit = async state => {
-  const {
-    composerValue,
-    nextMessageId,
-    selectedSessionId,
-    sessions
-  } = state;
-  const text = composerValue.trim();
-  const time = new Date().toLocaleTimeString([], {
-    hour: '2-digit',
-    minute: '2-digit'
-  });
-  if (!text) {
-    return {
-      ...state,
-      ignoreNextInput: true
-    };
-  }
-  const updatedSessions = sessions.map(session => {
-    if (session.id !== selectedSessionId) {
-      return session;
-    }
-    const message = {
-      id: `message-${nextMessageId}`,
-      role: 'user',
-      text,
-      time
-    };
-    return {
-      ...session,
-      messages: [...session.messages, message]
-    };
-  });
+const text = data => {
   return {
-    ...state,
-    composerValue: '',
-    ignoreNextInput: true,
-    lastSubmittedSessionId: selectedSessionId,
-    nextMessageId: nextMessageId + 1,
-    sessions: updatedSessions
+    childCount: 0,
+    text: data,
+    type: Text
   };
 };
 
-const CREATE_SESSION = 'create-session';
-const SESSION_PREFIX = 'session:';
-const RENAME_PREFIX = 'session-rename:';
-const DELETE_PREFIX = 'session-delete:';
-const SEND = 'send';
-const BACK = 'back';
-const handleClickSend = async state => {
-  return handleSubmit(state);
-};
-const getNextSelectedSessionId = (sessions, deletedId) => {
-  if (sessions.length === 0) {
-    return '';
-  }
-  const index = sessions.findIndex(session => session.id === deletedId);
-  if (index === -1) {
-    return sessions[0].id;
-  }
-  const nextIndex = Math.min(index, sessions.length - 1);
-  return sessions[nextIndex].id;
-};
-const createSession = state => {
-  const id = generateSessionId();
-  const session = {
-    id,
-    messages: [],
-    title: `Chat ${state.sessions.length + 1}`
-  };
-  return {
-    ...state,
-    renamingSessionId: '',
-    selectedSessionId: id,
-    sessions: [...state.sessions, session]
-  };
+const SetText = 1;
+const Replace = 2;
+const SetAttribute = 3;
+const RemoveAttribute = 4;
+const Add = 6;
+const NavigateChild = 7;
+const NavigateParent = 8;
+const RemoveChild = 9;
+const NavigateSibling = 10;
+const SetReferenceNodeUid = 11;
+
+const isKey = key => {
+  return key !== 'type' && key !== 'childCount';
 };
-const selectSession = (state, id) => {
-  const exists = state.sessions.some(session => session.id === id);
-  if (!exists) {
-    return state;
-  }
-  return {
-    ...state,
-    renamingSessionId: '',
-    selectedSessionId: id,
-    viewMode: 'detail'
-  };
+
+const getKeys = node => {
+  const keys = Object.keys(node).filter(isKey);
+  return keys;
 };
-const startRename = (state, id) => {
-  const session = state.sessions.find(item => item.id === id);
-  if (!session) {
-    return state;
+
+const arrayToTree = nodes => {
+  const result = [];
+  let i = 0;
+  while (i < nodes.length) {
+    const node = nodes[i];
+    const {
+      children,
+      nodesConsumed
+    } = getChildrenWithCount(nodes, i + 1, node.childCount || 0);
+    result.push({
+      node,
+      children
+    });
+    i += 1 + nodesConsumed;
   }
-  return {
-    ...state,
-    composerValue: session.title,
-    renamingSessionId: id,
-    selectedSessionId: id
-  };
+  return result;
 };
-const deleteSession = (state, id) => {
-  const filtered = state.sessions.filter(session => session.id !== id);
-  if (filtered.length === state.sessions.length) {
-    return state;
-  }
-  if (filtered.length === 0) {
+const getChildrenWithCount = (nodes, startIndex, childCount) => {
+  if (childCount === 0) {
     return {
-      ...state,
-      renamingSessionId: '',
-      selectedSessionId: '',
-      sessions: [],
-      viewMode: 'list'
+      children: [],
+      nodesConsumed: 0
     };
   }
+  const children = [];
+  let i = startIndex;
+  let remaining = childCount;
+  let totalConsumed = 0;
+  while (remaining > 0 && i < nodes.length) {
+    const node = nodes[i];
+    const nodeChildCount = node.childCount || 0;
+    const {
+      children: nodeChildren,
+      nodesConsumed
+    } = getChildrenWithCount(nodes, i + 1, nodeChildCount);
+    children.push({
+      node,
+      children: nodeChildren
+    });
+    const nodeSize = 1 + nodesConsumed;
+    i += nodeSize;
+    totalConsumed += nodeSize;
+    remaining--;
+  }
   return {
-    ...state,
-    renamingSessionId: state.renamingSessionId === id ? '' : state.renamingSessionId,
-    selectedSessionId: getNextSelectedSessionId(filtered, id),
-    sessions: filtered
+    children,
+    nodesConsumed: totalConsumed
   };
 };
-const handleClick = async (state, name) => {
-  if (!name) {
-    return state;
-  }
-  if (name === CREATE_SESSION) {
-    return createSession(state);
-  }
-  if (name.startsWith(SESSION_PREFIX)) {
-    const id = name.slice(SESSION_PREFIX.length);
-    return selectSession(state, id);
+
+const compareNodes = (oldNode, newNode) => {
+  const patches = [];
+  // Check if node type changed - return null to signal incompatible nodes
+  // (caller should handle this with a Replace operation)
+  if (oldNode.type !== newNode.type) {
+    return null;
   }
-  if (name.startsWith(RENAME_PREFIX)) {
-    const id = name.slice(RENAME_PREFIX.length);
-    return startRename(state, id);
+  // Handle reference nodes - special handling for uid changes
+  if (oldNode.type === Reference) {
+    if (oldNode.uid !== newNode.uid) {
+      patches.push({
+        type: SetReferenceNodeUid,
+        uid: newNode.uid
+      });
+    }
+    return patches;
   }
-  if (name.startsWith(DELETE_PREFIX)) {
-    const id = name.slice(DELETE_PREFIX.length);
-    return deleteSession(state, id);
-  }
-  if (name === SEND) {
-    return handleClickSend(state);
-  }
-  if (name === BACK) {
-    return {
-      ...state,
-      renamingSessionId: '',
-      viewMode: 'list'
-    };
-  }
-  return state;
-};
-
-const handleClickClose = async () => {
-  // @ts-ignore
-  await invoke('Chat.terminate');
-};
-
-const handleClickSettings = async () => {};
-
-const handleInput = async (state, value) => {
-  if (state.ignoreNextInput) {
-    return {
-      ...state,
-      ignoreNextInput: false
-    };
-  }
-  return {
-    ...state,
-    composerValue: value
-  };
-};
-
-const submitRename = state => {
-  const {
-    composerValue,
-    renamingSessionId,
-    sessions
-  } = state;
-  const title = composerValue.trim();
-  if (!renamingSessionId || !title) {
-    return {
-      ...state,
-      renamingSessionId: ''
-    };
-  }
-  const updatedSessions = sessions.map(session => {
-    if (session.id !== renamingSessionId) {
-      return session;
-    }
-    return {
-      ...session,
-      title
-    };
-  });
-  return {
-    ...state,
-    composerValue: '',
-    ignoreNextInput: true,
-    renamingSessionId: '',
-    sessions: updatedSessions
-  };
-};
-const handleKeyDown = async (state, key, shiftKey) => {
-  if (key !== 'Enter' || shiftKey) {
-    return state;
-  }
-  if (state.renamingSessionId) {
-    return submitRename(state);
-  }
-  return handleSubmit(state);
-};
-
-const id = 7201;
-const sendMessagePortToExtensionHostWorker = async port => {
-  await sendMessagePortToExtensionHostWorker$1(port, id);
-};
-
-const createExtensionHostRpc = async () => {
-  try {
-    const rpc = await create$4({
-      commandMap: {},
-      send: sendMessagePortToExtensionHostWorker
-    });
-    return rpc;
-  } catch (error) {
-    throw new VError(error, `Failed to create extension host rpc`);
-  }
-};
-
-const initialize = async () => {
-  const rpc = await createExtensionHostRpc();
-  set$2(rpc);
-};
-
-const isObject = value => {
-  return typeof value === 'object' && value !== null;
-};
-
-const getSavedSelectedSessionId = savedState => {
-  if (!isObject(savedState)) {
-    return undefined;
-  }
-  const {
-    selectedSessionId
-  } = savedState;
-  if (typeof selectedSessionId !== 'string') {
-    return undefined;
-  }
-  return selectedSessionId;
-};
-
-const getSavedSessions = savedState => {
-  if (!isObject(savedState)) {
-    return undefined;
-  }
-  const {
-    sessions
-  } = savedState;
-  if (!Array.isArray(sessions)) {
-    return undefined;
-  }
-  return sessions;
-};
-
-const loadContent = async (state, savedState) => {
-  const sessions = getSavedSessions(savedState) || state.sessions;
-  const preferredSessionId = getSavedSelectedSessionId(savedState) || state.selectedSessionId;
-  const selectedSessionId = sessions.some(session => session.id === preferredSessionId) ? preferredSessionId : sessions[0]?.id || '';
-  const viewMode = sessions.length === 0 ? 'list' : state.viewMode === 'detail' ? 'detail' : 'list';
-  return {
-    ...state,
-    initial: false,
-    selectedSessionId,
-    sessions,
-    viewMode
-  };
-};
-
-// TODO render things like scrollbar height,scrollbar offset, textarea height,
-// list height
-const css = `
-`;
-const renderCss = (oldState, newState) => {
-  return [SetCss, newState.uid, css];
-};
-
-const mergeClassNames = (...classNames) => {
-  return classNames.filter(Boolean).join(' ');
-};
-
-const text = data => {
-  return {
-    childCount: 0,
-    text: data,
-    type: Text
-  };
-};
-
-const SetText = 1;
-const Replace = 2;
-const SetAttribute = 3;
-const RemoveAttribute = 4;
-const Add = 6;
-const NavigateChild = 7;
-const NavigateParent = 8;
-const RemoveChild = 9;
-const NavigateSibling = 10;
-const SetReferenceNodeUid = 11;
-
-const isKey = key => {
-  return key !== 'type' && key !== 'childCount';
-};
-
-const getKeys = node => {
-  const keys = Object.keys(node).filter(isKey);
-  return keys;
-};
-
-const arrayToTree = nodes => {
-  const result = [];
-  let i = 0;
-  while (i < nodes.length) {
-    const node = nodes[i];
-    const {
-      children,
-      nodesConsumed
-    } = getChildrenWithCount(nodes, i + 1, node.childCount || 0);
-    result.push({
-      node,
-      children
-    });
-    i += 1 + nodesConsumed;
-  }
-  return result;
-};
-const getChildrenWithCount = (nodes, startIndex, childCount) => {
-  if (childCount === 0) {
-    return {
-      children: [],
-      nodesConsumed: 0
-    };
-  }
-  const children = [];
-  let i = startIndex;
-  let remaining = childCount;
-  let totalConsumed = 0;
-  while (remaining > 0 && i < nodes.length) {
-    const node = nodes[i];
-    const nodeChildCount = node.childCount || 0;
-    const {
-      children: nodeChildren,
-      nodesConsumed
-    } = getChildrenWithCount(nodes, i + 1, nodeChildCount);
-    children.push({
-      node,
-      children: nodeChildren
-    });
-    const nodeSize = 1 + nodesConsumed;
-    i += nodeSize;
-    totalConsumed += nodeSize;
-    remaining--;
-  }
-  return {
-    children,
-    nodesConsumed: totalConsumed
-  };
-};
-
-const compareNodes = (oldNode, newNode) => {
-  const patches = [];
-  // Check if node type changed - return null to signal incompatible nodes
-  // (caller should handle this with a Replace operation)
-  if (oldNode.type !== newNode.type) {
-    return null;
-  }
-  // Handle reference nodes - special handling for uid changes
-  if (oldNode.type === Reference) {
-    if (oldNode.uid !== newNode.uid) {
-      patches.push({
-        type: SetReferenceNodeUid,
-        uid: newNode.uid
-      });
-    }
-    return patches;
-  }
-  // Handle text nodes
-  if (oldNode.type === Text && newNode.type === Text) {
-    if (oldNode.text !== newNode.text) {
-      patches.push({
-        type: SetText,
-        value: newNode.text
-      });
-    }
-    return patches;
+  // Handle text nodes
+  if (oldNode.type === Text && newNode.type === Text) {
+    if (oldNode.text !== newNode.text) {
+      patches.push({
+        type: SetText,
+        value: newNode.text
+      });
+    }
+    return patches;
   }
   // Compare attributes
   const oldKeys = getKeys(oldNode);
@@ -1836,114 +1590,1055 @@ const diffChildren = (oldChildren, newChildren, patches) => {
       indicesToRemove.push(i);
     }
   }
-  // Navigate back to parent if we ended at a child
-  if (currentChildIndex >= 0) {
-    patches.push({
-      type: NavigateParent
-    });
-    currentChildIndex = -1;
+  // Navigate back to parent if we ended at a child
+  if (currentChildIndex >= 0) {
+    patches.push({
+      type: NavigateParent
+    });
+    currentChildIndex = -1;
+  }
+  // Add remove patches in reverse order (highest index first)
+  // This ensures indices remain valid as we remove
+  for (let j = indicesToRemove.length - 1; j >= 0; j--) {
+    patches.push({
+      type: RemoveChild,
+      index: indicesToRemove[j]
+    });
+  }
+};
+const diffTrees = (oldTree, newTree, patches, path) => {
+  // At the root level (path.length === 0), we're already AT the element
+  // So we compare the root node directly, then compare its children
+  if (path.length === 0 && oldTree.length === 1 && newTree.length === 1) {
+    const oldNode = oldTree[0];
+    const newNode = newTree[0];
+    // Compare root nodes
+    const nodePatches = compareNodes(oldNode.node, newNode.node);
+    // If nodePatches is null, the root node types are incompatible - need to replace
+    if (nodePatches === null) {
+      const flatNodes = treeToArray(newNode);
+      patches.push({
+        type: Replace,
+        nodes: flatNodes
+      });
+      return;
+    }
+    if (nodePatches.length > 0) {
+      patches.push(...nodePatches);
+    }
+    // Compare children
+    if (oldNode.children.length > 0 || newNode.children.length > 0) {
+      diffChildren(oldNode.children, newNode.children, patches);
+    }
+  } else {
+    // Non-root level or multiple root elements - use the regular comparison
+    diffChildren(oldTree, newTree, patches);
+  }
+};
+
+const removeTrailingNavigationPatches = patches => {
+  // Find the last non-navigation patch
+  let lastNonNavigationIndex = -1;
+  for (let i = patches.length - 1; i >= 0; i--) {
+    const patch = patches[i];
+    if (patch.type !== NavigateChild && patch.type !== NavigateParent && patch.type !== NavigateSibling) {
+      lastNonNavigationIndex = i;
+      break;
+    }
+  }
+  // Return patches up to and including the last non-navigation patch
+  return lastNonNavigationIndex === -1 ? [] : patches.slice(0, lastNonNavigationIndex + 1);
+};
+
+const diffTree = (oldNodes, newNodes) => {
+  // Step 1: Convert flat arrays to tree structures
+  const oldTree = arrayToTree(oldNodes);
+  const newTree = arrayToTree(newNodes);
+  // Step 3: Compare the trees
+  const patches = [];
+  diffTrees(oldTree, newTree, patches, []);
+  // Remove trailing navigation patches since they serve no purpose
+  return removeTrailingNavigationPatches(patches);
+};
+
+const getKeyBindings = () => {
+  return [{
+    command: 'Chat.handleSubmit',
+    key: Enter,
+    when: FocusChatInput
+  }, {
+    command: 'Chat.enterNewLine',
+    key: Shift | Enter,
+    when: FocusChatInput
+  }];
+};
+
+const SESSION_PREFIX$1 = 'session:';
+const CHAT_LIST_ITEM_CONTEXT_MENU = 'ChatListItemContextMenu';
+const handleChatListContextMenu = async (name, x, y) => {
+  if (!name || !name.startsWith(SESSION_PREFIX$1)) {
+    return;
+  }
+  const sessionId = name.slice(SESSION_PREFIX$1.length);
+  // @ts-ignore
+  await invoke('ContextMenu.show', x, y, CHAT_LIST_ITEM_CONTEXT_MENU, sessionId);
+};
+
+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 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));
+    });
+  });
+};
+const openSessionsDatabase = async () => {
+  const request = indexedDB.open(LVCE_CHAT_SESSIONS_DB_NAME, LVCE_CHAT_SESSIONS_DB_VERSION);
+  request.addEventListener('upgradeneeded', () => {
+    const database = request.result;
+    if (!database.objectStoreNames.contains(LVCE_CHAT_SESSIONS_STORE)) {
+      database.createObjectStore(LVCE_CHAT_SESSIONS_STORE, {
+        keyPath: 'id'
+      });
+    }
+  });
+  return requestToPromise(() => request);
+};
+class IndexedDbChatSessionStorage {
+  async getDatabase() {
+    if (!this.databasePromise) {
+      this.databasePromise = openSessionsDatabase();
+    }
+    return this.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);
+  }
+  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);
+  }
+  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;
+  }
+  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;
+  }
+  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);
+  }
+}
+
+class InMemoryChatSessionStorage {
+  sessions = new Map();
+  async clear() {
+    this.sessions.clear();
+  }
+  async deleteSession(id) {
+    this.sessions.delete(id);
+  }
+  async getSession(id) {
+    return this.sessions.get(id);
+  }
+  async listSessions() {
+    return [...this.sessions.values()];
+  }
+  async setSession(session) {
+    this.sessions.set(session.id, session);
+  }
+}
+
+const createDefaultStorage = () => {
+  if (typeof indexedDB === 'undefined') {
+    return new InMemoryChatSessionStorage();
+  }
+  return new IndexedDbChatSessionStorage();
+};
+let chatSessionStorage = createDefaultStorage();
+const listChatSessions = async () => {
+  const sessions = await chatSessionStorage.listSessions();
+  return sessions.map(session => ({
+    id: session.id,
+    messages: [],
+    title: session.title
+  }));
+};
+const getChatSession = async id => {
+  const session = await chatSessionStorage.getSession(id);
+  if (!session) {
+    return undefined;
+  }
+  return {
+    id: session.id,
+    messages: [...session.messages],
+    title: session.title
+  };
+};
+const saveChatSession = async session => {
+  await chatSessionStorage.setSession({
+    id: session.id,
+    messages: [...session.messages],
+    title: session.title
+  });
+};
+const deleteChatSession = async id => {
+  await chatSessionStorage.deleteSession(id);
+};
+const clearChatSessions = async () => {
+  await chatSessionStorage.clear();
+};
+
+const generateSessionId = () => {
+  return crypto.randomUUID();
+};
+
+const createSession = async state => {
+  const id = generateSessionId();
+  const session = {
+    id,
+    messages: [],
+    title: `Chat ${state.sessions.length + 1}`
+  };
+  await saveChatSession(session);
+  return {
+    ...state,
+    renamingSessionId: '',
+    selectedSessionId: id,
+    sessions: [...state.sessions, session]
+  };
+};
+
+const getNextSelectedSessionId = (sessions, deletedId) => {
+  if (sessions.length === 0) {
+    return '';
+  }
+  const index = sessions.findIndex(session => session.id === deletedId);
+  if (index === -1) {
+    return sessions[0].id;
+  }
+  const nextIndex = Math.min(index, sessions.length - 1);
+  return sessions[nextIndex].id;
+};
+
+const deleteSession = async (state, id) => {
+  const {
+    renamingSessionId,
+    sessions
+  } = state;
+  const filtered = sessions.filter(session => session.id !== id);
+  if (filtered.length === sessions.length) {
+    return state;
+  }
+  await deleteChatSession(id);
+  if (filtered.length === 0) {
+    return {
+      ...state,
+      renamingSessionId: '',
+      selectedSessionId: '',
+      sessions: [],
+      viewMode: 'list'
+    };
+  }
+  const nextSelectedSessionId = getNextSelectedSessionId(filtered, id);
+  const loadedSession = await getChatSession(nextSelectedSessionId);
+  const hydratedSessions = filtered.map(session => {
+    if (session.id !== nextSelectedSessionId) {
+      return session;
+    }
+    if (!loadedSession) {
+      return session;
+    }
+    return loadedSession;
+  });
+  return {
+    ...state,
+    renamingSessionId: renamingSessionId === id ? '' : renamingSessionId,
+    selectedSessionId: nextSelectedSessionId,
+    sessions: hydratedSessions
+  };
+};
+
+const focusInput = state => {
+  return {
+    ...state,
+    focus: 'composer',
+    focused: true
+  };
+};
+
+const delay = async ms => {
+  await new Promise(resolve => setTimeout(resolve, ms));
+};
+const getMockAiResponse = userMessage => {
+  return `Mock AI response: I received "${userMessage}".`;
+};
+const getAiResponse = async (userText, nextMessageId) => {
+  await delay(800);
+  const assistantTime = new Date().toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit'
+  });
+  return {
+    id: `message-${nextMessageId}`,
+    role: 'assistant',
+    text: getMockAiResponse(userText),
+    time: assistantTime
+  };
+};
+
+const handleSubmit = async state => {
+  const {
+    composerValue,
+    nextMessageId,
+    selectedSessionId,
+    sessions,
+    viewMode
+  } = state;
+  const userText = composerValue.trim();
+  if (!userText) {
+    return state;
+  }
+  const userTime = new Date().toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit'
+  });
+  const userMessage = {
+    id: `message-${nextMessageId}`,
+    role: 'user',
+    text: userText,
+    time: userTime
+  };
+  let workingSessions = sessions;
+  if (viewMode === 'detail') {
+    const loadedSession = await getChatSession(selectedSessionId);
+    if (loadedSession) {
+      workingSessions = sessions.map(session => {
+        if (session.id !== selectedSessionId) {
+          return session;
+        }
+        return loadedSession;
+      });
+    }
+  }
+  let optimisticState;
+  if (viewMode === 'list') {
+    const newSessionId = generateSessionId();
+    const newSession = {
+      id: newSessionId,
+      messages: [userMessage],
+      title: `Chat ${workingSessions.length + 1}`
+    };
+    await saveChatSession(newSession);
+    optimisticState = focusInput({
+      ...state,
+      composerValue: '',
+      inputSource: 'script',
+      lastSubmittedSessionId: newSessionId,
+      nextMessageId: nextMessageId + 1,
+      selectedSessionId: newSessionId,
+      sessions: [...workingSessions, newSession],
+      viewMode: 'detail'
+    });
+  } else {
+    const updatedSessions = workingSessions.map(session => {
+      if (session.id !== selectedSessionId) {
+        return session;
+      }
+      return {
+        ...session,
+        messages: [...session.messages, userMessage]
+      };
+    });
+    const selectedSession = updatedSessions.find(session => session.id === selectedSessionId);
+    if (selectedSession) {
+      await saveChatSession(selectedSession);
+    }
+    optimisticState = focusInput({
+      ...state,
+      composerValue: '',
+      inputSource: 'script',
+      lastSubmittedSessionId: selectedSessionId,
+      nextMessageId: nextMessageId + 1,
+      sessions: updatedSessions
+    });
+  }
+  set(state.uid, state, optimisticState);
+  // @ts-ignore
+  await invoke('Chat.rerender');
+  const assistantMessage = await getAiResponse(userText, optimisticState.nextMessageId);
+  const updatedSessions = optimisticState.sessions.map(session => {
+    if (session.id !== optimisticState.selectedSessionId) {
+      return session;
+    }
+    return {
+      ...session,
+      messages: [...session.messages, assistantMessage]
+    };
+  });
+  const selectedSession = updatedSessions.find(session => session.id === optimisticState.selectedSessionId);
+  if (selectedSession) {
+    await saveChatSession(selectedSession);
+  }
+  return focusInput({
+    ...optimisticState,
+    nextMessageId: optimisticState.nextMessageId + 1,
+    sessions: updatedSessions
+  });
+};
+
+const handleClickSend = async state => {
+  const {
+    selectedSessionId,
+    sessions,
+    viewMode
+  } = state;
+  const hasSelectedSession = sessions.some(session => session.id === selectedSessionId);
+  const submitState = viewMode === 'list' && hasSelectedSession ? {
+    ...state,
+    viewMode: 'detail'
+  } : state;
+  return handleSubmit(submitState);
+};
+
+const selectSession = async (state, id) => {
+  const exists = state.sessions.some(session => session.id === id);
+  if (!exists) {
+    return state;
+  }
+  const loadedSession = await getChatSession(id);
+  const sessions = state.sessions.map(session => {
+    if (session.id !== id) {
+      return session;
+    }
+    if (!loadedSession) {
+      return session;
+    }
+    return loadedSession;
+  });
+  return {
+    ...state,
+    renamingSessionId: '',
+    selectedSessionId: id,
+    sessions,
+    viewMode: 'detail'
+  };
+};
+
+const startRename = (state, id) => {
+  const {
+    sessions
+  } = state;
+  const session = sessions.find(item => item.id === id);
+  if (!session) {
+    return state;
+  }
+  return {
+    ...state,
+    composerValue: session.title,
+    inputSource: 'script',
+    renamingSessionId: id,
+    selectedSessionId: 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 {
+    sessions
+  } = state;
+  const index = getListIndex(state, eventX, eventY);
+  if (index < 0) {
+    return state;
+  }
+  const session = sessions[index];
+  if (!session) {
+    return state;
+  }
+  return selectSession(state, session.id);
+};
+
+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) {
+    return createSession(state);
+  }
+  if (name.startsWith(SESSION_PREFIX)) {
+    const id = name.slice(SESSION_PREFIX.length);
+    return selectSession(state, id);
+  }
+  if (name.startsWith(RENAME_PREFIX)) {
+    const id = name.slice(RENAME_PREFIX.length);
+    return startRename(state, id);
+  }
+  if (name === SESSION_DELETE) {
+    return deleteSession(state, id);
+  }
+  if (name === SEND) {
+    return handleClickSend(state);
+  }
+  return state;
+};
+
+const handleClickBack = async state => {
+  return {
+    ...state,
+    renamingSessionId: '',
+    viewMode: 'list'
+  };
+};
+
+const handleClickClose = async () => {
+  // @ts-ignore
+  await invoke('Layout.hideSecondarySideBar');
+};
+
+const handleClickDelete = async (state, sessionId = '') => {
+  return deleteSession(state, sessionId);
+};
+
+const handleClickNew = async state => {
+  return createSession(state);
+};
+
+const handleClickSettings = async () => {
+  // TODO
+  await invoke('Main.openUri', 'app://settings.json');
+};
+
+const handleInput = async (state, value, inputSource = 'user') => {
+  return {
+    ...state,
+    composerValue: value,
+    inputSource
+  };
+};
+
+const handleInputFocus = async (state, name) => {
+  if (name === 'composer') {
+    return focusInput(state);
+  }
+  if (name === 'send') {
+    return {
+      ...state,
+      focus: 'send-button',
+      focused: true
+    };
+  }
+  if (name.startsWith('session:') || name === 'SessionDelete') {
+    return {
+      ...state,
+      focus: 'list',
+      focused: true
+    };
+  }
+  if (name === 'create-session' || name === 'settings' || name === 'close-chat' || name === 'back') {
+    return {
+      ...state,
+      focus: 'header',
+      focused: true
+    };
+  }
+  return {
+    ...state,
+    focused: false
+  };
+};
+
+const submitRename = async state => {
+  const {
+    composerValue,
+    renamingSessionId,
+    sessions
+  } = state;
+  const title = composerValue.trim();
+  if (!renamingSessionId || !title) {
+    return {
+      ...state,
+      renamingSessionId: ''
+    };
+  }
+  const updatedSessions = sessions.map(session => {
+    if (session.id !== renamingSessionId) {
+      return session;
+    }
+    return {
+      ...session,
+      title
+    };
+  });
+  const renamedSession = updatedSessions.find(session => session.id === renamingSessionId);
+  if (renamedSession) {
+    await saveChatSession(renamedSession);
+  }
+  return {
+    ...state,
+    composerValue: '',
+    inputSource: 'script',
+    renamingSessionId: '',
+    sessions: updatedSessions
+  };
+};
+
+const handleKeyDown = async (state, key, shiftKey) => {
+  const {
+    composerValue,
+    renamingSessionId,
+    selectedSessionId,
+    sessions,
+    viewMode
+  } = state;
+  if (key !== 'Enter' || shiftKey) {
+    return state;
+  }
+  if (renamingSessionId) {
+    return submitRename(state);
+  }
+  const hasInput = composerValue.trim().length > 0;
+  const hasSelectedSession = sessions.some(session => session.id === selectedSessionId);
+  const submitState = viewMode === 'list' && hasInput && hasSelectedSession ? {
+    ...state,
+    viewMode: 'detail'
+  } : state;
+  return handleSubmit(submitState);
+};
+
+const handleModelChange = async (state, value) => {
+  return {
+    ...state,
+    selectedModelId: value
+  };
+};
+
+const handleNewline = async state => {
+  return handleInput(state, `${state.composerValue}\n`);
+};
+
+const id = 7201;
+const sendMessagePortToExtensionHostWorker = async port => {
+  await sendMessagePortToExtensionHostWorker$1(port, id);
+};
+
+const createExtensionHostRpc = async () => {
+  try {
+    const rpc = await create$4({
+      commandMap: {},
+      send: sendMessagePortToExtensionHostWorker
+    });
+    return rpc;
+  } catch (error) {
+    throw new VError(error, `Failed to create extension host rpc`);
+  }
+};
+
+const initialize = async () => {
+  const rpc = await createExtensionHostRpc();
+  set$2(rpc);
+};
+
+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;
+  }
+  const {
+    selectedModelId
+  } = savedState;
+  if (typeof selectedModelId !== 'string') {
+    return undefined;
+  }
+  return selectedModelId;
+};
+
+const getSavedSelectedSessionId = savedState => {
+  if (!isObject(savedState)) {
+    return undefined;
+  }
+  const {
+    selectedSessionId
+  } = savedState;
+  if (typeof selectedSessionId !== 'string') {
+    return undefined;
   }
-  // Add remove patches in reverse order (highest index first)
-  // This ensures indices remain valid as we remove
-  for (let j = indicesToRemove.length - 1; j >= 0; j--) {
-    patches.push({
-      type: RemoveChild,
-      index: indicesToRemove[j]
-    });
+  return selectedSessionId;
+};
+
+const getSavedSessions = savedState => {
+  if (!isObject(savedState)) {
+    return undefined;
+  }
+  const {
+    sessions
+  } = savedState;
+  if (!Array.isArray(sessions)) {
+    return undefined;
   }
+  return sessions;
 };
-const diffTrees = (oldTree, newTree, patches, path) => {
-  // At the root level (path.length === 0), we're already AT the element
-  // So we compare the root node directly, then compare its children
-  if (path.length === 0 && oldTree.length === 1 && newTree.length === 1) {
-    const oldNode = oldTree[0];
-    const newNode = newTree[0];
-    // Compare root nodes
-    const nodePatches = compareNodes(oldNode.node, newNode.node);
-    // If nodePatches is null, the root node types are incompatible - need to replace
-    if (nodePatches === null) {
-      const flatNodes = treeToArray(newNode);
-      patches.push({
-        type: Replace,
-        nodes: flatNodes
-      });
-      return;
+
+const getSavedViewMode = savedState => {
+  if (!isObject(savedState)) {
+    return undefined;
+  }
+  const {
+    viewMode
+  } = savedState;
+  if (viewMode !== 'list' && viewMode !== 'detail') {
+    return undefined;
+  }
+  return viewMode;
+};
+
+const toSummarySession = session => {
+  return {
+    id: session.id,
+    messages: [],
+    title: session.title
+  };
+};
+const loadSelectedSessionMessages = async (sessions, selectedSessionId) => {
+  if (!selectedSessionId) {
+    return sessions;
+  }
+  const loadedSession = await getChatSession(selectedSessionId);
+  if (!loadedSession) {
+    return sessions;
+  }
+  return sessions.map(session => {
+    if (session.id !== selectedSessionId) {
+      return session;
     }
-    if (nodePatches.length > 0) {
-      patches.push(...nodePatches);
+    return loadedSession;
+  });
+};
+const loadContent = async (state, savedState) => {
+  const savedBounds = getSavedBounds(savedState);
+  const savedSelectedModelId = getSavedSelectedModelId(savedState);
+  const savedViewMode = getSavedViewMode(savedState);
+  const legacySavedSessions = getSavedSessions(savedState);
+  const storedSessions = await listChatSessions();
+  let sessions = storedSessions;
+  if (sessions.length === 0 && legacySavedSessions && legacySavedSessions.length > 0) {
+    for (const session of legacySavedSessions) {
+      await saveChatSession(session);
     }
-    // Compare children
-    if (oldNode.children.length > 0 || newNode.children.length > 0) {
-      diffChildren(oldNode.children, newNode.children, patches);
+    sessions = legacySavedSessions.map(toSummarySession);
+  }
+  if (sessions.length === 0 && state.sessions.length > 0) {
+    for (const session of state.sessions) {
+      await saveChatSession(session);
     }
-  } else {
-    // Non-root level or multiple root elements - use the regular comparison
-    diffChildren(oldTree, newTree, patches);
+    sessions = state.sessions.map(toSummarySession);
   }
+  const preferredSessionId = getSavedSelectedSessionId(savedState) || state.selectedSessionId;
+  const preferredModelId = savedSelectedModelId || state.selectedModelId;
+  const selectedModelId = state.models.some(model => model.id === preferredModelId) ? preferredModelId : state.models[0]?.id || '';
+  const selectedSessionId = sessions.some(session => session.id === preferredSessionId) ? preferredSessionId : sessions[0]?.id || '';
+  sessions = await loadSelectedSessionMessages(sessions, selectedSessionId);
+  const preferredViewMode = savedViewMode || state.viewMode;
+  const viewMode = sessions.length === 0 || !selectedSessionId ? 'list' : preferredViewMode === 'detail' ? 'detail' : 'list';
+  return {
+    ...state,
+    ...savedBounds,
+    initial: false,
+    selectedModelId,
+    selectedSessionId,
+    sessions,
+    viewMode
+  };
 };
 
-const removeTrailingNavigationPatches = patches => {
-  // Find the last non-navigation patch
-  let lastNonNavigationIndex = -1;
-  for (let i = patches.length - 1; i >= 0; i--) {
-    const patch = patches[i];
-    if (patch.type !== NavigateChild && patch.type !== NavigateParent && patch.type !== NavigateSibling) {
-      lastNonNavigationIndex = i;
-      break;
+const openMockSession = async (state, mockSessionId, mockChatMessages) => {
+  if (!mockSessionId) {
+    return state;
+  }
+  const existingSession = state.sessions.find(session => session.id === mockSessionId);
+  const sessions = existingSession ? state.sessions.map(session => {
+    if (session.id !== mockSessionId) {
+      return session;
     }
+    return {
+      ...session,
+      messages: mockChatMessages
+    };
+  }) : [...state.sessions, {
+    id: mockSessionId,
+    messages: mockChatMessages,
+    title: mockSessionId
+  }];
+  const selectedSession = sessions.find(session => session.id === mockSessionId);
+  if (selectedSession) {
+    await saveChatSession(selectedSession);
   }
-  // Return patches up to and including the last non-navigation patch
-  return lastNonNavigationIndex === -1 ? [] : patches.slice(0, lastNonNavigationIndex + 1);
+  return {
+    ...state,
+    renamingSessionId: '',
+    selectedSessionId: mockSessionId,
+    sessions,
+    viewMode: 'detail'
+  };
 };
 
-const diffTree = (oldNodes, newNodes) => {
-  // Step 1: Convert flat arrays to tree structures
-  const oldTree = arrayToTree(oldNodes);
-  const newTree = arrayToTree(newNodes);
-  // Step 3: Compare the trees
-  const patches = [];
-  diffTrees(oldTree, newTree, patches, []);
-  // Remove trailing navigation patches since they serve no purpose
-  return removeTrailingNavigationPatches(patches);
+// TODO render things like scrollbar height,scrollbar offset, textarea height,
+// list height
+const css = `
+`;
+const renderCss = (oldState, newState) => {
+  return [SetCss, newState.uid, css];
+};
+
+const getFocusSelector = focus => {
+  switch (focus) {
+    case 'composer':
+    case 'input':
+      return '[name="composer"]';
+    case 'header':
+      return '[name="create-session"]';
+    case 'list':
+      return '[name^="session:"]';
+    case 'send-button':
+      return '[name="send"]';
+    default:
+      return '[name="composer"]';
+  }
+};
+const renderFocus = (oldState, newState) => {
+  const selector = getFocusSelector(newState.focus);
+  return [FocusSelector, selector];
+};
+
+const renderFocusContext = (oldState, newState) => {
+  const when = 2344;
+  return [SetFocusContext, newState.uid, when];
 };
 
 const ChatActions = 'ChatActions';
 const ChatName = 'ChatName';
 const ChatSendArea = 'ChatSendArea';
+const ChatSendAreaBottom = 'ChatSendAreaBottom';
+const ChatSendAreaContent = 'ChatSendAreaContent';
 const Chat = 'Chat';
 const ChatHeader = 'ChatHeader';
 const Button = 'Button';
+const ButtonDisabled = 'ButtonDisabled';
 const ButtonPrimary = 'ButtonPrimary';
-const ChatDetails = 'ChatDetails';
-const ChatDetailsContent = 'ChatDetailsContent';
 const IconButton = 'IconButton';
 const Label = 'Label';
 const ChatList = 'ChatList';
+const ChatListEmpty = 'ChatListEmpty';
 const ChatListItem = 'ChatListItem';
+const ChatListItemLabel = 'ChatListItemLabel';
 const Markdown = 'Markdown';
 const Message = 'Message';
+const MessageUser = 'MessageUser';
+const MessageAssistant = 'MessageAssistant';
 const MultilineInputBox = 'MultilineInputBox';
+const Option = 'Option';
+const Select = 'Select';
 const Viewlet = 'Viewlet';
 const ChatWelcomeMessage = 'ChatWelcomeMessage';
 
 const HandleContextMenu = 2;
+const HandleFocus = 3;
 const HandleInput = 4;
 const HandleClick = 11;
 const HandleKeyDown = 12;
 const HandleClickClose = 13;
 const HandleClickSettings = 14;
+const HandleClickNew = 15;
+const HandleClickBack = 16;
+const HandleClickList = 17;
+const HandleClickDelete = 18;
+const HandleSubmit = 19;
+const HandleModelChange = 20;
+
+const getChatSendAreaDom = (composerValue, models, selectedModelId) => {
+  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)];
+  });
+  return [{
+    childCount: 1,
+    className: ChatSendArea,
+    type: Div
+  }, {
+    childCount: 2,
+    className: ChatSendAreaContent,
+    type: Div
+  }, {
+    childCount: 0,
+    className: MultilineInputBox,
+    name: 'composer',
+    onInput: HandleInput,
+    placeholder: composePlaceholder,
+    rows: 4,
+    type: TextArea,
+    value: composerValue
+  }, {
+    childCount: 2,
+    className: ChatSendAreaBottom,
+    type: Div
+  }, {
+    childCount: models.length,
+    className: Select,
+    name: 'model',
+    onInput: HandleModelChange,
+    type: Select$1,
+    value: selectedModelId
+  }, ...modelOptions, {
+    childCount: 1,
+    className: sendButtonClassName,
+    disabled: isSendDisabled,
+    name: 'send',
+    onClick: HandleSubmit,
+    role: Button$2,
+    title: sendMessage,
+    type: Button$1
+  }, text(send)];
+};
+
+const getHeaderActionVirtualDom = item => {
+  return [{
+    childCount: 1,
+    className: IconButton,
+    name: item.name,
+    onClick: item.onClick,
+    role: Button$2,
+    title: item.title,
+    type: Button$1
+  }, text(item.icon)];
+};
 
 const getChatHeaderActionsDom = () => {
   const items = [{
     icon: '+',
     name: 'create-session',
+    onClick: HandleClickNew,
     title: newChat
   }, {
     icon: '⚙',
+    name: 'settings',
     onClick: HandleClickSettings,
     title: settings
   }, {
     icon: '×',
+    name: 'close-chat',
     onClick: HandleClickClose,
     title: closeChat
   }];
@@ -1951,24 +2646,7 @@ const getChatHeaderActionsDom = () => {
     childCount: items.length,
     className: ChatActions,
     type: Div
-  }, ...items.flatMap(item => {
-    const name = 'name' in item ? item.name : undefined;
-    const onClick = 'onClick' in item ? item.onClick : undefined;
-    return [{
-      childCount: 1,
-      className: IconButton,
-      ...(name ? {
-        name
-      } : {}),
-      ...(onClick ? {
-        onClick
-      } : {}),
-      role: Button$2,
-      tabIndex: 0,
-      title: item.title,
-      type: Button$1
-    }, text(item.icon)];
-  })];
+  }, ...items.flatMap(getHeaderActionVirtualDom)];
 };
 
 const getChatHeaderBackButtonVirtualDom = () => {
@@ -1976,8 +2654,8 @@ const getChatHeaderBackButtonVirtualDom = () => {
     childCount: 1,
     className: IconButton,
     name: 'back',
+    onClick: HandleClickBack,
     role: Button$2,
-    tabIndex: 0,
     title: backToChats,
     type: Button$1
   }, text('←')];
@@ -1999,61 +2677,23 @@ const getChatHeaderDomDetailMode = selectedSessionTitle => {
   }, text(selectedSessionTitle), ...getChatHeaderActionsDom()];
 };
 
-const getChatDetailsDom = (selectedSessionTitle, messagesNodes, composerValue) => {
-  return [{
-    childCount: 3,
-    className: ChatDetails,
-    type: Div
-  }, {
-    childCount: 1,
-    className: Label,
-    type: Span
-  }, text(selectedSessionTitle), {
-    childCount: Math.max(messagesNodes.length, 0),
-    className: ChatDetailsContent,
-    type: Div
-  }, ...messagesNodes, {
-    childCount: 2,
-    className: ChatSendArea,
-    type: Div
-  }, {
-    childCount: 0,
-    className: MultilineInputBox,
-    name: 'composer',
-    placeholder: composePlaceholder,
-    rows: 4,
-    type: TextArea,
-    value: composerValue
-  }, {
-    childCount: 1,
-    className: Button + ' ' + ButtonPrimary,
-    name: 'send',
-    role: Button$2,
-    tabIndex: 0,
-    title: sendMessage,
-    type: Button$1
-  }, text(send)];
-};
-
-const getChatContentDom = (viewMode, sessionsLength, emptyStateNodes, sessionNodes, selectedSessionTitle, messagesNodes, composerValue) => {
-  return getChatDetailsDom(selectedSessionTitle, messagesNodes, composerValue);
-};
-
 const getChatMessageDom = message => {
+  const roleClassName = message.role === 'user' ? MessageUser : MessageAssistant;
   return [{
     childCount: 2,
-    className: Message,
+    className: mergeClassNames(Message, roleClassName),
     type: Div
   }, {
     childCount: 1,
     className: Label,
-    type: Strong
+    type: Div
   }, text(`${message.role === 'user' ? you : assistant} · ${message.time}`), {
     childCount: 1,
     className: Markdown,
     type: P
   }, text(message.text)];
 };
+
 const getMessagesDom = messages => {
   if (messages.length === 0) {
     return [{
@@ -2062,25 +2702,22 @@ const getMessagesDom = messages => {
       type: Div
     }, text(startConversation)];
   }
-  return messages.flatMap(message => {
-    return getChatMessageDom(message);
-  });
+  return [{
+    childCount: messages.length,
+    className: 'ChatMessages',
+    type: Div
+  }, ...messages.flatMap(getChatMessageDom)];
 };
 
-const getChatModeDetailVirtualDom = (sessions, selectedSessionId, composerValue) => {
+const getChatModeDetailVirtualDom = (sessions, selectedSessionId, composerValue, models, selectedModelId) => {
   const selectedSession = sessions.find(session => session.id === selectedSessionId);
   const selectedSessionTitle = selectedSession?.title || chatTitle;
   const messages = selectedSession ? selectedSession.messages : [];
-  const messagesNodes = getMessagesDom(messages);
-  const contentNodes = getChatContentDom('detail', sessions.length, [], [], selectedSessionTitle, messagesNodes, composerValue);
   return [{
-    childCount: 2,
-    className: Viewlet + ' Chat',
-    onClick: HandleClick,
-    onInput: HandleInput,
-    onKeyDown: HandleKeyDown,
+    childCount: 3,
+    className: mergeClassNames(Viewlet, Chat),
     type: Div
-  }, ...getChatHeaderDomDetailMode(selectedSessionTitle), ...contentNodes];
+  }, ...getChatHeaderDomDetailMode(selectedSessionTitle), ...getMessagesDom(messages), ...getChatSendAreaDom(composerValue, models, selectedModelId)];
 };
 
 const getChatHeaderListModeDom = () => {
@@ -2095,18 +2732,19 @@ const getChatHeaderListModeDom = () => {
   }, text(chats), ...getChatHeaderActionsDom()];
 };
 
-const getEmptyChatSessionsDom = sessionsLength => {
-  if (sessionsLength !== 0) {
-    return [];
-  }
+const getEmptyChatSessionsDom = () => {
   return [{
+    childCount: 1,
+    className: ChatListEmpty,
+    type: Div
+  }, {
     childCount: 1,
     className: Label,
     type: Div
   }, text(clickToOpenNewChat)];
 };
 
-const getSessionDom = (session, _selectedSessionId) => {
+const getSessionDom = session => {
   const sessionClassName = ChatListItem;
   return [{
     childCount: 2,
@@ -2114,7 +2752,7 @@ const getSessionDom = (session, _selectedSessionId) => {
     type: Div
   }, {
     childCount: 1,
-    className: ChatName,
+    className: ChatListItemLabel,
     name: `session:${session.id}`,
     onContextMenu: HandleContextMenu,
     tabIndex: 0,
@@ -2126,29 +2764,34 @@ const getSessionDom = (session, _selectedSessionId) => {
   }, {
     childCount: 1,
     className: IconButton,
-    name: `session-delete:${session.id}`,
+    'data-id': session.id,
+    name: 'SessionDelete',
+    onClick: HandleClickDelete,
     role: Button$2,
     tabIndex: 0,
-    title: deleteChatSession,
+    title: deleteChatSession$1,
     type: Button$1
   }, text('🗑')];
 };
 
-const getChatModeListVirtualDom = (sessions, selectedSessionId) => {
-  const sessionNodes = sessions.flatMap(session => getSessionDom(session));
-  const emptyStateNodes = getEmptyChatSessionsDom(sessions.length);
+const getChatListDom = (sessions, selectedSessionId) => {
+  if (sessions.length === 0) {
+    return getEmptyChatSessionsDom();
+  }
   return [{
-    childCount: 2,
-    className: mergeClassNames(Viewlet, Chat),
-    onClick: HandleClick,
-    onInput: HandleInput,
-    onKeyDown: HandleKeyDown,
-    type: Div
-  }, ...getChatHeaderListModeDom(), {
-    childCount: sessions.length === 0 ? 1 : sessions.length,
+    childCount: sessions.length,
     className: ChatList,
+    onClick: HandleClickList,
+    type: Div
+  }, ...sessions.flatMap(getSessionDom)];
+};
+
+const getChatModeListVirtualDom = (sessions, selectedSessionId, composerValue, models, selectedModelId) => {
+  return [{
+    childCount: 3,
+    className: mergeClassNames(Viewlet, Chat),
     type: Div
-  }, ...(sessions.length === 0 ? emptyStateNodes : sessionNodes)];
+  }, ...getChatHeaderListModeDom(), ...getChatListDom(sessions), ...getChatSendAreaDom(composerValue, models, selectedModelId)];
 };
 
 const getChatModeUnsupportedVirtualDom = () => {
@@ -2157,12 +2800,13 @@ const getChatModeUnsupportedVirtualDom = () => {
     type: Div
   }, text('Unknown view mode')];
 };
-const getChatVirtualDom = (sessions, selectedSessionId, composerValue, viewMode) => {
+
+const getChatVirtualDom = (sessions, selectedSessionId, composerValue, viewMode, models, selectedModelId) => {
   switch (viewMode) {
     case 'detail':
-      return getChatModeDetailVirtualDom(sessions, selectedSessionId, composerValue);
+      return getChatModeDetailVirtualDom(sessions, selectedSessionId, composerValue, models, selectedModelId);
     case 'list':
-      return getChatModeListVirtualDom(sessions);
+      return getChatModeListVirtualDom(sessions, selectedSessionId, composerValue, models, selectedModelId);
     default:
       return getChatModeUnsupportedVirtualDom();
   }
@@ -2172,6 +2816,8 @@ const renderItems = (oldState, newState) => {
   const {
     composerValue,
     initial,
+    models,
+    selectedModelId,
     selectedSessionId,
     sessions,
     uid,
@@ -2180,7 +2826,7 @@ const renderItems = (oldState, newState) => {
   if (initial) {
     return [SetDom2, uid, []];
   }
-  const dom = getChatVirtualDom(sessions, selectedSessionId, composerValue, viewMode);
+  const dom = getChatVirtualDom(sessions, selectedSessionId, composerValue, viewMode, models, selectedModelId);
   return [SetDom2, uid, dom];
 };
 
@@ -2191,14 +2837,27 @@ const renderIncremental = (oldState, newState) => {
   return [SetPatches, newState.uid, patches];
 };
 
+const renderValue = (oldState, newState) => {
+  const {
+    composerValue
+  } = newState;
+  return [SetValueByName, newState.uid, 'composer', composerValue];
+};
+
 const getRenderer = diffType => {
   switch (diffType) {
     case RenderCss:
       return renderCss;
+    case RenderFocus:
+      return renderFocus;
+    case RenderFocusContext:
+      return renderFocusContext;
     case RenderIncremental:
       return renderIncremental;
     case RenderItems:
       return renderItems;
+    case RenderValue:
+      return renderValue;
     default:
       throw new Error('unknown renderer');
   }
@@ -2233,22 +2892,58 @@ const renderEventListeners = () => {
     preventDefault: true
   }, {
     name: HandleClick,
-    params: ['handleClick', TargetName]
+    params: ['handleClick', TargetName, 'event.target.dataset.id']
+  }, {
+    name: HandleClickDelete,
+    params: ['handleClickDelete', 'event.target.dataset.id']
   }, {
     name: HandleClickClose,
     params: ['handleClickClose']
   }, {
     name: HandleClickSettings,
     params: ['handleClickSettings']
+  }, {
+    name: HandleClickNew,
+    params: ['handleClickNew']
+  }, {
+    name: HandleClickBack,
+    params: ['handleClickBack']
+  }, {
+    name: HandleClickList,
+    params: ['handleClickList', ClientX, ClientY]
   }, {
     name: HandleInput,
     params: ['handleInput', TargetValue]
+  }, {
+    name: HandleModelChange,
+    params: ['handleModelChange', TargetValue]
+  }, {
+    name: HandleFocus,
+    params: ['handleInputFocus', TargetName]
   }, {
     name: HandleKeyDown,
     params: ['handleKeyDown', Key, ShiftKey]
+  }, {
+    name: HandleSubmit,
+    params: ['handleSubmit']
   }];
 };
 
+const rerender = state => {
+  return structuredClone(state);
+};
+
+const reset = async state => {
+  await clearChatSessions();
+  return {
+    ...state,
+    composerValue: '',
+    selectedSessionId: '',
+    sessions: [],
+    viewMode: 'list'
+  };
+};
+
 const resize = (state, dimensions) => {
   return {
     ...state,
@@ -2259,19 +2954,27 @@ const resize = (state, dimensions) => {
 const saveState = state => {
   const {
     composerValue,
+    height,
     nextMessageId,
     renamingSessionId,
+    selectedModelId,
     selectedSessionId,
-    sessions,
-    viewMode
+    viewMode,
+    width,
+    x,
+    y
   } = state;
   return {
     composerValue,
+    height,
     nextMessageId,
     renamingSessionId,
+    selectedModelId,
     selectedSessionId,
-    sessions,
-    viewMode
+    viewMode,
+    width,
+    x,
+    y
   };
 };
 
@@ -2298,22 +3001,33 @@ const setChatList = state => {
 };
 
 const commandMap = {
+  'Chat.clearInput': wrapCommand(clearInput),
   'Chat.create': create,
   'Chat.diff2': diff2,
+  'Chat.enterNewLine': wrapCommand(handleNewline),
   'Chat.getCommandIds': getCommandIds,
   'Chat.getKeyBindings': getKeyBindings,
   'Chat.handleChatListContextMenu': handleChatListContextMenu,
   'Chat.handleClick': wrapCommand(handleClick),
+  'Chat.handleClickBack': wrapCommand(handleClickBack),
   'Chat.handleClickClose': handleClickClose,
+  'Chat.handleClickDelete': wrapCommand(handleClickDelete),
+  'Chat.handleClickList': wrapCommand(handleClickList),
+  'Chat.handleClickNew': wrapCommand(handleClickNew),
   'Chat.handleClickSettings': handleClickSettings,
   'Chat.handleInput': wrapCommand(handleInput),
+  'Chat.handleInputFocus': wrapCommand(handleInputFocus),
   'Chat.handleKeyDown': wrapCommand(handleKeyDown),
+  'Chat.handleModelChange': wrapCommand(handleModelChange),
   'Chat.handleSubmit': wrapCommand(handleSubmit),
   'Chat.initialize': initialize,
   'Chat.loadContent': wrapCommand(loadContent),
   'Chat.loadContent2': wrapCommand(loadContent),
+  'Chat.openMockSession': wrapCommand(openMockSession),
   'Chat.render2': render2,
   'Chat.renderEventListeners': renderEventListeners,
+  'Chat.rerender': wrapCommand(rerender),
+  'Chat.reset': wrapCommand(reset),
   'Chat.resize': wrapCommand(resize),
   'Chat.saveState': wrapGetter(saveState),
   'Chat.setChatList': wrapCommand(setChatList),