@hexclave/react 1.0.51 → 1.0.52

package/dist/esm/dev-tool/dev-tool-core.js

@@ -4,7 +4,6 @@ import { getGlobalUiInstance, h, hasAppendChild, setGlobalUiInstance, setHtml }
 import { hexclaveAppInternalsSymbol } from "../lib/hexclave-app/common.js";
 import { isLocalhost } from "@hexclave/shared/dist/utils/urls";
 import { getPagePrompt } from "../lib/hexclave-app/url-targets.js";
-import { envVars } from "../generated/env.js";
 import { getBaseUrl } from "../lib/hexclave-app/apps/implementations/common.js";
 import { devToolCSS } from "./dev-tool-styles.js";
 import { clampTriggerPosition, getSnappedTriggerPlacement, resolveTriggerPosition } from "./dev-tool-trigger-position.js";
@@ -17,6 +16,8 @@ const MAX_LOG_ENTRIES = 500;
 const CONSOLE_LOG_BATCH_SIZE = 100;
 const DRAG_THRESHOLD = 5;
 const DOCS_URL = "https://docs.hexclave.com";
+const LOCAL_DASHBOARD_ORIGIN = "http://localhost:26700";
+const HOSTED_DASHBOARD_URL = "https://app.hexclave.com";
 const TABS = [
 	{
 		id: "overview",
@@ -136,33 +137,35 @@ function nextId() {
 function resolveApiBaseUrl(app) {
 	return getBaseUrl(app[hexclaveAppInternalsSymbol].getConstructorOptions().baseUrl);
 }
-function shouldShowDashboardTab(app) {
-	return envVars.HEXCLAVE_IS_LOCAL_EMULATOR === "true" && isLocalhost(resolveApiBaseUrl(app));
+function localDashboardProjectUrl(app) {
+	return `${LOCAL_DASHBOARD_ORIGIN}/projects/${encodeURIComponent(app.projectId)}`;
 }
-function getTabsForApp(app) {
-	if (shouldShowDashboardTab(app)) return TABS;
-	return TABS.filter((tab) => tab.id !== "dashboard");
+function parseProjectAvailabilityResponse(body) {
+	if (typeof body !== "object" || body === null) return false;
+	return "project_available" in body && body.project_available === true;
 }
-function deriveDashboardBaseUrl(apiBaseUrl) {
+const LOCAL_DASHBOARD_PROBE_TIMEOUT_MS = 3e3;
+function canReachLocalDashboard() {
+	return isLocalhost(window.location.href) && window.location.protocol === "http:";
+}
+async function isLocalDashboardProjectAvailable(app) {
+	if (!canReachLocalDashboard()) return false;
+	const url = `${LOCAL_DASHBOARD_ORIGIN}/api/development-environment/project-availability?project_id=${encodeURIComponent(app.projectId)}`;
+	const controller = new AbortController();
+	const timeout = setTimeout(() => controller.abort(), LOCAL_DASHBOARD_PROBE_TIMEOUT_MS);
 	try {
-		const url = new URL(apiBaseUrl);
-		if (url.hostname === "localhost" || url.hostname === "127.0.0.1" || url.hostname === "[::1]") {
-			const port = url.port;
-			if (port && port.endsWith("02")) url.port = port.slice(0, -2) + "01";
-			return url.origin;
-		}
-		if (url.hostname.startsWith("api.")) {
-			url.hostname = "app." + url.hostname.slice(4);
-			return url.origin;
-		}
-		return url.origin;
+		const response = await fetch(url, {
+			method: "GET",
+			signal: controller.signal
+		});
+		if (!response.ok) return false;
+		return parseProjectAvailabilityResponse(await response.json());
 	} catch {
-		return "https://app.hexclave.com";
+		return false;
+	} finally {
+		clearTimeout(timeout);
 	}
 }
-function resolveDashboardUrl(app) {
-	return `${deriveDashboardBaseUrl(resolveApiBaseUrl(app))}/projects/${encodeURIComponent(app.projectId)}`;
-}
 function formatTimestamp(ts) {
 	return new Date(ts).toLocaleTimeString([], {
 		hour: "2-digit",
@@ -427,8 +430,8 @@ function createTabBar(tabs, activeTab, onTabChange, opts) {
 		setActive
 	};
 }
-function createIframeTab(src, title, loadingMsg = "Loading…", errorMsg = "Unable to load content", errorDetail, openExternallyLabel) {
-	const container = h("div", { className: "sdt-iframe-container" });
+function populateIframeTab(container, src, title, loadingMsg = "Loading…", errorMsg = "Unable to load content", errorDetail, openExternallyLabel) {
+	container.innerHTML = "";
 	if (openExternallyLabel != null) container.appendChild(h("div", { className: "sdt-iframe-toolbar" }, h("a", {
 		href: src,
 		target: "_blank",
@@ -457,7 +460,7 @@ function createIframeTab(src, title, loadingMsg = "Loading…", errorMsg = "Unab
 		} }, errorDetail));
 		const retryBtn = h("button", { className: "sdt-iframe-error-btn" }, "Retry");
 		retryBtn.addEventListener("click", () => {
-			container.replaceWith(createIframeTab(src, title, loadingMsg, errorMsg, errorDetail, openExternallyLabel));
+			populateIframeTab(container, src, title, loadingMsg, errorMsg, errorDetail, openExternallyLabel);
 		});
 		errDiv.appendChild(retryBtn);
 		const link = h("a", {
@@ -474,7 +477,6 @@ function createIframeTab(src, title, loadingMsg = "Loading…", errorMsg = "Unab
 		container.appendChild(errDiv);
 	});
 	container.appendChild(iframe);
-	return container;
 }
 function hasPersistentTokenStoreForDevTool(app) {
 	return app[hexclaveAppInternalsSymbol].getConstructorOptions().tokenStore !== null;
@@ -1420,7 +1422,35 @@ function createAITab(app) {
 	return container;
 }
 function createDashboardTab(app) {
-	return createIframeTab(resolveDashboardUrl(app), "Hexclave Dashboard", "Loading dashboard…", "Unable to load dashboard", "The dashboard may require authentication or block framing", "Open in New Tab");
+	const container = h("div", { className: "sdt-iframe-container" });
+	function showChecking() {
+		container.innerHTML = "";
+		container.appendChild(h("div", { className: "sdt-iframe-loading" }, "Checking development environment…"));
+	}
+	function showUnavailable() {
+		container.innerHTML = "";
+		const message = h("div", { className: "sdt-dashboard-unavailable" });
+		const text = h("div", { className: "sdt-dashboard-unavailable-text" });
+		text.appendChild(document.createTextNode("Navigate to "));
+		text.appendChild(h("a", {
+			className: "sdt-dashboard-unavailable-link",
+			href: HOSTED_DASHBOARD_URL,
+			target: "_blank",
+			rel: "noopener noreferrer"
+		}, HOSTED_DASHBOARD_URL));
+		text.appendChild(document.createTextNode(" to view this project's dashboard"));
+		message.appendChild(text);
+		container.appendChild(message);
+	}
+	async function check() {
+		showChecking();
+		const available = await isLocalDashboardProjectAvailable(app);
+		if (!container.isConnected) return;
+		if (available) populateIframeTab(container, localDashboardProjectUrl(app), "Hexclave Dashboard", "Loading dashboard…", "Unable to load dashboard", "The dashboard may require authentication or block framing", "Open in New Tab");
+		else showUnavailable();
+	}
+	runAsynchronously(check);
+	return container;
 }
 function createSupportTab(app) {
 	const container = h("div", { className: "sdt-support-tab" });
@@ -1816,7 +1846,7 @@ function createPanel(app, state, logStore, onClose) {
 		panel.style.width = state.get().panelWidth + "px";
 		panel.style.height = state.get().panelHeight + "px";
 	}
-	const tabs = getTabsForApp(app);
+	const tabs = TABS;
 	const storedActiveTab = state.get().activeTab;
 	const activeTab = tabs.some((tab) => tab.id === storedActiveTab) ? storedActiveTab : DEFAULT_STATE.activeTab;
 	applyPanelMode(activeTab);