fix double entry of github copilot in auth login

Co-authored-by: opencode <noreply@opencode.ai>

README.md

@@ -38,6 +38,8 @@ For more info on how to configure opencode [**head over to our docs**](https://o
 
 ### Contributing
 
+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.
+
 To run opencode locally you need.
 
 - Bun

packages/opencode/src/app/app.ts

@@ -1,3 +1,4 @@
+import "zod-openapi/extend"
 import { Log } from "../util/log"
 import { Context } from "../util/context"
 import { Filesystem } from "../util/filesystem"

packages/opencode/src/auth/github-copilot.ts

@@ -0,0 +1,150 @@
+import { z } from "zod"
+import { Auth } from "./index"
+import { NamedError } from "../util/error"
+
+export namespace AuthGithubCopilot {
+  const CLIENT_ID = "Iv1.b507a08c87ecfe98"
+  const DEVICE_CODE_URL = "https://github.com/login/device/code"
+  const ACCESS_TOKEN_URL = "https://github.com/login/oauth/access_token"
+  const COPILOT_API_KEY_URL = "https://api.github.com/copilot_internal/v2/token"
+
+  interface DeviceCodeResponse {
+    device_code: string
+    user_code: string
+    verification_uri: string
+    expires_in: number
+    interval: number
+  }
+
+  interface AccessTokenResponse {
+    access_token?: string
+    error?: string
+    error_description?: string
+  }
+
+  interface CopilotTokenResponse {
+    token: string
+    expires_at: number
+    refresh_in: number
+    endpoints: {
+      api: string
+    }
+  }
+
+  export async function authorize() {
+    const deviceResponse = await fetch(DEVICE_CODE_URL, {
+      method: "POST",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+        "User-Agent": "GithubCopilot/1.155.0",
+      },
+      body: JSON.stringify({
+        client_id: CLIENT_ID,
+        scope: "read:user",
+      }),
+    })
+    const deviceData: DeviceCodeResponse = await deviceResponse.json()
+    return {
+      device: deviceData.device_code,
+      user: deviceData.user_code,
+      verification: deviceData.verification_uri,
+      interval: deviceData.interval || 5,
+      expiry: deviceData.expires_in,
+    }
+  }
+
+  export async function poll(device_code: string) {
+    const response = await fetch(ACCESS_TOKEN_URL, {
+      method: "POST",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+        "User-Agent": "GithubCopilot/1.155.0",
+      },
+      body: JSON.stringify({
+        client_id: CLIENT_ID,
+        device_code,
+        grant_type: "urn:ietf:params:oauth:grant-type:device_code",
+      }),
+    })
+
+    if (!response.ok) return "failed"
+
+    const data: AccessTokenResponse = await response.json()
+
+    if (data.access_token) {
+      // Store the GitHub OAuth token
+      await Auth.set("github-copilot", {
+        type: "oauth",
+        refresh: data.access_token,
+        access: "",
+        expires: 0,
+      })
+      return "complete"
+    }
+
+    if (data.error === "authorization_pending") return "pending"
+
+    if (data.error) return "failed"
+
+    return "pending"
+  }
+
+  export async function access() {
+    const info = await Auth.get("github-copilot")
+    if (!info || info.type !== "oauth") return
+    if (info.access && info.expires > Date.now()) return info.access
+
+    // Get new Copilot API token
+    const response = await fetch(COPILOT_API_KEY_URL, {
+      headers: {
+        Accept: "application/json",
+        Authorization: `Bearer ${info.refresh}`,
+        "User-Agent": "GithubCopilot/1.155.0",
+        "Editor-Version": "vscode/1.85.1",
+        "Editor-Plugin-Version": "copilot/1.155.0",
+      },
+    })
+
+    if (!response.ok) return
+
+    const tokenData: CopilotTokenResponse = await response.json()
+
+    // Store the Copilot API token
+    await Auth.set("github-copilot", {
+      type: "oauth",
+      refresh: info.refresh,
+      access: tokenData.token,
+      expires: tokenData.expires_at * 1000,
+    })
+
+    return tokenData.token
+  }
+
+  export const DeviceCodeError = NamedError.create(
+    "DeviceCodeError",
+    z.object({}),
+  )
+
+  export const TokenExchangeError = NamedError.create(
+    "TokenExchangeError",
+    z.object({
+      message: z.string(),
+    }),
+  )
+
+  export const AuthenticationError = NamedError.create(
+    "AuthenticationError",
+    z.object({
+      message: z.string(),
+    }),
+  )
+
+  export const CopilotTokenError = NamedError.create(
+    "CopilotTokenError",
+    z.object({
+      message: z.string(),
+    }),
+  )
+}

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

@@ -1,4 +1,5 @@
 import { AuthAnthropic } from "../../auth/anthropic"
+import { AuthGithubCopilot } from "../../auth/github-copilot"
 import { Auth } from "../../auth"
 import { cmd } from "./cmd"
 import * as prompts from "@clack/prompts"
@@ -16,7 +17,7 @@ export const AuthCommand = cmd({
       .command(AuthLogoutCommand)
       .command(AuthListCommand)
       .demandCommand(),
-  async handler() { },
+  async handler() {},
 })
 
 export const AuthListCommand = cmd({
@@ -47,8 +48,9 @@ export const AuthLoginCommand = cmd({
     const providers = await ModelsDev.get()
     const priority: Record<string, number> = {
       anthropic: 0,
-      openai: 1,
-      google: 2,
+      "github-copilot": 1,
+      openai: 2,
+      google: 3,
     }
     let provider = await prompts.select({
       message: "Select provider",
@@ -146,6 +148,37 @@ export const AuthLoginCommand = cmd({
       }
     }
 
+    if (provider === "github-copilot") {
+      await new Promise((resolve) => setTimeout(resolve, 10))
+      const deviceInfo = await AuthGithubCopilot.authorize()
+
+      prompts.note(
+        `Please visit: ${deviceInfo.verification}\nEnter code: ${deviceInfo.user}`,
+      )
+
+      const spinner = prompts.spinner()
+      spinner.start("Waiting for authorization...")
+
+      while (true) {
+        await new Promise((resolve) =>
+          setTimeout(resolve, deviceInfo.interval * 1000),
+        )
+        const status = await AuthGithubCopilot.poll(deviceInfo.device)
+        if (status === "pending") continue
+        if (status === "complete") {
+          spinner.stop("Login successful")
+          break
+        }
+        if (status === "failed") {
+          spinner.stop("Failed to authorize", 1)
+          break
+        }
+      }
+
+      prompts.outro("Done")
+      return
+    }
+
     const key = await prompts.password({
       message: "Enter your API key",
       validate: (x) => (x.length > 0 ? undefined : "Required"),

packages/opencode/src/cli/cmd/login-anthropic.ts

@@ -1,20 +0,0 @@
-import { AuthAnthropic } from "../../auth/anthropic"
-import { UI } from "../ui"
-
-// Example: https://claude.ai/oauth/authorize?code=true&client_id=9d1c250a-e61b-44d9-88ed-5944d1962f5e&response_type=code&redirect_uri=https%3A%2F%2Fconsole.anthropic.com%2Foauth%2Fcode%2Fcallback&scope=org%3Acreate_api_key+user%3Aprofile+user%3Ainference&code_challenge=MdFtFgFap23AWDSN0oa3-eaKjQRFE4CaEhXx8M9fHZg&code_challenge_method=S256&state=rKLtaDzm88GSwekyEqdi0wXX-YqIr13tSzYymSzpvfs
-
-export const LoginAnthropicCommand = {
-  command: "anthropic",
-  describe: "Login to Anthropic",
-  handler: async () => {
-    const { url, verifier } = await AuthAnthropic.authorize()
-
-    UI.println("Login to Anthropic")
-    UI.println("Open the following URL in your browser:")
-    UI.println(url)
-    UI.println("")
-
-    const code = await UI.input("Paste the authorization code here: ")
-    await AuthAnthropic.exchange(code, verifier)
-  },
-}

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

@@ -7,17 +7,25 @@ export const UpgradeCommand = {
   command: "upgrade [target]",
   describe: "upgrade opencode to the latest version or a specific version",
   builder: (yargs: Argv) => {
-    return yargs.positional("target", {
-      describe: "specific version to upgrade to (e.g., '0.1.48' or 'v0.1.48')",
-      type: "string",
-    })
+    return yargs
+      .positional("target", {
+        describe: "specific version to upgrade to (e.g., '0.1.48' or 'v0.1.48')",
+        type: "string",
+      })
+      .option("method", {
+        alias: "m",
+        describe: "installation method to use (curl, npm, pnpm, bun, brew)",
+        type: "string",
+        choices: ["curl", "npm", "pnpm", "bun", "brew"],
+      })
   },
-  handler: async (args: { target?: string }) => {
+  handler: async (args: { target?: string; method?: string }) => {
     UI.empty()
     UI.println(UI.logo("  "))
     UI.empty()
     prompts.intro("Upgrade")
-    const method = await Installation.method()
+    const detectedMethod = await Installation.method()
+    const method = (args.method as Installation.Method) ?? detectedMethod
     if (method === "unknown") {
       prompts.log.error(
         `opencode is installed to ${process.execPath} and seems to be managed by a package manager`,
@@ -25,6 +33,7 @@ export const UpgradeCommand = {
       prompts.outro("Done")
       return
     }
+    prompts.log.info("Using method: " + method)
     const target = args.target ?? (await Installation.latest())
     prompts.log.info(`From ${Installation.VERSION} → ${target}`)
     const spinner = prompts.spinner()

packages/opencode/src/installation/index.ts

@@ -3,12 +3,15 @@ import { $ } from "bun"
 import { z } from "zod"
 import { NamedError } from "../util/error"
 import { Bus } from "../bus"
+import { Log } from "../util/log"
 
 declare global {
   const OPENCODE_VERSION: string
 }
 
 export namespace Installation {
+  const log = Log.create({ service: "installation" })
+
   export type Method = Awaited<ReturnType<typeof method>>
 
   export const Event = {
@@ -66,6 +69,10 @@ export namespace Installation {
         name: "bun" as const,
         command: () => $`bun pm ls -g`.throws(false).text(),
       },
+      {
+        name: "brew" as const,
+        command: () => $`brew list --formula opencode-ai`.throws(false).text(),
+      },
     ]
 
     checks.sort((a, b) => {
@@ -97,18 +104,29 @@ export namespace Installation {
     const cmd = (() => {
       switch (method) {
         case "curl":
-          return $`curl -fsSL https://opencode.ai/install | bash`
+          return $`curl -fsSL https://opencode.ai/install | bash`.env({
+            ...process.env,
+            VERSION: target,
+          })
         case "npm":
           return $`npm install -g opencode-ai@${target}`
         case "pnpm":
           return $`pnpm install -g opencode-ai@${target}`
         case "bun":
           return $`bun install -g opencode-ai@${target}`
+        case "brew":
+          return $`brew install sst/tap/opencode`
         default:
           throw new Error(`Unknown method: ${method}`)
       }
     })()
     const result = await cmd.quiet().throws(false)
+    log.info("upgraded", {
+      method,
+      target,
+      stdout: result.stdout.toString(),
+      stderr: result.stderr.toString(),
+    })
     if (result.exitCode !== 0)
       throw new UpgradeFailedError({
         stderr: result.stderr.toString("utf8"),

packages/opencode/src/provider/provider.ts

@@ -19,6 +19,7 @@ import type { Tool } from "../tool/tool"
 import { WriteTool } from "../tool/write"
 import { TodoReadTool, TodoWriteTool } from "../tool/todo"
 import { AuthAnthropic } from "../auth/anthropic"
+import { AuthGithubCopilot } from "../auth/github-copilot"
 import { ModelsDev } from "./models"
 import { NamedError } from "../util/error"
 import { Auth } from "../auth"
@@ -66,6 +67,41 @@ export namespace Provider {
         },
       }
     },
+    "github-copilot": async (provider) => {
+      const info = await AuthGithubCopilot.access()
+      if (!info) return false
+
+      if (provider && provider.models) {
+        for (const model of Object.values(provider.models)) {
+          model.cost = {
+            input: 0,
+            output: 0,
+          }
+        }
+      }
+
+      return {
+        options: {
+          apiKey: "",
+          async fetch(input: any, init: any) {
+            const token = await AuthGithubCopilot.access()
+            if (!token) throw new Error("GitHub Copilot authentication expired")
+            const headers = {
+              ...init.headers,
+              Authorization: `Bearer ${token}`,
+              "User-Agent": "GithubCopilot/1.155.0",
+              "Editor-Version": "vscode/1.85.1",
+              "Editor-Plugin-Version": "copilot/1.155.0",
+            }
+            delete headers["x-api-key"]
+            return fetch(input, {
+              ...init,
+              headers,
+            })
+          },
+        },
+      }
+    },
     openai: async () => {
       return {
         async getModel(sdk: any, modelID: string) {
@@ -208,8 +244,9 @@ export namespace Provider {
     for (const [providerID, fn] of Object.entries(CUSTOM_LOADERS)) {
       if (disabled.has(providerID)) continue
       const result = await fn(database[providerID])
-      if (result)
+      if (result) {
         mergeProvider(providerID, result.options, "custom", result.getModel)
+      }
     }
 
     // load config

packages/opencode/src/provider/transform.ts

@@ -1,24 +1,25 @@
-import type { CoreMessage } from "ai"
+import type { LanguageModelV1Prompt } from "ai"
+import { unique } from "remeda"
 
 export namespace ProviderTransform {
   export function message(
-    msg: CoreMessage,
-    index: number,
+    msgs: LanguageModelV1Prompt,
     providerID: string,
     modelID: string,
   ) {
-    if (
-      (providerID === "anthropic" || modelID.includes("anthropic")) &&
-      index < 4
-    ) {
-      msg.providerOptions = {
-        ...msg.providerOptions,
-        anthropic: {
-          cacheControl: { type: "ephemeral" },
-        },
+    if (providerID === "anthropic" || modelID.includes("anthropic")) {
+      const system = msgs.filter((msg) => msg.role === "system").slice(0, 2)
+      const final = msgs.filter((msg) => msg.role !== "system").slice(-2)
+
+      for (const msg of unique([...system, ...final])) {
+        msg.providerMetadata = {
+          ...msg.providerMetadata,
+          anthropic: {
+            cacheControl: { type: "ephemeral" },
+          },
+        }
       }
     }
-
-    return msg
+    return msgs
   }
 }

packages/opencode/src/session/index.ts

@@ -14,6 +14,7 @@ import {
   type CoreMessage,
   type UIMessage,
   type ProviderMetadata,
+  wrapLanguageModel,
 } from "ai"
 import { z, ZodSchema } from "zod"
 import { Decimal } from "decimal.js"
@@ -247,7 +248,7 @@ export namespace Session {
       if (
         model.info.limit.context &&
         tokens >
-          (model.info.limit.context - (model.info.limit.output ?? 0)) * 0.9
+        (model.info.limit.context - (model.info.limit.output ?? 0)) * 0.9
       ) {
         await summarize({
           sessionID: input.sessionID,
@@ -285,9 +286,7 @@ export namespace Session {
               parts: toParts(input.parts),
             },
           ]),
-        ].map((msg, i) =>
-          ProviderTransform.message(msg, i, input.providerID, input.modelID),
-        ),
+        ],
         model: model.language,
       })
         .then((result) => {
@@ -296,7 +295,7 @@ export namespace Session {
               draft.title = result.text
             })
         })
-        .catch(() => {})
+        .catch(() => { })
     }
     const msg: Message.Info = {
       role: "user",
@@ -527,12 +526,26 @@ export namespace Session {
         ...convertToCoreMessages(
           msgs.map(toUIMessage).filter((x) => x.parts.length > 0),
         ),
-      ].map((msg, i) =>
-        ProviderTransform.message(msg, i, input.providerID, input.modelID),
-      ),
+      ],
       temperature: model.info.temperature ? 0 : undefined,
       tools: model.info.tool_call === false ? undefined : tools,
-      model: model.language,
+      model: wrapLanguageModel({
+        model: model.language,
+        middleware: [
+          {
+            async transformParams(args) {
+              if (args.type === "stream") {
+                args.params.prompt = ProviderTransform.message(
+                  args.params.prompt,
+                  input.providerID,
+                  input.modelID,
+                )
+              }
+              return args.params
+            },
+          },
+        ],
+      }),
     })
     try {
       for await (const value of result.fullStream) {
@@ -559,7 +572,7 @@ export namespace Session {
           case "tool-call": {
             const [match] = next.parts.flatMap((p) =>
               p.type === "tool-invocation" &&
-              p.toolInvocation.toolCallId === value.toolCallId
+                p.toolInvocation.toolCallId === value.toolCallId
                 ? [p]
                 : [],
             )
@@ -723,7 +736,9 @@ export namespace Session {
       },
     }
     await updateMessage(next)
-    const result = await generateText({
+
+    let text: Message.TextPart | undefined
+    const result = streamText({
       abortSignal: abort.signal,
       model: model.language,
       messages: [
@@ -744,16 +759,46 @@ export namespace Session {
           ],
         },
       ],
+      onStepFinish: async (step) => {
+        const assistant = next.metadata!.assistant!
+        const usage = getUsage(model.info, step.usage, step.providerMetadata)
+        assistant.cost += usage.cost
+        assistant.tokens = usage.tokens
+        await updateMessage(next)
+        if (text) {
+          Bus.publish(Message.Event.PartUpdated, {
+            part: text,
+            messageID: next.id,
+            sessionID: next.metadata.sessionID,
+          })
+        }
+        text = undefined
+      },
+      async onFinish(input) {
+        const assistant = next.metadata!.assistant!
+        const usage = getUsage(model.info, input.usage, input.providerMetadata)
+        assistant.cost = usage.cost
+        assistant.tokens = usage.tokens
+        next.metadata!.time.completed = Date.now()
+        await updateMessage(next)
+      },
     })
-    next.parts.push({
-      type: "text",
-      text: result.text,
-    })
-    const assistant = next.metadata!.assistant!
-    const usage = getUsage(model.info, result.usage, result.providerMetadata)
-    assistant.cost = usage.cost
-    assistant.tokens = usage.tokens
-    await updateMessage(next)
+
+    for await (const value of result.fullStream) {
+      switch (value.type) {
+        case "text-delta":
+          if (!text) {
+            text = {
+              type: "text",
+              text: value.textDelta,
+            }
+            next.parts.push(text)
+          } else text.text += value.textDelta
+
+          await updateMessage(next)
+          break
+      }
+    }
   }
 
   function lock(sessionID: string) {

packages/opencode/src/session/prompt/title.txt

@@ -1,7 +1,11 @@
-You will generate a short title based on the first message a user begins a conversation with
-- ensure it is not more than 50 characters long
-- the title should be a summary of the user's message
-- it should be one line long
-- do not use quotes or colons
-- the entire text you return will be used as the title
-- never return anything that is more than one sentence (one line) long
+Generate a short title based on the first message a user begins a conversation with. CRITICAL: Your response must be EXACTLY one line with NO line breaks, newlines, or multiple sentences.
+
+Requirements:
+- Maximum 50 characters
+- Single line only - NO newlines or line breaks
+- Summary of the user's message
+- No quotes, colons, or special formatting
+- Do not include explanatory text like "summary:" or similar
+- Your entire response becomes the title
+
+IMPORTANT: Return only the title text on a single line. Do not add any explanations, formatting, or additional text.

packages/opencode/src/tool/bash.ts

@@ -63,10 +63,18 @@ export const BashTool = Tool.define({
       metadata: {
         stderr,
         stdout,
+        exit: process.exitCode,
         description: params.description,
         title: params.command,
       },
-      output: stdout.replaceAll(/\x1b\[[0-9;]*m/g, ""),
+      output: [
+        `<stdout>`,
+        stdout ?? "",
+        `</stdout>`,
+        `<stderr>`,
+        stderr ?? "",
+        `</stderr>`,
+      ].join("\n"),
     }
   },
 })

packages/opencode/src/tool/edit.ts

@@ -22,7 +22,7 @@ export const EditTool = Tool.define({
     replaceAll: z
       .boolean()
       .optional()
-      .describe("Replace all occurences of old_string (default false)"),
+      .describe("Replace all occurrences of old_string (default false)"),
   }),
   async execute(params, ctx) {
     if (!params.filePath) {

packages/opencode/src/tool/multiedit.txt

@@ -10,7 +10,7 @@ To make multiple file edits, provide the following:
 2. edits: An array of edit operations to perform, where each edit contains:
    - old_string: The text to replace (must match the file contents exactly, including all whitespace and indentation)
    - new_string: The edited text to replace the old_string
-   - replace_all: Replace all occurences of old_string. This parameter is optional and defaults to false.
+   - replace_all: Replace all occurrences of old_string. This parameter is optional and defaults to false.
 
 IMPORTANT:
 - All edits are applied in sequence, in the order they are provided

packages/opencode/test/tool/tool.test.ts

@@ -14,7 +14,7 @@ describe("tool.glob", () => {
     await App.provide({ cwd: process.cwd() }, async () => {
       let result = await GlobTool.execute(
         {
-          pattern: "./node_modules/**/*",
+          pattern: "../../node_modules/**/*",
           path: undefined,
         },
         ctx,
@@ -33,7 +33,7 @@ describe("tool.glob", () => {
       )
       expect(result.metadata).toMatchObject({
         truncated: false,
-        count: 2,
+        count: 3,
       })
     })
   })

packages/tui/cmd/opencode/main.go

@@ -26,7 +26,11 @@ func main() {
 
 	appInfoStr := os.Getenv("OPENCODE_APP_INFO")
 	var appInfo client.AppInfo
-	json.Unmarshal([]byte(appInfoStr), &appInfo)
+	err := json.Unmarshal([]byte(appInfoStr), &appInfo)
+	if err != nil {
+		slog.Error("Failed to unmarshal app info", "error", err)
+		os.Exit(1)
+	}
 
 	logfile := filepath.Join(appInfo.Path.Data, "log", "tui.log")
 	if _, err := os.Stat(filepath.Dir(logfile)); os.IsNotExist(err) {

packages/tui/internal/app/app.go

@@ -44,7 +44,7 @@ type SendMsg struct {
 	Text        string
 	Attachments []Attachment
 }
-type CompletionDialogTriggerdMsg struct {
+type CompletionDialogTriggeredMsg struct {
 	InitialValue string
 }
 
@@ -126,6 +126,10 @@ func (a *App) InitializeProvider() tea.Cmd {
 			// TODO: notify user
 			return nil
 		}
+		if providersResponse != nil && providersResponse.StatusCode() != 200 {
+			slog.Error("failed to retrieve providers", "status", providersResponse.StatusCode(), "message", string(providersResponse.Body))
+			return nil
+		}
 		providers := []client.ProviderInfo{}
 		var defaultProvider *client.ProviderInfo
 		var defaultModel *client.ModelInfo
@@ -248,17 +252,19 @@ func (a *App) InitializeProject(ctx context.Context) tea.Cmd {
 }
 
 func (a *App) CompactSession(ctx context.Context) tea.Cmd {
-	response, err := a.Client.PostSessionSummarizeWithResponse(ctx, client.PostSessionSummarizeJSONRequestBody{
-		SessionID:  a.Session.Id,
-		ProviderID: a.Provider.Id,
-		ModelID:    a.Model.Id,
-	})
-	if err != nil {
-		slog.Error("Failed to compact session", "error", err)
-	}
-	if response != nil && response.StatusCode() != 200 {
-		slog.Error("Failed to compact session", "error", response.StatusCode)
-	}
+	go func() {
+		response, err := a.Client.PostSessionSummarizeWithResponse(ctx, client.PostSessionSummarizeJSONRequestBody{
+			SessionID:  a.Session.Id,
+			ProviderID: a.Provider.Id,
+			ModelID:    a.Model.Id,
+		})
+		if err != nil {
+			slog.Error("Failed to compact session", "error", err)
+		}
+		if response != nil && response.StatusCode() != 200 {
+			slog.Error("Failed to compact session", "error", response.StatusCode)
+		}
+	}()
 	return nil
 }
 

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

@@ -25,6 +25,8 @@ import (
 func toMarkdown(content string, width int, backgroundColor compat.AdaptiveColor) string {
 	r := styles.GetMarkdownRenderer(width, backgroundColor)
 	content = strings.ReplaceAll(content, app.RootPath+"/", "")
+	content = strings.ReplaceAll(content, "<", "\\<")
+	content = strings.ReplaceAll(content, ">", "\\>")
 	rendered, _ := r.Render(content)
 	lines := strings.Split(rendered, "\n")
 
@@ -44,7 +46,6 @@ func toMarkdown(content string, width int, backgroundColor compat.AdaptiveColor)
 			}
 		}
 	}
-
 	content = strings.Join(lines, "\n")
 	return strings.TrimSuffix(content, "\n")
 }

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

@@ -25,6 +25,7 @@ type commandsComponent struct {
 	app           *app.App
 	width, height int
 	showKeybinds  bool
+	showAll       bool
 	background    *compat.AdaptiveColor
 	limit         *int
 }
@@ -75,17 +76,32 @@ func (c *commandsComponent) View() string {
 		keybindStyle = keybindStyle.Background(*c.background)
 	}
 
-	var commandsWithTriggers []commands.Command
+	var commandsToShow []commands.Command
+	var triggeredCommands []commands.Command
+	var untriggeredCommands []commands.Command
+
 	for _, cmd := range c.app.Commands.Sorted() {
-		if cmd.Trigger != "" {
-			commandsWithTriggers = append(commandsWithTriggers, cmd)
+		if c.showAll || cmd.Trigger != "" {
+			if cmd.Trigger != "" {
+				triggeredCommands = append(triggeredCommands, cmd)
+			} else if c.showAll {
+				untriggeredCommands = append(untriggeredCommands, cmd)
+			}
 		}
 	}
-	if c.limit != nil && len(commandsWithTriggers) > *c.limit {
-		commandsWithTriggers = commandsWithTriggers[:*c.limit]
+
+	// Combine triggered commands first, then untriggered
+	commandsToShow = append(commandsToShow, triggeredCommands...)
+	commandsToShow = append(commandsToShow, untriggeredCommands...)
+
+	if c.limit != nil && len(commandsToShow) > *c.limit {
+		commandsToShow = commandsToShow[:*c.limit]
 	}
 
-	if len(commandsWithTriggers) == 0 {
+	if len(commandsToShow) == 0 {
+		if c.showAll {
+			return styles.Muted().Render("No commands available")
+		}
 		return styles.Muted().Render("No commands with triggers available")
 	}
 
@@ -101,10 +117,15 @@ func (c *commandsComponent) View() string {
 		keybinds    string
 	}
 
-	rows := make([]commandRow, 0, len(commandsWithTriggers))
+	rows := make([]commandRow, 0, len(commandsToShow))
 
-	for _, cmd := range commandsWithTriggers {
-		trigger := "/" + cmd.Trigger
+	for _, cmd := range commandsToShow {
+		trigger := ""
+		if cmd.Trigger != "" {
+			trigger = "/" + cmd.Trigger
+		} else {
+			trigger = string(cmd.Name)
+		}
 		description := cmd.Description
 
 		// Format keybindings
@@ -144,6 +165,7 @@ func (c *commandsComponent) View() string {
 	// Build the output
 	var output strings.Builder
 
+	maxWidth := 0
 	for _, row := range rows {
 		// Pad each column to align properly
 		trigger := fmt.Sprintf("%-*s", maxTriggerWidth, row.trigger)
@@ -160,10 +182,14 @@ func (c *commandsComponent) View() string {
 		}
 
 		output.WriteString(line + "\n")
+		maxWidth = max(maxWidth, lipgloss.Width(line))
 	}
 
 	// Remove trailing newline
 	result := strings.TrimSuffix(output.String(), "\n")
+	if c.background != nil {
+		result = lipgloss.NewStyle().Background(c.background).Width(maxWidth).Render(result)
+	}
 
 	return result
 }
@@ -188,11 +214,18 @@ func WithLimit(limit int) Option {
 	}
 }
 
+func WithShowAll(showAll bool) Option {
+	return func(c *commandsComponent) {
+		c.showAll = showAll
+	}
+}
+
 func New(app *app.App, opts ...Option) CommandsComponent {
 	c := &commandsComponent{
 		app:          app,
 		background:   nil,
 		showKeybinds: true,
+		showAll:      false,
 	}
 	for _, opt := range opts {
 		opt(c)

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

@@ -116,7 +116,7 @@ func (c *completionDialogComponent) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 	switch msg := msg.(type) {
 	case []CompletionItemI:
 		c.list.SetItems(msg)
-	case app.CompletionDialogTriggerdMsg:
+	case app.CompletionDialogTriggeredMsg:
 		c.pseudoSearchTextArea.SetValue(msg.InitialValue)
 	case tea.KeyMsg:
 		if c.pseudoSearchTextArea.Focused() {

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

@@ -1,71 +1,62 @@
 package dialog
 
 import (
-	"strings"
-
+	"github.com/charmbracelet/bubbles/v2/viewport"
 	tea "github.com/charmbracelet/bubbletea/v2"
-	"github.com/charmbracelet/lipgloss/v2"
-	"github.com/sst/opencode/internal/commands"
+	"github.com/sst/opencode/internal/app"
+	commandsComponent "github.com/sst/opencode/internal/components/commands"
 	"github.com/sst/opencode/internal/components/modal"
 	"github.com/sst/opencode/internal/layout"
 	"github.com/sst/opencode/internal/theme"
 )
 
 type helpDialog struct {
-	width    int
-	height   int
-	modal    *modal.Modal
-	commands []commands.Command
+	width             int
+	height            int
+	modal             *modal.Modal
+	app               *app.App
+	commandsComponent commandsComponent.CommandsComponent
+	viewport          viewport.Model
 }
 
 func (h *helpDialog) Init() tea.Cmd {
-	return nil
+	return tea.Batch(
+		h.commandsComponent.Init(),
+		h.viewport.Init(),
+	)
 }
 
 func (h *helpDialog) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
+	var cmds []tea.Cmd
+
 	switch msg := msg.(type) {
 	case tea.WindowSizeMsg:
 		h.width = msg.Width
 		h.height = msg.Height
+		// Set viewport size with some padding for the modal
+		h.viewport = viewport.New(viewport.WithWidth(msg.Width-4), viewport.WithHeight(msg.Height-6))
+		h.commandsComponent.SetSize(msg.Width-4, msg.Height-6)
 	}
-	return h, nil
+
+	// 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())
+
+	// Update viewport
+	var vpCmd tea.Cmd
+	h.viewport, vpCmd = h.viewport.Update(msg)
+	cmds = append(cmds, vpCmd)
+
+	return h, tea.Batch(cmds...)
 }
 
 func (h *helpDialog) View() string {
 	t := theme.CurrentTheme()
-	keyStyle := lipgloss.NewStyle().
-		Background(t.BackgroundElement()).
-		Foreground(t.Text()).
-		Bold(true)
-	descStyle := lipgloss.NewStyle().
-		Background(t.BackgroundElement()).
-		Foreground(t.TextMuted())
-	contentStyle := lipgloss.NewStyle().
-		PaddingLeft(1).Background(t.BackgroundElement())
-
-	lines := []string{}
-	for _, b := range h.commands {
-		// Only interested in slash commands
-		if b.Trigger == "" {
-			continue
-		}
-
-		content := keyStyle.Render("/" + b.Trigger)
-		content += descStyle.Render(" " + b.Description)
-		// for i, key := range b.Keybindings {
-		// 	if i == 0 {
-		// keyString := " (" + key.Key + ")"
-		// space := max(h.width-lipgloss.Width(content)-lipgloss.Width(keyString), 0)
-		// spacer := strings.Repeat(" ", space)
-		// content += descStyle.Render(spacer)
-		// content += descStyle.Render(keyString)
-		// 	}
-		// }
-
-		lines = append(lines, contentStyle.Render(content))
-	}
-
-	return strings.Join(lines, "\n")
+	h.commandsComponent.SetBackgroundColor(t.BackgroundElement())
+	return h.viewport.View()
 }
 
 func (h *helpDialog) Render(background string) string {
@@ -80,9 +71,16 @@ type HelpDialog interface {
 	layout.Modal
 }
 
-func NewHelpDialog(commands []commands.Command) HelpDialog {
+func NewHelpDialog(app *app.App) HelpDialog {
+	vp := viewport.New(viewport.WithHeight(12))
 	return &helpDialog{
-		commands: commands,
+		app: app,
+		commandsComponent: commandsComponent.New(app,
+			commandsComponent.WithBackground(theme.CurrentTheme().BackgroundElement()),
+			commandsComponent.WithShowAll(true),
+			commandsComponent.WithKeybinds(true),
+		),
 		modal:    modal.New(modal.WithTitle("Help")),
+		viewport: vp,
 	}
 }

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

@@ -11,6 +11,7 @@ import (
 	tea "github.com/charmbracelet/bubbletea/v2"
 	"github.com/charmbracelet/lipgloss/v2"
 	"github.com/sst/opencode/internal/app"
+	"github.com/sst/opencode/internal/components/list"
 	"github.com/sst/opencode/internal/components/modal"
 	"github.com/sst/opencode/internal/layout"
 	"github.com/sst/opencode/internal/styles"
@@ -33,20 +34,15 @@ type modelDialog struct {
 	app                *app.App
 	availableProviders []client.ProviderInfo
 	provider           client.ProviderInfo
-
-	selectedIdx     int
-	width           int
-	height          int
-	scrollOffset    int
-	hScrollOffset   int
-	hScrollPossible bool
-
-	modal *modal.Modal
+	width              int
+	height             int
+	hScrollOffset      int
+	hScrollPossible    bool
+	modal              *modal.Modal
+	modelList          list.List[list.StringItem]
 }
 
 type modelKeyMap struct {
-	Up     key.Binding
-	Down   key.Binding
 	Left   key.Binding
 	Right  key.Binding
 	Enter  key.Binding
@@ -54,14 +50,6 @@ type modelKeyMap struct {
 }
 
 var modelKeys = modelKeyMap{
-	Up: key.NewBinding(
-		key.WithKeys("up", "k"),
-		key.WithHelp("↑", "previous model"),
-	),
-	Down: key.NewBinding(
-		key.WithKeys("down", "j"),
-		key.WithHelp("↓", "next model"),
-	),
 	Left: key.NewBinding(
 		key.WithKeys("left", "h"),
 		key.WithHelp("←", "scroll left"),
@@ -81,15 +69,7 @@ var modelKeys = modelKeyMap{
 }
 
 func (m *modelDialog) Init() tea.Cmd {
-	// cfg := config.Get()
-	// modelInfo := GetSelectedModel(cfg)
-	// m.availableProviders = getEnabledProviders(cfg)
-	// m.hScrollPossible = len(m.availableProviders) > 1
-
-	// m.provider = modelInfo.Provider
-	// m.hScrollOffset = findProviderIndex(m.availableProviders, m.provider)
-
-	// m.setupModelsForProvider(m.provider)
+	m.setupModelsForProvider(m.provider.Id)
 	return nil
 }
 
@@ -97,26 +77,32 @@ func (m *modelDialog) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 	switch msg := msg.(type) {
 	case tea.KeyMsg:
 		switch {
-		case key.Matches(msg, modelKeys.Up):
-			m.moveSelectionUp()
-		case key.Matches(msg, modelKeys.Down):
-			m.moveSelectionDown()
 		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 client.ModelInfo
+			for _, model := range models {
+				if model.Name == string(selectedItem) {
+					selectedModel = model
+					break
+				}
+			}
 			return m, tea.Sequence(
 				util.CmdHandler(modal.CloseModalMsg{}),
 				util.CmdHandler(
 					app.ModelSelectedMsg{
 						Provider: m.provider,
-						Model:    models[m.selectedIdx],
+						Model:    selectedModel,
 					}),
 			)
 		case key.Matches(msg, modelKeys.Escape):
@@ -127,7 +113,10 @@ func (m *modelDialog) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		m.height = msg.Height
 	}
 
-	return m, nil
+	// Update the list component
+	updatedList, cmd := m.modelList.Update(msg)
+	m.modelList = updatedList.(list.List[list.StringItem])
+	return m, cmd
 }
 
 func (m *modelDialog) models() []client.ModelInfo {
@@ -137,40 +126,9 @@ func (m *modelDialog) models() []client.ModelInfo {
 	return models
 }
 
-// moveSelectionUp moves the selection up or wraps to bottom
-func (m *modelDialog) moveSelectionUp() {
-	if m.selectedIdx > 0 {
-		m.selectedIdx--
-	} else {
-		m.selectedIdx = len(m.provider.Models) - 1
-		m.scrollOffset = max(0, len(m.provider.Models)-numVisibleModels)
-	}
-
-	// Keep selection visible
-	if m.selectedIdx < m.scrollOffset {
-		m.scrollOffset = m.selectedIdx
-	}
-}
-
-// moveSelectionDown moves the selection down or wraps to top
-func (m *modelDialog) moveSelectionDown() {
-	if m.selectedIdx < len(m.provider.Models)-1 {
-		m.selectedIdx++
-	} else {
-		m.selectedIdx = 0
-		m.scrollOffset = 0
-	}
-
-	// Keep selection visible
-	if m.selectedIdx >= m.scrollOffset+numVisibleModels {
-		m.scrollOffset = m.selectedIdx - (numVisibleModels - 1)
-	}
-}
-
 func (m *modelDialog) switchProvider(offset int) {
 	newOffset := m.hScrollOffset + offset
 
-	// Ensure we stay within bounds
 	if newOffset < 0 {
 		newOffset = len(m.availableProviders) - 1
 	}
@@ -185,105 +143,46 @@ func (m *modelDialog) switchProvider(offset int) {
 }
 
 func (m *modelDialog) View() string {
-	t := theme.CurrentTheme()
-	baseStyle := lipgloss.NewStyle().
-		Background(t.BackgroundElement()).
-		Foreground(t.Text())
-
-	// Render visible models
-	endIdx := min(m.scrollOffset+numVisibleModels, len(m.provider.Models))
-	modelItems := make([]string, 0, endIdx-m.scrollOffset)
-
-	models := m.models()
-	for i := m.scrollOffset; i < endIdx; i++ {
-		itemStyle := baseStyle.Width(maxDialogWidth)
-		if i == m.selectedIdx {
-			itemStyle = itemStyle.
-				Background(t.Primary()).
-				Foreground(t.BackgroundElement()).
-				Bold(true)
-		}
-		modelItems = append(modelItems, itemStyle.Render(models[i].Name))
-	}
-
+	listView := m.modelList.View()
 	scrollIndicator := m.getScrollIndicators(maxDialogWidth)
-
-	content := lipgloss.JoinVertical(
-		lipgloss.Left,
-		baseStyle.
-			Width(maxDialogWidth).
-			Render(lipgloss.JoinVertical(lipgloss.Left, modelItems...)),
-		scrollIndicator,
-	)
-
-	return content
+	return strings.Join([]string{listView, scrollIndicator}, "\n")
 }
 
 func (m *modelDialog) getScrollIndicators(maxWidth int) string {
 	var indicator string
-
-	if len(m.provider.Models) > numVisibleModels {
-		if m.scrollOffset > 0 {
-			indicator += "↑ "
-		}
-		if m.scrollOffset+numVisibleModels < len(m.provider.Models) {
-			indicator += "↓ "
-		}
-	}
-
 	if m.hScrollPossible {
-		indicator = "← " + indicator + "→"
+		indicator = "← → (switch provider) "
 	}
-
 	if indicator == "" {
 		return ""
 	}
 
 	t := theme.CurrentTheme()
-	baseStyle := styles.BaseStyle()
-
-	return baseStyle.
-		Foreground(t.Primary()).
+	return styles.BaseStyle().
+		Foreground(t.TextMuted()).
 		Width(maxWidth).
 		Align(lipgloss.Right).
-		Bold(true).
 		Render(indicator)
 }
 
-// findProviderIndex returns the index of the provider in the list, or -1 if not found
-// func findProviderIndex(providers []string, provider string) int {
-// 	for i, p := range providers {
-// 		if p == provider {
-// 			return i
-// 		}
-// 	}
-// 	return -1
-// }
+func (m *modelDialog) setupModelsForProvider(providerId string) {
+	models := m.models()
+	modelNames := make([]string, len(models))
+	for i, model := range models {
+		modelNames[i] = model.Name
+	}
 
-func (m *modelDialog) setupModelsForProvider(_ string) {
-	m.selectedIdx = 0
-	m.scrollOffset = 0
+	m.modelList = list.NewStringList(modelNames, numVisibleModels, "No models available", true)
+	m.modelList.SetMaxWidth(maxDialogWidth)
 
-	// cfg := config.Get()
-	// agentCfg := cfg.Agents[config.AgentPrimary]
-	// selectedModelId := agentCfg.Model
-
-	// m.provider = provider
-	// m.models = getModelsForProvider(provider)
-
-	// Try to select the current model if it belongs to this provider
-	// if provider == models.SupportedModels[selectedModelId].Provider {
-	// 	for i, model := range m.models {
-	// 		if model.ID == selectedModelId {
-	// 			m.selectedIdx = i
-	// 			// Adjust scroll position to keep selected model visible
-	// 			if m.selectedIdx >= numVisibleModels {
-	// 				m.scrollOffset = m.selectedIdx - (numVisibleModels - 1)
-	// 			}
-	// 			break
-	// 		}
-	// 	}
-	// }
+	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
+			}
+		}
+	}
 }
 
 func (m *modelDialog) Render(background string) string {
@@ -297,11 +196,30 @@ func (s *modelDialog) Close() tea.Cmd {
 func NewModelDialog(app *app.App) ModelDialog {
 	availableProviders, _ := app.ListProviders(context.Background())
 
-	return &modelDialog{
-		availableProviders: availableProviders,
-		hScrollOffset:      0,
-		hScrollPossible:    len(availableProviders) > 1,
-		provider:           availableProviders[0],
-		modal:              modal.New(modal.WithTitle(fmt.Sprintf("Select %s Model", availableProviders[0].Name))),
+	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),
+		),
+	}
+
+	dialog.setupModelsForProvider(currentProvider.Id)
+	return dialog
 }

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

@@ -8,8 +8,6 @@ import (
 	"github.com/sst/opencode/internal/components/list"
 	"github.com/sst/opencode/internal/components/modal"
 	"github.com/sst/opencode/internal/layout"
-	"github.com/sst/opencode/internal/styles"
-	"github.com/sst/opencode/internal/theme"
 	"github.com/sst/opencode/internal/util"
 	"github.com/sst/opencode/pkg/client"
 )
@@ -19,33 +17,12 @@ type SessionDialog interface {
 	layout.Modal
 }
 
-type sessionItem client.SessionInfo
-
-func (s sessionItem) Render(selected bool, width int) string {
-	t := theme.CurrentTheme()
-	baseStyle := styles.BaseStyle().
-		Width(width - 4).
-		Background(t.BackgroundElement())
-
-	if selected {
-		baseStyle = baseStyle.
-			Background(t.Primary()).
-			Foreground(t.BackgroundElement()).
-			Bold(true)
-	} else {
-		baseStyle = baseStyle.
-			Foreground(t.Text())
-	}
-
-	return baseStyle.Padding(0, 1).Render(s.Title)
-}
-
 type sessionDialog struct {
-	width             int
-	height            int
-	modal             *modal.Modal
-	selectedSessionID string
-	list              list.List[sessionItem]
+	width    int
+	height   int
+	modal    *modal.Modal
+	sessions []client.SessionInfo
+	list     list.List[list.StringItem]
 }
 
 func (s *sessionDialog) Init() tea.Cmd {
@@ -61,11 +38,11 @@ func (s *sessionDialog) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 	case tea.KeyPressMsg:
 		switch msg.String() {
 		case "enter":
-			if item, idx := s.list.GetSelectedItem(); idx >= 0 {
-				s.selectedSessionID = item.Id
+			if _, idx := s.list.GetSelectedItem(); idx >= 0 && idx < len(s.sessions) {
+				selectedSession := s.sessions[idx]
 				return s, tea.Sequence(
 					util.CmdHandler(modal.CloseModalMsg{}),
-					util.CmdHandler(app.SessionSelectedMsg(&item)),
+					util.CmdHandler(app.SessionSelectedMsg(&selectedSession)),
 				)
 			}
 		}
@@ -73,7 +50,7 @@ func (s *sessionDialog) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 
 	var cmd tea.Cmd
 	listModel, cmd := s.list.Update(msg)
-	s.list = listModel.(list.List[sessionItem])
+	s.list = listModel.(list.List[list.StringItem])
 	return s, cmd
 }
 
@@ -89,23 +66,30 @@ func (s *sessionDialog) Close() tea.Cmd {
 func NewSessionDialog(app *app.App) SessionDialog {
 	sessions, _ := app.ListSessions(context.Background())
 
-	var sessionItems []sessionItem
+	var filteredSessions []client.SessionInfo
+	var sessionTitles []string
 	for _, sess := range sessions {
 		if sess.ParentID != nil {
 			continue
 		}
-		sessionItems = append(sessionItems, sessionItem(sess))
+		filteredSessions = append(filteredSessions, sess)
+		sessionTitles = append(sessionTitles, sess.Title)
 	}
 
-	list := list.NewListComponent(
-		sessionItems,
+	list := list.NewStringList(
+		sessionTitles,
 		10, // maxVisibleSessions
 		"No sessions available",
 		true, // useAlphaNumericKeys
 	)
+	list.SetMaxWidth(layout.Current.Container.Width - 12)
 
 	return &sessionDialog{
-		list:  list,
-		modal: modal.New(modal.WithTitle("Switch Session"), modal.WithMaxWidth(80)),
+		sessions: filteredSessions,
+		list:     list,
+		modal: modal.New(
+			modal.WithTitle("Switch Session"),
+			modal.WithMaxWidth(layout.Current.Container.Width-8),
+		),
 	}
 }

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

@@ -5,7 +5,6 @@ import (
 	list "github.com/sst/opencode/internal/components/list"
 	"github.com/sst/opencode/internal/components/modal"
 	"github.com/sst/opencode/internal/layout"
-	"github.com/sst/opencode/internal/styles"
 	"github.com/sst/opencode/internal/theme"
 	"github.com/sst/opencode/internal/util"
 )
@@ -20,35 +19,12 @@ type ThemeDialog interface {
 	layout.Modal
 }
 
-type themeItem struct {
-	name string
-}
-
-func (t themeItem) Render(selected bool, width int) string {
-	th := theme.CurrentTheme()
-	baseStyle := styles.BaseStyle().
-		Width(width - 2).
-		Background(th.BackgroundElement())
-
-	if selected {
-		baseStyle = baseStyle.
-			Background(th.Primary()).
-			Foreground(th.BackgroundElement()).
-			Bold(true)
-	} else {
-		baseStyle = baseStyle.
-			Foreground(th.Text())
-	}
-
-	return baseStyle.Padding(0, 1).Render(t.name)
-}
-
 type themeDialog struct {
 	width  int
 	height int
 
 	modal         *modal.Modal
-	list          list.List[themeItem]
+	list          list.List[list.StringItem]
 	originalTheme string
 	themeApplied  bool
 }
@@ -66,7 +42,7 @@ func (t *themeDialog) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		switch msg.String() {
 		case "enter":
 			if item, idx := t.list.GetSelectedItem(); idx >= 0 {
-				selectedTheme := item.name
+				selectedTheme := string(item)
 				if err := theme.SetTheme(selectedTheme); err != nil {
 					// status.Error(err.Error())
 					return t, nil
@@ -85,11 +61,11 @@ func (t *themeDialog) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 
 	var cmd tea.Cmd
 	listModel, cmd := t.list.Update(msg)
-	t.list = listModel.(list.List[themeItem])
+	t.list = listModel.(list.List[list.StringItem])
 
 	if item, newIdx := t.list.GetSelectedItem(); newIdx >= 0 && newIdx != prevIdx {
-		theme.SetTheme(item.name)
-		return t, util.CmdHandler(ThemeSelectedMsg{ThemeName: item.name})
+		theme.SetTheme(string(item))
+		return t, util.CmdHandler(ThemeSelectedMsg{ThemeName: string(item)})
 	}
 	return t, cmd
 }
@@ -101,6 +77,7 @@ func (t *themeDialog) Render(background string) string {
 func (t *themeDialog) Close() tea.Cmd {
 	if !t.themeApplied {
 		theme.SetTheme(t.originalTheme)
+		return util.CmdHandler(ThemeSelectedMsg{ThemeName: t.originalTheme})
 	}
 	return nil
 }
@@ -110,17 +87,15 @@ func NewThemeDialog() ThemeDialog {
 	themes := theme.AvailableThemes()
 	currentTheme := theme.CurrentThemeName()
 
-	var themeItems []themeItem
 	var selectedIdx int
 	for i, name := range themes {
-		themeItems = append(themeItems, themeItem{name: name})
 		if name == currentTheme {
 			selectedIdx = i
 		}
 	}
 
-	list := list.NewListComponent(
-		themeItems,
+	list := list.NewStringList(
+		themes,
 		10, // maxVisibleThemes
 		"No themes available",
 		true,
@@ -128,6 +103,9 @@ func NewThemeDialog() ThemeDialog {
 
 	// Set the initial selection to the current theme
 	list.SetSelectedIndex(selectedIdx)
+	
+	// Set the max width for the list to match the modal width
+	list.SetMaxWidth(36) // 40 (modal max width) - 4 (modal padding)
 
 	return &themeDialog{
 		list:          list,

packages/tui/internal/components/list/list.go

@@ -5,6 +5,10 @@ import (
 
 	"github.com/charmbracelet/bubbles/v2/key"
 	tea "github.com/charmbracelet/bubbletea/v2"
+	"github.com/charmbracelet/lipgloss/v2"
+	"github.com/muesli/reflow/truncate"
+	"github.com/sst/opencode/internal/styles"
+	"github.com/sst/opencode/internal/theme"
 )
 
 type ListItem interface {
@@ -123,6 +127,9 @@ func (c *listComponent[T]) SetSelectedIndex(idx int) {
 func (c *listComponent[T]) View() string {
 	items := c.items
 	maxWidth := c.maxWidth
+	if maxWidth == 0 {
+		maxWidth = 80 // Default width if not set
+	}
 	maxVisibleItems := min(c.maxVisibleItems, len(items))
 	startIdx := 0
 
@@ -161,3 +168,36 @@ func NewListComponent[T ListItem](items []T, maxVisibleItems int, fallbackMsg st
 		selectedIdx:         0,
 	}
 }
+
+// StringItem is a simple implementation of ListItem for string values
+type StringItem string
+
+func (s StringItem) Render(selected bool, width int) string {
+	t := theme.CurrentTheme()
+	baseStyle := styles.BaseStyle()
+
+	truncatedStr := truncate.StringWithTail(string(s), uint(width-1), "...")
+
+	var itemStyle lipgloss.Style
+	if selected {
+		itemStyle = baseStyle.
+			Background(t.Primary()).
+			Foreground(t.Background()).
+			Width(width).
+			PaddingLeft(1)
+	} else {
+		itemStyle = baseStyle.
+			PaddingLeft(1)
+	}
+
+	return itemStyle.Render(truncatedStr)
+}
+
+// NewStringList creates a new list component with string items
+func NewStringList(items []string, maxVisibleItems int, fallbackMsg string, useAlphaNumericKeys bool) List[StringItem] {
+	stringItems := make([]StringItem, len(items))
+	for i, item := range items {
+		stringItems[i] = StringItem(item)
+	}
+	return NewListComponent(stringItems, maxVisibleItems, fallbackMsg, useAlphaNumericKeys)
+}

packages/tui/internal/components/modal/modal.go

@@ -103,13 +103,13 @@ func (m *Modal) Render(contentView string, background string) string {
 			Bold(true).
 			Padding(0, 1)
 
-		escStyle := baseStyle.Foreground(t.TextMuted()).Bold(false)
+		escStyle := baseStyle.Foreground(t.TextMuted())
 		escText := escStyle.Render("esc")
 
 		// Calculate position for esc text
 		titleWidth := lipgloss.Width(m.title)
 		escWidth := lipgloss.Width(escText)
-		spacesNeeded := max(0, innerWidth-titleWidth-escWidth-3)
+		spacesNeeded := max(0, innerWidth-titleWidth-escWidth-2)
 		spacer := strings.Repeat(" ", spacesNeeded)
 		titleLine := m.title + spacer + escText
 		titleLine = titleStyle.Render(titleLine)

packages/tui/internal/components/status/status.go

@@ -71,7 +71,7 @@ func formatTokensAndCost(tokens float32, contextWindow float32, cost float32) st
 	formattedCost := fmt.Sprintf("$%.2f", cost)
 	percentage := (float64(tokens) / float64(contextWindow)) * 100
 
-	return fmt.Sprintf("Tokens: %s (%d%%), Cost: %s", formattedTokens, int(percentage), formattedCost)
+	return fmt.Sprintf("Context: %s (%d%%), Cost: %s", formattedTokens, int(percentage), formattedCost)
 }
 
 func (m statusComponent) View() string {

packages/tui/internal/image/clipboard_unix.go

@@ -5,8 +5,8 @@ package image
 import (
 	"bytes"
 	"fmt"
-	"image"
 	"github.com/atotto/clipboard"
+	"image"
 )
 
 func GetImageFromClipboard() ([]byte, string, error) {
@@ -28,8 +28,6 @@ func GetImageFromClipboard() ([]byte, string, error) {
 
 }
 
-
-
 func binaryToImage(data []byte) ([]byte, error) {
 	reader := bytes.NewReader(data)
 	img, _, err := image.Decode(reader)
@@ -40,7 +38,6 @@ func binaryToImage(data []byte) ([]byte, error) {
 	return ImageToBytes(img)
 }
 
-
 func min(a, b int) int {
 	if a < b {
 		return a

packages/tui/internal/layout/overlay.go

@@ -109,11 +109,11 @@ func PlaceOverlay(
 			// Get the foreground line
 			fgLine := fgLines[i-y]
 			fgLineWidth := ansi.PrintableRuneWidth(fgLine)
-			
+
 			// Extract the styles at the border positions
 			leftStyle := getStyleAtPosition(bgLine, pos)
-			rightStyle := getStyleAtPosition(bgLine, pos + 1 + fgLineWidth)
-			
+			rightStyle := getStyleAtPosition(bgLine, pos+1+fgLineWidth)
+
 			// Left border - combine background from original with border foreground
 			leftSeq := combineStyles(leftStyle, options.borderColor)
 			if leftSeq != "" {
@@ -172,17 +172,17 @@ type ansiStyle struct {
 // parseANSISequence parses an ANSI escape sequence into its components
 func parseANSISequence(seq string) ansiStyle {
 	style := ansiStyle{}
-	
+
 	// Extract the parameters from the sequence (e.g., \x1b[38;5;123;48;5;456m -> "38;5;123;48;5;456")
 	if !strings.HasPrefix(seq, "\x1b[") || !strings.HasSuffix(seq, "m") {
 		return style
 	}
-	
+
 	params := seq[2 : len(seq)-1]
 	if params == "" {
 		return style
 	}
-	
+
 	parts := strings.Split(params, ";")
 	i := 0
 	for i < len(parts) {
@@ -222,7 +222,7 @@ func parseANSISequence(seq string) ansiStyle {
 		}
 		i++
 	}
-	
+
 	return style
 }
 
@@ -231,32 +231,32 @@ func combineStyles(bgStyle ansiStyle, fgColor *compat.AdaptiveColor) string {
 	if fgColor == nil && bgStyle.bgColor == "" && len(bgStyle.attrs) == 0 {
 		return ""
 	}
-	
+
 	var parts []string
-	
+
 	// Add attributes
 	parts = append(parts, bgStyle.attrs...)
-	
+
 	// Add background color from the original style
 	if bgStyle.bgColor != "" {
 		parts = append(parts, bgStyle.bgColor)
 	}
-	
+
 	// Add foreground color if specified
 	if fgColor != nil {
 		// Use the light color (could be improved to detect terminal background)
 		color := (*fgColor).Light
-		
+
 		// Use RGBA to get color components
 		r, g, b, _ := color.RGBA()
 		// RGBA returns 16-bit values, we need 8-bit
 		parts = append(parts, fmt.Sprintf("38;2;%d;%d;%d", r>>8, g>>8, b>>8))
 	}
-	
+
 	if len(parts) == 0 {
 		return ""
 	}
-	
+
 	return fmt.Sprintf("\x1b[%sm", strings.Join(parts, ";"))
 }
 
@@ -264,10 +264,10 @@ func combineStyles(bgStyle ansiStyle, fgColor *compat.AdaptiveColor) string {
 func getStyleAtPosition(s string, targetPos int) ansiStyle {
 	// ANSI escape sequence regex
 	ansiRegex := regexp.MustCompile(`\x1b\[[0-9;]*m`)
-	
+
 	visualPos := 0
 	currentStyle := ansiStyle{}
-	
+
 	i := 0
 	for i < len(s) && visualPos <= targetPos {
 		// Check if we're at an ANSI escape sequence
@@ -275,7 +275,7 @@ func getStyleAtPosition(s string, targetPos int) ansiStyle {
 			// Found an ANSI sequence at current position
 			seq := s[i : i+match[1]]
 			parsedStyle := parseANSISequence(seq)
-			
+
 			// Update current style (merge with existing)
 			if parsedStyle.fgColor != "" {
 				currentStyle.fgColor = parsedStyle.fgColor
@@ -286,7 +286,7 @@ func getStyleAtPosition(s string, targetPos int) ansiStyle {
 			if len(parsedStyle.attrs) > 0 {
 				currentStyle.attrs = parsedStyle.attrs
 			}
-			
+
 			i += match[1]
 		} else if i < len(s) {
 			// Regular character
@@ -298,7 +298,7 @@ func getStyleAtPosition(s string, targetPos int) ansiStyle {
 			visualPos++
 		}
 	}
-	
+
 	return currentStyle
 }
 

packages/tui/internal/theme/loader_test.go

@@ -133,4 +133,3 @@ func TestLoadThemesFromDirectories(t *testing.T) {
 		t.Error("Override theme not properly loaded")
 	}
 }
-

packages/tui/internal/theme/themes/matrix.json

@@ -0,0 +1,77 @@
+{
+  "$schema": "https://opencode.ai/theme.json",
+  "defs": {
+    "matrixInk0": "#0a0e0a",
+    "matrixInk1": "#0e130d",
+    "matrixInk2": "#141c12",
+    "matrixInk3": "#1e2a1b",
+    "rainGreen": "#2eff6a",
+    "rainGreenDim": "#1cc24b",
+    "rainGreenHi": "#62ff94",
+    "rainCyan": "#00efff",
+    "rainTeal": "#24f6d9",
+    "rainPurple": "#c770ff",
+    "rainOrange": "#ffa83d",
+    "alertRed": "#ff4b4b",
+    "alertYellow": "#e6ff57",
+    "alertBlue": "#30b3ff",
+    "rainGray": "#8ca391",
+    "lightBg": "#eef3ea",
+    "lightPaper": "#e4ebe1",
+    "lightInk1": "#dae1d7",
+    "lightText": "#203022",
+    "lightGray": "#748476"
+  },
+  "theme": {
+    "primary": { "dark": "rainGreen", "light": "rainGreenDim" },
+    "secondary": { "dark": "rainCyan", "light": "rainTeal" },
+    "accent": { "dark": "rainPurple", "light": "rainPurple" },
+    "error": { "dark": "alertRed", "light": "alertRed" },
+    "warning": { "dark": "alertYellow", "light": "alertYellow" },
+    "success": { "dark": "rainGreenHi", "light": "rainGreenDim" },
+    "info": { "dark": "alertBlue", "light": "alertBlue" },
+    "text": { "dark": "rainGreenHi", "light": "lightText" },
+    "textMuted": { "dark": "rainGray", "light": "lightGray" },
+    "background": { "dark": "matrixInk0", "light": "lightBg" },
+    "backgroundPanel": { "dark": "matrixInk1", "light": "lightPaper" },
+    "backgroundElement": { "dark": "matrixInk2", "light": "lightInk1" },
+    "border": { "dark": "matrixInk3", "light": "lightGray" },
+    "borderActive": { "dark": "rainGreen", "light": "rainGreenDim" },
+    "borderSubtle": { "dark": "matrixInk2", "light": "lightInk1" },
+    "diffAdded": { "dark": "rainGreenDim", "light": "rainGreenDim" },
+    "diffRemoved": { "dark": "alertRed", "light": "alertRed" },
+    "diffContext": { "dark": "rainGray", "light": "lightGray" },
+    "diffHunkHeader": { "dark": "alertBlue", "light": "alertBlue" },
+    "diffHighlightAdded": { "dark": "#77ffaf", "light": "#5dac7e" },
+    "diffHighlightRemoved": { "dark": "#ff7171", "light": "#d53a3a" },
+    "diffAddedBg": { "dark": "#132616", "light": "#e0efde" },
+    "diffRemovedBg": { "dark": "#261212", "light": "#f9e5e5" },
+    "diffContextBg": { "dark": "matrixInk1", "light": "lightPaper" },
+    "diffLineNumber": { "dark": "matrixInk3", "light": "lightGray" },
+    "diffAddedLineNumberBg": { "dark": "#0f1b11", "light": "#d6e7d2" },
+    "diffRemovedLineNumberBg": { "dark": "#1b1414", "light": "#f2d2d2" },
+    "markdownText": { "dark": "rainGreenHi", "light": "lightText" },
+    "markdownHeading": { "dark": "rainCyan", "light": "rainTeal" },
+    "markdownLink": { "dark": "alertBlue", "light": "alertBlue" },
+    "markdownLinkText": { "dark": "rainTeal", "light": "rainTeal" },
+    "markdownCode": { "dark": "rainGreenDim", "light": "rainGreenDim" },
+    "markdownBlockQuote": { "dark": "rainGray", "light": "lightGray" },
+    "markdownEmph": { "dark": "rainOrange", "light": "rainOrange" },
+    "markdownStrong": { "dark": "alertYellow", "light": "alertYellow" },
+    "markdownHorizontalRule": { "dark": "rainGray", "light": "lightGray" },
+    "markdownListItem": { "dark": "alertBlue", "light": "alertBlue" },
+    "markdownListEnumeration": { "dark": "rainTeal", "light": "rainTeal" },
+    "markdownImage": { "dark": "alertBlue", "light": "alertBlue" },
+    "markdownImageText": { "dark": "rainTeal", "light": "rainTeal" },
+    "markdownCodeBlock": { "dark": "rainGreenHi", "light": "lightText" },
+    "syntaxComment": { "dark": "rainGray", "light": "lightGray" },
+    "syntaxKeyword": { "dark": "rainPurple", "light": "rainPurple" },
+    "syntaxFunction": { "dark": "alertBlue", "light": "alertBlue" },
+    "syntaxVariable": { "dark": "rainGreenHi", "light": "lightText" },
+    "syntaxString": { "dark": "rainGreenDim", "light": "rainGreenDim" },
+    "syntaxNumber": { "dark": "rainOrange", "light": "rainOrange" },
+    "syntaxType": { "dark": "alertYellow", "light": "alertYellow" },
+    "syntaxOperator": { "dark": "rainTeal", "light": "rainTeal" },
+    "syntaxPunctuation": { "dark": "rainGreenHi", "light": "lightText" }
+  }
+}

packages/tui/internal/theme/themes/nord.json

@@ -48,11 +48,11 @@
       "light": "nord10"
     },
     "text": {
-      "dark": "nord4",
+      "dark": "nord6",
       "light": "nord0"
     },
     "textMuted": {
-      "dark": "nord3",
+      "dark": "#8B95A7",
       "light": "nord1"
     },
     "background": {
@@ -64,7 +64,7 @@
       "light": "nord5"
     },
     "backgroundElement": {
-      "dark": "nord1",
+      "dark": "nord2",
       "light": "nord4"
     },
     "border": {
@@ -88,11 +88,11 @@
       "light": "nord11"
     },
     "diffContext": {
-      "dark": "nord3",
+      "dark": "#8B95A7",
       "light": "nord3"
     },
     "diffHunkHeader": {
-      "dark": "nord3",
+      "dark": "#8B95A7",
       "light": "nord3"
     },
     "diffHighlightAdded": {
@@ -148,7 +148,7 @@
       "light": "nord14"
     },
     "markdownBlockQuote": {
-      "dark": "nord3",
+      "dark": "#8B95A7",
       "light": "nord3"
     },
     "markdownEmph": {
@@ -160,7 +160,7 @@
       "light": "nord13"
     },
     "markdownHorizontalRule": {
-      "dark": "nord3",
+      "dark": "#8B95A7",
       "light": "nord3"
     },
     "markdownListItem": {
@@ -184,7 +184,7 @@
       "light": "nord0"
     },
     "syntaxComment": {
-      "dark": "nord3",
+      "dark": "#8B95A7",
       "light": "nord3"
     },
     "syntaxKeyword": {

packages/tui/internal/tui/tui.go

@@ -117,7 +117,7 @@ func (a appModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 			}
 
 			updated, cmd := a.completions.Update(
-				app.CompletionDialogTriggerdMsg{
+				app.CompletionDialogTriggeredMsg{
 					InitialValue: initialValue,
 				},
 			)
@@ -178,7 +178,7 @@ func (a appModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		}
 
 		// 7. Fallback to editor. This is for other characters
-		// likek backspace, tab, etc.
+		// like backspace, tab, etc.
 		updatedEditor, cmd := a.editor.Update(msg)
 		a.editor = updatedEditor.(chat.EditorComponent)
 		return a, cmd
@@ -189,6 +189,7 @@ func (a appModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 		updated, cmd := a.messages.Update(msg)
 		a.messages = updated.(chat.MessagesComponent)
 		cmds = append(cmds, cmd)
+  return a, tea.Batch(cmds...)
 	case tea.BackgroundColorMsg:
 		styles.Terminal = &styles.TerminalInfo{
 			BackgroundIsDark: msg.IsDark(),
@@ -363,7 +364,7 @@ func (a appModel) executeCommand(command commands.Command) (tea.Model, tea.Cmd)
 	}
 	switch command.Name {
 	case commands.AppHelpCommand:
-		helpDialog := dialog.NewHelpDialog(a.app.Commands.Sorted())
+		helpDialog := dialog.NewHelpDialog(a.app)
 		a.modal = helpDialog
 	case commands.EditorOpenCommand:
 		if a.app.IsBusy() {

packages/tui/pkg/client/generated-client.go

@@ -603,7 +603,7 @@ func (a *MessageInfo_Metadata_Tool_AdditionalProperties) UnmarshalJSON(b []byte)
 			var fieldVal interface{}
 			err := json.Unmarshal(fieldBuf, &fieldVal)
 			if err != nil {
-				return fmt.Errorf("error unmarshaling field %s: %w", fieldName, err)
+				return fmt.Errorf("error unmarshalling field %s: %w", fieldName, err)
 			}
 			a.AdditionalProperties[fieldName] = fieldVal
 		}

packages/web/src/components/Share.tsx

@@ -444,7 +444,7 @@ function MarkdownPart(props: MarkdownPartProps) {
       {...rest}
     >
       <MarkdownView
-        data-elment-markdown
+        data-element-markdown
         markdown={local.text}
         ref={(el) => (divEl = el)}
       />
@@ -726,7 +726,7 @@ export default function Share(props: {
     for (let i = 0; i < messages().length; i++) {
       const msg = messages()[i]
 
-      // TODO: Cleaup
+      // TODO: Cleanup
       // const system = result.messages.length === 0 && msg.role === "system"
       const assistant = msg.metadata?.assistant
 

packages/web/src/components/share.module.css

@@ -659,12 +659,12 @@
   }
 
   &[data-expanded="true"] {
-    [data-elment-markdown] {
+    [data-element-markdown] {
       display: block;
     }
   }
   &[data-expanded="false"] {
-    [data-elment-markdown] {
+    [data-element-markdown] {
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 3;