spectoflow 0.21.1 → 0.22.0

package/templates/dashboard/public/designs/console.css

@@ -31,33 +31,32 @@ html[data-design="console"][data-theme="light"] {
   --cx-grid:rgba(15,23,40,.06);
 }
 
-/* ============ AMBIENT BACKDROP ============ */
+/* ============ AMBIENT BACKDROP — a plain grid texture, no color glow ============ */
 html[data-design="console"] body { background:var(--bg); position:relative; }
 html[data-design="console"] body::before {
   content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
   background:
-    radial-gradient(900px 500px at 10% -10%, color-mix(in srgb,var(--signal) 14%,transparent), transparent 60%),
-    radial-gradient(800px 500px at 100% 0%, color-mix(in srgb,var(--cool) 14%,transparent), transparent 60%),
     linear-gradient(var(--cx-grid) 1px, transparent 1px), linear-gradient(90deg, var(--cx-grid) 1px, transparent 1px);
-  background-size:auto,auto,32px 32px,32px 32px;
+  background-size:32px 32px,32px 32px;
 }
 html[data-design="console"] .topbar,
 html[data-design="console"] .stage { position:relative; z-index:1; }
 
 /* ============ LEFT ICON RAIL ============ */
 html[data-design="console"] nav.tabs#tabs {
-  position:fixed; left:0; top:0; bottom:0; height:100vh; z-index:30; width:var(--cx-rail-w);
+  position:fixed; left:0; top:0; bottom:44px; z-index:30; width:var(--cx-rail-w);
   display:flex; flex-direction:column; align-items:center; gap:6px;
   padding:16px 10px; overflow-y:auto; overflow-x:hidden; max-width:none;
   background:color-mix(in srgb,var(--surface) 84%,transparent); backdrop-filter:blur(10px);
   border-right:1px solid var(--line); border-bottom:0;
+  transition:width .18s ease;
 }
-html[data-design="console"] .topbar { padding-left:calc(var(--cx-rail-w) + 16px); }
-html[data-design="console"] .stage { margin-left:var(--cx-rail-w); }
+html[data-design="console"] .topbar { padding-left:calc(var(--cx-rail-w) + 16px); transition:padding-left .18s ease; }
+html[data-design="console"] .stage { margin-left:var(--cx-rail-w); transition:margin-left .18s ease; }
 /* .app-footer is a sibling of .stage, not inside it — the rail is fixed to the viewport (not just
    .stage), so without this it clips the footer's left edge (the brand name loses its first letters)
    at every scroll position, not just at the top. */
-html[data-design="console"] .app-footer { margin-left:var(--cx-rail-w); }
+html[data-design="console"] .app-footer { margin-left:var(--cx-rail-w); transition:margin-left .18s ease; }
 /* The header brand mark reads too small at the base 26px against this design's darker, denser
    topbar — give it more presence. The footer's own (deliberately smaller) logo keeps its existing,
    more specific rule and is unaffected. */
@@ -73,7 +72,7 @@ html[data-design="console"] nav.tabs#tabs .tab.is-active {
   color:var(--signal); background:var(--surface-2);
   box-shadow:inset 3px 0 0 var(--signal);
 }
-html[data-design="console"] nav.tabs#tabs .tab-ico { width:19px; height:19px; }
+html[data-design="console"] nav.tabs#tabs .tab-ico { width:19px; height:19px; flex-shrink:0; }
 html[data-design="console"] nav.tabs#tabs .tab-label {
   position:absolute; left:60px; top:50%; transform:translateY(-50%) translateX(-4px);
   background:var(--surface-3); color:var(--ink); padding:5px 9px; border-radius:7px;
@@ -89,6 +88,32 @@ html[data-design="console"] nav.tabs#tabs .tab-badge {
   position:absolute; top:2px; right:4px; margin-left:0; min-width:15px; height:15px; font-size:9.5px;
 }
 
+/* ---- rail expand/collapse toggle — icon-only stays the default; expanded shows menu names ---- */
+html[data-design="console"] #cxRailToggle {
+  position:fixed; left:0; bottom:0; z-index:31; width:var(--cx-rail-w); height:44px;
+  display:flex; align-items:center; justify-content:center; gap:8px; padding:0;
+  background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:blur(10px);
+  border-right:1px solid var(--line); border-top:1px solid var(--line);
+  color:var(--muted); cursor:pointer; transition:width .18s ease,color .18s ease;
+}
+html[data-design="console"] #cxRailToggle:hover,
+html[data-design="console"] #cxRailToggle:focus-visible { color:var(--ink); }
+html[data-design="console"] #cxRailToggle svg { width:16px; height:16px; flex-shrink:0; transition:transform .18s ease; }
+html[data-design="console"] #cxRailToggle .cx-rail-toggle-label { display:none; font-size:11.5px; font-weight:600; white-space:nowrap; }
+html[data-design="console"][data-rail="expanded"] { --cx-rail-w:208px; }
+html[data-design="console"][data-rail="expanded"] nav.tabs#tabs { align-items:stretch; }
+html[data-design="console"][data-rail="expanded"] nav.tabs#tabs .tab {
+  flex-direction:row; justify-content:flex-start; align-items:center; gap:12px;
+  width:100%; height:42px; padding:0 12px;
+}
+html[data-design="console"][data-rail="expanded"] nav.tabs#tabs .tab-label {
+  position:static; opacity:1; pointer-events:none; transform:none; background:none; color:inherit;
+  border:0; box-shadow:none; padding:0; font-weight:500;
+}
+html[data-design="console"][data-rail="expanded"] #cxRailToggle { justify-content:flex-start; padding:0 15px; }
+html[data-design="console"][data-rail="expanded"] #cxRailToggle svg { transform:rotate(180deg); }
+html[data-design="console"][data-rail="expanded"] #cxRailToggle .cx-rail-toggle-label { display:inline; }
+
 /* ============ REVEAL + HOVER LIFT (bento tiles / cards) ============ */
 html[data-design="console"] .kpi,
 html[data-design="console"] .ocard,
@@ -190,6 +215,7 @@ html[data-design="console"][data-theme="light"] .cx-cmdk { background:rgba(15,23
   html[data-design="console"] .stage { margin-left:0; margin-bottom:64px; }
   html[data-design="console"] .app-footer { margin-left:0; }
   html[data-design="console"] nav.tabs#tabs .tab-label { display:none !important; }
+  html[data-design="console"] #cxRailToggle { display:none; } /* the bottom bar has no room for it, and there's no rail width left to expand */
 }
 
 @media (prefers-reduced-motion: reduce) {

package/templates/dashboard/public/designs/console.js

@@ -131,11 +131,47 @@
     tabsHome = null;
   }
 
+  // ---- rail expand/collapse — icon-only stays the default; a viewer can opt into showing the
+  // menu names too, persisted per browser (like the Board's List/Kanban toggle). ----
+  var railToggle = null;
+  function railExpanded() {
+    try { return localStorage.getItem('spf-console-rail') === 'expanded'; } catch (e) { return false; }
+  }
+  function applyRailState() {
+    var expanded = railExpanded();
+    document.documentElement.setAttribute('data-rail', expanded ? 'expanded' : 'collapsed');
+    if (railToggle) railToggle.setAttribute('aria-label', expanded ? 'Collapse sidebar' : 'Expand sidebar');
+    var label = railToggle && railToggle.querySelector('.cx-rail-toggle-label');
+    if (label) label.textContent = expanded ? 'Collapse' : 'Expand';
+  }
+  function toggleRail() {
+    var expanded = !railExpanded();
+    try { localStorage.setItem('spf-console-rail', expanded ? 'expanded' : 'collapsed'); } catch (e) {}
+    applyRailState();
+  }
+  function injectRailToggle() {
+    if (railToggle || document.getElementById('cxRailToggle')) return;
+    railToggle = document.createElement('button');
+    railToggle.id = 'cxRailToggle';
+    railToggle.type = 'button';
+    railToggle.innerHTML =
+      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>' +
+      '<span class="cx-rail-toggle-label"></span>';
+    railToggle.addEventListener('click', toggleRail);
+    document.body.appendChild(railToggle);
+    applyRailState();
+  }
+  function removeRailToggle() {
+    if (railToggle) { railToggle.remove(); railToggle = null; }
+    document.documentElement.removeAttribute('data-rail');
+  }
+
   function activate() {
     if (active) return;
     active = true;
     dockRail();
     injectButton();
+    injectRailToggle();
     document.addEventListener('keydown', onKeydown);
   }
 
@@ -144,6 +180,7 @@
     active = false;
     close();
     removeButton();
+    removeRailToggle();
     undockRail();
     document.removeEventListener('keydown', onKeydown);
   }

package/templates/dashboard/public/i18n.js

@@ -20,7 +20,7 @@
 const I18N = {
 en: {
   'nav.board':'Board','nav.requests':'Requests','nav.attention':'Attention','nav.backlog':'Backlog',
-  'nav.workflow':'Workflow','nav.team':'Agents & Skills','nav.chat':'Chat','nav.info':'Info','nav.docs':'Documentation','nav.settings':'Personalize',
+  'nav.workflow':'Workflow','nav.team':'Agents & Skills','nav.files':'Files','nav.chat':'Chat','nav.info':'Info','nav.docs':'Documentation','nav.settings':'Personalize',
   'status.todo':'To do','status.in_progress':'In progress','status.to_validate':'To validate',
   'status.to_analyze':'To analyze','status.done':'Done','status.blocked':'Blocked',
   'filter.all':'All','filter.open':'Open','filter.resolved':'Resolved',
@@ -62,7 +62,7 @@ en: {
   'col.id':'ID','col.title':'Title','col.phase':'Phase','col.status':'Status','col.owner':'Owner','col.level':'Level',
   'backlog.pagerTask':'{n} task','backlog.pagerTasks':'{n} tasks',
   'backlog.pagerRange':'{from}–{to} of {total} · page {page}/{pages}',
-  'backlog.prev':'‹ Prev','backlog.next':'Next ›',
+  'backlog.prev':'‹ Prev','backlog.next':'Next ›','backlog.addTask':'+ Add task','backlog.addTitlePh':'Task title…','backlog.addPhasePh':'Phase…','backlog.addOwnerPh':'Owner…','backlog.addSubmit':'Add','backlog.addCancel':'Cancel','backlog.addTitleRequired':'A title is required.','backlog.addFailed':'Could not add the task.',
   'workflow.title':'Active workflow',
   'workflow.sub':'The pipeline your requests flow through — from idea to shipped, spec-driven. <strong>Click a step</strong> to see what it does and turn it on or off (this edits <code>.spectoflow/workflow.md</code>). Enabled steps run in order; the orchestrator gates each one by your <em>mode</em> and <em>policy</em>. Optional steps stay off until you switch them on.',
   'workflow.stepsEnabled':'{enabled} of {total} steps enabled — click a step to see what it does',
@@ -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.',
+  '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',
   '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.',
@@ -103,7 +103,7 @@ en: {
   'field.design':'Dashboard design','field.mode':'Autonomy mode','field.lang':'Output language',
   'mode.autopilot.desc':'autopilot — run freely, ask only on policy gates',
   'mode.semi.desc':'semi — autopilot + policy approvals','mode.manual.desc':'manual — approve every step',
-  'settings.saved':'✓ saved','field.plansFolder':'Plans folder','field.specsFolder':'Specs folder',
+  'settings.saved':'✓ saved','settings.group.execution':'Agent & automation','settings.group.appearance':'Appearance & language','field.plansFolder':'Plans folder','field.specsFolder':'Specs folder',
   'field.frameworkVersion':'Framework version',
   'task.status':'Status','task.tests':'Tests','task.failing':'{n} failing','task.passing':'{n} passing',
   'task.failingPassing':'{f} failing, {p} passing','task.comments':'Comments','task.noComments':'No comments.',
@@ -132,7 +132,7 @@ en: {
 },
 fr: {
   'nav.board':'Tableau','nav.requests':'Demandes','nav.attention':'Attention','nav.backlog':'Backlog',
-  'nav.workflow':'Workflow','nav.team':'Agents et compétences','nav.chat':'Chat','nav.info':'Infos','nav.docs':'Documentation','nav.settings':'Personnalisation',
+  'nav.workflow':'Workflow','nav.team':'Agents et compétences','nav.files':'Fichiers','nav.chat':'Chat','nav.info':'Infos','nav.docs':'Documentation','nav.settings':'Personnalisation',
   'status.todo':'À faire','status.in_progress':'En cours','status.to_validate':'À valider',
   'status.to_analyze':'À analyser','status.done':'Terminé','status.blocked':'Bloqué',
   'filter.all':'Tous','filter.open':'Ouverts','filter.resolved':'Résolus',
@@ -174,7 +174,7 @@ fr: {
   'col.id':'ID','col.title':'Titre','col.phase':'Phase','col.status':'Statut','col.owner':'Responsable','col.level':'Niveau',
   'backlog.pagerTask':'{n} tâche','backlog.pagerTasks':'{n} tâches',
   'backlog.pagerRange':'{from}–{to} sur {total} · page {page}/{pages}',
-  'backlog.prev':'‹ Précédent','backlog.next':'Suivant ›',
+  'backlog.prev':'‹ Précédent','backlog.next':'Suivant ›','backlog.addTask':'+ Ajouter une tâche','backlog.addTitlePh':'Titre de la tâche…','backlog.addPhasePh':'Phase…','backlog.addOwnerPh':'Responsable…','backlog.addSubmit':'Ajouter','backlog.addCancel':'Annuler','backlog.addTitleRequired':'Un titre est requis.','backlog.addFailed':'Impossible d’ajouter la tâche.',
   'workflow.title':'Workflow actif',
   'workflow.sub':'Le pipeline que suivent vos demandes — de l’idée jusqu’à la livraison, spec-driven. <strong>Cliquez sur une étape</strong> pour voir ce qu’elle fait et l’activer ou la désactiver (cela modifie <code>.spectoflow/workflow.md</code>). Les étapes activées s’exécutent dans l’ordre ; l’orchestrateur filtre chacune selon votre <em>mode</em> et votre <em>policy</em>. Les étapes optionnelles restent désactivées tant que vous ne les activez pas.',
   'workflow.stepsEnabled':'{enabled} étape(s) activée(s) sur {total} — cliquez sur une étape pour voir ce qu’elle fait',
@@ -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.',
+  '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',
   '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.',
@@ -215,7 +215,7 @@ fr: {
   'field.design':'Design du tableau de bord','field.mode':'Mode d’autonomie','field.lang':'Langue de sortie',
   'mode.autopilot.desc':'autopilot — s’exécute librement, ne demande qu’aux points de policy',
   'mode.semi.desc':'semi — autopilot + approbations de policy','mode.manual.desc':'manual — approuve chaque étape',
-  'settings.saved':'✓ enregistré','field.plansFolder':'Dossier des plans','field.specsFolder':'Dossier des specs',
+  'settings.saved':'✓ enregistré','settings.group.execution':'Agent et automatisation','settings.group.appearance':'Apparence et langue','field.plansFolder':'Dossier des plans','field.specsFolder':'Dossier des specs',
   'field.frameworkVersion':'Version du framework',
   'task.status':'Statut','task.tests':'Tests','task.failing':'{n} en échec','task.passing':'{n} réussi(s)',
   'task.failingPassing':'{f} en échec, {p} réussi(s)','task.comments':'Commentaires','task.noComments':'Aucun commentaire.',
@@ -244,7 +244,7 @@ fr: {
 },
 es: {
   'nav.board':'Tablero','nav.requests':'Solicitudes','nav.attention':'Atención','nav.backlog':'Backlog',
-  'nav.workflow':'Workflow','nav.team':'Agentes y habilidades','nav.chat':'Chat','nav.info':'Info','nav.docs':'Documentación','nav.settings':'Personalizar',
+  'nav.workflow':'Workflow','nav.team':'Agentes y habilidades','nav.files':'Archivos','nav.chat':'Chat','nav.info':'Info','nav.docs':'Documentación','nav.settings':'Personalizar',
   'status.todo':'Por hacer','status.in_progress':'En curso','status.to_validate':'Por validar',
   'status.to_analyze':'Por analizar','status.done':'Hecho','status.blocked':'Bloqueado',
   'filter.all':'Todos','filter.open':'Abiertos','filter.resolved':'Resueltos',
@@ -286,7 +286,7 @@ es: {
   'col.id':'ID','col.title':'Título','col.phase':'Fase','col.status':'Estado','col.owner':'Responsable','col.level':'Nivel',
   'backlog.pagerTask':'{n} tarea','backlog.pagerTasks':'{n} tareas',
   'backlog.pagerRange':'{from}–{to} de {total} · página {page}/{pages}',
-  'backlog.prev':'‹ Anterior','backlog.next':'Siguiente ›',
+  'backlog.prev':'‹ Anterior','backlog.next':'Siguiente ›','backlog.addTask':'+ Añadir tarea','backlog.addTitlePh':'Título de la tarea…','backlog.addPhasePh':'Fase…','backlog.addOwnerPh':'Responsable…','backlog.addSubmit':'Añadir','backlog.addCancel':'Cancelar','backlog.addTitleRequired':'Se requiere un título.','backlog.addFailed':'No se pudo añadir la tarea.',
   'workflow.title':'Workflow activo',
   'workflow.sub':'El pipeline por el que fluyen tus solicitudes — de la idea a la entrega, guiado por especificaciones. <strong>Haz clic en un paso</strong> para ver qué hace y activarlo o desactivarlo (esto edita <code>.spectoflow/workflow.md</code>). Los pasos activados se ejecutan en orden; el orquestador filtra cada uno según tu <em>modo</em> y tu <em>policy</em>. Los pasos opcionales permanecen desactivados hasta que los actives.',
   'workflow.stepsEnabled':'{enabled} de {total} pasos activados — haz clic en un paso para ver qué hace',
@@ -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.',
+  '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',
   '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.',
@@ -327,7 +327,7 @@ es: {
   'field.design':'Diseño del panel','field.mode':'Modo de autonomía','field.lang':'Idioma de salida',
   'mode.autopilot.desc':'autopilot — actúa con libertad, solo pregunta en los puntos de policy',
   'mode.semi.desc':'semi — autopilot + aprobaciones de policy','mode.manual.desc':'manual — aprueba cada paso',
-  'settings.saved':'✓ guardado','field.plansFolder':'Carpeta de planes','field.specsFolder':'Carpeta de specs',
+  'settings.saved':'✓ guardado','settings.group.execution':'Agente y automatización','settings.group.appearance':'Apariencia e idioma','field.plansFolder':'Carpeta de planes','field.specsFolder':'Carpeta de specs',
   'field.frameworkVersion':'Versión del framework',
   'task.status':'Estado','task.tests':'Pruebas','task.failing':'{n} fallando','task.passing':'{n} superadas',
   'task.failingPassing':'{f} fallando, {p} superadas','task.comments':'Comentarios','task.noComments':'Sin comentarios.',
@@ -356,7 +356,7 @@ es: {
 },
 de: {
   'nav.board':'Board','nav.requests':'Anfragen','nav.attention':'Hinweise','nav.backlog':'Backlog',
-  'nav.workflow':'Workflow','nav.team':'Agenten & Skills','nav.chat':'Chat','nav.info':'Info','nav.docs':'Dokumentation','nav.settings':'Personalisieren',
+  'nav.workflow':'Workflow','nav.team':'Agenten & Skills','nav.files':'Dateien','nav.chat':'Chat','nav.info':'Info','nav.docs':'Dokumentation','nav.settings':'Personalisieren',
   'status.todo':'Offen','status.in_progress':'In Arbeit','status.to_validate':'Zu prüfen',
   'status.to_analyze':'Zu analysieren','status.done':'Erledigt','status.blocked':'Blockiert',
   'filter.all':'Alle','filter.open':'Offen','filter.resolved':'Erledigt',
@@ -398,7 +398,7 @@ de: {
   'col.id':'ID','col.title':'Titel','col.phase':'Phase','col.status':'Status','col.owner':'Verantwortlich','col.level':'Stufe',
   'backlog.pagerTask':'{n} Aufgabe','backlog.pagerTasks':'{n} Aufgaben',
   'backlog.pagerRange':'{from}–{to} von {total} · Seite {page}/{pages}',
-  'backlog.prev':'‹ Zurück','backlog.next':'Weiter ›',
+  'backlog.prev':'‹ Zurück','backlog.next':'Weiter ›','backlog.addTask':'+ Aufgabe hinzufügen','backlog.addTitlePh':'Aufgabentitel…','backlog.addPhasePh':'Phase…','backlog.addOwnerPh':'Verantwortlich…','backlog.addSubmit':'Hinzufügen','backlog.addCancel':'Abbrechen','backlog.addTitleRequired':'Ein Titel ist erforderlich.','backlog.addFailed':'Aufgabe konnte nicht hinzugefügt werden.',
   'workflow.title':'Aktiver Workflow',
   'workflow.sub':'Die Pipeline, die Ihre Anfragen durchlaufen — von der Idee bis zur Auslieferung, spezifikationsgetrieben. <strong>Klicken Sie auf einen Schritt</strong>, um zu sehen, was er tut, und ihn ein- oder auszuschalten (dies bearbeitet <code>.spectoflow/workflow.md</code>). Aktivierte Schritte laufen der Reihe nach; der Orchestrator prüft jeden anhand Ihres <em>Modus</em> und Ihrer <em>Policy</em>. Optionale Schritte bleiben aus, bis Sie sie einschalten.',
   'workflow.stepsEnabled':'{enabled} von {total} Schritten aktiviert — auf einen Schritt klicken, um zu sehen, was er tut',
@@ -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.',
+  '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',
   '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.',
@@ -439,7 +439,7 @@ de: {
   'field.design':'Dashboard-Design','field.mode':'Autonomiemodus','field.lang':'Ausgabesprache',
   'mode.autopilot.desc':'autopilot — läuft frei, fragt nur an Policy-Punkten',
   'mode.semi.desc':'semi — autopilot + Policy-Freigaben','mode.manual.desc':'manual — jeden Schritt bestätigen',
-  'settings.saved':'✓ gespeichert','field.plansFolder':'Plan-Ordner','field.specsFolder':'Spec-Ordner',
+  'settings.saved':'✓ gespeichert','settings.group.execution':'Agent & Automatisierung','settings.group.appearance':'Erscheinungsbild & Sprache','field.plansFolder':'Plan-Ordner','field.specsFolder':'Spec-Ordner',
   'field.frameworkVersion':'Framework-Version',
   'task.status':'Status','task.tests':'Tests','task.failing':'{n} fehlgeschlagen','task.passing':'{n} bestanden',
   'task.failingPassing':'{f} fehlgeschlagen, {p} bestanden','task.comments':'Kommentare','task.noComments':'Keine Kommentare.',
@@ -468,7 +468,7 @@ de: {
 },
 pt: {
   'nav.board':'Painel','nav.requests':'Pedidos','nav.attention':'Atenção','nav.backlog':'Backlog',
-  'nav.workflow':'Workflow','nav.team':'Agentes e habilidades','nav.chat':'Chat','nav.info':'Info','nav.docs':'Documentação','nav.settings':'Personalizar',
+  'nav.workflow':'Workflow','nav.team':'Agentes e habilidades','nav.files':'Ficheiros','nav.chat':'Chat','nav.info':'Info','nav.docs':'Documentação','nav.settings':'Personalizar',
   'status.todo':'A fazer','status.in_progress':'Em curso','status.to_validate':'Por validar',
   'status.to_analyze':'Por analisar','status.done':'Concluído','status.blocked':'Bloqueado',
   'filter.all':'Todos','filter.open':'Abertos','filter.resolved':'Resolvidos',
@@ -510,7 +510,7 @@ pt: {
   'col.id':'ID','col.title':'Título','col.phase':'Fase','col.status':'Estado','col.owner':'Responsável','col.level':'Nível',
   'backlog.pagerTask':'{n} tarefa','backlog.pagerTasks':'{n} tarefas',
   'backlog.pagerRange':'{from}–{to} de {total} · página {page}/{pages}',
-  'backlog.prev':'‹ Anterior','backlog.next':'Seguinte ›',
+  'backlog.prev':'‹ Anterior','backlog.next':'Seguinte ›','backlog.addTask':'+ Adicionar tarefa','backlog.addTitlePh':'Título da tarefa…','backlog.addPhasePh':'Fase…','backlog.addOwnerPh':'Responsável…','backlog.addSubmit':'Adicionar','backlog.addCancel':'Cancelar','backlog.addTitleRequired':'É necessário um título.','backlog.addFailed':'Não foi possível adicionar a tarefa.',
   'workflow.title':'Workflow ativo',
   'workflow.sub':'O pipeline por onde os seus pedidos passam — da ideia à entrega, guiado por especificações. <strong>Clique numa etapa</strong> para ver o que faz e ativá-la ou desativá-la (isto edita <code>.spectoflow/workflow.md</code>). As etapas ativas correm em ordem; o orquestrador filtra cada uma segundo o seu <em>modo</em> e a sua <em>policy</em>. As etapas opcionais ficam desligadas até as ativar.',
   'workflow.stepsEnabled':'{enabled} de {total} etapas ativadas — clique numa etapa para ver o que faz',
@@ -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.',
+  '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',
   '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.',
@@ -551,7 +551,7 @@ pt: {
   'field.design':'Design do painel','field.mode':'Modo de autonomia','field.lang':'Idioma de saída',
   'mode.autopilot.desc':'autopilot — corre livremente, só pergunta nos pontos de policy',
   'mode.semi.desc':'semi — autopilot + aprovações de policy','mode.manual.desc':'manual — aprova cada etapa',
-  'settings.saved':'✓ guardado','field.plansFolder':'Pasta de planos','field.specsFolder':'Pasta de specs',
+  'settings.saved':'✓ guardado','settings.group.execution':'Agente e automação','settings.group.appearance':'Aparência e idioma','field.plansFolder':'Pasta de planos','field.specsFolder':'Pasta de specs',
   'field.frameworkVersion':'Versão do framework',
   'task.status':'Estado','task.tests':'Testes','task.failing':'{n} a falhar','task.passing':'{n} bem-sucedido(s)',
   'task.failingPassing':'{f} a falhar, {p} bem-sucedido(s)','task.comments':'Comentários','task.noComments':'Sem comentários.',
@@ -580,7 +580,7 @@ pt: {
 },
 it: {
   'nav.board':'Bacheca','nav.requests':'Richieste','nav.attention':'Attenzione','nav.backlog':'Backlog',
-  'nav.workflow':'Workflow','nav.team':'Agenti e competenze','nav.chat':'Chat','nav.info':'Info','nav.docs':'Documentazione','nav.settings':'Personalizza',
+  'nav.workflow':'Workflow','nav.team':'Agenti e competenze','nav.files':'File','nav.chat':'Chat','nav.info':'Info','nav.docs':'Documentazione','nav.settings':'Personalizza',
   'status.todo':'Da fare','status.in_progress':'In corso','status.to_validate':'Da convalidare',
   'status.to_analyze':'Da analizzare','status.done':'Fatto','status.blocked':'Bloccato',
   'filter.all':'Tutti','filter.open':'Aperti','filter.resolved':'Risolti',
@@ -622,7 +622,7 @@ it: {
   'col.id':'ID','col.title':'Titolo','col.phase':'Fase','col.status':'Stato','col.owner':'Responsabile','col.level':'Livello',
   'backlog.pagerTask':'{n} attività','backlog.pagerTasks':'{n} attività',
   'backlog.pagerRange':'{from}–{to} di {total} · pagina {page}/{pages}',
-  'backlog.prev':'‹ Precedente','backlog.next':'Successiva ›',
+  'backlog.prev':'‹ Precedente','backlog.next':'Successiva ›','backlog.addTask':'+ Aggiungi attività','backlog.addTitlePh':'Titolo attività…','backlog.addPhasePh':'Fase…','backlog.addOwnerPh':'Responsabile…','backlog.addSubmit':'Aggiungi','backlog.addCancel':'Annulla','backlog.addTitleRequired':'È richiesto un titolo.','backlog.addFailed':'Impossibile aggiungere l’attività.',
   'workflow.title':'Workflow attivo',
   'workflow.sub':'La pipeline che seguono le tue richieste — dall’idea alla consegna, guidata dalle specifiche. <strong>Clicca su una fase</strong> per vedere cosa fa e attivarla o disattivarla (questo modifica <code>.spectoflow/workflow.md</code>). Le fasi attive vengono eseguite in ordine; l’orchestratore filtra ciascuna in base alla tua <em>modalità</em> e alla tua <em>policy</em>. Le fasi opzionali restano disattivate finché non le attivi.',
   'workflow.stepsEnabled':'{enabled} di {total} fasi attivate — clicca su una fase per vedere cosa fa',
@@ -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.',
+  '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',
   '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.',
@@ -663,7 +663,7 @@ it: {
   'field.design':'Design della dashboard','field.mode':'Modalità di autonomia','field.lang':'Lingua di output',
   'mode.autopilot.desc':'autopilot — agisce liberamente, chiede solo ai punti di policy',
   'mode.semi.desc':'semi — autopilot + approvazioni di policy','mode.manual.desc':'manual — approva ogni fase',
-  'settings.saved':'✓ salvato','field.plansFolder':'Cartella dei piani','field.specsFolder':'Cartella delle specs',
+  'settings.saved':'✓ salvato','settings.group.execution':'Agente e automazione','settings.group.appearance':'Aspetto e lingua','field.plansFolder':'Cartella dei piani','field.specsFolder':'Cartella delle specs',
   'field.frameworkVersion':'Versione del framework',
   'task.status':'Stato','task.tests':'Test','task.failing':'{n} falliti','task.passing':'{n} superati',
   'task.failingPassing':'{f} falliti, {p} superati','task.comments':'Commenti','task.noComments':'Nessun commento.',

package/templates/dashboard/public/icons.js

@@ -5,16 +5,16 @@
   const wrap = (inner, extra) => `<svg viewBox="0 0 18 18" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"${extra ? ' ' + extra : ''}>${inner}</svg>`;
 
   const ICON = {
-    // kanban columns
-    board: wrap('<rect x="2" y="3" width="4" height="12" rx="1"/><rect x="7" y="3" width="4" height="8" rx="1"/><rect x="12" y="3" width="4" height="10" rx="1"/>'),
+    // kanban board — 3 equal columns, each holding a task-card line, not a bar chart
+    board: wrap('<rect x="2" y="3" width="4.2" height="12" rx="1"/><rect x="6.9" y="3" width="4.2" height="12" rx="1"/><rect x="11.8" y="3" width="4.2" height="12" rx="1"/><line x1="3.1" y1="5.7" x2="5" y2="5.7"/><line x1="8" y1="5.7" x2="9.9" y2="5.7"/><line x1="12.9" y1="5.7" x2="14.8" y2="5.7"/>'),
     // inbox tray — tasks awaiting a decision
     requests: wrap('<path d="M2.6 10h3.2l1.4 2h3.6l1.4-2h3.2"/><path d="M2.6 10 3.9 4.6a1 1 0 0 1 1-.8h7.2a1 1 0 0 1 1 .8L14.4 10"/><path d="M2.6 10v3a1 1 0 0 0 1 1h9.8a1 1 0 0 0 1-1v-3"/>'),
     // stacked list
     backlog: wrap('<line x1="3" y1="5" x2="15" y2="5"/><line x1="3" y1="9" x2="15" y2="9"/><line x1="3" y1="13" x2="10.5" y2="13"/>'),
     // connected nodes — pipeline
     workflow: wrap('<circle cx="3.4" cy="9" r="1.7"/><circle cx="9" cy="9" r="1.7"/><circle cx="14.6" cy="9" r="1.7"/><line x1="5.1" y1="9" x2="7.3" y2="9"/><line x1="10.7" y1="9" x2="12.9" y2="9"/>'),
-    // two people — agents & skills
-    agents: wrap('<circle cx="6.4" cy="6.1" r="2.1"/><path d="M2.6 15c0-2.5 1.7-4 3.8-4s3.8 1.5 3.8 4"/><circle cx="13.1" cy="7.1" r="1.7"/><path d="M10.9 15c.2-2 1.5-3.1 3.1-3.1 1.8 0 3.4 1.3 3.4 3.1"/>'),
+    // agent head — AI personas + skills, not literal people
+    agents: wrap('<rect x="4" y="6" width="10" height="8" rx="2.2"/><line x1="9" y1="6" x2="9" y2="3.1"/><circle cx="9" cy="2.3" r="0.9" fill="currentColor" stroke="none"/><line x1="4" y1="9.6" x2="2.3" y2="9.6"/><line x1="14" y1="9.6" x2="15.7" y2="9.6"/><circle cx="6.9" cy="10" r="1" fill="currentColor" stroke="none"/><circle cx="11.1" cy="10" r="1" fill="currentColor" stroke="none"/>'),
     // speech bubble
     chat: wrap('<path d="M3 4.4h12a1 1 0 0 1 1 1V11a1 1 0 0 1-1 1H8.2l-3.3 2.6a.4.4 0 0 1-.65-.31V12H3a1 1 0 0 1-1-1V5.4a1 1 0 0 1 1-1z"/>'),
     // info circle
@@ -23,10 +23,12 @@
     run: wrap('<path d="M5.4 3.6v10.8l9-5.4z" fill="currentColor" stroke="none"/>'),
     // flag — points needing attention
     attention: wrap('<line x1="4.5" y1="2.4" x2="4.5" y2="15.6"/><path d="M4.5 3.4h8.2l-1.7 2.6 1.7 2.6H4.5z"/>'),
-    // gear — settings (proper cog with teeth)
-    settings: wrap('<circle cx="9" cy="9" r="2.4"/><path d="M9 1.6v2.2M9 14.2v2.2M16.4 9h-2.2M3.8 9H1.6M14.2 3.8l-1.55 1.55M5.35 12.65 3.8 14.2M14.2 14.2l-1.55-1.55M5.35 5.35 3.8 3.8"/>'),
+    // preference sliders — personalize (each track's handle sits at its own setting, not a generic gear)
+    settings: wrap('<line x1="3" y1="5" x2="15" y2="5"/><circle cx="7" cy="5" r="1.6" fill="currentColor" stroke="none"/><line x1="3" y1="9" x2="15" y2="9"/><circle cx="11.5" cy="9" r="1.6" fill="currentColor" stroke="none"/><line x1="3" y1="13" x2="15" y2="13"/><circle cx="6" cy="13" r="1.6" fill="currentColor" stroke="none"/>'),
     // open book — documentation
     docs: wrap('<path d="M9 5.4C7.4 4.2 5.2 3.7 2.8 4v9c2.4-.3 4.6.2 6.2 1.4 1.6-1.2 3.8-1.7 6.2-1.4V4c-2.4-.3-4.6.2-6.2 1.4z"/><line x1="9" y1="5.4" x2="9" y2="14.4"/>'),
+    // folder — the project's file tree
+    files: wrap('<path d="M2.6 5.4a1 1 0 0 1 1-1h3.1l1.2 1.6h6.5a1 1 0 0 1 1 1v6.6a1 1 0 0 1-1 1H3.6a1 1 0 0 1-1-1z"/>'),
     // crescent moon — theme toggle
     theme: wrap('<path d="M14.6 10.8A5.6 5.6 0 0 1 7.2 3.4 5.7 5.7 0 1 0 14.6 10.8z"/>'),
   };

package/templates/dashboard/public/index.html

@@ -56,9 +56,10 @@
       <button class="tab" data-tab="backlog" data-i18n-title="nav.backlog" title="Backlog"><span class="tab-ico" data-icon="backlog"></span><span class="tab-label" data-i18n="nav.backlog">Backlog</span></button>
       <button class="tab" data-tab="workflow" data-i18n-title="nav.workflow" title="Workflow"><span class="tab-ico" data-icon="workflow"></span><span class="tab-label" data-i18n="nav.workflow">Workflow</span></button>
       <button class="tab" data-tab="team" data-i18n-title="nav.team" title="Agents &amp; Skills"><span class="tab-ico" data-icon="agents"></span><span class="tab-label" data-i18n="nav.team">Agents &amp; Skills</span></button>
+      <button class="tab" data-tab="files" data-i18n-title="nav.files" title="Files"><span class="tab-ico" data-icon="files"></span><span class="tab-label" data-i18n="nav.files">Files</span></button>
       <button class="tab" data-tab="info" data-i18n-title="nav.info" title="Info"><span class="tab-ico" data-icon="info"></span><span class="tab-label" data-i18n="nav.info">Info</span></button>
       <button class="tab" data-tab="docs" data-i18n-title="nav.docs" title="Documentation"><span class="tab-ico" data-icon="docs"></span><span class="tab-label" data-i18n="nav.docs">Documentation</span></button>
-      <button class="tab" data-tab="settings" data-i18n-title="nav.settings" title="Personalize"><span class="tab-ico" data-icon="settings"></span><span class="tab-label" data-i18n="nav.settings">Personalize</span></button>
+      <button class="tab" data-tab="personalize" data-i18n-title="nav.settings" title="Personalize"><span class="tab-ico" data-icon="settings"></span><span class="tab-label" data-i18n="nav.settings">Personalize</span></button>
     </nav>
     <div class="top-right">
       <span class="sync" id="sync"><span class="sync-dot"></span><span id="syncLabel">live</span></span>
@@ -152,6 +153,21 @@
             <button class="fchip" data-status="blocked" data-i18n="status.blocked">Blocked</button>
           </div>
           <input type="search" id="backlogSearch" class="search" data-i18n-ph="backlog.searchPlaceholder" placeholder="Filter by id or title…" autocomplete="off" />
+          <button id="backlogAddBtn" class="btn primary" type="button" data-i18n="backlog.addTask">+ Add task</button>
+        </div>
+        <div class="bl-add-form" id="backlogAddForm" hidden>
+          <input type="text" id="blAddTitle" class="bl-add-input bl-add-title" data-i18n-ph="backlog.addTitlePh" placeholder="Task title…" autocomplete="off" />
+          <input type="text" id="blAddPhase" class="bl-add-input bl-add-phase" list="blPhaseList" data-i18n-ph="backlog.addPhasePh" placeholder="Phase…" autocomplete="off" />
+          <datalist id="blPhaseList"></datalist>
+          <input type="text" id="blAddOwner" class="bl-add-input bl-add-owner" data-i18n-ph="backlog.addOwnerPh" placeholder="Owner…" autocomplete="off" />
+          <select id="blAddLevel" class="bl-add-input">
+            <option value="quick">quick</option>
+            <option value="standard" selected>standard</option>
+            <option value="major">major</option>
+          </select>
+          <button id="blAddSubmit" class="btn primary" type="button" data-i18n="backlog.addSubmit">Add</button>
+          <button id="blAddCancel" class="btn" type="button" data-i18n="backlog.addCancel">Cancel</button>
+          <span class="bl-add-error" id="blAddError" hidden></span>
         </div>
         <div class="table-scroll">
           <table class="backlog-table" id="backlogTable">
@@ -194,6 +210,35 @@
       </div>
     </section>
 
+    <!-- FILES (project file explorer: tree + view/edit Markdown, HTML and any text file) -->
+    <section class="panel" data-panel="files">
+      <div class="files-wrap">
+        <h2 class="panel-title" data-i18n="files.title">Files</h2>
+        <p class="panel-sub" data-i18n="files.sub">Browse the project's files — view Markdown &amp; HTML, edit any text file, create new ones.</p>
+        <div class="files-body">
+          <div class="files-tree-col">
+            <div class="files-toolbar">
+              <button id="filesNewFile" class="btn" type="button" data-i18n="files.newFile">+ File</button>
+              <button id="filesNewFolder" class="btn" type="button" data-i18n="files.newFolder">+ Folder</button>
+              <button id="filesRefresh" class="btn" type="button" title="Refresh" data-i18n-title="files.refresh">⟳</button>
+            </div>
+            <div class="files-create-form" id="filesCreateForm" hidden>
+              <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>
+                <button id="filesCreateCancel" class="btn" type="button" data-i18n="backlog.addCancel">Cancel</button>
+              </div>
+              <span class="files-error-tip" id="filesCreateError" hidden></span>
+            </div>
+            <div class="files-tree" id="filesTree"></div>
+          </div>
+          <div class="files-content-col" id="filesContent">
+            <div class="files-empty" data-i18n="files.pickFile">Select a file to view it.</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
     <!-- CHAT (full-width chat tab — shares renderChatLog + doRun/doOrchestrate/approve with the floating widget) -->
     <section class="panel" data-panel="chat">
       <div class="chat-tab-wrap">
@@ -244,41 +289,47 @@
     </section>
 
     <!-- SETTINGS (change autonomy mode + output language → config.json) -->
-    <section class="panel" data-panel="settings">
+    <section class="panel" data-panel="personalize">
       <div class="settings-wrap">
         <h2 class="panel-title" data-i18n="nav.settings">Personalize</h2>
         <p class="panel-sub" data-i18n-html="settings.sub">Change how spectoflow runs. Writes <code>.spectoflow/config.json</code> — the agent picks it up on its next run.</p>
-        <div class="settings-card">
-          <label class="settings-field">
-            <span class="settings-field-label" data-i18n="info.activeAgent">Active agent</span>
-            <select id="setAgent" class="settings-select"></select>
-            <span class="settings-field-hint is-empty" id="setAgentHint" data-i18n="topbar.agent.none" hidden>No agent found</span>
-          </label>
-          <label class="settings-field">
-            <span class="settings-field-label" data-i18n="field.design">Dashboard design</span>
-            <select id="setDesign" class="settings-select"></select>
-          </label>
-          <label class="settings-field">
-            <span class="settings-field-label" data-i18n="field.mode">Autonomy mode</span>
-            <select id="setMode" class="settings-select">
-              <option value="autopilot" data-i18n="mode.autopilot.desc">autopilot — run freely, ask only on policy gates</option>
-              <option value="semi" data-i18n="mode.semi.desc">semi — autopilot + policy approvals</option>
-              <option value="manual" data-i18n="mode.manual.desc">manual — approve every step</option>
-            </select>
-          </label>
-          <label class="settings-field">
-            <span class="settings-field-label" data-i18n="field.lang">Output language</span>
-            <select id="setLang" class="settings-select">
-              <option value="en">en · English</option>
-              <option value="fr">fr · Français</option>
-              <option value="es">es · Español</option>
-              <option value="de">de · Deutsch</option>
-              <option value="pt">pt · Português</option>
-              <option value="it">it · Italiano</option>
-            </select>
-          </label>
-          <div class="settings-saved" id="settingsSaved" data-i18n="settings.saved" hidden>✓ saved</div>
+        <div class="settings-groups">
+          <div class="settings-card">
+            <h3 class="settings-card-title" data-i18n="settings.group.execution">Agent &amp; automation</h3>
+            <label class="settings-field">
+              <span class="settings-field-label" data-i18n="info.activeAgent">Active agent</span>
+              <select id="setAgent" class="settings-select"></select>
+              <span class="settings-field-hint is-empty" id="setAgentHint" data-i18n="topbar.agent.none" hidden>No agent found</span>
+            </label>
+            <label class="settings-field">
+              <span class="settings-field-label" data-i18n="field.mode">Autonomy mode</span>
+              <select id="setMode" class="settings-select">
+                <option value="autopilot" data-i18n="mode.autopilot.desc">autopilot — run freely, ask only on policy gates</option>
+                <option value="semi" data-i18n="mode.semi.desc">semi — autopilot + policy approvals</option>
+                <option value="manual" data-i18n="mode.manual.desc">manual — approve every step</option>
+              </select>
+            </label>
+          </div>
+          <div class="settings-card">
+            <h3 class="settings-card-title" data-i18n="settings.group.appearance">Appearance &amp; language</h3>
+            <label class="settings-field">
+              <span class="settings-field-label" data-i18n="field.design">Dashboard design</span>
+              <select id="setDesign" class="settings-select"></select>
+            </label>
+            <label class="settings-field">
+              <span class="settings-field-label" data-i18n="field.lang">Output language</span>
+              <select id="setLang" class="settings-select">
+                <option value="en">en · English</option>
+                <option value="fr">fr · Français</option>
+                <option value="es">es · Español</option>
+                <option value="de">de · Deutsch</option>
+                <option value="pt">pt · Português</option>
+                <option value="it">it · Italiano</option>
+              </select>
+            </label>
+          </div>
         </div>
+        <div class="settings-saved" id="settingsSaved" data-i18n="settings.saved" hidden>✓ saved</div>
         <div class="settings-readonly" id="settingsReadonly"></div>
 
         <!-- Customize: project-specific dashboards, skills and agents — described or auto-proposed,