openAgent

1import { RGBA, TextAttributes } from "@opentui/core"
2import open from "open"
3import { createSignal } from "solid-js"
4import { selectedForeground, useTheme } from "../context/theme"
5import { useDialog, type DialogContext } from "../ui/dialog"
6import { Link } from "../ui/link"
7import { BgPulse } from "./bg-pulse"
8import { useBindings } from "../keymap"
9 
10const GO_URL = "https://opencode.ai/go"
11const PAD_X = 3
12const PAD_TOP_OUTER = 1
13const FOREGROUND_ALPHA = 186
14 
15export type DialogRetryActionProps = {
16  title: string
17  message: string
18  label: string
19  link?: string
20  onClose?: (dontShowAgain?: boolean) => void
21}
22 
23function runAction(props: DialogRetryActionProps, dialog: ReturnType<typeof useDialog>) {
24  if (props.link) open(props.link).catch(() => {})
25  props.onClose?.()
26  dialog.clear()
27}
28 
29function dismiss(props: DialogRetryActionProps, dialog: ReturnType<typeof useDialog>) {
30  props.onClose?.(true)
31  dialog.clear()
32}
33 
34function panelOverlay(color: RGBA) {
35  const [r, g, b] = color.toInts()
36  return RGBA.fromInts(r, g, b, FOREGROUND_ALPHA)
37}
38 
39export function DialogRetryAction(props: DialogRetryActionProps) {
40  const dialog = useDialog()
41  const { theme } = useTheme()
42  const fg = selectedForeground(theme)
43  const showGoTreatment = () => props.link === GO_URL
44  const textBg = () => (showGoTreatment() ? panelOverlay(theme.backgroundPanel) : undefined)
45  const [selected, setSelected] = createSignal<"dismiss" | "action">("action")
46 
47  useBindings(() => ({
48    bindings: [
49      {
50        key: "left",
51        desc: "Previous retry option",
52        group: "Dialog",
53        cmd: () => setSelected((value) => (value === "action" ? "dismiss" : "action")),
54      },
55      {
56        key: "right",
57        desc: "Next retry option",
58        group: "Dialog",
59        cmd: () => setSelected((value) => (value === "action" ? "dismiss" : "action")),
60      },
61      {
62        key: "tab",
63        desc: "Next retry option",
64        group: "Dialog",
65        cmd: () => setSelected((value) => (value === "action" ? "dismiss" : "action")),
66      },
67      {
68        key: "return",
69        desc: "Confirm retry option",
70        group: "Dialog",
71        cmd: () => {
72          if (selected() === "action") runAction(props, dialog)
73          else dismiss(props, dialog)
74        },
75      },
76    ],
77  }))
78 
79  return (
80    <box>
81      {showGoTreatment() ? (
82        <box position="absolute" top={-PAD_TOP_OUTER} left={0} right={0} bottom={0} zIndex={0}>
83          <BgPulse />
84        </box>
85      ) : null}
86      <box zIndex={1} paddingLeft={PAD_X} paddingRight={PAD_X} paddingBottom={1} gap={1}>
87        <box flexDirection="row" justifyContent="space-between">
88          <text attributes={TextAttributes.BOLD} fg={theme.text} bg={textBg()}>
89            {props.title}
90          </text>
91          <text fg={theme.textMuted} bg={textBg()} onMouseUp={() => dialog.clear()}>
92            esc
93          </text>
94        </box>
95        <box gap={0}>
96          <text fg={theme.textMuted} bg={textBg()}>
97            {props.message}
98          </text>
99        </box>
100        {props.link ? (
101          showGoTreatment() ? (
102            <box alignItems="center" justifyContent="flex-end" height={7} paddingBottom={1}>
103              <Link href={props.link} fg={theme.primary} bg={textBg()} wrapMode="none" />
104            </box>
105          ) : (
106            <box width="100%" flexDirection="row" justifyContent="center" paddingBottom={1}>
107              <Link href={props.link} fg={theme.primary} wrapMode="none" />
108            </box>
109          )
110        ) : (
111          <box paddingBottom={1} />
112        )}
113        <box flexDirection="row" justifyContent="space-between">
114          <box
115            paddingLeft={2}
116            paddingRight={2}
117            backgroundColor={selected() === "dismiss" ? theme.primary : RGBA.fromInts(0, 0, 0, 0)}
118            onMouseOver={() => setSelected("dismiss")}
119            onMouseUp={() => dismiss(props, dialog)}
120          >
121            <text
122              fg={selected() === "dismiss" ? fg : theme.textMuted}
123              bg={selected() === "dismiss" ? undefined : textBg()}
124              attributes={selected() === "dismiss" ? TextAttributes.BOLD : undefined}
125            >
126              don't show again
127            </text>
128          </box>
129          <box
130            paddingLeft={2}
131            paddingRight={2}
132            backgroundColor={selected() === "action" ? theme.primary : RGBA.fromInts(0, 0, 0, 0)}
133            onMouseOver={() => setSelected("action")}
134            onMouseUp={() => runAction(props, dialog)}
135          >
136            <text
137              fg={selected() === "action" ? fg : theme.text}
138              bg={selected() === "action" ? undefined : textBg()}
139              attributes={selected() === "action" ? TextAttributes.BOLD : undefined}
140            >
141              {props.label}
142            </text>
143          </box>
144        </box>
145      </box>
146    </box>
147  )
148}
149 
150DialogRetryAction.show = (
151  dialog: DialogContext,
152  props: Pick<DialogRetryActionProps, "title" | "message" | "label" | "link">,
153) => {
154  return new Promise<boolean>((resolve) => {
155    dialog.replace(
156      () => <DialogRetryAction {...props} onClose={(dontShow) => resolve(dontShow ?? false)} />,
157      () => resolve(false),
158    )
159  })
160}
161