feat(web): shiki syntax highlighting for code surfaces

One highlighter for the client: a synchronous fine-grained shiki core
(JS regex engine, no WASM) in ui-primitives with an explicit grammar
allowlist (typescript, shellscript, json — aliases resolve, unknown
languages take a geometry-identical plain arm). The shared CodeBlock
component owns both arms; markdown fences, the run_code expanded
program body (typescript), and the details panel Input (json) all
route through it. Token colors live in a new ui-theme shiki.css sheet
as --shiki-* custom properties (light/dark blocks), wired through the
shell's base.css chain — tokens-only styling holds; shiki's generated
span tree is the sanctioned innerHTML path (static output, no user
HTML). jsdom specs pin token spans, aliases, both fallbacks, and the
fence route; the built-bundle snapshot asserts the highlighted program
under the code row.

packages/client/ui-conversation/src/client/chat/ToolRow.module.css

@@ -87,14 +87,9 @@ button.leading {
   color: var(--dsw-alias-label-tertiary);
 }
 
-/* The code variant's expanded body is the run_code program: monospace on the
-   markdown code-block fill so the program reads as code, not prose. */
-.root[data-variant='code'] .body {
-  font-family: var(--ds-font-family-code);
-  font-size: 13px;
-  line-height: 20px;
-  padding: 6px 8px;
-  margin-left: 22px;
-  border-radius: 6px;
-  background: var(--dsw-alias-markdown-code-block);
+/* The code variant's expanded body is the run_code program, rendered through
+   the shared CodeBlock (shiki-highlighted TypeScript); only indentation is
+   this row's concern. */
+.codeBody {
+  margin: 4px 0 4px 22px;
 }

packages/client/ui-conversation/src/client/chat/ToolRow.tsx

@@ -6,7 +6,7 @@
 
 import { useState, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react'
 import clsx from 'clsx'
-import { StateDot } from '@deepseek-ai/dsh-client-ui-primitives'
+import { CodeBlock, StateDot } from '@deepseek-ai/dsh-client-ui-primitives'
 import { IconChevronDownOutline14 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { ToolRowState, ToolRowVariant } from '../contract/tool-call-model.ts'
 import css from './ToolRow.module.css'
@@ -96,7 +96,9 @@ export function ToolRow({
           </>
         )}
       </div>
-      {open && <div className={css.body}>{body}</div>}
+      {open && (variant === 'code'
+        ? <CodeBlock code={body} lang="typescript" className={css.codeBody} />
+        : <div className={css.body}>{body}</div>)}
     </div>
   )
 }

packages/client/ui-conversation/src/client/skeleton/DetailsPanel.tsx

@@ -5,6 +5,7 @@
 // share the store seat exists for) and derives the call material from the
 // session snapshot — no data of its own.
 
+import { CodeBlock } from '@deepseek-ai/dsh-client-ui-primitives'
 import { shallowEqual } from '@deepseek-ai/dsh-client-runtime/client'
 import type { ConversationSnapshot, ToolResultNode } from '@deepseek-ai/dsh-client-runtime/client'
 import type { DetailsSlotProps } from '../contract/slots.ts'
@@ -89,7 +90,7 @@ export function DetailsPanel({ useSession, useStore, closeDetails }: DetailsPane
                   {material.argsRaw !== null && (
                     <section className={css.section}>
                       <div className={css.sectionLabel}>Input</div>
-                      <pre className={css.code}>{pretty(material.argsRaw)}</pre>
+                      <CodeBlock code={pretty(material.argsRaw)} lang="json" />
                     </section>
                   )}
                   <section className={css.section}>

packages/client/ui-conversation/tests/chat-code-subcalls.spec.tsx

@@ -152,7 +152,7 @@ describe('run_code sub-calls through the real chat machinery', () => {
     expect(view.getByText('Tool call')).toBeTruthy()
   })
 
-  it('expanding the code row reveals the program body verbatim', async () => {
+  it('expanding the code row reveals the program body verbatim (shiki-tokenized)', async () => {
     const parent = 'call-64'
     const b = await bench(snapshotWith([codeResult(10, parent)], new Map()))
     const view = mountApp(b.slots)
@@ -160,7 +160,12 @@ describe('run_code sub-calls through the real chat machinery', () => {
     const toggle = view.container.querySelector('[data-variant="code"] button[aria-expanded]')
     expect(toggle).not.toBeNull()
     fireEvent.click(toggle!)
-    expect(view.getByText(/const listing = await tools\.bash/)).toBeTruthy()
+    // Shiki splits the program into token spans inside one <pre class="shiki">:
+    // assert the whole text and the highlighted tree rather than one node.
+    const pre = view.container.querySelector('pre.shiki')
+    expect(pre).not.toBeNull()
+    expect(pre!.textContent).toContain('const listing = await tools.bash')
+    expect(pre!.querySelectorAll('span[style]').length).toBeGreaterThan(3)
   })
 
   it('an isError sub-call renders the error state dot exactly like a failed native row', async () => {

packages/client/ui-primitives/package.json

@@ -20,11 +20,13 @@
   },
   "license": "BSD-3-Clause",
   "dependencies": {
+    "@shikijs/langs": "^4.3.1",
     "clsx": "^2.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^10.1.0",
-    "remark-gfm": "^4.0.1"
+    "remark-gfm": "^4.0.1",
+    "shiki": "^4.3.1"
   },
   "devDependencies": {
     "@deepseek-ai/dsh-invariants": "workspace:^",

packages/client/ui-primitives/src/index.ts

@@ -16,6 +16,7 @@ export { FishLogo } from './FishLogo.tsx'
 export { BrandWordmark } from './BrandWordmark.tsx'
 export { Tooltip } from './Tooltip.tsx'
 export type { TooltipSide } from './Tooltip.tsx'
+export { CodeBlock } from './markdown/CodeBlock.tsx'
 export { JsonBlock } from './markdown/JsonBlock.tsx'
 export { MarkdownText } from './markdown/MarkdownText.tsx'
 export { MessageText } from './markdown/MessageText.tsx'

packages/client/ui-primitives/src/markdown/CodeBlock.module.css

@@ -0,0 +1,27 @@
+/* One code-block geometry for highlighted and plain arms: the shiki <pre>
+   and the fallback <pre> draw identically except for token colors. */
+
+.block :where(pre) {
+  margin: 0;
+  padding: 8px 10px;
+  border-radius: 8px;
+  overflow-x: auto;
+  background: var(--dsw-alias-markdown-code-block);
+  font: var(--dsw-font-markdown-code-block);
+}
+
+/* Shiki inlines its theme background var; route it to the repo token. */
+.block :where(pre.shiki) {
+  background: var(--dsw-alias-markdown-code-block) !important;
+}
+
+.block :where(pre) code {
+  font: inherit;
+  background: none;
+  padding: 0;
+}
+
+.plain {
+  color: var(--dsw-alias-label-primary);
+  white-space: pre;
+}

packages/client/ui-primitives/src/markdown/CodeBlock.tsx

@@ -0,0 +1,37 @@
+// CodeBlock: one code surface for every consumer — markdown fences, the
+// run_code program body, and the details panel's raw args/output — with
+// shiki highlighting for the registered grammars and an identical-geometry
+// plain fallback for everything else. Shiki emits a single <pre class="shiki">
+// tree of nested spans whose colors are --shiki-* custom properties
+// (token sheets own the values); it produces no scripts or event handlers,
+// so injecting its output is safe by construction.
+
+import { useMemo } from 'react'
+import clsx from 'clsx'
+import { highlightToHtml } from './highlight.ts'
+import css from './CodeBlock.module.css'
+
+export interface CodeBlockProps {
+  /** The source text, rendered verbatim (trailing newline trimmed for display). */
+  code: string
+  /** Grammar hint (markdown fence info string or a fixed caller id); unknown = plain. */
+  lang?: string | undefined
+  /** Extra class merged onto the wrapper (callers position; this component draws). */
+  className?: string | undefined
+}
+
+export function CodeBlock({ code, lang, className }: CodeBlockProps) {
+  const trimmed = code.endsWith('\n') ? code.slice(0, -1) : code
+  const html = useMemo(() => highlightToHtml(trimmed, lang), [trimmed, lang])
+  if (html === undefined) {
+    return (
+      <div className={clsx(css.block, className)}>
+        <pre className={css.plain}><code>{trimmed}</code></pre>
+      </div>
+    )
+  }
+  // eslint-disable-next-line react/no-danger -- shiki's output is a static
+  // span tree it generated from `code` (no user HTML passes through), the
+  // sanctioned innerHTML consumption path per shiki's own docs.
+  return <div className={clsx(css.block, className)} dangerouslySetInnerHTML={{ __html: html }} />
+}

packages/client/ui-primitives/src/markdown/MarkdownText.tsx

@@ -1,6 +1,8 @@
+import { isValidElement } from 'react'
 import ReactMarkdown from 'react-markdown'
 import type { Components, UrlTransform } from 'react-markdown'
 import remarkGfm from 'remark-gfm'
+import { CodeBlock } from './CodeBlock.tsx'
 import css from './MarkdownText.module.css'
 
 const remarkPlugins = [remarkGfm]
@@ -42,6 +44,19 @@ const components: Components = {
       <table>{children}</table>
     </div>
   ),
+  // Fenced blocks route through the shared CodeBlock (shiki for registered
+  // grammars, identical-geometry plain fallback for unknown/absent languages);
+  // inline code keeps the default <code> path (the :not(pre) rule styles it).
+  pre: ({ children }) => {
+    const child = isValidElement<{ className?: string; children?: unknown }>(children) ? children : undefined
+    const raw = child?.props.children
+    const text = typeof raw === 'string' ? raw : Array.isArray(raw) && typeof raw[0] === 'string' ? raw[0] : undefined
+    // A fence whose content isn't one plain string (never produced by the
+    // markdown pipeline) keeps the stock <pre> rather than guessing.
+    if (text === undefined) return <pre>{children}</pre>
+    const lang = /language-([\w-]+)/.exec(child?.props.className ?? '')?.[1]
+    return <CodeBlock code={text} lang={lang} />
+  },
 }
 
 /**

packages/client/ui-primitives/src/markdown/highlight.ts

@@ -0,0 +1,68 @@
+/**
+ * The client's ONE syntax highlighter: a synchronous fine-grained shiki core
+ * (JavaScript regex engine — no oniguruma WASM, bundle-friendly) with an
+ * explicit grammar allowlist and a CSS-variables theme. Colors live in the
+ * theme package's token sheets as `--shiki-*` custom properties (light and
+ * dark blocks), never here — the repo's tokens-only styling rule.
+ *
+ * Grammars are the set the harness actually renders: TypeScript programs
+ * (`run_code` bodies; TS pulls in JS via grammar embedding), shell commands,
+ * and JSON payloads. An unknown or absent language falls back to plain text
+ * (no highlighting, still monospace) — never an error.
+ */
+
+import { createHighlighterCoreSync, createCssVariablesTheme } from 'shiki/core'
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'
+import langTs from '@shikijs/langs/typescript'
+import langBash from '@shikijs/langs/shellscript'
+import langJson from '@shikijs/langs/json'
+import type { HighlighterCore } from 'shiki/core'
+
+/** Language ids (and aliases) the singleton registers; everything else renders plain. */
+const LANG_ALIASES: Record<string, string> = {
+  typescript: 'typescript',
+  ts: 'typescript',
+  tsx: 'typescript',
+  javascript: 'typescript',
+  js: 'typescript',
+  shellscript: 'shellscript',
+  bash: 'shellscript',
+  sh: 'shellscript',
+  shell: 'shellscript',
+  zsh: 'shellscript',
+  json: 'json',
+  jsonc: 'json',
+}
+
+/** All token colors resolve through `--shiki-*` custom properties (theme package sheets). */
+const cssVariablesTheme = createCssVariablesTheme({
+  name: 'css-variables',
+  variablePrefix: '--shiki-',
+  fontStyle: true,
+})
+
+let singleton: HighlighterCore | undefined
+
+/** The lazily-created synchronous highlighter (one instance per document). */
+function highlighter(): HighlighterCore {
+  singleton ??= createHighlighterCoreSync({
+    themes: [cssVariablesTheme],
+    langs: [langTs, langBash, langJson],
+    engine: createJavaScriptRegexEngine({ forgiving: true }),
+  })
+  return singleton
+}
+
+/**
+ * Highlight `code` into shiki's HTML (a single `<pre class="shiki">` tree)
+ * when `lang` maps to a registered grammar; `undefined` means the caller
+ * renders its plain fallback.
+ * @param code - the source text.
+ * @param lang - the language hint (a markdown fence info string or a fixed caller id).
+ * @returns the highlighted HTML, or `undefined` for unknown languages.
+ */
+export function highlightToHtml(code: string, lang: string | undefined): string | undefined {
+  const resolved = lang === undefined ? undefined : LANG_ALIASES[lang.toLowerCase()]
+  if (resolved === undefined) return undefined
+  return highlighter().codeToHtml(code, { lang: resolved, theme: 'css-variables' })
+}

packages/client/ui-primitives/tests/code-block.spec.tsx

@@ -0,0 +1,53 @@
+// @vitest-environment jsdom
+// CodeBlock + the shiki singleton: registered grammars highlight into token
+// spans colored by --shiki-* custom properties; unknown/absent languages take
+// the identical-geometry plain arm; aliases resolve; the trailing newline is
+// display-trimmed. MarkdownText's fence route is pinned in markdown.spec.tsx
+// alongside the rest of the markdown family.
+
+import { describe, expect, it } from 'vitest'
+import { cleanup, render } from '@testing-library/react'
+import { afterEach } from 'vitest'
+import { CodeBlock } from '../src/markdown/CodeBlock.tsx'
+import { highlightToHtml } from '../src/markdown/highlight.ts'
+
+afterEach(cleanup)
+
+describe('highlightToHtml', () => {
+  it('highlights a registered grammar into css-variables token spans', () => {
+    const html = highlightToHtml('const x: number = 1', 'typescript')
+    expect(html).toContain('pre class="shiki css-variables"')
+    expect(html).toContain('var(--shiki-')
+  })
+
+  it.each([['ts'], ['js'], ['bash'], ['sh'], ['jsonc']])('resolves the %s alias', (alias) => {
+    expect(highlightToHtml('x', alias)).toContain('shiki')
+  })
+
+  it('returns undefined for unknown or absent languages', () => {
+    expect(highlightToHtml('x', 'cobol')).toBeUndefined()
+    expect(highlightToHtml('x', undefined)).toBeUndefined()
+  })
+})
+
+describe('CodeBlock', () => {
+  it('renders the highlighted tree for TypeScript', () => {
+    const view = render(<CodeBlock code={'const a = 1\n'} lang="ts" />)
+    const pre = view.container.querySelector('pre.shiki')
+    expect(pre).not.toBeNull()
+    expect(pre!.textContent).toBe('const a = 1')
+    expect(pre!.querySelectorAll('span[style]').length).toBeGreaterThan(1)
+  })
+
+  it('renders the plain arm for an unknown language with the text verbatim', () => {
+    const view = render(<CodeBlock code={'IDENTIFICATION DIVISION.'} lang="cobol" />)
+    expect(view.container.querySelector('pre.shiki')).toBeNull()
+    expect(view.getByText('IDENTIFICATION DIVISION.')).toBeTruthy()
+  })
+
+  it('renders the plain arm when no language is given', () => {
+    const view = render(<CodeBlock code="plain text" />)
+    expect(view.container.querySelector('pre.shiki')).toBeNull()
+    expect(view.getByText('plain text')).toBeTruthy()
+  })
+})

packages/client/ui-primitives/tests/markdown.spec.tsx

@@ -57,6 +57,8 @@ describe('MarkdownText', () => {
     expect(container.querySelector('table')?.textContent).toContain('alphabeta')
     expect(container.querySelector('hr')).not.toBeNull()
     expect(container.querySelector('pre code')?.textContent).toContain('const answer = 42')
+    // The ts fence routed through the shared CodeBlock: shiki token spans present.
+    expect(container.querySelector('pre.shiki')).not.toBeNull()
     expect(container.querySelector('br')).not.toBeNull()
     expect(screen.getByRole('link', { name: 'safe' }).getAttribute('target')).toBe('_blank')
     expect(screen.getByRole('link', { name: 'https://deepseek.com' })).toBeTruthy()

packages/client/ui-theme/src/styles/shiki.css

@@ -0,0 +1,31 @@
+/* Syntax-highlight token palette: the values behind shiki's css-variables
+   theme (--shiki-* custom properties emitted by the ui-primitives CodeBlock).
+   Light values on :root, dark overrides on the body attribute — the same
+   cascade as every other token sheet. Background/foreground deliberately
+   alias the markdown code-block tokens so highlighted and plain blocks agree. */
+
+:root {
+  --shiki-foreground: var(--dsw-alias-label-primary);
+  --shiki-background: var(--dsw-alias-markdown-code-block);
+  --shiki-token-constant: #1c7ed6;
+  --shiki-token-string: #2f9e44;
+  --shiki-token-comment: #868e96;
+  --shiki-token-keyword: #d6336c;
+  --shiki-token-parameter: #e8590c;
+  --shiki-token-function: #6741d9;
+  --shiki-token-string-expression: #2b8a3e;
+  --shiki-token-punctuation: #495057;
+  --shiki-token-link: #1971c2;
+}
+
+body[data-ds-dark-theme] {
+  --shiki-token-constant: #4dabf7;
+  --shiki-token-string: #69db7c;
+  --shiki-token-comment: #adb5bd;
+  --shiki-token-keyword: #faa2c1;
+  --shiki-token-parameter: #ffa94d;
+  --shiki-token-function: #b197fc;
+  --shiki-token-string-expression: #8ce99a;
+  --shiki-token-punctuation: #ced4da;
+  --shiki-token-link: #74c0fc;
+}

packages/client/web/src/base.css

@@ -1,9 +1,10 @@
 /* Shell-owned global base: full-height mount plus the theme token sheets.
- * The three ui-theme sheets are the sole token source (--dsw-*); the shell
+ * The four ui-theme sheets are the sole token source (--dsw-*); the shell
  * links them here so tokens exist before any plugin CSS lands. */
 @import '@deepseek-ai/dsh-client-ui-theme/styles/base.css';
 @import '@deepseek-ai/dsh-client-ui-theme/styles/design-platform.css';
 @import '@deepseek-ai/dsh-client-ui-theme/styles/gradient-shadow-text.css';
+@import '@deepseek-ai/dsh-client-ui-theme/styles/shiki.css';
 
 html,
 body,