tweak: display MCPs in alphabetic order in the sidebar. (#4680)

Co-authored-by: Github Action <[email protected]>

flake.lock

@@ -2,11 +2,11 @@
   "nodes": {
     "nixpkgs": {
       "locked": {
-        "lastModified": 1763618868,
-        "narHash": "sha256-v5afmLjn/uyD9EQuPBn7nZuaZVV9r+JerayK/4wvdWA=",
+        "lastModified": 1763806073,
+        "narHash": "sha256-FHsEKDvfWpzdADWj99z7vBk4D716Ujdyveo5+A048aI=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "a8d610af3f1a5fb71e23e08434d8d61a466fc942",
+        "rev": "878e468e02bfabeda08c79250f7ad583037f2227",
         "type": "github"
       },
       "original": {

nix/hashes.json

@@ -1,3 +1,3 @@
 {
-  "nodeModules": "sha256-/ZkyVHgRMjhzBpnDNTR6X+TomtTMarVU7gmq9Z8Czr8="
+  "nodeModules": "sha256-m7hL9Uzqk+oa2/FtgkzEPgi+m/VZP1SvjpgYHNjiS1c="
 }

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