Syntax-highlight Edit, Write, and Read tool calls (#1218)

Highlighting reuses the existing code-block tokenizer and LRU cache, runs lazily on expand, and falls back to plain text above a size cap so a large Read can't stall the main thread. The diff highlighter reconstructs the old and new file text by position rather than from @@ line ranges, so diffs that arrive without real hunk headers still highlight. Read content is normalized server-side: the cat -n line-number gutter some providers emit is stripped so content is uniformly raw source, with the first line number surfaced as offset for the client to rebuild the gutter.
2026-05-29 14:51:14 +08:00
parent 25d6fc8515
commit 38f0560f9b
12 changed files with 661 additions and 77 deletions
@@ -0,0 +1,104 @@
+import React from "react";
+import { Text, View } from "react-native";
+import { StyleSheet } from "react-native-unistyles";
+import { Fonts } from "@/constants/theme";
+import { isWeb } from "@/constants/platform";
+import { syntaxTokenStyleFor } from "@/styles/syntax-token-styles";
+import type { KeyedLine, KeyedToken } from "@/utils/highlight-cache";
+
+// Line height kept in sync with the plain `scrollText` style in
+// tool-call-details so a highlighted block lines up with an unhighlighted
+// fallback and blank lines keep their height.
+const CODE_LINE_HEIGHT = 18;
+const ZERO_WIDTH = "";
+
+interface HighlightedLinesProps {
+  lines: KeyedLine[];
+  // 1-based line number of the first line; when set, a line-number gutter is
+  // rendered (used by Read, which carries a server-normalized offset).
+  startLine?: number;
+}
+
+function ContentLine({ line }: { line: KeyedLine }) {
+  return (
+    <Text selectable style={styles.lineText}>
+      {line.tokens.length === 0
+        ? ZERO_WIDTH
+        : line.tokens.map(({ key, token }: KeyedToken) => (
+            <Text key={key} style={token.style ? syntaxTokenStyleFor(token.style) : undefined}>
+              {token.text}
+            </Text>
+          ))}
+    </Text>
+  );
+}
+
+const GutteredLine = React.memo(function GutteredLine({
+  line,
+  lineNumber,
+  digits,
+}: {
+  line: KeyedLine;
+  lineNumber: number;
+  digits: number;
+}) {
+  return (
+    <View style={styles.row}>
+      <Text style={styles.gutterText}>{String(lineNumber).padStart(digits)} </Text>
+      <ContentLine line={line} />
+    </View>
+  );
+});
+
+// Renders pre-tokenized lines (from the shared highlight cache), optionally with
+// a line-number gutter. Callers decide whether to highlight at all, so the
+// expensive size-cap / unsupported-language fallback stays a single plain Text.
+export function HighlightedLines({ lines, startLine }: HighlightedLinesProps) {
+  if (startLine === undefined) {
+    return (
+      <View>
+        {lines.map((line) => (
+          <ContentLine key={line.key} line={line} />
+        ))}
+      </View>
+    );
+  }
+
+  const lastLineNumber = startLine + lines.length - 1;
+  const digits = Math.max(2, String(lastLineNumber).length);
+  return (
+    <View>
+      {lines.map((line, index) => (
+        <GutteredLine key={line.key} line={line} lineNumber={startLine + index} digits={digits} />
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  row: {
+    flexDirection: "row",
+    minHeight: CODE_LINE_HEIGHT,
+  },
+  gutterText: {
+    fontFamily: Fonts.mono,
+    fontSize: theme.fontSize.code,
+    lineHeight: CODE_LINE_HEIGHT,
+    color: theme.colors.foregroundMuted,
+    opacity: 0.6,
+    userSelect: "none",
+    flexShrink: 0,
+  },
+  lineText: {
+    fontFamily: Fonts.mono,
+    fontSize: theme.fontSize.code,
+    color: theme.colors.foreground,
+    lineHeight: CODE_LINE_HEIGHT,
+    ...(isWeb
+      ? {
+          whiteSpace: "pre",
+          overflowWrap: "normal",
+        }
+      : null),
+  },
+}));