Skip to content

Commit de641f1

Browse files
thdxranntnzrb
thdxr
authored and
anntnzrb
committed
Revert "feat: better styling for small screens (short and/or not wide) (anomalyco#5968)"
This reverts commit ac371d2.
1 parent 7283bd2 commit de641f1

4 files changed

Lines changed: 193 additions & 258 deletions

File tree

‎packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx‎

Lines changed: 98 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { usePromptStash } from "./stash"
1616
import { DialogStash } from "../dialog-stash"
1717
import { type AutocompleteRef, Autocomplete } from "./autocomplete"
1818
import { useCommandDialog } from "../dialog-command"
19-
import { useRenderer, useTerminalDimensions } from "@opentui/solid"
19+
import { useRenderer } from "@opentui/solid"
2020
import { Editor } from "@tui/util/editor"
2121
import { useExit } from "../../context/exit"
2222
import { Clipboard } from "../../util/clipboard"
@@ -123,9 +123,6 @@ export function Prompt(props: PromptProps) {
123123
const stash = usePromptStash()
124124
const command = useCommandDialog()
125125
const renderer = useRenderer()
126-
const dimensions = useTerminalDimensions()
127-
const tall = createMemo(() => dimensions().height > 40)
128-
const wide = createMemo(() => dimensions().width > 120)
129126
const { theme, syntax } = useTheme()
130127

131128
function promptModelWarning() {
@@ -949,21 +946,19 @@ export function Prompt(props: PromptProps) {
949946
cursorColor={theme.text}
950947
syntaxStyle={syntax()}
951948
/>
952-
<Show when={tall()}>
953-
<box flexDirection="row" flexShrink={0} paddingTop={1} gap={1}>
954-
<text fg={highlight()}>
955-
{store.mode === "shell" ? "Shell" : Locale.titlecase(local.agent.current().name)}{" "}
956-
</text>
957-
<Show when={store.mode === "normal"}>
958-
<box flexDirection="row" gap={1}>
959-
<text flexShrink={0} fg={keybind.leader ? theme.textMuted : theme.text}>
960-
{local.model.parsed().model}
961-
</text>
962-
<text fg={theme.textMuted}>{local.model.parsed().provider}</text>
963-
</box>
964-
</Show>
965-
</box>
966-
</Show>
949+
<box flexDirection="row" flexShrink={0} paddingTop={1} gap={1}>
950+
<text fg={highlight()}>
951+
{store.mode === "shell" ? "Shell" : Locale.titlecase(local.agent.current().name)}{" "}
952+
</text>
953+
<Show when={store.mode === "normal"}>
954+
<box flexDirection="row" gap={1}>
955+
<text flexShrink={0} fg={keybind.leader ? theme.textMuted : theme.text}>
956+
{local.model.parsed().model}
957+
</text>
958+
<text fg={theme.textMuted}>{local.model.parsed().provider}</text>
959+
</box>
960+
</Show>
961+
</box>
967962
</box>
968963
</box>
969964
<box
@@ -993,123 +988,101 @@ export function Prompt(props: PromptProps) {
993988
/>
994989
</box>
995990
<box flexDirection="row" justifyContent="space-between">
996-
<Switch>
997-
<Match when={status().type !== "idle"}>
998-
<box
999-
flexDirection="row"
1000-
gap={1}
1001-
flexGrow={1}
1002-
justifyContent={status().type === "retry" ? "space-between" : "flex-start"}
1003-
>
1004-
<box flexShrink={0} flexDirection="row" gap={1}>
1005-
{/* @ts-ignore // SpinnerOptions doesn't support marginLeft */}
1006-
<spinner marginLeft={1} color={spinnerDef().color} frames={spinnerDef().frames} interval={40} />
1007-
<box flexDirection="row" gap={1} flexShrink={0}>
1008-
{(() => {
1009-
const retry = createMemo(() => {
1010-
const s = status()
1011-
if (s.type !== "retry") return
1012-
return s
1013-
})
1014-
const message = createMemo(() => {
1015-
const r = retry()
1016-
if (!r) return
1017-
if (r.message.includes("exceeded your current quota") && r.message.includes("gemini"))
1018-
return "gemini is way too hot right now"
1019-
if (r.message.length > 80) return r.message.slice(0, 80) + "..."
1020-
return r.message
1021-
})
1022-
const isTruncated = createMemo(() => {
1023-
const r = retry()
1024-
if (!r) return false
1025-
return r.message.length > 120
1026-
})
1027-
const [seconds, setSeconds] = createSignal(0)
1028-
onMount(() => {
1029-
const timer = setInterval(() => {
1030-
const next = retry()?.next
1031-
if (next) setSeconds(Math.round((next - Date.now()) / 1000))
1032-
}, 1000)
1033-
1034-
onCleanup(() => {
1035-
clearTimeout(timer)
1036-
})
991+
<Show when={status().type !== "idle"} fallback={<text />}>
992+
<box
993+
flexDirection="row"
994+
gap={1}
995+
flexGrow={1}
996+
justifyContent={status().type === "retry" ? "space-between" : "flex-start"}
997+
>
998+
<box flexShrink={0} flexDirection="row" gap={1}>
999+
{/* @ts-ignore // SpinnerOptions doesn't support marginLeft */}
1000+
<spinner marginLeft={1} color={spinnerDef().color} frames={spinnerDef().frames} interval={40} />
1001+
<box flexDirection="row" gap={1} flexShrink={0}>
1002+
{(() => {
1003+
const retry = createMemo(() => {
1004+
const s = status()
1005+
if (s.type !== "retry") return
1006+
return s
1007+
})
1008+
const message = createMemo(() => {
1009+
const r = retry()
1010+
if (!r) return
1011+
if (r.message.includes("exceeded your current quota") && r.message.includes("gemini"))
1012+
return "gemini is way too hot right now"
1013+
if (r.message.length > 80) return r.message.slice(0, 80) + "..."
1014+
return r.message
1015+
})
1016+
const isTruncated = createMemo(() => {
1017+
const r = retry()
1018+
if (!r) return false
1019+
return r.message.length > 120
1020+
})
1021+
const [seconds, setSeconds] = createSignal(0)
1022+
onMount(() => {
1023+
const timer = setInterval(() => {
1024+
const next = retry()?.next
1025+
if (next) setSeconds(Math.round((next - Date.now()) / 1000))
1026+
}, 1000)
1027+
1028+
onCleanup(() => {
1029+
clearInterval(timer)
10371030
})
1038-
const handleMessageClick = () => {
1039-
const r = retry()
1040-
if (!r) return
1041-
if (isTruncated()) {
1042-
DialogAlert.show(dialog, "Retry Error", r.message)
1043-
}
1031+
})
1032+
const handleMessageClick = () => {
1033+
const r = retry()
1034+
if (!r) return
1035+
if (isTruncated()) {
1036+
DialogAlert.show(dialog, "Retry Error", r.message)
10441037
}
1038+
}
10451039

1046-
const retryText = () => {
1047-
const r = retry()
1048-
if (!r) return ""
1049-
const baseMessage = message()
1050-
const truncatedHint = isTruncated() ? " (click to expand)" : ""
1051-
const retryInfo = ` [retrying ${seconds() > 0 ? `in ${seconds()}s ` : ""}attempt #${r.attempt}]`
1052-
return baseMessage + truncatedHint + retryInfo
1053-
}
1040+
const retryText = () => {
1041+
const r = retry()
1042+
if (!r) return ""
1043+
const baseMessage = message()
1044+
const truncatedHint = isTruncated() ? " (click to expand)" : ""
1045+
const retryInfo = ` [retrying ${seconds() > 0 ? `in ${seconds()}s ` : ""}attempt #${r.attempt}]`
1046+
return baseMessage + truncatedHint + retryInfo
1047+
}
10541048

1055-
return (
1056-
<Show when={retry()}>
1057-
<box onMouseUp={handleMessageClick}>
1058-
<text fg={theme.error}>{retryText()}</text>
1059-
</box>
1060-
</Show>
1061-
)
1062-
})()}
1063-
</box>
1049+
return (
1050+
<Show when={retry()}>
1051+
<box onMouseUp={handleMessageClick}>
1052+
<text fg={theme.error}>{retryText()}</text>
1053+
</box>
1054+
</Show>
1055+
)
1056+
})()}
10641057
</box>
1065-
<text fg={store.interrupt > 0 ? theme.primary : theme.text}>
1066-
esc{" "}
1067-
<span style={{ fg: store.interrupt > 0 ? theme.primary : theme.textMuted }}>
1068-
{store.interrupt > 0 ? "again to interrupt" : "interrupt"}
1069-
</span>
1070-
</text>
10711058
</box>
1072-
</Match>
1073-
<Match when={!tall()}>
1074-
<box flexDirection="row" gap={1}>
1075-
<text fg={highlight()}>
1076-
{store.mode === "shell" ? "Shell" : Locale.titlecase(local.agent.current().name)}{" "}
1077-
</text>
1078-
<Show when={store.mode === "normal"}>
1079-
<box flexDirection="row" gap={1}>
1080-
<text flexShrink={0} fg={keybind.leader ? theme.textMuted : theme.text}>
1081-
{local.model.parsed().model}
1082-
</text>
1083-
<text fg={theme.textMuted}>{local.model.parsed().provider}</text>
1084-
</box>
1085-
</Show>
1086-
</box>
1087-
</Match>
1088-
</Switch>
1089-
<box gap={2} flexDirection="row" marginLeft="auto">
1090-
<Switch>
1091-
<Match when={store.mode === "normal"}>
1092-
<Show when={wide()}>
1059+
<text fg={store.interrupt > 0 ? theme.primary : theme.text}>
1060+
esc{" "}
1061+
<span style={{ fg: store.interrupt > 0 ? theme.primary : theme.textMuted }}>
1062+
{store.interrupt > 0 ? "again to interrupt" : "interrupt"}
1063+
</span>
1064+
</text>
1065+
</box>
1066+
</Show>
1067+
<Show when={status().type !== "retry"}>
1068+
<box gap={2} flexDirection="row">
1069+
<Switch>
1070+
<Match when={store.mode === "normal"}>
10931071
<text fg={theme.text}>
10941072
{keybind.print("agent_cycle")} <span style={{ fg: theme.textMuted }}>switch agent</span>
10951073
</text>
1096-
</Show>
1097-
<Show when={!wide()}>
10981074
<text fg={theme.text}>
1099-
{keybind.print("sidebar_toggle")} <span style={{ fg: theme.textMuted }}>sidebar</span>
1075+
{keybind.print("command_list")} <span style={{ fg: theme.textMuted }}>commands</span>
11001076
</text>
1101-
</Show>
1102-
<text fg={theme.text}>
1103-
{keybind.print("command_list")} <span style={{ fg: theme.textMuted }}>commands</span>
1104-
</text>
1105-
</Match>
1106-
<Match when={store.mode === "shell"}>
1107-
<text fg={theme.text}>
1108-
esc <span style={{ fg: theme.textMuted }}>exit shell mode</span>
1109-
</text>
1110-
</Match>
1111-
</Switch>
1112-
</box>
1077+
</Match>
1078+
<Match when={store.mode === "shell"}>
1079+
<text fg={theme.text}>
1080+
esc <span style={{ fg: theme.textMuted }}>exit shell mode</span>
1081+
</text>
1082+
</Match>
1083+
</Switch>
1084+
</box>
1085+
</Show>
11131086
</box>
11141087
</box>
11151088
</>

0 commit comments

Comments
 (0)