nastechai-desktop 18.1.0

package/src/lib/ansi.test.ts

@@ -0,0 +1,123 @@
+import { describe, expect, it } from 'vitest'
+
+import { ansiColorClass, hasAnsiCodes, parseAnsi } from './ansi'
+
+const ESC = '\x1b'
+
+describe('parseAnsi', () => {
+  it('returns a single default segment for plain text', () => {
+    expect(parseAnsi('hello world')).toEqual([{ bold: false, fg: null, text: 'hello world' }])
+  })
+
+  it('returns nothing for an empty string', () => {
+    expect(parseAnsi('')).toEqual([])
+  })
+
+  it('parses a basic foreground color sequence and resets', () => {
+    const input = `${ESC}[31merror${ESC}[0m ok`
+
+    expect(parseAnsi(input)).toEqual([
+      { bold: false, fg: 'red', text: 'error' },
+      { bold: false, fg: null, text: ' ok' }
+    ])
+  })
+
+  it('treats bold (1) and bold-off (22) as toggles without affecting fg', () => {
+    const input = `${ESC}[1mloud${ESC}[22m quiet`
+
+    expect(parseAnsi(input)).toEqual([
+      { bold: true, fg: null, text: 'loud' },
+      { bold: false, fg: null, text: ' quiet' }
+    ])
+  })
+
+  it('treats default-fg (39) as a foreground-only reset (keeps bold)', () => {
+    const input = `${ESC}[1;31mboth${ESC}[39mbold-only`
+
+    expect(parseAnsi(input)).toEqual([
+      { bold: true, fg: 'red', text: 'both' },
+      { bold: true, fg: null, text: 'bold-only' }
+    ])
+  })
+
+  it('handles bright colors via the 90-97 range', () => {
+    expect(parseAnsi(`${ESC}[92mgreen`)).toEqual([{ bold: false, fg: 'bright-green', text: 'green' }])
+  })
+
+  it('coalesces adjacent runs with the same style', () => {
+    const input = `${ESC}[31ma${ESC}[31mb${ESC}[31mc`
+
+    expect(parseAnsi(input)).toEqual([{ bold: false, fg: 'red', text: 'abc' }])
+  })
+
+  it('skips 256-color (38;5) trailing args without painting fg or leaking the params as text', () => {
+    // 256-color and truecolor aren't rendered (FG_BY_CODE doesn't cover them),
+    // but the parser must consume the trailing `;5;<n>` / `;2;r;g;b` args so
+    // they never bleed into the visible segment text.
+    const segments = parseAnsi(`${ESC}[38;5;208morange${ESC}[0m`)
+
+    expect(segments).toHaveLength(1)
+    expect(segments[0].fg).toBe(null)
+    expect(segments[0].text).toBe('orange')
+  })
+
+  it('skips truecolor (38;2;r;g;b) trailing args', () => {
+    const segments = parseAnsi(`${ESC}[38;2;10;20;30mrgb${ESC}[0m`)
+
+    expect(segments).toHaveLength(1)
+    expect(segments[0].fg).toBe(null)
+    expect(segments[0].text).toBe('rgb')
+  })
+
+  it('drops non-SGR CSI sequences (cursor motion, erase) without consuming surrounding text', () => {
+    const input = `before${ESC}[2Jmiddle${ESC}[10;5Hafter`
+
+    expect(parseAnsi(input)).toEqual([{ bold: false, fg: null, text: 'beforemiddleafter' }])
+  })
+
+  it('treats an empty SGR parameter (ESC[m) as a full reset', () => {
+    const input = `${ESC}[1;31mfoo${ESC}[mbar`
+
+    expect(parseAnsi(input)).toEqual([
+      { bold: true, fg: 'red', text: 'foo' },
+      { bold: false, fg: null, text: 'bar' }
+    ])
+  })
+})
+
+describe('hasAnsiCodes', () => {
+  it('returns false for plain text', () => {
+    expect(hasAnsiCodes('hello world')).toBe(false)
+  })
+
+  it('returns true when any CSI introducer is present', () => {
+    expect(hasAnsiCodes(`${ESC}[31mred`)).toBe(true)
+  })
+})
+
+describe('ansiColorClass', () => {
+  it('returns a non-empty Tailwind class string for every supported color', () => {
+    const colors = [
+      'black',
+      'red',
+      'green',
+      'yellow',
+      'blue',
+      'magenta',
+      'cyan',
+      'white',
+      'bright-black',
+      'bright-red',
+      'bright-green',
+      'bright-yellow',
+      'bright-blue',
+      'bright-magenta',
+      'bright-cyan',
+      'bright-white'
+    ] as const
+
+    for (const color of colors) {
+      expect(ansiColorClass(color)).toMatch(/\S/)
+    }
+  })
+})

package/src/lib/ansi.ts

@@ -0,0 +1,175 @@
+// Minimal ANSI SGR parser for rendering terminal output inside chat tool
+// cards. Only handles the SGR codes that show up in practice (color, bold,
+// reset); cursor motions and other CSI sequences are dropped silently.
+//
+// Returns a flat array of styled segments so callers can render them as
+// React spans without each consumer having to re-implement the parser.
+
+export interface AnsiSegment {
+  bold: boolean
+  /** Tailwind text-color class or null for the default foreground. */
+  fg: AnsiColor | null
+  text: string
+}
+
+export type AnsiColor =
+  | 'black'
+  | 'red'
+  | 'green'
+  | 'yellow'
+  | 'blue'
+  | 'magenta'
+  | 'cyan'
+  | 'white'
+  | 'bright-black'
+  | 'bright-red'
+  | 'bright-green'
+  | 'bright-yellow'
+  | 'bright-blue'
+  | 'bright-magenta'
+  | 'bright-cyan'
+  | 'bright-white'
+
+const FG_BY_CODE: Record<number, AnsiColor> = {
+  30: 'black',
+  31: 'red',
+  32: 'green',
+  33: 'yellow',
+  34: 'blue',
+  35: 'magenta',
+  36: 'cyan',
+  37: 'white',
+  90: 'bright-black',
+  91: 'bright-red',
+  92: 'bright-green',
+  93: 'bright-yellow',
+  94: 'bright-blue',
+  95: 'bright-magenta',
+  96: 'bright-cyan',
+  97: 'bright-white'
+}
+
+// CSI = ESC '[' params 'final'. We only care about SGR (final == 'm'); other
+// final bytes are matched and consumed so they don't leak into the rendered
+// text. Range covers the common CSI command set (A-Z / a-z / @).
+// eslint-disable-next-line no-control-regex
+const CSI_RE = /\x1b\[([\d;]*)([\x40-\x7e])/g
+// Other escape sequences (single-char OSC/SS3/etc.) — strip silently.
+// eslint-disable-next-line no-control-regex
+const OTHER_ESCAPE_RE = /\x1b[@-Z\\-_]|\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)/g
+
+export function parseAnsi(input: string): AnsiSegment[] {
+  if (!input) {
+    return []
+  }
+
+  // Strip non-CSI escapes upfront — none of them carry text we want to keep
+  // and CSI_RE wouldn't match them.
+  const cleaned = input.replace(OTHER_ESCAPE_RE, '')
+
+  const segments: AnsiSegment[] = []
+  let cursor = 0
+  let bold = false
+  let fg: AnsiColor | null = null
+
+  const pushText = (text: string) => {
+    if (!text) {
+      return
+    }
+
+    const last = segments.at(-1)
+
+    if (last && last.bold === bold && last.fg === fg) {
+      last.text += text
+
+      return
+    }
+
+    segments.push({ bold, fg, text })
+  }
+
+  CSI_RE.lastIndex = 0
+  let match: RegExpExecArray | null
+
+  while ((match = CSI_RE.exec(cleaned)) !== null) {
+    const start = match.index
+
+    if (start > cursor) {
+      pushText(cleaned.slice(cursor, start))
+    }
+
+    if (match[2] === 'm') {
+      const codes = match[1]
+        .split(';')
+        .map(part => (part === '' ? 0 : Number(part)))
+        .filter(value => Number.isFinite(value))
+
+      for (let i = 0; i < codes.length; i += 1) {
+        const code = codes[i]
+
+        if (code === 0) {
+          bold = false
+          fg = null
+        } else if (code === 1) {
+          bold = true
+        } else if (code === 22) {
+          bold = false
+        } else if (code === 39) {
+          fg = null
+        } else if (code in FG_BY_CODE) {
+          fg = FG_BY_CODE[code]
+        } else if (code === 38) {
+          // 256-color / truecolor — skip the trailing args we don't render.
+          if (codes[i + 1] === 5) {
+            i += 2
+          } else if (codes[i + 1] === 2) {
+            i += 4
+          }
+        }
+        // Background colors (40-47, 100-107) and effects we don't render are
+        // intentionally ignored — the segment keeps the prior bold/fg state.
+      }
+    }
+
+    cursor = CSI_RE.lastIndex
+  }
+
+  if (cursor < cleaned.length) {
+    pushText(cleaned.slice(cursor))
+  }
+
+  return segments
+}
+
+const TAILWIND_BY_COLOR: Record<AnsiColor, string> = {
+  // Tuned for legibility against the muted bg-(--ui-bg-tertiary) surface used
+  // in tool cards. We don't paint pure ANSI colors (#000, #fff) because they
+  // disappear into the surface.
+  black: 'text-zinc-700 dark:text-zinc-300',
+  red: 'text-red-700 dark:text-red-300',
+  green: 'text-emerald-700 dark:text-emerald-300',
+  yellow: 'text-amber-700 dark:text-amber-300',
+  blue: 'text-blue-700 dark:text-blue-300',
+  magenta: 'text-fuchsia-700 dark:text-fuchsia-300',
+  cyan: 'text-cyan-700 dark:text-cyan-300',
+  white: 'text-zinc-600 dark:text-zinc-200',
+  'bright-black': 'text-zinc-500 dark:text-zinc-400',
+  'bright-red': 'text-rose-600 dark:text-rose-300',
+  'bright-green': 'text-emerald-600 dark:text-emerald-200',
+  'bright-yellow': 'text-amber-600 dark:text-amber-200',
+  'bright-blue': 'text-sky-600 dark:text-sky-300',
+  'bright-magenta': 'text-pink-600 dark:text-pink-300',
+  'bright-cyan': 'text-teal-600 dark:text-teal-200',
+  'bright-white': 'text-zinc-500 dark:text-zinc-100'
+}
+
+export function ansiColorClass(color: AnsiColor): string {
+  return TAILWIND_BY_COLOR[color]
+}
+
+/** Returns true if the input contains at least one CSI sequence. Cheap check
+ *  so callers can skip the parser for plain-ASCII output. */
+export function hasAnsiCodes(input: string): boolean {
+  // eslint-disable-next-line no-control-regex
+  return /\x1b\[/.test(input)
+}