@lvce-editor/chat-view 3.4.0 → 3.6.0

package/dist/chatViewWorkerMain.js

@@ -1347,6 +1347,9 @@ const startConversation = () => {
 const composePlaceholder = () => {
   return i18nString('Type your message. Enter to send, Shift+Enter for newline.');
 };
+const attachImageAsContext = () => {
+  return i18nString('Attach Image as Context');
+};
 const openRouterApiKeyPlaceholder = () => {
   return i18nString('Enter OpenRouter API key');
 };
@@ -1475,6 +1478,8 @@ const createDefaultState = () => {
     chatMessageFontFamily: 'system-ui',
     chatMessageFontSize,
     chatMessageLineHeight,
+    composerDropActive: false,
+    composerDropEnabled: true,
     composerFontFamily: 'system-ui',
     composerFontSize,
     composerHeight: composerLineHeight + 8,
@@ -1553,656 +1558,145 @@ const create = (uid, x, y, width, height, platform, assetDir) => {
   set(uid, state, state);
 };
 
-const parseRenderHtmlArguments = rawArguments => {
-  try {
-    const parsed = JSON.parse(rawArguments);
-    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
-      return undefined;
-    }
-    const html = typeof Reflect.get(parsed, 'html') === 'string' ? String(Reflect.get(parsed, 'html')) : '';
-    if (!html) {
-      return undefined;
-    }
-    const css = typeof Reflect.get(parsed, 'css') === 'string' ? String(Reflect.get(parsed, 'css')) : '';
-    const title = typeof Reflect.get(parsed, 'title') === 'string' ? String(Reflect.get(parsed, 'title')) : 'visual preview';
-    return {
-      css,
-      html,
-      title
-    };
-  } catch {
-    return undefined;
+const toError = error => {
+  if (error instanceof Error) {
+    return error;
   }
+  return new Error('IndexedDB request failed');
 };
 
-const getRenderHtmlCss = (sessions, selectedSessionId) => {
-  const selectedSession = sessions.find(session => session.id === selectedSessionId);
-  if (!selectedSession) {
-    return '';
-  }
-  const cssRules = new Set();
-  for (const message of selectedSession.messages) {
-    if (message.role !== 'assistant' || !message.toolCalls) {
-      continue;
-    }
-    for (const toolCall of message.toolCalls) {
-      if (toolCall.name !== 'render_html') {
-        continue;
-      }
-      const parsed = parseRenderHtmlArguments(toolCall.arguments);
-      if (!parsed || !parsed.css.trim()) {
-        continue;
-      }
-      cssRules.add(parsed.css);
-    }
-  }
-  return [...cssRules].join('\n\n');
+const requestToPromise = async createRequest => {
+  const request = createRequest();
+  const {
+    promise,
+    reject,
+    resolve
+  } = Promise.withResolvers();
+  request.addEventListener('success', () => {
+    resolve(request.result);
+  });
+  request.addEventListener('error', () => {
+    reject(toError(request.error));
+  });
+  return promise;
 };
 
-const isEqual$1 = (oldState, newState) => {
-  const oldRenderHtmlCss = getRenderHtmlCss(oldState.sessions, oldState.selectedSessionId);
-  const newRenderHtmlCss = getRenderHtmlCss(newState.sessions, newState.selectedSessionId);
-  return oldState.initial === newState.initial && oldState.chatMessageFontFamily === newState.chatMessageFontFamily && oldState.chatMessageFontSize === newState.chatMessageFontSize && oldState.chatMessageLineHeight === newState.chatMessageLineHeight && oldState.composerHeight === newState.composerHeight && oldState.composerLineHeight === newState.composerLineHeight && oldState.composerFontFamily === newState.composerFontFamily && oldState.composerFontSize === newState.composerFontSize && oldState.listItemHeight === newState.listItemHeight && oldRenderHtmlCss === newRenderHtmlCss;
+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 diffFocus = (oldState, newState) => {
-  if (!newState.focused) {
-    return true;
-  }
-  return oldState.focus === newState.focus && oldState.focused === newState.focused;
+const toChatViewEvent = event => {
+  const {
+    eventId,
+    ...chatViewEvent
+  } = event;
+  return chatViewEvent;
 };
-
-const isEqual = (oldState, newState) => {
-  return oldState.composerValue === newState.composerValue && oldState.initial === newState.initial && oldState.renamingSessionId === newState.renamingSessionId && oldState.selectedModelId === newState.selectedModelId && oldState.selectedSessionId === newState.selectedSessionId && oldState.sessions === newState.sessions && oldState.tokensMax === newState.tokensMax && oldState.tokensUsed === newState.tokensUsed && oldState.usageOverviewEnabled === newState.usageOverviewEnabled && oldState.viewMode === newState.viewMode;
+const now$1 = () => {
+  return new Date().toISOString();
 };
-
-const diffScrollTop = (oldState, newState) => {
-  return oldState.chatListScrollTop === newState.chatListScrollTop && oldState.messagesScrollTop === newState.messagesScrollTop;
+const isSameMessage$1 = (a, b) => {
+  return a.id === b.id && a.inProgress === b.inProgress && a.role === b.role && a.text === b.text && a.time === b.time && JSON.stringify(a.toolCalls || []) === JSON.stringify(b.toolCalls || []);
 };
-
-const RenderItems = 4;
-const RenderFocus = 6;
-const RenderFocusContext = 7;
-const RenderValue = 8;
-const RenderCss = 10;
-const RenderIncremental = 11;
-const RenderScrollTop = 12;
-
-const diffValue = (oldState, newState) => {
-  if (oldState.composerValue === newState.composerValue) {
-    return true;
+const canAppendMessages$1 = (previousMessages, nextMessages) => {
+  if (nextMessages.length < previousMessages.length) {
+    return false;
   }
-  return newState.inputSource !== 'script';
+  return previousMessages.every((message, index) => isSameMessage$1(message, nextMessages[index]));
 };
-
-const modules = [isEqual, diffValue, diffFocus, isEqual$1, diffFocus, diffScrollTop];
-const numbers = [RenderIncremental, RenderValue, RenderFocus, RenderCss, RenderFocusContext, RenderScrollTop];
-
-const diff = (oldState, newState) => {
-  const diffResult = [];
-  for (let i = 0; i < modules.length; i++) {
-    const fn = modules[i];
-    if (!fn(oldState, newState)) {
-      diffResult.push(numbers[i]);
+const canUpdateMessages$1 = (previousMessages, nextMessages) => {
+  if (previousMessages.length !== nextMessages.length) {
+    return false;
+  }
+  for (let i = 0; i < previousMessages.length; i += 1) {
+    const previous = previousMessages[i];
+    const next = nextMessages[i];
+    if (previous.id !== next.id || previous.role !== next.role) {
+      return false;
     }
   }
-  return diffResult;
+  return true;
 };
-
-const diff2 = uid => {
-  const {
-    newState,
-    oldState
-  } = get$1(uid);
-  const result = diff(oldState, newState);
-  return result;
-};
-
-const Button$2 = 'button';
-
-const Audio = 0;
-const Button$1 = 1;
-const Col = 2;
-const ColGroup = 3;
-const Div = 4;
-const H1 = 5;
-const Input = 6;
-const Span = 8;
-const Table = 9;
-const TBody = 10;
-const Td = 11;
-const Text = 12;
-const Th = 13;
-const THead = 14;
-const Tr = 15;
-const I = 16;
-const Img = 17;
-const H2 = 22;
-const H3 = 23;
-const H4 = 24;
-const H5 = 25;
-const H6 = 26;
-const Article = 27;
-const Aside = 28;
-const Footer = 29;
-const Header = 30;
-const Nav = 40;
-const Section = 41;
-const Dd = 43;
-const Dl = 44;
-const Figcaption = 45;
-const Figure = 46;
-const Hr = 47;
-const Li = 48;
-const Ol = 49;
-const P = 50;
-const Pre = 51;
-const A = 53;
-const Abbr = 54;
-const Br = 55;
-const Tfoot = 59;
-const Ul = 60;
-const TextArea = 62;
-const Select$1 = 63;
-const Option$1 = 64;
-const Code = 65;
-const Label$1 = 66;
-const Dt = 67;
-const Main = 69;
-const Strong = 70;
-const Em = 71;
-const Reference = 100;
-
-const Enter = 3;
-
-const Shift = 1 << 10 >>> 0;
-
-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;
-  }
-  // Compare attributes
-  const oldKeys = getKeys(oldNode);
-  const newKeys = getKeys(newNode);
-  // Check for attribute changes
-  for (const key of newKeys) {
-    if (oldNode[key] !== newNode[key]) {
-      patches.push({
-        type: SetAttribute,
-        key,
-        value: newNode[key]
-      });
-    }
-  }
-  // Check for removed attributes
-  for (const key of oldKeys) {
-    if (!(key in newNode)) {
-      patches.push({
-        type: RemoveAttribute,
-        key
-      });
-    }
-  }
-  return patches;
-};
-
-const treeToArray = node => {
-  const result = [node.node];
-  for (const child of node.children) {
-    result.push(...treeToArray(child));
-  }
-  return result;
-};
-
-const diffChildren = (oldChildren, newChildren, patches) => {
-  const maxLength = Math.max(oldChildren.length, newChildren.length);
-  // Track where we are: -1 means at parent, >= 0 means at child index
-  let currentChildIndex = -1;
-  // Collect indices of children to remove (we'll add these patches at the end in reverse order)
-  const indicesToRemove = [];
-  for (let i = 0; i < maxLength; i++) {
-    const oldNode = oldChildren[i];
-    const newNode = newChildren[i];
-    if (!oldNode && !newNode) {
-      continue;
-    }
-    if (!oldNode) {
-      // Add new node - we should be at the parent
-      if (currentChildIndex >= 0) {
-        // Navigate back to parent
-        patches.push({
-          type: NavigateParent
-        });
-        currentChildIndex = -1;
-      }
-      // Flatten the entire subtree so renderInternal can handle it
-      const flatNodes = treeToArray(newNode);
-      patches.push({
-        type: Add,
-        nodes: flatNodes
-      });
-    } else if (newNode) {
-      // Compare nodes to see if we need any patches
-      const nodePatches = compareNodes(oldNode.node, newNode.node);
-      // If nodePatches is null, the node types are incompatible - need to replace
-      if (nodePatches === null) {
-        // Navigate to this child
-        if (currentChildIndex === -1) {
-          patches.push({
-            type: NavigateChild,
-            index: i
-          });
-          currentChildIndex = i;
-        } else if (currentChildIndex !== i) {
-          patches.push({
-            type: NavigateSibling,
-            index: i
-          });
-          currentChildIndex = i;
-        }
-        // Replace the entire subtree
-        const flatNodes = treeToArray(newNode);
-        patches.push({
-          type: Replace,
-          nodes: flatNodes
-        });
-        // After replace, we're at the new element (same position)
-        continue;
-      }
-      // Check if we need to recurse into children
-      const hasChildrenToCompare = oldNode.children.length > 0 || newNode.children.length > 0;
-      // Only navigate to this element if we need to do something
-      if (nodePatches.length > 0 || hasChildrenToCompare) {
-        // Navigate to this child if not already there
-        if (currentChildIndex === -1) {
-          patches.push({
-            type: NavigateChild,
-            index: i
-          });
-          currentChildIndex = i;
-        } else if (currentChildIndex !== i) {
-          patches.push({
-            type: NavigateSibling,
-            index: i
-          });
-          currentChildIndex = i;
-        }
-        // Apply node patches (these apply to the current element, not children)
-        if (nodePatches.length > 0) {
-          patches.push(...nodePatches);
-        }
-        // Compare children recursively
-        if (hasChildrenToCompare) {
-          diffChildren(oldNode.children, newNode.children, patches);
-        }
-      }
-    } else {
-      // Remove old node - collect the index for later removal
-      indicesToRemove.push(i);
-    }
-  }
-  // 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 getSelectedSessionId = state => {
-  return state.selectedSessionId;
-};
-
-const getListIndex = (state, eventX, eventY) => {
-  const {
-    headerHeight,
-    height,
-    listItemHeight,
-    width,
-    x,
-    y
-  } = state;
-  const relativeX = eventX - x;
-  const relativeY = eventY - y - headerHeight;
-  if (relativeX < 0 || relativeY < 0 || relativeX >= width || relativeY >= height - headerHeight) {
-    return -1;
-  }
-  return Math.floor(relativeY / listItemHeight);
-};
-
-const CHAT_LIST_ITEM_CONTEXT_MENU = 'ChatListItemContextMenu';
-const handleChatListContextMenu = async (state, eventX, eventY) => {
-  const index = getListIndex(state, eventX, eventY);
-  if (index === -1) {
-    return state;
-  }
-  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 toError = error => {
-  if (error instanceof Error) {
-    return error;
-  }
-  return new Error('IndexedDB request failed');
-};
-
-const requestToPromise = async createRequest => {
-  const request = createRequest();
-  const {
-    promise,
-    reject,
-    resolve
-  } = Promise.withResolvers();
-  request.addEventListener('success', () => {
-    resolve(request.result);
-  });
-  request.addEventListener('error', () => {
-    reject(toError(request.error));
-  });
-  return promise;
-};
-
-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 toChatViewEvent = event => {
-  const {
-    eventId,
-    ...chatViewEvent
-  } = event;
-  return chatViewEvent;
-};
-const now$1 = () => {
-  return new Date().toISOString();
-};
-const isSameMessage$1 = (a, b) => {
-  return a.id === b.id && a.inProgress === b.inProgress && a.role === b.role && a.text === b.text && a.time === b.time && JSON.stringify(a.toolCalls || []) === JSON.stringify(b.toolCalls || []);
-};
-const canAppendMessages$1 = (previousMessages, nextMessages) => {
-  if (nextMessages.length < previousMessages.length) {
-    return false;
-  }
-  return previousMessages.every((message, index) => isSameMessage$1(message, nextMessages[index]));
-};
-const canUpdateMessages$1 = (previousMessages, nextMessages) => {
-  if (previousMessages.length !== nextMessages.length) {
-    return false;
-  }
-  for (let i = 0; i < previousMessages.length; i += 1) {
-    const previous = previousMessages[i];
-    const next = nextMessages[i];
-    if (previous.id !== next.id || previous.role !== next.role) {
-      return false;
-    }
-  }
-  return true;
-};
-const getMutationEvents$1 = (previous, next) => {
-  const timestamp = now$1();
-  const events = [];
-  if (!previous) {
-    events.push({
-      sessionId: next.id,
-      timestamp,
-      title: next.title,
-      type: 'chat-session-created'
-    });
-    for (const message of next.messages) {
-      events.push({
-        message,
-        sessionId: next.id,
-        timestamp,
-        type: 'chat-message-added'
-      });
-    }
-    return events;
-  }
-  if (previous.title !== next.title) {
-    events.push({
-      sessionId: next.id,
-      timestamp,
-      title: next.title,
-      type: 'chat-session-title-updated'
-    });
-  }
-  if (canAppendMessages$1(previous.messages, next.messages)) {
-    for (let i = previous.messages.length; i < next.messages.length; i += 1) {
-      events.push({
-        message: next.messages[i],
-        sessionId: next.id,
-        timestamp,
-        type: 'chat-message-added'
-      });
-    }
-    return events;
-  }
-  if (canUpdateMessages$1(previous.messages, next.messages)) {
-    for (let i = 0; i < previous.messages.length; i += 1) {
-      const previousMessage = previous.messages[i];
-      const nextMessage = next.messages[i];
-      if (!isSameMessage$1(previousMessage, nextMessage)) {
-        events.push({
-          inProgress: nextMessage.inProgress,
-          messageId: nextMessage.id,
-          sessionId: next.id,
-          text: nextMessage.text,
-          time: nextMessage.time,
-          timestamp,
-          toolCalls: nextMessage.toolCalls,
-          type: 'chat-message-updated'
-        });
-      }
-    }
-    return events;
-  }
-  events.push({
-    messages: [...next.messages],
-    sessionId: next.id,
-    timestamp,
-    type: 'chat-session-messages-replaced'
-  });
-  return events;
+const getMutationEvents$1 = (previous, next) => {
+  const timestamp = now$1();
+  const events = [];
+  if (!previous) {
+    events.push({
+      sessionId: next.id,
+      timestamp,
+      title: next.title,
+      type: 'chat-session-created'
+    });
+    for (const message of next.messages) {
+      events.push({
+        message,
+        sessionId: next.id,
+        timestamp,
+        type: 'chat-message-added'
+      });
+    }
+    return events;
+  }
+  if (previous.title !== next.title) {
+    events.push({
+      sessionId: next.id,
+      timestamp,
+      title: next.title,
+      type: 'chat-session-title-updated'
+    });
+  }
+  if (canAppendMessages$1(previous.messages, next.messages)) {
+    for (let i = previous.messages.length; i < next.messages.length; i += 1) {
+      events.push({
+        message: next.messages[i],
+        sessionId: next.id,
+        timestamp,
+        type: 'chat-message-added'
+      });
+    }
+    return events;
+  }
+  if (canUpdateMessages$1(previous.messages, next.messages)) {
+    for (let i = 0; i < previous.messages.length; i += 1) {
+      const previousMessage = previous.messages[i];
+      const nextMessage = next.messages[i];
+      if (!isSameMessage$1(previousMessage, nextMessage)) {
+        events.push({
+          inProgress: nextMessage.inProgress,
+          messageId: nextMessage.id,
+          sessionId: next.id,
+          text: nextMessage.text,
+          time: nextMessage.time,
+          timestamp,
+          toolCalls: nextMessage.toolCalls,
+          type: 'chat-message-updated'
+        });
+      }
+    }
+    return events;
+  }
+  events.push({
+    messages: [...next.messages],
+    sessionId: next.id,
+    timestamp,
+    type: 'chat-session-messages-replaced'
+  });
+  return events;
 };
 const replaySession$1 = (id, summary, events) => {
   let deleted = false;
@@ -2365,41 +1859,257 @@ class IndexedDbChatSessionStorage {
         summaryStore.delete(event.sessionId);
       }
     }
-    await transactionToPromise(() => transaction);
+    await transactionToPromise(() => transaction);
+  };
+  async appendEvent(event) {
+    await this.appendEvents([event]);
+  }
+  async clear() {
+    const database = await this.openDatabase();
+    const transaction = database.transaction([this.state.storeName, this.state.eventStoreName], 'readwrite');
+    transaction.objectStore(this.state.storeName).clear();
+    transaction.objectStore(this.state.eventStoreName).clear();
+    await transactionToPromise(() => transaction);
+  }
+  async deleteSession(id) {
+    await this.appendEvent({
+      sessionId: id,
+      timestamp: now$1(),
+      type: 'chat-session-deleted'
+    });
+  }
+  async getEvents(sessionId) {
+    if (sessionId) {
+      return this.getEventsBySessionId(sessionId);
+    }
+    return this.listEventsInternal();
+  }
+  async getSession(id) {
+    const [summary, events] = await Promise.all([this.getSummary(id), this.getEventsBySessionId(id)]);
+    return replaySession$1(id, summary, events);
+  }
+  async listSessions() {
+    const summaries = await this.listSummaries();
+    const sessions = [];
+    for (const summary of summaries) {
+      const events = await this.getEventsBySessionId(summary.id);
+      const session = replaySession$1(summary.id, summary, events);
+      if (!session) {
+        continue;
+      }
+      sessions.push(session);
+    }
+    return sessions;
+  }
+  async setSession(session) {
+    const previous = await this.getSession(session.id);
+    const events = getMutationEvents$1(previous, session);
+    await this.appendEvents(events);
+    if (events.length === 0) {
+      const database = await this.openDatabase();
+      const transaction = database.transaction(this.state.storeName, 'readwrite');
+      const summaryStore = transaction.objectStore(this.state.storeName);
+      summaryStore.put({
+        id: session.id,
+        title: session.title
+      });
+      await transactionToPromise(() => transaction);
+    }
+  }
+}
+
+const now = () => {
+  return new Date().toISOString();
+};
+const isSameMessage = (a, b) => {
+  return a.id === b.id && a.inProgress === b.inProgress && a.role === b.role && a.text === b.text && a.time === b.time && JSON.stringify(a.toolCalls || []) === JSON.stringify(b.toolCalls || []);
+};
+const canAppendMessages = (previousMessages, nextMessages) => {
+  if (nextMessages.length < previousMessages.length) {
+    return false;
+  }
+  return previousMessages.every((message, index) => isSameMessage(message, nextMessages[index]));
+};
+const canUpdateMessages = (previousMessages, nextMessages) => {
+  if (previousMessages.length !== nextMessages.length) {
+    return false;
+  }
+  for (let i = 0; i < previousMessages.length; i += 1) {
+    const previous = previousMessages[i];
+    const next = nextMessages[i];
+    if (previous.id !== next.id || previous.role !== next.role) {
+      return false;
+    }
+  }
+  return true;
+};
+const getMutationEvents = (previous, next) => {
+  const timestamp = now();
+  const events = [];
+  if (!previous) {
+    events.push({
+      sessionId: next.id,
+      timestamp,
+      title: next.title,
+      type: 'chat-session-created'
+    });
+    for (const message of next.messages) {
+      events.push({
+        message,
+        sessionId: next.id,
+        timestamp,
+        type: 'chat-message-added'
+      });
+    }
+    return events;
+  }
+  if (previous.title !== next.title) {
+    events.push({
+      sessionId: next.id,
+      timestamp,
+      title: next.title,
+      type: 'chat-session-title-updated'
+    });
+  }
+  if (canAppendMessages(previous.messages, next.messages)) {
+    for (let i = previous.messages.length; i < next.messages.length; i += 1) {
+      events.push({
+        message: next.messages[i],
+        sessionId: next.id,
+        timestamp,
+        type: 'chat-message-added'
+      });
+    }
+    return events;
+  }
+  if (canUpdateMessages(previous.messages, next.messages)) {
+    for (let i = 0; i < previous.messages.length; i += 1) {
+      const previousMessage = previous.messages[i];
+      const nextMessage = next.messages[i];
+      if (!isSameMessage(previousMessage, nextMessage)) {
+        events.push({
+          inProgress: nextMessage.inProgress,
+          messageId: nextMessage.id,
+          sessionId: next.id,
+          text: nextMessage.text,
+          time: nextMessage.time,
+          timestamp,
+          toolCalls: nextMessage.toolCalls,
+          type: 'chat-message-updated'
+        });
+      }
+    }
+    return events;
+  }
+  events.push({
+    messages: [...next.messages],
+    sessionId: next.id,
+    timestamp,
+    type: 'chat-session-messages-replaced'
+  });
+  return events;
+};
+const replaySession = (id, title, events) => {
+  let deleted = false;
+  let currentTitle = title || '';
+  let messages = [];
+  for (const event of events) {
+    if (event.sessionId !== id) {
+      continue;
+    }
+    if (event.type === 'chat-session-created') {
+      deleted = false;
+      currentTitle = event.title;
+      continue;
+    }
+    if (event.type === 'chat-session-deleted') {
+      deleted = true;
+      continue;
+    }
+    if (event.type === 'chat-session-title-updated') {
+      currentTitle = event.title;
+      continue;
+    }
+    if (event.type === 'chat-message-added') {
+      messages = [...messages, event.message];
+      continue;
+    }
+    if (event.type === 'chat-message-updated') {
+      messages = messages.map(message => {
+        if (message.id !== event.messageId) {
+          return message;
+        }
+        return {
+          ...message,
+          ...(event.inProgress === undefined ? {} : {
+            inProgress: event.inProgress
+          }),
+          text: event.text,
+          time: event.time,
+          ...(event.toolCalls === undefined ? {} : {
+            toolCalls: event.toolCalls
+          })
+        };
+      });
+      continue;
+    }
+    if (event.type === 'chat-session-messages-replaced') {
+      messages = [...event.messages];
+    }
+  }
+  if (deleted || !currentTitle) {
+    return undefined;
+  }
+  return {
+    id,
+    messages,
+    title: currentTitle
   };
+};
+class InMemoryChatSessionStorage {
+  events = [];
+  summaries = new Map();
   async appendEvent(event) {
-    await this.appendEvents([event]);
+    this.events.push(event);
+    if (event.type === 'chat-session-created' || event.type === 'chat-session-title-updated') {
+      this.summaries.set(event.sessionId, event.title);
+      return;
+    }
+    if (event.type === 'chat-session-deleted') {
+      this.summaries.delete(event.sessionId);
+    }
   }
   async clear() {
-    const database = await this.openDatabase();
-    const transaction = database.transaction([this.state.storeName, this.state.eventStoreName], 'readwrite');
-    transaction.objectStore(this.state.storeName).clear();
-    transaction.objectStore(this.state.eventStoreName).clear();
-    await transactionToPromise(() => transaction);
+    this.events.length = 0;
+    this.summaries.clear();
   }
   async deleteSession(id) {
     await this.appendEvent({
       sessionId: id,
-      timestamp: now$1(),
+      timestamp: now(),
       type: 'chat-session-deleted'
     });
   }
   async getEvents(sessionId) {
-    if (sessionId) {
-      return this.getEventsBySessionId(sessionId);
+    if (!sessionId) {
+      return [...this.events];
     }
-    return this.listEventsInternal();
+    return this.events.filter(event => event.sessionId === sessionId);
   }
   async getSession(id) {
-    const [summary, events] = await Promise.all([this.getSummary(id), this.getEventsBySessionId(id)]);
-    return replaySession$1(id, summary, events);
+    return replaySession(id, this.summaries.get(id), this.events);
   }
   async listSessions() {
-    const summaries = await this.listSummaries();
+    const ids = new Set();
+    for (const id of this.summaries.keys()) {
+      ids.add(id);
+    }
+    for (const event of this.events) {
+      ids.add(event.sessionId);
+    }
     const sessions = [];
-    for (const summary of summaries) {
-      const events = await this.getEventsBySessionId(summary.id);
-      const session = replaySession$1(summary.id, summary, events);
+    for (const id of ids) {
+      const session = replaySession(id, this.summaries.get(id), this.events);
       if (!session) {
         continue;
       }
@@ -2409,271 +2119,626 @@ class IndexedDbChatSessionStorage {
   }
   async setSession(session) {
     const previous = await this.getSession(session.id);
-    const events = getMutationEvents$1(previous, session);
-    await this.appendEvents(events);
-    if (events.length === 0) {
-      const database = await this.openDatabase();
-      const transaction = database.transaction(this.state.storeName, 'readwrite');
-      const summaryStore = transaction.objectStore(this.state.storeName);
-      summaryStore.put({
-        id: session.id,
-        title: session.title
-      });
-      await transactionToPromise(() => transaction);
+    const events = getMutationEvents(previous, session);
+    for (const event of events) {
+      await this.appendEvent(event);
+    }
+    this.summaries.set(session.id, session.title);
+  }
+}
+
+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 appendChatViewEvent = async event => {
+  await chatSessionStorage.appendEvent(event);
+};
+
+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 deleteSessionAtIndex = async (state, index) => {
+  const {
+    sessions
+  } = state;
+  const session = sessions[index];
+  if (!session) {
+    return state;
+  }
+  return deleteSession(state, session.id);
+};
+
+const parseRenderHtmlArguments = rawArguments => {
+  try {
+    const parsed = JSON.parse(rawArguments);
+    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+      return undefined;
+    }
+    const html = typeof Reflect.get(parsed, 'html') === 'string' ? String(Reflect.get(parsed, 'html')) : '';
+    if (!html) {
+      return undefined;
+    }
+    const css = typeof Reflect.get(parsed, 'css') === 'string' ? String(Reflect.get(parsed, 'css')) : '';
+    const title = typeof Reflect.get(parsed, 'title') === 'string' ? String(Reflect.get(parsed, 'title')) : 'visual preview';
+    return {
+      css,
+      html,
+      title
+    };
+  } catch {
+    return undefined;
+  }
+};
+
+const getRenderHtmlCss = (sessions, selectedSessionId) => {
+  const selectedSession = sessions.find(session => session.id === selectedSessionId);
+  if (!selectedSession) {
+    return '';
+  }
+  const cssRules = new Set();
+  for (const message of selectedSession.messages) {
+    if (message.role !== 'assistant' || !message.toolCalls) {
+      continue;
+    }
+    for (const toolCall of message.toolCalls) {
+      if (toolCall.name !== 'render_html') {
+        continue;
+      }
+      const parsed = parseRenderHtmlArguments(toolCall.arguments);
+      if (!parsed || !parsed.css.trim()) {
+        continue;
+      }
+      cssRules.add(parsed.css);
+    }
+  }
+  return [...cssRules].join('\n\n');
+};
+
+const isEqual$1 = (oldState, newState) => {
+  const oldRenderHtmlCss = getRenderHtmlCss(oldState.sessions, oldState.selectedSessionId);
+  const newRenderHtmlCss = getRenderHtmlCss(newState.sessions, newState.selectedSessionId);
+  return oldState.initial === newState.initial && oldState.chatMessageFontFamily === newState.chatMessageFontFamily && oldState.chatMessageFontSize === newState.chatMessageFontSize && oldState.chatMessageLineHeight === newState.chatMessageLineHeight && oldState.composerHeight === newState.composerHeight && oldState.composerLineHeight === newState.composerLineHeight && oldState.composerFontFamily === newState.composerFontFamily && oldState.composerFontSize === newState.composerFontSize && oldState.listItemHeight === newState.listItemHeight && oldRenderHtmlCss === newRenderHtmlCss;
+};
+
+const diffFocus = (oldState, newState) => {
+  if (!newState.focused) {
+    return true;
+  }
+  return oldState.focus === newState.focus && oldState.focused === newState.focused;
+};
+
+const isEqual = (oldState, newState) => {
+  return oldState.composerDropActive === newState.composerDropActive && oldState.composerDropEnabled === newState.composerDropEnabled && oldState.composerValue === newState.composerValue && oldState.initial === newState.initial && oldState.renamingSessionId === newState.renamingSessionId && oldState.selectedModelId === newState.selectedModelId && oldState.selectedSessionId === newState.selectedSessionId && oldState.sessions === newState.sessions && oldState.tokensMax === newState.tokensMax && oldState.tokensUsed === newState.tokensUsed && oldState.usageOverviewEnabled === newState.usageOverviewEnabled && oldState.viewMode === newState.viewMode;
+};
+
+const diffScrollTop = (oldState, newState) => {
+  return oldState.chatListScrollTop === newState.chatListScrollTop && oldState.messagesScrollTop === newState.messagesScrollTop;
+};
+
+const RenderItems = 4;
+const RenderFocus = 6;
+const RenderFocusContext = 7;
+const RenderValue = 8;
+const RenderCss = 10;
+const RenderIncremental = 11;
+const RenderScrollTop = 12;
+
+const diffValue = (oldState, newState) => {
+  if (oldState.composerValue === newState.composerValue) {
+    return true;
+  }
+  return newState.inputSource !== 'script';
+};
+
+const modules = [isEqual, diffValue, diffFocus, isEqual$1, diffFocus, diffScrollTop];
+const numbers = [RenderIncremental, RenderValue, RenderFocus, RenderCss, RenderFocusContext, RenderScrollTop];
+
+const diff = (oldState, newState) => {
+  const diffResult = [];
+  for (let i = 0; i < modules.length; i++) {
+    const fn = modules[i];
+    if (!fn(oldState, newState)) {
+      diffResult.push(numbers[i]);
     }
   }
-}
+  return diffResult;
+};
 
-const now = () => {
-  return new Date().toISOString();
+const diff2 = uid => {
+  const {
+    newState,
+    oldState
+  } = get$1(uid);
+  const result = diff(oldState, newState);
+  return result;
 };
-const isSameMessage = (a, b) => {
-  return a.id === b.id && a.inProgress === b.inProgress && a.role === b.role && a.text === b.text && a.time === b.time && JSON.stringify(a.toolCalls || []) === JSON.stringify(b.toolCalls || []);
+
+const Button$2 = 'button';
+
+const Audio = 0;
+const Button$1 = 1;
+const Col = 2;
+const ColGroup = 3;
+const Div = 4;
+const H1 = 5;
+const Input = 6;
+const Span = 8;
+const Table = 9;
+const TBody = 10;
+const Td = 11;
+const Text = 12;
+const Th = 13;
+const THead = 14;
+const Tr = 15;
+const I = 16;
+const Img = 17;
+const H2 = 22;
+const H3 = 23;
+const H4 = 24;
+const H5 = 25;
+const H6 = 26;
+const Article = 27;
+const Aside = 28;
+const Footer = 29;
+const Header = 30;
+const Nav = 40;
+const Section = 41;
+const Dd = 43;
+const Dl = 44;
+const Figcaption = 45;
+const Figure = 46;
+const Hr = 47;
+const Li = 48;
+const Ol = 49;
+const P = 50;
+const Pre = 51;
+const A = 53;
+const Abbr = 54;
+const Br = 55;
+const Tfoot = 59;
+const Ul = 60;
+const TextArea = 62;
+const Select$1 = 63;
+const Option$1 = 64;
+const Code = 65;
+const Label$1 = 66;
+const Dt = 67;
+const Main = 69;
+const Strong = 70;
+const Em = 71;
+const Reference = 100;
+
+const Enter = 3;
+
+const Shift = 1 << 10 >>> 0;
+
+const mergeClassNames = (...classNames) => {
+  return classNames.filter(Boolean).join(' ');
 };
-const canAppendMessages = (previousMessages, nextMessages) => {
-  if (nextMessages.length < previousMessages.length) {
-    return false;
-  }
-  return previousMessages.every((message, index) => isSameMessage(message, nextMessages[index]));
+
+const text = data => {
+  return {
+    childCount: 0,
+    text: data,
+    type: Text
+  };
 };
-const canUpdateMessages = (previousMessages, nextMessages) => {
-  if (previousMessages.length !== nextMessages.length) {
-    return false;
-  }
-  for (let i = 0; i < previousMessages.length; i += 1) {
-    const previous = previousMessages[i];
-    const next = nextMessages[i];
-    if (previous.id !== next.id || previous.role !== next.role) {
-      return false;
-    }
-  }
-  return true;
+
+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 getMutationEvents = (previous, next) => {
-  const timestamp = now();
-  const events = [];
-  if (!previous) {
-    events.push({
-      sessionId: next.id,
-      timestamp,
-      title: next.title,
-      type: 'chat-session-created'
-    });
-    for (const message of next.messages) {
-      events.push({
-        message,
-        sessionId: next.id,
-        timestamp,
-        type: 'chat-message-added'
-      });
-    }
-    return events;
-  }
-  if (previous.title !== next.title) {
-    events.push({
-      sessionId: next.id,
-      timestamp,
-      title: next.title,
-      type: 'chat-session-title-updated'
+
+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;
   }
-  if (canAppendMessages(previous.messages, next.messages)) {
-    for (let i = previous.messages.length; i < next.messages.length; i += 1) {
-      events.push({
-        message: next.messages[i],
-        sessionId: next.id,
-        timestamp,
-        type: 'chat-message-added'
-      });
-    }
-    return events;
+  return result;
+};
+const getChildrenWithCount = (nodes, startIndex, childCount) => {
+  if (childCount === 0) {
+    return {
+      children: [],
+      nodesConsumed: 0
+    };
   }
-  if (canUpdateMessages(previous.messages, next.messages)) {
-    for (let i = 0; i < previous.messages.length; i += 1) {
-      const previousMessage = previous.messages[i];
-      const nextMessage = next.messages[i];
-      if (!isSameMessage(previousMessage, nextMessage)) {
-        events.push({
-          inProgress: nextMessage.inProgress,
-          messageId: nextMessage.id,
-          sessionId: next.id,
-          text: nextMessage.text,
-          time: nextMessage.time,
-          timestamp,
-          toolCalls: nextMessage.toolCalls,
-          type: 'chat-message-updated'
-        });
-      }
-    }
-    return events;
+  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--;
   }
-  events.push({
-    messages: [...next.messages],
-    sessionId: next.id,
-    timestamp,
-    type: 'chat-session-messages-replaced'
-  });
-  return events;
+  return {
+    children,
+    nodesConsumed: totalConsumed
+  };
 };
-const replaySession = (id, title, events) => {
-  let deleted = false;
-  let currentTitle = title || '';
-  let messages = [];
-  for (const event of events) {
-    if (event.sessionId !== id) {
-      continue;
-    }
-    if (event.type === 'chat-session-created') {
-      deleted = false;
-      currentTitle = event.title;
-      continue;
-    }
-    if (event.type === 'chat-session-deleted') {
-      deleted = true;
-      continue;
-    }
-    if (event.type === 'chat-session-title-updated') {
-      currentTitle = event.title;
-      continue;
+
+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
+      });
     }
-    if (event.type === 'chat-message-added') {
-      messages = [...messages, event.message];
-      continue;
+    return patches;
+  }
+  // Handle text nodes
+  if (oldNode.type === Text && newNode.type === Text) {
+    if (oldNode.text !== newNode.text) {
+      patches.push({
+        type: SetText,
+        value: newNode.text
+      });
     }
-    if (event.type === 'chat-message-updated') {
-      messages = messages.map(message => {
-        if (message.id !== event.messageId) {
-          return message;
-        }
-        return {
-          ...message,
-          ...(event.inProgress === undefined ? {} : {
-            inProgress: event.inProgress
-          }),
-          text: event.text,
-          time: event.time,
-          ...(event.toolCalls === undefined ? {} : {
-            toolCalls: event.toolCalls
-          })
-        };
+    return patches;
+  }
+  // Compare attributes
+  const oldKeys = getKeys(oldNode);
+  const newKeys = getKeys(newNode);
+  // Check for attribute changes
+  for (const key of newKeys) {
+    if (oldNode[key] !== newNode[key]) {
+      patches.push({
+        type: SetAttribute,
+        key,
+        value: newNode[key]
       });
-      continue;
     }
-    if (event.type === 'chat-session-messages-replaced') {
-      messages = [...event.messages];
+  }
+  // Check for removed attributes
+  for (const key of oldKeys) {
+    if (!(key in newNode)) {
+      patches.push({
+        type: RemoveAttribute,
+        key
+      });
     }
   }
-  if (deleted || !currentTitle) {
-    return undefined;
+  return patches;
+};
+
+const treeToArray = node => {
+  const result = [node.node];
+  for (const child of node.children) {
+    result.push(...treeToArray(child));
   }
-  return {
-    id,
-    messages,
-    title: currentTitle
-  };
+  return result;
 };
-class InMemoryChatSessionStorage {
-  events = [];
-  summaries = new Map();
-  async appendEvent(event) {
-    this.events.push(event);
-    if (event.type === 'chat-session-created' || event.type === 'chat-session-title-updated') {
-      this.summaries.set(event.sessionId, event.title);
-      return;
+
+const diffChildren = (oldChildren, newChildren, patches) => {
+  const maxLength = Math.max(oldChildren.length, newChildren.length);
+  // Track where we are: -1 means at parent, >= 0 means at child index
+  let currentChildIndex = -1;
+  // Collect indices of children to remove (we'll add these patches at the end in reverse order)
+  const indicesToRemove = [];
+  for (let i = 0; i < maxLength; i++) {
+    const oldNode = oldChildren[i];
+    const newNode = newChildren[i];
+    if (!oldNode && !newNode) {
+      continue;
     }
-    if (event.type === 'chat-session-deleted') {
-      this.summaries.delete(event.sessionId);
+    if (!oldNode) {
+      // Add new node - we should be at the parent
+      if (currentChildIndex >= 0) {
+        // Navigate back to parent
+        patches.push({
+          type: NavigateParent
+        });
+        currentChildIndex = -1;
+      }
+      // Flatten the entire subtree so renderInternal can handle it
+      const flatNodes = treeToArray(newNode);
+      patches.push({
+        type: Add,
+        nodes: flatNodes
+      });
+    } else if (newNode) {
+      // Compare nodes to see if we need any patches
+      const nodePatches = compareNodes(oldNode.node, newNode.node);
+      // If nodePatches is null, the node types are incompatible - need to replace
+      if (nodePatches === null) {
+        // Navigate to this child
+        if (currentChildIndex === -1) {
+          patches.push({
+            type: NavigateChild,
+            index: i
+          });
+          currentChildIndex = i;
+        } else if (currentChildIndex !== i) {
+          patches.push({
+            type: NavigateSibling,
+            index: i
+          });
+          currentChildIndex = i;
+        }
+        // Replace the entire subtree
+        const flatNodes = treeToArray(newNode);
+        patches.push({
+          type: Replace,
+          nodes: flatNodes
+        });
+        // After replace, we're at the new element (same position)
+        continue;
+      }
+      // Check if we need to recurse into children
+      const hasChildrenToCompare = oldNode.children.length > 0 || newNode.children.length > 0;
+      // Only navigate to this element if we need to do something
+      if (nodePatches.length > 0 || hasChildrenToCompare) {
+        // Navigate to this child if not already there
+        if (currentChildIndex === -1) {
+          patches.push({
+            type: NavigateChild,
+            index: i
+          });
+          currentChildIndex = i;
+        } else if (currentChildIndex !== i) {
+          patches.push({
+            type: NavigateSibling,
+            index: i
+          });
+          currentChildIndex = i;
+        }
+        // Apply node patches (these apply to the current element, not children)
+        if (nodePatches.length > 0) {
+          patches.push(...nodePatches);
+        }
+        // Compare children recursively
+        if (hasChildrenToCompare) {
+          diffChildren(oldNode.children, newNode.children, patches);
+        }
+      }
+    } else {
+      // Remove old node - collect the index for later removal
+      indicesToRemove.push(i);
     }
   }
-  async clear() {
-    this.events.length = 0;
-    this.summaries.clear();
-  }
-  async deleteSession(id) {
-    await this.appendEvent({
-      sessionId: id,
-      timestamp: now(),
-      type: 'chat-session-deleted'
+  // Navigate back to parent if we ended at a child
+  if (currentChildIndex >= 0) {
+    patches.push({
+      type: NavigateParent
     });
+    currentChildIndex = -1;
   }
-  async getEvents(sessionId) {
-    if (!sessionId) {
-      return [...this.events];
-    }
-    return this.events.filter(event => event.sessionId === sessionId);
-  }
-  async getSession(id) {
-    return replaySession(id, this.summaries.get(id), this.events);
+  // 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]
+    });
   }
-  async listSessions() {
-    const ids = new Set();
-    for (const id of this.summaries.keys()) {
-      ids.add(id);
+};
+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;
     }
-    for (const event of this.events) {
-      ids.add(event.sessionId);
+    if (nodePatches.length > 0) {
+      patches.push(...nodePatches);
     }
-    const sessions = [];
-    for (const id of ids) {
-      const session = replaySession(id, this.summaries.get(id), this.events);
-      if (!session) {
-        continue;
-      }
-      sessions.push(session);
+    // Compare children
+    if (oldNode.children.length > 0 || newNode.children.length > 0) {
+      diffChildren(oldNode.children, newNode.children, patches);
     }
-    return sessions;
+  } else {
+    // Non-root level or multiple root elements - use the regular comparison
+    diffChildren(oldTree, newTree, patches);
   }
-  async setSession(session) {
-    const previous = await this.getSession(session.id);
-    const events = getMutationEvents(previous, session);
-    for (const event of events) {
-      await this.appendEvent(event);
+};
+
+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;
     }
-    this.summaries.set(session.id, session.title);
-  }
-}
-
-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
-  }));
+  // Return patches up to and including the last non-navigation patch
+  return lastNonNavigationIndex === -1 ? [] : patches.slice(0, lastNonNavigationIndex + 1);
 };
-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 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 saveChatSession = async session => {
-  await chatSessionStorage.setSession({
-    id: session.id,
-    messages: [...session.messages],
-    title: session.title
-  });
+
+const getKeyBindings = () => {
+  return [{
+    command: 'Chat.handleSubmit',
+    key: Enter,
+    when: FocusChatInput
+  }, {
+    command: 'Chat.enterNewLine',
+    key: Shift | Enter,
+    when: FocusChatInput
+  }];
 };
-const deleteChatSession = async id => {
-  await chatSessionStorage.deleteSession(id);
+
+const getSelectedSessionId = state => {
+  return state.selectedSessionId;
 };
-const clearChatSessions = async () => {
-  await chatSessionStorage.clear();
+
+const getListIndex = (state, eventX, eventY) => {
+  const {
+    headerHeight,
+    height,
+    listItemHeight,
+    width,
+    x,
+    y
+  } = state;
+  const relativeX = eventX - x;
+  const relativeY = eventY - y - headerHeight;
+  if (relativeX < 0 || relativeY < 0 || relativeX >= width || relativeY >= height - headerHeight) {
+    return -1;
+  }
+  return Math.floor(relativeY / listItemHeight);
 };
-const appendChatViewEvent = async event => {
-  await chatSessionStorage.appendEvent(event);
+
+const CHAT_LIST_ITEM_CONTEXT_MENU = 'ChatListItemContextMenu';
+const handleChatListContextMenu = async (state, eventX, eventY) => {
+  const index = getListIndex(state, eventX, eventY);
+  if (index === -1) {
+    return state;
+  }
+  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 generateSessionId = () => {
@@ -2696,56 +2761,6 @@ const createSession = async 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 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 handleClickOpenApiApiKeySettings = async state => {
   await invoke('Main.openUri', 'app://settings.json');
   return state;
@@ -5493,6 +5508,7 @@ const handleClickSend = async state => {
 };
 
 const Composer = 'composer';
+const ComposerDropTarget = 'composer-drop-target';
 const Send = 'send';
 const Back = 'back';
 const Model = 'model';
@@ -5667,6 +5683,89 @@ const handleClickSettings = async () => {
   await invoke('Main.openUri', 'app://settings.json');
 };
 
+const handleDragEnter = async (state, name, hasFiles = true) => {
+  if (name !== ComposerDropTarget) {
+    return state;
+  }
+  if (!state.composerDropEnabled) {
+    return state;
+  }
+  if (!hasFiles) {
+    return state;
+  }
+  if (state.composerDropActive) {
+    return state;
+  }
+  return {
+    ...state,
+    composerDropActive: true
+  };
+};
+
+const handleDragLeave = async (state, name) => {
+  if (name !== ComposerDropTarget) {
+    return state;
+  }
+  if (!state.composerDropActive) {
+    return state;
+  }
+  return {
+    ...state,
+    composerDropActive: false
+  };
+};
+
+const handleDragOver = async (state, name, hasFiles = true) => {
+  if (name !== ComposerDropTarget) {
+    return state;
+  }
+  if (!state.composerDropEnabled) {
+    return state;
+  }
+  if (!hasFiles) {
+    return state;
+  }
+  if (state.composerDropActive) {
+    return state;
+  }
+  return {
+    ...state,
+    composerDropActive: true
+  };
+};
+
+const handleDropFiles = async (state, name, files = []) => {
+  if (name !== ComposerDropTarget) {
+    return state;
+  }
+  if (!state.composerDropEnabled) {
+    return {
+      ...state,
+      composerDropActive: false
+    };
+  }
+  const nextState = state.composerDropActive === false ? state : {
+    ...state,
+    composerDropActive: false
+  };
+  if (!state.selectedSessionId || files.length === 0) {
+    return nextState;
+  }
+  for (const file of files) {
+    await appendChatViewEvent({
+      attachmentId: crypto.randomUUID(),
+      blob: file,
+      mimeType: file.type,
+      name: file.name,
+      sessionId: state.selectedSessionId,
+      size: file.size,
+      timestamp: new Date().toISOString(),
+      type: 'chat-attachment-added'
+    });
+  }
+  return nextState;
+};
+
 const handleInput = async (state, name, value, inputSource = 'user') => {
   const {
     selectedSessionId
@@ -5944,6 +6043,15 @@ const loadAiSessionTitleGenerationEnabled = async () => {
   }
 };
 
+const loadComposerDropEnabled = async () => {
+  try {
+    const savedComposerDropEnabled = await get('chatView.composerDropEnabled');
+    return typeof savedComposerDropEnabled === 'boolean' ? savedComposerDropEnabled : true;
+  } catch {
+    return true;
+  }
+};
+
 const loadEmitStreamingFunctionCallEvents = async () => {
   try {
     const savedEmitStreamingFunctionCallEvents = await get('chatView.emitStreamingFunctionCallEvents');
@@ -5998,9 +6106,10 @@ const loadStreamingEnabled = async () => {
 };
 
 const loadPreferences = async () => {
-  const [aiSessionTitleGenerationEnabled, openApiApiKey, openRouterApiKey, emitStreamingFunctionCallEvents, streamingEnabled, passIncludeObfuscation] = await Promise.all([loadAiSessionTitleGenerationEnabled(), loadOpenApiApiKey(), loadOpenRouterApiKey(), loadEmitStreamingFunctionCallEvents(), loadStreamingEnabled(), loadPassIncludeObfuscation()]);
+  const [aiSessionTitleGenerationEnabled, composerDropEnabled, openApiApiKey, openRouterApiKey, emitStreamingFunctionCallEvents, streamingEnabled, passIncludeObfuscation] = await Promise.all([loadAiSessionTitleGenerationEnabled(), loadComposerDropEnabled(), loadOpenApiApiKey(), loadOpenRouterApiKey(), loadEmitStreamingFunctionCallEvents(), loadStreamingEnabled(), loadPassIncludeObfuscation()]);
   return {
     aiSessionTitleGenerationEnabled,
+    composerDropEnabled,
     emitStreamingFunctionCallEvents,
     openApiApiKey,
     openRouterApiKey,
@@ -6037,6 +6146,7 @@ const loadContent = async (state, savedState) => {
   const savedViewMode = getSavedViewMode(savedState);
   const {
     aiSessionTitleGenerationEnabled,
+    composerDropEnabled,
     emitStreamingFunctionCallEvents,
     openApiApiKey,
     openRouterApiKey,
@@ -6071,6 +6181,8 @@ const loadContent = async (state, savedState) => {
     ...state,
     aiSessionTitleGenerationEnabled,
     chatListScrollTop,
+    composerDropActive: false,
+    composerDropEnabled,
     emitStreamingFunctionCallEvents,
     initial: false,
     messagesScrollTop,
@@ -6156,92 +6268,7 @@ const getCss = (composerHeight, listItemHeight, chatMessageFontSize, chatMessage
   --ChatMessageLineHeight: ${chatMessageLineHeight}px;
   --ChatMessageFontFamily: ${chatMessageFontFamily};
 }
-
-.ChatToolCalls {
-  position: relative;
-  border: 1px solid var(--vscode-editorWidget-border);
-  border-radius: 4px;
-  margin-bottom: 8px;
-  padding: 10px 8px 6px;
-  background: var(--vscode-editorWidget-background);
-}
-
-.ChatToolCallsLabel {
-  position: absolute;
-  top: -8px;
-  left: 8px;
-  padding: 0 4px;
-  border-radius: 3px;
-  background: var(--vscode-editor-background);
-  color: var(--vscode-descriptionForeground);
-  font-size: 10px;
-  line-height: 14px;
-  text-transform: lowercase;
-  letter-spacing: 0.02em;
-}
-
-.ChatToolCallReadFileLink {
-  color: var(--vscode-textLink-foreground);
-  text-decoration: underline;
-}
-
-.ChatToolCallRenderHtmlLabel {
-  margin-bottom: 6px;
-  color: var(--vscode-descriptionForeground);
-  font-size: 12px;
-}
-
-.ChatToolCallRenderHtmlContent {
-  border: 1px solid var(--vscode-editorWidget-border);
-  border-radius: 6px;
-  background: var(--vscode-editor-background);
-  overflow: hidden;
-}
-
-.ChatToolCallRenderHtmlBody {
-  min-height: 180px;
-  padding: 12px;
-}
-
-.ChatToolCallRenderHtmlBody * {
-  box-sizing: border-box;
-}
-
-.ChatMessageLink {
-  color: #4d94ff;
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.ChatOrderedList,
-.ChatUnorderedList {
-  margin: 6px 0;
-  padding-inline-start: 20px;
-}
-
-.ChatOrderedListItem,
-.ChatUnorderedListItem {
-  margin: 2px 0;
-}
-
-.MarkdownTable {
-  width: 100%;
-  margin: 6px 0;
-  border-collapse: collapse;
-  border: 1px solid var(--vscode-editorWidget-border);
-}
-
-.MarkdownTable th,
-.MarkdownTable td {
-  border: 1px solid var(--vscode-editorWidget-border);
-  padding: 4px 8px;
-  text-align: left;
-}
-
-.MarkdownTable th {
-  background: var(--vscode-editorWidget-background);
-}
-}`;
+`;
   if (!renderHtmlCss.trim()) {
     return baseCss;
   }
@@ -6298,6 +6325,8 @@ const Actions = 'Actions';
 const ChatActions = 'ChatActions';
 const ChatName = 'ChatName';
 const ChatSendArea = 'ChatSendArea';
+const ChatViewDropOverlay = 'ChatViewDropOverlay';
+const ChatViewDropOverlayActive = 'ChatViewDropOverlayActive';
 const SendButtonDisabled = 'SendButtonDisabled';
 const ChatSendAreaBottom = 'ChatSendAreaBottom';
 const ChatSendAreaContent = 'ChatSendAreaContent';
@@ -6306,6 +6335,7 @@ const ChatHeader = 'ChatHeader';
 const Button = 'Button';
 const ButtonPrimary = 'ButtonPrimary';
 const ButtonSecondary = 'ButtonSecondary';
+const Empty = '';
 const FileIcon = 'FileIcon';
 const IconButton = 'IconButton';
 const InputBox = 'InputBox';
@@ -6359,6 +6389,12 @@ const HandleMessagesScroll = 22;
 const HandleClickSessionDebug = 23;
 const HandleClickReadFile = 24;
 const HandleMessagesContextMenu = 25;
+const HandleDragEnter = 26;
+const HandleDragOver = 27;
+const HandleDragLeave = 28;
+const HandleDrop = 29;
+const HandleDragEnterChatView = 30;
+const HandleDragOverChatView = 31;
 
 const getModelLabel = model => {
   if (model.provider === 'openRouter') {
@@ -6497,7 +6533,6 @@ const getHeaderActionVirtualDom = item => {
     className: IconButton,
     name: item.name,
     onClick: item.onClick,
-    role: Button$2,
     title: item.title,
     type: Button$1
   }, {
@@ -7231,6 +7266,12 @@ const markdownInlineRegex = /\[([^\]]+)\]\(([^)]+)\)|\*\*([^*]+)\*\*/g;
 const markdownTableSeparatorCellRegex = /^:?-{3,}:?$/;
 const fencedCodeBlockRegex = /^```/;
 const markdownHeadingRegex = /^\s*(#{1,6})\s+(.*)$/;
+const normalizeEscapedNewlines = value => {
+  if (value.includes('\\n')) {
+    return value.replaceAll(/\\r\\n|\\n/g, '\n');
+  }
+  return value;
+};
 const normalizeInlineTables = value => {
   return value.split(/\r?\n/).map(line => {
     if (!line.includes('|')) {
@@ -7329,7 +7370,8 @@ const parseMessageContent = rawMessage => {
       type: 'text'
     }];
   }
-  const lines = normalizeInlineTables(rawMessage).split(/\r?\n/);
+  const normalizedMessage = normalizeEscapedNewlines(rawMessage);
+  const lines = normalizeInlineTables(normalizedMessage).split(/\r?\n/);
   const nodes = [];
   let paragraphLines = [];
   let listItems = [];
@@ -7495,15 +7537,29 @@ const getMessagesDom = (messages, openRouterApiKeyInput, openApiApiKeyInput = ''
   }, ...messages.flatMap(message => getChatMessageDom(message, openRouterApiKeyInput, openApiApiKeyInput, openRouterApiKeyState))];
 };
 
-const getChatModeDetailVirtualDom = (sessions, selectedSessionId, composerValue, openRouterApiKeyInput, openApiApiKeyInput, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, openRouterApiKeyState = 'idle', composerHeight = 28, composerFontSize = 13, composerFontFamily = 'system-ui', composerLineHeight = 20, messagesScrollTop = 0) => {
+const getChatModeDetailVirtualDom = (sessions, selectedSessionId, composerValue, openRouterApiKeyInput, openApiApiKeyInput, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, openRouterApiKeyState = 'idle', composerHeight = 28, composerFontSize = 13, composerFontFamily = 'system-ui', composerLineHeight = 20, messagesScrollTop = 0, composerDropActive = false, composerDropEnabled = true) => {
   const selectedSession = sessions.find(session => session.id === selectedSessionId);
   const selectedSessionTitle = selectedSession?.title || chatTitle();
   const messages = selectedSession ? selectedSession.messages : [];
+  const isDropOverlayVisible = composerDropEnabled && composerDropActive;
   return [{
-    childCount: 3,
+    childCount: 4,
     className: mergeClassNames(Viewlet, Chat),
+    onDragEnter: HandleDragEnterChatView,
+    onDragOver: HandleDragOverChatView,
     type: Div
-  }, ...getChatHeaderDomDetailMode(selectedSessionTitle), ...getMessagesDom(messages, openRouterApiKeyInput, openApiApiKeyInput, openRouterApiKeyState, messagesScrollTop), ...getChatSendAreaDom(composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, composerHeight, composerFontSize, composerFontFamily, composerLineHeight)];
+  }, ...getChatHeaderDomDetailMode(selectedSessionTitle), ...getMessagesDom(messages, openRouterApiKeyInput, openApiApiKeyInput, openRouterApiKeyState, messagesScrollTop), ...getChatSendAreaDom(composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, composerHeight, composerFontSize, composerFontFamily, composerLineHeight), {
+    childCount: 1,
+    className: mergeClassNames(ChatViewDropOverlay, isDropOverlayVisible ? ChatViewDropOverlayActive : Empty),
+    name: ComposerDropTarget,
+    onDragLeave: HandleDragLeave,
+    onDragOver: HandleDragOver,
+    onDrop: HandleDrop,
+    type: Div
+  }, {
+    text: attachImageAsContext(),
+    type: Text
+  }];
 };
 
 const getChatHeaderListModeDom = () => {
@@ -7553,7 +7609,6 @@ const getSessionDom = session => {
     'data-id': session.id,
     name: SessionDelete,
     onClick: HandleClickDelete,
-    role: Button$2,
     tabIndex: 0,
     title: deleteChatSession$1(),
     type: Button$1
@@ -7574,12 +7629,26 @@ const getChatListDom = (sessions, selectedSessionId, chatListScrollTop = 0) => {
   }, ...sessions.flatMap(getSessionDom)];
 };
 
-const getChatModeListVirtualDom = (sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, composerHeight = 28, composerFontSize = 13, composerFontFamily = 'system-ui', composerLineHeight = 20, chatListScrollTop = 0) => {
+const getChatModeListVirtualDom = (sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, composerHeight = 28, composerFontSize = 13, composerFontFamily = 'system-ui', composerLineHeight = 20, chatListScrollTop = 0, composerDropActive = false, composerDropEnabled = true) => {
+  const isDropOverlayVisible = composerDropEnabled && composerDropActive;
   return [{
-    childCount: 3,
+    childCount: 4,
     className: mergeClassNames(Viewlet, Chat),
+    onDragEnter: HandleDragEnterChatView,
+    onDragOver: HandleDragOverChatView,
+    type: Div
+  }, ...getChatHeaderListModeDom(), ...getChatListDom(sessions, selectedSessionId, chatListScrollTop), ...getChatSendAreaDom(composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, composerHeight, composerFontSize, composerFontFamily, composerLineHeight), {
+    childCount: 1,
+    className: mergeClassNames(ChatViewDropOverlay, isDropOverlayVisible ? ChatViewDropOverlayActive : Empty),
+    name: ComposerDropTarget,
+    onDragLeave: HandleDragLeave,
+    onDragOver: HandleDragOver,
+    onDrop: HandleDrop,
     type: Div
-  }, ...getChatHeaderListModeDom(), ...getChatListDom(sessions, selectedSessionId, chatListScrollTop), ...getChatSendAreaDom(composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, composerHeight, composerFontSize, composerFontFamily, composerLineHeight)];
+  }, {
+    text: attachImageAsContext(),
+    type: Text
+  }];
 };
 
 const getChatModeUnsupportedVirtualDom = () => {
@@ -7589,12 +7658,12 @@ const getChatModeUnsupportedVirtualDom = () => {
   }, text(unknownViewMode())];
 };
 
-const getChatVirtualDom = (sessions, selectedSessionId, composerValue, openRouterApiKeyInput, viewMode, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, openApiApiKeyInput, openRouterApiKeyState, composerHeight, composerFontSize, composerFontFamily, composerLineHeight, chatListScrollTop, messagesScrollTop) => {
+const getChatVirtualDom = (sessions, selectedSessionId, composerValue, openRouterApiKeyInput, viewMode, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, openApiApiKeyInput, openRouterApiKeyState, composerHeight, composerFontSize, composerFontFamily, composerLineHeight, chatListScrollTop, messagesScrollTop, composerDropActive = false, composerDropEnabled = true) => {
   switch (viewMode) {
     case 'detail':
-      return getChatModeDetailVirtualDom(sessions, selectedSessionId, composerValue, openRouterApiKeyInput, openApiApiKeyInput, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, openRouterApiKeyState, composerHeight, composerFontSize, composerFontFamily, composerLineHeight, messagesScrollTop);
+      return getChatModeDetailVirtualDom(sessions, selectedSessionId, composerValue, openRouterApiKeyInput, openApiApiKeyInput, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, openRouterApiKeyState, composerHeight, composerFontSize, composerFontFamily, composerLineHeight, messagesScrollTop, composerDropActive, composerDropEnabled);
     case 'list':
-      return getChatModeListVirtualDom(sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, composerHeight, composerFontSize, composerFontFamily, composerLineHeight, chatListScrollTop);
+      return getChatModeListVirtualDom(sessions, selectedSessionId, composerValue, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, composerHeight, composerFontSize, composerFontFamily, composerLineHeight, chatListScrollTop, composerDropActive, composerDropEnabled);
     default:
       return getChatModeUnsupportedVirtualDom();
   }
@@ -7603,6 +7672,8 @@ const getChatVirtualDom = (sessions, selectedSessionId, composerValue, openRoute
 const renderItems = (oldState, newState) => {
   const {
     chatListScrollTop,
+    composerDropActive,
+    composerDropEnabled,
     composerFontFamily,
     composerFontSize,
     composerHeight,
@@ -7626,7 +7697,7 @@ const renderItems = (oldState, newState) => {
   if (initial) {
     return [SetDom2, uid, []];
   }
-  const dom = getChatVirtualDom(sessions, selectedSessionId, composerValue, openRouterApiKeyInput, viewMode, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, openApiApiKeyInput, openRouterApiKeyState, composerHeight, composerFontSize, composerFontFamily, composerLineHeight, chatListScrollTop, messagesScrollTop);
+  const dom = getChatVirtualDom(sessions, selectedSessionId, composerValue, openRouterApiKeyInput, viewMode, models, selectedModelId, usageOverviewEnabled, tokensUsed, tokensMax, openApiApiKeyInput, openRouterApiKeyState, composerHeight, composerFontSize, composerFontFamily, composerLineHeight, chatListScrollTop, messagesScrollTop, composerDropActive, composerDropEnabled);
   return [SetDom2, uid, dom];
 };
 
@@ -7730,6 +7801,30 @@ const renderEventListeners = () => {
   }, {
     name: HandleInput,
     params: ['handleInput', TargetName, TargetValue]
+  }, {
+    name: HandleDragEnter,
+    params: ['handleDragEnter', TargetName, 'Array.from(event.dataTransfer?.files || []).length > 0'],
+    preventDefault: true
+  }, {
+    name: HandleDragOver,
+    params: ['handleDragOver', TargetName, 'Array.from(event.dataTransfer?.files || []).length > 0'],
+    preventDefault: true
+  }, {
+    name: HandleDragLeave,
+    params: ['handleDragLeave', TargetName],
+    preventDefault: true
+  }, {
+    name: HandleDrop,
+    params: ['handleDropFiles', TargetName, 'Array.from(event.dataTransfer?.files || [])'],
+    preventDefault: true
+  }, {
+    name: HandleDragEnterChatView,
+    params: ['handleDragEnter', 'composer-drop-target', 'Array.from(event.dataTransfer?.files || []).length > 0'],
+    preventDefault: true
+  }, {
+    name: HandleDragOverChatView,
+    params: ['handleDragOver', 'composer-drop-target', 'Array.from(event.dataTransfer?.files || []).length > 0'],
+    preventDefault: true
   }, {
     name: HandleModelChange,
     params: ['handleModelChange', TargetValue]
@@ -7859,6 +7954,7 @@ const useMockApi = (state, value, mockApiCommandId = defaultMockApiCommandId) =>
 const commandMap = {
   'Chat.clearInput': wrapCommand(clearInput),
   'Chat.create': create,
+  'Chat.deleteSessionAtIndex': wrapCommand(deleteSessionAtIndex),
   'Chat.diff2': diff2,
   'Chat.enterNewLine': wrapCommand(handleNewline),
   'Chat.getCommandIds': getCommandIds,
@@ -7875,6 +7971,10 @@ const commandMap = {
   'Chat.handleClickReadFile': handleClickReadFile,
   'Chat.handleClickSessionDebug': wrapCommand(handleClickSessionDebug),
   'Chat.handleClickSettings': handleClickSettings,
+  'Chat.handleDragEnter': wrapCommand(handleDragEnter),
+  'Chat.handleDragLeave': wrapCommand(handleDragLeave),
+  'Chat.handleDragOver': wrapCommand(handleDragOver),
+  'Chat.handleDropFiles': wrapCommand(handleDropFiles),
   'Chat.handleInput': wrapCommand(handleInput),
   'Chat.handleInputFocus': wrapCommand(handleInputFocus),
   'Chat.handleKeyDown': wrapCommand(handleKeyDown),