From 636dff046d3a333c6ad452eb77b966b81f1e4780 Mon Sep 17 00:00:00 2001
From: Ariane Emory <ariane.emory@protonmail.com>
Date: Thu, 26 Feb 2026 10:58:12 -0500
Subject: [PATCH] feat(tui): sort message modal options alphabetically

Implemented `sort` prop in `DialogSelect` to allow alphabetical sorting of menu options. Enabled this for the message click modal in `DialogMessage`.
---
 .../src/cli/cmd/tui/routes/session/dialog-message.tsx     | 1 +
 packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx    | 8 ++++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/dialog-message.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/dialog-message.tsx
index ff17b5567eb..44e009b51f2 100644
--- a/packages/opencode/src/cli/cmd/tui/routes/session/dialog-message.tsx
+++ b/packages/opencode/src/cli/cmd/tui/routes/session/dialog-message.tsx
@@ -18,6 +18,7 @@ export function DialogMessage(props: {
 
   return (
     <DialogSelect
+      sort={true}
       title="Message Actions"
       options={[
         {
diff --git a/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx b/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx
index 151f73cf7c0..a2ac7d73a69 100644
--- a/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx
+++ b/packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx
@@ -1,6 +1,6 @@
 import { InputRenderable, RGBA, ScrollBoxRenderable, TextAttributes } from "@opentui/core"
 import { useTheme, selectedForeground } from "@tui/context/theme"
-import { entries, filter, flatMap, groupBy, pipe, take } from "remeda"
+import { entries, filter, flatMap, groupBy, mapValues, pipe, take } from "remeda"
 import { batch, createEffect, createMemo, For, Show, type JSX, on } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useKeyboard, useTerminalDimensions } from "@opentui/solid"
@@ -21,6 +21,7 @@ export interface DialogSelectProps<T> {
   onFilter?: (query: string) => void
   onSelect?: (option: DialogSelectOption<T>) => void
   skipFilter?: boolean
+  sort?: boolean
   keybind?: {
     keybind?: Keybind.Info
     title: string
@@ -108,7 +109,10 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
     const result = pipe(
       filtered(),
       groupBy((x) => x.category ?? ""),
-      // mapValues((x) => x.sort((a, b) => a.title.localeCompare(b.title))),
+      (groups) => {
+        if (!props.sort || store.filter) return groups
+        return mapValues(groups, (x) => x.sort((a, b) => a.title.localeCompare(b.title)))
+      },
       entries(),
     )
     return result