viewer.js

/**
 * Rendering library for opencode-trace logs.
 *
 * An opencode-trace log is a sequence of jsonl lines in an unterminated `<!` + `--` comment at the end of an HTML document.
 * This module extracts that log and renders each line as a collapsible tree-structure.
 *
 * There's a little bit of cleverness. This module uses a `render()` function to determine how nodes in the tree
 * should be rendered. Normally they're rendered in the normal way (primitives as leaf nodes, objects and arrays as
 * collapsible nodes whose children are recursively rendered). But if the `render()` function at any level returns
 * an object with special properties `{Symbol('TITLE'): ..., Symbol('INLINE'): ..., body: ..., open: ...}`
 * then that object decides how it should be rendered in the tree. Within an object/array, it will be rendered
 * as "▷ TITLE: INLINE" when collapsed, or "▽ TITLE" when expanded, with 'body' an object/array/primitive for
 * the contents of that expanded node. The `open` flag says whether it should be initially expanded.
 *
 * This module has special handling for REQUEST and RESPONSE json payloads for Opencode's communication with an LLM.
 */

const TITLE = Symbol('TITLE');
const INLINE = Symbol('INLINE');
// Invariant: the contents of [TITLE] and [INLINE] have both been escaped

/**
 * Turns an html string into a DOM node
 */
function fromHTML(html) {
  const t = document.createElement('template');
  t.innerHTML = html.trim();
  return t.content.firstElementChild;
}

/**
 * Escapes string for safe insertion into HTML
 */
function esc(s) {
  s = String(s ?? '');
  return s
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/\n/g, '<br/>')
    .replace(/\\n/g, '<br/>');
}

/**
 * Given a datstring in ISO format, returns HH:MM:SS
 */
function ts(data) {
  return data?._ts?.slice(11, 19) ?? '?';
}

/**
 * Puts a string onto a single line and truncates to 80 chars, for display in INLINE part of a node
 */
function short(s) {
  return String(s ?? '')
    .replace(/\n/g, ' ')
    .slice(0, 80);
}

/**
 * Interprets a message-content array into text for display.
 * If we're given undefined, returns an empty string.
 */
function contentText(contents) {
  if (typeof contents === 'string') return contents;
  if (!Array.isArray(contents)) return JSON.stringify(contents ?? '');
  let r = [];
  for (const c of contents ?? []) {
    const type = c && typeof c === 'object' ? deltaField(c, 'type') : undefined;
    const text = c && typeof c === 'object' ? deltaField(c, 'text') : c;
    if (type === 'input_text') {
      const raw = String(text ?? '');
      const divider = '## My request for Codex:';
      const i = raw.indexOf(divider);
      r.push(i < 0 ? raw : raw.slice(i + divider.length).replace(/^\s+/, ''));
    } else if (type === 'output_text' || type === 'text') {
      r.push(String(text ?? ''));
    } else r.push(`[${String(type ?? '?')}]`);
  }
  return r.join('\n');
}

/**
 * The payload uses deltas which rename keys, so instead of r.content we might
 * see r.*content or r.content+ or r.content-. This function gets whichever.
 */
function deltaField(data, key) {
  return deltaFieldInfo(data, key).value;
}

function deltaFieldInfo(data, key) {
  if (!data || typeof data !== 'object') return {value: undefined, marker: ''};
  if (data[key] !== undefined) return {value: data[key], marker: ''};
  if (data[`+${key}`] !== undefined) return {value: data[`+${key}`], marker: '[+] '};
  if (data[`${key}+`] !== undefined) return {value: data[`${key}+`], marker: '[+] '};
  if (data[`-${key}`] !== undefined) return {value: data[`-${key}`], marker: '[-] '};
  if (data[`${key}-`] !== undefined) return {value: data[`${key}-`], marker: '[-] '};
  if (data[`*${key}`] !== undefined) return {value: data[`*${key}`], marker: '[*] '};
  return {value: undefined, marker: ''};
}

function deltaMarker(data) {
  if (!data || typeof data !== 'object' || Array.isArray(data)) return '';
  const keys = Object.keys(data);
  if (keys.some(k => k.startsWith('*'))) return '[*] ';
  if (keys.some(k => k.startsWith('+') || k.endsWith('+'))) return '[+] ';
  if (keys.some(k => k.startsWith('-') || k.endsWith('-'))) return '[-] ';
  return '';
}

/**
 * Renders a sequence of payload elements from either OpenAI or Anthropic payloads.
 */
function renderPayload(elements) {
  if (!Array.isArray(elements)) return [];
  const payload = [];
  for (const e of elements) {
    const eContent = deltaField(e, 'content'); // because it might be e.content or e.*content or e.content+ or e.content-
    const eText = deltaField(e, 'text');
    const eOutput = deltaField(e, 'output');
    const eArguments = deltaField(e, 'arguments');
    const eInput = deltaField(e, 'input');
    const eMessage = deltaField(e, 'message') ?? deltaField(e, 'delta');
    const eName = deltaField(e, 'name');
    const eType = deltaField(e, 'type');
    const eRole = deltaField(e, 'role');
    const marker = deltaMarker(e);
    if (e === '...' || e === '...*' || e === '---') {
      continue;
    } else if (eMessage && typeof eMessage === 'object' && !Array.isArray(eMessage)) {
      // OpenAI chat-completion choices wrap the assistant message in an object here.
      payload.push(...renderPayload([eMessage]));
    } else if (
      eType === 'message' ||
      (eType === undefined && eRole !== undefined && eContent !== undefined)
    ) {
      const contents = Array.isArray(eContent) ? eContent : [eContent];
      contents.forEach(content => {
        if (content === '...' || content === '...*' || content === '---') {
          return;
        }
        const text = contentText(Array.isArray(eContent) ? [content] : content);
        payload.push({
          [TITLE]: `${marker}message(${esc(eRole)}): `,
          [INLINE]: esc(short(text)),
          body: text,
        });
      });
    } else if (eType === 'input_text' || eType === 'output_text' || eType === 'text') {
      payload.push({
        [TITLE]: `${marker}${eType}: `,
        [INLINE]: esc(short(String(eText ?? ''))),
        body: eText,
      });
    } else if (eType === 'function_call_output' || eType === 'tool_result') {
      const result =
        eType === 'function_call_output'
          ? typeof eOutput === 'string'
            ? eOutput
            : JSON.stringify(eOutput ?? '')
          : typeof eContent === 'string'
            ? eContent
            : contentText(eContent);
      payload.push({
        [TITLE]: marker,
        [INLINE]: `${esc(eType)}: ${esc(short(result))}`,
        body: e,
      });
    } else if (eType === 'function_call' || eType === 'tool_use') {
      let arg = '';
      try {
        const raw = eType === 'function_call' ? JSON.parse(eArguments) : eInput;
        const rawArg = raw?.cmd ?? raw?.pattern ?? raw;
        arg = typeof rawArg === 'string' ? rawArg : JSON.stringify(rawArg ?? '');
      } catch {
        arg = '...';
      }
      payload.push({
        [TITLE]: marker,
        [INLINE]: `${esc(eType)}: ${esc(eName ?? '???')}(${esc(short(arg))})`,
        body: e,
      });
    } else {
      payload.push({
        [TITLE]: marker,
        [INLINE]: esc(eType ?? '???'),
        body: e,
      });
    }
  }
  return payload;
}

/**
 * Renders a node in the tree.
 * If it looks like a REQUEST or RESPONSE payload (has ._kind property) then pretty-prints it.
 * The goal of this pretty-printing is not to be 100% faithful; instead it's solely to surface
 * to the users some of the most important lines, for their attention.
 * Otherwise, renders primtives, objects, arrays in the obvious way.
 */
function render(data, label) {
  const id = data?._id !== undefined ? ` #${esc(String(data._id))}` : '';
  const purpose = data?._purpose ? ` ${esc(String(data._purpose))}` : '';
  const isPrimary =
    data?._purpose === undefined ||
    data?._purpose === '' ||
    data?._purpose === '[turn]' ||
    data?._purpose === '[/responses]';
  if (data?.[TITLE] !== undefined) {
    return data;
  } else if (data?._kind === 'request') {
    const rendered = renderPayload(deltaField(data, 'input') ?? deltaField(data, 'messages'));
    const raw = {...data};
    delete raw._kind;
    const title = `REQUEST${id}${purpose}`;
    return {
      [TITLE]: `[${esc(ts(data))}] ${isPrimary ? `<b>${title}</b>` : title} `,
      body: [...rendered, {[TITLE]: 'raw', body: raw}],
      open: isPrimary,
    };
  } else if (data?._kind === 'response') {
    const payload = renderPayload(
      deltaField(data, 'output') ?? deltaField(data, 'content') ?? deltaField(data, 'choices'),
    );
    const raw = {...data};
    delete raw._kind;
    const title = `RESPONSE${id}${purpose}`;
    return {
      [TITLE]: `[${esc(ts(data))}] ${isPrimary ? `<b>${title}</b>` : title} `,
      body: [...payload, {[TITLE]: 'raw', body: raw}],
      open: isPrimary,
    };
  } else if (data?._kind === 'error') {
    const raw = {...data};
    return {
      [TITLE]: `[${esc(ts(data))}] <b>ERROR${id}${purpose}</b> `,
      [INLINE]: esc(short(data._error)),
      body: [
        data._error ?? '???',
        ...(data._stack ? [{[TITLE]: 'stack', body: data._stack}] : []),
        {[TITLE]: 'raw', body: raw},
      ],
      open: true,
    };
  } else if (data?._kind !== undefined && data?._ts !== undefined) {
    const raw = {...data};
    return {
      [TITLE]: `[${esc(ts(data))}] <b>${esc(data._kind)}</b> `,
      body: raw,
      open: true,
    };
  } else {
    return {
      [TITLE]: esc(label),
      [INLINE]: esc(
        Array.isArray(data)
          ? `[...${data.length} items]`
          : '{' +
              Object.keys(data)
                .map(k => `${JSON.stringify(k)}:`)
                .join(',') +
              '}',
      ),
      body: data,
      numbered: true,
    };
  }
}

function buildNode(data, label) {
  if (data && typeof data === 'object') {
    const r = render(data, label);
    const d = fromHTML(
      `<details><summary>${r[TITLE]}<output>${r[INLINE] ?? ''}</output></summary></details>`,
    );
    d.addEventListener(
      'toggle',
      () => {
        if (r.body === undefined) {
          // skip
        } else if (Array.isArray(r.body)) {
          r.body.forEach((item, i) =>
            d.appendChild(buildNode(item, r?.numbered ? `${i + 1}: ` : '')),
          );
        } else if (r.body && typeof r.body === 'object') {
          Object.keys(r.body).forEach(k =>
            d.appendChild(buildNode(r.body[k], `${JSON.stringify(k)}: `)),
          );
        } else {
          d.appendChild(buildNode(r.body, ''));
        }
      },
      {once: true},
    );
    d.open = r.open;
    return d;
  } else {
    return fromHTML(`<div>${esc(label)}${esc(JSON.stringify(data))}</div>`);
  }
}

window.addEventListener('DOMContentLoaded', () => {
  if (
    document.lastChild &&
    document.lastChild.nodeType === Node.COMMENT_NODE &&
    document.lastChild.data.trim()
  ) {
    for (const line of document.lastChild.data.split(/\r?\n/).filter(Boolean)) {
      let data = '';
      try {
        data = JSON.parse(line);
      } catch (e) {
        data = {error: String(e), raw: line};
      }
      const node = buildNode(data, 'json:');
      node.classList.add('log-entry');
      document.body.appendChild(node);
    }
  }
});