create-planet 1.0.0

package/template/src/pages/index.astro

@@ -0,0 +1,1009 @@
+---
+import md5 from "md5";
+import { env } from "cloudflare:workers";
+import { WARP_LINKS, PLANET_NAME, PLANET_DESCRIPTION } from "../lib/config";
+
+const formatCoord = (n: number) => n.toFixed(2).padStart(6, "0");
+
+// Robust helper to get simulation variables from any available environment source
+const getSimVar = (name: string): string | undefined => {
+  // 1. Check Cloudflare env object (for wrangler dev --var)
+  if (env && (env as any)[name]) return (env as any)[name];
+
+  // 2. Check process.env (traditional node/dev env)
+  if (
+    typeof process !== "undefined" &&
+    process.env &&
+    (process.env as any)[name]
+  )
+    return (process.env as any)[name];
+
+  // 3. Check import.meta.env (build-time or astro-provided)
+  if (import.meta.env && (import.meta.env as any)[name])
+    return (import.meta.env as any)[name];
+
+  return undefined;
+};
+
+const calculateCoordinates = (url: string) => {
+  const domain = new URL(url).hostname.toLowerCase();
+  const hash = md5(domain);
+
+  const xHex = hash.slice(0, 6);
+  const yHex = hash.slice(6, 12);
+  const zHex = hash.slice(12, 18);
+
+  const xCoord = (parseInt(xHex, 16) % 100000) / 100;
+  const yCoord = (parseInt(yHex, 16) % 100000) / 100;
+  const zCoord = (parseInt(zHex, 16) % 100000) / 100;
+
+  return {
+    x: xCoord,
+    y: yCoord,
+    z: zCoord,
+    formatted: `${formatCoord(xCoord)}:${formatCoord(yCoord)}:${formatCoord(zCoord)}`,
+  };
+};
+
+// Simulation Overrides
+const simName = getSimVar("PUBLIC_SIM_PLANET_NAME");
+const simUrl = getSimVar("PUBLIC_SIM_LANDING_SITE");
+const simDescription = getSimVar("PUBLIC_SIM_PLANET_DESCRIPTION");
+
+const planetName = simName || PLANET_NAME;
+const landingSite = (simUrl || Astro.url.origin).replace(/\/$/, "");
+const planetDescription = simDescription || PLANET_DESCRIPTION;
+
+const myCoords = calculateCoordinates(landingSite);
+
+const departureBuffer =
+  parseInt(getSimVar("DEPARTURE_BUFFER_MS") || "") || 30 * 1000;
+
+// Cloudflare D1 Integration
+const { DB } = (env as any) || {};
+
+let traffic = [];
+let archive = [];
+
+if (DB) {
+  try {
+    const now = Date.now();
+
+    const { results: activePlans } = await DB.prepare(
+      `
+            SELECT * FROM travel_plans
+            WHERE end_timestamp > ? AND (origin_url = ? OR destination_url = ?)
+            ORDER BY start_timestamp ASC
+        `,
+    )
+      .bind(now, landingSite, landingSite)
+      .all();
+
+    // Build a URL→name map from warp links and the traffic_controllers cache
+    const warpNameMap = new Map(WARP_LINKS.map((l) => [l.url, l.name]));
+
+    const { results: archiveRecords } = await DB.prepare(
+      `
+            SELECT * FROM travel_plans
+            WHERE end_timestamp <= ? AND (origin_url = ? OR destination_url = ?)
+            ORDER BY end_timestamp DESC LIMIT 20
+        `,
+    )
+      .bind(now, landingSite, landingSite)
+      .all();
+
+    const allPlanUrls = [
+      ...(activePlans || []).flatMap((p: any) => [
+        p.origin_url,
+        p.destination_url,
+      ]),
+      ...(archiveRecords || []).flatMap((p: any) => [
+        p.origin_url,
+        p.destination_url,
+      ]),
+    ];
+    const uniqueUrls = [...new Set(allPlanUrls)].filter(
+      (u) => !warpNameMap.has(u) && u !== landingSite,
+    );
+    if (uniqueUrls.length > 0) {
+      const placeholders = uniqueUrls.map(() => "?").join(",");
+      const { results: cachedNames } = await DB.prepare(
+        `SELECT planet_url, name FROM traffic_controllers WHERE planet_url IN (${placeholders})`,
+      )
+        .bind(...uniqueUrls)
+        .all();
+      for (const row of cachedNames || [])
+        warpNameMap.set((row as any).planet_url, (row as any).name);
+    }
+
+    traffic = (activePlans || []).map((p: any) => {
+      const isOrigin = p.origin_url === landingSite;
+      const targetUrl = isOrigin ? p.destination_url : p.origin_url;
+      const targetHostname = new URL(targetUrl).hostname;
+      const isPreparing = now < p.start_timestamp;
+      const type = isOrigin
+        ? isPreparing
+          ? "preparation"
+          : "outgoing"
+        : "incoming";
+      const timeLabel = isPreparing
+        ? `Dep: ${new Date(p.start_timestamp).toLocaleTimeString()}`
+        : `Arr: ${new Date(p.end_timestamp).toLocaleTimeString()}`;
+
+      return {
+        id: p.id,
+        type,
+        ship: p.ship_id,
+        status: p.status,
+        dir: isOrigin ? "to" : "from",
+        planetName: warpNameMap.get(targetUrl) ?? targetHostname,
+        url: targetUrl,
+        time: timeLabel,
+        coords: calculateCoordinates(targetUrl),
+        originCoords: calculateCoordinates(p.origin_url),
+        destCoords: calculateCoordinates(p.destination_url),
+        rawPlan: p,
+      };
+    });
+
+    archive = (archiveRecords || []).map((p: any) => {
+      const locationUrl =
+        p.destination_url === landingSite ? p.origin_url : p.destination_url;
+      return {
+        ship_id: p.ship_id,
+        event: p.destination_url === landingSite ? "ARRIVED" : "DEPARTED",
+        location_name:
+          warpNameMap.get(locationUrl) ?? new URL(locationUrl).hostname,
+        location_url: locationUrl,
+        timestamp:
+          p.destination_url === landingSite
+            ? p.end_timestamp
+            : p.start_timestamp,
+      };
+    });
+  } catch (e) {
+    console.error("Database fetch failed.", e);
+  }
+}
+
+const enrichedLinks = WARP_LINKS.map((link, index) => {
+  return {
+    ...link,
+    id: index + 1,
+    coords: calculateCoordinates(link.url),
+  };
+});
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Landing Site - {planetName}</title>
+    <link rel="space-manifest" href="/manifest.json" />
+    <link rel="stylesheet" href="/planet.css" />
+    <script is:inline src="/three.min.js"></script>
+    <script is:inline src="/map.js" defer></script>
+  </head>
+  <body
+    data-my-x={myCoords.x}
+    data-my-y={myCoords.y}
+    data-my-z={myCoords.z}
+    data-landing-site={landingSite}
+    data-departure-buffer={departureBuffer}
+  >
+    <div class="planet-container">
+      <div class="atmosphere"></div>
+      <div class="ring-back"></div>
+      <div class="planet"></div>
+      <div class="ring"></div>
+    </div>
+
+    <h1>{planetName}</h1>
+    <p>{planetDescription}</p>
+    <p>
+      Coordinates:
+      <code class="coord-display">{myCoords.formatted}</code>
+    </p>
+
+    <div class="status-badge">Space Port Active</div>
+
+    <div id="flight-deck" class="flight-deck hidden">
+      <div id="deck-checking" class="deck-content hidden">
+        <p style="text-align: center; color: var(--warp-text-dim);">
+          Scanning for space port&hellip;
+        </p>
+      </div>
+
+      <div id="deck-no-port" class="deck-content hidden">
+        <h3>No Space Port Detected</h3>
+        <div class="target-info">
+          <span class="label">Destination:</span>
+          <span id="no-port-target-name" class="value">---</span>
+        </div>
+        <div class="target-coords">
+          <span class="label">Coordinates:</span>
+          <code id="no-port-target-coords" class="value">---</code>
+        </div>
+        <p style="margin: 1rem 0 0.5rem;">
+          This planet does not have an active space port. Jump travel requires a
+          functioning space port at the destination to safely receive your
+          vessel.
+        </p>
+        <p
+          style="margin: 0 0 1rem; color: var(--warp-text-dim); font-size: 0.85rem;"
+        >
+          Only planets that are part of the
+          <a
+            href="https://federatedplanets.com"
+            style="color: var(--warp-accent);">Federated Planets</a
+          > network and running an active space port can accept jump arrivals.
+        </p>
+        <button id="no-port-cancel" class="cancel-button">DISMISS</button>
+      </div>
+
+      <div id="deck-jump" class="deck-content hidden">
+        <h3>Initiate Jump Sequence</h3>
+        <div class="target-info">
+          <span class="label">Destination:</span>
+          <span id="target-name" class="value">---</span>
+        </div>
+        <div class="target-coords">
+          <span class="label">Coordinates:</span>
+          <code id="target-coords" class="value">---</code>
+        </div>
+        <div class="ship-input-group" style="margin-bottom: 1rem;">
+          <label
+            for="ship-name"
+            class="label"
+            style="display: block; margin-bottom: 0.3rem;"
+            >Shuttle Designation:</label
+          >
+          <input
+            type="text"
+            id="ship-name"
+            class="ship-input"
+            placeholder="Enter ship name..."
+            style="width: 100%; background: rgba(0,0,0,0.3); border: 1px solid var(--warp-accent); color: #fff; padding: 0.5rem; border-radius: 4px; font-family: 'Courier New', monospace;"
+          />
+        </div>
+        <div class="jump-metrics">
+          <div class="metric">
+            <span class="label">Distance:</span>
+            <span id="jump-distance" class="value">0.00</span>
+            <span class="unit">sparsecs</span>
+          </div>
+          <div class="metric">
+            <span class="label">Time:</span>
+            <span id="jump-time" class="value">0.00</span>
+            <span class="unit">FY</span>
+          </div>
+        </div>
+        <button id="initiate-jump" class="jump-button">JUMP</button>
+        <button id="cancel-jump" class="cancel-button">CANCEL</button>
+      </div>
+    </div>
+
+    <div id="no-travel-dialog" class="flight-deck hidden">
+      <div class="deck-content">
+        <h3>Travel Not Available</h3>
+        <p id="no-travel-reason" style="margin: 0.5rem 0 1rem;"></p>
+        <p
+          style="margin: 0 0 1rem; color: var(--warp-text-dim); font-size: 0.85rem;"
+        >
+          To enable travel, ensure the destination and at least 3 planets in the
+          <strong>Active Warp Ring Connections</strong> below are running an active
+          space port and are reachable from this planet.
+        </p>
+        <button id="no-travel-close" class="cancel-button">DISMISS</button>
+      </div>
+    </div>
+
+    <section class="space-port">
+      <div class="traffic-log">
+        <h3>Live Space Port Traffic</h3>
+        <table
+          id="traffic-table"
+          class={`traffic-table${traffic.length === 0 ? " hidden" : ""}`}
+        >
+          <thead>
+            <tr>
+              <th>Ship</th>
+              <th>Status</th>
+              <th>Location</th>
+              <th>Time/ETA</th>
+            </tr>
+          </thead>
+          <tbody id="traffic-tbody">
+            {
+              traffic.map((item) => (
+                <tr
+                  class={`${item.type} status-${item.type === "preparation" && item.status === "PLAN_ACCEPTED" ? "scheduled" : item.status === "PLAN_ACCEPTED" ? "transit" : item.status.toLowerCase()}`}
+                  data-plan-id={item.id}
+                  data-ship-id={item.ship}
+                  data-event={item.type === "incoming" ? "ARRIVED" : "DEPARTED"}
+                  data-location-name={item.planetName}
+                  data-location-coords={item.coords.formatted}
+                  data-location-url={item.url}
+                >
+                  <td class="ship-id">{item.ship}</td>
+                  <td>
+                    <span class="status-label">
+                      {item.type === "preparation" &&
+                      item.status === "PLAN_ACCEPTED"
+                        ? "SCHEDULED"
+                        : item.status === "PLAN_ACCEPTED"
+                          ? item.type === "incoming"
+                            ? "INBOUND"
+                            : "OUTBOUND"
+                          : item.status}
+                    </span>
+                  </td>
+                  <td class="location">
+                    <span class={item.dir === "to" ? "dir-to" : "dir-from"}>
+                      {item.dir === "to" ? "▲" : "▼"}
+                    </span>{" "}
+                    {item.dir}:{" "}
+                    <a class="planet-link" href={item.url}>
+                      {item.planetName}
+                    </a>
+                    <br />
+                    <code class="coord-sm">{item.coords.formatted}</code>
+                  </td>
+                  <td
+                    class="eta"
+                    data-filed={item.rawPlan.start_timestamp - departureBuffer}
+                    data-start={item.rawPlan.start_timestamp}
+                    data-end={item.rawPlan.end_timestamp}
+                    data-type={item.type}
+                  >
+                    <div class="eta-time">{item.time}</div>
+                    <div class="eta-bar-track">
+                      <div class="eta-bar-fill" />
+                    </div>
+                  </td>
+                </tr>
+              ))
+            }
+          </tbody>
+        </table>
+        <p
+          id="traffic-empty"
+          class={`empty-msg${traffic.length > 0 ? " hidden" : ""}`}
+        >
+          No active traffic in sector.
+        </p>
+      </div>
+
+      <div class="mission-archive">
+        <h3>Recent Mission Archive</h3>
+        <table
+          id="archive-table"
+          class={`archive-table${archive.length === 0 ? " hidden" : ""}`}
+        >
+          <thead>
+            <tr>
+              <th>Ship</th>
+              <th>Event</th>
+              <th>Location</th>
+              <th>Timestamp</th>
+            </tr>
+          </thead>
+          <tbody id="archive-tbody">
+            {
+              archive.map((item: any, i: number) => (
+                <tr
+                  class={`${item.event.toLowerCase()}${i >= 5 ? " archive-extra" : ""}`}
+                >
+                  <td class="ship-id">{item.ship_id}</td>
+                  <td>
+                    <span class="event-label">{item.event}</span>
+                  </td>
+                  <td class="location">
+                    <span
+                      class={item.event === "DEPARTED" ? "dir-to" : "dir-from"}
+                    >
+                      {item.event === "DEPARTED" ? "▲" : "▼"}
+                    </span>{" "}
+                    {item.event === "DEPARTED" ? "to:" : "from:"}{" "}
+                    <a class="planet-link" href={item.location_url}>
+                      {item.location_name}
+                    </a>
+                    <br />
+                    <code class="coord-sm">
+                      {calculateCoordinates(item.location_url).formatted}
+                    </code>
+                  </td>
+                  <td class="timestamp">
+                    {new Date(item.timestamp).toLocaleTimeString()}
+                  </td>
+                </tr>
+              ))
+            }
+          </tbody>
+        </table>
+        <div id="archive-controls" class={archive.length <= 5 ? "hidden" : ""}>
+          <button id="archive-see-all" class="archive-see-all">See all</button>
+          <span id="archive-pagination" class="hidden">
+            <button id="archive-prev" class="archive-nav" disabled
+              >&lsaquo; Prev</button
+            >
+            <span id="archive-page-label" class="archive-page-label">1 / 1</span
+            >
+            <button id="archive-next" class="archive-nav">Next &rsaquo;</button>
+          </span>
+        </div>
+        <p
+          id="archive-empty"
+          class={`empty-msg${archive.length > 0 ? " hidden" : ""}`}
+        >
+          Archive empty. Secure sector.
+        </p>
+      </div>
+    </section>
+
+    <section class="warp-ring">
+      <h2>Active Warp Ring Connections</h2>
+
+      <div class="warp-ring-content">
+        <div class="star-map-wrapper">
+          <div
+            class="star-map-container"
+            id="three-container"
+            data-ships={JSON.stringify(traffic)}
+          >
+            <div class="map-label">1000x1000x1000 SPARSEC GRID</div>
+          </div>
+
+          <div class="map-legend">
+            <div class="legend-item">
+              <span class="legend-marker station"></span>
+              <span>You Are Here</span>
+            </div>
+            <div class="legend-item">
+              <span class="legend-marker neighbor"></span>
+              <span>Neighbor Planet</span>
+            </div>
+          </div>
+        </div>
+
+        <ol class="warp-links">
+          {
+            enrichedLinks.map((link) => (
+              <li>
+                <a
+                  href={link.url}
+                  data-id={link.id}
+                  data-x={link.coords.x}
+                  data-y={link.coords.y}
+                  data-z={link.coords.z}
+                  data-name={link.name}
+                  data-formatted={link.coords.formatted}
+                >
+                  {link.name}
+                </a>
+                <code class="coord" data-id={link.id}>
+                  {link.coords.formatted}
+                </code>
+              </li>
+            ))
+          }
+        </ol>
+      </div>
+    </section>
+
+    <footer>
+      {planetName} is one of the
+      <a href="https://federatedplanets.com">Federated Planets</a> terraformed with
+      <a href="https://github.com/Federated-Planets/planet">Source Codia</a>.
+    </footer>
+
+    <script is:inline>
+      const myX = parseFloat(document.body.dataset.myX);
+      const myY = parseFloat(document.body.dataset.myY);
+      const myZ = parseFloat(document.body.dataset.myZ);
+
+      const flightDeck = document.getElementById("flight-deck");
+      const targetName = document.getElementById("target-name");
+      const targetCoords = document.getElementById("target-coords");
+      const jumpDistance = document.getElementById("jump-distance");
+      const jumpTime = document.getElementById("jump-time");
+      const shipNameInput = document.getElementById("ship-name");
+      const initiateBtn = document.getElementById("initiate-jump");
+      const cancelBtn = document.getElementById("cancel-jump");
+
+      let currentTarget = null;
+
+      const generateShipSuggestion = () => {
+        const names = [
+          "Tiberius",
+          "Spring",
+          "Meridian",
+          "Avalon",
+          "Caspian",
+          "Orion",
+          "Solstice",
+          "Ember",
+          "Halcyon",
+          "Dawnstar",
+          "Vega",
+          "Cirrus",
+          "Nimbus",
+          "Equinox",
+          "Perihelion",
+          "Argent",
+          "Celeste",
+          "Horizon",
+          "Zenith",
+          "Aurora",
+        ];
+        const suffixes = ["", "", "", " II", " III", " IV"];
+        const name = names[Math.floor(Math.random() * names.length)];
+        const suffix = suffixes[Math.floor(Math.random() * suffixes.length)];
+        return `${name}${suffix}`;
+      };
+
+      const deckChecking = document.getElementById("deck-checking");
+      const deckNoPort = document.getElementById("deck-no-port");
+      const deckJump = document.getElementById("deck-jump");
+
+      const showDeckPanel = (panel) => {
+        for (const p of [deckChecking, deckNoPort, deckJump]) {
+          p.classList.add("hidden");
+        }
+        panel.classList.remove("hidden");
+      };
+
+      const closeDeck = () => {
+        flightDeck.classList.add("hidden");
+        window.dispatchEvent(new CustomEvent("clearSelection"));
+      };
+
+      document
+        .getElementById("no-port-cancel")
+        .addEventListener("click", closeDeck);
+
+      window.addEventListener("planetSelected", (e) => {
+        const data = e.detail;
+        currentTarget = data;
+
+        const dx = data.x - myX;
+        const dy = data.y - myY;
+        const dz = data.z - myZ;
+        const distance = Math.sqrt(dx * dx + dy * dy + dz * dz);
+        const time = distance / 100;
+
+        showDeckPanel(deckChecking);
+        flightDeck.classList.remove("hidden");
+
+        requestAnimationFrame(async () => {
+          let hasPort = false;
+          try {
+            const res = await fetch(
+              "/api/v1/port?action=check&url=" + encodeURIComponent(data.url),
+            );
+            const json = await res.json();
+            hasPort = json.has_space_port === true;
+          } catch (_) {}
+
+          if (hasPort) {
+            targetName.textContent = data.name;
+            targetCoords.textContent = data.formatted;
+            shipNameInput.value = generateShipSuggestion();
+            jumpDistance.textContent = distance.toFixed(2);
+            jumpTime.textContent = time.toFixed(2);
+            showDeckPanel(deckJump);
+          } else {
+            document.getElementById("no-port-target-name").textContent =
+              data.name;
+            document.getElementById("no-port-target-coords").textContent =
+              data.formatted;
+            showDeckPanel(deckNoPort);
+          }
+        });
+      });
+
+      cancelBtn.addEventListener("click", closeDeck);
+
+      const archiveTable = document.getElementById("archive-table");
+      const archiveTbody = document.getElementById("archive-tbody");
+      const archiveEmpty = document.getElementById("archive-empty");
+      const archiveControls = document.getElementById("archive-controls");
+      const archiveSeeAll = document.getElementById("archive-see-all");
+      const archivePagination = document.getElementById("archive-pagination");
+      const archivePrev = document.getElementById("archive-prev");
+      const archiveNext = document.getElementById("archive-next");
+      const archivePageLabel = document.getElementById("archive-page-label");
+
+      const ARCHIVE_COLLAPSED = 5;
+      const ARCHIVE_PAGE_SIZE = 10;
+      let archiveExpanded = false;
+      let archivePage = 0;
+
+      const renderArchive = () => {
+        const rows = Array.from(archiveTbody.querySelectorAll("tr"));
+        const totalPages = Math.ceil(rows.length / ARCHIVE_PAGE_SIZE);
+        rows.forEach((r, i) => {
+          if (!archiveExpanded) {
+            r.classList.toggle("archive-extra", i >= ARCHIVE_COLLAPSED);
+          } else {
+            const pageStart = archivePage * ARCHIVE_PAGE_SIZE;
+            r.classList.toggle(
+              "archive-extra",
+              i < pageStart || i >= pageStart + ARCHIVE_PAGE_SIZE,
+            );
+          }
+        });
+        if (archiveExpanded) {
+          archiveSeeAll.textContent = "See recent";
+          archiveSeeAll.classList.remove("hidden");
+          archivePagination.classList.toggle(
+            "hidden",
+            rows.length <= ARCHIVE_PAGE_SIZE,
+          );
+          archivePrev.disabled = archivePage === 0;
+          archiveNext.disabled = archivePage >= totalPages - 1;
+          archivePageLabel.textContent = `${archivePage + 1} / ${totalPages}`;
+        } else {
+          archiveSeeAll.textContent = "See all";
+          archiveSeeAll.classList.remove("hidden");
+          archivePagination.classList.add("hidden");
+        }
+        archiveControls.classList.toggle(
+          "hidden",
+          rows.length <= ARCHIVE_COLLAPSED,
+        );
+      };
+
+      archiveSeeAll.addEventListener("click", () => {
+        archiveExpanded = !archiveExpanded;
+        archivePage = 0;
+        renderArchive();
+      });
+
+      archivePrev.addEventListener("click", () => {
+        archivePage--;
+        renderArchive();
+      });
+      archiveNext.addEventListener("click", () => {
+        archivePage++;
+        renderArchive();
+      });
+
+      const ARRIVED_LINGER_MS = 5000;
+
+      const moveToArchive = (row) => {
+        const event = row.dataset.event || "DEPARTED";
+        const locationName = row.dataset.locationName || "";
+        const locationCoords = row.dataset.locationCoords || "";
+        const locationUrl = row.dataset.locationUrl || "";
+        const shipId = row.dataset.shipId || "";
+        const end = parseInt(row.querySelector(".eta")?.dataset.end || "0");
+        const timestamp = new Date(end || Date.now()).toLocaleTimeString();
+        const isDeparted = event === "DEPARTED";
+        const dirSpan = isDeparted
+          ? `<span class="dir-to">▲</span> to:`
+          : `<span class="dir-from">▼</span> from:`;
+        const locationLink = locationUrl
+          ? `<a class="planet-link" href="${locationUrl}">${locationName}</a>`
+          : locationName;
+
+        const archiveRow = document.createElement("tr");
+        archiveRow.className = event.toLowerCase();
+        archiveRow.innerHTML = `
+                <td class="ship-id">${shipId}</td>
+                <td><span class="event-label">${event}</span></td>
+                <td class="location">${dirSpan} ${locationLink}<br/><code class="coord-sm">${locationCoords}</code></td>
+                <td class="timestamp">${timestamp}</td>`;
+
+        archiveTbody.prepend(archiveRow);
+        archiveTable.classList.remove("hidden");
+        archiveEmpty.classList.add("hidden");
+
+        // Keep archive to last 20 entries
+        while (archiveTbody.children.length > 20)
+          archiveTbody.removeChild(archiveTbody.lastChild);
+
+        renderArchive();
+
+        if (window.removeShipFromScene)
+          window.removeShipFromScene(row.dataset.planId);
+        row.remove();
+        if (trafficTbody.children.length === 0) {
+          trafficTable.classList.add("hidden");
+          trafficEmpty.classList.remove("hidden");
+        }
+      };
+
+      const setRowStatus = (row, statusKey, labelText) => {
+        row.classList.remove(
+          "status-preparing",
+          "status-scheduled",
+          "status-transit",
+        );
+        row.classList.add(`status-${statusKey}`);
+        row.querySelector(".status-label").textContent = labelText;
+      };
+
+      const trafficTable = document.getElementById("traffic-table");
+      const trafficTbody = document.getElementById("traffic-tbody");
+      const trafficEmpty = document.getElementById("traffic-empty");
+
+      const addIncomingRow = (plan, originCoordsFormatted, originName) => {
+        if (Date.now() >= plan.end_timestamp) return; // Already finished — SSR rendered it in archive
+        if (document.querySelector(`tr[data-plan-id="${plan.id}"]`)) return;
+        const originHostname = new URL(plan.origin_url).hostname;
+        const displayName = originName || originHostname;
+        const eta = new Date(plan.end_timestamp).toLocaleTimeString();
+        const filedAt = Date.now();
+        const tr = document.createElement("tr");
+        tr.className = "incoming status-transit";
+        tr.dataset.planId = plan.id;
+        tr.dataset.shipId = plan.ship_id;
+        tr.dataset.event = "ARRIVED";
+        tr.dataset.locationName = displayName;
+        tr.dataset.locationCoords = originCoordsFormatted;
+        tr.dataset.locationUrl = plan.origin_url;
+        tr.innerHTML = `
+                <td class="ship-id">${plan.ship_id}</td>
+                <td><span class="status-label">INBOUND</span></td>
+                <td class="location"><span class="dir-from">▼</span> from: <a class="planet-link" href="${plan.origin_url}">${displayName}</a><br/><code class="coord-sm">${originCoordsFormatted}</code></td>
+                <td class="eta" data-filed="${filedAt}" data-start="${plan.start_timestamp}" data-end="${plan.end_timestamp}" data-type="incoming">
+                    <div class="eta-time">Arr: ${eta}</div>
+                    <div class="eta-bar-track"><div class="eta-bar-fill"></div></div>
+                </td>`;
+        trafficTbody.appendChild(tr);
+        trafficEmpty.classList.add("hidden");
+        trafficTable.classList.remove("hidden");
+        if (window.addShipToScene && originCoordsFormatted) {
+          const [ox, oy, oz] = originCoordsFormatted.split(":").map(parseFloat);
+          window.addShipToScene({
+            type: "incoming",
+            originCoords: { x: ox, y: oy, z: oz },
+            destCoords: {
+              x: parseFloat(document.body.dataset.myX),
+              y: parseFloat(document.body.dataset.myY),
+              z: parseFloat(document.body.dataset.myZ),
+            },
+            rawPlan: plan,
+          });
+        }
+      };
+
+      const addTrafficRow = (plan, filedAt) => {
+        const destHostname = new URL(plan.destination_url).hostname;
+        const eta = new Date(plan.end_timestamp).toLocaleTimeString();
+        const tr = document.createElement("tr");
+        tr.className = "outgoing status-preparing";
+        tr.dataset.planId = plan.id;
+        tr.dataset.shipId = plan.ship_id;
+        tr.dataset.event = "DEPARTED";
+        tr.dataset.locationName = currentTarget.name || destHostname;
+        tr.dataset.locationCoords = currentTarget.formatted;
+        tr.dataset.locationUrl = plan.destination_url;
+        tr.innerHTML = `
+                <td class="ship-id">${plan.ship_id}</td>
+                <td><span class="status-label">${plan.status}</span></td>
+                <td class="location"><span class="dir-to">▲</span> to: <a class="planet-link" href="${plan.destination_url}">${currentTarget.name || destHostname}</a><br/><code class="coord-sm">${currentTarget.formatted}</code></td>
+                <td class="eta" data-filed="${filedAt}" data-start="${plan.start_timestamp}" data-end="${plan.end_timestamp}" data-type="outgoing">
+                    <div class="eta-time">Arr: ${eta}</div>
+                    <div class="eta-bar-track"><div class="eta-bar-fill"></div></div>
+                </td>`;
+        trafficTbody.appendChild(tr);
+        trafficEmpty.classList.add("hidden");
+        trafficTable.classList.remove("hidden");
+        if (window.addShipToScene) {
+          window.addShipToScene({
+            type: "outgoing",
+            originCoords: {
+              x: parseFloat(document.body.dataset.myX),
+              y: parseFloat(document.body.dataset.myY),
+              z: parseFloat(document.body.dataset.myZ),
+            },
+            destCoords: {
+              x: currentTarget.x,
+              y: currentTarget.y,
+              z: currentTarget.z,
+            },
+            rawPlan: plan,
+          });
+        }
+        // Replay any events that arrived before this row existed
+        (bufferedEvents.get(plan.id) ?? []).forEach(applyEvent);
+        bufferedEvents.delete(plan.id);
+        document
+          .querySelector(".space-port")
+          .scrollIntoView({ behavior: "smooth", block: "start" });
+      };
+
+      const departureBufferMs = parseInt(
+        document.body.dataset.departureBuffer || "30000",
+      );
+
+      const noTravelDialog = document.getElementById("no-travel-dialog");
+      const noTravelReason = document.getElementById("no-travel-reason");
+      const NO_TRAVEL_MESSAGES = {
+        no_destination_space_port:
+          "The destination planet does not have an active space port. Jump travel requires a functioning space port at both origin and destination.",
+        insufficient_controllers:
+          "This planet does not have enough active neighboring space ports to establish a consensus quorum. At least 4 reachable planets with space ports are required to safely authorize jump travel.",
+      };
+      document
+        .getElementById("no-travel-close")
+        .addEventListener("click", () => {
+          noTravelDialog.classList.add("hidden");
+        });
+
+      initiateBtn.addEventListener("click", async () => {
+        const shipId =
+          "Shuttle " + (shipNameInput.value.trim() || "UNKNOWN-SHIP");
+        const filedAt = Date.now();
+        initiateBtn.disabled = true;
+        initiateBtn.textContent = "Electing Traffic Controllers...";
+
+        try {
+          const response = await fetch("/api/v1/port?action=initiate", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              ship_id: shipId,
+              destination_url: currentTarget.url,
+              departure_timestamp: Date.now(),
+            }),
+          });
+
+          const data = await response.json();
+          if (data.plan) {
+            addTrafficRow(data.plan, filedAt);
+            flightDeck.classList.add("hidden");
+            window.dispatchEvent(new CustomEvent("clearSelection"));
+          } else if (
+            data.error === "insufficient_controllers" ||
+            data.error === "no_destination_space_port"
+          ) {
+            flightDeck.classList.add("hidden");
+            window.dispatchEvent(new CustomEvent("clearSelection"));
+            noTravelReason.textContent =
+              NO_TRAVEL_MESSAGES[data.error] || "Travel is not available.";
+            noTravelDialog.classList.remove("hidden");
+            initiateBtn.disabled = false;
+            initiateBtn.textContent = "JUMP";
+          } else {
+            alert("Consensus Rejected: " + (data.error || "Unknown error"));
+            initiateBtn.disabled = false;
+            initiateBtn.textContent = "JUMP";
+          }
+        } catch (e) {
+          alert("Consensus Error: " + e.message);
+          initiateBtn.disabled = false;
+          initiateBtn.textContent = "JUMP";
+        }
+      });
+
+      // WebSocket: live status updates from TrafficControl DO
+      const EVENT_STATUS = {
+        PREPARE_PLAN: "PREPARING",
+        QUORUM_REACHED: "IN TRANSIT",
+      };
+
+      const STATUS_RANK = {
+        preparing: 0,
+        scheduled: 1,
+        transit: 2,
+        arrived: 3,
+      };
+
+      // Events keyed by plan_id, for rows that don't exist in DOM yet
+      const bufferedEvents = new Map();
+
+      const applyEvent = (event) => {
+        const status = EVENT_STATUS[event.type];
+        if (!status || !event.plan_id) return;
+        const row = document.querySelector(
+          `tr[data-plan-id="${event.plan_id}"]`,
+        );
+        if (!row) {
+          // Row not yet in DOM — buffer so addTrafficRow can replay it
+          const buf = bufferedEvents.get(event.plan_id) ?? [];
+          buf.push(event);
+          bufferedEvents.set(event.plan_id, buf);
+          return;
+        }
+        const startTime = parseInt(
+          row.querySelector(".eta")?.dataset.start || "0",
+        );
+        const isScheduled = status === "IN TRANSIT" && Date.now() < startTime;
+        const newKey = isScheduled
+          ? "scheduled"
+          : status === "IN TRANSIT"
+            ? "transit"
+            : "preparing";
+        const currentKey =
+          [...row.classList].find((c) => c.startsWith("status-"))?.slice(7) ??
+          "preparing";
+        if ((STATUS_RANK[newKey] ?? 0) <= (STATUS_RANK[currentKey] ?? 0))
+          return;
+        const transitLabel = row.classList.contains("incoming")
+          ? "INBOUND"
+          : "OUTBOUND";
+        setRowStatus(row, newKey, isScheduled ? "SCHEDULED" : transitLabel);
+      };
+
+      (() => {
+        const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+        const connect = () => {
+          const ws = new WebSocket(
+            `${protocol}//${window.location.host}/api/v1/control-ws`,
+          );
+          ws.onmessage = (e) => {
+            const msg = JSON.parse(e.data);
+            if (msg.type === "history") {
+              msg.data.forEach((event) => {
+                if (event.type === "INCOMING_REGISTERED" && event.plan) {
+                  addIncomingRow(
+                    event.plan,
+                    event.origin_coords_formatted ?? "",
+                    event.planet,
+                  );
+                } else {
+                  applyEvent(event);
+                }
+              });
+            } else if (msg.type === "INCOMING_REGISTERED" && msg.plan) {
+              addIncomingRow(
+                msg.plan,
+                msg.origin_coords_formatted ?? "",
+                msg.planet,
+              );
+            } else {
+              applyEvent(msg);
+            }
+          };
+          ws.onclose = () => setTimeout(connect, 3000);
+        };
+        connect();
+      })();
+
+      // Progress bars for Live Space Port Traffic
+      const updateEtaBars = (immediate = false) => {
+        const now = Date.now();
+        document.querySelectorAll(".eta[data-start]").forEach((td) => {
+          const filed = parseInt(td.dataset.filed || td.dataset.start);
+          const start = parseInt(td.dataset.start);
+          const end = parseInt(td.dataset.end);
+          const fill = td.querySelector(".eta-bar-fill");
+          if (!fill) return;
+          const p = Math.max(0, Math.min(1, (now - filed) / (end - filed)));
+          fill.style.width = p * 100 + "%";
+
+          const row = td.closest("tr");
+          if (!row) return;
+          if (row.classList.contains("status-scheduled") && now >= start) {
+            setRowStatus(
+              row,
+              "transit",
+              row.classList.contains("incoming") ? "INBOUND" : "OUTBOUND",
+            );
+          }
+          if (
+            now >= end &&
+            !row.classList.contains("status-arrived") &&
+            !row.dataset.arrivalScheduled
+          ) {
+            row.dataset.arrivalScheduled = "1";
+            if (immediate) {
+              moveToArchive(row);
+            } else {
+              setRowStatus(row, "arrived", "ARRIVED");
+              setTimeout(() => moveToArchive(row), ARRIVED_LINGER_MS);
+            }
+          }
+        });
+      };
+      renderArchive();
+      updateEtaBars(true);
+      setInterval(updateEtaBars, 1000);
+    </script>
+  </body>
+</html>