up

Author: linyuan.yang

packages/app/src-tauri/icons/icon.icns

@@ -17,6 +17,7 @@ import StatusBar from './StatusBar.vue'
 import ChatArea from './ChatArea.vue'
 import PathPickerModal from './PathPickerModal.vue'
 import Explorer from './Explorer.vue'
+import { useConfirm } from 'sbot-ui'
 
 const props = withDefaults(defineProps<{
   transport: IChatTransport
@@ -29,6 +30,7 @@ const props = withDefaults(defineProps<{
 })
 
 const L = computed(() => resolveLabels(props.labels))
+const { confirm } = useConfirm()
 
 // ── Core state ──
 
@@ -64,6 +66,9 @@ const explorerWidth = ref(420)
 const explorerResizing = ref(false)
 const sessionBarWidth = ref(180)
 const sessionBarResizing = ref(false)
+const sessionSearch = ref('')
+const sessionHighlightIndex = ref(0)
+const sessionSearchInputEl = ref<HTMLInputElement | null>(null)
 
 // ── Derived ──
 
@@ -89,6 +94,23 @@ const contextWindow = computed<number | undefined>(() => {
 
 const fetchThinks = computed(() => props.transport.fetchThinks?.bind(props.transport))
 
+const filteredSessions = computed<SessionItem[]>(() => {
+  const q = sessionSearch.value.trim().toLowerCase()
+  if (!q) return sessions.value
+  return sessions.value.filter(s => {
+    const name = (s.name || '').toLowerCase()
+    const path = (s.workPath || '').toLowerCase()
+    return name.includes(q) || path.includes(q)
+  })
+})
+
+const highlightedSessionId = computed<string | null>(() => {
+  const list = filteredSessions.value
+  if (list.length === 0) return null
+  const idx = Math.min(Math.max(sessionHighlightIndex.value, 0), list.length - 1)
+  return list[idx]?.id ?? null
+})
+
 const archivedCount = computed(() => messages.value.filter(m => m.kind === MessageKind.Archive).length)
 const displayedMessages = computed<StoredMessage[]>(() =>
   showArchived.value ? messages.value : messages.value.filter(m => m.kind !== MessageKind.Archive),
@@ -202,7 +224,55 @@ function selectSession(id: string) {
 
 function toggleSidebar() {
   sidebarOpen.value = !sidebarOpen.value
-  if (sidebarOpen.value) settingsOpen.value = false
+  if (sidebarOpen.value) {
+    settingsOpen.value = false
+    resetSessionSearch()
+    nextTick(() => sessionSearchInputEl.value?.focus())
+  }
+}
+
+function resetSessionSearch() {
+  sessionSearch.value = ''
+  const list = sessions.value
+  const activeIdx = list.findIndex(s => s.id === activeSessionId.value)
+  sessionHighlightIndex.value = activeIdx >= 0 ? activeIdx : 0
+}
+
+function onSessionSearchInput() {
+  sessionHighlightIndex.value = 0
+}
+
+function moveSessionHighlight(delta: number) {
+  const len = filteredSessions.value.length
+  if (len === 0) return
+  const next = (sessionHighlightIndex.value + delta + len) % len
+  sessionHighlightIndex.value = next
+  nextTick(() => {
+    const id = filteredSessions.value[next]?.id
+    if (!id) return
+    const el = document.querySelector(`.chatui-session-popover [data-session-id="${id}"]`)
+    el?.scrollIntoView({ block: 'nearest' })
+  })
+}
+
+function onSessionSearchKeydown(e: KeyboardEvent) {
+  if (e.key === 'ArrowDown') {
+    e.preventDefault()
+    moveSessionHighlight(1)
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault()
+    moveSessionHighlight(-1)
+  } else if (e.key === 'Enter') {
+    e.preventDefault()
+    const id = highlightedSessionId.value
+    if (id) {
+      selectSession(id)
+      sidebarOpen.value = false
+    }
+  } else if (e.key === 'Escape') {
+    e.preventDefault()
+    sidebarOpen.value = false
+  }
 }
 
 function toggleSettings() {
@@ -487,7 +557,10 @@ async function onRefresh() {
 
 async function onClearHistory() {
   const id = activeSessionId.value
-  if (!id || !window.confirm(L.value.confirmClearHistory)) return
+  if (!id || !await confirm(L.value.confirmClearHistory, {
+    danger: true,
+    cancelText: L.value.cancel,
+  })) return
   try {
     await props.transport.clearHistory(id)
     messages.value = []
@@ -564,11 +637,34 @@ onBeforeUnmount(() => {
       <Transition name="chatui-drawer">
         <div v-if="sidebarOpen" class="chatui-compact-popover-backdrop" @click="sidebarOpen = false">
           <div class="chatui-compact-popover chatui-session-popover" @click.stop>
+            <div class="chatui-session-popover-search">
+              <svg class="chatui-session-popover-search-icon" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+                <circle cx="7" cy="7" r="4.5"/>
+                <path d="m10.5 10.5 3 3"/>
+              </svg>
+              <input
+                ref="sessionSearchInputEl"
+                v-model="sessionSearch"
+                type="text"
+                class="chatui-session-popover-search-input"
+                :placeholder="L.sessionSearchPlaceholder"
+                @input="onSessionSearchInput"
+                @keydown="onSessionSearchKeydown"
+              />
+              <button
+                v-if="sessionSearch"
+                class="chatui-session-popover-search-clear"
+                :title="L.cancel"
+                @click="sessionSearch = ''; onSessionSearchInput(); sessionSearchInputEl?.focus()"
+              >×</button>
+            </div>
             <SessionBar
-              :sessions="sessions"
+              :sessions="filteredSessions"
               :active-session-id="activeSessionId"
+              :highlighted-session-id="highlightedSessionId"
               :labels="labels"
               :show-header="false"
+              :empty-message="sessionSearch ? L.sessionNoMatch : undefined"
               @select="(id: string) => { selectSession(id); sidebarOpen = false }"
               @delete="onDeleteSession"
               @rename="onRenameSession"
@@ -953,10 +1049,61 @@ onBeforeUnmount(() => {
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
   overflow: hidden;
 }
+.chatui-session-popover {
+  display: flex;
+  flex-direction: column;
+}
 .chatui-session-popover :deep(.chatui-session-bar) {
   width: 100%;
-  max-height: min(320px, calc(100vh - 80px));
+  max-height: min(320px, calc(100vh - 140px));
   border-right: none;
+  flex: 1;
+  min-height: 0;
+}
+.chatui-session-popover-search {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--chatui-border-subtle, var(--chatui-border));
+  background: var(--chatui-bg-surface);
+  flex-shrink: 0;
+}
+.chatui-session-popover-search-icon {
+  flex-shrink: 0;
+  color: var(--chatui-fg-secondary);
+}
+.chatui-session-popover-search-input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  font: inherit;
+  color: var(--chatui-fg);
+  padding: 4px 0;
+}
+.chatui-session-popover-search-input::placeholder {
+  color: var(--chatui-fg-secondary);
+}
+.chatui-session-popover-search-clear {
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--chatui-fg-secondary);
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.chatui-session-popover-search-clear:hover {
+  background: var(--chatui-bg-hover);
+  color: var(--chatui-fg);
 }
 .chatui-settings-popover {
   display: flex;

packages/chat-ui/src/components/ChatView.vue

@@ -1,17 +1,20 @@
 <script setup lang="ts">
 import { ref, computed, nextTick } from 'vue'
-import { SButton, SInput } from 'sbot-ui'
+import { SButton, SInput, useConfirm } from 'sbot-ui'
 import type { SessionItem, ChatLabels } from '../types'
 import { resolveLabels, tpl } from '../labels'
 
 const props = withDefaults(defineProps<{
   sessions: SessionItem[]
   activeSessionId: string | null
+  highlightedSessionId?: string | null
   labels?: ChatLabels
   showHeader?: boolean
   width?: number
+  emptyMessage?: string
 }>(), {
   showHeader: true,
+  highlightedSessionId: null,
 })
 
 const barStyle = computed(() =>
@@ -26,6 +29,7 @@ const emit = defineEmits<{
 }>()
 
 const L = computed(() => resolveLabels(props.labels))
+const { confirm } = useConfirm()
 
 const editingId = ref<string | null>(null)
 const editingName = ref('')
@@ -48,10 +52,13 @@ function commitEdit() {
   if (val) emit('rename', id, val)
 }
 
-function onDelete(id: string) {
+async function onDelete(id: string) {
   const s = props.sessions.find(s => s.id === id)
   const label = s?.name || L.value.untitledSession
-  if (window.confirm(tpl(L.value.confirmDeleteSession, { name: label }))) {
+  if (await confirm(tpl(L.value.confirmDeleteSession, { name: label }), {
+    danger: true,
+    cancelText: L.value.cancel,
+  })) {
     emit('delete', id)
   }
 }
@@ -66,7 +73,8 @@ function onDelete(id: string) {
       <div
         v-for="s in sessions" :key="s.id"
         class="chatui-session-item"
-        :class="{ active: activeSessionId === s.id }"
+        :class="{ active: activeSessionId === s.id, highlighted: highlightedSessionId === s.id }"
+        :data-session-id="s.id"
         @click="emit('select', s.id)"
       >
         <div style="display:flex;align-items:center;gap:4px">
@@ -94,7 +102,8 @@ function onDelete(id: string) {
         </div>
       </div>
       <div v-if="sessions.length === 0" class="chatui-session-empty">
-        {{ L.emptySession }}<br>{{ L.createSessionHint }}
+        <template v-if="emptyMessage">{{ emptyMessage }}</template>
+        <template v-else>{{ L.emptySession }}<br>{{ L.createSessionHint }}</template>
       </div>
     </div>
   </div>
@@ -116,6 +125,11 @@ function onDelete(id: string) {
 }
 .chatui-session-item:hover { background: var(--chatui-bg-hover); }
 .chatui-session-item.active { background: var(--chatui-bg-active); }
+.chatui-session-item.highlighted {
+  background: var(--chatui-bg-hover);
+  box-shadow: inset 0 0 0 1px var(--chatui-border-focus, var(--chatui-accent));
+}
+.chatui-session-item.active.highlighted { background: var(--chatui-bg-active); }
 .chatui-session-item-name {
   font-size: 13px; font-weight: 500; color: var(--chatui-fg);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

packages/chat-ui/src/components/SessionBar.vue

@@ -44,6 +44,8 @@ export const defaultLabels: Required<ChatLabels> = {
   emptySession: '暂无会话',
   createSessionHint: '点击上方新建',
   editSessionNameHint: '双击编辑名称',
+  sessionSearchPlaceholder: '搜索会话…',
+  sessionNoMatch: '没有匹配的会话',
   agent: 'Agent',
   storage: '存储',
   workpath: '工作目录',

packages/chat-ui/src/labels.ts

@@ -144,6 +144,8 @@ export interface ChatLabels {
   emptySession?: string
   createSessionHint?: string
   editSessionNameHint?: string
+  sessionSearchPlaceholder?: string
+  sessionNoMatch?: string
   agent?: string
   storage?: string
   workpath?: string

packages/chat-ui/src/types.ts

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@sbot/chat-ui": "workspace:*",
+    "sbot-ui": "workspace:*",
     "sbot.commons": "workspace:*"
   },
   "devDependencies": {

packages/pwa/package.json

@@ -2,6 +2,7 @@
 import { ref, computed } from 'vue'
 import { ChatView, ServerPicker, WebSocketTransport } from '@sbot/chat-ui'
 import type { RemoteEntry } from '@sbot/chat-ui'
+import { SConfirm } from 'sbot-ui'
 import '@sbot/chat-ui/themes/variables.css'
 import '@sbot/chat-ui/themes/theme-dark.css'
 import '@sbot/chat-ui/themes/theme-pwa.css'
@@ -89,6 +90,7 @@ function removeRemote(index: number) {
       <ChatView :transport="transport" :show-attachments="true" />
     </template>
   </div>
+  <SConfirm default-confirm-text="确定" default-cancel-text="取消" />
 </template>
 
 <style scoped>

packages/pwa/src/App.vue

@@ -54,6 +54,7 @@
   "dependencies": {
     "@sbot/chat-ui": "workspace:*",
     "axios": "catalog:",
+    "sbot-ui": "workspace:*",
     "sbot.commons": "workspace:*",
     "ws": "catalog:"
   },

packages/vscode-extension/package.json

@@ -81,8 +81,8 @@ export class SbotClient {
   }
 
   async deleteSession(sessionId: string): Promise<void> {
-    await this.http.delete(`/api/settings/sessions/${encodeURIComponent(sessionId)}`);
     await this.http.delete(`/api/sessions/${encodeURIComponent(sessionId)}/history`).catch(() => {});
+    await this.http.delete(`/api/settings/sessions/${encodeURIComponent(sessionId)}`);
   }
 
   async updateSession(sessionId: string, patch: Record<string, any>): Promise<void> {

packages/vscode-extension/src/SbotClient.ts

@@ -2,6 +2,7 @@
 import { ref, onMounted } from 'vue'
 import { ChatView, ServerPicker } from '@sbot/chat-ui'
 import type { RemoteEntry } from '@sbot/chat-ui'
+import { SConfirm } from 'sbot-ui'
 import '@sbot/chat-ui/themes/variables.css'
 import '@sbot/chat-ui/themes/theme-vscode.css'
 import '@sbot/chat-ui/themes/sbot-ui-bridge.css'
@@ -15,8 +16,7 @@ const currentBaseUrl = ref('')
 
 onMounted(async () => {
   remotes.value = await transport.getRemotes()
-  const last = await transport.getLastServer()
-  if (last?.url) selectServer(last.url, !!last.local)
+  selectLocal()
 })
 
 const connectError = ref('')
@@ -29,6 +29,7 @@ async function selectServer(baseUrl: string, local = false) {
     phase.value = 'chat'
   } catch (e: any) {
     connectError.value = `无法连接服务器 ${baseUrl}`
+    phase.value = 'server-pick'
   }
 }
 
@@ -86,6 +87,7 @@ async function removeRemote(index: number) {
       <ChatView :transport="transport" always-compact />
     </template>
   </div>
+  <SConfirm default-confirm-text="确定" default-cancel-text="取消" />
 </template>
 
 <style>