@renxqoo/renx-code 0.0.3 → 0.0.4

package/src/runtime/terminal-theme.ts

@@ -0,0 +1,196 @@
+/* global NodeJS */
+
+export type RgbColor = {
+  r: number;
+  g: number;
+  b: number;
+};
+
+export type TerminalBackgroundMode = 'dark' | 'light';
+export type TerminalBackgroundProbe = {
+  mode: TerminalBackgroundMode;
+  rawColor: string | null;
+};
+export type TerminalColorProbe = {
+  rawBackgroundColor: string | null;
+  rawForegroundColor: string | null;
+  mode: TerminalBackgroundMode;
+};
+
+// eslint-disable-next-line no-control-regex
+const OSC10_PATTERN = /\x1b]10;([^\x07\x1b]+)/;
+// eslint-disable-next-line no-control-regex
+const OSC11_PATTERN = /\x1b]11;([^\x07\x1b]+)/;
+
+const wrapOscForTmux = (osc: string) => {
+  if (!process.env['TMUX']) {
+    return osc;
+  }
+
+  return `\x1bPtmux;\x1b${osc}\x1b\\`;
+};
+
+const writeOsc = (osc: string) => {
+  if (!process.stdout.isTTY) {
+    return;
+  }
+
+  try {
+    process.stdout.write(wrapOscForTmux(osc));
+  } catch {
+    // Ignore errors when writing to stdout
+  }
+};
+
+export const parseTerminalColor = (value: string): RgbColor | null => {
+  if (value.startsWith('rgb:')) {
+    const parts = value.slice(4).split('/');
+    if (parts.length !== 3 || !parts[0] || !parts[1] || !parts[2]) {
+      return null;
+    }
+
+    const [rHex, gHex, bHex] = parts;
+    const r16 = Number.parseInt(rHex, 16);
+    const g16 = Number.parseInt(gHex, 16);
+    const b16 = Number.parseInt(bHex, 16);
+    if (Number.isNaN(r16) || Number.isNaN(g16) || Number.isNaN(b16)) {
+      return null;
+    }
+
+    return {
+      r: r16 >> 8,
+      g: g16 >> 8,
+      b: b16 >> 8,
+    };
+  }
+
+  if (/^#[0-9a-fA-F]{6}$/.test(value)) {
+    return {
+      r: Number.parseInt(value.slice(1, 3), 16),
+      g: Number.parseInt(value.slice(3, 5), 16),
+      b: Number.parseInt(value.slice(5, 7), 16),
+    };
+  }
+
+  const rgbMatch = value.match(/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/);
+  if (rgbMatch && rgbMatch[1] && rgbMatch[2] && rgbMatch[3]) {
+    const r = Number.parseInt(rgbMatch[1], 10);
+    const g = Number.parseInt(rgbMatch[2], 10);
+    const b = Number.parseInt(rgbMatch[3], 10);
+    if (r > 255 || g > 255 || b > 255) {
+      return null;
+    }
+
+    return { r, g, b };
+  }
+
+  return null;
+};
+
+export const modeFromColor = ({ r, g, b }: RgbColor): TerminalBackgroundMode => {
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  return luminance > 0.5 ? 'light' : 'dark';
+};
+
+export const extractOsc10Color = (chunk: string): string | null => {
+  const match = chunk.match(OSC10_PATTERN);
+  return match?.[1] ?? null;
+};
+
+export const extractOsc11Color = (chunk: string): string | null => {
+  const match = chunk.match(OSC11_PATTERN);
+  return match?.[1] ?? null;
+};
+
+export const setTerminalWindowForeground = (color: string) => {
+  writeOsc(`\x1b]10;${color}\x07`);
+};
+
+export const setTerminalWindowBackground = (color: string) => {
+  writeOsc(`\x1b]11;${color}\x07`);
+};
+
+export const probeTerminalColors = async (timeoutMs = 1000): Promise<TerminalColorProbe> => {
+  if (
+    !process.stdin.isTTY ||
+    !process.stdout.isTTY ||
+    typeof process.stdin.setRawMode !== 'function'
+  ) {
+    return { mode: 'dark', rawBackgroundColor: null, rawForegroundColor: null };
+  }
+
+  return new Promise(resolve => {
+    const stdin = process.stdin;
+    const previousRawMode = Boolean(stdin.isRaw);
+    let timer: NodeJS.Timeout | null = null;
+    let finished = false;
+    let rawBackgroundColor: string | null = null;
+    let rawForegroundColor: string | null = null;
+
+    const finish = () => {
+      if (finished) {
+        return;
+      }
+      finished = true;
+
+      if (timer) {
+        clearTimeout(timer);
+      }
+
+      stdin.removeListener('data', onData);
+      try {
+        stdin.setRawMode(previousRawMode);
+      } catch {
+        // Ignore errors when restoring raw mode
+      }
+
+      const color = rawBackgroundColor ? parseTerminalColor(rawBackgroundColor) : null;
+      resolve({
+        rawBackgroundColor,
+        rawForegroundColor,
+        mode: color ? modeFromColor(color) : 'dark',
+      });
+    };
+
+    const onData = (data: Buffer) => {
+      const chunk = data.toString();
+      rawForegroundColor ??= extractOsc10Color(chunk);
+      rawBackgroundColor ??= extractOsc11Color(chunk);
+
+      if (rawForegroundColor && rawBackgroundColor) {
+        finish();
+      }
+    };
+
+    try {
+      stdin.setRawMode(true);
+      stdin.on('data', onData);
+      writeOsc('\x1b]10;?\x07');
+      writeOsc('\x1b]11;?\x07');
+    } catch {
+      finish();
+      return;
+    }
+
+    timer = setTimeout(() => {
+      finish();
+    }, timeoutMs);
+  });
+};
+
+export const probeTerminalBackground = async (
+  timeoutMs = 1000
+): Promise<TerminalBackgroundProbe> => {
+  const result = await probeTerminalColors(timeoutMs);
+  return {
+    rawColor: result.rawBackgroundColor,
+    mode: result.mode,
+  };
+};
+
+export const detectTerminalBackgroundMode = async (
+  timeoutMs = 1000
+): Promise<TerminalBackgroundMode> => {
+  const result = await probeTerminalColors(timeoutMs);
+  return result.mode;
+};

package/src/types/chat.ts

@@ -0,0 +1,32 @@
+export type ReplySegmentType = 'thinking' | 'text' | 'code' | 'note';
+
+export type ReplySegment = {
+  id: string;
+  type: ReplySegmentType;
+  content: string;
+  data?: unknown;
+};
+
+export type ReplyStatus = 'streaming' | 'done' | 'error';
+
+export type AssistantReply = {
+  segments: ReplySegment[];
+  modelLabel: string;
+  agentLabel: string;
+  startedAtMs?: number;
+  durationSeconds: number;
+  usagePromptTokens?: number;
+  usageCompletionTokens?: number;
+  usageTotalTokens?: number;
+  status: ReplyStatus;
+  completionReason?: string;
+  completionMessage?: string;
+};
+
+export type ChatTurn = {
+  id: number;
+  prompt: string;
+  createdAtMs: number;
+  files?: string[];
+  reply?: AssistantReply;
+};

package/src/types/message-content.ts

@@ -0,0 +1,48 @@
+export type TextContentPart = {
+  type: 'text';
+  text: string;
+};
+
+export type ImageUrlContentPart = {
+  type: 'image_url';
+  image_url: {
+    url: string;
+    detail?: 'auto' | 'low' | 'high';
+  };
+};
+
+export type InputAudioContentPart = {
+  type: 'input_audio';
+  input_audio: {
+    data: string;
+    format: 'wav' | 'mp3';
+  };
+};
+
+export type InputVideoContentPart = {
+  type: 'input_video';
+  input_video: {
+    url?: string;
+    file_id?: string;
+    data?: string;
+    format?: 'mp4' | 'mov' | 'webm';
+  };
+};
+
+export type FileContentPart = {
+  type: 'file';
+  file: {
+    file_id?: string;
+    file_data?: string;
+    filename?: string;
+  };
+};
+
+export type InputContentPart =
+  | TextContentPart
+  | ImageUrlContentPart
+  | InputAudioContentPart
+  | InputVideoContentPart
+  | FileContentPart;
+
+export type MessageContent = string | InputContentPart[];

package/src/ui/open-code-theme.ts

@@ -0,0 +1,176 @@
+import { RGBA } from '@opentui/core';
+
+export type OpenCodeThemeMode = 'dark' | 'light';
+export type MarkdownThemePlatform = NodeJS.Platform;
+
+export type OpenCodeTheme = {
+  primary: RGBA;
+  secondary: RGBA;
+  accent: RGBA;
+  error: RGBA;
+  warning: RGBA;
+  success: RGBA;
+  info: RGBA;
+  text: RGBA;
+  textMuted: RGBA;
+  background: RGBA;
+  backgroundPanel: RGBA;
+  backgroundElement: RGBA;
+  border: RGBA;
+  borderActive: RGBA;
+  borderSubtle: RGBA;
+  diffAdded: RGBA;
+  diffRemoved: RGBA;
+  diffContext: RGBA;
+  diffHunkHeader: RGBA;
+  diffHighlightAdded: RGBA;
+  diffHighlightRemoved: RGBA;
+  diffAddedBg: RGBA;
+  diffRemovedBg: RGBA;
+  diffContextBg: RGBA;
+  diffLineNumber: RGBA;
+  diffAddedLineNumberBg: RGBA;
+  diffRemovedLineNumberBg: RGBA;
+  markdownText: RGBA;
+  markdownHeading: RGBA;
+  markdownLink: RGBA;
+  markdownLinkText: RGBA;
+  markdownCode: RGBA;
+  markdownBlockQuote: RGBA;
+  markdownEmph: RGBA;
+  markdownStrong: RGBA;
+  markdownHorizontalRule: RGBA;
+  markdownListItem: RGBA;
+  markdownListEnumeration: RGBA;
+  markdownImage: RGBA;
+  markdownImageText: RGBA;
+  markdownCodeBlock: RGBA;
+  syntaxComment: RGBA;
+  syntaxKeyword: RGBA;
+  syntaxFunction: RGBA;
+  syntaxVariable: RGBA;
+  syntaxString: RGBA;
+  syntaxNumber: RGBA;
+  syntaxType: RGBA;
+  syntaxOperator: RGBA;
+  syntaxPunctuation: RGBA;
+  thinkingOpacity: number;
+};
+
+const color = (hex: string) => RGBA.fromHex(hex);
+
+const OPEN_CODE_DARK_THEME: OpenCodeTheme = {
+  primary: color('#8e51ff'),
+  secondary: color('#27272a'),
+  accent: color('#8e51ff'),
+  error: color('#ff6467'),
+  warning: color('#c4b4ff'),
+  success: color('#c4b4ff'),
+  info: color('#a684ff'),
+  text: color('#fafafa'),
+  textMuted: color('#9f9fa9'),
+  background: color('#09090b'),
+  backgroundPanel: color('#18181b'),
+  backgroundElement: color('#27272a'),
+  border: color('#ffffff1a'),
+  borderActive: color('#4d179a'),
+  borderSubtle: color('#ffffff1a'),
+  diffAdded: color('#8e51ff'),
+  diffRemoved: color('#ff6467'),
+  diffContext: color('#9f9fa9'),
+  diffHunkHeader: color('#a684ff'),
+  diffHighlightAdded: color('#c4b4ff'),
+  diffHighlightRemoved: color('#ff8d8f'),
+  diffAddedBg: color('#8e51ff1f'),
+  diffRemovedBg: color('#ff646724'),
+  diffContextBg: color('#27272a'),
+  diffLineNumber: color('#9f9fa9'),
+  diffAddedLineNumberBg: color('#4d179a66'),
+  diffRemovedLineNumberBg: color('#ff646740'),
+  markdownText: color('#fafafa'),
+  markdownHeading: color('#c4b4ff'),
+  markdownLink: color('#8e51ff'),
+  markdownLinkText: color('#a684ff'),
+  markdownCode: color('#c4b4ff'),
+  markdownBlockQuote: color('#a684ff'),
+  markdownEmph: color('#c4b4ff'),
+  markdownStrong: color('#f5f3ff'),
+  markdownHorizontalRule: color('#9f9fa9'),
+  markdownListItem: color('#c4b4ff'),
+  markdownListEnumeration: color('#a684ff'),
+  markdownImage: color('#8e51ff'),
+  markdownImageText: color('#a684ff'),
+  markdownCodeBlock: color('#fafafa'),
+  syntaxComment: color('#9f9fa9'),
+  syntaxKeyword: color('#8e51ff'),
+  syntaxFunction: color('#c4b4ff'),
+  syntaxVariable: color('#f5f3ff'),
+  syntaxString: color('#c4b4ff'),
+  syntaxNumber: color('#a684ff'),
+  syntaxType: color('#8e51ff'),
+  syntaxOperator: color('#7008e7'),
+  syntaxPunctuation: color('#fafafa'),
+  thinkingOpacity: 0.74,
+};
+
+const OPEN_CODE_LIGHT_THEME: OpenCodeTheme = {
+  primary: color('#7f22fe'),
+  secondary: color('#f4f4f5'),
+  accent: color('#7f22fe'),
+  error: color('#e7000b'),
+  warning: color('#8e51ff'),
+  success: color('#8e51ff'),
+  info: color('#a684ff'),
+  text: color('#09090b'),
+  textMuted: color('#71717b'),
+  background: color('#ffffff'),
+  backgroundPanel: color('#ffffff'),
+  backgroundElement: color('#f4f4f5'),
+  border: color('#e4e4e7'),
+  borderActive: color('#a684ff'),
+  borderSubtle: color('#e4e4e7'),
+  diffAdded: color('#7f22fe'),
+  diffRemoved: color('#e7000b'),
+  diffContext: color('#71717b'),
+  diffHunkHeader: color('#a684ff'),
+  diffHighlightAdded: color('#5d0ec0'),
+  diffHighlightRemoved: color('#e7000b'),
+  diffAddedBg: color('#f5f3ff'),
+  diffRemovedBg: color('#e7000b14'),
+  diffContextBg: color('#f4f4f5'),
+  diffLineNumber: color('#71717b'),
+  diffAddedLineNumberBg: color('#c4b4ff80'),
+  diffRemovedLineNumberBg: color('#e7000b26'),
+  markdownText: color('#09090b'),
+  markdownHeading: color('#7f22fe'),
+  markdownLink: color('#7f22fe'),
+  markdownLinkText: color('#8e51ff'),
+  markdownCode: color('#5d0ec0'),
+  markdownBlockQuote: color('#8e51ff'),
+  markdownEmph: color('#7008e7'),
+  markdownStrong: color('#18181b'),
+  markdownHorizontalRule: color('#71717b'),
+  markdownListItem: color('#7f22fe'),
+  markdownListEnumeration: color('#8e51ff'),
+  markdownImage: color('#7f22fe'),
+  markdownImageText: color('#8e51ff'),
+  markdownCodeBlock: color('#09090b'),
+  syntaxComment: color('#71717b'),
+  syntaxKeyword: color('#7f22fe'),
+  syntaxFunction: color('#5d0ec0'),
+  syntaxVariable: color('#18181b'),
+  syntaxString: color('#8e51ff'),
+  syntaxNumber: color('#7008e7'),
+  syntaxType: color('#7f22fe'),
+  syntaxOperator: color('#7008e7'),
+  syntaxPunctuation: color('#09090b'),
+  thinkingOpacity: 0.9,
+};
+
+export const resolveOpenCodeTheme = (
+  mode: OpenCodeThemeMode,
+  platform: MarkdownThemePlatform
+): OpenCodeTheme => {
+  void platform;
+  return mode === 'light' ? OPEN_CODE_LIGHT_THEME : OPEN_CODE_DARK_THEME;
+};

package/src/ui/opencode-markdown.ts

@@ -0,0 +1,211 @@
+import { RGBA, SyntaxStyle } from '@opentui/core';
+import {
+  resolveOpenCodeTheme,
+  type MarkdownThemePlatform,
+  type OpenCodeTheme,
+} from './open-code-theme';
+import type { UiThemeMode } from './theme';
+
+type SyntaxRule = {
+  scope: string[];
+  style: {
+    foreground?: RGBA;
+    background?: RGBA;
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+  };
+};
+
+type SyntaxRenderOptions = {
+  platform: MarkdownThemePlatform;
+};
+
+const getSyntaxRules = (theme: OpenCodeTheme, options: SyntaxRenderOptions): SyntaxRule[] => {
+  const useItalic = options.platform !== 'darwin';
+  const useUnderline = options.platform !== 'darwin';
+
+  return [
+    { scope: ['default'], style: { foreground: theme.text } },
+    { scope: ['prompt'], style: { foreground: theme.accent } },
+    { scope: ['extmark.file'], style: { foreground: theme.warning, bold: true } },
+    { scope: ['extmark.agent'], style: { foreground: theme.secondary, bold: true } },
+    {
+      scope: ['extmark.paste'],
+      style: { foreground: theme.background, background: theme.warning, bold: true },
+    },
+    { scope: ['comment'], style: { foreground: theme.syntaxComment, italic: useItalic } },
+    {
+      scope: ['comment.documentation'],
+      style: { foreground: theme.syntaxComment, italic: useItalic },
+    },
+    { scope: ['string', 'symbol'], style: { foreground: theme.syntaxString } },
+    { scope: ['number', 'boolean'], style: { foreground: theme.syntaxNumber } },
+    { scope: ['character.special'], style: { foreground: theme.syntaxString } },
+    {
+      scope: ['keyword.return', 'keyword.conditional', 'keyword.repeat', 'keyword.coroutine'],
+      style: { foreground: theme.syntaxKeyword, italic: useItalic },
+    },
+    {
+      scope: ['keyword.type'],
+      style: { foreground: theme.syntaxType, bold: true, italic: useItalic },
+    },
+    { scope: ['keyword.function', 'function.method'], style: { foreground: theme.syntaxFunction } },
+    { scope: ['keyword'], style: { foreground: theme.syntaxKeyword, italic: useItalic } },
+    { scope: ['keyword.import'], style: { foreground: theme.syntaxKeyword } },
+    {
+      scope: ['operator', 'keyword.operator', 'punctuation.delimiter'],
+      style: { foreground: theme.syntaxOperator },
+    },
+    { scope: ['keyword.conditional.ternary'], style: { foreground: theme.syntaxOperator } },
+    {
+      scope: ['variable', 'variable.parameter', 'function.method.call', 'function.call'],
+      style: { foreground: theme.syntaxVariable },
+    },
+    {
+      scope: ['variable.member', 'function', 'constructor'],
+      style: { foreground: theme.syntaxFunction },
+    },
+    { scope: ['type', 'module'], style: { foreground: theme.syntaxType } },
+    { scope: ['constant'], style: { foreground: theme.syntaxNumber } },
+    { scope: ['property'], style: { foreground: theme.syntaxVariable } },
+    { scope: ['class'], style: { foreground: theme.syntaxType } },
+    { scope: ['parameter'], style: { foreground: theme.syntaxVariable } },
+    {
+      scope: ['punctuation', 'punctuation.bracket'],
+      style: { foreground: theme.syntaxPunctuation },
+    },
+    {
+      scope: [
+        'variable.builtin',
+        'type.builtin',
+        'function.builtin',
+        'module.builtin',
+        'constant.builtin',
+      ],
+      style: { foreground: theme.error },
+    },
+    { scope: ['variable.super'], style: { foreground: theme.error } },
+    { scope: ['string.escape', 'string.regexp'], style: { foreground: theme.syntaxKeyword } },
+    { scope: ['keyword.directive'], style: { foreground: theme.syntaxKeyword, italic: useItalic } },
+    { scope: ['punctuation.special'], style: { foreground: theme.syntaxOperator } },
+    { scope: ['keyword.modifier'], style: { foreground: theme.syntaxKeyword, italic: useItalic } },
+    { scope: ['keyword.exception'], style: { foreground: theme.syntaxKeyword, italic: useItalic } },
+    { scope: ['markup.heading'], style: { foreground: theme.markdownHeading, bold: true } },
+    { scope: ['markup.heading.1'], style: { foreground: theme.markdownHeading, bold: true } },
+    { scope: ['markup.heading.2'], style: { foreground: theme.markdownHeading, bold: true } },
+    { scope: ['markup.heading.3'], style: { foreground: theme.markdownHeading, bold: true } },
+    { scope: ['markup.heading.4'], style: { foreground: theme.markdownHeading, bold: true } },
+    { scope: ['markup.heading.5'], style: { foreground: theme.markdownHeading, bold: true } },
+    { scope: ['markup.heading.6'], style: { foreground: theme.markdownHeading, bold: true } },
+    {
+      scope: ['markup.bold', 'markup.strong'],
+      style: { foreground: theme.markdownStrong, bold: true },
+    },
+    { scope: ['markup.italic'], style: { foreground: theme.markdownEmph, italic: useItalic } },
+    { scope: ['markup.list'], style: { foreground: theme.markdownListItem } },
+    { scope: ['markup.quote'], style: { foreground: theme.markdownBlockQuote, italic: useItalic } },
+    { scope: ['markup.raw', 'markup.raw.block'], style: { foreground: theme.markdownCode } },
+    {
+      scope: ['markup.raw.inline'],
+      style: { foreground: theme.markdownCode, background: theme.background },
+    },
+    { scope: ['markup.link'], style: { foreground: theme.markdownLink, underline: useUnderline } },
+    {
+      scope: ['markup.link.label'],
+      style: { foreground: theme.markdownLinkText, underline: useUnderline },
+    },
+    {
+      scope: ['markup.link.url'],
+      style: { foreground: theme.markdownLink, underline: useUnderline },
+    },
+    { scope: ['label'], style: { foreground: theme.markdownLinkText } },
+    { scope: ['spell', 'nospell'], style: { foreground: theme.text } },
+    { scope: ['conceal'], style: { foreground: theme.textMuted } },
+    {
+      scope: ['string.special', 'string.special.url'],
+      style: { foreground: theme.markdownLink, underline: useUnderline },
+    },
+    { scope: ['character'], style: { foreground: theme.syntaxString } },
+    { scope: ['float'], style: { foreground: theme.syntaxNumber } },
+    { scope: ['comment.error'], style: { foreground: theme.error, italic: useItalic, bold: true } },
+    {
+      scope: ['comment.warning'],
+      style: { foreground: theme.warning, italic: useItalic, bold: true },
+    },
+    {
+      scope: ['comment.todo', 'comment.note'],
+      style: { foreground: theme.info, italic: useItalic, bold: true },
+    },
+    { scope: ['namespace'], style: { foreground: theme.syntaxType } },
+    { scope: ['field'], style: { foreground: theme.syntaxVariable } },
+    { scope: ['type.definition'], style: { foreground: theme.syntaxType, bold: true } },
+    { scope: ['keyword.export'], style: { foreground: theme.syntaxKeyword } },
+    { scope: ['attribute', 'annotation'], style: { foreground: theme.warning } },
+    { scope: ['tag'], style: { foreground: theme.error } },
+    { scope: ['tag.attribute'], style: { foreground: theme.syntaxKeyword } },
+    { scope: ['tag.delimiter'], style: { foreground: theme.syntaxOperator } },
+    { scope: ['markup.strikethrough'], style: { foreground: theme.textMuted } },
+    { scope: ['markup.underline'], style: { foreground: theme.text, underline: useUnderline } },
+    { scope: ['markup.list.checked'], style: { foreground: theme.success } },
+    { scope: ['markup.list.unchecked'], style: { foreground: theme.textMuted } },
+    { scope: ['diff.plus'], style: { foreground: theme.diffAdded, background: theme.diffAddedBg } },
+    {
+      scope: ['diff.minus'],
+      style: { foreground: theme.diffRemoved, background: theme.diffRemovedBg },
+    },
+    {
+      scope: ['diff.delta'],
+      style: { foreground: theme.diffContext, background: theme.diffContextBg },
+    },
+    { scope: ['error'], style: { foreground: theme.error, bold: true } },
+    { scope: ['warning'], style: { foreground: theme.warning, bold: true } },
+    { scope: ['info'], style: { foreground: theme.info } },
+    { scope: ['debug'], style: { foreground: theme.textMuted } },
+  ];
+};
+
+const applyAlpha = (fg: RGBA, alpha: number) => {
+  return RGBA.fromInts(
+    Math.round(fg.r * 255),
+    Math.round(fg.g * 255),
+    Math.round(fg.b * 255),
+    Math.round(alpha * 255)
+  );
+};
+
+const createMarkdownSyntax = (theme: OpenCodeTheme, platform: MarkdownThemePlatform) =>
+  SyntaxStyle.fromTheme(getSyntaxRules(theme, { platform }));
+
+const createSubtleMarkdownSyntax = (theme: OpenCodeTheme, platform: MarkdownThemePlatform) =>
+  SyntaxStyle.fromTheme(
+    getSyntaxRules(theme, { platform }).map(rule => {
+      if (!rule.style.foreground) {
+        return rule;
+      }
+      return {
+        ...rule,
+        style: {
+          ...rule.style,
+          foreground: applyAlpha(rule.style.foreground, theme.thinkingOpacity),
+        },
+      };
+    })
+  );
+
+const defaultMarkdownTheme = resolveOpenCodeTheme('dark', process.platform);
+
+export let opencodeMarkdownSyntax = createMarkdownSyntax(defaultMarkdownTheme, process.platform);
+export let opencodeSubtleMarkdownSyntax = createSubtleMarkdownSyntax(
+  defaultMarkdownTheme,
+  process.platform
+);
+
+export const applyMarkdownThemeMode = (
+  mode: UiThemeMode,
+  platform: MarkdownThemePlatform = process.platform
+) => {
+  const theme = resolveOpenCodeTheme(mode, platform);
+  opencodeMarkdownSyntax = createMarkdownSyntax(theme, platform);
+  opencodeSubtleMarkdownSyntax = createSubtleMarkdownSyntax(theme, platform);
+};