test(tui): defer diff hunk coverage

Co-authored-by: Aiden Cline <rekram1-node@users.noreply.github.com>

bun.lock

@@ -143,7 +143,10 @@
         "open": "10.1.2",
         "semver": "catalog:",
         "solid-js": "catalog:",
+        "tree-sitter-bash": "0.25.0",
+        "tree-sitter-powershell": "0.25.10",
         "uqr": "0.1.3",
+        "web-tree-sitter": "0.25.10",
         "ws": "8.21.0",
       },
       "devDependencies": {

packages/core/src/formatter.ts

@@ -54,9 +54,6 @@ const layer = Layer.effect(
         })
         formatters = builtIns
         if (configured === true) return
-        if (configured.ruff?.disabled || configured.uv?.disabled) {
-          formatters = formatters.filter((formatter) => formatter.name !== "ruff" && formatter.name !== "uv")
-        }
 
         for (const [name, entry] of Object.entries(configured)) {
           const index = formatters.findIndex((formatter) => formatter.name === name)

packages/core/src/formatter/builtins.ts

@@ -18,7 +18,6 @@ export function make(input: {
   readonly fs: FSUtil.Interface
   readonly npm: Npm.Interface
   readonly processes: AppProcess.Interface
-  readonly experimentalOxfmt?: boolean
 }) {
   const disabled = false as const
   const findUp = (target: string) => input.fs.findUp(target, input.directory, input.worktree)

packages/tui/src/app.tsx

@@ -66,6 +66,7 @@ import { DialogThemeList } from "./component/dialog-theme-list"
 import { DialogHelp } from "./ui/dialog-help"
 import { DialogAgent } from "./component/dialog-agent"
 import { DialogSessionList } from "./component/dialog-session-list"
+import { DialogProject } from "./component/dialog-project"
 import { SessionTabs } from "./component/session-tabs"
 import { ThemeErrorToast } from "./component/theme-error-toast"
 import { ThemeProvider, useTheme, useThemes } from "./context/theme"
@@ -648,6 +649,15 @@ function App(props: { pair?: DialogPairCredentials }) {
           dialog.clear()
         },
       },
+      {
+        name: "project.switch",
+        title: "Switch project",
+        category: "Session",
+        slash: { name: "projects", aliases: ["project"] },
+        run: () => {
+          dialog.replace(() => <DialogProject />)
+        },
+      },
       ...Array.from({ length: 9 }, (_, i) => ({
         name: `session.quick_switch.${i + 1}`,
         title: `Switch to session in quick slot ${i + 1}`,

packages/tui/src/component/dialog-project.tsx

@@ -0,0 +1,67 @@
+import path from "path"
+import { createMemo } from "solid-js"
+import { DialogSelect } from "../ui/dialog-select"
+import { useDialog } from "../ui/dialog"
+import { useData } from "../context/data"
+import { useRoute } from "../context/route"
+import { abbreviateHome } from "../runtime"
+import { useTuiPaths } from "../context/runtime"
+import { useLocation } from "../context/location"
+import { useToast } from "../ui/toast"
+
+export function DialogProject() {
+  const dialog = useDialog()
+  const data = useData()
+  const route = useRoute()
+  const paths = useTuiPaths()
+  const location = useLocation()
+  const toast = useToast()
+
+  data.project.invalidate()
+  void data.project.sync().catch(toast.error)
+
+  const current = () => location.current?.project
+
+  const options = createMemo(() => {
+    const seen = new Set<string>()
+    return data.project
+      .list()
+      .filter((project) => {
+        if (project.canonical === "/" || seen.has(project.canonical)) return false
+        seen.add(project.canonical)
+        return true
+      })
+      .toSorted((a, b) => {
+        if (a.id === current()?.id) return -1
+        if (b.id === current()?.id) return 1
+        return 0
+      })
+      .map((project) => ({
+        title: project.name ?? path.basename(project.canonical),
+        description: abbreviateHome(project.canonical, paths.home),
+        value: project.canonical,
+        category: project.id === current()?.id ? "Current" : "Projects",
+      }))
+  })
+
+  return (
+    <DialogSelect
+      title="Switch project"
+      placeholder="Search projects…"
+      options={options()}
+      current={current()?.canonical}
+      emptyView={
+        <box paddingLeft={4} paddingRight={4} paddingTop={1}>
+          <text>No projects found</text>
+        </box>
+      }
+      onSelect={(option) => {
+        dialog.clear()
+        if (option.value === current()?.canonical) return
+        const target = { directory: option.value }
+        route.navigate({ type: "home", location: target })
+        location.set(target)
+      }}
+    />
+  )
+}

packages/tui/src/component/dialog-session-list.tsx

@@ -133,9 +133,7 @@ export function DialogSessionList() {
       const project = data.project.get(session.projectID)
       const footer = allProjects()
         ? Locale.truncate(project?.name || path.basename(project?.canonical ?? directory), 20)
-        : directory !== data.location.info()?.project.directory
-          ? Locale.truncate(path.basename(directory), 20)
-          : ""
+        : undefined
       const slot = sessionTabs.enabled() ? undefined : slotByID.get(session.id)
       const deleting = toDelete() === session.id
       return {

packages/tui/src/component/patch-diff.tsx

@@ -0,0 +1,73 @@
+/** @jsxImportSource @opentui/solid */
+import { DiffRenderable, LineNumberRenderable, type ColorInput } from "@opentui/core"
+import type { JSX } from "@opentui/solid"
+import { createMemo, For, Show, splitProps } from "solid-js"
+import { splitPatchHunks } from "../util/diff"
+import { stringWidth } from "../util/string-width"
+
+type Props = Omit<JSX.IntrinsicElements["diff"], "diff" | "lineNumberBg"> & {
+  diff: string
+  hunkFg: ColorInput
+  lineNumberBg: ColorInput
+}
+
+export function PatchDiff(props: Props) {
+  const [local, diffProps] = splitProps(props, ["diff", "hunkFg", "lineNumberBg"])
+  const hunks = createMemo(() => splitPatchHunks(local.diff))
+  const nodes = new Set<DiffRenderable>()
+  const syncGutters = (attempt = 0) => {
+    requestAnimationFrame(() => {
+      const sides = [...nodes]
+        .filter((item) => !item.isDestroyed)
+        .flatMap((item) => item.getChildren().filter((side) => side instanceof LineNumberRenderable))
+      const lineNumbers = sides.map((side) => new Map([...side.getLineNumbers()].filter(([line]) => line >= 0)))
+      const digits = lineNumbers.map((numbers) => Math.max(0, ...numbers.values()).toString().length)
+      const after = sides.map((side) =>
+        Math.max(
+          0,
+          ...[...side.getLineSigns()]
+            .filter(([line]) => line >= 0)
+            .map(([, sign]) => stringWidth(sign.after ?? "")),
+        ),
+      )
+      const maxDigits = Math.max(...digits)
+      const maxAfter = Math.max(...after)
+      if (!maxDigits && attempt < 2) return syncGutters(attempt + 1)
+      if (!maxDigits) return
+      sides.forEach((side) => {
+        const index = sides.indexOf(side)
+        const signs = new Map([...side.getLineSigns()].filter(([line]) => line >= 0))
+        signs.set(-1, { after: " ".repeat(maxAfter + maxDigits - digits[index]) })
+        side.setLineNumbers(lineNumbers[index])
+        side.setLineSigns(signs)
+      })
+    })
+  }
+  const register = (node: DiffRenderable) => {
+    nodes.add(node)
+    syncGutters()
+  }
+
+  return (
+    <For each={hunks()}>
+      {(hunk, index) => (
+        <>
+          <Show when={index() > 0}>
+            <box width="100%" height={1} backgroundColor={local.lineNumberBg}>
+              <text fg={local.hunkFg} bg={local.lineNumberBg}>
+                {` ${hunk.header ?? ""}`}
+              </text>
+            </box>
+          </Show>
+          <diff
+            {...diffProps}
+            ref={register}
+            diff={hunk.patch}
+            minHeight={hunk.rows}
+            lineNumberBg={local.lineNumberBg}
+          />
+        </>
+      )}
+    </For>
+  )
+}

packages/tui/src/context/route.tsx

@@ -1,4 +1,5 @@
 import { createStore, reconcile } from "solid-js/store"
+import type { LocationRef } from "@opencode-ai/client"
 import { createSimpleContext } from "./helper"
 import type { PromptInfo } from "../prompt/history"
 import { useTuiStartup } from "./runtime"
@@ -6,6 +7,7 @@ import { useTuiStartup } from "./runtime"
 export type HomeRoute = {
   type: "home"
   prompt?: PromptInfo
+  location?: LocationRef
 }
 
 export type SessionRoute = {

packages/tui/src/feature-plugins/home/footer.tsx

@@ -1,8 +1,8 @@
 import { Plugin } from "@opencode-ai/plugin/tui"
 import { createMemo, Match, Show, Switch } from "solid-js"
 import { useTerminalDimensions } from "@opentui/solid"
-import { FilePath } from "../../ui/file-path"
 import { stringWidth } from "../../util/string-width"
+import { FadeFilePath } from "../../ui/fade-file-path"
 
 function Directory(props: { context: Plugin.Context; maxWidth: number }) {
   const directory = createMemo(() =>
@@ -10,9 +10,12 @@ function Directory(props: { context: Plugin.Context; maxWidth: number }) {
   )
 
   return (
-    <Show when={directory()}>
-      {(value) => <FilePath value={value()} maxWidth={props.maxWidth} fg={props.context.theme.text.subdued} />}
-    </Show>
+    <FadeFilePath
+      value={directory()}
+      maxWidth={props.maxWidth}
+      fg={props.context.theme.text.subdued}
+      bg={props.context.theme.background.default}
+    />
   )
 }
 

packages/tui/src/mini/footer.permission.tsx

@@ -32,6 +32,7 @@ import { footerWidthPolicy } from "./footer.width"
 import { toolFiletype } from "./tool"
 import { transparent, type RunBlockTheme, type RunFooterTheme } from "./theme"
 import type { MiniPermissionRequest, PermissionReply } from "./types"
+import { PatchDiff } from "../component/patch-diff"
 
 function buttons(
   list: PermissionOption[],
@@ -405,8 +406,9 @@ export function RunPermissionBody(props: {
                       </Show>
                     }
                   >
-                    <diff
+                    <PatchDiff
                       diff={info().diff!}
+                      hunkFg={props.block.diffLineNumber}
                       view="unified"
                       filetype={ft()}
                       syntaxStyle={props.block.syntax}

packages/tui/src/mini/scrollback.writer.tsx

@@ -13,6 +13,7 @@ import { entryColor, entryLook, entrySyntax } from "./scrollback.shared"
 import { toolFiletype, toolStructuredFinal } from "./tool"
 import { RUN_THEME_FALLBACK, transparent, type RunTheme } from "./theme"
 import type { EntryLayout, RunEntryBody, ScrollbackOptions, StreamCommit, TurnSummary } from "./types"
+import { PatchDiff } from "../component/patch-diff"
 
 export function entryGroupKey(commit: StreamCommit): string | undefined {
   if (!commit.partID) {
@@ -178,8 +179,9 @@ export function RunEntryContent(props: {
               </text>
               {item.diff.trim() ? (
                 <box width="100%" paddingLeft={1}>
-                  <diff
+                  <PatchDiff
                     diff={item.diff}
+                    hunkFg={theme().block.diffLineNumber}
                     view="unified"
                     filetype={toolFiletype(item.file)}
                     syntaxStyle={syntax()}

packages/tui/src/plugin/context.tsx

@@ -2,8 +2,10 @@ import { PluginContextProvider, type Plugin } from "@opencode-ai/plugin/tui"
 import {
   batch,
   createContext,
+  createEffect,
   createMemo,
   For,
+  on,
   onCleanup,
   onMount,
   useContext,
@@ -372,13 +374,13 @@ export function PluginProvider(props: ParentProps<{ packages: PackageResolver }>
     return true
   }
 
-  const reconcile = async () => {
+  const reconcile = async (configured = config.data.plugins ?? []) => {
     await Promise.all(
       Object.entries(store.registrations)
         .filter(([, registration]) => registration.active)
         .map(([id]) => deactivate(id)),
     )
-    const entries = [...(await discoverTuiPlugins(paths.cwd)), ...(config.data.plugins ?? [])]
+    const entries = [...(await discoverTuiPlugins(paths.cwd)), ...configured]
     batch(() => {
       setStore("registrations", reconcileStore({}))
       setStore("states", [])
@@ -452,8 +454,21 @@ export function PluginProvider(props: ParentProps<{ packages: PackageResolver }>
       ])
     }
   }
+  let loading = Promise.resolve()
+  createEffect(
+    on(
+      () => JSON.stringify(config.data.plugins ?? []),
+      () => {
+        const configured = config.data.plugins ?? []
+        loading = loading.catch(() => undefined).then(() => reconcile(configured))
+        void loading.then(
+          () => setStore("ready", true),
+          () => setStore("ready", true),
+        )
+      },
+    ),
+  )
   onMount(() => {
-    const loading = reconcile()
     let disposing: Promise<void> | undefined
     const dispose = () => {
       if (disposing) return disposing
@@ -474,7 +489,6 @@ export function PluginProvider(props: ParentProps<{ packages: PackageResolver }>
       unregister()
       void dispose()
     })
-    void loading.finally(() => setStore("ready", true))
   })
 
   return (

packages/tui/src/routes/home.tsx

@@ -27,10 +27,11 @@ export function Home() {
   const data = useData()
   const location = useLocation()
   // Global MCP elicitations can arrive without a session route, so keep them reachable from Home.
-  const forms = createMemo(() => data.session.form.list("global", data.location.default()) ?? [])
+  const currentLocation = () => route.location ?? data.location.default()
+  const forms = createMemo(() => data.session.form.list("global", currentLocation()) ?? [])
   let sent = false
 
-  createEffect(() => location.set(data.location.default()))
+  createEffect(() => location.set(currentLocation()))
 
   onMount(() => {
     editor.clearSelection()

packages/tui/src/routes/session/index.tsx

@@ -22,6 +22,7 @@ import { useData } from "../../context/data"
 import { SplitBorder } from "../../ui/border"
 import { useTuiPaths, useTuiTerminalEnvironment } from "../../context/runtime"
 import { Spinner, SPINNER_FRAMES } from "../../component/spinner"
+import { PatchDiff } from "../../component/patch-diff"
 import { ThemeContextProvider, useTheme, useThemes } from "../../context/theme"
 import { BoxRenderable, ScrollBoxRenderable, addDefaultParsers, TextAttributes, RGBA } from "@opentui/core"
 import { Prompt, type PromptRef } from "../../component/prompt"
@@ -3027,8 +3028,9 @@ function Edit(props: ToolProps) {
         {(item) => (
           <BlockTool path={{ label: "← Edit", value: pathFormatter.format(path()) }} part={props.part}>
             <box paddingLeft={1}>
-              <diff
+              <PatchDiff
                 diff={item().patch}
+                hunkFg={theme.diff.text.hunkHeader}
                 view={view()}
                 filetype={filetype(path())}
                 syntaxStyle={syntax()}
@@ -3116,8 +3118,9 @@ function ApplyPatch(props: ToolProps) {
                   }
                 >
                   <box paddingLeft={1}>
-                    <diff
+                    <PatchDiff
                       diff={file.patch}
+                      hunkFg={theme.diff.text.hunkHeader}
                       view={view()}
                       filetype={filetype(file.relativePath)}
                       syntaxStyle={syntax()}

packages/tui/src/routes/session/permission.tsx

@@ -14,6 +14,7 @@ import { useConfig } from "../../config"
 import { Keymap } from "../../context/keymap"
 import { usePathFormatter } from "../../context/path-format"
 import { SimulationSemantics } from "../../simulation/semantics"
+import { PatchDiff } from "../../component/patch-diff"
 
 type PermissionStage = "permission" | "always" | "reject"
 
@@ -50,8 +51,9 @@ function EditBody(props: { file?: string; diff?: string; patch?: string }) {
             },
           }}
         >
-          <diff
+          <PatchDiff
             diff={diff()}
+            hunkFg={theme.diff.text.hunkHeader}
             view={view()}
             filetype={ft()}
             syntaxStyle={syntax()}

packages/tui/src/ui/fade-file-path.tsx

@@ -0,0 +1,56 @@
+import type { RGBA } from "@opentui/core"
+import { createEffect, createMemo, createSignal, Show } from "solid-js"
+import { useConfig } from "../config"
+import { tint } from "../theme/color"
+import { createAnimatable, tween } from "./animation"
+import { FilePath } from "./file-path"
+
+// FilePath that crossfades when its value changes: the old path fades to the
+// background, the text swaps at the midpoint, and the new path fades back in.
+// The initial value renders immediately; only subsequent changes animate.
+export function FadeFilePath(props: {
+  value: string | undefined
+  maxWidth: number
+  fg: RGBA
+  bg: RGBA
+  basenameFg?: RGBA
+}) {
+  const config = useConfig().data
+  const fade = createAnimatable(
+    { front: 1 },
+    {
+      enabled: () => config.animations ?? true,
+      transition: tween({ duration: 0.3 }),
+    },
+  )
+  const [text, setText] = createSignal(props.value)
+  const [previous, setPrevious] = createSignal<string>()
+
+  createEffect((current: string | undefined) => {
+    const next = props.value
+    if (next === undefined || next === current) return current
+    setText(next)
+    if (current === undefined) return next
+    setPrevious(current)
+    fade.jump({ front: 0 })
+    fade.animate({ front: 1 })
+    return next
+  }, props.value)
+
+  const display = createMemo(() => (previous() !== undefined && fade.value().front < 0.5 ? previous() : text()))
+  const fg = createMemo(() => {
+    if (previous() === undefined || fade.value().front >= 1) return props.fg
+    return tint(props.bg, props.fg, Math.abs(fade.value().front * 2 - 1))
+  })
+
+  return (
+    <Show when={display() !== undefined}>
+      <FilePath
+        value={display() ?? ""}
+        maxWidth={props.maxWidth}
+        fg={fg()}
+        basenameFg={fade.value().front >= 1 ? props.basenameFg : undefined}
+      />
+    </Show>
+  )
+}

packages/tui/src/util/diff.ts

@@ -0,0 +1,56 @@
+export interface PatchHunk {
+  readonly patch: string
+  readonly header?: string
+  readonly rows?: number
+}
+
+export function splitPatchHunks(patch: string): PatchHunk[] {
+  const starts = [
+    ...patch.matchAll(/^@@ -\d+(?:,\d+)? \+\d+(?:,\d+)? @@.*$/gm),
+  ].map((match) => match.index)
+  if (starts.length <= 1) return [{ patch }]
+
+  const prefix = patch.slice(0, starts[0])
+  return starts.map((start, index) => {
+    const end = starts[index + 1] ?? patch.length
+    const lineEnd = patch.indexOf("\n", start)
+    return {
+      header: patch.slice(start, lineEnd === -1 ? end : lineEnd),
+      patch: prefix + patch.slice(start, end),
+      rows: splitRows(patch.slice(start, end)),
+    }
+  })
+}
+
+function splitRows(hunk: string) {
+  const lines = hunk.replace(/\n$/, "").split("\n").slice(1)
+  let rows = 0
+  let index = 0
+
+  while (index < lines.length) {
+    const prefix = lines[index][0]
+    if (prefix === " " || !prefix) {
+      rows++
+      index++
+      continue
+    }
+    if (prefix === "\\") {
+      index++
+      continue
+    }
+
+    let additions = 0
+    let deletions = 0
+    while (
+      index < lines.length &&
+      (lines[index][0] === "+" || lines[index][0] === "-")
+    ) {
+      if (lines[index][0] === "+") additions++
+      if (lines[index][0] === "-") deletions++
+      index++
+    }
+    rows += Math.max(additions, deletions)
+  }
+
+  return rows
+}