fix(terminal): support browser image paste

Author: skulidropek

packages/api/src/services/terminal-image-paste-core.ts

@@ -0,0 +1,127 @@
+export type TerminalImagePastePayload = {
+  readonly data: string
+  readonly mediaType: string
+  readonly name: string
+  readonly size: number
+}
+
+export type TerminalImagePastePlan =
+  | {
+    readonly _tag: "InvalidTerminalImagePaste"
+    readonly message: string
+  }
+  | {
+    readonly _tag: "ValidTerminalImagePaste"
+    readonly containerPath: string
+    readonly decodedBytes: number
+    readonly normalizedBase64: string
+  }
+
+export const terminalImagePasteDirectory = "/home/dev/.docker-git/pasted-images"
+export const terminalImagePasteMaxBytes = 10 * 1024 * 1024
+
+const base64Pattern = /^(?:[+/0-9A-Za-z]{4})*(?:[+/0-9A-Za-z]{2}==|[+/0-9A-Za-z]{3}=)?$/u
+const terminalImagePasteMaxBase64Length = Math.ceil(terminalImagePasteMaxBytes / 3) * 4
+const safeFileNameMaxLength = 72
+
+const imageMediaTypeExtensions = new Map<string, string>([
+  ["image/gif", "gif"],
+  ["image/jpeg", "jpg"],
+  ["image/png", "png"],
+  ["image/webp", "webp"]
+])
+
+export const isSupportedTerminalImageMediaType = (mediaType: string): boolean =>
+  imageMediaTypeExtensions.has(mediaType.toLowerCase())
+
+const extensionForMediaType = (mediaType: string): string | null =>
+  imageMediaTypeExtensions.get(mediaType.toLowerCase()) ?? null
+
+const normalizeBase64 = (data: string): string => data.replace(/\s+/gu, "")
+
+const decodedBase64Bytes = (data: string): number | null => {
+  if (data.length === 0 || data.length % 4 !== 0 || !base64Pattern.test(data)) {
+    return null
+  }
+  const padding = data.endsWith("==") ? 2 : data.endsWith("=") ? 1 : 0
+  return data.length / 4 * 3 - padding
+}
+
+const lastPathSegment = (name: string): string => {
+  const segments = name.split(/[\\/]/u)
+  return segments.at(-1) ?? ""
+}
+
+export const sanitizeTerminalImageBaseName = (name: string): string => {
+  const withoutExtension = lastPathSegment(name).replace(/\.[^.]*$/u, "")
+  const sanitized = withoutExtension
+    .replace(/[^0-9A-Za-z._-]+/gu, "-")
+    .replace(/^[.-]+/u, "")
+    .replace(/[.-]+$/u, "")
+    .slice(0, safeFileNameMaxLength)
+  return sanitized.length > 0 ? sanitized : "clipboard-image"
+}
+
+const terminalImageFileName = (
+  id: string,
+  name: string,
+  mediaType: string
+): string | null => {
+  const extension = extensionForMediaType(mediaType)
+  if (extension === null) {
+    return null
+  }
+  return `${id}-${sanitizeTerminalImageBaseName(name)}.${extension}`
+}
+
+export const createTerminalImagePastePlan = (
+  payload: TerminalImagePastePayload,
+  id: string
+): TerminalImagePastePlan => {
+  const mediaType = payload.mediaType.toLowerCase()
+  const fileName = terminalImageFileName(id, payload.name, mediaType)
+  if (fileName === null) {
+    return {
+      _tag: "InvalidTerminalImagePaste",
+      message: `Unsupported image type: ${payload.mediaType || "unknown"}.`
+    }
+  }
+  if (!Number.isFinite(payload.size) || payload.size <= 0) {
+    return {
+      _tag: "InvalidTerminalImagePaste",
+      message: "Image payload is empty."
+    }
+  }
+  if (payload.size > terminalImagePasteMaxBytes) {
+    return {
+      _tag: "InvalidTerminalImagePaste",
+      message: `Image is too large. Max size is ${terminalImagePasteMaxBytes} bytes.`
+    }
+  }
+  const normalizedBase64 = normalizeBase64(payload.data)
+  if (normalizedBase64.length > terminalImagePasteMaxBase64Length) {
+    return {
+      _tag: "InvalidTerminalImagePaste",
+      message: `Image is too large. Max size is ${terminalImagePasteMaxBytes} bytes.`
+    }
+  }
+  const decodedBytes = decodedBase64Bytes(normalizedBase64)
+  if (decodedBytes === null) {
+    return {
+      _tag: "InvalidTerminalImagePaste",
+      message: "Image payload is not valid base64."
+    }
+  }
+  if (decodedBytes !== payload.size) {
+    return {
+      _tag: "InvalidTerminalImagePaste",
+      message: "Image payload size does not match its base64 data."
+    }
+  }
+  return {
+    _tag: "ValidTerminalImagePaste",
+    containerPath: `${terminalImagePasteDirectory}/${fileName}`,
+    decodedBytes,
+    normalizedBase64
+  }
+}

packages/api/src/services/terminal-sessions.ts

@@ -7,21 +7,29 @@ import * as FileSystem from "@effect/platform/FileSystem"
 import * as ParseResult from "@effect/schema/ParseResult"
 import * as Schema from "@effect/schema/Schema"
 import { Effect, Either } from "effect"
+import { Buffer } from "node:buffer"
+import { spawn } from "node:child_process"
 import { randomUUID } from "node:crypto"
 import type { IncomingMessage, Server as HttpServer } from "node:http"
 import type { Duplex } from "node:stream"
 import { WebSocket, WebSocketServer, type RawData } from "ws"
 
 import type { TerminalSession, TerminalSessionStatus } from "../api/contracts.js"
 import { ApiConflictError, ApiInternalError, ApiNotFoundError, describeUnknown } from "../api/errors.js"
-import { spawnPtyBridge, type PtyBridge } from "./pty-bridge.js"
 import { emitProjectEvent } from "./events.js"
+import {
+  createTerminalImagePastePlan,
+  terminalImagePasteDirectory,
+  type TerminalImagePastePayload
+} from "./terminal-image-paste-core.js"
+import { spawnPtyBridge, type PtyBridge } from "./pty-bridge.js"
 import { getProjectItemById, upProject } from "./projects.js"
 import { attachWebSocketHeartbeat } from "./websocket-heartbeat.js"
 
 type TerminalClientMessage =
   | { readonly type: "input"; readonly data: string }
   | { readonly type: "resize"; readonly cols: number; readonly rows: number }
+  | ({ readonly type: "image" } & TerminalImagePastePayload)
   | { readonly type: "close" }
 
 type TerminalServerMessage =
@@ -36,6 +44,7 @@ type TerminalRecord = {
   socket: WebSocket | null
   attachTimeout: ReturnType<typeof setTimeout> | null
   detachTimeout: ReturnType<typeof setTimeout> | null
+  projectContainerName: string
   projectId: string
   prepared: ReturnType<typeof prepareProjectSsh>
 }
@@ -56,6 +65,13 @@ const TerminalClientMessageSchema = Schema.parseJson(
       cols: Schema.Number,
       rows: Schema.Number
     }),
+    Schema.Struct({
+      type: Schema.Literal("image"),
+      data: Schema.String,
+      mediaType: Schema.String,
+      name: Schema.String,
+      size: Schema.Number
+    }),
     Schema.Struct({
       type: Schema.Literal("close")
     })
@@ -264,6 +280,118 @@ const writePtyInput = (pty: PtyBridge | null, data: string): void => {
   }
 }
 
+const shellQuote = (value: string): string => `'${value.replace(/'/gu, "'\\''")}'`
+
+const writeBufferToProjectContainer = (
+  containerName: string,
+  containerPath: string,
+  buffer: Buffer
+): Effect.Effect<void, ApiInternalError> =>
+  Effect.async((resume) => {
+    const child = spawn(
+      "docker",
+      [
+        "exec",
+        "-i",
+        "-u",
+        "dev",
+        containerName,
+        "bash",
+        "--noprofile",
+        "--norc",
+        "-c",
+        `mkdir -p ${shellQuote(terminalImagePasteDirectory)} && cat > ${shellQuote(containerPath)}`
+      ],
+      {
+        cwd: process.cwd(),
+        stdio: ["pipe", "ignore", "pipe"]
+      }
+    )
+    const stderrChunks: Array<Buffer> = []
+    let completed = false
+    const resumeOnce = (effect: Effect.Effect<void, ApiInternalError>): void => {
+      if (completed) {
+        return
+      }
+      completed = true
+      resume(effect)
+    }
+    child.stderr.on("data", (chunk: Buffer | string) => {
+      stderrChunks.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk))
+    })
+    child.stdin.on("error", (error) => {
+      resumeOnce(Effect.fail(new ApiInternalError({
+        message: `Failed to write pasted image to ${containerName}.`,
+        cause: error
+      })))
+    })
+    child.on("error", (error) => {
+      resumeOnce(Effect.fail(new ApiInternalError({
+        message: `Failed to run docker exec for ${containerName}.`,
+        cause: error
+      })))
+    })
+    child.on("close", (exitCode) => {
+      if (exitCode === 0) {
+        resumeOnce(Effect.void)
+        return
+      }
+      const stderr = Buffer.concat(stderrChunks).toString("utf8").trim()
+      resumeOnce(Effect.fail(new ApiInternalError({
+        message: stderr.length > 0
+          ? `Failed to save pasted image: ${stderr}`
+          : `Failed to save pasted image; docker exec exited with code ${exitCode ?? "unknown"}.`
+      })))
+    })
+    child.stdin.end(buffer)
+  })
+
+const saveTerminalImagePaste = (
+  record: TerminalRecord,
+  payload: TerminalImagePastePayload
+): Effect.Effect<string, ApiInternalError> =>
+  Effect.gen(function*(_) {
+    const plan = createTerminalImagePastePlan(payload, randomUUID())
+    if (plan._tag === "InvalidTerminalImagePaste") {
+      return yield* _(Effect.fail(new ApiInternalError({ message: plan.message })))
+    }
+    const bytes = Buffer.from(plan.normalizedBase64, "base64")
+    if (bytes.length !== plan.decodedBytes) {
+      return yield* _(Effect.fail(new ApiInternalError({ message: "Decoded image size changed during upload." })))
+    }
+    yield* _(writeBufferToProjectContainer(record.projectContainerName, plan.containerPath, bytes))
+    return plan.containerPath
+  })
+
+const terminalOutputLine = (line: string): string => `\r\n[docker-git] ${line}\r\n`
+
+const handleImagePasteMessage = (
+  record: TerminalRecord,
+  message: Extract<TerminalClientMessage, { readonly type: "image" }>
+): void => {
+  Effect.runFork(
+    saveTerminalImagePaste(record, message).pipe(
+      Effect.tap((containerPath) =>
+        Effect.sync(() => {
+          sendServerMessage(record.socket, {
+            type: "output",
+            data: terminalOutputLine(`Pasted image saved: ${containerPath}`)
+          })
+          writePtyInput(record.pty, `${containerPath} `)
+        })
+      ),
+      Effect.catchAll((error) =>
+        Effect.sync(() => {
+          sendServerMessage(record.socket, {
+            type: "output",
+            data: terminalOutputLine(`Failed to paste image: ${error.message}`)
+          })
+        })
+      )
+    )
+  )
+}
+
 const resizePty = (pty: PtyBridge | null, cols: number, rows: number): void => {
   if (pty === null) {
     return
@@ -321,7 +449,8 @@ const createAttachTimeout = (sessionId: string): ReturnType<typeof setTimeout> =
 
 const registerRecord = (
   projectId: string,
-  prepared: ReturnType<typeof prepareProjectSsh>
+  prepared: ReturnType<typeof prepareProjectSsh>,
+  projectContainerName: string
 ): TerminalSession => {
   const session: TerminalSession = {
     createdAt: nowIso(),
@@ -334,6 +463,7 @@ const registerRecord = (
     attachTimeout: null,
     detachTimeout: null,
     prepared,
+    projectContainerName,
     projectId,
     pty: null,
     session,
@@ -378,7 +508,7 @@ export const createTerminalSession = (
       })
     )
     const prepared = prepareProjectSsh(projectItem)
-    const session = registerRecord(projectId, prepared)
+    const session = registerRecord(projectId, prepared, projectItem.containerName)
     yield* _(
       Effect.sync(() => {
         emitProjectEvent(projectId, "project.ssh.session", {
@@ -451,6 +581,10 @@ const handleSocketMessage = (record: TerminalRecord, raw: RawData): void => {
     resizePty(record.pty, clampTerminalSize(message.cols, 120), clampTerminalSize(message.rows, 32))
     return
   }
+  if (message.type === "image") {
+    handleImagePasteMessage(record, message)
+    return
+  }
   handleCloseMessage(record)
 }