Improve session defaults and onboarding UI

2025-11-07 21:22:46 +00:00
parent 7193103646
commit 5483932196
10 changed files with 254 additions and 119 deletions
--- 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)
--- 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<FolderSelectionViewProps> = (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<FolderSelectionViewProps> = (props) => {
  }

  return (
-    <div class="flex h-full w-full items-center justify-center" style="background-color: var(--surface-secondary)">
-      <div class="w-full max-w-3xl px-8 py-12">
-        <div class="mb-8 text-center">
-          <div class="mb-4 flex justify-center">
+    <div class="flex h-screen w-full items-start justify-center overflow-hidden py-6" style="background-color: var(--surface-secondary)">
+      <div class="w-full max-w-3xl h-full max-h-[90vh] px-8 flex flex-col overflow-hidden">
+        <div class="mb-6 text-center shrink-0">
+          <div class="mb-3 flex justify-center">
            <Folder class="h-16 w-16 icon-muted" />
          </div>
          <h1 class="mb-2 text-2xl font-semibold text-primary">Welcome to OpenCode</h1>
          <p class="text-base text-secondary">Select a folder to start coding with AI</p>
        </div>
+ 
+        <div class="space-y-4 flex-1 min-h-0 overflow-hidden flex flex-col">

-        <div class="space-y-4 overflow-visible">
          <Show
            when={folders().length > 0}
            fallback={
-              <div class="panel panel-empty-state">
+              <div class="panel panel-empty-state flex-1">
                <div class="panel-empty-state-icon">
                  <Clock class="w-12 h-12 mx-auto" />
                </div>
@@ -177,22 +182,27 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
              </div>
            }
          >
-            <div class="panel">
-              <div class="panel-header">
-                <h2 class="panel-title">Recent Folders</h2>
-                <p class="panel-subtitle">
-                  {folders().length} {folders().length === 1 ? "folder" : "folders"} available
-                </p>
-              </div>
-              <div class="panel-list">
-                <For each={folders()}>
-                  {(folder, index) => (
-                    <div 
-                      class="panel-list-item"
-                      classList={{
-                        "panel-list-item-highlight": focusMode() === "recent" && selectedIndex() === index(),
-                      }}
-                    >
+              <div class="panel flex-1 min-h-0 overflow-hidden">
+               <div class="panel-header">
+                 <h2 class="panel-title">Recent Folders</h2>
+                 <p class="panel-subtitle">
+                   {folders().length} {folders().length === 1 ? "folder" : "folders"} available
+                 </p>
+               </div>
+               <div
+                 class="panel-list max-h-[50vh] overflow-y-auto pr-1"
+                 ref={(el) => (recentListRef = el)}
+               >
+                 <For each={folders()}>
+                   {(folder, index) => (
+                     <div
+                       data-folder-index={index()}
+                       class="panel-list-item"
+                       classList={{
+                         "panel-list-item-highlight": focusMode() === "recent" && selectedIndex() === index(),
+                       }}
+                     >
+
                      <div class="flex items-center w-full">
                        <button
                          class="panel-list-item-content w-full"
@@ -237,7 +247,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
            </div>
          </Show>

-          <div class="panel">
+          <div class="panel shrink-0">
            <div class="panel-header">
              <h2 class="panel-title">Browse for Folder</h2>
              <p class="panel-subtitle">Select any folder on your computer</p>
@@ -254,9 +264,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                  <FolderPlus class="w-4 h-4" />
                  <span>{props.isLoading ? "Opening..." : "Browse Folders"}</span>
                </div>
-                <kbd class="kbd ml-2">
-                  Cmd+Enter
-                </kbd>
+                <Kbd shortcut="cmd+n" class="ml-2" />
              </button>
            </div>

@@ -297,7 +305,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
          </div>
        </div>

-        <div class="mt-6 panel panel-footer">
+        <div class="mt-4 panel panel-footer shrink-0">
          <div class="panel-footer-hints">
            <Show when={folders().length > 0}>
              <div class="flex items-center gap-1.5">
@@ -315,7 +323,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
              </div>
            </Show>
            <div class="flex items-center gap-1.5">
-              <kbd class="kbd">Cmd+Enter</kbd>
+              <Kbd shortcut="cmd+n" />
              <span>Browse</span>
            </div>
          </div>
--- 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<InstanceWelcomeViewProps> = (props) => {
-  const [selectedAgent, setSelectedAgent] = createSignal<string>("")
  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<KeyboardShortcut>(() => {
+    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<InstanceWelcomeViewProps> = (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<InstanceWelcomeViewProps> = (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<InstanceWelcomeViewProps> = (props) => {
          <Show
            when={parentSessions().length > 0}
            fallback={
-              <div class="panel panel-empty-state flex-shrink-0">
+              <div class="panel panel-empty-state flex-1 flex flex-col justify-center">
                <div class="panel-empty-state-icon">
                  <svg class="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path
@@ -169,14 +181,14 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
              </div>
            }
          >
-            <div class="panel flex-shrink-0">
+            <div class="panel flex flex-col flex-1 min-h-0">
              <div class="panel-header">
                <h2 class="panel-title">Resume Session</h2>
                <p class="panel-subtitle">
                  {parentSessions().length} {parentSessions().length === 1 ? "session" : "sessions"} available
                </p>
              </div>
-              <div class="panel-list">
+              <div class="panel-list panel-list--fill flex-1 min-h-0 overflow-auto">
                <For each={parentSessions()}>
                  {(session, index) => (
                    <div 
@@ -228,35 +240,15 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
          <div class="panel flex-shrink-0">
            <div class="panel-header">
              <h2 class="panel-title">Start New Session</h2>
-              <p class="panel-subtitle">Create a fresh conversation with your chosen agent</p>
+              <p class="panel-subtitle">We’ll reuse your last agent/model automatically</p>
            </div>
            <div class="panel-body">
              <div class="space-y-3">
-                <Show when={agentList().length > 0}>
-                  <div>
-                    <label class="block text-xs font-medium text-secondary mb-1.5">Agent</label>
-                    <select
-                      class="selector-input w-full"
-                      value={selectedAgent()}
-                      onChange={(e) => setSelectedAgent(e.currentTarget.value)}
-                    >
-                      <For each={agentList()}>
-                        {(agent) => (
-                          <option value={agent.name}>
-                            {agent.name}
-                            {agent.description ? ` - ${agent.description}` : ""}
-                          </option>
-                        )}
-                      </For>
-                    </select>
-                  </div>
-                </Show>
-
                <button
                  type="button"
                  class="button-primary w-full flex items-center justify-center text-sm disabled:cursor-not-allowed"
                  onClick={handleNewSession}
-                  disabled={isCreating() || agentList().length === 0}
+                  disabled={isCreating()}
                >
                  <div class="flex items-center gap-2">
                    {isCreating() ? (
@@ -273,11 +265,9 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                      </svg>
                    )}
-                    <span>{agentList().length === 0 ? "Loading agents..." : "Create Session"}</span>
+                    <span>Create Session</span>
                  </div>
-                  <kbd class="kbd ml-2">
-                    Cmd+Enter
-                  </kbd>
+                  <Kbd shortcut={newSessionShortcutString()} class="ml-2" />
                </button>
              </div>
            </div>
@@ -312,10 +302,7 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
            <kbd class="kbd">Enter</kbd>
            <span>Resume</span>
          </div>
-          <div class="flex items-center gap-1.5">
-            <kbd class="kbd">Cmd+Enter</kbd>
-            <span>New Session</span>
-          </div>
+          <KeyboardHint shortcuts={[newSessionShortcut()]} separator="" />
        </div>
      </div>
    </div>
--- a/src/components/message-stream.tsx
+++ b/src/components/message-stream.tsx
@@ -577,10 +577,11 @@ export default function MessageStream(props: MessageStreamProps) {
          <div class="empty-state">
            <div class="empty-state-content">
              <h3>Start a conversation</h3>
-              <p>Type a message below or try:</p>
+              <p>Type a message below or open the Command Palette:</p>
              <ul>
                <li>
-                  <code>/init-project</code>
+                  <span>Command Palette</span>
+                  <Kbd shortcut="cmd+shift+p" class="ml-2" />
                </li>
                <li>Ask about your codebase</li>
                <li>
--- a/src/components/session-picker.tsx
+++ b/src/components/session-picker.tsx
@@ -21,7 +21,12 @@ const SessionPicker: Component<SessionPickerProps> = (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)
    }
  })