shipwright-cli 2.2.2 → 2.3.0

package/dashboard/src/views/team.ts

@@ -0,0 +1,362 @@
+// Team tab - connected developers grid + team activity
+
+import { store } from "../core/state";
+import { escapeHtml, timeAgo } from "../core/helpers";
+import { icon } from "../design/icons";
+import * as api from "../core/api";
+import type {
+  FleetState,
+  View,
+  TeamData,
+  TeamDeveloper,
+  TeamActivityEvent,
+} from "../types/api";
+
+let teamRefreshTimer: ReturnType<typeof setInterval> | null = null;
+
+function fetchTeamData(): void {
+  api
+    .fetchTeam()
+    .then((data) => {
+      store.set("teamCache", data);
+      renderTeamGrid(data);
+      renderTeamStats(data);
+    })
+    .catch(() => {});
+
+  api
+    .fetchTeamActivity()
+    .then((events) => {
+      store.set("teamActivityCache", events);
+      renderTeamActivity(events);
+    })
+    .catch(() => {});
+}
+
+function renderTeamStats(data: TeamData): void {
+  const el1 = document.getElementById("team-stat-online");
+  if (el1) el1.textContent = String(data.total_online || 0);
+  const el2 = document.getElementById("team-stat-pipelines");
+  if (el2) el2.textContent = String(data.total_active_pipelines || 0);
+  const el3 = document.getElementById("team-stat-queued");
+  if (el3) el3.textContent = String(data.total_queued || 0);
+}
+
+function renderTeamGrid(data: TeamData): void {
+  const grid = document.getElementById("team-grid");
+  if (!grid) return;
+  const devs = data.developers || [];
+  if (devs.length === 0) {
+    grid.innerHTML = `<div class="empty-state">${icon("users-round", 32)}<p>No developers connected. Run <code>shipwright connect start</code> to join.</p></div>`;
+    return;
+  }
+
+  grid.innerHTML = devs
+    .map((dev) => {
+      const presence = dev._presence || "offline";
+      const initials = (dev.developer_id || "?").substring(0, 2).toUpperCase();
+      const pipelines = (dev.active_jobs || [])
+        .map(
+          (job) =>
+            `<div class="team-card-pipeline-item">` +
+            `<span class="team-card-pipeline-issue">#${escapeHtml(String(job.issue))}</span>` +
+            `<span class="team-card-pipeline-stage">${escapeHtml(job.stage || "\u2014")}</span></div>`,
+        )
+        .join("");
+      const pipelineSection = pipelines
+        ? `<div class="team-card-pipelines">${pipelines}</div>`
+        : "";
+
+      return (
+        `<div class="team-card"><div class="team-card-header">` +
+        `<div class="team-card-avatar">${escapeHtml(initials)}</div>` +
+        `<div class="team-card-info"><div class="team-card-name">${escapeHtml(dev.developer_id)}</div>` +
+        `<div class="team-card-machine">${escapeHtml(dev.machine_name)}</div></div>` +
+        `<div class="presence-dot ${presence}" title="${presence}"></div></div>` +
+        `<div class="team-card-body">` +
+        `<div class="team-card-row"><span class="team-card-row-label">Daemon</span>` +
+        `<span class="team-card-row-value">${dev.daemon_running ? "\u25cf Running" : "\u25cb Stopped"}</span></div>` +
+        `<div class="team-card-row"><span class="team-card-row-label">Active</span>` +
+        `<span class="team-card-row-value">${(dev.active_jobs || []).length} pipelines</span></div>` +
+        `<div class="team-card-row"><span class="team-card-row-label">Queued</span>` +
+        `<span class="team-card-row-value">${(dev.queued || []).length} issues</span></div>` +
+        pipelineSection +
+        "</div></div>"
+      );
+    })
+    .join("");
+}
+
+function renderTeamActivity(events: TeamActivityEvent[]): void {
+  const container = document.getElementById("team-activity");
+  if (!container) return;
+  const items = Array.isArray(events) ? events : [];
+  if (items.length === 0) {
+    container.innerHTML =
+      '<div class="empty-state">No team activity yet.</div>';
+    return;
+  }
+
+  container.innerHTML = items
+    .slice(0, 50)
+    .map((evt) => {
+      const isCI = evt.from_developer === "github-actions";
+      const badgeClass = isCI ? "ci" : "local";
+      const badgeText = isCI ? "CI" : evt.from_developer || "local";
+      const text = formatTeamEvent(evt);
+      const time = evt.ts ? timeAgo(new Date(evt.ts)) : "";
+      return (
+        `<div class="team-activity-item"><span class="source-badge ${badgeClass}">${escapeHtml(badgeText)}</span>` +
+        `<div class="team-activity-content"><div class="team-activity-text">${text}</div>` +
+        `<div class="team-activity-time">${time}</div></div></div>`
+      );
+    })
+    .join("");
+}
+
+function formatTeamEvent(evt: TeamActivityEvent): string {
+  const type = evt.type || "";
+  const issue = evt.issue ? " #" + evt.issue : "";
+  if (type.indexOf("pipeline.started") !== -1)
+    return "Pipeline started" + issue;
+  if (
+    type.indexOf("pipeline.completed") !== -1 ||
+    type.indexOf("pipeline_completed") !== -1
+  ) {
+    const result = evt.result === "success" ? "\u2713" : "\u2717";
+    return "Pipeline " + result + issue;
+  }
+  if (type.indexOf("stage.") !== -1) {
+    const stage = evt.stage || type.split(".").pop() || "";
+    return "Stage " + escapeHtml(stage) + issue;
+  }
+  if (type.indexOf("daemon.") !== -1)
+    return type.replace("daemon.", "Daemon: ");
+  if (type.indexOf("ci.") !== -1) return type.replace("ci.", "CI: ") + issue;
+  return escapeHtml(type) + issue;
+}
+
+function setupInviteButton(): void {
+  const btn = document.getElementById("btn-create-invite");
+  if (!btn) return;
+  btn.addEventListener("click", () => {
+    (btn as HTMLButtonElement).disabled = true;
+    btn.textContent = "Creating...";
+    api
+      .createTeamInvite({ expires_hours: 72 })
+      .then((data) => {
+        const result = document.getElementById("team-invite-result");
+        if (result) {
+          result.style.display = "";
+          result.innerHTML =
+            `<div class="invite-link-box">` +
+            `<span class="invite-label">Invite link (expires in 72h):</span>` +
+            `<code class="invite-url" id="invite-url">${escapeHtml(data.url || data.token)}</code>` +
+            `<button class="btn-sm" id="copy-invite">Copy</button></div>`;
+          const copyBtn = document.getElementById("copy-invite");
+          if (copyBtn) {
+            copyBtn.addEventListener("click", () => {
+              const url = data.url || data.token;
+              navigator.clipboard.writeText(url).then(() => {
+                copyBtn.textContent = "Copied!";
+                setTimeout(() => {
+                  copyBtn.textContent = "Copy";
+                }, 2000);
+              });
+            });
+          }
+        }
+      })
+      .catch(() => {
+        const result = document.getElementById("team-invite-result");
+        if (result) {
+          result.style.display = "";
+          result.innerHTML =
+            '<div class="invite-error">Failed to create invite. Check server logs.</div>';
+        }
+      })
+      .finally(() => {
+        (btn as HTMLButtonElement).disabled = false;
+        btn.textContent = "Create Invite Link";
+      });
+  });
+}
+
+function loadIntegrationsStatus(): void {
+  const container = document.getElementById("integrations-status");
+  if (!container) return;
+
+  api
+    .fetchLinearStatus()
+    .then((data) => {
+      let html = '<div class="integrations-grid">';
+      const connected = data.connected || data.configured || false;
+      const statusCls = connected
+        ? "integration-active"
+        : "integration-inactive";
+      const statusText = connected ? "Connected" : "Not configured";
+      html +=
+        `<div class="integration-card ${statusCls}">` +
+        `<div class="integration-name">${icon("git-branch", 18)} Linear</div>` +
+        `<div class="integration-status">${statusText}</div>`;
+      if (data.workspace)
+        html += `<div class="integration-detail">Workspace: ${escapeHtml(String(data.workspace))}</div>`;
+      if (data.team_id)
+        html += `<div class="integration-detail">Team: ${escapeHtml(String(data.team_id))}</div>`;
+      html += "</div>";
+
+      // GitHub (always available if dashboard is running)
+      html +=
+        `<div class="integration-card integration-active">` +
+        `<div class="integration-name">${icon("git-branch", 18)} GitHub</div>` +
+        `<div class="integration-status">Connected</div></div>`;
+
+      html += "</div>";
+      container.innerHTML = html;
+    })
+    .catch(() => {
+      container.innerHTML =
+        '<div class="empty-state"><p>Could not load status</p></div>';
+    });
+}
+
+function setupAdminDebug(): void {
+  const output = document.getElementById("admin-debug-output");
+  if (!output) return;
+
+  const renderJson = (data: unknown) => {
+    output.innerHTML = `<pre class="admin-debug-pre">${escapeHtml(JSON.stringify(data, null, 2))}</pre>`;
+  };
+
+  document.getElementById("btn-db-health")?.addEventListener("click", () => {
+    output.innerHTML = '<div class="empty-state"><p>Loading...</p></div>';
+    api
+      .fetchDbHealth()
+      .then(renderJson)
+      .catch((e) => {
+        output.innerHTML = `<div class="empty-state"><p>Error: ${escapeHtml(String(e))}</p></div>`;
+      });
+  });
+  document.getElementById("btn-db-events")?.addEventListener("click", () => {
+    output.innerHTML = '<div class="empty-state"><p>Loading...</p></div>';
+    api
+      .fetchDbEvents(0, 50)
+      .then(renderJson)
+      .catch((e) => {
+        output.innerHTML = `<div class="empty-state"><p>Error: ${escapeHtml(String(e))}</p></div>`;
+      });
+  });
+  document.getElementById("btn-db-jobs")?.addEventListener("click", () => {
+    output.innerHTML = '<div class="empty-state"><p>Loading...</p></div>';
+    api
+      .fetchDbJobs()
+      .then(renderJson)
+      .catch((e) => {
+        output.innerHTML = `<div class="empty-state"><p>Error: ${escapeHtml(String(e))}</p></div>`;
+      });
+  });
+  document
+    .getElementById("btn-db-heartbeats")
+    ?.addEventListener("click", () => {
+      output.innerHTML = '<div class="empty-state"><p>Loading...</p></div>';
+      api
+        .fetchDbHeartbeats()
+        .then(renderJson)
+        .catch((e) => {
+          output.innerHTML = `<div class="empty-state"><p>Error: ${escapeHtml(String(e))}</p></div>`;
+        });
+    });
+  document.getElementById("btn-db-costs")?.addEventListener("click", () => {
+    output.innerHTML = '<div class="empty-state"><p>Loading...</p></div>';
+    api
+      .fetchDbCostsToday()
+      .then(renderJson)
+      .catch((e) => {
+        output.innerHTML = `<div class="empty-state"><p>Error: ${escapeHtml(String(e))}</p></div>`;
+      });
+  });
+}
+
+function setupClaimPanel(): void {
+  const resultEl = document.getElementById("claim-result");
+  const issueInput = document.getElementById("claim-issue") as HTMLInputElement;
+  const machineInput = document.getElementById(
+    "claim-machine",
+  ) as HTMLInputElement;
+
+  document.getElementById("btn-claim")?.addEventListener("click", () => {
+    const issue = parseInt(issueInput?.value || "0");
+    const machine = machineInput?.value.trim();
+    if (!issue || !machine) {
+      if (resultEl)
+        resultEl.innerHTML =
+          '<span style="color:var(--rose)">Issue # and machine name required</span>';
+      return;
+    }
+    api
+      .claimIssue(issue, machine)
+      .then((data) => {
+        if (resultEl) {
+          if (data.approved) {
+            resultEl.innerHTML = `<span style="color:var(--green)">Claimed #${issue} for ${escapeHtml(machine)}</span>`;
+          } else {
+            resultEl.innerHTML = `<span style="color:var(--amber)">Already claimed by ${escapeHtml(data.claimed_by || "unknown")}</span>`;
+          }
+        }
+      })
+      .catch((e) => {
+        if (resultEl)
+          resultEl.innerHTML = `<span style="color:var(--rose)">Error: ${escapeHtml(String(e))}</span>`;
+      });
+  });
+
+  document.getElementById("btn-release")?.addEventListener("click", () => {
+    const issue = parseInt(issueInput?.value || "0");
+    const machine = machineInput?.value.trim();
+    if (!issue) {
+      if (resultEl)
+        resultEl.innerHTML =
+          '<span style="color:var(--rose)">Issue # required</span>';
+      return;
+    }
+    api
+      .releaseIssue(issue, machine || undefined)
+      .then(() => {
+        if (resultEl)
+          resultEl.innerHTML = `<span style="color:var(--green)">Released claim on #${issue}</span>`;
+      })
+      .catch((e) => {
+        if (resultEl)
+          resultEl.innerHTML = `<span style="color:var(--rose)">Error: ${escapeHtml(String(e))}</span>`;
+      });
+  });
+}
+
+export const teamView: View = {
+  init() {
+    fetchTeamData();
+    setupInviteButton();
+    loadIntegrationsStatus();
+    setupAdminDebug();
+    setupClaimPanel();
+    teamRefreshTimer = setInterval(fetchTeamData, 10000);
+  },
+  render(data: FleetState) {
+    if (data.team) {
+      renderTeamGrid(data.team);
+      renderTeamStats(data.team);
+    } else {
+      const cache = store.get("teamCache");
+      if (cache) {
+        renderTeamGrid(cache);
+        renderTeamStats(cache);
+      }
+    }
+  },
+  destroy() {
+    if (teamRefreshTimer) {
+      clearInterval(teamRefreshTimer);
+      teamRefreshTimer = null;
+    }
+  },
+};