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; }