kokoirc 0.2.6 → 0.2.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kokoirc",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "description": "Modern terminal IRC client with inline image preview, SASL, scripting, encrypted logging, and theming — built with OpenTUI, React, and Bun",
   "license": "MIT",
   "author": {
@@ -62,7 +62,6 @@
   "devDependencies": {
     "@types/bun": "^1.3.9",
     "@types/react": "^19.2.14",
-    "@types/sharp": "^0.32.0",
     "typescript": "^5.9.3"
   },
   "imports": {
@@ -71,10 +70,9 @@
   "dependencies": {
     "@opentui/core": "^0.1.83",
     "@opentui/react": "^0.1.83",
+    "jimp": "^1.6.0",
     "kofany-irc-framework": "^4.14.1",
     "react": "^19.2.4",
-    "sharp": "^0.34.5",
-    "sixel": "^0.16.0",
     "smol-toml": "^1.6.0",
     "zustand": "^5.0.11"
   }

package/src/core/image-preview/encode.ts

@@ -1,4 +1,4 @@
-import { image2sixel } from "sixel"
+import { encodeSixel as encodeSixelRaw } from "./sixel"
 
 const ESC = "\x1b"
 const ST = `${ESC}\\`
@@ -74,10 +74,7 @@ export function encodeIterm2(imageBuffer: Buffer, cols: number, rows: number): s
 
 /** Encode raw RGBA pixels as a raw sixel sequence */
 export function encodeSixel(rgbaBuffer: Buffer, width: number, height: number): string {
-  // Create a clean Uint8ClampedArray from a copy — Buffer.buffer is the shared Node pool
-  const copy = new Uint8ClampedArray(rgbaBuffer.length)
-  copy.set(rgbaBuffer)
-  return image2sixel(copy, width, height, 256)
+  return encodeSixelRaw(new Uint8Array(rgbaBuffer), width, height)
 }
 
 // ─── Unicode Half-Block Fallback ─────────────────────────────

package/src/core/image-preview/render.ts

@@ -1,4 +1,4 @@
-import sharp from "sharp"
+import { Jimp } from "jimp"
 import { writeSync } from "node:fs"
 import { useStore } from "@/core/state/store"
 import { detectProtocol, isInsideTmux } from "./detect"
@@ -12,6 +12,31 @@ import { flushStdin } from "./stdin-guard"
 const MOUSE_DISABLE = "\x1b[?1003l\x1b[?1006l\x1b[?1002l\x1b[?1000l"
 const MOUSE_ENABLE  = "\x1b[?1000h\x1b[?1002h\x1b[?1003h\x1b[?1006h"
 
+/** Resize image to fit within maxW x maxH while preserving aspect ratio (fit: "inside"). */
+function resizeContain(image: InstanceType<typeof Jimp>, maxW: number, maxH: number): InstanceType<typeof Jimp> {
+  const { width, height } = image
+  if (width <= maxW && height <= maxH) return image
+
+  const scale = Math.min(maxW / width, maxH / height)
+  const newW = Math.max(1, Math.round(width * scale))
+  const newH = Math.max(1, Math.round(height * scale))
+  return image.resize({ w: newW, h: newH })
+}
+
+/** Get raw RGBA buffer from a Jimp image. */
+function getRGBA(image: InstanceType<typeof Jimp>): { data: Buffer; width: number; height: number } {
+  return {
+    data: Buffer.from(image.bitmap.data),
+    width: image.bitmap.width,
+    height: image.bitmap.height,
+  }
+}
+
+/** Get PNG buffer from a Jimp image. */
+async function toPNG(image: InstanceType<typeof Jimp>): Promise<Buffer> {
+  return Buffer.from(await image.getBuffer("image/png"))
+}
+
 /** Main pipeline: fetch → cache → encode → write to stdout directly */
 export async function preparePreview(url: string): Promise<void> {
   const store = useStore.getState()
@@ -42,10 +67,10 @@ export async function preparePreview(url: string): Promise<void> {
     // Bail if preview was dismissed while we were fetching
     if (!useStore.getState().imagePreview) return
 
-    // 4. Load with sharp and get metadata
-    const metadata = await sharp(imagePath).metadata()
-    const imgWidth = metadata.width ?? 0
-    const imgHeight = metadata.height ?? 0
+    // 4. Load with jimp and get metadata
+    const image = await Jimp.read(imagePath)
+    const imgWidth = image.width
+    const imgHeight = image.height
 
     if (imgWidth === 0 || imgHeight === 0) {
       store.updateImagePreview({ status: "error", error: "Invalid image dimensions" })
@@ -106,49 +131,33 @@ export async function preparePreview(url: string): Promise<void> {
       }
     }
 
-    // 7. Encode based on protocol — returns raw sequences (no DCS wrapping)
+    // 7. Encode based on protocol
     let rawChunks: string[]
 
     if (protocol === "kitty") {
       if (kittyFmt === "png") {
         // PNG (f=100) — terminal decodes natively, more robust at chunk boundaries
-        const pngBuf = await sharp(imagePath)
-          .resize(pixelWidth, pixelHeight, { fit: "inside" })
-          .png()
-          .toBuffer()
+        const resized = resizeContain(image.clone(), pixelWidth, pixelHeight)
+        const pngBuf = await toPNG(resized)
         rawChunks = encodeKittyPNG(pngBuf, displayCols, displayRows)
       } else {
         // Raw RGBA (f=32) — direct pixel data, matches erssi/chafa output
-        const { data, info } = await sharp(imagePath)
-          .resize(pixelWidth, pixelHeight, { fit: "inside" })
-          .ensureAlpha()
-          .raw()
-          .toBuffer({ resolveWithObject: true })
-        const rgbaCopy = Buffer.from(data)
-        rawChunks = encodeKittyRGBA(rgbaCopy, info.width, info.height, displayCols, displayRows)
+        const resized = resizeContain(image.clone(), pixelWidth, pixelHeight)
+        const { data, width, height } = getRGBA(resized)
+        rawChunks = encodeKittyRGBA(data, width, height, displayCols, displayRows)
       }
     } else if (protocol === "iterm2") {
-      const resized = await sharp(imagePath)
-        .resize(pixelWidth, pixelHeight, { fit: "inside" })
-        .png()
-        .toBuffer()
-      rawChunks = [encodeIterm2(resized, displayCols, displayRows)]
+      const resized = resizeContain(image.clone(), pixelWidth, pixelHeight)
+      const pngBuf = await toPNG(resized)
+      rawChunks = [encodeIterm2(pngBuf, displayCols, displayRows)]
     } else if (protocol === "sixel") {
-      const { data, info } = await sharp(imagePath)
-        .resize(pixelWidth, pixelHeight, { fit: "inside" })
-        .ensureAlpha()
-        .raw()
-        .toBuffer({ resolveWithObject: true })
-      const rgbaCopy = Buffer.from(data)
-      rawChunks = [encodeSixel(rgbaCopy, info.width, info.height)]
+      const resized = resizeContain(image.clone(), pixelWidth, pixelHeight)
+      const { data, width, height } = getRGBA(resized)
+      rawChunks = [encodeSixel(data, width, height)]
     } else {
-      const { data, info } = await sharp(imagePath)
-        .resize(displayCols, displayRows * 2, { fit: "inside" })
-        .ensureAlpha()
-        .raw()
-        .toBuffer({ resolveWithObject: true })
-      const rgbaCopy = Buffer.from(data)
-      rawChunks = [encodeSymbols(rgbaCopy, info.width, info.height)]
+      const resized = resizeContain(image.clone(), displayCols, displayRows * 2)
+      const { data, width, height } = getRGBA(resized)
+      rawChunks = [encodeSymbols(data, width, height)]
     }
 
     // Bail if preview was dismissed while we were encoding
@@ -214,9 +223,22 @@ export async function preparePreview(url: string): Promise<void> {
       }
     }, 50)
   } catch (err: any) {
-    store.updateImagePreview({
-      status: "error",
-      error: err.message ?? "Unknown error",
-    })
+    const errDetail = err.stack
+      ? `${err.message}\n${err.stack.split("\n").slice(1, 4).join("\n")}`
+      : (err.message ?? "Unknown error")
+    store.updateImagePreview({ status: "error", error: err.message ?? "Unknown error" })
+
+    // Also show full error in the active buffer for debugging
+    const buf = useStore.getState().activeBufferId
+    if (buf) {
+      const { nextMsgId } = await import("@/core/utils/id")
+      useStore.getState().addMessage(buf, {
+        id: nextMsgId(),
+        timestamp: new Date(),
+        type: "event",
+        text: `%Zf7768e[img] ${errDetail}%N`,
+        highlight: false,
+      })
+    }
   }
 }

package/src/core/image-preview/sixel.ts

@@ -0,0 +1,193 @@
+/** Pure TypeScript sixel encoder — no native dependencies.
+ *  Converts RGBA pixel data to sixel format for terminal display.
+ *
+ *  Sixel format: each "band" is 6 rows of pixels. For each color in the palette,
+ *  we scan across the band outputting characters whose 6-bit value (+ 63) indicates
+ *  which of the 6 rows contain that color at that x position. */
+
+// ─── Color Quantization (Median Cut) ─────────────────────────────────────
+
+interface ColorBox {
+  pixels: Uint32Array
+  rMin: number; rMax: number
+  gMin: number; gMax: number
+  bMin: number; bMax: number
+}
+
+function buildBox(pixels: Uint32Array): ColorBox {
+  let rMin = 255, rMax = 0, gMin = 255, gMax = 0, bMin = 255, bMax = 0
+  for (let i = 0; i < pixels.length; i++) {
+    const c = pixels[i]
+    const r = c & 0xFF
+    const g = (c >> 8) & 0xFF
+    const b = (c >> 16) & 0xFF
+    if (r < rMin) rMin = r; if (r > rMax) rMax = r
+    if (g < gMin) gMin = g; if (g > gMax) gMax = g
+    if (b < bMin) bMin = b; if (b > bMax) bMax = b
+  }
+  return { pixels, rMin, rMax, gMin, gMax, bMin, bMax }
+}
+
+function medianCut(rgba: Uint8Array, width: number, height: number, maxColors: number): { palette: number[][]; indexed: Uint8Array } {
+  // Pack pixels into uint32 (ignore alpha)
+  const count = width * height
+  const packed = new Uint32Array(count)
+  for (let i = 0; i < count; i++) {
+    const off = i * 4
+    packed[i] = rgba[off] | (rgba[off + 1] << 8) | (rgba[off + 2] << 16)
+  }
+
+  // Build initial box and split
+  const boxes: ColorBox[] = [buildBox(packed)]
+
+  while (boxes.length < maxColors) {
+    // Find box with largest range
+    let bestIdx = 0
+    let bestRange = 0
+    for (let i = 0; i < boxes.length; i++) {
+      const b = boxes[i]
+      if (b.pixels.length < 2) continue
+      const range = Math.max(b.rMax - b.rMin, b.gMax - b.gMin, b.bMax - b.bMin)
+      if (range > bestRange) { bestRange = range; bestIdx = i }
+    }
+
+    if (bestRange === 0) break
+
+    const box = boxes[bestIdx]
+    const rRange = box.rMax - box.rMin
+    const gRange = box.gMax - box.gMin
+    const bRange = box.bMax - box.bMin
+
+    // Sort along the longest axis
+    let channel: number
+    if (rRange >= gRange && rRange >= bRange) channel = 0
+    else if (gRange >= bRange) channel = 8
+    else channel = 16
+
+    const sorted = box.pixels.slice().sort((a, b) =>
+      ((a >> channel) & 0xFF) - ((b >> channel) & 0xFF)
+    )
+
+    const mid = sorted.length >> 1
+    boxes.splice(bestIdx, 1,
+      buildBox(sorted.slice(0, mid)),
+      buildBox(sorted.slice(mid))
+    )
+  }
+
+  // Build palette from box averages
+  const palette: number[][] = []
+  for (const box of boxes) {
+    let rSum = 0, gSum = 0, bSum = 0
+    for (let i = 0; i < box.pixels.length; i++) {
+      const c = box.pixels[i]
+      rSum += c & 0xFF
+      gSum += (c >> 8) & 0xFF
+      bSum += (c >> 16) & 0xFF
+    }
+    const n = box.pixels.length || 1
+    palette.push([Math.round(rSum / n), Math.round(gSum / n), Math.round(bSum / n)])
+  }
+
+  // Map each pixel to nearest palette entry
+  const indexed = new Uint8Array(count)
+  for (let i = 0; i < count; i++) {
+    const off = i * 4
+    const r = rgba[off], g = rgba[off + 1], b = rgba[off + 2]
+    let bestDist = Infinity
+    let bestColor = 0
+    for (let c = 0; c < palette.length; c++) {
+      const dr = r - palette[c][0]
+      const dg = g - palette[c][1]
+      const db = b - palette[c][2]
+      const dist = dr * dr + dg * dg + db * db
+      if (dist < bestDist) { bestDist = dist; bestColor = c }
+    }
+    indexed[i] = bestColor
+  }
+
+  return { palette, indexed }
+}
+
+// ─── Sixel Encoding ──────────────────────────────────────────────────────
+
+/** Encode RGBA pixel data as a sixel string.
+ *  @param rgba  Raw RGBA pixel buffer
+ *  @param width  Image width in pixels
+ *  @param height Image height in pixels
+ *  @param maxColors Max palette size (default 256, sixel max) */
+export function encodeSixel(rgba: Uint8Array, width: number, height: number, maxColors = 256): string {
+  const { palette, indexed } = medianCut(rgba, width, height, Math.min(maxColors, 256))
+
+  const parts: string[] = []
+
+  // DCS q — sixel header. P2=1 means background stays transparent.
+  // "0;0;0" = aspect ratio params (let terminal decide)
+  parts.push("\x1bPq")
+
+  // Palette definitions: #N;2;R;G;B (percentages 0-100)
+  for (let i = 0; i < palette.length; i++) {
+    const [r, g, b] = palette[i]
+    parts.push(`#${i};2;${Math.round(r * 100 / 255)};${Math.round(g * 100 / 255)};${Math.round(b * 100 / 255)}`)
+  }
+
+  // Encode bands of 6 rows
+  const bandCount = Math.ceil(height / 6)
+
+  for (let band = 0; band < bandCount; band++) {
+    const y0 = band * 6
+
+    for (let color = 0; color < palette.length; color++) {
+      // Build sixel line for this color in this band
+      let hasPixel = false
+      const chars: number[] = new Array(width)
+
+      for (let x = 0; x < width; x++) {
+        let bits = 0
+        for (let row = 0; row < 6; row++) {
+          const y = y0 + row
+          if (y >= height) break
+          if (indexed[y * width + x] === color) {
+            bits |= (1 << row)
+          }
+        }
+        chars[x] = bits
+        if (bits !== 0) hasPixel = true
+      }
+
+      if (!hasPixel) continue
+
+      // Select this color
+      parts.push(`#${color}`)
+
+      // Emit with run-length encoding
+      let i = 0
+      while (i < width) {
+        const ch = chars[i]
+        let run = 1
+        while (i + run < width && chars[i + run] === ch) run++
+
+        const sixelChar = String.fromCharCode(ch + 63)
+        if (run >= 4) {
+          parts.push(`!${run}${sixelChar}`)
+        } else {
+          for (let r = 0; r < run; r++) parts.push(sixelChar)
+        }
+        i += run
+      }
+
+      // Carriage return (back to column 0, same band)
+      parts.push("$")
+    }
+
+    // Next band (move down 6 rows)
+    if (band < bandCount - 1) {
+      parts.push("-")
+    }
+  }
+
+  // ST — string terminator
+  parts.push("\x1b\\")
+
+  return parts.join("")
+}

package/src/ui/input/CommandInput.tsx

@@ -103,10 +103,20 @@ export function CommandInput() {
       const text = event.text
       if (!text) return
 
-      const lines = text.split(/\r?\n/).filter((l) => l.trim())
-      if (lines.length <= 1) return // single-line paste: let input handle normally
-
+      const lines = text.split(/\r?\n/)
+      const nonEmptyLines = lines.filter((l) => l.trim())
+      
+      // Always prevent default to stop OpenTUI input from stripping newlines
       event.preventDefault()
+      
+      // Single line: insert at cursor position
+      if (nonEmptyLines.length <= 1) {
+        const currentValue = inputRef.current?.value ?? value
+        const newValue = currentValue + text
+        setValue(newValue)
+        if (inputRef.current) inputRef.current.value = newValue
+        return
+      }
 
       // Prepend any existing input text to first pasted line
       const currentInput = inputRef.current?.value ?? ""