fix(tui): better message rendering performance

Co-authored-by: Adam Spiers <opencode@adamspiers.org>

STATS.md

@@ -4,3 +4,4 @@
 | ---------- | ---------------- | --------------- | --------------- |
 | 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) |
+| 2025-07-01 | 22,108 (+1,981)  | 43,745 (+2,686) | 65,853 (+4,667) |

packages/opencode/src/app/app.ts

@@ -96,13 +96,16 @@ export namespace App {
     }
 
     return ctx.provide(app, async () => {
-      const result = await cb(app.info)
-      for (const [key, entry] of app.services.entries()) {
-        if (!entry.shutdown) continue
-        log.info("shutdown", { name: key })
-        await entry.shutdown?.(await entry.state)
+      try {
+        const result = await cb(app.info)
+        return result
+      } finally {
+        for (const [key, entry] of app.services.entries()) {
+          if (!entry.shutdown) continue
+          log.info("shutdown", { name: key })
+          await entry.shutdown?.(await entry.state)
+        }
       }
-      return result
     })
   }
 

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

@@ -1,18 +1,20 @@
 import { App } from "../../app/app"
 import { Ripgrep } from "../../file/ripgrep"
+import { File } from "../../file"
 import { LSP } from "../../lsp"
 import { Log } from "../../util/log"
 import { bootstrap } from "../bootstrap"
 import { cmd } from "./cmd"
+import path from "path"
 
 export const DebugCommand = cmd({
   command: "debug",
   builder: (yargs) =>
     yargs
       .command(DiagnosticsCommand)
-      .command(TreeCommand)
+      .command(RipgrepCommand)
       .command(SymbolsCommand)
-      .command(FilesCommand)
+      .command(FileReadCommand)
       .demandCommand(),
   async handler() {},
 })
@@ -23,26 +25,13 @@ const DiagnosticsCommand = cmd({
     yargs.positional("file", { type: "string", demandOption: true }),
   async handler(args) {
     await bootstrap({ cwd: process.cwd() }, async () => {
+      await LSP.touchFile(args.file, true)
       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 bootstrap({ cwd: process.cwd() }, async () => {
-      const app = App.info()
-      console.log(await Ripgrep.tree({ cwd: app.path.cwd, limit: args.limit }))
-    })
-  },
-})
-
 const SymbolsCommand = cmd({
   command: "symbols <query>",
   builder: (yargs) =>
@@ -57,6 +46,31 @@ const SymbolsCommand = cmd({
   },
 })
 
+const RipgrepCommand = cmd({
+  command: "rg",
+  builder: (yargs) =>
+    yargs
+      .command(TreeCommand)
+      .command(FilesCommand)
+      .command(SearchCommand)
+      .demandCommand(),
+  async handler() {},
+})
+
+const TreeCommand = cmd({
+  command: "tree",
+  builder: (yargs) =>
+    yargs.option("limit", {
+      type: "number",
+    }),
+  async handler(args) {
+    await bootstrap({ cwd: process.cwd() }, async () => {
+      const app = App.info()
+      console.log(await Ripgrep.tree({ cwd: app.path.cwd, limit: args.limit }))
+    })
+  },
+})
+
 const FilesCommand = cmd({
   command: "files",
   builder: (yargs) =>
@@ -86,3 +100,47 @@ const FilesCommand = cmd({
     })
   },
 })
+
+const SearchCommand = cmd({
+  command: "search <pattern>",
+  builder: (yargs) =>
+    yargs
+      .positional("pattern", {
+        type: "string",
+        demandOption: true,
+        description: "Search pattern",
+      })
+      .option("glob", {
+        type: "array",
+        description: "File glob patterns",
+      })
+      .option("limit", {
+        type: "number",
+        description: "Limit number of results",
+      }),
+  async handler(args) {
+    const results = await Ripgrep.search({
+      cwd: process.cwd(),
+      pattern: args.pattern,
+      glob: args.glob as string[] | undefined,
+      limit: args.limit,
+    })
+    console.log(JSON.stringify(results, null, 2))
+  },
+})
+
+const FileReadCommand = cmd({
+  command: "file-read <path>",
+  builder: (yargs) =>
+    yargs.positional("path", {
+      type: "string",
+      demandOption: true,
+      description: "File path to read",
+    }),
+  async handler(args) {
+    await bootstrap({ cwd: process.cwd() }, async () => {
+      const content = await File.read(path.resolve(args.path))
+      console.log(content)
+    })
+  },
+})

packages/opencode/src/file/index.ts

@@ -1,5 +1,8 @@
 import { z } from "zod"
 import { Bus } from "../bus"
+import { $ } from "bun"
+import { createPatch } from "diff"
+import path from "path"
 
 export namespace File {
   export const Event = {
@@ -10,4 +13,26 @@ export namespace File {
       }),
     ),
   }
+
+  export async function read(file: string) {
+    const content = await Bun.file(file).text()
+    const gitDiff = await $`git diff HEAD -- ${file}`
+      .cwd(path.dirname(file))
+      .quiet()
+      .nothrow()
+      .text()
+    if (gitDiff.trim()) {
+      const relativePath = path.relative(process.cwd(), file)
+      const originalContent = await $`git show HEAD:./${relativePath}`
+        .cwd(process.cwd())
+        .quiet()
+        .nothrow()
+        .text()
+      if (originalContent.trim()) {
+        const patch = createPatch(file, originalContent, content)
+        return patch
+      }
+    }
+    return content.trim()
+  }
 }

packages/opencode/src/file/ripgrep.ts

@@ -1,3 +1,4 @@
+// Ripgrep utility functions
 import path from "path"
 import { Global } from "../global"
 import fs from "fs/promises"
@@ -8,6 +9,82 @@ import { $ } from "bun"
 import { Fzf } from "./fzf"
 
 export namespace Ripgrep {
+  const Stats = z.object({
+    elapsed: z.object({
+      secs: z.number(),
+      nanos: z.number(),
+      human: z.string(),
+    }),
+    searches: z.number(),
+    searches_with_match: z.number(),
+    bytes_searched: z.number(),
+    bytes_printed: z.number(),
+    matched_lines: z.number(),
+    matches: z.number(),
+  })
+
+  const Begin = z.object({
+    type: z.literal("begin"),
+    data: z.object({
+      path: z.object({
+        text: z.string(),
+      }),
+    }),
+  })
+
+  const Match = z.object({
+    type: z.literal("match"),
+    data: z.object({
+      path: z.object({
+        text: z.string(),
+      }),
+      lines: z.object({
+        text: z.string(),
+      }),
+      line_number: z.number(),
+      absolute_offset: z.number(),
+      submatches: z.array(
+        z.object({
+          match: z.object({
+            text: z.string(),
+          }),
+          start: z.number(),
+          end: z.number(),
+        }),
+      ),
+    }),
+  })
+
+  const End = z.object({
+    type: z.literal("end"),
+    data: z.object({
+      path: z.object({
+        text: z.string(),
+      }),
+      binary_offset: z.number().nullable(),
+      stats: Stats,
+    }),
+  })
+
+  const Summary = z.object({
+    type: z.literal("summary"),
+    data: z.object({
+      elapsed_total: z.object({
+        human: z.string(),
+        nanos: z.number(),
+        secs: z.number(),
+      }),
+      stats: Stats,
+    }),
+  })
+
+  const Result = z.union([Begin, Match, End, Summary])
+
+  export type Result = z.infer<typeof Result>
+  export type Match = z.infer<typeof Match>
+  export type Begin = z.infer<typeof Begin>
+  export type End = z.infer<typeof End>
+  export type Summary = z.infer<typeof Summary>
   const PLATFORM = {
     darwin: { platform: "apple-darwin", extension: "tar.gz" },
     linux: { platform: "unknown-linux-musl", extension: "tar.gz" },
@@ -229,4 +306,45 @@ export namespace Ripgrep {
 
     return lines.join("\n")
   }
+
+  export async function search(input: {
+    cwd: string
+    pattern: string
+    glob?: string[]
+    limit?: number
+  }) {
+    const args = [
+      `${await filepath()}`,
+      "--json",
+      "--hidden",
+      "--glob='!.git/*'",
+    ]
+
+    if (input.glob) {
+      for (const g of input.glob) {
+        args.push(`--glob=${g}`)
+      }
+    }
+
+    if (input.limit) {
+      args.push(`--max-count=${input.limit}`)
+    }
+
+    args.push(input.pattern)
+
+    const command = args.join(" ")
+    const result = await $`${{ raw: command }}`.cwd(input.cwd).quiet().nothrow()
+    if (result.exitCode !== 0) {
+      return []
+    }
+
+    const lines = result.text().trim().split("\n").filter(Boolean)
+    // Parse JSON lines from ripgrep output
+
+    return lines
+      .map((line) => JSON.parse(line))
+      .map((parsed) => Result.parse(parsed))
+      .filter((r) => r.type === "match")
+      .map((r) => r.data)
+  }
 }

packages/opencode/src/lsp/client.ts

@@ -12,6 +12,7 @@ import { Bus } from "../bus"
 import z from "zod"
 import type { LSPServer } from "./server"
 import { NamedError } from "../util/error"
+import { withTimeout } from "../util/timeout"
 
 export namespace LSPClient {
   const log = Log.create({ service: "lsp.client" })
@@ -52,7 +53,9 @@ export namespace LSPClient {
       log.info("textDocument/publishDiagnostics", {
         path,
       })
+      const exists = diagnostics.has(path)
       diagnostics.set(path, params.diagnostics)
+      if (!exists && serverID === "typescript") return
       Bus.publish(Event.Diagnostics, { path, serverID })
     })
     connection.onRequest("workspace/configuration", async () => {
@@ -61,7 +64,7 @@ export namespace LSPClient {
     connection.listen()
 
     log.info("sending initialize", { id: serverID })
-    await Promise.race([
+    await withTimeout(
       connection.sendRequest("initialize", {
         processId: server.process.pid,
         workspaceFolders: [
@@ -88,12 +91,10 @@ export namespace LSPClient {
           },
         },
       }),
-      new Promise((_, reject) => {
-        setTimeout(() => {
-          reject(new InitializeError({ serverID }))
-        }, 5_000)
-      }),
-    ])
+      5_000,
+    ).catch(() => {
+      throw new InitializeError({ serverID })
+    })
     await connection.sendNotification("initialized", {})
     log.info("initialized")
 
@@ -116,36 +117,28 @@ export namespace LSPClient {
           const file = Bun.file(input.path)
           const text = await file.text()
           const version = files[input.path]
-          if (version === undefined) {
-            log.info("textDocument/didOpen", input)
+          if (version !== undefined) {
             diagnostics.delete(input.path)
-            const extension = path.extname(input.path)
-            const languageId = LANGUAGE_EXTENSIONS[extension] ?? "plaintext"
-            await connection.sendNotification("textDocument/didOpen", {
+            await connection.sendNotification("textDocument/didClose", {
               textDocument: {
                 uri: `file://` + input.path,
-                languageId,
-                version: 0,
-                text,
               },
             })
-            files[input.path] = 0
-            return
           }
-
-          log.info("textDocument/didChange", input)
+          log.info("textDocument/didOpen", input)
           diagnostics.delete(input.path)
-          await connection.sendNotification("textDocument/didChange", {
+          const extension = path.extname(input.path)
+          const languageId = LANGUAGE_EXTENSIONS[extension] ?? "plaintext"
+          await connection.sendNotification("textDocument/didOpen", {
             textDocument: {
               uri: `file://` + input.path,
-              version: ++files[input.path],
+              languageId,
+              version: 0,
+              text,
             },
-            contentChanges: [
-              {
-                text,
-              },
-            ],
           })
+          files[input.path] = 0
+          return
         },
       },
       get diagnostics() {
@@ -157,35 +150,30 @@ export namespace LSPClient {
           : path.resolve(app.path.cwd, input.path)
         log.info("waiting for diagnostics", input)
         let unsub: () => void
-        let timeout: NodeJS.Timeout
-        return await Promise.race([
-          new Promise<void>(async (resolve) => {
+        return await withTimeout(
+          new Promise<void>((resolve) => {
             unsub = Bus.subscribe(Event.Diagnostics, (event) => {
               if (
                 event.properties.path === input.path &&
                 event.properties.serverID === result.serverID
               ) {
                 log.info("got diagnostics", input)
-                clearTimeout(timeout)
                 unsub?.()
                 resolve()
               }
             })
           }),
-          new Promise<void>((resolve) => {
-            timeout = setTimeout(() => {
-              log.info("timed out refreshing diagnostics", input)
-              unsub?.()
-              resolve()
-            }, 5000)
-          }),
-        ])
+          5000,
+        ).finally(() => {
+          unsub?.()
+        })
       },
       async shutdown() {
-        log.info("shutting down")
+        log.info("shutting down", { serverID })
         connection.end()
         connection.dispose()
         server.process.kill("SIGTERM")
+        log.info("shutdown", { serverID })
       },
     }
 

packages/opencode/src/lsp/index.ts

@@ -10,13 +10,29 @@ export namespace LSP {
 
   const state = App.state(
     "lsp",
-    async () => {
+    async (app) => {
       log.info("initializing")
       const clients = new Map<string, LSPClient.Info>()
-      const skip = new Set<string>()
+      for (const server of Object.values(LSPServer)) {
+        for (const extension of server.extensions) {
+          const [file] = await Ripgrep.files({
+            cwd: app.path.cwd,
+            glob: "*" + extension,
+          })
+          if (!file) continue
+          const handle = await server.spawn(App.info())
+          if (!handle) break
+          const client = await LSPClient.create(server.id, handle).catch(
+            () => {},
+          )
+          if (!client) break
+          clients.set(server.id, client)
+          break
+        }
+      }
+      log.info("initialized")
       return {
         clients,
-        skip,
       }
     },
     async (state) => {
@@ -27,49 +43,22 @@ export namespace LSP {
   )
 
   export async function init() {
-    log.info("init")
-    const app = App.info()
-    const result = Object.values(LSPServer).map(async (x) => {
-      for (const extension of x.extensions) {
-        const [file] = await Ripgrep.files({
-          cwd: app.path.cwd,
-          glob: "*" + extension,
-        })
-        if (!file) continue
-        await LSP.touchFile(file, true)
-        break
-      }
-    })
-    return Promise.all(result)
+    return state()
   }
 
   export async function touchFile(input: string, waitForDiagnostics?: boolean) {
     const extension = path.parse(input).ext
-    const s = await state()
-    const matches = Object.values(LSPServer).filter((x) =>
-      x.extensions.includes(extension),
-    )
-    for (const match of matches) {
-      const existing = s.clients.get(match.id)
-      if (existing) continue
-      if (s.skip.has(match.id)) continue
-      s.skip.add(match.id)
-      const handle = await match.spawn(App.info())
-      if (!handle) continue
-      const client = await LSPClient.create(match.id, handle).catch(() => {})
-      if (!client) {
-        s.skip.add(match.id)
-        continue
-      }
-      s.clients.set(match.id, client)
-    }
-    if (waitForDiagnostics) {
-      await run(async (client) => {
-        const wait = client.waitForDiagnostics({ path: input })
-        await client.notify.open({ path: input })
-        return wait
-      })
-    }
+    const matches = Object.values(LSPServer)
+      .filter((x) => x.extensions.includes(extension))
+      .map((x) => x.id)
+    await run(async (client) => {
+      if (!matches.includes(client.serverID)) return
+      const wait = waitForDiagnostics
+        ? client.waitForDiagnostics({ path: input })
+        : Promise.resolve()
+      await client.notify.open({ path: input })
+      return wait
+    })
   }
 
   export async function diagnostics() {

packages/opencode/src/tool/read.ts

@@ -89,7 +89,7 @@ export const ReadTool = Tool.define({
     output += "\n</file>"
 
     // just warms the lsp client
-    await LSP.touchFile(filePath, true)
+    await LSP.touchFile(filePath, false)
     FileTime.read(ctx.sessionID, filePath)
 
     return {

packages/opencode/src/util/timeout.ts

@@ -0,0 +1,14 @@
+export function withTimeout<T>(promise: Promise<T>, ms: number): Promise<T> {
+  let timeout: NodeJS.Timeout
+  return Promise.race([
+    promise.then((result) => {
+      clearTimeout(timeout)
+      return result
+    }),
+    new Promise<never>((_, reject) => {
+      timeout = setTimeout(() => {
+        reject(new Error(`Operation timed out after ${ms}ms`))
+      }, ms)
+    }),
+  ])
+}

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

@@ -21,9 +21,10 @@ import (
 
 type EditorComponent interface {
 	tea.Model
-	tea.ViewModel
+	// tea.ViewModel
 	SetSize(width, height int) tea.Cmd
-	Content() string
+	View(width int, align lipgloss.Position) string
+	Content(width int, align lipgloss.Position) string
 	Lines() int
 	Value() string
 	Focused() bool
@@ -105,7 +106,7 @@ func (m *editorComponent) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 	return m, tea.Batch(cmds...)
 }
 
-func (m *editorComponent) Content() string {
+func (m *editorComponent) Content(width int, align lipgloss.Position) string {
 	t := theme.CurrentTheme()
 	base := styles.NewStyle().Foreground(t.Text()).Background(t.Background()).Render
 	muted := styles.NewStyle().Foreground(t.TextMuted()).Background(t.Background()).Render
@@ -121,7 +122,7 @@ func (m *editorComponent) Content() string {
 	)
 	textarea = styles.NewStyle().
 		Background(t.BackgroundElement()).
-		Width(m.width).
+		Width(width).
 		PaddingTop(1).
 		PaddingBottom(1).
 		BorderStyle(lipgloss.ThickBorder()).
@@ -156,19 +157,19 @@ func (m *editorComponent) Content() string {
 	return content
 }
 
-func (m *editorComponent) View() string {
+func (m *editorComponent) View(width int, align lipgloss.Position) string {
 	if m.Lines() > 1 {
 		t := theme.CurrentTheme()
 		return lipgloss.Place(
-			m.width,
+			width,
 			m.height,
-			lipgloss.Center,
+			align,
 			lipgloss.Center,
 			"",
 			styles.WhitespaceStyle(t.Background()),
 		)
 	}
-	return m.Content()
+	return m.Content(width, align)
 }
 
 func (m *editorComponent) Focused() bool {
@@ -343,7 +344,6 @@ func createTextArea(existing *textarea.Model) textarea.Model {
 		ta.SetHeight(existing.Height())
 	}
 
-	// ta.Focus()
 	return ta
 }
 

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

@@ -2,9 +2,7 @@ package chat
 
 import (
 	"strings"
-	"time"
 
-	"github.com/charmbracelet/bubbles/v2/spinner"
 	"github.com/charmbracelet/bubbles/v2/viewport"
 	tea "github.com/charmbracelet/bubbletea/v2"
 	"github.com/charmbracelet/lipgloss/v2"
@@ -20,6 +18,7 @@ import (
 type MessagesComponent interface {
 	tea.Model
 	tea.ViewModel
+	// View(width int) string
 	SetSize(width, height int) tea.Cmd
 	PageUp() (tea.Model, tea.Cmd)
 	PageDown() (tea.Model, tea.Cmd)
@@ -36,7 +35,6 @@ type messagesComponent struct {
 	width, height   int
 	app             *app.App
 	viewport        viewport.Model
-	spinner         spinner.Model
 	attachments     viewport.Model
 	cache           *MessageCache
 	rendering       bool
@@ -47,7 +45,7 @@ type renderFinishedMsg struct{}
 type ToggleToolDetailsMsg struct{}
 
 func (m *messagesComponent) Init() tea.Cmd {
-	return tea.Batch(m.viewport.Init(), m.spinner.Tick)
+	return tea.Batch(m.viewport.Init())
 }
 
 func (m *messagesComponent) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
@@ -94,10 +92,6 @@ func (m *messagesComponent) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 	m.tail = m.viewport.AtBottom()
 	cmds = append(cmds, cmd)
 
-	spinner, cmd := m.spinner.Update(msg)
-	m.spinner = spinner
-	cmds = append(cmds, cmd)
-
 	return m, tea.Batch(cmds...)
 }
 
@@ -110,14 +104,15 @@ func (m *messagesComponent) renderView() {
 	defer measure("messageCount", len(m.app.Messages))
 
 	t := theme.CurrentTheme()
-	blocks := make([]string, 0)
 
 	align := lipgloss.Center
 	width := layout.Current.Container.Width
 
-	for _, message := range m.app.Messages {
+	sb := strings.Builder{}
+	util.WriteStringsPar(&sb, m.app.Messages, func(message opencode.Message) string {
 		var content string
 		var cached bool
+		blocks := make([]string, 0)
 
 		switch message.Role {
 		case opencode.MessageRoleUser:
@@ -230,7 +225,6 @@ func (m *messagesComponent) renderView() {
 					}
 				}
 			}
-
 		}
 
 		error := ""
@@ -253,20 +247,14 @@ func (m *messagesComponent) renderView() {
 			)
 			blocks = append(blocks, error)
 		}
-	}
 
-	centered := []string{}
-	for _, block := range blocks {
-		centered = append(centered, lipgloss.PlaceHorizontal(
-			m.width,
-			lipgloss.Center,
-			block+"\n",
-			styles.WhitespaceStyle(t.Background()),
-		))
-	}
+		return strings.Join(blocks, "\n\n")
+	})
+
+	content := sb.String()
 
 	m.viewport.SetHeight(m.height - lipgloss.Height(m.header()) + 1)
-	m.viewport.SetContent("\n" + strings.Join(centered, "\n"))
+	m.viewport.SetContent("\n" + content)
 }
 
 func (m *messagesComponent) header() string {
@@ -307,10 +295,10 @@ func (m *messagesComponent) View() string {
 	if m.rendering {
 		return lipgloss.Place(
 			m.width,
-			m.height,
+			m.height+1,
 			lipgloss.Center,
 			lipgloss.Center,
-			"Loading session...",
+			styles.NewStyle().Background(t.Background()).Render("Loading session..."),
 			styles.WhitespaceStyle(t.Background()),
 		)
 	}
@@ -392,12 +380,6 @@ func (m *messagesComponent) ToolDetailsVisible() bool {
 }
 
 func NewMessagesComponent(app *app.App) MessagesComponent {
-	customSpinner := spinner.Spinner{
-		Frames: []string{" ", "┃", "┃"},
-		FPS:    time.Second / 3,
-	}
-	s := spinner.New(spinner.WithSpinner(customSpinner))
-
 	vp := viewport.New()
 	attachments := viewport.New()
 	vp.KeyMap = viewport.KeyMap{}
@@ -405,7 +387,6 @@ func NewMessagesComponent(app *app.App) MessagesComponent {
 	return &messagesComponent{
 		app:             app,
 		viewport:        vp,
-		spinner:         s,
 		attachments:     attachments,
 		showToolDetails: true,
 		cache:           NewMessageCache(),

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

@@ -3,13 +3,11 @@ package dialog
 import (
 	"context"
 	"fmt"
-	"maps"
-	"slices"
-	"strings"
+	"sort"
+	"time"
 
 	"github.com/charmbracelet/bubbles/v2/key"
 	tea "github.com/charmbracelet/bubbletea/v2"
-	"github.com/charmbracelet/lipgloss/v2"
 	"github.com/sst/opencode-sdk-go"
 	"github.com/sst/opencode/internal/app"
 	"github.com/sst/opencode/internal/components/list"
@@ -21,8 +19,9 @@ import (
 )
 
 const (
-	numVisibleModels = 6
-	maxDialogWidth   = 40
+	numVisibleModels = 10
+	minDialogWidth   = 40
+	maxDialogWidth   = 80
 )
 
 // ModelDialog interface for the model selection dialog
@@ -31,33 +30,61 @@ type ModelDialog interface {
 }
 
 type modelDialog struct {
-	app                *app.App
-	availableProviders []opencode.Provider
-	provider           opencode.Provider
-	width              int
-	height             int
-	hScrollOffset      int
-	hScrollPossible    bool
-	modal              *modal.Modal
-	modelList          list.List[list.StringItem]
+	app         *app.App
+	allModels   []ModelWithProvider
+	width       int
+	height      int
+	modal       *modal.Modal
+	modelList   list.List[ModelItem]
+	dialogWidth int
+}
+
+type ModelWithProvider struct {
+	Model    opencode.Model
+	Provider opencode.Provider
+}
+
+type ModelItem struct {
+	ModelName    string
+	ProviderName string
+}
+
+func (m ModelItem) Render(selected bool, width int) string {
+	t := theme.CurrentTheme()
+
+	if selected {
+		displayText := fmt.Sprintf("%s (%s)", m.ModelName, m.ProviderName)
+		return styles.NewStyle().
+			Background(t.Primary()).
+			Foreground(t.BackgroundElement()).
+			Width(width).
+			PaddingLeft(1).
+			Render(displayText)
+	} else {
+		modelStyle := styles.NewStyle().
+			Foreground(t.Text()).
+			Background(t.BackgroundElement())
+		providerStyle := styles.NewStyle().
+			Foreground(t.TextMuted()).
+			Background(t.BackgroundElement())
+
+		modelPart := modelStyle.Render(m.ModelName)
+		providerPart := providerStyle.Render(fmt.Sprintf(" (%s)", m.ProviderName))
+
+		combinedText := modelPart + providerPart
+		return styles.NewStyle().
+			Background(t.BackgroundElement()).
+			PaddingLeft(1).
+			Render(combinedText)
+	}
 }
 
 type modelKeyMap struct {
-	Left   key.Binding
-	Right  key.Binding
 	Enter  key.Binding
 	Escape key.Binding
 }
 
 var modelKeys = modelKeyMap{
-	Left: key.NewBinding(
-		key.WithKeys("left", "h"),
-		key.WithHelp("←", "scroll left"),
-	),
-	Right: key.NewBinding(
-		key.WithKeys("right", "l"),
-		key.WithHelp("→", "scroll right"),
-	),
 	Enter: key.NewBinding(
 		key.WithKeys("enter"),
 		key.WithHelp("enter", "select model"),
@@ -69,7 +96,7 @@ var modelKeys = modelKeyMap{
 }
 
 func (m *modelDialog) Init() tea.Cmd {
-	m.setupModelsForProvider(m.provider.ID)
+	m.setupAllModels()
 	return nil
 }
 
@@ -77,34 +104,20 @@ func (m *modelDialog) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 	switch msg := msg.(type) {
 	case tea.KeyMsg:
 		switch {
-		case key.Matches(msg, modelKeys.Left):
-			if m.hScrollPossible {
-				m.switchProvider(-1)
-			}
-			return m, nil
-		case key.Matches(msg, modelKeys.Right):
-			if m.hScrollPossible {
-				m.switchProvider(1)
-			}
-			return m, nil
 		case key.Matches(msg, modelKeys.Enter):
-			selectedItem, _ := m.modelList.GetSelectedItem()
-			models := m.models()
-			var selectedModel opencode.Model
-			for _, model := range models {
-				if model.Name == string(selectedItem) {
-					selectedModel = model
-					break
-				}
+			_, selectedIndex := m.modelList.GetSelectedItem()
+			if selectedIndex >= 0 && selectedIndex < len(m.allModels) {
+				selectedModel := m.allModels[selectedIndex]
+				return m, tea.Sequence(
+					util.CmdHandler(modal.CloseModalMsg{}),
+					util.CmdHandler(
+						app.ModelSelectedMsg{
+							Provider: selectedModel.Provider,
+							Model:    selectedModel.Model,
+						}),
+				)
 			}
-			return m, tea.Sequence(
-				util.CmdHandler(modal.CloseModalMsg{}),
-				util.CmdHandler(
-					app.ModelSelectedMsg{
-						Provider: m.provider,
-						Model:    selectedModel,
-					}),
-			)
+			return m, util.CmdHandler(modal.CloseModalMsg{})
 		case key.Matches(msg, modelKeys.Escape):
 			return m, util.CmdHandler(modal.CloseModalMsg{})
 		}
@@ -115,74 +128,124 @@ func (m *modelDialog) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 
 	// Update the list component
 	updatedList, cmd := m.modelList.Update(msg)
-	m.modelList = updatedList.(list.List[list.StringItem])
+	m.modelList = updatedList.(list.List[ModelItem])
 	return m, cmd
 }
 
-func (m *modelDialog) models() []opencode.Model {
-	models := slices.SortedFunc(maps.Values(m.provider.Models), func(a, b opencode.Model) int {
-		return strings.Compare(a.Name, b.Name)
-	})
-	return models
-}
-
-func (m *modelDialog) switchProvider(offset int) {
-	newOffset := m.hScrollOffset + offset
-
-	if newOffset < 0 {
-		newOffset = len(m.availableProviders) - 1
-	}
-	if newOffset >= len(m.availableProviders) {
-		newOffset = 0
-	}
-
-	m.hScrollOffset = newOffset
-	m.provider = m.availableProviders[m.hScrollOffset]
-	m.modal.SetTitle(fmt.Sprintf("Select %s Model", m.provider.Name))
-	m.setupModelsForProvider(m.provider.ID)
-}
-
 func (m *modelDialog) View() string {
-	listView := m.modelList.View()
-	scrollIndicator := m.getScrollIndicators(maxDialogWidth)
-	return strings.Join([]string{listView, scrollIndicator}, "\n")
+	return m.modelList.View()
 }
 
-func (m *modelDialog) getScrollIndicators(maxWidth int) string {
-	var indicator string
-	if m.hScrollPossible {
-		indicator = "← → (switch provider) "
-	}
-	if indicator == "" {
-		return ""
-	}
+func (m *modelDialog) calculateOptimalWidth(modelItems []ModelItem) int {
+	maxWidth := minDialogWidth
 
-	t := theme.CurrentTheme()
-	return styles.NewStyle().
-		Foreground(t.TextMuted()).
-		Width(maxWidth).
-		Align(lipgloss.Right).
-		Render(indicator)
-}
-
-func (m *modelDialog) setupModelsForProvider(providerId string) {
-	models := m.models()
-	modelNames := make([]string, len(models))
-	for i, model := range models {
-		modelNames[i] = model.Name
-	}
-
-	m.modelList = list.NewStringList(modelNames, numVisibleModels, "No models available", true)
-	m.modelList.SetMaxWidth(maxDialogWidth)
-
-	if m.app.Provider != nil && m.app.Model != nil && m.app.Provider.ID == providerId {
-		for i, model := range models {
-			if model.ID == m.app.Model.ID {
-				m.modelList.SetSelectedIndex(i)
-				break
-			}
+	for _, item := range modelItems {
+		// Calculate the width needed for this item: "ModelName (ProviderName)"
+		// Add 4 for the parentheses, space, and some padding
+		itemWidth := len(item.ModelName) + len(item.ProviderName) + 4
+		if itemWidth > maxWidth {
+			maxWidth = itemWidth
 		}
 	}
+
+	if maxWidth > maxDialogWidth {
+		maxWidth = maxDialogWidth
+	}
+
+	return maxWidth
+}
+
+func (m *modelDialog) setupAllModels() {
+	providers, _ := m.app.ListProviders(context.Background())
+
+	m.allModels = make([]ModelWithProvider, 0)
+	for _, provider := range providers {
+		for _, model := range provider.Models {
+			m.allModels = append(m.allModels, ModelWithProvider{
+				Model:    model,
+				Provider: provider,
+			})
+		}
+	}
+
+	m.sortModels()
+
+	modelItems := make([]ModelItem, len(m.allModels))
+	for i, modelWithProvider := range m.allModels {
+		modelItems[i] = ModelItem{
+			ModelName:    modelWithProvider.Model.Name,
+			ProviderName: modelWithProvider.Provider.Name,
+		}
+	}
+
+	m.dialogWidth = m.calculateOptimalWidth(modelItems)
+
+	m.modelList = list.NewListComponent(modelItems, numVisibleModels, "No models available", true)
+	m.modelList.SetMaxWidth(m.dialogWidth)
+
+	if len(m.allModels) > 0 {
+		m.modelList.SetSelectedIndex(0)
+	}
+}
+
+func (m *modelDialog) sortModels() {
+	sort.Slice(m.allModels, func(i, j int) bool {
+		modelA := m.allModels[i]
+		modelB := m.allModels[j]
+
+		usageA := m.getModelUsageTime(modelA.Provider.ID, modelA.Model.ID)
+		usageB := m.getModelUsageTime(modelB.Provider.ID, modelB.Model.ID)
+
+		// If both have usage times, sort by most recent first
+		if !usageA.IsZero() && !usageB.IsZero() {
+			return usageA.After(usageB)
+		}
+
+		// If only one has usage time, it goes first
+		if !usageA.IsZero() && usageB.IsZero() {
+			return true
+		}
+		if usageA.IsZero() && !usageB.IsZero() {
+			return false
+		}
+
+		// If neither has usage time, sort by release date desc if available
+		if modelA.Model.ReleaseDate != "" && modelB.Model.ReleaseDate != "" {
+			dateA := m.parseReleaseDate(modelA.Model.ReleaseDate)
+			dateB := m.parseReleaseDate(modelB.Model.ReleaseDate)
+			if !dateA.IsZero() && !dateB.IsZero() {
+				return dateA.After(dateB)
+			}
+		}
+
+		// If only one has release date, it goes first
+		if modelA.Model.ReleaseDate != "" && modelB.Model.ReleaseDate == "" {
+			return true
+		}
+		if modelA.Model.ReleaseDate == "" && modelB.Model.ReleaseDate != "" {
+			return false
+		}
+
+		// If neither has usage time nor release date, fall back to alphabetical sorting
+		return modelA.Model.Name < modelB.Model.Name
+	})
+}
+
+func (m *modelDialog) parseReleaseDate(dateStr string) time.Time {
+	if parsed, err := time.Parse("2006-01-02", dateStr); err == nil {
+		return parsed
+	}
+
+	return time.Time{}
+}
+
+func (m *modelDialog) getModelUsageTime(providerID, modelID string) time.Time {
+	for _, usage := range m.app.State.RecentlyUsedModels {
+		if usage.ProviderID == providerID && usage.ModelID == modelID {
+			return usage.LastUsed
+		}
+	}
+	return time.Time{}
 }
 
 func (m *modelDialog) Render(background string) string {
@@ -194,32 +257,16 @@ func (s *modelDialog) Close() tea.Cmd {
 }
 
 func NewModelDialog(app *app.App) ModelDialog {
-	availableProviders, _ := app.ListProviders(context.Background())
-
-	currentProvider := availableProviders[0]
-	hScrollOffset := 0
-	if app.Provider != nil {
-		for i, provider := range availableProviders {
-			if provider.ID == app.Provider.ID {
-				currentProvider = provider
-				hScrollOffset = i
-				break
-			}
-		}
-	}
-
 	dialog := &modelDialog{
-		app:                app,
-		availableProviders: availableProviders,
-		hScrollOffset:      hScrollOffset,
-		hScrollPossible:    len(availableProviders) > 1,
-		provider:           currentProvider,
-		modal: modal.New(
-			modal.WithTitle(fmt.Sprintf("Select %s Model", currentProvider.Name)),
-			modal.WithMaxWidth(maxDialogWidth+4),
-		),
+		app: app,
 	}
 
-	dialog.setupModelsForProvider(currentProvider.ID)
+	dialog.setupAllModels()
+
+	dialog.modal = modal.New(
+		modal.WithTitle("Select Model"),
+		modal.WithMaxWidth(dialog.dialogWidth+4),
+	)
+
 	return dialog
 }

packages/tui/internal/components/diff/diff.go

@@ -1,6 +1,7 @@
 package diff
 
 import (
+	"bufio"
 	"bytes"
 	"fmt"
 	"image/color"
@@ -148,101 +149,87 @@ func WithWidth(width int) UnifiedOption {
 func ParseUnifiedDiff(diff string) (DiffResult, error) {
 	var result DiffResult
 	var currentHunk *Hunk
+	result.Hunks = make([]Hunk, 0, 10) // Pre-allocate with a reasonable capacity
 
-	hunkHeaderRe := regexp.MustCompile(`^@@ -(\d+),?(\d*) \+(\d+),?(\d*) @@`)
-	lines := strings.Split(diff, "\n")
-
+	scanner := bufio.NewScanner(strings.NewReader(diff))
 	var oldLine, newLine int
 	inFileHeader := true
 
-	for _, line := range lines {
-		// Parse file headers
+	for scanner.Scan() {
+		line := scanner.Text()
+
 		if inFileHeader {
 			if strings.HasPrefix(line, "--- a/") {
-				result.OldFile = strings.TrimPrefix(line, "--- a/")
+				result.OldFile = line[6:]
 				continue
 			}
 			if strings.HasPrefix(line, "+++ b/") {
-				result.NewFile = strings.TrimPrefix(line, "+++ b/")
+				result.NewFile = line[6:]
 				inFileHeader = false
 				continue
 			}
 		}
 
-		// Parse hunk headers
-		if matches := hunkHeaderRe.FindStringSubmatch(line); matches != nil {
+		if strings.HasPrefix(line, "@@") {
 			if currentHunk != nil {
 				result.Hunks = append(result.Hunks, *currentHunk)
 			}
 			currentHunk = &Hunk{
 				Header: line,
-				Lines:  []DiffLine{},
+				Lines:  make([]DiffLine, 0, 10), // Pre-allocate
 			}
 
-			oldStart, _ := strconv.Atoi(matches[1])
-			newStart, _ := strconv.Atoi(matches[3])
-			oldLine = oldStart
-			newLine = newStart
+			// Manual parsing of hunk header is faster than regex
+			parts := strings.Split(line, " ")
+			if len(parts) > 2 {
+				oldRange := strings.Split(parts[1][1:], ",")
+				newRange := strings.Split(parts[2][1:], ",")
+				oldLine, _ = strconv.Atoi(oldRange[0])
+				newLine, _ = strconv.Atoi(newRange[0])
+			}
 			continue
 		}
 
-		// Ignore "No newline at end of file" markers
-		if strings.HasPrefix(line, "\\ No newline at end of file") {
+		if strings.HasPrefix(line, "\\ No newline at end of file") || currentHunk == nil {
 			continue
 		}
 
-		if currentHunk == nil {
-			continue
-		}
-
-		// Process the line based on its prefix
+		var dl DiffLine
+		dl.Content = line
 		if len(line) > 0 {
 			switch line[0] {
 			case '+':
-				currentHunk.Lines = append(currentHunk.Lines, DiffLine{
-					OldLineNo: 0,
-					NewLineNo: newLine,
-					Kind:      LineAdded,
-					Content:   line[1:],
-				})
+				dl.Kind = LineAdded
+				dl.NewLineNo = newLine
+				dl.Content = line[1:]
 				newLine++
 			case '-':
-				currentHunk.Lines = append(currentHunk.Lines, DiffLine{
-					OldLineNo: oldLine,
-					NewLineNo: 0,
-					Kind:      LineRemoved,
-					Content:   line[1:],
-				})
+				dl.Kind = LineRemoved
+				dl.OldLineNo = oldLine
+				dl.Content = line[1:]
 				oldLine++
-			default:
-				currentHunk.Lines = append(currentHunk.Lines, DiffLine{
-					OldLineNo: oldLine,
-					NewLineNo: newLine,
-					Kind:      LineContext,
-					Content:   line,
-				})
+			default: // context line
+				dl.Kind = LineContext
+				dl.OldLineNo = oldLine
+				dl.NewLineNo = newLine
 				oldLine++
 				newLine++
 			}
-		} else {
-			// Handle empty lines
-			currentHunk.Lines = append(currentHunk.Lines, DiffLine{
-				OldLineNo: oldLine,
-				NewLineNo: newLine,
-				Kind:      LineContext,
-				Content:   "",
-			})
+		} else { // empty context line
+			dl.Kind = LineContext
+			dl.OldLineNo = oldLine
+			dl.NewLineNo = newLine
 			oldLine++
 			newLine++
 		}
+		currentHunk.Lines = append(currentHunk.Lines, dl)
 	}
 
-	// Add the last hunk if there is one
 	if currentHunk != nil {
 		result.Hunks = append(result.Hunks, *currentHunk)
 	}
 
-	return result, nil
+	return result, scanner.Err()
 }
 
 // HighlightIntralineChanges updates lines in a hunk to show character-level differences
@@ -744,8 +731,6 @@ func renderLineContent(fileName string, dl DiffLine, bgStyle stylesi.Style, high
 			content,
 			width,
 			"...",
-			// stylesi.NewStyleWithColors(t.TextMuted(), bgStyle.GetBackground()).Render("..."),
-			// stylesi.WithForeground(stylesi.NewStyle().Background(bgStyle.GetBackground()), t.TextMuted()).Render("..."),
 		),
 	)
 }
@@ -912,10 +897,11 @@ func RenderUnifiedHunk(fileName string, h Hunk, opts ...UnifiedOption) string {
 	HighlightIntralineChanges(&hunkCopy)
 
 	var sb strings.Builder
-	for _, line := range hunkCopy.Lines {
-		sb.WriteString(renderUnifiedLine(fileName, line, config.Width, theme.CurrentTheme()))
-		sb.WriteString("\n")
-	}
+	sb.Grow(len(hunkCopy.Lines) * config.Width)
+
+	util.WriteStringsPar(&sb, hunkCopy.Lines, func(line DiffLine) string {
+		return renderUnifiedLine(fileName, line, config.Width, theme.CurrentTheme()) + "\n"
+	})
 
 	return sb.String()
 }
@@ -969,32 +955,22 @@ func FormatUnifiedDiff(filename string, diffText string, opts ...UnifiedOption)
 	}
 
 	var sb strings.Builder
-	for _, h := range diffResult.Hunks {
-		unifiedDiff := RenderUnifiedHunk(filename, h, opts...)
-		sb.WriteString(unifiedDiff)
-	}
+	util.WriteStringsPar(&sb, diffResult.Hunks, func(h Hunk) string {
+		return RenderUnifiedHunk(filename, h, opts...)
+	})
 
 	return sb.String(), nil
 }
 
 // FormatDiff creates a side-by-side formatted view of a diff
 func FormatDiff(filename string, diffText string, opts ...SideBySideOption) (string, error) {
-	// t := theme.CurrentTheme()
 	diffResult, err := ParseUnifiedDiff(diffText)
 	if err != nil {
 		return "", err
 	}
 
 	var sb strings.Builder
-	// config := NewSideBySideConfig(opts...)
 	util.WriteStringsPar(&sb, diffResult.Hunks, func(h Hunk) string {
-		// sb.WriteString(
-		// 	lipgloss.NewStyle().
-		// 		Background(t.DiffHunkHeader()).
-		// 		Foreground(t.Background()).
-		// 		Width(config.TotalWidth).
-		// 		Render(h.Header) + "\n",
-		// )
 		return RenderSideBySideHunk(filename, h, opts...)
 	})
 

packages/tui/internal/config/config.go

@@ -5,19 +5,56 @@ import (
 	"fmt"
 	"log/slog"
 	"os"
+	"time"
 
 	"github.com/BurntSushi/toml"
 )
 
+type ModelUsage struct {
+	ProviderID string    `toml:"provider_id"`
+	ModelID    string    `toml:"model_id"`
+	LastUsed   time.Time `toml:"last_used"`
+}
+
 type State struct {
-	Theme    string `toml:"theme"`
-	Provider string `toml:"provider"`
-	Model    string `toml:"model"`
+	Theme              string       `toml:"theme"`
+	Provider           string       `toml:"provider"`
+	Model              string       `toml:"model"`
+	RecentlyUsedModels []ModelUsage `toml:"recently_used_models"`
 }
 
 func NewState() *State {
 	return &State{
-		Theme: "opencode",
+		Theme:              "opencode",
+		RecentlyUsedModels: make([]ModelUsage, 0),
+	}
+}
+
+// UpdateModelUsage updates the recently used models list with the specified model
+func (s *State) UpdateModelUsage(providerID, modelID string) {
+	now := time.Now()
+
+	// Check if this model is already in the list
+	for i, usage := range s.RecentlyUsedModels {
+		if usage.ProviderID == providerID && usage.ModelID == modelID {
+			s.RecentlyUsedModels[i].LastUsed = now
+			usage := s.RecentlyUsedModels[i]
+			copy(s.RecentlyUsedModels[1:i+1], s.RecentlyUsedModels[0:i])
+			s.RecentlyUsedModels[0] = usage
+			return
+		}
+	}
+
+	newUsage := ModelUsage{
+		ProviderID: providerID,
+		ModelID:    modelID,
+		LastUsed:   now,
+	}
+
+	// Prepend to slice and limit to last 50 entries
+	s.RecentlyUsedModels = append([]ModelUsage{newUsage}, s.RecentlyUsedModels...)
+	if len(s.RecentlyUsedModels) > 50 {
+		s.RecentlyUsedModels = s.RecentlyUsedModels[:50]
 	}
 }
 

packages/tui/internal/theme/loader.go

@@ -27,6 +27,10 @@ type LoadedTheme struct {
 	name string
 }
 
+func (t *LoadedTheme) Name() string {
+	return t.name
+}
+
 type colorRef struct {
 	value    any
 	resolved bool

packages/tui/internal/theme/system.go

@@ -27,6 +27,10 @@ func NewSystemTheme(terminalBg color.Color, isDark bool) *SystemTheme {
 	return theme
 }
 
+func (t *SystemTheme) Name() string {
+	return "system"
+}
+
 // initializeColors sets up all theme colors
 func (t *SystemTheme) initializeColors() {
 	// Generate gray scale based on terminal background

packages/tui/internal/theme/theme.go

@@ -8,6 +8,8 @@ import (
 // All colors must be defined as compat.AdaptiveColor to support
 // both light and dark terminal backgrounds.
 type Theme interface {
+	Name() string
+
 	// Background colors
 	Background() compat.AdaptiveColor        // Radix 1
 	BackgroundPanel() compat.AdaptiveColor   // Radix 2

packages/tui/internal/tui/tui.go

@@ -378,6 +378,7 @@ func (a appModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		a.app.Model = &msg.Model
 		a.app.State.Provider = msg.Provider.ID
 		a.app.State.Model = msg.Model.ID
+		a.app.State.UpdateModelUsage(msg.Provider.ID, msg.Model.ID)
 		a.app.SaveState()
 	case dialog.ThemeSelectedMsg:
 		a.app.State.Theme = msg.ThemeName
@@ -428,7 +429,19 @@ func (a appModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 }
 
 func (a appModel) View() string {
-	editorView := a.editor.View()
+	mainLayout := a.chat(layout.Current.Container.Width, lipgloss.Center)
+	if a.modal != nil {
+		mainLayout = a.modal.Render(mainLayout)
+	}
+	mainLayout = a.toastManager.RenderOverlay(mainLayout)
+	if theme.CurrentThemeUsesAnsiColors() {
+		mainLayout = util.ConvertRGBToAnsi16Colors(mainLayout)
+	}
+	return mainLayout + "\n" + a.status.View()
+}
+
+func (a appModel) chat(width int, align lipgloss.Position) string {
+	editorView := a.editor.View(width, align)
 	lines := a.editor.Lines()
 	messagesView := a.messages.View()
 	if a.app.Session.ID == "" {
@@ -439,7 +452,7 @@ func (a appModel) View() string {
 	t := theme.CurrentTheme()
 	centeredEditorView := lipgloss.PlaceHorizontal(
 		a.width,
-		lipgloss.Center,
+		align,
 		editorView,
 		styles.WhitespaceStyle(t.Background()),
 	)
@@ -458,10 +471,6 @@ func (a appModel) View() string {
 			View:      centeredEditorView,
 			FixedSize: 5,
 		},
-		// layout.FlexItem{
-		// 	View:      a.status.View(),
-		// 	FixedSize: 1,
-		// },
 	)
 
 	if lines > 1 {
@@ -471,7 +480,7 @@ func (a appModel) View() string {
 		mainLayout = layout.PlaceOverlay(
 			editorX,
 			editorY,
-			a.editor.Content(),
+			a.editor.Content(width, align),
 			mainLayout,
 		)
 	}
@@ -492,14 +501,7 @@ func (a appModel) View() string {
 		)
 	}
 
-	if a.modal != nil {
-		mainLayout = a.modal.Render(mainLayout)
-	}
-	mainLayout = a.toastManager.RenderOverlay(mainLayout)
-	if theme.CurrentThemeUsesAnsiColors() {
-		mainLayout = util.ConvertRGBToAnsi16Colors(mainLayout)
-	}
-	return mainLayout + "\n" + a.status.View()
+	return mainLayout
 }
 
 func (a appModel) home() string {

packages/web/astro.config.mjs

@@ -42,7 +42,7 @@ export default defineConfig({
         },
       ],
       editLink: {
-        baseUrl: `${github}/edit/master/www/`,
+        baseUrl: `${github}/edit/dev/packages/web/`,
       },
       markdown: {
         headingLinks: false,