npm - @rigkit/provider-freestyle - Versions diffs - 0.2.2 → 0.2.4 - Mend

@rigkit/provider-freestyle 0.2.2 → 0.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md +10 -3
package/package.json +8 -4
package/src/host-auth.test.ts +375 -0
package/src/host-auth.ts +591 -0
package/src/index.ts +42 -76
package/src/provider.test.ts +197 -105
package/src/provider.ts +149 -396
package/src/terminal-session.test.ts +42 -2
package/src/terminal-session.ts +633 -308
package/src/version.ts +1 -1

package/src/terminal-session.ts CHANGED Viewed

@@ -4,7 +4,10 @@ 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;
 };
@@ -44,7 +47,10 @@ export function createFreestyleTerminalSession(
   let fail!: (error: Error) => void;
   const sockets = new Set<ServerWebSocket<SocketData>>();
   const outputBuffer: string[] = [];
-  const startupInput = request.remoteCommand ? ensureTrailingNewline(request.remoteCommand) : undefined;
+  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;
@@ -127,7 +133,7 @@ export function createFreestyleTerminalSession(
     broadcast({
       type: "status",
       status: "Connected",
-      canFinish: false,
+      canFinish: canFinishWhileRunning,
     });
     proc = Bun.spawn(["sh", "-lc", `exec ${request.command}`], {
@@ -194,7 +200,7 @@ export function createFreestyleTerminalSession(
       remoteCommandStarted = true;
       broadcast({
         type: "status",
-        status: `Running ${request.remoteCommand}`,
+        status: `Running ${displayCommand}`,
         canFinish: true,
       });
     }
@@ -250,10 +256,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 {
@@ -314,177 +320,322 @@ 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>
   <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;
     }
-    h1 {
+    .task-title {
       margin: 0;
+      font-size: 40px;
+      font-weight: 800;
+      letter-spacing: -0.035em;
+      line-height: 1.02;
+      color: var(--fg);
+    }
+    .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;
     }
-    #terminal {
+    .term-host {
       position: absolute;
       inset: 0;
-      border-radius: 0;
-      box-shadow: none;
       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:not(.ready) { visibility: hidden; }
+    .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;
+      background: var(--term-bg);
+      color: var(--fg);
       user-select: text;
-      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+      font-family: var(--mono);
       font-size: 13px;
-      line-height: 1.35;
-    }
-    #fallback.hidden {
-      display: none;
+      line-height: 1.4;
     }
+    .term-fallback.hidden { display: none; }
     .wterm {
       position: relative;
       background: var(--term-bg);
@@ -492,17 +643,12 @@ function renderInteractionPage(
       font-family: var(--term-font-family);
       font-size: var(--term-font-size);
       line-height: 1.2;
-      padding: 12px;
+      padding: 14px 16px;
       outline: none;
       overflow: auto;
       user-select: text;
     }
-    .term-grid {
-      display: block;
-      white-space: pre;
-      contain: layout paint style;
-      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);
@@ -515,222 +661,140 @@ function renderInteractionPage(
       vertical-align: top;
       user-select: text;
     }
-    .term-block {
-      width: 1ch;
-      overflow: hidden;
+    .term-block { width: 1ch; overflow: hidden; }
+    .term-cursor { outline: 1px solid var(--term-cursor); outline-offset: -1px; }
+    .wterm.focused .term-cursor { background: var(--term-cursor); color: #ffffff; outline: none; }
+    .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;
+    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);
-    }
-    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);
-        }
-        scheduleStartupInput();
-        return;
-      }
-      if (message.type === "status") {
-        setStatus(message.status, Boolean(message.canFinish));
-      }
-    });
-    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(() => {});
-      }
-      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 });
-    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);
+      startupIdleTimer = setTimeout(sendStartupInput, delay || 350);
+      startupMaxTimer = startupMaxTimer || setTimeout(sendStartupInput, 1500);
     }
     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 false;
       return Boolean(target.closest("textarea, input, select, button, [contenteditable=''], [contenteditable='true']"));
     }
@@ -797,18 +861,279 @@ 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();
+      sendTerminalInput(data);
+    }, { 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") {
+          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 hostRef = useRef(null);
+      const fallbackRef = useRef(null);
+      useEffect(() => {
+        terminalEl = hostRef.current;
+        if (fallbackRef.current) {
+          for (const chunk of outputBacklog) {
+            fallbackRef.current.textContent += chunk;
+          }
+        }
+        listeners.onOutput = (data) => {
+          if (!fallbackRef.current) return;
+          fallbackRef.current.textContent += data;
+          fallbackRef.current.scrollTop = fallbackRef.current.scrollHeight;
+        };
+        let cancelled = false;
+        (async () => {
+          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"),
+            ]);
+            if (cancelled || !hostRef.current) return;
+            const core = await GhosttyCore.load({
+              wasmPath: "https://esm.sh/@wterm/ghostty@0.3.0/wasm/ghostty-vt.wasm",
+            });
+            if (cancelled || !hostRef.current) return;
+            term = new WTerm(hostRef.current, {
+              core,
+              cols: 100,
+              rows: 28,
+              autoResize: true,
+              cursorBlink: true,
+              onData(data) { sendTerminalInput(data); },
+              onResize(cols, rows) {
+                if (socket && 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;
+            hostRef.current.classList.add("ready");
+            fallbackRef.current && fallbackRef.current.classList.add("hidden");
+            term.focus();
+          } catch (error) {
+            console.error(error);
+            if (fallbackRef.current) {
+              fallbackRef.current.textContent += "\\nUnable to load the libghostty renderer. Output will continue here.\\n";
+            }
+          }
+        })();
+        return () => { cancelled = true; };
+      }, []);
+      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", { className: "terminal-shell" },
+          h("pre", { ref: fallbackRef, className: "term-fallback" }, "Starting terminal...\\n"),
+          h("div", { ref: hostRef, className: "term-host" }),
+        ),
+      );
+    }
+    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 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 {