dsh-vscode-workbench 0.1.14 → 0.2.0

package/src/client/WorkspaceSwitcher.tsx

@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react'
+import { Icon } from './Icon.tsx'
+import type { WorkspaceChoice } from './dshNavigation.ts'
+
+/** Centered switcher: existing workspaces, their sessions, and a new-workspace action. */
+export function WorkspaceSwitcher({ choices, activeSessionId, unavailable, busy, error, onCreate, onSwitch, onOpenWorkspace, onClose }: {
+  choices: WorkspaceChoice[]
+  activeSessionId?: string
+  unavailable: boolean
+  busy: boolean
+  error?: string
+  onCreate(): void
+  onSwitch(sessionId: string): void
+  onOpenWorkspace(workspaceId: string): void
+  onClose(): void
+}) {
+  const current = choices.find(workspace => workspace.sessions.some(session => session.id === activeSessionId))?.id
+  const [expanded, setExpanded] = useState<string | undefined>(current ?? choices[0]?.id)
+  useEffect(() => {
+    const escape = (event: KeyboardEvent) => { if (event.key === 'Escape') onClose() }
+    window.addEventListener('keydown', escape)
+    return () => window.removeEventListener('keydown', escape)
+  }, [onClose])
+  return <div className="dvw-confirm-backdrop" role="presentation" onMouseDown={onClose}>
+    <section className="dvw-workspace-switcher" role="dialog" aria-modal="true" aria-label="打开工作区" onMouseDown={event => event.stopPropagation()}>
+      <header><h2>打开工作区</h2><button className="dvw-icon" title="关闭" onClick={onClose}><Icon name="close"/></button></header>
+      <div className="dvw-workspace-list">
+        {unavailable ? <p className="dvw-workspace-empty">无法读取 DSH 的工作区列表，请重启 DSH 后再试。</p>
+          : choices.length === 0 ? <p className="dvw-workspace-empty">还没有工作区，先新建一个。</p>
+          : choices.map(workspace => <div className="dvw-workspace-group" key={workspace.id}>
+            <div className="dvw-workspace-row" data-expanded={expanded === workspace.id}>
+              <button className="dvw-workspace-toggle" aria-expanded={expanded === workspace.id} onClick={() => setExpanded(value => value === workspace.id ? undefined : workspace.id)}>
+                <Icon name="folder-opened"/>
+                <span className="dvw-workspace-title">{workspace.title}</span>
+                <span className="dvw-workspace-path">{workspace.path}</span>
+                <Icon name={expanded === workspace.id ? 'chevron-down' : 'chevron-right'}/>
+              </button>
+              <button className="dvw-icon dvw-workspace-enter" title="进入此工作区" onClick={() => onOpenWorkspace(workspace.id)}><Icon name="arrow-right"/></button>
+            </div>
+            {expanded === workspace.id && <div className="dvw-workspace-sessions">
+              {workspace.sessions.length === 0 ? <p className="dvw-workspace-empty">此工作区还没有会话</p> : workspace.sessions.map(session => <button key={session.id} className="dvw-workspace-session" data-active={session.id === activeSessionId} onClick={() => onSwitch(session.id)}>
+                <Icon name="comment-discussion"/>
+                <span className="dvw-workspace-session-title">{session.title}</span>
+                {session.id === activeSessionId && <span className="dvw-workspace-current">当前</span>}
+              </button>)}
+            </div>}
+          </div>)}
+      </div>
+      {error !== undefined && <p className="dvw-workspace-error">{error}</p>}
+      <footer><button className="dvw-primary-button" disabled={busy} onClick={onCreate}>{busy ? '正在打开…' : '新建工作区…'}</button><button onClick={onClose}>取消</button></footer>
+    </section>
+  </div>
+}

package/src/client/api.ts

@@ -2,7 +2,22 @@ export class ApiError extends Error {
   constructor(public code: string, message: string) { super(message) }
 }
 
-export async function api<T>(method: string, body: Record<string, unknown>, signal?: AbortSignal): Promise<T> {
+/** Back off while DSH publishes the current session after startup; every view shares this retry. */
+export function sessionRetryDelay(error: unknown, attempt: number): number | undefined {
+  if (!(error instanceof ApiError) || error.code !== 'session-not-found' || attempt >= 10) return undefined
+  return Math.min(250 * (attempt + 1), 1000)
+}
+
+function wait(ms: number, signal?: AbortSignal): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const abort = () => { clearTimeout(timer); reject(signal?.reason ?? new Error('aborted')) }
+    const timer = setTimeout(() => { signal?.removeEventListener('abort', abort); resolve() }, ms)
+    if (signal?.aborted === true) { abort(); return }
+    signal?.addEventListener('abort', abort, { once: true })
+  })
+}
+
+async function request<T>(method: string, body: Record<string, unknown>, signal?: AbortSignal): Promise<T> {
   const response = await fetch(`/dsh-vscode/api/${method}`, {
     method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(body), signal,
   })
@@ -10,3 +25,14 @@ export async function api<T>(method: string, body: Record<string, unknown>, sign
   if (!response.ok || !answer.ok) throw new ApiError(answer.error?.code ?? 'request-failed', answer.error?.message ?? `request failed (${response.status})`)
   return answer.value as T
 }
+
+export async function api<T>(method: string, body: Record<string, unknown>, signal?: AbortSignal): Promise<T> {
+  for (let attempt = 0; ; attempt++) {
+    try { return await request<T>(method, body, signal) }
+    catch (error) {
+      const delay = sessionRetryDelay(error, attempt)
+      if (delay === undefined) throw error
+      await wait(delay, signal)
+    }
+  }
+}

package/src/client/documentPreview.tsx

@@ -1,6 +1,30 @@
 import { useEffect, useRef, useState } from 'react'
+import { api } from './api.ts'
 
-export type DocumentPreviewKind = 'pdf' | 'docx' | 'download'
+type XlsxModule = typeof import('xlsx')
+let xlsxLoading: Promise<XlsxModule> | undefined
+
+/** Load SheetJS from the host-hosted browser build; bundling it drags Node builtins into the client. */
+export function loadXlsx(): Promise<XlsxModule> {
+  xlsxLoading ??= new Promise<XlsxModule>((resolve, reject) => {
+    const existing = (window as Window & { XLSX?: XlsxModule }).XLSX
+    if (existing !== undefined) { resolve(existing); return }
+    const script = document.createElement('script')
+    script.src = '/dsh-vscode/xlsx.js'
+    script.onload = () => {
+      const value = (window as Window & { XLSX?: XlsxModule }).XLSX
+      if (value === undefined) reject(new Error('SheetJS 加载失败')); else resolve(value)
+    }
+    script.onerror = () => reject(new Error('SheetJS 加载失败'))
+    document.head.append(script)
+  })
+  return xlsxLoading
+}
+
+export type DocumentPreviewKind = 'pdf' | 'office' | 'sheet' | 'download'
+
+const SHEET_EXTENSIONS = new Set(['xlsx', 'xlsm', 'xls', 'ods'])
+const OFFICE_EXTENSIONS = new Set(['doc', 'docx', 'ppt', 'pptx', 'odt', 'odp', 'rtf'])
 
 const MIN_PDF_SCALE = 0.5
 const MAX_PDF_SCALE = 3
@@ -14,11 +38,51 @@ export function clampPdfScale(scale: number): number {
 export function documentPreviewKind(path: string): DocumentPreviewKind | undefined {
   const extension = path.split('.').at(-1)?.toLowerCase()
   if (extension === 'pdf') return 'pdf'
-  if (extension === 'docx') return 'docx'
-  if (extension === 'doc' || extension === 'odt') return 'download'
+  if (extension !== undefined && SHEET_EXTENSIONS.has(extension)) return 'sheet'
+  if (extension !== undefined && OFFICE_EXTENSIONS.has(extension)) return 'office'
   return undefined
 }
 
+/** Convert one worksheet matrix into display rows, keeping large books responsive. */
+export function sheetTable(rows: readonly unknown[][], limits: { rows: number; columns: number } = { rows: 500, columns: 50 }): string[][] {
+  return rows.slice(0, limits.rows).map(row => (Array.isArray(row) ? row.slice(0, limits.columns) : []).map(cell => cell === null || cell === undefined ? '' : String(cell)))
+}
+
+function SheetsPreview({ src, path }: { src: string; path: string }) {
+  const [book, setBook] = useState<{ names: string[]; tables: Record<string, string[][]> }>()
+  const [active, setActive] = useState('')
+  const [error, setError] = useState<string>()
+  useEffect(() => {
+    const controller = new AbortController()
+    setBook(undefined); setError(undefined)
+    void (async () => {
+      try {
+        const response = await fetch(src, { signal: controller.signal })
+        if (!response.ok) throw new Error(`无法读取文件 (${response.status})`)
+        const buffer = await response.arrayBuffer()
+        const xlsx = await loadXlsx()
+        if (controller.signal.aborted) return
+        const workbook = xlsx.read(buffer, { type: 'array' })
+        const tables: Record<string, string[][]> = {}
+        for (const name of workbook.SheetNames) {
+          tables[name] = sheetTable(xlsx.utils.sheet_to_json<unknown[]>(workbook.Sheets[name]!, { header: 1, defval: '', blankrows: false, raw: false }))
+        }
+        setBook({ names: workbook.SheetNames, tables })
+        setActive(workbook.SheetNames[0] ?? '')
+      } catch (cause) {
+        if (!controller.signal.aborted) setError(cause instanceof Error ? cause.message : String(cause))
+      }
+    })()
+    return () => controller.abort()
+  }, [src])
+  if (error !== undefined) return <div className="dvw-document-error">无法预览表格：{error}</div>
+  const rows = book?.tables[active] ?? []
+  return <section className="dvw-sheet-preview" aria-label={`${path} 表格预览`}>
+    {(book?.names.length ?? 0) > 1 && <div className="dvw-sheet-tabs">{book!.names.map(name => <button key={name} data-active={name === active} onClick={() => setActive(name)}>{name}</button>)}</div>}
+    <div className="dvw-sheet-scroll">{book === undefined ? <div className="dvw-message">正在加载表格…</div> : rows.length === 0 ? <div className="dvw-message">此工作表为空</div> : <table className="dvw-sheet-table"><tbody>{rows.map((row, index) => <tr key={index}>{row.map((cell, column) => <td key={column} title={cell}>{cell}</td>)}</tr>)}</tbody></table>}</div>
+  </section>
+}
+
 function DocxPreview({ src }: { src: string }) {
   const root = useRef<HTMLDivElement>(null)
   const [error, setError] = useState<string>()
@@ -114,9 +178,32 @@ function PdfPreview({ src, path }: { src: string; path: string }) {
   </section>
 }
 
-/** Render an in-workbench preview for PDF and Word documents. */
+/** Session carried by the shared file URL, used for the converter status probe. */
+function sessionOfDocumentUrl(src: string): string | undefined {
+  try { return new URL(src, location.href).searchParams.get('sessionId') ?? undefined } catch { return undefined }
+}
+
+/** Word and PowerPoint open as a PDF converted on the host, matching DSH's own preview. */
+function OfficePreview({ src, path }: { src: string; path: string }) {
+  const [status, setStatus] = useState<{ available: boolean; hint?: string }>()
+  useEffect(() => {
+    const sessionId = sessionOfDocumentUrl(src)
+    if (sessionId === undefined) { setStatus({ available: false }); return }
+    let cancelled = false
+    void api<{ available: boolean; hint?: string }>('office.status', { sessionId }).then(value => { if (!cancelled) setStatus(value) }).catch(() => { if (!cancelled) setStatus({ available: false }) })
+    return () => { cancelled = true }
+  }, [src])
+  if (status === undefined) return <div className="dvw-message">正在准备 Office 预览…</div>
+  if (status.available) return <PdfPreview src={src.replace('/dsh-vscode/file?', '/dsh-vscode/office?')} path={path}/>
+  // Without LibreOffice, newer formats still render in the browser; legacy binaries fall back to a download.
+  const extension = path.split('.').at(-1)?.toLowerCase()
+  if (extension === 'docx') return <DocxPreview src={src}/>
+  return <div className="dvw-document-download"><strong>需要 LibreOffice 才能预览此格式</strong><span>{status.hint}</span><a href={src} target="_blank" rel="noreferrer">下载 {path}</a></div>
+}
+
 export function DocumentPreview({ kind, src, path }: { kind: DocumentPreviewKind; src: string; path: string }) {
   if (kind === 'pdf') return <PdfPreview src={src} path={path}/>
-  if (kind === 'docx') return <DocxPreview src={src}/>
+  if (kind === 'office') return <OfficePreview src={src} path={path}/>
+  if (kind === 'sheet') return <SheetsPreview src={src} path={path}/>
   return <div className="dvw-document-download"><strong>此格式无法在浏览器中可靠渲染</strong><a href={src} target="_blank" rel="noreferrer">打开 {path}</a></div>
 }

package/src/client/dshComposer.ts

@@ -0,0 +1,73 @@
+/** Selected editor text, with 1-based inclusive line numbers. */
+export interface EditorSelection { text: string; startLine: number; endLine: number }
+
+/** Explorer and editor shortcut that adds the current file or selection to the DSH chat. */
+export const ADD_TO_DSH_SHORTCUT = 'Ctrl+Alt+K'
+
+/** True for the add-to-DSH chord; Monaco binds it separately, so this covers the Explorer. */
+export function isAddToDshShortcut(event: Pick<KeyboardEvent, 'ctrlKey' | 'metaKey' | 'altKey' | 'shiftKey' | 'code' | 'isComposing'>): boolean {
+  return !event.isComposing && (event.ctrlKey || event.metaKey) && event.altKey && !event.shiftKey && event.code === 'KeyK'
+}
+
+/** Workspace-relative reference the agent can read: `path`, `dir/`, or `path:start-end` plus a fenced copy of the selection. */
+export function dshReference(path: string, options: { directory?: boolean; selection?: EditorSelection } = {}): string {
+  const { directory, selection } = options
+  if (selection === undefined || selection.text === '') return `\`${directory ? `${path}/` : path}\``
+  const lines = selection.startLine === selection.endLine ? `${selection.startLine}` : `${selection.startLine}-${selection.endLine}`
+  const language = /\.([a-z0-9]+)$/i.exec(path)?.[1]?.toLowerCase() ?? ''
+  const fence = selection.text.includes('```') ? '````' : '```'
+  return `\`${path}:${lines}\`\n${fence}${language}\n${selection.text.replace(/\n$/, '')}\n${fence}\n`
+}
+
+/** Separator that keeps an inserted reference from gluing onto the existing draft. */
+export function referenceSeparator(draft: string, reference: string): string {
+  if (draft === '' || /\s$/.test(draft)) return ''
+  return reference.includes('\n') ? '\n' : ' '
+}
+
+// DSH Desktop renders the draft as a Lexical contenteditable (`data-composer-input`); older web builds use a textarea.
+const COMPOSER = '[data-composer-input],textarea'
+
+/** The DSH composer input, preferring the copy shown in the workbench's right column. */
+export function findDshComposer(documentRoot: Document = document): HTMLElement | null {
+  return documentRoot.querySelector<HTMLElement>(`[data-dvw-conversation-panel] [data-composer-card] :is(${COMPOSER})`)
+    ?? documentRoot.querySelector<HTMLElement>(`[data-composer-card] :is(${COMPOSER})`)
+}
+
+function composerEditable(input: HTMLElement): boolean {
+  if (input instanceof HTMLTextAreaElement) return !input.disabled && !input.readOnly
+  return input.isContentEditable || input.getAttribute('contenteditable') === 'true'
+}
+
+function composerText(input: HTMLElement): string { return input instanceof HTMLTextAreaElement ? input.value : (input.textContent ?? '') }
+
+const nextFrame = () => new Promise<void>(resolve => requestAnimationFrame(() => resolve()))
+
+/** Append `reference` to the DSH draft through native editing so DSH's input machine and undo stack see it. */
+export async function insertIntoDshComposer(reference: string, documentRoot: Document = document): Promise<boolean> {
+  const input = findDshComposer(documentRoot)
+  if (input === null || !composerEditable(input)) return false
+  const text = referenceSeparator(composerText(input), reference) + (reference.endsWith('\n') ? reference : `${reference} `)
+  input.focus()
+  if (input instanceof HTMLTextAreaElement) {
+    input.setSelectionRange(input.value.length, input.value.length)
+    if (typeof documentRoot.execCommand === 'function' && documentRoot.execCommand('insertText', false, text)) return true
+    // execCommand is unavailable: set the value through the native setter so React's onChange still fires.
+    const setter = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')?.set
+    setter?.call(input, input.value + text)
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+    return true
+  }
+  const selection = documentRoot.getSelection()
+  const range = documentRoot.createRange(); range.selectNodeContents(input); range.collapse(false)
+  selection?.removeAllRanges(); selection?.addRange(range)
+  // Lexical adopts the DOM caret on selectionchange; paste only after it has.
+  await nextFrame()
+  // Lexical's paste handler keeps line breaks and records one undo step; insertText is the fallback.
+  if (typeof DataTransfer === 'function' && typeof ClipboardEvent === 'function') {
+    const data = new DataTransfer(); data.setData('text/plain', text)
+    const paste = new ClipboardEvent('paste', { clipboardData: data, bubbles: true, cancelable: true })
+    if (!input.dispatchEvent(paste)) return true
+  }
+  return typeof documentRoot.execCommand === 'function' && documentRoot.execCommand('insertText', false, text)
+}

package/src/client/dshNavigation.ts

@@ -0,0 +1,81 @@
+/** Access to DSH's client-side workspace and session stores for the in-workbench switcher. */
+export interface WorkspaceChoice {
+  id: string
+  title: string
+  path: string
+  sessions: SessionChoice[]
+}
+export interface SessionChoice {
+  id: string
+  title: string
+  blank: boolean
+  active: boolean
+}
+interface SessionSummary {
+  title?: string
+  blank?: boolean
+  projectionValues?: { title?: string }
+}
+interface WorkspacesSnapshot {
+  items?: readonly { workspaceId: string; title: string; path: string; sessionIds: readonly string[] }[]
+  phase?: string
+}
+interface SessionsSnapshot {
+  ids: readonly string[]
+  byId: Record<string, SessionSummary>
+  phase?: string
+}
+interface SnapshotStore<T> { getSnapshot(): T }
+interface UiWorkspace {
+  openSession(id: string): void
+  openWorkspace?(id: string, beforeOpen: (nextId: string | undefined) => void, options?: Record<string, unknown>): unknown
+}
+
+/** The slice of DSH's client context the switcher needs, read through `ctx.get` like ui-conversation does. */
+export interface DshNavigation {
+  available: boolean
+  choices(activeSessionId?: string): WorkspaceChoice[]
+  openSession(id: string): boolean
+  openWorkspace(id: string): boolean
+}
+
+/** Build display rows from the two snapshot stores, keeping DSH's own workspace and session order. */
+export function buildWorkspaceChoices(workspaces: WorkspacesSnapshot | undefined, sessions: SessionsSnapshot | undefined, activeSessionId?: string): WorkspaceChoice[] {
+  if (workspaces?.items === undefined || sessions === undefined) return []
+  return workspaces.items.map(workspace => ({
+    id: workspace.workspaceId,
+    title: workspace.title,
+    path: workspace.path,
+    sessions: workspace.sessionIds.flatMap(id => {
+      const summary = sessions.byId[id]
+      if (summary === undefined) return []
+      return [{ id, title: summary.title ?? summary.projectionValues?.title ?? '未命名会话', blank: summary.blank === true, active: id === activeSessionId }]
+    }),
+  }))
+}
+
+/** Resolve the DSH client services; `get` returns undefined outside the web/desktop client. */
+export function createDshNavigation(get: ((name: string) => unknown) | undefined): DshNavigation {
+  const look = (name: string): unknown => { try { return get?.(name) } catch { return undefined } }
+  const workspaces = () => look('workspaces') as { list?: SnapshotStore<WorkspacesSnapshot> } | undefined
+  const sessions = () => look('sessions') as { list?: SnapshotStore<SessionsSnapshot> } | undefined
+  const uiWorkspace = () => look('uiWorkspace') as UiWorkspace | undefined
+  return {
+    get available() { return workspaces()?.list !== undefined && sessions()?.list !== undefined },
+    choices(activeSessionId) {
+      return buildWorkspaceChoices(workspaces()?.list?.getSnapshot(), sessions()?.list?.getSnapshot(), activeSessionId)
+    },
+    openSession(id) {
+      const navigation = uiWorkspace()
+      if (navigation === undefined) return false
+      navigation.openSession(id)
+      return true
+    },
+    openWorkspace(id) {
+      const navigation = uiWorkspace()
+      if (navigation?.openWorkspace === undefined) return false
+      void navigation.openWorkspace(id, () => undefined)
+      return true
+    },
+  }
+}

package/src/client/fileIconMap.ts

@@ -0,0 +1,7 @@
+import { getIconForFile, getIconForFolder, getIconForOpenFolder } from 'vscode-icons-js'
+
+/** Resolve the vscode-icons asset name for a tree entry or tab. */
+export function fileIconName(name: string, directory: boolean, expanded: boolean): string {
+  if (directory) return (expanded ? getIconForOpenFolder(name) : getIconForFolder(name)) ?? (expanded ? 'default_folder_opened.svg' : 'default_folder.svg')
+  return getIconForFile(name) ?? 'default_file.svg'
+}

package/src/client/gitError.ts

@@ -0,0 +1,5 @@
+/** Normalize a Git/API error into the sentence shown in the branch-switch dialog. */
+export function branchErrorMessage(error: unknown): string {
+  const message = error instanceof Error ? error.message : String(error)
+  return message.replace(/^(?:Error:\s*)?(?:error:\s*)?/i, '').trim() || '无法切换分支。'
+}

package/src/client/index.tsx

@@ -1,7 +1,7 @@
 import type { Context as ClientContext } from '@deepseek-ai/cordis'
-import { useEffect, useLayoutEffect, useState } from 'react'
-import { createPortal } from 'react-dom'
+import { useLayoutEffect } from 'react'
 import type {} from '@deepseek-ai/dsh-client-ui-layout/client'
+import type { MainPanelId } from '@deepseek-ai/dsh-client-ui-layout/client'
 import type {} from '@deepseek-ai/dsh-client-ui-sidebar/client'
 import type {} from '@deepseek-ai/dsh-client-ui-session/client'
 import type {} from '@deepseek-ai/dsh-client-ui-renderer/client'
@@ -10,37 +10,51 @@ import type { PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
 import type { VscodeWorkbench } from './service.ts'
 import { WorkbenchController } from './service.ts'
 import { TerminalPanel } from './TerminalPanel.tsx'
-import { Launcher, Workbench } from './Workbench.tsx'
+import { Workbench } from './Workbench.tsx'
 import { installStyles } from './styles.ts'
 import { handleTerminalShortcut } from './shortcuts.ts'
 import { mainViewSession } from './session.ts'
+import { createDshNavigation } from './dshNavigation.ts'
+import type { DshNavigation } from './dshNavigation.ts'
 
 export type { BottomPanelContribution, BottomPanelProps, VscodeWorkbench, WorkbenchCommand, WorkbenchSnapshot, WorkbenchView } from './service.ts'
 
 declare module '@deepseek-ai/cordis' { interface Context { vscodeWorkbench: VscodeWorkbench } }
 
-const Overlay = ({ service, useSessions }: PropsRuntime<'shell.overlay'> & { service: VscodeWorkbench }) => {
+const Overlay = ({ service, useSessions, navigation }: PropsRuntime<'shell.overlay'> & { service: VscodeWorkbench; navigation: DshNavigation }) => {
   const session = useSessions(mainViewSession)
   const cwd = session?.projectionValues?.workingDirectory ?? session?.cwd
-  return <Workbench key={`${session?.id ?? 'no-session'}:${cwd ?? ''}`} service={service} sessionId={session?.id} cwd={cwd}/>
+  return <Workbench key={cwd ?? 'no-workspace'} service={service} sessionId={session?.id} cwd={cwd} navigation={navigation}/>
 }
-const Footer = ({ service }: PropsRuntime<'sidebar.footer.action'> & { service: VscodeWorkbench }) => {
-  const [target, setTarget] = useState<HTMLElement>()
-  const [visible, setVisible] = useState(() => service.getSnapshot().visible)
-  useLayoutEffect(() => { const mount = document.createElement('div'); mount.className = 'dvw-launcher-mount'; document.body.append(mount); setTarget(mount); return () => mount.remove() }, [])
-  useEffect(() => service.subscribe(() => setVisible(service.getSnapshot().visible)), [service])
-  return target === undefined || visible ? null : createPortal(<Launcher service={service}/>, target)
+
+const WORKBENCH_PANEL_ID = 'vscode-workbench' as MainPanelId
+
+/** Panel-list icon; the panel itself opens the overlay and hands the centre back to the conversation. */
+function WorkbenchPanelIcon({ size }: { size: number }) {
+  return <span className="codicon codicon-code" aria-hidden="true" style={{ fontSize: size, lineHeight: 1 }}/>
+}
+
+function WorkbenchPanel({ service, restoreConversation }: { service: VscodeWorkbench; restoreConversation(): void }) {
+  useLayoutEffect(() => { service.show(); restoreConversation() }, [service, restoreConversation])
+  return null
 }
 
-export const inject = ['slots']
+export const inject = ['slots', 'layout']
 export function apply(ctx: ClientContext): void {
   const service = new WorkbenchController()
+  // Optional access to DSH's own workspace/session stores, used by the centered workspace switcher.
+  const navigation = createDshNavigation((name) => (ctx as unknown as { get?: (name: string) => unknown }).get?.(name))
   ctx.effect(() => installStyles(), 'dsh-vscode-workbench: styles')
   ctx.effect(() => { const dispose = ctx.reflect.provide('vscodeWorkbench', service); return () => { void dispose() } }, 'dsh-vscode-workbench: service')
   ctx.effect(() => service.registerBottomPanel({ id: 'terminal', title: '终端', component: TerminalPanel }), 'dsh-vscode-workbench: terminal panel')
   ctx.effect(() => service.registerCommand({ id: 'terminal.new', run() { window.dispatchEvent(new Event('dvw-terminal-new')) } }), 'dsh-vscode-workbench: terminal command')
-  ctx.slots.inject('sidebar.footer.action', () => ctx.slots.register({ name: 'sidebar.footer.action', id: 'dsh-vscode-workbench-launcher', inject: () => ({ service }) }, Footer))
-  ctx.slots.inject('shell.overlay', () => ctx.slots.register({ name: 'shell.overlay', id: 'dsh-vscode-workbench-overlay', inject: () => ({ service }) }, Overlay))
+  const restoreConversation = () => { ctx.layout?.selectPanel(null) }
+  ctx.slots.inject('main', () => ctx.slots.inject('sidebar.panellist', () => {
+    const disposeMain = ctx.slots.register({ name: 'main', key: WORKBENCH_PANEL_ID, inject: () => ({ service, restoreConversation }) }, WorkbenchPanel)
+    const disposeIcon = ctx.slots.register({ name: 'sidebar.panellist', id: WORKBENCH_PANEL_ID, order: 60, label: () => 'VS Code 工作台' }, WorkbenchPanelIcon)
+    return () => { disposeIcon(); disposeMain() }
+  }))
+  ctx.slots.inject('shell.overlay', () => ctx.slots.register({ name: 'shell.overlay', id: 'dsh-vscode-workbench-overlay', inject: () => ({ service, navigation }) }, Overlay))
   ctx.effect(() => {
     const onKey = (event: KeyboardEvent) => {
       if (handleTerminalShortcut(event, service)) return