Screen Layout Compressed... #381

Closed
opened 2026-02-16 17:26:30 -05:00 by yindo · 21 comments
Owner

Originally created by @agileandy on GitHub (Jun 28, 2025).

Originally assigned to: @adamdotdevin on GitHub.

Hi team,

hopefully you can close this issue quickly and there is a config I'm missing somewhere. The chat element of opencode seems to be compressed into a small fixed part of the available screen area (see image).

Is there a way to make this window auto size based on terminal width?

Image
Originally created by @agileandy on GitHub (Jun 28, 2025). Originally assigned to: @adamdotdevin on GitHub. Hi team, hopefully you can close this issue quickly and there is a config I'm missing somewhere. The chat element of opencode seems to be compressed into a small fixed part of the available screen area (see image). Is there a way to make this window auto size based on terminal width? <img width="1855" alt="Image" src="https://github.com/user-attachments/assets/1a55ea4e-843d-42a2-9a86-6b6a8df0c293" />
yindo closed this issue 2026-02-16 17:26:30 -05:00
Author
Owner

@adamdotdevin commented on GitHub (Jun 29, 2025):

i'm working on a new layout that takes advantage of wide screens, hope to have it out there soon

@adamdotdevin commented on GitHub (Jun 29, 2025): i'm working on a new layout that takes advantage of wide screens, hope to have it out there soon
Author
Owner

@aspiers commented on GitHub (Jun 30, 2025):

Great, thanks @adamdotdevin!

IMHO it should default to using something like Math.min(terminal_width, MAX_WIDTH).

Rationale:

  • It doesn't make sense for useful screen real estate to be unnecessarily wasted.
  • On the flip side, it's not good to have lines too wide, because that negatively impacts readability, e.g. see https://baymard.com/blog/line-length-readability for more on this.
@aspiers commented on GitHub (Jun 30, 2025): Great, thanks @adamdotdevin! IMHO it should default to using something like `Math.min(terminal_width, MAX_WIDTH)`. Rationale: - It doesn't make sense for useful screen real estate to be unnecessarily wasted. - On the flip side, it's not good to have lines too wide, because that negatively impacts readability, e.g. see https://baymard.com/blog/line-length-readability for more on this.
Author
Owner

@adamdotdevin commented on GitHub (Jun 30, 2025):

yeah, readability is the reason it's constrained to a narrow container right now. and i'm not going to just expand that out, there's a new feature coming that will fill the rest of the horizontal real-estate, hoping it lands this week.

@adamdotdevin commented on GitHub (Jun 30, 2025): yeah, readability is the reason it's constrained to a narrow container right now. and i'm not going to just expand that out, there's a new feature coming that will fill the rest of the horizontal real-estate, hoping it lands this week.
Author
Owner

@aspiers commented on GitHub (Jun 30, 2025):

That sounds exciting. It does also increase the need for a solution to #489, #528, and #554, but it looks like #518 is already taking care of those which is also exciting!

@aspiers commented on GitHub (Jun 30, 2025): That sounds exciting. It does also increase the need for a solution to #489, #528, and #554, but it looks like #518 is already taking care of those which is also exciting!
Author
Owner

@jesseleite commented on GitHub (Jul 1, 2025):

Yesterday morning I had started using opencode and was blown away by how beautiful and readable the TUI was 😍

Messages aligned right, and the model's response messages were aligned left, just as if it was an SMS conversation with the AI, which I find helps visually grok where prompts and responses are when scrolling through long sessions:

Image

Also this may not the best diff to use as an example (since there are only additions), but I find the split diff view more readable when the diff gets a bit hairy (like when a bunch of additions and deletions are mingled together). I think the split diff view being wider than the container also helps us subconsciously distinguish code snippets from the rest of the messages when scrolling through long sessions:

Image


The reason I mention all of this is because opencode auto-upgraded on me part-way through the day, and it seems we've lost the things I mention above.

For example, now all messages between the model and I are now left-aligned and equal width, which I'm already finding harder to grok the convo at a glance when scrolling longer sessions:

Image

And now the diff view is narrow/stacked instead of that wider/split, and I'm already finding certain diffs really harder to grok as a result:

Image


readability is the reason it's constrained to a narrow container right now [...] there's a new feature coming that will fill the rest of the horizontal real-estate

^ @adamdotdevin Given your message there, I'm not sure if these changes are intentional, or maybe there are some regressions here? Either way, I just wanted to politely throw in my two cents of appreciation/reasoning to why I think the left/right aligned convo messages and split diff views helps with readability when scrolling long convos.

PS. I think you guys are doing SICK work on opencode; THANK YOU for all you do! 🔥❤️

@jesseleite commented on GitHub (Jul 1, 2025): Yesterday morning I had started using opencode and was blown away by how beautiful and readable the TUI was 😍 Messages aligned right, and the model's response messages were aligned left, just as if it was an SMS conversation with the AI, which I find helps visually grok where prompts and responses are when scrolling through long sessions: ![Image](https://github.com/user-attachments/assets/58087b96-b5de-4efb-8ed5-6eafb41c0375) Also this may not the best diff to use as an example (since there are only additions), but I find the split diff view more readable when the diff gets a bit hairy (like when a bunch of additions and deletions are mingled together). I think the split diff view being wider than the container also helps us subconsciously distinguish code snippets from the rest of the messages when scrolling through long sessions: ![Image](https://github.com/user-attachments/assets/6f7b4cef-39dd-4a55-9b47-5167bddcfb3a) --- The reason I mention all of this is because opencode auto-upgraded on me part-way through the day, and it seems we've lost the things I mention above. For example, now all messages between the model and I are now left-aligned and equal width, which I'm already finding harder to grok the convo at a glance when scrolling longer sessions: ![Image](https://github.com/user-attachments/assets/22daa1bc-aafc-4c1b-98ce-7f36e55ffd2b) And now the diff view is narrow/stacked instead of that wider/split, and I'm already finding certain diffs really harder to grok as a result: ![Image](https://github.com/user-attachments/assets/61557777-9df9-4f7e-a731-ac6c40d7318f) --- >readability is the reason it's constrained to a narrow container right now [...] there's a new feature coming that will fill the rest of the horizontal real-estate ^ @adamdotdevin Given your message there, I'm not sure if these changes are intentional, or maybe there are some regressions here? Either way, I just wanted to politely throw in my two cents of appreciation/reasoning to why I think the left/right aligned convo messages and split diff views _helps_ with readability when scrolling long convos. PS. I think you guys are doing SICK work on opencode; THANK YOU for all you do! 🔥❤️
Author
Owner

@timotah commented on GitHub (Jul 2, 2025):

Yesterday morning I had started using opencode and was blown away by how beautiful and readable the TUI was 😍

Messages aligned right, and the model's response messages were aligned left, just as if it was an SMS conversation with the AI, which I find helps visually grok where prompts and responses are when scrolling through long sessions:

Image

Also this may not the best diff to use as an example (since there are only additions), but I find the split diff view more readable when the diff gets a bit hairy (like when a bunch of additions and deletions are mingled together). I think the split diff view being wider than the container also helps us subconsciously distinguish code snippets from the rest of the messages when scrolling through long sessions:

Image


The reason I mention all of this is because opencode auto-upgraded on me part-way through the day, and it seems we've lost the things I mention above.

For example, now all messages between the model and I are now left-aligned and equal width, which I'm already finding harder to grok the convo at a glance when scrolling longer sessions:

Image

And now the diff view is narrow/stacked instead of that wider/split, and I'm already finding certain diffs really harder to grok as a result:

Image


readability is the reason it's constrained to a narrow container right now [...] there's a new feature coming that will fill the rest of the horizontal real-estate

^ @adamdotdevin Given your message there, I'm not sure if these changes are intentional, or maybe there are some regressions here? Either way, I just wanted to politely throw in my two cents of appreciation/reasoning to why I think the left/right aligned convo messages and split diff views helps with readability when scrolling long convos.

PS. I think you guys are doing SICK work on opencode; THANK YOU for all you do! 🔥❤️

For the issue of user messages on the left side, it seems that reverting to v0.1.165 fixed the issue, so possibly the release of v0.1.166 is the cause of the issue.

@timotah commented on GitHub (Jul 2, 2025): > Yesterday morning I had started using opencode and was blown away by how beautiful and readable the TUI was 😍 > > Messages aligned right, and the model's response messages were aligned left, just as if it was an SMS conversation with the AI, which I find helps visually grok where prompts and responses are when scrolling through long sessions: > > ![Image](https://github.com/user-attachments/assets/58087b96-b5de-4efb-8ed5-6eafb41c0375) > > Also this may not the best diff to use as an example (since there are only additions), but I find the split diff view more readable when the diff gets a bit hairy (like when a bunch of additions and deletions are mingled together). I think the split diff view being wider than the container also helps us subconsciously distinguish code snippets from the rest of the messages when scrolling through long sessions: > > ![Image](https://github.com/user-attachments/assets/6f7b4cef-39dd-4a55-9b47-5167bddcfb3a) > > --- > > The reason I mention all of this is because opencode auto-upgraded on me part-way through the day, and it seems we've lost the things I mention above. > > For example, now all messages between the model and I are now left-aligned and equal width, which I'm already finding harder to grok the convo at a glance when scrolling longer sessions: > > ![Image](https://github.com/user-attachments/assets/22daa1bc-aafc-4c1b-98ce-7f36e55ffd2b) > > And now the diff view is narrow/stacked instead of that wider/split, and I'm already finding certain diffs really harder to grok as a result: > > ![Image](https://github.com/user-attachments/assets/61557777-9df9-4f7e-a731-ac6c40d7318f) > > --- > > >readability is the reason it's constrained to a narrow container right now [...] there's a new feature coming that will fill the rest of the horizontal real-estate > > ^ @adamdotdevin Given your message there, I'm not sure if these changes are intentional, or maybe there are some regressions here? Either way, I just wanted to politely throw in my two cents of appreciation/reasoning to why I think the left/right aligned convo messages and split diff views _helps_ with readability when scrolling long convos. > > PS. I think you guys are doing SICK work on opencode; THANK YOU for all you do! 🔥❤️ For the issue of user messages on the left side, it seems that reverting to v0.1.165 fixed the issue, so possibly the release of v0.1.166 is the cause of the issue.
Author
Owner

@ben-vargas commented on GitHub (Jul 9, 2025):

Any updates on this? Would love opencode to use more than 40% of my screen real estate in my terminal window. Looking forward to this!

@ben-vargas commented on GitHub (Jul 9, 2025): Any updates on this? Would love opencode to use more than 40% of my screen real estate in my terminal window. Looking forward to this!
Author
Owner

@adamdotdevin commented on GitHub (Jul 10, 2025):

we have broader plans to add review/restore stuff into the TUI, and that's going to fill the remaining space. the chat interface will occupy a column on the right-hand side, with wide split diffs of changes taking up the left ~2/3rds of the viewport. in the interim, i'm resisting the calls to just make the chat interface take up the full width. we could make the max width of the container a bit wider, but if we take up the entire viewport it'll be a visual mess and readability will suffer a ton. "trust me bro"

@adamdotdevin commented on GitHub (Jul 10, 2025): we have broader plans to add review/restore stuff into the TUI, and that's going to fill the remaining space. the chat interface will occupy a column on the right-hand side, with wide split diffs of changes taking up the left ~2/3rds of the viewport. in the interim, i'm resisting the calls to just make the chat interface take up the full width. we could make the max width of the container a bit wider, but if we take up the entire viewport it'll be a visual mess and readability will suffer a ton. "trust me bro"
Author
Owner

@aspiers commented on GitHub (Jul 10, 2025):

Thanks for the update - excited to see it!

Ideally it would be a responsive layout which switches between one and two column layout depending on the terminal width. The rationale for this is based semi-selfishly on my own personal needs, but surely I can't be the only one in this situation:

My eyesight is dwindling with age so I need relatively large fonts 🤓 🤪 And that requires small terminal dimensions on a laptop (100 columns or less) in order to have the terminal visible alongside an editor window. 2/3rds of 100 columns is 66 which is too narrow for effective unified diffs, let alone ones which are split left/right.

If the terminal has (say) 150 columns then sure, we can probably all agree that making the chat interface take up the full width would be a mistake. But on a terminal with 80-100 columns, having it take up the full width is currently one of the big advantages vs. something like Cursor which keeps the chat separate from the main diff review UI.

One related design consideration worth bearing in mind is that displaying diffs inside any AI agent TUI is duplicating what code editors and other git tools can already do very well. Don't get me wrong - I do appreciate those towards the vibe coding end of the spectrum tend not to have a code editor open at the same time as the agent, so a diff TUI is probably required for them. However for those of us who need to take a more hands-on approach to coding, we're generally gonna have a better experience reviewing code within our preferred editor or IDE or other git tools. So it would be great if opencode could cater for both use cases, not just the vibe coders 🙏 Definitely not saying that diff views should be removed from the TUI - just that they're not primary functionality for some of us, so I don't think they should forcibly displace the chat UI to be a second-class citizen.

Another consideration is that having the diffs inline within the chat helps clarify which diffs correspond to which prompts and responses. Separating them out loses this valuable functionality. Admittedly this makes for more vertical scrolling, but that could be better solved by improving the navigation functionality, e.g.

  • allowing expand/collapse of prompts and/or responses
  • implementing a modal dialog which shows an index (i.e. birds eye overview) of prompts and maybe responses, and then allows you to select one and jump directly to it.
@aspiers commented on GitHub (Jul 10, 2025): Thanks for the update - excited to see it! Ideally it would be a responsive layout which switches between one and two column layout depending on the terminal width. The rationale for this is based semi-selfishly on my own personal needs, but surely I can't be the only one in this situation: My eyesight is dwindling with age so I need relatively large fonts 🤓 🤪 And that requires small terminal dimensions on a laptop (100 columns or less) in order to have the terminal visible alongside an editor window. 2/3rds of 100 columns is 66 which is too narrow for effective unified diffs, let alone ones which are split left/right. If the terminal has (say) 150 columns then sure, we can probably all agree that making the chat interface take up the full width would be a mistake. But on a terminal with 80-100 columns, having it take up the full width is currently one of the big advantages vs. something like Cursor which keeps the chat separate from the main diff review UI. One related design consideration worth bearing in mind is that displaying diffs inside any AI agent TUI is duplicating what code editors and other git tools can already do very well. Don't get me wrong - I do appreciate those towards the vibe coding end of the spectrum tend not to have a code editor open at the same time as the agent, so a diff TUI is probably required for them. However for those of us who need to take a more hands-on approach to coding, we're generally gonna have a better experience reviewing code within our preferred editor or IDE or other git tools. So it would be great if opencode could cater for both use cases, not just the vibe coders 🙏 Definitely not saying that diff views should be removed from the TUI - just that they're not primary functionality for some of us, so I don't think they should forcibly displace the chat UI to be a second-class citizen. Another consideration is that having the diffs inline within the chat helps clarify which diffs correspond to which prompts and responses. Separating them out loses this valuable functionality. Admittedly this makes for more vertical scrolling, but that could be better solved by improving the navigation functionality, e.g. - allowing expand/collapse of prompts and/or responses - implementing a modal dialog which shows an index (i.e. birds eye overview) of prompts and maybe responses, and then allows you to select one and jump directly to it.
Author
Owner

@adamdotdevin commented on GitHub (Jul 15, 2025):

i made the max container width wider today, anyone have any feedback?
https://github.com/sst/opencode/releases/tag/v0.3.10

@adamdotdevin commented on GitHub (Jul 15, 2025): i made the max container width wider today, anyone have any feedback? https://github.com/sst/opencode/releases/tag/v0.3.10
Author
Owner

@ben-vargas commented on GitHub (Jul 15, 2025):

i made the max container width wider today, anyone have any feedback? https://github.com/sst/opencode/releases/tag/v0.3.10

Definitely an improvement, thanks! Is this configurable anywhere if one wants to go even wider? Or does that break other things and not available/recommended for that reason?

@ben-vargas commented on GitHub (Jul 15, 2025): > i made the max container width wider today, anyone have any feedback? https://github.com/sst/opencode/releases/tag/v0.3.10 Definitely an improvement, thanks! Is this configurable anywhere if one wants to go even wider? Or does that break other things and not available/recommended for that reason?
Author
Owner

@jesseleite commented on GitHub (Jul 15, 2025):

It's a nice width now, thank you @adamdotdevin! ❤️

Tbh, I still kinda miss the split diffs and more SMS-like conversation stagger you had going at one point....

Image

I know you have UX plans though, do don't let us drag you down 🥰

@jesseleite commented on GitHub (Jul 15, 2025): It's a nice width now, thank you @adamdotdevin! ❤️ Tbh, I still kinda miss the split diffs and more SMS-like conversation stagger you had going at one point.... <img width="750" height="433" alt="Image" src="https://github.com/user-attachments/assets/4399b944-d5a3-45f2-a296-ca3411bdfd18" /> I know you have UX plans though, do don't let us drag you down 🥰
Author
Owner

@adamdotdevin commented on GitHub (Jul 15, 2025):

split diff will come back, stagger may not though

@adamdotdevin commented on GitHub (Jul 15, 2025): split diff will come back, stagger may not though
Author
Owner

@adamdotdevin commented on GitHub (Jul 16, 2025):

alright, made the default a little better about using screen real-estate with wider split diffs on wide screen...

and also added a new layout config option for stretching the entire TUI to fill the width of the terminal viewport:
https://opencode.ai/docs/troubleshooting/#tui-not-rendering-full-width

@adamdotdevin commented on GitHub (Jul 16, 2025): alright, made the default a little better about using screen real-estate with wider split diffs on wide screen... and also added a new layout config option for stretching the entire TUI to fill the width of the terminal viewport: https://opencode.ai/docs/troubleshooting/#tui-not-rendering-full-width
Author
Owner

@adamdotdevin commented on GitHub (Jul 17, 2025):

going to close this one, thanks for all the feedback everyone

@adamdotdevin commented on GitHub (Jul 17, 2025): going to close this one, thanks for all the feedback everyone
Author
Owner

@jesseleite commented on GitHub (Jul 18, 2025):

@adamdotdevin Thank you! And for putting up with us ❤️

@jesseleite commented on GitHub (Jul 18, 2025): @adamdotdevin Thank you! And for putting up with us ❤️
Author
Owner

@asadmoosvi commented on GitHub (Jul 19, 2025):

I personally preferred the older centered layout, but the auto config for the layout is no longer doing that. It's using the stretched layout regardless of what I set for layout in the config.

opencode.json:

{
  "$schema": "https://opencode.ai/config.json",
  "layout": "auto"
}
@asadmoosvi commented on GitHub (Jul 19, 2025): I personally preferred the older centered layout, but the `auto` config for the layout is no longer doing that. It's using the stretched layout regardless of what I set for layout in the config. opencode.json: ```json { "$schema": "https://opencode.ai/config.json", "layout": "auto" } ```
Author
Owner

@adamdotdevin commented on GitHub (Jul 19, 2025):

I personally preferred the older centered layout, but the auto config for the layout is no longer doing that. It's using the stretched layout regardless of what I set for layout in the config.

opencode.json:

{
  "$schema": "https://opencode.ai/config.json",
  "layout": "auto"
}

yeah, i updated the config to state that the layout field is deprecated; i needed to land somewhere simpler than the current world of supporting both layouts bc of a bunch of stuff we have coming, and ultimately the stretch layout can theoretically work for everyone (if you prefer a narrower reading experience you can resize the window/pane, whereas the auto layout couldn't satisfy those that want a wider layout).

@adamdotdevin commented on GitHub (Jul 19, 2025): > I personally preferred the older centered layout, but the `auto` config for the layout is no longer doing that. It's using the stretched layout regardless of what I set for layout in the config. > > opencode.json: > > ```json > { > "$schema": "https://opencode.ai/config.json", > "layout": "auto" > } > ``` yeah, i updated the config to state that the layout field is deprecated; i needed to land somewhere simpler than the current world of supporting both layouts bc of a bunch of stuff we have coming, and ultimately the stretch layout can theoretically work for everyone (if you prefer a narrower reading experience you can resize the window/pane, whereas the auto layout couldn't satisfy those that want a wider layout).
Author
Owner

@asadmoosvi commented on GitHub (Jul 19, 2025):

Might want to update the docs on https://opencode.ai/docs/config for this too as it currently says "auto centers the content with padding. This is the default."

@asadmoosvi commented on GitHub (Jul 19, 2025): Might want to update the docs on https://opencode.ai/docs/config for this too as it currently says "auto centers the content with padding. This is the default."
Author
Owner

@RomaLzhih commented on GitHub (Aug 24, 2025):

Yes, the docs for configuring the layout are missing. I am the one who wishes to center the chat buffer, but it seems there is no such option I can use; now the default is to force the stretching of the whole screen. Thanks!

@RomaLzhih commented on GitHub (Aug 24, 2025): Yes, the docs for configuring the layout are missing. I am the one who wishes to center the chat buffer, but it seems there is no such option I can use; now the default is to force the stretching of the whole screen. Thanks!
Author
Owner

@rekram1-node commented on GitHub (Aug 24, 2025):

@RomaLzhih the layout configuration option was removed so that is why it isnt documented.

The tui is about to get a major rewrite which may allow for this behavior again in the future

@rekram1-node commented on GitHub (Aug 24, 2025): @RomaLzhih the layout configuration option was removed so that is why it isnt documented. The tui is about to get a major rewrite which may allow for this behavior again in the future
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: anomalyco/opencode#381