add back in file hierarchy in system prompt but limit to 200 items

Co-authored-by: adamdottv <2363879+adamdottv@users.noreply.github.com>

README.md

@@ -40,6 +40,9 @@ For more info on how to configure opencode [**head over to our docs**](https://o
 
 For any new features we'd appreciate it if you could open an issue first to discuss what you'd like to implement. We're pretty responsive there and it'll save you from working on something that we don't end up using. No need to do this for simpler fixes.
 
+> **Note**: Please talk to us via github issues before spending time working on
+> a new feature
+
 To run opencode locally you need.
 
 - Bun
@@ -67,10 +70,6 @@ It's very similar to Claude Code in terms of capability. Here are the key differ
 - A focus on TUI. opencode is built by neovim users and the creators of [terminal.shop](https://terminal.shop); we are going to push the limits of what's possible in the terminal.
 - A client/server architecture. This for example can allow opencode to run on your computer, while you can drive it remotely from a mobile app. Meaning that the TUI frontend is just one of the possible clients.
 
-#### What about Windows support?
-
-There are some minor problems blocking opencode from working on windows. We are working on on them now. You'll need to use WSL for now.
-
 #### What's the other repo?
 
 The other confusingly named repo has no relation to this one. You can [read the story behind it here](https://x.com/thdxr/status/1933561254481666466).

STATS.md

@@ -1,5 +1,6 @@
 # Download Stats
 
-| Date       | GitHub Downloads | npm Downloads | Total       |
-| ---------- | ---------------- | ------------- | ----------- |
-| 2025-06-29 | 18,789 (+0)      | 39,420 (+0)   | 58,209 (+0) |
+| Date       | GitHub Downloads | npm Downloads   | Total           |
+| ---------- | ---------------- | --------------- | --------------- |
+| 2025-06-29 | 18,789 (+0)      | 39,420 (+0)     | 58,209 (+0)     |
+| 2025-06-30 | 20,127 (+1,338)  | 41,059 (+1,639) | 61,186 (+2,977) |

packages/opencode/src/cli/cmd/debug.ts

@@ -0,0 +1,37 @@
+import { App } from "../../app/app"
+import { Ripgrep } from "../../file/ripgrep"
+import { LSP } from "../../lsp"
+import { cmd } from "./cmd"
+
+export const DebugCommand = cmd({
+  command: "debug",
+  builder: (yargs) =>
+    yargs.command(DiagnosticsCommand).command(TreeCommand).demandCommand(),
+  async handler() {},
+})
+
+const DiagnosticsCommand = cmd({
+  command: "diagnostics <file>",
+  builder: (yargs) =>
+    yargs.positional("file", { type: "string", demandOption: true }),
+  async handler(args) {
+    await App.provide({ cwd: process.cwd() }, async () => {
+      await LSP.touchFile(args.file, true)
+      console.log(await LSP.diagnostics())
+    })
+  },
+})
+
+const TreeCommand = cmd({
+  command: "tree",
+  builder: (yargs) =>
+    yargs.option("limit", {
+      type: "number",
+    }),
+  async handler(args) {
+    await App.provide({ cwd: process.cwd() }, async () => {
+      const app = App.info()
+      console.log(await Ripgrep.tree({ cwd: app.path.cwd, limit: args.limit }))
+    })
+  },
+})

packages/opencode/src/cli/cmd/scrap.ts

@@ -1,15 +0,0 @@
-import { App } from "../../app/app"
-import { LSP } from "../../lsp"
-import { cmd } from "./cmd"
-
-export const ScrapCommand = cmd({
-  command: "scrap <file>",
-  builder: (yargs) =>
-    yargs.positional("file", { type: "string", demandOption: true }),
-  async handler(args) {
-    await App.provide({ cwd: process.cwd() }, async () => {
-      await LSP.touchFile(args.file, true)
-      console.log(await LSP.diagnostics())
-    })
-  },
-})

packages/opencode/src/file/fzf.ts

@@ -5,7 +5,6 @@ import { z } from "zod"
 import { NamedError } from "../util/error"
 import { lazy } from "../util/lazy"
 import { Log } from "../util/log"
-import { $ } from "bun"
 
 export namespace Fzf {
   const log = Log.create({ service: "fzf" })
@@ -115,24 +114,4 @@ export namespace Fzf {
     const { filepath } = await state()
     return filepath
   }
-
-  export async function search(input: {
-    cwd: string
-    query: string
-    limit?: number
-  }) {
-    const results = await $`${await filepath()} --filter=${input.query}`
-      .quiet()
-      .throws(false)
-      .cwd(input.cwd)
-      .text()
-    const split = results
-      .trim()
-      .split("\n")
-      .filter((line) => line.length > 0)
-    log.info("results", {
-      count: split.length,
-    })
-    return split
-  }
 }

packages/opencode/src/file/ripgrep.ts

@@ -129,4 +129,104 @@ export namespace Ripgrep {
     const result = await $`${{ raw: joined }}`.cwd(input.cwd).nothrow().text()
     return result.split("\n").filter(Boolean)
   }
+
+  export async function tree(input: { cwd: string; limit?: number }) {
+    const files = await Ripgrep.files({ cwd: input.cwd })
+    interface Node {
+      path: string[]
+      children: Node[]
+    }
+
+    function getPath(node: Node, parts: string[], create: boolean) {
+      if (parts.length === 0) return node
+      let current = node
+      for (const part of parts) {
+        let existing = current.children.find((x) => x.path.at(-1) === part)
+        if (!existing) {
+          if (!create) return
+          existing = {
+            path: current.path.concat(part),
+            children: [],
+          }
+          current.children.push(existing)
+        }
+        current = existing
+      }
+      return current
+    }
+
+    const root: Node = {
+      path: [],
+      children: [],
+    }
+    for (const file of files) {
+      const parts = file.split(path.sep)
+      getPath(root, parts, true)
+    }
+
+    function sort(node: Node) {
+      node.children.sort((a, b) => {
+        if (!a.children.length && b.children.length) return 1
+        if (!b.children.length && a.children.length) return -1
+        return a.path.at(-1)!.localeCompare(b.path.at(-1)!)
+      })
+      for (const child of node.children) {
+        sort(child)
+      }
+    }
+    sort(root)
+
+    let current = [root]
+    const result: Node = {
+      path: [],
+      children: [],
+    }
+
+    let processed = 0
+    const limit = input.limit ?? 50
+    while (current.length > 0) {
+      const next = []
+      for (const node of current) {
+        if (node.children.length) next.push(...node.children)
+      }
+      const max = Math.max(...current.map((x) => x.children.length))
+      for (let i = 0; i < max && processed < limit; i++) {
+        for (const node of current) {
+          const child = node.children[i]
+          if (!child) continue
+          getPath(result, child.path, true)
+          processed++
+          if (processed >= limit) break
+        }
+      }
+      if (processed >= limit) {
+        for (const node of [...current, ...next]) {
+          const compare = getPath(result, node.path, false)
+          if (!compare) continue
+          if (compare?.children.length !== node.children.length) {
+            const diff = node.children.length - compare.children.length
+            compare.children.push({
+              path: compare.path.concat(`[${diff} truncated]`),
+              children: [],
+            })
+          }
+        }
+        break
+      }
+      current = next
+    }
+
+    const lines: string[] = []
+
+    function render(node: Node, depth: number) {
+      const indent = "\t".repeat(depth)
+      lines.push(indent + node.path.at(-1) + (node.children.length ? "/" : ""))
+      for (const child of node.children) {
+        render(child, depth + 1)
+      }
+    }
+    result.children.map((x) => render(x, 0))
+
+    return lines.join("\n")
+  }
 }

packages/opencode/src/format/formatter.ts

@@ -131,3 +131,30 @@ export const ruff: Info = {
     return Bun.which("ruff") !== null
   },
 }
+
+export const rubocop: Info = {
+  name: "rubocop",
+  command: ["rubocop", "--autocorrect", "$FILE"],
+  extensions: [".rb", ".rake", ".gemspec", ".ru"],
+  async enabled() {
+    return Bun.which("rubocop") !== null
+  },
+}
+
+export const standardrb: Info = {
+  name: "standardrb",
+  command: ["standardrb", "--fix", "$FILE"],
+  extensions: [".rb", ".rake", ".gemspec", ".ru"],
+  async enabled() {
+    return Bun.which("standardrb") !== null
+  },
+}
+
+export const htmlbeautifier: Info = {
+  name: "htmlbeautifier",
+  command: ["htmlbeautifier", "$FILE"],
+  extensions: [".erb", ".html.erb"],
+  async enabled() {
+    return Bun.which("htmlbeautifier") !== null
+  },
+}

packages/opencode/src/index.ts

@@ -3,7 +3,6 @@ import yargs from "yargs"
 import { hideBin } from "yargs/helpers"
 import { RunCommand } from "./cli/cmd/run"
 import { GenerateCommand } from "./cli/cmd/generate"
-import { ScrapCommand } from "./cli/cmd/scrap"
 import { Log } from "./util/log"
 import { AuthCommand } from "./cli/cmd/auth"
 import { UpgradeCommand } from "./cli/cmd/upgrade"
@@ -14,6 +13,7 @@ import { NamedError } from "./util/error"
 import { FormatError } from "./cli/error"
 import { ServeCommand } from "./cli/cmd/serve"
 import { TuiCommand } from "./cli/cmd/tui"
+import { DebugCommand } from "./cli/cmd/debug"
 
 const cancel = new AbortController()
 
@@ -49,7 +49,7 @@ const cli = yargs(hideBin(process.argv))
   .command(TuiCommand)
   .command(RunCommand)
   .command(GenerateCommand)
-  .command(ScrapCommand)
+  .command(DebugCommand)
   .command(AuthCommand)
   .command(UpgradeCommand)
   .command(ServeCommand)

packages/opencode/src/lsp/index.ts

@@ -28,7 +28,7 @@ export namespace LSP {
   export async function touchFile(input: string, waitForDiagnostics?: boolean) {
     const extension = path.parse(input).ext
     const s = await state()
-    const matches = LSPServer.All.filter((x) =>
+    const matches = Object.values(LSPServer).filter((x) =>
       x.extensions.includes(extension),
     )
     for (const match of matches) {

packages/opencode/src/lsp/language.ts

@@ -63,6 +63,14 @@ export const LANGUAGE_EXTENSIONS: Record<string, string> = {
   ".cshtml": "razor",
   ".razor": "razor",
   ".rb": "ruby",
+  ".rake": "ruby",
+  ".gemspec": "ruby",
+  ".ru": "ruby",
+  ".erb": "erb",
+  ".html.erb": "erb",
+  ".js.erb": "erb",
+  ".css.erb": "erb",
+  ".json.erb": "erb",
   ".rs": "rust",
   ".scss": "scss",
   ".sass": "sass",

packages/opencode/src/lsp/server.ts

@@ -19,78 +19,108 @@ export namespace LSPServer {
     spawn(app: App.Info): Promise<Handle | undefined>
   }
 
-  export const All: Info[] = [
-    {
-      id: "typescript",
-      extensions: [
-        ".ts",
-        ".tsx",
-        ".js",
-        ".jsx",
-        ".mjs",
-        ".cjs",
-        ".mts",
-        ".cts",
-      ],
-      async spawn(app) {
-        const tsserver = await Bun.resolve(
-          "typescript/lib/tsserver.js",
-          app.path.cwd,
-        ).catch(() => {})
-        if (!tsserver) return
-        const proc = spawn(
-          BunProc.which(),
-          ["x", "typescript-language-server", "--stdio"],
-          {
-            env: {
-              ...process.env,
-              BUN_BE_BUN: "1",
-            },
+  export const Typescript: Info = {
+    id: "typescript",
+    extensions: [".ts", ".tsx", ".js", ".jsx", ".mjs", ".cjs", ".mts", ".cts"],
+    async spawn(app) {
+      const tsserver = await Bun.resolve(
+        "typescript/lib/tsserver.js",
+        app.path.cwd,
+      ).catch(() => {})
+      if (!tsserver) return
+      const proc = spawn(
+        BunProc.which(),
+        ["x", "typescript-language-server", "--stdio"],
+        {
+          env: {
+            ...process.env,
+            BUN_BE_BUN: "1",
           },
-        )
-        return {
-          process: proc,
-          initialization: {
-            tsserver: {
-              path: tsserver,
-            },
+        },
+      )
+      return {
+        process: proc,
+        initialization: {
+          tsserver: {
+            path: tsserver,
           },
-        }
-      },
+        },
+      }
     },
-    {
-      id: "golang",
-      extensions: [".go"],
-      async spawn() {
-        let bin = Bun.which("gopls", {
-          PATH: process.env["PATH"] + ":" + Global.Path.bin,
+  }
+
+  export const Gopls: Info = {
+    id: "golang",
+    extensions: [".go"],
+    async spawn() {
+      let bin = Bun.which("gopls", {
+        PATH: process.env["PATH"] + ":" + Global.Path.bin,
+      })
+      if (!bin) {
+        log.info("installing gopls")
+        const proc = Bun.spawn({
+          cmd: ["go", "install", "golang.org/x/tools/gopls@latest"],
+          env: { ...process.env, GOBIN: Global.Path.bin },
+          stdout: "pipe",
+          stderr: "pipe",
+          stdin: "pipe",
         })
-        if (!bin) {
-          log.info("installing gopls")
-          const proc = Bun.spawn({
-            cmd: ["go", "install", "golang.org/x/tools/gopls@latest"],
-            env: { ...process.env, GOBIN: Global.Path.bin },
-            stdout: "pipe",
-            stderr: "pipe",
-            stdin: "pipe",
-          })
-          const exit = await proc.exited
-          if (exit !== 0) {
-            log.error("Failed to install gopls")
-            return
-          }
-          bin = path.join(
-            Global.Path.bin,
-            "gopls" + (process.platform === "win32" ? ".exe" : ""),
-          )
-          log.info(`installed gopls`, {
-            bin,
-          })
+        const exit = await proc.exited
+        if (exit !== 0) {
+          log.error("Failed to install gopls")
+          return
         }
-        return {
-          process: spawn(bin!),
-        }
-      },
+        bin = path.join(
+          Global.Path.bin,
+          "gopls" + (process.platform === "win32" ? ".exe" : ""),
+        )
+        log.info(`installed gopls`, {
+          bin,
+        })
+      }
+      return {
+        process: spawn(bin!),
+      }
     },
-  ]
+  }
+
+  export const RubyLsp: Info = {
+    id: "ruby-lsp",
+    extensions: [".rb", ".rake", ".gemspec", ".ru"],
+    async spawn() {
+      let bin = Bun.which("ruby-lsp", {
+        PATH: process.env["PATH"] + ":" + Global.Path.bin,
+      })
+      if (!bin) {
+        const ruby = Bun.which("ruby")
+        const gem = Bun.which("gem")
+        if (!ruby || !gem) {
+          log.info("Ruby not found, please install Ruby first")
+          return
+        }
+        log.info("installing ruby-lsp")
+        const proc = Bun.spawn({
+          cmd: ["gem", "install", "ruby-lsp", "--bindir", Global.Path.bin],
+          stdout: "pipe",
+          stderr: "pipe",
+          stdin: "pipe",
+        })
+        const exit = await proc.exited
+        if (exit !== 0) {
+          log.error("Failed to install ruby-lsp")
+          return
+        }
+        bin = path.join(
+          Global.Path.bin,
+          "ruby-lsp" + (process.platform === "win32" ? ".exe" : ""),
+        )
+        log.info(`installed ruby-lsp`, {
+          bin,
+        })
+      }
+      return {
+        process: spawn(bin!, ["--stdio"]),
+      }
+    },
+  }
 }

packages/opencode/src/provider/provider.ts

@@ -11,8 +11,6 @@ import { WebFetchTool } from "../tool/webfetch"
 import { GlobTool } from "../tool/glob"
 import { GrepTool } from "../tool/grep"
 import { ListTool } from "../tool/ls"
-import { LspDiagnosticTool } from "../tool/lsp-diagnostics"
-import { LspHoverTool } from "../tool/lsp-hover"
 import { PatchTool } from "../tool/patch"
 import { ReadTool } from "../tool/read"
 import type { Tool } from "../tool/tool"
@@ -23,6 +21,7 @@ import { AuthCopilot } from "../auth/copilot"
 import { ModelsDev } from "./models"
 import { NamedError } from "../util/error"
 import { Auth } from "../auth"
+// import { TaskTool } from "../tool/task"
 
 export namespace Provider {
   const log = Log.create({ service: "provider" })
@@ -140,10 +139,54 @@ export namespace Provider {
           credentialProvider: fromNodeProviderChain(),
         },
         async getModel(sdk: any, modelID: string) {
-          if (modelID.includes("claude")) {
-            const prefix = region.split("-")[0]
-            modelID = `${prefix}.${modelID}`
+          let regionPrefix = region.split("-")[0]
+
+          switch (regionPrefix) {
+            case "us": {
+              const modelRequiresPrefix = ["claude", "deepseek"].some((m) =>
+                modelID.includes(m),
+              )
+              if (modelRequiresPrefix) {
+                modelID = `${regionPrefix}.${modelID}`
+              }
+              break
+            }
+            case "eu": {
+              const regionRequiresPrefix = [
+                "eu-west-1",
+                "eu-west-3",
+                "eu-north-1",
+                "eu-central-1",
+                "eu-south-1",
+                "eu-south-2",
+              ].some((r) => region.includes(r))
+              const modelRequiresPrefix = [
+                "claude",
+                "nova-lite",
+                "nova-micro",
+                "llama3",
+                "pixtral",
+              ].some((m) => modelID.includes(m))
+              if (regionRequiresPrefix && modelRequiresPrefix) {
+                modelID = `${regionPrefix}.${modelID}`
+              }
+              break
+            }
+            case "ap": {
+              const modelRequiresPrefix = [
+                "claude",
+                "nova-lite",
+                "nova-micro",
+                "nova-pro",
+              ].some((m) => modelID.includes(m))
+              if (modelRequiresPrefix) {
+                regionPrefix = "apac"
+                modelID = `${regionPrefix}.${modelID}`
+              }
+              break
+            }
           }
+
           return sdk.languageModel(modelID)
         },
       }
@@ -403,16 +446,16 @@ export namespace Provider {
     GlobTool,
     GrepTool,
     ListTool,
-    LspDiagnosticTool,
-    LspHoverTool,
+    // LspDiagnosticTool,
+    // LspHoverTool,
     PatchTool,
     ReadTool,
     EditTool,
     // MultiEditTool,
     WriteTool,
     TodoWriteTool,
-    // TaskTool,
     TodoReadTool,
+    // TaskTool,
   ]
 
   const TOOL_MAPPING: Record<string, Tool.Info[]> = {

packages/opencode/src/server/server.ts

@@ -12,7 +12,7 @@ import { App } from "../app/app"
 import { mapValues } from "remeda"
 import { NamedError } from "../util/error"
 import { ModelsDev } from "../provider/models"
-import { Ripgrep } from "../external/ripgrep"
+import { Ripgrep } from "../file/ripgrep"
 import { Config } from "../config/config"
 
 const ERRORS = {

packages/opencode/src/session/system.ts

@@ -1,5 +1,5 @@
 import { App } from "../app/app"
-import { Ripgrep } from "../external/ripgrep"
+import { Ripgrep } from "../file/ripgrep"
 import { Global } from "../global"
 import { Filesystem } from "../util/filesystem"
 import path from "path"
@@ -27,55 +27,6 @@ export namespace SystemPrompt {
 
   export async function environment() {
     const app = App.info()
-
-    ;async () => {
-      const files = await Ripgrep.files({
-        cwd: app.path.cwd,
-      })
-      type Node = {
-        children: Record<string, Node>
-      }
-      const root: Node = {
-        children: {},
-      }
-      for (const file of files) {
-        const parts = file.split("/")
-        let node = root
-        for (const part of parts) {
-          const existing = node.children[part]
-          if (existing) {
-            node = existing
-            continue
-          }
-          node.children[part] = {
-            children: {},
-          }
-          node = node.children[part]
-        }
-      }
-
-      function render(path: string[], node: Node): string {
-        // if (path.length === 3) return "\t".repeat(path.length) + "..."
-        const lines: string[] = []
-        const entries = Object.entries(node.children).sort(([a], [b]) =>
-          a.localeCompare(b),
-        )
-
-        for (const [name, child] of entries) {
-          const currentPath = [...path, name]
-          const indent = "\t".repeat(path.length)
-          const hasChildren = Object.keys(child.children).length > 0
-          lines.push(`${indent}${name}` + (hasChildren ? "/" : ""))
-
-          if (hasChildren) lines.push(render(currentPath, child))
-        }
-
-        return lines.join("\n")
-      }
-      const result = render([], root)
-      return result
-    }
-
     return [
       [
         `Here is some useful information about the environment you are running in:`,
@@ -85,9 +36,16 @@ export namespace SystemPrompt {
         `  Platform: ${process.platform}`,
         `  Today's date: ${new Date().toDateString()}`,
         `</env>`,
-        // `<project>`,
-        // `  ${app.git ? await tree() : ""}`,
-        // `</project>`,
+        `<project>`,
+        `  ${
+          app.git
+            ? await Ripgrep.tree({
+                cwd: app.path.cwd,
+                limit: 200,
+              })
+            : ""
+        }`,
+        `</project>`,
       ].join("\n"),
     ]
   }

packages/opencode/src/tool/glob.ts

@@ -3,7 +3,7 @@ import path from "path"
 import { Tool } from "./tool"
 import { App } from "../app/app"
 import DESCRIPTION from "./glob.txt"
-import { Ripgrep } from "../external/ripgrep"
+import { Ripgrep } from "../file/ripgrep"
 
 export const GlobTool = Tool.define({
   id: "glob",

packages/opencode/src/tool/grep.ts

@@ -1,7 +1,7 @@
 import { z } from "zod"
 import { Tool } from "./tool"
 import { App } from "../app/app"
-import { Ripgrep } from "../external/ripgrep"
+import { Ripgrep } from "../file/ripgrep"
 
 import DESCRIPTION from "./grep.txt"
 

packages/tui/internal/app/app.go

@@ -21,6 +21,7 @@ import (
 )
 
 var RootPath string
+var CwdPath string
 
 type App struct {
 	Info      opencode.App
@@ -61,6 +62,7 @@ func New(
 	httpClient *opencode.Client,
 ) (*App, error) {
 	RootPath = appInfo.Path.Root
+	CwdPath = appInfo.Path.Cwd
 
 	configInfo, err := httpClient.Config.Get(ctx)
 	if err != nil {

packages/tui/internal/components/chat/editor.go

@@ -22,7 +22,7 @@ import (
 type EditorComponent interface {
 	tea.Model
 	tea.ViewModel
-	layout.Sizeable
+	SetSize(width, height int) tea.Cmd
 	Content() string
 	Lines() int
 	Value() string
@@ -158,7 +158,15 @@ func (m *editorComponent) Content() string {
 
 func (m *editorComponent) View() string {
 	if m.Lines() > 1 {
-		return ""
+		t := theme.CurrentTheme()
+		return lipgloss.Place(
+			m.width,
+			m.height,
+			lipgloss.Center,
+			lipgloss.Center,
+			"",
+			styles.WhitespaceStyle(t.Background()),
+		)
 	}
 	return m.Content()
 }

packages/tui/internal/components/chat/messages.go

@@ -1,7 +1,6 @@
 package chat
 
 import (
-	"slices"
 	"strings"
 	"time"
 
@@ -22,6 +21,7 @@ import (
 type MessagesComponent interface {
 	tea.Model
 	tea.ViewModel
+	SetSize(width, height int) tea.Cmd
 	PageUp() (tea.Model, tea.Cmd)
 	PageDown() (tea.Model, tea.Cmd)
 	HalfPageUp() (tea.Model, tea.Cmd)
@@ -107,16 +107,6 @@ func (m *messagesComponent) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 	return m, tea.Batch(cmds...)
 }
 
-type blockType int
-
-const (
-	none blockType = iota
-	userTextBlock
-	assistantTextBlock
-	toolInvocationBlock
-	errorBlock
-)
-
 func (m *messagesComponent) renderView() {
 	if m.width == 0 {
 		return
@@ -127,128 +117,147 @@ func (m *messagesComponent) renderView() {
 
 	t := theme.CurrentTheme()
 	blocks := make([]string, 0)
-	previousBlockType := none
+
+	align := lipgloss.Center
+	width := layout.Current.Container.Width
 
 	for _, message := range m.app.Messages {
 		var content string
 		var cached bool
-		lastToolIndex := 0
-		lastToolIndices := []int{}
-		for i, p := range message.Parts {
-			switch p.Type {
-			case opencode.MessagePartTypeText:
-				lastToolIndices = append(lastToolIndices, lastToolIndex)
-			case opencode.MessagePartTypeToolInvocation:
-				lastToolIndex = i
-			}
-		}
 
-		author := ""
 		switch message.Role {
 		case opencode.MessageRoleUser:
-			author = m.app.Info.User
-		case opencode.MessageRoleAssistant:
-			author = message.Metadata.Assistant.ModelID
-		}
-
-		for i, p := range message.Parts {
-			switch part := p.AsUnion().(type) {
-			// case client.MessagePartStepStart:
-			// 	messages = append(messages, "")
-			case opencode.TextPart:
-				key := m.cache.GenerateKey(message.ID, p.Text, layout.Current.Viewport.Width)
-				content, cached = m.cache.Get(key)
-				if !cached {
-					content = renderText(message, p.Text, author)
-					m.cache.Set(key, content)
-				}
-				if previousBlockType != none {
-					blocks = append(blocks, "")
-				}
-				blocks = append(blocks, content)
-				if message.Role == opencode.MessageRoleUser {
-					previousBlockType = userTextBlock
-				} else if message.Role == opencode.MessageRoleAssistant {
-					previousBlockType = assistantTextBlock
-				}
-			case opencode.ToolInvocationPart:
-				isLastToolInvocation := slices.Contains(lastToolIndices, i)
-				metadata := opencode.MessageMetadataTool{}
-
-				toolCallID := part.ToolInvocation.ToolCallID
-				// var toolCallID string
-				// var result *string
-				// switch toolCall := part.ToolInvocation.AsUnion().(type) {
-				// case opencode.ToolCall:
-				// 	toolCallID = toolCall.ToolCallID
-				// case opencode.ToolPartialCall:
-				// 	toolCallID = toolCall.ToolCallID
-				// case opencode.ToolResult:
-				// 	toolCallID = toolCall.ToolCallID
-				// 	result = &toolCall.Result
-				// }
-
-				if _, ok := message.Metadata.Tool[toolCallID]; ok {
-					metadata = message.Metadata.Tool[toolCallID]
-				}
-
-				var result *string
-				if part.ToolInvocation.Result != "" {
-					result = &part.ToolInvocation.Result
-				}
-
-				if part.ToolInvocation.State == "result" {
-					key := m.cache.GenerateKey(message.ID,
-						part.ToolInvocation.ToolCallID,
-						m.showToolDetails,
-						layout.Current.Viewport.Width,
-					)
+			for _, part := range message.Parts {
+				switch part := part.AsUnion().(type) {
+				case opencode.TextPart:
+					key := m.cache.GenerateKey(message.ID, part.Text, layout.Current.Viewport.Width)
 					content, cached = m.cache.Get(key)
 					if !cached {
-						content = renderToolInvocation(
-							part,
-							result,
-							metadata,
+						content = renderText(
+							message,
+							part.Text,
+							m.app.Info.User,
 							m.showToolDetails,
-							isLastToolInvocation,
-							false,
-							message.Metadata,
+							width,
+							align,
 						)
 						m.cache.Set(key, content)
 					}
-				} else {
-					// if the tool call isn't finished, don't cache
-					content = renderToolInvocation(
-						part,
-						result,
-						metadata,
-						m.showToolDetails,
-						isLastToolInvocation,
-						false,
-						message.Metadata,
-					)
+					if content != "" {
+						blocks = append(blocks, content)
+					}
 				}
-
-				if previousBlockType != toolInvocationBlock && m.showToolDetails {
-					blocks = append(blocks, "")
-				}
-				blocks = append(blocks, content)
-				previousBlockType = toolInvocationBlock
 			}
+
+		case opencode.MessageRoleAssistant:
+			for i, p := range message.Parts {
+				switch part := p.AsUnion().(type) {
+				case opencode.TextPart:
+					finished := message.Metadata.Time.Completed > 0
+					remainingParts := message.Parts[i+1:]
+					toolCallParts := make([]opencode.ToolInvocationPart, 0)
+					for _, part := range remainingParts {
+						switch part := part.AsUnion().(type) {
+						case opencode.TextPart:
+							// we only want tool calls associated with the current text part.
+							// if we hit another text part, we're done.
+							break
+						case opencode.ToolInvocationPart:
+							toolCallParts = append(toolCallParts, part)
+							if part.ToolInvocation.State != "result" {
+								// i don't think there's a case where a tool call isn't in result state
+								// and the message time is 0, but just in case
+								finished = false
+							}
+						}
+					}
+
+					if finished {
+						key := m.cache.GenerateKey(message.ID, p.Text, layout.Current.Viewport.Width, m.showToolDetails)
+						content, cached = m.cache.Get(key)
+						if !cached {
+							content = renderText(
+								message,
+								p.Text,
+								message.Metadata.Assistant.ModelID,
+								m.showToolDetails,
+								width,
+								align,
+								toolCallParts...,
+							)
+							m.cache.Set(key, content)
+						}
+					} else {
+						content = renderText(
+							message,
+							p.Text,
+							message.Metadata.Assistant.ModelID,
+							m.showToolDetails,
+							width,
+							align,
+							toolCallParts...,
+						)
+					}
+					if content != "" {
+						blocks = append(blocks, content)
+					}
+				case opencode.ToolInvocationPart:
+					if !m.showToolDetails {
+						continue
+					}
+
+					if part.ToolInvocation.State == "result" {
+						key := m.cache.GenerateKey(message.ID,
+							part.ToolInvocation.ToolCallID,
+							m.showToolDetails,
+							layout.Current.Viewport.Width,
+						)
+						content, cached = m.cache.Get(key)
+						if !cached {
+							content = renderToolDetails(
+								part,
+								message.Metadata,
+								width,
+								align,
+							)
+							m.cache.Set(key, content)
+						}
+					} else {
+						// if the tool call isn't finished, don't cache
+						content = renderToolDetails(
+							part,
+							message.Metadata,
+							width,
+							align,
+						)
+					}
+					if content != "" {
+						blocks = append(blocks, content)
+					}
+				}
+			}
+
 		}
 
 		error := ""
 		switch err := message.Metadata.Error.AsUnion().(type) {
 		case nil:
-		default:
-			clientError := err.(opencode.UnknownError)
-			error = clientError.Data.Message
+		case opencode.MessageMetadataErrorMessageOutputLengthError:
+			error = "Message output length exceeded"
+		case opencode.ProviderAuthError:
+			error = err.Data.Message
+		case opencode.UnknownError:
+			error = err.Data.Message
 		}
 
 		if error != "" {
-			error = renderContentBlock(error, WithBorderColor(t.Error()), WithFullWidth(), WithMarginTop(1), WithMarginBottom(1))
+			error = renderContentBlock(
+				error,
+				width,
+				align,
+				WithBorderColor(t.Error()),
+			)
 			blocks = append(blocks, error)
-			previousBlockType = errorBlock
 		}
 	}
 
@@ -257,7 +266,7 @@ func (m *messagesComponent) renderView() {
 		centered = append(centered, lipgloss.PlaceHorizontal(
 			m.width,
 			lipgloss.Center,
-			block,
+			block+"\n",
 			styles.WhitespaceStyle(t.Background()),
 		))
 	}
@@ -303,6 +312,7 @@ func (m *messagesComponent) View() string {
 	if len(m.app.Messages) == 0 {
 		return m.home()
 	}
+	t := theme.CurrentTheme()
 	if m.rendering {
 		return lipgloss.Place(
 			m.width,
@@ -310,19 +320,18 @@ func (m *messagesComponent) View() string {
 			lipgloss.Center,
 			lipgloss.Center,
 			"Loading session...",
+			styles.WhitespaceStyle(t.Background()),
 		)
 	}
-	t := theme.CurrentTheme()
-	return lipgloss.JoinVertical(
-		lipgloss.Left,
-		lipgloss.PlaceHorizontal(
-			m.width,
-			lipgloss.Center,
-			m.header(),
-			styles.WhitespaceStyle(t.Background()),
-		),
-		m.viewport.View(),
+	header := lipgloss.PlaceHorizontal(
+		m.width,
+		lipgloss.Center,
+		m.header(),
+		styles.WhitespaceStyle(t.Background()),
 	)
+	return styles.NewStyle().
+		Background(t.Background()).
+		Render(header + "\n" + m.viewport.View())
 }
 
 func (m *messagesComponent) home() string {

packages/tui/internal/components/commands/commands.go

@@ -9,7 +9,6 @@ import (
 	"github.com/charmbracelet/lipgloss/v2/compat"
 	"github.com/sst/opencode/internal/app"
 	"github.com/sst/opencode/internal/commands"
-	"github.com/sst/opencode/internal/layout"
 	"github.com/sst/opencode/internal/styles"
 	"github.com/sst/opencode/internal/theme"
 )
@@ -17,7 +16,7 @@ import (
 type CommandsComponent interface {
 	tea.Model
 	tea.ViewModel
-	layout.Sizeable
+	SetSize(width, height int) tea.Cmd
 	SetBackgroundColor(color compat.AdaptiveColor)
 }
 

packages/tui/internal/layout/container.go

@@ -1,292 +0,0 @@
-package layout
-
-import (
-	tea "github.com/charmbracelet/bubbletea/v2"
-	"github.com/charmbracelet/lipgloss/v2"
-	"github.com/sst/opencode/internal/styles"
-	"github.com/sst/opencode/internal/theme"
-)
-
-type Container interface {
-	tea.Model
-	tea.ViewModel
-	Sizeable
-	Focusable
-	Alignable
-}
-
-type container struct {
-	width  int
-	height int
-	x      int
-	y      int
-
-	content tea.ViewModel
-
-	paddingTop    int
-	paddingRight  int
-	paddingBottom int
-	paddingLeft   int
-
-	borderTop    bool
-	borderRight  bool
-	borderBottom bool
-	borderLeft   bool
-	borderStyle  lipgloss.Border
-
-	maxWidth int
-	align    lipgloss.Position
-
-	focused bool
-}
-
-func (c *container) Init() tea.Cmd {
-	if model, ok := c.content.(tea.Model); ok {
-		return model.Init()
-	}
-	return nil
-}
-
-func (c *container) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
-	if model, ok := c.content.(tea.Model); ok {
-		u, cmd := model.Update(msg)
-		c.content = u.(tea.ViewModel)
-		return c, cmd
-	}
-	return c, nil
-}
-
-func (c *container) View() string {
-	t := theme.CurrentTheme()
-	style := styles.NewStyle().Background(t.Background())
-	width := c.width
-	height := c.height
-
-	// Apply max width constraint if set
-	if c.maxWidth > 0 && width > c.maxWidth {
-		width = c.maxWidth
-	}
-
-	// Apply border if any side is enabled
-	if c.borderTop || c.borderRight || c.borderBottom || c.borderLeft {
-		// Adjust width and height for borders
-		if c.borderTop {
-			height--
-		}
-		if c.borderBottom {
-			height--
-		}
-		if c.borderLeft {
-			width--
-		}
-		if c.borderRight {
-			width--
-		}
-		style = style.Border(c.borderStyle, c.borderTop, c.borderRight, c.borderBottom, c.borderLeft)
-
-		// Use primary color for border if focused
-		if c.focused {
-			style = style.BorderBackground(t.Background()).BorderForeground(t.Primary())
-		} else {
-			style = style.BorderBackground(t.Background()).BorderForeground(t.Border())
-		}
-	}
-	style = style.
-		Width(width).
-		Height(height).
-		PaddingTop(c.paddingTop).
-		PaddingRight(c.paddingRight).
-		PaddingBottom(c.paddingBottom).
-		PaddingLeft(c.paddingLeft)
-
-	return style.Render(c.content.View())
-}
-
-func (c *container) SetSize(width, height int) tea.Cmd {
-	c.width = width
-	c.height = height
-
-	// Apply max width constraint if set
-	effectiveWidth := width
-	if c.maxWidth > 0 && width > c.maxWidth {
-		effectiveWidth = c.maxWidth
-	}
-
-	// If the content implements Sizeable, adjust its size to account for padding and borders
-	if sizeable, ok := c.content.(Sizeable); ok {
-		// Calculate horizontal space taken by padding and borders
-		horizontalSpace := c.paddingLeft + c.paddingRight
-		if c.borderLeft {
-			horizontalSpace++
-		}
-		if c.borderRight {
-			horizontalSpace++
-		}
-
-		// Calculate vertical space taken by padding and borders
-		verticalSpace := c.paddingTop + c.paddingBottom
-		if c.borderTop {
-			verticalSpace++
-		}
-		if c.borderBottom {
-			verticalSpace++
-		}
-
-		// Set content size with adjusted dimensions
-		contentWidth := max(0, effectiveWidth-horizontalSpace)
-		contentHeight := max(0, height-verticalSpace)
-		return sizeable.SetSize(contentWidth, contentHeight)
-	}
-	return nil
-}
-
-func (c *container) GetSize() (int, int) {
-	return min(c.width, c.maxWidth), c.height
-}
-
-func (c *container) MaxWidth() int {
-	return c.maxWidth
-}
-
-func (c *container) Alignment() lipgloss.Position {
-	return c.align
-}
-
-// Focus sets the container as focused
-func (c *container) Focus() tea.Cmd {
-	c.focused = true
-	if focusable, ok := c.content.(Focusable); ok {
-		return focusable.Focus()
-	}
-	return nil
-}
-
-// Blur removes focus from the container
-func (c *container) Blur() tea.Cmd {
-	c.focused = false
-	if blurable, ok := c.content.(Focusable); ok {
-		return blurable.Blur()
-	}
-	return nil
-}
-
-func (c *container) IsFocused() bool {
-	if blurable, ok := c.content.(Focusable); ok {
-		return blurable.IsFocused()
-	}
-	return c.focused
-}
-
-// GetPosition returns the x, y coordinates of the container
-func (c *container) GetPosition() (x, y int) {
-	return c.x, c.y
-}
-
-func (c *container) SetPosition(x, y int) {
-	c.x = x
-	c.y = y
-}
-
-type ContainerOption func(*container)
-
-func NewContainer(content tea.ViewModel, options ...ContainerOption) Container {
-	c := &container{
-		content:     content,
-		borderStyle: lipgloss.NormalBorder(),
-	}
-	for _, option := range options {
-		option(c)
-	}
-	return c
-}
-
-// Padding options
-func WithPadding(top, right, bottom, left int) ContainerOption {
-	return func(c *container) {
-		c.paddingTop = top
-		c.paddingRight = right
-		c.paddingBottom = bottom
-		c.paddingLeft = left
-	}
-}
-
-func WithPaddingAll(padding int) ContainerOption {
-	return WithPadding(padding, padding, padding, padding)
-}
-
-func WithPaddingHorizontal(padding int) ContainerOption {
-	return func(c *container) {
-		c.paddingLeft = padding
-		c.paddingRight = padding
-	}
-}
-
-func WithPaddingVertical(padding int) ContainerOption {
-	return func(c *container) {
-		c.paddingTop = padding
-		c.paddingBottom = padding
-	}
-}
-
-func WithBorder(top, right, bottom, left bool) ContainerOption {
-	return func(c *container) {
-		c.borderTop = top
-		c.borderRight = right
-		c.borderBottom = bottom
-		c.borderLeft = left
-	}
-}
-
-func WithBorderAll() ContainerOption {
-	return WithBorder(true, true, true, true)
-}
-
-func WithBorderHorizontal() ContainerOption {
-	return WithBorder(true, false, true, false)
-}
-
-func WithBorderVertical() ContainerOption {
-	return WithBorder(false, true, false, true)
-}
-
-func WithBorderStyle(style lipgloss.Border) ContainerOption {
-	return func(c *container) {
-		c.borderStyle = style
-	}
-}
-
-func WithRoundedBorder() ContainerOption {
-	return WithBorderStyle(lipgloss.RoundedBorder())
-}
-
-func WithThickBorder() ContainerOption {
-	return WithBorderStyle(lipgloss.ThickBorder())
-}
-
-func WithDoubleBorder() ContainerOption {
-	return WithBorderStyle(lipgloss.DoubleBorder())
-}
-
-func WithMaxWidth(maxWidth int) ContainerOption {
-	return func(c *container) {
-		c.maxWidth = maxWidth
-	}
-}
-
-func WithAlign(align lipgloss.Position) ContainerOption {
-	return func(c *container) {
-		c.align = align
-	}
-}
-
-func WithAlignLeft() ContainerOption {
-	return WithAlign(lipgloss.Left)
-}
-
-func WithAlignCenter() ContainerOption {
-	return WithAlign(lipgloss.Center)
-}
-
-func WithAlignRight() ContainerOption {
-	return WithAlign(lipgloss.Right)
-}

packages/tui/internal/layout/flex.go

@@ -1,255 +1,260 @@
 package layout
 
 import (
-	tea "github.com/charmbracelet/bubbletea/v2"
+	"strings"
+
 	"github.com/charmbracelet/lipgloss/v2"
 	"github.com/sst/opencode/internal/styles"
-	"github.com/sst/opencode/internal/theme"
 )
 
-type FlexDirection int
+type Direction int
 
 const (
-	FlexDirectionHorizontal FlexDirection = iota
-	FlexDirectionVertical
+	Row Direction = iota
+	Column
 )
 
-type FlexChildSize struct {
-	Fixed bool
-	Size  int
+type Justify int
+
+const (
+	JustifyStart Justify = iota
+	JustifyEnd
+	JustifyCenter
+	JustifySpaceBetween
+	JustifySpaceAround
+)
+
+type Align int
+
+const (
+	AlignStart Align = iota
+	AlignEnd
+	AlignCenter
+	AlignStretch // Only applicable in the cross-axis
+)
+
+type FlexOptions struct {
+	Direction Direction
+	Justify   Justify
+	Align     Align
+	Width     int
+	Height    int
 }
 
-var FlexChildSizeGrow = FlexChildSize{Fixed: false}
-
-func FlexChildSizeFixed(size int) FlexChildSize {
-	return FlexChildSize{Fixed: true, Size: size}
+type FlexItem struct {
+	View      string
+	FixedSize int  // Fixed size in the main axis (width for Row, height for Column)
+	Grow      bool // If true, the item will grow to fill available space
 }
 
-type FlexLayout interface {
-	tea.ViewModel
-	Sizeable
-	SetChildren(panes []tea.ViewModel) tea.Cmd
-	SetSizes(sizes []FlexChildSize) tea.Cmd
-	SetDirection(direction FlexDirection) tea.Cmd
-}
-
-type flexLayout struct {
-	width     int
-	height    int
-	direction FlexDirection
-	children  []tea.ViewModel
-	sizes     []FlexChildSize
-}
-
-type FlexLayoutOption func(*flexLayout)
-
-func (f *flexLayout) View() string {
-	if len(f.children) == 0 {
+// Render lays out a series of view strings based on flexbox-like rules.
+func Render(opts FlexOptions, items ...FlexItem) string {
+	if len(items) == 0 {
 		return ""
 	}
 
-	t := theme.CurrentTheme()
-	views := make([]string, 0, len(f.children))
-	for i, child := range f.children {
-		if child == nil {
-			continue
-		}
+	// Calculate dimensions for each item
+	mainAxisSize := opts.Width
+	crossAxisSize := opts.Height
+	if opts.Direction == Column {
+		mainAxisSize = opts.Height
+		crossAxisSize = opts.Width
+	}
 
-		alignment := lipgloss.Center
-		if alignable, ok := child.(Alignable); ok {
-			alignment = alignable.Alignment()
+	// Calculate total fixed size and count grow items
+	totalFixedSize := 0
+	growCount := 0
+	for _, item := range items {
+		if item.FixedSize > 0 {
+			totalFixedSize += item.FixedSize
+		} else if item.Grow {
+			growCount++
 		}
-		var childWidth, childHeight int
-		if f.direction == FlexDirectionHorizontal {
-			childWidth, childHeight = f.calculateChildSize(i)
-			view := lipgloss.PlaceHorizontal(
-				childWidth,
-				alignment,
-				child.View(),
-				// TODO: make configurable WithBackgroundStyle
-				lipgloss.WithWhitespaceStyle(styles.NewStyle().Background(t.Background()).Lipgloss()),
-			)
-			views = append(views, view)
+	}
+
+	// Calculate available space for grow items
+	availableSpace := mainAxisSize - totalFixedSize
+	if availableSpace < 0 {
+		availableSpace = 0
+	}
+
+	// Calculate size for each grow item
+	growItemSize := 0
+	if growCount > 0 && availableSpace > 0 {
+		growItemSize = availableSpace / growCount
+	}
+
+	// Prepare sized views
+	sizedViews := make([]string, len(items))
+	actualSizes := make([]int, len(items))
+
+	for i, item := range items {
+		view := item.View
+
+		// Determine the size for this item
+		itemSize := 0
+		if item.FixedSize > 0 {
+			itemSize = item.FixedSize
+		} else if item.Grow && growItemSize > 0 {
+			itemSize = growItemSize
 		} else {
-			childWidth, childHeight = f.calculateChildSize(i)
-			view := lipgloss.Place(
-				f.width,
-				childHeight,
-				lipgloss.Center,
-				alignment,
-				child.View(),
-				// TODO: make configurable WithBackgroundStyle
-				lipgloss.WithWhitespaceStyle(styles.NewStyle().Background(t.Background()).Lipgloss()),
-			)
-			views = append(views, view)
-		}
-	}
-	if f.direction == FlexDirectionHorizontal {
-		return lipgloss.JoinHorizontal(lipgloss.Center, views...)
-	}
-	return lipgloss.JoinVertical(lipgloss.Center, views...)
-}
-
-func (f *flexLayout) calculateChildSize(index int) (width, height int) {
-	if index >= len(f.children) {
-		return 0, 0
-	}
-
-	totalFixed := 0
-	flexCount := 0
-
-	for i, child := range f.children {
-		if child == nil {
-			continue
-		}
-		if i < len(f.sizes) && f.sizes[i].Fixed {
-			if f.direction == FlexDirectionHorizontal {
-				totalFixed += f.sizes[i].Size
+			// No fixed size and not growing - use natural size
+			if opts.Direction == Row {
+				itemSize = lipgloss.Width(view)
 			} else {
-				totalFixed += f.sizes[i].Size
+				itemSize = lipgloss.Height(view)
+			}
+		}
+
+		// Apply size constraints
+		if opts.Direction == Row {
+			// For row direction, constrain width and handle height alignment
+			if itemSize > 0 {
+				view = styles.NewStyle().
+					Width(itemSize).
+					Height(crossAxisSize).
+					Render(view)
+			}
+
+			// Apply cross-axis alignment
+			switch opts.Align {
+			case AlignCenter:
+				view = lipgloss.PlaceVertical(crossAxisSize, lipgloss.Center, view)
+			case AlignEnd:
+				view = lipgloss.PlaceVertical(crossAxisSize, lipgloss.Bottom, view)
+			case AlignStart:
+				view = lipgloss.PlaceVertical(crossAxisSize, lipgloss.Top, view)
+			case AlignStretch:
+				// Already stretched by Height setting above
 			}
 		} else {
-			flexCount++
+			// For column direction, constrain height and handle width alignment
+			if itemSize > 0 {
+				view = styles.NewStyle().
+					Height(itemSize).
+					Width(crossAxisSize).
+					Render(view)
+			}
+
+			// Apply cross-axis alignment
+			switch opts.Align {
+			case AlignCenter:
+				view = lipgloss.PlaceHorizontal(crossAxisSize, lipgloss.Center, view)
+			case AlignEnd:
+				view = lipgloss.PlaceHorizontal(crossAxisSize, lipgloss.Right, view)
+			case AlignStart:
+				view = lipgloss.PlaceHorizontal(crossAxisSize, lipgloss.Left, view)
+			case AlignStretch:
+				// Already stretched by Width setting above
+			}
+		}
+
+		sizedViews[i] = view
+		if opts.Direction == Row {
+			actualSizes[i] = lipgloss.Width(view)
+		} else {
+			actualSizes[i] = lipgloss.Height(view)
 		}
 	}
 
-	if f.direction == FlexDirectionHorizontal {
-		height = f.height
-		if index < len(f.sizes) && f.sizes[index].Fixed {
-			width = f.sizes[index].Size
-		} else if flexCount > 0 {
-			remainingSpace := f.width - totalFixed
-			width = remainingSpace / flexCount
+	// Calculate total actual size
+	totalActualSize := 0
+	for _, size := range actualSizes {
+		totalActualSize += size
+	}
+
+	// Apply justification
+	remainingSpace := mainAxisSize - totalActualSize
+	if remainingSpace < 0 {
+		remainingSpace = 0
+	}
+
+	// Calculate spacing based on justification
+	var spaceBefore, spaceBetween, spaceAfter int
+	switch opts.Justify {
+	case JustifyStart:
+		spaceAfter = remainingSpace
+	case JustifyEnd:
+		spaceBefore = remainingSpace
+	case JustifyCenter:
+		spaceBefore = remainingSpace / 2
+		spaceAfter = remainingSpace - spaceBefore
+	case JustifySpaceBetween:
+		if len(items) > 1 {
+			spaceBetween = remainingSpace / (len(items) - 1)
+		} else {
+			spaceAfter = remainingSpace
 		}
+	case JustifySpaceAround:
+		if len(items) > 0 {
+			spaceAround := remainingSpace / (len(items) * 2)
+			spaceBefore = spaceAround
+			spaceAfter = spaceAround
+			spaceBetween = spaceAround * 2
+		}
+	}
+
+	// Build the final layout
+	var parts []string
+
+	// Add space before if needed
+	if spaceBefore > 0 {
+		if opts.Direction == Row {
+			parts = append(parts, strings.Repeat(" ", spaceBefore))
+		} else {
+			parts = append(parts, strings.Repeat("\n", spaceBefore))
+		}
+	}
+
+	// Add items with spacing
+	for i, view := range sizedViews {
+		parts = append(parts, view)
+
+		// Add space between items (not after the last one)
+		if i < len(sizedViews)-1 && spaceBetween > 0 {
+			if opts.Direction == Row {
+				parts = append(parts, strings.Repeat(" ", spaceBetween))
+			} else {
+				parts = append(parts, strings.Repeat("\n", spaceBetween))
+			}
+		}
+	}
+
+	// Add space after if needed
+	if spaceAfter > 0 {
+		if opts.Direction == Row {
+			parts = append(parts, strings.Repeat(" ", spaceAfter))
+		} else {
+			parts = append(parts, strings.Repeat("\n", spaceAfter))
+		}
+	}
+
+	// Join the parts
+	if opts.Direction == Row {
+		return lipgloss.JoinHorizontal(lipgloss.Top, parts...)
 	} else {
-		width = f.width
-		if index < len(f.sizes) && f.sizes[index].Fixed {
-			height = f.sizes[index].Size
-		} else if flexCount > 0 {
-			remainingSpace := f.height - totalFixed
-			height = remainingSpace / flexCount
-		}
-	}
-
-	return width, height
-}
-
-func (f *flexLayout) SetSize(width, height int) tea.Cmd {
-	f.width = width
-	f.height = height
-
-	var cmds []tea.Cmd
-	currentX, currentY := 0, 0
-
-	for i, child := range f.children {
-		if child != nil {
-			paneWidth, paneHeight := f.calculateChildSize(i)
-			alignment := lipgloss.Center
-			if alignable, ok := child.(Alignable); ok {
-				alignment = alignable.Alignment()
-			}
-
-			// Calculate actual position based on alignment
-			actualX, actualY := currentX, currentY
-
-			if f.direction == FlexDirectionHorizontal {
-				// In horizontal layout, vertical alignment affects Y position
-				// (lipgloss.Center is used for vertical alignment in JoinHorizontal)
-				actualY = (f.height - paneHeight) / 2
-			} else {
-				// In vertical layout, horizontal alignment affects X position
-				contentWidth := paneWidth
-				if alignable, ok := child.(Alignable); ok {
-					if alignable.MaxWidth() > 0 && contentWidth > alignable.MaxWidth() {
-						contentWidth = alignable.MaxWidth()
-					}
-				}
-
-				switch alignment {
-				case lipgloss.Center:
-					actualX = (f.width - contentWidth) / 2
-				case lipgloss.Right:
-					actualX = f.width - contentWidth
-				case lipgloss.Left:
-					actualX = 0
-				}
-			}
-
-			// Set position if the pane is Alignable
-			if c, ok := child.(Alignable); ok {
-				c.SetPosition(actualX, actualY)
-			}
-
-			if sizeable, ok := child.(Sizeable); ok {
-				cmd := sizeable.SetSize(paneWidth, paneHeight)
-				cmds = append(cmds, cmd)
-			}
-
-			// Update position for next pane
-			if f.direction == FlexDirectionHorizontal {
-				currentX += paneWidth
-			} else {
-				currentY += paneHeight
-			}
-		}
-	}
-	return tea.Batch(cmds...)
-}
-
-func (f *flexLayout) GetSize() (int, int) {
-	return f.width, f.height
-}
-
-func (f *flexLayout) SetChildren(children []tea.ViewModel) tea.Cmd {
-	f.children = children
-	if f.width > 0 && f.height > 0 {
-		return f.SetSize(f.width, f.height)
-	}
-	return nil
-}
-
-func (f *flexLayout) SetSizes(sizes []FlexChildSize) tea.Cmd {
-	f.sizes = sizes
-	if f.width > 0 && f.height > 0 {
-		return f.SetSize(f.width, f.height)
-	}
-	return nil
-}
-
-func (f *flexLayout) SetDirection(direction FlexDirection) tea.Cmd {
-	f.direction = direction
-	if f.width > 0 && f.height > 0 {
-		return f.SetSize(f.width, f.height)
-	}
-	return nil
-}
-
-func NewFlexLayout(children []tea.ViewModel, options ...FlexLayoutOption) FlexLayout {
-	layout := &flexLayout{
-		children:  children,
-		direction: FlexDirectionHorizontal,
-		sizes:     []FlexChildSize{},
-	}
-	for _, option := range options {
-		option(layout)
-	}
-	return layout
-}
-
-func WithDirection(direction FlexDirection) FlexLayoutOption {
-	return func(f *flexLayout) {
-		f.direction = direction
+		return lipgloss.JoinVertical(lipgloss.Left, parts...)
 	}
 }
 
-func WithChildren(children ...tea.ViewModel) FlexLayoutOption {
-	return func(f *flexLayout) {
-		f.children = children
-	}
+// Helper function to create a simple vertical layout
+func Vertical(width, height int, items ...FlexItem) string {
+	return Render(FlexOptions{
+		Direction: Column,
+		Width:     width,
+		Height:    height,
+		Justify:   JustifyStart,
+		Align:     AlignStretch,
+	}, items...)
 }
 
-func WithSizes(sizes ...FlexChildSize) FlexLayoutOption {
-	return func(f *flexLayout) {
-		f.sizes = sizes
-	}
+// Helper function to create a simple horizontal layout
+func Horizontal(width, height int, items ...FlexItem) string {
+	return Render(FlexOptions{
+		Direction: Row,
+		Width:     width,
+		Height:    height,
+		Justify:   JustifyStart,
+		Align:     AlignStretch,
+	}, items...)
 }

packages/tui/internal/layout/layout.go

@@ -1,11 +1,7 @@
 package layout
 
 import (
-	"reflect"
-
-	"github.com/charmbracelet/bubbles/v2/key"
 	tea "github.com/charmbracelet/bubbletea/v2"
-	"github.com/charmbracelet/lipgloss/v2"
 )
 
 var Current *LayoutInfo
@@ -34,33 +30,3 @@ type Modal interface {
 	Render(background string) string
 	Close() tea.Cmd
 }
-
-type Focusable interface {
-	Focus() tea.Cmd
-	Blur() tea.Cmd
-	IsFocused() bool
-}
-
-type Sizeable interface {
-	SetSize(width, height int) tea.Cmd
-	GetSize() (int, int)
-}
-
-type Alignable interface {
-	MaxWidth() int
-	Alignment() lipgloss.Position
-	SetPosition(x, y int)
-	GetPosition() (x, y int)
-}
-
-func KeyMapToSlice(t any) (bindings []key.Binding) {
-	typ := reflect.TypeOf(t)
-	if typ.Kind() != reflect.Struct {
-		return nil
-	}
-	for i := range typ.NumField() {
-		v := reflect.ValueOf(t).Field(i)
-		bindings = append(bindings, v.Interface().(key.Binding))
-	}
-	return
-}

packages/tui/internal/tui/tui.go

@@ -47,8 +47,6 @@ type appModel struct {
 	status               status.StatusComponent
 	editor               chat.EditorComponent
 	messages             chat.MessagesComponent
-	editorContainer      layout.Container
-	layout               layout.FlexLayout
 	completions          dialog.CompletionDialog
 	completionManager    *completions.CompletionManager
 	showCompletionDialog bool
@@ -360,7 +358,10 @@ func (a appModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 				Width: min(a.width, 80),
 			},
 		}
-		a.layout.SetSize(a.width, a.height)
+		// Update child component sizes
+		messagesHeight := a.height - 6 // Leave room for editor and status bar
+		a.messages.SetSize(a.width, messagesHeight)
+		a.editor.SetSize(min(a.width, 80), 5)
 	case app.SessionSelectedMsg:
 		messages, err := a.app.ListMessages(context.Background(), msg.ID)
 		if err != nil {
@@ -424,33 +425,69 @@ func (a appModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 }
 
 func (a appModel) View() string {
-	layoutView := a.layout.View()
-	editorWidth, _ := a.editorContainer.GetSize()
-	editorX, editorY := a.editorContainer.GetPosition()
+	messagesView := a.messages.View()
+	editorView := a.editor.View()
+
+	editorHeight := lipgloss.Height(editorView)
+	if editorHeight < 5 {
+		editorHeight = 5
+	}
+
+	t := theme.CurrentTheme()
+	centeredEditorView := lipgloss.PlaceHorizontal(
+		a.width,
+		lipgloss.Center,
+		editorView,
+		styles.WhitespaceStyle(t.Background()),
+	)
+
+	mainLayout := layout.Render(
+		layout.FlexOptions{
+			Direction: layout.Column,
+			Width:     a.width,
+			Height:    a.height - 1, // Leave room for status bar
+		},
+		layout.FlexItem{
+			View: messagesView,
+			Grow: true,
+		},
+		layout.FlexItem{
+			View:      centeredEditorView,
+			FixedSize: editorHeight,
+		},
+	)
 
 	if a.editor.Lines() > 1 {
-		editorY = editorY - a.editor.Lines() + 1
-		layoutView = layout.PlaceOverlay(
+		editorWidth := min(a.width, 80)
+		editorX := (a.width - editorWidth) / 2
+		editorY := a.height - editorHeight - 1 // Position from bottom, accounting for status bar
+
+		mainLayout = layout.PlaceOverlay(
 			editorX,
 			editorY,
 			a.editor.Content(),
-			layoutView,
+			mainLayout,
 		)
 	}
 
 	if a.showCompletionDialog {
+		editorWidth := min(a.width, 80)
+		editorX := (a.width - editorWidth) / 2
 		a.completions.SetWidth(editorWidth)
 		overlay := a.completions.View()
-		layoutView = layout.PlaceOverlay(
+		overlayHeight := lipgloss.Height(overlay)
+		editorY := a.height - editorHeight - 1
+
+		mainLayout = layout.PlaceOverlay(
 			editorX,
-			editorY-lipgloss.Height(overlay)+2,
+			editorY-overlayHeight,
 			overlay,
-			layoutView,
+			mainLayout,
 		)
 	}
 
 	components := []string{
-		layoutView,
+		mainLayout,
 		a.status.View(),
 	}
 	appView := strings.Join(components, "\n")
@@ -464,6 +501,7 @@ func (a appModel) View() string {
 	if theme.CurrentThemeUsesAnsiColors() {
 		appView = util.ConvertRGBToAnsi16Colors(appView)
 	}
+
 	return appView
 }
 
@@ -653,13 +691,6 @@ func NewModel(app *app.App) tea.Model {
 	editor := chat.NewEditorComponent(app)
 	completions := dialog.NewCompletionDialogComponent(initialProvider)
 
-	editorContainer := layout.NewContainer(
-		editor,
-		layout.WithMaxWidth(layout.Current.Container.Width),
-		layout.WithAlignCenter(),
-	)
-	messagesContainer := layout.NewContainer(messages)
-
 	var leaderBinding *key.Binding
 	if app.Config.Keybinds.Leader != "" {
 		binding := key.NewBinding(key.WithKeys(app.Config.Keybinds.Leader))
@@ -676,17 +707,8 @@ func NewModel(app *app.App) tea.Model {
 		leaderBinding:        leaderBinding,
 		isLeaderSequence:     false,
 		showCompletionDialog: false,
-		editorContainer:      editorContainer,
 		toastManager:         toast.NewToastManager(),
 		interruptKeyState:    InterruptKeyIdle,
-		layout: layout.NewFlexLayout(
-			[]tea.ViewModel{messagesContainer, editorContainer},
-			layout.WithDirection(layout.FlexDirectionVertical),
-			layout.WithSizes(
-				layout.FlexChildSizeGrow,
-				layout.FlexChildSizeFixed(5),
-			),
-		),
 	}
 
 	return model

packages/tui/internal/util/util.go

@@ -42,6 +42,6 @@ func Measure(tag string) func(...any) {
 	startTime := time.Now()
 	return func(tags ...any) {
 		args := append([]any{"timeTakenMs", time.Since(startTime).Milliseconds()}, tags...)
-		slog.Info(tag, args...)
+		slog.Debug(tag, args...)
 	}
 }