diff --git a/packages/opencode/border.png b/packages/opencode/border.png new file mode 100644 index 000000000..7d9542ea1 Binary files /dev/null and b/packages/opencode/border.png differ diff --git a/packages/opencode/cutoff.png b/packages/opencode/cutoff.png new file mode 100644 index 000000000..ac304db28 Binary files /dev/null and b/packages/opencode/cutoff.png differ diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/header.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/header.tsx index c5ec3894c..03e37aeaa 100644 --- a/packages/opencode/src/cli/cmd/tui/routes/session/header.tsx +++ b/packages/opencode/src/cli/cmd/tui/routes/session/header.tsx @@ -2,9 +2,10 @@ import { type Accessor, createMemo, Match, Show, Switch } from "solid-js" import { useRouteData } from "@tui/context/route" import { useSync } from "@tui/context/sync" import { useTheme } from "@tui/context/theme" -import { EmptyBorder, SplitBorder } from "@tui/component/border" +import { EmptyBorder } from "@tui/component/border" import type { Session } from "@opencode-ai/sdk/v2" import { useKeybind } from "../../context/keybind" +import { useTerminalDimensions } from "@opentui/solid" const Title = (props: { session: Accessor }) => { const { theme } = useTheme() @@ -24,29 +25,63 @@ export function Header() { const { theme } = useTheme() const keybind = useKeybind() + const dimensions = useTerminalDimensions() + const tall = createMemo(() => dimensions().height > 40) return ( + {/**/} + {/* + + */} @@ -63,7 +98,7 @@ export function Header() { - /share{" "} + /share @@ -73,7 +108,7 @@ export function Header() { <Show when={showShare()}> <text fg={theme.textMuted} wrapMode="none" flexShrink={0}> - /share{" "} + /share </text> </Show> </box> @@ -87,15 +122,15 @@ export function Header() { borderColor={theme.border} customBorderChars={{ ...EmptyBorder, - vertical: theme.backgroundElement.a !== 0 ? "╹" : " ", + vertical: theme.backgroundPanel.a !== 0 ? "╹" : " ", }} > <box height={1} border={["bottom"]} - borderColor={theme.backgroundElement} + borderColor={theme.backgroundPanel} customBorderChars={ - theme.backgroundElement.a !== 0 + theme.backgroundPanel.a !== 0 ? { ...EmptyBorder, horizontal: "▀",