async function api(path,opts={}){ // Strip leading slash so URL resolves relative to location.href (supports subpath mounts) const rel = path.startsWith('/') ? path.slice(1) : path; const url=new URL(rel,document.baseURI||location.href); // Retry up to 2 times on network errors (e.g. stale keep-alive after long idle). // Server errors (4xx/5xx) are NOT retried — only connection failures. let lastErr; for(let attempt=0;attempt<3;attempt++){ try{ const res=await fetch(url.href,{credentials:'include',headers:{'Content-Type':'application/json'},...opts}); if(!res.ok){ // 401 means the auth session expired. Redirect to login so the user can // re-authenticate. This is especially important for iOS PWA (standalone mode) // and for subpath mounts like /hermes/, where /login escapes to the site root. if(res.status===401){window.location.href='login?next='+encodeURIComponent(window.location.pathname+window.location.search);return;} const text=await res.text(); // Parse JSON error body and surface the human-readable message, // rather than showing raw JSON like {"error":"Profile 'x' does not exist."} let message=text; try{const j=JSON.parse(text);message=j.error||j.message||text;}catch(e){} // Attach the raw HTTP context so callers can branch on status (404 stale-session // cleanup, 401 redirect, 503 retry, etc.) without re-parsing the message string. const err=new Error(message); err.status=res.status; err.statusText=res.statusText; err.body=text; throw err; } const ct=res.headers.get('content-type')||''; return ct.includes('application/json')?res.json():res.text(); }catch(e){ lastErr=e; // Only retry on network errors (TypeError from fetch), not on HTTP errors // that were already thrown above. Re-throw 401 redirects immediately. if(e.message&&/401/.test(e.message)) throw e; if(attempt<2 && e instanceof TypeError) continue; throw e; } } throw lastErr; } // Persist/restore expanded directory state per workspace in localStorage function _wsExpandKey(){ const ws=S.session&&S.session.workspace; return ws?'hermes-webui-expanded:'+ws:null; } function _saveExpandedDirs(){ const key=_wsExpandKey();if(!key)return; try{localStorage.setItem(key,JSON.stringify([...(S._expandedDirs||new Set())]));}catch(e){} } function _restoreExpandedDirs(){ const key=_wsExpandKey(); if(!key){S._expandedDirs=new Set();return;} try{ const raw=localStorage.getItem(key); S._expandedDirs=raw?new Set(JSON.parse(raw)):new Set(); }catch(e){S._expandedDirs=new Set();} } async function loadDir(path){ if(!S.session)return; try{ if(!path||path==='.'){ S._dirCache={}; _restoreExpandedDirs(); // restore per-workspace expanded state on root load } S.currentDir=path||'.'; const data=await api(`/api/list?session_id=${encodeURIComponent(S.session.session_id)}&path=${encodeURIComponent(path)}`); S.entries=data.entries||[];renderBreadcrumb();renderFileTree(); // Pre-fetch contents of restored expanded dirs so they render without a second click // (parallelized — avoids serial waterfall when multiple dirs are expanded) if(!path||path==='.'){ const expanded=S._expandedDirs||new Set(); const pending=[...expanded].filter(dirPath=>!S._dirCache[dirPath]); if(pending.length){ const results=await Promise.all(pending.map(dirPath=> api(`/api/list?session_id=${encodeURIComponent(S.session.session_id)}&path=${encodeURIComponent(dirPath)}`) .then(dc=>({dirPath,entries:dc.entries||[]})) .catch(()=>({dirPath,entries:[]})) )); for(const {dirPath,entries} of results) S._dirCache[dirPath]=entries; } if(expanded.size>0)renderFileTree(); } if(typeof clearPreview==='function'){ if(typeof _previewDirty!=='undefined'&&_previewDirty){ showConfirmDialog({title:t('unsaved_confirm'),message:'',confirmLabel:'Discard',danger:true,focusCancel:true}).then(ok=>{if(ok)clearPreview({keepPanelOpen:true});}); }else{ clearPreview({keepPanelOpen:true}); } } // Fetch git info for workspace root (non-blocking) if(!path||path==='.') _refreshGitBadge(); }catch(e){console.warn('loadDir',e);} } async function _refreshGitBadge(){ const badge=$('gitBadge'); if(!badge||!S.session)return; try{ const data=await api(`/api/git-info?session_id=${encodeURIComponent(S.session.session_id)}`); if(data.git&&data.git.is_git){ const g=data.git; let text=g.branch||'git'; if(g.dirty>0) text+=` \u00b7 ${g.dirty}\u2206`; // middot + delta if(g.behind>0) text+=` \u2193${g.behind}`; if(g.ahead>0) text+=` \u2191${g.ahead}`; badge.textContent=text; badge.className='git-badge'+(g.dirty>0?' dirty':''); badge.style.display=''; } else { badge.style.display='none'; badge.textContent=''; } }catch(e){badge.style.display='none';} } function navigateUp(){ if(!S.session||S.currentDir==='.')return; const parts=S.currentDir.split('/'); parts.pop(); loadDir(parts.length?parts.join('/'):'.'); } // File extension sets for preview routing (must match server-side sets) const IMAGE_EXTS = new Set(['.png','.jpg','.jpeg','.gif','.svg','.webp','.ico','.bmp']); const MD_EXTS = new Set(['.md','.markdown','.mdown']); const HTML_EXTS = new Set(['.html','.htm']); const PDF_EXTS = new Set(['.pdf']); const AUDIO_EXTS = new Set(['.mp3','.wav','.m4a','.aac','.ogg','.oga','.opus','.flac']); const VIDEO_EXTS = new Set(['.mp4','.mov','.m4v','.webm','.ogv','.avi','.mkv']); // Binary formats that should download rather than preview const DOWNLOAD_EXTS = new Set([ '.docx','.doc','.xlsx','.xls','.pptx','.ppt','.odt','.ods','.odp', '.zip','.tar','.gz','.bz2','.7z','.rar', '.exe','.dmg','.pkg','.deb','.rpm', '.woff','.woff2','.ttf','.otf','.eot', '.bin','.dat','.db','.sqlite','.pyc','.class','.so','.dylib','.dll', ]); function fileExt(p){ const i=p.lastIndexOf('.'); return i>=0?p.slice(i).toLowerCase():''; } let _previewCurrentPath = ''; // relative path of currently previewed file let _previewCurrentMode = ''; // 'code' | 'md' | 'image' | 'html' | 'pdf' | 'audio' | 'video' let _previewDirty = false; // true when edits are unsaved function showPreview(mode){ // mode: 'code' | 'image' | 'md' | 'html' | 'pdf' | 'audio' | 'video' $('previewCode').style.display = mode==='code' ? '' : 'none'; $('previewImgWrap').style.display = mode==='image' ? '' : 'none'; const mediaWrap=$('previewMediaWrap'); if(mediaWrap) mediaWrap.style.display = (mode==='audio'||mode==='video') ? '' : 'none'; const pdfWrap=$('previewPdfWrap'); if(pdfWrap) pdfWrap.style.display = mode==='pdf' ? '' : 'none'; $('previewMd').style.display = mode==='md' ? '' : 'none'; $('previewHtmlWrap').style.display = mode==='html' ? '' : 'none'; $('previewEditArea').style.display = 'none'; // start in read-only const badge=$('previewBadge'); badge.className='preview-badge '+mode; badge.textContent = mode==='image'?'image':mode==='audio'?'audio':mode==='video'?'video':mode==='pdf'?'pdf':mode==='md'?'md':mode==='html'?'html':fileExt($('previewPathText').textContent)||'text'; _previewCurrentMode = mode; _previewDirty = false; updateEditBtn(); // Show "Open in browser" button for iframe-backed document previews const openBtn=$('btnOpenInBrowser'); if(openBtn) openBtn.style.display = (mode==='html'||mode==='pdf')?'inline-flex':'none'; } function updateEditBtn(){ const btn=$('btnEditFile'); if(!btn)return; const editable = _previewCurrentMode==='code'||_previewCurrentMode==='md'; btn.style.display = editable?'':'none'; const editing = $('previewEditArea').style.display!=='none'; btn.innerHTML = editing ? `💾 ${t('save')}` : `✎ ${t('edit')}`; btn.title = editing ? t('save_title') : t('edit_title'); btn.style.color = editing ? 'var(--blue)' : ''; if(_previewDirty) btn.innerHTML = '💾 Save*'; } async function toggleEditMode(){ const editing = $('previewEditArea').style.display!=='none'; if(editing){ // Save if(!S.session||!_previewCurrentPath)return; const content=$('previewEditArea').value; try{ await api('/api/file/save',{method:'POST',body:JSON.stringify({ session_id:S.session.session_id, path:_previewCurrentPath, content })}); _previewDirty=false; // Update read-only views if(_previewCurrentMode==='code') $('previewCode').textContent=content; else { $('previewMd').innerHTML=renderMd(content); requestAnimationFrame(()=>{if(typeof renderKatexBlocks==='function')renderKatexBlocks();}); } $('previewEditArea').style.display='none'; if(_previewCurrentMode==='code') $('previewCode').style.display=''; else $('previewMd').style.display=''; showToast(t('saved')); }catch(e){setStatus(t('save_failed')+e.message);} }else{ // Enter edit mode: populate textarea with current content const currentText = _previewCurrentMode==='code' ? $('previewCode').textContent : _previewRawContent||''; $('previewEditArea').value=currentText; $('previewEditArea').style.display=''; if(_previewCurrentMode==='code') $('previewCode').style.display='none'; else $('previewMd').style.display='none'; // Escape cancels the edit without saving $('previewEditArea').onkeydown=e=>{ if(e.key==='Escape'){e.preventDefault();cancelEditMode();} }; } updateEditBtn(); } let _previewRawContent = ''; // raw text for md files (to populate editor) function cancelEditMode(){ // Discard changes and return to read-only view $('previewEditArea').style.display='none'; $('previewEditArea').onkeydown=null; if(_previewCurrentMode==='code') $('previewCode').style.display=''; else $('previewMd').style.display=''; _previewDirty=false; updateEditBtn(); } async function openFile(path){ if(!S.session)return; const ext=fileExt(path); // Binary/download-only formats: trigger browser download, don't preview if(DOWNLOAD_EXTS.has(ext)){ downloadFile(path); return; } $('previewPathText').textContent=path; $('previewArea').classList.add('visible'); $('fileTree').style.display='none'; _previewCurrentPath = path; renderFileBreadcrumb(path); if(IMAGE_EXTS.has(ext)){ // Image: load via raw endpoint, show as showPreview('image'); const url=`api/file/raw?session_id=${encodeURIComponent(S.session.session_id)}&path=${encodeURIComponent(path)}`; $('previewImg').alt=path; $('previewImg').src=url; $('previewImg').onerror=()=>setStatus(t('image_load_failed')); } else if(AUDIO_EXTS.has(ext)||VIDEO_EXTS.has(ext)){ const mode=VIDEO_EXTS.has(ext)?'video':'audio'; showPreview(mode); const url=`api/file/raw?session_id=${encodeURIComponent(S.session.session_id)}&path=${encodeURIComponent(path)}&inline=1`; const wrap=$('previewMediaWrap'); if(wrap){ wrap.innerHTML=(typeof _mediaPlayerHtml==='function') ? _mediaPlayerHtml(mode,url,path.split('/').pop()||path) : `<${mode} src="${url.replace(/"/g,'%22')}" controls preload="metadata">`; if(typeof _applyMediaPlaybackPreferences==='function') _applyMediaPlaybackPreferences(wrap); } } else if(PDF_EXTS.has(ext)){ showPreview('pdf'); const url=`api/file/raw?session_id=${encodeURIComponent(S.session.session_id)}&path=${encodeURIComponent(path)}&inline=1`; const frame=$('previewPdfFrame'); if(frame){ frame.src=''; // clear first to avoid stale content frame.src=url; frame.title=`PDF preview: ${path.split('/').pop()||path}`; } } else if(MD_EXTS.has(ext)){ // Markdown: fetch text, render with renderMd, display as formatted HTML try{ const data=await api(`/api/file?session_id=${encodeURIComponent(S.session.session_id)}&path=${encodeURIComponent(path)}`); showPreview('md'); _previewRawContent = data.content; $('previewMd').innerHTML=renderMd(data.content); requestAnimationFrame(()=>{if(typeof renderKatexBlocks==='function')renderKatexBlocks();}); }catch(e){setStatus(t('file_open_failed'));} } else if(HTML_EXTS.has(ext)){ // HTML: render in sandboxed iframe via raw endpoint. // SECURITY TRADEOFF: We use sandbox="allow-scripts" which lets inline JS run // but prevents access to the parent frame (origin isolation). This is a // deliberate choice — the user is previewing their own workspace files, so // blocking scripts entirely would break most HTML documents. The sandbox // still prevents the preview from navigating the parent, accessing cookies, // or reading other origin data. If a stricter mode is needed, remove // allow-scripts (or add sandbox="") to disable all JS execution. showPreview('html'); const url=`api/file/raw?session_id=${encodeURIComponent(S.session.session_id)}&path=${encodeURIComponent(path)}&inline=1`; const iframe=$('previewHtmlIframe'); if(iframe){ iframe.src=''; // clear first to avoid stale content iframe.src=url; } } else { // Plain code / text -- but fall back to download if server signals binary try{ const data=await api(`/api/file?session_id=${encodeURIComponent(S.session.session_id)}&path=${encodeURIComponent(path)}`); if(data.binary){ // Server flagged this as binary content downloadFile(path); return; } showPreview('code'); $('previewCode').textContent=data.content; }catch(e){ // If it's a 400/too-large error, offer download instead downloadFile(path); } } } function downloadFile(path){ if(!S.session)return; // Trigger browser download via the raw file endpoint with content-disposition attachment const url=`api/file/raw?session_id=${encodeURIComponent(S.session.session_id)}&path=${encodeURIComponent(path)}&download=1`; const filename=path.split('/').pop(); const a=document.createElement('a'); a.href=url;a.download=filename; document.body.appendChild(a);a.click(); setTimeout(()=>document.body.removeChild(a),100); showToast(t('downloading',filename),2000); } // ── Render breadcrumb for file preview mode ────────────────────────────────── function renderFileBreadcrumb(filePath) { const bar = $('breadcrumbBar'); if (!bar) return; bar.style.display = 'flex'; const upBtn = $('btnUpDir'); if (upBtn) upBtn.style.display = ''; bar.innerHTML = ''; // Root const root = document.createElement('span'); root.className = 'breadcrumb-seg breadcrumb-link'; root.textContent = '~'; root.onclick = () => { loadDir('.'); }; bar.appendChild(root); const parts = filePath.split('/'); let accumulated = ''; for (let i = 0; i < parts.length; i++) { const sep = document.createElement('span'); sep.className = 'breadcrumb-sep'; sep.textContent = '/'; bar.appendChild(sep); accumulated += (accumulated ? '/' : '') + parts[i]; const seg = document.createElement('span'); seg.textContent = parts[i]; if (i < parts.length - 1) { seg.className = 'breadcrumb-seg breadcrumb-link'; const target = accumulated; seg.onclick = () => { loadDir(target); }; } else { seg.className = 'breadcrumb-seg breadcrumb-current'; } bar.appendChild(seg); } } function openInBrowser(){ if(!_previewCurrentPath||!S.session) return; const url=`api/file/raw?session_id=${encodeURIComponent(S.session.session_id)}&path=${encodeURIComponent(_previewCurrentPath)}`; window.open(url,'_blank'); }