feat: enhance chat and editor components with new functionality and improved UI

- Updated the ProviderSelector component to allow selection of additional agent providers, including 'codex'.
- Enhanced the EditorTabs component to support tab reordering and improved preview functionality.
- Integrated model selection into the ChatInputBar and ChatHome components for better user experience.
- Improved event handling in the GatewayTerminal to mirror agent replies from chat, ensuring a cohesive interaction.
- Refined scrolling behavior in the MessageList component to enhance usability when navigating chat history.

Author: BunsDev

components/agent-panel.tsx

@@ -1132,7 +1132,7 @@ export function AgentPanel({ onClose }: { onClose?: () => void } = {}) {
           timestamp: Date.now(),
           editProposals: editProposals.length > 0 ? editProposals : undefined,
         })
-        emit('agent-reply')
+        emit('agent-reply', { content: reply, sessionKey, source: 'chat' })
         logChatDebug('assistant reply appended from direct response', {
           idempotencyKey: idemKey,
           replyChars: reply.length,
@@ -1877,7 +1877,7 @@ export function AgentPanel({ onClose }: { onClose?: () => void } = {}) {
               type: editProposals.length > 0 ? 'edit' : 'text',
               editProposals: editProposals.length > 0 ? editProposals : undefined,
             })
-            emit('agent-reply')
+            emit('agent-reply', { content: reply, sessionKey, source: 'chat' })
           }
           setIsStreaming(false)
           setSending(false)

components/chat-home.tsx

@@ -602,6 +602,16 @@ export const ChatHome = memo(function ChatHome({
           </div>
         </motion.div>
 
+        {/* Model selector — ChatGPT/Cursor-style, above composer */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, delay: 0.55 }}
+          className="mb-1.5"
+        >
+          <ProviderSelector size="sm" />
+        </motion.div>
+
         {/* Composer */}
         <motion.div
           initial={{ opacity: 0, y: 20 }}
@@ -675,14 +685,6 @@ export const ChatHome = memo(function ChatHome({
 
                 {/* Mode selector */}
                 <ModeSelector mode={agentMode} onChange={setAgentMode} size="sm" />
-
-                {/* Divider — desktop only */}
-                <div className="hidden sm:block w-px h-4 bg-[var(--border)]" />
-
-                {/* Provider selector — desktop only */}
-                <span className="hidden sm:inline-flex">
-                  <ProviderSelector size="sm" />
-                </span>
               </div>
 
               {/* Send button */}

components/chat/chat-input-bar.tsx

@@ -369,6 +369,11 @@ export function ChatInputBar({
             </div>
           )}
 
+          {/* Model selector — ChatGPT/Cursor-style, above input */}
+          <div className="mb-1">
+            <ProviderSelector size="sm" />
+          </div>
+
           {/* Unified input container with drag-drop zone */}
           <div
             className={`chat-input-shell overflow-hidden rounded-[18px] border bg-[var(--bg)] transition-colors ${
@@ -638,15 +643,12 @@ export function ChatInputBar({
           </div>
         </div>
 
-        {/* Bottom bar — mode + provider */}
-        <div className="flex items-center justify-between mt-1">
+        {/* Bottom bar — mode selector */}
+        <div className="flex items-center mt-1">
           <div className="flex items-center gap-1.5">
             <ModeSelector mode={agentMode} onChange={setAgentMode} />
             <span className="hidden sm:inline text-[9px] text-[var(--text-disabled)]">⇧Tab</span>
           </div>
-          <div className="hidden sm:flex items-center gap-2">
-            <ProviderSelector size="sm" />
-          </div>
         </div>
       </div>
     </>

components/chat/message-list.tsx

@@ -208,6 +208,7 @@ export function MessageList({
   const [lightboxSrc, setLightboxSrc] = useState<string | null>(null)
   const [showScrollToBottom, setShowScrollToBottom] = useState(false)
   const [copiedCode, setCopiedCode] = useState<string | null>(null)
+  const shouldStickToBottomRef = useRef(true)
   const { chatFontSize, chatFontCss } = useChatAppearance()
 
   const visibleMessages = useMemo(
@@ -216,10 +217,19 @@ export function MessageList({
   )
 
   useEffect(() => {
-    if (scrollRef.current) {
-      scrollRef.current.scrollTop = scrollRef.current.scrollHeight
-    }
-  }, [messages, streamBuffer])
+    const el = scrollRef.current
+    if (!el) return
+
+    if (!shouldStickToBottomRef.current) return
+
+    const raf = requestAnimationFrame(() => {
+      const nextEl = scrollRef.current
+      if (!nextEl) return
+      nextEl.scrollTop = nextEl.scrollHeight
+    })
+
+    return () => cancelAnimationFrame(raf)
+  }, [messages, streamBuffer, isStreaming])
 
   const scrollToBottom = useCallback(() => {
     if (scrollRef.current) {
@@ -322,13 +332,13 @@ export function MessageList({
           className="h-full overflow-y-auto px-3 py-3 space-y-3 scroll-shadow"
           onScroll={(e) => {
             const el = e.currentTarget
+            const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight
+            const nearBottom = distanceFromBottom < 80
+            shouldStickToBottomRef.current = nearBottom
             el.classList.toggle('has-scroll-top', el.scrollTop > 8)
-            el.classList.toggle(
-              'has-scroll-bottom',
-              el.scrollTop + el.clientHeight < el.scrollHeight - 8,
-            )
-            // Show scroll to bottom FAB if scrolled up more than 200px from bottom
-            setShowScrollToBottom(el.scrollTop + el.clientHeight < el.scrollHeight - 200)
+            el.classList.toggle('has-scroll-bottom', !nearBottom)
+            // Show scroll to bottom FAB if the reader has intentionally drifted away.
+            setShowScrollToBottom(distanceFromBottom > 200)
           }}
         >
           {visibleMessages.map((msg, idx) => {
@@ -699,6 +709,20 @@ export function MessageList({
                     <span className="text-[10px] font-medium text-[var(--text-tertiary)]">
                       Knot
                     </span>
+                    {(agentActivities.length > 0 || turnElapsedMs > 0) && (
+                      <div className="ml-auto flex items-center gap-1.5 text-[9px] text-[var(--text-disabled)]">
+                        {agentActivities.length > 0 && (
+                          <span className="inline-flex items-center gap-1 rounded-full border border-[var(--border)] bg-[color-mix(in_srgb,var(--bg-elevated)_88%,transparent)] px-1.5 py-0.5">
+                            <Icon icon="lucide:wrench" width={9} height={9} />
+                            {agentActivities[agentActivities.length - 1]?.label ??
+                              `${agentActivities.length} actions`}
+                          </span>
+                        )}
+                        {turnElapsedMs > 999 && (
+                          <span className="tabular-nums">{Math.round(turnElapsedMs / 1000)}s</span>
+                        )}
+                      </div>
+                    )}
                   </div>
                   <div
                     className="rounded-xl px-3 py-2 leading-relaxed bg-[var(--bg-subtle)] border border-[color-mix(in_srgb,var(--brand)_20%,var(--border))] text-[var(--text-primary)] rounded-bl-sm"

components/editor-tabs.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useCallback, useRef } from 'react'
 import { Icon } from '@iconify/react'
-import { useEditor } from '@/context/editor-context'
+import { PREVIEW_TAB_ID, useEditor } from '@/context/editor-context'
 import { useView } from '@/context/view-context'
 import { formatShortcut } from '@/lib/platform'
 
@@ -49,7 +49,16 @@ function getFileIcon(path: string) {
 }
 
 export function EditorTabs({ onTabSelect }: { onTabSelect?: (path: string) => void }) {
-  const { files, activeFile, setActiveFile, closeFile, reorderFiles } = useEditor()
+  const {
+    tabs,
+    files,
+    activeFile,
+    setActiveFile,
+    closeFile,
+    reorderTabs,
+    closePreviewTab,
+    openPreviewTab,
+  } = useEditor()
   const { activeView, setView } = useView()
   const previewActive = activeView === 'preview'
   const [dragIndex, setDragIndex] = useState<number | null>(null)
@@ -60,7 +69,6 @@ export function EditorTabs({ onTabSelect }: { onTabSelect?: (path: string) => vo
     setDragIndex(index)
     dragNode.current = e.currentTarget as HTMLDivElement
     e.dataTransfer.effectAllowed = 'move'
-    // Make drag image semi-transparent
     requestAnimationFrame(() => {
       if (dragNode.current) dragNode.current.style.opacity = '0.4'
     })
@@ -69,32 +77,38 @@ export function EditorTabs({ onTabSelect }: { onTabSelect?: (path: string) => vo
   const handleDragEnd = useCallback(() => {
     if (dragNode.current) dragNode.current.style.opacity = '1'
     if (dragIndex !== null && dropTarget !== null && dragIndex !== dropTarget) {
-      reorderFiles(dragIndex, dropTarget)
+      reorderTabs(dragIndex, dropTarget)
     }
     setDragIndex(null)
     setDropTarget(null)
     dragNode.current = null
-  }, [dragIndex, dropTarget, reorderFiles])
+  }, [dragIndex, dropTarget, reorderTabs])
 
   const handleDragOver = useCallback((e: React.DragEvent, index: number) => {
     e.preventDefault()
     e.dataTransfer.dropEffect = 'move'
     setDropTarget(index)
   }, [])
 
-  if (files.length === 0) return null
+  if (tabs.length === 0) return null
 
   return (
     <div className="relative flex items-center border-b border-[var(--border)] bg-[var(--bg)] overflow-x-auto no-scrollbar shrink-0 h-[42px]">
-      {files.map((file, index) => {
-        const name = file.path.split('/').pop() ?? file.path
-        const isActive = !previewActive && file.path === activeFile
+      {tabs.map((tab, index) => {
+        const isPreview = tab.type === 'preview'
+        const tabPath = tab.type === 'file' ? tab.path : null
+        const isActive = isPreview ? previewActive : !previewActive && tabPath === activeFile
         const isDragTarget = dropTarget === index && dragIndex !== null && dragIndex !== index
-        const { icon, color } = getFileIcon(file.path)
+
+        const label = isPreview ? 'Preview' : (tabPath?.split('/').pop() ?? '')
+        const dirty = tabPath ? files.find((file) => file.path === tabPath)?.dirty : false
+        const iconMeta = isPreview
+          ? { icon: 'lucide:eye', color: 'var(--brand)' }
+          : getFileIcon(tabPath ?? '')
 
         return (
           <div
-            key={file.path}
+            key={tab.id}
             draggable
             onDragStart={(e) => handleDragStart(e, index)}
             onDragEnd={handleDragEnd}
@@ -110,90 +124,72 @@ export function EditorTabs({ onTabSelect }: { onTabSelect?: (path: string) => vo
               ${isDragTarget ? 'border-b-[var(--brand)] bg-[var(--bg-subtle)]' : ''}
             `}
             onClick={() => {
-              setActiveFile(file.path)
+              if (isPreview) {
+                openPreviewTab()
+                setView('preview')
+                return
+              }
+              if (!tabPath) return
+              setActiveFile(tabPath)
               setView('editor')
-              onTabSelect?.(file.path)
+              onTabSelect?.(tabPath)
             }}
           >
-            {/* Active indicator */}
             {isActive && (
               <div className="absolute bottom-0 left-0 right-0 h-[3px]">
                 <div className="h-full bg-[var(--brand)] rounded-t-full" />
               </div>
             )}
 
-            {/* File icon */}
             <Icon
-              icon={icon}
+              icon={iconMeta.icon}
               width={17}
               height={17}
-              style={{ color: isActive ? color : undefined }}
+              style={{ color: isActive ? iconMeta.color : undefined }}
               className={`transition-colors duration-150 ${isActive ? '' : 'text-[var(--text-tertiary)]'}`}
             />
 
-            {/* File name */}
-            <span className="text-[13px] font-medium truncate max-w-[140px]" title={file.path}>
-              {name}
+            <span
+              className="text-[13px] font-medium truncate max-w-[140px]"
+              title={isPreview ? 'Preview' : (tabPath ?? '')}
+            >
+              {label}
             </span>
 
-            {/* Dirty indicator */}
-            {file.dirty && (
+            {dirty && (
               <span
                 className="h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--brand)]"
                 title="Unsaved changes"
               />
             )}
 
-            {/* Close button — show dot when dirty and not hovered */}
             <button
               onClick={(e) => {
                 e.stopPropagation()
-                closeFile(file.path)
+                if (isPreview) {
+                  closePreviewTab()
+                  if (previewActive) setView('editor')
+                  return
+                }
+                if (tabPath) closeFile(tabPath)
               }}
               className="ml-1 cursor-pointer rounded-lg p-1.5 opacity-0 transition-colors hover:bg-[var(--bg)] group-hover:opacity-100 focus:opacity-100"
               title={`Close (${formatShortcut('meta+W')})`}
             >
               <Icon icon="lucide:x" width={14} height={14} />
             </button>
 
-            {/* Separator */}
             {!isActive && (
               <div className="absolute right-0 top-[6px] bottom-[6px] w-px bg-[var(--border)] opacity-30" />
             )}
           </div>
         )
       })}
 
-      <div
-        className={`
-          group relative flex items-center gap-2.5 px-4 h-full cursor-pointer transition-colors duration-150 select-none min-w-0 shrink-0
-          ${
-            previewActive
-              ? 'bg-[var(--bg-elevated)] text-[var(--text-primary)]'
-              : 'text-[var(--text-secondary)] hover:bg-[var(--bg-subtle)] hover:text-[var(--text-primary)]'
-          }
-        `}
-        onClick={() => setView('preview')}
-      >
-        {previewActive && (
-          <div className="absolute bottom-0 left-0 right-0 h-[3px]">
-            <div className="h-full bg-[var(--brand)] rounded-t-full" />
-          </div>
-        )}
-        <Icon
-          icon="lucide:eye"
-          width={17}
-          height={17}
-          className={`transition-colors duration-150 ${previewActive ? 'text-[var(--brand)]' : 'text-[var(--text-tertiary)]'}`}
-        />
-        <span className="text-[13px] font-medium truncate max-w-[140px]">Preview</span>
-      </div>
-
-      {/* Tab count indicator when many tabs are open */}
-      {files.length > 6 && (
+      {tabs.length > 6 && (
         <div className="sticky right-0 flex items-center px-2 h-full bg-gradient-to-l from-[var(--bg)] via-[var(--bg)] to-transparent shrink-0">
           <span className="text-[11px] font-mono font-bold text-[var(--text-tertiary)] bg-[var(--bg-subtle)] px-2.5 py-1 rounded-full border-[1.5px] border-[var(--border)]">
-            {files.length}
+            {tabs.length}
           </span>
         </div>
       )}