diff --git a/src/App.tsx b/src/App.tsx index 571b89dc..86c6c1c6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,6 +9,9 @@ import SessionList from "./components/session-list" import MessageStream from "./components/message-stream" import PromptInput from "./components/prompt-input" import InfoView from "./components/info-view" +import AgentSelector from "./components/agent-selector" +import ModelSelector from "./components/model-selector" +import KeyboardHint from "./components/keyboard-hint" import { initMarkdown } from "./lib/markdown" import { useTheme } from "./lib/theme" import { createCommandRegistry } from "./lib/commands" @@ -78,14 +81,6 @@ const SessionView: Component<{ await sendMessage(props.instanceId, props.sessionId, prompt, attachments) } - async function handleAgentChange(agent: string) { - await updateSessionAgent(props.instanceId, props.sessionId, agent) - } - - async function handleModelChange(model: { providerId: string; modelId: string }) { - await updateSessionModel(props.instanceId, props.sessionId, model) - } - async function handleRevert(messageId: string) { const instance = instances().get(props.instanceId) if (!instance || !instance.client) return @@ -148,10 +143,6 @@ const SessionView: Component<{ instanceFolder={props.instanceFolder} sessionId={s().id} onSend={handleSendMessage} - agent={s().agent} - model={s().model} - onAgentChange={handleAgentChange} - onModelChange={handleModelChange} escapeInDebounce={props.escapeInDebounce} /> @@ -189,6 +180,29 @@ const App: Component = () => { return activeSessionId().get(instance.id) || null }) + const activeSessionForInstance = createMemo(() => { + const sessionId = activeSessionIdForInstance() + if (!sessionId || sessionId === "info") return null + return activeSessions().get(sessionId) ?? null + }) + + const handleSidebarAgentChange = async (agent: string) => { + const instance = activeInstance() + const sessionId = activeSessionIdForInstance() + if (!instance || !sessionId || sessionId === "info") return + await updateSessionAgent(instance.id, sessionId, agent) + } + + const handleSidebarModelChange = async (model: { providerId: string; modelId: string }) => { + const instance = activeInstance() + const sessionId = activeSessionIdForInstance() + if (!instance || !sessionId || sessionId === "info") return + await updateSessionModel(instance.id, sessionId, model) + } + + const DEFAULT_SESSION_SIDEBAR_WIDTH = 280 + const [sessionSidebarWidth, setSessionSidebarWidth] = createSignal(DEFAULT_SESSION_SIDEBAR_WIDTH) + async function handleSelectFolder(folderPath?: string, binaryPath?: string) { setIsSelectingFolder(true) try { @@ -813,24 +827,76 @@ const App: Component = () => { {(instance) => ( <> 0} fallback={}> -
- {/* Session List Sidebar */} - setActiveSession(instance().id, id)} - onClose={(id) => handleCloseSession(instance().id, id)} - onNew={() => handleNewSession(instance().id)} - /> +
+ {/* Session Sidebar */} +
+ setActiveSession(instance().id, id)} + onClose={(id) => handleCloseSession(instance().id, id)} + onNew={() => handleNewSession(instance().id)} + showHeader + showFooter={false} + headerContent={ +
+ Sessions +
+ {(() => { + const shortcut = keyboardRegistry.get("session-prev") + return shortcut ? : null + })()} + {(() => { + const shortcut = keyboardRegistry.get("session-next") + return shortcut ? : null + })()} +
+ +
+ } + onWidthChange={setSessionSidebarWidth} + /> +
+ + {(activeSession) => ( +
+ + +
+ )} + +
{/* Main Content Area */} -
+
@@ -840,13 +906,15 @@ const App: Component = () => {
} > - + {(sessionId) => ( + + )} } > diff --git a/src/components/agent-selector.tsx b/src/components/agent-selector.tsx index 181b735f..5ff794f6 100644 --- a/src/components/agent-selector.tsx +++ b/src/components/agent-selector.tsx @@ -53,7 +53,7 @@ export default function AgentSelector(props: AgentSelectorProps) { } return ( -
+
- +
diff --git a/src/components/model-selector.tsx b/src/components/model-selector.tsx index 4eb68f10..34a33318 100644 --- a/src/components/model-selector.tsx +++ b/src/components/model-selector.tsx @@ -63,7 +63,7 @@ export default function ModelSelector(props: ModelSelectorProps) { }) return ( -
+
value={currentModelValue()} onChange={handleChange} @@ -97,14 +97,14 @@ export default function ModelSelector(props: ModelSelectorProps) { )} > - + -
- +
+ Model: {currentModelValue()?.name ?? "None"} {currentModelValue() && ( @@ -132,7 +132,7 @@ export default function ModelSelector(props: ModelSelectorProps) { - +
diff --git a/src/components/prompt-input.tsx b/src/components/prompt-input.tsx index 239e4b3b..12a1cb08 100644 --- a/src/components/prompt-input.tsx +++ b/src/components/prompt-input.tsx @@ -1,6 +1,4 @@ import { createSignal, Show, onMount, For, onCleanup } from "solid-js" -import AgentSelector from "./agent-selector" -import ModelSelector from "./model-selector" import UnifiedPicker from "./unified-picker" import { addToHistory, getHistory } from "../stores/message-history" import { getAttachments, addAttachment, clearAttachments, removeAttachment } from "../stores/attachments" @@ -17,10 +15,6 @@ interface PromptInputProps { sessionId: string onSend: (prompt: string, attachments: Attachment[]) => Promise disabled?: boolean - agent: string - model: { providerId: string; modelId: string } - onAgentChange: (agent: string) => Promise - onModelChange: (model: { providerId: string; modelId: string }) => Promise escapeInDebounce?: boolean } @@ -730,37 +724,25 @@ export default function PromptInput(props: PromptInputProps) {
- - - Enter to send • Shift+Enter for new line • @ for files/agents •{" "} - ↑↓ for history - 0}> - • {attachments().length} file(s) attached - - - } - > - - Press Esc again to abort session - - - -
- - +
+ + + Enter to send • Shift+Enter for new line • @ for files/agents •{" "} + ↑↓ for history + 0}> + • {attachments().length} file(s) attached + + + } + > + + Press Esc again to abort session + + +
diff --git a/src/components/session-list.tsx b/src/components/session-list.tsx index f67f8ad5..840d2e61 100644 --- a/src/components/session-list.tsx +++ b/src/components/session-list.tsx @@ -1,4 +1,4 @@ -import { Component, For, Show, createSignal, createEffect, onCleanup, onMount, createMemo } from "solid-js" +import { Component, For, Show, createSignal, createEffect, onCleanup, onMount, createMemo, JSX } from "solid-js" import type { Session } from "../types/session" import { MessageSquare, Info, Plus, X } from "lucide-solid" import KeyboardHint from "./keyboard-hint" @@ -21,6 +21,11 @@ interface SessionListProps { onSelect: (sessionId: string) => void onClose: (sessionId: string) => void onNew: () => void + showHeader?: boolean + showFooter?: boolean + headerContent?: JSX.Element + footerContent?: JSX.Element + onWidthChange?: (width: number) => void } const MIN_WIDTH = 200 @@ -57,6 +62,10 @@ const SessionList: Component = (props) => { window.localStorage.setItem(STORAGE_KEY, width.toString()) }) + createEffect(() => { + props.onWidthChange?.(sidebarWidth()) + }) + const clampWidth = (width: number) => Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, width)) const removeMouseListeners = () => { @@ -194,14 +203,18 @@ const SessionList: Component = (props) => { aria-hidden="true" /> -
-
-

Sessions

- + +
+ {props.headerContent ?? ( +
+

Sessions

+ +
+ )}
-
+
@@ -289,17 +302,21 @@ const SessionList: Component = (props) => {
-
- -
+ +
+ {props.footerContent ?? ( + + )} +
+
) } diff --git a/src/styles/components.css b/src/styles/components.css index 10360e5d..9ba97895 100644 --- a/src/styles/components.css +++ b/src/styles/components.css @@ -491,7 +491,7 @@ button.button-primary { /* Message stream component utilities */ .message-stream-container { - @apply relative flex-1 flex flex-col overflow-hidden; + @apply relative flex-1 min-h-0 flex flex-col overflow-hidden; } .connection-status { @@ -527,7 +527,7 @@ button.button-primary { } .message-stream { - @apply flex-1 overflow-y-auto p-4 flex flex-col gap-4; + @apply flex-1 min-h-0 overflow-y-auto p-4 flex flex-col gap-4; background-color: var(--surface-base); color: inherit; } @@ -1060,17 +1060,25 @@ button.button-primary { } .selector-trigger-label { - @apply flex flex-col items-start min-w-0; + @apply flex flex-col min-w-0; +} + +.selector-trigger-label--stacked { + @apply items-start; } .selector-trigger-primary { + @apply text-sm font-medium truncate; color: var(--text-primary); - font-weight: var(--font-weight-medium); +} + +.selector-trigger-primary--align-left { + @apply text-left w-full; } .selector-trigger-secondary { + @apply text-xs text-left truncate; color: var(--text-muted); - font-size: 10px; } .selector-trigger-icon { @@ -1622,19 +1630,71 @@ button.button-primary { /* Session view utility */ .session-view { - @apply flex flex-col h-full; + @apply flex flex-1 min-h-0 flex-col; background-color: var(--surface-base); color: inherit; } /* Session list component */ .session-list-container { - @apply flex flex-col h-full relative; + @apply flex flex-col flex-1 min-h-0 relative; background-color: var(--surface-secondary); min-width: 200px; max-width: 500px; } +.session-sidebar { + @apply flex flex-col min-h-0; + background-color: var(--surface-secondary); +} + +.session-sidebar-header { + @apply flex flex-col gap-2 w-full; +} + +.session-sidebar-title { + color: var(--text-primary); +} + +.session-sidebar-shortcuts { + @apply flex flex-col gap-1; +} + +.session-sidebar-new { + @apply w-full; +} + +.session-sidebar-controls { + @apply flex flex-col gap-3; + background-color: var(--surface-secondary); +} + +.session-sidebar-controls > * { + @apply w-full; +} + +.session-sidebar-controls .selector-trigger, +.session-sidebar-controls [data-model-selector-control], +.session-sidebar-controls .selector-trigger-label, +.session-sidebar-controls .selector-trigger-primary { + @apply w-full; +} + +.sidebar-selector { + @apply flex flex-col gap-1 w-full; +} + +.sidebar-selector-hint { + @apply flex justify-center text-xs w-full; + color: var(--text-muted); +} + +.session-sidebar-separator { + background-color: var(--border-base); + height: 1px; + width: 100%; +} + .session-resize-handle { @apply absolute top-0 right-0 w-1 h-full cursor-col-resize bg-transparent transition-colors; z-index: 10;