diff --git a/packages/ui/src/components/agent-selector.tsx b/packages/ui/src/components/agent-selector.tsx
index 147bc7e2..261e26f1 100644
--- a/packages/ui/src/components/agent-selector.tsx
+++ b/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) {
-
)
}
diff --git a/packages/ui/src/components/instance/instance-shell.tsx b/packages/ui/src/components/instance/instance-shell.tsx
index 08996641..5c429425 100644
--- a/packages/ui/src/components/instance/instance-shell.tsx
+++ b/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 = (props) => {
const [sessionSidebarWidth, setSessionSidebarWidth] = createSignal(DEFAULT_SESSION_SIDEBAR_WIDTH)
@@ -114,12 +115,22 @@ const InstanceShell: Component = (props) => {
onAgentChange={(agent) => props.handleSidebarAgentChange(activeSession().id, agent)}
/>
+
+
props.handleSidebarModelChange(activeSession().id, model)}
/>
+
>
)}
diff --git a/packages/ui/src/components/model-selector.tsx b/packages/ui/src/components/model-selector.tsx
index 34a33318..9f8d4a9f 100644
--- a/packages/ui/src/components/model-selector.tsx
+++ b/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) {
-
)
}
diff --git a/packages/ui/src/components/session-list.tsx b/packages/ui/src/components/session-list.tsx
index 1876d8cf..74fa5423 100644
--- a/packages/ui/src/components/session-list.tsx
+++ b/packages/ui/src/components/session-list.tsx
@@ -24,9 +24,9 @@ interface SessionListProps {
}
const MIN_WIDTH = 200
-const MAX_WIDTH = 500
-const DEFAULT_WIDTH = 280
-const STORAGE_KEY = "opencode-session-sidebar-width"
+const MAX_WIDTH = 520
+const DEFAULT_WIDTH = 350
+const STORAGE_KEY = "opencode-session-sidebar-width-v7"
function formatSessionStatus(status: SessionStatus): string {
switch (status) {
diff --git a/packages/ui/src/styles/panels/session-layout.css b/packages/ui/src/styles/panels/session-layout.css
index d42033d1..af0452ea 100644
--- a/packages/ui/src/styles/panels/session-layout.css
+++ b/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;
}