@pheem49/mint 1.14.0 → 1.16.0

package/src/renderer/shared/components/DashboardSidebar.tsx

@@ -1,9 +1,10 @@
-import { useState, useEffect, useRef, type MouseEvent as ReactMouseEvent } from 'react'
+import { useState, useEffect, useRef, useMemo, type MouseEvent as ReactMouseEvent, type DragEvent as ReactDragEvent } from 'react'
+import { Check, ChevronDown, Folder, FolderInput, FolderMinus, Pencil, Plus, Trash2 } from 'lucide-react'
 import { renderSkillsSvgIcon, renderMcpHubSvgIcon, renderPluginsSvgIcon, renderScheduledTasksSvgIcon, renderLinkedFoldersSvgIcon } from '../constants/plugins'
 import { useAuthUser } from './AuthGate'
-import { APP_ICON_PATH } from '@/tauri'
+import { runtimePlatform } from '../platform'
 
-export type DashboardView = 'chat' | 'pictures' | 'model' | 'workspace' | 'imagine' | 'veo' | 'skills' | 'mcp' | 'plugins' | 'cron' | 'link'
+export type DashboardView = 'chat' | 'pictures' | 'workspace' | 'imagine' | 'veo' | 'skills' | 'mcp' | 'plugins' | 'cron' | 'link' | 'code'
 
 interface ChatSessionItem {
   id: string
@@ -11,6 +12,7 @@ interface ChatSessionItem {
   kind?: string
   createdAt?: string
   updatedAt?: string
+  workspacePath?: string | null
 }
 
 interface DashboardSidebarProps {
@@ -39,35 +41,19 @@ interface DashboardSidebarProps {
    * difference between the two, not something to unify.
    */
   promoteMediaStudios?: boolean
-  /** Desktop only — the inline Live2D companion character doesn't exist on web. */
-  modelVisible?: boolean
-  expressionIndex?: number
-  accessoryIndex?: number
-  expressions?: string[]
-  accessories?: string[]
-  interactionEnabled?: boolean
-  showInteractionGuide?: boolean
-  onToggleModel?: () => void
-  onSetExpressionIndex?: (index: number) => void
-  onSetAccessoryIndex?: (index: number) => void
-  onSetInteractionEnabled?: (enabled: boolean) => void
-  onSetShowInteractionGuide?: (visible: boolean) => void
-  onShowToast?: (message: string) => void
+  activeWorkspacePath?: string
+  recentWorkspacePaths?: string[]
+  onBrowseFolder?: () => Promise<string | null>
+  onUpdateSessionWorkspace?: (sessionId: string, workspacePath: string | null) => void
+  onNewChatInProject?: (workspacePath: string) => void
 }
 
 export default function DashboardSidebar({
   view,
   sidebarCollapsed,
-  modelVisible,
   sending,
   chatSessions,
   activeConversationId,
-  expressionIndex = 0,
-  accessoryIndex = 0,
-  expressions = [],
-  accessories = [],
-  interactionEnabled,
-  showInteractionGuide,
   onToggleSidebar,
   onSidebarResize,
   onSidebarResizeEnd,
@@ -76,21 +62,33 @@ export default function DashboardSidebar({
   onDeleteConversation,
   onRenameConversation,
   onSetView,
-  onToggleModel,
-  onSetExpressionIndex,
-  onSetAccessoryIndex,
-  onSetInteractionEnabled,
-  onSetShowInteractionGuide,
-  onShowToast,
   isSearchOpen,
   onSetSearchOpen,
   showWorkspaceTab,
   promoteMediaStudios,
+  activeWorkspacePath,
+  recentWorkspacePaths,
+  onBrowseFolder,
+  onUpdateSessionWorkspace,
+  onNewChatInProject,
 }: DashboardSidebarProps) {
   const [editingSessionId, setEditingSessionId] = useState<string | null>(null)
   const [editTitleValue, setEditTitleValue] = useState('')
   const [isMoreOpen, setIsMoreOpen] = useState(false)
   const [isAccountMenuOpen, setIsAccountMenuOpen] = useState(false)
+  const [projectMenu, setProjectMenu] = useState<{ projectId: string; top: number; left: number } | null>(null)
+  const [conversationMenu, setConversationMenu] = useState<{ sessionId: string; top: number; left: number } | null>(null)
+  const [removedProjectIds, setRemovedProjectIds] = useState<string[]>(() => {
+    if (typeof window === 'undefined') return []
+    try { return JSON.parse(window.localStorage.getItem('mint_removed_sidebar_projects') || '[]') } catch { return [] }
+  })
+  const [moveMenu, setMoveMenu] = useState<{
+    sessionId: string
+    currentWorkspacePath?: string | null
+    top: number
+    left: number
+  } | null>(null)
+  const moveMenuRef = useRef<HTMLDivElement>(null)
   const moreContainerRef = useRef<HTMLDivElement>(null)
   const accountContainerRef = useRef<HTMLDivElement>(null)
   const asideRef = useRef<HTMLElement>(null)
@@ -151,6 +149,11 @@ export default function DashboardSidebar({
       if (accountContainerRef.current && !accountContainerRef.current.contains(event.target as Node)) {
         setIsAccountMenuOpen(false)
       }
+      if (moveMenuRef.current && !moveMenuRef.current.contains(event.target as Node)) {
+        setMoveMenu(null)
+      }
+      if (!(event.target as Element).closest('.sidebar-project-menu-popover, .sidebar-project-menu-trigger')) setProjectMenu(null)
+      if (!(event.target as Element).closest('.sidebar-conversation-menu-popover, .sidebar-conversation-menu-trigger')) setConversationMenu(null)
     }
     document.addEventListener('mousedown', handleClickOutside)
     return () => document.removeEventListener('mousedown', handleClickOutside)
@@ -162,25 +165,258 @@ export default function DashboardSidebar({
     }
     setEditingSessionId(null)
   }
-  const toggleInteractionGuide = () => {
-    const next = !showInteractionGuide
-    onSetShowInteractionGuide?.(next)
-    onShowToast?.(next ? 'Show interaction zones ⊹' : 'Hide interaction zones ⊹')
+  const conversationSessions = chatSessions.filter((session) => session.kind !== 'cli' && !session.id.startsWith('cli') && session.id !== 'conversation-default')
+  const cliSessions = chatSessions.filter((session) => session.kind === 'cli' || session.id.startsWith('cli'))
+
+  const [projectOrder, setProjectOrder] = useState<string[]>(() => {
+    if (typeof window === 'undefined') return []
+    try {
+      const saved = localStorage.getItem('mint_project_order')
+      return saved ? JSON.parse(saved) : []
+    } catch {
+      return []
+    }
+  })
+  const [draggedProjectId, setDraggedProjectId] = useState<string | null>(null)
+  const [dragOverProjectId, setDragOverProjectId] = useState<string | null>(null)
+  const [dropPosition, setDropPosition] = useState<'before' | 'after' | null>(null)
+
+  const handleProjectDragStart = (e: ReactDragEvent, projectId: string) => {
+    e.dataTransfer.setData('text/plain', projectId)
+    e.dataTransfer.effectAllowed = 'move'
+    setDraggedProjectId(projectId)
+  }
+
+  const handleProjectDragOver = (e: ReactDragEvent, targetId: string) => {
+    if (!draggedProjectId || draggedProjectId === targetId) return
+    e.preventDefault()
+    e.stopPropagation()
+    e.dataTransfer.dropEffect = 'move'
+
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+    const midY = rect.top + rect.height / 2
+    const pos = e.clientY < midY ? 'before' : 'after'
+
+    if (dragOverProjectId !== targetId || dropPosition !== pos) {
+      setDragOverProjectId(targetId)
+      setDropPosition(pos)
+    }
+  }
+
+  const handleProjectDragLeave = (e: ReactDragEvent, targetId: string) => {
+    e.stopPropagation()
+    if (dragOverProjectId === targetId) {
+      const related = e.relatedTarget as Node | null
+      if (!related || !(e.currentTarget as HTMLElement).contains(related)) {
+        setDragOverProjectId(null)
+        setDropPosition(null)
+      }
+    }
+  }
+
+  const handleProjectDrop = (e: ReactDragEvent, targetId: string) => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (!draggedProjectId || draggedProjectId === targetId) {
+      setDraggedProjectId(null)
+      setDragOverProjectId(null)
+      setDropPosition(null)
+      return
+    }
+
+    const allIds = projectGroups.map((g) => g.id)
+    let newOrder = [...projectOrder]
+    for (const id of allIds) {
+      if (!newOrder.includes(id)) {
+        newOrder.push(id)
+      }
+    }
+
+    newOrder = newOrder.filter((id) => id !== draggedProjectId)
+    const targetIdx = newOrder.indexOf(targetId)
+    if (targetIdx !== -1) {
+      const insertIdx = dropPosition === 'after' ? targetIdx + 1 : targetIdx
+      newOrder.splice(insertIdx, 0, draggedProjectId)
+    } else {
+      newOrder.push(draggedProjectId)
+    }
+
+    setProjectOrder(newOrder)
+    try {
+      localStorage.setItem('mint_project_order', JSON.stringify(newOrder))
+    } catch (err) {
+      console.error('Failed to save project order', err)
+    }
+
+    setDraggedProjectId(null)
+    setDragOverProjectId(null)
+    setDropPosition(null)
+  }
+
+  const handleProjectDragEnd = () => {
+    setDraggedProjectId(null)
+    setDragOverProjectId(null)
+    setDropPosition(null)
+  }
+
+  // Group conversations by Workspace Project
+  const { projectGroups, recentSessions } = useMemo(() => {
+    const getProjectInfo = (workspacePath?: string | null): { id: string; name: string } | null => {
+      if (!workspacePath) return null
+      const clean = workspacePath.replace(/[\\/]+$/, '').trim()
+      if (!clean) return null
+      const parts = clean.split(/[\\/]/)
+      const name = parts[parts.length - 1] || clean
+      return { id: clean, name }
+    }
+
+    const groupsMap = new Map<string, { id: string; name: string; sessions: ChatSessionItem[] }>()
+    const recents: ChatSessionItem[] = []
+
+    // If active workspace is known, initialize its project folder
+    const activeProj = getProjectInfo(activeWorkspacePath)
+    if (activeProj && !removedProjectIds.includes(activeProj.id)) {
+      groupsMap.set(activeProj.id, { id: activeProj.id, name: activeProj.name, sessions: [] })
+    }
+
+    for (const session of conversationSessions) {
+      const effectivePath = session.workspacePath || null
+      const proj = getProjectInfo(effectivePath)
+      if (proj) {
+        if (removedProjectIds.includes(proj.id)) {
+          recents.push(session)
+          continue
+        }
+        if (!groupsMap.has(proj.id)) {
+          groupsMap.set(proj.id, { id: proj.id, name: proj.name, sessions: [] })
+        }
+        groupsMap.get(proj.id)!.sessions.push(session)
+      } else {
+        recents.push(session)
+      }
+    }
+
+    // Sort groups stably according to user custom projectOrder, fallback to name
+    const sortedGroups = Array.from(groupsMap.values()).sort((a, b) => {
+      const idxA = projectOrder.indexOf(a.id)
+      const idxB = projectOrder.indexOf(b.id)
+      if (idxA !== -1 && idxB !== -1) return idxA - idxB
+      if (idxA !== -1) return -1
+      if (idxB !== -1) return 1
+      return a.name.localeCompare(b.name)
+    })
+
+    return { projectGroups: sortedGroups, recentSessions: recents }
+  }, [conversationSessions, activeWorkspacePath, activeConversationId, projectOrder, removedProjectIds])
+
+  const availableProjects = useMemo(() => {
+    const getProjectInfo = (workspacePath?: string | null): { id: string; name: string } | null => {
+      if (!workspacePath) return null
+      const clean = workspacePath.replace(/[\\/]+$/, '').trim()
+      if (!clean) return null
+      const parts = clean.split(/[\\/]/)
+      const name = parts[parts.length - 1] || clean
+      return { id: clean, name }
+    }
+
+    const map = new Map<string, string>()
+    if (activeWorkspacePath && !removedProjectIds.includes(activeWorkspacePath.replace(/[\\/]+$/, '').trim())) {
+      const info = getProjectInfo(activeWorkspacePath)
+      if (info) map.set(info.id, info.name)
+    }
+    for (const g of projectGroups) {
+      if (!removedProjectIds.includes(g.id)) map.set(g.id, g.name)
+    }
+    if (recentWorkspacePaths) {
+      for (const p of recentWorkspacePaths) {
+        const info = getProjectInfo(p)
+        if (info && !removedProjectIds.includes(info.id) && !map.has(info.id)) {
+          map.set(info.id, info.name)
+        }
+      }
+    }
+    return Array.from(map.entries()).map(([path, name]) => ({ path, name }))
+  }, [projectGroups, activeWorkspacePath, recentWorkspacePaths, removedProjectIds])
+
+  const openMoveMenu = (event: ReactMouseEvent, session: ChatSessionItem) => {
+    event.stopPropagation()
+    event.preventDefault()
+    if (moveMenu?.sessionId === session.id) {
+      setMoveMenu(null)
+      return
+    }
+    const rect = (event.currentTarget as HTMLElement).getBoundingClientRect()
+    const popoverWidth = 220
+    const left = Math.min(rect.left, Math.max(10, window.innerWidth - popoverWidth - 10))
+    const top = rect.bottom + 6
+    setMoveMenu({
+      sessionId: session.id,
+      currentWorkspacePath: session.workspacePath || (session.id === activeConversationId && activeWorkspacePath ? activeWorkspacePath : null),
+      top,
+      left,
+    })
+  }
+
+  const [collapsedProjects, setCollapsedProjects] = useState<Record<string, boolean>>(() => {
+    if (typeof window === 'undefined') return {}
+    try {
+      const saved = localStorage.getItem('mint_collapsed_projects')
+      return saved ? JSON.parse(saved) : {}
+    } catch {
+      return {}
+    }
+  })
+
+  const [expandedShowMore, setExpandedShowMore] = useState<Record<string, boolean>>({})
+
+  const toggleProjectCollapse = (projectId: string) => {
+    setCollapsedProjects((prev) => {
+      const next = { ...prev, [projectId]: !prev[projectId] }
+      try {
+        localStorage.setItem('mint_collapsed_projects', JSON.stringify(next))
+      } catch {
+        // ignore
+      }
+      return next
+    })
   }
 
-  const toggleInteraction = () => {
-    const next = !interactionEnabled
-    onSetInteractionEnabled?.(next)
-    onShowToast?.(next ? 'Enable model interaction ⦸' : 'Disable model interaction ⦸')
+  const toggleShowMore = (projectId: string) => {
+    setExpandedShowMore((prev) => ({ ...prev, [projectId]: !prev[projectId] }))
   }
 
-  const conversationSessions = chatSessions.filter((session) => session.kind !== 'cli' && session.id !== 'conversation-default')
-  const cliSession = chatSessions.find((session) => session.kind === 'cli' || session.id === 'cli') ?? {
-    id: 'cli',
-    title: 'cli',
-    kind: 'cli',
+  const removeProjectFromSidebar = (projectId: string) => {
+    setRemovedProjectIds((previous) => {
+      const next = [...new Set([...previous, projectId])]
+      try { localStorage.setItem('mint_removed_sidebar_projects', JSON.stringify(next)) } catch { /* ignore */ }
+      return next
+    })
+    setProjectMenu(null)
   }
 
+  // Remember the last active CLI session so it remains pinned in the sidebar
+  // even when the user navigates away to a regular conversation!
+  const [pinnedCliId, setPinnedCliId] = useState<string | null>(() => {
+    return typeof window !== 'undefined' ? localStorage.getItem('mint_last_cli_session_id') : null
+  })
+
+  useEffect(() => {
+    if (activeConversationId.startsWith('cli') || activeConversationId === 'cli') {
+      setPinnedCliId(activeConversationId)
+      try {
+        localStorage.setItem('mint_last_cli_session_id', activeConversationId)
+      } catch {
+        // ignore
+      }
+    }
+  }, [activeConversationId])
+
+  const targetCliId = (activeConversationId.startsWith('cli') || activeConversationId === 'cli')
+    ? activeConversationId
+    : (pinnedCliId || cliSessions[0]?.id || null)
+
+  const pinnedCliSession = cliSessions.find((session) => session.id === targetCliId)
+
   return (
     <aside className={`workspace-sidebar ${isResizing ? 'is-resizing' : ''}`} ref={asideRef}>
       {!sidebarCollapsed && (
@@ -200,31 +436,36 @@ export default function DashboardSidebar({
           if (event.key === 'Enter' || event.key === ' ') onToggleSidebar()
         }}
       >
-        <img src={APP_ICON_PATH} alt="Mint Agent Logo" className="sidebar-logo" />
+        <img src={runtimePlatform.appIconPath()} alt="Mint Agent Logo" className="sidebar-logo" />
         <span className="sidebar-brand-name">Mint Agent</span>
       </div>
+      <button type="button" className="sidebar-mobile-close" aria-label="Close navigation menu" onClick={onToggleSidebar}>
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
+          <path d="M5 5l14 14M19 5L5 19" />
+        </svg>
+      </button>
 
-      <button className="sidebar-new-chat" onClick={() => onClearHistory('New chat')}>
+      <button className="sidebar-new-chat" onClick={() => onClearHistory('New chat')} title="New chat (Ctrl+N)">
         <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
           <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
             <line x1="12" y1="5" x2="12" y2="19"></line>
             <line x1="5" y1="12" x2="19" y2="12"></line>
           </svg>
         </span>
-        <span>New Chat</span>
+        <span>New chat</span>
       </button>
 
-      <button className="sidebar-top-action sidebar-search-btn" onClick={() => onSetSearchOpen(true)}>
+      <button className="sidebar-top-action sidebar-search-btn" onClick={() => onSetSearchOpen(true)} title="Search chats (Ctrl+K)">
         <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
           <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
             <circle cx="11" cy="11" r="8"></circle>
             <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
           </svg>
         </span>
-        <span>Search Chats</span>
+        <span>Search chats</span>
       </button>
 
-      <button className={`sidebar-top-action ${view === 'chat' ? 'is-active' : ''}`} onClick={() => onSetView('chat')}>
+      <button className={`sidebar-top-action ${view === 'chat' ? 'is-active' : ''}`} onClick={() => onSetView('chat')} title="Chat">
         <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
           <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
             <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
@@ -233,15 +474,13 @@ export default function DashboardSidebar({
         <span>Chat</span>
       </button>
 
-      <button className={`sidebar-top-action ${view === 'pictures' ? 'is-active' : ''}`} onClick={() => onSetView('pictures')}>
+      <button className={`sidebar-top-action ${view === 'pictures' ? 'is-active' : ''}`} onClick={() => onSetView('pictures')} title="Library">
         <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
           <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-            <circle cx="8.5" cy="8.5" r="1.5"></circle>
-            <polyline points="21 15 16 10 5 21"></polyline>
+            <path d="M4 4v16M8 8v12M12 6v14M16 6l4 14"></path>
           </svg>
         </span>
-        <span>Pictures</span>
+        <span>Library</span>
       </button>
       {promoteMediaStudios && (
         <>
@@ -271,7 +510,7 @@ export default function DashboardSidebar({
         </>
       )}
       {showWorkspaceTab && (
-        <button className={`sidebar-top-action ${view === 'workspace' ? 'is-active' : ''}`} onClick={() => onSetView('workspace')}>
+        <button className={`sidebar-top-action ${view === 'workspace' ? 'is-active' : ''}`} onClick={() => onSetView('workspace')} title="Workspace">
           <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
             <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
               <path d="M3 6h7l2 2h9v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"></path>
@@ -281,20 +520,8 @@ export default function DashboardSidebar({
           <span>Workspace</span>
         </button>
       )}
-      {onToggleModel && (
-        <button className={`sidebar-top-action ${modelVisible ? 'is-active' : ''}`} onClick={onToggleModel}>
-          <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
-            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
-              <circle cx="12" cy="7" r="4"></circle>
-            </svg>
-          </span>
-          <span>Live2D Model</span>
-        </button>
-      )}
-
       <div className="sidebar-more-container" ref={moreContainerRef}>
-        <button className={`sidebar-top-action ${isMoreOpen || (!promoteMediaStudios && (view === 'imagine' || view === 'veo')) || view === 'skills' || view === 'mcp' || view === 'plugins' || view === 'cron' || view === 'link' ? 'is-active' : ''}`} onClick={() => setIsMoreOpen(!isMoreOpen)}>
+        <button className={`sidebar-top-action ${isMoreOpen || (!promoteMediaStudios && (view === 'imagine' || view === 'veo')) || view === 'skills' || view === 'mcp' || view === 'plugins' || view === 'cron' || view === 'link' ? 'is-active' : ''}`} onClick={() => setIsMoreOpen(!isMoreOpen)} title="More" aria-expanded={isMoreOpen} aria-controls="sidebar-more-menu">
           <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
             <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
               <circle cx="12" cy="12" r="1.5"></circle>
@@ -305,14 +532,14 @@ export default function DashboardSidebar({
           <span>More</span>
         </button>
         {isMoreOpen && (
-          <div className="sidebar-more-popover" style={{ display: 'flex', flexDirection: 'column', gap: '4px', padding: '6px', minWidth: '160px' }}>
+          <div id="sidebar-more-menu" className="sidebar-more-popover" style={{ display: 'flex', flexDirection: 'column', gap: '4px', padding: '6px', minWidth: '160px' }}>
             <button className={`popover-item ${view === 'skills' ? 'active' : ''}`} onClick={() => { onSetView('skills'); setIsMoreOpen(false); }}>
               <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>{renderSkillsSvgIcon(15)}</span>
               <span>Skills</span>
             </button>
             <button className={`popover-item ${view === 'mcp' ? 'active' : ''}`} onClick={() => { onSetView('mcp'); setIsMoreOpen(false); }}>
               <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>{renderMcpHubSvgIcon(15)}</span>
-              <span>MCP Servers</span>
+              <span>MCP servers</span>
             </button>
             <button className={`popover-item ${view === 'plugins' ? 'active' : ''}`} onClick={() => { onSetView('plugins'); setIsMoreOpen(false); }}>
               <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>{renderPluginsSvgIcon(15)}</span>
@@ -320,11 +547,11 @@ export default function DashboardSidebar({
             </button>
             <button className={`popover-item ${view === 'cron' ? 'active' : ''}`} onClick={() => { onSetView('cron'); setIsMoreOpen(false); }}>
               <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>{renderScheduledTasksSvgIcon(15)}</span>
-              <span>Scheduled Tasks</span>
+              <span>Scheduled tasks</span>
             </button>
             <button className={`popover-item ${view === 'link' ? 'active' : ''}`} onClick={() => { onSetView('link'); setIsMoreOpen(false); }}>
               <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>{renderLinkedFoldersSvgIcon(15)}</span>
-              <span>Linked Folders</span>
+              <span>Linked folders</span>
             </button>
             {!promoteMediaStudios && (
               <button className={`popover-item ${view === 'imagine' ? 'active' : ''}`} onClick={() => { onSetView('imagine'); setIsMoreOpen(false); }}>
@@ -352,184 +579,492 @@ export default function DashboardSidebar({
       </div>
 
 
-      {modelVisible && (
-        <div className="sidebar-model-controls">
-          <button
-            className="change-expression-btn"
-            onClick={() => {
-              const next = (expressionIndex + 1) % expressions.length
-              onSetExpressionIndex?.(next)
-              onSetAccessoryIndex?.(0)
-              onShowToast?.(`Expression: ${expressions[next]}`)
-            }}
-          >
-            <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
-              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                <circle cx="12" cy="12" r="10"></circle>
-                <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
-                <line x1="9" y1="9" x2="9.01" y2="9"></line>
-                <line x1="15" y1="9" x2="15.01" y2="9"></line>
-              </svg>
-            </span>
-            <span>Expression</span>
-          </button>
+      {sidebarCollapsed ? (
+        <div className="sidebar-collapsed-sessions">
           <button
-            className="accessory-cycle-btn"
-            onClick={() => {
-              const next = (accessoryIndex + 1) % accessories.length
-              onSetAccessoryIndex?.(next)
-              onSetExpressionIndex?.(0)
-              onShowToast?.(`Accessory: ${accessories[next]}`)
-            }}
+            type="button"
+            className={`sidebar-collapsed-item ${view === 'code' ? 'is-active' : ''}`}
+            onClick={() => onSetView('code')}
+            title="Code sessions Hub"
+            aria-label="Code sessions Hub"
           >
-            <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
-              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                <path d="M12 12c-2-2.67-4-4-6-4a4 4 0 1 0 0 8c2 0 4-1.33 6-4Zm0 0c2 2.67 4 4 6 4a4 4 0 1 0 0-8c-2 0-4 1.33-6 4Z"></path>
-              </svg>
-            </span>
-            <span>Accessory</span>
-          </button>
-          <button className={`toggle-interaction-btn ${interactionEnabled ? 'active' : ''}`} onClick={toggleInteraction}>
-            <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
-              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                <path d="M18 11V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v5m-4 0V4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v7m-4 0V5a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v9M4 22V13a3 3 0 0 1 6 0v0M4 22h14a2 2 0 0 0 2-2V11a2 2 0 0 0-2-2h-2"></path>
-              </svg>
-            </span>
-            <span className="mint-status-label">Interact</span>
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <polyline points="4 17 10 11 4 5"></polyline>
+              <line x1="12" y1="19" x2="20" y2="19"></line>
+            </svg>
+            {view === 'code' && <span className="sidebar-collapsed-dot" />}
           </button>
-          <button className={`interaction-guide-btn ${showInteractionGuide ? 'active' : ''}`} onClick={toggleInteractionGuide}>
-            <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
-              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                <circle cx="12" cy="12" r="10"></circle>
-                <line x1="22" y1="12" x2="18" y2="12"></line>
-                <line x1="6" y1="12" x2="2" y2="12"></line>
-                <line x1="12" y1="6" x2="12" y2="2"></line>
-                <line x1="12" y1="22" x2="12" y2="18"></line>
+          {pinnedCliSession && (
+            <button
+              type="button"
+              className={`sidebar-collapsed-item ${pinnedCliSession.id === activeConversationId && view !== 'code' ? 'is-active' : ''}`}
+              onClick={() => onSelectConversation(pinnedCliSession.id)}
+              title={pinnedCliSession.title && pinnedCliSession.title !== 'cli' ? pinnedCliSession.title : 'Terminal Session'}
+              aria-label={pinnedCliSession.title && pinnedCliSession.title !== 'cli' ? pinnedCliSession.title : 'Terminal Session'}
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                <polyline points="4 17 10 11 4 5"></polyline>
+                <line x1="12" y1="19" x2="20" y2="19"></line>
               </svg>
-            </span>
-            <span>Areas</span>
-          </button>
+              {pinnedCliSession.id === activeConversationId && view !== 'code' && <span className="sidebar-collapsed-dot" />}
+            </button>
+          )}
+          {conversationSessions.slice(0, 25).map((session) => {
+            const isActive = session.id === activeConversationId && view !== 'code'
+            return (
+              <button
+                type="button"
+                key={session.id}
+                className={`sidebar-collapsed-item ${isActive ? 'is-active' : ''}`}
+                onClick={() => onSelectConversation(session.id)}
+                title={session.title || 'Chat'}
+                aria-label={session.title || 'Chat'}
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+                </svg>
+                {isActive && <span className="sidebar-collapsed-dot" />}
+              </button>
+            )
+          })}
         </div>
-      )}
-
-      <div className="sidebar-section">
-        <div className="sidebar-section-title">Conversation CLI</div>
+      ) : (
+        <div className="sidebar-section">
+          <div className="sidebar-section-title">Code</div>
         <div className="sidebar-chat-list sidebar-cli-list">
           <button
-            className={`sidebar-project sidebar-chat-item ${cliSession.id === activeConversationId ? 'active' : ''}`}
-            onClick={() => onSelectConversation(cliSession.id)}
-            title={cliSession.title}
+            className={`sidebar-project sidebar-chat-item ${view === 'code' ? 'active' : ''}`}
+            onClick={() => onSetView('code')}
+            title="Code sessions Hub"
           >
             <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
               <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                <path d="M4 17l6-6-6-6"></path>
-                <path d="M12 19h8"></path>
+                <polyline points="4 17 10 11 4 5"></polyline>
+                <line x1="12" y1="19" x2="20" y2="19"></line>
               </svg>
             </span>
-            <span className="sidebar-chat-title">{cliSession.title || 'cli'}</span>
-            {cliSession.id === activeConversationId && (
-              <span className="mint-status-pill" data-state={sending ? "thinking" : "idle"}>
-                <span className="mint-status-dot" />
-                <span className="mint-status-label">{sending ? "Thinking" : "Idle"}</span>
-              </span>
-            )}
+            <span className="sidebar-chat-title">Code hub</span>
+            <span
+              style={{
+                marginLeft: 'auto',
+                fontSize: '0.72rem',
+                fontWeight: 600,
+                padding: '1px 6px',
+                borderRadius: '10px',
+                background: 'rgba(255, 255, 255, 0.08)',
+                color: 'var(--text-muted, #94a3b8)',
+              }}
+            >
+              {cliSessions.length}
+            </span>
           </button>
-        </div>
-        <div className="sidebar-section-title sidebar-subsection-title">Conversations</div>
-        <div className="sidebar-chat-list">
-          {conversationSessions.map((session) => (
+
+          {pinnedCliSession && (
             <button
-              key={session.id}
-              className={`sidebar-project sidebar-chat-item ${session.id === activeConversationId ? 'active' : ''}`}
-              onClick={() => onSelectConversation(session.id)}
-              title={session.title}
+              className={`sidebar-project sidebar-chat-item ${pinnedCliSession.id === activeConversationId ? 'active' : ''}`}
+              onClick={() => onSelectConversation(pinnedCliSession.id)}
+              title={pinnedCliSession.title || 'Terminal Session'}
+              style={{ paddingLeft: '16px' }}
             >
-              <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
+              <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center', opacity: 0.85 }}>
                 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+                  <path d="M4 17l6-6-6-6"></path>
+                  <path d="M12 19h8"></path>
                 </svg>
               </span>
-              {editingSessionId === session.id ? (
-                <input
-                  type="text"
-                  className="sidebar-chat-rename-input"
-                  value={editTitleValue}
-                  onChange={(e) => setEditTitleValue(e.target.value)}
-                  onBlur={() => handleSaveRename(session.id)}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter') {
-                      handleSaveRename(session.id)
-                    } else if (e.key === 'Escape') {
-                      setEditingSessionId(null)
-                    }
-                  }}
-                  autoFocus
-                  onClick={(e) => e.stopPropagation()}
-                />
-              ) : (
-                <span className="sidebar-chat-title">{session.title || 'New chat'}</span>
-              )}
-              {session.id === activeConversationId && (
-                <span className="mint-status-pill" data-state={sending ? "thinking" : "idle"}>
-                  <span className="mint-status-dot" />
-                  <span className="mint-status-label">{sending ? "Thinking" : "Idle"}</span>
-                </span>
+              <span className="sidebar-chat-title">
+                {pinnedCliSession.title && pinnedCliSession.title !== 'cli'
+                  ? pinnedCliSession.title
+                  : (pinnedCliSession.id === 'cli' ? 'Terminal Session' : `cli::${pinnedCliSession.id.replace(/^cli::/, '').slice(0, 7)}`)}
+              </span>
+              {pinnedCliSession.id === activeConversationId && sending && (
+                <span className="sidebar-generating-text">Thinking...</span>
               )}
-              {editingSessionId !== session.id && (
-                <>
-                  <span
-                    className="sidebar-chat-edit"
-                    role="button"
-                    tabIndex={0}
-                    title="Rename conversation"
-                    onClick={(event) => {
-                      event.stopPropagation()
-                      setEditingSessionId(session.id)
-                      setEditTitleValue(session.title || '')
-                    }}
-                    onKeyDown={(event) => {
-                      if (event.key === 'Enter' || event.key === ' ') {
-                        event.preventDefault()
-                        event.stopPropagation()
-                        setEditingSessionId(session.id)
-                        setEditTitleValue(session.title || '')
-                      }
-                    }}
+            </button>
+          )}
+        </div>
+        {projectGroups.length > 0 && (
+          <>
+            <div className="sidebar-section-title sidebar-subsection-title">Projects</div>
+            <div className="sidebar-projects-list">
+              {projectGroups.map((group) => {
+                const isCollapsed = !!collapsedProjects[group.id]
+                const isExpanded = !!expandedShowMore[group.id]
+                const maxVisible = 3
+                const hasMore = group.sessions.length > maxVisible
+                const visibleSessions = (isExpanded || !hasMore)
+                  ? group.sessions
+                  : group.sessions.slice(0, maxVisible)
+
+                const isDragging = draggedProjectId === group.id
+                const isDragOver = dragOverProjectId === group.id
+
+                return (
+                  <div
+                    key={group.id}
+                    className={`sidebar-project-group ${isDragging ? 'is-dragging' : ''} ${isDragOver ? (dropPosition === 'before' ? 'drop-before' : 'drop-after') : ''}`}
+                    onDragOver={(e) => handleProjectDragOver(e, group.id)}
+                    onDragLeave={(e) => handleProjectDragLeave(e, group.id)}
+                    onDrop={(e) => handleProjectDrop(e, group.id)}
                   >
-                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.3" strokeLinecap="round" strokeLinejoin="round">
-                      <path d="M12 20h9"></path>
-                      <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
+                    <div
+                      role="button"
+                      tabIndex={0}
+                      className="sidebar-project-group-header"
+                      onClick={() => toggleProjectCollapse(group.id)}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          e.preventDefault()
+                          toggleProjectCollapse(group.id)
+                        }
+                      }}
+                      title={`${group.name} (${group.id}) - Drag to reorder`}
+                      draggable
+                      onDragStart={(e) => handleProjectDragStart(e, group.id)}
+                      onDragEnd={handleProjectDragEnd}
+                    >
+                      <span className="sidebar-project-group-left">
+                        <span className="sidebar-project-drag-grip" title="Drag to reorder" aria-hidden="true">
+                          <svg width="8" height="12" viewBox="0 0 8 12" fill="currentColor">
+                            <circle cx="2" cy="2" r="1.2" />
+                            <circle cx="6" cy="2" r="1.2" />
+                            <circle cx="2" cy="6" r="1.2" />
+                            <circle cx="6" cy="6" r="1.2" />
+                            <circle cx="2" cy="10" r="1.2" />
+                            <circle cx="6" cy="10" r="1.2" />
+                          </svg>
+                        </span>
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="14"
+                          height="14"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth="2"
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          className="sidebar-project-folder-icon"
+                        >
+                          {!isCollapsed ? (
+                            <>
+                              <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
+                              <polygon points="3 20 6 10 23 10 20 20 3 20" fill="currentColor" fillOpacity="0.15"></polygon>
+                            </>
+                          ) : (
+                            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
+                          )}
+                        </svg>
+                        <span className="sidebar-project-group-name">{group.name}</span>
+                      </span>
+                      <span className="sidebar-project-group-right">
+                        <button
+                          type="button"
+                          className="sidebar-project-menu-trigger"
+                          aria-label={`Project actions for ${group.name}`}
+                          aria-haspopup="menu"
+                          aria-expanded={projectMenu?.projectId === group.id}
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            const rect = e.currentTarget.getBoundingClientRect()
+                            setProjectMenu(projectMenu?.projectId === group.id ? null : { projectId: group.id, top: Math.min(rect.bottom + 4, window.innerHeight - 120), left: Math.max(8, Math.min(rect.right - 190, window.innerWidth - 198)) })
+                          }}
+                          onKeyDown={(e) => e.stopPropagation()}
+                        >
+                          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="12" r="1.8" /><circle cx="12" cy="12" r="1.8" /><circle cx="19" cy="12" r="1.8" /></svg>
+                        </button>
+                        <span className="sidebar-project-group-count">{group.sessions.length}</span>
+                        <span
+                          className="sidebar-project-group-chevron"
+                          style={{
+                            transform: isCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)',
+                            transition: 'transform 0.18s ease'
+                          }}
+                        >
+                          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                            <polyline points="6 9 12 15 18 9"></polyline>
+                          </svg>
+                        </span>
+                      </span>
+                    </div>
+                    {projectMenu?.projectId === group.id && (
+                      <div className="sidebar-project-menu-popover" role="menu" style={{ top: projectMenu.top, left: projectMenu.left }} onClick={(e) => e.stopPropagation()}>
+                        {onNewChatInProject && <button type="button" role="menuitem" onClick={() => { setCollapsedProjects((prev) => ({ ...prev, [group.id]: false })); onNewChatInProject(group.id); setProjectMenu(null) }}><Plus className="sidebar-menu-icon" size={14} aria-hidden="true" /><span>New chat in project</span></button>}
+                        <button type="button" role="menuitem" className="is-destructive" onClick={() => removeProjectFromSidebar(group.id)}><FolderMinus className="sidebar-menu-icon" size={14} aria-hidden="true" /><span>Remove from sidebar</span></button>
+                      </div>
+                    )}
+                    {!isCollapsed && (
+                      <div className="sidebar-project-sessions">
+                        {visibleSessions.map((session) => (
+                          <button
+                            key={session.id}
+                            className={`sidebar-project sidebar-chat-item is-indented ${session.id === activeConversationId ? 'active' : ''}`}
+                            onClick={() => onSelectConversation(session.id)}
+                            title={session.title}
+                          >
+                            <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
+                              <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.3" strokeLinecap="round" strokeLinejoin="round">
+                                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+                              </svg>
+                            </span>
+                            {editingSessionId === session.id ? (
+                              <input
+                                type="text"
+                                className="sidebar-chat-rename-input"
+                                value={editTitleValue}
+                                onChange={(e) => setEditTitleValue(e.target.value)}
+                                onBlur={() => handleSaveRename(session.id)}
+                                onKeyDown={(e) => {
+                                  if (e.key === 'Enter') {
+                                    handleSaveRename(session.id)
+                                  } else if (e.key === 'Escape') {
+                                    setEditingSessionId(null)
+                                  }
+                                }}
+                                autoFocus
+                                onClick={(e) => e.stopPropagation()}
+                              />
+                            ) : (
+                              <span className="sidebar-chat-title">{session.title || 'New chat'}</span>
+                            )}
+                            {session.id === activeConversationId && sending && (
+                              <span className="sidebar-generating-text">Thinking...</span>
+                            )}
+                            {editingSessionId !== session.id && (
+                              <>
+                                <span role="button" tabIndex={0} className="sidebar-conversation-menu-trigger" aria-label={`Actions for ${session.title || 'conversation'}`} onClick={(event) => {
+                                  event.stopPropagation()
+                                  const rect = event.currentTarget.getBoundingClientRect()
+                                  setConversationMenu({ sessionId: session.id, top: Math.min(rect.bottom + 4, window.innerHeight - 120), left: Math.max(8, Math.min(rect.right - 190, window.innerWidth - 198)) })
+                                }} onKeyDown={(event) => {
+                                  if (event.key === 'Enter' || event.key === ' ') {
+                                    event.preventDefault(); event.stopPropagation()
+                                    const rect = event.currentTarget.getBoundingClientRect()
+                                    setConversationMenu({ sessionId: session.id, top: Math.min(rect.bottom + 4, window.innerHeight - 120), left: Math.max(8, Math.min(rect.right - 190, window.innerWidth - 198)) })
+                                  }
+                                }}><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="12" r="1.8" /><circle cx="12" cy="12" r="1.8" /><circle cx="19" cy="12" r="1.8" /></svg></span>
+                                <span
+                                  className="sidebar-chat-edit"
+                                  role="button"
+                                  tabIndex={0}
+                                  title="Rename conversation"
+                                  onClick={(event) => {
+                                    event.stopPropagation()
+                                    setEditingSessionId(session.id)
+                                    setEditTitleValue(session.title || '')
+                                  }}
+                                  onKeyDown={(event) => {
+                                    if (event.key === 'Enter' || event.key === ' ') {
+                                      event.preventDefault()
+                                      event.stopPropagation()
+                                      setEditingSessionId(session.id)
+                                      setEditTitleValue(session.title || '')
+                                    }
+                                  }}
+                                >
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.3" strokeLinecap="round" strokeLinejoin="round">
+                                    <path d="M12 20h9"></path>
+                                    <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
+                                  </svg>
+                                </span>
+                                {onUpdateSessionWorkspace && (
+                                  <span
+                                    className="sidebar-chat-edit"
+                                    role="button"
+                                    tabIndex={0}
+                                    title="Move conversation..."
+                                    onClick={(event) => openMoveMenu(event, session)}
+                                    onKeyDown={(event) => {
+                                      if (event.key === 'Enter' || event.key === ' ') {
+                                        event.preventDefault()
+                                        openMoveMenu(event as any, session)
+                                      }
+                                    }}
+                                  >
+                                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.3" strokeLinecap="round" strokeLinejoin="round">
+                                      <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
+                                      <polyline points="12 11 12 17"></polyline>
+                                      <polyline points="9 14 12 11 15 14"></polyline>
+                                    </svg>
+                                  </span>
+                                )}
+                                <span
+                                  className="sidebar-chat-delete"
+                                  role="button"
+                                  tabIndex={0}
+                                  title="Delete conversation"
+                                  onClick={(event) => {
+                                    event.stopPropagation()
+                                    onDeleteConversation(session.id)
+                                  }}
+                                  onKeyDown={(event) => {
+                                    if (event.key === 'Enter' || event.key === ' ') {
+                                      event.preventDefault()
+                                      event.stopPropagation()
+                                      onDeleteConversation(session.id)
+                                    }
+                                  }}
+                                >
+                                  <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.3" strokeLinecap="round" strokeLinejoin="round">
+                                    <polyline points="3 6 5 6 21 6"></polyline>
+                                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path>
+                                    <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+                                  </svg>
+                                </span>
+                              </>
+                            )}
+                          </button>
+                        ))}
+                        {hasMore && (
+                          <button
+                            type="button"
+                            className="sidebar-show-more-btn"
+                            onClick={() => toggleShowMore(group.id)}
+                          >
+                            <span>{isExpanded ? 'Show less' : `Show more (${group.sessions.length - maxVisible})`}</span>
+                            <ChevronDown className={isExpanded ? 'is-expanded' : ''} size={13} aria-hidden="true" />
+                          </button>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          </>
+        )}
+
+        {(recentSessions.length > 0 || projectGroups.length === 0) && (
+          <>
+            <div className="sidebar-section-title sidebar-subsection-title">
+              {projectGroups.length > 0 ? 'Recents' : 'Conversations'}
+            </div>
+            <div className="sidebar-chat-list">
+              {recentSessions.map((session) => (
+                <button
+                  key={session.id}
+                  className={`sidebar-project sidebar-chat-item ${session.id === activeConversationId ? 'active' : ''}`}
+                  onClick={() => onSelectConversation(session.id)}
+                  title={session.title}
+                >
+                  <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                     </svg>
                   </span>
-                  <span
-                    className="sidebar-chat-delete"
-                    role="button"
-                    tabIndex={0}
-                    title="Delete conversation"
-                    onClick={(event) => {
-                      event.stopPropagation()
-                      onDeleteConversation(session.id)
-                    }}
-                    onKeyDown={(event) => {
-                      if (event.key === 'Enter' || event.key === ' ') {
-                        event.preventDefault()
+                  {editingSessionId === session.id ? (
+                    <input
+                      type="text"
+                      className="sidebar-chat-rename-input"
+                      value={editTitleValue}
+                      onChange={(e) => setEditTitleValue(e.target.value)}
+                      onBlur={() => handleSaveRename(session.id)}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                          handleSaveRename(session.id)
+                        } else if (e.key === 'Escape') {
+                          setEditingSessionId(null)
+                        }
+                      }}
+                      autoFocus
+                      onClick={(e) => e.stopPropagation()}
+                    />
+                  ) : (
+                    <span className="sidebar-chat-title">{session.title || 'New chat'}</span>
+                  )}
+                  {session.id === activeConversationId && sending && (
+                    <span className="sidebar-generating-text">Thinking...</span>
+                  )}
+                  {editingSessionId !== session.id && (
+                    <>
+                      <span role="button" tabIndex={0} className="sidebar-conversation-menu-trigger" aria-label={`Actions for ${session.title || 'conversation'}`} onClick={(event) => {
                         event.stopPropagation()
-                        onDeleteConversation(session.id)
-                      }
-                    }}
-                  >
-                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.3" strokeLinecap="round" strokeLinejoin="round">
-                      <polyline points="3 6 5 6 21 6"></polyline>
-                      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path>
-                      <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
-                    </svg>
-                  </span>
-                </>
-              )}
-            </button>
-          ))}
-        </div>
+                        const rect = event.currentTarget.getBoundingClientRect()
+                        setConversationMenu({ sessionId: session.id, top: Math.min(rect.bottom + 4, window.innerHeight - 120), left: Math.max(8, Math.min(rect.right - 190, window.innerWidth - 198)) })
+                      }} onKeyDown={(event) => {
+                        if (event.key === 'Enter' || event.key === ' ') {
+                          event.preventDefault(); event.stopPropagation()
+                          const rect = event.currentTarget.getBoundingClientRect()
+                          setConversationMenu({ sessionId: session.id, top: Math.min(rect.bottom + 4, window.innerHeight - 120), left: Math.max(8, Math.min(rect.right - 190, window.innerWidth - 198)) })
+                        }
+                      }}><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="5" cy="12" r="1.8" /><circle cx="12" cy="12" r="1.8" /><circle cx="19" cy="12" r="1.8" /></svg></span>
+                      <span
+                        className="sidebar-chat-edit"
+                        role="button"
+                        tabIndex={0}
+                        title="Rename conversation"
+                        onClick={(event) => {
+                          event.stopPropagation()
+                          setEditingSessionId(session.id)
+                          setEditTitleValue(session.title || '')
+                        }}
+                        onKeyDown={(event) => {
+                          if (event.key === 'Enter' || event.key === ' ') {
+                            event.preventDefault()
+                            event.stopPropagation()
+                            setEditingSessionId(session.id)
+                            setEditTitleValue(session.title || '')
+                          }
+                        }}
+                      >
+                        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.3" strokeLinecap="round" strokeLinejoin="round">
+                          <path d="M12 20h9"></path>
+                          <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
+                        </svg>
+                      </span>
+                      {onUpdateSessionWorkspace && (
+                        <span
+                          className="sidebar-chat-edit"
+                          role="button"
+                          tabIndex={0}
+                          title="Move conversation..."
+                          onClick={(event) => openMoveMenu(event, session)}
+                          onKeyDown={(event) => {
+                            if (event.key === 'Enter' || event.key === ' ') {
+                              event.preventDefault()
+                              openMoveMenu(event as any, session)
+                            }
+                          }}
+                        >
+                          <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.3" strokeLinecap="round" strokeLinejoin="round">
+                            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
+                            <polyline points="12 11 12 17"></polyline>
+                            <polyline points="9 14 12 11 15 14"></polyline>
+                          </svg>
+                        </span>
+                      )}
+                      <span
+                        className="sidebar-chat-delete"
+                        role="button"
+                        tabIndex={0}
+                        title="Delete conversation"
+                        onClick={(event) => {
+                          event.stopPropagation()
+                          onDeleteConversation(session.id)
+                        }}
+                        onKeyDown={(event) => {
+                          if (event.key === 'Enter' || event.key === ' ') {
+                            event.preventDefault()
+                            event.stopPropagation()
+                            onDeleteConversation(session.id)
+                          }
+                        }}
+                      >
+                        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.3" strokeLinecap="round" strokeLinejoin="round">
+                          <polyline points="3 6 5 6 21 6"></polyline>
+                          <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path>
+                          <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
+                        </svg>
+                      </span>
+                    </>
+                  )}
+                </button>
+              ))}
+            </div>
+          </>
+        )}
       </div>
+      )}
 
       {user && (
         <div className="sidebar-account-container" ref={accountContainerRef}>
@@ -553,7 +1088,7 @@ export default function DashboardSidebar({
               </button>
               <button className={`popover-item ${view === 'mcp' ? 'active' : ''}`} onClick={() => { onSetView('mcp'); setIsAccountMenuOpen(false); }}>
                 <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>{renderMcpHubSvgIcon(15)}</span>
-                <span>MCP Servers</span>
+                <span>MCP servers</span>
               </button>
               <button className={`popover-item ${view === 'plugins' ? 'active' : ''}`} onClick={() => { onSetView('plugins'); setIsAccountMenuOpen(false); }}>
                 <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>{renderPluginsSvgIcon(15)}</span>
@@ -561,11 +1096,11 @@ export default function DashboardSidebar({
               </button>
               <button className={`popover-item ${view === 'cron' ? 'active' : ''}`} onClick={() => { onSetView('cron'); setIsAccountMenuOpen(false); }}>
                 <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>{renderScheduledTasksSvgIcon(15)}</span>
-                <span>Scheduled Tasks</span>
+                <span>Scheduled tasks</span>
               </button>
               <button className={`popover-item ${view === 'link' ? 'active' : ''}`} onClick={() => { onSetView('link'); setIsAccountMenuOpen(false); }}>
                 <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>{renderLinkedFoldersSvgIcon(15)}</span>
-                <span>Linked Folders</span>
+                <span>Linked folders</span>
               </button>
               <div className="sidebar-account-menu-divider" />
               <button className="popover-item" onClick={() => { setIsAccountMenuOpen(false); logout(); }}>
@@ -599,6 +1134,95 @@ export default function DashboardSidebar({
           </button>
         </div>
       )}
+
+      {moveMenu && (
+        <div
+          ref={moveMenuRef}
+          className="sidebar-move-popover"
+          style={{
+            position: 'fixed',
+            top: `${moveMenu.top}px`,
+            left: `${moveMenu.left}px`,
+            zIndex: 99999,
+          }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <div className="sidebar-move-header">Move to Project</div>
+          <div className="sidebar-move-list">
+            {availableProjects.map((p) => {
+              const isCurrent = moveMenu.currentWorkspacePath === p.path
+              return (
+                <button
+                  key={p.path}
+                  type="button"
+                  className={`sidebar-move-item ${isCurrent ? 'is-current' : ''}`}
+                  onClick={() => {
+                    onUpdateSessionWorkspace?.(moveMenu.sessionId, p.path)
+                    setMoveMenu(null)
+                  }}
+                  title={p.path}
+                >
+                  <span className="sidebar-move-item-icon"><Folder size={14} aria-hidden="true" /></span>
+                  <span className="sidebar-move-item-name">{p.name}</span>
+                  {isCurrent && <span className="sidebar-move-item-check"><Check size={14} aria-hidden="true" /></span>}
+                </button>
+              )
+            })}
+          </div>
+
+          <div className="sidebar-move-divider" />
+
+          <button
+            type="button"
+            className={`sidebar-move-item ${!moveMenu.currentWorkspacePath ? 'is-current' : ''}`}
+            onClick={() => {
+              onUpdateSessionWorkspace?.(moveMenu.sessionId, null)
+              setMoveMenu(null)
+            }}
+          >
+            <span className="sidebar-move-item-icon">
+              <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.3" strokeLinecap="round" strokeLinejoin="round">
+                <polyline points="9 14 4 9 9 4"></polyline>
+                <path d="M20 20v-7a4 4 0 0 0-4-4H4"></path>
+              </svg>
+            </span>
+            <span className="sidebar-move-item-name">Recents (No project)</span>
+            {!moveMenu.currentWorkspacePath && <span className="sidebar-move-item-check"><Check size={14} aria-hidden="true" /></span>}
+          </button>
+
+          {onBrowseFolder && (
+            <button
+              type="button"
+              className="sidebar-move-item"
+              onClick={async () => {
+                const picked = await onBrowseFolder()
+                if (picked) {
+                  onUpdateSessionWorkspace?.(moveMenu.sessionId, picked)
+                }
+                setMoveMenu(null)
+              }}
+            >
+              <span className="sidebar-move-item-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.3" strokeLinecap="round" strokeLinejoin="round">
+                  <line x1="12" y1="5" x2="12" y2="19"></line>
+                  <line x1="5" y1="12" x2="19" y2="12"></line>
+                </svg>
+              </span>
+              <span className="sidebar-move-item-name">Choose folder...</span>
+            </button>
+          )}
+        </div>
+      )}
+
+      {conversationMenu && (() => {
+        const session = conversationSessions.find((item) => item.id === conversationMenu.sessionId)
+        if (!session) return null
+        return <div className="sidebar-conversation-menu-popover" role="menu" style={{ top: conversationMenu.top, left: conversationMenu.left }} onClick={(event) => event.stopPropagation()}>
+          <button type="button" role="menuitem" onClick={() => { setEditingSessionId(session.id); setEditTitleValue(session.title || ''); setConversationMenu(null) }}><Pencil className="sidebar-menu-icon" size={14} aria-hidden="true" /><span>Rename</span></button>
+          {onUpdateSessionWorkspace && <button type="button" role="menuitem" onClick={(event) => { setConversationMenu(null); openMoveMenu(event as any, session) }}><FolderInput className="sidebar-menu-icon" size={14} aria-hidden="true" /><span>Move to project</span></button>}
+          <button type="button" role="menuitem" className="is-destructive" onClick={() => { onDeleteConversation(session.id); setConversationMenu(null) }}><Trash2 className="sidebar-menu-icon" size={14} aria-hidden="true" /><span>Delete conversation</span></button>
+        </div>
+      })()}
     </aside>
   )
 }