@tomflow/proflow-execution-browser-extension 0.1.0

package/extension/content.ts

@@ -0,0 +1,138 @@
+type PageState = "IDLE" | "BUSY" | "BLOCKED" | "UNKNOWN";
+type ContentCommand = {
+	type: "PROFLOW_PAGE_COMMAND";
+	contentInstanceId: string;
+	expectedUrl: string;
+	operation: "observe" | "input" | "click" | "submit" | "verify";
+	selector?: string;
+	value?: string;
+	fingerprint?: string;
+};
+type ChromeContent = {
+	runtime: {
+		sendMessage(message: unknown): Promise<unknown>;
+		onMessage: {
+			addListener(
+				listener: (
+					message: ContentCommand,
+					sender: unknown,
+					sendResponse: (value: unknown) => void,
+				) => boolean | undefined,
+			): void;
+		};
+	};
+};
+declare const chrome: ChromeContent;
+
+const contentInstanceId = `content:${crypto.randomUUID()}`;
+
+function pageState(): { pageState: PageState; activityKind: string | null } {
+	if (document.querySelector('[role="dialog"]'))
+		return { pageState: "BLOCKED", activityKind: "ACTION_PERMISSION" };
+	if (
+		document.querySelector(
+			'[data-testid="stop-button"], button[aria-label*="Stop"]',
+		)
+	)
+		return { pageState: "BUSY", activityKind: "GENERATING" };
+	if (
+		document.querySelector(
+			'#prompt-textarea, textarea, [contenteditable="true"]',
+		)
+	)
+		return { pageState: "IDLE", activityKind: null };
+	return { pageState: "UNKNOWN", activityKind: null };
+}
+
+function observation() {
+	return {
+		url: location.href,
+		contentInstanceId,
+		...pageState(),
+		observedAt: new Date().toISOString(),
+	};
+}
+
+function safeElement(selector: string | undefined): HTMLElement {
+	if (!selector || selector.length > 512) throw new Error("SELECTOR_INVALID");
+	const element = document.querySelector(selector);
+	if (!(element instanceof HTMLElement)) throw new Error("ELEMENT_NOT_FOUND");
+	return element;
+}
+
+function hasFingerprint(fingerprint: string | undefined): boolean {
+	return Boolean(fingerprint && document.body.innerText.includes(fingerprint));
+}
+
+chrome.runtime.onMessage.addListener((command, _sender, sendResponse) => {
+	void (async () => {
+		if (
+			command.type !== "PROFLOW_PAGE_COMMAND" ||
+			command.contentInstanceId !== contentInstanceId ||
+			command.expectedUrl !== location.href
+		)
+			throw new Error("STALE_CONTENT_SESSION");
+		if (command.operation === "observe") return observation();
+		if (command.operation === "verify")
+			return {
+				...observation(),
+				verified: hasFingerprint(command.fingerprint),
+			};
+		if (pageState().pageState === "BLOCKED")
+			throw new Error("PAGE_PERMISSION_REQUIRES_HUMAN");
+		if (command.operation === "click") {
+			safeElement(command.selector).click();
+			return observation();
+		}
+		const input = safeElement(command.selector ?? "#prompt-textarea");
+		if (command.value === undefined || command.value.length > 4_096)
+			throw new Error("INPUT_BUDGET_EXCEEDED");
+		input.focus();
+		if (
+			input instanceof HTMLTextAreaElement ||
+			input instanceof HTMLInputElement
+		)
+			input.value = command.value;
+		else input.textContent = command.value;
+		input.dispatchEvent(
+			new InputEvent("input", {
+				bubbles: true,
+				inputType: "insertText",
+				data: command.value,
+			}),
+		);
+		if (command.operation === "submit")
+			safeElement(
+				'button[data-testid="send-button"], button[aria-label*="Send"]',
+			).click();
+		return observation();
+	})().then(
+		(value) => sendResponse({ ok: true, value }),
+		(error: unknown) =>
+			sendResponse({
+				ok: false,
+				error: error instanceof Error ? error.message : "PAGE_COMMAND_FAILED",
+			}),
+	);
+	return true;
+});
+
+const publish = () =>
+	chrome.runtime.sendMessage({
+		type: "PROFLOW_CONTENT_OBSERVATION",
+		observation: observation(),
+	});
+void publish();
+let publishTimer: ReturnType<typeof setTimeout> | undefined;
+const observer = new MutationObserver(() => {
+	if (publishTimer !== undefined) clearTimeout(publishTimer);
+	publishTimer = setTimeout(() => {
+		publishTimer = undefined;
+		void publish();
+	}, 100);
+});
+observer.observe(document.documentElement, {
+	subtree: true,
+	childList: true,
+	attributes: true,
+});

package/extension/options.html

@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width,initial-scale=1" />
+		<title>ProFlow Local Connections</title>
+		<style>
+			body { font: 14px system-ui; margin: 24px; max-width: 680px; }
+			section { border-top: 1px solid #ddd; margin-top: 24px; padding-top: 12px; }
+			label { display: block; margin: 16px 0; }
+			input { box-sizing: border-box; display: block; margin-top: 6px; padding: 8px; width: 100%; }
+			button { padding: 8px 14px; }
+			[role="status"] { margin-top: 12px; }
+		</style>
+	</head>
+	<body>
+		<h1>ProFlow local connections</h1>
+		<p>Extension ID: <code id="extension-id"></code></p>
+
+		<section>
+			<h2>Browser Reality Bridge</h2>
+			<form id="bridge-form">
+				<label>Loopback endpoint <input id="bridge-endpoint" required placeholder="http://127.0.0.1:47831" /></label>
+				<label>Ephemeral bridge token <input id="bridge-token" type="password" required autocomplete="off" /></label>
+				<button type="submit">Save bridge</button>
+			</form>
+			<p id="bridge-status" role="status"></p>
+		</section>
+
+		<section>
+			<h2>Task Application</h2>
+			<p>Connects the Side Panel to the loopback platform-host application surface. This credential is separate from Role and Browser-bridge credentials.</p>
+			<form id="task-application-form">
+				<label>Platform-host endpoint <input id="task-application-endpoint" required placeholder="http://127.0.0.1:47830" /></label>
+				<label>Task application token <input id="task-application-token" type="password" required autocomplete="off" /></label>
+				<button type="submit">Save Task application</button>
+			</form>
+			<p id="task-application-status" role="status"></p>
+		</section>
+
+		<section>
+			<h2>Execution Approval Application</h2>
+			<p>Dedicated human Approval credential. It is separate from Task, Role and Browser bridge credentials.</p>
+			<form id="approval-application-form">
+				<label>Platform-host endpoint <input id="approval-application-endpoint" required placeholder="http://127.0.0.1:47830" /></label>
+				<label>Approval application token <input id="approval-application-token" type="password" required autocomplete="off" /></label>
+				<button type="submit">Save Approval application</button>
+			</form>
+			<p id="approval-application-status" role="status"></p>
+		</section>
+
+		<script type="module" src="../dist/extension/options.js"></script>
+	</body>
+</html>

package/extension/options.ts

@@ -0,0 +1,98 @@
+export {};
+
+type ChromeOptions = {
+	runtime: { id: string };
+	storage: {
+		local: {
+			get(key: string): Promise<Record<string, unknown>>;
+			set(value: Record<string, unknown>): Promise<void>;
+		};
+	};
+};
+declare const chrome: ChromeOptions;
+
+type LocalConfigForm = {
+	storageKey:
+		| "proflowRuntimeBridge"
+		| "proflowTaskApplication"
+		| "proflowApprovalApplication";
+	formId: string;
+	endpointId: string;
+	tokenId: string;
+	statusId: string;
+};
+
+function parseEndpoint(raw: string): string {
+	const parsed = new URL(raw);
+	if (
+		parsed.protocol !== "http:" ||
+		parsed.hostname !== "127.0.0.1" ||
+		parsed.pathname !== "/" ||
+		parsed.search !== "" ||
+		parsed.hash !== ""
+	)
+		throw new Error("Endpoint must be a loopback HTTP origin");
+	return raw.replace(/\/$/, "");
+}
+
+function wireConfigForm(config: LocalConfigForm) {
+	const endpoint = document.querySelector<HTMLInputElement>(
+		`#${config.endpointId}`,
+	);
+	const token = document.querySelector<HTMLInputElement>(`#${config.tokenId}`);
+	const status = document.querySelector<HTMLElement>(`#${config.statusId}`);
+	const form = document.querySelector<HTMLFormElement>(`#${config.formId}`);
+	if (!endpoint || !token || !status || !form)
+		throw new Error("OPTIONS_DOM_INVALID");
+
+	void chrome.storage.local.get(config.storageKey).then((stored) => {
+		const value = stored[config.storageKey];
+		if (typeof value !== "object" || value === null) return;
+		const record = value as Record<string, unknown>;
+		if (typeof record.endpoint === "string") endpoint.value = record.endpoint;
+	});
+
+	form.addEventListener("submit", (event) => {
+		event.preventDefault();
+		void (async () => {
+			const normalizedEndpoint = parseEndpoint(endpoint.value);
+			if (token.value.length < 32) throw new Error("Token is too short");
+			await chrome.storage.local.set({
+				[config.storageKey]: {
+					endpoint: normalizedEndpoint,
+					token: token.value,
+				},
+			});
+			token.value = "";
+			status.textContent = "Saved.";
+		})().catch((error: unknown) => {
+			status.textContent =
+				error instanceof Error ? error.message : "Save failed";
+		});
+	});
+}
+
+document.querySelector<HTMLElement>("#extension-id")?.append(chrome.runtime.id);
+
+wireConfigForm({
+	storageKey: "proflowRuntimeBridge",
+	formId: "bridge-form",
+	endpointId: "bridge-endpoint",
+	tokenId: "bridge-token",
+	statusId: "bridge-status",
+});
+wireConfigForm({
+	storageKey: "proflowTaskApplication",
+	formId: "task-application-form",
+	endpointId: "task-application-endpoint",
+	tokenId: "task-application-token",
+	statusId: "task-application-status",
+});
+
+wireConfigForm({
+	storageKey: "proflowApprovalApplication",
+	formId: "approval-application-form",
+	endpointId: "approval-application-endpoint",
+	tokenId: "approval-application-token",
+	statusId: "approval-application-status",
+});

package/extension/side-panel.html

@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width" />
+		<title>ProFlow</title>
+		<style>
+			body { font: 13px system-ui; margin: 12px; }
+			section { border-top: 1px solid #ddd; margin-top: 14px; padding-top: 10px; }
+			label { display: block; margin: 8px 0; }
+			input, textarea { box-sizing: border-box; display: block; margin-top: 4px; width: 100%; }
+			textarea { min-height: 72px; }
+			button { margin: 4px 4px 4px 0; padding: 5px 9px; }
+			button[disabled] { opacity: .55; }
+			.task { border: 1px solid #ddd; margin: 6px 0; padding: 7px; }
+			.meta { color: #555; font-size: 12px; }
+			#error { color: #a00; white-space: pre-wrap; }
+			#result { white-space: pre-wrap; }
+			#browser-status { max-height: 180px; overflow: auto; }
+		</style>
+	</head>
+	<body>
+		<header>
+			<h1>ProFlow</h1>
+			<div id="connection" class="meta">Connecting…</div>
+		</header>
+
+		<section>
+			<h2>New Task</h2>
+			<form id="new-task-form">
+				<label>Title <input id="task-title" required /></label>
+				<label>Objective <textarea id="task-objective" required></textarea></label>
+				<p class="meta">Requirement — clarified by the Product Worker after binding; not seeded here.</p>
+				<label>Ordered plan (JSON array)
+					<textarea id="task-plan" required>[{"nodeId":"dev","title":"Implement","objective":"Implement the requirement","requiredAgentPackageRef":"@tomflow/proflow-agent-controller-dev","inputDocuments":["REQUIREMENT"],"outputDocuments":[]},{"nodeId":"test","title":"Verify","objective":"Verify the implementation","requiredAgentPackageRef":"@tomflow/proflow-agent-test-ops","inputDocuments":["REQUIREMENT"],"outputDocuments":[]}]</textarea>
+				</label>
+				<button id="new-task" type="submit">New Task + 3 Workers</button>
+			</form>
+		</section>
+
+		<section>
+			<h2>Tasks</h2>
+			<button id="refresh-tasks" type="button">Refresh</button>
+			<div id="tasks"></div>
+		</section>
+
+		<section>
+			<h2>Selected Task</h2>
+			<div id="selected-task" class="meta">None selected.</div>
+			<button id="start-task" type="button" disabled>Confirm / Start</button>
+			<button id="ensure-workers" type="button" disabled>Recover missing Workers</button>
+			<div id="nodes"></div>
+		</section>
+
+		<section>
+			<h2>Execution Approval</h2>
+			<p class="meta">Approval is an Execution-owned durable fact. This panel only sends authenticated human decisions to the Execution Owner.</p>
+			<button id="refresh-approvals" type="button">Refresh approvals</button>
+			<div id="approvals"></div>
+		</section>
+
+		<section>
+			<h2>System Assessment</h2>
+			<p class="meta">Read-only derived assessment. It never mutates Task/Approval owner facts.</p>
+			<div id="system-assessment" class="meta">No assessment yet.</div>
+		</section>
+
+		<section>
+			<h2>Browser Carrier</h2>
+			<pre id="browser-status">Connecting…</pre>
+		</section>
+
+		<p id="error" role="alert"></p>
+		<pre id="result" role="status"></pre>
+		<script type="module" src="../dist/extension/side-panel.js"></script>
+	</body>
+</html>