brustjs 0.1.0-alpha

package/runtime/css/component-build.ts

@@ -0,0 +1,78 @@
+import { mkdir, readFile, writeFile } from 'node:fs/promises'
+import { createHash } from 'node:crypto'
+import path from 'node:path'
+import { scanCssImports } from './scan-imports.ts'
+import { processCssFile } from './process-modules.ts'
+import { computeRouteChunks, type RouteForCss } from './route-deps.ts'
+import { writeComponentCssManifest, type ComponentCssManifest } from './manifest.ts'
+
+export interface BuildComponentCssOptions {
+  /** Absolute path to the user's app dir (where Home.tsx lives). */
+  scanRoot: string
+  /** Absolute path under which chunk files + manifest are written. */
+  outDir: string
+  /** Optional Tailwind compiler (for @apply resolution). */
+  tailwindCompile: Parameters<typeof processCssFile>[0]['tailwindCompile']
+  /** Routes to map to CSS chunks. */
+  routes: RouteForCss[]
+}
+
+/** Run the full component CSS pipeline: scan → process → emit chunks +
+ * .d.ts + manifest. Returns the in-memory manifest for callers (brust.run)
+ * that need to register the Bun.plugin immediately. */
+export async function buildComponentCss(
+  opts: BuildComponentCssOptions,
+): Promise<ComponentCssManifest> {
+  const scan = await scanCssImports(opts.scanRoot)
+
+  // Collect unique CSS file paths (a file may be imported from multiple .tsx).
+  const cssFiles = new Map<string, { isModule: boolean }>()
+  for (const deps of scan.values()) {
+    for (const d of deps) cssFiles.set(d.path, { isModule: d.isModule })
+  }
+
+  const chunksDir = path.join(opts.outDir, 'components')
+  await mkdir(chunksDir, { recursive: true })
+
+  const modules: ComponentCssManifest['modules'] = {}
+  for (const [absPath, { isModule }] of cssFiles) {
+    const source = await readFile(absPath, 'utf-8')
+    const result = await processCssFile({
+      filename: absPath,
+      source,
+      isModule,
+      tailwindCompile: opts.tailwindCompile,
+    })
+    // Deterministic chunk filename: sha256 of relative path. relPath alone
+    // is enough for identity; content changes would update file mtime but
+    // not the chunk path (stable URL → browser cache reuse).
+    const rel = path.relative(opts.scanRoot, absPath)
+    const hash = createHash('sha256').update(rel).digest('hex').slice(0, 8)
+    const chunkName = `${hash}.css`
+    await writeFile(path.join(chunksDir, chunkName), result.code)
+    modules[absPath] = {
+      chunk: `/_brust/css/components/${chunkName}`,
+      exports: result.exports,
+    }
+    if (isModule) {
+      const lines = ['declare const styles: {']
+      for (const k of Object.keys(result.exports ?? {})) {
+        lines.push(`  readonly ${k}: string`)
+      }
+      lines.push('}', 'export default styles', '')
+      await writeFile(absPath + '.d.ts', lines.join('\n'), 'utf-8')
+    }
+  }
+
+  // Convert modules map into shape expected by computeRouteChunks.
+  const lookup: Record<string, { chunk: string }> = {}
+  for (const [p, m] of Object.entries(modules)) lookup[p] = { chunk: m.chunk }
+  const routeChunks = computeRouteChunks(opts.routes, scan, lookup)
+
+  const manifest: ComponentCssManifest = { version: 1, modules, routeChunks }
+  await writeComponentCssManifest(
+    path.join(opts.outDir, 'css', 'component-manifest.json'),
+    manifest,
+  )
+  return manifest
+}

package/runtime/css/component-loader.ts

@@ -0,0 +1,27 @@
+import type { BunPlugin } from 'bun'
+import type { ComponentCssManifest } from './manifest.ts'
+
+/** Build a Bun.plugin that resolves component CSS imports.
+ *  - .module.css → `export default <name-map>` (JS, baked from manifest)
+ *  - .css        → empty JS (side-effect; real CSS already on disk)
+ *
+ * Register once per isolate (brust.run main + each worker). */
+export function cssLoaderPlugin(manifest: ComponentCssManifest): BunPlugin {
+  return {
+    name: 'brust-component-css',
+    setup(build) {
+      build.onLoad({ filter: /\.module\.css$/ }, ({ path }) => {
+        const mod = manifest.modules[path]
+        const exports = mod?.exports ?? {}
+        return {
+          contents: `export default ${JSON.stringify(exports)}`,
+          loader: 'js',
+        }
+      })
+      build.onLoad({ filter: /\.css$/ }, () => ({
+        contents: '',
+        loader: 'js',
+      }))
+    },
+  }
+}

package/runtime/css/manifest.ts

@@ -0,0 +1,51 @@
+import { mkdir, writeFile } from 'node:fs/promises'
+import path from 'node:path'
+
+/** Per-CSS-file entry. Side-effect imports (.css) have exports:null;
+ * CSS Modules (.module.css) have a flat name→hashed-name map. */
+export interface ComponentCssModuleEntry {
+  /** Absolute URL path served by Rust (e.g. /_brust/css/components/<sha>.css). */
+  chunk: string
+  /** Original class name → hashed class name. null for non-module .css. */
+  exports: Record<string, string> | null
+}
+
+export interface ComponentCssManifest {
+  version: 1
+  /** Absolute filesystem path of the source .css file → entry. */
+  modules: Record<string, ComponentCssModuleEntry>
+  /** Route.fullPath → ordered, deduplicated chunk href list. */
+  routeChunks: Record<string, string[]>
+}
+
+/** Read + validate. Returns null when the file doesn't exist (project has
+ * no component CSS — treated as a no-op everywhere). Throws on malformed
+ * JSON or version mismatch. */
+export async function readComponentCssManifest(
+  absolutePath: string,
+): Promise<ComponentCssManifest | null> {
+  const f = Bun.file(absolutePath)
+  if (!(await f.exists())) return null
+  const text = await f.text()
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(text)
+  } catch (e) {
+    throw new Error(
+      `component-manifest.json is malformed: ${e instanceof Error ? e.message : String(e)}`,
+    )
+  }
+  if (!parsed || typeof parsed !== 'object' || (parsed as { version?: unknown }).version !== 1) {
+    throw new Error('component-manifest.json version mismatch (expected 1)')
+  }
+  return parsed as ComponentCssManifest
+}
+
+/** Write to disk. Creates the parent directory if needed. */
+export async function writeComponentCssManifest(
+  absolutePath: string,
+  manifest: ComponentCssManifest,
+): Promise<void> {
+  await mkdir(path.dirname(absolutePath), { recursive: true })
+  await writeFile(absolutePath, JSON.stringify(manifest, null, 2), 'utf-8')
+}

package/runtime/css/process-modules.ts

@@ -0,0 +1,56 @@
+import { transform } from 'lightningcss'
+
+export interface ProcessCssOptions {
+  /** Absolute path; Lightning CSS uses this to derive [hash] in cssModules pattern. */
+  filename: string
+  /** Source CSS text. */
+  source: string
+  /** True iff this file is a .module.css. */
+  isModule: boolean
+  /** Optional Tailwind compiler. When set, source is piped through it FIRST
+   * so @apply directives resolve before module class rewriting. Null when
+   * Tailwind isn't available. */
+  tailwindCompile: {
+    build(candidates: string[]): string
+    sources: { base: string; pattern: string; negated: boolean }[]
+  } | null
+}
+
+export interface ProcessCssResult {
+  /** Compiled CSS bytes. */
+  code: Uint8Array
+  /** null for non-module files; original→hashed name map for .module.css. */
+  exports: Record<string, string> | null
+}
+
+/** Pipe a CSS file through Tailwind (if available) then Lightning CSS.
+ * For .module.css, class names are hashed via Lightning's default
+ * pattern `[local]_[hash]` where [hash] is file-derived (~6 chars).
+ * Two classes in the same file share the suffix; two files with the same
+ * class name get different hashes. */
+export async function processCssFile(opts: ProcessCssOptions): Promise<ProcessCssResult> {
+  let css = opts.source
+
+  if (opts.tailwindCompile) {
+    const { Scanner } = await import('@tailwindcss/oxide')
+    const scanner = new Scanner({ sources: opts.tailwindCompile.sources })
+    const candidates = scanner.scan()
+    css = opts.tailwindCompile.build(candidates) + '\n' + css
+  }
+
+  const result = transform({
+    filename: opts.filename,
+    code: Buffer.from(css, 'utf-8'),
+    cssModules: opts.isModule ? { pattern: '[local]_[hash]' } : false,
+  })
+
+  if (!opts.isModule) {
+    return { code: result.code, exports: null }
+  }
+
+  const flat: Record<string, string> = {}
+  for (const [k, v] of Object.entries(result.exports ?? {})) {
+    flat[k] = (v as { name: string }).name
+  }
+  return { code: result.code, exports: flat }
+}

package/runtime/css/route-deps.ts

@@ -0,0 +1,33 @@
+import type { CssDep } from './scan-imports.ts'
+
+export interface RouteForCss {
+  /** Route.fullPath (e.g. '/' or '/blog/{slug}'). */
+  fullPath: string
+  /** Absolute path of the route's Component source file. */
+  componentSource: string
+}
+
+/** Build the route → CSS chunk hrefs map.
+ *
+ * MVP: direct lookup only. We collect CSS deps from each route's
+ * componentSource file (the file that defines the Component used in
+ * defineRoutes). Transitive walking into nested components is a future
+ * enhancement — for now, users put @import or @apply or co-locate CSS
+ * with the route component. */
+export function computeRouteChunks(
+  routes: RouteForCss[],
+  scan: Map<string, CssDep[]>,
+  modules: Record<string, { chunk: string }>,
+): Record<string, string[]> {
+  const out: Record<string, string[]> = {}
+  for (const r of routes) {
+    const deps = scan.get(r.componentSource) ?? []
+    const chunks = new Set<string>()
+    for (const d of deps) {
+      const mod = modules[d.path]
+      if (mod) chunks.add(mod.chunk)
+    }
+    out[r.fullPath] = Array.from(chunks).sort()
+  }
+  return out
+}

package/runtime/css/scan-imports.ts

@@ -0,0 +1,79 @@
+import { readdir, readFile, stat } from 'node:fs/promises'
+import path from 'node:path'
+import ts from 'typescript'
+
+export interface CssDep {
+  /** Absolute path to the .css or .module.css file. */
+  path: string
+  /** True iff the file ends with `.module.css`. */
+  isModule: boolean
+  /** Default-import binding name (e.g. `styles` for `import styles from ...`).
+   * null for side-effect imports (`import './foo.css'`). */
+  importedName: string | null
+}
+
+const IGNORE_DIRS = new Set(['node_modules', '.git', '.brust', 'dist'])
+const SOURCE_EXT_RE = /\.(tsx?|jsx?)$/
+const TEST_RE = /\.test\.(tsx?|jsx?)$/
+
+/** Walk `scanRoot` recursively, parse every TS/TSX file with the TypeScript
+ * compiler API, return a map of source file → CSS deps. Files outside
+ * scanRoot, inside ignored dirs, or test files are skipped. */
+export async function scanCssImports(scanRoot: string): Promise<Map<string, CssDep[]>> {
+  const out = new Map<string, CssDep[]>()
+  await walk(scanRoot, scanRoot, out)
+  return out
+}
+
+async function walk(root: string, dir: string, out: Map<string, CssDep[]>): Promise<void> {
+  let entries: string[]
+  try {
+    entries = await readdir(dir)
+  } catch {
+    return
+  }
+  for (const name of entries) {
+    if (IGNORE_DIRS.has(name)) continue
+    const full = path.join(dir, name)
+    let st: Awaited<ReturnType<typeof stat>>
+    try {
+      st = await stat(full)
+    } catch {
+      continue
+    }
+    if (st.isDirectory()) {
+      await walk(root, full, out)
+    } else if (SOURCE_EXT_RE.test(name) && !TEST_RE.test(name)) {
+      const deps = await depsForFile(full)
+      if (deps.length > 0) out.set(full, deps)
+    }
+  }
+}
+
+async function depsForFile(file: string): Promise<CssDep[]> {
+  const src = await readFile(file, 'utf-8')
+  const sf = ts.createSourceFile(
+    file,
+    src,
+    ts.ScriptTarget.Latest,
+    /*setParentNodes*/ true,
+    ts.ScriptKind.TSX,
+  )
+  const deps: CssDep[] = []
+  ts.forEachChild(sf, (node) => {
+    if (!ts.isImportDeclaration(node)) return
+    const spec = node.moduleSpecifier
+    if (!ts.isStringLiteral(spec)) return
+    const raw = spec.text
+    if (!raw.endsWith('.css')) return
+    const absPath = path.resolve(path.dirname(file), raw)
+    const isModule = raw.endsWith('.module.css')
+    let importedName: string | null = null
+    if (node.importClause?.name) {
+      // default import: `import styles from './x.module.css'`
+      importedName = node.importClause.name.getText(sf)
+    }
+    deps.push({ path: absPath, isModule, importedName })
+  })
+  return deps
+}

package/runtime/css.ts

@@ -0,0 +1,39 @@
+// Module-scope state read by the renderer to decide whether to inject
+// <link rel="stylesheet"> tags into the first chunk. Mirrors the
+// consume-flag pattern used by islands — per-worker (workers re-execute
+// the bundle and get their own copy).
+let cssHrefs: string[] = []
+
+/** Configure the list of stylesheet hrefs that the renderer should
+ * inject into the SSR HTML before </head>. Replaces any previous list.
+ * Called from brust.run() main and worker branches (both need to know
+ * so the per-worker renderer can inject). */
+export function configureCssEnabled(hrefs: readonly string[]): void {
+  cssHrefs = hrefs.slice()
+}
+
+/** Returns the configured hrefs as a defensive copy. */
+export function getCssHrefs(): readonly string[] {
+  return cssHrefs.slice()
+}
+
+const routeHrefs = new Map<string, readonly string[]>()
+
+/** Set the CSS hrefs to inject for a specific route. Replaces any previous
+ * list for that route. Called from brust.run() main after the component
+ * manifest loads. Keys are route.fullPath strings (e.g. '/' or '/blog/{slug}'). */
+export function configureCssHrefsForRoute(routePath: string, hrefs: readonly string[]): void {
+  routeHrefs.set(routePath, hrefs.slice())
+}
+
+/** Returns the CSS hrefs for a specific route, or [] when none configured.
+ * Defensive copy on the way out. */
+export function getCssHrefsForRoute(routePath: string): readonly string[] {
+  return (routeHrefs.get(routePath) ?? []).slice()
+}
+
+/** @internal — used by the unit test suite to wipe both global and per-route state. */
+export function _resetCssForTests(): void {
+  cssHrefs = []
+  routeHrefs.clear()
+}

package/runtime/dev/client.ts

@@ -0,0 +1,49 @@
+/** Browser dev client. Inlined into the SSR first chunk via a <script
+ * type="module">…</script> wrapper. Connects WS at /_brust/dev, handles
+ * reload / css-update / error / ok messages, manages a red overlay.
+ *
+ * Keep this string short — it ships in every dev-mode SSR response. */
+export const DEV_CLIENT_JS = String.raw`
+const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+let ws;
+function connect() {
+  ws = new WebSocket(proto + '//' + location.host + '/_brust/dev');
+  ws.onmessage = function (e) { handle(JSON.parse(e.data)); };
+  ws.onclose = function () { setTimeout(connect, 1000); };
+  ws.onerror = function () { /* swallow; onclose triggers reconnect */ };
+}
+function handle(msg) {
+  switch (msg.type) {
+    case 'reload': location.reload(); break;
+    case 'css-update': swapCssLink(msg.href); break;
+    case 'error': showOverlay(msg.message, msg.stack); break;
+    case 'ok': hideOverlay(); break;
+  }
+}
+function swapCssLink(href) {
+  const url = new URL(href, location.origin);
+  document.querySelectorAll('link[rel="stylesheet"]').forEach(function (link) {
+    if (new URL(link.href).pathname === url.pathname) link.href = href;
+  });
+}
+function showOverlay(msg, stack) {
+  let el = document.getElementById('__brust_dev_overlay');
+  if (!el) {
+    el = document.createElement('div');
+    el.id = '__brust_dev_overlay';
+    el.style.cssText = 'position:fixed;inset:0;background:rgba(180,30,30,0.96);color:#fff;font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;padding:24px;z-index:2147483647;white-space:pre-wrap;overflow:auto;';
+    document.body.appendChild(el);
+  }
+  el.textContent = '[brust dev] build error\n\n' + msg + (stack ? '\n\n' + stack : '');
+}
+function hideOverlay() {
+  const el = document.getElementById('__brust_dev_overlay');
+  if (el) el.remove();
+}
+connect();
+`.trim()
+
+/** Build the full <script> tag that gets spliced before </head>. */
+export function buildDevClientTag(): string {
+  return '<script type="module">' + DEV_CLIENT_JS + '</script>'
+}

package/runtime/dev/coordinator.ts

@@ -0,0 +1,127 @@
+import type { DevMessage } from './ws-channel.ts'
+import type { ChangeKind } from './watcher.ts'
+
+export interface CoordinatorDeps {
+  workers: {
+    terminateAll(): Promise<void>
+    spawnAll(): Promise<void>
+  }
+  buildCss: () => Promise<void>
+  buildIslands: () => Promise<void>
+  buildComponentCss?: () => Promise<void>
+  snapshotComponentCss?: () => Promise<import('../css/manifest.ts').ComponentCssManifest | null>
+  broadcast: (msg: DevMessage) => Promise<void> | void
+  tui: { appendEvent(line: string): void }
+}
+
+type State = 'idle' | 'building'
+
+export class Coordinator {
+  private state: State = 'idle'
+
+  constructor(private deps: CoordinatorDeps) {}
+
+  async handleChange(ev: { paths: string[]; kind: ChangeKind }): Promise<void> {
+    if (this.state === 'building') return
+    this.state = 'building'
+    const started = performance.now()
+    try {
+      await this.deps.broadcast({ type: 'building' })
+      this.deps.tui.appendEvent(formatStart(ev))
+      switch (ev.kind) {
+        case 'ts':
+        case 'html':
+          await this.deps.workers.terminateAll()
+          await this.deps.workers.spawnAll()
+          await this.deps.broadcast({ type: 'reload' })
+          break
+        case 'islands':
+          await this.deps.buildIslands()
+          await this.deps.workers.terminateAll()
+          await this.deps.workers.spawnAll()
+          await this.deps.broadcast({ type: 'reload' })
+          break
+        case 'css':
+          await this.deps.buildCss()
+          await this.deps.broadcast({
+            type: 'css-update',
+            href: '/_brust/css/app.css?v=' + Date.now(),
+          })
+          break
+        case 'component-css': {
+          const before = await this.deps.snapshotComponentCss?.()
+          await this.deps.buildComponentCss?.()
+          const after = await this.deps.snapshotComponentCss?.()
+          if (!exportsEqualForChanged(before ?? null, after ?? null, ev.paths)) {
+            await this.deps.broadcast({ type: 'reload' })
+          } else {
+            const chunks = chunksForPaths(after ?? null, ev.paths)
+            for (const c of chunks) {
+              await this.deps.broadcast({
+                type: 'css-update',
+                href: `${c}?v=${Date.now()}`,
+              })
+            }
+          }
+          break
+        }
+      }
+      const ms = (performance.now() - started) | 0
+      this.deps.tui.appendEvent(`  → ok (${ms}ms)`)
+      await this.deps.broadcast({ type: 'ok' })
+    } catch (e: any) {
+      this.deps.tui.appendEvent(`  ✗ ${e.message ?? String(e)}`)
+      await this.deps.broadcast({
+        type: 'error',
+        message: e.message ?? String(e),
+        stack: e.stack,
+      })
+    } finally {
+      this.state = 'idle'
+    }
+  }
+}
+
+function formatStart(ev: { paths: string[]; kind: ChangeKind }): string {
+  const icon = ev.kind === 'css' ? '⎈' : '⏵'
+  const label =
+    ev.kind === 'css'
+      ? 'css update'
+      : ev.kind === 'component-css'
+        ? 'component css update'
+        : ev.kind === 'islands'
+          ? 'islands rebuild'
+          : 'hotreload'
+  return `${icon} ${label} ${ev.paths[0]}`
+}
+
+function exportsEqualForChanged(
+  before: import('../css/manifest.ts').ComponentCssManifest | null,
+  after: import('../css/manifest.ts').ComponentCssManifest | null,
+  paths: string[],
+): boolean {
+  if (!before || !after) return false
+  for (const p of paths) {
+    const b = before.modules[p]?.exports ?? null
+    const a = after.modules[p]?.exports ?? null
+    if (b === null && a === null) continue
+    if (b === null || a === null) return false
+    const bk = Object.keys(b).sort().join(',')
+    const ak = Object.keys(a).sort().join(',')
+    if (bk !== ak) return false
+  }
+  return true
+}
+
+function chunksForPaths(
+  manifest: import('../css/manifest.ts').ComponentCssManifest | null,
+  paths: string[],
+): string[] {
+  if (!manifest) return []
+  const out = new Set<string>()
+  for (const p of paths) {
+    const c = manifest.modules[p]?.chunk
+    if (c) out.add(c)
+  }
+  return Array.from(out)
+}

package/runtime/dev/inject.ts

@@ -0,0 +1,17 @@
+// Module-scope state for the dev-client <script> snippet that the renderer
+// splices into the SSR first chunk in dev mode. Mirrors runtime/css.ts.
+// Workers re-execute the bundle and get their own copy; brust.run() sets
+// the snippet on both main and worker startup paths.
+let snippet: string | null = null
+
+/** Set the dev-client snippet (full `<script>…</script>` tag) the renderer
+ * should inject before `</head>`. Pass `null` to disable injection (the
+ * default in non-dev mode). */
+export function configureDevClientSnippet(s: string | null): void {
+  snippet = s
+}
+
+/** Returns the configured snippet, or `null` when dev mode is off. */
+export function getDevClientSnippet(): string | null {
+  return snippet
+}

package/runtime/dev/tui.ts

@@ -0,0 +1,109 @@
+const ESC = '\x1b['
+const HIDE_CURSOR = ESC + '?25l'
+const SHOW_CURSOR = ESC + '?25h'
+const CLEAR_SCREEN = ESC + '2J' + ESC + 'H'
+const RESET = ESC + '0m'
+const DIM = ESC + '2m'
+const BRAND = ESC + '38;2;138;51;36m'
+const GREEN = ESC + '32m'
+const RED = ESC + '31m'
+const YELLOW = ESC + '33m'
+
+const DEFAULT_CAPACITY = 10
+
+interface Status {
+  port: number
+  workers: number
+  watching: string[]
+}
+
+export interface TuiOptions {
+  isTty: boolean
+  write: (s: string) => void
+  capacity?: number
+}
+
+export class Tui {
+  private events: string[] = []
+  private status: Status | null = null
+  private capacity: number
+  private state: 'idle' | 'building' | 'failed' = 'idle'
+
+  constructor(private opts: TuiOptions) {
+    this.capacity = opts.capacity ?? DEFAULT_CAPACITY
+  }
+
+  eventsForTests(): string[] {
+    return [...this.events]
+  }
+
+  updateStatus(s: Status): void {
+    this.status = s
+    this.render()
+  }
+
+  setState(s: 'idle' | 'building' | 'failed'): void {
+    this.state = s
+    this.render()
+  }
+
+  appendEvent(line: string): void {
+    this.events.push(line)
+    if (this.events.length > this.capacity) this.events.shift()
+    this.render()
+  }
+
+  stop(): void {
+    if (this.opts.isTty) this.opts.write(SHOW_CURSOR + RESET)
+  }
+
+  private render(): void {
+    if (!this.opts.isTty) {
+      const latest = this.events[this.events.length - 1]
+      if (latest) this.opts.write(latest + '\n')
+      return
+    }
+    let out = HIDE_CURSOR + CLEAR_SCREEN
+    out += this.renderHeader()
+    out += this.renderEvents()
+    out += this.renderStatusBar()
+    this.opts.write(out)
+  }
+
+  private renderHeader(): string {
+    if (!this.status) return BRAND + 'brust 0.1.0 · dev mode' + RESET + '\n\n'
+    return (
+      BRAND +
+      'brust 0.1.0 · dev mode' +
+      RESET +
+      '\n' +
+      DIM +
+      'port:     ' +
+      RESET +
+      this.status.port +
+      '\n' +
+      DIM +
+      'workers:  ' +
+      RESET +
+      this.status.workers +
+      '\n' +
+      DIM +
+      'watching: ' +
+      RESET +
+      this.status.watching.join(', ') +
+      '\n\n'
+    )
+  }
+
+  private renderEvents(): string {
+    let out = ''
+    for (const ev of this.events) out += ev + '\n'
+    return out + '\n'
+  }
+
+  private renderStatusBar(): string {
+    if (this.state === 'building') return YELLOW + '◉ Building…' + RESET + '\n'
+    if (this.state === 'failed') return RED + '✗ Build failed' + RESET + '\n'
+    return GREEN + '◉ Serving' + RESET + '\n'
+  }
+}