termcast 1.3.35 → 1.3.37

package/src/examples/simple-detail-markdown.vitest.tsx

@@ -0,0 +1,156 @@
+import { test, expect, afterEach, beforeEach } from 'vitest'
+import { launchTerminal, Session } from 'tuistory/src'
+
+let session: Session
+
+beforeEach(async () => {
+  session = await launchTerminal({
+    command: 'bun',
+    args: ['src/examples/simple-detail-markdown.tsx'],
+    cols: 80,
+    rows: 70,
+  })
+})
+
+afterEach(() => {
+  session?.close()
+})
+
+test('detail renders markdown with headings, lists, links, tables, code and diagrams', async () => {
+  const text = await session.text({
+    waitFor: (text) => {
+      return text.includes('Architecture') && text.includes('Configuration Table') && text.includes('Process')
+    },
+    timeout: 10000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+                                                                                 █
+                                                                                 █
+      Architecture Overview                                                      ▀
+
+      This document describes the system architecture.
+
+      Components
+
+      The system has three main components:
+
+      - Client - handles user interaction
+      - Server - processes requests
+      - Database - stores data
+
+      Links
+
+      Check out the GitHub repository for the source code.
+
+      See the API documentation for more details.
+
+      A paragraph with multiple links inline here.
+
+      Nested formatting: bold with link inside and italic with link.
+
+      Configuration Table
+
+      ┌───────────┬───────────┬───────────────────────┐
+      │Setting    │Default    │Description            │
+      │───────────│───────────│───────────────────────│
+      │Host       │localhost  │Database host address  │
+      │───────────│───────────│───────────────────────│
+      │Port       │5432       │Database port number   │
+      │───────────│───────────│───────────────────────│
+      │SSL        │false      │Enable TLS encryption  │
+      │───────────│───────────│───────────────────────│
+      │Pool Size  │10         │Max connections        │
+      └───────────┴───────────┴───────────────────────┘
+
+      Flow Diagram
+
+      ┌─────────────┐     ┌─────────────┐     ┌─────────────┐
+      │   Client    │────▶│   Server    │────▶│  Database   │
+      └─────────────┘     └─────────────┘     └─────────────┘
+
+      Vertical Flow
+
+           ┌─────────┐
+           │  Start  │
+           └────┬────┘
+                │
+                ▼
+           ┌─────────┐
+           │ Process │
+           └────┬────┘
+                │
+                ▼
+           ┌─────────┐
+           │   End   │
+           └─────────┘
+
+      Code Example
+
+      interface Config {
+
+
+      esc go back                                              powered by termcast
+
+    "
+  `)
+  // Headings
+  expect(text).toContain('Architecture')
+  expect(text).toContain('Components')
+  expect(text).toContain('Configuration Table')
+  // List items
+  expect(text).toContain('Client')
+  expect(text).toContain('Server')
+  expect(text).toContain('Database')
+  // Links - title text visible, URLs hidden
+  expect(text).toContain('GitHub repository')
+  expect(text).toContain('API documentation')
+  expect(text).toContain('link inside')
+  // Table
+  expect(text).toContain('Setting')
+  expect(text).toContain('localhost')
+  expect(text).toContain('5432')
+  // Diagram box-drawing chars
+  expect(text).toContain('┌─')
+  expect(text).toContain('─┐')
+  expect(text).toContain('Process')
+  // Code block header visible (content may need scroll)
+  expect(text).toContain('Code Example')
+  expect(text).toContain('interface Config')
+}, 30000)
+
+test('links have distinct cyan color from bold/heading text', async () => {
+  await session.text({
+    waitFor: (text) => text.includes('GitHub repository'),
+    timeout: 10000,
+  })
+
+  // Links should be cyan (#56b6c2) 
+  const linkText = await session.text({
+    only: { foreground: '#56b6c2' },
+    timeout: 5000,
+  })
+  
+  // Bold/heading text should be primary yellow (#ffc000)
+  const boldText = await session.text({
+    only: { foreground: '#ffc000' },
+    timeout: 5000,
+  })
+
+  // Verify links are rendered in cyan
+  expect(linkText).toContain('GitHub repository')
+  expect(linkText).toContain('API documentation')
+  expect(linkText).toContain('multiple')
+  expect(linkText).toContain('inline')
+  
+  // Verify headings are rendered in primary color (not cyan)
+  expect(boldText).toContain('Architecture Overview')
+  expect(boldText).toContain('Components')
+  
+  // Links should NOT appear in bold color
+  expect(boldText).not.toContain('GitHub repository')
+  expect(boldText).not.toContain('API documentation')
+}, 30000)

package/src/examples/simple-grid.vitest.tsx

@@ -72,8 +72,8 @@ test('grid navigation and display', async () => {
        > Search items...
 
        Fruits
-      ›🍎 Apple
-       🍌 Banana
+       🍎 Apple
+      ›🍌 Banana
        🍒 Cherry
 
        Animals

package/src/examples/swift-extension.vitest.tsx

@@ -96,7 +96,7 @@ test.skipIf(isLinux)('swift extension dev mode shows command list', async () =>
 
 
 
-       ↵ run command   ↑↓ navigate   ^k actions
+       ↵ run command
 
 
 

package/src/internal/scrollbox.tsx

@@ -43,9 +43,7 @@ export function ScrollBox({
           // visible: true,
           // showArrows: true,
           trackOptions: {
-            foregroundColor: theme.textMuted,
-
-            // backgroundColor: '#414868',
+            foregroundColor: theme.border,
           },
           ...(style?.scrollbarOptions || {}),
         },

package/src/markdown-utils.tsx

@@ -0,0 +1,182 @@
+// Markdown renderNode hook for terminal rendering.
+// Overrides paragraph rendering to hide URLs from links,
+// showing only the link title text with distinct cyan color and underline.
+// Uses opentui's renderNode callback on the <markdown> element.
+//
+// Link text gets TextChunk.link = { url } which encodes as OSC 8 terminal
+// hyperlinks when the terminal supports it. Supported terminals include:
+// - Ghostty, kitty, WezTerm, Alacritty, iTerm2
+// In these terminals, links are clickable natively (cmd+click or hover).
+// In unsupported terminals, links still display with distinct color/underline
+// but won't be clickable.
+
+import {
+  TextRenderable,
+  StyledText,
+  type TextChunk,
+  parseColor,
+  createTextAttributes,
+  type Renderable,
+  type RenderContext,
+} from '@opentui/core'
+import { getResolvedTheme } from './themes'
+import { useStore } from './state'
+
+// Minimal token types from marked (dependency of opentui, not termcast directly)
+interface Token {
+  type: string
+  text?: string
+  raw?: string
+  href?: string
+  tokens?: Token[]
+}
+
+// Matches RenderNodeContext from @opentui/core/renderables/Markdown
+interface RenderNodeContext {
+  defaultRender: () => Renderable | null
+}
+
+interface LinkInfo {
+  text: string
+  href: string
+}
+
+// Recursively check if a token or any of its children contain link tokens
+function hasLinks(token: Token): boolean {
+  if (!Array.isArray(token.tokens)) {
+    return false
+  }
+  return token.tokens.some((t) => {
+    return t.type === 'link' || hasLinks(t)
+  })
+}
+
+// Recursively flatten inline tokens into chunks, stripping link URLs.
+// Handles nested structures like **[link](url)** or *[link](url)*.
+function flattenInlineTokens({
+  tokens,
+  chunks,
+  links,
+  primaryColor,
+  linkColor,
+  textColor,
+  defaultAttr,
+}: {
+  tokens: Token[]
+  chunks: TextChunk[]
+  links: LinkInfo[]
+  primaryColor: ReturnType<typeof parseColor>
+  linkColor: ReturnType<typeof parseColor>
+  textColor: ReturnType<typeof parseColor>
+  defaultAttr?: number
+}): void {
+  for (const token of tokens) {
+    if (token.type === 'link') {
+      links.push({ text: token.text || '', href: token.href || '' })
+      // Render link title only with distinct link color, underline, and OSC 8 terminal hyperlink
+      const linkAttr = createTextAttributes({ underline: true })
+      chunks.push({
+        __isChunk: true,
+        text: token.text || '',
+        fg: linkColor,
+        attributes: linkAttr,
+        link: { url: token.href || '' },
+      })
+    } else if (token.type === 'strong') {
+      const boldAttr = createTextAttributes({ bold: true })
+      // Recurse into strong children to handle nested links like **[link](url)**
+      flattenInlineTokens({
+        tokens: token.tokens || [],
+        chunks,
+        links,
+        primaryColor,
+        linkColor,
+        textColor,
+        defaultAttr: boldAttr,
+      })
+    } else if (token.type === 'em') {
+      const italicAttr = createTextAttributes({ italic: true })
+      // Recurse into em children to handle nested links like *[link](url)*
+      flattenInlineTokens({
+        tokens: token.tokens || [],
+        chunks,
+        links,
+        primaryColor,
+        linkColor,
+        textColor,
+        defaultAttr: italicAttr,
+      })
+    } else if (token.type === 'del') {
+      const strikeAttr = createTextAttributes({ strikethrough: true })
+      flattenInlineTokens({
+        tokens: token.tokens || [],
+        chunks,
+        links,
+        primaryColor,
+        linkColor,
+        textColor,
+        defaultAttr: strikeAttr,
+      })
+    } else if (token.type === 'codespan') {
+      chunks.push({
+        __isChunk: true,
+        text: token.text || '',
+        fg: primaryColor,
+        attributes: defaultAttr,
+      })
+    } else if (token.type === 'br') {
+      chunks.push({
+        __isChunk: true,
+        text: '\n',
+        fg: textColor,
+      })
+    } else {
+      // text, escape, etc.
+      chunks.push({
+        __isChunk: true,
+        text: token.text ?? token.raw ?? '',
+        fg: textColor,
+        attributes: defaultAttr,
+      })
+    }
+  }
+}
+
+// Create a renderNode function that overrides paragraph rendering
+// to hide link URLs and make link text bold + bright.
+// Links get OSC 8 terminal hyperlinks via TextChunk.link so terminals
+// can handle click-to-open natively (cmd+click in iTerm2, kitty, Ghostty).
+export function createMarkdownRenderNode(renderer: RenderContext): (token: Token, context: RenderNodeContext) => Renderable | undefined {
+  let nodeCounter = 0
+
+  return (token: Token, context: RenderNodeContext) => {
+    // Only override paragraphs that contain links (including nested)
+    if (token.type !== 'paragraph' || !hasLinks(token)) {
+      return undefined // use default rendering
+    }
+
+    const themeName = useStore.getState().currentThemeName
+    const theme = getResolvedTheme(themeName)
+    const primaryColor = parseColor(theme.primary)
+    const linkColor = parseColor(theme.markdownLinkText)
+    const textColor = parseColor(theme.text)
+
+    const chunks: TextChunk[] = []
+    const links: LinkInfo[] = []
+    flattenInlineTokens({
+      tokens: token.tokens || [],
+      chunks,
+      links,
+      primaryColor,
+      linkColor,
+      textColor,
+    })
+
+    return new TextRenderable(renderer, {
+      id: `para-links-${nodeCounter++}`,
+      content: new StyledText(chunks),
+      width: '100%',
+      marginBottom: 1,
+    })
+  }
+}

package/src/theme.tsx

@@ -1,5 +1,5 @@
-import { SyntaxStyle, RGBA } from '@opentui/core'
-import { getResolvedTheme, type ResolvedTheme, defaultThemeName, themeNames } from './themes'
+import { SyntaxStyle } from '@opentui/core'
+import { getResolvedTheme, getSyntaxTheme, type ResolvedTheme, defaultThemeName, themeNames } from './themes'
 import { useStore } from './state'
 import { Cache } from './apis/cache'
 
@@ -51,30 +51,11 @@ export function useTheme(): ResolvedTheme {
   return getResolvedTheme(themeName)
 }
 
+// Returns a full SyntaxStyle with all code + markdown scopes.
+// Code blocks inside markdown get proper syntax highlighting (keywords, strings, etc.)
 export function getMarkdownSyntaxStyle(): SyntaxStyle {
   const themeName = useStore.getState().currentThemeName
-  const t = getResolvedTheme(themeName)
-  return SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromHex(t.markdownText) },
-    'markup.heading.1': { fg: RGBA.fromHex(t.markdownHeading), bold: true },
-    'markup.heading.2': { fg: RGBA.fromHex(t.markdownHeading), bold: true },
-    'markup.heading.3': { fg: RGBA.fromHex(t.markdownHeading), bold: true },
-    'markup.heading.4': { fg: RGBA.fromHex(t.markdownHeading), bold: true },
-    'markup.heading.5': { fg: RGBA.fromHex(t.markdownHeading), bold: true },
-    'markup.heading.6': { fg: RGBA.fromHex(t.markdownHeading), bold: true },
-    'markup.heading': { fg: RGBA.fromHex(t.markdownHeading), bold: true },
-    'markup.raw.block': { fg: RGBA.fromHex(t.markdownCode) },
-    'markup.link.url': { fg: RGBA.fromHex(t.markdownLink) },
-    'markup.link.label': { fg: RGBA.fromHex(t.markdownLinkText) },
-    'markup.list': { fg: RGBA.fromHex(t.markdownListItem) },
-    'markup.list.checked': { fg: RGBA.fromHex(t.success) },
-    'markup.list.unchecked': { fg: RGBA.fromHex(t.textMuted) },
-    'markup.quote': { fg: RGBA.fromHex(t.markdownBlockQuote), italic: true },
-    'punctuation.special': { fg: RGBA.fromHex(t.syntaxPunctuation) },
-    'punctuation.delimiter': { fg: RGBA.fromHex(t.syntaxPunctuation) },
-    'string.escape': { fg: RGBA.fromHex(t.syntaxString) },
-    label: { fg: RGBA.fromHex(t.accent) },
-  })
+  return SyntaxStyle.fromStyles(getSyntaxTheme(themeName))
 }
 
 // For backward compatibility - some code imports markdownSyntaxStyle directly

package/src/themes/termcast.json

@@ -140,12 +140,12 @@
       "light": "darkStep9"
     },
     "markdownLink": {
-      "dark": "darkStep9",
-      "light": "darkStep9"
+      "dark": "darkCyan",
+      "light": "darkCyan"
     },
     "markdownLinkText": {
-      "dark": "darkStep9",
-      "light": "darkStep9"
+      "dark": "darkCyan",
+      "light": "darkCyan"
     },
     "markdownCode": {
       "dark": "darkStep9",

package/src/themes.ts

@@ -55,6 +55,7 @@ export interface ResolvedTheme {
   // Text colors
   text: string
   textMuted: string
+  conceal: string
 
   // Background colors
   background: string
@@ -122,6 +123,17 @@ export interface ResolvedTheme {
   transparent: undefined
 }
 
+export interface SyntaxThemeStyle {
+  fg: RGBA
+  bold?: boolean
+  italic?: boolean
+  underline?: boolean
+}
+
+export interface SyntaxTheme {
+  [key: string]: SyntaxThemeStyle
+}
+
 // Note: lucent-orng excluded because it uses transparent backgrounds
 const DEFAULT_THEMES: Record<string, ThemeJson> = {
   aura,
@@ -210,6 +222,7 @@ function resolveTheme(
     // Text
     text: resolveColorToHex(t.text ?? fallbackText),
     textMuted: resolveColorToHex(t.textMuted ?? fallbackGray),
+    conceal: resolveColorToHex(t.conceal ?? t.textMuted ?? fallbackGray),
 
     // Background
     background: resolveColorToHex(t.background ?? fallbackBg),
@@ -286,6 +299,91 @@ export function getResolvedTheme(
   return resolveTheme(themeJson, mode)
 }
 
+// Full syntax theme with tree-sitter scope names for both code and markdown.
+// Ported from critique's getSyntaxTheme() for consistent rendering.
+export function getSyntaxTheme(
+  name: string,
+  mode: 'dark' | 'light' = 'dark',
+): SyntaxTheme {
+  const resolved = getResolvedTheme(name, mode)
+
+  const h = (hex: string): RGBA => {
+    return parseColor(hex)
+  }
+
+  return {
+    // Default text style
+    default: { fg: h(resolved.text) },
+
+    // Code syntax styles
+    keyword: { fg: h(resolved.syntaxKeyword), italic: true },
+    'keyword.import': { fg: h(resolved.syntaxKeyword) },
+    'keyword.return': { fg: h(resolved.syntaxKeyword), italic: true },
+    'keyword.conditional': { fg: h(resolved.syntaxKeyword), italic: true },
+    'keyword.repeat': { fg: h(resolved.syntaxKeyword), italic: true },
+    'keyword.type': { fg: h(resolved.syntaxType), bold: true, italic: true },
+    'keyword.function': { fg: h(resolved.syntaxFunction) },
+    'keyword.operator': { fg: h(resolved.syntaxOperator) },
+    'keyword.modifier': { fg: h(resolved.syntaxKeyword), italic: true },
+    'keyword.exception': { fg: h(resolved.syntaxKeyword), italic: true },
+    string: { fg: h(resolved.syntaxString) },
+    symbol: { fg: h(resolved.syntaxString) },
+    comment: { fg: h(resolved.syntaxComment), italic: true },
+    'comment.documentation': { fg: h(resolved.syntaxComment), italic: true },
+    number: { fg: h(resolved.syntaxNumber) },
+    boolean: { fg: h(resolved.syntaxNumber) },
+    constant: { fg: h(resolved.syntaxNumber) },
+    function: { fg: h(resolved.syntaxFunction) },
+    'function.call': { fg: h(resolved.syntaxFunction) },
+    'function.method': { fg: h(resolved.syntaxFunction) },
+    'function.method.call': { fg: h(resolved.syntaxVariable) },
+    constructor: { fg: h(resolved.syntaxFunction) },
+    type: { fg: h(resolved.syntaxType) },
+    module: { fg: h(resolved.syntaxType) },
+    class: { fg: h(resolved.syntaxType) },
+    operator: { fg: h(resolved.syntaxOperator) },
+    variable: { fg: h(resolved.syntaxVariable) },
+    'variable.parameter': { fg: h(resolved.syntaxVariable) },
+    'variable.member': { fg: h(resolved.syntaxFunction) },
+    property: { fg: h(resolved.syntaxVariable) },
+    parameter: { fg: h(resolved.syntaxVariable) },
+    bracket: { fg: h(resolved.syntaxPunctuation) },
+    punctuation: { fg: h(resolved.syntaxPunctuation) },
+    'punctuation.bracket': { fg: h(resolved.syntaxPunctuation) },
+    'punctuation.delimiter': { fg: h(resolved.syntaxOperator) },
+    'punctuation.special': { fg: h(resolved.syntaxOperator) },
+
+    // Markdown styles - tree-sitter scope names for markdown
+    'markup.heading': { fg: h(resolved.markdownHeading), bold: true },
+    'markup.heading.1': { fg: h(resolved.markdownHeading), bold: true },
+    'markup.heading.2': { fg: h(resolved.markdownHeading), bold: true },
+    'markup.heading.3': { fg: h(resolved.markdownHeading), bold: true },
+    'markup.heading.4': { fg: h(resolved.markdownHeading), bold: true },
+    'markup.heading.5': { fg: h(resolved.markdownHeading), bold: true },
+    'markup.heading.6': { fg: h(resolved.markdownHeading), bold: true },
+    'markup.bold': { fg: h(resolved.markdownStrong), bold: true },
+    'markup.strong': { fg: h(resolved.markdownStrong), bold: true },
+    'markup.italic': { fg: h(resolved.markdownEmph), italic: true },
+    'markup.list': { fg: h(resolved.markdownListItem) },
+    'markup.list.checked': { fg: h(resolved.success) },
+    'markup.list.unchecked': { fg: h(resolved.textMuted) },
+    'markup.quote': { fg: h(resolved.markdownBlockQuote), italic: true },
+    'markup.raw': { fg: h(resolved.markdownCode) },
+    'markup.raw.block': { fg: h(resolved.markdownCode) },
+    'markup.raw.inline': { fg: h(resolved.markdownCode) },
+    'markup.link': { fg: h(resolved.markdownLink), underline: true },
+    'markup.link.label': { fg: h(resolved.markdownLinkText), underline: true },
+    'markup.link.url': { fg: h(resolved.markdownLink), underline: true },
+    label: { fg: h(resolved.markdownLinkText) },
+    spell: { fg: h(resolved.text) },
+    nospell: { fg: h(resolved.text) },
+    conceal: { fg: h(resolved.conceal) },
+    'string.special': { fg: h(resolved.markdownLink), underline: true },
+    'string.special.url': { fg: h(resolved.markdownLink), underline: true },
+    'string.escape': { fg: h(resolved.syntaxString) },
+  }
+}
+
 export const themeNames = Object.keys(DEFAULT_THEMES).sort()
 
 export const defaultThemeName = 'termcast'