Tui onboarding (#4569)

Co-authored-by: GitHub Action <action@github.com>

packages/opencode/src/cli/cmd/tui/ui/dialog-prompt.tsx

@@ -1,11 +1,13 @@
 import { TextareaRenderable, TextAttributes } from "@opentui/core"
 import { useTheme } from "../context/theme"
 import { useDialog, type DialogContext } from "./dialog"
-import { onMount } from "solid-js"
+import { onMount, type JSX } from "solid-js"
 import { useKeyboard } from "@opentui/solid"
 
 export type DialogPromptProps = {
   title: string
+  description?: () => JSX.Element
+  placeholder?: string
   value?: string
   onConfirm?: (value: string) => void
   onCancel?: () => void
@@ -19,12 +21,11 @@ export function DialogPrompt(props: DialogPromptProps) {
   useKeyboard((evt) => {
     if (evt.name === "return") {
       props.onConfirm?.(textarea.plainText)
-      dialog.clear()
     }
   })
 
   onMount(() => {
-    dialog.setSize("large")
+    dialog.setSize("medium")
     setTimeout(() => {
       textarea.focus()
     }, 1)
@@ -37,35 +38,36 @@ export function DialogPrompt(props: DialogPromptProps) {
         <text attributes={TextAttributes.BOLD}>{props.title}</text>
         <text fg={theme.textMuted}>esc</text>
       </box>
-      <box>
+      <box gap={1}>
+        {props.description}
         <textarea
           onSubmit={() => {
             props.onConfirm?.(textarea.plainText)
-            dialog.clear()
           }}
+          height={3}
           keyBindings={[{ name: "return", action: "submit" }]}
           ref={(val: TextareaRenderable) => (textarea = val)}
           initialValue={props.value}
-          placeholder="Enter text"
+          placeholder={props.placeholder ?? "Enter text"}
         />
       </box>
-      <box paddingBottom={1}>
-        <text fg={theme.textMuted}>Press enter to confirm, esc to cancel</text>
+      <box paddingBottom={1} gap={1} flexDirection="row">
+        <text fg={theme.text}>
+          enter <span style={{ fg: theme.textMuted }}>submit</span>
+        </text>
+        <text fg={theme.text}>
+          esc <span style={{ fg: theme.textMuted }}>cancel</span>
+        </text>
       </box>
     </box>
   )
 }
 
-DialogPrompt.show = (dialog: DialogContext, title: string, value?: string) => {
+DialogPrompt.show = (dialog: DialogContext, title: string, options?: Omit<DialogPromptProps, "title">) => {
   return new Promise<string | null>((resolve) => {
     dialog.replace(
       () => (
-        <DialogPrompt
-          title={title}
-          value={value}
-          onConfirm={(value) => resolve(value)}
-          onCancel={() => resolve(null)}
-        />
+        <DialogPrompt title={title} {...options} onConfirm={(value) => resolve(value)} onCancel={() => resolve(null)} />
       ),
       () => resolve(null),
     )

packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx

@@ -157,7 +157,7 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
 
   return (
     <box gap={1}>
-      <box paddingLeft={3} paddingRight={2}>
+      <box paddingLeft={4} paddingRight={4}>
         <box flexDirection="row" justifyContent="space-between">
           <text fg={theme.text} attributes={TextAttributes.BOLD}>
             {props.title}
@@ -184,8 +184,8 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
         </box>
       </box>
       <scrollbox
-        paddingLeft={2}
-        paddingRight={2}
+        paddingLeft={1}
+        paddingRight={1}
         scrollbarOptions={{ visible: false }}
         ref={(r: ScrollBoxRenderable) => (scroll = r)}
         maxHeight={height()}
@@ -194,7 +194,7 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
           {([category, options], index) => (
             <>
               <Show when={category}>
-                <box paddingTop={index() > 0 ? 1 : 0} paddingLeft={1}>
+                <box paddingTop={index() > 0 ? 1 : 0} paddingLeft={3}>
                   <text fg={theme.accent} attributes={TextAttributes.BOLD}>
                     {category}
                   </text>
@@ -203,6 +203,7 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
               <For each={options}>
                 {(option) => {
                   const active = createMemo(() => isDeepEqual(option.value, selected()?.value))
+                  const current = createMemo(() => isDeepEqual(option.value, props.current))
                   return (
                     <box
                       id={JSON.stringify(option.value)}
@@ -217,8 +218,8 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
                         moveTo(index)
                       }}
                       backgroundColor={active() ? (option.bg ?? theme.primary) : RGBA.fromInts(0, 0, 0, 0)}
-                      paddingLeft={1}
-                      paddingRight={1}
+                      paddingLeft={current() ? 1 : 3}
+                      paddingRight={3}
                       gap={1}
                     >
                       <Option
@@ -226,7 +227,7 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
                         footer={option.footer}
                         description={option.description !== category ? option.description : undefined}
                         active={active()}
-                        current={isDeepEqual(option.value, props.current)}
+                        current={current()}
                       />
                     </box>
                   )
@@ -236,12 +237,14 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
           )}
         </For>
       </scrollbox>
-      <box paddingRight={2} paddingLeft={3} flexDirection="row" paddingBottom={1} gap={1}>
+      <box paddingRight={2} paddingLeft={4} flexDirection="row" paddingBottom={1} gap={1}>
         <For each={props.keybind ?? []}>
           {(item) => (
             <text>
-              <span style={{ fg: theme.text, attributes: TextAttributes.BOLD }}>{Keybind.toString(item.keybind)}</span>
-              <span style={{ fg: theme.textMuted }}> {item.title}</span>
+              <span style={{ fg: theme.text }}>
+                <b>{item.title}</b>{" "}
+              </span>
+              <span style={{ fg: theme.textMuted }}>{Keybind.toString(item.keybind)}</span>
             </text>
           )}
         </For>
@@ -268,7 +271,7 @@ function Option(props: {
           fg={props.active ? theme.background : props.current ? theme.primary : theme.text}
           marginRight={0.5}
         >
-          ●
+          ◆
         </text>
       </Show>
       <text
@@ -277,6 +280,7 @@ function Option(props: {
         attributes={props.active ? TextAttributes.BOLD : undefined}
         overflow="hidden"
         wrapMode="none"
+        paddingLeft={3}
       >
         {Locale.truncate(props.title, 62)}
         <span style={{ fg: props.active ? theme.background : theme.textMuted }}> {props.description}</span>

packages/opencode/src/cli/cmd/tui/ui/dialog.tsx

@@ -3,6 +3,8 @@ import { batch, createContext, Show, useContext, type JSX, type ParentProps } fr
 import { useTheme } from "@tui/context/theme"
 import { Renderable, RGBA } from "@opentui/core"
 import { createStore } from "solid-js/store"
+import { Clipboard } from "@tui/util/clipboard"
+import { useToast } from "./toast"
 
 export function Dialog(
   props: ParentProps<{
@@ -12,10 +14,12 @@ export function Dialog(
 ) {
   const dimensions = useTerminalDimensions()
   const { theme } = useTheme()
+  const renderer = useRenderer()
 
   return (
     <box
       onMouseUp={async () => {
+        if (renderer.getSelection()) return
         props.onClose?.()
       }}
       width={dimensions().width}
@@ -29,6 +33,7 @@ export function Dialog(
     >
       <box
         onMouseUp={async (e) => {
+          if (renderer.getSelection()) return
           e.stopPropagation()
         }}
         width={props.size === "large" ? 80 : 60}
@@ -124,10 +129,28 @@ const ctx = createContext<DialogContext>()
 
 export function DialogProvider(props: ParentProps) {
   const value = init()
+  const renderer = useRenderer()
+  const toast = useToast()
   return (
     <ctx.Provider value={value}>
       {props.children}
-      <box position="absolute">
+      <box
+        position="absolute"
+        onMouseUp={async () => {
+          const text = renderer.getSelection()?.getSelectedText()
+          if (text && text.length > 0) {
+            const base64 = Buffer.from(text).toString("base64")
+            const osc52 = `\x1b]52;c;${base64}\x07`
+            const finalOsc52 = process.env["TMUX"] ? `\x1bPtmux;\x1b${osc52}\x1b\\` : osc52
+            /* @ts-expect-error */
+            renderer.writeOut(finalOsc52)
+            await Clipboard.copy(text)
+              .then(() => toast.show({ message: "Copied to clipboard", variant: "info" }))
+              .catch(toast.error)
+            renderer.clearSelection()
+          }
+        }}
+      >
         <Show when={value.stack.length}>
           <Dialog onClose={() => value.clear()} size={value.size}>
             {value.stack.at(-1)!.element}