herm-tui 1.0.0-dev.1

package/src/tabs/Toolsets.tsx

@@ -0,0 +1,266 @@
+import { useState, useEffect, useCallback, useRef, memo, type ReactNode } from "react";
+import { useGateway } from "../app/gateway";
+import { useListKeys, useFollow } from "../keys";
+import { useTheme } from "../theme";
+import { useDialog } from "../ui/dialog";
+import { useToast } from "../ui/toast";
+import { TabShell } from "../ui/shell";
+import { KVBlock } from "../ui/kv";
+import { Col, Hdr, VBAR } from "../ui/table";
+
+// ─── Types ────────────────────────────────────────────────────────────
+
+// Wire shape from tui_gateway's `toolsets.list`. v1 only guarantees the
+// first four; the rest are optional so a future tui_gateway that passes
+// get_toolset_info()/get_available_toolsets() through lands here without
+// a client change.
+type Toolset = {
+  name: string
+  description: string
+  tool_count: number
+  enabled: boolean
+  tools?: string[]
+  includes?: string[]
+  available?: boolean
+  requirements?: string[]
+}
+
+type Kind = "core" | "platform" | "mcp"
+
+// ─── Classification ───────────────────────────────────────────────────
+
+// Name-only heuristic — tui_gateway doesn't expose includes/is_composite
+// on the wire yet, so composites fold into their name-derived bucket.
+// `hermes-*` are the per-platform bundles that all clone _HERMES_CORE_TOOLS
+// upstream; separating them cuts ~20 near-identical rows out of "core".
+const kindOf = (ts: Toolset): Kind =>
+  ts.name.includes(":") ? "mcp"
+  : ts.name.startsWith("hermes-") ? "platform"
+  : "core"
+
+const KIND_LABEL: Record<Kind, string> = {
+  core: "core",
+  platform: "platform bundles",
+  mcp: "mcp",
+}
+
+type Section = { kind: Kind; items: Toolset[] }
+
+const group = (list: Toolset[]): Section[] => {
+  const by = { core: [], platform: [], mcp: [] } as Record<Kind, Toolset[]>
+  for (const ts of list) by[kindOf(ts)].push(ts)
+  return (["core", "platform", "mcp"] as const)
+    .filter(k => by[k].length > 0)
+    .map(k => ({ kind: k, items: by[k] }))
+}
+
+// ─── Toolset Row ──────────────────────────────────────────────────────
+
+const Row = memo((props: {
+  id: string;
+  ts: Toolset;
+  selected: boolean;
+  onSelect: () => void;
+  onHover: () => void;
+}) => {
+  const theme = useTheme().theme;
+  const ts = props.ts;
+  const bg = props.selected ? theme.backgroundElement : undefined;
+  const unavail = ts.available === false;
+  const glyph = unavail ? "◌" : ts.enabled ? "●" : "○";
+  const glyphFg = unavail ? theme.warning : ts.enabled ? theme.success : theme.textMuted;
+
+  return (
+    <box id={props.id} flexDirection="row" height={1} backgroundColor={bg}
+         onMouseDown={props.onSelect} onMouseMove={props.onHover}>
+      <Col w={2} fg={props.selected ? theme.primary : theme.text}>{props.selected ? "▸ " : "  "}</Col>
+      <Col w={2} fg={glyphFg}>{`${glyph} `}</Col>
+      <Col grow fg={props.selected ? theme.accent : theme.text}>{ts.name}</Col>
+      <Col w={9} fg={theme.info} right>{`${ts.tool_count} tools`}</Col>
+    </box>
+  );
+});
+
+// ─── Detail Panel ─────────────────────────────────────────────────────
+
+const DetailPanel = memo((props: { ts: Toolset }) => {
+  const theme = useTheme().theme;
+  const ts = props.ts;
+  const unavail = ts.available === false;
+
+  return (
+    <box
+      flexDirection="column" padding={1} border
+      borderColor={theme.border} backgroundColor={theme.backgroundPanel} width="40%"
+    >
+      <box height={1}><text fg={theme.accent}><strong>{ts.name}</strong></text></box>
+      <box height={1}><text fg={theme.textMuted}>{KIND_LABEL[kindOf(ts)]}</text></box>
+      <box height={1} />
+      <KVBlock rows={[
+        ["Status", unavail ? "unavailable" : ts.enabled ? "enabled" : "disabled",
+          unavail ? theme.warning : ts.enabled ? theme.success : theme.textMuted],
+        ["Tools", String(ts.tool_count), theme.info],
+        ["Includes", ts.includes?.length ? ts.includes.join(", ") : undefined, theme.text],
+        ["Requires", ts.requirements?.length ? ts.requirements.join(", ") : undefined,
+          unavail ? theme.warning : theme.text],
+      ]} />
+      <box height={1} />
+      <box minHeight={1}>
+        <text wrapMode="word" fg={theme.text}>{ts.description || "—"}</text>
+      </box>
+      {ts.tools?.length ? (
+        <>
+          <box height={1} />
+          <box height={1}><text fg={theme.textMuted}>Tools ({ts.tools.length}):</text></box>
+          <scrollbox flexGrow={1} scrollY>
+            {ts.tools.map(n => <text key={n} fg={theme.text}>· {n}</text>)}
+          </scrollbox>
+        </>
+      ) : null}
+    </box>
+  );
+});
+
+// ─── Main Component ───────────────────────────────────────────────────
+
+export const Toolsets = memo((props: { focused?: boolean }) => {
+  const theme = useTheme().theme;
+  const gw = useGateway();
+  const dialog = useDialog();
+  const toast = useToast();
+  const [list, setList] = useState<Toolset[]>([]);
+  const [sel, setSel] = useState(0);
+  const [err, setErr] = useState<string | null>(null);
+
+  // Flat nav list derived from grouped sections, so ↑/↓ crosses section
+  // boundaries in render order. `live` mirrors for callbacks that must
+  // read current selection without closing over stale state.
+  const secs = group(list);
+  const flat = secs.flatMap(s => s.items);
+  const live = useRef({ flat, sel });
+  live.current = { flat, sel };
+
+  const load = useCallback(() => {
+    gw.request<{ toolsets?: Toolset[] }>("toolsets.list", {})
+      .then(r => { setList(r.toolsets ?? []); setErr(null); })
+      .catch(e => setErr(e instanceof Error ? e.message : String(e)));
+  }, [gw]);
+
+  useEffect(() => { load(); }, [load]);
+
+  // tools.configure response (tui_gateway/server.py @method("tools.configure")).
+  // `enabled_toolsets` is the authoritative post-change list — reconcile
+  // from it instead of a round-trip `toolsets.list`. `unknown` = names
+  // the gateway's whitelist rejected (e.g. platform bundles, composites).
+  type ConfigureResult = {
+    changed: string[]
+    enabled_toolsets: string[]
+    missing_servers: string[]
+    unknown: string[]
+  }
+
+  const toggle = useCallback(() => {
+    const ts = live.current.flat[live.current.sel];
+    if (!ts) return;
+    if (ts.available === false) {
+      toast.show({ variant: "warning", message: `${ts.name} is unavailable` });
+      return;
+    }
+    const action = ts.enabled ? "disable" : "enable";
+    const was = ts.enabled;
+    // optimistic flip
+    setList(prev => prev.map(t => t.name === ts.name ? { ...t, enabled: !t.enabled } : t));
+    gw.request<ConfigureResult>("tools.configure", { action, names: [ts.name] })
+      .then(r => {
+        if (r.unknown?.includes(ts.name)) {
+          // Gateway rejected the name — revert the optimistic flip and tell
+          // the user why (matches config.yaml whitelist in hermes_cli/tools_config.py).
+          setList(prev => prev.map(t => t.name === ts.name ? { ...t, enabled: was } : t));
+          toast.show({ variant: "warning", message: `${ts.name} is not configurable` });
+          return;
+        }
+        if (r.missing_servers?.length && ts.name.includes(":")) {
+          const server = ts.name.split(":", 1)[0];
+          if (r.missing_servers.includes(server)) {
+            setList(prev => prev.map(t => t.name === ts.name ? { ...t, enabled: was } : t));
+            toast.show({ variant: "warning", message: `MCP server '${server}' not in config` });
+            return;
+          }
+        }
+        // Reconcile from the authoritative list. Tolerant of future shape
+        // changes (missing `enabled_toolsets` falls back to `load()`).
+        if (Array.isArray(r.enabled_toolsets)) {
+          const on = new Set(r.enabled_toolsets);
+          setList(prev => prev.map(t => ({ ...t, enabled: on.has(t.name) })));
+        } else {
+          load();
+        }
+      })
+      .catch((e: Error) => {
+        setList(prev => prev.map(t => t.name === ts.name ? { ...t, enabled: was } : t));
+        toast.show({ variant: "error", message: e.message });
+      });
+  }, [gw, toast, load]);
+
+  const count = flat.length;
+  const ts = flat[sel] ?? null;
+  const follow = useFollow("ts");
+
+  const keys = useListKeys({
+    active: !!props.focused && dialog.stack.length === 0,
+    count, setSel, ...follow.opts,
+    onToggle: toggle,
+    onRefresh: () => { load(); toast.show({ variant: "info", message: "Reloaded", duration: 1000 }) },
+  });
+
+  return (
+    <box flexDirection="row" flexGrow={1}>
+      <TabShell
+        title={`Toolsets (${count})`}
+        error={err}
+        hint={`↑↓ nav  ${keys.print("list.toggle")} toggle  ${keys.print("list.refresh")} refresh`}
+      >
+        <Hdr>
+          <Col w={4} fg={theme.textMuted}>{""}</Col>
+          <Col grow fg={theme.textMuted} bold>Name</Col>
+          <Col w={9} fg={theme.textMuted} bold right>Tools</Col>
+        </Hdr>
+        <box height={1} />
+
+        {count === 0 ? (
+          <box key="empty" flexGrow={1} padding={2}>
+            <text fg={theme.textMuted}>No toolsets found</text>
+          </box>
+        ) : (
+          <scrollbox ref={follow.ref} key="list" scrollY flexGrow={1}
+                     verticalScrollbarOptions={VBAR}>
+            {secs.reduce<{ base: number; out: ReactNode[] }>((acc, s) => {
+              acc.out.push(
+                <box key={`§${s.kind}`} height={1} marginTop={acc.base > 0 ? 1 : 0}>
+                  <text fg={theme.textMuted}>─ {KIND_LABEL[s.kind]} ({s.items.length}) </text>
+                </box>
+              );
+              s.items.forEach((t, j) => {
+                const i = acc.base + j;
+                acc.out.push(
+                  <Row
+                    key={t.name}
+                    id={follow.id(i)}
+                    ts={t}
+                    selected={i === sel}
+                    onSelect={() => setSel(i)}
+                    onHover={() => setSel(i)}
+                  />
+                );
+              });
+              acc.base += s.items.length;
+              return acc;
+            }, { base: 0, out: [] }).out}
+          </scrollbox>
+        )}
+      </TabShell>
+
+      {ts ? <DetailPanel ts={ts} /> : null}
+    </box>
+  );
+});

package/src/theme/builtin.ts

@@ -0,0 +1,78 @@
+/**
+ * Built-in themes — imported statically from JSON files.
+ * Same set as OpenCode.
+ */
+
+import type { ThemeJson } from "./types";
+
+import aura from "./themes/aura.json";
+import ayu from "./themes/ayu.json";
+import carbonfox from "./themes/carbonfox.json";
+import catppuccin from "./themes/catppuccin.json";
+import catppuccinFrappe from "./themes/catppuccin-frappe.json";
+import catppuccinMacchiato from "./themes/catppuccin-macchiato.json";
+import cobalt2 from "./themes/cobalt2.json";
+import cursor from "./themes/cursor.json";
+import dracula from "./themes/dracula.json";
+import everforest from "./themes/everforest.json";
+import flexoki from "./themes/flexoki.json";
+import github from "./themes/github.json";
+import gruvbox from "./themes/gruvbox.json";
+import kanagawa from "./themes/kanagawa.json";
+import lucentOrng from "./themes/lucent-orng.json";
+import material from "./themes/material.json";
+import matrix from "./themes/matrix.json";
+import mercury from "./themes/mercury.json";
+import monokai from "./themes/monokai.json";
+import nightowl from "./themes/nightowl.json";
+import nord from "./themes/nord.json";
+import oneDark from "./themes/one-dark.json";
+import opencode from "./themes/opencode.json";
+import orng from "./themes/orng.json";
+import osakaJade from "./themes/osaka-jade.json";
+import palenight from "./themes/palenight.json";
+import rosepine from "./themes/rosepine.json";
+import solarized from "./themes/solarized.json";
+import synthwave84 from "./themes/synthwave84.json";
+import tokyonight from "./themes/tokyonight.json";
+import vercel from "./themes/vercel.json";
+import vesper from "./themes/vesper.json";
+import zenburn from "./themes/zenburn.json";
+
+export const DEFAULT_THEMES: Record<string, ThemeJson> = {
+  aura: aura as ThemeJson,
+  ayu: ayu as ThemeJson,
+  carbonfox: carbonfox as ThemeJson,
+  catppuccin: catppuccin as ThemeJson,
+  "catppuccin-frappe": catppuccinFrappe as ThemeJson,
+  "catppuccin-macchiato": catppuccinMacchiato as ThemeJson,
+  cobalt2: cobalt2 as ThemeJson,
+  cursor: cursor as ThemeJson,
+  dracula: dracula as ThemeJson,
+  everforest: everforest as ThemeJson,
+  flexoki: flexoki as ThemeJson,
+  github: github as ThemeJson,
+  gruvbox: gruvbox as ThemeJson,
+  kanagawa: kanagawa as ThemeJson,
+  "lucent-orng": lucentOrng as ThemeJson,
+  material: material as ThemeJson,
+  matrix: matrix as ThemeJson,
+  mercury: mercury as ThemeJson,
+  monokai: monokai as ThemeJson,
+  nightowl: nightowl as ThemeJson,
+  nord: nord as ThemeJson,
+  "one-dark": oneDark as ThemeJson,
+  opencode: opencode as ThemeJson,
+  orng: orng as ThemeJson,
+  "osaka-jade": osakaJade as ThemeJson,
+  palenight: palenight as ThemeJson,
+  rosepine: rosepine as ThemeJson,
+  solarized: solarized as ThemeJson,
+  synthwave84: synthwave84 as ThemeJson,
+  tokyonight: tokyonight as ThemeJson,
+  vercel: vercel as ThemeJson,
+  vesper: vesper as ThemeJson,
+  zenburn: zenburn as ThemeJson,
+};
+
+export const DEFAULT_THEME = "tokyonight";

package/src/theme/context.tsx

@@ -0,0 +1,106 @@
+/**
+ * Theme React context — provides resolved theme to all components.
+ *
+ * Usage:
+ *   // In app root:
+ *   <ThemeProvider><App /></ThemeProvider>
+ *
+ *   // In any component:
+ *   const { theme, name, set, names } = useTheme();
+ *   <box backgroundColor={theme.backgroundPanel}>
+ *   <text fg={theme.text}>
+ */
+
+import { createContext, useContext, useState, useCallback, useMemo } from "react";
+import type { ReactNode } from "react";
+import type { SyntaxStyle } from "@opentui/core";
+import type { Theme, ThemeJson } from "./types";
+import { resolveTheme } from "./resolve";
+import { DEFAULT_THEMES, DEFAULT_THEME } from "./builtin";
+import { syntax } from "./syntax";
+import * as preferences from "../utils/preferences";
+
+interface ThemeContext {
+  /** Resolved theme — all RGBA values ready for JSX props */
+  theme: Theme;
+  /** SyntaxStyle for code/markdown rendering */
+  syntaxStyle: SyntaxStyle;
+  /** Currently active theme name */
+  name: string;
+  /** Dark or light mode */
+  mode: "dark" | "light";
+  /** Switch to a theme by name. Returns false if not found. */
+  set: (name: string) => boolean;
+  /** All available theme names, sorted */
+  names: string[];
+  /** Check if a theme exists */
+  has: (name: string) => boolean;
+}
+
+const Ctx = createContext<ThemeContext | null>(null);
+
+interface ThemeProviderProps {
+  children: ReactNode;
+  initial?: string;
+  mode?: "dark" | "light";
+}
+
+export const ThemeProvider = ({
+  children,
+  initial,
+  mode: initialMode = "dark",
+}: ThemeProviderProps) => {
+  const [active, setActive] = useState(initial ?? DEFAULT_THEME);
+  const [mode] = useState(initialMode);
+  const [themes] = useState<Record<string, ThemeJson>>(DEFAULT_THEMES);
+
+  const resolved = useMemo(() => {
+    const json = themes[active] ?? themes[DEFAULT_THEME];
+    try {
+      return resolveTheme(json, mode);
+    } catch {
+      return resolveTheme(themes[DEFAULT_THEME], mode);
+    }
+  }, [active, mode, themes]);
+
+  const names = useMemo(
+    () => Object.keys(themes).sort(),
+    [themes],
+  );
+
+  const set = useCallback(
+    (name: string) => {
+      if (!themes[name]) return false;
+      setActive(name);
+      preferences.set("theme", name);
+      return true;
+    },
+    [themes],
+  );
+
+  const has = useCallback(
+    (name: string) => themes[name] !== undefined,
+    [themes],
+  );
+
+  const syntaxStyle = useMemo(() => syntax(resolved), [resolved]);
+
+  const value = useMemo<ThemeContext>(() => ({
+    theme: resolved,
+    syntaxStyle,
+    name: active,
+    mode,
+    set,
+    names,
+    has,
+  }), [resolved, syntaxStyle, active, mode, set, names, has]);
+
+  return <Ctx.Provider value={value}>{children}</Ctx.Provider>;
+};
+
+/** Access the current theme. Must be inside <ThemeProvider>. */
+export const useTheme = (): ThemeContext => {
+  const ctx = useContext(Ctx);
+  if (!ctx) throw new Error("useTheme() must be used inside <ThemeProvider>");
+  return ctx;
+};

package/src/theme/index.ts

@@ -0,0 +1,4 @@
+export { ThemeProvider, useTheme } from "./context";
+export { resolveTheme } from "./resolve";
+export { DEFAULT_THEMES, DEFAULT_THEME } from "./builtin";
+export type { ThemeCurrent, Theme, ThemeJson, ThemeColor } from "./types";

package/src/theme/resolve.ts

@@ -0,0 +1,134 @@
+/**
+ * Theme resolver — takes a ThemeJson + mode, returns a fully resolved Theme.
+ *
+ * Handles: hex colors, defs references, cross-token references,
+ * dark/light variants, ANSI codes, transparent/none, circular detection.
+ */
+
+import { RGBA } from "@opentui/core";
+import type { Theme, ThemeJson, ThemeColor, ColorValue, HermTokens } from "./types";
+
+/** Resolve a ThemeJson into a concrete Theme with all RGBA values */
+export function resolveTheme(
+  theme: ThemeJson,
+  mode: "dark" | "light",
+): Theme {
+  const defs = theme.defs ?? {};
+
+  function resolve(c: ColorValue, chain: string[] = []): RGBA {
+    if (c instanceof RGBA) return c;
+
+    if (typeof c === "string") {
+      if (c === "transparent" || c === "none") return RGBA.fromInts(0, 0, 0, 0);
+      if (c.startsWith("#")) return RGBA.fromHex(c);
+
+      // Reference — check for circular
+      if (chain.includes(c)) {
+        throw new Error(`Circular color reference: ${[...chain, c].join(" -> ")}`);
+      }
+      const next = defs[c] ?? theme.theme[c as ThemeColor];
+      if (next === undefined) {
+        throw new Error(`Color reference "${c}" not found in defs or theme`);
+      }
+      return resolve(next, [...chain, c]);
+    }
+
+    if (typeof c === "number") return ansiToRgba(c);
+
+    // Variant — pick dark or light
+    return resolve(c[mode], chain);
+  }
+
+  const resolved = Object.fromEntries(
+    Object.entries(theme.theme)
+      .filter(
+        ([key]) =>
+          key !== "selectedListItemText" &&
+          key !== "backgroundMenu" &&
+          key !== "thinkingOpacity",
+      )
+      .map(([key, value]) => [key, resolve(value as ColorValue)]),
+  ) as Partial<Record<ThemeColor, RGBA>>;
+
+  // Optional tokens with fallbacks
+  const hasList = theme.theme.selectedListItemText !== undefined;
+  resolved.selectedListItemText = hasList
+    ? resolve(theme.theme.selectedListItemText!)
+    : resolved.background;
+
+  resolved.backgroundMenu =
+    theme.theme.backgroundMenu !== undefined
+      ? resolve(theme.theme.backgroundMenu)
+      : resolved.backgroundElement;
+
+  const base = {
+    ...resolved,
+    _hasSelectedListItemText: hasList,
+    thinkingOpacity: theme.theme.thinkingOpacity ?? 0.6,
+  };
+
+  // Compute herm-specific tokens (accent is a required token)
+  const herm = resolveHermTokens(resolved.accent!);
+
+  return { ...base, ...herm } as Theme;
+}
+
+/**
+ * Compute herm pillar tokens.
+ * hermAvatar and hermBody default to accent.
+ * hermBodyText is auto-computed for legibility against hermBody.
+ */
+function resolveHermTokens(accent: RGBA): HermTokens {
+  const text = contrastText(accent);
+  return {
+    hermAvatar: accent,
+    hermBody: accent,
+    hermBodyText: text,
+    hermBodyTextMuted: mix(text, accent, 0.45),
+  };
+}
+
+/** Linear mix a→b by t (0=a, 1=b). */
+function mix(a: RGBA, b: RGBA, t: number): RGBA {
+  const l = (x: number, y: number) => x + (y - x) * t;
+  return RGBA.fromValues(l(a.r, b.r), l(a.g, b.g), l(a.b, b.b), 1);
+}
+
+/**
+ * Pick black or white text for maximum legibility on a background.
+ * Uses WCAG relative luminance formula.
+ */
+function contrastText(bg: RGBA): RGBA {
+  // RGBA stores 0-1 floats
+  const lum = 0.299 * bg.r + 0.587 * bg.g + 0.114 * bg.b;
+  return lum > 0.5
+    ? RGBA.fromInts(0, 0, 0)       // dark text on light bg
+    : RGBA.fromInts(255, 255, 255); // light text on dark bg
+}
+
+/** Convert ANSI 256-color code to RGBA */
+function ansiToRgba(code: number): RGBA {
+  if (code < 16) {
+    const colors = [
+      "#000000", "#800000", "#008000", "#808000",
+      "#000080", "#800080", "#008080", "#c0c0c0",
+      "#808080", "#ff0000", "#00ff00", "#ffff00",
+      "#0000ff", "#ff00ff", "#00ffff", "#ffffff",
+    ];
+    return RGBA.fromHex(colors[code] ?? "#000000");
+  }
+  if (code < 232) {
+    const idx = code - 16;
+    const val = (x: number) => (x === 0 ? 0 : x * 40 + 55);
+    return RGBA.fromInts(
+      val(Math.floor(idx / 36)),
+      val(Math.floor(idx / 6) % 6),
+      val(idx % 6),
+    );
+  }
+  if (code < 256) {
+    const gray = (code - 232) * 10 + 8;
+    return RGBA.fromInts(gray, gray, gray);
+  }
+  return RGBA.fromInts(0, 0, 0);
+}

package/src/theme/syntax.ts

@@ -0,0 +1,31 @@
+import { SyntaxStyle, type ThemeTokenStyle } from "@opentui/core"
+import type { Theme } from "./types"
+
+export function syntax(theme: Theme): SyntaxStyle {
+  return SyntaxStyle.fromTheme(rules(theme))
+}
+
+function rules(theme: Theme): ThemeTokenStyle[] {
+  return [
+    { scope: ["default"], style: { foreground: theme.text } },
+    { scope: ["comment", "comment.documentation"], style: { foreground: theme.syntaxComment, italic: true } },
+    { scope: ["string", "symbol"], style: { foreground: theme.syntaxString } },
+    { scope: ["number", "boolean"], style: { foreground: theme.syntaxNumber } },
+    { scope: ["keyword"], style: { foreground: theme.syntaxKeyword, italic: true } },
+    { scope: ["keyword.return", "keyword.conditional", "keyword.repeat"], style: { foreground: theme.syntaxKeyword, italic: true } },
+    { scope: ["keyword.type"], style: { foreground: theme.syntaxType, bold: true } },
+    { scope: ["keyword.function", "function.method"], style: { foreground: theme.syntaxFunction } },
+    { scope: ["function", "function.call"], style: { foreground: theme.syntaxFunction } },
+    { scope: ["variable", "variable.parameter"], style: { foreground: theme.syntaxVariable } },
+    { scope: ["type"], style: { foreground: theme.syntaxType } },
+    { scope: ["operator"], style: { foreground: theme.syntaxOperator } },
+    { scope: ["punctuation", "punctuation.bracket", "punctuation.delimiter"], style: { foreground: theme.syntaxPunctuation } },
+    // Markdown-specific
+    { scope: ["markup.heading"], style: { foreground: theme.markdownHeading, bold: true } },
+    { scope: ["markup.strong"], style: { foreground: theme.markdownStrong, bold: true } },
+    { scope: ["markup.italic"], style: { foreground: theme.markdownEmph, italic: true } },
+    { scope: ["markup.link"], style: { foreground: theme.markdownLink, underline: true } },
+    { scope: ["markup.raw"], style: { foreground: theme.markdownCode } },
+    { scope: ["markup.list"], style: { foreground: theme.markdownListItem } },
+  ]
+}