@freestyle-sh/with-ttyd 0.0.5 → 0.0.7

package/dist/index.d.ts

@@ -1,11 +1,14 @@
 import * as freestyle_sandboxes from 'freestyle-sandboxes';
-import { VmWith, VmWithInstance, CreateVmOptions } from 'freestyle-sandboxes';
+import { VmWith, VmWithInstance, VmSpec } from 'freestyle-sandboxes';
+import { VmPtySessionLike } from '@freestyle-sh/with-pty';
 
 type TtydConfig = {
     /** Port to run ttyd on (default: auto-assigned starting at 7682) */
     port?: number;
     /** Shell or command to run (default: /bin/bash) */
     command?: string;
+    /** Attach ttyd to a PTY session */
+    pty?: VmPtySessionLike;
     /** User to run terminal as (default: current user) */
     user?: string;
     /** Working directory (default: user home) */
@@ -19,6 +22,8 @@ type TtydConfig = {
     title?: string;
     /** Read-only terminal (no input allowed) */
     readOnly?: boolean;
+    /** Xterm.js theme settings passed to ttyd client options */
+    theme?: Record<string, string | number | boolean>;
 };
 type ResolvedTerminalConfig = {
     port: number;
@@ -31,11 +36,15 @@ type ResolvedTerminalConfig = {
     };
     title: string;
     readOnly: boolean;
+    theme?: Record<string, string | number | boolean>;
 };
 declare class VmWebTerminal<T extends TtydConfig[] = TtydConfig[]> extends VmWith<VmWebTerminalInstance<T>> {
     private resolvedTerminals;
+    private ptySessions;
     constructor(terminals: T | TtydConfig);
-    configure(existingConfig: CreateVmOptions): CreateVmOptions | Promise<CreateVmOptions>;
+    private composeTtydSpec;
+    configureSnapshotSpec(spec: VmSpec): VmSpec;
+    configureSpec(spec: VmSpec): VmSpec;
     createInstance(): VmWebTerminalInstance<T>;
     installServiceName(): string;
 }
@@ -46,7 +55,7 @@ declare class WebTerminal {
     constructor({ port, command, instance, }: {
         port: number;
         command: string;
-        instance: VmWebTerminalInstance<any>;
+        instance: VmWebTerminalInstance<TtydConfig[]>;
     });
     /** Expose this terminal publicly via Freestyle routing */
     route({ domain }: {

package/dist/index.js

@@ -1,33 +1,50 @@
-import { VmWith, VmTemplate, VmWithInstance } from 'freestyle-sandboxes';
+import { VmWith, VmSpec, VmWithInstance } from 'freestyle-sandboxes';
 
 class VmWebTerminal extends VmWith {
   resolvedTerminals;
+  ptySessions;
   constructor(terminals) {
     super();
     const terminalList = Array.isArray(terminals) ? terminals : [terminals];
+    this.ptySessions = terminalList.map((config) => config.pty).filter((value) => value !== void 0);
     let nextPort = 7682;
     this.resolvedTerminals = terminalList.map((config) => {
+      if (config.pty && config.command) {
+        throw new Error(
+          "VmWebTerminal config cannot include both pty and command. Use one or the other."
+        );
+      }
       const port = config.port ?? nextPort++;
+      const resolvedCommand = config.pty ? config.pty.attachCommand(config.readOnly ?? false) : config.command ?? "bash -l";
       return {
         port,
-        command: config.command ?? "bash -l",
+        command: resolvedCommand,
         user: config.user ?? "root",
         cwd: config.cwd ?? "/root",
         credential: config.credential,
         title: config.title ?? `terminal-${port}`,
-        readOnly: config.readOnly ?? false
+        readOnly: config.readOnly ?? false,
+        theme: config.theme
       };
     });
   }
-  configure(existingConfig) {
+  composeTtydSpec(spec) {
+    const uniquePtySessions = Array.from(new Set(this.ptySessions));
+    let composed = spec;
+    for (const pty of uniquePtySessions) {
+      composed = pty.applyToSpec(composed);
+    }
     const installScript = `#!/bin/bash
-set -e
+  set -e
 
-TTYD_VERSION="1.7.7"
-curl -fsSL -o /usr/local/bin/ttyd "https://github.com/tsl0922/ttyd/releases/download/\${TTYD_VERSION}/ttyd.x86_64"
-chmod +x /usr/local/bin/ttyd
-/usr/local/bin/ttyd --version
-`;
+  TTYD_VERSION="1.7.7"
+  mkdir -p /usr/local/bin
+  tmpfile="$(mktemp)"
+  curl -fsSL -o "$tmpfile" "https://github.com/tsl0922/ttyd/releases/download/\${TTYD_VERSION}/ttyd.x86_64"
+  mv "$tmpfile" /usr/local/bin/ttyd
+  chmod +x /usr/local/bin/ttyd
+  /usr/local/bin/ttyd --version
+  `;
     const services = this.resolvedTerminals.map((t) => {
       const args = [`/usr/local/bin/ttyd`, `-p ${t.port}`];
       if (t.credential) {
@@ -50,6 +67,10 @@ chmod +x /usr/local/bin/ttyd
       } else {
         args.push(`--writable`);
       }
+      if (t.theme) {
+        const themeJson = JSON.stringify(t.theme);
+        args.push(`-t 'theme=${themeJson}'`);
+      }
       args.push(t.command);
       return {
         name: `web-terminal-${t.port}`,
@@ -63,8 +84,9 @@ chmod +x /usr/local/bin/ttyd
         requires: ["systemd-sysusers.service"]
       };
     });
-    const config = {
-      template: new VmTemplate({
+    return this.composeSpecs(
+      composed,
+      new VmSpec({
         additionalFiles: {
           "/opt/install-ttyd.sh": { content: installScript }
         },
@@ -81,8 +103,13 @@ chmod +x /usr/local/bin/ttyd
           ]
         }
       })
-    };
-    return this.compose(existingConfig, config);
+    );
+  }
+  configureSnapshotSpec(spec) {
+    return this.composeTtydSpec(spec);
+  }
+  configureSpec(spec) {
+    return this.composeTtydSpec(spec);
   }
   createInstance() {
     return new VmWebTerminalInstance(this, this.resolvedTerminals);

package/examples/basic.ts

@@ -2,10 +2,15 @@ import "dotenv/config";
 import { freestyle, VmSpec } from "freestyle-sandboxes";
 import { VmWebTerminal as VmTtyd } from "../src/index.ts";
 import { VmDevServer } from "../../with-dev-server/src/index.ts";
+import { VmPtySession } from "../../with-pty/src/index.ts";
 
-const devLogs = new VmTtyd({
+const devPty = new VmPtySession({
+  sessionId: "npm-dev",
+});
+
+const devCommandTtyd = new VmTtyd({
   port: 3010,
-  command: "tmux attach -t dev-server",
+  pty: devPty,
   readOnly: true,
   cwd: "/root/repo",
 });
@@ -17,44 +22,26 @@ const otherTerminals = new VmTtyd({
 
 const domain = `${crypto.randomUUID()}.style.dev`;
 
-const innerDeps = new VmSpec({
-  discriminator: "inner-deps",
-  with: {
-    devLogs: devLogs,
-    otherTerminals: otherTerminals,
-  },
-  aptDeps: ["tmux"],
-  // systemd: {
-  //   services: [
-  //     {
-  //       name: "install-tmux",
-  //       mode: "oneshot",
-  //       bash: "apt-get update && apt-get install -y tmux",
-  //       timeoutSec: 120,
-  //     },
-  //   ],
-  // },
-  additionalFiles: {
-    "/root/.tmux.conf": {
-      content: `set -g mouse on`,
-    },
-  },
-});
-
 const snapshot = new VmSpec({
-  snapshot: innerDeps,
   with: {
+    devCommandTtyd: devCommandTtyd,
+    otherTerminals: otherTerminals,
     devServer: new VmDevServer({
       templateRepo: "https://github.com/freestyle-sh/freestyle-next",
       workdir: "/root/repo",
-      devCommand: "tmux new -s dev-server npm run dev",
+      devCommand: "npm run dev",
+      devCommandPty: devPty,
     }),
   },
 });
 
-const { vm, vmId } = await freestyle.vms.create({
+const { vmId, vm } = await freestyle.vms.create({
   snapshot: snapshot,
   domains: [
+    {
+      domain: domain,
+      vmPort: 3000,
+    },
     {
       domain: "dev-logs-" + domain,
       vmPort: 3010,
@@ -66,7 +53,9 @@ const { vm, vmId } = await freestyle.vms.create({
   ],
 });
 
-console.log("npx freestyle-sandboxes vm ssh " + vmId);
+await vm.devServer.getLogs().then(console.log);
 
+console.log("npx freestyle-sandboxes vm ssh " + vmId);
+console.log(`Dev server available at: https://${domain}`);
 console.log(`Terminal available at: https://dev-logs-${domain}`);
 console.log(`Other terminals available at: https://other-terminals-${domain}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@freestyle-sh/with-ttyd",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Web terminal for freestyle sandboxes",
   "type": "module",
   "main": "./dist/index.js",
@@ -24,7 +24,8 @@
     "typescript": "^5.8.3"
   },
   "dependencies": {
-    "freestyle-sandboxes": "^0.1.27"
+    "freestyle-sandboxes": "^0.1.28",
+    "@freestyle-sh/with-pty": "^0.0.3"
   },
   "scripts": {
     "build": "pkgroll"

package/src/index.ts

@@ -1,10 +1,6 @@
-import {
-  VmTemplate,
-  type CreateVmOptions,
-  VmWith,
-  VmWithInstance,
-  Freestyle,
-} from "freestyle-sandboxes";
+import { VmSpec, VmWith, VmWithInstance } from "freestyle-sandboxes";
+import type { VmPtySessionLike } from "@freestyle-sh/with-pty";
+import type { Freestyle } from "freestyle-sandboxes";
 
 // ============================================================================
 // Configuration Types
@@ -15,6 +11,8 @@ export type TtydConfig = {
   port?: number;
   /** Shell or command to run (default: /bin/bash) */
   command?: string;
+  /** Attach ttyd to a PTY session */
+  pty?: VmPtySessionLike;
   /** User to run terminal as (default: current user) */
   user?: string;
   /** Working directory (default: user home) */
@@ -25,6 +23,8 @@ export type TtydConfig = {
   title?: string;
   /** Read-only terminal (no input allowed) */
   readOnly?: boolean;
+  /** Xterm.js theme settings passed to ttyd client options */
+  theme?: Record<string, string | number | boolean>;
 };
 
 export type ResolvedTerminalConfig = {
@@ -35,6 +35,7 @@ export type ResolvedTerminalConfig = {
   credential?: { username: string; password: string };
   title: string;
   readOnly: boolean;
+  theme?: Record<string, string | number | boolean>;
 };
 
 // ============================================================================
@@ -45,38 +46,61 @@ export class VmWebTerminal<
   T extends TtydConfig[] = TtydConfig[],
 > extends VmWith<VmWebTerminalInstance<T>> {
   private resolvedTerminals: ResolvedTerminalConfig[];
+  private ptySessions: VmPtySessionLike[];
 
   constructor(terminals: T | TtydConfig) {
     super();
     const terminalList = Array.isArray(terminals) ? terminals : [terminals];
+    this.ptySessions = terminalList
+      .map((config) => config.pty)
+      .filter((value): value is VmPtySessionLike => value !== undefined);
     // Resolve config once with defaults
     let nextPort = 7682;
     this.resolvedTerminals = terminalList.map((config) => {
+      if (config.pty && config.command) {
+        throw new Error(
+          "VmWebTerminal config cannot include both pty and command. Use one or the other.",
+        );
+      }
+
       const port = config.port ?? nextPort++;
+      const resolvedCommand = config.pty
+        ? config.pty.attachCommand(config.readOnly ?? false)
+        : (config.command ?? "bash -l");
+
       return {
         port,
-        command: config.command ?? "bash -l",
+        command: resolvedCommand,
         user: config.user ?? "root",
         cwd: config.cwd ?? "/root",
         credential: config.credential,
         title: config.title ?? `terminal-${port}`,
         readOnly: config.readOnly ?? false,
+        theme: config.theme,
       };
     });
   }
 
-  override configure(
-    existingConfig: CreateVmOptions,
-  ): CreateVmOptions | Promise<CreateVmOptions> {
+  private composeTtydSpec(spec: VmSpec): VmSpec {
+    const uniquePtySessions = Array.from(new Set(this.ptySessions));
+    let composed = spec;
+
+    for (const pty of uniquePtySessions) {
+      composed = pty.applyToSpec(composed) as VmSpec;
+    }
+
     // Generate install script
     const installScript = `#!/bin/bash
-set -e
+  set -e
 
-TTYD_VERSION="1.7.7"
-curl -fsSL -o /usr/local/bin/ttyd "https://github.com/tsl0922/ttyd/releases/download/\${TTYD_VERSION}/ttyd.x86_64"
-chmod +x /usr/local/bin/ttyd
-/usr/local/bin/ttyd --version
-`;
+  TTYD_VERSION="1.7.7"
+  mkdir -p /usr/local/bin
+  tmpfile="$(mktemp)"
+  curl -fsSL -o "$tmpfile" "https://github.com/tsl0922/ttyd/releases/download/\${TTYD_VERSION}/ttyd.x86_64"
+  mv "$tmpfile" /usr/local/bin/ttyd
+  chmod +x /usr/local/bin/ttyd
+  /usr/local/bin/ttyd --version
+  `;
 
     // Generate systemd service for each terminal
     const services = this.resolvedTerminals.map((t) => {
@@ -109,6 +133,11 @@ chmod +x /usr/local/bin/ttyd
         args.push(`--writable`);
       }
 
+      if (t.theme) {
+        const themeJson = JSON.stringify(t.theme);
+        args.push(`-t 'theme=${themeJson}'`);
+      }
+
       // Shell command at the end
       args.push(t.command);
 
@@ -125,8 +154,9 @@ chmod +x /usr/local/bin/ttyd
       };
     });
 
-    const config: CreateVmOptions = {
-      template: new VmTemplate({
+    return this.composeSpecs(
+      composed,
+      new VmSpec({
         additionalFiles: {
           "/opt/install-ttyd.sh": { content: installScript },
         },
@@ -143,9 +173,15 @@ chmod +x /usr/local/bin/ttyd
           ],
         },
       }),
-    };
+    );
+  }
+
+  override configureSnapshotSpec(spec: VmSpec): VmSpec {
+    return this.composeTtydSpec(spec);
+  }
 
-    return this.compose(existingConfig, config);
+  override configureSpec(spec: VmSpec): VmSpec {
+    return this.composeTtydSpec(spec);
   }
 
   createInstance(): VmWebTerminalInstance<T> {
@@ -164,7 +200,7 @@ chmod +x /usr/local/bin/ttyd
 export class WebTerminal {
   readonly port: number;
   readonly command: string;
-  private instance: VmWebTerminalInstance<any>;
+  private instance: VmWebTerminalInstance<TtydConfig[]>;
 
   constructor({
     port,
@@ -173,7 +209,7 @@ export class WebTerminal {
   }: {
     port: number;
     command: string;
-    instance: VmWebTerminalInstance<any>;
+    instance: VmWebTerminalInstance<TtydConfig[]>;
   }) {
     this.port = port;
     this.command = command;