@lincyaw/dsh 0.0.0-stage → 0.1.0

package/src/client/frame.css

@@ -0,0 +1,345 @@
+html,
+body,
+#root {
+  height: 100%;
+}
+
+.pmw-frame {
+  position: relative;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto auto;
+  grid-template-areas:
+    'activity panels'
+    'status status'
+    'bottom bottom';
+  grid-template-columns: 48px minmax(0, 1fr);
+  height: 100%;
+  overflow: hidden;
+  background: var(--pm-color-bg);
+  color: var(--pm-color-ink);
+}
+
+.pmw-frame__skip {
+  position: absolute;
+  z-index: 30;
+  top: 4px;
+  left: 4px;
+  padding: var(--pm-space-2) var(--pm-space-3);
+  border-radius: var(--pm-radius-control);
+  background: var(--pm-color-surface);
+  color: var(--pm-color-accent);
+  transform: translateY(-200%);
+}
+
+.pmw-frame__skip:focus {
+  transform: none;
+}
+
+.pmw-activity {
+  grid-area: activity;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--pm-space-1);
+  padding: var(--pm-space-2) 0;
+  border-right: 1px solid var(--pm-color-line);
+  background: var(--pm-color-sunk);
+}
+
+.pmw-activity__logo {
+  display: flex;
+  margin-bottom: var(--pm-space-2);
+}
+
+.pmw-activity__end {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pm-space-1);
+  margin-top: auto;
+}
+
+.pmw-activity__button {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--pm-radius-control);
+  background: none;
+  color: var(--pm-color-muted);
+  cursor: pointer;
+}
+
+.pmw-activity__count {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  min-width: 14px;
+  padding: 0 3px;
+  border-radius: var(--pm-radius-pill);
+  background: var(--pm-color-accent);
+  color: var(--pm-color-on-accent);
+  font-size: 10px;
+  line-height: 14px;
+}
+
+.pmw-activity__button:hover {
+  background: color-mix(in srgb, var(--pm-color-ink) 6%, transparent);
+  color: var(--pm-color-ink);
+}
+
+.pmw-activity__button[aria-pressed='true'] {
+  background: var(--pm-color-surface);
+  box-shadow: inset 2px 0 0 var(--pm-color-accent);
+  color: var(--pm-color-accent);
+}
+
+.pmw-activity__button:focus-visible {
+  outline: 2px solid var(--pm-color-accent);
+  outline-offset: 1px;
+}
+
+.pmw-frame__side,
+.pmw-frame__sidebar {
+  grid-area: side;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  border-right: 1px solid var(--pm-color-line);
+  background: var(--pm-color-bg);
+}
+
+.pmw-frame__sidebar {
+  overflow: hidden;
+  background: var(--dsw-specific-sidebar-fill, var(--pm-color-sunk));
+}
+
+.pmw-frame__side:not([data-shown]),
+.pmw-frame__side[data-content='sessions'],
+.pmw-frame__sidebar:not([data-shown]) {
+  display: none;
+}
+
+.pmw-frame__side-files[hidden] {
+  display: none;
+}
+
+.pmw-frame__centre {
+  grid-area: centre;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--pm-color-bg);
+}
+
+.pmw-frame__centre[hidden] {
+  display: none;
+}
+
+.pmw-frame__centre > .pmw-home {
+  height: 100%;
+}
+
+.pmw-frame__panel {
+  height: 100%;
+  overflow: auto;
+}
+
+.pmw-frame__rightbar {
+  position: relative;
+  grid-area: rightbar;
+  min-width: 0;
+  overflow: visible;
+}
+
+.pmw-frame__dock {
+  grid-area: dock;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  border-left: 1px solid var(--pm-color-line);
+  background: var(--dsw-alias-bg-base, var(--pm-color-bg));
+}
+
+.pmw-frame__dock > * {
+  flex: 1;
+  min-height: 0;
+}
+
+.pmw-frame__dock[hidden] { display: none; }
+.pmw-chat-actions { display: flex; align-items: center; gap: var(--pm-space-1); }
+.pmw-history { display: flex; flex-direction: column; height: 100%; min-height: 0; color: var(--pm-color-ink); }
+.pmw-history__header { display: flex; align-items: center; justify-content: space-between; gap: var(--pm-space-2); padding: var(--pm-space-2) var(--pm-space-3); border-bottom: 1px solid var(--pm-color-line); }
+.pmw-history__header h2 { margin: 0; font-size: var(--pm-text-sm); font-weight: 600; }
+.pmw-history__browser { flex: 1; min-height: 0; overflow: hidden; }
+
+.pmw-frame__status {
+  grid-area: status;
+  display: flex;
+  align-items: center;
+  gap: var(--pm-space-4);
+  min-height: var(--pm-statusbar-height);
+  padding: 0 var(--pm-space-3);
+  overflow: hidden;
+  border-top: 1px solid var(--pm-color-line);
+  background: var(--pm-color-sunk);
+  color: var(--pm-color-muted);
+  font-family: var(--pm-font-mono);
+  font-size: var(--pm-text-xs);
+}
+
+.pmw-frame__bottom {
+  grid-area: bottom;
+  min-width: 0;
+}
+
+.pmw-frame__bottom:empty {
+  display: none;
+}
+
+.pmw-frame__overlay {
+  position: absolute;
+  z-index: 20;
+  inset: 0;
+  pointer-events: none;
+}
+
+.pmw-frame__overlay > * {
+  pointer-events: auto;
+}
+
+.pmw-frame__panels { grid-area: panels; min-width: 0; min-height: 0; }
+.pmw-frame__side-panel { display: grid; }
+.pmw-frame__side-panel > * { grid-area: 1 / 1; }
+.pmw-frame__side, .pmw-frame__sidebar, .pmw-frame__centre, .pmw-frame__dock, .pmw-frame__rightbar { height: 100%; }
+.pmw-frame__handle { width: 8px; z-index: 11; background: var(--pm-color-line); }
+.pmw-frame__handle:hover, .pmw-frame__handle:focus-visible { background: var(--pm-color-accent); }
+
+.pmw-frame[data-narrow] {
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr) auto auto;
+  grid-template-areas:
+    'activity'
+    'panels'
+    'status'
+    'bottom';
+}
+
+.pmw-frame[data-narrow] .pmw-activity {
+  flex-direction: row;
+  justify-content: space-between;
+  padding: var(--pm-space-1) var(--pm-space-2);
+  overflow-x: auto;
+  border-right: 0;
+  border-bottom: 1px solid var(--pm-color-line);
+}
+
+.pmw-frame[data-narrow] .pmw-activity__logo {
+  margin: 0 var(--pm-space-1) 0 0;
+}
+
+.pmw-frame[data-narrow] .pmw-activity__end {
+  flex-direction: row;
+  margin: 0;
+}
+
+.pmw-frame[data-narrow] .pmw-activity__button[aria-pressed='true'] {
+  box-shadow: inset 0 -2px 0 var(--pm-color-accent);
+}
+
+.pmw-frame[data-narrow] .pmw-frame__sidebar,
+.pmw-frame[data-narrow] .pmw-frame__dock,
+.pmw-frame[data-narrow] .pmw-frame__rightbar {
+  grid-area: centre;
+  border: 0;
+}
+
+.pmw-frame[data-narrow] .pmw-frame__dock:not([data-shown]) {
+  display: none;
+}
+
+.pmw-frame[data-narrow] .pmw-frame__rightbar {
+  pointer-events: none;
+}
+
+.pmw-frame[data-narrow] .pmw-frame__rightbar > * {
+  pointer-events: auto;
+}
+
+.pmw-frame[data-narrow] .pmw-frame__status {
+  gap: var(--pm-space-2);
+}
+
+.pmw-logo {
+  flex: none;
+  display: block;
+}
+
+.pmw-brand-name {
+  font-family: var(--pm-font-sans);
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}
+
+.pmw-welcome__card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pm-space-3);
+  max-width: 30rem;
+  padding: var(--pm-space-6);
+}
+
+.pmw-welcome__title {
+  margin: 0;
+  font-family: var(--pm-font-serif);
+  font-size: var(--pm-text-title);
+}
+
+.pmw-welcome__card p {
+  margin: 0;
+  line-height: var(--pm-leading-ui);
+}
+
+.pmw-welcome__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--pm-space-2);
+}
+
+[data-plugin-group='extensions'] {
+  display: none !important;
+}
+
+.pmw-fallback {
+  height: 100%;
+  overflow: auto;
+  background: var(--pm-color-bg);
+}
+
+.pmw-fallback__doc {
+  display: grid;
+  grid-template-columns: 240px minmax(0, 1fr);
+  height: 100%;
+}
+
+.pmw-fallback__tab {
+  height: 100%;
+  overflow: hidden;
+}
+
+.pmw-frame[data-narrow] .pmw-frame__panels { display: block !important; }
+.pmw-frame[data-narrow] .pmw-frame__panels > [data-panel] { width: 100%; height: 100%; }
+.pmw-frame__panels > [hidden] { display: none !important; }
+.pmw-frame[data-narrow] .pmw-frame__sidebar[data-shown] { height: 100%; }
+
+.pmw-frame__rightbar-overlay { position: absolute; top: 0; bottom: var(--pm-statusbar-height); height: auto; z-index: 13; pointer-events: none; }
+.pmw-frame__rightbar-track { height: 100%; width: 100%; }
+.pmw-frame__rightbar-overlay [data-sidebar-right-session]:has([data-pmw-source-route]) { opacity: 0; }
+.pmw-frame__rightbar-overlay [data-sidebar-right-session]:not([data-sidebar-right-open]) [data-dockkit-host='dock'] { transition: none; }
+.pmw-frame__document { height: 100%; min-width: 0; min-height: 0; }
+.pmw-frame__document[hidden] { display: none; }

package/src/client/index.tsx

@@ -0,0 +1,154 @@
+import { localeOf, Workbench } 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 { createLayoutStore, LayoutController } from './layout.ts'
+import { sourceLinks } from './source.tsx'
+import { followScheme, ThemePresenter, TOKENS } from './theme.ts'
+
+declare const __PRESMIUM_CSS__: string
+
+if (typeof document !== 'undefined' && !document.querySelector(`style[data-plugin-css="${CLIENT_ID}"]`)) {
+  const style = document.createElement('style')
+  style.dataset.plugin = CLIENT_ID
+  style.dataset.pluginCss = CLIENT_ID
+  style.textContent = __PRESMIUM_CSS__
+  document.head.append(style)
+}
+
+export const inject = ['slots', 'theme', 'locale', 'shortcuts']
+
+function workbenchLocale(active: string | undefined): Locale {
+  const tag = active?.toLowerCase() ?? ''
+  if (tag.startsWith('zh') || tag.startsWith('en')) return localeOf(tag)
+  return localeOf(navigator.language)
+}
+
+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) }
+    },
+  }
+  // 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()
+    }
+    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)
+  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)'))
+  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(() => {
+    const follow = (snapshot: DshThemeSnapshot) => workbench.setDark(followScheme(snapshot))
+    follow(ctx.theme.getTheme())
+    return ctx.on('theme/change', follow)
+  }, 'presmium: light and dark')
+
+  if (ownLayout) {
+    fallback(ctx, workbench)
+  } else {
+    ctx.effect(() => {
+      const presenter = new ThemePresenter()
+      presenter.apply(ctx.theme.getTheme())
+      const off = ctx.on('theme/change', (snapshot: DshThemeSnapshot) => presenter.apply(snapshot))
+      return () => {
+        off()
+        presenter.dispose()
+      }
+    }, 'presmium: theme presenter')
+    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 store = { ...handle, create: () => instance }
+      const mainKeys = () => ctx.slots.entries('main').flatMap(entry => (entry.options.key === undefined ? [] : [entry.options.key]))
+      const layout = new LayoutController(instance.actions, id => mainKeys().includes(id), {
+        getSnapshot: () => instance.getSnapshot().panelInfo,
+        subscribe: listener => instance.subscribe(listener),
+      })
+      showEditor = () => layout.showDocument()
+      const openSettings = () => {
+        const triggers = document.querySelectorAll<HTMLElement>('[data-pmw-slot="sidebar"] button[aria-haspopup="dialog"]')
+        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))
+      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'),
+        aliases: ['sidebar', 'toggle left sidebar'],
+        defaults: {
+          'desktop:macos': { code: 'KeyB', modifiers: ['primary'] },
+          'desktop:windows': { code: 'KeyB', modifiers: ['primary'] },
+          'desktop:linux': { code: 'KeyB', modifiers: ['primary'] },
+          'web:macos': binding,
+          'web:windows': binding,
+        },
+        regions: ['page', 'editable'],
+        modals: [],
+        resolve: () => ({ status: 'handled', run: () => layout.toggleSidebar() }),
+      })
+      const retain = () => instance.actions.retainMainPanels(mainKeys())
+      const disposePanels = ctx.slots.subscribe('main', retain)
+      retain()
+      return () => {
+        disposeShortcut()
+        layout.dispose()
+        disposePanels()
+        disposeRoot()
+        disposePanelInfo()
+        disposeService()
+      }
+    }, 'presmium: the root layout and ctx.layout')
+  }
+  brand(ctx, workbench)
+}