@rigkit/provider-freestyle 0.2.3 → 0.2.5

package/src/terminal-session.ts

@@ -4,9 +4,13 @@ import type { ProviderInteractionSession } from "@rigkit/engine";
 export type FreestyleTerminalSessionRequest = {
   title: string;
   command: string;
+  displayCommand?: string;
+  startupInput?: string;
   remoteCommand?: string;
+  canFinishWhileRunning?: boolean;
   instructions?: string;
   nodePath?: string;
+  openExternalTarget?: (target: string) => unknown;
 };
 
 export type FreestyleTerminalSessionResult = {
@@ -38,13 +42,19 @@ export function createFreestyleTerminalSession(
   let terminalCols = 100;
   let terminalRows = 28;
   let terminalQueryBuffer = "";
+  let browserPromptOutputTail = "";
+  let browserPromptOpenTimer: ReturnType<typeof setTimeout> | undefined;
   let proc: Subprocess<"pipe", "pipe", "pipe"> | undefined;
   let stdin: { write(data: Uint8Array): unknown; flush?(): unknown } | undefined;
   let complete!: (result: FreestyleTerminalSessionResult) => void;
   let fail!: (error: Error) => void;
   const sockets = new Set<ServerWebSocket<SocketData>>();
   const outputBuffer: string[] = [];
-  const startupInput = request.remoteCommand ? ensureTrailingNewline(request.remoteCommand) : undefined;
+  const openedExternalTargets = new Set<string>();
+  const startupCommand = request.startupInput ?? request.remoteCommand;
+  const startupInput = startupCommand ? ensureTrailingNewline(startupCommand) : undefined;
+  const displayCommand = request.displayCommand ?? request.remoteCommand ?? request.command;
+  const canFinishWhileRunning = canFinishWhileProcessRuns(request, startupInput);
 
   const completed = new Promise<FreestyleTerminalSessionResult>((resolve, reject) => {
     complete = resolve;
@@ -116,6 +126,7 @@ export function createFreestyleTerminalSession(
     stop: () => {
       if (stopped) return;
       stopped = true;
+      clearTimeout(browserPromptOpenTimer);
       proc?.kill();
       server.stop(true);
     },
@@ -127,13 +138,14 @@ export function createFreestyleTerminalSession(
     broadcast({
       type: "status",
       status: "Connected",
-      canFinish: false,
+      canFinish: canFinishWhileRunning,
     });
 
-    proc = Bun.spawn(["sh", "-lc", `exec ${request.command}`], {
+    proc = Bun.spawn(["sh", "-lc", terminalProcessShellCommand(request.command)], {
       stdin: "pipe",
       stdout: "pipe",
       stderr: "pipe",
+      env: terminalProcessEnv(terminalCols, terminalRows),
     });
     stdin = proc.stdin;
 
@@ -178,6 +190,7 @@ export function createFreestyleTerminalSession(
   function handleProcessOutput(data: string): void {
     appendOutput(data);
     respondToTerminalQueries(data);
+    openBrowserUrlsFromOutput(data);
   }
 
   function appendOutput(data: string): void {
@@ -187,19 +200,20 @@ export function createFreestyleTerminalSession(
   }
 
   function writeInput(data: string): void {
-    if (isCursorPositionReport(data)) return;
+    const input = sanitizeBrowserTerminalInput(data);
+    if (!input) return;
 
-    if (startupInput && data === startupInput) {
+    if (startupInput && input === startupInput) {
       if (remoteCommandStarted) return;
       remoteCommandStarted = true;
       broadcast({
         type: "status",
-        status: `Running ${request.remoteCommand}`,
+        status: `Running ${displayCommand}`,
         canFinish: true,
       });
     }
 
-    writeProcessInput(data);
+    writeProcessInput(input);
   }
 
   function writeProcessInput(data: string): void {
@@ -228,6 +242,26 @@ export function createFreestyleTerminalSession(
     }
   }
 
+  function openBrowserUrlsFromOutput(data: string): void {
+    if (!request.openExternalTarget) return;
+    browserPromptOutputTail = (browserPromptOutputTail + data).slice(-12_000);
+    clearTimeout(browserPromptOpenTimer);
+    browserPromptOpenTimer = setTimeout(openBufferedBrowserPromptUrls, 600);
+  }
+
+  function openBufferedBrowserPromptUrls(): void {
+    browserPromptOpenTimer = undefined;
+    const openExternalTarget = request.openExternalTarget;
+    if (!openExternalTarget) return;
+    for (const url of browserPromptUrlsInText(browserPromptOutputTail)) {
+      if (openedExternalTargets.has(url)) continue;
+      openedExternalTargets.add(url);
+      Promise.resolve(openExternalTarget(url)).catch(() => {
+        // The URL remains visible/clickable in the terminal if the host cannot open it.
+      });
+    }
+  }
+
   function requestFinish(): void {
     if (settled) return;
     settled = true;
@@ -250,10 +284,10 @@ export function createFreestyleTerminalSession(
       return;
     }
     if (remoteCommandStarted) {
-      send(ws, { type: "status", status: `Running ${request.remoteCommand}`, canFinish: true });
+      send(ws, { type: "status", status: `Running ${displayCommand}`, canFinish: true });
       return;
     }
-    send(ws, { type: "status", status: proc ? "Connected" : "Starting", canFinish: !request.remoteCommand });
+    send(ws, { type: "status", status: proc ? "Connected" : "Starting", canFinish: canFinishWhileRunning });
   }
 
   function broadcast(message: ServerMessage): void {
@@ -261,6 +295,192 @@ export function createFreestyleTerminalSession(
   }
 }
 
+function browserPromptUrlsInText(text: string): string[] {
+  const cleaned = stripAnsi(text).replace(/\r(?!\n)/g, "\n");
+  const urls: string[] = [];
+  const matcher = /https?:\/\/[^\s<>"'\\]+/ig;
+  let match: RegExpExecArray | null;
+  while ((match = matcher.exec(cleaned)) !== null) {
+    const url = normalizeHttpUrl(match[0]);
+    if (!url) continue;
+    const context = cleaned.slice(Math.max(0, match.index - 260), match.index);
+    const trailing = cleaned.slice(match.index + match[0].length, match.index + match[0].length + 260);
+    if (looksLikeBrowserAuthPrompt(context) && looksLikeCompleteBrowserPrompt(trailing)) urls.push(url);
+  }
+  return urls;
+}
+
+function looksLikeBrowserAuthPrompt(context: string): boolean {
+  const lower = context.toLowerCase();
+  return Boolean(
+    lower.includes("browser") ||
+      lower.includes("sign in") ||
+      lower.includes("login") ||
+      lower.includes("oauth") ||
+      lower.includes("authorize") ||
+      lower.includes("visit:"),
+  );
+}
+
+function looksLikeCompleteBrowserPrompt(trailing: string): boolean {
+  const lower = trailing.toLowerCase();
+  return Boolean(
+    lower.includes("paste code here") ||
+      lower.includes("in your browser"),
+  );
+}
+
+function normalizeHttpUrl(value: string): string | undefined {
+  let url = value.trim();
+  while (/[),.;:!?\]}]+$/.test(url)) url = url.slice(0, -1);
+  try {
+    const parsed = new URL(url);
+    if (parsed.protocol === "http:" || parsed.protocol === "https:") return parsed.href;
+  } catch {
+    return undefined;
+  }
+  return undefined;
+}
+
+function stripAnsi(text: string): string {
+  return text.replace(/[\u001b\u009b][[\]()#;?]*(?:(?:(?:[a-zA-Z\d]*(?:;[a-zA-Z\d]*)*)?\u0007)|(?:(?:\d{1,4}(?:;\d{0,4})*)?[\dA-PR-TZcf-nq-uy=><~]))/g, "");
+}
+
+function terminalProcessShellCommand(command: string): string {
+  return [
+    "if command -v python3 >/dev/null 2>&1; then",
+    `  exec python3 -c ${shellQuote(ptyBridgePythonScript)} ${shellQuote(command)}`,
+    "fi",
+    `exec ${command}`,
+  ].join("\n");
+}
+
+function terminalProcessEnv(cols: number, rows: number): Record<string, string> {
+  const env: Record<string, string> = {};
+  for (const [key, value] of Object.entries(process.env)) {
+    if (typeof value === "string") env[key] = value;
+  }
+  env.TERM = env.TERM || "xterm-256color";
+  env.COLORTERM = env.COLORTERM || "truecolor";
+  env.COLUMNS = String(cols);
+  env.LINES = String(rows);
+  return env;
+}
+
+const ptyBridgePythonScript = String.raw`
+import errno
+import fcntl
+import os
+import pty
+import select
+import signal
+import struct
+import sys
+import termios
+
+command = sys.argv[1]
+rows = int(os.environ.get("LINES") or "28")
+cols = int(os.environ.get("COLUMNS") or "100")
+
+pid, fd = pty.fork()
+if pid == 0:
+    os.environ.setdefault("TERM", "xterm-256color")
+    os.environ.setdefault("COLORTERM", "truecolor")
+    os.execlp("sh", "sh", "-lc", "exec " + command)
+
+def forward_signal(signum, _frame):
+    try:
+        os.kill(pid, signum)
+    finally:
+        sys.exit(128 + signum)
+
+signal.signal(signal.SIGTERM, forward_signal)
+signal.signal(signal.SIGINT, forward_signal)
+
+try:
+    fcntl.ioctl(fd, termios.TIOCSWINSZ, struct.pack("HHHH", rows, cols, 0, 0))
+except Exception:
+    pass
+
+for target in (fd, sys.stdin.fileno()):
+    try:
+        os.set_blocking(target, False)
+    except Exception:
+        pass
+
+stdout_fd = sys.stdout.fileno()
+stdin_open = True
+child_exited = False
+exit_code = 0
+
+while True:
+    reads = [fd]
+    if stdin_open:
+        reads.append(sys.stdin.fileno())
+    try:
+        ready, _, _ = select.select(reads, [], [], 0.1)
+    except InterruptedError:
+        continue
+
+    if fd in ready:
+        try:
+            data = os.read(fd, 65536)
+        except OSError as exc:
+            if exc.errno not in (errno.EIO, errno.EBADF):
+                raise
+            data = b""
+        if data:
+            os.write(stdout_fd, data)
+        else:
+            child_exited = True
+
+    if stdin_open and sys.stdin.fileno() in ready:
+        try:
+            data = os.read(sys.stdin.fileno(), 65536)
+        except BlockingIOError:
+            data = None
+        if data:
+            os.write(fd, data)
+        elif data == b"":
+            stdin_open = False
+
+    try:
+        done_pid, status = os.waitpid(pid, os.WNOHANG)
+    except ChildProcessError:
+        done_pid = pid
+        status = 0
+
+    if done_pid == pid:
+        child_exited = True
+        if os.WIFEXITED(status):
+            exit_code = os.WEXITSTATUS(status)
+        elif os.WIFSIGNALED(status):
+            exit_code = 128 + os.WTERMSIG(status)
+        else:
+            exit_code = 1
+
+    if child_exited:
+        while True:
+            try:
+                data = os.read(fd, 65536)
+            except OSError:
+                break
+            if not data:
+                break
+            os.write(stdout_fd, data)
+        break
+
+try:
+    os.close(fd)
+except Exception:
+    pass
+sys.exit(exit_code)
+`;
+
+function shellQuote(value: string): string {
+  return `'${value.replaceAll("'", `'\\''`)}'`;
+}
+
 function parseClientMessage(raw: string | Buffer): ClientMessage | undefined {
   if (typeof raw !== "string") return undefined;
   try {
@@ -286,6 +506,30 @@ function isCursorPositionReport(data: string): boolean {
   return /^\x1b\[\??\d+;\d+R$/.test(data);
 }
 
+function isDeviceAttributesReport(data: string): boolean {
+  return /^\x1b\[(?:[>?]\d+)?(?:;\d+)*c$/.test(data);
+}
+
+function isDeviceStatusReport(data: string): boolean {
+  return /^\x1b\[\??\d+n$/.test(data);
+}
+
+function isStringControlResponse(data: string): boolean {
+  return /^(?:\x1b[\]\^_P]|[\x90\x9d\x9e\x9f])/.test(data);
+}
+
+function sanitizeBrowserTerminalInput(data: string): string {
+  if (
+    isCursorPositionReport(data) ||
+    isDeviceAttributesReport(data) ||
+    isDeviceStatusReport(data) ||
+    isStringControlResponse(data)
+  ) {
+    return "";
+  }
+  return data;
+}
+
 function send(ws: ServerWebSocket<SocketData>, message: ServerMessage): void {
   ws.send(JSON.stringify(message));
 }
@@ -299,11 +543,11 @@ function htmlResponse(body: string): Response {
     headers: {
       "content-type": "text/html; charset=utf-8",
       "content-security-policy": [
-        "default-src 'none'",
-        "script-src 'unsafe-inline' 'unsafe-eval' 'wasm-unsafe-eval' https://esm.sh",
-        "style-src 'unsafe-inline'",
-        "connect-src 'self' ws: wss: https://esm.sh",
-        "form-action 'self'",
+      "default-src 'none'",
+      "script-src 'unsafe-inline' 'unsafe-eval' 'wasm-unsafe-eval' https://esm.sh",
+      "style-src 'unsafe-inline' https://esm.sh",
+      "connect-src 'self' ws: wss: https://esm.sh",
+      "form-action 'self'",
       ].join("; "),
     },
   });
@@ -314,423 +558,565 @@ function renderInteractionPage(
   options: { completed?: boolean; startupInput?: string } = {},
 ): string {
   const completed = options.completed ?? false;
-  const escapedTitle = escapeHtml(completed ? "Interactive task completed" : request.title);
-  const escapedNode = escapeHtml(request.nodePath ?? "provider");
+  const command = request.displayCommand ?? request.remoteCommand ?? request.command;
+  const node = request.nodePath ?? "provider";
+  const instructions = request.instructions ?? "";
+
+  const escapedDocTitle = escapeHtml(completed ? "Interactive task completed" : request.title);
   const escapedLabel = escapeHtml(request.title);
-  const escapedInstructions = request.instructions ? escapeHtml(request.instructions) : "";
-  const escapedCommand = escapeHtml(request.remoteCommand ?? request.command);
+  const escapedCommand = escapeHtml(command);
+  const escapedInstructions = instructions ? escapeHtml(instructions) : "";
+
+  const titleLit = javaScriptLiteral(request.title);
+  const instructionsLit = javaScriptLiteral(instructions);
+  const nodeLit = javaScriptLiteral(node);
   const startupInputLiteral = javaScriptLiteral(options.startupInput ?? null);
+  const canFinishWhileRunningLiteral = javaScriptLiteral(canFinishWhileProcessRuns(request, options.startupInput));
+  const initialCompletedLiteral = completed ? "true" : "false";
 
   return `<!doctype html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>${escapedTitle}</title>
+  <title>${escapedDocTitle}</title>
+  <link rel="stylesheet" href="https://esm.sh/@xterm/xterm@6.0.0/css/xterm.css">
   <style>
     :root {
-      color-scheme: dark;
-      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      background: #0a0a0a;
-      color: #f5f5f5;
+      color-scheme: light;
+      --bg: #efece5;
+      --surface: #ffffff;
+      --fg: #0a0a0a;
+      --muted: #5a5a5a;
+      --dim: #8e8a80;
+      --border: #d8d2c5;
+      --border-strong: #b8b0a0;
+      --accent: #2d4df5;
+      --accent-soft: #e8ecff;
+      --ok: #0f9d58;
+      --err: #d93025;
+      --term-bg: #faf8f2;
+      --term-fg: #1a1a1a;
+      --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+      --sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      font-family: var(--sans);
+      color: var(--fg);
+      background: var(--bg);
     }
+    * { box-sizing: border-box; }
     body {
       margin: 0;
-      height: 100vh;
-      padding: 24px;
-      display: grid;
-      place-items: center;
-      box-sizing: border-box;
+      min-height: 100vh;
       overflow: hidden;
-      background:
-        radial-gradient(circle at 18% 0%, rgba(82, 82, 91, 0.16), transparent 28%),
-        #0a0a0a;
+      background: var(--bg);
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
     }
-    .terminal-window {
-      width: min(1120px, 100%);
-      height: min(760px, calc(100vh - 48px));
-      min-height: 420px;
+    #app {
       display: grid;
-      grid-template-rows: auto auto minmax(0, 1fr) auto;
-      overflow: hidden;
-      border: 1px solid #2b2b2f;
-      border-radius: 8px;
-      background: #0b0f14;
-      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
+      grid-template-rows: auto minmax(0, 1fr);
+      height: 100vh;
     }
-    .titlebar {
-      min-height: 50px;
-      display: flex;
-      align-items: center;
-      gap: 14px;
-      padding: 11px 14px;
-      border-bottom: 1px solid #27272a;
-      background: linear-gradient(#1c1c20, #17171a);
-      box-sizing: border-box;
+    .noscript-fallback {
+      padding: 32px;
+      color: var(--muted);
+      font-size: 14px;
+      line-height: 1.6;
+      max-width: 640px;
+      margin: 0 auto;
     }
-    .lights {
+    .app-header {
       display: flex;
-      gap: 7px;
-      flex: 0 0 auto;
+      align-items: center;
+      padding: 18px 24px 14px;
     }
-    .light {
-      width: 11px;
-      height: 11px;
-      border-radius: 999px;
-      background: #3f3f46;
-      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
+    .brand {
+      display: inline-flex;
+      align-items: center;
+      gap: 10px;
+      color: var(--fg);
     }
-    .light.red {
-      background: #ff5f57;
+    .brand-mark { width: 22px; height: 22px; color: var(--fg); flex: 0 0 auto; }
+    .brand-mark svg { width: 100%; height: 100%; display: block; }
+    .brand-wordmark {
+      font-family: var(--mono);
+      font-size: 15px;
+      font-weight: 500;
+      letter-spacing: -0.01em;
+      color: var(--fg);
     }
-    .light.yellow {
-      background: #febc2e;
+    .brand-node {
+      margin-left: 14px;
+      padding-left: 14px;
+      border-left: 1px solid var(--border);
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 13px;
     }
-    .light.green {
-      background: #28c840;
+    .workspace {
+      display: grid;
+      grid-template-columns: minmax(360px, 480px) minmax(0, 1fr);
+      gap: 22px;
+      padding: 0 24px 24px;
+      min-height: 0;
+      height: 100%;
     }
-    .title-copy {
+    .instructions-pane {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
       min-width: 0;
-      flex: 1;
+      padding: 18px 22px 22px;
+      overflow: auto;
+      user-select: text;
     }
-    .meta {
-      margin: 0 0 3px;
-      color: #a1a1aa;
-      font-size: 12px;
+    .eyebrow {
+      margin: 0;
+      align-self: flex-start;
+      display: inline-flex;
+      align-items: center;
+      padding: 6px 12px;
+      border: 1.5px solid var(--accent);
+      border-radius: 8px;
+      color: var(--accent);
+      font-size: 11px;
+      font-weight: 600;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+    }
+    .task-title {
+      margin: 0;
+      font-size: 40px;
+      font-weight: 800;
+      letter-spacing: -0.035em;
+      line-height: 1.02;
+      color: var(--fg);
     }
-    h1 {
+    .instruction-text {
       margin: 0;
+      white-space: pre-wrap;
+      color: #2a2a2a;
+      font-size: 15px;
+      line-height: 1.55;
+    }
+    .instruction-steps {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      counter-reset: step;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+    .instruction-steps li {
+      counter-increment: step;
+      position: relative;
+      padding: 2px 0 2px 34px;
+      color: #2a2a2a;
+      font-size: 15px;
+      line-height: 1.5;
+    }
+    .instruction-steps li::before {
+      content: counter(step);
+      position: absolute;
+      left: 0;
+      top: 1px;
+      width: 22px;
+      height: 22px;
+      display: grid;
+      place-items: center;
+      border-radius: 999px;
+      border: 1.5px solid var(--accent);
+      color: var(--accent);
+      font-family: var(--mono);
+      font-size: 11px;
+      font-weight: 600;
+      line-height: 1;
+    }
+    .instructions-cta {
+      margin-top: auto;
+      padding-top: 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    .primary-button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      width: 100%;
+      border: 0;
+      border-radius: 10px;
+      padding: 14px 18px;
+      font: inherit;
       font-size: 14px;
-      line-height: 1.25;
       font-weight: 600;
-      letter-spacing: 0;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      letter-spacing: -0.005em;
+      cursor: pointer;
+      color: #ffffff;
+      background: var(--fg);
+      transition: transform 0.12s ease, background 0.12s ease, opacity 0.12s ease;
     }
-    .instructions {
-      margin: 4px 0 0;
-      white-space: pre-wrap;
-      color: #a1a1aa;
-      line-height: 1.35;
-      font-size: 12px;
+    .primary-button:hover:not(:disabled) {
+      transform: translateY(-1px);
+      background: #1f1f1f;
+    }
+    .primary-button:active:not(:disabled) {
+      transform: translateY(0);
+    }
+    .primary-button:disabled {
+      cursor: not-allowed;
+      color: var(--dim);
+      background: var(--border);
     }
-    .command {
+    .primary-button .check { width: 16px; height: 16px; display: inline-grid; place-items: center; }
+    .primary-button .check svg {
+      width: 16px;
+      height: 16px;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2.4;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+    .cta-hint {
       margin: 0;
-      padding: 8px 12px;
-      border-bottom: 1px solid #1f2937;
-      background: #0f1720;
-      color: #7dd3fc;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+      color: var(--muted);
+      font-size: 12.5px;
+      line-height: 1.5;
+      text-align: center;
+    }
+    .right-pane {
+      position: relative;
+      min-width: 0;
+      min-height: 0;
+    }
+    .terminal-window {
+      position: absolute;
+      inset: 0;
+      display: grid;
+      grid-template-rows: auto minmax(0, 1fr);
+      overflow: hidden;
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      background: var(--term-bg);
+    }
+    .term-titlebar {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 10px 14px;
+      border-bottom: 1px solid var(--border);
+      background: #f2efe7;
+    }
+    .term-titlebar-icon {
+      width: 12px;
+      height: 12px;
+      color: var(--muted);
+      flex: 0 0 auto;
+    }
+    .term-titlebar-icon svg { width: 100%; height: 100%; display: block; }
+    .term-titlebar-label {
+      color: var(--muted);
+      font-family: var(--mono);
       font-size: 12px;
-      overflow-wrap: anywhere;
     }
     .terminal-shell {
+      position: relative;
       min-height: 0;
       height: 100%;
-      position: relative;
+      background: var(--term-bg);
       overflow: hidden;
-      background: #0b0f14;
       user-select: text;
+      outline: none;
     }
-    #terminal {
+    .term-host {
       position: absolute;
       inset: 0;
-      border-radius: 0;
-      box-shadow: none;
+      padding: 14px 16px;
+      box-sizing: border-box;
       user-select: text;
-      --term-bg: #0b0f14;
-      --term-fg: #e5e7eb;
-      --term-cursor: #f8fafc;
-      --term-font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+      --term-bg: #faf8f2;
+      --term-fg: #1a1a1a;
+      --term-cursor: #2d4df5;
+      --term-font-family: var(--mono);
       --term-font-size: 13px;
       --term-row-height: 17px;
-      --term-color-0: #1f2937;
-      --term-color-1: #ef4444;
-      --term-color-2: #22c55e;
-      --term-color-3: #eab308;
-      --term-color-4: #38bdf8;
-      --term-color-5: #a78bfa;
-      --term-color-6: #2dd4bf;
-      --term-color-7: #e5e7eb;
-      --term-color-8: #6b7280;
-      --term-color-9: #f87171;
-      --term-color-10: #4ade80;
-      --term-color-11: #facc15;
-      --term-color-12: #7dd3fc;
-      --term-color-13: #c4b5fd;
-      --term-color-14: #5eead4;
-      --term-color-15: #ffffff;
-    }
-    #terminal:not(.ready) {
-      visibility: hidden;
-    }
-    #fallback {
+      --term-color-0: #0a0a0a;
+      --term-color-1: #c93250;
+      --term-color-2: #1f8b4c;
+      --term-color-3: #a17500;
+      --term-color-4: #2d4df5;
+      --term-color-5: #8e3eff;
+      --term-color-6: #0a7783;
+      --term-color-7: #5a5a5a;
+      --term-color-8: #6a6a6a;
+      --term-color-9: #b81e3a;
+      --term-color-10: #176a3a;
+      --term-color-11: #7a5800;
+      --term-color-12: #1a3ad9;
+      --term-color-13: #7128df;
+      --term-color-14: #06606a;
+      --term-color-15: #0a0a0a;
+    }
+    .term-host .xterm {
+      width: 100%;
+      height: 100%;
+      padding: 0;
+    }
+    .term-host .xterm-viewport {
+      background: transparent !important;
+    }
+    .term-host .xterm-screen {
+      user-select: text;
+    }
+    .term-host:not(.ready) { visibility: hidden; }
+    .term-host.link-hover,
+    .term-fallback.link-hover {
+      cursor: pointer;
+    }
+    .term-fallback {
       position: absolute;
       inset: 0;
       z-index: 1;
-      box-sizing: border-box;
       margin: 0;
-      padding: 14px;
+      padding: 16px;
       overflow: auto;
       white-space: pre-wrap;
       overflow-wrap: anywhere;
-      background: #0b0f14;
-      color: #e5e7eb;
-      user-select: text;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
-      font-size: 13px;
-      line-height: 1.35;
-    }
-    #fallback.hidden {
-      display: none;
-    }
-    .wterm {
-      position: relative;
       background: var(--term-bg);
-      color: var(--term-fg);
-      font-family: var(--term-font-family);
-      font-size: var(--term-font-size);
-      line-height: 1.2;
-      padding: 12px;
-      outline: none;
-      overflow: auto;
-      user-select: text;
-    }
-    .term-grid {
-      display: block;
-      white-space: pre;
-      contain: layout paint style;
-      user-select: text;
-    }
-    .term-row {
-      display: block;
-      height: var(--term-row-height);
-      line-height: var(--term-row-height);
+      color: var(--fg);
       user-select: text;
+      font-family: var(--mono);
+      font-size: 13px;
+      line-height: 1.4;
     }
-    .term-row > span {
-      display: inline-block;
-      height: var(--term-row-height);
-      vertical-align: top;
-      user-select: text;
+    .term-fallback.hidden { display: none; }
+    .term-input-proxy {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      border: 0;
+      opacity: 0;
+      pointer-events: none;
+      resize: none;
     }
-    .term-block {
-      width: 1ch;
-      overflow: hidden;
+    .success-pane {
+      position: absolute;
+      inset: 0;
+      display: grid;
+      place-items: center;
+      padding: 24px;
+      animation: fadeUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
     }
-    .term-cursor {
-      outline: 1px solid var(--term-cursor);
-      outline-offset: -1px;
+    @keyframes fadeUp {
+      from { opacity: 0; transform: translateY(8px); }
+      to { opacity: 1; transform: translateY(0); }
     }
-    .wterm.focused .term-cursor {
-      background: var(--term-cursor);
-      color: var(--term-bg);
-      outline: none;
+    .success-card {
+      width: min(420px, 100%);
+      padding: 32px 28px 28px;
+      border-radius: 12px;
+      border: 1px solid var(--border);
+      background: var(--surface);
+      text-align: center;
     }
-    footer {
-      display: flex;
-      align-items: center;
-      gap: 14px;
-      padding: 11px 14px;
-      border-top: 1px solid #27272a;
-      background: #17171a;
+    .success-icon {
+      width: 52px;
+      height: 52px;
+      margin: 0 auto 18px;
+      display: grid;
+      place-items: center;
+      border-radius: 999px;
+      border: 2px solid var(--accent);
+      color: var(--accent);
     }
-    #status {
-      flex: 1;
-      min-width: 0;
-      color: #cbd5e1;
-      font-size: 12px;
+    .success-icon svg {
+      width: 24px;
+      height: 24px;
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2.6;
+      stroke-linecap: round;
+      stroke-linejoin: round;
     }
-    button {
-      border: 0;
-      border-radius: 6px;
-      background: #f5f5f5;
-      color: #111111;
-      min-width: 82px;
-      cursor: pointer;
-      font: inherit;
-      font-size: 12px;
-      font-weight: 600;
-      padding: 8px 12px;
+    .success-title {
+      margin: 0 0 8px;
+      font-size: 26px;
+      font-weight: 800;
+      letter-spacing: -0.025em;
+      color: var(--fg);
     }
-    button:hover:not(:disabled) {
-      background: #ffffff;
+    .success-message {
+      margin: 0;
+      color: var(--muted);
+      font-size: 14px;
+      line-height: 1.55;
     }
-    button:disabled {
-      cursor: not-allowed;
-      opacity: 0.45;
+    @media (max-width: 880px) {
+      body { overflow: auto; }
+      #app { height: auto; min-height: 100vh; }
+      .workspace { grid-template-columns: 1fr; padding: 0 16px 16px; gap: 16px; }
+      .right-pane { height: min(640px, 70vh); }
+      .task-title { font-size: 32px; }
     }
-    @media (max-width: 720px) {
-      body {
-        padding: 0;
-      }
-      .terminal-window {
-        height: 100vh;
-        min-height: 100vh;
-        border: 0;
-        border-radius: 0;
-      }
-      .instructions {
-        display: none;
-      }
+    @media (max-width: 540px) {
+      .app-header { padding: 14px 16px 10px; }
+      .brand-node { display: none; }
+      .task-title { font-size: 28px; }
+      .instructions-pane { padding: 12px 16px 16px; }
     }
   </style>
 </head>
 <body>
-  <section class="terminal-window">
-    <header class="titlebar">
-      <div class="lights" aria-hidden="true">
-        <span class="light red"></span>
-        <span class="light yellow"></span>
-        <span class="light green"></span>
-      </div>
-      <div class="title-copy">
-        <p class="meta">rigkit node ${escapedNode}</p>
+  <div id="app">
+    <noscript>
+      <div class="noscript-fallback">
         <h1>${escapedLabel}</h1>
-        ${escapedInstructions ? `<p class="instructions">${escapedInstructions}</p>` : ""}
+        ${escapedInstructions ? `<p>${escapedInstructions}</p>` : ""}
+        <pre>$ ${escapedCommand}</pre>
+        <p>This interactive task requires JavaScript to run a terminal in your browser.</p>
       </div>
-    </header>
-    <p class="command">$ ${escapedCommand}</p>
-    <main class="terminal-shell" aria-label="Interactive terminal">
-      <pre id="fallback">Starting terminal...\n</pre>
-      <div id="terminal"></div>
-    </main>
-    <footer>
-      <span id="status">${completed ? "Done. You can close this page now." : "Starting terminal"}</span>
-      <button id="finish" type="button" disabled>Finished</button>
-    </footer>
-  </section>
+    </noscript>
+  </div>
   <script type="module">
+    import * as React from "https://esm.sh/react@18.3.1";
+    import { createRoot } from "https://esm.sh/react-dom@18.3.1/client";
+
+    const h = React.createElement;
+    const F = React.Fragment;
+    const { useState, useEffect, useRef, useCallback, useMemo } = React;
+
+    const TASK_TITLE = ${titleLit};
+    const TASK_INSTRUCTIONS = ${instructionsLit};
+    const NODE_PATH = ${nodeLit};
+    const startupInput = ${startupInputLiteral};
+    const canFinishWhileRunning = ${canFinishWhileRunningLiteral};
+    const INITIAL_COMPLETED = ${initialCompletedLiteral};
     const token = new URLSearchParams(location.search).get("token") || "";
-    const terminalUrl = new URL("/terminal", location.href);
-    terminalUrl.protocol = location.protocol === "https:" ? "wss:" : "ws:";
-    terminalUrl.searchParams.set("token", token);
-    const statusEl = document.getElementById("status");
-    const finishEl = document.getElementById("finish");
-    const terminalEl = document.getElementById("terminal");
-    const fallbackEl = document.getElementById("fallback");
-    const outputBacklog = [];
-    let socket;
+
+    let terminalEl = null;
     let term;
     let termReady = false;
-    const startupInput = ${startupInputLiteral};
+    let socket;
     let startupSent = false;
     let startupIdleTimer;
     let startupMaxTimer;
+    let terminalOutputTail = "";
+    let pendingBrowserPromptUrl = null;
+    const outputBacklog = [];
+    const listeners = {
+      onStatus: null,
+      onOutput: null,
+      onClose: null,
+    };
 
     function sendTerminalInput(data) {
-      if (!data || socket?.readyState !== WebSocket.OPEN) return;
+      if (!data || !socket || socket.readyState !== WebSocket.OPEN) return;
       socket.send(JSON.stringify({ type: "input", data }));
     }
 
-    function setStatus(text, canFinish = false) {
-      statusEl.textContent = text;
-      finishEl.disabled = !canFinish;
-    }
-
-    function appendFallback(data) {
-      fallbackEl.textContent += data;
-      fallbackEl.scrollTop = fallbackEl.scrollHeight;
-    }
-
     function sendStartupInput() {
-      if (!startupInput || startupSent || socket.readyState !== WebSocket.OPEN) return;
+      if (!startupInput || startupSent || !socket || socket.readyState !== WebSocket.OPEN) return;
       startupSent = true;
       clearTimeout(startupIdleTimer);
       clearTimeout(startupMaxTimer);
       sendTerminalInput(startupInput);
     }
 
-    function scheduleStartupInput(delay = 350) {
-      if (!startupInput || startupSent || socket.readyState !== WebSocket.OPEN) return;
+    function scheduleStartupInput(delay) {
+      if (!startupInput || startupSent || !socket || socket.readyState !== WebSocket.OPEN) return;
       clearTimeout(startupIdleTimer);
-      startupIdleTimer = setTimeout(sendStartupInput, delay);
-      startupMaxTimer ??= setTimeout(sendStartupInput, 1500);
+      startupIdleTimer = setTimeout(sendStartupInput, delay || 350);
+      startupMaxTimer = startupMaxTimer || setTimeout(sendStartupInput, 1500);
     }
 
-    socket = new WebSocket(terminalUrl);
-    socket.addEventListener("open", () => {
-      setStatus("Connected");
-      scheduleStartupInput(700);
-    });
-    socket.addEventListener("message", (event) => {
-      const message = JSON.parse(event.data);
-      if (message.type === "output") {
-        outputBacklog.push(message.data);
-        if (termReady) {
-          term.write(message.data);
-        } else {
-          appendFallback(message.data);
+    const URL_MATCH_PATTERN = "https?:\\\\/\\\\/[^\\\\s<>\\\"'\\\\\\\\]+";
+
+    function stripAnsi(text) {
+      return text.replace(/[\\u001b\\u009b][[\\]()#;?]*(?:(?:(?:[a-zA-Z\\d]*(?:;[a-zA-Z\\d]*)*)?\\u0007)|(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PR-TZcf-nq-uy=><~]))/g, "");
+    }
+
+    function normalizeHttpUrlLiteral(value) {
+      let url = String(value || "").trim();
+      while (/[),.;:!?\\]}]+$/.test(url)) url = url.slice(0, -1);
+      try {
+        const parsed = new URL(url);
+        if (parsed.protocol === "http:" || parsed.protocol === "https:") return parsed.href;
+      } catch {
+        return null;
+      }
+      return null;
+    }
+
+    function normalizeHttpUrl(value) {
+      const normalized = normalizeHttpUrlLiteral(value);
+      return normalized ? expandKnownTerminalUrl(normalized) : null;
+    }
+
+    function expandKnownTerminalUrl(url) {
+      const cleaned = stripAnsi(terminalOutputTail).replace(/\\r(?!\\n)/g, "\\n");
+      let best = url;
+      for (const candidate of urlsInText(cleaned)) {
+        if (candidate.url.startsWith(url) && candidate.url.length > best.length) {
+          best = candidate.url;
         }
-        scheduleStartupInput();
-        return;
       }
-      if (message.type === "status") {
-        setStatus(message.status, Boolean(message.canFinish));
+      return best;
+    }
+
+    function urlsInText(text) {
+      const urls = [];
+      const matcher = new RegExp(URL_MATCH_PATTERN, "ig");
+      let match;
+      while ((match = matcher.exec(text)) !== null) {
+        const raw = match[0];
+        const url = normalizeHttpUrlLiteral(raw);
+        if (url) urls.push({ url, start: match.index, end: match.index + raw.length });
       }
-    });
-    socket.addEventListener("close", () => {
-      if (finishEl.disabled) setStatus("Terminal connection closed");
-    });
-    finishEl.addEventListener("click", () => {
-      if (socket?.readyState === WebSocket.OPEN) {
-        socket.send(JSON.stringify({ type: "finish" }));
-      } else {
-        fetch("/complete?token=" + encodeURIComponent(token), { method: "POST" }).catch(() => {});
+      return urls;
+    }
+
+    function urlAtTextIndex(text, index) {
+      for (const candidate of urlsInText(text)) {
+        if (index >= candidate.start - 1 && index <= candidate.end) return candidate.url;
       }
-      setStatus("Finishing");
-      finishEl.disabled = true;
-    });
-    document.addEventListener("keydown", (event) => {
-      if (event.defaultPrevented || isTextEditingTarget(event.target)) return;
-      const data = keyEventToTerminalInput(event);
-      if (!data) return;
-      event.preventDefault();
-      event.stopImmediatePropagation();
-      term?.focus();
-      sendTerminalInput(data);
-    }, { capture: true });
+      return null;
+    }
 
-    try {
-      const [{ WTerm }, { GhosttyCore }] = await Promise.all([
-        import("https://esm.sh/@wterm/dom@0.3.0?bundle"),
-        import("https://esm.sh/@wterm/ghostty@0.3.0?bundle"),
-      ]);
-      const core = await GhosttyCore.load({
-        wasmPath: "https://esm.sh/@wterm/ghostty@0.3.0/wasm/ghostty-vt.wasm",
-      });
-      term = new WTerm(terminalEl, {
-        core,
-        cols: 100,
-        rows: 28,
-        autoResize: true,
-        cursorBlink: true,
-        onData(data) {
-          sendTerminalInput(data);
-        },
-        onResize(cols, rows) {
-          if (socket.readyState === WebSocket.OPEN) {
-            socket.send(JSON.stringify({ type: "resize", cols, rows }));
-          }
-        },
-      });
-      await term.init();
-      for (const chunk of outputBacklog) term.write(chunk);
-      termReady = true;
-      terminalEl.classList.add("ready");
-      fallbackEl.classList.add("hidden");
-      term.focus();
-    } catch (error) {
-      console.error(error);
-      appendFallback("\\nUnable to load the libghostty renderer. Output will continue here.\\n");
-      setStatus("Renderer unavailable. Command output is shown in fallback mode.", !startupInput || startupSent);
+    function findPendingBrowserPromptUrl(text) {
+      const cleaned = stripAnsi(text).replace(/\\r(?!\\n)/g, "\\n");
+      const currentLine = cleaned.split(/\\n/).pop() || "";
+      const match = /Press\\s+Enter\\s+to\\s+open\\s+(https?:\\/\\/\\S+)\\s+in\\s+your\\s+browser/i.exec(currentLine);
+      return match ? normalizeHttpUrl(match[1]) : null;
+    }
+
+    function trackBrowserPrompt(data) {
+      terminalOutputTail = (terminalOutputTail + data).slice(-8000);
+      pendingBrowserPromptUrl = findPendingBrowserPromptUrl(terminalOutputTail);
+    }
+
+    function openExternalUrl(url) {
+      const normalized = normalizeHttpUrl(url);
+      if (!normalized) return false;
+      const opened = window.open(normalized, "_blank", "noopener,noreferrer");
+      return Boolean(opened);
+    }
+
+    function openPendingBrowserPrompt() {
+      if (!pendingBrowserPromptUrl) return false;
+      const url = pendingBrowserPromptUrl;
+      pendingBrowserPromptUrl = null;
+      return openExternalUrl(url);
     }
 
     function isTextEditingTarget(target) {
       if (!(target instanceof Element)) return false;
-      if (terminalEl.contains(target)) return false;
-      if (target === finishEl) return true;
+      if (terminalEl && terminalEl.contains(target)) return true;
       return Boolean(target.closest("textarea, input, select, button, [contenteditable=''], [contenteditable='true']"));
     }
 
@@ -797,18 +1183,481 @@ function renderInteractionPage(
 
       return null;
     }
+
+    document.addEventListener("keydown", (event) => {
+      if (event.defaultPrevented || isTextEditingTarget(event.target)) return;
+      const data = keyEventToTerminalInput(event);
+      if (!data) return;
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      term?.focus();
+      if (data === "\\r") openPendingBrowserPrompt();
+      sendTerminalInput(data);
+    }, { capture: true });
+
+    document.addEventListener("paste", (event) => {
+      if (event.defaultPrevented || isTextEditingTarget(event.target)) return;
+      const text = event.clipboardData && event.clipboardData.getData("text/plain");
+      if (!text) return;
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      term?.focus();
+      sendTerminalInput(text);
+    }, { capture: true });
+
+    function setupSocket() {
+      const terminalUrl = new URL("/terminal", location.href);
+      terminalUrl.protocol = location.protocol === "https:" ? "wss:" : "ws:";
+      terminalUrl.searchParams.set("token", token);
+      socket = new WebSocket(terminalUrl);
+      socket.addEventListener("open", () => {
+        listeners.onStatus && listeners.onStatus("Connected", canFinishWhileRunning);
+        scheduleStartupInput(700);
+      });
+      socket.addEventListener("message", (event) => {
+        const message = JSON.parse(event.data);
+        if (message.type === "output") {
+          trackBrowserPrompt(message.data);
+          outputBacklog.push(message.data);
+          if (termReady) {
+            term.write(message.data);
+          } else if (listeners.onOutput) {
+            listeners.onOutput(message.data);
+          }
+          scheduleStartupInput();
+          return;
+        }
+        if (message.type === "status") {
+          listeners.onStatus && listeners.onStatus(message.status, Boolean(message.canFinish));
+        }
+      });
+      socket.addEventListener("close", () => {
+        listeners.onClose && listeners.onClose();
+      });
+    }
+
+    function classifyStatus(text, canFinish) {
+      const lower = text.toLowerCase();
+      if (lower.includes("done.") || lower.startsWith("task complete")) return "done";
+      if (lower.includes("error") || lower.includes("unavailable") || /exited [^0]/.test(lower)) return "error";
+      if (canFinish) return "ready";
+      return "working";
+    }
+
+    function parseSteps(text) {
+      if (!text) return [];
+      const trimmed = text.trim();
+      if (!trimmed) return [];
+      const lines = trimmed.split(/\\r?\\n/).map((l) => l.trim()).filter(Boolean);
+      if (lines.length <= 1) return [];
+      return lines.map((line) => line.replace(/^([0-9]+[.)]\\s+|[-*•]\\s+)/, ""));
+    }
+
+    function CheckIcon() {
+      return h("svg", { viewBox: "0 0 24 24", "aria-hidden": "true" },
+        h("polyline", { points: "4 12 10 18 20 6", fill: "none", stroke: "currentColor", strokeWidth: "2.6", strokeLinecap: "round", strokeLinejoin: "round" })
+      );
+    }
+
+    function CloudIcon() {
+      return h("svg", { viewBox: "0 0 32 32", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" },
+        h("path", { d: "M22 21H10.5a4.5 4.5 0 0 1-.45-8.97A6.5 6.5 0 0 1 22.86 13H23a4 4 0 0 1 0 8h-1" }),
+        h("path", { d: "M11.5 24v3" }),
+        h("path", { d: "M16 25v3" }),
+        h("path", { d: "M20.5 24v3" })
+      );
+    }
+
+    function TerminalIcon() {
+      return h("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" },
+        h("polyline", { points: "4 5 7 8 4 11" }),
+        h("line", { x1: "8.5", y1: "11", x2: "12", y2: "11" })
+      );
+    }
+
+    function Header(props) {
+      return h("header", { className: "app-header" },
+        h("div", { className: "brand" },
+          h("span", { className: "brand-mark", "aria-hidden": "true" }, h(CloudIcon, null)),
+          h("span", { className: "brand-wordmark" }, "freestyle.sh"),
+          h("span", { className: "brand-node" }, props.node),
+        ),
+      );
+    }
+
+    function InstructionsPane(props) {
+      const steps = useMemo(() => parseSteps(props.instructions), [props.instructions]);
+      const showSteps = steps.length > 1;
+      const buttonDisabled = !props.canFinish || props.done;
+      return h("section", { className: "instructions-pane", "aria-label": "Task instructions" },
+        h("p", { className: "eyebrow" }, "Interactive task"),
+        h("h1", { className: "task-title" }, props.title),
+        props.instructions
+          ? (showSteps
+              ? h("ol", { className: "instruction-steps" },
+                  steps.map((step, i) => h("li", { key: i }, step))
+                )
+              : h("p", { className: "instruction-text" }, props.instructions))
+          : null,
+        h("div", { className: "instructions-cta" },
+          h("button", {
+            type: "button",
+            className: "primary-button",
+            disabled: buttonDisabled,
+            onClick: props.onFinish,
+          },
+            h("span", { className: "check" }, h(CheckIcon, null)),
+            h("span", null, "Complete task"),
+          ),
+          h("p", { className: "cta-hint" },
+            props.done
+              ? "Task complete — you can close this tab."
+              : (props.canFinish
+                  ? "When the command above has finished in the terminal, click here to continue."
+                  : "Run the command in the terminal — this button will activate when the task is ready to finish.")
+          ),
+        ),
+      );
+    }
+
+    function TerminalChrome() {
+      const shellRef = useRef(null);
+      const hostRef = useRef(null);
+      const fallbackRef = useRef(null);
+      const inputProxyRef = useRef(null);
+
+      useEffect(() => {
+        const host = hostRef.current;
+        const fallback = fallbackRef.current;
+        terminalEl = host;
+        if (fallback) {
+          for (const chunk of outputBacklog) {
+            fallback.textContent += chunk;
+          }
+        }
+        listeners.onOutput = (data) => {
+          if (!fallbackRef.current) return;
+          fallbackRef.current.textContent += data;
+          fallbackRef.current.scrollTop = fallbackRef.current.scrollHeight;
+        };
+
+        const handleTerminalClick = (event) => {
+          if (event.defaultPrevented || event.button !== 0) return;
+          const selection = window.getSelection();
+          if (selection && selection.toString()) return;
+          const url = terminalUrlFromEvent(event);
+          if (!url) {
+            focusTerminalInput();
+            return;
+          }
+          event.preventDefault();
+          event.stopPropagation();
+          openExternalUrl(url);
+        };
+        const handleTerminalPointerMove = (event) => {
+          const target = event.currentTarget;
+          if (!(target instanceof HTMLElement)) return;
+          target.classList.toggle("link-hover", Boolean(terminalUrlFromEvent(event)));
+        };
+        const handleTerminalPointerLeave = (event) => {
+          const target = event.currentTarget;
+          if (target instanceof HTMLElement) target.classList.remove("link-hover");
+        };
+
+        host?.addEventListener("click", handleTerminalClick);
+        host?.addEventListener("pointermove", handleTerminalPointerMove);
+        host?.addEventListener("pointerleave", handleTerminalPointerLeave);
+        fallback?.addEventListener("click", handleTerminalClick);
+        fallback?.addEventListener("pointermove", handleTerminalPointerMove);
+        fallback?.addEventListener("pointerleave", handleTerminalPointerLeave);
+
+        let cancelled = false;
+        let resizeObserver = null;
+        let currentTerm = null;
+        (async () => {
+          try {
+            const [{ Terminal }, { FitAddon }, { WebLinksAddon }] = await Promise.all([
+              import("https://esm.sh/@xterm/xterm@6.0.0?bundle"),
+              import("https://esm.sh/@xterm/addon-fit@0.11.0?bundle"),
+              import("https://esm.sh/@xterm/addon-web-links@0.12.0?bundle"),
+            ]);
+            if (cancelled || !hostRef.current) return;
+            const xterm = new Terminal({
+              cols: 100,
+              rows: 28,
+              cursorBlink: true,
+              convertEol: true,
+              scrollback: 10000,
+              fontFamily: 'ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace',
+              fontSize: 13,
+              lineHeight: 1.3,
+              theme: {
+                background: "#faf8f2",
+                foreground: "#1a1a1a",
+                cursor: "#2d4df5",
+                selectionBackground: "#d8d2c5",
+                black: "#0a0a0a",
+                red: "#c93250",
+                green: "#1f8b4c",
+                yellow: "#a17500",
+                blue: "#2d4df5",
+                magenta: "#8e3eff",
+                cyan: "#0a7783",
+                white: "#5a5a5a",
+                brightBlack: "#6a6a6a",
+                brightRed: "#b81e3a",
+                brightGreen: "#176a3a",
+                brightYellow: "#7a5800",
+                brightBlue: "#1a3ad9",
+                brightMagenta: "#7128df",
+                brightCyan: "#06606a",
+                brightWhite: "#0a0a0a",
+              },
+            });
+            const fitAddon = new FitAddon();
+            xterm.loadAddon(fitAddon);
+            xterm.loadAddon(new WebLinksAddon((event, url) => {
+              event.preventDefault();
+              openExternalUrl(url);
+            }));
+            xterm.onData((data) => {
+              if (data === "\\r") openPendingBrowserPrompt();
+              sendTerminalInput(data);
+            });
+            xterm.onResize(({ cols, rows }) => {
+              if (socket && socket.readyState === WebSocket.OPEN) {
+                socket.send(JSON.stringify({ type: "resize", cols, rows }));
+              }
+            });
+            xterm.open(hostRef.current);
+            const fitTerminal = () => {
+              try {
+                fitAddon.fit();
+                if (socket && socket.readyState === WebSocket.OPEN) {
+                  socket.send(JSON.stringify({ type: "resize", cols: xterm.cols, rows: xterm.rows }));
+                }
+              } catch {
+                // The fit addon can throw while the element is detached during teardown.
+              }
+            };
+            fitTerminal();
+            resizeObserver = new ResizeObserver(fitTerminal);
+            resizeObserver.observe(hostRef.current);
+            currentTerm = xterm;
+            term = xterm;
+            for (const chunk of outputBacklog) term.write(chunk);
+            termReady = true;
+            hostRef.current.classList.add("ready");
+            fallbackRef.current && fallbackRef.current.classList.add("hidden");
+            term.focus();
+            focusTerminalInput();
+          } catch (error) {
+            console.error(error);
+            if (fallbackRef.current) {
+              fallbackRef.current.textContent += "\\nUnable to load the xterm renderer. Output will continue here.\\n";
+            }
+          }
+        })();
+
+        return () => {
+          cancelled = true;
+          resizeObserver?.disconnect();
+          currentTerm?.dispose();
+          if (term === currentTerm) term = null;
+          terminalEl = null;
+          host?.removeEventListener("click", handleTerminalClick);
+          host?.removeEventListener("pointermove", handleTerminalPointerMove);
+          host?.removeEventListener("pointerleave", handleTerminalPointerLeave);
+          fallback?.removeEventListener("click", handleTerminalClick);
+          fallback?.removeEventListener("pointermove", handleTerminalPointerMove);
+          fallback?.removeEventListener("pointerleave", handleTerminalPointerLeave);
+        };
+      }, []);
+
+      const focusTerminalInput = useCallback(() => {
+        shellRef.current?.focus({ preventScroll: true });
+        if (term?.focus) {
+          term.focus();
+        } else {
+          inputProxyRef.current?.focus({ preventScroll: true });
+        }
+      }, []);
+
+      const sendKeyboardEventToTerminal = useCallback((event) => {
+        const data = keyEventToTerminalInput(event);
+        if (!data) return;
+        event.preventDefault();
+        event.stopPropagation();
+        if (inputProxyRef.current) inputProxyRef.current.value = "";
+        if (data === "\\r") openPendingBrowserPrompt();
+        sendTerminalInput(data);
+      }, []);
+
+      const sendTextInputEventToTerminal = useCallback((event) => {
+        const data = event.data || "";
+        if (!data) return;
+        event.preventDefault();
+        event.stopPropagation();
+        if (inputProxyRef.current) inputProxyRef.current.value = "";
+        sendTerminalInput(data);
+      }, []);
+
+      const sendPasteEventToTerminal = useCallback((event) => {
+        const text = event.clipboardData && event.clipboardData.getData("text/plain");
+        if (!text) return;
+        event.preventDefault();
+        event.stopPropagation();
+        if (inputProxyRef.current) inputProxyRef.current.value = "";
+        sendTerminalInput(text);
+      }, []);
+
+      const sendInputValueToTerminal = useCallback((event) => {
+        const target = event.currentTarget;
+        const value = target.value || "";
+        if (!value) return;
+        target.value = "";
+        sendTerminalInput(value);
+      }, []);
+
+      return h(F, null,
+        h("div", { className: "term-titlebar" },
+          h("span", { className: "term-titlebar-icon", "aria-hidden": "true" }, h(TerminalIcon, null)),
+          h("span", { className: "term-titlebar-label" }, NODE_PATH + " · terminal"),
+        ),
+        h("div", {
+          ref: shellRef,
+          className: "terminal-shell",
+          tabIndex: 0,
+          onPointerDownCapture: focusTerminalInput,
+          onKeyDown: sendKeyboardEventToTerminal,
+          onPaste: sendPasteEventToTerminal,
+        },
+          h("pre", { ref: fallbackRef, className: "term-fallback" }, "Starting terminal...\\n"),
+          h("div", { ref: hostRef, className: "term-host" }),
+          h("textarea", {
+            ref: inputProxyRef,
+            className: "term-input-proxy",
+            tabIndex: 0,
+            autoCapitalize: "off",
+            autoComplete: "off",
+            autoCorrect: "off",
+            spellCheck: false,
+            onKeyDown: sendKeyboardEventToTerminal,
+            onBeforeInput: sendTextInputEventToTerminal,
+            onInput: sendInputValueToTerminal,
+            onPaste: sendPasteEventToTerminal,
+          }),
+        ),
+      );
+    }
+
+    function SuccessPane() {
+      return h("div", { className: "success-pane" },
+        h("div", { className: "success-card", role: "status", "aria-live": "polite" },
+          h("div", { className: "success-icon" },
+            h(CheckIcon, null)
+          ),
+          h("h2", { className: "success-title" }, "Task complete"),
+          h("p", { className: "success-message" }, "You can close this tab — Rigkit will pick up from here."),
+        ),
+      );
+    }
+
+    function terminalUrlFromEvent(event) {
+      const target = event.target;
+      if (!(target instanceof Element)) return null;
+
+      const fallback = target.closest(".term-fallback");
+      if (fallback) {
+        return terminalUrlFromPreEvent(fallback, event);
+      }
+
+      return null;
+    }
+
+    function terminalUrlFromPreEvent(pre, event) {
+      const text = pre.textContent || "";
+      const rect = pre.getBoundingClientRect();
+      const style = window.getComputedStyle(pre);
+      const lineHeight = parseFloat(style.lineHeight) || 18;
+      const fontSize = parseFloat(style.fontSize) || 13;
+      const charWidth = fontSize * 0.62;
+      const paddingTop = parseFloat(style.paddingTop) || 0;
+      const paddingLeft = parseFloat(style.paddingLeft) || 0;
+      const lineIndex = Math.floor((event.clientY - rect.top + pre.scrollTop - paddingTop) / lineHeight);
+      const colIndex = Math.floor((event.clientX - rect.left + pre.scrollLeft - paddingLeft) / charWidth);
+      const line = text.split("\\n")[lineIndex] || "";
+      const exactUrl = urlAtTextIndex(line, Math.max(0, colIndex));
+      if (exactUrl) return exactUrl;
+      const urls = urlsInText(line);
+      return urls.length === 1 ? urls[0].url : null;
+    }
+
+    function App() {
+      const [canFinish, setCanFinish] = useState(false);
+      const [done, setDone] = useState(INITIAL_COMPLETED);
+
+      useEffect(() => {
+        listeners.onStatus = (text, canFinishVal) => {
+          setCanFinish(canFinishVal);
+          if (classifyStatus(text, canFinishVal) === "done") setDone(true);
+        };
+        if (!INITIAL_COMPLETED) setupSocket();
+        return () => {
+          listeners.onStatus = null;
+          listeners.onClose = null;
+        };
+      }, []);
+
+      const handleFinish = useCallback(() => {
+        if (socket && socket.readyState === WebSocket.OPEN) {
+          socket.send(JSON.stringify({ type: "finish" }));
+        } else {
+          fetch("/complete?token=" + encodeURIComponent(token), { method: "POST" }).catch(() => {});
+        }
+        setCanFinish(false);
+        setDone(true);
+      }, []);
+
+      return h(F, null,
+        h(Header, { node: NODE_PATH }),
+        h("main", { className: "workspace" },
+          h(InstructionsPane, {
+            title: TASK_TITLE,
+            instructions: TASK_INSTRUCTIONS,
+            canFinish: canFinish,
+            done: done,
+            onFinish: handleFinish,
+          }),
+          h("div", { className: "right-pane" },
+            !done
+              ? h("div", { className: "terminal-window" }, h(TerminalChrome, null))
+              : h(SuccessPane, null)
+          )
+        )
+      );
+    }
+
+    createRoot(document.getElementById("app")).render(h(App));
   </script>
 </body>
 </html>`;
 }
 
-function javaScriptLiteral(value: string | null): string {
+function javaScriptLiteral(value: string | boolean | null): string {
   return JSON.stringify(value)
     .replaceAll("<", "\\u003c")
     .replaceAll(">", "\\u003e")
     .replaceAll("&", "\\u0026")
-    .replaceAll("\u2028
", "\\u2028")
-    .replaceAll("\u2029
", "\\u2029");
+    .replaceAll("
", "\\u2028")
+    .replaceAll("
", "\\u2029");
+}
+
+function canFinishWhileProcessRuns(
+  request: FreestyleTerminalSessionRequest,
+  startupInput: string | undefined,
+): boolean {
+  return request.canFinishWhileRunning ?? (!request.displayCommand && !startupInput);
 }
 
 function escapeHtml(value: string): string {