fix(tui): open inline-code directory paths in Sublime Merge

Absolute and ~/ paths no longer need a trailing slash to count as directory links, and inline code holding an existing absolute directory in assistant text is now a clickable link.

Author: sharunkumar

Makefile

@@ -3,7 +3,7 @@
 BUN := mise exec -- bun
 
 # Tests for changes made in this fork, relative to each package.
-TUI_FORK_TESTS := test/ui/directory-link.test.ts
+TUI_FORK_TESTS := test/ui/directory-link.test.ts test/ui/directory-markdown.test.tsx
 CORE_FORK_TESTS := test/plugin/custom.test.ts test/plugin/supervisor.test.ts
 
 install-deps:

packages/tui/src/routes/session/message-parts.tsx

@@ -11,6 +11,7 @@ import { createSyntaxStyleMemo, useTheme, useThemes } from "../../context/theme"
 import { reasoningSummary } from "../../context/thinking"
 import { usePlugin } from "../../plugin/context"
 import { SplitBorder } from "../../ui/border"
+import { linkDirectoryMarkdown } from "../../ui/directory-markdown"
 import { Locale } from "../../util/locale"
 import { use } from "./render-context"
 import { generateThinkingSyntax } from "./thinking-syntax"
@@ -180,6 +181,7 @@ export function TextPart(props: {
       <box paddingLeft={3} flexShrink={0}>
         {/* Configure custom nodes before parsing; apply content before streaming so completion keeps the final tokens. */}
         <markdown
+          ref={linkDirectoryMarkdown}
           syntaxStyle={syntax()}
           renderNode={plugins.markdown()}
           content={props.part.text.trim()}

packages/tui/src/ui/directory-link.ts

@@ -7,10 +7,12 @@ import type { ClipboardService } from "../context/clipboard"
 
 const run = promisify(execFile)
 
-/** A directory link is a relative, absolute, or `~/` path with a trailing slash, such as `packages/core/`. */
+/** A directory link is an absolute or `~/` path, or a relative path with a trailing slash such as `packages/core/`. */
 export function directoryLinkPath(href: string, base: string) {
-  if (!href.endsWith("/") || /^[a-z][a-z0-9+.-]*:/i.test(href)) return
-  return path.resolve(href.startsWith("~/") ? os.homedir() : base, href.startsWith("~/") ? href.slice(2) : href)
+  if (/^[a-z][a-z0-9+.-]*:/i.test(href)) return
+  const home = href.startsWith("~/")
+  if (!home && !href.startsWith("/") && !href.endsWith("/")) return
+  return path.resolve(home ? os.homedir() : base, home ? href.slice(2) : href)
 }
 
 /** Copies the directory path, then opens it in Sublime Merge. Rejects when it is not an existing directory. */

packages/tui/src/ui/directory-markdown.ts

@@ -0,0 +1,50 @@
+import { stat } from "node:fs/promises"
+import { CodeRenderable, Renderable } from "@opentui/core"
+import { directoryLinkPath } from "./directory-link"
+
+const hooked = new WeakSet<Renderable>()
+
+type OnChunks = NonNullable<CodeRenderable["onChunks"]>
+
+/** Links inline code spans holding an existing absolute directory so a click opens it like a directory link. */
+export function linkDirectoryMarkdown(renderable: Renderable) {
+  if (hooked.has(renderable)) return
+  hooked.add(renderable)
+  const add = renderable.add.bind(renderable)
+  renderable.add = (child, index) => {
+    if (child instanceof Renderable) linkDirectoryMarkdown(child)
+    return add(child, index)
+  }
+  if (renderable instanceof CodeRenderable && renderable.filetype === "markdown") linkCode(renderable)
+  renderable.getChildren().forEach(linkDirectoryMarkdown)
+}
+
+function linkCode(renderable: CodeRenderable) {
+  const onChunks = renderable.onChunks
+  renderable.onChunks = async (chunks, context) =>
+    linkDirectorySpans((await onChunks?.(chunks, context)) ?? chunks, context)
+  const content = renderable.content
+  renderable.content = ""
+  renderable.content = content
+}
+
+async function linkDirectorySpans(chunks: Parameters<OnChunks>[0], context: Parameters<OnChunks>[1]) {
+  const candidates = context.highlights.flatMap(([start, end, group]) => {
+    if (group !== "markup.raw" && !group.startsWith("markup.raw.")) return []
+    const text = context.content.slice(start, end).replace(/^`+|`+$/g, "")
+    return /^(\/|~\/)\S*$/.test(text) ? [text] : []
+  })
+  if (candidates.length === 0) return chunks
+  const directories = new Set(
+    (
+      await Promise.all(
+        [...new Set(candidates)].map(async (text) => {
+          const directory = directoryLinkPath(text, "/")
+          if (!directory) return
+          return (await stat(directory).catch(() => undefined))?.isDirectory() ? text : undefined
+        }),
+      )
+    ).filter((text) => text !== undefined),
+  )
+  return chunks.map((chunk) => (directories.has(chunk.text) && !chunk.link ? { ...chunk, link: { url: chunk.text } } : chunk))
+}

packages/tui/test/ui/directory-link.test.ts

@@ -32,7 +32,9 @@ test.each([
   ["parent", "../shared/", "/work/app", "/work/shared"],
   ["absolute", "/etc/hosts.d/", "/work", "/etc/hosts.d"],
   ["home", "~/src/", "/work", path.join(os.homedir(), "src")],
-  ["no trailing slash", "packages/core", "/work", undefined],
+  ["absolute without trailing slash", "/var/folders/x/worktree", "/work", "/var/folders/x/worktree"],
+  ["home without trailing slash", "~/src", "/work", path.join(os.homedir(), "src")],
+  ["relative without trailing slash", "packages/core", "/work", undefined],
   ["web link", "https://example.com/docs/", "/work", undefined],
   ["file url", "file:///tmp/", "/work", undefined],
 ])("directory link path: %s", (_name, href, base, expected) => {

packages/tui/test/ui/directory-markdown.test.tsx

@@ -0,0 +1,69 @@
+/** @jsxImportSource @opentui/solid */
+import { afterEach, beforeEach, expect, test } from "bun:test"
+import { mkdir, mkdtemp, rm, writeFile } from "node:fs/promises"
+import os from "node:os"
+import path from "node:path"
+import { SyntaxStyle } from "@opentui/core"
+import { ManualClock } from "@opentui/core/testing"
+import { testRender, useRenderer } from "@opentui/solid"
+import { linkDirectoryMarkdown } from "../../src/ui/directory-markdown"
+import { clickedLink } from "../../src/ui/link"
+
+const syntaxStyle = SyntaxStyle.fromStyles({ default: { fg: "#ffffff" } })
+let root: string
+
+beforeEach(async () => {
+  root = await mkdtemp(path.join(os.tmpdir(), "directory-markdown-"))
+  await mkdir(path.join(root, "worktree"))
+  await writeFile(path.join(root, "file.txt"), "")
+})
+
+afterEach(() => rm(root, { recursive: true, force: true }))
+
+test("inline code holding an existing absolute directory is a clickable link; files and missing paths are not", async () => {
+  const directory = path.join(root, "worktree")
+  const file = path.join(root, "file.txt")
+  const missing = path.join(root, "missing")
+  const opened: string[] = []
+  function Transcript() {
+    const renderer = useRenderer()
+    return (
+      <box
+        onMouseUp={(event) => {
+          const link = clickedLink(renderer, event)
+          if (link) opened.push(link)
+        }}
+      >
+        <markdown
+          ref={linkDirectoryMarkdown}
+          syntaxStyle={syntaxStyle}
+          conceal
+          content={`Dir \`${directory}\`\n\nFile \`${file}\`\n\nGone \`${missing}\``}
+        />
+      </box>
+    )
+  }
+  const app = await testRender(() => <Transcript />, { width: 120, height: 10, clock: new ManualClock() })
+
+  try {
+    for (let attempt = 0; attempt < 50 && !app.captureCharFrame().includes("Gone"); attempt++) {
+      await app.renderOnce()
+      await Bun.sleep(10)
+    }
+    await Bun.sleep(50)
+    await app.renderOnce()
+    const rows = app.captureCharFrame().split("\n")
+    const at = (label: string) => {
+      const y = rows.findIndex((row) => row.includes(label))
+      return [rows[y]!.indexOf("/"), y] as const
+    }
+
+    await app.mockMouse.click(...at("Dir"))
+    await app.mockMouse.click(...at("File"))
+    await app.mockMouse.click(...at("Gone"))
+
+    expect(opened).toEqual([directory])
+  } finally {
+    app.renderer.destroy()
+  }
+})