@lincyaw/dsh 0.1.0 → 0.2.0-rc.1

package/src/client/index.tsx

@@ -1,13 +1,28 @@
-import { localeOf, Workbench } from '@lincyaw/workbench'
+import { connectAuthoringClient, localeOf, Workbench, workspaceClient } from '@lincyaw/workbench'
 import type { Locale } from '@lincyaw/workbench'
-import { brand } from './brand.tsx'
-import { chrome } from './chrome.tsx'
-import { CLIENT_ID, ROOT_CHILDREN, UI_LAYOUT } from './contract.ts'
-import { FALLBACK_PANEL, fallback } from './fallback.tsx'
-import { frameFor } from './Frame.tsx'
+import { workspaceSubscriptions } from './workspace-events.ts'
+import { registerAuthorSettings } from './author-settings.ts'
+import { registerSpeechSettings } from './speech-settings.tsx'
+import { openSpeechSettings } from './settings-opener.ts'
+import { registerBrand } from './brand.tsx'
+import { registerMascot } from './mascot.tsx'
+import { CLIENT_ID, isBootEntryLoaded, ROOT_CHILDREN, UI_LAYOUT, UI_SIDEBAR } from './contract.ts'
+import { syncDocumentContext } from './document-context.ts'
+import { FALLBACK_PANEL, registerFallbackLayout } from './fallback.tsx'
 import { createLayoutStore, LayoutController } from './layout.ts'
-import { sourceLinks } from './source.tsx'
-import { followScheme, ThemePresenter, TOKENS } from './theme.ts'
+import { connectLaunchTarget } from './launch-target.ts'
+import { CLIENT_MESSAGES } from './messages.ts'
+import { registerNavigationShell } from './navigation-shell.tsx'
+import { createObservable } from './observable.ts'
+import { isSamePath } from './paths.ts'
+import { registerAgentRequests } from './agent-requests.ts'
+import { registerAssistantSetup } from './assistant-setup.tsx'
+import { rootLayoutFor } from './RootLayout.tsx'
+import { beginRootReload, restoreRootReturnPoint, saveRootReturnPoint } from './root-reload.ts'
+import { registerSourceLinks } from './source-links.tsx'
+import { registerWorkbenchKeys } from './workbench-keys.ts'
+import { runtimeDiagnostics } from './runtime-diagnostics.tsx'
+import { DSH_THEME_TOKENS, syncDarkClass, ThemePresenter } from './theme.ts'
 
 declare const __PRESMIUM_CSS__: string
 
@@ -21,69 +36,46 @@ if (typeof document !== 'undefined' && !document.querySelector(`style[data-plugi
 
 export const inject = ['slots', 'theme', 'locale', 'shortcuts']
 
+// The studio's one language source: the language chosen in Settings, else the browser's.
 function workbenchLocale(active: string | undefined): Locale {
-  const tag = active?.toLowerCase() ?? ''
-  if (tag.startsWith('zh') || tag.startsWith('en')) return localeOf(tag)
-  return localeOf(navigator.language)
+  return localeOf(active) ?? localeOf(navigator.language) ?? 'en'
 }
 
 export function apply(ctx: DshClientContext): void {
-  const navigation = new Promise<DshClientContext['uiWorkspace']>(resolve => ctx.inject(['uiWorkspace'], inner => resolve(inner.uiWorkspace)))
-  let workspaceSnapshot: ReturnType<DshClientContext['workspaces']['list']['getSnapshot']> = { items: [] }
-  const workspaceListeners = new Set<() => void>()
-  const workspaceStore = {
-    getSnapshot: () => workspaceSnapshot,
-    subscribe(listener: () => void) {
-      workspaceListeners.add(listener)
-      return () => { workspaceListeners.delete(listener) }
-    },
-  }
+  const nativeLayout = isBootEntryLoaded(UI_LAYOUT)
+  const reload = nativeLayout ? { reloading: false } : beginRootReload()
+  if (reload.reloading) return
+  const uiWorkspace = new Promise<DshClientContext['uiWorkspace']>(resolve => ctx.inject(['uiWorkspace'], inner => resolve(inner.uiWorkspace)))
+  const dshWorkspaces = createObservable<ReturnType<DshClientContext['workspaces']['list']['getSnapshot']>>({ items: [] })
   // Register the root before the renderer boots; remote-backed workspace data follows later.
   ctx.inject(['workspaces'], inner => inner.effect(() => {
-    const update = () => {
-      workspaceSnapshot = inner.workspaces.list.getSnapshot()
-      for (const listener of workspaceListeners) listener()
-    }
+    const update = () => dshWorkspaces.set(inner.workspaces.list.getSnapshot())
     update()
     return inner.workspaces.list.subscribe(update)
   }, 'presmium: workspace list'))
-  const workbench = new Workbench({ locale: workbenchLocale(ctx.locale.getLocale().active) })
-  const ownLayout = window.__DSH_BOOT__?.entries.some(entry => entry.id === UI_LAYOUT)
+  const workbench = new Workbench({ client: workspaceClient('api/presmium/', workspaceSubscriptions(ctx)), locale: workbenchLocale(ctx.locale.getLocale().active) })
+  workbench.client.openSpeechSettings = openSpeechSettings
+  ctx.effect(() => connectAuthoringClient(workbench), 'presmium: authoring client control')
+  ctx.effect(() => runtimeDiagnostics(workbench).start(), 'presmium: runtime diagnostics')
   let showEditor = (layout: DshClientContext['layout']) => layout.selectPanel(FALLBACK_PANEL)
-  sourceLinks(ctx, workbench, layout => showEditor(layout))
-  ctx.effect(() => () => workbench.dispose(), 'presmium: workbench')
-  ctx.inject(['sessions'], inner => inner.effect(() => {
-    let previous: string | undefined
-    let pending: AbortController | undefined
-    const sync = () => {
-      const session = Object.values(inner.sessions.list.getSnapshot().byId).find(row => (row.retainedBy.mainView ?? 0) > 0)
-      if (!session) return
-      const document = workbench.state.document === '' && workbench.state.documents?.single === false ? null : workbench.state.document ?? null
-      const key = JSON.stringify([session.id, document])
-      if (key === previous) return
-      previous = key
-      pending?.abort()
-      pending = new AbortController()
-      void fetch('/api/presmium/context', {
-        method: 'POST', headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ session: session.id, document }), signal: pending.signal,
-      }).catch(() => {})
-    }
-    const offSession = inner.sessions.list.subscribe(sync)
-    const offDocument = workbench.subscribe(sync)
-    sync()
-    return () => { offSession(); offDocument(); pending?.abort() }
-  }, 'presmium: selected document context (all layouts)'))
+  registerSourceLinks(ctx, workbench, layout => showEditor(layout))
+  ctx.effect(() => () => {
+    workbench.dispose()
+    if (!nativeLayout) saveRootReturnPoint(workbench)
+  }, 'presmium: workbench')
+  syncDocumentContext(ctx, workbench)
+  registerWorkbenchKeys(ctx, workbench)
+  registerAgentRequests(ctx, workbench, registerAssistantSetup(ctx, workbench))
   ctx.effect(() => ctx.locale.subscribe(() => workbench.setLocale(workbenchLocale(ctx.locale.getLocale().active))), 'presmium: language')
-  ctx.effect(() => ctx.theme.overrideTokens(CLIENT_ID, TOKENS), 'presmium: 书卷 tokens')
+  ctx.effect(() => ctx.theme.overrideTokens(CLIENT_ID, DSH_THEME_TOKENS), 'presmium: 书卷 tokens')
   ctx.effect(() => {
-    const follow = (snapshot: DshThemeSnapshot) => workbench.setDark(followScheme(snapshot))
-    follow(ctx.theme.getTheme())
-    return ctx.on('theme/change', follow)
+    const sync = (snapshot: DshThemeSnapshot) => workbench.setDark(syncDarkClass(snapshot))
+    sync(ctx.theme.getTheme())
+    return ctx.on('theme/change', sync)
   }, 'presmium: light and dark')
 
-  if (ownLayout) {
-    fallback(ctx, workbench)
+  if (nativeLayout) {
+    registerFallbackLayout(ctx, workbench)
   } else {
     ctx.effect(() => {
       const presenter = new ThemePresenter()
@@ -97,11 +89,11 @@ export function apply(ctx: DshClientContext): void {
     ctx.effect(() => {
       const handle = createLayoutStore()
       const instance = handle.create()
-      const panelStore = chrome(ctx, workbench, instance.actions, instance.getSnapshot, async () => {
-        const { root } = await workbench.client.workbench()
-        const normalize = (path: string) => path.replace(/\\/g, '/').replace(/\/$/, '')
-        const workspace = workspaceSnapshot.items.find(item => root && normalize(item.path) === normalize(root))
-        if (workspace) (await navigation).startSession(workspace.workspaceId)
+      const globalPanels = createObservable<readonly DshSlotEntry[]>([])
+      registerNavigationShell(ctx, workbench, instance, globalPanels, async () => {
+        const { root } = await workbench.client.readWorkbenchInfo()
+        const workspace = dshWorkspaces.getSnapshot().items.find(item => root && isSamePath(item.path, root))
+        if (workspace) (await uiWorkspace).startSession(workspace.workspaceId)
       })
       const store = { ...handle, create: () => instance }
       const mainKeys = () => ctx.slots.entries('main').flatMap(entry => (entry.options.key === undefined ? [] : [entry.options.key]))
@@ -115,16 +107,21 @@ export function apply(ctx: DshClientContext): void {
         triggers[triggers.length - 1]?.click()
       }
       const disposePanelInfo = ctx.slots.provideRoot({ hooks: { panelInfo: layout.panelInfo } })
-      const disposeService = ctx.reflect.provide('layout', layout)
-      const nativeSidebar = window.__DSH_BOOT__?.entries.some(entry => entry.id === '@deepseek-ai/dsh-client-ui-sidebar')
       const disposeRoot = ctx.slots.register({ name: 'root', locale: 'common', children: {
         ...ROOT_CHILDREN,
-        ...(nativeSidebar ? {} : { 'sidebar.panellist': { kind: 'list', scope: 'root' } as const }),
-      }, store }, frameFor(workbench, openSettings, id => navigation.then(service => service.openWorkspace(id, () => layout.preserveNextConversation())), workspaceStore, panelStore))
+        ...(isBootEntryLoaded(UI_SIDEBAR) ? {} : { 'sidebar.panellist': { kind: 'list', scope: 'root' } as const }),
+      }, store }, rootLayoutFor({
+        workbench,
+        openSettings,
+        openDshWorkspace: id => uiWorkspace.then(service => service.openWorkspace(id, () => layout.preserveNextConversation())),
+        dshWorkspaces,
+        globalPanels,
+      }))
+      const disposeService = ctx.reflect.provide('layout', layout)
       const binding = { code: 'KeyB', modifiers: ['primary', 'alt'] }
       const disposeShortcut = ctx.shortcuts.register({
         id: 'sidebar.left.toggle',
-        label: () => (workbench.state.locale === 'zh-CN' ? '展开／收起侧栏' : 'Toggle the side panel'),
+        label: () => CLIENT_MESSAGES[workbench.state.locale].toggleSide,
         aliases: ['sidebar', 'toggle left sidebar'],
         defaults: {
           'desktop:macos': { code: 'KeyB', modifiers: ['primary'] },
@@ -144,11 +141,17 @@ export function apply(ctx: DshClientContext): void {
         disposeShortcut()
         layout.dispose()
         disposePanels()
+        disposeService()
         disposeRoot()
         disposePanelInfo()
-        disposeService()
       }
     }, 'presmium: the root layout and ctx.layout')
   }
-  brand(ctx, workbench)
+  registerBrand(ctx, workbench)
+  registerMascot(ctx, workbench)
+  registerAuthorSettings(ctx)
+  registerSpeechSettings(ctx, workbench)
+  ctx.inject(['layout'], inner => inner.effect(() => connectLaunchTarget(workbench,
+    () => nativeLayout ? () => {} : restoreRootReturnPoint(workbench, reload.point),
+    () => showEditor(inner.layout)), 'presmium: launch target and root return point'))
 }

package/src/client/launch-target.ts

@@ -0,0 +1,89 @@
+import type { Workbench } from '@lincyaw/workbench'
+import { restoreRootReturnPoint } from './root-reload.ts'
+
+const PREFIX = '#presmium?'
+const INTERACTIONS = ['pointerdown', 'keydown', 'beforeinput', 'wheel', 'touchmove']
+
+interface LaunchTarget { directory: string, documentId: string, sectionId?: string }
+
+/** This fragment belongs to Presmium; Harness's authenticated root and API routes keep their own paths. */
+export function parseLaunchTarget(fragment: string): LaunchTarget | undefined {
+  if (!fragment.startsWith(PREFIX) || fragment.length > 8192) return
+  const params = new URLSearchParams(fragment.slice(PREFIX.length))
+  const keys = ['document', 'id', 'section', 'request']
+  if ([...params.keys()].some(key => !keys.includes(key)) || keys.some(key => params.getAll(key).length > 1)) return
+  const request = params.get('request')
+  if (request !== null && !/^[\da-f]{8}-[\da-f]{4}-4[\da-f]{3}-[89ab][\da-f]{3}-[\da-f]{12}$/i.test(request)) return
+  const directory = params.get('document'), documentId = params.get('id'), sectionId = params.get('section')
+  if (directory === null || !documentId || sectionId === '' || /[\\:\u0000-\u001f\u007f]/.test(directory)
+    || directory !== '' && directory.split('/').some(part => !part || part === '.' || part === '..')) return
+  return { directory, documentId, ...sectionId !== null ? { sectionId } : {} }
+}
+
+/** Explicit addresses outrank reload recovery; source identity and ordinary user navigation still own adoption. */
+export function connectLaunchTarget(workbench: Workbench, restore: () => () => void, showDocument: () => void): () => void {
+  let closed = false, generation = 0
+  let stopPending: (() => void) | undefined, stopReturn: (() => void) | undefined
+  const open = (initial = false) => {
+    const request = ++generation, fragment = window.location.hash
+    stopPending?.(); stopPending = undefined
+    stopReturn?.()
+    if (initial && !fragment.startsWith(PREFIX)) { stopReturn = restore(); return }
+    // Keep the ordinary address retention, without opening an older checkpoint behind this explicit intent.
+    stopReturn = restoreRootReturnPoint(workbench, undefined)
+    const target = parseLaunchTarget(fragment)
+    if (!target) return
+    let active = true, ownOpening = false, committing = false
+    const beforeDocument = workbench.state.document
+    let navigation = workbench.documentNavigationVersion
+    let position = workbench.state.documentPositionToken, view = workbench.state.webView
+    const current = () => active && !closed && request === generation && window.location.hash === fragment
+      && workbench.documentNavigationVersion === navigation && workbench.state.webView === view
+    const cancel = () => { active = false }
+    const interact = (event: Event) => { if (event.isTrusted) cancel() }
+    for (const name of INTERACTIONS) document.addEventListener(name, interact, true)
+    const stop = workbench.subscribe(() => {
+      if (committing) return
+      if (!current() || !ownOpening && workbench.state.documentPositionToken !== position) cancel()
+    })
+    const close = () => {
+      cancel(); stop()
+      for (const name of INTERACTIONS) document.removeEventListener(name, interact, true)
+    }
+    stopPending = close
+    const launch = async () => {
+      const [info] = await Promise.all([workbench.client.readWorkbenchInfo(), workbench.loadDocuments()])
+      if (!current() || !info.root || !workbench.state.documents?.documents.some(doc => doc.dir === target.directory)) return
+      // Only an already listed directory can be read. A stale ID or missing page never changes the current selection.
+      const answer = await workbench.client.readDocument(target.directory)
+      if (!current() || answer.content.id !== target.documentId
+        || !workbench.state.documents?.documents.some(doc => doc.dir === target.directory)
+        || target.sectionId && (!answer.content.sectionOrder.includes(target.sectionId) || !answer.content.sections[target.sectionId])) return
+      const identity = JSON.stringify([info.root, target.documentId])
+      ownOpening = true
+      committing = true
+      const opened = workbench.openDocument(target.directory, { expectedIdentity: identity })
+      navigation = workbench.documentNavigationVersion
+      position = workbench.state.documentPositionToken
+      view = workbench.state.webView
+      committing = false
+      await opened
+      if (!current() || workbench.state.document !== target.directory || workbench.state.authoring?.identity !== identity
+        || workbench.state.authoring.content?.id !== target.documentId) return
+      const section = target.sectionId
+      if (section && (!workbench.state.authoring.content.sectionOrder.includes(section) || !workbench.state.authoring.content.sections[section])) return
+      // A retained document keeps its editing or playback view; a newly opened document starts in Doc.
+      close()
+      showDocument()
+      if (beforeDocument !== target.directory && workbench.state.webView === 'document' && section) workbench.goToSection(section)
+    }
+    void launch().catch(() => { /* Invalid or unavailable addresses leave the ordinary document UI available. */ }).finally(() => {
+      close()
+      if (stopPending === close) stopPending = undefined
+    })
+  }
+  const changed = () => open()
+  window.addEventListener('hashchange', changed)
+  open(true)
+  return () => { closed = true; generation++; stopPending?.(); stopReturn?.(); window.removeEventListener('hashchange', changed) }
+}

package/src/client/layout.ts

@@ -1,58 +1,69 @@
 import { defineStore } from '@deepseek-ai/dsh-client-store'
 
-export const CENTER_MIN = 400
+export const CENTRE_MIN = 400
 export const RIGHTBAR_MIN = 300
 export const RIGHTBAR_MAX_RATIO = 0.7
 export const RIGHTBAR_DEFAULT_RATIO = 0.45
 export const SIDE_COLLAPSE = 1024
 export const NARROW = 768
-export const ACTIVITY = 48
 export const SIDE_DEFAULT = 264
 export const SIDE_MIN = 200
 export const SIDE_MAX = 420
-export const DOCK_DEFAULT = 400
-export const DOCK_MIN = 320
-export const DOCK_MAX = 640
+export const CONVERSATION_DEFAULT = 400
+export const CONVERSATION_MIN = 320
+export const CONVERSATION_MAX = 640
+/** The width of one resize handle between two columns: a hairline, with a wider area to grab. */
+export const HANDLE = 1
 
 export const clamp = (px: number, min: number, max: number) => Math.min(max, Math.max(min, Math.round(px)))
 
-export type Activity = 'documents' | 'files' | 'changes' | 'sessions'
-export type NarrowView = 'documents' | 'files' | 'source' | 'preview' | 'changes' | 'sessions' | 'conversation'
+/** The width left for the rightbar column: the viewport less the side panel, the conversation, the centre's minimum and `handles` resize handles. */
+export function rightbarRoom(viewport: number, side: number, conversation: number, handles: number): number {
+  return viewport - side - conversation - CENTRE_MIN - handles * HANDLE
+}
+
+/** What the side panel shows: the chat history (DeepSeek Harness's sessions). */
+export type Activity = 'sessions'
+/** What a narrow screen shows, one at a time. */
+export type NarrowPane = 'documents' | 'preview' | 'sessions' | 'conversation'
 
 export interface LayoutState {
   panelInfo: { activePanelId: string | null }
   layoutInfo: {
     viewportWidth: number
-    sideOpen: boolean
-    sideExpanded: boolean
-    side: number
-    dock: number
-    dockOpen: boolean
-    rightbar: number | null
-    rightbarShown: boolean
-    rightbarTrack: boolean
-    rightbarFullscreen: boolean
+    isSideOpen: boolean
+    /** On a screen narrower than SIDE_COLLAPSE the side panel opens over the centre. */
+    isSideExpanded: boolean
+    sideWidth: number
+    conversationWidth: number
+    isConversationOpen: boolean
+    rightbarWidth: number | null
+    isRightbarOpen: boolean
+    hasRightbarTrack: boolean
+    isRightbarFullscreen: boolean
     activity: Activity
-    view: NarrowView
+    narrowPane: NarrowPane
   }
 }
 
+const openConversationWidth = (info: LayoutState['layoutInfo']) => (info.isConversationOpen ? info.conversationWidth : 0)
+
 function revealConversation(d: LayoutState): void {
   d.panelInfo.activePanelId = null
-  d.layoutInfo.dockOpen = true
-  d.layoutInfo.view = 'conversation'
-  if (d.layoutInfo.viewportWidth < SIDE_COLLAPSE) d.layoutInfo.sideExpanded = false
+  d.layoutInfo.isConversationOpen = true
+  d.layoutInfo.narrowPane = 'conversation'
+  if (d.layoutInfo.viewportWidth < SIDE_COLLAPSE) d.layoutInfo.isSideExpanded = false
 }
 
 function showHistory(d: LayoutState): void {
   d.panelInfo.activePanelId = null
   d.layoutInfo.activity = 'sessions'
-  d.layoutInfo.sideOpen = true
-  d.layoutInfo.view = 'sessions'
+  d.layoutInfo.isSideOpen = true
+  d.layoutInfo.narrowPane = 'sessions'
   if (d.layoutInfo.viewportWidth < SIDE_COLLAPSE) {
-    d.layoutInfo.sideExpanded = d.layoutInfo.viewportWidth >= NARROW
-    d.layoutInfo.dockOpen = false
-  } else d.layoutInfo.dockOpen = true
+    d.layoutInfo.isSideExpanded = d.layoutInfo.viewportWidth >= NARROW
+    d.layoutInfo.isConversationOpen = false
+  } else d.layoutInfo.isConversationOpen = true
 }
 
 export function createLayoutStore() {
@@ -61,17 +72,17 @@ export function createLayoutStore() {
       panelInfo: { activePanelId: null },
       layoutInfo: {
         viewportWidth: window.innerWidth,
-        sideOpen: false,
-        sideExpanded: false,
-        side: SIDE_DEFAULT,
-        dock: DOCK_DEFAULT,
-        dockOpen: true,
-        rightbar: null,
-        rightbarShown: false,
-        rightbarTrack: false,
-        rightbarFullscreen: false,
-        activity: 'files',
-        view: 'documents',
+        isSideOpen: false,
+        isSideExpanded: false,
+        sideWidth: SIDE_DEFAULT,
+        conversationWidth: CONVERSATION_DEFAULT,
+        isConversationOpen: false,
+        rightbarWidth: null,
+        isRightbarOpen: false,
+        hasRightbarTrack: false,
+        isRightbarFullscreen: false,
+        activity: 'sessions',
+        narrowPane: 'documents',
       },
     }),
     actions: {
@@ -82,76 +93,78 @@ export function createLayoutStore() {
         if (d.panelInfo.activePanelId !== null && !ids.includes(d.panelInfo.activePanelId)) d.panelInfo.activePanelId = null
       },
       setViewportWidth: (d: LayoutState, width: number) => {
-        if ((d.layoutInfo.viewportWidth < SIDE_COLLAPSE) !== (width < SIDE_COLLAPSE)) d.layoutInfo.sideExpanded = false
+        if ((d.layoutInfo.viewportWidth < SIDE_COLLAPSE) !== (width < SIDE_COLLAPSE)) d.layoutInfo.isSideExpanded = false
         d.layoutInfo.viewportWidth = width
-        if (d.layoutInfo.rightbarTrack && width - ACTIVITY - d.layoutInfo.side - (d.layoutInfo.dockOpen ? d.layoutInfo.dock : 0) - CENTER_MIN - 24 < RIGHTBAR_MIN) {
-          d.layoutInfo.sideOpen = false
-          d.layoutInfo.sideExpanded = false
+        if (d.layoutInfo.hasRightbarTrack && rightbarRoom(width, d.layoutInfo.sideWidth, openConversationWidth(d.layoutInfo), 3) < RIGHTBAR_MIN) {
+          d.layoutInfo.isSideOpen = false
+          d.layoutInfo.isSideExpanded = false
         }
       },
       toggleSidebar: (d: LayoutState) => {
         if (d.layoutInfo.viewportWidth < SIDE_COLLAPSE) {
-          d.layoutInfo.sideExpanded = !d.layoutInfo.sideExpanded
-          if (d.layoutInfo.sideExpanded) d.layoutInfo.dockOpen = false
+          d.layoutInfo.isSideExpanded = !d.layoutInfo.isSideExpanded
+          if (d.layoutInfo.isSideExpanded) d.layoutInfo.isConversationOpen = false
         }
-        else d.layoutInfo.sideOpen = !d.layoutInfo.sideOpen
+        else d.layoutInfo.isSideOpen = !d.layoutInfo.isSideOpen
       },
-      setSide: (d: LayoutState, px: number) => {
-        d.layoutInfo.side = clamp(px, SIDE_MIN, SIDE_MAX)
+      setSideWidth: (d: LayoutState, px: number) => {
+        d.layoutInfo.sideWidth = clamp(px, SIDE_MIN, SIDE_MAX)
       },
-      setDock: (d: LayoutState, px: number) => {
-        d.layoutInfo.dock = clamp(px, DOCK_MIN, Math.min(DOCK_MAX, d.layoutInfo.viewportWidth * 0.5))
+      setConversationWidth: (d: LayoutState, px: number) => {
+        d.layoutInfo.conversationWidth = clamp(px, CONVERSATION_MIN, Math.min(CONVERSATION_MAX, d.layoutInfo.viewportWidth * 0.5))
       },
-      setDockOpen: (d: LayoutState, open: boolean) => {
-        d.layoutInfo.dockOpen = open
-        if (open && d.layoutInfo.viewportWidth < SIDE_COLLAPSE) d.layoutInfo.sideExpanded = false
+      setConversationOpen: (d: LayoutState, open: boolean) => {
+        d.layoutInfo.isConversationOpen = open
+        if (open && d.layoutInfo.viewportWidth < SIDE_COLLAPSE) d.layoutInfo.isSideExpanded = false
       },
       revealConversation,
       showHistory,
       toggleConversations: (d: LayoutState) => {
         const info = d.layoutInfo
         if (info.viewportWidth < NARROW) {
-          if (info.view === 'conversation') showHistory(d)
+          if (info.narrowPane === 'conversation') showHistory(d)
           else revealConversation(d)
         } else {
-          const historyShown = info.activity === 'sessions' && (info.viewportWidth < SIDE_COLLAPSE ? info.sideExpanded : info.sideOpen)
+          const historyShown = info.activity === 'sessions' && (info.viewportWidth < SIDE_COLLAPSE ? info.isSideExpanded : info.isSideOpen)
           if (historyShown && info.viewportWidth < SIDE_COLLAPSE) revealConversation(d)
-          else if (historyShown && info.dockOpen) info.sideOpen = false
+          else if (historyShown && info.isConversationOpen) info.isSideOpen = false
           else showHistory(d)
         }
       },
-      setRightbar: (d: LayoutState, px: number) => {
-        d.layoutInfo.rightbar = clamp(px, RIGHTBAR_MIN, Math.max(RIGHTBAR_MIN, d.layoutInfo.viewportWidth * RIGHTBAR_MAX_RATIO))
+      setRightbarWidth: (d: LayoutState, px: number) => {
+        d.layoutInfo.rightbarWidth = clamp(px, RIGHTBAR_MIN, Math.max(RIGHTBAR_MIN, d.layoutInfo.viewportWidth * RIGHTBAR_MAX_RATIO))
       },
       openRightbar: (d: LayoutState, track: boolean, fullscreen: boolean) => {
-        if (track && d.layoutInfo.viewportWidth - ACTIVITY - d.layoutInfo.side - (d.layoutInfo.dockOpen ? d.layoutInfo.dock : 0) - CENTER_MIN - 24 < RIGHTBAR_MIN) {
-          d.layoutInfo.sideOpen = false
-          d.layoutInfo.sideExpanded = false
+        const info = d.layoutInfo
+        if (track && rightbarRoom(info.viewportWidth, info.sideWidth, openConversationWidth(info), 3) < RIGHTBAR_MIN) {
+          info.isSideOpen = false
+          info.isSideExpanded = false
         }
-        if (track && d.layoutInfo.viewportWidth - ACTIVITY - (d.layoutInfo.dockOpen ? d.layoutInfo.dock : 0) - CENTER_MIN - 16 < RIGHTBAR_MIN) d.layoutInfo.dockOpen = false
-        d.layoutInfo.rightbar ??= Math.max(RIGHTBAR_MIN, Math.round(d.layoutInfo.viewportWidth * RIGHTBAR_DEFAULT_RATIO * 0.6))
-        d.layoutInfo.rightbarShown = true
-        d.layoutInfo.rightbarTrack = track
-        d.layoutInfo.rightbarFullscreen = fullscreen
+        if (track && rightbarRoom(info.viewportWidth, 0, openConversationWidth(info), 2) < RIGHTBAR_MIN) info.isConversationOpen = false
+        info.rightbarWidth ??= Math.max(RIGHTBAR_MIN, Math.round(info.viewportWidth * RIGHTBAR_DEFAULT_RATIO * 0.6))
+        info.isRightbarOpen = true
+        info.hasRightbarTrack = track
+        info.isRightbarFullscreen = fullscreen
       },
       closeRightbar: (d: LayoutState) => {
-        d.layoutInfo.rightbarShown = false
-        d.layoutInfo.rightbarTrack = false
-        d.layoutInfo.rightbarFullscreen = false
+        d.layoutInfo.isRightbarOpen = false
+        d.layoutInfo.hasRightbarTrack = false
+        d.layoutInfo.isRightbarFullscreen = false
       },
-      choose: (d: LayoutState, activity: Activity) => {
-        if (d.layoutInfo.activity === activity && d.layoutInfo.viewportWidth >= SIDE_COLLAPSE) d.layoutInfo.sideOpen = !d.layoutInfo.sideOpen
-        else d.layoutInfo.sideOpen = true
+      /** An activity of the activity bar: opens the side panel on it, or toggles it on a wide screen. */
+      selectActivity: (d: LayoutState, activity: Activity) => {
+        if (d.layoutInfo.activity === activity && d.layoutInfo.viewportWidth >= SIDE_COLLAPSE) d.layoutInfo.isSideOpen = !d.layoutInfo.isSideOpen
+        else d.layoutInfo.isSideOpen = true
         d.layoutInfo.activity = activity
         if (d.layoutInfo.viewportWidth < SIDE_COLLAPSE) {
-          d.layoutInfo.sideExpanded = d.layoutInfo.viewportWidth >= NARROW
-          if (d.layoutInfo.sideExpanded) d.layoutInfo.dockOpen = false
+          d.layoutInfo.isSideExpanded = d.layoutInfo.viewportWidth >= NARROW
+          if (d.layoutInfo.isSideExpanded) d.layoutInfo.isConversationOpen = false
         }
-        d.layoutInfo.view = activity
+        d.layoutInfo.narrowPane = activity
       },
-      show: (d: LayoutState, view: NarrowView) => {
-        d.layoutInfo.view = view
-        d.layoutInfo.sideExpanded = false
+      showNarrowPane: (d: LayoutState, pane: NarrowPane) => {
+        d.layoutInfo.narrowPane = pane
+        d.layoutInfo.isSideExpanded = false
       },
     },
   })
@@ -186,11 +199,11 @@ export class LayoutController {
     this.#preserveNextConversation = true
   }
 
-  /** Source navigation selects the document without revealing the conversation. */
+  /** A link to a place of the document shows the document without revealing the conversation. */
   showDocument(): void {
     this.#navigation.abort()
     this.#actions.selectPanel(null)
-    this.#actions.show('source')
+    this.#actions.showNarrowPane('preview')
   }
 
   beginNavigation(): AbortSignal {

package/src/client/mascot.tsx

@@ -0,0 +1,37 @@
+import { PmMascot, PmSegmented, setMascotEnabled, useAssistantMascot, useMascotEnabled, WorkbenchProvider } from '@lincyaw/workbench'
+import type { Workbench } from '@lincyaw/workbench'
+import { MASCOT_SETTING, MASCOT_SLOT } from './contract.ts'
+import { useClientMessages } from './messages.ts'
+
+/** The session header's standard prop: a selector over the bound session's snapshot. */
+type UseSession = <T>(select: (snapshot: { running?: boolean }) => T) => T
+
+function Kitten({ running }: { running: boolean }) {
+  return <span className="pmw-conversation-mascot"><PmMascot size="small" action={useAssistantMascot(running)} /></span>
+}
+
+function MascotSetting({ workbench }: { workbench: Workbench }) {
+  const t = useClientMessages(workbench)
+  const on = useMascotEnabled()
+  return (
+    <div className="pmw-mascot-setting pm-ui" data-pmw-setting="mascot">
+      <div className="pmw-mascot-setting__copy">
+        <p className="pmw-mascot-setting__title">{t.mascot}</p>
+        <p className="pmw-mascot-setting__hint">{t.mascotHint}</p>
+      </div>
+      <PmSegmented label={t.mascot} value={on ? 'show' : 'hide'} options={[{ value: 'show', label: t.mascotShow }, { value: 'hide', label: t.mascotHide }]} onChange={value => setMascotEnabled(value === 'show')} />
+    </div>
+  )
+}
+
+/** Puts the kitten in the conversation's header, where it acts out what the assistant is doing, and its switch in
+ * Settings → General. */
+export function registerMascot(ctx: DshClientContext, workbench: Workbench): void {
+  ctx.effect(() => ctx.slots.inject(MASCOT_SLOT.name, () => ctx.slots.register({ name: MASCOT_SLOT.name, id: MASCOT_SLOT.id, order: -100 }, ({ useSession }: { useSession: UseSession }) => {
+    const running = useSession(snapshot => Boolean(snapshot.running))
+    return <WorkbenchProvider workbench={workbench}><Kitten running={running} /></WorkbenchProvider>
+  })), 'presmium: the kitten beside the conversation')
+  ctx.effect(() => ctx.slots.inject(MASCOT_SETTING.name, () => ctx.slots.register({ name: MASCOT_SETTING.name, id: MASCOT_SETTING.id, order: 1000 }, () => (
+    <WorkbenchProvider workbench={workbench}><MascotSetting workbench={workbench} /></WorkbenchProvider>
+  ))), 'presmium: the kitten\'s switch in Settings')
+}