feat: add Gitea monitoring page with repos, PRs, and activity

public/app.js

@@ -934,6 +934,7 @@ document.addEventListener("DOMContentLoaded", () => {
   if (CURRENT_PAGE === 'wiki') initWikiPage();
   if (CURRENT_PAGE === 'agents') initAgentsPage();
   if (CURRENT_PAGE === 'usage') initUsagePage();
+  if (CURRENT_PAGE === 'gitea') initGiteaPage();
 });
 
 // ============ GITEA DASHBOARD ============
@@ -1140,3 +1141,130 @@ if (document.querySelector('.gitea-dashboard')) {
     }
   }, 30000);
 }
+
+// ============ GITEA PAGE ============
+let giteaData = { repos: [], prs: [], activity: [] };
+
+function initGiteaPage() {
+  loadGiteaData();
+  
+  document.getElementById('refresh-gitea')?.addEventListener('click', loadGiteaData);
+  
+  // Tab switching
+  document.querySelectorAll('.tab-btn').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      const tab = e.target.dataset.tab;
+      document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+      document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+      e.target.classList.add('active');
+      document.getElementById(`tab-${tab}`)?.classList.add('active');
+    });
+  });
+}
+
+async function loadGiteaData() {
+  try {
+    const [swarmRes, reviewsRes, activityRes] = await Promise.all([
+      fetch('/api/gitea/swarm'),
+      fetch('/api/gitea/reviews'),
+      fetch('/api/gitea/activity')
+    ]);
+    
+    giteaData.repos = await swarmRes.json();
+    giteaData.prs = await reviewsRes.json();
+    giteaData.activity = await activityRes.json();
+    
+    renderGiteaStats();
+    renderGiteaRepos();
+    renderGiteaPRs();
+    renderGiteaActivity();
+  } catch (err) {
+    console.error('Failed to load Gitea data:', err);
+  }
+}
+
+function renderGiteaStats() {
+  document.getElementById('stat-repos').textContent = giteaData.repos.length;
+  
+  const totalPRs = giteaData.repos.reduce((sum, r) => sum + (r.open_prs || 0), 0);
+  document.getElementById('stat-prs').textContent = totalPRs;
+  
+  const pendingReviews = giteaData.prs.filter(p => p.review_required).length;
+  document.getElementById('stat-reviews').textContent = pendingReviews;
+}
+
+function renderGiteaRepos() {
+  const grid = document.getElementById('repos-grid');
+  if (!grid) return;
+  
+  if (!giteaData.repos.length) {
+    grid.innerHTML = '<p class="no-data">No repositories found</p>';
+    return;
+  }
+  
+  grid.innerHTML = giteaData.repos.map(repo => `
+    <div class="repo-card">
+      <h4>${escapeHtml(repo.name)}</h4>
+      <p class="repo-fullname">${escapeHtml(repo.full_name || '')}</p>
+      <div class="repo-meta">
+        <span>⭐ ${repo.stars || 0}</span>
+        <span>🔀 ${repo.open_prs || 0}</span>
+        <span>🐛 ${repo.open_issues || 0}</span>
+      </div>
+      <div class="repo-updated">Updated: ${repo.updated_at ? new Date(repo.updated_at).toLocaleDateString() : 'N/A'}</div>
+      <a href="${repo.html_url}" target="_blank" class="btn-secondary">View →</a>
+    </div>
+  `).join('');
+}
+
+function renderGiteaPRs() {
+  const list = document.getElementById('prs-list');
+  if (!list) return;
+  
+  // Collect all PRs from all repos
+  const allPRs = [];
+  giteaData.repos.forEach(repo => {
+    if (repo.prs) {
+      repo.prs.forEach(pr => {
+        allPRs.push({ ...pr, repo: repo.name });
+      });
+    }
+  });
+  
+  if (!allPRs.length) {
+    list.innerHTML = '<p class="no-data">No open pull requests</p>';
+    return;
+  }
+  
+  list.innerHTML = allPRs.map(pr => `
+    <div class="pr-item">
+      <div class="pr-header">
+        <span class="pr-number">#${pr.number}</span>
+        <span class="pr-title">${escapeHtml(pr.title)}</span>
+        <span class="pr-status ${pr.state}">${pr.state}</span>
+      </div>
+      <div class="pr-meta">
+        <span>📦 ${pr.repo}</span>
+        <span>👤 ${pr.user?.login || 'Unknown'}</span>
+      </div>
+    </div>
+  `).join('');
+}
+
+function renderGiteaActivity() {
+  const list = document.getElementById('activity-list');
+  if (!list) return;
+  
+  if (!giteaData.activity || !giteaData.activity.length) {
+    list.innerHTML = '<p class="no-data">No recent activity</p>';
+    return;
+  }
+  
+  list.innerHTML = giteaData.activity.slice(0, 20).map(activity => `
+    <div class="activity-item">
+      <span class="activity-type">${activity.type || '📝'}</span>
+      <span class="activity-desc">${escapeHtml(activity.message || activity.repo?.name || 'Activity')}</span>
+      <span class="activity-time">${activity.created_at ? new Date(activity.created_at).toLocaleString() : ''}</span>
+    </div>
+  `).join('');
+}

public/styles.css

@@ -783,3 +783,158 @@ label {
     page-break-inside: avoid;
   }
 }
+
+/* ============ GITEA PAGE ============ */
+.gitea-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+
+.gitea-tabs {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.tab-btn {
+  padding: 0.5rem 1rem;
+  background: var(--card-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.tab-btn:hover {
+  background: var(--hover-bg);
+}
+
+.tab-btn.active {
+  background: var(--primary);
+  color: white;
+  border-color: var(--primary);
+}
+
+.tab-content {
+  display: none;
+}
+
+.tab-content.active {
+  display: block;
+}
+
+.repos-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1rem;
+}
+
+.repo-card {
+  background: var(--card-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  padding: 1.25rem;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.repo-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+}
+
+.repo-card h4 {
+  margin: 0 0 0.5rem;
+  color: var(--text-primary);
+}
+
+.repo-fullname {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  margin-bottom: 0.75rem;
+}
+
+.repo-meta {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 0.75rem;
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+}
+
+.repo-updated {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  margin-bottom: 1rem;
+}
+
+.prs-list, .activity-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.pr-item, .activity-item {
+  background: var(--card-bg);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.pr-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.pr-number {
+  font-weight: 600;
+  color: var(--primary);
+}
+
+.pr-title {
+  flex: 1;
+  color: var(--text-primary);
+}
+
+.pr-status {
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+}
+
+.pr-status.open {
+  background: #238636;
+  color: white;
+}
+
+.pr-status.merged {
+  background: #8957e5;
+  color: white;
+}
+
+.pr-meta, .activity-time {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  display: flex;
+  gap: 1rem;
+}
+
+.activity-item {
+  flex-direction: row;
+  align-items: center;
+}
+
+.activity-type {
+  font-size: 1.25rem;
+}
+
+.activity-desc {
+  flex: 1;
+}

server.js

@@ -80,6 +80,7 @@ function renderPage(viewName, activeTab, pageTitle) {
     wikiActive: activeTab === 'wiki' ? 'active' : '',
     agentsActive: activeTab === 'agents' ? 'active' : '',
     usageActive: activeTab === 'usage' ? 'active' : '',
+    giteaActive: activeTab === 'gitea' ? 'active' : '',
     markedScript: viewName === 'wiki'
       ? '<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>'
       : '',
@@ -108,6 +109,9 @@ app.get('/agents', (req, res) => {
 });
 
 app.get('/usage', (req, res) => {
+app.get('/gitea', (req, res) => {
+  res.send(renderPage('gitea', 'gitea', 'OpenClaw Agent Fleet Dashboard - Gitea'));
+});
   res.send(renderPage('usage', 'usage', 'OpenClaw Agent Fleet Dashboard - Usage'));
 });
 

views/gitea.html

@@ -1,54 +1,41 @@
-<div class="gitea-dashboard">
+<section id="page-gitea" class="page active">
   <div class="gitea-header">
-    <h2>🔧 Gitea Integration</h2>
+    <h2>🔗 Gitea Swarm Coordination</h2>
-    <p class="subtitle">Real-time repository and PR tracking</p>
+    <div class="gitea-controls">
+      <button id="refresh-gitea" class="btn-secondary">🔄 Refresh</button>
+    </div>
+  </div>
+
+  <div class="gitea-stats">
+    <div class="stat-card">
+      <h4>Repositories</h4>
+      <div class="stat-value" id="stat-repos">0</div>
+    </div>
+    <div class="stat-card">
+      <h4>Open PRs</h4>
+      <div class="stat-value" id="stat-prs">0</div>
+    </div>
+    <div class="stat-card">
+      <h4>Pending Reviews</h4>
+      <div class="stat-value" id="stat-reviews">0</div>
+    </div>
   </div>
 
   <div class="gitea-tabs">
-    <button class="tab-btn active" data-tab="swarm">Swarm Overview</button>
+    <button class="tab-btn active" data-tab="repos">📦 Repositories</button>
-    <button class="tab-btn" data-tab="reviews">Pending Reviews</button>
+    <button class="tab-btn" data-tab="prs">🔀 Pull Requests</button>
-    <button class="tab-btn" data-tab="activity">Recent Activity</button>
+    <button class="tab-btn" data-tab="activity">📊 Activity</button>
   </div>
 
-  <div class="gitea-content">
+  <div id="gitea-content">
-    <!-- Swarm Overview Tab -->
+    <div id="tab-repos" class="tab-content active">
-    <div id="swarm-tab" class="tab-content active">
+      <div class="repos-grid" id="repos-grid"></div>
-      <div class="swarm-stats">
-        <div class="stat-card">
-          <h3>Total Repos</h3>
-          <div class="stat-value" id="total-repos">-</div>
-        </div>
-        <div class="stat-card">
-          <h3>Open PRs</h3>
-          <div class="stat-value" id="total-prs">-</div>
-        </div>
-        <div class="stat-card">
-          <h3>Open Issues</h3>
-          <div class="stat-value" id="total-issues">-</div>
-        </div>
-        <div class="stat-card">
-          <h3>Total Branches</h3>
-          <div class="stat-value" id="total-branches">-</div>
-        </div>
-      </div>
-
-      <div class="repo-list" id="repo-list">
-        <p class="loading">Loading repositories...</p>
-      </div>
-    </div>
-
-    <!-- Pending Reviews Tab -->
-    <div id="reviews-tab" class="tab-content">
-      <div class="reviews-list" id="reviews-list">
-        <p class="loading">Loading pending reviews...</p>
-      </div>
-    </div>
-
-    <!-- Recent Activity Tab -->
-    <div id="activity-tab" class="tab-content">
-      <div class="activity-feed" id="activity-feed">
-        <p class="loading">Loading recent activity...</p>
     </div>
+    <div id="tab-prs" class="tab-content">
+      <div class="prs-list" id="prs-list"></div>
     </div>
+    <div id="tab-activity" class="tab-content">
+      <div class="activity-list" id="activity-list"></div>
     </div>
   </div>
+</section>