@lincyaw/dsh 0.0.0-stage → 0.1.0

package/src/client/brand.tsx

@@ -0,0 +1,90 @@
+import { PmButton, WorkbenchProvider } from '@lincyaw/workbench'
+import type { Workbench } from '@lincyaw/workbench'
+import { useEffect, useSyncExternalStore } from 'react'
+import { Modal } from '@deepseek-ai/dsh-client-ui-primitives'
+import { BRAND_LANGUAGES, BRAND_SLOTS, ONBOARDING } from './contract.ts'
+import { BRAND_COPY, FRAME_MESSAGES } from './messages.ts'
+import type { FrameMessages } from './messages.ts'
+
+export function Logo({ size = 24, className }: { size?: number, className?: string }) {
+  return (
+    <svg className={className ? `pmw-logo ${className}` : 'pmw-logo'} width={size} height={size} viewBox="0 0 32 32" role="img" aria-label="Presmium">
+      <rect width="32" height="32" rx="7" fill="#0F5F5C" />
+      <path d="M11 8h7.5a6.5 6.5 0 0 1 0 13H15v4h-4zM15 12v5h3.5a2.5 2.5 0 0 0 0-5z" fill="#F7F5F0" fillRule="evenodd" />
+    </svg>
+  )
+}
+
+export function useFrameMessages(workbench: Workbench): FrameMessages {
+  const locale = useSyncExternalStore(workbench.subscribe, () => workbench.getState().locale)
+  return FRAME_MESSAGES[locale]
+}
+
+const WELCOMED = 'presmium.workbench.welcomed'
+
+function welcomed(): boolean {
+  try {
+    return localStorage.getItem(WELCOMED) === '1'
+  } catch {
+    return false
+  }
+}
+
+function Welcome({ workbench, complete, openSection }: { workbench: Workbench, complete?: () => void, openSection?: (id: string) => void }) {
+  const t = useFrameMessages(workbench)
+  const read = welcomed()
+  useEffect(() => {
+    if (read) complete?.()
+  }, [read, complete])
+  if (read) return null
+  const done = () => {
+    try {
+      localStorage.setItem(WELCOMED, '1')
+    } catch {
+    }
+    complete?.()
+  }
+  return (
+    <WorkbenchProvider workbench={workbench} protectChanges={false}>
+      <Modal open title={t.welcomeTitle} onClose={done} headless>
+        <div className="pmw-welcome__card pm-ui" data-pmw-welcome="">
+          <Logo size={40} />
+          <h2 id="pmw-welcome-title" className="pmw-welcome__title">{t.welcomeTitle}</h2>
+          <p>{t.welcome}</p>
+          <div className="pmw-welcome__actions">
+            <PmButton
+              onClick={() => {
+                done()
+                openSection?.('models')
+              }}
+            >
+              {t.models}
+            </PmButton>
+            <PmButton variant="primary" onClick={done}>{t.start}</PmButton>
+          </div>
+        </div>
+      </Modal>
+    </WorkbenchProvider>
+  )
+}
+
+function PassOver({ complete }: { complete?: () => void }) {
+  useEffect(() => {
+    complete?.()
+  }, [complete])
+  return null
+}
+
+export function brand(ctx: DshClientContext, workbench: Workbench): void {
+  const [mark, name, hero] = BRAND_SLOTS
+  ctx.effect(() => ctx.slots.inject(mark, () => ctx.slots.register({ name: mark }, ({ size }: { size?: number }) => <Logo size={size ?? 24} />)), 'presmium: sidebar brand mark')
+  ctx.effect(() => ctx.slots.inject(name, () => ctx.slots.register({ name }, () => <span className="pmw-brand-name">Presmium</span>)), 'presmium: sidebar brand name')
+  ctx.effect(() => ctx.slots.inject(hero, () => ctx.slots.register({ name: hero }, ({ size, className }: { size?: number, className?: string }) => <Logo size={size ?? 34} className={className} />)), 'presmium: conversation brand mark')
+  const [welcome, signIn] = ONBOARDING.steps
+  ctx.effect(() => ctx.slots.inject(ONBOARDING.slot, () => ctx.slots.register({ name: ONBOARDING.slot, id: welcome, priority: -1, order: -100 }, props => <Welcome workbench={workbench} {...props} />)), 'presmium: first-use notice')
+  ctx.effect(() => ctx.slots.inject(ONBOARDING.slot, () => ctx.slots.register({ name: ONBOARDING.slot, id: signIn, priority: -1, order: 0 }, PassOver)), 'presmium: no DeepSeek sign-in step')
+  for (const language of BRAND_LANGUAGES) {
+    ctx.effect(() => ctx.locale.addLanguage({ id: language.id, label: language.label, fallback: language.fallback }), `presmium: language ${language.id}`)
+    for (const [ns, dict] of Object.entries(BRAND_COPY[language.id])) ctx.effect(() => ctx.locale.register(ns, language.id, dict), `presmium: ${ns} copy ${language.id}`)
+  }
+}

package/src/client/chrome.tsx

@@ -0,0 +1,79 @@
+import { PmIconButton } from '@lincyaw/workbench'
+import type { Workbench } from '@lincyaw/workbench'
+import type { ReactNode } from 'react'
+import { useFrameMessages } from './brand.tsx'
+import type { LayoutActions, LayoutState } from './layout.ts'
+import { NARROW, SIDE_COLLAPSE } from './layout.ts'
+
+interface SidebarProps {
+  renderSlot(name: string, props?: Record<string, unknown>, options?: Record<string, unknown>): ReactNode
+}
+
+/** Replace navigation chrome through public slots; Harness still owns the session browser and dialogs. */
+export function chrome(ctx: DshClientContext, workbench: Workbench, actions: LayoutActions, currentLayout: () => LayoutState, startSession: () => Promise<void>): DshObservable<readonly DshSlotEntry[]> {
+  let panels: DshSlotEntry[] = []
+  const listeners = new Set<() => void>()
+  const panelStore = {
+    getSnapshot: () => panels,
+    subscribe(listener: () => void) { listeners.add(listener); return () => { listeners.delete(listener) } },
+  }
+  // An already running host retains its old plugin roster until it is restarted.
+  if (!window.__DSH_BOOT__?.entries.some(entry => entry.id === '@deepseek-ai/dsh-client-ui-sidebar')) ctx.effect(() => {
+    const offPanels = ctx.slots.subscribe('sidebar.panellist', () => {
+      panels = ctx.slots.entries('sidebar.panellist')
+      for (const listener of listeners) listener()
+    })
+    ctx.slots.inject('sidebar.panellist', () => {
+      panels = ctx.slots.entries('sidebar.panellist')
+      for (const listener of listeners) listener()
+    })
+    const closeHistory = () => {
+      if (currentLayout().layoutInfo.viewportWidth < SIDE_COLLAPSE) actions.revealConversation()
+      else actions.toggleSidebar()
+    }
+    function Sidebar({ renderSlot }: SidebarProps) {
+      const t = useFrameMessages(workbench)
+      return <section className="pmw-history" aria-label={t.conversationHistory}>
+        <header className="pmw-history__header"><h2>{t.conversationHistory}</h2><PmIconButton icon="close" small label={t.closeHistory} onClick={closeHistory} /></header>
+        <div className="pmw-history__browser">{renderSlot('sidebar.workspaces', { wide: true, expandSidebar: () => actions.choose('sessions') })}</div>
+        <div hidden>{renderSlot('sidebar.settings', { wide: false })}</div>
+      </section>
+    }
+    let offSidebar: (() => void) | undefined
+    ctx.slots.inject('sidebar', () => {
+      offSidebar = ctx.slots.register({ name: 'sidebar', priority: -1, children: {
+        'sidebar.brand.mark': { kind: 'single', scope: 'root' },
+        'sidebar.brand.name': { kind: 'single', scope: 'root' },
+        'sidebar.toggle.badge': { kind: 'single', scope: 'root' },
+        'sidebar.workspaces': { kind: 'single', scope: 'root' },
+        'sidebar.settings': { kind: 'single', scope: 'root' },
+        'sidebar.footer.action': { kind: 'list', scope: 'root' },
+      } }, Sidebar)
+    })
+    return () => { offSidebar?.(); offPanels() }
+  }, 'presmium: one navigation shell')
+  ctx.effect(() => {
+    function ConversationActions() {
+      const t = useFrameMessages(workbench)
+      return <div className="pmw-chat-actions pm-ui" role="group" aria-label={t.conversation}>
+        <PmIconButton icon="plus" label={t.newConversation} small onClick={() => void startSession()} />
+        <PmIconButton icon="history" label={t.conversationHistory} small onClick={() => actions.showHistory()} />
+        <PmIconButton icon="close" label={t.hideConversation} small onClick={() => {
+          if (currentLayout().layoutInfo.viewportWidth < NARROW) actions.show(workbench.state.document === undefined ? 'documents' : 'preview')
+          else actions.setDockOpen(false)
+        }} />
+      </div>
+    }
+    let off: (() => void) | undefined
+    ctx.slots.inject('conversation.header.leading', () => { off = ctx.slots.register({ name: 'conversation.header.leading', priority: -1 }, ConversationActions) })
+    return () => off?.()
+  }, 'presmium: conversation actions in its resident header')
+  ctx.effect(() => {
+    let off: (() => void) | undefined
+    ctx.slots.inject('conversation.session.header.corner', () => {
+      off = ctx.slots.register({ name: 'conversation.session.header.corner', priority: -1 }, () => null)
+    })
+    return () => off?.()
+  }, 'presmium: remove the duplicate sidebar opener')
+  return panelStore
+}

package/src/client/contract.ts

@@ -0,0 +1,35 @@
+export const CLIENT_ID = '@lincyaw/dsh'
+
+export const ROOT_CHILDREN = {
+  'sidebar': { kind: 'single', scope: 'root' },
+  'main': { kind: 'keyed', scope: 'root' },
+  'rightbar': { kind: 'single', scope: 'root' },
+  'shell.bottom': { kind: 'single', scope: 'root' },
+  'shell.overlay': { kind: 'list', scope: 'root' },
+  'shell.leading': { kind: 'single', scope: 'root' },
+} as const
+
+export const LAYOUT_MEMBERS = ['panelInfo', 'selectPanel', 'beginNavigation', 'toggleSidebar', 'openRightbar', 'closeRightbar'] as const
+
+export const BRAND_SLOTS = ['sidebar.brand.mark', 'sidebar.brand.name', 'conversation.hero.brand.mark'] as const
+export const ONBOARDING = { slot: 'settings.onboarding', steps: ['welcome-notice', 'deepseek-official'] } as const
+
+export const SHELL_MODULES = [
+  'react',
+  'react/jsx-runtime',
+  'react-dom',
+  'react-dom/client',
+  '@deepseek-ai/cordis',
+  'zod',
+  '@tanstack/react-virtual',
+  '@deepseek-ai/dsh-client-store',
+  '@deepseek-ai/dsh-client-ui-slots',
+  '@deepseek-ai/dsh-client-ui-primitives',
+  '@deepseek-ai/dsh-client-ui-dockkit',
+] as const
+
+export const EXPERIMENTAL_GROUP = '[data-plugin-group="extensions"]'
+
+export const UI_LAYOUT = '@deepseek-ai/dsh-client-ui-layout'
+
+export const BRAND_LANGUAGES = [{ id: 'zh-CN', label: '简体中文（Presmium）', fallback: 'zh' }, { id: 'en-US', label: 'English (Presmium)', fallback: 'en' }] as const

package/src/client/dsh.d.ts

@@ -0,0 +1,129 @@
+declare module '@deepseek-ai/dsh-client-ui-primitives' {
+  export const Modal: import('react').ComponentType<{
+    open: boolean
+    title: string
+    onClose(): void
+    headless: true
+    children?: import('react').ReactNode
+  }>
+}
+
+declare module '@deepseek-ai/dsh-client-store' {
+  export interface StoreInstance<S, A> {
+    actions: A
+    getSnapshot(): S
+    subscribe(listener: () => void): () => void
+  }
+  export interface StoreHandle<S, A> {
+    create(): StoreInstance<S, A>
+  }
+  type Bound<A> = { [K in keyof A]: A[K] extends (draft: any, ...args: infer P) => void ? (...args: P) => void : never }
+  export function defineStore<S, A extends Record<string, (draft: S, ...args: any[]) => void>>(spec: { init: () => S, actions: A }): StoreHandle<S, Bound<A>>
+}
+
+interface DshObservable<T> {
+  getSnapshot(): T
+  subscribe(listener: () => void): () => void
+}
+
+type DshSelectorHook<T> = <U>(select: (value: T) => U) => U
+
+interface DshSlotOptions {
+  name: string
+  key?: string
+  id?: string
+  priority?: number
+  order?: number
+  locale?: string
+  label?: string | (() => string)
+  children?: Record<string, { kind: 'single' | 'keyed' | 'list', scope: 'root' }>
+  store?: unknown
+  inject?: unknown
+}
+
+interface DshSlotEntry {
+  options: { key?: string, id?: string, label?: string | (() => string) }
+}
+
+interface DshSlots {
+  register(options: DshSlotOptions, component: (props: any) => unknown): () => void
+  inject(name: string, effect: () => unknown): void
+  entries(name: string): DshSlotEntry[]
+  subscribe(name: string, listener: () => void): () => void
+  provideRoot(options: { hooks: Record<string, DshObservable<unknown>> }): () => void
+}
+
+interface DshThemeSnapshot {
+  preference: string
+  fontSizes: { text: number, code: number, terminal: number }
+  fontFamilies: { text: string, code: string, terminal: string }
+  active: { id: string, colorScheme: 'light' | 'dark', tokens: Record<string, string> }
+}
+
+interface DshTheme {
+  getTheme(): DshThemeSnapshot
+  overrideTokens(source: string, tokens: Record<string, { light: string, dark: string }>): () => void
+}
+
+interface DshLocale {
+  getLocale(): { active: string, locales: readonly { id: string }[] }
+  subscribe(listener: () => void): () => void
+  addLanguage(language: { id: string, label: string, fallback?: string }): () => void
+  register(ns: string, locale: string | Record<string, Record<string, string>>, dict?: Record<string, string>): () => void
+  bind(ns: string): (key: string, values?: Record<string, string>) => string
+}
+
+interface DshShortcuts {
+  register(command: {
+    id: string
+    label: () => string
+    aliases?: string[]
+    defaults: Record<string, { code: string, modifiers: string[] }>
+    regions?: string[]
+    modals?: string[]
+    resolve: () => { status: 'handled', run: () => void }
+  }): () => void
+}
+
+interface DshSidebarRightTabs {
+  register(definition: {
+    id: string
+    kind: string
+    priority?: 'extension' | 'builtin' | 'fallback'
+    keepMounted?: boolean
+    patterns?: readonly string[]
+    canOpen?(address: string): boolean
+    title: (address?: string) => string
+    guide?: { id: string, order?: number, title: () => string, description?: () => string }[]
+  }): () => void
+}
+
+interface DshSourceTabProps {
+  useTabInfo(): { tab: {
+    contentId: string
+    visible: boolean
+    navigation: { revision: number, params?: { line?: unknown } }
+    actions: { close(): void }
+  } }
+}
+
+interface DshClientContext {
+  effect(effect: () => unknown, label?: string): void
+  on(event: string, listener: (...args: any[]) => void): () => void
+  inject(names: string[], apply: (ctx: DshClientContext) => void): void
+  reflect: { provide(name: string, value: unknown): () => void }
+  slots: DshSlots
+  theme: DshTheme
+  locale: DshLocale
+  shortcuts: DshShortcuts
+  sidebarRightTabs: DshSidebarRightTabs
+  sidebarRight: { active(): { id: string, kind: string, contentId: string } | undefined, close(id: string): void, isExpanded(): boolean, toggleExpanded(): void }
+  layout: { selectPanel(id: string | null): void }
+  sessions: { list: DshObservable<{ byId: Record<string, { id: string, cwd?: string, retainedBy: { mainView?: number } }> }> }
+  uiWorkspace: { openWorkspace(id: string, beforeOpen?: (sessionId: string) => void): Promise<void>, startSession(id?: string): void }
+  workspaces: { list: DshObservable<{ items: readonly { workspaceId: string, path: string }[] }> }
+}
+
+interface Window {
+  __DSH_BOOT__?: { entries: { id: string }[], release?: { version: string, commit?: string } }
+}

package/src/client/fallback.tsx

@@ -0,0 +1,49 @@
+import { ChangesPanel, DocumentView, FilesPanel, HomePanel, PreviewPanel, useWorkbench, WorkbenchProvider } from '@lincyaw/workbench'
+import type { Workbench } from '@lincyaw/workbench'
+import type { ComponentType } from 'react'
+import { Logo } from './brand.tsx'
+import { CLIENT_ID } from './contract.ts'
+import { FRAME_MESSAGES } from './messages.ts'
+
+export const FALLBACK_PANEL = 'presmium'
+
+function Centre() {
+  const document_ = useWorkbench(state => state.document)
+  return (
+    <div className="pmw-fallback pm-ui" data-pmw-fallback="">
+      {document_ === undefined
+        ? <HomePanel />
+        : (
+            <div className="pmw-fallback__doc">
+              <FilesPanel />
+              <DocumentView />
+            </div>
+          )}
+    </div>
+  )
+}
+
+export function fallback(ctx: DshClientContext, workbench: Workbench): void {
+  const t = () => FRAME_MESSAGES[workbench.state.locale]
+  const provided = (Component: ComponentType, className?: string, protectChanges = false) => function PresmiumPanel() {
+    return (
+      <WorkbenchProvider workbench={workbench} protectChanges={protectChanges}>
+        {className ? <div className={className}><Component /></div> : <Component />}
+      </WorkbenchProvider>
+    )
+  }
+  ctx.effect(() => ctx.slots.inject('sidebar.panellist', () => ctx.slots.register({ name: 'sidebar.panellist', id: FALLBACK_PANEL, order: -10, label: () => t().product }, () => <Logo size={20} />)), 'presmium: the panel list entry')
+  ctx.effect(() => ctx.slots.register({ name: 'main', key: FALLBACK_PANEL }, provided(Centre, undefined, true)), 'presmium: the workbench as a global panel')
+  ctx.inject(['sidebarRightTabs'], (inner) => {
+    const tabs = [
+      { kind: 'presmium-preview', Panel: PreviewPanel, title: () => `Presmium · ${t().preview}` },
+      { kind: 'presmium-changes', Panel: ChangesPanel, title: () => `Presmium · ${t().changes}` },
+    ]
+    for (const { kind, Panel, title } of tabs) {
+      const id = `${CLIENT_ID}/${kind}`
+      const Body = provided(Panel, 'pmw-fallback__tab pm-ui')
+      inner.effect(() => inner.sidebarRightTabs.register({ id, kind, priority: 'extension', keepMounted: true, title, guide: [{ id: kind, order: 50, title }] }), `presmium: ${kind} tab type`)
+      inner.effect(() => inner.slots.inject('sidebar.right.pane.tab', () => inner.slots.register({ name: 'sidebar.right.pane.tab', key: id }, Body)), `presmium: ${kind} tab body`)
+    }
+  })
+}