Align selector shortcuts and widen sidebar

packages/ui/src/components/agent-selector.tsx

@@ -3,7 +3,6 @@ import { For, Show, createEffect, createMemo } from "solid-js"
 import { agents, fetchAgents, sessions } from "../stores/sessions"
 import { ChevronDown } from "lucide-solid"
 import type { Agent } from "../types/session"
-import Kbd from "./kbd"
 
 interface AgentSelectorProps {
   instanceId: string
@@ -116,9 +115,6 @@ export default function AgentSelector(props: AgentSelectorProps) {
           </Select.Content>
         </Select.Portal>
       </Select>
-      <span class="hint sidebar-selector-hint">
-        <Kbd shortcut="cmd+shift+a" />
-      </span>
     </div>
   )
 }

packages/ui/src/components/instance/instance-shell.tsx

@@ -14,6 +14,7 @@ import InfoView from "../info-view"
 import AgentSelector from "../agent-selector"
 import ModelSelector from "../model-selector"
 import CommandPalette from "../command-palette"
+import Kbd from "../kbd"
 import ContextUsagePanel from "../session/context-usage-panel"
 import SessionView from "../session/session-view"
 
@@ -28,7 +29,7 @@ interface InstanceShellProps {
   onExecuteCommand: (command: Command) => void
 }
 
-const DEFAULT_SESSION_SIDEBAR_WIDTH = 280
+const DEFAULT_SESSION_SIDEBAR_WIDTH = 350
 
 const InstanceShell: Component<InstanceShellProps> = (props) => {
   const [sessionSidebarWidth, setSessionSidebarWidth] = createSignal(DEFAULT_SESSION_SIDEBAR_WIDTH)
@@ -114,12 +115,22 @@ const InstanceShell: Component<InstanceShellProps> = (props) => {
                       onAgentChange={(agent) => props.handleSidebarAgentChange(activeSession().id, agent)}
                     />
 
+                    <div class="sidebar-selector-hints" aria-hidden="true">
+                      <span class="hint sidebar-selector-hint sidebar-selector-hint--left">
+                        <Kbd shortcut="cmd+shift+a" />
+                      </span>
+                      <span class="hint sidebar-selector-hint sidebar-selector-hint--right">
+                        <Kbd shortcut="cmd+shift+m" />
+                      </span>
+                    </div>
+
                     <ModelSelector
                       instanceId={props.instance.id}
                       sessionId={activeSession().id}
                       currentModel={activeSession().model}
                       onModelChange={(model) => props.handleSidebarModelChange(activeSession().id, model)}
                     />
+
                   </div>
                 </>
               )}

packages/ui/src/components/model-selector.tsx

@@ -3,7 +3,6 @@ import { createEffect, createMemo, createSignal } from "solid-js"
 import { providers, fetchProviders } from "../stores/sessions"
 import { ChevronDown } from "lucide-solid"
 import type { Model } from "../types/session"
-import Kbd from "./kbd"
 
 interface ModelSelectorProps {
   instanceId: string
@@ -132,9 +131,6 @@ export default function ModelSelector(props: ModelSelectorProps) {
           </Combobox.Content>
         </Combobox.Portal>
       </Combobox>
-      <span class="hint sidebar-selector-hint">
-        <Kbd shortcut="cmd+shift+m" />
-      </span>
     </div>
   )
 }

packages/ui/src/components/session-list.tsx

@@ -24,9 +24,9 @@ interface SessionListProps {
 }
 
 const MIN_WIDTH = 200
-const MAX_WIDTH = 500
+const MAX_WIDTH = 520
-const DEFAULT_WIDTH = 280
+const DEFAULT_WIDTH = 350
-const STORAGE_KEY = "opencode-session-sidebar-width"
+const STORAGE_KEY = "opencode-session-sidebar-width-v7"
 
 function formatSessionStatus(status: SessionStatus): string {
   switch (status) {

packages/ui/src/styles/panels/session-layout.css

@@ -58,6 +58,24 @@ session-sidebar-controls .selector-trigger-primary {
   color: var(--text-muted);
 }
 
+.sidebar-selector-hints {
+  @apply flex items-center gap-2 w-full;
+  justify-content: space-between;
+}
+
+.sidebar-selector-hint--left,
+.sidebar-selector-hint--right {
+  @apply flex-1;
+}
+
+.sidebar-selector-hint--left {
+  justify-content: flex-start;
+}
+
+.sidebar-selector-hint--right {
+  justify-content: flex-end;
+}
+
 .session-header-hints {
   @apply flex-shrink-0;
 }