From 5bf985a8068c193e381d5cbbd16d4d003230ccd4 Mon Sep 17 00:00:00 2001
From: leohenon <77656081+lhenon999@users.noreply.github.com>
Date: Thu, 21 May 2026 00:08:29 +0800
Subject: [PATCH] refactor(tui): extract copy overlay

---
 .../cmd/tui/routes/session/copy-overlay.tsx   | 44 +++++++++++++++++++
 .../src/cli/cmd/tui/routes/session/index.tsx  | 41 +----------------
 2 files changed, 45 insertions(+), 40 deletions(-)
 create mode 100644 packages/opencode/src/cli/cmd/tui/routes/session/copy-overlay.tsx

diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/copy-overlay.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/copy-overlay.tsx
new file mode 100644
index 000000000000..9224bd865d96
--- /dev/null
+++ b/packages/opencode/src/cli/cmd/tui/routes/session/copy-overlay.tsx
@@ -0,0 +1,44 @@
+import { For, Show, createMemo } from "solid-js"
+import { RGBA } from "@opentui/core"
+import { selectedForeground, useTheme } from "@tui/context/theme"
+import type { CopyHighlight, CopyRow } from "./copy-mode"
+
+export type CopyPosition = { line: number; col: number; visual: boolean; cursorText: string }
+export type CopyContext = CopyRow & CopyPosition
+
+export function CopyOverlay(props: { copy?: CopyPosition; topOffset?: number; highlights?: CopyHighlight[] }) {
+  const { theme } = useTheme()
+  const top = (line: number) => line + (props.topOffset ?? 0)
+  const highlightFg = createMemo(() => selectedForeground(theme, theme.secondary))
+  const cursorFg = createMemo(() => selectedForeground(theme, theme.text))
+  return (
+    <>
+      <Show when={props.copy && !props.copy.visual}>
+        <box
+          position="absolute"
+          top={top(props.copy!.line)}
+          left={0}
+          width="100%"
+          height={1}
+          backgroundColor={RGBA.fromInts(255, 255, 255, 15)}
+        />
+      </Show>
+      <For each={props.highlights ?? []}>
+        {(highlight) => (
+          <box position="absolute" top={top(highlight.line)} left={highlight.left}>
+            <text bg={theme.secondary} fg={highlightFg()}>
+              {highlight.text || " "}
+            </text>
+          </box>
+        )}
+      </For>
+      <Show when={props.copy}>
+        <box position="absolute" top={top(props.copy!.line)} left={props.copy!.col} width={1} height={1}>
+          <text bg={theme.text} fg={cursorFg()}>
+            {props.copy!.cursorText}
+          </text>
+        </box>
+      </Show>
+    </>
+  )
+}
diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
index 22d99b51fd5b..b047e4e95bb0 100644
--- a/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
+++ b/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
@@ -60,6 +60,7 @@ import { DialogMessage } from "./dialog-message"
 import type { PromptInfo } from "../../component/prompt/history"
 import { DialogConfirm } from "@tui/ui/dialog-confirm"
 import { createCopyMode, type CopyRow, type CopyHighlight } from "./copy-mode"
+import { CopyOverlay, type CopyContext, type CopyPosition } from "./copy-overlay"
 import { DialogTimeline } from "./dialog-timeline"
 import { DialogForkFromTimeline } from "./dialog-fork-from-timeline"
 import { DialogSessionRename } from "../../component/dialog-session-rename"
@@ -1349,46 +1350,6 @@ const MIME_BADGE: Record<string, string> = {
   "application/x-directory": "dir",
 }
 
-type CopyPosition = { line: number; col: number; visual: boolean; cursorText: string }
-type CopyContext = CopyRow & CopyPosition
-
-function CopyOverlay(props: { copy?: CopyPosition; topOffset?: number; highlights?: CopyHighlight[] }) {
-  const { theme } = useTheme()
-  const top = (line: number) => line + (props.topOffset ?? 0)
-  const highlightFg = createMemo(() => selectedForeground(theme, theme.secondary))
-  const cursorFg = createMemo(() => selectedForeground(theme, theme.text))
-  return (
-    <>
-      <Show when={props.copy && !props.copy.visual}>
-        <box
-          position="absolute"
-          top={top(props.copy!.line)}
-          left={0}
-          width="100%"
-          height={1}
-          backgroundColor={RGBA.fromInts(255, 255, 255, 15)}
-        />
-      </Show>
-      <For each={props.highlights ?? []}>
-        {(highlight) => (
-          <box position="absolute" top={top(highlight.line)} left={highlight.left}>
-            <text bg={theme.secondary} fg={highlightFg()}>
-              {highlight.text || " "}
-            </text>
-          </box>
-        )}
-      </For>
-      <Show when={props.copy}>
-        <box position="absolute" top={top(props.copy!.line)} left={props.copy!.col} width={1} height={1}>
-          <text bg={theme.text} fg={cursorFg()}>
-            {props.copy!.cursorText}
-          </text>
-        </box>
-      </Show>
-    </>
-  )
-}
-
 function UserMessage(props: {
   message: UserMessage
   parts: Part[]