spectoflow 0.22.3 → 0.22.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spectoflow",
-  "version": "0.22.3",
+  "version": "0.22.4",
   "description": "Agent-agnostic spec-driven development framework + real-time local control plane. Markdown artifacts, intent router, workflow-by-scope.",
   "keywords": [
     "spec-driven-development",

package/templates/dashboard/public/app.js

@@ -1321,6 +1321,7 @@ function renderDocs(){
 // event refreshes the TREE listing but never overwrites an open file's editor buffer, so an
 // unrelated agent write elsewhere can't clobber unsaved work here. ----
 let filesTreeData=null, filesOpenPath=null, filesOpenDirty=false;
+let filesSelectedDir=''; // '' = project root — the folder + File/+ Folder create inside
 const filesOpenDirs=new Set(); // persists which tree folders are expanded across a refresh
 async function loadFilesTree(){
   try{
@@ -1338,7 +1339,8 @@ function renderFiles(){
   loadFilesTree();
 }
 function fNode(entry){
-  const row=el('div','f-row'+(entry.type==='dir'&&filesOpenDirs.has(entry.path)?' is-open':'')+(entry.path===filesOpenPath?' is-active':''));
+  const isTarget=entry.type==='dir'&&entry.path===filesSelectedDir;
+  const row=el('div','f-row'+(entry.type==='dir'&&filesOpenDirs.has(entry.path)?' is-open':'')+(entry.path===filesOpenPath?' is-active':'')+(isTarget?' is-target':''));
   row.tabIndex=0;
   if(entry.type==='dir'){
     const chev=document.createElementNS('http://www.w3.org/2000/svg','svg');
@@ -1353,10 +1355,17 @@ function fNode(entry){
     const kids=el('div','f-children'); kids.hidden=!filesOpenDirs.has(entry.path);
     (entry.children||[]).forEach(c=> kids.append(fNode(c)));
     wrap.append(kids);
+    // a click both toggles expand/collapse AND marks this folder as where +File/+Folder create —
+    // the two are independent ideas but sharing the click keeps the tree from needing a second,
+    // easy-to-miss gesture just to pick a target folder.
     row.addEventListener('click',()=>{
       const open=filesOpenDirs.has(entry.path);
       if(open) filesOpenDirs.delete(entry.path); else filesOpenDirs.add(entry.path);
       row.classList.toggle('is-open',!open); kids.hidden=open;
+      filesSelectedDir=entry.path;
+      const root=$('#filesRootRow'); if(root) root.classList.remove('is-target');
+      $$('#filesTree .f-row.is-target').forEach(r=> r!==row && r.classList.remove('is-target'));
+      row.classList.add('is-target');
     });
   } else {
     row.addEventListener('click',()=> openFilesFile(entry.path));
@@ -1366,10 +1375,104 @@ function fNode(entry){
 function renderFilesTree(){
   const box=$('#filesTree'); if(!box) return;
   box.innerHTML='';
+  const root=$('#filesRootRow'); if(root) root.classList.toggle('is-target',filesSelectedDir==='');
   if(!filesTreeData || !filesTreeData.length){ box.append(el('div','empty',t('files.empty'))); return; }
   filesTreeData.forEach(e=> box.append(fNode(e)));
 }
 function filesExt(p){ const m=/\.([a-z0-9]+)$/i.exec(p||''); return m?m[1].toLowerCase():''; }
+
+// ---- lightweight syntax highlighting — zero-dependency (no CodeMirror/Monaco, per the explicit
+// call made when this tab was designed): a single char-scanner tokenizer good enough to make code
+// readable at a glance in a file browser, not a language-correct parser. Anything not recognized
+// (or with no lang mapping) just renders as plain, unstyled text — never a rendering error. ----
+const FILES_HL_LANG = {
+  js: { comments:[['//','\n'],['/*','*/']], strings:['"',"'",'`'],
+    keywords:'const let var function return if else for while do switch case break continue new class extends super this typeof instanceof in of try catch finally throw async await yield import export default from as null undefined true false void delete'.split(' ') },
+  json: { comments:[], strings:['"'], keywords:'true false null'.split(' ') },
+  css: { comments:[['/*','*/']], strings:['"',"'"], keywords:[] },
+  html: { comments:[['<!--','-->']], strings:['"',"'"], keywords:[], tags:true },
+  py: { comments:[['#','\n']], strings:['"',"'"],
+    keywords:'def class return if elif else for while break continue pass import from as try except finally raise with lambda yield async await None True False and or not in is del global nonlocal'.split(' ') },
+  sh: { comments:[['#','\n']], strings:['"',"'"],
+    keywords:'if then else elif fi for while do done case esac function return exit export local readonly'.split(' ') },
+  yml: { comments:[['#','\n']], strings:['"',"'"], keywords:'true false null'.split(' ') },
+};
+function filesHlLang(ext){
+  if(['js','mjs','cjs','ts','jsx','tsx'].includes(ext)) return 'js';
+  if(ext==='json') return 'json';
+  if(ext==='css') return 'css';
+  if(['html','htm'].includes(ext)) return 'html';
+  if(ext==='py') return 'py';
+  if(['sh','bash'].includes(ext)) return 'sh';
+  if(['yml','yaml'].includes(ext)) return 'yml';
+  return null;
+}
+// Scans `src` one character at a time, classifying spans as it goes; returns an HTML string with
+// each span wrapped in a colored <span> (escaped — this is the only place raw file content becomes
+// markup, so nothing here may skip escHtml).
+function filesHighlight(src,langKey){
+  const lang=FILES_HL_LANG[langKey];
+  if(!lang) return escHtml(src);
+  const n=src.length;
+  let i=0,html='',plain='';
+  const flushPlain=()=>{ if(plain){ html+=escHtml(plain); plain=''; } };
+  const isWordChar=c=>/[A-Za-z0-9_$]/.test(c);
+  while(i<n){
+    let matched=false;
+    // comments
+    for(const [open,close] of lang.comments){
+      if(src.startsWith(open,i)){
+        const end = close==='\n' ? (src.indexOf('\n',i)===-1?n:src.indexOf('\n',i)) : (src.indexOf(close,i+open.length)===-1?n:src.indexOf(close,i+open.length)+close.length);
+        flushPlain(); html+='<span class="hl-comment">'+escHtml(src.slice(i,end))+'</span>'; i=end; matched=true; break;
+      }
+    }
+    if(matched) continue;
+    // strings
+    if(lang.strings.includes(src[i])){
+      const q=src[i]; let j=i+1;
+      while(j<n && src[j]!==q){ if(src[j]==='\\') j++; j++; }
+      j=Math.min(j+1,n);
+      flushPlain(); html+='<span class="hl-string">'+escHtml(src.slice(i,j))+'</span>'; i=j; continue;
+    }
+    // html tags (bonus: <tag ...> / </tag>) — a light touch, not full attribute-vs-value parsing
+    if(lang.tags && src[i]==='<' && /[a-zA-Z/!]/.test(src[i+1]||'')){
+      const end=src.indexOf('>',i); const j=end===-1?n:end+1;
+      flushPlain(); html+='<span class="hl-tag">'+escHtml(src.slice(i,j))+'</span>'; i=j; continue;
+    }
+    // numbers
+    if(/[0-9]/.test(src[i]) && !isWordChar(src[i-1]||'')){
+      let j=i; while(j<n && /[0-9.]/.test(src[j])) j++;
+      flushPlain(); html+='<span class="hl-number">'+escHtml(src.slice(i,j))+'</span>'; i=j; continue;
+    }
+    // keywords
+    if(isWordChar(src[i]) && !isWordChar(src[i-1]||'')){
+      let j=i; while(j<n && isWordChar(src[j])) j++;
+      const word=src.slice(i,j);
+      if(lang.keywords.includes(word)){ flushPlain(); html+='<span class="hl-keyword">'+escHtml(word)+'</span>'; i=j; continue; }
+      plain+=word; i=j; continue;
+    }
+    plain+=src[i]; i++;
+  }
+  flushPlain();
+  return html;
+}
+// A textarea can't render colored text itself, so this overlays one, transparent, on top of a
+// highlighted <pre><code> "backdrop" showing through it (the standard technique for a highlighted
+// plain-text editor without a full editor component) — same font metrics on both, scroll positions
+// kept in lockstep, backdrop re-rendered on every keystroke.
+function filesCodeEditor(content,langKey,onInput){
+  const wrap=el('div','files-code-wrap');
+  const pre=document.createElement('pre'); pre.className='files-code-backdrop'; pre.setAttribute('aria-hidden','true');
+  const code=document.createElement('code'); pre.append(code);
+  const ta=el('textarea','files-editor files-code-input'); ta.spellcheck=false; ta.value=content;
+  const paint=()=>{ code.innerHTML=filesHighlight(ta.value,langKey)+'\n'; }; // trailing \n: a final blank line still gets backdrop height
+  const syncScroll=()=>{ pre.scrollTop=ta.scrollTop; pre.scrollLeft=ta.scrollLeft; };
+  ta.addEventListener('input',()=>{ paint(); if(onInput) onInput(ta.value); });
+  ta.addEventListener('scroll',syncScroll);
+  paint();
+  wrap.append(pre,ta);
+  return { wrap, textarea:ta };
+}
 async function openFilesFile(relPath){
   // no native confirm() dialog (it blocks the whole tab, including our own SSE/automation) — a
   // dirty editor just refuses to switch until the user explicitly saves or discards.
@@ -1432,15 +1535,19 @@ function renderFilesMd(box,actions,relPath,content){
   const showEditor=()=>{
     body.innerHTML='';
     const tb=el('div','files-md-toolbar');
-    const ta=el('textarea','files-editor'); ta.value=content;
-    const wrapSel=(before,after)=>{ const s=ta.selectionStart,e=ta.selectionEnd; const v=ta.value; ta.value=v.slice(0,s)+before+v.slice(s,e)+after+v.slice(e); ta.focus(); ta.selectionStart=s+before.length; ta.selectionEnd=e+before.length; content=ta.value; filesOpenDirty=true; };
+    const {wrap,textarea:ta}=filesCodeEditor(content,null,(v)=>{ content=v; filesOpenDirty=true; });
+    const wrapSel=(before,after)=>{
+      const s=ta.selectionStart,e=ta.selectionEnd; const v=ta.value;
+      ta.value=v.slice(0,s)+before+v.slice(s,e)+after+v.slice(e);
+      ta.dispatchEvent(new Event('input')); // repaints the backdrop and marks dirty via the same path as typing
+      ta.focus(); ta.selectionStart=s+before.length; ta.selectionEnd=e+before.length;
+    };
     [['B','**','**'],['I','_','_'],['H','## ',''],['Link','[','](url)']].forEach(([label,a,b])=>{
       const bt=el('button',null,label); bt.type='button'; bt.addEventListener('click',()=>wrapSel(a,b)); tb.append(bt);
     });
     const saveBtn=el('button',null,t('files.save')); saveBtn.type='button'; saveBtn.addEventListener('click',()=>{ content=ta.value; filesSave(relPath,content,actions); });
     tb.append(saveBtn,filesDiscardBtn(relPath));
-    ta.addEventListener('input',()=>{ content=ta.value; filesOpenDirty=true; });
-    body.append(tb,ta); ta.focus(); editBtn.textContent=t('files.preview');
+    body.append(tb,wrap); ta.focus(); editBtn.textContent=t('files.preview');
   };
   editBtn.addEventListener('click',()=>{ editing=!editing; if(editing) showEditor(); else showPreview(); });
   showPreview();
@@ -1461,23 +1568,21 @@ function renderFilesHtml(box,actions,relPath,content){
   };
   const showEditor=()=>{
     body.innerHTML='';
-    const ta=el('textarea','files-editor'); ta.value=content;
-    ta.addEventListener('input',()=>{ content=ta.value; filesOpenDirty=true; });
+    const {wrap,textarea:ta}=filesCodeEditor(content,'html',(v)=>{ content=v; filesOpenDirty=true; });
     const saveBtn=el('button','btn primary',t('files.save')); saveBtn.type='button'; saveBtn.addEventListener('click',()=>filesSave(relPath,content,actions));
     const tb=el('div','files-md-toolbar'); tb.append(saveBtn,filesDiscardBtn(relPath));
-    body.append(tb,ta); ta.focus(); editBtn.textContent=t('files.preview');
+    body.append(tb,wrap); ta.focus(); editBtn.textContent=t('files.preview');
   };
   editBtn.addEventListener('click',()=>{ editing=!editing; if(editing) showEditor(); else showPreview(); });
   showPreview();
 }
 // Anything else that reads as text: a plain monospace editor, editable straight away.
 function renderFilesText(box,actions,relPath,content){
-  const ta=el('textarea','files-editor'); ta.value=content;
-  ta.addEventListener('input',()=>{ filesOpenDirty=true; });
+  const {wrap,textarea:ta}=filesCodeEditor(content,filesHlLang(filesExt(relPath)),()=>{ filesOpenDirty=true; });
   const saveBtn=el('button','btn primary',t('files.save')); saveBtn.type='button';
   saveBtn.addEventListener('click',()=>filesSave(relPath,ta.value,actions));
   actions.append(saveBtn,filesDiscardBtn(relPath));
-  box.append(ta); ta.focus();
+  box.append(wrap); ta.focus();
 }
 // "+ File"/"+ Folder" open the same inline form (never a native prompt()/alert() — those block the
 // whole tab, including our own SSE connection, until dismissed).
@@ -1488,6 +1593,7 @@ function openFilesCreateForm(kind){
   const input=$('#filesCreateInput');
   input.placeholder = kind==='dir' ? t('files.newFolderPrompt') : t('files.newFilePrompt');
   input.value='';
+  const target=$('#filesCreateTarget'); if(target) target.textContent=t('files.creatingIn',{path:filesSelectedDir||t('files.projectRoot')});
   const err=$('#filesCreateError'); if(err) err.hidden=true;
   form.hidden=false; form.classList.add('is-open');
   input.focus();
@@ -1500,7 +1606,7 @@ async function submitFilesCreate(){
   const input=$('#filesCreateInput'); const err=$('#filesCreateError');
   const name=(input.value||'').trim();
   if(!name){ if(err){ err.textContent=t('backlog.addTitleRequired'); err.hidden=false; } return; }
-  const rel=name.replace(/^\/+/,'');
+  const rel=(filesSelectedDir?filesSelectedDir+'/':'')+name.replace(/^\/+/,'');
   const kind=filesCreateKind;
   const endpoint = kind==='dir' ? '/api/files/mkdir' : '/api/files/write';
   const payload = kind==='dir' ? {path:rel} : {path:rel,content:''};
@@ -1638,6 +1744,12 @@ $$('#backlogTable thead th').forEach(th=> th.addEventListener('click', ()=>{
 const filesNewFileBtn=$('#filesNewFile'); if(filesNewFileBtn) filesNewFileBtn.addEventListener('click',()=>openFilesCreateForm('file'));
 const filesNewFolderBtn=$('#filesNewFolder'); if(filesNewFolderBtn) filesNewFolderBtn.addEventListener('click',()=>openFilesCreateForm('dir'));
 const filesRefreshBtn=$('#filesRefresh'); if(filesRefreshBtn) filesRefreshBtn.addEventListener('click',loadFilesTree);
+const filesRootRowBtn=$('#filesRootRow');
+if(filesRootRowBtn) filesRootRowBtn.addEventListener('click',()=>{
+  filesSelectedDir='';
+  $$('#filesTree .f-row.is-target').forEach(r=> r.classList.remove('is-target'));
+  filesRootRowBtn.classList.add('is-target');
+});
 const filesCreateGoBtn=$('#filesCreateGo'); if(filesCreateGoBtn) filesCreateGoBtn.addEventListener('click',submitFilesCreate);
 const filesCreateCancelBtn=$('#filesCreateCancel'); if(filesCreateCancelBtn) filesCreateCancelBtn.addEventListener('click',closeFilesCreateForm);
 const filesCreateInputEl=$('#filesCreateInput'); if(filesCreateInputEl) filesCreateInputEl.addEventListener('keydown',e=>{ if(e.key==='Enter') submitFilesCreate(); });

package/templates/dashboard/public/i18n.js

@@ -85,7 +85,7 @@ en: {
   'team.skillsTitle':'Skills','team.skillsSub':'Evolving procedures — the <em>how</em>.',
   'team.standardsLabel':'standards','team.usesLabel':'uses','team.standardLabel':'standard',
   'drawer.agent':'Agent','drawer.skill':'Skill','drawer.file':'File · {rel}',
-  'drawer.loading':'Loading…','drawer.loadError':'Could not load this file.','files.title':'Files','files.sub':'Browse the project\'s files — view Markdown & HTML, edit any text file, create new ones.','files.newFile':'+ File','files.newFolder':'+ Folder','files.pickFile':'Select a file to view it.','files.empty':'No files yet.','files.edit':'Edit','files.preview':'Preview','files.save':'Save','files.saved':'✓ saved','files.saveError':'Could not save this file.','files.loadError':'Could not load this file.','files.binary':'This file can\'t be previewed here (not text).','files.discardConfirm':'Discard unsaved changes?','files.newFilePrompt':'New file path (e.g. notes/todo.md):','files.newFolderPrompt':'New folder path:','files.refresh':'Refresh','files.discard':'Discard','files.create':'Create',
+  'drawer.loading':'Loading…','drawer.loadError':'Could not load this file.','files.title':'Files','files.sub':'Browse the project\'s files — view Markdown & HTML, edit any text file, create new ones.','files.newFile':'+ File','files.newFolder':'+ Folder','files.pickFile':'Select a file to view it.','files.empty':'No files yet.','files.edit':'Edit','files.preview':'Preview','files.save':'Save','files.saved':'✓ saved','files.saveError':'Could not save this file.','files.loadError':'Could not load this file.','files.binary':'This file can\'t be previewed here (not text).','files.discardConfirm':'Discard unsaved changes?','files.newFilePrompt':'New file name (e.g. todo.md):','files.newFolderPrompt':'New folder name:','files.projectRoot':'project root','files.creatingIn':'Creating in: {path}','files.refresh':'Refresh','files.discard':'Discard','files.create':'Create',
   'chat.widgetTitle':'Run an agent','chat.widgetSub':'Quick access · full view in the Chat tab',
   'chat.tabSub':'Full conversation with the runner — the same run as the widget, more room to read it.',
   'chat.idle':'Type a request — the agent runs headless in this project with full memory (<code>CLAUDE.md → AGENTS.md</code>) and updates the board live.',
@@ -197,7 +197,7 @@ fr: {
   'team.skillsTitle':'Compétences','team.skillsSub':'Procédures évolutives — le <em>comment</em>.',
   'team.standardsLabel':'standards','team.usesLabel':'utilise','team.standardLabel':'standard',
   'drawer.agent':'Agent','drawer.skill':'Compétence','drawer.file':'Fichier · {rel}',
-  'drawer.loading':'Chargement…','drawer.loadError':'Impossible de charger ce fichier.','files.title':'Fichiers','files.sub':'Parcourez les fichiers du projet — visualisez Markdown et HTML, modifiez tout fichier texte, créez-en de nouveaux.','files.newFile':'+ Fichier','files.newFolder':'+ Dossier','files.pickFile':'Sélectionnez un fichier pour l’afficher.','files.empty':'Aucun fichier pour l’instant.','files.edit':'Modifier','files.preview':'Aperçu','files.save':'Enregistrer','files.saved':'✓ enregistré','files.saveError':'Impossible d’enregistrer ce fichier.','files.loadError':'Impossible de charger ce fichier.','files.binary':'Ce fichier ne peut pas être prévisualisé ici (non textuel).','files.discardConfirm':'Abandonner les modifications non enregistrées ?','files.newFilePrompt':'Chemin du nouveau fichier (ex. notes/todo.md) :','files.newFolderPrompt':'Chemin du nouveau dossier :','files.refresh':'Actualiser','files.discard':'Annuler','files.create':'Créer',
+  'drawer.loading':'Chargement…','drawer.loadError':'Impossible de charger ce fichier.','files.title':'Fichiers','files.sub':'Parcourez les fichiers du projet — visualisez Markdown et HTML, modifiez tout fichier texte, créez-en de nouveaux.','files.newFile':'+ Fichier','files.newFolder':'+ Dossier','files.pickFile':'Sélectionnez un fichier pour l’afficher.','files.empty':'Aucun fichier pour l’instant.','files.edit':'Modifier','files.preview':'Aperçu','files.save':'Enregistrer','files.saved':'✓ enregistré','files.saveError':'Impossible d’enregistrer ce fichier.','files.loadError':'Impossible de charger ce fichier.','files.binary':'Ce fichier ne peut pas être prévisualisé ici (non textuel).','files.discardConfirm':'Abandonner les modifications non enregistrées ?','files.newFilePrompt':'Nom du nouveau fichier (ex. todo.md) :','files.newFolderPrompt':'Nom du nouveau dossier :','files.projectRoot':'racine du projet','files.creatingIn':'Création dans : {path}','files.refresh':'Actualiser','files.discard':'Annuler','files.create':'Créer',
   'chat.widgetTitle':'Lancer un agent','chat.widgetSub':'Accès rapide · vue complète dans l’onglet Chat',
   'chat.tabSub':'Conversation complète avec l’exécuteur — la même exécution que le widget, avec plus de place pour la lire.',
   'chat.idle':'Tapez une demande — l’agent s’exécute sans supervision dans ce projet avec toute sa mémoire (<code>CLAUDE.md → AGENTS.md</code>) et met le tableau à jour en direct.',
@@ -309,7 +309,7 @@ es: {
   'team.skillsTitle':'Habilidades','team.skillsSub':'Procedimientos en evolución — el <em>cómo</em>.',
   'team.standardsLabel':'estándares','team.usesLabel':'usa','team.standardLabel':'estándar',
   'drawer.agent':'Agente','drawer.skill':'Habilidad','drawer.file':'Archivo · {rel}',
-  'drawer.loading':'Cargando…','drawer.loadError':'No se pudo cargar este archivo.','files.title':'Archivos','files.sub':'Explora los archivos del proyecto — visualiza Markdown y HTML, edita cualquier archivo de texto, crea otros nuevos.','files.newFile':'+ Archivo','files.newFolder':'+ Carpeta','files.pickFile':'Selecciona un archivo para verlo.','files.empty':'Aún no hay archivos.','files.edit':'Editar','files.preview':'Vista previa','files.save':'Guardar','files.saved':'✓ guardado','files.saveError':'No se pudo guardar este archivo.','files.loadError':'No se pudo cargar este archivo.','files.binary':'Este archivo no se puede previsualizar aquí (no es texto).','files.discardConfirm':'¿Descartar los cambios sin guardar?','files.newFilePrompt':'Ruta del nuevo archivo (p. ej. notes/todo.md):','files.newFolderPrompt':'Ruta de la nueva carpeta:','files.refresh':'Actualizar','files.discard':'Descartar','files.create':'Crear',
+  'drawer.loading':'Cargando…','drawer.loadError':'No se pudo cargar este archivo.','files.title':'Archivos','files.sub':'Explora los archivos del proyecto — visualiza Markdown y HTML, edita cualquier archivo de texto, crea otros nuevos.','files.newFile':'+ Archivo','files.newFolder':'+ Carpeta','files.pickFile':'Selecciona un archivo para verlo.','files.empty':'Aún no hay archivos.','files.edit':'Editar','files.preview':'Vista previa','files.save':'Guardar','files.saved':'✓ guardado','files.saveError':'No se pudo guardar este archivo.','files.loadError':'No se pudo cargar este archivo.','files.binary':'Este archivo no se puede previsualizar aquí (no es texto).','files.discardConfirm':'¿Descartar los cambios sin guardar?','files.newFilePrompt':'Nombre del nuevo archivo (p. ej. todo.md):','files.newFolderPrompt':'Nombre de la nueva carpeta:','files.projectRoot':'raíz del proyecto','files.creatingIn':'Creando en: {path}','files.refresh':'Actualizar','files.discard':'Descartar','files.create':'Crear',
   'chat.widgetTitle':'Ejecutar un agente','chat.widgetSub':'Acceso rápido · vista completa en la pestaña Chat',
   'chat.tabSub':'Conversación completa con el ejecutor — la misma ejecución que el widget, con más espacio para leerla.',
   'chat.idle':'Escribe una solicitud — el agente se ejecuta sin supervisión en este proyecto con toda su memoria (<code>CLAUDE.md → AGENTS.md</code>) y actualiza el tablero en vivo.',
@@ -421,7 +421,7 @@ de: {
   'team.skillsTitle':'Skills','team.skillsSub':'Sich weiterentwickelnde Vorgehensweisen — das <em>Wie</em>.',
   'team.standardsLabel':'Standards','team.usesLabel':'nutzt','team.standardLabel':'Standard',
   'drawer.agent':'Agent','drawer.skill':'Skill','drawer.file':'Datei · {rel}',
-  'drawer.loading':'Lädt…','drawer.loadError':'Diese Datei konnte nicht geladen werden.','files.title':'Dateien','files.sub':'Durchsuche die Projektdateien — Markdown & HTML ansehen, jede Textdatei bearbeiten, neue erstellen.','files.newFile':'+ Datei','files.newFolder':'+ Ordner','files.pickFile':'Wähle eine Datei aus, um sie anzuzeigen.','files.empty':'Noch keine Dateien.','files.edit':'Bearbeiten','files.preview':'Vorschau','files.save':'Speichern','files.saved':'✓ gespeichert','files.saveError':'Diese Datei konnte nicht gespeichert werden.','files.loadError':'Diese Datei konnte nicht geladen werden.','files.binary':'Diese Datei kann hier nicht angezeigt werden (kein Text).','files.discardConfirm':'Nicht gespeicherte Änderungen verwerfen?','files.newFilePrompt':'Pfad der neuen Datei (z. B. notes/todo.md):','files.newFolderPrompt':'Pfad des neuen Ordners:','files.refresh':'Aktualisieren','files.discard':'Verwerfen','files.create':'Erstellen',
+  'drawer.loading':'Lädt…','drawer.loadError':'Diese Datei konnte nicht geladen werden.','files.title':'Dateien','files.sub':'Durchsuche die Projektdateien — Markdown & HTML ansehen, jede Textdatei bearbeiten, neue erstellen.','files.newFile':'+ Datei','files.newFolder':'+ Ordner','files.pickFile':'Wähle eine Datei aus, um sie anzuzeigen.','files.empty':'Noch keine Dateien.','files.edit':'Bearbeiten','files.preview':'Vorschau','files.save':'Speichern','files.saved':'✓ gespeichert','files.saveError':'Diese Datei konnte nicht gespeichert werden.','files.loadError':'Diese Datei konnte nicht geladen werden.','files.binary':'Diese Datei kann hier nicht angezeigt werden (kein Text).','files.discardConfirm':'Nicht gespeicherte Änderungen verwerfen?','files.newFilePrompt':'Name der neuen Datei (z. B. todo.md):','files.newFolderPrompt':'Name des neuen Ordners:','files.projectRoot':'Projektstamm','files.creatingIn':'Erstellen in: {path}','files.refresh':'Aktualisieren','files.discard':'Verwerfen','files.create':'Erstellen',
   'chat.widgetTitle':'Agenten ausführen','chat.widgetSub':'Schnellzugriff · vollständige Ansicht im Chat-Tab',
   'chat.tabSub':'Vollständiges Gespräch mit dem Runner — derselbe Lauf wie im Widget, mit mehr Platz zum Lesen.',
   'chat.idle':'Geben Sie eine Anfrage ein — der Agent läuft eigenständig in diesem Projekt mit vollem Gedächtnis (<code>CLAUDE.md → AGENTS.md</code>) und aktualisiert das Board live.',
@@ -533,7 +533,7 @@ pt: {
   'team.skillsTitle':'Habilidades','team.skillsSub':'Procedimentos em evolução — o <em>como</em>.',
   'team.standardsLabel':'padrões','team.usesLabel':'usa','team.standardLabel':'padrão',
   'drawer.agent':'Agente','drawer.skill':'Habilidade','drawer.file':'Ficheiro · {rel}',
-  'drawer.loading':'A carregar…','drawer.loadError':'Não foi possível carregar este ficheiro.','files.title':'Ficheiros','files.sub':'Percorra os ficheiros do projeto — veja Markdown e HTML, edite qualquer ficheiro de texto, crie novos.','files.newFile':'+ Ficheiro','files.newFolder':'+ Pasta','files.pickFile':'Selecione um ficheiro para o ver.','files.empty':'Ainda não há ficheiros.','files.edit':'Editar','files.preview':'Pré-visualizar','files.save':'Guardar','files.saved':'✓ guardado','files.saveError':'Não foi possível guardar este ficheiro.','files.loadError':'Não foi possível carregar este ficheiro.','files.binary':'Este ficheiro não pode ser pré-visualizado aqui (não é texto).','files.discardConfirm':'Descartar alterações não guardadas?','files.newFilePrompt':'Caminho do novo ficheiro (ex. notes/todo.md):','files.newFolderPrompt':'Caminho da nova pasta:','files.refresh':'Atualizar','files.discard':'Descartar','files.create':'Criar',
+  'drawer.loading':'A carregar…','drawer.loadError':'Não foi possível carregar este ficheiro.','files.title':'Ficheiros','files.sub':'Percorra os ficheiros do projeto — veja Markdown e HTML, edite qualquer ficheiro de texto, crie novos.','files.newFile':'+ Ficheiro','files.newFolder':'+ Pasta','files.pickFile':'Selecione um ficheiro para o ver.','files.empty':'Ainda não há ficheiros.','files.edit':'Editar','files.preview':'Pré-visualizar','files.save':'Guardar','files.saved':'✓ guardado','files.saveError':'Não foi possível guardar este ficheiro.','files.loadError':'Não foi possível carregar este ficheiro.','files.binary':'Este ficheiro não pode ser pré-visualizado aqui (não é texto).','files.discardConfirm':'Descartar alterações não guardadas?','files.newFilePrompt':'Nome do novo ficheiro (ex. todo.md):','files.newFolderPrompt':'Nome da nova pasta:','files.projectRoot':'raiz do projeto','files.creatingIn':'A criar em: {path}','files.refresh':'Atualizar','files.discard':'Descartar','files.create':'Criar',
   'chat.widgetTitle':'Executar um agente','chat.widgetSub':'Acesso rápido · vista completa no separador Chat',
   'chat.tabSub':'Conversa completa com o executor — a mesma execução do widget, com mais espaço para ler.',
   'chat.idle':'Escreva um pedido — o agente corre sem supervisão neste projeto com toda a sua memória (<code>CLAUDE.md → AGENTS.md</code>) e atualiza o painel em direto.',
@@ -645,7 +645,7 @@ it: {
   'team.skillsTitle':'Skill','team.skillsSub':'Procedure in evoluzione — il <em>come</em>.',
   'team.standardsLabel':'standard','team.usesLabel':'usa','team.standardLabel':'standard',
   'drawer.agent':'Agente','drawer.skill':'Skill','drawer.file':'File · {rel}',
-  'drawer.loading':'Caricamento…','drawer.loadError':'Impossibile caricare questo file.','files.title':'File','files.sub':'Sfoglia i file del progetto — visualizza Markdown e HTML, modifica qualsiasi file di testo, creane di nuovi.','files.newFile':'+ File','files.newFolder':'+ Cartella','files.pickFile':'Seleziona un file per visualizzarlo.','files.empty':'Nessun file ancora.','files.edit':'Modifica','files.preview':'Anteprima','files.save':'Salva','files.saved':'✓ salvato','files.saveError':'Impossibile salvare questo file.','files.loadError':'Impossibile caricare questo file.','files.binary':'Questo file non può essere visualizzato qui (non è testo).','files.discardConfirm':'Scartare le modifiche non salvate?','files.newFilePrompt':'Percorso del nuovo file (es. notes/todo.md):','files.newFolderPrompt':'Percorso della nuova cartella:','files.refresh':'Aggiorna','files.discard':'Scarta','files.create':'Crea',
+  'drawer.loading':'Caricamento…','drawer.loadError':'Impossibile caricare questo file.','files.title':'File','files.sub':'Sfoglia i file del progetto — visualizza Markdown e HTML, modifica qualsiasi file di testo, creane di nuovi.','files.newFile':'+ File','files.newFolder':'+ Cartella','files.pickFile':'Seleziona un file per visualizzarlo.','files.empty':'Nessun file ancora.','files.edit':'Modifica','files.preview':'Anteprima','files.save':'Salva','files.saved':'✓ salvato','files.saveError':'Impossibile salvare questo file.','files.loadError':'Impossibile caricare questo file.','files.binary':'Questo file non può essere visualizzato qui (non è testo).','files.discardConfirm':'Scartare le modifiche non salvate?','files.newFilePrompt':'Nome del nuovo file (es. todo.md):','files.newFolderPrompt':'Nome della nuova cartella:','files.projectRoot':'radice del progetto','files.creatingIn':'Creazione in: {path}','files.refresh':'Aggiorna','files.discard':'Scarta','files.create':'Crea',
   'chat.widgetTitle':'Avvia un agente','chat.widgetSub':'Accesso rapido · vista completa nella scheda Chat',
   'chat.tabSub':'Conversazione completa con l’esecutore — la stessa esecuzione del widget, con più spazio per leggerla.',
   'chat.idle':'Digita una richiesta — l’agente viene eseguito senza supervisione in questo progetto con tutta la sua memoria (<code>CLAUDE.md → AGENTS.md</code>) e aggiorna la bacheca in diretta.',

package/templates/dashboard/public/index.html

@@ -226,6 +226,7 @@
               <button id="filesRefresh" class="btn" type="button" title="Refresh" data-i18n-title="files.refresh">⟳</button>
             </div>
             <div class="files-create-form" id="filesCreateForm" hidden>
+              <div class="files-create-target" id="filesCreateTarget"></div>
               <input type="text" id="filesCreateInput" class="bl-add-input" autocomplete="off" />
               <div class="files-create-actions">
                 <button id="filesCreateGo" class="btn primary" type="button" data-i18n="files.create">Create</button>
@@ -233,6 +234,7 @@
               </div>
               <span class="files-error-tip" id="filesCreateError" hidden></span>
             </div>
+            <div class="f-row f-root" id="filesRootRow" tabindex="0" data-i18n="files.projectRoot">project root</div>
             <div class="files-tree" id="filesTree"></div>
           </div>
           <div class="files-content-col" id="filesContent">

package/templates/dashboard/public/styles.css

@@ -294,7 +294,7 @@ body { background:var(--bg); color:var(--ink); font-family:var(--sans); font-siz
 .team-wrap { max-width:1500px; } /* the agent/skill .cards grid fills more columns instead of sitting capped */
 
 /* Files tab — a two-pane explorer: a collapsible tree, and the selected file's preview/editor */
-.files-wrap { padding:26px 28px 60px; max-width:1600px; height:calc(100vh - 130px); display:flex; flex-direction:column; }
+.files-wrap { padding:26px 28px 16px; max-width:1600px; height:calc(100vh - 90px); display:flex; flex-direction:column; }
 .files-body { flex:1; min-height:0; display:flex; gap:16px; margin-top:8px; }
 .files-tree-col { width:280px; flex-shrink:0; display:flex; flex-direction:column; gap:8px; min-height:0; }
 .files-toolbar { display:flex; gap:8px; }
@@ -313,6 +313,9 @@ body { background:var(--bg); color:var(--ink); font-family:var(--sans); font-siz
 .f-row { display:flex; align-items:center; gap:6px; padding:4px 6px; border-radius:6px; cursor:pointer; font-size:12.5px; white-space:nowrap; color:var(--muted); }
 .f-row:hover { background:var(--surface-2); color:var(--ink); }
 .f-row.is-active { background:var(--surface-2); color:var(--signal); font-weight:600; }
+.f-row.is-target { background:color-mix(in srgb,var(--signal) 14%,transparent); color:var(--ink); } /* the folder new files/folders will be created in */
+.f-root { font-weight:600; margin-bottom:4px; padding-bottom:6px; border-bottom:1px solid var(--line); border-radius:0; }
+.files-create-target { font-size:11px; color:var(--muted); font-family:var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .f-row .f-chevron { width:11px; height:11px; flex-shrink:0; transition:transform .15s; color:var(--faint); }
 .f-row.is-open .f-chevron { transform:rotate(90deg); }
 .f-row .f-name { overflow:hidden; text-overflow:ellipsis; }
@@ -329,6 +332,20 @@ body { background:var(--bg); color:var(--ink); font-family:var(--sans); font-siz
 .files-view::-webkit-scrollbar-track,.files-editor::-webkit-scrollbar-track { background:transparent; }
 .files-view { flex:1; min-height:0; overflow:auto; padding:16px 20px; }
 .files-editor { flex:1; min-height:0; width:100%; border:0; resize:none; padding:16px 20px; font-family:var(--mono); font-size:12.5px; line-height:1.6; background:var(--surface); color:var(--ink); outline:none; }
+/* syntax-highlighted editor: a transparent textarea (real caret, real selection, real typing) sits
+   exactly on top of a highlighted <pre><code> backdrop showing through it — the standard technique
+   for highlighting without a full editor component. Both share identical font metrics so characters
+   line up; the backdrop never scrolls on its own (overflow:hidden), its scroll position is just
+   copied from the textarea on every scroll event. */
+.files-code-wrap { position:relative; flex:1; min-height:0; }
+.files-code-backdrop { position:absolute; inset:0; margin:0; overflow:hidden; pointer-events:none; white-space:pre-wrap; word-break:break-word; padding:16px 20px; font-family:var(--mono); font-size:12.5px; line-height:1.6; color:var(--ink); background:transparent; }
+.files-code-backdrop code { font:inherit; background:none; }
+.files-code-wrap .files-code-input { position:absolute; inset:0; background:transparent; color:transparent; caret-color:var(--ink); white-space:pre-wrap; word-break:break-word; }
+.hl-comment { color:var(--faint); font-style:italic; }
+.hl-string { color:var(--s-done); }
+.hl-number { color:var(--cool); }
+.hl-keyword { color:var(--signal); font-weight:600; }
+.hl-tag { color:var(--s-in_progress); }
 .files-iframe { flex:1; min-height:0; width:100%; border:0; background:#fff; }
 .files-md-toolbar { display:flex; gap:6px; padding:8px 14px; border-bottom:1px solid var(--line); }
 .files-md-toolbar button { font-family:var(--mono); font-size:12px; padding:4px 9px; border:1px solid var(--line); border-radius:6px; background:var(--surface-2); color:var(--ink); cursor:pointer; }