diff --git a/src/components/agent-selector.tsx b/src/components/agent-selector.tsx index 5ff794f6..147bc7e2 100644 --- a/src/components/agent-selector.tsx +++ b/src/components/agent-selector.tsx @@ -40,6 +40,14 @@ export default function AgentSelector(props: AgentSelectorProps) { return filtered }) + createEffect(() => { + const list = availableAgents() + if (list.length === 0) return + if (!list.some((agent) => agent.name === props.currentAgent)) { + void props.onAgentChange(list[0].name) + } + }) + createEffect(() => { if (instanceAgents().length === 0) { fetchAgents(props.instanceId).catch(console.error) diff --git a/src/components/folder-selection-view.tsx b/src/components/folder-selection-view.tsx index 91486e73..49712284 100644 --- a/src/components/folder-selection-view.tsx +++ b/src/components/folder-selection-view.tsx @@ -3,6 +3,7 @@ import { Folder, Clock, Trash2, FolderPlus, Settings, ChevronDown, ChevronUp } f import { recentFolders, removeRecentFolder, preferences, updateLastUsedBinary } from "../stores/preferences" import OpenCodeBinarySelector from "./opencode-binary-selector" import EnvironmentVariablesEditor from "./environment-variables-editor" +import Kbd from "./kbd" interface FolderSelectionViewProps { onSelectFolder: (folder?: string, binaryPath?: string) => void @@ -14,35 +15,38 @@ const FolderSelectionView: Component = (props) => { const [focusMode, setFocusMode] = createSignal<"recent" | "new" | null>("recent") const [showAdvanced, setShowAdvanced] = createSignal(false) const [selectedBinary, setSelectedBinary] = createSignal(preferences().lastUsedBinary || "opencode") - + let recentListRef: HTMLDivElement | undefined + const folders = () => recentFolders() - + // Update selected binary when preferences change createEffect(() => { - const lastUsed = preferences().lastUsedBinary - if (lastUsed && lastUsed !== selectedBinary()) { - setSelectedBinary(lastUsed) - } - }) - + const lastUsed = preferences().lastUsedBinary + if (lastUsed && lastUsed !== selectedBinary()) { + setSelectedBinary(lastUsed) + } + }) + function scrollToIndex(index: number) { - const element = document.querySelector(`[data-folder-index="${index}"]`) + const element = recentListRef?.querySelector(`[data-folder-index="${index}"]`) if (element) { element.scrollIntoView({ block: "nearest", behavior: "auto" }) } } + function handleKeyDown(e: KeyboardEvent) { const folderList = folders() - - if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) { + + if ((e.metaKey || e.ctrlKey) && !e.shiftKey && e.key.toLowerCase() === "n") { e.preventDefault() handleBrowse() return } - + if (folderList.length === 0) return + if (e.key === "ArrowDown") { e.preventDefault() const newIndex = Math.min(selectedIndex() + 1, folderList.length - 1) @@ -154,21 +158,22 @@ const FolderSelectionView: Component = (props) => { } return ( -
-
-
-
+
+
+
+

Welcome to OpenCode

Select a folder to start coding with AI

+ +
-
0} fallback={ -
+
@@ -177,22 +182,27 @@ const FolderSelectionView: Component = (props) => {
} > -
-
-

Recent Folders

-

- {folders().length} {folders().length === 1 ? "folder" : "folders"} available -

-
-
- - {(folder, index) => ( -
+
+
+

Recent Folders

+

+ {folders().length} {folders().length === 1 ? "folder" : "folders"} available +

+
+
(recentListRef = el)} + > + + {(folder, index) => ( +
+
-
+

Browse for Folder

Select any folder on your computer

@@ -254,9 +264,7 @@ const FolderSelectionView: Component = (props) => { {props.isLoading ? "Opening..." : "Browse Folders"}
- - Cmd+Enter - +
@@ -297,7 +305,7 @@ const FolderSelectionView: Component = (props) => {
-
+
0}>
@@ -315,7 +323,7 @@ const FolderSelectionView: Component = (props) => {
- Cmd+Enter + Browse
diff --git a/src/components/instance-welcome-view.tsx b/src/components/instance-welcome-view.tsx index aef71edd..00d4d480 100644 --- a/src/components/instance-welcome-view.tsx +++ b/src/components/instance-welcome-view.tsx @@ -1,7 +1,11 @@ -import { Component, createSignal, Show, For, createEffect, onMount, onCleanup } from "solid-js" +import { Component, createSignal, Show, For, createEffect, onMount, onCleanup, createMemo } from "solid-js" import type { Instance } from "../types/instance" -import { getParentSessions, createSession, setActiveParentSession, agents } from "../stores/sessions" +import { getParentSessions, createSession, setActiveParentSession } from "../stores/sessions" import InstanceInfo from "./instance-info" +import KeyboardHint from "./keyboard-hint" +import Kbd from "./kbd" +import { keyboardRegistry, type KeyboardShortcut } from "../lib/keyboard-registry" +import { isMac } from "../lib/keyboard-utils" interface InstanceWelcomeViewProps { @@ -9,20 +13,28 @@ interface InstanceWelcomeViewProps { } const InstanceWelcomeView: Component = (props) => { - const [selectedAgent, setSelectedAgent] = createSignal("") const [isCreating, setIsCreating] = createSignal(false) const [selectedIndex, setSelectedIndex] = createSignal(0) const [focusMode, setFocusMode] = createSignal<"sessions" | "new-session" | null>("sessions") const parentSessions = () => getParentSessions(props.instance.id) - const agentList = () => agents().get(props.instance.id) || [] - - createEffect(() => { - const list = agentList() - if (list.length > 0 && !selectedAgent()) { - setSelectedAgent(list[0].name) + const newSessionShortcut = createMemo(() => { + const registered = keyboardRegistry.get("session-new") + if (registered) return registered + return { + id: "session-new-display", + key: "n", + modifiers: { + shift: true, + meta: isMac(), + ctrl: !isMac(), + }, + handler: () => {}, + description: "New Session", + context: "global", } }) + const newSessionShortcutString = createMemo(() => (isMac() ? "cmd+shift+n" : "ctrl+shift+n")) createEffect(() => { const sessions = parentSessions() @@ -45,7 +57,7 @@ const InstanceWelcomeView: Component = (props) => { function handleKeyDown(e: KeyboardEvent) { const sessions = parentSessions() - if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) { + if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === "n") { e.preventDefault() handleNewSession() return @@ -133,11 +145,11 @@ const InstanceWelcomeView: Component = (props) => { } async function handleNewSession() { - if (isCreating() || agentList().length === 0) return + if (isCreating()) return setIsCreating(true) try { - const session = await createSession(props.instance.id, selectedAgent()) + const session = await createSession(props.instance.id) setActiveParentSession(props.instance.id, session.id) } catch (error) { console.error("Failed to create session:", error) @@ -153,7 +165,7 @@ const InstanceWelcomeView: Component = (props) => { 0} fallback={ -
+
= (props) => {
} > -
+

Resume Session

{parentSessions().length} {parentSessions().length === 1 ? "session" : "sessions"} available

-
+
{(session, index) => (
= (props) => {

Start New Session

-

Create a fresh conversation with your chosen agent

+

We’ll reuse your last agent/model automatically

- 0}> -
- - -
- -
@@ -312,10 +302,7 @@ const InstanceWelcomeView: Component = (props) => { Enter Resume
-
- Cmd+Enter - New Session -
+
diff --git a/src/components/message-stream.tsx b/src/components/message-stream.tsx index 50b34fe4..3aa005e5 100644 --- a/src/components/message-stream.tsx +++ b/src/components/message-stream.tsx @@ -577,10 +577,11 @@ export default function MessageStream(props: MessageStreamProps) {

Start a conversation

-

Type a message below or try:

+

Type a message below or open the Command Palette:

  • - /init-project + Command Palette +
  • Ask about your codebase
  • diff --git a/src/components/session-picker.tsx b/src/components/session-picker.tsx index bf627980..60384f2c 100644 --- a/src/components/session-picker.tsx +++ b/src/components/session-picker.tsx @@ -21,7 +21,12 @@ const SessionPicker: Component = (props) => { createEffect(() => { const list = agentList() - if (list.length > 0 && !selectedAgent()) { + if (list.length === 0) { + setSelectedAgent("") + return + } + const current = selectedAgent() + if (!current || !list.some((agent) => agent.name === current)) { setSelectedAgent(list[0].name) } }) diff --git a/src/lib/keyboard.ts b/src/lib/keyboard.ts index 1059cdfa..be00976b 100644 --- a/src/lib/keyboard.ts +++ b/src/lib/keyboard.ts @@ -1,5 +1,7 @@ import { instances, activeInstanceId, setActiveInstanceId } from "../stores/instances" import { activeSessionId, setActiveSession, getSessions, activeParentSessionId } from "../stores/sessions" +import { keyboardRegistry } from "./keyboard-registry" +import { isMac } from "./keyboard-utils" export function setupTabKeyboardShortcuts( handleNewInstance: () => void, @@ -8,6 +10,22 @@ export function setupTabKeyboardShortcuts( handleCloseSession: (instanceId: string, sessionId: string) => void, handleCommandPalette: () => void, ) { + keyboardRegistry.register({ + id: "session-new", + key: "n", + modifiers: { + shift: true, + meta: isMac(), + ctrl: !isMac(), + }, + handler: () => { + const instanceId = activeInstanceId() + if (instanceId) void handleNewSession(instanceId) + }, + description: "New Session", + context: "global", + }) + window.addEventListener("keydown", (e) => { if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === "p") { e.preventDefault() @@ -47,14 +65,6 @@ export function setupTabKeyboardShortcuts( handleNewInstance() } - if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === "n") { - e.preventDefault() - const instanceId = activeInstanceId() - if (instanceId) { - handleNewSession(instanceId) - } - } - if ((e.metaKey || e.ctrlKey) && !e.shiftKey && e.key.toLowerCase() === "w") { e.preventDefault() const instanceId = activeInstanceId() diff --git a/src/lib/storage.ts b/src/lib/storage.ts index 0dd5c16e..d0a3254e 100644 --- a/src/lib/storage.ts +++ b/src/lib/storage.ts @@ -52,6 +52,8 @@ export class FileStorage { preferences: { showThinkingBlocks: false, environmentVariables: {}, + modelRecents: [], + agentModelSelections: {}, }, recentFolders: [], opencodeBinaries: [], diff --git a/src/stores/preferences.ts b/src/stores/preferences.ts index 0b586af1..c069c4cc 100644 --- a/src/stores/preferences.ts +++ b/src/stores/preferences.ts @@ -1,10 +1,21 @@ import { createSignal, onMount } from "solid-js" import { storage, type ConfigData } from "../lib/storage" +export interface ModelPreference { + providerId: string + modelId: string +} + +export interface AgentModelSelections { + [instanceId: string]: Record +} + export interface Preferences { showThinkingBlocks: boolean lastUsedBinary?: string environmentVariables?: Record + modelRecents?: ModelPreference[] + agentModelSelections?: AgentModelSelections } export interface OpenCodeBinary { @@ -19,9 +30,12 @@ export interface RecentFolder { } const MAX_RECENT_FOLDERS = 10 +const MAX_RECENT_MODELS = 5 const defaultPreferences: Preferences = { showThinkingBlocks: false, + modelRecents: [], + agentModelSelections: {}, } const [preferences, setPreferences] = createSignal(defaultPreferences) @@ -127,6 +141,37 @@ function removeEnvironmentVariable(key: string): void { updateEnvironmentVariables(rest) } +function addRecentModelPreference(model: ModelPreference): void { + if (!model.providerId || !model.modelId) return + const recents = preferences().modelRecents ?? [] + const filtered = recents.filter((item) => item.providerId !== model.providerId || item.modelId !== model.modelId) + const updated = [model, ...filtered].slice(0, MAX_RECENT_MODELS) + updatePreferences({ modelRecents: updated }) +} + +function setAgentModelPreference(instanceId: string, agent: string, model: ModelPreference): void { + if (!instanceId || !agent || !model.providerId || !model.modelId) return + const selections = preferences().agentModelSelections ?? {} + const instanceSelections = selections[instanceId] ?? {} + const existing = instanceSelections[agent] + if (existing && existing.providerId === model.providerId && existing.modelId === model.modelId) { + return + } + updatePreferences({ + agentModelSelections: { + ...selections, + [instanceId]: { + ...instanceSelections, + [agent]: model, + }, + }, + }) +} + +function getAgentModelPreference(instanceId: string, agent: string): ModelPreference | undefined { + return preferences().agentModelSelections?.[instanceId]?.[agent] +} + // Load config on mount and listen for changes from other instances onMount(() => { loadConfig() @@ -154,4 +199,7 @@ export { updateEnvironmentVariables, addEnvironmentVariable, removeEnvironmentVariable, + addRecentModelPreference, + setAgentModelPreference, + getAgentModelPreference, } diff --git a/src/stores/sessions.ts b/src/stores/sessions.ts index e58ccdc6..afe47b36 100644 --- a/src/stores/sessions.ts +++ b/src/stores/sessions.ts @@ -6,7 +6,7 @@ import { instances } from "./instances" import { sseManager } from "../lib/sse-manager" import { decodeHtmlEntities } from "../lib/markdown" -import { preferences } from "./preferences" +import { preferences, addRecentModelPreference, getAgentModelPreference, setAgentModelPreference } from "./preferences" interface SessionInfo { tokens: number @@ -330,6 +330,28 @@ async function fetchSessions(instanceId: string): Promise { } } +function isModelValid( + instanceId: string, + model?: { providerId: string; modelId: string } | null, +): model is { providerId: string; modelId: string } { + if (!model?.providerId || !model.modelId) return false + const instanceProviders = providers().get(instanceId) || [] + const provider = instanceProviders.find((p) => p.id === model.providerId) + if (!provider) return false + return provider.models.some((item) => item.id === model.modelId) +} + +function getRecentModelPreferenceForInstance( + instanceId: string, +): { providerId: string; modelId: string } | undefined { + const recents = preferences().modelRecents ?? [] + for (const item of recents) { + if (isModelValid(instanceId, item)) { + return item + } + } +} + async function getDefaultModel( instanceId: string, agentName?: string, @@ -337,9 +359,16 @@ async function getDefaultModel( const instanceProviders = providers().get(instanceId) || [] const instanceAgents = agents().get(instanceId) || [] + if (agentName) { + const stored = getAgentModelPreference(instanceId, agentName) + if (isModelValid(instanceId, stored)) { + return stored + } + } + if (agentName) { const agent = instanceAgents.find((a) => a.name === agentName) - if (agent?.model?.providerId && agent.model.modelId) { + if (agent && agent.model && isModelValid(instanceId, agent.model)) { return { providerId: agent.model.providerId, modelId: agent.model.modelId, @@ -347,25 +376,30 @@ async function getDefaultModel( } } - const anthropicProvider = instanceProviders.find((p) => p.id === "anthropic") - if (anthropicProvider) { - const defaultModelId = anthropicProvider.defaultModelId || anthropicProvider.models[0]?.id - if (defaultModelId) { - return { - providerId: "anthropic", - modelId: defaultModelId, + const recent = getRecentModelPreferenceForInstance(instanceId) + if (recent) { + return recent + } + + for (const provider of instanceProviders) { + if (provider.defaultModelId) { + const model = provider.models.find((m) => m.id === provider.defaultModelId) + if (model) { + return { + providerId: provider.id, + modelId: model.id, + } } } } if (instanceProviders.length > 0) { const firstProvider = instanceProviders[0] - const defaultModelId = firstProvider.defaultModelId || firstProvider.models[0]?.id - - if (defaultModelId) { + const firstModel = firstProvider.models[0] + if (firstModel) { return { providerId: firstProvider.id, - modelId: defaultModelId, + modelId: firstModel.id, } } } @@ -469,6 +503,10 @@ async function createSession(instanceId: string, agent?: string): Promise { const next = { ...prev } next.creatingSession.set(instanceId, true) @@ -1457,16 +1495,27 @@ async function updateSessionAgent(instanceId: string, sessionId: string, agent: throw new Error("Session not found") } + const nextModel = await getDefaultModel(instanceId, agent) + const shouldApplyModel = isModelValid(instanceId, nextModel) + setSessions((prev) => { const next = new Map(prev) - const instanceSessions = new Map(prev.get(instanceId)) - const session = instanceSessions.get(sessionId) - if (session) { - instanceSessions.set(sessionId, { ...session, agent }) - next.set(instanceId, instanceSessions) + const map = new Map(prev.get(instanceId)) + const current = map.get(sessionId) + if (current) { + map.set(sessionId, { + ...current, + agent, + model: shouldApplyModel ? nextModel : current.model, + }) + next.set(instanceId, map) } return next }) + + if (agent && shouldApplyModel) { + setAgentModelPreference(instanceId, agent, nextModel) + } } async function updateSessionModel( @@ -1480,16 +1529,28 @@ async function updateSessionModel( throw new Error("Session not found") } + if (!isModelValid(instanceId, model)) { + console.warn("Invalid model selection", model) + return + } + + const currentAgent = session.agent + setSessions((prev) => { const next = new Map(prev) - const instanceSessions = new Map(prev.get(instanceId)) - const session = instanceSessions.get(sessionId) - if (session) { - instanceSessions.set(sessionId, { ...session, model }) - next.set(instanceId, instanceSessions) + const map = new Map(prev.get(instanceId)) + const existing = map.get(sessionId) + if (existing) { + map.set(sessionId, { ...existing, model }) + next.set(instanceId, map) } return next }) + + if (currentAgent) { + setAgentModelPreference(instanceId, currentAgent, model) + } + addRecentModelPreference(model) } function handleSessionCompacted(instanceId: string, event: any): void { diff --git a/src/styles/components.css b/src/styles/components.css index 16ac26ae..874810b8 100644 --- a/src/styles/components.css +++ b/src/styles/components.css @@ -1526,6 +1526,11 @@ button.button-primary { @apply max-h-[400px] overflow-y-auto; } +.panel-list--fill { + max-height: none; + height: 100%; +} + .panel-list-item { @apply border-b last:border-b-0 transition-colors w-full; border-color: var(--border-base);