From 75c0c0a0985400bb8470b55cfcafb94744130bc0 Mon Sep 17 00:00:00 2001
From: Ariane Emory <97994360+ariane-emory@users.noreply.github.com>
Date: Mon, 24 Nov 2025 03:02:04 -0500
Subject: tweak: display MCPs in alphabetic order in the sidebar. (#4680)

Co-authored-by: Github Action <action@github.com>
---
 .../opencode/src/cli/cmd/tui/routes/session/sidebar.tsx     | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

(limited to 'packages')

diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx
index d0241d422..8302bfefe 100644
--- a/packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx
+++ b/packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx
@@ -18,6 +18,9 @@ export function Sidebar(props: { sessionID: string }) {
   const [todoExpanded, setTodoExpanded] = createSignal(true)
   const [lspExpanded, setLspExpanded] = createSignal(true)
 
+  // Sort MCP servers alphabetically for consistent display order
+  const mcpEntries = createMemo(() => Object.entries(sync.data.mcp).sort(([a], [b]) => a.localeCompare(b)))
+
   const cost = createMemo(() => {
     const total = messages().reduce((sum, x) => sum + (x.role === "assistant" ? x.cost : 0), 0)
     return new Intl.NumberFormat("en-US", {
@@ -58,22 +61,22 @@ export function Sidebar(props: { sessionID: string }) {
             <text fg={theme.textMuted}>{context()?.percentage ?? 0}% used</text>
             <text fg={theme.textMuted}>{cost()} spent</text>
           </box>
-          <Show when={Object.keys(sync.data.mcp).length > 0}>
+          <Show when={mcpEntries().length > 0}>
             <box>
               <box
                 flexDirection="row"
                 gap={1}
-                onMouseDown={() => Object.keys(sync.data.mcp).length > 2 && setMcpExpanded(!mcpExpanded())}
+                onMouseDown={() => mcpEntries().length > 2 && setMcpExpanded(!mcpExpanded())}
               >
-                <Show when={Object.keys(sync.data.mcp).length > 2}>
+                <Show when={mcpEntries().length > 2}>
                   <text fg={theme.text}>{mcpExpanded() ? "▼" : "▶"}</text>
                 </Show>
                 <text fg={theme.text}>
                   <b>MCP</b>
                 </text>
               </box>
-              <Show when={Object.keys(sync.data.mcp).length <= 2 || mcpExpanded()}>
-                <For each={Object.entries(sync.data.mcp)}>
+              <Show when={mcpEntries().length <= 2 || mcpExpanded()}>
+                <For each={mcpEntries()}>
                   {([key, item]) => (
                     <box flexDirection="row" gap={1}>
                       <text
-- 
cgit v1.2.3