dsh-audiogen 0.1.0

package/src/client/helpers.ts

@@ -0,0 +1,27 @@
+/**
+ * Shared panel helpers: active-dictionary pick and a small error extractor.
+ */
+
+import { en, zh, type AudioGenKey } from './locales.ts'
+
+export type TranslateValues = Record<string, string | number>
+
+export function dictionary(): Record<string, string> {
+  const lang = typeof document !== 'undefined' ? document.documentElement.lang : 'zh'
+  return lang.toLowerCase().startsWith('en') ? { ...en } : { ...zh }
+}
+
+export function tt(key: AudioGenKey, values?: TranslateValues): string {
+  const text = dictionary()[key] ?? key
+  if (values === undefined) return text
+  let rendered = text
+  for (const [name, value] of Object.entries(values)) {
+    rendered = rendered.replaceAll(`{${name}}`, String(value))
+  }
+  return rendered
+}
+
+export function errorMessage(error: unknown): string {
+  if (error instanceof Error) return error.message
+  return String(error)
+}

package/src/client/index.ts

@@ -0,0 +1,103 @@
+/**
+ * Browser-half entry for dsh-audiogen.
+ *
+ * Registers locale dictionaries, the settings card (Settings → Plugins → AI
+ * 音频), and mounts the sidebar entry + generation panel. DOM mounting
+ * failures are logged, never thrown.
+ */
+import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
+import type { ConnectionHandle } from '@deepseek-ai/dsh-client-connection/client'
+import type {} from '@deepseek-ai/dsh-client-locale/client'
+import type {} from '@deepseek-ai/dsh-client-ui-slots'
+import { AudiogenApi } from './api.ts'
+import { AudioGenController } from './controller.ts'
+import { tt } from './helpers.ts'
+import { en, zh, type AudioGenKey } from './locales.ts'
+import { mountPanel } from './mount.tsx'
+import { mountSidebarEntry } from './sidebar-entry.ts'
+import { AudioGenSettingsCard, AudioGenSettingsCardController } from './SettingsCard.tsx'
+import { bindAudiogenScope, type AudiogenScope } from './settings-scope.ts'
+import { registerAudioToolviews } from './audio-toolview.tsx'
+
+const NS = 'dsh-audiogen'
+
+declare module '@deepseek-ai/dsh-client-ui-slots' {
+  interface LocaleNamespaceMap {
+    'dsh-audiogen': AudioGenKey
+  }
+
+  interface SlotMap {
+    'settings.plugin.item': { kind: 'keyed'; scope: 'root'; owner: AudioGenPluginItemOwnerProps }
+    'tool.call.toolview': { kind: 'keyed'; scope: 'session'; owner: AudioToolViewOwnerProps }
+  }
+}
+
+export interface AudioGenPluginItemOwnerProps {
+  children?: never
+}
+
+export type AudioToolViewOwnerProps = {
+  callId: string
+  toolName: string
+  block: unknown
+  cwd?: string
+  home?: string
+  openFile: (path: string) => void
+  inspect?: () => void
+}
+
+export const inject = ['slots', 'locale', 'connection', 'sessions']
+
+export function apply(ctx: ClientContext): void {
+  ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'dsh-audiogen: dictionaries')
+  registerAudioToolviews(ctx)
+
+  const connection = ctx.get('connection') as ConnectionHandle | undefined
+  const loopback = connection?.isLoopback === true
+  const scope: AudiogenScope = bindAudiogenScope(loopback
+    ? (input, init) => fetch(input, init)
+    : () => { throw new Error('settings bridge is loopback-only') })
+
+  ctx.effect(() => {
+    const disposers = [
+      ctx.on('connection/reset', () => { void scope.load() }),
+    ]
+    return () => { for (const dispose of disposers) dispose() }
+  }, 'dsh-audiogen: settings scope invalidation')
+
+  const settingsCard = new AudioGenSettingsCardController(scope)
+  ctx.slots.inject('settings.plugin.item', () => ctx.slots.register({
+    name: 'settings.plugin.item',
+    key: 'dsh-audiogen',
+    locale: NS,
+    inject: () => settingsCard.inject(),
+  }, AudioGenSettingsCard))
+
+  let uiDisposer: (() => void) | undefined
+  const mountUi = (): void => {
+    if (uiDisposer !== undefined) return
+    const controller = new AudioGenController()
+    const api = new AudiogenApi()
+    const disposers: Array<() => void> = []
+    try {
+      disposers.push(mountSidebarEntry(controller, tt('entry.label'), tt('entry.tooltip')))
+      disposers.push(mountPanel(controller, api, scope))
+    } catch (error) {
+      console.warn('[dsh-audiogen] mount failed:', error)
+    }
+    uiDisposer = () => {
+      for (const dispose of disposers.splice(0)) dispose()
+      uiDisposer = undefined
+    }
+  }
+  const syncEnabled = (): void => {
+    const snapshot = scope.getSnapshot()
+    const enabled = snapshot.status === 'ready'
+      ? snapshot.value?.enabled ?? true
+      : snapshot.status === 'unavailable'
+    if (enabled) mountUi()
+    else uiDisposer?.()
+  }
+  scope.subscribe(syncEnabled)
+  syncEnabled()
+}

package/src/client/locales.ts

@@ -0,0 +1,133 @@
+/**
+ * dsh-audiogen surface copy: zh is the key source, en mirrors every key.
+ */
+
+export const zh = {
+  'entry.label': 'AI 音频',
+  'entry.tooltip': 'AI 音频面板（TTS / 音乐 / 音效）',
+  'panel.title': 'AI 音频',
+  'mode.tts': '文本转语音',
+  'mode.music': '音乐生成',
+  'mode.sfx': '音效生成',
+  'prompt.placeholder': '输入要朗读的文本，或描述想生成的音乐 / 音效…',
+  'prompt.required': '请输入文本或提示词',
+  'model.label': '模型 / 音色',
+  'voice.label': '音色',
+  'speed.label': '语速',
+  'duration.label': '时长（秒）',
+  'format.label': '输出格式',
+  'generate': '开始生成',
+  'generating': '生成中…',
+  'download': '下载',
+  'result.empty': '生成结果将显示在这里',
+  'result.done': '生成完成，共 {count} 段音频',
+  'history.title': '历史记录',
+  'history.empty': '暂无历史记录',
+  'config.missing': '尚未配置音频 API：请前往「设置 → 插件 → AI 音频」添加渠道。',
+  'config.disabled': '插件已停用，请在设置中重新启用。',
+  'settings.title': 'AI 音频（dsh-audiogen）',
+  'settings.description': '配置多厂商音频生成 API 地址与密钥',
+  'settings.collapse': '收起',
+  'settings.expand': '展开',
+  'settings.enabled': '启用插件',
+  'settings.announceToAgent': '向 Agent 播报本插件',
+  'settings.allowAgentAudio': '允许 Agent 调用音频生成',
+  'settings.save': '保存',
+  'settings.saving': '保存中…',
+  'settings.discard': '放弃修改',
+  'settings.unsaved': '有未保存的修改',
+  'settings.readOnly': '当前设置为只读。',
+  'channels.title': '音频渠道',
+  'channels.hint': '每个渠道是一个独立的音频厂商/API 端点，可配置多个。',
+  'channels.empty': '还没有渠道。',
+  'channels.addProvider': '+ 添加预置厂商',
+  'channels.addCustom': '+ 添加自定义渠道',
+  'channels.edit': '编辑',
+  'channels.delete': '删除',
+  'channels.confirm': '确认删除',
+  'channels.cancel': '取消',
+  'channels.keySet': '已填密钥',
+  'channels.keyMissing': '未填密钥',
+  'channels.modelCount': '{n} 个模型/音色',
+  'channels.noModels': '未配置模型',
+  'channels.statusReady': '可用',
+  'channels.statusIncomplete': '未完成',
+  'channels.untitled': '未命名渠道',
+  'channel.name': '名称',
+  'channel.apiUrl': 'API 地址',
+  'channel.apiKey': 'API 密钥',
+  'channel.apiKeyHint': '留空则保持当前密钥；输入新值可更换。',
+  'channel.models': '模型 / 音色（每行一个：别名=上游ID）',
+  'channel.modelsHint': '例如 tts-1=tts-1 或 Rachel=21m00Tcm4TlvDq8ikWAM',
+  'channel.default': '设为默认',
+  'channel.cancel': '取消',
+  'channel.save': '保存渠道',
+  'presets.title': '预置厂商',
+  'presets.custom': '自定义渠道',
+} as const
+
+export type AudioGenKey = keyof typeof zh
+
+export const en: Record<AudioGenKey, string> = {
+  'entry.label': 'AI Audio',
+  'entry.tooltip': 'AI audio panel (TTS / music / SFX)',
+  'panel.title': 'AI Audio',
+  'mode.tts': 'Text to speech',
+  'mode.music': 'Music',
+  'mode.sfx': 'Sound effects',
+  'prompt.placeholder': 'Text to speak, or a description of the music / sound effect…',
+  'prompt.required': 'Prompt or text is required',
+  'model.label': 'Model / voice',
+  'voice.label': 'Voice',
+  'speed.label': 'Speed',
+  'duration.label': 'Duration (s)',
+  'format.label': 'Format',
+  'generate': 'Generate',
+  'generating': 'Generating…',
+  'download': 'Download',
+  'result.empty': 'Generated audio will appear here.',
+  'result.done': 'Done, {count} audio file(s).',
+  'history.title': 'History',
+  'history.empty': 'No audio history yet.',
+  'config.missing': 'No audio API configured. Open Settings > Plugins > AI Audio and add a channel.',
+  'config.disabled': 'The plugin is disabled. Enable it in Settings.',
+  'settings.title': 'AI Audio (dsh-audiogen)',
+  'settings.description': 'Configure multi-vendor audio generation endpoints and keys',
+  'settings.collapse': 'Collapse',
+  'settings.expand': 'Expand',
+  'settings.enabled': 'Enable plugin',
+  'settings.announceToAgent': 'Announce this plugin to agents',
+  'settings.allowAgentAudio': 'Allow agents to generate audio',
+  'settings.save': 'Save',
+  'settings.saving': 'Saving…',
+  'settings.discard': 'Discard',
+  'settings.unsaved': 'Unsaved changes',
+  'settings.readOnly': 'Settings are read-only.',
+  'channels.title': 'Audio channels',
+  'channels.hint': 'Each channel is an independent audio vendor/API endpoint.',
+  'channels.empty': 'No channels yet.',
+  'channels.addProvider': '+ Add preset vendor',
+  'channels.addCustom': '+ Add custom channel',
+  'channels.edit': 'Edit',
+  'channels.delete': 'Delete',
+  'channels.confirm': 'Confirm delete',
+  'channels.cancel': 'Cancel',
+  'channels.keySet': 'Key set',
+  'channels.keyMissing': 'No key',
+  'channels.modelCount': '{n} model(s)/voice(s)',
+  'channels.noModels': 'No models configured',
+  'channels.statusReady': 'Ready',
+  'channels.statusIncomplete': 'Incomplete',
+  'channels.untitled': 'Untitled channel',
+  'channel.name': 'Name',
+  'channel.apiUrl': 'API URL',
+  'channel.apiKey': 'API key',
+  'channel.apiKeyHint': 'Leave blank to keep the current key.',
+  'channel.models': 'Models / voices (one per line: alias=upstreamId)',
+  'channel.modelsHint': 'e.g. tts-1=tts-1 or Rachel=21m00Tcm4TlvDq8ikWAM',
+  'channel.default': 'Set default',
+  'channel.cancel': 'Cancel',
+  'channel.save': 'Save channel',
+  'presets.title': 'Preset vendors',
+  'presets.custom': 'Custom channel',
+}

package/src/client/mount.tsx

@@ -0,0 +1,96 @@
+/**
+ * Panel view mounting for the AI 音频 panel.
+ *
+ * Like dsh-imagegen, the panel takes over the center column at the DOM level:
+ * a container is appended inside the conversation grid item and a data
+ * attribute on <html> hides/shows it.
+ */
+
+import { createRoot, type Root } from 'react-dom/client'
+import type { AudiogenApi } from './api.ts'
+import type { AudioGenController } from './controller.ts'
+import { AudioGenPanel } from './AudioGenPanel.tsx'
+import type { AudiogenScope } from './settings-scope.ts'
+import css from './panel.module.css'
+
+export const PANEL_VIEW_SELECTOR = '[data-dsh-audiogen-view]'
+
+const CONVERSATION_COLUMN_SELECTOR = '[data-pane="conversation"], [class*="centerCol"]'
+const ACTIVE_ATTR = 'data-dsh-audiogen-active'
+const OTHER_ACTIVE_ATTRS = ['data-dsh-taskboard-active', 'data-dsh-ssh-active', 'data-dsh-imagegen-active']
+const ACTIVATE_EVENT = 'dsh-panel-activate'
+const PANEL_NAME = 'audiogen'
+
+function conversationColumn(): HTMLElement | undefined {
+  return document.querySelector<HTMLElement>(CONVERSATION_COLUMN_SELECTOR) ?? undefined
+}
+
+export function mountPanel(
+  controller: AudioGenController,
+  api: AudiogenApi,
+  scope: AudiogenScope,
+): () => void {
+  let root: Root | undefined
+  let container: HTMLDivElement | undefined
+
+  const ensure = (): void => {
+    if (container !== undefined) {
+      if (container.isConnected) return
+      root?.unmount()
+      root = undefined
+      container.remove()
+      container = undefined
+    }
+    const column = conversationColumn()
+    if (column === undefined) return
+    container = document.createElement('div')
+    container.dataset.dshAudiogenView = ''
+    container.className = css.view
+    column.appendChild(container)
+    root = createRoot(container)
+    root.render(<AudioGenPanel api={api} scope={scope} />)
+  }
+
+  const waitObserver = new MutationObserver(() => { ensure() })
+  waitObserver.observe(document.body, { childList: true, subtree: true })
+
+  const applyActive = (): void => {
+    if (controller.getSnapshot().panelOpen) {
+      for (const attr of OTHER_ACTIVE_ATTRS) document.documentElement.removeAttribute(attr)
+      document.documentElement.setAttribute(ACTIVE_ATTR, '')
+      document.dispatchEvent(new CustomEvent(ACTIVATE_EVENT, { detail: PANEL_NAME }))
+    } else {
+      document.documentElement.removeAttribute(ACTIVE_ATTR)
+    }
+  }
+  const onOtherActivate = (event: Event): void => {
+    const detail = (event as CustomEvent).detail
+    if ((detail === 'ssh' || detail === 'taskboard' || detail === 'imagegen') && controller.getSnapshot().panelOpen) {
+      controller.close()
+    }
+  }
+  const SIDEBAR_ROW_SELECTOR = '[class*="sessionRow"], [class*="projectRow"], [class*="searchResultRow"], [class*="searchResultWorkspace"], [class*="newSession"]'
+  const onClickSidebarRow = (event: MouseEvent): void => {
+    if (!controller.getSnapshot().panelOpen) return
+    const target = event.target as HTMLElement | null
+    if (target === null) return
+    if (target.closest(SIDEBAR_ROW_SELECTOR) !== null) controller.close()
+  }
+  document.addEventListener('click', onClickSidebarRow, true)
+  document.addEventListener(ACTIVATE_EVENT, onOtherActivate)
+  const unsubscribe = controller.subscribe(applyActive)
+  applyActive()
+  ensure()
+
+  return () => {
+    document.removeEventListener('click', onClickSidebarRow, true)
+    document.removeEventListener(ACTIVATE_EVENT, onOtherActivate)
+    waitObserver.disconnect()
+    unsubscribe()
+    document.documentElement.removeAttribute(ACTIVE_ATTR)
+    root?.unmount()
+    root = undefined
+    container?.remove()
+    container = undefined
+  }
+}