Adicionar file explorer para projetos criados pelos agentes

public/app.html

@@ -72,6 +72,12 @@
               <span>Histórico</span>
             </a>
           </li>
+          <li class="sidebar-nav-item">
+            <a href="#" class="sidebar-nav-link" data-section="files">
+              <i data-lucide="folder-open"></i>
+              <span>Projetos</span>
+            </a>
+          </li>
           <li class="sidebar-nav-item">
             <a href="#" class="sidebar-nav-link" data-section="settings">
               <i data-lucide="settings"></i>
@@ -578,6 +584,10 @@
           <div id="history-pagination"></div>
         </section>
 
+        <section id="files" class="section" aria-label="Projetos" hidden>
+          <div id="files-container"></div>
+        </section>
+
         <section id="settings" class="section" aria-label="Configurações" hidden>
           <div class="settings-grid">
             <div class="card">
@@ -1377,6 +1387,7 @@
   <script src="js/components/history.js"></script>
   <script src="js/components/webhooks.js"></script>
   <script src="js/components/notifications.js"></script>
+  <script src="js/components/files.js"></script>
   <script src="js/app.js"></script>
   <script>
     Utils.refreshIcons();

public/css/styles.css

@@ -5166,3 +5166,168 @@ body, .sidebar, .header, .card, .modal-content, .input, .select, textarea, .metr
   padding-top: 16px;
   border-top: 1px solid var(--border-primary);
 }
+
+/* File Explorer */
+#files-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.files-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  padding: 12px 16px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  font-size: 13px;
+}
+
+.files-breadcrumb-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--accent);
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.2s;
+}
+
+.files-breadcrumb-link:hover {
+  color: var(--accent-hover);
+}
+
+.files-breadcrumb-link:last-child {
+  color: var(--text-primary);
+  pointer-events: none;
+}
+
+.files-breadcrumb-sep {
+  color: var(--text-muted);
+  user-select: none;
+}
+
+.files-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.files-count {
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+.files-table-wrapper {
+  background: var(--bg-card);
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.files-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.files-table thead {
+  background: var(--bg-tertiary);
+}
+
+.files-table th {
+  text-align: left;
+  padding: 10px 16px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+  border-bottom: 1px solid var(--border-primary);
+}
+
+.files-table td {
+  padding: 10px 16px;
+  font-size: 13px;
+  color: var(--text-secondary);
+  border-bottom: 1px solid var(--border-primary);
+}
+
+.files-row:last-child td {
+  border-bottom: none;
+}
+
+.files-row:hover {
+  background: var(--bg-card-hover);
+}
+
+.files-td-name {
+  color: var(--text-primary);
+}
+
+.files-th-size,
+.files-td-size {
+  width: 100px;
+  text-align: right;
+}
+
+.files-th-date,
+.files-td-date {
+  width: 160px;
+}
+
+.files-th-actions,
+.files-td-actions {
+  width: 50px;
+  text-align: center;
+}
+
+.files-entry-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  text-decoration: none;
+  color: inherit;
+}
+
+.files-entry-dir {
+  color: var(--text-primary);
+  font-weight: 500;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.files-entry-dir:hover {
+  color: var(--accent);
+}
+
+.files-entry-file {
+  color: var(--text-secondary);
+}
+
+.files-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 80px 20px;
+  background: var(--bg-card);
+  border: 1px solid var(--border-primary);
+  border-radius: 8px;
+  color: var(--text-muted);
+  font-size: 14px;
+}
+
+@media (max-width: 768px) {
+  .files-th-date,
+  .files-td-date {
+    display: none;
+  }
+  .files-th-size,
+  .files-td-size {
+    width: 70px;
+  }
+}

public/js/api.js

@@ -141,6 +141,10 @@ const API = {
     },
   },
 
+  files: {
+    list(path) { return API.request('GET', `/files${path ? '?path=' + encodeURIComponent(path) : ''}`); },
+  },
+
   reports: {
     list() { return API.request('GET', '/reports'); },
     get(filename) { return API.request('GET', `/reports/${encodeURIComponent(filename)}`); },

public/js/app.js

@@ -17,10 +17,11 @@ const App = {
     webhooks: 'Webhooks',
     terminal: 'Terminal',
     history: 'Histórico',
+    files: 'Projetos',
     settings: 'Configurações',
   },
 
-  sections: ['dashboard', 'agents', 'tasks', 'schedules', 'pipelines', 'webhooks', 'terminal', 'history', 'settings'],
+  sections: ['dashboard', 'agents', 'tasks', 'schedules', 'pipelines', 'webhooks', 'terminal', 'history', 'files', 'settings'],
 
   init() {
     if (App._initialized) return;
@@ -113,6 +114,7 @@ const App = {
         case 'pipelines': await PipelinesUI.load(); break;
         case 'webhooks': await WebhooksUI.load(); break;
         case 'history': await HistoryUI.load(); break;
+        case 'files': await FilesUI.load(); break;
         case 'settings': await SettingsUI.load(); break;
       }
     } catch (err) {
@@ -763,6 +765,18 @@ const App = {
       }
     });
 
+    document.getElementById('files-container')?.addEventListener('click', (e) => {
+      const el = e.target.closest('[data-action]');
+      if (!el) return;
+      e.preventDefault();
+      const { action, path } = el.dataset;
+      switch (action) {
+        case 'navigate-files': FilesUI.navigate(path || ''); break;
+        case 'download-file': FilesUI.downloadFile(path); break;
+        case 'download-folder': FilesUI.downloadFolder(path); break;
+      }
+    });
+
     document.getElementById('pipeline-steps-container')?.addEventListener('click', (e) => {
       const btn = e.target.closest('[data-step-action]');
       if (!btn) return;

public/js/components/files.js

@@ -0,0 +1,152 @@
+const FilesUI = {
+  currentPath: '',
+
+  async load() {
+    await FilesUI.navigate('');
+  },
+
+  async navigate(path) {
+    try {
+      const data = await API.files.list(path);
+      FilesUI.currentPath = data.path || '';
+      FilesUI.render(data);
+    } catch (err) {
+      Toast.error(`Erro ao carregar arquivos: ${err.message}`);
+    }
+  },
+
+  render(data) {
+    const container = document.getElementById('files-container');
+    if (!container) return;
+
+    const breadcrumb = FilesUI._renderBreadcrumb(data.path);
+    const entries = data.entries || [];
+
+    if (entries.length === 0) {
+      container.innerHTML = `
+        ${breadcrumb}
+        <div class="files-empty">
+          <i data-lucide="folder-open" style="width:48px;height:48px;color:var(--text-muted)"></i>
+          <p>Nenhum arquivo encontrado neste diretório</p>
+        </div>
+      `;
+      Utils.refreshIcons(container);
+      return;
+    }
+
+    const rows = entries.map(entry => FilesUI._renderRow(entry, data.path)).join('');
+
+    container.innerHTML = `
+      ${breadcrumb}
+      <div class="files-toolbar">
+        <span class="files-count">${entries.length} ${entries.length === 1 ? 'item' : 'itens'}</span>
+        ${data.path ? `<button class="btn btn--ghost btn--sm" data-action="download-folder" data-path="${Utils.escapeHtml(data.path)}" title="Baixar pasta como .tar.gz"><i data-lucide="archive" style="width:14px;height:14px"></i> Baixar pasta</button>` : ''}
+      </div>
+      <div class="files-table-wrapper">
+        <table class="files-table">
+          <thead>
+            <tr>
+              <th class="files-th-name">Nome</th>
+              <th class="files-th-size">Tamanho</th>
+              <th class="files-th-date">Modificado</th>
+              <th class="files-th-actions"></th>
+            </tr>
+          </thead>
+          <tbody>
+            ${rows}
+          </tbody>
+        </table>
+      </div>
+    `;
+
+    Utils.refreshIcons(container);
+  },
+
+  _renderBreadcrumb(currentPath) {
+    const parts = currentPath ? currentPath.split('/').filter(Boolean) : [];
+    let html = `<nav class="files-breadcrumb"><a href="#" data-action="navigate-files" data-path="" class="files-breadcrumb-link"><i data-lucide="home" style="width:14px;height:14px"></i> projetos</a>`;
+
+    let accumulated = '';
+    for (const part of parts) {
+      accumulated += (accumulated ? '/' : '') + part;
+      html += ` <span class="files-breadcrumb-sep">/</span> <a href="#" data-action="navigate-files" data-path="${Utils.escapeHtml(accumulated)}" class="files-breadcrumb-link">${Utils.escapeHtml(part)}</a>`;
+    }
+
+    html += '</nav>';
+    return html;
+  },
+
+  _renderRow(entry, currentPath) {
+    const fullPath = currentPath ? `${currentPath}/${entry.name}` : entry.name;
+    const icon = entry.type === 'directory' ? 'folder' : FilesUI._fileIcon(entry.extension);
+    const iconColor = entry.type === 'directory' ? 'var(--warning)' : 'var(--text-muted)';
+    const size = entry.type === 'directory' ? '—' : FilesUI._formatSize(entry.size);
+    const date = FilesUI._formatDate(entry.modified);
+
+    const nameCell = entry.type === 'directory'
+      ? `<a href="#" class="files-entry-link files-entry-dir" data-action="navigate-files" data-path="${Utils.escapeHtml(fullPath)}"><i data-lucide="${icon}" style="width:16px;height:16px;color:${iconColor};flex-shrink:0"></i> ${Utils.escapeHtml(entry.name)}</a>`
+      : `<span class="files-entry-link files-entry-file"><i data-lucide="${icon}" style="width:16px;height:16px;color:${iconColor};flex-shrink:0"></i> ${Utils.escapeHtml(entry.name)}</span>`;
+
+    const actions = entry.type === 'directory'
+      ? `<button class="btn btn--ghost btn--sm" data-action="download-folder" data-path="${Utils.escapeHtml(fullPath)}" title="Baixar pasta"><i data-lucide="archive" style="width:14px;height:14px"></i></button>`
+      : `<button class="btn btn--ghost btn--sm" data-action="download-file" data-path="${Utils.escapeHtml(fullPath)}" title="Baixar arquivo"><i data-lucide="download" style="width:14px;height:14px"></i></button>`;
+
+    return `
+      <tr class="files-row">
+        <td class="files-td-name">${nameCell}</td>
+        <td class="files-td-size">${size}</td>
+        <td class="files-td-date">${date}</td>
+        <td class="files-td-actions">${actions}</td>
+      </tr>
+    `;
+  },
+
+  _fileIcon(ext) {
+    const map = {
+      js: 'file-code-2', ts: 'file-code-2', jsx: 'file-code-2', tsx: 'file-code-2',
+      py: 'file-code-2', rb: 'file-code-2', go: 'file-code-2', rs: 'file-code-2',
+      java: 'file-code-2', c: 'file-code-2', cpp: 'file-code-2', h: 'file-code-2',
+      html: 'file-code-2', css: 'file-code-2', scss: 'file-code-2', vue: 'file-code-2',
+      json: 'file-json', xml: 'file-json', yaml: 'file-json', yml: 'file-json',
+      md: 'file-text', txt: 'file-text', log: 'file-text', csv: 'file-text',
+      pdf: 'file-text',
+      png: 'file-image', jpg: 'file-image', jpeg: 'file-image', gif: 'file-image',
+      svg: 'file-image', webp: 'file-image', ico: 'file-image',
+      zip: 'file-archive', tar: 'file-archive', gz: 'file-archive', rar: 'file-archive',
+      sh: 'file-terminal', bash: 'file-terminal',
+      sql: 'database',
+      env: 'file-lock',
+    };
+    return map[ext] || 'file';
+  },
+
+  _formatSize(bytes) {
+    if (bytes == null) return '—';
+    if (bytes === 0) return '0 B';
+    const units = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+    return (bytes / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0) + ' ' + units[i];
+  },
+
+  _formatDate(isoString) {
+    if (!isoString) return '—';
+    const d = new Date(isoString);
+    return d.toLocaleDateString('pt-BR') + ' ' + d.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
+  },
+
+  downloadFile(path) {
+    const a = document.createElement('a');
+    a.href = `/api/files/download?path=${encodeURIComponent(path)}`;
+    a.download = '';
+    a.click();
+  },
+
+  downloadFolder(path) {
+    const a = document.createElement('a');
+    a.href = `/api/files/download-folder?path=${encodeURIComponent(path)}`;
+    a.download = '';
+    a.click();
+  },
+};
+
+window.FilesUI = FilesUI;