@crab-dev/wake 0.1.19 → 0.1.20

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.1.20
+
+- Added a modern interactive terminal console with editable commands, history, Unicode-aware selection, clipboard copy and paste, and safe development-server opening across Rust and npm CLIs.
+- Added source-located compiler diagnostics with numbered code frames across Rust and npm build, bundle, watch, and development terminals.
+- Added binding-aware Crab CSS semantic values, scoped automatic property and value completions, and deterministic suggestion ranking in the VS Code language service.
+- Made Wake Docs accent colors optional and confined accent-derived component tokens to Demo previews without rewriting global workbench semantics.
+- Preserved side effects inside `void` expressions during minification so editor and application commands cannot be deleted.
+
 ## 0.1.19
 
 - Fixed preserve-module CommonJS output so every generated file defines the default and namespace interop helpers it uses.

package/README.md

@@ -3,6 +3,15 @@
 Wake is a Rust-native web builder exposed as both a Node.js library and the
 `wake` command.
 
+Interactive `dev` and `docs dev` sessions use the full-screen TUI when stdin
+and stderr are terminals. The command line accepts `help`, `clear`, `open`,
+and `quit` (with optional `/` prefixes), keeps in-memory history, supports
+paste, and copies mouse-selected screen text to the clipboard. Use
+`--ui plain` for stable non-interactive logs; Ctrl-C always interrupts.
+Compiler failures include `path:line:column`, a numbered source line, and a caret when the diagnostic
+has a valid source span. The same structured location is available from Node build errors and server
+`diagnostic` events.
+
 ```sh
 npm install --save-dev @crab-dev/wake
 npx wake build

package/bin/console.mjs

@@ -0,0 +1,247 @@
+import { StringDecoder } from 'node:string_decoder'
+import stringWidth from 'string-width'
+
+const segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' })
+const MAX_INPUT = 4096
+const MAX_HISTORY = 50
+
+export function graphemes(value) {
+  return [...segmenter.segment(String(value))].map((part) => part.segment)
+}
+
+export function parseConsoleCommand(value) {
+  const original = String(value).trim()
+  if (!original) throw new Error('Enter a command. Type help to list available commands.')
+  const normalized = (original.startsWith('/') ? original.slice(1) : original).toLowerCase()
+  if (normalized === 'help') return 'help'
+  if (normalized === 'clear') return 'clear'
+  if (normalized === 'open') return 'open'
+  if (normalized === 'quit' || normalized === 'q') return 'quit'
+  throw new Error(`Unknown command: ${original}. Type help for available commands.`)
+}
+
+export class InputEditor {
+  constructor() {
+    this.value = ''
+    this.cursor = 0
+    this.history = []
+    this.historyIndex = undefined
+    this.draft = ''
+  }
+
+  clear() {
+    this.value = ''
+    this.cursor = 0
+    this.historyIndex = undefined
+    this.draft = ''
+  }
+
+  insert(value) {
+    const current = graphemes(this.value)
+    const addition = graphemes(value).slice(0, Math.max(0, MAX_INPUT - current.length))
+    current.splice(this.cursor, 0, ...addition)
+    this.value = current.join('')
+    this.cursor += addition.length
+    this.historyIndex = undefined
+  }
+
+  insertPaste(value) {
+    this.insert(String(value).replace(/[\r\n\t\u0000-\u0008\u000b\u000c\u000e-\u001f\u007f]/g, ' '))
+  }
+
+  moveLeft() { this.cursor = Math.max(0, this.cursor - 1) }
+  moveRight() { this.cursor = Math.min(graphemes(this.value).length, this.cursor + 1) }
+  moveHome() { this.cursor = 0 }
+  moveEnd() { this.cursor = graphemes(this.value).length }
+
+  backspace() {
+    if (this.cursor === 0) return
+    const values = graphemes(this.value)
+    values.splice(this.cursor - 1, 1)
+    this.value = values.join('')
+    this.cursor -= 1
+  }
+
+  delete() {
+    const values = graphemes(this.value)
+    if (this.cursor >= values.length) return
+    values.splice(this.cursor, 1)
+    this.value = values.join('')
+  }
+
+  historyPrevious() {
+    if (this.history.length === 0) return
+    if (this.historyIndex === undefined) {
+      this.draft = this.value
+      this.historyIndex = this.history.length - 1
+    } else {
+      this.historyIndex = Math.max(0, this.historyIndex - 1)
+    }
+    this.value = this.history[this.historyIndex]
+    this.moveEnd()
+  }
+
+  historyNext() {
+    if (this.historyIndex === undefined) return
+    if (this.historyIndex + 1 < this.history.length) {
+      this.historyIndex += 1
+      this.value = this.history[this.historyIndex]
+    } else {
+      this.historyIndex = undefined
+      this.value = this.draft
+      this.draft = ''
+    }
+    this.moveEnd()
+  }
+
+  submit() {
+    const submitted = this.value.trim()
+    let result
+    try {
+      result = { command: parseConsoleCommand(submitted) }
+    } catch (error) {
+      result = { error: error.message }
+    }
+    if (submitted && this.history.at(-1) !== submitted) {
+      this.history.push(submitted)
+      if (this.history.length > MAX_HISTORY) this.history.shift()
+    }
+    this.clear()
+    return result
+  }
+
+  cursorCell() {
+    return graphemes(this.value).slice(0, this.cursor).reduce((sum, value) => sum + stringWidth(value), 0)
+  }
+
+  setCursorFromCell(cell) {
+    let width = 0
+    let cursor = 0
+    for (const value of graphemes(this.value)) {
+      const next = width + stringWidth(value)
+      if (cell < next) break
+      width = next
+      cursor += 1
+    }
+    this.cursor = cursor
+  }
+
+  visible(width) {
+    if (width <= 0) return { text: '', cursor: 0 }
+    const cursor = this.cursorCell()
+    const start = cursor >= width ? cursor + 1 - width : 0
+    let position = 0
+    let text = ''
+    for (const value of graphemes(this.value)) {
+      const next = position + stringWidth(value)
+      if (next > start && position < start + width) text += value
+      position = next
+      if (position >= start + width) break
+    }
+    return { text, cursor: Math.min(width, Math.max(0, cursor - start)) }
+  }
+}
+
+export function lineToCells(value, width) {
+  const cells = []
+  for (const valuePart of graphemes(value)) {
+    const cellWidth = Math.max(0, stringWidth(valuePart))
+    if (cells.length + cellWidth > width) break
+    cells.push(valuePart)
+    for (let index = 1; index < cellWidth; index += 1) cells.push('')
+  }
+  while (cells.length < width) cells.push(' ')
+  return cells.slice(0, width)
+}
+
+function orderedSelection(selection) {
+  const forward = selection.start.y < selection.end.y
+    || (selection.start.y === selection.end.y && selection.start.x <= selection.end.x)
+  return forward ? [selection.start, selection.end] : [selection.end, selection.start]
+}
+
+export function selectionContains(selection, x, y) {
+  if (!selection) return false
+  const [start, end] = orderedSelection(selection)
+  if (y < start.y || y > end.y) return false
+  return (y !== start.y || x >= start.x) && (y !== end.y || x <= end.x)
+}
+
+export function extractSelection(rows, selection) {
+  if (!selection || (selection.start.x === selection.end.x && selection.start.y === selection.end.y)) return ''
+  const [start, end] = orderedSelection(selection)
+  const lines = []
+  for (let y = start.y; y <= Math.min(end.y, rows.length - 1); y += 1) {
+    const row = rows[y] || []
+    const from = y === start.y ? start.x : 0
+    const to = y === end.y ? Math.min(end.x, row.length - 1) : row.length - 1
+    lines.push(row.slice(from, to + 1).join('').replace(/ +$/u, ''))
+  }
+  return lines.join('\n').replace(/\n+$/u, '')
+}
+
+const KEY_SEQUENCES = new Map([
+  ['\x1b[A', 'up'], ['\x1b[B', 'down'], ['\x1b[C', 'right'], ['\x1b[D', 'left'],
+  ['\x1bOA', 'up'], ['\x1bOB', 'down'], ['\x1bOC', 'right'], ['\x1bOD', 'left'],
+  ['\x1b[H', 'home'], ['\x1b[F', 'end'], ['\x1b[1~', 'home'], ['\x1b[4~', 'end'],
+  ['\x1bOH', 'home'], ['\x1bOF', 'end'],
+  ['\x1b[3~', 'delete'], ['\x1b[5~', 'pageup'], ['\x1b[6~', 'pagedown'],
+  ['\x1b[1;5F', 'ctrl-end'],
+])
+
+export class TerminalInputDecoder {
+  constructor() {
+    this.decoder = new StringDecoder('utf8')
+    this.buffer = ''
+    this.paste = false
+  }
+
+  push(chunk) {
+    this.buffer += this.decoder.write(Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk))
+    const events = []
+    while (this.buffer) {
+      if (this.paste) {
+        const end = this.buffer.indexOf('\x1b[201~')
+        if (end === -1) break
+        events.push({ type: 'paste', value: this.buffer.slice(0, end) })
+        this.buffer = this.buffer.slice(end + 6)
+        this.paste = false
+        continue
+      }
+      if (this.buffer.startsWith('\x1b[200~')) {
+        this.buffer = this.buffer.slice(6)
+        this.paste = true
+        continue
+      }
+      const mouse = /^\x1b\[<(\d+);(\d+);(\d+)([mM])/.exec(this.buffer)
+      if (mouse) {
+        const code = Number(mouse[1])
+        const suffix = mouse[4]
+        let kind = 'down'
+        let button = ['left', 'middle', 'right'][code & 3] || 'left'
+        if ((code & 64) !== 0) kind = (code & 1) === 0 ? 'scroll-up' : 'scroll-down'
+        else if ((code & 32) !== 0) kind = 'drag'
+        else if (suffix === 'm') kind = 'up'
+        events.push({ type: 'mouse', kind, button, x: Number(mouse[2]) - 1, y: Number(mouse[3]) - 1 })
+        this.buffer = this.buffer.slice(mouse[0].length)
+        continue
+      }
+      const matched = [...KEY_SEQUENCES].find(([sequence]) => this.buffer.startsWith(sequence))
+      if (matched) {
+        events.push({ type: 'key', key: matched[1] })
+        this.buffer = this.buffer.slice(matched[0].length)
+        continue
+      }
+      if (this.buffer.startsWith('\x1b') && [...KEY_SEQUENCES.keys(), '\x1b[200~', '\x1b[<'].some((value) => value.startsWith(this.buffer))) break
+      const first = this.buffer.codePointAt(0)
+      const value = String.fromCodePoint(first)
+      this.buffer = this.buffer.slice(value.length)
+      const control = {
+        '\u0003': 'ctrl-c', '\u0019': 'ctrl-y', '\u0016': 'ctrl-v', '\r': 'enter', '\n': 'enter',
+        '\u007f': 'backspace', '\u0008': 'backspace', '\u001b': 'escape',
+      }[value]
+      events.push(control ? { type: 'key', key: control } : { type: 'text', value })
+    }
+    return events
+  }
+}

package/bin/terminal.mjs

@@ -1,3 +1,15 @@
+import clipboard from 'clipboardy'
+import open from 'open'
+import stringWidth from 'string-width'
+
+import {
+  InputEditor,
+  TerminalInputDecoder,
+  extractSelection,
+  lineToCells,
+  selectionContains,
+} from './console.mjs'
+
 const RESET = '\x1b[0m'
 const BOLD = '\x1b[1m'
 const DIM = '\x1b[2m'
@@ -81,7 +93,7 @@ export function formatBuildResult(ui, result, label = 'Built', extra = '') {
   ]
   if (result.outputDir) lines.push(`     ${ui.dim('Output')}  ${ui.accent(result.outputDir)}`)
   for (const diagnostic of result.diagnostics || []) {
-    lines.push(`     ${ui.warn(String(diagnostic.severity || 'warning').toUpperCase())}  ${diagnostic.message}`)
+    lines.push(...formatDiagnostic(ui, diagnostic).map((line) => `     ${line}`))
   }
   lines.push('')
   return lines
@@ -119,16 +131,69 @@ export function formatError(ui, error) {
   ]
   if (error?.path) lines.push(`     ${ui.dim('Path')}  ${ui.accent(error.path)}`)
   for (const diagnostic of error?.diagnostics || []) {
-    const diagnosticCode = diagnostic.code ? `[${diagnostic.code}] ` : ''
-    lines.push(
-      `     ${ui.warn(String(diagnostic.severity || 'error').toUpperCase())}  ${diagnosticCode}${diagnostic.message}`,
-    )
-    for (const note of diagnostic.notes || []) lines.push(`        ${ui.dim('·')} ${note}`)
+    lines.push(...formatDiagnostic(ui, diagnostic).map((line) => `     ${line}`))
   }
   lines.push('')
   return lines
 }
 
+export function formatDiagnostic(ui, diagnostic) {
+  const severity = String(diagnostic?.severity || 'error').toUpperCase()
+  const heading = diagnostic?.code
+    ? `${severity} [${diagnostic.code}]: ${diagnostic.message}`
+    : `${severity}: ${diagnostic?.message || ''}`
+  const lines = [
+    diagnostic?.severity === 'warning'
+      ? ui.warn(heading)
+      : diagnostic?.severity === 'error'
+        ? ui.error(heading)
+        : ui.accent(heading),
+  ]
+  const location = diagnostic?.location
+  if (diagnostic?.path && location) {
+    lines.push(` ${ui.dim('-->')} ${ui.accent(diagnostic.path)}:${location.line}:${location.column}`)
+  } else if (diagnostic?.path) {
+    lines.push(` ${ui.dim('-->')} ${ui.accent(diagnostic.path)}`)
+  }
+  if (location) {
+    const lineText = expandTabs(String(location.lineText || ''))
+    const gutter = String(location.line).length
+    const start = displayColumn(String(location.lineText || ''), location.column)
+    const end = location.endLine === location.line
+      ? displayColumn(String(location.lineText || ''), location.endColumn)
+      : stringWidth(lineText)
+    const width = Math.max(1, end - start)
+    const label = location.label ? ` ${location.label}` : ''
+    lines.push(`${' '.repeat(gutter)} ${ui.dim('|')}`)
+    lines.push(`${String(location.line).padStart(gutter)} ${ui.dim('|')} ${lineText}`)
+    lines.push(`${' '.repeat(gutter)} ${ui.dim('|')} ${ui.error(`${' '.repeat(start)}${'^'.repeat(width)}${label}`)}`)
+  }
+  for (const note of diagnostic?.notes || []) lines.push(`  ${ui.dim('=')} note: ${note}`)
+  return lines
+}
+
+function displayColumn(line, oneBasedColumn) {
+  const prefix = [...line].slice(0, Math.max(0, Number(oneBasedColumn || 1) - 1)).join('')
+  return stringWidth(expandTabs(prefix))
+}
+
+function expandTabs(line) {
+  const tabStop = 4
+  let width = 0
+  let value = ''
+  for (const character of line) {
+    if (character === '\t') {
+      const spaces = tabStop - (width % tabStop)
+      value += ' '.repeat(spaces)
+      width += spaces
+    } else {
+      value += character
+      width += stringWidth(character)
+    }
+  }
+  return value
+}
+
 export function formatFinalSummary(ui, state, reason, label = 'Server stopped') {
   const lines = [
     '',
@@ -161,8 +226,9 @@ export function observeServer(server, ui, output = console) {
     )
   }
   const onDiagnostic = (diagnostic) => {
-    const code = diagnostic.code ? `[${diagnostic.code}] ` : ''
-    output.error(`  ${ui.error('✗')}  ${ui.bold('Build failed')}  ${code}${diagnostic.message}`)
+    for (const [index, line] of formatDiagnostic(ui, diagnostic).entries()) {
+      output.error(index === 0 ? `  ${ui.error('✗')}  ${ui.bold(line)}` : `     ${line}`)
+    }
   }
 
   server.on('rebuildStart', onRebuildStart)
@@ -240,7 +306,7 @@ export function applyDashboardEvent(state, event) {
     )
   } else if (event.type === 'diagnostic') {
     state.status = 'error'
-    pushActivity(state, 'error', event.message)
+    pushActivity(state, 'error', formatDiagnostic(createUi(false), event.diagnostic).join('\n'))
   } else if (event.type === 'closed') {
     state.status = 'stopped'
     pushActivity(state, 'info', 'Wake stopped')
@@ -286,14 +352,19 @@ function elapsedStamp(durationMs) {
 }
 
 function charLength(text) {
-  return [...stripAnsi(String(text))].length
+  return stringWidth(stripAnsi(String(text)))
 }
 
 function truncate(text, width) {
   const chars = [...String(text)]
-  if (chars.length <= width) return String(text)
+  if (charLength(text) <= width) return String(text)
   if (width <= 1) return chars.slice(0, width).join('')
-  return `${chars.slice(0, width - 1).join('')}…`
+  let value = ''
+  for (const character of chars) {
+    if (charLength(value + character) > width - 1) break
+    value += character
+  }
+  return `${value}…`
 }
 
 function pad(text, width) {
@@ -330,15 +401,22 @@ function metricsText(state) {
 }
 
 function activityRows(state, available) {
-  const end = Math.max(0, state.activity.length - state.scrollFromBottom)
-  const start = Math.max(0, end - Math.max(1, available))
-  return state.activity.slice(start, end).map((item) => {
+  const rows = state.activity.flatMap((item) => {
     const symbol = { info: '·', success: '✓', warning: '↻', error: '✗' }[item.level]
-    return `${elapsedStamp(item.elapsedMs)}  ${symbol} ${String(item.message).replaceAll('\n', ' ')}`
+    return String(item.message).split('\n').map((line, index) => index === 0
+      ? `${elapsedStamp(item.elapsedMs)}  ${symbol} ${line}`
+      : `          ${line}`)
   })
+  const end = Math.max(0, rows.length - state.scrollFromBottom)
+  const start = Math.max(0, end - Math.max(1, available))
+  return rows.slice(start, end)
 }
 
-function plainFrame(state, width, height) {
+function activityRowCount(state) {
+  return state.activity.reduce((count, item) => count + String(item.message).split('\n').length, 0)
+}
+
+function plainFrame(state, width, height, editor = new InputEditor(), notice) {
   width = Math.max(10, width || 80)
   height = Math.max(6, height || 24)
   const runtime = humanRuntime(Date.now() - state.startedAt)
@@ -348,13 +426,13 @@ function plainFrame(state, width, height) {
   let activityHeight
 
   if (width < 60 || height < 14) {
-    fixed = [
-      topBorder(state, width),
-      boxLine(header, width),
-      boxLine(state.endpoint || state.watchLabel, width),
-      boxLine(state.activity.at(-1)?.message || 'Starting Wake…', width),
-      boxLine('Resize for details · q/Ctrl-C quit', width),
-    ]
+    const latest = String(state.activity.at(-1)?.message || 'Starting Wake…').split('\n')
+    fixed = [topBorder(state, width), boxLine(header, width)]
+    const diagnosticRows = latest.length > 1
+    for (const line of latest.slice(0, Math.max(1, height - (diagnosticRows ? 5 : 6)))) {
+      fixed.push(boxLine(line, width))
+    }
+    if (!diagnosticRows) fixed.push(boxLine('Resize for details · type help for commands', width))
     activityHeight = 0
   } else if (width < 80 || height < 20) {
     fixed = [
@@ -381,10 +459,18 @@ function plainFrame(state, width, height) {
   }
 
   for (const row of activityRows(state, activityHeight)) fixed.push(boxLine(row, width))
-  while (activityHeight > 0 && fixed.length < height - 2) fixed.push(boxLine('', width))
-  if (height >= 14) fixed.push(boxLine('↑↓/PgUp/PgDn scroll · End follow · c clear · q/Ctrl-C quit', width))
+  while (fixed.length < height - 3) fixed.push(boxLine('', width))
+  fixed.splice(Math.max(0, height - 3))
+  const visible = editor.visible(Math.max(0, width - 6))
+  fixed.push(boxLine(
+    notice
+      ? `${notice.error ? '✗' : '✓'} ${notice.message}`
+      : 'Enter command · PgUp/PgDn logs · drag to copy · Ctrl-C quit',
+    width,
+  ))
+  fixed.push(boxLine(`› ${visible.text}`, width))
   fixed.push(bottomBorder(width))
-  return fixed.slice(0, height)
+  return { lines: fixed.slice(0, height), cursor: visible.cursor }
 }
 
 function colorizeLine(line, ui) {
@@ -398,16 +484,67 @@ function colorizeLine(line, ui) {
   return value
 }
 
+function renderDashboardFrame(
+  state,
+  width = 80,
+  height = 24,
+  ui = createUi(false),
+  editor = new InputEditor(),
+  selection,
+  notice,
+) {
+  const frame = plainFrame(state, width, height, editor, notice)
+  const rows = frame.lines.map((line) => lineToCells(line, width))
+  const rendered = rows.map((cells, y) => {
+    let selected = false
+    let line = ''
+    for (let x = 0; x < cells.length; x += 1) {
+      const nextSelected = selectionContains(selection, x, y)
+      if (nextSelected !== selected) {
+        line += nextSelected ? '\x1b[7m' : RESET
+        selected = nextSelected
+      }
+      line += cells[x]
+    }
+    if (selected) line += RESET
+    return colorizeLine(line, ui)
+  })
+  return {
+    text: rendered.join('\n'),
+    rows,
+    inputY: Math.max(0, rows.length - 2),
+    inputX: 4,
+    cursorX: Math.min(width - 2, 4 + frame.cursor),
+  }
+}
+
 export function renderDashboard(state, width = 80, height = 24, ui = createUi(false)) {
-  return plainFrame(state, width, height).map((line) => colorizeLine(line, ui)).join('\n')
+  return renderDashboardFrame(state, width, height, ui).text
 }
 
 export function createDashboardSession(
   state,
-  { input = process.stdin, output = process.stderr, ui = createUi() } = {},
+  {
+    input = process.stdin,
+    output = process.stderr,
+    ui = createUi(),
+    clipboardAdapter = clipboard,
+    openUrl = open,
+    env = process.env,
+  } = {},
 ) {
   let closed = false
   let previousRaw = false
+  const editor = new InputEditor()
+  const decoder = new TerminalInputDecoder()
+  let rows = []
+  let inputY = 0
+  let inputX = 0
+  let selection
+  let dragStart
+  let lastSelection = ''
+  let notice
+  let eventQueue = Promise.resolve()
   let resolveExit
   const exit = new Promise((resolve) => { resolveExit = resolve })
 
@@ -415,26 +552,122 @@ export function createDashboardSession(
     if (closed) return
     const width = output.columns || 80
     const height = output.rows || 24
-    output.write(`\x1b[H${renderDashboard(state, width, height, ui)}\x1b[J`)
+    if (notice && Date.now() - notice.startedAt >= 1500) notice = undefined
+    const frame = renderDashboardFrame(state, width, height, ui, editor, selection, notice)
+    rows = frame.rows
+    inputY = frame.inputY
+    inputX = frame.inputX
+    output.write(`\x1b[H${frame.text}\x1b[J\x1b[${inputY + 1};${frame.cursorX + 1}H\x1b[?25h`)
   }
   const requestExit = (reason) => {
     if (!closed) resolveExit(reason)
   }
-  const onData = (chunk) => {
-    const key = chunk.toString('utf8')
-    if (key === '\u0003') requestExit('SIGINT')
-    else if (key === 'q' || key === 'Q') requestExit('q')
-    else if (key === 'c' || key === 'C') {
+  const setNotice = (message, error = false) => {
+    notice = { message, error, startedAt: Date.now() }
+    draw()
+  }
+  const osc52 = (value) => {
+    const sequence = `\x1b]52;c;${Buffer.from(value).toString('base64')}\x07`
+    output.write(env.TMUX ? `\x1bPtmux;${sequence.replaceAll('\x1b', '\x1b\x1b')}\x1b\\` : sequence)
+  }
+  const copyText = async (value) => {
+    if (env.SSH_CONNECTION || env.SSH_TTY) {
+      osc52(value)
+      setNotice('Copied to clipboard')
+      return
+    }
+    try {
+      await clipboardAdapter.write(value)
+      setNotice('Copied to clipboard')
+    } catch {
+      try {
+        osc52(value)
+        setNotice('Copied to clipboard')
+      } catch {
+        setNotice('Failed to copy; terminal clipboard is unavailable', true)
+      }
+    }
+  }
+  const pasteClipboard = async () => {
+    try {
+      editor.insertPaste(await clipboardAdapter.read())
+      selection = undefined
+      draw()
+    } catch {
+      setNotice('Clipboard paste is unavailable; use terminal paste', true)
+    }
+  }
+  const submit = async () => {
+    const result = editor.submit()
+    if (result.error) pushActivity(state, 'warning', result.error)
+    else if (result.command === 'help') pushActivity(state, 'info', 'Commands: help · clear · open · quit (a leading / is optional)')
+    else if (result.command === 'clear') {
       state.activity.length = 0
       state.scrollFromBottom = 0
-      draw()
-    } else if (key === '\x1b[A') state.scrollFromBottom = Math.max(0, Math.min(state.activity.length - 1, state.scrollFromBottom + 1))
-    else if (key === '\x1b[B') state.scrollFromBottom = Math.max(0, state.scrollFromBottom - 1)
-    else if (key === '\x1b[5~') state.scrollFromBottom = Math.max(0, Math.min(state.activity.length - 1, state.scrollFromBottom + 10))
-    else if (key === '\x1b[6~') state.scrollFromBottom = Math.max(0, state.scrollFromBottom - 10)
-    else if (key === '\x1b[F' || key === '\x1b[4~') state.scrollFromBottom = 0
+      setNotice('Activity cleared')
+    } else if (result.command === 'open') {
+      if (!/^https?:\/\//u.test(state.endpoint)) pushActivity(state, 'warning', 'No development-server URL is available to open')
+      else {
+        try {
+          await openUrl(state.endpoint)
+          setNotice('Opened development server')
+        } catch (error) {
+          pushActivity(state, 'warning', `Failed to open ${state.endpoint}: ${error.message || error}`)
+        }
+      }
+    } else if (result.command === 'quit') requestExit('q')
     draw()
   }
+  const handleEvent = async (event) => {
+    if (event.type === 'paste') editor.insertPaste(event.value)
+    else if (event.type === 'text') {
+      editor.insert(event.value)
+      selection = undefined
+    } else if (event.type === 'mouse') {
+      const position = { x: event.x, y: event.y }
+      if (event.kind === 'down' && event.button === 'left') {
+        dragStart = position
+        selection = { start: position, end: position }
+      } else if (event.kind === 'drag' && dragStart) selection = { start: dragStart, end: position }
+      else if (event.kind === 'up' && event.button === 'left' && dragStart) {
+        selection = { start: dragStart, end: position }
+        dragStart = undefined
+        const value = extractSelection(rows, selection)
+        if (value) {
+          lastSelection = value
+          await copyText(value)
+        } else {
+          if (position.y === inputY) editor.setCursorFromCell(Math.max(0, position.x - inputX))
+          selection = undefined
+        }
+      } else if (event.kind === 'down' && event.button === 'right' && position.y === inputY) await pasteClipboard()
+      else if (event.kind === 'scroll-up') state.scrollFromBottom = Math.max(0, Math.min(activityRowCount(state) - 1, state.scrollFromBottom + 3))
+      else if (event.kind === 'scroll-down') state.scrollFromBottom = Math.max(0, state.scrollFromBottom - 3)
+    } else if (event.type === 'key') {
+      if (event.key === 'ctrl-c') requestExit('SIGINT')
+      else if (event.key === 'ctrl-y') lastSelection ? await copyText(lastSelection) : setNotice('No selected text to copy', true)
+      else if (event.key === 'ctrl-v') await pasteClipboard()
+      else if (event.key === 'enter') await submit()
+      else if (event.key === 'escape') { editor.clear(); selection = undefined }
+      else if (event.key === 'left') editor.moveLeft()
+      else if (event.key === 'right') editor.moveRight()
+      else if (event.key === 'home') editor.moveHome()
+      else if (event.key === 'end') editor.moveEnd()
+      else if (event.key === 'ctrl-end') state.scrollFromBottom = 0
+      else if (event.key === 'backspace') editor.backspace()
+      else if (event.key === 'delete') editor.delete()
+      else if (event.key === 'up') editor.historyPrevious()
+      else if (event.key === 'down') editor.historyNext()
+      else if (event.key === 'pageup') state.scrollFromBottom = Math.max(0, Math.min(activityRowCount(state) - 1, state.scrollFromBottom + 10))
+      else if (event.key === 'pagedown') state.scrollFromBottom = Math.max(0, state.scrollFromBottom - 10)
+    }
+    draw()
+  }
+  const onData = (chunk) => {
+    for (const event of decoder.push(chunk)) {
+      eventQueue = eventQueue.then(() => handleEvent(event))
+    }
+  }
   const onResize = () => draw()
 
   previousRaw = input.isRaw === true
@@ -442,7 +675,7 @@ export function createDashboardSession(
   input.resume?.()
   input.on('data', onData)
   output.on?.('resize', onResize)
-  output.write('\x1b[?1049h\x1b[?25l\x1b[2J')
+  output.write('\x1b[?1049h\x1b[?1002h\x1b[?1006h\x1b[?2004h\x1b[?25l\x1b[2J')
   const timer = setInterval(draw, 100)
   timer.unref?.()
   draw()
@@ -459,7 +692,7 @@ export function createDashboardSession(
       output.off?.('resize', onResize)
       if (typeof input.setRawMode === 'function') input.setRawMode(previousRaw)
       if (!previousRaw) input.pause?.()
-      output.write('\x1b[?25h\x1b[?1049l')
+      output.write('\x1b[?2004l\x1b[?1006l\x1b[?1002l\x1b[?25h\x1b[?1049l')
     },
   }
 }

package/bin/wake.mjs

@@ -184,7 +184,7 @@ async function runServer(factory, options, command, root, ui, uiMode) {
       dashboard?.draw()
     }
     const onDiagnostic = (diagnostic) => {
-      applyDashboardEvent(state, { type: 'diagnostic', message: diagnostic.message })
+      applyDashboardEvent(state, { type: 'diagnostic', diagnostic })
       dashboard?.draw()
     }
     const onClosed = () => {

package/index.cjs

@@ -124,11 +124,7 @@ class DevServer extends EventEmitter {
       } else if (event.type === 'rebuilt') {
         this.emit('rebuilt', event)
       } else if (event.type === 'diagnostic') {
-        this.emit('diagnostic', {
-          severity: 'error',
-          code: 'WAKE_BUILD',
-          message: event.message,
-        })
+        this.emit('diagnostic', event.diagnostic)
       } else if (event.type === 'closed' && !this.#closed) {
         this.#closed = true
         clearInterval(this.#eventTimer)

package/index.d.ts

@@ -21,6 +21,20 @@ export type WakeErrorCode =
   | 'WAKE_LIBRARY_TYPE'
   | 'WAKE_LIBRARY_OUTPUT'
 
+export interface DiagnosticLocation {
+  /** One-based source line. */
+  line: number
+  /** One-based Unicode-scalar column. */
+  column: number
+  /** One-based line containing the exclusive end position. */
+  endLine: number
+  /** One-based Unicode-scalar column of the exclusive end position. */
+  endColumn: number
+  /** Exact source line without its line terminator. */
+  lineText: string
+  label?: string
+}
+
 export interface Diagnostic {
   severity: 'error' | 'warning' | 'note' | 'help'
   code?: string
@@ -28,6 +42,7 @@ export interface Diagnostic {
   path?: string
   start?: number
   end?: number
+  location?: DiagnosticLocation
   notes?: string[]
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crab-dev/wake",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "description": "Wake native web build tools for Node.js",
   "license": "MIT OR Apache-2.0",
   "repository": {
@@ -50,6 +50,7 @@
     "node": ">=22.14 <27"
   },
   "dependencies": {
+    "@crab-dev/css": "0.1.20",
     "@crab-dev/rc-alert": "^0.0.2",
     "@crab-dev/rc-button": "^0.0.2",
     "@crab-dev/rc-dialog": "^0.0.2",
@@ -64,19 +65,21 @@
     "@crab-dev/rc-text-edit": "^0.0.1",
     "@crab-dev/rc-tooltip": "^0.0.2",
     "@crab-dev/rc-tree": "^0.1.2",
-    "@crab-dev/css": "0.1.19",
-    "lucide-react": "^1.23.0"
+    "clipboardy": "5.3.2",
+    "lucide-react": "^1.23.0",
+    "open": "11.0.0",
+    "string-width": "8.2.2"
   },
   "peerDependencies": {
     "react": "^19.2.8",
     "react-dom": "^19.2.8"
   },
   "optionalDependencies": {
-    "@crab-dev/wake-darwin-arm64": "0.1.19",
-    "@crab-dev/wake-darwin-x64": "0.1.19",
-    "@crab-dev/wake-linux-arm64-gnu": "0.1.19",
-    "@crab-dev/wake-linux-x64-gnu": "0.1.19",
-    "@crab-dev/wake-win32-x64-msvc": "0.1.19"
+    "@crab-dev/wake-darwin-arm64": "0.1.20",
+    "@crab-dev/wake-darwin-x64": "0.1.20",
+    "@crab-dev/wake-linux-arm64-gnu": "0.1.20",
+    "@crab-dev/wake-linux-x64-gnu": "0.1.20",
+    "@crab-dev/wake-win32-x64-msvc": "0.1.20"
   },
   "publishConfig": {
     "access": "public",