@bibobonking/opensol 3.0.2 → 3.1.0

package/src/components/SessionsTab.tsx

@@ -0,0 +1,206 @@
+import { useMemo, useState } from 'react'
+import { Check, MessagesSquare, Pencil, Plus, Sparkles, Trash2 } from 'lucide-react'
+import { useChats } from '../store/chats'
+import { useRuntime, useUi } from '../store/ui'
+import { useWorkspace } from '../store/workspace'
+import { stopRun } from '../agent'
+import { kernel } from '../core/kernel'
+import { cn, formatRelativeTime } from '../lib/utils'
+import type { ChatSession } from '../types'
+
+function messageCount(session: ChatSession) {
+  return session.messages.filter((message) => message.role === 'user').length
+}
+
+function editedFiles(session: ChatSession) {
+  const files = new Set<string>()
+  for (const message of session.messages) {
+    if (message.role !== 'tool' || message.status !== 'done') continue
+    if (!['write_file', 'edit_file', 'rewrite_file'].includes(message.call.name)) continue
+    const path = message.call.args.path
+    if (typeof path === 'string') files.add(path)
+  }
+  return files.size
+}
+
+/** Sessions that belong to the open workspace, with quick rename / AI title / delete. */
+export function SessionsTab() {
+  const sessions = useChats((state) => state.sessions)
+  const activeId = useChats((state) => state.activeId)
+  const setActive = useChats((state) => state.setActive)
+  const newChat = useChats((state) => state.newChat)
+  const renameSession = useChats((state) => state.renameSession)
+  const deleteSession = useChats((state) => state.deleteSession)
+  const root = useWorkspace((state) => state.info.root)
+  const streaming = useRuntime((state) => state.streaming)
+  const titling = useRuntime((state) => state.titling)
+  const askConfirm = useUi((state) => state.askConfirm)
+  const notify = useUi((state) => state.notify)
+  const focusComposer = useUi((state) => state.focusComposer)
+
+  const [scope, setScope] = useState<'workspace' | 'all'>('workspace')
+  const [editingId, setEditingId] = useState<string | null>(null)
+  const [draft, setDraft] = useState('')
+
+  const shown = useMemo(() => {
+    const list = scope === 'all' ? sessions : sessions.filter((session) => session.workspace === root)
+    return [...list].sort((a, b) => b.updatedAt - a.updatedAt)
+  }, [sessions, scope, root])
+  const untagged = sessions.filter((session) => !session.workspace).length
+
+  const commit = () => {
+    if (editingId && draft.trim()) renameSession(editingId, draft)
+    setEditingId(null)
+  }
+
+  const remove = async (session: ChatSession) => {
+    const confirmed = await askConfirm({
+      title: 'Delete this session?',
+      body: `“${session.title}” and its messages will be removed from this computer. This cannot be undone.`,
+      confirmLabel: 'Delete session',
+      tone: 'danger',
+    })
+    if (!confirmed) return
+    stopRun(session.id)
+    deleteSession(session.id)
+  }
+
+  const aiName = async (id: string) => {
+    const title = await kernel.titles?.generate(id, { force: true })
+    if (!title) notify('The model could not suggest a title right now.', 'error')
+  }
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="flex shrink-0 items-center gap-2 border-b border-line px-3 py-2.5">
+        <div className="relative flex rounded-full bg-raised p-0.5 text-[10.5px] font-medium">
+          {(['workspace', 'all'] as const).map((item) => (
+            <button
+              key={item}
+              type="button"
+              onClick={() => setScope(item)}
+              className={cn(
+                'relative z-10 rounded-full px-2.5 py-1 transition-colors',
+                scope === item ? 'bg-panel text-ink shadow-pill' : 'text-muted hover:text-ink',
+              )}
+            >
+              {item === 'workspace' ? 'This workspace' : `All · ${sessions.length}`}
+            </button>
+          ))}
+        </div>
+        <button
+          type="button"
+          onClick={() => {
+            newChat()
+            focusComposer()
+          }}
+          className="ml-auto inline-flex h-7 items-center gap-1 rounded-full bg-ink px-2.5 text-[10.5px] font-medium text-panel transition-transform active:scale-95"
+        >
+          <Plus size={12} /> New
+        </button>
+      </div>
+
+      <div className="thin-scroll min-h-0 flex-1 overflow-y-auto p-2">
+        {shown.length === 0 ? (
+          <div className="px-4 py-10 text-center">
+            <MessagesSquare size={22} className="mx-auto text-faint" />
+            <p className="mt-2 text-[12px] font-medium text-ink">No sessions here yet</p>
+            <p className="mt-1 text-[10.5px] leading-relaxed text-faint">
+              {scope === 'workspace' && untagged > 0
+                ? `${untagged} older session${untagged === 1 ? '' : 's'} were started before workspaces were tracked. Switch to “All” to see them.`
+                : 'Start a conversation and it shows up here.'}
+            </p>
+          </div>
+        ) : (
+          shown.map((session, index) => {
+            const running = Boolean(streaming[session.id])
+            const edits = editedFiles(session)
+            return (
+              <div
+                key={session.id}
+                style={{ animationDelay: `${Math.min(index * 30, 300)}ms` }}
+                className={cn(
+                  'session-card group/session animate-slideleft mb-1.5 rounded-xl border px-3 py-2.5 transition-all duration-200',
+                  activeId === session.id ? 'border-accent/40 bg-accent-soft/60' : 'border-transparent hover:border-line hover:bg-raised/60',
+                )}
+              >
+                {editingId === session.id ? (
+                  <input
+                    autoFocus
+                    value={draft}
+                    onChange={(event) => setDraft(event.target.value)}
+                    onBlur={commit}
+                    onKeyDown={(event) => {
+                      if (event.key === 'Enter') commit()
+                      if (event.key === 'Escape') setEditingId(null)
+                    }}
+                    className="h-7 w-full rounded-md border border-accent/50 bg-panel px-2 text-[12px] text-ink outline-none"
+                    aria-label="Rename session"
+                  />
+                ) : (
+                  <button type="button" onClick={() => setActive(session.id)} className="block w-full text-left">
+                    <span className="flex items-center gap-2">
+                      {activeId === session.id && <Check size={12} className="shrink-0 text-accent" />}
+                      <span className={cn('min-w-0 flex-1 truncate text-[12.5px] font-medium text-ink', titling[session.id] && 'text-shimmer')}>
+                        {session.title}
+                      </span>
+                      {running && (
+                        <span className="flex shrink-0 items-center gap-1 text-[10px] font-medium text-accent">
+                          <span className="h-1.5 w-1.5 animate-breathe rounded-full bg-accent" /> running
+                        </span>
+                      )}
+                    </span>
+                    <span className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[10px] text-faint">
+                      <span>{formatRelativeTime(session.updatedAt)}</span>
+                      <span>· {messageCount(session)} turn{messageCount(session) === 1 ? '' : 's'}</span>
+                      {edits > 0 && <span>· {edits} file{edits === 1 ? '' : 's'} edited</span>}
+                      {session.model && <span className="max-w-[120px] truncate font-mono">· {session.model}</span>}
+                      {session.titleSource === 'ai' && (
+                        <span className="inline-flex items-center gap-0.5 text-accent/80">
+                          <Sparkles size={9} /> AI title
+                        </span>
+                      )}
+                    </span>
+                  </button>
+                )}
+                <div className="mt-1.5 flex items-center gap-0.5 opacity-0 transition-opacity group-hover/session:opacity-100 focus-within:opacity-100">
+                  <button
+                    type="button"
+                    className="icon-button h-6 w-6"
+                    onClick={() => {
+                      setEditingId(session.id)
+                      setDraft(session.title)
+                    }}
+                    title="Rename"
+                    aria-label="Rename session"
+                  >
+                    <Pencil size={11} />
+                  </button>
+                  <button
+                    type="button"
+                    className="icon-button h-6 w-6"
+                    onClick={() => void aiName(session.id)}
+                    disabled={Boolean(titling[session.id]) || session.messages.length === 0}
+                    title="Let the model name this session"
+                    aria-label="Name session with AI"
+                  >
+                    <Sparkles size={11} />
+                  </button>
+                  <button
+                    type="button"
+                    className="icon-button h-6 w-6 hover:!text-danger"
+                    onClick={() => void remove(session)}
+                    title="Delete"
+                    aria-label="Delete session"
+                  >
+                    <Trash2 size={11} />
+                  </button>
+                </div>
+              </div>
+            )
+          })
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/SettingsModal.tsx

@@ -39,7 +39,7 @@ import {
   Wrench,
   X,
 } from 'lucide-react'
-import type { DeployProviderId, Effort, ModelInfo, ProviderId, SearchProvider, Skill, ToolName } from '../types'
+import type { DeployProviderId, Effort, ModelInfo, ProviderId, SearchProvider, Skill, BuiltinToolName } from '../types'
 import type { LucideIcon } from 'lucide-react'
 import { EFFORT_LABELS, PROVIDERS, PROVIDER_MAP } from '../data/providers'
 import { STARTER_SKILL } from '../data/skills'
@@ -61,6 +61,7 @@ import { PERMISSION_MODES, permissionMode, permissionTools } from '../lib/permis
 import { cn, formatBytes, readFileAsText } from '../lib/utils'
 import { LogoMark } from './Logo'
 import { PluginManager } from './PluginManager'
+import { McpTab } from './McpTab'
 import { pluginRuntime } from '../plugins'
 import { Modal, Segmented, Spinner, Switch } from './ui'
 
@@ -71,6 +72,7 @@ const TABS = [
   { id: 'search', label: 'Search', icon: Globe2, description: 'Give the agent current web results with your own key.' },
   { id: 'skills', label: 'Skills', icon: Sparkles, description: 'Instructions added to every request when enabled.' },
   { id: 'plugins', label: 'Plugins', icon: Package, description: 'Install local plugin packages, review what they ask for, and run them once you trust the code.' },
+  { id: 'mcp', label: 'MCP', icon: Link2, description: 'Connect Model Context Protocol servers and choose which of their tools the agent may call.' },
   { id: 'deploy', label: 'Deploy', icon: Rocket, description: 'Hosting credentials and command-line tools.' },
   { id: 'appearance', label: 'Appearance', icon: Palette, description: 'Theme and interface preferences.' },
   { id: 'about', label: 'About', icon: Info, description: 'Local storage, history and reset controls.' },
@@ -100,15 +102,18 @@ function SettingsSection({
   action?: ReactNode
 }) {
   return (
-    <section className="border-b border-line px-5 py-5 last:border-b-0 sm:px-7">
+    <section className="settings-card mx-5 my-4 sm:mx-8">
       <div className="flex items-start justify-between gap-3">
         <div className="min-w-0">
-          <h3 className="font-display text-[14px] font-semibold tracking-[-0.01em] text-ink">{title}</h3>
-          {description && <p className="mt-1 max-w-[620px] text-[11px] leading-relaxed text-muted">{description}</p>}
+          <h3 className="flex items-center gap-2 font-display text-[14px] font-semibold tracking-[-0.01em] text-ink">
+            <span className="h-3.5 w-[3px] rounded-full bg-accent" />
+            {title}
+          </h3>
+          {description && <p className="mt-1.5 max-w-[620px] text-[11.5px] leading-relaxed text-muted">{description}</p>}
         </div>
         {action && <div className="shrink-0">{action}</div>}
       </div>
-      <div className="mt-3.5">{children}</div>
+      <div className="mt-4">{children}</div>
     </section>
   )
 }
@@ -636,7 +641,7 @@ function ModelsTab() {
   )
 }
 
-const TOOL_ORDER: Array<{ title: string; tools: ToolName[] }> = [
+const TOOL_ORDER: Array<{ title: string; tools: BuiltinToolName[] }> = [
   {
     title: 'Workspace and shell',
     tools: ['read_file', 'list_files', 'grep', 'write_file', 'edit_file', 'rewrite_file', 'shell', 'git'],
@@ -645,7 +650,7 @@ const TOOL_ORDER: Array<{ title: string; tools: ToolName[] }> = [
   { title: 'Delegation', tools: ['subagent'] },
 ]
 
-const TOOL_ICONS: Record<ToolName, LucideIcon> = {
+const TOOL_ICONS: Record<BuiltinToolName, LucideIcon> = {
   shell: SquareTerminal,
   read_file: FileText,
   list_files: FolderTree,
@@ -659,7 +664,7 @@ const TOOL_ICONS: Record<ToolName, LucideIcon> = {
   subagent: Bot,
 }
 
-const TOOL_COPY: Record<ToolName, { label: string; description: string }> = {
+const TOOL_COPY: Record<BuiltinToolName, { label: string; description: string }> = {
   shell: { label: 'Shell', description: 'Run commands in the workspace root. Plan mode allows read-only commands only.' },
   read_file: { label: 'Read file', description: 'Inspect a file on disk before changing it.' },
   list_files: { label: 'List files', description: 'Explore the real workspace tree.' },
@@ -1604,6 +1609,18 @@ function GeneralTab() {
         </select>
       </div>
 
+      <div className="settings-row">
+        <div className="min-w-0">
+          <p className="settings-label">Let AI name sessions</p>
+          <p className="settings-hint">After the first answer, the model writes a short title for the session. Names you type yourself are never replaced.</p>
+        </div>
+        <Switch
+          checked={settings.aiSessionTitles}
+          onChange={(aiSessionTitles) => update({ aiSessionTitles })}
+          label="Let AI name sessions"
+        />
+      </div>
+
       <div className="settings-row">
         <div className="min-w-0">
           <p className="settings-label">Show token estimates</p>
@@ -1941,13 +1958,15 @@ export function SettingsModal() {
   const notify = useUi((state) => state.notify)
   const daemon = useSettings((state) => state.daemon)
   const contentRef = useRef<HTMLDivElement>(null)
+  const activeIndex = Math.max(0, TABS.findIndex((item) => item.id === tab))
+  const current = TABS[activeIndex]
 
   useEffect(() => {
     if (open) contentRef.current?.scrollTo({ top: 0 })
   }, [open, tab])
 
   const copyConfig = async () => {
-    const path = daemon?.dataDir ?? '~/.maxcode'
+    const path = daemon?.dataDir ?? '~/.opensol'
     try {
       await navigator.clipboard.writeText(path)
       notify(`Copied the data folder path: ${path}`, 'success')
@@ -1961,85 +1980,103 @@ export function SettingsModal() {
       open={open}
       onClose={close}
       labelledBy="settings-title"
-      className="h-[92dvh] p-0 sm:h-[min(88dvh,780px)] sm:w-[min(980px,94vw)]"
+      className="settings-shell h-[94dvh] p-0 sm:h-[min(88dvh,780px)] sm:w-[min(1040px,96vw)] sm:!rounded-[28px]"
     >
-      <div className="flex min-h-0 flex-1 flex-col">
-        <div className="flex h-14 shrink-0 items-center justify-between gap-3 border-b border-line px-4 sm:px-5">
-          <h2 id="settings-title" className="text-[16px] font-semibold tracking-[-0.02em] text-ink">
-            Settings
-          </h2>
-          <div className="flex shrink-0 items-center gap-1.5">
-            <button
-              type="button"
-              onClick={() => void copyConfig()}
-              className="hidden h-8 items-center gap-1.5 rounded-lg border border-line bg-panel px-2.5 text-[11px] font-medium text-ink transition-colors hover:bg-raised sm:inline-flex"
-              title={daemon?.dataDir ?? '~/.maxcode'}
-            >
-              <HardDrive size={12} />
-              Data folder
-            </button>
-            <button type="button" className="icon-button" onClick={close} aria-label="Close settings">
-              <X size={16} />
-            </button>
+      <div className="flex min-h-0 flex-1 flex-col sm:flex-row">
+        <aside className="relative hidden w-[232px] shrink-0 flex-col bg-canvas sm:flex">
+          <div className="settings-glow pointer-events-none absolute inset-x-0 top-0 h-48" />
+          <div className="relative px-6 pb-4 pt-6">
+            <p className="font-mono text-[10px] uppercase tracking-[0.24em] text-faint">OpenSol · v3.1.0</p>
+            <h2 id="settings-title" className="mt-1.5 font-display text-[26px] font-semibold leading-none tracking-[-0.035em] text-ink">
+              Settings
+            </h2>
           </div>
-        </div>
-
-        <div className="flex min-h-0 flex-1">
-          <aside className="hidden w-[200px] shrink-0 flex-col border-r border-line bg-canvas sm:flex">
-            <nav className="flex-1 space-y-0.5 overflow-y-auto p-2">
-              {TABS.map((item) => {
-                const Icon = item.icon
-                const active = tab === item.id
-                return (
-                  <button
-                    key={item.id}
-                    type="button"
-                    onClick={() => openSettings(item.id)}
-                    title={item.description}
-                    className={cn(
-                      'flex h-9 w-full items-center gap-2.5 rounded-lg px-2.5 text-left text-[12.5px] transition-colors',
-                      active ? 'bg-raised font-medium text-ink' : 'text-muted hover:bg-raised/60 hover:text-ink',
-                    )}
-                  >
-                    <Icon size={14} className={cn(active ? 'text-ink' : 'text-faint')} />
-                    {item.label}
-                  </button>
-                )
-              })}
-            </nav>
-            <div className="border-t border-line p-3">
-              <p className="flex items-center gap-1.5 text-[9px] text-faint">
-                <LockKeyhole size={10} />
-                Keys encrypted on this machine
-              </p>
-              <p className="mt-1 text-[9px] text-faint">OpenSol 1.0 · OpenSoft</p>
-            </div>
-          </aside>
-
-          <div className="flex min-h-0 min-w-0 flex-1 flex-col">
-            <div className="thin-scroll flex shrink-0 gap-1 overflow-x-auto border-b border-line px-3 py-2 sm:hidden">
-              {TABS.map((item) => (
+          <nav className="relative flex-1 overflow-y-auto px-3 pb-3">
+            <span
+              aria-hidden
+              className="settings-pill absolute left-3 right-3 top-0 h-10 rounded-2xl bg-panel shadow-pill ring-1 ring-line transition-transform duration-500 ease-spring"
+              style={{ transform: `translateY(${activeIndex * 42}px)` }}
+            />
+            {TABS.map((item, index) => {
+              const Icon = item.icon
+              const active = tab === item.id
+              return (
                 <button
                   key={item.id}
                   type="button"
                   onClick={() => openSettings(item.id)}
+                  title={item.description}
                   className={cn(
-                    'shrink-0 rounded-full px-2.5 py-1 text-[10.5px] font-medium transition-colors',
-                    tab === item.id ? 'bg-ink text-panel' : 'text-muted hover:bg-raised',
+                    'group/tab relative mb-[2px] flex h-10 w-full items-center gap-3 rounded-2xl px-3 text-left text-[12.5px] transition-colors duration-200',
+                    active ? 'font-semibold text-ink' : 'text-muted hover:text-ink',
                   )}
                 >
+                  <span className={cn('w-4 font-mono text-[9.5px] tabular-nums transition-colors', active ? 'text-accent' : 'text-faint')}>
+                    {String(index + 1).padStart(2, '0')}
+                  </span>
+                  <Icon size={14} className={cn('transition-transform duration-300 group-hover/tab:scale-110', active ? 'text-accent' : 'text-faint')} />
                   {item.label}
                 </button>
-              ))}
+              )
+            })}
+          </nav>
+          <div className="relative px-6 py-4">
+            <p className="flex items-center gap-1.5 text-[10px] text-faint">
+              <LockKeyhole size={10} /> Keys encrypted on this machine
+            </p>
+          </div>
+        </aside>
+
+        <div className="relative flex min-h-0 min-w-0 flex-1 flex-col bg-panel sm:border-l sm:border-line">
+          <div className="thin-scroll flex shrink-0 gap-1.5 overflow-x-auto border-b border-line px-3 py-2.5 sm:hidden">
+            {TABS.map((item) => (
+              <button
+                key={item.id}
+                type="button"
+                onClick={() => openSettings(item.id)}
+                className={cn(
+                  'shrink-0 rounded-full px-3 py-1.5 text-[11px] font-medium transition-all duration-200',
+                  tab === item.id ? 'bg-ink text-panel' : 'bg-raised text-muted',
+                )}
+              >
+                {item.label}
+              </button>
+            ))}
+          </div>
+
+          <header className="flex shrink-0 items-start justify-between gap-4 px-5 pb-3 pt-5 sm:px-8 sm:pt-7">
+            <div key={tab} className="settings-title-in min-w-0">
+              <p className="font-mono text-[10px] uppercase tracking-[0.22em] text-accent">
+                {String(activeIndex + 1).padStart(2, '0')} / {String(TABS.length).padStart(2, '0')}
+              </p>
+              <h3 className="mt-1 font-display text-[28px] font-semibold leading-none tracking-[-0.035em] text-ink">{current.label}</h3>
+              <p className="mt-2 max-w-[560px] text-[12.5px] leading-relaxed text-muted">{current.description}</p>
+            </div>
+            <div className="flex shrink-0 items-center gap-1.5">
+              <button
+                type="button"
+                onClick={() => void copyConfig()}
+                className="hidden h-8 items-center gap-1.5 rounded-full border border-line bg-panel px-3 text-[11px] font-medium text-ink transition-all hover:bg-raised active:scale-95 sm:inline-flex"
+                title={daemon?.dataDir ?? '~/.opensol'}
+              >
+                <HardDrive size={12} />
+                Data folder
+              </button>
+              <button type="button" className="icon-button h-8 w-8 rounded-full" onClick={close} aria-label="Close settings">
+                <X size={16} />
+              </button>
             </div>
+          </header>
 
-            <div ref={contentRef} className="thin-scroll min-h-0 flex-1 overflow-y-auto">
+          <div ref={contentRef} className="thin-scroll min-h-0 flex-1 overflow-y-auto pb-6">
+            <div key={tab} className="settings-enter">
               {tab === 'general' && <GeneralTab />}
               {tab === 'models' && <ModelsTab />}
               {tab === 'tools' && <ToolsTab />}
               {tab === 'search' && <SearchTab />}
               {tab === 'skills' && <SkillsTab />}
               {tab === 'plugins' && <PluginsTab />}
+              {tab === 'mcp' && <McpTab />}
               {tab === 'deploy' && <DeployTab />}
               {tab === 'appearance' && <AppearanceTab />}
               {tab === 'about' && <AboutTab />}

package/src/components/Sidebar.tsx

@@ -12,6 +12,7 @@ import {
   Plus,
   Rocket,
   Search,
+  Plug,
   Settings,
   Sparkles,
   Trash2,
@@ -22,6 +23,7 @@ import { hasCredentials, useSettings } from '../store/settings'
 import { useRuntime, useUi } from '../store/ui'
 import { useWorkspace } from '../store/workspace'
 import { stopRun } from '../agent'
+import { kernel } from '../core/kernel'
 import { getProviderName } from '../data/providers'
 import { cn, downloadText, formatRelativeTime, groupChatsByDate } from '../lib/utils'
 import { LogoLockup } from './Logo'
@@ -46,6 +48,7 @@ export function Sidebar() {
   const settings = useSettings()
   const workspace = useWorkspace((state) => state.info)
   const addWorkspace = useWorkspace((state) => state.addWorkspace)
+  const removeWorkspace = useWorkspace((state) => state.removeWorkspace)
   const sidebarCollapsed = useUi((state) => state.sidebarCollapsed)
   const toggleSidebar = useUi((state) => state.toggleSidebar)
   const mobileOpen = useUi((state) => state.mobileSidebarOpen)
@@ -57,6 +60,7 @@ export function Sidebar() {
   const notify = useUi((state) => state.notify)
   const focusComposer = useUi((state) => state.focusComposer)
   const streaming = useRuntime((state) => state.streaming)
+  const titling = useRuntime((state) => state.titling)
 
   const [query, setQuery] = useState('')
   const [menu, setMenu] = useState<ChatMenu | null>(null)
@@ -108,6 +112,28 @@ export function Sidebar() {
     }
   }
 
+  const deleteWorkspace = async (path: string, name: string) => {
+    const confirmed = await askConfirm({
+      title: 'Remove this workspace?',
+      body: `“${name}” is removed from OpenSol's list. The folder and its files stay on your disk; conversations started there are kept.`,
+      confirmLabel: 'Remove workspace',
+      tone: 'danger',
+    })
+    if (!confirmed) return
+    try {
+      await removeWorkspace(path)
+      notify(`Removed ${name} from your workspaces.`, 'success')
+    } catch (error) {
+      notify(error instanceof Error ? error.message : 'Could not remove that workspace.', 'error')
+    }
+  }
+
+  const aiRename = async (id: string) => {
+    setMenu(null)
+    const title = await kernel.titles?.generate(id, { force: true })
+    if (!title) notify('The model could not suggest a title right now.', 'error')
+  }
+
   const beginRename = (id: string, title: string) => {
     setEditingId(id)
     setDraftTitle(title)
@@ -225,6 +251,17 @@ export function Sidebar() {
           <Package size={15} strokeWidth={1.7} className="shrink-0 text-faint" />
           Plugins
         </button>
+        <button
+          type="button"
+          onClick={() => {
+            setMobileOpen(false)
+            openSettings('mcp')
+          }}
+          className="nav-item"
+        >
+          <Plug size={15} strokeWidth={1.7} className="shrink-0 text-faint" />
+          MCP
+        </button>
         <button
           type="button"
           onClick={() => {
@@ -286,28 +323,38 @@ export function Sidebar() {
               {workspaces.map((entry) => {
                 const active = entry.path === workspace.root
                 return (
-                  <button
-                    key={entry.path}
-                    type="button"
-                    onClick={() => void switchWorkspace(entry.path)}
-                    title={entry.path}
-                    className={cn(
-                      'flex h-8 w-full items-center gap-2.5 rounded-lg px-2.5 text-left text-[13px] transition-all duration-150',
-                      active ? 'bg-raised text-ink' : 'text-muted hover:bg-raised/80 hover:text-ink',
-                    )}
-                  >
-                    <Folder size={15} strokeWidth={1.6} className={cn('shrink-0', active ? 'text-accent' : 'text-faint')} />
-                    <span className="min-w-0 flex-1 truncate">{entry.name}</span>
-                    {switching === entry.path ? (
-                      <LoaderCircle size={11} className="shrink-0 animate-spin text-faint" />
-                    ) : active ? (
-                      <Check size={11} className="shrink-0 text-accent" />
-                    ) : (
-                      <span className="shrink-0 text-[10px] tabular-nums text-faint">
-                        {formatRelativeTime(entry.lastOpened)}
-                      </span>
-                    )}
-                  </button>
+                  <div key={entry.path} className="group/ws relative">
+                    <button
+                      type="button"
+                      onClick={() => void switchWorkspace(entry.path)}
+                      title={entry.path}
+                      className={cn(
+                        'flex h-8 w-full items-center gap-2.5 rounded-lg px-2.5 pr-8 text-left text-[13px] transition-all duration-150 active:scale-[0.985]',
+                        active ? 'bg-raised text-ink' : 'text-muted hover:bg-raised/80 hover:text-ink',
+                      )}
+                    >
+                      <Folder size={15} strokeWidth={1.6} className={cn('shrink-0 transition-transform duration-200 group-hover/ws:-rotate-6 group-hover/ws:scale-110', active ? 'text-accent' : 'text-faint')} />
+                      <span className="min-w-0 flex-1 truncate">{entry.name}</span>
+                      {switching === entry.path ? (
+                        <LoaderCircle size={11} className="shrink-0 animate-spin text-faint" />
+                      ) : active ? (
+                        <Check size={11} className="shrink-0 text-accent" />
+                      ) : (
+                        <span className="shrink-0 text-[10px] tabular-nums text-faint transition-opacity group-hover/ws:opacity-0">
+                          {formatRelativeTime(entry.lastOpened)}
+                        </span>
+                      )}
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => void deleteWorkspace(entry.path, entry.name)}
+                      className="absolute right-1 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-faint opacity-0 transition-all hover:bg-danger/10 hover:text-danger focus:opacity-100 group-hover/ws:opacity-100"
+                      title="Remove workspace from the list"
+                      aria-label={`Remove workspace ${entry.name}`}
+                    >
+                      <Trash2 size={12} />
+                    </button>
+                  </div>
                 )
               })}
             </div>
@@ -360,7 +407,7 @@ export function Sidebar() {
                           title={`${session.title} · ${formatRelativeTime(session.updatedAt)}`}
                           className={cn('sidebar-item pr-9', activeId === session.id && 'sidebar-item-active')}
                         >
-                          <span className="min-w-0 flex-1 truncate">{session.title}</span>
+                          <span className={cn('min-w-0 flex-1 truncate', titling[session.id] && 'text-shimmer')}>{session.title}</span>
                           {streaming[session.id] && (
                             <span
                               className="flex shrink-0 items-center gap-1 text-[10.5px] font-medium text-accent group-hover/item:hidden"
@@ -381,7 +428,7 @@ export function Sidebar() {
                             }
                             const rect = event.currentTarget.getBoundingClientRect()
                             const width = 176
-                            const height = 138
+                            const height = 166
                             const x = Math.max(8, Math.min(rect.right - width, window.innerWidth - width - 8))
                             const y =
                               rect.bottom + height + 8 > window.innerHeight
@@ -470,6 +517,13 @@ export function Sidebar() {
                   >
                     <Pencil size={12} /> Rename
                   </button>
+                  <button
+                    type="button"
+                    onClick={() => void aiRename(session.id)}
+                    className="flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-[11.5px] text-muted hover:bg-raised hover:text-ink"
+                  >
+                    <Sparkles size={12} /> Name with AI
+                  </button>
                   <button
                     type="button"
                     onClick={() => exportChat(session.id)}