Add files using upload-large-folder tool

c0af099 verified 5 days ago

11.6 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>OpenHands Agent Canvas</title>
	<style>
	, ::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

	/* Agent Canvas design tokens. The splash renders before the frontend is
	served, so it cannot import the app's CSS — these values mirror the
	static baseline in src/tailwind.css / src/index.css. Keep in sync. */
	:root {
	--oh-background: #0b0e14; /* cool-grey-950 */
	--oh-foreground: #eef2f7; /* cool-grey-100 */
	--oh-muted: #a3b0c4; /* cool-grey-400 */
	--oh-text-dim: #7e8a9e; /* cool-grey-500 */
	--oh-text-subtle: #626d82; /* cool-grey-600 */
	--oh-border: #4b5468; /* cool-grey-700 */
	--oh-border-subtle: #383f50; /* cool-grey-800 */
	--oh-surface-deep: #05070a; /* cool-grey-975 */
	--oh-color-danger: #e76a5e;
	}

	html, body {
	width: 100%; height: 100%;
	background: var(--oh-background);
	font-family:
	-apple-system, "SF Pro", BlinkMacSystemFont, "Segoe UI", "Roboto",
	"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
	"Helvetica Neue", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: var(--oh-foreground);
	user-select: none;
	-webkit-app-region: drag;
	overflow: hidden;
	}

	body {
	display: flex;
	flex-direction: column;
	}

	.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* Must equal the collapsed window height (LOADING_WIN_HEIGHT in
	main.mjs): the block keeps its layout when the window grows to
	reveal the startup-log console below it. */
	height: 360px;
	flex: none;
	gap: 0;
	}

	/* Real app icon — squircle corners are baked into the PNG. Kept inert so
	image dragging cannot hijack the -webkit-app-region window drag. */
	.logo {
	width: 72px;
	height: 72px;
	margin-bottom: 20px;
	-webkit-user-drag: none;
	}

	h1 {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.3px;
	margin-bottom: 8px;
	color: var(--oh-foreground);
	}

	.tagline {
	font-size: 13px;
	color: var(--oh-muted);
	margin-bottom: 36px;
	}

	/* The app's canonical loading indicator: the 270° arc from
	src/icons/loading-outer.svg with LoadingSpinner's animate-spin timing. */
	.spinner {
	width: 25px;
	height: 25px;
	color: #fff;
	animation: spin 1s linear infinite;
	margin-bottom: 14px;
	}
	@keyframes spin {
	to { transform: rotate(360deg); }
	}

	.status {
	font-size: 12px;
	color: var(--oh-text-dim);
	letter-spacing: 0.3px;
	/* Long lines (e.g. uvx "Installing openhands-agent-server==1.24.0…")
	must not push the window or wrap awkwardly. */
	max-width: 360px;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	}

	.hint {
	margin-top: 14px;
	font-size: 11px;
	color: var(--oh-text-subtle);
	letter-spacing: 0.2px;
	max-width: 340px;
	text-align: center;
	line-height: 1.5;
	}

	/* Progress dots animation for status text */
	.dots::after {
	content: "";
	animation: dots 1.5s steps(3, end) infinite;
	}
	@keyframes dots {
	0% { content: ""; }
	33% { content: "."; }
	66% { content: ".."; }
	100% { content: "..."; }
	}

	.actions {
	margin-top: 16px;
	display: flex;
	gap: 10px;
	-webkit-app-region: no-drag;
	}

	.ghost-button {
	font: inherit;
	font-size: 11px;
	padding: 4px 12px;
	color: var(--oh-muted);
	background: transparent;
	border: 1px solid var(--oh-border);
	border-radius: 8px;
	cursor: pointer;
	-webkit-app-region: no-drag;
	}
	.ghost-button:hover {
	color: var(--oh-foreground);
	background: rgba(255, 255, 255, 0.06);
	}

	/* ── Startup-log console ─────────────────────────────────────────────
	Fills the extra height revealed by "Show details" (the window grows —
	see setLoadingWindowExpanded in main.mjs); zero-height and clipped
	while the window is collapsed. Interactive: opts out of the window
	drag region and re-enables text selection. */
	.console {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	margin: 0 16px 16px;
	background: var(--oh-surface-deep);
	border: 1px solid var(--oh-border-subtle);
	border-radius: 8px;
	overflow: hidden;
	-webkit-app-region: no-drag;
	}

	.console-head {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px 6px 5px 12px;
	border-bottom: 1px solid var(--oh-border-subtle);
	font-size: 11px;
	color: var(--oh-muted);
	}

	.log {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 8px 12px;
	/* The app's `code` stack (src/index.css). */
	font-family:
	source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
	font-size: 10.5px;
	line-height: 1.55;
	color: var(--oh-text-dim);
	user-select: text;
	-webkit-user-select: text;
	cursor: text;
	/* Full lines, never truncated — long uvx/pip output wraps. */
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	}
	.log:empty::before {
	content: "Waiting for output…";
	color: var(--oh-text-subtle);
	}

	.log-name {
	color: var(--oh-text-subtle);
	}
	.log-line-error {
	color: var(--oh-color-danger);
	}

	/* ── Failure state (main.mjs::showStartupFailure) ──────────────────── */
	body.failed .spinner {
	display: none;
	}
	body.failed .status {
	color: var(--oh-color-danger);
	/* The full error summary matters more than a tidy single line here. */
	white-space: normal;
	line-height: 1.45;
	}
	body.failed .hint {
	display: none;
	}
	.quit-button {
	display: none;
	}
	body.failed .quit-button {
	display: inline-block;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<img class="logo" src="build-resources/icon.png" alt="" draggable="false" />
	<h1>OpenHands Agent Canvas</h1>
	<p class="tagline">AI coding agent interface</p>
	<svg class="spinner" viewBox="0 0 66 66" fill="none" aria-hidden="true"
	xmlns="http://www.w3.org/2000/svg">
	<path d="M63 33C63 16.4315 49.5685 3 33 3C16.4315 3 3 16.4315 3 33C3 49.5685 16.4315 63 33 63"
	stroke="currentColor" stroke-width="6" stroke-linecap="round" />
	</svg>
	<p id="status" class="status">Starting services<span class="dots"></span></p>
	<p class="hint">
	First launch downloads Python + the OpenHands agent server.<br />
	This can take a few minutes on a fresh machine.
	</p>
	<div class="actions">
	<button id="details-toggle" type="button" class="ghost-button">
	Show details
	</button>
	<button id="quit-button" type="button" class="ghost-button quit-button">
	Quit
	</button>
	</div>
	</div>
	<div class="console" aria-label="Startup log">
	<div class="console-head">
	<span>Startup log</span>
	<button id="copy-logs" type="button" class="ghost-button">Copy</button>
	</div>
	<div id="log" class="log"></div>
	</div>
	<script>
	// Called from the Electron main process via webContents.executeJavaScript
	// (see electron/main.mjs::setLoadingStatus). Replaces the entire status
	// line, so the animated dots only appear when no concrete status is set.
	window.__setLoadingStatus = function (line) {
	var el = document.getElementById("status");
	if (!el) return;
	var text = String(line == null ? "" : line);
	el.textContent = text \|\| "";
	};

	// ── Startup-log console ──────────────────────────────────────────────
	// Fed by the main process over IPC via preload.cjs (window.desktopBoot);
	// undefined when the file is opened outside Electron, so every use is
	// guarded and the static layout stays previewable in a plain browser.
	// All DOM insertion uses textContent — log lines are untrusted process
	// output and must never be parsed as HTML.
	(function () {
	var boot = window.desktopBoot;
	var logEl = document.getElementById("log");
	var statusEl = document.getElementById("status");
	var toggleBtn = document.getElementById("details-toggle");
	var copyBtn = document.getElementById("copy-logs");
	var quitBtn = document.getElementById("quit-button");

	// Cap DOM rows so an hours-long install can't grow layout cost;
	// matches the main process's BOOT_LOG_MAX_LINES buffer cap.
	var MAX_LINES = 2000;
	var expanded = false;
	// Follow the tail only while the user hasn't scrolled up.
	var pinned = true;

	logEl.addEventListener("scroll", function () {
	pinned =
	logEl.scrollTop + logEl.clientHeight >= logEl.scrollHeight - 8;
	});

	function appendBatch(batch) {
	if (!batch \|\| !batch.length) return;
	var frag = document.createDocumentFragment();
	for (var i = 0; i < batch.length; i++) {
	var entry = batch[i];
	var row = document.createElement("div");
	row.className =
	"log-line" + (entry.level === "error" ? " log-line-error" : "");
	var name = document.createElement("span");
	name.className = "log-name";
	name.textContent = "[" + entry.name + "]";
	row.appendChild(name);
	row.appendChild(document.createTextNode(" " + entry.line));
	frag.appendChild(row);
	}
	logEl.appendChild(frag);
	while (logEl.childElementCount > MAX_LINES) {
	logEl.removeChild(logEl.firstElementChild);
	}
	if (pinned) logEl.scrollTop = logEl.scrollHeight;
	}

	function setExpanded(next) {
	expanded = next;
	toggleBtn.textContent = expanded ? "Hide details" : "Show details";
	if (boot) boot.setDetailsExpanded(expanded);
	if (expanded && pinned) logEl.scrollTop = logEl.scrollHeight;
	}

	toggleBtn.addEventListener("click", function () {
	setExpanded(!expanded);
	});

	copyBtn.addEventListener("click", function () {
	if (!boot) return;
	boot.copyLogs().then(function () {
	copyBtn.textContent = "Copied";
	setTimeout(function () {
	copyBtn.textContent = "Copy";
	}, 1200);
	});
	});

	quitBtn.addEventListener("click", function () {
	if (boot) boot.quit();
	});

	if (boot) {
	boot.onLogBatch(appendBatch);
	boot.onFatal(function (summary) {
	document.body.classList.add("failed");
	statusEl.textContent = String(summary == null ? "" : summary);
	// Main already resized the window; sync the local toggle state.
	if (!expanded) setExpanded(true);
	});
	}
	})();
	</script>
	</body>
	</html>