Keep your whole site in one design, and readable

import type { SiteClient } from '@fetchski/attract-cms-sdk';
import type { BaseChatModel } from '@langchain/core/language_models/chat_models';
import { MemorySaver } from '@langchain/langgraph';
import { ChatOpenRouter } from '@langchain/openrouter';
import { CompositeBackend, createDeepAgent, StateBackend } from 'deepagents';
import { todoListMiddleware } from 'langchain';
import { type Run, siteTools } from './tools.ts';

const CHECK = `You keep a small business website in one design: the same palette, fonts, section backgrounds
and button styles on every page, with text people can read. Different pages were built at different
times, so some drift: a section with its own one-off color, a stray font, a button shaped unlike the rest.

Your long-term memory is /memories/, kept between runs:
- /memories/site.md: the site's design: its palette and fonts, the patterns most pages share, and the
  owner's choices. It is loaded into your instructions at the start of every run.
- /memories/pages/<page>.md: one file per page, written by the style-collector. list_pages names each
  one, and knows from it whether the page changed since.

Work in this order:
1. Plan your work with write_todos.
2. Call read_site_design once, and list_pages once.
3. Hand every new or changed page to the style-collector subagent with the task tool, about eight at a
   time: give the id, title and memory file of each. Unchanged pages already have a current memory file;
   pages marked "next run" wait for a later run, so leave them out of this one.
4. Write /memories/site.md, or update it with edit_file if it already exists: the palette from
   read_site_design, which colors the site changed, the fonts, and the patterns most page files share:
   section backgrounds, heading and eyebrow colors, button variants and corners, font overrides.
5. Hand the page files to the contrast-checker subagent with the task tool, about ten at a time, each
   batch with its own findings file: /findings/contrast-1.md, /findings/contrast-2.md and so on.
6. Read the findings. Compare every page file with /memories/site.md, and write /findings/design.md: each
   outlier with its page, section path and field: a hex color off the palette where the site uses a
   palette token, a font or font override no other page uses, a button variant or corner unlike the
   rest, custom CSS that sets colors or fonts the palette already has.`;

const FIX = `
7. Where the site has two patterns and you can't tell which one is intended (two button corners, two
   eyebrow colors), call ask_owner once per choice: name each one and the pages that use it. Write the
   answer into /memories/site.md, so no later run asks again.
8. For each page with fixes a section setting can make (a one-off color back to its palette token, a
   button to the site's pattern, a text color that fails contrast), call save_style_changes once with
   every change on that page. The owner approves each page. If the owner sends one back with notes,
   change it to match and call save_style_changes again; if they skip one, don't try again.
   Site design (the palette and fonts) and custom CSS are never yours to change: suggest them instead.
9. Finish with a short summary: the contrast failures, the outliers, the drafts you saved, then
   "Suggested for Site design" (each palette or font change, with the pair it fixes) and "Check by eye"
   (each section with an image or video behind its text, and each pair the check couldn't measure).

Each ask_owner call asks ONE question. Write it in Markdown, with a blank line between paragraphs and
between list items.`;

const REPORT_ONLY = `
7. Nobody is at the keyboard for this run, and you can't change the site. Finish with a report for the
   owner: "Contrast" (each failing pair: page, section, field, theme, ratio and what it needs, the
   palette's own pairs first), "Outliers" (each with what the rest of the site does), "Suggested for
   Site design" (palette and font changes, with the pair each fixes) and "Check by eye" (each section
   with an image or video behind its text, and each pair the check couldn't measure).`;

const STYLE_COLLECTOR = `You record how website pages look. For each page you are given, call read_page_style,
then write its memory file (the path you are given) with write_file, in this shape:

# <title>
id: <id>
updated: <updated, copied exactly>
Page: <its own colors and settings, or none>

## <section path> (<section type>)
- background: dark <value>, light <value>
- <field>: dark <value>, light <value>   (one line per color; write "default" for '')
- settings: <field> <value>, <field> <value> (every setting)
- custom CSS: <the CSS, or none>

Copy every value exactly as read_page_style gives it; don't judge it. Answer with only the files you wrote.`;

const CONTRAST_CHECKER = `You check that the text on a website can be read. Read each page file you are
given with read_file. In each section, call check_contrast for every color that colors text or an icon
(fields named for a heading, title, eyebrow, intro, text, label, link, meta, quote, icon) against the
section's background: the dark value in the dark theme, the light value in the light theme. A solid
button's TextColor goes against its Color (its fill). Size: large for headings and big titles, ui for
icons and borders, normal for the rest. Skip colors that are "default": they follow the palette.

Write the findings file you are told, one line per failing pair:
- <page title> | <section path> <field> | <theme> | <ratio>, needs <needs>
Then "Check by eye:", one line per pair check_contrast couldn't measure, with its why. Answer with only
the file's path.`;

export interface AgentOptions {
  /** Nobody is at the keyboard: the agent only reports, with no tool to ask or to write. */
  reportOnly?: boolean;
}

/** The deep agent: our SDK's operations as its tools, two subagents, long-term memory, and the owner's approval before any draft is written. */
export function buildAgent(
  site: SiteClient,
  model: BaseChatModel,
  run: Run,
  log: (line: string) => void,
  { reportOnly = false }: AgentOptions = {}
) {
  const tools = siteTools(site, run, log);
  return createDeepAgent({
    model,
    systemPrompt: CHECK + (reportOnly ? REPORT_ONLY : FIX),
    tools: reportOnly
      ? [tools.readSiteDesign, tools.listPages]
      : [tools.readSiteDesign, tools.listPages, tools.askOwner, tools.saveStyleChanges],
    middleware: [todoListMiddleware()],
    subagents: [
      {
        name: 'style-collector',
        description: "Reads a batch of pages' styles and writes one memory file per page.",
        systemPrompt: STYLE_COLLECTOR,
        tools: [tools.readPageStyle]
      },
      {
        name: 'contrast-checker',
        description:
          'Checks every text color in a batch of page files against its background, and writes the failures to a findings file.',
        systemPrompt: CONTRAST_CHECKER,
        tools: [tools.checkContrast]
      }
    ],
    // Long-term memory: /memories/ is a folder on disk, kept between runs; every other file lives
    // for one run. site.md is loaded into the agent's instructions at the start of each run.
    backend: new CompositeBackend(new StateBackend(), { '/memories/': run.memories }),
    memory: ['/memories/site.md'],
    // Nothing is written without the owner: approve it, edit it, or reject it.
    interruptOn: { save_style_changes: { allowedDecisions: ['approve', 'edit', 'reject'] } },
    checkpointer: new MemorySaver()
  });
}

/** The OpenRouter model and settings named in .env. ChatOpenRouter reads OPENROUTER_API_KEY itself. */
export function modelFromEnv() {
  return new ChatOpenRouter({
    model: process.env.OPENROUTER_MODEL || '~google/gemini-flash-latest',
    temperature: Number(process.env.OPENROUTER_TEMPERATURE || 0),
    maxTokens: Number(process.env.OPENROUTER_MAX_TOKENS || 16000)
  });
}

import { resolve } from 'node:path';
import type { SiteClient } from '@fetchski/attract-cms-sdk';
import { interrupt } from '@langchain/langgraph';
import { FilesystemBackend } from 'deepagents';
import { tool } from 'langchain';
import { z } from 'zod';
import { listPages, readPageStyle, readSiteDesign, saveStyleChanges } from './content.ts';
import { checkContrast, paletteContrast } from './design.ts';
import { compareWithMemory, type PageStatus } from './memory.ts';

/** One run: the agent's long-term memory, the pages it listed, and the drafts it saved (id → title). */
export interface Run {
  memories: FilesystemBackend;
  pages: PageStatus[];
  saved: Map<string, string>;
}

/**
 * A fresh run. Its long-term memory is a folder on disk (MEMORY_FOLDER in .env, else `memories`), the
 * Deep Agents FilesystemBackend the agent sees as /memories/.
 */
export function newRun(memoryFolder = process.env.MEMORY_FOLDER || 'memories'): Run {
  const memories = new FilesystemBackend({ rootDir: resolve(memoryFolder), virtualMode: true });
  return { memories, pages: [], saved: new Map() };
}

/** Our SDK's operations, as the agent's tools. `log` shows the agent's progress. */
export function siteTools(site: SiteClient, run: Run, log: (line: string) => void) {
  // Site design is read once a run, by whichever tool needs it first.
  let design: ReturnType<typeof readSiteDesign> | undefined;
  const siteDesign = () => {
    design ??= readSiteDesign(site);
    return design;
  };

  const listPagesTool = tool(
    async () => {
      const { pages, removed } = await compareWithMemory(run.memories, await listPages(site));
      run.pages = pages;
      const count = (status: string) => pages.filter((page) => page.status === status).length;
      log(
        `Found ${pages.length} pages: ${count('new')} new, ${count('changed')} changed, ${count('unchanged')} unchanged.`
      );
      if (count('next run') > 0) {
        log(`${count('next run')} more wait for the next run (MAX_PAGES).`);
      }
      if (removed.length > 0) {
        log(`Forgot ${removed.length} page(s) that no longer exist.`);
      }
      return JSON.stringify(pages.map(({ updatedAt, ...page }) => page));
    },
    {
      name: 'list_pages',
      description:
        'Lists every page: id, title, status (new, changed or unchanged since the last run, or next run: left for a later run) and its memory file. Call it once.',
      schema: z.object({})
    }
  );

  const readSiteDesignTool = tool(
    async () => {
      const { palette, customized, fonts, customCss } = await siteDesign();
      log('Read Site design.');
      return JSON.stringify({
        palette,
        customized,
        paletteContrast: paletteContrast(palette),
        fonts,
        customCss
      });
    },
    {
      name: 'read_site_design',
      description:
        'Reads Site design: the palette in both themes (each token as a hex color), which palette colors the site changed, ' +
        'the contrast of the palette’s own text pairs, the three fonts, and the site-wide custom CSS.',
      schema: z.object({})
    }
  );

  const readPageStyleTool = tool(
    async (args) => {
      const style = await readPageStyle(site, args.id);
      log(`Read the style of "${style.title}".`);
      // The page's last-modified time, for its memory file: the next run compares it with the page's.
      const updated = run.pages.find((page) => page.id === args.id)?.updatedAt ?? '';
      return JSON.stringify({ updated, ...style });
    },
    {
      name: 'read_page_style',
      description:
        "Reads one page's look: when it last changed (updated), its own style settings, then each section's path, type, background in both themes, " +
        "colors (dark and light; '' means not set, so the palette's), other style settings and custom CSS.",
      schema: z.object({ id: z.string().describe('The id from list_pages') })
    }
  );

  const checkContrastTool = tool(
    async (args) => {
      const { palette } = await siteDesign();
      return JSON.stringify(
        checkContrast(args.text, args.background, args.theme, args.size, palette)
      );
    },
    {
      name: 'check_contrast',
      description:
        'Measures one text color against its background in one theme, by the WCAG 2.2 formula: the ratio, what AA ' +
        'needs (4.5 for normal text, 3 for large text and for icons and borders), and whether it passes. Takes colors ' +
        'as read_page_style gives them: a hex color, a palette token like --fetchski-accent, a background preset, or page.',
      schema: z.object({
        text: z.string().describe('The text (or icon) color'),
        background: z.string().describe('The background it sits on'),
        theme: z.enum(['dark', 'light']),
        size: z
          .enum(['normal', 'large', 'ui'])
          .describe('large: headings and big titles; ui: icons and borders')
      })
    }
  );

  const saveStyleChangesTool = tool(
    async (args) => {
      const answer = await saveStyleChanges(site, args.id, args.changes);
      if (answer.startsWith('Saved')) {
        run.saved.set(args.id, args.title);
      }
      return answer;
    },
    {
      name: 'save_style_changes',
      description:
        "Saves changes to ONE page's section settings as a draft, once the owner approves them: colors, backgrounds " +
        'and style settings, never custom CSS. `path` is the section path from read_page_style, a dot, and the field ' +
        '(sections.items.2.ctaRadius); `before` is the exact value read_page_style gave.',
      schema: z.object({
        id: z.string(),
        title: z.string().describe("The page's title, shown to the owner"),
        changes: z
          .array(z.object({ path: z.string(), before: z.string(), after: z.string() }))
          .min(1)
          .describe('Every change to this page, each at its path')
      })
    }
  );

  const askOwner = tool(
    // Pauses the run until the owner answers; their answer is the tool's result.
    async (args) => String(interrupt({ question: args.question })),
    {
      name: 'ask_owner',
      description: 'Asks the website owner one question, and waits for their answer.',
      schema: z.object({ question: z.string() })
    }
  );

  return {
    listPages: listPagesTool,
    readSiteDesign: readSiteDesignTool,
    readPageStyle: readPageStyleTool,
    checkContrast: checkContrastTool,
    saveStyleChanges: saveStyleChangesTool,
    askOwner
  };
}

/** The site's two themes. Dark is the default; visitors can switch to light. */
export type Theme = 'dark' | 'light';

/** Each palette token's color in each theme, as `#rrggbb`. */
export type Palette = Record<Theme, Record<string, string>>;

/** How big the text is: WCAG asks 4.5:1 for normal text, 3:1 for large text and for icons and borders. */
export type Size = 'normal' | 'large' | 'ui';

// The colors every site starts with, per palette token: [dark, light]. Site design → Colors
// overrides them; a field left empty there keeps these.
const BUILT_IN: Record<string, [string, string]> = {
  accent: ['#625bff', '#544dee'],
  'on-accent': ['#ffffff', '#ffffff'],
  mint: ['#34ddb3', '#0fa380'],
  coral: ['#ff8e63', '#d8551f'],
  surface: ['#09090b', '#e4e4e7'],
  raised: ['#18181b', '#d9d9de'],
  sunken: ['#0e0e11', '#cfcfd6'],
  hill: ['#121215', '#d8d8dd'],
  ink: ['#f4f4f5', '#18181b'],
  'ink-muted': ['#a1a1aa', '#52525b'],
  success: ['#34d399', '#059669'],
  warning: ['#fbbf24', '#d97706'],
  danger: ['#f87171', '#dc2626'],
  info: ['#60a5fa', '#2563eb']
};

// Site design → Colors: each field's palette token. A neutral's light color never borrows its dark one.
const PALETTE_FIELDS = {
  paletteAccent: 'accent',
  paletteOnAccent: 'on-accent',
  paletteSecondary: 'mint',
  paletteTertiary: 'coral',
  paletteLink: 'link',
  paletteSurface: 'surface',
  paletteRaised: 'raised',
  paletteSunken: 'sunken',
  paletteInk: 'ink',
  paletteInkMuted: 'ink-muted',
  paletteSuccess: 'success',
  paletteWarning: 'warning',
  paletteDanger: 'danger',
  paletteInfo: 'info'
} as const;
const NEUTRAL = new Set(['surface', 'raised', 'sunken', 'ink', 'ink-muted']);

/** The Global fields that hold the palette, both themes: `paletteAccent`, `paletteAccentLight`, … */
export const PALETTE_FIELD_NAMES = Object.keys(PALETTE_FIELDS).flatMap((field) => [
  field,
  `${field}Light`
]) as (keyof typeof PALETTE_FIELDS | `${keyof typeof PALETTE_FIELDS}Light`)[];

// The text and background pairs every page relies on: [text token, background token].
const PALETTE_PAIRS: [string, string][] = [
  ['ink', 'surface'],
  ['ink', 'raised'],
  ['ink-muted', 'surface'],
  ['on-accent', 'accent'],
  ['link', 'surface']
];

/** A color as `#rrggbb`, or null: `#rgb`, `#rrggbb`, and `#rrggbbff` (fully opaque) are read. */
function hex(value: string): string | null {
  const match = /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{6}ff)$/i.exec(value.trim());
  if (!match?.[1]) {
    return null;
  }
  const digits = match[1].slice(0, 6);
  const full = digits.length === 3 ? [...digits].map((c) => c + c).join('') : digits;
  return `#${full.toLowerCase()}`;
}

/** `share` of `top` laid over `bottom`, the way a browser paints a see-through color. */
function blend(top: string, bottom: string, share: number): string {
  const channels = (color: string) =>
    [1, 3, 5].map((at) => Number.parseInt(color.slice(at, at + 2), 16));
  const [a, b] = [channels(top), channels(bottom)];
  const mixed = a.map((value, index) => Math.round(value * share + (b[index] ?? 0) * (1 - share)));
  return `#${mixed.map((value) => value.toString(16).padStart(2, '0')).join('')}`;
}

/** The palette the site renders, from Global's palette fields over the built-in colors. */
export function resolvePalette(fields: Record<string, unknown>): Palette {
  const palette: Palette = { dark: {}, light: {} };
  const set = (name: string) => (typeof fields[name] === 'string' ? hex(fields[name]) : null);
  for (const [field, token] of Object.entries(PALETTE_FIELDS)) {
    const [darkDefault, lightDefault] = BUILT_IN[token] ?? [];
    const dark = set(field) ?? darkDefault;
    const light = set(`${field}Light`) ?? (NEUTRAL.has(token) ? null : set(field)) ?? lightDefault;
    if (dark) palette.dark[token] = dark;
    if (light) palette.light[token] = light;
  }
  for (const theme of ['dark', 'light'] as const) {
    const colors = palette[theme];
    colors.link ??= colors.accent ?? '';
    colors.hill = BUILT_IN.hill?.[theme === 'dark' ? 0 : 1] ?? '';
    // The soft accent tint is the accent, see-through, over the page.
    colors['accent-soft'] = blend(
      colors.accent ?? '',
      colors.surface ?? '',
      theme === 'dark' ? 0.16 : 0.14
    );
  }
  return palette;
}

/** The palette fields this site changed: the rest are the built-in colors. */
export function customizedFields(fields: Record<string, unknown>): string[] {
  return PALETTE_FIELD_NAMES.filter(
    (name) => typeof fields[name] === 'string' && fields[name] !== ''
  );
}

/**
 * A color as the site paints it in one theme: a hex color, a palette token (`--fetchski-accent`),
 * a background preset (`surface`, `accent-soft`) or `page` (no band: the page shows through).
 * Answers `#rrggbb`, or why it can't be measured.
 */
export function colorOf(
  value: string,
  theme: Theme,
  palette: Palette
): { color: string } | { why: string } {
  const text = value.trim();
  if (!text || text === 'default') {
    return { why: 'not set: it follows the palette' };
  }
  if (text === 'image or video') {
    return { why: 'the background is an image or video' };
  }
  const token =
    /^(?:var\()?--fetchski-([a-z-]+)\)?$/.exec(text)?.[1] ?? (text === 'page' ? 'surface' : text);
  const fromPalette = palette[theme][token];
  if (fromPalette) {
    return { color: fromPalette };
  }
  const color = hex(text);
  if (color) {
    return { color };
  }
  if (/^#[0-9a-f]{8}$/i.test(text)) {
    return { why: `${text} is partly see-through, so it depends on what is behind it` };
  }
  return { why: `"${text}" is not a plain color` };
}

function channel(value: number): number {
  const c = value / 255;
  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
}

/** WCAG 2.2 relative luminance of a `#rrggbb` color: 0 is black, 1 is white. */
export function luminance(color: string): number {
  const n = Number.parseInt(color.slice(1), 16);
  return (
    0.2126 * channel((n >> 16) & 255) + 0.7152 * channel((n >> 8) & 255) + 0.0722 * channel(n & 255)
  );
}

/** The WCAG contrast ratio of two `#rrggbb` colors, from 1 (none) to 21 (black on white). */
export function contrastRatio(a: string, b: string): number {
  const [light, dark] = [luminance(a), luminance(b)].sort((x, y) => y - x) as [number, number];
  return (light + 0.05) / (dark + 0.05);
}

/** One text and background pair, checked against WCAG AA. */
export type ContrastResult =
  | {
      theme: Theme;
      text: string;
      background: string;
      ratio: number;
      needs: number;
      passes: boolean;
    }
  | { theme: Theme; measured: false; why: string };

/** Checks a text color against its background in one theme. The math is here, never the model's. */
export function checkContrast(
  text: string,
  background: string,
  theme: Theme,
  size: Size,
  palette: Palette
): ContrastResult {
  const fore = colorOf(text, theme, palette);
  const back = colorOf(background, theme, palette);
  if ('why' in fore || 'why' in back) {
    const why =
      'why' in back ? `background: ${back.why}` : `text: ${'why' in fore ? fore.why : ''}`;
    return { theme, measured: false, why };
  }
  const ratio = contrastRatio(fore.color, back.color);
  const needs = size === 'normal' ? 4.5 : 3;
  return {
    theme,
    text: fore.color,
    background: back.color,
    ratio: Math.floor(ratio * 100) / 100,
    needs,
    passes: ratio >= needs
  };
}

/** The palette's own text pairs, checked in both themes. */
export function paletteContrast(palette: Palette): (ContrastResult & { pair: string })[] {
  return (['dark', 'light'] as const).flatMap((theme) =>
    PALETTE_PAIRS.map(([text, background]) => ({
      pair: `${text} on ${background}`,
      ...checkContrast(`--fetchski-${text}`, `--fetchski-${background}`, theme, 'normal', palette)
    }))
  );
}

import type { SiteClient } from '@fetchski/attract-cms-sdk';
import { customizedFields, PALETTE_FIELD_NAMES, type Palette, resolvePalette } from './design.ts';

/** A page, and when its draft last changed. */
export interface PageRow {
  id: string; // the draft's id, `…:en:draft`
  title: string;
  updatedAt: string;
}

/** A color field in both themes, as stored: '' when it isn't set (the section's default, from the palette). */
export interface ColorField {
  field: string;
  dark: string;
  light: string;
}

/** One section's look: where it sits, its background in each theme, its colors, its other settings, its custom CSS. */
export interface SectionStyle {
  path: string;
  type: string;
  background: { dark: string; light: string } | null;
  colors: ColorField[];
  settings: Record<string, unknown>;
  customCss: string;
}

/** One change to a section's setting: the value at `path` goes from `before` to `after`. */
export interface Change {
  path: string;
  before: string;
  after: string;
}

// The page fields that hold sections. Fixes are made inside these only.
const AREAS = ['sections', 'aboveSections', 'belowSections'] as const;

// Settings that are part of a section's look (colors and backgrounds are read on their own).
const SETTING = /variant|radius|shape|style|size|weight|animation|width|font/i;
const COLOR = /Color$/;
const BACKGROUND = /Bg(Light)?(Custom)?$/;

/** Every page on the site, as drafts: the latest version, published or not. */
export async function listPages(site: SiteClient): Promise<PageRow[]> {
  const pages = await site
    .pages()
    .listPagesPick(['title', 'type', 'updatedAt'], { aposMode: 'draft' });
  return pages
    .filter((page) => page.type !== '@apostrophecms/archive-page')
    .map((page) => ({ id: page.id, title: String(page.title), updatedAt: String(page.updatedAt) }));
}

/** The site's design from Site design: the palette in both themes, the fonts and the site-wide custom CSS. */
export async function readSiteDesign(site: SiteClient) {
  const fonts = ['Display', 'Body', 'Accent'] as const;
  const fontFields = fonts.flatMap((slot) => [
    `font${slot}Source`,
    `font${slot}Curated`,
    `font${slot}CdnFamily`
  ]) as `font${(typeof fonts)[number]}${'Source' | 'Curated' | 'CdnFamily'}`[];
  const [global = {}] = await site
    .globalContent()
    .listGlobalContentPick([...PALETTE_FIELD_NAMES, ...fontFields, 'designCss']);
  const fields = global as Record<string, unknown>;
  const font = (slot: string) => {
    const source = String(fields[`font${slot}Source`] ?? 'default');
    if (source === 'curated') return String(fields[`font${slot}Curated`]);
    if (source === 'cdn') return String(fields[`font${slot}CdnFamily`]);
    return source === 'upload' ? 'uploaded font files' : 'the built-in font';
  };
  return {
    palette: resolvePalette(fields) satisfies Palette,
    customized: customizedFields(fields),
    fonts: { display: font('Display'), body: font('Body'), accent: font('Accent') },
    customCss: cssOf(fields.designCss)
  };
}

/** A custom CSS field's CSS: the site stores `{ css }`. */
function cssOf(value: unknown): string {
  if (typeof value === 'string') return value;
  return value && typeof value === 'object' ? String((value as { css?: unknown }).css ?? '') : '';
}

/** A section's background in each theme: a palette preset, a hex color, `page` (none) or `image or video`. */
function backgroundOf(widget: Record<string, unknown>): SectionStyle['background'] {
  for (const [key, value] of Object.entries(widget)) {
    if (/BackgroundType$/.test(key) && (value === 'image' || value === 'video')) {
      return { dark: 'image or video', light: 'image or video' };
    }
  }
  const select = Object.keys(widget).find((key) => key.endsWith('Bg'));
  if (!select) {
    return null;
  }
  const pick = (choice: unknown, custom: unknown) =>
    choice === 'custom'
      ? String(custom ?? '')
      : !choice || choice === 'transparent'
        ? 'page'
        : String(choice);
  const dark = pick(widget[select], widget[`${select}Custom`]);
  const lightChoice = widget[`${select}Light`];
  const light =
    !lightChoice || lightChoice === 'inherit'
      ? dark
      : pick(lightChoice, widget[`${select}LightCustom`]);
  return { dark, light };
}

/** The look of one widget's own fields: its colors (with their light twins) and its other settings. */
function lookOf(fields: Record<string, unknown>) {
  const colors: ColorField[] = [];
  const settings: Record<string, unknown> = {};
  for (const [key, value] of Object.entries(fields)) {
    if (key.startsWith('_') || value === '' || value === null || value === undefined) continue;
    const field = key.replace(/Light$/, '');
    if (COLOR.test(field)) {
      if (!colors.some((color) => color.field === field)) {
        const dark = String(fields[field] ?? '');
        colors.push({ field, dark, light: String(fields[`${field}Light`] || dark) });
      }
    } else if (SETTING.test(key) && !BACKGROUND.test(key)) {
      if (typeof value !== 'object' || (Array.isArray(value) && value.length > 0)) {
        settings[key] = value;
      }
    }
  }
  return { colors, settings };
}

/** Every section in an area with its path, and the widgets nested in it (a layout's columns) that have a look of their own. */
function sectionsIn(area: unknown, path: string, into: SectionStyle[], nested = false) {
  const items = (area as { items?: unknown[] } | undefined)?.items ?? [];
  for (const [index, item] of items.entries()) {
    const widget = item as Record<string, unknown>;
    const at = `${path}.items.${index}`;
    const { colors, settings } = lookOf(widget);
    const section = {
      path: at,
      type: String(widget.type),
      background: backgroundOf(widget),
      colors,
      settings,
      customCss: cssOf(widget.sectionCss)
    };
    if (
      !nested ||
      section.background ||
      colors.length ||
      Object.keys(settings).length ||
      section.customCss
    ) {
      into.push(section);
    }
    for (const [key, value] of Object.entries(widget)) {
      if ((value as { metaType?: string } | null)?.metaType === 'area') {
        sectionsIn(value, `${at}.${key}`, into, true);
      }
    }
  }
}

/** A page's draft, as a plain object. */
async function readDraft(site: SiteClient, id: string): Promise<Record<string, unknown>> {
  return { ...(await site.pages().getPage({ id: id.replace(/:published$/, ':draft') })) };
}

/** A page's look: its own style settings, then every section's. */
export async function readPageStyle(site: SiteClient, id: string) {
  const page = await readDraft(site, id);
  const sections: SectionStyle[] = [];
  for (const area of AREAS) {
    sectionsIn(page[area], area, sections);
  }
  const own = Object.fromEntries(
    Object.entries(page).filter(
      ([key]) => !(AREAS as readonly string[]).includes(key) && !key.startsWith('seo')
    )
  );
  return { title: String(page.title), page: lookOf(own), sections };
}

/** Why a change can't be saved, or null when it can. */
function refusal(change: Change): string | null {
  const [area = '', ...rest] = change.path.split('.');
  const field = rest.at(-1) ?? '';
  if (!(AREAS as readonly string[]).includes(area) || rest.length < 3) {
    return `"${change.path}" is not a section's setting. Page settings, Site design and fonts are the owner's: put it in your summary.`;
  }
  if (/css/i.test(field)) {
    return `"${change.path}" is custom CSS. Writing CSS needs the global:css scope, which this key doesn't have: put the CSS change in your summary.`;
  }
  const isColor = COLOR.test(field.replace(/Light$/, ''));
  if (!isColor && !SETTING.test(field) && !BACKGROUND.test(field)) {
    return `"${field}" is not a color, background or style setting.`;
  }
  if (
    isColor &&
    change.after &&
    !/^(#[0-9a-f]{3}|#[0-9a-f]{6}|#[0-9a-f]{8}|--fetchski-[a-z-]+)$/i.test(change.after)
  ) {
    return `"${change.after}" is not a color the site takes: write a palette token such as --fetchski-accent, or a hex color such as #1f2937.`;
  }
  return null;
}

/**
 * Writes the changes to the page's DRAFT. Each change must still match what the agent read
 * (`before`), so an edit someone made meanwhile is never overwritten. Answers in words, for the agent.
 */
export async function saveStyleChanges(
  site: SiteClient,
  id: string,
  changes: readonly Change[]
): Promise<string> {
  const draftId = id.replace(/:published$/, ':draft');
  const page = await readDraft(site, draftId);
  const areas = new Map<string, Record<string, unknown>>();
  for (const change of changes) {
    const refused = refusal(change);
    if (refused) {
      return `Not saved: ${refused}`;
    }
    const [area = '', ...rest] = change.path.split('.');
    if (!areas.has(area)) {
      areas.set(area, structuredClone(page[area]) as Record<string, unknown>);
    }
    let parent = areas.get(area);
    for (const key of rest.slice(0, -1)) {
      parent = parent?.[key] as Record<string, unknown> | undefined;
    }
    const last = rest.at(-1) ?? '';
    if (!parent || String(parent[last] ?? '') !== change.before) {
      return `Not saved: "${change.path}" changed since you read it. Read the page again.`;
    }
    parent[last] = change.after;
  }
  await site.pages().updatePage({
    id: draftId,
    sections: areas.get('sections'),
    aboveSections: areas.get('aboveSections'),
    belowSections: areas.get('belowSections')
  });
  return `Saved ${changes.length} change(s) to the draft of ${draftId}. Nothing is live until a person publishes it.`;
}

/** A private link to a page's draft, for anyone you send it to: no sign-in. */
export async function previewLink(site: SiteClient, id: string): Promise<string> {
  const page = await readDraft(site, id);
  const shared = await site.pages().sharePage({ id, share: true });
  return `${String(page.url)}?${new URLSearchParams({ aposShareKey: shared.aposShareKey ?? '', aposShareId: id })}`;
}

import type { FilesystemBackend } from 'deepagents';
import type { PageRow } from './content.ts';

/** A page, and whether it changed since its memory file was written. */
export interface PageStatus extends PageRow {
  status: 'new' | 'changed' | 'unchanged' | 'next run';
  memoryFile: string; // where the agent keeps its notes on this page
}

/** The most new or changed pages one run reads: a ceiling on time and AI cost. The rest wait for the next run. */
export const MAX_PAGES = Number(process.env.MAX_PAGES || 80);

/** A page's memory file, as the agent sees it: `/memories/pages/<page>.md`. */
export function memoryFileFor(id: string): string {
  return `/memories/pages/${id.split(':')[0]}.md`;
}

/** The same file inside the memories backend, which is mounted at /memories/. */
const inMemories = (file: string) => file.replace(/^\/memories/, '');

/** The page's last-modified time, from the `updated:` line the style-collector copies into its memory file. */
async function updatedInMemory(memories: FilesystemBackend, id: string) {
  const note = await memories.read(inMemories(memoryFileFor(id)), 0, 5);
  return note.error ? null : (/^updated: (.+)$/m.exec(String(note.content))?.[1]?.trim() ?? '');
}

/**
 * Compares every page with its memory file: new (no file yet), changed (the page's last-modified time
 * isn't the one its file records) or unchanged. Past MAX_PAGES, a new or changed page waits for the
 * next run. A changed page's old file is deleted for the style-collector to write again, and the files
 * of pages that no longer exist are deleted.
 */
export async function compareWithMemory(
  memories: FilesystemBackend,
  pages: readonly PageRow[]
): Promise<{ pages: PageStatus[]; removed: string[] }> {
  const statuses: PageStatus[] = [];
  let toRead = 0;
  for (const page of pages) {
    const updated = await updatedInMemory(memories, page.id);
    let status: PageStatus['status'] =
      updated === null ? 'new' : updated === page.updatedAt ? 'unchanged' : 'changed';
    if (status !== 'unchanged' && ++toRead > MAX_PAGES) {
      status = 'next run';
    }
    if (status === 'changed') {
      await memories.delete(inMemories(memoryFileFor(page.id)));
    }
    statuses.push({ ...page, status, memoryFile: memoryFileFor(page.id) });
  }
  const live = new Set(statuses.map((page) => inMemories(page.memoryFile)));
  const removed = ((await memories.ls('/pages/')).files ?? [])
    .map((file) => file.path)
    .filter((path) => !live.has(path));
  for (const path of removed) {
    await memories.delete(path);
  }
  return { pages: statuses, removed };
}

import { randomUUID } from 'node:crypto';
import { Command } from '@langchain/langgraph';
import type { buildAgent } from './agent.ts';
import type { Change } from './content.ts';
import type { Usage } from './usage.ts';

/** A draft the agent wants to save: the document, and every change to it. */
export interface Draft {
  kind: string;
  title: string;
  changes: Change[];
}

/** Your call on a draft: save it all, keep some changes, send it back with notes, or skip it. */
export type Choice =
  | { type: 'all' }
  | { type: 'some'; keep: number[] }
  | { type: 'revise'; feedback: string }
  | { type: 'skip'; reason: string };

/** The person at the keyboard. src/terminal.ts is the real one; the tests script one. */
export interface Owner {
  /** The agent is working (a spinner, in the terminal). */
  busy?(): void;
  /** Answers the agent's question. */
  answer(question: string): Promise<string>;
  /** Decides on a draft the agent wants to save. */
  decide(draft: Draft): Promise<Choice>;
}

/** Nobody at the keyboard: a report-only run, whose agent has no tool to ask or to save. */
export const nobody: Owner = {
  answer: async () => {
    throw new Error('A report-only run never asks.');
  },
  decide: async () => {
    throw new Error('A report-only run never saves.');
  }
};

interface ActionRequest {
  name: string;
  args: { kind?: string; id?: string; title?: string; changes?: Change[] };
}

type Decision =
  | { type: 'approve' }
  | { type: 'reject'; message: string }
  | { type: 'edit'; editedAction: { name: string; args: ActionRequest['args'] } };

/** The most steps (model calls and tool calls) one run may take: a ceiling on AI cost. */
const MAX_STEPS = Number(process.env.AGENT_MAX_STEPS ?? 400);

/**
 * Runs the agent to the end. Each time it pauses, the owner answers its question, or decides on the
 * drafts it wants to write. Resolves the agent's closing summary.
 */
export async function runWithOwner(
  agent: ReturnType<typeof buildAgent>,
  task: string,
  owner: Owner,
  usage?: Usage
): Promise<string> {
  // `usage` counts every model call's tokens and cost, the subagents' too.
  const config = {
    configurable: { thread_id: randomUUID() },
    recursionLimit: MAX_STEPS,
    callbacks: usage ? [usage] : []
  };
  let input: Parameters<typeof agent.invoke>[0] = { messages: [{ role: 'user', content: task }] };

  for (;;) {
    owner.busy?.();
    const result = await agent.invoke(input, config);
    // Several rewriters can pause at once: each pause gets its own answer, by its id.
    const pending = result.__interrupt__ ?? [];
    if (pending.length === 0) {
      const last = result.messages.at(-1);
      return typeof last?.content === 'string' ? last.content : JSON.stringify(last?.content ?? '');
    }

    const answers: Record<string, unknown> = {};
    for (const { id, value } of pending) {
      const paused = value as { question?: string; actionRequests?: ActionRequest[] };
      if (paused.question) {
        answers[String(id)] = await owner.answer(paused.question);
        continue;
      }
      const decisions: Decision[] = [];
      for (const action of paused.actionRequests ?? []) {
        decisions.push(await review(action, owner));
      }
      answers[String(id)] = { decisions };
    }
    input = new Command({ resume: answers });
  }
}

/** Your choice, in the form the agent's approval step takes: approve, edit (fewer changes) or reject. */
async function review(action: ActionRequest, owner: Owner): Promise<Decision> {
  const changes = action.args.changes ?? [];
  const choice = await owner.decide({
    kind: action.args.kind ?? 'page',
    title: action.args.title ?? '',
    changes
  });

  switch (choice.type) {
    case 'all':
      return { type: 'approve' };
    case 'some': {
      const kept = changes.filter((_, index) => choice.keep.includes(index));
      if (kept.length === 0) {
        return {
          type: 'reject',
          message: 'The owner kept none of these changes. Do not try them again.'
        };
      }
      return {
        type: 'edit',
        editedAction: { name: action.name, args: { ...action.args, changes: kept } }
      };
    }
    case 'revise':
      return {
        type: 'reject',
        message:
          `Not saved yet: the owner wants changes first. Their words: "${choice.feedback}". ` +
          'Revise your changes to match, then call the same tool again with every change.'
      };
    case 'skip':
      return {
        type: 'reject',
        message: `The owner skipped this draft${choice.reason ? `: ${choice.reason}` : ''}. Do not try it again.`
      };
  }
}

import { stdout } from 'node:process';
import { stripVTControlCharacters, styleText } from 'node:util';
import * as prompt from '@clack/prompts';
import { diffWordsWithSpace } from 'diff';
import { Marked, type Tokens } from 'marked';
import stringWidth from 'string-width';
import yoctoSpinner from 'yocto-spinner';
import type { Change } from './content.ts';
import type { Choice, Draft, Owner } from './review.ts';
import type { Usage } from './usage.ts';

/** You pressed Ctrl+C or Esc at a prompt: the run stops, and the drafts saved so far stay drafts. */
export class Stopped extends Error {}

/**
 * The person at the keyboard, in the terminal: a spinner while the agent works, with what it is
 * doing and what the run has used so far; its words as formatted text.
 */
export function terminalOwner(usage?: Usage): Owner & {
  step: (line: string) => void;
  report: (markdown: string) => void;
  failed: (error: unknown) => void;
} {
  // yocto-spinner's own dots; each frame redraws in one synchronized write, so it never flickers.
  const spin = yoctoSpinner({ stream: stdout });
  // Like yocto-spinner, only a terminal (not TERM=dumb, outside CI) gets live updates; anywhere
  // else each one would print a new line, so output sent to a file gets the start and the steps.
  const live = Boolean(stdout.isTTY) && process.env.TERM !== 'dumb' && !('CI' in process.env);
  let spinning = false;
  let started = 0;
  let clock: NodeJS.Timeout | undefined;
  let steps: string[] = [];
  let doing = 'The agent is working';

  // What the agent is doing, then the tokens, cost and time so far: one line, never wrapped.
  // On a narrow terminal the tokens and cost go first, then the time, before the task is cut.
  const line = () => {
    const seconds = Math.floor((Date.now() - started) / 1000);
    const time = seconds >= 60 ? `${Math.floor(seconds / 60)}m ${seconds % 60}s` : `${seconds}s`;
    const spent = usage && `${tokens(usage)} · $${usage.cost.toFixed(4)}`;
    const width = (stdout.columns || 80) - 3;
    const tail =
      [[spent, time], [time]]
        .map((parts) => parts.filter(Boolean).join(' · '))
        .find((text) => width - stringWidth(text) - 2 >= Math.min(stringWidth(doing), 20)) ?? '';
    const room = tail ? width - stringWidth(tail) - 2 : width;
    return tail ? `${fit(doing, room)}  ${styleText('dim', tail)}` : fit(doing, room);
  };
  const withUsage = (text: string) =>
    usage ? `${text}  ${styleText('dim', `${tokens(usage)} · $${usage.cost.toFixed(4)}`)}` : text;
  const refresh = () => {
    if (spinning && live) {
      spin.text = line();
    }
  };
  if (usage) {
    usage.onCall = refresh;
  }

  // The spinner sits on the run's guide line, like the rest of the terminal.
  const startSpinner = () => {
    started = Date.now();
    spinning = true;
    stdout.write(`${styleText('gray', prompt.S_BAR)}\n`);
    spin.start(line());
    if (live) {
      clock = setInterval(refresh, 1000);
    }
  };
  const stopSpinner = (finish: () => void) => {
    clearInterval(clock);
    spin.stop();
    spinning = false;
    finish();
  };

  // What the agent did since you last heard from it, as one dim line.
  const settle = () => {
    if (spinning) {
      const done = withUsage(styleText('dim', steps.join(' · ') || 'Done'));
      stopSpinner(() => prompt.log.step(done, { spacing: 0 }));
    }
    steps = [];
  };

  return {
    busy() {
      if (!spinning) {
        doing = 'The agent is working';
        startSpinner();
      }
    },
    step(text) {
      doing = text.replace(/\.$/, '');
      steps.push(doing);
      refresh();
    },
    async answer(question) {
      settle();
      say(markdown(question), 'cyan');
      return ask(() =>
        prompt.text({ message: 'Your answer', placeholder: 'Type, then press Enter' })
      );
    },
    async decide(draft) {
      settle();
      say(
        [
          styleText('bold', `Save a draft of the ${draft.kind} "${draft.title}"?`),
          ...draft.changes.map((change, index) => showChange(change, index))
        ].join('\n\n'),
        'cyan'
      );
      return decide(draft);
    },
    /** Shows the run's report. */
    report(text) {
      settle();
      say(markdown(text), 'green');
    },
    /** The run stopped on an error: the spinner says so, and the error follows. */
    failed(error) {
      if (spinning) {
        stopSpinner(() => prompt.log.error('The run stopped', { spacing: 0 }));
      }
      prompt.log.error(error instanceof Error ? error.message : String(error));
    }
  };
}

/** "183,204 tokens": read and written together. */
function tokens(usage: Usage): string {
  return `${new Intl.NumberFormat('en-US').format(usage.inputTokens + usage.outputTokens)} tokens`;
}

/**
 * Text cut to a number of terminal cells, never through a character (an emoji counts as two).
 * yocto-spinner counts a line in UTF-16 code units, which can outnumber its cells (a family emoji
 * is 8), so the cut keeps both within the limit.
 */
function fit(text: string, cells: number): string {
  const size = (part: string) => Math.max(stringWidth(part), part.length);
  if (size(text) <= cells) {
    return text;
  }
  let cut = '';
  for (const { segment } of new Intl.Segmenter().segment(text)) {
    if (size(`${cut}${segment}…`) > cells) {
      break;
    }
    cut += segment;
  }
  return `${cut}…`;
}

/** Prints a block beside the run's guide line, each line wrapped to the terminal's width. */
function say(text: string, color: 'cyan' | 'green') {
  prompt.log.message(wrap(text, (stdout.columns || 80) - 4), { symbol: styleText(color, '◆') });
}

// The terminal's color and style codes (ESC [ … m), as styleText writes them.
const STYLE_CODES = new RegExp(`${String.fromCharCode(27)}\\[[\\d;]*m`, 'g');

/** Wraps each line at spaces, keeping its indent on the lines it wraps onto. Colors don't count. */
export function wrap(text: string, width: number): string {
  const visible = (line: string) => stripVTControlCharacters(line).length;
  return text
    .split('\n')
    .map((line) => {
      // A wrapped line sits under the text, past any list number or bullet.
      const lead =
        /^( *)((\d+\.|•|before|after ) )?/.exec(stripVTControlCharacters(line))?.[0] ?? '';
      const indent = ' '.repeat(lead.length);
      const words = line.trimStart().split(' ');
      const lines: string[] = [];
      let current = line.slice(0, line.length - line.trimStart().length) + (words.shift() ?? '');
      for (const word of words) {
        if (visible(`${current} ${word}`) > width && current.trim()) {
          // The colors in force so far carry onto the next line: the guide line resets them.
          const colors = (lines.join('') + current).match(STYLE_CODES)?.join('') ?? '';
          lines.push(`${current}\x1b[0m`);
          current = indent + colors + word;
        } else {
          current = `${current} ${word}`;
        }
      }
      lines.push(current);
      return lines.join('\n');
    })
    .join('\n');
}

/** Starts and ends the run's frame in the terminal. */
export const intro = (title: string) => prompt.intro(styleText(['bgCyan', 'black'], ` ${title} `));
export const outro = (line: string) => prompt.outro(line);
export const note = (line: string) => prompt.log.info(line);

async function decide(draft: Draft): Promise<Choice> {
  const many = draft.changes.length > 1;
  const choice = await ask(() =>
    prompt.select({
      message: 'Your call',
      options: [
        { value: 'all', label: many ? `Save all ${draft.changes.length} changes` : 'Save it' },
        ...(many ? [{ value: 'some', label: 'Pick which changes to keep' }] : []),
        { value: 'revise', label: 'Tell the agent what to change', hint: 'it tries again' },
        { value: 'skip', label: 'Skip this one', hint: 'nothing is saved' }
      ]
    })
  );
  if (choice === 'some') {
    const keep = await ask(() =>
      prompt.multiselect({
        message: 'Keep these (Space to toggle, Enter to save)',
        options: draft.changes.map((change, index) => ({
          value: index,
          label: `${index + 1}. ${plain(change.after)}`
        })),
        initialValues: draft.changes.map((_, index) => index),
        required: false
      })
    );
    return { type: 'some', keep };
  }
  if (choice === 'revise') {
    return {
      type: 'revise',
      feedback: await ask(() =>
        prompt.text({
          message: 'What should change?',
          validate: (value) => (value?.trim() ? undefined : 'Say what should change.')
        })
      )
    };
  }
  if (choice === 'skip') {
    return {
      type: 'skip',
      reason: await ask(() =>
        prompt.text({ message: 'Why? (optional, the agent reads it)', defaultValue: '' })
      )
    };
  }
  return { type: 'all' };
}

/** Waits for one prompt; Ctrl+C or Esc stops the run. */
async function ask<T>(show: () => Promise<T | symbol>): Promise<Exclude<T, symbol>> {
  const value = await show();
  if (prompt.isCancel(value)) {
    throw new Stopped('You stopped the run.');
  }
  return value as Exclude<T, symbol>;
}

/**
 * One change, numbered: the text before and after, whole, with the words that change marked (red
 * and struck through before, green after). Still readable with the colors gone, pasted elsewhere.
 */
export function showChange(change: Change, index: number): string {
  const parts = diffWordsWithSpace(change.before, change.after);
  const kept = parts.filter((part) => !part.added && !part.removed);
  const label = `${styleText(['bold', 'cyan'], `${index + 1}.`)} ${styleText('dim', change.path)}`;
  // Mostly rewritten: the old text in red and the new in green, with no marks to read through.
  if (
    kept
      .map((part) => part.value)
      .join('')
      .trim().length <
    change.after.length / 2
  ) {
    return [
      label,
      `   ${styleText('dim', 'before')} ${styleText('red', change.before)}`,
      `   ${styleText('dim', 'after ')} ${styleText('green', change.after)}`
    ].join('\n');
  }
  const side = (drop: 'added' | 'removed', mark: Parameters<typeof styleText>[0]) =>
    parts
      .filter((part) => !part[drop])
      .map((part) =>
        part.added || part.removed ? styleText(mark, part.value) : dimTags(part.value)
      )
      .join('');
  return [
    label,
    `   ${styleText('dim', 'before')} ${side('added', ['red', 'strikethrough'])}`,
    `   ${styleText('dim', 'after ')} ${side('removed', ['green', 'bold'])}`
  ].join('\n');
}

/** Rich text's HTML tags, dimmed, so the words stand out. */
const dimTags = (text: string) => text.replace(/<[^>]+>/g, (tag) => styleText('dim', tag));

/** Text with its HTML tags taken out, on one line, for a short label. */
function plain(text: string, max = 70): string {
  const flat = text
    .replace(/<[^>]+>/g, ' ')
    .replace(/\s+/g, ' ')
    .trim();
  return flat.length > max ? `${flat.slice(0, max - 1)}…` : flat;
}

// The agent writes Markdown. This renders it for the terminal, with a blank line after every
// paragraph and every list item, so a long answer reads as separate blocks, not a wall of text.
const terminal = new Marked({
  renderer: {
    heading({ tokens }) {
      return `${styleText(['bold', 'cyan'], this.parser.parseInline(tokens))}\n\n`;
    },
    paragraph({ tokens }) {
      return `${this.parser.parseInline(tokens)}\n\n`;
    },
    list(list: Tokens.List) {
      const start = typeof list.start === 'number' ? list.start : 1;
      return list.items
        .map((item, index) => {
          const bullet = list.ordered ? `${start + index}.` : '•';
          const body = this.parser.parse(item.tokens).trim();
          // Lines under the first are indented to sit under its text.
          const pad = ' '.repeat(bullet.length + 1);
          return `${styleText('cyan', bullet)} ${body.replace(/\n/g, `\n${pad}`)}\n\n`;
        })
        .join('');
    },
    text(token) {
      return 'tokens' in token && token.tokens ? this.parser.parseInline(token.tokens) : token.text;
    },
    strong({ tokens }) {
      return styleText('bold', this.parser.parseInline(tokens));
    },
    em({ tokens }) {
      return styleText('italic', this.parser.parseInline(tokens));
    },
    codespan({ text }) {
      return styleText('cyan', text);
    },
    code({ text }) {
      return `${styleText('cyan', text)}\n\n`;
    },
    blockquote({ tokens }) {
      return `${styleText('dim', `│ ${this.parser.parse(tokens).trim().replace(/\n/g, '\n│ ')}`)}\n\n`;
    },
    link({ href, tokens }) {
      const text = this.parser.parseInline(tokens);
      return text === href
        ? styleText('underline', href)
        : `${text} ${styleText('dim', `(${href})`)}`;
    },
    hr() {
      return `${styleText('dim', '─'.repeat(Math.min(stdout.columns || 60, 60)))}\n\n`;
    },
    br() {
      return '\n';
    },
    html({ text }) {
      return text;
    }
  }
});

/** The agent's Markdown, formatted for the terminal. */
export function markdown(text: string): string {
  return String(terminal.parse(text, { async: false })).trim();
}