dsh-audiogen 0.1.0

package/src/client/audio-panel.module.css

@@ -0,0 +1,198 @@
+.panel {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  height: 100%;
+  padding: 14px 16px;
+  overflow: hidden;
+  background: var(--dsw-alias-bg-base, #f7f7f8);
+  color: var(--dsw-alias-label-primary, #1f2328);
+  font-family: var(--dsw-font-family, system-ui, sans-serif);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.layout {
+  display: flex;
+  gap: 14px;
+  flex: 1;
+  min-height: 0;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  flex: none;
+  width: 300px;
+  min-width: 260px;
+  max-width: 340px;
+  overflow-y: auto;
+}
+
+.result {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--dsw-alias-border-l1, #e5e7eb);
+  border-radius: 12px;
+  background: var(--dsw-alias-bg-layer-1, #fff);
+  padding: 14px;
+  overflow-y: auto;
+}
+
+.label {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-secondary, #6b7280);
+}
+
+.textarea,
+.input,
+.select {
+  width: 100%;
+  min-height: 36px;
+  padding: 7px 10px;
+  border: 1px solid var(--dsw-alias-border-l2, #d1d5db);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-3, #fff);
+  color: var(--dsw-alias-label-primary, #1f2328);
+  font: inherit;
+  font-size: 13px;
+  outline: none;
+}
+
+.textarea {
+  min-height: 110px;
+  resize: vertical;
+}
+
+.modeRow {
+  display: flex;
+  gap: 6px;
+}
+
+.modeButton {
+  flex: 1;
+  padding: 7px 8px;
+  border: 1px solid var(--dsw-alias-border-l2, #d1d5db);
+  border-radius: 8px;
+  background: transparent;
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.modeButton[data-active='true'] {
+  border-color: var(--dsw-alias-brand-primary, #2563eb);
+  color: var(--dsw-alias-brand-primary, #2563eb);
+  font-weight: 600;
+}
+
+.generate {
+  padding: 9px 14px;
+  border: 0;
+  border-radius: 10px;
+  background: var(--dsw-alias-label-primary, #1f2328);
+  color: var(--dsw-alias-bg-layer-3, #fff);
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.generate:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.empty,
+.error,
+.hint {
+  font-size: 13px;
+  color: var(--dsw-alias-label-secondary, #6b7280);
+}
+
+.error {
+  color: #b91c1c;
+}
+
+.audioList {
+  display: grid;
+  gap: 10px;
+  margin-top: 8px;
+}
+
+.audioCard {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px;
+  border: 1px solid var(--dsw-alias-border-l2, #e5e7eb);
+  border-radius: 10px;
+}
+
+.audio {
+  width: 100%;
+  height: 36px;
+}
+
+.download {
+  font-size: 12px;
+  color: #2563eb;
+  text-decoration: none;
+}
+
+.history {
+  flex: none;
+  width: 260px;
+  overflow-y: auto;
+  border-left: 1px solid var(--dsw-alias-border-l1, #e5e7eb);
+  padding-left: 12px;
+}
+
+.historyTitle {
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.historyEmpty {
+  color: var(--dsw-alias-label-tertiary, #9ca3af);
+  font-size: 12px;
+}
+
+.historyItem {
+  padding: 8px 0;
+  border-bottom: 1px solid var(--dsw-alias-border-l1, #e5e7eb);
+}
+
+.historyPrompt {
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.historyMeta {
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary, #9ca3af);
+}
+
+.historyAudio {
+  width: 100%;
+  height: 30px;
+  margin-top: 4px;
+}

package/src/client/audio-toolview.module.css

@@ -0,0 +1,69 @@
+.root {
+  display: block;
+  min-width: 0;
+  border: 1px solid var(--dsw-color-border, #e5e7eb);
+  border-radius: 10px;
+  background: var(--dsw-color-surface, #fff);
+  padding: 10px 12px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 600;
+}
+
+.icon {
+  color: var(--dsw-alias-label-secondary, #6b7280);
+}
+
+.status {
+  margin-left: auto;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--dsw-alias-label-caption, #9ca3af);
+}
+
+.message {
+  margin: 6px 0 0;
+  font-size: 13px;
+  color: var(--dsw-alias-label-secondary, #6b7280);
+  white-space: pre-wrap;
+}
+
+.error {
+  margin: 6px 0 0;
+  color: #b91c1c;
+}
+
+.audios {
+  display: grid;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.audioRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.audio {
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+  height: 36px;
+}
+
+.download {
+  font-size: 12px;
+  color: #2563eb;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.empty {
+  color: var(--dsw-alias-label-caption, #9ca3af);
+  font-size: 13px;
+}

package/src/client/audio-toolview.tsx

@@ -0,0 +1,119 @@
+/**
+ * Inline renderer for audio-generation tool results.
+ *
+ * The model-facing tool result is a JSON text envelope with same-origin audio
+ * URLs; this view turns it into a small audio-player card.
+ */
+
+import type { ClientContext, SessionId } from '@deepseek-ai/dsh-client-runtime/client'
+import { useEffect, useMemo, useState } from 'react'
+import css from './audio-toolview.module.css'
+
+export interface AudioToolViewOwnerProps {
+  callId: string
+  toolName: string
+  block: unknown
+  cwd?: string
+  home?: string
+  openFile: (path: string) => void
+  inspect?: () => void
+}
+
+interface AudioFileRef {
+  id?: string
+  url: string
+  mime: string
+  bytes: number
+}
+
+interface AudioToolViewProps extends AudioToolViewOwnerProps {
+  sessionId: SessionId
+}
+
+function isSettled(block: unknown): block is { content?: Array<{ type: string; text?: string }>; isError?: boolean } {
+  return typeof block === 'object' && block !== null && 'content' in block
+}
+
+function textOf(block: unknown): string {
+  if (!isSettled(block)) return ''
+  return (block.content ?? [])
+    .filter(content => content.type === 'text' && typeof content.text === 'string')
+    .map(content => content.text as string)
+    .join('\n')
+}
+
+function parseResult(block: unknown): { status: string; message: string; audio: AudioFileRef[]; error?: string } {
+  const text = textOf(block)
+  if (text === '') return { status: 'running', message: '正在生成音频…', audio: [] }
+  try {
+    const parsed = JSON.parse(text) as { status?: string; message?: string; audio?: AudioFileRef[]; error?: string }
+    return {
+      status: parsed.status ?? 'completed',
+      message: parsed.message ?? '',
+      audio: Array.isArray(parsed.audio) ? parsed.audio.filter((item): item is AudioFileRef => {
+        return typeof item === 'object' && item !== null && typeof (item as AudioFileRef).url === 'string'
+      }) : [],
+      ...(typeof parsed.error === 'string' ? { error: parsed.error } : {}),
+    }
+  } catch {
+    return { status: 'completed', message: text, audio: [] }
+  }
+}
+
+function statusLabel(status: string): string {
+  if (status === 'running' || status === 'queued') return '生成中'
+  if (status === 'failed') return '生成失败'
+  if (status === 'cancelled') return '已取消'
+  return '音频结果'
+}
+
+function mimeExt(mime: string): string {
+  if (mime.includes('wav')) return 'wav'
+  if (mime.includes('flac')) return 'flac'
+  if (mime.includes('ogg')) return 'ogg'
+  if (mime.includes('mp4') || mime.includes('m4a')) return 'm4a'
+  return 'mp3'
+}
+
+export function registerAudioToolviews(ctx: ClientContext): void {
+  const AudioToolView = (props: AudioToolViewProps): React.JSX.Element => {
+    const result = useMemo(() => parseResult(props.block), [props.block])
+    const [active, setActive] = useState<string | null>(null)
+    useEffect(() => { setActive(null) }, [props.callId])
+    const title = props.toolName === 'generate_audio' ? '生成音频' : props.toolName
+    return (
+      <section className={css.root} data-state={result.status} data-tool={props.toolName}>
+        <header className={css.header}>
+          <span className={css.icon} aria-hidden="true">♫</span>
+          <strong>{title}</strong>
+          <span className={css.status}>{statusLabel(result.status)}</span>
+        </header>
+        {result.message !== '' && <p className={css.message}>{result.message}</p>}
+        {result.error !== undefined && <p className={css.error}>{result.error}</p>}
+        {result.audio.length > 0 && (
+          <div className={css.audios}>
+            {result.audio.map((audio, index) => (
+              <div className={css.audioRow} key={audio.id ?? audio.url}>
+                <audio
+                  className={css.audio}
+                  controls
+                  preload="metadata"
+                  src={audio.url}
+                  onPlay={() => setActive(audio.url)}
+                />
+                <a className={css.download} href={audio.url} download={`generated-${index + 1}.${mimeExt(audio.mime)}`}>
+                  下载
+                </a>
+              </div>
+            ))}
+          </div>
+        )}
+        {result.audio.length === 0 && result.status !== 'running' && <p className={css.empty}>未返回可播放的音频。</p>}
+      </section>
+    )
+  }
+
+  ctx.slots.inject('tool.call.toolview', function* () {
+    yield ctx.slots.register({ name: 'tool.call.toolview', key: 'generate_audio' }, AudioToolView)
+  })
+}

package/src/client/channels-form.ts

@@ -0,0 +1,263 @@
+/**
+ * Staged form model for the channel list of the settings card. Mirrors the
+ * CardForm staging pattern (dirty → one save) but for a structured value, so
+ * the card can edit N channels, per-channel keys, and the default-channel
+ * flag, then persist everything in one revision-fenced mutate call.
+ *
+ * Storage rules (dictated by dsh-settings semantics):
+ *  - the whole `channels` array is written wholesale via `path: ['channels']`;
+ *  - every channel's API key lives at `channelSecrets.<channelId>` (a secret
+ *    dict), written per-key so untouched keys are never clobbered by a save
+ *    the reader could not see (keys are redacted out of the wire view);
+ *  - path ops never navigate *inside* the channels array.
+ */
+
+import { createSnapshotStore, type SnapshotStore } from '@deepseek-ai/dsh-client-runtime/client'
+import type { ChannelConfig, ModelMapping } from '../protocol.ts'
+import type { AudiogenScope, SettingsOp } from './settings-scope.ts'
+
+/** One channel as the editor stages it (secrets never travel here). */
+export interface ChannelDraft {
+  id: string
+  preset: string
+  name: string
+  apiUrl: string
+  models: ModelMapping[]
+}
+
+/** One staged key edit for a channel. */
+export type KeyEdit = { kind: 'set'; value: string } | { kind: 'clear' }
+
+/** The state the card renders. */
+export interface ChannelsFormState {
+  /** Staged channel list (the scope value when nothing is staged). */
+  channels: ChannelDraft[]
+  /** Which channels currently hold a stored secret (staged edits included). */
+  keySet: Record<string, boolean>
+  /** The effective default channel id. */
+  defaultChannelId: string
+  /** Whether a save would write anything. */
+  dirty: boolean
+  /** Whether the document accepts writes. */
+  writable: boolean
+  /** Whether a save is crossing the wire. */
+  saving: boolean
+  /** Whether the last save failed (cleared by the next edit or save). */
+  failed: boolean
+}
+
+/** The actions the card's slot entry injects. */
+export interface ChannelsFormActions {
+  /** Replace the whole channel list (add/edit/remove go through here). */
+  setChannels: (channels: ChannelDraft[]) => void
+  /** Stage a key for one channel ('' clears; undefined = no staged change). */
+  setChannelKey: (id: string, value: string | undefined) => void
+  /** Stage the default-channel flag. */
+  setDefaultChannel: (id: string) => void
+  /** Write every staged edit, then re-seed from what the Host accepted. */
+  commit: () => Promise<void>
+  /** Drop every staged edit. */
+  discard: () => void
+}
+
+/** Deep equality over JSON-compatible data (the change predicate). */
+function deepEqualJson(a: unknown, b: unknown): boolean {
+  if (a === b) return true
+  if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null) return false
+  if (Array.isArray(a) || Array.isArray(b)) {
+    if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) return false
+    return a.every((entry, index) => deepEqualJson(entry, b[index]))
+  }
+  const left = a as Record<string, unknown>
+  const right = b as Record<string, unknown>
+  const keys = Object.keys(left)
+  if (keys.length !== Object.keys(right).length) return false
+  return keys.every(key => key in right && deepEqualJson(left[key], right[key]))
+}
+
+/** Trim and normalize a draft channel (models never carry empty aliases). */
+function stripChannel(channel: ChannelDraft): ChannelDraft {
+  const models = channel.models
+    .map(model => ({ alias: model.alias.trim(), id: model.id.trim() === '' ? model.alias.trim() : model.id.trim() }))
+    .filter(model => model.alias !== '')
+  return {
+    id: channel.id,
+    preset: channel.preset,
+    name: channel.name.trim(),
+    apiUrl: channel.apiUrl.trim(),
+    models: [...new Map(models.map(model => [model.alias, model])).values()],
+  }
+}
+
+export class ChannelsForm {
+  private stagedChannels: ChannelDraft[] | null = null
+  private readonly stagedKeys = new Map<string, KeyEdit>()
+  private stagedDefault: string | null = null
+  private readonly listeners = new Set<() => void>()
+  private saving = false
+  private failed = false
+
+  constructor(private readonly scope: AudiogenScope) {
+    scope.subscribe(() => { this.publish() })
+    scope.subscribeSecretSets(() => { this.publish() })
+  }
+
+  /** Publish a projection of this form, rebuilt on every scope or draft change. */
+  bind<S>(project: () => S): SnapshotStore<S> {
+    const store = createSnapshotStore(project())
+    this.listeners.add(() => { store.set(project()) })
+    return store
+  }
+
+  /** Subscribe to staged and persisted channel changes. */
+  subscribe(listener: () => void): () => void {
+    this.listeners.add(listener)
+    return () => { this.listeners.delete(listener) }
+  }
+
+  /** The staged channel list, or the scope value when nothing is staged. */
+  private channelsValue(): ChannelDraft[] {
+    const view = this.scope.getSnapshot().value as { channels?: ChannelConfig[] } | undefined
+    return this.stagedChannels ?? (Array.isArray(view?.channels) ? view.channels.map(toDraft) : [])
+  }
+
+  /** Whether a channel currently holds a stored or staged secret. */
+  private keyHeld(id: string): boolean {
+    const edit = this.stagedKeys.get(id)
+    if (edit !== undefined) return edit.kind === 'set' && edit.value !== ''
+    return this.scope.getSecretSetSnapshot(`channelSecrets.${id}`)
+  }
+
+  private defaultValue(): string {
+    if (this.stagedDefault !== null) return this.stagedDefault
+    const view = this.scope.getSnapshot().value as { defaultChannelId?: string } | undefined
+    const channels = this.channelsValue()
+    if (view?.defaultChannelId !== undefined && channels.some(channel => channel.id === view.defaultChannelId)) return view.defaultChannelId
+    return channels[0]?.id ?? ''
+  }
+
+  private dirtyValue(): boolean {
+    const channels = this.channelsValue()
+    const stagedChanged = this.stagedChannels !== null && !deepEqualJson(this.stagedChannels, scopeChannelsOf(this.scope))
+    const scopeView = this.scope.getSnapshot().value as { defaultChannelId?: string } | undefined
+    const scopeDefault = scopeView?.defaultChannelId ?? channels[0]?.id ?? ''
+    const defaultChanged = this.stagedDefault !== null && this.stagedDefault !== scopeDefault
+    return stagedChanged || defaultChanged || this.stagedKeys.size > 0
+  }
+
+  /** The card-facing snapshot. */
+  snapshot(): ChannelsFormState {
+    const channels = this.channelsValue()
+    const keySet: Record<string, boolean> = {}
+    for (const channel of channels) keySet[channel.id] = this.keyHeld(channel.id)
+    return {
+      channels,
+      keySet,
+      defaultChannelId: this.defaultValue(),
+      dirty: this.dirtyValue(),
+      writable: this.scope.getSnapshot().writable !== false,
+      saving: this.saving,
+      failed: this.failed,
+    }
+  }
+
+  /** The actions the card's slot registration injects. */
+  actions(): ChannelsFormActions {
+    return {
+      setChannels: (channels) => { this.stageChannels(channels) },
+      setChannelKey: (id, value) => { this.stageKey(id, value) },
+      setDefaultChannel: (id) => { this.stagedDefault = id; this.failed = false; this.publish() },
+      commit: () => this.commit(),
+      discard: () => {
+        if (this.stagedChannels === null && this.stagedKeys.size === 0 && this.stagedDefault === null && !this.failed) return
+        this.stagedChannels = null
+        this.stagedKeys.clear()
+        this.stagedDefault = null
+        this.failed = false
+        this.publish()
+      },
+    }
+  }
+
+  // ------------------------------------------------------------------ staging
+
+  private stageChannels(channels: ChannelDraft[]): void {
+    const cleaned = channels.map(stripChannel)
+    this.stagedChannels = cleaned
+    this.failed = false
+    this.publish()
+  }
+
+  private stageKey(id: string, value: string | undefined): void {
+    if (value === undefined || value.trim() === '') {
+      if (this.keyHeld(id)) this.stagedKeys.set(id, { kind: 'clear' })
+      // An empty key for a key-less channel stages nothing.
+    } else {
+      this.stagedKeys.set(id, { kind: 'set', value: value.trim() })
+    }
+    this.failed = false
+    this.publish()
+  }
+
+  // ----------------------------------------------------------------- save
+
+  /** Build the single batch of path ops a save performs. */
+  private planOps(): SettingsOp[] {
+    const ops: SettingsOp[] = []
+    if (this.stagedChannels !== null) {
+      ops.push({ op: 'set', path: ['channels'], value: this.stagedChannels })
+      // Once channels exist, the legacy flat fields are obsolete (idempotent).
+      ops.push({ op: 'unset', path: ['apiUrl'] })
+      ops.push({ op: 'unset', path: ['apiKey'] })
+      ops.push({ op: 'unset', path: ['imageModels'] })
+    }
+    for (const [id, edit] of this.stagedKeys) {
+      if (edit.kind === 'set') ops.push({ op: 'set', path: ['channelSecrets', id], value: edit.value })
+      else ops.push({ op: 'unset', path: ['channelSecrets', id] })
+    }
+    if (this.stagedDefault !== null) {
+      ops.push({ op: 'set', path: ['defaultChannelId'], value: this.stagedDefault })
+    }
+    return ops
+  }
+
+  /**
+   * Write every staged edit, then re-seed from what the Host accepted.
+   * @returns settlement after the write settles.
+   */
+  async commit(): Promise<void> {
+    if (this.saving) return
+    const ops = this.planOps()
+    if (ops.length === 0) return
+    this.saving = true
+    this.failed = false
+    this.publish()
+    try {
+      await this.scope.mutateOps(ops)
+      this.stagedChannels = null
+      this.stagedKeys.clear()
+      this.stagedDefault = null
+      this.failed = false
+    } catch {
+      this.failed = true
+    } finally {
+      this.saving = false
+      this.publish()
+    }
+  }
+
+  private publish(): void {
+    for (const listener of [...this.listeners]) listener()
+  }
+}
+
+/** Project a stored channel into a draft (secrets never travel in channels). */
+function toDraft(channel: ChannelConfig): ChannelDraft {
+  return { id: channel.id, preset: channel.preset, name: channel.name, apiUrl: channel.apiUrl, models: channel.models.map(model => ({ ...model })) }
+}
+
+/** The scope's current channels value (a plain array), for change detection. */
+function scopeChannelsOf(scope: AudiogenScope): unknown {
+  const view = scope.getSnapshot().value as { channels?: unknown } | undefined
+  return Array.isArray(view?.channels) ? view.channels : []
+}

package/src/client/controller.ts

@@ -0,0 +1,44 @@
+/**
+ * Audio panel controller: the single owner of the panel's open/closed state.
+ * Framework-free so the DOM mounts and the React panel share one tiny
+ * subscription surface.
+ */
+
+export interface AudioGenControllerSnapshot {
+  panelOpen: boolean
+}
+
+export class AudioGenController {
+  private panelOpen = false
+  private listeners = new Set<() => void>()
+
+  getSnapshot(): AudioGenControllerSnapshot {
+    return { panelOpen: this.panelOpen }
+  }
+
+  subscribe(fn: () => void): () => void {
+    this.listeners.add(fn)
+    return () => { this.listeners.delete(fn) }
+  }
+
+  open(): void {
+    if (this.panelOpen) return
+    this.panelOpen = true
+    this.notify()
+  }
+
+  close(): void {
+    if (!this.panelOpen) return
+    this.panelOpen = false
+    this.notify()
+  }
+
+  toggle(): void {
+    if (this.panelOpen) this.close()
+    else this.open()
+  }
+
+  private notify(): void {
+    for (const fn of [...this.listeners]) fn()
+  }
+}

package/src/client/css-modules.d.ts

@@ -0,0 +1,5 @@
+/** CSS Modules type shim (the bundle inlines the compiled class map). */
+declare module '*.module.css' {
+  const classes: Record<string, string>
+  export default classes
+}