diff --git a/packages/ui/src/components/agent-selector.tsx b/packages/ui/src/components/agent-selector.tsx index 25112669..6541a88e 100644 --- a/packages/ui/src/components/agent-selector.tsx +++ b/packages/ui/src/components/agent-selector.tsx @@ -4,6 +4,7 @@ import { agents, fetchAgents, sessions } from "../stores/sessions" import { ChevronDown } from "lucide-solid" import type { Agent } from "../types/session" import { getLogger } from "../lib/logger" +import Kbd from "./kbd" const log = getLogger("session") @@ -99,15 +100,20 @@ export default function AgentSelector(props: AgentSelectorProps) { data-agent-selector class="selector-trigger" > - > - {(state) => ( -
- - Agent: {state.selectedOption()?.name ?? "None"} - -
- )} - +
+ > + {(state) => ( +
+ + Agent: {state.selectedOption()?.name ?? "None"} + +
+ )} + +
+ diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx index 382d2a9b..15753435 100644 --- a/packages/ui/src/components/instance/instance-shell2.tsx +++ b/packages/ui/src/components/instance/instance-shell2.tsx @@ -48,6 +48,7 @@ import { clearSessionRenderCache } from "../message-block" import { isOpen as isCommandPaletteOpen, hideCommandPalette, showCommandPalette } from "../../stores/command-palette" import SessionList from "../session-list" import KeyboardHint from "../keyboard-hint" +import Kbd from "../kbd" import InstanceWelcomeView from "../instance-welcome-view" import InfoView from "../info-view" import InstanceServiceStatus from "../instance-service-status" @@ -57,7 +58,6 @@ import ThinkingSelector from "../thinking-selector" import CommandPalette from "../command-palette" import PermissionNotificationBanner from "../permission-notification-banner" import PermissionApprovalModal from "../permission-approval-modal" -import Kbd from "../kbd" import { TodoListView } from "../tool-call/renderers/todo" import ContextUsagePanel from "../session/context-usage-panel" import SessionView from "../session/session-view" @@ -915,18 +915,6 @@ const InstanceShell2: Component = (props) => { onAgentChange={(agent) => props.handleSidebarAgentChange(activeSession().id, agent)} /> - - -
+
Model: {currentModelValue()?.name ?? "None"} @@ -115,6 +116,9 @@ export default function ModelSelector(props: ModelSelectorProps) { )}
+ diff --git a/packages/ui/src/components/thinking-selector.tsx b/packages/ui/src/components/thinking-selector.tsx index 14f69443..bc0d5033 100644 --- a/packages/ui/src/components/thinking-selector.tsx +++ b/packages/ui/src/components/thinking-selector.tsx @@ -4,6 +4,7 @@ import { providers, fetchProviders } from "../stores/sessions" import { ChevronDown } from "lucide-solid" import { getLogger } from "../lib/logger" import { getModelThinkingSelection, setModelThinkingSelection } from "../stores/preferences" +import Kbd from "./kbd" const log = getLogger("session") @@ -83,9 +84,12 @@ export default function ThinkingSelector(props: ThinkingSelectorProps) { -
+
{triggerPrimary()}
+ diff --git a/packages/ui/src/styles/components/selector.css b/packages/ui/src/styles/components/selector.css index 742b1ae0..0c6ba1aa 100644 --- a/packages/ui/src/styles/components/selector.css +++ b/packages/ui/src/styles/components/selector.css @@ -27,6 +27,10 @@ @apply items-start; } +.selector-trigger-label--top { + @apply self-start; +} + .selector-trigger-primary { @apply text-sm font-medium truncate; color: var(--text-primary); @@ -46,6 +50,15 @@ color: var(--text-muted); } +.selector-trigger-hint { + @apply flex-shrink-0; + color: var(--text-muted); +} + +.selector-trigger-hint--top { + @apply self-start mt-0.5; +} + .selector-popover { @apply rounded-md shadow-lg overflow-hidden min-w-[300px]; background-color: var(--surface-base); diff --git a/packages/ui/src/styles/panels/session-layout.css b/packages/ui/src/styles/panels/session-layout.css index c6c1b808..845f7c69 100644 --- a/packages/ui/src/styles/panels/session-layout.css +++ b/packages/ui/src/styles/panels/session-layout.css @@ -115,34 +115,6 @@ session-sidebar-controls .selector-trigger-primary { @apply flex flex-col gap-1 w-full; } -.sidebar-selector-hint { - @apply flex justify-center text-xs w-full; - color: var(--text-muted); -} - -.sidebar-selector-hints { - @apply grid gap-2 w-full; - grid-template-columns: repeat(3, minmax(0, 1fr)); -} - -.sidebar-selector-hint--left, -.sidebar-selector-hint--center, -.sidebar-selector-hint--right { - justify-content: center; -} - -@media (max-width: 520px) { - .sidebar-selector-hints { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } -} - -@media (max-width: 360px) { - .sidebar-selector-hints { - grid-template-columns: 1fr; - } -} - .session-header-hints { @apply flex-shrink-0; }