fix(tui): layout issues

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/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/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/components/chat/messages.go

@@ -10,7 +10,6 @@ import (
 	"github.com/charmbracelet/lipgloss/v2"
 	"github.com/sst/opencode-sdk-go"
 	"github.com/sst/opencode/internal/app"
-	"github.com/sst/opencode/internal/components/commands"
 	"github.com/sst/opencode/internal/components/dialog"
 	"github.com/sst/opencode/internal/layout"
 	"github.com/sst/opencode/internal/styles"
@@ -39,7 +38,6 @@ type messagesComponent struct {
 	viewport        viewport.Model
 	spinner         spinner.Model
 	attachments     viewport.Model
-	commands        commands.CommandsComponent
 	cache           *MessageCache
 	rendering       bool
 	showToolDetails bool
@@ -49,7 +47,7 @@ type renderFinishedMsg struct{}
 type ToggleToolDetailsMsg struct{}
 
 func (m *messagesComponent) Init() tea.Cmd {
-	return tea.Batch(m.viewport.Init(), m.spinner.Tick, m.commands.Init())
+	return tea.Batch(m.viewport.Init(), m.spinner.Tick)
 }
 
 func (m *messagesComponent) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
@@ -100,10 +98,6 @@ func (m *messagesComponent) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 	m.spinner = spinner
 	cmds = append(cmds, cmd)
 
-	updated, cmd := m.commands.Update(msg)
-	m.commands = updated.(commands.CommandsComponent)
-	cmds = append(cmds, cmd)
-
 	return m, tea.Batch(cmds...)
 }
 
@@ -271,8 +265,8 @@ func (m *messagesComponent) renderView() {
 		))
 	}
 
-	m.viewport.SetHeight(m.height - lipgloss.Height(m.header()))
-	m.viewport.SetContent("\n" + strings.Join(centered, "\n") + "\n")
+	m.viewport.SetHeight(m.height - lipgloss.Height(m.header()) + 1)
+	m.viewport.SetContent("\n" + strings.Join(centered, "\n"))
 }
 
 func (m *messagesComponent) header() string {
@@ -309,9 +303,6 @@ func (m *messagesComponent) header() string {
 }
 
 func (m *messagesComponent) View() string {
-	if len(m.app.Messages) == 0 {
-		return m.home()
-	}
 	t := theme.CurrentTheme()
 	if m.rendering {
 		return lipgloss.Place(
@@ -334,70 +325,6 @@ func (m *messagesComponent) View() string {
 		Render(header + "\n" + m.viewport.View())
 }
 
-func (m *messagesComponent) home() string {
-	t := theme.CurrentTheme()
-	baseStyle := styles.NewStyle().Background(t.Background())
-	base := baseStyle.Render
-	muted := styles.NewStyle().Foreground(t.TextMuted()).Background(t.Background()).Render
-
-	open := `
-█▀▀█ █▀▀█ █▀▀ █▀▀▄ 
-█░░█ █░░█ █▀▀ █░░█ 
-▀▀▀▀ █▀▀▀ ▀▀▀ ▀  ▀ `
-	code := `
-█▀▀ █▀▀█ █▀▀▄ █▀▀
-█░░ █░░█ █░░█ █▀▀
-▀▀▀ ▀▀▀▀ ▀▀▀  ▀▀▀`
-
-	logo := lipgloss.JoinHorizontal(
-		lipgloss.Top,
-		muted(open),
-		base(code),
-	)
-	// cwd := app.Info.Path.Cwd
-	// config := app.Info.Path.Config
-
-	versionStyle := styles.NewStyle().
-		Foreground(t.TextMuted()).
-		Background(t.Background()).
-		Width(lipgloss.Width(logo)).
-		Align(lipgloss.Right)
-	version := versionStyle.Render(m.app.Version)
-
-	logoAndVersion := strings.Join([]string{logo, version}, "\n")
-	logoAndVersion = lipgloss.PlaceHorizontal(
-		m.width,
-		lipgloss.Center,
-		logoAndVersion,
-		styles.WhitespaceStyle(t.Background()),
-	)
-	m.commands.SetBackgroundColor(t.Background())
-	commands := lipgloss.PlaceHorizontal(
-		m.width,
-		lipgloss.Center,
-		m.commands.View(),
-		styles.WhitespaceStyle(t.Background()),
-	)
-
-	lines := []string{}
-	lines = append(lines, logoAndVersion)
-	lines = append(lines, "")
-	lines = append(lines, "")
-	// lines = append(lines, base("cwd ")+muted(cwd))
-	// lines = append(lines, base("config ")+muted(config))
-	// lines = append(lines, "")
-	lines = append(lines, commands)
-
-	return lipgloss.Place(
-		m.width,
-		m.height,
-		lipgloss.Center,
-		lipgloss.Center,
-		baseStyle.Render(strings.Join(lines, "\n")),
-		styles.WhitespaceStyle(t.Background()),
-	)
-}
-
 func (m *messagesComponent) SetSize(width, height int) tea.Cmd {
 	if m.width == width && m.height == height {
 		return nil
@@ -412,7 +339,6 @@ func (m *messagesComponent) SetSize(width, height int) tea.Cmd {
 	m.viewport.SetHeight(height - lipgloss.Height(m.header()))
 	m.attachments.SetWidth(width + 40)
 	m.attachments.SetHeight(3)
-	m.commands.SetSize(width, height)
 	m.renderView()
 	return nil
 }
@@ -476,19 +402,11 @@ func NewMessagesComponent(app *app.App) MessagesComponent {
 	attachments := viewport.New()
 	vp.KeyMap = viewport.KeyMap{}
 
-	t := theme.CurrentTheme()
-	commandsView := commands.New(
-		app,
-		commands.WithBackground(t.Background()),
-		commands.WithLimit(6),
-	)
-
 	return &messagesComponent{
 		app:             app,
 		viewport:        vp,
 		spinner:         s,
 		attachments:     attachments,
-		commands:        commandsView,
 		showToolDetails: true,
 		cache:           NewMessageCache(),
 		tail:            true,

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

@@ -14,7 +14,6 @@ import (
 )
 
 type CommandsComponent interface {
-	tea.Model
 	tea.ViewModel
 	SetSize(width, height int) tea.Cmd
 	SetBackgroundColor(color compat.AdaptiveColor)
@@ -43,19 +42,6 @@ func (c *commandsComponent) SetBackgroundColor(color compat.AdaptiveColor) {
 	c.background = &color
 }
 
-func (c *commandsComponent) Init() tea.Cmd {
-	return nil
-}
-
-func (c *commandsComponent) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
-	switch msg := msg.(type) {
-	case tea.WindowSizeMsg:
-		c.width = msg.Width
-		c.height = msg.Height
-	}
-	return c, nil
-}
-
 func (c *commandsComponent) View() string {
 	t := theme.CurrentTheme()
 

packages/tui/internal/components/dialog/help.go

@@ -20,10 +20,7 @@ type helpDialog struct {
 }
 
 func (h *helpDialog) Init() tea.Cmd {
-	return tea.Batch(
-		h.commandsComponent.Init(),
-		h.viewport.Init(),
-	)
+	return h.viewport.Init()
 }
 
 func (h *helpDialog) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
@@ -38,10 +35,6 @@ func (h *helpDialog) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		h.commandsComponent.SetSize(msg.Width-4, msg.Height-6)
 	}
 
-	// Update commands component first to get the latest content
-	_, cmdCmd := h.commandsComponent.Update(msg)
-	cmds = append(cmds, cmdCmd)
-
 	// Update viewport content
 	h.viewport.SetContent(h.commandsComponent.View())
 

packages/tui/internal/layout/flex.go

@@ -73,10 +73,7 @@ func Render(opts FlexOptions, items ...FlexItem) string {
 	}
 
 	// Calculate available space for grow items
-	availableSpace := mainAxisSize - totalFixedSize
-	if availableSpace < 0 {
-		availableSpace = 0
-	}
+	availableSpace := max(mainAxisSize-totalFixedSize, 0)
 
 	// Calculate size for each grow item
 	growItemSize := 0
@@ -164,10 +161,7 @@ func Render(opts FlexOptions, items ...FlexItem) string {
 	}
 
 	// Apply justification
-	remainingSpace := mainAxisSize - totalActualSize
-	if remainingSpace < 0 {
-		remainingSpace = 0
-	}
+	remainingSpace := max(mainAxisSize-totalActualSize, 0)
 
 	// Calculate spacing based on justification
 	var spaceBefore, spaceBetween, spaceAfter int

packages/tui/internal/tui/tui.go

@@ -17,6 +17,7 @@ import (
 	"github.com/sst/opencode/internal/commands"
 	"github.com/sst/opencode/internal/completions"
 	"github.com/sst/opencode/internal/components/chat"
+	cmdcomp "github.com/sst/opencode/internal/components/commands"
 	"github.com/sst/opencode/internal/components/dialog"
 	"github.com/sst/opencode/internal/components/modal"
 	"github.com/sst/opencode/internal/components/status"
@@ -425,13 +426,13 @@ func (a appModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 }
 
 func (a appModel) View() string {
-	messagesView := a.messages.View()
 	editorView := a.editor.View()
-
-	editorHeight := lipgloss.Height(editorView)
-	if editorHeight < 5 {
-		editorHeight = 5
+	lines := a.editor.Lines()
+	messagesView := a.messages.View()
+	if a.app.Session.ID == "" {
+		messagesView = a.home()
 	}
+	editorHeight := max(lines, 5)
 
 	t := theme.CurrentTheme()
 	centeredEditorView := lipgloss.PlaceHorizontal(
@@ -445,7 +446,7 @@ func (a appModel) View() string {
 		layout.FlexOptions{
 			Direction: layout.Column,
 			Width:     a.width,
-			Height:    a.height - 1, // Leave room for status bar
+			Height:    a.height,
 		},
 		layout.FlexItem{
 			View: messagesView,
@@ -453,15 +454,18 @@ func (a appModel) View() string {
 		},
 		layout.FlexItem{
 			View:      centeredEditorView,
-			FixedSize: editorHeight,
+			FixedSize: 5,
 		},
+		// layout.FlexItem{
+		// 	View:      a.status.View(),
+		// 	FixedSize: 1,
+		// },
 	)
 
-	if a.editor.Lines() > 1 {
+	if lines > 1 {
 		editorWidth := min(a.width, 80)
 		editorX := (a.width - editorWidth) / 2
-		editorY := a.height - editorHeight - 1 // Position from bottom, accounting for status bar
-
+		editorY := a.height - editorHeight
 		mainLayout = layout.PlaceOverlay(
 			editorX,
 			editorY,
@@ -476,7 +480,7 @@ func (a appModel) View() string {
 		a.completions.SetWidth(editorWidth)
 		overlay := a.completions.View()
 		overlayHeight := lipgloss.Height(overlay)
-		editorY := a.height - editorHeight - 1
+		editorY := a.height - editorHeight + 1
 
 		mainLayout = layout.PlaceOverlay(
 			editorX,
@@ -486,23 +490,82 @@ func (a appModel) View() string {
 		)
 	}
 
-	components := []string{
-		mainLayout,
-		a.status.View(),
-	}
-	appView := strings.Join(components, "\n")
-
 	if a.modal != nil {
-		appView = a.modal.Render(appView)
+		mainLayout = a.modal.Render(mainLayout)
 	}
-
-	appView = a.toastManager.RenderOverlay(appView)
-
+	mainLayout = a.toastManager.RenderOverlay(mainLayout)
 	if theme.CurrentThemeUsesAnsiColors() {
-		appView = util.ConvertRGBToAnsi16Colors(appView)
+		mainLayout = util.ConvertRGBToAnsi16Colors(mainLayout)
 	}
+	return mainLayout + "\n" + a.status.View()
+}
 
-	return appView
+func (a appModel) home() string {
+	t := theme.CurrentTheme()
+	baseStyle := styles.NewStyle().Background(t.Background())
+	base := baseStyle.Render
+	muted := styles.NewStyle().Foreground(t.TextMuted()).Background(t.Background()).Render
+
+	open := `
+█▀▀█ █▀▀█ █▀▀ █▀▀▄ 
+█░░█ █░░█ █▀▀ █░░█ 
+▀▀▀▀ █▀▀▀ ▀▀▀ ▀  ▀ `
+	code := `
+█▀▀ █▀▀█ █▀▀▄ █▀▀
+█░░ █░░█ █░░█ █▀▀
+▀▀▀ ▀▀▀▀ ▀▀▀  ▀▀▀`
+
+	logo := lipgloss.JoinHorizontal(
+		lipgloss.Top,
+		muted(open),
+		base(code),
+	)
+	// cwd := app.Info.Path.Cwd
+	// config := app.Info.Path.Config
+
+	versionStyle := styles.NewStyle().
+		Foreground(t.TextMuted()).
+		Background(t.Background()).
+		Width(lipgloss.Width(logo)).
+		Align(lipgloss.Right)
+	version := versionStyle.Render(a.app.Version)
+
+	logoAndVersion := strings.Join([]string{logo, version}, "\n")
+	logoAndVersion = lipgloss.PlaceHorizontal(
+		a.width,
+		lipgloss.Center,
+		logoAndVersion,
+		styles.WhitespaceStyle(t.Background()),
+	)
+	commandsView := cmdcomp.New(
+		a.app,
+		cmdcomp.WithBackground(t.Background()),
+		cmdcomp.WithLimit(6),
+	)
+	cmds := lipgloss.PlaceHorizontal(
+		a.width,
+		lipgloss.Center,
+		commandsView.View(),
+		styles.WhitespaceStyle(t.Background()),
+	)
+
+	lines := []string{}
+	lines = append(lines, logoAndVersion)
+	lines = append(lines, "")
+	lines = append(lines, "")
+	// lines = append(lines, base("cwd ")+muted(cwd))
+	// lines = append(lines, base("config ")+muted(config))
+	// lines = append(lines, "")
+	lines = append(lines, cmds)
+
+	return lipgloss.Place(
+		a.width,
+		a.height-5,
+		lipgloss.Center,
+		lipgloss.Center,
+		baseStyle.Render(strings.Join(lines, "\n")),
+		styles.WhitespaceStyle(t.Background()),
+	)
 }
 
 func (a appModel) executeCommand(command commands.Command) (tea.Model, tea.Cmd) {