@defrex/autobuild 0.8.0

package/packages/core/src/cli/dashboard/composer.ts

@@ -0,0 +1,230 @@
+/** Pure Unicode-aware text geometry for the dashboard's editable field. */
+import {
+  cellWidth,
+  displayGraphemes,
+  displayText,
+  graphemeBoundary,
+  graphemes,
+  splitCells,
+} from './cells'
+
+export { displayText } from './cells'
+
+/** Wrap prose in terminal cells without splitting a grapheme cluster. */
+export function wrapDisplay(value: string, width: number, indent = ''): string[] {
+  if (width <= 0) return []
+  const pad = cellWidth(indent) < width ? indent : ''
+  const budget = width - cellWidth(pad)
+  const rows: string[] = []
+
+  for (const paragraph of value.split(/\r?\n/)) {
+    const paragraphStart = rows.length
+    const tokens = displayText(paragraph)
+      .split(/\s+/u)
+      .filter((token) => token !== '')
+    if (tokens.length === 0) {
+      rows.push(pad)
+      continue
+    }
+
+    let line = ''
+    let used = 0
+    for (const token of tokens) {
+      const tokenWidth = cellWidth(token)
+      if (line !== '' && used + 1 + tokenWidth <= budget) {
+        line += ` ${token}`
+        used += 1 + tokenWidth
+        continue
+      }
+      if (line !== '') {
+        rows.push(`${pad}${line}`)
+        line = ''
+        used = 0
+      }
+      if (tokenWidth <= budget) {
+        line = token
+        used = tokenWidth
+        continue
+      }
+      const pieces = splitCells(token, budget)
+      for (const piece of pieces.slice(0, -1)) rows.push(`${pad}${piece}`)
+      line = pieces.at(-1) ?? ''
+      used = cellWidth(line)
+    }
+    if (line !== '') rows.push(`${pad}${line}`)
+    else if (rows.length === paragraphStart) rows.push(pad)
+  }
+  return rows
+}
+
+/** Pack labels atomically, dropping a label that cannot fit one row. */
+export function packAtomic(tokens: string[], width: number, separator = '  '): string[] {
+  if (width <= 0) return []
+  const rows: string[] = []
+  let line = ''
+  for (const token of tokens) {
+    if (cellWidth(token) > width) continue
+    if (line === '') {
+      line = token
+      continue
+    }
+    const candidate = `${line}${separator}${token}`
+    if (cellWidth(candidate) <= width) line = candidate
+    else {
+      rows.push(line)
+      line = token
+    }
+  }
+  if (line !== '') rows.push(line)
+  return rows
+}
+
+export interface ComposerLayout {
+  rows: string[]
+  cursorRow: number
+  /** Caret column in terminal display cells. */
+  cursorColumn: number
+  /** UTF-16 insertion offset within cursorRow. */
+  cursorOffset: number
+}
+
+export function composerBudget(width: number): number {
+  return Math.max(1, width - 1)
+}
+
+/** Wrap the original value and map a UTF-16 grapheme boundary to its caret. */
+export function layoutComposer(value: string, cursor: number, width: number): ComposerLayout {
+  const budget = composerBudget(width)
+  const rows: string[] = []
+  const positions = new Map<number, { row: number; column: number; offset: number }>()
+  let current = ''
+  let used = 0
+  positions.set(0, { row: 0, column: 0, offset: 0 })
+
+  for (const source of graphemes(value)) {
+    positions.set(source.start, { row: rows.length, column: used, offset: current.length })
+    if (source.text === '\n') {
+      rows.push(current)
+      current = ''
+      used = 0
+      positions.set(source.end, { row: rows.length, column: 0, offset: 0 })
+      continue
+    }
+
+    for (const displayed of displayGraphemes(source.text)) {
+      if (displayed.width > budget) continue
+      if (displayed.width > 0 && used + displayed.width > budget) {
+        rows.push(current)
+        current = ''
+        used = 0
+      }
+      current += displayed.text
+      used += displayed.width
+    }
+    positions.set(source.end, {
+      row: rows.length,
+      column: used,
+      offset: current.length,
+    })
+  }
+  rows.push(current)
+  const normalized = clampCursor(value, cursor)
+  const at = positions.get(normalized) ?? {
+    row: rows.length - 1,
+    column: used,
+    offset: current.length,
+  }
+  return {
+    rows,
+    cursorRow: at.row,
+    cursorColumn: at.column,
+    cursorOffset: at.offset,
+  }
+}
+
+/** Clamp to a UTF-16 offset that is also a whole-grapheme boundary. */
+export function clampCursor(value: string, cursor: number): number {
+  return graphemeBoundary(value, cursor)
+}
+
+export function insertText(
+  value: string,
+  cursor: number,
+  text: string,
+): { value: string; cursor: number } {
+  const at = clampCursor(value, cursor)
+  const next = `${value.slice(0, at)}${text}${value.slice(at)}`
+  const wanted = at + text.length
+  // Insertion can combine with a following mark and erase the exact boundary
+  // that used to follow the inserted bytes. In that case advance over the
+  // newly formed cluster rather than jumping the caret back before it.
+  const combined = graphemes(next).find((cluster) => cluster.start < wanted && wanted < cluster.end)
+  return { value: next, cursor: combined?.end ?? graphemeBoundary(next, wanted) }
+}
+
+export function deleteBefore(value: string, cursor: number): { value: string; cursor: number } {
+  const at = clampCursor(value, cursor)
+  if (at === 0) return { value, cursor: 0 }
+  const previous = graphemes(value).findLast((cluster) => cluster.end <= at)
+  if (previous === undefined) return { value, cursor: 0 }
+  return {
+    value: `${value.slice(0, previous.start)}${value.slice(at)}`,
+    cursor: previous.start,
+  }
+}
+
+export type ComposerMotion = 'left' | 'right' | 'up' | 'down' | 'home' | 'end'
+
+interface LogicalLine {
+  start: number
+  end: number
+  /** UTF-16 boundaries by grapheme column, including both line ends. */
+  boundaries: number[]
+}
+
+function logicalLines(value: string): LogicalLine[] {
+  const lines: LogicalLine[] = []
+  let start = 0
+  let boundaries = [0]
+  for (const cluster of graphemes(value)) {
+    if (cluster.text === '\n') {
+      lines.push({ start, end: cluster.start, boundaries })
+      start = cluster.end
+      boundaries = [start]
+    } else {
+      boundaries.push(cluster.end)
+    }
+  }
+  lines.push({ start, end: value.length, boundaries })
+  return lines
+}
+
+export function moveCursor(value: string, cursor: number, motion: ComposerMotion): number {
+  const clusters = graphemes(value)
+  const at = clampCursor(value, cursor)
+  const lines = logicalLines(value)
+  const lineIndex = lines.findLastIndex((line) => line.start <= at)
+  const line = lines[lineIndex]!
+  const column = Math.max(0, line.boundaries.indexOf(at))
+
+  switch (motion) {
+    case 'left':
+      return clusters.findLast((cluster) => cluster.end <= at)?.start ?? 0
+    case 'right':
+      return clusters.find((cluster) => cluster.start >= at)?.end ?? value.length
+    case 'home':
+      return line.start
+    case 'end':
+      return line.end
+    case 'up': {
+      if (lineIndex === 0) return 0
+      const target = lines[lineIndex - 1]!
+      return target.boundaries[Math.min(column, target.boundaries.length - 1)]!
+    }
+    case 'down': {
+      if (lineIndex === lines.length - 1) return value.length
+      const target = lines[lineIndex + 1]!
+      return target.boundaries[Math.min(column, target.boundaries.length - 1)]!
+    }
+  }
+}

package/packages/core/src/cli/dashboard/detail.ts

@@ -0,0 +1,100 @@
+import type { AbEvent } from '../../events/catalog'
+import type { StreamRecord } from '../../store/types'
+
+export interface SessionUsage {
+  inputTokens: number
+  outputTokens: number
+  turns: number
+}
+
+export interface DashboardSession {
+  id: string
+  role: string
+  phase: string
+  round?: number
+  runtime: string
+  model?: string
+  startedSeq: number
+  status: 'open' | 'ended' | 'reclaimed'
+  usage?: SessionUsage
+  transcript?: { kind: string; rev: number }
+  reclaimedBy?: { instance: string; resumedFromSeq: number }
+  /** Live-view stream id (SPEC §9); absent on sessions that never streamed. */
+  stream?: string
+  /** Open until the session's `session.ended` lands; the store's records
+   * refine this to the stream's authoritative status when available. */
+  streamStatus: 'open' | 'closed'
+}
+
+/**
+ * Display-only chronological session history. The lifecycle reducer retains
+ * only open sessions; the dashboard needs both halves, so it pairs the raw
+ * append-only facts without introducing transition state. `streams` is the
+ * optional authoritative enrichment from `listStreams` on the build scope:
+ * records whose label matches `session:<id>` supply each session's stream id
+ * and open/closed status.
+ */
+export function projectSessions(
+  events: readonly AbEvent[],
+  streams?: readonly StreamRecord[],
+): DashboardSession[] {
+  const streamsByLabel = new Map<string, StreamRecord>()
+  if (streams !== undefined) {
+    for (const record of streams) {
+      if (record.scope.kind === 'build') streamsByLabel.set(record.label, record)
+    }
+  }
+
+  const sessions: DashboardSession[] = []
+  const open = new Map<string, DashboardSession>()
+
+  for (const event of events) {
+    if (event.type === 'session.started') {
+      const record = streamsByLabel.get(`session:${event.payload.session}`)
+      const session: DashboardSession = {
+        id: event.payload.session,
+        role: event.payload.role,
+        phase: event.payload.phase,
+        ...(event.payload.round !== undefined ? { round: event.payload.round } : {}),
+        runtime: event.payload.runner,
+        ...(event.payload.model !== undefined ? { model: event.payload.model } : {}),
+        startedSeq: event.seq,
+        status: 'open',
+        // The store's records are authoritative when available; without them
+        // the pairing degrades gracefully (open until `session.ended`).
+        ...(record !== undefined
+          ? { stream: record.id, streamStatus: record.status }
+          : {
+              ...(event.payload.stream !== undefined ? { stream: event.payload.stream } : {}),
+              streamStatus: event.payload.stream !== undefined ? 'open' : 'closed',
+            }),
+      }
+      sessions.push(session)
+      open.set(session.id, session)
+      continue
+    }
+    if (event.type !== 'session.ended') continue
+    const started = open.get(event.payload.session)
+    if (started === undefined) continue
+    if ('transcript' in event.payload) {
+      started.status = 'ended'
+      started.usage = { ...event.payload.usage }
+      started.transcript = { ...event.payload.transcript }
+    } else {
+      started.status = 'reclaimed'
+      started.reclaimedBy = { ...event.payload.reclaimedBy }
+    }
+    // A session bracket has ended: without an authoritative record its
+    // stream reads closed.
+    const record = streamsByLabel.get(`session:${started.id}`)
+    if (record !== undefined) {
+      started.stream = record.id
+      started.streamStatus = record.status
+    } else {
+      started.streamStatus = 'closed'
+    }
+    open.delete(started.id)
+  }
+
+  return sessions
+}

package/packages/core/src/cli/dashboard/frame-image.ts

@@ -0,0 +1,373 @@
+import { readdirSync } from 'node:fs'
+import { createRequire } from 'node:module'
+import { dirname, join } from 'node:path'
+import { Resvg } from '@resvg/resvg-js'
+import { distributionPath } from '../../distribution'
+import { graphemes } from './cells'
+
+/**
+ * Deterministic dashboard-frame rendering.
+ *
+ * The dashboard deliberately emits a tiny terminal vocabulary: SGR reset,
+ * bold/dim and six named foreground colours, plus OSC 8 hyperlinks. This
+ * adapter accepts exactly that vocabulary. Unknown control traffic is an
+ * error rather than evidence that merely looks plausible after bytes were
+ * dropped.
+ */
+
+const ESC = '\x1b'
+const BEL = '\x07'
+const FONT_FAMILY = 'DejaVu Sans Mono'
+const FONT_FAMILIES = [
+  FONT_FAMILY,
+  'Dashboard CJK 113',
+  'Dashboard CJK 117',
+  'Dashboard CJK 118',
+  'Dashboard Emoji Flags',
+  'Dashboard Emoji Food',
+  'Dashboard Emoji People',
+].join(', ')
+const FONT_SIZE = 16
+const CELL_WIDTH = 10
+const LINE_HEIGHT = 20
+const PADDING_X = 12
+const PADDING_Y = 10
+const BASELINE = 16
+const EMOJI_CLUSTER = /\p{Extended_Pictographic}|\p{Regional_Indicator}/u
+
+const PALETTE = {
+  background: '#0d1117',
+  foreground: '#c9d1d9',
+  red: '#ff7b72',
+  green: '#3fb950',
+  yellow: '#d29922',
+  blue: '#58a6ff',
+  cyan: '#39c5cf',
+} as const
+
+type Foreground = Exclude<keyof typeof PALETTE, 'background'>
+
+interface Style {
+  foreground: Foreground
+  bold: boolean
+  dim: boolean
+  href?: string
+}
+
+interface TextRun {
+  column: number
+  cells: number
+  text: string
+  style: Style
+}
+
+interface ParsedLine {
+  text: string
+  cells: number
+  runs: TextRun[]
+}
+
+export interface FrameImageOptions {
+  /** Declared terminal width. Every parsed line must fit this grid. */
+  columns: number
+}
+
+export interface RenderedFrameImage {
+  /** ANSI/OSC-free text from the exact parsed cells, with a final newline. */
+  text: string
+  svg: string
+  png: Uint8Array
+  width: number
+  height: number
+  rows: number
+  columns: number
+}
+
+function cloneStyle(style: Style): Style {
+  return {
+    foreground: style.foreground,
+    bold: style.bold,
+    dim: style.dim,
+    ...(style.href !== undefined ? { href: style.href } : {}),
+  }
+}
+
+function sameStyle(left: Style, right: Style): boolean {
+  return (
+    left.foreground === right.foreground &&
+    left.bold === right.bold &&
+    left.dim === right.dim &&
+    left.href === right.href
+  )
+}
+
+function applySgr(style: Style, raw: string, line: number): void {
+  const codes = raw === '' ? [0] : raw.split(';').map((part) => Number(part))
+  if (codes.some((code) => !Number.isInteger(code))) {
+    throw new Error(`dashboard frame line ${line}: malformed SGR sequence ESC[${raw}m`)
+  }
+  for (const code of codes) {
+    switch (code) {
+      case 0:
+        style.foreground = 'foreground'
+        style.bold = false
+        style.dim = false
+        break
+      case 1:
+        style.bold = true
+        break
+      case 2:
+        style.dim = true
+        break
+      case 22:
+        style.bold = false
+        style.dim = false
+        break
+      case 31:
+        style.foreground = 'red'
+        break
+      case 32:
+        style.foreground = 'green'
+        break
+      case 33:
+        style.foreground = 'yellow'
+        break
+      case 34:
+        style.foreground = 'blue'
+        break
+      case 36:
+        style.foreground = 'cyan'
+        break
+      case 39:
+        style.foreground = 'foreground'
+        break
+      default:
+        throw new Error(`dashboard frame line ${line}: unsupported SGR code ${code} in ESC[${raw}m`)
+    }
+  }
+}
+
+function parseLine(value: string, lineNumber: number): ParsedLine {
+  const style: Style = {
+    foreground: 'foreground',
+    bold: false,
+    dim: false,
+  }
+  const runs: TextRun[] = []
+  let text = ''
+  let cells = 0
+
+  const append = (cluster: string, width: number): void => {
+    const previous = runs.at(-1)
+    // ASCII runs may coalesce. Unicode clusters stay independently pinned to
+    // their terminal cell columns so font fallback/advance cannot shift the
+    // run that follows a wide glyph.
+    if (
+      previous !== undefined &&
+      previous.column + previous.cells === cells &&
+      /^[\x20-\x7e]*$/.test(previous.text) &&
+      /^[\x20-\x7e]$/.test(cluster) &&
+      sameStyle(previous.style, style)
+    ) {
+      previous.text += cluster
+      previous.cells += width
+    } else {
+      runs.push({ column: cells, cells: width, text: cluster, style: cloneStyle(style) })
+    }
+    text += cluster
+    cells += width
+  }
+
+  for (let index = 0; index < value.length; ) {
+    if (value[index] === ESC) {
+      const family = value[index + 1]
+      if (family === '[') {
+        const rest = value.slice(index + 2)
+        const match = /^([0-9;]*)m/.exec(rest)
+        if (match === null) {
+          throw new Error(
+            `dashboard frame line ${lineNumber}: unsupported or unterminated CSI sequence`,
+          )
+        }
+        applySgr(style, match[1]!, lineNumber)
+        index += 2 + match[0].length
+        continue
+      }
+      if (family === ']') {
+        const end = value.indexOf(BEL, index + 2)
+        if (end === -1) {
+          throw new Error(`dashboard frame line ${lineNumber}: unterminated OSC sequence`)
+        }
+        const payload = value.slice(index + 2, end)
+        const match = /^8;;(.*)$/.exec(payload)
+        if (match === null) {
+          throw new Error(
+            `dashboard frame line ${lineNumber}: unsupported OSC sequence ${JSON.stringify(payload)}`,
+          )
+        }
+        const href = match[1]!
+        style.href = href === '' ? undefined : href
+        index = end + 1
+        continue
+      }
+      throw new Error(
+        `dashboard frame line ${lineNumber}: unsupported escape family ${JSON.stringify(family ?? '')}`,
+      )
+    }
+
+    const nextEscape = value.indexOf(ESC, index)
+    const stop = nextEscape === -1 ? value.length : nextEscape
+    const plain = value.slice(index, stop)
+    for (const character of plain) {
+      const code = character.codePointAt(0)!
+      if (code < 0x20 || code === 0x7f || (code >= 0x80 && code <= 0x9f)) {
+        throw new Error(
+          `dashboard frame line ${lineNumber}: unsupported control U+${code
+            .toString(16)
+            .toUpperCase()
+            .padStart(4, '0')}`,
+        )
+      }
+    }
+    for (const cluster of graphemes(plain)) append(cluster.text, cluster.width)
+    index = stop
+  }
+
+  if (style.href !== undefined) {
+    throw new Error(`dashboard frame line ${lineNumber}: OSC 8 hyperlink was not closed`)
+  }
+  if (style.foreground !== 'foreground' || style.bold || style.dim) {
+    throw new Error(
+      `dashboard frame line ${lineNumber}: SGR style was not reset before end of line`,
+    )
+  }
+  return { text, cells, runs }
+}
+
+function xml(value: string): string {
+  return value
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&apos;')
+}
+
+function svgFor(
+  parsed: ParsedLine[],
+  columns: number,
+): {
+  svg: string
+  width: number
+  height: number
+} {
+  const width = PADDING_X * 2 + columns * CELL_WIDTH
+  const height = PADDING_Y * 2 + Math.max(1, parsed.length) * LINE_HEIGHT
+  const content: string[] = []
+
+  for (const [row, line] of parsed.entries()) {
+    for (const run of line.runs) {
+      const x = PADDING_X + run.column * CELL_WIDTH
+      const y = PADDING_Y + BASELINE + row * LINE_HEIGHT
+      const opacity = run.style.dim ? ' fill-opacity="0.58"' : ''
+      const weight = run.style.bold ? ' font-weight="700"' : ' font-weight="400"'
+      // DejaVu's native advance is slightly narrower than the 10 px evidence
+      // grid. Fit coalesced ASCII runs to their exact terminal cells so the
+      // error cannot accumulate into a visible gap before a pinned Unicode
+      // cluster. Emoji get the same exact fit at a slightly larger size: the
+      // monochrome fallback remains readable without crossing its cell range.
+      const emoji = EMOJI_CLUSTER.test(run.text)
+      const geometry =
+        /^[\x20-\x7e]+$/.test(run.text) || emoji
+          ? ` textLength="${run.cells * CELL_WIDTH}" lengthAdjust="spacingAndGlyphs"`
+          : ''
+      const size = emoji ? ' font-size="18"' : ''
+      const node =
+        `<text x="${x}" y="${y}" fill="${PALETTE[run.style.foreground]}"` +
+        `${weight}${opacity}${geometry}${size}>${xml(run.text)}</text>`
+      content.push(
+        run.style.href === undefined ? node : `<a href="${xml(run.style.href)}">${node}</a>`,
+      )
+    }
+  }
+
+  return {
+    width,
+    height,
+    svg: [
+      `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">`,
+      `<rect width="${width}" height="${height}" fill="${PALETTE.background}"/>`,
+      `<g font-family="${FONT_FAMILIES}" font-size="${FONT_SIZE}" xml:space="preserve" text-rendering="geometricPrecision">`,
+      ...content,
+      '</g>',
+      '</svg>',
+    ].join(''),
+  }
+}
+
+function fontFiles(): string[] {
+  const require = createRequire(import.meta.url)
+  const root = dirname(require.resolve('dejavu-fonts-ttf/package.json'))
+  const fallbacks = distributionPath('tools', 'fonts')
+  return [
+    join(root, 'ttf', 'DejaVuSansMono.ttf'),
+    join(root, 'ttf', 'DejaVuSansMono-Bold.ttf'),
+    ...readdirSync(fallbacks)
+      .filter((name) => name.endsWith('.ttf'))
+      .sort()
+      .map((name) => join(fallbacks, name)),
+  ]
+}
+
+/** Parse once, then derive both evidence forms from the same exact cells. */
+export function renderDashboardFrameImage(
+  lines: readonly string[],
+  options: FrameImageOptions,
+): RenderedFrameImage {
+  if (!Number.isInteger(options.columns) || options.columns <= 0) {
+    throw new Error(`dashboard frame columns must be a positive integer, got ${options.columns}`)
+  }
+  if (lines.length === 0) {
+    throw new Error('dashboard frame is empty')
+  }
+  const parsed = lines.map((line, index) => parseLine(line, index + 1))
+  for (const [index, line] of parsed.entries()) {
+    if (line.cells > options.columns) {
+      throw new Error(
+        `dashboard frame line ${index + 1} is ${line.cells} cells wide, exceeding declared terminal width ${options.columns}`,
+      )
+    }
+  }
+
+  const { svg, width, height } = svgFor(parsed, options.columns)
+  const rendered = new Resvg(svg, {
+    fitTo: { mode: 'original' },
+    background: PALETTE.background,
+    font: {
+      fontFiles: fontFiles(),
+      loadSystemFonts: false,
+      defaultFontFamily: FONT_FAMILY,
+      monospaceFamily: FONT_FAMILY,
+      defaultFontSize: FONT_SIZE,
+    },
+    shapeRendering: 2,
+    textRendering: 2,
+    imageRendering: 0,
+    logLevel: 'off',
+  }).render()
+  if (rendered.width !== width || rendered.height !== height) {
+    throw new Error(
+      `dashboard PNG dimensions ${rendered.width}x${rendered.height} did not match SVG ${width}x${height}`,
+    )
+  }
+
+  return {
+    text: `${parsed.map((line) => line.text).join('\n')}\n`,
+    svg,
+    png: new Uint8Array(rendered.asPng()),
+    width,
+    height,
+    rows: lines.length,
+    columns: options.columns,
+  }
+}