@dickpy/dsh-imagegen 1.0.7 → 1.0.19

package/src/client/TemplateLibrary.tsx

@@ -0,0 +1,336 @@
+/**
+ * Prompt-template library overlay: a searchable, category-filtered gallery of
+ * the bundled awesome-gpt-image-2 cases. The case list is served by the host
+ * (bundled snapshot, optionally refreshed online); reference images load
+ * lazily through the host's caching proxy, so browsing progressively mirrors
+ * the gallery onto the local disk. Picking a template hands its prompt back
+ * to the studio form.
+ */
+
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { Button } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { ImageGenApi } from './api.ts'
+import { errorMessage, tt } from './helpers.ts'
+import { TEMPLATES_API, type TemplateCase, type TemplateListResult } from '../protocol.ts'
+import css from './templates.module.css'
+
+/** Concurrent image downloads while caching the whole gallery offline. */
+const CACHE_ALL_CONCURRENCY = 4
+
+/** Same-origin URL of one case's reference image (host caching proxy). */
+function imageUrlOf(item: TemplateCase): string {
+  return `${TEMPLATES_API.image}/${encodeURIComponent(item.image)}`
+}
+
+/** A card thumbnail that falls back to a placeholder when the proxy 404s. */
+function TemplateThumb(props: { item: TemplateCase }) {
+  const [failed, setFailed] = useState(false)
+  if (props.item.image === '' || failed) {
+    return (
+      <span className={css.thumbPlaceholder} aria-hidden="true">
+        <svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="3"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
+      </span>
+    )
+  }
+  return (
+    <img
+      className={css.thumb}
+      src={imageUrlOf(props.item)}
+      alt={props.item.title}
+      loading="lazy"
+      onError={() => { setFailed(true) }}
+    />
+  )
+}
+
+/** The template-library modal. Rendered through a portal above the studio. */
+export function TemplateLibrary(props: {
+  api: ImageGenApi
+  /** Hand a picked prompt back to the studio form and close the library. */
+  onUse: (prompt: string) => void
+  onClose: () => void
+}) {
+  const { api, onUse, onClose } = props
+  const [list, setList] = useState<TemplateListResult | null>(null)
+  const [loadError, setLoadError] = useState<string | null>(null)
+  const [query, setQuery] = useState('')
+  const [category, setCategory] = useState('')
+  const [selected, setSelected] = useState<TemplateCase | null>(null)
+  const [copied, setCopied] = useState(false)
+  const [refreshing, setRefreshing] = useState(false)
+  const [notice, setNotice] = useState<string | null>(null)
+  const [cacheAll, setCacheAll] = useState<{ running: boolean; done: number; total: number }>({ running: false, done: 0, total: 0 })
+  const searchRef = useRef<HTMLInputElement>(null)
+  const load = (): void => {
+    api.templatesList()
+      .then(result => { setList(result); setLoadError(null) })
+      .catch(caught => { setLoadError(errorMessage(caught)) })
+  }
+
+  // Load once on open; focus the search box for immediate typing.
+  useEffect(() => {
+    load()
+    searchRef.current?.focus()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const categories = useMemo(() => {
+    if (list === null) return [] as Array<{ key: string; label: string; count: number }>
+    const counts = new Map<string, { label: string; count: number }>()
+    for (const item of list.cases) {
+      const entry = counts.get(item.category) ?? { label: item.categoryZh || item.category, count: 0 }
+      entry.count += 1
+      counts.set(item.category, entry)
+    }
+    return [...counts.entries()].map(([key, value]) => ({ key, label: value.label, count: value.count }))
+  }, [list])
+
+  const filtered = useMemo(() => {
+    if (list === null) return [] as TemplateCase[]
+    const needle = query.trim().toLowerCase()
+    return list.cases.filter(item => {
+      if (category !== '' && item.category !== category) return false
+      if (needle === '') return true
+      return item.title.toLowerCase().includes(needle)
+        || item.prompt.toLowerCase().includes(needle)
+        || item.sourceLabel.toLowerCase().includes(needle)
+    })
+  }, [list, query, category])
+
+  // Escape backs out of the detail view first, then closes the modal.
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent): void => {
+      if (event.key !== 'Escape') return
+      event.stopPropagation()
+      if (selected !== null) setSelected(null)
+      else onClose()
+    }
+    window.addEventListener('keydown', onKey, true)
+    return () => window.removeEventListener('keydown', onKey, true)
+  }, [selected, onClose])
+
+  const refresh = async (): Promise<void> => {
+    if (refreshing) return
+    setRefreshing(true)
+    setNotice(null)
+    try {
+      const result = await api.templatesRefresh()
+      const reloaded = await api.templatesList()
+      setList(reloaded)
+      setLoadError(null)
+      setNotice(tt('templates.refreshed', { count: result.total }))
+    } catch (caught) {
+      setNotice(tt('templates.refreshFailed', { error: errorMessage(caught) }))
+    } finally {
+      setRefreshing(false)
+    }
+  }
+
+  /** Mirror every reference image through the host cache (offline browsing). */
+  const cacheAllImages = async (): Promise<void> => {
+    if (cacheAll.running || list === null) return
+    const files = [...new Set(list.cases.map(item => item.image).filter(name => name !== ''))]
+    setCacheAll({ running: true, done: 0, total: files.length })
+    let index = 0
+    const worker = async (): Promise<void> => {
+      while (index < files.length) {
+        const file = files[index]!
+        index += 1
+        try {
+          await fetch(`${TEMPLATES_API.image}/${encodeURIComponent(file)}`)
+        } catch { /* individual failures are retried on the next run */ }
+        setCacheAll(current => ({ ...current, done: current.done + 1 }))
+      }
+    }
+    await Promise.all(Array.from({ length: CACHE_ALL_CONCURRENCY }, () => worker()))
+    setCacheAll({ running: false, done: files.length, total: files.length })
+  }
+
+  const copyPrompt = async (text: string): Promise<void> => {
+    try {
+      if (navigator.clipboard?.writeText !== undefined) {
+        await navigator.clipboard.writeText(text)
+      } else {
+        const textarea = document.createElement('textarea')
+        textarea.value = text
+        textarea.style.position = 'fixed'
+        textarea.style.opacity = '0'
+        document.body.appendChild(textarea)
+        textarea.select()
+        const copiedOk = document.execCommand('copy')
+        textarea.remove()
+        if (!copiedOk) throw new Error('copy failed')
+      }
+      setCopied(true)
+      window.setTimeout(() => { setCopied(false) }, 1800)
+    } catch {
+      setCopied(false)
+    }
+  }
+
+  const originLabel = list === null ? '' : tt(list.origin === 'refreshed' ? 'templates.origin.refreshed' : 'templates.origin.bundled')
+
+  return createPortal(
+    <div className={css.overlay} role="dialog" aria-modal="true" aria-label={tt('templates.title')} onClick={onClose}>
+      <section className={css.shell} onClick={(event) => { event.stopPropagation() }}>
+        <header className={css.header}>
+          <span className={css.heading}>
+            <h3 className={css.title}>{tt('templates.title')}</h3>
+            {list !== null ? (
+              <span className={css.meta}>{tt('templates.meta', { count: list.total, origin: originLabel })}</span>
+            ) : null}
+          </span>
+          <span className={css.headerActions}>
+            <Button variant="outline" size="sm" disabled={refreshing || cacheAll.running} onClick={() => { void refresh() }}>
+              {refreshing ? tt('templates.refreshing') : tt('templates.refresh')}
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={list === null || cacheAll.running}
+              title={tt('templates.cacheAllHint')}
+              onClick={() => { void cacheAllImages() }}
+            >
+              {cacheAll.running
+                ? tt('templates.caching', { done: cacheAll.done, total: cacheAll.total })
+                : cacheAll.total > 0 && cacheAll.done === cacheAll.total
+                  ? tt('templates.cached')
+                  : tt('templates.cacheAll')}
+            </Button>
+            <button type="button" className={css.close} aria-label={tt('templates.close')} title={tt('templates.close')} onClick={onClose}>
+              <svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg>
+            </button>
+          </span>
+        </header>
+
+        <div className={css.toolbar}>
+          <input
+            ref={searchRef}
+            type="search"
+            className={css.search}
+            placeholder={tt('templates.search')}
+            value={query}
+            onChange={(event) => { setQuery(event.target.value) }}
+          />
+          <div className={css.categoryRow}>
+            <button
+              type="button"
+              className={css.categoryPill}
+              data-active={category === '' ? '' : undefined}
+              onClick={() => { setCategory('') }}
+            >
+              {tt('templates.all')}{list !== null ? ` ${list.total}` : ''}
+            </button>
+            {categories.map(entry => (
+              <button
+                key={entry.key}
+                type="button"
+                className={css.categoryPill}
+                data-active={category === entry.key ? '' : undefined}
+                onClick={() => { setCategory(entry.key) }}
+              >
+                {entry.label} {entry.count}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {notice !== null ? <div className={css.notice} role="status">{notice}</div> : null}
+
+        <div className={css.body}>
+          {list === null && loadError === null ? (
+            <div className={css.state} role="status">
+              <span className={css.spinner} />
+              <span>{tt('templates.loading')}</span>
+            </div>
+          ) : null}
+
+          {loadError !== null ? (
+            <div className={css.state} role="alert">
+              <span>{tt('templates.loadFailed', { error: loadError })}</span>
+              <Button variant="outline" size="sm" onClick={() => { setLoadError(null); setList(null); load() }}>
+                {tt('templates.retry')}
+              </Button>
+            </div>
+          ) : null}
+
+          {list !== null && filtered.length === 0 ? (
+            <div className={css.state}>{tt('templates.empty')}</div>
+          ) : null}
+
+          {list !== null && filtered.length > 0 ? (
+            <div className={css.grid}>
+              {filtered.map(item => (
+                <button
+                  key={item.id}
+                  type="button"
+                  className={css.card}
+                  onClick={() => { setSelected(item); setCopied(false) }}
+                >
+                  <span className={css.thumbWrap}>
+                    <TemplateThumb item={item} />
+                    {item.featured ? <span className={css.featuredBadge}>{tt('templates.featured')}</span> : null}
+                  </span>
+                  <span className={css.cardBody}>
+                    <span className={css.cardTitle}>{item.title}</span>
+                    <span className={css.cardMeta}>
+                      <span className={css.cardCategory}>{item.categoryZh || item.category}</span>
+                      {item.sourceLabel !== '' ? <span className={css.cardSource}>{item.sourceLabel}</span> : null}
+                    </span>
+                  </span>
+                </button>
+              ))}
+            </div>
+          ) : null}
+        </div>
+
+        <footer className={css.footer}>
+          <span className={css.attribution}>{tt('templates.attribution')}</span>
+          <a className={css.sourceLink} href="https://vibeui.top/" target="_blank" rel="noreferrer">
+            {tt('templates.source')}
+          </a>
+        </footer>
+      </section>
+
+      {selected !== null ? (
+        <div className={css.detailOverlay} onClick={() => { setSelected(null) }}>
+          <section className={css.detail} onClick={(event) => { event.stopPropagation() }}>
+            <div className={css.detailMedia}>
+              {selected.image !== '' ? (
+                <img className={css.detailImage} src={imageUrlOf(selected)} alt={selected.title} />
+              ) : (
+                <span className={css.thumbPlaceholder} aria-hidden="true" />
+              )}
+            </div>
+            <div className={css.detailInfo}>
+              <h4 className={css.detailTitle}>{selected.title}</h4>
+              <div className={css.detailMeta}>
+                <span className={css.cardCategory}>{selected.categoryZh || selected.category}</span>
+                {selected.sourceUrl !== '' ? (
+                  <a className={css.detailLink} href={selected.sourceUrl} target="_blank" rel="noreferrer">{selected.sourceLabel || selected.sourceUrl}</a>
+                ) : null}
+                {selected.githubUrl !== '' ? (
+                  <a className={css.detailLink} href={selected.githubUrl} target="_blank" rel="noreferrer">GitHub</a>
+                ) : null}
+              </div>
+              <pre className={css.detailPrompt}>{selected.prompt}</pre>
+              <div className={css.detailActions}>
+                <Button variant="primary" size="md" onClick={() => { onUse(selected.prompt) }}>
+                  {tt('templates.use')}
+                </Button>
+                <Button variant="outline" size="md" onClick={() => { void copyPrompt(selected.prompt) }}>
+                  {copied ? tt('templates.copied') : tt('templates.copy')}
+                </Button>
+                <Button variant="outline" size="md" onClick={() => { setSelected(null) }}>
+                  {tt('templates.back')}
+                </Button>
+              </div>
+            </div>
+          </section>
+        </div>
+      ) : null}
+    </div>,
+    document.body,
+  )
+}

package/src/client/api.ts

@@ -3,7 +3,7 @@
  * data access path the panel uses — plain fetch, same origin.
  */
 
-import { GENERATE_API, HISTORY_API, UPDATE_API, type GenerateRequest, type GenerateResult, type HistoryEntry, type UpdateInfo } from '../protocol.ts'
+import { GALLERY_API, GENERATE_API, HISTORY_API, TEMPLATES_API, UPDATE_API, type GenerateRequest, type GenerateResult, type HistoryEntry, type HistoryEntryInput, type TemplateListResult, type TemplateRefreshResult, type UpdateInfo } from '../protocol.ts'
 
 /** Error carrying the route's JSON error message. */
 export class ImageGenApiError extends Error {
@@ -97,4 +97,61 @@ export class ImageGenApi {
     const body = await readEnvelope<{ ok: true; entries: HistoryEntry[] }>(response)
     return body.entries
   }
+
+  /** List the host-persisted gallery (newest first). */
+  async galleryList(): Promise<HistoryEntry[]> {
+    const response = await fetch(GALLERY_API.list, { method: 'POST' })
+    const body = await readEnvelope<{ ok: true; entries: HistoryEntry[] }>(response)
+    return body.entries
+  }
+
+  /** Append one image to the gallery. The host assigns the id and skips the
+   *  append when a content-identical image is already in the gallery. */
+  async galleryAppend(entry: HistoryEntryInput): Promise<{ entries: HistoryEntry[]; added: boolean }> {
+    const response = await fetch(GALLERY_API.append, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ entry }),
+    })
+    const body = await readEnvelope<{ ok: true; entries: HistoryEntry[]; added: boolean }>(response)
+    return { entries: body.entries, added: body.added }
+  }
+
+  /** Remove one gallery entry by id. */
+  async galleryRemove(id: string): Promise<HistoryEntry[]> {
+    const response = await fetch(GALLERY_API.remove, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ id }),
+    })
+    const body = await readEnvelope<{ ok: true; entries: HistoryEntry[] }>(response)
+    return body.entries
+  }
+
+  /** Clear the entire gallery. */
+  async galleryClear(): Promise<HistoryEntry[]> {
+    const response = await fetch(GALLERY_API.clear, { method: 'POST' })
+    const body = await readEnvelope<{ ok: true; entries: HistoryEntry[] }>(response)
+    return body.entries
+  }
+
+  /** Fetch the prompt-template library (bundled snapshot or refreshed copy). */
+  async templatesList(): Promise<TemplateListResult> {
+    const response = await fetch(TEMPLATES_API.list, { method: 'POST' })
+    const body = await readEnvelope<TemplateListResult & { ok: true }>(response)
+    return {
+      cases: body.cases,
+      total: body.total,
+      origin: body.origin,
+      repository: body.repository,
+      fetchedAt: body.fetchedAt,
+    }
+  }
+
+  /** Re-download the template library from the upstream mirror (host-side). */
+  async templatesRefresh(): Promise<TemplateRefreshResult> {
+    const response = await fetch(TEMPLATES_API.refresh, { method: 'POST' })
+    const body = await readEnvelope<TemplateRefreshResult & { ok: true }>(response)
+    return { total: body.total, fetchedAt: body.fetchedAt }
+  }
 }

package/src/client/locales.ts

@@ -4,9 +4,9 @@
 
 export const zh = {
   'entry.label': 'AI 生图',
-  'entry.tooltip': 'AI 生图面板（gpt-image-2）',
+  'entry.tooltip': 'AI 生图面板（gpt-image-2 / grok-imagine-image）',
   'panel.title': 'AI 生图',
-  'panel.subtitle': 'gpt-image-2 图像生成',
+  'panel.githubTip': '觉得好用或有建议？欢迎来 GitHub 提 issues、点个 star 支持一下！',
   // mode
   'mode.text': '文生图',
   'mode.edit': '图生图',
@@ -20,16 +20,18 @@ export const zh = {
   'params.count': '生成数量',
   'params.detail': '细节',
   'size.auto': '自动',
-  'size.square': '1024×1024',
-  'size.landscape': '1536×1024',
-  'size.portrait': '1024×1536',
-  'size.small': '512×512',
-  'size.wide': '1792×1024',
-  'size.tall': '1024×1792',
+  'size.square': '1:1 方图',
+  'size.portrait34': '3:4 标准竖图',
+  'size.landscape43': '4:3 标准横图',
+  'size.portrait916': '9:16 竖屏',
+  'size.portrait23': '2:3 竖图',
+  'size.landscape32': '3:2 横图',
+  'size.wide169': '16:9 宽屏',
+  'size.ultrawide21': '21:9 超宽屏',
   'quality.auto': '自动',
-  'quality.low': '低',
-  'quality.medium': '中',
-  'quality.high': '高',
+  'quality.1k': '1K',
+  'quality.2k': '2K',
+  'quality.4k': '4K',
   'count.one': '1 张',
   'count.two': '2 张',
   'count.three': '3 张',
@@ -65,6 +67,29 @@ export const zh = {
   'history.delete': '删除',
   'history.images': '张',
   'history.viewing': '历史 · {time}',
+  // gallery
+  'gallery.title': '画廊',
+  'gallery.categories': '分类',
+  'gallery.all': '全部作品',
+  'gallery.gpt': 'gpt-image-2',
+  'gallery.grok': 'grok-imagine-image',
+  'gallery.ratio': '画面比例',
+  'gallery.filterHint': '按生成模式、模型和比例筛选画廊',
+  'gallery.count': '· 共 {count} 幅',
+  'gallery.viewMode': '视图模式',
+  'gallery.masonry': '瀑布流',
+  'gallery.grid': '整齐网格',
+  'gallery.sort': '排序',
+  'gallery.newest': '最新发布',
+  'gallery.oldest': '最早发布',
+  'gallery.untitled': '未命名作品',
+  'gallery.add': '加入画廊',
+  'gallery.added': '已加入画廊',
+  'gallery.already': '已在画廊中',
+  'gallery.delete': '移出画廊',
+  'gallery.clear': '清空画廊',
+  'gallery.empty': '画廊还是空的，把喜欢的图片加入进来吧',
+  'gallery.viewing': '画廊 · {time}',
   // preview
   'preview.title': '图片预览',
   'preview.open': '点击预览',
@@ -122,13 +147,41 @@ export const zh = {
   'settings.overridden': '已覆盖',
   'settings.reset': '重置',
   'settings.invalidNumber': '请输入有效数字',
+  // template library
+  'templates.open': '模板库',
+  'templates.title': '提示词模板库',
+  'templates.meta': '共 {count} 个模板 · {origin}',
+  'templates.origin.bundled': '内置快照',
+  'templates.origin.refreshed': '在线刷新',
+  'templates.search': '搜索模板标题或提示词…',
+  'templates.all': '全部',
+  'templates.close': '关闭',
+  'templates.back': '返回列表',
+  'templates.use': '使用此提示词',
+  'templates.copy': '复制提示词',
+  'templates.copied': '已复制',
+  'templates.refresh': '刷新模板库',
+  'templates.refreshing': '刷新中…',
+  'templates.refreshed': '已刷新，共 {count} 个模板',
+  'templates.refreshFailed': '刷新失败：{error}',
+  'templates.cacheAll': '缓存全部图片',
+  'templates.cacheAllHint': '通过本机代理把全部参考图缓存到本地磁盘，之后离线也能浏览',
+  'templates.caching': '缓存中 {done}/{total}…',
+  'templates.cached': '图片已全部缓存',
+  'templates.empty': '没有匹配的模板',
+  'templates.loading': '正在加载模板库…',
+  'templates.loadFailed': '模板库加载失败：{error}',
+  'templates.retry': '重试',
+  'templates.attribution': '模板与图片来自 awesome-gpt-image-2 项目，作者链接见各模板详情',
+  'templates.source': '来源：vibeui.top',
+  'templates.featured': '精选',
 } as const
 
 export const en: Record<keyof typeof zh, string> = {
   'entry.label': 'AI Image',
-  'entry.tooltip': 'AI image generation studio (gpt-image-2)',
+  'entry.tooltip': 'AI image generation studio (gpt-image-2 / grok-imagine-image)',
   'panel.title': 'AI Image',
-  'panel.subtitle': 'gpt-image-2 image generation',
+  'panel.githubTip': 'Like it or have suggestions? Head to GitHub to open issues and star us!',
   'mode.text': 'Text to Image',
   'mode.edit': 'Image to Image',
   'prompt.placeholder': 'Describe the picture you want, e.g. an orange cat in an astronaut helmet raising a telescope on the moon, watercolor style, soft light…',
@@ -139,16 +192,18 @@ export const en: Record<keyof typeof zh, string> = {
   'params.count': 'Count',
   'params.detail': 'Detail',
   'size.auto': 'Auto',
-  'size.square': '1024×1024',
-  'size.landscape': '1536×1024',
-  'size.portrait': '1024×1536',
-  'size.small': '512×512',
-  'size.wide': '1792×1024',
-  'size.tall': '1024×1792',
+  'size.square': '1:1 Square',
+  'size.portrait34': '3:4 Portrait',
+  'size.landscape43': '4:3 Landscape',
+  'size.portrait916': '9:16 Vertical',
+  'size.portrait23': '2:3 Portrait',
+  'size.landscape32': '3:2 Landscape',
+  'size.wide169': '16:9 Widescreen',
+  'size.ultrawide21': '21:9 Ultrawide',
   'quality.auto': 'Auto',
-  'quality.low': 'Low',
-  'quality.medium': 'Medium',
-  'quality.high': 'High',
+  'quality.1k': '1K',
+  'quality.2k': '2K',
+  'quality.4k': '4K',
   'count.one': '1',
   'count.two': '2',
   'count.three': '3',
@@ -180,6 +235,28 @@ export const en: Record<keyof typeof zh, string> = {
   'history.delete': 'Delete',
   'history.images': 'images',
   'history.viewing': 'History · {time}',
+  'gallery.title': 'Gallery',
+  'gallery.categories': 'Categories',
+  'gallery.all': 'All works',
+  'gallery.gpt': 'gpt-image-2',
+  'gallery.grok': 'grok-imagine-image',
+  'gallery.ratio': 'Aspect ratio',
+  'gallery.filterHint': 'Filter by mode, model, and aspect ratio',
+  'gallery.count': '· {count} works',
+  'gallery.viewMode': 'View mode',
+  'gallery.masonry': 'Masonry',
+  'gallery.grid': 'Grid',
+  'gallery.sort': 'Sort',
+  'gallery.newest': 'Newest',
+  'gallery.oldest': 'Oldest',
+  'gallery.untitled': 'Untitled work',
+  'gallery.add': 'Add to gallery',
+  'gallery.added': 'Added to gallery',
+  'gallery.already': 'Already in gallery',
+  'gallery.delete': 'Remove',
+  'gallery.clear': 'Clear gallery',
+  'gallery.empty': 'The gallery is empty — add images you like here',
+  'gallery.viewing': 'Gallery · {time}',
   'preview.title': 'Image preview',
   'preview.open': 'Click to preview',
   'preview.close': 'Close',
@@ -233,6 +310,34 @@ export const en: Record<keyof typeof zh, string> = {
   'settings.overridden': 'Overridden',
   'settings.reset': 'Reset',
   'settings.invalidNumber': 'Enter a valid number',
+  // template library
+  'templates.open': 'Templates',
+  'templates.title': 'Prompt Template Library',
+  'templates.meta': '{count} templates · {origin}',
+  'templates.origin.bundled': 'bundled snapshot',
+  'templates.origin.refreshed': 'refreshed online',
+  'templates.search': 'Search template titles or prompts…',
+  'templates.all': 'All',
+  'templates.close': 'Close',
+  'templates.back': 'Back to list',
+  'templates.use': 'Use this prompt',
+  'templates.copy': 'Copy prompt',
+  'templates.copied': 'Copied',
+  'templates.refresh': 'Refresh library',
+  'templates.refreshing': 'Refreshing…',
+  'templates.refreshed': 'Refreshed — {count} templates',
+  'templates.refreshFailed': 'Refresh failed: {error}',
+  'templates.cacheAll': 'Cache all images',
+  'templates.cacheAllHint': 'Mirror every reference image to local disk through the host proxy, for offline browsing',
+  'templates.caching': 'Caching {done}/{total}…',
+  'templates.cached': 'All images cached',
+  'templates.empty': 'No matching templates',
+  'templates.loading': 'Loading the template library…',
+  'templates.loadFailed': 'Failed to load the library: {error}',
+  'templates.retry': 'Retry',
+  'templates.attribution': 'Templates and images come from the awesome-gpt-image-2 project; author links are on each template',
+  'templates.source': 'Source: vibeui.top',
+  'templates.featured': 'Featured',
 }
 
 /** Locale key union. */

package/src/client/mount.tsx

@@ -3,11 +3,16 @@
  *
  * The `conversation` slot is single-occupant (ui-conversation) and external
  * plugins cannot declare slots, so the panel takes over the center column at
- * the DOM level: a container is appended inside the `[data-pane="conversation"]`
- * grid item (an extra trailing child React never manages), and a stylesheet
- * rule hides the conversation content while the panel is active. Toggling is
- * a data attribute on <html> — no React involvement, so the conversation
- * subtree underneath stays mounted and stateful.
+ * the DOM level: a container is appended inside the conversation grid item
+ * (an extra trailing child React never manages), and a stylesheet rule hides
+ * the conversation content while the panel is active. Toggling is a data
+ * attribute on <html> — no React involvement, so the conversation subtree
+ * underneath stays mounted and stateful.
+ *
+ * Shell compatibility: the center column is `[data-pane="conversation"]` on
+ * legacy shells and `[class*="centerCol"]` on the rc.6+ AppFrame layout (the
+ * same dual selector the dsh-ssh / task-board panels use); both are queried
+ * and both get the `position: relative` base in panel.module.css.
  */
 
 import { createRoot, type Root } from 'react-dom/client'
@@ -20,7 +25,7 @@ import css from './panel.module.css'
 /** The injected panel container (kept in the DOM, hidden when inactive). */
 export const PANEL_VIEW_SELECTOR = '[data-dsh-imagegen-view]'
 
-const CONVERSATION_COLUMN_SELECTOR = '[data-pane="conversation"]'
+const CONVERSATION_COLUMN_SELECTOR = '[data-pane="conversation"], [class*="centerCol"]'
 const ACTIVE_ATTR = 'data-dsh-imagegen-active'
 /** Sibling panels' activation attributes, removed when this panel opens. */
 const OTHER_ACTIVE_ATTRS = ['data-dsh-taskboard-active', 'data-dsh-ssh-active']