@tenyokjs/devdevian-cli 0.4.1-alpha.1 → 0.5.1-alpha.1

package/README.md

@@ -31,6 +31,42 @@ Pages have a bounded 30-second in-memory cache. Refresh explicitly with Shift+R.
 
 Ordinary reply deletion replaces your text with a placeholder and preserves nested replies. Its attachments become unavailable. Deleting an accepted answer reopens the question. D/d works on a selected reply or while reading it in full; confirmation is required.
 
+## Meet Devi
+
+Devi is the Devdevian mascot: a small ghost with a laptop and an orbit. The terminal uses colored ASCII art, so it needs no image protocol or image downloads. A compact drawing is used when space is limited; authentication codes, addresses and controls take priority over decoration.
+
+- **“Devi missed you.”** appears while checking your saved session and loading the first page. It disappears as soon as the page is ready; there is no minimum splash duration or fake progress bar.
+- **“Devi saved you a seat.”** welcomes you to browser-approved sign-in. Sign-in instructions stay visible in small terminals.
+- Empty feed, Inbox, communities, local drafts and search views show a still mascot with a relevant next step. Errors remain error states; they do not become a happy empty view.
+- Subtle mode animates a blink only during startup work or pending browser approval. **Reduced motion** keeps the drawing static. Disable it entirely in **Appearance → Devi greeting**, with `devdevian appearance --welcome off`, or just for one launch with `devdevian tui --welcome off`.
+- A failed session check offers **R / Enter** to retry the existing session. **Ctrl+C** exits during loading. Script commands and `--json` output never print the mascot.
+
+All mascot captions are in English. Welcome preferences are local and compatible with existing 0.5.0 configuration files.
+
+## Themes and layout
+
+Open **Appearance** in navigation, type `/appearance`, or press **,** from a reading/list screen. Use arrows to choose options and Tab to move between them. The entire interface previews each change, including code colors, the file picker and navigation. Wide terminals include a sample card next to the controls.
+
+- **Midnight** preserves the original blue/purple design; **Nebula** uses a deeper violet surface; **Daylight** is light; **Contrast** emphasizes readable foregrounds.
+- Choose a **blue, violet, cyan or rose accent**, comfortable/compact lists, automatic/hidden sidebar, automatic/stacked review panels, rounded/straight frames and subtle/reduced loading indicators.
+- **Devi greeting** shows/hides the terminal mascot on startup, sign-in and supported empty sections. Reduced motion keeps Devi still.
+- **Ctrl+S** saves locally. **Esc** cancels the preview. **0** restores the default preview; save to keep it, or cancel to retain existing settings.
+- Hidden navigation stays available with **Tab**. Stacked review panes switch with **W**. Narrow terminals automatically avoid a permanent sidebar and split review layout.
+
+Appearance settings belong to this local CLI installation and apply across its accounts/projects; credentials and server profiles are separate. Settings live in `appearance.json` alongside the credentials file, or under `DEVDEVIAN_CONFIG_DIR`. Saving replaces the settings file atomically with private file permissions. Invalid settings fall back to defaults with a warning and remain untouched until you save a new configuration.
+
+Appearance can also be configured **offline, without logging in**:
+
+```sh
+devdevian appearance                            # print settings as JSON
+devdevian appearance --theme daylight --accent violet
+devdevian appearance --density compact --sidebar hidden
+devdevian appearance --review-layout stacked --motion reduced
+devdevian appearance --reset                    # save defaults
+```
+
+These options can be passed to `tui` or `open` for a **session-only override**, for example `devdevian tui --theme contrast`. Overrides become persistent only if you save in Appearance. Preference changes do not write to the Devdevian API or modify credentials. Current presets use fixed, tested color combinations; the settings file is validated rather than interpreted as terminal code.
+
 ## Code and discussion, together
 
 Press **V** in a review to open the code workspace. Wide terminals show the snippet alongside its discussion; narrow terminals show one pane at a time. **W** switches focus. In the code pane, arrows move between lines (left/right scroll horizontally), **Space** anchors a range and **C** opens a prefilled comment form. Remarks may cover at most 50 lines. **Enter** selects a remark covering the current line, if it is on the current page. Markers describe the current page only; **F** cycles all/open/resolved remarks and **[ / ]** page through them.

package/VERSIONS.md

@@ -4,10 +4,33 @@ The CLI is a separately versioned Devdevian client. Its npm version does not hav
 
 Every published npm artifact has a unique immutable version. We record each version here, even when several ship in one working session. A GitHub release can summarize a day's work and link to the individual entries; it does not need to be created for every npm publication. An unfinished change stays under **Unreleased** until its package version is assigned. Alpha packages use the `alpha` npm tag.
 
-## Roadmap
+## Current milestone
 
-- **0.5.0 — Themes and interface customization:** visual presets, appearance preferences and layout customization. Planned, not shipped; exact settings will be agreed before implementation.
-- Projects and Events parity is deferred; it is not the 0.5.0 milestone.
+**0.5.0 focuses on themes, interface customization and local appearance preferences.** Projects and Events parity remains a separate future milestone.
+
+## 0.5.1-alpha.1 — Meet Devi
+
+- Added a terminal-native ASCII mascot based on the ghost/laptop/orbit logo, with full and compact drawings and English greetings: “Devi missed you.” and “Devi saved you a seat.”
+- Startup follows the actual session check and first page request, with no minimum duration or artificial progress. Connection errors stop the loading state and offer an existing-session retry.
+- Supported empty sections show a still Devi and a contextual next step. Sign-in codes, addresses and controls take priority on small screens.
+- Subtle motion blinks only during active startup or browser approval; Reduced motion is static. Appearance includes a persistent welcome on/off option, also available to offline commands and session-only launch flags.
+- Script/JSON commands remain banner-free. No additional image dependency, API change, schema migration or production-data change. Existing preferences default the new setting to on.
+- Checked delayed/failing startup, retry, animation/static/off modes, English captions, first-page handoff, empty Inbox, script output and 60×18 device approval in unit and pseudo-terminal regressions.
+
+## 0.5.0-alpha.1 — Make the terminal yours
+
+**Changes**
+
+- Appearance workspace with immediate whole-interface previews, a sample panel on wide terminals and explicit save/cancel/default controls. Open it with `/appearance`, navigation or **,**.
+- Midnight, Nebula, Daylight and Contrast themes, with blue/violet/cyan/rose accents shared by navigation, Markdown, code review, forms and the local file/Git picker.
+- Comfortable/compact list density, automatic/hidden navigation, automatic/stacked review panels, rounded/straight frames and reduced loading motion. Compact layouts remain keyboard-accessible.
+- Atomic, validated local preference storage, independent of account credentials and production data. Invalid configuration falls back visibly without overwriting the file.
+- Offline `devdevian appearance` commands and temporary `tui`/`open` appearance flags. Theme text and selection contrast are checked across all preset/accent combinations.
+- Rapid option-arrow changes no longer overwrite each other when input events are batched. Small terminal forms retain the active option in the viewport.
+
+**Compatibility and checks**
+
+No API/schema changes. Existing credentials and local drafts remain compatible; missing preferences use Midnight defaults. Regression checks cover save/restart, preview cancellation, reset, corrupt files, credential isolation, palette contrast, compact lists, hidden navigation, stacked reviews and 60×18 resizing in a real pseudo-terminal. Preferences apply to the local CLI installation, across its accounts and projects.
 
 ## 0.4.1-alpha.1 — Everyday writing and navigation
 

package/bin/devdevian.mjs

@@ -16,6 +16,13 @@ import {
   clean,
 } from "../lib/client.mjs";
 import { editExternal } from "../lib/external-editor.mjs";
+import {
+  appearanceFields,
+  appearanceFlags,
+  defaultAppearance,
+  loadAppearance,
+  saveAppearance,
+} from "../lib/appearance.mjs";
 const version = packageInfo.version;
 const options = {
   host: { type: "string" },
@@ -40,6 +47,13 @@ const options = {
   editor: { type: "boolean" },
   "no-open": { type: "boolean" },
   "no-live": { type: "boolean" },
+  ...Object.fromEntries(
+    appearanceFields.map((field) => [
+      field.key === "reviewLayout" ? "review-layout" : field.key,
+      { type: "string" },
+    ]),
+  ),
+  reset: { type: "boolean" },
   help: { type: "boolean", short: "h" },
   version: { type: "boolean", short: "v" },
 };
@@ -80,6 +94,9 @@ const help = `Devdevian CLI ${version} · alpha
   devdevian open                  Open the workspace in a new terminal window
   devdevian login                 Authorize in your browser
   devdevian logout                Revoke this terminal
+  devdevian appearance             Show local theme and layout preferences
+  devdevian appearance --theme daylight --accent violet
+  devdevian appearance --reset     Restore the default appearance
   devdevian whoami
   devdevian inbox [--page 2]
   devdevian feed [--topic web] [--page 2]
@@ -96,6 +113,14 @@ const help = `Devdevian CLI ${version} · alpha
   devdevian review reopen POST_ID REVIEW_ID
   devdevian communities [--page 2]
 
+  --theme NAME       midnight | nebula | daylight | contrast
+  --accent NAME      blue | violet | cyan | rose
+  --density NAME     comfortable | compact
+  --sidebar MODE     auto | hidden (Tab opens navigation)
+  --review-layout MODE  auto | stacked
+  --frame STYLE      round | single
+  --motion MODE      subtle | reduced
+  --welcome MODE     on | off (Devi greeting)
   --no-live          Disable background reads in the live workspace
   --project PATH     Root directory for the live file/diff picker (default: current directory)
   --community ID     Publish to an approved private community
@@ -240,6 +265,20 @@ async function execute(args, flags) {
     return;
   }
   const command = args[0];
+  if (command === "appearance") {
+    const loaded = await loadAppearance(),
+      updates = appearanceFlags(flags);
+    if (flags.reset && Object.keys(updates).length)
+      throw Error("Use --reset on its own, or choose appearance options.");
+    if (loaded.warning) process.stderr.write(loaded.warning + "\n");
+    const settings = flags.reset
+      ? await saveAppearance(defaultAppearance)
+      : Object.keys(updates).length
+        ? await saveAppearance({ ...loaded.settings, ...updates })
+        : loaded.settings;
+    out(JSON.stringify(settings, null, 2));
+    return;
+  }
   if (command === "login") return login(flags);
   const config = await loadConfig();
   if (!config) throw Error("Sign in first: devdevian login");
@@ -456,7 +495,14 @@ try {
     await (await import("../lib/tui.mjs")).startTui(values);
   else if (positionals[0] === "open") {
     const args = [];
-    for (const key of ["host", "name", "project"])
+    for (const key of [
+      "host",
+      "name",
+      "project",
+      ...appearanceFields.map((field) =>
+        field.key === "reviewLayout" ? "review-layout" : field.key,
+      ),
+    ])
       if (values[key]) args.push("--" + key, values[key]);
     if (values["no-open"]) args.push("--no-open");
     if (values["no-live"]) args.push("--no-live");

package/lib/appearance.mjs

@@ -0,0 +1,187 @@
+import { dirname, join } from "node:path";
+import {
+  mkdir,
+  lstat,
+  open,
+  writeFile,
+  rename,
+  unlink,
+} from "node:fs/promises";
+import { constants } from "node:fs";
+import { randomBytes } from "node:crypto";
+import { configFile } from "./client.mjs";
+
+export const appearanceFields = [
+  {
+    key: "theme",
+    label: "Theme",
+    options: [
+      ["midnight", "Midnight · original"],
+      ["nebula", "Nebula · deep violet"],
+      ["daylight", "Daylight · light"],
+      ["contrast", "Contrast · high contrast"],
+    ],
+  },
+  {
+    key: "accent",
+    label: "Accent",
+    options: [
+      ["blue", "Blue"],
+      ["violet", "Violet"],
+      ["cyan", "Cyan"],
+      ["rose", "Rose"],
+    ],
+  },
+  {
+    key: "density",
+    label: "List density",
+    options: [
+      ["comfortable", "Comfortable"],
+      ["compact", "Compact"],
+    ],
+  },
+  {
+    key: "sidebar",
+    label: "Navigation",
+    options: [
+      ["auto", "Sidebar on wide terminals"],
+      ["hidden", "Hidden · Tab opens navigation"],
+    ],
+  },
+  {
+    key: "reviewLayout",
+    label: "Review panels",
+    options: [
+      ["auto", "Side by side when space allows"],
+      ["stacked", "One panel · W switches"],
+    ],
+  },
+  {
+    key: "frame",
+    label: "Frames",
+    options: [
+      ["round", "Rounded"],
+      ["single", "Straight"],
+    ],
+  },
+  {
+    key: "motion",
+    label: "Motion",
+    options: [
+      ["subtle", "Subtle loading indicators"],
+      ["reduced", "Reduced · static indicators"],
+    ],
+  },
+  {
+    key: "welcome",
+    label: "Devi greeting",
+    options: [
+      ["on", "Show Devi"],
+      ["off", "Hide Devi"],
+    ],
+  },
+];
+export const defaultAppearance = Object.freeze(
+  Object.fromEntries(
+    appearanceFields.map((field) => [field.key, field.options[0][0]]),
+  ),
+);
+export function normalizeAppearance(value = {}) {
+  if (!value || typeof value !== "object" || Array.isArray(value))
+    throw Error("Appearance settings must be an object.");
+  for (const key of Object.keys(value))
+    if (!appearanceFields.some((field) => field.key === key))
+      throw Error("Unknown appearance option: " + key);
+  const settings = { ...defaultAppearance, ...value };
+  for (const field of appearanceFields)
+    if (!field.options.some(([id]) => id === settings[field.key]))
+      throw Error(
+        `Invalid ${field.key}. Choose: ${field.options.map(([id]) => id).join(", ")}.`,
+      );
+  return settings;
+}
+export function appearanceFlags(flags) {
+  const updates = {};
+  for (const field of appearanceFields) {
+    const flag = field.key === "reviewLayout" ? "review-layout" : field.key;
+    if (flags[flag] !== undefined) updates[field.key] = flags[flag];
+  }
+  normalizeAppearance(updates);
+  return updates;
+}
+export const appearanceFile = (env = process.env) =>
+  join(dirname(configFile(env)), "appearance.json");
+async function safeDirectory(path) {
+  const info = await lstat(path);
+  if (!info.isDirectory() || info.isSymbolicLink())
+    throw Error("The appearance directory must be a real directory.");
+}
+export async function loadAppearance(env = process.env) {
+  const file = appearanceFile(env);
+  try {
+    await safeDirectory(dirname(file));
+    const info = await lstat(file);
+    if (!info.isFile() || info.isSymbolicLink() || info.size > 4096)
+      throw Error("Invalid appearance file.");
+    const handle = await open(
+      file,
+      constants.O_RDONLY |
+        (constants.O_NOFOLLOW || 0) |
+        (constants.O_NONBLOCK || 0),
+    );
+    let record;
+    try {
+      if (!(await handle.stat()).isFile())
+        throw Error("Invalid appearance file.");
+      const bytes = Buffer.alloc(4097),
+        { bytesRead } = await handle.read(bytes, 0, bytes.length, 0);
+      if (bytesRead > 4096) throw Error("Appearance file is too large.");
+      record = JSON.parse(
+        new TextDecoder("utf-8", { fatal: true }).decode(
+          bytes.subarray(0, bytesRead),
+        ),
+      );
+    } finally {
+      await handle.close();
+    }
+    if (
+      record.version !== 1 ||
+      !record.settings ||
+      typeof record.settings !== "object"
+    )
+      throw Error("Unsupported appearance file version.");
+    return { settings: normalizeAppearance(record.settings), warning: "" };
+  } catch (error) {
+    return {
+      settings: { ...defaultAppearance },
+      warning:
+        error.code === "ENOENT"
+          ? ""
+          : "Could not load appearance settings. Using defaults; /appearance can save a fresh configuration.",
+    };
+  }
+}
+export async function saveAppearance(value, env = process.env) {
+  const settings = normalizeAppearance(value),
+    file = appearanceFile(env),
+    directory = dirname(file);
+  await mkdir(directory, { recursive: true, mode: 0o700 });
+  await safeDirectory(directory);
+  const temporary = join(
+    directory,
+    ".appearance-" + randomBytes(12).toString("hex"),
+  );
+  try {
+    await writeFile(
+      temporary,
+      JSON.stringify({ version: 1, settings }, null, 2) + "\n",
+      { flag: "wx", mode: 0o600 },
+    );
+    await rename(temporary, file);
+  } finally {
+    await unlink(temporary).catch((error) => {
+      if (error.code !== "ENOENT") throw error;
+    });
+  }
+  return settings;
+}

package/lib/devi.mjs

@@ -0,0 +1,137 @@
+import React, { useEffect, useState } from "react";
+import { Box, Text } from "ink";
+import stringWidth from "string-width";
+import { clip, wrap } from "./tui-model.mjs";
+import { useTheme } from "./theme.mjs";
+const h = React.createElement;
+// Terminal-native mascot: ghost, laptop and orbit, drawn without image protocols.
+const full = [
+  '           .-""""-.',
+  "          /        \\",
+  "         /  .----.  \\       +",
+  "        |  ( o  o )  |",
+  "    .---|   '----' .-------.",
+  " .-'    |        /  </>  / '-.",
+  "(       |   _   /______/      )",
+  " '---.._ \\_/ \\_/     _..---'",
+  "         '----------'",
+];
+const small = [
+  "   .---.    .-----.",
+  "  ( o o )  / </> /",
+  "  /_   _\\ /_____/",
+  "    '---'",
+];
+export function deviArt(compact = false, frame = 0) {
+  const blink = frame % 6 === 4;
+  return (compact ? small : full).map((line) =>
+    blink ? line.replace("o  o", "-  -").replace("o o", "- -") : line,
+  );
+}
+// Required status and controls get space before decoration. No minimum display timer.
+export function deviLayout({
+  width,
+  height,
+  message,
+  status = [],
+  footer = [],
+  show = true,
+  frame = 0,
+}) {
+  width = Math.max(1, width);
+  height = Math.max(1, height);
+  const instructions = footer.flatMap((line) => wrap(line, width));
+  const details = status.flatMap((line) => wrap(line, width));
+  const footerRows = instructions.slice(0, height);
+  const budget = Math.max(0, height - footerRows.length);
+  const detailRows = details.slice(0, budget);
+  let remaining = height - footerRows.length - detailRows.length;
+  const title = message ? wrap(message, width) : [];
+  let art = [];
+  if (show) {
+    for (const compact of [false, true]) {
+      const candidate = deviArt(compact, frame);
+      if (
+        candidate.every((line) => stringWidth(line) <= width) &&
+        candidate.length + title.length + 2 <= remaining
+      ) {
+        art = candidate;
+        break;
+      }
+    }
+  }
+  const rows = [];
+  if (art.length) {
+    rows.push(
+      ...art.map((text) => ({
+        text: text.padEnd(Math.max(...art.map((line) => stringWidth(line)))),
+        role: text.includes("</>") ? "blue" : "purple",
+      })),
+      { text: "" },
+    );
+    remaining -= art.length + 1;
+  }
+  if (title.length && title.length <= remaining) {
+    rows.push(...title.map((text) => ({ text, role: "text", bold: true })));
+    remaining -= title.length;
+  }
+  if (remaining && rows.length) rows.push({ text: "" });
+  rows.push(
+    ...detailRows.map((text) => ({ text, role: "text" })),
+    ...footerRows.map((text) => ({ text, role: "muted" })),
+  );
+  return rows
+    .slice(0, height)
+    .map((row) => ({ ...row, text: clip(row.text, width) }));
+}
+export function DeviPanel({
+  width,
+  height,
+  message = "Devi missed you.",
+  status,
+  footer,
+  show = true,
+  animate = false,
+  motion = "subtle",
+}) {
+  const c = useTheme(),
+    [frame, setFrame] = useState(0);
+  useEffect(() => {
+    if (!show || !animate || motion === "reduced") return;
+    const timer = setInterval(() => setFrame((value) => (value + 1) % 6), 400);
+    return () => clearInterval(timer);
+  }, [show, animate, motion]);
+  const rows = deviLayout({
+    width,
+    height,
+    message,
+    status,
+    footer,
+    show,
+    frame: motion === "reduced" ? 0 : frame,
+  });
+  return h(
+    Box,
+    {
+      width,
+      height,
+      flexDirection: "column",
+      justifyContent: "center",
+      overflow: "hidden",
+    },
+    ...rows.map((row, index) =>
+      h(
+        Text,
+        {
+          key: index,
+          color: c[row.role] || c.text,
+          bold: row.bold,
+          wrap: "truncate",
+        },
+        " ".repeat(
+          Math.max(0, Math.floor((width - stringWidth(row.text)) / 2)),
+        ) + row.text,
+      ),
+    ),
+  );
+}

package/lib/picker.mjs

@@ -9,9 +9,8 @@ import {
   readDiff,
   selectLines,
 } from "./workspace.mjs";
-import { colors } from "./theme.mjs";
-const h = React.createElement,
-  c = { ...colors, bg: colors.panel };
+import { useTheme } from "./theme.mjs";
+const h = React.createElement;
 export function WorkspacePicker({
   root,
   width,
@@ -20,6 +19,8 @@ export function WorkspacePicker({
   onSelect,
   onCancel,
 }) {
+  const colors = useTheme(),
+    c = { ...colors, bg: colors.panel };
   const [mode, setMode] = useState(initial),
     [folder, setFolder] = useState("."),
     [hidden, setHidden] = useState(false),
@@ -265,7 +266,7 @@ export function WorkspacePicker({
       height: panelHeight,
       key: "browser",
       flexDirection: "column",
-      borderStyle: "round",
+      borderStyle: colors.frame,
       borderColor: c.purple,
       paddingX: 1,
       overflow: "hidden",
@@ -330,7 +331,7 @@ export function WorkspacePicker({
           height: panelHeight,
           key: "preview",
           flexDirection: "column",
-          borderStyle: "round",
+          borderStyle: colors.frame,
           borderColor: c.blue,
           paddingX: 1,
           overflow: "hidden",

package/lib/review-workspace.mjs

@@ -2,7 +2,7 @@ import React from "react";
 import { Box, Text } from "ink";
 import { clip, graphemes } from "./tui-model.mjs";
 import { syntaxSpans } from "./rich-text.mjs";
-import { colors as c } from "./theme.mjs";
+import { useTheme } from "./theme.mjs";
 const h = React.createElement;
 export function codeRange(line, anchor = null) {
   return {
@@ -32,8 +32,11 @@ export function ReviewWorkspace({
   anchor,
   horizontal = 0,
   rows,
+  layout = "auto",
+  stride = 4,
 }) {
-  const split = width >= 78,
+  const c = useTheme();
+  const split = width >= 78 && layout !== "stacked",
     codeWidth = split ? Math.floor(width * 0.55) : width;
   const selectedNote = note || items[index];
   const excerpt = reviewExcerpt(post, focus === "code" ? null : selectedNote),
@@ -114,14 +117,14 @@ export function ReviewWorkspace({
         },
         ...(text.startsWith("+") || text.startsWith("-")
           ? [rendered]
-          : syntaxSpans(rendered).map((span, j) =>
+          : syntaxSpans(rendered, c).map((span, j) =>
               h(Text, { key: j, color: span.color }, span.text),
             )),
       );
     }),
   );
   const notesWidth = split ? width - codeWidth - 2 : width;
-  const visible = Math.max(1, Math.floor((height - 2) / 4)),
+  const visible = Math.max(1, Math.floor((height - 2) / stride)),
     first = Math.max(0, index - visible + 1);
   const notes = h(
     Box,
@@ -140,7 +143,7 @@ export function ReviewWorkspace({
       : null,
     ...(items.length
       ? rows(notesWidth)
-          .slice(first * 4, first * 4 + height - header)
+          .slice(first * stride, first * stride + height - header)
           .map((row, i) =>
             h(
               Text,

package/lib/rich-text.mjs

@@ -1,9 +1,9 @@
 import { clean } from "./client.mjs";
 import { wrap } from "./tui-model.mjs";
-import { colors as c } from "./theme.mjs";
+import { colors } from "./theme.mjs";
 
 // Small, predictable terminal renderer. HTML and terminal hyperlinks are never executed.
-export function syntaxSpans(text) {
+export function syntaxSpans(text, c = colors) {
   const pattern =
     /("(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|`[^`]*`|\/\/.*$|#.*$|\b(?:async|await|function|return|const|let|var|if|else|throw|new|class|import|from|export|def|None|True|False|true|false|null|try|catch|for|while)\b|\b\d+(?:\.\d+)?\b)/g;
   const parts = [];
@@ -27,7 +27,7 @@ export function syntaxSpans(text) {
   if (start < text.length) parts.push({ text: text.slice(start) });
   return parts;
 }
-export function markdownRows(value, width) {
+export function markdownRows(value, width, c = colors) {
   let fence = null,
     number = 0;
   const rows = [];
@@ -59,7 +59,7 @@ export function markdownRows(value, width) {
       const prefix = String(++number).padStart(4) + "  ";
       for (const [i, line] of wrap(raw, Math.max(1, width - 6)).entries()) {
         const text = (i ? "      " : prefix) + line;
-        rows.push({ text, spans: syntaxSpans(text) });
+        rows.push({ text, spans: syntaxSpans(text, c) });
       }
       continue;
     }