Hermes Web UI — Sprints 11-14: multi-provider models, settings, session QoL, alerts, polish

Sprint 11 (v0.13): multi-provider model support, streaming smoothness - Dynamic model dropdown populated from configured API keys (OpenAI, Anthropic, Google, DeepSeek, GLM, Kimi, MiniMax, OpenRouter, Nous Portal) - Scroll pinning during streaming (no forced scroll when user has scrolled up) - All route handlers extracted to api/routes.py (server.py now ~76 lines) Sprint 12 (v0.14): settings panel, SSE reconnect, session QoL - Settings panel (gear icon) -- persist default model and workspace server-side - SSE auto-reconnect on network blips - Pin/star sessions to top of sidebar - Import session from JSON export Sprint 13 (v0.15): cron alerts, background errors, session duplicate, tab title - Cron completion alerts: toast per completion + unread badge on Tasks tab - Background agent error banner when a non-active session errors mid-stream - Session duplicate button - Browser tab title reflects active session name Sprint 14 (v0.16): Mermaid diagrams, file ops, session archive/tags, timestamps - Mermaid diagram rendering inline (dark theme, lazy CDN load) - File rename (double-click in file tree) and create folder - Session archive (hide without deleting, toggle to show) - Session tags -- #hashtag in title becomes colored chip + click-to-filter - Message timestamps (HH:MM on hover, full date as tooltip) Test suite: 224 tests across 14 sprint files + regression gate, 0 failures.
2026-03-31 07:02:47 +00:00
parent 732d227b97
commit 7019c25021
29 changed files with 2871 additions and 1122 deletions
--- a/static/boot.js
+++ b/static/boot.js
@@ -24,6 +24,24 @@ $('btnExportJSON').onclick=()=>{
  const a=document.createElement('a');a.href=url;
  a.download=`hermes-${S.session.session_id}.json`;a.click();
 };
+$('btnImportJSON').onclick=()=>$('importFileInput').click();
+$('importFileInput').onchange=async(e)=>{
+  const file=e.target.files[0];
+  if(!file)return;
+  e.target.value='';
+  try{
+    const text=await file.text();
+    const data=JSON.parse(text);
+    const res=await api('/api/session/import',{method:'POST',body:JSON.stringify(data)});
+    if(res.ok&&res.session){
+      await loadSession(res.session.session_id);
+      await renderSessionList();
+      showToast('Session imported');
+    }
+  }catch(err){
+    showToast('Import failed: '+(err.message||'Invalid JSON'));
+  }
+};
 // btnRefreshFiles is now panel-icon-btn in header (see HTML)
 $('btnClearPreview').onclick=()=>{
  $('previewArea').classList.remove('visible');
@@ -50,6 +68,9 @@ document.addEventListener('keydown',async e=>{
    if(!S.busy){await newSession();await renderSessionList();$('msg').focus();}
  }
  if(e.key==='Escape'){
+    // Close settings overlay if open
+    const settingsOverlay=$('settingsOverlay');
+    if(settingsOverlay&&settingsOverlay.style.display!=='none'){toggleSettings();return;}
    // Close workspace dropdown
    closeWsDropdown();
    // Clear session search
@@ -130,6 +151,8 @@ document.querySelectorAll('.suggestion').forEach(btn=>{
 })();

 (async()=>{
+  // Fetch available models from server and populate dropdown dynamically
+  await populateModelDropdown();
  // Restore last-used model preference
  const savedModel=localStorage.getItem('hermes-webui-model');
  if(savedModel && $('modelSelect')){
--- a/static/index.html
+++ b/static/index.html
@@ -13,7 +13,7 @@
 <body>
 <div class="layout">
  <aside class="sidebar">
-    <div class="sidebar-header"><div class="logo">H</div><div><h1 style="margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em">Hermes</h1><div style="font-size:10px;color:var(--muted);opacity:.8;margin-top:1px">v0.1.0 · WebUI</div></div></div>
+    <div class="sidebar-header"><div class="logo">H</div><div><h1 style="margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em">Hermes</h1><div style="font-size:10px;color:var(--muted);opacity:.8;margin-top:1px">v0.2</div></div></div>
    <div class="sidebar-nav">
      <button class="nav-tab active" data-panel="chat" data-label="Chat" onclick="switchPanel('chat')" title="Chat">&#128172;</button>
      <button class="nav-tab" data-panel="tasks" data-label="Tasks" onclick="switchPanel('tasks')" title="Tasks">&#128197;</button>
@@ -135,6 +135,8 @@
      <div class="sidebar-actions">
        <button class="sm-btn" id="btnDownload" title="Download as Markdown">&#8595; Transcript</button>
        <button class="sm-btn" id="btnExportJSON" title="Export full session as JSON">&#10092;/&#10093; JSON</button>
+        <button class="sm-btn" id="btnImportJSON" title="Import session from JSON">&#8593; Import</button>
+        <input type="file" id="importFileInput" accept=".json" style="display:none">
      </div>
    </div>
  <div class="resize-handle" id="sidebarResize"></div>
@@ -149,6 +151,7 @@
          <div class="ws-dropdown" id="wsDropdown"></div>
        </div>
        <button class="chip clear-btn" id="btnClearConv" onclick="clearConversation()" title="Clear all messages in this conversation" style="display:none">&#128465; Clear</button>
+        <button class="chip gear-btn" id="btnSettings" onclick="toggleSettings()" title="Settings">&#9881;</button>
      </div>
    </div>
    <div class="messages" id="messages">
@@ -234,6 +237,7 @@
      <span>Workspace</span>
      <div class="panel-actions">
        <button class="panel-icon-btn" id="btnNewFile" title="New file" onclick="promptNewFile()">&#43;</button>
+        <button class="panel-icon-btn" id="btnNewFolder" title="New folder" onclick="promptNewFolder()">&#128193;</button>
        <button class="panel-icon-btn" id="btnRefreshPanel" title="Refresh" onclick="if(S.session)loadDir('.')">&#8635;</button>
        <button class="panel-icon-btn close-preview" id="btnClearPreview" title="Close preview">&#10005;</button>
      </div>
@@ -253,6 +257,25 @@
    </div>
  </aside>
 </div>
+<div class="settings-overlay" id="settingsOverlay" style="display:none">
+  <div class="settings-panel">
+    <div class="settings-header">
+      <h3 style="margin:0;font-size:16px">Settings</h3>
+      <button class="panel-icon-btn" onclick="toggleSettings()" title="Close">&#10005;</button>
+    </div>
+    <div class="settings-body">
+      <div class="settings-field">
+        <label for="settingsModel">Default Model</label>
+        <select id="settingsModel" style="width:100%;padding:8px;background:var(--code-bg);color:var(--text);border:1px solid var(--border2);border-radius:6px"></select>
+      </div>
+      <div class="settings-field">
+        <label for="settingsWorkspace">Default Workspace</label>
+        <select id="settingsWorkspace" style="width:100%;padding:8px;background:var(--code-bg);color:var(--text);border:1px solid var(--border2);border-radius:6px"></select>
+      </div>
+      <button class="sm-btn" onclick="saveSettings()" style="margin-top:12px;width:100%;padding:8px;font-weight:600">Save Settings</button>
+    </div>
+  </div>
+</div>
 <div class="toast" id="toast"></div>
 <script src="/static/ui.js"></script>
 <script src="/static/workspace.js"></script>
--- a/static/messages.js
+++ b/static/messages.js
@@ -29,7 +29,7 @@ async function send(){

  $('msg').value='';autoResize();
  const displayText=text||(uploaded.length?`Uploaded: ${uploaded.join(', ')}`:'(file upload)');
-  const userMsg={role:'user',content:displayText,attachments:uploaded.length?uploaded:undefined};
+  const userMsg={role:'user',content:displayText,attachments:uploaded.length?uploaded:undefined,_ts:Date.now()/1000};
  S.toolCalls=[];  // clear tool calls from previous turn
  clearLiveToolCards();  // clear any leftover live cards from last turn
  S.messages.push(userMsg);renderMessages();appendThinking();setBusy(true);  // activity bar shown via setBusy
@@ -96,143 +96,126 @@ async function send(){
    $('msgInner').appendChild(assistantRow);
  }

-  const es=new EventSource(`/api/chat/stream?stream_id=${encodeURIComponent(streamId)}`);
+  // ── Shared SSE handler wiring (used for initial connection and reconnect) ──
+  let _reconnectAttempted=false;

-  es.addEventListener('token',e=>{
-    // Guard: if the user switched sessions, don't write tokens to the wrong DOM
-    if(!S.session||S.session.session_id!==activeSid) return;
-    const d=JSON.parse(e.data);
-    assistantText+=d.text;
-    ensureAssistantRow();
-    assistantBody.innerHTML=renderMd(assistantText);
-    $('messages').scrollTop=$('messages').scrollHeight;
-  });
+  function _wireSSE(source){
+    source.addEventListener('token',e=>{
+      if(!S.session||S.session.session_id!==activeSid) return;
+      const d=JSON.parse(e.data);
+      assistantText+=d.text;
+      ensureAssistantRow();
+      assistantBody.innerHTML=renderMd(assistantText);
+      scrollIfPinned();
+    });

-  es.addEventListener('tool',e=>{
-    const d=JSON.parse(e.data);
-    // Only update activity bar if viewing this session
-    if(S.session&&S.session.session_id===activeSid){
-      setStatus(`${d.name}${d.preview?' · '+d.preview.slice(0,55):''}`);
-    }
-    if(!S.session||S.session.session_id!==activeSid) return;
-    removeThinking();
-    const oldRow=$('toolRunningRow');if(oldRow)oldRow.remove();
-    // Append card to the stable live container -- no renderMessages() call
-    const tc={name:d.name, preview:d.preview||'', args:d.args||{}, snippet:'', done:false};
-    S.toolCalls.push(tc);
-    appendLiveToolCard(tc);
-    $('messages').scrollTop=$('messages').scrollHeight;
-  });
-
-  es.addEventListener('approval',e=>{
-    const d=JSON.parse(e.data);
-    // Tag the approval with the session that owns it so respondApproval uses correct sid
-    d._session_id=activeSid;
-    showApprovalCard(d);
-  });
-
-  es.addEventListener('done',e=>{
-    es.close();
-    const d=JSON.parse(e.data);
-    delete INFLIGHT[activeSid];
-    clearInflight();
-    stopApprovalPolling();
-    // Only hide approval card if it belongs to the session that just finished
-    if(!_approvalSessionId || _approvalSessionId===activeSid) hideApprovalCard();
-    // Only clear active stream state if this is the currently viewed session
-    if(S.session&&S.session.session_id===activeSid){
-      S.activeStreamId=null;
-      const _cb=$('btnCancel');if(_cb)_cb.style.display='none';
-    }
-    if(S.session&&S.session.session_id===activeSid){
-      S.session=d.session;S.messages=d.session.messages||[];
-      // Populate tool calls from server-extracted metadata (has snippets)
-      if(d.session.tool_calls&&d.session.tool_calls.length){
-        S.toolCalls=d.session.tool_calls.map(tc=>({...tc,done:true}));
-      } else {
-        S.toolCalls=S.toolCalls.map(tc=>({...tc,done:true}));
+    source.addEventListener('tool',e=>{
+      const d=JSON.parse(e.data);
+      if(S.session&&S.session.session_id===activeSid){
+        setStatus(`${d.name}${d.preview?' · '+d.preview.slice(0,55):''}`);
      }
-      if(uploaded.length){
-        const lastUser=[...S.messages].reverse().find(m=>m.role==='user');
-        if(lastUser)lastUser.attachments=uploaded;
-      }
-      clearLiveToolCards();
-      // Set S.busy=false BEFORE renderMessages so the settled tool card
-      // block (!S.busy guard) can render the final grouped cards.
-      S.busy=false;
-      syncTopbar();renderMessages();loadDir('.');
-    }
-    renderSessionList();setBusy(false);setStatus('');
-  });
+      if(!S.session||S.session.session_id!==activeSid) return;
+      removeThinking();
+      const oldRow=$('toolRunningRow');if(oldRow)oldRow.remove();
+      const tc={name:d.name, preview:d.preview||'', args:d.args||{}, snippet:'', done:false};
+      S.toolCalls.push(tc);
+      appendLiveToolCard(tc);
+      scrollIfPinned();
+    });

-  es.addEventListener('error',e=>{
-    es.close();
-    delete INFLIGHT[activeSid];
-    clearInflight();
-    stopApprovalPolling();
-    // Only hide approval card if it belongs to the session that just finished
-    if(!_approvalSessionId || _approvalSessionId===activeSid) hideApprovalCard();
-    if(S.session&&S.session.session_id===activeSid){
-      S.activeStreamId=null;
-      const _cbe=$('btnCancel');if(_cbe)_cbe.style.display='none';
-    }
-    let msg='Connection error';
-    try{const d=JSON.parse(e.data);msg=d.message||msg;}catch(_){}
-    if(S.session&&S.session.session_id===activeSid){
-      clearLiveToolCards();
-      if(!assistantText){removeThinking();}
-      S.messages.push({role:'assistant',content:`**Error:** ${msg}`});
-      renderMessages();
-    }
-    if(!S.session || !INFLIGHT[S.session.session_id]){
-      setBusy(false);setStatus('Error: '+msg);
-    }
-  });
+    source.addEventListener('approval',e=>{
+      const d=JSON.parse(e.data);
+      d._session_id=activeSid;
+      showApprovalCard(d);
+    });

-  es.addEventListener('cancel',e=>{
-    es.close();
-    delete INFLIGHT[activeSid];
-    clearInflight();
-    stopApprovalPolling();
-    // Only hide approval card if it belongs to the session that just finished
-    if(!_approvalSessionId || _approvalSessionId===activeSid) hideApprovalCard();
-    if(S.session&&S.session.session_id===activeSid){
-      S.activeStreamId=null;
-      const _cbc=$('btnCancel');if(_cbc)_cbc.style.display='none';
-    }
-    if(S.session&&S.session.session_id===activeSid){
-      clearLiveToolCards();
-      if(!assistantText){removeThinking();}
-      S.messages.push({role:'assistant',content:'*Task cancelled.*'});
-      renderMessages();
-    }
-    renderSessionList();
-    if(!S.session || !INFLIGHT[S.session.session_id]){
-      setBusy(false);setStatus('');
-    }
-  });
-
-  // Handle SSE connection errors (network drop etc)
-  es.onerror=()=>{
-    if(es.readyState===EventSource.CLOSED){
+    source.addEventListener('done',e=>{
+      source.close();
+      const d=JSON.parse(e.data);
      delete INFLIGHT[activeSid];
+      clearInflight();
      stopApprovalPolling();
-    // Only hide approval card if it belongs to the session that just finished
-    if(!_approvalSessionId || _approvalSessionId===activeSid) hideApprovalCard();
+      if(!_approvalSessionId || _approvalSessionId===activeSid) hideApprovalCard();
      if(S.session&&S.session.session_id===activeSid){
        S.activeStreamId=null;
-        const _cbo=$('btnCancel');if(_cbo)_cbo.style.display='none';
+        const _cb=$('btnCancel');if(_cb)_cb.style.display='none';
      }
-      if(!assistantText&&S.session&&S.session.session_id===activeSid){
-        removeThinking();
-        S.messages.push({role:'assistant',content:'**Error:** Connection lost'});
-        renderMessages();
+      if(S.session&&S.session.session_id===activeSid){
+        S.session=d.session;S.messages=d.session.messages||[];
+        if(d.session.tool_calls&&d.session.tool_calls.length){
+          S.toolCalls=d.session.tool_calls.map(tc=>({...tc,done:true}));
+        } else {
+          S.toolCalls=S.toolCalls.map(tc=>({...tc,done:true}));
+        }
+        if(uploaded.length){
+          const lastUser=[...S.messages].reverse().find(m=>m.role==='user');
+          if(lastUser)lastUser.attachments=uploaded;
+        }
+        clearLiveToolCards();
+        S.busy=false;
+        syncTopbar();renderMessages();loadDir('.');
      }
-      if(!S.session || !INFLIGHT[S.session.session_id]){
-        setBusy(false);setStatus('');
+      renderSessionList();setBusy(false);setStatus('');
+    });
+
+    source.addEventListener('error',e=>{
+      source.close();
+      // Attempt one reconnect if the stream is still active server-side
+      if(!_reconnectAttempted && streamId){
+        _reconnectAttempted=true;
+        setStatus('Connection lost \u2014 reconnecting\u2026');
+        setTimeout(async()=>{
+          try{
+            const st=await api(`/api/chat/stream/status?stream_id=${encodeURIComponent(streamId)}`);
+            if(st.active){
+              setStatus('Reconnected');
+              _wireSSE(new EventSource(`/api/chat/stream?stream_id=${encodeURIComponent(streamId)}`));
+              return;
+            }
+          }catch(_){}
+          _handleStreamError();
+        },1500);
+        return;
+      }
+      _handleStreamError();
+    });
+
+    source.addEventListener('cancel',e=>{
+      source.close();
+      delete INFLIGHT[activeSid];clearInflight();stopApprovalPolling();
+      if(!_approvalSessionId||_approvalSessionId===activeSid) hideApprovalCard();
+      if(S.session&&S.session.session_id===activeSid){
+        S.activeStreamId=null;const _cbc=$('btnCancel');if(_cbc)_cbc.style.display='none';
+      }
+      if(S.session&&S.session.session_id===activeSid){
+        clearLiveToolCards();if(!assistantText)removeThinking();
+        S.messages.push({role:'assistant',content:'*Task cancelled.*'});renderMessages();
+      }
+      renderSessionList();
+      if(!S.session||!INFLIGHT[S.session.session_id]){setBusy(false);setStatus('');}
+    });
+  }
+
+  function _handleStreamError(){
+    delete INFLIGHT[activeSid];clearInflight();stopApprovalPolling();
+    if(!_approvalSessionId||_approvalSessionId===activeSid) hideApprovalCard();
+    if(S.session&&S.session.session_id===activeSid){
+      S.activeStreamId=null;const _cbe=$('btnCancel');if(_cbe)_cbe.style.display='none';
+      clearLiveToolCards();if(!assistantText)removeThinking();
+      S.messages.push({role:'assistant',content:'**Error:** Connection lost'});renderMessages();
+    }else{
+      // User switched away — show background error banner
+      if(typeof trackBackgroundError==='function'){
+        // Look up session title from the session list cache so the banner names it correctly
+        const _errTitle=(typeof _allSessions!=='undefined'&&_allSessions.find(s=>s.session_id===activeSid)||{}).title||null;
+        trackBackgroundError(activeSid,_errTitle,'Connection lost');
      }
    }
-  };
+    if(!S.session||!INFLIGHT[S.session.session_id]){setBusy(false);setStatus('Error: Connection lost');}
+  }
+
+  _wireSSE(new EventSource(`/api/chat/stream?stream_id=${encodeURIComponent(streamId)}`));
+
 }

 function transcript(){
--- a/static/panels.js
+++ b/static/panels.js
@@ -597,4 +597,175 @@ document.addEventListener('dragenter',e=>{e.preventDefault();if(e.dataTransfer.t
 document.addEventListener('dragleave',e=>{dragCounter--;if(dragCounter<=0){dragCounter=0;wrap.classList.remove('drag-over');}});
 document.addEventListener('drop',e=>{e.preventDefault();dragCounter=0;wrap.classList.remove('drag-over');const files=Array.from(e.dataTransfer.files);if(files.length){addFiles(files);$('msg').focus();}});

+// ── Settings panel ───────────────────────────────────────────────────────────
+
+function toggleSettings(){
+  const overlay=$('settingsOverlay');
+  if(!overlay) return;
+  if(overlay.style.display==='none'){
+    overlay.style.display='';
+    loadSettingsPanel();
+  } else {
+    overlay.style.display='none';
+  }
+}
+
+async function loadSettingsPanel(){
+  try{
+    const settings=await api('/api/settings');
+    // Populate model dropdown from /api/models
+    const modelSel=$('settingsModel');
+    if(modelSel){
+      modelSel.innerHTML='';
+      try{
+        const models=await api('/api/models');
+        for(const g of (models.groups||[])){
+          const og=document.createElement('optgroup');
+          og.label=g.provider;
+          for(const m of g.models){
+            const opt=document.createElement('option');
+            opt.value=m.id;opt.textContent=m.label;
+            og.appendChild(opt);
+          }
+          modelSel.appendChild(og);
+        }
+      }catch(e){}
+      modelSel.value=settings.default_model||'';
+    }
+    // Populate workspace dropdown from /api/workspaces
+    const wsSel=$('settingsWorkspace');
+    if(wsSel){
+      wsSel.innerHTML='';
+      try{
+        const wsData=await api('/api/workspaces');
+        for(const w of (wsData.workspaces||[])){
+          const opt=document.createElement('option');
+          opt.value=w.path;opt.textContent=w.name||w.path;
+          wsSel.appendChild(opt);
+        }
+      }catch(e){}
+      wsSel.value=settings.default_workspace||'';
+    }
+  }catch(e){
+    showToast('Failed to load settings: '+e.message);
+  }
+}
+
+async function saveSettings(){
+  const model=($('settingsModel')||{}).value;
+  const workspace=($('settingsWorkspace')||{}).value;
+  const body={};
+  if(model) body.default_model=model;
+  if(workspace) body.default_workspace=workspace;
+  try{
+    await api('/api/settings',{method:'POST',body:JSON.stringify(body)});
+    showToast('Settings saved');
+    toggleSettings();
+  }catch(e){
+    showToast('Save failed: '+e.message);
+  }
+}
+
+// Close settings on overlay click (not panel click)
+document.addEventListener('click',e=>{
+  const overlay=$('settingsOverlay');
+  if(overlay&&e.target===overlay) toggleSettings();
+});
+
+// ── Cron completion alerts ────────────────────────────────────────────────────
+
+let _cronPollSince=Date.now()/1000;  // track from page load
+let _cronPollTimer=null;
+let _cronUnreadCount=0;
+
+function startCronPolling(){
+  if(_cronPollTimer) return;
+  _cronPollTimer=setInterval(async()=>{
+    if(document.hidden) return;  // don't poll when tab is in background
+    try{
+      const data=await api(`/api/crons/recent?since=${_cronPollSince}`);
+      if(data.completions&&data.completions.length>0){
+        for(const c of data.completions){
+          const icon=c.status==='error'?'\u274c':'\u2705';
+          showToast(`${icon} Cron "${c.name}" ${c.status==='error'?'failed':'completed'}`,4000);
+          _cronPollSince=Math.max(_cronPollSince,c.completed_at);
+        }
+        _cronUnreadCount+=data.completions.length;
+        updateCronBadge();
+      }
+    }catch(e){}
+  },30000);
+}
+
+function updateCronBadge(){
+  const tab=document.querySelector('.nav-tab[data-panel="tasks"]');
+  if(!tab) return;
+  let badge=tab.querySelector('.cron-badge');
+  if(_cronUnreadCount>0){
+    if(!badge){
+      badge=document.createElement('span');
+      badge.className='cron-badge';
+      tab.style.position='relative';
+      tab.appendChild(badge);
+    }
+    badge.textContent=_cronUnreadCount>9?'9+':_cronUnreadCount;
+    badge.style.display='';
+  }else if(badge){
+    badge.style.display='none';
+  }
+}
+
+// Clear cron badge when Tasks tab is opened
+const _origSwitchPanel=switchPanel;
+switchPanel=async function(name){
+  if(name==='tasks'){_cronUnreadCount=0;updateCronBadge();}
+  return _origSwitchPanel(name);
+};
+
+// Start polling on page load
+startCronPolling();
+
+// ── Background agent error tracking ──────────────────────────────────────────
+
+const _backgroundErrors=[];  // {session_id, title, message, ts}
+
+function trackBackgroundError(sessionId, title, message){
+  // Only track if user is NOT currently viewing this session
+  if(S.session&&S.session.session_id===sessionId) return;
+  _backgroundErrors.push({session_id:sessionId, title:title||'Untitled', message, ts:Date.now()});
+  showErrorBanner();
+}
+
+function showErrorBanner(){
+  let banner=$('bgErrorBanner');
+  if(!banner){
+    banner=document.createElement('div');
+    banner.id='bgErrorBanner';
+    banner.className='bg-error-banner';
+    const msgs=document.querySelector('.messages');
+    if(msgs) msgs.parentNode.insertBefore(banner,msgs);
+    else document.body.appendChild(banner);
+  }
+  const latest=_backgroundErrors[0];  // FIFO: show oldest (first) error
+  if(!latest){banner.style.display='none';return;}
+  const count=_backgroundErrors.length;
+  banner.innerHTML=`<span>\u26a0 ${count>1?count+' sessions have':'"'+esc(latest.title)+'" has'} encountered an error</span><div style="display:flex;gap:6px;flex-shrink:0"><button class="reconnect-btn" onclick="navigateToErrorSession()">View</button><button class="reconnect-btn" onclick="dismissErrorBanner()">Dismiss</button></div>`;
+  banner.style.display='';
+}
+
+function navigateToErrorSession(){
+  const latest=_backgroundErrors.shift();  // FIFO: show oldest error first
+  if(latest){
+    loadSession(latest.session_id);renderSessionList();
+  }
+  if(_backgroundErrors.length===0) dismissErrorBanner();
+  else showErrorBanner();
+}
+
+function dismissErrorBanner(){
+  _backgroundErrors.length=0;
+  const banner=$('bgErrorBanner');
+  if(banner) banner.style.display='none';
+}
+
 // Event wiring
--- a/static/sessions.js
+++ b/static/sessions.js
@@ -55,6 +55,7 @@ async function loadSession(sid){

 let _allSessions = [];  // cached for search filter
 let _renamingSid = null;  // session_id currently being renamed (blocks list re-renders)
+let _showArchived = false;  // toggle to show archived sessions

 async function renderSessionList(){
  try{
@@ -92,29 +93,69 @@ function renderSessionListFromCache(){
  const titleMatches=q?_allSessions.filter(s=>(s.title||'Untitled').toLowerCase().includes(q)):_allSessions;
  // Merge content matches (deduped): content matches appended after title matches
  const titleIds=new Set(titleMatches.map(s=>s.session_id));
-  const sessions=q?[...titleMatches,..._contentSearchResults.filter(s=>!titleIds.has(s.session_id))]:titleMatches;
+  const allMatched=q?[...titleMatches,..._contentSearchResults.filter(s=>!titleIds.has(s.session_id))]:titleMatches;
+  // Filter archived unless toggle is on
+  const sessions=_showArchived?allMatched:allMatched.filter(s=>!s.archived);
+  const archivedCount=allMatched.filter(s=>s.archived).length;
  const list=$('sessionList');list.innerHTML='';
-  // Date grouping: Today / Yesterday / Earlier
+  // Show/hide archived toggle if there are archived sessions
+  if(archivedCount>0){
+    const toggle=document.createElement('div');
+    toggle.style.cssText='font-size:10px;padding:4px 10px;color:var(--muted);cursor:pointer;text-align:center;opacity:.7;';
+    toggle.textContent=_showArchived?'Hide archived':'Show '+archivedCount+' archived';
+    toggle.onclick=()=>{_showArchived=!_showArchived;renderSessionListFromCache();};
+    list.appendChild(toggle);
+  }
+  // Separate pinned from unpinned
+  const pinned=sessions.filter(s=>s.pinned);
+  const unpinned=sessions.filter(s=>!s.pinned);
+  // Date grouping: Pinned / Today / Yesterday / Earlier
  const now=Date.now();
  const ONE_DAY=86400000;
  let lastGroup='';
-  for(const s of sessions.slice(0,50)){
-    const ts=(s.updated_at||0)*1000;
-    const group=ts>now-ONE_DAY?'Today':ts>now-2*ONE_DAY?'Yesterday':'Earlier';
-    if(group!==lastGroup){
-      lastGroup=group;
-      const hdr=document.createElement('div');
-      hdr.style.cssText='font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:10px 10px 4px;opacity:.8;';
-      hdr.textContent=group;
-      list.appendChild(hdr);
+  const ordered=[...pinned,...unpinned].slice(0,50);
+  if(pinned.length){
+    const hdr=document.createElement('div');
+    hdr.style.cssText='font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#f5c542;padding:10px 10px 4px;opacity:.9;';
+    hdr.textContent='\u2605 Pinned';
+    list.appendChild(hdr);
+  }
+  for(const s of ordered){
+    if(!s.pinned){
+      const ts=(s.updated_at||s.created_at||0)*1000;  // group by last activity, not creation
+      const group=ts>now-ONE_DAY?'Today':ts>now-2*ONE_DAY?'Yesterday':'Earlier';
+      if(group!==lastGroup){
+        lastGroup=group;
+        const hdr=document.createElement('div');
+        hdr.style.cssText='font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:10px 10px 4px;opacity:.8;';
+        hdr.textContent=group;
+        list.appendChild(hdr);
+      }
    }
    const el=document.createElement('div');
    const isActive=S.session&&s.session_id===S.session.session_id;
-    el.className='session-item'+(isActive?' active':'')+(isActive&&S.session&&S.session._flash?' new-flash':'');
+    el.className='session-item'+(isActive?' active':'')+(isActive&&S.session&&S.session._flash?' new-flash':'')+(s.archived?' archived':'');
    if(isActive&&S.session&&S.session._flash)delete S.session._flash;
+    const rawTitle=s.title||'Untitled';
+    const tags=(rawTitle.match(/#[\w-]+/g)||[]);
+    const cleanTitle=tags.length?rawTitle.replace(/#[\w-]+/g,'').trim():rawTitle;
    const title=document.createElement('span');
-    title.className='session-title';title.textContent=s.title||'Untitled';
+    title.className='session-title';
+    title.textContent=cleanTitle||'Untitled';
    title.title='Double-click to rename';
+    // Append tag chips after the title text
+    for(const tag of tags){
+      const chip=document.createElement('span');
+      chip.className='session-tag';
+      chip.textContent=tag;
+      chip.title='Click to filter by '+tag;
+      chip.onclick=(e)=>{
+        e.stopPropagation();
+        const searchBox=$('sessionSearch');
+        if(searchBox){searchBox.value=tag;filterSessions();}
+      };
+      title.appendChild(chip);
+    }

    // Rename: called directly when we confirm it's a double-click
    const startRename=()=>{
@@ -149,10 +190,50 @@ function renderSessionListFromCache(){
      setTimeout(()=>{inp.focus();inp.select();},10);
    };

+    const pin=document.createElement('span');
+    pin.className='session-pin'+(s.pinned?' pinned':'');
+    pin.innerHTML=s.pinned?'&#9733;':'&#9734;';
+    pin.title=s.pinned?'Unpin':'Pin to top';
+    pin.onclick=async(e)=>{
+      e.stopPropagation();e.preventDefault();
+      const newPinned=!s.pinned;
+      try{
+        await api('/api/session/pin',{method:'POST',body:JSON.stringify({session_id:s.session_id,pinned:newPinned})});
+        s.pinned=newPinned;
+        if(S.session&&S.session.session_id===s.session_id) S.session.pinned=newPinned;
+        renderSessionList();
+      }catch(err){showToast('Pin failed: '+err.message);}
+    };
+    const archive=document.createElement('button');
+    archive.className='session-action-btn';archive.innerHTML=s.archived?'&#9993;':'&#128230;';
+    archive.title=s.archived?'Unarchive':'Archive';
+    archive.onclick=async(e)=>{
+      e.stopPropagation();e.preventDefault();
+      try{
+        await api('/api/session/archive',{method:'POST',body:JSON.stringify({session_id:s.session_id,archived:!s.archived})});
+        s.archived=!s.archived;
+        if(S.session&&S.session.session_id===s.session_id) S.session.archived=s.archived;
+        await renderSessionList();
+        showToast(s.archived?'Session archived':'Session restored');
+      }catch(err){showToast('Archive failed: '+err.message);}
+    };
+    const dup=document.createElement('button');
+    dup.className='session-dup';dup.innerHTML='&#10697;';dup.title='Duplicate';
+    dup.onclick=async(e)=>{
+      e.stopPropagation();e.preventDefault();
+      try{
+        const res=await api('/api/session/new',{method:'POST',body:JSON.stringify({workspace:s.workspace,model:s.model})});
+        if(res.session){
+          await api('/api/session/rename',{method:'POST',body:JSON.stringify({session_id:res.session.session_id,title:(s.title||'Untitled')+' (copy)'})});
+          await loadSession(res.session.session_id);await renderSessionList();
+          showToast('Session duplicated');
+        }
+      }catch(err){showToast('Duplicate failed: '+err.message);}
+    };
    const trash=document.createElement('button');
    trash.className='session-trash';trash.innerHTML='&#128465;';trash.title='Delete';
    trash.onclick=async(e)=>{e.stopPropagation();e.preventDefault();await deleteSession(s.session_id);};
-    el.appendChild(title);el.appendChild(trash);
+    el.appendChild(pin);el.appendChild(title);el.appendChild(archive);el.appendChild(dup);el.appendChild(trash);

    // Use a click timer to distinguish single-click (navigate) from double-click (rename).
    // This prevents loadSession from firing on the first click of a double-click,
@@ -160,7 +241,7 @@ function renderSessionListFromCache(){
    let _clickTimer=null;
    el.onclick=async(e)=>{
      if(_renamingSid) return; // ignore while any rename is active
-      if(e.target===trash||trash.contains(e.target)) return; // trash handles itself
+      if([trash,dup,archive].some(b=>e.target===b||b.contains(e.target))) return;
      clearTimeout(_clickTimer);
      _clickTimer=setTimeout(async()=>{
        _clickTimer=null;
--- a/static/style.css
+++ b/static/style.css
@@ -448,3 +448,53 @@ body.resizing{user-select:none;cursor:col-resize;}
 ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px;}
 ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22);}
 * { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }
+
+/* ── Settings overlay ── */
+.settings-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;display:flex;align-items:center;justify-content:center;}
+.settings-panel{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:0;width:380px;max-width:90vw;max-height:80vh;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,.5);}
+.settings-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;border-bottom:1px solid var(--border);}
+.settings-body{padding:20px;}
+.settings-field{margin-bottom:16px;}
+.settings-field label{display:block;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
+/* Save button inside the settings panel */
+.settings-panel .settings-btn{background:var(--accent);color:#fff;border:none;border-radius:6px;padding:8px 16px;cursor:pointer;font-weight:600;font-size:13px;}
+.settings-panel .settings-btn:hover{opacity:.9;}
+/* Gear icon in topbar -- muted chip, no red */
+.gear-btn{font-size:13px;cursor:pointer;transition:color .15s,background .15s;}
+.gear-btn:hover{color:var(--text);background:rgba(255,255,255,.08);}
+
+/* ── Session pin star ── */
+.session-pin{font-size:12px;cursor:pointer;opacity:0;transition:opacity .15s;padding:2px 4px;flex-shrink:0;}
+.session-item:hover .session-pin,.session-pin.pinned{opacity:1;}
+.session-pin.pinned{color:#f5c542;}
+
+/* ── Session duplicate button ── */
+.session-dup,.session-action-btn{background:none;border:none;color:var(--muted);font-size:11px;cursor:pointer;opacity:0;transition:opacity .15s;padding:2px 4px;flex-shrink:0;}
+.session-item:hover .session-dup,.session-item:hover .session-action-btn{opacity:1;}
+.session-dup:hover,.session-action-btn:hover{color:var(--text);}
+
+/* ── Cron alert badge ── */
+.cron-badge{position:absolute;top:2px;right:2px;background:#e53e3e;color:#fff;font-size:9px;font-weight:700;min-width:14px;height:14px;line-height:14px;text-align:center;border-radius:7px;padding:0 3px;}
+
+/* ── Background error banner ── */
+/* ── Archived sessions ── */
+.session-item.archived{opacity:.5;}
+.session-item.archived .session-title{font-style:italic;}
+
+/* ── Session tags ── */
+.session-tag{display:inline-block;font-size:9px;font-weight:600;padding:1px 5px;margin-left:4px;border-radius:3px;background:rgba(99,179,237,.2);color:#63b3ed;cursor:pointer;vertical-align:middle;}
+.session-tag:hover{background:rgba(99,179,237,.35);}
+
+/* ── File rename input ── */
+.file-rename-input{background:rgba(255,255,255,.08);border:1px solid var(--accent);border-radius:4px;color:var(--text);font-size:12px;padding:1px 4px;width:100%;outline:none;min-width:0;}
+
+/* ── Message timestamps ── */
+.msg-time{font-size:10px;color:var(--muted);opacity:.6;margin-left:6px;}
+.msg-role:hover .msg-time{opacity:1;}
+
+/* ── Mermaid diagrams ── */
+.mermaid-block{background:var(--code-bg);border-radius:8px;padding:16px;margin:8px 0;overflow-x:auto;}
+.mermaid-rendered{background:transparent;padding:8px 0;}
+.mermaid-rendered svg{max-width:100%;height:auto;}
+
+.bg-error-banner{background:rgba(229,62,62,.15);border:1px solid rgba(229,62,62,.3);color:#fca5a5;padding:8px 16px;font-size:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:0;}
--- a/static/ui.js
+++ b/static/ui.js
@@ -4,8 +4,88 @@ const MSG_QUEUE=[];  // messages queued while a request is in-flight
 const $=id=>document.getElementById(id);
 const esc=s=>String(s??'').replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));

+// Dynamic model labels -- populated by populateModelDropdown(), fallback to static map
+let _dynamicModelLabels={};
+
+async function populateModelDropdown(){
+  const sel=$('modelSelect');
+  if(!sel) return;
+  try{
+    const data=await fetch('/api/models').then(r=>r.json());
+    if(!data.groups||!data.groups.length) return; // keep HTML defaults
+    // Clear existing options
+    sel.innerHTML='';
+    _dynamicModelLabels={};
+    for(const g of data.groups){
+      const og=document.createElement('optgroup');
+      og.label=g.provider;
+      for(const m of g.models){
+        const opt=document.createElement('option');
+        opt.value=m.id;
+        opt.textContent=m.label;
+        og.appendChild(opt);
+        _dynamicModelLabels[m.id]=m.label;
+      }
+      sel.appendChild(og);
+    }
+    // Set default model from server if no localStorage preference
+    if(data.default_model && !localStorage.getItem('hermes-webui-model')){
+      sel.value=data.default_model;
+      // If the default isn't in the list, add it
+      if(sel.value!==data.default_model){
+        const opt=document.createElement('option');
+        opt.value=data.default_model;
+        opt.textContent=data.default_model.split('/').pop();
+        sel.insertBefore(opt,sel.firstChild);
+        sel.value=data.default_model;
+      }
+    }
+  }catch(e){
+    // API unavailable -- keep the hardcoded HTML options as fallback
+    console.warn('Failed to load models from server:',e.message);
+  }
+}
+
+// ── Scroll pinning ──────────────────────────────────────────────────────────
+// When streaming, auto-scroll only if the user hasn't manually scrolled up.
+// Once the user scrolls back to within 80px of the bottom, re-pin.
+let _scrollPinned=true;
+(function(){
+  const el=document.getElementById('messages');
+  if(!el) return;
+  el.addEventListener('scroll',()=>{
+    const nearBottom=el.scrollHeight-el.scrollTop-el.clientHeight<80;
+    _scrollPinned=nearBottom;
+  });
+})();
+function scrollIfPinned(){
+  if(!_scrollPinned) return;
+  const el=$('messages');
+  if(el) el.scrollTop=el.scrollHeight;
+}
+function scrollToBottom(){
+  _scrollPinned=true;
+  const el=$('messages');
+  if(el) el.scrollTop=el.scrollHeight;
+}
+
+function getModelLabel(modelId){
+  if(!modelId) return 'Unknown';
+  // Check dynamic labels first, then fall back to splitting the ID
+  if(_dynamicModelLabels[modelId]) return _dynamicModelLabels[modelId];
+  // Static fallback for common models
+  const STATIC_LABELS={'openai/gpt-5.4-mini':'GPT-5.4 Mini','openai/gpt-4o':'GPT-4o','openai/o3':'o3','openai/o4-mini':'o4-mini','anthropic/claude-sonnet-4.6':'Sonnet 4.6','anthropic/claude-sonnet-4-5':'Sonnet 4.5','anthropic/claude-haiku-3-5':'Haiku 3.5','google/gemini-2.5-pro':'Gemini 2.5 Pro','deepseek/deepseek-chat-v3-0324':'DeepSeek V3','meta-llama/llama-4-scout':'Llama 4 Scout'};
+  if(STATIC_LABELS[modelId]) return STATIC_LABELS[modelId];
+  return modelId.split('/').pop()||'Unknown';
+}
+
 function renderMd(raw){
  let s=raw||'';
+  // Mermaid blocks: render as diagram containers (processed after DOM insertion)
+  s=s.replace(/```mermaid\n?([\s\S]*?)```/g,(_,code)=>{
+    const id='mermaid-'+Math.random().toString(36).slice(2,10);
+    return `<div class="mermaid-block" data-mermaid-id="${id}">${esc(code.trim())}</div>`;
+  });
  s=s.replace(/```([\w+-]*)\n?([\s\S]*?)```/g,(_,lang,code)=>{const h=lang?`<div class="pre-header">${esc(lang)}</div>`:'';return `${h}<pre><code>${esc(code.replace(/\n$/,''))}</code></pre>`;});
  s=s.replace(/`([^`\n]+)`/g,(_,c)=>`<code>${esc(c)}</code>`);
  s=s.replace(/\*\*\*(.+?)\*\*\*/g,'<strong><em>$1</em></strong>');
@@ -174,6 +254,7 @@ async function checkInflightOnBoot(sid) {

 function syncTopbar(){
  if(!S.session){
+    document.title='Hermes';
    // Show default workspace name even without a session
    const sidebarName=$('sidebarWsName');
    if(sidebarName && sidebarName.textContent==='Workspace'){
@@ -181,17 +262,26 @@ function syncTopbar(){
    }
    return;
  }
-  $('topbarTitle').textContent=S.session.title||'Untitled';
+  const sessionTitle=S.session.title||'Untitled';
+  $('topbarTitle').textContent=sessionTitle;
+  document.title=sessionTitle+' \u2014 Hermes';
  const vis=S.messages.filter(m=>m&&m.role&&m.role!=='tool');
  $('topbarMeta').textContent=`${vis.length} messages`;
  const m=S.session.model||'';
-  const MODEL_LABELS={'openai/gpt-5.4-mini':'GPT-5.4 Mini','openai/gpt-4o':'GPT-4o','openai/o3':'o3','openai/o4-mini':'o4-mini','anthropic/claude-sonnet-4.6':'Sonnet 4.6','anthropic/claude-sonnet-4-5':'Sonnet 4.5','anthropic/claude-haiku-3-5':'Haiku 3.5','google/gemini-2.5-pro':'Gemini 2.5 Pro','deepseek/deepseek-chat-v3-0324':'DeepSeek V3','meta-llama/llama-4-scout':'Llama 4 Scout'};
  $('modelSelect').value=m;  // set dropdown first so chip reads consistent value
+  // If session model isn't in the dropdown, add it dynamically
+  if(m && $('modelSelect').value!==m){
+    const opt=document.createElement('option');
+    opt.value=m;
+    opt.textContent=getModelLabel(m);
+    $('modelSelect').appendChild(opt);
+    $('modelSelect').value=m;
+  }
  // Show Clear button only when session has messages
  const clearBtn=$('btnClearConv');
-  if(clearBtn) clearBtn.style.display=(S.messages&&S.messages.filter(m=>m.role!=='tool').length>0)?'':'none';
+  if(clearBtn) clearBtn.style.display=(S.messages&&S.messages.filter(msg=>msg.role!=='tool').length>0)?'':'none';
  const displayModel=$('modelSelect').value||m;
-  $('modelChip').textContent=MODEL_LABELS[displayModel]||(displayModel.split('/').pop()||'Unknown');
+  $('modelChip').textContent=getModelLabel(displayModel);
  const ws=S.session.workspace||'';
  $('wsChip').textContent=ws.split('/').slice(-2).join('/')||ws;
  // Update workspace chip in topbar with friendly name from workspace list
@@ -250,7 +340,9 @@ function renderMessages(){
    // Action buttons for this bubble
    const editBtn  = isUser  ? `<button class="msg-action-btn" title="Edit message" onclick="editMessage(this)">&#9998;</button>` : '';
    const retryBtn = isLastAssistant ? `<button class="msg-action-btn" title="Regenerate response" onclick="regenerateResponse(this)">&#8635;</button>` : '';
-    row.innerHTML=`<div class="msg-role ${m.role}"><div class="role-icon ${m.role}">${isUser?'Y':'H'}</div><span style="font-size:12px">${isUser?'You':'Hermes'}</span><span class="msg-actions">${editBtn}<button class="msg-copy-btn msg-action-btn" title="Copy" onclick="copyMsg(this)">&#128203;</button>${retryBtn}</span></div>${filesHtml}<div class="msg-body">${bodyHtml}</div>`;
+    const tsVal=m._ts||m.timestamp;
+    const tsTitle=tsVal?new Date(tsVal*1000).toLocaleString():'';
+    row.innerHTML=`<div class="msg-role ${m.role}" ${tsTitle?`title="${esc(tsTitle)}"`:''}><div class="role-icon ${m.role}">${isUser?'Y':'H'}</div><span style="font-size:12px">${isUser?'You':'Hermes'}</span>${tsTitle?`<span class="msg-time">${new Date(tsVal*1000).toLocaleTimeString([],{hour:'2-digit',minute:'2-digit'})}</span>`:''}<span class="msg-actions">${editBtn}<button class="msg-copy-btn msg-action-btn" title="Copy" onclick="copyMsg(this)">&#128203;</button>${retryBtn}</span></div>${filesHtml}<div class="msg-body">${bodyHtml}</div>`;
    row.dataset.rawText = String(content).trim();
    inner.appendChild(row);
  }
@@ -286,9 +378,9 @@ function renderMessages(){
      else inner.appendChild(frag);
    }
  }
-  $('messages').scrollTop=$('messages').scrollHeight;
+  scrollToBottom();
  // Apply syntax highlighting after DOM is built
-  requestAnimationFrame(()=>highlightCode());
+  requestAnimationFrame(()=>{highlightCode();renderMermaidBlocks();});
  // Refresh todo panel if it's currently open
  if(typeof loadTodos==='function' && document.getElementById('panelTodos') && document.getElementById('panelTodos').classList.contains('active')){
    loadTodos();
@@ -463,15 +555,54 @@ function highlightCode(container) {
  if(typeof Prism === 'undefined' || !Prism.highlightAllUnder) return;
  const el = container || $('msgInner');
  if(!el) return;
-  // Prism autoloader handles language detection via class="language-xxx"
  Prism.highlightAllUnder(el);
 }

+let _mermaidLoading=false;
+let _mermaidReady=false;
+
+function renderMermaidBlocks(){
+  const blocks=document.querySelectorAll('.mermaid-block:not([data-rendered])');
+  if(!blocks.length) return;
+  if(!_mermaidReady){
+    if(!_mermaidLoading){
+      _mermaidLoading=true;
+      const script=document.createElement('script');
+      script.src='https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js';
+      script.onload=()=>{
+        if(typeof mermaid!=='undefined'){
+          mermaid.initialize({startOnLoad:false,theme:'dark',themeVariables:{
+            primaryColor:'#4a6fa5',primaryTextColor:'#e2e8f0',lineColor:'#718096',
+            secondaryColor:'#2d3748',tertiaryColor:'#1a202c',primaryBorderColor:'#4a5568',
+          }});
+          _mermaidReady=true;
+          renderMermaidBlocks();
+        }
+      };
+      document.head.appendChild(script);
+    }
+    return;
+  }
+  blocks.forEach(async(block)=>{
+    block.dataset.rendered='true';
+    const code=block.textContent;
+    const id=block.dataset.mermaidId||('m-'+Math.random().toString(36).slice(2));
+    try{
+      const {svg}=await mermaid.render(id,code);
+      block.innerHTML=svg;
+      block.classList.add('mermaid-rendered');
+    }catch(e){
+      // Fall back to showing as a code block
+      block.innerHTML=`<div class="pre-header">mermaid</div><pre><code>${esc(code)}</code></pre>`;
+    }
+  });
+}
+
 function appendThinking(){
  $('emptyState').style.display='none';
  const row=document.createElement('div');row.className='msg-row';row.id='thinkingRow';
  row.innerHTML=`<div class="msg-role assistant"><div class="role-icon assistant">H</div>Hermes</div><div class="thinking"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>`;
-  $('msgInner').appendChild(row);$('messages').scrollTop=$('messages').scrollHeight;
+  $('msgInner').appendChild(row);scrollToBottom();
 }
 function removeThinking(){const el=$('thinkingRow');if(el)el.remove();}

@@ -501,7 +632,37 @@ function renderFileTree(){

    // Name -- takes all remaining space, truncates with ellipsis
    const nameEl=document.createElement('span');
-    nameEl.className='file-name';nameEl.textContent=item.name;nameEl.title=item.name;
+    nameEl.className='file-name';nameEl.textContent=item.name;nameEl.title='Double-click to rename';
+    // Inline rename on double-click
+    nameEl.ondblclick=(e)=>{
+      e.stopPropagation();
+      const inp=document.createElement('input');
+      inp.className='file-rename-input';inp.value=item.name;
+      inp.onclick=(e2)=>e2.stopPropagation();
+      const finish=async(save)=>{
+        inp.onblur=null;  // prevent double-call: Enter triggers blur after replaceWith
+        if(save){
+          const newName=inp.value.trim();
+          if(newName&&newName!==item.name){
+            try{
+              await api('/api/file/rename',{method:'POST',body:JSON.stringify({
+                session_id:S.session.session_id,path:item.path,new_name:newName
+              })});
+              showToast(`Renamed to ${newName}`);
+              await loadDir('.');
+            }catch(err){showToast('Rename failed: '+err.message);}
+          }
+        }
+        inp.replaceWith(nameEl);
+      };
+      inp.onkeydown=(e2)=>{
+        if(e2.key==='Enter'){e2.preventDefault();finish(true);}
+        if(e2.key==='Escape'){e2.preventDefault();finish(false);}
+      };
+      inp.onblur=()=>finish(false);
+      nameEl.replaceWith(inp);
+      setTimeout(()=>{inp.focus();inp.select();},10);
+    };
    el.appendChild(nameEl);

    // Size -- only for files, right-aligned, shrinks but never wraps
@@ -512,7 +673,7 @@ function renderFileTree(){
      el.appendChild(sizeEl);
    }

-    // Delete button -- only for files, shown as a CSS class toggle on hover
+    // Delete button -- for files, shown on hover
    if(item.type==='file'){
      const del=document.createElement('button');
      del.className='file-del-btn';del.title='Delete';del.textContent='×';
@@ -550,6 +711,17 @@ async function promptNewFile(){
  }catch(e){setStatus('Create failed: '+e.message);}
 }

+async function promptNewFolder(){
+  if(!S.session)return;
+  const name=prompt('New folder name:','');
+  if(!name||!name.trim())return;
+  try{
+    await api('/api/file/create-dir',{method:'POST',body:JSON.stringify({session_id:S.session.session_id,path:name.trim()})});
+    showToast(`Created folder ${name.trim()}`);
+    await loadDir('.');
+  }catch(e){setStatus('Create folder failed: '+e.message);}
+}
+
 function renderTray(){
  const tray=$('attachTray');tray.innerHTML='';
  if(!S.pendingFiles.length){tray.classList.remove('has-files');return;}