split message padding into user/assistant-specific fields

Replace generic messagePaddingTop/Bottom with separate controls for user
and assistant messages. This enables visual separation by moving blank
lines from highlighted user message area to unhighlighted assistant area.

Changes:
- Split messagePaddingTop/Bottom into user/assistant variants in LayoutConfig
- Update default layout: move blank line from user bottom to assistant top
- Update dense layout: minimal padding with visual separation preserved
- Apply padding to TextPart component (was missing before)

Result: Same total spacing but improved visual clarity - blank line between
user→assistant messages no longer extends user message background color.

Author: michaeldstenner

packages/opencode/src/cli/cmd/tui/context/layout.tsx

@@ -12,8 +12,10 @@ import denseLayoutText from "./layout/dense.jsonc" with { type: "text" }
 
 export type LayoutConfig = {
   messageSeparation: number
-  messagePaddingTop: number
-  messagePaddingBottom: number
+  userMessagePaddingTop: number
+  userMessagePaddingBottom: number
+  assistantMessagePaddingTop: number
+  assistantMessagePaddingBottom: number
   containerPaddingTop: number
   containerPaddingBottom: number
   containerGap: number

packages/opencode/src/cli/cmd/tui/context/layout/default.jsonc

@@ -6,9 +6,15 @@
     // Vertical spacing between consecutive messages
     "messageSeparation": 1,
 
-    // Padding inside individual message containers
-    "messagePaddingTop": 1,
-    "messagePaddingBottom": 1,
+    // Padding inside user message containers
+    "userMessagePaddingTop": 1,
+    "userMessagePaddingBottom": 0,
+
+    // Padding inside assistant message containers (tool outputs, text, etc.)
+    "assistantMessagePaddingTop": 2,
+    "assistantMessagePaddingBottom": 1,
+
+    // Left padding for message text (shared by user and assistant)
     "messagePaddingLeft": 2,
 
     // Padding around the entire session container

packages/opencode/src/cli/cmd/tui/context/layout/dense.jsonc

@@ -6,9 +6,15 @@
     // Spacing between messages
     "messageSeparation": 1,
 
-    // Minimal padding inside message containers
-    "messagePaddingTop": 0,
-    "messagePaddingBottom": 1,
+    // Minimal padding inside user message containers
+    "userMessagePaddingTop": 0,
+    "userMessagePaddingBottom": 0,
+
+    // Minimal padding inside assistant message containers
+    "assistantMessagePaddingTop": 1,
+    "assistantMessagePaddingBottom": 0,
+
+    // Left padding for message text
     "messagePaddingLeft": 1,
 
     // Minimal container padding

packages/opencode/src/cli/cmd/tui/routes/session/index.tsx

@@ -958,8 +958,8 @@ function UserMessage(props: {
               setHover(false)
             }}
             onMouseUp={props.onMouseUp}
-            paddingTop={ctx.layout().messagePaddingTop}
-            paddingBottom={ctx.layout().messagePaddingBottom}
+            paddingTop={ctx.layout().userMessagePaddingTop}
+            paddingBottom={ctx.layout().userMessagePaddingBottom}
             paddingLeft={ctx.layout().messagePaddingLeft}
             backgroundColor={theme.backgroundElement}
             flexShrink={0}
@@ -1056,8 +1056,8 @@ function AssistantMessage(props: { message: AssistantMessage; parts: Part[]; las
           return (
             <box
               border={["left"]}
-              paddingTop={ctx.layout().messagePaddingTop}
-              paddingBottom={ctx.layout().messagePaddingBottom}
+              paddingTop={ctx.layout().assistantMessagePaddingTop}
+              paddingBottom={ctx.layout().assistantMessagePaddingBottom}
               paddingLeft={ctx.layout().messagePaddingLeft}
               marginTop={ctx.layout().messageSeparation}
               backgroundColor={theme.backgroundPanel}
@@ -1130,7 +1130,14 @@ function TextPart(props: { last: boolean; part: TextPart; message: AssistantMess
   const { theme, syntax } = useTheme()
   return (
     <Show when={props.part.text.trim()}>
-      <box id={"text-" + props.part.id} paddingLeft={ctx.layout().textIndent} marginTop={ctx.layout().toolMarginTop} flexShrink={0}>
+      <box
+        id={"text-" + props.part.id}
+        paddingLeft={ctx.layout().textIndent}
+        paddingTop={ctx.layout().assistantMessagePaddingTop}
+        paddingBottom={ctx.layout().assistantMessagePaddingBottom}
+        marginTop={ctx.layout().toolMarginTop}
+        flexShrink={0}
+      >
         <code
           filetype="markdown"
           drawUnstyledText={false}
@@ -1166,8 +1173,8 @@ function ToolPart(props: { last: boolean; part: ToolPart; message: AssistantMess
       container === "block" || permission
         ? {
             border: permissionIndex === 0 ? (["left", "right"] as const) : (["left"] as const),
-            paddingTop: ctx.layout().messagePaddingTop,
-            paddingBottom: ctx.layout().messagePaddingBottom,
+            paddingTop: ctx.layout().assistantMessagePaddingTop,
+            paddingBottom: ctx.layout().assistantMessagePaddingBottom,
             paddingLeft: ctx.layout().toolIndent,
             marginTop: ctx.layout().toolMarginTop,
             gap: 1,