app: pierre theme + bordered editor-bg code containers + JetBrains Mono

- shiki themes swap github-light/dark → @pierre/theme pierre-light/dark
  (the package the Pierre diff webview already renders with — chat code
  and the tool-call diff sheet now share one vocabulary). toShikiTheme
  maps the VS Code shape (tokenColors) into shiki's type and drops
  object-form semanticTokenColors; the copy is also load-bearing because
  shiki's normalizeTheme mutates its input and the exports are frozen
- code block containers sit on the theme's own editor background
  (#ffffff / #0a0a0a) with a 1pt border carrying the block boundary —
  the Pierre diff-sheet card look; applies to both the broken-out
  CodeBlockSegment and enriched-rendered nested blocks
- JetBrains Mono via the expo-font config plugin (Regular + Bold TTFs
  sourced from @expo-google-fonts/jetbrains-mono — build-time embed, NOT
  useFonts: the transcript needs the font synchronously at first native
  render). Both enriched (RCTFont) and the TextInput container resolve
  the "JetBrains Mono" family; matches the diff webview's woff2
- resolveLang reads only the FIRST word of the fence info string —
  marked's .lang is the entire string ("ts title=x"), which missed the
  alias table and rendered plain

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: yyq1025

packages/app/app.json

@@ -74,7 +74,15 @@
       ],
       "expo-image",
       "expo-web-browser",
-      "expo-font",
+      [
+        "expo-font",
+        {
+          "fonts": [
+            "../../node_modules/@expo-google-fonts/jetbrains-mono/400Regular/JetBrainsMono_400Regular.ttf",
+            "../../node_modules/@expo-google-fonts/jetbrains-mono/700Bold/JetBrainsMono_700Bold.ttf"
+          ]
+        }
+      ],
       "@config-plugins/react-native-webrtc"
     ],
     "experiments": {

packages/app/package.json

@@ -15,16 +15,17 @@
   },
   "dependencies": {
     "@config-plugins/react-native-webrtc": "^15.0.1",
+    "@expo-google-fonts/jetbrains-mono": "^0.4.1",
     "@expo/metro-runtime": "~56.0.15",
     "@expo/ui": "~56.0.17",
     "@legendapp/list": "3.0.4",
     "@nandorojo/galeria": "^3.0.3",
     "@noble/ed25519": "^3.1.0",
     "@noble/hashes": "^2.2.0",
     "@pierre/diffs": "^1.2.7",
+    "@pierre/theme": "^1.0.3",
     "@shikijs/core": "^4.2.0",
     "@shikijs/langs": "^4.2.0",
-    "@shikijs/themes": "^4.2.0",
     "@sidecodeapp/protocol": "workspace:*",
     "@swmansion/react-native-bottom-sheet": "0.14.1",
     "@tanstack/react-db": "^0.1.86",

packages/app/src/lib/markdown/chat-markdown.tsx

@@ -49,6 +49,15 @@ const BODY_LINE_HEIGHT = 22;
 // (still enriched, inside runs) and block code (ours) read as one family.
 export const CODE_FONT_SIZE = 14;
 export const CODE_LINE_HEIGHT = 19;
+// JetBrains Mono, embedded at build time via the expo-font config plugin
+// (app.json; Regular + Bold TTFs from @expo-google-fonts/jetbrains-mono —
+// the package is only the TTF source, we deliberately do NOT use its
+// useFonts runtime loading: the transcript needs the font synchronously
+// at first native render, no flash-of-fallback). Family-name resolution:
+// both enriched (RCTFont via StyleConfig) and RN TextInput resolve
+// "JetBrains Mono" + weight against the embedded family. Matches the
+// Pierre diff webview, which already ships JetBrains Mono woff2.
+export const CODE_FONT_FAMILY = "JetBrains Mono";
 
 interface ColorPalette {
   text: string;
@@ -71,8 +80,11 @@ export const LIGHT_PALETTE: ColorPalette = {
   link: "#2563eb",
   inlineCodeBg: "#f4f4f5",
   inlineCodeBorder: "#f4f4f5",
-  codeBlockBg: "#f4f4f5",
-  codeBlockBorder: "#f4f4f5",
+  // Code blocks sit on the Pierre theme's own editor background (the
+  // same surface the Pierre diff sheet renders on) with a visible border
+  // carrying the block boundary — the bg matches the chat bg in both modes.
+  codeBlockBg: "#ffffff",
+  codeBlockBorder: "#e4e4e7",
   blockquoteBorder: "#d4d4d8",
   bullet: "#525252",
   tableHeaderBg: "#eeeeef",
@@ -86,8 +98,9 @@ export const DARK_PALETTE: ColorPalette = {
   link: "#60a5fa",
   inlineCodeBg: "#27272a",
   inlineCodeBorder: "#27272a",
-  codeBlockBg: "#18181b",
-  codeBlockBorder: "#18181b",
+  // pierre-dark editor.background; border = zinc-800 (see light note).
+  codeBlockBg: "#0a0a0a",
+  codeBlockBorder: "#27272a",
   blockquoteBorder: "#3f3f46",
   bullet: "#a1a1aa",
   tableHeaderBg: "#27272a", // zinc-800 — one shade lighter than chat bg
@@ -154,19 +167,20 @@ function buildStyle(p: ColorPalette): MarkdownStyle {
       marginBottom: 12,
     },
     code: {
-      fontFamily: "Menlo",
+      fontFamily: CODE_FONT_FAMILY,
       fontSize: CODE_FONT_SIZE,
       color: p.text,
       backgroundColor: p.inlineCodeBg,
       borderColor: p.inlineCodeBorder,
     },
     codeBlock: {
-      fontFamily: "Menlo",
+      fontFamily: CODE_FONT_FAMILY,
       fontSize: CODE_FONT_SIZE,
       lineHeight: CODE_LINE_HEIGHT,
       color: p.text,
       backgroundColor: p.codeBlockBg,
       borderColor: p.codeBlockBorder,
+      borderWidth: 1,
       borderRadius: 8,
       padding: 10,
       marginTop: 0,

packages/app/src/lib/markdown/chunked-markdown.tsx

@@ -9,6 +9,7 @@ import {
 
 import {
   ChatMarkdown,
+  CODE_FONT_FAMILY,
   CODE_FONT_SIZE,
   CODE_LINE_HEIGHT,
   DARK_PALETTE,
@@ -26,7 +27,7 @@ import { useRemend } from "./remend";
  *  - RUNS (text + tables) still render through enriched via ChatMarkdown
  *    — native attributed-text selection stays continuous across
  *    paragraphs and tables, and typography is byte-identical to before.
- *  - CODE BLOCKS break out into a horizontal-scroll Menlo code view with
+ *  - CODE BLOCKS break out into a horizontal-scroll JetBrains Mono view with
  *    react-native-shiki-engine STREAMING highlight: naive full
  *    re-tokenize per delta (~1-3.5ms measured on device for typical
  *    blocks) + per-line memo keyed on token content, so settled lines
@@ -38,7 +39,7 @@ import { useRemend } from "./remend";
  * UITextView, which gives PARTIAL selection with handles (RN iOS <Text
  * selectable> is select-all only, facebook/react-native#13938). All
  * highlight spans nest inside it as one attributed string. Spans are
- * color-only over the same Menlo metrics as the plain fallback → zero
+ * color-only over the same monospace metrics as the plain fallback → zero
  * layout shift when the highlighter comes online.
  *
  * `streamDone` gates tail-run remend repair and EOF fence-close marking.
@@ -131,6 +132,8 @@ const CodeBlockSegment = memo(function CodeBlockSegment({
       className="rounded-lg overflow-hidden"
       style={{
         backgroundColor: palette.codeBlockBg,
+        borderWidth: 1,
+        borderColor: palette.codeBlockBorder,
       }}
     >
       <ScrollView horizontal>
@@ -143,7 +146,7 @@ const CodeBlockSegment = memo(function CodeBlockSegment({
           // competes with the transcript list / horizontal ScrollView.
           scrollEnabled={false}
           style={{
-            fontFamily: "Menlo",
+            fontFamily: CODE_FONT_FAMILY,
             fontSize: CODE_FONT_SIZE,
             lineHeight: CODE_LINE_HEIGHT,
             color: palette.text,

packages/app/src/lib/markdown/code-highlighter.ts

@@ -1,4 +1,10 @@
-import type { HighlighterCore, ThemedToken } from "@shikijs/core";
+import themePierreDark from "@pierre/theme/pierre-dark";
+import themePierreLight from "@pierre/theme/pierre-light";
+import type {
+  HighlighterCore,
+  ThemedToken,
+  ThemeRegistration,
+} from "@shikijs/core";
 import { createHighlighterCore } from "@shikijs/core";
 import langDiff from "@shikijs/langs/diff";
 import langJson from "@shikijs/langs/json";
@@ -13,8 +19,6 @@ import langSwift from "@shikijs/langs/swift";
 import langToml from "@shikijs/langs/toml";
 import langTsx from "@shikijs/langs/tsx";
 import langYaml from "@shikijs/langs/yaml";
-import themeGithubDark from "@shikijs/themes/github-dark";
-import themeGithubLight from "@shikijs/themes/github-light";
 import { useMemo, useSyncExternalStore } from "react";
 import {
   createNativeEngine,
@@ -43,6 +47,21 @@ let highlighter: HighlighterCore | null = null;
 let initStarted = false;
 const listeners = new Set<() => void>();
 
+/** @pierre/theme ships VS Code-shaped themes (`tokenColors`,
+ *  object-form `semanticTokenColors`); shiki's normalizeTheme handles
+ *  tokenColors at runtime (moves them → settings) but its ThemeInput TYPE
+ *  doesn't admit them — map explicitly. semanticTokenColors is dropped: a
+ *  VS Code/LSP semantic-highlighting feature shiki's textmate tokenizer
+ *  never reads. The copy is also load-bearing: normalizeTheme MUTATES its
+ *  input and the package exports are Object.freeze'd. */
+function toShikiTheme(
+  theme: typeof themePierreDark,
+  name: string,
+): ThemeRegistration {
+  const { tokenColors, semanticTokenColors: _drop, ...rest } = theme;
+  return { ...rest, name, settings: [...tokenColors] };
+}
+
 /** Kick off engine + grammar loading. Idempotent. Called from the root
  *  layout once the launch settles (the engine README recommends app-start
  *  init; the grammar JSON.parse burst (~535KB source) belongs in the
@@ -58,7 +77,14 @@ export function initHighlighter() {
     return;
   }
   createHighlighterCore({
-    themes: [themeGithubLight, themeGithubDark],
+    // Pierre theme (same package the Pierre diff webview renders with —
+    // chat code blocks and the tool-call diff sheet share one vocabulary),
+    // registered under the kebab ids pierre-view already uses (the exports
+    // carry display names, "Pierre Dark").
+    themes: [
+      toShikiTheme(themePierreLight, "pierre-light"),
+      toShikiTheme(themePierreDark, "pierre-dark"),
+    ],
     langs: [
       langTsx,
       langSwift,
@@ -149,9 +175,11 @@ const PLAIN_LANGS = new Set([
 
 const loggedMisses = new Set<string>();
 
-/** Markdown info-string → loaded grammar id (null = render plain). */
+/** Markdown info-string → loaded grammar id (null = render plain).
+ *  Only the FIRST word counts: marked's `.lang` is the entire info string
+ *  ("ts title=foo.ts"), and GFM defines the language as its first word. */
 export function resolveLang(infoString: string): string | null {
-  const norm = infoString.trim().toLowerCase();
+  const norm = infoString.trim().split(/\s+/, 1)[0]?.toLowerCase() ?? "";
   if (PLAIN_LANGS.has(norm)) return null;
   const id = LANG_ALIASES[norm] ?? null;
   if (id === null && __DEV__ && !loggedMisses.has(norm)) {
@@ -173,7 +201,7 @@ export function tokenizeCode(
 ): TokenLines {
   return hl.codeToTokensBase(code, {
     lang,
-    theme: scheme === "dark" ? "github-dark" : "github-light",
+    theme: scheme === "dark" ? "pierre-dark" : "pierre-light",
   });
 }