From ad110878c9bc06d364714602fcd83c63f168018b Mon Sep 17 00:00:00 2001
From: Dax Raad <d@ironbay.co>
Date: Sat, 21 Mar 2026 19:42:42 -0400
Subject: [PATCH] feat(tui): experimental design updates - add left border to
 prompt and user messages, adjust padding in session layout

---
 .../cli/cmd/tui/component/prompt/index.tsx    |  8 +++++-
 .../src/cli/cmd/tui/routes/session/index.tsx  | 26 ++++++++++++++-----
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx b/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx
index 6d261e4b9b..9a1796a2f9 100644
--- a/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx
+++ b/packages/opencode/src/cli/cmd/tui/component/prompt/index.tsx
@@ -819,8 +819,14 @@ export function Prompt(props: PromptProps) {
         visible={props.visible !== false}
         backgroundColor={theme.backgroundElement}
         paddingBottom={1}
-        paddingLeft={2}
+        paddingLeft={1}
         paddingRight={2}
+        border={["left"]}
+        borderColor={highlight()}
+        customBorderChars={{
+          ...EmptyBorder,
+          vertical: "▎",
+        }}
       >
         <box paddingTop={1} flexShrink={0} flexGrow={1}>
           <textarea
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 b3fe1cc6f0..5dffac37ca 100644
--- a/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
+++ b/packages/opencode/src/cli/cmd/tui/routes/session/index.tsx
@@ -16,7 +16,7 @@ import { Dynamic } from "solid-js/web"
 import path from "path"
 import { useRoute, useRouteData } from "@tui/context/route"
 import { useSync } from "@tui/context/sync"
-import { SplitBorder } from "@tui/component/border"
+import { EmptyBorder, SplitBorder } from "@tui/component/border"
 import { Spinner } from "@tui/component/spinner"
 import { selectedForeground, useTheme } from "@tui/context/theme"
 import {
@@ -1046,7 +1046,12 @@ export function Session() {
       }}
     >
       <box flexDirection="row">
-        <box flexGrow={1} gap={1}>
+        <box
+          flexGrow={1}
+          gap={1}
+          paddingX={sidebarVisible() && wide() ? 2 : 0}
+          paddingY={sidebarVisible() && wide() ? 1 : 0}
+        >
           <Show when={session()}>
             <Show when={showHeader() && (!sidebarVisible() || !wide())}>
               <Header />
@@ -1057,7 +1062,7 @@ export function Session() {
                 paddingRight: showScrollbar() ? 1 : 0,
               }}
               verticalScrollbarOptions={{
-                paddingLeft: 1,
+                paddingLeft: 0,
                 visible: showScrollbar(),
                 trackOptions: {
                   backgroundColor: theme.backgroundElement,
@@ -1262,9 +1267,15 @@ function UserMessage(props: {
             onMouseUp={props.onMouseUp}
             paddingTop={1}
             paddingBottom={1}
-            paddingLeft={2}
-            backgroundColor={hover() ? theme.backgroundElement : theme.backgroundPanel}
+            backgroundColor={hover() ? theme.backgroundMenu : theme.backgroundMenu}
+            paddingLeft={1}
             flexShrink={0}
+            border={["left"]}
+            borderColor={color()}
+            customBorderChars={{
+              ...EmptyBorder,
+              vertical: "▎",
+            }}
           >
             <text fg={theme.text}>{text()?.text}</text>
             <Show when={files().length}>
@@ -1733,11 +1744,12 @@ function BlockTool(props: {
   return (
     <box
       paddingTop={1}
+      marginTop={1}
       paddingBottom={1}
       paddingLeft={2}
-      marginTop={1}
+      paddingRight={2}
       gap={1}
-      backgroundColor={hover() ? theme.backgroundMenu : undefined}
+      backgroundColor={hover() ? theme.backgroundElement : theme.backgroundPanel}
       onMouseOver={() => props.onClick && setHover(true)}
       onMouseOut={() => setHover(false)}
       onMouseUp={() => {